@okshaun/components 0.5.5 → 0.5.7

package/dist/transitions-D5SjakQu.js

@@ -0,0 +1,1012 @@
+import { defineUtility, defineGlobalStyles, defineKeyframes, defineLayerStyles, defineStyles, defineTextStyles, defineTokens } from "@pandacss/dev";
+const breakpoints = {
+  xs: "480px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+const containerSizes = {
+  "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"
+};
+const filtersProperty = defineUtility({
+  className: "filters",
+  values: "filters"
+});
+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: "body",
+    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 keyframes = defineKeyframes({
+  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)"
+    }
+  },
+  slideLeft: {
+    "0%": { transform: "translateX(100%)", opacity: "0" },
+    "100%": { transform: "translateX(0)", opacity: "1" }
+  },
+  slideRight: {
+    "0%": { transform: "translateX(-100%)", opacity: "0" },
+    "100%": { transform: "translateX(0)", opacity: "1" }
+  }
+});
+const layerStyles = defineLayerStyles({
+  surface: {
+    raised: {
+      value: {
+        background: "surface.raised",
+        boxShadow: "shadow.raised"
+      }
+    },
+    overlay: {
+      value: {
+        background: "surface.overlay",
+        boxShadow: "shadow.overlay"
+      }
+    }
+  }
+});
+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 animations = defineTokens.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 aspectRatios = defineTokens.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 = defineTokens.blurs({
+  sm: {
+    value: "{sizes.4}"
+  },
+  base: {
+    value: "{sizes.8}"
+  },
+  md: {
+    value: "{sizes.12}"
+  },
+  lg: {
+    value: "{sizes.16}"
+  },
+  xl: {
+    value: "{sizes.24}"
+  },
+  "2xl": {
+    value: "{sizes.40}"
+  },
+  "3xl": {
+    value: "{sizes.64}"
+  }
+});
+const borders = defineTokens.borders({
+  default: {
+    value: "{borderWidths.1} solid {colors.border}"
+  },
+  strong: {
+    value: "{borderWidths.2} solid {colors.border.bold}"
+  },
+  input: {
+    value: "{borderWidths.1} solid {colors.border.input}"
+  },
+  focused: {
+    value: "{borderWidths.2} solid {colors.border.focused}"
+  },
+  success: {
+    value: "{borderWidths.1} solid {colors.border.success}"
+  },
+  warning: {
+    value: "{borderWidths.1} solid {colors.border.warning}"
+  },
+  danger: {
+    value: "{borderWidths.1} solid {colors.border.danger}"
+  },
+  info: {
+    value: "{borderWidths.1} solid {colors.border.info}"
+  },
+  none: {
+    value: "none"
+  }
+});
+const borderWidths = defineTokens.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 colors = defineTokens.colors({
+  transparent: { value: "transparent" },
+  current: { value: "currentColor" },
+  inherit: { value: "inherit" },
+  neutral: {
+    "0": { value: "#FFFFFF" },
+    "10": { value: "#F8F8F8" },
+    "20": { value: "#F0F1F2" },
+    "30": { value: "#DDDEE1" },
+    "40": { value: "#B7B9BE" },
+    "50": { value: "#8C8F97" },
+    "60": { value: "#7D818A" },
+    "70": { value: "#6B6E76" },
+    "80": { value: "#505258" },
+    "90": { value: "#3B3D42" },
+    "100": { value: "#292A2E" },
+    "110": { value: "#1E1F21" }
+  },
+  neutralA: {
+    "10": { value: "#17171708" },
+    "20": { value: "#1717170F" },
+    "30": { value: "#17171724" },
+    "40": { value: "#1717174A" },
+    "50": { value: "#17171775" }
+  },
+  darkNeutral: {
+    "0": { value: "#18191A" },
+    "10": { value: "#1F1F21" },
+    "20": { value: "#242528" },
+    "25": { value: "#2B2C2F" },
+    "30": { value: "#303134" },
+    "35": { value: "#3D3F43" },
+    "40": { value: "#4B4D51" },
+    "50": { value: "#63666B" },
+    "60": { value: "#7E8188" },
+    "70": { value: "#96999E" },
+    "80": { value: "#A9ABAF" },
+    "90": { value: "#BFC1C4" },
+    "100": { value: "#CECFD2" },
+    "110": { value: "#E2E3E4" }
+  },
+  darkNeutralA: {
+    "-10": { value: "#01040475" },
+    "10": { value: "#BDBDBD0A" },
+    "20": { value: "#CECED912" },
+    "25": { value: "#D9DAE71A" },
+    "30": { value: "#E3E4F21F" },
+    "35": { value: "#E8EDFD2E" },
+    "40": { value: "#E5E9F640" },
+    "50": { value: "#E9F0FB5C" }
+  },
+  gray: {
+    "10": { value: "#fbfcfd" },
+    "20": { value: "#e0e1e2" },
+    "30": { value: "#c5c5c6" },
+    "40": { value: "#a9aaab" },
+    "50": { value: "#8e8f8f" },
+    "60": { value: "#737374" },
+    "70": { value: "#585858" },
+    "80": { value: "#3c3d3d" },
+    "90": { value: "#212121" },
+    "100": { value: "#060606" }
+  },
+  red: {
+    DEFAULT: { value: "#e2483d" },
+    "10": { value: "#ffeceb" },
+    "20": { value: "#ffd5d2" },
+    "30": { value: "#fd9891" },
+    "40": { value: "#f87168" },
+    "50": { value: "#f15b50" },
+    "60": { value: "#e2483d" },
+    "70": { value: "#c9372c" },
+    "80": { value: "#ae2e24" },
+    "90": { value: "#5d1f1a" },
+    "100": { value: "#42221f" }
+  },
+  orange: {
+    DEFAULT: { value: "#e06c00" },
+    "10": { value: "#fff5db" },
+    "20": { value: "#fce4a6" },
+    "30": { value: "#fbc828" },
+    "40": { value: "#fca700" },
+    "50": { value: "#f68909" },
+    "60": { value: "#e06c00" },
+    "70": { value: "#bd5b00" },
+    "80": { value: "#9e4c00" },
+    "90": { value: "#693200" },
+    "100": { value: "#3a2c1f" }
+  },
+  yellow: {
+    DEFAULT: { value: "#e5b00a" },
+    "10": { value: "#fefbf3" },
+    "20": { value: "#f9ecc4" },
+    "30": { value: "#f4dd96" },
+    "40": { value: "#efce67" },
+    "50": { value: "#eabf39" },
+    "60": { value: "#e5b00a" },
+    "70": { value: "#b68e0f" },
+    "80": { value: "#886c14" },
+    "90": { value: "#594918" },
+    "100": { value: "#2a271d" }
+  },
+  lime: {
+    DEFAULT: { value: "#6a9a23" },
+    "10": { value: "#efffd6" },
+    "20": { value: "#d3f1a7" },
+    "30": { value: "#b3df72" },
+    "40": { value: "#94c748" },
+    "50": { value: "#82b536" },
+    "60": { value: "#6a9a23" },
+    "70": { value: "#5b7f24" },
+    "80": { value: "#4c6b1f" },
+    "90": { value: "#37471f" },
+    "100": { value: "#28311b" }
+  },
+  green: {
+    DEFAULT: { value: "#22a06b" },
+    "10": { value: "#dcfff1" },
+    "20": { value: "#baf3db" },
+    "30": { value: "#7ee2b8" },
+    "40": { value: "#4bce97" },
+    "50": { value: "#2abb7f" },
+    "60": { value: "#22a06b" },
+    "70": { value: "#1f845a" },
+    "80": { value: "#216e4e" },
+    "90": { value: "#164b35" },
+    "100": { value: "#1c3329" }
+  },
+  teal: {
+    DEFAULT: { value: "#2898bd" },
+    "10": { value: "#e7f9ff" },
+    "20": { value: "#c6edfb" },
+    "30": { value: "#9dd9ee" },
+    "40": { value: "#6cc3e0" },
+    "50": { value: "#42b2d7" },
+    "60": { value: "#2898bd" },
+    "70": { value: "#227d9b" },
+    "80": { value: "#206a83" },
+    "90": { value: "#164555" },
+    "100": { value: "#1e3137" }
+  },
+  blue: {
+    DEFAULT: { value: "#357de8" },
+    "10": { value: "#e9f2fe" },
+    "20": { value: "#cfe1fd" },
+    "30": { value: "#8fb8f6" },
+    "40": { value: "#669df1" },
+    "50": { value: "#4688ec" },
+    "60": { value: "#357de8" },
+    "70": { value: "#1868db" },
+    "80": { value: "#1558bc" },
+    "90": { value: "#123263" },
+    "100": { value: "#1c2b42" }
+  },
+  indigo: {
+    DEFAULT: { value: "#7665d1" },
+    "10": { value: "#f1eff7" },
+    "20": { value: "#e7e3fa" },
+    "30": { value: "#cbc4f2" },
+    "40": { value: "#afa5e8" },
+    "50": { value: "#9287d8" },
+    "60": { value: "#7665d1" },
+    "70": { value: "#5e519e" },
+    "80": { value: "#453c7b" },
+    "90": { value: "#2e2c40" },
+    "100": { value: "#18161d" }
+  },
+  purple: {
+    DEFAULT: { value: "#af59e1" },
+    "10": { value: "#f8eefe" },
+    "20": { value: "#eed7fc" },
+    "30": { value: "#d8a0f7" },
+    "40": { value: "#c97cf4" },
+    "50": { value: "#bf63f3" },
+    "60": { value: "#af59e1" },
+    "70": { value: "#964ac0" },
+    "80": { value: "#803fa5" },
+    "90": { value: "#48245d" },
+    "100": { value: "#35243f" }
+  },
+  magenta: {
+    DEFAULT: { value: "#cd519d" },
+    "10": { value: "#ffecf8" },
+    "20": { value: "#fdd0ec" },
+    "30": { value: "#f797d2" },
+    "40": { value: "#e774bb" },
+    "50": { value: "#da62ac" },
+    "60": { value: "#cd519d" },
+    "70": { value: "#ae4787" },
+    "80": { value: "#943d73" },
+    "90": { value: "#50253f" },
+    "100": { value: "#3d2232" }
+  },
+  tan: {
+    DEFAULT: { value: "#8e704f" },
+    "10": { value: "#f5f0e6" },
+    "20": { value: "#f1e5cd" },
+    "30": { value: "#dec69a" },
+    "40": { value: "#c7a97b" },
+    "50": { value: "#ad8b65" },
+    "60": { value: "#8e704f" },
+    "70": { value: "#6b5947" },
+    "80": { value: "#4d4438" },
+    "90": { value: "#322d26" },
+    "100": { value: "#191714" }
+  },
+  slate: {
+    DEFAULYT: { value: "#1E1E1E" },
+    "0": { value: "#FFFFFF" },
+    "1": { value: "#FAFAFA" },
+    "2": { value: "#F9F8F6" },
+    "3": { value: "#F7F5F3" },
+    "4": { value: "#F6F3EF" },
+    "5": { value: "#F4F0EB" },
+    "10": { value: "#E3E1DE" },
+    "20": { value: "#CBCAC8" },
+    "30": { value: "#AFADAB" },
+    "40": { value: "#939190" },
+    "50": { value: "#767675" },
+    "60": { value: "#5F5F5E" },
+    "70": { value: "#474747" },
+    "80": { value: "#2E2E2E" },
+    "90": { value: "#1E1E1E" },
+    "100": { value: "#000000" }
+  }
+});
+const durations = defineTokens.durations({
+  fastest: {
+    value: "50ms"
+  },
+  faster: {
+    value: "100ms"
+  },
+  fast: {
+    value: "150ms"
+  },
+  normal: {
+    value: "200ms"
+  },
+  slow: {
+    value: "300ms"
+  },
+  slower: {
+    value: "400ms"
+  },
+  slowest: {
+    value: "500ms"
+  }
+});
+const easings = defineTokens.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 fonts = defineTokens.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 = defineTokens.fontSizes({
+  "12": { value: "{sizes.12}" },
+  "14": { value: "{sizes.14}" },
+  "16": { value: "{sizes.16}" },
+  "20": { value: "{sizes.20}" },
+  "24": { value: "{sizes.24}" },
+  "32": { value: "{sizes.32}" },
+  "40": { value: "{sizes.40}" },
+  "48": { value: "{sizes.48}" },
+  "64": { value: "{sizes.64}" },
+  "72": { value: "{sizes.72}" },
+  "80": { value: "{sizes.80}" },
+  "96": { value: "{sizes.96}" }
+});
+const fontWeights = defineTokens.fontWeights({
+  light: { value: 300 },
+  normal: { value: 400 },
+  medium: { value: 500 },
+  bold: { value: 700 },
+  black: { value: 900 }
+});
+const letterSpacings = defineTokens.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 lineHeights = defineTokens.lineHeights({
+  none: {
+    value: "1"
+  },
+  tight: {
+    value: "1em + 0.25rem"
+    // 4
+  },
+  default: {
+    value: "1em + 0.5rem"
+    // 8
+  },
+  loose: {
+    value: "1em + 0.75rem"
+    // 12
+  }
+});
+const numericSizes = {
+  "0": { value: "0" },
+  "1": { value: "0.0625rem" },
+  "2": { value: "0.125rem" },
+  "3": { value: "0.1875rem" },
+  "4": { value: "0.25rem" },
+  "5": { value: "0.3125rem" },
+  "6": { value: "0.375rem" },
+  "7": { value: "0.4375rem" },
+  "8": { value: "0.5rem" },
+  "9": { value: "0.5625rem" },
+  "10": { value: "0.625rem" },
+  "12": { value: "0.75rem" },
+  "14": { value: "0.875rem" },
+  "16": { value: "1rem" },
+  "20": { value: "1.25rem" },
+  "22": { value: "1.375rem" },
+  "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" },
+  "104": { value: "6.5rem" },
+  "112": { value: "7rem" },
+  "120": { value: "7.5rem" },
+  "128": { value: "8rem" },
+  "136": { value: "8.5rem" },
+  "144": { value: "9rem" },
+  "152": { value: "9.5rem" },
+  "160": { value: "10rem" },
+  "168": { value: "10.5rem" },
+  "176": { value: "11rem" },
+  "184": { value: "11.5rem" },
+  "192": { value: "12rem" },
+  "200": { value: "12.5rem" },
+  "208": { value: "13rem" },
+  "216": { value: "13.5rem" },
+  "224": { value: "14rem" },
+  "232": { value: "14.5rem" },
+  "240": { value: "15rem" },
+  "248": { value: "15.5rem" },
+  "256": { value: "16rem" },
+  "264": { value: "16.5rem" },
+  "272": { value: "17rem" },
+  "280": { value: "17.5rem" }
+};
+const utilitySizes = {
+  full: { value: "100%" },
+  half: { value: "50%" },
+  min: { value: "min-content" },
+  max: { value: "max-content" },
+  fit: { value: "fit-content" },
+  prose: { value: "65ch" },
+  auto: { value: "auto" }
+};
+const containerSizeTokens = {
+  "2xs": { value: "16rem" },
+  // 256px
+  xs: { value: "20rem" },
+  // 320px
+  sm: { value: "24rem" },
+  // 384px
+  md: { value: "28rem" },
+  // 448px
+  lg: { value: "32rem" },
+  // 512px
+  xl: { value: "36rem" },
+  // 576px
+  "2xl": { value: "42rem" },
+  // 672px
+  "3xl": { value: "48rem" },
+  // 768px
+  "4xl": { value: "56rem" },
+  // 896px
+  "5xl": { value: "64rem" },
+  // 1024px
+  "6xl": { value: "72rem" },
+  // 1152px
+  "7xl": { value: "80rem" },
+  // 1280px
+  "8xl": { value: "90rem" }
+  // 1440px
+};
+const sizes = defineTokens.sizes({
+  ...numericSizes,
+  ...utilitySizes,
+  ...containerSizeTokens
+});
+const radii = defineTokens.radii({
+  "0": { value: "{sizes.0}" },
+  "1": { value: "{sizes.1}" },
+  "2": { value: "{sizes.2}" },
+  "3": { value: "{sizes.3}" },
+  "4": { value: "{sizes.4}" },
+  "8": { value: "{sizes.8}" },
+  "16": { value: "{sizes.16}" },
+  "100": { value: utilitySizes["full"].value },
+  "999": { value: "999px" }
+});
+const shadows = defineTokens.shadows({
+  zeroShadow: {
+    value: "{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0)"
+  },
+  raisedLight: {
+    value: "{sizes.0} {sizes.1} {sizes.1} rgba(30, 31, 33, 0.25), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)"
+  },
+  raisedDark: {
+    value: "{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.1} {sizes.1} rgba(1, 4, 4, 0.5), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
+  },
+  elevatedLight: {
+    value: "{sizes.0} {sizes.4} {sizes.7} rgba(30, 31, 33, 0.2), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)"
+  },
+  elevatedDark: {
+    value: "{sizes.0} {sizes.0} {sizes.0} rgba(95, 95, 95, 0.06), {sizes.0} {sizes.4} {sizes.7} rgba(1, 4, 4, 0.43), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
+  },
+  overlayLight: {
+    value: "{sizes.0} {sizes.8} {sizes.12} rgba(30, 31, 33, 0.15), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)"
+  },
+  overlayDark: {
+    value: "{sizes.0} {sizes.0} {sizes.0} rgba(189, 189, 189, 0.12), {sizes.0} {sizes.8} {sizes.12} rgba(1, 4, 4, 0.36), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
+  },
+  overflowLight: {
+    value: "{sizes.0} {sizes.0} {sizes.8} rgba(30, 31, 33, 0.16), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.12)"
+  },
+  overflowDark: {
+    value: "{sizes.0} {sizes.0} {sizes.12} rgba(1, 4, 4, 0.56), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
+  },
+  // TODO: delete below once migration is complete
+  lowLight: {
+    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.1} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.3} rgba(30, 30, 30, 0.2)"
+  },
+  lowDark: {
+    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.1} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.3} rgba(0, 0, 0, 0.4)"
+  },
+  mediumLight: {
+    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.4} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.8} {sizes.8} rgba(30, 30, 30, 0.2)"
+  },
+  mediumDark: {
+    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.4} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.8} {sizes.8} rgba(0, 0, 0, 0.4)"
+  },
+  highLight: {
+    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(30, 30, 30, 0.2)"
+  },
+  highDark: {
+    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(0, 0, 0, 0.4)"
+  },
+  insetLight: {
+    value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.2} {sizes.1} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.3} {sizes.2} rgba(30, 30, 30, 0.2)"
+  },
+  insetDark: {
+    value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.2} {sizes.1} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.3} {sizes.2} rgba(0, 0, 0, 0.4)"
+  }
+});
+const spacing = defineTokens.spacing({
+  ...numericSizes,
+  ...utilitySizes
+});
+const transitionProperties = {
+  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"
+  }
+};
+({
+  all: {
+    value: `${transitionProperties.all} ${durations.normal} ${easings.default}`
+  },
+  common: {
+    value: `${transitionProperties.common} ${durations.normal} ${easings.default}`
+  },
+  colors: {
+    value: `${transitionProperties.colors} ${durations.normal} ${easings.default}`
+  },
+  opacity: {
+    value: `${transitionProperties.opacity} ${durations.normal} ${easings.default}`
+  },
+  shadow: {
+    value: `${transitionProperties.shadow} ${durations.normal} ${easings.default}`
+  },
+  transform: {
+    value: `${transitionProperties.transform} ${durations.normal} ${easings.default}`
+  },
+  position: {
+    value: `${transitionProperties.position} ${durations.normal} ${easings.default}`
+  },
+  size: {
+    value: `${transitionProperties.size} ${durations.normal} ${easings.default}`
+  },
+  spacing: {
+    value: `${transitionProperties.spacing} ${durations.normal} ${easings.default}`
+  },
+  outline: {
+    value: `${transitionProperties.outline} ${durations.normal} ${easings.default}`
+  },
+  border: {
+    value: `${transitionProperties.border} ${durations.normal} ${easings.default}`
+  }
+});
+const transitionProperty = defineUtility({
+  className: "transition-property",
+  values: "transitions"
+});
+export {
+  keyframes as A,
+  animations as a,
+  breakpoints as b,
+  containerSizes as c,
+  aspectRatios as d,
+  blurs as e,
+  borderWidths as f,
+  borders as g,
+  colors as h,
+  durations as i,
+  easings as j,
+  fontSizes as k,
+  fontWeights as l,
+  fonts as m,
+  letterSpacings as n,
+  lineHeights as o,
+  numericSizes as p,
+  sizes as q,
+  radii as r,
+  shadows as s,
+  spacing as t,
+  utilitySizes as u,
+  globalCss as v,
+  transitionProperty as w,
+  filtersProperty as x,
+  textStyles as y,
+  layerStyles as z
+};
+//# sourceMappingURL=transitions-D5SjakQu.js.map