@cambly/syntax-core 10.19.0 → 10.21.0

package/dist/__chunks/{VICE5H6S.cjs → JWWKDZYV.cjs}

@@ -4,26 +4,26 @@
 var _VBQTLO2Pcjs = require('./VBQTLO2P.cjs');
 
 
-var _6UFO6JEOcjs = require('./6UFO6JEO.cjs');
+var _PDPWTB6Mcjs = require('./PDPWTB6M.cjs');
 
 
-var _UD4IRT6Ucjs = require('./UD4IRT6U.cjs');
+var _MG2NM3WUcjs = require('./MG2NM3WU.cjs');
 
 
-var _3QV4LYGNcjs = require('./3QV4LYGN.cjs');
+var _WJ4USTG5cjs = require('./WJ4USTG5.cjs');
 
 
-var _DTEKITMFcjs = require('./DTEKITMF.cjs');
+var _J3ES6ZT6cjs = require('./J3ES6ZT6.cjs');
 
 
-var _EILCQTJ3cjs = require('./EILCQTJ3.cjs');
+var _QJYYEWMScjs = require('./QJYYEWMS.cjs');
 
 
 
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
+var _4BFY734Ccjs = require('./4BFY734C.cjs');
 
 // src/RichSelect/RichSelectBox.tsx
 
@@ -125,7 +125,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
       });
     }, []);
     const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _SNYEHXDAcjs.Box_default, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _4BFY734Ccjs.Box_default, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _reactariacomponents.ListBox,
         {
@@ -144,7 +144,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
         }
       ),
       !autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _SNYEHXDAcjs.Box_default,
+        _4BFY734Ccjs.Box_default,
         {
           backgroundColor: "white",
           display: "flex",
@@ -159,9 +159,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
             }
           },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UD4IRT6Ucjs.Divider, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4BFY734Ccjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MG2NM3WUcjs.Divider, {}) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _SNYEHXDAcjs.Box_default,
+              _4BFY734Ccjs.Box_default,
               {
                 paddingY: 5,
                 marginTop: -5,
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                 justifyContent: "end",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _VBQTLO2Pcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _6UFO6JEOcjs.Button_default,
+                    _PDPWTB6Mcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _6UFO6JEOcjs.Button_default,
+                    _PDPWTB6Mcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
   }
 );
 var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _DTEKITMFcjs.RichSelectSection_default,
-  Chip: _3QV4LYGNcjs.RichSelectChip_default,
-  RadioButton: _EILCQTJ3cjs.RichSelectRadioButton_default
+  Section: _J3ES6ZT6cjs.RichSelectSection_default,
+  Chip: _WJ4USTG5cjs.RichSelectChip_default,
+  RadioButton: _QJYYEWMScjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=VICE5H6S.cjs.map
+//# sourceMappingURL=JWWKDZYV.cjs.map

