@dotss/ui 0.0.10 → 0.0.12

package/DatePicker/DatePicker.stories.d.ts

@@ -25,3 +25,4 @@ export declare const MultipleSelect: Story;
 export declare const MultipleMode: Story;
 export declare const PeriodMode: Story;
 export declare const EnableMonthSelect: Story;
+export declare const RenderEvent: Story;

package/DatePicker/EventDot/EventDot.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),r=require("@emotion/styled"),u=require("../../utils/getPaletteColor/getPaletteColor.cjs"),n=e=>e&&e.__esModule?e:{default:e},l=n(r),d=l.default.span`
+  width: 6px;
+  min-width: 6px;
+  height: 6px;
+  min-height: 6px;
+  border-radius: 50%;
+  background-color: ${({theme:e,color:t="grey.100"})=>u.default(t,{theme:e})};
+`;function i(e){return o.jsx(d,{...e})}exports.default=i;

package/DatePicker/EventDot/EventDot.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { Color, GeneralComponentProps } from '../../typings/component';
+
+export interface EventDotProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLSpanElement>, 'color'>> {
+    color: Color;
+}
+declare function EventDot(props: EventDotProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default EventDot;

package/DatePicker/EventDot/EventDot.es.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import e from "@emotion/styled";
+import i from "../../utils/getPaletteColor/getPaletteColor.es.js";
+const n = e.span`
+  width: 6px;
+  min-width: 6px;
+  height: 6px;
+  min-height: 6px;
+  border-radius: 50%;
+  background-color: ${({ theme: t, color: o = "grey.100" }) => i(o, {
+  theme: t
+})};
+`;
+function a(t) {
+  return /* @__PURE__ */ r(n, { ...t });
+}
+export {
+  a as default
+};

package/DatePicker/EventDot/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./EventDot.cjs");exports.default=e.default;

package/DatePicker/EventDot/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EventDot } from './EventDot';
+
+export default EventDot;

package/DatePicker/EventDot/index.es.js

@@ -0,0 +1,4 @@
+import o from "./EventDot.es.js";
+export {
+  o as default
+};

package/DatePicker/EventDotGroup/EventDotGroup.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),i=require("react"),a=require("@emotion/styled"),d=require("../EventDot/EventDot.cjs"),f=e=>e&&e.__esModule?e:{default:e},u=f(a),h=u.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(.5)}px;
+  max-height: 6px;
+`,p=u.default.span`
+  ${({theme:{palette:{grey:e},typography:t}})=>{const{size:o,weight:n,lineHeight:r,letterSpacing:s}=t.c5R;return{fontSize:o,fontWeight:n,lineHeight:r,letterSpacing:s,color:e[50]}}};
+`;function g({children:e,limit:t=4,...o}){const n=i.Children.toArray(e).filter(i.isValidElement).filter(c=>c.type===d.default),r=n.length,s=r>t;return l.jsxs(h,{...o,children:[i.Children.toArray(n).slice(0,t),s&&l.jsxs(p,{children:["+",r-t]})]})}exports.default=g;

package/DatePicker/EventDotGroup/EventDotGroup.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface EventGroupProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    limit?: number;
+}
+declare function EventGroup({ children, limit, ...props }: EventGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default EventGroup;

package/DatePicker/EventDotGroup/EventDotGroup.es.js

@@ -0,0 +1,39 @@
+import { jsxs as s } from "@emotion/react/jsx-runtime";
+import { Children as l, isValidElement as a } from "react";
+import c from "@emotion/styled";
+import m from "../EventDot/EventDot.es.js";
+const f = c.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(0.5)}px;
+  max-height: 6px;
+`, h = c.span`
+  ${({
+  theme: {
+    palette: { grey: t },
+    typography: e
+  }
+}) => {
+  const { size: r, weight: n, lineHeight: o, letterSpacing: i } = e.c5R;
+  return {
+    fontSize: r,
+    fontWeight: n,
+    lineHeight: o,
+    letterSpacing: i,
+    color: t[50]
+  };
+}};
+`;
+function y({ children: t, limit: e = 4, ...r }) {
+  const n = l.toArray(t).filter(a).filter((p) => p.type === m), o = n.length, i = o > e;
+  return /* @__PURE__ */ s(f, { ...r, children: [
+    l.toArray(n).slice(0, e),
+    i && /* @__PURE__ */ s(h, { children: [
+      "+",
+      o - e
+    ] })
+  ] });
+}
+export {
+  y as default
+};

