@kaizen/components 1.25.0 → 1.27.0

package/dist/esm/__future__/Select/Select.mjs

@@ -0,0 +1,124 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId } from 'react';
+import { useButton } from '@react-aria/button';
+import { useSelect, HiddenSelect } from '@react-aria/select';
+import { useSelectState } from '@react-stately/select';
+import classnames from 'classnames';
+import { FieldMessage } from '../../FieldMessage/FieldMessage.mjs';
+import { Popover } from '../../MultiSelect/subcomponents/Popover/Popover.mjs';
+import { useFloating } from '@floating-ui/react-dom';
+import { SelectProvider } from './context/SelectContext.mjs';
+import { ListBox } from './subcomponents/ListBox/ListBox.mjs';
+import { ListBoxSection } from './subcomponents/ListBoxSection/ListBoxSection.mjs';
+import { ListItem } from './subcomponents/ListItem/ListItem.mjs';
+import './subcomponents/ListItems/ListItems.mjs';
+import { Option } from './subcomponents/Option/Option.mjs';
+import './subcomponents/Overlay/Overlay.mjs';
+import { SectionDivider } from './subcomponents/SectionDivider/SectionDivider.mjs';
+import { SelectPopoverContents } from './subcomponents/SelectPopoverContents/SelectPopoverContents.mjs';
+import { SelectToggle } from './subcomponents/SelectToggle/SelectToggle.mjs';
+import { getDisabledKeysFromItems } from './utils/getDisabledKeysFromItems.mjs';
+import { transformSelectItemToCollectionElement } from './utils/transformSelectItemToCollectionElement.mjs';
+import styles from './Select.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
+ */
+const Select = /*#__PURE__*/function () {
+  const Select = function (_a) {
+    var _b;
+    var label = _a.label,
+      items = _a.items,
+      propsId = _a.id,
+      trigger = _a.trigger,
+      children = _a.children,
+      status = _a.status,
+      validationMessage = _a.validationMessage,
+      isReversed = _a.isReversed,
+      isFullWidth = _a.isFullWidth,
+      disabledValues = _a.disabledValues,
+      classNameOverride = _a.classNameOverride,
+      selectedKey = _a.selectedKey,
+      description = _a.description,
+      placeholder = _a.placeholder,
+      isDisabled = _a.isDisabled,
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled"]);
+    var refs = useFloating().refs;
+    var triggerRef = refs.reference;
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var descriptionId = "".concat(id, "--description");
+    var disabledKeys = getDisabledKeysFromItems(items);
+    var ariaSelectProps = __assign({
+      label: label,
+      items: items,
+      children: transformSelectItemToCollectionElement,
+      disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys,
+      selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey,
+      description: description,
+      placeholder: placeholder,
+      isDisabled: isDisabled
+    }, restProps);
+    var state = useSelectState(ariaSelectProps);
+    var _c = useSelect(ariaSelectProps, state, triggerRef),
+      labelProps = _c.labelProps,
+      triggerProps = _c.triggerProps,
+      valueProps = _c.valueProps,
+      menuProps = _c.menuProps,
+      errorMessageProps = _c.errorMessageProps,
+      descriptionProps = _c.descriptionProps;
+    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    var selectToggleProps = __assign(__assign({}, buttonProps), {
+      label: label,
+      labelProps: labelProps,
+      value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
+      valueProps: valueProps,
+      isOpen: state.isOpen,
+      placeholder: placeholder,
+      status: status,
+      isDisabled: triggerProps.isDisabled,
+      isReversed: isReversed,
+      ref: refs.setReference
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(!isFullWidth && styles.notFullWidth, classNameOverride)
+    }, /*#__PURE__*/React.createElement(HiddenSelect, {
+      label: label,
+      name: id,
+      state: state,
+      triggerRef: triggerRef
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.container
+    }, trigger === undefined ? /*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps)) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && /*#__PURE__*/React.createElement(Popover, {
+      refs: refs,
+      focusOnProps: {
+        onEscapeKey: state.close,
+        onClickOutside: state.close,
+        noIsolation: true
+      }
+    }, /*#__PURE__*/React.createElement(SelectProvider, {
+      state: state
+    }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
+      menuProps: menuProps
+    }, children)))), validationMessage && /*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
+      message: validationMessage,
+      status: status,
+      reversed: isReversed
+    })), description && /*#__PURE__*/React.createElement(FieldMessage, __assign({}, descriptionProps, {
+      id: descriptionId,
+      message: description,
+      reversed: isReversed
+    })));
+  };
+  Select.displayName = "Select";
+  Select.Section = ListBoxSection;
+  Select.SectionDivider = SectionDivider;
+  Select.Option = Option;
+  Select.ItemDefaultRender = ListItem;
+  // @deprecated Legacy exported aliases
+  Select.TriggerButton = SelectToggle;
+  Select.ListBox = ListBox;
+  return Select;
+}();
+export { Select };
+//# sourceMappingURL=Select.mjs.map

