@cambly/syntax-core 10.9.0 → 10.10.0

package/dist/__chunks/{CRDTRKBH.js → GHQXAXV3.js}

@@ -1,24 +1,25 @@
+"use client"
 import {
   Button_module_default
-} from "./DSGIOBWG.js";
+} from "./46XGANFF.js";
 import {
   cambioColor,
   classicColor
-} from "./K3H7QFPB.js";
+} from "./GFKDPMFK.js";
 import {
   cambioForegroundColor,
   classicForegroundColor
-} from "./YHKD5YRY.js";
+} from "./JVOQF4CG.js";
 import {
   cambioBackgroundColor,
   classicBackgroundColor
-} from "./YOMN7RCA.js";
+} from "./Y2OAIOQE.js";
 import {
   useTheme
-} from "./RXNTJFP4.js";
+} from "./RN3PLPAG.js";
 import {
   useIsHydrated
-} from "./YJ7YDIGB.js";
+} from "./JB65NEXK.js";
 
 // src/IconButton/IconButton.tsx
 import classNames from "classnames";
@@ -92,4 +93,4 @@ var IconButton_default = IconButton;
 export {
   IconButton_default
 };
-//# sourceMappingURL=CRDTRKBH.js.map
+//# sourceMappingURL=GHQXAXV3.js.map

