@cambly/syntax-core 10.30.0 → 10.32.0

package/dist/__chunks/{CS66HKUB.cjs → 4E7A4J3K.cjs}

@@ -7,28 +7,22 @@ var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
 var _5JUNB754cjs = require('./5JUNB754.cjs');
 
 
-var _ZCSR6NFBcjs = require('./ZCSR6NFB.cjs');
+var _UAXX2ZEQcjs = require('./UAXX2ZEQ.cjs');
 
 
+var _LBA34HLFcjs = require('./LBA34HLF.cjs');
 
-var _HWQUS53Mcjs = require('./HWQUS53M.cjs');
 
+var _BYVURUTUcjs = require('./BYVURUTU.cjs');
 
 
-var _UQY2ELTZcjs = require('./UQY2ELTZ.cjs');
+var _M3PAAPMIcjs = require('./M3PAAPMI.cjs');
 
 
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
 
-var _J43HGNHNcjs = require('./J43HGNHN.cjs');
 
-
-var _GANR5JVVcjs = require('./GANR5JVV.cjs');
-
-
-var _XU3CLITIcjs = require('./XU3CLITI.cjs');
-
-
-var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
+var _XCSW34UMcjs = require('./XCSW34UM.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -38,7 +32,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_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" };
+var Button_module_default = { "button": "_button_y92p2_1", "buttonGap": "_buttonGap_y92p2_8", "disabledPrimary": "_disabledPrimary_y92p2_49", "fullWidth": "_fullWidth_y92p2_53", "sm": "_sm_y92p2_57", "md": "_md_y92p2_64", "lg": "_lg_y92p2_71", "icon": "_icon_y92p2_78", "smIcon": "_smIcon_y92p2_82", "mdIcon": "_mdIcon_y92p2_89", "lgIcon": "_lgIcon_y92p2_96", "loading": "_loading_y92p2_113", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_y92p2_1", "loadingCircle": "_loadingCircle_y92p2_117" };
 
 // src/Button/Button.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -61,10 +55,9 @@ var Button = _react.forwardRef.call(void 0,
     type = "button"
   }, ref) => {
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-    const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
-    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;
+    const foregroundColorClass = _LBA34HLFcjs.foregroundColor.call(void 0, color, on);
+    const backgroundColorClass = _M3PAAPMIcjs.backgroundColor.call(void 0, color, on);
+    const disabledPrimary = color === "primary" && disabled;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
@@ -79,12 +72,11 @@ var Button = _react.forwardRef.call(void 0,
           Button_module_default.button,
           foregroundColorClass,
           backgroundColorClass,
-          themeName === "classic" ? Button_module_default[size] : Button_module_default[`${size}Cambio`],
+          _BYVURUTUcjs.border.call(void 0, color, on),
+          Button_module_default[size],
           {
             [Button_module_default.fullWidth]: fullWidth,
-            [Button_module_default.buttonGap]: size === "lg" || size === "md",
-            [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
-            [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
+            [Button_module_default.buttonGap]: size === "lg" || size === "md"
           }
         ),
         children: [
@@ -93,36 +85,30 @@ var Button = _react.forwardRef.call(void 0,
             {
               className: _classnames2.default.call(void 0, 
                 Button_module_default.icon,
-                _ZCSR6NFBcjs.iconSize_default[size],
-                disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+                _UAXX2ZEQcjs.iconSize_default[size],
+                disabledPrimary && Button_module_default.disabledPrimary
               )
             }
           ),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _XU3CLITIcjs.Typography_default,
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCSW34UMcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
             {
-              size: themeName === "classic" ? _5JUNB754cjs.textVariant_default[size] : _5JUNB754cjs.textVariant_default[size],
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "span",
-                {
-                  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
-                }
-              )
+              className: _classnames2.default.call(void 0, 
+                // Temporary - until we have cambio colors on Typography
+                foregroundColorClass,
+                disabledPrimary && Button_module_default.disabledPrimary
+              ),
+              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,
-                _ZCSR6NFBcjs.iconSize_default[size],
-                disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+                _UAXX2ZEQcjs.iconSize_default[size],
+                disabledPrimary && Button_module_default.disabledPrimary
               )
             }
           ),
@@ -157,4 +143,4 @@ var Button_default = Button;
 
 
 exports.Button_default = Button_default;
-//# sourceMappingURL=CS66HKUB.cjs.map
+//# sourceMappingURL=4E7A4J3K.cjs.map

package/dist/__chunks/4E7A4J3K.cjs.map

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

package/dist/__chunks/{GEGGHBSM.cjs → 4HCWQMZO.cjs}

@@ -1,29 +1,29 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _RVFY33X2cjs = require('./RVFY33X2.cjs');
+var _C5XPZTFOcjs = require('./C5XPZTFO.cjs');
 
 
-var _CS66HKUBcjs = require('./CS66HKUB.cjs');
+var _4E7A4J3Kcjs = require('./4E7A4J3K.cjs');
 
 
-var _HYRATHVKcjs = require('./HYRATHVK.cjs');
+var _DMA6PPUZcjs = require('./DMA6PPUZ.cjs');
 
 
-var _ZUQC37VBcjs = require('./ZUQC37VB.cjs');
+var _MI5OUDV4cjs = require('./MI5OUDV4.cjs');
 
 
-var _SFOAZYZGcjs = require('./SFOAZYZG.cjs');
+var _SND6HHALcjs = require('./SND6HHAL.cjs');
 
 
-var _WOIJRASPcjs = require('./WOIJRASP.cjs');
+var _KNFEGYQMcjs = require('./KNFEGYQM.cjs');
 
 
 
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _GANR5JVVcjs = require('./GANR5JVV.cjs');
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.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, _GANR5JVVcjs.Box_default, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _RJ3ZYLJScjs.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, 
-        _GANR5JVVcjs.Box_default,
+        _RJ3ZYLJScjs.Box_default,
         {
           backgroundColor: "white",
           display: "flex",
@@ -159,17 +159,17 @@ var RichSelectBox = _react.forwardRef.call(void 0,
             }
           },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HYRATHVKcjs.Divider, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RJ3ZYLJScjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DMA6PPUZcjs.Divider, {}) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _GANR5JVVcjs.Box_default,
