@cambly/syntax-core 10.8.1 → 10.10.0

package/dist/__chunks/{S6D6YJNT.cjs → D7NNCQKN.cjs}

@@ -1,44 +1,45 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
 
-var _KX4HD3Q3cjs = require('./KX4HD3Q3.cjs');
 
+var _6SALMOFUcjs = require('./6SALMOFU.cjs');
 
-var _ZQFEITZHcjs = require('./ZQFEITZH.cjs');
 
+var _WEIWUACWcjs = require('./WEIWUACW.cjs');
 
-var _I37F5HVMcjs = require('./I37F5HVM.cjs');
 
+var _NYOKOJQBcjs = require('./NYOKOJQB.cjs');
 
-var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
 
+var _ULMCQ7EAcjs = require('./ULMCQ7EA.cjs');
 
-var _M3L2KJQYcjs = require('./M3L2KJQY.cjs');
 
+var _DKBI6MRYcjs = require('./DKBI6MRY.cjs');
 
 
-var _U6LLWKEDcjs = require('./U6LLWKED.cjs');
 
+var _AGHYI7QRcjs = require('./AGHYI7QR.cjs');
 
-var _GQC7B3U6cjs = require('./GQC7B3U6.cjs');
 
+var _IYA2TMMRcjs = require('./IYA2TMMR.cjs');
 
-var _63LUPH3Xcjs = require('./63LUPH3X.cjs');
 
+var _YT3NEG6Zcjs = require('./YT3NEG6Z.cjs');
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
-var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
 
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 
 
-var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 
 // src/RichSelect/RichSelectList.tsx
 
@@ -81,7 +82,7 @@ function RichSelectList(props) {
     selectedValues: selectedValuesProp,
     defaultSelectedValues: defaultSelectedValuesProp,
     size = "md"
-  } = _a, richSelectBoxProps = _I64JGYX7cjs.__objRest.call(void 0, _a, [
+  } = _a, richSelectBoxProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, [
     "autosave",
     "children",
     "data-testid",
@@ -97,15 +98,15 @@ function RichSelectList(props) {
     "defaultSelectedValues",
     "size"
   ]);
-  const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+  const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _KX4HD3Q3cjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _6SALMOFUcjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _KX4HD3Q3cjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _6SALMOFUcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -143,8 +144,8 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_KX4HD3Q3cjs.RichSelectBoxContext, { autoFocus: true }],
-        [_VA23P3ZIcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
+        [_6SALMOFUcjs.RichSelectBoxContext, { autoFocus: true }],
+        [_ULMCQ7EAcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -156,7 +157,7 @@ function RichSelectList(props) {
           children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _reactariacomponents.Label,
-              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+              _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 "data-testid": [dataTestId, "label"].filter(Boolean).join("-"),
                 className: _classnames2.default.call(void 0, 
                   SelectList_module_default.selectContainer,
@@ -170,11 +171,11 @@ function RichSelectList(props) {
                   (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
                   _interactions.setInteractionModality.call(void 0, "keyboard");
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JBNXAIXYcjs.Typography_default, { size: 100, color: "gray700", children: label })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label })
               })
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _I37F5HVMcjs.Popover_default,
+              _NYOKOJQBcjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -182,13 +183,13 @@ function RichSelectList(props) {
                 content: (
                   // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _SZCVEBN2cjs.Box_default,
+                    _WJRIAS4Wcjs.Box_default,
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _KX4HD3Q3cjs.RichSelectBox_default,
-                        _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                        _6SALMOFUcjs.RichSelectBox_default,
+                        _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
                           defaultSelectedValues: defaultSelectedKeys,
@@ -202,8 +203,8 @@ function RichSelectList(props) {
                   )
                 ),
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _M3L2KJQYcjs.TapArea_default,
-                  _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                  _DKBI6MRYcjs.TapArea_default,
+                  _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                     "data-testid": dataTestId,
                     disabled,
                     onClick,
@@ -232,7 +233,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _U6LLWKEDcjs.ColorBaseDestructive700 : _U6LLWKEDcjs.ColorBaseGray800,
+                              fill: errorText ? _AGHYI7QRcjs.ColorBaseDestructive700 : _AGHYI7QRcjs.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"
                             }
                           )
@@ -244,8 +245,8 @@ function RichSelectList(props) {
               }
             ),
             (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _JBNXAIXYcjs.Typography_default,
-              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+              _X6HZ6DM2cjs.Typography_default,
+              _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 size: 100,
                 color: errorText ? "destructive-primary" : "gray700"
               }, errorText ? errorMessageProps : descriptionProps), {
@@ -259,12 +260,12 @@ function RichSelectList(props) {
   );
 }
 var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _GQC7B3U6cjs.RichSelectSection_default,
