@cambly/syntax-core 20.5.0 → 20.7.0

package/dist/__chunks/{VJWLFFAD.cjs → KFNK5PLG.cjs}

@@ -2,7 +2,7 @@
 
 
 
-var _65BTPZZTcjs = require('./65BTPZZT.cjs');
+var _UEY7FXLXcjs = require('./UEY7FXLX.cjs');
 
 
 var _RXQBNEFRcjs = require('./RXQBNEFR.cjs');
@@ -75,8 +75,8 @@ var IconButton = _react.forwardRef.call(void 0,
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Icon,
             {
-              className: _65BTPZZTcjs.materialIconSize[size],
-              size: _65BTPZZTcjs.internalIconSize[size]
+              className: _UEY7FXLXcjs.materialIconSize[size],
+              size: _UEY7FXLXcjs.internalIconSize[size]
             }
           ),
           indicatorColor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -119,4 +119,4 @@ var IconButton_default = IconButton;
 
 
 exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=VJWLFFAD.cjs.map
+//# sourceMappingURL=KFNK5PLG.cjs.map

package/dist/__chunks/{RUXLZWRZ.cjs → R7BL4JYZ.cjs}

@@ -5,7 +5,7 @@ var _TH4TA3JNcjs = require('./TH4TA3JN.cjs');
 
 
 
-var _65BTPZZTcjs = require('./65BTPZZT.cjs');
+var _UEY7FXLXcjs = require('./UEY7FXLX.cjs');
 
 
 var _RXQBNEFRcjs = require('./RXQBNEFR.cjs');
@@ -66,8 +66,8 @@ var IconLinkButton = _react.forwardRef.call(void 0,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Icon,
           {
-            className: _65BTPZZTcjs.materialIconSize[size],
-            size: _65BTPZZTcjs.internalIconSize[size]
+            className: _UEY7FXLXcjs.materialIconSize[size],
+            size: _UEY7FXLXcjs.internalIconSize[size]
           }
         )
       }
@@ -80,4 +80,4 @@ var IconLinkButton_default = IconLinkButton;
 
 
 exports.IconLinkButton_default = IconLinkButton_default;
-//# sourceMappingURL=RUXLZWRZ.cjs.map
+//# sourceMappingURL=R7BL4JYZ.cjs.map

package/dist/__chunks/{Z74J5XCF.js → RB35TGSP.js}

@@ -13,7 +13,7 @@ import {
 } from "./HVA7R2EL.js";
 import {
   IconButton_default
-} from "./GDXRRA57.js";
+} from "./SZTZ3IZ5.js";
 import {
   Box_default
 } from "./IB6JZQF3.js";
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=Z74J5XCF.js.map
+//# sourceMappingURL=RB35TGSP.js.map

package/dist/__chunks/{P3YRUAAE.cjs → RHJARLXB.cjs}

@@ -4,7 +4,7 @@
 var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
 
 
-var _VJWLFFADcjs = require('./VJWLFFAD.cjs');
+var _KFNK5PLGcjs = require('./KFNK5PLG.cjs');
 
 
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
@@ -130,7 +130,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
                         }
                       },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _VJWLFFADcjs.IconButton_default,
+                        _KFNK5PLGcjs.IconButton_default,
                         {
                           onClick: () => state.close(),
                           color: "tertiary",
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
 
 
 exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
-//# sourceMappingURL=P3YRUAAE.cjs.map
+//# sourceMappingURL=RHJARLXB.cjs.map

package/dist/__chunks/{MOUGFIY7.js → RJS7BKZD.js}

@@ -4,7 +4,7 @@ import {
 } from "./36DG472B.js";
 import {
   Button_default
-} from "./5J43UL2N.js";
+} from "./DZNR7V5P.js";
 import {
   Divider
 } from "./M4W3IFMV.js";
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=MOUGFIY7.js.map
+//# sourceMappingURL=RJS7BKZD.js.map

