@televet/kibble-ui 4.0.0-beta.29 → 4.0.0-beta.30

package/dist/chunks/theme.provider-BBYAbeey.js

@@ -0,0 +1,2681 @@
+import { x as s, eE as V, ew as j } from "./vendor-CRIhG-7s.js";
+import { bK as n, bL as O, b1 as m, av as d, bM as $, bN as M, bO as P, bP as G, bQ as N, bR as K, bS as Y } from "./chakra-CM93-d7A.js";
+import { coreColors as e } from "../esm/theme/tokens/colors/index.js";
+import { a as J, f as k } from "./typography.records-CG4wIBxE.js";
+import { f as S, t as w } from "./typography-Cqrokog3.js";
+import { a as f, C as u } from "./checkbox.records-JWbKQ684.js";
+import { a as y, R as p } from "./radio.records-Cc3kP4Vn.js";
+import { p as T } from "./popover.recipe-BecbuU0C.js";
+import { A as Q } from "./alert.component-BckFT52S.js";
+import { b as q, a as X, c as Z, t as rr, d as er, e as or } from "./toaster.records-GZYhSv5r.js";
+const tr = (t) => /* @__PURE__ */ s.jsx(V, { attribute: "class", disableTransitionOnChange: !0, ...t }), ar = {
+  none: "0",
+  sm: "4px",
+  base: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "40px",
+  "3xl": "64px"
+}, a = (t) => Object.fromEntries(
+  Object.entries(t).map(([i, b]) => [
+    i,
+    { value: String(b) }
+  ])
+), nr = n.blurs(a(ar)), sr = {
+  none: "0",
+  "1px": "1px solid",
+  "2px": "2px solid",
+  "4px": "4px solid",
+  "8px": "8px solid"
+}, dr = {
+  none: "0",
+  xs: "0.125rem",
+  sm: "0.375rem",
+  base: "0.5rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.5rem",
+  "2xl": "2rem",
+  "3xl": "2.5rem",
+  full: "9999px"
+}, cr = n.borders(a(sr)), lr = n.radii(a(dr)), ir = (t) => Object.fromEntries(
+  Object.entries(t).map(([i, b]) => [
+    i,
+    Object.fromEntries(
+      Object.entries(b).map(([_, x]) => [_, { value: x }])
+    )
+  ])
+), br = n.colors(ir(e)), gr = {
+  xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+  xsR: "0px 0px 0px 1px rgba(0, 0, 0, 0.05)",
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  smR: " 0px -1px 2px rgba(0, 0, 0, 0.05)",
+  base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+  baseR: "0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06)",
+  mdR: "0px -4px 6px -1px rgba(0, 0, 0, 0.1), 0px -2px 4px -1px rgba(0, 0, 0, 0.06)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  lgR: "0px -10px 15px -3px rgba(0, 0, 0, 0.1), 0px -4px 6px -2px rgba(0, 0, 0, 0.05)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+  xlR: "0px -20px 25px -5px rgba(0, 0, 0, 0.1), 0px -10px 10px -5px rgba(0, 0, 0, 0.04)",
+  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  "2xlR": "0px -25px 50px -12px rgba(0, 0, 0, 0.25)",
+  outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+  hover: "0 0 0 3px #EDEBEB",
+  // border || border.default
+  "hover.contrast": "0 0 0 3px #504D4C",
+  // border.contrast
+  active: "0 0 0 3px #497CC3",
+  // border.focus
+  "active.contrast": "0 0 0 3px #CBE2FF",
+  // border.focus.contrast
+  inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)",
+  none: "none",
+  "dark-lg": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
+}, ur = n.shadows(a(gr)), pr = {
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem"
+}, hr = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
+}, vr = n.sizes({
+  ...a(pr),
+  container: {
+    ...a(hr)
+  }
+}), xr = n.fonts(a(J)), mr = n.fontSizes(
+  a(k)
+), kr = n.fontWeights(
+  a(k)
+), _r = n.lineHeights(
+  a(k)
+), fr = n.letterSpacings(
+  a(k)
+), yr = {
+  px: "1px",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+}, Cr = n.spacing(a(yr)), Ar = {
+  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+}, Sr = {
+  "ultra-fast": "50ms",
+  faster: "100ms",
+  fast: "150ms",
+  normal: "200ms",
+  slow: "300ms",
+  slower: "400ms",
+  "ultra-slow": "500ms"
+}, wr = n.durations(
+  a(Sr)
+), zr = n.easings(
+  a(Ar)
+), Tr = {
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1e3,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800,
+  tooltipExtra: 1e4
+}, Dr = n.zIndex(a(Tr)), 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]
+      }
+    },
+    dark: {
+      value: {
+        _light: e.primary[800],
+        _dark: e.primary[300]
+      }
+    }
+  },
+  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%)`
+      }
+    }
+  }
+}, D = o(
+  r.neutral.default
+), Er = {
+  DEFAULT: D,
+  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: D,
+  info: r.secondary.default,
+  interactive: {
+    DEFAULT: r.secondary.default,
+    contrast: {
+      DEFAULT: o(r.secondary.default),
+      hover: o(r.secondary.hover)
+    },
+    hover: r.secondary.hover
+  },
+  logo: {
+    DEFAULT: r.primary.dark,
+    contrast: o(r.primary.dark)
+  },
+  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
+}, E = r.neutral.subtle2, Lr = {
+  DEFAULT: E,
+  default: E
+}, L = r.neutral.subtle2, Rr = {
+  DEFAULT: L,
+  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: L,
+  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
+}, R = r.neutral.default, Br = {
+  DEFAULT: R,
+  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: R,
+  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
+  }
+}, Fr = {
+  background: Br,
+  border: Rr,
+  divider: Lr,
+  text: Er
+}, Ur = O.colors(
+  Fr
+), W = {
+  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" }
+}, z = "150%", Ir = m({
+  base: {
+    lineHeight: z
+  },
+  variants: {
+    variant: w,
+    size: W,
+    fontWeight: S
+  },
+  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%" }
+}, Hr = m({
+  base: {
+    fontWeight: "semibold"
+  },
+  variants: {
+    variant: w,
+    size: Wr,
+    fontWeight: S
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "lg",
+    fontWeight: "semibold"
+  }
+}), Vr = m({
+  base: {
+    lineHeight: z,
+    textDecoration: "underline"
+  },
+  variants: {
+    variant: w,
+    size: W,
+    fontWeight: S
+  },
+  defaultVariants: {
+    variant: "interactive",
+    size: "md",
+    fontWeight: "normal"
+  }
+}), jr = ["root", "label", "closeTrigger"], Or = {
+  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"
+    }
+  }
+}, $r = {
+  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"
+      }
+    }
+  }
+}, Mr = {
+  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: {}
+}, Pr = d({
+  slots: jr,
+  base: {
+    root: {
+      borderRadius: "md",
+      boxShadow: "none",
+      gap: 0,
+      position: "relative"
+    },
+    label: {
+      fontWeight: "semibold",
+      overflowY: "visible",
+      lineHeight: z
+    },
+    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: $r,
+    variant: Or,
+    closeButtonDisplay: Mr
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    closeButtonDisplay: "never"
+  }
+}), Gr = {
+  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
+  }
+}, Nr = {
+  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"
+  }
+}, B = m({
+  base: {
+    borderColor: "transparent",
+    borderRadius: "base",
+    borderWidth: "1px",
+    fontWeight: "semibold",
+    letterSpacing: "0.12px",
+    lineHeight: "150%"
+  },
+  variants: {
+    variant: Nr,
+    size: Gr
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), Kr = {
+  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"
+    }
+  }
+}, Yr = {
+  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"
+    }
+  }
+}, Jr = {
+  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
+    }
+  }
+}, A = {
+  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"
+    }
+  }
+}, Qr = {
+  default: {
+    borderColor: "border.strong"
+  },
+  onContrast: {
+    borderColor: "border.strong.contrast"
+  }
+}, v = (t) => ({
+  ...Kr[t],
+  _hover: {
+    ...Qr[t]
+  },
+  _disabled: {
+    ...Jr[t]
+  },
+  _focus: {
+    ...A[t]
+  },
+  _invalid: {
+    ...Yr[t]
+  }
+}), g = {
+  sm: {
+    fontSize: "sm",
+    minH: "32px"
+  },
+  md: {
+    fontSize: "md",
+    minH: "40px"
+  },
+  lg: {
+    fontSize: "lg",
+    minH: "48px"
+  }
+}, F = m({
+  variants: {
+    variant: {
+      default: v("default"),
+      onContrast: v("onContrast")
+    },
+    size: g
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), qr = [
+  "root",
+  "hiddenInput",
+  "control",
+  "indicator",
+  "label"
+], Xr = {
+  sm: {
+    control: {
+      height: u.sm,
+      width: u.sm
+    },
+    label: {
+      fontSize: "sm",
+      ml: f.sm
+    },
+    root: {
+      gap: 0
+    }
+  },
+  md: {
+    control: {
+      height: u.md,
+      width: u.md
+    },
+    label: {
+      fontSize: "md",
+      ml: f.md
+    },
+    root: {
+      gap: 0
+    }
+  },
+  lg: {
+    control: {
+      height: u.lg,
+      width: u.lg
+    },
+    label: {
+      fontSize: "lg",
+      ml: f.lg
+    },
+    root: {
+      gap: 0
+    }
+  }
+}, U = {
+  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"
+  }
+}, I = {
+  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"
+  }
+}, Zr = {
+  default: {
+    control: {
+      bg: "background",
+      color: "text.contrast",
+      _hover: {
+        borderColor: "border.strong"
+      },
+      _checked: { ...U },
+      _indeterminate: { ...U },
+      _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: { ...I },
+      _indeterminate: { ...I },
+      _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"
+    }
+  }
+}, re = d({
+  slots: qr,
+  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: Zr,
+    size: Xr
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), ee = [
+  "root",
+  "item",
+  "itemHiddenInput",
+  "itemControl",
+  "itemText"
+], oe = {
+  sm: {
+    itemControl: {
+      height: p.sm,
+      width: p.sm
+    },
+    itemText: {
+      ml: y.sm
+    },
+    item: {
+      gap: 0
+    }
+  },
+  md: {
+    itemControl: {
+      height: p.md,
+      width: p.md
+    },
+    itemText: {
+      ml: y.md
+    },
+    item: {
+      gap: 0
+    }
+  },
+  lg: {
+    itemControl: {
+      height: p.lg,
+      width: p.lg
+    },
+    itemText: {
+      ml: y.lg
+    },
+    item: {
+      gap: 0
+    }
+  }
+}, te = {
+  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"
+        }
+      }
+    }
+  }
+}, ae = d({
+  slots: ee,
+  base: {
+    root: {
+      width: "inherit",
+      _disabled: {
+        opacity: 0.6
+      },
+      _focus: {
+        boxShadow: "none"
+      }
+    },
+    item: {
+      width: "inherit"
+    },
+    itemControl: {
+      borderWidth: "1px"
+    },
+    itemText: {
+      _disabled: {
+        opacity: 0.6
+      }
+    }
+  },
+  variants: {
+    size: oe,
+    variant: te
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), ne = [
+  "root",
+  "control",
+  "indicator",
+  "thumb",
+  "label"
+], se = {
+  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"
+    }
+  }
+}, c = {
+  controlBg: "background.alpha.pressed",
+  controlBgChecked: "background.secondary",
+  controlInvalidBorder: "border.danger",
+  thumbBg: "background",
+  thumbBgChecked: "background"
+}, l = {
+  controlBg: "background.alpha.contrast.pressed",
+  controlBgChecked: "background.secondary.contrast",
+  controlInvalidBorder: "border.danger.contrast",
+  thumbBg: "background.contrast",
+  thumbBgChecked: "background.contrast"
+}, de = {
+  default: {
+    control: {
+      bg: c.controlBg,
+      _checked: {
+        bg: c.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: c.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: c.thumbBg,
+      _checked: {
+        bg: c.thumbBgChecked
+      }
+    }
+  },
+  onContrast: {
+    control: {
+      bg: l.controlBg,
+      _checked: {
+        bg: l.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: l.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: l.thumbBg,
+      _checked: {
+        bg: l.thumbBgChecked
+      }
+    }
+  },
+  indeterminate: {
+    root: {
+      "--switch-diff": "50%"
+    },
+    control: {
+      bg: c.controlBg,
+      _checked: {
+        bg: c.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: c.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: c.thumbBg,
+      translate: "var(--switch-x) 0",
+      _checked: {
+        bg: c.thumbBg
+      }
+    }
+  },
+  indeterminateOnContrast: {
+    root: {
+      "--switch-diff": "50%"
+    },
+    control: {
+      bg: l.controlBg,
+      _checked: {
+        bg: l.controlBgChecked
+      },
+      _invalid: {
+        outlineColor: l.controlInvalidBorder
+      }
+    },
+    thumb: {
+      bg: l.thumbBg,
+      translate: "var(--switch-x) 0",
+      _checked: {
+        bg: l.thumbBg
+      }
+    }
+  }
+}, ce = d({
+  slots: ne,
+  base: {
+    control: {
+      _focusVisible: {
+        outline: "none"
+      }
+    },
+    thumb: {
+      boxShadow: "xsR",
+      height: "var(--switch-height)",
+      width: "var(--switch-height)",
+      scale: 0.8
+    }
+  },
+  variants: {
+    size: se,
+    variant: de
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), le = ["root", "list", "trigger", "content"], ie = {
+  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
+    }
+  }
+}, be = d({
+  slots: le,
+  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: ie
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), ge = ["root", "fallback", "image"], ue = {
+  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"
+    }
+  }
+}, pe = {
+  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"
+      }
+    }
+  }
+}, he = d({
+  slots: ge,
+  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: ue,
+    variant: pe,
+    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
+  }
+}), H = {
+  padding: "8px 12px 8px 20px !important"
+}, C = {
+  ...H,
+  cursor: "pointer",
+  _hover: {
+    bgColor: "background.secondaryAlpha.hover"
+  },
+  "&[data-highlighted]": {
+    bgColor: "background.secondaryAlpha.hover !important"
+  }
+}, ve = d({
+  slots: [
+    "checkboxItem",
+    "content",
+    "item",
+    "itemGroupLabel",
+    "trigger",
+    "triggerItem"
+  ],
+  base: {
+    checkboxItem: C,
+    content: {
+      bgColor: "background.overlay",
+      borderColor: "border",
+      boxShadow: "md",
+      px: "0 !important",
+      py: 2
+    },
+    item: C,
+    itemGroupLabel: H,
+    trigger: {
+      _icon: {
+        h: "unset",
+        w: "unset"
+      }
+    },
+    triggerItem: C
+  }
+}), xe = d({
+  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: {
+            ...A.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: {
+            ...A.onContrast
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        item: {
+          fontSize: "sm"
+        },
+        trigger: {
+          ...g.sm
+        }
+      },
+      md: {
+        item: {
+          fontSize: "md"
+        },
+        trigger: {
+          ...g.md
+        }
+      },
+      lg: {
+        item: {
+          fontSize: "lg"
+        },
+        trigger: {
+          ...g.lg
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), me = [
+  "root",
+  "indicator",
+  "content",
+  "title",
+  "description"
+], ke = {
+  default: {
+    root: {
+      bgColor: "background"
+    }
+  },
+  error: {
+    root: {
+      bgColor: "background.danger"
+    }
+  },
+  info: {
+    root: {
+      bgColor: "background.info"
+    }
+  },
+  success: {
+    root: {
+      bgColor: "background.success"
+    }
+  },
+  warning: {
+    root: {
+      bgColor: "background.warning"
+    }
+  }
+}, _e = d({
+  slots: me,
+  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: ke,
+    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"
+        }
+      }
+    }
+  ]
+}), fe = d({
+  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: {}
+}), ye = d({
+  slots: ["root", "control", "input", "hiddenInput"],
+  base: {},
+  variants: {
+    size: {
+      sm: {
+        input: g.sm
+      },
+      md: {
+        input: g.md
+      },
+      lg: {
+        input: g.lg
+      }
+    },
+    variant: {
+      default: {
+        input: v("default")
+      },
+      onContrast: {
+        input: v("onContrast")
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+}), Ce = M({
+  theme: {
+    tokens: {
+      blurs: nr,
+      borders: cr,
+      colors: br,
+      durations: wr,
+      easings: zr,
+      letterSpacings: fr,
+      lineHeights: _r,
+      fonts: xr,
+      fontSizes: mr,
+      fontWeights: kr,
+      radii: lr,
+      shadows: ur,
+      sizes: vr,
+      spacing: Cr,
+      zIndex: Dr
+    },
+    semanticTokens: {
+      colors: Ur
+    },
+    recipes: {
+      button: B,
+      heading: Hr,
+      iconButton: B,
+      input: F,
+      link: Vr,
+      text: Ir,
+      textarea: F
+    },
+    slotRecipes: {
+      avatar: he,
+      checkbox: re,
+      radioGroup: ae,
+      switch: ce,
+      tabs: be,
+      tag: Pr,
+      popover: T,
+      hoverCard: T,
+      menu: ve,
+      select: xe,
+      alert: _e,
+      dialog: fe,
+      pinInput: ye
+    }
+  },
+  globalCss: {
+    "button:focus-visible, button[data-focus-visible]": {
+      outline: "none !important",
+      boxShadow: "none !important"
+    },
+    "html, body": {
+      color: "text"
+    }
+  }
+}), Ae = $(P, Ce), h = ({ toaster: t }) => /* @__PURE__ */ s.jsx(j, { children: /* @__PURE__ */ s.jsx(
+  G,
+  {
+    className: "Toaster",
+    "data-testid": "kibble-toaster",
+    toaster: t,
+    children: ({ id: i, title: b, description: _, meta: x }) => /* @__PURE__ */ s.jsx(
+      Q,
+      {
+        className: "Toast",
+        "data-testid": "kibble-toast",
+        onContrast: !0,
+        id: i,
+        title: b,
+        description: _,
+        status: x?.type,
+        ...x,
+        onClose: () => {
+          x?.onClose?.(), t.dismiss(i);
+        }
+      }
+    )
+  }
+) }), Ue = ({
+  customTheme: t,
+  children: i,
+  ...b
+}) => /* @__PURE__ */ s.jsxs(N, { value: t ?? Ae, children: [
+  /* @__PURE__ */ s.jsx(K, { value: null, children: /* @__PURE__ */ s.jsx(
+    Y,
+    {
+      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__ */ s.jsx(h, { toaster: q }),
+  /* @__PURE__ */ s.jsx(h, { toaster: X }),
+  /* @__PURE__ */ s.jsx(h, { toaster: Z }),
+  /* @__PURE__ */ s.jsx(h, { toaster: rr }),
+  /* @__PURE__ */ s.jsx(h, { toaster: er }),
+  /* @__PURE__ */ s.jsx(h, { toaster: or }),
+  /* @__PURE__ */ s.jsx(tr, { ...b, children: i })
+] });
+export {
+  Ue as K,
+  Ae as s
+};
+//# sourceMappingURL=theme.provider-BBYAbeey.js.map