@dotss/ui 1.3.1 → 1.5.0

package/Tab/Tab.es.js

@@ -1,47 +1,57 @@
-import { jsx as N, jsxs as et } from "@emotion/react/jsx-runtime";
-import { forwardRef as rt, useRef as l, useState as x, Children as w, isValidElement as M, useEffect as H, cloneElement as nt } from "react";
-import L from "@emotion/styled";
-const st = L.div`
+import { jsx as U, jsxs as ut } from "@emotion/react/jsx-runtime";
+import { forwardRef as lt, useRef as l, useState as M, Children as w, isValidElement as I, useCallback as O, useEffect as C, cloneElement as dt } from "react";
+import Y from "@emotion/styled";
+const ft = Y.div`
   width: 100%;
-  background-color: ${({ theme: o }) => o.palette.grey.white};
-  ${({ scrollable: o }) => o ? {
-  overflow: "hidden"
+  background-color: ${({ theme: a }) => a.palette.grey.white};
+  ${({ scrollable: a }) => a ? {
+  overflow: "hidden",
+  cursor: "grab",
+  '& [role="tab"]': {
+    flex: "0 0 auto"
+  }
 } : {}}
-`, it = L.div`
+`, mt = Y.div`
   display: flex;
   position: relative;
-  background: ${({ theme: o }) => o.palette.grey.white};
-  ${({ theme: o, isChipped: u }) => u ? {
-  gap: o.spacing.content(2)
+  background: ${({ theme: a }) => a.palette.grey.white};
+  ${({ theme: a, isChipped: m }) => m ? {
+  gap: a.spacing.content(2)
 } : {}}
-`, ot = L.div`
+`, ht = Y.div`
   position: absolute;
   height: 2px;
   bottom: 0;
-  background: ${({ theme: o, disabled: u }) => u ? o.palette.brand.primary.disableLine : o.palette.brand.primary.main};
+  background: ${({ theme: a, disabled: m }) => m ? a.palette.brand.primary.disableLine : a.palette.brand.primary.main};
   transition: all 0.2s ease-in-out;
   transition-property: transform, width;
-  ${({ isChipped: o }) => o ? {
+  ${({ isChipped: a }) => a ? {
   display: "none"
 } : {}}
-`, S = 3, ut = rt(function({
-  value: u,
-  scrollable: d = !1,
+`, L = 3, g = Object.freeze({
+  FRICTION: 0.85,
+  MIN_VELOCITY: 0.01,
+  MAX_VELOCITY: 1.62,
+  STOP_VELOCITY: 0.02,
+  SAMPLE_DURATION: 100
+}), gt = lt(function({
+  value: m,
+  scrollable: h = !1,
   disabled: j = !1,
-  onChange: E,
+  onChange: R,
   size: $ = "medium",
-  inlineCSS: K,
-  wrapperProps: m,
-  children: R,
-  ...O
-}, P) {
-  const s = l(null), f = l(), p = l(0), z = l(!0), D = l(!1), g = l(!1), c = l(!1), [U, V] = x(!1), [T, _] = x(0), [A, G] = x(0), [W, J] = x(0), Y = j, X = w.toArray(R).every((t) => M(t) && w.toArray(t.props.children).every(
-    (r) => M(r) && !Array.isArray(r.props.children)
-  )), Q = (t) => (r) => {
-    d && !D.current || (E(t, r.currentTarget), D.current = !1);
-  }, Z = (t) => {
-    if (!s.current) return;
-    const r = s.current.querySelectorAll(
+  inlineCSS: H,
+  wrapperProps: v,
+  children: F,
+  ...z
+}, K) {
+  const o = l(null), c = l(), p = l(0), G = l(!0), S = l(!1), x = l(!1), u = l(!1), T = l([]), [J, Q] = M(!1), [D, Z] = M(0), [E, B] = M(0), [N, tt] = M(0), W = j, P = w.toArray(F).every((t) => I(t) && w.toArray(t.props.children).every(
+    (r) => I(r) && !Array.isArray(r.props.children)
+  )), et = (t) => (r) => {
+    h && !S.current || (R(t, r.currentTarget), S.current = !1);
+  }, rt = (t) => {
+    if (!o.current) return;
+    const r = o.current.querySelectorAll(
       '[role="tab"]:not([disabled])'
     ), i = Array.from(r).findIndex((e) => e === document.activeElement);
     if (t.key === "ArrowLeft") {
@@ -66,42 +76,77 @@ const st = L.div`
       if (e && !e.getAttribute("disabled")) {
         const n = e.getAttribute("value");
         if (n) {
-          E(n, e);
-          const a = s.current.querySelector(".indicator");
-          a && (a.style.width = `${e.clientWidth}px`, a.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, g.current ? a.style.transition = "all 0.2s ease-in-out" : (a.style.transition = "unset", g.current = !0));
+          R(n, e);
+          const s = o.current.querySelector(".indicator");
+          s && (s.style.width = `${e.clientWidth}px`, s.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, x.current ? s.style.transition = "all 0.2s ease-in-out" : (s.style.transition = "unset", x.current = !0));
         }
       }
     }
-  }, k = (t, r) => {
-    _(t), G(r), J(p.current);
-  }, I = (t, r) => {
-    if (!c.current) return;
-    c.current = !1;
-    const i = T - t, e = A - r;
-    t && Math.abs(i) < S && Math.abs(e) < S * 2 && (D.current = !0), f.current && (cancelAnimationFrame(f.current), f.current = void 0);
-  }, B = (t) => {
-    d && (c.current = !0, k(t.clientX, t.clientY));
-  }, tt = (t) => {
-    d && k(t.touches[0].clientX, t.touches[0].clientY);
-  }, C = (t) => I(t.changedTouches[0].clientX, t.changedTouches[0].clientY), q = (t) => I(t.clientX, t.clientY);
-  return H(() => {
+  }, nt = (t) => {
+    if (t.length < 2) return 0;
+    const r = t[0], i = t[t.length - 1], e = i.time - r.time, n = i.x - r.x;
+    if (e === 0) return 0;
+    const s = n / e;
+    return Math.max(
+      -g.MAX_VELOCITY,
+      Math.min(g.MAX_VELOCITY, s)
+    );
+  }, b = O((t) => {
+    const r = o.current ? o.current.scrollWidth - o.current.clientWidth : 0;
+    return Math.max(0, Math.min(t, r));
+  }, []), A = O(
+    (t) => {
+      if (!o.current) return;
+      const r = b(t);
+      o.current.style.transition = "unset", o.current.style.transform = `translate3d(-${r}px, 0px, 0px)`, p.current = r;
+    },
+    [b]
+  ), ot = O(
+    (t) => {
+      c.current && cancelAnimationFrame(c.current);
+      let r = t * -1, i = p.current, e = performance.now();
+      const n = (s) => {
+        if (!o.current) return;
+        const d = s - e;
+        e = s, i = b(i + r * d);
+        const f = i <= 0, y = i >= o.current.scrollWidth - o.current.clientWidth;
+        (f && r < 0 || y && r > 0) && (r = 0), r *= g.FRICTION, A(i), Math.abs(r) > g.STOP_VELOCITY ? c.current = requestAnimationFrame(n) : c.current = void 0;
+      };
+      c.current = requestAnimationFrame(n);
+    },
+    [b, A]
+  ), _ = (t, r) => {
+    c.current && (cancelAnimationFrame(c.current), c.current = void 0), S.current = !1, Z(t), B(r), tt(p.current), T.current = [{ time: performance.now(), x: t }];
+  }, X = (t, r) => {
+    if (!u.current || !o.current) return;
+    u.current = !1, o.current.style.cursor = "grab";
+    const i = D - t, e = E - r;
+    t && Math.abs(i) < L && Math.abs(e) < L * 2 && (S.current = !0);
+    const n = nt(T.current);
+    T.current = [], c.current && (cancelAnimationFrame(c.current), c.current = void 0), !S.current && Math.abs(n) >= g.MIN_VELOCITY && ot(n);
+  }, it = (t) => {
+    h && (u.current = !0, _(t.clientX, t.clientY));
+  }, st = (t) => {
+    h && _(t.touches[0].clientX, t.touches[0].clientY);
+  }, k = (t) => X(t.changedTouches[0].clientX, t.changedTouches[0].clientY), V = (t) => X(t.clientX, t.clientY);
+  return C(() => {
     const t = () => {
       var r;
-      if (s.current) {
-        const i = s.current.querySelector(".indicator"), e = (r = s.current) == null ? void 0 : r.querySelectorAll(
+      if (o.current) {
+        const i = o.current.querySelector(".indicator"), e = (r = o.current) == null ? void 0 : r.querySelectorAll(
           '[role="tab"][data-selected="true"]'
         )[0];
-        if (e && i && (i.style.width = `${e.clientWidth}px`, i.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, g.current ? i.style.transition = "all 0.2s ease-in-out" : (i.style.transition = "unset", g.current = !0), V(e.getAttribute("data-disabled") === "true")), e && d) {
-          const n = e.offsetLeft, a = e.offsetLeft + e.clientWidth, b = p.current, y = p.current + s.current.clientWidth;
-          if (n < b || a > y) {
-            const v = Math.min(
+        if (e && i && (i.style.width = `${e.clientWidth}px`, i.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, x.current ? i.style.transition = "all 0.2s ease-in-out" : (i.style.transition = "unset", x.current = !0), Q(e.getAttribute("data-disabled") === "true")), e && h) {
+          const n = e.offsetLeft, s = e.offsetLeft + e.clientWidth, d = p.current, f = p.current + o.current.clientWidth;
+          if (n < d || s > f) {
+            const y = Math.min(
               n,
               Math.max(
-                s.current.scrollWidth - s.current.clientWidth,
-                s.current.scrollWidth - y
+                o.current.scrollWidth - o.current.clientWidth,
+                o.current.scrollWidth - f
               )
             );
-            s.current.style.transition = "all 0.2s ease-in-out", s.current.style.transform = `translate3d(-${v}px, 0px, 0px)`, p.current = v;
+            o.current.style.transition = "all 0.2s ease-in-out", o.current.style.transform = `translate3d(-${y}px, 0px, 0px)`, p.current = y;
           }
         }
       }
@@ -109,72 +154,76 @@ const st = L.div`
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [d, u, $]), H(() => {
-    const t = s.current, r = (n, a, b) => {
-      if (!s.current) return;
-      const y = T - n, v = A - a;
-      if (c.current = c.current || Math.abs(y) > S && Math.abs(v) < S * 2, c.current && b.cancelable && (b.preventDefault(), b.stopPropagation()), c.current) {
-        let h = W + y;
-        const F = s.current.scrollWidth - s.current.clientWidth;
-        h < 0 ? h = 0 : h > F && (h = F), s.current && (f.current && cancelAnimationFrame(f.current), f.current = requestAnimationFrame(() => {
-          s.current && (s.current.style.transition = "unset", s.current.style.transform = `translate3d(-${h}px, 0px, 0px)`, p.current = h, z.current = !1);
+  }, [h, m, $]), C(() => {
+    const t = o.current, r = (n, s, d) => {
+      if (!o.current) return;
+      const f = D - n, y = E - s;
+      if (u.current = u.current || Math.abs(f) > L && Math.abs(y) < L * 2, u.current && d.cancelable && (d.preventDefault(), d.stopPropagation()), u.current) {
+        const ct = b(N + f), q = performance.now();
+        T.current = [
+          ...T.current,
+          { time: q, x: n }
+        ].filter((at) => q - at.time <= g.SAMPLE_DURATION), o.current && (c.current && cancelAnimationFrame(c.current), c.current = requestAnimationFrame(() => {
+          o.current && (A(ct), o.current.style.cursor = "grabbing", G.current = !1);
         }));
       }
     }, i = (n) => {
-      c.current && r(n.clientX, n.clientY, n);
+      u.current && r(n.clientX, n.clientY, n);
     }, e = (n) => {
-      r(n.touches[0].clientX, n.touches[0].clientY, n);
+      n.stopPropagation(), r(n.touches[0].clientX, n.touches[0].clientY, n);
     };
     return t == null || t.addEventListener("mousemove", i), t == null || t.addEventListener("touchmove", e), () => {
       t == null || t.removeEventListener("mousemove", i), t == null || t.removeEventListener("touchmove", e);
     };
-  }, [T, A, W]), /* @__PURE__ */ N(
-    st,
+  }, [b, D, E, N, A]), C(() => () => {
+    c.current && cancelAnimationFrame(c.current);
+  }, []), /* @__PURE__ */ U(
+    ft,
     {
       className: "tab-wrapper",
-      ref: P,
-      scrollable: d,
-      ...m,
-      css: m == null ? void 0 : m.inlineCSS,
-      children: /* @__PURE__ */ et(
-        it,
+      ref: K,
+      scrollable: h,
+      ...v,
+      css: v == null ? void 0 : v.inlineCSS,
+      children: /* @__PURE__ */ ut(
+        mt,
         {
           className: "tab-list",
           role: "tablist",
-          ref: s,
-          isChipped: X,
-          css: K,
-          ...O,
-          onMouseDown: B,
-          onMouseUp: q,
-          onMouseLeave: q,
-          onTouchStart: tt,
-          onTouchEnd: C,
-          onTouchCancel: C,
+          ref: o,
+          isChipped: P,
+          css: H,
+          ...z,
+          onMouseDown: it,
+          onMouseUp: V,
+          onMouseLeave: V,
+          onTouchStart: st,
+          onTouchEnd: k,
+          onTouchCancel: k,
           children: [
-            w.map(R, (t, r) => {
-              var n, a;
-              if (!M(t))
+            w.map(F, (t, r) => {
+              var n, s;
+              if (!I(t))
                 return null;
-              const i = u === t.props.value, e = Y || ((n = t.props) == null ? void 0 : n.disabled);
-              return nt(t, {
+              const i = m === t.props.value, e = W || ((n = t.props) == null ? void 0 : n.disabled);
+              return dt(t, {
                 ...t.props,
                 className: `tab-block-${r}`,
                 selected: i,
                 "aria-selected": i,
                 tabIndex: i ? 0 : -1,
-                onClick: (a = t.props) != null && a.disabled ? void 0 : Q(t.props.value),
-                onKeyDown: Z,
+                onClick: (s = t.props) != null && s.disabled ? void 0 : et(t.props.value),
+                onKeyDown: rt,
                 disabled: e,
                 size: $
               });
             }),
-            /* @__PURE__ */ N(
-              ot,
+            /* @__PURE__ */ U(
+              ht,
               {
                 className: "indicator",
-                disabled: Y || U,
-                isChipped: X
+                disabled: W || J,
+                isChipped: P
               }
             )
           ]
@@ -184,5 +233,5 @@ const st = L.div`
   );
 });
 export {
-  ut as default
+  gt as default
 };

package/Tab/TabBlock/TabBlock.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),d=require("react"),p=require("../../Chip/Chip.cjs"),h=require("@emotion/styled"),b=e=>e&&e.__esModule?e:{default:e},x=b(h),y=x.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),d=require("react"),m=require("../../Chip/Chip.cjs"),p=require("@emotion/styled"),x=t=>t&&t.__esModule?t:{default:t},h=x(p),y=h.default.div`
   display: flex;
   flex: 1;
   justify-content: center;
   align-items: center;
-  padding: ${({theme:{spacing:e},size:t})=>t==="small"?`${e.content(2)}px ${e.content(3)}px`:`${e.content(3)}px ${e.content(4)}px`};
-  border-bottom: ${({theme:e})=>`1px solid ${e.palette.grey[10]}`};
-  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  padding: ${({theme:{spacing:t},size:r})=>r==="small"?`${t.content(2)}px ${t.content(3)}px`:`${t.content(3)}px ${t.content(4)}px`};
+  border-bottom: ${({theme:t})=>`1px solid ${t.palette.grey[10]}`};
+  cursor: ${({disabled:t})=>t?"not-allowed":"pointer"};
 
-  ${({theme:{typography:e,palette:t},size:r,selected:o,disabled:i})=>{if(o){const{size:n,weight:s,lineHeight:g,letterSpacing:m}=e[r==="medium"?"h4B":"h5B"];return{fontSize:n,fontWeight:s,lineHeight:g,letterSpacing:m,color:i?t.grey[30]:t.grey[100]}}const{size:f,weight:a,lineHeight:l,letterSpacing:u}=e[r==="medium"?"b2R":"b4R"];return{fontSize:f,fontWeight:a,lineHeight:l,letterSpacing:u,color:i?t.grey[30]:t.grey[70]}}}}
-`,$=d.forwardRef(function({size:t="medium",selected:r,disabled:o=!1,inlineCSS:i,children:f,onClick:a,...l},u){return c.jsx(c.Fragment,{children:d.Children.map(f,n=>{var s;return d.isValidElement(n)&&!Array.isArray((s=n==null?void 0:n.props)==null?void 0:s.children)?c.jsx(p.default,{tag:"button",role:"tab",ref:u,"data-shape":"chip","data-selected":r,disabled:o,variant:r?"filled":"outlined",selected:r,onClick:a,inlineCSS:i,...n.props,...l}):c.jsx(y,{as:"button",role:"tab",ref:u,size:t,disabled:o,selected:r,"data-selected":r,"data-disabled":o,onClick:a,css:i,...l,children:n})})})});exports.default=$;
+  ${({theme:{typography:t,palette:r},size:e,selected:o,disabled:a})=>{if(o){const{size:g,weight:n,lineHeight:c,letterSpacing:b}=t[e==="medium"?"h4B":"h5B"];return{fontSize:g,fontWeight:n,lineHeight:c,letterSpacing:b,color:a?r.grey[30]:r.grey[100]}}const{size:i,weight:u,lineHeight:l,letterSpacing:s}=t[e==="medium"?"b2R":"b4R"];return{fontSize:i,fontWeight:u,lineHeight:l,letterSpacing:s,color:a?r.grey[30]:r.grey[70]}}}}
+`,$=d.forwardRef(function({size:r="medium",selected:e,disabled:o=!1,inlineCSS:a,children:i,onClick:u,...l},s){var g;return((g=d.Children.toArray(i))==null?void 0:g.length)!==1?f.jsx(y,{as:"button",role:"tab",ref:s,size:r,disabled:o,selected:e,"data-selected":e,"data-disabled":o,onClick:u,css:a,...l,children:i}):f.jsx(f.Fragment,{children:d.Children.map(i,n=>{var c;return d.isValidElement(n)&&n.type===m.default&&!Array.isArray((c=n==null?void 0:n.props)==null?void 0:c.children)?f.jsx(m.default,{tag:"button",role:"tab",ref:s,"data-shape":"chip","data-selected":e,disabled:o,variant:e?"filled":"outlined",selected:e,onClick:u,inlineCSS:a,...n.props,...l}):f.jsx(y,{as:"button",role:"tab",ref:s,size:r,disabled:o,selected:e,"data-selected":e,"data-disabled":o,onClick:u,css:a,...l,children:n})})})});exports.default=$;

package/Tab/TabBlock/TabBlock.es.js

@@ -1,84 +1,101 @@
-import { jsx as u, Fragment as c } from "@emotion/react/jsx-runtime";
-import { forwardRef as d, Children as h, isValidElement as b } from "react";
-import x from "../../Chip/Chip.es.js";
-import y from "@emotion/styled";
-const $ = y.div`
+import { jsx as p, Fragment as h } from "@emotion/react/jsx-runtime";
+import { forwardRef as x, Children as s, isValidElement as $ } from "react";
+import y from "../../Chip/Chip.es.js";
+import d from "@emotion/styled";
+const b = d.div`
   display: flex;
   flex: 1;
   justify-content: center;
   align-items: center;
-  padding: ${({ theme: { spacing: t }, size: e }) => e === "small" ? `${t.content(2)}px ${t.content(3)}px` : `${t.content(3)}px ${t.content(4)}px`};
+  padding: ${({ theme: { spacing: t }, size: r }) => r === "small" ? `${t.content(2)}px ${t.content(3)}px` : `${t.content(3)}px ${t.content(4)}px`};
   border-bottom: ${({ theme: t }) => `1px solid ${t.palette.grey[10]}`};
   cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
 
-  ${({ theme: { typography: t, palette: e }, size: r, selected: o, disabled: i }) => {
-  if (o) {
+  ${({ theme: { typography: t, palette: r }, size: e, selected: n, disabled: a }) => {
+  if (n) {
     const {
-      size: n,
-      weight: f,
-      lineHeight: p,
-      letterSpacing: s
-    } = t[r === "medium" ? "h4B" : "h5B"];
+      size: u,
+      weight: o,
+      lineHeight: l,
+      letterSpacing: c
+    } = t[e === "medium" ? "h4B" : "h5B"];
     return {
-      fontSize: n,
-      fontWeight: f,
-      lineHeight: p,
-      letterSpacing: s,
-      color: i ? e.grey[30] : e.grey[100]
+      fontSize: u,
+      fontWeight: o,
+      lineHeight: l,
+      letterSpacing: c,
+      color: a ? r.grey[30] : r.grey[100]
     };
   }
   const {
-    size: g,
-    weight: a,
-    lineHeight: l,
-    letterSpacing: m
-  } = t[r === "medium" ? "b2R" : "b4R"];
+    size: i,
+    weight: m,
+    lineHeight: f,
+    letterSpacing: g
+  } = t[e === "medium" ? "b2R" : "b4R"];
   return {
-    fontSize: g,
-    fontWeight: a,
-    lineHeight: l,
-    letterSpacing: m,
-    color: i ? e.grey[30] : e.grey[70]
+    fontSize: i,
+    fontWeight: m,
+    lineHeight: f,
+    letterSpacing: g,
+    color: a ? r.grey[30] : r.grey[70]
   };
 }}}
-`, H = d(function({ size: e = "medium", selected: r, disabled: o = !1, inlineCSS: i, children: g, onClick: a, ...l }, m) {
-  return /* @__PURE__ */ u(c, { children: h.map(g, (n) => {
-    var f;
-    return b(n) && !Array.isArray((f = n == null ? void 0 : n.props) == null ? void 0 : f.children) ? /* @__PURE__ */ u(
-      x,
+`, z = x(function({ size: r = "medium", selected: e, disabled: n = !1, inlineCSS: a, children: i, onClick: m, ...f }, g) {
+  var u;
+  return ((u = s.toArray(i)) == null ? void 0 : u.length) !== 1 ? /* @__PURE__ */ p(
+    b,
+    {
+      as: "button",
+      role: "tab",
+      ref: g,
+      size: r,
+      disabled: n,
+      selected: e,
+      "data-selected": e,
+      "data-disabled": n,
+      onClick: m,
+      css: a,
+      ...f,
+      children: i
+    }
+  ) : /* @__PURE__ */ p(h, { children: s.map(i, (o) => {
+    var l;
+    return $(o) && o.type === y && !Array.isArray((l = o == null ? void 0 : o.props) == null ? void 0 : l.children) ? /* @__PURE__ */ p(
+      y,
       {
         tag: "button",
         role: "tab",
-        ref: m,
+        ref: g,
         "data-shape": "chip",
-        "data-selected": r,
-        disabled: o,
-        variant: r ? "filled" : "outlined",
-        selected: r,
-        onClick: a,
-        inlineCSS: i,
-        ...n.props,
-        ...l
+        "data-selected": e,
+        disabled: n,
+        variant: e ? "filled" : "outlined",
+        selected: e,
+        onClick: m,
+        inlineCSS: a,
+        ...o.props,
+        ...f
       }
-    ) : /* @__PURE__ */ u(
-      $,
+    ) : /* @__PURE__ */ p(
+      b,
       {
         as: "button",
         role: "tab",
-        ref: m,
-        size: e,
-        disabled: o,
-        selected: r,
-        "data-selected": r,
-        "data-disabled": o,
-        onClick: a,
-        css: i,
-        ...l,
-        children: n
+        ref: g,
+        size: r,
+        disabled: n,
+        selected: e,
+        "data-selected": e,
+        "data-disabled": n,
+        onClick: m,
+        css: a,
+        ...f,
+        children: o
       }
     );
   }) });
 });
 export {
-  H as default
+  z as default
 };

package/TextField/TextField.stories.d.ts

@@ -34,3 +34,4 @@ export declare const PasswordVisibility: Story;
 export declare const Success: Story;
 export declare const Error: Story;
 export declare const WithScreenReaderSupport: Story;
+export declare const withUseForm: Story;

package/Tooltip/Tooltip.cjs

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

package/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps, Size } from '../typings/component';
 
 export interface TooltipOffset {
     x?: number;
@@ -12,6 +12,7 @@ export interface TooltipProps extends GeneralComponentProps<Omit<HTMLAttributes<
     title?: ReactNode;
     body?: ReactNode;
     endAdornment?: ReactNode;
+    size?: Extract<Size, 'small' | 'medium'>;
     open?: boolean;
     closer?: boolean;
     onClose?: (e: SyntheticEvent) => void;