package/dist/esm/__future__/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../../../src/__future__/Select/Select.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { UseFloatingReturn } from \"@floating-ui/react-dom\"\nimport { useButton } from \"@react-aria/button\"\nimport { HiddenSelect, useSelect } from \"@react-aria/select\"\nimport {\n  useSelectState,\n  SelectProps as AriaSelectProps,\n} from \"@react-stately/select\"\nimport classnames from \"classnames\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport {\n  Popover,\n  useFloating,\n} from \"~components/MultiSelect/subcomponents/Popover\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { SelectProvider } from \"./context\"\nimport {\n  ListBox,\n  ListBoxSection,\n  ListItem,\n  Option,\n  SectionDivider,\n  SelectPopoverContents,\n  SelectPopoverContentsProps,\n  SelectToggle,\n  SelectToggleProps,\n} from \"./subcomponents\"\nimport { SelectItem, SelectOption } from \"./types\"\nimport { getDisabledKeysFromItems } from \"./utils/getDisabledKeysFromItems\"\nimport { transformSelectItemToCollectionElement } from \"./utils/transformSelectItemToCollectionElement\"\nimport styles from \"./Select.module.scss\"\n\ntype OmittedAriaSelectProps = \"children\" | \"items\"\n\nexport type SelectProps<Option extends SelectOption = SelectOption> = {\n  /**\n   * Item objects in the collection.\n   */\n  items: Array<SelectItem<Option>>\n  id?: string\n  trigger?: (\n    selectToggleProps: SelectToggleProps & {\n      ref: UseFloatingReturn<HTMLButtonElement>[\"refs\"][\"setReference\"]\n    },\n    // @deprecated: This arg is unnecessary now, but provided for legacy usages\n    ref: UseFloatingReturn<HTMLButtonElement>[\"refs\"][\"setReference\"]\n  ) => JSX.Element\n  children?: SelectPopoverContentsProps<Option>[\"children\"]\n  /**\n   * Updates the styling of the validation FieldMessage.\n   */\n  status?: \"error\" | \"caution\"\n  /**\n   * A descriptive message for the 'status' states.\n   */\n  validationMessage?: React.ReactNode | undefined\n  /**\n   * Use the `reversed` styles.\n   */\n  isReversed?: boolean\n  /**\n   * Use the `fullWidth` styles.\n   */\n  isFullWidth?: boolean\n  /**\n   * @deprecated: Either define `disabled` in your `Option` (in `items`), or use `disabledKeys`\n   */\n  disabledValues?: React.Key[]\n} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>\n\n/**\n * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |\n * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}\n */\nexport const Select = <Option extends SelectOption = SelectOption>({\n  label,\n  items,\n  id: propsId,\n  trigger,\n  children,\n  status,\n  validationMessage,\n  isReversed,\n  isFullWidth,\n  disabledValues,\n  classNameOverride,\n  selectedKey,\n  description,\n  placeholder,\n  isDisabled,\n  ...restProps\n}: SelectProps<Option>): JSX.Element => {\n  const { refs } = useFloating<HTMLButtonElement>()\n  const triggerRef = refs.reference\n\n  const id = propsId ?? useId()\n  const descriptionId = `${id}--description`\n\n  const disabledKeys = getDisabledKeysFromItems(items)\n\n  const ariaSelectProps: AriaSelectProps<SelectItem<Option>> = {\n    label,\n    items,\n    children: transformSelectItemToCollectionElement,\n    disabledKeys: disabledValues ?? disabledKeys,\n    selectedKey:\n      typeof selectedKey === \"number\" ? selectedKey.toString() : selectedKey,\n    description,\n    placeholder,\n    isDisabled,\n    ...restProps,\n  }\n\n  const state = useSelectState(ariaSelectProps)\n\n  const {\n    labelProps,\n    triggerProps,\n    valueProps,\n    menuProps,\n    errorMessageProps,\n    descriptionProps,\n  } = useSelect(ariaSelectProps, state, triggerRef)\n\n  const { buttonProps } = useButton(triggerProps, triggerRef)\n  const selectToggleProps = {\n    ...buttonProps,\n    label,\n    labelProps,\n    value: state?.selectedItem?.rendered,\n    valueProps,\n    isOpen: state.isOpen,\n    placeholder,\n    status,\n    isDisabled: triggerProps.isDisabled,\n    isReversed,\n    ref: refs.setReference,\n  }\n\n  return (\n    <div\n      className={classnames(\n        !isFullWidth && styles.notFullWidth,\n        classNameOverride\n      )}\n    >\n      <HiddenSelect\n        label={label}\n        name={id}\n        state={state}\n        triggerRef={triggerRef}\n      />\n\n      <div className={styles.container}>\n        {trigger === undefined ? (\n          <SelectToggle {...selectToggleProps} />\n        ) : (\n          trigger(selectToggleProps, selectToggleProps.ref)\n        )}\n        {state.isOpen && (\n          <Popover\n            refs={refs}\n            focusOnProps={{\n              onEscapeKey: state.close,\n              onClickOutside: state.close,\n              noIsolation: true,\n            }}\n          >\n            <SelectProvider<Option> state={state}>\n              <SelectPopoverContents menuProps={menuProps}>\n                {children}\n              </SelectPopoverContents>\n            </SelectProvider>\n          </Popover>\n        )}\n      </div>\n\n      {validationMessage && (\n        <FieldMessage\n          {...errorMessageProps}\n          message={validationMessage}\n          status={status}\n          reversed={isReversed}\n        />\n      )}\n\n      {description && (\n        <FieldMessage\n          {...descriptionProps}\n          id={descriptionId}\n          message={description}\n          reversed={isReversed}\n        />\n      )}\n    </div>\n  )\n}\n\nSelect.displayName = \"Select\"\n\nSelect.Section = ListBoxSection\nSelect.SectionDivider = SectionDivider\nSelect.Option = Option\nSelect.ItemDefaultRender = ListItem\n\n// @deprecated Legacy exported aliases\nSelect.TriggerButton = SelectToggle\nSelect.ListBox = ListBox\n"],"names":["Select","_a","label","items","propsId","id","trigger","children","status","validationMessage","isReversed","isFullWidth","disabledValues","classNameOverride","selectedKey","description","placeholder","isDisabled","restProps","__rest","refs","useFloating","triggerRef","reference","useId","descriptionId","concat","disabledKeys","getDisabledKeysFromItems","ariaSelectProps","transformSelectItemToCollectionElement","toString","state","useSelectState","_c","useSelect","labelProps","triggerProps","valueProps","menuProps","errorMessageProps","descriptionProps","buttonProps","useButton","selectToggleProps","__assign","value","selectedItem","_b","rendered","isOpen","ref","setReference","React","createElement","className","classnames","styles","notFullWidth","HiddenSelect","name","container","undefined","SelectToggle","Popover","focusOnProps","onEscapeKey","close","onClickOutside","noIsolation","SelectProvider","SelectPopoverContents","FieldMessage","message","reversed","displayName","Section","ListBoxSection","SectionDivider","Option","ItemDefaultRender","ListItem","TriggerButton","ListBox"],"mappings":"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"}

package/dist/esm/__future__/Select/Select.module.scss.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "container": "Select-module_container__TaMKg",
+  "notFullWidth": "Select-module_notFullWidth__Mr-3G"
+};
+export { styles as default };
+//# sourceMappingURL=Select.module.scss.mjs.map

package/dist/esm/__future__/Select/Select.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/__future__/Select/context/SelectContext.mjs

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+var SelectContext = /*#__PURE__*/React.createContext(null);
+var useSelectContext = function () {
+  var context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("useSelectContext must be used within the SelectContext.Provider");
+  }
+  return context;
+};
+var SelectProvider = function (_a) {
+  var children = _a.children,
+    state = _a.state;
+  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
+    value: {
+      state: state
+    }
+  }, children);
+};
+export { SelectProvider, useSelectContext };
+//# sourceMappingURL=SelectContext.mjs.map