package/DatePicker/EventDotGroup/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./EventDotGroup.cjs");exports.default=e.default;

package/DatePicker/EventDotGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EventDotGroup } from './EventDotGroup';
+
+export default EventDotGroup;

package/DatePicker/EventDotGroup/index.es.js

@@ -0,0 +1,4 @@
+import r from "./EventDotGroup.es.js";
+export {
+  r as default
+};

package/DatePicker/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DatePicker.cjs");exports.default=e.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DatePicker.cjs"),t=require("./EventDot/EventDot.cjs"),u=require("./EventDotGroup/EventDotGroup.cjs");exports.default=e.default;exports.EventDot=t.default;exports.EventDotGroup=u.default;

package/DatePicker/index.d.ts

@@ -1,4 +1,6 @@
 import { DateFormatter, DatePickerValue, DateValue, default as DatePicker } from './DatePicker';
 
 export type { DatePickerValue, DateValue, DateFormatter };
+export { default as EventDot } from './EventDot';
+export { default as EventDotGroup } from './EventDotGroup';
 export default DatePicker;

package/DatePicker/index.es.js

@@ -1,4 +1,8 @@
-import r from "./DatePicker.es.js";
+import e from "./DatePicker.es.js";
+import { default as a } from "./EventDot/EventDot.es.js";
+import { default as p } from "./EventDotGroup/EventDotGroup.es.js";
 export {
-  r as default
+  a as EventDot,
+  p as EventDotGroup,
+  e as default
 };

