@cocso-ui/react 0.2.12 → 0.2.14

package/dist/cjs/day-picker/DayPicker.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+interface DayPickerProps extends ComponentPropsWithoutRef<'div'> {
+    value?: Date;
+    onValueChange?: (value: Date | null) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+}
+declare const DayPicker: react.ForwardRefExoticComponent<DayPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { DayPicker };
+export type { DayPickerProps };

package/dist/cjs/day-picker/DayPicker.js

@@ -0,0 +1,99 @@
+"use client";
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var clsx = require('clsx');
+var locale = require('date-fns/locale');
+var react = require('react');
+var DatePicker = require('react-datepicker');
+var DayPicker_module = require('./DayPicker.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Dropdown = require('../dropdown/Dropdown.js');
+var Button = require('../button/Button.js');
+var Typography = require('../typography/Typography.js');
+
+const DayPicker = /*#__PURE__*/react.forwardRef(({
+  className,
+  value,
+  onValueChange,
+  disabled,
+  children,
+  minDate,
+  maxDate,
+  ...props
+}, ref) => {
+  const [open, setOpen] = react.useState(false);
+  const handleChange = date => {
+    onValueChange?.(date);
+    setOpen(false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: clsx.clsx(DayPicker_module.root, className),
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Dropdown.Dropdown.Trigger, {
+        asChild: true,
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(Dropdown.Dropdown.Portal, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Dropdown.Dropdown.Content, {
+          className: DayPicker_module.content,
+          "aria-label": "\uB0A0\uC9DC \uC120\uD0DD",
+          children: /*#__PURE__*/jsxRuntime.jsx(DatePicker, {
+            selected: value,
+            onChange: handleChange,
+            disabled: disabled,
+            locale: locale.ko,
+            minDate: minDate,
+            maxDate: maxDate,
+            dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C",
+            showPopperArrow: false,
+            dayClassName: date => {
+              const day = date.getDay();
+              if (day === 0) return DayPicker_module.sunday;
+              if (day === 6) return DayPicker_module.saturday;
+              return '';
+            },
+            renderCustomHeader: ({
+              date,
+              decreaseMonth,
+              increaseMonth,
+              prevMonthButtonDisabled,
+              nextMonthButtonDisabled
+            }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+                type: "button",
+                variant: "secondary",
+                size: "xs",
+                onClick: decreaseMonth,
+                disabled: prevMonthButtonDisabled,
+                className: DayPicker_module.backButton,
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+              }), /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+                type: "body",
+                weight: "semibold",
+                children: date.toLocaleDateString('ko-KR', {
+                  year: 'numeric',
+                  month: 'long'
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+                type: "button",
+                variant: "secondary",
+                size: "xs",
+                onClick: increaseMonth,
+                disabled: nextMonthButtonDisabled,
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+              })]
+            }),
+            inline: true
+          })
+        })
+      })]
+    })
+  });
+});
+DayPicker.displayName = 'DayPicker';
+
+exports.DayPicker = DayPicker;

