@dotss/ui 1.1.2 → 1.2.0

package/Menu/Menu.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("@emotion/react/jsx-runtime"),o=require("react"),ct=require("react-dom"),dt=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),G=require("../utils/getSibling/getSibling.cjs"),ft=require("@emotion/styled"),lt=e=>e&&e.__esModule?e:{default:e},M=lt(ft),at=M.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("@emotion/react/jsx-runtime"),s=require("react"),ft=require("react-dom"),dt=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),H=require("../utils/getSibling/getSibling.cjs"),at=require("@emotion/styled"),lt=e=>e&&e.__esModule?e:{default:e},M=lt(at),pt=M.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -8,7 +8,7 @@
 
     ${({disableClickOutside:e})=>e?null:{pointerEvents:"none","& *":{pointerEvents:"auto"}}}}
 
-`,pt=M.default.div`
+`,yt=M.default.div`
   position: fixed;
   max-width: calc(100% - ${({theme:{spacing:e}})=>e.layout(4)}px);
   overflow-y: auto;
@@ -21,14 +21,14 @@
   transform: scale(${({open:e})=>e?1:.97});
   opacity: ${({open:e})=>e?1:0};
   z-index: 100003;
-`,yt=M.default.ul`
+`,vt=M.default.ul`
   display: flex;
   flex-direction: column;
   max-height: ${({maxHeight:e})=>e}px;
 
-    ${({theme:{spacing:e},disablePadding:p})=>p?null:{padding:`${e.content(1)}px 0`}}}
+    ${({theme:{spacing:e},disablePadding:y})=>y?null:{padding:`${e.content(1)}px 0`}}}
 `,bt=M.default.div`
   width: 100%;
   height: 1px;
   background-color: ${({theme:{palette:{grey:e}}})=>e[20]};
