@commercetools/nimbus 1.0.1 → 2.0.1-rc1

package/dist/chunks/index-jAeaCpRm.es.js

@@ -1,3787 +0,0 @@
-import { defineAnimationStyles as b, defineGlobalStyles as m, defineLayerStyles as h, defineRecipe as f, defineSemanticTokens as c, defineSlotRecipe as p, defineTextStyles as v, defineTokens as o, createSystem as y, defaultBaseConfig as x, defineConfig as w } from "@chakra-ui/react";
-import { themeTokens as e } from "@commercetools/nimbus-tokens";
-import { a as S } from "./avatar.recipe-DfyPWbFZ.es.js";
-import { b as n } from "./button.recipe-NdTb5f8M.es.js";
-import { defineRecipe as d, defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
-import { g as k } from "./group.recipe-BQafmscW.es.js";
-import { k as z } from "./kbd.recipe-DXiyvrAP.es.js";
-import { l as R } from "./link.recipe-pXiGIJtI.es.js";
-import { t as C } from "./tooltip.recipe-Cqi_tgR5.es.js";
-const I = /* @__PURE__ */ b({
-  "slide-fade-in": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      "&[data-placement^=top]": {
-        animationName: "slide-from-bottom, fade-in"
-      },
-      "&[data-placement^=bottom]": {
-        animationName: "slide-from-top, fade-in"
-      },
-      "&[data-placement^=left]": {
-        animationName: "slide-from-right, fade-in"
-      },
-      "&[data-placement^=right]": {
-        animationName: "slide-from-left, fade-in"
-      }
-    }
-  },
-  "slide-fade-out": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      "&[data-placement^=top]": {
-        animationName: "slide-to-bottom, fade-out"
-      },
-      "&[data-placement^=bottom]": {
-        animationName: "slide-to-top, fade-out"
-      },
-      "&[data-placement^=left]": {
-        animationName: "slide-to-right, fade-out"
-      },
-      "&[data-placement^=right]": {
-        animationName: "slide-to-left, fade-out"
-      }
-    }
-  },
-  "scale-fade-in": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      animationName: "scale-in, fade-in"
-    }
-  },
-  "scale-fade-out": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      animationName: "scale-out, fade-out"
-    }
-  }
-});
-function P(a) {
-  const l = {};
-  for (const r in a)
-    a[r]?.value ? l[r] = a[r].value : l[r] = a[r];
-  return l;
-}
-const W = /* @__PURE__ */ P(e.breakpoints), _ = /* @__PURE__ */ m({
-  "*": {
-    fontFeatureSettings: '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
-    /**
-     * OVERRIDES FOR CSS VARS PROVIDED BY CHAKRA's `defaultBaseConfig` THEME
-     * OBJECT THAT CANNOT BE RENAMED / OVERRIDDEN VIA THEME CONFIGURATION
-     * `defaultBaseConfig` is defined here:
-     * https://github.com/chakra-ui/chakra-ui/blob/daa05b1c7962990075ae5065a17d897d80e276f2/packages/react/src/preset-base.ts#L220
-     */
-    "--ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--ring-offset-width": "0px",
-    "--ring-offset-color": "#fff",
-    "--ring-color": "rgba(66, 153, 225, 0.6)",
-    "--ring-offset-shadow": "0 0 #0000",
-    "--ring-shadow": "0 0 #0000",
-    // Set default chakra-variables for focus ring
-    "--focus-ring-color": "colors.primary.7",
-    "--focus-ring-width": "sizes.50",
-    "--focus-ring-offset": "spacing.50",
-    "--focus-ring-style": "solid",
-    "--brightness": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--contrast": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--invert": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--saturate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--sepia": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--global-font-mono": "fonts.mono",
-    "--global-font-body": "fonts.body",
-    "--global-color-border": "colors.border"
-    /**
-     * PREFIX ANY GLOBAL CSS VARIABLE THAT IS DEFINED BELOW THIS COMMENT WITH `--nimbus`
-     * TO DENOTE THAT IT IS SPECIFIC TO THE NIMBUS THEME AND NOT OVERRIDING CHAKRA
-     */
-  },
-  /** 'liga' may replace 2 characters with a single one,
-   * which causes differences in formatting when a monospace font is used.*/
-  "code *": {
-    fontFeatureSettings: '"calt", "case", "ss01", "ss07", "ss08", "tnum"'
-  },
-  html: {
-    color: "fg",
-    bg: "bg",
-    lineHeight: "1.5",
-    colorPalette: "neutral"
-  },
-  "*::placeholder": {
-    color: "fg.muted/80"
-  },
-  "*::selection": {
-    bg: "colorPalette.9",
-    color: "colorPalette.contrast"
-  },
-  /** overrides for styling in the chakra theme's preflight @reset layer
-   * overview of preflight config:
-   * https://chakra-ui.com/docs/theming/overview#preflight
-   * values set in @reset layer by preflight option:
-   * https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/styled-system/preflight.ts
-   */
-  body: {
-    /** stops reset layer from triggering react-aria bug in overlay/tooltip positioning:
-     * https://github.com/adobe/react-spectrum/issues/7654
-     * https://github.com/adobe/react-spectrum/issues/7960
-     */
-    position: "initial"
-  },
-  "img, svg, video, canvas, audio, iframe, embed, object": {
-    display: "initial",
-    verticalAlign: "initial"
-  }
-}), B = {
-  spin: {
-    "0%": {
-      transform: "rotate(0deg)"
-    },
-    "100%": {
-      transform: "rotate(360deg)"
-    }
-  },
-  pulse: {
-    "50%": {
-      opacity: "0.5"
-    }
-  },
-  ping: {
-    "75%, 100%": {
-      transform: "scale(2)",
-      opacity: "0"
-    }
-  },
-  bounce: {
-    "0%, 100%": {
-      transform: "translateY(-25%)",
-      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
-    },
-    "50%": {
-      transform: "none",
-      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
-    }
-  },
-  "fade-in": {
-    from: {
-      opacity: 0
-    },
-    to: {
-      opacity: 1
-    }
-  },
-  "fade-out": {
-    from: {
-      opacity: 1
-    },
-    to: {
-      opacity: 0
-    }
-  },
-  "slide-from-left-full": {
-    from: {
-      translate: "-100% 0"
-    },
-    to: {
-      translate: "0 0"
-    }
-  },
-  "slide-from-right-full": {
-    from: {
-      translate: "100% 0"
-    },
-    to: {
-      translate: "0 0"
-    }
-  },
-  "slide-from-top-full": {
-    from: {
-      translate: "0 -100%"
-    },
-    to: {
-      translate: "0 0"
-    }
-  },
-  "slide-from-bottom-full": {
-    from: {
-      translate: "0 100%"
-    },
-    to: {
-      translate: "0 0"
-    }
-  },
-  "slide-to-left-full": {
-    from: {
-      translate: "0 0"
-    },
-    to: {
-      translate: "-100% 0"
-    }
-  },
-  "slide-to-right-full": {
-    from: {
-      translate: "0 0"
-    },
-    to: {
-      translate: "100% 0"
-    }
-  },
-  "slide-to-top-full": {
-    from: {
-      translate: "0 0"
-    },
-    to: {
-      translate: "0 -100%"
-    }
-  },
-  "slide-to-bottom-full": {
-    from: {
-      translate: "0 0"
-    },
-    to: {
-      translate: "0 100%"
-    }
-  },
-  "slide-from-top": {
-    "0%": {
-      translate: "0 -0.5rem"
-    },
-    to: {
-      translate: "0"
-    }
-  },
-  "slide-from-bottom": {
-    "0%": {
-      translate: "0 0.5rem"
-    },
-    to: {
-      translate: "0"
-    }
-  },
-  "slide-from-left": {
-    "0%": {
-      translate: "-0.5rem 0"
-    },
-    to: {
-      translate: "0"
-    }
-  },
-  "slide-from-right": {
-    "0%": {
-      translate: "0.5rem 0"
-    },
-    to: {
-      translate: "0"
-    }
-  },
-  "slide-to-top": {
-    "0%": {
-      translate: "0"
-    },
-    to: {
-      translate: "0 -0.5rem"
-    }
-  },
-  "slide-to-bottom": {
-    "0%": {
-      translate: "0"
-    },
-    to: {
-      translate: "0 0.5rem"
-    }
-  },
-  "slide-to-left": {
-    "0%": {
-      translate: "0"
-    },
-    to: {
-      translate: "-0.5rem 0"
-    }
-  },
-  "slide-to-right": {
-    "0%": {
-      translate: "0"
-    },
-    to: {
-      translate: "0.5rem 0"
-    }
-  },
-  "scale-in": {
-    from: {
-      scale: "0.95"
-    },
-    to: {
-      scale: "1"
-    }
-  },
-  "scale-out": {
-    from: {
-      scale: "1"
-    },
-    to: {
-      scale: "0.95"
-    }
-  },
-  "progress-indeterminate": {
-    "0%": {
-      transform: "translateX(-100%)"
-    },
-    "100%": {
-      transform: "translateX(300%)"
-    }
-  },
-  "gradient-shimmer": {
-    "0%": {
-      backgroundPosition: "200% 0"
-    },
-    "100%": {
-      backgroundPosition: "-200% 0"
-    }
-  }
-}, N = /* @__PURE__ */ h({
-  disabled: {
-    value: {
-      opacity: "0.5",
-      cursor: "not-allowed"
-    }
-  }
-}), H = /* @__PURE__ */ d({
-  className: "nimbus-code",
-  base: {
-    fontFamily: "mono",
-    alignItems: "center",
-    display: "inline-flex",
-    borderRadius: "100"
-  },
-  variants: {
-    variant: {
-      solid: {
-        bg: "colorPalette.4",
-        color: "colorPalette.11"
-      },
-      subtle: {
-        bg: "colorPalette.3",
-        color: "colorPalette.11"
-      },
-      outline: {
-        color: "colorPalette.fg",
-        shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted"
-      },
-      surface: {
-        bg: "colorPalette.subtle",
-        color: "colorPalette.fg",
-        shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted"
-      },
-      plain: {
-        color: "colorPalette.fg"
-      }
-    },
-    size: {
-      xs: {
-        textStyle: "2xs",
-        px: "100",
-        minH: "400"
-      },
-      sm: {
-        textStyle: "xs",
-        px: "150",
-        minH: "500"
-      },
-      md: {
-        textStyle: "sm",
-        px: "200",
-        minH: "600"
-      },
-      lg: {
-        textStyle: "sm",
-        px: "250",
-        minH: "700"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    size: "md"
-  }
-}), T = /* @__PURE__ */ d({
-  className: "nimbus-heading",
-  base: {
-    fontFamily: "heading",
-    fontWeight: "600"
-  },
-  variants: {
-    size: {
-      xs: {
-        textStyle: "xs"
-      },
-      sm: {
-        textStyle: "sm"
-      },
-      md: {
-        textStyle: "md"
-      },
-      lg: {
-        textStyle: "lg"
-      },
-      xl: {
-        textStyle: "xl"
-      },
-      "2xl": {
-        textStyle: "2xl"
-      },
-      "3xl": {
-        textStyle: "3xl"
-      },
-      "4xl": {
-        textStyle: "4xl"
-      },
-      "5xl": {
-        textStyle: "5xl"
-      },
-      "6xl": {
-        textStyle: "6xl"
-      },
-      "7xl": {
-        textStyle: "7xl"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "xl"
-  }
-}), A = /* @__PURE__ */ d({
-  // Unique class name prefix for the component
-  className: "nimbus-text-input",
-  // Base styles applied to all instances of the component
-  base: {
-    display: "block",
-    borderRadius: "200",
-    colorPalette: "neutral",
-    focusVisibleRing: "outside",
-    bg: "transparent",
-    outline: "none",
-    boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-    _placeholder: {
-      opacity: 0.5,
-      color: "currentColor"
-    },
-    _disabled: {
-      layerStyle: "disabled",
-      bg: "neutral.3"
-    },
-    "&[data-invalid='true']": {
-      "--border-color": "colors.critical.7",
-      "--border-width": "sizes.50",
-      color: "critical.11"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        h: 800,
-        textStyle: "sm",
-        px: 300
-      },
-      md: {
-        h: 1e3,
-        textStyle: "md",
-        px: 400
-      }
-    },
-    variant: {
-      solid: {
-        "--border-width": "sizes.25",
-        "--border-color": "colors.neutral.7",
-        backgroundColor: "primary.1",
-        _hover: {
-          backgroundColor: "primary.2"
-        }
-      },
-      ghost: {
-        _hover: {
-          backgroundColor: "primary.2"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
-}), u = /* @__PURE__ */ t({
-  slots: ["root", "option"],
-  // Unique class name prefix for the component
-  className: "nimbus-radio-input",
-  base: {
-    root: {
-      colorPalette: "primary",
-      display: "inline-flex",
-      flexDirection: "row",
-      alignItems: "center",
-      verticalAlign: "top"
-    },
-    option: {
-      gap: "200",
-      flexShrink: 0,
-      whiteSpace: "nowrap",
-      userSelect: "none",
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      "& > svg": {
-        width: "500",
-        height: "500",
-        color: "neutral.9",
-        "&:hover": {
-          color: "neutral.10"
-        }
-      },
-      "&[data-selected] > svg": {
-        color: "colorPalette.9"
-      },
-      "&[data-disabled='true']": {
-        layerStyle: "disabled"
-      },
-      // Sets the text & svg color
-      "&[data-invalid='true']": {
-        color: "critical.9",
-        "& > svg": {
-          color: "critical.9"
-        }
-      },
-      "&[data-focus] > svg": {
-        outline: "2px solid var(--focus-ring-color, ##AFBBFF)",
-        outlineOffset: "1px",
-        borderRadius: "50%"
-      }
-    }
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        root: {
-          flexDirection: "row",
-          gap: "600"
-        }
-      },
-      vertical: {
-        root: {
-          flexDirection: "column",
-          alignItems: "flex-start",
-          gap: "400"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
-  }
-}), V = /* @__PURE__ */ d({
-  className: "nimbus-toggle-button",
-  base: {
-    ...n.base
-  },
-  variants: {
-    size: {
-      ...n.variants?.size
-    },
-    variant: {
-      outline: {
-        "--button-bg": "transparent",
-        "--button-text": "{colors.colorPalette.11}",
-        "--border-width": "{sizes.25}",
-        "--border-color": "{colors.colorPalette.7}",
-        bg: "var(--button-bg)",
-        boxShadow: "0 0 0 var(--border-width) var(--border-color)",
-        color: "var(--button-text)",
-        "&[data-hovered='true']": {
-          "--button-bg": "{colors.colorPalette.2}",
-          "--border-color": "{colors.colorPalette.8}"
-        },
-        "&[data-selected=true]": {
-          "--button-bg": "{colors.colorPalette.3}",
-          "--border-color": "{colors.colorPalette.8}",
-          _hover: {
-            "--button-bg": "{colors.colorPalette.4}",
-            "--border-color": "{colors.colorPalette.9}"
-          }
-        }
-      },
-      ghost: {
-        "--button-text": "{colors.neutral.11}",
-        "--button-bg": "transparent",
-        color: "var(--button-text)",
-        bg: "var(--button-bg)",
-        "&[data-hovered='true']": {
-          "--button-bg": "{colors.colorPalette.2}"
-        },
-        "&[data-selected='true']": {
-          "--button-bg": "{colors.colorPalette.3}",
-          "--button-text": "{colors.colorPalette.11}",
-          "&[data-hovered='true']": {
-            "--button-bg": "{colors.colorPalette.4}"
-          }
-        }
-      }
-    },
-    tone: {
-      ...n.variants?.tone
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "outline",
-    tone: "primary"
-  }
-}), D = /* @__PURE__ */ f({
-  className: "nimbus-toolbar",
-  base: {
-    display: "inline-flex",
-    p: "var(--toolbar-spacing)",
-    gap: "var(--toolbar-spacing)",
-    borderRadius: "300",
-    alignItems: "center",
-    flexDirection: "var(--toolbar-direction)",
-    "& .nimbus-group, & .nimbus-toggle-button-group__root": {
-      alignItems: "center",
-      gap: "var(--toolbar-spacing)",
-      flexDirection: "var(--toolbar-direction)"
-    }
-  },
-  variants: {
-    size: {
-      xs: {
-        "--toolbar-spacing": "{spacing.100}",
-        "--divider-size": "{sizes.600}"
-      },
-      md: {
-        "--toolbar-spacing": "{spacing.200}",
-        "--divider-size": "{sizes.800}"
-      }
-    },
-    orientation: {
-      horizontal: {
-        "--toolbar-direction": "row",
-        "& .nimbus-divider": {
-          height: "var(--divider-size)",
-          mx: "var(--toolbar-spacing)"
-        }
-      },
-      vertical: {
-        "--toolbar-direction": "column",
-        "& .nimbus-divider": {
-          width: "var(--divider-size)",
-          my: "var(--toolbar-spacing)"
-        }
-      }
-    },
-    variant: {
-      plain: {},
-      outline: {
-        boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "plain"
-  }
-}), L = {
-  avatar: S,
-  button: n,
-  code: H,
-  group: k,
-  heading: T,
-  kbd: z,
-  link: R,
-  tooltip: C,
-  textInput: A,
-  radioInput: u,
-  toggleButton: V,
-  toolbar: D
-}, G = /* @__PURE__ */ c.colors({
-  bg: {
-    DEFAULT: {
-      value: {
-        _light: "white",
-        _dark: "black"
-      }
-    }
-  },
-  fg: {
-    DEFAULT: {
-      value: {
-        _light: "black",
-        _dark: "white"
-      }
-    }
-  },
-  border: {
-    DEFAULT: {
-      value: "{colors.neutral.6}"
-    },
-    muted: {
-      value: "{colors.neutral.7}"
-    },
-    subtle: {
-      value: "{colors.neutral.6}"
-    },
-    emphasized: {
-      value: "{colors.neutral.8}"
-    },
-    inverted: {
-      value: "{colors.neutral.9}"
-    },
-    critical: {
-      value: "{colors.critical.8}"
-    },
-    warning: {
-      value: "{colors.warning.8}"
-    },
-    positive: {
-      value: "{colors.positive.8}"
-    },
-    info: {
-      value: "{colors.ingo.8}"
-    }
-  },
-  ...e.color["system-palettes"],
-  ...e.color["brand-palettes"],
-  ...e.color["semantic-palettes"]
-}), j = /* @__PURE__ */ c.shadows(e.shadow), E = /* @__PURE__ */ c.radii({}), O = {
-  colors: G,
-  shadows: j,
-  radii: E
-}, F = /* @__PURE__ */ t({
-  slots: [
-    "trigger",
-    "backdrop",
-    "positioner",
-    "content",
-    "title",
-    "description",
-    "closeTrigger",
-    "header",
-    "body",
-    "footer",
-    "backdrop"
-  ],
-  className: "nimbus-dialog",
-  base: {
-    backdrop: {
-      bg: {
-        _dark: "bg/50",
-        _light: "fg/50"
-      },
-      pos: "fixed",
-      left: 0,
-      top: 0,
-      w: "100vw",
-      h: "100dvh",
-      zIndex: "modal",
-      _open: {
-        animationName: "fade-in",
-        animationDuration: "slow"
-      },
-      _closed: {
-        animationName: "fade-out",
-        animationDuration: "moderate"
-      }
-    },
-    positioner: {
-      display: "flex",
-      width: "100vw",
-      height: "100dvh",
-      position: "fixed",
-      left: 0,
-      top: 0,
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      justifyContent: "center",
-      overscrollBehaviorY: "none"
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      width: "100%",
-      outline: 0,
-      borderRadius: "200",
-      textStyle: "sm",
-      my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      bg: "bg",
-      boxShadow: "lg",
-      _open: {
-        animationDuration: "moderate"
-      },
-      _closed: {
-        animationDuration: "faster"
-      }
-    },
-    header: {
-      flex: 0,
-      px: "600",
-      pt: "600",
-      pb: "400"
-    },
-    body: {
-      flex: "1",
-      px: "600",
-      pt: "200",
-      pb: "600"
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      gap: "300",
-      px: "600",
-      pt: "200",
-      pb: "400"
-    },
-    title: {
-      textStyle: "lg",
-      fontWeight: "semibold"
-    },
-    description: {
-      color: "fg.muted"
-    }
-  },
-  variants: {
-    placement: {
-      center: {
-        positioner: {
-          alignItems: "center"
-        },
-        content: {
-          "--dialog-base-margin": "auto",
-          mx: "auto"
-        }
-      },
-      top: {
-        positioner: {
-          alignItems: "flex-start"
-        },
-        content: {
-          "--dialog-base-margin": "spacing.1600",
-          mx: "auto"
-        }
-      },
-      bottom: {
-        positioner: {
-          alignItems: "flex-end"
-        },
-        content: {
-          "--dialog-base-margin": "spacing.1600",
-          mx: "auto"
-        }
-      }
-    },
-    scrollBehavior: {
-      inside: {
-        positioner: {
-          overflow: "hidden"
-        },
-        content: {
-          maxH: "calc(100% - 7.5rem)"
-        },
-        body: {
-          overflow: "auto"
-        }
-      },
-      outside: {
-        positioner: {
-          overflow: "auto",
-          pointerEvents: "auto"
-        }
-      }
-    },
-    size: {
-      xs: {
-        content: {
-          maxW: "sm"
-        }
-      },
-      sm: {
-        content: {
-          maxW: "md"
-        }
-      },
-      md: {
-        content: {
-          maxW: "lg"
-        }
-      },
-      lg: {
-        content: {
-          maxW: "2xl"
-        }
-      },
-      xl: {
-        content: {
-          maxW: "4xl"
-        }
-      },
-      cover: {
-        positioner: {
-          padding: "1000"
-        },
-        content: {
-          width: "100%",
-          height: "100%",
-          "--dialog-margin": "0"
-        }
-      },
-      full: {
-        content: {
-          maxW: "100vw",
-          minH: "100vh",
-          "--dialog-margin": "0",
-          borderRadius: "0"
-        }
-      }
-    },
-    motionPreset: {
-      scale: {
-        content: {
-          _open: {
-            animationName: "scale-in, fade-in"
-          },
-          _closed: {
-            animationName: "scale-out, fade-out"
-          }
-        }
-      },
-      "slide-in-bottom": {
-        content: {
-          _open: {
-            animationName: "slide-from-bottom, fade-in"
-          },
-          _closed: {
-            animationName: "slide-to-bottom, fade-out"
-          }
-        }
-      },
-      "slide-in-top": {
-        content: {
-          _open: {
-            animationName: "slide-from-top, fade-in"
-          },
-          _closed: {
-            animationName: "slide-to-top, fade-out"
-          }
-        }
-      },
-      "slide-in-left": {
-        content: {
-          _open: {
-            animationName: "slide-from-left, fade-in"
-          },
-          _closed: {
-            animationName: "slide-to-left, fade-out"
-          }
-        }
-      },
-      "slide-in-right": {
-        content: {
-          _open: {
-            animationName: "slide-from-right, fade-in"
-          },
-          _closed: {
-            animationName: "slide-to-right, fade-out"
-          }
-        }
-      },
-      none: {}
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    scrollBehavior: "outside",
-    placement: "top",
-    motionPreset: "scale"
-  }
-}), M = /* @__PURE__ */ t({
-  className: "nimbus-list",
-  slots: ["root", "item", "indicator"],
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--list-gap)",
-      "& :where(ul, ol)": {
-        marginTop: "var(--list-gap)"
-      }
-    },
-    item: {
-      whiteSpace: "normal",
-      display: "list-item"
-    },
-    indicator: {
-      marginEnd: "200",
-      minHeight: "1lh",
-      flexShrink: 0,
-      display: "inline-block",
-      verticalAlign: "middle"
-    }
-  },
-  variants: {
-    variant: {
-      marker: {
-        root: {
-          listStyle: "revert",
-          listStylePosition: "inside"
-        },
-        item: {
-          _marker: {
-            color: "fg.subtle"
-          }
-        }
-      },
-      plain: {
-        item: {
-          alignItems: "flex-start",
-          display: "inline-flex"
-        }
-      }
-    },
-    align: {
-      center: {
-        item: {
-          alignItems: "center"
-        }
-      },
-      start: {
-        item: {
-          alignItems: "flex-start"
-        }
-      },
-      end: {
-        item: {
-          alignItems: "flex-end"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "marker"
-  }
-}), Y = /* @__PURE__ */ t({
-  className: "chakra-table",
-  slots: [
-    "root",
-    "header",
-    "body",
-    "row",
-    "columnHeader",
-    "cell",
-    "footer",
-    "caption"
-  ],
-  base: {
-    root: {
-      fontVariantNumeric: "lining-nums tabular-nums",
-      borderCollapse: "collapse",
-      width: "full",
-      textAlign: "start",
-      verticalAlign: "top"
-    },
-    row: {
-      _selected: {
-        bg: "colorPalette.subtle"
-      }
-    },
-    cell: {
-      textAlign: "start",
-      alignItems: "center"
-    },
-    columnHeader: {
-      fontWeight: "medium",
-      textAlign: "start",
-      color: "fg"
-    },
-    caption: {
-      fontWeight: "medium",
-      textStyle: "xs"
-    },
-    footer: {
-      fontWeight: "medium"
-    }
-  },
-  variants: {
-    interactive: {
-      true: {
-        body: {
-          "& tr": {
-            _hover: {
-              bg: "colorPalette.subtle"
-            }
-          }
-        }
-      }
-    },
-    stickyHeader: {
-      true: {
-        header: {
-          "& :where(tr)": {
-            top: "var(--table-sticky-offset, 0)",
-            position: "sticky",
-            zIndex: 1
-          }
-        }
-      }
-    },
-    striped: {
-      true: {
-        row: {
-          "&:nth-of-type(odd) td": {
-            bg: "bg.muted"
-          }
-        }
-      }
-    },
-    showColumnBorder: {
-      true: {
-        columnHeader: {
-          "&:not(:last-of-type)": {
-            borderInlineEndWidth: "1px"
-          }
-        },
-        cell: {
-          "&:not(:last-of-type)": {
-            borderInlineEndWidth: "1px"
-          }
-        }
-      }
-    },
-    variant: {
-      line: {
-        columnHeader: {
-          borderBottomWidth: "1px"
-        },
-        cell: {
-          borderBottomWidth: "1px"
-        },
-        row: {
-          bg: "bg"
-        }
-      },
-      outline: {
-        root: {
-          boxShadow: "0 0 0 1px {colors.border}",
-          overflow: "hidden"
-        },
-        columnHeader: {
-          borderBottomWidth: "1px"
-        },
-        header: {
-          bg: "bg.muted"
-        },
-        row: {
-          "&:not(:last-of-type)": {
-            borderBottomWidth: "1px"
-          }
-        },
-        footer: {
-          borderTopWidth: "1px"
-        }
-      }
-    },
-    size: {
-      sm: {
-        root: {
-          textStyle: "sm"
-        },
-        columnHeader: {
-          px: "200",
-          py: "200"
-        },
-        cell: {
-          px: "200",
-          py: "200"
-        }
-      },
-      md: {
-        root: {
-          textStyle: "sm"
-        },
-        columnHeader: {
-          px: "300",
-          py: "300"
-        },
-        cell: {
-          px: "300",
-          py: "300"
-        }
-      },
-      lg: {
-        root: {
-          textStyle: "md"
-        },
-        columnHeader: {
-          px: "400",
-          py: "300"
-        },
-        cell: {
-          px: "400",
-          py: "300"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "line",
-    size: "md"
-  }
-}), s = /* @__PURE__ */ t({
-  slots: ["root", "label", "indicator"],
-  // Unique class name prefix for the component
-  className: "nimbus-checkbox",
-  base: {
-    root: {
-      colorPalette: "primary",
-      display: "inline-flex",
-      gap: "200",
-      alignItems: "center",
-      verticalAlign: "top",
-      minWidth: "600",
-      minHeight: "600",
-      "&[data-disabled='true']": {
-        layerStyle: "disabled"
-      }
-    },
-    label: {
-      flexShrink: 0,
-      userSelect: "none",
-      color: "neutral.12",
-      "&[data-invalid='true']": {
-        color: "critical.11"
-      }
-    },
-    indicator: {
-      position: "relative",
-      display: "flex",
-      flexShrink: 0,
-      alignItems: "center",
-      justifyContent: "center",
-      border: "solid-50",
-      borderRadius: "50",
-      focusRing: "outside",
-      borderColor: "neutral.9",
-      bg: "transparent",
-      color: "neutral.11",
-      _icon: {
-        w: "350",
-        h: "350"
-      },
-      "&:hover": {
-        borderColor: "neutral.10"
-      },
-      "&[data-invalid='true']": {
-        bg: "transparent",
-        borderColor: "critical.9",
-        color: "critical.11",
-        "&:hover": {
-          borderColor: "critical.10"
-        }
-      },
-      "&[data-selected='true'], &[data-indeterminate='true']": {
-        bg: "colorPalette.9",
-        borderColor: "colorPalette.9",
-        color: "colorPalette.contrast",
-        "&:hover": {
-          bg: "colorPalette.10",
-          borderColor: "colorPalette.10"
-        },
-        "&[data-invalid='true']": {
-          bg: "critical.9",
-          borderColor: "critical.9",
-          color: "critical.contrast",
-          "&:hover": {
-            bg: "critical.10",
-            borderColor: "critical.10"
-          }
-        }
-      }
-    }
-  },
-  variants: {
-    size: {
-      md: {
-        label: {
-          fontSize: "350",
-          fontWeight: "400",
-          lineHeight: "400"
-        },
-        indicator: {
-          w: "400",
-          h: "400",
-          zIndex: 1,
-          _after: {
-            position: "absolute",
-            content: "''",
-            width: "600",
-            height: "600",
-            zIndex: 0
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), i = /* @__PURE__ */ t({
-  slots: [
-    "root",
-    "trigger",
-    "triggerLabel",
-    "options",
-    "optionGroup",
-    "option"
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-select",
-  // Base styles applied to all instances of the component
-  base: {
-    // RA <Select>
-    root: {
-      colorPalette: "primary",
-      display: "inline-block",
-      position: "relative",
-      maxWidth: "100%",
-      borderRadius: "200",
-      "&[data-disabled='true']": {
-        layerStyle: "disabled",
-        pointerEvents: "none",
-        bg: "neutral.3"
-      }
-    },
-    trigger: {
-      cursor: "button",
-      display: "inline-flex",
-      focusRing: "outside",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      borderRadius: "200",
-      color: "neutral.12",
-      width: "100%",
-      userSelect: "none",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      '& [slot="description"]': {
-        display: "none"
-      },
-      "[data-invalid] &": {
-        "--border-width": "sizes.50",
-        "--border-color": "colors.critical.7"
-      }
-    },
-    triggerLabel: {
-      // *Magic*
-      // the trigger-label defines the overall width of the select,
-      // but since we position 2 buttons/icons next to it, we need to account for
-      // their width as well and reserve some space for them
-      // = label-button-gap + button-size + icon-size
-      // = 8px + 24px + 24px
-      // = 56px * 25 = 1400 token
-      "--button-safespace": "sizes.1400",
-      color: "neutral.12",
-      textAlign: "left",
-      marginRight: "var(--button-safespace)",
-      maxWidth: "100%",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      "&[data-placeholder]": {
-        opacity: 0.5
-      },
-      "[data-invalid] &": {
-        color: "critical.11"
-      }
-    },
-    // Popover
-    options: {
-      "--scrollbar-color": "colors.neutral.8",
-      "--scrollbar-bg": "colors.neutral.3",
-      bg: "bg",
-      borderRadius: "200",
-      boxShadow: "5",
-      minWidth: "var(--trigger-width)",
-      p: "200",
-      focusRing: "outside",
-      maxHeight: "40svh",
-      overflowY: "auto",
-      scrollbarWidth: "thin",
-      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)"
-    },
-    // Option group header
-    optionGroup: {
-      textStyle: "xs",
-      color: "neutral.11",
-      fontWeight: "600",
-      lineHeight: "350",
-      letterSpacing: "25",
-      textTransform: "uppercase",
-      p: "200",
-      borderBottom: "solid-25",
-      borderColor: "neutral.3",
-      mx: "-200",
-      mt: "200",
-      mb: "300"
-    },
-    // ListBoxItem
-    option: {
-      focusRing: "outside",
-      cursor: "menuitem",
-      color: "neutral.12",
-      textStyle: "sm",
-      p: "200",
-      borderRadius: "200",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      '&[aria-selected="true"]': {
-        bg: "primary.3"
-      },
-      '&[data-focused="true"]': {
-        bg: "primary.2"
-      },
-      '& [slot="label"]': {
-        display: "block"
-      },
-      '& [slot="description"]': {
-        display: "block",
-        color: "neutral.11",
-        textStyle: "xs"
-      },
-      "&[data-disabled='true']": {
-        layerStyle: "disabled"
-      }
-    }
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      sm: {
-        root: {},
-        trigger: {
-          h: "800",
-          px: "400",
-          textStyle: "sm"
-        }
-      },
-      md: {
-        root: {},
-        trigger: {
-          h: "1000",
-          px: "400",
-          textStyle: "md"
-        }
-      }
-      // Medium
-    },
-    // Visual style variants
-    variant: {
-      outline: {
-        root: {
-          bg: "primary.1",
-          "&:hover": {
-            bg: "primary.2"
-          }
-        },
-        trigger: {
-          "--border-width": "sizes.25",
-          "--border-color": "colors.neutral.7"
-        }
-      },
-      ghost: {
-        root: {
-          bg: "transparent",
-          "&:hover": {
-            bg: "primaryAlpha.2"
-          }
-        },
-        trigger: {
-          "--border-width": "sizes.25",
-          "--border-color": "transparent"
-        }
-      }
-    }
-  },
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "md",
-    variant: "outline"
-  }
-}), X = /* @__PURE__ */ t({
-  slots: [
-    "root",
-    "disclosure",
-    "trigger",
-    "panel",
-    "accordionTitle",
-    "headerContentRight"
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-accordion",
-  base: {
-    root: {
-      width: "100%"
-    },
-    disclosure: {
-      width: "100%"
-    },
-    trigger: {
-      fontSize: "var(--font-size)",
-      focusVisibleRing: "outside",
-      minHeight: "1200",
-      bg: "none",
-      flexGrow: 1,
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      width: "auto",
-      "& svg": {
-        width: "var(--width)",
-        height: "var(--height)",
-        rotate: "0deg",
-        transition: "rotate 200ms"
-      },
-      '&[aria-expanded="true"] svg': {
-        rotate: "90deg"
-      },
-      "&[disabled]": {
-        layerStyle: "disabled"
-      }
-    },
-    panel: {
-      paddingTop: "var(--padding-top)",
-      paddingBottom: "var(--padding-bottom)",
-      paddingLeft: "var(--padding-left)",
-      '&[aria-hidden="true"]': {
-        display: "none"
-      }
-    },
-    accordionTitle: {
-      fontWeight: "700"
-    }
-  },
-  variants: {
-    size: {
-      md: {
-        trigger: {
-          "--font-size": "fontSizes.500",
-          "& svg": {
-            "--width": "sizes.600",
-            "--height": "sizes.600"
-          }
-        },
-        panel: {
-          "--padding-top": "spacing.600",
-          "--padding-bottom": "spacing.800",
-          "--padding-left": "spacing.800"
-        }
-      },
-      sm: {
-        trigger: {
-          "--font-size": "fontSizes.400",
-          "& svg": {
-            "--width": "sizes.500",
-            "--height": "sizes.500"
-          }
-        },
-        panel: {
-          "--padding-top": "spacing.400",
-          "--padding-bottom": "spacing.600",
-          "--padding-left": "spacing.700"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), $ = /* @__PURE__ */ t({
-  slots: ["root", "tagList", "tag"],
-  // Unique class name prefix for the component
-  className: "nimbus-tag-group",
-  // Base styles applied to all instances of the component
-  base: {
-    root: { display: "flex", flexDirection: "column", gapY: "50" },
-    tagList: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "100"
-    },
-    tag: {
-      colorPalette: "primary",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      alignContent: "center",
-      gap: "100",
-      borderRadius: "200",
-      background: "colorPalette.3",
-      fontSize: "400",
-      lineHeight: "500",
-      focusVisibleRing: "outside",
-      "&[data-disabled='true'] &": {
-        layerStyle: "disabled",
-        pointerEvents: "none"
-      },
-      "&[data-selected='true']": {
-        background: "colorPalette.9",
-        color: "colorPalette.contrast",
-        cursor: "button"
-      },
-      "&[aria-selected='true']": {
-        cursor: "button"
-      },
-      "& [role='gridcell']": {
-        display: "inline-flex !important",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gapX: "100",
-        whiteSpace: "initial"
-      }
-    }
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      sm: {
-        tag: {
-          minH: "600",
-          paddingX: "200",
-          fontSize: "350",
-          lineHeight: "400"
-        }
-      },
-      // Small
-      md: {
-        tag: {
-          minH: "800",
-          paddingX: "200",
-          paddingY: "100"
-        }
-      },
-      // Medium
-      lg: {
-        tag: {
-          minH: "1000",
-          padding: "200"
-        }
-      }
-      // Large
-    }
-  },
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "lg"
-  }
-}), U = /* @__PURE__ */ t({
-  slots: ["root", "label", "track", "thumb"],
-  // Unique class name prefix for the component
-  className: "nimbus-switch",
-  base: {
-    root: {
-      colorPalette: "primary",
-      display: "inline-flex",
-      gap: "200",
-      alignItems: "center",
-      verticalAlign: "top",
-      cursor: "pointer",
-      borderRadius: "full",
-      "&[data-disabled='true']": {
-        layerStyle: "disabled",
-        pointerEvents: "none"
-      }
-    },
-    label: {
-      flexShrink: 0,
-      userSelect: "none",
-      color: "neutral.11",
-      fontSize: "var(--label-font-size)"
-    },
-    track: {
-      colorPalette: "neutral",
-      focusRing: "outside",
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      flexShrink: 0,
-      width: "var(--track-width)",
-      height: "var(--track-height)",
-      borderRadius: "calc(var(--track-height) / 2)",
-      backgroundColor: "colorPalette.5",
-      transition: "background-color 0.2s",
-      "&[data-selected='true']": {
-        colorPalette: "primary",
-        backgroundColor: "colorPalette.9"
-      },
-      "&:hover": {
-        backgroundColor: "colorPalette.7",
-        "&[data-selected='true']": {
-          backgroundColor: "colorPalette.10"
-        }
-      }
-    },
-    thumb: {
-      position: "absolute",
-      borderRadius: "full",
-      border: "solid-50",
-      borderColor: "primary.9",
-      backgroundColor: "neutral.1",
-      transition: "all 0.2s",
-      boxSize: "var(--thumb-size)",
-      "&[data-selected='false']": {
-        left: "0"
-      },
-      "&[data-selected='true']": {
-        left: "calc(100% - var(--thumb-size))"
-      }
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        track: {
-          "--track-height": "sizes.400",
-          "--track-width": "sizes.700"
-        },
-        thumb: {
-          "--thumb-size": "sizes.400"
-        },
-        label: {
-          "--label-font-size": "fontSizes.350"
-        }
-      },
-      md: {
-        track: {
-          "--track-height": "sizes.600",
-          "--track-width": "sizes.1100"
-        },
-        thumb: {
-          "--thumb-size": "sizes.600"
-        },
-        label: {
-          "--label-font-size": "fontSizes.400"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), q = /* @__PURE__ */ t({
-  // Unique class name prefix for the component
-  className: "nimbus-number-input",
-  // Define the slots for this multi-part component
-  slots: ["root", "input", "incrementButton", "decrementButton"],
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-block",
-      position: "relative",
-      // Apply input hover styles when buttons are hovered
-      "&:has(button:hover) input": {
-        backgroundColor: "primary.2"
-      }
-    },
-    input: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      display: "block",
-      borderRadius: "200",
-      colorPalette: "neutral",
-      focusVisibleRing: "outside",
-      bg: "transparent",
-      outline: "none",
-      appearance: "textfield",
-      width: "full",
-      _placeholder: {
-        opacity: 0.5,
-        color: "currentColor"
-      },
-      _disabled: {
-        layerStyle: "disabled",
-        bg: "neutral.3"
-      },
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7",
-        color: "critical.11"
-      }
-    },
-    incrementButton: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      w: 600,
-      h: "50%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "button",
-      bg: "transparent",
-      _hover: {
-        bg: "primary.2"
-      },
-      _active: {
-        bg: "neutral.4"
-      },
-      _disabled: {
-        opacity: 0.5,
-        cursor: "not-allowed"
-      },
-      "& svg": {
-        fill: "primary.9"
-      },
-      borderTopRightRadius: "200",
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7"
-      }
-    },
-    decrementButton: {
-      "--border-width": "sizes.25",
-      "--border-color": "colors.neutral.7",
-      w: 600,
-      h: "50%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "button",
-      bg: "transparent",
-      _hover: {
-        bg: "primary.2"
-      },
-      _active: {
-        bg: "neutral.4"
-      },
-      _disabled: {
-        opacity: 0.5,
-        cursor: "not-allowed"
-      },
-      "& svg": {
-        fill: "primary.9"
-      },
-      borderBottomRightRadius: "200",
-      "&[data-invalid='true']": {
-        "--border-color": "colors.critical.7"
-      }
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        input: {
-          h: 800,
-          textStyle: "sm",
-          px: 300,
-          paddingRight: 800
-        }
-      },
-      md: {
-        input: {
-          h: 1e3,
-          textStyle: "md",
-          px: 400,
-          paddingRight: 800
-        }
-      }
-    },
-    variant: {
-      solid: {
-        root: {
-          // Apply input hover styles when buttons are hovered for solid variant
-          "&:has(button:hover) input": {
-            backgroundColor: "primary.2"
-          }
-        },
-        input: {
-          "&[data-invalid='true']": {
-            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-            "--border-width": "sizes.50"
-          },
-          boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-          backgroundColor: "neutral.1",
-          _hover: {
-            backgroundColor: "primary.2"
-          }
-        },
-        incrementButton: {
-          "&[data-invalid='true']": {
-            borderTop: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          borderTop: "var(--border-width) solid var(--border-color)",
-          borderRight: "var(--border-width) solid var(--border-color)",
-          borderLeft: "var(--border-width) solid var(--border-color)",
-          // Half-pixel shadow to create the illusion of a complete border when paired with the other button
-          boxShadow: "inset 0 -0.5px 0 0 var(--border-color)",
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        },
-        decrementButton: {
-          "&[data-invalid='true']": {
-            borderBottom: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          borderBottom: "var(--border-width) solid var(--border-color)",
-          borderRight: "var(--border-width) solid var(--border-color)",
-          borderLeft: "var(--border-width) solid var(--border-color)",
-          // Half-pixel shadow to create the illusion of a complete border when paired with the other button
-          boxShadow: "inset 0 0.5px 0 0 var(--border-color)",
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        }
-      },
-      ghost: {
-        root: {
-          // Apply input hover styles when buttons are hovered for ghost variant
-          "&:has(button:hover) input": {
-            backgroundColor: "primary.2"
-          }
-        },
-        input: {
-          "&[data-invalid='true']": {
-            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-            "--border-width": "sizes.50"
-          },
-          _hover: {
-            backgroundColor: "primary.2"
-          }
-        },
-        incrementButton: {
-          "&[data-invalid='true']": {
-            borderTop: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        },
-        decrementButton: {
-          "&[data-invalid='true']": {
-            borderBottom: "2px solid var(--border-color)",
-            borderRight: "2px solid var(--border-color)"
-          },
-          _hover: {
-            backgroundColor: "primaryAlpha.3"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
-}), J = /* @__PURE__ */ t({
-  slots: [
-    "root",
-    "value",
-    "buttonGroup",
-    "popover",
-    "multiSelectInput",
-    "options",
-    "optionGroup",
-    "option",
-    "optionIndicator",
-    "optionContent"
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-combobox",
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      colorPalette: "primary",
-      focusRing: "outside",
-      display: "inline-flex",
-      position: "relative",
-      alignSelf: "flex-start",
-      maxWidth: "100%",
-      borderRadius: "200",
-      _hover: {
-        bg: "primary.2"
-      },
-      "&[data-disabled='true']": {
-        layerStyle: "disabled",
-        focusRing: "none",
-        bg: "neutral.3",
-        "& input, & button": {
-          // if you set 'pointer-events: none' on an element, it does not display a cursor,
-          // so in order to display `cursor: not-allowed`, we must set pointerEvents: none on the interactive children
-          pointerEvents: "none!"
-        }
-      },
-      "& input": {
-        cursor: "text",
-        _hover: {
-          bg: "primary.2"
-        },
-        _placeholder: { opacity: 0.5 }
-      },
-      "& [data-placeholder]": {
-        opacity: 0.5
-      }
-    },
-    value: {
-      display: "flex",
-      focusRing: "outside",
-      alignItems: "flex-start",
-      pr: "1600",
-      pl: "400",
-      py: "100",
-      borderRadius: "200",
-      color: "neutral.12",
-      maxWidth: "100%",
-      textAlign: "left",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      _disabled: { pointerEvents: "none" },
-      '[data-invalid="true"] &': {
-        "--border-width": "sizes.50",
-        "--border-color": "colors.critical.7",
-        color: "critical.11"
-      },
-      '& button[slot="remove"]': {
-        _expanded: {
-          bg: "colorPalette.3"
-        }
-      }
-    },
-    buttonGroup: {
-      position: "absolute",
-      display: "inline-flex",
-      top: 0,
-      bottom: 0,
-      right: 300,
-      my: "auto"
-    },
-    popover: {
-      bg: "bg",
-      borderRadius: "200",
-      boxShadow: "5"
-    },
-    multiSelectInput: {
-      "& input": {
-        py: "300",
-        px: "400",
-        focusRing: "none",
-        borderBottom: "solid 1px",
-        borderBottomColor: "neutral.3",
-        bg: "transparent",
-        w: "100%",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        fontSize: "350",
-        fontWeight: "400",
-        lineHeight: "400",
-        _placeholder: { opacity: 0.5 }
-      }
-    },
-    options: {
-      ...i.base?.options,
-      gap: "100"
-    },
-    optionGroup: {
-      ...i.base?.optionGroup
-    },
-    option: {
-      ...i.base?.option,
-      whiteSpace: "wrap"
-    },
-    optionIndicator: {
-      // make sure option is aligned with the first line of text (using lh units)
-      height: "max(1lh, {sizes.600})",
-      width: "max(1lh, {sizes.600})",
-      display: "flex",
-      alignItems: "center",
-      "& span[data-selected]": {
-        ...s.base?.indicator,
-        ...s.variants?.size.md.indicator
-      }
-    },
-    optionContent: {
-      ...s.base?.label,
-      whiteSpace: "wrap",
-      width: "calc(100% - {sizes.600})",
-      display: "inline-block"
-    }
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      // Small
-      sm: {
-        value: {
-          minH: "800",
-          textStyle: "sm"
-        }
-      },
-      // Medium
-      md: {
-        value: {
-          minH: "1000",
-          textStyle: "md"
-        }
-      }
-    },
-    // Visual style variants
-    variant: {
-      solid: {
-        root: {
-          width: "7200"
-        },
-        value: {
-          ...i.variants?.variant.outline.trigger,
-          width: "100%"
-        }
-      },
-      ghost: {
-        root: {
-          ...i.variants?.variant.ghost.root,
-          maxW: "7200"
-        },
-        value: {
-          ...i.variants?.variant.ghost.trigger,
-          bg: "transparent"
-        }
-      }
-    },
-    selectionMode: {
-      multiple: {
-        options: {
-          boxShadow: "none",
-          px: "200",
-          my: "200",
-          minW: "unset",
-          "& section:first-of-type > header": {
-            mt: 0
-          }
-        },
-        option: {
-          colorPalette: "primary",
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "center",
-          position: "relative",
-          cursor: "pointer",
-          gap: "200",
-          mb: "var(--focus-ring-width)",
-          "&:last-of-type": {
-            mb: 0
-          },
-          '&[aria-selected="true"]': {
-            bg: "unset"
-          },
-          '&[data-focused="true"]': {
-            // TODO: can't use focusRing prop, find other solution (helper, util, etc.)
-            outlineWidth: "var(--focus-ring-width)",
-            outlineColor: "var(--focus-ring-color)",
-            outlineStyle: "var(--focus-ring-style)",
-            bg: "unset"
-          },
-          _hover: {
-            bg: "primary.2"
-          }
-        }
-      },
-      single: {},
-      none: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "solid",
-      selectionMode: "multiple",
-      css: {
-        popover: {
-          width: "var(--trigger-width)"
-        }
-      }
-    },
-    {
-      variant: "solid",
-      selectionMode: "single",
-      css: {
-        root: {
-          "&:has(button:hover)": {
-            "& input": {
-              bg: "primary.2"
-            }
-          }
-        },
-        options: {
-          width: "var(--trigger-width)"
-        }
-      }
-    },
-    {
-      variant: "ghost",
-      selectionMode: "multiple",
-      css: {
-        popover: {
-          minW: "max(var(--trigger-width), {sizes.2000})",
-          maxW: "max(var(--trigger-width), {sizes.7200})"
-        }
-      }
-    },
-    {
-      variant: "ghost",
-      selectionMode: "single",
-      css: {
-        value: {
-          flex: "1 1 auto"
-        },
-        options: {
-          minW: "max(var(--trigger-width), {sizes.2000})",
-          maxW: "max(var(--trigger-width), {sizes.7200})"
-        }
-      }
-    }
-  ],
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "md",
-    variant: "solid",
-    selectionMode: "single"
-  }
-}), K = /* @__PURE__ */ t({
-  slots: [
-    "root",
-    "header",
-    "grids",
-    "monthTitle",
-    "grid",
-    "gridHeader",
-    "headerCell",
-    "gridBody",
-    "bodyCell"
-  ],
-  className: "nimbus-calendar",
-  base: {
-    // the container element
-    root: {
-      display: "inline-block",
-      maxWidth: "100%"
-    },
-    header: {
-      height: "1200",
-      p: "200",
-      mb: "300",
-      borderBottom: "solid-25",
-      borderColor: "neutral.3"
-    },
-    // the container contianing the month(s) grid(s)
-    grids: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "800",
-      mx: "200",
-      maxWidth: "full"
-    },
-    // Month title above each grid
-    monthTitle: {
-      textAlign: "center",
-      fontSize: "400",
-      fontWeight: "600",
-      color: "neutral.11",
-      mb: "300",
-      px: "200"
-    },
-    // A single grid (<table>) containing a months days
-    grid: {
-      w: "full",
-      minW: "fit-content",
-      flex: "1 1 auto"
-    },
-    // Weekday Row
-    gridHeader: {},
-    // Weekday Item
-    headerCell: {
-      p: "200",
-      pb: "300",
-      textAlign: "center",
-      color: "neutral.9",
-      fontSize: "300",
-      lineHeight: "350",
-      fontWeight: "500"
-    },
-    gridBody: {},
-    // Day Item
-    bodyCell: {
-      cursor: "pointer",
-      p: "200",
-      minW: "1400",
-      borderRadius: "200",
-      fontSize: "350",
-      lineHeight: "500",
-      fontWeight: "400",
-      transitionProperty: "all",
-      transitionDuration: "fastest",
-      textAlign: "center",
-      color: "neutral.12",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      mb: "200",
-      focusRing: "outside",
-      "&[aria-disabled=true]": {
-        layerStyle: "disabled"
-      },
-      "&[data-hovered=true]": {
-        bg: "primary.3"
-      },
-      "&[data-today=true]": {
-        bg: "neutral.3"
-      },
-      "&[data-selected=true]": {
-        bg: "primary.9",
-        color: "primary.contrast"
-      }
-    }
-  }
-}), Q = /* @__PURE__ */ t({
-  slots: [
-    "root",
-    "header",
-    "grids",
-    "monthTitle",
-    "grid",
-    "gridHeader",
-    "headerCell",
-    "gridBody",
-    "bodyCell"
-  ],
-  className: "nimbus-range-calendar",
-  base: {
-    // the container element
-    root: {
-      display: "inline-block",
-      maxWidth: "100%"
-    },
-    header: {
-      height: "1200",
-      p: "200",
-      mb: "300",
-      borderBottom: "solid-25",
-      borderColor: "neutral.3"
-    },
-    // the container containing the month(s) grid(s)
-    grids: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "800",
-      mx: "200",
-      maxWidth: "full"
-    },
-    // Month title above each grid
-    monthTitle: {
-      textAlign: "center",
-      fontSize: "400",
-      fontWeight: "600",
-      color: "neutral.11",
-      mb: "300",
-      px: "200"
-    },
-    // A single grid (<table>) containing a months days
-    grid: {
-      w: "full",
-      minW: "fit-content",
-      flex: "1 1 auto"
-    },
-    // Weekday Row
-    gridHeader: {},
-    // Weekday Item
-    headerCell: {
-      p: "200",
-      pb: "300",
-      textAlign: "center",
-      color: "neutral.9",
-      fontSize: "300",
-      lineHeight: "350",
-      fontWeight: "500"
-    },
-    gridBody: {},
-    // Day Item
-    bodyCell: {
-      cursor: "pointer",
-      p: "200",
-      minW: "1400",
-      fontSize: "350",
-      lineHeight: "500",
-      fontWeight: "400",
-      textAlign: "center",
-      color: "neutral.12",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      mb: "200",
-      focusRing: "outside",
-      /** today cell (lowest priority, styling-wise) */
-      "&[data-today=true]": {
-        bg: "neutral.3",
-        borderRadius: "200"
-      },
-      /** hovered or keyboard-focused cell */
-      "&[data-hovered='true'], &[data-focused='true']": {
-        bg: "primary.3",
-        borderRadius: "200"
-      },
-      /** selected cell (any cell in the range) */
-      "&[data-selected='true']": {
-        bg: "primary.3",
-        borderRadius: "0"
-      },
-      /** bodyCell within first column */
-      "[role='gridcell']:first-child &": {
-        borderLeftRadius: "200"
-      },
-      /** bodyCell within last column */
-      "[role='gridcell']:last-child &": {
-        borderRightRadius: "200"
-      },
-      /** start- & end-cell (shared styling) */
-      "&[data-selection-start='true'], &[data-selection-end=true]": {
-        bg: "primary.9",
-        color: "primary.contrast"
-      },
-      /** start selection cell (only gets a border-radius on the left) */
-      "&[data-selection-start='true']": {
-        borderLeftRadius: "200"
-      },
-      /** end selection cell (only gets a border-radius on the right)*/
-      "&[data-selection-end=true]": {
-        borderRightRadius: "200"
-      },
-      /** BUT: if start = end cell, border-radius on all sides */
-      "&[data-selection-end=true]&[data-selection-start='true']": {
-        borderRadius: "200"
-      },
-      /** disabled cell (must still be focusable) */
-      "&[aria-disabled=true]": {
-        layerStyle: "disabled"
-      }
-    }
-  }
-}), Z = /* @__PURE__ */ t({
-  // Unique class name prefix for the component
-  className: "nimbus-date-input",
-  slots: ["root", "segmentGroup", "segment"],
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-block"
-    },
-    segmentGroup: {
-      display: "flex",
-      borderRadius: "200",
-      bg: "transparent",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      width: "full",
-      alignItems: "center",
-      userSelect: "none",
-      "&[data-focus-within='true']": {
-        // TODO: can't use focusRing prop, find other solution (helper, util, etc.)
-        outlineWidth: "var(--focus-ring-width)",
-        outlineColor: "var(--focus-ring-color)",
-        outlineStyle: "var(--focus-ring-style)",
-        outlineOffset: "var(--focus-ring-offset)"
-      },
-      "&[data-invalid='true']": {
-        "--border-width": "sizes.50",
-        "--border-color": "colors.critical.7",
-        color: "critical.11"
-      },
-      "&[data-disabled='true']": {
-        layerStyle: "disabled",
-        bg: "neutral.3"
-      }
-    },
-    segment: {
-      fontVariantNumeric: "tabular-nums",
-      outline: "0",
-      px: "50",
-      borderRadius: "50",
-      "&:empty": {
-        border: "solid-25"
-      },
-      "&[data-focused='true']": {
-        bg: "primary.10",
-        color: "primary.contrast"
-      },
-      "&[data-placeholder='true']:not([data-focused='true']), &[data-type='literal']": {
-        opacity: 0.5
-      },
-      /**
-       * The first and last segment contains a hidden character for screen readers
-       * that indicates the reading direction. Since this character is
-       * inside a segment element, it creates unwanted padding. This CSS
-       * removes the extra padding and aligns the text to match a regular
-       * TextInput's text position.
-       */
-      "&[data-type='literal']&:first-of-type, &[data-type='literal']&:last-of-type": {
-        px: "0",
-        ml: "-50"
-      },
-      "&[data-type='day']": {
-        // for reference
-      },
-      "&[data-type='month']": {
-        // for reference
-      },
-      "&[data-type='year']": {
-        // for reference
-      }
-    }
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      sm: {
-        segmentGroup: {
-          h: 800,
-          textStyle: "sm",
-          px: 300
-        }
-      },
-      md: {
-        segmentGroup: {
-          h: 1e3,
-          textStyle: "md",
-          px: 400
-        }
-      }
-    },
-    variant: {
-      solid: {
-        segmentGroup: {
-          "--border-width": "sizes.25",
-          "--border-color": "colors.neutral.7",
-          backgroundColor: "neutral.1",
-          _hover: {
-            backgroundColor: "primary.2"
-          }
-        }
-      },
-      ghost: {
-        segmentGroup: {
-          _hover: {
-            backgroundColor: "primary.2"
-          }
-        }
-      },
-      plain: {
-        segmentGroup: {
-          px: "0",
-          outline: "none!",
-          boxShadow: "none!"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
-}), ee = /* @__PURE__ */ t({
-  // Unique class name prefix for the component
-  className: "nimbus-date-picker",
-  slots: [
-    "root",
-    "group",
-    "trigger",
-    "popover",
-    "calendar",
-    "calendarHeader",
-    "calendarGrid",
-    "calendarCell"
-  ],
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-block",
-      overflow: "hidden"
-    },
-    group: {
-      position: "relative"
-    },
-    trigger: {
-      position: "absolute",
-      right: "400",
-      top: "100"
-    },
-    popover: {
-      bg: "neutral.1",
-      boxShadow: "4",
-      borderRadius: "300",
-      overflow: "auto",
-      "&[data-entering]": {
-        animationName: "fade-in, scale-in",
-        animationDuration: "fast"
-      },
-      "&[data-exiting]": {
-        animationName: "fade-out, scale-out",
-        animationDuration: "faster"
-      }
-    }
-  },
-  variants: {
-    // Size variants from smallest to largest
-    size: {
-      sm: {
-        group: {
-          "& .nimbus-date-input__root": {
-            mr: "1400"
-          }
-        },
-        trigger: {
-          top: "50"
-        }
-      },
-      md: {
-        group: {
-          "& .nimbus-date-input__root": {
-            // combine 2 tokens cause there is no token for this crooked value
-            mr: "calc({spacing.1600} + {spacing.200})"
-          }
-        },
-        trigger: {
-          top: "100"
-        }
-      }
-    },
-    variant: {
-      // those need to exist, as the date-input has and needs those variants
-      solid: {},
-      ghost: {}
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), te = /* @__PURE__ */ t({
-  className: "nimbus-date-range-picker",
-  slots: [
-    "root",
-    "group",
-    "trigger",
-    "popover",
-    "calendar",
-    "calendarHeader",
-    "calendarGrid",
-    "calendarCell"
-  ],
-  base: {
-    root: {
-      display: "inline-block"
-    },
-    group: {
-      "--border-width": "{sizes.25}",
-      "--border-color": "{colors.neutral.7}",
-      // ========================================
-      // BASE LAYOUT & VISUAL PROPERTIES
-      // ========================================
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-      borderRadius: "200",
-      bg: "neutral.1",
-      px: "300",
-      gap: 0,
-      position: "relative",
-      // Ensure stacking context for border
-      // ========================================
-      // INTERACTIVE STATES
-      // ========================================
-      _hover: {
-        bg: "primary.2"
-      },
-      // Focus ring with transparent gap
-      _focusWithin: {
-        outlineWidth: "var(--focus-ring-width)",
-        outlineColor: "var(--focus-ring-color)",
-        outlineStyle: "var(--focus-ring-style)",
-        outlineOffset: "var(--focus-ring-offset)"
-      },
-      // ========================================
-      // DATA STATES
-      // ========================================
-      // Invalid state styling
-      "&[data-invalid='true']": {
-        "--border-width": "{sizes.50}",
-        "--border-color": "{colors.critical.7}",
-        color: "critical.11",
-        alignItems: "center"
-      }
-    },
-    trigger: {
-      position: "absolute",
-      right: "400",
-      top: "100"
-    },
-    popover: {
-      bg: "neutral.1",
-      boxShadow: "4",
-      borderRadius: "300",
-      overflow: "auto",
-      "&[data-entering]": {
-        animationName: "fade-in, scale-in",
-        animationDuration: "fast"
-      },
-      "&[data-exiting]": {
-        animationName: "fade-out, scale-out",
-        animationDuration: "faster"
-      }
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        group: {
-          height: "800",
-          // Match DateInput sm height
-          pr: "calc({spacing.1400} + {spacing.400})"
-          // Smaller right padding for sm size
-        },
-        trigger: {
-          top: "50"
-        }
-      },
-      md: {
-        group: {
-          height: "1000",
-          // Match DateInput md height
-          pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})"
-          // Right padding for trigger buttons
-        },
-        trigger: {
-          top: "100"
-        }
-      }
-    },
-    variant: {
-      solid: {},
-      ghost: {
-        group: {
-          bg: "transparent",
-          px: "300",
-          _hover: {
-            bg: "primary.2"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid"
-  }
-}), oe = /* @__PURE__ */ p({
-  // Available slots for the DataTable component
-  slots: [
-    "root",
-    "table",
-    "header",
-    "column",
-    "body",
-    "row",
-    "cell",
-    "footer",
-    "selectionCell",
-    "detailsButton",
-    "expandButton",
-    "nestedIcon",
-    "headerSortIcon",
-    "columnResizer"
-  ],
-  className: "nimbus-data-table",
-  base: {
-    root: {
-      colorPalette: "slate",
-      display: "block",
-      borderRadius: "8px",
-      border: "1px solid {colors.neutral.3}",
-      boxShadow: "1",
-      overflow: "auto",
-      contain: "layout style",
-      width: "100%",
-      // CSS custom properties for pinned row shadows
-      "--pinned-shadow-left": "inset 2px 0 0 {colors.neutral.7}",
-      "--pinned-shadow-right": "inset -2px 0 0 {colors.neutral.7}",
-      "--pinned-shadow-top": "inset 0 2px 0 {colors.neutral.7}",
-      "--pinned-shadow-bottom": "inset 0 -2px 0 {colors.neutral.7}",
-      "& .react-aria-Cell": {
-        paddingTop: "400",
-        paddingBottom: "400",
-        paddingLeft: "600",
-        paddingRight: "600",
-        color: "neutral.11",
-        focusRing: "outside",
-        hyphens: "auto",
-        "&[data-slot='expand']": {
-          padding: 0
-        },
-        "&[data-slot='pin-row-cell']": {
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        "& .nimbus-table-cell-copy-button": {
-          display: "none"
-        },
-        "& .nimbus-table-cell-pin-button": {
-          display: "none"
-        },
-        "& .nimbus-table-cell-pin-button-pinned": {
-          display: "inherit"
-        }
-      },
-      "& .data-table-row": {
-        borderBottom: "1px solid {colors.neutral.3}",
-        focusRing: "outside",
-        "& td, div": {
-          userSelect: "text"
-        },
-        "&:last-child": {
-          borderBottom: "none"
-        },
-        _hover: {
-          backgroundColor: "{colors.primary.3}",
-          transition: "background-color 100ms ease",
-          transform: "translate3d(0, 0, 0)",
-          "& .data-table-row-details-button": {
-            opacity: 1
-          },
-          "& .nimbus-table-cell-copy-button": {
-            display: "inherit"
-          },
-          "& .nimbus-table-cell-pin-button": {
-            display: "inherit"
-          }
-        },
-        "& .data-table-row-details-button": {
-          opacity: 0
-        },
-        "& .data-table-row-details-button:focus": {
-          opacity: 1
-        }
-      },
-      "& .data-table-row[data-selected='true']": {
-        background: "{colors.primary.4}"
-      },
-      "& .data-table-row[data-disabled='true']": {
-        // layerStyle: "disabled",
-        opacity: 0.8,
-        cursor: "not-allowed"
-      },
-      "& .data-table-row-pinned": {
-        boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right)",
-        "&.data-table-row-pinned-first": {
-          boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-top)"
-        },
-        "&.data-table-row-pinned-last": {
-          boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-bottom)"
-        },
-        "&.data-table-row-pinned-single": {
-          boxShadow: "var(--pinned-shadow-left), var(--pinned-shadow-right), var(--pinned-shadow-top), var(--pinned-shadow-bottom)"
-        }
-      },
-      "& .data-table-header": {
-        background: "colorPalette.2",
-        color: "colorPalette.11",
-        borderBottom: "1px solid {colors.neutral.3}",
-        lineHeight: "400",
-        fontWeight: "500",
-        textStyle: "sm",
-        fontSize: "300",
-        height: "1000",
-        "& .data-table-column-divider": {
-          display: "none",
-          position: "absolute",
-          right: 0,
-          top: "10%",
-          bottom: "10%",
-          height: "80%",
-          width: "1px",
-          pointerEvents: "none"
-        },
-        _hover: {
-          "& .data-table-column-divider": {
-            display: "inherit"
-          },
-          "& tr th:last-of-type .data-table-column-divider": {
-            display: "none"
-          }
-        }
-      }
-      // Multiline header truncation using webkit line clamp
-    },
-    table: {
-      width: "fit-content",
-      tableLayout: "fixed"
-    },
-    header: {
-      background: "colorPalette.2",
-      color: "colorPalette.11",
-      borderBottom: "1px solid {colors.neutral.3}",
-      lineHeight: "400",
-      fontWeight: "500",
-      textStyle: "sm",
-      fontSize: "300",
-      height: "1000",
-      "&[data-sticky]": {
-        position: "sticky",
-        top: 0,
-        zIndex: 10
-      },
-      "& span[data-multiline-header]": {
-        overflow: "hidden",
-        lineHeight: "450",
-        wordBreak: "break-word",
-        whiteSpace: "normal",
-        textOverflow: "ellipsis",
-        textAlign: "left",
-        display: "-webkit-box",
-        WebkitLineClamp: 2,
-        WebkitBoxOrient: "vertical"
-      },
-      "& .data-table-column-divider": {
-        display: "none",
-        position: "absolute",
-        right: 0,
-        top: "10%",
-        bottom: "10%",
-        height: "80%",
-        width: "1px",
-        pointerEvents: "none"
-      },
-      _hover: {
-        "& .data-table-column-divider": {
-          display: "inherit"
-        },
-        "& tr th:last-of-type .data-table-column-divider": {
-          display: "none"
-        }
-      }
-    },
-    column: {
-      textAlign: "right",
-      position: "relative",
-      lineHeight: "450",
-      h: "100%",
-      "&:focus": {
-        outlineWidth: "var(--focus-ring-width)",
-        outlineColor: "var(--focus-ring-color)",
-        outlineStyle: "var(--focus-ring-style)",
-        outlineOffset: "-2px",
-        borderRadius: "2px"
-      },
-      "& > .nimbus-data-table__column-container": {
-        paddingTop: "100",
-        paddingBottom: "100",
-        paddingLeft: "600",
-        paddingRight: "600",
-        display: "flex",
-        alignItems: "center",
-        h: "100%",
-        // https://react-spectrum.adobe.com/react-aria/Table.html#width-values
-        "&:focus": {
-          outlineWidth: "var(--focus-ring-width)",
-          outlineColor: "var(--focus-ring-color)",
-          outlineStyle: "var(--focus-ring-style)",
-          outlineOffset: "-2px",
-          borderRadius: "2px"
-        },
-        "& > span:not(:first-of-type)": {
-          flexShrink: 0
-        }
-      },
-      "&.selection-column-header, &.expand-column-header": {
-        cursor: "default",
-        paddingTop: "100",
-        paddingBottom: "100",
-        paddingLeft: "600",
-        paddingRight: "600",
-        "&:hover": {
-          backgroundColor: "transparent"
-        }
-      },
-      "&.expand-column-header": {
-        padding: "0"
-      },
-      "&[aria-sort]": {
-        fontWeight: 600,
-        cursor: "pointer",
-        "&[aria-sort='none']:hover": {
-          "& .nimbus-data-table__headerSortIcon > svg": {
-            display: "inherit"
-          }
-        }
-      }
-    },
-    body: {},
-    row: {
-      position: "relative",
-      borderBottom: "1px solid {colors.neutral.3}",
-      focusRing: "outside",
-      "&:hover:not([data-nested-row-expanded])": {
-        backgroundColor: "{colors.primary.3}",
-        transition: "background-color 200ms ease",
-        transform: "translate3d(0, 0, 0)",
-        "& .nimbus-data-table__detailsButton": {
-          opacity: 1
-        }
-      },
-      "& td, div": {
-        userSelect: "none"
-      },
-      "&:last-child": {
-        borderBottom: "none"
-      },
-      "&[data-clickable='true']": {
-        cursor: "pointer"
-      },
-      "&[data-selected='true']": {
-        background: "{colors.primary.4}"
-      },
-      "&[data-disabled='true']": {
-        // layerStyle: "disabled",
-        opacity: 0.8,
-        cursor: "not-allowed"
-      },
-      "&[data-nested-row-expanded='false']": {
-        display: "none"
-      }
-    },
-    cell: {
-      paddingTop: "400",
-      paddingBottom: "400",
-      paddingLeft: "600",
-      paddingRight: "600",
-      color: "neutral.11",
-      focusRing: "outside",
-      hyphens: "auto",
-      height: "100%",
-      _hover: {
-        "& .nimbus-table-cell-copy-button:not([data-disabled='true'])": {
-          display: "inherit"
-        }
-      },
-      "&[data-slot='expand']": {
-        padding: 0
-      },
-      "& .nimbus-table-cell-copy-button": {
-        display: "none",
-        ml: "100"
-      },
-      "&[data-nested-cell]": {
-        boxShadow: "inset 2px 0 0 {colors.primary.10}"
-      }
-    },
-    footer: {
-      width: "100%"
-    },
-    selectionCell: {},
-    detailsButton: {
-      margin: "auto",
-      colorPalette: "primary",
-      opacity: 0,
-      focusRing: "outside",
-      _focus: {
-        opacity: 1
-      },
-      "&[data-disabled='true']": {
-        opacity: 0
-      }
-    },
-    nestedIcon: {},
-    headerSortIcon: {
-      transition: "transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1)",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      marginLeft: "6px",
-      width: "16px",
-      height: "16px",
-      willChange: "opacity, color, transform",
-      color: "neutral.10",
-      // Only hide the svg so that the sort icon appearing does not cause layout shift
-      "& > svg": { display: "none" },
-      "&[data-sort-active='true']": {
-        color: "neutral.11",
-        "& > svg": { display: "inherit" }
-      },
-      "&[data-sort-direction='ascending']": {
-        transform: "rotate(180deg)"
-      }
-    },
-    columnResizer: {
-      width: "150",
-      height: "100%",
-      position: "absolute",
-      right: 0,
-      top: 0,
-      cursor: "col-resize",
-      transition: "background 100ms",
-      background: "transparent",
-      outline: "none",
-      zIndex: 2,
-      "&:hover": {
-        background: "var(--focus-ring-color)"
-      },
-      "&[data-resizing='true']": {
-        background: "{colors.primary}"
-      },
-      "&[data-focused='true']": {
-        outlineWidth: "var(--focus-ring-width)",
-        outlineColor: "var(--focus-ring-color)",
-        outlineStyle: "var(--focus-ring-style)"
-      }
-    }
-  },
-  // Variants for different states
-  variants: {
-    truncated: {
-      true: {
-        root: {
-          "& .truncated-cell": {
-            maxWidth: "200px",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          }
-        }
-      }
-    },
-    density: {
-      default: {
-        cell: {
-          paddingTop: "400",
-          paddingBottom: "400"
-        }
-      },
-      condensed: {
-        cell: {
-          paddingTop: "300",
-          paddingBottom: "300"
-        }
-      }
-    }
-  }
-}), re = /* @__PURE__ */ t({
-  className: "nimbus-progress-bar",
-  slots: ["root", "track", "fill", "label", "value"],
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      position: "relative",
-      width: "100%",
-      display: "flex",
-      flexDirection: "column",
-      gap: "200"
-    },
-    track: {
-      backgroundColor: "var(--progress-bar-track-bg)",
-      borderRadius: "var(--progress-bar-radius)",
-      overflow: "hidden",
-      position: "relative",
-      width: "100%",
-      height: "var(--progress-bar-height)"
-    },
-    fill: {
-      animation: "var(--progress-bar-animation)",
-      bgImage: "linear-gradient(90deg, {colors.colorPalette.6}, {colors.colorPalette.9}, {colors.colorPalette.6})",
-      backgroundSize: "200% 100%",
-      height: "100%",
-      borderRadius: "var(--progress-bar-radius)",
-      transitionProperty: "width",
-      transitionDuration: ".3s",
-      transitionTimingFunction: "ease-in-smooth"
-    },
-    label: {
-      color: "var(--progress-bar-text-color)",
-      fontSize: "var(--progress-bar-font-size)",
-      lineHeight: "var(--progress-bar-line-height)"
-    },
-    value: {
-      color: "var(--progress-bar-text-color)",
-      fontSize: "var(--progress-bar-font-size)",
-      lineHeight: "var(--progress-bar-line-height)"
-    }
-  },
-  // Available variants for customizing the component's appearance
-  variants: {
-    size: {
-      "2xs": {
-        root: {
-          "--progress-bar-radius": "{radii.300}",
-          "--progress-bar-font-size": "{fontSizes.350}",
-          "--progress-bar-height": "{sizes.300}",
-          "--progress-bar-line-height": "{fontSizes.500}"
-        }
-      },
-      md: {
-        root: {
-          "--progress-bar-radius": "{radii.600}",
-          "--progress-bar-font-size": "{fontSizes.400}",
-          "--progress-bar-height": "{sizes.600}",
-          "--progress-bar-line-height": "{fontSizes.600}"
-        }
-      }
-    },
-    isDynamic: {
-      true: {
-        fill: {
-          "--progress-bar-animation": "gradient-shimmer 4s ease-in-out infinite",
-          "&[data-complete='true']": {
-            "--progress-bar-animation": "none"
-          }
-        }
-      }
-    },
-    isIndeterminate: {
-      true: {
-        fill: {
-          "--progress-bar-animation": "progress-indeterminate 2s ease-in-out infinite",
-          width: "40% !important"
-        }
-      }
-    },
-    variant: {
-      solid: {
-        root: {
-          "--progress-bar-text-color": "{colors.neutral.12}",
-          "--progress-bar-track-bg": "{colors.neutralAlpha.3}"
-        }
-        // Uses the current default styling (gradient fill)
-      },
-      contrast: {
-        root: {
-          "--progress-bar-text-color": "{colors.colorPalette.contrast}",
-          "--progress-bar-track-bg": "{colors.colorPalette.contrast/15}"
-        },
-        fill: {
-          bgImage: "linear-gradient(90deg, {colors.colorPalette.contrast/25}, {colors.colorPalette.contrast}, {colors.colorPalette.contrast/25})"
-        }
-      }
-    },
-    layout: {
-      minimal: {
-        label: {
-          display: "none"
-        },
-        value: {
-          display: "none"
-        }
-      },
-      inline: {
-        root: {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: "400"
-        },
-        track: {
-          flex: 1
-        }
-      },
-      stacked: {
-        root: {
-          flexDirection: "column",
-          gap: "200"
-        },
-        text: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          width: "100%"
-        }
-      }
-    }
-  },
-  // Default variant values when not explicitly specified
-  defaultVariants: {
-    size: "md",
-    colorPalette: "primary",
-    variant: "solid",
-    layout: "stacked"
-  },
-  compoundVariants: [
-    {
-      isDynamic: !0,
-      isIndeterminate: !0,
-      css: {
-        fill: {
-          "--progress-bar-animation": "progress-indeterminate 2s ease-in-out infinite"
-        }
-      }
-    }
-  ]
-}), ae = /* @__PURE__ */ t({
-  slots: [
-    "root",
-    "trigger",
-    "popover",
-    "content",
-    "item",
-    "separator",
-    "section",
-    "sectionLabel",
-    "submenu"
-  ],
-  // Unique class name prefix for the component
-  className: "nimbus-menu",
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-block",
-      position: "relative"
-    },
-    trigger: {
-      focusRing: "outside"
-    },
-    popover: {
-      bg: "bg",
-      borderRadius: "200",
-      boxShadow: "5",
-      overflow: "auto",
-      // Entry animation
-      "&[data-entering]": {
-        animationName: "fade-in, scale-in",
-        animationDuration: "fast"
-      },
-      // Exit animation
-      "&[data-exiting]": {
-        animationName: "fade-out, scale-out",
-        animationDuration: "faster"
-      }
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      minWidth: "200px",
-      maxHeight: "400px",
-      overflowY: "auto",
-      p: "200",
-      position: "relative",
-      // Focus styles for keyboard navigation
-      "&:focus": {
-        outline: "none"
-      }
-    },
-    item: {
-      display: "grid",
-      /*
-       * Define a 4-column grid:
-       * 1. icon      – size to its content (usually 0 when no icon)
-       * 2. label/description – takes up all remaining space
-       * 3. keyboard  – size to its content (or 0 when missing)
-       * 4. flyout    – size to its content (or 0 when missing)
-       *
-       * Using `1fr` for the second column ensures that, when columns 3 or 4
-       * are absent for a particular row, the label/description column expands
-       * to fill the available width instead of leaving empty reserved space.
-       */
-      gridTemplateColumns: "auto 1fr auto auto",
-      gridTemplateAreas: `
-        'icon label keyboard flyoutCaret'
-        'icon description keyboard flyoutCaret'`,
-      flexDirection: "column",
-      alignItems: "start",
-      px: "300",
-      py: "200",
-      borderRadius: "200",
-      cursor: "pointer",
-      userSelect: "none",
-      color: "fg",
-      fontSize: "400",
-      lineHeight: "500",
-      position: "relative",
-      textStyle: "sm",
-      outline: 0,
-      boxShadow: "inset 0 0 0 {sizes.50} {colors.bg}",
-      // Hover state
-      "&[data-hovered='true'], &[data-focused='true']": {
-        bg: "primary.2",
-        outline: "none",
-        zIndex: "1"
-      },
-      // keyboard focused
-      "&[data-focus-visible]": {
-        focusRing: "outside"
-      },
-      "&[data-selected]": {
-        bg: "primary.3"
-      },
-      // Critical state
-      "&[data-critical]": {
-        color: "critical.11",
-        "&[data-hovered='true'], &[data-focused='true']": {
-          bg: "critical.2"
-        },
-        "& [slot='label']": {
-          fontWeight: "600",
-          color: "critical.11"
-        },
-        "& [slot='icon']": {
-          color: "critical.11"
-        },
-        "& [slot='description']": {
-          color: "critical.11",
-          fontWeight: "300"
-        }
-      },
-      "& [slot='caretIcon']": {
-        gridArea: "flyoutCaret",
-        textAlign: "right",
-        my: "auto",
-        marginInlineStart: "400",
-        boxSize: "500",
-        color: "neutral.11"
-      },
-      // Styles for Text[slot="label"]
-      "& [slot='label']": {
-        gridArea: "label",
-        fontWeight: "500"
-      },
-      // Styles for Text[slot="description"]
-      "& [slot='description']": {
-        gridArea: "description",
-        color: "neutral.11"
-      },
-      // Styles for Kbd[slot="keyboard"]
-      "& [slot='keyboard']": {
-        gridArea: "keyboard",
-        color: "colorPalette.11",
-        fontFamily: "mono",
-        marginInlineStart: "400",
-        my: "auto"
-      },
-      // Styles for Icon[slot="icon"]
-      "& [slot='icon']": {
-        gridArea: "icon",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        marginInlineEnd: "300",
-        my: "auto",
-        flexShrink: 0,
-        color: "neutral.11",
-        boxSize: "500"
-      },
-      // Disabled state
-      "&[data-disabled]": {
-        layerStyle: "disabled",
-        pointerEvents: "none"
-      }
-    },
-    separator: {
-      height: "25",
-      flexShrink: 0,
-      backgroundColor: "neutral.6",
-      my: "200",
-      mx: "-200"
-    },
-    section: {
-      display: "flex",
-      flexDirection: "column"
-    },
-    sectionLabel: {
-      textStyle: "xs",
-      fontWeight: "600",
-      color: "neutral.11",
-      px: "300",
-      pt: "300",
-      pb: "200",
-      marginBottom: "100",
-      textTransform: "uppercase",
-      letterSpacing: "{spacing.25}"
-    }
-  }
-}), ie = /* @__PURE__ */ p({
-  slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
-  // Unique class name prefix for the component
-  className: "nimbus-split-button",
-  // Base styles applied to all instances of the component
-  base: {
-    root: {
-      display: "inline-block",
-      position: "relative"
-    },
-    buttonGroup: {
-      display: "inline-flex",
-      alignItems: "stretch",
-      position: "relative",
-      borderRadius: "200"
-    },
-    primaryButton: {
-      // Split button mode styles - connected to dropdown trigger
-      "[data-mode='split'] &": {
-        borderRightRadius: "0",
-        // Left rounded corners only
-        borderRightWidth: "0"
-      },
-      // Ensure focus ring is visible above dropdown trigger
-      "&:focus-visible": {
-        zIndex: 2
-      }
-    },
-    dropdownTrigger: {
-      borderLeftWidth: "1px",
-      borderLeftStyle: "solid",
-      borderLeftRadius: "0",
-      // Ensure focus ring is visible above primary button
-      "&:focus-visible": {
-        zIndex: 2
-      }
-    }
-  },
-  variants: {
-    variant: {
-      solid: {
-        dropdownTrigger: {
-          borderLeftColor: "colorPalette.contrast"
-          // White delimiter
-        }
-      },
-      ghost: {
-        dropdownTrigger: {
-          borderLeftColor: "colorPalette.7"
-          // Theme-aware border
-        }
-      },
-      outline: {},
-      subtle: {},
-      link: {}
-    }
-  },
-  defaultVariants: {
-    variant: "solid"
-    // Match component default
-  }
-}), le = {
-  dialog: F,
-  list: M,
-  table: Y,
-  checkbox: s,
-  select: i,
-  accordion: X,
-  taggroup: $,
-  switch: U,
-  numberInput: q,
-  calendar: K,
-  rangeCalendar: Q,
-  dateInput: Z,
-  dateRangePicker: te,
-  datePicker: ee,
-  dataTable: oe,
-  radioInput: u,
-  combobox: J,
-  progressBar: re,
-  menu: ae,
-  splitButton: ie
-}, ne = /* @__PURE__ */ v(
-  e.textStyle
-), se = /* @__PURE__ */ o.durations(e.aspectRatio), de = /* @__PURE__ */ o.animations(e.animation), ce = /* @__PURE__ */ o.blurs(e.blur), pe = /* @__PURE__ */ o.borders(e.border), ue = /* @__PURE__ */ o.colors({
-  ...e.color["blacks-and-whites"]
-}), ge = /* @__PURE__ */ o.durations(e.duration), be = /* @__PURE__ */ o.easings(e.easing), me = /* @__PURE__ */ o.fonts(e.fontFamily), he = /* @__PURE__ */ o.fontSizes(e.fontSize), fe = /* @__PURE__ */ o.fontWeights(e.fontWeight), ve = (a) => Object.keys(a).reduce(
-  (l, r) => {
-    const g = parseFloat(a[r].value) / 100;
-    return l[r] = { value: `${g}em` }, l;
-  },
-  {}
-), ye = /* @__PURE__ */ o.letterSpacings(
-  /* @__PURE__ */ ve(e.letterSpacing)
-), xe = /* @__PURE__ */ o.lineHeights(e.lineHeight), we = /* @__PURE__ */ o.radii(e.borderRadius), Se = /* @__PURE__ */ o.spacing(e.spacing), ke = /* @__PURE__ */ o.sizes({
-  ...e.size,
-  "1/2": {
-    value: "50%"
-  },
-  "1/3": {
-    value: "33.333333%"
-  },
-  "2/3": {
-    value: "66.666667%"
-  },
-  "1/4": {
-    value: "25%"
-  },
-  "3/4": {
-    value: "75%"
-  },
-  "1/5": {
-    value: "20%"
-  },
-  "2/5": {
-    value: "40%"
-  },
-  "3/5": {
-    value: "60%"
-  },
-  "4/5": {
-    value: "80%"
-  },
-  "1/6": {
-    value: "16.666667%"
-  },
-  "2/6": {
-    value: "33.333333%"
-  },
-  "3/6": {
-    value: "50%"
-  },
-  "4/6": {
-    value: "66.666667%"
-  },
-  "5/6": {
-    value: "83.333333%"
-  },
-  "1/12": {
-    value: "8.333333%"
-  },
-  "2/12": {
-    value: "16.666667%"
-  },
-  "3/12": {
-    value: "25%"
-  },
-  "4/12": {
-    value: "33.333333%"
-  },
-  "5/12": {
-    value: "41.666667%"
-  },
-  "6/12": {
-    value: "50%"
-  },
-  "7/12": {
-    value: "58.333333%"
-  },
-  "8/12": {
-    value: "66.666667%"
-  },
-  "9/12": {
-    value: "75%"
-  },
-  "10/12": {
-    value: "83.333333%"
-  },
-  "11/12": {
-    value: "91.666667%"
-  },
-  max: {
-    value: "max-content"
-  },
-  min: {
-    value: "min-content"
-  },
-  fit: {
-    value: "fit-content"
-  },
-  prose: {
-    value: "60ch"
-  },
-  full: {
-    value: "100%"
-  },
-  dvh: {
-    value: "100dvh"
-  },
-  svh: {
-    value: "100svh"
-  },
-  lvh: {
-    value: "100lvh"
-  },
-  dvw: {
-    value: "100dvw"
-  },
-  svw: {
-    value: "100svw"
-  },
-  lvw: {
-    value: "100lvw"
-  },
-  vw: {
-    value: "100vw"
-  },
-  vh: {
-    value: "100vh"
-  }
-}), ze = /* @__PURE__ */ o.zIndex(e.zIndex), Re = /* @__PURE__ */ o.cursor(e.cursor), Ce = {
-  aspectRatios: se,
-  animations: de,
-  blurs: ce,
-  borders: pe,
-  colors: ue,
-  durations: ge,
-  easings: be,
-  fonts: me,
-  fontSizes: he,
-  fontWeights: fe,
-  letterSpacings: ye,
-  lineHeights: xe,
-  radii: we,
-  spacing: Se,
-  sizes: ke,
-  zIndex: ze,
-  cursor: Re
-}, Ie = /* @__PURE__ */ w({
-  preflight: !0,
-  cssVarsPrefix: "nimbus",
-  cssVarsRoot: ":where(:root, :host)",
-  globalCss: _,
-  theme: {
-    breakpoints: W,
-    keyframes: B,
-    tokens: Ce,
-    semanticTokens: O,
-    recipes: L,
-    slotRecipes: le,
-    textStyles: ne,
-    layerStyles: N,
-    animationStyles: I
-  }
-}), Le = /* @__PURE__ */ y(x, Ie);
-export {
-  ie as a,
-  V as b,
-  U as c,
-  Z as d,
-  D as e,
-  ee as f,
-  te as g,
-  K as h,
-  u as i,
-  i as j,
-  oe as k,
-  J as l,
-  ae as m,
-  q as n,
-  Q as r,
-  Le as s,
-  A as t
-};
-//# sourceMappingURL=index-jAeaCpRm.es.js.map