@dotss/ui 1.2.1 → 1.3.0

package/Accordion/Accordion.cjs

@@ -37,4 +37,4 @@
   overflow: hidden;
 `,J=s.default.div`
   padding: ${({theme:{spacing:e}})=>`0 ${e.content(4)}px ${e.content(4)}px ${e.content(4)}px`};
-`,K=l.forwardRef(function({children:n,expand:t=!1,title:I,endAdornment:E,onChange:g,disabled:u=!1,inlineCSS:b,fullWidth:p=!1,headerProps:d,headerButtonProps:f,panelProps:m,...H},R){const _=l.useId(),q=l.useId(),y=(f==null?void 0:f.id)||_,$=(m==null?void 0:m.id)||q,[c,j]=l.useState(t),[h,x]=l.useState(t?"auto":"0px"),i=l.useRef(null),C=r=>{u||(typeof g=="function"?g(r):j(a=>!a))};return l.useEffect(()=>{j(t)},[t]),l.useEffect(()=>{var S,v;let r;const a=A.default(((S=i.current)==null?void 0:S.scrollHeight)||0),T=!c&&h==="auto",k=!c&&h!=="auto";return(v=i.current)!=null&&v.parentElement&&(c?(i.current.parentElement.style.height=a,r=setTimeout(()=>{var w;x("auto"),(w=i.current)!=null&&w.parentElement&&(i.current.parentElement.style.height="auto")},200)):T?(i.current.parentElement.style.height=a,x(a)):k&&(i.current.parentElement.style.height="0px",x("0px"))),()=>{r&&clearTimeout(r)}},[c,h]),o.jsxs(N,{ref:R,disabled:u,fullWidth:p,...H,css:b,children:[o.jsx(O,{as:(d==null?void 0:d.tag)||"h3",onClick:C,disabled:u,...d,children:o.jsxs(V,{id:y,"aria-disabled":u,"aria-expanded":c,"aria-controls":$,fullWidth:p,...f,children:[I,o.jsx(F,{expand:c,children:E||o.jsx(z.default,{name:"ChevronDownLine",size:"xSmall"})})]})}),o.jsx(G,{children:o.jsx(J,{role:"region",id:$,"aria-labelledby":y,ref:i,...m,children:n})})]})});exports.default=K;
+`,K=l.forwardRef(function({children:n,expand:t=!1,title:I,endAdornment:E,onChange:g,disabled:u=!1,inlineCSS:b,fullWidth:y=!1,headerProps:d,headerButtonProps:f,panelProps:m,...H},R){const _=l.useId(),q=l.useId(),p=(f==null?void 0:f.id)||_,$=(m==null?void 0:m.id)||q,[c,j]=l.useState(t),[h,x]=l.useState(t?"auto":"0px"),i=l.useRef(null),C=r=>{u||(typeof g=="function"?g(r):j(a=>!a))};return l.useEffect(()=>{j(t)},[t]),l.useEffect(()=>{var S,v;let r;const a=A.default(((S=i.current)==null?void 0:S.scrollHeight)||0),T=!c&&h==="auto",k=!c&&h!=="auto";return(v=i.current)!=null&&v.parentElement&&(c?(i.current.parentElement.style.height=a,r=setTimeout(()=>{var w;x("auto"),(w=i.current)!=null&&w.parentElement&&(i.current.parentElement.style.height="auto")},200)):T?(i.current.parentElement.style.height=a,x(a)):k&&(i.current.parentElement.style.height="0px",x("0px"))),()=>{r&&clearTimeout(r)}},[c,h]),o.jsxs(N,{ref:R,disabled:u,fullWidth:y,...H,css:b,children:[o.jsx(O,{as:(d==null?void 0:d.tag)||"h3",onClick:C,disabled:u,...d,children:o.jsxs(V,{id:p,"aria-disabled":u,"aria-expanded":c,"aria-controls":$,fullWidth:y,...f,children:[I,o.jsx(F,{expand:c,children:E||o.jsx(z.default,{name:"ChevronDownLine",size:"xSmall"})})]})}),o.jsx(G,{style:{height:h},children:o.jsx(J,{role:"region",id:$,"aria-labelledby":p,ref:i,...m,children:n})})]})});exports.default=K;

package/Accordion/Accordion.es.js

@@ -118,7 +118,7 @@ const J = c.div`
         )
       }
     ),
-    /* @__PURE__ */ a(U, { children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(U, { style: { height: m }, children: /* @__PURE__ */ a(
       W,
       {
         role: "region",

package/CircularProgressIndicator/CircularProgressIndicator.cjs

@@ -1,18 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),h=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},i=y(m),k=g.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),m=require("react"),g=require("@emotion/react"),k=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},i=y(k),x=g.keyframes`
     100% {
         transform: rotate(270deg);
     }
-`,x=i.default.svg`
+`,$=i.default.svg`
   ${({size:e})=>e==="large"?{width:120,height:120}:{width:40,height:40}};
 
   transform: rotate(-90deg);
 
-  ${({loop:e})=>e?{animation:`${k} 1s infinite`}:{}};
-`,$=i.default.circle`
+  ${({loop:e})=>e?{animation:`${x} 1s infinite`}:{}};
+`,_=i.default.circle`
   ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
   stroke: ${({theme:{palette:{grey:e}}})=>e[10]};
-`,_=i.default.circle`
+`,b=i.default.circle`
   transition: stroke-dashoffset ${({transitionDuration:e})=>e}ms linear 0s;
   ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
   stroke: ${({theme:{palette:{brand:e}}})=>e.primary.main};
-`,b=h.forwardRef(function({size:r="small",value:c=0,transitionDuration:n=500,inlineCSS:d,loop:t,...a},u){const s=r==="large"?52:18,l=2*Math.PI*s,f=l*(1-(t?20:c)/100);return o.jsxs(x,{ref:u,viewBox:r==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:r,loop:t,role:"progressbar","aria-valuenow":t?void 0:c,"aria-label":a["aria-label"]?a["aria-label"]:"로딩 중",...a,css:d,children:[o.jsx($,{size:r,r:s}),o.jsx(_,{size:r,transitionDuration:n,r:s,strokeLinecap:"round",strokeDashoffset:f,strokeDasharray:l})]})});exports.default=b;
+  will-change: stroke-dashoffset;
+`,w=m.forwardRef(function({size:r="small",value:c=0,transitionDuration:n=500,inlineCSS:d,loop:t,...a},u){const s=r==="large"?52:18,l=2*Math.PI*s,f=Math.min(100,Math.max(0,t?20:c)),h=l*(1-f/100);return o.jsxs($,{ref:u,viewBox:r==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:r,loop:t,role:"progressbar","aria-valuenow":t?void 0:c,"aria-label":a["aria-label"]?a["aria-label"]:"로딩 중",...a,css:d,children:[o.jsx(_,{size:r,r:s}),o.jsx(b,{className:"progress-indicator",size:r,transitionDuration:n,r:s,strokeLinecap:"round",strokeDashoffset:h,strokeDasharray:l})]})});exports.default=w;

package/CircularProgressIndicator/CircularProgressIndicator.es.js