package/dist/__chunks/{OG4RH3QZ.cjs → KWT6ABYP.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 _WRTSVDQZcjs = require('./WRTSVDQZ.cjs');
+var _W2JRKN5Ecjs = require('./W2JRKN5E.cjs');
 
 
 
@@ -9,11 +9,11 @@ var _HWQUS53Mcjs = require('./HWQUS53M.cjs');
 
 
 
-var _HCM63U3Jcjs = require('./HCM63U3J.cjs');
+var _UQY2ELTZcjs = require('./UQY2ELTZ.cjs');
 
 
 
-var _QWMAWIWIcjs = require('./QWMAWIWI.cjs');
+var _J43HGNHNcjs = require('./J43HGNHN.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -54,8 +54,8 @@ var IconButton = _react.forwardRef.call(void 0,
   }, ref) => {
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
     const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
-    const foregroundColorClass = themeName === "classic" ? _HCM63U3Jcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _HCM63U3Jcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
-    const backgroundColorClass = themeName === "classic" ? _QWMAWIWIcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _QWMAWIWIcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const foregroundColorClass = themeName === "classic" ? _UQY2ELTZcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _UQY2ELTZcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const backgroundColorClass = themeName === "classic" ? _J43HGNHNcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _J43HGNHNcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
@@ -71,8 +71,8 @@ var IconButton = _react.forwardRef.call(void 0,
           backgroundColorClass,
           themeName === "classic" ? IconButton_module_default[size] : IconButton_module_default[`${size}Cambio`],
           {
-            [_WRTSVDQZcjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
-            [_WRTSVDQZcjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
+            [_W2JRKN5Ecjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
+            [_W2JRKN5Ecjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
             [IconButton_module_default.iconButtonNoBorder]: themeName === "classic" && !["secondary", "destructive-secondary"].includes(color) || themeName === "cambio"
           }
         ),
@@ -93,4 +93,4 @@ var IconButton_default = IconButton;
 
 
 exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=OG4RH3QZ.cjs.map
+//# sourceMappingURL=KWT6ABYP.cjs.map

package/dist/__chunks/{EIYIIY5Y.js → LKAS5FOB.js}

@@ -8,4 +8,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=EIYIIY5Y.js.map
+//# sourceMappingURL=LKAS5FOB.js.map

package/dist/__chunks/{EIYIIY5Y.js.map → LKAS5FOB.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 19 Mar 2024 22:06:56 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\";\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, 20 Mar 2024 20:02:28 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\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{7NE5Y7AO.js → LWZJ2KZP.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   useAvatarGroup
-} from "./R4TBYKLS.js";
+} from "./EEUFQAUZ.js";
 import {
   Box_default
-} from "./KU5UT5RY.js";
+} from "./22OMICOW.js";
 import {
   useTheme
 } from "./ZSHAHV4F.js";
@@ -147,4 +147,4 @@ var Avatar_default = Avatar;
 export {
   Avatar_default
 };
-//# sourceMappingURL=7NE5Y7AO.js.map
+//# sourceMappingURL=LWZJ2KZP.js.map

package/dist/__chunks/{UD4IRT6U.cjs → MG2NM3WU.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 _X2LNODY7cjs = require('./X2LNODY7.cjs');
+var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -17,7 +17,7 @@ function Divider() {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "hr",
     {
-      className: themeName === "classic" ? _classnames2.default.call(void 0, Divider_module_default.divider, Divider_module_default.dividerClassic) : _classnames2.default.call(void 0, Divider_module_default.divider, _X2LNODY7cjs.colors_module_default.cambioGray370BackgroundColor)
+      className: themeName === "classic" ? _classnames2.default.call(void 0, Divider_module_default.divider, Divider_module_default.dividerClassic) : _classnames2.default.call(void 0, Divider_module_default.divider, _QAS3KERZcjs.colors_module_default.cambioGray370BackgroundColor)
     }
   );
 }
@@ -26,4 +26,4 @@ Divider.displayName = "Divider";
 
 
 exports.Divider = Divider;
-//# sourceMappingURL=UD4IRT6U.cjs.map
+//# sourceMappingURL=MG2NM3WU.cjs.map

package/dist/__chunks/{EUUNDEAV.cjs → MNOQHQWW.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
+var _4BFY734Ccjs = require('./4BFY734C.cjs');
 
 
-var _46QLII42cjs = require('./46QLII42.cjs');
+var _TJN7NBWUcjs = require('./TJN7NBWU.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -45,7 +45,7 @@ var TextArea = _react.forwardRef.call(void 0,
     const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
     const inputId = id != null ? id : reactId;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _SNYEHXDAcjs.Box_default,
+      _4BFY734Ccjs.Box_default,
       {
         display: "flex",
         direction: "column",
@@ -58,8 +58,8 @@ var TextArea = _react.forwardRef.call(void 0,
         },
         position: themeName === "cambio" ? "relative" : void 0,
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _46QLII42cjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _46QLII42cjs.Typography_default, { size: themeName === "cambio" ? 100 : 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4BFY734Ccjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TJN7NBWUcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TJN7NBWUcjs.Typography_default, { size: themeName === "cambio" ? 100 : 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               "data-testid": dataTestId,
@@ -83,8 +83,8 @@ var TextArea = _react.forwardRef.call(void 0,
               disabled
             }
           ) }),
-          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _46QLII42cjs.Typography_default,
+          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4BFY734Ccjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _TJN7NBWUcjs.Typography_default,
             {
               size: 100,
               color: errorText ? "destructive-primary" : "gray700",
@@ -101,4 +101,4 @@ var TextArea_default = TextArea;
 
 
 exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=EUUNDEAV.cjs.map
+//# sourceMappingURL=MNOQHQWW.cjs.map

package/dist/__chunks/{O3NMBKLH.cjs → MSXTASXO.cjs}

@@ -5,16 +5,16 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _U5GMVZFOcjs = require('./U5GMVZFO.cjs');
+var _WICC3YQAcjs = require('./WICC3YQA.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
+var _4BFY734Ccjs = require('./4BFY734C.cjs');
 
 
-var _46QLII42cjs = require('./46QLII42.cjs');
+var _TJN7NBWUcjs = require('./TJN7NBWU.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -33,7 +33,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_itxk7_1", "selectContainerCambio": "_selectContainerCambio_itxk7_7", "opacityOverlay": "_opacityOverlay_itxk7_11", "selectWrapper": "_selectWrapper_itxk7_15", "selectBox": "_selectBox_itxk7_20", "selectBoxClassic": "_selectBoxClassic_itxk7_36", "selectBoxCambio": "_selectBoxCambio_itxk7_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_itxk7_50", "unselected": "_unselected_itxk7_55", "selected": "_selected_itxk7_59", "arrowIcon": "_arrowIcon_itxk7_63", "sm": "_sm_itxk7_77", "md": "_md_itxk7_83", "lg": "_lg_itxk7_89", "selectError": "_selectError_itxk7_95", "selectErrorCambio": "_selectErrorCambio_itxk7_101" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1cum9_1", "selectContainerCambio": "_selectContainerCambio_1cum9_7", "opacityOverlay": "_opacityOverlay_1cum9_11", "selectWrapper": "_selectWrapper_1cum9_15", "selectBox": "_selectBox_1cum9_20", "selectBoxClassic": "_selectBoxClassic_1cum9_36", "selectBoxCambio": "_selectBoxCambio_1cum9_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cum9_50", "unselected": "_unselected_1cum9_55", "selected": "_selected_1cum9_59", "arrowIcon": "_arrowIcon_1cum9_63", "sm": "_sm_1cum9_77", "md": "_md_1cum9_83", "lg": "_lg_1cum9_89", "selectError": "_selectError_1cum9_95", "selectErrorCambio": "_selectErrorCambio_1cum9_101" };
 
 // src/SelectList/SelectList.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -71,7 +71,7 @@ function SelectList({
         [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _46QLII42cjs.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, _4BFY734Ccjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TJN7NBWUcjs.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",
@@ -114,15 +114,15 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _U5GMVZFOcjs.ColorBaseDestructive700 : _U5GMVZFOcjs.ColorBaseGray800,
+                  fill: errorText ? _WICC3YQAcjs.ColorBaseDestructive700 : _WICC3YQAcjs.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, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _46QLII42cjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4BFY734Ccjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _TJN7NBWUcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -138,4 +138,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=O3NMBKLH.cjs.map
+//# sourceMappingURL=MSXTASXO.cjs.map

package/dist/__chunks/{O3NMBKLH.cjs.map → MSXTASXO.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n        [styles.selectContainerCambio]: themeName === \"cambio\",\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              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\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_itxk7_1\",\"selectContainerCambio\":\"_selectContainerCambio_itxk7_7\",\"opacityOverlay\":\"_opacityOverlay_itxk7_11\",\"selectWrapper\":\"_selectWrapper_itxk7_15\",\"selectBox\":\"_selectBox_itxk7_20\",\"selectBoxClassic\":\"_selectBoxClassic_itxk7_36\",\"selectBoxCambio\":\"_selectBoxCambio_itxk7_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_itxk7_50\",\"unselected\":\"_unselected_itxk7_55\",\"selected\":\"_selected_itxk7_59\",\"arrowIcon\":\"_arrowIcon_itxk7_63\",\"sm\":\"_sm_itxk7_77\",\"md\":\"_md_itxk7_83\",\"lg\":\"_lg_itxk7_89\",\"selectError\":\"_selectError_itxk7_95\",\"selectErrorCambio\":\"_selectErrorCambio_itxk7_101\"}"]}
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n        [styles.selectContainerCambio]: themeName === \"cambio\",\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              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\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1cum9_1\",\"selectContainerCambio\":\"_selectContainerCambio_1cum9_7\",\"opacityOverlay\":\"_opacityOverlay_1cum9_11\",\"selectWrapper\":\"_selectWrapper_1cum9_15\",\"selectBox\":\"_selectBox_1cum9_20\",\"selectBoxClassic\":\"_selectBoxClassic_1cum9_36\",\"selectBoxCambio\":\"_selectBoxCambio_1cum9_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1cum9_50\",\"unselected\":\"_unselected_1cum9_55\",\"selected\":\"_selected_1cum9_59\",\"arrowIcon\":\"_arrowIcon_1cum9_63\",\"sm\":\"_sm_1cum9_77\",\"md\":\"_md_1cum9_83\",\"lg\":\"_lg_1cum9_89\",\"selectError\":\"_selectError_1cum9_95\",\"selectErrorCambio\":\"_selectErrorCambio_1cum9_101\"}"]}

package/dist/__chunks/{44DDUZLN.js → NI6XOJ3G.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./LPWENXKW.js";
+} from "./PM4UMJWM.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=44DDUZLN.js.map
+//# sourceMappingURL=NI6XOJ3G.js.map

package/dist/__chunks/OMFFRI3K.js

@@ -0,0 +1,9 @@
+"use client"
+
+// css-module:../Button/Button.module.css#css-module
+var Button_module_default = { "button": "_button_9efd1_1", "buttonGap": "_buttonGap_9efd1_9", "disabledCambioPrimary": "_disabledCambioPrimary_9efd1_50", "fullWidth": "_fullWidth_9efd1_54", "sm": "_sm_9efd1_58", "md": "_md_9efd1_65", "lg": "_lg_9efd1_72", "smCambio": "_smCambio_9efd1_79", "mdCambio": "_mdCambio_9efd1_86", "lgCambio": "_lgCambio_9efd1_93", "icon": "_icon_9efd1_100", "smIcon": "_smIcon_9efd1_104", "mdIcon": "_mdIcon_9efd1_111", "lgIcon": "_lgIcon_9efd1_118", "secondaryBorder": "_secondaryBorder_9efd1_125", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_9efd1_129", "loading": "_loading_9efd1_143", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_9efd1_1", "loadingCircle": "_loadingCircle_9efd1_147" };
+
+export {
+  Button_module_default
+};
+//# sourceMappingURL=OMFFRI3K.js.map

package/dist/__chunks/OMFFRI3K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button/Button.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_9efd1_1\",\"buttonGap\":\"_buttonGap_9efd1_9\",\"disabledCambioPrimary\":\"_disabledCambioPrimary_9efd1_50\",\"fullWidth\":\"_fullWidth_9efd1_54\",\"sm\":\"_sm_9efd1_58\",\"md\":\"_md_9efd1_65\",\"lg\":\"_lg_9efd1_72\",\"smCambio\":\"_smCambio_9efd1_79\",\"mdCambio\":\"_mdCambio_9efd1_86\",\"lgCambio\":\"_lgCambio_9efd1_93\",\"icon\":\"_icon_9efd1_100\",\"smIcon\":\"_smIcon_9efd1_104\",\"mdIcon\":\"_mdIcon_9efd1_111\",\"lgIcon\":\"_lgIcon_9efd1_118\",\"secondaryBorder\":\"_secondaryBorder_9efd1_125\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_9efd1_129\",\"loading\":\"_loading_9efd1_143\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_9efd1_1\",\"loadingCircle\":\"_loadingCircle_9efd1_147\"}"],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,yBAAwB,mCAAkC,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,QAAO,mBAAkB,UAAS,qBAAoB,UAAS,qBAAoB,UAAS,qBAAoB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;","names":[]}

package/dist/__chunks/{CJLPH2FJ.js → P2BCEYCC.js}

@@ -4,10 +4,10 @@ import {
 } from "./KKADUD65.js";
 import {
   Typography_default
-} from "./DZRB2DSH.js";
+} from "./HINMIM2W.js";
 import {
   colors_module_default
-} from "./JHJZ5COD.js";
+} from "./B7PDT66P.js";
 import {
   useTheme
 } from "./ZSHAHV4F.js";
@@ -134,4 +134,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=CJLPH2FJ.js.map
+//# sourceMappingURL=P2BCEYCC.js.map

package/dist/__chunks/{6UFO6JEO.cjs → PDPWTB6M.cjs}

@@ -7,7 +7,7 @@ var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
 var _5JUNB754cjs = require('./5JUNB754.cjs');
 
 
-var _54PSDUCDcjs = require('./54PSDUCD.cjs');
+var _ZCSR6NFBcjs = require('./ZCSR6NFB.cjs');
 
 
 
@@ -15,17 +15,17 @@ var _HWQUS53Mcjs = require('./HWQUS53M.cjs');
 
 
 
-var _HCM63U3Jcjs = require('./HCM63U3J.cjs');
+var _UQY2ELTZcjs = require('./UQY2ELTZ.cjs');
 
 
 
-var _QWMAWIWIcjs = require('./QWMAWIWI.cjs');
+var _J43HGNHNcjs = require('./J43HGNHN.cjs');
 
 
-var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
+var _4BFY734Ccjs = require('./4BFY734C.cjs');
 
 
-var _46QLII42cjs = require('./46QLII42.cjs');
+var _TJN7NBWUcjs = require('./TJN7NBWU.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -38,7 +38,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "button": "_button_ddq3j_1", "buttonGap": "_buttonGap_ddq3j_9", "fullWidth": "_fullWidth_ddq3j_50", "sm": "_sm_ddq3j_54", "md": "_md_ddq3j_61", "lg": "_lg_ddq3j_68", "smCambio": "_smCambio_ddq3j_75", "mdCambio": "_mdCambio_ddq3j_82", "lgCambio": "_lgCambio_ddq3j_89", "icon": "_icon_ddq3j_96", "smIcon": "_smIcon_ddq3j_100", "mdIcon": "_mdIcon_ddq3j_107", "lgIcon": "_lgIcon_ddq3j_114", "secondaryBorder": "_secondaryBorder_ddq3j_121", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_ddq3j_125", "loading": "_loading_ddq3j_139", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_ddq3j_1", "loadingCircle": "_loadingCircle_ddq3j_143" };
+var Button_module_default = { "button": "_button_9efd1_1", "buttonGap": "_buttonGap_9efd1_9", "disabledCambioPrimary": "_disabledCambioPrimary_9efd1_50", "fullWidth": "_fullWidth_9efd1_54", "sm": "_sm_9efd1_58", "md": "_md_9efd1_65", "lg": "_lg_9efd1_72", "smCambio": "_smCambio_9efd1_79", "mdCambio": "_mdCambio_9efd1_86", "lgCambio": "_lgCambio_9efd1_93", "icon": "_icon_9efd1_100", "smIcon": "_smIcon_9efd1_104", "mdIcon": "_mdIcon_9efd1_111", "lgIcon": "_lgIcon_9efd1_118", "secondaryBorder": "_secondaryBorder_9efd1_125", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_9efd1_129", "loading": "_loading_9efd1_143", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_9efd1_1", "loadingCircle": "_loadingCircle_9efd1_147" };
 
 // src/Button/Button.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -62,8 +62,9 @@ var Button = _react.forwardRef.call(void 0,
   }, ref) => {
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
     const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
-    const foregroundColorClass = themeName === "classic" ? _HCM63U3Jcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _HCM63U3Jcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
-    const backgroundColorClass = themeName === "classic" ? _QWMAWIWIcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _QWMAWIWIcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const foregroundColorClass = themeName === "classic" ? _UQY2ELTZcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _UQY2ELTZcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const backgroundColorClass = themeName === "classic" ? _J43HGNHNcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _J43HGNHNcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
+    const disabledCambioPrimary = themeName === "cambio" && color === "primary" && disabled;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
@@ -87,22 +88,44 @@ var Button = _react.forwardRef.call(void 0,
           }
         ),
         children: [
-          !loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StartIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _54PSDUCDcjs.iconSize_default[size]) }),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _46QLII42cjs.Typography_default,
+          !loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            StartIcon,
+            {
+              className: _classnames2.default.call(void 0, 
+                Button_module_default.icon,
+                _ZCSR6NFBcjs.iconSize_default[size],
+                disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+              )
+            }
+          ),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _4BFY734Ccjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _TJN7NBWUcjs.Typography_default,
             {
               size: themeName === "classic" ? _5JUNB754cjs.textVariant_default[size] : _5JUNB754cjs.textVariant_default[size],
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "span",
                 {
-                  className: foregroundColorClass,
+                  className: _classnames2.default.call(void 0, 
+                    // Temporary - until we have cambio colors on Typography
+                    foregroundColorClass,
+                    disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+                  ),
                   style: { fontWeight: 500 },
                   children: loading ? loadingText : text
                 }
               )
             }
           ) }),