package/dist/esm/__future__/Select/context/SelectContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContext.mjs","sources":["../../../../../src/__future__/Select/context/SelectContext.tsx"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { SelectState } from \"@react-stately/select\"\nimport { SelectItem, SelectOption } from \"../types\"\n\n// We set the generic default value to `any` as SelectContext\n// is instantiated as a constant which does not accept generics.\ntype SelectContextValue<Option extends SelectOption = any> = {\n  state: SelectState<SelectItem<Option>>\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null)\n\nexport const useSelectContext = <\n  Option extends SelectOption = SelectOption,\n>(): SelectContextValue<Option> => {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw new Error(\n      \"useSelectContext must be used within the SelectContext.Provider\"\n    )\n  }\n\n  return context\n}\n\ntype SelectProviderProps<Option extends SelectOption> = {\n  children: React.ReactNode\n  state: SelectState<SelectItem<Option>>\n}\n\nexport const SelectProvider = <Option extends SelectOption = SelectOption>({\n  children,\n  state,\n}: SelectProviderProps<Option>): JSX.Element => (\n  <SelectContext.Provider value={{ state }}>{children}</SelectContext.Provider>\n)\n"],"names":["SelectContext","React","createContext","useSelectContext","context","useContext","Error","SelectProvider","_a","children","state","createElement","Provider","value"],"mappings":";AAUA,IAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAa,CAA4B,IAAI,CAAC;AAE7D,IAAAC,gBAAgB,GAAG,SAAAA,CAAA,EAAA;EAG9B,IAAMC,OAAO,GAAGC,UAAU,CAACL,aAAa,CAAC;EAEzC,IAAI,CAACI,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CACb,iEAAiE,CAClE;EACF;EAED,OAAOF,OAAO;AAChB,CAAC;AAOM,IAAMG,cAAc,GAAG,SAAAA,CAA6CC,EAG7C,EAAA;MAF5BC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;IACRC,KAAK,GAAAF,EAAA,CAAAE,KAAA;EACyC,oBAC9CT,KAAA,CAAAU,aAAA,CAACX,aAAa,CAACY,QAAQ,EAAC;IAAAC,KAAK,EAAE;MAAEH,KAAK,EAAAA;;EAAK,CAAA,EAAAD,QAAQ,CAA0B;AAD/B,CAAA;"}

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs

@@ -0,0 +1,28 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { useListBox } from '@react-aria/listbox';
+import classnames from 'classnames';
+import { useSelectContext } from '../../context/SelectContext.mjs';
+import styles from './ListBox.module.scss.mjs';
+const ListBox = /*#__PURE__*/function () {
+  const ListBox = function (_a) {
+    var children = _a.children,
+      menuProps = _a.menuProps,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
+    var state = useSelectContext().state;
+    var ref = React.useRef(null);
+    var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
+      disallowEmptySelection: true,
+      autoFocus: "first"
+    }), state, ref).listBoxProps;
+    return /*#__PURE__*/React.createElement("ul", __assign({
+      ref: ref,
+      className: classnames(styles.listBox, classNameOverride)
+    }, listBoxProps, restProps), children);
+  };
+  ListBox.displayName = "ListBox";
+  return ListBox;
+}();
+export { ListBox };
+//# sourceMappingURL=ListBox.mjs.map

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/ListBox/ListBox.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { AriaListBoxOptions, useListBox } from \"@react-aria/listbox\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { useSelectContext } from \"../../context\"\nimport { SelectOption, SelectItem } from \"../../types\"\nimport styles from \"./ListBox.module.scss\"\n\nexport type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<\n  HTMLAttributes<HTMLUListElement>\n> & {\n  children: React.ReactNode\n  /** Props for the popup. */\n  menuProps: AriaListBoxOptions<SelectItem<Option>>\n}\n\nexport const ListBox = <Option extends SelectOption>({\n  children,\n  menuProps,\n  classNameOverride,\n  ...restProps\n}: SingleListBoxProps<Option>): JSX.Element => {\n  const { state } = useSelectContext<Option>()\n  const ref = React.useRef<HTMLUListElement>(null)\n  const { listBoxProps } = useListBox(\n    { ...menuProps, disallowEmptySelection: true, autoFocus: \"first\" },\n    state,\n    ref\n  )\n\n  return (\n    <ul\n      ref={ref}\n      className={classnames(styles.listBox, classNameOverride)}\n      {...listBoxProps}\n      {...restProps}\n    >\n      {children}\n    </ul>\n  )\n}\n\nListBox.displayName = \"ListBox\"\n"],"names":["ListBox","_a","children","menuProps","classNameOverride","restProps","__rest","state","useSelectContext","ref","React","useRef","listBoxProps","useListBox","disallowEmptySelection","autoFocus","createElement","__assign","className","classnames","styles","listBox","displayName"],"mappings":";;;;;;MAgBaA,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAA8BC,EAKxB,EAAA;IAJ3B,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRC,SAAS,GAAAF,EAAA,CAAAE,SAAA;MACTC,iBAAiB,GAAAH,EAAA,CAAAG,iBAAA;MACdC,SAAS,GAJuCC,MAAA,CAAAL,EAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,mBAAA,CAKpD,CADa;IAEJ,IAAAM,KAAK,GAAKC,gBAAgB,CAAU,CAAA,MAA/B;IACb,IAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;IACxC,IAAAC,YAAY,GAAKC,UAAU,uBAC5BV,SAAS,CAAA,EAAA;MAAEW,sBAAsB,EAAE,IAAI;MAAEC,SAAS,EAAE;IACzD,CAAA,CAAA,EAAAR,KAAK,EACLE,GAAG,CACJ,aAJmB;IAMpB,oBACEC,KACE,CAAAM,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;MAAAR,GAAG,EAAEA,GAAG;MACRS,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAO,EAAEjB,iBAAiB;IAAC,CAAA,EACpDQ,YAAY,EACZP,SAAS,CAEZ,EAAAH,QAAQ,CACN;EAET,CAAC;EAEDF,OAAO,CAACsB,WAAW,GAAG,SAAS;EAAA,OA1BlBtB,OAAO;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "listBox": "ListBox-module_listBox__Uf6Mc",
+  "focus": "ListBox-module_focus__yrwu3"
+};
+export { styles as default };
+//# sourceMappingURL=ListBox.module.scss.mjs.map

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs

