@cambly/syntax-core 10.37.0 → 11.0.0

package/dist/__chunks/{BW5Q7OJQ.js → 2AXMXHLN.js}

@@ -1,22 +1,22 @@
 "use client"
 import {
   Heading_default
-} from "./HLC7NU6Z.js";
+} from "./DHOC4CAU.js";
 import {
   StopScroll
 } from "./QQT35OLE.js";
 import {
   Layer
-} from "./SLDP6ZJE.js";
+} from "./EOEYMFUJ.js";
 import {
   FocusTrap
 } from "./HVA7R2EL.js";
 import {
   IconButton_default
-} from "./MEOMWLNG.js";
+} from "./ETNYF6H5.js";
 import {
   Box_default
-} from "./J6DAGNNN.js";
+} from "./Q62XO2L2.js";
 
 // css-module:./Modal.module.css#css-module
 var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=BW5Q7OJQ.js.map
+//# sourceMappingURL=2AXMXHLN.js.map

package/dist/__chunks/{DOQ5YEJ4.cjs → 2DIXO2DX.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 _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
+var _FPDSM74Fcjs = require('./FPDSM74F.cjs');
 
 
-var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
+var _CCWSUOICcjs = require('./CCWSUOIC.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 }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCGRNBQHcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FPDSM74Fcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CCWSUOICcjs.Typography_default, { size: 100, color, weight: "medium", children: text }) })
         ]
       }
     );
@@ -88,4 +88,4 @@ var Chip_default = Chip;
 
 
 exports.Chip_default = Chip_default;
-//# sourceMappingURL=DOQ5YEJ4.cjs.map
+//# sourceMappingURL=2DIXO2DX.cjs.map

package/dist/__chunks/2M4NFHP3.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:../colors/colors.module.css#css-module
+var colors_module_default = { "blackColor": "_blackColor_syoug_2", "whiteColor": "_whiteColor_syoug_6", "gray100Color": "_gray100Color_syoug_10", "gray200Color": "_gray200Color_syoug_14", "gray300Color": "_gray300Color_syoug_18", "gray370Color": "_gray370Color_syoug_22", "gray700Color": "_gray700Color_syoug_26", "gray800Color": "_gray800Color_syoug_30", "gray870Color": "_gray870Color_syoug_34", "gray900Color": "_gray900Color_syoug_38", "destructive100Color": "_destructive100Color_syoug_42", "destructive300Color": "_destructive300Color_syoug_46", "destructive370Color": "_destructive370Color_syoug_50", "destructive700Color": "_destructive700Color_syoug_54", "destructive770Color": "_destructive770Color_syoug_58", "destructive900Color": "_destructive900Color_syoug_62", "success100Color": "_success100Color_syoug_66", "success300Color": "_success300Color_syoug_70", "success370Color": "_success370Color_syoug_74", "success700Color": "_success700Color_syoug_78", "success770Color": "_success770Color_syoug_82", "success900Color": "_success900Color_syoug_86", "redColor": "_redColor_syoug_90", "orangeColor": "_orangeColor_syoug_94", "tanColor": "_tanColor_syoug_98", "creamColor": "_creamColor_syoug_102", "purpleColor": "_purpleColor_syoug_106", "lilacColor": "_lilacColor_syoug_110", "thistleColor": "_thistleColor_syoug_114", "pinkColor": "_pinkColor_syoug_118", "navyColor": "_navyColor_syoug_122", "tealColor": "_tealColor_syoug_126", "slateColor": "_slateColor_syoug_130", "skyColor": "_skyColor_syoug_134", "yellow700BackgroundColor": "_yellow700BackgroundColor_syoug_138", "transparentFullBackgroundColor": "_transparentFullBackgroundColor_syoug_142", "blackBackgroundColor": "_blackBackgroundColor_syoug_146", "whiteBackgroundColor": "_whiteBackgroundColor_syoug_150", "gray100BackgroundColor": "_gray100BackgroundColor_syoug_154", "gray200BackgroundColor": "_gray200BackgroundColor_syoug_158", "gray300BackgroundColor": "_gray300BackgroundColor_syoug_162", "gray370BackgroundColor": "_gray370BackgroundColor_syoug_166", "gray700BackgroundColor": "_gray700BackgroundColor_syoug_170", "gray800BackgroundColor": "_gray800BackgroundColor_syoug_174", "gray870BackgroundColor": "_gray870BackgroundColor_syoug_178", "gray900BackgroundColor": "_gray900BackgroundColor_syoug_182", "destructive100BackgroundColor": "_destructive100BackgroundColor_syoug_186", "destructive300BackgroundColor": "_destructive300BackgroundColor_syoug_190", "destructive370BackgroundColor": "_destructive370BackgroundColor_syoug_194", "destructive700BackgroundColor": "_destructive700BackgroundColor_syoug_198", "destructive770BackgroundColor": "_destructive770BackgroundColor_syoug_202", "destructive900BackgroundColor": "_destructive900BackgroundColor_syoug_206", "success100BackgroundColor": "_success100BackgroundColor_syoug_210", "success300BackgroundColor": "_success300BackgroundColor_syoug_214", "success370BackgroundColor": "_success370BackgroundColor_syoug_218", "success700BackgroundColor": "_success700BackgroundColor_syoug_222", "success770BackgroundColor": "_success770BackgroundColor_syoug_226", "success900BackgroundColor": "_success900BackgroundColor_syoug_230", "redBackgroundColor": "_redBackgroundColor_syoug_234", "orangeBackgroundColor": "_orangeBackgroundColor_syoug_238", "tanBackgroundColor": "_tanBackgroundColor_syoug_242", "creamBackgroundColor": "_creamBackgroundColor_syoug_246", "purpleBackgroundColor": "_purpleBackgroundColor_syoug_250", "lilacBackgroundColor": "_lilacBackgroundColor_syoug_254", "thistleBackgroundColor": "_thistleBackgroundColor_syoug_258", "pinkBackgroundColor": "_pinkBackgroundColor_syoug_262", "navyBackgroundColor": "_navyBackgroundColor_syoug_266", "tealBackgroundColor": "_tealBackgroundColor_syoug_270", "slateBackgroundColor": "_slateBackgroundColor_syoug_274", "skyBackgroundColor": "_skyBackgroundColor_syoug_278" };
+
+
+
+exports.colors_module_default = colors_module_default;
+//# sourceMappingURL=2M4NFHP3.cjs.map

