@cambly/syntax-core 10.2.0-beta.1 → 10.2.1

package/dist/__chunks/{3ZLWNPWB.js → C5IESDXE.cjs}

@@ -1,21 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _E2XTXKKBjs = require('./E2XTXKKB.js');
+var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
 
 
-var _PHVABKOKjs = require('./PHVABKOK.js');
+var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
 
 
-var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
 // src/TextArea/TextArea.tsx
 var _react = require('react');
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "textarea": "_textarea_p9jl4_1", "sm": "_sm_p9jl4_5", "md": "_md_p9jl4_10", "lg": "_lg_p9jl4_15" };
+var TextArea_module_default = { "textarea": "_textarea_11ro9_1", "sm": "_sm_11ro9_5", "md": "_md_11ro9_10", "lg": "_lg_11ro9_15" };
 
 // css-module:../TextField/TextField.module.css#css-module
-var TextField_module_default = { "textfield": "_textfield_1ipzf_1", "textfieldBorderRadius": "_textfieldBorderRadius_1ipzf_11", "label": "_label_1ipzf_26", "sm": "_sm_1ipzf_30", "smHeight": "_smHeight_1ipzf_36", "md": "_md_1ipzf_40", "mdHeight": "_mdHeight_1ipzf_46", "lg": "_lg_1ipzf_50", "lgHeight": "_lgHeight_1ipzf_56", "inputError": "_inputError_1ipzf_60" };
+var TextField_module_default = { "textfield": "_textfield_bmndn_1", "label": "_label_bmndn_20", "sm": "_sm_bmndn_24", "smHeight": "_smHeight_bmndn_31", "md": "_md_bmndn_35", "mdHeight": "_mdHeight_bmndn_42", "lg": "_lg_bmndn_46", "lgHeight": "_lgHeight_bmndn_53", "inputError": "_inputError_bmndn_57" };
 
 // src/TextArea/TextArea.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -35,12 +35,12 @@ var TextArea = _react.forwardRef.call(void 0,
     value = "",
     onChange
   }, forwardedRef) {
-    const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
     const reactId = _react.useId.call(void 0, );
     const inputId = id != null ? id : reactId;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _E2XTXKKBjs.Box_default,
+      _CY6YL5T4cjs.Box_default,
       {
         display: "flex",
         direction: "column",
@@ -52,8 +52,8 @@ var TextArea = _react.forwardRef.call(void 0,
           }
         },
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E2XTXKKBjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PHVABKOKjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PHVABKOKjs.Typography_default, { size: 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ARYAYAXHcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ARYAYAXHcjs.Typography_default, { size: 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               "data-testid": dataTestId,
@@ -76,8 +76,8 @@ var TextArea = _react.forwardRef.call(void 0,
               disabled
             }
           ) }),
-          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _E2XTXKKBjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _PHVABKOKjs.Typography_default,
+          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _ARYAYAXHcjs.Typography_default,
             {
               size: 100,
               color: errorText ? "destructive-primary" : "gray700",
@@ -94,4 +94,4 @@ var TextArea_default = TextArea;
 
 
 exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=3ZLWNPWB.js.map
+//# sourceMappingURL=C5IESDXE.cjs.map

package/dist/__chunks/C5IESDXE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"names":["TextArea"],"mappings":";;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,MAAK,eAAc,MAAK,gBAAe,MAAK,eAAc;;;ACAvG,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AFK5W,OAAO,gBAAgB;AAmFjB,SAaM,KAbN;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,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,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,QAEA;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,yBAAgB,IAAI;AAAA,gBACpB,wBAAO;AAAA,gBACP,wBAAO,IAAI;AAAA,gBACX;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,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={200}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              textFieldStyles[size],\n              styles.textarea,\n              styles[size],\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-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_11ro9_1\",\"sm\":\"_sm_11ro9_5\",\"md\":\"_md_11ro9_10\",\"lg\":\"_lg_11ro9_15\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"]}

package/dist/__chunks/{SSU3B5AR.mjs → CATJI2RJ.js}

