@infomaximum/ui-kit 0.19.0 → 0.20.0

package/dist/components/NewDropdown/contexts/NewDropdownNavigationContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const NewDropdownNavigationContext = createContext({
+  activeIndex: null,
+  getItemProps: (userProps) => userProps ?? {}
+});
+export {
+  NewDropdownNavigationContext
+};

package/dist/components/NewDropdown/hooks/useContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { useContextMenu } from './useContextMenu';
+export type { UseContextMenuProps } from './useContextMenu.types';

package/dist/components/NewDropdown/hooks/useContextMenu/useContextMenu.d.ts

@@ -0,0 +1,9 @@
+import { ElementProps, FloatingRootContext } from '@floating-ui/react';
+import { UseContextMenuProps } from './useContextMenu.types';
+/**
+ * Открывает плавающий элемент по событию contextmenu (правый клик)
+ * на reference-элементе, размещая его в точке курсора и подавляя
+ * нативное контекстное меню. Подмешивается в `useInteractions`
+ * наравне со штатными хуками floating-ui (useClick, useHover, useDismiss).
+ */
+export declare const useContextMenu: (context: FloatingRootContext, props?: UseContextMenuProps) => ElementProps;

package/dist/components/NewDropdown/hooks/useContextMenu/useContextMenu.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+const useContextMenu = (context, props = {}) => {
+  const {
+    onOpenChange,
+    refs,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true
+  } = props;
+  const reference = useMemo(() => ({
+    onContextMenu(event) {
+      event.preventDefault();
+      refs.setPositionReference({
+        contextElement: domReference ?? void 0,
+        getBoundingClientRect: () => ({
+          width: 0,
+          height: 0,
+          x: event.clientX,
+          y: event.clientY,
+          top: event.clientY,
+          right: event.clientX,
+          bottom: event.clientY,
+          left: event.clientX
+        })
+      });
+      onOpenChange(true, event.nativeEvent, "click");
+    }
+  }), [onOpenChange, refs, domReference]);
+  return useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
+};
+export {
+  useContextMenu
+};

package/dist/components/NewDropdown/hooks/useContextMenu/useContextMenu.types.d.ts

@@ -0,0 +1,7 @@
+export interface UseContextMenuProps {
+    /**
+     * Включён ли хук (вместе с навешиваемым обработчиком).
+     * @default true
+     */
+    enabled?: boolean;
+}

package/dist/components/NewDropdown/hooks/useNewDropdownTokens/index.d.ts

@@ -0,0 +1 @@
+export { useNewDropdownTokens } from './useNewDropdownTokens';

package/dist/components/NewDropdown/hooks/useNewDropdownTokens/useNewDropdownTokens.d.ts

@@ -0,0 +1,7 @@
+import { UseNewDropdownTokensResult } from './useNewDropdownTokens.types';
+/**
+ * Возвращает theme + component-tokens NewDropdown одним вызовом.
+ * Используется во всех подкомпонентах меню, чтобы не повторять связку
+ * useTheme + useComponentTokens + getNewDropdownTokens(theme).
+ */
+export declare const useNewDropdownTokens: () => UseNewDropdownTokensResult;

package/dist/components/NewDropdown/hooks/useNewDropdownTokens/useNewDropdownTokens.js

@@ -0,0 +1,14 @@
+import { getNewDropdownTokens } from "../../NewDropdown.tokens.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+import { useComponentTokens } from "../../../ConfigProvider/hooks/useComponentTokens/useComponentTokens.js";
+const useNewDropdownTokens = () => {
+  const theme = useTheme();
+  const tokens = useComponentTokens("NewDropdown", getNewDropdownTokens(theme));
+  return {
+    theme,
+    tokens
+  };
+};
+export {
+  useNewDropdownTokens
+};

package/dist/components/NewDropdown/hooks/useNewDropdownTokens/useNewDropdownTokens.types.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from 'themes';
+import { NewDropdownTokens } from '../../NewDropdown.tokens';
+export interface UseNewDropdownTokensResult {
+    theme: Theme;
+    tokens: NewDropdownTokens;
+}

package/dist/components/NewDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { NewDropdown } from './NewDropdown';
+export type { NewDropdownProps } from './NewDropdown.types';

package/dist/components/Segmented/Segmented.js

@@ -1,11 +1,11 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { memo, useId, useMemo, useCallback } from "react";
+import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
 import { SegmentedItem } from "./components/SegmentedItem/SegmentedItem.js";
 import { getSegmentedTokens } from "./Segmented.tokens.js";
 import { normalizeOption } from "./Segmented.utils.js";
 import { getSegmentedStyle, segmentedGroupStyle } from "./Segmented.styles.js";
 import { useTheme } from "../../hooks/useTheme/useTheme.js";
