@teamturing/react-kit 2.21.6 → 2.21.8

package/dist/index.js

@@ -585,7 +585,7 @@ var config$5 = {
   textAlign: true,
   fontStyle: true
 };
-var typography$1 = system(config$5);
+var typography = system(config$5);
 
 var config$4 = {
   alignItems: true,
@@ -987,13 +987,13 @@ layout$1.width;
   layout$1.overflowX;
   layout$1.overflowY;
 color$2.opacity;
-var fontSize$1 = typography$1.fontSize;
-  typography$1.fontFamily;
-  var fontWeight$1 = typography$1.fontWeight,
-  lineHeight$1 = typography$1.lineHeight,
-  textAlign = typography$1.textAlign;
-  typography$1.fontStyle;
-  typography$1.letterSpacing;
+var fontSize$1 = typography.fontSize;
+  typography.fontFamily;
+  var fontWeight$1 = typography.fontWeight,
+  lineHeight$1 = typography.lineHeight,
+  textAlign = typography.textAlign;
+  typography.fontStyle;
+  typography.letterSpacing;
 flexbox.alignItems;
   flexbox.alignContent;
   flexbox.justifyItems;
@@ -4299,6 +4299,23 @@ const SvgWorkbookColor = props => /*#__PURE__*/React__namespace.createElement("s
   rx: 1.546
 }));
 
+const SvgWorkbookTwoColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#D9CDF9",
+  d: "M8.1 1.5A1.5 1.5 0 0 0 6.6 3v1.41h10.601a1.5 1.5 0 0 1 1.5 1.5v12.467h1.4a1.5 1.5 0 0 0 1.5-1.5V3a1.5 1.5 0 0 0-1.5-1.5h-12Z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#D9CDF9",
+  d: "M2.5 7.123a1.5 1.5 0 0 1 1.5-1.5h12.001a1.5 1.5 0 0 1 1.5 1.5V21a1.5 1.5 0 0 1-1.5 1.5h-12A1.5 1.5 0 0 1 2.5 21V7.123Z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#9C7EEF",
+  d: "M2.5 7.123a1.5 1.5 0 0 1 1.5-1.5h.688V22.5H4A1.5 1.5 0 0 1 2.5 21V7.123ZM7.15 9.32c0-.519.42-.938.938-.938h5.626a.938.938 0 1 1 0 1.875H8.088a.938.938 0 0 1-.938-.938Z"
+}));
+
 const SvgWrong = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4528,6 +4545,7 @@ var icons = /*#__PURE__*/Object.freeze({
   WifiIcon: SvgWifi,
   WorkbookColorIcon: SvgWorkbookColor,
   WorkbookIcon: SvgWorkbook,
+  WorkbookTwoColorIcon: SvgWorkbookTwoColor,
   WrongIcon: SvgWrong,
   YoutubeIcon: SvgYoutube
 });
@@ -4943,942 +4961,204 @@ if (process.env.NODE_ENV === 'production') {
 }
 var reactIsExports = reactIs.exports;
 
-const device = {
-  deviceDesktop: 1280,
-  deviceTablet: 900,
-  deviceMobile: 640
-};
+const View = styled__default.default.div`
+  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1)}
+  ${sx}
+`;
 
-const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
-const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+var jsxRuntime = {exports: {}};
 
-const gray = {
-  gray50: '#F9FAFB',
-  gray100: '#F3F4F6',
-  gray200: '#E5E7EB',
-  gray300: '#D1D5DB',
-  gray400: '#8D94A0',
-  gray500: '#7A828D',
-  gray600: '#6F7680',
-  gray700: '#575C64',
-  gray800: '#43484E',
-  gray900: '#33373B'
-};
-const violet = {
-  violet50: '#F3EFFD',
-  violet100: '#E8E1FB',
-  violet200: '#D9CDF9',
-  violet300: '#C6B5F6',
-  violet400: '#9C7EEF',
-  violet500: '#835EEB',
-  violet600: '#7756D6',
-  violet700: '#5D43A7',
-  violet800: '#483481',
-  violet900: '#372763'
-};
-const green = {
-  green50: '#E9FAF6',
-  green100: '#BAEFE2',
-  green200: '#98E8D4',
-  green300: '#69DDC0',
-  green400: '#4CD6B4',
-  green500: '#1FCCA1',
-  green600: '#1CBA93',
-  green700: '#169172',
-  green800: '#117059',
-  green900: '#0D5644'
-};
-const yellow = {
-  yellow50: '#FFF9E6',
-  yellow100: '#FFECB2',
-  yellow200: '#FFE28D',
-  yellow300: '#FFD559',
-  yellow400: '#FFCD39',
-  yellow500: '#FFC107',
-  yellow600: '#E8B006',
-  yellow700: '#B58905',
-  yellow800: '#8C6A04',
-  yellow900: '#6B5103'
-};
-const red = {
-  red50: '#FEE9EB',
-  red100: '#FBBCC0',
-  red200: '#F99CA2',
-  red300: '#F66E78',
-  red400: '#F5525D',
-  red500: '#F22735',
-  red600: '#DC2330',
-  red700: '#AC1C26',
-  red800: '#85151D',
-  red900: '#661016'
-};
-const blue = {
-  blue50: '#edf2fd',
-  blue100: '#c6d8fa',
-  blue200: '#abc5f7',
-  blue300: '#84aaf4',
-  blue400: '#6d99f1',
-  blue500: '#4880ee',
-  blue600: '#4274d9',
-  blue700: '#335ba9',
-  blue800: '#284683',
-  blue900: '#1e3664'
-};
-const shade = {
-  transparent: '#FFFFFF00',
-  white: '#FFFFFF',
-  white10A: '#FFFFFF1A',
-  black: '#000000',
-  black60A: '#00000099'
-};
-const fuchsiaPink = {
-  fuchsiaPink50: '#FCF2FD',
-  fuchsiaPink100: '#F5D6F8',
-  fuchsiaPink200: '#F0C2F4',
-  fuchsiaPink300: '#E9A7EF',
-  fuchsiaPink400: '#E595EC',
-  fuchsiaPink500: '#DE7BE7',
-  fuchsiaPink600: '#CA70D2',
-  fuchsiaPink700: '#9E57A4',
-  fuchsiaPink800: '#7A447F',
-  fuchsiaPink900: '#5D3461'
-};
-const skyBlue = {
-  skyBlue50: '#EFF9FD',
-  skyBlue100: '#CFEDF8',
-  skyBlue200: '#B7E4F5',
-  skyBlue300: '#96D8F1',
-  skyBlue400: '#82D1EE',
-  skyBlue500: '#63C5EA',
-  skyBlue600: '#5AB3D5',
-  skyBlue700: '#468CA6',
-  skyBlue800: '#366C81',
-  skyBlue900: '#2A5362'
-};
-const indianRed = {
-  indianRed50: '#632A2A',
-  indianRed100: '#823838',
-  indianRed200: '#A84848',
-  indianRed300: '#D75C5C',
-  indianRed400: '#EC6565',
-  indianRed500: '#F08484',
-  indianRed600: '#F29898',
-  indianRed700: '#F6B8B8',
-  indianRed800: '#F9CFCF',
-  indianRed900: '#FDF0F0'
-};
-const mustardYellow = {
-  mustardYellow50: '#675025',
-  mustardYellow100: '#876931',
-  mustardYellow200: '#AE883F',
-  mustardYellow300: '#DFAE51',
-  mustardYellow400: '#F5BF59',
-  mustardYellow500: '#F7CC7A',
-  mustardYellow600: '#F8D490',
-  mustardYellow700: '#FAE2B3',
-  mustardYellow800: '#FCEBCC',
-  mustardYellow900: '#FEF9EE'
-};
-const palette = {
-  ...gray,
-  ...violet,
-  ...green,
-  ...yellow,
-  ...red,
-  ...blue,
-  ...shade,
-  ...fuchsiaPink,
-  ...skyBlue,
-  ...indianRed,
-  ...mustardYellow
-};
+var reactJsxRuntime_production_min = {};
 
