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

package/dist/__chunks/{VW7YADUL.mjs → 2JWMSFS7.js}

@@ -1,6 +1,6 @@
 import {
   Box_default
-} from "./JZMZ537X.mjs";
+} from "./PYNS67IV.js";
 
 // src/Modal/Layer.tsx
 import { createPortal } from "react-dom";
@@ -28,4 +28,4 @@ function Layer({
 export {
   Layer
 };
-//# sourceMappingURL=VW7YADUL.mjs.map
+//# sourceMappingURL=2JWMSFS7.js.map

package/dist/__chunks/{MQPPALTP.mjs → 2O6FDRTF.js}

@@ -4,4 +4,4 @@ var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutline
 export {
   Focus_module_default
 };
-//# sourceMappingURL=MQPPALTP.mjs.map
+//# sourceMappingURL=2O6FDRTF.js.map

package/dist/__chunks/2O6FDRTF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Focus.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Focus.module.css\"; export default {\"accessibilityOutlineFocus\":\"_accessibilityOutlineFocus_1h8bq_1\"}"],"mappings":";AAAoF,IAAO,uBAAQ,EAAC,6BAA4B,qCAAoC;","names":[]}

package/dist/__chunks/36B62A3Z.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Button/constants/textVariant.ts
+var textVariant = {
+  ["sm"]: 100,
+  ["md"]: 200,
+  ["lg"]: 300
+};
+var textVariant_default = textVariant;
+
+
+
+exports.textVariant_default = textVariant_default;
+//# sourceMappingURL=36B62A3Z.cjs.map

package/dist/__chunks/36B62A3Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"names":[],"mappings":";AAAA,IAAM,cAAc;AAAA,EAClB,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AACV;AAEA,IAAO,sBAAQ","sourcesContent":["const textVariant = {\n  [\"sm\"]: 100,\n  [\"md\"]: 200,\n  [\"lg\"]: 300,\n} as const;\n\nexport default textVariant;\n"]}

package/dist/__chunks/{PN7GAGSA.mjs → 37CQV3RS.js}

@@ -1,13 +1,13 @@
 import {
   rounding_module_default
-} from "./QQUTU6E5.mjs";
+} from "./TPMQI44L.js";
 import {
   useIsHydrated
-} from "./XFKGXL73.mjs";
+} from "./YJ7YDIGB.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./CUDAH5IW.mjs";
+} from "./LULBCTQR.js";
 
 // src/TapArea/TapArea.tsx
 import { forwardRef, useReducer } from "react";
@@ -108,4 +108,4 @@ var TapArea_default = TapArea;
 export {
   TapArea_default
 };
-//# sourceMappingURL=PN7GAGSA.mjs.map
+//# sourceMappingURL=37CQV3RS.js.map

package/dist/__chunks/{PN7GAGSA.mjs.map → 37CQV3RS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"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\"}"],"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;","names":[]}
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"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\"}"],"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;","names":[]}