@@ -0,0 +1,37 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { useListBoxSection } from '@react-aria/listbox';
+import { Heading } from '@kaizen/typography';
+import { Option } from '../Option/Option.mjs';
+import styles from './ListBoxSection.module.scss.mjs';
+const ListBoxSection = /*#__PURE__*/function () {
+  const ListBoxSection = function (_a) {
+    var section = _a.section;
+    var _b = useListBoxSection({
+        heading: section.rendered,
+        "aria-label": section["aria-label"]
+      }),
+      itemProps = _b.itemProps,
+      headingProps = _b.headingProps,
+      groupProps = _b.groupProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", __assign({}, itemProps, {
+      className: styles.sectionWrapper
+    }), section.rendered && /*#__PURE__*/React.createElement(Heading, __assign({
+      tag: "span",
+      variant: "heading-6"
+    }, headingProps, {
+      classNameOverride: styles.sectionHeading
+    }), section.rendered), /*#__PURE__*/React.createElement("ul", __assign({}, groupProps, {
+      className: styles.sectionList
+    }), Array.from(section.childNodes).map(function (item) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: item.key,
+        item: item
+      });
+    }))));
+  };
+  ListBoxSection.displayName = "ListBoxSection";
+  return ListBoxSection;
+}();
+export { ListBoxSection };
+//# sourceMappingURL=ListBoxSection.mjs.map

package/dist/esm/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxSection.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.tsx"],"sourcesContent":["import React from \"react\"\nimport { useListBoxSection } from \"@react-aria/listbox\"\nimport { Heading } from \"@kaizen/typography\"\nimport { SelectOption, SelectOptionGroupNode } from \"../../types\"\nimport { Option } from \"../Option/Option\"\nimport styles from \"./ListBoxSection.module.scss\"\n\nexport type ListBoxSectionProps<Option extends SelectOption> = {\n  section: SelectOptionGroupNode<Option>\n}\n\nexport const ListBoxSection = <Option extends SelectOption = SelectOption>({\n  section,\n}: ListBoxSectionProps<Option>): JSX.Element => {\n  const { itemProps, headingProps, groupProps } = useListBoxSection({\n    heading: section.rendered,\n    \"aria-label\": section[\"aria-label\"],\n  })\n\n  return (\n    <>\n      <li {...itemProps} className={styles.sectionWrapper}>\n        {section.rendered && (\n          <Heading\n            tag=\"span\"\n            variant=\"heading-6\"\n            {...headingProps}\n            classNameOverride={styles.sectionHeading}\n          >\n            {section.rendered}\n          </Heading>\n        )}\n        <ul {...groupProps} className={styles.sectionList}>\n          {Array.from(section.childNodes).map(item => (\n            <Option key={item.key} item={item} />\n          ))}\n        </ul>\n      </li>\n    </>\n  )\n}\n\nListBoxSection.displayName = \"ListBoxSection\"\n"],"names":["ListBoxSection","_a","section","_b","useListBoxSection","heading","rendered","itemProps","headingProps","groupProps","React","createElement","Fragment","__assign","className","styles","sectionWrapper","Heading","tag","variant","classNameOverride","sectionHeading","sectionList","Array","from","childNodes","map","item","Option","key","displayName"],"mappings":";;;;;;MAWaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAA6CC,EAE7C,EAAA;IAD5B,IAAAC,OAAO,GAAAD,EAAA,CAAAC,OAAA;IAED,IAAAC,EAAA,GAA0CC,iBAAiB,CAAC;QAChEC,OAAO,EAAEH,OAAO,CAACI,QAAQ;QACzB,YAAY,EAAEJ,OAAO,CAAC,YAAY;OACnC,CAAC;MAHMK,SAAS,GAAAJ,EAAA,CAAAI,SAAA;MAAEC,YAAY,GAAAL,EAAA,CAAAK,YAAA;MAAEC,UAAU,GAAAN,EAAA,CAAAM,UAGzC;IAEF,oBACEC,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,eACEF,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAAE,QAAA,CAAA,CAAA,CAAA,EAAQN,SAAS,EAAE;MAAAO,SAAS,EAAEC,MAAM,CAACC;KAAc,CAAA,EAChDd,OAAO,CAACI,QAAQ,iBACfI,KAAA,CAAAC,aAAA,CAACM,OAAO,EAAAJ,QAAA,CAAA;MACNK,GAAG,EAAC,MAAM;MACVC,OAAO,EAAC;KAAW,EACfX,YAAY,EAAA;MAChBY,iBAAiB,EAAEL,MAAM,CAACM;KAAc,CAAA,EAEvCnB,OAAO,CAACI,QAAQ,CAEpB,eACDI,KAAQ,CAAAC,aAAA,CAAA,IAAA,EAAAE,QAAA,CAAA,CAAA,CAAA,EAAAJ,UAAU;MAAEK,SAAS,EAAEC,MAAM,CAACO;QACnCC,KAAK,CAACC,IAAI,CAACtB,OAAO,CAACuB,UAAU,CAAC,CAACC,GAAG,CAAC,UAAAC,IAAI,EAAA;MAAI,oBAC1CjB,KAAA,CAAAC,aAAA,CAACiB,MAAM,EAAC;QAAAC,GAAG,EAAEF,IAAI,CAACE,GAAG;QAAEF,IAAI,EAAEA;MAAI,CAAA,CAAI;IACtC,CAAA,CAAC,CACC,CACF,CACJ;EAEP,CAAC;EAED3B,cAAc,CAAC8B,WAAW,GAAG,gBAAgB;EAAA,OA/BhC9B,cAAc;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.module.scss.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "sectionWrapper": "ListBoxSection-module_sectionWrapper__2jPgd",
+  "sectionHeading": "ListBoxSection-module_sectionHeading__o6WzT",
+  "sectionList": "ListBoxSection-module_sectionList__lJ35F"
+};
+export { styles as default };
+//# sourceMappingURL=ListBoxSection.module.scss.mjs.map