-          !loading && EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _54PSDUCDcjs.iconSize_default[size]) }),
+          !loading && EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            EndIcon,
+            {
+              className: _classnames2.default.call(void 0, 
+                Button_module_default.icon,
+                _ZCSR6NFBcjs.iconSize_default[size],
+                disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+              )
+            }
+          ),
           loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "svg",
             {
@@ -134,4 +157,4 @@ var Button_default = Button;
 
 
 exports.Button_default = Button_default;
-//# sourceMappingURL=6UFO6JEO.cjs.map
+//# sourceMappingURL=PDPWTB6M.cjs.map

package/dist/__chunks/PDPWTB6M.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":"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","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 { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\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   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\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\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\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    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    const disabledCambioPrimary =\n      themeName === \"cambio\" && 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          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledCambioPrimary && styles.disabledCambioPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                className={classNames(\n                  // Temporary - until we have cambio colors on Typography\n                  foregroundColorClass,\n                  disabledCambioPrimary && styles.disabledCambioPrimary,\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              disabledCambioPrimary && styles.disabledCambioPrimary,\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_9efd1_1\",\"buttonGap\":\"_buttonGap_9efd1_9\",\"disabledCambioPrimary\":\"_disabledCambioPrimary_9efd1_50\",\"fullWidth\":\"_fullWidth_9efd1_54\",\"sm\":\"_sm_9efd1_58\",\"md\":\"_md_9efd1_65\",\"lg\":\"_lg_9efd1_72\",\"smCambio\":\"_smCambio_9efd1_79\",\"mdCambio\":\"_mdCambio_9efd1_86\",\"lgCambio\":\"_lgCambio_9efd1_93\",\"icon\":\"_icon_9efd1_100\",\"smIcon\":\"_smIcon_9efd1_104\",\"mdIcon\":\"_mdIcon_9efd1_111\",\"lgIcon\":\"_lgIcon_9efd1_118\",\"secondaryBorder\":\"_secondaryBorder_9efd1_125\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_9efd1_129\",\"loading\":\"_loading_9efd1_143\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_9efd1_1\",\"loadingCircle\":\"_loadingCircle_9efd1_147\"}"]}

package/dist/__chunks/{LPWENXKW.js → PM4UMJWM.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   Box_default
-} from "./KU5UT5RY.js";
+} from "./22OMICOW.js";
 import {
   Typography_default
-} from "./DZRB2DSH.js";
+} from "./HINMIM2W.js";
 import {
   useTheme
 } from "./ZSHAHV4F.js";
@@ -112,4 +112,4 @@ var Chip_default = Chip;
 export {
   Chip_default
 };
-//# sourceMappingURL=LPWENXKW.js.map
+//# sourceMappingURL=PM4UMJWM.js.map