-const textColor = {
-  'text/primary': palette.violet500,
-  'text/accent/blue': palette.blue500,
-  'text/accent/green': palette.green500,
-  'text/accent/yellow': palette.yellow500,
-  'text/accent/red': palette.red500,
-  'text/neutral/subtlest': palette.gray400,
-  'text/neutral/subtler': palette.gray500,
-  'text/neutral/subtle': palette.gray700,
-  'text/neutral': palette.gray900,
-  'text/inverse': palette.white,
-  'text/inverse/subtle': palette.gray200,
-  'text/inverse/subtler': palette.gray300,
-  'text/disabled': palette.gray400,
-  'text/success': palette.green500,
-  'text/warning': palette.yellow500,
-  'text/danger': palette.red500,
-  'text/selected': palette.gray900
-};
-const bgColor = {
-  'bg/secondary': palette.violet50,
-  'bg/secondary/hovered': palette.violet200,
-  'bg/secondary/pressed': palette.violet200,
-  'bg/primary': palette.violet500,
-  'bg/primary/hovered': palette.violet700,
-  'bg/primary/pressed': palette.violet700,
-  'bg/neutral/subtlest': palette.transparent,
-  'bg/neutral/subtlest/hovered': palette.gray50,
-  'bg/neutral/subtlest/pressed': palette.gray50,
-  'bg/neutral/subtler': palette.transparent,
-  'bg/neutral/subtler/hovered': palette.gray100,
-  'bg/neutral/subtler/pressed': palette.gray100,
-  'bg/neutral/subtle': palette.gray50,
-  'bg/neutral/subtle/hovered': palette.gray200,
-  'bg/neutral/subtle/pressed': palette.gray200,
-  'bg/neutral': palette.gray100,
-  'bg/neutral/hovered': palette.gray300,
-  'bg/neutral/pressed': palette.gray300,
-  'bg/neutral/bold': palette.gray700,
-  'bg/neutral/bold/hovered': palette.gray900,
-  'bg/neutral/bold/pressed': palette.gray900,
-  'bg/neutral/bolder': palette.gray900,
-  'bg/neutral/bolder/hovered': palette.black,
-  'bg/neutral/bolder/pressed': palette.black,
-  'bg/disabled': palette.gray100,
-  'bg/disabled/subtlest': palette.transparent,
-  'bg/input': palette.white,
-  'bg/accent/blue/subtlest': palette.blue50,
-  'bg/accent/green/subtlest': palette.green50,
-  'bg/accent/yellow/subtlest': palette.yellow50,
-  'bg/accent/red/subtlest': palette.red50,
-  'bg/accent/red/subtle': palette.red400,
-  'bg/accent/red': palette.red500,
-  'bg/accent/gray/subtlest': palette.gray200,
-  'bg/selected/violet': palette.violet500,
-  'bg/selected': palette.gray900,
-  'bg/selected/subtle': palette.gray100,
-  'bg/inverse': palette.black,
-  'bg/inverse/subtlest': palette.white10A,
-  'bg/success': palette.green50,
-  'bg/success/bold': palette.green500,
-  'bg/warning': palette.yellow50,
-  'bg/warning/bold': palette.yellow500,
-  'bg/danger': palette.red50,
-  'bg/danger/bold': palette.red400,
-  'bg/danger/bold/hovered': palette.red600,
-  'bg/danger/bold/pressed': palette.red600
-};
-const borderColor = {
-  'border/neutral/subtle': palette.gray100,
-  'border/neutral': palette.gray200,
-  'border/neutral/bolder': palette.gray300,
-  'border/input': palette.gray200,
-  'border/inverse': palette.white10A,
-  'border/selected': palette.gray900,
-  'border/disabled': palette.gray100,
-  'border/primary': palette.violet500,
-  'border/hovered': palette.blue300,
-  'border/focused': palette.blue500,
-  'border/danger': palette.red500,
-  'border/success': palette.green500
-};
-const iconColor = {
-  'icon/neutral': palette.gray300,
-  'icon/neutral/bold': palette.gray400,
-  'icon/neutral/bolder': palette.gray700,
-  'icon/accent/gray': palette.gray900,
-  'icon/accent/blue': palette.blue500,
-  'icon/accent/blue/bold': palette.blue700,
-  'icon/accent/green': palette.green500,
-  'icon/accent/yellow': palette.yellow500,
-  'icon/accent/red': palette.red500,
-  'icon/inverse': palette.white,
-  'icon/disabled': palette.gray300,
-  'icon/disabled/subtler': palette.gray200,
-  'icon/selected/violet': palette.violet500,
-  'icon/selected': palette.gray900,
-  'icon/primary/subtle': palette.violet300,
-  'icon/primary': palette.violet500,
-  'icon/primary/bold': palette.violet700,
-  'icon/success': palette.green500,
-  'icon/warning': palette.yellow500,
-  'icon/danger': palette.red500
-};
-const linkColor = {
-  'link': palette.blue500,
-  'link/hovered': palette.blue700,
-  'link/pressed': palette.blue700,
-  'link/neutral': palette.gray500,
-  'link/neutral/hovered': palette.gray700,
-  'link/neutral/pressed': palette.gray700,
-  'link/neutral/bold': palette.gray700,
-  'link/neutral/bold/hovered': palette.gray900,
-  'link/neutral/bold/pressed': palette.gray900,
-  'link/disabled': palette.gray700
-};
-const dimColor = {
-  dim: palette.black60A
-};
-const scaleColor = {
-  'scale/violet/0': palette.violet50,
-  'scale/violet/1': palette.violet100,
-  'scale/violet/2': palette.violet200,
-  'scale/violet/3': palette.violet300,
-  'scale/violet/4': palette.violet400,
-  'scale/violet/5': palette.violet500,
-  'scale/violet/6': palette.violet600,
-  'scale/violet/7': palette.violet700,
-  'scale/violet/8': palette.violet800,
-  'scale/violet/9': palette.violet900,
-  'scale/gray/0': palette.gray50,
-  'scale/gray/1': palette.gray100,
-  'scale/gray/2': palette.gray200,
-  'scale/gray/3': palette.gray300,
-  'scale/gray/4': palette.gray400,
-  'scale/gray/5': palette.gray500,
-  'scale/gray/6': palette.gray600,
-  'scale/gray/7': palette.gray700,
-  'scale/gray/8': palette.gray800,
-  'scale/gray/9': palette.gray900,
-  'scale/blue/0': palette.blue50,
-  'scale/blue/1': palette.blue100,
-  'scale/blue/2': palette.blue200,
-  'scale/blue/3': palette.blue300,
-  'scale/blue/4': palette.blue400,
-  'scale/blue/5': palette.blue500,
-  'scale/blue/6': palette.blue600,
-  'scale/blue/7': palette.blue700,
-  'scale/blue/8': palette.blue800,
-  'scale/blue/9': palette.blue900,
-  'scale/green/0': palette.green50,
-  'scale/green/1': palette.green100,
-  'scale/green/2': palette.green200,
-  'scale/green/3': palette.green300,
-  'scale/green/4': palette.green400,
-  'scale/green/5': palette.green500,
-  'scale/green/6': palette.green600,
-  'scale/green/7': palette.green700,
-  'scale/green/8': palette.green800,
-  'scale/green/9': palette.green900,
-  'scale/pink/0': palette.fuchsiaPink50,
-  'scale/pink/1': palette.fuchsiaPink100,
-  'scale/pink/2': palette.fuchsiaPink200,
-  'scale/pink/3': palette.fuchsiaPink300,
-  'scale/pink/4': palette.fuchsiaPink400,
-  'scale/pink/5': palette.fuchsiaPink500,
-  'scale/pink/6': palette.fuchsiaPink600,
-  'scale/pink/7': palette.fuchsiaPink700,
-  'scale/pink/8': palette.fuchsiaPink800,
-  'scale/pink/9': palette.fuchsiaPink900,
-  'scale/skyblue/0': palette.skyBlue50,
-  'scale/skyblue/1': palette.skyBlue100,
-  'scale/skyblue/2': palette.skyBlue200,
-  'scale/skyblue/3': palette.skyBlue300,
-  'scale/skyblue/4': palette.skyBlue400,
-  'scale/skyblue/5': palette.skyBlue500,
-  'scale/skyblue/6': palette.skyBlue600,
-  'scale/skyblue/7': palette.skyBlue700,
-  'scale/skyblue/8': palette.skyBlue800,
-  'scale/skyblue/9': palette.skyBlue900,
-  'scale/red/0': palette.indianRed50,
-  'scale/red/1': palette.indianRed100,
-  'scale/red/2': palette.indianRed200,
-  'scale/red/3': palette.indianRed300,
-  'scale/red/4': palette.indianRed400,
-  'scale/red/5': palette.indianRed500,
-  'scale/red/6': palette.indianRed600,
-  'scale/red/7': palette.indianRed700,
-  'scale/red/8': palette.indianRed800,
-  'scale/red/9': palette.indianRed900,
-  'scale/yellow/0': palette.mustardYellow50,
-  'scale/yellow/1': palette.mustardYellow100,
-  'scale/yellow/2': palette.mustardYellow200,
-  'scale/yellow/3': palette.mustardYellow300,
-  'scale/yellow/4': palette.mustardYellow400,
-  'scale/yellow/5': palette.mustardYellow500,
-  'scale/yellow/6': palette.mustardYellow600,
-  'scale/yellow/7': palette.mustardYellow700,
-  'scale/yellow/8': palette.mustardYellow800,
-  'scale/yellow/9': palette.mustardYellow900
-};
-const color$1 = {
-  ...textColor,
-  ...bgColor,
-  ...borderColor,
-  ...iconColor,
-  ...linkColor,
-  ...dimColor,
-  ...scaleColor
-};
-
-const shadow = {
-  shadowMedium: '0px 0px 1px 0px rgba(0, 0, 0, 0.06), 0px 8px 24px 0px rgba(0, 0, 0, 0.12)'
-};
-
-const surfaceElevation = {
-  'surface': palette.white,
-  'surface/overlay': palette.white
-};
-const shadowElevation = {
-  'shadow/overlay': shadow.shadowMedium
-};
-const elevation = {
-  ...surfaceElevation,
-  ...shadowElevation
-};
-
-const colorStopList = {
-  colorStopListVioletPink: '#8E6CF0, #CF75F3',
-  colorStopListBlackGray: '#0F0E0F, #595959',
-  colorStopListWhite: '#FFFFFF, #FFFFFF00',
-  colorStopListBlack: '#000000, #00000000'
-};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactJsxRuntime_production_min;
+function requireReactJsxRuntime_production_min() {
+  if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+  hasRequiredReactJsxRuntime_production_min = 1;
+  var f = React__namespace.default,
+    k = Symbol.for("react.element"),
+    l = Symbol.for("react.fragment"),
+    m = Object.prototype.hasOwnProperty,
+    n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
+    p = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    };
+  function q(c, a, g) {
+    var b,
+      d = {},
+      e = null,
+      h = null;
+    void 0 !== g && (e = "" + g);
+    void 0 !== a.key && (e = "" + a.key);
+    void 0 !== a.ref && (h = a.ref);
+    for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+    if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
+    return {
+      $$typeof: k,
+      type: c,
+      key: e,
+      ref: h,
+      props: d,
+      _owner: n.current
+    };
+  }
+  reactJsxRuntime_production_min.Fragment = l;
+  reactJsxRuntime_production_min.jsx = q;
+  reactJsxRuntime_production_min.jsxs = q;
+  return reactJsxRuntime_production_min;
+}
 
-const direction = {
-  directionToRight: 'to right',
-  directionToLeft: 'to left',
-  directionToRightBottom: 'to right bottom',
-  directionToTop: 'to top'
-};
+var reactJsxRuntime_development = {};
 