package/dist/cjs/day-picker/DayPicker.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".DayPicker-module_root__lDrAw{display:inline-block;transform:translateZ(0)}.DayPicker-module_content__VVh4Y{min-width:260px;overflow:hidden}.DayPicker-module_backButton__jYW7L{transform:rotate(180deg)}.DayPicker-module_sunday__RaZuV{color:var(--ds-color-danger-600)!important}.DayPicker-module_saturday__e-AQO{color:var(--ds-color-primary-600)!important}.react-datepicker{background-color:var(--ds-color-white);color:var(--ds-color-text-primary);display:inline-block;font-size:.8rem;position:relative}.react-datepicker__aria-live{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.react-datepicker__sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__month-container{padding-block:var(--ds-spacing-8);width:100%}.react-datepicker__header--custom{align-items:center;display:flex;justify-content:space-between;padding-bottom:var(--ds-spacing-5);width:100%}.react-datepicker__day-names,.react-datepicker__week{text-align:center;white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name{color:var(--ds-color-text-primary);display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day{border-radius:8px;cursor:pointer;font-weight:500}.react-datepicker__day:hover{background-color:var(--ds-color-neutral-50)}.react-datepicker__day--selected{background-color:var(--ds-color-primary-500);color:var(--ds-color-white)!important}.react-datepicker__day--selected:hover{background-color:var(--ds-color-primary-600)!important}.react-datepicker__day-name:first-child{color:var(--ds-color-danger-600)}.react-datepicker__day-name:nth-child(7){color:var(--ds-color-primary-600)}.react-datepicker__day--disabled{cursor:not-allowed;opacity:.3}";
+var styles = {"root":"DayPicker-module_root__lDrAw","content":"DayPicker-module_content__VVh4Y","backButton":"DayPicker-module_backButton__jYW7L","sunday":"DayPicker-module_sunday__RaZuV","saturday":"DayPicker-module_saturday__e-AQO"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/index.d.ts

@@ -2,6 +2,7 @@ export { Accordion } from './accordion/Accordion.js';
 export { Badge, BadgeProps } from './badge/Badge.js';
 export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './button/Button.js';
 export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './checkbox/Checkbox.js';
+export { DayPicker, DayPickerProps } from './day-picker/DayPicker.js';
 export { Dropdown } from './dropdown/Dropdown.js';
 export { Link, LinkProps, LinkSize } from './link/Link.js';
 export { Modal } from './modal/Modal.js';

package/dist/cjs/index.js

@@ -4,6 +4,7 @@ var Accordion = require('./accordion/Accordion.js');
 var Badge = require('./badge/Badge.js');
 var Button = require('./button/Button.js');
 var Checkbox = require('./checkbox/Checkbox.js');
+var DayPicker = require('./day-picker/DayPicker.js');
 var Dropdown = require('./dropdown/Dropdown.js');
 var Link = require('./link/Link.js');
 var Modal = require('./modal/Modal.js');
@@ -28,6 +29,7 @@ exports.Accordion = Accordion.Accordion;
 exports.Badge = Badge.Badge;
 exports.Button = Button.Button;
 exports.Checkbox = Checkbox.Checkbox;
+exports.DayPicker = DayPicker.DayPicker;
 exports.Dropdown = Dropdown.Dropdown;
 exports.Link = Link.Link;
 exports.Modal = Modal.Modal;

package/dist/cjs/month-picker/MonthPicker.d.ts

@@ -3,9 +3,10 @@ import { ComponentPropsWithoutRef } from 'react';
 
 interface MonthPickerProps extends ComponentPropsWithoutRef<'div'> {
     value?: Date;
-    onValueChange?: (value: Date | undefined) => void;
-    minYear?: number;
-    maxYear?: number;
+    onValueChange?: (value: Date | null) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
 }
 declare const MonthPicker: react.ForwardRefExoticComponent<MonthPickerProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/cjs/month-picker/MonthPicker.js

@@ -3,97 +3,85 @@
 
 var reactIcons = require('@cocso-ui/react-icons');
 var clsx = require('clsx');
+var locale = require('date-fns/locale');
 var react = require('react');
+var DatePicker = require('react-datepicker');
 var MonthPicker_module = require('./MonthPicker.module.css.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Dropdown = require('../dropdown/Dropdown.js');
 var Button = require('../button/Button.js');
 var Typography = require('../typography/Typography.js');
 
-const MONTHS = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
 const MonthPicker = /*#__PURE__*/react.forwardRef(({
   className,
   value,
   onValueChange,
-  minYear = 1900,
-  maxYear = 2100,
   children,
+  minDate,
+  maxDate,
+  disabled,
   ...props
 }, ref) => {
   const [open, setOpen] = react.useState(false);
-  const [displayYear, setDisplayYear] = react.useState(value?.getFullYear() ?? new Date().getFullYear());
-  const handleMonthSelect = month => {
-    const newValue = new Date(displayYear, month - 1, 1);
-    onValueChange?.(newValue);
+  const handleChange = date => {
+    onValueChange?.(date);
     setOpen(false);
   };
-  const handleYearChange = year => {
-    const clampedYear = Math.max(minYear, Math.min(maxYear, year));
-    setDisplayYear(clampedYear);
-  };
-  const handleOpenChange = isOpen => {
-    if (isOpen) {
-      setDisplayYear(value?.getFullYear() ?? new Date().getFullYear());
-    }
-    setOpen(isOpen);
-  };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: ref,
     className: clsx.clsx(MonthPicker_module.root, className),
     ...props,
     children: /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, {
       open: open,
-      onOpenChange: handleOpenChange,
+      onOpenChange: setOpen,
       children: [/*#__PURE__*/jsxRuntime.jsx(Dropdown.Dropdown.Trigger, {
         asChild: true,
         children: children
       }), /*#__PURE__*/jsxRuntime.jsx(Dropdown.Dropdown.Portal, {
-        children: /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown.Content, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Dropdown.Dropdown.Content, {
           className: MonthPicker_module.content,
-          role: "listbox",
-          "aria-label": "\uC6D4 \uC120\uD0DD",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: MonthPicker_module.header,
-            children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-              type: "button",
-              size: "xs",
-              variant: "secondary",
-              onClick: () => handleYearChange(displayYear - 1),
-              disabled: displayYear <= minYear,
-              svgOnly: true,
-              "aria-label": "\uC774\uC804 \uB144\uB3C4",
-              children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {
-                className: MonthPicker_module.rotate
-              })
-            }), /*#__PURE__*/jsxRuntime.jsxs(Typography.Typography, {
-              type: "body",
-              weight: "semibold",
-              children: [displayYear, "\uB144"]
-            }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-              type: "button",
-              size: "xs",
-              variant: "secondary",
-              onClick: () => handleYearChange(displayYear + 1),
-              disabled: displayYear >= maxYear,
-              "aria-label": "\uB2E4\uC74C \uB144\uB3C4",
-              children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: MonthPicker_module.grid,
-            children: MONTHS.map((month, index) => {
-              const monthNumber = index + 1;
-              const isSelected = value?.getFullYear() === displayYear && value?.getMonth() === monthNumber - 1;
-              return /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+          children: /*#__PURE__*/jsxRuntime.jsx(DatePicker, {
+            selected: value,
+            onChange: handleChange,
+            disabled: disabled,
+            locale: locale.ko,
+            minDate: minDate,
+            maxDate: maxDate,
+            dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C",
+            showPopperArrow: false,
+            renderCustomHeader: ({
+              date,
+              decreaseYear,
+              increaseYear,
+              prevYearButtonDisabled,
+              nextYearButtonDisabled
+            }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+                type: "button",
+                variant: "secondary",
+                size: "xs",
+                onClick: decreaseYear,
+                disabled: prevYearButtonDisabled,
+                className: MonthPicker_module.backButton,
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+              }), /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+                type: "body",
+                weight: "semibold",
+                children: date.toLocaleDateString('ko-KR', {
+                  year: 'numeric'
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
                 type: "button",
-                variant: isSelected ? 'tertiary' : 'secondary',
-                onClick: () => handleMonthSelect(monthNumber),
-                role: "option",
-                "aria-selected": isSelected,
-                "aria-label": `${month} 선택`,
-                children: month
-              }, month);
-            })
-          })]
+                variant: "secondary",
+                size: "xs",
+                onClick: increaseYear,
+                disabled: nextYearButtonDisabled,
+                children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowIOSForwardIcon, {})
+              })]
+            }),
+            inline: true,
+            showMonthYearPicker: true
+          })
         })
       })]
     })

package/dist/cjs/month-picker/MonthPicker.module.css.js

@@ -2,8 +2,8 @@
 
 var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".MonthPicker-module_root__my2Kl{display:inline-block;transform:translateZ(0)}.MonthPicker-module_content__6glhz{gap:var(--ds-spacing-8);min-width:280px;padding:var(--ds-spacing-8)}.MonthPicker-module_header__7QguI{align-items:center;display:flex;justify-content:space-between}.MonthPicker-module_rotate__Y0yed{transform:rotate(180deg)}.MonthPicker-module_grid__kkn0v{border:none;display:grid;gap:var(--ds-spacing-5);grid-template-columns:repeat(3,1fr)}";
-var styles = {"root":"MonthPicker-module_root__my2Kl","content":"MonthPicker-module_content__6glhz","header":"MonthPicker-module_header__7QguI","rotate":"MonthPicker-module_rotate__Y0yed","grid":"MonthPicker-module_grid__kkn0v"};
+var css_248z = ".MonthPicker-module_root__my2Kl{display:inline-block;transform:translateZ(0)}.MonthPicker-module_content__6glhz{min-width:260px;overflow:hidden}.MonthPicker-module_backButton__Mplxj{transform:rotate(180deg)}.react-datepicker{background-color:var(--ds-color-white);color:var(--ds-color-text-primary);display:inline-block;font-size:.8rem;padding-inline:var(--ds-spacing-8);position:relative}.react-datepicker__aria-live{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.react-datepicker__sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__header--custom{align-items:center;display:flex;justify-content:space-between;padding-bottom:var(--ds-spacing-5);width:100%}.react-datepicker__week{text-align:center;white-space:nowrap}.react-datepicker__month{display:flex;flex-direction:column;gap:var(--ds-spacing-5)}.react-datepicker__month-wrapper{align-items:center;display:flex;gap:var(--ds-spacing-5);justify-content:space-between}.react-datepicker__month-text{align-items:center;border-radius:8px;color:var(--ds-color-text-primary);cursor:pointer;display:flex;flex:1;font-size:14px;font-weight:500;height:40px;justify-content:center}.react-datepicker__month-text:hover{background-color:var(--ds-color-neutral-50)}.react-datepicker__month-text--selected{background-color:var(--ds-color-primary-500);color:var(--ds-color-white);font-weight:600}";
+var styles = {"root":"MonthPicker-module_root__my2Kl","content":"MonthPicker-module_content__6glhz","backButton":"MonthPicker-module_backButton__Mplxj"};
 styleInject_es(css_248z);
 
 module.exports = styles;