package/Dialog/Dialog.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),t=require("react"),I=require("../Backdrop/Backdrop.cjs"),b=require("../Flexbox/Flexbox.cjs"),M=require("../FocusBoundary/FocusBoundary.cjs"),O=require("@emotion/styled"),A=e=>e&&e.__esModule?e:{default:e},B=A(O),H=B.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),t=require("react"),O=require("../Backdrop/Backdrop.cjs"),b=require("../Flexbox/Flexbox.cjs"),A=require("../FocusBoundary/FocusBoundary.cjs"),B=require("@emotion/styled"),H=e=>e&&e.__esModule?e:{default:e},L=H(B),P=L.default.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -17,4 +17,4 @@
   ${({open:e})=>e?{transform:"translate3d(-50%, -50%, 0)"}:{transform:"translate3d(-50%, -50%, 0) scale(0.97)"}};
 
   ${({fullScreen:e})=>e?{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",borderRadius:0}:null}
-`,L=t.forwardRef(function({children:h,open:r,onClose:s,transitionDuration:l=200,fullWidth:x=!0,fullScreen:a=!1,maxWidth:p=320,maxHeight:y=438,inlineCSS:v,backdropProps:w,statusBarColor:k="transparent",systemNavigationBarColor:$="#FFFFFF",disableFocusBoundary:T=!1,hideStatusBar:q=!1,hideSystemNavigationBar:F=!1,...R},S){var c,f,m,g;const[j,u]=t.useState(!1),d=t.useRef(null),i=t.useRef(),_=n=>n.stopPropagation(),E=((f=(c=d.current)==null?void 0:c.querySelector('[id^="dialogTitle"]'))==null?void 0:f.getAttribute("id"))||"",C=((g=(m=d.current)==null?void 0:m.querySelector('[id^="dialogText"]'))==null?void 0:g.getAttribute("id"))||"";return t.useEffect(()=>{r?(i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{u(!0)},100)):u(!1)},[r]),t.useEffect(()=>{const n=D=>{D.key==="Escape"&&r&&s&&s()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r,s]),t.useEffect(()=>()=>{i.current&&clearTimeout(i.current)},[]),o.jsx(I.default,{ref:d,open:r,onClose:s,transitionDuration:l,centered:!a,fullScreen:a,...w,children:o.jsx(H,{ref:S,role:"dialog","aria-labelledby":E,"aria-describedby":C,open:j,transitionDuration:l,fullWidth:x,fullScreen:a,maxWidth:p,maxHeight:y,onClick:_,...R,css:v,children:o.jsxs(M.default,{active:r,disabled:T,inlineCSS:{flex:1,overflowY:"auto"},children:[a&&!q&&o.jsx(b.default,{inlineCSS:{minHeight:"var(--status-bar-height, 0px)",backgroundColor:k}}),h,a&&!F&&o.jsx(b.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:$}})]})})})});exports.default=L;
+`,K=t.forwardRef(function({children:h,open:r,onClose:s,transitionDuration:l=200,fullWidth:x=!0,fullScreen:a=!1,maxWidth:p=320,maxHeight:y=438,inlineCSS:v,backdropProps:w,statusBarColor:k="transparent",systemNavigationBarColor:$="#FFFFFF",disableFocusBoundary:q=!1,hideStatusBar:F=!1,hideSystemNavigationBar:R=!1,returnFocus:S=!0,initialFocusId:j,...T},_){var c,f,m,g;const[E,u]=t.useState(!1),d=t.useRef(null),i=t.useRef(),C=n=>n.stopPropagation(),D=((f=(c=d.current)==null?void 0:c.querySelector('[id^="dialog-title"]'))==null?void 0:f.getAttribute("id"))||void 0,I=((g=(m=d.current)==null?void 0:m.querySelector('[id^="dialog-text"]'))==null?void 0:g.getAttribute("id"))||void 0;return t.useEffect(()=>{r?(i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{u(!0)},100)):u(!1)},[r]),t.useEffect(()=>{const n=M=>{M.key==="Escape"&&r&&s&&s()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r,s]),t.useEffect(()=>()=>{i.current&&clearTimeout(i.current)},[]),o.jsx(O.default,{ref:d,open:r,onClose:s,transitionDuration:l,centered:!a,fullScreen:a,...w,children:o.jsx(P,{ref:_,role:"dialog","aria-modal":"true","aria-labelledby":D,"aria-describedby":I,open:E,transitionDuration:l,fullWidth:x,fullScreen:a,maxWidth:p,maxHeight:y,onClick:C,...T,css:v,children:o.jsxs(A.default,{active:r,disabled:q,returnFocus:S,initialFocusId:j,inlineCSS:{flex:1,overflowY:"auto"},children:[a&&!F&&o.jsx(b.default,{inlineCSS:{minHeight:"var(--status-bar-height, 0px)",backgroundColor:k}}),h,a&&!R&&o.jsx(b.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:$}})]})})})});exports.default=K;

package/Dialog/Dialog.d.ts

@@ -16,6 +16,8 @@ export interface DialogProps extends GeneralComponentProps<HTMLAttributes<HTMLDi
     systemNavigationBarColor?: string;
     hideStatusBar?: boolean;
     hideSystemNavigationBar?: boolean;
+    returnFocus?: boolean;
+    initialFocusId?: string;
 }
 declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Dialog;

package/Dialog/Dialog.es.js

@@ -1,10 +1,10 @@
-import { jsx as n, jsxs as D } from "@emotion/react/jsx-runtime";
-import { forwardRef as H, useState as L, useRef as h, useEffect as d } from "react";
-import O from "../Backdrop/Backdrop.es.js";
+import { jsx as n, jsxs as L } from "@emotion/react/jsx-runtime";
+import { forwardRef as O, useState as K, useRef as h, useEffect as s } from "react";
+import P from "../Backdrop/Backdrop.es.js";
 import g from "../Flexbox/Flexbox.es.js";
