@cambly/syntax-core 19.2.0 → 19.3.0

package/dist/__chunks/{CWVVOO2G.cjs → JJN6542U.cjs}

@@ -6,7 +6,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
 
 
 
-var _ULC7XW64cjs = require('./ULC7XW64.cjs');
+var _D4FWWDPJcjs = require('./D4FWWDPJ.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -15,7 +15,7 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -68,12 +68,12 @@ function SelectList({
   };
   const getArrowIconColor = () => {
     if (errorText) {
-      return _ULC7XW64cjs.ColorBaseDestructive700;
+      return _D4FWWDPJcjs.ColorBaseDestructive700;
     } else {
       if (color === "clear") {
-        return _ULC7XW64cjs.ColorCambioWhite100;
+        return _D4FWWDPJcjs.ColorCambioWhite100;
       } else {
-        return _ULC7XW64cjs.ColorBaseGray700;
+        return _D4FWWDPJcjs.ColorBaseGray700;
       }
     }
   };
@@ -84,7 +84,7 @@ function SelectList({
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5NQO6SP3cjs.Typography_default, { size: 100, color: textColor[color], children: label }) }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RVU3UEZIcjs.Typography_default, { size: 100, color: textColor[color], children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "select",
@@ -132,7 +132,7 @@ function SelectList({
           ) })
         ] }),
         (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _5NQO6SP3cjs.Typography_default,
+          _RVU3UEZIcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : textColor[color],
@@ -148,4 +148,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=CWVVOO2G.cjs.map
+//# sourceMappingURL=JJN6542U.cjs.map

package/dist/__chunks/{TWWEORFR.js → MZK5G2SD.js}

@@ -4,7 +4,7 @@ import {
 } from "./IB6JZQF3.js";
 import {
   Typography_default
-} from "./DAK5IGJK.js";
+} from "./RJQ2LSPP.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -16,7 +16,7 @@ import { useId, forwardRef } from "react";
 var TextArea_module_default = { "textarea": "_textarea_1sb0v_1", "resizenone": "_resizenone_1sb0v_6", "resizehorizontal": "_resizehorizontal_1sb0v_10", "resizevertical": "_resizevertical_1sb0v_14", "resizeboth": "_resizeboth_1sb0v_18" };
 
 // css-module:../TextField/TextField.module.css#css-module
-var TextField_module_default = { "textfield": "_textfield_1of18_1", "label": "_label_1of18_22", "md": "_md_1of18_26", "height": "_height_1of18_30", "inputError": "_inputError_1of18_34" };
+var TextField_module_default = { "textfield": "_textfield_f2wi6_1", "transparent": "_transparent_f2wi6_13", "label": "_label_f2wi6_28", "md": "_md_f2wi6_32", "height": "_height_f2wi6_36", "inputError": "_inputError_f2wi6_40", "transparentInputError": "_transparentInputError_f2wi6_49", "transparenInputError": "_transparenInputError_f2wi6_54" };
 
 // src/TextArea/TextArea.tsx
 import classNames from "classnames";
@@ -95,4 +95,4 @@ var TextArea_default = TextArea;
 export {
   TextArea_default
 };
-//# sourceMappingURL=TWWEORFR.js.map
+//# sourceMappingURL=MZK5G2SD.js.map

