@mt-gloss/ui 0.1.139 → 0.2.0

package/UIContext-DP6JGCto.js

@@ -0,0 +1,1731 @@
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
+import p, { useState as C, createContext as x, useContext as $ } from "react";
+import { createPortal as w } from "react-dom";
+import { useFloating as R, autoUpdate as P, offset as z, flip as T, shift as M, useDismiss as D, useRole as I, useInteractions as V } from "@floating-ui/react";
+import { AnimatePresence as E, motion as O } from "framer-motion";
+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 [r, d] of Object.entries(e)) {
+      const i = s[r];
+      i != null && i !== !1 && (l[d] = String(i));
+    }
+  return { style: t, dataAttrs: l };
+}
+const H = {
+  bg: "--_bg",
+  color: "--_color",
+  borderColor: "--_border-color",
+  padding: "--_padding",
+  paddingX: "--_px",
+  radius: "--_radius",
+  elevation: "--_elevation",
+  fontSize: "--_font-size",
+  fontWeight: "--_font-weight",
+  minHeight: "--_min-height",
+  gap: "--_gap"
+}, F = {
+  display: "data-display"
+};
+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: r || d,
+      ..._,
+      ...i,
+      children: l
+    }
+  );
+}
+G.displayName = "BaseButton";
+const Ga = {
+  // Brand
+  BrandPrimary: "var(--gloss-color-brand-primary)",
+  BrandPrimaryHover: "var(--gloss-color-brand-primary-hover)",
+  BrandPrimaryActive: "var(--gloss-color-brand-primary-active)",
+  // Text
+  TextPrimary: "var(--gloss-color-text-primary)",
+  TextSecondary: "var(--gloss-color-text-secondary)",
+  TextTertiary: "var(--gloss-color-text-tertiary)",
+  TextInverse: "var(--gloss-color-text-inverse)",
+  TextError: "var(--gloss-color-text-error)",
+  TextSuccess: "var(--gloss-color-text-success)",
+  TextLink: "var(--gloss-color-text-link)",
+  // Backgrounds
+  BgPage: "var(--gloss-color-bg-page)",
+  BgSurface: "var(--gloss-color-bg-surface)",
+  BgMuted: "var(--gloss-color-bg-muted)",
+  BgHover: "var(--gloss-color-bg-hover)",
+  BgDisabled: "var(--gloss-color-bg-disabled)",
+  BgError: "var(--gloss-color-bg-error)",
+  BgSecondary: "var(--gloss-color-bg-secondary)",
+  BgSidebar: "var(--gloss-color-bg-sidebar)",
+  // Borders
+  BorderDefault: "var(--gloss-color-border-default)",
+  BorderHover: "var(--gloss-color-border-hover)",
+  BorderFocus: "var(--gloss-color-border-focus)",
+  BorderSuccess: "var(--gloss-color-border-success)",
+  BorderError: "var(--gloss-color-border-error)",
+  // Gray scale
+  Gray50: "var(--gloss-color-gray-50)",
+  Gray100: "var(--gloss-color-gray-100)",
+  Gray200: "var(--gloss-color-gray-200)",
+  Gray300: "var(--gloss-color-gray-300)",
+  Gray400: "var(--gloss-color-gray-400)",
+  Gray500: "var(--gloss-color-gray-500)",
+  Gray600: "var(--gloss-color-gray-600)",
+  Gray700: "var(--gloss-color-gray-700)",
+  Gray800: "var(--gloss-color-gray-800)",
+  Gray900: "var(--gloss-color-gray-900)",
+  // Blue scale
+  Blue50: "var(--gloss-color-blue-50)",
+  Blue100: "var(--gloss-color-blue-100)",
+  Blue200: "var(--gloss-color-blue-200)",
+  Blue300: "var(--gloss-color-blue-300)",
+  Blue400: "var(--gloss-color-blue-400)",
+  Blue500: "var(--gloss-color-blue-500)",
+  Blue600: "var(--gloss-color-blue-600)",
+  Blue700: "var(--gloss-color-blue-700)",
+  Blue800: "var(--gloss-color-blue-800)",
+  Blue900: "var(--gloss-color-blue-900)",
+  // Green scale
+  Green50: "var(--gloss-color-green-50)",
+  Green100: "var(--gloss-color-green-100)",
+  Green500: "var(--gloss-color-green-500)",
+  Green600: "var(--gloss-color-green-600)",
+  Green700: "var(--gloss-color-green-700)",
+  // Red scale
+  Red50: "var(--gloss-color-red-50)",
+  Red100: "var(--gloss-color-red-100)",
+  Red200: "var(--gloss-color-red-200)",
+  Red400: "var(--gloss-color-red-400)",
+  Red500: "var(--gloss-color-red-500)",
+  Red600: "var(--gloss-color-red-600)",
+  Red700: "var(--gloss-color-red-700)",
+  // Amber scale
+  Amber100: "var(--gloss-color-amber-100)",
+  Amber200: "var(--gloss-color-amber-200)",
+  Amber500: "var(--gloss-color-amber-500)",
+  Amber600: "var(--gloss-color-amber-600)",
+  // Base
+  White: "var(--gloss-color-white)"
+}, La = {
+  None: "0",
+  Xs: "var(--gloss-spacing-1)",
+  Sm: "var(--gloss-spacing-2)",
+  Md: "var(--gloss-spacing-3)",
+  Lg: "var(--gloss-spacing-4)",
+  Xl: "var(--gloss-spacing-5)",
+  "2xl": "var(--gloss-spacing-6)",
+  "3xl": "var(--gloss-spacing-8)",
+  "4xl": "var(--gloss-spacing-10)",
+  "5xl": "var(--gloss-spacing-12)",
+  "6xl": "var(--gloss-spacing-16)"
+}, 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)",
+  ButtonActive: "var(--gloss-elevation-button-active)",
+  Hover: "var(--gloss-elevation-hover)",
+  InputDefault: "var(--gloss-elevation-input-default)",
+  InputFocus: "var(--gloss-elevation-input-focus)",
+  Sidebar: "var(--gloss-elevation-sidebar)",
+  None: "none"
+}, ja = {
+  None: "0",
+  Xs: "var(--gloss-radius-xs)",
+  Sm: "var(--gloss-radius-sm)",
+  Md: "var(--gloss-radius-md)",
+  Lg: "var(--gloss-radius-lg)",
+  Xl: "var(--gloss-radius-xl)",
+  Full: "var(--gloss-radius-full)"
+}, Ua = {
+  Dropdown: "var(--gloss-z-dropdown)",
+  Sticky: "var(--gloss-z-sticky)",
+  Overlay: "var(--gloss-z-overlay)",
+  Modal: "var(--gloss-z-modal)",
+  Popover: "var(--gloss-z-popover)",
+  Toast: "var(--gloss-z-toast)"
+};
+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(
+    d,
+    {
+      className: o ? `gloss-base-box ${o}` : "gloss-base-box",
+      style: i,
+      ...c,
+      ...r,
+      children: l
+    }
+  );
+}
+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(
+    d,
+    {
+      className: o ? `gloss-base-stack ${o}` : "gloss-base-stack",
+      style: i,
+      ...c,
+      ...r,
+      children: l
+    }
+  );
+}
+W.displayName = "BaseStack";
+function X(s) {
+  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(
+    r,
+    {
+      className: o ? `gloss-base-divider ${o}` : "gloss-base-divider",
+      style: d,
+      ...i,
+      ...l
+    }
+  );
+}
+X.displayName = "BaseDivider";
+function h(s) {
+  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(
+    d,
+    {
+      className: o ? `gloss-base-typography ${o}` : "gloss-base-typography",
+      style: i,
+      ...c,
+      ...r,
+      children: l
+    }
+  );
+}
+h.displayName = "BaseTypography";
+const j = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+}, S = ({
+  name: s,
+  size: a = "md",
+  className: e = "",
+  ...o
+}) => {
+  const t = j[a];
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      width: t,
+      height: t,
+      className: e,
+      "aria-hidden": "true",
+      focusable: "false",
+      ...o,
+      children: /* @__PURE__ */ n("use", { href: `#${s}` })
+    }
+  );
+};
+S.displayName = "Icon";
+function U(s) {
+  const { definition: a, name: e, icon: o, className: t, style: l } = s;
+  if (!e && !o) return null;
+  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: r,
+      ...d,
+      children: e ? /* @__PURE__ */ n(S, { name: e, size: a?.size ?? "md" }) : o
+    }
+  );
+}
+U.displayName = "BaseIcon";
+function Y(s) {
+  const {
+    open: a,
+    placement: e = "bottom",
+    offsetValue: o = 8,
+    onOpenChange: t
+  } = s;
+  return R({
+    open: a,
+    onOpenChange: t,
+    placement: e,
+    middleware: [z(o), T(), M()],
+    whileElementsMounted: P,
+    // 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 K(s) {
+  const {
+    context: a,
+    outsidePress: e = !0,
+    escapeKey: o = !0,
+    role: t = "dialog"
+  } = s, l = D(a, { outsidePress: e, escapeKey: o }), r = I(a, { role: t }), { getFloatingProps: d, getReferenceProps: i } = V([
+    l,
+    r
+  ]);
+  return { getFloatingProps: d, getReferenceProps: i };
+}
+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
+  });
+  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"
+  }), 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(E, { children: e && /* @__PURE__ */ n(
+    O.div,
+    {
+      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 },
+      ...f(),
+      children: d
+    }
+  ) });
+  return v && typeof document < "u" ? w(B, document.body) : B;
+}
+A.displayName = "BaseOverlay";
+const Z = {
+  bg: "--_bg",
+  color: "--_color",
+  borderColor: "--_border-color",
+  padding: "--_padding",
+  paddingX: "--_px",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  minHeight: "--_min-height",
+  placeholderColor: "--_placeholder-color"
+}, 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: l,
+        ...g,
+        ...d
+      }
+    );
+    return !o && !t ? _ : /* @__PURE__ */ b("div", { className: "gloss-base-input__wrapper", children: [
+      o && /* @__PURE__ */ b("label", { className: "gloss-base-input__label", children: [
+        o,
+        l && /* @__PURE__ */ n("span", { className: "gloss-base-input__required", children: "*" })
+      ] }),
+      _,
+      t && /* @__PURE__ */ n("div", { className: "gloss-base-input__helper", children: t })
+    ] });
+  }
+);
+J.displayName = "BaseInput";
+const Q = {
+  bg: "--_bg",
+  color: "--_color",
+  borderColor: "--_border-color",
+  padding: "--_padding",
+  paddingX: "--_px",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  minHeight: "--_min-height",
+  placeholderColor: "--_placeholder-color",
+  minRows: "--_min-rows",
+  maxRows: "--_max-rows"
+}, ee = {
+  resize: "data-resize"
+}, 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: l,
+        ...g,
+        ...d
+      }
+    );
+    return !o && !t ? _ : /* @__PURE__ */ b("div", { className: "gloss-base-textarea__wrapper", children: [
+      o && /* @__PURE__ */ b("label", { className: "gloss-base-textarea__label", children: [
+        o,
+        l && /* @__PURE__ */ n("span", { className: "gloss-base-textarea__required", children: "*" })
+      ] }),
+      _,
+      t && /* @__PURE__ */ n("div", { className: "gloss-base-textarea__helper", children: t })
+    ] });
+  }
+);
+ae.displayName = "BaseTextarea";
+const se = {
+  trackBg: "--_track-bg",
+  trackBorder: "--_track-border",
+  checkColor: "--_check-color",
+  trackSize: "--_track-size",
+  trackRadius: "--_track-radius"
+}, 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);
+      },
+      [o, i]
+    );
+    return /* @__PURE__ */ b(
+      "label",
+      {
+        className: a ? `gloss-base-checkbox ${a}` : "gloss-base-checkbox",
+        style: { ...c, ...e },
+        ...g,
+        children: [
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: _,
+              type: "checkbox",
+              className: "gloss-base-checkbox__input",
+              checked: l,
+              disabled: r,
+              ...d
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "gloss-base-checkbox__track" }),
+          t
+        ]
+      }
+    );
+  }
+);
+oe.displayName = "BaseCheckbox";
+const te = {
+  trackBg: "--_track-bg",
+  trackBorder: "--_track-border",
+  dotColor: "--_dot-color",
+  trackSize: "--_track-size"
+}, 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",
+        style: { ...i, ...e },
+        ...c,
+        children: [
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: d,
+              type: "radio",
+              className: "gloss-base-radio__input",
+              checked: t,
+              disabled: l,
+              ...r
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "gloss-base-radio__track" }),
+          o
+        ]
+      }
+    );
+  }
+);
+re.displayName = "BaseRadio";
+const le = {
+  trackBg: "--_track-bg",
+  trackBgActive: "--_track-bg-active",
+  thumbBg: "--_thumb-bg",
+  trackWidth: "--_track-width",
+  trackHeight: "--_track-height",
+  thumbSize: "--_thumb-size"
+}, 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",
+        style: { ...i, ...e },
+        ...c,
+        children: [
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: d,
+              type: "checkbox",
+              role: "switch",
+              className: "gloss-base-toggle__input",
+              checked: t,
+              disabled: l,
+              ...r
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "gloss-base-toggle__track", children: /* @__PURE__ */ n("span", { className: "gloss-base-toggle__thumb" }) }),
+          o
+        ]
+      }
+    );
+  }
+);
+ie.displayName = "BaseToggle";
+const de = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  minHeight: "--_min-height",
+  padding: "--_padding"
+};
+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: { ...r, ...o },
+      ...d,
+      ...l,
+      children: t
+    }
+  );
+}
+ne.displayName = "BaseSelect";
+const ce = p.forwardRef(
+  ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      className: s ? `gloss-base-select__trigger ${s}` : "gloss-base-select__trigger",
+      ...e,
+      children: a
+    }
+  )
+);
+ce.displayName = "BaseSelectTrigger";
+const ge = {
+  bg: "--_dropdown-bg",
+  borderColor: "--_dropdown-border-color",
+  radius: "--_dropdown-radius",
+  elevation: "--_dropdown-elevation",
+  maxHeight: "--_dropdown-max-height"
+};
+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: { ...r, ...o },
+      role: "listbox",
+      ...l,
+      children: t
+    }
+  );
+}
+_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: l,
+        role: "option",
+        "aria-selected": e,
+        "aria-disabled": o,
+        className: s ? `gloss-base-select__option ${s}` : "gloss-base-select__option",
+        ...r,
+        ...t,
+        children: a
+      }
+    );
+  }
+);
+pe.displayName = "BaseSelectOption";
+function ue({ label: s, className: a, children: e, ...o }) {
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      role: "group",
+      "aria-label": s,
+      className: a ? `gloss-base-select__group ${a}` : "gloss-base-select__group",
+      ...o,
+      children: [
+        s && /* @__PURE__ */ n("div", { className: "gloss-base-select__group-label", children: s }),
+        e
+      ]
+    }
+  );
+}
+ue.displayName = "BaseSelectGroup";
+const be = {
+  trackBg: "--_track-bg",
+  trackActiveBg: "--_track-active-bg",
+  thumbBg: "--_thumb-bg",
+  thumbBorder: "--_thumb-border",
+  thumbSize: "--_thumb-size",
+  trackHeight: "--_track-height",
+  thumbShadow: "--_thumb-shadow"
+}, fe = {};
+function me({
+  definition: s,
+  className: a,
+  style: e,
+  orientation: o = "horizontal",
+  disabled: t,
+  children: l,
+  ...r
+}) {
+  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,
+      ...r,
+      children: l
+    }
+  );
+}
+me.displayName = "BaseSlider";
+const ye = {
+  bg: "--_bg",
+  border: "--_border",
+  radius: "--_radius",
+  elevation: "--_elevation",
+  padding: "--_padding"
+}, 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: l,
+        className: a ? `gloss-base-card ${a}` : "gloss-base-card",
+        style: { ...r, ...e },
+        ...d,
+        ...t,
+        children: o
+      }
+    );
+  }
+);
+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: l,
+        className: a ? `gloss-base-card__header ${a}` : "gloss-base-card__header",
+        style: r,
+        ...t,
+        children: o
+      }
+    );
+  }
+);
+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: l,
+        className: a ? `gloss-base-card__body ${a}` : "gloss-base-card__body",
+        style: r,
+        ...t,
+        children: o
+      }
+    );
+  }
+);
+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: l,
+        className: a ? `gloss-base-card__footer ${a}` : "gloss-base-card__footer",
+        style: r,
+        ...t,
+        children: o
+      }
+    );
+  }
+);
+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",
+      {
+        ref: d,
+        className: o ? `gloss-base-card__media ${o}` : "gloss-base-card__media",
+        style: i,
+        ...r,
+        children: s ? /* @__PURE__ */ n("img", { src: s, alt: a || "" }) : l
+      }
+    );
+  }
+);
+Ae.displayName = "BaseCardMedia";
+const ke = p.forwardRef(
+  ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
+    "h3",
+    {
+      ref: o,
+      className: s ? `gloss-base-card__title ${s}` : "gloss-base-card__title",
+      ...e,
+      children: a
+    }
+  )
+);
+ke.displayName = "BaseCardTitle";
+const Ne = p.forwardRef(
+  ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
+    "p",
+    {
+      ref: o,
+      className: s ? `gloss-base-card__subtitle ${s}` : "gloss-base-card__subtitle",
+      ...e,
+      children: a
+    }
+  )
+);
+Ne.displayName = "BaseCardSubtitle";
+const Ce = p.forwardRef(
+  ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: o,
+      className: s ? `gloss-base-card__actions ${s}` : "gloss-base-card__actions",
+      ...e,
+      children: a
+    }
+  )
+);
+Ce.displayName = "BaseCardActions";
+const xe = {
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  gap: "--_gap"
+}, $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: l,
+        className: a ? `gloss-base-accordion ${a}` : "gloss-base-accordion",
+        style: { ...r, ...e },
+        ...d,
+        ...t,
+        children: o
+      }
+    );
+  }
+);
+$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: l,
+        className: s ? `gloss-base-accordion__item ${s}` : "gloss-base-accordion__item",
+        style: a,
+        ...r,
+        ...t,
+        children: e
+      }
+    );
+  }
+);
+we.displayName = "BaseAccordionItem";
+const Re = p.forwardRef(
+  ({ className: s, children: a, ...e }, o) => /* @__PURE__ */ n(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      className: s ? `gloss-base-accordion__trigger ${s}` : "gloss-base-accordion__trigger",
+      ...e,
+      children: a
+    }
+  )
+);
+Re.displayName = "BaseAccordionTrigger";
+const Pe = p.forwardRef(
+  ({ className: s, style: a, children: e, ...o }, t) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: t,
+      className: s ? `gloss-base-accordion__content ${s}` : "gloss-base-accordion__content",
+      style: a,
+      ...o,
+      children: e
+    }
+  )
+);
+Pe.displayName = "BaseAccordionContent";
+const ze = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  elevation: "--_elevation",
+  padding: "--_padding",
+  minWidth: "--_min-width"
+}, 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: l,
+        role: "menu",
+        className: a ? `gloss-base-menu ${a}` : "gloss-base-menu",
+        style: { ...r, ...e },
+        ...d,
+        ...t,
+        children: o
+      }
+    );
+  }
+);
+Te.displayName = "BaseMenu";
+function Me({ label: s, className: a, style: e, children: o, ...t }) {
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      role: "group",
+      "aria-label": s,
+      className: a ? `gloss-base-menu__group ${a}` : "gloss-base-menu__group",
+      style: e,
+      ...t,
+      children: [
+        s && /* @__PURE__ */ n("div", { className: "gloss-base-menu__group-label", children: s }),
+        o
+      ]
+    }
+  );
+}
+Me.displayName = "BaseMenuGroup";
+const De = {
+  padding: "--_item-padding",
+  fontSize: "--_item-font-size",
+  color: "--_item-color",
+  hoverBg: "--_item-hover-bg"
+}, 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": l ? "page" : void 0,
+        className: a ? `gloss-base-menu__item ${a}` : "gloss-base-menu__item",
+        style: { ...c, ...e },
+        ...g,
+        ...d,
+        children: o
+      }
+    );
+  }
+);
+Ie.displayName = "BaseMenuItem";
+function Ve({ className: s }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "separator",
+      className: s ? `gloss-base-menu__divider ${s}` : "gloss-base-menu__divider"
+    }
+  );
+}
+Ve.displayName = "BaseMenuDivider";
+const Ee = {
+  bg: "--_bg",
+  color: "--_color",
+  radius: "--_radius",
+  padding: "--_padding",
+  fontSize: "--_font-size",
+  maxWidth: "--_max-width",
+  arrowSize: "--_arrow-size"
+}, 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: r,
+        role: "tooltip",
+        className: a ? `gloss-base-tooltip ${a}` : "gloss-base-tooltip",
+        style: { ...d, ...e },
+        ...i,
+        ...l,
+        children: [
+          /* @__PURE__ */ n("div", { className: "gloss-base-tooltip__content", children: o }),
+          /* @__PURE__ */ n("div", { className: "gloss-base-tooltip__arrow" })
+        ]
+      }
+    );
+  }
+);
+He.displayName = "BaseTooltip";
+const Fe = {
+  activeColor: "--_active-color",
+  inactiveColor: "--_inactive-color",
+  hoverColor: "--_hover-color",
+  starSize: "--_star-size",
+  gap: "--_gap"
+}, 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,
+        role: "radiogroup",
+        className: a ? `gloss-base-rating ${a}` : "gloss-base-rating",
+        style: { ...i, ...e },
+        ...c,
+        ...r,
+        children: o
+      }
+    );
+  }
+);
+Ge.displayName = "BaseRating";
+const Le = {
+  bg: "--_bg",
+  activeBg: "--_active-bg",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  padding: "--_padding",
+  fontSize: "--_font-size"
+}, 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: r,
+        role: "radiogroup",
+        className: a ? `gloss-base-segmented-control ${a}` : "gloss-base-segmented-control",
+        style: { ...d, ...e },
+        ...i,
+        ...l,
+        children: o
+      }
+    );
+  }
+);
+We.displayName = "BaseSegmentedControl";
+const Xe = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  elevation: "--_elevation",
+  padding: "--_padding"
+};
+function je({ definition: s, className: a, style: e, children: o, ...t }) {
+  const { style: l, dataAttrs: r } = u(s, Xe);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: a ? `gloss-base-datepicker ${a}` : "gloss-base-datepicker",
+      style: { ...l, ...e },
+      ...r,
+      ...t,
+      children: o
+    }
+  );
+}
+je.displayName = "BaseDatePicker";
+function Ue({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-datepicker__header ${s}` : "gloss-base-datepicker__header",
+      style: a,
+      ...o,
+      children: e
+    }
+  );
+}
+Ue.displayName = "BaseDatePickerHeader";
+function Ye({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-datepicker__calendar ${s}` : "gloss-base-datepicker__calendar",
+      style: a,
+      role: "grid",
+      ...o,
+      children: e
+    }
+  );
+}
+Ye.displayName = "BaseDatePickerCalendar";
+const Ke = {
+  bg: "--_day-bg",
+  color: "--_day-color",
+  radius: "--_day-radius",
+  size: "--_day-size"
+};
+function Ze({
+  definition: s,
+  className: a,
+  style: e,
+  selected: o,
+  today: t,
+  outsideMonth: l,
+  disabled: r,
+  children: d,
+  ...i
+}) {
+  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: r,
+      ...g,
+      ...i,
+      children: d
+    }
+  );
+}
+Ze.displayName = "BaseDatePickerDay";
+const qe = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  elevation: "--_elevation",
+  padding: "--_padding",
+  cellHeight: "--_cell-height"
+};
+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: { ...l, ...e },
+      ...r,
+      ...t,
+      children: o
+    }
+  );
+}
+Je.displayName = "BaseTimePicker";
+function Qe({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-timepicker__column ${s}` : "gloss-base-timepicker__column",
+      style: a,
+      role: "listbox",
+      ...o,
+      children: e
+    }
+  );
+}
+Qe.displayName = "BaseTimePickerColumn";
+function ea({ className: s, style: a, selected: e, disabled: o, children: t, ...l }) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: s ? `gloss-base-timepicker__cell ${s}` : "gloss-base-timepicker__cell",
+      style: a,
+      role: "option",
+      "aria-selected": e,
+      disabled: o,
+      "data-selected": e ? "" : void 0,
+      "data-disabled": o ? "" : void 0,
+      ...l,
+      children: t
+    }
+  );
+}
+ea.displayName = "BaseTimePickerCell";
+const aa = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  elevation: "--_elevation",
+  gap: "--_gap"
+};
+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: { ...l, ...e },
+      ...r,
+      ...t,
+      children: o
+    }
+  );
+}
+sa.displayName = "BaseDateRangePicker";
+function oa({
+  className: s,
+  style: a,
+  selected: e,
+  today: o,
+  outsideMonth: t,
+  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"] = ""), l && (_["data-range-start"] = ""), r && (_["data-range-end"] = ""), d && (_["data-in-range"] = ""), /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: s ? `gloss-base-daterangepicker__day ${s}` : "gloss-base-daterangepicker__day",
+      style: a,
+      disabled: i,
+      ..._,
+      ...g,
+      children: c
+    }
+  );
+}
+oa.displayName = "BaseDateRangePickerDay";
+const ta = {
+  bg: "--_bg",
+  color: "--_color",
+  borderColor: "--_border-color",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  padding: "--_padding",
+  buttonBg: "--_button-bg",
+  minHeight: "--_min-height"
+};
+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: { ...r, ...e },
+      ...d,
+      ...l,
+      children: t
+    }
+  );
+}
+ra.displayName = "BaseNumberInput";
+const la = {
+  bg: "--_bg",
+  color: "--_color",
+  borderColor: "--_border-color",
+  padding: "--_padding",
+  paddingX: "--_px",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  minHeight: "--_min-height",
+  placeholderColor: "--_placeholder-color",
+  placeholderCharColor: "--_placeholder-char-color"
+}, 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: l,
+        ...g,
+        ...d
+      }
+    );
+    return !o && !t ? _ : /* @__PURE__ */ b("div", { className: "gloss-base-maskedinput__wrapper", children: [
+      o && /* @__PURE__ */ b("label", { className: "gloss-base-maskedinput__label", children: [
+        o,
+        l && /* @__PURE__ */ n("span", { className: "gloss-base-maskedinput__required", children: "*" })
+      ] }),
+      _,
+      t && /* @__PURE__ */ n("div", { className: "gloss-base-maskedinput__helper", children: t })
+    ] });
+  }
+);
+ia.displayName = "BaseMaskedInput";
+const da = {
+  bg: "--_bg",
+  borderColor: "--_border-color",
+  borderStyle: "--_border-style",
+  radius: "--_radius",
+  padding: "--_padding",
+  minHeight: "--_min-height"
+};
+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,
+      ...r,
+      children: l
+    }
+  );
+}
+na.displayName = "BaseFileUpload";
+function ca({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-fileupload__list ${s}` : "gloss-base-fileupload__list",
+      style: a,
+      ...o,
+      children: e
+    }
+  );
+}
+ca.displayName = "BaseFileUploadList";
+function ga({ className: s, style: a, error: e, children: o, ...t }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-fileupload__item ${s}` : "gloss-base-fileupload__item",
+      style: a,
+      "data-error": e ? "" : void 0,
+      ...t,
+      children: o
+    }
+  );
+}
+ga.displayName = "BaseFileUploadItem";
+const _a = {
+  radius: "--_radius",
+  elevation: "--_elevation",
+  padding: "--_padding",
+  swatchSize: "--_swatch-size"
+};
+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: { ...r, ...e },
+      ...d,
+      ...l,
+      children: t
+    }
+  );
+}
+pa.displayName = "BaseColorPicker";
+function ua({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-colorpicker__saturation ${s}` : "gloss-base-colorpicker__saturation",
+      style: a,
+      ...o,
+      children: e
+    }
+  );
+}
+ua.displayName = "BaseColorPickerSaturation";
+function ba({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-colorpicker__hue ${s}` : "gloss-base-colorpicker__hue",
+      style: a,
+      ...o,
+      children: e
+    }
+  );
+}
+ba.displayName = "BaseColorPickerHue";
+function fa({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-colorpicker__alpha ${s}` : "gloss-base-colorpicker__alpha",
+      style: a,
+      ...o,
+      children: e
+    }
+  );
+}
+fa.displayName = "BaseColorPickerAlpha";
+function ma({ className: s, style: a, children: e, ...o }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s ? `gloss-base-colorpicker__swatch ${s}` : "gloss-base-colorpicker__swatch",
+      style: a,
+      ...o,
+      children: e
+    }
+  );
+}
+ma.displayName = "BaseColorPickerSwatch";
+const ya = {
+  trackBg: "--_track-bg",
+  trackActiveBg: "--_track-active-bg",
+  thumbBg: "--_thumb-bg",
+  thumbBorder: "--_thumb-border",
+  thumbSize: "--_thumb-size",
+  trackHeight: "--_track-height",
+  thumbShadow: "--_thumb-shadow"
+};
+function va({
+  definition: s,
+  className: a,
+  style: e,
+  orientation: o = "horizontal",
+  disabled: t,
+  collision: l,
+  children: r,
+  ...d
+}) {
+  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: r
+    }
+  );
+}
+va.displayName = "BaseRangeSlider";
+const ha = function(a) {
+  const { as: e, className: o, ...t } = a;
+  return /* @__PURE__ */ n(
+    h,
+    {
+      as: e || "span",
+      className: o ? `gloss-base-text ${o}` : "gloss-base-text",
+      ...t
+    }
+  );
+};
+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: l,
+  children: r
+}) {
+  const d = {
+    placement: s?.placement ?? "bottom",
+    offset: s?.offset ?? 8,
+    portal: s?.portal,
+    dismissOnClickOutside: s?.dismissOnClickOutside ?? !0,
+    dismissOnEscape: s?.dismissOnEscape ?? !0,
+    role: "dialog",
+    bg: s?.bg,
+    shadow: s?.shadow,
+    radius: s?.radius,
+    padding: s?.padding,
+    zIndex: s?.zIndex
+  }, i = s?.arrowSize ?? 8, c = { ...l };
+  return s?.showArrow && (c["--_arrow-size"] = `${i}px`), /* @__PURE__ */ n(
+    A,
+    {
+      definition: d,
+      open: a,
+      onDismiss: e,
+      anchorRef: o,
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          className: t ? `gloss-base-popover ${t}` : "gloss-base-popover",
+          style: c,
+          children: [
+            r,
+            s?.showArrow && /* @__PURE__ */ n("div", { className: "gloss-base-popover__arrow" })
+          ]
+        }
+      )
+    }
+  );
+}
+Aa.displayName = "BasePopover";
+const ka = {
+  size: "--_size",
+  bg: "--_bg",
+  color: "--_color",
+  fontSize: "--_font-size",
+  radius: "--_radius"
+};
+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, ...l },
+      ..._,
+      ...d,
+      children: f ? /* @__PURE__ */ n(
+        "img",
+        {
+          src: e,
+          alt: o || "",
+          onError: () => c(!0)
+        }
+      ) : r
+    }
+  );
+}
+Na.displayName = "BaseAvatar";
+const Ca = {
+  trackBg: "--_track-bg",
+  fillBg: "--_fill-bg",
+  height: "--_height",
+  radius: "--_radius"
+};
+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(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": t ? void 0 : e || 0,
+      "aria-valuemin": 0,
+      "aria-valuemax": o,
+      className: l ? `gloss-base-progress-bar ${l}` : "gloss-base-progress-bar",
+      style: { ...i, ...r },
+      ...c,
+      ...d,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: "gloss-base-progress-bar__fill",
+          style: g ? { width: g } : void 0
+        }
+      )
+    }
+  );
+}
+xa.displayName = "BaseProgressBar";
+const $a = {
+  bg: "--_bg",
+  color: "--_color",
+  padding: "--_padding",
+  paddingX: "--_px",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  fontWeight: "--_font-weight"
+};
+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: !l && r
+    }
+  );
+}
+wa.displayName = "BaseBadge";
+const Ra = {
+  bg: "--_bg",
+  color: "--_color",
+  borderColor: "--_border-color",
+  padding: "--_padding",
+  paddingX: "--_px",
+  radius: "--_radius",
+  fontSize: "--_font-size",
+  fontWeight: "--_font-weight",
+  gap: "--_gap"
+};
+function Pa(s) {
+  const {
+    as: a,
+    definition: e,
+    className: o,
+    style: t,
+    disabled: l,
+    clickable: r,
+    selected: d,
+    avatar: i,
+    leftIcon: c,
+    deleteButton: g,
+    children: _,
+    ...f
+  } = 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: { ...v, ...t },
+      ...y,
+      ...f,
+      children: [
+        i && /* @__PURE__ */ n("span", { className: "gloss-base-chip__avatar", children: i }),
+        c && /* @__PURE__ */ n("span", { className: "gloss-base-chip__icon", children: c }),
+        /* @__PURE__ */ n("span", { className: "gloss-base-chip__label", children: _ }),
+        g && /* @__PURE__ */ n("span", { className: "gloss-base-chip__delete", children: g })
+      ]
+    }
+  );
+}
+Pa.displayName = "BaseChip";
+const za = {
+  color: "--_color",
+  fontSize: "--_font-size",
+  fontWeight: "--_font-weight",
+  gap: "--_gap"
+}, Ta = {
+  underline: "data-underline"
+};
+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",
+      style: { ..._, ...t },
+      ...f,
+      ...c,
+      children: [
+        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 })
+      ]
+    }
+  );
+}
+Ma.displayName = "BaseLink";
+const Da = { region: null, density: "default" }, k = x(Da);
+function Ya() {
+  return $(k);
+}
+function Ia({ region: s, density: a = "default", children: e }) {
+  const o = { region: s, density: a };
+  return p.createElement(
+    k.Provider,
+    { value: o },
+    p.createElement(
+      "div",
+      {
+        "data-region": s,
+        "data-density": a,
+        className: "gloss-ui-context"
+      },
+      e
+    )
+  );
+}
+Ia.displayName = "UIContextProvider";
+export {
+  Qe as $,
+  ke as A,
+  Aa as B,
+  Ga as C,
+  Ne as D,
+  Xa as E,
+  Ce as F,
+  $e as G,
+  we as H,
+  Re as I,
+  Pe as J,
+  Te as K,
+  Me as L,
+  Ie as M,
+  Ve as N,
+  He as O,
+  Ge as P,
+  We as Q,
+  ja as R,
+  La as S,
+  Wa as T,
+  Ia as U,
+  je as V,
+  Ue as W,
+  Ye as X,
+  Ze as Y,
+  Ua as Z,
+  Je as _,
+  L as a,
+  ea as a0,
+  sa as a1,
+  oa as a2,
+  ra as a3,
+  ia as a4,
+  na as a5,
+  ca as a6,
+  ga as a7,
+  pa as a8,
+  ua as a9,
+  ba as aa,
+  fa as ab,
+  ma as ac,
+  va as ad,
+  Sa as ae,
+  Na as af,
+  xa as ag,
+  wa as ah,
+  Pa as ai,
+  Ma as aj,
+  S as ak,
+  u as al,
+  ha as b,
+  k as c,
+  A as d,
+  W as e,
+  X as f,
+  h as g,
+  U as h,
+  G as i,
+  J as j,
+  ae as k,
+  oe as l,
+  re as m,
+  ie as n,
+  ne as o,
+  ce as p,
+  _e as q,
+  pe as r,
+  ue as s,
+  me as t,
+  Ya as u,
+  ve as v,
+  he as w,
+  Be as x,
+  Se as y,
+  Ae as z
+};