@cambly/syntax-core 10.6.1 → 10.7.0

package/dist/Card/Card.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _K77KFPIVcjs = require('../__chunks/K77KFPIV.cjs');
+var _YEXWMX72cjs = require('../__chunks/YEXWMX72.cjs');
 require('../__chunks/5SMR5MWY.cjs');
 require('../__chunks/VUANIQYP.cjs');
 require('../__chunks/7GJ2SD7O.cjs');
@@ -10,5 +10,5 @@ require('../__chunks/NGUJFGAC.cjs');
 require('../__chunks/I64JGYX7.cjs');
 
 
-exports.default = _K77KFPIVcjs.Card;
+exports.default = _YEXWMX72cjs.Card;
 //# sourceMappingURL=Card.cjs.map

package/dist/Card/Card.d.ts

@@ -1,9 +1,16 @@
+import colors from '../colors/allColors.js';
+
 declare const DeprecatedCardSizes: readonly ["sm", "lg"];
 type CardType = {
     /**
      * Test id for the button
      */
     "data-testid"?: string;
+    /**
+     * The background color of the box.
+     * @defaultValue `white`
+     */
+    backgroundColor?: (typeof colors)[number];
     /**
      * The child components to render within Card.
      */
@@ -22,6 +29,6 @@ type CardType = {
 /**
  * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.
  */
-declare function Card({ children, size, "data-testid": dataTestId, }: CardType): JSX.Element;
+declare function Card({ backgroundColor, children, size, "data-testid": dataTestId, }: CardType): JSX.Element;
 
 export { Card as default };

package/dist/Card/Card.js

@@ -1,6 +1,6 @@
 import {
   Card
-} from "../__chunks/STT27BTU.js";
+} from "../__chunks/G55FUPF2.js";
 import "../__chunks/TJHCYMPV.js";
 import "../__chunks/5AR53MHD.js";
 import "../__chunks/TPMQI44L.js";

package/dist/RichSelect/RichSelectList.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _SBMJ42MEcjs = require('../__chunks/SBMJ42ME.cjs');
+var _6YWV3WYBcjs = require('../__chunks/6YWV3WYB.cjs');
 require('../__chunks/5TKLFG5Y.cjs');
 require('../__chunks/PBOQIXCB.cjs');
 require('../__chunks/RAVU4WEO.cjs');
@@ -13,7 +13,7 @@ require('../__chunks/IJVFSOXU.cjs');
 require('../__chunks/36B62A3Z.cjs');
 require('../__chunks/3HVG5AGO.cjs');
 require('../__chunks/M3L2KJQY.cjs');
-require('../__chunks/7RN4IO67.cjs');
+require('../__chunks/SYX4XARK.cjs');
 require('../__chunks/FMSI35YS.cjs');
 require('../__chunks/ZDMSFZS3.cjs');
 require('../__chunks/2RCQTGOZ.cjs');
@@ -44,5 +44,5 @@ require('../__chunks/RFHPSEBF.cjs');
 require('../__chunks/I64JGYX7.cjs');
 
 
-exports.default = _SBMJ42MEcjs.RichSelectList_default;
+exports.default = _6YWV3WYBcjs.RichSelectList_default;
 //# sourceMappingURL=RichSelectList.cjs.map

package/dist/RichSelect/RichSelectList.js

@@ -1,6 +1,6 @@
 import {
   RichSelectList_default
-} from "../__chunks/6MSWOE4Q.js";
+} from "../__chunks/CQOOQIYP.js";
 import "../__chunks/JHAV5OTQ.js";
 import "../__chunks/LJHH6KUW.js";
 import "../__chunks/2R4YCOYE.js";
@@ -13,7 +13,7 @@ import "../__chunks/XFFSBU7E.js";
 import "../__chunks/5DBWL6IK.js";
 import "../__chunks/4PWSK5GI.js";
 import "../__chunks/OXKLJY2L.js";
-import "../__chunks/DFKMFASG.js";
+import "../__chunks/EEYUNPFG.js";
 import "../__chunks/JKXOZUCV.js";
 import "../__chunks/PTWXXDFF.js";
 import "../__chunks/DNTOWEIQ.js";

package/dist/SelectList/SelectList.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _PNYDSMUMcjs = require('../__chunks/PNYDSMUM.cjs');
+var _4KGKMDFDcjs = require('../__chunks/4KGKMDFD.cjs');
 require('../__chunks/GKECCWR3.cjs');
