@jirawatpyk/aura-react 4.7.2 → 4.9.0

package/dist/cjs/index.cjs

@@ -60,17 +60,20 @@ __export(index_exports, {
   Icon: () => Icon,
   IconButton: () => IconButton,
   Menu: () => Menu,
+  NumberField: () => NumberField,
   Pagination: () => Pagination,
   Popover: () => Popover,
   Progress: () => Progress,
   RadioGroup: () => RadioGroup,
   STRINGS: () => STRINGS,
+  SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SideNav: () => SideNav,
   Skeleton: () => Skeleton,
   Stack: () => Stack,
   Stat: () => Stat,
   StatusPill: () => StatusPill,
+  Stepper: () => Stepper,
   Surface: () => Surface,
   Switch: () => Switch,
   Tabs: () => Tabs,
@@ -185,6 +188,10 @@ function useMergedRef(a, b) {
     [a, b]
   );
 }
+var TONES = ["neutral", "accent", "success", "warning", "danger"];
+function tone(t) {
+  return TONES.indexOf(t) >= 0 ? t : "neutral";
+}
 
 // src/Icon.tsx
 var h = React2.createElement;
@@ -514,7 +521,7 @@ var StatusPill = React8.forwardRef(function StatusPill2(props, ref) {
   return /* @__PURE__ */ React8.createElement("span", { ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React8.createElement(Icon, { name: TONE_ICON[tone2] || "circle", size: 12 }), props.children);
 });
 
-// src/forms.tsx
+// src/Field.tsx
 var React10 = __toESM(require("react"), 1);
 
 // src/locale.tsx
@@ -602,6 +609,12 @@ var STRINGS = {
       return "Up to " + n2 + " files";
     },
     colorScheme: "Colour scheme",
+    increase: "Increase",
+    decrease: "Decrease",
+    stepDone: "completed",
+    stepOf: function(i, total) {
+      return "Step " + i + " of " + total;
+    },
     schemeLight: "Light",
     schemeDark: "Dark",
     schemeSystem: "System",
@@ -694,6 +707,12 @@ var STRINGS = {
       return "\u0E41\u0E19\u0E1A\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + n2 + " \u0E44\u0E1F\u0E25\u0E4C";
     },
     colorScheme: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E35",
+    increase: "\u0E40\u0E1E\u0E34\u0E48\u0E21",
+    decrease: "\u0E25\u0E14",
+    stepDone: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
+    stepOf: function(i, total) {
+      return "\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 " + i + " \u0E08\u0E32\u0E01 " + total;
+    },
     schemeLight: "\u0E2A\u0E27\u0E48\u0E32\u0E07",
     schemeDark: "\u0E21\u0E37\u0E14",
     schemeSystem: "\u0E15\u0E32\u0E21\u0E23\u0E30\u0E1A\u0E1A",
@@ -730,7 +749,7 @@ function useStrings() {
   return useAuraLocale().strings;
 }
 
-// src/forms.tsx
+// src/Field.tsx
 var h2 = React10.createElement;
 var Field = React10.forwardRef(function Field2(props, ref) {
   const t = useStrings();
@@ -767,10 +786,13 @@ var FIELD_KEYS = [
   "options",
   "placeholder"
 ];
-var TextField = React10.forwardRef(function TextField2(props, ref) {
+
+// src/TextField.tsx
+var React11 = __toESM(require("react"), 1);
+var TextField = React11.forwardRef(function TextField2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Field,
     {
       id,
@@ -782,7 +804,7 @@ var TextField = React10.forwardRef(function TextField2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React10.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React10.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React11.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React11.createElement(
       "input",
       {
         type: "text",
@@ -795,13 +817,16 @@ var TextField = React10.forwardRef(function TextField2(props, ref) {
         "aria-invalid": props.error ? true : void 0,
         "aria-describedby": describedBy(id, props)
       }
-    ), props.suffix ? /* @__PURE__ */ React10.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
+    ), props.suffix ? /* @__PURE__ */ React11.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );
 });
-var Textarea = React10.forwardRef(function Textarea2(props, ref) {
+
+// src/Textarea.tsx
+var React12 = __toESM(require("react"), 1);
+var Textarea = React12.forwardRef(function Textarea2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Field,
     {
       id,
@@ -813,7 +838,7 @@ var Textarea = React10.forwardRef(function Textarea2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement(
       "textarea",
       {
         rows: 4,
@@ -829,19 +854,23 @@ var Textarea = React10.forwardRef(function Textarea2(props, ref) {
     )
   );
 });
-var Select = React10.forwardRef(function Select2(props, ref) {
+
+// src/Select.tsx
+var React13 = __toESM(require("react"), 1);
+var h3 = React13.createElement;
+var Select = React13.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS.concat(["children"]));
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
-    return /* @__PURE__ */ React10.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+    return /* @__PURE__ */ React13.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
   });
   if (props.placeholder)
     opts.unshift(
-      /* @__PURE__ */ React10.createElement("option", { key: "__ph", value: "", disabled: true }, props.placeholder)
+      /* @__PURE__ */ React13.createElement("option", { key: "__ph", value: "", disabled: true }, props.placeholder)
     );
   const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Field,
     {
       id,
@@ -853,7 +882,7 @@ var Select = React10.forwardRef(function Select2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React10.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React10.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h2(
+    /* @__PURE__ */ React13.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React13.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h3(
       "select",
       Object.assign(extra, rest, {
         ref,
@@ -865,10 +894,13 @@ var Select = React10.forwardRef(function Select2(props, ref) {
       }),
       opts,
       props.children
-    ), /* @__PURE__ */ React10.createElement(Icon, { name: "chevron-down", className: "aura-select__chevron" }))
+    ), /* @__PURE__ */ React13.createElement(Icon, { name: "chevron-down", className: "aura-select__chevron" }))
   );
 });
-var RadioGroup = React10.forwardRef(function RadioGroup2(props, ref) {
+
+// src/RadioGroup.tsx
+var React14 = __toESM(require("react"), 1);
+var RadioGroup = React14.forwardRef(function RadioGroup2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(
     props.value,
@@ -876,7 +908,7 @@ var RadioGroup = React10.forwardRef(function RadioGroup2(props, ref) {
     props.onChange
   );
   const name = props.name || id;
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "fieldset",
     {
       ref,
@@ -885,10 +917,10 @@ var RadioGroup = React10.forwardRef(function RadioGroup2(props, ref) {
       "aria-invalid": props.error ? true : void 0,
       disabled: props.disabled
     },
-    props.label ? /* @__PURE__ */ React10.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React10.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
-    /* @__PURE__ */ React10.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
+    props.label ? /* @__PURE__ */ React14.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React14.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
+    /* @__PURE__ */ React14.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
       const v = typeof o === "object" ? o : { value: o, label: o };
-      return /* @__PURE__ */ React10.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React14.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React14.createElement(
         "input",
         {
           type: "radio",
@@ -901,16 +933,19 @@ var RadioGroup = React10.forwardRef(function RadioGroup2(props, ref) {
             st[1](v.value);
           }
         }
-      ), /* @__PURE__ */ React10.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React10.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React10.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
+      ), /* @__PURE__ */ React14.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React14.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React14.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
     })),
-    props.error ? /* @__PURE__ */ React10.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React10.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React10.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+    props.error ? /* @__PURE__ */ React14.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React14.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React14.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
   );
 });
-var Switch = React10.forwardRef(function Switch2(props, ref) {
+
+// src/Switch.tsx
+var React15 = __toESM(require("react"), 1);
+var Switch = React15.forwardRef(function Switch2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
   const on = !!st[0];
-  return /* @__PURE__ */ React10.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React15.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React15.createElement(
     "button",
     {
       ref,
@@ -927,12 +962,12 @@ var Switch = React10.forwardRef(function Switch2(props, ref) {
         st[1](!on);
       }
     },
-    /* @__PURE__ */ React10.createElement("span", { className: "aura-switch__thumb" })
-  ), props.label ? /* @__PURE__ */ React10.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React10.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React10.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
+    /* @__PURE__ */ React15.createElement("span", { className: "aura-switch__thumb" })
+  ), props.label ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React15.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
 });
 
 // src/Combobox.tsx
-var React11 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 function norm(s) {
   return String(s == null ? "" : s).normalize("NFC").toLocaleLowerCase("th");
@@ -947,260 +982,335 @@ function defaultFilter(option, query) {
     return norm(k).indexOf(q) >= 0;
   });
 }
-var Combobox = React11.forwardRef(function Combobox2(props, ref) {
-  const t = useStrings();
-  const auto = uid(), id = props.id || auto, listId = id + "-list";
-  const options = (props.options || []).map(toOpt);
-  const st = useMaybeControlled(
-    props.value,
-    props.defaultValue == null ? null : props.defaultValue,
-    props.onChange
-  );
-  const value = st[0], setValue = st[1];
-  const selected = options.filter(function(o) {
-    return o.value === value;
-  })[0] || null;
-  const openState = React11.useState(false), open = openState[0], setOpen = openState[1];
-  const qState = React11.useState(null), query = qState[0], setQuery = qState[1];
-  const aState = React11.useState(0), active = aState[0], setActive = aState[1];
-  const posState = React11.useState(null);
-  const inputRef = React11.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React11.useRef(null), listRef = React11.useRef(null);
-  const mounted = useMounted();
-  const limit = props.limit || 200;
-  const filter = props.filter || defaultFilter;
-  let shown = props.onSearch || query == null ? options : options.filter(function(o) {
-    return filter(o, query);
-  });
-  const more = shown.length > limit;
-  shown = shown.slice(0, limit);
-  const activeIdx = Math.min(active, shown.length - 1);
-  function place() {
-    if (!boxRef.current) return;
-    const r = boxRef.current.getBoundingClientRect();
-    const maxH = 320, below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
-    posState[1]({
-      left: r.left,
-      width: r.width,
-      top: up ? void 0 : r.bottom + 4,
-      bottom: up ? window.innerHeight - r.top + 4 : void 0,
-      maxHeight: Math.min(maxH, (up ? r.top : below) - 8)
+var Combobox = React16.forwardRef(
+  function Combobox2(all, ref) {
+    const props = all;
+    const multi = all.multiple === true;
+    const mp = all;
+    const t = useStrings();
+    const auto = uid(), id = props.id || auto, listId = id + "-list";
+    const options = (props.options || []).map(toOpt);
+    const st = useMaybeControlled(
+      multi ? mp.value : props.value === void 0 ? void 0 : props.value == null ? [] : [props.value],
+      multi ? mp.defaultValue || [] : props.defaultValue == null ? [] : [props.defaultValue],
+      function(next) {
+        if (multi) {
+          if (mp.onChange) mp.onChange(next);
+        } else if (props.onChange) props.onChange(next.length ? next[0] : null);
+      }
+    );
+    const values = st[0], setValues = st[1];
+    const value = values.length ? values[0] : null;
+    function setValue(v) {
+      setValues(v == null ? [] : [v]);
+    }
+    const isPicked = function(v) {
+      return values.indexOf(v) >= 0;
+    };
+    const full = multi && mp.max != null && values.length >= mp.max;
+    const selected = multi ? null : options.filter(function(o) {
+      return o.value === value;
+    })[0] || null;
+    const picked = multi ? values.map(function(v) {
+      return options.filter(function(o) {
+        return o.value === v;
+      })[0];
+    }).filter(Boolean) : [];
+    const openState = React16.useState(false), open = openState[0], setOpen = openState[1];
+    const qState = React16.useState(null), query = qState[0], setQuery = qState[1];
+    const aState = React16.useState(0), active = aState[0], setActive = aState[1];
+    const posState = React16.useState(null);
+    const inputRef = React16.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React16.useRef(null), listRef = React16.useRef(null);
+    const mounted = useMounted();
+    const limit = props.limit || 200;
+    const filter = props.filter || defaultFilter;
+    let shown = props.onSearch || query == null ? options : options.filter(function(o) {
+      return filter(o, query);
     });
-  }
-  useIsoLayoutEffect(
-    function() {
-      if (open) place();
-    },
-    [open, shown.length]
-  );
-  React11.useEffect(
-    function() {
-      if (!open) return;
-      function outside(e) {
-        if (boxRef.current && boxRef.current.contains(e.target)) return;
-        if (listRef.current && listRef.current.contains(e.target)) return;
-        close(false);
+    const more = shown.length > limit;
+    shown = shown.slice(0, limit);
+    const activeIdx = Math.min(active, shown.length - 1);
+    function place() {
+      if (!boxRef.current) return;
+      const r = boxRef.current.getBoundingClientRect();
+      const maxH = 320, below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
+      posState[1]({
+        left: r.left,
+        width: r.width,
+        top: up ? void 0 : r.bottom + 4,
+        bottom: up ? window.innerHeight - r.top + 4 : void 0,
+        maxHeight: Math.min(maxH, (up ? r.top : below) - 8)
+      });
+    }
+    useIsoLayoutEffect(
+      function() {
+        if (open) place();
+      },
+      [open, shown.length]
+    );
+    React16.useEffect(
+      function() {
+        if (!open) return;
+        function outside(e) {
+          if (boxRef.current && boxRef.current.contains(e.target)) return;
+          if (listRef.current && listRef.current.contains(e.target)) return;
+          close(false);
+        }
+        function onScroll(e) {
+          if (!listRef.current || !listRef.current.contains(e.target)) place();
+        }
+        document.addEventListener("pointerdown", outside, true);
+        window.addEventListener("scroll", onScroll, true);
+        window.addEventListener("resize", place);
+        return function() {
+          document.removeEventListener("pointerdown", outside, true);
+          window.removeEventListener("scroll", onScroll, true);
+          window.removeEventListener("resize", place);
+        };
+      },
+      [open]
+    );
+    React16.useEffect(
+      function() {
+        if (!open || !listRef.current) return;
+        const el = listRef.current.querySelector('[data-idx="' + activeIdx + '"]');
+        if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+      },
+      [activeIdx, open]
+    );
+    function openList() {
+      if (!open && !props.disabled && !props.readOnly) {
+        setOpen(true);
+        const i = selected ? shown.indexOf(selected) : 0;
+        setActive(i < 0 ? 0 : i);
       }
-      function onScroll(e) {
-        if (!listRef.current || !listRef.current.contains(e.target)) place();
+    }
+    function close(restoreLabel) {
+      setOpen(false);
+      setQuery(null);
+    }
+    function choose(o) {
+      if (!o || o.disabled) return;
+      if (multi) {
+        if (isPicked(o.value))
+          setValues(
+            values.filter(function(v) {
+              return v !== o.value;
+            })
+          );
+        else if (!full) setValues(values.concat([o.value]));
+        setQuery(null);
+        if (inputRef.current) inputRef.current.focus();
+        return;
       }
-      document.addEventListener("pointerdown", outside, true);
-      window.addEventListener("scroll", onScroll, true);
-      window.addEventListener("resize", place);
-      return function() {
-        document.removeEventListener("pointerdown", outside, true);
-        window.removeEventListener("scroll", onScroll, true);
-        window.removeEventListener("resize", place);
-      };
-    },
-    [open]
-  );
-  React11.useEffect(
-    function() {
-      if (!open || !listRef.current) return;
-      const el = listRef.current.querySelector('[data-idx="' + activeIdx + '"]');
-      if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
-    },
-    [activeIdx, open]
-  );
-  function openList() {
-    if (!open && !props.disabled && !props.readOnly) {
-      setOpen(true);
-      const i = selected ? shown.indexOf(selected) : 0;
-      setActive(i < 0 ? 0 : i);
+      setValue(o.value);
+      setQuery(null);
+      setOpen(false);
+      if (inputRef.current) inputRef.current.focus();
     }
-  }
-  function close(restoreLabel) {
-    setOpen(false);
-    setQuery(null);
-  }
-  function choose(o) {
-    if (!o || o.disabled) return;
-    setValue(o.value);
-    setQuery(null);
-    setOpen(false);
-    if (inputRef.current) inputRef.current.focus();
-  }
-  function onKeyDown(e) {
-    const k = e.key;
-    if (k === "ArrowDown") {
-      e.preventDefault();
-      if (!open) openList();
-      else setActive(Math.min(activeIdx + 1, shown.length - 1));
-    } else if (k === "ArrowUp") {
-      e.preventDefault();
-      if (!open) openList();
-      else setActive(Math.max(activeIdx - 1, 0));
-    } else if (k === "Home" && open) {
-      e.preventDefault();
-      setActive(0);
-    } else if (k === "End" && open) {
-      e.preventDefault();
-      setActive(shown.length - 1);
-    } else if (k === "Enter") {
-      if (open && shown[activeIdx]) {
+    function onKeyDown(e) {
+      const k = e.key;
+      if (k === "ArrowDown") {
         e.preventDefault();
-        choose(shown[activeIdx]);
-      }
-    } else if (k === "Escape") {
-      if (open) {
+        if (!open) openList();
+        else setActive(Math.min(activeIdx + 1, shown.length - 1));
+      } else if (k === "ArrowUp") {
         e.preventDefault();
-        e.stopPropagation();
-        close();
-      } else if (props.clearable !== false && value != null && query == null) {
-        setValue(null);
+        if (!open) openList();
+        else setActive(Math.max(activeIdx - 1, 0));
+      } else if (k === "Home" && open) {
+        e.preventDefault();
+        setActive(0);
+      } else if (k === "End" && open) {
+        e.preventDefault();
+        setActive(shown.length - 1);
+      } else if (k === "Enter") {
+        if (open && shown[activeIdx]) {
+          e.preventDefault();
+          choose(shown[activeIdx]);
+        }
+      } else if (k === "Escape") {
+        if (open) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+        } else if (!multi && props.clearable !== false && value != null && query == null) {
+          setValue(null);
+        }
+      } else if (k === "Backspace" && multi && !text && values.length) {
+        setValues(values.slice(0, -1));
+      } else if (k === "Tab") {
+        if (open) close();
       }
-    } else if (k === "Tab") {
-      if (open) close();
     }
-  }
-  const text = query != null ? query : selected ? selected.label : "";
-  const optId = function(i) {
-    return id + "-opt-" + i;
-  };
-  const list = open && mounted && posState[0] ? (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ React11.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, /* @__PURE__ */ React11.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, props.loading ? /* @__PURE__ */ React11.createElement("li", { className: "aura-combo__note", role: "presentation" }, /* @__PURE__ */ React11.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? /* @__PURE__ */ React11.createElement("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
-      const isSel = selected && o.value === selected.value;
-      return /* @__PURE__ */ React11.createElement(
-        "li",
+    const text = query != null ? query : selected ? selected.label : "";
+    const summaryId = id + "-picked";
+    const optId = function(i) {
+      return id + "-opt-" + i;
+    };
+    const list = open && mounted && posState[0] ? (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ React16.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, /* @__PURE__ */ React16.createElement(
+        "ul",
         {
-          key: o.value,
-          id: optId(i),
-          role: "option",
-          "data-idx": i,
-          "aria-selected": isSel,
-          "aria-disabled": o.disabled || void 0,
-          className: cx(
-            "aura-combo__option",
-            i === activeIdx && "is-active",
-            isSel && "is-selected",
-            o.disabled && "is-disabled"
-          ),
-          onPointerDown: function(e) {
-            e.preventDefault();
-          },
-          onClick: function() {
-            choose(o);
-          },
-          onPointerMove: function() {
-            if (activeIdx !== i) setActive(i);
-          }
+          id: listId,
+          role: "listbox",
+          "aria-label": props.label,
+          "aria-multiselectable": multi || void 0,
+          className: "aura-combo__list"
         },
-        o.icon ? /* @__PURE__ */ React11.createElement(Icon, { name: o.icon }) : null,
-        /* @__PURE__ */ React11.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React11.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React11.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
-        isSel ? /* @__PURE__ */ React11.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
-      );
-    }), more && !props.loading ? /* @__PURE__ */ React11.createElement("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null)),
-    document.body
-  ) : null;
-  return /* @__PURE__ */ React11.createElement(
-    Field,
-    {
-      id,
-      label: props.label,
-      hint: props.hint,
-      error: props.error,
-      required: props.required,
-      optional: props.optional,
-      disabled: props.disabled,
-      className: props.className
-    },
-    /* @__PURE__ */ React11.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open") }, /* @__PURE__ */ React11.createElement(Icon, { name: props.icon || "search", className: "aura-input__icon" }), /* @__PURE__ */ React11.createElement(
-      "input",
+        props.loading ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, /* @__PURE__ */ React16.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
+          const isSel = multi ? isPicked(o.value) : !!selected && o.value === selected.value;
+          const blocked = o.disabled || multi && full && !isSel;
+          return /* @__PURE__ */ React16.createElement(
+            "li",
+            {
+              key: o.value,
+              id: optId(i),
+              role: "option",
+              "data-idx": i,
+              "aria-selected": isSel,
+              "aria-disabled": blocked || void 0,
+              className: cx(
+                "aura-combo__option",
+                i === activeIdx && "is-active",
+                isSel && "is-selected",
+                blocked && "is-disabled"
+              ),
+              onPointerDown: function(e) {
+                e.preventDefault();
+              },
+              onClick: function() {
+                if (!blocked || isSel) choose(o);
+              },
+              onPointerMove: function() {
+                if (activeIdx !== i) setActive(i);
+              }
+            },
+            o.icon ? /* @__PURE__ */ React16.createElement(Icon, { name: o.icon }) : null,
+            /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
+            isSel ? /* @__PURE__ */ React16.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+          );
+        }),
+        more && !props.loading ? /* @__PURE__ */ React16.createElement("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null
+      )),
+      document.body
+    ) : null;
+    return /* @__PURE__ */ React16.createElement(
+      Field,
       {
-        ref: inputMerged,
         id,
-        type: "text",
-        role: "combobox",
-        className: "aura-input__control",
-        autoComplete: "off",
-        "aria-expanded": open,
-        "aria-controls": listId,
-        "aria-autocomplete": "list",
-        "aria-activedescendant": open && shown[activeIdx] ? optId(activeIdx) : void 0,
-        "aria-invalid": props.error ? true : void 0,
-        "aria-describedby": props.error ? id + "-error" : props.hint ? id + "-hint" : void 0,
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        readOnly: props.readOnly,
+        label: props.label,
+        hint: props.hint,
+        error: props.error,
         required: props.required,
-        name: props.name,
-        value: text,
-        onChange: function(e) {
-          setQuery(e.target.value);
-          setActive(0);
-          if (!open) setOpen(true);
-          if (props.onSearch) props.onSearch(e.target.value);
-        },
-        onClick: openList,
-        onKeyDown,
-        onBlur: function() {
-          setTimeout(function() {
-            if (listRef.current && listRef.current.contains(document.activeElement)) return;
-            setOpen(false);
-            setQuery(null);
-          }, 0);
-        }
-      }
-    ), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React11.createElement(
-      "button",
-      {
-        type: "button",
-        className: "aura-combo__clear",
-        "aria-label": t.clear(props.label),
-        tabIndex: -1,
-        onClick: function() {
-          setValue(null);
-          setQuery(null);
-          if (inputRef.current) inputRef.current.focus();
-        }
+        optional: props.optional,
+        disabled: props.disabled,
+        className: props.className
       },
-      /* @__PURE__ */ React11.createElement(Icon, { name: "x" })
-    ) : null, /* @__PURE__ */ React11.createElement(
-      "button",
-      {
-        type: "button",
-        tabIndex: -1,
-        "aria-hidden": true,
-        className: "aura-combo__toggle",
-        onPointerDown: function(e) {
-          e.preventDefault();
-        },
-        onClick: function() {
-          if (open) close();
-          else {
-            openList();
-            inputRef.current && inputRef.current.focus();
+      /* @__PURE__ */ React16.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open", multi && "is-multi") }, /* @__PURE__ */ React16.createElement(Icon, { name: props.icon || "search", className: "aura-input__icon" }), multi && picked.length ? /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__chips" }, picked.map(function(o) {
+        return /* @__PURE__ */ React16.createElement("span", { key: o.value, className: "aura-combo__chip" }, /* @__PURE__ */ React16.createElement("span", { className: "aura-combo__chip-label" }, o.label), props.disabled || props.readOnly ? null : /* @__PURE__ */ React16.createElement(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            className: "aura-combo__chip-remove",
+            "aria-label": t.remove(o.label),
+            onPointerDown: function(e) {
+              e.preventDefault();
+            },
+            onClick: function() {
+              setValues(
+                values.filter(function(v) {
+                  return v !== o.value;
+                })
+              );
+              if (inputRef.current) inputRef.current.focus();
+            }
+          },
+          /* @__PURE__ */ React16.createElement(Icon, { name: "x" })
+        ));
+      })) : null, multi ? /* @__PURE__ */ React16.createElement("span", { id: summaryId, className: "aura-sr-only" }, picked.length ? t.selectedCount(picked.length) + ": " + picked.map(function(o) {
+        return o.label;
+      }).join(", ") : "") : null, multi && props.name ? values.map(function(v) {
+        return /* @__PURE__ */ React16.createElement("input", { key: v, type: "hidden", name: props.name, value: v });
+      }) : null, /* @__PURE__ */ React16.createElement(
+        "input",
+        {
+          ref: inputMerged,
+          id,
+          type: "text",
+          role: "combobox",
+          className: "aura-input__control",
+          autoComplete: "off",
+          "aria-expanded": open,
+          "aria-controls": listId,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": open && shown[activeIdx] ? optId(activeIdx) : void 0,
+          "aria-invalid": props.error ? true : void 0,
+          "aria-describedby": [props.error ? id + "-error" : props.hint ? id + "-hint" : "", multi && picked.length ? summaryId : ""].filter(Boolean).join(" ") || void 0,
+          placeholder: multi && values.length ? void 0 : props.placeholder,
+          disabled: props.disabled,
+          readOnly: props.readOnly,
+          required: props.required && (!multi || !values.length),
+          name: multi ? void 0 : props.name,
+          value: text,
+          onChange: function(e) {
+            setQuery(e.target.value);
+            setActive(0);
+            if (!open) setOpen(true);
+            if (props.onSearch) props.onSearch(e.target.value);
+          },
+          onClick: openList,
+          onKeyDown,
+          onBlur: function() {
+            setTimeout(function() {
+              if (listRef.current && listRef.current.contains(document.activeElement)) return;
+              setOpen(false);
+              setQuery(null);
+            }, 0);
           }
         }
-      },
-      /* @__PURE__ */ React11.createElement(Icon, { name: "chevron-down" })
-    )),
-    list
-  );
-});
+      ), props.clearable !== false && values.length && !props.disabled ? /* @__PURE__ */ React16.createElement(
+        "button",
+        {
+          type: "button",
+          className: "aura-combo__clear",
+          "aria-label": t.clear(props.label),
+          tabIndex: -1,
+          onClick: function() {
+            setValues([]);
+            setQuery(null);
+            if (inputRef.current) inputRef.current.focus();
+          }
+        },
+        /* @__PURE__ */ React16.createElement(Icon, { name: "x" })
+      ) : null, /* @__PURE__ */ React16.createElement(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-hidden": true,
+          className: "aura-combo__toggle",
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            if (open) close();
+            else {
+              openList();
+              inputRef.current && inputRef.current.focus();
+            }
+          }
+        },
+        /* @__PURE__ */ React16.createElement(Icon, { name: "chevron-down" })
+      )),
+      list
+    );
+  }
+);
 
 // src/DatePicker.tsx
-var React12 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var ERA = /^พ\.ศ\.\s?|\s?(BE|พ\.ศ\.)$/g;
 var pad = function(n2) {
@@ -1282,29 +1392,29 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
-var Calendar = React12.forwardRef(function Calendar2(props, ref) {
+var Calendar = React17.forwardRef(function Calendar2(props, ref) {
   const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", tag = localeTag(locale, calendar);
   const weekStart = props.weekStartsOn == null ? 0 : props.weekStartsOn;
   let today = /* @__PURE__ */ new Date();
   today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
   const min = fromISO(props.min), max = fromISO(props.max);
   const start = fromISO(props.start), end = fromISO(props.end);
-  const focusState = React12.useState(fromISO(props.focus) || start || today);
+  const focusState = React17.useState(fromISO(props.focus) || start || today);
   const focusDate = focusState[0], setFocus = focusState[1];
-  const viewState = React12.useState("days"), view = viewState[0], setView = viewState[1];
-  const hoverState = React12.useState(null);
-  const gridRef = React12.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React12.useRef(false);
+  const viewState = React17.useState("days"), view = viewState[0], setView = viewState[1];
+  const hoverState = React17.useState(null);
+  const gridRef = React17.useRef(null), gridMerged = useMergedRef(ref, gridRef), moved = React17.useRef(false);
   const th = locale !== "en";
   function disabled(d) {
     return !!(min && d < min || max && d > max || props.isDateDisabled && props.isDateDisabled(toISO(d)));
   }
-  React12.useEffect(function() {
+  React17.useEffect(function() {
     if (!moved.current) return;
     moved.current = false;
     const el = gridRef.current && gridRef.current.querySelector('[data-date="' + toISO(focusDate) + '"]');
     if (el) el.focus();
   });
-  React12.useEffect(function() {
+  React17.useEffect(function() {
     if (props.autoFocus === false) return;
     const el = gridRef.current && gridRef.current.querySelector('[tabindex="0"]');
     if (el) el.focus();
@@ -1356,7 +1466,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
     const yr = focusDate.getFullYear(), base = yr - yr % 12;
     const years = [];
     for (let y = base; y < base + 12; y++) years.push(y);
-    return /* @__PURE__ */ React12.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React12.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React17.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React17.createElement(
       IconButton,
       {
         icon: "chevron-left",
@@ -1365,7 +1475,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
           setFocus(new Date(yr - 12, focusDate.getMonth(), 1));
         }
       }
-    ), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -1375,7 +1485,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
         }
       },
       fmt(tag, { year: "numeric" }, new Date(base, 0, 1)).replace(ERA, "") + " \u2013 " + fmt(tag, { year: "numeric" }, new Date(base + 11, 0, 1)).replace(ERA, "")
-    ), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React17.createElement(
       IconButton,
       {
         icon: "chevron-right",
@@ -1384,9 +1494,9 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
           setFocus(new Date(yr + 12, focusDate.getMonth(), 1));
         }
       }
-    )), /* @__PURE__ */ React12.createElement("div", { className: "aura-cal__years" }, years.map(function(y) {
+    )), /* @__PURE__ */ React17.createElement("div", { className: "aura-cal__years" }, years.map(function(y) {
       const d = new Date(y, focusDate.getMonth(), 1);
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React17.createElement(
         "button",
         {
           key: y,
@@ -1403,7 +1513,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
       );
     })));
   }
-  return /* @__PURE__ */ React12.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React12.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: "aura-cal", ref: gridMerged }, /* @__PURE__ */ React17.createElement("div", { className: "aura-cal__head" }, /* @__PURE__ */ React17.createElement(
     IconButton,
     {
       icon: "chevron-left",
@@ -1412,7 +1522,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
         setFocus(addMonths(focusDate, -1));
       }
     }
-  ), /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -1423,8 +1533,8 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
       }
     },
     monthTitle,
-    /* @__PURE__ */ React12.createElement(Icon, { name: "chevron-down", size: 14 })
-  ), /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React17.createElement(Icon, { name: "chevron-down", size: 14 })
+  ), /* @__PURE__ */ React17.createElement(
     IconButton,
     {
       icon: "chevron-right",
@@ -1433,9 +1543,9 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
         setFocus(addMonths(focusDate, 1));
       }
     }
-  )), /* @__PURE__ */ React12.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React12.createElement("thead", null, /* @__PURE__ */ React12.createElement("tr", null, weekdayNames.map(function(n2, i) {
-    return /* @__PURE__ */ React12.createElement("th", { key: i, scope: "col", abbr: n2.long }, /* @__PURE__ */ React12.createElement("span", { "aria-hidden": true }, n2.short));
-  }))), /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React17.createElement("table", { role: "grid", className: "aura-cal__grid", "aria-label": monthTitle }, /* @__PURE__ */ React17.createElement("thead", null, /* @__PURE__ */ React17.createElement("tr", null, weekdayNames.map(function(n2, i) {
+    return /* @__PURE__ */ React17.createElement("th", { key: i, scope: "col", abbr: n2.long }, /* @__PURE__ */ React17.createElement("span", { "aria-hidden": true }, n2.short));
+  }))), /* @__PURE__ */ React17.createElement(
     "tbody",
     {
       onMouseLeave: function() {
@@ -1443,11 +1553,11 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
       }
     },
     weeks.map(function(wk, wi) {
-      return /* @__PURE__ */ React12.createElement("tr", { key: wi }, wk.map(function(d) {
+      return /* @__PURE__ */ React17.createElement("tr", { key: wi }, wk.map(function(d) {
         const iso = toISO(d), out = d.getMonth() !== focusDate.getMonth(), dis = disabled(d);
         const isStart = same(d, start), isEnd = same(d, end) || !end && props.range && same(d, hover) && start;
         const sel = isStart || same(d, end);
-        return /* @__PURE__ */ React12.createElement(
+        return /* @__PURE__ */ React17.createElement(
           "td",
           {
             key: iso,
@@ -1459,7 +1569,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
               props.range && isEnd && start && "is-range-end"
             )
           },
-          /* @__PURE__ */ React12.createElement(
+          /* @__PURE__ */ React17.createElement(
             "button",
             {
               type: "button",
@@ -1491,7 +1601,7 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
         );
       }));
     })
-  )), props.footer === false ? null : /* @__PURE__ */ React12.createElement("div", { className: "aura-cal__foot" }, /* @__PURE__ */ React12.createElement(
+  )), props.footer === false ? null : /* @__PURE__ */ React17.createElement("div", { className: "aura-cal__foot" }, /* @__PURE__ */ React17.createElement(
     "button",
     {
       type: "button",
@@ -1503,11 +1613,11 @@ var Calendar = React12.forwardRef(function Calendar2(props, ref) {
       }
     },
     th ? "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49" : "Today"
-  ), props.onClear ? /* @__PURE__ */ React12.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, th ? "\u0E25\u0E49\u0E32\u0E07" : "Clear") : null));
+  ), props.onClear ? /* @__PURE__ */ React17.createElement("button", { type: "button", className: "aura-cal__link", onClick: props.onClear }, th ? "\u0E25\u0E49\u0E32\u0E07" : "Clear") : null));
 });
 function useCalendarPopover(boxRef) {
-  const openState = React12.useState(false), open = openState[0], setOpen = openState[1];
-  const pos = React12.useState(null), popRef = React12.useRef(null), mounted = useMounted();
+  const openState = React17.useState(false), open = openState[0], setOpen = openState[1];
+  const pos = React17.useState(null), popRef = React17.useRef(null), mounted = useMounted();
   function place() {
     if (!boxRef.current) return;
     const r = boxRef.current.getBoundingClientRect(), H = 380;
@@ -1521,7 +1631,7 @@ function useCalendarPopover(boxRef) {
     },
     [open]
   );
-  React12.useEffect(
+  React17.useEffect(
     function() {
       if (!open) return;
       function outside(e) {
@@ -1543,8 +1653,8 @@ function useCalendarPopover(boxRef) {
   return { open, setOpen, pos: pos[0], popRef, mounted };
 }
 function DateField(props) {
-  const editState = React12.useState(null), editing = editState[0], setEditing = editState[1];
-  return /* @__PURE__ */ React12.createElement(
+  const editState = React17.useState(null), editing = editState[0], setEditing = editState[1];
+  return /* @__PURE__ */ React17.createElement(
     Field,
     {
       id: props.id,
@@ -1556,7 +1666,7 @@ function DateField(props) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React12.createElement("div", { ref: props.boxRef, className: cx("aura-input aura-date", props.open && "is-open") }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React17.createElement("div", { ref: props.boxRef, className: cx("aura-input aura-date", props.open && "is-open") }, /* @__PURE__ */ React17.createElement(
       "input",
       {
         ref: props.inputRef,
@@ -1595,7 +1705,7 @@ function DateField(props) {
           }
         }
       }
-    ), props.clearable !== false && props.hasValue && !props.disabled ? /* @__PURE__ */ React12.createElement(
+    ), props.clearable !== false && props.hasValue && !props.disabled ? /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -1604,8 +1714,8 @@ function DateField(props) {
         "aria-label": props.clearLabel,
         onClick: props.onClear
       },
-      /* @__PURE__ */ React12.createElement(Icon, { name: "x" })
-    ) : null, /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React17.createElement(Icon, { name: "x" })
+    ) : null, /* @__PURE__ */ React17.createElement(
       "button",
       {
         type: "button",
@@ -1619,11 +1729,11 @@ function DateField(props) {
           props.onToggle(!props.open);
         }
       },
-      /* @__PURE__ */ React12.createElement(Icon, { name: "calendar" })
+      /* @__PURE__ */ React17.createElement(Icon, { name: "calendar" })
     ))
   );
 }
-var DatePicker = React12.forwardRef(function DatePicker2(props, ref) {
+var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
   const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
   const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
   const st = useMaybeControlled(
@@ -1631,7 +1741,7 @@ var DatePicker = React12.forwardRef(function DatePicker2(props, ref) {
     props.defaultValue == null ? null : props.defaultValue,
     props.onChange
   );
-  const boxRef = React12.useRef(null), inputRef = React12.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  const boxRef = React17.useRef(null), inputRef = React17.useRef(null), inputMerged = useMergedRef(ref, inputRef);
   const pop = useCalendarPopover(boxRef);
   function commit(text) {
     if (!text.trim()) {
@@ -1646,7 +1756,7 @@ var DatePicker = React12.forwardRef(function DatePicker2(props, ref) {
     if (inputRef.current) inputRef.current.focus();
   }
   const cal = pop.open && pop.mounted && pop.pos ? (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React17.createElement(
       "div",
       {
         ref: pop.popRef,
@@ -1663,7 +1773,7 @@ var DatePicker = React12.forwardRef(function DatePicker2(props, ref) {
           } else trapTab(e, pop.popRef.current);
         }
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React17.createElement(
         Calendar,
         {
           locale,
@@ -1683,7 +1793,7 @@ var DatePicker = React12.forwardRef(function DatePicker2(props, ref) {
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
     DateField,
     {
       id,
@@ -1717,7 +1827,7 @@ var DatePicker = React12.forwardRef(function DatePicker2(props, ref) {
     }
   ), cal);
 });
-var DateRangePicker = React12.forwardRef(
+var DateRangePicker = React17.forwardRef(
   function DateRangePicker2(props, ref) {
     const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
     const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || "buddhist", th = locale !== "en";
@@ -1727,8 +1837,8 @@ var DateRangePicker = React12.forwardRef(
       props.onChange
     );
     const v = st[0] || { start: null, end: null };
-    const draft = React12.useState(null);
-    const boxRef = React12.useRef(null), inputRef = React12.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+    const draft = React17.useState(null);
+    const boxRef = React17.useRef(null), inputRef = React17.useRef(null), inputMerged = useMergedRef(ref, inputRef);
     const pop = useCalendarPopover(boxRef);
     const o = { locale, calendar };
     function show(r) {
@@ -1760,7 +1870,7 @@ var DateRangePicker = React12.forwardRef(
       close();
     }
     const cal = pop.open && pop.mounted && pop.pos ? (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React17.createElement(
         "div",
         {
           ref: pop.popRef,
@@ -1777,8 +1887,8 @@ var DateRangePicker = React12.forwardRef(
             } else trapTab(e, pop.popRef.current);
           }
         },
-        /* @__PURE__ */ React12.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" : "Choose the end date" : th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" : "Choose the start date"),
-        /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React17.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" : "Choose the end date" : th ? "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" : "Choose the start date"),
+        /* @__PURE__ */ React17.createElement(
           Calendar,
           {
             range: true,
@@ -1797,7 +1907,7 @@ var DateRangePicker = React12.forwardRef(
       ),
       document.body
     ) : null;
-    return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
       DateField,
       {
         id,
@@ -1834,30 +1944,33 @@ var DateRangePicker = React12.forwardRef(
   }
 );
 
-// src/feedback.tsx
-var React13 = __toESM(require("react"), 1);
-var import_react_dom4 = require("react-dom");
+// src/Alert.tsx
+var React18 = __toESM(require("react"), 1);
 var ALERT_ICON = {
   info: "info",
   success: "circle-check",
   warning: "triangle-alert",
   danger: "circle-alert"
 };
-var Alert = React13.forwardRef(function Alert2(props, ref) {
+var Alert = React18.forwardRef(function Alert2(props, ref) {
   const t = useStrings();
   const tone2 = props.tone || "info";
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "div",
     {
       ref,
       className: cx("aura-alert", "aura-alert--" + tone2, props.className),
       role: tone2 === "danger" || tone2 === "warning" ? "alert" : "status"
     },
-    /* @__PURE__ */ React13.createElement(Icon, { name: ALERT_ICON[tone2], className: "aura-alert__icon" }),
-    /* @__PURE__ */ React13.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React13.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React13.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React13.createElement("div", { className: "aura-alert__action" }, props.action) : null),
-    props.onDismiss ? /* @__PURE__ */ React13.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+    /* @__PURE__ */ React18.createElement(Icon, { name: ALERT_ICON[tone2], className: "aura-alert__icon" }),
+    /* @__PURE__ */ React18.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React18.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React18.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React18.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    props.onDismiss ? /* @__PURE__ */ React18.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
   );
 });
+
+// src/Toaster.tsx
+var React19 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
 var toastState = {
   list: [],
   subs: [],
@@ -1885,7 +1998,7 @@ toast.dismiss = function(id) {
 };
 function ToastItem(props) {
   const str = useStrings();
-  const t = props.toast, timer = React13.useRef(null), left = React13.useRef(t.duration || 5e3), since = React13.useRef(0);
+  const t = props.toast, timer = React19.useRef(null), left = React19.useRef(t.duration || 5e3), since = React19.useRef(0);
   function start() {
     if (left.current === Infinity) return;
     since.current = Date.now();
@@ -1900,11 +2013,11 @@ function ToastItem(props) {
       left.current -= Date.now() - since.current;
     }
   }
-  React13.useEffect(function() {
+  React19.useEffect(function() {
     start();
     return pause;
   }, []);
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "div",
     {
       className: cx("aura-toast", "aura-toast--" + t.tone),
@@ -1914,9 +2027,9 @@ function ToastItem(props) {
       onFocus: pause,
       onBlur: start
     },
-    /* @__PURE__ */ React13.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
-    /* @__PURE__ */ React13.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React13.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React13.createElement("p", { className: "aura-toast__text" }, t.description) : null),
-    t.action ? /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React19.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__text" }, t.description) : null),
+    t.action ? /* @__PURE__ */ React19.createElement(
       "button",
       {
         type: "button",
@@ -1928,7 +2041,7 @@ function ToastItem(props) {
       },
       t.action.label
     ) : null,
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React19.createElement(
       IconButton,
       {
         icon: "x",
@@ -1944,8 +2057,8 @@ function ToastItem(props) {
 function Toaster(props) {
   const t = useStrings();
   const mounted = useMounted();
-  const s = React13.useState(toastState.list);
-  React13.useEffect(function() {
+  const s = React19.useState(toastState.list);
+  React19.useEffect(function() {
     toastState.subs.push(s[1]);
     return function() {
       toastState.subs = toastState.subs.filter(function(f) {
@@ -1955,7 +2068,7 @@ function Toaster(props) {
   }, []);
   if (!mounted) return null;
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React19.createElement(
       "div",
       {
         className: cx("aura-toaster", props && props.position === "top" && "is-top"),
@@ -1964,16 +2077,20 @@ function Toaster(props) {
         "aria-label": t.notifications
       },
       s[0].map(function(t2) {
-        return /* @__PURE__ */ React13.createElement(ToastItem, { key: t2.id, toast: t2 });
+        return /* @__PURE__ */ React19.createElement(ToastItem, { key: t2.id, toast: t2 });
       })
     ),
     document.body
   );
 }
-var Tooltip = React13.forwardRef(function Tooltip2(props, ref) {
-  const id = uid(), st = React13.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
-  const anchor = React13.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React13.useRef(null), timer = React13.useRef(void 0);
-  const pos = React13.useState(null);
+
+// src/Tooltip.tsx
+var React20 = __toESM(require("react"), 1);
+var import_react_dom5 = require("react-dom");
+var Tooltip = React20.forwardRef(function Tooltip2(props, ref) {
+  const id = uid(), st = React20.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
+  const anchor = React20.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React20.useRef(null), timer = React20.useRef(void 0);
+  const pos = React20.useState(null);
   function show(now) {
     clearTimeout(timer.current);
     timer.current = setTimeout(
@@ -1998,7 +2115,7 @@ var Tooltip = React13.forwardRef(function Tooltip2(props, ref) {
     },
     [open]
   );
-  React13.useEffect(
+  React20.useEffect(
     function() {
       if (!open) return;
       function esc(e) {
@@ -2011,8 +2128,8 @@ var Tooltip = React13.forwardRef(function Tooltip2(props, ref) {
     },
     [open]
   );
-  const child = React13.Children.only(props.children);
-  const trigger = /* @__PURE__ */ React13.createElement(
+  const child = React20.Children.only(props.children);
+  const trigger = /* @__PURE__ */ React20.createElement(
     "span",
     {
       ref: anchorMerged,
@@ -2026,10 +2143,10 @@ var Tooltip = React13.forwardRef(function Tooltip2(props, ref) {
       },
       onBlur: hide
     },
-    React13.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
+    React20.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
   );
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, trigger, open ? (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, trigger, open ? (0, import_react_dom5.createPortal)(
+    /* @__PURE__ */ React20.createElement(
       "div",
       {
         ref: tip,
@@ -2045,16 +2162,16 @@ var Tooltip = React13.forwardRef(function Tooltip2(props, ref) {
 });
 
 // src/Dialog.tsx
-var React15 = __toESM(require("react"), 1);
-var import_react_dom5 = require("react-dom");
+var React22 = __toESM(require("react"), 1);
+var import_react_dom6 = require("react-dom");
 
-// src/overlay.tsx
-var React14 = __toESM(require("react"), 1);
+// src/useModal.tsx
+var React21 = __toESM(require("react"), 1);
 function useModal(open, ref, opts) {
   const mounted = useMounted();
-  const prev = React14.useRef(null);
+  const prev = React21.useRef(null);
   const o = opts || {};
-  React14.useEffect(
+  React21.useEffect(
     function() {
       if (!open || !mounted) return;
       prev.current = document.activeElement;
@@ -2095,9 +2212,9 @@ function useModal(open, ref, opts) {
 }
 
 // src/Dialog.tsx
-var Dialog = React15.forwardRef(function Dialog2(props, ref) {
+var Dialog = React22.forwardRef(function Dialog2(props, ref) {
   const t = useStrings();
-  const own = React15.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
+  const own = React22.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
   function close() {
     if (props.dismissible !== false && props.onClose) props.onClose();
   }
@@ -2108,8 +2225,8 @@ var Dialog = React15.forwardRef(function Dialog2(props, ref) {
     footSelector: ".aura-dialog__foot"
   });
   if (!modal.ready) return null;
-  return (0, import_react_dom5.createPortal)(
-    /* @__PURE__ */ React15.createElement("div", { className: "aura-dialog-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React15.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React15.createElement(
+  return (0, import_react_dom6.createPortal)(
+    /* @__PURE__ */ React22.createElement("div", { className: "aura-dialog-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React22.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React22.createElement(
       "div",
       {
         ref: merged,
@@ -2120,17 +2237,17 @@ var Dialog = React15.forwardRef(function Dialog2(props, ref) {
         tabIndex: -1,
         className: cx("aura-dialog", "aura-dialog--" + (props.size || "md"), props.className)
       },
-      /* @__PURE__ */ React15.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React15.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React15.createElement(IconButton, { icon: "x", label: t.close, className: "aura-dialog__close", onClick: close }) : null),
-      props.description ? /* @__PURE__ */ React15.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
-      props.children ? /* @__PURE__ */ React15.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
-      props.footer ? /* @__PURE__ */ React15.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
+      /* @__PURE__ */ React22.createElement("div", { className: "aura-dialog__head" }, /* @__PURE__ */ React22.createElement("h2", { className: "aura-dialog__title", id: titleId }, props.title), props.dismissible !== false ? /* @__PURE__ */ React22.createElement(IconButton, { icon: "x", label: t.close, className: "aura-dialog__close", onClick: close }) : null),
+      props.description ? /* @__PURE__ */ React22.createElement("p", { className: "aura-dialog__desc", id: descId }, props.description) : null,
+      props.children ? /* @__PURE__ */ React22.createElement("div", { className: "aura-dialog__body" }, props.children) : null,
+      props.footer ? /* @__PURE__ */ React22.createElement("div", { className: "aura-dialog__foot" }, props.footer) : null
     )),
     document.body
   );
 });
-var Drawer = React15.forwardRef(function Drawer2(props, ref) {
+var Drawer = React22.forwardRef(function Drawer2(props, ref) {
   const t = useStrings();
-  const own = React15.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
+  const own = React22.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
   function close() {
     if (props.dismissible !== false && props.onClose) props.onClose();
   }
@@ -2142,8 +2259,8 @@ var Drawer = React15.forwardRef(function Drawer2(props, ref) {
   });
   if (!modal.ready) return null;
   const side = props.side === "left" ? "left" : "right";
-  return (0, import_react_dom5.createPortal)(
-    /* @__PURE__ */ React15.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React15.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React15.createElement(
+  return (0, import_react_dom6.createPortal)(
+    /* @__PURE__ */ React22.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React22.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React22.createElement(
       "div",
       {
         ref: merged,
@@ -2155,17 +2272,17 @@ var Drawer = React15.forwardRef(function Drawer2(props, ref) {
         tabIndex: -1,
         className: cx("aura-drawer", "aura-drawer--" + side, "aura-drawer--" + (props.size || "md"), props.className)
       },
-      props.title || props.dismissible !== false ? /* @__PURE__ */ React15.createElement("div", { className: "aura-drawer__head" }, props.title ? /* @__PURE__ */ React15.createElement("h2", { className: "aura-drawer__title", id: titleId }, props.title) : /* @__PURE__ */ React15.createElement("span", { style: { flex: 1 } }), props.dismissible !== false ? /* @__PURE__ */ React15.createElement(IconButton, { icon: "x", label: t.close, onClick: close }) : null) : null,
-      props.description ? /* @__PURE__ */ React15.createElement("p", { className: "aura-drawer__desc", id: descId }, props.description) : null,
-      /* @__PURE__ */ React15.createElement("div", { className: "aura-drawer__body" }, props.children),
-      props.footer ? /* @__PURE__ */ React15.createElement("div", { className: "aura-drawer__foot" }, props.footer) : null
+      props.title || props.dismissible !== false ? /* @__PURE__ */ React22.createElement("div", { className: "aura-drawer__head" }, props.title ? /* @__PURE__ */ React22.createElement("h2", { className: "aura-drawer__title", id: titleId }, props.title) : /* @__PURE__ */ React22.createElement("span", { style: { flex: 1 } }), props.dismissible !== false ? /* @__PURE__ */ React22.createElement(IconButton, { icon: "x", label: t.close, onClick: close }) : null) : null,
+      props.description ? /* @__PURE__ */ React22.createElement("p", { className: "aura-drawer__desc", id: descId }, props.description) : null,
+      /* @__PURE__ */ React22.createElement("div", { className: "aura-drawer__body" }, props.children),
+      props.footer ? /* @__PURE__ */ React22.createElement("div", { className: "aura-drawer__foot" }, props.footer) : null
     )),
     document.body
   );
 });
 
 // src/DataTable.tsx
-var React16 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
 var DEFAULT_COLUMNS = [
   { key: "id", label: "ID", width: 96, mono: true },
@@ -2177,7 +2294,7 @@ var SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
 var ROW_H = 48;
 var OVERSCAN = 8;
 var FLEX_MIN = 160;
-var DataTable = React16.forwardRef(function DataTable2(props, ref) {
+var DataTable = React23.forwardRef(function DataTable2(props, ref) {
   const t = useStrings();
   const columns = props.columns || DEFAULT_COLUMNS;
   const byKey = {};
@@ -2220,23 +2337,23 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     }),
     props.onPinnedColumnsChange
   );
-  const widthState = React16.useState({});
+  const widthState = React23.useState({});
   const widths = widthState[0], setWidths = widthState[1];
-  const activeState = React16.useState({ r: 1, c: 0 });
-  const scrollState = React16.useState(0);
+  const activeState = React23.useState({ r: 1, c: 0 });
+  const scrollState = React23.useState(0);
   const scrollTop = scrollState[0], setScrollTop = scrollState[1];
-  const scrolledX = React16.useState(false);
-  const menuState = React16.useState(null);
+  const scrolledX = React23.useState(false);
+  const menuState = React23.useState(null);
   const menu = menuState[0], setMenu = menuState[1];
-  const dragState = React16.useState(null);
+  const dragState = React23.useState(null);
   const drag = dragState[0], setDrag = dragState[1];
-  const gridRef = React16.useRef(null);
-  const wrapRef = React16.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
-  const boxWidth = React16.useState(null);
+  const gridRef = React23.useRef(null);
+  const wrapRef = React23.useRef(null), wrapMerged = useMergedRef(ref, wrapRef);
+  const boxWidth = React23.useState(null);
   const measure = !!props.stackBelow || columns.some(function(c) {
     return c.hideBelow != null;
   });
-  React16.useEffect(
+  React23.useEffect(
     function() {
       if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
       const ro = new ResizeObserver(function(en) {
@@ -2255,9 +2372,9 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
     return px != null && boxWidth[0] < px;
   }
-  const scrollRef = React16.useRef(null);
-  const pending = React16.useRef(null);
-  const resizing = React16.useRef(false);
+  const scrollRef = React23.useRef(null);
+  const pending = React23.useRef(null);
+  const resizing = React23.useRef(false);
   useIsoLayoutEffect(function() {
     if (stacked || !gridRef.current) return;
     const els = gridRef.current.querySelectorAll(
@@ -2316,7 +2433,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     if (isPinned(c)) s.left = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + "px)";
     return s;
   }
-  const view = React16.useMemo(
+  const view = React23.useMemo(
     function() {
       if (!sort || !sort.key || !byKey[sort.key]) return rows;
       const col = byKey[sort.key];
@@ -2375,7 +2492,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
     return r === ar && c === ac ? 0 : -1;
   }
-  React16.useEffect(function() {
+  React23.useEffect(function() {
     const p = pending.current;
     if (!p || !gridRef.current) return;
     let c = p.c;
@@ -2686,10 +2803,10 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
       e.stopPropagation();
     }
   }
-  const head = [/* @__PURE__ */ React16.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
+  const head = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
   if (selectable)
     head.push(
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React23.createElement(
         "span",
         {
           key: "__sel",
@@ -2703,7 +2820,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
             activeState[1]({ r: 0, c: 0 });
           }
         },
-        nRows ? /* @__PURE__ */ React16.createElement(
+        nRows ? /* @__PURE__ */ React23.createElement(
           Checkbox,
           {
             checked: all,
@@ -2722,7 +2839,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     const ariaSort = isSorted && canSort ? sort.dir === "desc" ? "descending" : "ascending" : canSort ? "none" : void 0;
     const pin = isPinned(c), edge = pin && i === nPinned - 1;
     head.push(
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React23.createElement(
         "span",
         {
           key: c.key,
@@ -2770,7 +2887,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
             setDrag(null);
           }
         },
-        /* @__PURE__ */ React16.createElement("span", { className: "aura-table__th-inner" }, canSort ? /* @__PURE__ */ React16.createElement(
+        /* @__PURE__ */ React23.createElement("span", { className: "aura-table__th-inner" }, canSort ? /* @__PURE__ */ React23.createElement(
           "button",
           {
             type: "button",
@@ -2783,8 +2900,8 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
             }
           },
           c.label,
-          /* @__PURE__ */ React16.createElement(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
-        ) : /* @__PURE__ */ React16.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React16.createElement(Icon, { name: "pin", size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React16.createElement(
+          /* @__PURE__ */ React23.createElement(Icon, { name: isSorted ? sort.dir === "desc" ? "arrow-down" : "arrow-up" : "arrow-up-down", size: 12 })
+        ) : /* @__PURE__ */ React23.createElement("span", { className: cx("aura-table__th-label", !c.label && "aura-sr-only") }, c.label || (c.actions ? t.actions : c.key)), pin ? /* @__PURE__ */ React23.createElement(Icon, { name: "pin", size: 12, className: "aura-table__pin-icon", label: t.pinned }) : null, controls ? /* @__PURE__ */ React23.createElement(
           "button",
           {
             type: "button",
@@ -2798,9 +2915,9 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
               openMenu("col", c.key, e.currentTarget, { r: 0, c: ci });
             }
           },
-          /* @__PURE__ */ React16.createElement(Icon, { name: "ellipsis" })
+          /* @__PURE__ */ React23.createElement(Icon, { name: "ellipsis" })
         ) : null),
-        canResize(c) ? /* @__PURE__ */ React16.createElement(
+        canResize(c) ? /* @__PURE__ */ React23.createElement(
           "span",
           {
             className: "aura-table__resize",
@@ -2822,7 +2939,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     );
   });
   head.push(
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React23.createElement(
       "span",
       {
         key: "__gr",
@@ -2833,10 +2950,10 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
   );
   function rowCells(r, i, k, isSel) {
     const ri = i + 1;
-    const cells = [/* @__PURE__ */ React16.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
+    const cells = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter", "aria-hidden": true })];
     if (selectable)
       cells.push(
-        /* @__PURE__ */ React16.createElement(
+        /* @__PURE__ */ React23.createElement(
           "span",
           {
             key: "__sel",
@@ -2850,7 +2967,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
               if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
             }
           },
-          /* @__PURE__ */ React16.createElement(
+          /* @__PURE__ */ React23.createElement(
             Checkbox,
             {
               checked: isSel,
@@ -2866,7 +2983,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     vis.forEach(function(c, j) {
       const ci = j + (selectable ? 1 : 0), v = r[c.key], pin = isPinned(c);
       cells.push(
-        /* @__PURE__ */ React16.createElement(
+        /* @__PURE__ */ React23.createElement(
           "span",
           {
             key: c.key,
@@ -2885,12 +3002,12 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
               if (activeState[0].r !== ri || activeState[0].c !== ci) activeState[1]({ r: ri, c: ci });
             }
           },
-          c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React16.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v
+          c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v
         )
       );
     });
     cells.push(
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React23.createElement(
         "span",
         {
           key: "__gr",
@@ -2907,14 +3024,14 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     const n2 = pageSize || props.skeletonRows || 5;
     const skRows = body = [];
     for (let i = 0; i < n2; i++) {
-      const sk = [/* @__PURE__ */ React16.createElement("span", { key: "__gl", className: "aura-table__gutter" })];
+      const sk = [/* @__PURE__ */ React23.createElement("span", { key: "__gl", className: "aura-table__gutter" })];
       if (selectable)
         sk.push(
-          /* @__PURE__ */ React16.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React16.createElement("span", { className: "aura-skel aura-skel--box" }))
+          /* @__PURE__ */ React23.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React23.createElement("span", { className: "aura-skel aura-skel--box" }))
         );
       vis.forEach(function(c, j) {
         sk.push(
-          /* @__PURE__ */ React16.createElement("span", { key: c.key, className: cx("aura-table__td", isPinned(c) && "is-pinned"), style: cellStyle(c, j) }, /* @__PURE__ */ React16.createElement(
+          /* @__PURE__ */ React23.createElement("span", { key: c.key, className: cx("aura-table__td", isPinned(c) && "is-pinned"), style: cellStyle(c, j) }, /* @__PURE__ */ React23.createElement(
             "span",
             {
               className: cx("aura-skel", c.pill && "aura-skel--pill"),
@@ -2924,24 +3041,24 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
         );
       });
       sk.push(
-        /* @__PURE__ */ React16.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
+        /* @__PURE__ */ React23.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
       );
       skRows.push(
-        /* @__PURE__ */ React16.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+        /* @__PURE__ */ React23.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
       );
     }
   } else if (!rows.length) {
     const em = props.empty || {};
-    body = /* @__PURE__ */ React16.createElement("div", { className: "aura-table__empty", role: "row" }, /* @__PURE__ */ React16.createElement("div", { role: "gridcell" }, /* @__PURE__ */ React16.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React16.createElement(Icon, { name: em.icon || "inbox", size: "lg" })), /* @__PURE__ */ React16.createElement("p", { className: "aura-table__empty-title" }, em.title || t.empty), em.description ? /* @__PURE__ */ React16.createElement("p", { className: "aura-table__empty-text" }, em.description) : null, em.action ? /* @__PURE__ */ React16.createElement("div", { className: "aura-table__empty-action" }, em.action) : null));
+    body = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty", role: "row" }, /* @__PURE__ */ React23.createElement("div", { role: "gridcell" }, /* @__PURE__ */ React23.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React23.createElement(Icon, { name: em.icon || "inbox", size: "lg" })), /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-title" }, em.title || t.empty), em.description ? /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-text" }, em.description) : null, em.action ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty-action" }, em.action) : null));
   } else {
     const bodyRows = body = [];
     if (virtual && start > 0)
-      bodyRows.push(/* @__PURE__ */ React16.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
+      bodyRows.push(/* @__PURE__ */ React23.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
     for (let ri = start; ri < end; ri++) {
       (function(r, i) {
         const k = r[rowKey], isSel = !!selSet[k];
         bodyRows.push(
-          /* @__PURE__ */ React16.createElement(
+          /* @__PURE__ */ React23.createElement(
             "div",
             {
               key: k,
@@ -2962,12 +3079,12 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
       })(pageRows[ri], ri);
     }
     if (virtual && end < pageRows.length)
-      bodyRows.push(/* @__PURE__ */ React16.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
+      bodyRows.push(/* @__PURE__ */ React23.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
   }
   let foot = null;
   if (pageSize && (rows.length || loading)) {
     const from = rows.length ? first + 1 : 0, to = Math.min(first + pageSize, view.length);
-    foot = /* @__PURE__ */ React16.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React16.createElement("span", { "aria-live": "polite" }, loading ? t.loading : t.range(from, to, view.length)), /* @__PURE__ */ React16.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React16.createElement("span", null, t.page(page, pageCount)), /* @__PURE__ */ React16.createElement(
+    foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", { "aria-live": "polite" }, loading ? t.loading : t.range(from, to, view.length)), /* @__PURE__ */ React23.createElement("span", { className: "aura-table__pager" }, /* @__PURE__ */ React23.createElement("span", null, t.page(page, pageCount)), /* @__PURE__ */ React23.createElement(
       IconButton,
       {
         icon: "chevron-left",
@@ -2977,7 +3094,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
           goPage(page - 1);
         }
       }
-    ), /* @__PURE__ */ React16.createElement(
+    ), /* @__PURE__ */ React23.createElement(
       IconButton,
       {
         icon: "chevron-right",
@@ -2989,7 +3106,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
       }
     )));
   } else if (height && rows.length && !loading) {
-    foot = /* @__PURE__ */ React16.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React16.createElement("span", null, t.rowCount(view.length)), selectable && selected.length ? /* @__PURE__ */ React16.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React16.createElement("span", null));
+    foot = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React23.createElement("span", null, t.rowCount(view.length)), selectable && selected.length ? /* @__PURE__ */ React23.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React23.createElement("span", null));
   }
   if (stacked) {
     const titleCol = vis[0], pillCol = vis.filter(function(c) {
@@ -3003,20 +3120,20 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     });
     let cardBody;
     if (loading) {
-      cardBody = /* @__PURE__ */ React16.createElement("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i) {
-        return /* @__PURE__ */ React16.createElement("li", { key: i, className: "aura-table__card", "aria-hidden": true }, /* @__PURE__ */ React16.createElement("span", { className: "aura-skel", style: { width: "50%", height: "14px" } }), /* @__PURE__ */ React16.createElement("span", { className: "aura-skel", style: { width: "80%" } }), /* @__PURE__ */ React16.createElement("span", { className: "aura-skel", style: { width: "64%" } }));
+      cardBody = /* @__PURE__ */ React23.createElement("ul", { className: "aura-table__cards", "aria-busy": true }, [0, 1, 2].map(function(i) {
+        return /* @__PURE__ */ React23.createElement("li", { key: i, className: "aura-table__card", "aria-hidden": true }, /* @__PURE__ */ React23.createElement("span", { className: "aura-skel", style: { width: "50%", height: "14px" } }), /* @__PURE__ */ React23.createElement("span", { className: "aura-skel", style: { width: "80%" } }), /* @__PURE__ */ React23.createElement("span", { className: "aura-skel", style: { width: "64%" } }));
       }));
     } else if (!rows.length) {
       const em2 = props.empty || {};
-      cardBody = /* @__PURE__ */ React16.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React16.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React16.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React16.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React16.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
+      cardBody = /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty" }, /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("span", { className: "aura-table__empty-icon" }, /* @__PURE__ */ React23.createElement(Icon, { name: em2.icon || "inbox", size: "lg" })), /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-title" }, em2.title || t.empty), em2.description ? /* @__PURE__ */ React23.createElement("p", { className: "aura-table__empty-text" }, em2.description) : null, em2.action ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__empty-action" }, em2.action) : null));
     } else {
       const cellVal = function(c, r) {
         const v = r[c.key];
-        return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React16.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
+        return c.render ? c.render(r) : c.pill ? /* @__PURE__ */ React23.createElement(StatusPill, { ...{ tone: c.tones && c.tones[v] } }, v) : v;
       };
-      cardBody = /* @__PURE__ */ React16.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
+      cardBody = /* @__PURE__ */ React23.createElement("ul", { className: "aura-table__cards", "aria-label": props.label }, pageRows.map(function(r) {
         const k = r[rowKey], isSel = !!selSet[k];
-        return /* @__PURE__ */ React16.createElement(
+        return /* @__PURE__ */ React23.createElement(
           "li",
           {
             key: k,
@@ -3031,7 +3148,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
               if (e.target === e.currentTarget && e.key === "Enter" && props.onRowActivate) props.onRowActivate(r);
             }
           },
-          /* @__PURE__ */ React16.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React16.createElement(
+          /* @__PURE__ */ React23.createElement("div", { className: "aura-table__card-head" }, selectable ? /* @__PURE__ */ React23.createElement(
             Checkbox,
             {
               checked: isSel,
@@ -3040,16 +3157,16 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
                 toggle(k, on);
               }
             }
-          ) : null, /* @__PURE__ */ React16.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, cellVal(titleCol, r)), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
-            return /* @__PURE__ */ React16.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
+          ) : null, /* @__PURE__ */ React23.createElement("span", { className: cx("aura-table__card-title", titleCol.mono && "aura-table__mono") }, cellVal(titleCol, r)), pillCol ? cellVal(pillCol, r) : null, actionCols.map(function(c) {
+            return /* @__PURE__ */ React23.createElement("span", { key: c.key, className: "aura-table__card-actions" }, cellVal(c, r));
           })),
-          rest.length ? /* @__PURE__ */ React16.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
-            return /* @__PURE__ */ React16.createElement("div", { key: c.key }, /* @__PURE__ */ React16.createElement("dt", null, c.label), /* @__PURE__ */ React16.createElement("dd", { className: c.mono ? "aura-table__mono" : void 0 }, cellVal(c, r)));
+          rest.length ? /* @__PURE__ */ React23.createElement("dl", { className: "aura-table__card-fields" }, rest.map(function(c) {
+            return /* @__PURE__ */ React23.createElement("div", { key: c.key }, /* @__PURE__ */ React23.createElement("dt", null, c.label), /* @__PURE__ */ React23.createElement("dd", { className: c.mono ? "aura-table__mono" : void 0 }, cellVal(c, r)));
           })) : null
         );
       }));
     }
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React23.createElement(
       "div",
       {
         ref: wrapMerged,
@@ -3058,7 +3175,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
         "aria-label": props.label,
         "aria-busy": loading || void 0
       },
-      selectable && pageRows.length && !loading ? /* @__PURE__ */ React16.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React16.createElement(
+      selectable && pageRows.length && !loading ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__stack-bar" }, /* @__PURE__ */ React23.createElement(
         Checkbox,
         {
           checked: all,
@@ -3066,7 +3183,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
           label: all ? t.deselectAllRows : t.selectAllRows,
           onChange: toggleAll
         }
-      ), /* @__PURE__ */ React16.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
+      ), /* @__PURE__ */ React23.createElement("span", null, nSel ? t.selectedCount(nSel) : t.selectAll)) : null,
       cardBody,
       foot
     );
@@ -3076,7 +3193,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
     scrollPaddingTop: ROW_H + "px"
   };
   if (height) scrollStyle.height = height + "px";
-  return /* @__PURE__ */ React16.createElement("div", { ref: wrapMerged, className: cx("aura-table", scrolledX[0] && "is-scrolled-x", props.className) }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React23.createElement("div", { ref: wrapMerged, className: cx("aura-table", scrolledX[0] && "is-scrolled-x", props.className) }, /* @__PURE__ */ React23.createElement(
     "div",
     {
       ref: function(el) {
@@ -3101,9 +3218,9 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
         if (sx !== scrolledX[0]) scrolledX[1](sx);
       }
     },
-    /* @__PURE__ */ React16.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
+    /* @__PURE__ */ React23.createElement("div", { className: "aura-table__head", role: "row", "aria-rowindex": 1, style: rowStyle }, head),
     body
-  ), loading ? /* @__PURE__ */ React16.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null, controls ? /* @__PURE__ */ React16.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React16.createElement(
+  ), loading ? /* @__PURE__ */ React23.createElement("span", { className: "aura-sr-only", role: "status" }, t.loadingRows) : null, controls ? /* @__PURE__ */ React23.createElement("div", { className: "aura-table__picker" }, /* @__PURE__ */ React23.createElement(
     IconButton,
     {
       icon: "columns-3",
@@ -3113,7 +3230,7 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
         openMenu("picker", null, e.currentTarget);
       }
     }
-  )) : null, foot, menu ? /* @__PURE__ */ React16.createElement(
+  )) : null, foot, menu ? /* @__PURE__ */ React23.createElement(
     Menu,
     {
       anchor: menu.anchor,
@@ -3124,12 +3241,12 @@ var DataTable = React16.forwardRef(function DataTable2(props, ref) {
   ) : null);
 });
 
-// src/layout.tsx
-var React17 = __toESM(require("react"), 1);
-var h3 = React17.createElement;
-var Card = React17.forwardRef(function Card2(props, ref) {
+// src/Card.tsx
+var React24 = __toESM(require("react"), 1);
+var h4 = React24.createElement;
+var Card = React24.forwardRef(function Card2(props, ref) {
   const creative = props.variant === "creative";
-  return h3(
+  return h4(
     props.as || "section",
     {
       ref,
@@ -3141,19 +3258,22 @@ var Card = React17.forwardRef(function Card2(props, ref) {
       ),
       "aria-labelledby": props.title && props.titleId ? props.titleId : void 0
     },
-    props.title || props.actions ? /* @__PURE__ */ React17.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React17.createElement("div", { className: "aura-card__heading" }, props.title ? h3("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React17.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React17.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
-    props.children ? /* @__PURE__ */ React17.createElement("div", { className: "aura-card__body" }, props.children) : null,
-    props.footer ? /* @__PURE__ */ React17.createElement("div", { className: "aura-card__foot" }, props.footer) : null
+    props.title || props.actions ? /* @__PURE__ */ React24.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React24.createElement("div", { className: "aura-card__heading" }, props.title ? h4("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React24.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React24.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    props.children ? /* @__PURE__ */ React24.createElement("div", { className: "aura-card__body" }, props.children) : null,
+    props.footer ? /* @__PURE__ */ React24.createElement("div", { className: "aura-card__foot" }, props.footer) : null
   );
 });
-var Tabs = React17.forwardRef(function Tabs2(props, ref) {
+
+// src/Tabs.tsx
+var React25 = __toESM(require("react"), 1);
+var Tabs = React25.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
   const st = useMaybeControlled(
     props.value,
     props.defaultValue || items[0] && items[0].id,
     props.onChange
   );
-  const refs = React17.useRef({});
+  const refs = React25.useRef({});
   const current2 = items.filter(function(t) {
     return t.id === st[0];
   })[0] || items[0];
@@ -3165,7 +3285,7 @@ var Tabs = React17.forwardRef(function Tabs2(props, ref) {
     st[1](t.id);
     if (refs.current[t.id]) refs.current[t.id].focus();
   }
-  return /* @__PURE__ */ React17.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React25.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React25.createElement(
     "div",
     {
       role: "tablist",
@@ -3192,7 +3312,7 @@ var Tabs = React17.forwardRef(function Tabs2(props, ref) {
     },
     items.map(function(t) {
       const on = current2 && t.id === current2.id;
-      return /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React25.createElement(
         "button",
         {
           key: t.id,
@@ -3211,12 +3331,12 @@ var Tabs = React17.forwardRef(function Tabs2(props, ref) {
             st[1](t.id);
           }
         },
-        t.icon ? /* @__PURE__ */ React17.createElement(Icon, { name: t.icon }) : null,
+        t.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: t.icon }) : null,
         t.label,
-        t.count != null ? /* @__PURE__ */ React17.createElement("span", { className: "aura-tab__count" }, t.count) : null
+        t.count != null ? /* @__PURE__ */ React25.createElement("span", { className: "aura-tab__count" }, t.count) : null
       );
     })
-  ), current2 && current2.content !== void 0 ? /* @__PURE__ */ React17.createElement(
+  ), current2 && current2.content !== void 0 ? /* @__PURE__ */ React25.createElement(
     "div",
     {
       role: "tabpanel",
@@ -3228,7 +3348,10 @@ var Tabs = React17.forwardRef(function Tabs2(props, ref) {
     current2.content
   ) : null);
 });
-var SideNav = React17.forwardRef(function SideNav2(props, ref) {
+
+// src/SideNav.tsx
+var React26 = __toESM(require("react"), 1);
+var SideNav = React26.forwardRef(function SideNav2(props, ref) {
   const t = useStrings();
   const st = useMaybeControlled(
     props.value,
@@ -3238,9 +3361,9 @@ var SideNav = React17.forwardRef(function SideNav2(props, ref) {
   function item(it) {
     const on = st[0] === it.id;
     const inner = [
-      it.icon ? /* @__PURE__ */ React17.createElement(Icon, { key: "i", name: it.icon }) : null,
-      /* @__PURE__ */ React17.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
-      it.count != null ? /* @__PURE__ */ React17.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
+      it.icon ? /* @__PURE__ */ React26.createElement(Icon, { key: "i", name: it.icon }) : null,
+      /* @__PURE__ */ React26.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
+      it.count != null ? /* @__PURE__ */ React26.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
     ];
     const common = {
       className: cx("aura-nav__item", on && "is-active"),
@@ -3250,33 +3373,39 @@ var SideNav = React17.forwardRef(function SideNav2(props, ref) {
         st[1](it.id);
       }
     };
-    return /* @__PURE__ */ React17.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React17.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React17.createElement("button", { type: "button", ...common }, inner));
+    return /* @__PURE__ */ React26.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React26.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React26.createElement("button", { type: "button", ...common }, inner));
   }
-  return /* @__PURE__ */ React17.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React17.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React17.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
-    return /* @__PURE__ */ React17.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React17.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React17.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
-  })), props.footer ? /* @__PURE__ */ React17.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
+  return /* @__PURE__ */ React26.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
+    return /* @__PURE__ */ React26.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React26.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React26.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
+  })), props.footer ? /* @__PURE__ */ React26.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
 });
-var Breadcrumb = React17.forwardRef(function Breadcrumb2(props, ref) {
+
+// src/Breadcrumb.tsx
+var React27 = __toESM(require("react"), 1);
+var Breadcrumb = React27.forwardRef(function Breadcrumb2(props, ref) {
   const t = useStrings();
   const items = props.items || [];
-  return /* @__PURE__ */ React17.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React17.createElement("ol", null, items.map(function(it, i) {
+  return /* @__PURE__ */ React27.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React27.createElement("ol", null, items.map(function(it, i) {
     const last = i === items.length - 1;
-    return /* @__PURE__ */ React17.createElement("li", { key: i }, last ? /* @__PURE__ */ React17.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React17.createElement("a", { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React17.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React17.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+    return /* @__PURE__ */ React27.createElement("li", { key: i }, last ? /* @__PURE__ */ React27.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React27.createElement("a", { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React27.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React27.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
   })));
 });
+
+// src/Avatar.tsx
+var React28 = __toESM(require("react"), 1);
 var AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
 function initials(name) {
   const parts = String(name || "?").trim().split(/\s+/);
   return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
 }
-var Avatar = React17.forwardRef(function Avatar2(props, ref) {
-  const size = props.size || "md", errState = React17.useState(false);
+var Avatar = React28.forwardRef(function Avatar2(props, ref) {
+  const size = props.size || "md", errState = React28.useState(false);
   let hash = 0;
   String(props.name || "").split("").forEach(function(ch) {
     hash = hash * 31 + ch.charCodeAt(0) >>> 0;
   });
   const tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "span",
     {
       ref,
@@ -3284,7 +3413,7 @@ var Avatar = React17.forwardRef(function Avatar2(props, ref) {
       role: "img",
       "aria-label": props.name + (props.status ? ", " + props.status : "")
     },
-    props.src && !errState[0] ? /* @__PURE__ */ React17.createElement(
+    props.src && !errState[0] ? /* @__PURE__ */ React28.createElement(
       "img",
       {
         src: props.src,
@@ -3293,18 +3422,20 @@ var Avatar = React17.forwardRef(function Avatar2(props, ref) {
           errState[1](true);
         }
       }
-    ) : /* @__PURE__ */ React17.createElement("span", { "aria-hidden": true }, initials(props.name)),
-    props.status === "online" ? /* @__PURE__ */ React17.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+    ) : /* @__PURE__ */ React28.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React28.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
   );
 });
 
-// src/layout2.tsx
-var React18 = __toESM(require("react"), 1);
-var h4 = React18.createElement;
+// src/Stack.tsx
+var React30 = __toESM(require("react"), 1);
+
+// src/responsive.tsx
+var React29 = __toESM(require("react"), 1);
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
 var ORDER = ["base", "sm", "md", "lg", "xl"];
 function useBreakpoint() {
-  return React18.useSyncExternalStore(subscribe, current, function() {
+  return React29.useSyncExternalStore(subscribe, current, function() {
     return "lg";
   });
 }
@@ -3342,7 +3473,10 @@ function respVars(prefix, value, map) {
 var space = function(v) {
   return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
 };
-var Stack = React18.forwardRef(function Stack2(props, ref) {
+
+// src/Stack.tsx
+var h5 = React30.createElement;
+var Stack = React30.forwardRef(function Stack2(props, ref) {
   const style = Object.assign(
     {},
     respVars("aura-stack-dir", props.direction || "column"),
@@ -3352,23 +3486,31 @@ var Stack = React18.forwardRef(function Stack2(props, ref) {
     props.wrap ? { flexWrap: "wrap" } : null,
     props.style
   );
-  return h4(props.as || "div", { ref, className: cx("aura-stack", props.className), style }, props.children);
+  return h5(props.as || "div", { ref, className: cx("aura-stack", props.className), style }, props.children);
 });
-var Grid = React18.forwardRef(function Grid2(props, ref) {
+
+// src/Grid.tsx
+var React31 = __toESM(require("react"), 1);
+var h6 = React31.createElement;
+var Grid = React31.forwardRef(function Grid2(props, ref) {
   const style = Object.assign(
     {},
     respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
     props.minItemWidth ? { gridTemplateColumns: "repeat(auto-fill, minmax(min(" + props.minItemWidth + "px, 100%), 1fr))" } : respVars("aura-grid-cols", props.columns || 1),
     props.style
   );
-  return h4(
+  return h6(
     props.as || "div",
     { ref, className: cx("aura-grid-layout", props.minItemWidth && "is-auto", props.className), style },
     props.children
   );
 });
-var Container = React18.forwardRef(function Container2(props, ref) {
-  return h4(
+
+// src/Container.tsx
+var React32 = __toESM(require("react"), 1);
+var h7 = React32.createElement;
+var Container = React32.forwardRef(function Container2(props, ref) {
+  return h7(
     props.as || "div",
     {
       ref,
@@ -3378,26 +3520,29 @@ var Container = React18.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
-var AppShell = React18.forwardRef(function AppShell2(props, ref) {
+
+// src/AppShell.tsx
+var React33 = __toESM(require("react"), 1);
+var AppShell = React33.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
   const bp = useBreakpoint();
   const compact = bp === "base" || bp === "sm" || bp === "md";
-  const st = React18.useState(false), open = st[0], setOpen = st[1];
-  React18.useEffect(
+  const st = React33.useState(false), open = st[0], setOpen = st[1];
+  React33.useEffect(
     function() {
       if (!compact) setOpen(false);
     },
     [compact]
   );
   const navEl = props.nav;
-  const nav = props.nav && React18.isValidElement(props.nav) && compact ? React18.cloneElement(navEl, {
+  const nav = props.nav && React33.isValidElement(props.nav) && compact ? React33.cloneElement(navEl, {
     onChange: function(id) {
       if (navEl.props.onChange) navEl.props.onChange(id);
       setOpen(false);
     },
     className: cx(navEl.props.className, "is-in-drawer")
   }) : props.nav;
-  return /* @__PURE__ */ React18.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React18.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React33.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React33.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React33.createElement(
     Drawer,
     {
       open,
@@ -3410,7 +3555,7 @@ var AppShell = React18.forwardRef(function AppShell2(props, ref) {
       dismissible: true
     },
     nav
-  ) : null, /* @__PURE__ */ React18.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React18.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React18.createElement(
+  ) : null, /* @__PURE__ */ React33.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React33.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React33.createElement(
     IconButton,
     {
       icon: "menu",
@@ -3421,16 +3566,16 @@ var AppShell = React18.forwardRef(function AppShell2(props, ref) {
       },
       "aria-expanded": open
     }
-  ) : null, /* @__PURE__ */ React18.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React18.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
+  ) : null, /* @__PURE__ */ React33.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React33.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
 });
 
 // src/Surface.tsx
-var React19 = __toESM(require("react"), 1);
-var h5 = React19.createElement;
-var Surface = React19.forwardRef(function Surface2(props, ref) {
+var React34 = __toESM(require("react"), 1);
+var h8 = React34.createElement;
+var Surface = React34.forwardRef(function Surface2(props, ref) {
   const t = props.texture || "mesh";
   const rest = omit(props, ["texture", "className", "children", "as"]);
-  return h5(
+  return h8(
     props.as || "div",
     Object.assign({}, rest, {
       ref,
@@ -3448,14 +3593,14 @@ var Surface = React19.forwardRef(function Surface2(props, ref) {
 });
 
 // src/Stat.tsx
-var React20 = __toESM(require("react"), 1);
-var Stat = React20.forwardRef(function Stat2(props, ref) {
+var React35 = __toESM(require("react"), 1);
+var Stat = React35.forwardRef(function Stat2(props, ref) {
   const ch = props.change;
   const dir = ch && (ch.direction || "flat");
   const tone2 = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
   const Tag3 = props.href ? "a" : props.onClick ? "button" : "div";
   const interactive = Tag3 !== "div";
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Tag3,
     {
       ref,
@@ -3465,15 +3610,15 @@ var Stat = React20.forwardRef(function Stat2(props, ref) {
       type: Tag3 === "button" ? "button" : void 0,
       "aria-busy": props.loading || void 0
     },
-    /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React20.createElement(Icon, { name: props.icon })) : null),
-    props.loading ? /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React20.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__value" }, props.value, props.unit ? /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
-    ch && !props.loading || props.caption ? /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React20.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React20.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React20.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React20.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
+    /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React35.createElement(Icon, { name: props.icon })) : null),
+    props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React35.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__value" }, props.value, props.unit ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React35.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React35.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React35.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React35.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
   );
 });
 
 // src/TimePicker.tsx
-var React21 = __toESM(require("react"), 1);
-var import_react_dom6 = require("react-dom");
+var React36 = __toESM(require("react"), 1);
+var import_react_dom7 = require("react-dom");
 function pad2(n2) {
   return (n2 < 10 ? "0" : "") + n2;
 }
@@ -3496,7 +3641,7 @@ function parseTime(text) {
   if (hh > 23 || mm > 59) return null;
   return pad2(hh) + ":" + pad2(mm);
 }
-var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
+var TimePicker = React36.forwardRef(function TimePicker2(props, ref) {
   const t = useStrings();
   const auto = uid(), id = props.id || auto, listId = id + "-list";
   const st = useMaybeControlled(
@@ -3506,7 +3651,7 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
   );
   const value = st[0];
   const step = props.step || 30, lo = toMin(props.min) != null ? toMin(props.min) : 0, hi = toMin(props.max) != null ? toMin(props.max) : 24 * 60 - 1;
-  const slots = React21.useMemo(
+  const slots = React36.useMemo(
     function() {
       const out = [];
       for (let m = lo; m <= hi; m += step) out.push(fromMin(m));
@@ -3518,12 +3663,12 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
     const n2 = toMin(v);
     return n2 == null || n2 < lo || n2 > hi || props.isTimeDisabled && props.isTimeDisabled(v);
   }
-  const openState = React21.useState(false), open = openState[0], setOpen = openState[1];
-  const editState = React21.useState(null), editing = editState[0], setEditing = editState[1];
-  const aState = React21.useState(0), active = aState[0], setActive = aState[1];
-  const errState = React21.useState(null);
-  const pos = React21.useState(null);
-  const boxRef = React21.useRef(null), inputRef = React21.useRef(null), listRef = React21.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  const openState = React36.useState(false), open = openState[0], setOpen = openState[1];
+  const editState = React36.useState(null), editing = editState[0], setEditing = editState[1];
+  const aState = React36.useState(0), active = aState[0], setActive = aState[1];
+  const errState = React36.useState(null);
+  const pos = React36.useState(null);
+  const boxRef = React36.useRef(null), inputRef = React36.useRef(null), listRef = React36.useRef(null), inputMerged = useMergedRef(ref, inputRef);
   const mounted = useMounted();
   function nearest(v) {
     const n2 = toMin(v);
@@ -3551,7 +3696,7 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
     },
     [open]
   );
-  React21.useEffect(
+  React36.useEffect(
     function() {
       if (!open) return;
       function outside(e) {
@@ -3573,7 +3718,7 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
     },
     [open]
   );
-  React21.useEffect(
+  React36.useEffect(
     function() {
       if (!open || !listRef.current) return;
       const el = listRef.current.querySelector('[data-idx="' + active + '"]');
@@ -3670,10 +3815,10 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
     }
   }
   const error = errState[0] || props.error;
-  const list = open && mounted && pos[0] ? (0, import_react_dom6.createPortal)(
-    /* @__PURE__ */ React21.createElement("div", { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] }, /* @__PURE__ */ React21.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, slots.map(function(s, i) {
+  const list = open && mounted && pos[0] ? (0, import_react_dom7.createPortal)(
+    /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] }, /* @__PURE__ */ React36.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, slots.map(function(s, i) {
       const dis = blocked(s), sel = s === value;
-      return /* @__PURE__ */ React21.createElement(
+      return /* @__PURE__ */ React36.createElement(
         "li",
         {
           key: s,
@@ -3698,13 +3843,13 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
             if (active !== i) setActive(i);
           }
         },
-        /* @__PURE__ */ React21.createElement("span", { className: "aura-combo__label" }, s),
-        sel ? /* @__PURE__ */ React21.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+        /* @__PURE__ */ React36.createElement("span", { className: "aura-combo__label" }, s),
+        sel ? /* @__PURE__ */ React36.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
       );
     }))),
     document.body
   ) : null;
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React36.createElement(
     Field,
     {
       id,
@@ -3716,7 +3861,7 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React21.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React21.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React36.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React36.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React36.createElement(
       "input",
       {
         ref: inputMerged,
@@ -3756,7 +3901,7 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
           }, 0);
         }
       }
-    ), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React21.createElement(
+    ), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -3769,8 +3914,8 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
           if (inputRef.current) inputRef.current.focus();
         }
       },
-      /* @__PURE__ */ React21.createElement(Icon, { name: "x" })
-    ) : null, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React36.createElement(Icon, { name: "x" })
+    ) : null, /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -3788,14 +3933,14 @@ var TimePicker = React21.forwardRef(function TimePicker2(props, ref) {
           }
         }
       },
-      /* @__PURE__ */ React21.createElement(Icon, { name: "chevron-down" })
+      /* @__PURE__ */ React36.createElement(Icon, { name: "chevron-down" })
     )),
     list
   );
 });
 
 // src/FileUpload.tsx
-var React22 = __toESM(require("react"), 1);
+var React37 = __toESM(require("react"), 1);
 function formatBytes(n2) {
   if (n2 == null) return "";
   if (n2 < 1024) return n2 + " B";
@@ -3829,17 +3974,17 @@ function describeAccept(accept, t) {
   }).join(", ");
 }
 var seq = 0;
-var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
+var FileUpload = React37.forwardRef(function FileUpload2(props, ref) {
   const t = useStrings();
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.value, props.defaultValue || [], props.onChange);
   const items = st[0] || [];
-  const dragState = React22.useState(false), over = dragState[0];
-  const inputRef = React22.useRef(null), inputMerged = useMergedRef(ref, inputRef);
-  const urls = React22.useRef({});
+  const dragState = React37.useState(false), over = dragState[0];
+  const inputRef = React37.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  const urls = React37.useRef({});
   const maxFiles = props.multiple ? props.maxFiles : 1;
   const note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
-  React22.useEffect(function() {
+  React37.useEffect(function() {
     return function() {
       Object.keys(urls.current).forEach(function(k) {
         URL.revokeObjectURL(urls.current[k]);
@@ -3890,7 +4035,7 @@ var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
     if (inputRef.current) inputRef.current.focus();
   }
   const error = props.error;
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React37.createElement(
     Field,
     {
       id,
@@ -3902,7 +4047,7 @@ var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React37.createElement(
       "div",
       {
         className: cx("aura-upload", over && "is-over", props.disabled && "is-disabled", error && "is-invalid"),
@@ -3923,9 +4068,9 @@ var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
           add(e.dataTransfer && e.dataTransfer.files);
         }
       },
-      /* @__PURE__ */ React22.createElement(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
-      /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__text" }, t.dropFiles, " "),
-      /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React37.createElement(Icon, { name: "cloud-upload", size: "lg", className: "aura-upload__icon" }),
+      /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__text" }, t.dropFiles, " "),
+      /* @__PURE__ */ React37.createElement(
         "input",
         {
           ref: inputMerged,
@@ -3947,12 +4092,12 @@ var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
           }
         }
       ),
-      /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__browse", "aria-hidden": true }, props.multiple ? t.browse : t.browseOne),
-      note ? /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__note", id: id + "-note" }, note) : null
+      /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__browse", "aria-hidden": true }, props.multiple ? t.browse : t.browseOne),
+      note ? /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__note", id: id + "-note" }, note) : null
     ),
-    items.length ? /* @__PURE__ */ React22.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items.map(function(it) {
+    items.length ? /* @__PURE__ */ React37.createElement("ul", { className: "aura-upload__list", "aria-live": "polite" }, items.map(function(it) {
       const src = thumb(it);
-      return /* @__PURE__ */ React22.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React22.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React22.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__meta" }, /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React22.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React37.createElement("li", { key: it.id, className: cx("aura-upload__item", it.error && "is-error") }, src ? /* @__PURE__ */ React37.createElement("img", { className: "aura-upload__thumb", src, alt: "" }) : /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__thumb is-icon", "aria-hidden": true }, /* @__PURE__ */ React37.createElement(Icon, { name: /^image\//.test(it.type || "") ? "image" : "file", size: "md" })), /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__meta" }, /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__name" }, it.name), /* @__PURE__ */ React37.createElement("span", { className: "aura-upload__sub" }, it.error ? /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Icon, { name: "circle-alert", size: 12 }), it.error) : it.status === "uploading" ? t.uploading + (it.progress != null ? " " + Math.round(it.progress) + "%" : "") : it.status === "done" ? /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Icon, { name: "circle-check", size: 12 }), formatBytes(it.size)) : formatBytes(it.size)), it.status === "uploading" ? /* @__PURE__ */ React37.createElement(
         "span",
         {
           className: "aura-upload__bar",
@@ -3962,8 +4107,8 @@ var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
           "aria-valuemax": 100,
           "aria-valuenow": it.progress != null ? Math.round(it.progress) : void 0
         },
-        /* @__PURE__ */ React22.createElement("span", { style: { width: (it.progress || 0) + "%" } })
-      ) : null), /* @__PURE__ */ React22.createElement(
+        /* @__PURE__ */ React37.createElement("span", { style: { width: (it.progress || 0) + "%" } })
+      ) : null), /* @__PURE__ */ React37.createElement(
         IconButton,
         {
           icon: "x",
@@ -3979,14 +4124,14 @@ var FileUpload = React22.forwardRef(function FileUpload2(props, ref) {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h6 = String(hex).trim().replace("#", "");
-  if (h6.length === 3)
-    h6 = h6.split("").map(function(c) {
+  let h9 = String(hex).trim().replace("#", "");
+  if (h9.length === 3)
+    h9 = h9.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h6)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h9)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h6.slice(i, i + 2), 16) / 255;
+    return parseInt(h9.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -4213,9 +4358,9 @@ function createTheme(opts) {
 }
 
 // src/ThemeStyle.tsx
-var React23 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 function ThemeStyle(props) {
-  const css = React23.useMemo(
+  const css = React38.useMemo(
     function() {
       return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(
         props.selector
@@ -4223,11 +4368,11 @@ function ThemeStyle(props) {
     },
     [props.brand, props.signal, props.primary, props.name, props.selector]
   );
-  return /* @__PURE__ */ React23.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
+  return /* @__PURE__ */ React38.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
 }
 
 // src/colorScheme.tsx
-var React24 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 var DEFAULT_KEY = "aura-color-scheme";
 var SCHEMES = ["light", "dark", "system"];
 var EVENT = "aura-color-scheme";
@@ -4240,7 +4385,7 @@ function colorSchemeScript(options) {
   return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
 }
 function ColorSchemeScript(props) {
-  return /* @__PURE__ */ React24.createElement("script", { "data-aura-color-scheme": "", dangerouslySetInnerHTML: { __html: colorSchemeScript(props) } });
+  return /* @__PURE__ */ React39.createElement("script", { "data-aura-color-scheme": "", dangerouslySetInnerHTML: { __html: colorSchemeScript(props) } });
 }
 function systemDark() {
   return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -4258,7 +4403,7 @@ function apply(scheme) {
 function useColorScheme(options) {
   const key = options && options.storageKey || DEFAULT_KEY;
   const fallback = options && options.defaultScheme || "system";
-  const subscribe2 = React24.useCallback(
+  const subscribe2 = React39.useCallback(
     function(cb) {
       const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
       function onSystem() {
@@ -4276,7 +4421,7 @@ function useColorScheme(options) {
     },
     [fallback]
   );
-  const snapshot = React24.useSyncExternalStore(
+  const snapshot = React39.useSyncExternalStore(
     subscribe2,
     function() {
       const s = readScheme(fallback);
@@ -4287,7 +4432,7 @@ function useColorScheme(options) {
     }
   );
   const parts = snapshot.split("|");
-  const setScheme = React24.useCallback(
+  const setScheme = React39.useCallback(
     function(next) {
       if (!valid(next)) return;
       try {
@@ -4306,11 +4451,11 @@ function ColorSchemeToggle(props) {
   const cs = useColorScheme(props);
   const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
   const label = props.label || t.colorScheme;
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React39.createElement(
     DropdownMenu,
     {
       label,
-      trigger: /* @__PURE__ */ React24.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
+      trigger: /* @__PURE__ */ React39.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
       items: SCHEMES.map(function(s) {
         return {
           label: names[s],
@@ -4324,16 +4469,11 @@ function ColorSchemeToggle(props) {
   );
 }
 
-// src/extra.tsx
-var React25 = __toESM(require("react"), 1);
-var import_react_dom7 = require("react-dom");
-var TONES = ["neutral", "accent", "success", "warning", "danger"];
-function tone(t) {
-  return TONES.indexOf(t) >= 0 ? t : "neutral";
-}
-var Badge = React25.forwardRef(function Badge2(props, ref) {
+// src/Badge.tsx
+var React40 = __toESM(require("react"), 1);
+var Badge = React40.forwardRef(function Badge2(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "span",
     {
       ...rest,
@@ -4346,20 +4486,23 @@ var Badge = React25.forwardRef(function Badge2(props, ref) {
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon ? /* @__PURE__ */ React40.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 });
-var Tag = React25.forwardRef(function Tag2(props, ref) {
+
+// src/Tag.tsx
+var React41 = __toESM(require("react"), 1);
+var Tag = React41.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
   const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
   const inner = [
-    props.icon ? /* @__PURE__ */ React25.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
-    /* @__PURE__ */ React25.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
+    props.icon ? /* @__PURE__ */ React41.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
+    /* @__PURE__ */ React41.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
   ];
   if (selectable) {
-    return /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React41.createElement(
       "button",
       {
         ...rest,
@@ -4369,11 +4512,11 @@ var Tag = React25.forwardRef(function Tag2(props, ref) {
         disabled: props.disabled,
         className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
       },
-      props.selected ? /* @__PURE__ */ React25.createElement(Icon, { name: "check", size: 14 }) : inner[0],
+      props.selected ? /* @__PURE__ */ React41.createElement(Icon, { name: "check", size: 14 }) : inner[0],
       inner[1]
     );
   }
-  return /* @__PURE__ */ React25.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React41.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React41.createElement(
     "button",
     {
       type: "button",
@@ -4381,15 +4524,18 @@ var Tag = React25.forwardRef(function Tag2(props, ref) {
       "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
       onClick: props.onRemove
     },
-    /* @__PURE__ */ React25.createElement(Icon, { name: "x", size: 12 })
+    /* @__PURE__ */ React41.createElement(Icon, { name: "x", size: 12 })
   ) : null);
 });
-var Progress = React25.forwardRef(function Progress2(props, ref) {
+
+// src/Progress.tsx
+var React42 = __toESM(require("react"), 1);
+var Progress = React42.forwardRef(function Progress2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const max = props.max || 100, det = props.value != null;
   const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
   const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React42.createElement(
     "div",
     {
       ref,
@@ -4400,8 +4546,8 @@ var Progress = React25.forwardRef(function Progress2(props, ref) {
         props.className
       )
     },
-    props.label || props.showValue && shown ? /* @__PURE__ */ React25.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React25.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React25.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React25.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
-    /* @__PURE__ */ React25.createElement(
+    props.label || props.showValue && shown ? /* @__PURE__ */ React42.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React42.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React42.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React42.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
+    /* @__PURE__ */ React42.createElement(
       "div",
       {
         className: cx("aura-progress__track", !det && "is-indeterminate"),
@@ -4413,18 +4559,21 @@ var Progress = React25.forwardRef(function Progress2(props, ref) {
         "aria-valuenow": det ? props.value : void 0,
         "aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
       },
-      /* @__PURE__ */ React25.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
+      /* @__PURE__ */ React42.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
     ),
-    props.hint ? /* @__PURE__ */ React25.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
+    props.hint ? /* @__PURE__ */ React42.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
   );
 });
-var Skeleton = React25.forwardRef(function Skeleton2(props, ref) {
+
+// src/Skeleton.tsx
+var React43 = __toESM(require("react"), 1);
+var Skeleton = React43.forwardRef(function Skeleton2(props, ref) {
   const v = props.variant || "text";
   if (v === "text" && (props.lines || 1) > 1) {
     const n2 = props.lines, rows = [];
     for (let i = 0; i < n2; i++)
-      rows.push(/* @__PURE__ */ React25.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
-    return /* @__PURE__ */ React25.createElement(
+      rows.push(/* @__PURE__ */ React43.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
+    return /* @__PURE__ */ React43.createElement(
       "span",
       {
         ref,
@@ -4439,22 +4588,28 @@ var Skeleton = React25.forwardRef(function Skeleton2(props, ref) {
   if (v === "circle") {
     style.width = style.height = props.size || props.width || 40;
   }
-  return /* @__PURE__ */ React25.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
+  return /* @__PURE__ */ React43.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
 });
-var EmptyState = React25.forwardRef(function EmptyState2(props, ref) {
+
+// src/EmptyState.tsx
+var React44 = __toESM(require("react"), 1);
+var EmptyState = React44.forwardRef(function EmptyState2(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       ref,
       className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
     },
-    /* @__PURE__ */ React25.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React25.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
-    /* @__PURE__ */ React25.createElement(HT, { className: "aura-empty__title" }, props.title),
-    props.description ? /* @__PURE__ */ React25.createElement("p", { className: "aura-empty__text" }, props.description) : null,
-    props.action ? /* @__PURE__ */ React25.createElement("div", { className: "aura-empty__action" }, props.action) : null
+    /* @__PURE__ */ React44.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React44.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
+    /* @__PURE__ */ React44.createElement(HT, { className: "aura-empty__title" }, props.title),
+    props.description ? /* @__PURE__ */ React44.createElement("p", { className: "aura-empty__text" }, props.description) : null,
+    props.action ? /* @__PURE__ */ React44.createElement("div", { className: "aura-empty__action" }, props.action) : null
   );
 });
+
+// src/Pagination.tsx
+var React45 = __toESM(require("react"), 1);
 function pageList(page, count, sib) {
   let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
   if (page - sib <= 3) {
@@ -4474,7 +4629,7 @@ function pageList(page, count, sib) {
   if (count > 1) out.push(count);
   return out;
 }
-var Pagination = React25.forwardRef(function Pagination2(props, ref) {
+var Pagination = React45.forwardRef(function Pagination2(props, ref) {
   const t = useStrings();
   const count = Math.max(1, props.pageCount || 1);
   const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
@@ -4492,7 +4647,7 @@ var Pagination = React25.forwardRef(function Pagination2(props, ref) {
       },
       extra
     );
-    return link ? /* @__PURE__ */ React25.createElement(
+    return link ? /* @__PURE__ */ React45.createElement(
       "a",
       {
         href: link(p),
@@ -4505,7 +4660,7 @@ var Pagination = React25.forwardRef(function Pagination2(props, ref) {
         ...common
       },
       label
-    ) : /* @__PURE__ */ React25.createElement(
+    ) : /* @__PURE__ */ React45.createElement(
       "button",
       {
         type: "button",
@@ -4517,7 +4672,7 @@ var Pagination = React25.forwardRef(function Pagination2(props, ref) {
       label
     );
   }
-  return /* @__PURE__ */ React25.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React45.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React45.createElement(
     IconButton,
     {
       icon: "chevron-left",
@@ -4527,9 +4682,9 @@ var Pagination = React25.forwardRef(function Pagination2(props, ref) {
         go(page - 1);
       }
     }
-  ), /* @__PURE__ */ React25.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
-    return typeof p === "number" ? /* @__PURE__ */ React25.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React25.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
-  })), /* @__PURE__ */ React25.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React45.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
+    return typeof p === "number" ? /* @__PURE__ */ React45.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React45.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
+  })), /* @__PURE__ */ React45.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React45.createElement(
     IconButton,
     {
       icon: "chevron-right",
@@ -4541,7 +4696,10 @@ var Pagination = React25.forwardRef(function Pagination2(props, ref) {
     }
   ));
 });
-var Accordion = React25.forwardRef(function Accordion2(props, ref) {
+
+// src/Accordion.tsx
+var React46 = __toESM(require("react"), 1);
+var Accordion = React46.forwardRef(function Accordion2(props, ref) {
   const auto = uid(), base = props.id || auto;
   const multiple = props.type === "multiple";
   const st = useMaybeControlled(
@@ -4579,9 +4737,9 @@ var Accordion = React25.forwardRef(function Accordion2(props, ref) {
       n2.focus();
     }
   }
-  return /* @__PURE__ */ React25.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items.map(function(it) {
+  return /* @__PURE__ */ React46.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items.map(function(it) {
     const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
-    return /* @__PURE__ */ React25.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React25.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React46.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React46.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React46.createElement(
       "button",
       {
         type: "button",
@@ -4593,12 +4751,16 @@ var Accordion = React25.forwardRef(function Accordion2(props, ref) {
           toggle(it.id);
         }
       },
-      it.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
-      /* @__PURE__ */ React25.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React25.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
-      /* @__PURE__ */ React25.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
-    )), /* @__PURE__ */ React25.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
+      it.icon ? /* @__PURE__ */ React46.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
+      /* @__PURE__ */ React46.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React46.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
+      /* @__PURE__ */ React46.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
+    )), /* @__PURE__ */ React46.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
   }));
 });
+
+// src/Popover.tsx
+var React47 = __toESM(require("react"), 1);
+var import_react_dom8 = require("react-dom");
 function position(anchor, pop, placement) {
   const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
   let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
@@ -4608,13 +4770,13 @@ function position(anchor, pop, placement) {
   const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
   return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
 }
-var Popover = React25.forwardRef(function Popover2(props, ref) {
+var Popover = React47.forwardRef(function Popover2(props, ref) {
   const t = useStrings();
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
   const open = !!st[0];
-  const wrap = React25.useRef(null), pop = React25.useRef(null), popMerged = useMergedRef(ref, pop);
-  const pos = React25.useState(null), mounted = useMounted();
+  const wrap = React47.useRef(null), pop = React47.useRef(null), popMerged = useMergedRef(ref, pop);
+  const pos = React47.useState(null), mounted = useMounted();
   function trigger() {
     return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
   }
@@ -4641,7 +4803,7 @@ var Popover = React25.forwardRef(function Popover2(props, ref) {
     },
     [open, mounted, props.placement]
   );
-  React25.useEffect(
+  React47.useEffect(
     function() {
       if (!open || !mounted) return;
       if (props.autoFocus !== false && pop.current) {
@@ -4660,9 +4822,9 @@ var Popover = React25.forwardRef(function Popover2(props, ref) {
     },
     [open, mounted]
   );
-  const child = React25.Children.only(props.trigger);
-  const panel = open && mounted ? (0, import_react_dom7.createPortal)(
-    /* @__PURE__ */ React25.createElement(
+  const child = React47.Children.only(props.trigger);
+  const panel = open && mounted ? (0, import_react_dom8.createPortal)(
+    /* @__PURE__ */ React47.createElement(
       "div",
       {
         ref: popMerged,
@@ -4684,7 +4846,7 @@ var Popover = React25.forwardRef(function Popover2(props, ref) {
           } else trapTab(e, pop.current);
         }
       },
-      props.title ? /* @__PURE__ */ React25.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React25.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React25.createElement(
+      props.title ? /* @__PURE__ */ React47.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React47.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React47.createElement(
         IconButton,
         {
           icon: "x",
@@ -4694,7 +4856,7 @@ var Popover = React25.forwardRef(function Popover2(props, ref) {
           }
         }
       )) : null,
-      /* @__PURE__ */ React25.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
+      /* @__PURE__ */ React47.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
         close: function() {
           close(true);
         }
@@ -4702,7 +4864,7 @@ var Popover = React25.forwardRef(function Popover2(props, ref) {
     ),
     document.body
   ) : null;
-  return /* @__PURE__ */ React25.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React25.cloneElement(child, {
+  return /* @__PURE__ */ React47.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React47.cloneElement(child, {
     onClick: function(e) {
       if (child.props.onClick) child.props.onClick(e);
       st[1](!open);
@@ -4712,3 +4874,321 @@ var Popover = React25.forwardRef(function Popover2(props, ref) {
     "aria-controls": open ? id : void 0
   }), panel);
 });
+
+// src/NumberField.tsx
+var React48 = __toESM(require("react"), 1);
+function decimalsOf(n2) {
+  const s = String(n2);
+  const i = s.indexOf(".");
+  return i < 0 ? 0 : s.length - i - 1;
+}
+function parse(text) {
+  const s = text.replace(/[,\s ]/g, "");
+  if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
+  return Number(s);
+}
+var NumberField = React48.forwardRef(function NumberField2(props, ref) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto;
+  const step = props.step || 1;
+  const decimals = props.decimals != null ? props.decimals : decimalsOf(step);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const value = st[0], setValue = st[1];
+  const draftState = React48.useState(null), draft = draftState[0], setDraft = draftState[1];
+  function fmt2(n2) {
+    if (n2 == null || isNaN(n2)) return "";
+    return n2.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  }
+  function fit2(n2) {
+    let v = n2;
+    if (props.min != null && v < props.min) v = props.min;
+    if (props.max != null && v > props.max) v = props.max;
+    const f = Math.pow(10, decimals);
+    return Math.round(v * f) / f;
+  }
+  function nudge(by) {
+    if (props.disabled || props.readOnly) return;
+    const base = value == null ? props.min != null && props.min > 0 ? props.min - by : 0 : value;
+    const next = fit2(base + by);
+    setValue(next);
+    setDraft(null);
+  }
+  function onKeyDown(e) {
+    const k = e.key;
+    let by = 0;
+    if (k === "ArrowUp") by = step;
+    else if (k === "ArrowDown") by = -step;
+    else if (k === "PageUp") by = step * 10;
+    else if (k === "PageDown") by = -step * 10;
+    else if (k === "Home" && props.min != null) {
+      e.preventDefault();
+      setValue(props.min);
+      setDraft(null);
+      return;
+    } else if (k === "End" && props.max != null) {
+      e.preventDefault();
+      setValue(props.max);
+      setDraft(null);
+      return;
+    }
+    if (by) {
+      e.preventDefault();
+      nudge(by);
+    }
+  }
+  const atMin = value != null && props.min != null && value <= props.min;
+  const atMax = value != null && props.max != null && value >= props.max;
+  const affixText = function(x) {
+    return typeof x === "string" || typeof x === "number" ? String(x) : "";
+  };
+  const valueText = value == null ? void 0 : [affixText(props.prefix), fmt2(value), affixText(props.suffix)].join(" ").trim();
+  const stepper = props.stepper !== false && !props.readOnly;
+  return /* @__PURE__ */ React48.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React48.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React48.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React48.createElement(
+      "input",
+      {
+        ref,
+        id,
+        type: "text",
+        role: "spinbutton",
+        inputMode: decimals > 0 || props.min != null && props.min < 0 ? "decimal" : "numeric",
+        autoComplete: "off",
+        className: "aura-input__control",
+        name: props.name,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        "aria-valuenow": value == null ? void 0 : value,
+        "aria-valuemin": props.min,
+        "aria-valuemax": props.max,
+        "aria-valuetext": valueText,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props),
+        value: draft != null ? draft : fmt2(value),
+        onFocus: function() {
+          setDraft(fmt2(value));
+        },
+        onChange: function(e) {
+          const text = e.target.value;
+          setDraft(text);
+          if (!text.trim()) setValue(null);
+          else {
+            const n2 = parse(text);
+            if (!isNaN(n2)) setValue(n2);
+          }
+        },
+        onBlur: function(e) {
+          const n2 = draft == null ? value : !draft.trim() ? null : parse(draft);
+          if (n2 == null) {
+            if (value != null) setValue(null);
+          } else if (!isNaN(n2)) {
+            const f = fit2(n2);
+            if (f !== value) setValue(f);
+          }
+          setDraft(null);
+          if (props.onBlur) props.onBlur(e);
+        },
+        onKeyDown
+      }
+    ), props.suffix != null ? /* @__PURE__ */ React48.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React48.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React48.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.decrease,
+        "aria-controls": id,
+        disabled: props.disabled || atMin,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(-step);
+        }
+      },
+      /* @__PURE__ */ React48.createElement(Icon, { name: "minus" })
+    ), /* @__PURE__ */ React48.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.increase,
+        "aria-controls": id,
+        disabled: props.disabled || atMax,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(step);
+        }
+      },
+      /* @__PURE__ */ React48.createElement(Icon, { name: "plus" })
+    )) : null)
+  );
+});
+
+// src/Stepper.tsx
+var React49 = __toESM(require("react"), 1);
+var Stepper = React49.forwardRef(function Stepper2(props, ref) {
+  const t = useStrings();
+  const steps = props.steps || [];
+  let at = -1;
+  steps.forEach(function(s, i) {
+    if (s.id === props.current) at = i;
+  });
+  if (at < 0) at = 0;
+  const vertical = props.orientation === "vertical";
+  const cur = steps[at];
+  return /* @__PURE__ */ React49.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": props.label,
+      className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
+    },
+    /* @__PURE__ */ React49.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
+      const state = i < at ? "done" : i === at ? "current" : "upcoming";
+      const marker = /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React49.createElement(Icon, { name: "check" }) : i + 1);
+      const text = /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React49.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+      const clickable = state === "done" && !!props.onStepClick;
+      return /* @__PURE__ */ React49.createElement(
+        "li",
+        {
+          key: s.id,
+          className: cx("aura-stepper__item", "is-" + state),
+          "aria-current": state === "current" ? "step" : void 0
+        },
+        clickable ? /* @__PURE__ */ React49.createElement(
+          "button",
+          {
+            type: "button",
+            className: "aura-stepper__step aura-focusable",
+            onClick: function() {
+              props.onStepClick(s.id);
+            }
+          },
+          marker,
+          text
+        ) : /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__step" }, marker, text)
+      );
+    })),
+    !vertical && cur ? /* @__PURE__ */ React49.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React49.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+  );
+});
+
+// src/SegmentedControl.tsx
+var React50 = __toESM(require("react"), 1);
+function toOpt2(o) {
+  return typeof o === "object" ? o : { value: o, label: o };
+}
+var SegmentedControl = React50.forwardRef(
+  function SegmentedControl2(props, ref) {
+    const options = (props.options || []).map(toOpt2);
+    const firstEnabled = options.filter(function(o) {
+      return !o.disabled;
+    })[0];
+    const st = useMaybeControlled(
+      props.value,
+      props.defaultValue != null ? props.defaultValue : firstEnabled ? firstEnabled.value : void 0,
+      props.onChange
+    );
+    const value = st[0], setValue = st[1];
+    const auto = uid(), id = props.id || auto;
+    const refs = React50.useRef([]);
+    const selIdx = options.findIndex(function(o) {
+      return o.value === value;
+    });
+    const tabIdx = selIdx >= 0 && !options[selIdx].disabled ? selIdx : options.indexOf(firstEnabled);
+    function move(from, dir) {
+      const n2 = options.length;
+      for (let k = 1; k <= n2; k++) {
+        const i = ((from + dir * k) % n2 + n2) % n2;
+        if (!options[i].disabled) {
+          setValue(options[i].value);
+          const el = refs.current[i];
+          if (el) el.focus();
+          return;
+        }
+      }
+    }
+    function onKeyDown(e, i) {
+      const k = e.key;
+      if (k === "ArrowRight" || k === "ArrowDown") {
+        e.preventDefault();
+        move(i, 1);
+      } else if (k === "ArrowLeft" || k === "ArrowUp") {
+        e.preventDefault();
+        move(i, -1);
+      } else if (k === "Home") {
+        e.preventDefault();
+        move(-1, 1);
+      } else if (k === "End") {
+        e.preventDefault();
+        move(options.length, -1);
+      }
+    }
+    return /* @__PURE__ */ React50.createElement(
+      "div",
+      {
+        ref,
+        id,
+        role: "radiogroup",
+        "aria-label": props.label,
+        "aria-disabled": props.disabled || void 0,
+        className: cx(
+          "aura-segmented",
+          props.size === "sm" && "aura-segmented--sm",
+          props.fullWidth && "is-full",
+          props.disabled && "is-disabled",
+          props.className
+        )
+      },
+      options.map(function(o, i) {
+        const on = o.value === value;
+        const off = props.disabled || o.disabled;
+        return /* @__PURE__ */ React50.createElement(
+          "button",
+          {
+            key: o.value,
+            ref: function(el) {
+              refs.current[i] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            "aria-label": o.iconOnly ? o.label : void 0,
+            title: o.iconOnly ? o.label : void 0,
+            tabIndex: i === tabIdx && !props.disabled ? 0 : -1,
+            disabled: off,
+            className: cx("aura-segmented__option", on && "is-selected", o.iconOnly && "is-icon"),
+            onClick: function() {
+              setValue(o.value);
+            },
+            onKeyDown: function(e) {
+              onKeyDown(e, i);
+            }
+          },
+          o.icon ? /* @__PURE__ */ React50.createElement(Icon, { name: o.icon }) : null,
+          o.iconOnly ? null : /* @__PURE__ */ React50.createElement("span", null, o.label)
+        );
+      })
+    );
+  }
+);