@dotss/ui 0.0.8 → 0.0.11

package/Accordion/Accordion.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),l=require("react"),z=require("../Icon/Icon.cjs"),A=require("../utils/convertNumberToCSSValue.cjs"),D=require("@emotion/styled"),L=e=>e&&e.__esModule?e:{default:e},s=L(D),N=s.default.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: ${({theme:{palette:{grey:e,background:n}},disabled:t})=>t?n.secondary:e.white};
+
+  ${({fullWidth:e})=>e?{width:"100%"}:null};
+`,O=s.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(24px + (${({theme:{spacing:e}})=>e.content(4)}px * 2));
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+
+  ${({theme:{palette:{grey:e},typography:{h5M:n}},disabled:t})=>({fontSize:n.size,fontWeight:n.weight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing,color:t?e[50]:e[70],"& svg":{color:t?e[50]:e[70]}})};
+`,V=s.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  padding: ${({theme:{spacing:e}})=>e.content(4)}px;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  ${({fullWidth:e})=>e?{width:"100%"}:null};
+`,F=s.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${({expand:e})=>e?"180deg":"0deg"});
+`,G=s.default.div`
+  transition: height 0.2s;
+  overflow: hidden;
+`,J=s.default.div`
+  padding: ${({theme:{spacing:e}})=>`0 ${e.content(4)}px ${e.content(4)}px ${e.content(4)}px`};
+`,K=l.forwardRef(function({children:n,expand:t=!1,title:I,endAdornment:E,onChange:g,disabled:u=!1,inlineCSS:b,fullWidth:p=!1,headerProps:d,headerButtonProps:f,panelProps:m,...H},R){const _=l.useId(),q=l.useId(),y=(f==null?void 0:f.id)||_,$=(m==null?void 0:m.id)||q,[c,j]=l.useState(t),[h,x]=l.useState(t?"auto":"0px"),i=l.useRef(null),C=r=>{u||(typeof g=="function"?g(r):j(a=>!a))};return l.useEffect(()=>{j(t)},[t]),l.useEffect(()=>{var S,v;let r;const a=A.default(((S=i.current)==null?void 0:S.scrollHeight)||0),T=!c&&h==="auto",k=!c&&h!=="auto";return(v=i.current)!=null&&v.parentElement&&(c?(i.current.parentElement.style.height=a,r=setTimeout(()=>{var w;x("auto"),(w=i.current)!=null&&w.parentElement&&(i.current.parentElement.style.height="auto")},200)):T?(i.current.parentElement.style.height=a,x(a)):k&&(i.current.parentElement.style.height="0px",x("0px"))),()=>{r&&clearTimeout(r)}},[c,h]),o.jsxs(N,{ref:R,disabled:u,fullWidth:p,...H,css:b,children:[o.jsx(O,{as:(d==null?void 0:d.tag)||"h3",onClick:C,disabled:u,...d,children:o.jsxs(V,{id:y,"aria-disabled":u,"aria-expanded":c,"aria-controls":$,fullWidth:p,...f,children:[I,o.jsx(F,{expand:c,children:E||o.jsx(z.default,{name:"ChevronDownLine",size:"xSmall"})})]})}),o.jsx(G,{children:o.jsx(J,{role:"region",id:$,"aria-labelledby":y,ref:i,...m,children:n})})]})});exports.default=K;

package/{dist/Accordion → Accordion}/Accordion.d.ts

@@ -9,6 +9,8 @@ export interface AccordionProps extends Omit<GeneralComponentProps<HTMLAttribute
     fullWidth?: boolean;
     disabled?: boolean;
     headerProps?: PolymorphicComponentProps<ElementType>;
+    headerButtonProps?: HTMLAttributes<HTMLButtonElement>;
+    panelProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Accordion;

package/Accordion/Accordion.es.js

