@infomaximum/ui-kit 0.9.1

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

@@ -0,0 +1,135 @@
+import { Theme } from 'themes';
+import { maxTagCountType, SelectStatus, VariantType } from './Select.types';
+export declare const getSelectDefaultStyle: (status: SelectStatus, disabled: boolean, variant: VariantType, multiple: boolean, isHover: boolean, maxTagCount?: maxTagCountType) => {
+    wrapper: (theme: Theme) => {
+        readonly display: "inline-flex";
+        readonly flexDirection: "column";
+        readonly position: "relative";
+        readonly borderRadius: 4;
+        readonly border: string;
+        readonly outline: "none";
+        readonly height: 28 | "fit-content";
+        readonly boxSizing: "border-box";
+        readonly overflow: "hidden";
+        readonly justifyContent: "center";
+        readonly ":hover": {
+            readonly border: string;
+        };
+        readonly ":active, :focus, :focus-within, :focus-visible": {
+            readonly border: string;
+            readonly boxShadow: string;
+        };
+    };
+    body: (theme: Theme) => {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly gap: 8;
+        readonly height: 28 | "fit-content";
+        readonly padding: string;
+        readonly borderRadius: 4;
+        readonly background: "#F0F0F0" | "#FFFFFF";
+        readonly boxSizing: "border-box";
+        readonly cursor: "pointer" | "not-allowed";
+        readonly overflow: "hidden";
+        readonly width: "100%";
+        readonly ".clean-button": {
+            readonly display: "none";
+        };
+        readonly ":hover": {
+            readonly ".clean-button": {
+                readonly display: "block" | "none";
+            };
+        };
+    };
+    prefixAndContent: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        gap: 4;
+        flex: string;
+        paddingLeft: number;
+    };
+    content: (theme: Theme) => {
+        readonly color: "#262626" | "#8C8C8C" | "#FF4D4F";
+        readonly overflow: "hidden";
+        readonly whiteSpace: "nowrap";
+        readonly textOverflow: "ellipsis";
+        readonly gap: 4;
+        readonly flexWrap: "nowrap" | "wrap";
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 14;
+        readonly lineHeight: "20px";
+        readonly display: "flex";
+        readonly flex: "1 1 auto";
+    };
+    placeholder: (theme: Theme) => {
+        color: "#8C8C8C" | "#BFBFBF";
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+    };
+    prefix: (isIcon: boolean) => (theme: Theme) => {
+        color: "#8C8C8C" | "#BFBFBF" | "#FF4D4F";
+        fontFamily?: "Roboto" | undefined;
+        fontSize: 14 | 16;
+        lineHeight?: "20px" | undefined;
+        display: string;
+        justifyContent: string;
+        alineItems: string;
+    };
+    suffixIcon: (theme: Theme) => {
+        color: "#8C8C8C" | "#BFBFBF";
+        fontSize: 16;
+        display: string;
+        justifyContent: string;
+        alineItems: string;
+    };
+    cleanIcon: (theme: Theme) => {
+        readonly visibility: "hidden" | "visible";
+        readonly color: "#BFBFBF";
+        readonly fontSize: 16;
+        readonly ":hover": {
+            color: "#262626";
+        };
+    };
+    drawerIcon: (theme: Theme) => {
+        color: "#BFBFBF";
+        fontSize: 16;
+        ":hover": {
+            color: "#262626";
+        };
+    };
+    searchInput: (theme: Theme) => {
+        color: "#262626" | "#8C8C8C";
+        maxWidth: string;
+        paddingLeft: number;
+        background: string;
+        "::placeholder": {
+            color: "#8C8C8C" | "#BFBFBF";
+        };
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        border: string;
+        height: string;
+        outline: string;
+    };
+    tagsWrapper: (theme: Theme) => {
+        readonly display: "flex";
+        readonly gap: 4;
+        readonly flex: "1 1 auto";
+        readonly overflow: "hidden";
+        readonly position: "relative";
+        readonly maxHeight: "100%";
+        readonly flexWrap: "nowrap" | "wrap";
+    };
+    mainElements: (theme: Theme) => {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly flexWrap: "nowrap" | "wrap";
+        readonly gap: 4;
+        readonly flex: "1 1 auto";
+    };
+};
+export declare const getSelectSearchInputWidthStyle: (isMultiple: boolean, isEmpty: boolean, lettersNumber: number) => {
+    width: number;
+} | undefined;

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

