@cambly/syntax-core 10.31.0 → 10.32.0

package/dist/__chunks/{MUYNXIZK.cjs → 5VVFGPW6.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _HWQUS53Mcjs = require('./HWQUS53M.cjs');
+var _LBA34HLFcjs = require('./LBA34HLF.cjs');
 
 
-var _WWRSRFDEcjs = require('./WWRSRFDE.cjs');
+var _BYVURUTUcjs = require('./BYVURUTU.cjs');
 
 
-var _T5EA5RPQcjs = require('./T5EA5RPQ.cjs');
+var _M3PAAPMIcjs = require('./M3PAAPMI.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -17,7 +17,7 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefau
 var _react = require('react');
 
 // css-module:./IconButton.module.css#css-module
-var IconButton_module_default = { "iconButton": "_iconButton_4jqok_1", "iconButtonNoBorder": "_iconButtonNoBorder_4jqok_8", "sm": "_sm_4jqok_49", "md": "_md_4jqok_54", "lg": "_lg_4jqok_59", "smIcon": "_smIcon_4jqok_64", "mdIcon": "_mdIcon_4jqok_71", "lgIcon": "_lgIcon_4jqok_78" };
+var IconButton_module_default = { "iconButton": "_iconButton_1h8zl_1", "sm": "_sm_1h8zl_45", "md": "_md_1h8zl_50", "lg": "_lg_1h8zl_55", "smIcon": "_smIcon_1h8zl_60", "mdIcon": "_mdIcon_1h8zl_67", "lgIcon": "_lgIcon_1h8zl_74" };
 
 // src/IconButton/IconButton.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -39,8 +39,8 @@ var IconButton = _react.forwardRef.call(void 0,
     onClick
   }, ref) => {
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-    const foregroundColorClass = _WWRSRFDEcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
-    const backgroundColorClass = _T5EA5RPQcjs.backgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const foregroundColorClass = _LBA34HLFcjs.foregroundColor.call(void 0, color, on);
+    const backgroundColorClass = _M3PAAPMIcjs.backgroundColor.call(void 0, color, on);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
@@ -54,8 +54,8 @@ var IconButton = _react.forwardRef.call(void 0,
           IconButton_module_default.iconButton,
           foregroundColorClass,
           backgroundColorClass,
-          IconButton_module_default[size],
-          IconButton_module_default.iconButtonNoBorder
+          _BYVURUTUcjs.border.call(void 0, color, on),
+          IconButton_module_default[size]
         ),
         ref,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconSize[size] })
@@ -69,4 +69,4 @@ var IconButton_default = IconButton;
 
 
 exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=MUYNXIZK.cjs.map
+//# sourceMappingURL=5VVFGPW6.cjs.map

package/dist/__chunks/5VVFGPW6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAgB,kBAAkB;;;ACFkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADmH9R;AA1GR,IAAM,WAAW;AAAA,EACf,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAkEA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\n\nconst iconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      on = \"lightBackground\",\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          styles[size],\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_1h8zl_1\",\"sm\":\"_sm_1h8zl_45\",\"md\":\"_md_1h8zl_50\",\"lg\":\"_lg_1h8zl_55\",\"smIcon\":\"_smIcon_1h8zl_60\",\"mdIcon\":\"_mdIcon_1h8zl_67\",\"lgIcon\":\"_lgIcon_1h8zl_74\"}"]}

package/dist/__chunks/6CZHUML6.js

@@ -0,0 +1,37 @@
+"use client"
+import {
+  colors_module_default
+} from "./PUTZ53EC.js";
+
+// src/colors/border.ts
+import classNames from "classnames";
+function border(color, on) {
+  if (on === "lightBackground") {
+    switch (color) {
+      case "secondary":
+        return classNames(colors_module_default.noBorder, colors_module_default.blackBorderColor);
+      case "success-secondary":
+        return classNames(colors_module_default.noBorder, colors_module_default.success770BorderColor);
+      case "destructive-secondary":
+        return classNames(colors_module_default.noBorder, colors_module_default.destructive770BorderColor);
+      default:
+        return colors_module_default.noBorder;
+    }
+  } else {
+    switch (color) {
+      case "secondary":
+        return classNames(colors_module_default.noBorder, colors_module_default.gray370BorderColor);
+      case "success-secondary":
+        return classNames(colors_module_default.noBorder, colors_module_default.success370BorderColor);
+      case "destructive-secondary":
+        return classNames(colors_module_default.noBorder, colors_module_default.destructive370BorderColor);
+      default:
+        return colors_module_default.noBorder;
+    }
+  }
+}
+
+export {
+  border
+};
+//# sourceMappingURL=6CZHUML6.js.map

