@cambly/syntax-core 10.7.0 → 10.8.0

package/dist/__chunks/{6YWV3WYB.cjs → DWAH45NN.cjs}

@@ -2,35 +2,35 @@
 
 
 
-var _5TKLFG5Ycjs = require('./5TKLFG5Y.cjs');
+var _KX4HD3Q3cjs = require('./KX4HD3Q3.cjs');
 
 
-var _QNBZ64IEcjs = require('./QNBZ64IE.cjs');
+var _ZQFEITZHcjs = require('./ZQFEITZH.cjs');
 
 
-var _IJVFSOXUcjs = require('./IJVFSOXU.cjs');
+var _3QJ5N4GAcjs = require('./3QJ5N4GA.cjs');
 
 
-var _M3L2KJQYcjs = require('./M3L2KJQY.cjs');
+var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
 
 
+var _M3L2KJQYcjs = require('./M3L2KJQY.cjs');
 
-var _SYX4XARKcjs = require('./SYX4XARK.cjs');
 
 
-var _FMSI35YScjs = require('./FMSI35YS.cjs');
+var _AVING5PWcjs = require('./AVING5PW.cjs');
 
 
-var _2RCQTGOZcjs = require('./2RCQTGOZ.cjs');
+var _GQC7B3U6cjs = require('./GQC7B3U6.cjs');
 
 
-var _NDJRETMMcjs = require('./NDJRETMM.cjs');
+var _63LUPH3Xcjs = require('./63LUPH3X.cjs');
 
 
-var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
+var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
 
-var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
+var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
 
 
 var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
@@ -101,11 +101,11 @@ function RichSelectList(props) {
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _5TKLFG5Ycjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _KX4HD3Q3cjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _5TKLFG5Ycjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _KX4HD3Q3cjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -143,8 +143,8 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_5TKLFG5Ycjs.RichSelectBoxContext, { autoFocus: true }],
-        [_IJVFSOXUcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
+        [_KX4HD3Q3cjs.RichSelectBoxContext, { autoFocus: true }],
+        [_VA23P3ZIcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -170,11 +170,11 @@ function RichSelectList(props) {
                   (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
                   _interactions.setInteractionModality.call(void 0, "keyboard");
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZX5KONS2cjs.Typography_default, { size: 100, color: "gray700", children: label })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JBNXAIXYcjs.Typography_default, { size: 100, color: "gray700", children: label })
               })
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _QNBZ64IEcjs.Popover_default,
+              _3QJ5N4GAcjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -182,12 +182,12 @@ function RichSelectList(props) {
                 content: (
                   // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _5SMR5MWYcjs.Box_default,
+                    _SZCVEBN2cjs.Box_default,
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _5TKLFG5Ycjs.RichSelectBox_default,
+                        _KX4HD3Q3cjs.RichSelectBox_default,
                         _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
@@ -232,7 +232,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _SYX4XARKcjs.ColorBaseDestructive700 : _SYX4XARKcjs.ColorBaseGray800,
+                              fill: errorText ? _AVING5PWcjs.ColorBaseDestructive700 : _AVING5PWcjs.ColorBaseGray800,
                               d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                             }
                           )
@@ -244,7 +244,7 @@ function RichSelectList(props) {
               }
             ),
             (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _ZX5KONS2cjs.Typography_default,
+              _JBNXAIXYcjs.Typography_default,
               _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
                 size: 100,
                 color: errorText ? "destructive-primary" : "gray700"
@@ -259,12 +259,12 @@ function RichSelectList(props) {
   );
 }
 var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _FMSI35YScjs.RichSelectSection_default,
-  Chip: _NDJRETMMcjs.RichSelectChip_default,
-  RadioButton: _2RCQTGOZcjs.RichSelectRadioButton_default
+  Section: _GQC7B3U6cjs.RichSelectSection_default,
+  Chip: _ZQFEITZHcjs.RichSelectChip_default,
+  RadioButton: _63LUPH3Xcjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=6YWV3WYB.cjs.map
+//# sourceMappingURL=DWAH45NN.cjs.map

package/dist/__chunks/{MVXPGMCV.js → E6XEQ7AW.js}