@@ -1,6 +1,6 @@
 import {
   colors_module_default
-} from "./FLKYHNRX.mjs";
+} from "./D24RSGYP.js";
 
 // src/colors/foregroundColor.ts
 function foregroundColor(color) {
@@ -11,7 +11,6 @@ function foregroundColor(color) {
     case "destructive-secondary":
     case "destructive-tertiary":
       return colors_module_default.destructive700Color;
-    case "primary":
     case "branded":
       return colors_module_default.gray900Color;
     case "inverse":
@@ -24,4 +23,4 @@ function foregroundColor(color) {
 export {
   foregroundColor
 };
-//# sourceMappingURL=SSU3B5AR.mjs.map
+//# sourceMappingURL=CATJI2RJ.js.map

package/dist/__chunks/{F4HTASEF.mjs.map → CATJI2RJ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/colors/foregroundColor.ts"],"sourcesContent":["import { type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return styles.primary700Color;\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return styles.destructive700Color;\n    case \"branded\":\n      return styles.gray900Color;\n    default:\n      return styles.whiteColor;\n  }\n}\n"],"mappings":";;;;;AAGe,SAAR,gBAAiC,OAAuC;AAC7E,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF;","names":[]}
+{"version":3,"sources":["../../src/colors/foregroundColor.ts"],"sourcesContent":["import { type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return styles.primary700Color;\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return styles.destructive700Color;\n    case \"branded\":\n      return styles.gray900Color;\n    case \"inverse\":\n      return styles.whiteColor;\n    default:\n      return styles.whiteColor;\n  }\n}\n"],"mappings":";;;;;AAGe,SAAR,gBAAiC,OAAuC;AAC7E,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF;","names":[]}

package/dist/__chunks/{OLOF45YI.js → CEWOAFV2.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _PTAZUBW6js = require('./PTAZUBW6.js');
+var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
 
 // src/Heading/Heading.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -15,7 +15,7 @@ var Heading = ({
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _PTAZUBW6js.Typography_default,
+    _ARYAYAXHcjs.Typography_default,
     {
       align,
       as,
@@ -33,4 +33,4 @@ var Heading_default = Heading;
 
 
 exports.Heading_default = Heading_default;
-//# sourceMappingURL=OLOF45YI.js.map
+//# sourceMappingURL=CEWOAFV2.cjs.map

package/dist/__chunks/{LKIXWY5D.js → CGUZFFJ2.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _S2OLRDIAjs = require('./S2OLRDIA.js');
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 
 
-var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
 
 
-var _LULBCTQRjs = require('./LULBCTQR.js');
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
 
 // src/TapArea/TapArea.tsx
 var _react = require('react');
@@ -21,13 +21,13 @@ var _jsxruntime = require('react/jsx-runtime');
 function reducer(state, action) {
   switch (action.type) {
     case "BLUR":
-      return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { focussed: false });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { focussed: false });
     case "FOCUS":
-      return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { focussed: true });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { focussed: true });
     case "MOUSE_ENTER":
-      return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { hovered: true });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { hovered: true });
     case "MOUSE_LEAVE":
-      return _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, state), { hovered: false });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { hovered: false });
     default:
       return state;
   }
