@deepnoid/ui 0.0.90 → 0.0.92

package/dist/components/dateTimePicker/index.js

@@ -102,21 +102,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const [targetRect, setTargetRect] = (0, import_react.useState)(null);
   const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
   const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
   const dateInputRef = (0, import_react.useRef)(null);
   const datePickerWrapperRef = (0, import_react.useRef)(null);
   const datePickerRef = (0, import_react.useRef)(null);
-  const dataPickerGap = 4;
-  const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
-    if (popupWidth === 0 || popupHeight2 === 0) return;
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-    const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
-    const spaceAbove = targetRect2.y - dataPickerGap;
-    const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
-    return {
-      top: top + scrollTop,
-      left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
-    };
+  const DATE_PICKER_GAP = 4;
+  const calculatePositionWithScroll = (targetRect2) => {
+    if (targetRect2 && popupWidth && popupHeight) {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
+      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
+      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
+      return {
+        top: top + scrollTop,
+        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
+      };
+    }
   };
   const handleToggleDatePicker = () => {
     if (datePickerRef.current) {
@@ -130,6 +132,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleChangeTime = (time) => {
     setSelectedTime(time);
   };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlueInput = () => {
+    setIsFocusInput(false);
+  };
   (0, import_react.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -150,12 +158,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     dateInputRef,
     datePickerWrapperRef,
     datePickerRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   };
 };
@@ -4060,10 +4071,10 @@ var listItem = tv({
       color: "primary",
       class: {
         base: [
-          "hover:text-primary-main",
+          "hover:text-primary-strong",
           "hover:bg-primary-soft",
-          "data-[selected=true]:text-primary-main",
-          "data-[selected=true]:bg-primary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-primary-main"
         ]
       }
     },
@@ -4074,8 +4085,8 @@ var listItem = tv({
         base: [
           "hover:text-secondary-main",
           "hover:bg-secondary-soft",
-          "data-[selected=true]:text-secondary-main",
-          "data-[selected=true]:bg-secondary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-secondary-main"
         ]
       }
     }
@@ -4084,7 +4095,7 @@ var listItem = tv({
 
 // src/components/dateTimePicker/timePicker.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
+var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
   const ITEM_HEIGHT = 30;
@@ -4104,7 +4115,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
       setSelectedMinute(minute);
       setSelectedPeriod(period);
     }
-  }, [selectedTime]);
+    if (isFocusInput) {
+      scrollToSelectedTime();
+    }
+  }, [selectedTime, isFocusInput]);
   (0, import_react5.useEffect)(() => {
     scrollToSelectedTime();
   }, []);
@@ -4193,24 +4207,38 @@ var timePicker_default = TimePicker;
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
+  const {
+    classNames,
+    label,
+    errorMessage,
+    startContent,
+    endContent,
+    type = "date",
+    value,
+    onChangeDate,
+    onChangeTime,
+    ...inputProps
+  } = props;
   const slots = (0, import_react6.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
   const {
     selectedDate,
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     datePickerRef,
     dateInputRef,
     datePickerWrapperRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   } = useDatePicker({
     initialDate: void 0
   });
-  const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
+  const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
   const getBaseProps = (0, import_react6.useCallback)(
     () => ({
       className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -4243,17 +4271,29 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
       className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
       size: 0,
       type,
-      value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
+      value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
       onChange: (e) => {
         if (type === "date") {
           handleChangeDate(e.target.value);
+          if (onChangeDate) {
+            onChangeDate(e.target.value);
+          }
         } else if (type === "time") {
           handleChangeTime(e.target.value);
+          if (onChangeTime) {
+            onChangeTime(e.target.value);
+          }
         }
       },
+      onFocus: (e) => {
+        handleFocusInput();
+      },
+      onBlur: (e) => {
+        handleBlueInput();
+      },
       max: "9999-12-31"
     }),
-    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
+    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
   );
   const getContentProps = (0, import_react6.useCallback)(
     () => ({
@@ -4336,8 +4376,8 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
           ref: datePickerWrapperRef,
           style: {
             position: "absolute",
-            top: position == null ? void 0 : position.top,
-            left: position == null ? void 0 : position.left,
+            top: (position == null ? void 0 : position.top) || -99999,
+            left: (position == null ? void 0 : position.left) || -99999,
             zIndex: 1e3
           },
           children: [
@@ -4347,10 +4387,24 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
                 color: originalProps.color,
                 selectedDate,
                 highlightWeekend: originalProps.highlightWeekend,
-                onChangeDate: handleChangeDate
+                onChangeDate: (date) => {
+                  handleChangeDate(date);
+                  if (onChangeDate) onChangeDate(date);
+                }
               }
             ),
-            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              timePicker_default,
+              {
+                color: originalProps.color,
+                selectedTime,
+                isFocusInput,
+                onChangeTime: (time) => {
+                  handleChangeTime(time);
+                  if (onChangeTime) onChangeTime(time);
+                }
+              }
+            )
           ]
         }
       ),

