@commercetools/nimbus 0.0.0-canary-20250812202252 → 0.0.0-canary-20250813190648

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

@@ -0,0 +1,3370 @@
+import { defineAnimationStyles as g, defineGlobalStyles as m, defineLayerStyles as b, defineRecipe as f, defineSemanticTokens as c, defineTextStyles as h, defineTokens as o, createSystem as v, defaultBaseConfig as x, defineConfig as y } from "@chakra-ui/react";
+import { themeTokens as e } from "@commercetools/nimbus-tokens";
+import { a as w } from "./avatar.recipe-CxXQlkH6.es.js";
+import { b as n } from "./button.recipe-D9e9Gh9L.es.js";
+import { d, a as t } from "./config-ufbQ08Vi.es.js";
+import { g as S } from "./group.recipe-BQafmscW.es.js";
+import { k as z } from "./kbd.recipe-BTW0MQqx.es.js";
+import { l as k } from "./link.recipe-BRnFQ5bP.es.js";
+import { t as R } from "./tooltip.recipe-DsVUEki2.es.js";
+const C = /* @__PURE__ */ g({
+  "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 I = /* @__PURE__ */ P(e.breakpoints), W = /* @__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"
+  }
+}), _ = {
+  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__ */ b({
+  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"
+  }
+}), B = /* @__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"
+  }
+}), D = /* @__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"
+  }
+}), V = /* @__PURE__ */ f({
+  className: "nimbus-toolbar",
+  base: {
+    display: "inline-flex",
+    p: "var(--toolbar-spacing)",
+    gap: "var(--toolbar-spacing)",
+    borderRadius: "300",
+    alignItems: "stretch",
+    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}"
+      },
+      md: {
+        "--toolbar-spacing": "{spacing.200}"
+      }
+    },
+    orientation: {
+      horizontal: {
+        "--toolbar-direction": "row",
+        "& .nimbus-divider": {
+          height: "auto",
+          mx: "var(--toolbar-spacing)"
+        }
+      },
+      vertical: {
+        "--toolbar-direction": "column",
+        "& .nimbus-divider": {
+          my: "var(--toolbar-spacing)"
+        }
+      }
+    },
+    variant: {
+      plain: {},
+      outline: {
+        boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "plain"
+  }
+}), T = {
+  avatar: w,
+  button: n,
+  code: H,
+  group: S,
+  heading: B,
+  kbd: z,
+  link: k,
+  tooltip: R,
+  textInput: A,
+  radioInput: u,
+  toggleButton: D,
+  toolbar: V
+}, 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), F = /* @__PURE__ */ c.radii({}), E = {
+  colors: G,
+  shadows: j,
+  radii: F
+}, L = /* @__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"
+  }
+}), O = /* @__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"
+  }
+}), M = /* @__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-focused]
+      // [data-focus-visible]
+      // [data-open]
+      // [data-invalid]
+      // [data-required]
+      "&[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"
+      }
+      // [data-hovered]
+      // [data-pressed]
+      // [data-focused]
+      // [data-focus-visible]
+      // [data-disabled]
+      // [data-pending]
+    },
+    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)"
+      // [data-trigger="..."]
+      // [data-placement="left | right | top | bottom"]
+      // [data-entering]
+      // [data-exiting]
+    },
+    // 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"
+  }
+}), Y = /* @__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"
+  }
+}), X = /* @__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"
+  }
+}), $ = /* @__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"
+  }
+}), U = /* @__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"
+  }
+}), q = /* @__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"
+  }
+}), J = /* @__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"
+      }
+    }
+  }
+}), K = /* @__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"
+      }
+    }
+  }
+}), Q = /* @__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"
+  }
+}), Z = /* @__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"
+  }
+}), ee = /* @__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"
+  }
+}), te = /* @__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"
+        }
+      }
+    }
+  ]
+}), oe = /* @__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 5-column grid:
+       * 1. selection – checkbox (size to content, 0 when no selection mode)
+       * 2. icon      – size to its content (usually 0 when no icon)
+       * 3. label/description – takes up all remaining space
+       * 4. keyboard  – size to its content (or 0 when missing)
+       * 5. flyout    – size to its content (or 0 when missing)
+       *
+       * Using `1fr` for the third column ensures that, when columns 4 or 5
+       * are absent for a particular row, the label/description column expands
+       * to fill the available width instead of leaving empty reserved space.
+       */
+      gridTemplateColumns: "auto auto 1fr auto auto",
+      gridTemplateAreas: `
+        'selection icon label keyboard flyoutCaret'
+        'selection 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",
+        "& [slot='selection']": {
+          color: "primary.9"
+        }
+      },
+      // 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"
+      },
+      // Styles for Checkbox[slot="selection"]
+      "& [slot='selection']": {
+        gridArea: "selection",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ml: "200",
+        mr: "300",
+        my: "auto",
+        color: "neutral.11",
+        /** has-submenu + selectable = impossible = hide checkbox*/
+        "[data-has-submenu='true']&": {
+          opacity: ".0",
+          ml: "-600"
+        },
+        "& svg": {
+          boxSize: "500"
+        }
+      },
+      // Adjust padding when selection mode is active
+      "&[data-selection-mode]": {
+        paddingInlineStart: "200"
+      },
+      // 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}"
+    }
+  }
+}), re = {
+  dialog: L,
+  list: O,
+  table: M,
+  checkbox: s,
+  select: i,
+  accordion: Y,
+  taggroup: X,
+  switch: $,
+  numberInput: U,
+  calendar: J,
+  rangeCalendar: K,
+  dateInput: Q,
+  dateRangePicker: ee,
+  datePicker: Z,
+  radioInput: u,
+  combobox: q,
+  progressBar: te,
+  menu: oe
+}, ae = /* @__PURE__ */ h(
+  e.textStyle
+), ie = /* @__PURE__ */ o.durations(e.aspectRatio), le = /* @__PURE__ */ o.animations(e.animation), ne = /* @__PURE__ */ o.blurs(e.blur), se = /* @__PURE__ */ o.borders(e.border), de = /* @__PURE__ */ o.colors({
+  ...e.color["blacks-and-whites"]
+}), ce = /* @__PURE__ */ o.durations(e.duration), ue = /* @__PURE__ */ o.easings(e.easing), pe = /* @__PURE__ */ o.fonts(e.fontFamily), ge = /* @__PURE__ */ o.fontSizes(e.fontSize), me = /* @__PURE__ */ o.fontWeights(e.fontWeight), be = (a) => Object.keys(a).reduce(
+  (l, r) => {
+    const p = parseFloat(a[r].value) / 100;
+    return l[r] = { value: `${p}em` }, l;
+  },
+  {}
+), fe = /* @__PURE__ */ o.letterSpacings(
+  /* @__PURE__ */ be(e.letterSpacing)
+), he = /* @__PURE__ */ o.lineHeights(e.lineHeight), ve = /* @__PURE__ */ o.radii(e.borderRadius), xe = /* @__PURE__ */ o.spacing(e.spacing), ye = /* @__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"
+  }
+}), we = /* @__PURE__ */ o.zIndex(e.zIndex), Se = /* @__PURE__ */ o.cursor(e.cursor), ze = {
+  aspectRatios: ie,
+  animations: le,
+  blurs: ne,
+  borders: se,
+  colors: de,
+  durations: ce,
+  easings: ue,
+  fonts: pe,
+  fontSizes: ge,
+  fontWeights: me,
+  letterSpacings: fe,
+  lineHeights: he,
+  radii: ve,
+  spacing: xe,
+  sizes: ye,
+  zIndex: we,
+  cursor: Se
+}, ke = /* @__PURE__ */ y({
+  preflight: !0,
+  cssVarsPrefix: "nimbus",
+  cssVarsRoot: ":where(:root, :host)",
+  globalCss: W,
+  theme: {
+    breakpoints: I,
+    keyframes: _,
+    tokens: ze,
+    semanticTokens: E,
+    recipes: T,
+    slotRecipes: re,
+    textStyles: ae,
+    layerStyles: N,
+    animationStyles: C
+  }
+}), De = /* @__PURE__ */ v(x, ke);
+export {
+  D as a,
+  $ as b,
+  V as c,
+  Q as d,
+  Z as e,
+  ee as f,
+  J as g,
+  u as h,
+  i,
+  q as j,
+  oe as m,
+  U as n,
+  K as r,
+  De as s,
+  A as t
+};
+//# sourceMappingURL=index-DdQ9V6B1.es.js.map