@cambly/syntax-core 10.10.0 → 10.12.0

package/dist/__chunks/{6QHOCICX.cjs → EMWRSUWK.cjs}

@@ -5,13 +5,19 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _AGHYI7QRcjs = require('./AGHYI7QR.cjs');
+var _LISQ2P5Fcjs = require('./LISQ2P5F.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
+
+
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -27,7 +33,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_3ifov_1", "opacityOverlay": "_opacityOverlay_3ifov_7", "outerTextContainer": "_outerTextContainer_3ifov_11", "selectWrapper": "_selectWrapper_3ifov_16", "selectBox": "_selectBox_3ifov_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_3ifov_37", "unselected": "_unselected_3ifov_42", "selected": "_selected_3ifov_46", "arrowIcon": "_arrowIcon_3ifov_50", "sm": "_sm_3ifov_64", "md": "_md_3ifov_70", "lg": "_lg_3ifov_76", "selectError": "_selectError_3ifov_82" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_plzrz_1", "selectContainerCambio": "_selectContainerCambio_plzrz_7", "opacityOverlay": "_opacityOverlay_plzrz_11", "labelCambio": "_labelCambio_plzrz_15", "selectWrapper": "_selectWrapper_plzrz_26", "selectBox": "_selectBox_plzrz_31", "selectBoxClassic": "_selectBoxClassic_plzrz_45", "selectBoxCambio": "_selectBoxCambio_plzrz_50", "selectMouseFocusStyling": "_selectMouseFocusStyling_plzrz_58", "unselected": "_unselected_plzrz_63", "selected": "_selected_plzrz_67", "arrowIcon": "_arrowIcon_plzrz_71", "sm": "_sm_plzrz_85", "md": "_md_plzrz_91", "lg": "_lg_plzrz_97", "selectError": "_selectError_plzrz_103", "selectErrorCambio": "_selectErrorCambio_plzrz_109" };
 
 // src/SelectList/SelectList.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -53,6 +59,7 @@ function SelectList({
   const reactId = _react.useId.call(void 0, );
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
+  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
   const selectId = id != null ? id : reactId;
   const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
   const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