package/dist/__chunks/6CZHUML6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/border.ts"],"sourcesContent":["import classNames from \"classnames\";\nimport { type CambioColor } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function border(\n  color: (typeof CambioColor)[number],\n  on: \"lightBackground\" | \"darkBackground\",\n): string | null {\n  if (on === \"lightBackground\") {\n    switch (color) {\n      case \"secondary\":\n        return classNames(styles.noBorder, styles.blackBorderColor);\n      case \"success-secondary\":\n        return classNames(styles.noBorder, styles.success770BorderColor);\n      case \"destructive-secondary\":\n        return classNames(styles.noBorder, styles.destructive770BorderColor);\n      default:\n        return styles.noBorder;\n    }\n  } else {\n    switch (color) {\n      case \"secondary\":\n        return classNames(styles.noBorder, styles.gray370BorderColor);\n      case \"success-secondary\":\n        return classNames(styles.noBorder, styles.success370BorderColor);\n      case \"destructive-secondary\":\n        return classNames(styles.noBorder, styles.destructive370BorderColor);\n      default:\n        return styles.noBorder;\n    }\n  }\n}\n"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AAIhB,SAAS,OACd,OACA,IACe;AACf,MAAI,OAAO,mBAAmB;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,gBAAgB;AAAA,MAC5D,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,qBAAqB;AAAA,MACjE,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,yBAAyB;AAAA,MACrE;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF,OAAO;AACL,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,kBAAkB;AAAA,MAC9D,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,qBAAqB;AAAA,MACjE,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,yBAAyB;AAAA,MACrE;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF;AACF;","names":[]}

package/dist/__chunks/{57KSLOGS.js → B5BNKWTJ.js}

@@ -8,4 +8,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=57KSLOGS.js.map
+//# sourceMappingURL=B5BNKWTJ.js.map

