@cambly/syntax-core 20.7.0 → 21.0.0

package/dist/__chunks/6KSVCCCB.cjs

@@ -1,38 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-// css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_6o6o0_1", "horizontal": "_horizontal_6o6o0_5", "vertical": "_vertical_6o6o0_9", "smallGap": "_smallGap_6o6o0_13", "mediumGap": "_mediumGap_6o6o0_17", "largeGap": "_largeGap_6o6o0_21", "orientationhorizontalSmall": "_orientationhorizontalSmall_6o6o0_27", "orientationverticalSmall": "_orientationverticalSmall_6o6o0_31", "orientationhorizontalLarge": "_orientationhorizontalLarge_6o6o0_38", "orientationverticalLarge": "_orientationverticalLarge_6o6o0_42" };
-
-// src/ButtonGroup/ButtonGroup.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _jsxruntime = require('react/jsx-runtime');
-var gap = {
-  sm: ButtonGroup_module_default.smallGap,
-  md: ButtonGroup_module_default.mediumGap,
-  lg: ButtonGroup_module_default.largeGap
-};
-var ButtonGroup = ({
-  orientation = "horizontal",
-  size = "md",
-  children,
-  smOrientation,
-  lgOrientation
-}) => {
-  const classnames = _classnames2.default.call(void 0, 
-    ButtonGroup_module_default.buttonGroup,
-    gap[size],
-    smOrientation != null && ButtonGroup_module_default[`orientation${smOrientation}Small`],
-    lgOrientation != null && ButtonGroup_module_default[`orientation${lgOrientation}Large`],
-    {
-      [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
-      [ButtonGroup_module_default.vertical]: orientation === "vertical"
-    }
-  );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classnames, children });
-};
-var ButtonGroup_default = ButtonGroup;
-
-
-
-exports.ButtonGroup_default = ButtonGroup_default;
-//# sourceMappingURL=6KSVCCCB.cjs.map

package/dist/__chunks/6KSVCCCB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./ButtonGroup.module.css#css-module","../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;AAAsG,IAAO,6BAAQ,EAAC,eAAc,wBAAuB,cAAa,uBAAsB,YAAW,qBAAoB,YAAW,sBAAqB,aAAY,uBAAsB,YAAW,sBAAqB,8BAA6B,wCAAuC,4BAA2B,sCAAqC,8BAA6B,wCAAuC,4BAA2B,qCAAoC;;;ACGtkB,OAAO,gBAAgB;AA8Dd;AA5DT,IAAM,MAAM;AAAA,EACV,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AAAA,EACX,IAAI,2BAAO;AACb;AAKA,IAAM,cAAc,CAAC;AAAA,EACnB,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAiCoB;AAClB,QAAM,aAAa;AAAA,IACjB,2BAAO;AAAA,IACP,IAAI,IAAI;AAAA,IACR,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE,iBAAiB,QAAQ,2BAAO,cAAc,oBAAoB;AAAA,IAClE;AAAA,MACE,CAAC,2BAAO,UAAU,GAAG,gBAAgB;AAAA,MACrC,CAAC,2BAAO,QAAQ,GAAG,gBAAgB;AAAA,IACrC;AAAA,EACF;AAEA,SAAO,oBAAC,SAAI,WAAW,YAAa,UAAS;AAC/C;AAEA,IAAO,sBAAQ","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_6o6o0_1\",\"horizontal\":\"_horizontal_6o6o0_5\",\"vertical\":\"_vertical_6o6o0_9\",\"smallGap\":\"_smallGap_6o6o0_13\",\"mediumGap\":\"_mediumGap_6o6o0_17\",\"largeGap\":\"_largeGap_6o6o0_21\",\"orientationhorizontalSmall\":\"_orientationhorizontalSmall_6o6o0_27\",\"orientationverticalSmall\":\"_orientationverticalSmall_6o6o0_31\",\"orientationhorizontalLarge\":\"_orientationhorizontalLarge_6o6o0_38\",\"orientationverticalLarge\":\"_orientationverticalLarge_6o6o0_42\"}","import { type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { type Size } from \"../constants\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  sm: styles.smallGap,\n  md: styles.mediumGap,\n  lg: styles.largeGap,\n} as const;\n\n/**\n * [ButtonGroup](https://cambly-syntax.vercel.app/?path=/docs/components-buttongroup--docs) groups buttons in a row or column with consistent spacing between each button.\n */\nconst ButtonGroup = ({\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n  smOrientation,\n  lgOrientation,\n}: {\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   *\n   * Responsive props:\n   * `smOrientation`\n   * `lgOrientation`\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group defines the spacing between each button\n   *\n   * * `sm`: 4px\n   * * `md`: 8px\n   * * `lg`: 12px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n  /**\n   * Bottom margin on sm (480px) or larger viewports.\n   */\n  smOrientation?: typeof orientation;\n  /**\n   * Bottom margin on lg (960px) or larger viewports.\n   */\n  lgOrientation?: typeof orientation;\n}): ReactElement => {\n  const classnames = classNames(\n    styles.buttonGroup,\n    gap[size],\n    smOrientation != null && styles[`orientation${smOrientation}Small`],\n    lgOrientation != null && styles[`orientation${lgOrientation}Large`],\n    {\n      [styles.horizontal]: orientation === \"horizontal\",\n      [styles.vertical]: orientation === \"vertical\",\n    },\n  );\n\n  return <div className={classnames}>{children}</div>;\n};\n\nexport default ButtonGroup;\n"]}

