@cambly/syntax-core 10.3.0 → 10.5.0

package/dist/__chunks/{NHSTGALH.cjs → HR5QOB3U.cjs}

@@ -1,18 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _3F5U7W73cjs = require('./3F5U7W73.cjs');
+var _FZ5HWA3Scjs = require('./FZ5HWA3S.cjs');
 
 
-var _SJFWRAOPcjs = require('./SJFWRAOP.cjs');
+var _PBWG2BB5cjs = require('./PBWG2BB5.cjs');
 
 
-var _CEWOAFV2cjs = require('./CEWOAFV2.cjs');
+var _YBP5BNDHcjs = require('./YBP5BNDH.cjs');
 
 
-var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
+var _SJFWRAOPcjs = require('./SJFWRAOP.cjs');
 
 
-var _PBWG2BB5cjs = require('./PBWG2BB5.cjs');
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
 
 // src/Modal/Modal.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -46,7 +46,7 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3F5U7W73cjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PBWG2BB5cjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SJFWRAOPcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _YBP5BNDHcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PBWG2BB5cjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SJFWRAOPcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       className: Modal_module_default.backdrop,
@@ -54,7 +54,7 @@ function Modal({
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _CY6YL5T4cjs.Box_default,
+        _5SMR5MWYcjs.Box_default,
         {
           "data-testid": dataTestId,
           backgroundColor: "white",
@@ -66,7 +66,7 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { position: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5SMR5MWYcjs.Box_default, { position: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
@@ -78,12 +78,12 @@ function Modal({
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { maxHeight: 200, children: image }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CY6YL5T4cjs.Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CEWOAFV2cjs.Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { marginBottom: 4, children }),
+            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, _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, 
-                _CY6YL5T4cjs.Box_default,
+                _5SMR5MWYcjs.Box_default,
                 {
                   display: "flex",
                   direction: "column",
@@ -107,4 +107,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=NHSTGALH.cjs.map
+//# sourceMappingURL=HR5QOB3U.cjs.map

package/dist/__chunks/IJVFSOXU.cjs

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _ZDMSFZS3cjs = require('./ZDMSFZS3.cjs');
+
+
+var _5WNFAQGYcjs = require('./5WNFAQGY.cjs');
+
+
+var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
+
+
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
+
+
+var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
+
+// src/Dialog/Dialog.tsx
+
+
+
+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_1bme6_1" };
+
+// src/Dialog/Dialog.tsx
+var _reactariacomponents = require('react-aria-components');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _jsxruntime = require('react/jsx-runtime');
+var sizeToRounding = {
+  sm: "lg",
+  md: "lg",
+  lg: "xl"
+};
+var sizeToPadding = {
+  sm: 4,
+  md: 5,
+  lg: 6
+};
+var DialogContext = _react2.default.createContext({});
+var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
+  const {
+    "data-testid": dataTestId,
+    accessibilityLabel,
+    children,
+    size = "md"
+  } = props;
+  const { padding } = _react.useContext.call(void 0, DialogContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactariacomponents.Dialog,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": accessibilityLabel,
+      className: _classnames2.default.call(void 0, [
+        _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,
+        _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
+      ]),
+      children
+    }
+  );
+});
+var Dialog_default = Dialog;
+
+
+
+
+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\"}"]}

package/dist/__chunks/JHAV5OTQ.js

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

package/dist/__chunks/JHAV5OTQ.js.map

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

package/dist/__chunks/{37CQV3RS.js → JIXNBF5N.js}

@@ -5,12 +5,16 @@ import {
   useIsHydrated
 } from "./YJ7YDIGB.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "./LULBCTQR.js";
 
 // src/TapArea/TapArea.tsx
-import { forwardRef, useReducer } from "react";
+import {
+  forwardRef,
+  useReducer
+} from "react";
 import classNames from "classnames";
 
 // css-module:./TapArea.module.css#css-module
@@ -33,16 +37,26 @@ function reducer(state, action) {
   }
 }
 var TapArea = forwardRef(
-  ({
-    children,
-    accessibilityLabel,
-    "data-testid": dataTestId,
-    disabled: disabledProp = false,
-    fullWidth = true,
-    onClick,
-    rounding = "none",
-    tabIndex = 0
-  }, ref) => {
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      accessibilityLabel,
+      "data-testid": dataTestId,
+      disabled: disabledProp = false,
+      fullWidth = true,
+      onClick,
+      rounding = "none",
+      tabIndex = 0
+    } = _b, accessibilityProps = __objRest(_b, [
+      "children",
+      "accessibilityLabel",
+      "data-testid",
+      "disabled",
+      "fullWidth",
+      "onClick",
+      "rounding",
+      "tabIndex"
+    ]);
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
     const [{ hovered, focussed }, dispatch] = useReducer(reducer, {
@@ -65,16 +79,18 @@ var TapArea = forwardRef(
       }
     };
     const isHoveredOrFocussed = !disabled && (hovered || focussed);
+    const roundingClasses = rounding !== "none" && rounding_module_default[`rounding${rounding}`];
     return /* @__PURE__ */ jsxs(
       "div",
-      {
-        "aria-disabled": disabled,
-        "aria-label": accessibilityLabel,
+      __spreadProps(__spreadValues({}, accessibilityProps), {
+        "aria-disabled": disabled || accessibilityProps["aria-disabled"],
+        "aria-label": accessibilityLabel != null ? accessibilityLabel : accessibilityProps["aria-label"],
         className: classNames(
           TapArea_module_default.tapArea,
           TapArea_module_default[`${disabled ? "disabled" : "enabled"}`],
           fullWidth && TapArea_module_default.fullWidth,
-          isHoveredOrFocussed && TapArea_module_default.hoveredOrFocussed
+          isHoveredOrFocussed && TapArea_module_default.hoveredOrFocussed,
+          roundingClasses
         ),
         "data-testid": dataTestId,
         onClick: handleClick,
@@ -87,18 +103,10 @@ var TapArea = forwardRef(
         role: "button",
         tabIndex: disabled ? void 0 : tabIndex,
         children: [
-          !disabled && (hovered || focussed) && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classNames(
-                TapArea_module_default.overlay,
-                rounding !== "none" && rounding_module_default[`rounding${rounding}`]
-              )
-            }
-          ),
+          !disabled && (hovered || focussed) && /* @__PURE__ */ jsx("div", { className: classNames(TapArea_module_default.overlay, roundingClasses) }),
           children
         ]
-      }
+      })
     );
   }
 );
