@cambly/syntax-core 10.4.0 → 10.5.1

package/dist/__chunks/FVUQWBMO.cjs

@@ -0,0 +1,270 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+
+var _5TKLFG5Ycjs = require('./5TKLFG5Y.cjs');
+
+
+var _QNBZ64IEcjs = require('./QNBZ64IE.cjs');
+
+
+var _IJVFSOXUcjs = require('./IJVFSOXU.cjs');
+
+
+var _PZYWUTMWcjs = require('./PZYWUTMW.cjs');
+
+
+
+var _ZU4Y2KQGcjs = require('./ZU4Y2KQG.cjs');
+
+
+var _FMSI35YScjs = require('./FMSI35YS.cjs');
+
+
+var _2RCQTGOZcjs = require('./2RCQTGOZ.cjs');
+
+
+var _NDJRETMMcjs = require('./NDJRETMM.cjs');
+
+
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
+
+
+var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
+
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+// src/RichSelect/RichSelectList.tsx
+
+
+
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+
+
+var _reactariacomponents = require('react-aria-components');
+var _utils = require('@react-stately/utils');
+var _interactions = require('@react-aria/interactions');
+
+// css-module:../SelectList/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" };
+
+// src/RichSelect/RichSelectList.tsx
+var _reactaria = require('react-aria');
+var _jsxruntime = require('react/jsx-runtime');
+var NOOP = () => void 0;
+var iconSize = {
+  sm: 20,
+  md: 24,
+  lg: 24
+};
+function RichSelectList(props) {
+  const _a = props, {
+    autosave,
+    children,
+    "data-testid": dataTestId,
+    disabled: disabledProp = false,
+    errorText,
+    helperText,
+    label,
+    onChange,
+    onClick = NOOP,
+    placeholderText,
+    selectTextValue,
+    selectedValues: selectedValuesProp,
+    defaultSelectedValues: defaultSelectedValuesProp,
+    size = "md"
+  } = _a, richSelectBoxProps = _I64JGYX7cjs.__objRest.call(void 0, _a, [
+    "autosave",
+    "children",
+    "data-testid",
+    "disabled",
+    "errorText",
+    "helperText",
+    "label",
+    "onChange",
+    "onClick",
+    "placeholderText",
+    "selectTextValue",
+    "selectedValues",
+    "defaultSelectedValues",
+    "size"
+  ]);
+  const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+  const disabled = !isHydrated || disabledProp;
+  const overlayHandlerRef = _react.useRef.call(void 0, {});
+  const selectedKeysProp = _react.useMemo.call(void 0, 
+    () => _5TKLFG5Ycjs.convertSelection.call(void 0, selectedValuesProp),
+    [selectedValuesProp]
+  );
+  const defaultSelectedKeys = _react.useMemo.call(void 0, 
+    () => _5TKLFG5Ycjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    [defaultSelectedValuesProp]
+  );
+  const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
+    selectedKeysProp,
+    // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined
+    defaultSelectedKeys,
+    (value) => {
+      var _a2, _b;
+      const _value = value === "all" ? "all" : [...value].map(String);
+      onChange(_value);
+      if (!autosave)
+        (_b = (_a2 = overlayHandlerRef.current).close) == null ? void 0 : _b.call(_a2);
+    }
+  );
+  const selectedTextValue = _react.useMemo.call(void 0, () => {
+    var _a2;
+    if (selectTextValue)
+      return (_a2 = selectTextValue(
+        selectedKeys === "all" ? "all" : [...selectedKeys].map(String)
+      )) != null ? _a2 : placeholderText;
+    if (selectedKeys === "all")
+      return "All selected";
+    if (selectedKeys.size)
+      return `${selectedKeys.size} selected`;
+    return placeholderText;
+  }, [selectTextValue, selectedKeys, placeholderText]);
+  const fieldRef = _react.useRef.call(void 0, null);
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = _reactaria.useField.call(void 0, {
+    label,
+    // this is the label for the select box
+    description: helperText,
+    errorMessage: errorText
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactariacomponents.Provider,
+    {
+      values: [
+        [_5TKLFG5Ycjs.RichSelectBoxContext, { autoFocus: true }],
+        [_IJVFSOXUcjs.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, 
+        "div",
+        {
+          className: _classnames2.default.call(void 0, SelectList_module_default.selectContainer, {
+            [SelectList_module_default.opacityOverlay]: disabled
+          }),
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _reactariacomponents.Label,
+              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                "data-testid": [dataTestId, "label"].filter(Boolean).join("-"),
+                className: _classnames2.default.call(void 0, 
+                  SelectList_module_default.selectContainer,
+                  SelectList_module_default.outerTextContainer
+                )
+              }, labelProps), {
+                onClick: () => {
+                  var _a2;
+                  if (disabled)
+                    return;
+                  (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
+                  _interactions.setInteractionModality.call(void 0, "keyboard");
+                },
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZX5KONS2cjs.Typography_default, { size: 100, color: "gray700", children: label })
+              })
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _QNBZ64IEcjs.Popover_default,
+              {
+                ref: overlayHandlerRef,
+                disabled,
+                accessibilityLabel: label,
+                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, 
+                    _5SMR5MWYcjs.Box_default,
+                    {
+                      padding: autosave ? void 0 : 5,
+                      dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _5TKLFG5Ycjs.RichSelectBox_default,
+                        _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                          autosave,
+                          selectedValues: selectedKeys,
+                          defaultSelectedValues: defaultSelectedKeys,
+                          onChange: (selected) => setSelectedKeys(new Set(selected)),
+                          accessibilityLabel: label
+                        }, richSelectBoxProps), {
+                          children
+                        })
+                      )
+                    }
+                  )
+                ),
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _PZYWUTMWcjs.TapArea_default,
+                  _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                    "data-testid": dataTestId,
+                    disabled,
+                    onClick,
+                    rounding: size === "lg" ? "lg" : "md"
+                  }, fieldProps), {
+                    ref: fieldRef,
+                    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "div",
+                        {
+                          className: _classnames2.default.call(void 0, SelectList_module_default.selectBox, SelectList_module_default[size], {
+                            [SelectList_module_default.unselected]: !errorText && selectedKeys !== "all" && !selectedKeys.size,
+                            [SelectList_module_default.selected]: !errorText && (selectedKeys === "all" || selectedKeys.size),
+                            [SelectList_module_default.selectError]: errorText
+                          }),
+                          children: selectedTextValue
+                        }
+                      ),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "svg",
+                        {
+                          focusable: "false",
+                          "aria-hidden": "true",
+                          viewBox: "0 0 24 24",
+                          width: iconSize[size],
+                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            "path",
+                            {
+                              fill: errorText ? _ZU4Y2KQGcjs.ColorBaseDestructive700 : _ZU4Y2KQGcjs.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, 
+              _ZX5KONS2cjs.Typography_default,
+              _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+                size: 100,
+                color: errorText ? "destructive-primary" : "gray700"
+              }, errorText ? errorMessageProps : descriptionProps), {
+                children: errorText ? errorText : helperText
+              })
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+var RichSelectList_default = Object.assign(RichSelectList, {
+  Section: _FMSI35YScjs.RichSelectSection_default,
+  Chip: _NDJRETMMcjs.RichSelectChip_default,
+  RadioButton: _2RCQTGOZcjs.RichSelectRadioButton_default
+});
+
+
+
+exports.RichSelectList_default = RichSelectList_default;
+//# sourceMappingURL=FVUQWBMO.cjs.map