-import K from "../FocusBoundary/FocusBoundary.es.js";
-import P from "@emotion/styled";
-const Y = P.div`
+import Y from "../FocusBoundary/FocusBoundary.es.js";
+import z from "@emotion/styled";
+const G = z.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -37,7 +37,7 @@ const Y = P.div`
   maxHeight: "100%",
   borderRadius: 0
 } : null}
-`, U = H(function({
+`, W = O(function({
   children: b,
   open: t,
   onClose: i,
@@ -45,66 +45,71 @@ const Y = P.div`
   fullWidth: x = !0,
   fullScreen: r = !1,
   maxWidth: y = 320,
-  maxHeight: w = 438,
-  inlineCSS: k,
-  backdropProps: v,
+  maxHeight: v = 438,
+  inlineCSS: w,
+  backdropProps: k,
   statusBarColor: $ = "transparent",
   systemNavigationBarColor: F = "#FFFFFF",
-  disableFocusBoundary: T = !1,
-  hideStatusBar: S = !1,
+  disableFocusBoundary: S = !1,
+  hideStatusBar: T = !1,
   hideSystemNavigationBar: R = !1,
-  ...C
-}, E) {
-  var u, f, m, p;
-  const [I, c] = L(!1), s = h(null), o = h(), j = (a) => a.stopPropagation(), q = ((f = (u = s.current) == null ? void 0 : u.querySelector('[id^="dialogTitle"]')) == null ? void 0 : f.getAttribute("id")) || "", A = ((p = (m = s.current) == null ? void 0 : m.querySelector('[id^="dialogText"]')) == null ? void 0 : p.getAttribute("id")) || "";
-  return d(() => {
+  returnFocus: C = !0,
+  initialFocusId: E,
+  ...I
+}, j) {
+  var c, f, m, p;
+  const [q, u] = K(!1), d = h(null), o = h(), A = (a) => a.stopPropagation(), B = ((f = (c = d.current) == null ? void 0 : c.querySelector('[id^="dialog-title"]')) == null ? void 0 : f.getAttribute("id")) || void 0, D = ((p = (m = d.current) == null ? void 0 : m.querySelector('[id^="dialog-text"]')) == null ? void 0 : p.getAttribute("id")) || void 0;
+  return s(() => {
     t ? (o.current && clearTimeout(o.current), o.current = setTimeout(() => {
-      c(!0);
-    }, 100)) : c(!1);
-  }, [t]), d(() => {
-    const a = (B) => {
-      B.key === "Escape" && t && i && i();
+      u(!0);
+    }, 100)) : u(!1);
+  }, [t]), s(() => {
+    const a = (H) => {
+      H.key === "Escape" && t && i && i();
     };
     return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
-  }, [t, i]), d(() => () => {
+  }, [t, i]), s(() => () => {
     o.current && clearTimeout(o.current);
   }, []), /* @__PURE__ */ n(
-    O,
+    P,
     {
-      ref: s,
+      ref: d,
       open: t,
       onClose: i,
       transitionDuration: l,
       centered: !r,
       fullScreen: r,
-      ...v,
+      ...k,
       children: /* @__PURE__ */ n(
-        Y,
+        G,
         {
-          ref: E,
+          ref: j,
           role: "dialog",
-          "aria-labelledby": q,
-          "aria-describedby": A,
-          open: I,
+          "aria-modal": "true",
+          "aria-labelledby": B,
+          "aria-describedby": D,
+          open: q,
           transitionDuration: l,
           fullWidth: x,
           fullScreen: r,
           maxWidth: y,
-          maxHeight: w,
-          onClick: j,
-          ...C,
-          css: k,
-          children: /* @__PURE__ */ D(
-            K,
+          maxHeight: v,
+          onClick: A,
+          ...I,
+          css: w,
+          children: /* @__PURE__ */ L(
+            Y,
             {
               active: t,
-              disabled: T,
+              disabled: S,
+              returnFocus: C,
+              initialFocusId: E,
               inlineCSS: {
                 flex: 1,
                 overflowY: "auto"
               },
               children: [
-                r && !S && /* @__PURE__ */ n(
+                r && !T && /* @__PURE__ */ n(
                   g,
                   {
                     inlineCSS: {
@@ -132,5 +137,5 @@ const Y = P.div`
   );
 });
 export {
-  U as default
+  W as default
 };