@@ -108,4 +116,4 @@ var TapArea_default = TapArea;
 export {
   TapArea_default
 };
-//# sourceMappingURL=37CQV3RS.js.map
+//# sourceMappingURL=JIXNBF5N.js.map

package/dist/__chunks/JIXNBF5N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TapArea/TapArea.tsx","css-module:./TapArea.module.css#css-module"],"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   * 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      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 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={() => dispatch({ type: \"MOUSE_ENTER\" })}\n        onMouseLeave={() => dispatch({ type: \"MOUSE_LEAVE\" })}\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\"}"],"mappings":";;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,gBAAgB;;;ACNuE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,aAAY,sBAAqB,YAAW,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,qBAAoB,8BAA6B;;;ADiIlT,SAuBI,KAvBJ;AAxEN,SAAS,QACP,OAIA,QAGA;AACA,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,MAAM;AAAA,IACrC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,UAAU,KAAK;AAAA,IACpC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,KAAK;AAAA,IACnC,KAAK;AACH,aAAO,iCAAK,QAAL,EAAY,SAAS,MAAM;AAAA,IACpC;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,UAAU;AAAA,EACd,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,UAAU,eAAe;AAAA,MACzB,YAAY;AAAA,MACZ;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,IA7FjB,IAqFI,IASK,+BATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAChC,UAAM,CAAC,EAAE,SAAS,SAAS,GAAG,QAAQ,IAAI,WAAW,SAAS;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,cAAuD,CAAC,UAAU;AACtE,UAAI,UAAU;AAAA,MAEd,OAAO;AACL,cAAM,cAAc,KAAK;AACzB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,gBAA4D,CAChE,UACG;AACH,UAAI;AAAU;AACd,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAM,eAAe;AACrB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,sBAAsB,CAAC,aAAa,WAAW;AACrD,UAAM,kBACJ,aAAa,UAAU,wBAAe,WAAW,UAAU;AAE7D,WACE;AAAA,MAAC;AAAA,uCACK,qBADL;AAAA,QAEC,iBAAe,YAAY,mBAAmB,eAAe;AAAA,QAC7D,cAAY,kDAAsB,mBAAmB,YAAY;AAAA,QACjE,WAAW;AAAA,UACT,uBAAO;AAAA,UACP,uBAAO,GAAG,WAAW,aAAa,WAAW;AAAA,UAC7C,aAAa,uBAAO;AAAA,UACpB,uBAAuB,uBAAO;AAAA,UAC9B;AAAA,QACF;AAAA,QACA,eAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,cAAc,MAAM,SAAS,EAAE,MAAM,cAAc,CAAC;AAAA,QACpD,SAAS,MAAM,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,QACzC,QAAQ,MAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,QACvC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,SAAY;AAAA,QAEhC;AAAA,WAAC,aAAa,WAAW,aACxB,oBAAC,SAAI,WAAW,WAAW,uBAAO,SAAS,eAAe,GAAG;AAAA,UAE9D;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;AAEtB,IAAO,kBAAQ;","names":[]}