@@ -4,13 +4,13 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./EEYUNPFG.js";
+} from "./XJW7XS7M.js";
 import {
   Focus_module_default
 } from "./2O6FDRTF.js";
 import {
   Typography_default
-} from "./B2TFERTM.js";
+} from "./TGGJZ5GF.js";
 import {
   useIsHydrated
 } from "./YJ7YDIGB.js";
@@ -124,4 +124,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=MVXPGMCV.js.map
+//# sourceMappingURL=E6XEQ7AW.js.map

package/dist/__chunks/EJTCFSQF.cjs

@@ -0,0 +1,135 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _LQ6T5UCIcjs = require('./LQ6T5UCI.cjs');
+
+
+var _7AYSDTC6cjs = require('./7AYSDTC6.cjs');
+
+
+var _A72TS5OXcjs = require('./A72TS5OX.cjs');
+
+
+
+var _PSWX5DBCcjs = require('./PSWX5DBC.cjs');
+
+
+
+var _VS4SS6B3cjs = require('./VS4SS6B3.cjs');
+
+
+
+var _MF7Q6ZSWcjs = require('./MF7Q6ZSW.cjs');
+
+
+var _5NIFOD6Kcjs = require('./5NIFOD6K.cjs');
+
+
+var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
+
+
+var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+// src/Button/Button.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Button.module.css#css-module
+var Button_module_default = { "button": "_button_ddq3j_1", "buttonGap": "_buttonGap_ddq3j_9", "fullWidth": "_fullWidth_ddq3j_50", "sm": "_sm_ddq3j_54", "md": "_md_ddq3j_61", "lg": "_lg_ddq3j_68", "smCambio": "_smCambio_ddq3j_75", "mdCambio": "_mdCambio_ddq3j_82", "lgCambio": "_lgCambio_ddq3j_89", "icon": "_icon_ddq3j_96", "smIcon": "_smIcon_ddq3j_100", "mdIcon": "_mdIcon_ddq3j_107", "lgIcon": "_lgIcon_ddq3j_114", "secondaryBorder": "_secondaryBorder_ddq3j_121", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_ddq3j_125", "loading": "_loading_ddq3j_139", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_ddq3j_1", "loadingCircle": "_loadingCircle_ddq3j_143" };
+
+// src/Button/Button.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Button = _react.forwardRef.call(void 0, 
+  ({
+    "data-testid": dataTestId,
+    text,
+    loadingText,
+    color = "primary",
+    size = "md",
+    accessibilityLabel,
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onClick,
+    tooltip,
+    type = "button"
+  }, ref) => {
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+    const { themeName } = _5NIFOD6Kcjs.useTheme.call(void 0, );
+    const foregroundColorClass = themeName === "classic" ? _VS4SS6B3cjs.classicForegroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _VS4SS6B3cjs.cambioForegroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    const backgroundColorClass = themeName === "classic" ? _MF7Q6ZSWcjs.classicBackgroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _MF7Q6ZSWcjs.cambioBackgroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        "data-testid": dataTestId,
+        ref,
+        "aria-label": accessibilityLabel,
+        type,
+        title: tooltip,
+        disabled: !isHydrated || disabled || loading,
+        onClick,
+        className: _classnames2.default.call(void 0, 
+          Button_module_default.button,
+          foregroundColorClass,
+          backgroundColorClass,
+          themeName === "classic" ? Button_module_default[size] : Button_module_default[`${size}Cambio`],
+          {
+            [Button_module_default.fullWidth]: fullWidth,
+            [Button_module_default.buttonGap]: themeName === "classic" && (size === "lg" || size === "md"),
+            [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
+            [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
+          }
+        ),
+        children: [
+          !loading && StartIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StartIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _A72TS5OXcjs.iconSize_default[size]) }),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _JBNXAIXYcjs.Typography_default,
+            {
+              size: themeName === "classic" ? _7AYSDTC6cjs.textVariant_default[size] : _7AYSDTC6cjs.textVariant_default[size],
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  className: foregroundColorClass,
+                  style: { fontWeight: 500 },
+                  children: loading ? loadingText : text
+                }
+              )
+            }
+          ) }),
+          !loading && EndIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _A72TS5OXcjs.iconSize_default[size]) }),
+          loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: _classnames2.default.call(void 0, Button_module_default.loading, foregroundColorClass),
+              viewBox: "22 22 44 44",
+              width: _LQ6T5UCIcjs.loadingIconSize_default[size],
+              height: _LQ6T5UCIcjs.loadingIconSize_default[size],
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "circle",
+                {
+                  className: Button_module_default.loadingCircle,
+                  cx: "44",
+                  cy: "44",
+                  r: "20.2",
+                  fill: "none",
+                  strokeWidth: "3.6"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+
+
+exports.Button_default = Button_default;
+//# sourceMappingURL=EJTCFSQF.cjs.map

package/dist/__chunks/EJTCFSQF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Note: startIcon is not supported in the Cambio theme\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   * Note: endIcon is not supported in the Cambio theme\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\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      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && themeName === \"classic\" && (\n          <StartIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                // Temporary - until we have cambio colors on Typogrphay\n                className={foregroundColorClass}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && themeName === \"classic\" && (\n          <EndIcon className={classNames(styles.icon, iconSize[size])} />\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_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}"]}