@@ -1,12 +1,12 @@
-import { jsxs as h, jsx as n } from "@emotion/react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { keyframes as k } from "@emotion/react";
+import { jsxs as g, jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { keyframes as u } from "@emotion/react";
 import s from "@emotion/styled";
-const y = k`
+const y = u`
     100% {
         transform: rotate(270deg);
     }
-`, u = s.svg`
+`, x = s.svg`
   ${({ size: r }) => r === "large" ? {
   width: 120,
   height: 120
@@ -20,7 +20,7 @@ const y = k`
   ${({ loop: r }) => r ? {
   animation: `${y} 1s infinite`
 } : {}};
-`, x = s.circle`
+`, $ = s.circle`
   ${({ size: r }) => r === "large" ? {
   cx: 60,
   cy: 60,
@@ -35,7 +35,7 @@ const y = k`
     palette: { grey: r }
   }
 }) => r[10]};
-`, $ = s.circle`
+`, p = s.circle`
   transition: stroke-dashoffset ${({ transitionDuration: r }) => r}ms linear 0s;
   ${({ size: r }) => r === "large" ? {
   cx: 60,
@@ -51,13 +51,14 @@ const y = k`
     palette: { brand: r }
   }
 }) => r.primary.main};
-`, b = g(
-  function({ size: e = "small", value: i = 0, transitionDuration: l = 500, inlineCSS: d, loop: t, ...a }, f) {
-    const o = e === "large" ? 52 : 18, c = 2 * Math.PI * o, m = c * (1 - (t ? 20 : i) / 100);
-    return /* @__PURE__ */ h(
-      u,
+  will-change: stroke-dashoffset;
+`, W = k(
+  function({ size: e = "small", value: i = 0, transitionDuration: l = 500, inlineCSS: d, loop: t, ...a }, m) {
+    const o = e === "large" ? 52 : 18, c = 2 * Math.PI * o, f = Math.min(100, Math.max(0, t ? 20 : i)), h = c * (1 - f / 100);
+    return /* @__PURE__ */ g(
+      x,
       {
-        ref: f,
+        ref: m,
         viewBox: e === "large" ? "0 0 120 120" : "0 0 40 40",
         fill: "none",
         size: e,
@@ -68,15 +69,16 @@ const y = k`
         ...a,
         css: d,
         children: [
-          /* @__PURE__ */ n(x, { size: e, r: o }),
+          /* @__PURE__ */ n($, { size: e, r: o }),
           /* @__PURE__ */ n(
-            $,
+            p,
             {
+              className: "progress-indicator",
               size: e,
               transitionDuration: l,
               r: o,
               strokeLinecap: "round",
-              strokeDashoffset: m,
+              strokeDashoffset: h,
               strokeDasharray: c
             }
           )
@@ -86,5 +88,5 @@ const y = k`
   }
 );
 export {
-  b as default
+  W as default
 };

package/Collapse/Collapse.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@emotion/react/jsx-runtime"),t=require("react"),q=require("../Box/Box.cjs"),x=require("../hooks/interactions/useCollapse/useCollapse.cjs"),R=t.forwardRef(function({children:r,isCollapsed:s=!0,duration:u=200,delay:l=0,easing:o,onTransitionStart:a,onTransitionEnd:n,...i},c){t.useImperativeHandle(c,()=>e.current);const{targetRef:e,style:f,ariaProps:d}=x.default({isCollapsed:s,duration:u,delay:l,easing:o,onTransitionStart:a,onTransitionEnd:n});return p.jsx(q.default,{ref:e,style:{flexShrink:0,...f},...d,...i,children:r})});exports.default=R;

package/Collapse/Collapse.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { UseCollapseProps } from '../hooks/interactions/useCollapse/useCollapse';
+import { GeneralComponentProps } from '../typings/component';
+
+export type CollapseProps = Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, 'onTransitionStart' | 'onTransitionEnd'> & UseCollapseProps;
+declare const Collapse: import('react').ForwardRefExoticComponent<Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, "onTransitionEnd" | "onTransitionStart"> & UseCollapseProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Collapse;

package/Collapse/Collapse.es.js

@@ -0,0 +1,28 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as c, useImperativeHandle as x } from "react";
+import d from "../Box/Box.es.js";
+import C from "../hooks/interactions/useCollapse/useCollapse.es.js";
+const k = c(function({
+  children: e,
+  isCollapsed: o = !0,
+  duration: t = 200,
+  delay: s = 0,
+  easing: a,
+  onTransitionStart: f,
+  onTransitionEnd: l,
+  ...p
+}, m) {
+  x(m, () => r.current);
+  const { targetRef: r, style: i, ariaProps: n } = C({
+    isCollapsed: o,
+    duration: t,
+    delay: s,
+    easing: a,
+    onTransitionStart: f,
+    onTransitionEnd: l
+  });
+  return /* @__PURE__ */ u(d, { ref: r, style: { flexShrink: 0, ...i }, ...n, ...p, children: e });
+});
+export {
+  k as default
+};

package/Collapse/Collapse.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('../../typings/component').GeneralComponentProps<import('react').HTMLAttributes<HTMLDivElement>>, "onTransitionEnd" | "onTransitionStart"> & import('../../hooks').UseCollapseProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        isCollapsed: {
+            control: "boolean";
+        };
+        duration: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Custom: Story;

package/Collapse/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Collapse.cjs");exports.default=e.default;

package/Collapse/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Collapse } from './Collapse';
+
+export type { CollapseProps } from './Collapse';
+export default Collapse;

package/Collapse/index.es.js

@@ -0,0 +1,4 @@
+import a from "./Collapse.es.js";
+export {
+  a as default
+};

package/Select/Select.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),i=require("react"),P=require("../Backdrop/Backdrop.cjs"),T=require("../Box/Box.cjs"),K=require("../Flexbox/Flexbox.cjs"),U=require("../Icon/Icon.cjs"),X=require("@emotion/styled"),E=require("../utils/getSibling/getSibling.cjs"),G=e=>e&&e.__esModule?e:{default:e},m=G(X),J=m.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),r=require("react"),P=require("../Backdrop/Backdrop.cjs"),T=require("../Box/Box.cjs"),K=require("../Flexbox/Flexbox.cjs"),U=require("../Icon/Icon.cjs"),X=require("@emotion/styled"),E=require("../utils/getSibling/getSibling.cjs"),G=e=>e&&e.__esModule?e:{default:e},S=G(X),J=S.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -12,12 +12,12 @@
     color: inherit;
   }
 
-  ${({theme:{palette:{grey:e,background:r}},variant:g})=>{let s={};switch(g){case"outlined":s={border:`1px solid ${e[50]}`,"&[disabled]":{backgroundColor:e[10],border:`1px solid ${e[30]}`,color:e[30],pointerEvents:"none"}};break;case"filled":s={border:"1px solid transparent",backgroundColor:r.primary,"&[disabled]":{backgroundColor:e[10],color:e[30],pointerEvents:"none"}};break}return s}}
+  ${({theme:{palette:{grey:e,background:i}},variant:h})=>{let s={};switch(h){case"outlined":s={border:`1px solid ${e[50]}`,"&[disabled]":{backgroundColor:e[10],border:`1px solid ${e[30]}`,color:e[30],cursor:"not-allowed"}};break;case"filled":s={border:"1px solid transparent",backgroundColor:i.primary,"&[disabled]":{backgroundColor:e[10],color:e[30],cursor:"not-allowed"}};break}return s}}
 
-  ${({theme:{palette:{brand:e}},isFocused:r})=>r?{border:`1px solid ${e.primary.line}`}:{}}
+  ${({theme:{palette:{brand:e}},isFocused:i})=>i?{border:`1px solid ${e.primary.line}`}:{}}
   
-  ${({size:e})=>{let r={};switch(e){case"large":r={height:"48px"};break;case"xLarge":r={height:"56px"};break}return r}}
-`,N=m.default.div`
+  ${({size:e})=>{let i={};switch(e){case"large":i={height:"48px"};break;case"xLarge":i={height:"56px"};break}return i}}
+`,N=S.default.div`
   display: flex;
   width: calc(100% - 24px - 8px);
   gap: ${({theme:e})=>`${e.spacing.content(2)}px`};
@@ -25,18 +25,18 @@
     color: inherit;
   }
 
-  ${({theme:{typography:e,palette:{grey:r}},value:g})=>{const s={fontSize:e.b2R.size,fontWeight:e.b2R.size,lineHeight:e.b2R.lineHeight,letterSpacing:e.b2R.letterSpacing,"&[disabled]":{color:r[30]}};return g?{...s,color:r[100]}:{...s,color:r[50]}}}
-`,Q=m.default.div`
+  ${({theme:{typography:e,palette:{grey:i}},value:h})=>{const s={fontSize:e.b2R.size,fontWeight:e.b2R.size,lineHeight:e.b2R.lineHeight,letterSpacing:e.b2R.letterSpacing,"&[disabled]":{color:i[30]}};return h?{...s,color:i[100]}:{...s,color:i[50]}}}
+`,Q=S.default.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`,Y=m.default.div`
+`,Y=S.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   transform: ${({isFocused:e})=>e?"rotate(180deg)":"rotate(0deg)"};
   transition: transform 200ms linear;
-`,Z=m.default.ul`
+`,Z=S.default.ul`
   position: fixed;
   max-height: 476px;
   overflow-y: auto;
@@ -50,4 +50,4 @@
   box-shadow: ${({theme:{elevation:e}})=>e[4]};
   transition: opacity 200ms linear;
   opacity: ${({isFocused:e})=>e?1:0};
-`,ee=i.forwardRef(function({value:r,onChange:g,open:s,onOpen:v,onClose:C,variant:O="outlined",size:q="large",startAdornment:j,placeholder:W="TEXT",disabled:k=!1,fullWidth:D,children:h,inlineCSS:z,...S},V){const _=i.useId(),b=i.useRef(null),w=i.useRef(null),x=i.useRef(""),[d,u]=i.useState(s||!1),[f,c]=i.useState(""),[$,y]=i.useState({top:0,bottom:0,left:0,width:0}),p=(S==null?void 0:S.id)||_,H=()=>{s===void 0?u(t=>!t):s===!1&&v&&typeof v=="function"&&v()},I=t=>()=>{g(t.toString()),R()},R=()=>{s===void 0?(u(!1),c("")):s===!0&&C&&typeof C=="function"&&C()},B=t=>{if(t.preventDefault(),t.code==="Escape"&&u(!1),t.code==="Space"||t.code==="Enter")if(x.current?c(x.current):f||c(`${p}-0`),d){if(f){const n=document.querySelector(`#${CSS.escape(f)}`);n&&n.hasAttribute("value")&&(x.current=n==null?void 0:n.id,I(n.value)())}u(!1)}else u(!0);if(t.code==="ArrowDown"||t.code==="ArrowUp"){if(d||u(!0),x.current?c(x.current):c(`${p}-0`),!w.current||!f)return;const n=w.current.querySelector(`#${CSS.escape(f)}`);if(!n)return;if(t.code==="ArrowDown"){const o=E.default(n,"next",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=w.current.firstElementChild;l&&(c(l.id),l.scrollIntoView({block:"start"}))}}if(t.code==="ArrowUp"){const o=E.default(n,"prev",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=w.current.lastElementChild;l&&(c(l.id),l.scrollIntoView({block:"end"}))}}}if(t.code==="Home"&&c(`${p}-0`),t.code==="End"){const n=i.Children.count(h);c(`${p}-${n-1}`)}},L=t=>{const n=i.Children.map(t,o=>i.isValidElement(o)&&o&&o.props.value===r?o.props.children:null);return n&&n.length?n[0]:""};return i.useEffect(()=>{const t=()=>{if(b.current){const n=b.current.getBoundingClientRect(),o=i.Children.count(h),l=40,A=24,F=l*o>476?476:l*o,M=b.current.getBoundingClientRect().bottom+F+A>window.innerHeight;y(M?{bottom:24,left:n.left,width:b.current.offsetWidth}:{top:n.top+n.height,left:n.left,width:b.current.offsetWidth})}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[h]),i.useEffect(()=>{s!==void 0&&u(s)},[s]),a.jsxs(T.default,{ref:V,inlineCSS:{position:"relative"},children:[a.jsxs(J,{role:"combobox",ref:b,tabIndex:0,variant:O,size:q,disabled:k,fullWidth:D,isFocused:d,onClick:H,onKeyDown:B,"aria-controls":p,"aria-expanded":d,"aria-haspopup":"listbox","aria-activedescendant":f,...S,css:z,children:[a.jsxs(N,{value:r==="0"||!!r,disabled:k,children:[j&&a.jsx(K.default,{justifyContent:"center",alignItems:"center",children:j}),a.jsx(Q,{children:L(h)||W})]}),a.jsx(Y,{isFocused:d,children:a.jsx(U.default,{name:"ChevronDownLine",size:"small",color:k?"grey.30":"grey.100"})})]}),a.jsx(P.default,{open:d,onClose:R,inlineCSS:{backgroundColor:"transparent"},children:a.jsx(Z,{id:p,role:"listbox",ref:w,tabIndex:-1,isFocused:d,style:{top:$.top,bottom:$.bottom,left:$.left,width:$.width},children:i.Children.map(h,(t,n)=>{if(!i.isValidElement(t)||!t.props.value)return null;const o=`${p}-${n}`,l=r===t.props.value;return l&&(x.current=o),i.cloneElement(t,{id:o,selected:l,focused:o===f,onClick:I(t.props.value),...t.props})})})})]})});exports.default=ee;
+`,ee=r.forwardRef(function({value:i,onChange:h,open:s,onOpen:C,onClose:k,variant:O="outlined",size:q="large",startAdornment:j,placeholder:W="TEXT",disabled:d=!1,fullWidth:D,children:w,inlineCSS:z,...$},V){const _=r.useId(),g=r.useRef(null),m=r.useRef(null),b=r.useRef(""),[u,f]=r.useState(s||!1),[p,c]=r.useState(""),[v,y]=r.useState({top:0,bottom:0,left:0,width:0}),x=($==null?void 0:$.id)||_,H=()=>{d||(s===void 0?f(t=>!t):s===!1&&C&&typeof C=="function"&&C())},I=t=>()=>{d||(h(t.toString()),R())},R=()=>{d||(s===void 0?(f(!1),c("")):s===!0&&k&&typeof k=="function"&&k())},B=t=>{if(!d){if(t.preventDefault(),t.code==="Escape"&&f(!1),t.code==="Space"||t.code==="Enter")if(b.current?c(b.current):p||c(`${x}-0`),u){if(p){const n=document.querySelector(`#${CSS.escape(p)}`);n&&n.hasAttribute("value")&&(b.current=n==null?void 0:n.id,I(n.value)())}f(!1)}else f(!0);if(t.code==="ArrowDown"||t.code==="ArrowUp"){if(u||f(!0),b.current?c(b.current):c(`${x}-0`),!m.current||!p)return;const n=m.current.querySelector(`#${CSS.escape(p)}`);if(!n)return;if(t.code==="ArrowDown"){const o=E.default(n,"next",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=m.current.firstElementChild;l&&(c(l.id),l.scrollIntoView({block:"start"}))}}if(t.code==="ArrowUp"){const o=E.default(n,"prev",{skipDisabled:!0});if(o&&o.id)c(o.id),o.scrollIntoView({block:"end"});else{const l=m.current.lastElementChild;l&&(c(l.id),l.scrollIntoView({block:"end"}))}}}if(t.code==="Home"&&c(`${x}-0`),t.code==="End"){const n=r.Children.count(w);c(`${x}-${n-1}`)}}},L=t=>{const n=r.Children.map(t,o=>r.isValidElement(o)&&o&&o.props.value===i?o.props.children:null);return n&&n.length?n[0]:""};return r.useEffect(()=>{const t=()=>{if(g.current){const n=g.current.getBoundingClientRect(),o=r.Children.count(w),l=40,A=24,F=l*o>476?476:l*o,M=g.current.getBoundingClientRect().bottom+F+A>window.innerHeight;y(M?{bottom:24,left:n.left,width:g.current.offsetWidth}:{top:n.top+n.height,left:n.left,width:g.current.offsetWidth})}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[w]),r.useEffect(()=>{s!==void 0&&f(s)},[s]),a.jsxs(T.default,{ref:V,inlineCSS:{position:"relative"},children:[a.jsxs(J,{role:"combobox",ref:g,tabIndex:0,variant:O,size:q,disabled:d,fullWidth:D,isFocused:u,onClick:H,onKeyDown:B,"aria-controls":x,"aria-expanded":u,"aria-haspopup":"listbox","aria-activedescendant":p,"aria-disabled":d,...$,css:z,children:[a.jsxs(N,{value:i==="0"||!!i,disabled:d,children:[j&&a.jsx(K.default,{justifyContent:"center",alignItems:"center",children:j}),a.jsx(Q,{children:L(w)||W})]}),a.jsx(Y,{isFocused:u,children:a.jsx(U.default,{name:"ChevronDownLine",size:"small",color:d?"grey.30":"grey.100"})})]}),a.jsx(P.default,{open:u,onClose:R,inlineCSS:{backgroundColor:"transparent"},children:a.jsx(Z,{id:x,role:"listbox",ref:m,tabIndex:-1,isFocused:u,style:{top:v.top,bottom:v.bottom,left:v.left,width:v.width},children:r.Children.map(w,(t,n)=>{if(!r.isValidElement(t)||!t.props.value)return null;const o=`${x}-${n}`,l=i===t.props.value;return l&&(b.current=o),r.cloneElement(t,{id:o,selected:l,focused:o===p,onClick:I(t.props.value),...t.props})})})})]})});exports.default=ee;

package/Select/Select.es.js

@@ -1,12 +1,12 @@
-import { jsxs as I, jsx as b } from "@emotion/react/jsx-runtime";
-import { forwardRef as J, useId as N, useRef as y, useState as E, useEffect as z, Children as v, isValidElement as D, cloneElement as Q } from "react";
+import { jsxs as I, jsx as g } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useId as N, useRef as y, useState as R, useEffect as z, Children as v, isValidElement as D, cloneElement as Q } from "react";
 import Y from "../Backdrop/Backdrop.es.js";
 import Z from "../Box/Box.es.js";
 import _ from "../Flexbox/Flexbox.es.js";
 import ee from "../Icon/Icon.es.js";
-import h from "@emotion/styled";
+import w from "@emotion/styled";
 import H from "../utils/getSibling/getSibling.es.js";
-const te = h.div`
+const te = w.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -22,64 +22,64 @@ const te = h.div`
 
   ${({
   theme: {
-    palette: { grey: e, background: i }
+    palette: { grey: e, background: r }
   },
-  variant: m
+  variant: b
 }) => {
-  let r = {};
-  switch (m) {
+  let i = {};
+  switch (b) {
     case "outlined":
-      r = {
+      i = {
         border: `1px solid ${e[50]}`,
         "&[disabled]": {
           backgroundColor: e[10],
           border: `1px solid ${e[30]}`,
           color: e[30],
-          pointerEvents: "none"
+          cursor: "not-allowed"
         }
       };
       break;
     case "filled":
-      r = {
+      i = {
         border: "1px solid transparent",
-        backgroundColor: i.primary,
+        backgroundColor: r.primary,
         "&[disabled]": {
           backgroundColor: e[10],
           color: e[30],
-          pointerEvents: "none"
+          cursor: "not-allowed"
         }
       };
       break;
   }
-  return r;
+  return i;
 }}
 
   ${({
   theme: {
     palette: { brand: e }
   },
-  isFocused: i
-}) => i ? {
+  isFocused: r
+}) => r ? {
   border: `1px solid ${e.primary.line}`
 } : {}}
   
   ${({ size: e }) => {
-  let i = {};
+  let r = {};
   switch (e) {
     case "large":
-      i = {
+      r = {
         height: "48px"
       };
       break;
     case "xLarge":
-      i = {
+      r = {
         height: "56px"
       };
       break;
   }
-  return i;
+  return r;
 }}
-`, ne = h.div`
+`, oe = w.div`
   display: flex;
   width: calc(100% - 24px - 8px);
   gap: ${({ theme: e }) => `${e.spacing.content(2)}px`};
@@ -90,38 +90,38 @@ const te = h.div`
   ${({
   theme: {
     typography: e,
-    palette: { grey: i }
+    palette: { grey: r }
   },
-  value: m
+  value: b
 }) => {
-  const r = {
+  const i = {
     fontSize: e.b2R.size,
     fontWeight: e.b2R.size,
     lineHeight: e.b2R.lineHeight,
     letterSpacing: e.b2R.letterSpacing,
     "&[disabled]": {
-      color: i[30]
+      color: r[30]
     }
   };
-  return m ? {
-    ...r,
-    color: i[100]
+  return b ? {
+    ...i,
+    color: r[100]
   } : {
-    ...r,
-    color: i[50]
+    ...i,
+    color: r[50]
   };
 }}
-`, oe = h.div`
+`, ne = w.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`, ie = h.div`
+`, re = w.div`
   display: flex;
   align-items: center;
   justify-content: center;
   transform: ${({ isFocused: e }) => e ? "rotate(180deg)" : "rotate(0deg)"};
   transition: transform 200ms linear;
-`, re = h.ul`
+`, ie = w.ul`
   position: fixed;
   max-height: 476px;
   overflow-y: auto;
@@ -135,150 +135,153 @@ const te = h.div`
   box-shadow: ${({ theme: { elevation: e } }) => e[4]};
   transition: opacity 200ms linear;
   opacity: ${({ isFocused: e }) => e ? 1 : 0};
-`, be = J(function({
-  value: i,
-  onChange: m,
-  open: r,
-  onOpen: S,
-  onClose: C,
+`, me = J(function({
+  value: r,
+  onChange: b,
+  open: i,
+  onOpen: C,
+  onClose: k,
   variant: V = "outlined",
   size: B = "large",
-  startAdornment: R,
+  startAdornment: E,
   placeholder: L = "TEXT",
-  disabled: k = !1,
+  disabled: c = !1,
   fullWidth: A,
-  children: g,
+  children: x,
   inlineCSS: F,
-  ...w
+  ...$
 }, q) {
-  const K = N(), f = y(null), x = y(null), u = y(""), [c, a] = E(r || !1), [d, l] = E(""), [$, O] = E({ top: 0, bottom: 0, left: 0, width: 0 }), p = (w == null ? void 0 : w.id) || K, P = () => {
-    r === void 0 ? a((t) => !t) : r === !1 && S && typeof S == "function" && S();
+  const K = N(), u = y(null), h = y(null), m = y(""), [a, d] = R(i || !1), [f, s] = R(""), [S, O] = R({ top: 0, bottom: 0, left: 0, width: 0 }), p = ($ == null ? void 0 : $.id) || K, P = () => {
+    c || (i === void 0 ? d((t) => !t) : i === !1 && C && typeof C == "function" && C());
   }, W = (t) => () => {
-    m(t.toString()), j();
+    c || (b(t.toString()), j());
   }, j = () => {
-    r === void 0 ? (a(!1), l("")) : r === !0 && C && typeof C == "function" && C();
+    c || (i === void 0 ? (d(!1), s("")) : i === !0 && k && typeof k == "function" && k());
   }, T = (t) => {
-    if (t.preventDefault(), t.code === "Escape" && a(!1), t.code === "Space" || t.code === "Enter")
-      if (u.current ? l(u.current) : d || l(`${p}-0`), c) {
-        if (d) {
-          const n = document.querySelector(
-            `#${CSS.escape(d)}`
-          );
-          n && n.hasAttribute("value") && (u.current = n == null ? void 0 : n.id, W(n.value)());
+    if (!c) {
+      if (t.preventDefault(), t.code === "Escape" && d(!1), t.code === "Space" || t.code === "Enter")
+        if (m.current ? s(m.current) : f || s(`${p}-0`), a) {
+          if (f) {
+            const o = document.querySelector(
+              `#${CSS.escape(f)}`
+            );
+            o && o.hasAttribute("value") && (m.current = o == null ? void 0 : o.id, W(o.value)());
+          }
+          d(!1);
+        } else
+          d(!0);
+      if (t.code === "ArrowDown" || t.code === "ArrowUp") {
+        if (a || d(!0), m.current ? s(m.current) : s(`${p}-0`), !h.current || !f) return;
+        const o = h.current.querySelector(
+          `#${CSS.escape(f)}`
+        );
+        if (!o) return;
+        if (t.code === "ArrowDown") {
+          const n = H(o, "next", { skipDisabled: !0 });
+          if (n && n.id)
+            s(n.id), n.scrollIntoView({ block: "end" });
+          else {
+            const l = h.current.firstElementChild;
+            l && (s(l.id), l.scrollIntoView({ block: "start" }));
+          }
         }
-        a(!1);
-      } else
-        a(!0);
-    if (t.code === "ArrowDown" || t.code === "ArrowUp") {
-      if (c || a(!0), u.current ? l(u.current) : l(`${p}-0`), !x.current || !d) return;
-      const n = x.current.querySelector(
-        `#${CSS.escape(d)}`
-      );
-      if (!n) return;
-      if (t.code === "ArrowDown") {
-        const o = H(n, "next", { skipDisabled: !0 });
-        if (o && o.id)
-          l(o.id), o.scrollIntoView({ block: "end" });
-        else {
-          const s = x.current.firstElementChild;
-          s && (l(s.id), s.scrollIntoView({ block: "start" }));
+        if (t.code === "ArrowUp") {
+          const n = H(o, "prev", { skipDisabled: !0 });
+          if (n && n.id)
+            s(n.id), n.scrollIntoView({ block: "end" });
+          else {
+            const l = h.current.lastElementChild;
+            l && (s(l.id), l.scrollIntoView({ block: "end" }));
+          }
         }
       }
-      if (t.code === "ArrowUp") {
-        const o = H(n, "prev", { skipDisabled: !0 });
-        if (o && o.id)
-          l(o.id), o.scrollIntoView({ block: "end" });
-        else {
-          const s = x.current.lastElementChild;
-          s && (l(s.id), s.scrollIntoView({ block: "end" }));
-        }
+      if (t.code === "Home" && s(`${p}-0`), t.code === "End") {
+        const o = v.count(x);
+        s(`${p}-${o - 1}`);
       }
     }
-    if (t.code === "Home" && l(`${p}-0`), t.code === "End") {
-      const n = v.count(g);
-      l(`${p}-${n - 1}`);
-    }
   }, U = (t) => {
-    const n = v.map(t, (o) => D(o) && o && o.props.value === i ? o.props.children : null);
-    return n && n.length ? n[0] : "";
+    const o = v.map(t, (n) => D(n) && n && n.props.value === r ? n.props.children : null);
+    return o && o.length ? o[0] : "";
   };
   return z(() => {
     const t = () => {
-      if (f.current) {
-        const n = f.current.getBoundingClientRect(), o = v.count(g), s = 40, M = 24, X = s * o > 476 ? 476 : s * o, G = f.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
+      if (u.current) {
+        const o = u.current.getBoundingClientRect(), n = v.count(x), l = 40, M = 24, X = l * n > 476 ? 476 : l * n, G = u.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
         O(G ? {
           bottom: 24,
-          left: n.left,
-          width: f.current.offsetWidth
+          left: o.left,
+          width: u.current.offsetWidth
         } : {
-          top: n.top + n.height,
-          left: n.left,
-          width: f.current.offsetWidth
+          top: o.top + o.height,
+          left: o.left,
+          width: u.current.offsetWidth
         });
       }
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [g]), z(() => {
-    r !== void 0 && a(r);
-  }, [r]), /* @__PURE__ */ I(Z, { ref: q, inlineCSS: { position: "relative" }, children: [
+  }, [x]), z(() => {
+    i !== void 0 && d(i);
+  }, [i]), /* @__PURE__ */ I(Z, { ref: q, inlineCSS: { position: "relative" }, children: [
     /* @__PURE__ */ I(
       te,
       {
         role: "combobox",
-        ref: f,
+        ref: u,
         tabIndex: 0,
         variant: V,
         size: B,
-        disabled: k,
+        disabled: c,
         fullWidth: A,
-        isFocused: c,
+        isFocused: a,
         onClick: P,
         onKeyDown: T,
         "aria-controls": p,
-        "aria-expanded": c,
+        "aria-expanded": a,
         "aria-haspopup": "listbox",
-        "aria-activedescendant": d,
-        ...w,
+        "aria-activedescendant": f,
+        "aria-disabled": c,
+        ...$,
         css: F,
         children: [
-          /* @__PURE__ */ I(ne, { value: i === "0" || !!i, disabled: k, children: [
-            R && /* @__PURE__ */ b(_, { justifyContent: "center", alignItems: "center", children: R }),
-            /* @__PURE__ */ b(oe, { children: U(g) || L })
+          /* @__PURE__ */ I(oe, { value: r === "0" || !!r, disabled: c, children: [
+            E && /* @__PURE__ */ g(_, { justifyContent: "center", alignItems: "center", children: E }),
+            /* @__PURE__ */ g(ne, { children: U(x) || L })
           ] }),
-          /* @__PURE__ */ b(ie, { isFocused: c, children: /* @__PURE__ */ b(ee, { name: "ChevronDownLine", size: "small", color: k ? "grey.30" : "grey.100" }) })
+          /* @__PURE__ */ g(re, { isFocused: a, children: /* @__PURE__ */ g(ee, { name: "ChevronDownLine", size: "small", color: c ? "grey.30" : "grey.100" }) })
         ]
       }
     ),
-    /* @__PURE__ */ b(
+    /* @__PURE__ */ g(
       Y,
       {
-        open: c,
+        open: a,
         onClose: j,
         inlineCSS: { backgroundColor: "transparent" },
-        children: /* @__PURE__ */ b(
-          re,
+        children: /* @__PURE__ */ g(
+          ie,
           {
             id: p,
             role: "listbox",
-            ref: x,
+            ref: h,
             tabIndex: -1,
-            isFocused: c,
+            isFocused: a,
             style: {
-              top: $.top,
-              bottom: $.bottom,
-              left: $.left,
-              width: $.width
+              top: S.top,
+              bottom: S.bottom,
+              left: S.left,
+              width: S.width
             },
-            children: v.map(g, (t, n) => {
+            children: v.map(x, (t, o) => {
               if (!D(t) || !t.props.value)
                 return null;
-              const o = `${p}-${n}`, s = i === t.props.value;
-              return s && (u.current = o), Q(t, {
-                id: o,
-                selected: s,
-                focused: o === d,
+              const n = `${p}-${o}`, l = r === t.props.value;
+              return l && (m.current = n), Q(t, {
+                id: n,
+                selected: l,
+                focused: n === f,
                 onClick: W(t.props.value),
                 ...t.props
               });
@@ -290,5 +293,5 @@ const te = h.div`
   ] });
 });
 export {
-  be as default
+  me as default
 };

package/hooks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=t.default;exports.usePrefersReducedMotion=c.default;

package/hooks/index.d.ts

@@ -2,3 +2,8 @@ export { default as useCheckHoverPossible } from './useCheckHoverPossible/useChe
 export { default as useCheckKeyboardMode } from './useCheckKeyboardMode/useCheckKeyboardMode';
 export { default as useCheckHasFocus } from './useCheckHasFocus/useCheckHasFocus';
 export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary';
+export { default as useCollapse } from './interactions/useCollapse/useCollapse';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+export { default as usePrefersReducedMotion } from './usePrefersReducedMotion/usePrefersReducedMotion';
+export type { UseFocusBoundaryProps } from './useFocusBoundary/useFocusBoundary';
+export type { UseCollapseProps } from './interactions/useCollapse/useCollapse';

package/hooks/index.es.js

@@ -1,10 +1,16 @@
 import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.js";
-import { default as r } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import { default as a } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
 import { default as f } from "./useCheckHasFocus/useCheckHasFocus.es.js";
 import { default as d } from "./useFocusBoundary/useFocusBoundary.es.js";
+import { default as p } from "./interactions/useCollapse/useCollapse.es.js";
+import { default as m } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import { default as h } from "./usePrefersReducedMotion/usePrefersReducedMotion.es.js";
 export {
   f as useCheckHasFocus,
   s as useCheckHoverPossible,
-  r as useCheckKeyboardMode,
-  d as useFocusBoundary
+  a as useCheckKeyboardMode,
+  p as useCollapse,
+  d as useFocusBoundary,
+  m as useIsomorphicLayoutEffect,
+  h as usePrefersReducedMotion
 };

package/hooks/interactions/useCollapse/useCollapse.cjs

@@ -0,0 +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;

package/hooks/interactions/useCollapse/useCollapse.d.ts

@@ -0,0 +1,22 @@
+import { CSSValue } from '../../../typings/utility';
+
+export interface UseCollapseProps {
+    isCollapsed?: boolean;
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    onTransitionStart?: () => void;
+    onTransitionEnd?: () => void;
+}
+export default function useCollapse({ isCollapsed, duration, delay, easing, onTransitionStart, onTransitionEnd }?: UseCollapseProps): {
+    targetRef: import('react').RefObject<HTMLDivElement>;
+    isCollapsed: boolean;
+    height: CSSValue;
+    style: {
+        height: CSSValue;
+        overflow: string;
+    };
+    ariaProps: {
+        'aria-hidden': boolean;
+    };
+};

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

@@ -0,0 +1,51 @@
+import { useRef as r, useState as M } from "react";
+import P from "../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import $ from "../../usePrefersReducedMotion/usePrefersReducedMotion.es.js";
+function L({
+  isCollapsed: t = !0,
+  duration: o = 200,
+  delay: f = 0,
+  easing: i = "ease-in-out",
+  onTransitionStart: s,
+  onTransitionEnd: h
+} = {}) {
+  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;
+      return;
+    }
+    const n = l.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,
+      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;
+    }, () => {
+      e.current && (e.current.cancel(), e.current = null);
+    };
+  }, [t, o, f, i]), {
+    targetRef: l,
+    isCollapsed: t,
+    height: p,
+    style: {
+      height: p,
+      overflow: "hidden"
+    },
+    ariaProps: {
+      "aria-hidden": t
+    }
+  };
+}
+export {
+  L as default
+};

package/hooks/useFocusBoundary/useFocusBoundary.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 
-interface UseFocusBoundaryProps {
+export interface UseFocusBoundaryProps {
     ref: RefObject<HTMLElement>;
     active?: boolean;
     disabled?: boolean;

package/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=require("../../utils/isServer/isServer.cjs"),u=t.default()?e.useEffect:e.useLayoutEffect;exports.default=u;

package/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,4 @@
+import { useEffect } from 'react';
+
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect as e, useEffect as o } from "react";
+import t from "../../utils/isServer/isServer.es.js";
+const s = t() ? o : e;
+export {
+  s as default
+};

package/hooks/usePrefersReducedMotion/usePrefersReducedMotion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),o=require("../../utils/isPrefersReducedMotion/isPrefersReducedMotion.cjs");function c(){const[n,r]=d.useState(()=>o.default());return d.useEffect(()=>{if(typeof window>"u"||!(window!=null&&window.matchMedia))return;const e=window.matchMedia("(prefers-reduced-motion: reduce)"),t=u=>r(u.matches);return e.addEventListener("change",t),()=>{e.removeEventListener("change",t)}},[]),{prefersReducedMotion:n}}exports.default=c;

package/hooks/usePrefersReducedMotion/usePrefersReducedMotion.d.ts

@@ -0,0 +1,3 @@
+export default function usePrefersReducedMotion(): {
+    prefersReducedMotion: boolean;
+};

package/hooks/usePrefersReducedMotion/usePrefersReducedMotion.es.js

@@ -0,0 +1,15 @@
+import { useState as o, useEffect as i } from "react";
+import c from "../../utils/isPrefersReducedMotion/isPrefersReducedMotion.es.js";
+function a() {
+  const [d, n] = o(() => c());
+  return i(() => {
+    if (typeof window > "u" || !(window != null && window.matchMedia)) return;
+    const e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = (r) => n(r.matches);
+    return e.addEventListener("change", t), () => {
+      e.removeEventListener("change", t);
+    };
+  }, []), { prefersReducedMotion: d };
+}
+export {
+  a as default
+};

package/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Button/Button.cjs"),t=require("./Icon/Icon.cjs"),o=require("./Label/Label.cjs"),r=require("./Typography/Typography.cjs"),u=require("./Box/Box.cjs"),n=require("./Flexbox/Flexbox.cjs"),i=require("./TextField/TextField.cjs"),a=require("./TextArea/TextArea.cjs"),l=require("./IconButton/IconButton.cjs"),c=require("./PageControl/PageControl.cjs"),d=require("./Checkbox/Checkbox.cjs"),s=require("./Radio/Radio.cjs"),f=require("./Chip/Chip.cjs"),q=require("./SegmentedButton/SegmentedButton.cjs"),B=require("./SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.cjs"),g=require("./Backdrop/Backdrop.cjs"),S=require("./Dialog/Dialog.cjs"),T=require("./Dialog/DialogTitle/DialogTitle.cjs"),k=require("./Dialog/DialogContent/DialogContent.cjs"),m=require("./Dialog/DialogAction/DialogAction.cjs"),p=require("./Dialog/DialogText/DialogText.cjs"),h=require("./Tooltip/Tooltip.cjs"),C=require("./Select/Select.cjs"),b=require("./Select/Option/Option.cjs"),x=require("./Menu/Menu.cjs"),D=require("./Menu/MenuBlock/MenuBlock.cjs");require("./Menu/MenuButton/MenuButton.cjs");const y=require("./Skeleton/Skeleton.cjs"),P=require("./Switch/Switch.cjs"),A=require("./BottomSheet/BottomSheet.cjs"),F=require("./BottomSheet/BottomSheetTitle/BottomSheetTitle.cjs"),I=require("./BottomSheet/BottomSheetContent/BottomSheetContent.cjs"),L=require("./BottomSheet/BottomSheetAction/BottomSheetAction.cjs"),v=require("./BottomSheet/BottomSheetText/BottomSheetText.cjs"),M=require("./Snackbar/Snackbar.cjs"),w=require("./ChainPicker/ChainPicker.cjs"),E=require("./DatePicker/DatePicker.cjs"),G=require("./DatePicker/EventDot/EventDot.cjs"),K=require("./DatePicker/EventDotGroup/EventDotGroup.cjs"),N=require("./FormControlText/FormControlText.cjs"),R=require("./ClickAwayListener/ClickAwayListener.cjs"),O=require("./Card/Card.cjs"),j=require("./LineProgressIndicator/LineProgressIndicator.cjs"),z=require("./CircularProgressIndicator/CircularProgressIndicator.cjs"),H=require("./NumberKeypad/NumberKeypad.cjs"),J=require("./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs"),Q=require("./FocusBoundary/FocusBoundary.cjs"),U=require("./Badge/Badge.cjs"),V=require("./Tab/Tab.cjs"),W=require("./Tab/TabBlock/TabBlock.cjs"),X=require("./Slider/Slider.cjs"),Y=require("./Accordion/Accordion.cjs"),Z=require("./RadioGroup/RadioGroup.cjs");exports.Button=e.default;exports.Icon=t.default;exports.Label=o.default;exports.Typography=r.default;exports.Box=u.default;exports.Flexbox=n.default;exports.TextField=i.default;exports.TextArea=a.default;exports.IconButton=l.default;exports.PageControl=c.default;exports.Checkbox=d.default;exports.Radio=s.default;exports.Chip=f.default;exports.SegmentedButton=q.default;exports.SegmentedButtonBlock=B.default;exports.Backdrop=g.default;exports.Dialog=S.default;exports.DialogTitle=T.default;exports.DialogContent=k.default;exports.DialogAction=m.default;exports.DialogText=p.default;exports.Tooltip=h.default;exports.Select=C.default;exports.Option=b.default;exports.Menu=x.default;exports.MenuBlock=D.default;exports.Skeleton=y.default;exports.Switch=P.default;exports.BottomSheet=A.default;exports.BottomSheetTitle=F.default;exports.BottomSheetContent=I.default;exports.BottomSheetAction=L.default;exports.BottomSheetText=v.default;exports.Snackbar=M.default;exports.ChainPicker=w.default;exports.DatePicker=E.default;exports.EventDot=G.default;exports.EventDotGroup=K.default;exports.FormControlText=N.default;exports.ClickAwayListener=R.default;exports.Card=O.default;exports.LineProgressIndicator=j.default;exports.CircularProgressIndicator=z.default;exports.NumberKeypad=H.default;exports.NumberKeypadBlock=J.default;exports.FocusBoundary=Q.default;exports.Badge=U.default;exports.Tab=V.default;exports.TabBlock=W.default;exports.Slider=X.default;exports.Accordion=Y.default;exports.RadioGroup=Z.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Button/Button.cjs"),t=require("./Icon/Icon.cjs"),o=require("./Label/Label.cjs"),r=require("./Typography/Typography.cjs"),u=require("./Box/Box.cjs"),n=require("./Flexbox/Flexbox.cjs"),a=require("./TextField/TextField.cjs"),i=require("./TextArea/TextArea.cjs"),l=require("./IconButton/IconButton.cjs"),c=require("./PageControl/PageControl.cjs"),d=require("./Checkbox/Checkbox.cjs"),s=require("./Radio/Radio.cjs"),f=require("./Chip/Chip.cjs"),q=require("./SegmentedButton/SegmentedButton.cjs"),B=require("./SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.cjs"),g=require("./Backdrop/Backdrop.cjs"),S=require("./Dialog/Dialog.cjs"),p=require("./Dialog/DialogTitle/DialogTitle.cjs"),T=require("./Dialog/DialogContent/DialogContent.cjs"),k=require("./Dialog/DialogAction/DialogAction.cjs"),C=require("./Dialog/DialogText/DialogText.cjs"),m=require("./Tooltip/Tooltip.cjs"),h=require("./Select/Select.cjs"),b=require("./Select/Option/Option.cjs"),x=require("./Menu/Menu.cjs"),D=require("./Menu/MenuBlock/MenuBlock.cjs");require("./Menu/MenuButton/MenuButton.cjs");const y=require("./Skeleton/Skeleton.cjs"),P=require("./Switch/Switch.cjs"),A=require("./BottomSheet/BottomSheet.cjs"),F=require("./BottomSheet/BottomSheetTitle/BottomSheetTitle.cjs"),I=require("./BottomSheet/BottomSheetContent/BottomSheetContent.cjs"),L=require("./BottomSheet/BottomSheetAction/BottomSheetAction.cjs"),v=require("./BottomSheet/BottomSheetText/BottomSheetText.cjs"),M=require("./Snackbar/Snackbar.cjs"),w=require("./ChainPicker/ChainPicker.cjs"),E=require("./DatePicker/DatePicker.cjs"),G=require("./DatePicker/EventDot/EventDot.cjs"),K=require("./DatePicker/EventDotGroup/EventDotGroup.cjs"),N=require("./FormControlText/FormControlText.cjs"),R=require("./ClickAwayListener/ClickAwayListener.cjs"),O=require("./Card/Card.cjs"),j=require("./LineProgressIndicator/LineProgressIndicator.cjs"),z=require("./CircularProgressIndicator/CircularProgressIndicator.cjs"),H=require("./NumberKeypad/NumberKeypad.cjs"),J=require("./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs"),Q=require("./FocusBoundary/FocusBoundary.cjs"),U=require("./Badge/Badge.cjs"),V=require("./Tab/Tab.cjs"),W=require("./Tab/TabBlock/TabBlock.cjs"),X=require("./Slider/Slider.cjs"),Y=require("./Accordion/Accordion.cjs"),Z=require("./RadioGroup/RadioGroup.cjs"),_=require("./Collapse/Collapse.cjs");exports.Button=e.default;exports.Icon=t.default;exports.Label=o.default;exports.Typography=r.default;exports.Box=u.default;exports.Flexbox=n.default;exports.TextField=a.default;exports.TextArea=i.default;exports.IconButton=l.default;exports.PageControl=c.default;exports.Checkbox=d.default;exports.Radio=s.default;exports.Chip=f.default;exports.SegmentedButton=q.default;exports.SegmentedButtonBlock=B.default;exports.Backdrop=g.default;exports.Dialog=S.default;exports.DialogTitle=p.default;exports.DialogContent=T.default;exports.DialogAction=k.default;exports.DialogText=C.default;exports.Tooltip=m.default;exports.Select=h.default;exports.Option=b.default;exports.Menu=x.default;exports.MenuBlock=D.default;exports.Skeleton=y.default;exports.Switch=P.default;exports.BottomSheet=A.default;exports.BottomSheetTitle=F.default;exports.BottomSheetContent=I.default;exports.BottomSheetAction=L.default;exports.BottomSheetText=v.default;exports.Snackbar=M.default;exports.ChainPicker=w.default;exports.DatePicker=E.default;exports.EventDot=G.default;exports.EventDotGroup=K.default;exports.FormControlText=N.default;exports.ClickAwayListener=R.default;exports.Card=O.default;exports.LineProgressIndicator=j.default;exports.CircularProgressIndicator=z.default;exports.NumberKeypad=H.default;exports.NumberKeypadBlock=J.default;exports.FocusBoundary=Q.default;exports.Badge=U.default;exports.Tab=V.default;exports.TabBlock=W.default;exports.Slider=X.default;exports.Accordion=Y.default;exports.RadioGroup=Z.default;exports.Collapse=_.default;

package/index.d.ts

@@ -37,3 +37,4 @@ export { default as Tab, TabBlock } from './Tab';
 export { default as Slider } from './Slider';
 export { default as Accordion } from './Accordion';
 export { default as RadioGroup } from './RadioGroup';
+export { default as Collapse } from './Collapse';

package/index.es.js

@@ -1,13 +1,13 @@
 import { default as a } from "./Button/Button.es.js";
 import { default as f } from "./Icon/Icon.es.js";
 import { default as d } from "./Label/Label.es.js";
-import { default as m } from "./Typography/Typography.es.js";
+import { default as p } from "./Typography/Typography.es.js";
 import { default as x } from "./Box/Box.es.js";
 import { default as n } from "./Flexbox/Flexbox.es.js";
 import { default as c } from "./TextField/TextField.es.js";
 import { default as g } from "./TextArea/TextArea.es.js";
 import { default as k } from "./IconButton/IconButton.es.js";
-import { default as h } from "./PageControl/PageControl.es.js";
+import { default as T } from "./PageControl/PageControl.es.js";
 import { default as b } from "./Checkbox/Checkbox.es.js";
 import { default as y } from "./Radio/Radio.es.js";
 import { default as P } from "./Chip/Chip.es.js";
@@ -25,17 +25,17 @@ import { default as X } from "./Select/Option/Option.es.js";
 import { default as Z } from "./Menu/Menu.es.js";
 import { default as $ } from "./Menu/MenuBlock/MenuBlock.es.js";
 import "./Menu/MenuButton/MenuButton.es.js";
-import { default as to } from "./Skeleton/Skeleton.es.js";
+import { default as eo } from "./Skeleton/Skeleton.es.js";
 import { default as ao } from "./Switch/Switch.es.js";
 import { default as fo } from "./BottomSheet/BottomSheet.es.js";
 import { default as uo } from "./BottomSheet/BottomSheetTitle/BottomSheetTitle.es.js";
-import { default as po } from "./BottomSheet/BottomSheetContent/BottomSheetContent.es.js";
+import { default as mo } from "./BottomSheet/BottomSheetContent/BottomSheetContent.es.js";
 import { default as so } from "./BottomSheet/BottomSheetAction/BottomSheetAction.es.js";
 import { default as io } from "./BottomSheet/BottomSheetText/BottomSheetText.es.js";
 import { default as Bo } from "./Snackbar/Snackbar.es.js";
 import { default as So } from "./ChainPicker/ChainPicker.es.js";
-import { default as To } from "./DatePicker/DatePicker.es.js";
-import { default as Co } from "./DatePicker/EventDot/EventDot.es.js";
+import { default as Co } from "./DatePicker/DatePicker.es.js";
+import { default as ho } from "./DatePicker/EventDot/EventDot.es.js";
 import { default as Do } from "./DatePicker/EventDotGroup/EventDotGroup.es.js";
 import { default as Ao } from "./FormControlText/FormControlText.es.js";
 import { default as Fo } from "./ClickAwayListener/ClickAwayListener.es.js";
@@ -51,13 +51,14 @@ import { default as Uo } from "./Tab/TabBlock/TabBlock.es.js";
 import { default as Wo } from "./Slider/Slider.es.js";
 import { default as Yo } from "./Accordion/Accordion.es.js";
 import { default as _o } from "./RadioGroup/RadioGroup.es.js";
+import { default as oe } from "./Collapse/Collapse.es.js";
 export {
   Yo as Accordion,
   E as Backdrop,
   zo as Badge,
   fo as BottomSheet,
   so as BottomSheetAction,
-  po as BottomSheetContent,
+  mo as BottomSheetContent,
   io as BottomSheetText,
   uo as BottomSheetTitle,
   x as Box,
@@ -68,13 +69,14 @@ export {
   P as Chip,
   Go as CircularProgressIndicator,
   Fo as ClickAwayListener,
-  To as DatePicker,
+  oe as Collapse,
+  Co as DatePicker,
   K as Dialog,
   q as DialogAction,
   O as DialogContent,
   H as DialogText,
   N as DialogTitle,
-  Co as EventDot,
+  ho as EventDot,
   Do as EventDotGroup,
   n as Flexbox,
   jo as FocusBoundary,
@@ -88,13 +90,13 @@ export {
   Mo as NumberKeypad,
   Ro as NumberKeypadBlock,
   X as Option,
-  h as PageControl,
+  T as PageControl,
   y as Radio,
   _o as RadioGroup,
   I as SegmentedButton,
   v as SegmentedButtonBlock,
   V as Select,
-  to as Skeleton,
+  eo as Skeleton,
   Wo as Slider,
   Bo as Snackbar,
   ao as Switch,
@@ -103,5 +105,5 @@ export {
   g as TextArea,
   c as TextField,
   Q as Tooltip,
-  m as Typography
+  p as Typography
 };

package/package.json

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

package/utils/isPrefersReducedMotion/isPrefersReducedMotion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(){return window!=null&&window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1}exports.default=e;

package/utils/isPrefersReducedMotion/isPrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export default function isPrefersReducedMotion(): boolean;

package/utils/isPrefersReducedMotion/isPrefersReducedMotion.es.js

@@ -0,0 +1,6 @@
+function e() {
+  return window != null && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
+}
+export {
+  e as default
+};

package/utils/isServer/isServer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(){return typeof document>"u"}exports.default=e;

package/utils/isServer/isServer.d.ts

@@ -0,0 +1 @@
+export default function isServer(): boolean;

package/utils/isServer/isServer.es.js

@@ -0,0 +1,6 @@
+function e() {
+  return typeof document > "u";
+}
+export {
+  e as default
+};