@dotss/ui 0.0.8 → 0.0.11

package/BottomSheet/BottomSheetText/BottomSheetText.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),o=require("react"),a=require("@emotion/styled"),d=e=>e&&e.__esModule?e:{default:e},g=d(a),f=g.default.div`
+  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=o.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:r,...l},s){const u=o.useId();return c.jsx(f,{ref:s,type:i,textAlign:n,id:`bottom-sheet-text-${u}`,...l,css:r,children:t})});exports.default=h;

package/{dist/BottomSheet → BottomSheet}/BottomSheetText/BottomSheetText.es.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "@emotion/react/jsx-runtime";
-import { forwardRef as h } from "react";
-import f from "@emotion/styled";
-const a = f.div`
+import { forwardRef as s, useId as f } from "react";
+import m from "@emotion/styled";
+const a = m.div`
   text-align: ${({ textAlign: i }) => i};
 
   ${({
@@ -22,9 +22,21 @@ const a = f.div`
   lineHeight: t.lineHeight,
   letterSpacing: t.letterSpacing
 }}
-`, s = h(function({ children: t, type: e = "main", textAlign: o = "center", inlineCSS: n, ...r }, g) {
-  return /* @__PURE__ */ l(a, { ref: g, type: e, textAlign: o, ...r, css: n, children: t });
+`, d = s(function({ children: t, type: e = "main", textAlign: o = "center", inlineCSS: n, ...r }, g) {
+  const h = f();
+  return /* @__PURE__ */ l(
+    a,
+    {
+      ref: g,
+      type: e,
+      textAlign: o,
+      id: `bottom-sheet-text-${h}`,
+      ...r,
+      css: n,
+      children: t
+    }
+  );
 });
 export {
-  s as default
+  d as default
 };

package/{dist/BottomSheet → BottomSheet}/BottomSheetTitle/BottomSheetTitle.cjs

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

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

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

package/{dist/BottomSheet → BottomSheet}/BottomSheetTitle/BottomSheetTitle.es.js

@@ -1,8 +1,8 @@
-import { jsxs as c, jsx as e } from "@emotion/react/jsx-runtime";
-import { forwardRef as h } from "react";
-import d from "../../Icon/Icon.es.js";
+import { jsxs as d, jsx as e } from "@emotion/react/jsx-runtime";
+import { forwardRef as f, useId as x } from "react";
+import g from "../../Icon/Icon.es.js";
 import o from "@emotion/styled";
-const f = o.div`
+const u = o.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -19,7 +19,7 @@ const f = o.div`
   },
   hideLine: i
 }) => i ? "transparent" : t[10]};
-`, x = o.div`
+`, w = o.div`
   flex-grow: 1;
   text-align: center;
   text-overflow: ellipsis;
