@cambly/syntax-core 10.11.0 → 10.13.0

package/dist/__chunks/{2LJ5BR5J.cjs → RZCA77DH.cjs}

@@ -5,13 +5,19 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
 
 
 
-var _CJJAA2FDcjs = require('./CJJAA2FD.cjs');
+var _H6JCVQBUcjs = require('./H6JCVQBU.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
+
+
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -27,7 +33,7 @@ var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_3ifov_1", "opacityOverlay": "_opacityOverlay_3ifov_7", "outerTextContainer": "_outerTextContainer_3ifov_11", "selectWrapper": "_selectWrapper_3ifov_16", "selectBox": "_selectBox_3ifov_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_3ifov_37", "unselected": "_unselected_3ifov_42", "selected": "_selected_3ifov_46", "arrowIcon": "_arrowIcon_3ifov_50", "sm": "_sm_3ifov_64", "md": "_md_3ifov_70", "lg": "_lg_3ifov_76", "selectError": "_selectError_3ifov_82" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1o5o7_1", "selectContainerCambio": "_selectContainerCambio_1o5o7_7", "opacityOverlay": "_opacityOverlay_1o5o7_11", "labelCambio": "_labelCambio_1o5o7_15", "selectWrapper": "_selectWrapper_1o5o7_26", "selectBox": "_selectBox_1o5o7_31", "selectBoxClassic": "_selectBoxClassic_1o5o7_47", "selectBoxCambio": "_selectBoxCambio_1o5o7_52", "selectMouseFocusStyling": "_selectMouseFocusStyling_1o5o7_60", "unselected": "_unselected_1o5o7_65", "selected": "_selected_1o5o7_69", "arrowIcon": "_arrowIcon_1o5o7_73", "sm": "_sm_1o5o7_87", "md": "_md_1o5o7_93", "lg": "_lg_1o5o7_99", "selectError": "_selectError_1o5o7_105", "selectErrorCambio": "_selectErrorCambio_1o5o7_111" };
 
 // src/SelectList/SelectList.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -53,6 +59,7 @@ function SelectList({
   const reactId = _react.useId.call(void 0, );
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
+  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
   const selectId = id != null ? id : reactId;
   const { isFocusVisible } = _NOELZTQXcjs.useFocusVisible.call(void 0, );
   const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