package/Dialog/Dialog.stories.d.ts

@@ -12,6 +12,16 @@ declare const meta: {
                 disable: true;
             };
         };
+        returnFocus: {
+            control: {
+                disable: true;
+            };
+        };
+        initialFocusId: {
+            control: {
+                disabled: boolean;
+            };
+        };
     };
     tags: string[];
 };

package/Dialog/DialogText/DialogText.cjs

@@ -2,4 +2,4 @@
   text-align: ${({textAlign:e})=>e};
 
   ${({theme:{palette:{grey:e},typography:{b2R:t,b4R:i}},type:n})=>n==="sub"?{fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:e[70]}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}}
-`,h=l.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:o,...r},s){const a=l.useId();return u.jsx(f,{ref:s,type:i,textAlign:n,...r,id:`dialogText${a}`,css:o,children:t})});exports.default=h;
+`,h=l.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:o,...r},s){const a=l.useId();return u.jsx(f,{ref:s,type:i,textAlign:n,id:`dialog-text-${a}`,...r,css:o,children:t})});exports.default=h;

package/Dialog/DialogText/DialogText.es.js

@@ -30,8 +30,8 @@ const p = c.div`
       ref: g,
       type: e,
       textAlign: n,
+      id: `dialog-text-${l}`,
       ...r,
-      id: `dialogText${l}`,
       css: o,
       children: t
     }

package/Dialog/DialogTitle/DialogTitle.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@emotion/react/jsx-runtime"),s=require("react"),p=require("../../Icon/Icon.cjs"),f=require("@emotion/styled"),g=e=>e&&e.__esModule?e:{default:e},n=g(f),x=n.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@emotion/react/jsx-runtime"),s=require("react"),f=require("../../Icon/Icon.cjs"),g=require("@emotion/styled"),x=e=>e&&e.__esModule?e:{default:e},n=x(g),h=n.default.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -6,7 +6,7 @@
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
 
   ${({theme:{spacing:e,palette:{grey:o}},fullScreen:l})=>{let i={padding:`${e.content(3)}px ${e.content(4)}px`,borderBottom:`1px solid ${o[10]}`,maxHeight:48};return l&&(i={padding:e.content(4),maxHeight:56}),i}};
-`,m=n.default.div`
+`,m=n.default.h2`
   flex-grow: 1;
   text-align: center;
   text-overflow: ellipsis;
@@ -14,11 +14,11 @@
   overflow: hidden;
 
   ${({theme:{typography:{h4B:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing})};
-`,h=n.default.button`
+`,j=n.default.button`
   position: absolute;
   top: 50%;
   right: ${({theme:{spacing:e}})=>e.content(4)}px;
   transform: translateY(-50%);
 `,a=n.default.div`
   min-width: 24px;
-`,j=s.forwardRef(function({children:o,onClose:l,hideCloseButton:i,inlineCSS:r,...c},d){const u=s.useId();return t.jsxs(x,{ref:d,...c,id:`dialogTitle${u}`,css:r,children:[t.jsx(a,{}),t.jsx(m,{children:o}),t.jsx(a,{}),!i&&t.jsx(h,{className:"closeButton",onClick:l,"aria-label":"창 닫기",children:t.jsx(p.default,{name:"CloseLine"})})]})});exports.default=j;
+`,y=s.forwardRef(function({children:o,onClose:l,hideCloseButton:i,inlineCSS:r,tag:c="h2",...d},u){const p=s.useId();return t.jsxs(h,{ref:u,id:`dialog-title-${p}`,...d,css:r,children:[t.jsx(a,{}),t.jsx(m,{as:c,children:o}),t.jsx(a,{}),!i&&t.jsx(j,{type:"button",className:"closeButton",onClick:l,"aria-label":"닫기",children:t.jsx(f.default,{name:"CloseLine"})})]})});exports.default=y;

package/Dialog/DialogTitle/DialogTitle.d.ts

@@ -1,10 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { ElementType, HTMLAttributes } from 'react';
 import { GeneralComponentProps } from '../../typings/component';
 
 export interface DialogTitleProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     onClose?: () => void;
     fullScreen?: boolean;
     hideCloseButton?: boolean;
+    tag?: ElementType;
 }
 declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogTitleProps & import('react').RefAttributes<HTMLDivElement>>;
 export default DialogTitle;

package/Dialog/DialogTitle/DialogTitle.es.js

@@ -1,8 +1,8 @@
-import { jsxs as d, jsx as e } from "@emotion/react/jsx-runtime";
-import { forwardRef as m, useId as g } from "react";
-import f from "../../Icon/Icon.es.js";
-import o from "@emotion/styled";
-const x = o.div`
+import { jsxs as m, jsx as e } from "@emotion/react/jsx-runtime";
+import { forwardRef as g, useId as f } from "react";
+import h from "../../Icon/Icon.es.js";
+import i from "@emotion/styled";
+const x = i.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -16,17 +16,17 @@ const x = o.div`
   },
   fullScreen: l
 }) => {
-  let i = {
+  let o = {
     padding: `${t.content(3)}px ${t.content(4)}px`,
     borderBottom: `1px solid ${n[10]}`,
     maxHeight: 48
   };
-  return l && (i = {
+  return l && (o = {
     padding: t.content(4),
     maxHeight: 56
-  }), i;
+  }), o;
 }};
-`, h = o.div`
+`, u = i.h2`
   flex-grow: 1;
   text-align: center;
   text-overflow: ellipsis;
@@ -43,22 +43,22 @@ const x = o.div`
   lineHeight: t.lineHeight,
   letterSpacing: t.letterSpacing
 })};