package/dist/__chunks/{CRDTRKBH.js.map → GHQXAXV3.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n  sm: styles.smIconCambio,\n  md: styles.mdIconCambio,\n  lg: styles.lgIconCambio,\n  xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\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    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\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          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.iconButtonNoBorder]:\n              (themeName === \"classic\" &&\n                ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n              themeName === \"cambio\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={\n            themeName === \"classic\"\n              ? classicIconSize[size]\n              : cambioIconSize[size]\n          }\n        />\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_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD8JrlB;AA7IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA6EA,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;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,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;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;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 {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n  sm: styles.smIconCambio,\n  md: styles.mdIconCambio,\n  lg: styles.lgIconCambio,\n  xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\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    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\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          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.iconButtonNoBorder]:\n              (themeName === \"classic\" &&\n                ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n              themeName === \"cambio\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={\n            themeName === \"classic\"\n              ? classicIconSize[size]\n              : cambioIconSize[size]\n          }\n        />\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_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD8JrlB;AA7IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA6EA,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;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,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;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

package/dist/__chunks/{2IVYMX2N.cjs → H44LFJ2L.cjs}

@@ -1,24 +1,25 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _33HJ72Y2cjs = require('./33HJ72Y2.cjs');
 
+var _WRTSVDQZcjs = require('./WRTSVDQZ.cjs');
 
 
-var _PSWX5DBCcjs = require('./PSWX5DBC.cjs');
 
+var _HWQUS53Mcjs = require('./HWQUS53M.cjs');
 
 
-var _VS4SS6B3cjs = require('./VS4SS6B3.cjs');
 
+var _RKEF7WKZcjs = require('./RKEF7WKZ.cjs');
 
 
-var _MF7Q6ZSWcjs = require('./MF7Q6ZSW.cjs');
 
+var _A4O4F3KKcjs = require('./A4O4F3KK.cjs');
 
-var _WKDXUPAMcjs = require('./WKDXUPAM.cjs');
 
+var _COV3XKSJcjs = require('./COV3XKSJ.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 // src/IconButton/IconButton.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -51,10 +52,10 @@ var IconButton = _react.forwardRef.call(void 0,
     tooltip,
     onClick
   }, ref) => {
-    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
-    const { themeName } = _WKDXUPAMcjs.useTheme.call(void 0, );
-    const foregroundColorClass = themeName === "classic" ? _VS4SS6B3cjs.classicForegroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _VS4SS6B3cjs.cambioForegroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
-    const backgroundColorClass = themeName === "classic" ? _MF7Q6ZSWcjs.classicBackgroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _MF7Q6ZSWcjs.cambioBackgroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
+    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
+    const { themeName } = _COV3XKSJcjs.useTheme.call(void 0, );
+    const foregroundColorClass = themeName === "classic" ? _RKEF7WKZcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _RKEF7WKZcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color));
+    const backgroundColorClass = themeName === "classic" ? _A4O4F3KKcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _A4O4F3KKcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color));
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
@@ -70,8 +71,8 @@ var IconButton = _react.forwardRef.call(void 0,
           backgroundColorClass,
           themeName === "classic" ? IconButton_module_default[size] : IconButton_module_default[`${size}Cambio`],
           {
-            [_33HJ72Y2cjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
-            [_33HJ72Y2cjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
+            [_WRTSVDQZcjs.Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
+            [_WRTSVDQZcjs.Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary",
             [IconButton_module_default.iconButtonNoBorder]: themeName === "classic" && !["secondary", "destructive-secondary"].includes(color) || themeName === "cambio"
           }
         ),
@@ -92,4 +93,4 @@ var IconButton_default = IconButton;
 
 
 exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=2IVYMX2N.cjs.map
+//# sourceMappingURL=H44LFJ2L.cjs.map

package/dist/__chunks/H44LFJ2L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAKvB,SAAgB,kBAAkB;;;ACLkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,sBAAqB,+BAA8B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,YAAW,sBAAqB,YAAW,sBAAqB,YAAW,sBAAqB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,2BAA0B,gBAAe,0BAAyB;;;AD8JrlB;AA7IR,IAAM,kBAAkB;AAAA,EACtB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AAEA,IAAM,iBAAiB;AAAA,EACrB,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AAAA,EACX,IAAI,0BAAO;AACb;AA6EA,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;AACjC,UAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,UAAM,uBACJ,cAAc,YACV,uBAAuB,aAAa,KAAK,CAAC,IAC1C,sBAAsB,YAAY,KAAK,CAAC;AAE9C,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;AAAA,UACA;AAAA,UACA,cAAc,YAAY,0BAAO,IAAI,IAAI,0BAAO,GAAG,YAAY;AAAA,UAC/D;AAAA,YACE,CAAC,sBAAa,eAAe,GAC3B,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,sBAAa,0BAA0B,GACtC,cAAc,aAAa,UAAU;AAAA,YACvC,CAAC,0BAAO,kBAAkB,GACvB,cAAc,aACb,CAAC,CAAC,aAAa,uBAAuB,EAAE,SAAS,KAAK,KACxD,cAAc;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WACE,cAAc,YACV,gBAAgB,IAAI,IACpB,eAAe,IAAI;AAAA;AAAA,QAE3B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"../Button/constants/color\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\n\nconst classicIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nconst cambioIconSize = {\n  sm: styles.smIconCambio,\n  md: styles.mdIconCambio,\n  lg: styles.lgIconCambio,\n  xl: styles.xlIconCambio,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\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    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color));\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color));\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          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [buttonStyles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n            [styles.iconButtonNoBorder]:\n              (themeName === \"classic\" &&\n                ![\"secondary\", \"destructive-secondary\"].includes(color)) ||\n              themeName === \"cambio\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={\n            themeName === \"classic\"\n              ? classicIconSize[size]\n              : cambioIconSize[size]\n          }\n        />\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_1q9cs_1\",\"iconButtonNoBorder\":\"_iconButtonNoBorder_1q9cs_8\",\"sm\":\"_sm_1q9cs_49\",\"md\":\"_md_1q9cs_54\",\"lg\":\"_lg_1q9cs_59\",\"smCambio\":\"_smCambio_1q9cs_64\",\"mdCambio\":\"_mdCambio_1q9cs_69\",\"lgCambio\":\"_lgCambio_1q9cs_74\",\"smIcon\":\"_smIcon_1q9cs_79\",\"mdIcon\":\"_mdIcon_1q9cs_86\",\"lgIcon\":\"_lgIcon_1q9cs_93\",\"smIconCambio\":\"_smIconCambio_1q9cs_100\",\"mdIconCambio\":\"_mdIconCambio_1q9cs_107\",\"lgIconCambio\":\"_lgIconCambio_1q9cs_114\",\"xlIconCambio\":\"_xlIconCambio_1q9cs_121\"}"]}

package/dist/__chunks/{74UCGNED.js → HK7MBW32.js}

@@ -1,6 +1,7 @@
+"use client"
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 
 // src/Card/Card.tsx
 import { jsx } from "react/jsx-runtime";
@@ -33,4 +34,4 @@ function Card({
 export {
   Card
 };
-//# sourceMappingURL=74UCGNED.js.map
+//# sourceMappingURL=HK7MBW32.js.map

package/dist/__chunks/{74UCGNED.js.map → HK7MBW32.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\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 background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\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  backgroundColor = \"white\",\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={backgroundColor}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AA8CI;AAZW,SAAR,KAAsB;AAAA,EAC3B,kBAAkB;AAAA,EAClB;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;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\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 background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\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  backgroundColor = \"white\",\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={backgroundColor}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;AA8CI;AAZW,SAAR,KAAsB;AAAA,EAC3B,kBAAkB;AAAA,EAClB;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;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/__chunks/{DAMHOGG6.js → HNDUANRX.js}

@@ -1,13 +1,14 @@
+"use client"
 import {
   Chip_default
-} from "./3UFCDOCF.js";
+} from "./IYVE2HA6.js";
 import {
   RichSelectItem_default
-} from "./Y6L6EOCB.js";
+} from "./3AAZZWKY.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./LULBCTQR.js";
+} from "./UWGNJENA.js";
 
 // src/RichSelect/RichSelectChip.tsx
 import { forwardRef } from "react";
@@ -30,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=DAMHOGG6.js.map
+//# sourceMappingURL=HNDUANRX.js.map

package/dist/__chunks/{DAMHOGG6.js.map → HNDUANRX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectChip.tsx"],"sourcesContent":["import React, { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport Chip from \"../Chip/Chip\";\nimport RichSelectItem, { type RichSelectItemProps } from \"./RichSelectItem\";\n\ntype RichSelectChipProps = RichSelectItemProps;\n\nexport default forwardRef<HTMLDivElement, RichSelectChipProps>(\n  function RichSelectChip(\n    props: RichSelectChipProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ): ReactElement {\n    return (\n      <RichSelectItem {...props} ref={ref}>\n        {({ isSelected, isFocusVisible, isDisabled }) => (\n          <Chip\n            text={props.label}\n            selected={isSelected}\n            disabled={isDisabled}\n            dangerouslyForceFocusStyles={isFocusVisible}\n            onChange={() => undefined}\n          />\n        )}\n      </RichSelectItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmC,kBAAqC;AAc9D;AARV,IAAO,yBAAQ;AAAA,EACb,SAAS,eACP,OACA,KACc;AACd,WACE,oBAAC,yDAAmB,QAAnB,EAA0B,KACxB,WAAC,EAAE,YAAY,gBAAgB,WAAW,MACzC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,6BAA6B;AAAA,QAC7B,UAAU,MAAM;AAAA;AAAA,IAClB,IAEJ;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../src/RichSelect/RichSelectChip.tsx"],"sourcesContent":["import React, { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport Chip from \"../Chip/Chip\";\nimport RichSelectItem, { type RichSelectItemProps } from \"./RichSelectItem\";\n\ntype RichSelectChipProps = RichSelectItemProps;\n\nexport default forwardRef<HTMLDivElement, RichSelectChipProps>(\n  function RichSelectChip(\n    props: RichSelectChipProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ): ReactElement {\n    return (\n      <RichSelectItem {...props} ref={ref}>\n        {({ isSelected, isFocusVisible, isDisabled }) => (\n          <Chip\n            text={props.label}\n            selected={isSelected}\n            disabled={isDisabled}\n            dangerouslyForceFocusStyles={isFocusVisible}\n            onChange={() => undefined}\n          />\n        )}\n      </RichSelectItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAmC,kBAAqC;AAc9D;AARV,IAAO,yBAAQ;AAAA,EACb,SAAS,eACP,OACA,KACc;AACd,WACE,oBAAC,yDAAmB,QAAnB,EAA0B,KACxB,WAAC,EAAE,YAAY,gBAAgB,WAAW,MACzC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA,QACV,6BAA6B;AAAA,QAC7B,UAAU,MAAM;AAAA;AAAA,IAClB,IAEJ;AAAA,EAEJ;AACF;","names":[]}

package/dist/__chunks/{PBWG2BB5.cjs → HUIHS6RN.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Modal/StopScroll.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// src/Modal/StopScroll.tsx
 var _react = require('react');
 function StopScroll(props) {
   _react.useEffect.call(void 0, () => {
@@ -14,4 +16,4 @@ function StopScroll(props) {
 
 
 exports.StopScroll = StopScroll;
-//# sourceMappingURL=PBWG2BB5.cjs.map
+//# sourceMappingURL=HUIHS6RN.cjs.map

package/dist/__chunks/HUIHS6RN.cjs.map

@@ -0,0 +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"]}

package/dist/__chunks/{PSWX5DBC.cjs → HWQUS53M.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Button/constants/color.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// src/Button/constants/color.ts
 function classicColor(color) {
   if (color === "destructive-tertiary") {
     return "destructive-secondary";
@@ -20,4 +22,4 @@ function cambioColor(color) {
 
 
 exports.classicColor = classicColor; exports.cambioColor = cambioColor;
-//# sourceMappingURL=PSWX5DBC.cjs.map
+//# sourceMappingURL=HWQUS53M.cjs.map

package/dist/__chunks/HWQUS53M.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/constants/color.ts"],"names":[],"mappings":";;;AAAO,SAAS,aACd,OAqBY;AACZ,MAAI,UAAU,wBAAwB;AACpC,WAAO;AAAA,EACT,WACE,UAAU,qBACV,UAAU,uBACV,UAAU,oBACV;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,SAAS,YACd,OAuBqB;AACrB,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,EACT,WAES,UAAU,WAAW;AAC5B,WAAO;AAAA,EACT;AACA,SAAO;AACT","sourcesContent":["export function classicColor(\n  color:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\",\n):\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"destructive-primary\"\n  | \"destructive-secondary\"\n  | \"branded\"\n  | \"success\"\n  | \"inverse\" {\n  if (color === \"destructive-tertiary\") {\n    return \"destructive-secondary\";\n  } else if (\n    color === \"success-primary\" ||\n    color === \"success-secondary\" ||\n    color === \"success-tertiary\"\n  ) {\n    return \"success\";\n  }\n  return color;\n}\n\nexport function cambioColor(\n  color:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\",\n):\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"destructive-primary\"\n  | \"destructive-secondary\"\n  | \"destructive-tertiary\"\n  | \"branded\"\n  | \"success-primary\"\n  | \"success-secondary\"\n  | \"success-tertiary\" {\n  if (color === \"success\") {\n    return \"success-primary\";\n  }\n  // TODO - validate with AJ\n  else if (color === \"inverse\") {\n    return \"secondary\";\n  }\n  return color;\n}\n"]}

package/dist/__chunks/{BQ6CW43H.js → IDI4ITMK.js}

@@ -1,12 +1,13 @@
+"use client"
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 import {
   Typography_default
-} from "./32FNU7ZY.js";
+} from "./L7PPCZM5.js";
 import {
   useIsHydrated
-} from "./YJ7YDIGB.js";
+} from "./JB65NEXK.js";
 
 // src/TextField/TextField.tsx
 import {
@@ -88,4 +89,4 @@ function TextField({
 export {
   TextField
 };
-//# sourceMappingURL=BQ6CW43H.js.map
+//# sourceMappingURL=IDI4ITMK.js.map

package/dist/__chunks/{BQ6CW43H.js.map → IDI4ITMK.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\n}): 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 && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          styles[size],\n          styles[`${size}Height`],\n          {\n            [styles.inputError]: errorText,\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\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","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\"}"],"mappings":";;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AD8FxW,SAcQ,KAdR;AAhFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,yBAAO,IAAI;AAAA,cACX,yBAAO,GAAG,YAAY;AAAA,cACtB;AAAA,gBACE,CAAC,yBAAO,UAAU,GAAG;AAAA,cACvB;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\n}): 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 && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          styles[size],\n          styles[`${size}Height`],\n          {\n            [styles.inputError]: errorText,\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\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","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\"}"],"mappings":";;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AD8FxW,SAcQ,KAdR;AAhFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,yBAAO,IAAI;AAAA,cACX,yBAAO,GAAG,YAAY;AAAA,cACtB;AAAA,gBACE,CAAC,yBAAO,UAAU,GAAG;AAAA,cACvB;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/__chunks/{7W5RYLTS.cjs → IYA2TMMR.cjs}

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _ZDMSFZS3cjs = require('./ZDMSFZS3.cjs');
 
+var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
 
-var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
 
+var _SBCGYV6Ncjs = require('./SBCGYV6N.cjs');
 
-var _TIW4V757cjs = require('./TIW4V757.cjs');
+
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
 // src/RichSelect/RichSelectSection.tsx
 var _react = require('react');
@@ -31,14 +32,14 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
         ref,
         "data-testid": dataTestId,
         className: _classnames2.default.call(void 0, 
-          [_VMARHE5Bcjs.Box_module_default.box, _VMARHE5Bcjs.Box_module_default.flex, _VMARHE5Bcjs.Box_module_default.flexWrap, _VMARHE5Bcjs.Box_module_default.gap3],
+          [_SBCGYV6Ncjs.Box_module_default.box, _SBCGYV6Ncjs.Box_module_default.flex, _SBCGYV6Ncjs.Box_module_default.flexWrap, _SBCGYV6Ncjs.Box_module_default.gap3],
           {
-            [_VMARHE5Bcjs.Box_module_default.row]: orientation === "horizontal",
-            [_VMARHE5Bcjs.Box_module_default.column]: orientation === "vertical"
+            [_SBCGYV6Ncjs.Box_module_default.row]: orientation === "horizontal",
+            [_SBCGYV6Ncjs.Box_module_default.column]: orientation === "vertical"
           }
         ),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _ZDMSFZS3cjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TIW4V757cjs.Typography_default, { children: label }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { children: label }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Collection, { children })
         ]
       }
@@ -49,4 +50,4 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectSection_default = RichSelectSection_default;
-//# sourceMappingURL=7W5RYLTS.cjs.map
+//# sourceMappingURL=IYA2TMMR.cjs.map

package/dist/__chunks/IYA2TMMR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAgB,kBAAqC;AACrD;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,OACT;AACP,OAAO,gBAAgB;AAsBjB,SAYI,KAZJ;AAVN,IAAO,4BAAQ;AAAA,EACb,SAAS,kBAAkB,OAAO,KAAmB;AACnD,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT,CAAC,mBAAU,KAAK,mBAAU,MAAM,mBAAU,UAAU,mBAAU,IAAI;AAAA,UAClE;AAAA,YACE,CAAC,mBAAU,GAAG,GAAG,gBAAgB;AAAA,YACjC,CAAC,mBAAU,MAAM,GAAG,gBAAgB;AAAA,UACtC;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,mBAAgB,WAAW,WAAW,sBAAa,SAAS,GAC3D,8BAAC,sBAAY,iBAAM,GACrB;AAAA,UACA,oBAAC,uBAAqB,UAAS;AAAA;AAAA;AAAA,IACjC;AAAA,EAEJ;AACF","sourcesContent":["import React, { forwardRef, type ReactElement } from \"react\";\nimport {\n  Section as ReactAriaSection,\n  Header as ReactAriaHeader,\n  Collection as ReactAriaCollection,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport Typography from \"../Typography/Typography\";\n\ntype RichSelectSectionProps = {\n  \"data-testid\"?: string;\n  label: string;\n  children: ReactElement | ReactElement[];\n  orientation?: \"horizontal\" | \"vertical\";\n};\n\nexport default forwardRef<HTMLDivElement, RichSelectSectionProps>(\n  function RichSelectSection(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      label,\n      children,\n      orientation = \"horizontal\",\n    } = props;\n\n    return (\n      <ReactAriaSection\n        ref={ref}\n        data-testid={dataTestId}\n        className={classNames(\n          [boxStyles.box, boxStyles.flex, boxStyles.flexWrap, boxStyles.gap3],\n          {\n            [boxStyles.row]: orientation === \"horizontal\",\n            [boxStyles.column]: orientation === \"vertical\",\n          },\n        )}\n      >\n        <ReactAriaHeader className={classNames(layoutStyles.fullWidth)}>\n          <Typography>{label}</Typography>\n        </ReactAriaHeader>\n        <ReactAriaCollection>{children}</ReactAriaCollection>\n      </ReactAriaSection>\n    );\n  },\n);\n"]}

package/dist/__chunks/{3UFCDOCF.js → IYVE2HA6.js}

@@ -1,12 +1,13 @@
+"use client"
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 import {
   Typography_default
-} from "./32FNU7ZY.js";
+} from "./L7PPCZM5.js";
 import {
   useIsHydrated
-} from "./YJ7YDIGB.js";
+} from "./JB65NEXK.js";
 
 // src/Chip/Chip.tsx
 import { forwardRef } from "react";
@@ -73,4 +74,4 @@ var Chip_default = Chip;
 export {
   Chip_default
 };
-//# sourceMappingURL=3UFCDOCF.js.map
+//# sourceMappingURL=IYVE2HA6.js.map

package/dist/__chunks/{3UFCDOCF.js.map → IYVE2HA6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"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   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\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  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\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      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\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\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_kwro3_1\",\"disabled\":\"_disabled_kwro3_13\",\"selectedChip\":\"_selectedChip_kwro3_18\",\"icon\":\"_icon_kwro3_23\",\"selectedIcon\":\"_selectedIcon_kwro3_31\",\"sm\":\"_sm_kwro3_35\",\"lg\":\"_lg_kwro3_41\",\"forceFocus\":\"_forceFocus_kwro3_48\"}"],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADkF5U,SASW,KATX;AA/BN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,MACvB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,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;AAEA,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;","names":[]}
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"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   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\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  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\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      disabled: disabledProp = false,\n      selected = false,\n      \"data-testid\": dataTestId,\n      size = \"sm\",\n      text,\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const chipStyles = classnames(styles.chip, styles[size], {\n      [styles.selectedChip]: selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\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\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_kwro3_1\",\"disabled\":\"_disabled_kwro3_13\",\"selectedChip\":\"_selectedChip_kwro3_18\",\"icon\":\"_icon_kwro3_23\",\"selectedIcon\":\"_selectedIcon_kwro3_31\",\"sm\":\"_sm_kwro3_35\",\"lg\":\"_lg_kwro3_41\",\"forceFocus\":\"_forceFocus_kwro3_48\"}"],"mappings":";;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,gBAAe,0BAAyB,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADkF5U,SASW,KATX;AA/BN,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,eAAe;AAAA,IACf,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI,GAAG;AAAA,MACvD,CAAC,oBAAO,YAAY,GAAG;AAAA,MACvB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,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;AAEA,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;","names":[]}

package/dist/__chunks/{MQUMPR4A.js → J6IV47MV.js}

@@ -1,26 +1,27 @@
+"use client"
 import {
   IconButton_default
-} from "./CRDTRKBH.js";
+} from "./GHQXAXV3.js";
 import {
   Dialog_default
-} from "./ZEA5JDEB.js";
+} from "./OULAADL7.js";
 import {
   padding_module_default
-} from "./652STTPK.js";
+} from "./ZOWOFYUE.js";
 import {
   Box_module_default
-} from "./KMIZI5PW.js";
+} from "./O3CEUWCC.js";
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 import {
   OverlayVisibility
-} from "./XKDASN7N.js";
+} from "./E5KMIBEU.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./LULBCTQR.js";
+} from "./UWGNJENA.js";
 
 // src/Dialog/ModalDialog.tsx
 import {
@@ -156,4 +157,4 @@ export {
   AriaModal,
   ModalDialog_default
 };
-//# sourceMappingURL=MQUMPR4A.js.map
+//# sourceMappingURL=J6IV47MV.js.map

package/dist/__chunks/{MQUMPR4A.js.map → J6IV47MV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/ModalDialog.tsx","css-module:./ModalDialog.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  forwardRef,\n  type ComponentProps,\n} from \"react\";\nimport {\n  Modal as ReactAriaModal,\n  ModalOverlay as ReactAriaModalOverlay,\n  composeRenderProps,\n  type ModalOverlayProps as ReactAriaModalOverlayProps,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport Dialog, { type DialogProps } from \"./Dialog\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./ModalDialog.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Box from \"../Box/Box\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string; className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\ntype AriaModalOverlayProps = {\n  \"data-testid\"?: string;\n} & ReactAriaModalOverlayProps;\n/**\n * AriaModalOverlay: This component extends ModalOverlay from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n */\nexport const AriaModalOverlay = forwardRef<\n  HTMLDivElement,\n  AriaModalOverlayProps\n>(function AriaModalOverlay({ children, ...otherProps }, ref): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    boxStyles.fixed,\n    boxStyles.box,\n    boxStyles.flex,\n    boxStyles.column,\n    boxStyles.alignItemscenter,\n    boxStyles.justifyContentcenter,\n    paddingStyles.paddingX4,\n    paddingStyles.paddingY4,\n    styles.modalOverlay,\n  ]);\n  return (\n    <ReactAriaModalOverlay ref={ref} {...mergeProps({ className }, otherProps)}>\n      {children}\n    </ReactAriaModalOverlay>\n  );\n});\n\ntype AriaModalProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ComponentProps<typeof ReactAriaModal>;\n/**\n * AriaModal: This component extends Modal from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaModal = forwardRef<HTMLDivElement, AriaModalProps>(\n  function AriaModal(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    const className = classNames([boxStyles.box, styles.modal]);\n    return (\n      <ReactAriaModal ref={ref} {...mergeProps({ className }, otherProps)}>\n        {composeRenderProps(\n          childrenProp,\n          (children, { isEntering, isExiting }) => (\n            <>\n              <OverlayVisibility\n                isEntering={isEntering}\n                isExiting={isExiting}\n                onChange={onChangeContentVisibility}\n              />\n              {children}\n            </>\n          ),\n        )}\n      </ReactAriaModal>\n    );\n  },\n);\n\ntype ModalDialogProps = DialogProps & {\n  /** Whether dialog can be dismissed with click outside / Escape key  */\n  dismissable?: boolean;\n  /** render visible initially. */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of modal dialog externally */\n  open?: boolean;\n  /** Optional override for default dismiss button accessibility label */\n  accessibilityCloseLabel?: string;\n};\n\n/**\n * ModalDialog is a controlled component -- visibility is managed with the `open` prop.\n *\n * Example Usage:\n ```\n  <ModalDialog\n    open={open}\n    initialOpen\n    content={<Box>I am some content</Box>}\n    onChangeContentVisibility={(visible) => ...}\n  >\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </ModalDialog>\n ```\n */\nconst ModalDialog = forwardRef<HTMLDivElement, ModalDialogProps>(\n  function ModalDialog(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      accessibilityLabel,\n      children,\n      dismissable = true,\n      accessibilityCloseLabel = \"Dismiss\",\n      initialOpen,\n      onChangeContentVisibility,\n      onOpenChange,\n      open,\n    } = props;\n\n    return (\n      <AriaModalOverlay\n        isDismissable={dismissable}\n        isKeyboardDismissDisabled={!dismissable}\n        defaultOpen={initialOpen}\n        isOpen={open}\n        onOpenChange={onOpenChange}\n      >\n        {({ state }) => (\n          <AriaModal\n            ref={ref}\n            aria-label={accessibilityLabel}\n            onChangeContentVisibility={onChangeContentVisibility}\n          >\n            <Dialog\n              accessibilityLabel={accessibilityLabel}\n              data-testid={dataTestId}\n            >\n              <Box\n                position=\"absolute\"\n                padding={2}\n                dangerouslySetInlineStyle={{\n                  __style: {\n                    top: \"0\",\n                    right: \"0\",\n                  },\n                }}\n              >\n                <IconButton\n                  onClick={() => state.close()}\n                  color=\"tertiary\"\n                  accessibilityLabel={accessibilityCloseLabel}\n                  icon={XIcon}\n                />\n              </Box>\n              {children}\n            </Dialog>\n          </AriaModal>\n        )}\n      </AriaModalOverlay>\n    );\n  },\n);\n\nexport default ModalDialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css\"; export default {\"modalOverlay\":\"_modalOverlay_1fy5w_1\",\"modal\":\"_modal_1fy5w_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OAEK;AACP;AAAA,EACE,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB;AAAA,OAEK;AACP,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;;;ACZsE,IAAO,6BAAQ,EAAC,gBAAe,yBAAwB,SAAQ,iBAAgB;;;ADwB1K,SA6DM,UA7DN,KA6DM,YA7DN;AAHN,SAAS,MAAM,EAAE,QAAQ,OAAO,GAA2C;AACzE,SACE,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,MAAM,OACnE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAUO,IAAM,mBAAmB,WAG9B,SAASA,kBAAiB,IAA6B,KAAmB;AAAhD,eAAE,WA3C9B,IA2C4B,IAAe,uBAAf,IAAe,CAAb;AAC5B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,2BAAO;AAAA,EACT,CAAC;AACD,SACE,oBAAC,sDAAsB,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAxE,EACE,WACH;AAEJ,CAAC;AAaM,IAAM,YAAY;AAAA,EACvB,SAASC,WACP,IACA,KACc;AAFd,iBAAE,YAAU,cAAc,0BA5E9B,IA4EI,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,UAAM,YAAY,WAAW,CAAC,mBAAU,KAAK,2BAAO,KAAK,CAAC;AAC1D,WACE,oBAAC,+CAAe,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAjE,EACE;AAAA,MACC;AAAA,MACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACC;AAAA,SACH;AAAA,IAEJ,IACF;AAAA,EAEJ;AACF;AAkCA,IAAM,cAAc;AAAA,EAClB,SAASC,aAAY,OAAO,KAAmB;AAC7C,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,2BAA2B,CAAC;AAAA,QAC5B,aAAa;AAAA,QACb,QAAQ;AAAA,QACR;AAAA,QAEC,WAAC,EAAE,MAAM,MACR;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,eAAa;AAAA,gBAEb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAS;AAAA,sBACT,SAAS;AAAA,sBACT,2BAA2B;AAAA,wBACzB,SAAS;AAAA,0BACP,KAAK;AAAA,0BACL,OAAO;AAAA,wBACT;AAAA,sBACF;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAS,MAAM,MAAM,MAAM;AAAA,0BAC3B,OAAM;AAAA,0BACN,oBAAoB;AAAA,0BACpB,MAAM;AAAA;AAAA,sBACR;AAAA;AAAA,kBACF;AAAA,kBACC;AAAA;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,sBAAQ;","names":["AriaModalOverlay","AriaModal","ModalDialog"]}
+{"version":3,"sources":["../../src/Dialog/ModalDialog.tsx","css-module:./ModalDialog.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  forwardRef,\n  type ComponentProps,\n} from \"react\";\nimport {\n  Modal as ReactAriaModal,\n  ModalOverlay as ReactAriaModalOverlay,\n  composeRenderProps,\n  type ModalOverlayProps as ReactAriaModalOverlayProps,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport Dialog, { type DialogProps } from \"./Dialog\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./ModalDialog.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Box from \"../Box/Box\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string; className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\ntype AriaModalOverlayProps = {\n  \"data-testid\"?: string;\n} & ReactAriaModalOverlayProps;\n/**\n * AriaModalOverlay: This component extends ModalOverlay from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n */\nexport const AriaModalOverlay = forwardRef<\n  HTMLDivElement,\n  AriaModalOverlayProps\n>(function AriaModalOverlay({ children, ...otherProps }, ref): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    boxStyles.fixed,\n    boxStyles.box,\n    boxStyles.flex,\n    boxStyles.column,\n    boxStyles.alignItemscenter,\n    boxStyles.justifyContentcenter,\n    paddingStyles.paddingX4,\n    paddingStyles.paddingY4,\n    styles.modalOverlay,\n  ]);\n  return (\n    <ReactAriaModalOverlay ref={ref} {...mergeProps({ className }, otherProps)}>\n      {children}\n    </ReactAriaModalOverlay>\n  );\n});\n\ntype AriaModalProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ComponentProps<typeof ReactAriaModal>;\n/**\n * AriaModal: This component extends Modal from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaModal = forwardRef<HTMLDivElement, AriaModalProps>(\n  function AriaModal(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    const className = classNames([boxStyles.box, styles.modal]);\n    return (\n      <ReactAriaModal ref={ref} {...mergeProps({ className }, otherProps)}>\n        {composeRenderProps(\n          childrenProp,\n          (children, { isEntering, isExiting }) => (\n            <>\n              <OverlayVisibility\n                isEntering={isEntering}\n                isExiting={isExiting}\n                onChange={onChangeContentVisibility}\n              />\n              {children}\n            </>\n          ),\n        )}\n      </ReactAriaModal>\n    );\n  },\n);\n\ntype ModalDialogProps = DialogProps & {\n  /** Whether dialog can be dismissed with click outside / Escape key  */\n  dismissable?: boolean;\n  /** render visible initially. */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of modal dialog externally */\n  open?: boolean;\n  /** Optional override for default dismiss button accessibility label */\n  accessibilityCloseLabel?: string;\n};\n\n/**\n * ModalDialog is a controlled component -- visibility is managed with the `open` prop.\n *\n * Example Usage:\n ```\n  <ModalDialog\n    open={open}\n    initialOpen\n    content={<Box>I am some content</Box>}\n    onChangeContentVisibility={(visible) => ...}\n  >\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </ModalDialog>\n ```\n */\nconst ModalDialog = forwardRef<HTMLDivElement, ModalDialogProps>(\n  function ModalDialog(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      accessibilityLabel,\n      children,\n      dismissable = true,\n      accessibilityCloseLabel = \"Dismiss\",\n      initialOpen,\n      onChangeContentVisibility,\n      onOpenChange,\n      open,\n    } = props;\n\n    return (\n      <AriaModalOverlay\n        isDismissable={dismissable}\n        isKeyboardDismissDisabled={!dismissable}\n        defaultOpen={initialOpen}\n        isOpen={open}\n        onOpenChange={onOpenChange}\n      >\n        {({ state }) => (\n          <AriaModal\n            ref={ref}\n            aria-label={accessibilityLabel}\n            onChangeContentVisibility={onChangeContentVisibility}\n          >\n            <Dialog\n              accessibilityLabel={accessibilityLabel}\n              data-testid={dataTestId}\n            >\n              <Box\n                position=\"absolute\"\n                padding={2}\n                dangerouslySetInlineStyle={{\n                  __style: {\n                    top: \"0\",\n                    right: \"0\",\n                  },\n                }}\n              >\n                <IconButton\n                  onClick={() => state.close()}\n                  color=\"tertiary\"\n                  accessibilityLabel={accessibilityCloseLabel}\n                  icon={XIcon}\n                />\n              </Box>\n              {children}\n            </Dialog>\n          </AriaModal>\n        )}\n      </AriaModalOverlay>\n    );\n  },\n);\n\nexport default ModalDialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css\"; export default {\"modalOverlay\":\"_modalOverlay_1fy5w_1\",\"modal\":\"_modal_1fy5w_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OAEK;AACP;AAAA,EACE,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB;AAAA,OAEK;AACP,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;;;ACZsE,IAAO,6BAAQ,EAAC,gBAAe,yBAAwB,SAAQ,iBAAgB;;;ADwB1K,SA6DM,UA7DN,KA6DM,YA7DN;AAHN,SAAS,MAAM,EAAE,QAAQ,OAAO,GAA2C;AACzE,SACE,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,MAAM,OACnE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAUO,IAAM,mBAAmB,WAG9B,SAASA,kBAAiB,IAA6B,KAAmB;AAAhD,eAAE,WA3C9B,IA2C4B,IAAe,uBAAf,IAAe,CAAb;AAC5B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,2BAAO;AAAA,EACT,CAAC;AACD,SACE,oBAAC,sDAAsB,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAxE,EACE,WACH;AAEJ,CAAC;AAaM,IAAM,YAAY;AAAA,EACvB,SAASC,WACP,IACA,KACc;AAFd,iBAAE,YAAU,cAAc,0BA5E9B,IA4EI,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,UAAM,YAAY,WAAW,CAAC,mBAAU,KAAK,2BAAO,KAAK,CAAC;AAC1D,WACE,oBAAC,+CAAe,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAjE,EACE;AAAA,MACC;AAAA,MACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACC;AAAA,SACH;AAAA,IAEJ,IACF;AAAA,EAEJ;AACF;AAkCA,IAAM,cAAc;AAAA,EAClB,SAASC,aAAY,OAAO,KAAmB;AAC7C,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,2BAA2B,CAAC;AAAA,QAC5B,aAAa;AAAA,QACb,QAAQ;AAAA,QACR;AAAA,QAEC,WAAC,EAAE,MAAM,MACR;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,eAAa;AAAA,gBAEb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAS;AAAA,sBACT,SAAS;AAAA,sBACT,2BAA2B;AAAA,wBACzB,SAAS;AAAA,0BACP,KAAK;AAAA,0BACL,OAAO;AAAA,wBACT;AAAA,sBACF;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAS,MAAM,MAAM,MAAM;AAAA,0BAC3B,OAAM;AAAA,0BACN,oBAAoB;AAAA,0BACpB,MAAM;AAAA;AAAA,sBACR;AAAA;AAAA,kBACF;AAAA,kBACC;AAAA;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,sBAAQ;","names":["AriaModalOverlay","AriaModal","ModalDialog"]}

package/dist/__chunks/{YJ7YDIGB.js → JB65NEXK.js}

@@ -1,3 +1,5 @@
+"use client"
+
 // src/useIsHydrated.tsx
 import { useEffect, useState } from "react";
 function useIsHydrated() {
@@ -11,4 +13,4 @@ function useIsHydrated() {
 export {
   useIsHydrated
 };
-//# sourceMappingURL=YJ7YDIGB.js.map
+//# sourceMappingURL=JB65NEXK.js.map

package/dist/__chunks/{YJ7YDIGB.js.map → JB65NEXK.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useIsHydrated.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport default function useIsHydrated(): boolean {\n  const [isHydrated, setIsHydrated] = useState(false);\n  useEffect(() => {\n    setIsHydrated(true);\n  }, []);\n  return isHydrated;\n}\n"],"mappings":";AAAA,SAAS,WAAW,gBAAgB;AAErB,SAAR,gBAA0C;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,YAAU,MAAM;AACd,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AACL,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useIsHydrated.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport default function useIsHydrated(): boolean {\n  const [isHydrated, setIsHydrated] = useState(false);\n  useEffect(() => {\n    setIsHydrated(true);\n  }, []);\n  return isHydrated;\n}\n"],"mappings":";;;AAAA,SAAS,WAAW,gBAAgB;AAErB,SAAR,gBAA0C;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,YAAU,MAAM;AACd,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AACL,SAAO;AACT;","names":[]}

package/dist/__chunks/{X6F66N7W.cjs → JDLL6DAC.cjs}

@@ -1,18 +1,19 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _GJ44NFS5cjs = require('./GJ44NFS5.cjs');
 
+var _FFPBVVGUcjs = require('./FFPBVVGU.cjs');
 
-var _PBWG2BB5cjs = require('./PBWG2BB5.cjs');
 
+var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
 
-var _7W3S3GV2cjs = require('./7W3S3GV2.cjs');
 
+var _XE3INH2Fcjs = require('./XE3INH2F.cjs');
 
-var _SJFWRAOPcjs = require('./SJFWRAOP.cjs');
 
+var _BA4JPX36cjs = require('./BA4JPX36.cjs');
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
+
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
 // src/Modal/Modal.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -46,7 +47,7 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _7W3S3GV2cjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PBWG2BB5cjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SJFWRAOPcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XE3INH2Fcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BA4JPX36cjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       className: Modal_module_default.backdrop,
@@ -54,7 +55,7 @@ function Modal({
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _SZCVEBN2cjs.Box_default,
+        _WJRIAS4Wcjs.Box_default,
         {
           "data-testid": dataTestId,
           backgroundColor: "white",
@@ -66,7 +67,7 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { position: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { position: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
@@ -78,12 +79,12 @@ function Modal({
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { maxHeight: 200, children: image }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _SZCVEBN2cjs.Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GJ44NFS5cjs.Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { marginBottom: 4, children }),
+            image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _WJRIAS4Wcjs.Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FFPBVVGUcjs.Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { marginBottom: 4, children }),
               footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _SZCVEBN2cjs.Box_default,
+                _WJRIAS4Wcjs.Box_default,
                 {
                   display: "flex",
                   direction: "column",
@@ -107,4 +108,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=X6F66N7W.cjs.map
+//# sourceMappingURL=JDLL6DAC.cjs.map