package/dist/__chunks/{GOSWBV5D.cjs → EW5FQDYY.cjs}

@@ -3,7 +3,7 @@
 var _LTM57QMYcjs = require('./LTM57QMY.cjs');
 
 
-var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
+var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
 
 
 var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
@@ -92,7 +92,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _ZX5KONS2cjs.Typography_default,
+          _JBNXAIXYcjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray800",
@@ -108,4 +108,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=GOSWBV5D.cjs.map
+//# sourceMappingURL=EW5FQDYY.cjs.map

package/dist/__chunks/{JUUIXL6A.js → FKV5VN7F.js}

@@ -1,9 +1,9 @@
 import {
   Box_default
-} from "./TJHCYMPV.js";
+} from "./I5W7ECUO.js";
 import {
   Typography_default
-} from "./B2TFERTM.js";
+} from "./TGGJZ5GF.js";
 import {
   useIsHydrated
 } from "./YJ7YDIGB.js";
@@ -94,4 +94,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=JUUIXL6A.js.map
+//# sourceMappingURL=FKV5VN7F.js.map

package/dist/__chunks/{XT2JUTU3.js → FXDPBBRB.js}

@@ -1,18 +1,18 @@
 import {
   Heading_default
-} from "./PEKXH4DM.js";
+} from "./4LYJ2Z5F.js";
 import {
   StopScroll
 } from "./AFINOME7.js";
 import {
   Layer
-} from "./E4BJX2H5.js";
+} from "./UWLK56NJ.js";
 import {
   FocusTrap
 } from "./42YPEAFS.js";
 import {
   Box_default
-} from "./TJHCYMPV.js";
+} from "./I5W7ECUO.js";
 
 // src/Modal/Modal.tsx
 import classnames from "classnames";
@@ -107,4 +107,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=XT2JUTU3.js.map
+//# sourceMappingURL=FXDPBBRB.js.map

package/dist/__chunks/{FMSI35YS.cjs → GQC7B3U6.cjs}

@@ -6,7 +6,7 @@ var _ZDMSFZS3cjs = require('./ZDMSFZS3.cjs');
 var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
 
 
-var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
+var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
 
 // src/RichSelect/RichSelectSection.tsx
 var _react = require('react');
@@ -38,7 +38,7 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
           }
         ),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _ZDMSFZS3cjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZX5KONS2cjs.Typography_default, { children: label }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _ZDMSFZS3cjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JBNXAIXYcjs.Typography_default, { children: label }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Collection, { children })
         ]
       }
@@ -49,4 +49,4 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectSection_default = RichSelectSection_default;
-//# sourceMappingURL=FMSI35YS.cjs.map
+//# sourceMappingURL=GQC7B3U6.cjs.map

package/dist/__chunks/HVGUWZ5I.js

