@cambly/syntax-core 20.6.0 → 20.7.0

package/dist/Avatar/Avatar.d.ts

@@ -25,7 +25,7 @@ declare const Avatar: ({ accessibilityLabel, icon, size, src, }: {
      *
      * @defaultValue `md`
      */
-    size?: "md" | "sm" | "xs" | "lg" | "xl" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     /**
      * URL of the image to display as the avatar.
      */

package/dist/Badge/Badge.d.ts

@@ -11,7 +11,7 @@ declare const Badge: ({ icon: Icon, text, color, }: {
         className?: string | undefined;
     }> | React.ComponentType<{
         color?: "inherit" | "black" | "destructive100" | "destructive200" | "destructive300" | "destructive700" | "destructive800" | "destructive900" | "gray10" | "gray100" | "gray200" | "gray30" | "gray60" | "gray300" | "gray700" | "gray80" | "gray800" | "gray900" | "orange100" | "orange200" | "orange300" | "orange700" | "orange800" | "orange900" | "primary100" | "primary200" | "primary300" | "primary700" | "primary800" | "primary900" | "purple100" | "purple200" | "purple300" | "purple700" | "purple800" | "purple900" | "success100" | "success200" | "success300" | "success700" | "success800" | "success900" | "white" | "white40" | "white70" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | "gray270" | "gray370" | "gray870" | "cream" | "lilac" | "navy" | "orange" | "pink" | "purple" | "red" | "sky" | "slate" | "tan" | "teal" | "thistle" | undefined;
-        size?: 100 | 200 | 300 | 400 | 500 | 700 | 800 | 900 | 600 | 1000 | undefined;
+        size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | undefined;
         path?: string | undefined;
     } & React.RefAttributes<SVGSVGElement>> | undefined;
     /**

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -23,7 +23,7 @@ declare const ButtonGroup: ({ orientation, size, children, smOrientation, lgOrie
      *
      * @defaultValue "md"
      */
-    size?: "md" | "sm" | "lg" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
     /**
      * Buttons to be rendered inside the button group
      */

package/dist/Checkbox/Checkbox.d.ts

@@ -32,7 +32,7 @@ declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled: disable
      *
      * @defaultValue "md"
      */
-    size?: "md" | "sm" | undefined;
+    size?: "sm" | "md" | undefined;
     /**
      * The text accompanying the checkbox
      */

package/dist/Heading/Heading.d.ts

@@ -11,7 +11,7 @@ declare const Heading: ({ align, as, children, color, "data-testid": dataTestId,
      *
      * @defaultValue "start"
      */
-    align?: "center" | "end" | "start" | "forceLeft" | "forceRight" | undefined;
+    align?: "center" | "start" | "end" | "forceLeft" | "forceRight" | undefined;
     /**
      * DOM element to render as.
      *

package/dist/RadioButton/RadioButton.d.ts

@@ -50,7 +50,7 @@ declare const RadioButton: ({ checked, "data-testid": dataTestId, dangerouslyFor
      *
      * @defaultValue "md"
      */
-    size?: "md" | "sm" | undefined;
+    size?: "sm" | "md" | undefined;
     /**
      * Value of the selected radio option
      */

package/dist/RichSelect/RichSelectBox.d.ts

@@ -49,7 +49,7 @@ declare const _default: React__default.ForwardRefExoticComponent<RichSelectBoxPr
     Chip: React__default.ForwardRefExoticComponent<RichSelectItemProps & React__default.RefAttributes<HTMLDivElement>>;
     RadioButton: React__default.ForwardRefExoticComponent<RichSelectItemProps & {
         name: string;
-        size?: "md" | "sm" | undefined;
+        size?: "sm" | "md" | undefined;
     } & React__default.RefAttributes<HTMLDivElement>>;
 };
 

package/dist/RichSelect/RichSelectList.cjs

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _JKEJPSO2cjs = require('../__chunks/JKEJPSO2.cjs');
+var _RZSHTFXZcjs = require('../__chunks/RZSHTFXZ.cjs');
 require('../__chunks/IJHKE2Y3.cjs');
 require('../__chunks/RHJARLXB.cjs');
 require('../__chunks/OKT24L6D.cjs');
 require('../__chunks/KFNK5PLG.cjs');
 require('../__chunks/WFVGNGEP.cjs');
-require('../__chunks/XJVLA3PA.cjs');
+require('../__chunks/7VI7DO7P.cjs');
 require('../__chunks/AFOQ6JVB.cjs');
 require('../__chunks/6KSVCCCB.cjs');
 require('../__chunks/BVNFNAUO.cjs');
@@ -47,5 +47,5 @@ require('../__chunks/E5P6WRJD.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _JKEJPSO2cjs.RichSelectList_default;
+exports.default = _RZSHTFXZcjs.RichSelectList_default;
 //# sourceMappingURL=RichSelectList.cjs.map

package/dist/RichSelect/RichSelectList.d.ts

@@ -74,7 +74,7 @@ declare const _default: typeof RichSelectList & {
     Chip: React__default.ForwardRefExoticComponent<RichSelectItemProps & React__default.RefAttributes<HTMLDivElement>>;
     RadioButton: React__default.ForwardRefExoticComponent<RichSelectItemProps & {
         name: string;
-        size?: "md" | "sm" | undefined;
+        size?: "sm" | "md" | undefined;
     } & React__default.RefAttributes<HTMLDivElement>>;
 };
 

package/dist/RichSelect/RichSelectList.js

@@ -1,13 +1,13 @@
 "use client"
 import {
   RichSelectList_default
-} from "../__chunks/BMTUKQRY.js";
+} from "../__chunks/WIKMZ7QF.js";
 import "../__chunks/IUMHK3GF.js";
 import "../__chunks/VZUFYOET.js";
 import "../__chunks/QVK3VV5M.js";
 import "../__chunks/SZTZ3IZ5.js";
 import "../__chunks/4U4UW4AK.js";
-import "../__chunks/RWJSEIJ6.js";
+import "../__chunks/JGDLN47H.js";
 import "../__chunks/RJS7BKZD.js";
 import "../__chunks/36DG472B.js";
 import "../__chunks/DZNR7V5P.js";

package/dist/RichSelect/RichSelectRadioButton.d.ts

@@ -5,7 +5,7 @@ import 'react-aria';
 
 declare const _default: React__default.ForwardRefExoticComponent<RichSelectItemProps & {
     name: string;
-    size?: "md" | "sm" | undefined;
+    size?: "sm" | "md" | undefined;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
 export { _default as default };

package/dist/SelectList/SelectList.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _67K5GWKLcjs = require('../__chunks/67K5GWKL.cjs');
+var _IFPLOCSVcjs = require('../__chunks/IFPLOCSV.cjs');
 require('../__chunks/JVGX637E.cjs');
-require('../__chunks/XJVLA3PA.cjs');
+require('../__chunks/7VI7DO7P.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/QODNNCT2.cjs');
 require('../__chunks/WFVGNGEP.cjs');
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _67K5GWKLcjs.SelectList;
+exports.default = _IFPLOCSVcjs.SelectList;
 //# sourceMappingURL=SelectList.cjs.map

package/dist/SelectList/SelectList.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   SelectList
-} from "../__chunks/VF2KL6JX.js";
+} from "../__chunks/WCHW3AYL.js";
 import "../__chunks/SPQ7DQHG.js";
-import "../__chunks/RWJSEIJ6.js";
+import "../__chunks/JGDLN47H.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/IB6JZQF3.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/TapArea/TapArea.d.ts

@@ -48,7 +48,7 @@ declare const TapArea: React__default.ForwardRefExoticComponent<React__default.A
      *
      * @defaultValue "none"
      */
-    rounding?: "none" | "md" | "sm" | "full" | undefined;
+    rounding?: "sm" | "md" | "full" | "none" | undefined;
     /**
      * The tab index of the tap area
      */

package/dist/Typography/Typography.d.ts

@@ -12,7 +12,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "start"
      */
-    align?: "center" | "end" | "start" | "forceLeft" | "forceRight" | undefined;
+    align?: "center" | "start" | "end" | "forceLeft" | "forceRight" | undefined;
     /**
      * DOM element to render as.
      *
@@ -28,7 +28,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "gray900"
      */
-    color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "destructive-lightBackground" | "destructive-darkBackground" | "success" | "success-darkBackground" | "white-secondary" | undefined;
+    color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "success" | "destructive-darkBackground" | "destructive-lightBackground" | "success-darkBackground" | "white-secondary" | undefined;
     /**
      * Test id for the text
      */
@@ -111,7 +111,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "regular"
      */
-    weight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
+    weight?: "regular" | "medium" | "semiBold" | "bold" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 
 export { Typography as default };

package/dist/WordConfetti/WordConfetti.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _YGFJ2STLcjs = require('../__chunks/YGFJ2STL.cjs');
+var _5ITNEIMCcjs = require('../__chunks/5ITNEIMC.cjs');
 require('../__chunks/QODNNCT2.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 
@@ -13,5 +13,5 @@ require('../__chunks/2XIVACBM.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _YGFJ2STLcjs.WordConfetti_default;
+exports.default = _5ITNEIMCcjs.WordConfetti_default;
 //# sourceMappingURL=WordConfetti.cjs.map

package/dist/WordConfetti/WordConfetti.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   WordConfetti_default
-} from "../__chunks/OPDVLDRQ.js";
+} from "../__chunks/5R4TON7U.js";
 import "../__chunks/IB6JZQF3.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/__chunks/{YGFJ2STL.cjs → 5ITNEIMC.cjs}

@@ -14,7 +14,7 @@ var themeBackgroundColors = {
   cool: ["sky", "slate", "teal"],
   warm: ["red", "tan", "orange"]
 };
-var degreeOfTiltOptions = [-6, -6, -3, -3, 0, 3, 3, 6, 6];
+var degreeOfTiltOptions = [-6, -3, 0, 3, 6];
 var paddings = {
   300: "16px 20px 16px 20px",
   400: "20px 24px 20px 24px",
@@ -31,15 +31,30 @@ var gaps = {
   900: 9,
   1100: 10
 };
+var hashWord = (string) => {
+  let hash = 0;
+  if (string.length === 0)
+    return hash;
+  for (let i = 0; i < string.length; i++) {
+    const char = string.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return Math.abs(hash);
+};
 var WordConfetto = ({
-  backgroundColor,
-  rotation,
+  "data-testid": dataTestId,
   size,
-  text
+  text,
+  theme
 }) => {
+  const hash = hashWord(text);
+  const backgroundColor = themeBackgroundColors[theme][hash % Object.values(themeBackgroundColors[theme]).length];
+  const rotation = degreeOfTiltOptions[hash % degreeOfTiltOptions.length];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _QODNNCT2cjs.Box_default,
     {
+      "data-testid": dataTestId,
       backgroundColor,
       dangerouslySetInlineStyle: {
         __style: {
@@ -61,14 +76,6 @@ var WordConfetti = _react.forwardRef.call(void 0,
       theme,
       words
     } = props;
-    const styledWords = _react.useMemo.call(void 0, 
-      () => words.map((word) => ({
-        text: word,
-        backgroundColor: themeBackgroundColors[theme][Math.floor(Math.random() * 3)],
-        rotation: degreeOfTiltOptions[Math.floor(Math.random() * 9)]
-      })),
-      [theme, words]
-    );
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _QODNNCT2cjs.Box_default,
       {
@@ -78,20 +85,18 @@ var WordConfetti = _react.forwardRef.call(void 0,
         "data-testid": dataTestId,
         ref,
         gap: gaps[size],
-        children: styledWords.map(
-          ({ text, backgroundColor, rotation }, index) => {
-            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              WordConfetto,
-              {
-                backgroundColor,
-                rotation,
-                size,
-                text
-              },
-              `${text}+${index}`
-            );
-          }
-        )
+        children: words.map((word, index) => {
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            WordConfetto,
+            {
+              "data-testid": dataTestId ? `${dataTestId}-${index}` : void 0,
+              size,
+              text: word,
+              theme
+            },
+            `${word}${index}`
+          );
+        })
       }
     );
   }
@@ -101,4 +106,4 @@ var WordConfetti_default = WordConfetti;
 
 
 exports.WordConfetti_default = WordConfetti_default;
-//# sourceMappingURL=YGFJ2STL.cjs.map
+//# sourceMappingURL=5ITNEIMC.cjs.map

package/dist/__chunks/5ITNEIMC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"names":["WordConfetti"],"mappings":";;;;;;;;;AAAA,SAAyB,kBAAqC;AAuExD;AAnEN,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,GAAG,GAAG,CAAC;AAE5C,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,WAAW,CAAC,WAA2B;AAC3C,MAAI,OAAO;AACX,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,OAAO,OAAO,WAAW,CAAC;AAChC,YAAQ,QAAQ,KAAK,OAAO;AAC5B,YAAQ;AAAA,EACV;AACA,SAAO,KAAK,IAAI,IAAI;AACtB;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,QAAM,OAAO,SAAS,IAAI;AAC1B,QAAM,kBACJ,sBAAsB,KAAK,EACzB,OAAO,OAAO,OAAO,sBAAsB,KAAK,CAAC,EAAE,MACrD;AACF,QAAM,WAAW,oBAAoB,OAAO,oBAAoB,MAAM;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb;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,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,gBAAM,IAAI,CAAC,MAAM,UAAqB;AACrC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,aAAa,GAAG,cAAc,UAAU;AAAA,cAErD;AAAA,cACA,MAAM;AAAA,cACN;AAAA;AAAA,YAHK,GAAG,OAAO;AAAA,UAIjB;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ","sourcesContent":["import { type ReactNode, forwardRef, 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, -3, 0, 3, 6] as const;\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 hashWord = (string: string): number => {\n  let hash = 0;\n  if (string.length === 0) return hash;\n  for (let i = 0; i < string.length; i++) {\n    const char = string.charCodeAt(i);\n    hash = (hash << 5) - hash + char;\n    hash |= 0; // Convert to 32bit integer\n  }\n  return Math.abs(hash);\n};\n\nconst WordConfetto = ({\n  \"data-testid\": dataTestId,\n  size,\n  text,\n  theme,\n}: {\n  \"data-testid\"?: string;\n  size: 300 | 400 | 700 | 800 | 900 | 1100;\n  text: string;\n  theme: \"neutral\" | \"cool\" | \"warm\";\n}): ReactElement => {\n  const hash = hashWord(text);\n  const backgroundColor =\n    themeBackgroundColors[theme][\n      hash % Object.values(themeBackgroundColors[theme]).length\n    ];\n  const rotation = degreeOfTiltOptions[hash % degreeOfTiltOptions.length];\n\n  return (\n    <Box\n      data-testid={dataTestId}\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    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        {words.map((word, index): ReactNode => {\n          return (\n            <WordConfetto\n              data-testid={dataTestId ? `${dataTestId}-${index}` : undefined}\n              key={`${word}${index}`}\n              size={size}\n              text={word}\n              theme={theme}\n            />\n          );\n        })}\n      </Box>\n    );\n  },\n);\n\nexport default WordConfetti;\n"]}

package/dist/__chunks/{OPDVLDRQ.js → 5R4TON7U.js}

@@ -7,14 +7,14 @@ import {
 } from "./RVPSNO77.js";
 
 // src/WordConfetti/WordConfetti.tsx
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var themeBackgroundColors = {
   neutral: ["pink", "lilac", "thistle"],
   cool: ["sky", "slate", "teal"],
   warm: ["red", "tan", "orange"]
 };
-var degreeOfTiltOptions = [-6, -6, -3, -3, 0, 3, 3, 6, 6];
+var degreeOfTiltOptions = [-6, -3, 0, 3, 6];
 var paddings = {
   300: "16px 20px 16px 20px",
   400: "20px 24px 20px 24px",
@@ -31,15 +31,30 @@ var gaps = {
   900: 9,
   1100: 10
 };
+var hashWord = (string) => {
+  let hash = 0;
+  if (string.length === 0)
+    return hash;
+  for (let i = 0; i < string.length; i++) {
+    const char = string.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return Math.abs(hash);
+};
 var WordConfetto = ({
-  backgroundColor,
-  rotation,
+  "data-testid": dataTestId,
   size,
-  text
+  text,
+  theme
 }) => {
+  const hash = hashWord(text);
+  const backgroundColor = themeBackgroundColors[theme][hash % Object.values(themeBackgroundColors[theme]).length];
+  const rotation = degreeOfTiltOptions[hash % degreeOfTiltOptions.length];
   return /* @__PURE__ */ jsx(
     Box_default,
     {
+      "data-testid": dataTestId,
       backgroundColor,
       dangerouslySetInlineStyle: {
         __style: {
@@ -61,14 +76,6 @@ var WordConfetti = forwardRef(
       theme,
       words
     } = props;
-    const styledWords = useMemo(
-      () => words.map((word) => ({
-        text: word,
-        backgroundColor: themeBackgroundColors[theme][Math.floor(Math.random() * 3)],
-        rotation: degreeOfTiltOptions[Math.floor(Math.random() * 9)]
-      })),
-      [theme, words]
-    );
     return /* @__PURE__ */ jsx(
       Box_default,
       {
@@ -78,20 +85,18 @@ var WordConfetti = forwardRef(
         "data-testid": dataTestId,
         ref,
         gap: gaps[size],
-        children: styledWords.map(
-          ({ text, backgroundColor, rotation }, index) => {
-            return /* @__PURE__ */ jsx(
-              WordConfetto,
-              {
-                backgroundColor,
-                rotation,
-                size,
-                text
-              },
-              `${text}+${index}`
-            );
-          }
-        )
+        children: words.map((word, index) => {
+          return /* @__PURE__ */ jsx(
+            WordConfetto,
+            {
+              "data-testid": dataTestId ? `${dataTestId}-${index}` : void 0,
+              size,
+              text: word,
+              theme
+            },
+            `${word}${index}`
+          );
+        })
       }
     );
   }
@@ -101,4 +106,4 @@ var WordConfetti_default = WordConfetti;
 export {
   WordConfetti_default
 };
-//# sourceMappingURL=OPDVLDRQ.js.map
+//# sourceMappingURL=5R4TON7U.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"sourcesContent":["import { type ReactNode, forwardRef, 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, -3, 0, 3, 6] as const;\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 hashWord = (string: string): number => {\n  let hash = 0;\n  if (string.length === 0) return hash;\n  for (let i = 0; i < string.length; i++) {\n    const char = string.charCodeAt(i);\n    hash = (hash << 5) - hash + char;\n    hash |= 0; // Convert to 32bit integer\n  }\n  return Math.abs(hash);\n};\n\nconst WordConfetto = ({\n  \"data-testid\": dataTestId,\n  size,\n  text,\n  theme,\n}: {\n  \"data-testid\"?: string;\n  size: 300 | 400 | 700 | 800 | 900 | 1100;\n  text: string;\n  theme: \"neutral\" | \"cool\" | \"warm\";\n}): ReactElement => {\n  const hash = hashWord(text);\n  const backgroundColor =\n    themeBackgroundColors[theme][\n      hash % Object.values(themeBackgroundColors[theme]).length\n    ];\n  const rotation = degreeOfTiltOptions[hash % degreeOfTiltOptions.length];\n\n  return (\n    <Box\n      data-testid={dataTestId}\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    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        {words.map((word, index): ReactNode => {\n          return (\n            <WordConfetto\n              data-testid={dataTestId ? `${dataTestId}-${index}` : undefined}\n              key={`${word}${index}`}\n              size={size}\n              text={word}\n              theme={theme}\n            />\n          );\n        })}\n      </Box>\n    );\n  },\n);\n\nexport default WordConfetti;\n"],"mappings":";;;;;;;;;AAAA,SAAyB,kBAAqC;AAuExD;AAnEN,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,GAAG,GAAG,CAAC;AAE5C,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,WAAW,CAAC,WAA2B;AAC3C,MAAI,OAAO;AACX,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,OAAO,OAAO,WAAW,CAAC;AAChC,YAAQ,QAAQ,KAAK,OAAO;AAC5B,YAAQ;AAAA,EACV;AACA,SAAO,KAAK,IAAI,IAAI;AACtB;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,QAAM,OAAO,SAAS,IAAI;AAC1B,QAAM,kBACJ,sBAAsB,KAAK,EACzB,OAAO,OAAO,OAAO,sBAAsB,KAAK,CAAC,EAAE,MACrD;AACF,QAAM,WAAW,oBAAoB,OAAO,oBAAoB,MAAM;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb;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,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,gBAAM,IAAI,CAAC,MAAM,UAAqB;AACrC,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,aAAa,GAAG,cAAc,UAAU;AAAA,cAErD;AAAA,cACA,MAAM;AAAA,cACN;AAAA;AAAA,YAHK,GAAG,OAAO;AAAA,UAIjB;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ;","names":["WordConfetti"]}

package/dist/__chunks/{XJVLA3PA.cjs → 7VI7DO7P.cjs}

@@ -10,4 +10,4 @@ var ColorCambioWhite100 = "#ffffff";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
-//# sourceMappingURL=XJVLA3PA.cjs.map
+//# sourceMappingURL=7VI7DO7P.cjs.map

package/dist/__chunks/{XJVLA3PA.cjs.map → 7VI7DO7P.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 27 Sep 2024 17:29:00 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 01 Oct 2024 21:18:21 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}

package/dist/__chunks/{67K5GWKL.cjs → IFPLOCSV.cjs}

@@ -6,7 +6,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
 
 
 
-var _XJVLA3PAcjs = require('./XJVLA3PA.cjs');
+var _7VI7DO7Pcjs = require('./7VI7DO7P.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -66,12 +66,12 @@ function SelectList({
   };
   const getArrowIconColor = () => {
     if (errorText) {
-      return _XJVLA3PAcjs.ColorBaseDestructive700;
+      return _7VI7DO7Pcjs.ColorBaseDestructive700;
     } else {
       if (on === "darkBackground") {
-        return _XJVLA3PAcjs.ColorCambioWhite100;
+        return _7VI7DO7Pcjs.ColorCambioWhite100;
       } else {
-        return _XJVLA3PAcjs.ColorBaseGray700;
+        return _7VI7DO7Pcjs.ColorBaseGray700;
       }
     }
   };
@@ -140,4 +140,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=67K5GWKL.cjs.map
+//# sourceMappingURL=IFPLOCSV.cjs.map

package/dist/__chunks/{RWJSEIJ6.js → JGDLN47H.js}

@@ -10,4 +10,4 @@ export {
   ColorBaseGray700,
   ColorCambioWhite100
 };
-//# sourceMappingURL=RWJSEIJ6.js.map
+//# sourceMappingURL=JGDLN47H.js.map

package/dist/__chunks/{RWJSEIJ6.js.map → JGDLN47H.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 27 Sep 2024 17:29:00 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 01 Oct 2024 21:18:21 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}

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

@@ -9,7 +9,7 @@ var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
 
 
 
-var _XJVLA3PAcjs = require('./XJVLA3PA.cjs');
+var _7VI7DO7Pcjs = require('./7VI7DO7P.cjs');
 
 
 
@@ -147,12 +147,12 @@ function RichSelectList(props) {
   };
   const getArrowIconColor = () => {
     if (errorText) {
-      return _XJVLA3PAcjs.ColorBaseDestructive700;
+      return _7VI7DO7Pcjs.ColorBaseDestructive700;
     } else {
       if (color === "clear") {
-        return _XJVLA3PAcjs.ColorCambioWhite100;
+        return _7VI7DO7Pcjs.ColorCambioWhite100;
       } else {
-        return _XJVLA3PAcjs.ColorBaseGray700;
+        return _7VI7DO7Pcjs.ColorBaseGray700;
       }
     }
   };
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=JKEJPSO2.cjs.map
+//# sourceMappingURL=RZSHTFXZ.cjs.map

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

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

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

@@ -9,7 +9,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./RWJSEIJ6.js";
+} from "./JGDLN47H.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=BMTUKQRY.js.map
+//# sourceMappingURL=WIKMZ7QF.js.map

package/dist/index.cjs

@@ -32,11 +32,11 @@ var _R7BL4JYZcjs = require('./__chunks/R7BL4JYZ.cjs');
 require('./__chunks/TH4TA3JN.cjs');
 
 
-var _67K5GWKLcjs = require('./__chunks/67K5GWKL.cjs');
+var _IFPLOCSVcjs = require('./__chunks/IFPLOCSV.cjs');
 require('./__chunks/JVGX637E.cjs');
 
 
-var _JKEJPSO2cjs = require('./__chunks/JKEJPSO2.cjs');
+var _RZSHTFXZcjs = require('./__chunks/RZSHTFXZ.cjs');
 
 
 var _IJHKE2Y3cjs = require('./__chunks/IJHKE2Y3.cjs');
@@ -46,7 +46,7 @@ require('./__chunks/OKT24L6D.cjs');
 
 var _KFNK5PLGcjs = require('./__chunks/KFNK5PLG.cjs');
 require('./__chunks/WFVGNGEP.cjs');
-require('./__chunks/XJVLA3PA.cjs');
+require('./__chunks/7VI7DO7P.cjs');
 require('./__chunks/AFOQ6JVB.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 = _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 = _JKEJPSO2cjs.RichSelectList_default; exports.SelectList = _67K5GWKLcjs.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

@@ -32,11 +32,11 @@ import {
 import "./__chunks/YLWWTB4I.js";
 import {
   SelectList
-} from "./__chunks/VF2KL6JX.js";
+} from "./__chunks/WCHW3AYL.js";
 import "./__chunks/SPQ7DQHG.js";
 import {
   RichSelectList_default
-} from "./__chunks/BMTUKQRY.js";
+} from "./__chunks/WIKMZ7QF.js";
 import {
   Popover_default
 } from "./__chunks/IUMHK3GF.js";
@@ -46,7 +46,7 @@ import {
   IconButton_default
 } from "./__chunks/SZTZ3IZ5.js";
 import "./__chunks/4U4UW4AK.js";
-import "./__chunks/RWJSEIJ6.js";
+import "./__chunks/JGDLN47H.js";
 import "./__chunks/RJS7BKZD.js";
 import {
   ButtonGroup_default
@@ -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.6.0",
+  "version": "20.7.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -28,8 +28,8 @@
     "react": "18.2.0",
     "tsup": "6.7.0",
     "typescript": "5.0.4",
-    "@cambly/syntax-tsconfig": "1.4.1",
-    "@cambly/eslint-config-syntax": "1.4.0"
+    "@cambly/eslint-config-syntax": "1.4.0",
+    "@cambly/syntax-tsconfig": "1.4.1"
   },
   "publishConfig": {
     "access": "public"

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"]}