motile-ui 1.3.0 → 1.4.0

package/dist/components/Modal/Modal.js

@@ -1,13 +1,13 @@
-import { jsx as l, jsxs as L } from "react/jsx-runtime";
-import n, { useRef as k, useState as O, useEffect as P, useId as h, createContext as V, useContext as q } from "react";
+import { jsx as l, jsxs as K } from "react/jsx-runtime";
+import n, { useRef as L, useState as O, useEffect as P, useId as v, createContext as V, useContext as q } from "react";
 import { createPortal as z } from "react-dom";
 import { useClickOutside as A } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as D } from "../../hooks/useEscapeKey.js";
 import { useScrollLock as G } from "../../hooks/useScrollLock.js";
 import { Slot as J } from "../../utils/Slot.js";
 import './Modal.css';/* empty css          */
-const v = V(null), m = () => {
-  const o = q(v);
+const _ = V(null), m = () => {
+  const o = q(_);
   if (!o)
     throw new Error("Modal compound components must be used within Modal.Root");
   return o;
@@ -16,7 +16,7 @@ const v = V(null), m = () => {
   onOpenChange: t,
   children: e
 }) => {
-  const a = h(), d = h(), r = n.useMemo(
+  const a = v(), d = v(), r = n.useMemo(
     () => ({
       open: o,
       onOpenChange: t,
@@ -25,8 +25,8 @@ const v = V(null), m = () => {
     }),
     [o, t, a, d]
   );
-  return /* @__PURE__ */ l(v.Provider, { value: r, children: e });
-}, _ = n.forwardRef(
+  return /* @__PURE__ */ l(_.Provider, { value: r, children: e });
+}, N = n.forwardRef(
   ({
     container: o,
     variant: t = "scale",
@@ -37,14 +37,14 @@ const v = V(null), m = () => {
     zIndex: s = 1e3,
     className: u,
     onClick: i,
-    style: $,
+    style: g,
     ...p
-  }, g) => {
-    const { open: c, onOpenChange: f } = m(), M = k(null), [S, E] = O(!1);
+  }, S) => {
+    const { open: c, onOpenChange: f } = m(), M = L(null), [E, T] = O(!1);
     P(() => {
-      E(!0);
+      T(!0);
     }, []);
-    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, T = typeof e == "boolean" ? e : e.escapeKey ?? !1;
+    const b = typeof e == "boolean" ? e : e.clickOutside ?? !1, h = typeof e == "boolean" ? e : e.escapeKey ?? !1;
     G({
       enabled: c && !a,
       allowedSelectors: [".motile-modal__content"]
@@ -56,30 +56,32 @@ const v = V(null), m = () => {
       enabled: c
     }), D({
       handler: () => {
-        T && f(!1);
+        h && f(!1);
       },
-      enabled: c
+      enabled: c && h,
+      stacked: !0
+      // 중첩 오버레이에서 ESC는 최상단만 닫는다
     });
     const j = (y) => {
       i == null || i(y), y.target === y.currentTarget && b && f(!1);
     };
-    if (!S || !c) return null;
-    const F = {
+    if (!E || !c) return null;
+    const k = {
       zIndex: s,
-      ...$
-    }, H = {
+      ...g
+    }, F = {
       ...d && { "--modal-width": d },
       ...r && { "--modal-max-width": r },
       zIndex: s + 1
-    }, K = /* @__PURE__ */ l(
+    }, H = /* @__PURE__ */ l(
       "div",
       {
-        ref: g,
+        ref: S,
         className: `motile-modal__backdrop ${u || ""}`,
         "data-state": c ? "open" : "closed",
         "data-variant": t,
         onClick: j,
-        style: F,
+        style: k,
         ...p,
         children: /* @__PURE__ */ l(
           "div",
@@ -87,17 +89,17 @@ const v = V(null), m = () => {
             ref: M,
             className: "motile-modal",
             "data-variant": t,
-            style: H,
+            style: F,
             children: p.children
           }
         )
       }
     );
-    return z(K, o || document.body);
+    return z(H, o || document.body);
   }
 );
-_.displayName = "Modal.Overlay";
-const N = n.forwardRef(
+N.displayName = "Modal.Overlay";
+const w = n.forwardRef(
   ({ className: o, forceMount: t, ...e }, a) => {
     const { open: d, titleId: r, descriptionId: s } = m();
     return !d && !t ? null : /* @__PURE__ */ l(
@@ -115,8 +117,8 @@ const N = n.forwardRef(
     );
   }
 );
-N.displayName = "Modal.Content";
-const w = n.forwardRef(
+w.displayName = "Modal.Content";
+const x = n.forwardRef(
   ({ className: o, ...t }, e) => {
     const { titleId: a } = m();
     return /* @__PURE__ */ l(
@@ -130,8 +132,8 @@ const w = n.forwardRef(
     );
   }
 );
-w.displayName = "Modal.Title";
-const x = n.forwardRef(
+x.displayName = "Modal.Title";
+const R = n.forwardRef(
   ({ className: o, ...t }, e) => {
     const { descriptionId: a } = m();
     return /* @__PURE__ */ l(
@@ -145,8 +147,8 @@ const x = n.forwardRef(
     );
   }
 );
-x.displayName = "Modal.Body";
-const R = n.forwardRef(
+R.displayName = "Modal.Body";
+const C = n.forwardRef(
   ({ asChild: o, className: t, onClick: e, children: a, ...d }, r) => {
     const { onOpenChange: s } = m(), u = (i) => {
       e == null || e(i), s(!1);
@@ -168,7 +170,7 @@ const R = n.forwardRef(
         onClick: u,
         "aria-label": "닫기",
         ...d,
-        children: a || /* @__PURE__ */ L(
+        children: a || /* @__PURE__ */ K(
           "svg",
           {
             width: "18",
@@ -189,8 +191,8 @@ const R = n.forwardRef(
     );
   }
 );
-R.displayName = "Modal.Close";
-const C = n.forwardRef(
+C.displayName = "Modal.Close";
+const I = n.forwardRef(
   ({ className: o, ...t }, e) => /* @__PURE__ */ l(
     "div",
     {
@@ -200,8 +202,8 @@ const C = n.forwardRef(
     }
   )
 );
-C.displayName = "Modal.Footer";
-const I = n.forwardRef(
+I.displayName = "Modal.Footer";
+const $ = n.forwardRef(
   ({ className: o, ...t }, e) => /* @__PURE__ */ l(
     "div",
     {
@@ -211,25 +213,25 @@ const I = n.forwardRef(
     }
   )
 );
-I.displayName = "Modal.Header";
+$.displayName = "Modal.Header";
 const te = {
   Root: Q,
-  Overlay: _,
-  Content: N,
-  Title: w,
-  Body: x,
-  Close: R,
-  Footer: C,
-  Header: I
+  Overlay: N,
+  Content: w,
+  Title: x,
+  Body: R,
+  Close: C,
+  Footer: I,
+  Header: $
 };
 export {
   te as Modal,
-  x as ModalBody,
-  R as ModalClose,
-  N as ModalContent,
-  C as ModalFooter,
-  I as ModalHeader,
-  _ as ModalOverlay,
+  R as ModalBody,
+  C as ModalClose,
+  w as ModalContent,
+  I as ModalFooter,
+  $ as ModalHeader,
+  N as ModalOverlay,
   Q as ModalRoot,
-  w as ModalTitle
+  x as ModalTitle
 };

package/dist/components/NumberFlow/NumberFlow.css

@@ -1 +1 @@
-.motile-number-flow{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;line-height:1}.motile-number-flow__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.motile-number-flow__value{display:inline-flex;align-items:center}.motile-number-flow__digit{display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:top}.motile-number-flow__digit-column{display:flex;flex-direction:column;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.motile-number-flow__digit-value{display:flex;align-items:center;justify-content:center;height:1em;line-height:1}.motile-number-flow__separator{display:inline-block;line-height:1}@media (prefers-reduced-motion: reduce){.motile-number-flow__digit-column{transition:none!important}}
+:where(.motile-number-flow){display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;line-height:1}:where(.motile-number-flow__sr-only){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.motile-number-flow__value){display:inline-flex;align-items:center}:where(.motile-number-flow__digit){display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:top}:where(.motile-number-flow__digit-column){display:flex;flex-direction:column;will-change:transform;transform:translateZ(0);backface-visibility:hidden}:where(.motile-number-flow__digit-value){display:flex;align-items:center;justify-content:center;height:1em;line-height:1}:where(.motile-number-flow__separator){display:inline-block;line-height:1}@media (prefers-reduced-motion: reduce){:where(.motile-number-flow__digit-column){transition:none!important}}

package/dist/components/Popover/Popover.css

@@ -1 +1 @@
-.motile-popover-wrapper{position:relative;display:inline-block}.motile-popover-content{position:absolute;z-index:10;border-radius:12px;font-size:14px;line-height:1.5;padding:12px 16px;box-shadow:0 4px 12px #0000001a;pointer-events:auto;width:max-content;max-width:min(90vw,420px);box-sizing:border-box;overflow:visible;will-change:transform;backface-visibility:hidden}.motile-popover-content--filled{background:var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #3b82f6)) );color:#fff;border:1px solid var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #3b82f6)) )}.motile-popover-content--outlined{background:#fff;color:#111827;border:1px solid var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #e5e7eb)) )}.motile-popover-content[data-placement=top][data-align=start]{bottom:calc(100% + 5.5px);left:0;animation:popover-fade-in-top .2s ease-out}.motile-popover-content[data-placement=top][data-align=center]{bottom:calc(100% + 5.5px);left:50%;transform:translate(-50%);animation:popover-fade-in-top-center .2s ease-out}.motile-popover-content[data-placement=top][data-align=end]{bottom:calc(100% + 5.5px);right:0;animation:popover-fade-in-top .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=start]{top:calc(100% + 5.5px);left:0;animation:popover-fade-in-bottom .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=center]{top:calc(100% + 5.5px);left:50%;transform:translate(-50%);animation:popover-fade-in-bottom-center .2s ease-out}.motile-popover-content[data-placement=bottom][data-align=end]{top:calc(100% + 5.5px);right:0;animation:popover-fade-in-bottom .2s ease-out}.motile-popover-content[data-placement=left][data-align=start]{right:calc(100% + 5.5px);top:0;animation:popover-fade-in-left .2s ease-out}.motile-popover-content[data-placement=left][data-align=center]{right:calc(100% + 5.5px);top:50%;transform:translateY(-50%);animation:popover-fade-in-left-center .2s ease-out}.motile-popover-content[data-placement=left][data-align=end]{right:calc(100% + 5.5px);bottom:0;animation:popover-fade-in-left .2s ease-out}.motile-popover-content[data-placement=right][data-align=start]{left:calc(100% + 5.5px);top:0;animation:popover-fade-in-right .2s ease-out}.motile-popover-content[data-placement=right][data-align=center]{left:calc(100% + 5.5px);top:50%;transform:translateY(-50%);animation:popover-fade-in-right-center .2s ease-out}.motile-popover-content[data-placement=right][data-align=end]{left:calc(100% + 5.5px);bottom:0;animation:popover-fade-in-right .2s ease-out}@keyframes popover-fade-in-top{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-top-center{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes popover-fade-in-bottom{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-bottom-center{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes popover-fade-in-left{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes popover-fade-in-left-center{0%{opacity:0;transform:translate(8px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes popover-fade-in-right{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes popover-fade-in-right-center{0%{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}.motile-popover-content[data-placement=top][data-align=start][data-bounce=true],.motile-popover-content[data-placement=top][data-align=end][data-bounce=true]{animation:popover-bounce-top .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=top][data-align=center][data-bounce=true]{animation:popover-bounce-top-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=bottom][data-align=start][data-bounce=true],.motile-popover-content[data-placement=bottom][data-align=end][data-bounce=true]{animation:popover-bounce-bottom .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=bottom][data-align=center][data-bounce=true]{animation:popover-bounce-bottom-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=left][data-align=start][data-bounce=true],.motile-popover-content[data-placement=left][data-align=end][data-bounce=true]{animation:popover-bounce-left .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=left][data-align=center][data-bounce=true]{animation:popover-bounce-left-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=right][data-align=start][data-bounce=true],.motile-popover-content[data-placement=right][data-align=end][data-bounce=true]{animation:popover-bounce-right .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}.motile-popover-content[data-placement=right][data-align=center][data-bounce=true]{animation:popover-bounce-right-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-top{0%,to{transform:translateY(0)}30%{transform:translateY(-10px)}50%{transform:translateY(0)}65%{transform:translateY(-3px)}80%{transform:translateY(0)}}@keyframes popover-bounce-top-center{0%,to{transform:translate(-50%)}30%{transform:translate(-50%,-10px)}50%{transform:translate(-50%)}65%{transform:translate(-50%,-3px)}80%{transform:translate(-50%)}}@keyframes popover-bounce-bottom{0%,to{transform:translateY(0)}30%{transform:translateY(10px)}50%{transform:translateY(0)}65%{transform:translateY(3px)}80%{transform:translateY(0)}}@keyframes popover-bounce-bottom-center{0%,to{transform:translate(-50%)}30%{transform:translate(-50%,10px)}50%{transform:translate(-50%)}65%{transform:translate(-50%,3px)}80%{transform:translate(-50%)}}@keyframes popover-bounce-left{0%,to{transform:translate(0)}30%{transform:translate(-10px)}50%{transform:translate(0)}65%{transform:translate(-3px)}80%{transform:translate(0)}}@keyframes popover-bounce-left-center{0%,to{transform:translateY(-50%)}30%{transform:translate(-10px,-50%)}50%{transform:translateY(-50%)}65%{transform:translate(-3px,-50%)}80%{transform:translateY(-50%)}}@keyframes popover-bounce-right{0%,to{transform:translate(0)}30%{transform:translate(10px)}50%{transform:translate(0)}65%{transform:translate(3px)}80%{transform:translate(0)}}@keyframes popover-bounce-right-center{0%,to{transform:translateY(-50%)}30%{transform:translate(10px,-50%)}50%{transform:translateY(-50%)}65%{transform:translate(3px,-50%)}80%{transform:translateY(-50%)}}.motile-popover-arrow{position:absolute;pointer-events:none;z-index:1}.motile-popover-content[data-placement=top] .motile-popover-arrow{bottom:-7.25px;transform:rotate(180deg)}.motile-popover-content[data-placement=top][data-align=start] .motile-popover-arrow{left:20px}.motile-popover-content[data-placement=top][data-align=center] .motile-popover-arrow{left:50%;margin-left:-6px}.motile-popover-content[data-placement=top][data-align=end] .motile-popover-arrow{right:20px}.motile-popover-content[data-placement=bottom] .motile-popover-arrow{top:-7.25px;transform:rotate(0)}.motile-popover-content[data-placement=bottom][data-align=start] .motile-popover-arrow{left:20px}.motile-popover-content[data-placement=bottom][data-align=center] .motile-popover-arrow{left:50%;margin-left:-6px}.motile-popover-content[data-placement=bottom][data-align=end] .motile-popover-arrow{right:20px}.motile-popover-content[data-placement=left] .motile-popover-arrow{right:-9.25px;transform:rotate(90deg)}.motile-popover-content[data-placement=left][data-align=start] .motile-popover-arrow{top:12px}.motile-popover-content[data-placement=left][data-align=center] .motile-popover-arrow{top:50%;margin-top:-4px}.motile-popover-content[data-placement=left][data-align=end] .motile-popover-arrow{bottom:12px}.motile-popover-content[data-placement=right] .motile-popover-arrow{left:-9.25px;transform:rotate(-90deg)}.motile-popover-content[data-placement=right][data-align=start] .motile-popover-arrow{top:12px}.motile-popover-content[data-placement=right][data-align=center] .motile-popover-arrow{top:50%;margin-top:-4px}.motile-popover-content[data-placement=right][data-align=end] .motile-popover-arrow{bottom:12px}
+:where(.motile-popover-wrapper){position:relative;display:inline-block}:where(.motile-popover-content){position:absolute;z-index:10;border-radius:12px;font-size:14px;line-height:1.5;padding:12px 16px;box-shadow:0 4px 12px #0000001a;pointer-events:auto;width:max-content;max-width:min(90vw,420px);box-sizing:border-box;overflow:visible;will-change:transform;backface-visibility:hidden}:where(.motile-popover-content--filled){--arrow-color: var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #3b82f6)) );background:var(--arrow-color);color:#fff;border:1px solid var(--arrow-color)}:where(.motile-popover-content--outlined){--arrow-color: var( --motile-popover-color, var(--motile-ui-popover, var(--motile-theme, #e5e7eb)) );background:#fff;color:#111827;border:1px solid var(--arrow-color)}:where(.motile-popover-content[data-placement=top][data-align=start]){bottom:calc(100% + 5.5px);left:0;animation:popover-fade-in-top .2s ease-out}:where(.motile-popover-content[data-placement=top][data-align=center]){bottom:calc(100% + 5.5px);left:50%;transform:translate(-50%);animation:popover-fade-in-top-center .2s ease-out}:where(.motile-popover-content[data-placement=top][data-align=end]){bottom:calc(100% + 5.5px);right:0;animation:popover-fade-in-top .2s ease-out}:where(.motile-popover-content[data-placement=bottom][data-align=start]){top:calc(100% + 5.5px);left:0;animation:popover-fade-in-bottom .2s ease-out}:where(.motile-popover-content[data-placement=bottom][data-align=center]){top:calc(100% + 5.5px);left:50%;transform:translate(-50%);animation:popover-fade-in-bottom-center .2s ease-out}:where(.motile-popover-content[data-placement=bottom][data-align=end]){top:calc(100% + 5.5px);right:0;animation:popover-fade-in-bottom .2s ease-out}:where(.motile-popover-content[data-placement=left][data-align=start]){right:calc(100% + 5.5px);top:0;animation:popover-fade-in-left .2s ease-out}:where(.motile-popover-content[data-placement=left][data-align=center]){right:calc(100% + 5.5px);top:50%;transform:translateY(-50%);animation:popover-fade-in-left-center .2s ease-out}:where(.motile-popover-content[data-placement=left][data-align=end]){right:calc(100% + 5.5px);bottom:0;animation:popover-fade-in-left .2s ease-out}:where(.motile-popover-content[data-placement=right][data-align=start]){left:calc(100% + 5.5px);top:0;animation:popover-fade-in-right .2s ease-out}:where(.motile-popover-content[data-placement=right][data-align=center]){left:calc(100% + 5.5px);top:50%;transform:translateY(-50%);animation:popover-fade-in-right-center .2s ease-out}:where(.motile-popover-content[data-placement=right][data-align=end]){left:calc(100% + 5.5px);bottom:0;animation:popover-fade-in-right .2s ease-out}@keyframes popover-fade-in-top{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-top-center{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes popover-fade-in-bottom{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-fade-in-bottom-center{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes popover-fade-in-left{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes popover-fade-in-left-center{0%{opacity:0;transform:translate(8px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes popover-fade-in-right{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes popover-fade-in-right-center{0%{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}:where(.motile-popover-content[data-placement=top][data-align=start][data-bounce=true]),:where(.motile-popover-content[data-placement=top][data-align=end][data-bounce=true]){animation:popover-bounce-top .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=top][data-align=center][data-bounce=true]){animation:popover-bounce-top-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=bottom][data-align=start][data-bounce=true]),:where(.motile-popover-content[data-placement=bottom][data-align=end][data-bounce=true]){animation:popover-bounce-bottom .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=bottom][data-align=center][data-bounce=true]){animation:popover-bounce-bottom-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=left][data-align=start][data-bounce=true]),:where(.motile-popover-content[data-placement=left][data-align=end][data-bounce=true]){animation:popover-bounce-left .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=left][data-align=center][data-bounce=true]){animation:popover-bounce-left-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=right][data-align=start][data-bounce=true]),:where(.motile-popover-content[data-placement=right][data-align=end][data-bounce=true]){animation:popover-bounce-right .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}:where(.motile-popover-content[data-placement=right][data-align=center][data-bounce=true]){animation:popover-bounce-right-center .7s ease-out;animation-iteration-count:var(--bounce-count, 1)}@keyframes popover-bounce-top{0%,to{transform:translateY(0)}30%{transform:translateY(-10px)}50%{transform:translateY(0)}65%{transform:translateY(-3px)}80%{transform:translateY(0)}}@keyframes popover-bounce-top-center{0%,to{transform:translate(-50%)}30%{transform:translate(-50%,-10px)}50%{transform:translate(-50%)}65%{transform:translate(-50%,-3px)}80%{transform:translate(-50%)}}@keyframes popover-bounce-bottom{0%,to{transform:translateY(0)}30%{transform:translateY(10px)}50%{transform:translateY(0)}65%{transform:translateY(3px)}80%{transform:translateY(0)}}@keyframes popover-bounce-bottom-center{0%,to{transform:translate(-50%)}30%{transform:translate(-50%,10px)}50%{transform:translate(-50%)}65%{transform:translate(-50%,3px)}80%{transform:translate(-50%)}}@keyframes popover-bounce-left{0%,to{transform:translate(0)}30%{transform:translate(-10px)}50%{transform:translate(0)}65%{transform:translate(-3px)}80%{transform:translate(0)}}@keyframes popover-bounce-left-center{0%,to{transform:translateY(-50%)}30%{transform:translate(-10px,-50%)}50%{transform:translateY(-50%)}65%{transform:translate(-3px,-50%)}80%{transform:translateY(-50%)}}@keyframes popover-bounce-right{0%,to{transform:translate(0)}30%{transform:translate(10px)}50%{transform:translate(0)}65%{transform:translate(3px)}80%{transform:translate(0)}}@keyframes popover-bounce-right-center{0%,to{transform:translateY(-50%)}30%{transform:translate(10px,-50%)}50%{transform:translateY(-50%)}65%{transform:translate(3px,-50%)}80%{transform:translateY(-50%)}}:where(.motile-popover-arrow){position:absolute;pointer-events:none;z-index:1}:where(.motile-popover-content[data-placement=top] .motile-popover-arrow){bottom:-7.25px;transform:rotate(180deg)}:where(.motile-popover-content[data-placement=top][data-align=start] .motile-popover-arrow){left:20px}:where(.motile-popover-content[data-placement=top][data-align=center] .motile-popover-arrow){left:50%;margin-left:-6px}:where(.motile-popover-content[data-placement=top][data-align=end] .motile-popover-arrow){right:20px}:where(.motile-popover-content[data-placement=bottom] .motile-popover-arrow){top:-7.25px;transform:rotate(0)}:where(.motile-popover-content[data-placement=bottom][data-align=start] .motile-popover-arrow){left:20px}:where(.motile-popover-content[data-placement=bottom][data-align=center] .motile-popover-arrow){left:50%;margin-left:-6px}:where(.motile-popover-content[data-placement=bottom][data-align=end] .motile-popover-arrow){right:20px}:where(.motile-popover-content[data-placement=left] .motile-popover-arrow){right:-9.25px;transform:rotate(90deg)}:where(.motile-popover-content[data-placement=left][data-align=start] .motile-popover-arrow){top:12px}:where(.motile-popover-content[data-placement=left][data-align=center] .motile-popover-arrow){top:50%;margin-top:-4px}:where(.motile-popover-content[data-placement=left][data-align=end] .motile-popover-arrow){bottom:12px}:where(.motile-popover-content[data-placement=right] .motile-popover-arrow){left:-9.25px;transform:rotate(-90deg)}:where(.motile-popover-content[data-placement=right][data-align=start] .motile-popover-arrow){top:12px}:where(.motile-popover-content[data-placement=right][data-align=center] .motile-popover-arrow){top:50%;margin-top:-4px}:where(.motile-popover-content[data-placement=right][data-align=end] .motile-popover-arrow){bottom:12px}

package/dist/components/Popover/Popover.js

@@ -1,105 +1,105 @@
-import { jsxs as $, jsx as g } from "react/jsx-runtime";
-import h, { useCallback as R, useId as k, useRef as I, useMemo as N, createContext as j, useContext as E } from "react";
-import { useClickOutside as T } from "../../hooks/useClickOutside.js";
+import { jsxs as y, jsx as g } from "react/jsx-runtime";
+import $, { useCallback as b, useId as N, useRef as I, useMemo as j, createContext as E, useContext as T } from "react";
+import { useClickOutside as h } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as A } from "../../hooks/useEscapeKey.js";
 import { FloatingArrow as B } from "../../utils/FloatingArrow.js";
 import { Slot as F } from "../../utils/Slot.js";
 import './Popover.css';/* empty css            */
-const S = j(null);
+const S = E(null);
 function C() {
-  const t = E(S);
+  const t = T(S);
   if (!t)
     throw new Error("Popover components must be used within Popover.Root");
   return t;
 }
 function K({
   value: t,
-  defaultValue: s = !1,
+  defaultValue: p = !1,
   onChange: o
 }) {
-  const e = t !== void 0, [r, i] = h.useState(s), l = e ? t : r, a = R(
-    (c) => {
-      const m = typeof c == "function" ? c(l) : c;
-      e || i(m), o == null || o(m);
+  const e = t !== void 0, [r, s] = $.useState(p), l = e ? t : r, c = b(
+    (a) => {
+      const d = typeof a == "function" ? a(l) : a;
+      e || s(d), o == null || o(d);
     },
     [e, o, l]
   );
-  return [l, a];
+  return [l, c];
 }
 function M({
   children: t,
-  position: s = "top",
+  position: p = "top",
   align: o = "center",
   variant: e = "filled",
   showArrow: r = !1,
-  zIndex: i = 10,
+  zIndex: s = 10,
   color: l,
-  bounceCount: a = 0,
-  open: c,
-  defaultOpen: m = !1,
-  onOpenChange: f,
+  bounceCount: c = 0,
+  open: a,
+  defaultOpen: d = !1,
+  onOpenChange: m,
   onClickOutside: u,
   onDismiss: v,
-  autoClose: d = !0
+  autoClose: f = !0
 }) {
-  const n = k().replace(/:/g, ""), x = I(null), w = I(null), b = I(null), [P, p] = K({
-    value: c,
-    defaultValue: m,
-    onChange: f
-  }), y = N(
+  const n = N().replace(/:/g, ""), x = I(null), w = I(null), P = I(null), [R, i] = K({
+    value: a,
+    defaultValue: d,
+    onChange: m
+  }), k = j(
     () => ({
-      open: P,
-      setOpen: p,
-      position: s,
+      open: R,
+      setOpen: i,
+      position: p,
       align: o,
       variant: e,
       showArrow: r,
-      zIndex: i,
+      zIndex: s,
       color: l,
-      autoClose: d,
-      bounceCount: a,
-      onOpenChange: f,
+      autoClose: f,
+      bounceCount: c,
+      onOpenChange: m,
       onClickOutside: u,
       onDismiss: v,
       triggerId: `${n}-trigger`,
       contentId: `${n}-content`,
       triggerRef: x,
       contentRef: w,
-      wrapperRef: b
+      wrapperRef: P
     }),
     [
-      P,
+      R,
+      i,
       p,
-      s,
       o,
       e,
       r,
-      i,
+      s,
       l,
-      d,
-      a,
       f,
+      c,
+      m,
       u,
       v,
       n
     ]
   );
-  return /* @__PURE__ */ g(S.Provider, { value: y, children: /* @__PURE__ */ g("div", { ref: b, className: "motile-popover-wrapper", children: t }) });
+  return /* @__PURE__ */ g(S.Provider, { value: k, children: /* @__PURE__ */ g("div", { ref: P, className: "motile-popover-wrapper", children: t }) });
 }
-function V({ children: t, asChild: s = !1 }) {
-  const { open: o, setOpen: e, triggerId: r, contentId: i, triggerRef: l } = C(), a = R(() => {
-    e((c) => !c);
+function V({ children: t, asChild: p = !1 }) {
+  const { open: o, setOpen: e, triggerId: r, contentId: s, triggerRef: l } = C(), c = b(() => {
+    e((a) => !a);
   }, [e]);
-  return s ? /* @__PURE__ */ g(
+  return p ? /* @__PURE__ */ g(
     F,
     {
-      ref: (c) => {
-        l.current = c;
+      ref: (a) => {
+        l.current = a;
       },
       id: r,
       "aria-expanded": o,
-      "aria-controls": i,
-      onClick: a,
+      "aria-controls": s,
+      onClick: c,
       children: t
     }
   ) : /* @__PURE__ */ g(
@@ -109,79 +109,76 @@ function V({ children: t, asChild: s = !1 }) {
       id: r,
       type: "button",
       "aria-expanded": o,
-      "aria-controls": i,
-      onClick: a,
+      "aria-controls": s,
+      onClick: c,
       children: t
     }
   );
 }
 function q({
   children: t,
-  className: s = "",
+  className: p = "",
   style: o
 }) {
   const {
     open: e,
     setOpen: r,
-    position: i,
+    position: s,
     align: l,
-    variant: a,
-    showArrow: c,
-    zIndex: m,
-    color: f,
+    variant: c,
+    showArrow: a,
+    zIndex: d,
+    color: m,
     autoClose: u,
     bounceCount: v,
-    onClickOutside: d,
+    onClickOutside: f,
     onDismiss: n,
     contentId: x,
     contentRef: w,
-    wrapperRef: b
+    wrapperRef: P
   } = C();
   if (A({
-    handler: R(
-      (p) => {
-        u && (n == null || n(p), p.defaultPrevented || r(!1));
+    handler: b(
+      (i) => {
+        u && (n == null || n(i), i.defaultPrevented || r(!1));
       },
       [u, n, r]
     ),
-    enabled: e
-  }), T({
-    refs: [b],
-    handler: R(
-      (p) => {
-        u && (d == null || d(p), n == null || n(p), p.defaultPrevented || r(!1));
+    // enabled를 정직하게 계산 — 닫히지 않을(autoClose=false) 팝오버가
+    // ESC 스택의 top을 점유해 아래 오버레이의 ESC를 삼키지 않게
+    enabled: e && u,
+    stacked: !0
+    // 중첩 오버레이에서 ESC는 최상단만 닫는다
+  }), h({
+    refs: [P],
+    handler: b(
+      (i) => {
+        u && (f == null || f(i), n == null || n(i), i.defaultPrevented || r(!1));
       },
-      [u, d, n, r]
+      [u, f, n, r]
     ),
     enabled: e
   }), !e) return null;
-  const P = v !== 0;
-  return /* @__PURE__ */ $(
+  const R = v !== 0;
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: w,
       id: x,
       role: "dialog",
       "aria-modal": "false",
-      className: `motile-popover-content motile-popover-content--${a} ${s}`,
-      "data-placement": i,
+      className: `motile-popover-content motile-popover-content--${c} ${p}`,
+      "data-placement": s,
       "data-align": l,
-      "data-bounce": P ? "true" : "false",
+      "data-bounce": R ? "true" : "false",
       style: {
-        zIndex: m,
-        ...f && { "--motile-popover-color": f },
+        zIndex: d,
+        ...m && { "--motile-popover-color": m },
         "--bounce-count": v,
         ...o
       },
       children: [
-        c && /* @__PURE__ */ g(
-          B,
-          {
-            className: "motile-popover-arrow",
-            variant: a,
-            color: f || (a === "filled" ? "var(--motile-ui-popover, var(--motile-theme, #3b82f6))" : "var(--motile-ui-popover, var(--motile-theme, #e5e7eb))")
-          }
-        ),
+        a && /* @__PURE__ */ g(B, { className: "motile-popover-arrow", variant: c }),
         t
       ]
     }

package/dist/components/Select/Select.css

@@ -1 +1 @@
-.motile-select__trigger{position:relative;box-sizing:border-box;width:100%;min-height:48px;padding:12px 40px 12px 16px;display:flex;align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;font-size:16px;color:#1f2937;text-align:left;cursor:pointer;transition:border-color .2s ease}.motile-select__trigger[aria-expanded=true]{border-color:color-mix(in srgb,var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) ) 60%,transparent);background-color:#e5e7eb80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);filter:blur(1.5px);color:#1f293780}.motile-select__trigger:disabled,.motile-select__trigger[disabled]{background-color:#f9fafb;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed}.motile-select__icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;transition:transform .2s}.motile-select__trigger[aria-expanded=true] .motile-select__icon{transform:translateY(-50%) rotate(180deg)}.motile-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motile-select__content{position:absolute;top:calc(100% + 4px);left:0;width:100%;box-sizing:border-box;max-height:300px;overflow-y:auto;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform-origin:top center;visibility:hidden;opacity:0;transform:translateY(-12px) scaleY(.85);pointer-events:none;transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .45s}.motile-select__content--open{visibility:visible;opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto;transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear 0s}.motile-select__content::-webkit-scrollbar{width:8px}.motile-select__content::-webkit-scrollbar-track{background:transparent}.motile-select__content::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:4px}.motile-select__content::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.motile-select__item{position:relative;box-sizing:border-box;min-height:44px;padding:12px 40px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;line-height:1.5;color:#1f2937;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent}.motile-select__item:hover:not(.motile-select__item--disabled){background-color:#f9fafb}.motile-select__item--selected{font-weight:500}.motile-select__item--selected:not(.motile-select__item--disabled){background-color:color-mix(in srgb,var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) ) 5%,transparent)}.motile-select__item--disabled{color:#d1d5db;cursor:not-allowed}.motile-select__check{position:absolute;right:12px;color:var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) )}@media (prefers-color-scheme: dark){.motile-select__trigger:disabled,.motile-select__trigger[disabled]{background-color:#1f2937;color:#6b7280;border-color:#374151}.motile-select__content{background-color:#1f2937;border-color:#374151}.motile-select__item{color:#f9fafb}.motile-select__item:hover:not(.motile-select__item--disabled){background-color:#374151}.motile-select__item--selected:not(.motile-select__item--disabled){background-color:#3b82f626}.motile-select__item--disabled{color:#4b5563}}.motile-select__mobile-list{width:100%;box-sizing:border-box;padding-bottom:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}@media (prefers-reduced-motion: reduce){.motile-select__content,.motile-select__item{transition:none}}
+:where(.motile-select__trigger){position:relative;box-sizing:border-box;width:100%;min-height:48px;padding:12px 40px 12px 16px;display:flex;align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;font-size:16px;color:#1f2937;text-align:left;cursor:pointer;transition:border-color .2s ease}:where(.motile-select__trigger[aria-expanded=true]){border-color:color-mix(in srgb,var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) ) 60%,transparent);background-color:#e5e7eb80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);filter:blur(1.5px);color:#1f293780}:where(.motile-select__trigger:disabled),:where(.motile-select__trigger[disabled]){background-color:#f9fafb;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed}:where(.motile-select__icon){position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;transition:transform .2s}:where(.motile-select__trigger[aria-expanded=true] .motile-select__icon){transform:translateY(-50%) rotate(180deg)}:where(.motile-select__value){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.motile-select__content){position:absolute;top:calc(100% + 4px);left:0;width:100%;box-sizing:border-box;max-height:300px;overflow-y:auto;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform-origin:top center;visibility:hidden;opacity:0;transform:translateY(-12px) scaleY(.85);pointer-events:none;transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .45s}:where(.motile-select__content--open){visibility:visible;opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto;transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear 0s}:where(.motile-select__content)::-webkit-scrollbar{width:8px}:where(.motile-select__content)::-webkit-scrollbar-track{background:transparent}:where(.motile-select__content)::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:4px}:where(.motile-select__content)::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:where(.motile-select__item){position:relative;box-sizing:border-box;min-height:44px;padding:12px 40px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;line-height:1.5;color:#1f2937;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent}:where(.motile-select__item:hover:not(.motile-select__item--disabled)){background-color:#f9fafb}:where(.motile-select__item--selected){font-weight:500}:where(.motile-select__item--selected:not(.motile-select__item--disabled)){background-color:color-mix(in srgb,var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) ) 5%,transparent)}:where(.motile-select__item--disabled){color:#d1d5db;cursor:not-allowed}:where(.motile-select__check){position:absolute;right:12px;color:var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) )}@media (prefers-color-scheme: dark){:where(.motile-select__trigger:disabled),:where(.motile-select__trigger[disabled]){background-color:#1f2937;color:#6b7280;border-color:#374151}:where(.motile-select__content){background-color:#1f2937;border-color:#374151}:where(.motile-select__item){color:#f9fafb}:where(.motile-select__item:hover:not(.motile-select__item--disabled)){background-color:#374151}:where(.motile-select__item--selected:not(.motile-select__item--disabled)){background-color:#3b82f626}:where(.motile-select__item--disabled){color:#4b5563}}:where(.motile-select__mobile-list){width:100%;box-sizing:border-box;padding-bottom:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}@media (prefers-reduced-motion: reduce){:where(.motile-select__content){transition:none}:where(.motile-select__item){transition:none}}