@infomaximum/ui-kit 0.18.2 → 0.20.0

package/dist/components/Select/components/SelectOption/SelectOption.js

@@ -3,16 +3,22 @@ import { memo } from "react";
 import { CheckOutlined } from "@infomaximum/icons";
 import { getSelectOptionStyle } from "./SelectOption.styles.js";
 import { useBaseSelectContext } from "../../../BaseSelect/contexts/BaseSelectContext.js";
+import { SELECT_OPTION_TYPE } from "../../Select.utils.js";
+import { useDepth } from "../../contexts/DepthContext.js";
 import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
-const SelectOption = memo(({
-  title,
-  value,
-  disabled = false,
-  icon,
-  styles
-}) => {
-  var _a, _b, _c, _d;
+const SelectOptionComponent = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    label,
+    value,
+    title,
+    disabled = false,
+    icon,
+    extra,
+    styles
+  } = props;
   const theme = useTheme();
+  const depth = useDepth();
   const {
     mode,
     setValue,
@@ -23,8 +29,8 @@ const SelectOption = memo(({
   } = useBaseSelectContext();
   const isSelecting = getCurrentSelectingValue() === value;
   const selected = currentValue.includes(value);
-  const selectOptionStyle = getSelectOptionStyle(selected, disabled, isSelecting);
-  const clickHandle = () => {
+  const selectOptionStyle = getSelectOptionStyle(selected, disabled, isSelecting, depth);
+  const handleClick = () => {
     if (disabled) {
       return;
     }
@@ -39,13 +45,17 @@ const SelectOption = memo(({
     setValue(value);
     closeOptionList();
   };
-  return /* @__PURE__ */ jsxs("div", { css: [selectOptionStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0T3B0aW9uOiBGQzxTZWxlY3RPcHRpb25Qcm9wcz4gPSBtZW1vKFxuICAoeyB0aXRsZSwgdmFsdWUsIGRpc2FibGVkID0gZmFsc2UsIGljb24sIHN0eWxlcyB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gICAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgICB1c2VCYXNlU2VsZWN0Q29udGV4dDxTZWxlY3RPcHRpb25WYWx1ZT4oKTtcblxuICAgIGNvbnN0IGlzU2VsZWN0aW5nID0gZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlKCkgPT09IHZhbHVlO1xuICAgIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICAgIGNvbnN0IHNlbGVjdE9wdGlvblN0eWxlID0gZ2V0U2VsZWN0T3B0aW9uU3R5bGUoc2VsZWN0ZWQsIGRpc2FibGVkLCBpc1NlbGVjdGluZyk7XG5cbiAgICBjb25zdCBjbGlja0hhbmRsZSA9ICgpID0+IHtcbiAgICAgIGlmIChkaXNhYmxlZCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIGlmIChtb2RlID09PSBcIm11bHRpcGxlXCIpIHtcbiAgICAgICAgaWYgKHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgY2xvc2VPcHRpb25MaXN0KCk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvbkNsaWNrPXtjbGlja0hhbmRsZX1cbiAgICAgICAgdGl0bGU9e3RpdGxlPy50b1N0cmluZygpfVxuICAgICAgPlxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgICAge2ljb24gJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj59XG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUudGV4dCwgc3R5bGVzPy50ZXh0XX0+e3RpdGxlfTwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuXG4gICAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgPENoZWNrT3V0bGluZWQgLz5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], onClick: clickHandle, title: title == null ? void 0 : title.toString(), children: [
-    /* @__PURE__ */ jsxs("span", { css: [selectOptionStyle.content(theme), (_b = styles == null ? void 0 : styles.content) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNjIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0T3B0aW9uOiBGQzxTZWxlY3RPcHRpb25Qcm9wcz4gPSBtZW1vKFxuICAoeyB0aXRsZSwgdmFsdWUsIGRpc2FibGVkID0gZmFsc2UsIGljb24sIHN0eWxlcyB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gICAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgICB1c2VCYXNlU2VsZWN0Q29udGV4dDxTZWxlY3RPcHRpb25WYWx1ZT4oKTtcblxuICAgIGNvbnN0IGlzU2VsZWN0aW5nID0gZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlKCkgPT09IHZhbHVlO1xuICAgIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICAgIGNvbnN0IHNlbGVjdE9wdGlvblN0eWxlID0gZ2V0U2VsZWN0T3B0aW9uU3R5bGUoc2VsZWN0ZWQsIGRpc2FibGVkLCBpc1NlbGVjdGluZyk7XG5cbiAgICBjb25zdCBjbGlja0hhbmRsZSA9ICgpID0+IHtcbiAgICAgIGlmIChkaXNhYmxlZCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIGlmIChtb2RlID09PSBcIm11bHRpcGxlXCIpIHtcbiAgICAgICAgaWYgKHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgY2xvc2VPcHRpb25MaXN0KCk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvbkNsaWNrPXtjbGlja0hhbmRsZX1cbiAgICAgICAgdGl0bGU9e3RpdGxlPy50b1N0cmluZygpfVxuICAgICAgPlxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgICAge2ljb24gJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj59XG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUudGV4dCwgc3R5bGVzPy50ZXh0XX0+e3RpdGxlfTwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuXG4gICAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgPENoZWNrT3V0bGluZWQgLz5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], children: [
-      icon && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.icon(theme), (_c = styles == null ? void 0 : styles.icon) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEN5QiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbjogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gbWVtbyhcbiAgKHsgdGl0bGUsIHZhbHVlLCBkaXNhYmxlZCA9IGZhbHNlLCBpY29uLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgICBjb25zdCBpc1NlbGVjdGluZyA9IGdldEN1cnJlbnRTZWxlY3RpbmdWYWx1ZSgpID09PSB2YWx1ZTtcbiAgICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcpO1xuXG4gICAgY29uc3QgY2xpY2tIYW5kbGUgPSAoKSA9PiB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICAgIGlmIChzZWxlY3RlZCkge1xuICAgICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGV9XG4gICAgICAgIHRpdGxlPXt0aXRsZT8udG9TdHJpbmcoKX1cbiAgICAgID5cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLnRleHQsIHN0eWxlcz8udGV4dF19Pnt0aXRsZX08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIDxDaGVja091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: icon }),
-      /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.text, styles == null ? void 0 : styles.text, process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0NnQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbjogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gbWVtbyhcbiAgKHsgdGl0bGUsIHZhbHVlLCBkaXNhYmxlZCA9IGZhbHNlLCBpY29uLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgICBjb25zdCBpc1NlbGVjdGluZyA9IGdldEN1cnJlbnRTZWxlY3RpbmdWYWx1ZSgpID09PSB2YWx1ZTtcbiAgICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcpO1xuXG4gICAgY29uc3QgY2xpY2tIYW5kbGUgPSAoKSA9PiB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICAgIGlmIChzZWxlY3RlZCkge1xuICAgICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGV9XG4gICAgICAgIHRpdGxlPXt0aXRsZT8udG9TdHJpbmcoKX1cbiAgICAgID5cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLnRleHQsIHN0eWxlcz8udGV4dF19Pnt0aXRsZX08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIDxDaGVja091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: title })
+  return /* @__PURE__ */ jsxs("div", { css: [selectOptionStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNNIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuaW1wb3J0IHsgU0VMRUNUX09QVElPTl9UWVBFIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC51dGlsc1wiO1xuaW1wb3J0IHsgdXNlRGVwdGggfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvY29udGV4dHMvRGVwdGhDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdE9wdGlvbkNvbXBvbmVudDogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgbGFiZWwsIHZhbHVlLCB0aXRsZSwgZGlzYWJsZWQgPSBmYWxzZSwgaWNvbiwgZXh0cmEsIHN0eWxlcyB9ID0gcHJvcHM7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCBkZXB0aCA9IHVzZURlcHRoKCk7XG5cbiAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgY29uc3QgaXNTZWxlY3RpbmcgPSBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUoKSA9PT0gdmFsdWU7XG4gIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcsIGRlcHRoKTtcblxuICBjb25zdCBoYW5kbGVDbGljayA9ICgpID0+IHtcbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICBpZiAoc2VsZWN0ZWQpIHtcbiAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgfVxuXG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0VmFsdWUodmFsdWUpO1xuICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS50ZXh0LCBzdHlsZXM/LnRleHRdfT57bGFiZWx9PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuXG4gICAgICB7ZXh0cmEgJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuZXh0cmEodGhlbWUpLCBzdHlsZXM/LmV4dHJhPy4odGhlbWUpXX0+e2V4dHJhfTwvc3Bhbj59XG5cbiAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICA8Q2hlY2tPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbiA9IE9iamVjdC5hc3NpZ24obWVtbyhTZWxlY3RPcHRpb25Db21wb25lbnQpLCB7XG4gIF9zZWxlY3RUeXBlOiBTRUxFQ1RfT1BUSU9OX1RZUEUsXG59KTtcbiJdfQ== */"], onClick: handleClick, title, children: [
+    /* @__PURE__ */ jsxs("span", { css: [selectOptionStyle.content(theme), (_b = styles == null ? void 0 : styles.content) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaURZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuaW1wb3J0IHsgU0VMRUNUX09QVElPTl9UWVBFIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC51dGlsc1wiO1xuaW1wb3J0IHsgdXNlRGVwdGggfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvY29udGV4dHMvRGVwdGhDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdE9wdGlvbkNvbXBvbmVudDogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgbGFiZWwsIHZhbHVlLCB0aXRsZSwgZGlzYWJsZWQgPSBmYWxzZSwgaWNvbiwgZXh0cmEsIHN0eWxlcyB9ID0gcHJvcHM7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCBkZXB0aCA9IHVzZURlcHRoKCk7XG5cbiAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgY29uc3QgaXNTZWxlY3RpbmcgPSBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUoKSA9PT0gdmFsdWU7XG4gIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcsIGRlcHRoKTtcblxuICBjb25zdCBoYW5kbGVDbGljayA9ICgpID0+IHtcbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICBpZiAoc2VsZWN0ZWQpIHtcbiAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgfVxuXG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0VmFsdWUodmFsdWUpO1xuICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS50ZXh0LCBzdHlsZXM/LnRleHRdfT57bGFiZWx9PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuXG4gICAgICB7ZXh0cmEgJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuZXh0cmEodGhlbWUpLCBzdHlsZXM/LmV4dHJhPy4odGhlbWUpXX0+e2V4dHJhfTwvc3Bhbj59XG5cbiAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICA8Q2hlY2tPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbiA9IE9iamVjdC5hc3NpZ24obWVtbyhTZWxlY3RPcHRpb25Db21wb25lbnQpLCB7XG4gIF9zZWxlY3RUeXBlOiBTRUxFQ1RfT1BUSU9OX1RZUEUsXG59KTtcbiJdfQ== */"], children: [
+      icon && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.icon(theme), (_c = styles == null ? void 0 : styles.icon) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0R1QiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcbmltcG9ydCB7IFNFTEVDVF9PUFRJT05fVFlQRSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudXRpbHNcIjtcbmltcG9ydCB7IHVzZURlcHRoIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L2NvbnRleHRzL0RlcHRoQ29udGV4dFwiO1xuXG5jb25zdCBTZWxlY3RPcHRpb25Db21wb25lbnQ6IEZDPFNlbGVjdE9wdGlvblByb3BzPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7IGxhYmVsLCB2YWx1ZSwgdGl0bGUsIGRpc2FibGVkID0gZmFsc2UsIGljb24sIGV4dHJhLCBzdHlsZXMgfSA9IHByb3BzO1xuXG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgZGVwdGggPSB1c2VEZXB0aCgpO1xuXG4gIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgIHVzZUJhc2VTZWxlY3RDb250ZXh0PFNlbGVjdE9wdGlvblZhbHVlPigpO1xuXG4gIGNvbnN0IGlzU2VsZWN0aW5nID0gZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlKCkgPT09IHZhbHVlO1xuICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgY29uc3Qgc2VsZWN0T3B0aW9uU3R5bGUgPSBnZXRTZWxlY3RPcHRpb25TdHlsZShzZWxlY3RlZCwgZGlzYWJsZWQsIGlzU2VsZWN0aW5nLCBkZXB0aCk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKGRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKG1vZGUgPT09IFwibXVsdGlwbGVcIikge1xuICAgICAgaWYgKHNlbGVjdGVkKSB7XG4gICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICBjbG9zZU9wdGlvbkxpc3QoKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICB0aXRsZT17dGl0bGV9XG4gICAgPlxuICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICB7aWNvbiAmJiA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5pY29uKHRoZW1lKSwgc3R5bGVzPy5pY29uPy4odGhlbWUpXX0+e2ljb259PC9zcGFuPn1cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUudGV4dCwgc3R5bGVzPy50ZXh0XX0+e2xhYmVsfTwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cblxuICAgICAge2V4dHJhICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmV4dHJhKHRoZW1lKSwgc3R5bGVzPy5leHRyYT8uKHRoZW1lKV19PntleHRyYX08L3NwYW4+fVxuXG4gICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5pY29uKHRoZW1lKSwgc3R5bGVzPy5pY29uPy4odGhlbWUpXX0+XG4gICAgICAgICAgPENoZWNrT3V0bGluZWQgLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RPcHRpb24gPSBPYmplY3QuYXNzaWduKG1lbW8oU2VsZWN0T3B0aW9uQ29tcG9uZW50KSwge1xuICBfc2VsZWN0VHlwZTogU0VMRUNUX09QVElPTl9UWVBFLFxufSk7XG4iXX0= */"], children: icon }),
+      /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.text, styles == null ? void 0 : styles.text, process.env.NODE_ENV === "production" ? "" : ";label:SelectOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURjIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuaW1wb3J0IHsgU0VMRUNUX09QVElPTl9UWVBFIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC51dGlsc1wiO1xuaW1wb3J0IHsgdXNlRGVwdGggfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvY29udGV4dHMvRGVwdGhDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdE9wdGlvbkNvbXBvbmVudDogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgbGFiZWwsIHZhbHVlLCB0aXRsZSwgZGlzYWJsZWQgPSBmYWxzZSwgaWNvbiwgZXh0cmEsIHN0eWxlcyB9ID0gcHJvcHM7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCBkZXB0aCA9IHVzZURlcHRoKCk7XG5cbiAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgY29uc3QgaXNTZWxlY3RpbmcgPSBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUoKSA9PT0gdmFsdWU7XG4gIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcsIGRlcHRoKTtcblxuICBjb25zdCBoYW5kbGVDbGljayA9ICgpID0+IHtcbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICBpZiAoc2VsZWN0ZWQpIHtcbiAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgfVxuXG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0VmFsdWUodmFsdWUpO1xuICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS50ZXh0LCBzdHlsZXM/LnRleHRdfT57bGFiZWx9PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuXG4gICAgICB7ZXh0cmEgJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuZXh0cmEodGhlbWUpLCBzdHlsZXM/LmV4dHJhPy4odGhlbWUpXX0+e2V4dHJhfTwvc3Bhbj59XG5cbiAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICA8Q2hlY2tPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbiA9IE9iamVjdC5hc3NpZ24obWVtbyhTZWxlY3RPcHRpb25Db21wb25lbnQpLCB7XG4gIF9zZWxlY3RUeXBlOiBTRUxFQ1RfT1BUSU9OX1RZUEUsXG59KTtcbiJdfQ== */"], children: label })
     ] }),
-    selected && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.icon(theme), (_d = styles == null ? void 0 : styles.icon) == null ? void 0 : _d.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURnQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbjogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gbWVtbyhcbiAgKHsgdGl0bGUsIHZhbHVlLCBkaXNhYmxlZCA9IGZhbHNlLCBpY29uLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgICBjb25zdCBpc1NlbGVjdGluZyA9IGdldEN1cnJlbnRTZWxlY3RpbmdWYWx1ZSgpID09PSB2YWx1ZTtcbiAgICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcpO1xuXG4gICAgY29uc3QgY2xpY2tIYW5kbGUgPSAoKSA9PiB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICAgIGlmIChzZWxlY3RlZCkge1xuICAgICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGV9XG4gICAgICAgIHRpdGxlPXt0aXRsZT8udG9TdHJpbmcoKX1cbiAgICAgID5cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLnRleHQsIHN0eWxlcz8udGV4dF19Pnt0aXRsZX08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIDxDaGVja091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: /* @__PURE__ */ jsx(CheckOutlined, {}) })
+    extra && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.extra(theme), (_d = styles == null ? void 0 : styles.extra) == null ? void 0 : _d.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0RzQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcbmltcG9ydCB7IFNFTEVDVF9PUFRJT05fVFlQRSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudXRpbHNcIjtcbmltcG9ydCB7IHVzZURlcHRoIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L2NvbnRleHRzL0RlcHRoQ29udGV4dFwiO1xuXG5jb25zdCBTZWxlY3RPcHRpb25Db21wb25lbnQ6IEZDPFNlbGVjdE9wdGlvblByb3BzPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7IGxhYmVsLCB2YWx1ZSwgdGl0bGUsIGRpc2FibGVkID0gZmFsc2UsIGljb24sIGV4dHJhLCBzdHlsZXMgfSA9IHByb3BzO1xuXG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgZGVwdGggPSB1c2VEZXB0aCgpO1xuXG4gIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgIHVzZUJhc2VTZWxlY3RDb250ZXh0PFNlbGVjdE9wdGlvblZhbHVlPigpO1xuXG4gIGNvbnN0IGlzU2VsZWN0aW5nID0gZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlKCkgPT09IHZhbHVlO1xuICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgY29uc3Qgc2VsZWN0T3B0aW9uU3R5bGUgPSBnZXRTZWxlY3RPcHRpb25TdHlsZShzZWxlY3RlZCwgZGlzYWJsZWQsIGlzU2VsZWN0aW5nLCBkZXB0aCk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKGRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKG1vZGUgPT09IFwibXVsdGlwbGVcIikge1xuICAgICAgaWYgKHNlbGVjdGVkKSB7XG4gICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICBjbG9zZU9wdGlvbkxpc3QoKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICB0aXRsZT17dGl0bGV9XG4gICAgPlxuICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICB7aWNvbiAmJiA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5pY29uKHRoZW1lKSwgc3R5bGVzPy5pY29uPy4odGhlbWUpXX0+e2ljb259PC9zcGFuPn1cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUudGV4dCwgc3R5bGVzPy50ZXh0XX0+e2xhYmVsfTwvc3Bhbj5cbiAgICAgIDwvc3Bhbj5cblxuICAgICAge2V4dHJhICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmV4dHJhKHRoZW1lKSwgc3R5bGVzPy5leHRyYT8uKHRoZW1lKV19PntleHRyYX08L3NwYW4+fVxuXG4gICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5pY29uKHRoZW1lKSwgc3R5bGVzPy5pY29uPy4odGhlbWUpXX0+XG4gICAgICAgICAgPENoZWNrT3V0bGluZWQgLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RPcHRpb24gPSBPYmplY3QuYXNzaWduKG1lbW8oU2VsZWN0T3B0aW9uQ29tcG9uZW50KSwge1xuICBfc2VsZWN0VHlwZTogU0VMRUNUX09QVElPTl9UWVBFLFxufSk7XG4iXX0= */"], children: extra }),
+    selected && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.icon(theme), (_e = styles == null ? void 0 : styles.icon) == null ? void 0 : _e.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOptionComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeURjIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuaW1wb3J0IHsgU0VMRUNUX09QVElPTl9UWVBFIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC51dGlsc1wiO1xuaW1wb3J0IHsgdXNlRGVwdGggfSBmcm9tIFwiY29tcG9uZW50cy9TZWxlY3QvY29udGV4dHMvRGVwdGhDb250ZXh0XCI7XG5cbmNvbnN0IFNlbGVjdE9wdGlvbkNvbXBvbmVudDogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgbGFiZWwsIHZhbHVlLCB0aXRsZSwgZGlzYWJsZWQgPSBmYWxzZSwgaWNvbiwgZXh0cmEsIHN0eWxlcyB9ID0gcHJvcHM7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCBkZXB0aCA9IHVzZURlcHRoKCk7XG5cbiAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgY29uc3QgaXNTZWxlY3RpbmcgPSBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUoKSA9PT0gdmFsdWU7XG4gIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcsIGRlcHRoKTtcblxuICBjb25zdCBoYW5kbGVDbGljayA9ICgpID0+IHtcbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICBpZiAoc2VsZWN0ZWQpIHtcbiAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgfVxuXG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0VmFsdWUodmFsdWUpO1xuICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS50ZXh0LCBzdHlsZXM/LnRleHRdfT57bGFiZWx9PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuXG4gICAgICB7ZXh0cmEgJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuZXh0cmEodGhlbWUpLCBzdHlsZXM/LmV4dHJhPy4odGhlbWUpXX0+e2V4dHJhfTwvc3Bhbj59XG5cbiAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICA8Q2hlY2tPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbiA9IE9iamVjdC5hc3NpZ24obWVtbyhTZWxlY3RPcHRpb25Db21wb25lbnQpLCB7XG4gIF9zZWxlY3RUeXBlOiBTRUxFQ1RfT1BUSU9OX1RZUEUsXG59KTtcbiJdfQ== */"], children: /* @__PURE__ */ jsx(CheckOutlined, {}) })
   ] });
+};
+const SelectOption = Object.assign(memo(SelectOptionComponent), {
+  _selectType: SELECT_OPTION_TYPE
 });
 export {
   SelectOption

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

@@ -1,5 +1,5 @@
 import { Theme } from 'themes';
-export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean, isSelecting: boolean) => {
+export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean, isSelecting: boolean, depth: number) => {
     wrapper: (theme: Theme) => {
         readonly color: "#262626" | "#8C8C8C" | "#0CB3B3";
         readonly height: 28;
@@ -18,7 +18,10 @@ export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean
         readonly alignItems: "center";
         readonly width: "100%";
         readonly gap: 8;
-        readonly padding: "4px 8px";
+        readonly paddingTop: 4;
+        readonly paddingRight: 8;
+        readonly paddingBottom: 4;
+        readonly paddingLeft: number;
         readonly borderRadius: 4;
     };
     content: (theme: Theme) => {
@@ -35,7 +38,18 @@ export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean
         textOverflow: string;
         width: string;
     };
+    extra: (theme: Theme) => {
+        color: "#8C8C8C";
+        fontFamily: "Roboto";
+        fontSize: 12;
+        lineHeight: "20px";
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+    };
     icon: (theme: Theme) => {
+        display: string;
+        alignItems: string;
         fontSize: 16;
     };
 };

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

@@ -1,4 +1,5 @@
 import { getSelectTokens } from "../../../BaseSelect/BaseSelect.tokens.js";
+import { DEPTH_PADDING_INCREMENT } from "../../contexts/DepthContext.js";
 const getColor = (selectTokens, selected, disabled) => {
   if (disabled) {
     return selectTokens.selectOptionTextDisabled;
@@ -8,7 +9,7 @@ const getColor = (selectTokens, selected, disabled) => {
   }
   return selectTokens.selectOptionText;
 };
-const getSelectOptionStyle = (selected, disabled, isSelecting) => ({
+const getSelectOptionStyle = (selected, disabled, isSelecting, depth) => ({
   wrapper: (theme) => {
     const selectTokens = getSelectTokens(theme);
     return {
@@ -16,7 +17,10 @@ const getSelectOptionStyle = (selected, disabled, isSelecting) => ({
       alignItems: "center",
       width: "100%",
       gap: theme.marginM,
-      padding: `${selectTokens.selectOptionPaddingVertical}px ${selectTokens.selectOptionPaddingHorizontal}px`,
+      paddingTop: selectTokens.selectOptionPaddingVertical,
+      paddingRight: selectTokens.selectOptionPaddingHorizontal,
+      paddingBottom: selectTokens.selectOptionPaddingVertical,
+      paddingLeft: selectTokens.selectOptionPaddingHorizontal + depth * DEPTH_PADDING_INCREMENT,
       borderRadius: theme.borderRadiusM,
       ...theme.typography.body2,
       color: getColor(selectTokens, selected, disabled),
@@ -45,7 +49,19 @@ const getSelectOptionStyle = (selected, disabled, isSelecting) => ({
     textOverflow: "ellipsis",
     width: "100%"
   },
+  extra: (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    return {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...theme.typography.body3,
+      color: selectTokens.selectOptionTextSecondary
+    };
+  },
   icon: (theme) => ({
+    display: "flex",
+    alignItems: "center",
     fontSize: theme.iconM
   })
 });

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

@@ -2,14 +2,19 @@ import { Interpolation } from '@emotion/react';
 import { BaseSelectOptionInterface } from '../../../BaseSelect/BaseSelect.types';
 import { SelectOptionValue } from '../../../Select/Select.types';
 import { Theme } from 'themes';
+import { ReactNode } from 'react';
 export interface SelectOptionStyles {
     wrapper?: (theme: Theme) => Interpolation;
     content?: (theme: Theme) => Interpolation;
     text?: Interpolation;
+    extra?: (theme: Theme) => Interpolation;
     icon?: (theme: Theme) => Interpolation;
 }
 export interface SelectOptionInterface extends BaseSelectOptionInterface<SelectOptionValue> {
+    value: SelectOptionValue;
+    label: ReactNode;
     className?: string;
+    extra?: ReactNode;
 }
 export interface SelectOptionCallbacks {
     setValue(value: SelectOptionValue, index: number): void;

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

@@ -0,0 +1,3 @@
+export declare const DEPTH_PADDING_INCREMENT = 20;
+export declare const DepthContext: import('react').Context<number>;
+export declare const useDepth: () => number;

package/dist/components/Select/contexts/DepthContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const DEPTH_PADDING_INCREMENT = 20;
+const DepthContext = createContext(0);
+const useDepth = () => useContext(DepthContext);
+export {
+  DEPTH_PADDING_INCREMENT,
+  DepthContext,
+  useDepth
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BaseSelectOptionProps } from 'components/BaseSelect/BaseSelect.types';
+import { SelectOptionStyles } from '../components/SelectOption/SelectOption.types';
+import { SelectOption, SelectOptionValue } from '../Select.types';
+interface SelectRenderContextValue {
+    optionRender?: (params: BaseSelectOptionProps<SelectOption, SelectOptionValue>) => ReactNode;
+    optionStyles?: SelectOptionStyles;
+}
+export declare const SelectRenderContext: import('react').Context<SelectRenderContextValue>;
+export declare const useSelectRenderContext: () => SelectRenderContextValue;
+export {};

package/dist/components/Select/contexts/SelectRenderContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const SelectRenderContext = createContext({});
+const useSelectRenderContext = () => useContext(SelectRenderContext);
+export {
+  SelectRenderContext,
+  useSelectRenderContext
+};

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

@@ -1,19 +1,81 @@
 export declare const options: {
     value: string;
+    label: string;
+}[];
+export declare const groupOptions: {
+    groupKey: string;
+    label: string;
     title: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+}[];
+export declare const extraOptions: {
+    value: string;
+    label: string;
+    extra: string;
 }[];
+export declare const groupedStoriesOptions: ({
+    groupKey: string;
+    label: string;
+    options: ({
+        value: string;
+        label: string;
+        disabled?: undefined;
+    } | {
+        value: string;
+        label: string;
+        disabled: boolean;
+    })[];
+    value?: undefined;
+} | {
+    value: string;
+    label: string;
+    groupKey?: undefined;
+    options?: undefined;
+})[];
+export declare const nestedGroupedStoriesOptions: ({
+    groupKey: string;
+    label: string;
+    options: {
+        groupKey: string;
+        label: string;
+        options: ({
+            value: string;
+            label: string;
+            disabled?: undefined;
+        } | {
+            value: string;
+            label: string;
+            disabled: boolean;
+        })[];
+    }[];
+} | {
+    groupKey: string;
+    label: string;
+    options: ({
+        value: string;
+        label: string;
+        disabled?: undefined;
+    } | {
+        value: string;
+        label: string;
+        disabled: boolean;
+    })[];
+})[];
 export declare const storiesOptions: ({
-    title: string;
+    label: string;
     value: string;
     icon: import("@emotion/react/jsx-runtime").JSX.Element;
     disabled?: undefined;
 } | {
-    title: string;
+    label: string;
     value: string;
     icon?: undefined;
     disabled?: undefined;
 } | {
-    title: string;
+    label: string;
     value: string;
     disabled: boolean;
     icon?: undefined;

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

@@ -0,0 +1,5 @@
+export declare const DEFAULT_ELEMENT_SIZE = 28;
+export declare const useElementSizesController: () => {
+    getElementSize: (index: number) => number;
+    changeElementSize: (index: number, newSize: number) => void;
+};

package/dist/components/Select/hooks/useElementSizesController.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from "react";
+const DEFAULT_ELEMENT_SIZE = 28;
+const useElementSizesController = () => {
+  const [measuredSizes, setMeasuredSizes] = useState(/* @__PURE__ */ new Map());
+  const changeElementSize = useCallback((index, newSize) => {
+    setMeasuredSizes((prev) => new Map(prev).set(index, newSize));
+  }, []);
+  const getElementSize = useCallback((index) => measuredSizes.get(index) ?? DEFAULT_ELEMENT_SIZE, [measuredSizes]);
+  return {
+    getElementSize,
+    changeElementSize
+  };
+};
+export {
+  DEFAULT_ELEMENT_SIZE,
+  useElementSizesController
+};

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

@@ -1,11 +1,11 @@
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, MutableRefObject } from 'react';
 import { SelectOptionInterface } from '../components/SelectOption/SelectOption.types';
-import { SelectOptionValue } from '../Select.types';
-export declare const useKeyControl: (options: SelectOptionInterface[], onDropdownVisibleChange: (() => void) | undefined, onChange: ((value: SelectOptionValue[], option: SelectOptionInterface[]) => void) | undefined, onSearch: ((searchValue: string) => void) | undefined) => {
+import { SelectOption, SelectOptionValue } from '../Select.types';
+export declare const useKeyControl: (filteredOptionsRef: MutableRefObject<SelectOption[]>, optionsMap: Map<SelectOptionValue, SelectOptionInterface>, onDropdownVisibleChange: (() => void) | undefined, onChange: ((value: SelectOptionValue[], option: SelectOption[]) => void) | undefined, onSearch: ((searchValue: string) => void) | undefined) => {
     currentSelectingIndex: number;
     onKeyControl: (e: KeyboardEvent) => void;
     handleDropdownVisibleChange: () => void;
-    handleChange: (value: SelectOptionValue[], option: SelectOptionInterface[]) => void;
+    handleChange: (value: SelectOptionValue[], option: SelectOption[]) => void;
     handleSearch: (searchValue: string) => void;
     getCurrentSelectingValue: () => SelectOptionValue | null;
 };

package/dist/components/Select/hooks/useKeyControl.js

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 import { isNull } from "lodash-es";
-import { getNextOption } from "../Select.utils.js";
-const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) => {
+import { flattenSelectOptionValues, getNextOption } from "../Select.utils.js";
+const useKeyControl = (filteredOptionsRef, optionsMap, onDropdownVisibleChange, onChange, onSearch) => {
   const [currentStartingPosition, setCurrentStartingPosition] = useState(0);
   const [currentSelectingIndex, setCurrentSelectingIndex] = useState(0);
   const [isKeyControl, setIsControl] = useState(false);
@@ -9,8 +9,10 @@ const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) =>
     if (!isKeyControl) {
       return null;
     }
-    return options[currentSelectingIndex].value;
-  }, [currentSelectingIndex, isKeyControl, options]);
+    const flattenedKeys = flattenSelectOptionValues(filteredOptionsRef.current);
+    const key = flattenedKeys[currentSelectingIndex];
+    return optionsMap.has(key) ? key : null;
+  }, [currentSelectingIndex, filteredOptionsRef, isKeyControl, optionsMap]);
   const setNextIndex = useCallback((nextItemIndex) => {
     if (isNull(nextItemIndex)) {
       return;
@@ -23,7 +25,8 @@ const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) =>
         setIsControl(true);
         return;
       }
-      const nextItemIndex = getNextOption(currentSelectingIndex, options);
+      const flattenedKeys = flattenSelectOptionValues(filteredOptionsRef.current);
+      const nextItemIndex = getNextOption(currentSelectingIndex, flattenedKeys, optionsMap);
       setNextIndex(nextItemIndex);
     }
     if (e.key === "ArrowUp") {
@@ -31,10 +34,11 @@ const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) =>
         setIsControl(true);
         return;
       }
-      const nextItemIndex = getNextOption(currentSelectingIndex, options, true);
+      const flattenedKeys = flattenSelectOptionValues(filteredOptionsRef.current);
+      const nextItemIndex = getNextOption(currentSelectingIndex, flattenedKeys, optionsMap, true);
       setNextIndex(nextItemIndex);
     }
-  }, [currentSelectingIndex, isKeyControl, options, setNextIndex]);
+  }, [currentSelectingIndex, filteredOptionsRef, isKeyControl, optionsMap, setNextIndex]);
   const handleSearch = useCallback((searchValue) => {
     onSearch == null ? void 0 : onSearch(searchValue);
     setCurrentStartingPosition(0);
@@ -44,7 +48,7 @@ const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) =>
     onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange();
     setIsControl(false);
     setCurrentSelectingIndex(currentStartingPosition);
-  }, [currentStartingPosition, onDropdownVisibleChange, setCurrentSelectingIndex]);
+  }, [currentStartingPosition, onDropdownVisibleChange]);
   const handleChange = useCallback((value, option) => {
     onChange == null ? void 0 : onChange(value, option);
     const lastValueElementIndex = value.length - 1;
@@ -53,11 +57,12 @@ const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) =>
       return;
     }
     const lastValue = value[lastValueElementIndex];
-    const lastValueOptionIndex = options.findIndex((item) => item.value === lastValue);
+    const flattenedKeys = flattenSelectOptionValues(filteredOptionsRef.current);
+    const lastValueOptionIndex = flattenedKeys.findIndex((key) => key === lastValue);
     const newStartingIndex = lastValueOptionIndex === -1 ? 0 : lastValueOptionIndex;
     setCurrentStartingPosition(newStartingIndex);
     setCurrentSelectingIndex(newStartingIndex);
-  }, [onChange, options]);
+  }, [filteredOptionsRef, onChange]);
   return {
     currentSelectingIndex,
     onKeyControl,

package/dist/components/Slider/Slider.adapters.d.ts

@@ -0,0 +1,3 @@
+import { RangeSliderProps, SingleSliderProps } from './Slider.types';
+export declare const SingleSliderAdapter: import('react').ForwardRefExoticComponent<SingleSliderProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const RangeSliderAdapter: import('react').ForwardRefExoticComponent<RangeSliderProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Slider/Slider.adapters.js

@@ -0,0 +1,53 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useMemo, useCallback } from "react";
+import { isRangeValues } from "./components/SliderInternal/SliderInternal.types.js";
+import { SliderInternal } from "./components/SliderInternal/SliderInternal.js";
+const SingleSliderAdapter = forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    min = 0,
+    onChange,
+    onChangeComplete,
+    ...rest
+  } = props;
+  const valueArr = useMemo(() => value === void 0 ? void 0 : [value], [value]);
+  const defaultValueArr = useMemo(() => [defaultValue ?? min], [defaultValue, min]);
+  const handleChange = useCallback((v) => {
+    if (!isRangeValues(v)) {
+      onChange == null ? void 0 : onChange(v[0]);
+    }
+  }, [onChange]);
+  const handleChangeComplete = useCallback((v) => {
+    if (!isRangeValues(v)) {
+      onChangeComplete == null ? void 0 : onChangeComplete(v[0]);
+    }
+  }, [onChangeComplete]);
+  return /* @__PURE__ */ jsx(SliderInternal, { ...rest, min, ref, range: false, value: valueArr, defaultValue: defaultValueArr, onChange: onChange ? handleChange : void 0, onChangeComplete: onChangeComplete ? handleChangeComplete : void 0 });
+});
+const RangeSliderAdapter = forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    min = 0,
+    onChange,
+    onChangeComplete,
+    ...rest
+  } = props;
+  const defaultValueArr = useMemo(() => defaultValue ?? [min, min], [defaultValue, min]);
+  const handleChange = useCallback((v) => {
+    if (isRangeValues(v)) {
+      onChange == null ? void 0 : onChange([v[0], v[1]]);
+    }
+  }, [onChange]);
+  const handleChangeComplete = useCallback((v) => {
+    if (isRangeValues(v)) {
+      onChangeComplete == null ? void 0 : onChangeComplete([v[0], v[1]]);
+    }
+  }, [onChangeComplete]);
+  return /* @__PURE__ */ jsx(SliderInternal, { ...rest, min, ref, range: true, value, defaultValue: defaultValueArr, onChange: onChange ? handleChange : void 0, onChangeComplete: onChangeComplete ? handleChangeComplete : void 0 });
+});
+export {
+  RangeSliderAdapter,
+  SingleSliderAdapter
+};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,2 @@
+import { SliderProps } from './Slider.types';
+export declare const Slider: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,13 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { RangeSliderAdapter, SingleSliderAdapter } from "./Slider.adapters.js";
+const SliderComponent = forwardRef((props, ref) => {
+  if (props.range) {
+    return /* @__PURE__ */ jsx(RangeSliderAdapter, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx(SingleSliderAdapter, { ...props, ref });
+});
+const Slider = memo(SliderComponent);
+export {
+  Slider
+};

package/dist/components/Slider/Slider.styles.d.ts

@@ -0,0 +1,8 @@
+import { Interpolation } from '@emotion/react';
+import { Theme } from 'themes';
+import { SliderTokens } from './Slider.tokens';
+export declare const getRootStyle: ({ tokens, vertical, disabled, }: {
+    tokens: SliderTokens;
+    vertical: boolean;
+    disabled: boolean;
+}) => (theme: Theme) => Interpolation;

package/dist/components/Slider/Slider.styles.js

@@ -0,0 +1,31 @@
+const getRootStyle = ({
+  tokens,
+  vertical,
+  disabled
+}) => (theme) => ({
+  position: "relative",
+  boxSizing: "content-box",
+  cursor: disabled ? "not-allowed" : "pointer",
+  display: "flex",
+  userSelect: "none",
+  touchAction: "none",
+  ...vertical ? {
+    marginBlock: theme.x2,
+    marginInline: tokens.sliderHandleSpacing,
+    width: theme.x1,
+    height: `calc(100% - ${theme.x4}px)`,
+    minHeight: 0,
+    paddingInline: theme.x1,
+    justifyContent: "center"
+  } : {
+    marginBlock: tokens.sliderHandleSpacing,
+    marginInline: theme.x2,
+    width: `calc(100% - ${theme.x4}px)`,
+    height: theme.x1,
+    paddingBlock: theme.x1,
+    alignItems: "center"
+  }
+});
+export {
+  getRootStyle
+};

package/dist/components/Slider/Slider.tokens.d.ts

@@ -0,0 +1,21 @@
+import { Theme } from 'themes';
+export declare const getSliderTokens: (theme: Theme) => {
+    readonly sliderDot: "#FFFFFF";
+    readonly sliderDefault: "#0CB3B3";
+    readonly sliderHover: "#50CCC4";
+    readonly sliderDisabled: "#BFBFBF";
+    readonly sliderRail: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    readonly sliderRailHover: `rgba(${number}, ${number}, ${number}, 0.12)`;
+    readonly sliderBorderRadius: 100;
+    /**
+     * @local Нет в Figma — внутренняя инициатива.
+     * Отступ вокруг slider'а под зону активного handle (handle растёт до 16px при hover/active).
+     */
+    readonly sliderHandleSpacing: 8;
+};
+export type SliderTokens = ReturnType<typeof getSliderTokens>;
+declare module "../ConfigProvider" {
+    interface Tokens {
+        Slider?: Partial<SliderTokens>;
+    }
+}