@dotss/ui 1.0.5 → 1.0.7

package/Autocomplete/Autocomplete.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),n=require("react"),X=require("../CircularProgressIndicator/CircularProgressIndicator.cjs"),B=require("../Flexbox/Flexbox.cjs"),Y=require("../Icon/Icon.cjs"),Z=require("../Menu/Menu.cjs"),w=require("../Menu/MenuBlock/MenuBlock.cjs");require("../Menu/MenuButton/MenuButton.cjs");const L=require("../TextField/TextField.cjs"),V=require("../Typography/Typography.cjs"),ee=require("../core/useTheme.cjs"),z=require("../utils/getSibling/getSibling.cjs"),x=100,te=n.forwardRef(function({inputValue:o,onInputChange:f,menuValue:T,onMenuChange:y,inputProps:H,minInputLengthForMenu:P=0,options:C=[],isLoading:q=!1,renderOptions:O,renderEmpty:R,filterOptions:E,getOptionLabel:h},U){const D=n.useRef(null),v=n.useRef(null),A=n.useId(),{palette:F}=ee.default();n.useImperativeHandle(U,()=>D.current);const[k,S]=n.useState(!1),[p,m]=n.useState(void 0),r=n.useRef(!1),g=E?E(C):C.filter(e=>e.label.includes(o)),$=g.length>0,j=o.length>=P,N=()=>{if(k&&!T){S(!1),setTimeout(()=>{f("")},x);return}if(k&&T){const e=g.find(l=>l.value===T);if(e){const l=h?h(e):e.label;S(!1),setTimeout(()=>{f(l)});return}}S(e=>!e)},G=e=>{e.target.value.length>0?S(!0):y("",e,null),f(e.target.value,e)},M=()=>{j&&S(!0)},W=(e,l)=>{var u;if(e===void 0||!l||!((u=l==null?void 0:l.target)!=null&&u.textContent))return;const i=g.find(d=>d.value===e);if(h){i&&setTimeout(()=>{f(h(i),l),y(e.toString(),l,i)},x);return}setTimeout(()=>{f(l.target.textContent||"",l),y(e.toString(),l,i||null)},x)},J=e=>{var l,i,u,d,I,b,_;if(!r.current){if(e.key==="ArrowDown"){e.preventDefault(),e.stopPropagation(),r.current=!0;const t=(l=v.current)==null?void 0:l.querySelector('li[role="option"]');if(!p)t&&(m(t.id),t.scrollIntoView({block:"end"}));else{const s=(i=v.current)==null?void 0:i.querySelector(`#${CSS.escape(p)}`);if(!s){r.current=!1;return}const c=z.default(s,"next",{skipDisabled:!0});c&&c.id&&(m(c.id),c.scrollIntoView({block:"end"})),c||(m(t.id),t.scrollIntoView({block:"end"}))}setTimeout(()=>{r.current=!1},0)}if(e.key==="ArrowUp"){if(e.preventDefault(),e.stopPropagation(),r.current=!0,!p){r.current=!1;return}const t=(u=v.current)==null?void 0:u.querySelector(`#${CSS.escape(p)}`);if(!t){r.current=!1;return}const s=z.default(t,"prev",{skipDisabled:!0});if(s&&s.id&&(m(s.id),s.scrollIntoView({block:"end"})),!s){const c=(d=v.current)==null?void 0:d.querySelector('li[role="option"]:last-child');c&&(m(c.id),c.scrollIntoView({block:"end"}))}setTimeout(()=>{r.current=!1},0)}if(e.key==="Enter"){if(e.preventDefault(),e.stopPropagation(),r.current=!0,!p){r.current=!1;return}const t=(I=v.current)==null?void 0:I.querySelector(`#${CSS.escape(p)}`);if(!t){r.current=!1;return}const s=g.find(c=>c.value===t.dataset.value);S(!1),setTimeout(h&&s?()=>{f(h(s),e),y(t.dataset.value||"",e,s)}:()=>{f(t.textContent||"",e),y(t.dataset.value||"",e,s||null)},x),setTimeout(()=>{r.current=!1},0)}if(e.key==="Home"){e.preventDefault(),e.stopPropagation(),r.current=!0;const t=(b=v.current)==null?void 0:b.querySelector('li[role="option"]');t&&(m(t.id),t.scrollIntoView({block:"start"})),setTimeout(()=>{r.current=!1},0)}if(e.key==="End"){e.preventDefault(),e.stopPropagation(),r.current=!0;const t=(_=v.current)==null?void 0:_.querySelector('li[role="option"]:last-child');t&&(m(t.id),t.scrollIntoView({block:"end"})),setTimeout(()=>{r.current=!1},0)}e.key==="Escape"&&(e.preventDefault(),e.stopPropagation(),r.current=!0,N(),setTimeout(()=>{r.current=!1},0))}},K=e=>{S(!1),setTimeout(()=>{f("",e),y("",e,null)},x)},Q=e=>{(e.key==="Enter"||e.key===" ")&&K(e)};return n.useEffect(()=>{k||m(void 0)},[k]),a.jsxs(B.default,{ref:D,inlineCSS:{position:"relative"},children:[a.jsx(L.default,{value:o,onChange:G,onFocus:M,onKeyDown:J,fullWidth:!0,autoComplete:"off",role:"combobox","aria-expanded":k,"aria-autocomplete":"list","aria-controls":A,"aria-activedescendant":p,"aria-busy":q,"aria-haspopup":"listbox",endAdornment:o?a.jsx(Y.default,{name:"InvalidFill",color:"grey.50",size:"medium",role:"button",onClick:K,onKeyDown:Q,tabIndex:0,"aria-hidden":!1,focusable:!0,"aria-label":"지우기",inlineCSS:{cursor:"pointer"}}):null,inlineCSS:{"& svg":{flexShrink:0}},...H}),a.jsxs(Z.default,{id:A,value:T,ref:v,anchorRef:D,open:k&&o.length>=P,onClose:N,onChange:W,transitionDuration:x,disablePadding:!j,children:[q&&a.jsx(w.default,{value:"LOADING",disabled:!0,children:a.jsx(B.default,{justifyContent:"center",children:a.jsx(X.default,{size:"small",loop:!0})})}),!q&&$&&g.map((e,l)=>{const i=e.label.indexOf(o),u=`menu-option-${e.value}-${e.label}`,d=p===u,I=e.value===T;if(O&&typeof O=="function"){const b=O(e,l,g);return n.isValidElement(b)?n.cloneElement(b,{id:u,key:e.value,role:"option","aria-selected":d,"data-value":e.value,inlineCSS:{border:d?`2px solid ${F.grey[100]}`:"2px solid transparent"},...b.props}):b}if(!(o&&!e.label.includes(o))&&j)return a.jsx(w.default,{id:u,value:e.value,role:"option","aria-selected":d,"data-value":e.value,inlineCSS:{border:d?`2px solid ${F.grey[100]}`:"2px solid transparent"},...e==null?void 0:e.menuBlockProps,children:o&&!I?a.jsxs(a.Fragment,{children:[e.label.slice(0,i),a.jsx(V.default,{tag:"span",variant:"h5B",color:"primary",children:e.label.slice(i,i+o.length)}),e.label.slice(i+o.length)]}):e.label},e.value)}),!q&&!$&&(R?(()=>{const e=R(o);return n.isValidElement(e)?n.cloneElement(e,{...e.props,disabled:!0}):e})():a.jsx(w.default,{value:"NO_OPTION",disabled:!0,children:"검색 결과가 없어요."}))]})]})});exports.default=te;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),n=require("react"),Y=require("../CircularProgressIndicator/CircularProgressIndicator.cjs"),B=require("../Flexbox/Flexbox.cjs"),Z=require("../Icon/Icon.cjs"),L=require("../Menu/Menu.cjs"),w=require("../Menu/MenuBlock/MenuBlock.cjs");require("../Menu/MenuButton/MenuButton.cjs");const V=require("../TextField/TextField.cjs"),ee=require("../Typography/Typography.cjs"),te=require("../core/useTheme.cjs"),z=require("../utils/getSibling/getSibling.cjs"),x=100,re=n.forwardRef(function({inputValue:o,onInputChange:f,menuValue:T,menuProps:H,onMenuChange:y,inputProps:U,minInputLengthForMenu:P=0,options:C=[],isLoading:q=!1,renderOptions:O,renderEmpty:R,filterOptions:E,getOptionLabel:h},G){const D=n.useRef(null),v=n.useRef(null),A=n.useId(),{palette:F}=te.default();n.useImperativeHandle(G,()=>D.current);const[k,S]=n.useState(!1),[p,m]=n.useState(void 0),r=n.useRef(!1),g=E?E(C):C.filter(e=>e.label.includes(o)),$=g.length>0,j=o.length>=P,N=()=>{if(k&&!T){S(!1),setTimeout(()=>{f("")},x);return}if(k&&T){const e=g.find(l=>l.value===T);if(e){const l=h?h(e):e.label;S(!1),setTimeout(()=>{f(l)});return}}S(e=>!e)},M=e=>{e.target.value.length>0?S(!0):y("",e,null),f(e.target.value,e)},W=()=>{j&&S(!0)},J=(e,l)=>{var u;if(e===void 0||!l||!((u=l==null?void 0:l.target)!=null&&u.textContent))return;const i=g.find(d=>d.value===e);if(h){i&&setTimeout(()=>{f(h(i),l),y(e.toString(),l,i)},x);return}setTimeout(()=>{f(l.target.textContent||"",l),y(e.toString(),l,i||null)},x)},Q=e=>{var l,i,u,d,I,b,_;if(!r.current){if(e.key==="ArrowDown"){e.preventDefault(),e.stopPropagation(),r.current=!0;const t=(l=v.current)==null?void 0:l.querySelector('li[role="option"]');if(!p)t&&(m(t.id),t.scrollIntoView({block:"end"}));else{const s=(i=v.current)==null?void 0:i.querySelector(`#${CSS.escape(p)}`);if(!s){r.current=!1;return}const c=z.default(s,"next",{skipDisabled:!0});c&&c.id&&(m(c.id),c.scrollIntoView({block:"end"})),c||(m(t.id),t.scrollIntoView({block:"end"}))}setTimeout(()=>{r.current=!1},0)}if(e.key==="ArrowUp"){if(e.preventDefault(),e.stopPropagation(),r.current=!0,!p){r.current=!1;return}const t=(u=v.current)==null?void 0:u.querySelector(`#${CSS.escape(p)}`);if(!t){r.current=!1;return}const s=z.default(t,"prev",{skipDisabled:!0});if(s&&s.id&&(m(s.id),s.scrollIntoView({block:"end"})),!s){const c=(d=v.current)==null?void 0:d.querySelector('li[role="option"]:last-child');c&&(m(c.id),c.scrollIntoView({block:"end"}))}setTimeout(()=>{r.current=!1},0)}if(e.key==="Enter"){if(e.preventDefault(),e.stopPropagation(),r.current=!0,!p){r.current=!1;return}const t=(I=v.current)==null?void 0:I.querySelector(`#${CSS.escape(p)}`);if(!t){r.current=!1;return}const s=g.find(c=>c.value===t.dataset.value);S(!1),setTimeout(h&&s?()=>{f(h(s),e),y(t.dataset.value||"",e,s)}:()=>{f(t.textContent||"",e),y(t.dataset.value||"",e,s||null)},x),setTimeout(()=>{r.current=!1},0)}if(e.key==="Home"){e.preventDefault(),e.stopPropagation(),r.current=!0;const t=(b=v.current)==null?void 0:b.querySelector('li[role="option"]');t&&(m(t.id),t.scrollIntoView({block:"start"})),setTimeout(()=>{r.current=!1},0)}if(e.key==="End"){e.preventDefault(),e.stopPropagation(),r.current=!0;const t=(_=v.current)==null?void 0:_.querySelector('li[role="option"]:last-child');t&&(m(t.id),t.scrollIntoView({block:"end"})),setTimeout(()=>{r.current=!1},0)}e.key==="Escape"&&(e.preventDefault(),e.stopPropagation(),r.current=!0,N(),setTimeout(()=>{r.current=!1},0))}},K=e=>{S(!1),setTimeout(()=>{f("",e),y("",e,null)},x)},X=e=>{(e.key==="Enter"||e.key===" ")&&K(e)};return n.useEffect(()=>{k||m(void 0)},[k]),a.jsxs(B.default,{ref:D,inlineCSS:{position:"relative"},children:[a.jsx(V.default,{value:o,onChange:M,onFocus:W,onKeyDown:Q,fullWidth:!0,autoComplete:"off",role:"combobox","aria-expanded":k,"aria-autocomplete":"list","aria-controls":A,"aria-activedescendant":p,"aria-busy":q,"aria-haspopup":"listbox",endAdornment:o?a.jsx(Z.default,{name:"InvalidFill",color:"grey.50",size:"medium",role:"button",onClick:K,onKeyDown:X,tabIndex:0,"aria-hidden":!1,focusable:!0,"aria-label":"지우기",inlineCSS:{cursor:"pointer"}}):null,inlineCSS:{"& svg":{flexShrink:0}},...U}),a.jsxs(L.default,{id:A,value:T,ref:v,open:k&&o.length>=P,onClose:N,onChange:J,transitionDuration:x,disablePadding:!j,...H,anchorRef:D,children:[q&&a.jsx(w.default,{value:"LOADING",disabled:!0,children:a.jsx(B.default,{justifyContent:"center",children:a.jsx(Y.default,{size:"small",loop:!0})})}),!q&&$&&g.map((e,l)=>{const i=e.label.indexOf(o),u=`menu-option-${e.value}-${e.label}`,d=p===u,I=e.value===T;if(O&&typeof O=="function"){const b=O(e,l,g);return n.isValidElement(b)?n.cloneElement(b,{id:u,key:e.value,role:"option","aria-selected":d,"data-value":e.value,inlineCSS:{border:d?`2px solid ${F.grey[100]}`:"2px solid transparent"},...b.props}):b}if(!(o&&!e.label.includes(o))&&j)return a.jsx(w.default,{id:u,value:e.value,role:"option","aria-selected":d,"data-value":e.value,inlineCSS:{border:d?`2px solid ${F.grey[100]}`:"2px solid transparent"},...e==null?void 0:e.menuBlockProps,children:o&&!I?a.jsxs(a.Fragment,{children:[e.label.slice(0,i),a.jsx(ee.default,{tag:"span",variant:"h5B",color:"primary",children:e.label.slice(i,i+o.length)}),e.label.slice(i+o.length)]}):e.label},e.value)}),!q&&!$&&(R?(()=>{const e=R(o);return n.isValidElement(e)?n.cloneElement(e,{...e.props,disabled:!0}):e})():a.jsx(w.default,{value:"NO_OPTION",disabled:!0,children:"검색 결과가 없어요."}))]})]})});exports.default=re;

