@cambly/syntax-core 10.16.0 → 10.17.0

package/dist/__chunks/{DE4RZUBC.js → ATVZZNGI.js}

@@ -5,7 +5,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./ONYVX4WU.js";
+} from "./JI7DLER5.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -14,7 +14,7 @@ import {
 } from "./KU5UT5RY.js";
 import {
   Typography_default
-} from "./M3US55ZU.js";
+} from "./2RIIE7CU.js";
 import {
   useTheme
 } from "./ZSHAHV4F.js";
@@ -33,7 +33,7 @@ import {
 import classNames from "classnames";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_hzvfu_1", "selectContainerCambio": "_selectContainerCambio_hzvfu_7", "opacityOverlay": "_opacityOverlay_hzvfu_11", "labelCambio": "_labelCambio_hzvfu_15", "selectWrapper": "_selectWrapper_hzvfu_26", "selectBox": "_selectBox_hzvfu_31", "selectBoxClassic": "_selectBoxClassic_hzvfu_47", "selectBoxCambio": "_selectBoxCambio_hzvfu_52", "selectMouseFocusStyling": "_selectMouseFocusStyling_hzvfu_61", "unselected": "_unselected_hzvfu_66", "selected": "_selected_hzvfu_70", "arrowIcon": "_arrowIcon_hzvfu_74", "sm": "_sm_hzvfu_88", "md": "_md_hzvfu_94", "lg": "_lg_hzvfu_100", "selectError": "_selectError_hzvfu_106", "selectErrorCambio": "_selectErrorCambio_hzvfu_112" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_itxk7_1", "selectContainerCambio": "_selectContainerCambio_itxk7_7", "opacityOverlay": "_opacityOverlay_itxk7_11", "selectWrapper": "_selectWrapper_itxk7_15", "selectBox": "_selectBox_itxk7_20", "selectBoxClassic": "_selectBoxClassic_itxk7_36", "selectBoxCambio": "_selectBoxCambio_itxk7_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_itxk7_50", "unselected": "_unselected_itxk7_55", "selected": "_selected_itxk7_59", "arrowIcon": "_arrowIcon_itxk7_63", "sm": "_sm_itxk7_77", "md": "_md_itxk7_83", "lg": "_lg_itxk7_89", "selectError": "_selectError_itxk7_95", "selectErrorCambio": "_selectErrorCambio_itxk7_101" };
 
 // src/SelectList/SelectList.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -71,14 +71,7 @@ function SelectList({
         [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
       }),
       children: [
-        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 }) })
-          }
-        ),
+        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ jsxs("div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ jsxs(
             "select",
@@ -128,7 +121,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ jsx(
+        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
           Typography_default,
           {
             size: 100,
@@ -145,4 +138,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=DE4RZUBC.js.map
+//# sourceMappingURL=ATVZZNGI.js.map

package/dist/__chunks/ATVZZNGI.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 htmlFor={selectId}>\n          <Box paddingX={1}>\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={1}>\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_itxk7_1\",\"selectContainerCambio\":\"_selectContainerCambio_itxk7_7\",\"opacityOverlay\":\"_opacityOverlay_itxk7_11\",\"selectWrapper\":\"_selectWrapper_itxk7_15\",\"selectBox\":\"_selectBox_itxk7_20\",\"selectBoxClassic\":\"_selectBoxClassic_itxk7_36\",\"selectBoxCambio\":\"_selectBoxCambio_itxk7_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_itxk7_50\",\"unselected\":\"_unselected_itxk7_55\",\"selected\":\"_selected_itxk7_59\",\"arrowIcon\":\"_arrowIcon_itxk7_63\",\"sm\":\"_sm_itxk7_77\",\"md\":\"_md_itxk7_83\",\"lg\":\"_lg_itxk7_89\",\"selectError\":\"_selectError_itxk7_95\",\"selectErrorCambio\":\"_selectErrorCambio_itxk7_101\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{HPXOG4FB.js → BA5NNKNL.js}

@@ -7,7 +7,7 @@ import {
 } from "./AVREYFSM.js";
 import {
   Typography_default
-} from "./M3US55ZU.js";
+} from "./2RIIE7CU.js";
 
 // src/RichSelect/RichSelectSection.tsx
 import { forwardRef } from "react";
@@ -50,4 +50,4 @@ var RichSelectSection_default = forwardRef(
 export {
   RichSelectSection_default
 };
-//# sourceMappingURL=HPXOG4FB.js.map
+//# sourceMappingURL=BA5NNKNL.js.map

package/dist/__chunks/{7K5BKF5X.cjs → CYMLBKRU.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _ADHTE22Dcjs = require('./ADHTE22D.cjs');
+var _762IDERQcjs = require('./762IDERQ.cjs');
 
 
-var _VL5ONCQDcjs = require('./VL5ONCQD.cjs');
+var _577X7X3Jcjs = require('./577X7X3J.cjs');
 
 
 var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
   } = props;
   const modal = !children || modalProp;
   const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _ADHTE22Dcjs.ModalDialog_default,
+    _762IDERQcjs.ModalDialog_default,
     {
       accessibilityLabel,
       accessibilityCloseLabel,
@@ -117,7 +117,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
     {
       placement: _LLFHCGRAcjs.syntaxToReactAriaPlacement.call(void 0, placement),
       onChangeContentVisibility,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VL5ONCQDcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _577X7X3Jcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
     }
   );
   if (!children)
@@ -141,4 +141,4 @@ var Popover_default = Popover;
 
 
 exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
-//# sourceMappingURL=7K5BKF5X.cjs.map
+//# sourceMappingURL=CYMLBKRU.cjs.map

package/dist/__chunks/{KHZ4ITXI.cjs → DC7G3PCP.cjs}

@@ -4,7 +4,7 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
+var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
 
 
 var _X2LNODY7cjs = require('./X2LNODY7.cjs');
@@ -23,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_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" };
+var Checkbox_module_default = { "mainContainer": "_mainContainer_19quh_1", "inputOverlay": "_inputOverlay_19quh_9", "checkbox": "_checkbox_19quh_17", "cambioCheckbox": "_cambioCheckbox_19quh_25", "disabled": "_disabled_19quh_29", "cursorDisabled": "_cursorDisabled_19quh_33", "cursorEnabled": "_cursorEnabled_19quh_37", "uncheckedBox": "_uncheckedBox_19quh_41", "uncheckedBorder": "_uncheckedBorder_19quh_45", "uncheckedErrorBorder": "_uncheckedErrorBorder_19quh_49", "checkedBox": "_checkedBox_19quh_53", "checkedNonError": "_checkedNonError_19quh_57", "checkedError": "_checkedError_19quh_61", "sm": "_sm_19quh_65", "md": "_md_19quh_70", "smBorderRadius": "_smBorderRadius_19quh_75", "mdBorderRadius": "_mdBorderRadius_19quh_79", "checkmark": "_checkmark_19quh_83", "checkmarkError": "_checkmarkError_19quh_87" };
 
 // src/Checkbox/Checkbox.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -80,13 +80,22 @@ var Checkbox = ({
         }
       ),
       children: [
-        /* @__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: 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"
-          }
-        ) }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: checked ? checkedStyling : uncheckedStyling, children: [
+          checked && themeName === "classic" && /* @__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",
+              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"
+            }
+          ) }),
+          checked && themeName === "cambio" && /* @__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",
+            {
+              className: error ? Checkbox_module_default.checkmarkError : Checkbox_module_default.checkmark,
+              d: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -109,7 +118,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _JEHUXNNKcjs.Typography_default,
+          _OWLMHTW5cjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray900",
@@ -125,4 +134,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=KHZ4ITXI.cjs.map
+//# sourceMappingURL=DC7G3PCP.cjs.map

package/dist/__chunks/DC7G3PCP.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 && themeName === \"classic\" && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\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        {checked && themeName === \"cambio\" && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\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_19quh_1\",\"inputOverlay\":\"_inputOverlay_19quh_9\",\"checkbox\":\"_checkbox_19quh_17\",\"cambioCheckbox\":\"_cambioCheckbox_19quh_25\",\"disabled\":\"_disabled_19quh_29\",\"cursorDisabled\":\"_cursorDisabled_19quh_33\",\"cursorEnabled\":\"_cursorEnabled_19quh_37\",\"uncheckedBox\":\"_uncheckedBox_19quh_41\",\"uncheckedBorder\":\"_uncheckedBorder_19quh_45\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_19quh_49\",\"checkedBox\":\"_checkedBox_19quh_53\",\"checkedNonError\":\"_checkedNonError_19quh_57\",\"checkedError\":\"_checkedError_19quh_61\",\"sm\":\"_sm_19quh_65\",\"md\":\"_md_19quh_70\",\"smBorderRadius\":\"_smBorderRadius_19quh_75\",\"mdBorderRadius\":\"_mdBorderRadius_19quh_79\",\"checkmark\":\"_checkmark_19quh_83\",\"checkmarkError\":\"_checkmarkError_19quh_87\"}"]}

package/dist/__chunks/{AREAWDHD.js → DUANKQDU.js}

@@ -4,7 +4,7 @@ import {
 } from "./KKADUD65.js";
 import {
   Typography_default
-} from "./M3US55ZU.js";
+} from "./2RIIE7CU.js";
 import {
   colors_module_default
 } from "./JHJZ5COD.js";
@@ -23,7 +23,7 @@ import { useState } from "react";
 import classNames from "classnames";
 
 // css-module:./Checkbox.module.css#css-module
-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" };
+var Checkbox_module_default = { "mainContainer": "_mainContainer_19quh_1", "inputOverlay": "_inputOverlay_19quh_9", "checkbox": "_checkbox_19quh_17", "cambioCheckbox": "_cambioCheckbox_19quh_25", "disabled": "_disabled_19quh_29", "cursorDisabled": "_cursorDisabled_19quh_33", "cursorEnabled": "_cursorEnabled_19quh_37", "uncheckedBox": "_uncheckedBox_19quh_41", "uncheckedBorder": "_uncheckedBorder_19quh_45", "uncheckedErrorBorder": "_uncheckedErrorBorder_19quh_49", "checkedBox": "_checkedBox_19quh_53", "checkedNonError": "_checkedNonError_19quh_57", "checkedError": "_checkedError_19quh_61", "sm": "_sm_19quh_65", "md": "_md_19quh_70", "smBorderRadius": "_smBorderRadius_19quh_75", "mdBorderRadius": "_mdBorderRadius_19quh_79", "checkmark": "_checkmark_19quh_83", "checkmarkError": "_checkmarkError_19quh_87" };
 
 // src/Checkbox/Checkbox.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -80,13 +80,22 @@ var Checkbox = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            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"
-          }
-        ) }) }),
+        /* @__PURE__ */ jsxs("div", { className: checked ? checkedStyling : uncheckedStyling, children: [
+          checked && themeName === "classic" && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fill: "#fff",
+              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"
+            }
+          ) }),
+          checked && themeName === "cambio" && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: error ? Checkbox_module_default.checkmarkError : Checkbox_module_default.checkmark,
+              d: "m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -125,4 +134,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=AREAWDHD.js.map
+//# sourceMappingURL=DUANKQDU.js.map

package/dist/__chunks/DUANKQDU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"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 && themeName === \"classic\" && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\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        {checked && themeName === \"cambio\" && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\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_19quh_1\",\"inputOverlay\":\"_inputOverlay_19quh_9\",\"checkbox\":\"_checkbox_19quh_17\",\"cambioCheckbox\":\"_cambioCheckbox_19quh_25\",\"disabled\":\"_disabled_19quh_29\",\"cursorDisabled\":\"_cursorDisabled_19quh_33\",\"cursorEnabled\":\"_cursorEnabled_19quh_37\",\"uncheckedBox\":\"_uncheckedBox_19quh_41\",\"uncheckedBorder\":\"_uncheckedBorder_19quh_45\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_19quh_49\",\"checkedBox\":\"_checkedBox_19quh_53\",\"checkedNonError\":\"_checkedNonError_19quh_57\",\"checkedError\":\"_checkedError_19quh_61\",\"sm\":\"_sm_19quh_65\",\"md\":\"_md_19quh_70\",\"smBorderRadius\":\"_smBorderRadius_19quh_75\",\"mdBorderRadius\":\"_mdBorderRadius_19quh_79\",\"checkmark\":\"_checkmark_19quh_83\",\"checkmarkError\":\"_checkmarkError_19quh_87\"}"],"mappings":"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","names":[]}