@@ -60,10 +67,18 @@ function SelectList({
     "div",
     {
       className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled
+        [SelectList_module_default.opacityOverlay]: disabled,
+        [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "label",
+          {
+            htmlFor: selectId,
+            className: _classnames2.default.call(void 0, themeName === "cambio" && SelectList_module_default.labelCambio),
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WGRHH5TFcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
+          }
+        ),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "select",
@@ -71,15 +86,20 @@ function SelectList({
               id: selectId,
               "data-testid": dataTestId,
               disabled,
-              className: _classnames2.default.call(void 0, SelectList_module_default.selectBox, SelectList_module_default[size], {
-                [SelectList_module_default.unselected]: !selectedValue && !errorText,
-                [SelectList_module_default.selected]: selectedValue && !errorText,
-                [SelectList_module_default.selectError]: errorText,
-                [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-                // for focus keyboard
-                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
-                // for focus mouse
-              }),
+              className: _classnames2.default.call(void 0, 
+                SelectList_module_default.selectBox,
+                themeName === "classic" ? SelectList_module_default.selectBoxClassic : SelectList_module_default.selectBoxCambio,
+                themeName === "classic" && SelectList_module_default[size],
+                {
+                  [SelectList_module_default.unselected]: !selectedValue && !errorText,
+                  [SelectList_module_default.selected]: selectedValue && !errorText,
+                  [themeName === "classic" ? SelectList_module_default.selectError : SelectList_module_default.selectErrorCambio]: errorText,
+                  [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
+                  // for focus keyboard
+                  [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
+                  // for focus mouse
+                }
+              ),
               onChange,
               onClick,
               value: placeholderText && !selectedValue ? placeholderText : selectedValue,
@@ -97,19 +117,19 @@ function SelectList({
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
-              width: iconSize[size],
+              width: themeName === "classic" ? iconSize[size] : 24,
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _AGHYI7QRcjs.ColorBaseDestructive700 : _AGHYI7QRcjs.ColorBaseGray800,
+                  fill: errorText ? _LISQ2P5Fcjs.ColorBaseDestructive700 : _LISQ2P5Fcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _X6HZ6DM2cjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _WGRHH5TFcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -125,4 +145,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=6QHOCICX.cjs.map
+//# sourceMappingURL=EMWRSUWK.cjs.map

package/dist/__chunks/EMWRSUWK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n        [styles.selectContainerCambio]: themeName === \"cambio\",\n      })}\n    >\n      {label && (\n        <label\n          htmlFor={selectId}\n          className={classNames(themeName === \"cambio\" && styles.labelCambio)}\n        >\n          <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_plzrz_1\",\"selectContainerCambio\":\"_selectContainerCambio_plzrz_7\",\"opacityOverlay\":\"_opacityOverlay_plzrz_11\",\"labelCambio\":\"_labelCambio_plzrz_15\",\"selectWrapper\":\"_selectWrapper_plzrz_26\",\"selectBox\":\"_selectBox_plzrz_31\",\"selectBoxClassic\":\"_selectBoxClassic_plzrz_45\",\"selectBoxCambio\":\"_selectBoxCambio_plzrz_50\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_plzrz_58\",\"unselected\":\"_unselected_plzrz_63\",\"selected\":\"_selected_plzrz_67\",\"arrowIcon\":\"_arrowIcon_plzrz_71\",\"sm\":\"_sm_plzrz_85\",\"md\":\"_md_plzrz_91\",\"lg\":\"_lg_plzrz_97\",\"selectError\":\"_selectError_plzrz_103\",\"selectErrorCambio\":\"_selectErrorCambio_plzrz_109\"}"]}

package/dist/__chunks/{D7NNCQKN.cjs → FBF2R2FE.cjs}

@@ -3,35 +3,35 @@
 
 
 
-var _6SALMOFUcjs = require('./6SALMOFU.cjs');
+var _TYEKVH5Dcjs = require('./TYEKVH5D.cjs');
 
 
-var _WEIWUACWcjs = require('./WEIWUACW.cjs');
+var _VJKUE3B4cjs = require('./VJKUE3B4.cjs');
 
 
-var _NYOKOJQBcjs = require('./NYOKOJQB.cjs');
+var _BXUTWPRUcjs = require('./BXUTWPRU.cjs');
 
 
-var _ULMCQ7EAcjs = require('./ULMCQ7EA.cjs');
+var _VL5ONCQDcjs = require('./VL5ONCQD.cjs');
 
 
-var _DKBI6MRYcjs = require('./DKBI6MRY.cjs');
+var _UKLQ64N7cjs = require('./UKLQ64N7.cjs');
 
 
 
-var _AGHYI7QRcjs = require('./AGHYI7QR.cjs');
+var _LISQ2P5Fcjs = require('./LISQ2P5F.cjs');
 
 
-var _IYA2TMMRcjs = require('./IYA2TMMR.cjs');
+var _NFDOY7GEcjs = require('./NFDOY7GE.cjs');
 
 
-var _YT3NEG6Zcjs = require('./YT3NEG6Z.cjs');
+var _VJ2AFMKOcjs = require('./VJ2AFMKO.cjs');
 
 
-var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -55,7 +55,7 @@ var _utils = require('@react-stately/utils');
 var _interactions = require('@react-aria/interactions');
 
 // css-module:../SelectList/SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_3ifov_1", "opacityOverlay": "_opacityOverlay_3ifov_7", "outerTextContainer": "_outerTextContainer_3ifov_11", "selectWrapper": "_selectWrapper_3ifov_16", "selectBox": "_selectBox_3ifov_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_3ifov_37", "unselected": "_unselected_3ifov_42", "selected": "_selected_3ifov_46", "arrowIcon": "_arrowIcon_3ifov_50", "sm": "_sm_3ifov_64", "md": "_md_3ifov_70", "lg": "_lg_3ifov_76", "selectError": "_selectError_3ifov_82" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_plzrz_1", "selectContainerCambio": "_selectContainerCambio_plzrz_7", "opacityOverlay": "_opacityOverlay_plzrz_11", "labelCambio": "_labelCambio_plzrz_15", "selectWrapper": "_selectWrapper_plzrz_26", "selectBox": "_selectBox_plzrz_31", "selectBoxClassic": "_selectBoxClassic_plzrz_45", "selectBoxCambio": "_selectBoxCambio_plzrz_50", "selectMouseFocusStyling": "_selectMouseFocusStyling_plzrz_58", "unselected": "_unselected_plzrz_63", "selected": "_selected_plzrz_67", "arrowIcon": "_arrowIcon_plzrz_71", "sm": "_sm_plzrz_85", "md": "_md_plzrz_91", "lg": "_lg_plzrz_97", "selectError": "_selectError_plzrz_103", "selectErrorCambio": "_selectErrorCambio_plzrz_109" };
 
 // src/RichSelect/RichSelectList.tsx
 var _reactaria = require('react-aria');
@@ -102,11 +102,11 @@ function RichSelectList(props) {
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _6SALMOFUcjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _TYEKVH5Dcjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _6SALMOFUcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _TYEKVH5Dcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -144,8 +144,8 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_6SALMOFUcjs.RichSelectBoxContext, { autoFocus: true }],
-        [_ULMCQ7EAcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
+        [_TYEKVH5Dcjs.RichSelectBoxContext, { autoFocus: true }],
+        [_VL5ONCQDcjs.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, 
@@ -171,11 +171,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, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WGRHH5TFcjs.Typography_default, { size: 100, color: "gray700", children: label })
               })
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _NYOKOJQBcjs.Popover_default,
+              _BXUTWPRUcjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -183,12 +183,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, 
-                    _WJRIAS4Wcjs.Box_default,
+                    _27K33DEMcjs.Box_default,
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _6SALMOFUcjs.RichSelectBox_default,
+                        _TYEKVH5Dcjs.RichSelectBox_default,
                         _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
@@ -203,7 +203,7 @@ function RichSelectList(props) {
                   )
                 ),
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _DKBI6MRYcjs.TapArea_default,
+                  _UKLQ64N7cjs.TapArea_default,
                   _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                     "data-testid": dataTestId,
                     disabled,
@@ -233,7 +233,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _AGHYI7QRcjs.ColorBaseDestructive700 : _AGHYI7QRcjs.ColorBaseGray800,
+                              fill: errorText ? _LISQ2P5Fcjs.ColorBaseDestructive700 : _LISQ2P5Fcjs.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"
                             }
                           )
@@ -245,7 +245,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, 
-              _X6HZ6DM2cjs.Typography_default,
+              _WGRHH5TFcjs.Typography_default,
               _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 size: 100,
                 color: errorText ? "destructive-primary" : "gray700"
@@ -260,12 +260,12 @@ function RichSelectList(props) {
   );
 }
 var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _IYA2TMMRcjs.RichSelectSection_default,
-  Chip: _WEIWUACWcjs.RichSelectChip_default,
-  RadioButton: _YT3NEG6Zcjs.RichSelectRadioButton_default
+  Section: _NFDOY7GEcjs.RichSelectSection_default,
+  Chip: _VJKUE3B4cjs.RichSelectChip_default,
+  RadioButton: _VJ2AFMKOcjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=D7NNCQKN.cjs.map
+//# sourceMappingURL=FBF2R2FE.cjs.map

package/dist/__chunks/FBF2R2FE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = Omit<\n  RichSelectBoxProps,\n  \"accessibilityLabel\"\n> & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n      >\n        <ReactAriaLabel\n          data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n          className={classNames(\n            styles.selectContainer,\n            styles.outerTextContainer,\n          )}\n          {...labelProps}\n          onClick={() => {\n            if (disabled) return;\n            fieldRef.current?.focus();\n            setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n          }}\n        >\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </ReactAriaLabel>\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          accessibilityLabel={label}\n          content={\n            // 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\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                accessibilityLabel={label}\n                {...richSelectBoxProps}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(styles.selectBox, styles[size], {\n                  [styles.unselected]:\n                    !errorText && selectedKeys !== \"all\" && !selectedKeys.size,\n                  [styles.selected]:\n                    !errorText && (selectedKeys === \"all\" || selectedKeys.size),\n                  [styles.selectError]: errorText,\n                })}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={iconSize[size]}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <div className={styles.outerTextContainer}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </div>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_plzrz_1\",\"selectContainerCambio\":\"_selectContainerCambio_plzrz_7\",\"opacityOverlay\":\"_opacityOverlay_plzrz_11\",\"labelCambio\":\"_labelCambio_plzrz_15\",\"selectWrapper\":\"_selectWrapper_plzrz_26\",\"selectBox\":\"_selectBox_plzrz_31\",\"selectBoxClassic\":\"_selectBoxClassic_plzrz_45\",\"selectBoxCambio\":\"_selectBoxCambio_plzrz_50\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_plzrz_58\",\"unselected\":\"_unselected_plzrz_63\",\"selected\":\"_selected_plzrz_67\",\"arrowIcon\":\"_arrowIcon_plzrz_71\",\"sm\":\"_sm_plzrz_85\",\"md\":\"_md_plzrz_91\",\"lg\":\"_lg_plzrz_97\",\"selectError\":\"_selectError_plzrz_103\",\"selectErrorCambio\":\"_selectErrorCambio_plzrz_109\"}"]}

package/dist/__chunks/FWQWL53Q.js

@@ -0,0 +1,29 @@
+"use client"
+import {
+  colors_module_default
+} from "./JHJZ5COD.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
+
+// css-module:./Divider.module.css#css-module
+var Divider_module_default = { "divider": "_divider_1uaon_1", "dividerClassic": "_dividerClassic_1uaon_9" };
+
+// src/Divider/Divider.tsx
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+function Divider() {
+  const { themeName } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: themeName === "classic" ? classNames(Divider_module_default.divider, Divider_module_default.dividerClassic) : classNames(Divider_module_default.divider, colors_module_default.cambioGray370BackgroundColor)
+    }
+  );
+}
+Divider.displayName = "Divider";
+
+export {
+  Divider
+};
+//# sourceMappingURL=FWQWL53Q.js.map

