@cambly/syntax-core 10.2.0 → 10.2.2

package/dist/__chunks/{RDGPEEEH.mjs → C5IESDXE.cjs}

@@ -1,15 +1,15 @@
-import {
-  Box_default
-} from "./LKQ7PJ4S.mjs";
-import {
-  Typography_default
-} from "./BCWLWS7W.mjs";
-import {
-  useIsHydrated
-} from "./XFKGXL73.mjs";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
+
+
+var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
 // src/TextArea/TextArea.tsx
-import { useId, forwardRef } from "react";
+var _react = require('react');
 
 // css-module:./TextArea.module.css#css-module
 var TextArea_module_default = { "textarea": "_textarea_11ro9_1", "sm": "_sm_11ro9_5", "md": "_md_11ro9_10", "lg": "_lg_11ro9_15" };
@@ -18,9 +18,9 @@ var TextArea_module_default = { "textarea": "_textarea_11ro9_1", "sm": "_sm_11ro
 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
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TextArea = forwardRef(
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _jsxruntime = require('react/jsx-runtime');
+var TextArea = _react.forwardRef.call(void 0, 
   function TextArea2({
     "data-testid": dataTestId,
     disabled: disabledProp = false,
@@ -35,12 +35,12 @@ var TextArea = forwardRef(
     value = "",
     onChange
   }, forwardedRef) {
-    const isHydrated = useIsHydrated();
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
-    const reactId = useId();
+    const reactId = _react.useId.call(void 0, );
     const inputId = id != null ? id : reactId;
-    return /* @__PURE__ */ jsxs(
-      Box_default,
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _CY6YL5T4cjs.Box_default,
       {
         display: "flex",
         direction: "column",
@@ -52,13 +52,13 @@ var TextArea = forwardRef(
           }
         },
         children: [
-          /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ jsx(Typography_default, { size: 200, children: /* @__PURE__ */ jsx(
+          /* @__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,
               ref: forwardedRef,
-              className: classNames(
+              className: _classnames2.default.call(void 0, 
                 TextField_module_default.textfield,
                 TextField_module_default[size],
                 TextArea_module_default.textarea,
@@ -76,8 +76,8 @@ var TextArea = forwardRef(
               disabled
             }
           ) }),
-          (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
-            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",
@@ -91,7 +91,7 @@ var TextArea = forwardRef(
 );
 var TextArea_default = TextArea;
 
-export {
-  TextArea_default
-};
-//# sourceMappingURL=RDGPEEEH.mjs.map
+
+
+exports.TextArea_default = TextArea_default;
+//# 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/CATJI2RJ.js

@@ -1,26 +1,26 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _D24RSGYPjs = require('./D24RSGYP.js');
+import {
+  colors_module_default
+} from "./D24RSGYP.js";
 
 // src/colors/foregroundColor.ts
 function foregroundColor(color) {
   switch (color) {
     case "secondary":
     case "tertiary":
-      return _D24RSGYPjs.colors_module_default.primary700Color;
+      return colors_module_default.primary700Color;
     case "destructive-secondary":
     case "destructive-tertiary":
-      return _D24RSGYPjs.colors_module_default.destructive700Color;
+      return colors_module_default.destructive700Color;
     case "branded":
-      return _D24RSGYPjs.colors_module_default.gray900Color;
+      return colors_module_default.gray900Color;
     case "inverse":
-      return _D24RSGYPjs.colors_module_default.whiteColor;
+      return colors_module_default.whiteColor;
     default:
-      return _D24RSGYPjs.colors_module_default.whiteColor;
+      return colors_module_default.whiteColor;
   }
 }
 
-
-
-exports.foregroundColor = foregroundColor;
+export {
+  foregroundColor
+};
 //# sourceMappingURL=CATJI2RJ.js.map

package/dist/__chunks/CATJI2RJ.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/colors/foregroundColor.ts"],"names":[],"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","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"]}
+{"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/{MX7C572C.mjs → CEWOAFV2.cjs}

@@ -1,9 +1,9 @@
-import {
-  Typography_default
-} from "./BCWLWS7W.mjs";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
 
 // src/Heading/Heading.tsx
-import { jsx } from "react/jsx-runtime";
+var _jsxruntime = require('react/jsx-runtime');
 var Heading = ({
   align = "start",
   as = "h1",
@@ -14,8 +14,8 @@ var Heading = ({
   size = 500
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ jsx(
-    Typography_default,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _ARYAYAXHcjs.Typography_default,
     {
       align,
       as,
@@ -30,7 +30,7 @@ var Heading = ({
 };
 var Heading_default = Heading;
 
-export {
-  Heading_default
-};
-//# sourceMappingURL=MX7C572C.mjs.map
+
+
+exports.Heading_default = Heading_default;
+//# sourceMappingURL=CEWOAFV2.cjs.map

package/dist/__chunks/CEWOAFV2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;AA8DI;AAvDJ,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AAAA,EACA,OAAO;AACT,MA4CoB;AAClB,QAAM,SAAS,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,IAAI,UAAU;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  lineClamp,\n  size = 500,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\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   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 500\n   */\n  size?: 500 | 600 | 700 | 800;\n}): ReactElement => {\n  const weight = [700, 800].includes(size) ? \"heavy\" : \"bold\";\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      data-testid={dataTestId}\n      lineClamp={lineClamp}\n      size={size}\n      weight={weight}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"]}

package/dist/__chunks/{OQ26OWU4.mjs → CGUZFFJ2.cjs}

@@ -1,38 +1,38 @@
-import {
-  rounding_module_default
-} from "./3PCHHAIY.mjs";
-import {
-  useIsHydrated
-} from "./XFKGXL73.mjs";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./CUDAH5IW.mjs";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
 
 // src/TapArea/TapArea.tsx
-import { forwardRef, useReducer } from "react";
-import classNames from "classnames";
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./TapArea.module.css#css-module
 var TapArea_module_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" };
 
 // src/TapArea/TapArea.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+var _jsxruntime = require('react/jsx-runtime');
 function reducer(state, action) {
   switch (action.type) {
     case "BLUR":
-      return __spreadProps(__spreadValues({}, state), { focussed: false });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { focussed: false });
     case "FOCUS":
-      return __spreadProps(__spreadValues({}, state), { focussed: true });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { focussed: true });
     case "MOUSE_ENTER":
-      return __spreadProps(__spreadValues({}, state), { hovered: true });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { hovered: true });
     case "MOUSE_LEAVE":
-      return __spreadProps(__spreadValues({}, state), { hovered: false });
+      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { hovered: false });
     default:
       return state;
   }
 }
-var TapArea = forwardRef(
+var TapArea = _react.forwardRef.call(void 0, 
   ({
     children,
     accessibilityLabel,
@@ -43,9 +43,9 @@ var TapArea = forwardRef(
     rounding = "none",
     tabIndex = 0
   }, ref) => {
-    const isHydrated = useIsHydrated();
+    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
-    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {
+    const [{ hovered, focussed }, dispatch] = _react.useReducer.call(void 0, reducer, {
       hovered: false,
       focussed: false
     });
@@ -65,12 +65,12 @@ var TapArea = forwardRef(
       }
     };
     const isHoveredOrFocussed = !disabled && (hovered || focussed);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
         "aria-disabled": disabled,
         "aria-label": accessibilityLabel,
-        className: classNames(
+        className: _classnames2.default.call(void 0, 
           TapArea_module_default.tapArea,
           TapArea_module_default[`${disabled ? "disabled" : "enabled"}`],
           fullWidth && TapArea_module_default.fullWidth,
@@ -87,12 +87,12 @@ var TapArea = forwardRef(
         role: "button",
         tabIndex: disabled ? void 0 : tabIndex,
         children: [
-          !disabled && (hovered || focussed) && /* @__PURE__ */ jsx(
+          !disabled && (hovered || focussed) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "div",
             {
-              className: classNames(
+              className: _classnames2.default.call(void 0, 
                 TapArea_module_default.overlay,
-                rounding !== "none" && rounding_module_default[`rounding${rounding}`]
+                rounding !== "none" && _7GJ2SD7Ocjs.rounding_module_default[`rounding${rounding}`]
               )
             }
           ),
@@ -105,7 +105,7 @@ var TapArea = forwardRef(
 TapArea.displayName = "TapArea";
 var TapArea_default = TapArea;
 
-export {
-  TapArea_default
-};
-//# sourceMappingURL=OQ26OWU4.mjs.map
+
+
+exports.TapArea_default = TapArea_default;
+//# sourceMappingURL=CGUZFFJ2.cjs.map

package/dist/__chunks/CGUZFFJ2.cjs.map

@@ -0,0 +1 @@
+{"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/CQ2HIJ62.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _PYNS67IVjs = require('./PYNS67IV.js');
+import {
+  Box_default
+} from "./PYNS67IV.js";
 
 // src/Card/Card.tsx
-var _jsxruntime = require('react/jsx-runtime');
+import { jsx } from "react/jsx-runtime";
 function Card({
   children,
   size,
@@ -13,8 +13,8 @@ function Card({
     sm: 352,
     lg: 744
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _PYNS67IVjs.Box_default,
+  return /* @__PURE__ */ jsx(
+    Box_default,
     {
       rounding: "lg",
       padding: 5,
@@ -29,7 +29,7 @@ function Card({
   );
 }
 
-
-
-exports.Card = Card;
+export {
+  Card
+};
 //# sourceMappingURL=CQ2HIJ62.js.map

package/dist/__chunks/CQ2HIJ62.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";;;;;AAuCI;AAXW,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ","sourcesContent":["import Box from \"../Box/Box\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor=\"white\"\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import Box from \"../Box/Box\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor=\"white\"\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AAuCI;AAXW,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/__chunks/CWNH5WDG.cjs

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
+
+
+var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+// src/Chip/Chip.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "chip": "_chip_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" };
+
+// src/Chip/Chip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Chip = _react.forwardRef.call(void 0, 
+  ({
+    selected = false,
+    "data-testid": dataTestId,
+    size = "sm",
+    text,
+    onChange,
+    icon: Icon
+  }, ref) => {
+    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,
+      [Chip_module_default.disabled]: disabled
+    });
+    const iconStyles = _classnames2.default.call(void 0, Chip_module_default.icon, {
+      [Chip_module_default.selectedIcon]: selected
+    });
+    const typographySize = {
+      ["sm"]: 200,
+      ["lg"]: 300
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        className: chipStyles,
+        disabled,
+        "data-testid": dataTestId,
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        onClick: onChange,
+        children: [
+          Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
+          /* @__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",
+              children: text
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+
+
+
+exports.Chip_default = Chip_default;
+//# sourceMappingURL=CWNH5WDG.cjs.map

package/dist/__chunks/CWNH5WDG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,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/{LKQ7PJ4S.mjs → CY6YL5T4.cjs}

@@ -1,17 +1,17 @@
-import {
-  rounding_module_default
-} from "./3PCHHAIY.mjs";
-import {
-  colors_module_default
-} from "./FWVHWU47.mjs";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./CUDAH5IW.mjs";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
+
+
+var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
+
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
 
 // src/Box/Box.tsx
-import classNames from "classnames";
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Box.module.css#css-module
 var Box_module_default = { "box": "_box_bg9pe_1", "flexnone": "_flexnone_bg9pe_5", "flexgrow": "_flexgrow_bg9pe_9", "flexWrap": "_flexWrap_bg9pe_13", "alignItemscenter": "_alignItemscenter_bg9pe_18", "alignItemsstart": "_alignItemsstart_bg9pe_22", "alignItemsend": "_alignItemsend_bg9pe_26", "alignItemsstretch": "_alignItemsstretch_bg9pe_30", "alignItemsbaseline": "_alignItemsbaseline_bg9pe_34", "alignItemscenterSmall": "_alignItemscenterSmall_bg9pe_40", "alignItemsstartSmall": "_alignItemsstartSmall_bg9pe_44", "alignItemsendSmall": "_alignItemsendSmall_bg9pe_48", "alignItemsstretchSmall": "_alignItemsstretchSmall_bg9pe_52", "alignItemsbaselineSmall": "_alignItemsbaselineSmall_bg9pe_56", "alignItemscenterLarge": "_alignItemscenterLarge_bg9pe_63", "alignItemsstartLarge": "_alignItemsstartLarge_bg9pe_67", "alignItemsendLarge": "_alignItemsendLarge_bg9pe_71", "alignItemsstretchLarge": "_alignItemsstretchLarge_bg9pe_75", "alignItemsbaselineLarge": "_alignItemsbaselineLarge_bg9pe_79", "alignSelfcenter": "_alignSelfcenter_bg9pe_85", "alignSelfstart": "_alignSelfstart_bg9pe_89", "alignSelfend": "_alignSelfend_bg9pe_93", "alignSelfstretch": "_alignSelfstretch_bg9pe_97", "alignSelfbaseline": "_alignSelfbaseline_bg9pe_101", "alignSelfauto": "_alignSelfauto_bg9pe_105", "block": "_block_bg9pe_110", "flex": "_flex_bg9pe_5", "inlineBlock": "_inlineBlock_bg9pe_118", "none": "_none_bg9pe_122", "visuallyHidden": "_visuallyHidden_bg9pe_126", "blockSmall": "_blockSmall_bg9pe_140", "flexSmall": "_flexSmall_bg9pe_144", "inlineBlockSmall": "_inlineBlockSmall_bg9pe_148", "noneSmall": "_noneSmall_bg9pe_152", "visuallyHiddenSmall": "_visuallyHiddenSmall_bg9pe_156", "blockLarge": "_blockLarge_bg9pe_171", "flexLarge": "_flexLarge_bg9pe_175", "inlineBlockLarge": "_inlineBlockLarge_bg9pe_179", "noneLarge": "_noneLarge_bg9pe_183", "visuallyHiddenLarge": "_visuallyHiddenLarge_bg9pe_187", "column": "_column_bg9pe_201", "row": "_row_bg9pe_205", "columnSmall": "_columnSmall_bg9pe_211", "rowSmall": "_rowSmall_bg9pe_215", "columnLarge": "_columnLarge_bg9pe_222", "rowLarge": "_rowLarge_bg9pe_226", "gap0": "_gap0_bg9pe_232", "gap1": "_gap1_bg9pe_236", "gap2": "_gap2_bg9pe_240", "gap3": "_gap3_bg9pe_244", "gap4": "_gap4_bg9pe_248", "gap5": "_gap5_bg9pe_252", "gap6": "_gap6_bg9pe_256", "gap7": "_gap7_bg9pe_260", "gap8": "_gap8_bg9pe_264", "gap9": "_gap9_bg9pe_268", "gap10": "_gap10_bg9pe_272", "gap11": "_gap11_bg9pe_276", "gap12": "_gap12_bg9pe_280", "justifyContentcenter": "_justifyContentcenter_bg9pe_285", "justifyContentstart": "_justifyContentstart_bg9pe_289", "justifyContentend": "_justifyContentend_bg9pe_293", "justifyContentbetween": "_justifyContentbetween_bg9pe_297", "justifyContentaround": "_justifyContentaround_bg9pe_301", "justifyContentevenly": "_justifyContentevenly_bg9pe_305", "justifyContentcenterSmall": "_justifyContentcenterSmall_bg9pe_311", "justifyContentstartSmall": "_justifyContentstartSmall_bg9pe_315", "justifyContentendSmall": "_justifyContentendSmall_bg9pe_319", "justifyContentbetweenSmall": "_justifyContentbetweenSmall_bg9pe_323", "justifyContentaroundSmall": "_justifyContentaroundSmall_bg9pe_327", "justifyContentevenlySmall": "_justifyContentevenlySmall_bg9pe_331", "justifyContentcenterLarge": "_justifyContentcenterLarge_bg9pe_338", "justifyContentstartLarge": "_justifyContentstartLarge_bg9pe_342", "justifyContentendLarge": "_justifyContentendLarge_bg9pe_346", "justifyContentbetweenLarge": "_justifyContentbetweenLarge_bg9pe_350", "justifyContentaroundLarge": "_justifyContentaroundLarge_bg9pe_354", "justifyContentevenlyLarge": "_justifyContentevenlyLarge_bg9pe_358", "overflowvisible": "_overflowvisible_bg9pe_364", "overflowhidden": "_overflowhidden_bg9pe_368", "overflowscroll": "_overflowscroll_bg9pe_372", "overflowauto": "_overflowauto_bg9pe_376", "overflowinherit": "_overflowinherit_bg9pe_380", "overflowinitial": "_overflowinitial_bg9pe_384", "overflowXvisible": "_overflowXvisible_bg9pe_388", "overflowXhidden": "_overflowXhidden_bg9pe_392", "overflowXscroll": "_overflowXscroll_bg9pe_396", "overflowXauto": "_overflowXauto_bg9pe_400", "overflowXinherit": "_overflowXinherit_bg9pe_404", "overflowXinitial": "_overflowXinitial_bg9pe_408", "overflowYvisible": "_overflowYvisible_bg9pe_412", "overflowYhidden": "_overflowYhidden_bg9pe_416", "overflowYscroll": "_overflowYscroll_bg9pe_420", "overflowYauto": "_overflowYauto_bg9pe_424", "overflowYinherit": "_overflowYinherit_bg9pe_428", "overflowYinitial": "_overflowYinitial_bg9pe_432", "absolute": "_absolute_bg9pe_437", "fixed": "_fixed_bg9pe_441", "relative": "_relative_bg9pe_445", "sticky": "_sticky_bg9pe_449" };
@@ -23,11 +23,11 @@ var margin_module_default = { "marginBottom-12": "_marginBottom-12_1whn1_2", "ma
 var padding_module_default = { "paddingX0": "_paddingX0_1aqye_2", "paddingX1": "_paddingX1_1aqye_7", "paddingX2": "_paddingX2_1aqye_12", "paddingX3": "_paddingX3_1aqye_17", "paddingX4": "_paddingX4_1aqye_22", "paddingX5": "_paddingX5_1aqye_27", "paddingX6": "_paddingX6_1aqye_32", "paddingX7": "_paddingX7_1aqye_37", "paddingX8": "_paddingX8_1aqye_42", "paddingX9": "_paddingX9_1aqye_47", "paddingX10": "_paddingX10_1aqye_52", "paddingX11": "_paddingX11_1aqye_57", "paddingX12": "_paddingX12_1aqye_62", "paddingY0": "_paddingY0_1aqye_67", "paddingY1": "_paddingY1_1aqye_72", "paddingY2": "_paddingY2_1aqye_77", "paddingY3": "_paddingY3_1aqye_82", "paddingY4": "_paddingY4_1aqye_87", "paddingY5": "_paddingY5_1aqye_92", "paddingY6": "_paddingY6_1aqye_97", "paddingY7": "_paddingY7_1aqye_102", "paddingY8": "_paddingY8_1aqye_107", "paddingY9": "_paddingY9_1aqye_112", "paddingY10": "_paddingY10_1aqye_117", "paddingY11": "_paddingY11_1aqye_122", "paddingY12": "_paddingY12_1aqye_127", "paddingX0Small": "_paddingX0Small_1aqye_134", "paddingX1Small": "_paddingX1Small_1aqye_139", "paddingX2Small": "_paddingX2Small_1aqye_144", "paddingX3Small": "_paddingX3Small_1aqye_149", "paddingX4Small": "_paddingX4Small_1aqye_154", "paddingX5Small": "_paddingX5Small_1aqye_159", "paddingX6Small": "_paddingX6Small_1aqye_164", "paddingX7Small": "_paddingX7Small_1aqye_169", "paddingX8Small": "_paddingX8Small_1aqye_174", "paddingX9Small": "_paddingX9Small_1aqye_179", "paddingX10Small": "_paddingX10Small_1aqye_184", "paddingX11Small": "_paddingX11Small_1aqye_189", "paddingX12Small": "_paddingX12Small_1aqye_194", "paddingY0Small": "_paddingY0Small_1aqye_199", "paddingY1Small": "_paddingY1Small_1aqye_204", "paddingY2Small": "_paddingY2Small_1aqye_209", "paddingY3Small": "_paddingY3Small_1aqye_214", "paddingY4Small": "_paddingY4Small_1aqye_219", "paddingY5Small": "_paddingY5Small_1aqye_224", "paddingY6Small": "_paddingY6Small_1aqye_229", "paddingY7Small": "_paddingY7Small_1aqye_234", "paddingY8Small": "_paddingY8Small_1aqye_239", "paddingY9Small": "_paddingY9Small_1aqye_244", "paddingY10Small": "_paddingY10Small_1aqye_249", "paddingY11Small": "_paddingY11Small_1aqye_254", "paddingY12Small": "_paddingY12Small_1aqye_259", "paddingX0Large": "_paddingX0Large_1aqye_267", "paddingX1Large": "_paddingX1Large_1aqye_272", "paddingX2Large": "_paddingX2Large_1aqye_277", "paddingX3Large": "_paddingX3Large_1aqye_282", "paddingX4Large": "_paddingX4Large_1aqye_287", "paddingX5Large": "_paddingX5Large_1aqye_292", "paddingX6Large": "_paddingX6Large_1aqye_297", "paddingX7Large": "_paddingX7Large_1aqye_302", "paddingX8Large": "_paddingX8Large_1aqye_307", "paddingX9Large": "_paddingX9Large_1aqye_312", "paddingX10Large": "_paddingX10Large_1aqye_317", "paddingX11Large": "_paddingX11Large_1aqye_322", "paddingX12Large": "_paddingX12Large_1aqye_327", "paddingY0Large": "_paddingY0Large_1aqye_332", "paddingY1Large": "_paddingY1Large_1aqye_337", "paddingY2Large": "_paddingY2Large_1aqye_342", "paddingY3Large": "_paddingY3Large_1aqye_347", "paddingY4Large": "_paddingY4Large_1aqye_352", "paddingY5Large": "_paddingY5Large_1aqye_357", "paddingY6Large": "_paddingY6Large_1aqye_362", "paddingY7Large": "_paddingY7Large_1aqye_367", "paddingY8Large": "_paddingY8Large_1aqye_372", "paddingY9Large": "_paddingY9Large_1aqye_377", "paddingY10Large": "_paddingY10Large_1aqye_382", "paddingY11Large": "_paddingY11Large_1aqye_387", "paddingY12Large": "_paddingY12Large_1aqye_392" };
 
 // src/Box/Box.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var Box = forwardRef(function Box2(props, ref) {
+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 = __objRest(_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 = forwardRef(function Box2(props, ref) {
     minHeight,
     minWidth,
     width
-  } = _b, maybePassThroughProps = __objRest(_b, [
+  } = _b, maybePassThroughProps = _I64JGYX7cjs.__objRest.call(void 0, _b, [
     // Classname
     "alignItems",
     "smAlignItems",
@@ -143,13 +143,13 @@ var Box = forwardRef(function Box2(props, ref) {
     "width"
   ]);
   const parsedProps = {
-    className: classNames(
+    className: _classnames2.default.call(void 0, 
       Box_module_default.box,
       alignItems && Box_module_default[`alignItems${alignItems}`],
       smAlignItems && Box_module_default[`alignItems${smAlignItems}Small`],
       lgAlignItems && Box_module_default[`alignItems${lgAlignItems}Large`],
       alignSelf && Box_module_default[`alignSelf${alignSelf}`],
-      backgroundColor && 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 = forwardRef(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" && 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: __spreadValues({
+    style: _I64JGYX7cjs.__spreadValues.call(void 0, {
       height,
       maxHeight,
       maxWidth,
@@ -219,11 +219,11 @@ var Box = forwardRef(function Box2(props, ref) {
     }
     return acc;
   }, {});
-  return /* @__PURE__ */ jsx(BoxElement, __spreadProps(__spreadValues(__spreadValues({}, 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;
 
-export {
-  Box_default
-};
-//# sourceMappingURL=LKQ7PJ4S.mjs.map
+
+
+exports.Box_default = Box_default;
+//# sourceMappingURL=CY6YL5T4.cjs.map