@@ -0,0 +1,210 @@
+import { getSelectTokens } from "./Select.tokens.js";
+const cleanButtonSelector = ".clean-button";
+const lettersWidthOfSearchInput = 7;
+const iconStyles = (theme, disabled) => {
+  const selectTokens = getSelectTokens(theme);
+  return {
+    color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectPlaceholder,
+    fontSize: theme.iconM,
+    display: "inline-flex",
+    justifyContent: "center",
+    alineItems: "center"
+  };
+};
+const getBorderColor = (selectTokens, isError) => {
+  if (isError) {
+    return selectTokens.selectBorderDanger;
+  }
+  return selectTokens.selectBorder;
+};
+const getBorder = (selectTokens, isError, variant) => {
+  if (variant === "borderless") {
+    return "none";
+  }
+  return `1px solid ${getBorderColor(selectTokens, isError)}`;
+};
+const getHoveredBorder = (selectTokens, disabled, isError) => {
+  if (isError) {
+    return selectTokens.selectBorderDangerHover;
+  }
+  if (disabled) {
+    return selectTokens.selectBorder;
+  }
+  return selectTokens.selectBorderHover;
+};
+const getActiveBorder = (selectTokens, disabled, isError) => {
+  if (isError) {
+    return selectTokens.selectBorderDanger;
+  }
+  if (disabled) {
+    return selectTokens.selectBorder;
+  }
+  return selectTokens.selectBorderActive;
+};
+const getLabelColor = (selectTokens, isError, variant, disabled) => {
+  if (disabled) {
+    return selectTokens.selectTextDisabled;
+  }
+  if (isError && variant === "borderless") {
+    return selectTokens.selectTextDanger;
+  }
+  return selectTokens.selectText;
+};
+const getBodyPadding = (selectTokens, isMultipleAndNotResponsive, multiple) => {
+  const verticalPadding = isMultipleAndNotResponsive ? selectTokens.selectPaddingVertical - 1 : selectTokens.selectPaddingVertical;
+  if (multiple) {
+    return `${verticalPadding}px ${selectTokens.selectPaddingHorizontal}px ${verticalPadding}px ${selectTokens.selectPaddingVertical}px`;
+  }
+  return `${verticalPadding}px ${selectTokens.selectPaddingHorizontal}px`;
+};
+const getIconStyles = (theme) => {
+  const selectTokens = getSelectTokens(theme);
+  return {
+    color: selectTokens.selectPlaceholder,
+    fontSize: theme.iconM,
+    ":hover": {
+      color: selectTokens.selectText
+    }
+  };
+};
+const getSelectDefaultStyle = (status, disabled, variant, multiple, isHover, maxTagCount) => {
+  const isError = status === "error";
+  const isResponsive = maxTagCount === "responsive";
+  const isOutlined = variant === "outlined";
+  const isMultipleAndNotResponsive = multiple && !isResponsive;
+  return {
+    wrapper: (theme) => {
+      const selectTokens = getSelectTokens(theme);
+      return {
+        display: "inline-flex",
+        flexDirection: "column",
+        position: "relative",
+        borderRadius: theme.borderRadiusM,
+        border: getBorder(selectTokens, isError, variant),
+        outline: "none",
+        height: isMultipleAndNotResponsive ? "fit-content" : theme.controlHeightM,
+        boxSizing: "border-box",
+        overflow: "hidden",
+        justifyContent: "center",
+        ":hover": {
+          border: isOutlined ? `1px solid ${getHoveredBorder(selectTokens, disabled, isError)}` : "none"
+        },
+        ":active, :focus, :focus-within, :focus-visible": {
+          border: isOutlined ? `1px solid ${getActiveBorder(selectTokens, disabled, isError)}` : "none",
+          boxShadow: disabled ? "none" : `0px 0px 4px 0px ${theme.fieldFocused}`
+        }
+      };
+    },
+    body: (theme) => {
+      const selectTokens = getSelectTokens(theme);
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: theme.marginM,
+        height: isResponsive ? theme.controlHeightM : "fit-content",
+        padding: getBodyPadding(selectTokens, isMultipleAndNotResponsive, multiple),
+        borderRadius: theme.borderRadiusM,
+        background: disabled && isOutlined ? selectTokens.selectBgDisabled : selectTokens.selectBg,
+        boxSizing: "border-box",
+        cursor: disabled ? "not-allowed" : "pointer",
+        overflow: "hidden",
+        width: "100%",
+        [cleanButtonSelector]: {
+          display: "none"
+        },
+        ":hover": {
+          [cleanButtonSelector]: {
+            display: disabled ? "none" : "block"
+          }
+        }
+      };
+    },
+    prefixAndContent: (theme) => ({
+      display: "inline-flex",
+      alignItems: "center",
+      gap: theme.marginXS,
+      flex: "1 1 auto",
+      paddingLeft: multiple ? theme.x2 : 0
+    }),
+    content: (theme) => {
+      const selectTokens = getSelectTokens(theme);
+      return {
+        display: "flex",
+        flex: "1 1 auto",
+        ...theme.typography.body2,
+        color: getLabelColor(selectTokens, isError, variant, disabled),
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        gap: theme.spaceXS,
+        flexWrap: isResponsive ? "nowrap" : "wrap"
+      };
+    },
+    placeholder: (theme) => {
+      const selectTokens = getSelectTokens(theme);
+      return {
+        ...theme.typography.body2,
+        color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectPlaceholder
+      };
+    },
+    prefix: (isIcon) => (theme) => {
+      const selectTokens = getSelectTokens(theme);
+      const iconStyle = iconStyles(theme, disabled);
+      return {
+        ...iconStyle,
+        ...!isIcon ? theme.typography.body2 : {},
+        color: isError ? selectTokens.selectTextDanger : iconStyle.color
+      };
+    },
+    suffixIcon: (theme) => iconStyles(theme, disabled),
+    cleanIcon: (theme) => ({
+      ...getIconStyles(theme),
+      visibility: isHover ? "visible" : "hidden"
+    }),
+    drawerIcon: (theme) => getIconStyles(theme),
+    searchInput: (theme) => {
+      const selectTokens = getSelectTokens(theme);
+      return {
+        border: "none",
+        height: "100%",
+        outline: "none",
+        ...theme.typography.body2,
+        color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectText,
+        maxWidth: "80%",
+        paddingLeft: 0,
+        background: "inherit",
+        "::placeholder": {
+          color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectPlaceholder
+        }
+      };
+    },
+    tagsWrapper: (theme) => ({
+      display: "flex",
+      gap: theme.spaceXS,
+      flex: "1 1 auto",
+      overflow: "hidden",
+      position: "relative",
+      maxHeight: "100%",
+      flexWrap: isResponsive ? "nowrap" : "wrap"
+    }),
+    mainElements: (theme) => ({
+      display: "inline-flex",
+      alignItems: "center",
+      flexWrap: isResponsive ? "nowrap" : "wrap",
+      gap: theme.spaceXS,
+      flex: "1 1 auto"
+    })
+  };
+};
+const getSelectSearchInputWidthStyle = (isMultiple, isEmpty, lettersNumber) => {
+  if (!isMultiple || isEmpty) {
+    return;
+  }
+  return {
+    width: lettersNumber * lettersWidthOfSearchInput
+  };
+};
+export {
+  getSelectDefaultStyle,
+  getSelectSearchInputWidthStyle
+};

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