package/dist/__chunks/7DGFMDT7.cjs

@@ -1,9 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// css-module:../Tabs/Tabs.module.css#css-module
-var Tabs_module_default = { "tabContainerlightBackground": "_tabContainerlightBackground_b6c60_1", "tabContainerDarkBackground": "_tabContainerDarkBackground_b6c60_5", "tab": "_tab_b6c60_1", "selectedTabOnLightBackground": "_selectedTabOnLightBackground_b6c60_13", "selectedTabOnDarkBackground": "_selectedTabOnDarkBackground_b6c60_17", "unselectedTab": "_unselectedTab_b6c60_21", "link": "_link_b6c60_25" };
-
-
-
-exports.Tabs_module_default = Tabs_module_default;
-//# sourceMappingURL=7DGFMDT7.cjs.map

package/dist/__chunks/7DGFMDT7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:../Tabs/Tabs.module.css#css-module"],"names":[],"mappings":";;;AAAwF,IAAO,sBAAQ,EAAC,+BAA8B,wCAAuC,8BAA6B,uCAAsC,OAAM,gBAAe,gCAA+B,0CAAyC,+BAA8B,yCAAwC,iBAAgB,2BAA0B,QAAO,iBAAgB","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tabs/Tabs.module.css\"; export default {\"tabContainerlightBackground\":\"_tabContainerlightBackground_b6c60_1\",\"tabContainerDarkBackground\":\"_tabContainerDarkBackground_b6c60_5\",\"tab\":\"_tab_b6c60_1\",\"selectedTabOnLightBackground\":\"_selectedTabOnLightBackground_b6c60_13\",\"selectedTabOnDarkBackground\":\"_selectedTabOnDarkBackground_b6c60_17\",\"unselectedTab\":\"_unselectedTab_b6c60_21\",\"link\":\"_link_b6c60_25\"}"]}

package/dist/__chunks/7KH536I2.cjs

@@ -1,32 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-// src/Modal/Layer.tsx
-var _reactdom = require('react-dom');
-var _jsxruntime = require('react/jsx-runtime');
-function Layer({
-  children,
-  zIndex = 1
-}) {
-  return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _QODNNCT2cjs.Box_default,
-      {
-        "data-testid": "syntax-layer",
-        position: "fixed",
-        dangerouslySetInlineStyle: {
-          __style: { zIndex, inset: 0 }
-        },
-        children
-      }
-    ),
-    document.body
-  ) : null;
-}
-
-
-
-exports.Layer = Layer;
-//# sourceMappingURL=7KH536I2.cjs.map