@@ -60,10 +67,18 @@ function SelectList({
     "div",
     {
       className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled
+        [SelectList_module_default.opacityOverlay]: disabled,
+        [SelectList_module_default.selectContainerCambio]: themeName === "cambio"
       }),
       children: [
-        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label }) }),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "label",
+          {
+            htmlFor: selectId,
+            className: _classnames2.default.call(void 0, themeName === "cambio" && SelectList_module_default.labelCambio),
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WGRHH5TFcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
+          }
+        ),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "select",
@@ -71,15 +86,20 @@ function SelectList({
               id: selectId,
               "data-testid": dataTestId,
               disabled,
-              className: _classnames2.default.call(void 0, SelectList_module_default.selectBox, SelectList_module_default[size], {
-                [SelectList_module_default.unselected]: !selectedValue && !errorText,
-                [SelectList_module_default.selected]: selectedValue && !errorText,
-                [SelectList_module_default.selectError]: errorText,
-                [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-                // for focus keyboard
-                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
-                // for focus mouse
-              }),
+              className: _classnames2.default.call(void 0, 
+                SelectList_module_default.selectBox,
+                themeName === "classic" ? SelectList_module_default.selectBoxClassic : SelectList_module_default.selectBoxCambio,
+                themeName === "classic" && SelectList_module_default[size],
+                {
+                  [SelectList_module_default.unselected]: !selectedValue && !errorText,
+                  [SelectList_module_default.selected]: selectedValue && !errorText,
+                  [themeName === "classic" ? SelectList_module_default.selectError : SelectList_module_default.selectErrorCambio]: errorText,
+                  [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
+                  // for focus keyboard
+                  [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
+                  // for focus mouse
+                }
+              ),
               onChange,
               onClick,
               value: placeholderText && !selectedValue ? placeholderText : selectedValue,
@@ -97,19 +117,19 @@ function SelectList({
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
-              width: iconSize[size],
+              width: themeName === "classic" ? iconSize[size] : 24,
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _CJJAA2FDcjs.ColorBaseDestructive700 : _CJJAA2FDcjs.ColorBaseGray800,
+                  fill: errorText ? _H6JCVQBUcjs.ColorBaseDestructive700 : _H6JCVQBUcjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _X6HZ6DM2cjs.Typography_default,
+        (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _WGRHH5TFcjs.Typography_default,
           {
             size: 100,
             color: errorText ? "destructive-primary" : "gray700",
@@ -125,4 +145,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=2LJ5BR5J.cjs.map
+//# sourceMappingURL=RZCA77DH.cjs.map

package/dist/__chunks/RZCA77DH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const { themeName } = useTheme();\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n        [styles.selectContainerCambio]: themeName === \"cambio\",\n      })}\n    >\n      {label && (\n        <label\n          htmlFor={selectId}\n          className={classNames(themeName === \"cambio\" && styles.labelCambio)}\n        >\n          <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(\n            styles.selectBox,\n            themeName === \"classic\"\n              ? styles.selectBoxClassic\n              : styles.selectBoxCambio,\n            themeName === \"classic\" && styles[size],\n            {\n              [styles.unselected]: !selectedValue && !errorText,\n              [styles.selected]: selectedValue && !errorText,\n              [themeName === \"classic\"\n                ? styles.selectError\n                : styles.selectErrorCambio]: errorText,\n              [focusStyles.accessibilityOutlineFocus]:\n                isFocused && isFocusVisible, // for focus keyboard\n              [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n            },\n          )}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={themeName === \"classic\" ? iconSize[size] : 24}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1o5o7_1\",\"selectContainerCambio\":\"_selectContainerCambio_1o5o7_7\",\"opacityOverlay\":\"_opacityOverlay_1o5o7_11\",\"labelCambio\":\"_labelCambio_1o5o7_15\",\"selectWrapper\":\"_selectWrapper_1o5o7_26\",\"selectBox\":\"_selectBox_1o5o7_31\",\"selectBoxClassic\":\"_selectBoxClassic_1o5o7_47\",\"selectBoxCambio\":\"_selectBoxCambio_1o5o7_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1o5o7_60\",\"unselected\":\"_unselected_1o5o7_65\",\"selected\":\"_selected_1o5o7_69\",\"arrowIcon\":\"_arrowIcon_1o5o7_73\",\"sm\":\"_sm_1o5o7_87\",\"md\":\"_md_1o5o7_93\",\"lg\":\"_lg_1o5o7_99\",\"selectError\":\"_selectError_1o5o7_105\",\"selectErrorCambio\":\"_selectErrorCambio_1o5o7_111\"}"]}

package/dist/__chunks/S5QHTHST.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:../rounding.module.css#css-module
+var rounding_module_default = { "roundingsm": "_roundingsm_1fw7w_2", "roundingmd": "_roundingmd_1fw7w_6", "roundinglg": "_roundinglg_1fw7w_10", "roundingxl": "_roundingxl_1fw7w_14", "roundingfull": "_roundingfull_1fw7w_18", "roundingsmCambio": "_roundingsmCambio_1fw7w_23", "roundingmdCambio": "_roundingmdCambio_1fw7w_27", "roundingfullCambio": "_roundingfullCambio_1fw7w_31" };
+
+
+
+exports.rounding_module_default = rounding_module_default;
+//# sourceMappingURL=S5QHTHST.cjs.map

package/dist/__chunks/S5QHTHST.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"names":[],"mappings":";;;AAAuF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,0BAAyB,oBAAmB,8BAA6B,oBAAmB,8BAA6B,sBAAqB,+BAA8B","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1fw7w_2\",\"roundingmd\":\"_roundingmd_1fw7w_6\",\"roundinglg\":\"_roundinglg_1fw7w_10\",\"roundingxl\":\"_roundingxl_1fw7w_14\",\"roundingfull\":\"_roundingfull_1fw7w_18\",\"roundingsmCambio\":\"_roundingsmCambio_1fw7w_23\",\"roundingmdCambio\":\"_roundingmdCambio_1fw7w_27\",\"roundingfullCambio\":\"_roundingfullCambio_1fw7w_31\"}"]}

package/dist/__chunks/{T6GJCK6W.cjs → SFJT2TM2.cjs}

@@ -22,10 +22,10 @@ var _RKEF7WKZcjs = require('./RKEF7WKZ.cjs');
 var _A4O4F3KKcjs = require('./A4O4F3KK.cjs');
 
 
-var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
 
 
-var _COV3XKSJcjs = require('./COV3XKSJ.cjs');
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
 
 // src/LinkButton/LinkButton.tsx
 var _react = require('react');
@@ -50,7 +50,7 @@ var LinkButton = _react.forwardRef.call(void 0,
     endIcon: EndIcon,
     onClick
   }, ref) => {
-    const { themeName } = _COV3XKSJcjs.useTheme.call(void 0, );
+    const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
     const foregroundColorClass = themeName === "classic" ? _RKEF7WKZcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _RKEF7WKZcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color));
     const backgroundColorClass = themeName === "classic" ? _A4O4F3KKcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _A4O4F3KKcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color));
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -88,7 +88,7 @@ var LinkButton = _react.forwardRef.call(void 0,
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _X6HZ6DM2cjs.Typography_default,
+            _WGRHH5TFcjs.Typography_default,
             {
               size: themeName === "classic" ? _5JUNB754cjs.textVariant_default[size] : _5JUNB754cjs.textVariant_default[size],
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -122,4 +122,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=T6GJCK6W.cjs.map
+//# sourceMappingURL=SFJT2TM2.cjs.map

package/dist/__chunks/SHHN3SRR.js

@@ -0,0 +1,9 @@
+"use client"
+
+// css-module:../rounding.module.css#css-module
+var rounding_module_default = { "roundingsm": "_roundingsm_1fw7w_2", "roundingmd": "_roundingmd_1fw7w_6", "roundinglg": "_roundinglg_1fw7w_10", "roundingxl": "_roundingxl_1fw7w_14", "roundingfull": "_roundingfull_1fw7w_18", "roundingsmCambio": "_roundingsmCambio_1fw7w_23", "roundingmdCambio": "_roundingmdCambio_1fw7w_27", "roundingfullCambio": "_roundingfullCambio_1fw7w_31" };
+
+export {
+  rounding_module_default
+};
+//# sourceMappingURL=SHHN3SRR.js.map

package/dist/__chunks/SHHN3SRR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1fw7w_2\",\"roundingmd\":\"_roundingmd_1fw7w_6\",\"roundinglg\":\"_roundinglg_1fw7w_10\",\"roundingxl\":\"_roundingxl_1fw7w_14\",\"roundingfull\":\"_roundingfull_1fw7w_18\",\"roundingsmCambio\":\"_roundingsmCambio_1fw7w_23\",\"roundingmdCambio\":\"_roundingmdCambio_1fw7w_27\",\"roundingfullCambio\":\"_roundingfullCambio_1fw7w_31\"}"],"mappings":";;;AAAuF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,0BAAyB,oBAAmB,8BAA6B,oBAAmB,8BAA6B,sBAAqB,+BAA8B;","names":[]}

package/dist/__chunks/{OFOTR7RY.js → T5U2CKTE.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   RadioButton_default
-} from "./TXXXNKKO.js";
+} from "./3Y55NZKO.js";
 import {
   RichSelectItem_default
-} from "./3AAZZWKY.js";
+} from "./ODMJANSX.js";
 import {
   __objRest,
   __spreadProps,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
 export {
   RichSelectRadioButton_default
 };
-//# sourceMappingURL=OFOTR7RY.js.map
+//# sourceMappingURL=T5U2CKTE.js.map

package/dist/__chunks/{HNDUANRX.js → TIG3BSZG.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   Chip_default
-} from "./IYVE2HA6.js";
+} from "./2ZUWZKPV.js";
 import {
   RichSelectItem_default
-} from "./3AAZZWKY.js";
+} from "./ODMJANSX.js";
 import {
   __spreadProps,
   __spreadValues
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=HNDUANRX.js.map
+//# sourceMappingURL=TIG3BSZG.js.map

package/dist/__chunks/TN6NRPAZ.js

@@ -0,0 +1,144 @@
+"use client"
+import {
+  Heading_default
+} from "./UEX6TGYL.js";
+import {
+  StopScroll
+} from "./QQT35OLE.js";
+import {
+  Layer
+} from "./N3BJ3EYD.js";
+import {
+  FocusTrap
+} from "./KODEDJGB.js";
+import {
+  Box_default
+} from "./YGKZCJF5.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
+
+// src/Modal/Modal.tsx
+import classnames from "classnames";
+
+// css-module:./Modal.module.css#css-module
+var Modal_module_default = { "backdrop": "_backdrop_tqzb0_1", "backdropClassic": "_backdropClassic_tqzb0_11", "backdropCambio": "_backdropCambio_tqzb0_15", "closeButton": "_closeButton_tqzb0_19", "closeButtonClassic": "_closeButtonClassic_tqzb0_34", "closeButtonCambio": "_closeButtonCambio_tqzb0_41", "closeButtonWithImage": "_closeButtonWithImage_tqzb0_53" };
+
+// src/Modal/Modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function XIcon({ color = "#000" }) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "inherit",
+      d: "M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z"
+    }
+  ) });
+}
+var sizeWidth = {
+  sm: 400,
+  lg: 600
+};
+function Modal({
+  header,
+  children,
+  image,
+  onDismiss,
+  footer,
+  accessibilityCloseLabel = "close modal",
+  size = "sm",
+  zIndex = 1,
+  "data-testid": dataTestId
+}) {
+  const { themeName } = useTheme();
+  return /* @__PURE__ */ jsx(Layer, { zIndex, children: /* @__PURE__ */ jsx(StopScroll, { children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames(
+        Modal_module_default.backdrop,
+        themeName === "classic" ? Modal_module_default.backdropClassic : Modal_module_default.backdropCambio
+      ),
+      role: "presentation",
+      onClick: (e) => e.target === e.currentTarget && onDismiss(),
+      onKeyDown: (e) => e.key === "Escape" && onDismiss(),
+      children: /* @__PURE__ */ jsxs(
+        Box_default,
+        {
+          "data-testid": dataTestId,
+          backgroundColor: "white",
+          rounding: "xl",
+          display: "flex",
+          direction: "column",
+          minWidth: 240,
+          maxWidth: sizeWidth[size],
+          width: "100%",
+          dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
+          children: [
+            /* @__PURE__ */ jsx(Box_default, { position: "relative", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": accessibilityCloseLabel,
+                type: "button",
+                className: classnames(
+                  Modal_module_default.closeButton,
+                  themeName === "classic" ? Modal_module_default.closeButtonClassic : Modal_module_default.closeButtonCambio,
+                  {
+                    [Modal_module_default.closeButtonWithImage]: !!image && themeName === "classic"
+                  }
+                ),
+                onClick: onDismiss,
+                children: /* @__PURE__ */ jsx(
+                  XIcon,
+                  {
+                    color: image && themeName === "classic" ? "#fff" : "#000"
+                  }
+                )
+              }
+            ) }),
+            image && /* @__PURE__ */ jsx(Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ jsxs(
+              Box_default,
+              {
+                display: "flex",
+                gap: 3,
+                direction: "column",
+                padding: themeName === "classic" ? 9 : 3,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Heading_default,
+                    {
+                      as: "h1",
+                      size: themeName === "classic" ? 500 : 400,
+                      fontStyle: themeName === "classic" ? "sans-serif" : "serif",
+                      children: header
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Box_default, { marginBottom: themeName === "classic" ? 4 : 0, children }),
+                  footer && /* @__PURE__ */ jsx(
+                    Box_default,
+                    {
+                      display: "flex",
+                      direction: "column",
+                      gap: 3,
+                      smDirection: "row",
+                      smJustifyContent: "end",
+                      lgDirection: "row",
+                      lgJustifyContent: "end",
+                      children: footer
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) }) }) });
+}
+Modal.displayName = "Modal";
+
+export {
+  Modal
+};
+//# sourceMappingURL=TN6NRPAZ.js.map

package/dist/__chunks/TN6NRPAZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\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 { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n  sm: 400,\n  lg: 600,\n} as const;\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  size = \"sm\",\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 size should be 400w x 200h.\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 size of the card\n   *\n   * * `sm`: 400px\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   */\n  size?: keyof typeof sizeWidth;\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  const { themeName } = useTheme();\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={classnames(\n              styles.backdrop,\n              themeName === \"classic\"\n                ? styles.backdropClassic\n                : styles.backdropCambio,\n            )}\n            role=\"presentation\"\n            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\n              rounding=\"xl\"\n              display=\"flex\"\n              direction=\"column\"\n              minWidth={240}\n              maxWidth={sizeWidth[size]}\n              width=\"100%\"\n              dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n            >\n              <Box position=\"relative\">\n                <button\n                  aria-label={accessibilityCloseLabel}\n                  type=\"button\"\n                  className={classnames(\n                    styles.closeButton,\n                    themeName === \"classic\"\n                      ? styles.closeButtonClassic\n                      : styles.closeButtonCambio,\n                    {\n                      [styles.closeButtonWithImage]:\n                        !!image && themeName === \"classic\",\n                    },\n                  )}\n                  onClick={onDismiss}\n                >\n                  <XIcon\n                    color={image && themeName === \"classic\" ? \"#fff\" : \"#000\"}\n                  />\n                </button>\n              </Box>\n              {image && <Box maxHeight={200}>{image}</Box>}\n              <Box\n                display=\"flex\"\n                gap={3}\n                direction=\"column\"\n                padding={themeName === \"classic\" ? 9 : 3}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={themeName === \"classic\" ? 500 : 400}\n                  fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n                >\n                  {header}\n                </Heading>\n                <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\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                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_tqzb0_1\",\"backdropClassic\":\"_backdropClassic_tqzb0_11\",\"backdropCambio\":\"_backdropCambio_tqzb0_15\",\"closeButton\":\"_closeButton_tqzb0_19\",\"closeButtonClassic\":\"_closeButtonClassic_tqzb0_34\",\"closeButtonCambio\":\"_closeButtonCambio_tqzb0_41\",\"closeButtonWithImage\":\"_closeButtonWithImage_tqzb0_53\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{Z7EXVTCJ.js → UEX6TGYL.js}

@@ -1,26 +1,37 @@
 "use client"
 import {
   Typography_default
-} from "./L7PPCZM5.js";
+} from "./2A52YKFW.js";
 import {
   useTheme
-} from "./RN3PLPAG.js";
+} from "./FY4WHNNR.js";
 
 // src/Heading/Heading.tsx
 import { jsx } from "react/jsx-runtime";
+function cambioWeight({
+  fontStyle,
+  size
+}) {
+  if (fontStyle === "serif" && [400, 500].includes(size)) {
+    return "bold";
+  } else if (fontStyle === "serif") {
+    return "medium";
+  } else {
+    return "regular";
+  }
+}
 var Heading = ({
   align = "start",
   as = "h1",
   children,
   color = "gray900",
   "data-testid": dataTestId,
-  fontStyle,
+  fontStyle = "sans-serif",
   lineClamp,
   size = 500
 }) => {
   const { themeName } = useTheme();
   const classicWeight = [700, 800].includes(size) ? "heavy" : "bold";
-  const cambioWeight = fontStyle === "serif" ? "medium" : "regular";
   return /* @__PURE__ */ jsx(
     Typography_default,
     {
@@ -31,7 +42,7 @@ var Heading = ({
       "data-testid": dataTestId,
       lineClamp,
       size,
-      weight: themeName === "classic" ? classicWeight : cambioWeight,
+      weight: themeName === "classic" ? classicWeight : cambioWeight({ fontStyle, size }),
       children
     }
   );
@@ -41,4 +52,4 @@ var Heading_default = Heading;
 export {
   Heading_default
 };
-//# sourceMappingURL=Z7EXVTCJ.js.map
+//# sourceMappingURL=UEX6TGYL.js.map

package/dist/__chunks/UEX6TGYL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction cambioWeight({\n  fontStyle,\n  size,\n}: {\n  fontStyle: \"serif\" | \"sans-serif\";\n  size: 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n}): \"bold\" | \"medium\" | \"regular\" {\n  if (fontStyle === \"serif\" && [400, 500].includes(size)) {\n    return \"bold\";\n  } else if (fontStyle === \"serif\") {\n    return \"medium\";\n  } else {\n    return \"regular\";\n  }\n}\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  fontStyle = \"sans-serif\",\n  lineClamp,\n  size = 500,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?:\n    | \"gray900\"\n    | \"gray700\"\n    | \"primary\"\n    | \"destructive-primary\"\n    | \"success\"\n    | \"white\"\n    | \"inherit\";\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Style of the font\n   *\n   * Classic only supports `sans-serif`\n   *\n   * @defaultValue \"sans-serif\"\n   */\n  fontStyle?: \"serif\" | \"sans-serif\";\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text.\n   *\n   * Classic:\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * Cambio Mobile:\n   * * `400`: 20px\n   * * `500`: 23px\n   * * `600`: 26px\n   * * `700`: 29px\n   * * `800`: 33px\n   * * `900`: 37px\n   * * `1000`: 41px\n   * * `1100`: 46px\n   *\n   * Cambio Desktop (viewport width > 480px):\n   * * `400`: 25px\n   * * `500`: 31px\n   * * `600`: 39px\n   * * `700`: 49px\n   * * `800`: 61px\n   * * `900`: 76px\n   * * `1000`: 95px\n   * * `1100`: 119px\n   *\n   * @defaultValue 500\n   */\n  size?: 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n}): ReactElement => {\n  const { themeName } = useTheme();\n  const classicWeight = [700, 800].includes(size) ? \"heavy\" : \"bold\";\n\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      fontStyle={fontStyle}\n      data-testid={dataTestId}\n      lineClamp={lineClamp}\n      size={size}\n      weight={\n        themeName === \"classic\"\n          ? classicWeight\n          : cambioWeight({ fontStyle, size })\n      }\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"],"mappings":";;;;;;;;;AAqHI;AAjHJ,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAGkC;AAChC,MAAI,cAAc,WAAW,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,GAAG;AACtD,WAAO;AAAA,EACT,WAAW,cAAc,SAAS;AAChC,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAKA,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AACT,MAgFoB;AAClB,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,gBAAgB,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,IAAI,UAAU;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,QACE,cAAc,YACV,gBACA,aAAa,EAAE,WAAW,KAAK,CAAC;AAAA,MAGrC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/{DKBI6MRY.cjs → UKLQ64N7.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 _VF7PQHZPcjs = require('./VF7PQHZP.cjs');
+var _S5QHTHSTcjs = require('./S5QHTHST.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -96,7 +96,7 @@ var TapArea = _react.forwardRef.call(void 0,
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
     const isHoveredOrFocussed = !disabled && (hovered || focussed);
-    const roundingClasses = rounding !== "none" && _VF7PQHZPcjs.rounding_module_default[`rounding${rounding}`];
+    const roundingClasses = rounding !== "none" && _S5QHTHSTcjs.rounding_module_default[`rounding${rounding}`];
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, accessibilityProps), {
@@ -133,4 +133,4 @@ var TapArea_default = TapArea;
 
 
 exports.TapArea_default = TapArea_default;
-//# sourceMappingURL=DKBI6MRY.cjs.map
+//# sourceMappingURL=UKLQ64N7.cjs.map

package/dist/__chunks/{DUQSTRXU.js → UTSVZIEK.js}

@@ -1,7 +1,10 @@
 "use client"
 import {
   Box_default
-} from "./MAPDSZR4.js";
+} from "./YGKZCJF5.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
 
 // src/AvatarGroup/AvatarGroup.tsx
 import {
@@ -19,7 +22,9 @@ function AvatarGroup({
   orientation = "standard",
   children
 }) {
-  return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size, orientation }, children: /* @__PURE__ */ jsx(
+  const { themeName } = useTheme();
+  const parsedSize = themeName === "cambio" && size === "xl" ? "lg" : size;
+  return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size: parsedSize, orientation }, children: /* @__PURE__ */ jsx(
     Box_default,
     {
       display: "flex",
@@ -39,4 +44,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=DUQSTRXU.js.map
+//# sourceMappingURL=UTSVZIEK.js.map

package/dist/__chunks/UTSVZIEK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  createContext,\n  useContext,\n  type ReactElement,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype Size =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  /* `xl` is deprecated and mapped to `lg` in Cambio */\n  | \"xl\";\ntype Orientation = \"standard\" | \"reverse\";\n\ntype AvatarGroupContextType = {\n  size: Size;\n  orientation: Orientation;\n};\n\nconst AvatarGroupContext = createContext<AvatarGroupContextType | null>(null);\n\nexport function useAvatarGroup(): AvatarGroupContextType | null {\n  const context = useContext(AvatarGroupContext);\n  return !context ? null : context;\n}\n\n/**\n * [AvatarGroup](https://cambly-syntax.vercel.app/?path=/docs/components-avatargroup--docs) is a stack of avatars to represent a group of people\n *\n * Pass in Avatar components as children to the AvatarGroup component. The size prop that is passed into the AvatarGroup component will override Avatar's size prop..\n *\n * Usage:\n *\n * <AvatarGroup size=\"xl\" orientation=\"standard\">\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * </AvatarGroup>\n *\n */\nexport default function AvatarGroup({\n  size = \"md\",\n  orientation = \"standard\",\n  children,\n}: {\n  /**\n   * Size of the avatars in the AvatarGroup.\n   *\n   * Classic:\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)\n   *\n   * @defaultValue `md`\n   */\n  size?: Size;\n  /**\n   * Orientation of the AvatarGroup.\n   * This describes the order of rendering of the Avatar components.\n   * Standard renders the Avatar components with the right component on top.\n   * Reverse renders the Avatar components with the left component on top.\n   *\n   * @defaultValue `standard`\n   */\n  orientation?: Orientation;\n  /**\n   * Avatars to be rendered within the AvatarGroup.\n   */\n  children: ReactNode;\n}): ReactElement {\n  const { themeName } = useTheme();\n  const parsedSize = themeName === \"cambio\" && size === \"xl\" ? \"lg\" : size;\n\n  return (\n    <AvatarGroupContext.Provider value={{ size: parsedSize, orientation }}>\n      <Box\n        display=\"flex\"\n        justifyContent={orientation === \"standard\" ? \"start\" : \"end\"}\n        dangerouslySetInlineStyle={{\n          __style: {\n            flexDirection: orientation === \"standard\" ? \"row\" : \"row-reverse\",\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </AvatarGroupContext.Provider>\n  );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":";;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAgFD;AA/DN,IAAM,qBAAqB,cAA6C,IAAI;AAErE,SAAS,iBAAgD;AAC9D,QAAM,UAAU,WAAW,kBAAkB;AAC7C,SAAO,CAAC,UAAU,OAAO;AAC3B;AAgBe,SAAR,YAA6B;AAAA,EAClC,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GAgCiB;AACf,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,aAAa,cAAc,YAAY,SAAS,OAAO,OAAO;AAEpE,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,YAAY,GAClE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAgB,gBAAgB,aAAa,UAAU;AAAA,MACvD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,eAAe,gBAAgB,aAAa,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/__chunks/{XE3INH2F.cjs → UYZYKU2W.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
 
 // src/Modal/Layer.tsx
 var _reactdom = require('react-dom');
@@ -12,7 +12,7 @@ function Layer({
 }) {
   return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _WJRIAS4Wcjs.Box_default,
+      _27K33DEMcjs.Box_default,
       {
         "data-testid": "syntax-layer",
         position: "fixed",
@@ -29,4 +29,4 @@ function Layer({
 
 
 exports.Layer = Layer;
-//# sourceMappingURL=XE3INH2F.cjs.map
+//# sourceMappingURL=UYZYKU2W.cjs.map

package/dist/__chunks/VDAYXRSA.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _X2LNODY7cjs = require('./X2LNODY7.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.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() {
+  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "hr",
+    {
+      className: themeName === "classic" ? _classnames2.default.call(void 0, Divider_module_default.divider, Divider_module_default.dividerClassic) : _classnames2.default.call(void 0, Divider_module_default.divider, _X2LNODY7cjs.colors_module_default.cambioGray370BackgroundColor)
+    }
+  );
+}
+Divider.displayName = "Divider";
+
+
+
+exports.Divider = Divider;
+//# sourceMappingURL=VDAYXRSA.cjs.map

package/dist/__chunks/VDAYXRSA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;;;;AAA8F,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,kBAAiB,0BAAyB;;;ACErL,OAAO,gBAAgB;AASnB;AAHW,SAAR,UAA+C;AACpD,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WACE,cAAc,YACV,WAAW,uBAAO,SAAS,uBAAO,cAAc,IAChD,WAAW,uBAAO,SAAS,sBAAY,4BAA4B;AAAA;AAAA,EAE3E;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 { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport 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  const { themeName } = useTheme();\n  return (\n    <hr\n      className={\n        themeName === \"classic\"\n          ? classNames(styles.divider, styles.dividerClassic)\n          : classNames(styles.divider, colorStyles.cambioGray370BackgroundColor)\n      }\n    />\n  );\n}\n\nDivider.displayName = \"Divider\";\n"]}