package/dist/esm/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxSection.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/__future__/Select/subcomponents/ListItem/ListItem.mjs

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ListBoxSection } from '../ListBoxSection/ListBoxSection.mjs';
+import { Option } from '../Option/Option.mjs';
+const ListItem = /*#__PURE__*/function () {
+  const ListItem = function (_a) {
+    var item = _a.item;
+    return item.type === "section" ? /*#__PURE__*/React.createElement(ListBoxSection, {
+      key: item.key,
+      section: item
+    }) : /*#__PURE__*/React.createElement(Option, {
+      key: item.key,
+      item: item
+    });
+  };
+  ListItem.displayName = "ListItem";
+  return ListItem;
+}();
+export { ListItem };
+//# sourceMappingURL=ListItem.mjs.map

package/dist/esm/__future__/Select/subcomponents/ListItem/ListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/ListItem/ListItem.tsx"],"sourcesContent":["import React from \"react\"\nimport { SelectItemNode, SelectOption } from \"../../types\"\nimport { ListBoxSection } from \"../ListBoxSection\"\nimport { Option } from \"../Option\"\n\nexport type ListItemProps<Option extends SelectOption = SelectOption> = {\n  item: SelectItemNode<Option>\n}\n\nexport const ListItem = <Option extends SelectOption = SelectOption>({\n  item,\n}: ListItemProps<Option>): JSX.Element =>\n  item.type === \"section\" ? (\n    <ListBoxSection<Option> key={item.key} section={item} />\n  ) : (\n    <Option<Option> key={item.key} item={item} />\n  )\n\nListItem.displayName = \"ListItem\"\n"],"names":["ListItem","_a","item","type","React","createElement","ListBoxSection","key","section","Option","displayName"],"mappings":";;;MASaA,QAAQ;EAAA,MAARA,QAAQ,GAAG,SAAAA,CAA6CC,EAE7C,EAAA;IADtB,IAAAC,IAAI,GAAAD,EAAA,CAAAC,IAAA;IAEJ,OAAAA,IAAI,CAACC,IAAI,KAAK,SAAS,gBACrBC,KAAC,CAAAC,aAAA,CAAAC,cAAc;MAASC,GAAG,EAAEL,IAAI,CAACK,GAAG;MAAEC,OAAO,EAAEN;IAAI,CAAA,CAAI,gBAExDE,KAAA,CAAAC,aAAA,CAACI,MAAM,EAAS;MAAAF,GAAG,EAAEL,IAAI,CAACK,GAAG;MAAEL,IAAI,EAAEA;IAAI,EAC1C;EAJD,CAIC;EAEHF,QAAQ,CAACU,WAAW,GAAG,UAAU;EAAA,OATpBV,QAAQ;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/ListItems/ListItems.mjs

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ListItem } from '../ListItem/ListItem.mjs';
+
+/*
+ * Default rendered list of select items
+ */
+const ListItems = /*#__PURE__*/function () {
+  const ListItems = function (_a) {
+    var items = _a.items;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (item) {
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: item.key,
+        item: item
+      });
+    }));
+  };
+  ListItems.displayName = "ListItems";
+  return ListItems;
+}();
+export { ListItems };
+//# sourceMappingURL=ListItems.mjs.map

package/dist/esm/__future__/Select/subcomponents/ListItems/ListItems.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItems.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/ListItems/ListItems.tsx"],"sourcesContent":["import React from \"react\"\nimport { SelectOption } from \"../../types\"\nimport { ListItem, ListItemProps } from \"../ListItem\"\n\nexport type ListItemsProps<Option extends SelectOption> = {\n  items: Array<ListItemProps<Option>[\"item\"]>\n}\n\n/*\n * Default rendered list of select items\n */\nexport const ListItems = <Option extends SelectOption>({\n  items,\n}: ListItemsProps<Option>): JSX.Element => (\n  <>\n    {items.map(item => (\n      <ListItem<Option> key={item.key} item={item} />\n    ))}\n  </>\n)\n\nListItems.displayName = \"ListItems\"\n"],"names":["ListItems","_a","items","React","createElement","Fragment","map","item","ListItem","key","displayName"],"mappings":";;;AAQA;;AAEG;AAFH,MAGaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAA8BC,EAE9B,EAAA;IADvB,IAAAC,KAAK,GAAAD,EAAA,CAAAC,KAAA;IACoC,oBACzCC,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,EACGH,KAAK,CAACI,GAAG,CAAC,UAAAC,IAAI,EAAI;MAAA,oBACjBJ,KAAA,CAAAC,aAAA,CAACI,QAAQ,EAAA;QAASC,GAAG,EAAEF,IAAI,CAACE,GAAG;QAAEF,IAAI,EAAEA;MAAI,CAAA,CAAI;IAChD,CAAA,CAAC,CACD;EALsC,CAM1C;EAEDP,SAAS,CAACU,WAAW,GAAG,WAAW;EAAA,OAVtBV,SAAS;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs

@@ -0,0 +1,43 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { useFocusRing } from '@react-aria/focus';
+import { useOption } from '@react-aria/listbox';
+import { mergeProps } from '@react-aria/utils';
+import classnames from 'classnames';
+import 'uuid';
+import '../../../../Icon/subcomponents/SVG/SVG.mjs';
+import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
+import { useSelectContext } from '../../context/SelectContext.mjs';
+import styles from './Option.module.scss.mjs';
+const Option = /*#__PURE__*/function () {
+  const Option = function (_a) {
+    var item = _a.item,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["item", "classNameOverride"]);
+    var state = useSelectContext().state;
+    var ref = React.useRef(null);
+    var _b = useOption({
+        key: item.key
+      }, state, ref),
+      optionProps = _b.optionProps,
+      isSelected = _b.isSelected,
+      isDisabled = _b.isDisabled;
+    var _c = useFocusRing(),
+      isFocusVisible = _c.isFocusVisible,
+      focusProps = _c.focusProps;
+    return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(optionProps, focusProps, props), {
+      ref: ref,
+      className: classnames(styles.option, isSelected && styles.isSelected, isFocusVisible && styles.isFocusVisible, isDisabled && styles.disabled, classNameOverride),
+      "aria-label": item.textValue
+    }), item.rendered, /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.icon, isSelected && styles.isSelected)
+    }, isSelected && /*#__PURE__*/React.createElement(CheckIcon, {
+      inheritSize: true,
+      role: "presentation"
+    })));
+  };
+  Option.displayName = "Option";
+  return Option;
+}();
+export { Option };
+//# sourceMappingURL=Option.mjs.map

