diff --git a/dist/common/ui.d.ts b/dist/common/ui.d.ts
new file mode 100644
index 0000000..4af34ce
--- /dev/null
+++ b/dist/common/ui.d.ts
@@ -0,0 +1,113 @@
+import { BoxProps } from '../components/Box';
+import { BooleanLike } from './react';
+type UnitMapper = (value: unknown) => string | undefined;
+/**
+ * Coverts our rem-like spacing unit into a CSS unit.
+ */
+export declare const unit: UnitMapper;
+/**
+ * Same as `unit`, but half the size for integers numbers.
+ */
+export declare const halfUnit: UnitMapper;
+export type StringStyleMap = {
+    /** Align text inside the box. */
+    align: string | BooleanLike;
+    /** A direct mapping to `position` CSS property. */
+    position: string | BooleanLike;
+    /** Vertical align property. */
+    verticalAlign: string | BooleanLike;
+    /** Sets background color. */
+    backgroundColor: string | BooleanLike;
+    /** Applies an atomic `color-<name>` class to the element. */
+    color: string | BooleanLike;
+    /** Opacity, from 0 to 1. */
+    opacity: string | BooleanLike;
+    /** Sets text color. */
+    textColor: string | BooleanLike;
+    /** Margin on all sides. */
+    m: string | BooleanLike;
+    /** Bottom margin. */
+    mb: string | BooleanLike;
+    /** Left margin. */
+    ml: string | BooleanLike;
+    /** Right margin. */
+    mr: string | BooleanLike;
+    /** Top margin. */
+    mt: string | BooleanLike;
+    /** Horizontal margin. */
+    mx: string | BooleanLike;
+    /** Vertical margin. */
+    my: string | BooleanLike;
+    /** Bottom margin. */
+    bottom: string | BooleanLike;
+    /** Left margin. */
+    left: string | BooleanLike;
+    /** Right margin. */
+    right: string | BooleanLike;
+    /** Top margin. */
+    top: string | BooleanLike;
+    /** Overflow property. */
+    overflow: string | BooleanLike;
+    /** Overflow-X property. */
+    overflowX: string | BooleanLike;
+    /** Overflow-Y property. */
+    overflowY: string | BooleanLike;
+    /** Padding on all sides. */
+    p: string | BooleanLike;
+    /** Bottom padding. */
+    pb: string | BooleanLike;
+    /** Left padding. */
+    pl: string | BooleanLike;
+    /** Right padding. */
+    pr: string | BooleanLike;
+    /** Top padding. */
+    pt: string | BooleanLike;
+    /** Horizontal padding. */
+    px: string | BooleanLike;
+    /** Vertical padding. */
+    py: string | BooleanLike;
+    /** Box height. */
+    height: string | BooleanLike;
+    /** Box maximum height. */
+    maxHeight: string | BooleanLike;
+    /** Box maximum width. */
+    maxWidth: string | BooleanLike;
+    /** Box minimum height. */
+    minHeight: string | BooleanLike;
+    /** Box minimum width. */
+    minWidth: string | BooleanLike;
+    /** Box width. */
+    width: string | BooleanLike;
+    /** Font family. */
+    fontFamily: string | BooleanLike;
+    /** Font size. */
+    fontSize: string | BooleanLike;
+    /** Font weight. */
+    fontWeight: string | BooleanLike;
+    /** Directly affects the height of text lines. Useful for adjusting button height. */
+    lineHeight: string | BooleanLike;
+    /** Align text inside the box. */
+    textAlign: string | BooleanLike;
+};
+export declare const stringStyleMap: Record<keyof StringStyleMap, any>;
+export type BooleanStyleMap = {
+    /** Make text bold. */
+    bold: boolean;
+    /** Fill positioned parent. */
+    fillPositionedParent: boolean;
+    /** Forces the `Box` to appear as an `inline-block`. */
+    inline: boolean;
+    /** Make text italic. */
+    italic: boolean;
+    /** Stops text from wrapping. */
+    nowrap: boolean;
+    /** Preserves line-breaks and spacing in text. */
+    preserveWhitespace: boolean;
+};
+export declare const booleanStyleMap: Record<keyof BooleanStyleMap, any>;
+export declare function computeBoxProps(props: any): Record<string, any>;
+export declare function computeBoxClassName(props: BoxProps): string;
+type StyleMap = StringStyleMap & BooleanStyleMap;
+/** Super light implementation of tailwind-like class names. */
+export declare function computeTwClass(input: string | undefined): StyleMap;
+export {};
diff --git a/dist/common/ui.js b/dist/common/ui.js
new file mode 100644
index 0000000..5119b4a
--- /dev/null
+++ b/dist/common/ui.js
@@ -0,0 +1,137 @@
+import { CSS_COLORS as u } from "./constants.js";
+import { classes as y } from "./react.js";
+const f = (o) => {
+  if (typeof o == "string")
+    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
+  if (typeof o == "number")
+    return `${o}rem`;
+}, p = (o) => {
+  if (typeof o == "string")
+    return f(o);
+  if (typeof o == "number")
+    return f(o * 0.5);
+};
+function w(o) {
+  return !h(o);
+}
+function h(o) {
+  return typeof o == "string" && u.includes(o);
+}
+const c = (o) => (t, i) => {
+  (typeof i == "number" || typeof i == "string") && (t[o] = i);
+}, n = (o, t) => (i, e) => {
+  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
+}, l = (o, t) => (i, e) => {
+  e && (i[o] = t);
+}, s = (o, t, i) => (e, r) => {
+  if (typeof r == "number" || typeof r == "string")
+    for (let m = 0; m < i.length; m++)
+      e[o + i[m]] = t(r);
+}, a = (o) => (t, i) => {
+  w(i) && (t[o] = i);
+}, d = {
+  align: c("textAlign"),
+  bottom: n("bottom", f),
+  fontFamily: c("fontFamily"),
+  fontSize: n("fontSize", f),
+  fontWeight: c("fontWeight"),
+  height: n("height", f),
+  left: n("left", f),
+  maxHeight: n("maxHeight", f),
+  maxWidth: n("maxWidth", f),
+  minHeight: n("minHeight", f),
+  minWidth: n("minWidth", f),
+  opacity: c("opacity"),
+  overflow: c("overflow"),
+  overflowX: c("overflowX"),
+  overflowY: c("overflowY"),
+  position: c("position"),
+  right: n("right", f),
+  textAlign: c("textAlign"),
+  top: n("top", f),
+  verticalAlign: c("verticalAlign"),
+  width: n("width", f),
+  lineHeight: (o, t) => {
+    typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = f(t));
+  },
+  // Margin
+  m: s("margin", p, [
+    "Top",
+    "Bottom",
+    "Left",
+    "Right"
+  ]),
+  mb: n("marginBottom", p),
+  ml: n("marginLeft", p),
+  mr: n("marginRight", p),
+  mt: n("marginTop", p),
+  mx: s("margin", p, ["Left", "Right"]),
+  my: s("margin", p, ["Top", "Bottom"]),
+  // Padding
+  p: s("padding", p, [
+    "Top",
+    "Bottom",
+    "Left",
+    "Right"
+  ]),
+  pb: n("paddingBottom", p),
+  pl: n("paddingLeft", p),
+  pr: n("paddingRight", p),
+  pt: n("paddingTop", p),
+  px: s("padding", p, ["Left", "Right"]),
+  py: s("padding", p, ["Top", "Bottom"]),
+  // Color props
+  color: a("color"),
+  textColor: a("color"),
+  backgroundColor: a("backgroundColor")
+}, b = {
+  bold: l("fontWeight", "bold"),
+  fillPositionedParent: (o, t) => {
+    t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
+  },
+  inline: l("display", "inline-block"),
+  italic: l("fontStyle", "italic"),
+  nowrap: l("whiteSpace", "nowrap"),
+  preserveWhitespace: l("whiteSpace", "pre-wrap")
+};
+function T(o) {
+  const t = {}, i = {};
+  for (const e in o) {
+    if (e === "style")
+      continue;
+    const r = o[e], m = d[e] || b[e];
+    m ? m(i, r) : t[e] = r;
+  }
+  return t.style = { ...i, ...o.style }, t;
+}
+function S(o) {
+  const t = o.textColor || o.color, { backgroundColor: i } = o;
+  return y([
+    h(t) && `color-${t}`,
+    h(i) && `color-bg-${i}`
+  ]);
+}
+function P(o) {
+  const t = {};
+  if (!o) return t;
+  const i = o.split(" ");
+  for (const e of i) {
+    const [r, m] = e.split("-");
+    if (r)
+      if (r in d) {
+        if (m === "") continue;
+        const g = Number(m);
+        !Number.isNaN(g) && Number.isFinite(g) ? t[r] = g : t[r] = m;
+      } else r in b ? t[r] = !0 : console.warn(`Unknown prop ${r}`);
+  }
+  return t;
+}
+export {
+  b as booleanStyleMap,
+  S as computeBoxClassName,
+  T as computeBoxProps,
+  P as computeTwClass,
+  p as halfUnit,
+  d as stringStyleMap,
+  f as unit
+};
diff --git a/dist/components/Box.d.ts b/dist/components/Box.d.ts
index 6b53e20..6d721ae 100644
--- a/dist/components/Box.d.ts
+++ b/dist/components/Box.d.ts
@@ -1,8 +1,7 @@
 import { CSSProperties, KeyboardEventHandler, MouseEventHandler, ReactNode, UIEventHandler } from 'react';
 import { BooleanLike } from '../common/react';
