@dotss/ui 0.0.12 → 1.0.0

package/Menu/MenuBlock/MenuBlock.cjs

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

package/Menu/MenuBlock/MenuBlock.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface MenuBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
     startAdornment?: ReactNode;

package/Menu/MenuBlock/MenuBlock.es.js

@@ -1,9 +1,9 @@
 import { jsxs as x, jsx as l } from "@emotion/react/jsx-runtime";
 import { forwardRef as w } from "react";
 import y from "../../Icon/Icon.es.js";
-import $ from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import k from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
 import c from "@emotion/styled";
-const k = c.li`
+const v = c.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
@@ -21,11 +21,11 @@ const k = c.li`
     height: 20px;
     color: ${({
   theme: {
-    palette: { brand: e, grey: o }
+    palette: { brand: e, grey: i }
   },
   selected: t,
   disabled: r
-}) => t ? e.primary.main : r ? o[30] : "inherit"};
+}) => t ? e.primary.main : r ? i[30] : "inherit"};
   }
 
   ${({ ellipsis: e }) => e ? {
@@ -34,26 +34,16 @@ const k = c.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: o }
+    palette: { brand: e, grey: i }
   },
   selected: t,
   isHoverPossible: r
 }) => r ? {
-  "&:hover:not([disabled])": {
-    backgroundColor: t ? e.primary.bg : o[10]
+  "&:hover:not([disabled]), &:focus:not([disabled])": {
+    backgroundColor: t ? e.primary.bg : i[10]
   }
 } : {}}
-
-  &:focus {
-    outline: none;
-    border: 2px solid
-      ${({
-  theme: {
-    palette: { grey: e }
-  }
-}) => e[100]};
-  }
-`, v = c.div`
+`, $ = c.div`
   flex-grow: 1;
 
   ${({ ellipsis: e }) => e ? {
@@ -64,51 +54,51 @@ const k = c.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: o },
+    palette: { brand: e, grey: i },
     typography: { h5B: t, b4R: r }
   },
   selected: p,
   disabled: n
 }) => {
-  let i = {
+  let o = {
     fontSize: r.size,
     fontWeight: r.weight,
     letterSpacing: r.letterSpacing,
     lineHeight: r.lineHeight
   };
-  return p && (i = {
+  return p && (o = {
     fontSize: t.size,
     fontWeight: t.weight,
     letterSpacing: t.letterSpacing,
     lineHeight: t.lineHeight,
     color: e.primary.text
-  }), n && (i.color = o[30]), i;
+  }), n && (o.color = i[30]), o;
 }}}
 `, a = c.div`
   white-space: nowrap;
 `, M = w(function({
-  children: o,
+  children: i,
   startAdornment: t,
   endAdornment: r,
   inlineCSS: p,
   selected: n,
-  disabled: i,
+  disabled: o,
   value: u,
   onClick: h,
   ellipsis: f = !0,
   ...m
 }, g) {
-  const { isHoverPossible: d } = $();
+  const { isHoverPossible: d } = k();
   return /* @__PURE__ */ x(
-    k,
+    v,
     {
       ref: g,
       selected: n,
-      disabled: i,
+      disabled: o,
       "data-value": u,
       isHoverPossible: d,
       onClick: (s) => {
-        s.stopPropagation(), !i && typeof h == "function" && h(s);
+        s.stopPropagation(), !o && typeof h == "function" && h(s);
       },
       ellipsis: f,
       role: "menuitem",
@@ -116,7 +106,7 @@ const k = c.li`
       css: p,
       children: [
         t && /* @__PURE__ */ l(a, { children: t }),
-        /* @__PURE__ */ l(v, { selected: n, disabled: i, ellipsis: f, children: o }),
+        /* @__PURE__ */ l($, { selected: n, disabled: o, ellipsis: f, children: i }),
         !n && r && /* @__PURE__ */ l(a, { children: r }),
         n && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
       ]