-`, u = o.button`
+`, w = i.button`
   position: absolute;
   top: 50%;
   right: ${({ theme: { spacing: t } }) => t.content(4)}px;
   transform: translateY(-50%);
-`, r = o.div`
+`, r = i.div`
   min-width: 24px;
-`, b = m(function({ children: n, onClose: l, hideCloseButton: i, inlineCSS: s, ...a }, c) {
-  const p = g();
-  return /* @__PURE__ */ d(x, { ref: c, ...a, id: `dialogTitle${p}`, css: s, children: [
+`, S = g(function({ children: n, onClose: l, hideCloseButton: o, inlineCSS: s, tag: a = "h2", ...c }, p) {
+  const d = f();
+  return /* @__PURE__ */ m(x, { ref: p, id: `dialog-title-${d}`, ...c, css: s, children: [
     /* @__PURE__ */ e(r, {}),
-    /* @__PURE__ */ e(h, { children: n }),
+    /* @__PURE__ */ e(u, { as: a, children: n }),
     /* @__PURE__ */ e(r, {}),
-    !i && /* @__PURE__ */ e(u, { className: "closeButton", onClick: l, "aria-label": "창 닫기", children: /* @__PURE__ */ e(f, { name: "CloseLine" }) })
+    !o && /* @__PURE__ */ e(w, { type: "button", className: "closeButton", onClick: l, "aria-label": "닫기", children: /* @__PURE__ */ e(h, { name: "CloseLine" }) })
   ] });
 });
 export {
-  b as default
+  S as default
 };