package/dist/__chunks/FVUQWBMO.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/{PYX4374T.cjs → FZ5HWA3S.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _UNZBENAEcjs = require('./UNZBENAE.cjs');
+var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
 
 // src/Heading/Heading.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -15,7 +15,7 @@ var Heading = ({
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _UNZBENAEcjs.Typography_default,
+    _ZX5KONS2cjs.Typography_default,
     {
       align,
       as,
@@ -33,4 +33,4 @@ var Heading_default = Heading;
 
 
 exports.Heading_default = Heading_default;
-//# sourceMappingURL=PYX4374T.cjs.map
+//# sourceMappingURL=FZ5HWA3S.cjs.map

package/dist/__chunks/{XWGC5OYD.cjs → GOSWBV5D.cjs}

@@ -3,7 +3,7 @@
 var _LTM57QMYcjs = require('./LTM57QMY.cjs');
 
 
-var _UNZBENAEcjs = require('./UNZBENAE.cjs');
+var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
 
 
 var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
@@ -92,7 +92,7 @@ var Checkbox = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _UNZBENAEcjs.Typography_default,
+          _ZX5KONS2cjs.Typography_default,
           {
             size: typographySize[size],
             color: error ? "destructive-primary" : "gray800",
@@ -108,4 +108,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=XWGC5OYD.cjs.map
+//# sourceMappingURL=GOSWBV5D.cjs.map

package/dist/__chunks/GYI2PBXY.cjs

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+
+// src/RichSelect/RichSelectItem.tsx
+
+
+
+
+
+var _react = require('react');
+
+
+var _reactariacomponents = require('react-aria-components');
+
+// css-module:./RichSelect.module.css#css-module
+var RichSelect_module_default = { "richSelectItem": "_richSelectItem_8ycz0_1", "richSelectBox": "_richSelectBox_8ycz0_2" };
+
+// src/RichSelect/RichSelectItem.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var RichSelectItemContext = _react.createContext.call(void 0, {});
+var RichSelectItem_default = _react.forwardRef.call(void 0, function RichSelectItem(props, ref) {
+  const {
+    "data-testid": dataTestId,
+    value,
+    label,
+    disabled: disabledProp = false,
+    children
+  } = props;
+  const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
+  const disabled = !isHydrated || disabledProp;
+  const { disableKey } = _react.useContext.call(void 0, RichSelectItemContext);
+  _react.useEffect.call(void 0, () => disableKey == null ? void 0 : disableKey(value, disabled), [disableKey, disabled, value]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactariacomponents.ListBoxItem,
+    {
+      id: value,
+      textValue: label,
+      className: RichSelect_module_default.richSelectItem,
+      "data-testid": dataTestId,
+      ref,
+      children
+    }
+  );
+});
+
+
+
+
+
+exports.RichSelect_module_default = RichSelect_module_default; exports.RichSelectItemContext = RichSelectItemContext; exports.RichSelectItem_default = RichSelectItem_default;
+//# sourceMappingURL=GYI2PBXY.cjs.map

package/dist/__chunks/GYI2PBXY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectItem.tsx","css-module:./RichSelect.module.css#css-module"],"names":[],"mappings":";;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE,eAAe;AAAA,OAEV;;;ACV6F,IAAO,4BAAQ,EAAC,kBAAiB,2BAA0B,iBAAgB,yBAAwB;;;ADkDnM;AA3BG,IAAM,wBAAwB,cAElC,CAAC,CAAC;AAEL,IAAO,yBAAQ,WASb,SAAS,eAAe,OAAO,KAAmB;AAClD,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,UAAU,eAAe;AAAA,IACzB;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAEhC,QAAM,EAAE,WAAW,IAAI,WAAW,qBAAqB;AACvD,YAAU,MAAM,yCAAa,OAAO,WAAW,CAAC,YAAY,UAAU,KAAK,CAAC;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW,0BAAO;AAAA,MAClB,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC","sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  createContext,\n  useEffect,\n  useContext,\n} from \"react\";\nimport {\n  ListBoxItem as ReactAriaListBoxItem,\n  type ListBoxItemRenderProps,\n} from \"react-aria-components\";\nimport styles from \"./RichSelect.module.css\";\nimport { type Key } from \"react-aria\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nexport type RichSelectItemProps = {\n  \"data-testid\"?: string;\n  value: string;\n  label: string;\n  name?: string;\n  disabled?: boolean;\n};\n\nexport const RichSelectItemContext = createContext<{\n  disableKey?: (key: Key, value: boolean) => void;\n}>({});\n\nexport default forwardRef<\n  HTMLDivElement,\n  RichSelectItemProps & {\n    /** The children of the component. A function may be provided to alter the children based on component state. */\n    children?:\n      | string\n      | ReactElement\n      | ((values: ListBoxItemRenderProps) => ReactElement);\n  }\n>(function RichSelectItem(props, ref): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    value,\n    label,\n    disabled: disabledProp = false,\n    children,\n  } = props;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  const { disableKey } = useContext(RichSelectItemContext);\n  useEffect(() => disableKey?.(value, disabled), [disableKey, disabled, value]);\n  return (\n    <ReactAriaListBoxItem\n      id={value}\n      textValue={label}\n      className={styles.richSelectItem}\n      data-testid={dataTestId}\n      ref={ref}\n    >\n      {children}\n    </ReactAriaListBoxItem>\n  );\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RichSelect/RichSelect.module.css\"; export default {\"richSelectItem\":\"_richSelectItem_8ycz0_1\",\"richSelectBox\":\"_richSelectBox_8ycz0_2\"}"]}

package/dist/__chunks/{XA2DZRGH.js → HPLOQ2U3.js}

@@ -1,12 +1,16 @@
 import {
   SelectOption_default
 } from "./HOUO3WV6.js";
+import {
+  ColorBaseDestructive700,
+  ColorBaseGray800
+} from "./W24KIAXI.js";
 import {
   Focus_module_default
 } from "./2O6FDRTF.js";
 import {
   Typography_default
-} from "./4G4SS7O3.js";
+} from "./B2TFERTM.js";
 import {
   useIsHydrated
 } from "./YJ7YDIGB.js";
@@ -21,10 +25,6 @@ import {
 } from "react";
 import classNames from "classnames";
 
-// ../syntax-design-tokens/dist/js/index.js
-var ColorBaseDestructive700 = "#d32a4b";
-var ColorBaseGray800 = "#353535";
-
 // 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" };
 
@@ -124,4 +124,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=XA2DZRGH.js.map
+//# sourceMappingURL=HPLOQ2U3.js.map

package/dist/__chunks/HPLOQ2U3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\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\";\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 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      })}\n    >\n      {label && (\n        <label htmlFor={selectId} className={styles.outerTextContainer}>\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles[size], {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectError]: errorText,\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\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={iconSize[size]}\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        <div className={styles.outerTextContainer}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </div>\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_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\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACN6E,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;ADgHvkB,cAMF,YANE;AA9FV,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKe,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AACT,GAwDiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UAAU,WAAW,0BAAO,oBAC1C,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,gBACpD,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,WAAW,GAAG;AAAA,gBACtB,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,cAClD,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO,SAAS,IAAI;AAAA,cAEpB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,0BAA0B;AAAA,kBAC5C,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,sBAAY,YAAY;AAAA;AAAA,QAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS;","names":[]}

package/dist/__chunks/{4DPEJJ42.cjs → HR5QOB3U.cjs}

@@ -1,9 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _SJFWRAOPcjs = require('./SJFWRAOP.cjs');
-
-
-var _PYX4374Tcjs = require('./PYX4374T.cjs');
+var _FZ5HWA3Scjs = require('./FZ5HWA3S.cjs');
 
 
 var _PBWG2BB5cjs = require('./PBWG2BB5.cjs');
@@ -12,6 +9,9 @@ var _PBWG2BB5cjs = require('./PBWG2BB5.cjs');
 var _YBP5BNDHcjs = require('./YBP5BNDH.cjs');
 
 
+var _SJFWRAOPcjs = require('./SJFWRAOP.cjs');
+
+
 var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
 
 // src/Modal/Modal.tsx
@@ -80,7 +80,7 @@ function Modal({
             ) }),
             image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5SMR5MWYcjs.Box_default, { maxHeight: 200, children: image }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _5SMR5MWYcjs.Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYX4374Tcjs.Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FZ5HWA3Scjs.Heading_default, { as: "h1", size: 500, children: header }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5SMR5MWYcjs.Box_default, { marginBottom: 4, children }),
               footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _5SMR5MWYcjs.Box_default,
