@cambly/syntax-core 22.4.0 → 23.1.0

package/dist/Avatar/Avatar.d.ts

@@ -25,7 +25,7 @@ declare const Avatar: ({ accessibilityLabel, icon, size, src, }: {
      *
      * @defaultValue `md`
      */
-    size?: "sm" | "md" | "lg" | "xs" | "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" | "yellow100" | "yellow200" | "yellow300" | "yellow700" | "yellow800" | "yellow900" | "white40" | "white70" | "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;
         rtlMirror?: boolean | undefined;
     } & React.RefAttributes<SVGSVGElement>> | undefined;

package/dist/Card/Card.d.ts

@@ -19,11 +19,12 @@ type CardProps = {
      * The size of the card which specifies the padding and spacing of the card.
      *
      * `compact`: 8px padding
-     * `roomy`: 16px padding
+     * `medium`: 16px padding
+     * `roomy`: 24px padding
      *
-     * @defaultValue `roomy`
+     * @defaultValue `medium`
      */
-    size?: "compact" | "roomy";
+    size?: "compact" | "medium" | "roomy";
 };
 /**
  * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.

package/dist/Card/Card.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   Card_default
-} from "../__chunks/PUWF2Z5A.js";
+} from "../__chunks/3N244M3S.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/4U4UW4AK.js";

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.
      *
@@ -27,7 +27,7 @@ declare const Heading: ({ align, as, children, color, "data-testid": dataTestId,
      *
      * @defaultValue "gray900"
      */
-    color?: "primary" | "destructive-primary" | "inherit" | "gray700" | "gray900" | "white" | "success" | undefined;
+    color?: "inherit" | "gray700" | "gray900" | "white" | "primary" | "destructive-primary" | "success" | undefined;
     /**
      * Test id for the text.
      */

package/dist/LinkTapArea/LinkTapArea.d.ts

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

package/dist/RichSelect/RichSelectList.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   RichSelectList_default
-} from "../__chunks/FJBPLDAY.js";
+} from "../__chunks/ECYEQCWJ.js";
 import "../__chunks/R6OBV53M.js";
 import "../__chunks/36DG472B.js";
 import "../__chunks/WJ4QY73I.js";
@@ -12,7 +12,7 @@ import "../__chunks/576PJXFR.js";
 import "../__chunks/3WKVZ2UU.js";
 import "../__chunks/KEJPRZJ5.js";
 import "../__chunks/4U4UW4AK.js";
-import "../__chunks/RRLXFGHP.js";
+import "../__chunks/RKMUJHPO.js";
 import "../__chunks/Y53Z25OG.js";
 import "../__chunks/DDUJFFG7.js";
 import "../__chunks/N7G37EKF.js";

package/dist/SelectList/SelectList.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   SelectList
-} from "../__chunks/24GKJ5FL.js";
+} from "../__chunks/UMJL2E7W.js";
 import "../__chunks/SPQ7DQHG.js";
-import "../__chunks/RRLXFGHP.js";
+import "../__chunks/RKMUJHPO.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/TapArea/TapArea.d.ts

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

package/dist/Toast/Toast.d.ts

@@ -31,10 +31,16 @@ type ToastProps = {
      * @defaultValue 5000
      */
     timeout?: number;
+    /**
+     * The z-index of the toast
+     *
+     * @defaultValue 0
+     */
+    zIndex?: number;
 };
 /**
  * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.
  */
-declare function Toast({ body, "data-testid": dataTestId, heading, icon: Icon, on, timeout, }: ToastProps): JSX.Element;
+declare function Toast({ body, "data-testid": dataTestId, heading, icon: Icon, on, timeout, zIndex, }: ToastProps): JSX.Element;
 
 export { Toast as default };

package/dist/Toast/Toast.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   Toast
-} from "../__chunks/CAB67Z66.js";
+} from "../__chunks/RQVUNK7V.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/4U4UW4AK.js";

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?: "primary" | "destructive-primary" | "inherit" | "gray700" | "gray900" | "white" | "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;
     /**
      * Controls how whitespace within the element is handled.
      *
@@ -119,7 +119,7 @@ declare const Typography: React.ForwardRefExoticComponent<{
      *
      * @defaultValue "inherit"
      */
-    whiteSpace?: "inherit" | "nowrap" | "normal" | "preLine" | undefined;
+    whiteSpace?: "inherit" | "normal" | "nowrap" | "preLine" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 
 export { Typography as default };

package/dist/__chunks/{PUWF2Z5A.js → 3N244M3S.js}