package/dist/__chunks/7KH536I2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Modal/Layer.tsx"],"names":[],"mappings":";;;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN","sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n  children,\n  zIndex = 1,\n}: {\n  children: ReactElement;\n  zIndex?: number;\n}): ReactPortal | null {\n  return typeof document !== \"undefined\"\n    ? createPortal(\n        <Box\n          data-testid=\"syntax-layer\"\n          position=\"fixed\"\n          dangerouslySetInlineStyle={{\n            __style: { zIndex, inset: 0 },\n          }}\n        >\n          {children}\n        </Box>,\n        document.body,\n      )\n    : null;\n}\n"]}

package/dist/__chunks/7VI7DO7P.cjs

@@ -1,13 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-// ../syntax-design-tokens/dist/js/index.js
-var ColorBaseDestructive700 = "#d32a4b";
-var ColorBaseGray700 = "#767676";
-var ColorCambioWhite100 = "#ffffff";
-
-
-
-
-
-exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
-//# sourceMappingURL=7VI7DO7P.cjs.map

package/dist/__chunks/7VI7DO7P.cjs.map

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

package/dist/__chunks/A3B4YKGN.cjs

@@ -1,28 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
-
-
-var _2XIVACBMcjs = require('./2XIVACBM.cjs');
-
-// css-module:./Divider.module.css#css-module
-var Divider_module_default = { "divider": "_divider_1uaon_1", "dividerClassic": "_dividerClassic_1uaon_9" };
-
-// src/Divider/Divider.tsx
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-var _jsxruntime = require('react/jsx-runtime');
-function Divider() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "hr",
-    {
-      className: _classnames2.default.call(void 0, 
-        Divider_module_default.divider,
-        _2XIVACBMcjs.colors_module_default.cambioGray370BackgroundColor
-      )
-    }
-  );
-}
-Divider.displayName = "Divider";
-
-
-
-exports.Divider = Divider;
-//# sourceMappingURL=A3B4YKGN.cjs.map

package/dist/__chunks/A3B4YKGN.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;AAA8F,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,kBAAiB,0BAAyB;;;ACCrL,OAAO,gBAAgB;AAQnB;AAFW,SAAR,UAA+C;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,uBAAO;AAAA,QACP,sBAAY;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1uaon_1\",\"dividerClassic\":\"_dividerClassic_1uaon_9\"}","import styles from \"./Divider.module.css\";\nimport classNames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  return (\n    <hr\n      className={classNames(\n        styles.divider,\n        colorStyles.cambioGray370BackgroundColor,\n      )}\n    />\n  );\n}\n\nDivider.displayName = \"Divider\";\n"]}

package/dist/__chunks/AFOQ6JVB.cjs