package/FocusBoundary/FocusBoundary.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),c=require("react"),g=require("../Flexbox/Flexbox.cjs");function h({active:f,children:i,inlineCSS:d,disabled:a=!1,...m}){const s=c.useRef(null),o=c.useRef(null),r=c.useRef([]),n=c.useRef(-1),b=()=>{s.current&&(r.current=Array.from(s.current.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]")))},E=()=>{var t;if(r.current)for(let e=0;e<r.current.length;e++){const u=r.current[e];if(!((t=u==null?void 0:u.getAttribute("class"))!=null&&t.includes("closeButton"))){u==null||u.focus(),n.current=e;break}}},x=()=>{var e;const t=r.current[n.current+1];if(!t){(e=r.current[0])==null||e.focus(),n.current=0;return}t.focus(),n.current+=1},y=()=>{var e;const t=r.current[n.current-1];if(!t){(e=r.current[r.current.length-1])==null||e.focus(),n.current=r.current.length-1;return}t.focus(),n.current-=1};return c.useEffect(()=>{!f&&o.current&&o.current.focus()},[f]),c.useEffect(()=>{const t=e=>{e.key==="Tab"&&(e.preventDefault(),e.shiftKey?y():x())};return o.current=document.activeElement,b(),E(),document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t)}},[]),l.jsxs(l.Fragment,{children:[a&&i,!a&&l.jsx(g.default,{className:"focus-boundary",ref:s,flexDirection:"column",inlineCSS:{height:"100%",...d},...m,children:i})]})}exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),o=require("react"),R=require("../Flexbox/Flexbox.cjs");function p({active:l,children:a,inlineCSS:m,returnFocus:d=!0,disabled:b=!1,initialFocusId:x,...E}){const s=o.useRef(null),i=o.useRef(null),n=o.useRef([]),r=o.useRef(-1),y=()=>{s.current&&(n.current=Array.from(s.current.querySelectorAll('a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe:not([tabindex="-1"]), object:not([tabindex="-1"]), embed:not([tabindex="-1"]), *[tabindex]:not([tabindex="-1"]), *[contenteditable]:not([tabindex="-1"])')))},g=t=>{var e;if(t){const u=document.getElementById(t);u&&u.focus();return}if(n.current)for(let u=0;u<n.current.length;u++){const c=n.current[u];if(!((e=c==null?void 0:c.getAttribute("class"))!=null&&e.includes("closeButton"))){c==null||c.focus(),r.current=u;break}}},h=()=>{var e;const t=n.current[r.current+1];if(!t){(e=n.current[0])==null||e.focus(),r.current=0;return}t.focus(),r.current+=1},v=()=>{var e;const t=n.current[r.current-1];if(!t){(e=n.current[n.current.length-1])==null||e.focus(),r.current=n.current.length-1;return}t.focus(),r.current-=1};return o.useEffect(()=>{!l&&i.current&&d&&i.current.focus()},[l,d]),o.useEffect(()=>{const t=e=>{e.key==="Tab"&&(e.preventDefault(),e.shiftKey?v():h())};return i.current=document.activeElement,y(),g(x),document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t)}},[x]),f.jsxs(f.Fragment,{children:[b&&a,!b&&f.jsx(R.default,{className:"focus-boundary",ref:s,flexDirection:"column",inlineCSS:{height:"100%",...m},...E,children:a})]})}exports.default=p;

package/FocusBoundary/FocusBoundary.d.ts

@@ -4,6 +4,8 @@ import { GeneralComponentProps } from '../typings/component';
 export interface FocusBoundaryProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     active?: boolean;
     disabled?: boolean;
+    returnFocus?: boolean;
+    initialFocusId?: string;
 }
-declare function FocusBoundary({ active, children, inlineCSS, disabled, ...props }: FocusBoundaryProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function FocusBoundary({ active, children, inlineCSS, returnFocus, disabled, initialFocusId, ...props }: FocusBoundaryProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default FocusBoundary;

package/FocusBoundary/FocusBoundary.es.js

@@ -1,73 +1,80 @@
-import { jsxs as h, Fragment as p, jsx as g } from "@emotion/react/jsx-runtime";
-import { useRef as u, useEffect as a } from "react";
-import v from "../Flexbox/Flexbox.es.js";
-function w({
-  active: f,
-  children: l,
-  inlineCSS: d,
-  disabled: i = !1,
-  ...m
+import { jsxs as v, Fragment as k, jsx as F } from "@emotion/react/jsx-runtime";
+import { useRef as u, useEffect as m } from "react";
+import j from "../Flexbox/Flexbox.es.js";
+function D({
+  active: i,
+  children: a,
+  inlineCSS: x,
+  returnFocus: l = !0,
+  disabled: d = !1,
+  initialFocusId: b,
+  ...E
 }) {
-  const o = u(null), s = u(null), r = u([]), n = u(-1), b = () => {
-    o.current && (r.current = Array.from(
-      o.current.querySelectorAll(
-        "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]"
+  const s = u(null), f = u(null), n = u([]), r = u(-1), y = () => {
+    s.current && (n.current = Array.from(
+      s.current.querySelectorAll(
+        'a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe:not([tabindex="-1"]), object:not([tabindex="-1"]), embed:not([tabindex="-1"]), *[tabindex]:not([tabindex="-1"]), *[contenteditable]:not([tabindex="-1"])'
       )
     ));
-  }, E = () => {
-    var t;
-    if (r.current)
-      for (let e = 0; e < r.current.length; e++) {
-        const c = r.current[e];
-        if (!((t = c == null ? void 0 : c.getAttribute("class")) != null && t.includes("closeButton"))) {
-          c == null || c.focus(), n.current = e;
+  }, h = (t) => {
+    var e;
+    if (t) {
+      const o = document.getElementById(t);
+      o && o.focus();
+      return;
+    }
+    if (n.current)
+      for (let o = 0; o < n.current.length; o++) {
+        const c = n.current[o];
+        if (!((e = c == null ? void 0 : c.getAttribute("class")) != null && e.includes("closeButton"))) {
+          c == null || c.focus(), r.current = o;
           break;
         }
       }
-  }, x = () => {
+  }, p = () => {
     var e;
-    const t = r.current[n.current + 1];
+    const t = n.current[r.current + 1];
     if (!t) {
-      (e = r.current[0]) == null || e.focus(), n.current = 0;
+      (e = n.current[0]) == null || e.focus(), r.current = 0;
       return;
     }
-    t.focus(), n.current += 1;
-  }, y = () => {
+    t.focus(), r.current += 1;
+  }, g = () => {
     var e;
-    const t = r.current[n.current - 1];
+    const t = n.current[r.current - 1];
     if (!t) {
-      (e = r.current[r.current.length - 1]) == null || e.focus(), n.current = r.current.length - 1;
+      (e = n.current[n.current.length - 1]) == null || e.focus(), r.current = n.current.length - 1;
       return;
     }
-    t.focus(), n.current -= 1;
+    t.focus(), r.current -= 1;
   };
-  return a(() => {
-    !f && s.current && s.current.focus();
-  }, [f]), a(() => {
+  return m(() => {
+    !i && f.current && l && f.current.focus();
+  }, [i, l]), m(() => {
     const t = (e) => {
-      e.key === "Tab" && (e.preventDefault(), e.shiftKey ? y() : x());
+      e.key === "Tab" && (e.preventDefault(), e.shiftKey ? g() : p());
     };
-    return s.current = document.activeElement, b(), E(), document.addEventListener("keydown", t), () => {
+    return f.current = document.activeElement, y(), h(b), document.addEventListener("keydown", t), () => {
       document.removeEventListener("keydown", t);
     };
-  }, []), /* @__PURE__ */ h(p, { children: [
-    i && l,
-    !i && /* @__PURE__ */ g(
-      v,
+  }, [b]), /* @__PURE__ */ v(k, { children: [
+    d && a,
+    !d && /* @__PURE__ */ F(
+      j,
       {
         className: "focus-boundary",
-        ref: o,
+        ref: s,
         flexDirection: "column",
         inlineCSS: {
           height: "100%",
-          ...d
+          ...x
         },
-        ...m,
-        children: l
+        ...E,
+        children: a
       }
     )
   ] });
 }
 export {
-  w as default
+  D as default
 };