package/Menu/MenuButton/MenuButton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),u=require("react"),l=require("../../Button/Button.cjs"),m=u.forwardRef(function({isMenuOpen:n,menuId:a,onClick:o,...i},s){const t=u.useRef(),c=()=>{t.current&&cancelAnimationFrame(t.current),t.current=requestAnimationFrame(()=>{t.current=requestAnimationFrame(()=>{const e=document.getElementById(a);if(e){const r=e.querySelector('[role="menuitem"]');r==null||r.setAttribute("tabindex","0"),r==null||r.focus()}t.current=void 0})})},f=e=>{if(e.stopPropagation(),e.key==="ArrowDown"&&!n){o(e),c();return}if((e.key==="Enter"||e.key===" ")&&!n){o(e),c();return}};return u.useEffect(()=>()=>{t.current&&cancelAnimationFrame(t.current)},[]),d.jsx(l.default,{ref:s,type:"button","aria-haspopup":!0,"aria-expanded":n,"aria-controls":a,onKeyDown:f,onClick:o,...i})});exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),r=require("react"),p=require("../../Button/Button.cjs"),v=r.forwardRef(function({isMenuOpen:n,menuId:a,onClick:u,...l},d){const c=r.useRef(null),t=r.useRef();r.useImperativeHandle(d,()=>c.current);const i=()=>{t.current&&cancelAnimationFrame(t.current);const e=(s=0)=>{const f=document.getElementById(a);if(f){const o=f.querySelector('[role="menuitem"]');if(o){o.setAttribute("tabindex","0"),o.focus(),t.current=void 0;return}}s<10?t.current=requestAnimationFrame(()=>{e(s+1)}):t.current=void 0};t.current=requestAnimationFrame(()=>{e()})},m=e=>{if(e.stopPropagation(),e.key==="ArrowDown"&&!n){e.preventDefault(),u(e),i();return}if((e.key==="Enter"||e.key===" ")&&!n){e.preventDefault(),u(e),i();return}};return r.useEffect(()=>()=>{t.current&&cancelAnimationFrame(t.current)},[]),y.jsx(p.default,{ref:c,type:"button","aria-haspopup":!0,"aria-expanded":n,"aria-controls":a,onKeyDown:m,onClick:u,...l})});exports.default=v;