-  Chip: _ZQFEITZHcjs.RichSelectChip_default,
-  RadioButton: _63LUPH3Xcjs.RichSelectRadioButton_default
+  Section: _IYA2TMMRcjs.RichSelectSection_default,
+  Chip: _WEIWUACWcjs.RichSelectChip_default,
+  RadioButton: _YT3NEG6Zcjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=S6D6YJNT.cjs.map
+//# sourceMappingURL=D7NNCQKN.cjs.map

package/dist/__chunks/D7NNCQKN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\nexport type RichSelectListProps = Omit<\n  RichSelectBoxProps,\n  \"accessibilityLabel\"\n> & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\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      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n      >\n        <ReactAriaLabel\n          data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n          className={classNames(\n            styles.selectContainer,\n            styles.outerTextContainer,\n          )}\n          {...labelProps}\n          onClick={() => {\n            if (disabled) return;\n            fieldRef.current?.focus();\n            setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n          }}\n        >\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </ReactAriaLabel>\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          accessibilityLabel={label}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                accessibilityLabel={label}\n                {...richSelectBoxProps}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding={size === \"lg\" ? \"lg\" : \"md\"}\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(styles.selectBox, styles[size], {\n                  [styles.unselected]:\n                    !errorText && selectedKeys !== \"all\" && !selectedKeys.size,\n                  [styles.selected]:\n                    !errorText && (selectedKeys === \"all\" || selectedKeys.size),\n                  [styles.selectError]: errorText,\n                })}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={iconSize[size]}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\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          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <div className={styles.outerTextContainer}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </div>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export 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\"}"]}

package/dist/__chunks/{PTWXXDFF.js → DDUJFFG7.js}

@@ -1,7 +1,9 @@
+"use client"
+
 // css-module:../layout.module.css#css-module
 var layout_module_default = { "fullWidth": "_fullWidth_1ey57_1", "fullMaxWidth": "_fullMaxWidth_1ey57_5", "fullMaxHeight": "_fullMaxHeight_1ey57_9", "visibilityVisible": "_visibilityVisible_1ey57_13" };
 
 export {
   layout_module_default
 };
-//# sourceMappingURL=PTWXXDFF.js.map
+//# sourceMappingURL=DDUJFFG7.js.map

package/dist/__chunks/{PTWXXDFF.js.map → DDUJFFG7.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["css-module:../layout.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/layout.module.css\"; export default {\"fullWidth\":\"_fullWidth_1ey57_1\",\"fullMaxWidth\":\"_fullMaxWidth_1ey57_5\",\"fullMaxHeight\":\"_fullMaxHeight_1ey57_9\",\"visibilityVisible\":\"_visibilityVisible_1ey57_13\"}"],"mappings":";AAAqF,IAAO,wBAAQ,EAAC,aAAY,sBAAqB,gBAAe,yBAAwB,iBAAgB,0BAAyB,qBAAoB,8BAA6B;","names":[]}
+{"version":3,"sources":["css-module:../layout.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/layout.module.css\"; export default {\"fullWidth\":\"_fullWidth_1ey57_1\",\"fullMaxWidth\":\"_fullMaxWidth_1ey57_5\",\"fullMaxHeight\":\"_fullMaxHeight_1ey57_9\",\"visibilityVisible\":\"_visibilityVisible_1ey57_13\"}"],"mappings":";;;AAAqF,IAAO,wBAAQ,EAAC,aAAY,sBAAqB,gBAAe,yBAAwB,iBAAgB,0BAAyB,qBAAoB,8BAA6B;","names":[]}

package/dist/__chunks/{3TXXNWWA.cjs → DJHFPKBX.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:./Divider.module.css#css-module
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:./Divider.module.css#css-module
 var Divider_module_default = { "divider": "_divider_ra8vz_1" };
 
 // src/Divider/Divider.tsx
@@ -11,4 +13,4 @@ Divider.displayName = "Divider";
 
 
 exports.Divider = Divider;
-//# sourceMappingURL=3TXXNWWA.cjs.map
+//# sourceMappingURL=DJHFPKBX.cjs.map

package/dist/__chunks/DJHFPKBX.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,mBAAkB;;;ACMjI;AADM,SAAR,UAA+C;AACpD,SAAO,oBAAC,QAAG,WAAW,uBAAO,SAAS;AACxC;AAEA,QAAQ,cAAc","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_ra8vz_1\"}","import styles from \"./Divider.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 <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n"]}

package/dist/__chunks/{M3L2KJQY.cjs → DKBI6MRY.cjs}

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 
+var _VF7PQHZPcjs = require('./VF7PQHZP.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 
 
-var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 
 // src/TapArea/TapArea.tsx
 
@@ -25,13 +26,13 @@ var _jsxruntime = require('react/jsx-runtime');
 function reducer(state, action) {
   switch (action.type) {
     case "BLUR":
-      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { focussed: false });
+      return _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, state), { focussed: false });
     case "FOCUS":