package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/Option/Option.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { useFocusRing } from \"@react-aria/focus\"\nimport { useOption } from \"@react-aria/listbox\"\nimport { mergeProps } from \"@react-aria/utils\"\nimport classnames from \"classnames\"\nimport { CheckIcon } from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { useSelectContext } from \"../../context\"\nimport { SelectOption, SelectOptionNode } from \"../../types\"\nimport styles from \"./Option.module.scss\"\n\nexport type OptionProps<Option extends SelectOption = SelectOption> = {\n  item: SelectOptionNode<Option>\n} & OverrideClassName<Omit<HTMLAttributes<HTMLLIElement>, \"children\">>\n\nexport const Option = <Option extends SelectOption = SelectOption>({\n  item,\n  classNameOverride,\n  ...props\n}: OptionProps<Option>): JSX.Element => {\n  const { state } = useSelectContext<Option>()\n  const ref = React.useRef<HTMLLIElement>(null)\n  const { optionProps, isSelected, isDisabled } = useOption(\n    { key: item.key },\n    state,\n    ref\n  )\n\n  const { isFocusVisible, focusProps } = useFocusRing()\n\n  return (\n    <li\n      {...mergeProps(optionProps, focusProps, props)}\n      ref={ref}\n      className={classnames(\n        styles.option,\n        isSelected && styles.isSelected,\n        isFocusVisible && styles.isFocusVisible,\n        isDisabled && styles.disabled,\n        classNameOverride\n      )}\n      aria-label={item.textValue}\n    >\n      {item.rendered}\n      <span\n        className={classnames(styles.icon, isSelected && styles.isSelected)}\n      >\n        {isSelected && <CheckIcon inheritSize role=\"presentation\" />}\n      </span>\n    </li>\n  )\n}\n\nOption.displayName = \"Option\"\n"],"names":["Option","_a","item","classNameOverride","props","__rest","state","useSelectContext","ref","React","useRef","_b","useOption","key","optionProps","isSelected","isDisabled","_c","useFocusRing","isFocusVisible","focusProps","mergeProps","className","classnames","styles","option","disabled","textValue","rendered","createElement","icon","CheckIcon","inheritSize","role","displayName"],"mappings":";;;;;;;;;;;MAeaA,MAAM;EAAA,MAANA,MAAM,GAAG,SAAAA,CAA6CC,EAI7C,EAAA;IAHpB,IAAAC,IAAI,UAAA;MACJC,iBAAiB,uBAAA;MACdC,KAAK,GAHyDC,MAAA,CAAAJ,EAAA,EAAA,CAAA,MAAA,EAAA,mBAAA,CAIlE,CADS;IAEA,IAAAK,KAAK,GAAKC,gBAAgB,CAAU,CAAA,MAA/B;IACb,IAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAgB,IAAI,CAAC;IACvC,IAAAC,EAAA,GAA0CC,SAAS,CACvD;QAAEC,GAAG,EAAEX,IAAI,CAACW;MAAG,CAAE,EACjBP,KAAK,EACLE,GAAG,CACJ;MAJOM,WAAW,GAAAH,EAAA,CAAAG,WAAA;MAAEC,UAAU,GAAAJ,EAAA,CAAAI,UAAA;MAAEC,UAAU,GAAAL,EAAA,CAAAK,UAI1C;IAEK,IAAAC,EAAA,GAAiCC,YAAY,CAAA,CAAE;MAA7CC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,UAAU,GAAAH,EAAA,CAAAG,UAAmB;IAErD,oBACEX,uCACMY,UAAU,CAACP,WAAW,EAAEM,UAAU,EAAEhB,KAAK,CAAC;MAC9CI,GAAG,EAAEA,GAAG;MACRc,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,MAAM,EACbV,UAAU,IAAIS,MAAM,CAACT,UAAU,EAC/BI,cAAc,IAAIK,MAAM,CAACL,cAAc,EACvCH,UAAU,IAAIQ,MAAM,CAACE,QAAQ,EAC7BvB,iBAAiB,CAClB;MAAA,YAAA,EACWD,IAAI,CAACyB;IAAS,CAAA,CAAA,EAEzBzB,IAAI,CAAC0B,QAAQ,eACdnB,KAAA,CAAAoB,aAAA,CAAA,MAAA,EAAA;MACEP,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACM,IAAI,EAAEf,UAAU,IAAIS,MAAM,CAACT,UAAU;KAEjE,EAAAA,UAAU,iBAAIN,KAAA,CAAAoB,aAAA,CAACE,SAAS,EAAA;MAACC,WAAW,EAAA,IAAA;MAACC,IAAI,EAAC;KAAc,CAAG,CACvD,CACJ;EAET,CAAC;EAEDjC,MAAM,CAACkC,WAAW,GAAG,QAAQ;EAAA,OAtChBlC,MAAM;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/Option/Option.module.scss.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  "icon": "Option-module_icon__i3CDN",
+  "option": "Option-module_option__gPSuE",
+  "isFocusVisible": "Option-module_isFocusVisible__wzfsx",
+  "disabled": "Option-module_disabled__ob1Pw",
+  "isSelected": "Option-module_isSelected__J3Z-z"
+};
+export { styles as default };
+//# sourceMappingURL=Option.module.scss.mjs.map

package/dist/esm/__future__/Select/subcomponents/Option/Option.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/__future__/Select/subcomponents/Overlay/Overlay.mjs

@@ -0,0 +1,40 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { FocusScope } from '@react-aria/focus';
+import { useOverlay, DismissButton } from '@react-aria/overlays';
+import { useSelectContext } from '../../context/SelectContext.mjs';
+const Overlay = /*#__PURE__*/function () {
+  const Overlay = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    var state = useSelectContext().state;
+    // Handle events that should cause the menu to close,
+    // e.g. blur, clicking outside, or pressing the escape key.
+    var overlayRef = React.useRef(null);
+    var overlayProps = useOverlay({
+      isDismissable: true,
+      isOpen: state.isOpen,
+      onClose: state.close
+    }, overlayRef).overlayProps;
+    // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
+    // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
+    // In addition, add hidden <DismissButton> components at the start and end of the list
+    // to allow screen reader users to dismiss the popup easily.
+    return /*#__PURE__*/React.createElement("div", __assign({
+      ref: overlayRef,
+      className: classNameOverride
+    }, overlayProps, restProps), /*#__PURE__*/React.createElement(FocusScope, {
+      autoFocus: true,
+      restoreFocus: true
+    }, /*#__PURE__*/React.createElement(DismissButton, {
+      onDismiss: state.close
+    }), children, /*#__PURE__*/React.createElement(DismissButton, {
+      onDismiss: state.close
+    })));
+  };
+  Overlay.displayName = "Overlay";
+  return Overlay;
+}();
+export { Overlay };
+//# sourceMappingURL=Overlay.mjs.map