@@ -0,0 +1,214 @@
+// src/ThemeProvider/ThemeProvider.tsx
+import React, { useMemo } from "react";
+
+// ../syntax-design-tokens/dist/json/variables.json
+var variables_default = {
+  "color-base-black": "#000000",
+  "color-base-destructive-100": "#fef3f5",
+  "color-base-destructive-200": "#fad6de",
+  "color-base-destructive-300": "#f2a2b2",
+  "color-base-destructive-700": "#d32a4b",
+  "color-base-destructive-800": "#81162c",
+  "color-base-destructive-900": "#55101d",
+  "color-base-gray-10": "rgba(203, 203, 203, 0.5)",
+  "color-base-gray-30": "rgba(0, 0, 0, 0.3)",
+  "color-base-gray-60": "rgba(0, 0, 0, 0.6)",
+  "color-base-gray-80": "rgba(0, 0, 0, 0.8)",
+  "color-base-gray-100": "#f7f7f7",
+  "color-base-gray-200": "#f0f0f0",
+  "color-base-gray-300": "#d0d0d0",
+  "color-base-gray-700": "#767676",
+  "color-base-gray-800": "#353535",
+  "color-base-gray-900": "#191919",
+  "color-base-orange-100": "#fdf2f0",
+  "color-base-orange-200": "#f6cdc4",
+  "color-base-orange-300": "#ec9987",
+  "color-base-orange-700": "#c34124",
+  "color-base-orange-800": "#732818",
+  "color-base-orange-900": "#4d1a10",
+  "color-base-primary-100": "#eff6fa",
+  "color-base-primary-200": "#c1dbe7",
+  "color-base-primary-300": "#84b7d0",
+  "color-base-primary-700": "#236482",
+  "color-base-primary-800": "#274858",
+  "color-base-primary-900": "#1b303b",
+  "color-base-success-100": "#eff7f1",
+  "color-base-success-200": "#bddcc6",
+  "color-base-success-300": "#81ba92",
+  "color-base-success-700": "#397b4d",
+  "color-base-success-800": "#2d4936",
+  "color-base-success-900": "#1e3124",
+  "color-base-purple-100": "#f9f5fa",
+  "color-base-purple-200": "#e8dceb",
+  "color-base-purple-300": "#cdb4d3",
+  "color-base-purple-700": "#8b5f95",
+  "color-base-purple-800": "#523b58",
+  "color-base-purple-900": "#37273b",
+  "color-base-yellow-100": "#fdf5d9",
+  "color-base-yellow-200": "#fbe8a3",
+  "color-base-yellow-300": "#f8d663",
+  "color-base-yellow-700": "#ffc929",
+  "color-base-yellow-800": "#765f1c",
+  "color-base-yellow-900": "#3b3009",
+  "color-base-white": "#ffffff",
+  "color-cambio-black": "#050500",
+  "color-cambio-white": "#ffffff",
+  "color-cambio-gray-100": "#faf4eb",
+  "color-cambio-gray-200": "#e4dbd3",
+  "color-cambio-gray-300": "#beb4ab",
+  "color-cambio-gray-370": "rgba(190, 180, 171, 0.7)",
+  "color-cambio-gray-700": "#888077",
+  "color-cambio-gray-800": "#5c554d",
+  "color-cambio-gray-870": "rgba(92, 85, 77, 0.7)",
+  "color-cambio-gray-900": "#312b23",
+  "color-cambio-destructive-100": "#ffdeda",
+  "color-cambio-destructive-300": "#ff8071",
+  "color-cambio-destructive-370": "rgba(255, 128, 113, 0.7)",
+  "color-cambio-destructive-700": "#c93f32",
+  "color-cambio-destructive-770": "rgba(201, 63, 50, 0.7)",
+  "color-cambio-destructive-900": "#6d0002",
+  "color-cambio-success-100": "#daf2c8",
+  "color-cambio-success-300": "#84ce64",
+  "color-cambio-success-370": "rgba(132, 206, 100, 0.7)",
+  "color-cambio-success-700": "#3c7f20",
+  "color-cambio-success-770": "rgba(60, 127, 32, 0.7)",
+  "color-cambio-success-900": "#103e00",
+  "color-cambio-red": "#f56e56",
+  "color-cambio-orange": "#ff8f57",
+  "color-cambio-tan": "#ffb47d",
+  "color-cambio-cream": "#fffad1",
+  "color-cambio-purple": "#6840a8",
+  "color-cambio-lilac": "#b59ef0",
+  "color-cambio-thistle": "#d69ca4",
+  "color-cambio-pink": "#ffccea",
+  "color-cambio-navy": "#191142",
+  "color-cambio-teal": "#44a6cf",
+  "color-cambio-slate": "#7c9fc6",
+  "color-cambio-sky": "#b1e8fc",
+  "color-cambio-yellow-700": "#ffe733",
+  "color-cambio-transparent-full": "rgba(0, 0, 0, 0)",
+  "elevation-400": "0px 16px 32px 0px #00000040"
+};
+
+// src/ThemeProvider/ThemeProvider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ThemeContext = React.createContext({
+  themeName: "classic"
+});
+ThemeContext.displayName = "ThemeContext";
+var classicToCambioKeyLookup = {
+  "color-base-black": "color-cambio-black",
+  "color-base-destructive-100": "color-cambio-destructive-100",
+  "color-base-destructive-200": void 0,
+  // Deprecated - to be deleted
+  "color-base-destructive-300": "color-cambio-destructive-300",
+  "color-base-destructive-700": "color-cambio-destructive-700",
+  "color-base-destructive-800": void 0,
+  // Deprecated - to be deleted
+  "color-base-destructive-900": "color-cambio-destructive-900",
+  "color-base-gray-10": "color-cambio-gray-370",
+  "color-base-gray-30": "color-cambio-gray-370",
+  "color-base-gray-60": "color-cambio-gray-870",
+  "color-base-gray-80": "color-cambio-gray-870",
+  "color-base-gray-100": "color-cambio-gray-100",
+  "color-base-gray-200": "color-cambio-gray-200",
+  "color-base-gray-300": "color-cambio-gray-300",
+  "color-base-gray-700": "color-cambio-gray-700",
+  "color-base-gray-800": "color-cambio-gray-800",
+  "color-base-gray-900": "color-cambio-gray-900",
+  "color-base-orange-100": void 0,
+  // Deprecated - to be deleted
+  "color-base-orange-200": void 0,
+  // Deprecated - to be deleted
+  "color-base-orange-300": void 0,
+  // Deprecated - to be deleted
+  "color-base-orange-700": "color-cambio-orange",
+  "color-base-orange-800": void 0,
+  // Deprecated - to be deleted
+  "color-base-orange-900": void 0,
+  // Deprecated - to be deleted
+  "color-base-primary-100": "color-cambio-gray-100",
+  "color-base-primary-200": "color-cambio-gray-200",
+  "color-base-primary-300": "color-cambio-gray-300",
+  "color-base-primary-700": "color-cambio-gray-700",
+  "color-base-primary-800": "color-cambio-gray-800",
+  "color-base-primary-900": "color-cambio-gray-900",
+  "color-base-success-100": "color-cambio-success-100",
+  "color-base-success-200": void 0,
+  // Deprecated - to be deleted
+  "color-base-success-300": "color-cambio-success-300",
+  "color-base-success-700": "color-cambio-success-700",
+  "color-base-success-800": void 0,
+  // Deprecated - to be deleted
+  "color-base-success-900": "color-cambio-success-900",
+  "color-base-purple-100": void 0,
+  // Deprecated - to be deleted
+  "color-base-purple-200": void 0,
+  // Deprecated - to be deleted
+  "color-base-purple-300": void 0,
+  // Deprecated - to be deleted
+  "color-base-purple-700": "color-cambio-purple",
+  "color-base-purple-800": void 0,
+  // Deprecated - to be deleted
+  "color-base-purple-900": void 0,
+  // Deprecated - to be deleted
+  "color-base-yellow-100": void 0,
+  // Deprecated - to be deleted
+  "color-base-yellow-200": void 0,
+  // Deprecated - to be deleted
+  "color-base-yellow-300": void 0,
+  // Deprecated - to be deleted
+  "color-base-yellow-700": "color-cambio-yellow-700",
+  "color-base-yellow-800": void 0,
+  // Deprecated - to be deleted
+  "color-base-yellow-900": void 0,
+  // Deprecated - to be deleted
+  "color-base-white": "color-cambio-white"
+};
+function stylesForTheme(themeName) {
+  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]) {
+      return [
+        key,
+        tokenVariables[
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          classicToCambioKeyLookup[key]
+        ]
+      ];
+    }
+    return [key, value];
+  }).map(([key, value]) => `--${key}: ${value};`).join("\n")}
+    }
+  `;
+}
+function ThemeProvider({
+  themeName = "classic",
+  children
+}) {
+  const value = useMemo(() => ({ themeName }), [themeName]);
+  const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]);
+  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: innerStyles },
+        "data-testid": "themeprovider-style"
+      }
+    ),
+    children
+  ] });
+}
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+
+export {
+  ThemeProvider,
+  useTheme
+};
+//# sourceMappingURL=HVGUWZ5I.js.map