package/dist/__chunks/{E4PTHQYC.cjs → RZSHTFXZ.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _34KWYODXcjs = require('./34KWYODX.cjs');
+var _IJHKE2Y3cjs = require('./IJHKE2Y3.cjs');
 
 
 var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
@@ -9,12 +9,12 @@ var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
 
 
 
-var _FF5D2AVTcjs = require('./FF5D2AVT.cjs');
+var _7VI7DO7Pcjs = require('./7VI7DO7P.cjs');
 
 
 
 
-var _6FA2AYTDcjs = require('./6FA2AYTD.cjs');
+var _AFOQ6JVBcjs = require('./AFOQ6JVB.cjs');
 
 
 var _VDLYCYDQcjs = require('./VDLYCYDQ.cjs');
@@ -103,11 +103,11 @@ function RichSelectList(props) {
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _6FA2AYTDcjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _AFOQ6JVBcjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _6FA2AYTDcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _AFOQ6JVBcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -147,12 +147,12 @@ function RichSelectList(props) {
   };
   const getArrowIconColor = () => {
     if (errorText) {
-      return _FF5D2AVTcjs.ColorBaseDestructive700;
+      return _7VI7DO7Pcjs.ColorBaseDestructive700;
     } else {
       if (color === "clear") {
-        return _FF5D2AVTcjs.ColorCambioWhite100;
+        return _7VI7DO7Pcjs.ColorCambioWhite100;
       } else {
-        return _FF5D2AVTcjs.ColorBaseGray700;
+        return _7VI7DO7Pcjs.ColorBaseGray700;
       }
     }
   };
@@ -160,7 +160,7 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_6FA2AYTDcjs.RichSelectBoxContext, { autoFocus: true }],
+        [_AFOQ6JVBcjs.RichSelectBoxContext, { autoFocus: true }],
         [_OKT24L6Dcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
@@ -188,7 +188,7 @@ function RichSelectList(props) {
               })
             ) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _34KWYODXcjs.Popover_default,
+              _IJHKE2Y3cjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -201,7 +201,7 @@ function RichSelectList(props) {
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       role: "menu",
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _6FA2AYTDcjs.RichSelectBox_default,
+                        _AFOQ6JVBcjs.RichSelectBox_default,
                         _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=E4PTHQYC.cjs.map
+//# sourceMappingURL=RZSHTFXZ.cjs.map

package/dist/__chunks/{WPQECZRJ.js → SIKGAUYF.js}

@@ -34,4 +34,4 @@ var Icon_default = Icon;
 export {
   Icon_default
 };
-//# sourceMappingURL=WPQECZRJ.js.map
+//# sourceMappingURL=SIKGAUYF.js.map

package/dist/__chunks/{WPQECZRJ.js.map → SIKGAUYF.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Icon.module.css\";\nimport type allColors from \"../colors/allColors\";\n\ntype IconProps = {\n  /**\n   * The color of the Icon.\n   *\n   * @defaultValue \"inherit\"\n   */\n  color?: (typeof allColors)[number];\n  /**\n   * The size of the Icon.\n   * * 100: 16px x 16px\n   * * 200: 20px x 20px\n   * * 300: 24px x 24px\n   * * 400: 28px x 28px\n   * * 500: 48px x 48px\n   * * 600: 72px x 72px\n   * * 700: 100px x 100px\n   * * 800: 140px x 140px\n   * * 900: 200px x 200px\n   * * 1000: 280px x 280px\n   *\n   * @defaultValue 200\n   */\n  size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n  /**\n   * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n   */\n  path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n  ({ color = \"inherit\", path, size = 200 }: IconProps, ref) => (\n    <svg\n      className={classnames(\n        styles.icon,\n        colorStyles[`${color}Color`],\n        styles[`icon${size}`],\n      )}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d={path} />\n    </svg>\n  ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1vyva_1\",\"icon100\":\"_icon100_1vyva_8\",\"icon200\":\"_icon200_1vyva_13\",\"icon300\":\"_icon300_1vyva_18\",\"icon400\":\"_icon400_1vyva_23\",\"icon500\":\"_icon500_1vyva_28\",\"icon600\":\"_icon600_1vyva_33\",\"icon700\":\"_icon700_1vyva_38\",\"icon800\":\"_icon800_1vyva_43\",\"icon900\":\"_icon900_1vyva_48\",\"icon1000\":\"_icon1000_1vyva_53\"}"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADuDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,sBAAY,GAAG,YAAY;AAAA,QAC3B,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Icon.module.css\";\nimport type allColors from \"../colors/allColors\";\n\ntype IconProps = {\n  /**\n   * The color of the Icon.\n   *\n   * @defaultValue \"inherit\"\n   */\n  color?: (typeof allColors)[number];\n  /**\n   * The size of the Icon.\n   * * 100: 16px x 16px\n   * * 200: 20px x 20px\n   * * 300: 24px x 24px\n   * * 400: 32px x 32px\n   * * 500: 48px x 48px\n   * * 600: 72px x 72px\n   * * 700: 100px x 100px\n   * * 800: 140px x 140px\n   * * 900: 200px x 200px\n   * * 1000: 280px x 280px\n   *\n   * @defaultValue 200\n   */\n  size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n  /**\n   * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n   */\n  path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n  ({ color = \"inherit\", path, size = 200 }: IconProps, ref) => (\n    <svg\n      className={classnames(\n        styles.icon,\n        colorStyles[`${color}Color`],\n        styles[`icon${size}`],\n      )}\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d={path} />\n    </svg>\n  ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1vyva_1\",\"icon100\":\"_icon100_1vyva_8\",\"icon200\":\"_icon200_1vyva_13\",\"icon300\":\"_icon300_1vyva_18\",\"icon400\":\"_icon400_1vyva_23\",\"icon500\":\"_icon500_1vyva_28\",\"icon600\":\"_icon600_1vyva_33\",\"icon700\":\"_icon700_1vyva_38\",\"icon800\":\"_icon800_1vyva_43\",\"icon900\":\"_icon900_1vyva_48\",\"icon1000\":\"_icon1000_1vyva_53\"}"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,YAAW,qBAAoB;;;ADuDra;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,IAAI,GAAc,QACnD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,sBAAY,GAAG,YAAY;AAAA,QAC3B,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}

package/dist/__chunks/{GDXRRA57.js → SZTZ3IZ5.js}

@@ -2,7 +2,7 @@
 import {
   internalIconSize,
   materialIconSize
-} from "./64WM4STC.js";
+} from "./6TM2ES2T.js";
 import {
   foregroundColor
 } from "./JCQUY624.js";