@@ -0,0 +1,136 @@
+import { jsxs as E, jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as V, useId as S, useState as H, useRef as q, useEffect as b } from "react";
+import F from "../Icon/Icon.es.js";
+import G from "../utils/convertNumberToCSSValue.es.js";
+import c from "@emotion/styled";
+const J = c.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: ${({
+  theme: {
+    palette: { grey: t, background: n }
+  },
+  disabled: e
+}) => e ? n.secondary : t.white};
+
+  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
+`, K = c.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(24px + (${({ theme: { spacing: t } }) => t.content(4)}px * 2));
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+
+  ${({
+  theme: {
+    palette: { grey: t },
+    typography: { h5M: n }
+  },
+  disabled: e
+}) => ({
+  fontSize: n.size,
+  fontWeight: n.weight,
+  lineHeight: n.lineHeight,
+  letterSpacing: n.letterSpacing,
+  color: e ? t[50] : t[70],
+  "& svg": {
+    color: e ? t[50] : t[70]
+  }
+})};
+`, O = c.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  padding: ${({ theme: { spacing: t } }) => t.content(4)}px;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
+`, Q = c.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${({ expand: t }) => t ? "180deg" : "0deg"});
+`, U = c.div`
+  transition: height 0.2s;
+  overflow: hidden;
+`, W = c.div`
+  padding: ${({ theme: { spacing: t } }) => `0 ${t.content(4)}px ${t.content(4)}px ${t.content(4)}px`};
+`, M = V(function({
+  children: n,
+  expand: e = !1,
+  title: j,
+  endAdornment: C,
+  onChange: g,
+  disabled: s = !1,
+  inlineCSS: R,
+  fullWidth: p = !1,
+  headerProps: d,
+  headerButtonProps: f,
+  panelProps: u,
+  ...T
+}, k) {
+  const z = S(), A = S(), x = (f == null ? void 0 : f.id) || z, y = (u == null ? void 0 : u.id) || A, [o, $] = H(e), [m, h] = H(e ? "auto" : "0px"), i = q(null), D = (l) => {
+    s || (typeof g == "function" ? g(l) : $((r) => !r));
+  };
+  return b(() => {
+    $(e);
+  }, [e]), b(() => {
+    var w, I;
+    let l;
+    const r = G(
+      ((w = i.current) == null ? void 0 : w.scrollHeight) || 0
+    ), L = !o && m === "auto", N = !o && m !== "auto";
+    return (I = i.current) != null && I.parentElement && (o ? (i.current.parentElement.style.height = r, l = setTimeout(() => {
+      var v;
+      h("auto"), (v = i.current) != null && v.parentElement && (i.current.parentElement.style.height = "auto");
+    }, 200)) : L ? (i.current.parentElement.style.height = r, h(r)) : N && (i.current.parentElement.style.height = "0px", h("0px"))), () => {
+      l && clearTimeout(l);
+    };
+  }, [o, m]), /* @__PURE__ */ E(J, { ref: k, disabled: s, fullWidth: p, ...T, css: R, children: [
+    /* @__PURE__ */ a(
+      K,
+      {
+        as: (d == null ? void 0 : d.tag) || "h3",
+        onClick: D,
+        disabled: s,
+        ...d,
+        children: /* @__PURE__ */ E(
+          O,
+          {
+            id: x,
+            "aria-disabled": s,
+            "aria-expanded": o,
+            "aria-controls": y,
+            fullWidth: p,
+            ...f,
+            children: [
+              j,
+              /* @__PURE__ */ a(Q, { expand: o, children: C || /* @__PURE__ */ a(F, { name: "ChevronDownLine", size: "xSmall" }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ a(U, { children: /* @__PURE__ */ a(
+      W,
+      {
+        role: "region",
+        id: y,
+        "aria-labelledby": x,
+        ref: i,
+        ...u,
+        children: n
+      }
+    ) })
+  ] });
+});
+export {
+  M as default
+};

package/Autocomplete/Autocomplete.cjs

@@ -0,0 +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;

package/{dist/Autocomplete → Autocomplete}/Autocomplete.d.ts

@@ -10,7 +10,7 @@ export interface Option {
 }
 export interface AutocompleteProps {
     inputValue: string;
-    onInputChange: (inputValue: string, e: SyntheticEvent) => void;
+    onInputChange: (inputValue: string, e?: SyntheticEvent) => void;
     menuValue: Option['value'];
     onMenuChange: (menuValue: string, e: SyntheticEvent, option: Option | null) => void;
     options: Array<Option>;

package/Autocomplete/Autocomplete.es.js

@@ -0,0 +1,265 @@
+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 G from "../Flexbox/Flexbox.es.js";
+import ne from "../Icon/Icon.es.js";
+import ie 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 W from "../utils/getSibling/getSibling.es.js";
+const S = 100, ge = ee(function({
+  inputValue: n,
+  onInputChange: u,
+  menuValue: T,
+  onMenuChange: y,
+  inputProps: J,
+  minInputLengthForMenu: q = 0,
+  options: E = [],
+  isLoading: g = !1,
+  renderOptions: D,
+  renderEmpty: F,
+  filterOptions: $,
+  getOptionLabel: h
+}, Q) {
+  const O = P(null), f = P(null), N = te(), { palette: R } = ae();
+  re(Q, () => 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(() => {
+        u("");
+      }, S);
+      return;
+    }
+    if (k && T) {
+      const e = x.find((l) => l.value === T);
+      if (e) {
+        const l = h ? h(e) : e.label;
+        v(!1), setTimeout(() => {
+          u(l);
+        });
+        return;
+      }
+    }
+    v((e) => !e);
+  }, X = (e) => {
+    e.target.value.length > 0 ? v(!0) : y("", e, null), u(e.target.value, e);
+  }, Y = () => {
+    w && v(!0);
+  }, Z = (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);
+    if (h) {
+      i && setTimeout(() => {
+        u(h(i), l), y(e.toString(), l, i);
+      }, S);
+      return;
+    }
+    setTimeout(() => {
+      u(l.target.textContent || "", l), y(e.toString(), l, i || null);
+    }, S);
+  }, M = (e) => {
+    var l, i, c, a, I, b, z;
+    if (!r.current) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), e.stopPropagation(), r.current = !0;
+        const t = (l = f.current) == null ? void 0 : l.querySelector('li[role="option"]');
+        if (!d)
+          t && (m(t.id), t.scrollIntoView({ block: "end" }));
+        else {
+          const o = (i = f.current) == null ? void 0 : i.querySelector(
+            `#${CSS.escape(d)}`
+          );
+          if (!o) {
+            r.current = !1;
+            return;
+          }
+          const s = W(o, "next", { skipDisabled: !0 });
+          s && s.id && (m(s.id), s.scrollIntoView({ block: "end" })), s || (m(t.id), t.scrollIntoView({ block: "end" }));
+        }
+        setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "ArrowUp") {
+        if (e.preventDefault(), e.stopPropagation(), r.current = !0, !d) {
+          r.current = !1;
+          return;
+        }
+        const t = (c = f.current) == null ? void 0 : c.querySelector(
+          `#${CSS.escape(d)}`
+        );
+        if (!t) {
+          r.current = !1;
+          return;
+        }
+        const o = W(t, "prev", { skipDisabled: !0 });
+        if (o && o.id && (m(o.id), o.scrollIntoView({ block: "end" })), !o) {
+          const s = (a = f.current) == null ? void 0 : a.querySelector(
+            'li[role="option"]:last-child'
+          );
+          s && (m(s.id), s.scrollIntoView({ block: "end" }));
+        }
+        setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "Enter") {
+        if (e.preventDefault(), e.stopPropagation(), r.current = !0, !d) {
+          r.current = !1;
+          return;
+        }
+        const t = (I = f.current) == null ? void 0 : I.querySelector(
+          `#${CSS.escape(d)}`
+        );
+        if (!t) {
+          r.current = !1;
+          return;
+        }
+        const o = x.find(
+          (s) => s.value === t.dataset.value
+        );
+        v(!1), setTimeout(h && o ? () => {
+          u(h(o), e), y(t.dataset.value || "", e, o);
+        } : () => {
+          u(t.textContent || "", e), y(t.dataset.value || "", e, o || null);
+        }, S), setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "Home") {
+        e.preventDefault(), e.stopPropagation(), r.current = !0;
+        const t = (b = f.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 = (z = f.current) == null ? void 0 : z.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, j(), setTimeout(() => {
+        r.current = !1;
+      }, 0));
+    }
+  }, B = (e) => {
+    v(!1), setTimeout(() => {
+      u("", e), y("", e, null);
+    }, S);
+  }, L = (e) => {
+    (e.key === "Enter" || e.key === " ") && B(e);
+  };
+  return le(() => {
+    k || m(void 0);
+  }, [k]), /* @__PURE__ */ C(G, { ref: O, inlineCSS: { position: "relative" }, children: [
+    /* @__PURE__ */ p(
+      se,
+      {
+        value: n,
+        onChange: X,
+        onFocus: Y,
+        onKeyDown: M,
+        fullWidth: !0,
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": k,
+        "aria-autocomplete": "list",
+        "aria-controls": N,
+        "aria-activedescendant": d,
+        "aria-busy": g,
+        "aria-haspopup": "listbox",
+        endAdornment: n ? /* @__PURE__ */ p(
+          ne,
+          {
+            name: "InvalidFill",
+            color: "grey.50",
+            size: "medium",
+            role: "button",
+            onClick: B,
+            onKeyDown: L,
+            tabIndex: 0,
+            "aria-hidden": !1,
+            focusable: !0,
+            "aria-label": "지우기",
+            inlineCSS: { cursor: "pointer" }
+          }
+        ) : null,
+        inlineCSS: { "& svg": { flexShrink: 0 } },
+        ...J
+      }
+    ),
+    /* @__PURE__ */ C(
+      ie,
+      {
+        id: N,
+        value: T,
+        ref: f,
+        anchorRef: O,
+        open: k && n.length >= q,
+        onClose: j,
+        onChange: Z,
+        transitionDuration: S,
+        disablePadding: !w,
+        children: [
+          g && /* @__PURE__ */ p(A, { value: "LOADING", disabled: !0, children: /* @__PURE__ */ p(G, { justifyContent: "center", children: /* @__PURE__ */ p(oe, { 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") {
+              const b = D(e, l, x);
+              return U(b) ? _(b, {
+                id: c,
+                key: e.value,
+                role: "option",
+                "aria-selected": a,
+                "data-value": e.value,
+                inlineCSS: {
+                  border: a ? `2px solid ${R.grey[100]}` : "2px solid transparent"
+                },
+                ...b.props
+              }) : b;
+            }
+            if (!(n && !e.label.includes(n)) && w)
+              return /* @__PURE__ */ p(
+                A,
+                {
+                  id: c,
+                  value: e.value,
+                  role: "option",
+                  "aria-selected": a,
+                  "data-value": e.value,
+                  inlineCSS: {
+                    border: a ? `2px solid ${R.grey[100]}` : "2px solid transparent"
+                  },
+                  ...e == null ? void 0 : e.menuBlockProps,
+                  children: n && !I ? /* @__PURE__ */ C(V, { children: [
+                    e.label.slice(0, i),
+                    /* @__PURE__ */ p(ce, { tag: "span", variant: "h5B", color: "primary", children: e.label.slice(i, i + n.length) }),
+                    e.label.slice(i + n.length)
+                  ] }) : e.label
+                },
+                e.value
+              );
+          }),
+          !g && !K && (F ? (() => {
+            const e = F(n);
+            return U(e) ? _(e, {
+              ...e.props,
+              disabled: !0
+            }) : e;
+          })() : /* @__PURE__ */ p(A, { value: "NO_OPTION", disabled: !0, children: "검색 결과가 없어요." }))
+        ]
+      }
+    )
+  ] });
+});
+export {
+  ge as default
+};

package/BottomSheet/BottomSheet.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),r=require("react"),K=require("../Backdrop/Backdrop.cjs"),U=require("../Flexbox/Flexbox.cjs"),z=require("../hooks/useFocusBoundary/useFocusBoundary.cjs"),G=require("@emotion/styled"),J=e=>e&&e.__esModule?e:{default:e},f=J(G),N=f.default.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  cursor: ${({isDragging:e})=>e?"grabbing":"default"};
+  overflow: hidden;
+`,Q=f.default.div`
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  margin-top: ${({theme:{spacing:e}})=>`calc(var(--status-bar-height, 0px) + ${e.content(10)}px)`};
+  overflow-y: auto;
+  background-color: ${({theme:{palette:{grey:e}}})=>e.white};
+  border-radius: 16px 16px 0 0;
+  box-shadow: ${({theme:{elevation:e}})=>e[4]};
+  transition: transform ${({transitionDuration:e})=>e}ms;
+  transform: translate3d(0, ${({open:e})=>e?0:"100%"}, 0);
+`,V=f.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({theme:{spacing:e}})=>e.content(3)}px
+    ${({theme:{spacing:e}})=>e.content(4)}px;
+  cursor: ${({isDragging:e})=>e?"grabbing":"grab"};
+`,X=f.default.div`
+  width: 32px;
+  height: 4px;
+  border-radius: 100px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[60]};
+  cursor: ${({isDragging:e})=>e?"grabbing":"grab"};
+`,Z=r.forwardRef(function({children:$,open:n,onClose:o,transitionDuration:i=200,inlineCSS:w,enableDragCloseHandler:k,backdropProps:R,systemNavigationBarColor:j="#FFFFFF",hideSystemNavigationBar:D=!1,disableFocusBoundary:q=!1,returnFocus:E=!0,initialFocusId:F,..._},B){var v,T,S,M;const[Y,m]=r.useState(!1),[a,h]=r.useState(!1),l=r.useRef(null),c=r.useRef(),g=r.useRef(0),u=r.useRef(0);z.default({ref:l,active:n,delay:i,disabled:q,returnFocus:E,initialFocusId:F});const O=((T=(v=l.current)==null?void 0:v.querySelector('[id^="bottom-sheet-title"]'))==null?void 0:T.getAttribute("id"))||void 0,A=((M=(S=l.current)==null?void 0:S.querySelector('[id^="bottom-sheet-text"]'))==null?void 0:M.getAttribute("id"))||void 0,C=t=>t.stopPropagation(),I=t=>{h(!1),a&&t.stopPropagation()},p=t=>()=>{h(!0),g.current=t},b=(t,d)=>()=>{a&&(u.current=t-g.current,!(u.current<0)&&(d.currentTarget.style.transitionDuration="0ms",d.currentTarget.style.transform=`translate3d(0, ${u.current}px, 0)`))},x=t=>{u.current>=20&&typeof o=="function"?(t.currentTarget.style.transitionDuration=`${i}ms`,t.currentTarget.style.transform="translate3d(0, 100%, 0)",o()):t.currentTarget.removeAttribute("style"),g.current=0,u.current=0,h(!1)},y=t=>{a&&t.currentTarget.removeAttribute("style")},P=t=>p(t.clientY)(),H=t=>b(t.clientY,t)(),L=t=>p(t.touches[0].clientY)(),W=t=>b(t.touches[0].clientY,t)();return r.useEffect(()=>{n?(c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{m(!0)},100)):m(!1)},[n]),r.useEffect(()=>{const t=d=>{d.key==="Escape"&&n&&o&&o()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[n,o]),r.useEffect(()=>()=>{c.current&&clearTimeout(c.current)},[]),s.jsx(K.default,{open:n,onClose:o,transitionDuration:i,fullScreen:!0,...R,children:s.jsx(N,{ref:l,isDragging:a,onClick:I,children:s.jsxs(Q,{ref:B,open:Y,transitionDuration:i,onClick:C,onMouseMove:H,onMouseUp:x,onMouseOut:y,onTouchMove:W,onTouchEnd:x,onTouchCancel:y,role:"dialog","aria-modal":"true","aria-labelledby":O,"aria-describedby":A,..._,css:w,children:[k&&s.jsx(V,{isDragging:a,onMouseDown:P,onTouchStart:L,children:s.jsx(X,{isDragging:a})}),$,!D&&s.jsx(U.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:j}})]})})})});exports.default=Z;

package/{dist/BottomSheet → BottomSheet}/BottomSheet.d.ts

@@ -10,6 +10,9 @@ export interface BottomSheetProps extends GeneralComponentProps<HTMLAttributes<H
     backdropProps?: BackdropProps;
     systemNavigationBarColor?: string;
     hideSystemNavigationBar?: boolean;
+    disableFocusBoundary?: boolean;
+    returnFocus?: boolean;
+    initialFocusId?: string;
 }
 declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BottomSheet;

package/BottomSheet/BottomSheet.es.js

@@ -0,0 +1,149 @@
+import { jsx as i, jsxs as G } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useState as k, useRef as d, useEffect as g } from "react";
+import N from "../Backdrop/Backdrop.es.js";
+import Q from "../Flexbox/Flexbox.es.js";
+import V from "../hooks/useFocusBoundary/useFocusBoundary.es.js";
+import f from "@emotion/styled";
+const X = f.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ isDragging: t }) => t ? "grabbing" : "default"};
+  overflow: hidden;
+`, Z = f.div`
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  margin-top: ${({ theme: { spacing: t } }) => `calc(var(--status-bar-height, 0px) + ${t.content(10)}px)`};
+  overflow-y: auto;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => t.white};
+  border-radius: 16px 16px 0 0;
+  box-shadow: ${({ theme: { elevation: t } }) => t[4]};
+  transition: transform ${({ transitionDuration: t }) => t}ms;
+  transform: translate3d(0, ${({ open: t }) => t ? 0 : "100%"}, 0);
+`, _ = f.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme: { spacing: t } }) => t.content(3)}px
+    ${({ theme: { spacing: t } }) => t.content(4)}px;
+  cursor: ${({ isDragging: t }) => t ? "grabbing" : "grab"};
+`, ee = f.div`
+  width: 32px;
+  height: 4px;
+  border-radius: 100px;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => t[60]};
+  cursor: ${({ isDragging: t }) => t ? "grabbing" : "grab"};
+`, ie = J(function({
+  children: M,
+  open: r,
+  onClose: n,
+  transitionDuration: s = 200,
+  inlineCSS: D,
+  enableDragCloseHandler: F,
+  backdropProps: B,
+  systemNavigationBarColor: E = "#FFFFFF",
+  hideSystemNavigationBar: R = !1,
+  disableFocusBoundary: Y = !1,
+  returnFocus: j = !0,
+  initialFocusId: A,
+  ...C
+}, I) {
+  var T, S, $, w;
+  const [O, p] = k(!1), [o, h] = k(!1), l = d(null), a = d(), m = d(0), c = d(0);
+  V({
+    ref: l,
+    active: r,
+    delay: s,
+    disabled: Y,
+    returnFocus: j,
+    initialFocusId: A
+  });
+  const q = ((S = (T = l.current) == null ? void 0 : T.querySelector('[id^="bottom-sheet-title"]')) == null ? void 0 : S.getAttribute("id")) || void 0, H = ((w = ($ = l.current) == null ? void 0 : $.querySelector('[id^="bottom-sheet-text"]')) == null ? void 0 : w.getAttribute("id")) || void 0, L = (e) => e.stopPropagation(), P = (e) => {
+    h(!1), o && e.stopPropagation();
+  }, b = (e) => () => {
+    h(!0), m.current = e;
+  }, x = (e, u) => () => {
+    o && (c.current = e - m.current, !(c.current < 0) && (u.currentTarget.style.transitionDuration = "0ms", u.currentTarget.style.transform = `translate3d(0, ${c.current}px, 0)`));
+  }, y = (e) => {
+    c.current >= 20 && typeof n == "function" ? (e.currentTarget.style.transitionDuration = `${s}ms`, e.currentTarget.style.transform = "translate3d(0, 100%, 0)", n()) : e.currentTarget.removeAttribute("style"), m.current = 0, c.current = 0, h(!1);
+  }, v = (e) => {
+    o && e.currentTarget.removeAttribute("style");
+  }, W = (e) => b(e.clientY)(), K = (e) => x(e.clientY, e)(), U = (e) => b(e.touches[0].clientY)(), z = (e) => x(e.touches[0].clientY, e)();
+  return g(() => {
+    r ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+      p(!0);
+    }, 100)) : p(!1);
+  }, [r]), g(() => {
+    const e = (u) => {
+      u.key === "Escape" && r && n && n();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [r, n]), g(() => () => {
+    a.current && clearTimeout(a.current);
+  }, []), /* @__PURE__ */ i(
+    N,
+    {
+      open: r,
+      onClose: n,
+      transitionDuration: s,
+      fullScreen: !0,
+      ...B,
+      children: /* @__PURE__ */ i(X, { ref: l, isDragging: o, onClick: P, children: /* @__PURE__ */ G(
+        Z,
+        {
+          ref: I,
+          open: O,
+          transitionDuration: s,
+          onClick: L,
+          onMouseMove: K,
+          onMouseUp: y,
+          onMouseOut: v,
+          onTouchMove: z,
+          onTouchEnd: y,
+          onTouchCancel: v,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": q,
+          "aria-describedby": H,
+          ...C,
+          css: D,
+          children: [
+            F && /* @__PURE__ */ i(
+              _,
+              {
+                isDragging: o,
+                onMouseDown: W,
+                onTouchStart: U,
+                children: /* @__PURE__ */ i(ee, { isDragging: o })
+              }
+            ),
+            M,
+            !R && /* @__PURE__ */ i(
+              Q,
+              {
+                inlineCSS: {
+                  minHeight: "var(--system-navigation-bar-height, 0px)",
+                  backgroundColor: E
+                }
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+});
+export {
+  ie as default
+};