-type BooleanProps = Partial<Record<keyof typeof booleanStyleMap, boolean>>;
-type StringProps = Partial<Record<keyof typeof stringStyleMap, string | BooleanLike>>;
-export type EventHandlers = Partial<{
+import { BooleanStyleMap, StringStyleMap } from '../common/ui';
+type EventHandlers = {
     onClick: MouseEventHandler<HTMLDivElement>;
     onContextMenu: MouseEventHandler<HTMLDivElement>;
     onDoubleClick: MouseEventHandler<HTMLDivElement>;
@@ -14,78 +13,91 @@ export type EventHandlers = Partial<{
     onMouseOver: MouseEventHandler<HTMLDivElement>;
     onMouseUp: MouseEventHandler<HTMLDivElement>;
     onScroll: UIEventHandler<HTMLDivElement>;
-}>;
-export type BoxProps = Partial<{
+};
+type InternalProps = {
+    /** The component used for the root node. */
     as: string;
+    /** The content of the component. */
     children: ReactNode;
+    /** Class name to pass into the component. */
     className: string | BooleanLike;
+    /** The unique id of the component. */
     id: string;
+    /** The inline style of the component. */
     style: CSSProperties;
-}> & BooleanProps & StringProps & EventHandlers;
+    /**
+     * ### tw
+     * A shorthand classname syntax based loosely on tailwind.
+     *
+     * This takes all Box style props with a dash separator for params, e.g.'mb-4' or the prop name alone e.g. 'bold'.
+     *
+     * It's compatible with regular Box props, even on the same component, but it will take precedence.
+     *
+     * ### Example:
+     * ```tsx
+     * <Box tw="mb-2 bold fontSize-16px">
+     *  // Is equivalent to
+     * <Box mb={2} bold fontSize="16px">
+     *  ```
+     *
+     * ### Caveats:
+     * 1. You can't use this for custom props from other components.
+     *
+     * 2. There is no type info or safety for this method. Like the old days, it simply won't work if you use it incorrectly.
+     *
+     * 3. This should be a static string with minimal interpolation. If you need more logic, prefer the props approach.
+     */
+    tw: string;
+};
+export type BoxProps = Partial<InternalProps & BooleanStyleMap & StringStyleMap & EventHandlers>;
 type DangerDoNotUse = {
     dangerouslySetInnerHTML?: {
         __html: any;
     };
 };
 /**
- * Coverts our rem-like spacing unit into a CSS unit.
- */
-export declare function unit(value: unknown): string | undefined;
-/**
- * Same as `unit`, but half the size for integers numbers.
+ * # Box
+ *
+ * The Box component serves as a wrapper component for most of the CSS utility
+ * needs. It creates a new DOM element, a `<div>` by default that can be changed
+ * with the `as` property. Let's say you want to use a `<span>` instead:
+ *
+ * @example
+ * ```tsx
+ * <Box as="span" m={1}>
+ *   <Button />
+ * </Box>
+ * ```
+ *
+ * This works great when the changes can be isolated to a new DOM element.
+ * For instance, you can change the margin this way.
+ *
+ * However, sometimes you have to target the underlying DOM element.
+ * For instance, you want to change the text color of the button. The Button
+ * component defines its own color. CSS inheritance doesn't help.
+ *
+ * To workaround this problem, the Box children accept a render props function.
+ * This way, `Button` can pull out the `className` generated by the `Box`.
+ *
+ * @example
+ * ```tsx
+ * <Box color="primary">{(props) => <Button {...props} />}</Box>
+ * ```
+ *
+ * ## Box Units
+ *
+ * `Box` units, like width, height and margins can be defined in two ways:
+ *
+ * - By plain numbers
+ *   - 1 unit equals `1rem` for width, height and positioning properties.
+ *   - 1 unit equals `0.5rem` for margins and paddings.
+ * - By strings with proper CSS units
+ *   - For example: `100px`, `2em`, `1rem`, `100%`, etc.
+ *
+ * If you need more precision, you can always use fractional numbers.
+ *
+ * Default font size (`1rem`) is equal to `12px`.
  */
-export declare function halfUnit(value: unknown): string | undefined;
-declare const stringStyleMap: {
-    readonly align: (style: any, value: any) => void;
-    readonly bottom: (style: any, value: any) => void;
-    readonly fontFamily: (style: any, value: any) => void;
-    readonly fontSize: (style: any, value: any) => void;
-    readonly fontWeight: (style: any, value: any) => void;
-    readonly height: (style: any, value: any) => void;
-    readonly left: (style: any, value: any) => void;
-    readonly maxHeight: (style: any, value: any) => void;
-    readonly maxWidth: (style: any, value: any) => void;
-    readonly minHeight: (style: any, value: any) => void;
-    readonly minWidth: (style: any, value: any) => void;
-    readonly opacity: (style: any, value: any) => void;
-    readonly overflow: (style: any, value: any) => void;
-    readonly overflowX: (style: any, value: any) => void;
-    readonly overflowY: (style: any, value: any) => void;
-    readonly position: (style: any, value: any) => void;
-    readonly right: (style: any, value: any) => void;
-    readonly textAlign: (style: any, value: any) => void;
-    readonly top: (style: any, value: any) => void;
-    readonly verticalAlign: (style: any, value: any) => void;
-    readonly width: (style: any, value: any) => void;
-    readonly lineHeight: (style: any, value: any) => void;
-    readonly m: (style: any, value: any) => void;
-    readonly mb: (style: any, value: any) => void;
-    readonly ml: (style: any, value: any) => void;
-    readonly mr: (style: any, value: any) => void;
-    readonly mt: (style: any, value: any) => void;
-    readonly mx: (style: any, value: any) => void;
-    readonly my: (style: any, value: any) => void;
-    readonly p: (style: any, value: any) => void;
-    readonly pb: (style: any, value: any) => void;
-    readonly pl: (style: any, value: any) => void;
-    readonly pr: (style: any, value: any) => void;
-    readonly pt: (style: any, value: any) => void;
-    readonly px: (style: any, value: any) => void;
-    readonly py: (style: any, value: any) => void;
-    readonly color: (style: any, value: any) => void;
-    readonly textColor: (style: any, value: any) => void;
-    readonly backgroundColor: (style: any, value: any) => void;
-};
-declare const booleanStyleMap: {
-    readonly bold: (style: any, value: any) => void;
-    readonly fillPositionedParent: (style: any, value: any) => void;
-    readonly inline: (style: any, value: any) => void;
-    readonly italic: (style: any, value: any) => void;
-    readonly nowrap: (style: any, value: any) => void;
-    readonly preserveWhitespace: (style: any, value: any) => void;
-};
-export declare function computeBoxProps(props: any): Record<string, any>;
-export declare function computeBoxClassName(props: BoxProps): string;
 export declare function Box(props: BoxProps & DangerDoNotUse): import('react').ReactElement<{
     className: string;
 }, string | import('react').JSXElementConstructor<any>>;
diff --git a/dist/components/Box.js b/dist/components/Box.js
index 50c1248..234d655 100644
--- a/dist/components/Box.js
+++ b/dist/components/Box.js
@@ -1,133 +1,19 @@
-import { createElement as y } from "react";
-import { CSS_COLORS as b } from "../common/constants.js";
-import { classes as u } from "../common/react.js";
-function p(o) {
-  if (typeof o == "string")
-    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
-  if (typeof o == "number")
-    return `${o}rem`;
-}
-function r(o) {
-  if (typeof o == "string")
-    return p(o);
-  if (typeof o == "number")
-    return p(o * 0.5);
-}
-function x(o) {
-  return !a(o);
-}
-function a(o) {
-  return typeof o == "string" && b.includes(o);
-}
-const m = (o) => (t, i) => {
-  (typeof i == "number" || typeof i == "string") && (t[o] = i);
-}, n = (o, t) => (i, e) => {
-  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
-}, l = (o, t) => (i, e) => {
-  e && (i[o] = t);
-}, g = (o, t, i) => (e, f) => {
-  if (typeof f == "number" || typeof f == "string")
-    for (let c = 0; c < i.length; c++)
-      e[o + i[c]] = t(f);
-}, s = (o) => (t, i) => {
-  x(i) && (t[o] = i);
-}, C = {
-  align: m("textAlign"),
-  bottom: n("bottom", p),
-  fontFamily: m("fontFamily"),
-  fontSize: n("fontSize", p),
-  fontWeight: m("fontWeight"),
-  height: n("height", p),
-  left: n("left", p),
-  maxHeight: n("maxHeight", p),
-  maxWidth: n("maxWidth", p),
-  minHeight: n("minHeight", p),
-  minWidth: n("minWidth", p),
-  opacity: m("opacity"),
-  overflow: m("overflow"),
-  overflowX: m("overflowX"),
-  overflowY: m("overflowY"),
-  position: m("position"),
-  right: n("right", p),
-  textAlign: m("textAlign"),
-  top: n("top", p),
-  verticalAlign: m("verticalAlign"),
-  width: n("width", p),
-  lineHeight: (o, t) => {
-    typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = p(t));
-  },
-  // Margin
-  m: g("margin", r, [
-    "Top",
-    "Bottom",
-    "Left",
-    "Right"
-  ]),
-  mb: n("marginBottom", r),
-  ml: n("marginLeft", r),
-  mr: n("marginRight", r),
-  mt: n("marginTop", r),
-  mx: g("margin", r, ["Left", "Right"]),
-  my: g("margin", r, ["Top", "Bottom"]),
-  // Padding
-  p: g("padding", r, [
-    "Top",
-    "Bottom",
-    "Left",
-    "Right"
-  ]),
-  pb: n("paddingBottom", r),
-  pl: n("paddingLeft", r),
-  pr: n("paddingRight", r),
-  pt: n("paddingTop", r),
-  px: g("padding", r, ["Left", "Right"]),
-  py: g("padding", r, ["Top", "Bottom"]),
-  // Color props
-  color: s("color"),
-  textColor: s("color"),
-  backgroundColor: s("backgroundColor")
-}, w = {
-  bold: l("fontWeight", "bold"),
-  fillPositionedParent: (o, t) => {
-    t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
-  },
-  inline: l("display", "inline-block"),
-  italic: l("fontStyle", "italic"),
-  nowrap: l("whiteSpace", "nowrap"),
-  preserveWhitespace: l("whiteSpace", "pre-wrap")
-};
-function S(o) {
-  const t = {}, i = {};
-  for (const e of Object.keys(o)) {
-    if (e === "style")
-      continue;
-    const f = o[e], c = C[e] || w[e];
-    c ? c(i, f) : t[e] = f;
-  }
-  return t.style = { ...i, ...o.style }, t;
-}
-function d(o) {
-  const t = o.textColor || o.color, i = o.backgroundColor;
-  return u([
-    a(t) && `color-${t}`,
-    a(i) && `color-bg-${i}`
-  ]);
-}
-function W(o) {
-  const { as: t = "div", className: i, children: e, ...f } = o, c = i ? `${i} ${d(f)}` : d(f), h = S(f);
-  return y(
-    typeof t == "string" ? t : "div",
+import { createElement as n } from "react";
+import { computeBoxClassName as s, computeBoxProps as l, computeTwClass as u } from "../common/ui.js";
+function x(t) {
+  const { as: m = "div", className: e, children: c, tw: r, ...o } = t, a = e ? `${e} ${s(o)}` : s(o), p = l({
+    ...o,
+    ...u(r)
+  });
+  return n(
+    m,
     {
-      ...h,
-      className: c
+      ...p,
+      className: a
     },
-    e
+    c
   );
 }
 export {
-  W as Box,
-  d as computeBoxClassName,
-  S as computeBoxProps,
-  r as halfUnit,
-  p as unit
+  x as Box
 };
diff --git a/dist/components/Button.js b/dist/components/Button.js
index 1b8ee23..5fe79fa 100644
--- a/dist/components/Button.js
+++ b/dist/components/Button.js
@@ -2,7 +2,8 @@ import { jsx as i, jsxs as _, Fragment as K } from "react/jsx-runtime";
 import { useState as A, createRef as V, useEffect as $, useRef as z } from "react";
 import { KEY as D, isEscape as E } from "../common/keys.js";
 import { classes as F } from "../common/react.js";
-import { computeBoxClassName as j, computeBoxProps as q, Box as O } from "./Box.js";
+import { computeBoxClassName as j, computeBoxProps as q } from "../common/ui.js";
+import { Box as O } from "./Box.js";
 import { Icon as S } from "./Icon.js";
 import { Tooltip as v } from "./Tooltip.js";
 function x(u) {
diff --git a/dist/components/ByondUi.js b/dist/components/ByondUi.js
index 9dbc13e..b00e908 100644
--- a/dist/components/ByondUi.js
+++ b/dist/components/ByondUi.js
@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { Component as a, createRef as c } from "react";
 import { shallowDiffers as r } from "../common/react.js";
 import { debounce as m } from "../common/timer.js";
-import { computeBoxProps as l } from "./Box.js";
+import { computeBoxProps as l } from "../common/ui.js";
 const o = [];
 function h(t) {
   const n = o.length;
diff --git a/dist/components/ColorBox.js b/dist/components/ColorBox.js
index 82e3d47..88f7c6b 100644
--- a/dist/components/ColorBox.js
+++ b/dist/components/ColorBox.js
@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { computeBoxClassName as s, computeBoxProps as m } from "./Box.js";
+import { computeBoxClassName as s, computeBoxProps as m } from "../common/ui.js";
 function d(r) {
   const { content: l, children: a, className: e, ...o } = r;
   return o.color = l ? null : "default", o.backgroundColor = r.color || "default", /* @__PURE__ */ t(
diff --git a/dist/components/Dropdown.js b/dist/components/Dropdown.js
index eaee454..5d06172 100644
--- a/dist/components/Dropdown.js
+++ b/dist/components/Dropdown.js
@@ -1,7 +1,7 @@
 import { jsx as l, jsxs as p, Fragment as W } from "react/jsx-runtime";
 import { useState as F, useRef as L, useEffect as S } from "react";
 import { classes as N } from "../common/react.js";
-import { unit as $ } from "./Box.js";
+import { unit as $ } from "../common/ui.js";
 import { Button as D } from "./Button.js";
 import { Icon as b } from "./Icon.js";
 import { Popper as q } from "./Popper.js";
diff --git a/dist/components/Flex.js b/dist/components/Flex.js
index 06a9e97..8b82393 100644
--- a/dist/components/Flex.js
+++ b/dist/components/Flex.js
@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { classes as r } from "../common/react.js";
-import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "./Box.js";
+import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../common/ui.js";
 function p(e) {
   return r([
     "Flex",
diff --git a/dist/components/Icon.d.ts b/dist/components/Icon.d.ts
index a39fd4a..a7f0643 100644
--- a/dist/components/Icon.d.ts
+++ b/dist/components/Icon.d.ts
@@ -15,7 +15,7 @@ type Props = {
     spin: BooleanLike;
     /** Custom CSS. */
     style: CSSProperties;
-}> & BoxProps;
+}> & Omit<BoxProps, 'children'>;
 export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
     var Stack: typeof IconStack;
diff --git a/dist/components/Icon.js b/dist/components/Icon.js
index ac2d1bd..f18cdfc 100644
--- a/dist/components/Icon.js
+++ b/dist/components/Icon.js
@@ -1,9 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as p, computeBoxClassName as u } from "./Box.js";
+import { computeBoxProps as p, computeBoxClassName as u } from "../common/ui.js";
 const f = /-o$/;
 function d(c) {
-  const { name: s, size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
+  const { name: s = "", size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
   o && (n.fontSize = `${o * 100}%`), r && (n.transform = `rotate(${r}deg)`), e.style = n;
   const x = p(e);
   let t = "";
diff --git a/dist/components/Image.js b/dist/components/Image.js
index 0678d9e..0bf8fc2 100644
--- a/dist/components/Image.js
+++ b/dist/components/Image.js
@@ -1,32 +1,33 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useRef as a } from "react";
-import { computeBoxProps as f } from "./Box.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { computeBoxProps as f } from "../common/ui.js";
 const l = 5;
-function E(o) {
+function E(m) {
   const {
-    fixBlur: s = !0,
-    fixErrors: m = !1,
-    objectFit: n = "fill",
-    src: e,
-    ...c
-  } = o, t = a(0), r = f(c);
-  return r.style = {
-    ...r.style,
-    "-ms-interpolation-mode": s ? "nearest-neighbor" : "auto",
-    objectFit: n
-  }, /* @__PURE__ */ p(
+    fixBlur: r = !0,
+    fixErrors: n = !1,
+    objectFit: s = "fill",
+    src: o,
+    ...i
+  } = m, t = p(0), e = f(i);
+  return e.style = {
+    ...e.style,
+    "-ms-interpolation-mode": r ? "nearest-neighbor" : "auto",
+    imageRendering: r ? "pixelated" : "auto",
+    objectFit: s
+  }, /* @__PURE__ */ a(
     "img",
     {
-      onError: (i) => {
-        if (m && t.current < l) {
-          const u = i.currentTarget;
+      onError: (c) => {
+        if (n && t.current < l) {
+          const u = c.currentTarget;
           setTimeout(() => {
-            u.src = `${e}?attempt=${t.current}`, t.current++;
+            u.src = `${o}?attempt=${t.current}`, t.current++;
           }, 1e3);
         }
       },
-      src: e,
-      ...r,
+      src: o,
+      ...e,
       alt: "dm icon"
     }
   );
diff --git a/dist/components/ImageButton.js b/dist/components/ImageButton.js
index 8944760..785da31 100644
--- a/dist/components/ImageButton.js
+++ b/dist/components/ImageButton.js
@@ -1,6 +1,6 @@
 import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as A } from "./Box.js";
+import { computeBoxProps as A } from "../common/ui.js";
 import { DmIcon as D } from "./DmIcon.js";
 import { Icon as F } from "./Icon.js";
 import { Image as j } from "./Image.js";
diff --git a/dist/components/InfinitePlane.js b/dist/components/InfinitePlane.js
index b175aae..d180881 100644
--- a/dist/components/InfinitePlane.js
+++ b/dist/components/InfinitePlane.js
@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as n } from "react/jsx-runtime";
 import { Component as v } from "react";
-import { computeBoxProps as Z } from "./Box.js";
+import { computeBoxProps as Z } from "../common/ui.js";
 import { Button as c } from "./Button.js";
 import { ProgressBar as g } from "./ProgressBar.js";
 import { Stack as d } from "./Stack.js";
diff --git a/dist/components/Input.d.ts b/dist/components/Input.d.ts
index cb12a11..2efb639 100644
--- a/dist/components/Input.d.ts
+++ b/dist/components/Input.d.ts
@@ -38,18 +38,21 @@ type OptionalProps = Partial<{
     /** Fires when user is 'done typing': Clicked out, blur, enter key */
     onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
     /** Fires once the enter key is pressed */
-    onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    onEnter: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
     /** Fires once the escape key is pressed */
     onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
     /** The placeholder text when everything is cleared */
     placeholder: string;
     /** Clears the input value on enter */
     selfClear: boolean;
+    /** Auto-updates the input value on props change, ie, data from Byond */
+    updateOnPropsChange: boolean;
     /** The state variable of the input. */
     value: string | number;
 }>;
-type Props = OptionalProps & ConditionalProps & BoxProps;
-export declare function toInputValue(value: string | number | undefined): string;
+type Props = OptionalProps & ConditionalProps & Omit<BoxProps, 'children'>;
+type InputValue = string | number | undefined;
+export declare function toInputValue(value: InputValue): string;
 /**
  * ### Input
  * A basic text input which allow users to enter text into a UI.
diff --git a/dist/components/Input.js b/dist/components/Input.js
index 060b1f0..d0feeaf 100644
--- a/dist/components/Input.js
+++ b/dist/components/Input.js
@@ -1,81 +1,86 @@
-import { jsxs as E, jsx as p } from "react/jsx-runtime";
-import { useRef as K, useEffect as m } from "react";
-import { KEY as V, isEscape as j } from "../common/keys.js";
-import { classes as k } from "../common/react.js";
-import { debounce as B } from "../common/timer.js";
+import { jsxs as j, jsx as p } from "react/jsx-runtime";
+import { useRef as k, useEffect as m } from "react";
+import { KEY as w, isEscape as B } from "../common/keys.js";
+import { classes as F } from "../common/react.js";
+import { debounce as O } from "../common/timer.js";
 import { Box as R } from "./Box.js";
-function l(u) {
-  return typeof u != "number" && typeof u != "string" ? "" : String(u);
+function d(r) {
+  return typeof r != "number" && typeof r != "string" ? "" : String(r);
 }
-const S = B((u) => u(), 250);
-function A(u) {
+const V = O((r) => r(), 250);
+function C(r) {
   const {
-    autoFocus: d,
-    autoSelect: s,
-    className: g,
-    disabled: I,
-    expensive: T,
-    fluid: b,
+    autoFocus: g,
+    autoSelect: l,
+    className: I,
+    disabled: T,
+    expensive: b,
+    fluid: h,
     maxLength: x,
     monospace: y,
-    onChange: t,
-    onEnter: n,
-    onEscape: o,
+    onChange: n,
+    onEnter: c,
+    onEscape: s,
     onInput: i,
-    placeholder: h,
-    selfClear: w,
-    value: a,
-    ...N
-  } = u, c = K(null);
-  function _(e) {
-    var f;
+    placeholder: N,
+    selfClear: _,
+    updateOnPropsChange: D,
+    value: o,
+    ...E
+  } = r, a = k(null);
+  function K(t) {
+    var u;
     if (!i) return;
-    const r = (f = e.currentTarget) == null ? void 0 : f.value;
-    T ? S(() => i(e, r)) : i(e, r);
+    const e = (u = t.currentTarget) == null ? void 0 : u.value;
+    b ? V(() => i(t, e)) : i(t, e);
   }
-  function D(e) {
-    if (e.key === V.Enter) {
-      n == null || n(e, e.currentTarget.value), w ? e.currentTarget.value = "" : (e.currentTarget.blur(), t == null || t(e, e.currentTarget.value));
+  function S(t) {
+    if (t.key === w.Enter) {
+      c == null || c(t, t.currentTarget.value), _ ? t.currentTarget.value = "" : (t.currentTarget.blur(), n == null || n(t, t.currentTarget.value));
       return;
     }
-    j(e.key) && (o == null || o(e), e.currentTarget.value = l(a), e.currentTarget.blur());
+    B(t.key) && (s == null || s(t), t.currentTarget.value = d(o), t.currentTarget.blur());
   }
-  return m(() => {
-    const e = c.current;
+  function f(t) {
+    const e = a.current;
     if (!e) return;
-    const r = l(a);
-    e.value !== r && (e.value = r), !(!d && !s) && setTimeout(() => {
-      e.focus(), s && e.select();
-    }, 1);
+    const u = d(t);
+    e.value !== u && (e.value = u);
+  }
+  return m(() => {
+    const t = a.current;
+    if (t) {
+      f(o);
+      const e = g || l, u = document.activeElement === t;
+      e && !u && setTimeout(() => {
+        t.focus(), l && t.select();
+      }, 1);
+    }
   }, []), m(() => {
-    const e = c.current;
-    if (!e || document.activeElement === e)
-      return;
-    const r = l(a);
-    e.value !== r && (e.value = r);
-  }), /* @__PURE__ */ E(
+    D && f(o);
+  }, [o]), /* @__PURE__ */ j(
     R,
     {
-      className: k([
+      className: F([
         "Input",
-        b && "Input--fluid",
+        h && "Input--fluid",
         y && "Input--monospace",
-        g
+        I
       ]),
-      ...N,
+      ...E,
       children: [
         /* @__PURE__ */ p("div", { className: "Input__baseline", children: "." }),
         /* @__PURE__ */ p(
           "input",
           {
             className: "Input__input",
-            disabled: I,
+            disabled: T,
             maxLength: x,
-            onBlur: (e) => t == null ? void 0 : t(e, e.target.value),
-            onChange: _,
-            onKeyDown: D,
-            placeholder: h,
-            ref: c
+            onBlur: (t) => n == null ? void 0 : n(t, t.target.value),
+            onChange: K,
+            onKeyDown: S,
+            placeholder: N,
+            ref: a
           }
         )
       ]
@@ -83,6 +88,6 @@ function A(u) {
   );
 }
 export {
-  A as Input,
-  l as toInputValue
+  C as Input,
+  d as toInputValue
 };
diff --git a/dist/components/KeyListener.d.ts b/dist/components/KeyListener.d.ts
index 95b7661..c9d97fc 100644
--- a/dist/components/KeyListener.d.ts
+++ b/dist/components/KeyListener.d.ts
@@ -1,14 +1,8 @@
-import { Component } from 'react';
 import { KeyEvent } from '../common/events';
-type KeyListenerProps = Partial<{
+type Props = Partial<{
     onKey: (key: KeyEvent) => void;
     onKeyDown: (key: KeyEvent) => void;
     onKeyUp: (key: KeyEvent) => void;
 }>;
-export declare class KeyListener extends Component<KeyListenerProps> {
-    dispose: () => void;
-    constructor(props: any);
-    componentWillUnmount(): void;
-    render(): null;
-}
+export declare function KeyListener(props: Props): null;
 export {};
diff --git a/dist/components/KeyListener.js b/dist/components/KeyListener.js
index 624a3e8..581cd6b 100644
--- a/dist/components/KeyListener.js
+++ b/dist/components/KeyListener.js
@@ -1,23 +1,15 @@
-var t = Object.defineProperty;
-var e = (s, o, p) => o in s ? t(s, o, { enumerable: !0, configurable: !0, writable: !0, value: p }) : s[o] = p;
-var i = (s, o, p) => e(s, typeof o != "symbol" ? o + "" : o, p);
-import { Component as r } from "react";
-import { listenForKeyEvents as h } from "../common/hotkeys.js";
-class d extends r {
-  constructor(p) {
-    super(p);
-    i(this, "dispose");
-    this.dispose = h((n) => {
-      this.props.onKey && this.props.onKey(n), n.isDown() && this.props.onKeyDown && this.props.onKeyDown(n), n.isUp() && this.props.onKeyUp && this.props.onKeyUp(n);
+import { useEffect as i } from "react";
+import { listenForKeyEvents as t } from "../common/hotkeys.js";
+function r(n) {
+  return i(() => {
+    const o = t((e) => {
+      n.onKey && n.onKey(e), e.isDown() && n.onKeyDown && n.onKeyDown(e), e.isUp() && n.onKeyUp && n.onKeyUp(e);
     });
-  }
-  componentWillUnmount() {
-    this.dispose();
-  }
-  render() {
-    return null;
-  }
+    return () => {
+      o();
+    };
+  }, []), null;
 }
 export {
-  d as KeyListener
+  r as KeyListener
 };
diff --git a/dist/components/Knob.js b/dist/components/Knob.js
index 1c96f01..65fb960 100644
--- a/dist/components/Knob.js
+++ b/dist/components/Knob.js
@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { keyOfMatchingRange as $, scale as t } from "../common/math.js";
 import { classes as j } from "../common/react.js";
-import { computeBoxClassName as E, computeBoxProps as T } from "./Box.js";
+import { computeBoxClassName as E, computeBoxProps as T } from "../common/ui.js";
 import { DraggableControl as I } from "./DraggableControl.js";
 function H(c) {
   const {
diff --git a/dist/components/LabeledList.js b/dist/components/LabeledList.js
index 96439ce..305781a 100644
--- a/dist/components/LabeledList.js
+++ b/dist/components/LabeledList.js
@@ -1,6 +1,7 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { Box as s, unit as g } from "./Box.js";
+import { unit as g } from "../common/ui.js";
+import { Box as r } from "./Box.js";
 import { Divider as x } from "./Divider.js";
 import { Tooltip as N } from "./Tooltip.js";
 function b(l) {
@@ -11,19 +12,19 @@ function v(l) {
   const {
     className: t,
     label: a,
-    labelColor: L = "label",
-    labelWrap: m,
+    labelColor: m = "label",
+    labelWrap: L,
     color: p,
     textAlign: _,
     buttons: o,
-    content: h,
-    children: f,
-    verticalAlign: r = "baseline",
+    content: f,
+    children: h,
+    verticalAlign: s = "baseline",
     tooltip: n
   } = l;
   let i;
   a && (i = a, typeof a == "string" && (i += ":")), n !== void 0 && (i = /* @__PURE__ */ e(N, { content: n, children: /* @__PURE__ */ e(
-    s,
+    r,
     {
       as: "span",
       style: {
@@ -33,33 +34,33 @@ function v(l) {
     }
   ) }));
   const u = /* @__PURE__ */ e(
-    s,
+    r,
     {
       as: "td",
-      color: L,
+      color: m,
       className: c([
         "LabeledList__cell",
         // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
-        !m && "LabeledList__label--nowrap"
+        !L && "LabeledList__label--nowrap"
       ]),
-      verticalAlign: r,
+      verticalAlign: s,
       children: i
     }
   );
   return /* @__PURE__ */ d("tr", { className: c(["LabeledList__row", t]), children: [
     u,
     /* @__PURE__ */ d(
-      s,
+      r,
       {
         as: "td",
         color: p,
         textAlign: _,
         className: "LabeledList__cell",
         colSpan: o ? void 0 : 2,
-        verticalAlign: r,
+        verticalAlign: s,
         children: [
-          h,
-          f
+          f,
+          h
         ]
       }
     ),
diff --git a/dist/components/Modal.js b/dist/components/Modal.js
index 5bb9c02..33df317 100644
--- a/dist/components/Modal.js
+++ b/dist/components/Modal.js
@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { classes as t } from "../common/react.js";
-import { computeBoxClassName as a, computeBoxProps as c } from "./Box.js";
+import { computeBoxClassName as a, computeBoxProps as c } from "../common/ui.js";
 import { Dimmer as i } from "./Dimmer.js";
 function f(m) {
   const { className: s, children: e, ...o } = m;
diff --git a/dist/components/ProgressBar.js b/dist/components/ProgressBar.js
index a2d0645..2667b19 100644
--- a/dist/components/ProgressBar.js
+++ b/dist/components/ProgressBar.js
@@ -2,7 +2,7 @@ import { jsxs as B, jsx as i } from "react/jsx-runtime";
 import { CSS_COLORS as C } from "../common/constants.js";
 import { keyOfMatchingRange as P, toFixed as h, scale as x, clamp01 as _ } from "../common/math.js";
 import { classes as v } from "../common/react.js";
-import { computeBoxProps as y, computeBoxClassName as N } from "./Box.js";
+import { computeBoxProps as y, computeBoxClassName as N } from "../common/ui.js";
 function j(n) {
   const {
     className: m,
diff --git a/dist/components/RoundGauge.d.ts b/dist/components/RoundGauge.d.ts
index 4353423..9d85c5b 100644
--- a/dist/components/RoundGauge.d.ts
+++ b/dist/components/RoundGauge.d.ts
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { BoxProps } from './Box';
 type Props = {
     /** The current value of the metric. */
@@ -20,7 +21,7 @@ type Props = {
     /** When provided scales the gauge. */
     size: number;
     /** Custom css */
-    style: React.CSSProperties;
+    style: CSSProperties;
 }> & BoxProps;
 /**
  * ## RoundGauge
diff --git a/dist/components/RoundGauge.js b/dist/components/RoundGauge.js
index d9edf8b..965fc4c 100644
--- a/dist/components/RoundGauge.js
+++ b/dist/components/RoundGauge.js
@@ -1,43 +1,44 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { scale as d, keyOfMatchingRange as M, clamp01 as k } from "../common/math.js";
-import { classes as h } from "../common/react.js";
-import { AnimatedNumber as v } from "./AnimatedNumber.js";
-import { Box as B, computeBoxClassName as $, computeBoxProps as j } from "./Box.js";
-function w(p) {
+import { classes as p } from "../common/react.js";
+import { computeBoxClassName as v, computeBoxProps as B } from "../common/ui.js";
+import { AnimatedNumber as $ } from "./AnimatedNumber.js";
+import { Box as j } from "./Box.js";
+function z(h) {
   const {
     alertAfter: a,
     alertBefore: t,
     className: _,
     format: R,
     maxValue: c = 1,
-    minValue: u = 1,
+    minValue: i = 1,
     ranges: n,
     size: y = 1,
     style: x,
     value: r,
     ...g
-  } = p, G = d(r, u, c), f = k(G), l = n ? {} : { primary: [0, 1] };
+  } = h, G = d(r, i, c), f = k(G), l = n ? {} : { primary: [0, 1] };
   n && Object.keys(n).forEach((o) => {
     const s = n[o];
     l[o] = [
-      d(s[0], u, c),
-      d(s[1], u, c)
+      d(s[0], i, c),
+      d(s[1], i, c)
     ];
   });
   function N() {
     return !!(a && t && r > a && r < t || a && r > a || t && r < t);
   }
   const C = N() && M(f, l);
-  return /* @__PURE__ */ m(B, { inline: !0, children: [
+  return /* @__PURE__ */ m(j, { inline: !0, children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: h([
+        className: p([
           "RoundGauge",
           _,
-          $(g)
+          v(g)
         ]),
-        ...j({
+        ...B({
           style: {
             fontSize: `${y}em`,
             ...x
@@ -48,7 +49,7 @@ function w(p) {
           (a || t) && /* @__PURE__ */ e(
             "g",
             {
-              className: h([
+              className: p([
                 "RoundGauge__alert",
                 C ? `active RoundGauge__alert--${C}` : ""
               ]),
@@ -57,18 +58,18 @@ function w(p) {
           ),
           /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e("circle", { className: "RoundGauge__ringTrack", cx: "50", cy: "50", r: "45" }) }),
           /* @__PURE__ */ e("g", { children: Object.keys(l).map((o, s) => {
-            const i = l[o];
+            const u = l[o];
             return /* @__PURE__ */ e(
               "circle",
               {
                 className: `RoundGauge__ringFill RoundGauge--color--${o}`,
                 style: {
                   strokeDashoffset: Math.max(
-                    (2 - (i[1] - i[0])) * Math.PI * 50,
+                    (2 - (u[1] - u[0])) * Math.PI * 50,
                     0
                   )
                 },
-                transform: `rotate(${180 + 180 * i[0]} 50 50)`,
+                transform: `rotate(${180 + 180 * u[0]} 50 50)`,
                 cx: "50",
                 cy: "50",
                 r: "45"
@@ -105,9 +106,9 @@ function w(p) {
         ] })
       }
     ),
-    /* @__PURE__ */ e(v, { value: r, format: R })
+    /* @__PURE__ */ e($, { value: r, format: R })
   ] });
 }
 export {
-  w as RoundGauge
+  z as RoundGauge
 };
diff --git a/dist/components/Section.d.ts b/dist/components/Section.d.ts
index fafa5ee..b5de8e2 100644
--- a/dist/components/Section.d.ts
+++ b/dist/components/Section.d.ts
@@ -1,29 +1,4 @@
 import { ReactNode } from 'react';
-import { BoxProps } from './Box';
-type Props = Partial<{
-    /** Buttons to render aside the section title. */
-    buttons: ReactNode;
-    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
-    container_id: string;
-    /** If true, fills all available vertical space. */
-    fill: boolean;
-    /** If true, removes all section padding. */
-    fitted: boolean;
-    /** If true, fills the area without forcing height to 100% */
-    flexGrow: boolean;
-    /** If true, removes the section top padding */
-    noTopPadding: boolean;
-    /** @member Callback function for the `scroll` event */
-    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    /** Shows or hides the scrollbar. */
-    scrollable: boolean;
-    /** Shows or hides the horizontal scrollbar. */
-    scrollableHorizontal: boolean;
-    /** If true, filly the area except for -3rem */
-    stretchContents: boolean;
-    /** Title of the section. */
-    title: ReactNode;
-}> & BoxProps;
 /**
  * ## Section
  * Section is a surface that displays content and actions on a single topic.
@@ -51,5 +26,46 @@ type Props = Partial<{
  * </Section>
  * ```
  */
-export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Section: import('react').ForwardRefExoticComponent<Partial<{
+    /** Buttons to render aside the section title. */
+    buttons: ReactNode;
+    /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+    container_id: string;
+    /** If true, fills all available vertical space. */
+    fill: boolean;
+    /** If true, removes all section padding. */
+    fitted: boolean;
+    /** If true, fills the area without forcing height to 100% */
+    flexGrow: boolean;
+    /** If true, removes the section top padding */
+    noTopPadding: boolean;
+    /** @member Callback function for the `scroll` event */
+    onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    /** Shows or hides the scrollbar. */
+    scrollable: boolean;
+    /** Shows or hides the horizontal scrollbar. */
+    scrollableHorizontal: boolean;
+    /** If true, filly the area except for -3rem */
+    stretchContents: boolean;
+    /** Title of the section. */
+    title: ReactNode;
+}> & Partial<{
+    as: string;
+    children: ReactNode;
+    className: string | import('../common/react').BooleanLike;
+    id: string;
+    style: import('react').CSSProperties;
+    tw: string;
+} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
+    onClick: import('react').MouseEventHandler<HTMLDivElement>;
+    onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;
+    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement>;
+    onKeyDown: import('react').KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp: import('react').KeyboardEventHandler<HTMLDivElement>;
+    onMouseDown: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseLeave: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseMove: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseOver: import('react').MouseEventHandler<HTMLDivElement>;
+    onMouseUp: import('react').MouseEventHandler<HTMLDivElement>;
+    onScroll: import('react').UIEventHandler<HTMLDivElement>;
+}> & import('react').RefAttributes<HTMLDivElement>>;
diff --git a/dist/components/Section.js b/dist/components/Section.js
index d9a8e42..b7c340b 100644
--- a/dist/components/Section.js
+++ b/dist/components/Section.js
@@ -1,68 +1,66 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useRef as T, useEffect as C } from "react";
-import { addScrollableNode as P, removeScrollableNode as g } from "../common/events.js";
-import { classes as a, canRender as d } from "../common/react.js";
-import { computeBoxClassName as j, computeBoxProps as z } from "./Box.js";
-function G(m) {
-  const {
-    buttons: n,
-    children: f,
-    className: S,
-    fill: u,
-    fitted: _,
-    flexGrow: p,
-    noTopPadding: N,
-    onScroll: h,
-    scrollable: c,
-    scrollableHorizontal: l,
-    stretchContents: b,
-    title: r,
-    container_id: x,
-    ...i
-  } = m, e = T(null), v = d(r) || d(n);
-  return C(() => {
-    if (!(e != null && e.current) || !c && !l) return;
-    const o = e.current;
-    return P(o), () => {
-      o && g(o);
-    };
-  }, []), /* @__PURE__ */ s(
-    "div",
-    {
-      id: x || "",
-      className: a([
-        "Section",
-        u && "Section--fill",
-        _ && "Section--fitted",
-        c && "Section--scrollable",
-        l && "Section--scrollableHorizontal",
-        p && "Section--flex",
-        S,
-        j(i)
-      ]),
-      ...z(i),
-      children: [
-        v && /* @__PURE__ */ s("div", { className: "Section__title", children: [
-          /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
-          /* @__PURE__ */ t("div", { className: "Section__buttons", children: n })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
-          "div",
-          {
-            className: a([
-              "Section__content",
-              b && "Section__content--stretchContents",
-              N && "Section__content--noTopPadding"
-            ]),
-            onScroll: h,
-            ref: e,
-            children: f
-          }
-        ) })
-      ]
-    }
-  );
-}
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as C, useRef as P, useEffect as g } from "react";
+import { addScrollableNode as j, removeScrollableNode as w } from "../common/events.js";
+import { classes as s, canRender as a } from "../common/react.js";
+import { computeBoxClassName as z, computeBoxProps as B } from "../common/ui.js";
+const q = C(
+  (d, m) => {
+    const {
+      buttons: o,
+      children: f,
+      className: S,
+      container_id: _ = "",
+      fill: u,
+      fitted: p,
+      flexGrow: N,
+      noTopPadding: h,
+      onScroll: b,
+      scrollable: n,
+      scrollableHorizontal: c,
+      stretchContents: x,
+      title: r,
+      ...l
+    } = d, v = P(null), e = m || v, T = a(r) || a(o);
+    return g(() => (e != null && e.current && (n || c) && j(e.current), () => {
+      e != null && e.current && w(e.current);
+    }), []), /* @__PURE__ */ i(
+      "div",
+      {
+        id: _,
+        className: s([
+          "Section",
+          u && "Section--fill",
+          p && "Section--fitted",
+          n && "Section--scrollable",
+          c && "Section--scrollableHorizontal",
+          N && "Section--flex",
+          S,
+          z(l)
+        ]),
+        ...B(l),
+        children: [
+          T && /* @__PURE__ */ i("div", { className: "Section__title", children: [
+            /* @__PURE__ */ t("span", { className: "Section__titleText", children: r }),
+            /* @__PURE__ */ t("div", { className: "Section__buttons", children: o })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "Section__rest", children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: s([
+                "Section__content",
+                x && "Section__content--stretchContents",
+                h && "Section__content--noTopPadding"
+              ]),
+              onScroll: b,
+              ref: e,
+              children: f
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
 export {
-  G as Section
+  q as Section
 };
diff --git a/dist/components/Slider.js b/dist/components/Slider.js
index a0961ba..ad6ee84 100644
--- a/dist/components/Slider.js
+++ b/dist/components/Slider.js
@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { keyOfMatchingRange as O, clamp01 as r, scale as u } from "../common/math.js";
 import { classes as p } from "../common/react.js";
-import { computeBoxClassName as b, computeBoxProps as z } from "./Box.js";
+import { computeBoxClassName as b, computeBoxProps as z } from "../common/ui.js";
 import { DraggableControl as R } from "./DraggableControl.js";
 function J(g) {
   const {
diff --git a/dist/components/Stack.js b/dist/components/Stack.js
index a3ea103..a1410d0 100644
--- a/dist/components/Stack.js
+++ b/dist/components/Stack.js
@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { classes as a } from "../common/react.js";
-import { computeBoxClassName as o } from "./Box.js";
+import { computeBoxClassName as o } from "../common/ui.js";
 import { computeFlexClassName as k, computeFlexProps as v, computeFlexItemProps as m } from "./Flex.js";
 function n(r) {
   const { className: c, vertical: e, fill: t, reverse: s, zebra: l, ...d } = r, f = e ? "column" : "row", S = s ? "-reverse" : "";
diff --git a/dist/components/Table.js b/dist/components/Table.js
index 5b37c8e..4920a6c 100644
--- a/dist/components/Table.js
+++ b/dist/components/Table.js
@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { classes as r } from "../common/react.js";
-import { computeBoxClassName as t, computeBoxProps as n } from "./Box.js";
+import { computeBoxClassName as t, computeBoxProps as n } from "../common/ui.js";
 function m(e) {
   const { className: l, collapsing: a, children: s, ...o } = e;
   return /* @__PURE__ */ c(
diff --git a/dist/components/Tabs.js b/dist/components/Tabs.js
index ff6ab61..66fb325 100644
--- a/dist/components/Tabs.js
+++ b/dist/components/Tabs.js
@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as u } from "react/jsx-runtime";
 import { classes as T, canRender as d } from "../common/react.js";
-import { computeBoxClassName as f, computeBoxProps as h } from "./Box.js";
+import { computeBoxClassName as f, computeBoxProps as h } from "../common/ui.js";
 import { Icon as N } from "./Icon.js";
 function v(l) {
   const { className: c, vertical: i, fill: o, fluid: e, children: r, ...s } = l;
diff --git a/dist/components/TextArea.d.ts b/dist/components/TextArea.d.ts
index 5b0fe7e..d9e9688 100644
--- a/dist/components/TextArea.d.ts
+++ b/dist/components/TextArea.d.ts
@@ -25,7 +25,8 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     className: string | import('../common/react').BooleanLike;
     id: string;
     style: import('react').CSSProperties;
-}> & Partial<Record<"bold" | "italic" | "nowrap" | "fillPositionedParent" | "inline" | "preserveWhitespace", boolean>> & Partial<Record<"fontWeight" | "textAlign" | "bottom" | "fontFamily" | "fontSize" | "height" | "left" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflow" | "overflowX" | "overflowY" | "position" | "right" | "top" | "verticalAlign" | "width" | "color" | "backgroundColor" | "align" | "lineHeight" | "m" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "textColor", string | import('../common/react').BooleanLike>> & Partial<{
+    tw: string;
+} & import('../common/ui').BooleanStyleMap & import('../common/ui').StringStyleMap & {
     onClick: import('react').MouseEventHandler<HTMLDivElement>;
     onContextMenu: import('react').MouseEventHandler<HTMLDivElement>;
     onDoubleClick: import('react').MouseEventHandler<HTMLDivElement>;
diff --git a/package.json b/package.json
index ed6f9fa..590c0e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist"],