@@ -119,4 +119,4 @@ var IconButton_default = IconButton;
 export {
   IconButton_default
 };
-//# sourceMappingURL=GDXRRA57.js.map
+//# sourceMappingURL=SZTZ3IZ5.js.map

package/dist/__chunks/{65BTPZZT.cjs → UEY7FXLX.cjs}

@@ -11,12 +11,12 @@ var materialIconSize = {
 };
 var internalIconSize = {
   sm: 100,
-  md: 200,
-  lg: 300
+  md: 300,
+  lg: 400
 };
 
 
 
 
 exports.materialIconSize = materialIconSize; exports.internalIconSize = internalIconSize;
-//# sourceMappingURL=65BTPZZT.cjs.map
+//# sourceMappingURL=UEY7FXLX.cjs.map

package/dist/__chunks/{65BTPZZT.cjs.map → UEY7FXLX.cjs.map}

@@ -1 +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,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEpkB,IAAM,mBAAmB;AAAA,EAC9B,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEO,IAAM,mBAAmB;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}","import styles from \"../Button.module.css\";\n\nexport const materialIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nexport const internalIconSize = {\n  sm: 100,\n  md: 200,\n  lg: 300,\n} as const;\n"]}
+{"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,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEpkB,IAAM,mBAAmB;AAAA,EAC9B,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEO,IAAM,mBAAmB;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}","import styles from \"../Button.module.css\";\n\nexport const materialIconSize = {\n  sm: styles.smIcon,\n  md: styles.mdIcon,\n  lg: styles.lgIcon,\n};\n\nexport const internalIconSize = {\n  sm: 100,\n  md: 300,\n  lg: 400,\n} as const;\n"]}

package/dist/__chunks/{YN2ORRKZ.js → VZUFYOET.js}

@@ -4,7 +4,7 @@ import {
 } from "./QVK3VV5M.js";
 import {
   IconButton_default
-} from "./GDXRRA57.js";
+} from "./SZTZ3IZ5.js";
 import {
   Box_default
 } from "./IB6JZQF3.js";
@@ -157,4 +157,4 @@ export {
   AriaModal,
   ModalDialog_default
 };
-//# sourceMappingURL=YN2ORRKZ.js.map
+//# sourceMappingURL=VZUFYOET.js.map