package/dist/esm/__future__/Select/subcomponents/Overlay/Overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/Overlay/Overlay.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { FocusScope } from \"@react-aria/focus\"\nimport { useOverlay, DismissButton } from \"@react-aria/overlays\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { useSelectContext } from \"../../context\"\nimport { SelectOption } from \"../../types\"\n\nexport type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {\n  children: React.ReactNode\n}\n\nexport const Overlay = <Option extends SelectOption>({\n  children,\n  classNameOverride,\n  ...restProps\n}: OverlayProps): JSX.Element => {\n  const { state } = useSelectContext<Option>()\n\n  // Handle events that should cause the menu to close,\n  // e.g. blur, clicking outside, or pressing the escape key.\n  const overlayRef = React.useRef<HTMLDivElement>(null)\n  const { overlayProps } = useOverlay(\n    { isDismissable: true, isOpen: state.isOpen, onClose: state.close },\n    overlayRef\n  )\n\n  // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed\n  // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)\n  // In addition, add hidden <DismissButton> components at the start and end of the list\n  // to allow screen reader users to dismiss the popup easily.\n  return (\n    <div\n      ref={overlayRef}\n      className={classNameOverride}\n      {...overlayProps}\n      {...restProps}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n      <FocusScope autoFocus restoreFocus>\n        <DismissButton onDismiss={state.close} />\n        {children}\n        <DismissButton onDismiss={state.close} />\n      </FocusScope>\n    </div>\n  )\n}\n\nOverlay.displayName = \"Overlay\"\n"],"names":["Overlay","_a","children","classNameOverride","restProps","__rest","state","useSelectContext","overlayRef","React","useRef","overlayProps","useOverlay","isDismissable","isOpen","onClose","close","createElement","__assign","ref","className","FocusScope","autoFocus","restoreFocus","DismissButton","onDismiss","displayName"],"mappings":";;;;;MAWaA,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAA8BC,EAItC,EAAA;IAHb,IAAAC,QAAQ,cAAA;MACRC,iBAAiB,uBAAA;MACdC,SAAS,GAHuCC,MAAA,CAAAJ,EAAA,EAAA,CAAA,UAAA,EAAA,mBAAA,CAIpD,CADa;IAEJ,IAAAK,KAAK,GAAKC,gBAAgB,CAAU,CAAA,MAA/B;;;IAIb,IAAMC,UAAU,GAAGC,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;IAC7C,IAAAC,YAAY,GAAKC,UAAU,CACjC;MAAEC,aAAa,EAAE,IAAI;MAAEC,MAAM,EAAER,KAAK,CAACQ,MAAM;MAAEC,OAAO,EAAET,KAAK,CAACU;IAAO,CAAA,EACnER,UAAU,CACX,CAAAG,YAHmB;;;;;IASpB,oBACEF,KAAA,CAAAQ,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;MACEC,GAAG,EAAEX,UAAU;MACfY,SAAS,EAAEjB;KAAiB,EACxBQ,YAAY,EACZP,SAAS,CAAA,eAGbK,KAAA,CAAAQ,aAAA,CAACI,UAAU,EAAA;MAACC,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA;IAAA,CAAA,eAChCd,KAAA,CAAAQ,aAAA,CAACO,aAAa,EAAC;MAAAC,SAAS,EAAEnB,KAAK,CAACU;KAAS,CAAA,EACxCd,QAAQ,eACTO,KAAC,CAAAQ,aAAA,CAAAO,aAAa,EAAC;MAAAC,SAAS,EAAEnB,KAAK,CAACU;IAAK,CAAI,CAAA,CAC9B,CACT;EAEV,CAAC;EAEDhB,OAAO,CAAC0B,WAAW,GAAG,SAAS;EAAA,OApClB1B,OAAO;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/SectionDivider/SectionDivider.mjs

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider } from '@kaizen/draft-divider';
+import styles from './SectionDivider.module.scss.mjs';
+const SectionDivider = /*#__PURE__*/function () {
+  const SectionDivider = function () {
+    return /*#__PURE__*/React.createElement(Divider, {
+      classNameOverride: styles.divider,
+      variant: "canvas"
+    });
+  };
+  SectionDivider.displayName = "SectionDivider";
+  return SectionDivider;
+}();
+export { SectionDivider };
+//# sourceMappingURL=SectionDivider.mjs.map

package/dist/esm/__future__/Select/subcomponents/SectionDivider/SectionDivider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/SectionDivider/SectionDivider.tsx"],"sourcesContent":["import React from \"react\"\nimport { Divider } from \"@kaizen/draft-divider\"\nimport styles from \"./SectionDivider.module.scss\"\n\nexport const SectionDivider = (): JSX.Element => (\n  <Divider classNameOverride={styles.divider} variant=\"canvas\" />\n)\n\nSectionDivider.displayName = \"SectionDivider\"\n"],"names":["SectionDivider","React","createElement","Divider","classNameOverride","styles","divider","variant","displayName"],"mappings":";;;MAIaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAAA;IAAmB,oBAC/CC,KAAC,CAAAC,aAAA,CAAAC,OAAO,EAAC;MAAAC,iBAAiB,EAAEC,MAAM,CAACC,OAAO;MAAEC,OAAO,EAAC;IAAQ,CAAG,CAAA;EAChE,CAAA;EAEDP,cAAc,CAACQ,WAAW,GAAG,gBAAgB;EAAA,OAJhCR,cAAc;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/SectionDivider/SectionDivider.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "divider": "SectionDivider-module_divider__qtq-c"
+};
+export { styles as default };
+//# sourceMappingURL=SectionDivider.module.scss.mjs.map