package/dist/esm/day-picker/DayPicker.d.mts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+interface DayPickerProps extends ComponentPropsWithoutRef<'div'> {
+    value?: Date;
+    onValueChange?: (value: Date | null) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+}
+declare const DayPicker: react.ForwardRefExoticComponent<DayPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { DayPicker };
+export type { DayPickerProps };

package/dist/esm/day-picker/DayPicker.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
+import { clsx } from 'clsx';
+import { ko } from 'date-fns/locale';
+import { forwardRef, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import styles from './DayPicker.module.css.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Dropdown } from '../dropdown/Dropdown.mjs';
+import { Button } from '../button/Button.mjs';
+import { Typography } from '../typography/Typography.mjs';
+
+const DayPicker = /*#__PURE__*/forwardRef(({
+  className,
+  value,
+  onValueChange,
+  disabled,
+  children,
+  minDate,
+  maxDate,
+  ...props
+}, ref) => {
+  const [open, setOpen] = useState(false);
+  const handleChange = date => {
+    onValueChange?.(date);
+    setOpen(false);
+  };
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: clsx(styles.root, className),
+    ...props,
+    children: /*#__PURE__*/jsxs(Dropdown, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsx(Dropdown.Trigger, {
+        asChild: true,
+        children: children
+      }), /*#__PURE__*/jsx(Dropdown.Portal, {
+        children: /*#__PURE__*/jsx(Dropdown.Content, {
+          className: styles.content,
+          "aria-label": "\uB0A0\uC9DC \uC120\uD0DD",
+          children: /*#__PURE__*/jsx(DatePicker, {
+            selected: value,
+            onChange: handleChange,
+            disabled: disabled,
+            locale: ko,
+            minDate: minDate,
+            maxDate: maxDate,
+            dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C",
+            showPopperArrow: false,
+            dayClassName: date => {
+              const day = date.getDay();
+              if (day === 0) return styles.sunday;
+              if (day === 6) return styles.saturday;
+              return '';
+            },
+            renderCustomHeader: ({
+              date,
+              decreaseMonth,
+              increaseMonth,
+              prevMonthButtonDisabled,
+              nextMonthButtonDisabled
+            }) => /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Button, {
+                type: "button",
+                variant: "secondary",
+                size: "xs",
+                onClick: decreaseMonth,
+                disabled: prevMonthButtonDisabled,
+                className: styles.backButton,
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              }), /*#__PURE__*/jsx(Typography, {
+                type: "body",
+                weight: "semibold",
+                children: date.toLocaleDateString('ko-KR', {
+                  year: 'numeric',
+                  month: 'long'
+                })
+              }), /*#__PURE__*/jsx(Button, {
+                type: "button",
+                variant: "secondary",
+                size: "xs",
+                onClick: increaseMonth,
+                disabled: nextMonthButtonDisabled,
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              })]
+            }),
+            inline: true
+          })
+        })
+      })]
+    })
+  });
+});
+DayPicker.displayName = 'DayPicker';
+
+export { DayPicker };

package/dist/esm/day-picker/DayPicker.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"DayPicker-module_root__lDrAw","content":"DayPicker-module_content__VVh4Y","backButton":"DayPicker-module_backButton__jYW7L","sunday":"DayPicker-module_sunday__RaZuV","saturday":"DayPicker-module_saturday__e-AQO"};
+
+export { styles as default };

package/dist/esm/index.css

