@okshaun/components 0.5.6 → 0.5.7

package/dist/preset.js

@@ -1,335 +1,117 @@
-import { defineSemanticTokens, defineStyles, defineTextStyles, defineGlobalStyles, defineRecipe, defineSlotRecipe, defineTokens, definePreset as definePreset$1 } from "@pandacss/dev";
-import { b as breakpoints$1, a as colors$1, c as containerSizes, n as numericSizes, s as sizes, u as utilitySizes } from "./size.primitives-j2MFgtrT.js";
-const fonts = {
-  heading: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
-  sans: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
-  body: {
-    value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
-  },
-  serif: {
-    value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
-  },
-  mono: {
-    value: "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace"
-  }
-};
-const fontSizes = {
-  "12": { value: "0.75rem" },
-  "14": { value: "0.875rem" },
-  "16": { value: "1rem" },
-  "20": { value: "1.25rem" },
-  "24": { value: "1.5rem" },
-  "32": { value: "2rem" },
-  "40": { value: "2.5rem" },
-  "48": { value: "3rem" },
-  "56": { value: "3.5rem" },
-  "64": { value: "4rem" },
-  "72": { value: "4.5rem" },
-  "80": { value: "5rem" },
-  "88": { value: "5.5rem" },
-  "96": { value: "6rem" }
-};
-const fontWeights = {
-  light: { value: "300" },
-  normal: { value: "400" },
-  medium: { value: "500" },
-  bold: { value: "700" },
-  black: { value: "900" }
-};
-const lineHeights = {
-  none: {
-    value: "1"
-  },
-  tighter: {
-    value: "calc(1em + 0.125rem)"
-  },
-  tight: {
-    value: "calc(1em + 0.25rem)"
-  },
-  default: {
-    value: "calc(1em + 0.5rem)"
-  },
-  loose: {
-    value: "calc(1em + 0.75rem)"
-  },
-  looser: {
-    value: "calc(1em + 0.875rem)"
-  }
-};
-const letterSpacings = {
-  tighter: {
-    value: "-0.05em"
-  },
-  tight: {
-    value: "-0.025em"
-  },
-  normal: {
-    value: "0em"
-  },
-  wide: {
-    value: "0.025em"
-  },
-  wider: {
-    value: "0.05em"
-  },
-  widest: {
-    value: "0.1em"
-  }
-};
-const animations = {
-  spin: {
-    value: "spin 1s linear infinite"
-  },
-  ping: {
-    value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
-  },
-  pulse: {
-    value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-  },
-  bounce: {
-    value: "bounce 1s infinite"
-  }
-};
-const keyframes$1 = {
-  spin: {
-    to: {
-      transform: "rotate(360deg)"
-    }
-  },
-  ping: {
-    "75%, 100%": {
-      transform: "scale(2)",
-      opacity: "0"
-    }
-  },
-  pulse: {
-    "50%": {
-      opacity: ".5"
-    }
-  },
-  bounce: {
-    "0%, 100%": {
-      transform: "translateY(-25%)",
-      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
-    },
-    "50%": {
-      transform: "none",
-      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
-    }
-  },
-  badgePop: {
-    "0%": {
-      transform: "translate(50%, -50%) scale(1)"
-    },
-    "50%": {
-      transform: "translate(50%, -50%) scale(1.2)"
-    },
-    "100%": {
-      transform: "translate(50%, -50%) scale(1)"
-    }
-  },
-  badgePopStandalone: {
-    "0%": {
-      transform: "scale(1)"
-    },
-    "50%": {
-      transform: "scale(1.2)"
-    },
-    "100%": {
-      transform: "scale(1)"
-    }
-  }
-};
-const easings = {
-  default: {
-    value: "cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  linear: {
-    value: "linear"
-  },
-  in: {
-    value: "cubic-bezier(0.4, 0, 1, 1)"
-  },
-  out: {
-    value: "cubic-bezier(0, 0, 0.2, 1)"
-  },
-  "in-out": {
-    value: "cubic-bezier(0.4, 0, 0.2, 1)"
-  }
-};
-const durations = {
-  fastest: {
-    value: "50ms"
-  },
-  faster: {
-    value: "100ms"
-  },
-  fast: {
-    value: "150ms"
-  },
-  normal: {
-    value: "200ms"
-  },
-  slow: {
-    value: "300ms"
-  },
-  slower: {
-    value: "400ms"
-  },
-  slowest: {
-    value: "500ms"
-  }
-};
-const transitions$1 = {
-  none: {
-    value: "none"
-  },
-  all: {
-    value: "all"
-  },
-  common: {
-    value: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform"
-  },
-  colors: {
-    value: "background-color, border-color, color, fill, stroke"
-  },
-  opacity: {
-    value: "opacity"
-  },
-  shadow: {
-    value: "box-shadow"
-  },
-  transform: {
-    value: "transform"
-  },
-  position: {
-    value: "top, right, bottom, left"
-  },
-  size: {
-    value: "width, height"
-  },
-  spacing: {
-    value: "margin, padding"
-  },
-  outline: {
-    value: "outline, outline-color, outline-offset"
-  },
-  border: {
-    value: "border, border-color"
-  }
-};
-const radii = {
-  "0": { value: "{sizes.0}" },
-  "1": { value: "{sizes.1}" },
-  "2": { value: "{sizes.2}" },
-  "4": { value: "{sizes.4}" },
-  "8": { value: "{sizes.8}" },
-  "16": { value: "{sizes.16}" },
-  "100": { value: "100%" },
-  "999": { value: "999px" }
-};
-const borderWidths = {
-  "0": { value: "{sizes.0}" },
-  "1": { value: "{sizes.1}" },
-  "2": { value: "{sizes.2}" },
-  "4": { value: "{sizes.4}" },
-  "8": { value: "{sizes.8}" },
-  "16": { value: "{sizes.16}" }
-};
-const shadows = {
-  low: {
-    value: "0px 1px 1px {colors.utility.shadowColor}, 0px 2px 2px {colors.utility.shadowColor}"
-  },
-  medium: {
-    value: "0px 2px 2px {colors.utility.shadowColor}, 0px 4px 4px {colors.utility.shadowColor}, 0px 8px 8px {colors.utility.shadowColor}"
-  },
-  high: {
-    value: "0px 2px 2px {colors.utility.shadowColor}, 0px 4px 4px {colors.utility.shadowColor}, 0px 8px 8px {colors.utility.shadowColor}, 0px 16px 16px {colors.utility.shadowColor}"
-  },
-  inset: {
-    value: "inset 0px 2px 1px {colors.utility.shadowColor}, inset 0px 3px 2px {colors.utility.shadowColor}"
-  },
-  none: {
-    value: "0 0 0 {colors.transparent}"
-  }
-};
-const aspectRatios = {
-  square: {
-    value: "1 / 1"
-  },
-  landscape: {
-    value: "4 / 3"
-  },
-  portrait: {
-    value: "3 / 4"
-  },
-  wide: {
-    value: "16 / 9"
-  },
-  ultrawide: {
-    value: "18 / 5"
-  },
-  golden: {
-    value: "1.618 / 1"
-  }
-};
-const blurs = {
-  sm: {
-    value: "4px"
-  },
-  base: {
-    value: "8px"
-  },
-  md: {
-    value: "12px"
-  },
-  lg: {
-    value: "16px"
-  },
-  xl: {
-    value: "24px"
-  },
-  "2xl": {
-    value: "40px"
-  },
-  "3xl": {
-    value: "64px"
-  }
-};
-const borders = {
-  none: {
-    value: "none"
-  },
-  subtle: {
-    value: "1px solid {colors.border}"
-  },
-  default: {
-    value: "1px solid {colors.border}"
-  },
-  strong: {
-    value: "2px solid {colors.border.bold}"
-  },
-  input: {
-    value: "1px solid {colors.border.input}"
-  },
-  focused: {
-    value: "2px solid {colors.border.focused}"
-  },
-  selected: {
-    value: "2px solid {colors.border.selected}"
-  },
-  success: {
-    value: "1px solid {colors.border.success}"
-  },
-  warning: {
-    value: "1px solid {colors.border.warning}"
-  },
-  danger: {
-    value: "1px solid {colors.border.danger}"
-  },
-  info: {
-    value: "1px solid {colors.border.info}"
-  }
+import { defineSemanticTokens, defineRecipe, defineSlotRecipe, definePreset as definePreset$1 } from "@pandacss/dev";
+import { a as animations, d as aspectRatios, e as blurs, f as borderWidths, g as borders, h as colors$1, i as durations, j as easings, k as fontSizes, l as fontWeights, m as fonts, n as letterSpacings, o as lineHeights, p as numericSizes, r as radii, s as shadows$1, q as sizes, t as spacing$1, u as utilitySizes, v as globalCss$1, w as transitionProperty, x as filtersProperty, y as textStyles, z as layerStyles, A as keyframes, c as containerSizes, b as breakpoints } from "./transitions-D5SjakQu.js";
+const conditions$1 = {
+  hover: "&:is(:hover, [data-hover=true])",
+  focus: "&:is(:focus, [data-focus=true])",
+  focusWithin: "&:focus-within",
+  focusVisible: "&:is(:focus-visible, [data-focus-visible]=true)",
+  disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+  deleted: "&:is(:deleted, [deleted], [data-deleted=true])",
+  active: "&:is(:active, [data-active=true])",
+  visited: "&:visited",
+  target: "&:target",
+  readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
+  readWrite: "&:read-write",
+  empty: "&:is(:empty, [data-empty])",
+  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
+  enabled: "&:enabled",
+  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
+  collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
+  highlighted: "&[data-highlighted]",
+  complete: "&[data-complete]",
+  incomplete: "&[data-incomplete]",
+  dragging: "&[data-dragging]",
+  before: "&::before",
+  after: "&::after",
+  firstLetter: "&::first-letter",
+  firstLine: "&::first-line",
+  marker: "&::marker, &::-webkit-details-marker",
+  selection: "&::selection",
+  file: "&::file-selector-button",
+  backdrop: "&::backdrop",
+  first: "&:first-child",
+  last: "&:last-child",
+  only: "&:only-child",
+  even: "&:nth-child(even)",
+  odd: "&:nth-child(odd)",
+  firstOfType: "&:first-of-type",
+  lastOfType: "&:last-of-type",
+  onlyOfType: "&:only-of-type",
+  peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
+  peerHover: ".peer:is(:hover, [data-hover]) ~ &",
+  peerActive: ".peer:is(:active, [data-active]) ~ &",
+  peerFocusWithin: ".peer:focus-within ~ &",
+  peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
+  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
+  peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
+  peerPlaceholderShown: ".peer:placeholder-shown ~ &",
+  groupFocus: ".group:is(:focus, [data-focus]) &",
+  groupHover: ".group:is(:hover, [data-hover]) &",
+  groupActive: ".group:is(:active, [data-active]) &",
+  groupFocusWithin: ".group:focus-within &",
+  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
+  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
+  groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
+  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
+  required: "&:is(:required, [data-required], [aria-required=true])",
+  valid: "&:is(:valid, [data-valid])",
+  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
+  error: "&:is([data-error], [data-error=true])",
+  autofill: "&:autofill",
+  inRange: "&:is(:in-range, [data-in-range])",
+  outOfRange: "&:is(:out-of-range, [data-outside-range])",
+  placeholder: "&::placeholder, &[data-placeholder]",
+  placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
+  pressed: "&:is([aria-pressed=true], [data-pressed])",
+  selected: "&:is([aria-selected=true], [data-selected=true])",
+  grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
+  underValue: "&[data-state=under-value]",
+  overValue: "&[data-state=over-value]",
+  atValue: "&[data-state=at-value]",
+  default: "&:default",
+  optional: "&:optional",
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
+  closed: '&:is([closed], [data-closed], [data-state="closed"])',
+  fullscreen: "&:is(:fullscreen, [data-fullscreen])",
+  loading: "&:is([data-loading], [aria-busy=true])",
+  hidden: "&:is([hidden], [data-hidden])",
+  current: "&:is([aria-current=true], [data-current])",
+  currentPage: "&[aria-current=page]",
+  currentStep: "&[aria-current=step]",
+  today: "&:is([data-today])",
+  unavailable: "&[data-unavailable]",
+  rangeStart: "&[data-range-start]",
+  rangeEnd: "&[data-range-end]",
+  now: "&[data-now]",
+  topmost: "&[data-topmost]",
+  motionReduce: "@media (prefers-reduced-motion: reduce)",
+  motionSafe: "@media (prefers-reduced-motion: no-preference)",
+  paused: "&:is([data-paused=true])",
+  print: "@media print",
+  landscape: "@media (orientation: landscape)",
+  portrait: "@media (orientation: portrait)",
+  dark: ".dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &",
+  light: ".light &, &:is([data-color-mode=light] *), [data-color-mode=light] &",
+  osDark: "@media (prefers-color-scheme: dark)",
+  osLight: "@media (prefers-color-scheme: light)",
+  highContrast: "@media (forced-colors: active)",
+  lessContrast: "@media (prefers-contrast: less)",
+  moreContrast: "@media (prefers-contrast: more)",
+  ltr: ":where([dir=ltr], :dir(ltr)) &",
+  rtl: ":where([dir=rtl], :dir(rtl)) &",
+  scrollbar: "&::-webkit-scrollbar",
+  scrollbarThumb: "&::-webkit-scrollbar-thumb",
+  scrollbarTrack: "&::-webkit-scrollbar-track",
+  horizontal: "&[data-orientation=horizontal]",
+  vertical: "&[data-orientation=vertical]",
+  icon: "& :where(svg)",
+  starting: "@starting-style",
+  noscript: "@media (scripting: none)",
+  invertedColors: "@media (inverted-colors: inverted)"
 };
 const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -338,25 +120,22 @@ const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   blurs,
   borderWidths,
   borders,
-  breakpoints: breakpoints$1,
   colors: colors$1,
-  containerSizes,
   durations,
   easings,
   fontSizes,
   fontWeights,
   fonts,
-  keyframes: keyframes$1,
   letterSpacings,
   lineHeights,
   numericSizes,
   radii,
-  shadows,
+  shadows: shadows$1,
   sizes,
-  transitions: transitions$1,
+  spacing: spacing$1,
   utilitySizes
 }, Symbol.toStringTag, { value: "Module" }));