-const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
-const textGradient = {
-  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
-};
-const bgGradient = {
-  'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
-  'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
-};
-const borderGradient = {
-  'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
-};
-const overlayGradient = {
-  'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
-  'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
-  'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
-  'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
-  'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
-  'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
-  'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
-  'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
-  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
-};
-const gradient = {
-  ...textGradient,
-  ...bgGradient,
-  ...borderGradient,
-  ...overlayGradient
-};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactJsxRuntime_development;
+function requireReactJsxRuntime_development() {
+  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+  hasRequiredReactJsxRuntime_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function () {
 
-const rounding = {
-  rounding0: 0,
-  rounding4: 4,
-  rounding8: 8,
-  rounding12: 12,
-  rounding16: 16,
-  rounding20: 20,
-  rounding24: 24,
-  rounding32: 32,
-  rounding9999: 9999
-};
+      var React = React__namespace.default;
 
-const radii = {
-  none: rounding.rounding0,
-  xxs: rounding.rounding4,
-  xs: rounding.rounding8,
-  s: rounding.rounding12,
-  m: rounding.rounding16,
-  l: rounding.rounding20,
-  xl: rounding.rounding24,
-  xxl: rounding.rounding32,
-  full: rounding.rounding9999
-};
+      // ATTENTION
+      // When adding new symbols to this file,
+      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+      // The Symbol used to tag the ReactElement-like types.
+      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+      var REACT_MEMO_TYPE = Symbol.for('react.memo');
+      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+      var FAUX_ITERATOR_SYMBOL = '@@iterator';
+      function getIteratorFn(maybeIterable) {
+        if (maybeIterable === null || typeof maybeIterable !== 'object') {
+          return null;
+        }
+        var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+        if (typeof maybeIterator === 'function') {
+          return maybeIterator;
+        }
+        return null;
+      }
+      var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+      function error(format) {
+        {
+          {
+            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+              args[_key2 - 1] = arguments[_key2];
+            }
+            printWarning('error', format, args);
+          }
+        }
+      }
+      function printWarning(level, format, args) {
+        // When changing this logic, you might want to also
+        // update consoleWithStackDev.www.js as well.
+        {
+          var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+          var stack = ReactDebugCurrentFrame.getStackAddendum();
+          if (stack !== '') {
+            format += '%s';
+            args = args.concat([stack]);
+          } // eslint-disable-next-line react-internal/safe-string-coercion
 
-const unit = 4;
-const spacing = {
-  spacing0: 0 * unit,
-  // 0
-  spacing1: 1,
-  // 1
-  spacing2: 0.5 * unit,
-  // 2
-  spacing4: 1 * unit,
-  // 4
-  spacing6: 1.5 * unit,
-  // 6
-  spacing8: 2 * unit,
-  // 8
-  spacing12: 3 * unit,
-  // 12
-  spacing16: 4 * unit,
-  // 16
-  spacing20: 5 * unit,
-  // 20
-  spacing24: 6 * unit,
-  // 24
-  spacing28: 7 * unit,
-  // 28
-  spacing32: 8 * unit,
-  // 32
-  spacing40: 10 * unit,
-  // 40
-  spacing48: 12 * unit,
-  // 48
-  spacing56: 14 * unit,
-  // 56
-  spacing64: 16 * unit,
-  // 64
-  spacing72: 18 * unit,
-  // 72
-  spacing80: 20 * unit,
-  // 80
-  spacing96: 24 * unit,
-  // 96
-  spacing112: 28 * unit,
-  // 112
-  spacing120: 30 * unit,
-  // 120
-  spacing128: 32 * unit,
-  // 128
-  spacing160: 40 * unit,
-  // 160
-  spacing192: 48 * unit,
-  // 192
-  spacing200: 50 * unit,
-  // 200
-  spacing320: 80 * unit // 320
-};
+          var argsWithFormat = args.map(function (item) {
+            return String(item);
+          }); // Careful: RN currently depends on this prefix
 
-const space = {
-  '-80': -spacing.spacing320,
-  '-50': -spacing.spacing200,
-  '-48': -spacing.spacing192,
-  '-40': -spacing.spacing160,
-  '-32': -spacing.spacing128,
-  '-30': -spacing.spacing120,
-  '-28': -spacing.spacing112,
-  '-24': -spacing.spacing96,
-  '-20': -spacing.spacing80,
-  '-18': -spacing.spacing72,
-  '-16': -spacing.spacing64,
-  '-14': -spacing.spacing56,
-  '-12': -spacing.spacing48,
-  '-10': -spacing.spacing40,
-  '-8': -spacing.spacing32,
-  '-7': -spacing.spacing28,
-  '-6': -spacing.spacing24,
-  '-5': -spacing.spacing20,
-  '-4': -spacing.spacing16,
-  '-3': -spacing.spacing12,
-  '-2': -spacing.spacing8,
-  '-1': -spacing.spacing4,
-  '-0.5': -spacing.spacing2,
-  '-0.25': -spacing.spacing1,
-  0: spacing.spacing0,
-  0.25: spacing.spacing1,
-  0.5: spacing.spacing2,
-  1: spacing.spacing4,
-  2: spacing.spacing8,
-  3: spacing.spacing12,
-  4: spacing.spacing16,
-  5: spacing.spacing20,
-  6: spacing.spacing24,
-  7: spacing.spacing28,
-  8: spacing.spacing32,
-  10: spacing.spacing40,
-  12: spacing.spacing48,
-  14: spacing.spacing56,
-  16: spacing.spacing64,
-  18: spacing.spacing72,
-  20: spacing.spacing80,
-  24: spacing.spacing96,
-  28: spacing.spacing112,
-  30: spacing.spacing120,
-  32: spacing.spacing128,
-  40: spacing.spacing160,
-  48: spacing.spacing192,
-  50: spacing.spacing200,
-  80: spacing.spacing320
-};
+          argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+          // breaks IE9: https://github.com/facebook/react/issues/13610
+          // eslint-disable-next-line react-internal/no-production-logging
 
-const fontSize = {
-  fontSize50: 10,
-  fontSize100: 12,
-  fontSize200: 14,
-  fontSize300: 16,
-  fontSize400: 18,
-  fontSize500: 20,
-  fontSize600: 22,
-  fontSize700: 24,
-  fontSize800: 28,
-  fontSize900: 32,
-  fontSize1000: 40,
-  fontSize1100: 48,
-  fontSize1200: 64,
-  fontSize1300: 100
-};
+          Function.prototype.apply.call(console[level], console, argsWithFormat);
+        }
+      }
 
-const fontSizes = {
-  xxs: fontSize.fontSize100,
-  xs: fontSize.fontSize200,
-  s: fontSize.fontSize300,
-  m: fontSize.fontSize500,
-  l: fontSize.fontSize700,
-  xl: fontSize.fontSize800,
-  xxl: fontSize.fontSize900,
-  display4: fontSize.fontSize1000,
-  display3: fontSize.fontSize1100,
-  display2: fontSize.fontSize1200,
-  display1: fontSize.fontSize1300
-};
+      // -----------------------------------------------------------------------------
 
-const fontWeight = {
-  fontWeight100: 100,
-  fontWeight200: 200,
-  fontWeight300: 300,
-  fontWeight400: 400,
-  fontWeight500: 500,
-  fontWeight600: 600,
-  fontWeight700: 700,
-  fontWeight800: 800,
-  fontWeight900: 900
-};
+      var enableScopeAPI = false; // Experimental Create Event Handle API.
+      var enableCacheElement = false;
+      var enableTransitionTracing = false; // No known bugs, but needs performance testing
 
-const fontWeights = {
-  regular: fontWeight.fontWeight400,
-  medium: fontWeight.fontWeight500,
-  bold: fontWeight.fontWeight700
-};
+      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+      // stuff. Intended to enable React core members to more easily debug scheduling
+      // issues in DEV builds.
 
-const lineHeight = {
-  lineHeight1: 1.4,
-  lineHeight2: 1.5
-};
+      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
 
-const lineHeights = {
-  1: lineHeight.lineHeight1,
-  2: lineHeight.lineHeight2
-};
+      var REACT_MODULE_REFERENCE;
+      {
+        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+      }
+      function isValidElementType(type) {
+        if (typeof type === 'string' || typeof type === 'function') {
+          return true;
+        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
 
-const typography = {
-  'display1': {
-    fontSize: fontSizes.display1,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[1]
-  },
-  'display2': {
-    fontSize: fontSizes.display2,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[1]
-  },
-  'display3': {
-    fontSize: fontSizes.display3,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[1]
-  },
-  'display4': {
-    fontSize: fontSizes.display4,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  'xxl/regular': {
-    fontSize: fontSizes.xxl,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  'xxl': {
-    fontSize: fontSizes.xxl,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  'xxl/bold': {
-    fontSize: fontSizes.xxl,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  'xl/regular': {
-    fontSize: fontSizes.xl,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  'xl': {
-    fontSize: fontSizes.xl,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  'xl/bold': {
-    fontSize: fontSizes.xl,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  'l/regular': {
-    fontSize: fontSizes.l,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  'l': {
-    fontSize: fontSizes.l,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  'l/bold': {
-    fontSize: fontSizes.l,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  'm/regular': {
-    fontSize: fontSizes.m,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  'm': {
-    fontSize: fontSizes.m,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  'm/bold': {
-    fontSize: fontSizes.m,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  's/regular': {
-    fontSize: fontSizes.s,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  's': {
-    fontSize: fontSizes.s,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  's/bold': {
-    fontSize: fontSizes.s,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  'xs/regular': {
-    fontSize: fontSizes.xs,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  'xs': {
-    fontSize: fontSizes.xs,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  'xs/bold': {
-    fontSize: fontSizes.xs,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  },
-  'xxs/regular': {
-    fontSize: fontSizes.xxs,
-    fontWeight: fontWeights.regular,
-    lineHeight: lineHeights[2]
-  },
-  'xxs': {
-    fontSize: fontSizes.xxs,
-    fontWeight: fontWeights.medium,
-    lineHeight: lineHeights[2]
-  },
-  'xxs/bold': {
-    fontSize: fontSizes.xxs,
-    fontWeight: fontWeights.bold,
-    lineHeight: lineHeights[2]
-  }
-};
-
-const View = styled__default.default.div`
-  ${compose(layout$1, color$2, flexbox, background, border, position, shadow$1)}
-  ${sx}
-`;
-
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production_min = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactJsxRuntime_production_min;
-function requireReactJsxRuntime_production_min() {
-  if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
-  hasRequiredReactJsxRuntime_production_min = 1;
-  var f = React__namespace.default,
-    k = Symbol.for("react.element"),
-    l = Symbol.for("react.fragment"),
-    m = Object.prototype.hasOwnProperty,
-    n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
-    p = {
-      key: !0,
-      ref: !0,
-      __self: !0,
-      __source: !0
-    };
-  function q(c, a, g) {
-    var b,
-      d = {},
-      e = null,
-      h = null;
-    void 0 !== g && (e = "" + g);
-    void 0 !== a.key && (e = "" + a.key);
-    void 0 !== a.ref && (h = a.ref);
-    for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
-    if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
-    return {
-      $$typeof: k,
-      type: c,
-      key: e,
-      ref: h,
-      props: d,
-      _owner: n.current
-    };
-  }
-  reactJsxRuntime_production_min.Fragment = l;
-  reactJsxRuntime_production_min.jsx = q;
-  reactJsxRuntime_production_min.jsxs = q;
-  return reactJsxRuntime_production_min;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactJsxRuntime_development;
-function requireReactJsxRuntime_development() {
-  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-  hasRequiredReactJsxRuntime_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function () {
+        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
+          return true;
+        }
+        if (typeof type === 'object' && type !== null) {
+          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
+          // This needs to include all possible module reference object
+          // types supported by any Flight configuration anywhere since
+          // we don't know which Flight build this will end up being used
+          // with.
+          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+            return true;
+          }
+        }
+        return false;
+      }
+      function getWrappedName(outerType, innerType, wrapperName) {
+        var displayName = outerType.displayName;
+        if (displayName) {
+          return displayName;
+        }
+        var functionName = innerType.displayName || innerType.name || '';
+        return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+      } // Keep in sync with react-reconciler/getComponentNameFromFiber
 
-      var React = React__namespace.default;
+      function getContextName(type) {
+        return type.displayName || 'Context';
+      } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
 
-      // ATTENTION
-      // When adding new symbols to this file,
-      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-      // The Symbol used to tag the ReactElement-like types.
-      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-      var REACT_MEMO_TYPE = Symbol.for('react.memo');
-      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-      var FAUX_ITERATOR_SYMBOL = '@@iterator';
-      function getIteratorFn(maybeIterable) {
-        if (maybeIterable === null || typeof maybeIterable !== 'object') {
+      function getComponentNameFromType(type) {
+        if (type == null) {
+          // Host root, text node or just invalid type.
           return null;
         }
-        var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
-        if (typeof maybeIterator === 'function') {
-          return maybeIterator;
-        }
-        return null;
-      }
-      var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-      function error(format) {
         {
-          {
-            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-              args[_key2 - 1] = arguments[_key2];
-            }
-            printWarning('error', format, args);
-          }
-        }
-      }
-      function printWarning(level, format, args) {
-        // When changing this logic, you might want to also
-        // update consoleWithStackDev.www.js as well.
-        {
-          var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-          var stack = ReactDebugCurrentFrame.getStackAddendum();
-          if (stack !== '') {
-            format += '%s';
-            args = args.concat([stack]);
-          } // eslint-disable-next-line react-internal/safe-string-coercion
-
-          var argsWithFormat = args.map(function (item) {
-            return String(item);
-          }); // Careful: RN currently depends on this prefix
-
-          argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-          // breaks IE9: https://github.com/facebook/react/issues/13610
-          // eslint-disable-next-line react-internal/no-production-logging
-
-          Function.prototype.apply.call(console[level], console, argsWithFormat);
-        }
-      }
-
-      // -----------------------------------------------------------------------------
-
-      var enableScopeAPI = false; // Experimental Create Event Handle API.
-      var enableCacheElement = false;
-      var enableTransitionTracing = false; // No known bugs, but needs performance testing
-
-      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-      // stuff. Intended to enable React core members to more easily debug scheduling
-      // issues in DEV builds.
-
-      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
-
-      var REACT_MODULE_REFERENCE;
-      {
-        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-      }
-      function isValidElementType(type) {
-        if (typeof type === 'string' || typeof type === 'function') {
-          return true;
-        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
-          return true;
-        }
-        if (typeof type === 'object' && type !== null) {
-          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
-          // This needs to include all possible module reference object
-          // types supported by any Flight configuration anywhere since
-          // we don't know which Flight build this will end up being used
-          // with.
-          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-            return true;
-          }
-        }
-        return false;
-      }
-      function getWrappedName(outerType, innerType, wrapperName) {
-        var displayName = outerType.displayName;
-        if (displayName) {
-          return displayName;
-        }
-        var functionName = innerType.displayName || innerType.name || '';
-        return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
-      } // Keep in sync with react-reconciler/getComponentNameFromFiber
-
-      function getContextName(type) {
-        return type.displayName || 'Context';
-      } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
-
-      function getComponentNameFromType(type) {
-        if (type == null) {
-          // Host root, text node or just invalid type.
-          return null;
-        }
-        {
-          if (typeof type.tag === 'number') {
-            error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
+          if (typeof type.tag === 'number') {
+            error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
           }
         }
         if (typeof type === 'function') {
@@ -6906,9 +6186,11 @@ const Grid = /*#__PURE__*/React.forwardRef(({
 const BaseGrid = styled__default.default(View)({
   display: 'flex',
   flexDirection: 'row'
-}, variant({
+}, ({
+  theme
+}) => variant({
   prop: 'gapX',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
       '& > *': {
         px: forcePixelValue(value / 2)
@@ -6917,9 +6199,11 @@ const BaseGrid = styled__default.default(View)({
     };
     return [key, styleValue];
   }))
-}), variant({
+}), ({
+  theme
+}) => variant({
   prop: 'gapY',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
       '& > *': {
         mt: forcePixelValue(value)
@@ -7007,34 +6291,136 @@ const Text = styled__default.default.span({
   '& > span': {
     display: 'inline'
   }
-}, variant({
+}, ({
+  theme
+}) => variant({
   prop: 'typography',
   variants: {
-    'display1': typography.display1,
-    'display2': typography.display2,
-    'display3': typography.display3,
-    'display4': typography.display4,
-    'xxl/regular': typography['xxl/regular'],
-    'xxl': typography['xxl'],
-    'xxl/bold': typography['xxl/bold'],
-    'xl/regular': typography['xl/regular'],
-    'xl': typography['xl'],
-    'xl/bold': typography['xl/bold'],
-    'l/regular': typography['l/regular'],
-    'l': typography['l'],
-    'l/bold': typography['l/bold'],
-    'm/regular': typography['m/regular'],
-    'm': typography['m'],
-    'm/bold': typography['m/bold'],
-    's/regular': typography['s/regular'],
-    's': typography['s'],
-    's/bold': typography['s/bold'],
-    'xs/regular': typography['xs/regular'],
-    'xs': typography['xs'],
-    'xs/bold': typography['xs/bold'],
-    'xxs/regular': typography['xxs/regular'],
-    'xxs': typography['xxs'],
-    'xxs/bold': typography['xxs/bold']
+    'display1': {
+      fontSize: theme.fontSizes.display1,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display2': {
+      fontSize: theme.fontSizes.display2,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display3': {
+      fontSize: theme.fontSizes.display3,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[1]
+    },
+    'display4': {
+      fontSize: theme.fontSizes.display4,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl/regular': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxl/bold': {
+      fontSize: theme.fontSizes.xxl,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl/regular': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xl/bold': {
+      fontSize: theme.fontSizes.xl,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l/regular': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'l/bold': {
+      fontSize: theme.fontSizes.l,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm/regular': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'm/bold': {
+      fontSize: theme.fontSizes.m,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    's/regular': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    's': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    's/bold': {
+      fontSize: theme.fontSizes.s,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs/regular': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xs/bold': {
+      fontSize: theme.fontSizes.xs,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs/regular': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.regular,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights[2]
+    },
+    'xxs/bold': {
+      fontSize: theme.fontSizes.xxs,
+      fontWeight: theme.fontWeights.bold,
+      lineHeight: theme.lineHeights[2]
+    }
   }
 }), compose(wordBreak, whiteSpace, textDecoration, fontSize$1, fontWeight$1, lineHeight$1, color$2, textAlign), sx);
 Text.defaultProps = {
@@ -9564,7 +8950,7 @@ const hsla = {
     },
 };
 
-const color = {
+const color$1 = {
     test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
     parse: (v) => {
         if (rgba.test(v)) {
@@ -9700,7 +9086,7 @@ const colorTokeniser = {
     regex: colorRegex,
     countKey: "Colors",
     token: "${c}",
-    parse: color.parse,
+    parse: color$1.parse,
 };
 const numberTokeniser = {
     regex: floatRegex,
@@ -9745,7 +9131,7 @@ function createTransformer(source) {
                 output = output.replace(cssVarTokeniser.token, v[i]);
             }
             else if (i < numVars + numColors) {
-                output = output.replace(colorTokeniser.token, color.transform(v[i]));
+                output = output.replace(colorTokeniser.token, color$1.transform(v[i]));
             }
             else {
                 output = output.replace(numberTokeniser.token, sanitize(v[i]));
@@ -9772,7 +9158,7 @@ function getMixer(origin, target) {
     if (typeof origin === "number") {
         return (v) => mix(origin, target, v);
     }
-    else if (color.test(origin)) {
+    else if (color$1.test(origin)) {
         return mixColor(origin, target);
     }
     else {
@@ -9846,7 +9232,7 @@ function detectMixerFactory(v) {
         return mixNumber;
     }
     else if (typeof v === "string") {
-        return color.test(v) ? mixColor : mixComplex;
+        return color$1.test(v) ? mixColor : mixComplex;
     }
     else if (Array.isArray(v)) {
         return mixArray;
@@ -10941,17 +10327,17 @@ const filter = {
 const defaultValueTypes = {
     ...numberValueTypes,
     // Color props
-    color,
-    backgroundColor: color,
-    outlineColor: color,
-    fill: color,
-    stroke: color,
+    color: color$1,
+    backgroundColor: color$1,
+    outlineColor: color$1,
+    fill: color$1,
+    stroke: color$1,
     // Border props
-    borderColor: color,
-    borderTopColor: color,
-    borderRightColor: color,
-    borderBottomColor: color,
-    borderLeftColor: color,
+    borderColor: color$1,
+    borderTopColor: color$1,
+    borderRightColor: color$1,
+    borderBottomColor: color$1,
+    borderLeftColor: color$1,
     filter,
     WebkitFilter: filter,
 };
@@ -11541,7 +10927,7 @@ const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v))
 /**
  * A list of all ValueTypes
  */
-const valueTypes = [...dimensionValueTypes, color, complex];
+const valueTypes = [...dimensionValueTypes, color$1, complex];
 /**
  * Tests a value against the list of ValueTypes
  */
@@ -17107,12 +16493,14 @@ const spin = styled.keyframes`
   }
 `;
 const Spinner = styled__default.default(SvgProgressGradient)`
+  color: ${({
+  theme
+}) => theme.colors['icon/neutral']};
   animation: ${spin} 1000ms infinite steps(8, end);
 `;
 Spinner.defaultProps = {
   width: 32,
-  height: 32,
-  color: color$1['icon/neutral']
+  height: 32
 };
 
 const UnstyledButton = styled__default.default.button`
@@ -17658,17 +17046,20 @@ const Chip = ({
   trailingIcon: TrailingIcon,
   children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
 });
-const BaseChip = styled__default.default.span({
+const BaseChip = styled__default.default.span(({
+  theme
+}) => ({
   position: 'relative',
   width: 'fit-content',
-  borderRadius: radii.full,
+  borderRadius: theme.radii.full,
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center'
-}, ({
+}), ({
   leadingIcon,
-  trailingIcon
+  trailingIcon,
+  theme
 }) => variant({
   prop: 'size',
   variants: {
@@ -17676,9 +17067,9 @@ const BaseChip = styled__default.default.span({
       'pl': leadingIcon ? 2 : 3,
       'pr': trailingIcon ? 2 : 3,
       'py': 1,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       'columnGap': 1,
       '& svg': {
         width: 16,
@@ -17689,9 +17080,9 @@ const BaseChip = styled__default.default.span({
       'pl': leadingIcon ? 2 : 3,
       'pr': trailingIcon ? 2 : 3,
       'py': 1,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       'columnGap': 0.5,
       '& svg': {
         width: 16,
@@ -17702,9 +17093,9 @@ const BaseChip = styled__default.default.span({
       'pl': !leadingIcon && trailingIcon ? 3 : 2,
       'pr': leadingIcon && !trailingIcon ? 3 : 2,
       'py': 0.5,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       'columnGap': 0.5,
       '& svg': {
         width: 12,
@@ -17712,28 +17103,30 @@ const BaseChip = styled__default.default.span({
       }
     }
   }
-}), variant({
+}), ({
+  theme
+}) => variant({
   prop: 'variant',
   variants: {
     'primary': {
-      'backgroundColor': color$1['bg/primary'],
-      'color': color$1['text/inverse'],
+      'backgroundColor': theme.colors['bg/primary'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: color$1['icon/inverse']
+        color: theme.colors['icon/inverse']
       }
     },
     'secondary': {
-      'backgroundColor': color$1['bg/secondary'],
-      'color': color$1['text/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['text/primary'],
       '& svg': {
-        color: color$1['icon/primary']
+        color: theme.colors['icon/primary']
       }
     },
     'outlined-primary': {
-      'backgroundColor': color$1['bg/neutral/subtler'],
-      'color': color$1['text/primary'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['text/primary'],
       '& svg': {
-        color: color$1['icon/primary']
+        color: theme.colors['icon/primary']
       },
       '&:after': {
         content: '""',
@@ -17744,16 +17137,16 @@ const BaseChip = styled__default.default.span({
         left: 0,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color$1['border/primary'],
-        borderRadius: radii.full,
+        borderColor: theme.colors['border/primary'],
+        borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       }
     },
     'outlined-neutral': {
-      'backgroundColor': color$1['bg/neutral/subtler'],
-      'color': color$1['text/neutral/subtle'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['text/neutral/subtle'],
       '& svg': {
-        color: color$1['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       '&:after': {
         content: '""',
@@ -17764,51 +17157,51 @@ const BaseChip = styled__default.default.span({
         left: 0,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color$1['border/neutral/bolder'],
-        borderRadius: radii.full,
+        borderColor: theme.colors['border/neutral/bolder'],
+        borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       }
     },
     'neutral': {
-      'backgroundColor': color$1['bg/neutral'],
-      'color': color$1['text/neutral/subtle'],
+      'backgroundColor': theme.colors['bg/neutral'],
+      'color': theme.colors['text/neutral/subtle'],
       '& svg': {
-        color: color$1['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       }
     },
     'red': {
-      'backgroundColor': color$1['bg/accent/red/subtlest'],
-      'color': color$1['text/accent/red'],
+      'backgroundColor': theme.colors['bg/accent/red/subtlest'],
+      'color': theme.colors['text/accent/red'],
       '& svg': {
-        color: color$1['icon/accent/red']
+        color: theme.colors['icon/accent/red']
       }
     },
     'red-accent': {
-      'backgroundColor': color$1['bg/accent/red'],
-      'color': color$1['text/inverse'],
+      'backgroundColor': theme.colors['bg/accent/red'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: color$1['icon/inverse']
+        color: theme.colors['icon/inverse']
       }
     },
     'yellow': {
-      'backgroundColor': color$1['bg/accent/yellow/subtlest'],
-      'color': color$1['text/accent/yellow'],
+      'backgroundColor': theme.colors['bg/accent/yellow/subtlest'],
+      'color': theme.colors['text/accent/yellow'],
       '& svg': {
-        color: color$1['icon/accent/yellow']
+        color: theme.colors['icon/accent/yellow']
       }
     },
     'green': {
-      'backgroundColor': color$1['bg/accent/green/subtlest'],
-      'color': color$1['text/accent/green'],
+      'backgroundColor': theme.colors['bg/accent/green/subtlest'],
+      'color': theme.colors['text/accent/green'],
       '& svg': {
-        color: color$1['icon/accent/green']
+        color: theme.colors['icon/accent/green']
       }
     },
     'dim': {
-      'backgroundColor': color$1['dim'],
-      'color': color$1['text/inverse'],
+      'backgroundColor': theme.colors['dim'],
+      'color': theme.colors['text/inverse'],
       '& svg': {
-        color: color$1['icon/inverse']
+        color: theme.colors['icon/inverse']
       }
     }
   }
@@ -18148,10 +17541,11 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
 });
 const BaseIconButton = styled__default.default(UnstyledButton)(({
   $loading,
-  $disabled
+  $disabled,
+  theme
 }) => ({
   'position': 'relative',
-  'borderRadius': radii.full,
+  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block',
@@ -18159,7 +17553,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
   },
   'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
   '&:focus-visible': {
-    outlineColor: color$1['border/focused'],
+    outlineColor: theme.colors['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
     outlineOffset: 2
@@ -18190,55 +17584,56 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     }
   }
 }), ({
-  $disabled
+  $disabled,
+  theme
 }) => variant({
   prop: 'variant',
   variants: {
     'primary': {
-      'backgroundColor': color$1['bg/primary'],
-      'color': color$1['icon/inverse'],
+      'backgroundColor': theme.colors['bg/primary'],
+      'color': theme.colors['icon/inverse'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color$1['bg/primary/hovered']
+        backgroundColor: theme.colors['bg/primary/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color$1['bg/primary/pressed']
+        backgroundColor: theme.colors['bg/primary/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled'],
-        color: color$1['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'secondary': {
-      'backgroundColor': color$1['bg/secondary'],
-      'color': color$1['icon/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      'color': theme.colors['icon/primary'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color$1['bg/secondary/hovered']
+        backgroundColor: theme.colors['bg/secondary/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color$1['bg/secondary/pressed']
+        backgroundColor: theme.colors['bg/secondary/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled'],
-        color: color$1['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'neutral': {
-      'backgroundColor': color$1['bg/neutral'],
-      'color': color$1['icon/accent/gray'],
+      'backgroundColor': theme.colors['bg/neutral'],
+      'color': theme.colors['icon/accent/gray'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color$1['bg/neutral/hovered']
+        backgroundColor: theme.colors['bg/neutral/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color$1['bg/neutral/pressed']
+        backgroundColor: theme.colors['bg/neutral/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled'],
-        color: color$1['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'outlined': {
-      'backgroundColor': color$1['bg/neutral/subtler'],
-      'color': color$1['icon/neutral/bolder'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral/bolder'],
       '&:after': {
         content: '""',
         position: 'absolute',
@@ -18248,78 +17643,78 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
         left: 0,
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color$1['border/neutral/bolder'],
-        borderRadius: radii.full,
+        borderColor: theme.colors['border/neutral/bolder'],
+        borderRadius: theme.radii.full,
         boxSizing: 'border-box'
       },
       '&:hover:not(:disabled)': {
-        backgroundColor: color$1['bg/neutral/subtler/hovered']
+        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color$1['bg/neutral/subtler/pressed']
+        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
       },
       ...($disabled ? {
-        'backgroundColor': color$1['bg/disabled'],
-        'color': color$1['icon/disabled'],
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['icon/disabled'],
         '&:after': {
           display: 'none'
         }
       } : {})
     },
     'plain-bold': {
-      'backgroundColor': color$1['bg/neutral/subtler'],
-      'color': color$1['icon/neutral/bolder'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral/bolder'],
       '&:hover:not(:disabled)': {
-        color: color$1['icon/accent/gray']
+        color: theme.colors['icon/accent/gray']
       },
       '&:active:not(:disabled)': {
-        color: color$1['icon/accent/gray']
+        color: theme.colors['icon/accent/gray']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled/subtlest'],
-        color: color$1['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     'plain': {
-      'backgroundColor': color$1['bg/neutral/subtler'],
-      'color': color$1['icon/neutral/bold'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral/bold'],
       '&:hover:not(:disabled)': {
-        color: color$1['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       '&:active:not(:disabled)': {
-        color: color$1['icon/neutral/bolder']
+        color: theme.colors['icon/neutral/bolder']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled/subtlest'],
-        color: color$1['icon/disabled/subtler']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
       } : {})
     },
     'plain-subtle': {
-      'backgroundColor': color$1['bg/neutral/subtler'],
-      'color': color$1['icon/neutral'],
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'color': theme.colors['icon/neutral'],
       '&:hover:not(:disabled)': {
-        color: color$1['icon/neutral/bold']
+        color: theme.colors['icon/neutral/bold']
       },
       '&:active:not(:disabled)': {
-        color: color$1['icon/neutral/bold']
+        color: theme.colors['icon/neutral/bold']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled/subtlest'],
-        color: color$1['icon/disabled/subtler']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
       } : {})
     },
     'danger': {
-      'backgroundColor': color$1['bg/danger/bold'],
-      'color': color$1['icon/inverse'],
+      'backgroundColor': theme.colors['bg/danger/bold'],
+      'color': theme.colors['icon/inverse'],
       '&:hover:not(:disabled)': {
-        backgroundColor: color$1['bg/danger/bold/hovered']
+        backgroundColor: theme.colors['bg/danger/bold/hovered']
       },
       '&:active:not(:disabled)': {
-        backgroundColor: color$1['bg/danger/bold/pressed']
+        backgroundColor: theme.colors['bg/danger/bold/pressed']
       },
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled'],
-        color: color$1['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     }
   }
@@ -19219,15 +18614,19 @@ const Blanket = styled__default.default.span`
     display: block;
     cursor: default;
     content: '';
-    background: ${color$1.dim};
+    background: ${({
+  theme
+}) => theme.colors.dim};
   }
 `;
-const BaseDialog = styled__default.default.div(() => ({
+const BaseDialog = styled__default.default.div(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
-  boxShadow: elevation['shadow/overlay'],
-  backgroundColor: elevation['surface/overlay'],
+  boxShadow: theme.shadows['shadow/overlay'],
+  backgroundColor: theme.colors['surface/overlay'],
   outline: 'none',
   overflow: 'hidden',
   margin: 'auto'
@@ -21220,6 +20619,7 @@ const OverlayPopper = ({
   onOpen,
   onClose
 }) => {
+  const theme = styled.useTheme();
   const {
     refs,
     elements,
@@ -21228,7 +20628,7 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift()],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({
@@ -21359,6 +20759,7 @@ const TextInput = ({
   trailingAction,
   ...props
 }, ref) => {
+  const theme = styled.useTheme();
   const inputRef = useProvidedOrCreatedRef(ref);
   const focusInput = () => {
     inputRef.current?.focus();
@@ -21375,12 +20776,12 @@ const TextInput = ({
         'flexShrink': 0,
         'fontSize': 'xxs',
         'fontWeight': 'medium',
-        'color': color$1['text/neutral'],
+        'color': theme.colors['text/neutral'],
         '& > svg': {
           display: 'block',
           width: 16,
           height: 16,
-          color: color$1['icon/neutral/bold']
+          color: theme.colors['icon/neutral/bold']
         }
       },
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
@@ -21400,12 +20801,12 @@ const TextInput = ({
         'flexShrink': 0,
         'fontSize': 'xxs',
         'fontWeight': 'medium',
-        'color': color$1['text/neutral'],
+        'color': theme.colors['text/neutral'],
         '& > svg': {
           display: 'block',
           width: 16,
           height: 16,
-          color: color$1['icon/neutral/bold']
+          color: theme.colors['icon/neutral/bold']
         }
       },
       children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/React.cloneElement(trailingAction, {
@@ -23437,17 +22838,18 @@ const IconToggleButton = ({
   });
 };
 const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
-  $disabled
+  $disabled,
+  theme
 }) => ({
   'position': 'relative',
-  'borderRadius': radii.full,
+  'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
   '& svg': {
     display: 'block'
   },
   'cursor': $disabled ? 'not-allowed' : 'pointer',
   '&:focus-visible': {
-    outlineColor: color$1['border/focused'],
+    outlineColor: theme.colors['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
     outlineOffset: 2
@@ -23479,33 +22881,34 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   }
 }), ({
   selected,
-  $disabled
+  $disabled,
+  theme
 }) => variant({
   prop: 'variant',
   variants: {
     primary: {
       ...(selected ? {
-        backgroundColor: color$1['bg/selected/violet'],
-        color: color$1['icon/inverse']
+        backgroundColor: theme.colors['bg/selected/violet'],
+        color: theme.colors['icon/inverse']
       } : {
-        backgroundColor: color$1['bg/neutral'],
-        color: color$1['icon/accent/gray']
+        backgroundColor: theme.colors['bg/neutral'],
+        color: theme.colors['icon/accent/gray']
       }),
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled'],
-        color: color$1['icon/disabled']
+        backgroundColor: theme.colors['bg/disabled'],
+        color: theme.colors['icon/disabled']
       } : {})
     },
     plain: {
-      backgroundColor: color$1['bg/neutral/subtler'],
+      backgroundColor: theme.colors['bg/neutral/subtler'],
       ...(selected ? {
-        color: color$1['icon/selected/violet']
+        color: theme.colors['icon/selected/violet']
       } : {
-        color: color$1['icon/neutral']
+        color: theme.colors['icon/neutral']
       }),
       ...($disabled ? {
-        backgroundColor: color$1['bg/disabled/subtlest'],
-        color: color$1['icon/disabled/subtler']
+        backgroundColor: theme.colors['bg/disabled/subtlest'],
+        color: theme.colors['icon/disabled/subtler']
       } : {})
     }
   }
@@ -24004,9 +23407,11 @@ const BaseStack = styled__default.default(View)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap'
-}, variant({
+}, ({
+  theme
+}) => variant({
   prop: 'gapX',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
       '& > *': {
         px: forcePixelValue(value / 2)
@@ -24015,9 +23420,11 @@ const BaseStack = styled__default.default(View)({
     };
     return [key, styleValue];
   }))
-}), variant({
+}), ({
+  theme
+}) => variant({
   prop: 'gapY',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
     const styleValue = {
       '& > *': {
         mt: forcePixelValue(value)
@@ -24901,15 +24308,17 @@ const BaseTabItem = styled__default.default(UnstyledButton)(({
     outlineWidth: 2,
     outlineOffset: 2
   }
-}), () => variant({
+}), ({
+  theme
+}) => variant({
   prop: 'size',
   variants: {
     l: {
       'px': 4,
       'py': 2,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 20,
         height: 20
@@ -24918,9 +24327,9 @@ const BaseTabItem = styled__default.default(UnstyledButton)(({
     m: {
       'px': 4,
       'py': 2,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 20,
         height: 20
@@ -24929,9 +24338,9 @@ const BaseTabItem = styled__default.default(UnstyledButton)(({
     s: {
       'px': 3,
       'py': 2,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
       '& svg': {
         width: 16,
         height: 16
@@ -25046,6 +24455,7 @@ const Tab = ({
   gap = 2,
   children
 }) => {
+  const theme = styled.useTheme();
   const rootRef = React.useRef(null);
   const [isLeftButtonVisible, setIsLeftButtonVisible] = React.useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
   const [isRightButtonVisible, setIsRightButtonVisible] = React.useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
@@ -25113,7 +24523,7 @@ const Tab = ({
               bottom: 0,
               width: forcePixelValue(gradientWidth),
               height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
+              background: `linear-gradient(${theme.gradients['overlay/floating/toright']})`,
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
@@ -25124,7 +24534,7 @@ const Tab = ({
               top: 0,
               left: 0,
               bottom: 0,
-              backgroundColor: elevation.surface
+              backgroundColor: theme.colors.surface
             },
             children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
               size: 's',
@@ -25142,7 +24552,7 @@ const Tab = ({
               bottom: 0,
               width: forcePixelValue(gradientWidth),
               height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
+              background: `linear-gradient(${theme.gradients['overlay/floating/toleft']})`,
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
@@ -25153,7 +24563,7 @@ const Tab = ({
               top: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: elevation.surface
+              backgroundColor: theme.colors.surface
             },
             children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
               size: 's',
@@ -25171,6 +24581,740 @@ var index$1 = Object.assign(Tab, {
   Item: TabItem
 });
 
+const device = {
+  deviceDesktop: 1280,
+  deviceTablet: 900,
+  deviceMobile: 640
+};
+
+const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
+const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+
+const gray = {
+  gray50: '#F9FAFB',
+  gray100: '#F3F4F6',
+  gray200: '#E5E7EB',
+  gray300: '#D1D5DB',
+  gray400: '#8D94A0',
+  gray500: '#7A828D',
+  gray600: '#6F7680',
+  gray700: '#575C64',
+  gray800: '#43484E',
+  gray900: '#33373B'
+};
+const violet = {
+  violet50: '#F3EFFD',
+  violet100: '#E8E1FB',
+  violet200: '#D9CDF9',
+  violet300: '#C6B5F6',
+  violet400: '#9C7EEF',
+  violet500: '#835EEB',
+  violet600: '#7756D6',
+  violet700: '#5D43A7',
+  violet800: '#483481',
+  violet900: '#372763'
+};
+const green = {
+  green50: '#E9FAF6',
+  green100: '#BAEFE2',
+  green200: '#98E8D4',
+  green300: '#69DDC0',
+  green400: '#4CD6B4',
+  green500: '#1FCCA1',
+  green600: '#1CBA93',
+  green700: '#169172',
+  green800: '#117059',
+  green900: '#0D5644'
+};
+const yellow = {
+  yellow50: '#FFF9E6',
+  yellow100: '#FFECB2',
+  yellow200: '#FFE28D',
+  yellow300: '#FFD559',
+  yellow400: '#FFCD39',
+  yellow500: '#FFC107',
+  yellow600: '#E8B006',
+  yellow700: '#B58905',
+  yellow800: '#8C6A04',
+  yellow900: '#6B5103'
+};
+const red = {
+  red50: '#FEE9EB',
+  red100: '#FBBCC0',
+  red200: '#F99CA2',
+  red300: '#F66E78',
+  red400: '#F5525D',
+  red500: '#F22735',
+  red600: '#DC2330',
+  red700: '#AC1C26',
+  red800: '#85151D',
+  red900: '#661016'
+};
+const blue = {
+  blue50: '#edf2fd',
+  blue100: '#c6d8fa',
+  blue200: '#abc5f7',
+  blue300: '#84aaf4',
+  blue400: '#6d99f1',
+  blue500: '#4880ee',
+  blue600: '#4274d9',
+  blue700: '#335ba9',
+  blue800: '#284683',
+  blue900: '#1e3664'
+};
+const shade = {
+  transparent: '#FFFFFF00',
+  white: '#FFFFFF',
+  white10A: '#FFFFFF1A',
+  black: '#000000',
+  black60A: '#00000099'
+};
+const fuchsiaPink = {
+  fuchsiaPink50: '#FCF2FD',
+  fuchsiaPink100: '#F5D6F8',
+  fuchsiaPink200: '#F0C2F4',
+  fuchsiaPink300: '#E9A7EF',
+  fuchsiaPink400: '#E595EC',
+  fuchsiaPink500: '#DE7BE7',
+  fuchsiaPink600: '#CA70D2',
+  fuchsiaPink700: '#9E57A4',
+  fuchsiaPink800: '#7A447F',
+  fuchsiaPink900: '#5D3461'
+};
+const skyBlue = {
+  skyBlue50: '#EFF9FD',
+  skyBlue100: '#CFEDF8',
+  skyBlue200: '#B7E4F5',
+  skyBlue300: '#96D8F1',
+  skyBlue400: '#82D1EE',
+  skyBlue500: '#63C5EA',
+  skyBlue600: '#5AB3D5',
+  skyBlue700: '#468CA6',
+  skyBlue800: '#366C81',
+  skyBlue900: '#2A5362'
+};
+const indianRed = {
+  indianRed50: '#632A2A',
+  indianRed100: '#823838',
+  indianRed200: '#A84848',
+  indianRed300: '#D75C5C',
+  indianRed400: '#EC6565',
+  indianRed500: '#F08484',
+  indianRed600: '#F29898',
+  indianRed700: '#F6B8B8',
+  indianRed800: '#F9CFCF',
+  indianRed900: '#FDF0F0'
+};
+const mustardYellow = {
+  mustardYellow50: '#675025',
+  mustardYellow100: '#876931',
+  mustardYellow200: '#AE883F',
+  mustardYellow300: '#DFAE51',
+  mustardYellow400: '#F5BF59',
+  mustardYellow500: '#F7CC7A',
+  mustardYellow600: '#F8D490',
+  mustardYellow700: '#FAE2B3',
+  mustardYellow800: '#FCEBCC',
+  mustardYellow900: '#FEF9EE'
+};
+const palette = {
+  ...gray,
+  ...violet,
+  ...green,
+  ...yellow,
+  ...red,
+  ...blue,
+  ...shade,
+  ...fuchsiaPink,
+  ...skyBlue,
+  ...indianRed,
+  ...mustardYellow
+};
+
+const textColor = {
+  'text/primary': palette.violet500,
+  'text/accent/blue': palette.blue500,
+  'text/accent/green': palette.green500,
+  'text/accent/yellow': palette.yellow500,
+  'text/accent/red': palette.red500,
+  'text/neutral/subtlest': palette.gray400,
+  'text/neutral/subtler': palette.gray500,
+  'text/neutral/subtle': palette.gray700,
+  'text/neutral': palette.gray900,
+  'text/inverse': palette.white,
+  'text/inverse/subtle': palette.gray200,
+  'text/inverse/subtler': palette.gray300,
+  'text/disabled': palette.gray400,
+  'text/success': palette.green500,
+  'text/warning': palette.yellow500,
+  'text/danger': palette.red500,
+  'text/selected': palette.gray900
+};
+const bgColor = {
+  'bg/secondary': palette.violet50,
+  'bg/secondary/hovered': palette.violet200,
+  'bg/secondary/pressed': palette.violet200,
+  'bg/primary': palette.violet500,
+  'bg/primary/hovered': palette.violet700,
+  'bg/primary/pressed': palette.violet700,
+  'bg/neutral/subtlest': palette.transparent,
+  'bg/neutral/subtlest/hovered': palette.gray50,
+  'bg/neutral/subtlest/pressed': palette.gray50,
+  'bg/neutral/subtler': palette.transparent,
+  'bg/neutral/subtler/hovered': palette.gray100,
+  'bg/neutral/subtler/pressed': palette.gray100,
+  'bg/neutral/subtle': palette.gray50,
+  'bg/neutral/subtle/hovered': palette.gray200,
+  'bg/neutral/subtle/pressed': palette.gray200,
+  'bg/neutral': palette.gray100,
+  'bg/neutral/hovered': palette.gray300,
+  'bg/neutral/pressed': palette.gray300,
+  'bg/neutral/bold': palette.gray700,
+  'bg/neutral/bold/hovered': palette.gray900,
+  'bg/neutral/bold/pressed': palette.gray900,
+  'bg/neutral/bolder': palette.gray900,
+  'bg/neutral/bolder/hovered': palette.black,
+  'bg/neutral/bolder/pressed': palette.black,
+  'bg/disabled': palette.gray100,
+  'bg/disabled/subtlest': palette.transparent,
+  'bg/input': palette.white,
+  'bg/accent/blue/subtlest': palette.blue50,
+  'bg/accent/green/subtlest': palette.green50,
+  'bg/accent/yellow/subtlest': palette.yellow50,
+  'bg/accent/red/subtlest': palette.red50,
+  'bg/accent/red/subtle': palette.red400,
+  'bg/accent/red': palette.red500,
+  'bg/accent/gray/subtlest': palette.gray200,
+  'bg/selected/violet': palette.violet500,
+  'bg/selected': palette.gray900,
+  'bg/selected/subtle': palette.gray100,
+  'bg/inverse': palette.black,
+  'bg/inverse/subtlest': palette.white10A,
+  'bg/success': palette.green50,
+  'bg/success/bold': palette.green500,
+  'bg/warning': palette.yellow50,
+  'bg/warning/bold': palette.yellow500,
+  'bg/danger': palette.red50,
+  'bg/danger/bold': palette.red400,
+  'bg/danger/bold/hovered': palette.red600,
+  'bg/danger/bold/pressed': palette.red600
+};
+const borderColor = {
+  'border/neutral/subtle': palette.gray100,
+  'border/neutral': palette.gray200,
+  'border/neutral/bolder': palette.gray300,
+  'border/input': palette.gray200,
+  'border/inverse': palette.white10A,
+  'border/selected': palette.gray900,
+  'border/disabled': palette.gray100,
+  'border/primary': palette.violet500,
+  'border/hovered': palette.blue300,
+  'border/focused': palette.blue500,
+  'border/danger': palette.red500,
+  'border/success': palette.green500
+};
+const iconColor = {
+  'icon/neutral': palette.gray300,
+  'icon/neutral/bold': palette.gray400,
+  'icon/neutral/bolder': palette.gray700,
+  'icon/accent/gray': palette.gray900,
+  'icon/accent/blue': palette.blue500,
+  'icon/accent/blue/bold': palette.blue700,
+  'icon/accent/green': palette.green500,
+  'icon/accent/yellow': palette.yellow500,
+  'icon/accent/red': palette.red500,
+  'icon/inverse': palette.white,
+  'icon/disabled': palette.gray300,
+  'icon/disabled/subtler': palette.gray200,
+  'icon/selected/violet': palette.violet500,
+  'icon/selected': palette.gray900,
+  'icon/primary/subtle': palette.violet300,
+  'icon/primary': palette.violet500,
+  'icon/primary/bold': palette.violet700,
+  'icon/success': palette.green500,
+  'icon/warning': palette.yellow500,
+  'icon/danger': palette.red500
+};
+const linkColor = {
+  'link': palette.blue500,
+  'link/hovered': palette.blue700,
+  'link/pressed': palette.blue700,
+  'link/neutral': palette.gray500,
+  'link/neutral/hovered': palette.gray700,
+  'link/neutral/pressed': palette.gray700,
+  'link/neutral/bold': palette.gray700,
+  'link/neutral/bold/hovered': palette.gray900,
+  'link/neutral/bold/pressed': palette.gray900,
+  'link/disabled': palette.gray700
+};
+const dimColor = {
+  dim: palette.black60A
+};
+const scaleColor = {
+  'scale/violet/0': palette.violet50,
+  'scale/violet/1': palette.violet100,
+  'scale/violet/2': palette.violet200,
+  'scale/violet/3': palette.violet300,
+  'scale/violet/4': palette.violet400,
+  'scale/violet/5': palette.violet500,
+  'scale/violet/6': palette.violet600,
+  'scale/violet/7': palette.violet700,
+  'scale/violet/8': palette.violet800,
+  'scale/violet/9': palette.violet900,
+  'scale/gray/0': palette.gray50,
+  'scale/gray/1': palette.gray100,
+  'scale/gray/2': palette.gray200,
+  'scale/gray/3': palette.gray300,
+  'scale/gray/4': palette.gray400,
+  'scale/gray/5': palette.gray500,
+  'scale/gray/6': palette.gray600,
+  'scale/gray/7': palette.gray700,
+  'scale/gray/8': palette.gray800,
+  'scale/gray/9': palette.gray900,
+  'scale/blue/0': palette.blue50,
+  'scale/blue/1': palette.blue100,
+  'scale/blue/2': palette.blue200,
+  'scale/blue/3': palette.blue300,
+  'scale/blue/4': palette.blue400,
+  'scale/blue/5': palette.blue500,
+  'scale/blue/6': palette.blue600,
+  'scale/blue/7': palette.blue700,
+  'scale/blue/8': palette.blue800,
+  'scale/blue/9': palette.blue900,
+  'scale/green/0': palette.green50,
+  'scale/green/1': palette.green100,
+  'scale/green/2': palette.green200,
+  'scale/green/3': palette.green300,
+  'scale/green/4': palette.green400,
+  'scale/green/5': palette.green500,
+  'scale/green/6': palette.green600,
+  'scale/green/7': palette.green700,
+  'scale/green/8': palette.green800,
+  'scale/green/9': palette.green900,
+  'scale/pink/0': palette.fuchsiaPink50,
+  'scale/pink/1': palette.fuchsiaPink100,
+  'scale/pink/2': palette.fuchsiaPink200,
+  'scale/pink/3': palette.fuchsiaPink300,
+  'scale/pink/4': palette.fuchsiaPink400,
+  'scale/pink/5': palette.fuchsiaPink500,
+  'scale/pink/6': palette.fuchsiaPink600,
+  'scale/pink/7': palette.fuchsiaPink700,
+  'scale/pink/8': palette.fuchsiaPink800,
+  'scale/pink/9': palette.fuchsiaPink900,
+  'scale/skyblue/0': palette.skyBlue50,
+  'scale/skyblue/1': palette.skyBlue100,
+  'scale/skyblue/2': palette.skyBlue200,
+  'scale/skyblue/3': palette.skyBlue300,
+  'scale/skyblue/4': palette.skyBlue400,
+  'scale/skyblue/5': palette.skyBlue500,
+  'scale/skyblue/6': palette.skyBlue600,
+  'scale/skyblue/7': palette.skyBlue700,
+  'scale/skyblue/8': palette.skyBlue800,
+  'scale/skyblue/9': palette.skyBlue900,
+  'scale/red/0': palette.indianRed50,
+  'scale/red/1': palette.indianRed100,
+  'scale/red/2': palette.indianRed200,
+  'scale/red/3': palette.indianRed300,
+  'scale/red/4': palette.indianRed400,
+  'scale/red/5': palette.indianRed500,
+  'scale/red/6': palette.indianRed600,
+  'scale/red/7': palette.indianRed700,
+  'scale/red/8': palette.indianRed800,
+  'scale/red/9': palette.indianRed900,
+  'scale/yellow/0': palette.mustardYellow50,
+  'scale/yellow/1': palette.mustardYellow100,
+  'scale/yellow/2': palette.mustardYellow200,
+  'scale/yellow/3': palette.mustardYellow300,
+  'scale/yellow/4': palette.mustardYellow400,
+  'scale/yellow/5': palette.mustardYellow500,
+  'scale/yellow/6': palette.mustardYellow600,
+  'scale/yellow/7': palette.mustardYellow700,
+  'scale/yellow/8': palette.mustardYellow800,
+  'scale/yellow/9': palette.mustardYellow900
+};
+const color = {
+  ...textColor,
+  ...bgColor,
+  ...borderColor,
+  ...iconColor,
+  ...linkColor,
+  ...dimColor,
+  ...scaleColor
+};
+
+const shadow = {
+  shadowMedium: '0px 0px 1px 0px rgba(0, 0, 0, 0.06), 0px 8px 24px 0px rgba(0, 0, 0, 0.12)'
+};
+
+const surfaceElevation = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
+const shadowElevation = {
+  'shadow/overlay': shadow.shadowMedium
+};
+
+const colorStopList = {
+  colorStopListVioletPink: '#8E6CF0, #CF75F3',
+  colorStopListBlackGray: '#0F0E0F, #595959',
+  colorStopListWhite: '#FFFFFF, #FFFFFF00',
+  colorStopListBlack: '#000000, #00000000'
+};
+
+const direction = {
+  directionToRight: 'to right',
+  directionToLeft: 'to left',
+  directionToRightBottom: 'to right bottom',
+  directionToTop: 'to top'
+};
+
+const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
+const textGradient = {
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const bgGradient = {
+  'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
+};
+const borderGradient = {
+  'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const overlayGradient = {
+  'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
+  'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+};
+const gradient = {
+  ...textGradient,
+  ...bgGradient,
+  ...borderGradient,
+  ...overlayGradient
+};
+
+const rounding = {
+  rounding0: 0,
+  rounding4: 4,
+  rounding8: 8,
+  rounding12: 12,
+  rounding16: 16,
+  rounding20: 20,
+  rounding24: 24,
+  rounding32: 32,
+  rounding9999: 9999
+};
+
+const radii = {
+  none: rounding.rounding0,
+  xxs: rounding.rounding4,
+  xs: rounding.rounding8,
+  s: rounding.rounding12,
+  m: rounding.rounding16,
+  l: rounding.rounding20,
+  xl: rounding.rounding24,
+  xxl: rounding.rounding32,
+  full: rounding.rounding9999
+};
+
+const unit = 4;
+const spacing = {
+  spacing0: 0 * unit,
+  // 0
+  spacing1: 1,
+  // 1
+  spacing2: 0.5 * unit,
+  // 2
+  spacing4: 1 * unit,
+  // 4
+  spacing6: 1.5 * unit,
+  // 6
+  spacing8: 2 * unit,
+  // 8
+  spacing12: 3 * unit,
+  // 12
+  spacing16: 4 * unit,
+  // 16
+  spacing20: 5 * unit,
+  // 20
+  spacing24: 6 * unit,
+  // 24
+  spacing28: 7 * unit,
+  // 28
+  spacing32: 8 * unit,
+  // 32
+  spacing40: 10 * unit,
+  // 40
+  spacing48: 12 * unit,
+  // 48
+  spacing56: 14 * unit,
+  // 56
+  spacing64: 16 * unit,
+  // 64
+  spacing72: 18 * unit,
+  // 72
+  spacing80: 20 * unit,
+  // 80
+  spacing96: 24 * unit,
+  // 96
+  spacing112: 28 * unit,
+  // 112
+  spacing120: 30 * unit,
+  // 120
+  spacing128: 32 * unit,
+  // 128
+  spacing160: 40 * unit,
+  // 160
+  spacing192: 48 * unit,
+  // 192
+  spacing200: 50 * unit,
+  // 200
+  spacing320: 80 * unit // 320
+};
+
+const space = {
+  '-80': -spacing.spacing320,
+  '-50': -spacing.spacing200,
+  '-48': -spacing.spacing192,
+  '-40': -spacing.spacing160,
+  '-32': -spacing.spacing128,
+  '-30': -spacing.spacing120,
+  '-28': -spacing.spacing112,
+  '-24': -spacing.spacing96,
+  '-20': -spacing.spacing80,
+  '-18': -spacing.spacing72,
+  '-16': -spacing.spacing64,
+  '-14': -spacing.spacing56,
+  '-12': -spacing.spacing48,
+  '-10': -spacing.spacing40,
+  '-8': -spacing.spacing32,
+  '-7': -spacing.spacing28,
+  '-6': -spacing.spacing24,
+  '-5': -spacing.spacing20,
+  '-4': -spacing.spacing16,
+  '-3': -spacing.spacing12,
+  '-2': -spacing.spacing8,
+  '-1': -spacing.spacing4,
+  '-0.5': -spacing.spacing2,
+  '-0.25': -spacing.spacing1,
+  0: spacing.spacing0,
+  0.25: spacing.spacing1,
+  0.5: spacing.spacing2,
+  1: spacing.spacing4,
+  2: spacing.spacing8,
+  3: spacing.spacing12,
+  4: spacing.spacing16,
+  5: spacing.spacing20,
+  6: spacing.spacing24,
+  7: spacing.spacing28,
+  8: spacing.spacing32,
+  10: spacing.spacing40,
+  12: spacing.spacing48,
+  14: spacing.spacing56,
+  16: spacing.spacing64,
+  18: spacing.spacing72,
+  20: spacing.spacing80,
+  24: spacing.spacing96,
+  28: spacing.spacing112,
+  30: spacing.spacing120,
+  32: spacing.spacing128,
+  40: spacing.spacing160,
+  48: spacing.spacing192,
+  50: spacing.spacing200,
+  80: spacing.spacing320
+};
+
+const fontSize = {
+  fontSize50: 10,
+  fontSize100: 12,
+  fontSize200: 14,
+  fontSize300: 16,
+  fontSize400: 18,
+  fontSize500: 20,
+  fontSize600: 22,
+  fontSize700: 24,
+  fontSize800: 28,
+  fontSize900: 32,
+  fontSize1000: 40,
+  fontSize1100: 48,
+  fontSize1200: 64,
+  fontSize1300: 100
+};
+
+const fontSizes = {
+  xxs: fontSize.fontSize100,
+  xs: fontSize.fontSize200,
+  s: fontSize.fontSize300,
+  m: fontSize.fontSize500,
+  l: fontSize.fontSize700,
+  xl: fontSize.fontSize800,
+  xxl: fontSize.fontSize900,
+  display4: fontSize.fontSize1000,
+  display3: fontSize.fontSize1100,
+  display2: fontSize.fontSize1200,
+  display1: fontSize.fontSize1300
+};
+
+const fontWeight = {
+  fontWeight100: 100,
+  fontWeight200: 200,
+  fontWeight300: 300,
+  fontWeight400: 400,
+  fontWeight500: 500,
+  fontWeight600: 600,
+  fontWeight700: 700,
+  fontWeight800: 800,
+  fontWeight900: 900
+};
+
+const fontWeights = {
+  regular: fontWeight.fontWeight400,
+  medium: fontWeight.fontWeight500,
+  bold: fontWeight.fontWeight700
+};
+
+const lineHeight = {
+  lineHeight1: 1.4,
+  lineHeight2: 1.5
+};
+
+const lineHeights = {
+  1: lineHeight.lineHeight1,
+  2: lineHeight.lineHeight2
+};
+
+({
+  'display1': {
+    fontSize: fontSizes.display1,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display2': {
+    fontSize: fontSizes.display2,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display3': {
+    fontSize: fontSizes.display3,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display4': {
+    fontSize: fontSizes.display4,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/regular': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxl': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/bold': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xl/regular': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xl': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xl/bold': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'l/regular': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'l': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'l/bold': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'm/regular': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'm': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'm/bold': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  's/regular': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  's': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  's/bold': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xs/regular': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xs': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xs/bold': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/regular': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxs': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/bold': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  }
+});
+
 const theme = {
   breakpoints,
   space,
@@ -25179,7 +25323,7 @@ const theme = {
   lineHeights,
   radii,
   colors: {
-    ...color$1,
+    ...color,
     ...surfaceElevation
   },
   gradients: gradient,