@@ -1 +1 @@
-.Accordion-module_content__V9Ftc,.Accordion-module_item__iE3dq{overflow:hidden}.Accordion-module_content__V9Ftc[data-state=open]{animation:Accordion-module_slide-down__88c3a .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_content__V9Ftc[data-state=closed]{animation:Accordion-module_slide-up__hbYw7 .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_trigger__6nu7o{cursor:pointer;display:flex;justify-content:space-between;width:100%}.Accordion-module_chevron__oFGVg{display:inline-block;height:var(--ds-spacing-10);transition:transform .2s ease-in-out;width:var(--ds-spacing-10)}.Accordion-module_trigger__6nu7o[data-state=closed]>.Accordion-module_chevron__oFGVg{transform:rotate(0deg)}.Accordion-module_trigger__6nu7o[data-state=open]>.Accordion-module_chevron__oFGVg{transform:rotate(180deg)}@keyframes Accordion-module_slide-up__hbYw7{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes Accordion-module_slide-down__88c3a{0%{height:0}to{height:var(--radix-accordion-content-height)}}.Typography-module_typography__45lnt{--cocso-typography-font-color:inherit;--cocso-typography-font-size:inherit;--cocso-typography-font-weight:inherit;--cocso-typography-line-height:inherit;color:var(--cocso-typography-font-color);font-size:var(--cocso-typography-font-size);font-weight:var(--cocso-typography-font-weight);line-height:var(--cocso-typography-line-height)}.Typography-module_typography__45lnt[aria-disabled=true]{cursor:not-allowed;opacity:.4}@media (min-width:768px){.Typography-module_typography__45lnt{font-size:var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size))}}@media (min-width:1024px){.Typography-module_typography__45lnt{font-size:var(--cocso-desktop-typography-font-size,var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size)))}}.Badge-module_badge__ikDSa{--cocso-badge-padding:inherit;--cocso-badge-border-radius:inherit;--cocso-badge-bg-color:inherit;background-color:var(--cocso-badge-bg-color);border-radius:var(--cocso-badge-border-radius);display:inline-flex;padding:var(--cocso-badge-padding);user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}@keyframes Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .5s linear infinite;border:var(--cocso-spinner-border-width) solid var(--cocso-spinner-bg-color);border-radius:50%;border-top-color:var(--cocso-spinner-border-color);display:inline-block;height:var(--cocso-spinner-size);position:relative;transform-origin:center center;width:var(--cocso-spinner-size)}.Button-module_button__eiKKZ{--cocso-button-height:inherit;--cocso-button-padding-inline:inherit;--cocso-button-content-padding:inherit;--cocso-button-font-color:inherit;--cocso-button-font-size:inherit;--cocso-button-font-weight:inherit;--cocso-button-border:inherit;--cocso-button-border-radius:inherit;--cocso-button-bg-color:inherit;align-items:center;background-color:var(--cocso-button-bg-color);border:var(--cocso-button-border);border-radius:var(--cocso-button-border-radius);color:var(--cocso-button-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-button-font-size);font-weight:var(--cocso-button-font-weight);height:var(--cocso-button-height);justify-content:center;opacity:1;padding-inline:var(--cocso-button-padding-inline);position:relative;transform:translateZ(0);transition:background-color .15s ease-in-out}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):hover{--cocso-button-bg-color-hover:inherit;background-color:var(--cocso-button-bg-color-hover)}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):active{--cocso-button-bg-color-active:inherit;background-color:var(--cocso-button-bg-color-active)}.Button-module_content__SVjwi{padding:var(--cocso-button-content-padding)}.Button-module_prefix__d7ljt{margin-right:2px}.Button-module_prefix__d7ljt,.Button-module_suffix__9oysT{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.Button-module_suffix__9oysT{margin-left:2px}.Button-module_disabled__M6r1w{cursor:not-allowed;opacity:.4}.Button-module_svgOnly__8RcZ7{aspect-ratio:1/1;padding:0}.Checkbox-module_wrapper__5uqJp{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Checkbox-module_checkbox__05Z5t{--cocso-checkbox-size:inherit;--cocso-checkbox-color:inherit;--cocso-checkbox-border-color:inherit;--cocso-checkbox-bg-color:inherit;align-items:center;background-color:var(--cocso-checkbox-bg-color);border:1px solid var(--cocso-checkbox-border-color);border-radius:4px;color:var(--cocso-checkbox-color);cursor:pointer;display:inline-flex;height:var(--cocso-checkbox-size);justify-content:center;opacity:1;position:relative;transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out;width:var(--cocso-checkbox-size)}.Checkbox-module_checkbox__05Z5t>svg{stroke:var(--cocso-checkbox-color);display:block;height:auto;max-width:100%;transition:stroke .15s ease-in-out}.Checkbox-module_checkbox__05Z5t input[type=checkbox]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_indicator__MLpNt{bottom:var(--number-1);left:var(--number-1);position:absolute;right:var(--number-1);top:var(--number-1);transition:opacity .15s ease-in-out}.Checkbox-module_label__ubb5U{cursor:pointer;opacity:1}.Checkbox-module_checkbox__05Z5t[disabled],.Checkbox-module_label__ubb5U[aria-disabled=true]{cursor:not-allowed;opacity:.5}@keyframes Dropdown-module_dropdown-slide-up__2uVH3{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Dropdown-module_dropdown-slide-down__T5LLc{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.Dropdown-module_content__S3TRi{background-color:var(--ds-color-white);border-radius:var(--ds-spacing-3);box-shadow:var(--ds-shadow-2);display:flex;flex-direction:column;will-change:transform,opacity;z-index:var(--ds-z-index-overlay)}.Dropdown-module_content__S3TRi[data-side=top]{animation:Dropdown-module_dropdown-slide-up__2uVH3 .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_content__S3TRi[data-side=bottom]{animation:Dropdown-module_dropdown-slide-down__T5LLc .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_item__MIltz{display:flex;flex-direction:column}.Link-module_link__J9CFb{align-items:center;cursor:pointer;display:inline-flex;gap:var(--ds-spacing-2);justify-content:center;text-decoration:none;transition:color .15s ease-in-out;width:fit-content}.Link-module_link__J9CFb>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Link-module_indicator__DIUaW{text-decoration:underline}@keyframes Modal-module_overlay-show__zyvAx{0%{opacity:0}to{opacity:1}}.Modal-module_overlay__7ZBDB{animation:Modal-module_overlay-show__zyvAx .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-black-alpha-30);inset:0;position:fixed;z-index:var(--ds-z-index-overlay)}@keyframes Modal-module_content-show__anq3d{0%{opacity:0;transform:translate(-50%,-48%) scale(.997)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Modal-module_content__M1b6Q{animation:Modal-module_content-show__anq3d .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;max-width:380px;padding:var(--ds-spacing-9);position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:var(--ds-z-index-modal)}.Modal-module_close__UbAF7{align-items:center;align-self:flex-end;cursor:pointer;display:flex;height:var(--ds-spacing-10);justify-content:center;width:var(--ds-spacing-10)}.Modal-module_title__oTluo{word-break:keep-all}.Modal-module_description__RgMC5{margin-top:var(--ds-spacing-5)}.MonthPicker-module_root__my2Kl{display:inline-block;transform:translateZ(0)}.MonthPicker-module_content__6glhz{gap:var(--ds-spacing-8);min-width:280px;padding:var(--ds-spacing-8)}.MonthPicker-module_header__7QguI{align-items:center;display:flex;justify-content:space-between}.MonthPicker-module_rotate__Y0yed{transform:rotate(180deg)}.MonthPicker-module_grid__kkn0v{border:none;display:grid;gap:var(--ds-spacing-5);grid-template-columns:repeat(3,1fr)}.OneTimePasswordField-module_otp__zoWO7{align-items:center;display:flex;gap:var(--ds-spacing-5)}.OneTimePasswordField-module_input__owV9H{align-items:center;background-color:var(--ds-color-neutral-50);border:none;border-radius:var(--ds-spacing-2);box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-50);color:var(--ds-color-neutral-950);display:inline-flex;flex:1;font-size:16px;font-weight:500;height:100%;justify-content:center;line-height:1;outline:none;text-align:center;text-transform:uppercase;transition:background-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.OneTimePasswordField-module_input__owV9H:focus,.OneTimePasswordField-module_input__owV9H:hover{box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-200)}.OneTimePasswordField-module_input__owV9H::selection{background-color:var(--ds-color-neutral-400)}.Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-text-primary);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--ds-spacing-5);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:14px;font-weight:var(--cocso-pagination-font-weight);height:var(--ds-spacing-12);justify-content:center;transition:background-color .15s ease-in-out;width:var(--ds-spacing-12)}.Pagination-module_arrow__YYkob:disabled{cursor:not-allowed;opacity:.4}.Pagination-module_arrow__YYkob:not([disabled]):hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_arrow__YYkob:not([disabled]):active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_arrow__YYkob>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Pagination-module_item__uVIra[data-active=true]{--cocso-pagination-font-color:var(--ds-color-white);--cocso-pagination-bg-color:var(--ds-color-primary-500);--cocso-pagination-font-weight:600}.Pagination-module_item__uVIra[data-active=false]:hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_item__uVIra[data-active=false]:active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_trunc__-ZgYQ{align-items:center;color:var(--ds-color-text-primary);display:inline-flex;font-size:16px;height:var(--ds-spacing-13);justify-content:center;width:var(--ds-spacing-13)}@keyframes Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border:1px solid var(--ds-color-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--ds-shadow-2);padding-block:var(--ds-spacing-6);padding-inline:var(--ds-spacing-8);will-change:transform,opacity}.Popover-module_content__ry9PF[data-state=open][data-side=top]{animation-name:Popover-module_slide-down-and-fade__Lkl4N}.Popover-module_content__ry9PF[data-state=open][data-side=right]{animation-name:Popover-module_slide-left-and-fade__yHinG}.Popover-module_content__ry9PF[data-state=open][data-side=bottom]{animation-name:Popover-module_slide-up-and-fade__adQar}.Popover-module_content__ry9PF[data-state=open][data-side=left]{animation-name:Popover-module_slide-right-and-fade__br3DV}.Select-module_wrapper__4k8By{cursor:pointer;position:relative;width:fit-content}.Select-module_wrapper__4k8By.Select-module_stretch__2KlaW,.Select-module_wrapper__4k8By.Select-module_stretch__2KlaW .Select-module_select__MUUdH{width:100%}.Select-module_select__MUUdH{--cocso-select-min-width:inherit;--cocso-select-height:inherit;--cocso-select-padding-left:inherit;--cocso-select-padding-right:inherit;--cocso-select-font-size:inherit;--cocso-select-border-radius:inherit;--cocso-select-bg-color:var(--ds-color-white);appearance:none;-o-appearance:none;-moz-appearance:none;-webkit-appearance:none;background-color:var(--cocso-select-bg-color);border:1px solid var(--ds-color-neutral-100);border-radius:var(--cocso-select-border-radius);color:var(--ds-color-neutral-950);font-size:var(--cocso-select-font-size);height:var(--cocso-select-height);min-width:var(--cocso-select-min-width);padding-left:var(--cocso-select-padding-left);padding-right:var(--cocso-select-padding-right)}.Select-module_wrapper__4k8By.Select-module_disabled__JO7OG{cursor:not-allowed}.Select-module_wrapper__4k8By.Select-module_disabled__JO7OG .Select-module_select__MUUdH{cursor:not-allowed;opacity:.4}.Select-module_icon__EuBJI{color:var(--ds-color-neutral-500);pointer-events:none;position:absolute;right:var(--ds-spacing-5);top:50%;transform:translateY(-50%)}.Select-module_wrapper__4k8By.Select-module_disabled__JO7OG .Select-module_icon__EuBJI{cursor:not-allowed;opacity:.4}.StockQuantityStatus-module_stock__mWbqI{--cocso-stock-quantity-status-color:inherit;align-items:center;color:var(--cocso-stock-quantity-status-color);display:inline-flex;gap:var(--ds-spacing-2)}.StockQuantityStatus-module_indicator__inaKv{--cocso-stock-quantity-status-indicator-width:inherit;flex-shrink:0;height:auto;width:var(--cocso-stock-quantity-status-indicator-width)}.StockQuantityStatus-module_indicator__inaKv>svg{height:100%;width:100%}.Switch-module_wrapper__qcI9-{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Switch-module_wrapper__qcI9-[aria-disabled=true]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft{--cocso-switch-width:inherit;--cocso-switch-height:inherit;--cocso-switch-bg-color:inherit;background-color:var(--cocso-switch-bg-color);border-radius:var(--ds-spacing-max);cursor:pointer;height:var(--cocso-switch-height);opacity:1;position:relative;width:var(--cocso-switch-width)}.Switch-module_switch__pwmft[data-disabled=true],.Switch-module_switch__pwmft[disabled]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft[data-state=checked]{--cocso-switch-bg-color:var(--ds-color-primary-500)}.Switch-module_thumb__pQGDy{--cocso-switch-thumb-width:inherit;--cocso-switch-thumb-height:inherit;background-color:var(--ds-color-white);border-radius:var(--ds-spacing-max);display:block;height:var(--cocso-switch-thumb-width);transform:translateX(var(--ds-spacing-2));transition:transform .15s ease;width:var(--cocso-switch-thumb-width);will-change:transform}.Switch-module_thumb__pQGDy[data-state=checked]{transform:translateX(calc(var(--cocso-switch-width) - var(--cocso-switch-thumb-width) - var(--ds-spacing-2)))}
+.Accordion-module_content__V9Ftc,.Accordion-module_item__iE3dq{overflow:hidden}.Accordion-module_content__V9Ftc[data-state=open]{animation:Accordion-module_slide-down__88c3a .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_content__V9Ftc[data-state=closed]{animation:Accordion-module_slide-up__hbYw7 .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_trigger__6nu7o{cursor:pointer;display:flex;justify-content:space-between;width:100%}.Accordion-module_chevron__oFGVg{display:inline-block;height:var(--ds-spacing-10);transition:transform .2s ease-in-out;width:var(--ds-spacing-10)}.Accordion-module_trigger__6nu7o[data-state=closed]>.Accordion-module_chevron__oFGVg{transform:rotate(0deg)}.Accordion-module_trigger__6nu7o[data-state=open]>.Accordion-module_chevron__oFGVg{transform:rotate(180deg)}@keyframes Accordion-module_slide-up__hbYw7{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes Accordion-module_slide-down__88c3a{0%{height:0}to{height:var(--radix-accordion-content-height)}}.Typography-module_typography__45lnt{--cocso-typography-font-color:inherit;--cocso-typography-font-size:inherit;--cocso-typography-font-weight:inherit;--cocso-typography-line-height:inherit;color:var(--cocso-typography-font-color);font-size:var(--cocso-typography-font-size);font-weight:var(--cocso-typography-font-weight);line-height:var(--cocso-typography-line-height)}.Typography-module_typography__45lnt[aria-disabled=true]{cursor:not-allowed;opacity:.4}@media (min-width:768px){.Typography-module_typography__45lnt{font-size:var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size))}}@media (min-width:1024px){.Typography-module_typography__45lnt{font-size:var(--cocso-desktop-typography-font-size,var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size)))}}.Badge-module_badge__ikDSa{--cocso-badge-padding:inherit;--cocso-badge-border-radius:inherit;--cocso-badge-bg-color:inherit;background-color:var(--cocso-badge-bg-color);border-radius:var(--cocso-badge-border-radius);display:inline-flex;padding:var(--cocso-badge-padding);user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}@keyframes Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .5s linear infinite;border:var(--cocso-spinner-border-width) solid var(--cocso-spinner-bg-color);border-radius:50%;border-top-color:var(--cocso-spinner-border-color);display:inline-block;height:var(--cocso-spinner-size);position:relative;transform-origin:center center;width:var(--cocso-spinner-size)}.Button-module_button__eiKKZ{--cocso-button-height:inherit;--cocso-button-padding-inline:inherit;--cocso-button-content-padding:inherit;--cocso-button-font-color:inherit;--cocso-button-font-size:inherit;--cocso-button-font-weight:inherit;--cocso-button-border:inherit;--cocso-button-border-radius:inherit;--cocso-button-bg-color:inherit;align-items:center;background-color:var(--cocso-button-bg-color);border:var(--cocso-button-border);border-radius:var(--cocso-button-border-radius);color:var(--cocso-button-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-button-font-size);font-weight:var(--cocso-button-font-weight);height:var(--cocso-button-height);justify-content:center;opacity:1;padding-inline:var(--cocso-button-padding-inline);position:relative;transform:translateZ(0);transition:background-color .15s ease-in-out}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):hover{--cocso-button-bg-color-hover:inherit;background-color:var(--cocso-button-bg-color-hover)}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):active{--cocso-button-bg-color-active:inherit;background-color:var(--cocso-button-bg-color-active)}.Button-module_content__SVjwi{padding:var(--cocso-button-content-padding)}.Button-module_prefix__d7ljt{margin-right:2px}.Button-module_prefix__d7ljt,.Button-module_suffix__9oysT{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.Button-module_suffix__9oysT{margin-left:2px}.Button-module_disabled__M6r1w{cursor:not-allowed;opacity:.4}.Button-module_svgOnly__8RcZ7{aspect-ratio:1/1;padding:0}.Checkbox-module_wrapper__5uqJp{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Checkbox-module_checkbox__05Z5t{--cocso-checkbox-size:inherit;--cocso-checkbox-color:inherit;--cocso-checkbox-border-color:inherit;--cocso-checkbox-bg-color:inherit;align-items:center;background-color:var(--cocso-checkbox-bg-color);border:1px solid var(--cocso-checkbox-border-color);border-radius:4px;color:var(--cocso-checkbox-color);cursor:pointer;display:inline-flex;height:var(--cocso-checkbox-size);justify-content:center;opacity:1;position:relative;transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out;width:var(--cocso-checkbox-size)}.Checkbox-module_checkbox__05Z5t>svg{stroke:var(--cocso-checkbox-color);display:block;height:auto;max-width:100%;transition:stroke .15s ease-in-out}.Checkbox-module_checkbox__05Z5t input[type=checkbox]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_indicator__MLpNt{bottom:var(--number-1);left:var(--number-1);position:absolute;right:var(--number-1);top:var(--number-1);transition:opacity .15s ease-in-out}.Checkbox-module_label__ubb5U{cursor:pointer;opacity:1}.Checkbox-module_checkbox__05Z5t[disabled],.Checkbox-module_label__ubb5U[aria-disabled=true]{cursor:not-allowed;opacity:.5}@keyframes Dropdown-module_dropdown-slide-up__2uVH3{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Dropdown-module_dropdown-slide-down__T5LLc{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.Dropdown-module_content__S3TRi{background-color:var(--ds-color-white);border-radius:var(--ds-spacing-3);box-shadow:var(--ds-shadow-2);display:flex;flex-direction:column;will-change:transform,opacity;z-index:var(--ds-z-index-overlay)}.Dropdown-module_content__S3TRi[data-side=top]{animation:Dropdown-module_dropdown-slide-up__2uVH3 .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_content__S3TRi[data-side=bottom]{animation:Dropdown-module_dropdown-slide-down__T5LLc .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_item__MIltz{display:flex;flex-direction:column}.DayPicker-module_root__lDrAw{display:inline-block;transform:translateZ(0)}.DayPicker-module_content__VVh4Y{min-width:260px;overflow:hidden}.DayPicker-module_backButton__jYW7L{transform:rotate(180deg)}.DayPicker-module_sunday__RaZuV{color:var(--ds-color-danger-600)!important}.DayPicker-module_saturday__e-AQO{color:var(--ds-color-primary-600)!important}.react-datepicker__month-container{padding-block:var(--ds-spacing-8);width:100%}.react-datepicker__day-names{text-align:center;white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name{color:var(--ds-color-text-primary);display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__day{border-radius:8px;cursor:pointer;font-weight:500}.react-datepicker__day:hover{background-color:var(--ds-color-neutral-50)}.react-datepicker__day--selected{background-color:var(--ds-color-primary-500);color:var(--ds-color-white)!important}.react-datepicker__day--selected:hover{background-color:var(--ds-color-primary-600)!important}.react-datepicker__day-name:first-child{color:var(--ds-color-danger-600)}.react-datepicker__day-name:nth-child(7){color:var(--ds-color-primary-600)}.react-datepicker__day--disabled{cursor:not-allowed;opacity:.3}.Link-module_link__J9CFb{align-items:center;cursor:pointer;display:inline-flex;gap:var(--ds-spacing-2);justify-content:center;text-decoration:none;transition:color .15s ease-in-out;width:fit-content}.Link-module_link__J9CFb>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Link-module_indicator__DIUaW{text-decoration:underline}@keyframes Modal-module_overlay-show__zyvAx{0%{opacity:0}to{opacity:1}}.Modal-module_overlay__7ZBDB{animation:Modal-module_overlay-show__zyvAx .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-black-alpha-30);inset:0;position:fixed;z-index:var(--ds-z-index-overlay)}@keyframes Modal-module_content-show__anq3d{0%{opacity:0;transform:translate(-50%,-48%) scale(.997)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Modal-module_content__M1b6Q{animation:Modal-module_content-show__anq3d .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;max-width:380px;padding:var(--ds-spacing-9);position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:var(--ds-z-index-modal)}.Modal-module_close__UbAF7{align-items:center;align-self:flex-end;cursor:pointer;display:flex;height:var(--ds-spacing-10);justify-content:center;width:var(--ds-spacing-10)}.Modal-module_title__oTluo{word-break:keep-all}.Modal-module_description__RgMC5{margin-top:var(--ds-spacing-5)}.MonthPicker-module_root__my2Kl{display:inline-block;transform:translateZ(0)}.MonthPicker-module_content__6glhz{min-width:260px;overflow:hidden}.MonthPicker-module_backButton__Mplxj{transform:rotate(180deg)}.react-datepicker{background-color:var(--ds-color-white);color:var(--ds-color-text-primary);display:inline-block;font-size:.8rem;padding-inline:var(--ds-spacing-8);position:relative}.react-datepicker__aria-live{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.react-datepicker__sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__header--custom{align-items:center;display:flex;justify-content:space-between;padding-bottom:var(--ds-spacing-5);width:100%}.react-datepicker__week{text-align:center;white-space:nowrap}.react-datepicker__month{display:flex;flex-direction:column;gap:var(--ds-spacing-5)}.react-datepicker__month-wrapper{align-items:center;display:flex;gap:var(--ds-spacing-5);justify-content:space-between}.react-datepicker__month-text{align-items:center;border-radius:8px;color:var(--ds-color-text-primary);cursor:pointer;display:flex;flex:1;font-size:14px;font-weight:500;height:40px;justify-content:center}.react-datepicker__month-text:hover{background-color:var(--ds-color-neutral-50)}.react-datepicker__month-text--selected{background-color:var(--ds-color-primary-500);color:var(--ds-color-white);font-weight:600}.OneTimePasswordField-module_otp__zoWO7{align-items:center;display:flex;gap:var(--ds-spacing-5)}.OneTimePasswordField-module_input__owV9H{align-items:center;background-color:var(--ds-color-neutral-50);border:none;border-radius:var(--ds-spacing-2);box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-50);color:var(--ds-color-neutral-950);display:inline-flex;flex:1;font-size:16px;font-weight:500;height:100%;justify-content:center;line-height:1;outline:none;text-align:center;text-transform:uppercase;transition:background-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.OneTimePasswordField-module_input__owV9H:focus,.OneTimePasswordField-module_input__owV9H:hover{box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-200)}.OneTimePasswordField-module_input__owV9H::selection{background-color:var(--ds-color-neutral-400)}.Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-text-primary);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--ds-spacing-5);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:14px;font-weight:var(--cocso-pagination-font-weight);height:var(--ds-spacing-12);justify-content:center;transition:background-color .15s ease-in-out;width:var(--ds-spacing-12)}.Pagination-module_arrow__YYkob:disabled{cursor:not-allowed;opacity:.4}.Pagination-module_arrow__YYkob:not([disabled]):hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_arrow__YYkob:not([disabled]):active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_arrow__YYkob>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Pagination-module_item__uVIra[data-active=true]{--cocso-pagination-font-color:var(--ds-color-white);--cocso-pagination-bg-color:var(--ds-color-primary-500);--cocso-pagination-font-weight:600}.Pagination-module_item__uVIra[data-active=false]:hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_item__uVIra[data-active=false]:active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_trunc__-ZgYQ{align-items:center;color:var(--ds-color-text-primary);display:inline-flex;font-size:16px;height:var(--ds-spacing-13);justify-content:center;width:var(--ds-spacing-13)}@keyframes Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-color-white);border:1px solid var(--ds-color-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--ds-shadow-2);padding-block:var(--ds-spacing-6);padding-inline:var(--ds-spacing-8);will-change:transform,opacity}.Popover-module_content__ry9PF[data-state=open][data-side=top]{animation-name:Popover-module_slide-down-and-fade__Lkl4N}.Popover-module_content__ry9PF[data-state=open][data-side=right]{animation-name:Popover-module_slide-left-and-fade__yHinG}.Popover-module_content__ry9PF[data-state=open][data-side=bottom]{animation-name:Popover-module_slide-up-and-fade__adQar}.Popover-module_content__ry9PF[data-state=open][data-side=left]{animation-name:Popover-module_slide-right-and-fade__br3DV}.Select-module_wrapper__4k8By{cursor:pointer;position:relative;width:fit-content}.Select-module_wrapper__4k8By.Select-module_stretch__2KlaW,.Select-module_wrapper__4k8By.Select-module_stretch__2KlaW .Select-module_select__MUUdH{width:100%}.Select-module_select__MUUdH{--cocso-select-min-width:inherit;--cocso-select-height:inherit;--cocso-select-padding-left:inherit;--cocso-select-padding-right:inherit;--cocso-select-font-size:inherit;--cocso-select-border-radius:inherit;--cocso-select-bg-color:var(--ds-color-white);appearance:none;-o-appearance:none;-moz-appearance:none;-webkit-appearance:none;background-color:var(--cocso-select-bg-color);border:1px solid var(--ds-color-neutral-100);border-radius:var(--cocso-select-border-radius);color:var(--ds-color-neutral-950);font-size:var(--cocso-select-font-size);height:var(--cocso-select-height);min-width:var(--cocso-select-min-width);padding-left:var(--cocso-select-padding-left);padding-right:var(--cocso-select-padding-right)}.Select-module_wrapper__4k8By.Select-module_disabled__JO7OG{cursor:not-allowed}.Select-module_wrapper__4k8By.Select-module_disabled__JO7OG .Select-module_select__MUUdH{cursor:not-allowed;opacity:.4}.Select-module_icon__EuBJI{color:var(--ds-color-neutral-500);pointer-events:none;position:absolute;right:var(--ds-spacing-5);top:50%;transform:translateY(-50%)}.Select-module_wrapper__4k8By.Select-module_disabled__JO7OG .Select-module_icon__EuBJI{cursor:not-allowed;opacity:.4}.StockQuantityStatus-module_stock__mWbqI{--cocso-stock-quantity-status-color:inherit;align-items:center;color:var(--cocso-stock-quantity-status-color);display:inline-flex;gap:var(--ds-spacing-2)}.StockQuantityStatus-module_indicator__inaKv{--cocso-stock-quantity-status-indicator-width:inherit;flex-shrink:0;height:auto;width:var(--cocso-stock-quantity-status-indicator-width)}.StockQuantityStatus-module_indicator__inaKv>svg{height:100%;width:100%}.Switch-module_wrapper__qcI9-{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Switch-module_wrapper__qcI9-[aria-disabled=true]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft{--cocso-switch-width:inherit;--cocso-switch-height:inherit;--cocso-switch-bg-color:inherit;background-color:var(--cocso-switch-bg-color);border-radius:var(--ds-spacing-max);cursor:pointer;height:var(--cocso-switch-height);opacity:1;position:relative;width:var(--cocso-switch-width)}.Switch-module_switch__pwmft[data-disabled=true],.Switch-module_switch__pwmft[disabled]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft[data-state=checked]{--cocso-switch-bg-color:var(--ds-color-primary-500)}.Switch-module_thumb__pQGDy{--cocso-switch-thumb-width:inherit;--cocso-switch-thumb-height:inherit;background-color:var(--ds-color-white);border-radius:var(--ds-spacing-max);display:block;height:var(--cocso-switch-thumb-width);transform:translateX(var(--ds-spacing-2));transition:transform .15s ease;width:var(--cocso-switch-thumb-width);will-change:transform}.Switch-module_thumb__pQGDy[data-state=checked]{transform:translateX(calc(var(--cocso-switch-width) - var(--cocso-switch-thumb-width) - var(--ds-spacing-2)))}

package/dist/esm/index.d.mts

@@ -2,6 +2,7 @@ export { Accordion } from './accordion/Accordion.mjs';
 export { Badge, BadgeProps } from './badge/Badge.mjs';
 export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './button/Button.mjs';
 export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './checkbox/Checkbox.mjs';
+export { DayPicker, DayPickerProps } from './day-picker/DayPicker.mjs';
 export { Dropdown } from './dropdown/Dropdown.mjs';
 export { Link, LinkProps, LinkSize } from './link/Link.mjs';
 export { Modal } from './modal/Modal.mjs';

package/dist/esm/index.mjs

@@ -2,6 +2,7 @@ export { Accordion } from './accordion/Accordion.mjs';
 export { Badge } from './badge/Badge.mjs';
 export { Button } from './button/Button.mjs';
 export { Checkbox } from './checkbox/Checkbox.mjs';
+export { DayPicker } from './day-picker/DayPicker.mjs';
 export { Dropdown } from './dropdown/Dropdown.mjs';
 export { Link } from './link/Link.mjs';
 export { Modal } from './modal/Modal.mjs';

package/dist/esm/month-picker/MonthPicker.d.mts

@@ -3,9 +3,10 @@ import { ComponentPropsWithoutRef } from 'react';
 
 interface MonthPickerProps extends ComponentPropsWithoutRef<'div'> {
     value?: Date;
-    onValueChange?: (value: Date | undefined) => void;
-    minYear?: number;
-    maxYear?: number;
+    onValueChange?: (value: Date | null) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
 }
 declare const MonthPicker: react.ForwardRefExoticComponent<MonthPickerProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/esm/month-picker/MonthPicker.mjs

@@ -1,97 +1,85 @@
 "use client";
 import { ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
 import { clsx } from 'clsx';
+import { ko } from 'date-fns/locale';
 import { forwardRef, useState } from 'react';
+import DatePicker from 'react-datepicker';
 import styles from './MonthPicker.module.css.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Dropdown } from '../dropdown/Dropdown.mjs';
 import { Button } from '../button/Button.mjs';
 import { Typography } from '../typography/Typography.mjs';
 
-const MONTHS = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
 const MonthPicker = /*#__PURE__*/forwardRef(({
   className,
   value,
   onValueChange,
-  minYear = 1900,
-  maxYear = 2100,
   children,
+  minDate,
+  maxDate,
+  disabled,
   ...props
 }, ref) => {
   const [open, setOpen] = useState(false);
-  const [displayYear, setDisplayYear] = useState(value?.getFullYear() ?? new Date().getFullYear());
-  const handleMonthSelect = month => {
-    const newValue = new Date(displayYear, month - 1, 1);
-    onValueChange?.(newValue);
+  const handleChange = date => {
+    onValueChange?.(date);
     setOpen(false);
   };
-  const handleYearChange = year => {
-    const clampedYear = Math.max(minYear, Math.min(maxYear, year));
-    setDisplayYear(clampedYear);
-  };
-  const handleOpenChange = isOpen => {
-    if (isOpen) {
-      setDisplayYear(value?.getFullYear() ?? new Date().getFullYear());
-    }
-    setOpen(isOpen);
-  };
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     className: clsx(styles.root, className),
     ...props,
     children: /*#__PURE__*/jsxs(Dropdown, {
       open: open,
-      onOpenChange: handleOpenChange,
+      onOpenChange: setOpen,
       children: [/*#__PURE__*/jsx(Dropdown.Trigger, {
         asChild: true,
         children: children
       }), /*#__PURE__*/jsx(Dropdown.Portal, {
-        children: /*#__PURE__*/jsxs(Dropdown.Content, {
+        children: /*#__PURE__*/jsx(Dropdown.Content, {
           className: styles.content,
-          role: "listbox",
-          "aria-label": "\uC6D4 \uC120\uD0DD",
-          children: [/*#__PURE__*/jsxs("div", {
-            className: styles.header,
-            children: [/*#__PURE__*/jsx(Button, {
-              type: "button",
-              size: "xs",
-              variant: "secondary",
-              onClick: () => handleYearChange(displayYear - 1),
-              disabled: displayYear <= minYear,
-              svgOnly: true,
-              "aria-label": "\uC774\uC804 \uB144\uB3C4",
-              children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {
-                className: styles.rotate
-              })
-            }), /*#__PURE__*/jsxs(Typography, {
-              type: "body",
-              weight: "semibold",
-              children: [displayYear, "\uB144"]
-            }), /*#__PURE__*/jsx(Button, {
-              type: "button",
-              size: "xs",
-              variant: "secondary",
-              onClick: () => handleYearChange(displayYear + 1),
-              disabled: displayYear >= maxYear,
-              "aria-label": "\uB2E4\uC74C \uB144\uB3C4",
-              children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
-            })]
-          }), /*#__PURE__*/jsx("div", {
-            className: styles.grid,
-            children: MONTHS.map((month, index) => {
-              const monthNumber = index + 1;
-              const isSelected = value?.getFullYear() === displayYear && value?.getMonth() === monthNumber - 1;
-              return /*#__PURE__*/jsx(Button, {
+          children: /*#__PURE__*/jsx(DatePicker, {
+            selected: value,
+            onChange: handleChange,
+            disabled: disabled,
+            locale: ko,
+            minDate: minDate,
+            maxDate: maxDate,
+            dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C",
+            showPopperArrow: false,
+            renderCustomHeader: ({
+              date,
+              decreaseYear,
+              increaseYear,
+              prevYearButtonDisabled,
+              nextYearButtonDisabled
+            }) => /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Button, {
+                type: "button",
+                variant: "secondary",
+                size: "xs",
+                onClick: decreaseYear,
+                disabled: prevYearButtonDisabled,
+                className: styles.backButton,
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              }), /*#__PURE__*/jsx(Typography, {
+                type: "body",
+                weight: "semibold",
+                children: date.toLocaleDateString('ko-KR', {
+                  year: 'numeric'
+                })
+              }), /*#__PURE__*/jsx(Button, {
                 type: "button",
-                variant: isSelected ? 'tertiary' : 'secondary',
-                onClick: () => handleMonthSelect(monthNumber),
-                role: "option",
-                "aria-selected": isSelected,
-                "aria-label": `${month} 선택`,
-                children: month
-              }, month);
-            })
-          })]
+                variant: "secondary",
+                size: "xs",
+                onClick: increaseYear,
+                disabled: nextYearButtonDisabled,
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              })]
+            }),
+            inline: true,
+            showMonthYearPicker: true
+          })
         })
       })]
     })

package/dist/esm/month-picker/MonthPicker.module.css.mjs

@@ -1,3 +1,3 @@
-var styles = {"root":"MonthPicker-module_root__my2Kl","content":"MonthPicker-module_content__6glhz","header":"MonthPicker-module_header__7QguI","rotate":"MonthPicker-module_rotate__Y0yed","grid":"MonthPicker-module_grid__kkn0v"};
+var styles = {"root":"MonthPicker-module_root__my2Kl","content":"MonthPicker-module_content__6glhz","backButton":"MonthPicker-module_backButton__Mplxj"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocso-ui/react",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cocso/cocso-ui.git",
@@ -37,10 +37,11 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "clsx": "^2.1.1",
-    "rollup-plugin-preserve-directives": "^0.4.0",
+    "date-fns": "^4.1.0",
+    "react-datepicker": "^8.7.0",
     "sonner": "^2.0.7",
     "ts-pattern": "^5.8.0",
-    "@cocso-ui/react-icons": "^0.1.2"
+    "@cocso-ui/react-icons": "^0.1.3"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.27.1",
@@ -48,18 +49,18 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/react": "^9.1.5",
-    "@types/react": "^19.1.12",
+    "@storybook/react": "^9.1.6",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "react": "^19.1.1",
-    "rollup": "^4.50.1",
+    "rollup": "^4.50.2",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "^19.1.1"
   },
   "publishConfig": {
     "access": "public"