@@ -1,211 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _6KSVCCCBcjs = require('./6KSVCCCB.cjs');
-
-
-var _BVNFNAUOcjs = require('./BVNFNAUO.cjs');
-
-
-var _A3B4YKGNcjs = require('./A3B4YKGN.cjs');
-
-
-var _VDLYCYDQcjs = require('./VDLYCYDQ.cjs');
-
-
-var _WKADTHRKcjs = require('./WKADTHRK.cjs');
-
-
-var _J2QDHB6Icjs = require('./J2QDHB6I.cjs');
-
-
-
-var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-// src/RichSelect/RichSelectBox.tsx
-
-
-
-
-
-
-
-var _react = require('react');
-var _reactariacomponents = require('react-aria-components');
-var _utils = require('@react-stately/utils');
-var _jsxruntime = require('react/jsx-runtime');
-function isString(val) {
-  return typeof val === "string";
-}
-function isEqualSelection(set1, set2) {
-  if (set1 === set2)
-    return true;
-  if (!set1 && !set2)
-    return true;
-  if (!set1 || !set2)
-    return false;
-  if (isString(set1))
-    return set1 === set2;
-  if (isString(set2))
-    return false;
-  if (set1.size !== set2.size)
-    return false;
-  for (const item of set1) {
-    if (!set2.has(item))
-      return false;
-  }
-  return true;
-}
-function convertSelection(selection, defaultValue) {
-  if (!selection)
-    return defaultValue;
-  if (selection === "all")
-    return "all";
-  return new Set(selection);
-}
-var RichSelectBoxContext = _react.createContext.call(void 0, {});
-var RichSelectBox = _react.forwardRef.call(void 0, 
-  function RichSelectBox2(props, ref) {
-    const {
-      accessibilityLabel,
-      autosave,
-      children,
-      "data-testid": dataTestId,
-      multiple = false,
-      onChange,
-      primaryButtonText,
-      primaryButtonAccessibilityLabel,
-      secondaryButtonText,
-      secondaryButtonAccessibilityLabel,
-      selectedValues: selectedValuesProp,
-      defaultSelectedValues: defaultSelectedValuesProp
-    } = props;
-    const selectedKeysProp = _react.useMemo.call(void 0, 
-      () => convertSelection(selectedValuesProp),
-      [selectedValuesProp]
-    );
-    const defaultSelectedKeys = _react.useMemo.call(void 0, 
-      () => convertSelection(defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
-      [defaultSelectedValuesProp]
-    );
-    const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
-      selectedKeysProp,
-      // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined
-      defaultSelectedKeys,
-      (value) => {
-        if (isEqualSelection(value, selectedKeys))
-          return;
-        if (value === "all")
-          return onChange("all");
-        onChange([...value].map(String));
-      }
-    );
-    const [stagedKeys, setStagedKeys] = _react.useState.call(void 0, 
-      selectedKeys
-    );
-    const saveChanges = () => setSelectedKeys(stagedKeys);
-    const clearChanges = () => setStagedKeys(/* @__PURE__ */ new Set());
-    const stageChanges = (selectedValues) => {
-      setStagedKeys(selectedValues);
-      if (autosave)
-        setSelectedKeys(selectedValues);
-    };
-    const [disabledKeysComposed, setDisabledKeysComposed] = _react.useState.call(void 0, 
-      /* @__PURE__ */ new Set()
-    );
-    const disableKey = _react.useCallback.call(void 0, (key, _disabled) => {
-      setDisabledKeysComposed((keys) => {
-        if (keys.has(key) === _disabled)
-          return keys;
-        _disabled ? keys.add(key) : keys.delete(key);
-        return new Set(keys);
-      });
-    }, []);
-    const { autoFocus } = _react.useContext.call(void 0, RichSelectBoxContext);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItemContext.Provider, { value: { disableKey }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _reactariacomponents.ListBox,
-        {
-          ref,
-          "aria-label": accessibilityLabel,
-          autoFocus,
-          selectionMode: multiple ? "multiple" : "single",
-          selectionBehavior: multiple ? "toggle" : "replace",
-          shouldFocusWrap: true,
-          orientation: "horizontal",
-          selectedKeys: stagedKeys,
-          onSelectionChange: stageChanges,
-          disabledKeys: disabledKeysComposed,
-          className: _RYUXG4AScjs.RichSelect_module_default.richSelectBox,
-          children
-        }
-      ),
-      !autosave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _QODNNCT2cjs.Box_default,
-        {
-          backgroundColor: "white",
-          display: "flex",
-          direction: "column",
-          gap: 5,
-          marginTop: 5,
-          justifyContent: "end",
-          position: "sticky",
-          dangerouslySetInlineStyle: {
-            __style: {
-              bottom: 0
-            }
-          },
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { flex: "grow", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _A3B4YKGNcjs.Divider, {}) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _QODNNCT2cjs.Box_default,
-              {
-                paddingY: 5,
-                marginTop: -5,
-                display: "flex",
-                justifyContent: "end",
-                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _6KSVCCCBcjs.ButtonGroup_default, { orientation: "horizontal", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _BVNFNAUOcjs.Button_default,
-                    {
-                      onClick: clearChanges,
-                      color: "secondary",
-                      text: secondaryButtonText,
-                      accessibilityLabel: secondaryButtonAccessibilityLabel,
-                      "data-testid": [dataTestId, "secondary-button"].filter(Boolean).join("-")
-                    }
-                  ),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _BVNFNAUOcjs.Button_default,
-                    {
-                      onClick: saveChanges,
-                      text: primaryButtonText,
-                      accessibilityLabel: primaryButtonAccessibilityLabel,
-                      color: "primary",
-                      "data-testid": [dataTestId, "primary-button"].filter(Boolean).join("-")
-                    }
-                  )
-                ] })
-              }
-            )
-          ]
-        }
-      )
-    ] }) });
-  }
-);
-var RichSelectBox_default = Object.assign(RichSelectBox, {
-  Section: _VDLYCYDQcjs.RichSelectSection_default,
-  Chip: _J2QDHB6Icjs.RichSelectChip_default,
-  RadioButton: _WKADTHRKcjs.RichSelectRadioButton_default
-});
-
-
-
-
-
-exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=AFOQ6JVB.cjs.map