-require('../__chunks/7RN4IO67.cjs');
+require('../__chunks/SYX4XARK.cjs');
 require('../__chunks/LTM57QMY.cjs');
 require('../__chunks/ZX5KONS2.cjs');
 require('../__chunks/NGUJFGAC.cjs');
@@ -12,5 +12,5 @@ require('../__chunks/GVEA7SLQ.cjs');
 require('../__chunks/I64JGYX7.cjs');
 
 
-exports.default = _PNYDSMUMcjs.SelectList;
+exports.default = _4KGKMDFDcjs.SelectList;
 //# sourceMappingURL=SelectList.cjs.map

package/dist/SelectList/SelectList.js

@@ -1,8 +1,8 @@
 import {
   SelectList
-} from "../__chunks/6ZCCQPKZ.js";
+} from "../__chunks/MVXPGMCV.js";
 import "../__chunks/HOUO3WV6.js";
-import "../__chunks/DFKMFASG.js";
+import "../__chunks/EEYUNPFG.js";
 import "../__chunks/2O6FDRTF.js";
 import "../__chunks/B2TFERTM.js";
 import "../__chunks/ERXGNP37.js";

package/dist/__chunks/{PNYDSMUM.cjs → 4KGKMDFD.cjs}

@@ -4,7 +4,7 @@ var _GKECCWR3cjs = require('./GKECCWR3.cjs');
 
 
 
-var _7RN4IO67cjs = require('./7RN4IO67.cjs');
+var _SYX4XARKcjs = require('./SYX4XARK.cjs');
 
 
 var _LTM57QMYcjs = require('./LTM57QMY.cjs');
@@ -100,7 +100,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _7RN4IO67cjs.ColorBaseDestructive700 : _7RN4IO67cjs.ColorBaseGray800,
+                  fill: errorText ? _SYX4XARKcjs.ColorBaseDestructive700 : _SYX4XARKcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
@@ -124,4 +124,4 @@ SelectList.Option = _GKECCWR3cjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=PNYDSMUM.cjs.map
+//# sourceMappingURL=4KGKMDFD.cjs.map

package/dist/__chunks/{SBMJ42ME.cjs → 6YWV3WYB.cjs}

@@ -15,7 +15,7 @@ var _M3L2KJQYcjs = require('./M3L2KJQY.cjs');
 
 
 
-var _7RN4IO67cjs = require('./7RN4IO67.cjs');
+var _SYX4XARKcjs = require('./SYX4XARK.cjs');
 
 
 var _FMSI35YScjs = require('./FMSI35YS.cjs');
@@ -232,7 +232,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _7RN4IO67cjs.ColorBaseDestructive700 : _7RN4IO67cjs.ColorBaseGray800,
+                              fill: errorText ? _SYX4XARKcjs.ColorBaseDestructive700 : _SYX4XARKcjs.ColorBaseGray800,
                               d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                             }
                           )
@@ -267,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=SBMJ42ME.cjs.map
+//# sourceMappingURL=6YWV3WYB.cjs.map

package/dist/__chunks/{6MSWOE4Q.js → CQOOQIYP.js}

@@ -15,7 +15,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./DFKMFASG.js";
+} from "./EEYUNPFG.js";
 import {
   RichSelectSection_default
 } from "./JKXOZUCV.js";
@@ -267,4 +267,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=6MSWOE4Q.js.map
+//# sourceMappingURL=CQOOQIYP.js.map

package/dist/__chunks/{DFKMFASG.js → EEYUNPFG.js}

@@ -6,4 +6,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=DFKMFASG.js.map
+//# sourceMappingURL=EEYUNPFG.js.map