package/dist/__chunks/JKXOZUCV.js

@@ -0,0 +1,52 @@
+import {
+  layout_module_default
+} from "./PTWXXDFF.js";
+import {
+  Box_module_default
+} from "./KMIZI5PW.js";
+import {
+  Typography_default
+} from "./B2TFERTM.js";
+
+// src/RichSelect/RichSelectSection.tsx
+import { forwardRef } from "react";
+import {
+  Section as ReactAriaSection,
+  Header as ReactAriaHeader,
+  Collection as ReactAriaCollection
+} from "react-aria-components";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RichSelectSection_default = forwardRef(
+  function RichSelectSection(props, ref) {
+    const {
+      "data-testid": dataTestId,
+      label,
+      children,
+      orientation = "horizontal"
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      ReactAriaSection,
+      {
+        ref,
+        "data-testid": dataTestId,
+        className: classNames(
+          [Box_module_default.box, Box_module_default.flex, Box_module_default.flexWrap, Box_module_default.gap3],
+          {
+            [Box_module_default.row]: orientation === "horizontal",
+            [Box_module_default.column]: orientation === "vertical"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(ReactAriaHeader, { className: classNames(layout_module_default.fullWidth), children: /* @__PURE__ */ jsx(Typography_default, { children: label }) }),
+          /* @__PURE__ */ jsx(ReactAriaCollection, { children })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  RichSelectSection_default
+};
+//# sourceMappingURL=JKXOZUCV.js.map

package/dist/__chunks/JKXOZUCV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectSection.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement } from \"react\";\nimport {\n  Section as ReactAriaSection,\n  Header as ReactAriaHeader,\n  Collection as ReactAriaCollection,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport Typography from \"../Typography/Typography\";\n\ntype RichSelectSectionProps = {\n  \"data-testid\"?: string;\n  label: string;\n  children: ReactElement | ReactElement[];\n  orientation?: \"horizontal\" | \"vertical\";\n};\n\nexport default forwardRef<HTMLDivElement, RichSelectSectionProps>(\n  function RichSelectSection(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      label,\n      children,\n      orientation = \"horizontal\",\n    } = props;\n\n    return (\n      <ReactAriaSection\n        ref={ref}\n        data-testid={dataTestId}\n        className={classNames(\n          [boxStyles.box, boxStyles.flex, boxStyles.flexWrap, boxStyles.gap3],\n          {\n            [boxStyles.row]: orientation === \"horizontal\",\n            [boxStyles.column]: orientation === \"vertical\",\n          },\n        )}\n      >\n        <ReactAriaHeader className={classNames(layoutStyles.fullWidth)}>\n          <Typography>{label}</Typography>\n        </ReactAriaHeader>\n        <ReactAriaCollection>{children}</ReactAriaCollection>\n      </ReactAriaSection>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAqC;AACrD;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,OACT;AACP,OAAO,gBAAgB;AAsBjB,SAYI,KAZJ;AAVN,IAAO,4BAAQ;AAAA,EACb,SAAS,kBAAkB,OAAO,KAAmB;AACnD,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT,CAAC,mBAAU,KAAK,mBAAU,MAAM,mBAAU,UAAU,mBAAU,IAAI;AAAA,UAClE;AAAA,YACE,CAAC,mBAAU,GAAG,GAAG,gBAAgB;AAAA,YACjC,CAAC,mBAAU,MAAM,GAAG,gBAAgB;AAAA,UACtC;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,mBAAgB,WAAW,WAAW,sBAAa,SAAS,GAC3D,8BAAC,sBAAY,iBAAM,GACrB;AAAA,UACA,oBAAC,uBAAqB,UAAS;AAAA;AAAA;AAAA,IACjC;AAAA,EAEJ;AACF;","names":[]}