@jenesei-software/jenesei-kit-react 1.3.19 → 1.3.20

package/build/component.styles-SZTM0cRW.js

@@ -1,1046 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { ListLanguage, MapThemeList } from "./consts.es.js";
-import { b as ErrorMessage, a as addError } from "./style-BzxSHZDV.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-BzunMIsv.js";
-import { u as useMergeRefs } from "./floating-ui.react-Byi6bLb1.js";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import moment from "moment";
-import { memo, useMemo, useRef, useState, useCallback, useEffect } from "react";
-import styled, { useTheme, css } from "styled-components";
-import { B as Button } from "./component-jPLOz52P.js";
-import { I as Icon } from "./component.styles-CtZeOnGH.js";
-import { i as Typography, u as usePopover, P as Popover } from "./component-eqTj4VVc.js";
-import { c as addFont, j as addRemoveOutline } from "./style-RL73t3JD.js";
-import { a as addSX } from "./style-plT9Ah7t.js";
-import { motion } from "framer-motion";
-import { T as TextArea } from "./component.styles-cMafDDpP.js";
-const DEFAULT_LABEL_SELECT_ALL = "Select all option";
-const DEFAULT_LABEL_PLACEHOLDER = "Select an option";
-const DEFAULT_LABEL_EMPTY_OPTION = "No options available";
-const DEFAULT_LABEL_AND_MORE = (count) => `+${count} more`;
-const DEFAULT_LABEL_ADD_OPTION = (value) => `Add "${value}" option`;
-const DEFAULT_MAX_VIEW_SELECT = 2;
-const DEFAULT_MAX_VIEW_DROPDOWN = 5;
-const DEFAULT_MIN_VIEW_DROPDOWN = 1;
-const DEFAULT_OVERSCAN = 1;
-const Select = (props) => {
-  var _a;
-  const sizeHeight = useMemo(() => KEY_SIZE_DATA[props.size].height, [props.size]);
-  const sizePadding = useMemo(() => KEY_SIZE_DATA[props.size].padding, [props.size]);
-  const sizeRadius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
-  const {
-    isOpen,
-    close,
-    open,
-    refReference: refReferencePopover,
-    refFloating: refFloatingPopover,
-    floatingStyles,
-    toggle
-  } = usePopover({
-    placement: "bottom-start",
-    offset: sizePadding,
-    mode: "independence",
-    isClickOutside: true,
-    isWidthAsContent: true,
-    isDisabled: props == null ? void 0 : props.isDisabled,
-    onBlur: props.onBlur,
-    onFocus: props.onFocus
-  });
-  const refTextArea = useRef(null);
-  const refDropdownList = useRef(null);
-  const refReference = useMergeRefs([props.refReference, refReferencePopover]);
-  const refFloating = useMergeRefs([props.refFloating, refFloatingPopover]);
-  const labelSelectAll = useMemo(() => props.labelSelectAll ?? DEFAULT_LABEL_SELECT_ALL, [props.labelSelectAll]);
-  const labelPlaceholder = useMemo(() => props.labelPlaceholder ?? DEFAULT_LABEL_PLACEHOLDER, [props.labelPlaceholder]);
-  const labelEmptyOption = useMemo(
-    () => props.labelEmptyOption ?? DEFAULT_LABEL_EMPTY_OPTION,
-    [props.labelEmptyOption]
-  );
-  const labelAndMore = useMemo(() => props.labelAndMore ?? DEFAULT_LABEL_AND_MORE, [props.labelAndMore]);
-  const labelAddOption = useMemo(() => props.labelAddOption ?? DEFAULT_LABEL_ADD_OPTION, [props.labelAddOption]);
-  const maxViewSelect = useMemo(() => props.maxViewSelect ?? DEFAULT_MAX_VIEW_SELECT, [props.maxViewSelect]);
-  const maxViewDropdown = useMemo(() => props.maxViewDropdown ?? DEFAULT_MAX_VIEW_DROPDOWN, [props.maxViewDropdown]);
-  const minViewDropdown = useMemo(() => props.minViewDropdown ?? DEFAULT_MIN_VIEW_DROPDOWN, [props.minViewDropdown]);
-  const isAll = useMemo(
-    () => props.value.length === props.option.length || props.value.length === props.optionAllLength,
-    [props.option.length, props.optionAllLength, props.value.length]
-  );
-  const isHaveOption = useMemo(() => !!props.option.length, [props.option.length]);
-  const isHaveValue = useMemo(() => !!props.value.length, [props.value.length]);
-  const isShowAddOption = useMemo(
-    () => props.valueSearch && props.isShowAddOption,
-    [props.valueSearch, props.isShowAddOption]
-  );
-  const [isShowSearch, setIsShowSearch] = useState(false);
-  const optionsLength = useMemo(() => {
-    if (props.isNotShowDisabledOptions) {
-      return props.option.filter((option) => !option.isDisabled).length;
-    } else {
-      return props.option.length;
-    }
-  }, [props.option, props.isNotShowDisabledOptions]);
-  const heightDropdownList = useMemo(
-    () => sizeHeight * (optionsLength < maxViewDropdown ? optionsLength < minViewDropdown ? optionsLength : optionsLength : maxViewDropdown),
-    [sizeHeight, optionsLength, maxViewDropdown, minViewDropdown]
-  );
-  const heightPopover = useMemo(() => {
-    const selectAll = props.isShowSelectAll && isHaveOption ? sizeHeight : 0;
-    const selectNoOption = !isHaveOption ? sizeHeight : 0;
-    const selectList = isHaveOption ? heightDropdownList : 0;
-    const selectAdd = isShowAddOption ? sizeHeight : 0;
-    const sum = (selectAll !== 0 ? 1 : 0) + (selectNoOption !== 0 ? 1 : 0) + (selectList !== 0 ? 1 : 0) + (selectAdd !== 0 ? 1 : 0);
-    const padding = sum <= 1 ? 0 : (sum - 1) * (sizePadding / 2.8);
-    return selectAll + selectNoOption + selectList + selectAdd + padding;
-  }, [props.isShowSelectAll, sizeHeight, isHaveOption, sizePadding, heightDropdownList, isShowAddOption]);
-  const isValueMoreMaxViewSelect = useMemo(
-    () => props.value.length > maxViewSelect,
-    [maxViewSelect, props.value.length]
-  );
-  const isShowIconSearchClear = useMemo(
-    () => props.isShowIconSearchClear && props.valueSearch,
-    [props.isShowIconSearchClear, props.valueSearch]
-  );
-  const isShowButtonList = useMemo(
-    () => isShowIconSearchClear || props.isShowIconToggle || props.isShowIconFetching && props.isFetching,
-    [isShowIconSearchClear, props.isShowIconToggle, props.isShowIconFetching, props.isFetching]
-  );
-  const isShowScroll = useMemo(() => optionsLength > maxViewDropdown, [maxViewDropdown, optionsLength]);
-  const isSelectedItem = useCallback(
-    (option) => {
-      return isAll || props.value.some((val) => val.value === option.value);
-    },
-    [isAll, props.value]
-  );
-  const isShowDropdownSettingsList = useMemo(
-    () => isShowAddOption || props.isShowSelectAll && isHaveOption || !isHaveOption,
-    [isHaveOption, isShowAddOption, props.isShowSelectAll]
-  );
-  const listVirtualizer = useVirtualizer({
-    count: optionsLength,
-    estimateSize: props.getEstimateSize ? props.getEstimateSize : () => sizeHeight,
-    getScrollElement: () => refDropdownList.current,
-    overscan: DEFAULT_OVERSCAN,
-    paddingEnd: 0
-  });
-  const onChangeShowSearch = useCallback(
-    (show) => {
-      if (props.isSearch && !props.isDisabled) {
-        setIsShowSearch(show);
-      } else {
-        setIsShowSearch(false);
-      }
-    },
-    [props.isDisabled, props.isSearch]
-  );
-  const onClick = useCallback(
-    (option) => {
-      let newValues = [];
-      const optionValue = option.value;
-      const findIndex = (val) => val.value === optionValue;
-      const index = props.value.findIndex(findIndex);
-      const isFind = index !== -1;
-      if (props.isMulti) {
-        if (isFind) {
-          newValues = [...props.value.slice(0, index), ...props.value.slice(index + 1)];
-        } else {
-          newValues = [...props.value, option];
-        }
-      } else {
-        if (isFind && !props.isStayValueAfterSelect) {
-          newValues = [...props.value.slice(0, index), ...props.value.slice(index + 1)];
-        } else {
-          newValues = [option];
-        }
-      }
-      props.onChange(newValues);
-      onChangeShowSearch(!!props.isStaySearchAfterSelect);
-      if (props.isOnClickOptionClose) {
-        close();
-      }
-    },
-    [close, onChangeShowSearch, props]
-  );
-  const onClickAll = useCallback(() => {
-    var _a2;
-    (_a2 = props.onChangeAll) == null ? void 0 : _a2.call(props, isAll ? [] : props.option, !isAll);
-    onChangeShowSearch(!!props.isStaySearchAfterSelect);
-    if (props.isOnClickOptionClose) {
-      close();
-    }
-  }, [close, isAll, onChangeShowSearch, props]);
-  const onClearSearch = useCallback(() => {
-    var _a2;
-    (_a2 = props.onChangeSearch) == null ? void 0 : _a2.call(props, "");
-  }, [props]);
-  const onScroll = useCallback(
-    (containerRefElement) => {
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        if (scrollHeight - scrollTop - clientHeight < heightDropdownList && !props.isFetching && props.fetchNextPage) {
-          props.fetchNextPage();
-        }
-      }
-    },
-    [heightDropdownList, props]
-  );
-  const onAddOption = useCallback(
-    (value) => {
-      var _a2, _b;
-      (_a2 = props.onAddOption) == null ? void 0 : _a2.call(props, value);
-      (_b = props.onChangeSearch) == null ? void 0 : _b.call(props, "");
-    },
-    [props]
-  );
-  useEffect(() => {
-    onChangeShowSearch(false);
-  }, [onChangeShowSearch, props.isDisabled]);
-  useEffect(() => {
-    if (!isHaveValue) {
-      onChangeShowSearch(true);
-    }
-  }, [isHaveValue, onChangeShowSearch]);
-  useEffect(() => {
-    if (!isOpen && isHaveValue) {
-      onChangeShowSearch(false);
-    }
-  }, [isHaveValue, isOpen, onChangeShowSearch]);
-  const theme = useTheme();
-  const font = useMemo(() => {
-    var _a2, _b, _c, _d;
-    return {
-      size: ((_a2 = props.font) == null ? void 0 : _a2.size) ?? 16,
-      weight: ((_b = props.font) == null ? void 0 : _b.weight) ?? (props.isBold ? 500 : 400),
-      family: ((_c = props.font) == null ? void 0 : _c.family) ?? theme.font.family,
-      height: (_d = props.font) == null ? void 0 : _d.height
-    };
-  }, [props.font, theme.font.family, props.isBold]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      SelectWrapper,
-      {
-        tabIndex: 0,
-        $error: props == null ? void 0 : props.error,
-        $isNotShowHoverStyle: props == null ? void 0 : props.isNotShowHoverStyle,
-        $size: props.size,
-        $genre: props.genre,
-        $isCenter: props.isCenter,
-        $sx: props.sx,
-        $isOpen: isOpen,
-        ref: refReference,
-        onClick: () => {
-          open();
-          onChangeShowSearch(true);
-        },
-        onFocus: () => {
-          open();
-        },
-        children: [
-          isShowSearch && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SelectTextArea,
-            {
-              ref: refTextArea,
-              genre: props.genre,
-              size: props.size,
-              minRows: 1,
-              maxRows: 5,
-              isAutoHeight: true,
-              onChange: (value) => {
-                var _a2;
-                (_a2 = props == null ? void 0 : props.onChangeSearch) == null ? void 0 : _a2.call(props, value);
-              },
-              value: props.valueSearch,
-              placeholder: labelPlaceholder
-            }
-          ),
-          isHaveValue && (props.isShowSelectAllLabel ? !isAll : true) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SelectList,
-            {
-              $size: props.size,
-              tabIndex: -1,
-              $isWrapSelectOption: props.isWrapSelectOption,
-              onMouseDown: (e) => {
-                e.preventDefault();
-              },
-              onClick: (e) => {
-                e.preventDefault();
-              },
-              children: props.value.map((value, index) => {
-                if (index >= maxViewSelect) return null;
-                const isChecked = isSelectedItem(value);
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  ContainerSelectListOption,
-                  {
-                    isChecked,
-                    onClick: () => props.isClearWhenClickSelectListOption && onClick(value),
-                    item: value,
-                    genre: props.genre,
-                    size: props.size,
-                    isBold: props.isBold,
-                    isOnlyColorInSelectListOption: props.isOnlyColorInSelectListOption,
-                    isClearWhenClickSelectListOption: props.isClearWhenClickSelectListOption,
-                    isWrapSelectOption: props.isWrapSelectOption,
-                    isNotShowHoverStyle: props.isNotShowHoverStyle,
-                    isCenter: props.isCenter
-                  },
-                  `${value.value}-${index}`
-                );
-              })
-            }
-          ) : null,
-          isHaveValue && (props.isShowSelectAllLabel ? isAll : false) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Typography,
-            {
-              sxStandard: {
-                default: { padding: `${sizePadding / 2.8}px 0px ${sizePadding / 2.8}px ${sizePadding / 2.8}px` }
-              },
-              sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
-              children: labelSelectAll
-            }
-          ) : null,
-          !isHaveValue && !props.isSearch ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Typography,
-            {
-              sxStandard: (theme2) => ({
-                default: {
-                  color: theme2.colors.input[props.genre].color.placeholder,
-                  padding: `${sizePadding / 2.8}px 0px ${sizePadding / 2.8}px ${sizePadding / 2.8}px`
-                }
-              }),
-              sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
-              children: labelPlaceholder
-            }
-          ) : null,
-          isValueMoreMaxViewSelect && isHaveValue && (props.isShowSelectAllLabel ? !isAll : true) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Typography,
-            {
-              sxStandard: {
-                default: { padding: `${sizePadding / 2.8}px 0px ${sizePadding / 2.8}px ${sizePadding / 2.8}px` }
-              },
-              sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
-              children: labelAndMore(props.value.length - maxViewSelect)
-            }
-          ) : null,
-          isShowButtonList ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            ButtonList,
-            {
-              $size: props.size,
-              onMouseDown: (e) => {
-                e.preventDefault();
-              },
-              children: [
-                isShowIconSearchClear && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    genre: props.genre,
-                    size: "small",
-                    isWidthAsHeight: true,
-                    isFullSize: true,
-                    isRadius: true,
-                    isOnlyIcon: true,
-                    icons: [{ name: "Close", type: "id" }],
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      onClearSearch();
-                    }
-                  }
-                ),
-                props.isShowIconToggle && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    genre: props.genre,
-                    size: "small",
-                    isWidthAsHeight: true,
-                    isFullSize: true,
-                    isRadius: true,
-                    isOnlyIcon: true,
-                    icons: [{ name: "Select", type: "id" }],
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      toggle();
-                    }
-                  }
-                ),
-                props.isShowIconFetching && props.isFetching && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    tabIndex: -1,
-                    genre: props.genre,
-                    size: "small",
-                    isWidthAsHeight: true,
-                    isFullSize: true,
-                    isRadius: true,
-                    isHiddenBorder: true,
-                    isDisabledRipple: true,
-                    isNotHoverEffect: true,
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { type: "loading", name: "Circle", size: props.size })
-                  }
-                )
-              ]
-            }
-          ) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Popover,
-      {
-        sx: (theme2) => ({
-          default: {
-            background: theme2.colors.input[props.genre].background.rest,
-            borderRadius: `${sizeRadius}px`,
-            padding: "0px",
-            maxHeight: `${heightPopover}px`
-          }
-        }),
-        isShowAlwaysOutline: true,
-        size: props.size,
-        genre: props.genre,
-        floatingStyles,
-        ref: refFloating,
-        isOpen,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          DropdownListParent,
-          {
-            tabIndex: -1,
-            ref: refDropdownList,
-            $size: props.size,
-            onScroll: (e) => onScroll(e.target),
-            children: [
-              isShowDropdownSettingsList && /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownList, { style: { position: "sticky", top: 0, zIndex: 1 }, children: [
-                isShowAddOption ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  DropdownListOption,
-                  {
-                    tabIndex: 0,
-                    onClick: () => props.valueSearch && onAddOption(props.valueSearch),
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" && props.valueSearch) onAddOption(props.valueSearch);
-                    },
-                    $isCenter: props.isCenter,
-                    $isNotShowHoverStyle: props.isNotShowHoverStyle,
-                    $genre: props.genre,
-                    $size: props.size,
-                    $font: font,
-                    $isBold: props.isBold,
-                    $isChecked: isAll,
-                    style: { position: "relative", minHeight: `${sizeHeight}px` },
-                    children: props.valueSearch && labelAddOption(props.valueSearch)
-                  }
-                ) : null,
-                props.isShowSelectAll && isHaveOption ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  DropdownListOption,
-                  {
-                    tabIndex: 0,
-                    onClick: () => onClickAll(),
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter") onClickAll();
-                    },
-                    $isCenter: props.isCenter,
-                    $isNotShowHoverStyle: props.isNotShowHoverStyle,
-                    $genre: props.genre,
-                    $size: props.size,
-                    $font: font,
-                    $isBold: props.isBold,
-                    $isChecked: isAll,
-                    $isShowScroll: isShowScroll,
-                    style: { position: "relative", minHeight: `${sizeHeight}px` },
-                    children: [
-                      labelSelectAll,
-                      props.isShowDropdownOptionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        DropdownListOptionIcon,
-                        {
-                          tabIndex: -1,
-                          size: props.size,
-                          type: "checkbox",
-                          name: "Arrow",
-                          $genre: props.genre,
-                          $checked: isAll,
-                          $size: props.size
-                        }
-                      )
-                    ]
-                  }
-                ) : null,
-                !isHaveOption ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  DropdownListOption,
-                  {
-                    tabIndex: -1,
-                    $isCenter: props.isCenter,
-                    $isNotShowHoverStyle: props.isNotShowHoverStyle,
-                    $genre: props.genre,
-                    $size: props.size,
-                    $font: font,
-                    $isBold: props.isBold,
-                    $isChecked: isAll,
-                    $isShowScroll: isShowScroll,
-                    style: { position: "relative", minHeight: `${sizeHeight}px` },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { sx: { default: { size: 16, line: 1 } }, children: labelEmptyOption })
-                  }
-                ) : null
-              ] }),
-              isHaveOption ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DropdownList,
-                {
-                  tabIndex: -1,
-                  style: { height: `${listVirtualizer.getTotalSize()}px`, minHeight: `${heightDropdownList}px` },
-                  children: listVirtualizer.getVirtualItems().map((virtualRow) => {
-                    const item = props.option[virtualRow.index];
-                    const isChecked = isSelectedItem(item);
-                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      ContainerDropdownListOption,
-                      {
-                        virtualRowSize: virtualRow.size,
-                        virtualRowStart: virtualRow.start,
-                        isChecked,
-                        onClick: () => onClick(item),
-                        item,
-                        genre: props.genre,
-                        size: props.size,
-                        font,
-                        isBold: props.isBold,
-                        isNotShowHoverStyle: props.isNotShowHoverStyle,
-                        isCenter: props.isCenter,
-                        isShowScroll,
-                        isShowDropdownOptionIcon: props.isShowDropdownOptionIcon
-                      },
-                      virtualRow.index
-                    );
-                  })
-                }
-              ) : null
-            ]
-          }
-        )
-      }
-    ),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ErrorMessage,
-      {
-        ...props.error,
-        size: (props == null ? void 0 : props.error.size) ?? props.size,
-        font: {
-          size: 12,
-          weight: 400,
-          family: ((_a = props.font) == null ? void 0 : _a.family) ?? theme.font.family
-        }
-      }
-    ) : null
-  ] });
-};
-const ContainerDropdownListOptionComponent = (props) => {
-  const handleKeyDown = (event) => {
-    if (props.item.isDisabled) return;
-    if (event.key === "Enter") {
-      props.onClick();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    DropdownListOption,
-    {
-      tabIndex: 0,
-      onClick: () => {
-        !props.item.isDisabled && props.onClick();
-      },
-      onKeyDown: handleKeyDown,
-      style: {
-        position: "absolute",
-        height: `${props.virtualRowSize}px`,
-        transform: `translateY(${props.virtualRowStart}px)`
-      },
-      $isCenter: props.isCenter,
-      $isNotShowHoverStyle: props.isNotShowHoverStyle,
-      $item: props.item,
-      $genre: props.genre,
-      $size: props.size,
-      $font: props.font,
-      $isBold: props.isBold,
-      $isChecked: props.isChecked,
-      $isShowScroll: props.isShowScroll,
-      children: [
-        props.item.label,
-        props.isShowDropdownOptionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DropdownListOptionIcon,
-          {
-            tabIndex: -1,
-            size: props.size,
-            type: "checkbox",
-            name: "Arrow",
-            $genre: props.genre,
-            $checked: props.isChecked,
-            $size: props.size
-          }
-        )
-      ]
-    }
-  );
-};
-const ContainerSelectListOptionComponent = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SelectListOption,
-    {
-      tabIndex: -1,
-      onClick: props.onClick,
-      $isOnlyColorInSelectListOption: props.isOnlyColorInSelectListOption,
-      $isClearWhenClickSelectListOption: props.isClearWhenClickSelectListOption,
-      $isWrapSelectOption: props.isWrapSelectOption,
-      $isCenter: props.isCenter,
-      $isNotShowHoverStyle: props.isNotShowHoverStyle,
-      $item: props.item,
-      $genre: props.genre,
-      $size: props.size,
-      $isBold: props.isBold,
-      $isChecked: props.isChecked,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { sx: { default: { size: 16, line: 1 } }, children: props.item.label })
-    }
-  );
-};
-const ContainerDropdownListOption = memo(ContainerDropdownListOptionComponent);
-const ContainerSelectListOption = memo(ContainerSelectListOptionComponent);
-const SelectLanguage = (props) => {
-  const { value, onChange } = props;
-  const option = ListLanguage;
-  const [viewOption] = useState(option);
-  const handleSelectChange = (value2) => {
-    if (value2.length === 0) onChange(null);
-    onChange(value2[0].value.toString());
-  };
-  const valueLocal = useMemo(() => {
-    const findOption = option.find((e) => e.value === value);
-    if (!findOption) return [];
-    return [findOption];
-  }, [option, value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { ...props, option: viewOption, value: valueLocal, onChange: handleSelectChange });
-};
-const SelectMonth = (props) => {
-  const { value, onChange, dateMin, dateMax, monthsLocale, isShortLabel } = props;
-  const year = moment(value).utc().year();
-  const option = useMemo(() => {
-    return monthsLocale.map((monthItem) => {
-      const monthIndex = moment().month(monthItem.value).month();
-      const monthMoment = moment.utc().year(year).month(monthIndex).startOf("month");
-      const isDisabled = dateMin && monthMoment.isBefore(moment.utc(dateMin), "month") || dateMax && monthMoment.isAfter(moment.utc(dateMax), "month");
-      return {
-        value: monthMoment.valueOf(),
-        label: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
-        placeholder: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
-        search: `${monthItem.localeLong.toLowerCase()}, ${monthIndex + 1}`,
-        isDisabled: !!isDisabled,
-        monthValue: monthItem.value
-      };
-    });
-  }, [monthsLocale, year, dateMin, dateMax, isShortLabel]);
-  const handleSelectChange = (value2) => {
-    if (value2.length === 0) onChange(null);
-    onChange(+value2[0].value);
-  };
-  const valueLocal = useMemo(() => {
-    const findOption = option.find((e) => e.value === value);
-    if (!findOption) return [];
-    return [findOption];
-  }, [value, option]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { ...props, option, value: valueLocal, onChange: handleSelectChange });
-};
-const SelectMonths = (props) => {
-  const { value, onChange, dateMin, dateMax, monthsLocale, isShortLabel } = props;
-  const year = moment(value).utc().year();
-  const option = useMemo(() => {
-    return monthsLocale.map((monthItem) => {
-      const monthIndex = moment().month(monthItem.value).month();
-      const monthMoment = moment.utc().year(year).month(monthIndex).startOf("month");
-      const isDisabled = dateMin && monthMoment.isBefore(moment.utc(dateMin), "month") || dateMax && monthMoment.isAfter(moment.utc(dateMax), "month");
-      return {
-        value: monthMoment.valueOf(),
-        label: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
-        placeholder: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
-        search: `${monthItem.localeLong.toLowerCase()}, ${monthIndex + 1}`,
-        isDisabled: !!isDisabled,
-        monthValue: monthItem.value
-      };
-    });
-  }, [monthsLocale, year, dateMin, dateMax, isShortLabel]);
-  const [viewOption, setViewOption] = useState(option);
-  useEffect(() => {
-    setViewOption(option);
-  }, [option]);
-  const handleSelectChange = (value2) => {
-    if (value2.length === 0) onChange([]);
-    onChange(value2.map((e) => +e.value));
-  };
-  const valueLocal = useMemo(() => {
-    if (!value || value.length === 0) return [];
-    return value.map((val) => option.find((opt) => opt.value === val)).filter(Boolean);
-  }, [value, option]);
-  const [search, setSearch] = useState("");
-  const handleSearchChange = useCallback(
-    (value2) => {
-      setSearch(value2);
-      if (value2 === "") {
-        setViewOption(option);
-      } else {
-        const filteredOptions = option.filter(
-          (option2) => Object.values(option2).some((field) => field == null ? void 0 : field.toString().toLowerCase().includes(value2.toLowerCase()))
-        );
-        setViewOption(filteredOptions);
-      }
-    },
-    [option]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Select,
-    {
-      ...props,
-      valueSearch: search,
-      onChangeSearch: handleSearchChange,
-      optionAllLength: option.length,
-      option: viewOption,
-      minViewDropdown: 1,
-      isMulti: true,
-      value: valueLocal,
-      onChange: handleSelectChange,
-      onChangeAll: (_value, isAll) => {
-        if (isAll) {
-          onChange(viewOption.map((e) => +e.value));
-        } else {
-          onChange([]);
-        }
-      }
-    }
-  );
-};
-const SelectYear = (props) => {
-  const { value, onChange, dateMin, dateMax, sortOrder = "desc" } = props;
-  const startYear = moment(dateMin).utc().year();
-  const endYear = moment(dateMax).utc().year();
-  const option = useMemo(() => {
-    const yearArray = Array.from({ length: endYear - startYear + 1 }, (_, index) => {
-      const year = startYear + index;
-      return {
-        value: moment().year(year).utc().startOf("year").valueOf(),
-        label: moment().year(year).utc().format("YYYY"),
-        placeholder: moment().year(year).utc().format("YYYY"),
-        search: `${moment().year(year).utc().format("YYYY").toLowerCase()}`
-      };
-    });
-    return sortOrder === "asc" ? yearArray.sort((a, b) => a.value - b.value) : yearArray.sort((a, b) => b.value - a.value);
-  }, [endYear, startYear, sortOrder]);
-  const handleSelectChange = (value2) => {
-    if (value2.length === 0) onChange(null);
-    onChange(+value2[0].value);
-  };
-  const valueLocal = useMemo(() => {
-    const findOption = option.find((e) => e.value === value);
-    if (!findOption) return [];
-    return [findOption];
-  }, [value, option]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { ...props, option, value: valueLocal, onChange: handleSelectChange });
-};
-const SelectMapTheme = (props) => {
-  const { value, onChange } = props;
-  const option = useMemo(() => MapThemeList.map((e) => ({ label: e.name, value: e.name, placeholder: e.name })), []);
-  const [viewOption, setViewOption] = useState(option);
-  useEffect(() => {
-    setViewOption(option);
-  }, [option]);
-  const handleSelectChange = (value2) => {
-    if (value2.length === 0) onChange(null);
-    const findOption = MapThemeList.find((e) => e.name === value2[0].value);
-    onChange(findOption ?? null);
-  };
-  const valueLocal = useMemo(() => {
-    const findOption = option.find((e) => e.value === value.name);
-    if (!findOption) return [];
-    return [findOption];
-  }, [value, option]);
-  const [search, setSearch] = useState("");
-  const handleSearchChange = useCallback(
-    (value2) => {
-      setSearch(value2);
-      if (value2 === "") {
-        setViewOption(option);
-      } else {
-        const filteredOptions = option.filter(
-          (option2) => Object.values(option2).some((field) => field == null ? void 0 : field.toString().toLowerCase().includes(value2.toLowerCase()))
-        );
-        setViewOption(filteredOptions);
-      }
-    },
-    [option]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Select,
-    {
-      ...props,
-      option: viewOption,
-      value: valueLocal,
-      onChange: handleSelectChange,
-      valueSearch: search,
-      onChangeSearch: handleSearchChange
-    }
-  );
-};
-const addSelectWrapperGenre = css`
-  ${(props) => css`
-    background: ${props.theme.colors.input[props.$genre].background.rest};
-    border-color: ${props.theme.colors.input[props.$genre].border.rest};
-    color: ${props.theme.colors.input[props.$genre].color.rest};
-    ${!props.$isNotShowHoverStyle && css`
-      &:hover {
-        background: ${props.theme.colors.input[props.$genre].background.hover};
-        border-color: ${props.theme.colors.input[props.$genre].border.hover};
-        color: ${props.theme.colors.input[props.$genre].color.hover};
-      }
-    `}
-      ${props.$isOpen && css`
-      background: ${props.theme.colors.input[props.$genre].background.rest};
-      border-color: ${props.theme.colors.input[props.$genre].border.rest};
-      color: ${props.theme.colors.input[props.$genre].color.rest};
-    `}
-  `};
-`;
-const addSelectWrapperSize = css`
-  border: 1px solid;
-  width: 100%;
-  padding: ${(props) => KEY_SIZE_DATA[props.$size].padding / 4}px
-    ${(props) => KEY_SIZE_DATA[props.$size].padding - KEY_SIZE_DATA[props.$size].padding / 2.8}px;
-  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
-  height: fit-content;
-  min-height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
-  border-radius: ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
-  justify-content: ${(props) => props.$isCenter ? "center" : "flex-start"};
-  ${(props) => props.$isOpen && css`
-      outline: 2px ${(props2) => props2.theme.states.focus} solid;
-      outline-offset: 1px;
-    `}
-`;
-const SelectWrapper = styled(motion.div)`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  align-content: center;
-  flex-wrap: wrap;
-  ${addSelectWrapperGenre};
-  ${addSelectWrapperSize};
-  ${addError};
-  ${addSX};
-`;
-const addDropdownListParentSize = css`
-  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
-`;
-const DropdownListParent = styled(motion.div)`
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  overflow-y: auto;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  ${addDropdownListParentSize};
-`;
-const DropdownList = styled.ul`
-  list-style: none;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  transform: translateZ(0);
-  flex-shrink: 0;
-`;
-const addDropdownListOptionGenre = css`
-  ${(props) => css`
-    background: ${props.theme.colors.select[props.$genre].background.rest};
-    border-color: ${props.theme.colors.select[props.$genre].border.rest};
-    color: ${props.theme.colors.select[props.$genre].color.rest};
-    &:active {
-      background: ${props.theme.colors.select[props.$genre].background.rest};
-      border-color: ${props.theme.colors.select[props.$genre].border.rest};
-      color: ${props.theme.colors.select[props.$genre].color.rest};
-    }
-    ${!props.$isNotShowHoverStyle && css`
-      &:hover {
-        background: ${props.theme.colors.select[props.$genre].background.hover};
-        border-color: ${props.theme.colors.select[props.$genre].border.hover};
-        color: ${props.theme.colors.select[props.$genre].color.hover};
-      }
-    `}
-    &:focus-visible {
-      background: ${props.theme.colors.select[props.$genre].background.rest};
-      border-color: ${props.theme.colors.select[props.$genre].border.rest};
-      color: ${props.theme.colors.select[props.$genre].color.rest};
-    }
-  `};
-`;
-const addDropdownListOptionSize = css`
-  padding: 0px ${(props) => KEY_SIZE_DATA[props.$size].padding}px;
-  width: 100%;
-  border: 1px solid;
-  border-radius: 0;
-  justify-content: ${(props) => props.$isCenter ? "center" : "flex-start"};
-  &:first-child {
-    ${(props) => props.$isShowScroll ? css`
-            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px 0px 0px 0px;
-          ` : css`
-            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px ${KEY_SIZE_DATA[props.$size].radius}px 0px 0px;
-          `}
-  }
-  &:last-child {
-    ${(props) => props.$isShowScroll ? css`
-            border-radius: 0px 0px 0px ${KEY_SIZE_DATA[props.$size].radius}px;
-          ` : css`
-            border-radius: 0px 0px ${KEY_SIZE_DATA[props.$size].radius}px ${KEY_SIZE_DATA[props.$size].radius}px;
-          `}
-  }
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0px;
-  }
-  &:first-child:last-child {
-    ${(props) => props.$isShowScroll ? css`
-            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px 0px 0px ${KEY_SIZE_DATA[props.$size].radius}px;
-          ` : css`
-            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px;
-          `}
-  }
-`;
-const DropdownListOption = styled.li`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  user-select: none;
-  flex-shrink: 0;
-  opacity: ${(props) => {
-  var _a;
-  return ((_a = props.$item) == null ? void 0 : _a.isDisabled) ? 0.5 : 1;
-}};
-  ${addFont};
-  ${addDropdownListOptionGenre};
-  ${addDropdownListOptionSize};
-  ${addRemoveOutline};
-`;
-const addDropdownOptionIconSize = css`
-  right: ${(props) => KEY_SIZE_DATA[props.$size].padding - 6}px;
-  height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
-`;
-const DropdownListOptionIcon = styled(Icon)`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  align-items: center;
-  ${addDropdownOptionIconSize};
-  ${addRemoveOutline};
-  color: ${(props) => props.$checked ? props.theme.colors.select[props.$genre].border.select : props.theme.colors.input[props.$genre].border.rest};
-`;
-const addSelectListSize = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: ${(props) => props.$isWrapSelectOption ? "wrap" : "nowrap"};
-  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
-`;
-const SelectList = styled.ul`
-  list-style: none;
-  position: relative;
-  overflow: hidden;
-  ${addSelectListSize};
-`;
-const addButtonListSize = css`
-  display: flex;
-  flex-direction: row;
-  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
-  padding: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px ${(props) => KEY_SIZE_DATA[props.$size].padding}px;
-`;
-const ButtonList = styled.div`
-  position: absolute;
-  right: 0;
-  ${addButtonListSize};
-`;
-const addSelectListOptionGenre = css`
-${(props) => props.$isOnlyColorInSelectListOption ? css`
-      border: 0px solid;
-      border-color: transparent;
-      background-color: transparent;
-      color: ${props.theme.colors.select[props.$genre].color.rest};
-      &:active {
-        color: ${props.theme.colors.select[props.$genre].color.rest};
-      }
-      ${!props.$isNotShowHoverStyle && css`
-        &:hover {
-          color: ${props.theme.colors.select[props.$genre].color.hover};
-        }
-      `}
-      &:focus-visible {
-        color: ${props.theme.colors.select[props.$genre].color.rest};
-      }
-    ` : css`
-      border: 1px solid;
-      background: ${props.theme.colors.select[props.$genre].background.rest};
-      border-color: ${props.theme.colors.select[props.$genre].border.rest};
-      color: ${props.theme.colors.select[props.$genre].color.rest};
-      &:active {
-        background: ${props.theme.colors.select[props.$genre].background.rest};
-        border-color: ${props.theme.colors.select[props.$genre].border.rest};
-        color: ${props.theme.colors.select[props.$genre].color.rest};
-      }
-      ${!props.$isNotShowHoverStyle && css`
-        &:hover {
-          background: ${props.theme.colors.select[props.$genre].background.hover};
-          border-color: ${props.theme.colors.select[props.$genre].border.hover};
-          color: ${props.theme.colors.select[props.$genre].color.hover};
-        }
-      `}
-      &:focus-visible {
-        background: ${props.theme.colors.select[props.$genre].background.rest};
-        border-color: ${props.theme.colors.select[props.$genre].border.rest};
-        color: ${props.theme.colors.select[props.$genre].color.rest};
-      }
-    `}
-`;
-const addSelectListOptionSize = css`
-  padding: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
-  border-radius: ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
-`;
-const SelectListOption = styled(motion.li)`
-  display: flex;
-  align-items: center;
-  opacity: 1;
-  cursor: ${(props) => props.$isClearWhenClickSelectListOption ? "pointer" : "default"};
-  flex-shrink: 0;
-  overflow: hidden;
-  width: fit-content;
-  ${addSelectListOptionGenre};
-  ${addSelectListOptionSize};
-  ${addRemoveOutline};
-`;
-const SelectTextArea = styled(TextArea)`
-  border: 0 !important;
-  background-color: transparent !important;
-  min-height: initial !important;
-  width: 100%;
-  max-width: 100%;
-  flex-grow: 1;
-  padding: ${(props) => KEY_SIZE_DATA[props.size].padding / 2.8}px 0px ${(props) => KEY_SIZE_DATA[props.size].padding / 2.8}px ${(props) => KEY_SIZE_DATA[props.size].padding / 2.8}px;
-  ${addRemoveOutline};
-`;
-export {
-  ButtonList as B,
-  ContainerDropdownListOption as C,
-  DropdownListParent as D,
-  Select as S,
-  ContainerSelectListOption as a,
-  SelectLanguage as b,
-  SelectMonth as c,
-  SelectMonths as d,
-  SelectYear as e,
-  SelectMapTheme as f,
-  SelectWrapper as g,
-  DropdownList as h,
-  DropdownListOption as i,
-  DropdownListOptionIcon as j,
-  SelectList as k,
-  SelectListOption as l,
-  SelectTextArea as m
-};
-//# sourceMappingURL=component.styles-SZTM0cRW.js.map