@@ -0,0 +1,27 @@
+import { Theme } from 'themes';
+export declare const getSelectTokens: (theme: Theme) => {
+    selectBorder: "#D9D9D9";
+    selectBorderHover: "#50CCC4";
+    selectBorderActive: "#0CB3B3";
+    selectBorderDanger: "#FF4D4F";
+    selectBorderDangerHover: "#FF7875";
+    selectBg: "#FFFFFF";
+    selectBgDisabled: "#F0F0F0";
+    selectPlaceholder: "#BFBFBF";
+    selectText: "#262626";
+    selectTextDisabled: "#8C8C8C";
+    selectTextDanger: "#FF4D4F";
+    selectMultipleItemBorder: "#D9D9D9";
+    selectMultipleItemBg: "#F5F5F5";
+    selectMultipleItemBgDisabled: "#D9D9D9";
+    selectOptionText: "#262626";
+    selectOptionTextSelected: "#0CB3B3";
+    selectOptionTextDisabled: "#8C8C8C";
+    selectOptionBgHover: "#F5F5F5";
+    selectPaddingVertical: 4;
+    selectPaddingHorizontal: 12;
+    selectPaddingHorizontalTag: 4;
+    selectOptionPaddingVertical: 4;
+    selectOptionPaddingHorizontal: 8;
+};
+export type SelectTokensType = ReturnType<typeof getSelectTokens>;