package/dist/components/dateTimePicker/index.mjs

@@ -2,14 +2,14 @@
 import "../../chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "../../chunk-S2VUKVCH.mjs";
-import "../../chunk-2ZFHB4JM.mjs";
+} from "../../chunk-VNO4XOQG.mjs";
+import "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-WX32MAKV.mjs";
 import "../../chunk-P732YGHO.mjs";
-import "../../chunk-N6IEGD4K.mjs";
+import "../../chunk-NUIYVRYF.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
 import "../../chunk-EYY4CRRR.mjs";
-import "../../chunk-EDEV4IK4.mjs";
+import "../../chunk-SKQNTNEA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-LCI6RPWE.mjs";
 import "../../chunk-IOCRFIQF.mjs";

package/dist/components/dateTimePicker/timePicker.d.mts

@@ -3,8 +3,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface Props {
     color?: "primary" | "secondary";
     selectedTime?: string;
+    isFocusInput?: boolean;
     onChangeTime?: (time: string) => void;
 }
-declare const TimePicker: ({ color, selectedTime, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
+declare const TimePicker: ({ color, selectedTime, isFocusInput, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
 
 export { type Props, TimePicker as default };

package/dist/components/dateTimePicker/timePicker.d.ts

@@ -3,8 +3,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface Props {
     color?: "primary" | "secondary";
     selectedTime?: string;
+    isFocusInput?: boolean;
     onChangeTime?: (time: string) => void;
 }
-declare const TimePicker: ({ color, selectedTime, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
+declare const TimePicker: ({ color, selectedTime, isFocusInput, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
 
 export { type Props, TimePicker as default };

package/dist/components/dateTimePicker/timePicker.js

@@ -212,10 +212,10 @@ var listItem = tv({
       color: "primary",
       class: {
         base: [
-          "hover:text-primary-main",
+          "hover:text-primary-strong",
           "hover:bg-primary-soft",
-          "data-[selected=true]:text-primary-main",
-          "data-[selected=true]:bg-primary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-primary-main"
         ]
       }
     },
@@ -226,8 +226,8 @@ var listItem = tv({
         base: [
           "hover:text-secondary-main",
           "hover:bg-secondary-soft",
-          "data-[selected=true]:text-secondary-main",
-          "data-[selected=true]:bg-secondary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-secondary-main"
         ]
       }
     }
@@ -236,7 +236,7 @@ var listItem = tv({
 
 // src/components/dateTimePicker/timePicker.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
+var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
   const TOTAL_HOURS = 12;
   const TOTAL_MINUTES = 60;
   const ITEM_HEIGHT = 30;
@@ -256,7 +256,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
       setSelectedMinute(minute);
       setSelectedPeriod(period);
     }
-  }, [selectedTime]);
+    if (isFocusInput) {
+      scrollToSelectedTime();
+    }
+  }, [selectedTime, isFocusInput]);
   (0, import_react3.useEffect)(() => {
     scrollToSelectedTime();
   }, []);

package/dist/components/dateTimePicker/timePicker.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   timePicker_default
-} from "../../chunk-N6IEGD4K.mjs";
+} from "../../chunk-NUIYVRYF.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
 import "../../chunk-EYY4CRRR.mjs";
-import "../../chunk-EDEV4IK4.mjs";
+import "../../chunk-SKQNTNEA.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";
 import "../../chunk-IZ6II3QA.mjs";

package/dist/components/dateTimePicker/useDateTimePicker.d.mts

@@ -16,13 +16,16 @@ declare const useDatePicker: ({ initialDate, initialTime }: DatePickerHookProps)
     selectedTime: string | undefined;
     targetRect: TargetRect | null;
     popupHeight: number;
+    isFocusInput: boolean;
     dateInputRef: React.RefObject<HTMLInputElement>;
     datePickerWrapperRef: React.RefObject<HTMLDivElement>;
     datePickerRef: React.RefObject<HTMLDivElement>;
     handleToggleDatePicker: () => void;
     handleChangeDate: (date: string) => void;
     handleChangeTime: (time: string) => void;
-    calculatePositionWithScroll: (targetRect: TargetRect, popupHeight: number) => {
+    handleFocusInput: () => void;
+    handleBlueInput: () => void;
+    calculatePositionWithScroll: (targetRect: TargetRect) => {
         top: number;
         left: number;
     } | undefined;

package/dist/components/dateTimePicker/useDateTimePicker.d.ts

@@ -16,13 +16,16 @@ declare const useDatePicker: ({ initialDate, initialTime }: DatePickerHookProps)
     selectedTime: string | undefined;
     targetRect: TargetRect | null;
     popupHeight: number;
+    isFocusInput: boolean;
     dateInputRef: React.RefObject<HTMLInputElement>;
     datePickerWrapperRef: React.RefObject<HTMLDivElement>;
     datePickerRef: React.RefObject<HTMLDivElement>;
     handleToggleDatePicker: () => void;
     handleChangeDate: (date: string) => void;
     handleChangeTime: (time: string) => void;
-    calculatePositionWithScroll: (targetRect: TargetRect, popupHeight: number) => {
+    handleFocusInput: () => void;
+    handleBlueInput: () => void;
+    calculatePositionWithScroll: (targetRect: TargetRect) => {
         top: number;
         left: number;
     } | undefined;

package/dist/components/dateTimePicker/useDateTimePicker.js

@@ -43,21 +43,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const [targetRect, setTargetRect] = (0, import_react.useState)(null);
   const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
   const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
   const dateInputRef = (0, import_react.useRef)(null);
   const datePickerWrapperRef = (0, import_react.useRef)(null);
   const datePickerRef = (0, import_react.useRef)(null);
-  const dataPickerGap = 4;
-  const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
-    if (popupWidth === 0 || popupHeight2 === 0) return;
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-    const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
-    const spaceAbove = targetRect2.y - dataPickerGap;
-    const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
-    return {
-      top: top + scrollTop,
-      left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
-    };
+  const DATE_PICKER_GAP = 4;
+  const calculatePositionWithScroll = (targetRect2) => {
+    if (targetRect2 && popupWidth && popupHeight) {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
+      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
+      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
+      return {
+        top: top + scrollTop,
+        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
+      };
+    }
   };
   const handleToggleDatePicker = () => {
     if (datePickerRef.current) {
@@ -71,6 +73,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
   const handleChangeTime = (time) => {
     setSelectedTime(time);
   };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlueInput = () => {
+    setIsFocusInput(false);
+  };
   (0, import_react.useEffect)(() => {
     const onClickOutside = (e) => {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -91,12 +99,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
     selectedTime,
     targetRect,
     popupHeight,
+    isFocusInput,
     dateInputRef,
     datePickerWrapperRef,
     datePickerRef,
     handleToggleDatePicker,
     handleChangeDate,
     handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
     calculatePositionWithScroll
   };
 };

package/dist/components/dateTimePicker/useDateTimePicker.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   useDatePicker
-} from "../../chunk-2ZFHB4JM.mjs";
+} from "../../chunk-FWJ2ZKH6.mjs";
 import "../../chunk-P732YGHO.mjs";
 import "../../chunk-IZ6II3QA.mjs";
 export {

package/dist/components/list/index.js

@@ -212,10 +212,10 @@ var listItem = tv({
       color: "primary",
       class: {
         base: [
-          "hover:text-primary-main",
+          "hover:text-primary-strong",
           "hover:bg-primary-soft",
-          "data-[selected=true]:text-primary-main",
-          "data-[selected=true]:bg-primary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-primary-main"
         ]
       }
     },
@@ -226,8 +226,8 @@ var listItem = tv({
         base: [
           "hover:text-secondary-main",
           "hover:bg-secondary-soft",
-          "data-[selected=true]:text-secondary-main",
-          "data-[selected=true]:bg-secondary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-secondary-main"
         ]
       }
     }

package/dist/components/list/index.mjs

@@ -5,7 +5,7 @@ import {
 } from "../../chunk-EYY4CRRR.mjs";
 import {
   listItem_default
-} from "../../chunk-EDEV4IK4.mjs";
+} from "../../chunk-SKQNTNEA.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";
 import "../../chunk-IZ6II3QA.mjs";

package/dist/components/list/listItem.js

@@ -152,10 +152,10 @@ var listItem = tv({
       color: "primary",
       class: {
         base: [
-          "hover:text-primary-main",
+          "hover:text-primary-strong",
           "hover:bg-primary-soft",
-          "data-[selected=true]:text-primary-main",
-          "data-[selected=true]:bg-primary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-primary-main"
         ]
       }
     },
@@ -166,8 +166,8 @@ var listItem = tv({
         base: [
           "hover:text-secondary-main",
           "hover:bg-secondary-soft",
-          "data-[selected=true]:text-secondary-main",
-          "data-[selected=true]:bg-secondary-soft"
+          "data-[selected=true]:text-white",
+          "data-[selected=true]:bg-secondary-main"
         ]
       }
     }

package/dist/components/list/listItem.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   listItem_default
-} from "../../chunk-EDEV4IK4.mjs";
+} from "../../chunk-SKQNTNEA.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";
 import "../../chunk-IZ6II3QA.mjs";

package/dist/components/modal/index.js

@@ -4441,7 +4441,7 @@ var modal = tv({
   slots: {
     backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
     modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
+    icon: ["absolute", "top-[0px]", "left-1/2", "-translate-x-1/2", "z-10"],
     closeIcon: [
       "absolute",
       "top-[20px]",
@@ -4460,7 +4460,7 @@ var modal = tv({
       "bg-background",
       "shadow-drop shadow-foreground/20 rounded-xxlg",
       "overflow-hidden",
-      "group-data-[icon-visibility=true]/modal:mt-[60px]",
+      "group-data-[icon-visibility=true]/modal:mt-[40px]",
       "group-data-[icon-visibility=true]/modal:pt-[60px]"
     ],
     body: ["flex", "flex-col", "gap-[20px]"],

package/dist/components/modal/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-DJOG6Z35.mjs";
 import {
   modal_default
-} from "../../chunk-L7P6OBUX.mjs";
+} from "../../chunk-3WTG4YNN.mjs";
 import "../../chunk-VUYUQGLF.mjs";
 import "../../chunk-NGQ3MK2J.mjs";
 import "../../chunk-UR64ZUAU.mjs";

package/dist/components/modal/modal.js

@@ -4440,7 +4440,7 @@ var modal = tv({
   slots: {
     backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
     modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
+    icon: ["absolute", "top-[0px]", "left-1/2", "-translate-x-1/2", "z-10"],
     closeIcon: [
       "absolute",
       "top-[20px]",
@@ -4459,7 +4459,7 @@ var modal = tv({
       "bg-background",
       "shadow-drop shadow-foreground/20 rounded-xxlg",
       "overflow-hidden",
-      "group-data-[icon-visibility=true]/modal:mt-[60px]",
+      "group-data-[icon-visibility=true]/modal:mt-[40px]",
       "group-data-[icon-visibility=true]/modal:pt-[60px]"
     ],
     body: ["flex", "flex-col", "gap-[20px]"],

package/dist/components/modal/modal.mjs

@@ -2,7 +2,7 @@
 import {
   modal,
   modal_default
-} from "../../chunk-L7P6OBUX.mjs";
+} from "../../chunk-3WTG4YNN.mjs";
 import "../../chunk-VUYUQGLF.mjs";
 import "../../chunk-NGQ3MK2J.mjs";
 import "../../chunk-UR64ZUAU.mjs";

package/dist/components/modal/modal.test.js

@@ -17276,7 +17276,7 @@ var modal = tv({
   slots: {
     backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
     modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
-    icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
+    icon: ["absolute", "top-[0px]", "left-1/2", "-translate-x-1/2", "z-10"],
     closeIcon: [
       "absolute",
       "top-[20px]",
@@ -17295,7 +17295,7 @@ var modal = tv({
       "bg-background",
       "shadow-drop shadow-foreground/20 rounded-xxlg",
       "overflow-hidden",
-      "group-data-[icon-visibility=true]/modal:mt-[60px]",
+      "group-data-[icon-visibility=true]/modal:mt-[40px]",
       "group-data-[icon-visibility=true]/modal:pt-[60px]"
     ],
     body: ["flex", "flex-col", "gap-[20px]"],

package/dist/components/modal/modal.test.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   modal_default
-} from "../../chunk-L7P6OBUX.mjs";
+} from "../../chunk-3WTG4YNN.mjs";
 import "../../chunk-VUYUQGLF.mjs";
 import "../../chunk-NGQ3MK2J.mjs";
 import "../../chunk-UR64ZUAU.mjs";

package/dist/components/select/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "../../chunk-2BCJZILI.mjs";
-import "../../chunk-S3QS5B7F.mjs";
+} from "../../chunk-JN7EGKJL.mjs";
 import "../../chunk-RZZWHI6O.mjs";
+import "../../chunk-S3QS5B7F.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-LCI6RPWE.mjs";
 import "../../chunk-IOCRFIQF.mjs";

package/dist/components/select/select.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   select_default
-} from "../../chunk-2BCJZILI.mjs";
-import "../../chunk-S3QS5B7F.mjs";
+} from "../../chunk-JN7EGKJL.mjs";
 import "../../chunk-RZZWHI6O.mjs";
+import "../../chunk-S3QS5B7F.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-LCI6RPWE.mjs";
 import "../../chunk-IOCRFIQF.mjs";

package/dist/components/select/select.test.mjs

@@ -4,9 +4,9 @@ import {
 } from "../../chunk-S4DTK5GI.mjs";
 import {
   select_default
-} from "../../chunk-2BCJZILI.mjs";
-import "../../chunk-S3QS5B7F.mjs";
+} from "../../chunk-JN7EGKJL.mjs";
 import "../../chunk-RZZWHI6O.mjs";
+import "../../chunk-S3QS5B7F.mjs";
 import {
   act,
   render