-      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { focussed: true });
+      return _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, state), { focussed: true });
     case "MOUSE_ENTER":
-      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { hovered: true });
+      return _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, state), { hovered: true });
     case "MOUSE_LEAVE":
-      return _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, state), { hovered: false });
+      return _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, state), { hovered: false });
     default:
       return state;
   }
@@ -49,7 +50,7 @@ var TapArea = _react.forwardRef.call(void 0,
       onMouseLeave,
       rounding = "none",
       tabIndex = 0
-    } = _b, accessibilityProps = _I64JGYX7cjs.__objRest.call(void 0, _b, [
+    } = _b, accessibilityProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, [
       "children",
       "accessibilityLabel",
       "data-testid",
@@ -61,7 +62,7 @@ var TapArea = _react.forwardRef.call(void 0,
       "rounding",
       "tabIndex"
     ]);
-    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
     const [{ hovered, focussed }, dispatch] = _react.useReducer.call(void 0, reducer, {
       hovered: false,
@@ -95,10 +96,10 @@ var TapArea = _react.forwardRef.call(void 0,
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
     const isHoveredOrFocussed = !disabled && (hovered || focussed);
-    const roundingClasses = rounding !== "none" && _7GJ2SD7Ocjs.rounding_module_default[`rounding${rounding}`];
+    const roundingClasses = rounding !== "none" && _VF7PQHZPcjs.rounding_module_default[`rounding${rounding}`];
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
-      _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, accessibilityProps), {
+      _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, accessibilityProps), {
         "aria-disabled": disabled || accessibilityProps["aria-disabled"],
         "aria-label": accessibilityLabel != null ? accessibilityLabel : accessibilityProps["aria-label"],
         className: _classnames2.default.call(void 0, 
@@ -132,4 +133,4 @@ var TapArea_default = TapArea;
 
 
 exports.TapArea_default = TapArea_default;
-//# sourceMappingURL=M3L2KJQY.cjs.map
+//# sourceMappingURL=DKBI6MRY.cjs.map

package/dist/__chunks/DKBI6MRY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  useReducer,\n  type AriaAttributes,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TapAreaProps = AriaAttributes & {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * The callback to be called when the tap area is hovered\n   */\n  onMouseEnter?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * The callback to be called when the tap area is no longer hovered\n   */\n  onMouseLeave?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `lg`: 16px\n   * * `xl`: 32px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\n\n/**\n * [TapArea](https://cambly-syntax.vercel.app/?path=/docs/components-taparea--docs) allows components to be clickable and touchable in an accessible way.\n */\nconst TapArea = forwardRef<HTMLDivElement, TapAreaProps>(\n  (\n    {\n      children,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullWidth = true,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      rounding = \"none\",\n      tabIndex = 0,\n      ...accessibilityProps\n    }: TapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const handleOnMouseEnter: React.MouseEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_ENTER\" });\n      onMouseEnter?.(event);\n    };\n\n    const handleOnMouseLeave: React.MouseEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_LEAVE\" });\n      onMouseLeave?.(event);\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n    const roundingClasses =\n      rounding !== \"none\" && roundingStyles[`rounding${rounding}`];\n\n    return (\n      <div\n        {...accessibilityProps}\n        aria-disabled={disabled || accessibilityProps[\"aria-disabled\"]}\n        aria-label={accessibilityLabel ?? accessibilityProps[\"aria-label\"]}\n        className={classNames(\n          styles.tapArea,\n          styles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullWidth && styles.fullWidth,\n          isHoveredOrFocussed && styles.hoveredOrFocussed,\n          roundingClasses,\n        )}\n        data-testid={dataTestId}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div className={classNames(styles.overlay, roundingClasses)} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nTapArea.displayName = \"TapArea\";\n\nexport default TapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_g6gkz_1\",\"fullWidth\":\"_fullWidth_g6gkz_5\",\"disabled\":\"_disabled_g6gkz_9\",\"enabled\":\"_enabled_g6gkz_16\",\"overlay\":\"_overlay_g6gkz_29\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_g6gkz_39\"}"]}

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

@@ -1,6 +1,7 @@
+"use client"
 import {
   Box_default
-} from "./I5W7ECUO.js";
+} from "./MAPDSZR4.js";
 
 // src/AvatarGroup/AvatarGroup.tsx
 import {
@@ -38,4 +39,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=ZUFGJYFB.js.map
+//# sourceMappingURL=DUQSTRXU.js.map

package/dist/__chunks/{ZUFGJYFB.js.map → DUQSTRXU.js.map}

@@ -1 +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\";\n\ntype Size = \"sm\" | \"md\" | \"lg\" | \"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   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\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  return (\n    <AvatarGroupContext.Provider value={{ size, 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;AAgED;AArDN,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,GAyBiB;AACf,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,GACtD;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":[]}
+{"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\";\n\ntype Size = \"sm\" | \"md\" | \"lg\" | \"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   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\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  return (\n    <AvatarGroupContext.Provider value={{ size, 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;AAgED;AArDN,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,GAyBiB;AACf,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,GACtD;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/{XKDASN7N.js → E5KMIBEU.js}

@@ -1,3 +1,5 @@
+"use client"
+
 // src/react-aria-utils/OverlayVisibility.tsx
 import { useEffect, useRef } from "react";
 function OverlayVisibility({
@@ -27,4 +29,4 @@ function OverlayVisibility({
 export {
   OverlayVisibility
 };
-//# sourceMappingURL=XKDASN7N.js.map
+//# sourceMappingURL=E5KMIBEU.js.map

package/dist/__chunks/{XKDASN7N.js.map → E5KMIBEU.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react-aria-utils/OverlayVisibility.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * The react-aria-components Tooltip, Popover, Modal and ModalOverlay\n * components render with `isEntering` and `isExiting` bools from\n * listening to css animations events on the element.\n *\n * These bits are only available through children-as-function render props.\n *\n * Since these bits are not available through any context,\n * this component is a helper to fire a handler when content visibility\n * has changed _after_ animations have finished.\n */\nexport default function OverlayVisibility({\n  onChange,\n  isEntering,\n  isExiting,\n}: {\n  /** Optional handler for change of visibility for popover content */\n  onChange?: (visible: boolean) => void;\n  /** Whether the content is entering (animating) */\n  isEntering?: boolean;\n  /** Whether the content is exiting (animating) */\n  isExiting?: boolean;\n}): null {\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // fire visibility change handler when animation steps finish\n  useEffect(() => {\n    if (isEntering) return () => onChangeRef.current?.(true);\n    if (isExiting) return () => onChangeRef.current?.(false);\n  }, [isEntering, isExiting]);\n\n  return null;\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAanB,SAAR,kBAAmC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,GAOS;AACP,QAAM,cAAc,OAAO,QAAQ;AACnC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI;AAAY,aAAO,MAAG;AAhC9B;AAgCiC,iCAAY,YAAZ,qCAAsB;AAAA;AACnD,QAAI;AAAW,aAAO,MAAG;AAjC7B;AAiCgC,iCAAY,YAAZ,qCAAsB;AAAA;AAAA,EACpD,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/react-aria-utils/OverlayVisibility.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * The react-aria-components Tooltip, Popover, Modal and ModalOverlay\n * components render with `isEntering` and `isExiting` bools from\n * listening to css animations events on the element.\n *\n * These bits are only available through children-as-function render props.\n *\n * Since these bits are not available through any context,\n * this component is a helper to fire a handler when content visibility\n * has changed _after_ animations have finished.\n */\nexport default function OverlayVisibility({\n  onChange,\n  isEntering,\n  isExiting,\n}: {\n  /** Optional handler for change of visibility for popover content */\n  onChange?: (visible: boolean) => void;\n  /** Whether the content is entering (animating) */\n  isEntering?: boolean;\n  /** Whether the content is exiting (animating) */\n  isExiting?: boolean;\n}): null {\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // fire visibility change handler when animation steps finish\n  useEffect(() => {\n    if (isEntering) return () => onChangeRef.current?.(true);\n    if (isExiting) return () => onChangeRef.current?.(false);\n  }, [isEntering, isExiting]);\n\n  return null;\n}\n"],"mappings":";;;AAAA,SAAS,WAAW,cAAc;AAanB,SAAR,kBAAmC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,GAOS;AACP,QAAM,cAAc,OAAO,QAAQ;AACnC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI;AAAY,aAAO,MAAG;AAhC9B;AAgCiC,iCAAY,YAAZ,qCAAsB;AAAA;AACnD,QAAI;AAAW,aAAO,MAAG;AAjC7B;AAiCgC,iCAAY,YAAZ,qCAAsB;AAAA;AAAA,EACpD,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,SAAO;AACT;","names":[]}

package/dist/__chunks/{RFHPSEBF.cjs → E5P6WRJD.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/react-aria-utils/OverlayVisibility.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// src/react-aria-utils/OverlayVisibility.tsx
 var _react = require('react');
 function OverlayVisibility({
   onChange,
@@ -27,4 +29,4 @@ function OverlayVisibility({
 
 
 exports.OverlayVisibility = OverlayVisibility;
-//# sourceMappingURL=RFHPSEBF.cjs.map
+//# sourceMappingURL=E5P6WRJD.cjs.map

package/dist/__chunks/E5P6WRJD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react-aria-utils/OverlayVisibility.tsx"],"names":[],"mappings":";;;AAAA,SAAS,WAAW,cAAc;AAanB,SAAR,kBAAmC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACF,GAOS;AACP,QAAM,cAAc,OAAO,QAAQ;AACnC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI;AAAY,aAAO,MAAG;AAhC9B;AAgCiC,iCAAY,YAAZ,qCAAsB;AAAA;AACnD,QAAI;AAAW,aAAO,MAAG;AAjC7B;AAiCgC,iCAAY,YAAZ,qCAAsB;AAAA;AAAA,EACpD,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,SAAO;AACT","sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * The react-aria-components Tooltip, Popover, Modal and ModalOverlay\n * components render with `isEntering` and `isExiting` bools from\n * listening to css animations events on the element.\n *\n * These bits are only available through children-as-function render props.\n *\n * Since these bits are not available through any context,\n * this component is a helper to fire a handler when content visibility\n * has changed _after_ animations have finished.\n */\nexport default function OverlayVisibility({\n  onChange,\n  isEntering,\n  isExiting,\n}: {\n  /** Optional handler for change of visibility for popover content */\n  onChange?: (visible: boolean) => void;\n  /** Whether the content is entering (animating) */\n  isEntering?: boolean;\n  /** Whether the content is exiting (animating) */\n  isExiting?: boolean;\n}): null {\n  const onChangeRef = useRef(onChange);\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // fire visibility change handler when animation steps finish\n  useEffect(() => {\n    if (isEntering) return () => onChangeRef.current?.(true);\n    if (isExiting) return () => onChangeRef.current?.(false);\n  }, [isEntering, isExiting]);\n\n  return null;\n}\n"]}

package/dist/__chunks/{2OKXRMSO.cjs → EQIP4BAD.cjs}

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
 
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
-var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
 
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
 
 // src/TextArea/TextArea.tsx
 var _react = require('react');
@@ -35,12 +36,12 @@ var TextArea = _react.forwardRef.call(void 0,
     value = "",
     onChange
   }, forwardedRef) {
-    const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+    const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
     const disabled = !isHydrated || disabledProp;
     const reactId = _react.useId.call(void 0, );
     const inputId = id != null ? id : reactId;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _SZCVEBN2cjs.Box_default,
+      _WJRIAS4Wcjs.Box_default,
       {
         display: "flex",
         direction: "column",
@@ -52,8 +53,8 @@ var TextArea = _react.forwardRef.call(void 0,
           }
         },
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JBNXAIXYcjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _JBNXAIXYcjs.Typography_default, { size: 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _X6HZ6DM2cjs.Typography_default, { size: 200, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               "data-testid": dataTestId,
@@ -76,8 +77,8 @@ var TextArea = _react.forwardRef.call(void 0,
               disabled
             }
           ) }),
-          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _JBNXAIXYcjs.Typography_default,
+          (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WJRIAS4Wcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _X6HZ6DM2cjs.Typography_default,
             {
               size: 100,
               color: errorText ? "destructive-primary" : "gray700",
@@ -94,4 +95,4 @@ var TextArea_default = TextArea;
 
 
 exports.TextArea_default = TextArea_default;
-//# sourceMappingURL=2OKXRMSO.cjs.map
+//# sourceMappingURL=EQIP4BAD.cjs.map

package/dist/__chunks/EQIP4BAD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"names":["TextArea"],"mappings":";;;;;;;;;;;;AAEA,SAAmC,OAAO,kBAAkB;;;ACFoC,IAAO,0BAAQ,EAAC,YAAW,qBAAoB,MAAK,eAAc,MAAK,gBAAe,MAAK,eAAc;;;ACAvG,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,uBAAsB;;;AFK5W,OAAO,gBAAgB;AAmFjB,SAaM,KAbN;AAxBN,IAAM,WAAW;AAAA,EACf,SAASA,UACP;AAAA,IACE,eAAe;AAAA,IACf,UAAU,eAAe;AAAA,IACzB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EACF,GACA,cACc;AACd,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,UAAU,MAAM;AACtB,UAAM,UAAU,kBAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAM;AAAA,QACN,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,SAAS,WAAW,MAAM;AAAA,UAC5B;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,WAAM,WAAW,yBAAgB,OAAO,SAAS,SAChD,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,UACA,oBAAC,sBAAW,MAAM,KAChB;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,KAAK;AAAA,cACL,WAAW;AAAA,gBACT,yBAAgB;AAAA,gBAChB,yBAAgB,IAAI;AAAA,gBACpB,wBAAO;AAAA,gBACP,wBAAO,IAAI;AAAA,gBACX;AAAA,kBACE,CAAC,yBAAgB,UAAU,GAAG;AAAA,gBAChC;AAAA,cACF;AAAA,cACA,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,GACF;AAAA,WACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,YAAY,wBAAwB;AAAA,cAE1C,uBAAa;AAAA;AAAA,UAChB,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ","sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\n  ): ReactElement {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const reactId = useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <Box\n        display=\"flex\"\n        direction=\"column\"\n        gap={2}\n        width=\"100%\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            opacity: disabled ? 0.5 : 1,\n          },\n        }}\n      >\n        <label className={textFieldStyles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={200}>\n          <textarea\n            data-testid={dataTestId}\n            ref={forwardedRef}\n            className={classNames(\n              textFieldStyles.textfield,\n              textFieldStyles[size],\n              styles.textarea,\n              styles[size],\n              {\n                [textFieldStyles.inputError]: errorText,\n              },\n            )}\n            id={inputId}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            onChange={onChange}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n          />\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n            >\n              {errorText || helperText}\n            </Typography>\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_11ro9_1\",\"sm\":\"_sm_11ro9_5\",\"md\":\"_md_11ro9_10\",\"lg\":\"_lg_11ro9_15\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_bmndn_1\",\"label\":\"_label_bmndn_20\",\"sm\":\"_sm_bmndn_24\",\"smHeight\":\"_smHeight_bmndn_31\",\"md\":\"_md_bmndn_35\",\"mdHeight\":\"_mdHeight_bmndn_42\",\"lg\":\"_lg_bmndn_46\",\"lgHeight\":\"_lgHeight_bmndn_53\",\"inputError\":\"_inputError_bmndn_57\"}"]}

package/dist/__chunks/{VXNZTCXZ.cjs → FFPBVVGU.cjs}

@@ -1,6 +1,10 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
-var _JBNXAIXYcjs = require('./JBNXAIXY.cjs');
+
+var _X6HZ6DM2cjs = require('./X6HZ6DM2.cjs');
+
+
+var _COV3XKSJcjs = require('./COV3XKSJ.cjs');
 
 // src/Heading/Heading.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -10,20 +14,24 @@ var Heading = ({
   children,
   color = "gray900",
   "data-testid": dataTestId,
+  fontStyle,
   lineClamp,
   size = 500
 }) => {
-  const weight = [700, 800].includes(size) ? "heavy" : "bold";
+  const { themeName } = _COV3XKSJcjs.useTheme.call(void 0, );
+  const classicWeight = [700, 800].includes(size) ? "heavy" : "bold";
+  const cambioWeight = fontStyle === "serif" ? "medium" : "regular";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _JBNXAIXYcjs.Typography_default,
+    _X6HZ6DM2cjs.Typography_default,
     {
       align,
       as,
       color,
+      fontStyle,
       "data-testid": dataTestId,
       lineClamp,
       size,
-      weight,
+      weight: themeName === "classic" ? classicWeight : cambioWeight,
       children
     }
   );
@@ -33,4 +41,4 @@ var Heading_default = Heading;
 
 
 exports.Heading_default = Heading_default;
-//# sourceMappingURL=VXNZTCXZ.cjs.map
+//# sourceMappingURL=FFPBVVGU.cjs.map

package/dist/__chunks/FFPBVVGU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;;;;;AAsGI;AA/FJ,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAgFoB;AAClB,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,gBAAgB,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,IAAI,UAAU;AAC5D,QAAM,eAAe,cAAc,UAAU,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,QAAQ,cAAc,YAAY,gBAAgB;AAAA,MAEjD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\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,\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  const cambioWeight = fontStyle === \"serif\" ? \"medium\" : \"regular\";\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={themeName === \"classic\" ? classicWeight : cambioWeight}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"]}

package/dist/__chunks/{5I67FE26.js → FMQVMNVR.js}

@@ -1,7 +1,9 @@
+"use client"
+
 // css-module:./colors.module.css#css-module
 var colors_module_default = { "inheritColor": "_inheritColor_178qd_2", "destructive700Color": "_destructive700Color_178qd_6", "gray700Color": "_gray700Color_178qd_10", "gray900Color": "_gray900Color_178qd_14", "primary700Color": "_primary700Color_178qd_18", "success700Color": "_success700Color_178qd_22", "whiteColor": "_whiteColor_178qd_26", "blackBackgroundColor": "_blackBackgroundColor_178qd_31", "destructive100BackgroundColor": "_destructive100BackgroundColor_178qd_35", "destructive200BackgroundColor": "_destructive200BackgroundColor_178qd_39", "destructive300BackgroundColor": "_destructive300BackgroundColor_178qd_43", "destructive700BackgroundColor": "_destructive700BackgroundColor_178qd_47", "destructive800BackgroundColor": "_destructive800BackgroundColor_178qd_51", "destructive900BackgroundColor": "_destructive900BackgroundColor_178qd_55", "gray10BackgroundColor": "_gray10BackgroundColor_178qd_59", "gray30BackgroundColor": "_gray30BackgroundColor_178qd_63", "gray60BackgroundColor": "_gray60BackgroundColor_178qd_67", "gray80BackgroundColor": "_gray80BackgroundColor_178qd_71", "gray100BackgroundColor": "_gray100BackgroundColor_178qd_75", "gray200BackgroundColor": "_gray200BackgroundColor_178qd_79", "gray300BackgroundColor": "_gray300BackgroundColor_178qd_83", "gray700BackgroundColor": "_gray700BackgroundColor_178qd_87", "gray800BackgroundColor": "_gray800BackgroundColor_178qd_91", "gray900BackgroundColor": "_gray900BackgroundColor_178qd_95", "orange100BackgroundColor": "_orange100BackgroundColor_178qd_99", "orange200BackgroundColor": "_orange200BackgroundColor_178qd_103", "orange300BackgroundColor": "_orange300BackgroundColor_178qd_107", "orange700BackgroundColor": "_orange700BackgroundColor_178qd_111", "orange800BackgroundColor": "_orange800BackgroundColor_178qd_115", "orange900BackgroundColor": "_orange900BackgroundColor_178qd_119", "primary100BackgroundColor": "_primary100BackgroundColor_178qd_123", "primary200BackgroundColor": "_primary200BackgroundColor_178qd_127", "primary300BackgroundColor": "_primary300BackgroundColor_178qd_131", "primary700BackgroundColor": "_primary700BackgroundColor_178qd_135", "primary800BackgroundColor": "_primary800BackgroundColor_178qd_139", "primary900BackgroundColor": "_primary900BackgroundColor_178qd_143", "success100BackgroundColor": "_success100BackgroundColor_178qd_147", "success200BackgroundColor": "_success200BackgroundColor_178qd_151", "success300BackgroundColor": "_success300BackgroundColor_178qd_155", "success700BackgroundColor": "_success700BackgroundColor_178qd_159", "success800BackgroundColor": "_success800BackgroundColor_178qd_163", "success900BackgroundColor": "_success900BackgroundColor_178qd_167", "purple100BackgroundColor": "_purple100BackgroundColor_178qd_171", "purple200BackgroundColor": "_purple200BackgroundColor_178qd_175", "purple300BackgroundColor": "_purple300BackgroundColor_178qd_179", "purple700BackgroundColor": "_purple700BackgroundColor_178qd_183", "purple800BackgroundColor": "_purple800BackgroundColor_178qd_187", "purple900BackgroundColor": "_purple900BackgroundColor_178qd_191", "whiteBackgroundColor": "_whiteBackgroundColor_178qd_195", "yellow100BackgroundColor": "_yellow100BackgroundColor_178qd_199", "yellow200BackgroundColor": "_yellow200BackgroundColor_178qd_203", "yellow300BackgroundColor": "_yellow300BackgroundColor_178qd_207", "yellow700BackgroundColor": "_yellow700BackgroundColor_178qd_211", "yellow800BackgroundColor": "_yellow800BackgroundColor_178qd_215", "yellow900BackgroundColor": "_yellow900BackgroundColor_178qd_219", "cambioBlackColor": "_cambioBlackColor_178qd_224", "cambioWhiteColor": "_cambioWhiteColor_178qd_228", "cambioGray100Color": "_cambioGray100Color_178qd_232", "cambioGray200Color": "_cambioGray200Color_178qd_236", "cambioGray300Color": "_cambioGray300Color_178qd_240", "cambioGray370Color": "_cambioGray370Color_178qd_244", "cambioGray700Color": "_cambioGray700Color_178qd_248", "cambioGray800Color": "_cambioGray800Color_178qd_252", "cambioGray870Color": "_cambioGray870Color_178qd_256", "cambioGray900Color": "_cambioGray900Color_178qd_260", "cambioDestructive100Color": "_cambioDestructive100Color_178qd_264", "cambioDestructive300Color": "_cambioDestructive300Color_178qd_268", "cambioDestructive370Color": "_cambioDestructive370Color_178qd_272", "cambioDestructive700Color": "_cambioDestructive700Color_178qd_276", "cambioDestructive770Color": "_cambioDestructive770Color_178qd_280", "cambioDestructive900Color": "_cambioDestructive900Color_178qd_284", "cambioSuccess100Color": "_cambioSuccess100Color_178qd_288", "cambioSuccess300Color": "_cambioSuccess300Color_178qd_292", "cambioSuccess370Color": "_cambioSuccess370Color_178qd_296", "cambioSuccess700Color": "_cambioSuccess700Color_178qd_300", "cambioSuccess770Color": "_cambioSuccess770Color_178qd_304", "cambioSuccess900Color": "_cambioSuccess900Color_178qd_308", "cambioRedColor": "_cambioRedColor_178qd_312", "cambioOrangeColor": "_cambioOrangeColor_178qd_316", "cambioTanColor": "_cambioTanColor_178qd_320", "cambioCreamColor": "_cambioCreamColor_178qd_324", "cambioPurpleColor": "_cambioPurpleColor_178qd_328", "cambioLilacColor": "_cambioLilacColor_178qd_332", "cambioThistleColor": "_cambioThistleColor_178qd_336", "cambioPinkColor": "_cambioPinkColor_178qd_340", "cambioNavyColor": "_cambioNavyColor_178qd_344", "cambioTealColor": "_cambioTealColor_178qd_348", "cambioSlateColor": "_cambioSlateColor_178qd_352", "cambioSkyColor": "_cambioSkyColor_178qd_356", "cambioYellow700Color": "_cambioYellow700Color_178qd_360", "cambioTransparentFullBackgroundColor": "_cambioTransparentFullBackgroundColor_178qd_364", "cambioBlackBackgroundColor": "_cambioBlackBackgroundColor_178qd_368", "cambioWhiteBackgroundColor": "_cambioWhiteBackgroundColor_178qd_372", "cambioGray100BackgroundColor": "_cambioGray100BackgroundColor_178qd_376", "cambioGray200BackgroundColor": "_cambioGray200BackgroundColor_178qd_380", "cambioGray300BackgroundColor": "_cambioGray300BackgroundColor_178qd_384", "cambioGray370BackgroundColor": "_cambioGray370BackgroundColor_178qd_388", "cambioGray700BackgroundColor": "_cambioGray700BackgroundColor_178qd_392", "cambioGray800BackgroundColor": "_cambioGray800BackgroundColor_178qd_396", "cambioGray870BackgroundColor": "_cambioGray870BackgroundColor_178qd_400", "cambioGray900BackgroundColor": "_cambioGray900BackgroundColor_178qd_404", "cambioDestructive100BackgroundColor": "_cambioDestructive100BackgroundColor_178qd_408", "cambioDestructive300BackgroundColor": "_cambioDestructive300BackgroundColor_178qd_412", "cambioDestructive370BackgroundColor": "_cambioDestructive370BackgroundColor_178qd_416", "cambioDestructive700BackgroundColor": "_cambioDestructive700BackgroundColor_178qd_420", "cambioDestructive770BackgroundColor": "_cambioDestructive770BackgroundColor_178qd_424", "cambioDestructive900BackgroundColor": "_cambioDestructive900BackgroundColor_178qd_428", "cambioSuccess100BackgroundColor": "_cambioSuccess100BackgroundColor_178qd_432", "cambioSuccess300BackgroundColor": "_cambioSuccess300BackgroundColor_178qd_436", "cambioSuccess370BackgroundColor": "_cambioSuccess370BackgroundColor_178qd_440", "cambioSuccess700BackgroundColor": "_cambioSuccess700BackgroundColor_178qd_444", "cambioSuccess770BackgroundColor": "_cambioSuccess770BackgroundColor_178qd_448", "cambioSuccess900BackgroundColor": "_cambioSuccess900BackgroundColor_178qd_452", "cambioRedBackgroundColor": "_cambioRedBackgroundColor_178qd_456", "cambioOrangeBackgroundColor": "_cambioOrangeBackgroundColor_178qd_460", "cambioTanBackgroundColor": "_cambioTanBackgroundColor_178qd_464", "cambioCreamBackgroundColor": "_cambioCreamBackgroundColor_178qd_468", "cambioPurpleBackgroundColor": "_cambioPurpleBackgroundColor_178qd_472", "cambioLilacBackgroundColor": "_cambioLilacBackgroundColor_178qd_476", "cambioThistleBackgroundColor": "_cambioThistleBackgroundColor_178qd_480", "cambioPinkBackgroundColor": "_cambioPinkBackgroundColor_178qd_484", "cambioNavyBackgroundColor": "_cambioNavyBackgroundColor_178qd_488", "cambioTealBackgroundColor": "_cambioTealBackgroundColor_178qd_492", "cambioSlateBackgroundColor": "_cambioSlateBackgroundColor_178qd_496", "cambioSkyBackgroundColor": "_cambioSkyBackgroundColor_178qd_500", "cambioYellow700BackgroundColor": "_cambioYellow700BackgroundColor_178qd_504" };
 
 export {
   colors_module_default
 };
-//# sourceMappingURL=5I67FE26.js.map
+//# sourceMappingURL=FMQVMNVR.js.map