-import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
 const SegmentedComponent = (props) => {
   var _a;
   const defaultName = useId();

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,12 @@
 import { SelectProps } from './Select.types';
+import { SelectOptionInterface } from './components/SelectOption/SelectOption.types';
 export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & {
     children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLElement>>;
+} & import('react').RefAttributes<HTMLElement>> & {
+    Option: import('react').NamedExoticComponent<import('./components/SelectOption/SelectOption.types').SelectOptionProps> & {
+        _selectType: "option";
+    };
+    OptGroup: (<Option extends SelectOptionInterface>(props: import('./components/SelectGroupOption/SelectGroupOption.types').SelectGroupOptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+        _selectType: "group";
+    };
+};

package/dist/components/Select/Select.js

@@ -1,26 +1,42 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { memo, useMemo, useCallback } from "react";
+import { memo, useMemo, useRef, useCallback } from "react";
 import { withThemeProvider } from "../../hocs/withThemeProvider.js";
 import { BaseSelect } from "../BaseSelect/BaseSelect.js";
 import { SelectOption } from "./components/SelectOption/SelectOption.js";
+import { SelectGroupOption } from "./components/SelectGroupOption/SelectGroupOption.js";
+import { isGroupOption } from "./components/SelectGroupOption/SelectGroupOption.types.js";
 import { isFunction } from "lodash-es";
-import { isKeyOfObject } from "../BaseSelect/BaseSelect.utils.js";
 import { useKeyControl } from "./hooks/useKeyControl.js";
-const SelectComponent = memo(({
-  options = [],
-  filterOption = true,
-  optionFilterProp = "title",
-  styles,
-  optionRender,
-  onDropdownVisibleChange,
-  onChange,
-  onSearch,
-  ...otherProps
-}) => {
+import { useElementSizesController } from "./hooks/useElementSizesController.js";
+import { childrenToOptions, getOptionsForMap, filterSelectOptions } from "./Select.utils.js";
+import { SelectRenderContext } from "./contexts/SelectRenderContext.js";
+const EMPTY_OPTIONS = [];
+const SelectComponent = (props) => {
+  const {
+    options = EMPTY_OPTIONS,
+    children,
+    filterOption = true,
+    optionFilterProp = "label",
+    styles,
+    optionRender,
+    onDropdownVisibleChange,
+    onChange,
+    onSearch,
+    ...otherProps
+  } = props;
+  const derivedOptions = useMemo(() => options.length > 0 ? options : childrenToOptions(children), [options, children]);
   const optionsMap = useMemo(() => {
-    const optionList = options.map((option) => [option.value, option]);
+    const optionList = getOptionsForMap(derivedOptions);
     return new Map(optionList);
-  }, [options]);
+  }, [derivedOptions]);
+  const filteredOptionsRef = useRef(derivedOptions);
+  const {
+    getElementSize,
+    changeElementSize
+  } = useElementSizesController();
+  const handleFilteredOptionsChange = useCallback((filtered) => {
+    filteredOptionsRef.current = filtered;
+  }, []);
   const {
     currentSelectingIndex,
     onKeyControl,
@@ -28,11 +44,14 @@ const SelectComponent = memo(({
     handleChange,
     handleSearch,
     getCurrentSelectingValue
-  } = useKeyControl(options, onDropdownVisibleChange, onChange, onSearch);
+  } = useKeyControl(filteredOptionsRef, optionsMap, onDropdownVisibleChange, onChange, onSearch);
   const getOptionByValue = useCallback((value) => {
     return optionsMap.get(value);
   }, [optionsMap]);
   const renderDropdownItem = useCallback((option, index) => {
+    if (isGroupOption(option)) {
+      return /* @__PURE__ */ jsx(SelectGroupOption, { ...option, index, onResize: changeElementSize }, option.groupKey);
+    }
     if (isFunction(optionRender)) {
       return optionRender({
         option,
@@ -40,24 +59,30 @@ const SelectComponent = memo(({
       });
     }
     return /* @__PURE__ */ jsx(SelectOption, { ...option, styles: styles == null ? void 0 : styles.optionStyles });
-  }, [optionRender, styles == null ? void 0 : styles.optionStyles]);
+  }, [changeElementSize, optionRender, styles == null ? void 0 : styles.optionStyles]);
   const filterOptions = useCallback((options2, filterValue) => {
     if (!filterOption) {
       return [...options2];
     }
-    return options2 == null ? void 0 : options2.filter((option) => {
-      var _a;
-      if (isFunction(filterOption)) {
-        return filterOption(filterValue, option);
-      }
-      const optionFilterValue = isKeyOfObject(option, optionFilterProp) ? ((_a = option[optionFilterProp]) == null ? void 0 : _a.toString()) ?? "" : "";
-      return optionFilterValue.toLowerCase().includes(filterValue.toLowerCase().trim());
-    });
+    return filterSelectOptions(options2, filterValue, optionFilterProp, isFunction(filterOption) ? filterOption : true);
   }, [filterOption, optionFilterProp]);
-  const virtualizerEstimateSize = useCallback(() => 28, []);
-  return /* @__PURE__ */ jsx(BaseSelect, { ...otherProps, options, getOptionByValue, renderDropdownItem, filterOptions, filterOption, virtualizerEstimateSize, onDropdownVisibleChange: handleDropdownVisibleChange, onChange: handleChange, onSearch: handleSearch, onKeyControl, currentSelectingIndex, getCurrentSelectingValue, styles: styles == null ? void 0 : styles.baseSelectStyles });
+  const virtualizerEstimateSize = useCallback((index) => getElementSize(index), [getElementSize]);
+  const getItemKey = useCallback((option) => {
+    if (isGroupOption(option)) {
+      return option.groupKey;
+    }
+    return option.value.toString();
+  }, []);
+  const renderContextValue = useMemo(() => ({
+    optionRender,
+    optionStyles: styles == null ? void 0 : styles.optionStyles
+  }), [optionRender, styles == null ? void 0 : styles.optionStyles]);
+  return /* @__PURE__ */ jsx(SelectRenderContext.Provider, { value: renderContextValue, children: /* @__PURE__ */ jsx(BaseSelect, { ...otherProps, options: derivedOptions, getOptionByValue, renderDropdownItem, filterOptions, filterOption, virtualizerEstimateSize, onDropdownVisibleChange: handleDropdownVisibleChange, onChange: handleChange, onSearch: handleSearch, onKeyControl, currentSelectingIndex, getCurrentSelectingValue, onFilteredOptionsChange: handleFilteredOptionsChange, getItemKey, styles: styles == null ? void 0 : styles.baseSelectStyles }) });
+};
+const Select = Object.assign(withThemeProvider(memo(SelectComponent)), {
+  Option: SelectOption,
+  OptGroup: SelectGroupOption
 });
-const Select = withThemeProvider(SelectComponent);
 export {
   Select
 };

package/dist/components/Select/Select.types.d.ts

@@ -1,10 +1,14 @@
 import { SelectOptionInterface, SelectOptionStyles } from './components/SelectOption/SelectOption.types';
 import { BaseSelectProps, BaseSelectStyles } from '../BaseSelect/BaseSelect.types';
+import { GroupOption } from './components/SelectGroupOption/SelectGroupOption.types';
+import { PropsWithChildren } from 'react';
 export interface SelectStyles {
     baseSelectStyles?: BaseSelectStyles;
     optionStyles?: SelectOptionStyles;
 }
 export type SelectOptionValue = string | number;
-export interface SelectProps extends Omit<BaseSelectProps<SelectOptionInterface, SelectOptionValue>, "renderDropdownItem" | "filterOptions" | "getOptionByValue" | "virtualizerEstimateSize" | "onKeyControl" | "currentSelectingIndex" | "getCurrentSelectingValue" | "styles"> {
+export type SelectOption = GroupOption<SelectOptionInterface> | SelectOptionInterface;
+export interface SelectProps extends PropsWithChildren<Omit<BaseSelectProps<SelectOption, SelectOptionValue>, "renderDropdownItem" | "filterOptions" | "getOptionByValue" | "virtualizerEstimateSize" | "onKeyControl" | "currentSelectingIndex" | "getCurrentSelectingValue" | "styles">> {
+    options?: SelectOption[];
     styles?: SelectStyles;
 }

package/dist/components/Select/Select.utils.d.ts

@@ -1,2 +1,11 @@
+import { ReactNode } from 'react';
+import { GroupOption } from './components/SelectGroupOption/SelectGroupOption.types';
 import { SelectOptionInterface } from './components/SelectOption/SelectOption.types';
-export declare const getNextOption: (currentIndex: number, options: SelectOptionInterface[], isDecrement?: boolean) => number | null;
+import { SelectOption, SelectOptionValue } from './Select.types';
+export declare const SELECT_OPTION_TYPE: "option";
+export declare const SELECT_GROUP_OPTION_TYPE: "group";
+export declare const childrenToOptions: (children: ReactNode) => SelectOption[];
+export declare const getNextOption: (currentIndex: number, flattenedKeys: (SelectOptionValue | string)[], optionsMap: Map<SelectOptionValue, SelectOptionInterface>, isDecrement?: boolean) => number | null;
+export declare const getOptionsForMap: <Option extends SelectOptionInterface>(options: (GroupOption<Option> | Option)[]) => [Option["value"], Option][];
+export declare const filterSelectOptions: (options: SelectOption[], filterValue: string, optionFilterProp: string, filterOption: ((inputValue: string, option: SelectOptionInterface) => boolean) | true) => SelectOption[];
+export declare const flattenSelectOptionValues: (options: SelectOption[]) => (SelectOptionValue | string)[];

package/dist/components/Select/Select.utils.js

@@ -1,14 +1,117 @@
-const getNextOption = (currentIndex, options, isDecrement = false) => {
+import { Children, isValidElement } from "react";
+import { isGroupOption } from "./components/SelectGroupOption/SelectGroupOption.types.js";
+import { isKeyOfObject } from "../BaseSelect/BaseSelect.utils.js";
+const SELECT_OPTION_TYPE = "option";
+const SELECT_GROUP_OPTION_TYPE = "group";
+const getSelectElementType = (type) => {
+  if (type === null || typeof type !== "function" && typeof type !== "object") {
+    return void 0;
+  }
+  return type._selectType;
+};
+const childrenToOptions = (children) => Children.toArray(children).reduce((acc, child) => {
+  if (!isValidElement(child)) {
+    return acc;
+  }
+  const elementType = getSelectElementType(child.type);
+  if (elementType === SELECT_OPTION_TYPE) {
+    return [...acc, child.props];
+  }
+  if (elementType === SELECT_GROUP_OPTION_TYPE) {
+    const {
+      children: groupChildren,
+      index: _index,
+      onResize: _onResize,
+      styles: _styles,
+      ...rest
+    } = child.props;
+    const nestedOptions = groupChildren ? childrenToOptions(groupChildren) : rest.options ?? [];
+    return [...acc, {
+      ...rest,
+      options: nestedOptions
+    }];
+  }
+  return acc;
+}, []);
+const getNextOption = (currentIndex, flattenedKeys, optionsMap, isDecrement = false) => {
   const nextIndex = isDecrement ? currentIndex - 1 : currentIndex + 1;
-  if (nextIndex < 0 || nextIndex >= options.length) {
+  if (nextIndex < 0 || nextIndex >= flattenedKeys.length) {
     return null;
   }
-  const nextOption = options[nextIndex];
-  if (!nextOption.disabled) {
-    return nextIndex;
+  const nextKey = flattenedKeys[nextIndex];
+  const nextOption = optionsMap.get(nextKey);
+  if (!nextOption || nextOption.disabled) {
+    return getNextOption(nextIndex, flattenedKeys, optionsMap, isDecrement);
   }
-  return getNextOption(nextIndex, options, isDecrement);
+  return nextIndex;
+};
+const getOptionsForMap = (options) => {
+  const result = [];
+  const visit = (opts) => {
+    for (const option of opts) {
+      if (isGroupOption(option)) {
+        visit(option.options ?? []);
+      } else {
+        result.push([option.value, option]);
+      }
+    }
+  };
+  visit(options);
+  return result;
+};
+const checkSelectOption = (option, filterValue, optionFilterProp, filterOption) => {
+  var _a, _b;
+  const normalizedFilterValue = filterValue.toLowerCase().trim();
+  if (isGroupOption(option)) {
+    const groupFilterValue = isKeyOfObject(option, optionFilterProp) ? ((_a = option[optionFilterProp]) == null ? void 0 : _a.toString().toLowerCase()) ?? "" : "";
+    if (groupFilterValue.includes(normalizedFilterValue)) {
+      return option;
+    }
+    const filteredOptions = filterSelectOptions(option.options ?? [], filterValue, optionFilterProp, filterOption);
+    if (filteredOptions.length === 0) {
+      return null;
+    }
+    return {
+      ...option,
+      options: filteredOptions
+    };
+  }
+  if (filterOption !== true) {
+    return filterOption(filterValue, option) ? option : null;
+  }
+  const optionFilterValue = isKeyOfObject(option, optionFilterProp) ? ((_b = option[optionFilterProp]) == null ? void 0 : _b.toString()) ?? "" : "";
+  return optionFilterValue.toLowerCase().includes(normalizedFilterValue) ? option : null;
+};
+const filterSelectOptions = (options, filterValue, optionFilterProp, filterOption) => {
+  return options.reduce((acc, option) => {
+    const result = checkSelectOption(option, filterValue, optionFilterProp, filterOption);
+    if (result === null) {
+      return acc;
+    }
+    return [...acc, result];
+  }, []);
+};
+const flattenSelectOptionValues = (options) => {
+  const result = [];
+  const visit = (opts) => {
+    for (const option of opts) {
+      if (isGroupOption(option)) {
+        result.push(option.groupKey);
+        visit(option.options ?? []);
+      } else {
+        result.push(option.value);
+      }
+    }
+  };
+  visit(options);
+  return result;
 };
 export {
-  getNextOption
+  SELECT_GROUP_OPTION_TYPE,
+  SELECT_OPTION_TYPE,
+  childrenToOptions,
+  filterSelectOptions,
+  flattenSelectOptionValues,
+  getNextOption,
+  getOptionsForMap
 };

package/dist/components/Select/components/SelectGroupOption/SelectGroupOption.d.ts

@@ -0,0 +1,5 @@
+import { SelectOptionInterface } from '../SelectOption/SelectOption.types';
+import { SelectGroupOptionProps } from './SelectGroupOption.types';
+export declare const SelectGroupOption: (<Option extends SelectOptionInterface>(props: SelectGroupOptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    _selectType: "group";
+};

package/dist/components/Select/components/SelectGroupOption/SelectGroupOption.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { createElement } from "@emotion/react";
+import { memo, useRef, useMemo } from "react";
+import { isGroupOption } from "./SelectGroupOption.types.js";
+import { SelectOption } from "../SelectOption/SelectOption.js";
+import { selectGroupOptionStyle } from "./SelectGroupOption.styles.js";
+import { useResizeObserver } from "../../../../hooks/useResizeObserver.js";
+import { isFunction, isNil, isUndefined } from "lodash-es";
+import { SELECT_GROUP_OPTION_TYPE } from "../../Select.utils.js";
+import { useDepth, DepthContext } from "../../contexts/DepthContext.js";
+import { useSelectRenderContext } from "../../contexts/SelectRenderContext.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const SelectGroupOptionComponent = (props) => {
+  var _a, _b, _c;
+  const {
+    label,
+    options,
+    children,
+    title,
+    className,
+    index,
+    onResize,
+    styles
+  } = props;
+  const theme = useTheme();
+  const depth = useDepth();
+  const wrapperRef = useRef(null);
+  const {
+    optionRender,
+    optionStyles
+  } = useSelectRenderContext();
+  useResizeObserver(wrapperRef, (entries) => {
+    if (index === void 0 || !onResize) {
+      return;
+    }
+    onResize(index, entries[0].contentRect.height);
+  });
+  const selectOptions = useMemo(() => {
+    return options == null ? void 0 : options.reduce((acc, option, localIndex) => {
+      if (isGroupOption(option)) {
+        const element2 = /* @__PURE__ */ jsx(SelectGroupOptionComponent, { ...option }, option.groupKey);
+        return [...acc, element2];
+      }
+      if (isFunction(optionRender)) {
+        const element2 = optionRender({
+          option,
+          index: localIndex
+        });
+        return [...acc, element2];
+      }
+      const element = /* @__PURE__ */ createElement(SelectOption, { ...option, key: option.value, styles: optionStyles });
+      return [...acc, element];
+    }, []);
+  }, [optionRender, optionStyles, options]);
+  if (isNil(children) && (isUndefined(selectOptions) || selectOptions.length === 0)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, css: [selectGroupOptionStyle.wrapper, (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectGroupOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0R3JvdXBPcHRpb24vU2VsZWN0R3JvdXBPcHRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdETSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdEdyb3VwT3B0aW9uL1NlbGVjdEdyb3VwT3B0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZU1lbW8sIHVzZVJlZiwgdHlwZSBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgU2VsZWN0T3B0aW9uSW50ZXJmYWNlIH0gZnJvbSBcIi4uL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHlwZXNcIjtcbmltcG9ydCB7IGlzR3JvdXBPcHRpb24sIHR5cGUgU2VsZWN0R3JvdXBPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdEdyb3VwT3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBTZWxlY3RPcHRpb24gfSBmcm9tIFwiLi4vU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvblwiO1xuaW1wb3J0IHsgc2VsZWN0R3JvdXBPcHRpb25TdHlsZSB9IGZyb20gXCIuL1NlbGVjdEdyb3VwT3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZVJlc2l6ZU9ic2VydmVyIH0gZnJvbSBcImhvb2tzL3VzZVJlc2l6ZU9ic2VydmVyXCI7XG5pbXBvcnQgeyBpc0Z1bmN0aW9uLCBpc05pbCwgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBTRUxFQ1RfR1JPVVBfT1BUSU9OX1RZUEUgfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvU2VsZWN0LnV0aWxzXCI7XG5pbXBvcnQgeyBEZXB0aENvbnRleHQsIHVzZURlcHRoIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L2NvbnRleHRzL0RlcHRoQ29udGV4dFwiO1xuaW1wb3J0IHsgdXNlU2VsZWN0UmVuZGVyQ29udGV4dCB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9jb250ZXh0cy9TZWxlY3RSZW5kZXJDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdEdyb3VwT3B0aW9uQ29tcG9uZW50ID0gPE9wdGlvbiBleHRlbmRzIFNlbGVjdE9wdGlvbkludGVyZmFjZT4oXG4gIHByb3BzOiBTZWxlY3RHcm91cE9wdGlvblByb3BzPE9wdGlvbj5cbikgPT4ge1xuICBjb25zdCB7IGxhYmVsLCBvcHRpb25zLCBjaGlsZHJlbiwgdGl0bGUsIGNsYXNzTmFtZSwgaW5kZXgsIG9uUmVzaXplLCBzdHlsZXMgfSA9IHByb3BzO1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IGRlcHRoID0gdXNlRGVwdGgoKTtcbiAgY29uc3Qgd3JhcHBlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCB7IG9wdGlvblJlbmRlciwgb3B0aW9uU3R5bGVzIH0gPSB1c2VTZWxlY3RSZW5kZXJDb250ZXh0KCk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXIod3JhcHBlclJlZiwgKGVudHJpZXMpID0+IHtcbiAgICBpZiAoaW5kZXggPT09IHVuZGVmaW5lZCB8fCAhb25SZXNpemUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBvblJlc2l6ZShpbmRleCwgZW50cmllc1swXS5jb250ZW50UmVjdC5oZWlnaHQpO1xuICB9KTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25zID0gdXNlTWVtbygoKSA9PiB7XG4gICAgcmV0dXJuIG9wdGlvbnM/LnJlZHVjZSgoYWNjLCBvcHRpb24sIGxvY2FsSW5kZXgpID0+IHtcbiAgICAgIGlmIChpc0dyb3VwT3B0aW9uKG9wdGlvbikpIHtcbiAgICAgICAgY29uc3QgZWxlbWVudCA9IDxTZWxlY3RHcm91cE9wdGlvbkNvbXBvbmVudCBrZXk9e29wdGlvbi5ncm91cEtleX0gey4uLm9wdGlvbn0gLz47XG5cbiAgICAgICAgcmV0dXJuIFsuLi5hY2MsIGVsZW1lbnRdO1xuICAgICAgfVxuXG4gICAgICBpZiAoaXNGdW5jdGlvbihvcHRpb25SZW5kZXIpKSB7XG4gICAgICAgIGNvbnN0IGVsZW1lbnQgPSBvcHRpb25SZW5kZXIoeyBvcHRpb24sIGluZGV4OiBsb2NhbEluZGV4IH0pO1xuXG4gICAgICAgIHJldHVybiBbLi4uYWNjLCBlbGVtZW50XTtcbiAgICAgIH1cblxuICAgICAgY29uc3QgZWxlbWVudCA9IDxTZWxlY3RPcHRpb24gey4uLm9wdGlvbn0ga2V5PXtvcHRpb24udmFsdWV9IHN0eWxlcz17b3B0aW9uU3R5bGVzfSAvPjtcblxuICAgICAgcmV0dXJuIFsuLi5hY2MsIGVsZW1lbnRdO1xuICAgIH0sIFtdIGFzIFJlYWN0Tm9kZVtdKTtcbiAgfSwgW29wdGlvblJlbmRlciwgb3B0aW9uU3R5bGVzLCBvcHRpb25zXSk7XG5cbiAgaWYgKGlzTmlsKGNoaWxkcmVuKSAmJiAoaXNVbmRlZmluZWQoc2VsZWN0T3B0aW9ucykgfHwgc2VsZWN0T3B0aW9ucy5sZW5ndGggPT09IDApKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHJlZj17d3JhcHBlclJlZn1cbiAgICAgIGNzcz17W3NlbGVjdEdyb3VwT3B0aW9uU3R5bGUud3JhcHBlciwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgdGl0bGU9e3RpdGxlfVxuICAgICAgICBjc3M9e1tzZWxlY3RHcm91cE9wdGlvblN0eWxlLmdldExhYmVsKGRlcHRoKSh0aGVtZSksIHN0eWxlcz8ubGFiZWw/Lih0aGVtZSldfVxuICAgICAgPlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L2Rpdj5cbiAgICAgIDxEZXB0aENvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2RlcHRoICsgMX0+XG4gICAgICAgIDxkaXYgY3NzPXtbc2VsZWN0R3JvdXBPcHRpb25TdHlsZS5vcHRpb25zLCBzdHlsZXM/Lm9wdGlvbnM/Lih0aGVtZSldfT5cbiAgICAgICAgICB7c2VsZWN0T3B0aW9ucyA/PyBjaGlsZHJlbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0RlcHRoQ29udGV4dC5Qcm92aWRlcj5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RHcm91cE9wdGlvbiA9IE9iamVjdC5hc3NpZ24oXG4gIG1lbW8oU2VsZWN0R3JvdXBPcHRpb25Db21wb25lbnQpIGFzIHR5cGVvZiBTZWxlY3RHcm91cE9wdGlvbkNvbXBvbmVudCxcbiAgeyBfc2VsZWN0VHlwZTogU0VMRUNUX0dST1VQX09QVElPTl9UWVBFIH1cbik7XG4iXX0= */"], className, children: [
+    /* @__PURE__ */ jsx("div", { title, css: [selectGroupOptionStyle.getLabel(depth)(theme), (_b = styles == null ? void 0 : styles.label) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectGroupOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0R3JvdXBPcHRpb24vU2VsZWN0R3JvdXBPcHRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEUSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdEdyb3VwT3B0aW9uL1NlbGVjdEdyb3VwT3B0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZU1lbW8sIHVzZVJlZiwgdHlwZSBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgU2VsZWN0T3B0aW9uSW50ZXJmYWNlIH0gZnJvbSBcIi4uL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHlwZXNcIjtcbmltcG9ydCB7IGlzR3JvdXBPcHRpb24sIHR5cGUgU2VsZWN0R3JvdXBPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdEdyb3VwT3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBTZWxlY3RPcHRpb24gfSBmcm9tIFwiLi4vU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvblwiO1xuaW1wb3J0IHsgc2VsZWN0R3JvdXBPcHRpb25TdHlsZSB9IGZyb20gXCIuL1NlbGVjdEdyb3VwT3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZVJlc2l6ZU9ic2VydmVyIH0gZnJvbSBcImhvb2tzL3VzZVJlc2l6ZU9ic2VydmVyXCI7XG5pbXBvcnQgeyBpc0Z1bmN0aW9uLCBpc05pbCwgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBTRUxFQ1RfR1JPVVBfT1BUSU9OX1RZUEUgfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvU2VsZWN0LnV0aWxzXCI7XG5pbXBvcnQgeyBEZXB0aENvbnRleHQsIHVzZURlcHRoIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L2NvbnRleHRzL0RlcHRoQ29udGV4dFwiO1xuaW1wb3J0IHsgdXNlU2VsZWN0UmVuZGVyQ29udGV4dCB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9jb250ZXh0cy9TZWxlY3RSZW5kZXJDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdEdyb3VwT3B0aW9uQ29tcG9uZW50ID0gPE9wdGlvbiBleHRlbmRzIFNlbGVjdE9wdGlvbkludGVyZmFjZT4oXG4gIHByb3BzOiBTZWxlY3RHcm91cE9wdGlvblByb3BzPE9wdGlvbj5cbikgPT4ge1xuICBjb25zdCB7IGxhYmVsLCBvcHRpb25zLCBjaGlsZHJlbiwgdGl0bGUsIGNsYXNzTmFtZSwgaW5kZXgsIG9uUmVzaXplLCBzdHlsZXMgfSA9IHByb3BzO1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IGRlcHRoID0gdXNlRGVwdGgoKTtcbiAgY29uc3Qgd3JhcHBlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCB7IG9wdGlvblJlbmRlciwgb3B0aW9uU3R5bGVzIH0gPSB1c2VTZWxlY3RSZW5kZXJDb250ZXh0KCk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXIod3JhcHBlclJlZiwgKGVudHJpZXMpID0+IHtcbiAgICBpZiAoaW5kZXggPT09IHVuZGVmaW5lZCB8fCAhb25SZXNpemUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBvblJlc2l6ZShpbmRleCwgZW50cmllc1swXS5jb250ZW50UmVjdC5oZWlnaHQpO1xuICB9KTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25zID0gdXNlTWVtbygoKSA9PiB7XG4gICAgcmV0dXJuIG9wdGlvbnM/LnJlZHVjZSgoYWNjLCBvcHRpb24sIGxvY2FsSW5kZXgpID0+IHtcbiAgICAgIGlmIChpc0dyb3VwT3B0aW9uKG9wdGlvbikpIHtcbiAgICAgICAgY29uc3QgZWxlbWVudCA9IDxTZWxlY3RHcm91cE9wdGlvbkNvbXBvbmVudCBrZXk9e29wdGlvbi5ncm91cEtleX0gey4uLm9wdGlvbn0gLz47XG5cbiAgICAgICAgcmV0dXJuIFsuLi5hY2MsIGVsZW1lbnRdO1xuICAgICAgfVxuXG4gICAgICBpZiAoaXNGdW5jdGlvbihvcHRpb25SZW5kZXIpKSB7XG4gICAgICAgIGNvbnN0IGVsZW1lbnQgPSBvcHRpb25SZW5kZXIoeyBvcHRpb24sIGluZGV4OiBsb2NhbEluZGV4IH0pO1xuXG4gICAgICAgIHJldHVybiBbLi4uYWNjLCBlbGVtZW50XTtcbiAgICAgIH1cblxuICAgICAgY29uc3QgZWxlbWVudCA9IDxTZWxlY3RPcHRpb24gey4uLm9wdGlvbn0ga2V5PXtvcHRpb24udmFsdWV9IHN0eWxlcz17b3B0aW9uU3R5bGVzfSAvPjtcblxuICAgICAgcmV0dXJuIFsuLi5hY2MsIGVsZW1lbnRdO1xuICAgIH0sIFtdIGFzIFJlYWN0Tm9kZVtdKTtcbiAgfSwgW29wdGlvblJlbmRlciwgb3B0aW9uU3R5bGVzLCBvcHRpb25zXSk7XG5cbiAgaWYgKGlzTmlsKGNoaWxkcmVuKSAmJiAoaXNVbmRlZmluZWQoc2VsZWN0T3B0aW9ucykgfHwgc2VsZWN0T3B0aW9ucy5sZW5ndGggPT09IDApKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHJlZj17d3JhcHBlclJlZn1cbiAgICAgIGNzcz17W3NlbGVjdEdyb3VwT3B0aW9uU3R5bGUud3JhcHBlciwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgdGl0bGU9e3RpdGxlfVxuICAgICAgICBjc3M9e1tzZWxlY3RHcm91cE9wdGlvblN0eWxlLmdldExhYmVsKGRlcHRoKSh0aGVtZSksIHN0eWxlcz8ubGFiZWw/Lih0aGVtZSldfVxuICAgICAgPlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L2Rpdj5cbiAgICAgIDxEZXB0aENvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2RlcHRoICsgMX0+XG4gICAgICAgIDxkaXYgY3NzPXtbc2VsZWN0R3JvdXBPcHRpb25TdHlsZS5vcHRpb25zLCBzdHlsZXM/Lm9wdGlvbnM/Lih0aGVtZSldfT5cbiAgICAgICAgICB7c2VsZWN0T3B0aW9ucyA/PyBjaGlsZHJlbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0RlcHRoQ29udGV4dC5Qcm92aWRlcj5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RHcm91cE9wdGlvbiA9IE9iamVjdC5hc3NpZ24oXG4gIG1lbW8oU2VsZWN0R3JvdXBPcHRpb25Db21wb25lbnQpIGFzIHR5cGVvZiBTZWxlY3RHcm91cE9wdGlvbkNvbXBvbmVudCxcbiAgeyBfc2VsZWN0VHlwZTogU0VMRUNUX0dST1VQX09QVElPTl9UWVBFIH1cbik7XG4iXX0= */"], children: label }),
+    /* @__PURE__ */ jsx(DepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx("div", { css: [selectGroupOptionStyle.options, (_c = styles == null ? void 0 : styles.options) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectGroupOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0R3JvdXBPcHRpb24vU2VsZWN0R3JvdXBPcHRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtFYSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdEdyb3VwT3B0aW9uL1NlbGVjdEdyb3VwT3B0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZU1lbW8sIHVzZVJlZiwgdHlwZSBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgU2VsZWN0T3B0aW9uSW50ZXJmYWNlIH0gZnJvbSBcIi4uL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHlwZXNcIjtcbmltcG9ydCB7IGlzR3JvdXBPcHRpb24sIHR5cGUgU2VsZWN0R3JvdXBPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdEdyb3VwT3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBTZWxlY3RPcHRpb24gfSBmcm9tIFwiLi4vU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvblwiO1xuaW1wb3J0IHsgc2VsZWN0R3JvdXBPcHRpb25TdHlsZSB9IGZyb20gXCIuL1NlbGVjdEdyb3VwT3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZVJlc2l6ZU9ic2VydmVyIH0gZnJvbSBcImhvb2tzL3VzZVJlc2l6ZU9ic2VydmVyXCI7XG5pbXBvcnQgeyBpc0Z1bmN0aW9uLCBpc05pbCwgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBTRUxFQ1RfR1JPVVBfT1BUSU9OX1RZUEUgfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvU2VsZWN0LnV0aWxzXCI7XG5pbXBvcnQgeyBEZXB0aENvbnRleHQsIHVzZURlcHRoIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L2NvbnRleHRzL0RlcHRoQ29udGV4dFwiO1xuaW1wb3J0IHsgdXNlU2VsZWN0UmVuZGVyQ29udGV4dCB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9jb250ZXh0cy9TZWxlY3RSZW5kZXJDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdEdyb3VwT3B0aW9uQ29tcG9uZW50ID0gPE9wdGlvbiBleHRlbmRzIFNlbGVjdE9wdGlvbkludGVyZmFjZT4oXG4gIHByb3BzOiBTZWxlY3RHcm91cE9wdGlvblByb3BzPE9wdGlvbj5cbikgPT4ge1xuICBjb25zdCB7IGxhYmVsLCBvcHRpb25zLCBjaGlsZHJlbiwgdGl0bGUsIGNsYXNzTmFtZSwgaW5kZXgsIG9uUmVzaXplLCBzdHlsZXMgfSA9IHByb3BzO1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IGRlcHRoID0gdXNlRGVwdGgoKTtcbiAgY29uc3Qgd3JhcHBlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCB7IG9wdGlvblJlbmRlciwgb3B0aW9uU3R5bGVzIH0gPSB1c2VTZWxlY3RSZW5kZXJDb250ZXh0KCk7XG5cbiAgdXNlUmVzaXplT2JzZXJ2ZXIod3JhcHBlclJlZiwgKGVudHJpZXMpID0+IHtcbiAgICBpZiAoaW5kZXggPT09IHVuZGVmaW5lZCB8fCAhb25SZXNpemUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBvblJlc2l6ZShpbmRleCwgZW50cmllc1swXS5jb250ZW50UmVjdC5oZWlnaHQpO1xuICB9KTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25zID0gdXNlTWVtbygoKSA9PiB7XG4gICAgcmV0dXJuIG9wdGlvbnM/LnJlZHVjZSgoYWNjLCBvcHRpb24sIGxvY2FsSW5kZXgpID0+IHtcbiAgICAgIGlmIChpc0dyb3VwT3B0aW9uKG9wdGlvbikpIHtcbiAgICAgICAgY29uc3QgZWxlbWVudCA9IDxTZWxlY3RHcm91cE9wdGlvbkNvbXBvbmVudCBrZXk9e29wdGlvbi5ncm91cEtleX0gey4uLm9wdGlvbn0gLz47XG5cbiAgICAgICAgcmV0dXJuIFsuLi5hY2MsIGVsZW1lbnRdO1xuICAgICAgfVxuXG4gICAgICBpZiAoaXNGdW5jdGlvbihvcHRpb25SZW5kZXIpKSB7XG4gICAgICAgIGNvbnN0IGVsZW1lbnQgPSBvcHRpb25SZW5kZXIoeyBvcHRpb24sIGluZGV4OiBsb2NhbEluZGV4IH0pO1xuXG4gICAgICAgIHJldHVybiBbLi4uYWNjLCBlbGVtZW50XTtcbiAgICAgIH1cblxuICAgICAgY29uc3QgZWxlbWVudCA9IDxTZWxlY3RPcHRpb24gey4uLm9wdGlvbn0ga2V5PXtvcHRpb24udmFsdWV9IHN0eWxlcz17b3B0aW9uU3R5bGVzfSAvPjtcblxuICAgICAgcmV0dXJuIFsuLi5hY2MsIGVsZW1lbnRdO1xuICAgIH0sIFtdIGFzIFJlYWN0Tm9kZVtdKTtcbiAgfSwgW29wdGlvblJlbmRlciwgb3B0aW9uU3R5bGVzLCBvcHRpb25zXSk7XG5cbiAgaWYgKGlzTmlsKGNoaWxkcmVuKSAmJiAoaXNVbmRlZmluZWQoc2VsZWN0T3B0aW9ucykgfHwgc2VsZWN0T3B0aW9ucy5sZW5ndGggPT09IDApKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHJlZj17d3JhcHBlclJlZn1cbiAgICAgIGNzcz17W3NlbGVjdEdyb3VwT3B0aW9uU3R5bGUud3JhcHBlciwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgID5cbiAgICAgIDxkaXZcbiAgICAgICAgdGl0bGU9e3RpdGxlfVxuICAgICAgICBjc3M9e1tzZWxlY3RHcm91cE9wdGlvblN0eWxlLmdldExhYmVsKGRlcHRoKSh0aGVtZSksIHN0eWxlcz8ubGFiZWw/Lih0aGVtZSldfVxuICAgICAgPlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L2Rpdj5cbiAgICAgIDxEZXB0aENvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2RlcHRoICsgMX0+XG4gICAgICAgIDxkaXYgY3NzPXtbc2VsZWN0R3JvdXBPcHRpb25TdHlsZS5vcHRpb25zLCBzdHlsZXM/Lm9wdGlvbnM/Lih0aGVtZSldfT5cbiAgICAgICAgICB7c2VsZWN0T3B0aW9ucyA/PyBjaGlsZHJlbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0RlcHRoQ29udGV4dC5Qcm92aWRlcj5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RHcm91cE9wdGlvbiA9IE9iamVjdC5hc3NpZ24oXG4gIG1lbW8oU2VsZWN0R3JvdXBPcHRpb25Db21wb25lbnQpIGFzIHR5cGVvZiBTZWxlY3RHcm91cE9wdGlvbkNvbXBvbmVudCxcbiAgeyBfc2VsZWN0VHlwZTogU0VMRUNUX0dST1VQX09QVElPTl9UWVBFIH1cbik7XG4iXX0= */"], children: selectOptions ?? children }) })
+  ] });
+};
+const SelectGroupOption = Object.assign(memo(SelectGroupOptionComponent), {
+  _selectType: SELECT_GROUP_OPTION_TYPE
+});
+export {
+  SelectGroupOption
+};

package/dist/components/Select/components/SelectGroupOption/SelectGroupOption.styles.d.ts

@@ -0,0 +1,28 @@
+import { Theme } from 'themes';
+export declare const selectGroupOptionStyle: {
+    wrapper: {
+        width: string;
+    };
+    getLabel: (depth: number) => (theme: Theme) => {
+        readonly color: "#8C8C8C";
+        readonly overflow: "hidden";
+        readonly whiteSpace: "nowrap";
+        readonly textOverflow: "ellipsis";
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 14;
+        readonly lineHeight: "20px";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly paddingTop: 4;
+        readonly paddingRight: 8;
+        readonly paddingBottom: 4;
+        readonly paddingLeft: number;
+        readonly height: number;
+        readonly boxSizing: "border-box";
+    };
+    options: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+    };
+};

package/dist/components/Select/components/SelectGroupOption/SelectGroupOption.styles.js

@@ -0,0 +1,34 @@
+import { getSelectTokens } from "../../../BaseSelect/BaseSelect.tokens.js";
+import { DEPTH_PADDING_INCREMENT } from "../../contexts/DepthContext.js";
+const selectGroupOptionStyle = {
+  wrapper: {
+    width: "100%"
+  },
+  getLabel: (depth) => (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    const verticalPadding = theme.paddingXS;
+    return {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      paddingTop: verticalPadding,
+      paddingRight: theme.paddingM,
+      paddingBottom: verticalPadding,
+      paddingLeft: theme.paddingM + depth * DEPTH_PADDING_INCREMENT,
+      height: 20 + verticalPadding * 2,
+      boxSizing: "border-box",
+      ...theme.typography.body2,
+      color: selectTokens.selectOptionTextSecondary,
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    };
+  },
+  options: {
+    display: "flex",
+    flexDirection: "column"
+  }
+};
+export {
+  selectGroupOptionStyle
+};

package/dist/components/Select/components/SelectGroupOption/SelectGroupOption.types.d.ts

@@ -0,0 +1,21 @@
+import { Interpolation } from '@emotion/react';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Theme } from 'themes';
+export interface GroupOption<Option> {
+    groupKey: string;
+    label: ReactNode;
+    className?: string;
+    title?: string;
+    options?: (GroupOption<Option> | Option)[];
+    children?: ReactNode;
+}
+export interface SelectGroupOptionProps<Option> extends PropsWithChildren<GroupOption<Option>> {
+    index?: number;
+    onResize?: (index: number, height: number) => void;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+        label?: (theme: Theme) => Interpolation;
+        options?: (theme: Theme) => Interpolation;
+    };
+}
+export declare const isGroupOption: <Option>(option: GroupOption<Option> | Option) => option is GroupOption<Option>;

package/dist/components/Select/components/SelectGroupOption/SelectGroupOption.types.js

@@ -0,0 +1,7 @@
+import { isObject } from "lodash-es";
+const isGroupOption = (option) => {
+  return isObject(option) && "groupKey" in option;
+};
+export {
+  isGroupOption
+};

package/dist/components/Select/components/SelectOption/SelectOption.d.ts

@@ -1,3 +1,4 @@
-import { FC } from 'react';
 import { SelectOptionProps } from './SelectOption.types';
-export declare const SelectOption: FC<SelectOptionProps>;
+export declare const SelectOption: import('react').NamedExoticComponent<SelectOptionProps> & {
+    _selectType: "option";
+};