package/Menu/MenuButton/MenuButton.d.ts

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { ButtonProps } from '../Button/Button';
+import { ButtonProps } from '../../Button/Button';
 
 export interface MenuButtonProps extends ButtonProps {
     isMenuOpen: boolean;

package/Menu/MenuButton/MenuButton.es.js

@@ -1,44 +1,53 @@
-import { jsx as m } from "@emotion/react/jsx-runtime";
-import { forwardRef as s, useRef as d, useEffect as p } from "react";
-import y from "../../Button/Button.es.js";
-const F = s(function({ isMenuOpen: n, menuId: a, onClick: o, ...c }, i) {
-  const t = d(), u = () => {
-    t.current && cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
-      t.current = requestAnimationFrame(() => {
-        const r = document.getElementById(a);
-        if (r) {
-          const e = r.querySelector('[role="menuitem"]');
-          e == null || e.setAttribute("tabindex", "0"), e == null || e.focus();
+import { jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as y, useRef as s, useImperativeHandle as A, useEffect as F } from "react";
+import v from "../../Button/Button.es.js";
+const x = y(function({ isMenuOpen: e, menuId: u, onClick: n, ...m }, l) {
+  const a = s(null), r = s();
+  A(l, () => a.current);
+  const i = () => {
+    r.current && cancelAnimationFrame(r.current);
+    const t = (c = 0) => {
+      const f = document.getElementById(u);
+      if (f) {
+        const o = f.querySelector('[role="menuitem"]');
+        if (o) {
+          o.setAttribute("tabindex", "0"), o.focus(), r.current = void 0;
+          return;
         }
-        t.current = void 0;
-      });
+      }
+      c < 10 ? r.current = requestAnimationFrame(() => {
+        t(c + 1);
+      }) : r.current = void 0;
+    };
+    r.current = requestAnimationFrame(() => {
+      t();
     });
-  }, f = (r) => {
-    if (r.stopPropagation(), r.key === "ArrowDown" && !n) {
-      o(r), u();
+  }, d = (t) => {
+    if (t.stopPropagation(), t.key === "ArrowDown" && !e) {
+      t.preventDefault(), n(t), i();
       return;
     }
-    if ((r.key === "Enter" || r.key === " ") && !n) {
-      o(r), u();
+    if ((t.key === "Enter" || t.key === " ") && !e) {
+      t.preventDefault(), n(t), i();
       return;
     }
   };
-  return p(() => () => {
-    t.current && cancelAnimationFrame(t.current);
-  }, []), /* @__PURE__ */ m(
-    y,
+  return F(() => () => {
+    r.current && cancelAnimationFrame(r.current);
+  }, []), /* @__PURE__ */ p(
+    v,
     {
-      ref: i,
+      ref: a,
       type: "button",
       "aria-haspopup": !0,
-      "aria-expanded": n,
-      "aria-controls": a,
-      onKeyDown: f,
-      onClick: o,
-      ...c
+      "aria-expanded": e,
+      "aria-controls": u,
+      onKeyDown: d,
+      onClick: n,
+      ...m
     }
   );
 });
 export {
-  F as default
+  x as default
 };

package/NumberKeypad/NumberKeypad.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
-import { GeneralComponentProps, Size } from '../typings/component';
-import { CSSValue } from '../typings/utility';
+import { GeneralComponentProps, Size } from '../../typings/component';
+import { CSSValue } from '../../typings/utility';
 import { default as NumberKeypadBlock } from './NumberKeypadBlock';
 
 export interface NumberKeypadProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 import { NumberKeypadProps } from '../NumberKeypad';
 
 export interface NumberKeypadBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<NumberKeypadProps, 'size' | 'disabled'>> {

package/PageControl/PageControl.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface PageControlProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick'>> {
     totalCount?: number;

package/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps, Size } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps, Size } from '../../typings/component';
 
 export interface RadioProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
     size?: Extract<Size, 'medium' | '2xLarge'>;

package/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface RadioGroupProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     name?: string;

package/SegmentedButton/SegmentedButton.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps, Variant } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps, Variant } from '../../typings/component';
 import { default as SegmentedButtonBlock } from './SegmentedButtonBlock';
 
 export interface SegmentedButtonProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {

package/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 import { SegmentedButtonProps } from '../SegmentedButton';
 
 export interface SegmentedButtonBlockProps extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement> & Pick<SegmentedButtonProps, 'variant' | 'color' | 'rounded'>> {

package/Select/Option/Option.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface OptionProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
     value?: string;

package/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { default as Option } from './Option';
-import { GeneralComponentProps, Size, Variant } from '../typings/component';
+import { GeneralComponentProps, Size, Variant } from '../../typings/component';
 
 export interface SelectProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     value: string;

package/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
-import { TypographyBodyKey, TypographyCaptionKey, TypographyHeadlineKey } from '../typings/typography';
-import { CSSValue } from '../typings/utility';
+import { GeneralComponentProps } from '../../typings/component';
+import { TypographyBodyKey, TypographyCaptionKey, TypographyHeadlineKey } from '../../typings/typography';
+import { CSSValue } from '../../typings/utility';
 
 export interface SkeletonProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     ratio?: `${number}:${number}`;

package/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface SliderProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     value: number;

package/Snackbar/Snackbar.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface SnackbarProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     open?: boolean;

package/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface SwitchProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     selected: boolean;

package/Tab/Tab.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps, Size } from '../typings/component';
+import { GeneralComponentProps, Size } from '../../typings/component';
 
 export interface TabProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     value: string;

package/Tab/TabBlock/TabBlock.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, MouseEvent } from 'react';
 import { TabProps } from '../Tab';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface TabBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<TabProps, 'size'>> {
     value: string;

package/TextArea/TextArea.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, TextareaHTMLAttributes } from 'react';
-import { GeneralComponentProps, Size, Variant } from '../typings/component';
+import { GeneralComponentProps, Size, Variant } from '../../typings/component';
 
 export interface TextAreaProps extends GeneralComponentProps<TextareaHTMLAttributes<HTMLTextAreaElement>> {
     value: string;

package/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps, Size, Variant } from '../typings/component';
+import { GeneralComponentProps, Size, Variant } from '../../typings/component';
 
 export interface TextFieldProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
     variant?: Extract<Variant, 'outlined' | 'filled'>;

package/Tooltip/Tooltip.cjs

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

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 { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface TooltipOffset {
     x?: number;
@@ -18,6 +18,8 @@ export interface TooltipProps extends GeneralComponentProps<Omit<HTMLAttributes<
     wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
     offset?: TooltipOffset;
     arrowOffset?: TooltipOffset;
+    titleId?: string;
+    bodyId?: string;
 }
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Tooltip;