@@ -36,23 +36,34 @@ const f = o.div`
   lineHeight: t.lineHeight,
   letterSpacing: t.letterSpacing
 })};
-`, g = o.button`
+`, S = o.button`
   position: absolute;
   top: 50%;
   right: 16px;
   transform: translateY(-50%);
 `, n = o.div`
   min-width: 24px;
-`, v = h(
-  function({ children: i, onClose: r, hideCloseButton: l, hideLine: s, inlineCSS: p, ...a }, m) {
-    return /* @__PURE__ */ c(f, { ref: m, hideLine: s, ...a, css: p, children: [
-      /* @__PURE__ */ e(n, {}),
-      /* @__PURE__ */ e(x, { children: i }),
-      /* @__PURE__ */ e(n, {}),
-      !l && /* @__PURE__ */ e(g, { className: "closeButton", onClick: r, "aria-label": "창 닫기", children: /* @__PURE__ */ e(d, { name: "CloseLine" }) })
-    ] });
+`, T = f(
+  function({ children: i, onClose: l, hideCloseButton: r, hideLine: s, tag: a = "h2", inlineCSS: p, ...m }, c) {
+    const h = x();
+    return /* @__PURE__ */ d(
+      u,
+      {
+        ref: c,
+        hideLine: s,
+        id: `bottom-sheet-title-${h}`,
+        ...m,
+        css: p,
+        children: [
+          /* @__PURE__ */ e(n, {}),
+          /* @__PURE__ */ e(w, { as: a, children: i }),
+          /* @__PURE__ */ e(n, {}),
+          !r && /* @__PURE__ */ e(S, { className: "closeButton", onClick: l, "aria-label": "닫기", children: /* @__PURE__ */ e(g, { name: "CloseLine" }) })
+        ]
+      }
+    );
   }
 );
 export {
-  v as default
+  T as default
 };

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@emotion/react/jsx-runtime"),h=require("react"),C=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),H=require("../utils/getIconLabel/getIconLabel.cjs"),k=require("@emotion/styled"),a=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),R=l=>l&&l.__esModule?l:{default:l},M=R(k),z=M.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("@emotion/react/jsx-runtime"),b=require("react"),M=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),z=require("../utils/getIconLabel/getIconLabel.cjs"),W=require("@emotion/styled"),a=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),j=l=>l&&l.__esModule?l:{default:l},m=j(W),_=m.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7,18 +7,18 @@
     color: inherit;
   }
 
-  ${({theme:{palette:{brand:l,grey:e}},variant:i,color:u})=>{let p={backgroundColor:l.primary.main,color:a.default(l.primary.main,[e.white,e[100]])};return i==="filled"&&u==="secondary"&&(p={backgroundColor:l.secondary,color:a.default(l.secondary,[e.white,e[100]])}),i==="filled"&&u==="tertiary"&&(p={backgroundColor:l.tertiary,color:a.default(l.tertiary,[e.white,e[100]])}),i==="outlined"&&(p={borderColor:e[50],backgroundColor:e.white,color:a.default(e.white,[e.white,e[100]])}),i==="text"&&u==="primary"&&(p={backgroundColor:"transparent",color:a.default("transparent",[e.white,e[100]])}),i==="text"&&u==="secondary"&&(p={backgroundColor:"transparent",color:e[70]}),p}};
+  ${({theme:{palette:{brand:l,grey:e}},variant:i,color:r})=>{let p={backgroundColor:l.primary.main,color:a.default(l.primary.main,[e.white,e[100]])};return i==="filled"&&r==="secondary"&&(p={backgroundColor:l.secondary,color:a.default(l.secondary,[e.white,e[100]])}),i==="filled"&&r==="tertiary"&&(p={backgroundColor:l.tertiary,color:a.default(l.tertiary,[e.white,e[100]])}),i==="outlined"&&(p={borderColor:e[50],backgroundColor:e.white,color:a.default(e.white,[e.white,e[100]])}),i==="text"&&r==="primary"&&(p={backgroundColor:"transparent",color:a.default("transparent",[e.white,e[100]])}),i==="text"&&r==="secondary"&&(p={backgroundColor:"transparent",color:e[70]}),p}};
 
-  ${({theme:{spacing:l,typography:e},variant:i,size:u,startAdornment:p,endAdornment:o,iconOnly:r})=>{let f={gap:l.content(1),padding:10,borderRadius:8,fontSize:e.b4M.size,fontWeight:e.b4M.weight,lineHeight:e.b4M.lineHeight,letterSpacing:e.b4M.letterSpacing,"& svg":{width:20,height:20}};if(u==="2xLarge"){const{h0B:x}=e;let t="26px 24px";p&&(t=i==="text"?"26px 16px 26px 12px":"26px 36px 26px 24px"),o&&(t=i==="text"?"26px 12px 26px 16px":"26px 24px 26px 36px"),p&&o&&(t=i==="text"?"26px 12px":"26px 24px"),r&&(t="26px 25px"),f={gap:l.content(3),maxHeight:100,padding:t,borderRadius:20,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:48,height:48}}}if(u==="xLarge"){const{h4B:x}=e;let t="16px 12px";p&&(t=i==="text"?"16px 8px 16px 4px":"16px 16px 16px 12px"),o&&(t=i==="text"?"16px 4px 16px 8px":"16px 12px 16px 16px"),p&&o&&(t=i==="text"?"16px 4px":"16px 12px"),r&&(t="16px 15px"),f={gap:l.content(2),maxHeight:56,padding:t,borderRadius:12,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:24,height:24}}}if(u==="large"){const{b2M:x}=e;let t="12px 8px";p&&(t=i==="text"?"12px 8px 12px 4px":"12px 12px 12px 8px"),o&&(t=i==="text"?"12px 4px 12px 8px":"12px 8px 12px 12px"),p&&o&&(t=i==="text"?"12px 4px":"12px 8px"),r&&(t="12px 11px"),f={gap:6,maxHeight:48,padding:t,borderRadius:10,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:24,height:24}}}if(u==="medium"){const{b4M:x}=e;let t="10px 8px";p&&(t=i==="text"?"10px 8px 10px 4px":"10px 10px 10px 8px"),o&&(t=i==="text"?"10px 4px 10px 8px":"10px 8px 10px 10px"),p&&o&&(t=i==="text"?"10px 4px":"10px 8px"),r&&(t="10px 9px"),f={gap:l.content(1),maxHeight:40,padding:t,borderRadius:8,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:20,height:20}}}if(u==="small"){const{c3M:x}=e;let t="8px 6px";p&&(t=i==="text"?"8px 8px 8px 4px":"8px 8px 8px 6px"),o&&(t=i==="text"?"8px 4px 8px 8px":"8px 6px 8px 8px"),p&&o&&(t=i==="text"?"8px 6px":"8px 4px"),r&&(t="8px 7px"),f={gap:l.content(1),maxHeight:32,padding:t,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}}if(u==="xSmall"){const{c3M:x}=e;let t="4px 6px";p&&(t=i==="text"?"4px 8px 4px 4px":"4px 8px 4px 6px"),o&&(t=i==="text"?"4px 4px 4px 8px":"4px 6px 4px 8px"),p&&o&&(t=i==="text"?"4px":"4px 6px"),r&&(t="4px 3px"),r?f={gap:l.content(1),maxHeight:24,width:24,height:24,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}:f={gap:l.content(1),maxHeight:24,padding:t,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}}return i==="text"&&u==="xLarge"&&(f={...f,borderWidth:1.5}),f}};
+  ${({theme:{spacing:l,typography:e},variant:i,size:r,startAdornment:p,endAdornment:o,iconOnly:f})=>{let u={gap:l.content(1),padding:10,borderRadius:8,fontSize:e.b4M.size,fontWeight:e.b4M.weight,lineHeight:e.b4M.lineHeight,letterSpacing:e.b4M.letterSpacing,"& svg":{width:20,height:20}};if(r==="2xLarge"){const{h0B:x}=e;let t="26px 24px";p&&(t=i==="text"?"26px 16px 26px 12px":"26px 36px 26px 24px"),o&&(t=i==="text"?"26px 12px 26px 16px":"26px 24px 26px 36px"),p&&o&&(t=i==="text"?"26px 12px":"26px 24px"),f&&(t="26px 25px"),u={gap:l.content(3),maxHeight:100,padding:t,borderRadius:20,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:48,height:48}}}if(r==="xLarge"){const{h4B:x}=e;let t="16px 12px";p&&(t=i==="text"?"16px 8px 16px 4px":"16px 16px 16px 12px"),o&&(t=i==="text"?"16px 4px 16px 8px":"16px 12px 16px 16px"),p&&o&&(t=i==="text"?"16px 4px":"16px 12px"),f&&(t="16px 15px"),u={gap:l.content(2),maxHeight:56,padding:t,borderRadius:12,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:24,height:24}}}if(r==="large"){const{b2M:x}=e;let t="12px 8px";p&&(t=i==="text"?"12px 8px 12px 4px":"12px 12px 12px 8px"),o&&(t=i==="text"?"12px 4px 12px 8px":"12px 8px 12px 12px"),p&&o&&(t=i==="text"?"12px 4px":"12px 8px"),f&&(t="12px 11px"),u={gap:6,maxHeight:48,padding:t,borderRadius:10,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:24,height:24}}}if(r==="medium"){const{b4M:x}=e;let t="10px 8px";p&&(t=i==="text"?"10px 8px 10px 4px":"10px 10px 10px 8px"),o&&(t=i==="text"?"10px 4px 10px 8px":"10px 8px 10px 10px"),p&&o&&(t=i==="text"?"10px 4px":"10px 8px"),f&&(t="10px 9px"),u={gap:l.content(1),maxHeight:40,padding:t,borderRadius:8,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:20,height:20}}}if(r==="small"){const{c3M:x}=e;let t="8px 6px";p&&(t=i==="text"?"8px 8px 8px 4px":"8px 8px 8px 6px"),o&&(t=i==="text"?"8px 4px 8px 8px":"8px 6px 8px 8px"),p&&o&&(t=i==="text"?"8px 6px":"8px 4px"),f&&(t="8px 7px"),u={gap:l.content(1),maxHeight:32,padding:t,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}}if(r==="xSmall"){const{c3M:x}=e;let t="4px 6px";p&&(t=i==="text"?"4px 8px 4px 4px":"4px 8px 4px 6px"),o&&(t=i==="text"?"4px 4px 4px 8px":"4px 6px 4px 8px"),p&&o&&(t=i==="text"?"4px":"4px 6px"),f&&(t="4px 3px"),f?u={gap:l.content(1),maxHeight:24,width:24,height:24,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}:u={gap:l.content(1),maxHeight:24,padding:t,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}}return i==="text"&&r==="xLarge"&&(u={...u,borderWidth:1.5}),u}};
 
   ${({rounded:l})=>l?{}:{borderRadius:"unset"}}
 
-  ${({theme:{palette:{brand:l,grey:e}},variant:i,color:u,isHoverPossible:p})=>{let o={'&:active:not([aria-disabled="true"])':{backgroundColor:l.primary.press},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:l.primary.press}}:{}};return i==="filled"&&u==="secondary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[100]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[100]}}:{}}),i==="filled"&&u==="tertiary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[70]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[70]}}:{}}),(i==="outlined"||i==="text")&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[10]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[10]}}:{}}),o}}
+  ${({theme:{palette:{brand:l,grey:e}},variant:i,color:r,isHoverPossible:p})=>{let o={'&:active:not([aria-disabled="true"])':{backgroundColor:l.primary.press},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:l.primary.press}}:{}};return i==="filled"&&r==="secondary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[100]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[100]}}:{}}),i==="filled"&&r==="tertiary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[70]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[70]}}:{}}),(i==="outlined"||i==="text")&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[10]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[10]}}:{}}),o}}
 
   &[aria-disabled="true"] {
     cursor: not-allowed;
-    ${({theme:{palette:{brand:l,grey:e}},variant:i,color:u})=>{let p={backgroundColor:l.primary.disable,color:a.default(l.primary.disable,[e[30],e.white])};return i==="filled"&&u==="secondary"&&(p={backgroundColor:e[10],color:a.default(e[10],[e[30],e.white])}),i==="outlined"&&(p={borderColor:e[30],backgroundColor:e[10],color:a.default(e[30],[e[30],e.white])}),i==="text"&&(p={color:a.default(e[30],[e[30],e.white])}),p}};
+    ${({theme:{palette:{brand:l,grey:e}},variant:i,color:r})=>{let p={backgroundColor:l.primary.disable,color:a.default(l.primary.disable,[e[30],e.white])};return i==="filled"&&r==="secondary"&&(p={backgroundColor:e[10],color:a.default(e[10],[e[30],e.white])}),i==="outlined"&&(p={borderColor:e[30],backgroundColor:e[10],color:a.default(e[30],[e[30],e.white])}),i==="text"&&(p={color:a.default(e[30],[e[30],e.white])}),p}};
   }
 
   ${({fullWidth:l})=>l?{width:"100%"}:null};
-`,W=h.forwardRef(function({children:e,variant:i="filled",size:u="medium",color:p="primary",startAdornment:o,endAdornment:r,iconOnly:f,fullWidth:x,inlineCSS:t,rounded:s=!0,disabled:g,...d},b){const{isHoverPossible:n}=C.default(),w=()=>{if(!f)return;if(d["aria-label"])return d["aria-label"];const c=o||r||e;if(h.isValidElement(c))return H.default(c.props.name)};return S.jsxs(z,{ref:b,variant:i,size:u,color:p,fullWidth:x,rounded:s,startAdornment:o,endAdornment:r,iconOnly:f,isHoverPossible:n,"aria-disabled":g,"aria-label":w(),...d,css:t,children:[o,!f&&e,r]})});exports.default=W;
+`,q=b.forwardRef(function({children:e,variant:i="filled",size:r="medium",color:p="primary",startAdornment:o,endAdornment:f,iconOnly:u,fullWidth:x,inlineCSS:t,rounded:n=!0,disabled:h,onClick:c,onKeyDown:s,...g},w){const{isHoverPossible:S}=M.default(),H=()=>{if(!u)return;if(g["aria-label"])return g["aria-label"];const d=o||f||e;if(b.isValidElement(d))return z.default(d.props.name)},C=d=>{h||c==null||c(d)},k=d=>{h||s==null||s(d)};return R.jsxs(_,{ref:w,variant:i,size:r,color:p,fullWidth:x,rounded:n,startAdornment:o,endAdornment:f,iconOnly:u,isHoverPossible:S,"aria-disabled":h,"aria-label":H(),onClick:C,onKeyDown:k,...g,css:t,children:[o,!u&&e,f]})});exports.default=q;

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

@@ -1,10 +1,10 @@
-import { jsxs as n } from "@emotion/react/jsx-runtime";
-import { forwardRef as w, isValidElement as S } from "react";
-import C from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import H from "../utils/getIconLabel/getIconLabel.es.js";
-import k from "@emotion/styled";
+import { jsxs as m } from "@emotion/react/jsx-runtime";
+import { forwardRef as k, isValidElement as z } from "react";
+import R from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import W from "../utils/getIconLabel/getIconLabel.es.js";
+import M from "@emotion/styled";
 import c from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const m = k.button`
+const j = M.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -249,7 +249,7 @@ const m = k.button`
   ${({ fullWidth: l }) => l ? {
   width: "100%"
 } : null};
-`, B = w(function({
+`, V = k(function({
   children: e,
   variant: i = "filled",
   size: r = "medium",
@@ -259,33 +259,41 @@ const m = k.button`
   iconOnly: h,
   fullWidth: x,
   inlineCSS: t,
-  rounded: d = !0,
-  disabled: u,
-  ...a
-}, s) {
-  const { isHoverPossible: b } = C();
-  return /* @__PURE__ */ n(
-    m,
+  rounded: b = !0,
+  disabled: g,
+  onClick: d,
+  onKeyDown: u,
+  ...s
+}, n) {
+  const { isHoverPossible: w } = R(), S = () => {
+    if (!h) return;
+    if (s["aria-label"]) return s["aria-label"];
+    const a = o || f || e;
+    if (z(a))
+      return W(a.props.name);
+  }, H = (a) => {
+    g || d == null || d(a);
+  }, C = (a) => {
+    g || u == null || u(a);
+  };
+  return /* @__PURE__ */ m(
+    j,
     {
-      ref: s,
+      ref: n,
       variant: i,
       size: r,
       color: p,
       fullWidth: x,
-      rounded: d,
+      rounded: b,
       startAdornment: o,
       endAdornment: f,
       iconOnly: h,
-      isHoverPossible: b,
-      "aria-disabled": u,
-      "aria-label": (() => {
-        if (!h) return;
-        if (a["aria-label"]) return a["aria-label"];
-        const g = o || f || e;
-        if (S(g))
-          return H(g.props.name);
-      })(),
-      ...a,
+      isHoverPossible: w,
+      "aria-disabled": g,
+      "aria-label": S(),
+      onClick: H,
+      onKeyDown: C,
+      ...s,
       css: t,
       children: [
         o,
@@ -296,5 +304,5 @@ const m = k.button`
   );
 });
 export {
-  B as default
+  V as default
 };

package/ChainPicker/ChainPicker.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@emotion/react/jsx-runtime"),l=require("react"),B=require("@emotion/styled"),G=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),J=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),Q=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),X=s=>s&&s.__esModule?s:{default:s},H=X(B),Z=H.default.div`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 162px;
+  position: relative;
+  cursor: grab;
+  transition: transform 0.3s ease-out;
+`,ee=H.default.div`
+  position: relative;
+  width: auto;
+  height: fit-content;
+  overflow: hidden;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-100%);
+    background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 0.6) 10%,
+      rgba(255, 255, 255, 0) 20%,
+      rgba(255, 255, 255, 0) 80%,
+      rgba(255, 255, 255, 0.6) 90%,
+      rgba(255, 255, 255, 1) 100%
+    );
+    pointer-events: none;
+  }
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({theme:s})=>s.palette.grey[100]} solid 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({focusWithin:s,theme:t})=>s?{outline:`${t.palette.grey[100]} solid 2px`}:{}}
+  }
+`,m=H.default.div`
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+  position: relative;
+
+  ${({theme:{palette:{grey:s},typography:{h2M:t},spacing:{content:r}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,color:s[100],padding:r(3)})};
+
+  ${({selected:s,theme:{palette:{grey:t},typography:{h4M:r}}})=>s?{"&, & *":{color:`${t[100]} !important`}}:{color:`${t[30]} !important`,fontSize:`${r.size} !important`,fontWeight:`${r.weight} !important`,lineHeight:`${r.lineHeight} !important`,letterSpacing:`${r.letterSpacing} !important`,"& *":{color:`${t[30]} !important`}}}
+`,_=3,te=l.forwardRef(function({column:t,value:r=t[0].value,onChange:y,renderLabel:k,inlineCSS:C,wrapperProps:g,thumbProps:R,...j},q){const T=t.findIndex(i=>i.value===r),p=l.useRef(T),o=l.useRef(null),[f,S]=l.useState(T*54),[w,P]=l.useState(!1),[D,E]=l.useState(0),[L,O]=l.useState(0),Y=l.useId(),{isHoverPossible:N}=J.default(),{isKeyboardMode:W}=Q.default(),{hasFocus:F}=G.default({ref:o}),I=i=>{P(!0),O(i),E(f)},M=i=>{if(!w)return;const e=L-i;let n=D+e;const a=54*(t.length-1);n<0?n=0:n>a&&(n=a),S(n),o.current&&(o.current.children[0].scrollTop=n)},z=i=>{var n,a;i.stopPropagation();let e=p.current;i.key==="ArrowUp"?(e+=1,e>t.length-1&&(e=0)):i.key==="ArrowDown"?(e-=1,e<0&&(e=t.length-1)):i.key==="PageUp"?(e+=5,e>t.length-1&&(e=0)):i.key==="PageDown"?(e-=5,e<0&&(e=t.length-1)):i.key==="Home"?e=0:i.key==="End"&&(e=t.length-1),y(t[e].value),p.current=e,(a=(n=o.current)==null?void 0:n.querySelector(`.chain-picker-item[data-index="${p.current}"]`))==null||a.focus()},A=i=>I(i.clientY),K=i=>I(i.touches[0].clientY),U=i=>M(i.clientY),V=i=>M(i.touches[0].clientY),v=i=>{if(!w||(P(!1),!N&&i.type==="mouseup"))return;if(Math.abs(D-f)<_){const u=i.target.closest("[data-index]");if(u){const x=Number(u.dataset.index);if(t[x]&&o.current){const b=o.current.children[0];b.scrollTo({top:x*54,behavior:"smooth"});const $=()=>{Math.abs(b.scrollTop-x*54)<1&&(y(t[x].value),b.removeEventListener("scroll",$))};b.addEventListener("scroll",$)}}return}let e=Math.round(f/54),n=e*54;const a=54*(t.length-1);n<0?(n=0,e=0):n>a&&(n=a,e=t.length-1),p.current=e;const c=d=>{if(Math.abs(d-n)<1)S(n),o.current&&(o.current.children[0].scrollTop=n);else{const u=d+(n-d)/5;S(u),o.current&&(o.current.children[0].scrollTop=u),requestAnimationFrame(()=>c(u))}};requestAnimationFrame(()=>c(f)),t[e]&&y(t[e].value)};return l.useLayoutEffect(()=>{const e=t.findIndex(n=>n.value===r)*54;S(e),o.current&&(o.current.children[0].scrollTop=e)},[r,t,54]),h.jsx(ee,{ref:o,...g,css:g==null?void 0:g.inlineCSS,focusWithin:W&&F,children:h.jsx(Z,{role:"group",ref:q,css:C,...j,onMouseDown:A,onMouseMove:U,onMouseUp:v,onMouseLeave:v,onTouchStart:K,onTouchMove:V,onTouchEnd:v,onTouchCancel:v,children:t.map((i,e)=>{const n=t.findIndex(d=>d.value===r),a=n===0?0:Math.round(f/54),c=e===a;return h.jsxs(l.Fragment,{children:[e===0&&h.jsx(m,{className:"chain-picker-item","data-index":e-1,selected:!1,distance:(n+1)*-1}),h.jsx(m,{className:"chain-picker-item","data-index":e,"data-selected":c,selected:c,distance:e-n,role:"spinbutton",tabIndex:c?0:-1,"aria-hidden":c?"false":"true","aria-valuenow":i.value,"aria-valuetext":i.ariaValueText??i.label,"aria-valuemin":t[0].value,"aria-valuemax":t[t.length-1].value,...R,onKeyDown:z,children:k?k(i,c):i.label}),e===t.length-1&&h.jsx(m,{className:"chain-picker-item","data-index":e+1,selected:!1,distance:t.length-n})]},`${Y}_${i.label}`)})})})});exports.SCROLL_POSITION_THRESHOLD=_;exports.default=te;

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

@@ -5,13 +5,15 @@ export declare const SCROLL_POSITION_THRESHOLD = 3;
 export interface ChainPickerItem {
     label: string;
     value: number;
+    ariaValueText?: string;
 }
-export interface ChainPickerProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLUListElement>, 'onChange'>> {
+export interface ChainPickerProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     column: ChainPickerItem[];
     value?: number;
     onChange: (selectedValue: number) => void;
     renderLabel?: (item: ChainPickerItem, isSelected: boolean) => ReactNode;
     wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    thumbProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
 }
-declare const ChainPicker: import('react').ForwardRefExoticComponent<ChainPickerProps & import('react').RefAttributes<HTMLUListElement>>;
+declare const ChainPicker: import('react').ForwardRefExoticComponent<ChainPickerProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ChainPicker;

package/ChainPicker/ChainPicker.es.js

@@ -0,0 +1,226 @@
+import { jsx as f, jsxs as B } from "@emotion/react/jsx-runtime";
+import { forwardRef as G, useRef as C, useState as b, useId as J, useLayoutEffect as Q, Fragment as X } from "react";
+import H from "@emotion/styled";
+import Z from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+import ee from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import te from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+const ie = H.div`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 162px;
+  position: relative;
+  cursor: grab;
+  transition: transform 0.3s ease-out;
+`, ne = H.div`
+  position: relative;
+  width: auto;
+  height: fit-content;
+  overflow: hidden;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-100%);
+    background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 0.6) 10%,
+      rgba(255, 255, 255, 0) 20%,
+      rgba(255, 255, 255, 0) 80%,
+      rgba(255, 255, 255, 0.6) 90%,
+      rgba(255, 255, 255, 1) 100%
+    );
+    pointer-events: none;
+  }
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: a }) => a.palette.grey[100]} solid 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: a, theme: t }) => a ? {
+  outline: `${t.palette.grey[100]} solid 2px`
+} : {}}
+  }
+`, y = H.div`
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+  position: relative;
+
+  ${({
+  theme: {
+    palette: { grey: a },
+    typography: { h2M: t },
+    spacing: { content: r }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing,
+  color: a[100],
+  padding: r(3)
+})};
+
+  ${({
+  selected: a,
+  theme: {
+    palette: { grey: t },
+    typography: { h4M: r }
+  }
+}) => a ? {
+  "&, & *": {
+    color: `${t[100]} !important`
+  }
+} : {
+  color: `${t[30]} !important`,
+  fontSize: `${r.size} !important`,
+  fontWeight: `${r.weight} !important`,
+  lineHeight: `${r.lineHeight} !important`,
+  letterSpacing: `${r.letterSpacing} !important`,
+  "& *": {
+    color: `${t[30]} !important`
+  }
+}}
+`, oe = 3, fe = G(function({
+  column: t,
+  value: r = t[0].value,
+  onChange: x,
+  renderLabel: k,
+  inlineCSS: E,
+  wrapperProps: g,
+  thumbProps: Y,
+  ...L
+}, W) {
+  const w = t.findIndex((i) => i.value === r), u = C(w), o = C(null), [h, p] = b(w * 54), [P, T] = b(!1), [$, F] = b(0), [N, R] = b(0), z = J(), { isHoverPossible: A } = ee(), { isKeyboardMode: K } = te(), { hasFocus: O } = Z({ ref: o }), D = (i) => {
+    T(!0), R(i), F(h);
+  }, I = (i) => {
+    if (!P) return;
+    const e = N - i;
+    let n = $ + e;
+    const s = 54 * (t.length - 1);
+    n < 0 ? n = 0 : n > s && (n = s), p(n), o.current && (o.current.children[0].scrollTop = n);
+  }, j = (i) => {
+    var n, s;
+    i.stopPropagation();
+    let e = u.current;
+    i.key === "ArrowUp" ? (e += 1, e > t.length - 1 && (e = 0)) : i.key === "ArrowDown" ? (e -= 1, e < 0 && (e = t.length - 1)) : i.key === "PageUp" ? (e += 5, e > t.length - 1 && (e = 0)) : i.key === "PageDown" ? (e -= 5, e < 0 && (e = t.length - 1)) : i.key === "Home" ? e = 0 : i.key === "End" && (e = t.length - 1), x(t[e].value), u.current = e, (s = (n = o.current) == null ? void 0 : n.querySelector(`.chain-picker-item[data-index="${u.current}"]`)) == null || s.focus();
+  }, q = (i) => D(i.clientY), U = (i) => D(i.touches[0].clientY), _ = (i) => I(i.clientY), V = (i) => I(i.touches[0].clientY), m = (i) => {
+    if (!P || (T(!1), !A && i.type === "mouseup")) return;
+    if (Math.abs($ - h) < oe) {
+      const d = i.target.closest("[data-index]");
+      if (d) {
+        const S = Number(d.dataset.index);
+        if (t[S] && o.current) {
+          const v = o.current.children[0];
+          v.scrollTo({
+            top: S * 54,
+            behavior: "smooth"
+          });
+          const M = () => {
+            Math.abs(v.scrollTop - S * 54) < 1 && (x(t[S].value), v.removeEventListener("scroll", M));
+          };
+          v.addEventListener("scroll", M);
+        }
+      }
+      return;
+    }
+    let e = Math.round(h / 54), n = e * 54;
+    const s = 54 * (t.length - 1);
+    n < 0 ? (n = 0, e = 0) : n > s && (n = s, e = t.length - 1), u.current = e;
+    const l = (c) => {
+      if (Math.abs(c - n) < 1)
+        p(n), o.current && (o.current.children[0].scrollTop = n);
+      else {
+        const d = c + (n - c) / 5;
+        p(d), o.current && (o.current.children[0].scrollTop = d), requestAnimationFrame(() => l(d));
+      }
+    };
+    requestAnimationFrame(() => l(h)), t[e] && x(t[e].value);
+  };
+  return Q(() => {
+    const e = t.findIndex((n) => n.value === r) * 54;
+    p(e), o.current && (o.current.children[0].scrollTop = e);
+  }, [r, t, 54]), /* @__PURE__ */ f(
+    ne,
+    {
+      ref: o,
+      ...g,
+      css: g == null ? void 0 : g.inlineCSS,
+      focusWithin: K && O,
+      children: /* @__PURE__ */ f(
+        ie,
+        {
+          role: "group",
+          ref: W,
+          css: E,
+          ...L,
+          onMouseDown: q,
+          onMouseMove: _,
+          onMouseUp: m,
+          onMouseLeave: m,
+          onTouchStart: U,
+          onTouchMove: V,
+          onTouchEnd: m,
+          onTouchCancel: m,
+          children: t.map((i, e) => {
+            const n = t.findIndex((c) => c.value === r), s = n === 0 ? 0 : Math.round(h / 54), l = e === s;
+            return /* @__PURE__ */ B(X, { children: [
+              e === 0 && /* @__PURE__ */ f(
+                y,
+                {
+                  className: "chain-picker-item",
+                  "data-index": e - 1,
+                  selected: !1,
+                  distance: (n + 1) * -1
+                }
+              ),
+              /* @__PURE__ */ f(
+                y,
+                {
+                  className: "chain-picker-item",
+                  "data-index": e,
+                  "data-selected": l,
+                  selected: l,
+                  distance: e - n,
+                  role: "spinbutton",
+                  tabIndex: l ? 0 : -1,
+                  "aria-hidden": l ? "false" : "true",
+                  "aria-valuenow": i.value,
+                  "aria-valuetext": i.ariaValueText ?? i.label,
+                  "aria-valuemin": t[0].value,
+                  "aria-valuemax": t[t.length - 1].value,
+                  ...Y,
+                  onKeyDown: j,
+                  children: k ? k(i, l) : i.label
+                }
+              ),
+              e === t.length - 1 && /* @__PURE__ */ f(
+                y,
+                {
+                  className: "chain-picker-item",
+                  "data-index": e + 1,
+                  selected: !1,
+                  distance: t.length - n
+                }
+              )
+            ] }, `${z}_${i.label}`);
+          })
+        }
+      )
+    }
+  );
+});
+export {
+  oe as SCROLL_POSITION_THRESHOLD,
+  fe as default
+};

package/{dist/ChainPicker → ChainPicker}/ChainPicker.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./ChainPicker').ChainPickerProps & import('react').RefAttributes<HTMLUListElement>>;
+    component: import('react').ForwardRefExoticComponent<import('./ChainPicker').ChainPickerProps & import('react').RefAttributes<HTMLDivElement>>;
     tags: string[];
 };
 export default meta;

package/Checkbox/Checkbox.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),f=require("react"),c=require("@emotion/styled"),C=require("../core/useTheme.cjs"),h=t=>t&&t.__esModule?t:{default:t},p=h(c),x=p.default.span`
+  position: relative;
+  display: inline-flex;
+`,m=p.default.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  appearance: none;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;function y({size:t,checked:n,disabled:a,color:r="primary"}){const{palette:{brand:i,grey:e,background:d}}=C.default();let o=e.white,s=e[50],u=e[20];return n&&(o=r==="primary"?i.primary.main:i[r],s=r==="primary"?i.primary.main:i[r],u=e.white),n&&a&&(o=e[30],s=e[30],u=e[10]),!n&&a&&(o=d.primary,s=e[30],u=e[20]),l.jsxs("svg",{width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,focusable:"false",children:[l.jsx("path",{d:"M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z",fill:o}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z",fill:s}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z",fill:u})]})}const b=f.forwardRef(function({size:n="medium",color:a="primary",checked:r,disabled:i,inlineCSS:e,...d},o){return l.jsxs(x,{ref:o,css:e,children:[l.jsx(m,{type:"checkbox",checked:r,disabled:i,...d}),l.jsx(y,{size:n,color:a,checked:r,disabled:i})]})});exports.default=b;