package/dist/__chunks/2M4NFHP3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../colors/colors.module.css#css-module"],"names":[],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,YAAW,sBAAqB,eAAc,yBAAwB,YAAW,sBAAqB,cAAa,yBAAwB,eAAc,0BAAyB,cAAa,yBAAwB,gBAAe,2BAA0B,aAAY,wBAAuB,aAAY,wBAAuB,aAAY,wBAAuB,cAAa,yBAAwB,YAAW,uBAAsB,4BAA2B,uCAAsC,kCAAiC,6CAA4C,wBAAuB,mCAAkC,wBAAuB,mCAAkC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,sBAAqB,iCAAgC,yBAAwB,oCAAmC,sBAAqB,iCAAgC,wBAAuB,mCAAkC,yBAAwB,oCAAmC,wBAAuB,mCAAkC,0BAAyB,qCAAoC,uBAAsB,kCAAiC,uBAAsB,kCAAiC,uBAAsB,kCAAiC,wBAAuB,mCAAkC,sBAAqB,gCAA+B","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"blackColor\":\"_blackColor_syoug_2\",\"whiteColor\":\"_whiteColor_syoug_6\",\"gray100Color\":\"_gray100Color_syoug_10\",\"gray200Color\":\"_gray200Color_syoug_14\",\"gray300Color\":\"_gray300Color_syoug_18\",\"gray370Color\":\"_gray370Color_syoug_22\",\"gray700Color\":\"_gray700Color_syoug_26\",\"gray800Color\":\"_gray800Color_syoug_30\",\"gray870Color\":\"_gray870Color_syoug_34\",\"gray900Color\":\"_gray900Color_syoug_38\",\"destructive100Color\":\"_destructive100Color_syoug_42\",\"destructive300Color\":\"_destructive300Color_syoug_46\",\"destructive370Color\":\"_destructive370Color_syoug_50\",\"destructive700Color\":\"_destructive700Color_syoug_54\",\"destructive770Color\":\"_destructive770Color_syoug_58\",\"destructive900Color\":\"_destructive900Color_syoug_62\",\"success100Color\":\"_success100Color_syoug_66\",\"success300Color\":\"_success300Color_syoug_70\",\"success370Color\":\"_success370Color_syoug_74\",\"success700Color\":\"_success700Color_syoug_78\",\"success770Color\":\"_success770Color_syoug_82\",\"success900Color\":\"_success900Color_syoug_86\",\"redColor\":\"_redColor_syoug_90\",\"orangeColor\":\"_orangeColor_syoug_94\",\"tanColor\":\"_tanColor_syoug_98\",\"creamColor\":\"_creamColor_syoug_102\",\"purpleColor\":\"_purpleColor_syoug_106\",\"lilacColor\":\"_lilacColor_syoug_110\",\"thistleColor\":\"_thistleColor_syoug_114\",\"pinkColor\":\"_pinkColor_syoug_118\",\"navyColor\":\"_navyColor_syoug_122\",\"tealColor\":\"_tealColor_syoug_126\",\"slateColor\":\"_slateColor_syoug_130\",\"skyColor\":\"_skyColor_syoug_134\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_syoug_138\",\"transparentFullBackgroundColor\":\"_transparentFullBackgroundColor_syoug_142\",\"blackBackgroundColor\":\"_blackBackgroundColor_syoug_146\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_syoug_150\",\"gray100BackgroundColor\":\"_gray100BackgroundColor_syoug_154\",\"gray200BackgroundColor\":\"_gray200BackgroundColor_syoug_158\",\"gray300BackgroundColor\":\"_gray300BackgroundColor_syoug_162\",\"gray370BackgroundColor\":\"_gray370BackgroundColor_syoug_166\",\"gray700BackgroundColor\":\"_gray700BackgroundColor_syoug_170\",\"gray800BackgroundColor\":\"_gray800BackgroundColor_syoug_174\",\"gray870BackgroundColor\":\"_gray870BackgroundColor_syoug_178\",\"gray900BackgroundColor\":\"_gray900BackgroundColor_syoug_182\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_syoug_186\",\"destructive300BackgroundColor\":\"_destructive300BackgroundColor_syoug_190\",\"destructive370BackgroundColor\":\"_destructive370BackgroundColor_syoug_194\",\"destructive700BackgroundColor\":\"_destructive700BackgroundColor_syoug_198\",\"destructive770BackgroundColor\":\"_destructive770BackgroundColor_syoug_202\",\"destructive900BackgroundColor\":\"_destructive900BackgroundColor_syoug_206\",\"success100BackgroundColor\":\"_success100BackgroundColor_syoug_210\",\"success300BackgroundColor\":\"_success300BackgroundColor_syoug_214\",\"success370BackgroundColor\":\"_success370BackgroundColor_syoug_218\",\"success700BackgroundColor\":\"_success700BackgroundColor_syoug_222\",\"success770BackgroundColor\":\"_success770BackgroundColor_syoug_226\",\"success900BackgroundColor\":\"_success900BackgroundColor_syoug_230\",\"redBackgroundColor\":\"_redBackgroundColor_syoug_234\",\"orangeBackgroundColor\":\"_orangeBackgroundColor_syoug_238\",\"tanBackgroundColor\":\"_tanBackgroundColor_syoug_242\",\"creamBackgroundColor\":\"_creamBackgroundColor_syoug_246\",\"purpleBackgroundColor\":\"_purpleBackgroundColor_syoug_250\",\"lilacBackgroundColor\":\"_lilacBackgroundColor_syoug_254\",\"thistleBackgroundColor\":\"_thistleBackgroundColor_syoug_258\",\"pinkBackgroundColor\":\"_pinkBackgroundColor_syoug_262\",\"navyBackgroundColor\":\"_navyBackgroundColor_syoug_266\",\"tealBackgroundColor\":\"_tealBackgroundColor_syoug_270\",\"slateBackgroundColor\":\"_slateBackgroundColor_syoug_274\",\"skyBackgroundColor\":\"_skyBackgroundColor_syoug_278\"}"]}