package/dist/__chunks/FWQWL53Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1uaon_1\",\"dividerClassic\":\"_dividerClassic_1uaon_9\"}","import { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport styles from \"./Divider.module.css\";\nimport classNames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  const { themeName } = useTheme();\n  return (\n    <hr\n      className={\n        themeName === \"classic\"\n          ? classNames(styles.divider, styles.dividerClassic)\n          : classNames(styles.divider, colorStyles.cambioGray370BackgroundColor)\n      }\n    />\n  );\n}\n\nDivider.displayName = \"Divider\";\n"],"mappings":";;;;;;;;;AAA8F,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,kBAAiB,0BAAyB;;;ACErL,OAAO,gBAAgB;AASnB;AAHW,SAAR,UAA+C;AACpD,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WACE,cAAc,YACV,WAAW,uBAAO,SAAS,uBAAO,cAAc,IAChD,WAAW,uBAAO,SAAS,sBAAY,4BAA4B;AAAA;AAAA,EAE3E;AAEJ;AAEA,QAAQ,cAAc;","names":[]}

package/dist/__chunks/{RN3PLPAG.js → FY4WHNNR.js}

@@ -101,12 +101,10 @@ 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-200": "color-cambio-destructive-300",
   "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-800": "color-cambio-destructive-900",
   "color-base-destructive-900": "color-cambio-destructive-900",
   "color-base-gray-10": "color-cambio-gray-370",
   "color-base-gray-30": "color-cambio-gray-370",
