@televet/kibble-ui 4.0.0-beta.3 → 4.0.0-beta.31

package/dist/theme/index.es.js

@@ -1,2480 +0,0 @@
-import { x as h, bW as H } from "../vendor-XkLb814A.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 "../chakra-Cg-UT2Wv.js";
-import { blurs as P } from "./tokens/blurs/index.es.js";
-import { borders as Y, radii as N } from "./tokens/borders/index.es.js";
-import { coreColors as e } from "./tokens/colors/index.es.js";
-import { shadows as J } from "./tokens/shadows/index.es.js";
-import { breakpointSizes as K, sizes as X } from "./tokens/sizes/index.es.js";
-import { fonts as Z, fontSizes as k } from "./tokens/typography/index.es.js";
-import { spacing as q } from "./tokens/spacing/index.es.js";
-import { transitionDurations as Q, transitionEasings as rr } from "./tokens/transitions/index.es.js";
-import { zIndices as er } from "./tokens/zIndices/index.es.js";
-import { f as y, t as C } from "../typography-Cqrokog3.js";
-import { a as m, C as l } from "../checkbox.records-JWbKQ684.js";
-import { a as _, R as i } from "../radio.records-Cc3kP4Vn.js";
-import { p as S } from "../popover.recipe-Z3__2_wc.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 {
-  Te as KibbleThemeProvider
-};
-//# sourceMappingURL=index.es.js.map