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

package/dist/esm/theme/index.js

@@ -1,2650 +1,6 @@
-import { x as v, ew as H } from "../../chunks/vendor-Dap5yPke.js";
-import { bK as n, bL as V, aY as h, av as s, bM as O, bN as $, bO as j, bP as M, bQ as G } from "../../chunks/chakra-CWqbAp8a.js";
-import { coreColors as e } from "./tokens/colors/index.js";
-import { a as P, f as x } from "../../chunks/typography.records-CG4wIBxE.js";
-import { f as y, t as C } from "../../chunks/typography-Cqrokog3.js";
-import { a as m, C as i } from "../../chunks/checkbox.records-JWbKQ684.js";
-import { a as k, R as b } from "../../chunks/radio.records-Cc3kP4Vn.js";
-import { p as S } from "../../chunks/popover.recipe-lAn37vit.js";
-const N = (t) => /* @__PURE__ */ v.jsx(H, { attribute: "class", disableTransitionOnChange: !0, ...t }), Y = {
-  none: "0",
-  sm: "4px",
-  base: "8px",
-  md: "12px",
-  lg: "16px",
-  xl: "24px",
-  "2xl": "40px",
-  "3xl": "64px"
-}, a = (t) => Object.fromEntries(
-  Object.entries(t).map(([u, p]) => [
-    u,
-    { value: String(p) }
-  ])
-), K = n.blurs(a(Y)), J = {
-  none: "0",
-  "1px": "1px solid",
-  "2px": "2px solid",
-  "4px": "4px solid",
-  "8px": "8px solid"
-}, Q = {
-  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"
-}, q = n.borders(a(J)), X = n.radii(a(Q)), Z = (t) => Object.fromEntries(
-  Object.entries(t).map(([u, p]) => [
-    u,
-    Object.fromEntries(
-      Object.entries(p).map(([I, W]) => [I, { value: W }])
-    )
-  ])
-), rr = n.colors(Z(e)), er = {
-  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"
-}, or = n.shadows(a(er)), tr = {
-  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"
-}, ar = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px"
-}, nr = n.sizes({
-  ...a(tr),
-  container: {
-    ...a(ar)
-  }
-}), sr = n.fonts(a(P)), dr = n.fontSizes(
-  a(x)
-), cr = n.fontWeights(
-  a(x)
-), lr = n.lineHeights(
-  a(x)
-), ir = n.letterSpacings(
-  a(x)
-), br = {
-  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"
-}, gr = n.spacing(a(br)), ur = {
-  "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)"
-}, pr = {
-  "ultra-fast": "50ms",
-  faster: "100ms",
-  fast: "150ms",
-  normal: "200ms",
-  slow: "300ms",
-  slower: "400ms",
-  "ultra-slow": "500ms"
-}, hr = n.durations(
-  a(pr)
-), vr = n.easings(
-  a(ur)
-), xr = {
-  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
-}, mr = n.zIndex(a(xr)), 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%)`
-      }
-    }
-  }
-}, w = o(
-  r.neutral.default
-), kr = {
-  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
-  },
-  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
-}, z = r.neutral.subtle2, _r = {
-  DEFAULT: z,
-  default: z
-}, T = r.neutral.subtle2, fr = {
-  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: fr,
-  divider: _r,
-  text: kr
-}, Ar = V.colors(
-  Cr
-), F = {
-  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 = h({
-  base: {
-    lineHeight: A
-  },
-  variants: {
-    variant: C,
-    size: F,
-    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 = h({
-  base: {
-    fontWeight: "semibold"
-  },
-  variants: {
-    variant: C,
-    size: wr,
-    fontWeight: y
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "lg",
-    fontWeight: "semibold"
-  }
-}), Tr = h({
-  base: {
-    lineHeight: A,
-    textDecoration: "underline"
-  },
-  variants: {
-    variant: C,
-    size: F,
-    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"
-      }
-    }
-  }
-}, Rr = {
-  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: {}
-}, Br = s({
-  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: Rr
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-    closeButtonDisplay: "never"
-  }
-}), Fr = {
-  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
-  }
-}, Ur = {
-  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 = h({
-  base: {
-    borderColor: "transparent",
-    borderRadius: "base",
-    borderWidth: "1px",
-    fontWeight: "semibold",
-    letterSpacing: "0.12px",
-    lineHeight: "150%"
-  },
-  variants: {
-    variant: Ur,
-    size: Fr
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "primary"
-  }
-}), Ir = {
-  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"
-    }
-  }
-}, Wr = {
-  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
-    }
-  }
-}, f = {
-  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"
-  }
-}, g = (t) => ({
-  ...Ir[t],
-  _hover: {
-    ...Vr[t]
-  },
-  _disabled: {
-    ...Hr[t]
-  },
-  _focus: {
-    ...f[t]
-  },
-  _invalid: {
-    ...Wr[t]
-  }
-}), l = {
-  sm: {
-    fontSize: "sm",
-    minH: "32px"
-  },
-  md: {
-    fontSize: "md",
-    minH: "40px"
-  },
-  lg: {
-    fontSize: "lg",
-    minH: "48px"
-  }
-}, L = h({
-  variants: {
-    variant: {
-      default: g("default"),
-      onContrast: g("onContrast")
-    },
-    size: l
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default"
-  }
-}), Or = [
-  "root",
-  "hiddenInput",
-  "control",
-  "indicator",
-  "label"
-], $r = {
-  sm: {
-    control: {
-      height: i.sm,
-      width: i.sm
-    },
-    label: {
-      fontSize: "sm",
-      ml: m.sm
-    },
-    root: {
-      gap: 0
-    }
-  },
-  md: {
-    control: {
-      height: i.md,
-      width: i.md
-    },
-    label: {
-      fontSize: "md",
-      ml: m.md
-    },
-    root: {
-      gap: 0
-    }
-  },
-  lg: {
-    control: {
-      height: i.lg,
-      width: i.lg
-    },
-    label: {
-      fontSize: "lg",
-      ml: m.lg
-    },
-    root: {
-      gap: 0
-    }
-  }
-}, R = {
-  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"
-  }
-}, B = {
-  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: { ...R },
-      _indeterminate: { ...R },
-      _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: { ...B },
-      _indeterminate: { ...B },
-      _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"
-    }
-  }
-}, Mr = s({
-  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"
-  }
-}), Gr = [
-  "root",
-  "item",
-  "itemHiddenInput",
-  "itemControl",
-  "itemText"
-], Pr = {
-  sm: {
-    itemControl: {
-      height: b.sm,
-      width: b.sm
-    },
-    itemText: {
-      ml: k.sm
-    },
-    item: {
-      gap: 0
-    }
-  },
-  md: {
-    itemControl: {
-      height: b.md,
-      width: b.md
-    },
-    itemText: {
-      ml: k.md
-    },
-    item: {
-      gap: 0
-    }
-  },
-  lg: {
-    itemControl: {
-      height: b.lg,
-      width: b.lg
-    },
-    itemText: {
-      ml: k.lg
-    },
-    item: {
-      gap: 0
-    }
-  }
-}, Nr = {
-  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"
-        }
-      }
-    }
-  }
-}, Yr = s({
-  slots: Gr,
-  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: Nr
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default"
-  }
-}), Kr = [
-  "root",
-  "control",
-  "indicator",
-  "thumb",
-  "label"
-], Jr = {
-  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"
-    }
-  }
-}, d = {
-  controlBg: "background.alpha.pressed",
-  controlBgChecked: "background.secondary",
-  controlInvalidBorder: "border.danger",
-  thumbBg: "background",
-  thumbBgChecked: "background"
-}, c = {
-  controlBg: "background.alpha.contrast.pressed",
-  controlBgChecked: "background.secondary.contrast",
-  controlInvalidBorder: "border.danger.contrast",
-  thumbBg: "background.contrast",
-  thumbBgChecked: "background.contrast"
-}, Qr = {
-  default: {
-    control: {
-      bg: d.controlBg,
-      _checked: {
-        bg: d.controlBgChecked
-      },
-      _invalid: {
-        outlineColor: d.controlInvalidBorder
-      }
-    },
-    thumb: {
-      bg: d.thumbBg,
-      _checked: {
-        bg: d.thumbBgChecked
-      }
-    }
-  },
-  onContrast: {
-    control: {
-      bg: c.controlBg,
-      _checked: {
-        bg: c.controlBgChecked
-      },
-      _invalid: {
-        outlineColor: c.controlInvalidBorder
-      }
-    },
-    thumb: {
-      bg: c.thumbBg,
-      _checked: {
-        bg: c.thumbBgChecked
-      }
-    }
-  },
-  indeterminate: {
-    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
-      }
-    }
-  },
-  indeterminateOnContrast: {
-    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
-      }
-    }
-  }
-}, qr = s({
-  slots: Kr,
-  base: {
-    control: {
-      _focusVisible: {
-        outline: "none"
-      }
-    },
-    thumb: {
-      boxShadow: "xsR",
-      height: "var(--switch-height)",
-      width: "var(--switch-height)",
-      scale: 0.8
-    }
-  },
-  variants: {
-    size: Jr,
-    variant: Qr
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default"
-  }
-}), Xr = ["root", "list", "trigger", "content"], Zr = {
-  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 = s({
-  slots: Xr,
-  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: Zr
-  },
-  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 = s({
-  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
-  }
-}), U = {
-  padding: "8px 12px 8px 20px !important"
-}, _ = {
-  ...U,
-  cursor: "pointer",
-  _hover: {
-    bgColor: "background.secondaryAlpha.hover"
-  },
-  "&[data-highlighted]": {
-    bgColor: "background.secondaryAlpha.hover !important"
-  }
-}, ne = s({
-  slots: [
-    "checkboxItem",
-    "content",
-    "item",
-    "itemGroupLabel",
-    "trigger",
-    "triggerItem"
-  ],
-  base: {
-    checkboxItem: _,
-    content: {
-      bgColor: "background.overlay",
-      borderColor: "border",
-      boxShadow: "md",
-      px: "0 !important",
-      py: 2
-    },
-    item: _,
-    itemGroupLabel: U,
-    trigger: {
-      _icon: {
-        h: "unset",
-        w: "unset"
-      }
-    },
-    triggerItem: _
-  }
-}), se = s({
-  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: {
-          ...g("default"),
-          _placeholderShown: {
-            color: "text.placeholder"
-          },
-          _open: {
-            ...f.default
-          }
-        }
-      },
-      onContrast: {
-        content: {
-          bgColor: "background.contrast",
-          borderColor: "border.contrast"
-        },
-        item: {
-          _selected: {
-            bgColor: "background.secondaryAlpha.contrast.hover"
-          },
-          "&[data-highlighted]": {
-            bgColor: "background.secondaryAlpha.contrast.hover"
-          }
-        },
-        trigger: {
-          ...g("onContrast"),
-          _placeholderShown: {
-            color: "text.placeholder.contrast"
-          },
-          _open: {
-            ...f.onContrast
-          }
-        }
-      }
-    },
-    size: {
-      sm: {
-        item: {
-          fontSize: "sm"
-        },
-        trigger: {
-          ...l.sm
-        }
-      },
-      md: {
-        item: {
-          fontSize: "md"
-        },
-        trigger: {
-          ...l.md
-        }
-      },
-      lg: {
-        item: {
-          fontSize: "lg"
-        },
-        trigger: {
-          ...l.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 = s({
-  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 = s({
-  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 = s({
-  slots: ["root", "control", "input", "hiddenInput"],
-  base: {},
-  variants: {
-    size: {
-      sm: {
-        input: l.sm
-      },
-      md: {
-        input: l.md
-      },
-      lg: {
-        input: l.lg
-      }
-    },
-    variant: {
-      default: {
-        input: g("default")
-      },
-      onContrast: {
-        input: g("onContrast")
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default"
-  }
-}), ge = $({
-  theme: {
-    tokens: {
-      blurs: K,
-      borders: q,
-      colors: rr,
-      durations: hr,
-      easings: vr,
-      letterSpacings: ir,
-      lineHeights: lr,
-      fonts: sr,
-      fontSizes: dr,
-      fontWeights: cr,
-      radii: X,
-      shadows: or,
-      sizes: nr,
-      spacing: gr,
-      zIndex: mr
-    },
-    semanticTokens: {
-      colors: Ar
-    },
-    recipes: {
-      button: E,
-      heading: zr,
-      iconButton: E,
-      input: L,
-      link: Tr,
-      text: Sr,
-      textarea: L
-    },
-    slotRecipes: {
-      avatar: ae,
-      checkbox: Mr,
-      radioGroup: Yr,
-      switch: qr,
-      tabs: re,
-      tag: Br,
-      popover: S,
-      hoverCard: S,
-      menu: ne,
-      select: se,
-      alert: le,
-      dialog: ie,
-      pinInput: be
-    }
-  },
-  globalCss: {
-    "button:focus-visible, button[data-focus-visible]": {
-      outline: "none !important",
-      boxShadow: "none !important"
-    },
-    "html, body": {
-      color: "text"
-    }
-  }
-}), ue = O(j, ge), ye = ({
-  customTheme: t,
-  children: u,
-  ...p
-}) => /* @__PURE__ */ v.jsxs(M, { value: t ?? ue, children: [
-  /* @__PURE__ */ v.jsx(
-    G,
-    {
-      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__ */ v.jsx(N, { ...p, children: u })
-] });
+import { K as r, s as m } from "../../chunks/theme.provider-BBYAbeey.js";
 export {
-  ye as KibbleThemeProvider,
-  ue as system
+  r as KibbleThemeProvider,
+  m as system
 };
 //# sourceMappingURL=index.js.map