@cambly/syntax-core 16.2.0 → 17.0.0

package/dist/__chunks/{4C7SU3EM.js → 5CYRB76B.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Button_default
-} from "./2GCKYKF3.js";
+} from "./EJOHX5KN.js";
 import {
   Divider
 } from "./YAZOHZLW.js";
@@ -10,13 +10,13 @@ import {
 } from "./BOX3VY3Q.js";
 import {
   RichSelectSection_default
-} from "./CHMPCLBE.js";
+} from "./4PCG6V7R.js";
 import {
   RichSelectRadioButton_default
-} from "./B64Z54QN.js";
+} from "./S65ZGD3J.js";
 import {
   RichSelectChip_default
-} from "./NPUDOII6.js";
+} from "./I2B3VCQZ.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=4C7SU3EM.js.map
+//# sourceMappingURL=5CYRB76B.js.map

package/dist/__chunks/{4ENILLBC.cjs → 65T3LN32.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _42SXZKBGcjs = require('./42SXZKBG.cjs');
+var _X4VZTUXQcjs = require('./X4VZTUXQ.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -76,7 +76,7 @@ var Chip = _react.forwardRef.call(void 0,
         onClick: onChange,
         children: [
           Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles, size: 100 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X4VZTUXQcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
         ]
       }
     );
@@ -88,4 +88,4 @@ var Chip_default = Chip;
 
 
 exports.Chip_default = Chip_default;
-//# sourceMappingURL=4ENILLBC.cjs.map
+//# sourceMappingURL=65T3LN32.cjs.map

package/dist/__chunks/{GQBD6AND.js → 6WGY4223.js}

@@ -4,7 +4,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -95,4 +95,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=GQBD6AND.js.map
+//# sourceMappingURL=6WGY4223.js.map

package/dist/__chunks/{VPWID72F.js → ALM62ASN.js}

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