-`,f=16,vt=o.forwardRef(function({children:p,anchorRef:i,open:h,onClose:l,spacing:v=4,transitionDuration:T=200,onChange:S,value:H,showDivider:P,placement:W="bottom-center",disablePadding:U=!1,disableClickOutside:V=!0,disableAutoPositioning:w=!1,width:q,fitToAnchorWidth:I=!0,maxHeight:O=476,style:J,inlineCSS:Q,menuProps:X,...Y},Z){const[g,z]=o.useState(0),[_,j]=o.useState("auto"),[R,K]=o.useState("auto"),[k,A]=o.useState(0),[D,L]=o.useState(!1),[tt,et]=o.useState(!1),[ot,C]=o.useState(!0),[st,y]=o.useState(null),x=o.useRef(),m=o.useRef(),E=o.useRef(null),{isKeyboardMode:ut}=dt.default(),rt=(t,s)=>n=>{n.stopPropagation(),typeof l=="function"&&l(),typeof S=="function"&&S(t,n),typeof s=="function"&&s(n)},it=t=>s=>{var r,c,d,a;if(s.key==="Tab"&&typeof l=="function"&&(l(),y(0)),(s.key==="Enter"||s.key===" ")&&typeof l=="function"&&typeof S=="function"&&(l(),S(t,s),i!=null&&i.current)){const u=i.current.querySelector("button");u&&ut&&u.focus()}const n=document.activeElement;if(n){if(s.code==="ArrowDown"){const u=G.default(n,"next",{skipDisabled:!0});u&&u.dataset.index?(y(Number(u.dataset.index)),u.focus()):(y(0),(c=(r=E.current)==null?void 0:r.querySelector('[role="menuitem"]'))==null||c.focus())}if(s.code==="ArrowUp"){const u=G.default(n,"prev",{skipDisabled:!0});u&&u.dataset.index?(y(Number(u.dataset.index)),u.focus()):(y(o.Children.count(p)-1),(a=(d=E.current)==null?void 0:d.querySelector('[role="menuitem"]:last-child'))==null||a.focus())}}};return o.useEffect(()=>{h&&(m.current&&clearTimeout(m.current),document.body.style.overflow="hidden",C(!1),x.current=setTimeout(()=>{L(!0)},100))},[h]),o.useEffect(()=>{h||(x.current&&clearTimeout(x.current),L(!1),document.body.removeAttribute("style"),m.current=setTimeout(()=>{C(!0),y(0)},T))},[h,T]),o.useEffect(()=>{const t=()=>{var B;const{offsetWidth:s=0,offsetHeight:n=0}=(i==null?void 0:i.current)||{},r=((B=i==null?void 0:i.current)==null?void 0:B.getBoundingClientRect())||{top:0,left:0,bottom:0},{offsetWidth:c=0,offsetHeight:d=0}=E.current||{},[a,u]=W.split("-");A(q||s);const $=r.top-d-v<f&&!w,nt=r.bottom+d+v+f>window.innerHeight&&!w,F=r.left+c+f>window.innerWidth&&!w,N=r.left+s-c<f&&!w;switch(a){case"top":z($?f:r.top-d-v);break;default:z(nt?"auto":r.top+n+v);break}switch(u){case"left":j(F?"auto":r.left),K(F?f:"auto");break;case"right":j(N?f:r.left+s-c),K(N?"auto":r.left);break;default:j(r.left+s/2-c/2);break}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[i,v,W,D,p,q,w,O]),o.useEffect(()=>{et(D&&!!g&&!!_&&!!k)},[D,g,_,k]),o.useEffect(()=>()=>{x.current&&clearTimeout(x.current),m.current&&clearTimeout(m.current)},[]),ot?null:ct.createPortal(b.jsx(at,{onClick:l,disableClickOutside:V,children:b.jsx(pt,{ref:Z,open:tt,transitionDuration:T,...Y,css:Q,style:{...J,top:g,left:_,bottom:g==="auto"?f:void 0,right:R,width:I?k:void 0,maxHeight:O},children:b.jsx(yt,{role:"menu",ref:E,disablePadding:U,maxHeight:O,...X,children:o.Children.map(p,(t,s)=>{var r,c,d,a,u,$;if(!o.isValidElement(t))return null;const n=st===s;return b.jsxs(b.Fragment,{children:[o.cloneElement(t,{...t.props,"data-index":s,selected:!!((r=t==null?void 0:t.props)!=null&&r.value)&&((c=t==null?void 0:t.props)==null?void 0:c.value)===H,onClick:rt((d=t==null?void 0:t.props)==null?void 0:d.value,(a=t==null?void 0:t.props)==null?void 0:a.onClick),onKeyDown:it((u=t==null?void 0:t.props)==null?void 0:u.value),tabIndex:n?0:-1,style:{...($=t==null?void 0:t.props)==null?void 0:$.style,[q?"width":"minWidth"]:I?void 0:k,maxWidth:I?void 0:"100%"}}),P&&o.Children.count(p)!==s+1&&b.jsx(bt,{})]})})})})}),document.body)});exports.default=vt;
+`,a=16,wt=s.forwardRef(function({children:y,anchorRef:i,open:h,onClose:f,spacing:b=4,transitionDuration:T=200,onChange:m,value:C,showDivider:U,placement:z="bottom-center",disablePadding:V=!1,disableClickOutside:J=!0,disableAutoPositioning:w=!1,width:q,fitToAnchorWidth:I=!0,maxHeight:O=476,style:Q,inlineCSS:X,menuProps:Y,...Z},A){const[k,K]=s.useState(0),[_,j]=s.useState("auto"),[R,L]=s.useState("auto"),[E,tt]=s.useState(0),[W,P]=s.useState(!1),[et,ot]=s.useState(!1),[st,B]=s.useState(!0),[ut,l]=s.useState(null),x=s.useRef(),g=s.useRef(),S=s.useRef(null),{isKeyboardMode:rt}=dt.default(),$=()=>{i!=null&&i.current&&rt&&i.current.focus()},it=(t,o)=>n=>{n.stopPropagation(),typeof f=="function"&&f(),typeof m=="function"&&m(t,n),typeof o=="function"&&o(n),$()},nt=t=>o=>{var u,c,d,p;o.key==="Tab"&&typeof f=="function"&&(o.preventDefault(),o.stopPropagation(),f(),l(0),$()),(o.key==="Enter"||o.key===" ")&&typeof f=="function"&&typeof m=="function"&&(o.preventDefault(),o.stopPropagation(),f(),m(t,o),$()),o.key==="Escape"&&typeof f=="function"&&(o.preventDefault(),o.stopPropagation(),f(),l(0),$());const n=document.activeElement;if(n){if(o.code==="ArrowDown"){const r=H.default(n,"next",{skipDisabled:!0});r&&r.dataset.index?(l(Number(r.dataset.index)),r.focus()):(l(0),(c=(u=S.current)==null?void 0:u.querySelector('[role="menuitem"]'))==null||c.focus())}if(o.code==="ArrowUp"){const r=H.default(n,"prev",{skipDisabled:!0});r&&r.dataset.index?(l(Number(r.dataset.index)),r.focus()):(l(s.Children.count(y)-1),(p=(d=S.current)==null?void 0:d.querySelector('[role="menuitem"]:last-child'))==null||p.focus())}}};return s.useEffect(()=>{h&&(g.current&&clearTimeout(g.current),document.body.style.overflow="hidden",B(!1),x.current=setTimeout(()=>{P(!0)},100))},[h]),s.useEffect(()=>{h||(x.current&&clearTimeout(x.current),P(!1),document.body.removeAttribute("style"),g.current=setTimeout(()=>{B(!0),l(0)},T))},[h,T]),s.useEffect(()=>{const t=()=>{var G;const{offsetWidth:o=0,offsetHeight:n=0}=(i==null?void 0:i.current)||{},u=((G=i==null?void 0:i.current)==null?void 0:G.getBoundingClientRect())||{top:0,left:0,bottom:0},{offsetWidth:c=0,offsetHeight:d=0}=S.current||{},[p,r]=z.split("-");tt(q||o);const D=u.top-d-b<a&&!w,ct=u.bottom+d+b+a>window.innerHeight&&!w,F=u.left+c+a>window.innerWidth&&!w,N=u.left+o-c<a&&!w;switch(p){case"top":K(D?a:u.top-d-b);break;default:K(ct?"auto":u.top+n+b);break}switch(r){case"left":j(F?"auto":u.left),L(F?a:"auto");break;case"right":j(N?a:u.left+o-c),L(N?"auto":u.left);break;default:j(u.left+o/2-c/2);break}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[i,b,z,W,y,q,w,O]),s.useEffect(()=>{ot(W&&!!k&&!!_&&!!E)},[W,k,_,E]),s.useEffect(()=>()=>{x.current&&clearTimeout(x.current),g.current&&clearTimeout(g.current)},[]),st?null:ft.createPortal(v.jsx(pt,{onClick:f,disableClickOutside:J,children:v.jsx(yt,{ref:A,open:et,transitionDuration:T,...Z,css:X,style:{...Q,top:k,left:_,bottom:k==="auto"?a:void 0,right:R,width:I?E:void 0,maxHeight:O},children:v.jsx(vt,{role:"menu",ref:S,disablePadding:V,maxHeight:O,...Y,children:s.Children.map(y,(t,o)=>{var u,c,d,p,r,D;if(!s.isValidElement(t))return null;const n=ut===o;return v.jsxs(v.Fragment,{children:[s.cloneElement(t,{...t.props,"data-index":o,selected:!!((u=t==null?void 0:t.props)!=null&&u.value)&&((c=t==null?void 0:t.props)==null?void 0:c.value)===C,onClick:it((d=t==null?void 0:t.props)==null?void 0:d.value,(p=t==null?void 0:t.props)==null?void 0:p.onClick),onKeyDown:nt((r=t==null?void 0:t.props)==null?void 0:r.value),tabIndex:n?0:-1,style:{...(D=t==null?void 0:t.props)==null?void 0:D.style,[q?"width":"minWidth"]:I?void 0:E,maxWidth:I?void 0:"100%"}}),U&&s.Children.count(y)!==o+1&&v.jsx(bt,{})]})})})})}),document.body)});exports.default=wt;

package/Menu/Menu.es.js

@@ -1,10 +1,10 @@
-import { jsx as T, jsxs as pt, Fragment as lt } from "@emotion/react/jsx-runtime";
-import { forwardRef as at, useState as f, useRef as q, useEffect as x, Children as F, isValidElement as yt, cloneElement as mt } from "react";
-import { createPortal as bt } from "react-dom";
-import vt from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
-import _ from "../utils/getSibling/getSibling.es.js";
-import I from "@emotion/styled";
-const wt = I.div`
+import { jsx as I, jsxs as at, Fragment as lt } from "@emotion/react/jsx-runtime";
+import { forwardRef as yt, useState as d, useRef as F, useEffect as x, Children as N, isValidElement as vt, cloneElement as mt } from "react";
+import { createPortal as wt } from "react-dom";
+import bt from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import J from "../utils/getSibling/getSibling.es.js";
+import S from "@emotion/styled";
+const xt = S.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -12,185 +12,184 @@ const wt = I.div`
   height: 100%;
   z-index: 100003;
 
-    ${({ disableClickOutside: o }) => o ? null : {
+    ${({ disableClickOutside: e }) => e ? null : {
   pointerEvents: "none",
   "& *": {
     pointerEvents: "auto"
   }
 }}}
 
-`, xt = I.div`
+`, gt = S.div`
   position: fixed;
-  max-width: calc(100% - ${({ theme: { spacing: o } }) => o.layout(4)}px);
+  max-width: calc(100% - ${({ theme: { spacing: e } }) => e.layout(4)}px);
   overflow-y: auto;
   border-radius: 10px;
   background-color: ${({
   theme: {
-    palette: { grey: o }
+    palette: { grey: e }
   }
-}) => o.white};
-  box-shadow: ${({ theme: { elevation: o } }) => o[4]};
+}) => e.white};
+  box-shadow: ${({ theme: { elevation: e } }) => e[4]};
   transition:
-    transform ${({ transitionDuration: o }) => o}ms,
-    opacity ${({ transitionDuration: o = 0 }) => o / 2}ms;
-  transform: scale(${({ open: o }) => o ? 1 : 0.97});
-  opacity: ${({ open: o }) => o ? 1 : 0};
+    transform ${({ transitionDuration: e }) => e}ms,
+    opacity ${({ transitionDuration: e = 0 }) => e / 2}ms;
+  transform: scale(${({ open: e }) => e ? 1 : 0.97});
+  opacity: ${({ open: e }) => e ? 1 : 0};
   z-index: 100003;
-`, ht = I.ul`
+`, ht = S.ul`
   display: flex;
   flex-direction: column;
-  max-height: ${({ maxHeight: o }) => o}px;
+  max-height: ${({ maxHeight: e }) => e}px;
 
-    ${({ theme: { spacing: o }, disablePadding: a }) => a ? null : {
-  padding: `${o.content(1)}px 0`
+    ${({ theme: { spacing: e }, disablePadding: y }) => y ? null : {
+  padding: `${e.content(1)}px 0`
 }}}
-`, kt = I.div`
+`, kt = S.div`
   width: 100%;
   height: 1px;
   background-color: ${({
   theme: {
-    palette: { grey: o }
+    palette: { grey: e }
   }
-}) => o[20]};
-`, d = 16, Mt = at(function({
-  children: a,
+}) => e[20]};
+`, p = 16, Mt = yt(function({
+  children: y,
   anchorRef: s,
-  open: h,
-  onClose: p,
-  spacing: m = 4,
+  open: g,
+  onClose: c,
+  spacing: v = 4,
   transitionDuration: M = 200,
-  onChange: k,
-  value: J,
-  showDivider: P,
-  placement: N = "bottom-center",
-  disablePadding: Q = !1,
-  disableClickOutside: X = !0,
-  disableAutoPositioning: b = !1,
+  onChange: h,
+  value: Q,
+  showDivider: X,
+  placement: P = "bottom-center",
+  disablePadding: Y = !1,
+  disableClickOutside: Z = !0,
+  disableAutoPositioning: m = !1,
   width: O,
   fitToAnchorWidth: W = !0,
-  maxHeight: D = 476,
-  style: Y,
-  inlineCSS: Z,
-  menuProps: A,
-  ...R
-}, tt) {
-  const [g, j] = f(0), [z, K] = f("auto"), [ot, B] = f("auto"), [E, et] = f(0), [L, G] = f(!1), [rt, it] = f(!1), [st, H] = f(!0), [ut, y] = f(null), v = q(), w = q(), $ = q(null), { isKeyboardMode: nt } = vt(), ct = (t, e) => (u) => {
-    u.stopPropagation(), typeof p == "function" && p(), typeof k == "function" && k(t, u), typeof e == "function" && e(u);
-  }, ft = (t) => (e) => {
-    var i, n, c, l;
-    if (e.key === "Tab" && typeof p == "function" && (p(), y(0)), (e.key === "Enter" || e.key === " ") && typeof p == "function" && typeof k == "function" && (p(), k(t, e), s != null && s.current)) {
-      const r = s.current.querySelector("button");
-      r && nt && r.focus();
-    }
+  maxHeight: z = 476,
+  style: A,
+  inlineCSS: C,
+  menuProps: R,
+  ...tt
+}, ot) {
+  const [k, j] = d(0), [K, L] = d("auto"), [et, q] = d("auto"), [E, rt] = d(0), [B, G] = d(!1), [it, st] = d(!1), [ut, H] = d(!0), [nt, a] = d(null), w = F(), b = F(), $ = F(null), { isKeyboardMode: ct } = bt(), T = () => {
+    s != null && s.current && ct && s.current.focus();
+  }, ft = (t, o) => (u) => {
+    u.stopPropagation(), typeof c == "function" && c(), typeof h == "function" && h(t, u), typeof o == "function" && o(u), T();
+  }, dt = (t) => (o) => {
+    var r, n, f, l;
+    o.key === "Tab" && typeof c == "function" && (o.preventDefault(), o.stopPropagation(), c(), a(0), T()), (o.key === "Enter" || o.key === " ") && typeof c == "function" && typeof h == "function" && (o.preventDefault(), o.stopPropagation(), c(), h(t, o), T()), o.key === "Escape" && typeof c == "function" && (o.preventDefault(), o.stopPropagation(), c(), a(0), T());
     const u = document.activeElement;
     if (u) {
-      if (e.code === "ArrowDown") {
-        const r = _(u, "next", { skipDisabled: !0 });
-        r && r.dataset.index ? (y(Number(r.dataset.index)), r.focus()) : (y(0), (n = (i = $.current) == null ? void 0 : i.querySelector('[role="menuitem"]')) == null || n.focus());
+      if (o.code === "ArrowDown") {
+        const i = J(u, "next", { skipDisabled: !0 });
+        i && i.dataset.index ? (a(Number(i.dataset.index)), i.focus()) : (a(0), (n = (r = $.current) == null ? void 0 : r.querySelector('[role="menuitem"]')) == null || n.focus());
       }
-      if (e.code === "ArrowUp") {
-        const r = _(u, "prev", { skipDisabled: !0 });
-        r && r.dataset.index ? (y(Number(r.dataset.index)), r.focus()) : (y(F.count(a) - 1), (l = (c = $.current) == null ? void 0 : c.querySelector('[role="menuitem"]:last-child')) == null || l.focus());
+      if (o.code === "ArrowUp") {
+        const i = J(u, "prev", { skipDisabled: !0 });
+        i && i.dataset.index ? (a(Number(i.dataset.index)), i.focus()) : (a(N.count(y) - 1), (l = (f = $.current) == null ? void 0 : f.querySelector('[role="menuitem"]:last-child')) == null || l.focus());
       }
     }
   };
   return x(() => {
-    h && (w.current && clearTimeout(w.current), document.body.style.overflow = "hidden", H(!1), v.current = setTimeout(() => {
+    g && (b.current && clearTimeout(b.current), document.body.style.overflow = "hidden", H(!1), w.current = setTimeout(() => {
       G(!0);
     }, 100));
-  }, [h]), x(() => {
-    h || (v.current && clearTimeout(v.current), G(!1), document.body.removeAttribute("style"), w.current = setTimeout(() => {
-      H(!0), y(0);
+  }, [g]), x(() => {
+    g || (w.current && clearTimeout(w.current), G(!1), document.body.removeAttribute("style"), b.current = setTimeout(() => {
+      H(!0), a(0);
     }, M));
-  }, [h, M]), x(() => {
+  }, [g, M]), x(() => {
     const t = () => {
-      var V;
-      const { offsetWidth: e = 0, offsetHeight: u = 0 } = (s == null ? void 0 : s.current) || {}, i = ((V = s == null ? void 0 : s.current) == null ? void 0 : V.getBoundingClientRect()) || {
+      var _;
+      const { offsetWidth: o = 0, offsetHeight: u = 0 } = (s == null ? void 0 : s.current) || {}, r = ((_ = s == null ? void 0 : s.current) == null ? void 0 : _.getBoundingClientRect()) || {
         top: 0,
         left: 0,
         bottom: 0
-      }, { offsetWidth: n = 0, offsetHeight: c = 0 } = $.current || {}, [l, r] = N.split("-");
-      et(O || e);
-      const S = i.top - c - m < d && !b, dt = i.bottom + c + m + d > window.innerHeight && !b, C = i.left + n + d > window.innerWidth && !b, U = i.left + e - n < d && !b;
+      }, { offsetWidth: n = 0, offsetHeight: f = 0 } = $.current || {}, [l, i] = P.split("-");
+      rt(O || o);
+      const D = r.top - f - v < p && !m, pt = r.bottom + f + v + p > window.innerHeight && !m, U = r.left + n + p > window.innerWidth && !m, V = r.left + o - n < p && !m;
       switch (l) {
         case "top":
           j(
-            S ? d : i.top - c - m
+            D ? p : r.top - f - v
           );
           break;
         default:
-          j(dt ? "auto" : i.top + u + m);
+          j(pt ? "auto" : r.top + u + v);
           break;
       }
-      switch (r) {
+      switch (i) {
         case "left":
-          K(C ? "auto" : i.left), B(C ? d : "auto");
+          L(U ? "auto" : r.left), q(U ? p : "auto");
           break;
         case "right":
-          K(
-            U ? d : i.left + e - n
-          ), B(U ? "auto" : i.left);
+          L(
+            V ? p : r.left + o - n
+          ), q(V ? "auto" : r.left);
           break;
         default:
-          K(i.left + e / 2 - n / 2);
+          L(r.left + o / 2 - n / 2);
           break;
       }
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [s, m, N, L, a, O, b, D]), x(() => {
-    it(L && !!g && !!z && !!E);
-  }, [L, g, z, E]), x(() => () => {
-    v.current && clearTimeout(v.current), w.current && clearTimeout(w.current);
-  }, []), st ? null : bt(
-    /* @__PURE__ */ T(wt, { onClick: p, disableClickOutside: X, children: /* @__PURE__ */ T(
-      xt,
+  }, [s, v, P, B, y, O, m, z]), x(() => {
+    st(B && !!k && !!K && !!E);
+  }, [B, k, K, E]), x(() => () => {
+    w.current && clearTimeout(w.current), b.current && clearTimeout(b.current);
+  }, []), ut ? null : wt(
+    /* @__PURE__ */ I(xt, { onClick: c, disableClickOutside: Z, children: /* @__PURE__ */ I(
+      gt,
       {
-        ref: tt,
-        open: rt,
+        ref: ot,
+        open: it,
         transitionDuration: M,
-        ...R,
-        css: Z,
+        ...tt,
+        css: C,
         style: {
-          ...Y,
-          top: g,
-          left: z,
-          bottom: g === "auto" ? d : void 0,
-          right: ot,
+          ...A,
+          top: k,
+          left: K,
+          bottom: k === "auto" ? p : void 0,
+          right: et,
           width: W ? E : void 0,
-          maxHeight: D
+          maxHeight: z
         },
-        children: /* @__PURE__ */ T(
+        children: /* @__PURE__ */ I(
           ht,
           {
             role: "menu",
             ref: $,
-            disablePadding: Q,
-            maxHeight: D,
-            ...A,
-            children: F.map(a, (t, e) => {
-              var i, n, c, l, r, S;
-              if (!yt(t))
+            disablePadding: Y,
+            maxHeight: z,
+            ...R,
+            children: N.map(y, (t, o) => {
+              var r, n, f, l, i, D;
+              if (!vt(t))
                 return null;
-              const u = ut === e;
-              return /* @__PURE__ */ pt(lt, { children: [
+              const u = nt === o;
+              return /* @__PURE__ */ at(lt, { children: [
                 mt(t, {
                   ...t.props,
                   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                   // @ts-expect-error
-                  "data-index": e,
-                  selected: !!((i = t == null ? void 0 : t.props) != null && i.value) && ((n = t == null ? void 0 : t.props) == null ? void 0 : n.value) === J,
-                  onClick: ct((c = t == null ? void 0 : t.props) == null ? void 0 : c.value, (l = t == null ? void 0 : t.props) == null ? void 0 : l.onClick),
-                  onKeyDown: ft((r = t == null ? void 0 : t.props) == null ? void 0 : r.value),
+                  "data-index": o,
+                  selected: !!((r = t == null ? void 0 : t.props) != null && r.value) && ((n = t == null ? void 0 : t.props) == null ? void 0 : n.value) === Q,
+                  onClick: ft((f = t == null ? void 0 : t.props) == null ? void 0 : f.value, (l = t == null ? void 0 : t.props) == null ? void 0 : l.onClick),
+                  onKeyDown: dt((i = t == null ? void 0 : t.props) == null ? void 0 : i.value),
                   tabIndex: u ? 0 : -1,
                   style: {
-                    ...(S = t == null ? void 0 : t.props) == null ? void 0 : S.style,
+                    ...(D = t == null ? void 0 : t.props) == null ? void 0 : D.style,
                     [O ? "width" : "minWidth"]: W ? void 0 : E,
                     maxWidth: W ? void 0 : "100%"
                   }
                 }),
-                P && F.count(a) !== e + 1 && /* @__PURE__ */ T(kt, {})
+                X && N.count(y) !== o + 1 && /* @__PURE__ */ I(kt, {})
               ] });
             })
           }

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),d=require("react"),u=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),p=require("@emotion/styled"),g=require("../../utils/getContrastingTextColor/getContrastingTextColor.cjs"),h=e=>e&&e.__esModule?e:{default:e},l=h(p),f=l.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),p=require("react"),g=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),h=require("@emotion/styled"),f=require("../../utils/getContrastingTextColor/getContrastingTextColor.cjs"),m=e=>e&&e.__esModule?e:{default:e},l=m(h),b=l.default.div`
   flex-basis: calc((100% / 3) - ${({theme:{spacing:e}})=>e.content(3)}px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-`,m=l.default.button`
+`,y=l.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13,7 +13,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
-  color: ${({theme:{palette:{brand:e,grey:t}}})=>g.default(e.primary.main,[t.white,t[100]])};
+  color: ${({theme:{palette:{brand:e,grey:t}}})=>f.default(e.primary.main,[t.white,t[100]])};
   & svg {
     color: inherit;
   }
@@ -31,4 +31,4 @@
     color: ${({theme:{palette:{grey:e}}})=>e[30]};
     cursor: not-allowed;
   }
-`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{type:"button",size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;
+`,v=p.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,value:a,buttonProps:s,...c},d){const{isHoverPossible:u}=g.default();return o.jsx(b,{ref:d,...c,css:n,"data-value":a,children:o.jsx(y,{type:"button",size:r,disabled:i,isHoverPossible:u,...s,children:t})})});exports.default=v;

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.d.ts

@@ -4,6 +4,7 @@ import { NumberKeypadProps } from '../NumberKeypad';
 
 export interface NumberKeypadBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<NumberKeypadProps, 'size' | 'disabled'>> {
     value?: string | number;
+    buttonProps?: HTMLAttributes<HTMLButtonElement>;
 }
 declare const NumberKeypadBlock: import('react').ForwardRefExoticComponent<NumberKeypadBlockProps & import('react').RefAttributes<HTMLDivElement>>;
 export default NumberKeypadBlock;

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.es.js

@@ -1,14 +1,14 @@
 import { jsx as o } from "@emotion/react/jsx-runtime";
-import { forwardRef as p } from "react";
-import d from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import { forwardRef as h } from "react";
+import m from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
 import n from "@emotion/styled";
-import h from "../../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const m = n.div`
+import g from "../../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const u = n.div`
   flex-basis: calc((100% / 3) - ${({ theme: { spacing: e } }) => e.content(3)}px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-`, g = n.button`
+`, f = n.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -26,7 +26,7 @@ const m = n.div`
   theme: {
     palette: { brand: e, grey: t }
   }
-}) => h(e.primary.main, [t.white, t[100]])};
+}) => g(e.primary.main, [t.white, t[100]])};
   & svg {
     color: inherit;
   }
@@ -95,21 +95,22 @@ const m = n.div`
 }) => e[30]};
     cursor: not-allowed;
   }
-`, v = p(
-  function({ children: t, size: r, disabled: i, inlineCSS: l, ...a }, s) {
-    const { isHoverPossible: c } = d();
-    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(
-      g,
+`, x = h(
+  function({ children: t, size: r, disabled: i, inlineCSS: l, value: a, buttonProps: s, ...c }, p) {
+    const { isHoverPossible: d } = m();
+    return /* @__PURE__ */ o(u, { ref: p, ...c, css: l, "data-value": a, children: /* @__PURE__ */ o(
+      f,
       {
         type: "button",
         size: r,
         disabled: i,
-        isHoverPossible: c,
+        isHoverPossible: d,
+        ...s,
         children: t
       }
     ) });
   }
 );
 export {
-  v as default
+  x as default
 };

package/PageControl/PageControl.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),n=require("react"),j=require("../Flexbox/Flexbox.cjs"),q=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),A=require("@emotion/styled"),D=e=>e&&e.__esModule?e:{default:e},d=D(A),L=d.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),n=require("react"),j=require("../Flexbox/Flexbox.cjs"),q=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),A=require("@emotion/styled"),D=e=>e&&e.__esModule?e:{default:e},b=D(A),L=b.default.div`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
@@ -11,16 +11,16 @@
   }
 
   @supports not selector(:has(:focus-visible)) {
-    ${({focusWithin:e,theme:r})=>e?{outline:`${r.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
+    ${({focusWithin:e,theme:o})=>e?{outline:`${o.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
   }
-`,S=d.default.button`
+`,S=b.default.button`
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  background-color: ${({theme:{palette:{grey:e}},color:r})=>r==="primary"?e[10]:e[30]};
+  background-color: ${({theme:{palette:{grey:e}},color:o})=>o==="primary"?e[10]:e[30]};
   cursor: pointer;
   transition: all 150ms ease;
   transition-property: width, border-radius, background-color, cursor;
 
-  ${({theme:{palette:{brand:e}},color:r,isActive:o})=>o?{width:24,borderRadius:8,backgroundColor:r==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
-`,F=n.forwardRef(function({totalCount:r=1,page:o=1,onChange:l,color:p="primary",inlineCSS:y,tabIdPrefix:b,controlIdPrefix:m,tabProps:x,...h},$){const k=n.useRef(null),R=$??k,f=n.useRef(null),{hasFocus:w}=q.default({ref:f}),P=n.useId(),v=n.useId(),a=`${b??P}-`,I=`${m??v}-`,_=i=>t=>{t.preventDefault(),typeof l=="function"&&l(i)},g=i=>{let t=o;if(i.key==="ArrowLeft"?o>1?t=o-1:o===1&&(t=r):i.key==="ArrowRight"?o<r?t=o+1:o===r&&(t=1):i.key==="Home"?t=1:i.key==="End"&&(t=r),t!==o){const s=document.getElementById(`${a}${t}`);s==null||s.focus(),l==null||l(t)}};return c.jsx(L,{ref:R,role:"tablist",...h,css:y,focusWithin:w,children:c.jsx(j.default,{ref:f,gap:2,children:Array.from({length:r},(i,t)=>{const s=t+1,u=s===o;return c.jsx(S,{id:`${a}${s}`,"aria-controls":`${I}${s}`,isActive:u,"data-page":s,onClick:_(s),role:"tab",type:"button","aria-selected":u,onKeyDown:g,tabIndex:u?0:-1,...x,color:p},t)})})})});exports.default=F;
+  ${({theme:{palette:{brand:e}},color:o,isActive:r})=>r?{width:24,borderRadius:8,backgroundColor:o==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
+`,F=n.forwardRef(function({totalCount:o=1,page:r=1,onChange:l,color:y="primary",inlineCSS:m,tabIdPrefix:p,controlIdPrefix:x,tabProps:$,...u},h){const k=n.useRef(null),R=h??k,f=n.useRef(null),{hasFocus:w}=q.default({ref:f}),P=n.useId(),v=n.useId(),d=`${p??P}-`,I=`${x??v}-`,_=i=>t=>{t.preventDefault(),typeof l=="function"&&l(i)},g=i=>{let t=r;if(i.key==="ArrowLeft"?r>1?t=r-1:r===1&&(t=o):i.key==="ArrowRight"?r<o?t=r+1:r===o&&(t=1):i.key==="Home"?t=1:i.key==="End"&&(t=o),t!==r){const s=document.getElementById(`${d}${t}`);s==null||s.focus(),l==null||l(t)}};return a.jsx(L,{ref:R,role:"tablist",...u,css:m,focusWithin:w,children:a.jsx(j.default,{ref:f,gap:2,children:Array.from({length:o},(i,t)=>{const s=t+1,c=s===r;return a.jsx(S,{id:`${d}${s}`,"aria-controls":`${I}${s}`,isActive:c,"data-page":s,onClick:_(s),role:"tab",type:"button","aria-selected":c,onKeyDown:g,tabIndex:c?0:-1,"aria-label":`${u==null?void 0:u["aria-label"]} ${s} 이동, 현재 ${r}`,...$,color:y},t)})})})});exports.default=F;

package/PageControl/PageControl.es.js

@@ -1,5 +1,5 @@
-import { jsx as f } from "@emotion/react/jsx-runtime";
-import { forwardRef as D, useRef as u, useId as d } from "react";
+import { jsx as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as D, useRef as d, useId as m } from "react";
 import F from "../Flexbox/Flexbox.es.js";
 import E from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
 import p from "@emotion/styled";
@@ -16,8 +16,8 @@ const H = p.div`
   }
 
   @supports not selector(:has(:focus-visible)) {
-    ${({ focusWithin: t, theme: r }) => t ? {
-  outline: `${r.palette.grey[100]} solid 2px`,
+    ${({ focusWithin: t, theme: o }) => t ? {
+  outline: `${o.palette.grey[100]} solid 2px`,
   outlineOffset: 2
 } : {}}
   }
@@ -29,8 +29,8 @@ const H = p.div`
   theme: {
     palette: { grey: t }
   },
-  color: r
-}) => r === "primary" ? t[10] : t[30]};
+  color: o
+}) => o === "primary" ? t[10] : t[30]};
   cursor: pointer;
   transition: all 150ms ease;
   transition-property: width, border-radius, background-color, cursor;
@@ -39,59 +39,60 @@ const H = p.div`
   theme: {
     palette: { brand: t }
   },
-  color: r,
-  isActive: o
-}) => o ? {
+  color: o,
+  isActive: r
+}) => r ? {
   width: 24,
   borderRadius: 8,
-  backgroundColor: r === "primary" ? t.primary.pageControl : t.primary.tooltip,
+  backgroundColor: o === "primary" ? t.primary.pageControl : t.primary.tooltip,
   cursor: "default"
 } : null}
 `, O = D(function({
-  totalCount: r = 1,
-  page: o = 1,
+  totalCount: o = 1,
+  page: r = 1,
   onChange: l,
-  color: m = "primary",
+  color: b = "primary",
   inlineCSS: y,
-  tabIdPrefix: b,
+  tabIdPrefix: $,
   controlIdPrefix: x,
   tabProps: h,
-  ...$
+  ...n
 }, k) {
-  const w = u(null), P = k ?? w, c = u(null), { hasFocus: I } = E({ ref: c }), R = d(), v = d(), a = `${b ?? R}-`, g = `${x ?? v}-`, A = (s) => (e) => {
+  const w = d(null), P = k ?? w, a = d(null), { hasFocus: I } = E({ ref: a }), R = m(), v = m(), u = `${$ ?? R}-`, A = `${x ?? v}-`, L = (s) => (e) => {
     e.preventDefault(), typeof l == "function" && l(s);
-  }, L = (s) => {
-    let e = o;
-    if (s.key === "ArrowLeft" ? o > 1 ? e = o - 1 : o === 1 && (e = r) : s.key === "ArrowRight" ? o < r ? e = o + 1 : o === r && (e = 1) : s.key === "Home" ? e = 1 : s.key === "End" && (e = r), e !== o) {
-      const i = document.getElementById(`${a}${e}`);
+  }, g = (s) => {
+    let e = r;
+    if (s.key === "ArrowLeft" ? r > 1 ? e = r - 1 : r === 1 && (e = o) : s.key === "ArrowRight" ? r < o ? e = r + 1 : r === o && (e = 1) : s.key === "Home" ? e = 1 : s.key === "End" && (e = o), e !== r) {
+      const i = document.getElementById(`${u}${e}`);
       i == null || i.focus(), l == null || l(e);
     }
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ c(
     H,
     {
       ref: P,
       role: "tablist",
-      ...$,
+      ...n,
       css: y,
       focusWithin: I,
-      children: /* @__PURE__ */ f(F, { ref: c, gap: 2, children: Array.from({ length: r }, (s, e) => {
-        const i = e + 1, n = i === o;
-        return /* @__PURE__ */ f(
+      children: /* @__PURE__ */ c(F, { ref: a, gap: 2, children: Array.from({ length: o }, (s, e) => {
+        const i = e + 1, f = i === r;
+        return /* @__PURE__ */ c(
           K,
           {
-            id: `${a}${i}`,
-            "aria-controls": `${g}${i}`,
-            isActive: n,
+            id: `${u}${i}`,
+            "aria-controls": `${A}${i}`,
+            isActive: f,
             "data-page": i,
-            onClick: A(i),
+            onClick: L(i),
             role: "tab",
             type: "button",
-            "aria-selected": n,
-            onKeyDown: L,
-            tabIndex: n ? 0 : -1,
+            "aria-selected": f,
+            onKeyDown: g,
+            tabIndex: f ? 0 : -1,
+            "aria-label": `${n == null ? void 0 : n["aria-label"]} ${i} 이동, 현재 ${r}`,
             ...h,
-            color: m
+            color: b
           },
           e
         );

package/Tooltip/Tooltip.cjs

@@ -24,4 +24,4 @@
   ${({theme:{typography:t}})=>({fontSize:t.b4R.size,fontWeight:t.b4R.weight,lineHeight:t.b4R.lineHeight,letterSpacing:t.b4R.letterSpacing,"& svg:not(.tooltip-closer)":{width:24,height:24}})};
 
   ${({theme:{palette:{brand:t,grey:r}},placement:m,color:e,offset:c,arrowOffset:d})=>{let o={};const n=(c==null?void 0:c.x)||0,l=(c==null?void 0:c.y)||0,p=(d==null?void 0:d.x)||0,a=(d==null?void 0:d.y)||0;switch(m){case"bottom-left":o={top:`calc(-12px + ${l}px)`,left:`calc(-6px + ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",left:`calc(12px + ${p}px)`,borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-center":o={top:`calc(-12px + ${l}px)`,left:"50%",transform:`translate(calc(-50% + ${n}px), -100%)`,"&:after":{content:'""',position:"absolute",top:"100%",left:`calc(50% + ${p}px)`,transform:"translateX(-50%)",borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-right":o={top:`calc(-12px + ${l}px)`,right:`calc(-6px - ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",right:`calc(12px - ${p}px)`,borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"left-top":o={top:`calc(-6px + ${l}px)`,left:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",top:`calc(12px + ${a}px)`,right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-middle":o={top:"50%",left:`calc(100% + 12px + ${n}px)`,transform:`translateY(calc(-50% + ${l}px))`,"&:after":{content:'""',position:"absolute",top:`calc(50% + ${a}px)`,right:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-bottom":o={bottom:`calc(-6px - ${l}px)`,left:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",bottom:`calc(12px - ${a}px)`,right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"top-left":o={left:`calc(-6px + ${n}px)`,transform:`translate(0, calc(12px + ${l}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(12px + ${p}px)`,borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-center":o={right:"50%",transform:`translate(calc(50% + ${n}px), calc(12px + ${l}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(50% + ${p}px)`,transform:"translateX(-50%)",borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-right":o={right:`calc(-6px - ${n}px)`,transform:`translate(0, calc(12px + ${l}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",right:`calc(12px - ${p}px)`,borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"right-top":o={top:`calc(-6px + ${l}px)`,right:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",top:`calc(12px + ${a}px)`,left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-middle":o={top:"50%",right:`calc(100% + 12px + ${n}px)`,transform:`translateY(calc(-50% + ${l}px))`,"&:after":{content:'""',position:"absolute",top:`calc(50% + ${a}px)`,left:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-bottom":o={bottom:`calc(-6px - ${l}px)`,right:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",bottom:`calc(12px - ${a}px)`,left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break}return o}};
-`,G=s.forwardRef(function({children:r,placement:m="bottom-center",color:e="primary",title:c,body:d,closer:o,endAdornment:n,inlineCSS:l,open:p=!1,onClose:a,wrapperProps:g,offset:E,arrowOffset:K,...x},Y){const C=s.useId(),D=s.useId(),_=s.useId(),{isKeyboardMode:k}=N.default(),S=s.useRef(null),R=s.useRef(null),T=s.useRef(!0),[z,M]=s.useState(!1),I=(x==null?void 0:x.id)||C,B=(x==null?void 0:x.titleId)||D,L=(x==null?void 0:x.bodyId)||_,v=i=>{(i.key==="Enter"||i.key===" ")&&(a==null||a(i))};return s.useEffect(()=>{R.current&&R.current.getBoundingClientRect().width>=276&&M(!0)},[p]),s.useEffect(()=>{const i=b=>{b.key==="Escape"&&p&&(b.stopPropagation(),a==null||a(b))};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[p,a]),s.useEffect(()=>{var b,h,f;if(T.current){T.current=!1;return}if(p){const $=(b=S.current)==null?void 0:b.querySelector('.tooltip-closer[role="button"]');if($&&k&&$.focus(),!$){const w=(h=S.current)==null?void 0:h.querySelector('[role="button"]');w&&k&&w.focus()}return}const i=(f=S.current)==null?void 0:f.querySelector('[role="button"]');i&&k&&i.focus()},[p,k]),u.jsxs(V,{ref:S,open:p,...g,css:g==null?void 0:g.inlineCSS,children:[s.Children.map(r,i=>{if(!s.isValidElement(i))return i;const b=h=>{var f,$;(h.key==="Enter"||h.key===" ")&&(($=(f=i.props)==null?void 0:f.onClick)==null||$.call(f,h))};return s.cloneElement(i,{inlineCSS:{cursor:"pointer","&:active":{outline:"none"},...i.props.inlineCSS},role:"button",tabIndex:0,"aria-hidden":!1,"aria-expanded":p,"aria-haspopup":"dialog","aria-controls":I,focusable:!0,onKeyDown:b,...i.props})}),u.jsxs(W,{id:I,className:"tooltip",role:"dialog","aria-modal":"true","aria-labelledby":c?B:void 0,"aria-describedby":d?L:void 0,ref:Y,placement:m,color:e,offset:E,arrowOffset:K,...x,css:l,children:[c&&u.jsxs(y.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[u.jsx(X.default,{id:B,variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:c}),o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:v,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]}),d&&u.jsxs(y.default,{id:L,alignItems:"center",gap:2,ref:R,style:z?{width:"276px",whiteSpace:"wrap"}:{},children:[d,n&&u.jsx(y.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:n}),!c&&o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:v,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]})]})]})});exports.default=G;
+`,G=s.forwardRef(function({children:r,placement:m="bottom-center",color:e="primary",title:c,body:d,closer:o,endAdornment:n,inlineCSS:l,open:p=!1,onClose:a,wrapperProps:g,offset:E,arrowOffset:K,...x},Y){const C=s.useId(),D=s.useId(),_=s.useId(),{isKeyboardMode:k}=N.default(),S=s.useRef(null),R=s.useRef(null),I=s.useRef(!0),[z,M]=s.useState(!1),B=(x==null?void 0:x.id)||C,L=(x==null?void 0:x.titleId)||D,T=(x==null?void 0:x.bodyId)||_,w=i=>{(i.key==="Enter"||i.key===" ")&&(a==null||a(i))};return s.useEffect(()=>{R.current&&R.current.getBoundingClientRect().width>=276&&M(!0)},[p]),s.useEffect(()=>{const i=b=>{b.key==="Escape"&&p&&(b.stopPropagation(),a==null||a(b))};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[p,a]),s.useEffect(()=>{var b,h,f;if(I.current){I.current=!1;return}if(p){const $=(b=S.current)==null?void 0:b.querySelector('.tooltip-closer[role="button"]');if($&&k&&$.focus(),!$){const v=(h=S.current)==null?void 0:h.querySelector('[role="button"]');v&&k&&v.focus()}return}const i=(f=S.current)==null?void 0:f.querySelector('[role="button"]');i&&k&&i.focus()},[p,k]),u.jsxs(V,{ref:S,open:p,...g,css:g==null?void 0:g.inlineCSS,children:[s.Children.map(r,i=>{if(!s.isValidElement(i))return i;const b=h=>{var f,$;(h.key==="Enter"||h.key===" ")&&(($=(f=i.props)==null?void 0:f.onClick)==null||$.call(f,h))};return s.cloneElement(i,{inlineCSS:{cursor:"pointer","&:active":{outline:"none"},...i.props.inlineCSS},role:"button",tabIndex:0,"aria-hidden":!1,"aria-expanded":p,"aria-haspopup":"dialog","aria-controls":B,focusable:!0,onKeyDown:b,...i.props})}),u.jsxs(W,{id:B,className:"tooltip",role:"dialog","aria-modal":"true","aria-labelledby":c?L:T,"aria-describedby":d?T:void 0,ref:Y,placement:m,color:e,offset:E,arrowOffset:K,...x,css:l,children:[c&&u.jsxs(y.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[u.jsx(X.default,{id:L,variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:c}),o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:w,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]}),d&&u.jsxs(y.default,{id:T,alignItems:"center",gap:2,ref:R,style:z?{width:"276px",whiteSpace:"wrap"}:{},children:[d,n&&u.jsx(y.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:n}),!c&&o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:w,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]})]})]})});exports.default=G;

package/Tooltip/Tooltip.es.js

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as h } from "@emotion/react/jsx-runtime";
-import { forwardRef as V, useId as T, useRef as B, useState as W, useEffect as L, Children as G, isValidElement as J, cloneElement as Q } from "react";
+import { forwardRef as V, useId as B, useRef as L, useState as W, useEffect as w, Children as G, isValidElement as J, cloneElement as Q } from "react";
 import $ from "../Flexbox/Flexbox.es.js";
 import C from "../Icon/Icon.es.js";
 import U from "../Typography/Typography.es.js";
@@ -285,20 +285,20 @@ const _ = z.div`
   arrowOffset: j,
   ...d
 }, X) {
-  const q = T(), N = T(), F = T(), { isKeyboardMode: g } = Z(), k = B(null), R = B(null), w = B(!0), [H, M] = W(!1), I = (d == null ? void 0 : d.id) || q, v = (d == null ? void 0 : d.titleId) || N, E = (d == null ? void 0 : d.bodyId) || F, K = (i) => {
+  const q = B(), N = B(), F = B(), { isKeyboardMode: g } = Z(), k = L(null), R = L(null), I = L(!0), [H, M] = W(!1), v = (d == null ? void 0 : d.id) || q, E = (d == null ? void 0 : d.titleId) || N, T = (d == null ? void 0 : d.bodyId) || F, K = (i) => {
     (i.key === "Enter" || i.key === " ") && (a == null || a(i));
   };
-  return L(() => {
+  return w(() => {
     R.current && R.current.getBoundingClientRect().width >= 276 && M(!0);
-  }, [l]), L(() => {
+  }, [l]), w(() => {
     const i = (x) => {
       x.key === "Escape" && l && (x.stopPropagation(), a == null || a(x));
     };
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [l, a]), L(() => {
+  }, [l, a]), w(() => {
     var x, f, b;
-    if (w.current) {
-      w.current = !1;
+    if (I.current) {
+      I.current = !1;
       return;
     }
     if (l) {
@@ -341,7 +341,7 @@ const _ = z.div`
             "aria-hidden": !1,
             "aria-expanded": l,
             "aria-haspopup": "dialog",
-            "aria-controls": I,
+            "aria-controls": v,
             focusable: !0,
             onKeyDown: x,
             ...i.props
@@ -350,12 +350,12 @@ const _ = z.div`
         /* @__PURE__ */ S(
           A,
           {
-            id: I,
+            id: v,
             className: "tooltip",
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": s ? v : void 0,
-            "aria-describedby": c ? E : void 0,
+            "aria-labelledby": s ? E : T,
+            "aria-describedby": c ? T : void 0,
             ref: X,
             placement: m,
             color: e,
@@ -368,7 +368,7 @@ const _ = z.div`
                 /* @__PURE__ */ h(
                   U,
                   {
-                    id: v,
+                    id: E,
                     variant: "h5B",
                     color: e === "primary" ? "grey.100" : "grey.white",
                     children: s
@@ -399,7 +399,7 @@ const _ = z.div`
               c && /* @__PURE__ */ S(
                 $,
                 {
-                  id: E,
+                  id: T,
                   alignItems: "center",
                   gap: 2,
                   ref: R,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",