package/dist/__chunks/{VC6ETUE2.js → WCHW3AYL.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./CN7ZX34L.js";
+} from "./JGDLN47H.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -140,4 +140,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=VC6ETUE2.js.map
+//# sourceMappingURL=WCHW3AYL.js.map

package/dist/__chunks/{YISFHYJW.js → WIKMZ7QF.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Popover_default
-} from "./IKOJX6EH.js";
+} from "./IUMHK3GF.js";
 import {
   DialogContext
 } from "./QVK3VV5M.js";
@@ -9,12 +9,12 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./CN7ZX34L.js";
+} from "./JGDLN47H.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./MOUGFIY7.js";
+} from "./RJS7BKZD.js";
 import {
   RichSelectSection_default
 } from "./I2TGRWBJ.js";
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=YISFHYJW.js.map
+//# sourceMappingURL=WIKMZ7QF.js.map

package/dist/index.cjs

@@ -10,13 +10,13 @@ var _GEXK47GRcjs = require('./__chunks/GEXK47GR.cjs');
 var _AVJQ2E2Gcjs = require('./__chunks/AVJQ2E2G.cjs');
 
 
-var _IBT4YOI5cjs = require('./__chunks/IBT4YOI5.cjs');
+var _HRTHCEIFcjs = require('./__chunks/HRTHCEIF.cjs');
 
 
 var _XUDOYOWHcjs = require('./__chunks/XUDOYOWH.cjs');
 
 
-var _67PPAFHWcjs = require('./__chunks/67PPAFHW.cjs');
+var _AHM6QK6Ucjs = require('./__chunks/AHM6QK6U.cjs');
 
 
 var _O7M2NMNZcjs = require('./__chunks/O7M2NMNZ.cjs');
@@ -25,41 +25,41 @@ require('./__chunks/7KH536I2.cjs');
 require('./__chunks/THM3NAFO.cjs');
 
 
-var _TTUGZZPVcjs = require('./__chunks/TTUGZZPV.cjs');
+var _4UT6BROBcjs = require('./__chunks/4UT6BROB.cjs');
 
 
-var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
+var _R7BL4JYZcjs = require('./__chunks/R7BL4JYZ.cjs');
 require('./__chunks/TH4TA3JN.cjs');
 
 
-var _EP7RK5MCcjs = require('./__chunks/EP7RK5MC.cjs');
+var _IFPLOCSVcjs = require('./__chunks/IFPLOCSV.cjs');
 require('./__chunks/JVGX637E.cjs');
 
 
-var _E4PTHQYCcjs = require('./__chunks/E4PTHQYC.cjs');
+var _RZSHTFXZcjs = require('./__chunks/RZSHTFXZ.cjs');
 
 
-var _34KWYODXcjs = require('./__chunks/34KWYODX.cjs');
-require('./__chunks/P3YRUAAE.cjs');
+var _IJHKE2Y3cjs = require('./__chunks/IJHKE2Y3.cjs');
+require('./__chunks/RHJARLXB.cjs');
 require('./__chunks/OKT24L6D.cjs');
 
 
-var _VJWLFFADcjs = require('./__chunks/VJWLFFAD.cjs');
+var _KFNK5PLGcjs = require('./__chunks/KFNK5PLG.cjs');
 require('./__chunks/WFVGNGEP.cjs');
-require('./__chunks/FF5D2AVT.cjs');
-require('./__chunks/6FA2AYTD.cjs');
+require('./__chunks/7VI7DO7P.cjs');
+require('./__chunks/AFOQ6JVB.cjs');
 
 
 var _6KSVCCCBcjs = require('./__chunks/6KSVCCCB.cjs');
 
 
-var _44EISWI2cjs = require('./__chunks/44EISWI2.cjs');
+var _BVNFNAUOcjs = require('./__chunks/BVNFNAUO.cjs');
 
 
 var _A3B4YKGNcjs = require('./__chunks/A3B4YKGN.cjs');
 require('./__chunks/5JUNB754.cjs');
 require('./__chunks/3P2PWHOU.cjs');
-require('./__chunks/65BTPZZT.cjs');
+require('./__chunks/UEY7FXLX.cjs');
 require('./__chunks/VDLYCYDQ.cjs');
 require('./__chunks/MF7LLV7V.cjs');
 require('./__chunks/WKADTHRK.cjs');