-var conditions$1 = {
+var conditions = {
   hover: "&:is(:hover, [data-hover])",
   focus: "&:is(:focus, [data-focus])",
   focusWithin: "&:focus-within",
@@ -466,7 +245,7 @@ var conditions$1 = {
   invertedColors: "@media (inverted-colors: inverted)"
 };
 var EMPTY = "/*-*/ /*-*/";
-var globalCss$1 = {
+var globalCss = {
   "*, ::before, ::after, ::backdrop": {
     "--blur": EMPTY,
     "--brightness": EMPTY,
@@ -3592,11 +3371,11 @@ var utilities = Object.assign(
 var definePreset = (preset2) => preset2;
 var preset = definePreset({
   name: "@pandacss/preset-base",
-  conditions: conditions$1,
+  conditions,
   utilities,
   patterns,
   // globalVars,
-  globalCss: globalCss$1
+  globalCss
 });
 var index_default = preset;
 const BRAND_PALETTE = "gray";
@@ -4361,334 +4140,34 @@ const colors = defineSemanticTokens.colors({
     }
   }
 });
-const semantics = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  colors
-}, Symbol.toStringTag, { value: "Module" }));
-const baseHeadingStyles = defineStyles({
-  value: {
-    fontFamily: "sans",
-    fontWeight: "bold",
-    color: "text",
-    lineHeight: "default"
-  }
-});
-const baseBodyTextStyles = defineStyles({
-  value: {
-    fontFamily: "serif",
-    fontWeight: "normal",
-    color: "text.subtlest",
-    lineHeight: "default"
-  }
-});
-const baseMonoStyles = defineStyles({
-  value: {
-    fontFamily: "mono",
-    fontWeight: "normal",
-    color: "text.subtlest",
-    lineHeight: "default"
-  }
-});
-const textStyles = defineTextStyles({
-  display: {
-    lg: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "72"
-      }
-    },
-    md: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "64"
-      }
-    },
-    sm: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "56"
-      }
-    },
-    xs: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "48"
-      }
-    }
-  },
-  heading: {
-    lg: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "40"
-      }
-    },
-    md: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "32"
-      }
-    },
-    sm: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "24"
-      }
-    },
-    xs: {
-      value: {
-        ...baseHeadingStyles,
-        fontSize: "20"
-      }
-    }
-  },
-  body: {
-    lg: {
-      value: {
-        ...baseBodyTextStyles,
-        fontSize: "20"
-      }
-    },
-    md: {
-      value: {
-        ...baseBodyTextStyles,
-        fontSize: "16"
-      }
-    },
-    sm: {
-      value: {
-        ...baseBodyTextStyles,
-        fontSize: "14"
-      }
-    },
-    xs: {
-      value: {
-        ...baseBodyTextStyles,
-        fontSize: "12"
-      }
-    }
-  },
-  mono: {
-    lg: {
-      value: {
-        ...baseMonoStyles,
-        fontSize: "20"
-      }
-    },
-    md: {
-      value: {
-        ...baseMonoStyles,
-        fontSize: "16"
-      }
-    },
-    sm: {
-      value: {
-        ...baseMonoStyles,
-        fontSize: "14"
-      }
-    },
-    xs: {
-      value: {
-        ...baseMonoStyles,
-        fontSize: "12"
-      }
-    }
-  }
-});
-const conditions = {
-  hover: "&:is(:hover, [data-hover=true])",
-  focus: "&:is(:focus, [data-focus=true])",
-  focusWithin: "&:focus-within",
-  focusVisible: "&:is(:focus-visible, [data-focus-visible=true])",
-  disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
-  deleted: "&:is(:deleted, [deleted], [data-deleted=true])",
-  active: "&:is(:active, [data-active=true])",
-  visited: "&:visited",
-  target: "&:target",
-  readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
-  readWrite: "&:read-write",
-  empty: "&:is(:empty, [data-empty])",
-  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
-  enabled: "&:enabled",
-  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
-  collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
-  highlighted: "&[data-highlighted]",
-  complete: "&[data-complete]",
-  incomplete: "&[data-incomplete]",
-  dragging: "&[data-dragging]",
-  before: "&::before",
-  after: "&::after",
-  firstLetter: "&::first-letter",
-  firstLine: "&::first-line",
-  marker: "&::marker, &::-webkit-details-marker",
-  selection: "&::selection",
-  file: "&::file-selector-button",
-  backdrop: "&::backdrop",
-  first: "&:first-child",
-  last: "&:last-child",
-  only: "&:only-child",
-  even: "&:nth-child(even)",
-  odd: "&:nth-child(odd)",
-  firstOfType: "&:first-of-type",
-  lastOfType: "&:last-of-type",
-  onlyOfType: "&:only-of-type",
-  peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
-  peerHover: ".peer:is(:hover, [data-hover]) ~ &",
-  peerActive: ".peer:is(:active, [data-active=true]) ~ &",
-  peerFocusWithin: ".peer:focus-within ~ &",
-  peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
-  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
-  peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
-  peerPlaceholderShown: ".peer:placeholder-shown ~ &",
-  groupFocus: ".group:is(:focus, [data-focus]) &",
-  groupHover: ".group:is(:hover, [data-hover]) &",
-  groupActive: ".group:is(:active, [data-active=true]) &",
-  groupFocusWithin: ".group:focus-within &",
-  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
-  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
-  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
-  groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
-  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
-  required: "&:is(:required, [data-required], [aria-required=true])",
-  valid: "&:is(:valid, [data-valid])",
-  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
-  error: "&:is([data-error], [data-error=true])",
-  autofill: "&:autofill",
-  inRange: "&:is(:in-range, [data-in-range])",
-  outOfRange: "&:is(:out-of-range, [data-outside-range])",
-  placeholder: "&::placeholder, &[data-placeholder]",
-  placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
-  pressed: "&:is([aria-pressed=true], [data-pressed])",
-  selected: "&:is([aria-selected=true], [data-selected=true])",
-  grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
-  underValue: "&[data-state=under-value]",
-  overValue: "&[data-state=over-value]",
-  atValue: "&[data-state=at-value]",
-  default: "&:default",
-  optional: "&:optional",
-  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
-  closed: '&:is([closed], [data-closed], [data-state="closed"])',
-  fullscreen: "&:is(:fullscreen, [data-fullscreen])",
-  loading: "&:is([data-loading=true], [aria-busy=true])",
-  hidden: "&:is([hidden], [data-hidden])",
-  current: "&:is([aria-current=true], [data-current])",
-  currentPage: "&[aria-current=page]",
-  currentStep: "&[aria-current=step]",
-  today: "&:is([data-today])",
-  unavailable: "&[data-unavailable]",
-  rangeStart: "&[data-range-start]",
-  rangeEnd: "&[data-range-end]",
-  now: "&[data-now]",
-  topmost: "&[data-topmost]",
-  motionReduce: "@media (prefers-reduced-motion: reduce)",
-  motionSafe: "@media (prefers-reduced-motion: no-preference)",
-  paused: "&:is([data-paused=true])",
-  print: "@media print",
-  landscape: "@media (orientation: landscape)",
-  portrait: "@media (orientation: portrait)",
-  dark: ".dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &",
-  light: ".light &, &:is([data-color-mode=light] *), [data-color-mode=light] &",
-  osDark: "@media (prefers-color-scheme: dark)",
-  osLight: "@media (prefers-color-scheme: light)",
-  highContrast: "@media (forced-colors: active)",
-  lessContrast: "@media (prefers-contrast: less)",
-  moreContrast: "@media (prefers-contrast: more)",
-  ltr: ":where([dir=ltr], :dir(ltr)) &",
-  rtl: ":where([dir=rtl], :dir(rtl)) &",
-  scrollbar: "&::-webkit-scrollbar",
-  scrollbarThumb: "&::-webkit-scrollbar-thumb",
-  scrollbarTrack: "&::-webkit-scrollbar-track",
-  horizontal: "&[data-orientation=horizontal]",
-  vertical: "&[data-orientation=vertical]",
-  icon: "& :where(svg)",
-  starting: "@starting-style",
-  noscript: "@media (scripting: none)",
-  invertedColors: "@media (inverted-colors: inverted)"
-};
-const globalCss = defineGlobalStyles({
-  "*, *::before, *::after": {
-    boxSizing: "border-box",
-    margin: 0,
-    padding: 0,
-    _focusVisible: {
-      borderColor: "border.focused"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      pointerEvents: "none"
-    }
-  },
-  html: {
-    fontSize: "16",
-    lineHeight: "calc(1em + 0.5rem)",
-    "-webkit-text-size-adjust": "100%",
-    tabSize: "4"
-  },
-  body: {
-    fontFamily: "body",
-    bg: "surface",
-    color: "text.subtlest",
-    fontWeight: "normal"
-  },
-  "h1, h2, h3, h4, h5, h6": {
-    color: "text",
-    fontWeight: "bold",
-    lineHeight: "calc(1em + 0.5rem)"
-  },
-  p: {
-    marginBottom: "0.5rem"
-  },
-  "b, strong": {
-    fontWeight: "bolder"
-  },
-  "i, em": {
-    fontStyle: "italic"
-  },
-  u: {
-    textDecoration: "underline"
-  },
-  "code, kbd, samp, pre": {
-    fontFamily: "mono",
-    fontSize: "1em"
-  },
-  table: {
-    borderColor: "border.subtle"
-  },
-  "button, input, optgroup, select, textarea": {
-    fontFamily: "inherit",
-    fontSize: "100%",
-    lineHeight: "calc(1em + 0.5rem)",
-    margin: "0"
-  },
-  'button, [type="button"], [type="reset"], [type="submit"]': {
-    "-webkit-appearance": "button"
-  },
-  legend: {
-    padding: "0"
-  },
-  progress: {
-    verticalAlign: "baseline"
-  },
-  "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
-    height: "auto"
-  },
-  '[type="search"]': {
-    "-webkit-appearance": "textfield",
-    outlineOffset: "-2px"
-  },
-  "::-webkit-search-decoration": {
-    "-webkit-appearance": "none"
-  },
-  "::-webkit-file-upload-button": {
-    "-webkit-appearance": "button",
-    font: "inherit"
-  },
-  summary: {
-    display: "list-item"
+const shadows = defineSemanticTokens.shadows({
+  zero: {
+    value: { base: "{shadows.zeroShadow}", _dark: "{shadows.zeroShadow}" }
+  },
+  raised: {
+    value: { base: "{shadows.raisedLight}", _dark: "{shadows.raisedDark}" }
+  },
+  elevated: {
+    value: { base: "{shadows.elevatedLight}", _dark: "{shadows.elevatedDark}" }
+  },
+  overlay: {
+    value: { base: "{shadows.overlayLight}", _dark: "{shadows.overlayDark}" }
+  },
+  overflow: {
+    value: { base: "{shadows.overflowLight}", _dark: "{shadows.overflowDark}" }
+  },
+  // TODO: delete below once migration is complete
+  low: {
+    value: { base: "{shadows.lowLight}", _dark: "{shadows.lowDark}" }
+  },
+  medium: {
+    value: { base: "{shadows.mediumLight}", _dark: "{shadows.mediumDark}" }
+  },
+  high: {
+    value: { base: "{shadows.highLight}", _dark: "{shadows.highDark}" }
+  },
+  inset: {
+    value: { base: "{shadows.insetLight}", _dark: "{shadows.insetDark}" }
   }
 });
 const textareaVariants = {
@@ -5319,84 +4798,149 @@ const textinputRecipe = defineRecipe({
     size: "medium"
   }
 });
-const cardBase = {
-  bg: { base: "gray.10", _dark: "gray.80" },
-  borderRadius: "4",
-  outlineWidth: "1",
-  outlineStyle: "solid",
-  outlineColor: "transparent",
-  outlineOffset: "0"
+const interactiveHoverStyles = {
+  cursor: "pointer",
+  transition: "all",
+  _hover: {
+    bg: "surface",
+    boxShadow: "elevated"
+  },
+  _focusVisible: {
+    bg: "surface",
+    boxShadow: "elevated",
+    borderWidth: "1",
+    outlineColor: "border.focused",
+    borderColor: "border.focused"
+  },
+  _disabled: {
+    opacity: "0.4",
+    cursor: "not-allowed"
+  }
 };
-const cardVariant = {
-  variant: {
-    default: {
-      boxShadow: "low",
-      borderWidth: "1",
-      borderColor: "transparent",
-      _hover: {
-        boxShadow: "medium"
+const cardRecipe = defineRecipe({
+  className: "card",
+  jsx: ["Card"],
+  base: {
+    display: "block",
+    textAlign: "left",
+    bg: "surface",
+    borderRadius: "8",
+    outlineWidth: "1",
+    outlineStyle: "solid",
+    outlineColor: "transparent",
+    outlineOffset: "0"
+  },
+  variants: {
+    appearance: {
+      default: {
+        bg: "surface.raised",
+        boxShadow: "raised",
+        borderWidth: "1",
+        borderColor: "transparent"
       },
-      _active: {
-        boxShadow: "inset",
-        _grabbed: {
-          boxShadow: "high",
-          cursor: "grabbing"
-        }
+      flat: {
+        borderWidth: "1",
+        borderStyle: "solid",
+        borderColor: "border",
+        boxShadow: "zero"
       },
-      _focusVisible: {
-        boxShadow: "none",
+      sunken: {
+        bg: "surface.sunken",
         borderWidth: "1",
-        outlineColor: { base: "gray.90", _dark: "gray.10" },
-        borderColor: { base: "gray.90", _dark: "gray.10" }
+        borderStyle: "solid",
+        borderColor: "transparent"
       },
-      _disabled: {
-        opacity: "0.4",
-        _hover: {
-          boxShadow: "low"
-        },
-        _active: {
-          boxShadow: "low"
-        }
+      ghost: {
+        bg: "transparent",
+        borderWidth: "1",
+        borderStyle: "solid",
+        borderColor: "transparent"
+      },
+      overlay: {
+        bg: "surface.overlay",
+        boxShadow: "overlay",
+        borderWidth: "1",
+        borderColor: "transparent"
       }
     },
-    flat: {
-      borderWidth: "1",
-      borderStyle: "solid",
-      borderColor: { base: "gray.10", _dark: "gray.70" },
-      _hover: {
-        borderColor: { base: "gray.30", _dark: "gray.100" }
+    interactive: {
+      true: {
+        cursor: "pointer"
       },
-      _active: {
-        borderColor: { base: "gray.100", _dark: "gray.30" },
-        _grabbed: {
-          boxShadow: "high",
-          cursor: "grabbing"
+      false: {
+        cursor: "default"
+      }
+    }
+  },
+  compoundVariants: [
+    // Default + interactive
+    {
+      appearance: "default",
+      interactive: true,
+      css: {
+        ...interactiveHoverStyles,
+        _disabled: {
+          _hover: {
+            boxShadow: "raised"
+          }
         }
-      },
-      _focusVisible: {
-        boxShadow: "none",
-        outlineColor: { base: "gray.90", _dark: "gray.10" },
-        borderColor: { base: "gray.90", _dark: "gray.10" }
-      },
-      _disabled: {
-        opacity: "0.4",
-        _hover: {
-          borderColor: { base: "gray.10", _dark: "gray.70" }
-        },
-        _active: {
-          borderColor: { base: "gray.10", _dark: "gray.70" }
+      }
+    },
+    // Flat + interactive
+    {
+      appearance: "flat",
+      interactive: true,
+      css: {
+        ...interactiveHoverStyles,
+        _disabled: {
+          _hover: {
+            boxShadow: "none"
+          }
+        }
+      }
+    },
+    // Sunken + interactive
+    {
+      appearance: "sunken",
+      interactive: true,
+      css: {
+        ...interactiveHoverStyles,
+        _disabled: {
+          _hover: {
+            boxShadow: "none"
+          }
+        }
+      }
+    },
+    // Ghost + interactive
+    {
+      appearance: "ghost",
+      interactive: true,
+      css: {
+        ...interactiveHoverStyles,
+        _disabled: {
+          _hover: {
+            boxShadow: "none"
+          }
+        }
+      }
+    },
+    // Overlay + interactive
+    {
+      appearance: "overlay",
+      interactive: true,
+      css: {
+        _disabled: {
+          _hover: {
+            boxShadow: "raised"
+          }
         }
       }
     }
-  }
-};
-const cardRecipe = defineRecipe({
-  className: "card",
-  jsx: ["Card"],
-  base: cardBase,
-  variants: cardVariant,
+  ],
   defaultVariants: {
-    variant: "default"
+    appearance: "default",
+    interactive: false
   }
 });
 const BreadcrumbsBase = {
@@ -7336,16 +6880,14 @@ const pandaBasePresetConditions = index_default.conditions;
 const pandaBasePresetUtilities = index_default.utilities;
 const pandaBasePresetGlobalCss = index_default.globalCss;
 const sizeKeys = Object.keys(sizes);
-const { breakpoints, keyframes, ...rawTokens } = tokens;
 const theme = {
-  tokens: defineTokens({
-    ...rawTokens,
-    spacing: sizes
-    // Map spacing to our size scale for consistent sizing
-  }),
-  semanticTokens: defineSemanticTokens({
-    ...semantics
-  })
+  tokens: {
+    ...tokens
+  },
+  semanticTokens: {
+    colors,
+    shadows
+  }
 };
 const okshaunPreset = definePreset$1({
   name: "okshaunPreset",
@@ -7355,10 +6897,13 @@ const okshaunPreset = definePreset$1({
         ...theme.tokens
       },
       semanticTokens: {
-        ...theme.semanticTokens
+        colors: theme.semanticTokens.colors,
+        shadows: theme.semanticTokens.shadows
       },
       breakpoints,
+      containerSizes,
       keyframes,
+      layerStyles,
       textStyles,
       recipes: {
         ...transformedRecipes
@@ -7415,15 +6960,13 @@ const okshaunPreset = definePreset$1({
   utilities: {
     ...pandaBasePresetUtilities,
     // Custom utility for transitionProperty that uses our transition tokens
-    transitionProperty: {
-      className: "transition-property",
-      values: "transitions"
-    }
+    filtersProperty,
+    transitionProperty
   },
   // Global styles
   globalCss: {
     ...pandaBasePresetGlobalCss,
-    ...globalCss,
+    ...globalCss$1,
     html: {
       "--global-font-heading": "fonts.heading",
       "--global-font-body": "fonts.body",
@@ -7435,7 +6978,7 @@ const okshaunPreset = definePreset$1({
   // Conditions for responsive and state-based styling
   conditions: {
     ...pandaBasePresetConditions,
-    ...conditions
+    ...conditions$1
   }
 });
 export {