package/dist/__chunks/AFOQ6JVB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectBox.tsx"],"names":["RichSelectBox"],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  useContext,\n  useState,\n  useCallback,\n  createContext,\n  useMemo,\n} from \"react\";\nimport { ListBox as ReactAriaListBox } from \"react-aria-components\";\nimport { type Key } from \"react-aria\";\nimport { type Selection } from \"react-stately\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { RichSelectItemContext } from \"./RichSelectItem\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport Button from \"../Button/Button\";\nimport styles from \"./RichSelect.module.css\";\nimport Box from \"../Box/Box\";\nimport Divider from \"../Divider/Divider\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\n\ntype RichSelectChild =\n  | ReactElement<typeof RichSelectChip>\n  | ReactElement<typeof RichSelectRadioButton>\n  | ReactElement<typeof RichSelectSection>;\n\nfunction isString(val: unknown): val is string {\n  return typeof val === \"string\";\n}\n\nfunction isEqualSelection(set1?: Selection, set2?: Selection): boolean {\n  if (set1 === set2) return true;\n  if (!set1 && !set2) return true;\n  if (!set1 || !set2) return false;\n  if (isString(set1)) return set1 === set2;\n  if (isString(set2)) return false;\n  if (set1.size !== set2.size) return false;\n  for (const item of set1) {\n    if (!set2.has(item)) return false;\n  }\n  return true;\n}\n\nexport function convertSelection(\n  selection: \"all\" | Iterable<Key> | undefined,\n  defaultValue?: \"all\" | Set<Key>,\n): \"all\" | Set<Key> | undefined {\n  if (!selection) return defaultValue;\n  if (selection === \"all\") return \"all\";\n  return new Set(selection);\n}\n\nexport type RichSelectBoxProps = {\n  /** aria-label for the list box */\n  accessibilityLabel: string;\n  /** Automatically saves changes when true, shows save/clear buttons when not true */\n  autosave?: boolean;\n  /** Test id for the list box element */\n  \"data-testid\"?: string;\n  /** One or more RichSelectList.<Chip|RadioButton|Section|...> components. */\n  children: RichSelectChild | RichSelectChild[];\n  /** Default selected values */\n  defaultSelectedValues?: Set<Key> | string[] | \"all\";\n  /** Enables multiple selection (multiselect) */\n  multiple?: boolean;\n  /** The callback to be called when options are selected / committed */\n  onChange: (selectedValues: string[] | \"all\") => void;\n  /** Text for primary button (Save). Required: string must be translated */\n  primaryButtonText: string;\n  /** accessibilityLabel for primary Button component (Save). Required: string must be translated */\n  primaryButtonAccessibilityLabel: string;\n  /** Text for primary button (Clear). Required: string must be translated */\n  secondaryButtonText: string;\n  /** accessibilityLabel for secondary Button component (Clear). Required: string must be translated */\n  secondaryButtonAccessibilityLabel: string;\n  /** Value of the currently selected options */\n  selectedValues?: Set<Key> | string[] | \"all\";\n};\n\ntype RichSelectBoxContextType = {\n  /** Automatically focuses RichSelectBox on mount when enabled */\n  autoFocus?: boolean;\n};\nexport const RichSelectBoxContext = createContext<RichSelectBoxContextType>({});\n\n/**\n * [RichSelectBox](https://cambly-syntax.vercel.app/?path=/docs/components-richselectbox--docs) is an element that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectBox\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectBox.Section label=\"Cities\">\n      <RichSelectBox.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectBox.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectBox.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectBox.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectBox.Section>\n  </RichSelectBox>\n ```\n */\nconst RichSelectBox = forwardRef<HTMLDivElement, RichSelectBoxProps>(\n  function RichSelectBox(props, ref): ReactElement {\n    const {\n      accessibilityLabel,\n      autosave,\n      children,\n      \"data-testid\": dataTestId,\n      multiple = false,\n      onChange,\n      primaryButtonText,\n      primaryButtonAccessibilityLabel,\n      secondaryButtonText,\n      secondaryButtonAccessibilityLabel,\n      selectedValues: selectedValuesProp,\n      defaultSelectedValues: defaultSelectedValuesProp,\n    } = props;\n\n    const selectedKeysProp = useMemo(\n      () => convertSelection(selectedValuesProp),\n      [selectedValuesProp],\n    );\n    const defaultSelectedKeys = useMemo(\n      () => convertSelection(defaultSelectedValuesProp, new Set()),\n      [defaultSelectedValuesProp],\n    );\n    const [selectedKeys, setSelectedKeys] = useControlledState(\n      selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n      defaultSelectedKeys,\n      (value) => {\n        if (isEqualSelection(value, selectedKeys)) return;\n        // Notify parent about the changes\n        if (value === \"all\") return onChange(\"all\");\n        onChange([...value].map(String));\n      },\n    );\n    const [stagedKeys, setStagedKeys] = useState<Set<Key> | \"all\">(\n      selectedKeys,\n    );\n\n    const saveChanges = () => setSelectedKeys(stagedKeys);\n    const clearChanges = () => setStagedKeys(new Set());\n    const stageChanges = (selectedValues: Selection) => {\n      setStagedKeys(selectedValues);\n      if (autosave) setSelectedKeys(selectedValues);\n    };\n\n    // inject method into context so children can disable themselves\n    // by adding `disabled` attribute (through RichSelectItem)\n    const [disabledKeysComposed, setDisabledKeysComposed] = useState<Set<Key>>(\n      new Set(),\n    );\n    const disableKey = useCallback((key: Key, _disabled: boolean) => {\n      setDisabledKeysComposed((keys) => {\n        if (keys.has(key) === _disabled) return keys;\n        _disabled ? keys.add(key) : keys.delete(key);\n        return new Set(keys);\n      });\n    }, []);\n\n    // higher level context for autoFocus behavior (parent sets when rendering RichSelectBox in overlay)\n    const { autoFocus } = useContext(RichSelectBoxContext);\n\n    return (\n      <RichSelectItemContext.Provider value={{ disableKey }}>\n        <Box>\n          <ReactAriaListBox\n            ref={ref}\n            aria-label={accessibilityLabel}\n            autoFocus={autoFocus}\n            selectionMode={multiple ? \"multiple\" : \"single\"}\n            selectionBehavior={multiple ? \"toggle\" : \"replace\"}\n            shouldFocusWrap={true}\n            orientation=\"horizontal\"\n            selectedKeys={stagedKeys}\n            onSelectionChange={stageChanges}\n            disabledKeys={disabledKeysComposed}\n            className={styles.richSelectBox}\n          >\n            {children}\n          </ReactAriaListBox>\n          {!autosave && (\n            <Box\n              backgroundColor=\"white\"\n              display=\"flex\"\n              direction=\"column\"\n              gap={5}\n              marginTop={5}\n              justifyContent=\"end\"\n              position=\"sticky\"\n              dangerouslySetInlineStyle={{\n                __style: {\n                  bottom: 0,\n                },\n              }}\n            >\n              <Box flex=\"grow\">\n                <Divider />\n              </Box>\n              <Box\n                paddingY={5}\n                marginTop={-5}\n                display=\"flex\"\n                justifyContent=\"end\"\n              >\n                <ButtonGroup orientation=\"horizontal\">\n                  <Button\n                    onClick={clearChanges}\n                    color={\"secondary\"}\n                    text={secondaryButtonText}\n                    accessibilityLabel={secondaryButtonAccessibilityLabel}\n                    data-testid={[dataTestId, \"secondary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                  <Button\n                    onClick={saveChanges}\n                    text={primaryButtonText}\n                    accessibilityLabel={primaryButtonAccessibilityLabel}\n                    color=\"primary\"\n                    data-testid={[dataTestId, \"primary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                </ButtonGroup>\n              </Box>\n            </Box>\n          )}\n        </Box>\n      </RichSelectItemContext.Provider>\n    );\n  },\n);\n\nexport default Object.assign(RichSelectBox, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n"]}