package/dist/__chunks/{57KSLOGS.js.map → B5BNKWTJ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 29 Mar 2024 16:50:12 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 03 Apr 2024 06:30:26 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{M7TRKS34.cjs → BEKUOSKU.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
 
 // src/Card/Card.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -12,7 +12,7 @@ function Card({
   "data-testid": dataTestId
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _OT2MUGKKcjs.Box_default,
+    _RJ3ZYLJScjs.Box_default,
     {
       rounding: "md",
       padding: size === "compact" ? 2 : 4,
@@ -27,4 +27,4 @@ function Card({
 
 
 exports.Card = Card;
-//# sourceMappingURL=M7TRKS34.cjs.map
+//# sourceMappingURL=BEKUOSKU.cjs.map

package/dist/__chunks/{2IHACTOY.cjs → BNBE2XVM.cjs}

@@ -13,7 +13,7 @@ var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 var _45TMKSJQcjs = require('./45TMKSJQ.cjs');
 
 
-var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
+var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
 
 // src/Dialog/Dialog.tsx
 
@@ -58,7 +58,7 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
         _IL22HCBFcjs.Box_module_default.gap4,
         _IL22HCBFcjs.Box_module_default.relative,
         _IL22HCBFcjs.Box_module_default.overflowauto,
-        _QAS3KERZcjs.colors_module_default.whiteBackgroundColor,
+        _QT6IRCGWcjs.colors_module_default.whiteBackgroundColor,
         _PLUVW6AMcjs.padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
         _PLUVW6AMcjs.padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
         _45TMKSJQcjs.rounding_module_default.roundingmd,
@@ -77,4 +77,4 @@ var Dialog_default = Dialog;
 
 
 exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
-//# sourceMappingURL=2IHACTOY.cjs.map
+//# sourceMappingURL=BNBE2XVM.cjs.map

package/dist/__chunks/BYVURUTU.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _KZT53ITQcjs = require('./KZT53ITQ.cjs');
+
+// src/colors/border.ts
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+function border(color, on) {
+  if (on === "lightBackground") {
+    switch (color) {
+      case "secondary":
+        return _classnames2.default.call(void 0, _KZT53ITQcjs.colors_module_default.noBorder, _KZT53ITQcjs.colors_module_default.blackBorderColor);
+      case "success-secondary":
+        return _classnames2.default.call(void 0, _KZT53ITQcjs.colors_module_default.noBorder, _KZT53ITQcjs.colors_module_default.success770BorderColor);
+      case "destructive-secondary":
+        return _classnames2.default.call(void 0, _KZT53ITQcjs.colors_module_default.noBorder, _KZT53ITQcjs.colors_module_default.destructive770BorderColor);
+      default:
+        return _KZT53ITQcjs.colors_module_default.noBorder;
+    }
+  } else {
+    switch (color) {
+      case "secondary":
+        return _classnames2.default.call(void 0, _KZT53ITQcjs.colors_module_default.noBorder, _KZT53ITQcjs.colors_module_default.gray370BorderColor);
+      case "success-secondary":
+        return _classnames2.default.call(void 0, _KZT53ITQcjs.colors_module_default.noBorder, _KZT53ITQcjs.colors_module_default.success370BorderColor);
+      case "destructive-secondary":
+        return _classnames2.default.call(void 0, _KZT53ITQcjs.colors_module_default.noBorder, _KZT53ITQcjs.colors_module_default.destructive370BorderColor);
+      default:
+        return _KZT53ITQcjs.colors_module_default.noBorder;
+    }
+  }
+}
+
+
+
+exports.border = border;
+//# sourceMappingURL=BYVURUTU.cjs.map

package/dist/__chunks/BYVURUTU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/border.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AAIhB,SAAS,OACd,OACA,IACe;AACf,MAAI,OAAO,mBAAmB;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,gBAAgB;AAAA,MAC5D,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,qBAAqB;AAAA,MACjE,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,yBAAyB;AAAA,MACrE;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF,OAAO;AACL,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,kBAAkB;AAAA,MAC9D,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,qBAAqB;AAAA,MACjE,KAAK;AACH,eAAO,WAAW,sBAAO,UAAU,sBAAO,yBAAyB;AAAA,MACrE;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF;AACF","sourcesContent":["import classNames from \"classnames\";\nimport { type CambioColor } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function border(\n  color: (typeof CambioColor)[number],\n  on: \"lightBackground\" | \"darkBackground\",\n): string | null {\n  if (on === \"lightBackground\") {\n    switch (color) {\n      case \"secondary\":\n        return classNames(styles.noBorder, styles.blackBorderColor);\n      case \"success-secondary\":\n        return classNames(styles.noBorder, styles.success770BorderColor);\n      case \"destructive-secondary\":\n        return classNames(styles.noBorder, styles.destructive770BorderColor);\n      default:\n        return styles.noBorder;\n    }\n  } else {\n    switch (color) {\n      case \"secondary\":\n        return classNames(styles.noBorder, styles.gray370BorderColor);\n      case \"success-secondary\":\n        return classNames(styles.noBorder, styles.success370BorderColor);\n      case \"destructive-secondary\":\n        return classNames(styles.noBorder, styles.destructive370BorderColor);\n      default:\n        return styles.noBorder;\n    }\n  }\n}\n"]}

package/dist/__chunks/{6XM3VOHU.js → CPQLZKCY.js}

@@ -3,35 +3,35 @@ import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./T6BFW6YO.js";
+} from "./LQ6UZ6GG.js";
 import {
   RichSelectChip_default
-} from "./H2AWA6IQ.js";
+} from "./MOLOILVI.js";
 import {
   Popover_default
-} from "./4SABJA3K.js";
+} from "./JJMHCJ37.js";
 import {
   DialogContext
-} from "./UIPAXBI7.js";
+} from "./YBOF6XGJ.js";
 import {
   TapArea_default
-} from "./C32JYNV7.js";
+} from "./RCEIKIN5.js";
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./57KSLOGS.js";
+} from "./B5BNKWTJ.js";
 import {
   RichSelectSection_default
-} from "./OQE24UY6.js";
+} from "./YF53K6PE.js";
 import {
   RichSelectRadioButton_default
-} from "./UB4WHLZC.js";
+} from "./FRR2K77P.js";
 import {
   Box_default
-} from "./ZPY7QEBH.js";
+} from "./GCE2CI4A.js";
 import {
   Typography_default
-} from "./3GNWH6C7.js";
+} from "./YAM7DAOZ.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -268,4 +268,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=6XM3VOHU.js.map
+//# sourceMappingURL=CPQLZKCY.js.map