package/dist/__chunks/{P4CNOF3E.js → 3F5U7W73.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _3OXEYQS2js = require('./3OXEYQS2.js');
+var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
 
 // src/Modal/Layer.tsx
 var _reactdom = require('react-dom');
@@ -11,7 +11,7 @@ function Layer({
 }) {
   return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _3OXEYQS2js.Box_default,
+      _CY6YL5T4cjs.Box_default,
       {
         "data-testid": "syntax-layer",
         position: "fixed",
@@ -28,4 +28,4 @@ function Layer({
 
 
 exports.Layer = Layer;
-//# sourceMappingURL=P4CNOF3E.js.map
+//# sourceMappingURL=3F5U7W73.cjs.map

package/dist/__chunks/{37REMIOM.js → 3HVG5AGO.cjs}

@@ -12,4 +12,4 @@ var iconSize_default = iconSize;
 
 
 exports.iconSize_default = iconSize_default;
-//# sourceMappingURL=37REMIOM.js.map
+//# sourceMappingURL=3HVG5AGO.cjs.map

package/dist/__chunks/3HVG5AGO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"names":[],"mappings":";AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEhnB,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AACjB;AAEA,IAAO,mBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\nexport default iconSize;\n"]}

package/dist/__chunks/{BXCLZFW3.js → 3TXXNWWA.cjs}

@@ -11,4 +11,4 @@ Divider.displayName = "Divider";
 
 
 exports.Divider = Divider;
-//# sourceMappingURL=BXCLZFW3.js.map
+//# sourceMappingURL=3TXXNWWA.cjs.map

package/dist/__chunks/3TXXNWWA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"names":[],"mappings":";AAA8F,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI;AADM,SAAR,UAA+C;AACpD,SAAO,oBAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_ra8vz_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"]}

package/dist/__chunks/{V4YM6NMQ.mjs → 3VUMTAUX.js}

@@ -1,12 +1,12 @@
 import {
   useIsHydrated
-} from "./XFKGXL73.mjs";
+} from "./YJ7YDIGB.js";
 import {
   foregroundColor
-} from "./SSU3B5AR.mjs";
+} from "./CATJI2RJ.js";
 import {
   backgroundColor
-} from "./5QXUIARJ.mjs";
+} from "./G4DDTGDI.js";
 
 // src/IconButton/IconButton.tsx
 import classNames from "classnames";
@@ -65,4 +65,4 @@ var IconButton_default = IconButton;
 export {
   IconButton_default
 };
-//# sourceMappingURL=V4YM6NMQ.mjs.map
+//# sourceMappingURL=3VUMTAUX.js.map

