@dotss/ui 0.0.8 → 0.0.11

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

@@ -0,0 +1 @@
+"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/{dist/DatePicker → 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

@@ -0,0 +1,8 @@
+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 {
+  a as EventDot,
+  p as EventDotGroup,
+  e as default
+};

package/Dialog/Dialog.cjs

@@ -0,0 +1,20 @@
+"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%;
+  transform: translate3d(-50%, -50%, 0);
+  display: flex;
+  flex-direction: column;
+  width: ${({fullWidth:e})=>e?"100%":"auto"};
+  max-width: ${({maxWidth:e})=>typeof e=="number"?`${e}px`:"auto"};
+  max-height: ${({maxHeight:e})=>typeof e=="number"?`${e}px`:"100%"};
+  border-radius: 16px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e.white};
+  box-shadow: ${({theme:{elevation:e}})=>e[2]};
+  overflow-y: auto;
+
+  transition: transform ${({transitionDuration:e})=>e}ms;
+  ${({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}
+`,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/{dist/Dialog → 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/{dist/Dialog → 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/{dist/Dialog → 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/{dist/Dialog → 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/{dist/Dialog → 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/{dist/Dialog → 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/{dist/Dialog → 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/{dist/Dialog → 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

@@ -0,0 +1 @@
+"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/{dist/FocusBoundary → 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

@@ -0,0 +1,80 @@
+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 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"])'
+      )
+    ));
+  }, 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;
+        }
+      }
+  }, p = () => {
+    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;
+  }, g = () => {
+    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 m(() => {
+    !i && f.current && l && f.current.focus();
+  }, [i, l]), m(() => {
+    const t = (e) => {
+      e.key === "Tab" && (e.preventDefault(), e.shiftKey ? g() : p());
+    };
+    return f.current = document.activeElement, y(), h(b), document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
+    };
+  }, [b]), /* @__PURE__ */ v(k, { children: [
+    d && a,
+    !d && /* @__PURE__ */ F(
+      j,
+      {
+        className: "focus-boundary",
+        ref: s,
+        flexDirection: "column",
+        inlineCSS: {
+          height: "100%",
+          ...x
+        },
+        ...E,
+        children: a
+      }
+    )
+  ] });
+}
+export {
+  D as default
+};

package/FormControlText/FormControlText.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),l=require("react"),j=require("@emotion/styled"),w=e=>e&&e.__esModule?e:{default:e},d=w(j),_=d.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  flex-direction: ${({placement:e})=>e==="left"?"row-reverse":"row"};
+`,v=d.default.div`
+  display: inline-flex;
+`,T=d.default.label`
+  cursor: pointer;
+
+  ${({theme:{palette:{grey:e},typography:{h0R:n,b2R:o}},size:u,disabled:c})=>{let i={fontSize:o.size,fontWeight:o.weight,lineHeight:o.lineHeight,letterSpacing:o.letterSpacing};return u==="2xLarge"&&(i={fontSize:n.size,fontWeight:n.weight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing}),c&&(i.color=e[30],i.cursor="not-allowed"),i}}
+`,F=l.forwardRef(function({control:n,text:o,placement:u,size:c,onClick:i,disabled:a,inlineCSS:h,controlWrapperProps:p,textProps:x,...s},y){const C=l.useRef(null),m=l.useId(),g=(s==null?void 0:s.id)||m,S=t=>r=>{r.stopPropagation(),typeof t=="function"&&t(r)};return f.jsxs(_,{ref:y,placement:u,disabled:a,...s,css:h,children:[f.jsx(v,{ref:C,...p,children:l.Children.map(n,t=>{var r;return l.isValidElement(t)?l.cloneElement(t,{size:c,disabled:a,onClick:S((r=t.props)==null?void 0:r.onClick),id:g,...t.props}):null})}),f.jsx(T,{size:c,disabled:a,htmlFor:g,...x,children:o})]})});exports.default=F;

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

@@ -9,6 +9,8 @@ export interface FormControlTextProps extends GeneralComponentProps<HTMLAttribut
     placement?: 'left' | 'right';
     size?: Extract<Size, 'medium' | '2xLarge'>;
     disabled?: boolean;
+    controlWrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    textProps?: GeneralComponentProps<HTMLAttributes<HTMLLabelElement>>;
 }
 declare const FormControlText: import('react').ForwardRefExoticComponent<FormControlTextProps & import('react').RefAttributes<HTMLDivElement>>;
 export default FormControlText;

package/FormControlText/FormControlText.es.js

@@ -0,0 +1,78 @@
+import { jsxs as w, jsx as g } from "@emotion/react/jsx-runtime";
+import { forwardRef as S, useRef as j, useId as F, Children as H, isValidElement as T, cloneElement as $ } from "react";
+import a from "@emotion/styled";
+const k = a.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+  flex-direction: ${({ placement: t }) => t === "left" ? "row-reverse" : "row"};
+`, v = a.div`
+  display: inline-flex;
+`, z = a.label`
+  cursor: pointer;
+
+  ${({
+  theme: {
+    palette: { grey: t },
+    typography: { h0R: o, b2R: n }
+  },
+  size: f,
+  disabled: l
+}) => {
+  let i = {
+    fontSize: n.size,
+    fontWeight: n.weight,
+    lineHeight: n.lineHeight,
+    letterSpacing: n.letterSpacing
+  };
+  return f === "2xLarge" && (i = {
+    fontSize: o.size,
+    fontWeight: o.weight,
+    lineHeight: o.lineHeight,
+    letterSpacing: o.letterSpacing
+  }), l && (i.color = t[30], i.cursor = "not-allowed"), i;
+}}
+`, L = S(function({
+  control: o,
+  text: n,
+  placement: f,
+  size: l,
+  onClick: i,
+  disabled: s,
+  inlineCSS: u,
+  controlWrapperProps: p,
+  textProps: h,
+  ...c
+}, m) {
+  const x = j(null), C = F(), d = (c == null ? void 0 : c.id) || C, y = (e) => (r) => {
+    r.stopPropagation(), typeof e == "function" && e(r);
+  };
+  return /* @__PURE__ */ w(
+    k,
+    {
+      ref: m,
+      placement: f,
+      disabled: s,
+      ...c,
+      css: u,
+      children: [
+        /* @__PURE__ */ g(v, { ref: x, ...p, children: H.map(o, (e) => {
+          var r;
+          return T(e) ? $(e, {
+            size: l,
+            disabled: s,
+            onClick: y((r = e.props) == null ? void 0 : r.onClick),
+            id: d,
+            ...e.props
+          }) : null;
+        }) }),
+        /* @__PURE__ */ g(z, { size: l, disabled: s, htmlFor: d, ...h, children: n })
+      ]
+    }
+  );
+});
+export {
+  L as default
+};

package/{dist/Icon → Icon}/Icon.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-IVJAK4qr.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-BmqvB_n6.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
   ${({size:o,width:s,height:a})=>{let n={width:s,height:a};switch(o){case"large":n={width:32,height:32};break;case"medium":n={width:24,height:24};break;case"small":n={width:20,height:20};break;case"xSmall":n={width:16,height:16};break}return n}};
 
   color: ${({theme:o,color:s="grey.100"})=>h.default(s,{theme:o})};

package/{dist/Icon → Icon}/Icon.es.js

@@ -1,6 +1,6 @@
 import { jsx as w } from "@emotion/react/jsx-runtime";
 import { forwardRef as y, Children as f, isValidElement as i, cloneElement as s } from "react";
-import { S as $ } from "../resources/tictoccroc/icons/index.ts-CarI_z7q.js";
+import { S as $ } from "../resources/tictoccroc/icons/index.ts-CzTh-XsD.js";
 import b from "@emotion/styled";
 import x from "../utils/getPaletteColor/getPaletteColor.es.js";
 const g = (p) => b(p)`