@mt-gloss/ui 0.0.13 → 0.0.15

package/{UIContext-8dkjkIV1.js → UIContext-C3E-k7HI.js}

@@ -1,23 +1,23 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import u, { useState as k, createContext as N, useContext as C } from "react";
-import { createPortal as $ } from "react-dom";
-import { AnimatePresence as w, motion as P } from "framer-motion";
-import { useFloating as R, autoUpdate as x, offset as z, flip as M, shift as T, useDismiss as D, useRole as I, useInteractions as V } from "@floating-ui/react";
-function p(s, a, e, o) {
-  const t = {}, r = {};
-  if (!s) return { style: t, dataAttrs: r };
-  for (const [l, d] of Object.entries(a)) {
-    const i = s[l];
+import p, { useState as C, createContext as x, useContext as $ } from "react";
+import { createPortal as w } from "react-dom";
+import { AnimatePresence as R, motion as P } from "framer-motion";
+import { useFloating as z, autoUpdate as T, offset as M, flip as D, shift as I, useDismiss as V, useRole as E, useInteractions as O } from "@floating-ui/react";
+function u(s, a, e, o) {
+  const t = {}, l = {};
+  if (!s) return { style: t, dataAttrs: l };
+  for (const [r, d] of Object.entries(a)) {
+    const i = s[r];
     i != null && i !== !1 && (t[d] = String(i));
   }
   if (e)
-    for (const [l, d] of Object.entries(e)) {
-      const i = s[l];
-      i != null && i !== !1 && (r[d] = String(i));
+    for (const [r, d] of Object.entries(e)) {
+      const i = s[r];
+      i != null && i !== !1 && (l[d] = String(i));
     }
-  return { style: t, dataAttrs: r };
+  return { style: t, dataAttrs: l };
 }
-const O = {
+const H = {
   bg: "--_bg",
   color: "--_color",
   borderColor: "--_border-color",
@@ -29,25 +29,25 @@ const O = {
   fontWeight: "--_font-weight",
   minHeight: "--_min-height",
   gap: "--_gap"
-}, H = {
+}, F = {
   display: "data-display"
 };
-function E(s) {
-  const { as: a, definition: e, className: o, style: t, children: r, disabled: l, loading: d, ...i } = s, c = a || "button", { style: g, dataAttrs: _ } = p(e, O, H);
-  return l && (_["data-disabled"] = ""), d && (_["data-loading"] = ""), /* @__PURE__ */ n(
+function G(s) {
+  const { as: a, definition: e, className: o, style: t, children: l, disabled: r, loading: d, ...i } = s, c = a || "button", { style: g, dataAttrs: _ } = u(e, H, F);
+  return r && (_["data-disabled"] = ""), d && (_["data-loading"] = ""), /* @__PURE__ */ n(
     c,
     {
       className: o ? `gloss-base-button ${o}` : "gloss-base-button",
       style: { ...g, ...t },
-      disabled: l || d,
+      disabled: r || d,
       ..._,
       ...i,
-      children: r
+      children: l
     }
   );
 }
-E.displayName = "BaseButton";
-const Oa = {
+G.displayName = "BaseButton";
+const Ga = {
   // Brand
   BrandPrimary: "var(--gloss-color-brand-primary)",
   BrandPrimaryHover: "var(--gloss-color-brand-primary-hover)",
@@ -118,7 +118,7 @@ const Oa = {
   Amber600: "var(--gloss-color-amber-600)",
   // Base
   White: "var(--gloss-color-white)"
-}, Ha = {
+}, La = {
   None: "0",
   Xs: "var(--gloss-spacing-1)",
   Sm: "var(--gloss-spacing-2)",
@@ -130,7 +130,30 @@ const Oa = {
   "4xl": "var(--gloss-spacing-10)",
   "5xl": "var(--gloss-spacing-12)",
   "6xl": "var(--gloss-spacing-16)"
-}, Ea = {
+}, Wa = {
+  // Font families (CSS vars)
+  FontDisplay: "var(--gloss-font-display)",
+  FontBody: "var(--gloss-font-body)",
+  FontMono: "var(--gloss-font-mono)",
+  // Font sizes (CSS vars)
+  TextXs: "var(--gloss-text-xs)",
+  TextSm: "var(--gloss-text-sm)",
+  TextBase: "var(--gloss-text-base)",
+  TextLg: "var(--gloss-text-lg)",
+  TextXl: "var(--gloss-text-xl)",
+  Text2xl: "var(--gloss-text-2xl)",
+  Text3xl: "var(--gloss-text-3xl)",
+  Text4xl: "var(--gloss-text-4xl)",
+  // Line heights (raw values — no SCSS token)
+  LeadingTight: "1.25",
+  LeadingNormal: "1.5",
+  LeadingRelaxed: "1.75",
+  // Font weights (raw values — no SCSS token)
+  WeightNormal: "400",
+  WeightMedium: "500",
+  WeightSemibold: "600",
+  WeightBold: "700"
+}, Xa = {
   Card: "var(--gloss-elevation-card)",
   ButtonDefault: "var(--gloss-elevation-button-default)",
   ButtonHover: "var(--gloss-elevation-button-hover)",
@@ -140,7 +163,7 @@ const Oa = {
   InputFocus: "var(--gloss-elevation-input-focus)",
   Sidebar: "var(--gloss-elevation-sidebar)",
   None: "none"
-}, Ga = {
+}, ja = {
   None: "0",
   Xs: "var(--gloss-radius-xs)",
   Sm: "var(--gloss-radius-sm)",
@@ -148,7 +171,7 @@ const Oa = {
   Lg: "var(--gloss-radius-lg)",
   Xl: "var(--gloss-radius-xl)",
   Full: "var(--gloss-radius-full)"
-}, Fa = {
+}, Ua = {
   Dropdown: "var(--gloss-z-dropdown)",
   Sticky: "var(--gloss-z-sticky)",
   Overlay: "var(--gloss-z-overlay)",
@@ -156,8 +179,8 @@ const Oa = {
   Popover: "var(--gloss-z-popover)",
   Toast: "var(--gloss-z-toast)"
 };
-function G(s) {
-  const { as: a, definition: e, className: o, style: t, children: r, ...l } = s, d = a || "div", i = { ...t };
+function L(s) {
+  const { as: a, definition: e, className: o, style: t, children: l, ...r } = s, d = a || "div", i = { ...t };
   e?.padding && (i["--_padding"] = e.padding), e?.paddingX && (i["--_px"] = e.paddingX), e?.paddingY && (i["--_py"] = e.paddingY), e?.margin && (i["--_margin"] = e.margin), e?.gap && (i["--_gap"] = e.gap), e?.bg && (i["--_bg"] = e.bg), e?.border && (i["--_border"] = e.border), e?.radius && (i["--_radius"] = e.radius);
   const c = {};
   return e?.display && (c["data-display"] = e.display), e?.direction && (c["data-direction"] = e.direction), e?.align && (c["data-align"] = e.align), e?.justify && (c["data-justify"] = e.justify), e?.wrap && (c["data-wrap"] = ""), e?.paddingX && (c["data-has-px"] = ""), e?.paddingY && (c["data-has-py"] = ""), /* @__PURE__ */ n(
@@ -166,14 +189,14 @@ function G(s) {
       className: o ? `gloss-base-box ${o}` : "gloss-base-box",
       style: i,
       ...c,
-      ...l,
-      children: r
+      ...r,
+      children: l
     }
   );
 }
-G.displayName = "BaseBox";
-function F(s) {
-  const { as: a, definition: e, className: o, style: t, children: r, ...l } = s, d = a || "div", i = { ...t };
+L.displayName = "BaseBox";
+function W(s) {
+  const { as: a, definition: e, className: o, style: t, children: l, ...r } = s, d = a || "div", i = { ...t };
   e?.gap && (i["--_gap"] = e.gap), e?.padding && (i["--_padding"] = e.padding);
   const c = {};
   return e?.direction === "horizontal" && (c["data-direction"] = "horizontal"), e?.align && (c["data-align"] = e.align), e?.justify && (c["data-justify"] = e.justify), e?.wrap && (c["data-wrap"] = ""), /* @__PURE__ */ n(
@@ -182,29 +205,29 @@ function F(s) {
       className: o ? `gloss-base-stack ${o}` : "gloss-base-stack",
       style: i,
       ...c,
-      ...l,
-      children: r
+      ...r,
+      children: l
     }
   );
 }
-F.displayName = "BaseStack";
+W.displayName = "BaseStack";
 function X(s) {
-  const { as: a, definition: e, className: o, style: t, ...r } = s, l = a || "hr", d = { ...t };
+  const { as: a, definition: e, className: o, style: t, ...l } = s, r = a || "hr", d = { ...t };
   e?.color && (d["--_color"] = e.color), e?.thickness && (d["--_thickness"] = e.thickness), e?.spacing && (d["--_spacing"] = e.spacing);
   const i = {};
   return e?.orientation === "vertical" && (i["data-orientation"] = "vertical"), /* @__PURE__ */ n(
-    l,
+    r,
     {
       className: o ? `gloss-base-divider ${o}` : "gloss-base-divider",
       style: d,
       ...i,
-      ...r
+      ...l
     }
   );
 }
 X.displayName = "BaseDivider";
 function h(s) {
-  const { as: a, definition: e, className: o, style: t, children: r, ...l } = s, d = a || "span", i = { ...t };
+  const { as: a, definition: e, className: o, style: t, children: l, ...r } = s, d = a || "span", i = { ...t };
   e?.fontFamily && (i["--_font-family"] = e.fontFamily), e?.fontSize && (i["--_font-size"] = e.fontSize), e?.fontWeight && (i["--_font-weight"] = e.fontWeight), e?.lineHeight && (i["--_line-height"] = e.lineHeight), e?.letterSpacing && (i["--_letter-spacing"] = e.letterSpacing), e?.color && (i["--_color"] = e.color);
   const c = {};
   return e?.align && (c["data-align"] = e.align), e?.truncate && (c["data-truncate"] = ""), e?.wrap && (c["data-wrap"] = e.wrap), /* @__PURE__ */ n(
@@ -213,8 +236,8 @@ function h(s) {
       className: o ? `gloss-base-typography ${o}` : "gloss-base-typography",
       style: i,
       ...c,
-      ...l,
-      children: r
+      ...r,
+      children: l
     }
   );
 }
@@ -224,7 +247,7 @@ const j = {
   md: 20,
   lg: 24,
   xl: 32
-}, B = ({
+}, S = ({
   name: s,
   size: a = "md",
   className: e = "",
@@ -244,87 +267,101 @@ const j = {
     }
   );
 };
-B.displayName = "Icon";
+S.displayName = "Icon";
 function U(s) {
-  const { definition: a, name: e, icon: o, className: t, style: r } = s;
+  const { definition: a, name: e, icon: o, className: t, style: l } = s;
   if (!e && !o) return null;
-  const l = { ...r };
-  a?.color && (l["--_color"] = a.color);
+  const r = { ...l };
+  a?.color && (r["--_color"] = a.color);
   const d = {};
   return a?.size && (d["data-size"] = a.size), /* @__PURE__ */ n(
     "span",
     {
       className: t ? `gloss-base-icon ${t}` : "gloss-base-icon",
-      style: l,
+      style: r,
       ...d,
-      children: e ? /* @__PURE__ */ n(B, { name: e, size: a?.size ?? "md" }) : o
+      children: e ? /* @__PURE__ */ n(S, { name: e, size: a?.size ?? "md" }) : o
     }
   );
 }
 U.displayName = "BaseIcon";
-function W(s) {
+function Y(s) {
   const {
     open: a,
     placement: e = "bottom",
     offsetValue: o = 8,
-    onOpenChange: t,
-    anchorEl: r
+    onOpenChange: t
   } = s;
-  return R({
+  return z({
     open: a,
     onOpenChange: t,
     placement: e,
-    middleware: [z(o), M(), T()],
-    whileElementsMounted: x,
-    ...r ? { elements: { reference: r } } : {}
+    middleware: [M(o), D(), I()],
+    whileElementsMounted: T,
+    // Phase 6.1.1 bug fix 2026-04-16: use top/left positioning (not transform).
+    // BaseOverlay wraps content in framer-motion motion.div with animate={scale},
+    // which owns the `transform` CSS property. If floating-ui writes
+    // transform: translate(), framer's transform: scale() overrides it, yielding
+    // a no-translate overlay stuck at (0,0). With transform: false, floating-ui
+    // writes left/top instead — no conflict with framer.
+    transform: !1
   });
 }
-function L(s) {
+function K(s) {
   const {
     context: a,
     outsidePress: e = !0,
     escapeKey: o = !0,
     role: t = "dialog"
-  } = s, r = D(a, { outsidePress: e, escapeKey: o }), l = I(a, { role: t }), { getFloatingProps: d, getReferenceProps: i } = V([
-    r,
-    l
+  } = s, l = V(a, { outsidePress: e, escapeKey: o }), r = E(a, { role: t }), { getFloatingProps: d, getReferenceProps: i } = O([
+    l,
+    r
   ]);
   return { getFloatingProps: d, getReferenceProps: i };
 }
-function S(s) {
-  const { definition: a, open: e, onDismiss: o, anchorRef: t, className: r, style: l, children: d } = s, i = (m) => {
-    !m && o && o();
-  }, c = W({
+function A(s) {
+  const { definition: a, open: e, onDismiss: o, anchorRef: t, className: l, style: r, children: d } = s, i = (N) => {
+    !N && o && o();
+  }, [c, g] = p.useState(
+    t?.current ?? null
+  );
+  p.useEffect(() => {
+    g(t?.current ?? null);
+  });
+  const _ = Y({
     open: e,
     placement: a?.placement,
     offsetValue: a?.offset,
-    onOpenChange: i,
-    anchorEl: t?.current ?? void 0
-  }), { getFloatingProps: g } = L({
-    context: c.context,
+    onOpenChange: i
+  });
+  p.useEffect(() => {
+    c && (_.refs.setReference(c), _.update());
+  }, [c, _.refs, _.update]);
+  const { getFloatingProps: f } = K({
+    context: _.context,
     outsidePress: a?.dismissOnClickOutside ?? !0,
     escapeKey: a?.dismissOnEscape ?? !0,
     role: a?.role ?? "dialog"
-  }), _ = { ...l };
-  a?.bg && (_["--_bg"] = a.bg), a?.shadow && (_["--_shadow"] = a.shadow), a?.radius && (_["--_radius"] = a.radius), a?.padding && (_["--_padding"] = a.padding), a?.zIndex && (_["--_z-index"] = a.zIndex);
-  const f = a?.portal !== !1, v = !!t?.current, y = /* @__PURE__ */ n(w, { children: e && /* @__PURE__ */ n(
+  }), m = { ...r };
+  a?.bg && (m["--_bg"] = a.bg), a?.shadow && (m["--_shadow"] = a.shadow), a?.radius && (m["--_radius"] = a.radius), a?.padding && (m["--_padding"] = a.padding), a?.zIndex && (m["--_z-index"] = a.zIndex);
+  const v = a?.portal !== !1, y = !!c, B = /* @__PURE__ */ n(R, { children: e && /* @__PURE__ */ n(
     P.div,
     {
-      ref: c.refs.setFloating,
-      className: r ? `gloss-base-overlay ${r}` : "gloss-base-overlay",
-      style: v ? { ...c.floatingStyles, ..._ } : _,
+      ref: _.refs.setFloating,
+      className: l ? `gloss-base-overlay ${l}` : "gloss-base-overlay",
+      style: y ? { ..._.floatingStyles, ...m } : m,
       initial: { opacity: 0, scale: 0.95 },
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0.95 },
       transition: { duration: 0.15 },
-      ...g(),
+      ...f(),
       children: d
     }
   ) });
-  return f && typeof document < "u" ? $(y, document.body) : y;
+  return v && typeof document < "u" ? w(B, document.body) : B;
 }
-S.displayName = "BaseOverlay";
-const Y = {
+A.displayName = "BaseOverlay";
+const Z = {
   bg: "--_bg",
   color: "--_color",
   borderColor: "--_border-color",
@@ -334,17 +371,17 @@ const Y = {
   fontSize: "--_font-size",
   minHeight: "--_min-height",
   placeholderColor: "--_placeholder-color"
-}, K = {}, Z = u.forwardRef(
-  ({ definition: s, className: a, style: e, label: o, helperText: t, required: r, status: l = "default", ...d }, i) => {
-    const { style: c, dataAttrs: g } = p(s, Y, K);
-    l !== "default" && (g["data-status"] = l), d.disabled && (g["data-disabled"] = ""), d.readOnly && (g["data-readonly"] = "");
+}, q = {}, J = p.forwardRef(
+  ({ definition: s, className: a, style: e, label: o, helperText: t, required: l, status: r = "default", ...d }, i) => {
+    const { style: c, dataAttrs: g } = u(s, Z, q);
+    r !== "default" && (g["data-status"] = r), d.disabled && (g["data-disabled"] = ""), d.readOnly && (g["data-readonly"] = "");
     const _ = /* @__PURE__ */ n(
       "input",
       {
         ref: i,
         className: a ? `gloss-base-input ${a}` : "gloss-base-input",
         style: { ...c, ...e },
-        required: r,
+        required: l,
         ...g,
         ...d
       }
@@ -352,15 +389,15 @@ const Y = {
     return !o && !t ? _ : /* @__PURE__ */ b("div", { className: "gloss-base-input__wrapper", children: [
       o && /* @__PURE__ */ b("label", { className: "gloss-base-input__label", children: [
         o,
-        r && /* @__PURE__ */ n("span", { className: "gloss-base-input__required", children: "*" })
+        l && /* @__PURE__ */ n("span", { className: "gloss-base-input__required", children: "*" })
       ] }),
       _,
       t && /* @__PURE__ */ n("div", { className: "gloss-base-input__helper", children: t })
     ] });
   }
 );
-Z.displayName = "BaseInput";
-const q = {
+J.displayName = "BaseInput";
+const Q = {
   bg: "--_bg",
   color: "--_color",
   borderColor: "--_border-color",
@@ -372,19 +409,19 @@ const q = {
   placeholderColor: "--_placeholder-color",
   minRows: "--_min-rows",
   maxRows: "--_max-rows"
-}, J = {
+}, ee = {
   resize: "data-resize"
-}, Q = u.forwardRef(
-  ({ definition: s, className: a, style: e, label: o, helperText: t, required: r, status: l = "default", ...d }, i) => {
-    const { style: c, dataAttrs: g } = p(s, q, J);
-    l !== "default" && (g["data-status"] = l), d.disabled && (g["data-disabled"] = ""), d.readOnly && (g["data-readonly"] = "");
+}, ae = p.forwardRef(
+  ({ definition: s, className: a, style: e, label: o, helperText: t, required: l, status: r = "default", ...d }, i) => {
+    const { style: c, dataAttrs: g } = u(s, Q, ee);
+    r !== "default" && (g["data-status"] = r), d.disabled && (g["data-disabled"] = ""), d.readOnly && (g["data-readonly"] = "");
     const _ = /* @__PURE__ */ n(
       "textarea",
       {
         ref: i,
         className: a ? `gloss-base-textarea ${a}` : "gloss-base-textarea",
         style: { ...c, ...e },
-        required: r,
+        required: l,
         ...g,
         ...d
       }
@@ -392,25 +429,25 @@ const q = {
     return !o && !t ? _ : /* @__PURE__ */ b("div", { className: "gloss-base-textarea__wrapper", children: [
       o && /* @__PURE__ */ b("label", { className: "gloss-base-textarea__label", children: [
         o,
-        r && /* @__PURE__ */ n("span", { className: "gloss-base-textarea__required", children: "*" })
+        l && /* @__PURE__ */ n("span", { className: "gloss-base-textarea__required", children: "*" })
       ] }),
       _,
       t && /* @__PURE__ */ n("div", { className: "gloss-base-textarea__helper", children: t })
     ] });
   }
 );
-Q.displayName = "BaseTextarea";
-const ee = {
+ae.displayName = "BaseTextarea";
+const se = {
   trackBg: "--_track-bg",
   trackBorder: "--_track-border",
   checkColor: "--_check-color",
   trackSize: "--_track-size",
   trackRadius: "--_track-radius"
-}, ae = u.forwardRef(
-  ({ definition: s, className: a, style: e, indeterminate: o, children: t, checked: r, disabled: l, ...d }, i) => {
-    const { style: c, dataAttrs: g } = p(s, ee);
-    l && (g["data-disabled"] = ""), r && (g["data-checked"] = ""), o && (g["data-indeterminate"] = "");
-    const _ = u.useCallback(
+}, oe = p.forwardRef(
+  ({ definition: s, className: a, style: e, indeterminate: o, children: t, checked: l, disabled: r, ...d }, i) => {
+    const { style: c, dataAttrs: g } = u(s, se);
+    r && (g["data-disabled"] = ""), l && (g["data-checked"] = ""), o && (g["data-indeterminate"] = "");
+    const _ = p.useCallback(
       (f) => {
         f && (f.indeterminate = !!o), typeof i == "function" ? i(f) : i && (i.current = f);
       },
@@ -429,8 +466,8 @@ const ee = {
               ref: _,
               type: "checkbox",
               className: "gloss-base-checkbox__input",
-              checked: r,
-              disabled: l,
+              checked: l,
+              disabled: r,
               ...d
             }
           ),
@@ -441,16 +478,16 @@ const ee = {
     );
   }
 );
-ae.displayName = "BaseCheckbox";
-const se = {
+oe.displayName = "BaseCheckbox";
+const te = {
   trackBg: "--_track-bg",
   trackBorder: "--_track-border",
   dotColor: "--_dot-color",
   trackSize: "--_track-size"
-}, oe = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, checked: t, disabled: r, ...l }, d) => {
-    const { style: i, dataAttrs: c } = p(s, se);
-    return r && (c["data-disabled"] = ""), t && (c["data-checked"] = ""), /* @__PURE__ */ b(
+}, re = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, checked: t, disabled: l, ...r }, d) => {
+    const { style: i, dataAttrs: c } = u(s, te);
+    return l && (c["data-disabled"] = ""), t && (c["data-checked"] = ""), /* @__PURE__ */ b(
       "label",
       {
         className: a ? `gloss-base-radio ${a}` : "gloss-base-radio",
@@ -464,8 +501,8 @@ const se = {
               type: "radio",
               className: "gloss-base-radio__input",
               checked: t,
-              disabled: r,
-              ...l
+              disabled: l,
+              ...r
             }
           ),
           /* @__PURE__ */ n("span", { className: "gloss-base-radio__track" }),
@@ -475,18 +512,18 @@ const se = {
     );
   }
 );
-oe.displayName = "BaseRadio";
-const te = {
+re.displayName = "BaseRadio";
+const le = {
   trackBg: "--_track-bg",
   trackBgActive: "--_track-bg-active",
   thumbBg: "--_thumb-bg",
   trackWidth: "--_track-width",
   trackHeight: "--_track-height",
   thumbSize: "--_thumb-size"
-}, re = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, checked: t, disabled: r, ...l }, d) => {
-    const { style: i, dataAttrs: c } = p(s, te);
-    return r && (c["data-disabled"] = ""), t && (c["data-checked"] = ""), /* @__PURE__ */ b(
+}, ie = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, checked: t, disabled: l, ...r }, d) => {
+    const { style: i, dataAttrs: c } = u(s, le);
+    return l && (c["data-disabled"] = ""), t && (c["data-checked"] = ""), /* @__PURE__ */ b(
       "label",
       {
         className: a ? `gloss-base-toggle ${a}` : "gloss-base-toggle",
@@ -501,8 +538,8 @@ const te = {
               role: "switch",
               className: "gloss-base-toggle__input",
               checked: t,
-              disabled: r,
-              ...l
+              disabled: l,
+              ...r
             }
           ),
           /* @__PURE__ */ n("span", { className: "gloss-base-toggle__track", children: /* @__PURE__ */ n("span", { className: "gloss-base-toggle__thumb" }) }),
@@ -512,8 +549,8 @@ const te = {
     );
   }
 );
-re.displayName = "BaseToggle";
-const le = {
+ie.displayName = "BaseToggle";
+const de = {
   bg: "--_bg",
   borderColor: "--_border-color",
   radius: "--_radius",
@@ -521,21 +558,21 @@ const le = {
   minHeight: "--_min-height",
   padding: "--_padding"
 };
-function ie(s) {
-  const { definition: a, className: e, style: o, children: t, ...r } = s, { style: l, dataAttrs: d } = p(a, le);
+function ne(s) {
+  const { definition: a, className: e, style: o, children: t, ...l } = s, { style: r, dataAttrs: d } = u(a, de);
   return /* @__PURE__ */ n(
     "div",
     {
       className: e ? `gloss-base-select ${e}` : "gloss-base-select",
-      style: { ...l, ...o },
+      style: { ...r, ...o },
       ...d,
-      ...r,
+      ...l,
       children: t
     }
   );
 }
-ie.displayName = "BaseSelect";
-const de = u.forwardRef(
+ne.displayName = "BaseSelect";
+const ce = p.forwardRef(
   ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
     "button",
     {
@@ -547,48 +584,48 @@ const de = u.forwardRef(
     }
   )
 );
-de.displayName = "BaseSelectTrigger";
-const ne = {
+ce.displayName = "BaseSelectTrigger";
+const ge = {
   bg: "--_dropdown-bg",
   borderColor: "--_dropdown-border-color",
   radius: "--_dropdown-radius",
   elevation: "--_dropdown-elevation",
   maxHeight: "--_dropdown-max-height"
 };
-function ce(s) {
-  const { definition: a, className: e, style: o, children: t, ...r } = s, { style: l } = p(a, ne);
+function _e(s) {
+  const { definition: a, className: e, style: o, children: t, ...l } = s, { style: r } = u(a, ge);
   return /* @__PURE__ */ n(
     "div",
     {
       className: e ? `gloss-base-select__dropdown ${e}` : "gloss-base-select__dropdown",
-      style: { ...l, ...o },
+      style: { ...r, ...o },
       role: "listbox",
-      ...r,
+      ...l,
       children: t
     }
   );
 }
-ce.displayName = "BaseSelectDropdown";
-const ge = u.forwardRef(
-  ({ className: s, children: a, selected: e, disabled: o, ...t }, r) => {
-    const l = {};
-    return e && (l["data-selected"] = ""), o && (l["data-disabled"] = ""), /* @__PURE__ */ n(
+_e.displayName = "BaseSelectDropdown";
+const pe = p.forwardRef(
+  ({ className: s, children: a, selected: e, disabled: o, ...t }, l) => {
+    const r = {};
+    return e && (r["data-selected"] = ""), o && (r["data-disabled"] = ""), /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         role: "option",
         "aria-selected": e,
         "aria-disabled": o,
         className: s ? `gloss-base-select__option ${s}` : "gloss-base-select__option",
-        ...l,
+        ...r,
         ...t,
         children: a
       }
     );
   }
 );
-ge.displayName = "BaseSelectOption";
-function _e({ label: s, className: a, children: e, ...o }) {
+pe.displayName = "BaseSelectOption";
+function ue({ label: s, className: a, children: e, ...o }) {
   return /* @__PURE__ */ b(
     "div",
     {
@@ -603,8 +640,8 @@ function _e({ label: s, className: a, children: e, ...o }) {
     }
   );
 }
-_e.displayName = "BaseSelectGroup";
-const pe = {
+ue.displayName = "BaseSelectGroup";
+const be = {
   trackBg: "--_track-bg",
   trackActiveBg: "--_track-active-bg",
   thumbBg: "--_thumb-bg",
@@ -612,44 +649,44 @@ const pe = {
   thumbSize: "--_thumb-size",
   trackHeight: "--_track-height",
   thumbShadow: "--_thumb-shadow"
-}, ue = {};
-function be({
+}, fe = {};
+function me({
   definition: s,
   className: a,
   style: e,
   orientation: o = "horizontal",
   disabled: t,
-  children: r,
-  ...l
+  children: l,
+  ...r
 }) {
-  const { style: d, dataAttrs: i } = p(s, pe, ue);
+  const { style: d, dataAttrs: i } = u(s, be, fe);
   return o !== "horizontal" && (i["data-orientation"] = o), t && (i["data-disabled"] = ""), /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-slider ${a}` : "gloss-base-slider",
       style: { ...d, ...e },
       ...i,
-      ...l,
-      children: r
+      ...r,
+      children: l
     }
   );
 }
-be.displayName = "BaseSlider";
-const fe = {
+me.displayName = "BaseSlider";
+const ye = {
   bg: "--_bg",
   border: "--_border",
   radius: "--_radius",
   elevation: "--_elevation",
   padding: "--_padding"
-}, me = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, ...t }, r) => {
-    const { style: l, dataAttrs: d } = p(s, fe);
+}, ve = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, ...t }, l) => {
+    const { style: r, dataAttrs: d } = u(s, ye);
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         className: a ? `gloss-base-card ${a}` : "gloss-base-card",
-        style: { ...l, ...e },
+        style: { ...r, ...e },
         ...d,
         ...t,
         children: o
@@ -657,57 +694,57 @@ const fe = {
     );
   }
 );
-me.displayName = "BaseCard";
-const ye = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, ...t }, r) => {
-    const l = { ...e };
-    return s?.padding && (l["--_header-padding"] = s.padding), /* @__PURE__ */ n(
+ve.displayName = "BaseCard";
+const he = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, ...t }, l) => {
+    const r = { ...e };
+    return s?.padding && (r["--_header-padding"] = s.padding), /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         className: a ? `gloss-base-card__header ${a}` : "gloss-base-card__header",
-        style: l,
+        style: r,
         ...t,
         children: o
       }
     );
   }
 );
-ye.displayName = "BaseCardHeader";
-const ve = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, ...t }, r) => {
-    const l = { ...e };
-    return s?.padding && (l["--_body-padding"] = s.padding), /* @__PURE__ */ n(
+he.displayName = "BaseCardHeader";
+const Be = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, ...t }, l) => {
+    const r = { ...e };
+    return s?.padding && (r["--_body-padding"] = s.padding), /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         className: a ? `gloss-base-card__body ${a}` : "gloss-base-card__body",
-        style: l,
+        style: r,
         ...t,
         children: o
       }
     );
   }
 );
-ve.displayName = "BaseCardBody";
-const he = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, ...t }, r) => {
-    const l = { ...e };
-    return s?.padding && (l["--_footer-padding"] = s.padding), /* @__PURE__ */ n(
+Be.displayName = "BaseCardBody";
+const Se = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, ...t }, l) => {
+    const r = { ...e };
+    return s?.padding && (r["--_footer-padding"] = s.padding), /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         className: a ? `gloss-base-card__footer ${a}` : "gloss-base-card__footer",
-        style: l,
+        style: r,
         ...t,
         children: o
       }
     );
   }
 );
-he.displayName = "BaseCardFooter";
-const Be = u.forwardRef(
-  ({ src: s, alt: a, height: e, className: o, style: t, children: r, ...l }, d) => {
+Se.displayName = "BaseCardFooter";
+const Ae = p.forwardRef(
+  ({ src: s, alt: a, height: e, className: o, style: t, children: l, ...r }, d) => {
     const i = { ...t };
     return e && (i.height = e), /* @__PURE__ */ n(
       "div",
@@ -715,14 +752,14 @@ const Be = u.forwardRef(
         ref: d,
         className: o ? `gloss-base-card__media ${o}` : "gloss-base-card__media",
         style: i,
-        ...l,
-        children: s ? /* @__PURE__ */ n("img", { src: s, alt: a || "" }) : r
+        ...r,
+        children: s ? /* @__PURE__ */ n("img", { src: s, alt: a || "" }) : l
       }
     );
   }
 );
-Be.displayName = "BaseCardMedia";
-const Se = u.forwardRef(
+Ae.displayName = "BaseCardMedia";
+const ke = p.forwardRef(
   ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
     "h3",
     {
@@ -733,8 +770,8 @@ const Se = u.forwardRef(
     }
   )
 );
-Se.displayName = "BaseCardTitle";
-const Ae = u.forwardRef(
+ke.displayName = "BaseCardTitle";
+const Ne = p.forwardRef(
   ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
     "p",
     {
@@ -745,8 +782,8 @@ const Ae = u.forwardRef(
     }
   )
 );
-Ae.displayName = "BaseCardSubtitle";
-const ke = u.forwardRef(
+Ne.displayName = "BaseCardSubtitle";
+const Ce = p.forwardRef(
   ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
     "div",
     {
@@ -757,20 +794,20 @@ const ke = u.forwardRef(
     }
   )
 );
-ke.displayName = "BaseCardActions";
-const Ne = {
+Ce.displayName = "BaseCardActions";
+const xe = {
   borderColor: "--_border-color",
   radius: "--_radius",
   gap: "--_gap"
-}, Ce = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, ...t }, r) => {
-    const { style: l, dataAttrs: d } = p(s, Ne);
+}, $e = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, ...t }, l) => {
+    const { style: r, dataAttrs: d } = u(s, xe);
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         className: a ? `gloss-base-accordion ${a}` : "gloss-base-accordion",
-        style: { ...l, ...e },
+        style: { ...r, ...e },
         ...d,
         ...t,
         children: o
@@ -778,25 +815,25 @@ const Ne = {
     );
   }
 );
-Ce.displayName = "BaseAccordion";
-const $e = u.forwardRef(
-  ({ className: s, style: a, children: e, open: o, ...t }, r) => {
-    const l = {};
-    return o && (l["data-open"] = ""), /* @__PURE__ */ n(
+$e.displayName = "BaseAccordion";
+const we = p.forwardRef(
+  ({ className: s, style: a, children: e, open: o, ...t }, l) => {
+    const r = {};
+    return o && (r["data-open"] = ""), /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         className: s ? `gloss-base-accordion__item ${s}` : "gloss-base-accordion__item",
         style: a,
-        ...l,
+        ...r,
         ...t,
         children: e
       }
     );
   }
 );
-$e.displayName = "BaseAccordionItem";
-const we = u.forwardRef(
+we.displayName = "BaseAccordionItem";
+const Re = p.forwardRef(
   ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
     "button",
     {
@@ -808,8 +845,8 @@ const we = u.forwardRef(
     }
   )
 );
-we.displayName = "BaseAccordionTrigger";
-const Pe = u.forwardRef(
+Re.displayName = "BaseAccordionTrigger";
+const Pe = p.forwardRef(
   ({ className: s, style: a, children: e, ...o }, t) => /* @__PURE__ */ n(
     "div",
     {
@@ -822,23 +859,23 @@ const Pe = u.forwardRef(
   )
 );
 Pe.displayName = "BaseAccordionContent";
-const Re = {
+const ze = {
   bg: "--_bg",
   borderColor: "--_border-color",
   radius: "--_radius",
   elevation: "--_elevation",
   padding: "--_padding",
   minWidth: "--_min-width"
-}, xe = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, ...t }, r) => {
-    const { style: l, dataAttrs: d } = p(s, Re);
+}, Te = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, ...t }, l) => {
+    const { style: r, dataAttrs: d } = u(s, ze);
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: r,
+        ref: l,
         role: "menu",
         className: a ? `gloss-base-menu ${a}` : "gloss-base-menu",
-        style: { ...l, ...e },
+        style: { ...r, ...e },
         ...d,
         ...t,
         children: o
@@ -846,8 +883,8 @@ const Re = {
     );
   }
 );
-xe.displayName = "BaseMenu";
-function ze({ label: s, className: a, style: e, children: o, ...t }) {
+Te.displayName = "BaseMenu";
+function Me({ label: s, className: a, style: e, children: o, ...t }) {
   return /* @__PURE__ */ b(
     "div",
     {
@@ -863,23 +900,23 @@ function ze({ label: s, className: a, style: e, children: o, ...t }) {
     }
   );
 }
-ze.displayName = "BaseMenuGroup";
-const Me = {
+Me.displayName = "BaseMenuGroup";
+const De = {
   padding: "--_item-padding",
   fontSize: "--_item-font-size",
   color: "--_item-color",
   hoverBg: "--_item-hover-bg"
-}, Te = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, disabled: t, active: r, as: l = "div", ...d }, i) => {
-    const { style: c, dataAttrs: g } = p(s, Me);
-    return t && (g["data-disabled"] = ""), r && (g["data-active"] = ""), /* @__PURE__ */ n(
-      l,
+}, Ie = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, disabled: t, active: l, as: r = "div", ...d }, i) => {
+    const { style: c, dataAttrs: g } = u(s, De);
+    return t && (g["data-disabled"] = ""), l && (g["data-active"] = ""), /* @__PURE__ */ n(
+      r,
       {
         ref: i,
         role: "menuitem",
         tabIndex: t ? -1 : 0,
         "aria-disabled": t || void 0,
-        "aria-current": r ? "page" : void 0,
+        "aria-current": l ? "page" : void 0,
         className: a ? `gloss-base-menu__item ${a}` : "gloss-base-menu__item",
         style: { ...c, ...e },
         ...g,
@@ -889,8 +926,8 @@ const Me = {
     );
   }
 );
-Te.displayName = "BaseMenuItem";
-function De({ className: s }) {
+Ie.displayName = "BaseMenuItem";
+function Ve({ className: s }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -899,8 +936,8 @@ function De({ className: s }) {
     }
   );
 }
-De.displayName = "BaseMenuDivider";
-const Ie = {
+Ve.displayName = "BaseMenuDivider";
+const Ee = {
   bg: "--_bg",
   color: "--_color",
   radius: "--_radius",
@@ -908,18 +945,18 @@ const Ie = {
   fontSize: "--_font-size",
   maxWidth: "--_max-width",
   arrowSize: "--_arrow-size"
-}, Ve = {}, Oe = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, placement: t = "top", ...r }, l) => {
-    const { style: d, dataAttrs: i } = p(s, Ie, Ve);
+}, Oe = {}, He = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, placement: t = "top", ...l }, r) => {
+    const { style: d, dataAttrs: i } = u(s, Ee, Oe);
     return i["data-placement"] = t, /* @__PURE__ */ b(
       "div",
       {
-        ref: l,
+        ref: r,
         role: "tooltip",
         className: a ? `gloss-base-tooltip ${a}` : "gloss-base-tooltip",
         style: { ...d, ...e },
         ...i,
-        ...r,
+        ...l,
         children: [
           /* @__PURE__ */ n("div", { className: "gloss-base-tooltip__content", children: o }),
           /* @__PURE__ */ n("div", { className: "gloss-base-tooltip__arrow" })
@@ -928,17 +965,17 @@ const Ie = {
     );
   }
 );
-Oe.displayName = "BaseTooltip";
-const He = {
+He.displayName = "BaseTooltip";
+const Fe = {
   activeColor: "--_active-color",
   inactiveColor: "--_inactive-color",
   hoverColor: "--_hover-color",
   starSize: "--_star-size",
   gap: "--_gap"
-}, Ee = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, readOnly: t, disabled: r, ...l }, d) => {
-    const { style: i, dataAttrs: c } = p(s, He);
-    return t && (c["data-readonly"] = ""), r && (c["data-disabled"] = ""), /* @__PURE__ */ n(
+}, Ge = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, readOnly: t, disabled: l, ...r }, d) => {
+    const { style: i, dataAttrs: c } = u(s, Fe);
+    return t && (c["data-readonly"] = ""), l && (c["data-disabled"] = ""), /* @__PURE__ */ n(
       "div",
       {
         ref: d,
@@ -946,38 +983,38 @@ const He = {
         className: a ? `gloss-base-rating ${a}` : "gloss-base-rating",
         style: { ...i, ...e },
         ...c,
-        ...l,
+        ...r,
         children: o
       }
     );
   }
 );
-Ee.displayName = "BaseRating";
-const Ge = {
+Ge.displayName = "BaseRating";
+const Le = {
   bg: "--_bg",
   activeBg: "--_active-bg",
   borderColor: "--_border-color",
   radius: "--_radius",
   padding: "--_padding",
   fontSize: "--_font-size"
-}, Fe = u.forwardRef(
-  ({ definition: s, className: a, style: e, children: o, disabled: t, ...r }, l) => {
-    const { style: d, dataAttrs: i } = p(s, Ge);
+}, We = p.forwardRef(
+  ({ definition: s, className: a, style: e, children: o, disabled: t, ...l }, r) => {
+    const { style: d, dataAttrs: i } = u(s, Le);
     return t && (i["data-disabled"] = ""), /* @__PURE__ */ n(
       "div",
       {
-        ref: l,
+        ref: r,
         role: "radiogroup",
         className: a ? `gloss-base-segmented-control ${a}` : "gloss-base-segmented-control",
         style: { ...d, ...e },
         ...i,
-        ...r,
+        ...l,
         children: o
       }
     );
   }
 );
-Fe.displayName = "BaseSegmentedControl";
+We.displayName = "BaseSegmentedControl";
 const Xe = {
   bg: "--_bg",
   borderColor: "--_border-color",
@@ -986,13 +1023,13 @@ const Xe = {
   padding: "--_padding"
 };
 function je({ definition: s, className: a, style: e, children: o, ...t }) {
-  const { style: r, dataAttrs: l } = p(s, Xe);
+  const { style: l, dataAttrs: r } = u(s, Xe);
   return /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-datepicker ${a}` : "gloss-base-datepicker",
-      style: { ...r, ...e },
-      ...l,
+      style: { ...l, ...e },
+      ...r,
       ...t,
       children: o
     }
@@ -1011,7 +1048,7 @@ function Ue({ className: s, style: a, children: e, ...o }) {
   );
 }
 Ue.displayName = "BaseDatePickerHeader";
-function We({ className: s, style: a, children: e, ...o }) {
+function Ye({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1023,40 +1060,40 @@ function We({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-We.displayName = "BaseDatePickerCalendar";
-const Le = {
+Ye.displayName = "BaseDatePickerCalendar";
+const Ke = {
   bg: "--_day-bg",
   color: "--_day-color",
   radius: "--_day-radius",
   size: "--_day-size"
 };
-function Ye({
+function Ze({
   definition: s,
   className: a,
   style: e,
   selected: o,
   today: t,
-  outsideMonth: r,
-  disabled: l,
+  outsideMonth: l,
+  disabled: r,
   children: d,
   ...i
 }) {
-  const { style: c, dataAttrs: g } = p(s, Le);
-  return o && (g["data-selected"] = ""), t && (g["data-today"] = ""), l && (g["data-disabled"] = ""), r && (g["data-outside-month"] = ""), /* @__PURE__ */ n(
+  const { style: c, dataAttrs: g } = u(s, Ke);
+  return o && (g["data-selected"] = ""), t && (g["data-today"] = ""), r && (g["data-disabled"] = ""), l && (g["data-outside-month"] = ""), /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       className: a ? `gloss-base-datepicker__day ${a}` : "gloss-base-datepicker__day",
       style: { ...c, ...e },
-      disabled: l,
+      disabled: r,
       ...g,
       ...i,
       children: d
     }
   );
 }
-Ye.displayName = "BaseDatePickerDay";
-const Ke = {
+Ze.displayName = "BaseDatePickerDay";
+const qe = {
   bg: "--_bg",
   borderColor: "--_border-color",
   radius: "--_radius",
@@ -1064,21 +1101,21 @@ const Ke = {
   padding: "--_padding",
   cellHeight: "--_cell-height"
 };
-function Ze({ definition: s, className: a, style: e, children: o, ...t }) {
-  const { style: r, dataAttrs: l } = p(s, Ke);
+function Je({ definition: s, className: a, style: e, children: o, ...t }) {
+  const { style: l, dataAttrs: r } = u(s, qe);
   return /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-timepicker ${a}` : "gloss-base-timepicker",
-      style: { ...r, ...e },
-      ...l,
+      style: { ...l, ...e },
+      ...r,
       ...t,
       children: o
     }
   );
 }
-Ze.displayName = "BaseTimePicker";
-function qe({ className: s, style: a, children: e, ...o }) {
+Je.displayName = "BaseTimePicker";
+function Qe({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1090,8 +1127,8 @@ function qe({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-qe.displayName = "BaseTimePickerColumn";
-function Je({ className: s, style: a, selected: e, disabled: o, children: t, ...r }) {
+Qe.displayName = "BaseTimePickerColumn";
+function ea({ className: s, style: a, selected: e, disabled: o, children: t, ...l }) {
   return /* @__PURE__ */ n(
     "button",
     {
@@ -1103,48 +1140,48 @@ function Je({ className: s, style: a, selected: e, disabled: o, children: t, ...
       disabled: o,
       "data-selected": e ? "" : void 0,
       "data-disabled": o ? "" : void 0,
-      ...r,
+      ...l,
       children: t
     }
   );
 }
-Je.displayName = "BaseTimePickerCell";
-const Qe = {
+ea.displayName = "BaseTimePickerCell";
+const aa = {
   bg: "--_bg",
   borderColor: "--_border-color",
   radius: "--_radius",
   elevation: "--_elevation",
   gap: "--_gap"
 };
-function ea({ definition: s, className: a, style: e, children: o, ...t }) {
-  const { style: r, dataAttrs: l } = p(s, Qe);
+function sa({ definition: s, className: a, style: e, children: o, ...t }) {
+  const { style: l, dataAttrs: r } = u(s, aa);
   return /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-daterangepicker ${a}` : "gloss-base-daterangepicker",
-      style: { ...r, ...e },
-      ...l,
+      style: { ...l, ...e },
+      ...r,
       ...t,
       children: o
     }
   );
 }
-ea.displayName = "BaseDateRangePicker";
-function aa({
+sa.displayName = "BaseDateRangePicker";
+function oa({
   className: s,
   style: a,
   selected: e,
   today: o,
   outsideMonth: t,
-  rangeStart: r,
-  rangeEnd: l,
+  rangeStart: l,
+  rangeEnd: r,
   inRange: d,
   disabled: i,
   children: c,
   ...g
 }) {
   const _ = {};
-  return e && (_["data-selected"] = ""), o && (_["data-today"] = ""), t && (_["data-outside-month"] = ""), i && (_["data-disabled"] = ""), r && (_["data-range-start"] = ""), l && (_["data-range-end"] = ""), d && (_["data-in-range"] = ""), /* @__PURE__ */ n(
+  return e && (_["data-selected"] = ""), o && (_["data-today"] = ""), t && (_["data-outside-month"] = ""), i && (_["data-disabled"] = ""), l && (_["data-range-start"] = ""), r && (_["data-range-end"] = ""), d && (_["data-in-range"] = ""), /* @__PURE__ */ n(
     "button",
     {
       type: "button",
@@ -1157,8 +1194,8 @@ function aa({
     }
   );
 }
-aa.displayName = "BaseDateRangePickerDay";
-const sa = {
+oa.displayName = "BaseDateRangePickerDay";
+const ta = {
   bg: "--_bg",
   color: "--_color",
   borderColor: "--_border-color",
@@ -1168,21 +1205,21 @@ const sa = {
   buttonBg: "--_button-bg",
   minHeight: "--_min-height"
 };
-function oa({ definition: s, className: a, style: e, disabled: o, children: t, ...r }) {
-  const { style: l, dataAttrs: d } = p(s, sa);
+function ra({ definition: s, className: a, style: e, disabled: o, children: t, ...l }) {
+  const { style: r, dataAttrs: d } = u(s, ta);
   return o && (d["data-disabled"] = ""), /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-numberinput ${a}` : "gloss-base-numberinput",
-      style: { ...l, ...e },
+      style: { ...r, ...e },
       ...d,
-      ...r,
+      ...l,
       children: t
     }
   );
 }
-oa.displayName = "BaseNumberInput";
-const ta = {
+ra.displayName = "BaseNumberInput";
+const la = {
   bg: "--_bg",
   color: "--_color",
   borderColor: "--_border-color",
@@ -1193,17 +1230,17 @@ const ta = {
   minHeight: "--_min-height",
   placeholderColor: "--_placeholder-color",
   placeholderCharColor: "--_placeholder-char-color"
-}, ra = u.forwardRef(
-  ({ definition: s, className: a, style: e, label: o, helperText: t, required: r, status: l = "default", ...d }, i) => {
-    const { style: c, dataAttrs: g } = p(s, ta);
-    l !== "default" && (g["data-status"] = l), d.disabled && (g["data-disabled"] = ""), d.readOnly && (g["data-readonly"] = "");
+}, ia = p.forwardRef(
+  ({ definition: s, className: a, style: e, label: o, helperText: t, required: l, status: r = "default", ...d }, i) => {
+    const { style: c, dataAttrs: g } = u(s, la);
+    r !== "default" && (g["data-status"] = r), d.disabled && (g["data-disabled"] = ""), d.readOnly && (g["data-readonly"] = "");
     const _ = /* @__PURE__ */ n(
       "input",
       {
         ref: i,
         className: a ? `gloss-base-maskedinput ${a}` : "gloss-base-maskedinput",
         style: { ...c, ...e },
-        required: r,
+        required: l,
         ...g,
         ...d
       }
@@ -1211,15 +1248,15 @@ const ta = {
     return !o && !t ? _ : /* @__PURE__ */ b("div", { className: "gloss-base-maskedinput__wrapper", children: [
       o && /* @__PURE__ */ b("label", { className: "gloss-base-maskedinput__label", children: [
         o,
-        r && /* @__PURE__ */ n("span", { className: "gloss-base-maskedinput__required", children: "*" })
+        l && /* @__PURE__ */ n("span", { className: "gloss-base-maskedinput__required", children: "*" })
       ] }),
       _,
       t && /* @__PURE__ */ n("div", { className: "gloss-base-maskedinput__helper", children: t })
     ] });
   }
 );
-ra.displayName = "BaseMaskedInput";
-const la = {
+ia.displayName = "BaseMaskedInput";
+const da = {
   bg: "--_bg",
   borderColor: "--_border-color",
   borderStyle: "--_border-style",
@@ -1227,21 +1264,21 @@ const la = {
   padding: "--_padding",
   minHeight: "--_min-height"
 };
-function ia({ definition: s, className: a, style: e, dragging: o, disabled: t, children: r, ...l }) {
-  const { style: d, dataAttrs: i } = p(s, la);
+function na({ definition: s, className: a, style: e, dragging: o, disabled: t, children: l, ...r }) {
+  const { style: d, dataAttrs: i } = u(s, da);
   return o && (i["data-dragging"] = ""), t && (i["data-disabled"] = ""), /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-fileupload ${a}` : "gloss-base-fileupload",
       style: { ...d, ...e },
       ...i,
-      ...l,
-      children: r
+      ...r,
+      children: l
     }
   );
 }
-ia.displayName = "BaseFileUpload";
-function da({ className: s, style: a, children: e, ...o }) {
+na.displayName = "BaseFileUpload";
+function ca({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1252,8 +1289,8 @@ function da({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-da.displayName = "BaseFileUploadList";
-function na({ className: s, style: a, error: e, children: o, ...t }) {
+ca.displayName = "BaseFileUploadList";
+function ga({ className: s, style: a, error: e, children: o, ...t }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1265,28 +1302,28 @@ function na({ className: s, style: a, error: e, children: o, ...t }) {
     }
   );
 }
-na.displayName = "BaseFileUploadItem";
-const ca = {
+ga.displayName = "BaseFileUploadItem";
+const _a = {
   radius: "--_radius",
   elevation: "--_elevation",
   padding: "--_padding",
   swatchSize: "--_swatch-size"
 };
-function ga({ definition: s, className: a, style: e, disabled: o, children: t, ...r }) {
-  const { style: l, dataAttrs: d } = p(s, ca);
+function pa({ definition: s, className: a, style: e, disabled: o, children: t, ...l }) {
+  const { style: r, dataAttrs: d } = u(s, _a);
   return o && (d["data-disabled"] = ""), /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-colorpicker ${a}` : "gloss-base-colorpicker",
-      style: { ...l, ...e },
+      style: { ...r, ...e },
       ...d,
-      ...r,
+      ...l,
       children: t
     }
   );
 }
-ga.displayName = "BaseColorPicker";
-function _a({ className: s, style: a, children: e, ...o }) {
+pa.displayName = "BaseColorPicker";
+function ua({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1297,8 +1334,8 @@ function _a({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-_a.displayName = "BaseColorPickerSaturation";
-function pa({ className: s, style: a, children: e, ...o }) {
+ua.displayName = "BaseColorPickerSaturation";
+function ba({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1309,8 +1346,8 @@ function pa({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-pa.displayName = "BaseColorPickerHue";
-function ua({ className: s, style: a, children: e, ...o }) {
+ba.displayName = "BaseColorPickerHue";
+function fa({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1321,8 +1358,8 @@ function ua({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-ua.displayName = "BaseColorPickerAlpha";
-function ba({ className: s, style: a, children: e, ...o }) {
+fa.displayName = "BaseColorPickerAlpha";
+function ma({ className: s, style: a, children: e, ...o }) {
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1333,8 +1370,8 @@ function ba({ className: s, style: a, children: e, ...o }) {
     }
   );
 }
-ba.displayName = "BaseColorPickerSwatch";
-const fa = {
+ma.displayName = "BaseColorPickerSwatch";
+const ya = {
   trackBg: "--_track-bg",
   trackActiveBg: "--_track-active-bg",
   thumbBg: "--_thumb-bg",
@@ -1343,30 +1380,30 @@ const fa = {
   trackHeight: "--_track-height",
   thumbShadow: "--_thumb-shadow"
 };
-function ma({
+function va({
   definition: s,
   className: a,
   style: e,
   orientation: o = "horizontal",
   disabled: t,
-  collision: r,
-  children: l,
+  collision: l,
+  children: r,
   ...d
 }) {
-  const { style: i, dataAttrs: c } = p(s, fa);
-  return o !== "horizontal" && (c["data-orientation"] = o), t && (c["data-disabled"] = ""), r && (c["data-collision"] = ""), /* @__PURE__ */ n(
+  const { style: i, dataAttrs: c } = u(s, ya);
+  return o !== "horizontal" && (c["data-orientation"] = o), t && (c["data-disabled"] = ""), l && (c["data-collision"] = ""), /* @__PURE__ */ n(
     "div",
     {
       className: a ? `gloss-base-rangeslider ${a}` : "gloss-base-rangeslider",
       style: { ...i, ...e },
       ...c,
       ...d,
-      children: l
+      children: r
     }
   );
 }
-ma.displayName = "BaseRangeSlider";
-const ya = function(a) {
+va.displayName = "BaseRangeSlider";
+const ha = function(a) {
   const { as: e, className: o, ...t } = a;
   return /* @__PURE__ */ n(
     h,
@@ -1377,15 +1414,34 @@ const ya = function(a) {
     }
   );
 };
-ya.displayName = "BaseText";
-function va({
+ha.displayName = "BaseText";
+const Ba = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+}, Sa = function(a) {
+  const { as: e, level: o = 2, className: t, ...l } = a, r = e || Ba[o];
+  return /* @__PURE__ */ n(
+    h,
+    {
+      as: r,
+      className: t ? `gloss-base-title ${t}` : "gloss-base-title",
+      ...l
+    }
+  );
+};
+Sa.displayName = "BaseTitle";
+function Aa({
   definition: s,
   open: a,
   onDismiss: e,
   anchorRef: o,
   className: t,
-  style: r,
-  children: l
+  style: l,
+  children: r
 }) {
   const d = {
     placement: s?.placement ?? "bottom",
@@ -1399,9 +1455,9 @@ function va({
     radius: s?.radius,
     padding: s?.padding,
     zIndex: s?.zIndex
-  }, i = s?.arrowSize ?? 8, c = { ...r };
+  }, i = s?.arrowSize ?? 8, c = { ...l };
   return s?.showArrow && (c["--_arrow-size"] = `${i}px`), /* @__PURE__ */ n(
-    S,
+    A,
     {
       definition: d,
       open: a,
@@ -1413,7 +1469,7 @@ function va({
           className: t ? `gloss-base-popover ${t}` : "gloss-base-popover",
           style: c,
           children: [
-            l,
+            r,
             s?.showArrow && /* @__PURE__ */ n("div", { className: "gloss-base-popover__arrow" })
           ]
         }
@@ -1421,21 +1477,21 @@ function va({
     }
   );
 }
-va.displayName = "BasePopover";
-const ha = {
+Aa.displayName = "BasePopover";
+const ka = {
   size: "--_size",
   bg: "--_bg",
   color: "--_color",
   fontSize: "--_font-size",
   radius: "--_radius"
 };
-function Ba(s) {
-  const { definition: a, src: e, alt: o, className: t, style: r, children: l, ...d } = s, [i, c] = k(!1), { style: g, dataAttrs: _ } = p(a, ha), f = e && !i;
+function Na(s) {
+  const { definition: a, src: e, alt: o, className: t, style: l, children: r, ...d } = s, [i, c] = C(!1), { style: g, dataAttrs: _ } = u(a, ka), f = e && !i;
   return /* @__PURE__ */ n(
     "div",
     {
       className: t ? `gloss-base-avatar ${t}` : "gloss-base-avatar",
-      style: { ...g, ...r },
+      style: { ...g, ...l },
       ..._,
       ...d,
       children: f ? /* @__PURE__ */ n(
@@ -1445,19 +1501,19 @@ function Ba(s) {
           alt: o || "",
           onError: () => c(!0)
         }
-      ) : l
+      ) : r
     }
   );
 }
-Ba.displayName = "BaseAvatar";
-const Sa = {
+Na.displayName = "BaseAvatar";
+const Ca = {
   trackBg: "--_track-bg",
   fillBg: "--_fill-bg",
   height: "--_height",
   radius: "--_radius"
 };
-function Aa(s) {
-  const { definition: a, value: e, max: o = 100, indeterminate: t = !1, className: r, style: l, ...d } = s, { style: i, dataAttrs: c } = p(a, Sa);
+function xa(s) {
+  const { definition: a, value: e, max: o = 100, indeterminate: t = !1, className: l, style: r, ...d } = s, { style: i, dataAttrs: c } = u(a, Ca);
   t && (c["data-indeterminate"] = "");
   const g = t ? void 0 : `${Math.min(100, (e || 0) / (o || 100) * 100)}%`;
   return /* @__PURE__ */ n(
@@ -1467,8 +1523,8 @@ function Aa(s) {
       "aria-valuenow": t ? void 0 : e || 0,
       "aria-valuemin": 0,
       "aria-valuemax": o,
-      className: r ? `gloss-base-progress-bar ${r}` : "gloss-base-progress-bar",
-      style: { ...i, ...l },
+      className: l ? `gloss-base-progress-bar ${l}` : "gloss-base-progress-bar",
+      style: { ...i, ...r },
       ...c,
       ...d,
       children: /* @__PURE__ */ n(
@@ -1481,8 +1537,8 @@ function Aa(s) {
     }
   );
 }
-Aa.displayName = "BaseProgressBar";
-const ka = {
+xa.displayName = "BaseProgressBar";
+const $a = {
   bg: "--_bg",
   color: "--_color",
   padding: "--_padding",
@@ -1491,21 +1547,21 @@ const ka = {
   fontSize: "--_font-size",
   fontWeight: "--_font-weight"
 };
-function Na(s) {
-  const { as: a, definition: e, className: o, style: t, dot: r, children: l, ...d } = s, i = a || "span", { style: c, dataAttrs: g } = p(e, ka);
-  return r && (g["data-dot"] = ""), /* @__PURE__ */ n(
+function wa(s) {
+  const { as: a, definition: e, className: o, style: t, dot: l, children: r, ...d } = s, i = a || "span", { style: c, dataAttrs: g } = u(e, $a);
+  return l && (g["data-dot"] = ""), /* @__PURE__ */ n(
     i,
     {
       className: o ? `gloss-base-badge ${o}` : "gloss-base-badge",
       style: { ...c, ...t },
       ...g,
       ...d,
-      children: !r && l
+      children: !l && r
     }
   );
 }
-Na.displayName = "BaseBadge";
-const Ca = {
+wa.displayName = "BaseBadge";
+const Ra = {
   bg: "--_bg",
   color: "--_color",
   borderColor: "--_border-color",
@@ -1516,27 +1572,27 @@ const Ca = {
   fontWeight: "--_font-weight",
   gap: "--_gap"
 };
-function $a(s) {
+function Pa(s) {
   const {
     as: a,
     definition: e,
     className: o,
     style: t,
-    disabled: r,
-    clickable: l,
+    disabled: l,
+    clickable: r,
     selected: d,
     avatar: i,
     leftIcon: c,
     deleteButton: g,
     children: _,
     ...f
-  } = s, v = a || "span", { style: y, dataAttrs: m } = p(e, Ca);
-  return r && (m["data-disabled"] = ""), l && (m["data-clickable"] = ""), d && (m["data-selected"] = ""), /* @__PURE__ */ b(
-    v,
+  } = s, m = a || "span", { style: v, dataAttrs: y } = u(e, Ra);
+  return l && (y["data-disabled"] = ""), r && (y["data-clickable"] = ""), d && (y["data-selected"] = ""), /* @__PURE__ */ b(
+    m,
     {
       className: o ? `gloss-base-chip ${o}` : "gloss-base-chip",
-      style: { ...y, ...t },
-      ...m,
+      style: { ...v, ...t },
+      ...y,
       ...f,
       children: [
         i && /* @__PURE__ */ n("span", { className: "gloss-base-chip__avatar", children: i }),
@@ -1547,18 +1603,18 @@ function $a(s) {
     }
   );
 }
-$a.displayName = "BaseChip";
-const wa = {
+Pa.displayName = "BaseChip";
+const za = {
   color: "--_color",
   fontSize: "--_font-size",
   fontWeight: "--_font-weight",
   gap: "--_gap"
-}, Pa = {
+}, Ta = {
   underline: "data-underline"
 };
-function Ra(s) {
-  const { as: a, definition: e, className: o, style: t, disabled: r, leftIcon: l, rightIcon: d, children: i, ...c } = s, g = a || "a", { style: _, dataAttrs: f } = p(e, wa, Pa);
-  return r && (f["data-disabled"] = ""), /* @__PURE__ */ b(
+function Ma(s) {
+  const { as: a, definition: e, className: o, style: t, disabled: l, leftIcon: r, rightIcon: d, children: i, ...c } = s, g = a || "a", { style: _, dataAttrs: f } = u(e, za, Ta);
+  return l && (f["data-disabled"] = ""), /* @__PURE__ */ b(
     g,
     {
       className: o ? `gloss-base-link ${o}` : "gloss-base-link",
@@ -1566,24 +1622,24 @@ function Ra(s) {
       ...f,
       ...c,
       children: [
-        l && /* @__PURE__ */ n("span", { className: "gloss-base-link__icon gloss-base-link__icon--left", children: l }),
+        r && /* @__PURE__ */ n("span", { className: "gloss-base-link__icon gloss-base-link__icon--left", children: r }),
         /* @__PURE__ */ n("span", { className: "gloss-base-link__text", children: i }),
         d && /* @__PURE__ */ n("span", { className: "gloss-base-link__icon gloss-base-link__icon--right", children: d })
       ]
     }
   );
 }
-Ra.displayName = "BaseLink";
-const xa = { region: null, density: "default" }, A = N(xa);
-function Xa() {
-  return C(A);
+Ma.displayName = "BaseLink";
+const Da = { region: null, density: "default" }, k = x(Da);
+function Ya() {
+  return $(k);
 }
-function za({ region: s, density: a = "default", children: e }) {
+function Ia({ region: s, density: a = "default", children: e }) {
   const o = { region: s, density: a };
-  return u.createElement(
-    A.Provider,
+  return p.createElement(
+    k.Provider,
     { value: o },
-    u.createElement(
+    p.createElement(
       "div",
       {
         "data-region": s,
@@ -1594,80 +1650,82 @@ function za({ region: s, density: a = "default", children: e }) {
     )
   );
 }
-za.displayName = "UIContextProvider";
+Ia.displayName = "UIContextProvider";
 export {
   ea as $,
-  Ae as A,
-  va as B,
-  Oa as C,
-  ke as D,
-  Ea as E,
-  Ce as F,
-  $e as G,
-  we as H,
+  Ne as A,
+  Aa as B,
+  Ga as C,
+  Ce as D,
+  Xa as E,
+  $e as F,
+  we as G,
+  Re as H,
   Pe as I,
-  xe as J,
-  ze as K,
-  Te as L,
-  De as M,
-  Oe as N,
-  Ee as O,
-  Fe as P,
+  Te as J,
+  Me as K,
+  Ie as L,
+  Ve as M,
+  He as N,
+  Ge as O,
+  We as P,
   je as Q,
-  Ga as R,
-  Ha as S,
-  Ue as T,
-  za as U,
-  We as V,
+  ja as R,
+  La as S,
+  Wa as T,
+  Ia as U,
+  Ue as V,
   Ye as W,
   Ze as X,
-  qe as Y,
-  Fa as Z,
-  Je as _,
-  A as a,
-  aa as a0,
+  Je as Y,
+  Ua as Z,
+  Qe as _,
+  k as a,
+  sa as a0,
   oa as a1,
   ra as a2,
   ia as a3,
-  da as a4,
-  na as a5,
+  na as a4,
+  ca as a5,
   ga as a6,
-  _a as a7,
-  pa as a8,
-  ua as a9,
-  ba as aa,
+  pa as a7,
+  ua as a8,
+  ba as a9,
+  fa as aa,
   ma as ab,
-  ya as ac,
-  Ba as ad,
-  Aa as ae,
+  va as ac,
+  ha as ad,
+  Sa as ae,
   Na as af,
-  $a as ag,
-  Ra as ah,
-  B as ai,
-  p as aj,
-  S as b,
-  G as c,
-  F as d,
+  xa as ag,
+  wa as ah,
+  Pa as ai,
+  Ma as aj,
+  S as ak,
+  u as al,
+  A as b,
+  L as c,
+  W as d,
   X as e,
   h as f,
   U as g,
-  E as h,
-  Z as i,
-  Q as j,
-  ae as k,
-  oe as l,
-  re as m,
-  ie as n,
-  de as o,
-  ce as p,
-  ge as q,
-  _e as r,
-  be as s,
-  me as t,
-  Xa as u,
-  ye as v,
-  ve as w,
-  he as x,
-  Be as y,
-  Se as z
+  G as h,
+  J as i,
+  ae as j,
+  oe as k,
+  re as l,
+  ie as m,
+  ne as n,
+  ce as o,
+  _e as p,
+  pe as q,
+  ue as r,
+  me as s,
+  ve as t,
+  Ya as u,
+  he as v,
+  Be as w,
+  Se as x,
+  Ae as y,
+  ke as z
 };