package/dist/__chunks/{GR5G6EJO.js → CUJFDOPJ.js}

@@ -7,22 +7,22 @@ import {
 } from "./Z5ZUAP2B.js";
 import {
   iconSize_default
-} from "./YV4ASN4Z.js";
+} from "./JWJK72BH.js";
 import {
-  cambioColor
-} from "./GFKDPMFK.js";
+  foregroundColor
+} from "./423C767D.js";
 import {
-  cambioForegroundColor
-} from "./P6K7GG3H.js";
+  border
+} from "./6CZHUML6.js";
 import {
   backgroundColor
-} from "./MWCEKFF2.js";
+} from "./DEXL5BXD.js";
 import {
   Box_default
-} from "./ZPY7QEBH.js";
+} from "./GCE2CI4A.js";
 import {
   Typography_default
-} from "./3GNWH6C7.js";
+} from "./YAM7DAOZ.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -32,7 +32,7 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "button": "_button_hiifq_1", "buttonGap": "_buttonGap_hiifq_9", "disabledPrimary": "_disabledPrimary_hiifq_50", "fullWidth": "_fullWidth_hiifq_54", "sm": "_sm_hiifq_58", "md": "_md_hiifq_65", "lg": "_lg_hiifq_72", "icon": "_icon_hiifq_79", "smIcon": "_smIcon_hiifq_83", "mdIcon": "_mdIcon_hiifq_90", "lgIcon": "_lgIcon_hiifq_97", "loading": "_loading_hiifq_114", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_hiifq_1", "loadingCircle": "_loadingCircle_hiifq_118" };
+var Button_module_default = { "button": "_button_y92p2_1", "buttonGap": "_buttonGap_y92p2_8", "disabledPrimary": "_disabledPrimary_y92p2_49", "fullWidth": "_fullWidth_y92p2_53", "sm": "_sm_y92p2_57", "md": "_md_y92p2_64", "lg": "_lg_y92p2_71", "icon": "_icon_y92p2_78", "smIcon": "_smIcon_y92p2_82", "mdIcon": "_mdIcon_y92p2_89", "lgIcon": "_lgIcon_y92p2_96", "loading": "_loading_y92p2_113", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_y92p2_1", "loadingCircle": "_loadingCircle_y92p2_117" };
 
 // src/Button/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -55,8 +55,8 @@ var Button = forwardRef(
     type = "button"
   }, ref) => {
     const isHydrated = useIsHydrated();
-    const foregroundColorClass = cambioForegroundColor(cambioColor(color), on);
-    const backgroundColorClass = backgroundColor(cambioColor(color), on);
+    const foregroundColorClass = foregroundColor(color, on);
+    const backgroundColorClass = backgroundColor(color, on);
     const disabledPrimary = color === "primary" && disabled;
     return /* @__PURE__ */ jsxs(
       "button",
@@ -72,6 +72,7 @@ var Button = forwardRef(
           Button_module_default.button,
           foregroundColorClass,
           backgroundColorClass,
+          border(color, on),
           Button_module_default[size],
           {
             [Button_module_default.fullWidth]: fullWidth,
@@ -142,4 +143,4 @@ var Button_default = Button;
 export {
   Button_default
 };
-//# sourceMappingURL=GR5G6EJO.js.map
+//# sourceMappingURL=CUJFDOPJ.js.map

package/dist/__chunks/CUJFDOPJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n  /**\n   * The type you want to set for the primitive `<button/>`\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\n    const disabledPrimary = color === \"primary\" && disabled;\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          styles[size],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]: size === \"lg\" || size === \"md\",\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography size={textVariant[size]}>\n              <span\n                className={classNames(\n                  // Temporary - until we have cambio colors on Typography\n                  foregroundColorClass,\n                  disabledPrimary && styles.disabledPrimary,\n                )}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_y92p2_1\",\"buttonGap\":\"_buttonGap_y92p2_8\",\"disabledPrimary\":\"_disabledPrimary_y92p2_49\",\"fullWidth\":\"_fullWidth_y92p2_53\",\"sm\":\"_sm_y92p2_57\",\"md\":\"_md_y92p2_64\",\"lg\":\"_lg_y92p2_71\",\"icon\":\"_icon_y92p2_78\",\"smIcon\":\"_smIcon_y92p2_82\",\"mdIcon\":\"_mdIcon_y92p2_89\",\"lgIcon\":\"_lgIcon_y92p2_96\",\"loading\":\"_loading_y92p2_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_y92p2_1\",\"loadingCircle\":\"_loadingCircle_y92p2_117\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ADsIpiB,SAqBI,KArBJ;AA5BN,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,kBAAkB,UAAU,aAAa;AAE/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,cAAc,YAAY;AAAA,QACrC;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,UAChD;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAChC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA;AAAA,gBAET;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,OAAO,EAAE,YAAY,IAAI;AAAA,cAExB,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAO;AAAA,kBAClB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;","names":[]}

package/dist/__chunks/{MWCEKFF2.js → DEXL5BXD.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   colors_module_default
-} from "./BXHT3UUW.js";
+} from "./PUTZ53EC.js";
 
 // src/colors/backgroundColor.ts
 function backgroundColor(color, on) {
@@ -10,19 +10,17 @@ function backgroundColor(color, on) {
       case "primary":
         return colors_module_default.cambioBlackBackgroundColor;
       case "secondary":
-        return colors_module_default.cambioGray370BackgroundColor;
+      case "success-secondary":
+      case "destructive-secondary":
+        return colors_module_default.cambioTransparentFullBackgroundColor;
       case "tertiary":
       case "success-tertiary":
       case "destructive-tertiary":
         return colors_module_default.cambioTransparentFullBackgroundColor;
       case "success-primary":
         return colors_module_default.cambioSuccess700BackgroundColor;
-      case "success-secondary":
-        return colors_module_default.cambioSuccess370BackgroundColor;
       case "destructive-primary":
         return colors_module_default.cambioDestructive700BackgroundColor;
-      case "destructive-secondary":
-        return colors_module_default.cambioDestructive370BackgroundColor;
       case "branded":
         return colors_module_default.cambioYellow700BackgroundColor;
       default:
@@ -33,19 +31,17 @@ function backgroundColor(color, on) {
       case "primary":
         return colors_module_default.cambioGray200BackgroundColor;
       case "secondary":
-        return colors_module_default.cambioGray870BackgroundColor;
+      case "success-secondary":
+      case "destructive-secondary":
+        return colors_module_default.cambioTransparentFullBackgroundColor;
       case "tertiary":
       case "success-tertiary":
       case "destructive-tertiary":
         return colors_module_default.cambioTransparentFullBackgroundColor;
       case "success-primary":
         return colors_module_default.cambioSuccess300BackgroundColor;
-      case "success-secondary":
-        return colors_module_default.cambioSuccess770BackgroundColor;
       case "destructive-primary":
         return colors_module_default.cambioDestructive300BackgroundColor;
-      case "destructive-secondary":
-        return colors_module_default.cambioDestructive770BackgroundColor;
       case "branded":
         return colors_module_default.cambioYellow700BackgroundColor;
       default:
@@ -57,4 +53,4 @@ function backgroundColor(color, on) {
 export {
   backgroundColor
 };
-//# sourceMappingURL=MWCEKFF2.js.map
+//# sourceMappingURL=DEXL5BXD.js.map

package/dist/__chunks/DEXL5BXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/backgroundColor.ts"],"sourcesContent":["import { type CambioColor } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function backgroundColor(\n  color: (typeof CambioColor)[number],\n  on: \"lightBackground\" | \"darkBackground\",\n): string {\n  if (on === \"lightBackground\") {\n    switch (color) {\n      case \"primary\":\n        return styles.cambioBlackBackgroundColor;\n      case \"secondary\":\n      case \"success-secondary\":\n      case \"destructive-secondary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"tertiary\":\n      case \"success-tertiary\":\n      case \"destructive-tertiary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"success-primary\":\n        return styles.cambioSuccess700BackgroundColor;\n      case \"destructive-primary\":\n        return styles.cambioDestructive700BackgroundColor;\n      case \"branded\":\n        return styles.cambioYellow700BackgroundColor;\n      default:\n        return styles.cambioBlackBackgroundColor;\n    }\n  } else {\n    switch (color) {\n      case \"primary\":\n        return styles.cambioGray200BackgroundColor;\n      case \"secondary\":\n      case \"success-secondary\":\n      case \"destructive-secondary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"tertiary\":\n      case \"success-tertiary\":\n      case \"destructive-tertiary\":\n        return styles.cambioTransparentFullBackgroundColor;\n      case \"success-primary\":\n        return styles.cambioSuccess300BackgroundColor;\n      case \"destructive-primary\":\n        return styles.cambioDestructive300BackgroundColor;\n      case \"branded\":\n        return styles.cambioYellow700BackgroundColor;\n      default:\n        return styles.cambioWhiteBackgroundColor;\n    }\n  }\n}\n"],"mappings":";;;;;;AAGO,SAAS,gBACd,OACA,IACQ;AACR,MAAI,OAAO,mBAAmB;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF,OAAO;AACL,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB,KAAK;AACH,eAAO,sBAAO;AAAA,MAChB;AACE,eAAO,sBAAO;AAAA,IAClB;AAAA,EACF;AACF;","names":[]}

package/dist/__chunks/{YNVQJ4DG.cjs → DMA6PPUZ.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
+var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
 
 // css-module:./Divider.module.css#css-module
 var Divider_module_default = { "divider": "_divider_1uaon_1", "dividerClassic": "_dividerClassic_1uaon_9" };
@@ -15,7 +15,7 @@ function Divider() {
     {
       className: _classnames2.default.call(void 0, 
         Divider_module_default.divider,
-        _QAS3KERZcjs.colors_module_default.cambioGray370BackgroundColor
+        _QT6IRCGWcjs.colors_module_default.cambioGray370BackgroundColor
       )
     }
   );
@@ -25,4 +25,4 @@ Divider.displayName = "Divider";
 
 
 exports.Divider = Divider;
-//# sourceMappingURL=YNVQJ4DG.cjs.map
+//# sourceMappingURL=DMA6PPUZ.cjs.map

package/dist/__chunks/{N47VDOUP.cjs → DQRU6NZI.cjs}

@@ -8,4 +8,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=N47VDOUP.cjs.map
+//# sourceMappingURL=DQRU6NZI.cjs.map

package/dist/__chunks/{N47VDOUP.cjs.map → DQRU6NZI.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 29 Mar 2024 16:50:12 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 03 Apr 2024 06:30:26 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\n"]}

package/dist/__chunks/{5YIEOGTA.cjs → E32CAKEB.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
 
 // src/Modal/Layer.tsx
 var _reactdom = require('react-dom');
@@ -12,7 +12,7 @@ function Layer({
 }) {
   return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _OT2MUGKKcjs.Box_default,
+      _RJ3ZYLJScjs.Box_default,
       {
         "data-testid": "syntax-layer",
         position: "fixed",
@@ -29,4 +29,4 @@ function Layer({
 
 
 exports.Layer = Layer;
-//# sourceMappingURL=5YIEOGTA.cjs.map
+//# sourceMappingURL=E32CAKEB.cjs.map

package/dist/__chunks/{LPRAK3CL.cjs → EMVONWGI.cjs}

@@ -5,16 +5,16 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _N47VDOUPcjs = require('./N47VDOUP.cjs');
+var _DQRU6NZIcjs = require('./DQRU6NZI.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
 
 
-var _5VHLZADOcjs = require('./5VHLZADO.cjs');
+var _XCSW34UMcjs = require('./XCSW34UM.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -61,7 +61,7 @@ function SelectList({
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5VHLZADOcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCSW34UMcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "select",
@@ -100,15 +100,15 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _N47VDOUPcjs.ColorBaseDestructive700 : _N47VDOUPcjs.ColorBaseGray800,
+                  fill: errorText ? _DQRU6NZIcjs.ColorBaseDestructive700 : _DQRU6NZIcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _5VHLZADOcjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _XCSW34UMcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -124,4 +124,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=LPRAK3CL.cjs.map
+//# sourceMappingURL=EMVONWGI.cjs.map