package/dist/components/Select/Select.tokens.js

@@ -0,0 +1,28 @@
+const getSelectTokens = (theme) => ({
+  selectBorder: theme.lineBorder,
+  selectBorderHover: theme.primaryHover,
+  selectBorderActive: theme.primaryBase,
+  selectBorderDanger: theme.dangerBase,
+  selectBorderDangerHover: theme.dangerHover,
+  selectBg: theme.bgContainer,
+  selectBgDisabled: theme.bgContainerDisabled,
+  selectPlaceholder: theme.textHint,
+  selectText: theme.textPrimary,
+  selectTextDisabled: theme.textDisabled,
+  selectTextDanger: theme.dangerBase,
+  selectMultipleItemBorder: theme.tagNeutralBorder,
+  selectMultipleItemBg: theme.tagNeutralBg,
+  selectMultipleItemBgDisabled: theme.bgContainerDisabledContrast,
+  selectOptionText: theme.textPrimary,
+  selectOptionTextSelected: theme.primaryBase,
+  selectOptionTextDisabled: theme.textDisabled,
+  selectOptionBgHover: theme.bgContainerHover,
+  selectPaddingVertical: theme.x1,
+  selectPaddingHorizontal: theme.x3,
+  selectPaddingHorizontalTag: theme.x1,
+  selectOptionPaddingVertical: theme.x1,
+  selectOptionPaddingHorizontal: theme.x2
+});
+export {
+  getSelectTokens
+};

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

@@ -0,0 +1,89 @@
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import { SelectOptionInterface, SelectOptionProps, SelectOptionValue } from './components/SelectOption/SelectOption.types';
+import { Theme } from '../../themes';
+import { Interpolation } from '@emotion/react';
+import { DropdownMatchSelectWidthType, DropdownStyles } from './components/SelectOptionList/SelectOptionList.types';
+import { NarrowedElement, ReferenceType } from '@floating-ui/react';
+export type SelectStatus = "default" | "error";
+export type VariantType = "outlined" | "borderless";
+export type ModeType = "single" | "multiple";
+export type maxTagCountType = number | "responsive";
+export interface SelectStyles {
+    dropdownStyle?: DropdownStyles;
+    wrapper?: (theme: Theme) => Interpolation;
+    body?: (theme: Theme) => Interpolation;
+    prefixAndContent?: (theme: Theme) => Interpolation;
+    content?: (theme: Theme) => Interpolation;
+    placeholder?: (theme: Theme) => Interpolation;
+    prefix?: (theme: Theme) => Interpolation;
+    suffixIcon?: (theme: Theme) => Interpolation;
+    cleanIcon?: (theme: Theme) => Interpolation;
+    drawerIcon?: (theme: Theme) => Interpolation;
+}
+export interface SelectProps {
+    options?: SelectOptionInterface[];
+    mode?: ModeType;
+    variant?: VariantType;
+    defaultValue?: SelectOptionValue | SelectOptionValue[];
+    defaultOpen?: boolean;
+    value?: SelectOptionValue | SelectOptionValue[];
+    open?: boolean;
+    defaultActiveFirstOption?: boolean;
+    placeholder?: string;
+    dropdownMaxHeight?: number;
+    dropdownMinWidth?: number;
+    allowClear?: boolean;
+    autoFocus?: boolean;
+    prefix?: ReactNode;
+    suffixIcon?: ReactNode;
+    status?: SelectStatus;
+    disabled?: boolean;
+    dropdownPrompt?: string;
+    loading?: boolean;
+    dropdownClassName?: string;
+    dropdownMatchSelectWidth?: DropdownMatchSelectWidthType;
+    placement?: PlacementType;
+    virtual?: boolean;
+    emptyContent?: ReactNode;
+    showSearch?: boolean;
+    optionFilterProp?: string;
+    optionLabelProp?: string;
+    filterOption?: boolean | ((inputValue: string, option: SelectOptionInterface) => boolean);
+    searchValue?: string;
+    notFoundContent?: ReactNode;
+    drawer?: boolean;
+    filterSort?: (optionA: SelectOptionInterface, optionB: SelectOptionInterface, searchValue: string) => number;
+    styles?: SelectStyles;
+    autoClearSearchValue?: boolean;
+    maxTagCount?: maxTagCountType;
+    maxTagPlaceholder?: ((omittedValues: SelectOptionInterface[]) => ReactNode) | ReactNode;
+    maxTagTextLength?: number;
+    dropdownRender?: (originNode: ReactNode) => ReactNode;
+    optionRender?: (option: SelectOptionProps) => ReactNode;
+    labelRender?: (props: LabelInValueType) => ReactNode;
+    tagRender?: (label: string) => ReactNode;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (value: SelectOptionValue[], option: SelectOptionInterface[]) => void;
+    onClear?: () => void;
+    onDropdownVisibleChange?: () => void;
+    onInputKeyDown?: (event: KeyboardEvent) => void;
+    onSelect?: (value: SelectOptionValue, option: SelectOptionInterface) => void;
+    getPopupContainer?: () => HTMLElement;
+    onSearch?: (searchValue: string) => void;
+    onDeselect?: (value: SelectOptionValue) => void;
+}
+export interface LabelInValueType {
+    label: ReactNode;
+    value: SelectOptionValue;
+}
+export interface Refs<RT extends ReferenceType = ReferenceType> {
+    reference: React.MutableRefObject<RT | null>;
+    floating: React.MutableRefObject<HTMLElement | null>;
+    domReference: React.MutableRefObject<NarrowedElement<RT> | null>;
+    setReference(node: RT | null): void;
+    setFloating(node: HTMLElement | null): void;
+    setPositionReference(node: RT | null): void;
+}
+export type PlacementType = "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+export type UseSearchProps = Required<Pick<SelectProps, "options" | "optionFilterProp" | "filterOption">> & Pick<SelectProps, "onSearch" | "searchValue" | "filterSort">;

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