@@ -13,14 +13,21 @@ var Card = forwardRef(function Card2(props, ref) {
   const _a = props, { children } = _a, cardProps = __objRest(_a, ["children"]);
   const {
     backgroundColor = "white",
-    size = "roomy",
+    size = "medium",
     "data-testid": dataTestId
   } = cardProps;
+  const getPadding = (paddingSize) => {
+    if (paddingSize === "compact")
+      return 2;
+    if (paddingSize === "roomy")
+      return 6;
+    return 4;
+  };
   return /* @__PURE__ */ jsx(
     Box_default,
     {
       rounding: "md",
-      padding: size === "compact" ? 2 : 4,
+      padding: getPadding(size),
       width: "100%",
       backgroundColor,
       "data-testid": dataTestId,
@@ -34,4 +41,4 @@ var Card_default = Card;
 export {
   Card_default
 };
-//# sourceMappingURL=PUWF2Z5A.js.map
+//# sourceMappingURL=3N244M3S.js.map

package/dist/__chunks/3N244M3S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\ntype CardProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card which specifies the padding and spacing of the card.\n   *\n   * `compact`: 8px padding\n   * `medium`: 16px padding\n   * `roomy`: 24px padding\n   *\n   * @defaultValue `medium`\n   */\n  size?: \"compact\" | \"medium\" | \"roomy\";\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  props: CardProps,\n  ref,\n): JSX.Element {\n  const { children, ...cardProps } = props;\n  const {\n    backgroundColor = \"white\",\n    size = \"medium\",\n    \"data-testid\": dataTestId,\n  } = cardProps;\n  const getPadding = (paddingSize?: \"compact\" | \"medium\" | \"roomy\") => {\n    if (paddingSize === \"compact\") return 2;\n    if (paddingSize === \"roomy\") return 6;\n    return 4;\n  };\n\n  return (\n    <Box\n      rounding=\"md\"\n      padding={getPadding(size)}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n});\n\nexport default Card;\n"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAkB;AAkDvB;AAjBJ,IAAM,OAAO,WAAsC,SAASA,MAC1D,OACA,KACa;AACb,QAAmC,YAA3B,WArCV,IAqCqC,IAAd,sBAAc,IAAd,CAAb;AACR,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AACJ,QAAM,aAAa,CAAC,gBAAiD;AACnE,QAAI,gBAAgB;AAAW,aAAO;AACtC,QAAI,gBAAgB;AAAS,aAAO;AACpC,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS,WAAW,IAAI;AAAA,MACxB,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["Card"]}

package/dist/__chunks/{FJBPLDAY.js → ECYEQCWJ.js}

@@ -14,7 +14,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./RRLXFGHP.js";
+} from "./RKMUJHPO.js";
 import {
   RichSelectSection_default
 } from "./Y53Z25OG.js";
@@ -293,4 +293,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=FJBPLDAY.js.map
+//# sourceMappingURL=ECYEQCWJ.js.map

package/dist/__chunks/{RRLXFGHP.js → RKMUJHPO.js}

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

package/dist/__chunks/{RRLXFGHP.js.map → RKMUJHPO.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 04 Dec 2025 22:29:28 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 Mon, 26 Jan 2026 18:06:08 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/{CAB67Z66.js → RQVUNK7V.js}

@@ -20,7 +20,8 @@ function Toast({
   heading,
   icon: Icon,
   on = "lightBackground",
-  timeout = 5e3
+  timeout = 5e3,
+  zIndex = 0
 }) {
   const [displayToast, setDisplayToast] = useState(true);
   useEffect(() => {
@@ -47,7 +48,8 @@ function Toast({
           left: 0,
           right: 0,
           bottom: 50,
-          boxShadow: "0px 16px 32px 0px rgba(0, 0, 0, 0.25)"
+          boxShadow: "0px 16px 32px 0px rgba(0, 0, 0, 0.25)",
+          zIndex
         }
       },
       "data-testid": dataTestId,
@@ -73,4 +75,4 @@ function Toast({
 export {
   Toast
 };
-//# sourceMappingURL=CAB67Z66.js.map
+//# sourceMappingURL=RQVUNK7V.js.map

package/dist/__chunks/RQVUNK7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import { type ComponentProps, useEffect, useState } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nfunction typographyColor({\n  on,\n}: {\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  return on === \"lightBackground\" ? \"white\" : \"gray900\";\n}\n\ntype ToastProps = {\n  /**\n   * The optional text of the toast under the heading\n   */\n  body?: string;\n  /**\n   * Test id for the toast\n   */\n  \"data-testid\"?: string;\n  heading: string;\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n  /**\n   * Indicate whether the toast renders on a light or dark background. Changes the color of the toast\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The number of milliseconds to wait before automatically dismissing the toast\n   *\n   * @defaultValue 5000\n   */\n  timeout?: number;\n  /**\n   * The z-index of the toast\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n};\n/**\n * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.\n */\n\nexport default function Toast({\n  body,\n  \"data-testid\": dataTestId,\n  heading,\n  icon: Icon,\n  on = \"lightBackground\",\n  timeout = 5000,\n  zIndex = 0,\n}: ToastProps): JSX.Element {\n  const [displayToast, setDisplayToast] = useState<boolean>(true);\n\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setDisplayToast(false);\n    }, timeout);\n    return () => clearTimeout(timeoutId);\n  }, [timeout]);\n\n  return (\n    <Box\n      position=\"fixed\"\n      width=\"fit-content\"\n      marginStart=\"auto\"\n      marginEnd=\"auto\"\n      padding={4}\n      rounding=\"md\"\n      display={displayToast ? \"flex\" : \"none\"}\n      gap={5}\n      alignItems=\"center\"\n      backgroundColor={on === \"lightBackground\" ? \"gray900\" : \"white\"}\n      dangerouslySetInlineStyle={{\n        __style: {\n          left: 0,\n          right: 0,\n          bottom: 50,\n          boxShadow: \"0px 16px 32px 0px rgba(0, 0, 0, 0.25)\",\n          zIndex: zIndex,\n        },\n      }}\n      data-testid={dataTestId}\n    >\n      {Icon && <Icon color={typographyColor({ on })} size={400} />}\n      <Box display=\"flex\" direction=\"column\" gap={1}>\n        <Typography\n          size={300}\n          weight=\"semiBold\"\n          color={typographyColor({ on })}\n        >\n          {heading}\n        </Typography>\n        {body && (\n          <Typography lineClamp={2} color={typographyColor({ on })}>\n            {body}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAA8B,WAAW,gBAAgB;AA8F1C,cACT,YADS;AAzFf,SAAS,gBAAgB;AAAA,EACvB;AACF,GAEwB;AACtB,SAAO,OAAO,oBAAoB,UAAU;AAC9C;AA0Ce,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AACX,GAA4B;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,YAAY,WAAW,MAAM;AACjC,sBAAgB,KAAK;AAAA,IACvB,GAAG,OAAO;AACV,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAS,eAAe,SAAS;AAAA,MACjC,KAAK;AAAA,MACL,YAAW;AAAA,MACX,iBAAiB,OAAO,oBAAoB,YAAY;AAAA,MACxD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA,gBAAQ,oBAAC,QAAK,OAAO,gBAAgB,EAAE,GAAG,CAAC,GAAG,MAAM,KAAK;AAAA,QAC1D,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,KAAK,GAC1C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,OAAO,gBAAgB,EAAE,GAAG,CAAC;AAAA,cAE5B;AAAA;AAAA,UACH;AAAA,UACC,QACC,oBAAC,sBAAW,WAAW,GAAG,OAAO,gBAAgB,EAAE,GAAG,CAAC,GACpD,gBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/{24GKJ5FL.js → UMJL2E7W.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./RRLXFGHP.js";
+} from "./RKMUJHPO.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -141,4 +141,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=24GKJ5FL.js.map
+//# sourceMappingURL=UMJL2E7W.js.map

package/dist/index.js

@@ -10,7 +10,7 @@ import {
 } from "./__chunks/66CPOSY2.js";
 import {
   Card_default
-} from "./__chunks/PUWF2Z5A.js";
+} from "./__chunks/3N244M3S.js";
 import {
   LinkButton_default
 } from "./__chunks/TH3OGGTK.js";
@@ -38,11 +38,11 @@ import {
 } from "./__chunks/STLN5GZL.js";
 import {
   SelectList
-} from "./__chunks/24GKJ5FL.js";
+} from "./__chunks/UMJL2E7W.js";
 import "./__chunks/SPQ7DQHG.js";
 import {
   RichSelectList_default
-} from "./__chunks/FJBPLDAY.js";
+} from "./__chunks/ECYEQCWJ.js";
 import "./__chunks/R6OBV53M.js";
 import {
   ButtonGroup_default
@@ -63,7 +63,7 @@ import {
   IconButton_default
 } from "./__chunks/KEJPRZJ5.js";
 import "./__chunks/4U4UW4AK.js";
-import "./__chunks/RRLXFGHP.js";
+import "./__chunks/RKMUJHPO.js";
 import "./__chunks/Y53Z25OG.js";
 import "./__chunks/DDUJFFG7.js";
 import "./__chunks/N7G37EKF.js";
@@ -80,7 +80,7 @@ import "./__chunks/6TM2ES2T.js";
 import "./__chunks/ODMJANSX.js";
 import {
   Toast
-} from "./__chunks/CAB67Z66.js";
+} from "./__chunks/RQVUNK7V.js";
 import {
   ThemeProvider
 } from "./__chunks/KTX4P4Q2.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "22.4.0",
+  "version": "23.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/__chunks/CAB67Z66.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["import { type ComponentProps, useEffect, useState } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nfunction typographyColor({\n  on,\n}: {\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  return on === \"lightBackground\" ? \"white\" : \"gray900\";\n}\n\ntype ToastProps = {\n  /**\n   * The optional text of the toast under the heading\n   */\n  body?: string;\n  /**\n   * Test id for the toast\n   */\n  \"data-testid\"?: string;\n  heading: string;\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n  /**\n   * Indicate whether the toast renders on a light or dark background. Changes the color of the toast\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The number of milliseconds to wait before automatically dismissing the toast\n   *\n   * @defaultValue 5000\n   */\n  timeout?: number;\n};\n/**\n * [Toast](https://cambly-syntax.vercel.app/?path=/docs/components-toast--docs) is a component to display a small, dismissible notification.\n */\n\nexport default function Toast({\n  body,\n  \"data-testid\": dataTestId,\n  heading,\n  icon: Icon,\n  on = \"lightBackground\",\n  timeout = 5000,\n}: ToastProps): JSX.Element {\n  const [displayToast, setDisplayToast] = useState<boolean>(true);\n\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setDisplayToast(false);\n    }, timeout);\n    return () => clearTimeout(timeoutId);\n  }, [timeout]);\n\n  return (\n    <Box\n      position=\"fixed\"\n      width=\"fit-content\"\n      marginStart=\"auto\"\n      marginEnd=\"auto\"\n      padding={4}\n      rounding=\"md\"\n      display={displayToast ? \"flex\" : \"none\"}\n      gap={5}\n      alignItems=\"center\"\n      backgroundColor={on === \"lightBackground\" ? \"gray900\" : \"white\"}\n      dangerouslySetInlineStyle={{\n        __style: {\n          left: 0,\n          right: 0,\n          bottom: 50,\n          boxShadow: \"0px 16px 32px 0px rgba(0, 0, 0, 0.25)\",\n        },\n      }}\n      data-testid={dataTestId}\n    >\n      {Icon && <Icon color={typographyColor({ on })} size={400} />}\n      <Box display=\"flex\" direction=\"column\" gap={1}>\n        <Typography\n          size={300}\n          weight=\"semiBold\"\n          color={typographyColor({ on })}\n        >\n          {heading}\n        </Typography>\n        {body && (\n          <Typography lineClamp={2} color={typographyColor({ on })}>\n            {body}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAAA,SAA8B,WAAW,gBAAgB;AAsF1C,cACT,YADS;AAjFf,SAAS,gBAAgB;AAAA,EACvB;AACF,GAEwB;AACtB,SAAO,OAAO,oBAAoB,UAAU;AAC9C;AAoCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,MAAM;AAAA,EACN,KAAK;AAAA,EACL,UAAU;AACZ,GAA4B;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,YAAY,WAAW,MAAM;AACjC,sBAAgB,KAAK;AAAA,IACvB,GAAG,OAAO;AACV,WAAO,MAAM,aAAa,SAAS;AAAA,EACrC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAS,eAAe,SAAS;AAAA,MACjC,KAAK;AAAA,MACL,YAAW;AAAA,MACX,iBAAiB,OAAO,oBAAoB,YAAY;AAAA,MACxD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA,gBAAQ,oBAAC,QAAK,OAAO,gBAAgB,EAAE,GAAG,CAAC,GAAG,MAAM,KAAK;AAAA,QAC1D,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,KAAK,GAC1C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,OAAO,gBAAgB,EAAE,GAAG,CAAC;AAAA,cAE5B;AAAA;AAAA,UACH;AAAA,UACC,QACC,oBAAC,sBAAW,WAAW,GAAG,OAAO,gBAAgB,EAAE,GAAG,CAAC,GACpD,gBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/__chunks/PUWF2Z5A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\ntype CardProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card which specifies the padding and spacing of the card.\n   *\n   * `compact`: 8px padding\n   * `roomy`: 16px padding\n   *\n   * @defaultValue `roomy`\n   */\n  size?: \"compact\" | \"roomy\";\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  props: CardProps,\n  ref,\n): JSX.Element {\n  const { children, ...cardProps } = props;\n  const {\n    backgroundColor = \"white\",\n    size = \"roomy\",\n    \"data-testid\": dataTestId,\n  } = cardProps;\n\n  return (\n    <Box\n      rounding=\"md\"\n      padding={size === \"compact\" ? 2 : 4}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n      ref={ref}\n    >\n      {children}\n    </Box>\n  );\n});\n\nexport default Card;\n"],"mappings":";;;;;;;;;AAAA,SAAS,kBAAkB;AA4CvB;AAZJ,IAAM,OAAO,WAAsC,SAASA,MAC1D,OACA,KACa;AACb,QAAmC,YAA3B,WApCV,IAoCqC,IAAd,sBAAc,IAAd,CAAb;AACR,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS,SAAS,YAAY,IAAI;AAAA,MAClC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["Card"]}