package/dist/__chunks/{TWWEORFR.js.map → MZK5G2SD.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"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\";\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   * Sets which part resizes when the user drags the resize handle.\n   * * `none`: TextArea can not be resized\n   * * `horizontal`: TextArea can only be resized horizontally\n   * * `vertical`: TextArea can only be resized vertically\n   * * `both`: TextArea can be resized horizontally and vertically\n   *\n   * @defaultvalue `none`\n   */\n  resize?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\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      value = \"\",\n      onChange,\n      resize = \"none\",\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\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=\"relative\"\n      >\n        {label && (\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        )}\n        <Typography size={100}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              styles.textarea,\n              styles[`resize${resize}`],\n              {\n                [textFieldStyles.inputError]: 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-darkBackground\" : \"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_1sb0v_1\",\"resizenone\":\"_resizenone_1sb0v_6\",\"resizehorizontal\":\"_resizehorizontal_1sb0v_10\",\"resizevertical\":\"_resizevertical_1sb0v_14\",\"resizeboth\":\"_resizeboth_1sb0v_18\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_1of18_1\",\"label\":\"_label_1of18_22\",\"md\":\"_md_1of18_26\",\"height\":\"_height_1of18_30\",\"inputError\":\"_inputError_1of18_34\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,cAAa,uBAAsB,oBAAmB,8BAA6B,kBAAiB,4BAA2B,cAAa,uBAAsB;;;ACA/M,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,uBAAsB;;;AFKhQ,OAAO,gBAAgB;AAuFjB,SAeQ,KAfR;AAxBN,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,QAAQ;AAAA,IACR;AAAA,IACA,SAAS;AAAA,EACX,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,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,UAAS;AAAA,QAER;AAAA,mBACC,oBAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UAEF,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,wBAAO;AAAA,gBACP,wBAAO,SAAS,QAAQ;AAAA,gBACxB;AAAA,kBACE,CAAC,yBAAgB,UAAU,GAAG;AAAA,gBAChC;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,+BAA+B;AAAA,cAEjD,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"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\";\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   * Sets which part resizes when the user drags the resize handle.\n   * * `none`: TextArea can not be resized\n   * * `horizontal`: TextArea can only be resized horizontally\n   * * `vertical`: TextArea can only be resized vertically\n   * * `both`: TextArea can be resized horizontally and vertically\n   *\n   * @defaultvalue `none`\n   */\n  resize?: \"none\" | \"horizontal\" | \"vertical\" | \"both\";\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      value = \"\",\n      onChange,\n      resize = \"none\",\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\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=\"relative\"\n      >\n        {label && (\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        )}\n        <Typography size={100}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              styles.textarea,\n              styles[`resize${resize}`],\n              {\n                [textFieldStyles.inputError]: 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-darkBackground\" : \"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_1sb0v_1\",\"resizenone\":\"_resizenone_1sb0v_6\",\"resizehorizontal\":\"_resizehorizontal_1sb0v_10\",\"resizevertical\":\"_resizevertical_1sb0v_14\",\"resizeboth\":\"_resizeboth_1sb0v_18\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_f2wi6_1\",\"transparent\":\"_transparent_f2wi6_13\",\"label\":\"_label_f2wi6_28\",\"md\":\"_md_f2wi6_32\",\"height\":\"_height_f2wi6_36\",\"inputError\":\"_inputError_f2wi6_40\",\"transparentInputError\":\"_transparentInputError_f2wi6_49\",\"transparenInputError\":\"_transparenInputError_f2wi6_54\"}"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,cAAa,uBAAsB,oBAAmB,8BAA6B,kBAAiB,4BAA2B,cAAa,uBAAsB;;;ACA/M,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,eAAc,yBAAwB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,wBAAuB,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;AFKxZ,OAAO,gBAAgB;AAuFjB,SAeQ,KAfR;AAxBN,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,QAAQ;AAAA,IACR;AAAA,IACA,SAAS;AAAA,EACX,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,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,UAAS;AAAA,QAER;AAAA,mBACC,oBAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UAEF,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,wBAAO;AAAA,gBACP,wBAAO,SAAS,QAAQ;AAAA,gBACxB;AAAA,kBACE,CAAC,yBAAgB,UAAU,GAAG;AAAA,gBAChC;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,+BAA+B;AAAA,cAEjD,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":["TextArea"]}

package/dist/__chunks/{YMIQ7WYX.js → P5BVB22B.js}

@@ -4,7 +4,7 @@ import {
 } from "./KKADUD65.js";
 import {
   Typography_default
-} from "./DAK5IGJK.js";
+} from "./RJQ2LSPP.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -114,4 +114,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=YMIQ7WYX.js.map
+//# sourceMappingURL=P5BVB22B.js.map

package/dist/__chunks/{IHGDCH62.cjs → PBHDA7GV.cjs}

@@ -4,7 +4,7 @@
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -76,7 +76,7 @@ var Chip = _react.forwardRef.call(void 0,
         onClick: onChange,
         children: [
           Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles, size: 100 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5NQO6SP3cjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RVU3UEZIcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
         ]
       }
     );
@@ -88,4 +88,4 @@ var Chip_default = Chip;
 
 
 exports.Chip_default = Chip_default;
-//# sourceMappingURL=IHGDCH62.cjs.map
+//# sourceMappingURL=PBHDA7GV.cjs.map