package/dist/__chunks/AHM6QK6U.cjs

@@ -1,133 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _O7M2NMNZcjs = require('./O7M2NMNZ.cjs');
-
-
-var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
-
-
-var _7KH536I2cjs = require('./7KH536I2.cjs');
-
-
-var _THM3NAFOcjs = require('./THM3NAFO.cjs');
-
-
-var _KFNK5PLGcjs = require('./KFNK5PLG.cjs');
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-// css-module:./Modal.module.css#css-module
-var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
-
-// src/Modal/Modal.tsx
-var _jsxruntime = require('react/jsx-runtime');
-function XIcon({ className }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "svg",
-    {
-      className,
-      fill: "currentColor",
-      focusable: "false",
-      "aria-hidden": "true",
-      viewBox: "0 0 24 24",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
-    }
-  );
-}
-function Modal({
-  header,
-  children,
-  image,
-  onDismiss,
-  footer,
-  accessibilityCloseLabel = "close modal",
-  zIndex = 1,
-  "data-testid": dataTestId
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _7KH536I2cjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      className: Modal_module_default.backdrop,
-      role: "presentation",
-      onMouseDown: (e) => e.target === e.currentTarget && onDismiss(),
-      onKeyDown: (e) => e.key === "Escape" && onDismiss(),
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _QODNNCT2cjs.Box_default,
-        {
-          "data-testid": dataTestId,
-          backgroundColor: "gray100",
-          rounding: "md",
-          display: "flex",
-          marginStart: 4,
-          marginEnd: 4,
-          marginTop: 8,
-          marginBottom: 8,
-          minWidth: 240,
-          maxHeight: "calc(100vh - 64px)",
-          maxWidth: 600,
-          overflow: "hidden",
-          position: "relative",
-          width: "100%",
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _QODNNCT2cjs.Box_default,
-              {
-                position: "absolute",
-                dangerouslySetInlineStyle: {
-                  __style: { top: 4, right: 4 }
-                },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _KFNK5PLGcjs.IconButton_default,
-                  {
-                    accessibilityLabel: accessibilityCloseLabel,
-                    color: image ? "primary" : "tertiary",
-                    on: image ? "darkBackground" : "lightBackground",
-                    onClick: onDismiss,
-                    size: "md",
-                    icon: XIcon
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _QODNNCT2cjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
-              image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { children: image }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QODNNCT2cjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _O7M2NMNZcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _QODNNCT2cjs.Box_default,
-                {
-                  height: "100%",
-                  overflowY: "auto",
-                  paddingX: 6,
-                  marginBottom: footer ? 0 : 6,
-                  children
-                }
-              ),
-              footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _QODNNCT2cjs.Box_default,
-                {
-                  display: "flex",
-                  direction: "column",
-                  gap: 3,
-                  smDirection: "row",
-                  smJustifyContent: "end",
-                  lgDirection: "row",
-                  lgJustifyContent: "end",
-                  padding: 6,
-                  children: footer
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  ) }) }) });
-}
-Modal.displayName = "Modal";
-
-
-
-exports.Modal = Modal;
-//# sourceMappingURL=AHM6QK6U.cjs.map

