@cambly/syntax-core 20.2.0 → 20.4.0

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/__chunks/{4Y2AWRAG.cjs → 343JRGSV.cjs}

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _VZTP4FJUcjs = require('./VZTP4FJU.cjs');
+var _34KWYODXcjs = require('./34KWYODX.cjs');
 
 
-var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
+var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
 
 
 
 
-var _HKWOBYWVcjs = require('./HKWOBYWV.cjs');
+var _ZFN2OQ64cjs = require('./ZFN2OQ64.cjs');
 
 
 
@@ -147,12 +147,12 @@ function RichSelectList(props) {
   };
   const getArrowIconColor = () => {
     if (errorText) {
-      return _HKWOBYWVcjs.ColorBaseDestructive700;
+      return _ZFN2OQ64cjs.ColorBaseDestructive700;
     } else {
       if (color === "clear") {
-        return _HKWOBYWVcjs.ColorCambioWhite100;
+        return _ZFN2OQ64cjs.ColorCambioWhite100;
       } else {
-        return _HKWOBYWVcjs.ColorBaseGray700;
+        return _ZFN2OQ64cjs.ColorBaseGray700;
       }
     }
   };
@@ -161,7 +161,7 @@ function RichSelectList(props) {
     {
       values: [
         [_6FA2AYTDcjs.RichSelectBoxContext, { autoFocus: true }],
-        [_3RX4RMGCcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
+        [_OKT24L6Dcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -188,7 +188,7 @@ function RichSelectList(props) {
               })
             ) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _VZTP4FJUcjs.Popover_default,
+              _34KWYODXcjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=4Y2AWRAG.cjs.map
+//# sourceMappingURL=343JRGSV.cjs.map

package/dist/__chunks/{VZTP4FJU.cjs → 34KWYODX.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _Y5R3XLL7cjs = require('./Y5R3XLL7.cjs');
+var _P3YRUAAEcjs = require('./P3YRUAAE.cjs');
 
 
-var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
+var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
 
 
 var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
   } = props;
   const modal = !children || modalProp;
   const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Y5R3XLL7cjs.ModalDialog_default,
+    _P3YRUAAEcjs.ModalDialog_default,
     {
       accessibilityLabel,
       accessibilityCloseLabel,
@@ -117,7 +117,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
     {
       placement: _LLFHCGRAcjs.syntaxToReactAriaPlacement.call(void 0, placement),
       onChangeContentVisibility,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3RX4RMGCcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OKT24L6Dcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
     }
   );
   if (!children)
@@ -141,4 +141,4 @@ var Popover_default = Popover;
 
 
 exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
-//# sourceMappingURL=VZTP4FJU.cjs.map
+//# sourceMappingURL=34KWYODX.cjs.map

package/dist/__chunks/{LE2W6Z2R.js → 6XCSJKN4.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./DJCHJ6JD.js";
+} from "./ZCB3SA3J.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -140,4 +140,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=LE2W6Z2R.js.map
+//# sourceMappingURL=6XCSJKN4.js.map

package/dist/__chunks/{P7OZNQDL.js → C3KCRIBA.js}

@@ -4,7 +4,7 @@ import {
 } from "./VV2NJABK.js";
 import {
   TabInternal
-} from "./URFJDXHO.js";
+} from "./L45IICHC.js";
 import {
   Box_default
 } from "./IB6JZQF3.js";
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 export {
   TabLink_default
 };
-//# sourceMappingURL=P7OZNQDL.js.map
+//# sourceMappingURL=C3KCRIBA.js.map

package/dist/__chunks/{PEWPDQ4Z.cjs → DDWGNNLC.cjs}

@@ -76,7 +76,7 @@ function TabInternal({
       alignItems: "center",
       justifyContent: "start",
       gap: 2,
-      paddingY: 2,
+      padding: 2,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _4TYOP5XMcjs.Typography_default,
@@ -98,4 +98,4 @@ function TabInternal({
 
 
 exports.TabInternal = TabInternal;
-//# sourceMappingURL=PEWPDQ4Z.cjs.map
+//# sourceMappingURL=DDWGNNLC.cjs.map

package/dist/__chunks/{PEWPDQ4Z.cjs.map → DDWGNNLC.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/TabInternal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;AAuCf,cAwDJ,YAxDI;AAlCR,IAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,QACpB,CAAC,sBAAY,0BAA0B,GACrC,OAAO,oBAAoB;AAAA,QAC7B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,oBAAoB,CAAC;AAAA,QAC9B,CAAC,sBAAY,0BAA0B,GACrC,OAAO,qBAAqB;AAAA,QAC9B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,qBAAqB,CAAC;AAAA,MACjC,CAAC;AAAA,MACD,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,UAAS;AAAA,UACT,SAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,oBAAoB,UAAU;AAAA,cAC5C,QAAO;AAAA,cACP,MAAM;AAAA,cAEL,uBAAa,KAAK,YAAY;AAAA;AAAA,UACjC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAG+C;AAC7C,MAAI,UAAU;AACZ,WAAO,OAAO,oBAAoB,YAAY;AAAA,EAChD;AACA,SAAO,OAAO,oBAAoB,YAAY;AAChD;AAEe,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAuBiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,KAAK;AAAA,MACL,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,OAAO,UAAU,EAAE,UAAU,GAAG,CAAC;AAAA,YAEhC;AAAA;AAAA,QACH;AAAA,QACC,aAAa,QAAQ;AAAA,QACrB,aAAa,QACZ,oBAAC,iBAAc,WAAsB,IAAQ,UAAoB;AAAA;AAAA;AAAA,EAErE;AAEJ","sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst ItemCountIcon = ({\n  itemCount,\n  on,\n  selected,\n}: {\n  itemCount: number;\n  on: ComponentProps<typeof TabInternal>[\"on\"];\n  selected: boolean;\n}) => {\n  return (\n    <div\n      className={classnames({\n        [colorStyles.cambioWhiteBackgroundColor]:\n          on === \"darkBackground\" && selected,\n        [colorStyles.cambioWhite70BackgroundColor]:\n          on === \"darkBackground\" && !selected,\n        [colorStyles.cambioBlackBackgroundColor]:\n          on === \"lightBackground\" && selected,\n        [colorStyles.cambioGray700BackgroundColor]:\n          on === \"lightBackground\" && !selected,\n      })}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 999,\n      }}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        rounding=\"full\"\n        padding={1}\n      >\n        <Typography\n          color={on === \"lightBackground\" ? \"white\" : \"primary\"}\n          weight=\"semiBold\"\n          size={100}\n        >\n          {itemCount <= 99 ? itemCount : \"99+\"}\n        </Typography>\n      </Box>\n    </div>\n  );\n};\n\nfunction textColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): ComponentProps<typeof Typography>[\"color\"] {\n  if (selected) {\n    return on === \"lightBackground\" ? \"primary\" : \"white\";\n  }\n  return on === \"lightBackground\" ? \"gray700\" : \"white-secondary\";\n}\n\nexport default function TabInternal({\n  text,\n  selected,\n  endContent,\n  itemCount,\n  on = \"lightBackground\",\n}: {\n  /**\n   * The text to display in the tab.\n   */\n  text: string;\n  /**\n   * Whether the tab is selected.\n   */\n  selected: boolean;\n  /**\n   * Content to display at the end of the tab.\n   */\n  endContent?: ReactNode;\n  /**\n   * Renders an item count badge at the end of the tab.\n   */\n  itemCount?: number;\n  /**\n   * Indicate whether the Tab renders on a light or dark background.\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n}): ReactElement {\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"start\"\n      gap={2}\n      paddingY={2}\n    >\n      <Typography\n        size={0}\n        transform=\"uppercase\"\n        weight=\"semiBold\"\n        color={textColor({ selected, on })}\n      >\n        {text}\n      </Typography>\n      {itemCount == null && endContent}\n      {itemCount != null && (\n        <ItemCountIcon itemCount={itemCount} on={on} selected={selected} />\n      )}\n    </Box>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/Tabs/TabInternal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;AAuCf,cAwDJ,YAxDI;AAlCR,IAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,QACpB,CAAC,sBAAY,0BAA0B,GACrC,OAAO,oBAAoB;AAAA,QAC7B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,oBAAoB,CAAC;AAAA,QAC9B,CAAC,sBAAY,0BAA0B,GACrC,OAAO,qBAAqB;AAAA,QAC9B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,qBAAqB,CAAC;AAAA,MACjC,CAAC;AAAA,MACD,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,UAAS;AAAA,UACT,SAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,oBAAoB,UAAU;AAAA,cAC5C,QAAO;AAAA,cACP,MAAM;AAAA,cAEL,uBAAa,KAAK,YAAY;AAAA;AAAA,UACjC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAG+C;AAC7C,MAAI,UAAU;AACZ,WAAO,OAAO,oBAAoB,YAAY;AAAA,EAChD;AACA,SAAO,OAAO,oBAAoB,YAAY;AAChD;AAEe,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAuBiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS;AAAA,MAET;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,OAAO,UAAU,EAAE,UAAU,GAAG,CAAC;AAAA,YAEhC;AAAA;AAAA,QACH;AAAA,QACC,aAAa,QAAQ;AAAA,QACrB,aAAa,QACZ,oBAAC,iBAAc,WAAsB,IAAQ,UAAoB;AAAA;AAAA;AAAA,EAErE;AAEJ","sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst ItemCountIcon = ({\n  itemCount,\n  on,\n  selected,\n}: {\n  itemCount: number;\n  on: ComponentProps<typeof TabInternal>[\"on\"];\n  selected: boolean;\n}) => {\n  return (\n    <div\n      className={classnames({\n        [colorStyles.cambioWhiteBackgroundColor]:\n          on === \"darkBackground\" && selected,\n        [colorStyles.cambioWhite70BackgroundColor]:\n          on === \"darkBackground\" && !selected,\n        [colorStyles.cambioBlackBackgroundColor]:\n          on === \"lightBackground\" && selected,\n        [colorStyles.cambioGray700BackgroundColor]:\n          on === \"lightBackground\" && !selected,\n      })}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 999,\n      }}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        rounding=\"full\"\n        padding={1}\n      >\n        <Typography\n          color={on === \"lightBackground\" ? \"white\" : \"primary\"}\n          weight=\"semiBold\"\n          size={100}\n        >\n          {itemCount <= 99 ? itemCount : \"99+\"}\n        </Typography>\n      </Box>\n    </div>\n  );\n};\n\nfunction textColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): ComponentProps<typeof Typography>[\"color\"] {\n  if (selected) {\n    return on === \"lightBackground\" ? \"primary\" : \"white\";\n  }\n  return on === \"lightBackground\" ? \"gray700\" : \"white-secondary\";\n}\n\nexport default function TabInternal({\n  text,\n  selected,\n  endContent,\n  itemCount,\n  on = \"lightBackground\",\n}: {\n  /**\n   * The text to display in the tab.\n   */\n  text: string;\n  /**\n   * Whether the tab is selected.\n   */\n  selected: boolean;\n  /**\n   * Content to display at the end of the tab.\n   */\n  endContent?: ReactNode;\n  /**\n   * Renders an item count badge at the end of the tab.\n   */\n  itemCount?: number;\n  /**\n   * Indicate whether the Tab renders on a light or dark background.\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n}): ReactElement {\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"start\"\n      gap={2}\n      padding={2}\n    >\n      <Typography\n        size={0}\n        transform=\"uppercase\"\n        weight=\"semiBold\"\n        color={textColor({ selected, on })}\n      >\n        {text}\n      </Typography>\n      {itemCount == null && endContent}\n      {itemCount != null && (\n        <ItemCountIcon itemCount={itemCount} on={on} selected={selected} />\n      )}\n    </Box>\n  );\n}\n"]}

package/dist/__chunks/{DJSQRPF3.cjs → FXLAQKAB.cjs}

@@ -7,7 +7,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 var _7DGFMDT7cjs = require('./7DGFMDT7.cjs');
 
 
-var _PEWPDQ4Zcjs = require('./PEWPDQ4Z.cjs');
+var _DDWGNNLCcjs = require('./DDWGNNLC.cjs');
 
 
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
@@ -46,7 +46,7 @@ function TabButton({
           "data-testid": dataTestId,
           accessibilityLabel,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _PEWPDQ4Zcjs.TabInternal,
+            _DDWGNNLCcjs.TabInternal,
             {
               text,
               selected,
@@ -64,4 +64,4 @@ function TabButton({
 
 
 exports.TabButton = TabButton;
-//# sourceMappingURL=DJSQRPF3.cjs.map
+//# sourceMappingURL=FXLAQKAB.cjs.map

package/dist/__chunks/{ATUBU46J.js → IKOJX6EH.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalDialog_default
-} from "./QURJJHRN.js";
+} from "./YN2ORRKZ.js";
 import {
   Dialog_default
-} from "./CXENLD6O.js";
+} from "./QVK3VV5M.js";
 import {
   layout_module_default
 } from "./DDUJFFG7.js";
@@ -141,4 +141,4 @@ export {
   AriaPopover,
   Popover_default
 };
-//# sourceMappingURL=ATUBU46J.js.map
+//# sourceMappingURL=IKOJX6EH.js.map

package/dist/__chunks/{WXCTEEON.js → KDTZINAQ.js}

@@ -1,15 +1,15 @@
 "use client"
 import {
   Popover_default
-} from "./ATUBU46J.js";
+} from "./IKOJX6EH.js";
 import {
   DialogContext
-} from "./CXENLD6O.js";
+} from "./QVK3VV5M.js";
 import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./DJCHJ6JD.js";
+} from "./ZCB3SA3J.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=WXCTEEON.js.map
+//# sourceMappingURL=KDTZINAQ.js.map

package/dist/__chunks/{URFJDXHO.js → L45IICHC.js}

@@ -76,7 +76,7 @@ function TabInternal({
       alignItems: "center",
       justifyContent: "start",
       gap: 2,
-      paddingY: 2,
+      padding: 2,
       children: [
         /* @__PURE__ */ jsx(
           Typography_default,
@@ -98,4 +98,4 @@ function TabInternal({
 export {
   TabInternal
 };
-//# sourceMappingURL=URFJDXHO.js.map
+//# sourceMappingURL=L45IICHC.js.map

package/dist/__chunks/{URFJDXHO.js.map → L45IICHC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/TabInternal.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst ItemCountIcon = ({\n  itemCount,\n  on,\n  selected,\n}: {\n  itemCount: number;\n  on: ComponentProps<typeof TabInternal>[\"on\"];\n  selected: boolean;\n}) => {\n  return (\n    <div\n      className={classnames({\n        [colorStyles.cambioWhiteBackgroundColor]:\n          on === \"darkBackground\" && selected,\n        [colorStyles.cambioWhite70BackgroundColor]:\n          on === \"darkBackground\" && !selected,\n        [colorStyles.cambioBlackBackgroundColor]:\n          on === \"lightBackground\" && selected,\n        [colorStyles.cambioGray700BackgroundColor]:\n          on === \"lightBackground\" && !selected,\n      })}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 999,\n      }}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        rounding=\"full\"\n        padding={1}\n      >\n        <Typography\n          color={on === \"lightBackground\" ? \"white\" : \"primary\"}\n          weight=\"semiBold\"\n          size={100}\n        >\n          {itemCount <= 99 ? itemCount : \"99+\"}\n        </Typography>\n      </Box>\n    </div>\n  );\n};\n\nfunction textColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): ComponentProps<typeof Typography>[\"color\"] {\n  if (selected) {\n    return on === \"lightBackground\" ? \"primary\" : \"white\";\n  }\n  return on === \"lightBackground\" ? \"gray700\" : \"white-secondary\";\n}\n\nexport default function TabInternal({\n  text,\n  selected,\n  endContent,\n  itemCount,\n  on = \"lightBackground\",\n}: {\n  /**\n   * The text to display in the tab.\n   */\n  text: string;\n  /**\n   * Whether the tab is selected.\n   */\n  selected: boolean;\n  /**\n   * Content to display at the end of the tab.\n   */\n  endContent?: ReactNode;\n  /**\n   * Renders an item count badge at the end of the tab.\n   */\n  itemCount?: number;\n  /**\n   * Indicate whether the Tab renders on a light or dark background.\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n}): ReactElement {\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"start\"\n      gap={2}\n      paddingY={2}\n    >\n      <Typography\n        size={0}\n        transform=\"uppercase\"\n        weight=\"semiBold\"\n        color={textColor({ selected, on })}\n      >\n        {text}\n      </Typography>\n      {itemCount == null && endContent}\n      {itemCount != null && (\n        <ItemCountIcon itemCount={itemCount} on={on} selected={selected} />\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;AAuCf,cAwDJ,YAxDI;AAlCR,IAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,QACpB,CAAC,sBAAY,0BAA0B,GACrC,OAAO,oBAAoB;AAAA,QAC7B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,oBAAoB,CAAC;AAAA,QAC9B,CAAC,sBAAY,0BAA0B,GACrC,OAAO,qBAAqB;AAAA,QAC9B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,qBAAqB,CAAC;AAAA,MACjC,CAAC;AAAA,MACD,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,UAAS;AAAA,UACT,SAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,oBAAoB,UAAU;AAAA,cAC5C,QAAO;AAAA,cACP,MAAM;AAAA,cAEL,uBAAa,KAAK,YAAY;AAAA;AAAA,UACjC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAG+C;AAC7C,MAAI,UAAU;AACZ,WAAO,OAAO,oBAAoB,YAAY;AAAA,EAChD;AACA,SAAO,OAAO,oBAAoB,YAAY;AAChD;AAEe,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAuBiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,KAAK;AAAA,MACL,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,OAAO,UAAU,EAAE,UAAU,GAAG,CAAC;AAAA,YAEhC;AAAA;AAAA,QACH;AAAA,QACC,aAAa,QAAQ;AAAA,QACrB,aAAa,QACZ,oBAAC,iBAAc,WAAsB,IAAQ,UAAoB;AAAA;AAAA;AAAA,EAErE;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/Tabs/TabInternal.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst ItemCountIcon = ({\n  itemCount,\n  on,\n  selected,\n}: {\n  itemCount: number;\n  on: ComponentProps<typeof TabInternal>[\"on\"];\n  selected: boolean;\n}) => {\n  return (\n    <div\n      className={classnames({\n        [colorStyles.cambioWhiteBackgroundColor]:\n          on === \"darkBackground\" && selected,\n        [colorStyles.cambioWhite70BackgroundColor]:\n          on === \"darkBackground\" && !selected,\n        [colorStyles.cambioBlackBackgroundColor]:\n          on === \"lightBackground\" && selected,\n        [colorStyles.cambioGray700BackgroundColor]:\n          on === \"lightBackground\" && !selected,\n      })}\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 999,\n      }}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        rounding=\"full\"\n        padding={1}\n      >\n        <Typography\n          color={on === \"lightBackground\" ? \"white\" : \"primary\"}\n          weight=\"semiBold\"\n          size={100}\n        >\n          {itemCount <= 99 ? itemCount : \"99+\"}\n        </Typography>\n      </Box>\n    </div>\n  );\n};\n\nfunction textColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): ComponentProps<typeof Typography>[\"color\"] {\n  if (selected) {\n    return on === \"lightBackground\" ? \"primary\" : \"white\";\n  }\n  return on === \"lightBackground\" ? \"gray700\" : \"white-secondary\";\n}\n\nexport default function TabInternal({\n  text,\n  selected,\n  endContent,\n  itemCount,\n  on = \"lightBackground\",\n}: {\n  /**\n   * The text to display in the tab.\n   */\n  text: string;\n  /**\n   * Whether the tab is selected.\n   */\n  selected: boolean;\n  /**\n   * Content to display at the end of the tab.\n   */\n  endContent?: ReactNode;\n  /**\n   * Renders an item count badge at the end of the tab.\n   */\n  itemCount?: number;\n  /**\n   * Indicate whether the Tab renders on a light or dark background.\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n}): ReactElement {\n  return (\n    <Box\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"start\"\n      gap={2}\n      padding={2}\n    >\n      <Typography\n        size={0}\n        transform=\"uppercase\"\n        weight=\"semiBold\"\n        color={textColor({ selected, on })}\n      >\n        {text}\n      </Typography>\n      {itemCount == null && endContent}\n      {itemCount != null && (\n        <ItemCountIcon itemCount={itemCount} on={on} selected={selected} />\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;AAuCf,cAwDJ,YAxDI;AAlCR,IAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,QACpB,CAAC,sBAAY,0BAA0B,GACrC,OAAO,oBAAoB;AAAA,QAC7B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,oBAAoB,CAAC;AAAA,QAC9B,CAAC,sBAAY,0BAA0B,GACrC,OAAO,qBAAqB;AAAA,QAC9B,CAAC,sBAAY,4BAA4B,GACvC,OAAO,qBAAqB,CAAC;AAAA,MACjC,CAAC;AAAA,MACD,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,UAAS;AAAA,UACT,SAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,oBAAoB,UAAU;AAAA,cAC5C,QAAO;AAAA,cACP,MAAM;AAAA,cAEL,uBAAa,KAAK,YAAY;AAAA;AAAA,UACjC;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAG+C;AAC7C,MAAI,UAAU;AACZ,WAAO,OAAO,oBAAoB,YAAY;AAAA,EAChD;AACA,SAAO,OAAO,oBAAoB,YAAY;AAChD;AAEe,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAuBiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS;AAAA,MAET;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAO;AAAA,YACP,OAAO,UAAU,EAAE,UAAU,GAAG,CAAC;AAAA,YAEhC;AAAA;AAAA,QACH;AAAA,QACC,aAAa,QAAQ;AAAA,QACrB,aAAa,QACZ,oBAAC,iBAAc,WAAsB,IAAQ,UAAoB;AAAA;AAAA;AAAA,EAErE;AAEJ;","names":[]}

package/dist/__chunks/{OCNJ63NC.cjs → ODMYZNLL.cjs}

@@ -6,7 +6,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
 
 
 
-var _HKWOBYWVcjs = require('./HKWOBYWV.cjs');
+var _ZFN2OQ64cjs = require('./ZFN2OQ64.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -66,12 +66,12 @@ function SelectList({
   };
   const getArrowIconColor = () => {
     if (errorText) {
-      return _HKWOBYWVcjs.ColorBaseDestructive700;
+      return _ZFN2OQ64cjs.ColorBaseDestructive700;
     } else {
       if (on === "darkBackground") {
-        return _HKWOBYWVcjs.ColorCambioWhite100;
+        return _ZFN2OQ64cjs.ColorCambioWhite100;
       } else {
-        return _HKWOBYWVcjs.ColorBaseGray700;
+        return _ZFN2OQ64cjs.ColorBaseGray700;
       }
     }
   };
@@ -140,4 +140,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=OCNJ63NC.cjs.map
+//# sourceMappingURL=ODMYZNLL.cjs.map

package/dist/__chunks/{3RX4RMGC.cjs → OKT24L6D.cjs}

@@ -25,7 +25,7 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
 
 // css-module:./Dialog.module.css#css-module
-var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
+var Dialog_module_default = { "dialog": "_dialog_1ds6e_1" };
 
 // src/Dialog/Dialog.tsx
 var _reactariacomponents = require('react-aria-components');
@@ -77,4 +77,4 @@ var Dialog_default = Dialog;
 
 
 exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
-//# sourceMappingURL=3RX4RMGC.cjs.map
+//# sourceMappingURL=OKT24L6D.cjs.map

package/dist/__chunks/{3RX4RMGC.cjs.map → OKT24L6D.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles.roundingmd,\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"]}
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles.roundingmd,\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1ds6e_1\"}"]}

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

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
+var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
 
 
 var _VJWLFFADcjs = require('./VJWLFFAD.cjs');
@@ -113,7 +113,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
             "aria-label": accessibilityLabel,
             onChangeContentVisibility,
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _3RX4RMGCcjs.Dialog_default,
+              _OKT24L6Dcjs.Dialog_default,
               {
                 accessibilityLabel,
                 "data-testid": dataTestId,
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
 
 
 exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
-//# sourceMappingURL=Y5R3XLL7.cjs.map
+//# sourceMappingURL=P3YRUAAE.cjs.map

package/dist/__chunks/{CXENLD6O.js → QVK3VV5M.js}

@@ -25,7 +25,7 @@ import React, {
 var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
 
 // css-module:./Dialog.module.css#css-module
-var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
+var Dialog_module_default = { "dialog": "_dialog_1ds6e_1" };
 
 // src/Dialog/Dialog.tsx
 import { Dialog as ReactAriaDialog } from "react-aria-components";
@@ -77,4 +77,4 @@ export {
   DialogContext,
   Dialog_default
 };
-//# sourceMappingURL=CXENLD6O.js.map
+//# sourceMappingURL=QVK3VV5M.js.map

package/dist/__chunks/{CXENLD6O.js.map → QVK3VV5M.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles.roundingmd,\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles.roundingmd,\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1ds6e_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}

package/dist/__chunks/{3XOGCBCJ.cjs → TOAI3Z5M.cjs}

@@ -4,7 +4,7 @@
 var _7DGFMDT7cjs = require('./7DGFMDT7.cjs');
 
 
-var _PEWPDQ4Zcjs = require('./PEWPDQ4Z.cjs');
+var _DDWGNNLCcjs = require('./DDWGNNLC.cjs');
 
 
 var _QODNNCT2cjs = require('./QODNNCT2.cjs');
@@ -51,7 +51,7 @@ var TabLink = _react.forwardRef.call(void 0,
             onClick,
             className: _7DGFMDT7cjs.Tabs_module_default.link,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _PEWPDQ4Zcjs.TabInternal,
+              _DDWGNNLCcjs.TabInternal,
               {
                 text,
                 selected,
@@ -72,4 +72,4 @@ var TabLink_default = TabLink;
 
 
 exports.TabLink_default = TabLink_default;
-//# sourceMappingURL=3XOGCBCJ.cjs.map
+//# sourceMappingURL=TOAI3Z5M.cjs.map

package/dist/__chunks/{QTGFGB6U.js → XMSJWQLW.js}

@@ -7,7 +7,7 @@ import {
 } from "./VV2NJABK.js";
 import {
   TabInternal
-} from "./URFJDXHO.js";
+} from "./L45IICHC.js";
 import {
   Box_default
 } from "./IB6JZQF3.js";
@@ -64,4 +64,4 @@ function TabButton({
 export {
   TabButton
 };
-//# sourceMappingURL=QTGFGB6U.js.map
+//# sourceMappingURL=XMSJWQLW.js.map

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

@@ -1,7 +1,7 @@
 "use client"
 import {
   Dialog_default
-} from "./CXENLD6O.js";
+} from "./QVK3VV5M.js";
 import {
   IconButton_default
 } from "./GDXRRA57.js";
@@ -157,4 +157,4 @@ export {
   AriaModal,
   ModalDialog_default
 };
-//# sourceMappingURL=QURJJHRN.js.map
+//# sourceMappingURL=YN2ORRKZ.js.map

package/dist/__chunks/{DJCHJ6JD.js → ZCB3SA3J.js}

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

package/dist/__chunks/{DJCHJ6JD.js.map → ZCB3SA3J.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 05 Sep 2024 22:15:18 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, 10 Sep 2024 22:27:18 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/{HKWOBYWV.cjs → ZFN2OQ64.cjs}

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

package/dist/__chunks/{HKWOBYWV.cjs.map → ZFN2OQ64.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 Thu, 05 Sep 2024 22:15:18 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, 10 Sep 2024 22:27:18 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"]}