package/dist/__chunks/DV73RCNK.cjs

@@ -0,0 +1,104 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
+
+
+var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
+
+
+var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
+
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
+
+// src/TextArea/TextArea.tsx
+var _react = require('react');
+
+// css-module:./TextArea.module.css#css-module
+var TextArea_module_default = { "textarea": "_textarea_1owb5_1", "sm": "_sm_1owb5_5", "md": "_md_1owb5_10", "lg": "_lg_1owb5_15", "textareaCambio": "_textareaCambio_1owb5_20" };
+
+// css-module:../TextField/TextField.module.css#css-module
+var TextField_module_default = { "textfield": "_textfield_kbdbw_1", "textfieldClassic": "_textfieldClassic_kbdbw_10", "textfieldCambio": "_textfieldCambio_kbdbw_14", "label": "_label_kbdbw_29", "sm": "_sm_kbdbw_33", "mdCambio": "_mdCambio_kbdbw_40", "heightCambio": "_heightCambio_kbdbw_44", "smHeight": "_smHeight_kbdbw_48", "md": "_md_kbdbw_40", "mdHeight": "_mdHeight_kbdbw_59", "lg": "_lg_kbdbw_63", "lgHeight": "_lgHeight_kbdbw_70", "inputError": "_inputError_kbdbw_74", "inputErrorCambio": "_inputErrorCambio_kbdbw_84" };
+
+// src/TextArea/TextArea.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _jsxruntime = require('react/jsx-runtime');
+var TextArea = _react.forwardRef.call(void 0, 
+  function TextArea2({
+    "data-testid": dataTestId,
+    disabled: disabledProp = false,
+    errorText = "",
+    helperText = "",
+    id,
+    label,
+    maxLength = 1024,
+    placeholder = "",
+    rows = 3,
+    size = "md",
+    value = "",
+    onChange
+  }, forwardedRef) {
+    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
+    const disabled = !isHydrated || disabledProp;
+    const reactId = _react.useId.call(void 0, );
+    const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
+    const inputId = id != null ? id : reactId;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _SNYEHXDAcjs.Box_default,
+      {
+        display: "flex",
+        direction: "column",
+        gap: 2,
+        width: "100%",
+        dangerouslySetInlineStyle: {
+          __style: {
+            opacity: disabled ? 0.5 : 1
+          }
+        },
+        position: themeName === "cambio" ? "relative" : void 0,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OWLMHTW5cjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OWLMHTW5cjs.Typography_default, { size: themeName === "cambio" ? 100 : 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "textarea",
+            {
+              "data-testid": dataTestId,
+              ref: forwardedRef,
+              className: _classnames2.default.call(void 0, 
+                TextField_module_default.textfield,
+                themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
+                themeName === "classic" && TextField_module_default[size],
+                themeName === "classic" && TextArea_module_default[size],
+                themeName === "classic" ? TextArea_module_default.textarea : TextArea_module_default.textareaCambio,
+                {
+                  [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
+                }
+              ),
+              id: inputId,
+              placeholder,
+              maxLength,
+              onChange,
+              rows,
+              value,
+              disabled
+            }
+          ) }),
+          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _OWLMHTW5cjs.Typography_default,
+            {
+              size: 100,
+              color: errorText ? "destructive-primary" : "gray700",
+              children: errorText || helperText
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+var TextArea_default = TextArea;
+
+
+
+exports.TextArea_default = TextArea_default;
+//# sourceMappingURL=DV73RCNK.cjs.map

package/dist/__chunks/DV73RCNK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"names":["TextArea"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,MAAK,eAAc,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,2BAA0B;;;ACAnJ,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,oBAAmB,8BAA6B,mBAAkB,6BAA4B,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,gBAAe,0BAAyB,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,wBAAuB,oBAAmB,6BAA4B;;;AFKlkB,OAAO,gBAAgB;AAuFjB,SAcM,KAdN;AAzBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU,cAAc,WAAW,aAAa;AAAA,QAEhD;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,cAAc,WAAW,MAAM,KAC/C;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,cAAc,YACV,yBAAgB,mBAChB,yBAAgB;AAAA,gBACpB,cAAc,aAAa,yBAAgB,IAAI;AAAA,gBAC/C,cAAc,aAAa,wBAAO,IAAI;AAAA,gBACtC,cAAc,YAAY,wBAAO,WAAW,wBAAO;AAAA,gBACnD;AAAA,kBACE,CAAC,cAAc,YACX,yBAAgB,aAChB,yBAAgB,gBAAgB,GAAG;AAAA,gBACzC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * Cambio only supports `md`\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const { themeName } = useTheme();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n        position={themeName === \"cambio\" ? \"relative\" : undefined}\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={themeName === \"cambio\" ? 100 : 200}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              themeName === \"classic\"\n                ? textFieldStyles.textfieldClassic\n                : textFieldStyles.textfieldCambio,\n              themeName === \"classic\" && textFieldStyles[size],\n              themeName === \"classic\" && styles[size],\n              themeName === \"classic\" ? styles.textarea : styles.textareaCambio,\n              {\n                [themeName === \"classic\"\n                  ? textFieldStyles.inputError\n                  : textFieldStyles.inputErrorCambio]: errorText,\n              },\n            )}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_1owb5_1\",\"sm\":\"_sm_1owb5_5\",\"md\":\"_md_1owb5_10\",\"lg\":\"_lg_1owb5_15\",\"textareaCambio\":\"_textareaCambio_1owb5_20\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_kbdbw_1\",\"textfieldClassic\":\"_textfieldClassic_kbdbw_10\",\"textfieldCambio\":\"_textfieldCambio_kbdbw_14\",\"label\":\"_label_kbdbw_29\",\"sm\":\"_sm_kbdbw_33\",\"mdCambio\":\"_mdCambio_kbdbw_40\",\"heightCambio\":\"_heightCambio_kbdbw_44\",\"smHeight\":\"_smHeight_kbdbw_48\",\"md\":\"_md_kbdbw_40\",\"mdHeight\":\"_mdHeight_kbdbw_59\",\"lg\":\"_lg_kbdbw_63\",\"lgHeight\":\"_lgHeight_kbdbw_70\",\"inputError\":\"_inputError_kbdbw_74\",\"inputErrorCambio\":\"_inputErrorCambio_kbdbw_84\"}"]}

package/dist/__chunks/{A7AAGKC2.js → E5L5ZBOW.js}

@@ -14,6 +14,9 @@ import {
 import {
   colors_module_default
 } from "./JHJZ5COD.js";
+import {
+  useTheme
+} from "./ZSHAHV4F.js";
 
 // src/Dialog/Dialog.tsx
 import React, {
@@ -50,6 +53,7 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
     size = "md"
   } = props;
   const { padding } = useContext(DialogContext);
+  const { themeName } = useTheme();
   return /* @__PURE__ */ jsx(
     ReactAriaDialog,
     {
@@ -66,7 +70,7 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
         colors_module_default.whiteBackgroundColor,
         padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
         padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
-        rounding_module_default[`rounding${sizeToRounding[size]}`],
+        rounding_module_default[themeName === "classic" ? `rounding${sizeToRounding[size]}` : "roundingmdCambio"],
         elevation_module_default.elevation400BoxShadow,
         layout_module_default.fullMaxHeight,
         layout_module_default.visibilityVisible,
@@ -82,4 +86,4 @@ export {
   DialogContext,
   Dialog_default
 };
-//# sourceMappingURL=A7AAGKC2.js.map
+//# sourceMappingURL=E5L5ZBOW.js.map

package/dist/__chunks/E5L5ZBOW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\ntype DialogRounding = \"lg\" | \"xl\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToRounding: Record<DialogSize, DialogRounding> = {\n  sm: \"lg\",\n  md: \"lg\",\n  lg: \"xl\",\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n  const { themeName } = useTheme();\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles[\n          themeName === \"classic\"\n            ? (`rounding${sizeToRounding[size]}` as const)\n            : \"roundingmdCambio\"\n        ],\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AA8DnB;AA7CJ,IAAM,iBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAC5C,QAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBACE,cAAc,YACT,WAAW,eAAe,IAAI,MAC/B,kBACN;AAAA,QACA,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}

package/dist/__chunks/{4HRJ2HGG.cjs → EIR3V4AH.cjs}

@@ -4,7 +4,7 @@
 var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
 
 
-var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
+var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -19,7 +19,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "textfield": "_textfield_15iys_1", "textfieldClassic": "_textfieldClassic_15iys_10", "textfieldCambio": "_textfieldCambio_15iys_14", "label": "_label_15iys_29", "labelCambio": "_labelCambio_15iys_33", "labelCambioTextfield": "_labelCambioTextfield_15iys_42", "sm": "_sm_15iys_46", "smCambio": "_smCambio_15iys_53", "mdCambio": "_mdCambio_15iys_57", "lgCambio": "_lgCambio_15iys_61", "heightCambio": "_heightCambio_15iys_65", "smHeight": "_smHeight_15iys_69", "md": "_md_15iys_57", "mdHeight": "_mdHeight_15iys_80", "lg": "_lg_15iys_61", "lgHeight": "_lgHeight_15iys_91", "inputError": "_inputError_15iys_95", "inputErrorCambio": "_inputErrorCambio_15iys_105" };
+var TextField_module_default = { "textfield": "_textfield_kbdbw_1", "textfieldClassic": "_textfieldClassic_kbdbw_10", "textfieldCambio": "_textfieldCambio_kbdbw_14", "label": "_label_kbdbw_29", "sm": "_sm_kbdbw_33", "mdCambio": "_mdCambio_kbdbw_40", "heightCambio": "_heightCambio_kbdbw_44", "smHeight": "_smHeight_kbdbw_48", "md": "_md_kbdbw_40", "mdHeight": "_mdHeight_kbdbw_59", "lg": "_lg_kbdbw_63", "lgHeight": "_lgHeight_kbdbw_70", "inputError": "_inputError_kbdbw_74", "inputErrorCambio": "_inputErrorCambio_kbdbw_84" };
 
 // src/TextField/TextField.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -54,19 +54,8 @@ function TextField({
           opacity: disabled ? 0.5 : 1
         }
       },
-      position: themeName === "cambio" ? "relative" : void 0,
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "label",
-          {
-            className: _classnames2.default.call(void 0, 
-              themeName === "classic" ? TextField_module_default.label : TextField_module_default.labelCambio,
-              themeName === "cambio" && TextField_module_default.labelCambioTextfield
-            ),
-            htmlFor: inputId,
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JEHUXNNKcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
-          }
-        ),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OWLMHTW5cjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -75,7 +64,7 @@ function TextField({
               TextField_module_default.textfield,
               themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
               themeName === "classic" && TextField_module_default[size],
-              themeName === "cambio" ? TextField_module_default[`${size}Cambio`] : void 0,
+              themeName === "cambio" ? TextField_module_default.mdCambio : void 0,
               themeName === "classic" ? TextField_module_default[`${size}Height`] : TextField_module_default.heightCambio,
               {
                 [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
@@ -90,8 +79,8 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _JEHUXNNKcjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _OWLMHTW5cjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -106,4 +95,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=4HRJ2HGG.cjs.map
+//# sourceMappingURL=EIR3V4AH.cjs.map

package/dist/__chunks/EIR3V4AH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,oBAAmB,8BAA6B,mBAAkB,6BAA4B,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,gBAAe,0BAAyB,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,wBAAuB,oBAAmB,6BAA4B;;;ADqG9jB,SAcQ,KAdR;AAtFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GAiEiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,cAAc,YACV,yBAAO,mBACP,yBAAO;AAAA,cACX,cAAc,aAAa,yBAAO,IAAI;AAAA,cACtC,cAAc,WAAW,yBAAO,WAAW;AAAA,cAC3C,cAAc,YACV,yBAAO,GAAG,YAAY,IACtB,yBAAO;AAAA,cACX;AAAA,gBACE,CAAC,cAAc,YACX,yBAAO,aACP,yBAAO,gBAAgB,GAAG;AAAA,cAChC;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ","sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `md`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\n}): ReactElement {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const reactId = useId();\n  const { themeName } = useTheme();\n  const inputId = id ?? reactId;\n\n  return (\n    <Box\n      display=\"flex\"\n      direction=\"column\"\n      gap={2}\n      width=\"100%\"\n      dangerouslySetInlineStyle={{\n        __style: {\n          opacity: disabled ? 0.5 : 1,\n        },\n      }}\n    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          themeName === \"classic\"\n            ? styles.textfieldClassic\n            : styles.textfieldCambio,\n          themeName === \"classic\" && styles[size],\n          themeName === \"cambio\" ? styles.mdCambio : undefined,\n          themeName === \"classic\"\n            ? styles[`${size}Height`]\n            : styles.heightCambio,\n          {\n            [themeName === \"classic\"\n              ? styles.inputError\n              : styles.inputErrorCambio]: errorText,\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText || helperText}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n}\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_kbdbw_1\",\"textfieldClassic\":\"_textfieldClassic_kbdbw_10\",\"textfieldCambio\":\"_textfieldCambio_kbdbw_14\",\"label\":\"_label_kbdbw_29\",\"sm\":\"_sm_kbdbw_33\",\"mdCambio\":\"_mdCambio_kbdbw_40\",\"heightCambio\":\"_heightCambio_kbdbw_44\",\"smHeight\":\"_smHeight_kbdbw_48\",\"md\":\"_md_kbdbw_40\",\"mdHeight\":\"_mdHeight_kbdbw_59\",\"lg\":\"_lg_kbdbw_63\",\"lgHeight\":\"_lgHeight_kbdbw_70\",\"inputError\":\"_inputError_kbdbw_74\",\"inputErrorCambio\":\"_inputErrorCambio_kbdbw_84\"}"]}

package/dist/__chunks/{W4GZKF4S.cjs → ESGW3XTV.cjs}

@@ -4,7 +4,7 @@
 var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
 
 
-var _JEHUXNNKcjs = require('./JEHUXNNK.cjs');
+var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
 
 
 var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -40,10 +40,10 @@ var Badge = ({
       alignItems: "center",
       justifyContent: "center",
       height: themeName === "cambio" ? 32 : void 0,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JEHUXNNKcjs.Typography_default, { color: textColorForBackgroundColor(color), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _SNYEHXDAcjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OWLMHTW5cjs.Typography_default, { color: textColorForBackgroundColor(color), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _SNYEHXDAcjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
         Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _JEHUXNNKcjs.Typography_default,
+          _OWLMHTW5cjs.Typography_default,
           {
             color: textColorForBackgroundColor(color),
             size: 100,
@@ -60,4 +60,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=W4GZKF4S.cjs.map
+//# sourceMappingURL=ESGW3XTV.cjs.map

package/dist/__chunks/{FVILLLRC.js → HA4KAF7N.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./WASW7BJX.js";
+} from "./22W7JX3C.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=FVILLLRC.js.map
+//# sourceMappingURL=HA4KAF7N.js.map