package/dist/__chunks/{66VTCVJA.cjs → PBOAPP74.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _4AI6GQ5Ucjs = require('./4AI6GQ5U.cjs');
+var _AI52ORKAcjs = require('./AI52ORKA.cjs');
 
 
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
   function RichSelectRadioButton(props, ref) {
     const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _4AI6GQ5Ucjs.RadioButton_default,
+      _AI52ORKAcjs.RadioButton_default,
       {
         checked: isSelected,
         disabled: isDisabled,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
-//# sourceMappingURL=66VTCVJA.cjs.map
+//# sourceMappingURL=PBOAPP74.cjs.map

package/dist/__chunks/{ML36DCKL.cjs → Q65LBFK3.cjs}

@@ -7,7 +7,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 var _7DGFMDT7cjs = require('./7DGFMDT7.cjs');
 
 
-var _S4JNYLMAcjs = require('./S4JNYLMA.cjs');
+var _SW6S6ZCIcjs = require('./SW6S6ZCI.cjs');
 
 
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
@@ -46,7 +46,7 @@ function TabButton({
           "data-testid": dataTestId,
           accessibilityLabel,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _S4JNYLMAcjs.TabInternal,
+            _SW6S6ZCIcjs.TabInternal,
             {
               text,
               selected,
@@ -64,4 +64,4 @@ function TabButton({
 
 
 exports.TabButton = TabButton;
-//# sourceMappingURL=ML36DCKL.cjs.map
+//# sourceMappingURL=Q65LBFK3.cjs.map

package/dist/__chunks/{CCKTB7L5.cjs → Q7CC3YA4.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 // src/Heading/Heading.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -28,7 +28,7 @@ var Heading = ({
   size = 400
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _5NQO6SP3cjs.Typography_default,
+    _RVU3UEZIcjs.Typography_default,
     {
       align,
       as,
@@ -47,4 +47,4 @@ var Heading_default = Heading;
 
 
 exports.Heading_default = Heading_default;
-//# sourceMappingURL=CCKTB7L5.cjs.map
+//# sourceMappingURL=Q7CC3YA4.cjs.map

package/dist/__chunks/{CCKTB7L5.cjs.map → Q7CC3YA4.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;;AAqGI;AAlGJ,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AACF,GAGkC;AAChC,MAAI,cAAc,WAAW,SAAS,KAAK;AACzC,WAAO;AAAA,EACT,WAAW,cAAc,SAAS;AAChC,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAKA,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AACT,MAoEoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,QAAQ,OAAO,EAAE,WAAW,KAAK,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport Typography from \"../Typography/Typography\";\n\nfunction weight({\n  fontStyle,\n  size,\n}: {\n  fontStyle: ComponentProps<typeof Heading>[\"fontStyle\"];\n  size: ComponentProps<typeof Heading>[\"size\"];\n}): \"bold\" | \"medium\" | \"regular\" {\n  if (fontStyle === \"serif\" && size === 400) {\n    return \"bold\";\n  } else if (fontStyle === \"serif\") {\n    return \"medium\";\n  } else {\n    return \"regular\";\n  }\n}\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  fontStyle = \"sans-serif\",\n  lineClamp,\n  size = 400,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"success\"\n    | \"white\"\n    | \"inherit\";\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Style of the font\n   *\n   * Classic only supports `sans-serif`\n   *\n   * @defaultValue \"sans-serif\"\n   */\n  fontStyle?: \"serif\" | \"sans-serif\";\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text\n   *\n   * Mobile: (viewport width < 480px):\n   * * `400`: 25px\n   * * `700`: 38px\n   * * `800`: 46px\n   * * `900`: 55px\n   * * `1100`: 83px\n   *\n   * Desktop (viewport width >= 480px):\n   * * `400`: 25px\n   * * `700`: 49px\n   * * `800`: 63px\n   * * `900`: 76px\n   * * `1100`: 119px\n   *\n   * @defaultValue 400\n   */\n  size?: 400 | 700 | 800 | 900 | 1100;\n}): ReactElement => {\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      fontStyle={fontStyle}\n      data-testid={dataTestId}\n      lineClamp={lineClamp}\n      size={size}\n      weight={weight({ fontStyle, size })}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"]}
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;;AAuGI;AApGJ,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AACF,GAGkC;AAChC,MAAI,cAAc,WAAW,SAAS,KAAK;AACzC,WAAO;AAAA,EACT,WAAW,cAAc,SAAS;AAChC,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAKA,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AACT,MAsEoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,QAAQ,OAAO,EAAE,WAAW,KAAK,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport Typography from \"../Typography/Typography\";\n\nfunction weight({\n  fontStyle,\n  size,\n}: {\n  fontStyle: ComponentProps<typeof Heading>[\"fontStyle\"];\n  size: ComponentProps<typeof Heading>[\"size\"];\n}): \"bold\" | \"medium\" | \"regular\" {\n  if (fontStyle === \"serif\" && size === 400) {\n    return \"bold\";\n  } else if (fontStyle === \"serif\") {\n    return \"medium\";\n  } else {\n    return \"regular\";\n  }\n}\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  fontStyle = \"sans-serif\",\n  lineClamp,\n  size = 400,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"success\"\n    | \"white\"\n    | \"inherit\";\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Style of the font\n   *\n   * Classic only supports `sans-serif`\n   *\n   * @defaultValue \"sans-serif\"\n   */\n  fontStyle?: \"serif\" | \"sans-serif\";\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text\n   *\n   * Mobile: (viewport width < 480px):\n   * * `400`: 25px\n   * * `500`: 32px\n   * * `700`: 38px\n   * * `800`: 46px\n   * * `900`: 55px\n   * * `1100`: 83px\n   *\n   * Desktop (viewport width >= 480px):\n   * * `400`: 25px\n   * * `500`: 32px\n   * * `700`: 49px\n   * * `800`: 63px\n   * * `900`: 76px\n   * * `1100`: 119px\n   *\n   * @defaultValue 400\n   */\n  size?: 400 | 500 | 700 | 800 | 900 | 1100;\n}): ReactElement => {\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      fontStyle={fontStyle}\n      data-testid={dataTestId}\n      lineClamp={lineClamp}\n      size={size}\n      weight={weight({ fontStyle, size })}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"]}

package/dist/__chunks/{5NI7VPKS.cjs → R3XTMI64.cjs}

@@ -4,7 +4,7 @@
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -16,7 +16,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_1of18_1", "label": "_label_1of18_22", "md": "_md_1of18_26", "height": "_height_1of18_30", "inputError": "_inputError_1of18_34" };
+var TextField_module_default = { "textfield": "_textfield_f2wi6_1", "transparent": "_transparent_f2wi6_13", "label": "_label_f2wi6_28", "md": "_md_f2wi6_32", "height": "_height_f2wi6_36", "inputError": "_inputError_f2wi6_40", "transparentInputError": "_transparentInputError_f2wi6_49", "transparenInputError": "_transparenInputError_f2wi6_54" };
 
 // src/TextField/TextField.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -24,6 +24,7 @@ function TextField({
   autoComplete,
   "data-testid": dataTestId,
   disabled: disabledProp = false,
+  on = "lightBackground",
   errorText = "",
   helperText = "",
   id,
@@ -39,6 +40,8 @@ function TextField({
   const disabled = !isHydrated || disabledProp;
   const reactId = _react.useId.call(void 0, );
   const inputId = id != null ? id : reactId;
+  const textColor = on === "darkBackground" ? "white" : "gray900";
+  const errorTextColor = on !== "darkBackground" ? "destructive-lightBackground" : "destructive-darkBackground";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _QODNNCT2cjs.Box_default,
     {
@@ -52,14 +55,20 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5NQO6SP3cjs.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, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RVU3UEZIcjs.Typography_default, { size: 100, color: textColor, children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
             autoComplete,
-            className: _classnames2.default.call(void 0, TextField_module_default.textfield, TextField_module_default.md, TextField_module_default.height, {
-              [TextField_module_default.inputError]: errorText
-            }),
+            className: _classnames2.default.call(void 0, 
+              TextField_module_default.textfield,
+              TextField_module_default.md,
+              TextField_module_default.height,
+              errorText && (on === "darkBackground" ? TextField_module_default.transparentInputError : TextField_module_default.inputError),
+              {
+                [TextField_module_default.transparent]: on === "darkBackground"
+              }
+            ),
             "data-testid": dataTestId,
             disabled,
             id: inputId,
@@ -71,14 +80,7 @@ function TextField({
             step
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _5NQO6SP3cjs.Typography_default,
-          {
-            size: 100,
-            color: errorText ? "destructive-darkBackground" : "gray700",
-            children: errorText || helperText
-          }
-        ) })
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RVU3UEZIcjs.Typography_default, { size: 100, color: errorText ? errorTextColor : textColor, children: errorText || helperText }) })
       ]
     }
   );
@@ -87,4 +89,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=5NI7VPKS.cjs.map
+//# sourceMappingURL=R3XTMI64.cjs.map

package/dist/__chunks/R3XTMI64.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,eAAc,yBAAwB,SAAQ,mBAAkB,MAAK,gBAAe,UAAS,oBAAmB,cAAa,wBAAuB,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;ADyGpZ,SAcQ,KAdR;AA3FW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AACF,GAiEiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AACtB,QAAM,YAAY,OAAO,mBAAmB,UAAU;AACtD,QAAM,iBACJ,OAAO,mBACH,gCACA;AACN,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,OAAO,WAC3B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,yBAAO;AAAA,cACP,yBAAO;AAAA,cACP,cACG,OAAO,mBACJ,yBAAO,wBACP,yBAAO;AAAA,cACb;AAAA,gBACE,CAAC,yBAAO,WAAW,GAAG,OAAO;AAAA,cAC/B;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAO,YAAY,iBAAiB,WACxD,uBAAa,YAChB,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\";\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  on = \"lightBackground\",\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  maxLength,\n  onChange,\n  placeholder = \"\",\n  type = \"text\",\n  value = \"\",\n  step,\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   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * 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   * Maximum length of the TextField\n   */\n  maxLength?: number;\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   * 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  /**\n   * Specified legal number intervals for an input field. Specifically for time or number. If for time, specify in milliseconds. Must be a positive value.\n   */\n  step?: number;\n}): ReactElement {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n  const errorTextColor =\n    on !== \"darkBackground\"\n      ? \"destructive-lightBackground\"\n      : \"destructive-darkBackground\";\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={textColor}>\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          styles.md,\n          styles.height,\n          errorText &&\n            (on === \"darkBackground\"\n              ? styles.transparentInputError\n              : styles.inputError),\n          {\n            [styles.transparent]: on === \"darkBackground\",\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        maxLength={maxLength}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n        step={step}\n      />\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography size={100} color={errorText ? errorTextColor : textColor}>\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_f2wi6_1\",\"transparent\":\"_transparent_f2wi6_13\",\"label\":\"_label_f2wi6_28\",\"md\":\"_md_f2wi6_32\",\"height\":\"_height_f2wi6_36\",\"inputError\":\"_inputError_f2wi6_40\",\"transparentInputError\":\"_transparentInputError_f2wi6_49\",\"transparenInputError\":\"_transparenInputError_f2wi6_54\"}"]}

package/dist/__chunks/{DAK5IGJK.js → RJQ2LSPP.js}

@@ -1,14 +1,14 @@
 "use client"
 import {
   textColor
-} from "./VU4LGL2W.js";
+} from "./YSI244J6.js";
 
 // src/Typography/Typography.tsx
 import classNames from "classnames";
 import { forwardRef } from "react";
 
 // css-module:./Typography.module.css#css-module
-var Typography_module_default = { "typography": "_typography_1fz2y_1", "sansSerif": "_sansSerif_1fz2y_22", "serif": "_serif_1fz2y_27", "size0": "_size0_1fz2y_73", "size100": "_size100_1fz2y_77", "size200": "_size200_1fz2y_81", "size300": "_size300_1fz2y_85", "size400": "_size400_1fz2y_89", "size700": "_size700_1fz2y_93", "size800": "_size800_1fz2y_97", "size900": "_size900_1fz2y_101", "size1100": "_size1100_1fz2y_105", "center": "_center_1fz2y_133", "forceLeft": "_forceLeft_1fz2y_137", "forceRight": "_forceRight_1fz2y_141", "start": "_start_1fz2y_145", "end": "_end_1fz2y_149", "regular": "_regular_1fz2y_155", "medium": "_medium_1fz2y_159", "semiBold": "_semiBold_1fz2y_163", "bold": "_bold_1fz2y_167", "underline": "_underline_1fz2y_171", "inline": "_inline_1fz2y_175", "uppercase": "_uppercase_1fz2y_179", "lineClamp": "_lineClamp_1fz2y_183", "p100": "_p100_1fz2y_192", "p200": "_p200_1fz2y_196", "p300": "_p300_1fz2y_200", "p400": "_p400_1fz2y_204" };
+var Typography_module_default = { "typography": "_typography_15w34_1", "sansSerif": "_sansSerif_15w34_22", "serif": "_serif_15w34_27", "size0": "_size0_15w34_73", "size100": "_size100_15w34_77", "size200": "_size200_15w34_81", "size300": "_size300_15w34_85", "size400": "_size400_15w34_89", "size500": "_size500_15w34_93", "size700": "_size700_15w34_97", "size800": "_size800_15w34_101", "size900": "_size900_15w34_105", "size1100": "_size1100_15w34_109", "center": "_center_15w34_137", "forceLeft": "_forceLeft_15w34_141", "forceRight": "_forceRight_15w34_145", "start": "_start_15w34_149", "end": "_end_15w34_153", "regular": "_regular_15w34_159", "medium": "_medium_15w34_163", "semiBold": "_semiBold_15w34_167", "bold": "_bold_15w34_171", "underline": "_underline_15w34_175", "inline": "_inline_15w34_179", "uppercase": "_uppercase_15w34_183", "lineClamp": "_lineClamp_15w34_187", "p100": "_p100_15w34_196", "p200": "_p200_15w34_200", "p300": "_p300_15w34_204", "p400": "_p400_15w34_208", "p500": "_p500_15w34_212" };
 
 // src/Typography/Typography.tsx
 import { jsx } from "react/jsx-runtime";
@@ -61,4 +61,4 @@ var Typography_default = Typography;
 export {
   Typography_default
 };
-//# sourceMappingURL=DAK5IGJK.js.map
+//# sourceMappingURL=RJQ2LSPP.js.map

package/dist/__chunks/RJQ2LSPP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport textColor from \"../colors/textColors\";\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n  HTMLDivElement,\n  {\n    /**\n     * Aligns the text to the left, right, or center of the container.\n     * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n     *\n     * @defaultValue \"start\"\n     */\n    align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n    /**\n     * DOM element to render as.\n     *\n     * @defaultValue \"div\"\n     */\n    as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\";\n    /**\n     * The text to be rendered\n     */\n    children?: ReactNode;\n    /**\n     * The color of the text.\n     *\n     * @defaultValue \"gray900\"\n     */\n    color?:\n      | \"gray900\"\n      | \"gray700\"\n      | \"primary\"\n      | \"destructive-primary\"\n      | \"destructive-darkBackground\"\n      | \"destructive-lightBackground\"\n      | \"success\"\n      | \"success-darkBackground\"\n      | \"white\"\n      | \"white-secondary\"\n      | \"inherit\";\n    /**\n     * Test id for the text\n     */\n    \"data-testid\"?: string;\n    /**\n     * Style of the font\n     *\n     * Classic only supports `sans-serif`\n     *\n     * @defaultValue \"sans-serif\"\n     */\n    fontStyle?: \"serif\" | \"sans-serif\";\n    /**\n     * The id for the element\n     */\n    id?: string;\n    /**\n     * Whether the text should flow inline with other elements.\n     *\n     * @defaultValue false\n     */\n    inline?: boolean;\n    /**\n     * The number of lines we should truncate the text at\n     */\n    lineClamp?: number | undefined;\n    /**\n     * Size of the text.\n     *\n     * Mobile (viewport width <= 480px)::\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 19px\n     * * `400`: 25px\n     * * `500`: 32px\n     * * `700`: 38px\n     * * `800`: 46px\n     * * `900`: 55px\n     * * `1100`: 83px\n     *\n     * Desktop (viewport width > 480px):\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `500`: 32px\n     * * `700`: 49px\n     * * `800`: 63px\n     * * `900`: 76px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 0 | 100 | 200 | 300 | 400 | 500 | 700 | 800 | 900 | 1100;\n    /**\n     * The tooltip to be displayed when the user hovers the text\n     */\n    tooltip?: string;\n    /**\n     * Whether the text should be transformed to uppercase.\n     *\n     * @defaultValue \"none\"\n     */\n    transform?: \"none\" | \"uppercase\";\n    /**\n     * Whether the text has an underline.\n     *\n     * @defaultValue false\n     */\n    underline?: boolean;\n    /**\n     * Indicates the boldness of the text.\n     *\n     * * `regular`: 400\n     * * `medium`: 510\n     * * `semiBold`: 590\n     * * `bold`: 710\n     *\n     * @defaultValue \"regular\"\n     */\n    weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\";\n  }\n>(function Typography(\n  {\n    align = \"start\",\n    as = \"div\",\n    children,\n    color = \"gray900\",\n    \"data-testid\": dataTestId,\n    fontStyle = \"sans-serif\",\n    id,\n    inline = false,\n    lineClamp = undefined,\n    size = 200,\n    tooltip,\n    transform = \"none\",\n    underline = false,\n    weight = \"regular\",\n  },\n  ref,\n): ReactElement {\n  const Tag = as;\n\n  return (\n    <Tag\n      id={id}\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        fontStyle === \"serif\" ? styles.serif : styles.sansSerif,\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n        as === \"p\" && styles[`p${size}`],\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n      ref={ref}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_15w34_1\",\"sansSerif\":\"_sansSerif_15w34_22\",\"serif\":\"_serif_15w34_27\",\"size0\":\"_size0_15w34_73\",\"size100\":\"_size100_15w34_77\",\"size200\":\"_size200_15w34_81\",\"size300\":\"_size300_15w34_85\",\"size400\":\"_size400_15w34_89\",\"size500\":\"_size500_15w34_93\",\"size700\":\"_size700_15w34_97\",\"size800\":\"_size800_15w34_101\",\"size900\":\"_size900_15w34_105\",\"size1100\":\"_size1100_15w34_109\",\"center\":\"_center_15w34_137\",\"forceLeft\":\"_forceLeft_15w34_141\",\"forceRight\":\"_forceRight_15w34_145\",\"start\":\"_start_15w34_149\",\"end\":\"_end_15w34_153\",\"regular\":\"_regular_15w34_159\",\"medium\":\"_medium_15w34_163\",\"semiBold\":\"_semiBold_15w34_167\",\"bold\":\"_bold_15w34_171\",\"underline\":\"_underline_15w34_175\",\"inline\":\"_inline_15w34_179\",\"uppercase\":\"_uppercase_15w34_183\",\"lineClamp\":\"_lineClamp_15w34_187\",\"p100\":\"_p100_15w34_196\",\"p200\":\"_p200_15w34_200\",\"p300\":\"_p300_15w34_204\",\"p400\":\"_p400_15w34_208\",\"p500\":\"_p500_15w34_212\"}"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,WAAU,sBAAqB,YAAW,uBAAsB,UAAS,qBAAoB,aAAY,wBAAuB,cAAa,yBAAwB,SAAQ,oBAAmB,OAAM,kBAAiB,WAAU,sBAAqB,UAAS,qBAAoB,YAAW,uBAAsB,QAAO,mBAAkB,aAAY,wBAAuB,UAAS,qBAAoB,aAAY,wBAAuB,aAAY,wBAAuB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,kBAAiB;;;ADwJ3gC;AAhJJ,IAAM,aAAa,WA0HjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,cAAc,UAAU,0BAAO,QAAQ,0BAAO;AAAA,QAC9C,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,QAC5B,OAAO,OAAO,0BAAO,IAAI,MAAM;AAAA,MACjC;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ;","names":["Typography"]}

package/dist/__chunks/{5NQO6SP3.cjs → RVU3UEZI.cjs}

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _BDCZ5GX7cjs = require('./BDCZ5GX7.cjs');
+var _TA4EX7DLcjs = require('./TA4EX7DL.cjs');
 
 // src/Typography/Typography.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 var _react = require('react');
 
 // css-module:./Typography.module.css#css-module
-var Typography_module_default = { "typography": "_typography_1fz2y_1", "sansSerif": "_sansSerif_1fz2y_22", "serif": "_serif_1fz2y_27", "size0": "_size0_1fz2y_73", "size100": "_size100_1fz2y_77", "size200": "_size200_1fz2y_81", "size300": "_size300_1fz2y_85", "size400": "_size400_1fz2y_89", "size700": "_size700_1fz2y_93", "size800": "_size800_1fz2y_97", "size900": "_size900_1fz2y_101", "size1100": "_size1100_1fz2y_105", "center": "_center_1fz2y_133", "forceLeft": "_forceLeft_1fz2y_137", "forceRight": "_forceRight_1fz2y_141", "start": "_start_1fz2y_145", "end": "_end_1fz2y_149", "regular": "_regular_1fz2y_155", "medium": "_medium_1fz2y_159", "semiBold": "_semiBold_1fz2y_163", "bold": "_bold_1fz2y_167", "underline": "_underline_1fz2y_171", "inline": "_inline_1fz2y_175", "uppercase": "_uppercase_1fz2y_179", "lineClamp": "_lineClamp_1fz2y_183", "p100": "_p100_1fz2y_192", "p200": "_p200_1fz2y_196", "p300": "_p300_1fz2y_200", "p400": "_p400_1fz2y_204" };
+var Typography_module_default = { "typography": "_typography_15w34_1", "sansSerif": "_sansSerif_15w34_22", "serif": "_serif_15w34_27", "size0": "_size0_15w34_73", "size100": "_size100_15w34_77", "size200": "_size200_15w34_81", "size300": "_size300_15w34_85", "size400": "_size400_15w34_89", "size500": "_size500_15w34_93", "size700": "_size700_15w34_97", "size800": "_size800_15w34_101", "size900": "_size900_15w34_105", "size1100": "_size1100_15w34_109", "center": "_center_15w34_137", "forceLeft": "_forceLeft_15w34_141", "forceRight": "_forceRight_15w34_145", "start": "_start_15w34_149", "end": "_end_15w34_153", "regular": "_regular_15w34_159", "medium": "_medium_15w34_163", "semiBold": "_semiBold_15w34_167", "bold": "_bold_15w34_171", "underline": "_underline_15w34_175", "inline": "_inline_15w34_179", "uppercase": "_uppercase_15w34_183", "lineClamp": "_lineClamp_15w34_187", "p100": "_p100_15w34_196", "p200": "_p200_15w34_200", "p300": "_p300_15w34_204", "p400": "_p400_15w34_208", "p500": "_p500_15w34_212" };
 
 // src/Typography/Typography.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -38,7 +38,7 @@ var Typography = _react.forwardRef.call(void 0, function Typography2({
         Typography_module_default[align],
         Typography_module_default[weight],
         fontStyle === "serif" ? Typography_module_default.serif : Typography_module_default.sansSerif,
-        _BDCZ5GX7cjs.textColor.call(void 0, color),
+        _TA4EX7DLcjs.textColor.call(void 0, color),
         inline && Typography_module_default.inline,
         Typography_module_default[`size${size}`],
         transform === "uppercase" && Typography_module_default.uppercase,
@@ -61,4 +61,4 @@ var Typography_default = Typography;
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=5NQO6SP3.cjs.map
+//# sourceMappingURL=RVU3UEZI.cjs.map

package/dist/__chunks/RVU3UEZI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,WAAU,sBAAqB,YAAW,uBAAsB,UAAS,qBAAoB,aAAY,wBAAuB,cAAa,yBAAwB,SAAQ,oBAAmB,OAAM,kBAAiB,WAAU,sBAAqB,UAAS,qBAAoB,YAAW,uBAAsB,QAAO,mBAAkB,aAAY,wBAAuB,UAAS,qBAAoB,aAAY,wBAAuB,aAAY,wBAAuB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,kBAAiB;;;ADwJ3gC;AAhJJ,IAAM,aAAa,WA0HjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,cAAc,UAAU,0BAAO,QAAQ,0BAAO;AAAA,QAC9C,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,QAC5B,OAAO,OAAO,0BAAO,IAAI,MAAM;AAAA,MACjC;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport textColor from \"../colors/textColors\";\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n  HTMLDivElement,\n  {\n    /**\n     * Aligns the text to the left, right, or center of the container.\n     * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n     *\n     * @defaultValue \"start\"\n     */\n    align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n    /**\n     * DOM element to render as.\n     *\n     * @defaultValue \"div\"\n     */\n    as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\";\n    /**\n     * The text to be rendered\n     */\n    children?: ReactNode;\n    /**\n     * The color of the text.\n     *\n     * @defaultValue \"gray900\"\n     */\n    color?:\n      | \"gray900\"\n      | \"gray700\"\n      | \"primary\"\n      | \"destructive-primary\"\n      | \"destructive-darkBackground\"\n      | \"destructive-lightBackground\"\n      | \"success\"\n      | \"success-darkBackground\"\n      | \"white\"\n      | \"white-secondary\"\n      | \"inherit\";\n    /**\n     * Test id for the text\n     */\n    \"data-testid\"?: string;\n    /**\n     * Style of the font\n     *\n     * Classic only supports `sans-serif`\n     *\n     * @defaultValue \"sans-serif\"\n     */\n    fontStyle?: \"serif\" | \"sans-serif\";\n    /**\n     * The id for the element\n     */\n    id?: string;\n    /**\n     * Whether the text should flow inline with other elements.\n     *\n     * @defaultValue false\n     */\n    inline?: boolean;\n    /**\n     * The number of lines we should truncate the text at\n     */\n    lineClamp?: number | undefined;\n    /**\n     * Size of the text.\n     *\n     * Mobile (viewport width <= 480px)::\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 19px\n     * * `400`: 25px\n     * * `500`: 32px\n     * * `700`: 38px\n     * * `800`: 46px\n     * * `900`: 55px\n     * * `1100`: 83px\n     *\n     * Desktop (viewport width > 480px):\n     * * `0`: 12px\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `500`: 32px\n     * * `700`: 49px\n     * * `800`: 63px\n     * * `900`: 76px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 0 | 100 | 200 | 300 | 400 | 500 | 700 | 800 | 900 | 1100;\n    /**\n     * The tooltip to be displayed when the user hovers the text\n     */\n    tooltip?: string;\n    /**\n     * Whether the text should be transformed to uppercase.\n     *\n     * @defaultValue \"none\"\n     */\n    transform?: \"none\" | \"uppercase\";\n    /**\n     * Whether the text has an underline.\n     *\n     * @defaultValue false\n     */\n    underline?: boolean;\n    /**\n     * Indicates the boldness of the text.\n     *\n     * * `regular`: 400\n     * * `medium`: 510\n     * * `semiBold`: 590\n     * * `bold`: 710\n     *\n     * @defaultValue \"regular\"\n     */\n    weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\";\n  }\n>(function Typography(\n  {\n    align = \"start\",\n    as = \"div\",\n    children,\n    color = \"gray900\",\n    \"data-testid\": dataTestId,\n    fontStyle = \"sans-serif\",\n    id,\n    inline = false,\n    lineClamp = undefined,\n    size = 200,\n    tooltip,\n    transform = \"none\",\n    underline = false,\n    weight = \"regular\",\n  },\n  ref,\n): ReactElement {\n  const Tag = as;\n\n  return (\n    <Tag\n      id={id}\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        fontStyle === \"serif\" ? styles.serif : styles.sansSerif,\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n        as === \"p\" && styles[`p${size}`],\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n      ref={ref}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_15w34_1\",\"sansSerif\":\"_sansSerif_15w34_22\",\"serif\":\"_serif_15w34_27\",\"size0\":\"_size0_15w34_73\",\"size100\":\"_size100_15w34_77\",\"size200\":\"_size200_15w34_81\",\"size300\":\"_size300_15w34_85\",\"size400\":\"_size400_15w34_89\",\"size500\":\"_size500_15w34_93\",\"size700\":\"_size700_15w34_97\",\"size800\":\"_size800_15w34_101\",\"size900\":\"_size900_15w34_105\",\"size1100\":\"_size1100_15w34_109\",\"center\":\"_center_15w34_137\",\"forceLeft\":\"_forceLeft_15w34_141\",\"forceRight\":\"_forceRight_15w34_145\",\"start\":\"_start_15w34_149\",\"end\":\"_end_15w34_153\",\"regular\":\"_regular_15w34_159\",\"medium\":\"_medium_15w34_163\",\"semiBold\":\"_semiBold_15w34_167\",\"bold\":\"_bold_15w34_171\",\"underline\":\"_underline_15w34_175\",\"inline\":\"_inline_15w34_179\",\"uppercase\":\"_uppercase_15w34_183\",\"lineClamp\":\"_lineClamp_15w34_187\",\"p100\":\"_p100_15w34_196\",\"p200\":\"_p200_15w34_200\",\"p300\":\"_p300_15w34_204\",\"p400\":\"_p400_15w34_208\",\"p500\":\"_p500_15w34_212\"}"]}