package/dist/__chunks/{VPWID72F.js.map → ALM62ASN.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 26 Jun 2024 17:59:01 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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#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 Mon, 01 Jul 2024 18:26:10 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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#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\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{OJKBVPRV.cjs → APHFWWUY.cjs}

@@ -7,7 +7,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
 
 
-var _B3O42V6Xcjs = require('./B3O42V6X.cjs');
+var _XMAFPNWJcjs = require('./XMAFPNWJ.cjs');
 
 
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
@@ -46,7 +46,7 @@ function TabButton({
           "data-testid": dataTestId,
           accessibilityLabel,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _B3O42V6Xcjs.TabInternal,
+            _XMAFPNWJcjs.TabInternal,
             {
               text,
               selected,
@@ -64,4 +64,4 @@ function TabButton({
 
 
 exports.TabButton = TabButton;
-//# sourceMappingURL=OJKBVPRV.cjs.map
+//# sourceMappingURL=APHFWWUY.cjs.map

package/dist/__chunks/{YECKQLZS.cjs → AQKXSQR3.cjs}

@@ -4,7 +4,7 @@
 var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
 
 
-var _B3O42V6Xcjs = require('./B3O42V6X.cjs');
+var _XMAFPNWJcjs = require('./XMAFPNWJ.cjs');
 
 
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
@@ -51,7 +51,7 @@ var TabLink = _react.forwardRef.call(void 0,
             onClick,
             className: _JVGBP6LOcjs.Tabs_module_default.link,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _B3O42V6Xcjs.TabInternal,
+              _XMAFPNWJcjs.TabInternal,
               {
                 text,
                 selected,
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 
 
 exports.TabLink_default = TabLink_default;
-//# sourceMappingURL=YECKQLZS.cjs.map
+//# sourceMappingURL=AQKXSQR3.cjs.map

package/dist/__chunks/{UCJSVVK6.js → CJXU3IVA.js}

@@ -7,7 +7,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 import {
   colors_module_default
 } from "./XVUEUKXA.js";
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
 export {
   RadioButton_default
 };
-//# sourceMappingURL=UCJSVVK6.js.map
+//# sourceMappingURL=CJXU3IVA.js.map

package/dist/__chunks/{6ZBLF7S2.cjs → CUFB2LTK.cjs}

@@ -4,7 +4,7 @@
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _Z66NM3NKcjs = require('./Z66NM3NK.cjs');
+var _GFM6QDCCcjs = require('./GFM6QDCC.cjs');
 
 
 
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
   function RichSelectRadioButton(props, ref) {
     const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _Z66NM3NKcjs.RadioButton_default,
+      _GFM6QDCCcjs.RadioButton_default,
       {
         checked: isSelected,
         disabled: isDisabled,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
-//# sourceMappingURL=6ZBLF7S2.cjs.map
+//# sourceMappingURL=CUFB2LTK.cjs.map

package/dist/__chunks/{O54TUH3V.cjs → DRAHNADB.cjs}

@@ -20,7 +20,7 @@ var _SFBTR56Icjs = require('./SFBTR56I.cjs');
 var _65LHF5WDcjs = require('./65LHF5WD.cjs');
 
 
-var _42SXZKBGcjs = require('./42SXZKBG.cjs');
+var _X4VZTUXQcjs = require('./X4VZTUXQ.cjs');
 
 // src/LinkButton/LinkButton.tsx
 
@@ -89,7 +89,7 @@ var LinkButton = _react.forwardRef.call(void 0,
               size: _4Y7TNMFLcjs.internalIconSize[size]
             }
           ),
-          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X4VZTUXQcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
               className: foregroundColorClass,
@@ -138,4 +138,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=O54TUH3V.cjs.map
+//# sourceMappingURL=DRAHNADB.cjs.map

package/dist/__chunks/{B3ZOLJLG.cjs → E2ICNJM3.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _42SXZKBGcjs = require('./42SXZKBG.cjs');
+var _X4VZTUXQcjs = require('./X4VZTUXQ.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -52,7 +52,7 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X4VZTUXQcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -72,7 +72,7 @@ function TextField({
           }
         ),
         (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _42SXZKBGcjs.Typography_default,
+          _X4VZTUXQcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-darkBackground" : "gray700",
@@ -87,4 +87,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=B3ZOLJLG.cjs.map
+//# sourceMappingURL=E2ICNJM3.cjs.map

package/dist/__chunks/{2GCKYKF3.js → EJOHX5KN.js}

@@ -23,7 +23,7 @@ import {
 } from "./3CYMW6HT.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -146,4 +146,4 @@ var Button_default = Button;
 export {
   Button_default
 };
-//# sourceMappingURL=2GCKYKF3.js.map
+//# sourceMappingURL=EJOHX5KN.js.map

package/dist/__chunks/{3Z5DP4X3.cjs → EVOGRJ6Q.cjs}

@@ -4,7 +4,7 @@
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _42SXZKBGcjs = require('./42SXZKBG.cjs');
+var _X4VZTUXQcjs = require('./X4VZTUXQ.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -22,6 +22,7 @@ var textColorForBackgroundColor = (color) => {
     case "thistle":
     case "pink":
     case "lilac":
+    case "cream":
       return "gray900";
     default:
       return "white";
@@ -44,7 +45,7 @@ var Badge = ({
       justifyContent: "center",
       minHeight: 24,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _42SXZKBGcjs.Typography_default,
+        _X4VZTUXQcjs.Typography_default,
         {
           size: 100,
           weight: "medium",
@@ -52,7 +53,7 @@ var Badge = ({
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _KJLBDAZHcjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
             Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon, size: 100 }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _42SXZKBGcjs.Typography_default,
+              _X4VZTUXQcjs.Typography_default,
               {
                 color: textColorForBackgroundColor(color),
                 size: 100,
@@ -71,4 +72,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=3Z5DP4X3.cjs.map
+//# sourceMappingURL=EVOGRJ6Q.cjs.map

package/dist/__chunks/EVOGRJ6Q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;ACiFxH,SACW,KADX;AA7DR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM,MAAM,KAAK;AAAA,YAClD;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nconst badgeColor = [\n  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n  \"cream\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\n    case \"cream\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"sky\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      paddingY={1}\n      rounding={\"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n    >\n      <Typography\n        size={100}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} size={100} />}\n          <Typography\n            color={textColorForBackgroundColor(color)}\n            size={100}\n            weight=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"]}

package/dist/__chunks/{BG3VB5JF.js → FH6VUDLQ.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 
 // src/Heading/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -47,4 +47,4 @@ var Heading_default = Heading;
 export {
   Heading_default
 };
-//# sourceMappingURL=BG3VB5JF.js.map
+//# sourceMappingURL=FH6VUDLQ.js.map

package/dist/__chunks/{Z66NM3NK.cjs → GFM6QDCC.cjs}

@@ -7,7 +7,7 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _42SXZKBGcjs = require('./42SXZKBG.cjs');
+var _X4VZTUXQcjs = require('./X4VZTUXQ.cjs');
 
 
 var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
@@ -113,7 +113,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _42SXZKBGcjs.Typography_default,
+          _X4VZTUXQcjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=Z66NM3NK.cjs.map
+//# sourceMappingURL=GFM6QDCC.cjs.map

package/dist/__chunks/{BXKO34RQ.js → HNY2Z3RS.js}

@@ -4,7 +4,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 import {
   colors_module_default
 } from "./XVUEUKXA.js";
@@ -98,4 +98,4 @@ function TabInternal({
 export {
   TabInternal
 };
-//# sourceMappingURL=BXKO34RQ.js.map
+//# sourceMappingURL=HNY2Z3RS.js.map

package/dist/__chunks/{SCY53TTH.cjs → HSN5X3GG.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 _YECKQLZScjs = require('./YECKQLZS.cjs');
+var _AQKXSQR3cjs = require('./AQKXSQR3.cjs');
 
 
-var _OJKBVPRVcjs = require('./OJKBVPRV.cjs');
+var _APHFWWUYcjs = require('./APHFWWUY.cjs');
 
 
 var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
@@ -44,10 +44,10 @@ function Tabs({
     }
   );
 }
-Tabs.Button = _OJKBVPRVcjs.TabButton;
-Tabs.Link = _YECKQLZScjs.TabLink_default;
+Tabs.Button = _APHFWWUYcjs.TabButton;
+Tabs.Link = _AQKXSQR3cjs.TabLink_default;
 
 
 
 exports.Tabs = Tabs;
-//# sourceMappingURL=SCY53TTH.cjs.map
+//# sourceMappingURL=HSN5X3GG.cjs.map

package/dist/__chunks/{UHOT5ZOH.cjs → HZL5EIKR.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _3TF4GQNLcjs = require('./3TF4GQNL.cjs');
+var _ZAEQSVURcjs = require('./ZAEQSVUR.cjs');
 
 
 var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
@@ -51,7 +51,7 @@ function Modal({
     {
       className: Modal_module_default.backdrop,
       role: "presentation",
-      onClick: (e) => e.target === e.currentTarget && onDismiss(),
+      onMouseDown: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         _KJLBDAZHcjs.Box_default,
@@ -93,7 +93,7 @@ function Modal({
             ),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _KJLBDAZHcjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
               image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { children: image }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3TF4GQNLcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZAEQSVURcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _KJLBDAZHcjs.Box_default,
                 {
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=UHOT5ZOH.cjs.map
+//# sourceMappingURL=HZL5EIKR.cjs.map

package/dist/__chunks/{UHOT5ZOH.cjs.map → HZL5EIKR.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"gray100\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={600}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"md\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={6}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"]}
+{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC9D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onMouseDown={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"gray100\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={600}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"md\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={6}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"]}

package/dist/__chunks/{M37PG54B.js → HZVMEEUX.js}

@@ -4,7 +4,7 @@ import {
 } from "./5JQ6C2XV.js";
 import {
   TabInternal
-} from "./BXKO34RQ.js";
+} from "./HNY2Z3RS.js";
 import {
   Box_default
 } from "./65PMWIHY.js";
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 export {
   TabLink_default
 };
-//# sourceMappingURL=M37PG54B.js.map
+//# sourceMappingURL=HZVMEEUX.js.map

package/dist/__chunks/{NPUDOII6.js → I2B3VCQZ.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./E3N5573J.js";
+} from "./RLCO7AXA.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=NPUDOII6.js.map
+//# sourceMappingURL=I2B3VCQZ.js.map

package/dist/__chunks/{EJ2RDUTA.js → I4G3BKIX.js}

@@ -10,7 +10,7 @@ import {
 } from "./KBIW5XV4.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 import {
   colors_module_default
 } from "./XVUEUKXA.js";
@@ -166,4 +166,4 @@ export {
   AriaTooltip,
   Tooltip_default
 };
-//# sourceMappingURL=EJ2RDUTA.js.map
+//# sourceMappingURL=I4G3BKIX.js.map

package/dist/__chunks/{THO3K5V7.js → JBCSHWF4.js}

@@ -4,7 +4,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -87,4 +87,4 @@ function TextField({
 export {
   TextField
 };
-//# sourceMappingURL=THO3K5V7.js.map
+//# sourceMappingURL=JBCSHWF4.js.map

package/dist/__chunks/{ZH4QTULO.js → JJOEGH2Z.js}

@@ -20,7 +20,7 @@ import {
 } from "./3CYMW6HT.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 
 // src/LinkButton/LinkButton.tsx
 import {
@@ -138,4 +138,4 @@ var LinkButton_default = LinkButton;
 export {
   LinkButton_default
 };
-//# sourceMappingURL=ZH4QTULO.js.map
+//# sourceMappingURL=JJOEGH2Z.js.map

package/dist/__chunks/{KGGNBWMV.js → KQOP76F3.js}

@@ -4,7 +4,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./RCVW5CTF.js";
+} from "./3QUQECC3.js";
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -22,6 +22,7 @@ var textColorForBackgroundColor = (color) => {
     case "thistle":
     case "pink":
     case "lilac":
+    case "cream":
       return "gray900";
     default:
       return "white";
@@ -71,4 +72,4 @@ var Badge_default = Badge;
 export {
   Badge_default
 };
-//# sourceMappingURL=KGGNBWMV.js.map
+//# sourceMappingURL=KQOP76F3.js.map

package/dist/__chunks/KQOP76F3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nconst badgeColor = [\n  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n  \"cream\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\n    case \"cream\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"sky\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      paddingY={1}\n      rounding={\"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n    >\n      <Typography\n        size={100}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} size={100} />}\n          <Typography\n            color={textColorForBackgroundColor(color)}\n            size={100}\n            weight=\"medium\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;ACiFxH,SACW,KADX;AA7DR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM,MAAM,KAAK;AAAA,YAClD;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/{BFODXGGO.cjs → KZOEBX7A.cjs}

@@ -4,7 +4,7 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _42SXZKBGcjs = require('./42SXZKBG.cjs');
+var _X4VZTUXQcjs = require('./X4VZTUXQ.cjs');
 
 
 var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
@@ -100,7 +100,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _42SXZKBGcjs.Typography_default,
+          _X4VZTUXQcjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray900",
@@ -116,4 +116,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=BFODXGGO.cjs.map
+//# sourceMappingURL=KZOEBX7A.cjs.map