package/Autocomplete/Autocomplete.d.ts

@@ -16,7 +16,7 @@ export interface AutocompleteProps {
     options: Array<Option>;
     minInputLengthForMenu?: number;
     inputProps?: TextFieldProps;
-    menuProps?: MenuProps;
+    menuProps?: Omit<MenuProps, 'anchorRef'>;
     isLoading?: boolean;
     renderOptions?: (option: Option, index: number, options: AutocompleteProps['options']) => ReactNode;
     renderEmpty?: (searchText: string) => ReactNode;

package/Autocomplete/Autocomplete.es.js

@@ -1,21 +1,22 @@
-import { jsxs as C, jsx as p, Fragment as V } from "@emotion/react/jsx-runtime";
-import { forwardRef as ee, useRef as P, useId as te, useImperativeHandle as re, useState as H, useEffect as le, isValidElement as U, cloneElement as _ } from "react";
-import oe from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
+import { jsxs as C, jsx as p, Fragment as ee } from "@emotion/react/jsx-runtime";
+import { forwardRef as te, useRef as P, useId as re, useImperativeHandle as le, useState as H, useEffect as oe, isValidElement as U, cloneElement as _ } from "react";
+import ne from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
 import G from "../Flexbox/Flexbox.es.js";
-import ne from "../Icon/Icon.es.js";
-import ie from "../Menu/Menu.es.js";
+import ie from "../Icon/Icon.es.js";
+import se from "../Menu/Menu.es.js";
 import A from "../Menu/MenuBlock/MenuBlock.es.js";
 import "../Menu/MenuButton/MenuButton.es.js";
-import se from "../TextField/TextField.es.js";
-import ce from "../Typography/Typography.es.js";
-import ae from "../core/useTheme.es.js";
+import ce from "../TextField/TextField.es.js";
+import ae from "../Typography/Typography.es.js";
+import ue from "../core/useTheme.es.js";
 import W from "../utils/getSibling/getSibling.es.js";
-const S = 100, ge = ee(function({
+const S = 100, Ie = te(function({
   inputValue: n,
   onInputChange: u,
   menuValue: T,
+  menuProps: J,
   onMenuChange: y,
-  inputProps: J,
+  inputProps: Q,
   minInputLengthForMenu: q = 0,
   options: E = [],
   isLoading: g = !1,
@@ -23,9 +24,9 @@ const S = 100, ge = ee(function({
   renderEmpty: F,
   filterOptions: $,
   getOptionLabel: h
-}, Q) {
-  const O = P(null), f = P(null), N = te(), { palette: R } = ae();
-  re(Q, () => O.current);
+}, X) {
+  const O = P(null), f = P(null), N = re(), { palette: R } = ue();
+  le(X, () => O.current);
   const [k, v] = H(!1), [d, m] = H(void 0), r = P(!1), x = $ ? $(E) : E.filter((e) => e.label.includes(n)), K = x.length > 0, w = n.length >= q, j = () => {
     if (k && !T) {
       v(!1), setTimeout(() => {
@@ -44,11 +45,11 @@ const S = 100, ge = ee(function({
       }
     }
     v((e) => !e);
-  }, X = (e) => {
+  }, Y = (e) => {
     e.target.value.length > 0 ? v(!0) : y("", e, null), u(e.target.value, e);
-  }, Y = () => {
+  }, Z = () => {
     w && v(!0);
-  }, Z = (e, l) => {
+  }, M = (e, l) => {
     var c;
     if (e === void 0 || !l || !((c = l == null ? void 0 : l.target) != null && c.textContent)) return;
     const i = x.find((a) => a.value === e);
@@ -61,7 +62,7 @@ const S = 100, ge = ee(function({
     setTimeout(() => {
       u(l.target.textContent || "", l), y(e.toString(), l, i || null);
     }, S);
-  }, M = (e) => {
+  }, L = (e) => {
     var l, i, c, a, I, b, z;
     if (!r.current) {
       if (e.key === "ArrowDown") {
@@ -154,19 +155,19 @@ const S = 100, ge = ee(function({
     v(!1), setTimeout(() => {
       u("", e), y("", e, null);
     }, S);
-  }, L = (e) => {
+  }, V = (e) => {
     (e.key === "Enter" || e.key === " ") && B(e);
   };
-  return le(() => {
+  return oe(() => {
     k || m(void 0);
   }, [k]), /* @__PURE__ */ C(G, { ref: O, inlineCSS: { position: "relative" }, children: [
     /* @__PURE__ */ p(
-      se,
+      ce,
       {
         value: n,
-        onChange: X,
-        onFocus: Y,
-        onKeyDown: M,
+        onChange: Y,
+        onFocus: Z,
+        onKeyDown: L,
         fullWidth: !0,
         autoComplete: "off",
         role: "combobox",
@@ -177,14 +178,14 @@ const S = 100, ge = ee(function({
         "aria-busy": g,
         "aria-haspopup": "listbox",
         endAdornment: n ? /* @__PURE__ */ p(
-          ne,
+          ie,
           {
             name: "InvalidFill",
             color: "grey.50",
             size: "medium",
             role: "button",
             onClick: B,
-            onKeyDown: L,
+            onKeyDown: V,
             tabIndex: 0,
             "aria-hidden": !1,
             focusable: !0,
@@ -193,23 +194,24 @@ const S = 100, ge = ee(function({
           }
         ) : null,
         inlineCSS: { "& svg": { flexShrink: 0 } },
-        ...J
+        ...Q
       }
     ),
     /* @__PURE__ */ C(
-      ie,
+      se,
       {
         id: N,
         value: T,
         ref: f,
-        anchorRef: O,
         open: k && n.length >= q,
         onClose: j,
-        onChange: Z,
+        onChange: M,
         transitionDuration: S,
         disablePadding: !w,
+        ...J,
+        anchorRef: O,
         children: [
-          g && /* @__PURE__ */ p(A, { value: "LOADING", disabled: !0, children: /* @__PURE__ */ p(G, { justifyContent: "center", children: /* @__PURE__ */ p(oe, { size: "small", loop: !0 }) }) }),
+          g && /* @__PURE__ */ p(A, { value: "LOADING", disabled: !0, children: /* @__PURE__ */ p(G, { justifyContent: "center", children: /* @__PURE__ */ p(ne, { size: "small", loop: !0 }) }) }),
           !g && K && x.map((e, l) => {
             const i = e.label.indexOf(n), c = `menu-option-${e.value}-${e.label}`, a = d === c, I = e.value === T;
             if (D && typeof D == "function") {
@@ -239,9 +241,9 @@ const S = 100, ge = ee(function({
                     border: a ? `2px solid ${R.grey[100]}` : "2px solid transparent"
                   },
                   ...e == null ? void 0 : e.menuBlockProps,
-                  children: n && !I ? /* @__PURE__ */ C(V, { children: [
+                  children: n && !I ? /* @__PURE__ */ C(ee, { children: [
                     e.label.slice(0, i),
-                    /* @__PURE__ */ p(ce, { tag: "span", variant: "h5B", color: "primary", children: e.label.slice(i, i + n.length) }),
+                    /* @__PURE__ */ p(ae, { tag: "span", variant: "h5B", color: "primary", children: e.label.slice(i, i + n.length) }),
                     e.label.slice(i + n.length)
                   ] }) : e.label
                 },
@@ -261,5 +263,5 @@ const S = 100, ge = ee(function({
   ] });
 });
 export {
-  ge as default
+  Ie as default
 };

package/Menu/Menu.cjs

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

package/Menu/Menu.d.ts

@@ -14,6 +14,7 @@ export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTM
     placement?: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center';
     disablePadding?: boolean;
     disableClickOutside?: boolean;
+    disableAutoPositioning?: boolean;
     children?: ReactElement<typeof MenuBlock> | ReactElement<typeof MenuBlock>[] | ReactNode;
     width?: number;
     fitToAnchorWidth?: boolean;

package/Menu/Menu.es.js

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

package/Menu/Menu.stories.d.ts

@@ -12,6 +12,11 @@ declare const meta: {
                 disable: true;
             };
         };
+        menuProps: {
+            control: {
+                disable: true;
+            };
+        };
     };
     tags: string[];
 };
@@ -22,10 +27,10 @@ export declare const StartAdornment: Story;
 export declare const EndAdornment: Story;
 export declare const BothAdornment: Story;
 export declare const VariableWidth: Story;
-export declare const MaxHeight: Story;
-export declare const MaxWidth: Story;
+export declare const Width: Story;
 export declare const ShowDivider: Story;
 export declare const Placement: Story;
 export declare const Custom: Story;
 export declare const FitToAnchorWidth: Story;
+export declare const DisableAutoPositioning: Story;
 export declare const WithScreenReaderSupport: Story;

package/Menu/MenuBlock/MenuBlock.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),w=require("react"),y=require("../../Icon/Icon.cjs"),v=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),S=require("@emotion/styled"),j=e=>e&&e.__esModule?e:{default:e},u=j(S),$=u.default.li`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),y=require("react"),k=require("../../Icon/Icon.cjs"),v=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),w=require("@emotion/styled"),b=e=>e&&e.__esModule?e:{default:e},s=b(w),j=s.default.li`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
@@ -10,18 +10,16 @@
   & svg {
     width: 20px;
     height: 20px;
-    color: ${({theme:{palette:{brand:e,grey:n}},selected:t,disabled:r})=>t?e.primary.main:r?n[30]:"inherit"};
+    color: ${({theme:{palette:{brand:e,grey:r}},selected:t,disabled:i})=>t?e.primary.main:i?r[30]:"inherit"};
   }
 
-  ${({ellipsis:e})=>e?{maxHeight:"40px"}:{}};
-
-  ${({theme:{palette:{brand:e,grey:n}},selected:t,isHoverPossible:r})=>r?{"&:hover:not([disabled]), &:focus:not([disabled])":{backgroundColor:t?e.primary.bg:n[10]}}:{}}
-`,k=u.default.div`
+  ${({theme:{palette:{brand:e,grey:r}},selected:t,isHoverPossible:i})=>i?{"&:hover:not([disabled]), &:focus:not([disabled])":{backgroundColor:t?e.primary.bg:r[10]}}:{}}
+`,S=s.default.div`
   flex-grow: 1;
 
-  ${({ellipsis:e})=>e?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}:{}};
+  ${({lineClamp:e})=>e?{display:"-webkit-box",overflow:"hidden",WebkitLineClamp:e,WebkitBoxOrient:"vertical"}:null}
 
-  ${({theme:{palette:{brand:e,grey:n},typography:{h5B:t,b4R:r}},selected:a,disabled:o})=>{let i={fontSize:r.size,fontWeight:r.weight,letterSpacing:r.letterSpacing,lineHeight:r.lineHeight};return a&&(i={fontSize:t.size,fontWeight:t.weight,letterSpacing:t.letterSpacing,lineHeight:t.lineHeight,color:e.primary.text}),o&&(i.color=n[30]),i}}}
-`,c=u.default.div`
+  ${({theme:{palette:{brand:e,grey:r},typography:{h5B:t,b4R:i}},selected:c,disabled:o})=>{let n={fontSize:i.size,fontWeight:i.weight,letterSpacing:i.letterSpacing,lineHeight:i.lineHeight};return c&&(n={fontSize:t.size,fontWeight:t.weight,letterSpacing:t.letterSpacing,lineHeight:t.lineHeight,color:e.primary.text}),o&&(n.color=r[30]),n}}}
+`,a=s.default.div`
   white-space: nowrap;
-`,H=w.forwardRef(function({children:n,startAdornment:t,endAdornment:r,inlineCSS:a,selected:o,disabled:i,value:d,onClick:s,ellipsis:p=!0,...h},g){const{isHoverPossible:x}=v.default(),m=f=>{f.stopPropagation(),!i&&typeof s=="function"&&s(f)};return l.jsxs($,{ref:g,selected:o,disabled:i,"data-value":d,isHoverPossible:x,onClick:m,ellipsis:p,role:"menuitem",...h,css:a,children:[t&&l.jsx(c,{children:t}),l.jsx(k,{selected:o,disabled:i,ellipsis:p,children:n}),!o&&r&&l.jsx(c,{children:r}),o&&l.jsx(c,{children:l.jsx(y.default,{name:"CheckLine",color:"primary"})})]})});exports.default=H;
+`,$=y.forwardRef(function({children:r,startAdornment:t,endAdornment:i,inlineCSS:c,selected:o,disabled:n,value:f,onClick:u,lineClamp:p=1,...h},g){const{isHoverPossible:x}=v.default(),m=d=>{d.stopPropagation(),!n&&typeof u=="function"&&u(d)};return l.jsxs(j,{ref:g,selected:o,disabled:n,"data-value":f,isHoverPossible:x,onClick:m,lineClamp:p,role:"menuitem",...h,css:c,children:[t&&l.jsx(a,{children:t}),l.jsx(S,{selected:o,disabled:n,lineClamp:p,children:r}),!o&&i&&l.jsx(a,{children:i}),o&&l.jsx(a,{children:l.jsx(k.default,{name:"CheckLine",color:"primary"})})]})});exports.default=$;

package/Menu/MenuBlock/MenuBlock.d.ts

@@ -7,8 +7,8 @@ export interface MenuBlockProps extends GeneralComponentProps<HTMLAttributes<HTM
     selected?: boolean;
     disabled?: boolean;
     value?: string | number;
-    ellipsis?: boolean;
     focused?: boolean;
+    lineClamp?: number;
 }
 declare const MenuBlock: import('react').ForwardRefExoticComponent<MenuBlockProps & import('react').RefAttributes<HTMLLIElement>>;
 export default MenuBlock;

package/Menu/MenuBlock/MenuBlock.es.js

@@ -1,9 +1,9 @@
 import { jsxs as x, jsx as l } from "@emotion/react/jsx-runtime";
-import { forwardRef as w } from "react";
-import y from "../../Icon/Icon.es.js";
-import k from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import c from "@emotion/styled";
-const v = c.li`
+import { forwardRef as k } from "react";
+import w from "../../Icon/Icon.es.js";
+import y from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import p from "@emotion/styled";
+const v = p.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
@@ -21,98 +21,95 @@ const v = c.li`
     height: 20px;
     color: ${({
   theme: {
-    palette: { brand: e, grey: i }
+    palette: { brand: e, grey: r }
   },
   selected: t,
-  disabled: r
-}) => t ? e.primary.main : r ? i[30] : "inherit"};
+  disabled: i
+}) => t ? e.primary.main : i ? r[30] : "inherit"};
   }
 
-  ${({ ellipsis: e }) => e ? {
-  maxHeight: "40px"
-} : {}};
-
   ${({
   theme: {
-    palette: { brand: e, grey: i }
+    palette: { brand: e, grey: r }
   },
   selected: t,
-  isHoverPossible: r
-}) => r ? {
+  isHoverPossible: i
+}) => i ? {
   "&:hover:not([disabled]), &:focus:not([disabled])": {
-    backgroundColor: t ? e.primary.bg : i[10]
+    backgroundColor: t ? e.primary.bg : r[10]
   }
 } : {}}
-`, $ = c.div`
+`, b = p.div`
   flex-grow: 1;
 
-  ${({ ellipsis: e }) => e ? {
+  ${({ lineClamp: e }) => e ? {
+  display: "-webkit-box",
   overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-} : {}};
+  WebkitLineClamp: e,
+  WebkitBoxOrient: "vertical"
+} : null}
 
   ${({
   theme: {
-    palette: { brand: e, grey: i },
-    typography: { h5B: t, b4R: r }
+    palette: { brand: e, grey: r },
+    typography: { h5B: t, b4R: i }
   },
-  selected: p,
+  selected: c,
   disabled: n
 }) => {
   let o = {
-    fontSize: r.size,
-    fontWeight: r.weight,
-    letterSpacing: r.letterSpacing,
-    lineHeight: r.lineHeight
+    fontSize: i.size,
+    fontWeight: i.weight,
+    letterSpacing: i.letterSpacing,
+    lineHeight: i.lineHeight
   };
-  return p && (o = {
+  return c && (o = {
     fontSize: t.size,
     fontWeight: t.weight,
     letterSpacing: t.letterSpacing,
     lineHeight: t.lineHeight,
     color: e.primary.text
-  }), n && (o.color = i[30]), o;
+  }), n && (o.color = r[30]), o;
 }}}
-`, a = c.div`
+`, a = p.div`
   white-space: nowrap;
-`, M = w(function({
-  children: i,
+`, j = k(function({
+  children: r,
   startAdornment: t,
-  endAdornment: r,
-  inlineCSS: p,
+  endAdornment: i,
+  inlineCSS: c,
   selected: n,
   disabled: o,
-  value: u,
-  onClick: h,
-  ellipsis: f = !0,
+  value: g,
+  onClick: s,
+  lineClamp: h = 1,
   ...m
-}, g) {
-  const { isHoverPossible: d } = k();
+}, u) {
+  const { isHoverPossible: d } = y();
   return /* @__PURE__ */ x(
     v,
     {
-      ref: g,
+      ref: u,
       selected: n,
       disabled: o,
-      "data-value": u,
+      "data-value": g,
       isHoverPossible: d,
-      onClick: (s) => {
-        s.stopPropagation(), !o && typeof h == "function" && h(s);
+      onClick: (f) => {
+        f.stopPropagation(), !o && typeof s == "function" && s(f);
       },
-      ellipsis: f,
+      lineClamp: h,
       role: "menuitem",
       ...m,
-      css: p,
+      css: c,
       children: [
         t && /* @__PURE__ */ l(a, { children: t }),
-        /* @__PURE__ */ l($, { selected: n, disabled: o, ellipsis: f, children: i }),
-        !n && r && /* @__PURE__ */ l(a, { children: r }),
-        n && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
+        /* @__PURE__ */ l(b, { selected: n, disabled: o, lineClamp: h, children: r }),
+        !n && i && /* @__PURE__ */ l(a, { children: i }),
+        n && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(w, { name: "CheckLine", color: "primary" }) })
       ]
     }
   );
 });
 export {
-  M as default
+  j as default
 };

package/TextField/TextField.cjs

@@ -1,35 +1,35 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),u=require("react"),b=require("../Icon/Icon.cjs"),O=require("@emotion/styled"),_=t=>t&&t.__esModule?t:{default:t},f=_(O),T=f.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),u=require("react"),b=require("../Icon/Icon.cjs"),_=require("@emotion/styled"),T=t=>t&&t.__esModule?t:{default:t},f=T(_),V=f.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
   ${({fullWidth:t})=>t?{width:"100%"}:null};
-`,V=f.default.div`
+`,M=f.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: ${({theme:{spacing:t}})=>t.content(2)}px;
   border: 1px solid transparent;
 
-  ${({theme:{palette:{green:t,grey:e,background:o,etc:n}},variant:g,helper:s})=>{let r={backgroundColor:e.white,borderColor:e[50],color:e[100]};switch(g){case"outlined":(s==null?void 0:s.severity)==="success"&&(r={...r,borderColor:`${t[70]} !important`}),(s==null?void 0:s.severity)==="error"&&(r={...r,borderColor:`${n.red} !important`});break;case"filled":r={backgroundColor:o.primary};break}return r}};
+  ${({theme:{palette:{green:t,grey:i,background:s,etc:o}},variant:g,helper:n})=>{let r={backgroundColor:i.white,borderColor:i[50],color:i[100]};switch(g){case"outlined":(n==null?void 0:n.severity)==="success"&&(r={...r,borderColor:`${t[70]} !important`}),(n==null?void 0:n.severity)==="error"&&(r={...r,borderColor:`${o.red} !important`});break;case"filled":r={backgroundColor:s.primary};break}return r}};
 
-  ${({theme:{spacing:t},size:e})=>{let o={maxHeight:48,padding:`${t.content(3)}px ${t.content(4)}px`,borderRadius:10};switch(e){case"2xLarge":o={maxHeight:80,padding:`${t.content(4)}px ${t.content(5)}px`,borderRadius:12,"& svg":{width:48,height:48}};break;case"xLarge":o={maxHeight:56,padding:t.content(4),borderRadius:12};break}return o}};
+  ${({theme:{spacing:t},size:i})=>{let s={maxHeight:48,padding:`${t.content(3)}px ${t.content(4)}px`,borderRadius:10};switch(i){case"2xLarge":s={maxHeight:80,padding:`${t.content(4)}px ${t.content(5)}px`,borderRadius:12,"& svg":{width:48,height:48}};break;case"xLarge":s={maxHeight:56,padding:t.content(4),borderRadius:12};break}return s}};
 
-  ${({theme:{palette:{brand:t}},variant:e,focus:o})=>e==="outlined"&&o?{borderColor:t.primary.line}:null};
+  ${({theme:{palette:{brand:t}},variant:i,focus:s})=>i==="outlined"&&s?{borderColor:t.primary.line}:null};
 
   ${({fullWidth:t})=>t?{width:"100%"}:null};
 
-  ${({theme:{palette:{grey:t}},variant:e,disabled:o})=>{if(!o)return null;let n={backgroundColor:t[10],borderColor:t[30]};switch(e){case"filled":n={backgroundColor:t[10]};break}return n}}
-`,M=f.default.input`
-  width: inherit;
+  ${({theme:{palette:{grey:t}},variant:i,disabled:s})=>{if(!s)return null;let o={backgroundColor:t[10],borderColor:t[30]};switch(i){case"filled":o={backgroundColor:t[10]};break}return o}}
+`,q=f.default.input`
+  width: 100%;
   flex-grow: 1;
   border: none;
   background-color: transparent;
   outline: 0;
 
-  ${({theme:{typography:{b2R:t,h0R:e}},inputSize:o})=>o==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
+  ${({theme:{typography:{b2R:t,h0R:i}},inputSize:s})=>s==="2xLarge"?{fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
 
   &::placeholder, &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder {
-    ${({theme:{palette:{grey:t}},variant:e})=>({color:t[50]})};
+    ${({theme:{palette:{grey:t}},variant:i})=>({color:t[50]})};
   }
 
   &:disabled {
@@ -44,20 +44,20 @@
     &[type='password']::-ms-reveal {
       display: none;
     }
-`,q=f.default.button`
+`,E=f.default.button`
   &:empty {
     display: none;
   }
-`,E=f.default.div`
+`,W=f.default.div`
   position: absolute;
   left: 0;
   bottom: ${({inputSize:t})=>t==="2xLarge"?"-26px":"-16px"};
   white-space: nowrap;
-  ${({theme:{typography:{c3R:t,b1R:e}},inputSize:o})=>o==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
+  ${({theme:{typography:{c3R:t,b1R:i}},inputSize:s})=>s==="2xLarge"?{fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
 
-  ${({theme:{palette:{etc:t,grey:e}},helper:o})=>{const n={color:e[100]};return(o==null?void 0:o.severity)==="error"?{color:t.red}:n}}
+  ${({theme:{palette:{etc:t,grey:i}},helper:s})=>{const o={color:i[100]};return(s==null?void 0:s.severity)==="error"?{color:t.red}:o}}
 
   &:empty {
     display: none;
   }
-`,W=u.forwardRef(function({type:e="text",variant:o="outlined",size:n="large",startAdornment:g,endAdornment:s,fullWidth:r,helper:i,disabled:x,inlineCSS:w,onFocus:y,onBlur:m,disablePasswordVisibility:S,helperProps:$,...j},k){const C=u.useId(),p=u.useId(),[H,v]=u.useState(!1),[d,I]=u.useState(!1),a=!S&&!s&&e==="password"&&(i==null?void 0:i.severity)!=="success",L=l=>{v(!0),typeof y=="function"&&y(l)},z=l=>{v(!1),typeof m=="function"&&m(l)},F=()=>I(l=>!l),h=()=>a&&d?"text":a&&!d?"password":e;return c.jsxs(T,{fullWidth:r,children:[c.jsxs(V,{variant:o,size:n,focus:H,fullWidth:r,helper:i,disabled:x,css:w,children:[g,c.jsx(M,{ref:k,id:C,type:h(),variant:o,inputSize:n,disabled:x,"aria-invalid":(i==null?void 0:i.severity)==="error","aria-describedby":i!=null&&i.message?p:void 0,...j,onFocus:L,onBlur:z}),s,!s&&(i==null?void 0:i.severity)==="success"&&c.jsx(b.default,{name:"CheckLine",color:"green.70","aria-label":"성공",role:"img"}),c.jsxs(q,{type:"button",tabIndex:a?0:-1,"aria-pressed":a?d:void 0,onClick:F,"aria-hidden":!a,"aria-label":a&&d?"비밀번호 표시됨":"비밀번호 숨김됨",children:[a&&d&&c.jsx(b.default,{name:"EyeVisibleLine","data-testid":"EyeVisibleLine",inlineCSS:{cursor:"pointer"}}),a&&!d&&c.jsx(b.default,{name:"EyeInvisibleLine","data-testid":"EyeInvisibleLine",inlineCSS:{cursor:"pointer"}})]})]}),c.jsx(E,{id:p,className:"textfield-helper","aria-live":(i==null?void 0:i.severity)==="error"?"assertive":"off",role:(i==null?void 0:i.severity)==="error"?"alert":"status",helper:i,inputSize:n,"data-testid":"helper",...$,children:i==null?void 0:i.message})]})});exports.default=W;
+`,B=u.forwardRef(function({type:i="text",variant:s="outlined",size:o="large",startAdornment:g,endAdornment:n,fullWidth:r,helper:e,disabled:x,inlineCSS:S,onFocus:y,onBlur:m,disablePasswordVisibility:p,helperProps:$,...j},k){const C=u.useId(),v=u.useId(),[H,w]=u.useState(!1),[d,I]=u.useState(!1),a=!p&&!n&&i==="password",L=l=>{w(!0),typeof y=="function"&&y(l)},z=l=>{w(!1),typeof m=="function"&&m(l)},F=()=>I(l=>!l),O=()=>a&&d?"text":a&&!d?"password":i;return c.jsxs(V,{fullWidth:r,children:[c.jsxs(M,{variant:s,size:o,focus:H,fullWidth:r,helper:e,disabled:x,css:S,children:[g,c.jsx(q,{ref:k,id:C,type:O(),variant:s,inputSize:o,disabled:x,"aria-invalid":(e==null?void 0:e.severity)==="error","aria-describedby":e!=null&&e.message?v:void 0,...j,onFocus:L,onBlur:z}),n,!n&&(e==null?void 0:e.severity)==="success"&&c.jsx(b.default,{name:"CheckLine",color:"green.70","aria-label":"성공",role:"img"}),c.jsxs(E,{type:"button",tabIndex:a?0:-1,"aria-pressed":a?d:void 0,onClick:F,"aria-hidden":!a,"aria-label":a&&d?"비밀번호 표시됨":"비밀번호 숨김됨",children:[a&&d&&(e==null?void 0:e.severity)!=="success"&&c.jsx(b.default,{name:"EyeVisibleLine","data-testid":"EyeVisibleLine",inlineCSS:{cursor:"pointer"}}),a&&!d&&(e==null?void 0:e.severity)!=="success"&&c.jsx(b.default,{name:"EyeInvisibleLine","data-testid":"EyeInvisibleLine",inlineCSS:{cursor:"pointer"}})]})]}),c.jsx(W,{id:v,className:"textfield-helper","aria-live":(e==null?void 0:e.severity)==="error"?"assertive":"off",role:(e==null?void 0:e.severity)==="error"?"alert":"status",helper:e,inputSize:o,"data-testid":"helper",...$,children:e==null?void 0:e.message})]})});exports.default=B;

package/TextField/TextField.es.js

@@ -1,13 +1,13 @@
 import { jsxs as g, jsx as l } from "@emotion/react/jsx-runtime";
-import { forwardRef as T, useId as v, useState as S } from "react";
+import { forwardRef as V, useId as w, useState as S } from "react";
 import b from "../Icon/Icon.es.js";
 import u from "@emotion/styled";
-const V = u.div`
+const E = u.div`
   position: relative;
   display: flex;
   flex-direction: column;
   ${({ fullWidth: t }) => t ? { width: "100%" } : null};
-`, E = u.div`
+`, W = u.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,42 +16,42 @@ const V = u.div`
 
   ${({
   theme: {
-    palette: { green: t, grey: e, background: o, etc: n }
+    palette: { green: t, grey: i, background: o, etc: n }
   },
   variant: f,
-  helper: r
+  helper: s
 }) => {
-  let s = {
-    backgroundColor: e.white,
-    borderColor: e[50],
-    color: e[100]
+  let r = {
+    backgroundColor: i.white,
+    borderColor: i[50],
+    color: i[100]
   };
   switch (f) {
     case "outlined":
-      (r == null ? void 0 : r.severity) === "success" && (s = {
-        ...s,
+      (s == null ? void 0 : s.severity) === "success" && (r = {
+        ...r,
         borderColor: `${t[70]} !important`
-      }), (r == null ? void 0 : r.severity) === "error" && (s = {
-        ...s,
+      }), (s == null ? void 0 : s.severity) === "error" && (r = {
+        ...r,
         borderColor: `${n.red} !important`
       });
       break;
     case "filled":
-      s = {
+      r = {
         backgroundColor: o.primary
       };
       break;
   }
-  return s;
+  return r;
 }};
 
-  ${({ theme: { spacing: t }, size: e }) => {
+  ${({ theme: { spacing: t }, size: i }) => {
   let o = {
     maxHeight: 48,
     padding: `${t.content(3)}px ${t.content(4)}px`,
     borderRadius: 10
   };
-  switch (e) {
+  switch (i) {
     case "2xLarge":
       o = {
         maxHeight: 80,
@@ -78,9 +78,9 @@ const V = u.div`
   theme: {
     palette: { brand: t }
   },
-  variant: e,
+  variant: i,
   focus: o
-}) => e === "outlined" && o ? {
+}) => i === "outlined" && o ? {
   borderColor: t.primary.line
 } : null};
 
@@ -90,7 +90,7 @@ const V = u.div`
   theme: {
     palette: { grey: t }
   },
-  variant: e,
+  variant: i,
   disabled: o
 }) => {
   if (!o) return null;
@@ -98,7 +98,7 @@ const V = u.div`
     backgroundColor: t[10],
     borderColor: t[30]
   };
-  switch (e) {
+  switch (i) {
     case "filled":
       n = {
         backgroundColor: t[10]
@@ -107,8 +107,8 @@ const V = u.div`
   }
   return n;
 }}
-`, W = u.input`
-  width: inherit;
+`, B = u.input`
+  width: 100%;
   flex-grow: 1;
   border: none;
   background-color: transparent;
@@ -116,14 +116,14 @@ const V = u.div`
 
   ${({
   theme: {
-    typography: { b2R: t, h0R: e }
+    typography: { b2R: t, h0R: i }
   },
   inputSize: o
 }) => o === "2xLarge" ? {
-  fontSize: e.size,
-  fontWeight: e.weight,
-  lineHeight: e.lineHeight,
-  letterSpacing: e.letterSpacing
+  fontSize: i.size,
+  fontWeight: i.weight,
+  lineHeight: i.lineHeight,
+  letterSpacing: i.letterSpacing
 } : {
   fontSize: t.size,
   fontWeight: t.weight,
@@ -136,7 +136,7 @@ const V = u.div`
   theme: {
     palette: { grey: t }
   },
-  variant: e
+  variant: i
 }) => ({
   color: t[50]
 })};
@@ -163,25 +163,25 @@ const V = u.div`
     &[type='password']::-ms-reveal {
       display: none;
     }
-`, B = u.button`
+`, M = u.button`
   &:empty {
     display: none;
   }
-`, M = u.div`
+`, P = u.div`
   position: absolute;
   left: 0;
   bottom: ${({ inputSize: t }) => t === "2xLarge" ? "-26px" : "-16px"};
   white-space: nowrap;
   ${({
   theme: {
-    typography: { c3R: t, b1R: e }
+    typography: { c3R: t, b1R: i }
   },
   inputSize: o
 }) => o === "2xLarge" ? {
-  fontSize: e.size,
-  fontWeight: e.weight,
-  lineHeight: e.lineHeight,
-  letterSpacing: e.letterSpacing
+  fontSize: i.size,
+  fontWeight: i.weight,
+  lineHeight: i.lineHeight,
+  letterSpacing: i.letterSpacing
 } : {
   fontSize: t.size,
   fontWeight: t.weight,
@@ -191,12 +191,12 @@ const V = u.div`
 
   ${({
   theme: {
-    palette: { etc: t, grey: e }
+    palette: { etc: t, grey: i }
   },
   helper: o
 }) => {
   const n = {
-    color: e[100]
+    color: i[100]
   };
   return (o == null ? void 0 : o.severity) === "error" ? {
     color: t.red
@@ -206,69 +206,69 @@ const V = u.div`
   &:empty {
     display: none;
   }
-`, J = T(function({
-  type: e = "text",
+`, J = V(function({
+  type: i = "text",
   variant: o = "outlined",
   size: n = "large",
   startAdornment: f,
-  endAdornment: r,
-  fullWidth: s,
-  helper: i,
+  endAdornment: s,
+  fullWidth: r,
+  helper: e,
   disabled: m,
   inlineCSS: $,
-  onFocus: x,
-  onBlur: y,
+  onFocus: y,
+  onBlur: x,
   disablePasswordVisibility: k,
   helperProps: C,
   ...H
 }, L) {
-  const j = v(), p = v(), [z, w] = S(!1), [c, I] = S(!1), a = !k && !r && e === "password" && (i == null ? void 0 : i.severity) !== "success", F = (d) => {
-    w(!0), typeof x == "function" && x(d);
-  }, h = (d) => {
-    w(!1), typeof y == "function" && y(d);
-  }, O = () => I((d) => !d);
-  return /* @__PURE__ */ g(V, { fullWidth: s, children: [
+  const j = w(), p = w(), [z, v] = S(!1), [c, I] = S(!1), a = !k && !s && i === "password", F = (d) => {
+    v(!0), typeof y == "function" && y(d);
+  }, O = (d) => {
+    v(!1), typeof x == "function" && x(d);
+  }, T = () => I((d) => !d);
+  return /* @__PURE__ */ g(E, { fullWidth: r, children: [
     /* @__PURE__ */ g(
-      E,
+      W,
       {
         variant: o,
         size: n,
         focus: z,
-        fullWidth: s,
-        helper: i,
+        fullWidth: r,
+        helper: e,
         disabled: m,
         css: $,
         children: [
           f,
           /* @__PURE__ */ l(
-            W,
+            B,
             {
               ref: L,
               id: j,
-              type: a && c ? "text" : a && !c ? "password" : e,
+              type: a && c ? "text" : a && !c ? "password" : i,
               variant: o,
               inputSize: n,
               disabled: m,
-              "aria-invalid": (i == null ? void 0 : i.severity) === "error",
-              "aria-describedby": i != null && i.message ? p : void 0,
+              "aria-invalid": (e == null ? void 0 : e.severity) === "error",
+              "aria-describedby": e != null && e.message ? p : void 0,
               ...H,
               onFocus: F,
-              onBlur: h
+              onBlur: O
             }
           ),
-          r,
-          !r && (i == null ? void 0 : i.severity) === "success" && /* @__PURE__ */ l(b, { name: "CheckLine", color: "green.70", "aria-label": "성공", role: "img" }),
+          s,
+          !s && (e == null ? void 0 : e.severity) === "success" && /* @__PURE__ */ l(b, { name: "CheckLine", color: "green.70", "aria-label": "성공", role: "img" }),
           /* @__PURE__ */ g(
-            B,
+            M,
             {
               type: "button",
               tabIndex: a ? 0 : -1,
               "aria-pressed": a ? c : void 0,
-              onClick: O,
+              onClick: T,
               "aria-hidden": !a,
               "aria-label": a && c ? "비밀번호 표시됨" : "비밀번호 숨김됨",
               children: [
-                a && c && /* @__PURE__ */ l(
+                a && c && (e == null ? void 0 : e.severity) !== "success" && /* @__PURE__ */ l(
                   b,
                   {
                     name: "EyeVisibleLine",
@@ -278,7 +278,7 @@ const V = u.div`
                     }
                   }
                 ),
-                a && !c && /* @__PURE__ */ l(
+                a && !c && (e == null ? void 0 : e.severity) !== "success" && /* @__PURE__ */ l(
                   b,
                   {
                     name: "EyeInvisibleLine",
@@ -295,17 +295,17 @@ const V = u.div`
       }
     ),
     /* @__PURE__ */ l(
-      M,
+      P,
       {
         id: p,
         className: "textfield-helper",
-        "aria-live": (i == null ? void 0 : i.severity) === "error" ? "assertive" : "off",
-        role: (i == null ? void 0 : i.severity) === "error" ? "alert" : "status",
-        helper: i,
+        "aria-live": (e == null ? void 0 : e.severity) === "error" ? "assertive" : "off",
+        role: (e == null ? void 0 : e.severity) === "error" ? "alert" : "status",
+        helper: e,
         inputSize: n,
         "data-testid": "helper",
         ...C,
-        children: i == null ? void 0 : i.message
+        children: e == null ? void 0 : e.message
       }
     )
   ] });

package/package.json

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