package/dist/__chunks/AHM6QK6U.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC9D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onMouseDown={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"gray100\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={600}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"md\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={6}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"]}

package/dist/__chunks/AVJQ2E2G.cjs

@@ -1,37 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _QODNNCT2cjs = require('./QODNNCT2.cjs');
-
-
-var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
-
-// src/Card/Card.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var Card = _react.forwardRef.call(void 0, function Card2(props, ref) {
-  const _a = props, { children } = _a, cardProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["children"]);
-  const {
-    backgroundColor = "white",
-    size = "roomy",
-    "data-testid": dataTestId
-  } = cardProps;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _QODNNCT2cjs.Box_default,
-    {
-      rounding: "md",
-      padding: size === "compact" ? 2 : 4,
-      width: "100%",
-      backgroundColor,
-      "data-testid": dataTestId,
-      ref,
-      children
-    }
-  );
-});
-var Card_default = Card;
-
-
-
-exports.Card_default = Card_default;
-//# sourceMappingURL=AVJQ2E2G.cjs.map

package/dist/__chunks/AVJQ2E2G.cjs.map

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

package/dist/__chunks/B3JRSVBD.cjs

@@ -1,35 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
-
-
-var _2XIVACBMcjs = require('./2XIVACBM.cjs');
-
-// src/colors/textColors.ts
-function textColor(color) {
-  switch (color) {
-    case "gray700":
-      return _2XIVACBMcjs.colors_module_default.cambioGray700Color;
-    case "white":
-      return _2XIVACBMcjs.colors_module_default.cambioWhiteColor;
-    case "white-secondary":
-      return _2XIVACBMcjs.colors_module_default.cambioWhite70Color;
-    case "inherit":
-      return _2XIVACBMcjs.colors_module_default.inheritColor;
-    case "destructive-primary":
-      return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
-    case "destructive-lightBackground":
-      return _2XIVACBMcjs.colors_module_default.cambioDestructive900Color;
-    case "destructive-darkBackground":
-      return _2XIVACBMcjs.colors_module_default.cambioDestructive300Color;
-    case "success":
-      return _2XIVACBMcjs.colors_module_default.cambioSuccess700Color;
-    case "success-darkBackground":
-      return _2XIVACBMcjs.colors_module_default.cambioSuccess100Color;
-    default:
-      return _2XIVACBMcjs.colors_module_default.cambioBlackColor;
-  }
-}
-
-
-
-exports.textColor = textColor;
-//# sourceMappingURL=B3JRSVBD.cjs.map

package/dist/__chunks/B3JRSVBD.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/colors/textColors.ts"],"names":[],"mappings":";;;;;;AAEe,SAAR,UACL,OAYQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IAErB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF","sourcesContent":["import colorStyles from \"../colors/colors.module.css\";\n\nexport default function textColor(\n  color:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"destructive-lightBackground\"\n    | \"destructive-darkBackground\"\n    | \"success\"\n    | \"success-darkBackground\"\n    | \"white\"\n    | \"white-secondary\"\n    | \"inherit\",\n): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.cambioGray700Color;\n    case \"white\":\n      return colorStyles.cambioWhiteColor;\n    case \"white-secondary\":\n      return colorStyles.cambioWhite70Color;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"destructive-primary\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-lightBackground\":\n      return colorStyles.cambioDestructive900Color;\n    case \"destructive-darkBackground\":\n      return colorStyles.cambioDestructive300Color;\n    case \"success\":\n      return colorStyles.cambioSuccess700Color;\n    case \"success-darkBackground\":\n      return colorStyles.cambioSuccess100Color;\n    // primary / gray900\n    default:\n      return colorStyles.cambioBlackColor;\n  }\n}\n"]}