package/dist/esm/__future__/Select/subcomponents/SectionDivider/SectionDivider.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useSelectContext } from '../../context/SelectContext.mjs';
+import { ListBox } from '../ListBox/ListBox.mjs';
+import { ListItems } from '../ListItems/ListItems.mjs';
+import { Overlay } from '../Overlay/Overlay.mjs';
+import styles from './SelectPopoverContents.module.scss.mjs';
+const SelectPopoverContents = /*#__PURE__*/function () {
+  const SelectPopoverContents = function (_a) {
+    var children = _a.children,
+      menuProps = _a.menuProps;
+    var state = useSelectContext().state;
+    // The collection structure is set by useSelectState's `children`
+    // which we have used a util to ensure the following structure
+    // - SelectOptionGroup => Section
+    // - Option => Item
+    var itemNodes = Array.from(state.collection);
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.selectPopoverContents
+    }, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(ListBox, {
+      menuProps: menuProps
+    }, children ? children({
+      items: itemNodes
+    }) : /*#__PURE__*/React.createElement(ListItems, {
+      items: itemNodes
+    }))));
+  };
+  SelectPopoverContents.displayName = "Select.PopoverContents";
+  return SelectPopoverContents;
+}();
+export { SelectPopoverContents };
+//# sourceMappingURL=SelectPopoverContents.mjs.map

package/dist/esm/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPopoverContents.mjs","sources":["../../../../../../src/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.tsx"],"sourcesContent":["import React from \"react\"\nimport { AriaListBoxOptions } from \"@react-aria/listbox\"\nimport { useSelectContext } from \"../../context\"\nimport { SelectOption, SelectItem, SelectItemNode } from \"../../types\"\nimport { ListBox } from \"../ListBox\"\nimport { ListItems } from \"../ListItems\"\nimport { Overlay } from \"../Overlay\"\nimport styles from \"./SelectPopoverContents.module.scss\"\n\nexport type SelectPopoverContentsProps<Option extends SelectOption> = {\n  children?: (args: { items: Array<SelectItemNode<Option>> }) => React.ReactNode\n  menuProps: AriaListBoxOptions<SelectItem<Option>>\n}\n\nexport const SelectPopoverContents = <Option extends SelectOption>({\n  children,\n  menuProps,\n}: SelectPopoverContentsProps<Option>): JSX.Element => {\n  const { state } = useSelectContext<Option>()\n\n  // The collection structure is set by useSelectState's `children`\n  // which we have used a util to ensure the following structure\n  // - SelectOptionGroup => Section\n  // - Option => Item\n  const itemNodes = Array.from(state.collection) as Array<\n    SelectItemNode<Option>\n  >\n\n  return (\n    <div className={styles.selectPopoverContents}>\n      <Overlay<Option>>\n        <ListBox<Option> menuProps={menuProps}>\n          {children ? (\n            children({ items: itemNodes })\n          ) : (\n            <ListItems<Option> items={itemNodes} />\n          )}\n        </ListBox>\n      </Overlay>\n    </div>\n  )\n}\n\nSelectPopoverContents.displayName = \"Select.PopoverContents\"\n"],"names":["SelectPopoverContents","_a","children","menuProps","state","useSelectContext","itemNodes","Array","from","collection","React","createElement","className","styles","selectPopoverContents","Overlay","ListBox","items","ListItems","displayName"],"mappings":";;;;;;MAcaA,qBAAqB;EAAA,MAArBA,qBAAqB,GAAG,SAAAA,CAA8BC,EAG9B,EAAA;QAFnCC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRC,SAAS,GAAAF,EAAA,CAAAE,SAAA;IAED,IAAAC,KAAK,GAAKC,gBAAgB,CAAU,CAAA,MAA/B;;;;;IAMb,IAAMC,SAAS,GAAGC,KAAK,CAACC,IAAI,CAACJ,KAAK,CAACK,UAAU,CAE5C;IAED,oBACEC,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,MAAM,CAACC;IAAqB,CAAA,eAC1CJ,KAAA,CAAAC,aAAA,CAACI,OAAO,EAAA,IAAA,eACNL,KAAA,CAAAC,aAAA,CAACK,OAAO,EAAS;MAAAb,SAAS,EAAEA;OACzBD,QAAQ,GACPA,QAAQ,CAAC;MAAEe,KAAK,EAAEX;IAAS,CAAE,CAAC,gBAE9BI,KAAA,CAAAC,aAAA,CAACO,SAAS,EAAS;MAAAD,KAAK,EAAEX;MAC3B,CACO,CACF,CACN;EAEV,CAAC;EAEDN,qBAAqB,CAACmB,WAAW,GAAG,wBAAwB;EAAA,OA7B/CnB,qBAAqB;AAAA;"}

package/dist/esm/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "selectPopoverContents": "SelectPopoverContents-module_selectPopoverContents__9V5SB"
+};
+export { styles as default };
+//# sourceMappingURL=SelectPopoverContents.module.scss.mjs.map

package/dist/esm/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPopoverContents.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/__future__/Select/subcomponents/SelectToggle/SelectToggle.mjs

@@ -0,0 +1,49 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import 'uuid';
+import '../../../../Icon/subcomponents/SVG/SVG.mjs';
+import { ChevronDownIcon } from '../../../../Icon/ChevronDownIcon.mjs';
+import { ChevronUpIcon } from '../../../../Icon/ChevronUpIcon.mjs';
+import { Label } from '../../../../Label/Label.mjs';
+import styles from './SelectToggle.module.scss.mjs';
+const SelectToggle = /*#__PURE__*/function () {
+  const SelectToggle = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+    var label = _a.label,
+      labelProps = _a.labelProps,
+      value = _a.value,
+      valueProps = _a.valueProps,
+      isOpen = _a.isOpen,
+      _b = _a.placeholder,
+      placeholder = _b === void 0 ? "Select" : _b,
+      status = _a.status,
+      isDisabled = _a.isDisabled,
+      isReversed = _a.isReversed,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["label", "labelProps", "value", "valueProps", "isOpen", "placeholder", "status", "isDisabled", "isReversed", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, __assign({}, labelProps, {
+      reversed: isReversed,
+      disabled: isDisabled
+    }), label), /*#__PURE__*/React.createElement("button", __assign({
+      type: "button",
+      // for the eslint issue below, both of the attributes (aria-expanded and aria-controls) are on the button but it just doesn't know it
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role: "combobox"
+    }, restProps, {
+      ref: ref,
+      className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === "error" && styles.error, status === "caution" && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
+    }), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
+      className: styles.value
+    }), value !== null && value !== void 0 ? value : placeholder), isOpen ? /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation",
+      classNameOverride: styles.icon
+    }) : /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation",
+      classNameOverride: styles.icon
+    })));
+  });
+  SelectToggle.displayName = "SelectToggle";
+  return SelectToggle;
+}();
+export { SelectToggle };
+//# sourceMappingURL=SelectToggle.mjs.map