@@ -107,4 +107,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=4DPEJJ42.cjs.map
+//# sourceMappingURL=HR5QOB3U.cjs.map

package/dist/__chunks/{NGO7IQET.cjs → IJVFSOXU.cjs}

@@ -1,7 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _ZDMSFZS3cjs = require('./ZDMSFZS3.cjs');
 
-var _VLUKODJDcjs = require('./VLUKODJD.cjs');
+
+var _5WNFAQGYcjs = require('./5WNFAQGY.cjs');
+
+
+var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
 
 
 var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
@@ -10,13 +15,16 @@ var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
 
 // src/Dialog/Dialog.tsx
-var _react = require('react');
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // css-module:../elevation/elevation.module.css#css-module
 var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
 
 // css-module:./Dialog.module.css#css-module
-var Dialog_module_default = { "dialog": "_dialog_vyzu3_1" };
+var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
 
 // src/Dialog/Dialog.tsx
 var _reactariacomponents = require('react-aria-components');
@@ -32,6 +40,7 @@ var sizeToPadding = {
   md: 5,
   lg: 6
 };
+var DialogContext = _react2.default.createContext({});
 var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
   const {
     "data-testid": dataTestId,
@@ -39,6 +48,7 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
     children,
     size = "md"
   } = props;
+  const { padding } = _react.useContext.call(void 0, DialogContext);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _reactariacomponents.Dialog,
     {
@@ -46,20 +56,21 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
       "data-testid": dataTestId,
       "aria-label": accessibilityLabel,
       className: _classnames2.default.call(void 0, [
-        _VLUKODJDcjs.Box_module_default.box,
-        _VLUKODJDcjs.Box_module_default.flex,
-        _VLUKODJDcjs.Box_module_default.column,
-        _VLUKODJDcjs.Box_module_default.gap4,
-        _VLUKODJDcjs.Box_module_default.relative,
-        _VLUKODJDcjs.Box_module_default.overflowauto,
+        _VMARHE5Bcjs.Box_module_default.box,
+        _VMARHE5Bcjs.Box_module_default.flex,
+        _VMARHE5Bcjs.Box_module_default.column,
+        _VMARHE5Bcjs.Box_module_default.gap4,
+        _VMARHE5Bcjs.Box_module_default.relative,
+        _VMARHE5Bcjs.Box_module_default.overflowauto,
         _NGUJFGACcjs.colors_module_default.whiteBackgroundColor,
-        _VLUKODJDcjs.padding_module_default[`paddingX${sizeToPadding[size]}`],
-        _VLUKODJDcjs.padding_module_default[`paddingY${sizeToPadding[size]}`],
+        _5WNFAQGYcjs.padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
+        _5WNFAQGYcjs.padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
         _7GJ2SD7Ocjs.rounding_module_default[`rounding${sizeToRounding[size]}`],
         elevation_module_default.elevation400BoxShadow,
+        _ZDMSFZS3cjs.layout_module_default.fullMaxHeight,
+        _ZDMSFZS3cjs.layout_module_default.visibilityVisible,
         Dialog_module_default.dialog
       ]),
-      style: { maxWidth: "100%", maxHeight: "100%" },
       children
     }
   );
@@ -68,5 +79,6 @@ var Dialog_default = Dialog;
 
 
 
-exports.Dialog_default = Dialog_default;
-//# sourceMappingURL=NGO7IQET.cjs.map
+
+exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
+//# sourceMappingURL=IJVFSOXU.cjs.map

package/dist/__chunks/IJVFSOXU.cjs.map

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