@televet/kibble-ui 4.0.0-beta.69 → 4.0.0-beta.7

package/dist/esm/theme/index.js

@@ -1,6 +1,2480 @@
-import { K as r, s as m } from "../../chunks/theme.provider-Dez6uepg.js";
+import { x as h, bW as H } from "../../chunks/vendor-BBfll6i3.js";
+import { aT as n, aU as V, ad as u, r as c, aV as O, aW as $, aX as j, aY as G, aZ as M } from "../../chunks/chakra-BqBkjpvZ.js";
+import { blurs as P } from "./tokens/blurs/index.js";
+import { borders as Y, radii as N } from "./tokens/borders/index.js";
+import { coreColors as e } from "./tokens/colors/index.js";
+import { shadows as J } from "./tokens/shadows/index.js";
+import { breakpointSizes as K, sizes as X } from "./tokens/sizes/index.js";
+import { fonts as Z, fontSizes as k } from "./tokens/typography/index.js";
+import { spacing as q } from "./tokens/spacing/index.js";
+import { transitionDurations as Q, transitionEasings as rr } from "./tokens/transitions/index.js";
+import { zIndices as er } from "./tokens/zIndices/index.js";
+import { f as y, t as C } from "../../chunks/typography-Cqrokog3.js";
+import { a as m, C as l } from "../../chunks/checkbox.records-JWbKQ684.js";
+import { a as _, R as i } from "../../chunks/radio.records-Cc3kP4Vn.js";
+import { p as S } from "../../chunks/popover.recipe-DnCuZJd3.js";
+const or = (t) => /* @__PURE__ */ h.jsx(H, { attribute: "class", disableTransitionOnChange: !0, ...t }), a = (t) => Object.fromEntries(
+  Object.entries(t).map(([b, g]) => [
+    b,
+    { value: String(g) }
+  ])
+), tr = n.blurs(a(P)), ar = n.borders(a(Y)), nr = n.radii(a(N)), sr = (t) => Object.fromEntries(
+  Object.entries(t).map(([b, g]) => [
+    b,
+    Object.fromEntries(
+      Object.entries(g).map(([W, I]) => [W, { value: I }])
+    )
+  ])
+), dr = n.colors(sr(e)), cr = n.shadows(a(J)), lr = n.sizes({
+  ...a(X),
+  container: {
+    ...a(K)
+  }
+}), ir = n.fonts(a(Z)), br = n.fontSizes(
+  a(k)
+), gr = n.fontWeights(
+  a(k)
+), ur = n.lineHeights(
+  a(k)
+), hr = n.letterSpacings(
+  a(k)
+), pr = n.spacing(a(q)), vr = n.durations(
+  a(Q)
+), kr = n.easings(
+  a(rr)
+), mr = n.zIndex(a(er)), o = (t) => ({
+  value: {
+    _light: t.value._dark,
+    _dark: t.value._light
+  }
+}), r = {
+  primary: {
+    default: {
+      value: {
+        _light: e.primary[600],
+        _dark: e.primary[200]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.primary[700],
+        _dark: e.primary[100]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.primary[800],
+        _dark: e.primary[50]
+      }
+    }
+  },
+  secondary: {
+    default: {
+      value: {
+        _light: e.secondary[500],
+        _dark: e.secondary[200]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.secondary[600],
+        _dark: e.secondary[100]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.secondary[700],
+        _dark: e.secondary[50]
+      }
+    },
+    subtle: {
+      value: {
+        _light: e.secondary[100],
+        _dark: e.secondary[600]
+      }
+    }
+  },
+  danger: {
+    default: {
+      value: {
+        _light: e.danger[600],
+        _dark: e.danger[300]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.danger[600],
+        _dark: e.danger[200]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.danger[700],
+        _dark: e.danger[100]
+      }
+    },
+    // Leaving this in because it's the only one which is not truly inverse from the default because of WCAG
+    inverse: {
+      value: {
+        _light: e.danger[300],
+        _dark: e.danger[500]
+      }
+    }
+  },
+  warning: {
+    default: {
+      value: {
+        _light: e.warning[600],
+        _dark: e.warning[500]
+      }
+    },
+    subtle: {
+      value: {
+        _light: e.warning[100],
+        _dark: e.warning[700]
+      }
+    },
+    note: {
+      value: {
+        _light: e.warning[100],
+        _dark: e.warning[800]
+      }
+    }
+  },
+  success: {
+    default: {
+      value: {
+        _light: e.success[600],
+        _dark: e.success[300]
+      }
+    },
+    subtle: {
+      value: {
+        _light: e.success[100],
+        _dark: e.success[700]
+      }
+    }
+  },
+  neutral: {
+    default: {
+      value: {
+        _light: e.neutral[50],
+        _dark: e.neutral[900]
+      }
+    },
+    subtle1: {
+      value: {
+        _light: e.neutral[100],
+        _dark: e.neutral[800]
+      }
+    },
+    subtle2: {
+      value: {
+        _light: e.neutral[200],
+        _dark: e.neutral[700]
+      }
+    },
+    subtle3: {
+      value: {
+        _light: e.neutral[300],
+        _dark: e.neutral[600]
+      }
+    },
+    subtle4: {
+      value: {
+        _light: e.neutral[600],
+        _dark: e.neutral[400]
+      }
+    },
+    overlay: {
+      value: {
+        _light: e.neutral[50],
+        _dark: e.neutral[800]
+      }
+    },
+    backdrop: {
+      value: {
+        _light: e.blackAlpha[600],
+        _dark: e.blackAlpha[600]
+      }
+    }
+  },
+  primaryAlpha: {
+    default: {
+      value: {
+        _light: e.primaryAlpha[50],
+        _dark: e.primaryAlphaInverse[300]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.primaryAlpha[100],
+        _dark: e.primaryAlphaInverse[400]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.primaryAlpha[200],
+        _dark: e.primaryAlphaInverse[500]
+      }
+    }
+  },
+  secondaryAlpha: {
+    default: {
+      value: {
+        _light: e.secondaryAlpha[50],
+        _dark: e.secondaryAlphaInverse[300]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.secondaryAlpha[100],
+        _dark: e.secondaryAlphaInverse[400]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.secondaryAlpha[200],
+        _dark: e.secondaryAlphaInverse[500]
+      }
+    }
+  },
+  dangerAlpha: {
+    default: {
+      value: {
+        _light: e.dangerAlpha[50],
+        _dark: e.dangerAlphaInverse[300]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.dangerAlpha[100],
+        _dark: e.dangerAlphaInverse[400]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.dangerAlpha[200],
+        _dark: e.dangerAlphaInverse[500]
+      }
+    }
+  },
+  neutralAlpha: {
+    default: {
+      value: {
+        _light: e.blackAlpha[50],
+        _dark: e.whiteAlpha[300]
+      }
+    },
+    hover: {
+      value: {
+        _light: e.blackAlpha[100],
+        _dark: e.whiteAlpha[400]
+      }
+    },
+    pressed: {
+      value: {
+        _light: e.blackAlpha[200],
+        _dark: e.whiteAlpha[500]
+      }
+    },
+    dark: {
+      value: {
+        _light: e.blackAlpha[500],
+        _dark: e.whiteAlpha[800]
+      }
+    }
+  },
+  ai: {
+    default: {
+      value: {
+        _light: `linear-gradient(87.05deg, ${e.primary[100]} 7.97%, ${e.secondary[100]} 50.46%, ${e.danger[100]} 94.47%)`,
+        _dark: `linear-gradient(87.05deg, ${e.primary[700]} 7.97%, ${e.secondary[700]} 50.46%, ${e.danger[700]} 94.47%)`
+      }
+    },
+    hover: {
+      value: {
+        _light: `linear-gradient(87.05deg, ${e.primary[200]} 7.97%, ${e.secondary[200]} 50.46%, ${e.danger[200]} 94.47%)`,
+        _dark: `linear-gradient(87.05deg, ${e.primary[600]} 7.97%, ${e.secondary[600]} 50.46%, ${e.danger[600]} 94.47%)`
+      }
+    },
+    pressed: {
+      value: {
+        _light: `linear-gradient(87.05deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), linear-gradient(87.05deg, ${e.primary[200]} 7.97%, ${e.secondary[200]} 50.46%, ${e.danger[200]} 94.47%)`,
+        _dark: `linear-gradient(87.05deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), linear-gradient(87.05deg, ${e.primary[600]} 7.97%, ${e.secondary[600]} 50.46%, ${e.danger[600]} 94.47%)`
+      }
+    }
+  }
+}, w = o(
+  r.neutral.default
+), _r = {
+  DEFAULT: w,
+  accent: {
+    DEFAULT: r.secondary.default,
+    subtle: r.secondary.subtle
+  },
+  brand: {
+    DEFAULT: r.primary.default,
+    contrast: {
+      DEFAULT: o(r.primary.default),
+      hover: o(r.primary.hover)
+    },
+    hover: r.primary.hover
+  },
+  contrast: r.neutral.default,
+  danger: {
+    DEFAULT: r.danger.default,
+    contrast: {
+      DEFAULT: r.danger.inverse
+    }
+  },
+  default: w,
+  info: r.secondary.default,
+  interactive: {
+    DEFAULT: r.secondary.default,
+    contrast: {
+      DEFAULT: o(r.secondary.default),
+      hover: o(r.secondary.hover)
+    },
+    hover: r.secondary.hover
+  },
+  placeholder: {
+    DEFAULT: r.neutralAlpha.dark,
+    contrast: o(r.neutralAlpha.dark)
+  },
+  subtle: {
+    DEFAULT: r.neutral.subtle4,
+    contrast: o(r.neutral.subtle4)
+  },
+  success: r.success.default,
+  warning: r.warning.default
+}, z = r.neutral.subtle2, fr = {
+  DEFAULT: z,
+  default: z
+}, T = r.neutral.subtle2, xr = {
+  DEFAULT: T,
+  accent: {
+    DEFAULT: r.secondary.default,
+    subtle: r.secondary.subtle
+  },
+  brand: {
+    DEFAULT: r.primary.default,
+    contrast: o(r.primary.default)
+  },
+  contrast: o(r.neutral.subtle2),
+  danger: {
+    DEFAULT: r.danger.default,
+    contrast: r.danger.inverse
+  },
+  default: T,
+  focus: {
+    DEFAULT: r.secondary.default,
+    contrast: o(r.secondary.default)
+  },
+  info: r.secondary.default,
+  strong: {
+    DEFAULT: o(r.neutral.default),
+    contrast: r.neutral.default
+  },
+  // This separation is needed to override Chakra's default
+  subtle: r.neutral.subtle4,
+  "subtle.contrast": o(r.neutral.subtle4),
+  success: r.success.default,
+  warning: r.warning.default
+}, D = r.neutral.default, yr = {
+  DEFAULT: D,
+  accent: {
+    DEFAULT: r.secondary.default,
+    subtle: r.secondary.subtle
+  },
+  ai: {
+    DEFAULT: r.ai.default,
+    hover: r.ai.hover,
+    pressed: r.ai.pressed
+  },
+  alpha: {
+    DEFAULT: r.neutralAlpha.default,
+    contrast: {
+      DEFAULT: o(r.neutralAlpha.default),
+      hover: o(r.neutralAlpha.hover),
+      pressed: o(r.neutralAlpha.pressed)
+    },
+    hover: r.neutralAlpha.hover,
+    pressed: r.neutralAlpha.pressed
+  },
+  backdrop: r.neutral.backdrop,
+  brand: r.primary.pressed,
+  contrast: o(r.neutral.subtle1),
+  danger: {
+    DEFAULT: o(r.danger.hover),
+    contrast: r.danger.default
+  },
+  default: D,
+  destructive: {
+    DEFAULT: r.danger.default,
+    contrast: {
+      DEFAULT: r.danger.inverse,
+      hover: o(r.danger.hover),
+      pressed: o(r.danger.pressed)
+    },
+    hover: r.danger.hover,
+    pressed: r.danger.pressed
+  },
+  destructiveAlpha: {
+    DEFAULT: r.dangerAlpha.default,
+    contrast: {
+      DEFAULT: o(r.dangerAlpha.default),
+      hover: o(r.dangerAlpha.hover),
+      pressed: o(r.dangerAlpha.pressed)
+    },
+    hover: r.dangerAlpha.hover,
+    pressed: r.dangerAlpha.pressed
+  },
+  info: r.secondary.subtle,
+  note: {
+    DEFAULT: r.warning.note,
+    hover: r.warning.subtle
+  },
+  overlay: {
+    DEFAULT: r.neutral.overlay,
+    contrast: o(r.neutral.overlay)
+  },
+  primary: {
+    DEFAULT: r.primary.default,
+    contrast: {
+      DEFAULT: o(r.primary.default),
+      hover: o(r.primary.hover),
+      pressed: o(r.primary.pressed)
+    },
+    hover: r.primary.hover,
+    pressed: r.primary.pressed
+  },
+  primaryAlpha: {
+    DEFAULT: r.primaryAlpha.default,
+    contrast: {
+      DEFAULT: o(r.primaryAlpha.default),
+      hover: o(r.primaryAlpha.hover),
+      pressed: o(r.primaryAlpha.pressed)
+    },
+    hover: r.primaryAlpha.hover,
+    pressed: r.primaryAlpha.pressed
+  },
+  secondary: {
+    DEFAULT: r.secondary.default,
+    contrast: {
+      DEFAULT: o(r.secondary.default),
+      hover: o(r.secondary.hover),
+      pressed: o(r.secondary.pressed)
+    },
+    hover: r.secondary.hover,
+    pressed: r.secondary.pressed
+  },
+  secondaryAlpha: {
+    DEFAULT: r.secondaryAlpha.default,
+    contrast: {
+      DEFAULT: o(r.secondaryAlpha.default),
+      hover: o(r.secondaryAlpha.hover),
+      pressed: o(r.secondaryAlpha.pressed)
+    },
+    hover: r.secondaryAlpha.hover,
+    pressed: r.secondaryAlpha.pressed
+  },
+  subtle: {
+    DEFAULT: r.neutral.subtle1,
+    contrast: o(r.neutral.subtle2),
+    less: r.neutral.subtle2,
+    more: o(r.neutral.subtle3),
+    most: r.neutral.subtle3
+  },
+  success: {
+    DEFAULT: r.success.subtle,
+    contrast: r.success.default
+  },
+  warning: {
+    DEFAULT: r.warning.subtle,
+    contrast: r.warning.default
+  }
+}, Cr = {
+  background: yr,
+  border: xr,
+  divider: fr,
+  text: _r
+}, Ar = V.colors(
+  Cr
+), U = {
+  xs: { fontSize: "xs" },
+  sm: { fontSize: "sm" },
+  md: { fontSize: "md" },
+  lg: { fontSize: "lg" },
+  xl: { fontSize: "xl" },
+  "2xl": { fontSize: "2xl" },
+  "3xl": { fontSize: "3xl" },
+  "4xl": { fontSize: "4xl" },
+  "5xl": { fontSize: "5xl" },
+  "6xl": { fontSize: "6xl" }
+}, A = "150%", Sr = u({
+  base: {
+    lineHeight: A
+  },
+  variants: {
+    variant: C,
+    size: U,
+    fontWeight: y
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    fontWeight: "normal"
+  }
+}), wr = {
+  xs: { fontSize: "sm", lineHeight: "120%" },
+  sm: { fontSize: "md", lineHeight: "120%" },
+  md: { fontSize: "xl", lineHeight: "120%" },
+  lg: { fontSize: ["2xl", "3xl"], lineHeight: ["133%", "120%"] },
+  xl: { fontSize: ["3xl", "4xl"], lineHeight: ["133%", "120%"] },
+  "2xl": { fontSize: ["4xl", "5xl"], lineHeight: ["120%", "100%"] },
+  "3xl": { fontSize: ["5xl", "6xl"], lineHeight: "100%" },
+  "4xl": { fontSize: ["6xl", "7xl"], lineHeight: "100%" }
+}, zr = u({
+  base: {
+    fontWeight: "semibold"
+  },
+  variants: {
+    variant: C,
+    size: wr,
+    fontWeight: y
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "lg",
+    fontWeight: "semibold"
+  }
+}), Tr = u({
+  base: {
+    lineHeight: A,
+    textDecoration: "underline"
+  },
+  variants: {
+    variant: C,
+    size: U,
+    fontWeight: y
+  },
+  defaultVariants: {
+    variant: "interactive",
+    size: "md",
+    fontWeight: "normal"
+  }
+}), Dr = ["root", "label", "closeTrigger"], Er = {
+  default: {
+    root: {
+      bgColor: "background.subtle.less",
+      color: "text.default"
+    }
+  },
+  error: {
+    root: {
+      bgColor: "background.danger",
+      color: "text.danger"
+    }
+  },
+  info: {
+    root: {
+      bgColor: "background.info",
+      color: "text.info"
+    }
+  },
+  success: {
+    root: {
+      bgColor: "background.success",
+      color: "text.success"
+    }
+  },
+  warning: {
+    root: {
+      bgColor: "background.warning",
+      color: "text.warning"
+    }
+  }
+}, Lr = {
+  sm: {
+    root: {
+      height: "20px",
+      px: "8px"
+    },
+    label: {
+      fontSize: "xs"
+    },
+    closeTrigger: {
+      _icon: {
+        height: "14px",
+        width: "14px"
+      }
+    }
+  },
+  md: {
+    root: {
+      height: "24px",
+      px: "8px"
+    },
+    label: {
+      fontSize: "sm"
+    },
+    closeTrigger: {
+      _icon: {
+        height: "16px",
+        width: "16px"
+      }
+    }
+  },
+  lg: {
+    root: {
+      borderRadius: "lg",
+      height: "32px",
+      px: "12px"
+    },
+    label: {
+      fontSize: "md"
+    },
+    closeTrigger: {
+      _icon: {
+        height: "18px",
+        width: "18px"
+      }
+    }
+  }
+}, Br = {
+  hover: {
+    closeTrigger: {
+      borderRadius: "md",
+      bgColor: "inherit",
+      color: "inherit",
+      display: "none",
+      opacity: 0,
+      padding: "2px !important",
+      position: "absolute",
+      right: 0,
+      ring: 0,
+      width: "auto",
+      _groupHover: { display: "flex", opacity: 0.89 }
+    }
+  },
+  always: {
+    root: {
+      gap: 0
+    }
+  },
+  never: {}
+}, Fr = c({
+  slots: Dr,
+  base: {
+    root: {
+      borderRadius: "md",
+      boxShadow: "none",
+      gap: 0,
+      position: "relative"
+    },
+    label: {
+      fontWeight: "semibold",
+      overflowY: "visible",
+      lineHeight: A
+    },
+    closeTrigger: {
+      height: "20px",
+      marginInline: 0,
+      marginLeft: 1,
+      opacity: 0.5,
+      width: "20px",
+      _hover: {
+        opacity: 0.8
+      },
+      _active: {
+        opacity: 1
+      },
+      _focus: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        outline: "none"
+      }
+    }
+  },
+  variants: {
+    size: Lr,
+    variant: Er,
+    closeButtonDisplay: Br
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    closeButtonDisplay: "never"
+  }
+}), Ur = {
+  xs: {
+    fontSize: "xs",
+    h: 6,
+    p: "3px 8px",
+    minW: 6
+  },
+  sm: {
+    fontSize: "sm",
+    h: 8,
+    p: "6px 12px",
+    minW: 8
+  },
+  md: {
+    fontSize: "md",
+    h: 10,
+    p: "8px 16px",
+    minW: 10
+  },
+  lg: {
+    fontSize: "lg",
+    h: 12,
+    p: "10px 20px",
+    minW: 12
+  }
+}, Rr = {
+  primary: {
+    bg: {
+      base: "background.primary",
+      _hover: {
+        base: "background.primary.hover",
+        _disabled: "background.primary"
+      },
+      _active: {
+        base: "background.primary.pressed",
+        _hover: "background.primary.pressed"
+      }
+    },
+    color: {
+      base: "text.contrast",
+      _icon: "text.contrast"
+    }
+  },
+  primaryOnContrast: {
+    bg: {
+      base: "background.primary.contrast",
+      _hover: {
+        base: "background.primary.contrast.hover",
+        _disabled: "background.primary.contrast"
+      },
+      _active: {
+        base: "background.primary.contrast.pressed",
+        _hover: "background.primary.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text",
+      _icon: "text"
+    }
+  },
+  primaryDestructive: {
+    bg: {
+      base: "background.destructive",
+      _hover: {
+        base: "background.destructive.hover",
+        _disabled: "background.destructive"
+      },
+      _active: {
+        base: "background.destructive.pressed",
+        _hover: "background.destructive.pressed"
+      }
+    },
+    color: "text.contrast",
+    _icon: {
+      color: "text.contrast"
+    }
+  },
+  primaryDestructiveOnContrast: {
+    bg: {
+      base: "background.destructive.contrast",
+      _hover: {
+        base: "background.destructive.contrast.hover",
+        _disabled: "background.destructive.contrast"
+      },
+      _active: {
+        base: "background.destructive.contrast.pressed",
+        _hover: "background.destructive.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text",
+      _icon: "text"
+    }
+  },
+  secondary: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.alpha.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.pressed",
+        _hover: "background.secondaryAlpha.pressed"
+      }
+    },
+    borderColor: {
+      base: "border.strong",
+      _active: "border.focus"
+    },
+    color: {
+      base: "text",
+      _active: "text.interactive",
+      _icon: "text"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive"
+      }
+    }
+  },
+  secondaryOnContrast: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.alpha.contrast.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.contrast.pressed",
+        _hover: "background.secondaryAlpha.contrast.pressed"
+      }
+    },
+    borderColor: {
+      base: "border.strong.contrast",
+      _active: "border.focus.contrast"
+    },
+    color: {
+      base: "text.contrast",
+      _active: "text.interactive.contrast",
+      _icon: "text.contrast"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive.contrast"
+      }
+    }
+  },
+  secondaryDestructive: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.alpha.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.destructiveAlpha.pressed",
+        _hover: "background.destructiveAlpha.pressed"
+      }
+    },
+    borderColor: "border.danger",
+    color: "text.danger",
+    _icon: {
+      color: "text.danger"
+    }
+  },
+  secondaryDestructiveOnContrast: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.alpha.contrast.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.destructiveAlpha.contrast.pressed",
+        _hover: "background.destructiveAlpha.contrast.pressed"
+      }
+    },
+    borderColor: "border.danger.contrast",
+    color: "text.danger.contrast",
+    _icon: {
+      color: "text.danger.contrast"
+    }
+  },
+  secondarySubtle: {
+    bg: {
+      base: "background",
+      _hover: {
+        base: "background.subtle",
+        _disabled: "background"
+      },
+      _active: {
+        base: "background.secondaryAlpha",
+        _hover: "background.secondaryAlpha"
+      }
+    },
+    borderColor: {
+      base: "border",
+      _active: "border.focus.contrast"
+    },
+    color: {
+      base: "text",
+      _active: "text.interactive",
+      _icon: "text"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive"
+      }
+    }
+  },
+  secondarySubtleOnContrast: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.subtle.contrast",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.contrast",
+        _hover: "background.secondaryAlpha.contrast"
+      }
+    },
+    borderColor: {
+      base: "border.contrast",
+      _active: "border.focus"
+    },
+    color: {
+      base: "text.contrast",
+      _active: "text.interactive.contrast",
+      _icon: "text.contrast"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive.contrast"
+      }
+    }
+  },
+  secondarySubtleDestructive: {
+    bg: {
+      base: "background",
+      _hover: {
+        base: "background.subtle",
+        _disabled: "background"
+      },
+      _active: {
+        base: "background.destructiveAlpha",
+        _hover: "background.destructiveAlpha"
+      }
+    },
+    color: "text.danger",
+    borderColor: "border",
+    _icon: {
+      color: "text.danger"
+    }
+  },
+  secondarySubtleDestructiveOnContrast: {
+    bg: {
+      base: "background.contrast",
+      _hover: {
+        base: "background.subtle.contrast",
+        _disabled: "background.contrast"
+      },
+      _active: {
+        base: "background.destructiveAlpha.contrast",
+        _hover: "background.destructiveAlpha.contrast"
+      }
+    },
+    color: "text.danger.contrast",
+    borderColor: "border.contrast",
+    _icon: {
+      color: "text.danger.contrast"
+    }
+  },
+  tertiary: {
+    bg: {
+      base: "background.alpha",
+      _hover: {
+        base: "background.alpha.hover",
+        _disabled: "background.alpha"
+      },
+      _active: {
+        base: "background.secondaryAlpha.pressed",
+        _hover: "background.secondaryAlpha.pressed"
+      }
+    },
+    color: {
+      base: "text",
+      _active: "text.interactive",
+      _icon: "text"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive"
+      }
+    }
+  },
+  tertiaryOnContrast: {
+    bg: {
+      base: "background.alpha.contrast",
+      _hover: {
+        base: "background.alpha.contrast.hover",
+        _disabled: "background.alpha.contrast"
+      },
+      _active: {
+        base: "background.secondaryAlpha.contrast.pressed",
+        _hover: "background.secondaryAlpha.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text.contrast",
+      _active: "text.interactive.contrast",
+      _icon: "text.contrast"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive.contrast"
+      }
+    }
+  },
+  tertiaryDestructive: {
+    bg: {
+      base: "background.destructiveAlpha",
+      _hover: {
+        base: "background.destructiveAlpha.hover",
+        _disabled: "background.destructiveAlpha"
+      },
+      _active: {
+        base: "background.destructiveAlpha.pressed",
+        _hover: "background.destructiveAlpha.pressed"
+      }
+    },
+    color: {
+      base: "text.danger",
+      _icon: "text.danger"
+    }
+  },
+  tertiaryDestructiveOnContrast: {
+    bg: {
+      base: "background.destructiveAlpha.contrast",
+      _hover: {
+        base: "background.destructiveAlpha.contrast.hover",
+        _disabled: "background.destructiveAlpha.contrast"
+      },
+      _active: {
+        base: "background.destructiveAlpha.contrast.pressed",
+        _hover: "background.destructiveAlpha.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text.danger.contrast",
+      _icon: "text.danger.contrast"
+    }
+  },
+  ghost: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.pressed",
+        _hover: "background.secondaryAlpha.pressed"
+      }
+    },
+    // Separating to override Chakra's variant
+    _hover: {
+      bg: "background.secondaryAlpha.hover"
+    },
+    color: {
+      base: "text.interactive",
+      _icon: "text.interactive"
+    }
+  },
+  ghostOnContrast: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.secondaryAlpha.contrast.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.contrast.pressed",
+        _hover: "background.secondaryAlpha.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text.interactive.contrast",
+      _icon: "text.interactive.contrast"
+    }
+  },
+  ghostNeutral: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.alpha.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.pressed",
+        _hover: "background.secondaryAlpha.pressed"
+      }
+    },
+    color: {
+      base: "text",
+      _icon: "text"
+    },
+    _active: {
+      color: "text.interactive",
+      _icon: {
+        color: "text.interactive"
+      }
+    }
+  },
+  ghostNeutralOnContrast: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.alpha.contrast.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.secondaryAlpha.contrast.pressed",
+        _hover: "background.secondaryAlpha.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text.contrast",
+      _icon: "text.contrast",
+      _active: "text.interactive.contrast"
+    },
+    _active: {
+      _icon: {
+        color: "text.interactive.contrast"
+      }
+    }
+  },
+  ghostDestructive: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.destructiveAlpha.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.destructiveAlpha.pressed",
+        _hover: "background.destructiveAlpha.pressed"
+      }
+    },
+    color: {
+      base: "text.danger",
+      _icon: "text.danger"
+    }
+  },
+  ghostDestructiveOnContrast: {
+    bg: {
+      base: "transparent",
+      _hover: {
+        base: "background.destructiveAlpha.contrast.hover",
+        _disabled: "transparent"
+      },
+      _active: {
+        base: "background.destructiveAlpha.contrast.pressed",
+        _hover: "background.destructiveAlpha.contrast.pressed"
+      }
+    },
+    color: {
+      base: "text.danger.contrast",
+      _icon: "text.danger.contrast"
+    }
+  },
+  ai: {
+    bg: {
+      base: "background.ai",
+      _hover: {
+        base: "background.ai.hover",
+        _disabled: "background.ai"
+      },
+      _active: {
+        base: "background.ai.pressed",
+        _hover: "background.ai.pressed"
+      }
+    },
+    color: {
+      base: "text.interactive",
+      _icon: "text.interactive"
+    },
+    borderWidth: "0"
+  }
+}, E = u({
+  base: {
+    borderColor: "transparent",
+    borderRadius: "base",
+    borderWidth: "1px",
+    fontWeight: "semibold",
+    letterSpacing: "0.12px",
+    lineHeight: "150%"
+  },
+  variants: {
+    variant: Rr,
+    size: Ur
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), Wr = {
+  default: {
+    bgColor: "background",
+    borderWidth: "1px",
+    borderColor: "border",
+    borderRadius: "base",
+    outline: "2px transparent",
+    color: "text",
+    _placeholder: {
+      color: "text.placeholder"
+    }
+  },
+  onContrast: {
+    bgColor: "background.contrast",
+    borderWidth: "1px",
+    borderColor: "border.contrast",
+    borderRadius: "base",
+    color: "text.contrast",
+    _placeholder: {
+      color: "text.placeholder.contrast"
+    }
+  }
+}, Ir = {
+  default: {
+    borderColor: "border.danger",
+    borderWidth: "1px",
+    boxShadow: "0 0 0 1px var(--chakra-colors-border-danger)",
+    _hover: {
+      borderColor: "border.danger"
+    }
+  },
+  onContrast: {
+    borderColor: "border.danger.contrast",
+    boxShadow: "0 0 0 1px var(--chakra-colors-border-danger-contrast)",
+    _hover: {
+      borderColor: "border.danger.contrast"
+    }
+  }
+}, Hr = {
+  default: {
+    bgColor: "border",
+    borderColor: "border",
+    cursor: "not-allowed",
+    opacity: 0.6,
+    _placeholder: {
+      color: "text.placeholder",
+      opacity: 1
+    }
+  },
+  onContrast: {
+    bgColor: "border.contrast",
+    borderColor: "border.contrast",
+    cursor: "not-allowed",
+    opacity: 0.6,
+    _placeholder: {
+      color: "text.placeholder.contrast",
+      opacity: 1
+    }
+  }
+}, x = {
+  default: {
+    borderColor: "border.focus",
+    borderWidth: "1px",
+    boxShadow: "0 0 0 1px var(--chakra-colors-border-focus) !important",
+    _hover: {
+      boxShadow: "0 0 0 1px var(--chakra-colors-border-focus)",
+      borderColor: "border.focus"
+    }
+  },
+  onContrast: {
+    borderColor: "border.focus.contrast",
+    borderWidth: "1px",
+    boxShadow: "0 0 0 1px var(--chakra-colors-border-focus-contrast) !important",
+    _hover: {
+      boxShadow: "0 0 0 1px var(--chakra-colors-border-focus-contrast)",
+      borderColor: "border.focus.contrast"
+    }
+  }
+}, Vr = {
+  default: {
+    borderColor: "border.strong"
+  },
+  onContrast: {
+    borderColor: "border.strong.contrast"
+  }
+}, v = (t) => ({
+  ...Wr[t],
+  _hover: {
+    ...Vr[t]
+  },
+  _disabled: {
+    ...Hr[t]
+  },
+  _focus: {
+    ...x[t]
+  },
+  _invalid: {
+    ...Ir[t]
+  }
+}), p = {
+  sm: {
+    fontSize: "sm",
+    minH: "32px"
+  },
+  md: {
+    fontSize: "md",
+    minH: "40px"
+  },
+  lg: {
+    fontSize: "lg",
+    minH: "48px"
+  }
+}, L = u({
+  variants: {
+    variant: {
+      default: v("default"),
+      onContrast: v("onContrast")
+    },
+    size: p
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), Or = [
+  "root",
+  "hiddenInput",
+  "control",
+  "indicator",
+  "label"
+], $r = {
+  sm: {
+    control: {
+      height: l.sm,
+      width: l.sm
+    },
+    label: {
+      fontSize: "sm",
+      ml: m.sm
+    },
+    root: {
+      gap: 0
+    }
+  },
+  md: {
+    control: {
+      height: l.md,
+      width: l.md
+    },
+    label: {
+      fontSize: "md",
+      ml: m.md
+    },
+    root: {
+      gap: 0
+    }
+  },
+  lg: {
+    control: {
+      height: l.lg,
+      width: l.lg
+    },
+    label: {
+      fontSize: "lg",
+      ml: m.lg
+    },
+    root: {
+      gap: 0
+    }
+  }
+}, B = {
+  bg: "background.secondary",
+  borderColor: "background.secondary",
+  color: "text.contrast",
+  _hover: {
+    bg: "background.secondary.hover",
+    borderColor: "background.secondary.hover"
+  },
+  _disabled: {
+    bg: "background.secondary",
+    borderColor: "background.secondary",
+    color: "text.contrast"
+  },
+  _icon: {
+    strokeWidth: "4px !important"
+  }
+}, F = {
+  bg: "background.secondary.contrast",
+  borderColor: "background.secondary.contrast",
+  color: "text",
+  _hover: {
+    bg: "background.secondary.contrast.hover",
+    borderColor: "background.secondary.contrast.hover"
+  },
+  _disabled: {
+    bg: "background.secondary.contrast",
+    borderColor: "background.secondary.contrast",
+    color: "text"
+  }
+}, jr = {
+  default: {
+    control: {
+      bg: "background",
+      color: "text.contrast",
+      _hover: {
+        borderColor: "border.strong"
+      },
+      _checked: { ...B },
+      _indeterminate: { ...B },
+      _disabled: {
+        bg: "background.subtle.less",
+        borderColor: "background.subtle.less"
+      },
+      _invalid: {
+        borderColor: "border.danger",
+        _hover: {
+          borderColor: "border.danger"
+        }
+      }
+    },
+    label: {
+      color: "text"
+    }
+  },
+  onContrast: {
+    control: {
+      bg: "background.contrast",
+      borderColor: "border.subtle",
+      _hover: {
+        borderColor: "border.strong.contrast"
+      },
+      _checked: { ...F },
+      _indeterminate: { ...F },
+      _disabled: {
+        bg: "background.subtle.more.contrast",
+        borderColor: "background.subtle.more.contrast",
+        _hover: {
+          borderColor: "background.subtle.more.contrast"
+        }
+      },
+      _invalid: {
+        borderColor: "border.danger.contrast",
+        _hover: {
+          borderColor: "border.danger.contrast"
+        }
+      }
+    },
+    label: {
+      color: "text.contrast"
+    }
+  }
+}, Gr = c({
+  slots: Or,
+  base: {
+    root: {
+      width: "inherit",
+      _disabled: {
+        cursor: "not-allowed"
+      }
+    },
+    control: {
+      borderWidth: "1px",
+      borderColor: "border.subtle",
+      borderRadius: "xs",
+      _focus: {
+        boxShadow: "none"
+      },
+      _disabled: {
+        opacity: 0.6
+      }
+    },
+    label: {
+      lineHeight: "150%",
+      _disabled: {
+        opacity: 0.6
+      }
+    }
+  },
+  variants: {
+    variant: jr,
+    size: $r
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), Mr = [
+  "root",
+  "item",
+  "itemHiddenInput",
+  "itemControl",
+  "itemText"
+], Pr = {
+  sm: {
+    itemControl: {
+      height: i.sm,
+      width: i.sm
+    },
+    itemText: {
+      ml: _.sm
+    },
+    item: {
+      gap: 0
+    }
+  },
+  md: {
+    itemControl: {
+      height: i.md,
+      width: i.md
+    },
+    itemText: {
+      ml: _.md
+    },
+    item: {
+      gap: 0
+    }
+  },
+  lg: {
+    itemControl: {
+      height: i.lg,
+      width: i.lg
+    },
+    itemText: {
+      ml: _.lg
+    },
+    item: {
+      gap: 0
+    }
+  }
+}, Yr = {
+  default: {
+    itemText: {
+      color: "text"
+    },
+    itemControl: {
+      background: "background",
+      borderColor: "border.subtle",
+      _hover: {
+        borderColor: "border.strong",
+        _disabled: {
+          borderColor: "border.subtle"
+        }
+      },
+      _checked: {
+        background: "background.secondary",
+        borderColor: "border.focus",
+        _hover: {
+          background: "background.secondary.hover",
+          borderColor: "background.secondary.hover"
+        },
+        _disabled: {
+          background: "background.secondary",
+          borderColor: "border.focus",
+          color: "text.contrast",
+          _hover: {
+            background: "background.secondary",
+            borderColor: "border.focus"
+          }
+        }
+      },
+      _disabled: {
+        background: "background.subtle.less",
+        borderColor: "background.subtle.less"
+      },
+      _invalid: {
+        borderColor: "border.danger",
+        _hover: {
+          borderColor: "border.danger"
+        },
+        _checked: {
+          borderColor: "border.focus"
+        },
+        _disabled: {
+          borderColor: "border.subtle"
+        }
+      }
+    }
+  },
+  onContrast: {
+    itemText: {
+      color: "text.contrast"
+    },
+    itemControl: {
+      background: "background.contrast",
+      borderColor: "border.subtle",
+      _hover: {
+        borderColor: "border.strong.contrast",
+        _disabled: {
+          borderColor: "background.subtle.less"
+        }
+      },
+      _checked: {
+        background: "background.secondary.contrast",
+        borderColor: "border.focus.contrast",
+        _before: {
+          bg: "background.contrast"
+        },
+        _hover: {
+          background: "background.secondary.contrast.hover",
+          borderColor: "background.secondary.contrast.hover"
+        },
+        _disabled: {
+          background: "background.secondary.contrast",
+          borderColor: "border.focus.contrast",
+          color: "text.contrast",
+          _hover: {
+            background: "background.secondary.contrast",
+            borderColor: "border.focus.contrast"
+          }
+        }
+      },
+      _disabled: {
+        background: "background.subtle.more",
+        borderColor: "background.subtle.more"
+      },
+      _invalid: {
+        borderColor: "border.danger.contrast",
+        _hover: {
+          borderColor: "border.danger.contrast"
+        },
+        _checked: {
+          borderColor: "border.focus.contrast"
+        },
+        _disabled: {
+          borderColor: "border.more.subtle"
+        }
+      }
+    }
+  }
+}, Nr = c({
+  slots: Mr,
+  base: {
+    root: {
+      width: "inherit",
+      _disabled: {
+        opacity: 0.6
+      },
+      _focus: {
+        boxShadow: "none"
+      }
+    },
+    item: {
+      width: "inherit"
+    },
+    itemControl: {
+      borderWidth: "1px"
+    },
+    itemText: {
+      _disabled: {
+        opacity: 0.6
+      }
+    }
+  },
+  variants: {
+    size: Pr,
+    variant: Yr
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), Jr = [
+  "root",
+  "control",
+  "indicator",
+  "thumb",
+  "label"
+], Kr = {
+  sm: {
+    root: {
+      "--switch-height": "12px",
+      "--switch-width": "24px"
+    },
+    label: {
+      fontSize: "sm"
+    }
+  },
+  md: {
+    root: {
+      "--switch-height": "16px",
+      "--switch-width": "32px"
+    },
+    label: {
+      fontSize: "md"
+    }
+  },
+  lg: {
+    root: {
+      "--switch-height": "20px",
+      "--switch-width": "40px"
+    },
+    label: {
+      fontSize: "lg"
+    }
+  }
+}, s = {
+  controlBg: "background.alpha.pressed",
+  controlBgChecked: "background.secondary",
+  controlInvalidBorder: "border.danger",
+  thumbBg: "background",
+  thumbBgChecked: "background"
+}, d = {
+  controlBg: "background.alpha.contrast.pressed",
+  controlBgChecked: "background.secondary.contrast",
+  controlInvalidBorder: "border.danger.contrast",
+  thumbBg: "background.contrast",
+  thumbBgChecked: "background.contrast"
+}, Xr = {
+  default: {
+    control: {
+      bg: s.controlBg,
+      _checked: {
+        bg: s.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: s.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: s.thumbBg,
+      _checked: {
+        bg: s.thumbBgChecked
+      }
+    }
+  },
+  onContrast: {
+    control: {
+      bg: d.controlBg,
+      _checked: {
+        bg: d.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: d.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: d.thumbBg,
+      _checked: {
+        bg: d.thumbBgChecked
+      }
+    }
+  },
+  indeterminate: {
+    root: {
+      "--switch-diff": "50%"
+    },
+    control: {
+      bg: s.controlBg,
+      _checked: {
+        bg: s.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: s.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: s.thumbBg,
+      translate: "var(--switch-x) 0",
+      _checked: {
+        bg: s.thumbBg
+      }
+    }
+  },
+  indeterminateOnContrast: {
+    root: {
+      "--switch-diff": "50%"
+    },
+    control: {
+      bg: d.controlBg,
+      _checked: {
+        bg: d.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: d.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: d.thumbBg,
+      translate: "var(--switch-x) 0",
+      _checked: {
+        bg: d.thumbBg
+      }
+    }
+  }
+}, Zr = c({
+  slots: Jr,
+  base: {
+    control: {
+      _focusVisible: {
+        outline: "none"
+      }
+    },
+    thumb: {
+      boxShadow: "xsR",
+      height: "var(--switch-height)",
+      width: "var(--switch-height)",
+      scale: 0.8
+    }
+  },
+  variants: {
+    size: Kr,
+    variant: Xr
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), qr = ["root", "list", "trigger", "content"], Qr = {
+  xs: {
+    root: {
+      "--tabs-height": "36px"
+    },
+    trigger: {
+      py: 2
+    }
+  },
+  sm: {
+    root: {
+      "--tabs-height": "44px"
+    },
+    trigger: {
+      py: 3
+    }
+  },
+  md: {
+    root: {
+      "--tabs-height": "52px"
+    },
+    trigger: {
+      py: 4
+    }
+  },
+  lg: {
+    root: {
+      "--tabs-height": "64px"
+    },
+    trigger: {
+      py: 5
+    }
+  }
+}, re = c({
+  slots: qr,
+  base: {
+    list: {
+      borderBottomWidth: "3px !important",
+      borderColor: "border"
+    },
+    trigger: {
+      color: "text",
+      _selected: {
+        background: "transparent",
+        _before: {
+          "--indicator-offset-y": "-3px",
+          bgColor: "background.accent !important",
+          height: "3px !important"
+        },
+        _hover: {
+          background: "transparent"
+        }
+      },
+      _hover: {
+        background: "background.alpha"
+      }
+    }
+  },
+  variants: {
+    size: Qr
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), ee = ["root", "fallback", "image"], oe = {
+  xs: {
+    root: {
+      "--avatar-size": "24px"
+    },
+    fallback: {
+      fontSize: "10px",
+      fontWeight: "semibold"
+    }
+  },
+  sm: {
+    root: {
+      "--avatar-size": "32px"
+    },
+    fallback: {
+      fontSize: "sm"
+    }
+  },
+  md: {
+    root: {
+      "--avatar-size": "36px"
+    },
+    fallback: {
+      fontSize: "md"
+    }
+  },
+  lg: {
+    root: {
+      "--avatar-size": "40px"
+    },
+    fallback: {
+      fontSize: "md"
+    }
+  },
+  xl: {
+    root: {
+      "--avatar-size": "64px",
+      boxShadow: "0 0 0 2px var(--chakra-colors-border-strong-contrast)"
+    },
+    fallback: {
+      fontSize: "2xl"
+    }
+  }
+}, te = {
+  accent: {
+    root: {
+      backgroundColor: "background.accent",
+      borderColor: "border.accent",
+      position: "relative",
+      "&[data-group-item]": {
+        borderColor: "border.accent"
+      }
+    }
+  },
+  contrast: {
+    root: {
+      backgroundColor: "background.subtle.more",
+      borderColor: "background.subtle.more",
+      "&[data-group-item]": {
+        borderColor: "background.subtle.more"
+      }
+    }
+  },
+  dashed: {
+    root: {
+      backgroundColor: "background",
+      borderColor: "transparent",
+      overflow: "visible",
+      color: "text",
+      _after: {
+        content: "''",
+        position: "absolute",
+        top: "-2px",
+        right: "-2px",
+        bottom: "-2px",
+        left: "-2px",
+        border: "1px dashed",
+        borderColor: "border.strong",
+        borderRadius: "100%"
+      },
+      "&[data-group-item]": {
+        borderColor: "transparent"
+      }
+    }
+  },
+  default: {
+    root: {
+      backgroundColor: "background.subtle.most",
+      borderColor: "background.subtle.most",
+      "&[data-group-item]": {
+        borderColor: "background.subtle.most"
+      }
+    }
+  },
+  outlineAccent: {
+    root: {
+      backgroundColor: "background",
+      color: "text.accent",
+      borderColor: "border.accent",
+      overflow: "visible",
+      "&[data-group-item]": {
+        borderColor: "border.accent"
+      }
+    }
+  },
+  outlineYellow: {
+    root: {
+      backgroundColor: "background.warning",
+      borderColor: "border.warning",
+      overflow: "visible",
+      color: "text",
+      "&[data-group-item]": {
+        borderColor: "border.warning"
+      }
+    }
+  }
+}, ae = c({
+  slots: ee,
+  base: {
+    fallback: {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "center",
+      lineHeight: "24px",
+      pt: "1px"
+    },
+    root: {
+      boxShadow: "0 0 0 1px var(--chakra-colors-border-strong-contrast)",
+      color: "text.contrast",
+      zIndex: "calc(var(--group-count) - var(--group-index))"
+    }
+  },
+  variants: {
+    size: oe,
+    variant: te,
+    interactive: {
+      true: {
+        root: {
+          cursor: "pointer",
+          _hover: {
+            img: { opacity: 1 },
+            _after: {
+              content: '""',
+              backgroundColor: "background.alpha.hover",
+              w: "110%",
+              h: "110%",
+              borderRadius: "full",
+              position: "absolute"
+            }
+          },
+          _active: {
+            img: { opacity: 1 },
+            _after: {
+              content: '""',
+              backgroundColor: "background.alpha.pressed",
+              w: "110%",
+              h: "110%",
+              borderRadius: "full",
+              position: "absolute"
+            }
+          }
+        }
+      },
+      false: {
+        root: {
+          cursor: "default"
+        }
+      }
+    },
+    hideBorder: {
+      true: {
+        root: {
+          borderWidth: "0px"
+        }
+      },
+      false: {
+        root: {
+          borderWidth: "2px"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    interactive: !1,
+    hideBorder: !1
+  }
+}), R = {
+  padding: "8px 12px 8px 20px !important"
+}, f = {
+  ...R,
+  cursor: "pointer",
+  _hover: {
+    bgColor: "background.secondaryAlpha.hover"
+  },
+  "&[data-highlighted]": {
+    bgColor: "background.secondaryAlpha.hover !important"
+  }
+}, ne = c({
+  slots: [
+    "checkboxItem",
+    "content",
+    "item",
+    "itemGroupLabel",
+    "trigger",
+    "triggerItem"
+  ],
+  base: {
+    checkboxItem: f,
+    content: {
+      bgColor: "background.overlay",
+      borderColor: "border",
+      boxShadow: "md",
+      px: "0 !important",
+      py: 2
+    },
+    item: f,
+    itemGroupLabel: R,
+    trigger: {
+      _icon: {
+        h: "unset",
+        w: "unset"
+      }
+    },
+    triggerItem: f
+  }
+}), se = c({
+  slots: ["trigger", "item", "valueText", "content"],
+  base: {
+    content: {
+      borderRadius: "base",
+      borderWidth: "1px",
+      boxShadow: "md",
+      px: "0 !important"
+    },
+    item: {
+      justifyContent: "flex-start"
+    },
+    trigger: {
+      justifyContent: "flex-start"
+    },
+    valueText: {
+      alignItems: "center",
+      display: "flex",
+      gap: 2
+    }
+  },
+  variants: {
+    variant: {
+      default: {
+        content: {
+          bgColor: "background",
+          borderColor: "border"
+        },
+        item: {
+          _selected: {
+            bgColor: "background.secondaryAlpha.hover"
+          },
+          "&[data-highlighted]": {
+            bgColor: "background.secondaryAlpha.hover"
+          }
+        },
+        trigger: {
+          ...v("default"),
+          _placeholderShown: {
+            color: "text.placeholder"
+          },
+          _open: {
+            ...x.default
+          }
+        }
+      },
+      onContrast: {
+        content: {
+          bgColor: "background.contrast",
+          borderColor: "border.contrast"
+        },
+        item: {
+          _selected: {
+            bgColor: "background.secondaryAlpha.contrast.hover"
+          },
+          "&[data-highlighted]": {
+            bgColor: "background.secondaryAlpha.contrast.hover"
+          }
+        },
+        trigger: {
+          ...v("onContrast"),
+          _placeholderShown: {
+            color: "text.placeholder.contrast"
+          },
+          _open: {
+            ...x.onContrast
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        item: {
+          fontSize: "sm"
+        },
+        trigger: {
+          ...p.sm
+        }
+      },
+      md: {
+        item: {
+          fontSize: "md"
+        },
+        trigger: {
+          ...p.md
+        }
+      },
+      lg: {
+        item: {
+          fontSize: "lg"
+        },
+        trigger: {
+          ...p.lg
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), de = [
+  "root",
+  "indicator",
+  "content",
+  "title",
+  "description"
+], ce = {
+  default: {
+    root: {
+      bgColor: "background"
+    }
+  },
+  error: {
+    root: {
+      bgColor: "background.danger"
+    }
+  },
+  info: {
+    root: {
+      bgColor: "background.info"
+    }
+  },
+  success: {
+    root: {
+      bgColor: "background.success"
+    }
+  },
+  warning: {
+    root: {
+      bgColor: "background.warning"
+    }
+  }
+}, le = c({
+  slots: de,
+  base: {
+    content: {
+      gap: 0
+    },
+    root: {
+      borderRadius: "md",
+      color: "text",
+      pt: "8px !important",
+      pr: "12px !important",
+      pb: "8px !important",
+      pl: "12px !important",
+      width: "inherit"
+    },
+    title: {
+      alignItems: "center",
+      display: "flex"
+    }
+  },
+  variants: {
+    variant: ce,
+    hideIcon: {
+      true: {
+        root: {
+          gap: 0
+        }
+      },
+      false: {
+        root: {
+          gap: 2
+        }
+      }
+    },
+    onContrast: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "success",
+    hideIcon: !1,
+    onContrast: !1
+  },
+  compoundVariants: [
+    {
+      onContrast: !0,
+      variant: "default",
+      css: { root: { bgColor: "background.contrast", color: "text.contrast" } }
+    },
+    {
+      onContrast: !0,
+      variant: "error",
+      css: {
+        root: { bgColor: "background.danger.contrast", color: "text.contrast" }
+      }
+    },
+    {
+      onContrast: !0,
+      variant: "info",
+      css: { root: { bgColor: "background.contrast", color: "text.contrast" } }
+    },
+    {
+      onContrast: !0,
+      variant: "success",
+      css: {
+        root: {
+          bgColor: "background.success.contrast",
+          color: "text.contrast"
+        }
+      }
+    },
+    {
+      onContrast: !0,
+      variant: "warning",
+      css: {
+        root: {
+          bgColor: "background.warning.contrast",
+          color: "text.contrast"
+        }
+      }
+    }
+  ]
+}), ie = c({
+  slots: [
+    "root",
+    "backdrop",
+    "positioner",
+    "content",
+    "closeTrigger",
+    "header",
+    "title",
+    "body",
+    "footer",
+    "actionTrigger"
+  ],
+  base: {
+    backdrop: {
+      transition: "background 0.7s ease-in-out"
+    },
+    body: {
+      pb: 3,
+      pt: 0
+    },
+    content: {
+      transition: "all 0.7s ease-in-out"
+    },
+    footer: {
+      pt: 3,
+      pb: 6
+    },
+    header: {
+      maxW: "85%",
+      py: 3
+    }
+  },
+  variants: {
+    expanded: {
+      true: {
+        backdrop: {
+          background: "{colors.neutral.100}"
+        },
+        content: {
+          borderRadius: "none",
+          minH: "100%",
+          minW: "650px"
+        }
+      },
+      false: {
+        backdrop: {
+          background: "{colors.blackAlpha.600}"
+        },
+        content: {
+          minH: "100px",
+          minW: "300px"
+        }
+      }
+    }
+  },
+  defaultVariants: {}
+}), be = $({
+  theme: {
+    tokens: {
+      blurs: tr,
+      borders: ar,
+      colors: dr,
+      durations: vr,
+      easings: kr,
+      letterSpacings: hr,
+      lineHeights: ur,
+      fonts: ir,
+      fontSizes: br,
+      fontWeights: gr,
+      radii: nr,
+      shadows: cr,
+      sizes: lr,
+      spacing: pr,
+      zIndex: mr
+    },
+    semanticTokens: {
+      colors: Ar
+    },
+    recipes: {
+      button: E,
+      heading: zr,
+      iconButton: E,
+      input: L,
+      link: Tr,
+      text: Sr,
+      textarea: L
+    },
+    slotRecipes: {
+      avatar: ae,
+      checkbox: Gr,
+      radioGroup: Nr,
+      switch: Zr,
+      tabs: re,
+      tag: Fr,
+      popover: S,
+      hoverCard: S,
+      menu: ne,
+      select: se,
+      alert: le,
+      dialog: ie
+    }
+  },
+  globalCss: {
+    "button:focus-visible, button[data-focus-visible]": {
+      outline: "none !important",
+      boxShadow: "none !important"
+    },
+    "html, body": {
+      color: "text"
+    }
+  }
+}), ge = O(j, be), Te = ({
+  customTheme: t,
+  children: b,
+  ...g
+}) => /* @__PURE__ */ h.jsxs(G, { value: t ?? ge, children: [
+  /* @__PURE__ */ h.jsx(
+    M,
+    {
+      styles: `
+          @import url("https://use.typekit.net/wtr4buu.css");
+          @font-face {
+            font-family: "aktiv-grotesk", sans-serif;
+            font-style: normal;
+            font-weight: 400;
+          }
+          @font-face {
+            font-family: "aktiv-grotesk", sans-serif;
+            font-style: italic;
+            font-weight: 400;
+          }
+          @font-face {
+            font-family: "aktiv-grotesk", sans-serif;
+            font-style: normal;
+            font-weight: 600;
+          }
+          @font-face {
+            font-family: "aktiv-grotesk", sans-serif;
+            font-style: italic;
+            font-weight: 600;
+          }
+        `
+    }
+  ),
+  /* @__PURE__ */ h.jsx(or, { ...g, children: b })
+] });
 export {
-  r as KibbleThemeProvider,
-  m as system
+  Te as KibbleThemeProvider
 };
 //# sourceMappingURL=index.js.map