@cambly/syntax-core 10.11.0 → 10.13.0

package/dist/__chunks/{ZBDW45GJ.js → G7GMDR6I.js}

@@ -5,13 +5,19 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./XFP4MBWD.js";
+} from "./EE5VI7K5.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
+import {
+  Box_default
+} from "./YGKZCJF5.js";
 import {
   Typography_default
-} from "./L7PPCZM5.js";
+} from "./2A52YKFW.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -27,7 +33,7 @@ import {
 import classNames from "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_1o5o7_1", "selectContainerCambio": "_selectContainerCambio_1o5o7_7", "opacityOverlay": "_opacityOverlay_1o5o7_11", "labelCambio": "_labelCambio_1o5o7_15", "selectWrapper": "_selectWrapper_1o5o7_26", "selectBox": "_selectBox_1o5o7_31", "selectBoxClassic": "_selectBoxClassic_1o5o7_47", "selectBoxCambio": "_selectBoxCambio_1o5o7_52", "selectMouseFocusStyling": "_selectMouseFocusStyling_1o5o7_60", "unselected": "_unselected_1o5o7_65", "selected": "_selected_1o5o7_69", "arrowIcon": "_arrowIcon_1o5o7_73", "sm": "_sm_1o5o7_87", "md": "_md_1o5o7_93", "lg": "_lg_1o5o7_99", "selectError": "_selectError_1o5o7_105", "selectErrorCambio": "_selectErrorCambio_1o5o7_111" };
 
 // src/SelectList/SelectList.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -53,6 +59,7 @@ function SelectList({
   const reactId = useId();
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
+  const { themeName } = useTheme();
   const selectId = id != null ? id : reactId;
   const { isFocusVisible } = useFocusVisible();
   const [isFocused, setIsFocused] = useState(false);
