@jenesei-software/jenesei-kit-react 1.0.0 → 1.0.1

package/build/component.styles-Bn6ylF83.js

@@ -1,859 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { AnimatePresence, motion } from "framer-motion";
-import moment from "moment";
-import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { c as Button } from "./component-DZxbW_Jz.js";
-import { ListLanguage, MapThemeList } from "./consts.es.js";
-import { b as ErrorMessage } from "./style-DeAgDHyI.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
-import styled, { css } from "styled-components";
-import { e as StyledInputCSS, g as StyledMotionInput } from "./component.styles-Du2y0R4W.js";
-import { h as addRemoveOutline, g as addBorder, b as addTransition, a as addRemoveScrollbar } from "./style-CEGJOjRW.js";
-import { a as addSX } from "./style-plT9Ah7t.js";
-import { I as Icon } from "./component.styles-BapdQNhL.js";
-const DEFAULT_MAX_VIEW = 5;
-const DEFAULT_MIN_VIEW = 5;
-const DEFAULT_OVERSCAN = 1;
-const DEFAULT_LABEL_EMPTY_OPTION = "No options";
-const Select = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-  const [isOpen, setIsOpen] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [isAll, setIsAll] = useState(((_b = (_a = props == null ? void 0 : props.footer) == null ? void 0 : _a.selectAll) == null ? void 0 : _b.defaultValue) ?? false);
-  const refInput = useRef(null);
-  const parentListRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const maxViewLength = useMemo(() => props.maxView ?? DEFAULT_MAX_VIEW, [props.maxView]);
-  const minViewLength = useMemo(() => props.minView ?? DEFAULT_MIN_VIEW, [props.minView]);
-  const optionsLength = useMemo(() => props.option.length, [props.option.length]);
-  const isFooter = useMemo(() => !!(props == null ? void 0 : props.footer), [props.footer]);
-  const isErase = useMemo(() => {
-    var _a2;
-    return !!((_a2 = props == null ? void 0 : props.footer) == null ? void 0 : _a2.erase);
-  }, [props.footer]);
-  const isSelectAll = useMemo(() => {
-    var _a2;
-    return !!((_a2 = props == null ? void 0 : props.footer) == null ? void 0 : _a2.selectAll);
-  }, [props.footer]);
-  const sizeHeight = useMemo(() => KEY_SIZE_DATA[props.size].height, [props.size]);
-  const height = useMemo(
-    () => sizeHeight * (optionsLength < maxViewLength ? optionsLength < minViewLength ? minViewLength : optionsLength : maxViewLength) + (isFooter ? sizeHeight : 0),
-    [sizeHeight, optionsLength, maxViewLength, minViewLength, isFooter]
-  );
-  const radius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
-  const isSelectedItem = useCallback(
-    (option) => {
-      return isAll || (props.value ?? []).includes(option);
-    },
-    [isAll, props.value]
-  );
-  const handleEraseOnClick = useCallback(
-    (event) => {
-      var _a2, _b2;
-      event.preventDefault();
-      event.stopPropagation();
-      if ((_b2 = (_a2 = props.footer) == null ? void 0 : _a2.erase) == null ? void 0 : _b2.onCLick) {
-        props.footer.erase.onCLick();
-      } else {
-        props.onChange([]);
-      }
-      setIsAll(false);
-    },
-    [props]
-  );
-  const handleSelectAllOnClick = useCallback(
-    (event) => {
-      var _a2, _b2, _c2, _d2, _e2;
-      event.preventDefault();
-      event.stopPropagation();
-      if (((_a2 = props == null ? void 0 : props.inputProps) == null ? void 0 : _a2.value) !== "") {
-        return props.onChange(props.option);
-      }
-      if (isAll) {
-        setIsAll(false);
-        props.onChange(props.option);
-      } else {
-        if ((_c2 = (_b2 = props.footer) == null ? void 0 : _b2.selectAll) == null ? void 0 : _c2.onCLick) {
-          (_e2 = (_d2 = props.footer) == null ? void 0 : _d2.selectAll) == null ? void 0 : _e2.onCLick();
-        } else {
-          setIsAll(true);
-        }
-      }
-    },
-    [isAll, props]
-  );
-  const handleOnBlurEasy = useCallback(() => {
-    var _a2, _b2;
-    setIsOpen(false);
-    (_a2 = wrapperRef == null ? void 0 : wrapperRef.current) == null ? void 0 : _a2.blur();
-    (_b2 = refInput == null ? void 0 : refInput.current) == null ? void 0 : _b2.blur();
-  }, []);
-  const handleOnBlur = useCallback(
-    (event) => {
-      var _a2;
-      if (props == null ? void 0 : props.isDisabled) return;
-      if (event.relatedTarget && ((_a2 = parentListRef.current) == null ? void 0 : _a2.contains(event.relatedTarget))) return;
-      if (props.onBlur && event) props.onBlur(event);
-      handleOnBlurEasy();
-    },
-    [handleOnBlurEasy, props]
-  );
-  const handleOptionOnClick = useCallback(
-    (option) => {
-      if (props.isOnClickOptionClose) {
-        handleOnBlurEasy();
-      }
-      if (props.isMulti) {
-        if (isAll) {
-          const index = props.option.findIndex((selectedItems) => selectedItems.value === option.value);
-          const newValue = [...props.option.slice(0, index), ...props.option.slice(index + 1)];
-          props.onChange(newValue);
-        } else {
-          const index = props.value.findIndex((selectedItems) => selectedItems.value === option.value);
-          if (index === -1 && (!props.maxView || props.value.length < props.maxView)) {
-            const newValues = [...props.value ?? [], option];
-            props.onChange(newValues);
-            if (newValues.length == props.option.length) {
-              return setIsAll(true);
-            }
-          } else if (index !== -1) {
-            const newValue = [...props.value.slice(0, index), ...props.value.slice(index + 1)];
-            props.onChange(newValue);
-          }
-        }
-      } else {
-        props.onChange([option]);
-      }
-      return setIsAll(false);
-    },
-    [handleOnBlurEasy, isAll, props]
-  );
-  const handleListOptionOpenEffect = useCallback(() => {
-    setIsAnimating(false);
-    setIsOpen(true);
-  }, []);
-  const handleOnOpen = useCallback(() => {
-    setIsAnimating(false);
-    setIsOpen(true);
-  }, []);
-  const handleOnFocusEasy = useCallback(() => {
-    if (isAnimating) return;
-    if (isOpen) return;
-    setIsAnimating(true);
-    handleOnOpen();
-  }, [handleOnOpen, isAnimating, isOpen]);
-  const handleOnFocus = useCallback(
-    (event) => {
-      if (props == null ? void 0 : props.isDisabled) return;
-      if (props.onFocus) props.onFocus(event);
-      handleOnFocusEasy();
-    },
-    [handleOnFocusEasy, props]
-  );
-  useEffect(() => {
-    if (isOpen) handleOnOpen();
-  }, [height]);
-  const handleMouseDown = useCallback((event) => {
-    if (parentListRef.current && parentListRef.current.contains(event.target)) {
-      event.preventDefault();
-    }
-  }, []);
-  useEffect(() => {
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [handleMouseDown]);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (parentListRef.current && refInput.current && !parentListRef.current.contains(event.target) && !refInput.current.contains(event.target)) {
-        handleOnBlurEasy();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [handleOnBlurEasy]);
-  useEffect(() => {
-    if (isOpen) {
-      handleListOptionOpenEffect();
-    }
-  }, [handleListOptionOpenEffect, isOpen, props.option]);
-  const listVirtualizer = useVirtualizer({
-    count: optionsLength,
-    estimateSize: props.getEstimateSize ? props.getEstimateSize : () => sizeHeight,
-    getScrollElement: () => parentListRef.current,
-    overscan: DEFAULT_OVERSCAN,
-    paddingEnd: isFooter ? sizeHeight : 0
-  });
-  const handleFetchNextPage = useCallback(
-    (containerRefElement) => {
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        if (scrollHeight - scrollTop - clientHeight < height && !props.isFetching && props.fetchNextPage) {
-          props.fetchNextPage();
-        }
-      }
-    },
-    [height, props]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      SelectWrapper,
-      {
-        $size: props.size,
-        $genre: props.genre,
-        $sx: props.sx,
-        $radius: radius,
-        $isDisabled: props == null ? void 0 : props.isDisabled,
-        $parentListHeight: isOpen ? height : 0,
-        onFocus: handleOnFocus,
-        onBlur: handleOnBlur,
-        ref: wrapperRef,
-        animate: {
-          zIndex: isOpen ? "10" : "auto",
-          "--after-height": isOpen ? `${height + 1}px` : `0px`
-        },
-        transition: { duration: 0.2 },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SelectStyledInput,
-            {
-              tabIndex: 0,
-              id: props.id,
-              name: props.name,
-              $genre: props.genre,
-              $size: props.size,
-              placeholder: props.placeholder,
-              $error: props == null ? void 0 : props.error,
-              $isLoading: (_c = props == null ? void 0 : props.inputProps) == null ? void 0 : _c.isLoading,
-              $isNiceNumber: (_d = props == null ? void 0 : props.inputProps) == null ? void 0 : _d.isNiceNumber,
-              $postfixChildren: (_e = props == null ? void 0 : props.inputProps) == null ? void 0 : _e.postfixChildren,
-              $prefixChildren: (_f = props.inputProps) == null ? void 0 : _f.prefixChildren,
-              $isBold: (_g = props == null ? void 0 : props.inputProps) == null ? void 0 : _g.isBold,
-              $isCenter: (_h = props == null ? void 0 : props.inputProps) == null ? void 0 : _h.isCenter,
-              $sx: (_i = props == null ? void 0 : props.inputProps) == null ? void 0 : _i.sx,
-              disabled: props == null ? void 0 : props.isDisabled,
-              $isDisabled: props == null ? void 0 : props.isDisabled,
-              readOnly: (_j = props == null ? void 0 : props.inputProps) == null ? void 0 : _j.isReadOnly,
-              required: (_k = props == null ? void 0 : props.inputProps) == null ? void 0 : _k.isRequired,
-              defaultValue: (_l = props == null ? void 0 : props.inputProps) == null ? void 0 : _l.defaultValue,
-              value: ((_m = props == null ? void 0 : props.inputProps) == null ? void 0 : _m.value) ?? "",
-              type: (_n = props == null ? void 0 : props.inputProps) == null ? void 0 : _n.type,
-              onChange: (event) => {
-                var _a2, _b2;
-                return ((_a2 = props == null ? void 0 : props.inputProps) == null ? void 0 : _a2.onChange) && ((_b2 = props == null ? void 0 : props.inputProps) == null ? void 0 : _b2.onChange(event.target.value));
-              },
-              onBlur: (_o = props == null ? void 0 : props.inputProps) == null ? void 0 : _o.onBlur,
-              onFocus: (_p = props == null ? void 0 : props.inputProps) == null ? void 0 : _p.onFocus,
-              onClick: handleOnFocusEasy,
-              animate: {
-                borderBottomLeftRadius: isOpen ? `0px` : `${radius}px`,
-                borderBottomRightRadius: isOpen ? `0px` : `${radius}px`
-              },
-              transition: { duration: 0.2 },
-              ref: refInput
-            }
-          ),
-          props.isShowSelectInputIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SelectInputIcon,
-            {
-              size: props.size,
-              type: "id",
-              name: "Select",
-              $genre: props.genre,
-              $checked: isOpen,
-              $size: props.size,
-              tabIndex: -1
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DropdownListParent,
-            {
-              ref: parentListRef,
-              $genre: props.genre,
-              $isShowScroll: optionsLength > maxViewLength,
-              $isFooter: isFooter,
-              $size: props.size,
-              onScroll: (e) => handleFetchNextPage(e.target),
-              initial: { opacity: 0, height: 0 },
-              animate: {
-                height: `${height + 1}px`,
-                display: "flex",
-                opacity: 1,
-                zIndex: "1"
-              },
-              exit: {
-                height: "0px",
-                display: "none",
-                opacity: 0,
-                zIndex: "auto"
-              },
-              transition: { duration: 0.2 },
-              style: {
-                maxHeight: `${height + 1}px`
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                DropdownList,
-                {
-                  style: {
-                    height: `${listVirtualizer.getTotalSize()}px`,
-                    minHeight: `${height}px`
-                  },
-                  children: [
-                    !props.isEmptyOption ? listVirtualizer.getVirtualItems().map((virtualRow) => {
-                      const item = props.option[virtualRow.index];
-                      const checked = isSelectedItem(item);
-                      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        ContainerDropdownOption,
-                        {
-                          checked,
-                          onClick: () => handleOptionOnClick(item),
-                          virtualRowSize: virtualRow.size,
-                          virtualRowStart: virtualRow.start,
-                          label: item.label,
-                          genre: props.genre,
-                          size: props.size,
-                          isShowDropdownOptionIcon: props.isShowDropdownOptionIcon,
-                          ...props.optionProps
-                        },
-                        virtualRow.index
-                      );
-                    }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      ContainerDropdownOption,
-                      {
-                        isNotShowHoverStyle: true,
-                        checked: false,
-                        onClick: () => {
-                        },
-                        virtualRowSize: ((_q = props == null ? void 0 : props.getEstimateSize) == null ? void 0 : _q.call(props, 0)) ?? sizeHeight,
-                        virtualRowStart: 0,
-                        label: props.labelEmptyOption ?? DEFAULT_LABEL_EMPTY_OPTION,
-                        genre: props.genre,
-                        size: props.size,
-                        ...props.optionProps,
-                        isShowDropdownOptionIcon: props.isShowDropdownOptionIcon
-                      },
-                      0
-                    ),
-                    isFooter && /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownFooter, { $isErase: isErase, $isSelectAll: isSelectAll, $genre: props.genre, $size: props.size, children: [
-                      props.footer.selectAll && /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownSelectAll, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        Button,
-                        {
-                          isFullSize: true,
-                          genre: props.genre,
-                          onClick: handleSelectAllOnClick,
-                          size: "medium",
-                          isHiddenBorder: true,
-                          children: props.footer.selectAll.label
-                        }
-                      ) }),
-                      props.footer.erase && /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownErase, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        Button,
-                        {
-                          isFullSize: true,
-                          genre: props.genre,
-                          onClick: handleEraseOnClick,
-                          size: "medium",
-                          isHiddenBorder: true,
-                          children: props.footer.erase.label
-                        }
-                      ) })
-                    ] })
-                  ]
-                }
-              )
-            }
-          ) : null })
-        ]
-      }
-    ),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
-  ] });
-};
-const ContainerDropdownOptionComponent = (params) => {
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      params.onClick();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DropdownOption,
-    {
-      tabIndex: 0,
-      onClick: params.onClick,
-      onKeyDown: handleKeyDown,
-      $error: params.error,
-      $isCenter: params.isCenter,
-      $isNotShowHoverStyle: params.isNotShowHoverStyle,
-      $isLoading: params.isLoading,
-      $postfixChildren: params.postfixChildren,
-      $prefixChildren: params.prefixChildren,
-      $genre: params.genre,
-      $size: params.size,
-      $isBold: params.isBold,
-      $checked: params.checked,
-      style: {
-        height: `${params.virtualRowSize}px`,
-        transform: `translateY(${params.virtualRowStart}px)`
-      },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", display: "contents" }, tabIndex: -1, "aria-hidden": "true", "aria-readonly": "true", children: [
-        params.label,
-        params.isShowDropdownOptionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DropdownOptionIcon,
-          {
-            tabIndex: -1,
-            size: params.size,
-            type: "checkbox",
-            name: "Arrow",
-            $genre: params.genre,
-            $checked: params.checked,
-            $size: params.size
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DropdownOptionLayout,
-          {
-            $isNotShowHoverStyle: params.isNotShowHoverStyle,
-            $genre: params.genre,
-            $size: params.size,
-            $isBold: params.isBold,
-            $checked: params.checked
-          }
-        )
-      ] })
-    }
-  );
-};
-const ContainerDropdownOption = memo(ContainerDropdownOptionComponent);
-const SelectLanguage = (props) => {
-  const option = ListLanguage;
-  const [viewOption, setViewOption] = useState(option);
-  const [query, setQuery] = useState("");
-  const [isEmptyOption, setIsEmptyOption] = useState(false);
-  const handleSelectChange = (option2) => {
-    var _a;
-    props.onChange((_a = option2[0]) == null ? void 0 : _a.value.toString());
-    setQuery("");
-  };
-  const handleQueryChange = useCallback(
-    (value2) => {
-      setQuery(value2);
-      props.onChange("");
-      if (value2 === "") {
-        setIsEmptyOption(option.length === 0);
-        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);
-        setIsEmptyOption(filteredOptions.length === 0);
-      }
-    },
-    [option, props]
-  );
-  const [value, setValue] = useState(option.find((e) => e.value === props.value));
-  useEffect(() => {
-    if ((value == null ? void 0 : value.value) !== props.value) setValue(option.find((e) => e.value === props.value));
-  }, [option, props.value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Select,
-    {
-      ...props,
-      option: viewOption,
-      isEmptyOption,
-      minView: 1,
-      maxView: 8,
-      isOnClickOptionClose: true,
-      value: value ? [value] : [],
-      onChange: handleSelectChange,
-      inputProps: {
-        ...props.inputProps,
-        variety: "standard",
-        isReadOnly: true,
-        value: (value == null ? void 0 : value.placeholder) ?? query,
-        onChange: handleQueryChange
-      }
-    }
-  );
-};
-const SelectMonth = (props) => {
-  const { value, onChange, startDate, endDate, monthsLocale, isShortLabel } = props;
-  const year = moment(value).utc().year();
-  const months = useMemo(() => {
-    return monthsLocale.map((monthItem) => {
-      const monthIndex = moment().month(monthItem.value).month();
-      const monthMoment = moment.utc().year(year).month(monthIndex).startOf("month");
-      const isDisabled = startDate && monthMoment.isBefore(moment.utc(startDate), "month") || endDate && monthMoment.isAfter(moment.utc(endDate), "month");
-      return {
-        value: monthMoment.valueOf(),
-        label: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
-        placeholder: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
-        search: `${monthItem.localeLong.toLowerCase()}, ${monthIndex + 1}`,
-        isDisabled,
-        monthValue: monthItem.value
-      };
-    });
-  }, [monthsLocale, year, startDate, endDate, isShortLabel]);
-  const handleSelectChange = (option) => {
-    var _a, _b;
-    const selectedValue = Number((_a = option[0]) == null ? void 0 : _a.value);
-    const selectedMonthValue = moment((_b = option[0]) == null ? void 0 : _b.value).utc().month();
-    const currentMoment = moment(value).utc();
-    const currentYear = currentMoment.year();
-    const currentDay = currentMoment.date();
-    const newValue = moment().utc().year(currentYear).month(selectedMonthValue).date(currentDay).startOf("day");
-    if (newValue.isValid()) {
-      onChange(newValue.valueOf());
-    } else {
-      onChange(selectedValue);
-    }
-  };
-  const selectedMonth = useMemo(() => {
-    return months.find(
-      (month) => moment(value).utc().isSameOrAfter(moment(month.value).startOf("month")) && moment(value).utc().isBefore(moment(month.value).endOf("month"))
-    );
-  }, [months, value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Select,
-    {
-      ...props,
-      option: months.filter((e) => !e.isDisabled),
-      minView: 1,
-      maxView: 5,
-      isOnClickOptionClose: true,
-      value: selectedMonth ? [selectedMonth] : [],
-      onChange: handleSelectChange,
-      inputProps: {
-        ...props.inputProps,
-        isCenter: true,
-        variety: "standard",
-        value: (selectedMonth == null ? void 0 : selectedMonth.placeholder) ?? props.placeholder,
-        isReadOnly: true
-      }
-    }
-  );
-};
-const SelectYear = (props) => {
-  const { value, onChange, startDate, endDate, sortOrder = "desc" } = props;
-  const startYear = moment(startDate).utc().year();
-  const endYear = moment(endDate).utc().year();
-  const years = 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 = (option) => {
-    var _a, _b;
-    const selectedValue = Number((_a = option[0]) == null ? void 0 : _a.value);
-    const selectedYearValue = moment((_b = option[0]) == null ? void 0 : _b.value).utc().year();
-    const currentMoment = moment(value).utc();
-    const currentMonth = currentMoment.month();
-    const currentDay = currentMoment.date();
-    const newValue = moment().utc().year(selectedYearValue).month(currentMonth).date(currentDay).startOf("day");
-    if (newValue.isValid()) {
-      onChange(newValue.valueOf());
-    } else {
-      onChange(selectedValue);
-    }
-  };
-  const selectedYear = useMemo(() => {
-    return years.find(
-      (year) => moment(value).utc().isSameOrAfter(moment(year.value)) && moment(value).utc().isBefore(moment(year.value).endOf("year"))
-    );
-  }, [years, value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Select,
-    {
-      ...props,
-      option: years,
-      minView: 1,
-      maxView: 5,
-      isOnClickOptionClose: true,
-      value: selectedYear ? [selectedYear] : [],
-      onChange: handleSelectChange,
-      optionProps: {
-        isCenter: true,
-        variety: "standard",
-        ...props.optionProps
-      },
-      inputProps: {
-        ...props.inputProps,
-        isCenter: true,
-        isNiceNumber: true,
-        variety: "standard",
-        value: (selectedYear == null ? void 0 : selectedYear.placeholder) ?? props.placeholder,
-        isReadOnly: true
-      }
-    }
-  );
-};
-const SelectMapTheme = (props) => {
-  const options = useMemo(() => MapThemeList, []);
-  const optionsNormalize = useMemo(
-    () => MapThemeList.map((e) => ({ label: e.name, value: e.name, placeholder: e.name })),
-    []
-  );
-  const [viewOption, setViewOption] = useState(optionsNormalize);
-  const [query, setQuery] = useState("");
-  const [isEmptyOption, setIsEmptyOption] = useState(false);
-  const handleSelectChange = (option) => {
-    const findOption = options.find((e) => e.name === option[0].value);
-    if (findOption) {
-      props.onChange(findOption);
-    } else {
-      props.onChange(null);
-    }
-    setQuery("");
-  };
-  const handleQueryChange = useCallback(
-    (value2) => {
-      setQuery(value2);
-      props.onChange(null);
-      if (value2 === "") {
-        setIsEmptyOption(optionsNormalize.length === 0);
-        setViewOption(optionsNormalize);
-      } else {
-        const filteredOptions = optionsNormalize.filter(
-          (option) => Object.values(option).some((field) => field == null ? void 0 : field.toString().toLowerCase().includes(value2.toLowerCase()))
-        );
-        setViewOption(filteredOptions);
-        setIsEmptyOption(filteredOptions.length === 0);
-      }
-    },
-    [optionsNormalize, props]
-  );
-  const [value, setValue] = useState(
-    optionsNormalize.find((e) => e.value === props.value.name)
-  );
-  useEffect(() => {
-    if ((value == null ? void 0 : value.value) !== props.value.name) setValue(optionsNormalize.find((e) => e.value === props.value.name));
-  }, [options, props.value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Select,
-    {
-      ...props,
-      option: viewOption,
-      isEmptyOption,
-      minView: 1,
-      maxView: 8,
-      isOnClickOptionClose: true,
-      value: value ? [value] : [],
-      onChange: handleSelectChange,
-      inputProps: {
-        ...props.inputProps,
-        variety: "standard",
-        isReadOnly: true,
-        value: (value == null ? void 0 : value.placeholder) ?? query,
-        onChange: handleQueryChange
-      }
-    }
-  );
-};
-const SelectWrapper = styled(motion.div)`
-  width: 100%;
-  position: relative;
-  height: fit-content;
-  ${(props) => !props.$isDisabled && css`
-      &:focus-within {
-        &:after {
-          content: '';
-          position: absolute;
-          top: -1px;
-          left: -1px;
-          bottom: -1px;
-          right: -1px;
-          outline: 2px ${props.theme.states.focus} solid;
-          outline-offset: 1px;
-          border-radius: ${`${props.$radius + 1}px`};
-          pointer-events: none;
-          height: calc(100% + var(--after-height) + 2px);
-        }
-      }
-    `}
-
-  outline: none !important;
-
-  &:focus-visible {
-    outline: none !important;
-  }
-  ${addSX};
-`;
-const DropdownListParentSize = css`
-  ${(props) => props.$size && DropdownListParentSizeConstructor(KEY_SIZE_DATA[props.$size])};
-`;
-const DropdownListParentSizeConstructor = (props) => css`
-  border-radius: 0px 0px ${props.radius}px ${props.radius}px;
-`;
-const DropdownListParent = styled(motion.div)`
-  outline: none;
-  display: none;
-
-  height: 0px;
-  width: 100%;
-
-  position: absolute;
-
-  overflow: hidden;
-  overflow-y: auto;
-
-  margin: 0;
-  padding: 0;
-
-  background: ${(props) => props.theme.colors.input[props.$genre].background.rest};
-  border: solid 1px ${(props) => props.theme.colors.input[props.$genre].border.rest};
-  border-top: 0px !important;
-  ${DropdownListParentSize};
-  ${(props) => !props.$isShowScroll && addRemoveScrollbar};
-`;
-const DropdownList = styled.ul`
-  list-style: none;
-
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-
-  width: 100%;
-
-  transform: translateZ(0);
-`;
-const DropdownOption = styled.li`
-  ${StyledInputCSS};
-  width: 100%;
-  border: 0px;
-  display: flex;
-  align-items: center;
-  border-radius: 0;
-  opacity: 1;
-  ${addRemoveOutline};
-  ${addBorder};
-  &:last-child {
-    border-radius: 0px 0px ${(props) => KEY_SIZE_DATA[props.$size].radius}px
-      ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
-  }
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-const DropdownOptionHoverAndCheckedSize = css`
-  ${(props) => DropdownOptionHoverAndCheckedSizeConstructor(KEY_SIZE_DATA[props.$size])};
-`;
-const DropdownOptionHoverAndCheckedSizeConstructor = (props) => css`
-  width: calc(100% - ${props.padding - 6}px);
-  height: calc(100% - ${props.padding - 4}px);
-  border-radius: ${props.radius}px;
-`;
-const DropdownOptionLayout = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  right: 0;
-  ${DropdownOptionHoverAndCheckedSize};
-  border-style: solid;
-  border-width: 1px;
-  border-color: transparent;
-
-  ${addTransition};
-
-  ${(props) => !props.$isNotShowHoverStyle && css`
-      &:hover {
-        background: ${props.theme.colors.select[props.$genre].background.select};
-        color: ${props.theme.colors.select[props.$genre].color.select};
-      }
-    `}
-  ${(props) => props.$checked && css`
-      background: ${props.theme.colors.select[props.$genre].background.select};
-      border-color: ${props.theme.colors.select[props.$genre].border.select};
-      color: ${props.theme.colors.select[props.$genre].color.select};
-    `}
-`;
-const DropdownOptionIconSize = css`
-  ${(props) => DropdownOptionIconSizeConstructor(KEY_SIZE_DATA[props.$size])};
-`;
-const DropdownOptionIconSizeConstructor = (props) => css`
-  right: ${props.padding - 6}px;
-  height: ${props.height}px;
-`;
-const DropdownOptionIcon = styled(Icon)`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  align-items: center;
-  ${DropdownOptionIconSize};
-  color: ${(props) => props.$checked ? props.theme.colors.select[props.$genre].border.select : props.theme.colors.input[props.$genre].border.rest};
-`;
-const SelectInputIcon = styled(Icon)`
-  position: absolute;
-  user-select: none;
-  pointer-events: none;
-  right: 0;
-  top: 0;
-  align-items: center;
-  ${DropdownOptionIconSize};
-  color: ${(props) => props.$checked ? props.theme.colors.select[props.$genre].border.select : props.theme.colors.input[props.$genre].border.rest};
-`;
-const DropdownFooter = styled.li`
-  ${StyledInputCSS};
-  display: flex;
-  align-items: center;
-  border-radius: 0;
-  opacity: 1;
-  border: 0px;
-  cursor: pointer;
-  position: sticky;
-  bottom: 0;
-  padding: 0px;
-  flex-shrink: 0;
-  margin-top: auto;
-`;
-const DropdownErase = styled.div`
-  margin-left: auto;
-  height: 100%;
-`;
-const DropdownSelectAll = styled.div`
-  margin-right: auto;
-  height: 100%;
-`;
-const SelectStyledInput = styled(StyledMotionInput)`
-  ${addRemoveOutline};
-  ${addSX};
-`;
-export {
-  ContainerDropdownOption as C,
-  DropdownListParentSize as D,
-  Select as S,
-  SelectLanguage as a,
-  SelectMonth as b,
-  SelectYear as c,
-  SelectMapTheme as d,
-  SelectWrapper as e,
-  DropdownListParentSizeConstructor as f,
-  DropdownListParent as g,
-  DropdownList as h,
-  DropdownOption as i,
-  DropdownOptionHoverAndCheckedSize as j,
-  DropdownOptionHoverAndCheckedSizeConstructor as k,
-  DropdownOptionLayout as l,
-  DropdownOptionIcon as m,
-  SelectInputIcon as n,
-  DropdownFooter as o,
-  DropdownErase as p,
-  DropdownSelectAll as q,
-  SelectStyledInput as r
-};
-//# sourceMappingURL=component.styles-Bn6ylF83.js.map