@dotss/ui 0.0.10 → 0.0.11

package/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/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/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/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/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/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,35 +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,
@@ -298,5 +304,5 @@ const m = k.button`
   );
 });
 export {
-  B as default
+  V as default
 };

package/ChainPicker/ChainPicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),l=require("react"),A=require("@emotion/styled"),U=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),B=a=>a&&a.__esModule?a:{default:a},T=B(A),G=T.default.ul`
+"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;
@@ -8,7 +8,7 @@
   position: relative;
   cursor: grab;
   transition: transform 0.3s ease-out;
-`,J=T.default.div`
+`,ee=H.default.div`
   position: relative;
   width: auto;
   height: fit-content;
@@ -30,7 +30,17 @@
     );
     pointer-events: none;
   }
-`,x=T.default.li`
+
+  @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;
@@ -38,7 +48,7 @@
   scroll-snap-align: start;
   position: relative;
 
-  ${({theme:{palette:{grey:a},typography:{h2M:e},spacing:{content:o}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing,color:a[100],padding:o(3)})};
+  ${({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:a,theme:{palette:{grey:e},typography:{h4M:o}}})=>a?{"&, & *":{color:`${e[100]} !important`}}:{color:`${e[30]} !important`,fontSize:`${o.size} !important`,fontWeight:`${o.weight} !important`,lineHeight:`${o.lineHeight} !important`,letterSpacing:`${o.letterSpacing} !important`,"& *":{color:`${e[30]} !important`}}}
-`,k=3,K=l.forwardRef(function({column:e,value:o=e[0].value,onChange:y,renderLabel:P,inlineCSS:j,wrapperProps:S,...w},C){const s=l.useRef(null),r=54,L=e.findIndex(n=>n.value===o),[g,p]=l.useState(L*r),[M,I]=l.useState(!1),[_,O]=l.useState(0),[R,E]=l.useState(0),Y=l.useId(),{isHoverPossible:q}=U.default(),D=n=>{I(!0),E(n),O(g)},H=n=>{if(!M)return;const i=R-n;let t=_+i;const c=r*(e.length-1);t<0?t=0:t>c&&(t=c),p(t),s.current&&(s.current.children[0].scrollTop=t)},N=n=>D(n.clientY),W=n=>D(n.touches[0].clientY),z=n=>H(n.clientY),F=n=>H(n.touches[0].clientY),v=n=>{if(!M||(I(!1),!q&&n.type==="mouseup"))return;if(Math.abs(_-g)<k){const h=n.target.closest("[data-index]");if(h){const m=Number(h.dataset.index);if(e[m]&&s.current){const b=s.current.children[0];b.scrollTo({top:m*r,behavior:"smooth"});const $=()=>{Math.abs(b.scrollTop-m*r)<1&&(y(e[m].value),b.removeEventListener("scroll",$))};b.addEventListener("scroll",$)}}return}let i=Math.round(g/r),t=i*r;const c=r*(e.length-1);t<0?(t=0,i=0):t>c&&(t=c,i=e.length-1);const d=u=>{if(Math.abs(u-t)<1)p(t),s.current&&(s.current.children[0].scrollTop=t);else{const h=u+(t-u)/5;p(h),s.current&&(s.current.children[0].scrollTop=h),requestAnimationFrame(()=>d(h))}};requestAnimationFrame(()=>d(g)),e[i]&&y(e[i].value)};return l.useLayoutEffect(()=>{const i=e.findIndex(t=>t.value===o)*r;p(i),s.current&&(s.current.children[0].scrollTop=i)},[o,e,r]),f.jsx(J,{ref:s,...S,css:S==null?void 0:S.inlineCSS,children:f.jsx(G,{ref:C,css:j,...w,onMouseDown:N,onMouseMove:z,onMouseUp:v,onMouseLeave:v,onTouchStart:W,onTouchMove:F,onTouchEnd:v,onTouchCancel:v,children:e.map((n,i)=>{const t=e.findIndex(u=>u.value===o),c=t===0?0:Math.round(g/r),d=i===c;return f.jsxs(l.Fragment,{children:[i===0&&f.jsx(x,{className:"chain-picker-item","data-index":i,selected:!1,distance:(t+1)*-1}),f.jsx(x,{className:"chain-picker-item","data-index":i,"data-selected":d,selected:d,distance:i-t,children:P?P(n,d):n.label}),i===e.length-1&&f.jsx(x,{className:"chain-picker-item","data-index":i,selected:!1,distance:e.length-t})]},`${Y}_${n.label}`)})})})});exports.SCROLL_POSITION_THRESHOLD=k;exports.default=K;
+  ${({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/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;