package/dist/__chunks/{V4YM6NMQ.mjs.map → 3VUMTAUX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColor(color),\n          backgroundColor(color),\n          styles[size],\n          {\n            [styles.secondaryBorder]: color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHiE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADmG/Y;AA3FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColor(color),\n          backgroundColor(color),\n          styles[size],\n          {\n            [styles.secondaryBorder]: color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADmGhZ;AA3FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

package/dist/__chunks/42YPEAFS.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Modal/FocusTrap.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
+// src/Modal/FocusTrap.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -29,9 +29,9 @@ var focusElement = (el) => {
 function FocusTrap({
   children
 }) {
-  const elRef = _react.useRef.call(void 0, null);
-  const previouslyFocusedElRef = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
+  const elRef = useRef(null);
+  const previouslyFocusedElRef = useRef(null);
+  useEffect(() => {
     const { current: element } = elRef;
     const focusFirstChild = () => {
       const withinIframe = window !== window.parent;
@@ -61,10 +61,10 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ jsx("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
-
-
-exports.FocusTrap = FocusTrap;
+export {
+  FocusTrap
+};
 //# sourceMappingURL=42YPEAFS.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"names":[],"mappings":";AAAA,SAAgB,WAAW,cAAiC;AAyFxD;AAvFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAoB;AACxC,MAAI,OAAO,GAAG,UAAU,YAAY;AAClC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,sBAAgB;AAAA,IAClB;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,sBAAsB,CAAC;AAElC,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ","sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n  // Focusable, interactive elements that could possibly be in children\n  const selector = [\n    \"a[href]\",\n    \"area[href]\",\n    \"input:not([disabled])\",\n    \"select:not([disabled])\",\n    \"textarea:not([disabled])\",\n    \"button:not([disabled])\",\n    \"iframe\",\n    \"object\",\n    \"embed\",\n    '[tabindex=\"-1\"]',\n    '[tabindex=\"0\"]',\n    \"[contenteditable]\",\n    \"audio[controls]\",\n    \"video[controls]\",\n    \"summary\",\n  ].join(\",\");\n  return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el: HTMLElement) => {\n  if (typeof el.focus === \"function\") {\n    el.focus();\n  }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n  children,\n}: {\n  children?: ReactElement | null;\n}): ReactElement {\n  const elRef = useRef<HTMLDivElement | null>(null);\n  const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const { current: element } = elRef;\n\n    // Focus the first child element among all the focusable, interactive elements within `children`\n    const focusFirstChild = () => {\n      const withinIframe = window !== window.parent;\n      if (element && !withinIframe) {\n        focusElement(queryFocusableAll(element)[0]);\n      }\n    };\n\n    const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n      if (\n        !element ||\n        (event.target instanceof Node && element.contains(event.target))\n      ) {\n        return;\n      }\n\n      // This prevents stack overflow when multiple FocusTraps are rendered\n      if (\n        event.target instanceof Element &&\n        event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n      ) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      focusFirstChild();\n    };\n\n    // If an element has focus currently, keep a reference to that element\n    previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n    focusFirstChild();\n    document.addEventListener(\"focus\", handleFocus, true);\n\n    return function cleanup() {\n      const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n      document.removeEventListener(\"focus\", handleFocus, true);\n      // If we previously stored a reference to a focused element, return focus to that element\n      if (previouslyFocusedEl) {\n        focusElement(previouslyFocusedEl);\n      }\n    };\n  }, [elRef, previouslyFocusedElRef]);\n\n  return (\n    <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n  // Focusable, interactive elements that could possibly be in children\n  const selector = [\n    \"a[href]\",\n    \"area[href]\",\n    \"input:not([disabled])\",\n    \"select:not([disabled])\",\n    \"textarea:not([disabled])\",\n    \"button:not([disabled])\",\n    \"iframe\",\n    \"object\",\n    \"embed\",\n    '[tabindex=\"-1\"]',\n    '[tabindex=\"0\"]',\n    \"[contenteditable]\",\n    \"audio[controls]\",\n    \"video[controls]\",\n    \"summary\",\n  ].join(\",\");\n  return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el: HTMLElement) => {\n  if (typeof el.focus === \"function\") {\n    el.focus();\n  }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n  children,\n}: {\n  children?: ReactElement | null;\n}): ReactElement {\n  const elRef = useRef<HTMLDivElement | null>(null);\n  const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const { current: element } = elRef;\n\n    // Focus the first child element among all the focusable, interactive elements within `children`\n    const focusFirstChild = () => {\n      const withinIframe = window !== window.parent;\n      if (element && !withinIframe) {\n        focusElement(queryFocusableAll(element)[0]);\n      }\n    };\n\n    const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n      if (\n        !element ||\n        (event.target instanceof Node && element.contains(event.target))\n      ) {\n        return;\n      }\n\n      // This prevents stack overflow when multiple FocusTraps are rendered\n      if (\n        event.target instanceof Element &&\n        event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n      ) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      focusFirstChild();\n    };\n\n    // If an element has focus currently, keep a reference to that element\n    previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n    focusFirstChild();\n    document.addEventListener(\"focus\", handleFocus, true);\n\n    return function cleanup() {\n      const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n      document.removeEventListener(\"focus\", handleFocus, true);\n      // If we previously stored a reference to a focused element, return focus to that element\n      if (previouslyFocusedEl) {\n        focusElement(previouslyFocusedEl);\n      }\n    };\n  }, [elRef, previouslyFocusedElRef]);\n\n  return (\n    <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAgB,WAAW,cAAiC;AAyFxD;AAvFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAoB;AACxC,MAAI,OAAO,GAAG,UAAU,YAAY;AAClC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,sBAAgB;AAAA,IAClB;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,sBAAsB,CAAC;AAElC,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ;","names":[]}

package/dist/__chunks/4ICD552D.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _RLYKYCEUcjs = require('./RLYKYCEU.cjs');
+
+// src/colors/backgroundColor.ts
+function backgroundColor(color) {
+  switch (color) {
+    case "secondary":
+      return _RLYKYCEUcjs.colors_module_default.primary100BackgroundColor;
+    case "destructive-primary":
+      return _RLYKYCEUcjs.colors_module_default.destructive700BackgroundColor;
+    case "destructive-secondary":
+      return _RLYKYCEUcjs.colors_module_default.destructive100BackgroundColor;
+    case "success":
+      return _RLYKYCEUcjs.colors_module_default.success700BackgroundColor;
+    case "tertiary":
+    case "destructive-tertiary":
+      return _RLYKYCEUcjs.colors_module_default.whiteBackgroundColor;
+    case "branded":
+      return _RLYKYCEUcjs.colors_module_default.yellow700BackgroundColor;
+    case "inverse":
+      return _RLYKYCEUcjs.colors_module_default.gray60BackgroundColor;
+    default:
+      return _RLYKYCEUcjs.colors_module_default.primary700BackgroundColor;
+  }
+}
+
+
+
+exports.backgroundColor = backgroundColor;
+//# sourceMappingURL=4ICD552D.cjs.map

package/dist/__chunks/4ICD552D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/backgroundColor.ts"],"names":[],"mappings":";;;;;AAGe,SAAR,gBAAiC,OAAuC;AAC7E,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,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 backgroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n      return styles.primary100BackgroundColor;\n    case \"destructive-primary\":\n      return styles.destructive700BackgroundColor;\n    case \"destructive-secondary\":\n      return styles.destructive100BackgroundColor;\n    case \"success\":\n      return styles.success700BackgroundColor;\n    case \"tertiary\":\n    case \"destructive-tertiary\":\n      return styles.whiteBackgroundColor;\n    case \"branded\":\n      return styles.yellow700BackgroundColor;\n    case \"inverse\":\n      return styles.gray60BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n"]}

package/dist/__chunks/{RCT3DP22.mjs → 4PWSK5GI.js}

@@ -12,4 +12,4 @@ var iconSize_default = iconSize;
 export {
   iconSize_default
 };
-//# sourceMappingURL=RCT3DP22.mjs.map
+//# sourceMappingURL=4PWSK5GI.js.map

package/dist/__chunks/4PWSK5GI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\nexport default iconSize;\n"],"mappings":";AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEhnB,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AACjB;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/5AR53MHD.js

@@ -1 +1 @@
-"use strict";//# sourceMappingURL=5AR53MHD.js.map
+//# sourceMappingURL=5AR53MHD.js.map

package/dist/__chunks/5AR53MHD.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/__chunks/5DBWL6IK.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Button/constants/textVariant.ts
+// src/Button/constants/textVariant.ts
 var textVariant = {
   ["sm"]: 100,
   ["md"]: 200,
@@ -6,7 +6,7 @@ var textVariant = {
 };
 var textVariant_default = textVariant;
 
-
-
-exports.textVariant_default = textVariant_default;
+export {
+  textVariant_default
+};
 //# sourceMappingURL=5DBWL6IK.js.map

package/dist/__chunks/5DBWL6IK.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"names":[],"mappings":";AAAA,IAAM,cAAc;AAAA,EAClB,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AACV;AAEA,IAAO,sBAAQ","sourcesContent":["const textVariant = {\n  [\"sm\"]: 100,\n  [\"md\"]: 200,\n  [\"lg\"]: 300,\n} as const;\n\nexport default textVariant;\n"]}
+{"version":3,"sources":["../../src/Button/constants/textVariant.ts"],"sourcesContent":["const textVariant = {\n  [\"sm\"]: 100,\n  [\"md\"]: 200,\n  [\"lg\"]: 300,\n} as const;\n\nexport default textVariant;\n"],"mappings":";AAAA,IAAM,cAAc;AAAA,EAClB,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AAAA,EACR,CAAC,IAAI,GAAG;AACV;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/{6KRS5AXC.mjs → 6VWFOSQZ.js}

@@ -11,4 +11,4 @@ Divider.displayName = "Divider";
 export {
   Divider
 };
-//# sourceMappingURL=6KRS5AXC.mjs.map
+//# sourceMappingURL=6VWFOSQZ.js.map

package/dist/__chunks/6VWFOSQZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_ra8vz_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"],"mappings":";AAA8F,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ACMjI;AADM,SAAR,UAA+C;AACpD,SAAO,oBAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc;","names":[]}

package/dist/__chunks/{S2OLRDIA.js → 7GJ2SD7O.cjs}

@@ -4,4 +4,4 @@ var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd
 
 
 exports.rounding_module_default = rounding_module_default;
-//# sourceMappingURL=S2OLRDIA.js.map
+//# sourceMappingURL=7GJ2SD7O.cjs.map

package/dist/__chunks/7GJ2SD7O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"names":[],"mappings":";AAAuF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,yBAAwB","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1bo6p_2\",\"roundingmd\":\"_roundingmd_1bo6p_6\",\"roundinglg\":\"_roundinglg_1bo6p_10\",\"roundingxl\":\"_roundingxl_1bo6p_14\",\"roundingfull\":\"_roundingfull_1bo6p_18\"}"]}

package/dist/__chunks/AFINOME7.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Modal/StopScroll.tsx
-var _react = require('react');
+// src/Modal/StopScroll.tsx
+import { useEffect } from "react";
 function StopScroll(props) {
-  _react.useEffect.call(void 0, () => {
+  useEffect(() => {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     document.body.style.overflow = "hidden";
     return () => {
@@ -11,7 +11,7 @@ function StopScroll(props) {
   return props.children;
 }
 
-
-
-exports.StopScroll = StopScroll;
+export {
+  StopScroll
+};
 //# sourceMappingURL=AFINOME7.js.map

package/dist/__chunks/AFINOME7.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal/StopScroll.tsx"],"names":[],"mappings":";AAAA,SAAS,iBAAoC;AAE9B,SAAR,WAA4B,OAElB;AACf,YAAU,MAAM;AACd,UAAM,gBAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAC7D,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,MAAM;AACf","sourcesContent":["import { useEffect, type ReactElement } from \"react\";\n\nexport default function StopScroll(props: {\n  children: ReactElement;\n}): ReactElement {\n  useEffect(() => {\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, []);\n\n  return props.children;\n}\n"]}
+{"version":3,"sources":["../../src/Modal/StopScroll.tsx"],"sourcesContent":["import { useEffect, type ReactElement } from \"react\";\n\nexport default function StopScroll(props: {\n  children: ReactElement;\n}): ReactElement {\n  useEffect(() => {\n    const originalStyle = window.getComputedStyle(document.body).overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = originalStyle;\n    };\n  }, []);\n\n  return props.children;\n}\n"],"mappings":";AAAA,SAAS,iBAAoC;AAE9B,SAAR,WAA4B,OAElB;AACf,YAAU,MAAM;AACd,UAAM,gBAAgB,OAAO,iBAAiB,SAAS,IAAI,EAAE;AAC7D,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,MAAM;AACf;","names":[]}

package/dist/__chunks/{PHVABKOK.js → ARYAYAXH.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _Y6LEUOQRjs = require('./Y6LEUOQR.js');
+var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
 
 // src/Typography/Typography.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -13,19 +13,19 @@ var _jsxruntime = require('react/jsx-runtime');
 function textColor(color) {
   switch (color) {
     case "gray700":
-      return _Y6LEUOQRjs.colors_module_default.gray700Color;
+      return _NGUJFGACcjs.colors_module_default.gray700Color;
     case "white":
-      return _Y6LEUOQRjs.colors_module_default.whiteColor;
+      return _NGUJFGACcjs.colors_module_default.whiteColor;
     case "inherit":
-      return _Y6LEUOQRjs.colors_module_default.inheritColor;
+      return _NGUJFGACcjs.colors_module_default.inheritColor;
     case "primary":
-      return _Y6LEUOQRjs.colors_module_default.primary700Color;
+      return _NGUJFGACcjs.colors_module_default.primary700Color;
     case "destructive-primary":
-      return _Y6LEUOQRjs.colors_module_default.destructive700Color;
+      return _NGUJFGACcjs.colors_module_default.destructive700Color;
     case "success":
-      return _Y6LEUOQRjs.colors_module_default.success700Color;
+      return _NGUJFGACcjs.colors_module_default.success700Color;
     default:
-      return _Y6LEUOQRjs.colors_module_default.gray900Color;
+      return _NGUJFGACcjs.colors_module_default.gray900Color;
   }
 }
 var Typography = ({
@@ -71,4 +71,4 @@ var Typography_default = Typography;
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=PHVABKOK.js.map
+//# sourceMappingURL=ARYAYAXH.cjs.map

package/dist/__chunks/{PHVABKOK.js.map → ARYAYAXH.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":[],"mappings":";;;;;AAAA,OAAO,gBAAgB;;;ACA4E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADwH5wB;AAlHJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,MA2EoB;AAClB,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.gray700Color;\n    case \"white\":\n      return colorStyles.whiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"primary\":\n      return colorStyles.primary700Color;\n    case \"destructive-primary\":\n      return colorStyles.destructive700Color;\n    case \"success\":\n      return colorStyles.success700Color;\n    default:\n      return colorStyles.gray900Color;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = ({\n  align = \"start\",\n  as = \"div\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  inline = false,\n  lineClamp = undefined,\n  size = 200,\n  tooltip,\n  transform = \"none\",\n  underline = false,\n  weight = \"regular\",\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"div\"\n   */\n  as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether the text should flow inline with other elements.\n   *\n   * @defaultValue false\n   */\n  inline?: boolean;\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text.\n   *\n   * * `100`: 12px\n   * * `200`: 14px\n   * * `300`: 16px\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 200\n   */\n  size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\n  /**\n   * The tooltip to be displayed when the user hovers the text\n   */\n  tooltip?: string;\n  /**\n   * Whether the text should be transformed to uppercase.\n   *\n   * @defaultValue \"none\"\n   */\n  transform?: \"none\" | \"uppercase\";\n  /**\n   * Whether the text has an underline.\n   *\n   * @defaultValue false\n   */\n  underline?: boolean;\n  /**\n   * Indicates the boldness of the text.\n   *\n   * @defaultValue \"regular\"\n   */\n  weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n}): ReactElement => {\n  const Tag = as;\n\n  return (\n    <Tag\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Typography;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"]}
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":[],"mappings":";;;;;AAAA,OAAO,gBAAgB;;;ACA6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADwH7wB;AAlHJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,MA2EoB;AAClB,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.gray700Color;\n    case \"white\":\n      return colorStyles.whiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"primary\":\n      return colorStyles.primary700Color;\n    case \"destructive-primary\":\n      return colorStyles.destructive700Color;\n    case \"success\":\n      return colorStyles.success700Color;\n    default:\n      return colorStyles.gray900Color;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = ({\n  align = \"start\",\n  as = \"div\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  inline = false,\n  lineClamp = undefined,\n  size = 200,\n  tooltip,\n  transform = \"none\",\n  underline = false,\n  weight = \"regular\",\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"div\"\n   */\n  as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether the text should flow inline with other elements.\n   *\n   * @defaultValue false\n   */\n  inline?: boolean;\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text.\n   *\n   * * `100`: 12px\n   * * `200`: 14px\n   * * `300`: 16px\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 200\n   */\n  size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\n  /**\n   * The tooltip to be displayed when the user hovers the text\n   */\n  tooltip?: string;\n  /**\n   * Whether the text should be transformed to uppercase.\n   *\n   * @defaultValue \"none\"\n   */\n  transform?: \"none\" | \"uppercase\";\n  /**\n   * Whether the text has an underline.\n   *\n   * @defaultValue false\n   */\n  underline?: boolean;\n  /**\n   * Indicates the boldness of the text.\n   *\n   * @defaultValue \"regular\"\n   */\n  weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n}): ReactElement => {\n  const Tag = as;\n\n  return (\n    <Tag\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"]}

package/dist/__chunks/{UDNFWDDK.mjs → BSFWQWVJ.js}

@@ -1,6 +1,6 @@
 import {
   Typography_default
-} from "./BQUP6OTG.mjs";
+} from "./F3ZST4RL.js";
 
 // src/Heading/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -33,4 +33,4 @@ var Heading_default = Heading;
 export {
   Heading_default
 };
-//# sourceMappingURL=UDNFWDDK.mjs.map
+//# sourceMappingURL=BSFWQWVJ.js.map

package/dist/__chunks/{YUPTQIXD.mjs → BSWWGQAS.js}

@@ -1,15 +1,15 @@
 import {
   Focus_module_default
-} from "./MQPPALTP.mjs";
+} from "./2O6FDRTF.js";
 import {
   Typography_default
-} from "./3HUELEGR.mjs";
+} from "./F3ZST4RL.js";
 import {
   useIsHydrated
-} from "./XFKGXL73.mjs";
+} from "./YJ7YDIGB.js";
 import {
   useFocusVisible
-} from "./FCX7QDZS.mjs";
+} from "./OGJDUOWP.js";
 
 // src/Checkbox/Checkbox.tsx
 import { useState } from "react";
@@ -108,4 +108,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=YUPTQIXD.mjs.map
+//# sourceMappingURL=BSWWGQAS.js.map

package/dist/__chunks/{2LIL7UH4.mjs.map → BSWWGQAS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const checkboxStyling = classNames(styles.checkbox, styles[size]);\n  const uncheckedStyling = classNames(checkboxStyling, styles.uncheckedBox, {\n    [styles.uncheckedBorder]: !error,\n    [styles.uncheckedErrorBorder]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n  const checkedStyling = classNames(checkboxStyling, styles.checkedBox, {\n    [styles.checkedNonError]: !error,\n    [styles.checkedError]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div className={checked ? checkedStyling : uncheckedStyling}>\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\n              d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray800\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDwE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,gBAAe,0BAAyB,mBAAkB,6BAA4B,wBAAuB,kCAAiC,cAAa,wBAAuB,mBAAkB,6BAA4B,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwFhoB,SAYQ,KAZR;AAhFJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,kBAAkB,WAAW,wBAAO,UAAU,wBAAO,IAAI,CAAC;AAChE,QAAM,mBAAmB,WAAW,iBAAiB,wBAAO,cAAc;AAAA,IACxE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,oBAAoB,GAAG;AAAA,IAC/B,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AACD,QAAM,iBAAiB,WAAW,iBAAiB,wBAAO,YAAY;AAAA,IACpE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,YAAY,GAAG;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,UAAU,iBAAiB,kBACxC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACH,GACH,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const checkboxStyling = classNames(styles.checkbox, styles[size]);\n  const uncheckedStyling = classNames(checkboxStyling, styles.uncheckedBox, {\n    [styles.uncheckedBorder]: !error,\n    [styles.uncheckedErrorBorder]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n  const checkedStyling = classNames(checkboxStyling, styles.checkedBox, {\n    [styles.checkedNonError]: !error,\n    [styles.checkedError]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div className={checked ? checkedStyling : uncheckedStyling}>\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\n              d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray800\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,gBAAe,0BAAyB,mBAAkB,6BAA4B,wBAAuB,kCAAiC,cAAa,wBAAuB,mBAAkB,6BAA4B,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADwFjoB,SAYQ,KAZR;AAhFJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,kBAAkB,WAAW,wBAAO,UAAU,wBAAO,IAAI,CAAC;AAChE,QAAM,mBAAmB,WAAW,iBAAiB,wBAAO,cAAc;AAAA,IACxE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,oBAAoB,GAAG;AAAA,IAC/B,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AACD,QAAM,iBAAiB,WAAW,iBAAiB,wBAAO,YAAY;AAAA,IACpE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,YAAY,GAAG;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,UAAU,iBAAiB,kBACxC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACH,GACH,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}