package/dist/__chunks/{PX2UXNON.js → 2Y74R7FR.js}

@@ -4,10 +4,10 @@ import {
 } from "./KKADUD65.js";
 import {
   Typography_default
-} from "./2IXPTAJD.js";
+} from "./3GMABSQQ.js";
 import {
   colors_module_default
-} from "./S6TNP7G5.js";
+} from "./UZ4ORX3X.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -65,7 +65,7 @@ var Checkbox = ({
               {
                 [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
               },
-              error ? colors_module_default.cambioDestructive370BackgroundColor : colors_module_default.cambioGray370BackgroundColor
+              error ? colors_module_default.destructive370BackgroundColor : colors_module_default.gray370BackgroundColor
             ),
             children: checked && /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx(
               "path",
@@ -114,4 +114,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=PX2UXNON.js.map
+//# sourceMappingURL=2Y74R7FR.js.map

package/dist/__chunks/2Y74R7FR.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 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\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\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.destructive370BackgroundColor\n            : colorStyles.gray370BackgroundColor,\n        )}\n      >\n        {checked && (\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_17ijp_1\",\"inputOverlay\":\"_inputOverlay_17ijp_9\",\"checkbox\":\"_checkbox_17ijp_17\",\"disabled\":\"_disabled_17ijp_26\",\"cursorDisabled\":\"_cursorDisabled_17ijp_30\",\"cursorEnabled\":\"_cursorEnabled_17ijp_34\",\"sm\":\"_sm_17ijp_38\",\"md\":\"_md_17ijp_43\",\"smBorderRadius\":\"_smBorderRadius_17ijp_48\",\"mdBorderRadius\":\"_mdBorderRadius_17ijp_52\",\"checkmark\":\"_checkmark_17ijp_56\",\"checkmarkError\":\"_checkmarkError_17ijp_60\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,gCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/33N6APZI.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _25TMUQNIcjs = require('./25TMUQNI.cjs');
+
+// src/colors/border.ts
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+function border(color, on) {
+  if (on === "lightBackground") {
+    switch (color) {
+      case "secondary":
+        return _classnames2.default.call(void 0, _25TMUQNIcjs.colors_module_default.noBorder, _25TMUQNIcjs.colors_module_default.blackBorderColor);
+      case "success-secondary":
+        return _classnames2.default.call(void 0, _25TMUQNIcjs.colors_module_default.noBorder, _25TMUQNIcjs.colors_module_default.success770BorderColor);
+      case "destructive-secondary":
+        return _classnames2.default.call(void 0, _25TMUQNIcjs.colors_module_default.noBorder, _25TMUQNIcjs.colors_module_default.destructive770BorderColor);
+      default:
+        return _25TMUQNIcjs.colors_module_default.noBorder;
+    }
+  } else {
+    switch (color) {
+      case "secondary":
+        return _classnames2.default.call(void 0, _25TMUQNIcjs.colors_module_default.noBorder, _25TMUQNIcjs.colors_module_default.gray370BorderColor);
+      case "success-secondary":
+        return _classnames2.default.call(void 0, _25TMUQNIcjs.colors_module_default.noBorder, _25TMUQNIcjs.colors_module_default.success370BorderColor);
+      case "destructive-secondary":
+        return _classnames2.default.call(void 0, _25TMUQNIcjs.colors_module_default.noBorder, _25TMUQNIcjs.colors_module_default.destructive370BorderColor);
+      default:
+        return _25TMUQNIcjs.colors_module_default.noBorder;
+    }
+  }
+}
+
+
+
+exports.border = border;
+//# sourceMappingURL=33N6APZI.cjs.map

package/dist/__chunks/{3OMIAWRN.cjs → 3F6ZYQ2N.cjs}

@@ -10,16 +10,16 @@ var _3P2PWHOUcjs = require('./3P2PWHOU.cjs');
 var _BHN2OODFcjs = require('./BHN2OODF.cjs');
 
 
-var _MKZONAGTcjs = require('./MKZONAGT.cjs');
+var _TBD42MPVcjs = require('./TBD42MPV.cjs');
 
 
-var _C3KZXHTVcjs = require('./C3KZXHTV.cjs');
+var _33N6APZIcjs = require('./33N6APZI.cjs');
 
 
-var _RAL6R27Scjs = require('./RAL6R27S.cjs');
+var _LGB3NFC4cjs = require('./LGB3NFC4.cjs');
 
 
-var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
+var _CCWSUOICcjs = require('./CCWSUOIC.cjs');
 
 // src/LinkButton/LinkButton.tsx
 var _react = require('react');
@@ -49,8 +49,8 @@ var LinkButton = _react.forwardRef.call(void 0,
     on = "lightBackground",
     onClick
   }, ref) => {
-    const foregroundColorClass = _MKZONAGTcjs.foregroundColor.call(void 0, color, on);
-    const backgroundColorClass = _RAL6R27Scjs.backgroundColor.call(void 0, color, on);
+    const foregroundColorClass = _TBD42MPVcjs.foregroundColor.call(void 0, color, on);
+    const backgroundColorClass = _LGB3NFC4cjs.backgroundColor.call(void 0, color, on);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "a",
       {
@@ -64,7 +64,7 @@ var LinkButton = _react.forwardRef.call(void 0,
           Button_module_default.button,
           foregroundColorClass,
           backgroundColorClass,
-          _C3KZXHTVcjs.border.call(void 0, color, on),
+          _33N6APZIcjs.border.call(void 0, color, on),
           Button_module_default[size],
           {
             [Button_module_default.fullWidth]: fullWidth,
@@ -85,7 +85,7 @@ var LinkButton = _react.forwardRef.call(void 0,
               )
             }
           ),
-          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCGRNBQHcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          !loading && text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CCWSUOICcjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
               className: foregroundColorClass,
@@ -133,4 +133,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=3OMIAWRN.cjs.map
+//# sourceMappingURL=3F6ZYQ2N.cjs.map

package/dist/__chunks/{2IXPTAJD.js → 3GMABSQQ.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   colors_module_default
-} from "./S6TNP7G5.js";
+} from "./UZ4ORX3X.js";
 
 // src/Typography/Typography.tsx
 import classNames from "classnames";
@@ -15,21 +15,21 @@ import { jsx } from "react/jsx-runtime";
 function textColor(color) {
   switch (color) {
     case "gray700":
-      return colors_module_default.cambioGray800Color;
+      return colors_module_default.gray800Color;
     case "white":
-      return colors_module_default.cambioWhiteColor;
+      return colors_module_default.whiteColor;
     case "inherit":
       return colors_module_default.inheritColor;
     case "destructive-primary":
-      return colors_module_default.cambioDestructive900Color;
+      return colors_module_default.destructive900Color;
     case "destructive-darkBackground":
-      return colors_module_default.cambioDestructive100Color;
+      return colors_module_default.destructive100Color;
     case "success":
-      return colors_module_default.cambioSuccess900Color;
+      return colors_module_default.success900Color;
     case "success-darkBackground":
-      return colors_module_default.cambioSuccess100Color;
+      return colors_module_default.success100Color;
     default:
-      return colors_module_default.cambioBlackColor;
+      return colors_module_default.blackColor;
   }
 }
 var Typography = forwardRef(function Typography2({
@@ -80,4 +80,4 @@ var Typography_default = Typography;
 export {
   Typography_default
 };
-//# sourceMappingURL=2IXPTAJD.js.map
+//# sourceMappingURL=3GMABSQQ.js.map

package/dist/__chunks/3GMABSQQ.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 colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(\n  color:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"destructive-darkBackground\"\n    | \"success\"\n    | \"success-darkBackground\"\n    | \"white\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.gray800Color;\n    case \"white\":\n      return colorStyles.whiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.destructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.destructive100Color;\n    case \"success\":\n      return colorStyles.success900Color;\n    case \"success-darkBackground\":\n      return colorStyles.success100Color;\n    // gray900\n    default:\n      return colorStyles.blackColor;\n  }\n}\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\";\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      | \"success\"\n      | \"success-darkBackground\"\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 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     * * `100`: 14px\n     * * `200`: 16px\n     * * `300`: 18px\n     * * `400`: 20px\n     * * `500`: 23px\n     * * `600`: 26px\n     * * `700`: 29px\n     * * `800`: 33px\n     * * `900`: 37px\n     * * `1000`: 41px\n     * * `1100`: 46px\n     *\n     * Desktop (viewport width > 480px):\n     * * `100`: 13px\n     * * `200`: 16px\n     * * `300`: 20px\n     * * `400`: 25px\n     * * `500`: 31px\n     * * `600`: 39px\n     * * `700`: 49px\n     * * `800`: 61px\n     * * `900`: 76px\n     * * `1000`: 95px\n     * * `1100`: 119px\n     *\n     * @defaultValue 200\n     */\n    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 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      )}\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_t1t27_1\",\"sansSerif\":\"_sansSerif_t1t27_22\",\"serif\":\"_serif_t1t27_27\",\"size100\":\"_size100_t1t27_71\",\"size200\":\"_size200_t1t27_75\",\"size300\":\"_size300_t1t27_79\",\"size400\":\"_size400_t1t27_83\",\"size500\":\"_size500_t1t27_87\",\"size600\":\"_size600_t1t27_91\",\"size700\":\"_size700_t1t27_95\",\"size800\":\"_size800_t1t27_99\",\"size900\":\"_size900_t1t27_103\",\"size1000\":\"_size1000_t1t27_144\",\"size1100\":\"_size1100_t1t27_148\",\"center\":\"_center_t1t27_154\",\"forceLeft\":\"_forceLeft_t1t27_158\",\"forceRight\":\"_forceRight_t1t27_162\",\"start\":\"_start_t1t27_166\",\"end\":\"_end_t1t27_170\",\"regular\":\"_regular_t1t27_176\",\"medium\":\"_medium_t1t27_180\",\"semiBold\":\"_semiBold_t1t27_184\",\"bold\":\"_bold_t1t27_188\",\"underline\":\"_underline_t1t27_192\",\"inline\":\"_inline_t1t27_196\",\"uppercase\":\"_uppercase_t1t27_200\",\"lineClamp\":\"_lineClamp_t1t27_204\"}"],"mappings":";;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,aAAY,uBAAsB,SAAQ,mBAAkB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,sBAAqB,YAAW,uBAAsB,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,uBAAsB;;;ADyLl7B;AApLJ,SAAS,UACP,OAUQ;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,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,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,MAC9B;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/{YICZLNHI.cjs → 3Q5GZWDJ.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
+var _FPDSM74Fcjs = require('./FPDSM74F.cjs');
 
 
-var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
+var _CCWSUOICcjs = require('./CCWSUOIC.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -33,7 +33,7 @@ var Badge = ({
   color = "sky"
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _DB7KX3J2cjs.Box_default,
+    _FPDSM74Fcjs.Box_default,
     {
       display: "inlineFlex",
       paddingX: 2,
@@ -43,15 +43,15 @@ var Badge = ({
       justifyContent: "center",
       minHeight: 24,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _XCGRNBQHcjs.Typography_default,
+        _CCWSUOICcjs.Typography_default,
         {
           size: 100,
           weight: "medium",
           color: textColorForBackgroundColor(color),
-          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _DB7KX3J2cjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _FPDSM74Fcjs.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, 
-              _XCGRNBQHcjs.Typography_default,
+              _CCWSUOICcjs.Typography_default,
               {
                 color: textColorForBackgroundColor(color),
                 size: 100,
@@ -70,4 +70,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=YICZLNHI.cjs.map
+//# sourceMappingURL=3Q5GZWDJ.cjs.map

package/dist/__chunks/{6BULM4PL.cjs → 3TRJH5PN.cjs}

@@ -4,26 +4,26 @@
 var _C5XPZTFOcjs = require('./C5XPZTFO.cjs');
 
 
-var _65OHGDU2cjs = require('./65OHGDU2.cjs');
+var _S3ZWPIRJcjs = require('./S3ZWPIRJ.cjs');
 
 
-var _DMA6PPUZcjs = require('./DMA6PPUZ.cjs');
+var _DCWVWQ2Fcjs = require('./DCWVWQ2F.cjs');
 
 
-var _L2CARKP7cjs = require('./L2CARKP7.cjs');
+var _M4HJ5QZMcjs = require('./M4HJ5QZM.cjs');
 
 
-var _JHUEQO5Qcjs = require('./JHUEQO5Q.cjs');
+var _S35EEGAPcjs = require('./S35EEGAP.cjs');
 
 
-var _QVR3OSXWcjs = require('./QVR3OSXW.cjs');
+var _6Y5ROOOQcjs = require('./6Y5ROOOQ.cjs');
 
 
 
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
+var _FPDSM74Fcjs = require('./FPDSM74F.cjs');
 
 // src/RichSelect/RichSelectBox.tsx
 
@@ -125,7 +125,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
       });
     }, []);
     const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _DB7KX3J2cjs.Box_default, { children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _FPDSM74Fcjs.Box_default, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _reactariacomponents.ListBox,
         {
@@ -144,7 +144,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
         }
       ),
       !autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _DB7KX3J2cjs.Box_default,
+        _FPDSM74Fcjs.Box_default,
         {
           backgroundColor: "white",
           display: "flex",
@@ -159,9 +159,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
             }
           },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DMA6PPUZcjs.Divider, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FPDSM74Fcjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DCWVWQ2Fcjs.Divider, {}) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _DB7KX3J2cjs.Box_default,
+              _FPDSM74Fcjs.Box_default,
               {
                 paddingY: 5,
                 marginTop: -5,
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                 justifyContent: "end",
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _C5XPZTFOcjs.ButtonGroup_default, { orientation: "horizontal", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _65OHGDU2cjs.Button_default,
+                    _S3ZWPIRJcjs.Button_default,
                     {
                       onClick: clearChanges,
                       color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
                     }
                   ),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _65OHGDU2cjs.Button_default,
+                    _S3ZWPIRJcjs.Button_default,
                     {
                       onClick: saveChanges,
                       text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
   }
 );
 var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _JHUEQO5Qcjs.RichSelectSection_default,
-  Chip: _L2CARKP7cjs.RichSelectChip_default,
-  RadioButton: _QVR3OSXWcjs.RichSelectRadioButton_default
+  Section: _S35EEGAPcjs.RichSelectSection_default,
+  Chip: _M4HJ5QZMcjs.RichSelectChip_default,
+  RadioButton: _6Y5ROOOQcjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=6BULM4PL.cjs.map
+//# sourceMappingURL=3TRJH5PN.cjs.map

package/dist/__chunks/{HXTCI7A3.js → 3XJZEGNR.js}

@@ -7,7 +7,7 @@ import {
 } from "./AVREYFSM.js";
 import {
   Typography_default
-} from "./2IXPTAJD.js";
+} from "./3GMABSQQ.js";
 
 // src/RichSelect/RichSelectSection.tsx
 import { forwardRef } from "react";
@@ -50,4 +50,4 @@ var RichSelectSection_default = forwardRef(
 export {
   RichSelectSection_default
 };
-//# sourceMappingURL=HXTCI7A3.js.map
+//# sourceMappingURL=3XJZEGNR.js.map

package/dist/__chunks/42PXTCNP.js

@@ -0,0 +1,9 @@
+"use client"
+
+// css-module:./colors.module.css#css-module
+var colors_module_default = { "blackColor": "_blackColor_syoug_2", "whiteColor": "_whiteColor_syoug_6", "gray100Color": "_gray100Color_syoug_10", "gray200Color": "_gray200Color_syoug_14", "gray300Color": "_gray300Color_syoug_18", "gray370Color": "_gray370Color_syoug_22", "gray700Color": "_gray700Color_syoug_26", "gray800Color": "_gray800Color_syoug_30", "gray870Color": "_gray870Color_syoug_34", "gray900Color": "_gray900Color_syoug_38", "destructive100Color": "_destructive100Color_syoug_42", "destructive300Color": "_destructive300Color_syoug_46", "destructive370Color": "_destructive370Color_syoug_50", "destructive700Color": "_destructive700Color_syoug_54", "destructive770Color": "_destructive770Color_syoug_58", "destructive900Color": "_destructive900Color_syoug_62", "success100Color": "_success100Color_syoug_66", "success300Color": "_success300Color_syoug_70", "success370Color": "_success370Color_syoug_74", "success700Color": "_success700Color_syoug_78", "success770Color": "_success770Color_syoug_82", "success900Color": "_success900Color_syoug_86", "redColor": "_redColor_syoug_90", "orangeColor": "_orangeColor_syoug_94", "tanColor": "_tanColor_syoug_98", "creamColor": "_creamColor_syoug_102", "purpleColor": "_purpleColor_syoug_106", "lilacColor": "_lilacColor_syoug_110", "thistleColor": "_thistleColor_syoug_114", "pinkColor": "_pinkColor_syoug_118", "navyColor": "_navyColor_syoug_122", "tealColor": "_tealColor_syoug_126", "slateColor": "_slateColor_syoug_130", "skyColor": "_skyColor_syoug_134", "yellow700BackgroundColor": "_yellow700BackgroundColor_syoug_138", "transparentFullBackgroundColor": "_transparentFullBackgroundColor_syoug_142", "blackBackgroundColor": "_blackBackgroundColor_syoug_146", "whiteBackgroundColor": "_whiteBackgroundColor_syoug_150", "gray100BackgroundColor": "_gray100BackgroundColor_syoug_154", "gray200BackgroundColor": "_gray200BackgroundColor_syoug_158", "gray300BackgroundColor": "_gray300BackgroundColor_syoug_162", "gray370BackgroundColor": "_gray370BackgroundColor_syoug_166", "gray700BackgroundColor": "_gray700BackgroundColor_syoug_170", "gray800BackgroundColor": "_gray800BackgroundColor_syoug_174", "gray870BackgroundColor": "_gray870BackgroundColor_syoug_178", "gray900BackgroundColor": "_gray900BackgroundColor_syoug_182", "destructive100BackgroundColor": "_destructive100BackgroundColor_syoug_186", "destructive300BackgroundColor": "_destructive300BackgroundColor_syoug_190", "destructive370BackgroundColor": "_destructive370BackgroundColor_syoug_194", "destructive700BackgroundColor": "_destructive700BackgroundColor_syoug_198", "destructive770BackgroundColor": "_destructive770BackgroundColor_syoug_202", "destructive900BackgroundColor": "_destructive900BackgroundColor_syoug_206", "success100BackgroundColor": "_success100BackgroundColor_syoug_210", "success300BackgroundColor": "_success300BackgroundColor_syoug_214", "success370BackgroundColor": "_success370BackgroundColor_syoug_218", "success700BackgroundColor": "_success700BackgroundColor_syoug_222", "success770BackgroundColor": "_success770BackgroundColor_syoug_226", "success900BackgroundColor": "_success900BackgroundColor_syoug_230", "redBackgroundColor": "_redBackgroundColor_syoug_234", "orangeBackgroundColor": "_orangeBackgroundColor_syoug_238", "tanBackgroundColor": "_tanBackgroundColor_syoug_242", "creamBackgroundColor": "_creamBackgroundColor_syoug_246", "purpleBackgroundColor": "_purpleBackgroundColor_syoug_250", "lilacBackgroundColor": "_lilacBackgroundColor_syoug_254", "thistleBackgroundColor": "_thistleBackgroundColor_syoug_258", "pinkBackgroundColor": "_pinkBackgroundColor_syoug_262", "navyBackgroundColor": "_navyBackgroundColor_syoug_266", "tealBackgroundColor": "_tealBackgroundColor_syoug_270", "slateBackgroundColor": "_slateBackgroundColor_syoug_274", "skyBackgroundColor": "_skyBackgroundColor_syoug_278" };
+
+export {
+  colors_module_default
+};
+//# sourceMappingURL=42PXTCNP.js.map

package/dist/__chunks/42PXTCNP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./colors.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"blackColor\":\"_blackColor_syoug_2\",\"whiteColor\":\"_whiteColor_syoug_6\",\"gray100Color\":\"_gray100Color_syoug_10\",\"gray200Color\":\"_gray200Color_syoug_14\",\"gray300Color\":\"_gray300Color_syoug_18\",\"gray370Color\":\"_gray370Color_syoug_22\",\"gray700Color\":\"_gray700Color_syoug_26\",\"gray800Color\":\"_gray800Color_syoug_30\",\"gray870Color\":\"_gray870Color_syoug_34\",\"gray900Color\":\"_gray900Color_syoug_38\",\"destructive100Color\":\"_destructive100Color_syoug_42\",\"destructive300Color\":\"_destructive300Color_syoug_46\",\"destructive370Color\":\"_destructive370Color_syoug_50\",\"destructive700Color\":\"_destructive700Color_syoug_54\",\"destructive770Color\":\"_destructive770Color_syoug_58\",\"destructive900Color\":\"_destructive900Color_syoug_62\",\"success100Color\":\"_success100Color_syoug_66\",\"success300Color\":\"_success300Color_syoug_70\",\"success370Color\":\"_success370Color_syoug_74\",\"success700Color\":\"_success700Color_syoug_78\",\"success770Color\":\"_success770Color_syoug_82\",\"success900Color\":\"_success900Color_syoug_86\",\"redColor\":\"_redColor_syoug_90\",\"orangeColor\":\"_orangeColor_syoug_94\",\"tanColor\":\"_tanColor_syoug_98\",\"creamColor\":\"_creamColor_syoug_102\",\"purpleColor\":\"_purpleColor_syoug_106\",\"lilacColor\":\"_lilacColor_syoug_110\",\"thistleColor\":\"_thistleColor_syoug_114\",\"pinkColor\":\"_pinkColor_syoug_118\",\"navyColor\":\"_navyColor_syoug_122\",\"tealColor\":\"_tealColor_syoug_126\",\"slateColor\":\"_slateColor_syoug_130\",\"skyColor\":\"_skyColor_syoug_134\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_syoug_138\",\"transparentFullBackgroundColor\":\"_transparentFullBackgroundColor_syoug_142\",\"blackBackgroundColor\":\"_blackBackgroundColor_syoug_146\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_syoug_150\",\"gray100BackgroundColor\":\"_gray100BackgroundColor_syoug_154\",\"gray200BackgroundColor\":\"_gray200BackgroundColor_syoug_158\",\"gray300BackgroundColor\":\"_gray300BackgroundColor_syoug_162\",\"gray370BackgroundColor\":\"_gray370BackgroundColor_syoug_166\",\"gray700BackgroundColor\":\"_gray700BackgroundColor_syoug_170\",\"gray800BackgroundColor\":\"_gray800BackgroundColor_syoug_174\",\"gray870BackgroundColor\":\"_gray870BackgroundColor_syoug_178\",\"gray900BackgroundColor\":\"_gray900BackgroundColor_syoug_182\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_syoug_186\",\"destructive300BackgroundColor\":\"_destructive300BackgroundColor_syoug_190\",\"destructive370BackgroundColor\":\"_destructive370BackgroundColor_syoug_194\",\"destructive700BackgroundColor\":\"_destructive700BackgroundColor_syoug_198\",\"destructive770BackgroundColor\":\"_destructive770BackgroundColor_syoug_202\",\"destructive900BackgroundColor\":\"_destructive900BackgroundColor_syoug_206\",\"success100BackgroundColor\":\"_success100BackgroundColor_syoug_210\",\"success300BackgroundColor\":\"_success300BackgroundColor_syoug_214\",\"success370BackgroundColor\":\"_success370BackgroundColor_syoug_218\",\"success700BackgroundColor\":\"_success700BackgroundColor_syoug_222\",\"success770BackgroundColor\":\"_success770BackgroundColor_syoug_226\",\"success900BackgroundColor\":\"_success900BackgroundColor_syoug_230\",\"redBackgroundColor\":\"_redBackgroundColor_syoug_234\",\"orangeBackgroundColor\":\"_orangeBackgroundColor_syoug_238\",\"tanBackgroundColor\":\"_tanBackgroundColor_syoug_242\",\"creamBackgroundColor\":\"_creamBackgroundColor_syoug_246\",\"purpleBackgroundColor\":\"_purpleBackgroundColor_syoug_250\",\"lilacBackgroundColor\":\"_lilacBackgroundColor_syoug_254\",\"thistleBackgroundColor\":\"_thistleBackgroundColor_syoug_258\",\"pinkBackgroundColor\":\"_pinkBackgroundColor_syoug_262\",\"navyBackgroundColor\":\"_navyBackgroundColor_syoug_266\",\"tealBackgroundColor\":\"_tealBackgroundColor_syoug_270\",\"slateBackgroundColor\":\"_slateBackgroundColor_syoug_274\",\"skyBackgroundColor\":\"_skyBackgroundColor_syoug_278\"}"],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,gBAAe,0BAAyB,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,uBAAsB,iCAAgC,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,YAAW,sBAAqB,eAAc,yBAAwB,YAAW,sBAAqB,cAAa,yBAAwB,eAAc,0BAAyB,cAAa,yBAAwB,gBAAe,2BAA0B,aAAY,wBAAuB,aAAY,wBAAuB,aAAY,wBAAuB,cAAa,yBAAwB,YAAW,uBAAsB,4BAA2B,uCAAsC,kCAAiC,6CAA4C,wBAAuB,mCAAkC,wBAAuB,mCAAkC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,0BAAyB,qCAAoC,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,iCAAgC,4CAA2C,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,sBAAqB,iCAAgC,yBAAwB,oCAAmC,sBAAqB,iCAAgC,wBAAuB,mCAAkC,yBAAwB,oCAAmC,wBAAuB,mCAAkC,0BAAyB,qCAAoC,uBAAsB,kCAAiC,uBAAsB,kCAAiC,uBAAsB,kCAAiC,wBAAuB,mCAAkC,sBAAqB,gCAA+B;","names":[]}

package/dist/__chunks/{FPDQA475.cjs → 5A7NZN6R.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 _DB7KX3J2cjs = require('./DB7KX3J2.cjs');
+var _FPDSM74Fcjs = require('./FPDSM74F.cjs');
 
 
-var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
+var _CCWSUOICcjs = require('./CCWSUOIC.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -38,7 +38,7 @@ function TextField({
   const reactId = _react.useId.call(void 0, );
   const inputId = id != null ? id : reactId;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _DB7KX3J2cjs.Box_default,
+    _FPDSM74Fcjs.Box_default,
     {
       display: "flex",
       direction: "column",
@@ -50,7 +50,7 @@ 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, _DB7KX3J2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCGRNBQHcjs.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, _FPDSM74Fcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CCWSUOICcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -67,8 +67,8 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DB7KX3J2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XCGRNBQHcjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FPDSM74Fcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _CCWSUOICcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -83,4 +83,4 @@ function TextField({
 
 
 exports.TextField = TextField;
-//# sourceMappingURL=FPDQA475.cjs.map
+//# sourceMappingURL=5A7NZN6R.cjs.map

package/dist/__chunks/{272LSIIS.cjs → 5TXFYVC6.cjs}

@@ -4,10 +4,10 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _XCGRNBQHcjs = require('./XCGRNBQH.cjs');
+var _CCWSUOICcjs = require('./CCWSUOIC.cjs');
 
 
-var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
+var _2M4NFHP3cjs = require('./2M4NFHP3.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -65,7 +65,7 @@ var Checkbox = ({
               {
                 [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
               },
-              error ? _QT6IRCGWcjs.colors_module_default.cambioDestructive370BackgroundColor : _QT6IRCGWcjs.colors_module_default.cambioGray370BackgroundColor
+              error ? _2M4NFHP3cjs.colors_module_default.destructive370BackgroundColor : _2M4NFHP3cjs.colors_module_default.gray370BackgroundColor
             ),
             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",
@@ -98,7 +98,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _XCGRNBQHcjs.Typography_default,
+          _CCWSUOICcjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray900",
@@ -114,4 +114,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=272LSIIS.cjs.map
+//# sourceMappingURL=5TXFYVC6.cjs.map

package/dist/__chunks/{272LSIIS.cjs.map → 5TXFYVC6.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","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 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\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\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\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_17ijp_1\",\"inputOverlay\":\"_inputOverlay_17ijp_9\",\"checkbox\":\"_checkbox_17ijp_17\",\"disabled\":\"_disabled_17ijp_26\",\"cursorDisabled\":\"_cursorDisabled_17ijp_30\",\"cursorEnabled\":\"_cursorEnabled_17ijp_34\",\"sm\":\"_sm_17ijp_38\",\"md\":\"_md_17ijp_43\",\"smBorderRadius\":\"_smBorderRadius_17ijp_48\",\"mdBorderRadius\":\"_mdBorderRadius_17ijp_52\",\"checkmark\":\"_checkmark_17ijp_56\",\"checkmarkError\":\"_checkmarkError_17ijp_60\"}"]}
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,gCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","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 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\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\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.destructive370BackgroundColor\n            : colorStyles.gray370BackgroundColor,\n        )}\n      >\n        {checked && (\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_17ijp_1\",\"inputOverlay\":\"_inputOverlay_17ijp_9\",\"checkbox\":\"_checkbox_17ijp_17\",\"disabled\":\"_disabled_17ijp_26\",\"cursorDisabled\":\"_cursorDisabled_17ijp_30\",\"cursorEnabled\":\"_cursorEnabled_17ijp_34\",\"sm\":\"_sm_17ijp_38\",\"md\":\"_md_17ijp_43\",\"smBorderRadius\":\"_smBorderRadius_17ijp_48\",\"mdBorderRadius\":\"_mdBorderRadius_17ijp_52\",\"checkmark\":\"_checkmark_17ijp_56\",\"checkmarkError\":\"_checkmarkError_17ijp_60\"}"]}