package/dist/__chunks/{DFKMFASG.js.map → EEYUNPFG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 22 Feb 2024 14:48:40 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 Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 22 Feb 2024 22:37:11 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 Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/{STT27BTU.js → G55FUPF2.js}

@@ -5,6 +5,7 @@ import {
 // src/Card/Card.tsx
 import { jsx } from "react/jsx-runtime";
 function Card({
+  backgroundColor = "white",
   children,
   size,
   "data-testid": dataTestId
@@ -22,7 +23,7 @@ function Card({
       lgPadding: 7,
       maxWidth: size && sizeWidth[size],
       width: "100%",
-      backgroundColor: "white",
+      backgroundColor,
       "data-testid": dataTestId,
       children
     }
@@ -32,4 +33,4 @@ function Card({
 export {
   Card
 };
-//# sourceMappingURL=STT27BTU.js.map
+//# sourceMappingURL=G55FUPF2.js.map

package/dist/__chunks/G55FUPF2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  backgroundColor = \"white\",\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AA8CI;AAZW,SAAR,KAAsB;AAAA,EAC3B,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/__chunks/{6ZCCQPKZ.js → MVXPGMCV.js}

@@ -4,7 +4,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./DFKMFASG.js";
+} from "./EEYUNPFG.js";
 import {
   Focus_module_default
 } from "./2O6FDRTF.js";
@@ -124,4 +124,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=6ZCCQPKZ.js.map
+//# sourceMappingURL=MVXPGMCV.js.map

package/dist/__chunks/{7RN4IO67.cjs → SYX4XARK.cjs}

@@ -6,4 +6,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=7RN4IO67.cjs.map
+//# sourceMappingURL=SYX4XARK.cjs.map

package/dist/__chunks/{7RN4IO67.cjs.map → SYX4XARK.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 22 Feb 2024 14:48:40 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 Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 22 Feb 2024 22:37:11 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 Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}

package/dist/__chunks/{K77KFPIV.cjs → YEXWMX72.cjs}

@@ -5,6 +5,7 @@ var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
 // src/Card/Card.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function Card({
+  backgroundColor = "white",
   children,
   size,
   "data-testid": dataTestId
@@ -22,7 +23,7 @@ function Card({
       lgPadding: 7,
       maxWidth: size && sizeWidth[size],
       width: "100%",
-      backgroundColor: "white",
+      backgroundColor,
       "data-testid": dataTestId,
       children
     }
@@ -32,4 +33,4 @@ function Card({
 
 
 exports.Card = Card;
-//# sourceMappingURL=K77KFPIV.cjs.map
+//# sourceMappingURL=YEXWMX72.cjs.map

package/dist/__chunks/YEXWMX72.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";;;;;AA8CI;AAZW,SAAR,KAAsB;AAAA,EAC3B,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ","sourcesContent":["import Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  backgroundColor = \"white\",\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}

package/dist/index.cjs

@@ -12,7 +12,7 @@ var _W7CSNF2Mcjs = require('./__chunks/W7CSNF2M.cjs');
 var _GOSWBV5Dcjs = require('./__chunks/GOSWBV5D.cjs');
 
 
-var _K77KFPIVcjs = require('./__chunks/K77KFPIV.cjs');
+var _YEXWMX72cjs = require('./__chunks/YEXWMX72.cjs');
 
 
 var _HR5QOB3Ucjs = require('./__chunks/HR5QOB3U.cjs');
@@ -27,11 +27,11 @@ require('./__chunks/SJFWRAOP.cjs');
 var _JLUYEG2Lcjs = require('./__chunks/JLUYEG2L.cjs');
 
 
-var _PNYDSMUMcjs = require('./__chunks/PNYDSMUM.cjs');
+var _4KGKMDFDcjs = require('./__chunks/4KGKMDFD.cjs');
 require('./__chunks/GKECCWR3.cjs');
 
 
-var _SBMJ42MEcjs = require('./__chunks/SBMJ42ME.cjs');
+var _6YWV3WYBcjs = require('./__chunks/6YWV3WYB.cjs');
 require('./__chunks/5TKLFG5Y.cjs');
 
 
@@ -56,7 +56,7 @@ require('./__chunks/3HVG5AGO.cjs');
 
 
 var _M3L2KJQYcjs = require('./__chunks/M3L2KJQY.cjs');
-require('./__chunks/7RN4IO67.cjs');
+require('./__chunks/SYX4XARK.cjs');
 require('./__chunks/FMSI35YS.cjs');
 require('./__chunks/ZDMSFZS3.cjs');
 require('./__chunks/2RCQTGOZ.cjs');
@@ -127,5 +127,5 @@ require('./__chunks/I64JGYX7.cjs');
 
 
 
-exports.Avatar = _EWCLQBKVcjs.Avatar_default; exports.AvatarGroup = _W7CSNF2Mcjs.AvatarGroup; exports.Badge = _JYDZTZIKcjs.Badge_default; exports.Box = _5SMR5MWYcjs.Box_default; exports.Button = _RAVU4WEOcjs.Button_default; exports.ButtonGroup = _PBOQIXCBcjs.ButtonGroup_default; exports.Card = _K77KFPIVcjs.Card; exports.Checkbox = _GOSWBV5Dcjs.Checkbox_default; exports.Chip = _QQWCNTE4cjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _FZ5HWA3Scjs.Heading_default; exports.IconButton = _LDFTT3OIcjs.IconButton_default; exports.LinkButton = _JLUYEG2Lcjs.LinkButton_default; exports.Modal = _HR5QOB3Ucjs.Modal; exports.Popover = _QNBZ64IEcjs.Popover_default; exports.RadioButton = _LMCK5YO5cjs.RadioButton_default; exports.RichSelectList = _SBMJ42MEcjs.RichSelectList_default; exports.SelectList = _PNYDSMUMcjs.SelectList; exports.TapArea = _M3L2KJQYcjs.TapArea_default; exports.TextArea = _FMSBGH2Icjs.TextArea_default; exports.TextField = _KCYZNZBOcjs.TextField; exports.Tooltip = _ZG64UIHGcjs.Tooltip_default; exports.Typography = _ZX5KONS2cjs.Typography_default;
+exports.Avatar = _EWCLQBKVcjs.Avatar_default; exports.AvatarGroup = _W7CSNF2Mcjs.AvatarGroup; exports.Badge = _JYDZTZIKcjs.Badge_default; exports.Box = _5SMR5MWYcjs.Box_default; exports.Button = _RAVU4WEOcjs.Button_default; exports.ButtonGroup = _PBOQIXCBcjs.ButtonGroup_default; exports.Card = _YEXWMX72cjs.Card; exports.Checkbox = _GOSWBV5Dcjs.Checkbox_default; exports.Chip = _QQWCNTE4cjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _FZ5HWA3Scjs.Heading_default; exports.IconButton = _LDFTT3OIcjs.IconButton_default; exports.LinkButton = _JLUYEG2Lcjs.LinkButton_default; exports.Modal = _HR5QOB3Ucjs.Modal; exports.Popover = _QNBZ64IEcjs.Popover_default; exports.RadioButton = _LMCK5YO5cjs.RadioButton_default; exports.RichSelectList = _6YWV3WYBcjs.RichSelectList_default; exports.SelectList = _4KGKMDFDcjs.SelectList; exports.TapArea = _M3L2KJQYcjs.TapArea_default; exports.TextArea = _FMSBGH2Icjs.TextArea_default; exports.TextField = _KCYZNZBOcjs.TextField; exports.Tooltip = _ZG64UIHGcjs.Tooltip_default; exports.Typography = _ZX5KONS2cjs.Typography_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -12,7 +12,7 @@ import {
 } from "./__chunks/V3ZO4D37.js";
 import {
   Card
-} from "./__chunks/STT27BTU.js";
+} from "./__chunks/G55FUPF2.js";
 import {
   Modal
 } from "./__chunks/XT2JUTU3.js";
@@ -27,11 +27,11 @@ import {
 } from "./__chunks/EIYMXZ2V.js";
 import {
   SelectList
-} from "./__chunks/6ZCCQPKZ.js";
+} from "./__chunks/MVXPGMCV.js";
 import "./__chunks/HOUO3WV6.js";
 import {
   RichSelectList_default
-} from "./__chunks/6MSWOE4Q.js";
+} from "./__chunks/CQOOQIYP.js";
 import "./__chunks/JHAV5OTQ.js";
 import {
   ButtonGroup_default
@@ -56,7 +56,7 @@ import "./__chunks/4PWSK5GI.js";
 import {
   TapArea_default
 } from "./__chunks/OXKLJY2L.js";
-import "./__chunks/DFKMFASG.js";
+import "./__chunks/EEYUNPFG.js";
 import "./__chunks/JKXOZUCV.js";
 import "./__chunks/PTWXXDFF.js";
 import "./__chunks/DNTOWEIQ.js";

package/package.json

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

package/dist/__chunks/K77KFPIV.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";;;;;AAuCI;AAXW,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ","sourcesContent":["import Box from \"../Box/Box\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor=\"white\"\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}

package/dist/__chunks/STT27BTU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import Box from \"../Box/Box\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor=\"white\"\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AAuCI;AAXW,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;","names":[]}