@@ -60,10 +67,18 @@ function SelectList({
     "div",
     {
       className: classNames(SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled
+        [SelectList_module_default.opacityOverlay]: disabled,
+        [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
       }),
       children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: selectId,
+            className: classNames(themeName === "cambio" && SelectList_module_default.labelCambio),
+            children: /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) })
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ jsxs(
             "select",
@@ -71,15 +86,20 @@ function SelectList({
               id: selectId,
               "data-testid": dataTestId,
               disabled,
-              className: classNames(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,
-                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-                // for focus keyboard
-                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
-                // for focus mouse
-              }),
+              className: classNames(
+                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,
+                  [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,7 +117,7 @@ function SelectList({
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
-              width: iconSize[size],
+              width: themeName === "classic" ? iconSize[size] : 24,
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
@@ -108,7 +128,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ jsx("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx(
+        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ jsx(
           Typography_default,
           {
             size: 100,
@@ -125,4 +145,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=ZBDW45GJ.js.map
+//# sourceMappingURL=G7GMDR6I.js.map

package/dist/__chunks/G7GMDR6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"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_1o5o7_1\",\"selectContainerCambio\":\"_selectContainerCambio_1o5o7_7\",\"opacityOverlay\":\"_opacityOverlay_1o5o7_11\",\"labelCambio\":\"_labelCambio_1o5o7_15\",\"selectWrapper\":\"_selectWrapper_1o5o7_26\",\"selectBox\":\"_selectBox_1o5o7_31\",\"selectBoxClassic\":\"_selectBoxClassic_1o5o7_47\",\"selectBoxCambio\":\"_selectBoxCambio_1o5o7_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1o5o7_60\",\"unselected\":\"_unselected_1o5o7_65\",\"selected\":\"_selected_1o5o7_69\",\"arrowIcon\":\"_arrowIcon_1o5o7_73\",\"sm\":\"_sm_1o5o7_87\",\"md\":\"_md_1o5o7_93\",\"lg\":\"_lg_1o5o7_99\",\"selectError\":\"_selectError_1o5o7_105\",\"selectErrorCambio\":\"_selectErrorCambio_1o5o7_111\"}"],"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\"}"]}

package/dist/__chunks/{6DRTKEXK.cjs → GPW7ICYP.cjs}

@@ -4,7 +4,16 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
+
+
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
+
+
+var _X2LNODY7cjs = require('./X2LNODY7.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -34,15 +43,27 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
+  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 sharedStyles = _classnames2.default.call(void 0, RadioButton_module_default.background, RadioButton_module_default[size], {
+  const classicStyles = _classnames2.default.call(void 0, RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
-    [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
+    [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles,
+    [RadioButton_module_default.mdCheckedBorder]: checked && size === "md",
+    [RadioButton_module_default.smCheckedBorder]: checked && size === "sm",
+    [RadioButton_module_default.neutralBorder]: !checked && size === "md"
   });
+  const cambioStyles = _classnames2.default.call(void 0, 
+    RadioButton_module_default.background,
+    error ? _X2LNODY7cjs.colors_module_default.cambioDestructive370BackgroundColor : _X2LNODY7cjs.colors_module_default.cambioGray370BackgroundColor,
+    RadioButton_module_default[size],
+    {
+      [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
+    }
+  );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "label",
     {
@@ -56,15 +77,22 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: themeName === "classic" ? classicStyles : cambioStyles }),
+        themeName === "cambio" && checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _27K33DEMcjs.Box_default,
           {
-            className: _classnames2.default.call(void 0, sharedStyles, {
-              [RadioButton_module_default.mdCheckedBorder]: size === "md",
-              [RadioButton_module_default.smCheckedBorder]: size === "sm"
-            })
+            backgroundColor: "gray900",
+            width: size === "md" ? 12 : 8,
+            height: size === "md" ? 12 : 8,
+            position: "absolute",
+            rounding: "full",
+            dangerouslySetInlineStyle: {
+              __style: {
+                left: size === "md" ? 6 : 4
+              }
+            }
           }
-        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _classnames2.default.call(void 0, sharedStyles, RadioButton_module_default.neutralBorder) }),
+        ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -93,7 +121,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _X6HZ6DM2cjs.Typography_default,
+          _WGRHH5TFcjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -109,4 +137,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=6DRTKEXK.cjs.map
+//# sourceMappingURL=GPW7ICYP.cjs.map

package/dist/__chunks/GPW7ICYP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: 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 classicStyles = classnames(styles.background, styles[size], {\n    [styles.errorBorderColor]: error,\n    [styles.borderColor]: !error,\n    [focusStyles.accessibilityOutlineFocus]:\n      (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n    [styles.mdCheckedBorder]: checked && size === \"md\",\n    [styles.smCheckedBorder]: checked && size === \"sm\",\n    [styles.neutralBorder]: !checked && size === \"md\",\n  });\n\n  const cambioStyles = classnames(\n    styles.background,\n    error\n      ? colorStyles.cambioDestructive370BackgroundColor\n      : colorStyles.cambioGray370BackgroundColor,\n    styles[size],\n    {\n      [focusStyles.accessibilityOutlineFocus]:\n        (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n    },\n  );\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n          [styles.smBase]: size === \"sm\",\n          [styles.mdBase]: size === \"md\",\n        },\n      )}\n    >\n      <div className={themeName === \"classic\" ? classicStyles : cambioStyles} />\n      {themeName === \"cambio\" && checked && (\n        <Box\n          backgroundColor=\"gray900\"\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"]}

package/dist/__chunks/{WYWNQJ3B.cjs → GRYQKIWR.cjs}

@@ -1,10 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -14,7 +17,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "chip": "_chip_kwro3_1", "disabled": "_disabled_kwro3_13", "selectedChip": "_selectedChip_kwro3_18", "icon": "_icon_kwro3_23", "selectedIcon": "_selectedIcon_kwro3_31", "sm": "_sm_kwro3_35", "lg": "_lg_kwro3_41", "forceFocus": "_forceFocus_kwro3_48" };
+var Chip_module_default = { "chip": "_chip_1jp9s_1", "chipClassic": "_chipClassic_1jp9s_10", "chipCambio": "_chipCambio_1jp9s_15", "disabled": "_disabled_1jp9s_20", "deselectedChip": "_deselectedChip_1jp9s_25", "selectedChip": "_selectedChip_1jp9s_29", "deselectedChipCambio": "_deselectedChipCambio_1jp9s_34", "selectedChipCambio": "_selectedChipCambio_1jp9s_38", "icon": "_icon_1jp9s_42", "selectedIcon": "_selectedIcon_1jp9s_50", "sm": "_sm_1jp9s_54", "lg": "_lg_1jp9s_60", "forceFocus": "_forceFocus_1jp9s_67" };
 
 // src/Chip/Chip.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -29,13 +32,21 @@ var Chip = _react.forwardRef.call(void 0,
     icon: Icon,
     dangerouslyForceFocusStyles
   }, ref) => {
+    const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+    const transformedSize = themeName === "cambio" ? "sm" : size;
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
-    const chipStyles = _classnames2.default.call(void 0, Chip_module_default.chip, Chip_module_default[size], {
-      [Chip_module_default.selectedChip]: selected,
-      [Chip_module_default.disabled]: disabled,
-      [Chip_module_default.forceFocus]: dangerouslyForceFocusStyles
-    });
+    const chipStyles = _classnames2.default.call(void 0, 
+      Chip_module_default.chip,
+      themeName === "classic" ? Chip_module_default.chipClassic : Chip_module_default.chipCambio,
+      Chip_module_default[transformedSize],
+      {
+        [themeName === "classic" ? Chip_module_default.selectedChip : Chip_module_default.selectedChipCambio]: selected,
+        [themeName === "classic" ? Chip_module_default.deselectedChip : Chip_module_default.deselectedChipCambio]: !selected,
+        [Chip_module_default.disabled]: disabled,
+        [Chip_module_default.forceFocus]: dangerouslyForceFocusStyles
+      }
+    );
     const iconStyles = _classnames2.default.call(void 0, Chip_module_default.icon, {
       [Chip_module_default.selectedIcon]: selected
     });
@@ -55,10 +66,10 @@ var Chip = _react.forwardRef.call(void 0,
         onClick: onChange,
         children: [
           Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _X6HZ6DM2cjs.Typography_default,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _WGRHH5TFcjs.Typography_default,
             {
-              size: typographySize[size],
+              size: themeName === "classic" ? typographySize[transformedSize] : 100,
               color: selected ? "white" : "gray900",
               children: text
             }
@@ -74,4 +85,4 @@ var Chip_default = Chip;
 
 
 exports.Chip_default = Chip_default;
-//# sourceMappingURL=WYWNQJ3B.cjs.map
+//# sourceMappingURL=GRYQKIWR.cjs.map

package/dist/__chunks/GRYQKIWR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,eAAc,yBAAwB,cAAa,wBAAuB,YAAW,sBAAqB,kBAAiB,4BAA2B,gBAAe,0BAAyB,wBAAuB,kCAAiC,sBAAqB,gCAA+B,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADmG9iB,SASW,KATX;AA3CN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,UAAM,kBAAkB,cAAc,WAAW,OAAO;AACxD,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,aAAa;AAAA,MACjB,oBAAO;AAAA,MACP,cAAc,YAAY,oBAAO,cAAc,oBAAO;AAAA,MACtD,oBAAO,eAAe;AAAA,MACtB;AAAA,QACE,CAAC,cAAc,YACX,oBAAO,eACP,oBAAO,kBAAkB,GAAG;AAAA,QAChC,CAAC,cAAc,YACX,oBAAO,iBACP,oBAAO,oBAAoB,GAAG,CAAC;AAAA,QACnC,CAAC,oBAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,MACvB;AAAA,IACF;AACA,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MACE,cAAc,YAAY,eAAe,eAAe,IAAI;AAAA,cAE9D,OAAO,WAAW,UAAU;AAAA,cAE3B;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const { themeName } = useTheme();\n    const transformedSize = themeName === \"cambio\" ? \"sm\" : size;\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const chipStyles = classnames(\n      styles.chip,\n      themeName === \"classic\" ? styles.chipClassic : styles.chipCambio,\n      styles[transformedSize],\n      {\n        [themeName === \"classic\"\n          ? styles.selectedChip\n          : styles.selectedChipCambio]: selected,\n        [themeName === \"classic\"\n          ? styles.deselectedChip\n          : styles.deselectedChipCambio]: !selected,\n        [styles.disabled]: disabled,\n        [styles.forceFocus]: dangerouslyForceFocusStyles,\n      },\n    );\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n    const typographySize = {\n      [\"sm\"]: 200,\n      [\"lg\"]: 300,\n    } as const;\n\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography\n            size={\n              themeName === \"classic\" ? typographySize[transformedSize] : 100\n            }\n            color={selected ? \"white\" : \"gray900\"}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_1jp9s_1\",\"chipClassic\":\"_chipClassic_1jp9s_10\",\"chipCambio\":\"_chipCambio_1jp9s_15\",\"disabled\":\"_disabled_1jp9s_20\",\"deselectedChip\":\"_deselectedChip_1jp9s_25\",\"selectedChip\":\"_selectedChip_1jp9s_29\",\"deselectedChipCambio\":\"_deselectedChipCambio_1jp9s_34\",\"selectedChipCambio\":\"_selectedChipCambio_1jp9s_38\",\"icon\":\"_icon_1jp9s_42\",\"selectedIcon\":\"_selectedIcon_1jp9s_50\",\"sm\":\"_sm_1jp9s_54\",\"lg\":\"_lg_1jp9s_60\",\"forceFocus\":\"_forceFocus_1jp9s_67\"}"]}

package/dist/__chunks/{CJJAA2FD.cjs → H6JCVQBU.cjs}

@@ -8,4 +8,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=CJJAA2FD.cjs.map
+//# sourceMappingURL=H6JCVQBU.cjs.map

package/dist/__chunks/{CJJAA2FD.cjs.map → H6JCVQBU.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 08 Mar 2024 15:27:15 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 15 Mar 2024 23:32:01 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}

package/dist/__chunks/HMV2F4PF.js

@@ -0,0 +1,147 @@
+"use client"
+import {
+  useAvatarGroup
+} from "./UTSVZIEK.js";
+import {
+  Box_default
+} from "./YGKZCJF5.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
+import {
+  __spreadValues
+} from "./UWGNJENA.js";
+
+// src/Avatar/Avatar.tsx
+import classNames from "classnames";
+
+// css-module:./Avatar.module.css#css-module
+var Avatar_module_default = { "avatar": "_avatar_1rbb4_1", "avatarImage": "_avatarImage_1rbb4_5", "avatarImageClassic": "_avatarImageClassic_1rbb4_13", "avatarImageOutlineCambio": "_avatarImageOutlineCambio_1rbb4_17", "sm": "_sm_1rbb4_21", "md": "_md_1rbb4_26", "lg": "_lg_1rbb4_31", "xl": "_xl_1rbb4_36", "smCambio": "_smCambio_1rbb4_41", "mdCambio": "_mdCambio_1rbb4_46", "lgCambio": "_lgCambio_1rbb4_51", "xlCambio": "_xlCambio_1rbb4_56" };
+
+// src/Avatar/Avatar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeToIconStyles = {
+  sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
+  md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },
+  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },
+  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 }
+};
+var sizeToMarginClassic = {
+  sm: -16,
+  md: -28,
+  lg: -48,
+  xl: -88
+};
+var sizeToMarginCambio = {
+  sm: -12,
+  md: -20,
+  lg: -28,
+  xl: -28
+};
+function AvatarInternal({
+  accessibilityLabel,
+  icon,
+  outline,
+  size = "md",
+  src
+}) {
+  const { themeName } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        Avatar_module_default.avatar,
+        themeName === "classic" ? Avatar_module_default[size] : Avatar_module_default[`${size}Cambio`]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: accessibilityLabel,
+            src,
+            className: classNames(
+              Avatar_module_default.avatarImage,
+              themeName === "classic" && Avatar_module_default.avatarImageClassic,
+              themeName === "cambio" && outline && Avatar_module_default.avatarImageOutlineCambio,
+              themeName === "classic" ? Avatar_module_default[size] : Avatar_module_default[`${size}Cambio`]
+            )
+          }
+        ),
+        icon && /* @__PURE__ */ jsx(Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ jsx(
+          Box_default,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "absolute",
+            backgroundColor: "white",
+            dangerouslySetInlineStyle: {
+              __style: __spreadValues({
+                border: "1px solid white"
+              }, sizeToIconStyles[size])
+            },
+            rounding: "full",
+            children: icon
+          }
+        ) })
+      ]
+    }
+  );
+}
+var Avatar = ({
+  accessibilityLabel,
+  icon,
+  size = "md",
+  src
+}) => {
+  const avatarGroupContext = useAvatarGroup();
+  const { themeName } = useTheme();
+  if (avatarGroupContext !== null) {
+    return /* @__PURE__ */ jsx(
+      Box_default,
+      {
+        position: "relative",
+        dangerouslySetInlineStyle: {
+          __style: {
+            marginInlineEnd: themeName === "cambio" ? sizeToMarginCambio[avatarGroupContext.size] : sizeToMarginClassic[avatarGroupContext.size]
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Box_default,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "white",
+            rounding: "full",
+            children: /* @__PURE__ */ jsx(
+              AvatarInternal,
+              {
+                accessibilityLabel,
+                icon,
+                outline: themeName === "cambio",
+                size: avatarGroupContext.size,
+                src
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    AvatarInternal,
+    {
+      accessibilityLabel,
+      icon,
+      size,
+      src
+    }
+  );
+};
+var Avatar_default = Avatar;
+
+export {
+  Avatar_default
+};
+//# sourceMappingURL=HMV2F4PF.js.map