@jenesei-software/jenesei-kit-react 1.2.2 → 1.2.4

package/build/component.types-CqvwcIsz.js

@@ -0,0 +1,843 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { c as Button } from "./component-BJ4BlUBV.js";
+import "./component.styles-B0L4jbOO.js";
+import { R as Ripple } from "./component-vpCWcIhC.js";
+import { c as SelectMonth, e as SelectYear } from "./component.styles-DsnwGPvj.js";
+import { b as Stack } from "./component-jPZYT5iL.js";
+import { b as ErrorMessage, a as addError } from "./style-Dca2udON.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-B46v_8eu.js";
+import moment from "moment";
+import { useState, useMemo, useCallback, useRef, useEffect, Fragment } from "react";
+import styled, { useTheme, css } from "styled-components";
+import { u as usePopover, j as Typography, P as Popover, g as getFontSizeStyles } from "./component-zhkRBgS8.js";
+import { d as addInputIsInputEffect } from "./component.styles-hc14mwUo.js";
+import { j as addNiceNumber, a as addRemoveScrollbar, b as addTransition, f as addOutline, i as addRemoveOutline } from "./style-Bvt_Melk.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { motion } from "framer-motion";
+function countSevens(number) {
+  const divisor = 7;
+  const count = Math.floor(number / divisor);
+  const remainder = number % divisor;
+  return remainder > 0 ? count + 1 : count;
+}
+const DatePicker = (props) => {
+  var _a, _b, _c;
+  const { onChange } = props;
+  const theme = useTheme();
+  const [valueMoment, setValueMoment] = useState(null);
+  const [dateDefaultMoment, setDateDefaultMoment] = useState(moment(props.dateDefault).utc());
+  const [input, setInput] = useState({
+    [DatePickerVariant.DD]: null,
+    [DatePickerVariant.MM]: null,
+    [DatePickerVariant.YYYY]: null
+  });
+  const [activeSegment, setActiveSegment] = useState(null);
+  const [isError, setIsError] = useState(false);
+  const mode = useMemo(() => {
+    if (!props.mode || props.mode.length === 0) {
+      return [DatePickerVariant.DD, DatePickerVariant.MM, DatePickerVariant.YYYY];
+    }
+    const hasDuplicates = new Set(props.mode).size !== props.mode.length;
+    if (hasDuplicates) {
+      return [DatePickerVariant.DD, DatePickerVariant.MM, DatePickerVariant.YYYY];
+    }
+    return props.mode;
+  }, [props.mode]);
+  const getNextSegment = useCallback(
+    (currentSegment) => {
+      const currentIndex = mode.indexOf(currentSegment);
+      return currentIndex < mode.length - 1 ? mode[currentIndex + 1] : mode[0];
+    },
+    [mode]
+  );
+  const getPrevSegment = useCallback(
+    (currentSegment) => {
+      const currentIndex = mode.indexOf(currentSegment);
+      return currentIndex > 0 ? mode[currentIndex - 1] : mode[mode.length - 1];
+    },
+    [mode]
+  );
+  const dataDate = useMemo(() => {
+    const result = {
+      MM: {
+        nextSegment: getNextSegment(DatePickerVariant.MM),
+        preSegment: getPrevSegment(DatePickerVariant.MM),
+        onNext: () => setActiveSegment(getNextSegment(DatePickerVariant.MM)),
+        onPrev: () => setActiveSegment(getPrevSegment(DatePickerVariant.MM)),
+        isLast: mode[mode.length - 1] === DatePickerVariant.MM,
+        type: DatePickerVariant.MM,
+        value: input.MM,
+        setValue: (value) => setInput((prevValue) => ({ ...prevValue, [DatePickerVariant.MM]: value })),
+        setActive: () => setActiveSegment(DatePickerVariant.MM),
+        placeholder: props.locale.inputs.month
+      },
+      DD: {
+        nextSegment: getNextSegment(DatePickerVariant.DD),
+        preSegment: getPrevSegment(DatePickerVariant.DD),
+        isLast: mode[mode.length - 1] === DatePickerVariant.DD,
+        onNext: () => setActiveSegment(getNextSegment(DatePickerVariant.DD)),
+        onPrev: () => setActiveSegment(getPrevSegment(DatePickerVariant.DD)),
+        type: DatePickerVariant.DD,
+        value: input.DD,
+        setValue: (value) => setInput((prevValue) => ({ ...prevValue, [DatePickerVariant.DD]: value })),
+        setActive: () => setActiveSegment(DatePickerVariant.DD),
+        placeholder: props.locale.inputs.day
+      },
+      YYYY: {
+        nextSegment: getNextSegment(DatePickerVariant.YYYY),
+        preSegment: getPrevSegment(DatePickerVariant.YYYY),
+        isLast: mode[mode.length - 1] === DatePickerVariant.YYYY,
+        onNext: () => setActiveSegment(getNextSegment(DatePickerVariant.YYYY)),
+        onPrev: () => setActiveSegment(getPrevSegment(DatePickerVariant.YYYY)),
+        type: DatePickerVariant.YYYY,
+        value: input.YYYY,
+        setValue: (value) => setInput((prevValue) => ({ ...prevValue, [DatePickerVariant.YYYY]: value })),
+        setActive: () => setActiveSegment(DatePickerVariant.YYYY),
+        placeholder: props.locale.inputs.year
+      }
+    };
+    const resultSort = mode.map((e) => {
+      if (e === DatePickerVariant.DD) return result.DD;
+      if (e === DatePickerVariant.MM) return result.MM;
+      if (e === DatePickerVariant.YYYY) return result.YYYY;
+      return null;
+    }).filter((e) => e !== null);
+    return { sort: resultSort, default: result };
+  }, [
+    props.locale.inputs.day,
+    props.locale.inputs.month,
+    props.locale.inputs.year,
+    getNextSegment,
+    getPrevSegment,
+    mode,
+    input.DD,
+    input.MM,
+    input.YYYY
+  ]);
+  const daysInWeek = useMemo(() => {
+    const weekOrder = ["mo", "tu", "we", "th", "fr", "sa", "su"];
+    return weekOrder.map((key, index) => {
+      const found = props.locale.weeks.find((w) => w.value === key);
+      return {
+        index,
+        label: (found == null ? void 0 : found.localeShort) ?? key.toUpperCase()
+      };
+    });
+  }, [props.locale.weeks]);
+  const daysInMonth = useMemo(() => {
+    const today = moment.utc();
+    const startOfMonth = (valueMoment ?? dateDefaultMoment).clone().startOf("month");
+    const endOfMonth = (valueMoment ?? dateDefaultMoment).clone().endOf("month");
+    const days = [];
+    const dateMin = props.dateMin ? moment.utc(props.dateMin) : null;
+    const dateMax = props.dateMax ? moment.utc(props.dateMax) : null;
+    const daysToAddBefore = startOfMonth.isoWeekday() - 1;
+    if (daysToAddBefore > 0) {
+      for (let i = daysToAddBefore; i > 0; i--) {
+        const day = startOfMonth.clone().subtract(i, "days");
+        days.push({
+          value: day.valueOf(),
+          labelString: day.format("dd"),
+          labelNumber: day.date(),
+          dayOfWeek: day.isoWeekday(),
+          isWeekend: day.isoWeekday() === 6 || day.isoWeekday() === 7,
+          weekOfMonth: Math.ceil((days.length + 1) / 7),
+          isToday: day.isSame(today, "day"),
+          isCurrentMonth: false,
+          isDisabled: day.isBefore(dateMin, "day") || day.isAfter(dateMax, "day")
+        });
+      }
+    }
+    const currentDate = startOfMonth.clone();
+    while (currentDate <= endOfMonth) {
+      days.push({
+        value: currentDate.valueOf(),
+        labelString: currentDate.format("dd"),
+        labelNumber: currentDate.date(),
+        dayOfWeek: currentDate.isoWeekday(),
+        isWeekend: currentDate.isoWeekday() === 6 || currentDate.isoWeekday() === 7,
+        weekOfMonth: Math.ceil((days.length + 1) / 7),
+        isToday: currentDate.isSame(today, "day"),
+        isCurrentMonth: true,
+        isDisabled: currentDate.isBefore(dateMin, "day") || currentDate.isAfter(dateMax, "day")
+      });
+      currentDate.add(1, "day");
+    }
+    const daysToAddAfter = 7 - endOfMonth.isoWeekday();
+    if (daysToAddAfter > 0) {
+      for (let i = 1; i <= daysToAddAfter; i++) {
+        const day = endOfMonth.clone().add(i, "days").startOf("day");
+        days.push({
+          value: day.valueOf(),
+          labelString: day.format("dd"),
+          labelNumber: day.date(),
+          dayOfWeek: day.isoWeekday(),
+          isWeekend: day.isoWeekday() === 6 || day.isoWeekday() === 7,
+          weekOfMonth: Math.ceil((days.length + 1) / 7),
+          isToday: day.isSame(today, "day"),
+          isCurrentMonth: false,
+          isDisabled: day.isBefore(dateMin, "day") || day.isAfter(dateMax, "day")
+        });
+      }
+    }
+    days.sort((a, b) => a.value - b.value);
+    return days;
+  }, [valueMoment, dateDefaultMoment, props.dateMax, props.dateMin]);
+  const rows = useMemo(() => countSevens(daysInMonth.length) + 1, [daysInMonth]);
+  const height = useMemo(
+    () => 40 + rows * 28 + (rows - 1) * 6 + KEY_SIZE_DATA[props.size].padding * 2,
+    [props.size, rows]
+  );
+  const sizeRadius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
+  const isHasValue = useMemo(() => {
+    return valueMoment !== null;
+  }, [valueMoment]);
+  const isBlockNextMonth = useMemo(() => {
+    const nextMonth = (valueMoment ?? dateDefaultMoment).clone().add(1, "month").startOf("month");
+    const isBeforeEndDate = props.dateMax ? nextMonth.isAfter(moment.utc(props.dateMax), "month") : false;
+    return isBeforeEndDate;
+  }, [valueMoment, props.dateMax, dateDefaultMoment]);
+  const isBlockPrevMonth = useMemo(() => {
+    const prevMonth = (valueMoment ?? dateDefaultMoment).clone().subtract(1, "month").startOf("month");
+    const isAfterStartDate = props.dateMin ? prevMonth.isBefore(moment.utc(props.dateMin), "month") : false;
+    return isAfterStartDate;
+  }, [valueMoment, props.dateMin, dateDefaultMoment]);
+  const refSelectMonth = useRef(null);
+  const refSelectYear = useRef(null);
+  const sizePadding = useMemo(() => KEY_SIZE_DATA[props.size].padding, [props.size]);
+  const { isOpen, close, refReference, refFloating, floatingStyles, open } = usePopover({
+    placement: "bottom-start",
+    offset: sizePadding,
+    mode: "independence",
+    isClickOutside: true,
+    refsExcludeClickOutside: [refSelectMonth, refSelectYear],
+    isDisabled: props == null ? void 0 : props.isDisabled,
+    onFocus() {
+      var _a2;
+      (_a2 = props.onFocus) == null ? void 0 : _a2.call(props);
+    },
+    onBlur() {
+      var _a2;
+      (_a2 = props.onBlur) == null ? void 0 : _a2.call(props);
+    },
+    onBlurReference() {
+      setActiveSegment(null);
+    }
+  });
+  const onChangeDate = useCallback(
+    (timestamp) => {
+      const momentNewDate = moment(timestamp).utc();
+      if (valueMoment == null ? void 0 : valueMoment.isSame(momentNewDate, "day")) return;
+      setValueMoment(momentNewDate);
+      setInput({
+        [DatePickerVariant.DD]: momentNewDate.clone().date(),
+        [DatePickerVariant.MM]: momentNewDate.clone().month() + 1,
+        [DatePickerVariant.YYYY]: momentNewDate.clone().year()
+      });
+    },
+    [valueMoment]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const key = e.key;
+      const allowedKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Backspace", "Delete", "Tab"];
+      const isDigit = /^\d$/.test(key);
+      const isAllowed = isDigit || allowedKeys.includes(key) || e.ctrlKey || e.metaKey;
+      if (!isAllowed) {
+        e.preventDefault();
+        return;
+      }
+      if (activeSegment && dataDate.default[activeSegment]) {
+        if (isDigit) {
+          const digit = key;
+          if (activeSegment === DatePickerVariant.DD) {
+            const current = input.DD !== null ? input.DD.toString() : "";
+            let nextValue;
+            if (current.length >= 2) {
+              nextValue = digit;
+            } else {
+              nextValue = current + digit;
+            }
+            const parsed = Number(nextValue);
+            if (parsed > 31 || parsed === 0) return;
+            dataDate.default[activeSegment].setValue(parsed);
+            if (nextValue.length === 2) {
+              dataDate.default[activeSegment].onNext();
+            }
+          } else if (activeSegment === DatePickerVariant.MM) {
+            const currentMonthStr = input.MM !== null ? input.MM.toString() : "";
+            let nextValue;
+            if (currentMonthStr.length >= 2) {
+              nextValue = digit;
+            } else {
+              const potential = currentMonthStr + digit;
+              const potentialParsed = Number(potential);
+              if (potentialParsed > 12) {
+                nextValue = digit;
+              } else {
+                nextValue = potential;
+              }
+            }
+            const parsed = Number(nextValue);
+            if (parsed > 12 || parsed === 0) return;
+            dataDate.default[activeSegment].setValue(parsed);
+            if (nextValue.length === 2 || nextValue.length === 1 && parsed > 1) {
+              dataDate.default[activeSegment].onNext();
+            }
+          } else if (activeSegment === DatePickerVariant.YYYY) {
+            const current = input.YYYY !== null ? input.YYYY.toString() : "";
+            let nextValue;
+            if (current.length >= 4) {
+              if (digit === "0") return;
+              nextValue = digit;
+            } else {
+              nextValue = current + digit;
+            }
+            const parsed = Number(nextValue);
+            dataDate.default[activeSegment].setValue(parsed);
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        if (key === "Tab") {
+          if (!dataDate.default[activeSegment].isLast) {
+            e.preventDefault();
+            dataDate.default[activeSegment].onNext();
+          }
+        }
+        if (key === "Backspace" || key === "Delete") {
+          if (activeSegment === DatePickerVariant.DD) {
+            if (input.DD !== null) {
+              const current = input.DD.toString();
+              if (current.length === 1) {
+                dataDate.default[activeSegment].setValue(null);
+              } else {
+                const newValue = current.slice(0, -1);
+                dataDate.default[activeSegment].setValue(Number(newValue));
+              }
+            } else {
+              dataDate.default[activeSegment].onPrev();
+            }
+          } else if (activeSegment === DatePickerVariant.MM) {
+            if (input.MM !== null) {
+              const current = input.MM.toString();
+              if (current.length === 1) {
+                dataDate.default[activeSegment].setValue(null);
+              } else {
+                const newValue = current.slice(0, -1);
+                dataDate.default[activeSegment].setValue(Number(newValue));
+              }
+            } else {
+              dataDate.default[activeSegment].onPrev();
+            }
+          } else if (activeSegment === DatePickerVariant.YYYY) {
+            if (input.YYYY !== null) {
+              const current = input.YYYY.toString();
+              if (current.length === 1) {
+                dataDate.default[activeSegment].setValue(null);
+              } else {
+                const newValue = current.slice(0, -1);
+                dataDate.default[activeSegment].setValue(Number(newValue));
+              }
+            } else {
+              dataDate.default[activeSegment].onPrev();
+            }
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        if (key === "ArrowLeft" || key === "ArrowDown") {
+          e.preventDefault();
+          dataDate.default[activeSegment].onPrev();
+        }
+        if (key === "ArrowRight" || key === "ArrowUp") {
+          e.preventDefault();
+          dataDate.default[activeSegment].onNext();
+        }
+      }
+    },
+    [activeSegment, input.DD, input.MM, input.YYYY, dataDate.default]
+  );
+  const onNextMonth = useCallback(() => {
+    const newDate = (valueMoment ?? dateDefaultMoment).clone().add(1, "month");
+    onChangeDate(newDate.valueOf());
+  }, [valueMoment, onChangeDate, dateDefaultMoment]);
+  const onPrevMonth = useCallback(() => {
+    const newDate = (valueMoment ?? dateDefaultMoment).clone().subtract(1, "month");
+    onChangeDate(newDate.valueOf());
+  }, [valueMoment, onChangeDate, dateDefaultMoment]);
+  useEffect(() => {
+    setDateDefaultMoment(moment(props.dateDefault).utc());
+  }, [props.dateDefault]);
+  useEffect(() => {
+    if (isOpen) {
+      setActiveSegment(DatePickerVariant.DD);
+    } else {
+      setActiveSegment(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    onChange(valueMoment ? valueMoment.valueOf() : null);
+  }, [valueMoment, onChange]);
+  useEffect(() => {
+    setValueMoment(moment(props.value ?? props.defaultValue).utc());
+  }, [props.value, props.defaultValue]);
+  useEffect(() => {
+    if (input.DD !== null && input.MM !== null && input.YYYY !== null) {
+      const day = input.DD ?? NaN;
+      const month = input.MM ?? NaN;
+      const year = input.YYYY ?? NaN;
+      if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
+        const m = moment.utc(`${day}.${month}.${year}`, "D.M.YYYY", true).startOf("day");
+        if (m.isValid()) {
+          onChangeDate(m.valueOf());
+        }
+      }
+    }
+  }, [input.DD, input.MM, input.YYYY, onChangeDate]);
+  useEffect(() => {
+    if (input.DD !== null && input.MM !== null && input.YYYY !== null) {
+      const day = input.DD ?? NaN;
+      const month = input.MM ?? NaN;
+      const year = input.YYYY ?? NaN;
+      if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
+        const m = moment.utc(`${day}.${month}.${year}`, "D.M.YYYY", true).startOf("day");
+        if (m.isValid()) {
+          setIsError(false);
+        } else {
+          setIsError(true);
+        }
+      }
+    }
+  }, [input.DD, input.MM, input.YYYY]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DateWrapper,
+      {
+        $size: props.size,
+        $genre: props.genre,
+        $sx: props.sx,
+        $isDisabled: props == null ? void 0 : props.isDisabled,
+        $isMinWidth: props == null ? void 0 : props.isMinWidth,
+        $radius: sizeRadius,
+        $parentListHeight: height,
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DateInputWrapper,
+          {
+            ref: refReference,
+            tabIndex: 0,
+            $genre: props.genre,
+            $size: props.size,
+            $error: isError ? {
+              isError: true,
+              size: (_a = props == null ? void 0 : props.error) == null ? void 0 : _a.size,
+              ...props.notValidDate
+            } : props.error,
+            $isOpen: isOpen,
+            onClick: () => {
+              open();
+            },
+            onKeyDown: handleKeyDown,
+            onFocus: () => {
+              open();
+            },
+            children: !isHasValue && props.labelPlaceholder && !isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Typography,
+              {
+                sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
+                sxStandard: (theme2) => ({
+                  default: {
+                    color: theme2.colors.input[props.genre].color.placeholder
+                  }
+                }),
+                children: props.labelPlaceholder
+              }
+            ) : dataDate.sort.map((date, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DateInput,
+                {
+                  $isHaveValue: !!date.value,
+                  $isActive: activeSegment === date.type,
+                  $genre: props.genre,
+                  $size: props.size,
+                  onClick: () => date.setActive(),
+                  children: date.value != null ? String(date.value).padStart(date.type === DatePickerVariant.YYYY ? 1 : 2, "0") : date.placeholder || ""
+                }
+              ),
+              index !== dataDate.sort.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { width: "4px", pointerEvents: "none", textAlign: "center" }, children: "." })
+            ] }, date.type))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Popover,
+      {
+        sx: (theme2) => ({
+          default: {
+            background: theme2.colors.input[props.genre].background.rest,
+            border: `solid 1px ${theme2.colors.input[props.genre].border.rest}`
+          }
+        }),
+        size: props.size,
+        genre: props.genre,
+        isOpen,
+        isShowAlwaysOutline: true,
+        floatingStyles,
+        ref: refFloating,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DateDropdownList, { $isInputEffect: props.isInputEffect, $genre: props.genre, $size: props.size, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Stack,
+            {
+              sx: {
+                default: {
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    isRadius: true,
+                    icons: [
+                      {
+                        name: "Arrow2",
+                        type: "id",
+                        turn: 90
+                      }
+                    ],
+                    isWidthAsHeight: true,
+                    genre: props.genre,
+                    size: "small",
+                    onClick: () => !isBlockPrevMonth && onPrevMonth(),
+                    isHidden: isBlockPrevMonth
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { sx: { default: { gap: "8px" } }, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectMonth,
+                    {
+                      monthsLocale: props.locale.months,
+                      genre: props.genre,
+                      size: "small",
+                      value: (valueMoment ?? dateDefaultMoment).clone().startOf("month").utc().valueOf(),
+                      isOnClickOptionClose: true,
+                      isStayValueAfterSelect: true,
+                      isOnlyColorInSelectListOption: true,
+                      isCenter: true,
+                      isShortLabel: true,
+                      refFloating: refSelectMonth,
+                      onChange: (timestamp) => {
+                        if (timestamp) onChangeDate(timestamp);
+                      },
+                      dateMin: props.dateMin,
+                      dateMax: props.dateMax,
+                      sx: { default: { width: "60px" } }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectYear,
+                    {
+                      genre: props.genre,
+                      size: "small",
+                      refFloating: refSelectYear,
+                      value: (valueMoment ?? dateDefaultMoment).clone().startOf("year").utc().valueOf(),
+                      onChange: (timestamp) => {
+                        if (timestamp) onChangeDate(timestamp);
+                      },
+                      isOnClickOptionClose: true,
+                      isStayValueAfterSelect: true,
+                      isOnlyColorInSelectListOption: true,
+                      isCenter: true,
+                      dateMin: props.dateMin,
+                      dateMax: props.dateMax,
+                      sx: { default: { width: "60px" } }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: () => !isBlockNextMonth && onNextMonth(),
+                    isWidthAsHeight: true,
+                    isRadius: true,
+                    icons: [
+                      {
+                        name: "Arrow2",
+                        type: "id",
+                        turn: -90
+                      }
+                    ],
+                    genre: props.genre,
+                    size: "small",
+                    isHidden: isBlockNextMonth
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(DateDropdownDays, { $rows: rows, children: [
+            daysInWeek.map((e, index) => {
+              var _a2;
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DateDropdownDayOfWeek,
+                {
+                  tabIndex: -1,
+                  type: "button",
+                  $isToday: false,
+                  $isWeekend: false,
+                  $genre: props.genre,
+                  $size: props.size,
+                  $row: ((_a2 = daysInMonth[0]) == null ? void 0 : _a2.weekOfMonth) - 1,
+                  $column: index + 1,
+                  children: e.label
+                },
+                `${e.label}-${index}`
+              );
+            }),
+            daysInMonth.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              DateDropdownDay,
+              {
+                type: "button",
+                $isDisabled: day.isDisabled,
+                $genre: props.genre,
+                $size: props.size,
+                $row: (day == null ? void 0 : day.weekOfMonth) + 1,
+                $column: day.dayOfWeek,
+                onClick: () => {
+                  if (!day.isDisabled) {
+                    onChangeDate(day.value);
+                    if (props.isOnClickClose) {
+                      close();
+                    }
+                  }
+                },
+                tabIndex: day.isDisabled ? -1 : 0,
+                $isToday: day.isToday,
+                $isWeekend: day.isWeekend,
+                $isChoice: day.value === (valueMoment == null ? void 0 : valueMoment.valueOf()),
+                $isCurrentMonth: day.isCurrentMonth,
+                children: [
+                  !day.isDisabled && /* @__PURE__ */ jsxRuntimeExports.jsx(Ripple, { color: theme.colors.date[props.genre].color.rest }),
+                  day.labelNumber
+                ]
+              },
+              day.value
+            ))
+          ] })
+        ] })
+      }
+    ),
+    isError || (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorMessage,
+      {
+        ...isError ? {
+          isError: true,
+          size: (_b = props == null ? void 0 : props.error) == null ? void 0 : _b.size,
+          ...props.notValidDate
+        } : props.error,
+        size: ((_c = props == null ? void 0 : props.error) == null ? void 0 : _c.size) ?? props.size
+      }
+    ) : null
+  ] });
+};
+const DateWrapper = styled.div`
+  width: 100%;
+  position: relative;
+  height: fit-content;
+  ${(props) => props.$isMinWidth && css`
+      width: min-content;
+    `}
+  ${addSX};
+  ${addNiceNumber};
+`;
+const DateDropdownListParent = styled(motion.div)`
+  ${addRemoveScrollbar};
+`;
+const DateDropdownList = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 6px;
+  transform: translateZ(0);
+  justify-content: flex-start;
+  gap: 10px;
+  ${addInputIsInputEffect};
+`;
+const DateDropdownDays = styled.div`
+  display: grid;
+  column-gap: normal;
+  row-gap: normal;
+  gap: 6px;
+  grid-template-columns: repeat(7, 28px);
+  grid-template-rows: repeat(${(props) => props.$rows}, 28px);
+  justify-content: space-between;
+`;
+const addDateDropdownDaySize = css`
+  ${(props) => props.$size && css`
+      border-radius: ${KEY_SIZE_DATA[props.$size].radius}px;
+      ${(params) => getFontSizeStyles(12, 700, params.theme.font.family)};
+    `};
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  user-select: none;
+  background: ${(props) => props.theme.colors.date[props.$genre].background.rest};
+  border-color: ${(props) => props.theme.colors.date[props.$genre].border.rest};
+  color: ${(props) => props.theme.colors.date[props.$genre].color.rest};
+  border: 1px solid transparent;
+  grid-row: ${(props) => props.$row};
+  grid-column: ${(props) => props.$column};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  &:hover {
+    ${(props) => !props.$isDisabled && css`
+      background: ${props.theme.colors.date[props.$genre].background.hover};
+      border-color: ${props.theme.colors.date[props.$genre].border.hover};
+      color: ${props.theme.colors.date[props.$genre].color.hover};
+    `}
+  }
+  ${addTransition};
+
+  ${(props) => props.$isWeekend && css`
+      background: ${props.theme.colors.date[props.$genre].background.weekend};
+      border-color: ${props.theme.colors.date[props.$genre].border.weekend};
+      color: ${props.theme.colors.date[props.$genre].color.weekend};
+    `}
+  ${(props) => props.$isToday && css`
+      background: ${props.theme.colors.date[props.$genre].background.today};
+      border-color: ${props.theme.colors.date[props.$genre].border.today};
+      color: ${props.theme.colors.date[props.$genre].color.today};
+    `}
+    ${(props) => props.$isChoice && css`
+      background: ${props.theme.colors.date[props.$genre].background.choice};
+      border-color: ${props.theme.colors.date[props.$genre].border.choice};
+      color: ${props.theme.colors.date[props.$genre].color.choice};
+    `}
+    ${(props) => props.$isDisabled && css`
+        background: ${props.theme.colors.date[props.$genre].background.weekend};
+      border-color: ${props.theme.colors.date[props.$genre].border.weekend};
+      color: ${props.theme.colors.date[props.$genre].color.weekend};
+      opacity: 0.5;
+    `}
+    ${(props) => !props.$isCurrentMonth && css`
+      opacity: 0.5;
+    `}
+  ${(params) => getFontSizeStyles(12, 700, params.theme.font.family)};
+
+  ${addOutline};
+`;
+const DateDropdownDay = styled.button`
+  ${addDateDropdownDaySize}
+`;
+const DateDropdownDayOfWeek = styled.button`
+  ${addDateDropdownDaySize}
+  opacity: 1;
+  background-color: transparent;
+`;
+const addDateInputGenre = css`
+      background-color: ${(props) => props.$isActive ? props.theme.palette.black10 : "transparent"};
+
+        ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+  ${(props) => props.$isHaveValue ? css`
+        color: ${props.theme.colors.input[props.$genre].color.rest};
+        &:focus-visible {
+          color: ${props.theme.colors.input[props.$genre].color.rest};
+        }
+    ` : css`
+                color: ${props.theme.colors.input[props.$genre].color.placeholder};
+  `};
+`;
+const addDateInputSize = css`
+  border-radius: 4px;
+  padding: 2px;
+  min-width: 10px;
+`;
+const DateInput = styled.div`
+  text-align: center;
+  resize: none;
+  overflow: hidden;
+  border: 0px solid;
+  background: transparent;
+  margin: 0px !important;
+  white-space: nowrap;
+  ${addDateInputSize};
+  ${addDateInputGenre};
+  ${addRemoveOutline};
+`;
+const addDateInputWrapperGenre = 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};
+    outline: 2px solid transparent;
+    outline-offset: 1px;
+    &: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};
+      outline: 2px solid ${(props2) => props2.theme.states.focus};
+    `}
+  `};
+`;
+const addDateInputWrapperSize = css`
+  ${(props) => css`
+    padding: 0px ${KEY_SIZE_DATA[props.$size].padding}px;
+    height: ${KEY_SIZE_DATA[props.$size].height}px;
+    min-height: ${KEY_SIZE_DATA[props.$size].height}px;
+    max-height: ${KEY_SIZE_DATA[props.$size].height}px;
+    border-radius: ${KEY_SIZE_DATA[props.$size].radius}px;
+  `}
+`;
+const DateInputWrapper = styled.div`
+  resize: none;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid transparent;
+
+  white-space: nowrap;
+
+  display: flex;
+  align-items: center;
+  gap: 0px;
+
+  ${addDateInputWrapperSize};
+  ${addDateInputWrapperGenre};
+  ${addTransition};
+  ${addError};
+`;
+var DatePickerVariant = /* @__PURE__ */ ((DatePickerVariant2) => {
+  DatePickerVariant2["DD"] = "DD";
+  DatePickerVariant2["MM"] = "MM";
+  DatePickerVariant2["YYYY"] = "YYYY";
+  return DatePickerVariant2;
+})(DatePickerVariant || {});
+export {
+  DatePicker as D,
+  DateWrapper as a,
+  DateDropdownListParent as b,
+  DateDropdownList as c,
+  DateDropdownDays as d,
+  addDateDropdownDaySize as e,
+  DateDropdownDay as f,
+  DateDropdownDayOfWeek as g,
+  DateInput as h,
+  addDateInputWrapperSize as i,
+  DateInputWrapper as j,
+  DatePickerVariant as k
+};
+//# sourceMappingURL=component.types-CqvwcIsz.js.map