@@ -43,7 +43,7 @@ var TapArea = _react.forwardRef.call(void 0,
     rounding = "none",
     tabIndex = 0
   }, ref) => {
-    const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
     const [{ hovered, focussed }, dispatch] = _react.useReducer.call(void 0, reducer, {
       hovered: false,
@@ -92,7 +92,7 @@ var TapArea = _react.forwardRef.call(void 0,
             {
               className: _classnames2.default.call(void 0, 
                 TapArea_module_default.overlay,
-                rounding !== "none" && _S2OLRDIAjs.rounding_module_default[`rounding${rounding}`]
+                rounding !== "none" && _7GJ2SD7Ocjs.rounding_module_default[`rounding${rounding}`]
               )
             }
           ),
@@ -108,4 +108,4 @@ var TapArea_default = TapArea;
 
 
 exports.TapArea_default = TapArea_default;
-//# sourceMappingURL=LKIXWY5D.js.map
+//# sourceMappingURL=CGUZFFJ2.cjs.map

package/dist/__chunks/{LKIXWY5D.js.map → CGUZFFJ2.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgC,YAAY,kBAAkB;AAC9D,OAAO,gBAAgB;;;ACDsE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADyHjT,SAqBI,KArBJ;AArEN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,EACb,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,QAChC;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,uBAAO;AAAA,gBACP,aAAa,UAAU,wBAAe,WAAW,UAAU;AAAA,cAC7D;AAAA;AAAA,UACF;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ","sourcesContent":["import React, { type ReactNode, forwardRef, useReducer } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `lg`: 16px\n   * * `xl`: 32px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n  (\n    {\n      children,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullWidth = true,\n      onClick,\n      rounding = \"none\",\n      tabIndex = 0,\n    }: TapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n\n    return (\n      <div\n        aria-disabled={disabled}\n        aria-label={accessibilityLabel}\n        className={classNames(\n          styles.tapArea,\n          styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullWidth && styles.fullWidth,\n          isHoveredOrFocussed && styles.hoveredOrFocussed,\n        )}\n        data-testid={dataTestId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={() => dispatch({ type: \"MOUSE_ENTER\" })}\n        onMouseLeave={() => dispatch({ type: \"MOUSE_LEAVE\" })}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div\n            className={classNames(\n              styles.overlay,\n              rounding !== \"none\" && roundingStyles[`rounding${rounding}`],\n            )}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"]}
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgC,YAAY,kBAAkB;AAC9D,OAAO,gBAAgB;;;ACDuE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADyHlT,SAqBI,KArBJ;AArEN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,EACb,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,QAChC;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,uBAAO;AAAA,gBACP,aAAa,UAAU,wBAAe,WAAW,UAAU;AAAA,cAC7D;AAAA;AAAA,UACF;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ","sourcesContent":["import React, { type ReactNode, forwardRef, useReducer } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `lg`: 16px\n   * * `xl`: 32px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n  (\n    {\n      children,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullWidth = true,\n      onClick,\n      rounding = \"none\",\n      tabIndex = 0,\n    }: TapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n\n    return (\n      <div\n        aria-disabled={disabled}\n        aria-label={accessibilityLabel}\n        className={classNames(\n          styles.tapArea,\n          styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullWidth && styles.fullWidth,\n          isHoveredOrFocussed && styles.hoveredOrFocussed,\n        )}\n        data-testid={dataTestId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={() => dispatch({ type: \"MOUSE_ENTER\" })}\n        onMouseLeave={() => dispatch({ type: \"MOUSE_LEAVE\" })}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div\n            className={classNames(\n              styles.overlay,\n              rounding !== \"none\" && roundingStyles[`rounding${rounding}`],\n            )}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"]}

package/dist/__chunks/{Z4IY6SNT.mjs → CQ2HIJ62.js}

@@ -1,6 +1,6 @@
 import {
   Box_default
-} from "./JZMZ537X.mjs";
+} from "./PYNS67IV.js";
 
 // src/Card/Card.tsx
 import { jsx } from "react/jsx-runtime";
@@ -32,4 +32,4 @@ function Card({
 export {
   Card
 };
-//# sourceMappingURL=Z4IY6SNT.mjs.map
+//# sourceMappingURL=CQ2HIJ62.js.map

package/dist/__chunks/{4ONM4N5U.js → CWNH5WDG.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _3OXEYQS2js = require('./3OXEYQS2.js');
+var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
 
 
-var _PTAZUBW6js = require('./PTAZUBW6.js');
+var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
 
 
-var _YJ7YDIGBjs = require('./YJ7YDIGB.js');
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
 // src/Chip/Chip.tsx
 var _react = require('react');
@@ -26,7 +26,7 @@ var Chip = _react.forwardRef.call(void 0,
     onChange,
     icon: Icon
   }, ref) => {
-    const isHydrated = _YJ7YDIGBjs.useIsHydrated.call(void 0, );
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated;
     const chipStyles = _classnames2.default.call(void 0, Chip_module_default.chip, Chip_module_default[size], {
       [Chip_module_default.selectedChip]: selected,
@@ -51,8 +51,8 @@ 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, _3OXEYQS2js.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _PTAZUBW6js.Typography_default,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _ARYAYAXHcjs.Typography_default,
             {
               size: typographySize[size],
               color: selected ? "white" : "gray900",
@@ -70,4 +70,4 @@ var Chip_default = Chip;
 
 
 exports.Chip_default = Chip_default;
-//# sourceMappingURL=4ONM4N5U.js.map
+//# sourceMappingURL=CWNH5WDG.cjs.map

package/dist/__chunks/{GAMU7S2F.js.map → CWNH5WDG.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDgE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwEvS,SASW,KATX;AA3BN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC;AAElB,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,MACvB,CAAC,oBAAO,QAAQ,GAAG;AAAA,IACrB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,eAAe,IAAI;AAAA,cACzB,OAAO,WAAW,UAAU;AAAA,cAE3B;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype ChipProps = {\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * * `sm`: 32px\n   * * `lg`: 48px\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated;\n\n    const chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\n      [styles.disabled]: disabled,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n    const typographySize = {\n      [\"sm\"]: 200,\n      [\"lg\"]: 300,\n    } as const;\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography\n            size={typographySize[size]}\n            color={selected ? \"white\" : \"gray900\"}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_nvvgx_1\",\"disabled\":\"_disabled_nvvgx_12\",\"selectedChip\":\"_selectedChip_nvvgx_17\",\"icon\":\"_icon_nvvgx_22\",\"selectedIcon\":\"_selectedIcon_nvvgx_30\",\"sm\":\"_sm_nvvgx_34\",\"lg\":\"_lg_nvvgx_40\"}"]}
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwExS,SASW,KATX;AA3BN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC;AAElB,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,MACvB,CAAC,oBAAO,QAAQ,GAAG;AAAA,IACrB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AACD,UAAM,iBAAiB;AAAA,MACrB,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,IAAI,GAAG;AAAA,IACV;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBAAQ,oBAAC,QAAK,WAAW,YAAY;AAAA,UACtC,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,eAAe,IAAI;AAAA,cACzB,OAAO,WAAW,UAAU;AAAA,cAE3B;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype ChipProps = {\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the chip.\n   *\n   * * `sm`: 32px\n   * * `lg`: 48px\n   *\n   * @defaultValue sm\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated;\n\n    const chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\n      [styles.disabled]: disabled,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n    const typographySize = {\n      [\"sm\"]: 200,\n      [\"lg\"]: 300,\n    } as const;\n    return (\n      <button\n        className={chipStyles}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && <Icon className={iconStyles} />}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography\n            size={typographySize[size]}\n            color={selected ? \"white\" : \"gray900\"}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_nvvgx_1\",\"disabled\":\"_disabled_nvvgx_12\",\"selectedChip\":\"_selectedChip_nvvgx_17\",\"icon\":\"_icon_nvvgx_22\",\"selectedIcon\":\"_selectedIcon_nvvgx_30\",\"sm\":\"_sm_nvvgx_34\",\"lg\":\"_lg_nvvgx_40\"}"]}

package/dist/__chunks/{E2XTXKKB.js → CY6YL5T4.cjs}

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _S2OLRDIAjs = require('./S2OLRDIA.js');
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 
 
-var _Y6LEUOQRjs = require('./Y6LEUOQR.js');
+var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
 
 
 
 
-var _LULBCTQRjs = require('./LULBCTQR.js');
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
 
 // src/Box/Box.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -27,7 +27,7 @@ var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
   var _c;
-  const _a = props, { as: BoxElement = "div", children } = _a, boxProps = _LULBCTQRjs.__objRest.call(void 0, _a, ["as", "children"]);
+  const _a = props, { as: BoxElement = "div", children } = _a, boxProps = _I64JGYX7cjs.__objRest.call(void 0, _a, ["as", "children"]);
   const _b = boxProps, {
     alignItems: alignItems,
     smAlignItems,
@@ -82,7 +82,7 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
     minHeight,
     minWidth,
     width
-  } = _b, maybePassThroughProps = _LULBCTQRjs.__objRest.call(void 0, _b, [
+  } = _b, maybePassThroughProps = _I64JGYX7cjs.__objRest.call(void 0, _b, [
     // Classname
     "alignItems",
     "smAlignItems",
@@ -149,7 +149,7 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
       smAlignItems && Box_module_default[`alignItems${smAlignItems}Small`],
       lgAlignItems && Box_module_default[`alignItems${lgAlignItems}Large`],
       alignSelf && Box_module_default[`alignSelf${alignSelf}`],
-      backgroundColor && _Y6LEUOQRjs.colors_module_default[`${backgroundColor}BackgroundColor`],
+      backgroundColor && _NGUJFGACcjs.colors_module_default[`${backgroundColor}BackgroundColor`],
       direction && Box_module_default[direction],
       smDirection && Box_module_default[`${smDirection}Small`],
       lgDirection && Box_module_default[`${lgDirection}Large`],
@@ -199,12 +199,12 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
       smJustifyContent && Box_module_default[`justifyContent${smJustifyContent}Small`],
       lgJustifyContent && Box_module_default[`justifyContent${lgJustifyContent}Large`],
       position && position !== "static" && Box_module_default[position],
-      rounding && rounding !== "none" && _S2OLRDIAjs.rounding_module_default[`rounding${rounding}`],
+      rounding && rounding !== "none" && _7GJ2SD7Ocjs.rounding_module_default[`rounding${rounding}`],
       overflow && Box_module_default[`overflow${overflow}`],
       overflowX && Box_module_default[`overflowX${overflowX}`],
       overflowY && Box_module_default[`overflowY${overflowY}`]
     ),
-    style: _LULBCTQRjs.__spreadValues.call(void 0, {
+    style: _I64JGYX7cjs.__spreadValues.call(void 0, {
       height,
       maxHeight,
       maxWidth,
@@ -219,11 +219,11 @@ var Box = _react.forwardRef.call(void 0, function Box2(props, ref) {
     }
     return acc;
   }, {});
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoxElement, _LULBCTQRjs.__spreadProps.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, _LULBCTQRjs.__spreadValues.call(void 0, {}, parsedProps), passthroughProps), { ref, children }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BoxElement, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, parsedProps), passthroughProps), { ref, children }));
 });
 var Box_default = Box;
 
 
 
 exports.Box_default = Box_default;
-//# sourceMappingURL=E2XTXKKB.js.map
+//# sourceMappingURL=CY6YL5T4.cjs.map