@@ -0,0 +1,10 @@
+import { Placement } from '@floating-ui/react';
+import { maxTagCountType, PlacementType } from './Select.types';
+import { SelectOptionInterface, SelectOptionValue } from './components/SelectOption/SelectOption.types';
+export declare const additionalElements: string[];
+export declare const convertSelectPlacement: (placement: PlacementType) => Placement;
+export declare const getNextOption: (currentIndex: number, options: SelectOptionInterface[], isDecrement?: boolean) => number | null;
+export declare const isKeyOfObject: <T extends object>(obj: T, key: string | number | symbol) => key is keyof T;
+export declare const getLabelByValue: (value: SelectOptionValue, optionsMap: Map<SelectOptionValue, SelectOptionInterface>, optionLabelProp: string) => string | undefined;
+export declare const getLabel: (values: SelectOptionValue[], optionsMap: Map<SelectOptionValue, SelectOptionInterface>, optionLabelProp: string) => string[];
+export declare const getVisibleLabels: (labels: string[], values: SelectOptionValue[], maxTagCount: maxTagCountType | undefined, isItemHidden: Map<string | number, boolean>) => string[];

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

@@ -0,0 +1,59 @@
+import { isUndefined, isNumber } from "lodash-es";
+const additionalElements = ["tag-placeholder", "search-input", "clean-button"];
+const placementDictionary = {
+  bottomLeft: "bottom-start",
+  bottomRight: "bottom-end",
+  topLeft: "top-start",
+  topRight: "top-end"
+};
+const convertSelectPlacement = (placement) => {
+  return placementDictionary[placement];
+};
+const getNextOption = (currentIndex, options, isDecrement = false) => {
+  const nextIndex = isDecrement ? currentIndex - 1 : currentIndex + 1;
+  if (nextIndex < 0 || nextIndex >= options.length) {
+    return null;
+  }
+  const nextOption = options[nextIndex];
+  if (!nextOption.disabled) {
+    return nextIndex;
+  }
+  return getNextOption(nextIndex, options, isDecrement);
+};
+const isKeyOfObject = (obj, key) => {
+  return key in obj;
+};
+const getLabelByValue = (value, optionsMap, optionLabelProp) => {
+  var _a;
+  const option = optionsMap.get(value);
+  if (isUndefined(option)) {
+    return void 0;
+  }
+  return isKeyOfObject(option, optionLabelProp) ? (_a = option[optionLabelProp]) == null ? void 0 : _a.toString() : void 0;
+};
+const getLabel = (values, optionsMap, optionLabelProp) => {
+  return values.map((value) => getLabelByValue(value, optionsMap, optionLabelProp) ?? value.toString());
+};
+const getVisibleLabels = (labels, values, maxTagCount, isItemHidden) => {
+  if (isUndefined(maxTagCount)) {
+    return labels;
+  }
+  if (isNumber(maxTagCount)) {
+    return labels.slice(0, maxTagCount);
+  }
+  return values.reduce((acc, value, index) => {
+    if (!isItemHidden.get(value)) {
+      return [...acc, labels[index]];
+    }
+    return acc;
+  }, []);
+};
+export {
+  additionalElements,
+  convertSelectPlacement,
+  getLabel,
+  getLabelByValue,
+  getNextOption,
+  getVisibleLabels,
+  isKeyOfObject
+};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SelectOptionProps } from './SelectOption.types';
+export declare const SelectOption: FC<SelectOptionProps>;

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

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { CheckOutlined } from "@infomaximum/icons";
+import { getSelectOptionStyle } from "./SelectOption.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const SelectOption = memo(({
+  title,
+  value,
+  selected = false,
+  disabled = false,
+  icon,
+  index,
+  isSelecting,
+  mode,
+  setValue,
+  closeOptionList,
+  returnFocusToWrapper,
+  removeValue
+}) => {
+  const theme = useTheme();
+  const selectOptionStyle = getSelectOptionStyle(selected, disabled, isSelecting);
+  const clickHandle = () => {
+    if (disabled) {
+      return;
+    }
+    if (mode === "multiple") {
+      if (selected) {
+        removeValue(value);
+      } else {
+        setValue(value, index);
+      }
+      returnFocusToWrapper();
+      return;
+    }
+    setValue(value, index);
+    closeOptionList();
+    returnFocusToWrapper();
+  };
+  const keyDownHandler = (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      clickHandle();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { css: selectOptionStyle.wrapper(theme), onClick: clickHandle, onKeyDown: keyDownHandler, title, children: [
+    /* @__PURE__ */ jsxs("span", { css: selectOptionStyle.content(theme), children: [
+      icon && /* @__PURE__ */ jsx("span", { css: selectOptionStyle.icon(theme), children: icon }),
+      /* @__PURE__ */ jsx("span", { css: selectOptionStyle.text, children: title })
+    ] }),
+    selected && /* @__PURE__ */ jsx("span", { css: selectOptionStyle.icon(theme), children: /* @__PURE__ */ jsx(CheckOutlined, {}) })
+  ] });
+});
+export {
+  SelectOption
+};

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

