@jenesei-software/jenesei-kit-react 1.0.0

package/build/component.styles-CV7jTFCg.js

@@ -0,0 +1,758 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import moment from "moment";
+import { useState, useRef, useMemo, useCallback, useEffect, Fragment } from "react";
+import styled, { useTheme, css } from "styled-components";
+import { c as Button } from "./component-DZxbW_Jz.js";
+import "./component.styles-B0L4jbOO.js";
+import { R as Ripple } from "./component-ByY_9Ryc.js";
+import { b as SelectMonth, c as SelectYear } from "./component.styles-Bn6ylF83.js";
+import { b as Stack } from "./component-jPZYT5iL.js";
+import { b as ErrorMessage, a as addError } from "./style-DeAgDHyI.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+import { u as usePopover, P as Popover, g as getFontSizeStyles } from "./component-C2JFFh-k.js";
+import { motion } from "framer-motion";
+import { PatternFormat } from "react-number-format";
+import { d as InputIsInputEffect, a as InputPlaceholderNiceNumber } from "./component.styles-Du2y0R4W.js";
+import { i as addNiceNumber, a as addRemoveScrollbar, b as addTransition, f as addOutline, h as addRemoveOutline } from "./style-CEGJOjRW.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+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 radius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
+  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 { isOpen, close, reference, floating, floatingStyles } = usePopover({
+    placement: "bottom-start",
+    offset: 8,
+    mode: "clickOpen",
+    isClickOutside: true
+  });
+  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 && 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,
+      {
+        ref: reference,
+        $size: props.size,
+        $genre: props.genre,
+        $sx: props.sx,
+        $isDisabled: props == null ? void 0 : props.isDisabled,
+        $isMinWidth: props == null ? void 0 : props.isMinWidth,
+        $radius: radius,
+        $parentListHeight: height,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DateInputWrapper,
+          {
+            tabIndex: 0,
+            $genre: props.genre,
+            $size: props.size,
+            $error: isError ? { isError: true } : props.error,
+            $isOpen: isOpen,
+            children: 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 (!isNaN(day) && !isNaN(month) && !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) => {
+                    date.setActive();
+                    e.target.select();
+                  },
+                  onBlur: () => {
+                    if (index !== dataDate.length - 1) {
+                      if (date.valueInput && date.valueInput.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,
+        floatingStyles,
+        ref: floating,
+        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,
+                    {
+                      isShortLabel: true,
+                      monthsLocale: props.locale.months,
+                      genre: props.genre,
+                      size: "small",
+                      value: moment.utc().year(currentYear).month(currentMonth).date(currentDay).startOf("day").utc().valueOf(),
+                      onChange: (timestamp) => {
+                        onChangeDate(timestamp, false, true);
+                      },
+                      startDate: props.startDate,
+                      endDate: props.endDate,
+                      sx: { default: { width: "70px" } }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectYear,
+                    {
+                      genre: props.genre,
+                      size: "small",
+                      value: moment.utc().year(currentYear).month(currentMonth).date(currentDay).startOf("day").utc().valueOf(),
+                      onChange: (timestamp) => {
+                        onChangeDate(timestamp, false, true);
+                      },
+                      startDate: props.startDate,
+                      endDate: props.endDate,
+                      sx: { default: { width: "70px" } }
+                    }
+                  )
+                ] }) : 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
+                },
+                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};
+  ${InputPlaceholderNiceNumber};
+  ${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-CV7jTFCg.js.map