package/dist/__chunks/{TG2RCNZT.js → RX3JA6WI.js}

@@ -7,7 +7,7 @@ import {
 } from "./VV2NJABK.js";
 import {
   TabInternal
-} from "./PBHAJ42K.js";
+} from "./45DUMC5J.js";
 import {
   Box_default
 } from "./IB6JZQF3.js";
@@ -64,4 +64,4 @@ function TabButton({
 export {
   TabButton
 };
-//# sourceMappingURL=TG2RCNZT.js.map
+//# sourceMappingURL=RX3JA6WI.js.map

package/dist/__chunks/{OVHMMIVE.cjs → S7BCIAUQ.cjs}

@@ -4,7 +4,7 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -98,7 +98,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _5NQO6SP3cjs.Typography_default,
+          _RVU3UEZIcjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-darkBackground" : "primary",
@@ -114,4 +114,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=OVHMMIVE.cjs.map
+//# sourceMappingURL=S7BCIAUQ.cjs.map

package/dist/__chunks/{OQSEZXJ6.cjs → SAPSO6DD.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _CCKTB7L5cjs = require('./CCKTB7L5.cjs');
+var _Q7CC3YA4cjs = require('./Q7CC3YA4.cjs');
 
 
 var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
@@ -93,7 +93,7 @@ function Modal({
             ),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
               image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { children: image }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CCKTB7L5cjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Q7CC3YA4cjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _QODNNCT2cjs.Box_default,
                 {
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=OQSEZXJ6.cjs.map
+//# sourceMappingURL=SAPSO6DD.cjs.map

package/dist/__chunks/{E3A6VFMB.cjs → SJSSW5MP.cjs}

@@ -4,7 +4,7 @@
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -45,7 +45,7 @@ var Badge = ({
       justifyContent: "center",
       minHeight: 24,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _5NQO6SP3cjs.Typography_default,
+        _RVU3UEZIcjs.Typography_default,
         {
           size: 100,
           weight: "medium",
@@ -53,7 +53,7 @@ var Badge = ({
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
             Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon, size: 100 }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _5NQO6SP3cjs.Typography_default,
+              _RVU3UEZIcjs.Typography_default,
               {
                 color: textColorForBackgroundColor(color),
                 size: 100,
@@ -72,4 +72,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=E3A6VFMB.cjs.map
+//# sourceMappingURL=SJSSW5MP.cjs.map

package/dist/__chunks/{S4JNYLMA.cjs → SW6S6ZCI.cjs}

@@ -4,7 +4,7 @@
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
 
 
-var _5NQO6SP3cjs = require('./5NQO6SP3.cjs');
+var _RVU3UEZIcjs = require('./RVU3UEZI.cjs');
 
 
 var _2XIVACBMcjs = require('./2XIVACBM.cjs');
@@ -40,7 +40,7 @@ var ItemCountIcon = ({
           rounding: "full",
           padding: 1,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _5NQO6SP3cjs.Typography_default,
+            _RVU3UEZIcjs.Typography_default,
             {
               color: on === "lightBackground" ? "white" : "primary",
               weight: "semiBold",
@@ -79,7 +79,7 @@ function TabInternal({
       paddingY: 2,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _5NQO6SP3cjs.Typography_default,
+          _RVU3UEZIcjs.Typography_default,
           {
             size: 0,
             transform: "uppercase",
@@ -98,4 +98,4 @@ function TabInternal({
 
 
 exports.TabInternal = TabInternal;
-//# sourceMappingURL=S4JNYLMA.cjs.map
+//# sourceMappingURL=SW6S6ZCI.cjs.map

package/dist/__chunks/{BDCZ5GX7.cjs → TA4EX7DL.cjs}

@@ -16,8 +16,10 @@ function textColor(color) {
       return _2XIVACBMcjs.colors_module_default.inheritColor;
     case "destructive-primary":
       return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
+    case "destructive-lightBackground":
+      return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
     case "destructive-darkBackground":
-      return _2XIVACBMcjs.colors_module_default.cambioDestructive700Color;
+      return _2XIVACBMcjs.colors_module_default.cambioDestructive300Color;
     case "success":
       return _2XIVACBMcjs.colors_module_default.cambioSuccess700Color;
     case "success-darkBackground":
@@ -30,4 +32,4 @@ function textColor(color) {
 
 
 exports.textColor = textColor;
-//# sourceMappingURL=BDCZ5GX7.cjs.map
+//# sourceMappingURL=TA4EX7DL.cjs.map

package/dist/__chunks/TA4EX7DL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAYQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","sourcesContent":["import colorStyles from \"../colors/colors.module.css\";\n\nexport default function textColor(\n  color:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"destructive-lightBackground\"\n    | \"destructive-darkBackground\"\n    | \"success\"\n    | \"success-darkBackground\"\n    | \"white\"\n    | \"white-secondary\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray800Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"white-secondary\":\n      return colorStyles.cambioWhite70Color;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-lightBackground\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.cambioDestructive300Color;\n    case \"success\":\n      return colorStyles.cambioSuccess700Color;\n    case \"success-darkBackground\":\n      return colorStyles.cambioSuccess100Color;\n    // primary / gray900\n    default:\n      return colorStyles.cambioBlackColor;\n  }\n}\n"]}