+              _RJ3ZYLJScjs.Box_default,
               {
                 paddingY: 5,
                 marginTop: -5,
                 display: "flex",
                 justifyContent: "end",
-                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _RVFY33X2cjs.ButtonGroup_default, { orientation: "horizontal", children: [
+                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _C5XPZTFOcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _CS66HKUBcjs.Button_default,
+                    _4E7A4J3Kcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _CS66HKUBcjs.Button_default,
+                    _4E7A4J3Kcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
   }
 );
 var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _SFOAZYZGcjs.RichSelectSection_default,
-  Chip: _ZUQC37VBcjs.RichSelectChip_default,
-  RadioButton: _WOIJRASPcjs.RichSelectRadioButton_default
+  Section: _SND6HHALcjs.RichSelectSection_default,
+  Chip: _MI5OUDV4cjs.RichSelectChip_default,
+  RadioButton: _KNFEGYQMcjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=GEGGHBSM.cjs.map
+//# sourceMappingURL=4HCWQMZO.cjs.map

package/dist/__chunks/{AKKJTW7U.js → 53IGOH2V.js}

@@ -1,31 +1,25 @@
 "use client"
 import {
   Heading_default
-} from "./AYTJYJHI.js";
+} from "./N6YLXBLU.js";
 import {
   StopScroll
 } from "./QQT35OLE.js";
 import {
   Layer
-} from "./GJBW4BG7.js";
+} from "./2XOJNXTC.js";
 import {
   FocusTrap
 } from "./HVA7R2EL.js";
 import {
   IconButton_default
-} from "./VR4ZFZ4Z.js";
+} from "./JFI6TDAC.js";
 import {
   Box_default
-} from "./HCHFPFNX.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
-
-// src/Modal/Modal.tsx
-import classnames from "classnames";
+} from "./GCE2CI4A.js";
 
 // css-module:./Modal.module.css#css-module
-var Modal_module_default = { "backdrop": "_backdrop_9g2f1_1", "backdropClassic": "_backdropClassic_9g2f1_9", "backdropCambio": "_backdropCambio_9g2f1_13", "closeButton": "_closeButton_9g2f1_17", "closeButtonClassic": "_closeButtonClassic_9g2f1_32", "closeButtonWithImage": "_closeButtonWithImage_9g2f1_44", "closeButtonWithImageCambio": "_closeButtonWithImageCambio_9g2f1_48" };
+var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
 
 // src/Modal/Modal.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -33,7 +27,7 @@ var sizeWidth = {
   sm: 600,
   lg: 600
 };
