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

package/build/component.styles-DCDOKa6e.js

@@ -1,793 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { c as Button } from "./component-CbPhVNw5.js";
-import "./component.styles-B0L4jbOO.js";
-import { R as Ripple } from "./component-vpCWcIhC.js";
-import { c as SelectMonth, e as SelectYear } from "./component.styles-DqTkSP8L.js";
-import { b as Stack } from "./component-jPZYT5iL.js";
-import { b as ErrorMessage, a as addError } from "./style-DjCgiI7l.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-B46v_8eu.js";
-import moment from "moment";
-import { useState, useRef, useMemo, useCallback, 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--cOriuv7.js";
-import { d as InputIsInputEffect, b as addInputPlaceholderNiceNumber, P as PatternFormat } from "./component.styles-Dt_CUijB.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) => {
-  const { onChange, onBlur } = props;
-  const theme = useTheme();
-  const [valueMoment, setValueMoment] = useState(null);
-  const [currentMonth, setCurrentMonth] = useState(null);
-  const [currentYear, setCurrentYear] = useState(null);
-  const [currentDay, setCurrentDay] = useState(null);
-  const [inputDay, setInputDay] = useState(null);
-  const [inputMonth, setInputMonth] = useState(null);
-  const [inputYear, setInputYear] = useState(null);
-  const refDay = useRef(null);
-  const refMonth = useRef(null);
-  const refYear = useRef(null);
-  const [activeSegment, setActiveSegment] = useState(null);
-  const [isError, setIsError] = useState(false);
-  const dataDate = useMemo(() => {
-    const mode = props.mode ?? "DD.MM.YYYY";
-    const result = {
-      MM: {
-        type: "MM",
-        width: "20px",
-        ref: refMonth,
-        value: inputMonth,
-        setValue: setInputMonth,
-        setActive: () => setActiveSegment("month"),
-        valueInput: inputMonth,
-        setValueInput: setInputMonth,
-        placeholder: props.locale.inputs.month
-      },
-      DD: {
-        type: "DD",
-        width: "20px",
-        ref: refDay,
-        value: inputDay,
-        setValue: setInputDay,
-        setActive: () => setActiveSegment("day"),
-        valueInput: inputDay,
-        setValueInput: setInputDay,
-        placeholder: props.locale.inputs.day
-      },
-      YYYY: {
-        type: "YYYY",
-        width: "40px",
-        ref: refYear,
-        value: inputYear,
-        setValue: setInputYear,
-        setActive: () => setActiveSegment("year"),
-        valueInput: inputYear,
-        setValueInput: setInputYear,
-        placeholder: props.locale.inputs.year
-      }
-    };
-    const resultSort = mode.split(".").map((e) => e.trim()).map((e) => {
-      if (e === "DD") return result.DD;
-      if (e === "MM") return result.MM;
-      if (e === "YYYY") return result.YYYY;
-      return null;
-    }).filter((e) => e !== null);
-    return resultSort;
-  }, [
-    inputDay,
-    inputMonth,
-    inputYear,
-    props.locale.inputs.day,
-    props.locale.inputs.month,
-    props.locale.inputs.year,
-    props.mode
-  ]);
-  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(() => {
-    if (currentYear === null || currentMonth === null) return [];
-    const today = moment.utc();
-    const startOfMonth = moment.utc().year(currentYear).month(currentMonth).startOf("month");
-    const endOfMonth = moment.utc().year(currentYear).month(currentMonth).endOf("month");
-    const days = [];
-    const startDate = props.startDate ? moment.utc(props.startDate) : null;
-    const endDate = props.endDate ? moment.utc(props.endDate) : 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(startDate, "day") || day.isAfter(endDate, "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(startDate, "day") || currentDate.isAfter(endDate, "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(startDate, "day") || day.isAfter(endDate, "day")
-        });
-      }
-    }
-    days.sort((a, b) => a.value - b.value);
-    return days;
-  }, [currentMonth, currentYear, props.endDate, props.startDate]);
-  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 props.value !== null && props.value !== void 0;
-  }, [props.value]);
-  const isBlockNextMonth = useMemo(() => {
-    if (currentYear === null || currentMonth === null || currentDay === null) return true;
-    const nextMonth = moment.utc().year(currentYear).month(currentMonth).date(currentDay).add(1, "month").startOf("month");
-    const isBeforeEndDate = props.endDate ? nextMonth.isAfter(moment.utc(props.endDate), "month") : false;
-    return isBeforeEndDate;
-  }, [currentYear, currentMonth, currentDay, props.endDate]);
-  const isBlockPrevMonth = useMemo(() => {
-    if (currentYear === null || currentMonth === null || currentDay === null) return true;
-    const prevMonth = moment.utc().year(currentYear).month(currentMonth).date(currentDay).subtract(1, "month").startOf("month");
-    const isAfterStartDate = props.startDate ? prevMonth.isBefore(moment.utc(props.startDate), "month") : false;
-    return isAfterStartDate;
-  }, [currentYear, currentMonth, currentDay, props.startDate]);
-  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
-  });
-  const handleOnClose = useCallback(
-    (isCheck) => {
-      close();
-      if (isCheck) {
-        if (!inputDay || !inputMonth || !inputYear) {
-          onChange(null);
-        }
-      }
-    },
-    [close, inputDay, inputMonth, inputYear, onChange]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (!/^\d$/.test(e.key) && !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Backspace", "Delete", "Tab"].includes(e.key) && !e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        return;
-      }
-      if (e.key === "Backspace" || e.key === "Delete") {
-        if (activeSegment === "day" && (!inputDay || inputDay === "") || activeSegment === "month" && (!inputMonth || inputMonth === "") || activeSegment === "year" && (!inputYear || inputYear === "")) {
-          if (activeSegment === "day") {
-            setInputDay(null);
-          } else if (activeSegment === "month") {
-            setInputMonth(null);
-          } else if (activeSegment === "year") {
-            setInputYear(null);
-          }
-          const nextSegment = activeSegment === "day" ? "day" : activeSegment === "month" ? "day" : "month";
-          setActiveSegment(nextSegment);
-          e.preventDefault();
-        }
-      }
-      if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-        const nextSegment = activeSegment === "day" ? "year" : activeSegment === "month" ? "day" : "month";
-        setActiveSegment(nextSegment);
-        e.preventDefault();
-      }
-      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-        const nextSegment = activeSegment === "day" ? "month" : activeSegment === "month" ? "year" : "day";
-        setActiveSegment(nextSegment);
-        e.preventDefault();
-      }
-    },
-    [activeSegment, inputDay, inputMonth, inputYear]
-  );
-  const onChangeDate = useCallback(
-    (timestamp, isBlur, isChange) => {
-      const momentStartDate = props.startDate ? moment(props.startDate).utc() : null;
-      const momentEndDate = props.endDate ? moment(props.endDate).utc() : null;
-      const momentCheckDate = moment(timestamp).utc();
-      let momentNewDate = moment(timestamp).utc();
-      if (momentStartDate && momentCheckDate.isBefore(momentStartDate, "day")) {
-        momentNewDate = momentStartDate.startOf("day");
-      } else if (momentEndDate && momentCheckDate.isAfter(momentEndDate, "day")) {
-        momentNewDate = momentEndDate.startOf("day");
-      }
-      if (valueMoment == null ? void 0 : valueMoment.isSame(momentNewDate, "day")) return;
-      setValueMoment(momentNewDate);
-      setCurrentDay(momentNewDate.date());
-      setCurrentMonth(momentNewDate.month());
-      setCurrentYear(momentNewDate.year());
-      if (isChange) onChange(momentNewDate.valueOf());
-      if (props.isOnClickClose && isBlur) {
-        onBlur == null ? void 0 : onBlur();
-        handleOnClose();
-      }
-    },
-    [props.startDate, props.endDate, props.isOnClickClose, valueMoment, onChange, onBlur, handleOnClose]
-  );
-  const onNextMonth = useCallback(() => {
-    if (currentYear === null || currentMonth === null || currentDay === null) return;
-    const newDate = moment.utc().year(currentYear).month(currentMonth).date(currentDay).add(1, "month");
-    onChangeDate(newDate.valueOf(), false, false);
-  }, [currentDay, currentMonth, currentYear, onChangeDate]);
-  const onPrevMonth = useCallback(() => {
-    if (currentYear === null || currentMonth === null || currentDay === null) return;
-    const newDate = moment.utc().year(currentYear).month(currentMonth).date(currentDay).subtract(1, "month");
-    onChangeDate(newDate.valueOf(), false, false);
-  }, [currentDay, currentMonth, currentYear, onChangeDate]);
-  useEffect(() => {
-    const valueMoment2 = props.value ? moment(props.value).utc() : moment.utc();
-    if (props.value !== null && props.value !== void 0) {
-      setInputDay(fixOneToZero(valueMoment2.date().toString()));
-      setInputMonth(fixOneToZero((valueMoment2.month() + 1).toString()));
-      setInputYear(valueMoment2.year().toString());
-    } else {
-      setInputDay(null);
-      setInputMonth(null);
-      setInputYear(null);
-    }
-    onChangeDate(valueMoment2.valueOf(), false, false);
-  }, [props.value, isOpen]);
-  useEffect(() => {
-    if (activeSegment !== null) {
-      setTimeout(() => {
-        var _a, _b, _c;
-        if (activeSegment === "day") {
-          (_a = refDay.current) == null ? void 0 : _a.focus();
-        } else if (activeSegment === "month") {
-          (_b = refMonth.current) == null ? void 0 : _b.focus();
-        } else if (activeSegment === "year") {
-          (_c = refYear.current) == null ? void 0 : _c.focus();
-        }
-      }, 0);
-    }
-  }, [activeSegment]);
-  useEffect(() => {
-    if (isOpen) {
-      setActiveSegment("day");
-    } else {
-      setActiveSegment(null);
-    }
-  }, [isOpen]);
-  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 } : props.error,
-            $isOpen: isOpen,
-            onClick: () => {
-              open();
-            },
-            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.map((date, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DateInput,
-                {
-                  onValueChange: (values, sourceInfo) => {
-                    if (date.type === "DD") {
-                      if (sourceInfo.source !== "event") return;
-                      const value = values.formattedValue;
-                      setInputMonth(null);
-                      setInputYear(null);
-                      if (Number(value) && Number(value) > 31) {
-                        setInputDay("31");
-                      } else {
-                        setInputDay(value);
-                      }
-                      if (value !== "" && !value.includes("_")) {
-                        setActiveSegment("month");
-                      }
-                    } else if (date.type === "MM") {
-                      if (sourceInfo.source !== "event") return;
-                      const value = values.formattedValue;
-                      setInputYear(null);
-                      if (Number(value) > 12) {
-                        setInputMonth("12");
-                      } else {
-                        setInputMonth(value);
-                      }
-                      if (value !== "" && !value.includes("_")) {
-                        setActiveSegment("year");
-                      }
-                    } else if (date.type === "YYYY") {
-                      if (sourceInfo.source !== "event") return;
-                      const value = values.formattedValue;
-                      setInputYear(value);
-                      if (value !== "" && !value.includes("_")) {
-                        const day = inputDay ? Number(inputDay) : NaN;
-                        const month = inputMonth ? Number(inputMonth) : NaN;
-                        const year = value ? Number(value) : 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(), false, true);
-                          } else {
-                            setIsError(true);
-                            setTimeout(() => {
-                              setIsError(false);
-                              setInputDay(null);
-                              setInputMonth(null);
-                              setInputYear(null);
-                              setActiveSegment("day");
-                            }, 1e3);
-                          }
-                        }
-                      }
-                    }
-                  },
-                  $genre: props.genre,
-                  $size: props.size,
-                  getInputRef: (ref) => {
-                    if (ref && !date.ref.current) {
-                      date.ref.current = ref;
-                    }
-                  },
-                  onFocus: (e) => {
-                    e.target.select();
-                  },
-                  onBlur: () => {
-                    var _a;
-                    if (index !== dataDate.length - 1) {
-                      if ((_a = date.valueInput) == null ? void 0 : _a.includes("_")) date.setValueInput(fixUnderscoreToZero(date.valueInput));
-                    }
-                  },
-                  onKeyDown: handleKeyDown,
-                  value: date.valueInput ?? "",
-                  placeholder: date.placeholder,
-                  format: "#".repeat(date.type.length),
-                  style: { width: date.width },
-                  readOnly: isError,
-                  type: "text",
-                  mask: "_"
-                }
-              ),
-              index !== dataDate.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
-                  }
-                ),
-                currentYear !== null && currentMonth !== null && currentDay !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { sx: { default: { gap: "8px" } }, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    SelectMonth,
-                    {
-                      monthsLocale: props.locale.months,
-                      genre: props.genre,
-                      size: "small",
-                      value: moment.utc().year(currentYear).month(currentMonth).date(currentDay).startOf("month").utc().valueOf(),
-                      isOnClickOptionClose: true,
-                      isStayValueAfterSelect: true,
-                      isOnlyColorInSelectListOption: true,
-                      isCenter: true,
-                      isShortLabel: true,
-                      refFloating: refSelectMonth,
-                      onChange: (timestamp) => {
-                        if (timestamp) onChangeDate(timestamp, false, true);
-                      },
-                      startDate: props.startDate,
-                      endDate: props.endDate,
-                      sx: { default: { width: "60px" } }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    SelectYear,
-                    {
-                      genre: props.genre,
-                      size: "small",
-                      refFloating: refSelectYear,
-                      value: moment.utc().year(currentYear).month(currentMonth).date(currentDay).startOf("year").utc().valueOf(),
-                      onChange: (timestamp) => {
-                        if (timestamp) onChangeDate(timestamp, false, true);
-                      },
-                      isOnClickOptionClose: true,
-                      isStayValueAfterSelect: true,
-                      isOnlyColorInSelectListOption: true,
-                      isCenter: true,
-                      startDate: props.startDate,
-                      endDate: props.endDate,
-                      sx: { default: { width: "60px" } }
-                    }
-                  )
-                ] }) : null,
-                /* @__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 _a;
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DateDropdownDayOfWeek,
-                {
-                  $isToday: false,
-                  $isWeekend: false,
-                  type: "button",
-                  $genre: props.genre,
-                  $size: props.size,
-                  $row: ((_a = daysInMonth[0]) == null ? void 0 : _a.weekOfMonth) - 1,
-                  $column: index + 1,
-                  children: e.label
-                },
-                `${e.label}-${index}`
-              );
-            }),
-            daysInMonth.map(
-              (day) => !day.isDisabled ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                DateDropdownDay,
-                {
-                  type: "button",
-                  $genre: props.genre,
-                  $size: props.size,
-                  $row: (day == null ? void 0 : day.weekOfMonth) + 1,
-                  $column: day.dayOfWeek,
-                  onClick: () => onChangeDate(day.value, true, true),
-                  $isToday: day.isToday,
-                  $isWeekend: day.isWeekend,
-                  $isChoice: day.value === (valueMoment == null ? void 0 : valueMoment.valueOf()),
-                  $isCurrentMonth: day.isCurrentMonth,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Ripple, { color: theme.colors.date[props.genre].color.rest }),
-                    day.labelNumber
-                  ]
-                },
-                day.value
-              ) : null
-            )
-          ] })
-        ] })
-      }
-    ),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props == null ? void 0 : props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
-  ] });
-};
-function fixUnderscoreToZero(str) {
-  if (str.length === 2) {
-    return "0" + str[0];
-  }
-  return str.replace(/_/g, "0");
-}
-function fixOneToZero(str) {
-  if (str.length === 1) {
-    return "0" + str[0];
-  }
-  return str;
-}
-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`
-  list-style: none;
-
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  padding-top: 6px;
-  transform: translateZ(0);
-  ${InputIsInputEffect};
-  justify-content: flex-start;
-  gap: 10px;
-`;
-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 DateDropdownDaySize = css`
-  ${(props) => props.$size && DateDropdownDaySizeConstructor({
-  ...KEY_SIZE_DATA[props.$size]
-})};
-  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) => 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.$isCurrentMonth && css`
-      opacity: 0.5;
-    `}
-  ${(params) => getFontSizeStyles(12, 700, params.theme.font.family)};
-
-  ${addOutline};
-`;
-const DateDropdownDaySizeConstructor = (props) => css`
-  border-radius: ${props.radius}px;
-  ${(params) => getFontSizeStyles(12, 700, params.theme.font.family)};
-`;
-const DateDropdownDay = styled.button`
-  ${DateDropdownDaySize}
-`;
-const DateDropdownDayOfWeek = styled.button`
-  ${DateDropdownDaySize}
-  opacity: 1;
-  background-color: transparent;
-`;
-const DateInputGenre = css`
-  ${(props) => css`
-    color: ${props.theme.colors.input[props.$genre].color.rest};
-    &:active {
-      color: ${props.theme.colors.input[props.$genre].color.rest};
-    }
-    &:focus-visible {
-      color: ${props.theme.colors.input[props.$genre].color.rest};
-    }
-  `};
-`;
-const DateInput = styled(PatternFormat)`
-  resize: none;
-  overflow: hidden;
-  border: 0px solid;
-  background: transparent;
-  padding: 0px !important;
-  margin: 0px !important;
-  white-space: nowrap;
-  text-align: left;
-  ${(props) => getFontSizeStyles(16, 400, "Roboto Mono", props.theme.font.lineHeight)};
-  ${DateInputGenre};
-  ${addInputPlaceholderNiceNumber};
-  ${addRemoveOutline};
-`;
-const DateInputWrapperGenre = 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};
-    }
-    &:has(:focus-visible),
-    &:has(:active) {
-      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};
-    }
-    ${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 DateInputWrapperSize = css`
-  ${(props) => DateInputWrapperSizeConstructor(KEY_SIZE_DATA[props.$size])};
-`;
-const DateInputWrapperSizeConstructor = (props) => css`
-  padding: 0px ${props.padding}px;
-  height: ${props.height}px;
-  min-height: ${props.height}px;
-  max-height: ${props.height}px;
-  border-radius: ${props.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;
-
-  ${DateInputWrapperSize};
-  ${DateInputWrapperGenre};
-  ${addTransition};
-  ${addError};
-`;
-export {
-  DatePicker as D,
-  DateWrapper as a,
-  DateDropdownListParent as b,
-  DateDropdownList as c,
-  DateDropdownDays as d,
-  DateDropdownDaySize as e,
-  DateDropdownDaySizeConstructor as f,
-  DateDropdownDay as g,
-  DateDropdownDayOfWeek as h,
-  DateInput as i,
-  DateInputWrapperSize as j,
-  DateInputWrapperSizeConstructor as k,
-  DateInputWrapper as l
-};
-//# sourceMappingURL=component.styles-DCDOKa6e.js.map