@dotss/ui 1.7.1 → 1.8.0

package/Button/Button.cjs

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

package/Button/Button.d.ts

@@ -11,6 +11,7 @@ export type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponent
     iconOnly?: boolean;
     fullWidth?: boolean;
     rounded?: boolean;
+    underlined?: boolean;
     loading?: boolean;
     loadingPosition?: 'start' | 'end';
     loadingIndicator?: ReactNode;

package/Button/Button.es.js

@@ -1,12 +1,12 @@
-import { jsxs as E, jsx as g, Fragment as F } from "@emotion/react/jsx-runtime";
-import { forwardRef as T, isValidElement as V } from "react";
+import { jsxs as F, jsx as g, Fragment as T } from "@emotion/react/jsx-runtime";
+import { forwardRef as V, isValidElement as q } from "react";
 import k from "../Box/Box.es.js";
-import q from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
-import G from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import J from "../utils/getIconLabel/getIconLabel.es.js";
-import Q from "@emotion/styled";
+import G from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
+import J from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import Q from "../utils/getIconLabel/getIconLabel.es.js";
+import U from "@emotion/styled";
 import h from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const U = Q.button`
+const X = U.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -198,6 +198,10 @@ const U = Q.button`
   borderRadius: "unset"
 }}
 
+  ${({ underlined: l }) => l ? {
+  textDecoration: "underline"
+} : {}}
+
   ${({
   theme: {
     palette: { brand: l, grey: e }
@@ -252,7 +256,7 @@ const U = Q.button`
   ${({ fullWidth: l }) => l ? {
   width: "100%"
 } : null};
-`, v = T(function({
+`, O = V(function({
   tag: e = "button",
   children: t,
   variant: o = "filled",
@@ -264,6 +268,7 @@ const U = Q.button`
   fullWidth: x,
   inlineCSS: R,
   rounded: W = !0,
+  underlined: M = !1,
   disabled: w,
   onClick: S,
   onKeyDown: H,
@@ -271,39 +276,40 @@ const U = Q.button`
   loadingPosition: z,
   loadingIndicator: c,
   ...m
-}, M) {
-  const { isHoverPossible: j } = G(), $ = () => {
+}, $) {
+  const { isHoverPossible: j } = J(), B = () => {
     if (!i) return;
     if (m["aria-label"]) return m["aria-label"];
     const a = u || f || t;
-    if (V(a))
-      return J(a.props.name);
-  }, B = (a) => {
-    w || s || S == null || S(a);
+    if (q(a))
+      return Q(a.props.name);
   }, L = (a) => {
+    w || s || S == null || S(a);
+  }, N = (a) => {
     w || s || H == null || H(a);
-  }, N = !!s, C = c ? /* @__PURE__ */ g(F, { children: c }) : /* @__PURE__ */ g(q, { loop: !0 });
+  }, E = !!s, C = c ? /* @__PURE__ */ g(T, { children: c }) : /* @__PURE__ */ g(G, { loop: !0 });
   let d = u, b = i ? null : t, n = f;
-  return N && (z ? z === "start" ? (d = /* @__PURE__ */ g(k, { children: C }), n = c ? null : f, b = i || c ? null : t) : (d = c ? null : u, n = /* @__PURE__ */ g(k, { children: C }), b = i || c ? null : t) : (d = null, n = null, b = i ? null : C)), /* @__PURE__ */ E(
-    U,
+  return E && (z ? z === "start" ? (d = /* @__PURE__ */ g(k, { children: C }), n = c ? null : f, b = i || c ? null : t) : (d = c ? null : u, n = /* @__PURE__ */ g(k, { children: C }), b = i || c ? null : t) : (d = null, n = null, b = i ? null : C)), /* @__PURE__ */ F(
+    X,
     {
       as: e,
-      ref: M,
+      ref: $,
       type: e === "button" ? "button" : void 0,
       variant: o,
       size: p,
       color: r,
       fullWidth: x,
       rounded: W,
+      underlined: M,
       startAdornment: u,
       endAdornment: f,
       iconOnly: i,
       isHoverPossible: j,
       "aria-disabled": w || s,
       "aria-busy": s,
-      "aria-label": $(),
-      onClick: B,
-      onKeyDown: L,
+      "aria-label": B(),
+      onClick: L,
+      onKeyDown: N,
       ...m,
       css: R,
       children: [
@@ -317,5 +323,5 @@ const U = Q.button`
   );
 });
 export {
-  v as default
+  O as default
 };

package/Button/Button.stories.d.ts

@@ -30,6 +30,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Filled: Story;
 export declare const Outlined: Story;
 export declare const Text: Story;
+export declare const Underlined: Story;
 export declare const FullWidth: Story;
 export declare const StartAdornment: Story;
 export declare const EndAdornment: Story;

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @dotss/ui
 
+## 1.8.0
+
+### Minor Changes
+
+- 5dc7122: feat(ui): Button.underlined 추가
+
+## 1.7.2
+
+### Patch Changes
+
+- 7a94bcd: fix(ui): useCollapse 애니메이션 발생 관련 부수효과함수 로직 수정
+
 ## 1.7.1
 
 ### Patch Changes

package/Icon/Icon.cjs

@@ -1,5 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-B8qwAe9y.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@emotion/react/jsx-runtime"),t=require("react"),y=require("../resources/tictoccroc/icons/index.ts-B8qwAe9y.cjs"),S=require("@emotion/styled"),b=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(S),$=r=>w.default(r)`
+  flex-shrink: 0;
+
   ${({size:o,width:s,height:a})=>{let n={width:s,height:a};switch(o){case"large":n={width:32,height:32};break;case"medium":n={width:24,height:24};break;case"small":n={width:20,height:20};break;case"xSmall":n={width:16,height:16};break}return n}};
 
-  color: ${({theme:o,color:s="grey.100"})=>h.default(s,{theme:o})};
-`,q=t.forwardRef(function({id:o,name:s,width:a=24,height:n=24,size:i,color:p="grey.100",inlineCSS:d,...f},m){const _=$(k=>t.Children.map(S.SvgIcons[s](),c=>t.isValidElement(c)?t.cloneElement(c,{focusable:!1,"aria-hidden":!0,...c.props,...k,children:t.Children.map(c.props.children,e=>{var u;if(!t.isValidElement(e))return null;if(e.type==="mask"){const l=`${e.props.id}-${o||0}`;return t.cloneElement(e,{...e.props,id:l})}return e.type==="path"&&!!e.props.mask?t.cloneElement(e,{...e.props,mask:`${(u=e.props.mask)==null?void 0:u.replace(/\)$/,`-${o||0})`)}`}):e})}):null));return y.jsx(_,{ref:m,width:a,height:n,size:i,color:p,...f,css:d})});exports.default=q;
+  color: ${({theme:o,color:s="grey.100"})=>b.default(s,{theme:o})};
+`,q=t.forwardRef(function({id:o,name:s,width:a=24,height:n=24,size:i,color:p="grey.100",inlineCSS:d,...f},m){const k=$(_=>t.Children.map(y.SvgIcons[s](),c=>t.isValidElement(c)?t.cloneElement(c,{focusable:!1,"aria-hidden":!0,...c.props,..._,children:t.Children.map(c.props.children,e=>{var l;if(!t.isValidElement(e))return null;if(e.type==="mask"){const u=`${e.props.id}-${o||0}`;return t.cloneElement(e,{...e.props,id:u})}return e.type==="path"&&!!e.props.mask?t.cloneElement(e,{...e.props,mask:`${(l=e.props.mask)==null?void 0:l.replace(/\)$/,`-${o||0})`)}`}):e})}):null));return h.jsx(k,{ref:m,width:a,height:n,size:i,color:p,...f,css:d})});exports.default=q;

package/Icon/Icon.es.js

@@ -4,6 +4,8 @@ import { S as $ } from "../resources/tictoccroc/icons/index.ts-B4Sh1uNq.js";
 import b from "@emotion/styled";
 import x from "../utils/getPaletteColor/getPaletteColor.es.js";
 const g = (p) => b(p)`
+  flex-shrink: 0;
+
   ${({ size: t, width: o, height: a }) => {
   let r = {
     width: o,
@@ -41,12 +43,12 @@ const g = (p) => b(p)`
   color: ${({ theme: t, color: o = "grey.100" }) => x(o, {
   theme: t
 })};
-`, V = y(function({ id: t, name: o, width: a = 24, height: r = 24, size: u, color: l = "grey.100", inlineCSS: k, ...I }, S) {
-  const d = g((h) => f.map($[o](), (n) => i(n) ? s(n, {
+`, V = y(function({ id: t, name: o, width: a = 24, height: r = 24, size: l, color: u = "grey.100", inlineCSS: k, ...h }, I) {
+  const S = g((d) => f.map($[o](), (n) => i(n) ? s(n, {
     focusable: !1,
     "aria-hidden": !0,
     ...n.props,
-    ...h,
+    ...d,
     children: f.map(n.props.children, (e) => {
       var c;
       if (!i(e))
@@ -65,14 +67,14 @@ const g = (p) => b(p)`
     })
   }) : null));
   return /* @__PURE__ */ w(
-    d,
+    S,
     {
-      ref: S,
+      ref: I,
       width: a,
       height: r,
-      size: u,
-      color: l,
-      ...I,
+      size: l,
+      color: u,
+      ...h,
       css: k
     }
   );

package/hooks/interactions/useCollapse/useCollapse.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),v=require("../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),y=require("../../usePrefersReducedMotion/usePrefersReducedMotion.cjs");function P({isCollapsed:t=!0,duration:s=200,delay:f=0,easing:o="ease-in-out",onTransitionStart:i,onTransitionEnd:l}={}){const{prefersReducedMotion:x}=y.default(),h=r.useRef(null),e=r.useRef(null),u=r.useRef(i),c=r.useRef(l),a=r.useRef(!0);u.current=i,c.current=l;const[g,H]=r.useState(t?"0px":"auto");return v.default(()=>{var d;if(a.current){a.current=!1;return}const n=h.current;if(!n)return;e.current&&(e.current.cancel(),e.current=null);const R=n.scrollHeight,M=t?[{height:`${R}px`},{height:"0px"}]:[{height:"0px"},{height:`${R}px`}],q=t?"0px":"auto";return(d=u.current)==null||d.call(u),e.current=n.animate(M,{duration:x?0:s,easing:o,delay:f,fill:"forwards"}),e.current.onfinish=()=>{var m,p;(m=e.current)==null||m.commitStyles(),H(q),(p=c.current)==null||p.call(c),e.current=null},()=>{e.current&&(e.current.cancel(),e.current=null)}},[t,s,f,o]),{targetRef:h,isCollapsed:t,height:g,style:{height:g,overflow:"hidden"},ariaProps:{"aria-hidden":t}}}exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),P=require("../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),q=require("../../usePrefersReducedMotion/usePrefersReducedMotion.cjs");function y({isCollapsed:t=!0,duration:f=200,delay:o=0,easing:s="ease-in-out",onTransitionStart:i,onTransitionEnd:h}={}){const{prefersReducedMotion:p}=q.default(),l=r.useRef(null),e=r.useRef(null),u=r.useRef(i),c=r.useRef(h),a=r.useRef(t);u.current=i,c.current=h;const[g,v]=r.useState(t?"0px":"auto");return P.default(()=>{var m;if(a.current===t)return;a.current=t;const n=l.current;if(!n)return;e.current&&(e.current.cancel(),e.current=null);const R=n.scrollHeight,H=t?[{height:`${R}px`},{height:"0px"}]:[{height:"0px"},{height:`${R}px`}],M=t?"0px":"auto";return(m=u.current)==null||m.call(u),e.current=n.animate(H,{duration:p?0:f,easing:s,delay:o,fill:"forwards"}),e.current.onfinish=()=>{var x,d;(x=e.current)==null||x.commitStyles(),v(M),(d=c.current)==null||d.call(c),e.current=null},()=>{e.current&&(e.current.cancel(),e.current=null)}},[t,f,o,s]),{targetRef:l,isCollapsed:t,height:g,style:{height:g,overflow:"hidden"},ariaProps:{"aria-hidden":t}}}exports.default=y;

package/hooks/interactions/useCollapse/useCollapse.es.js

@@ -1,51 +1,50 @@
-import { useRef as r, useState as M } from "react";
-import P from "../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import { useRef as t, useState as y } from "react";
+import M from "../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
 import $ from "../../usePrefersReducedMotion/usePrefersReducedMotion.es.js";
-function L({
-  isCollapsed: t = !0,
+function d({
+  isCollapsed: r = !0,
   duration: o = 200,
   delay: f = 0,
-  easing: i = "ease-in-out",
-  onTransitionStart: s,
-  onTransitionEnd: h
+  easing: h = "ease-in-out",
+  onTransitionStart: i,
+  onTransitionEnd: m
 } = {}) {
-  const { prefersReducedMotion: H } = $(), l = r(null), e = r(null), u = r(s), c = r(h), m = r(!0);
-  u.current = s, c.current = h;
-  const [p, d] = M(t ? "0px" : "auto");
-  return P(() => {
-    var g;
-    if (m.current) {
-      m.current = !1;
+  const { prefersReducedMotion: R } = $(), s = t(null), e = t(null), u = t(i), c = t(m), g = t(r);
+  u.current = i, c.current = m;
+  const [l, P] = y(r ? "0px" : "auto");
+  return M(() => {
+    var x;
+    if (g.current === r)
       return;
-    }
-    const n = l.current;
+    g.current = r;
+    const n = s.current;
     if (!n) return;
     e.current && (e.current.cancel(), e.current = null);
-    const a = n.scrollHeight, w = t ? [{ height: `${a}px` }, { height: "0px" }] : [{ height: "0px" }, { height: `${a}px` }], y = t ? "0px" : "auto";
-    return (g = u.current) == null || g.call(u), e.current = n.animate(w, {
-      duration: H ? 0 : o,
-      easing: i,
+    const p = n.scrollHeight, v = r ? [{ height: `${p}px` }, { height: "0px" }] : [{ height: "0px" }, { height: `${p}px` }], w = r ? "0px" : "auto";
+    return (x = u.current) == null || x.call(u), e.current = n.animate(v, {
+      duration: R ? 0 : o,
+      easing: h,
       delay: f,
       fill: "forwards"
     }), e.current.onfinish = () => {
-      var x, R;
-      (x = e.current) == null || x.commitStyles(), d(y), (R = c.current) == null || R.call(c), e.current = null;
+      var a, H;
+      (a = e.current) == null || a.commitStyles(), P(w), (H = c.current) == null || H.call(c), e.current = null;
     }, () => {
       e.current && (e.current.cancel(), e.current = null);
     };
-  }, [t, o, f, i]), {
-    targetRef: l,
-    isCollapsed: t,
-    height: p,
+  }, [r, o, f, h]), {
+    targetRef: s,
+    isCollapsed: r,
+    height: l,
     style: {
-      height: p,
+      height: l,
       overflow: "hidden"
     },
     ariaProps: {
-      "aria-hidden": t
+      "aria-hidden": r
     }
   };
 }
 export {
-  L as default
+  d as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",