@@ -106,7 +106,7 @@ require('./__chunks/F3SUJGZL.cjs');
 require('./__chunks/UKQIAZA5.cjs');
 
 
-var _YGFJ2STLcjs = require('./__chunks/YGFJ2STL.cjs');
+var _5ITNEIMCcjs = require('./__chunks/5ITNEIMC.cjs');
 
 
 var _QODNNCT2cjs = require('./__chunks/QODNNCT2.cjs');
@@ -162,5 +162,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _J5XNUGR3cjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _44EISWI2cjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _XUDOYOWHcjs.Checkbox_default; exports.Chip = _MENEINOOcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _O7M2NMNZcjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _TTUGZZPVcjs.LinkButton_default; exports.Modal = _67PPAFHWcjs.Modal; exports.Popover = _34KWYODXcjs.Popover_default; exports.RadioButton = _DHXH7ZSGcjs.RadioButton_default; exports.RichSelectList = _E4PTHQYCcjs.RichSelectList_default; exports.SelectList = _EP7RK5MCcjs.SelectList; exports.TabButton = _FXLAQKABcjs.TabButton; exports.TabLink = _TOAI3Z5Mcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _VVRMCACEcjs.TextArea_default; exports.TextField = _PMNFDB6Ccjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _3ULBWSHTcjs.Tooltip_default; exports.Typography = _4TYOP5XMcjs.Typography_default; exports.WordConfetti = _YGFJ2STLcjs.WordConfetti_default;
+exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _J5XNUGR3cjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _BVNFNAUOcjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _XUDOYOWHcjs.Checkbox_default; exports.Chip = _MENEINOOcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _O7M2NMNZcjs.Heading_default; exports.Icon = _HRTHCEIFcjs.Icon_default; exports.IconButton = _KFNK5PLGcjs.IconButton_default; exports.IconLinkButton = _R7BL4JYZcjs.IconLinkButton_default; exports.LinkButton = _4UT6BROBcjs.LinkButton_default; exports.Modal = _AHM6QK6Ucjs.Modal; exports.Popover = _IJHKE2Y3cjs.Popover_default; exports.RadioButton = _DHXH7ZSGcjs.RadioButton_default; exports.RichSelectList = _RZSHTFXZcjs.RichSelectList_default; exports.SelectList = _IFPLOCSVcjs.SelectList; exports.TabButton = _FXLAQKABcjs.TabButton; exports.TabLink = _TOAI3Z5Mcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _VVRMCACEcjs.TextArea_default; exports.TextField = _PMNFDB6Ccjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _3ULBWSHTcjs.Tooltip_default; exports.Typography = _4TYOP5XMcjs.Typography_default; exports.WordConfetti = _5ITNEIMCcjs.WordConfetti_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -10,13 +10,13 @@ import {
 } from "./__chunks/7ZD4OEVD.js";
 import {
   Icon_default
-} from "./__chunks/WPQECZRJ.js";
+} from "./__chunks/SIKGAUYF.js";
 import {
   Checkbox_default
 } from "./__chunks/67NXLQQ3.js";
 import {
   Modal
-} from "./__chunks/Z74J5XCF.js";
+} from "./__chunks/RB35TGSP.js";
 import {
   Heading_default
 } from "./__chunks/X4DRRDFO.js";
@@ -25,41 +25,41 @@ import "./__chunks/UVFGSHMH.js";
 import "./__chunks/HVA7R2EL.js";
 import {
   LinkButton_default
-} from "./__chunks/GQIVAGZ2.js";
+} from "./__chunks/22TVX5F4.js";
 import {
   IconLinkButton_default
-} from "./__chunks/JVLEQ5LB.js";
+} from "./__chunks/FJXL3BLK.js";
 import "./__chunks/YLWWTB4I.js";
 import {
   SelectList
-} from "./__chunks/VC6ETUE2.js";
+} from "./__chunks/WCHW3AYL.js";
 import "./__chunks/SPQ7DQHG.js";
 import {
   RichSelectList_default
-} from "./__chunks/YISFHYJW.js";
+} from "./__chunks/WIKMZ7QF.js";
 import {
   Popover_default
-} from "./__chunks/IKOJX6EH.js";
-import "./__chunks/YN2ORRKZ.js";
+} from "./__chunks/IUMHK3GF.js";
+import "./__chunks/VZUFYOET.js";
 import "./__chunks/QVK3VV5M.js";
 import {
   IconButton_default
-} from "./__chunks/GDXRRA57.js";
+} from "./__chunks/SZTZ3IZ5.js";
 import "./__chunks/4U4UW4AK.js";