@@ -136,12 +134,10 @@ var classicToCambioKeyLookup = {
   "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-200": "color-cambio-success-300",
   "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-800": "color-cambio-success-900",
   "color-base-success-900": "color-cambio-success-900",
   "color-base-purple-100": void 0,
   // Deprecated - to be deleted
@@ -216,4 +212,4 @@ export {
   ThemeProvider,
   useTheme
 };
-//# sourceMappingURL=RN3PLPAG.js.map
+//# sourceMappingURL=FY4WHNNR.js.map

package/dist/__chunks/FY4WHNNR.js.map

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

package/dist/__chunks/{JQGCEUQE.cjs → GBZPZQPJ.cjs}

@@ -4,7 +4,13 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
+
+
+var _X2LNODY7cjs = require('./X2LNODY7.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -17,7 +23,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "mainContainer": "_mainContainer_an7al_1", "inputOverlay": "_inputOverlay_an7al_9", "checkbox": "_checkbox_an7al_17", "disabled": "_disabled_an7al_25", "cursorDisabled": "_cursorDisabled_an7al_29", "cursorEnabled": "_cursorEnabled_an7al_33", "uncheckedBox": "_uncheckedBox_an7al_37", "uncheckedBorder": "_uncheckedBorder_an7al_41", "uncheckedErrorBorder": "_uncheckedErrorBorder_an7al_45", "checkedBox": "_checkedBox_an7al_49", "checkedNonError": "_checkedNonError_an7al_53", "checkedError": "_checkedError_an7al_57", "sm": "_sm_an7al_61", "md": "_md_an7al_67" };
+var Checkbox_module_default = { "mainContainer": "_mainContainer_1m96p_1", "inputOverlay": "_inputOverlay_1m96p_9", "checkbox": "_checkbox_1m96p_17", "cambioCheckbox": "_cambioCheckbox_1m96p_25", "disabled": "_disabled_1m96p_29", "cursorDisabled": "_cursorDisabled_1m96p_33", "cursorEnabled": "_cursorEnabled_1m96p_37", "uncheckedBox": "_uncheckedBox_1m96p_41", "uncheckedBorder": "_uncheckedBorder_1m96p_45", "uncheckedErrorBorder": "_uncheckedErrorBorder_1m96p_49", "checkedBox": "_checkedBox_1m96p_53", "checkedNonError": "_checkedNonError_1m96p_57", "checkedError": "_checkedError_1m96p_61", "sm": "_sm_1m96p_65", "md": "_md_1m96p_70", "smBorderRadius": "_smBorderRadius_1m96p_75", "mdBorderRadius": "_mdBorderRadius_1m96p_79" };
 
 // src/Checkbox/Checkbox.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -38,21 +44,31 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
+  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
   const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
   const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
-  const checkboxStyling = _classnames2.default.call(void 0, Checkbox_module_default.checkbox, Checkbox_module_default[size]);
-  const uncheckedStyling = _classnames2.default.call(void 0, checkboxStyling, Checkbox_module_default.uncheckedBox, {
-    [Checkbox_module_default.uncheckedBorder]: !error,
-    [Checkbox_module_default.uncheckedErrorBorder]: error,
+  const checkboxStyling = _classnames2.default.call(void 0, Checkbox_module_default.checkbox, Checkbox_module_default[size], {
     [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
   });
-  const checkedStyling = _classnames2.default.call(void 0, checkboxStyling, Checkbox_module_default.checkedBox, {
+  const classicCheckboxStyling = _classnames2.default.call(void 0, 
+    checkboxStyling,
+    Checkbox_module_default[`${size}BorderRadius`]
+  );
+  const cambioCheckboxStyling = _classnames2.default.call(void 0, 
+    checkboxStyling,
+    Checkbox_module_default.cambioCheckbox,
+    error ? _X2LNODY7cjs.colors_module_default.cambioDestructive370BackgroundColor : _X2LNODY7cjs.colors_module_default.cambioGray370BackgroundColor
+  );
+  const uncheckedStyling = themeName === "classic" ? _classnames2.default.call(void 0, classicCheckboxStyling, Checkbox_module_default.uncheckedBox, {
+    [Checkbox_module_default.uncheckedBorder]: !error,
+    [Checkbox_module_default.uncheckedErrorBorder]: error
+  }) : cambioCheckboxStyling;
+  const checkedStyling = themeName === "classic" ? _classnames2.default.call(void 0, classicCheckboxStyling, Checkbox_module_default.checkedBox, {
     [Checkbox_module_default.checkedNonError]: !error,
-    [Checkbox_module_default.checkedError]: error,
-    [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
-  });
+    [Checkbox_module_default.checkedError]: error
+  }) : cambioCheckboxStyling;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "label",
     {
@@ -67,7 +83,7 @@ var Checkbox = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "path",
           {
-            fill: "#fff",
+            fill: themeName === "classic" ? "#fff" : "#050500",
             d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
           }
         ) }) }),
@@ -93,7 +109,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _X6HZ6DM2cjs.Typography_default,
+          _WGRHH5TFcjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray900",
@@ -109,4 +125,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=JQGCEUQE.cjs.map
+//# sourceMappingURL=GBZPZQPJ.cjs.map

package/dist/__chunks/GBZPZQPJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const { themeName } = useTheme();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const checkboxStyling = classNames(styles.checkbox, styles[size], {\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n\n  const classicCheckboxStyling = classNames(\n    checkboxStyling,\n    styles[`${size}BorderRadius`],\n  );\n\n  const cambioCheckboxStyling = classNames(\n    checkboxStyling,\n    styles.cambioCheckbox,\n    error\n      ? colorStyles.cambioDestructive370BackgroundColor\n      : colorStyles.cambioGray370BackgroundColor,\n  );\n\n  const uncheckedStyling =\n    themeName === \"classic\"\n      ? classNames(classicCheckboxStyling, styles.uncheckedBox, {\n          [styles.uncheckedBorder]: !error,\n          [styles.uncheckedErrorBorder]: error,\n        })\n      : cambioCheckboxStyling;\n  const checkedStyling =\n    themeName === \"classic\"\n      ? classNames(classicCheckboxStyling, styles.checkedBox, {\n          [styles.checkedNonError]: !error,\n          [styles.checkedError]: error,\n        })\n      : cambioCheckboxStyling;\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div className={checked ? checkedStyling : uncheckedStyling}>\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill={themeName === \"classic\" ? \"#fff\" : \"#050500\"}\n              d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1m96p_1\",\"inputOverlay\":\"_inputOverlay_1m96p_9\",\"checkbox\":\"_checkbox_1m96p_17\",\"cambioCheckbox\":\"_cambioCheckbox_1m96p_25\",\"disabled\":\"_disabled_1m96p_29\",\"cursorDisabled\":\"_cursorDisabled_1m96p_33\",\"cursorEnabled\":\"_cursorEnabled_1m96p_37\",\"uncheckedBox\":\"_uncheckedBox_1m96p_41\",\"uncheckedBorder\":\"_uncheckedBorder_1m96p_45\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_1m96p_49\",\"checkedBox\":\"_checkedBox_1m96p_53\",\"checkedNonError\":\"_checkedNonError_1m96p_57\",\"checkedError\":\"_checkedError_1m96p_61\",\"sm\":\"_sm_1m96p_65\",\"md\":\"_md_1m96p_70\",\"smBorderRadius\":\"_smBorderRadius_1m96p_75\",\"mdBorderRadius\":\"_mdBorderRadius_1m96p_79\"}"]}