-function XIconCambio({ className }) {
+function XIcon({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -57,14 +51,10 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  const { themeName } = useTheme();
   return /* @__PURE__ */ jsx(Layer, { zIndex, children: /* @__PURE__ */ jsx(StopScroll, { children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: classnames(
-        Modal_module_default.backdrop,
-        themeName === "classic" ? Modal_module_default.backdropClassic : Modal_module_default.backdropCambio
-      ),
+      className: Modal_module_default.backdrop,
       role: "presentation",
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
@@ -101,7 +91,7 @@ function Modal({
                     on: image ? "darkBackground" : "lightBackground",
                     onClick: onDismiss,
                     size: "sm",
-                    icon: XIconCambio
+                    icon: XIcon
                   }
                 )
               }
@@ -145,4 +135,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=AKKJTW7U.js.map
+//# sourceMappingURL=53IGOH2V.js.map

package/dist/__chunks/53IGOH2V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"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\nconst sizeWidth = {\n  sm: 600,\n  lg: 600,\n} as const;\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  size = \"sm\",\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 size of the card\n   * * `sm`: 600px (deprecated)\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   * @deprecated\n   */\n  size?: keyof typeof sizeWidth;\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=\"white\"\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={sizeWidth[size]}\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=\"sm\"\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={600} 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACyBxK,cAiKQ,YAjKR;AAdN,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,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,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB,GAsEiB;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,UAAU,IAAI;AAAA,UACxB,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;","names":[]}

package/dist/__chunks/{UKLQ64N7.cjs → 5PL5GKUK.cjs}

@@ -1,7 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _S5QHTHSTcjs = require('./S5QHTHST.cjs');
+var _RJ3ZYLJScjs = require('./RJ3ZYLJS.cjs');
+
+
+var _45TMKSJQcjs = require('./45TMKSJQ.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -96,7 +99,7 @@ var TapArea = _react.forwardRef.call(void 0,
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
     const isHoveredOrFocussed = !disabled && (hovered || focussed);
-    const roundingClasses = rounding !== "none" && _S5QHTHSTcjs.rounding_module_default[`rounding${rounding}`];
+    const roundingClasses = rounding !== "none" && _45TMKSJQcjs.rounding_module_default[`rounding${_RJ3ZYLJScjs.roundingCambio.call(void 0, rounding)}`];
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, accessibilityProps), {
@@ -133,4 +136,4 @@ var TapArea_default = TapArea;
 
 
 exports.TapArea_default = TapArea_default;
-//# sourceMappingURL=UKLQ64N7.cjs.map
+//# sourceMappingURL=5PL5GKUK.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,gBAAgB;;;ACNuE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;AD6JlT,SAuBI,KAvBJ;AA3FN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE,IAaA,QACG;AAdH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,UAAU,eAAe;AAAA,MACzB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,IAxGjB,IA8FI,IAWK,+BAXL,IAWK;AAAA,MAVH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,qBAA8D,CAClE,UACG;AACH,UAAI;AAAU;AACd,eAAS,EAAE,MAAM,cAAc,CAAC;AAChC,mDAAe;AAAA,IACjB;AAEA,UAAM,qBAA8D,CAClE,UACG;AACH,UAAI;AAAU;AACd,eAAS,EAAE,MAAM,cAAc,CAAC;AAChC,mDAAe;AAAA,IACjB;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AACrD,UAAM,kBACJ,aAAa,UACb,wBAAe,WAAW,eAAe,QAAQ,GAAG;AAEtD,WACE;AAAA,MAAC;AAAA,uCACK,qBADL;AAAA,QAEC,iBAAe,YAAY,mBAAmB,eAAe;AAAA,QAC7D,cAAY,kDAAsB,mBAAmB,YAAY;AAAA,QACjE,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,UAC9B;AAAA,QACF;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc;AAAA,QACd,cAAc;AAAA,QACd,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB,oBAAC,SAAI,WAAW,WAAW,uBAAO,SAAS,eAAe,GAAG;AAAA,UAE9D;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ","sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  useReducer,\n  type AriaAttributes,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { roundingCambio } from \"../Box/Box\";\n\ntype TapAreaProps = AriaAttributes & {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * The callback to be called when the tap area is hovered\n   */\n  onMouseEnter?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * The callback to be called when the tap area is no longer hovered\n   */\n  onMouseLeave?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `lg`: 16px\n   * * `xl`: 32px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n  (\n    {\n      children,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullWidth = true,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      rounding = \"none\",\n      tabIndex = 0,\n      ...accessibilityProps\n    }: TapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const handleOnMouseEnter: React.MouseEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_ENTER\" });\n      onMouseEnter?.(event);\n    };\n\n    const handleOnMouseLeave: React.MouseEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_LEAVE\" });\n      onMouseLeave?.(event);\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n    const roundingClasses =\n      rounding !== \"none\" &&\n      roundingStyles[`rounding${roundingCambio(rounding)}`];\n\n    return (\n      <div\n        {...accessibilityProps}\n        aria-disabled={disabled || accessibilityProps[\"aria-disabled\"]}\n        aria-label={accessibilityLabel ?? accessibilityProps[\"aria-label\"]}\n        className={classNames(\n          styles.tapArea,\n          styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullWidth && styles.fullWidth,\n          isHoveredOrFocussed && styles.hoveredOrFocussed,\n          roundingClasses,\n        )}\n        data-testid={dataTestId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div className={classNames(styles.overlay, roundingClasses)} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"]}

package/dist/__chunks/5VVFGPW6.cjs

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _LBA34HLFcjs = require('./LBA34HLF.cjs');
+
+
+var _BYVURUTUcjs = require('./BYVURUTU.cjs');
+
+
+var _M3PAAPMIcjs = require('./M3PAAPMI.cjs');
+
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
+
+// src/IconButton/IconButton.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _react = require('react');
+
+// css-module:./IconButton.module.css#css-module
+var IconButton_module_default = { "iconButton": "_iconButton_1h8zl_1", "sm": "_sm_1h8zl_45", "md": "_md_1h8zl_50", "lg": "_lg_1h8zl_55", "smIcon": "_smIcon_1h8zl_60", "mdIcon": "_mdIcon_1h8zl_67", "lgIcon": "_lgIcon_1h8zl_74" };
+
+// src/IconButton/IconButton.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var iconSize = {
+  sm: IconButton_module_default.smIcon,
+  md: IconButton_module_default.mdIcon,
+  lg: IconButton_module_default.lgIcon
+};
+var IconButton = _react.forwardRef.call(void 0, 
+  ({
+    accessibilityLabel,
+    color = "primary",
+    "data-testid": dataTestId,
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    on = "lightBackground",
+    onClick
+  }, ref) => {
+    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
+    const foregroundColorClass = _LBA34HLFcjs.foregroundColor.call(void 0, color, on);
+    const backgroundColorClass = _M3PAAPMIcjs.backgroundColor.call(void 0, color, on);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        "aria-label": accessibilityLabel,
+        "data-testid": dataTestId,
+        type: "button",
+        title: tooltip,
+        disabled: !isHydrated || disabled,
+        onClick,
+        className: _classnames2.default.call(void 0, 
+          IconButton_module_default.iconButton,
+          foregroundColorClass,
+          backgroundColorClass,
+          _BYVURUTUcjs.border.call(void 0, color, on),
+          IconButton_module_default[size]
+        ),
+        ref,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconSize[size] })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+
+
+exports.IconButton_default = IconButton_default;
+//# sourceMappingURL=5VVFGPW6.cjs.map

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

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

package/dist/__chunks/6CZHUML6.js

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

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

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

package/dist/__chunks/{JXOKXBDZ.cjs → ASFZDRJJ.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"
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 // src/ThemeProvider/ThemeProvider.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _react = require('react');
 
 // ../syntax-design-tokens/dist/json/variables.json
 var variables_default = {
@@ -95,10 +95,6 @@ var variables_default = {
 
 // src/ThemeProvider/ThemeProvider.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var ThemeContext = _react2.default.createContext({
-  themeName: "classic"
-});
-ThemeContext.displayName = "ThemeContext";
 var classicToCambioKeyLookup = {
   "color-base-black": "color-cambio-black",
   "color-base-destructive-100": "color-cambio-destructive-100",
@@ -164,14 +160,12 @@ var classicToCambioKeyLookup = {
   // Deprecated - to be deleted
   "color-base-white": "color-cambio-white"
 };
-function stylesForTheme(themeName) {
+function stylesForTheme() {
   const tokenVariables = variables_default;
   return `
     :root {
-      ${Object.entries(tokenVariables).filter(([key]) => {
-    return themeName === "classic" ? !key.includes("cambio") : true;
-  }).map(([key, value]) => {
-    if (themeName === "cambio" && classicToCambioKeyLookup[key]) {
+      ${Object.entries(tokenVariables).map(([key, value]) => {
+    if (classicToCambioKeyLookup[key]) {
       return [
         key,
         tokenVariables[
@@ -186,12 +180,10 @@ function stylesForTheme(themeName) {
   `;
 }
 function ThemeProvider({
-  themeName = "classic",
   children
 }) {
-  const value = _react.useMemo.call(void 0, () => ({ themeName }), [themeName]);
-  const innerStyles = _react.useMemo.call(void 0, () => stylesForTheme(themeName), [themeName]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ThemeContext.Provider, { value, children: [
+  const innerStyles = _react.useMemo.call(void 0, () => stylesForTheme(), []);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "style",
       {
@@ -202,12 +194,8 @@ function ThemeProvider({
     children
   ] });
 }
-function useTheme() {
-  return _react2.default.useContext(ThemeContext);
-}
-
 
 
 
-exports.ThemeProvider = ThemeProvider; exports.useTheme = useTheme;
-//# sourceMappingURL=JXOKXBDZ.cjs.map
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=ASFZDRJJ.cjs.map