-import "./__chunks/CN7ZX34L.js";
-import "./__chunks/MOUGFIY7.js";
+import "./__chunks/JGDLN47H.js";
+import "./__chunks/RJS7BKZD.js";
 import {
   ButtonGroup_default
 } from "./__chunks/36DG472B.js";
 import {
   Button_default
-} from "./__chunks/5J43UL2N.js";
+} from "./__chunks/DZNR7V5P.js";
 import {
   Divider
 } from "./__chunks/M4W3IFMV.js";
 import "./__chunks/Z5ZUAP2B.js";
 import "./__chunks/QSC7CAQA.js";
-import "./__chunks/64WM4STC.js";
+import "./__chunks/6TM2ES2T.js";
 import "./__chunks/I2TGRWBJ.js";
 import "./__chunks/DDUJFFG7.js";
 import "./__chunks/ZAYQ4QHT.js";
@@ -106,7 +106,7 @@ import "./__chunks/YGON3SJ5.js";
 import "./__chunks/M4CFLT64.js";
 import {
   WordConfetti_default
-} from "./__chunks/OPDVLDRQ.js";
+} from "./__chunks/5R4TON7U.js";
 import {
   Box_default
 } from "./__chunks/IB6JZQF3.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "20.5.0",
+  "version": "20.7.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/dist/__chunks/OPDVLDRQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"sourcesContent":["import { type ReactNode, forwardRef, useMemo, type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\n\nconst themeBackgroundColors = {\n  neutral: [\"pink\", \"lilac\", \"thistle\"],\n  cool: [\"sky\", \"slate\", \"teal\"],\n  warm: [\"red\", \"tan\", \"orange\"],\n} as const;\n\nconst degreeOfTiltOptions = [-6, -6, -3, -3, 0, 3, 3, 6, 6];\n\nconst paddings = {\n  300: \"16px 20px 16px 20px\",\n  400: \"20px 24px 20px 24px\",\n  700: \"24px 28px 24px 28px\",\n  800: \"28px 40px 28px 40px\",\n  900: \"32px 48px 32px 48px\",\n  1100: \"36px 56px 36px 56px\",\n};\n\nconst gaps = {\n  300: 3,\n  400: 4,\n  700: 6,\n  800: 6,\n  900: 9,\n  1100: 10,\n} as const;\n\nconst WordConfetto = ({\n  backgroundColor,\n  rotation,\n  size,\n  text,\n}: {\n  backgroundColor:\n    | \"pink\"\n    | \"lilac\"\n    | \"thistle\"\n    | \"sky\"\n    | \"slate\"\n    | \"teal\"\n    | \"red\"\n    | \"tan\"\n    | \"orange\";\n  rotation: number;\n  size: 300 | 400 | 700 | 800 | 900 | 1100;\n  text: string;\n}): ReactElement => {\n  return (\n    <Box\n      backgroundColor={backgroundColor}\n      dangerouslySetInlineStyle={{\n        __style: {\n          padding: paddings[size],\n          transform: `rotate(${rotation}deg)`,\n        },\n      }}\n      width=\"fit-content\"\n    >\n      <Typography size={size} weight=\"bold\" fontStyle=\"serif\">\n        {text}\n      </Typography>\n    </Box>\n  );\n};\n\ntype Direction = \"row\" | \"column\";\ntype WordConfettiProps = {\n  /**\n   * Test id for the confetti\n   */\n  \"data-testid\"?: string;\n  /**\n   * The direction to display the words.\n   * @defaultValue row\n   */\n  direction?: Direction;\n  /**\n   * The size of the font in the confetti.\n   */\n  size: 300 | 400 | 700 | 800 | 900 | 1100;\n  /**\n   * The theme for the background colors of the confetti.\n   */\n  theme: \"neutral\" | \"cool\" | \"warm\";\n  /**\n   * The words to display as confetti.\n   */\n  words: string[];\n};\n\n/**\n * [WordConfetti](https://cambly-syntax.vercel.app/?path=/docs/components-wordconfetti--docs) is a container for displaying words in different color themes and fun offset angles.\n */\nconst WordConfetti = forwardRef<HTMLDivElement, WordConfettiProps>(\n  function WordConfetti(props: WordConfettiProps, ref): JSX.Element {\n    const {\n      \"data-testid\": dataTestId,\n      direction = \"row\",\n      size,\n      theme,\n      words,\n    } = props;\n\n    const styledWords = useMemo(\n      () =>\n        words.map((word) => ({\n          text: word,\n          backgroundColor:\n            themeBackgroundColors[theme][Math.floor(Math.random() * 3)],\n          rotation: degreeOfTiltOptions[Math.floor(Math.random() * 9)],\n        })),\n      [theme, words],\n    );\n\n    return (\n      <Box\n        display=\"flex\"\n        direction={direction}\n        flexWrap=\"wrap\"\n        data-testid={dataTestId}\n        ref={ref}\n        gap={gaps[size]}\n      >\n        {styledWords.map(\n          ({ text, backgroundColor, rotation }, index): ReactNode => {\n            return (\n              <WordConfetto\n                key={`${text}+${index}`}\n                backgroundColor={backgroundColor}\n                rotation={rotation}\n                size={size}\n                text={text}\n              />\n            );\n          },\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default WordConfetti;\n"],"mappings":";;;;;;;;;AAAA,SAAyB,YAAY,eAAkC;AA6DjE;AAzDN,IAAM,wBAAwB;AAAA,EAC5B,SAAS,CAAC,QAAQ,SAAS,SAAS;AAAA,EACpC,MAAM,CAAC,OAAO,SAAS,MAAM;AAAA,EAC7B,MAAM,CAAC,OAAO,OAAO,QAAQ;AAC/B;AAEA,IAAM,sBAAsB,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE1D,IAAM,WAAW;AAAA,EACf,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAcoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,SAAS,IAAI;AAAA,UACtB,WAAW,UAAU;AAAA,QACvB;AAAA,MACF;AAAA,MACA,OAAM;AAAA,MAEN,8BAAC,sBAAW,MAAY,QAAO,QAAO,WAAU,SAC7C,gBACH;AAAA;AAAA,EACF;AAEJ;AA8BA,IAAM,eAAe;AAAA,EACnB,SAASA,cAAa,OAA0B,KAAkB;AAChE,UAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,cAAc;AAAA,MAClB,MACE,MAAM,IAAI,CAAC,UAAU;AAAA,QACnB,MAAM;AAAA,QACN,iBACE,sBAAsB,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,QAC5D,UAAU,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,MAC7D,EAAE;AAAA,MACJ,CAAC,OAAO,KAAK;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,sBAAY;AAAA,UACX,CAAC,EAAE,MAAM,iBAAiB,SAAS,GAAG,UAAqB;AACzD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,cAJK,GAAG,QAAQ;AAAA,YAKlB;AAAA,UAEJ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ;","names":["WordConfetti"]}

package/dist/__chunks/YGFJ2STL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"names":["WordConfetti"],"mappings":";;;;;;;;;AAAA,SAAyB,YAAY,eAAkC;AA6DjE;AAzDN,IAAM,wBAAwB;AAAA,EAC5B,SAAS,CAAC,QAAQ,SAAS,SAAS;AAAA,EACpC,MAAM,CAAC,OAAO,SAAS,MAAM;AAAA,EAC7B,MAAM,CAAC,OAAO,OAAO,QAAQ;AAC/B;AAEA,IAAM,sBAAsB,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE1D,IAAM,WAAW;AAAA,EACf,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAcoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,SAAS,IAAI;AAAA,UACtB,WAAW,UAAU;AAAA,QACvB;AAAA,MACF;AAAA,MACA,OAAM;AAAA,MAEN,8BAAC,sBAAW,MAAY,QAAO,QAAO,WAAU,SAC7C,gBACH;AAAA;AAAA,EACF;AAEJ;AA8BA,IAAM,eAAe;AAAA,EACnB,SAASA,cAAa,OAA0B,KAAkB;AAChE,UAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,cAAc;AAAA,MAClB,MACE,MAAM,IAAI,CAAC,UAAU;AAAA,QACnB,MAAM;AAAA,QACN,iBACE,sBAAsB,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,QAC5D,UAAU,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,MAC7D,EAAE;AAAA,MACJ,CAAC,OAAO,KAAK;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,sBAAY;AAAA,UACX,CAAC,EAAE,MAAM,iBAAiB,SAAS,GAAG,UAAqB;AACzD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,cAJK,GAAG,QAAQ;AAAA,YAKlB;AAAA,UAEJ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ","sourcesContent":["import { type ReactNode, forwardRef, useMemo, type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\n\nconst themeBackgroundColors = {\n  neutral: [\"pink\", \"lilac\", \"thistle\"],\n  cool: [\"sky\", \"slate\", \"teal\"],\n  warm: [\"red\", \"tan\", \"orange\"],\n} as const;\n\nconst degreeOfTiltOptions = [-6, -6, -3, -3, 0, 3, 3, 6, 6];\n\nconst paddings = {\n  300: \"16px 20px 16px 20px\",\n  400: \"20px 24px 20px 24px\",\n  700: \"24px 28px 24px 28px\",\n  800: \"28px 40px 28px 40px\",\n  900: \"32px 48px 32px 48px\",\n  1100: \"36px 56px 36px 56px\",\n};\n\nconst gaps = {\n  300: 3,\n  400: 4,\n  700: 6,\n  800: 6,\n  900: 9,\n  1100: 10,\n} as const;\n\nconst WordConfetto = ({\n  backgroundColor,\n  rotation,\n  size,\n  text,\n}: {\n  backgroundColor:\n    | \"pink\"\n    | \"lilac\"\n    | \"thistle\"\n    | \"sky\"\n    | \"slate\"\n    | \"teal\"\n    | \"red\"\n    | \"tan\"\n    | \"orange\";\n  rotation: number;\n  size: 300 | 400 | 700 | 800 | 900 | 1100;\n  text: string;\n}): ReactElement => {\n  return (\n    <Box\n      backgroundColor={backgroundColor}\n      dangerouslySetInlineStyle={{\n        __style: {\n          padding: paddings[size],\n          transform: `rotate(${rotation}deg)`,\n        },\n      }}\n      width=\"fit-content\"\n    >\n      <Typography size={size} weight=\"bold\" fontStyle=\"serif\">\n        {text}\n      </Typography>\n    </Box>\n  );\n};\n\ntype Direction = \"row\" | \"column\";\ntype WordConfettiProps = {\n  /**\n   * Test id for the confetti\n   */\n  \"data-testid\"?: string;\n  /**\n   * The direction to display the words.\n   * @defaultValue row\n   */\n  direction?: Direction;\n  /**\n   * The size of the font in the confetti.\n   */\n  size: 300 | 400 | 700 | 800 | 900 | 1100;\n  /**\n   * The theme for the background colors of the confetti.\n   */\n  theme: \"neutral\" | \"cool\" | \"warm\";\n  /**\n   * The words to display as confetti.\n   */\n  words: string[];\n};\n\n/**\n * [WordConfetti](https://cambly-syntax.vercel.app/?path=/docs/components-wordconfetti--docs) is a container for displaying words in different color themes and fun offset angles.\n */\nconst WordConfetti = forwardRef<HTMLDivElement, WordConfettiProps>(\n  function WordConfetti(props: WordConfettiProps, ref): JSX.Element {\n    const {\n      \"data-testid\": dataTestId,\n      direction = \"row\",\n      size,\n      theme,\n      words,\n    } = props;\n\n    const styledWords = useMemo(\n      () =>\n        words.map((word) => ({\n          text: word,\n          backgroundColor:\n            themeBackgroundColors[theme][Math.floor(Math.random() * 3)],\n          rotation: degreeOfTiltOptions[Math.floor(Math.random() * 9)],\n        })),\n      [theme, words],\n    );\n\n    return (\n      <Box\n        display=\"flex\"\n        direction={direction}\n        flexWrap=\"wrap\"\n        data-testid={dataTestId}\n        ref={ref}\n        gap={gaps[size]}\n      >\n        {styledWords.map(\n          ({ text, backgroundColor, rotation }, index): ReactNode => {\n            return (\n              <WordConfetto\n                key={`${text}+${index}`}\n                backgroundColor={backgroundColor}\n                rotation={rotation}\n                size={size}\n                text={text}\n              />\n            );\n          },\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default WordConfetti;\n"]}