@@ -0,0 +1,41 @@
+import { Theme } from 'themes';
+export declare const getSelectOptionStyle: (selected: boolean, disabled: boolean, isSelecting: boolean) => {
+    wrapper: (theme: Theme) => {
+        readonly color: "#262626" | "#8C8C8C" | "#0CB3B3";
+        readonly height: 28;
+        readonly boxSizing: "border-box";
+        readonly transition: "background .2s, color .2s";
+        readonly cursor: "pointer" | "not-allowed";
+        readonly background: "#F5F5F5" | "unset";
+        readonly ":hover, :focus, focus-visible": {
+            readonly background: "#F5F5F5" | "unset";
+            readonly outline: "none";
+        };
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 14;
+        readonly lineHeight: "20px";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly gap: 8;
+        readonly padding: "4px 8px";
+        readonly borderRadius: 4;
+    };
+    content: (theme: Theme) => {
+        readonly display: "inline-flex";
+        readonly gap: 4;
+        readonly width: string;
+        readonly flex: "1 1 auto";
+        readonly flexWrap: "nowrap";
+    };
+    text: {
+        display: string;
+        overflow: string;
+        whiteSpace: string;
+        textOverflow: string;
+        width: string;
+    };
+    icon: (theme: Theme) => {
+        fontSize: 16;
+    };
+};