@dotss/ui 1.7.2 → 1.9.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.9.0
+
+### Minor Changes
+
+- d15467e: feat(ui): Highlight 컴포넌트 추가
+
+## 1.8.0
+
+### Minor Changes
+
+- 5dc7122: feat(ui): Button.underlined 추가
+
 ## 1.7.2
 
 ### Patch Changes

package/Highlight/Highlight.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@emotion/react/jsx-runtime"),r=require("react"),N=require("react-dom"),V=require("../hooks/useScrollLock/useScrollLock.cjs"),A=require("../hooks/useScrollLock/useScrollLock.utils.cjs"),B=require("@emotion/styled"),T=require("./Highlight.utils.cjs"),K=t=>t&&t.__esModule?t:{default:t},f=K(B),U=f.default.div`
+  display: inline-block;
+  max-width: 100%;
+`,W=f.default.div`
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  pointer-events: none;
+  opacity: ${({open:t})=>t?1:0};
+  transition: opacity ${({transitionDuration:t})=>t}ms;
+`,y=f.default.div`
+  position: fixed;
+  pointer-events: auto;
+  background-color: transparent;
+`,J=f.default.div`
+  position: fixed;
+  pointer-events: none;
+  box-shadow: 0 0 0 9999px
+    ${({theme:{palette:{etc:t}}})=>t.dimmed01};
+  border-radius: ${({borderRadius:t})=>Number.isInteger(t)?`${t}px`:t};
+`,Q=f.default.div`
+  position: fixed;
+  z-index: 100001;
+  pointer-events: auto;
+  width: max-content;
+  max-width: min(100vw - 32px, 360px);
+`,X=r.forwardRef(function({children:_,open:u=!1,onClose:i,transitionDuration:x=200,transitionDelay:b=0,padding:l=0,borderRadius:L=0,disablePortal:P=!1,closeOnTargetInteract:q=!0,overlay:k,overlayPlacement:I="bottom-center",overlayOffset:O,scrollIntoView:H=!0,inlineCSS:z,onClick:v,...M},d){const[j,E]=r.useState(!1),[h,R]=r.useState(!1),[c,$]=r.useState(T.DEFAULT_HIGHLIGHT_POSITION),g=r.useRef(null),o=r.useRef(null),a=r.useRef(null);V.default({enabled:h,targetRef:g});const m=T.getDimPanelStyles(c),p=r.useCallback(()=>{const e=g.current;if(!e)return;const s=e.getBoundingClientRect();$({top:s.top-l,left:s.left-l,width:s.width+l*2,height:s.height+l*2})},[l]),D=e=>{v==null||v(e),u&&q&&(i==null||i())},F=e=>{e.stopPropagation(),i==null||i()},G=e=>{g.current=e,typeof d=="function"?d(e):d&&(d.current=e)};r.useEffect(()=>{let e=!1;return u?(async()=>{a.current&&clearTimeout(a.current);const S=g.current;S&&await A.ensureElementInView(S,H),!e&&(p(),R(!0),o.current=setTimeout(()=>{e||E(!0)},b))})():(o.current&&clearTimeout(o.current),E(!1),a.current=setTimeout(()=>{e||R(!1)},x)),()=>{e=!0}},[u,b,x,p,H]),r.useEffect(()=>{if(!h)return;const e=()=>{p()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[h,p]),r.useEffect(()=>{const e=s=>{s.key==="Escape"&&u&&(i==null||i())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[u,i]),r.useEffect(()=>()=>{o.current&&clearTimeout(o.current),a.current&&clearTimeout(a.current)},[]);const w=h?n.jsxs(W,{open:j,transitionDuration:x,"aria-hidden":!j,children:[n.jsx(y,{style:m.top,onClick:i}),n.jsx(y,{style:m.left,onClick:i}),n.jsx(y,{style:m.right,onClick:i}),n.jsx(y,{style:m.bottom,onClick:i}),n.jsx(J,{borderRadius:L,style:{top:c.top,left:c.left,width:c.width,height:c.height}}),k?n.jsx(Q,{style:T.getOverlayStyle(c,I,O),onClick:F,children:k}):null]}):null;return n.jsxs(n.Fragment,{children:[n.jsx(U,{ref:G,onClick:D,...M,css:z,children:_}),w?P?w:N.createPortal(w,document.body):null]})});exports.default=X;

package/Highlight/Highlight.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export type HighlightPlacement = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-middle' | 'left-bottom' | 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-middle' | 'right-bottom';
+export interface HighlightOffset {
+    x?: number;
+    y?: number;
+}
+export interface HighlightProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+    transitionDelay?: number;
+    padding?: number;
+    borderRadius?: CSSProperties['borderRadius'];
+    disablePortal?: boolean;
+    closeOnTargetInteract?: boolean;
+    overlay?: ReactNode;
+    overlayPlacement?: HighlightPlacement;
+    overlayOffset?: HighlightOffset;
+    scrollIntoView?: boolean | ScrollIntoViewOptions;
+}
+declare const Highlight: import('react').ForwardRefExoticComponent<HighlightProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Highlight;

package/Highlight/Highlight.es.js

@@ -0,0 +1,139 @@
+import { jsxs as S, jsx as n, Fragment as K } from "@emotion/react/jsx-runtime";
+import { forwardRef as U, useState as T, useRef as k, useCallback as W, useEffect as g } from "react";
+import { createPortal as q } from "react-dom";
+import D from "../hooks/useScrollLock/useScrollLock.es.js";
+import { ensureElementInView as J } from "../hooks/useScrollLock/useScrollLock.utils.es.js";
+import a from "@emotion/styled";
+import { DEFAULT_HIGHLIGHT_POSITION as Q, getDimPanelStyles as X, getOverlayStyle as Y } from "./Highlight.utils.es.js";
+const Z = a.div`
+  display: inline-block;
+  max-width: 100%;
+`, C = a.div`
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  pointer-events: none;
+  opacity: ${({ open: i }) => i ? 1 : 0};
+  transition: opacity ${({ transitionDuration: i }) => i}ms;
+`, y = a.div`
+  position: fixed;
+  pointer-events: auto;
+  background-color: transparent;
+`, tt = a.div`
+  position: fixed;
+  pointer-events: none;
+  box-shadow: 0 0 0 9999px
+    ${({
+  theme: {
+    palette: { etc: i }
+  }
+}) => i.dimmed01};
+  border-radius: ${({ borderRadius: i }) => Number.isInteger(i) ? `${i}px` : i};
+`, et = a.div`
+  position: fixed;
+  z-index: 100001;
+  pointer-events: auto;
+  width: max-content;
+  max-width: min(100vw - 32px, 360px);
+`, ut = U(function({
+  children: z,
+  open: s = !1,
+  onClose: e,
+  transitionDuration: v = 200,
+  transitionDelay: H = 0,
+  padding: o = 0,
+  borderRadius: O = 0,
+  disablePortal: $ = !1,
+  closeOnTargetInteract: j = !0,
+  overlay: b,
+  overlayPlacement: F = "bottom-center",
+  overlayOffset: G,
+  scrollIntoView: E = !0,
+  inlineCSS: M,
+  onClick: w,
+  ...N
+}, f) {
+  const [L, P] = T(!1), [h, I] = T(!1), [c, V] = T(
+    Q
+  ), d = k(null), l = k(null), u = k(null);
+  D({ enabled: h, targetRef: d });
+  const m = X(c), p = W(() => {
+    const t = d.current;
+    if (!t) return;
+    const r = t.getBoundingClientRect();
+    V({
+      top: r.top - o,
+      left: r.left - o,
+      width: r.width + o * 2,
+      height: r.height + o * 2
+    });
+  }, [o]), _ = (t) => {
+    w == null || w(t), s && j && (e == null || e());
+  }, A = (t) => {
+    t.stopPropagation(), e == null || e();
+  }, B = (t) => {
+    d.current = t, typeof f == "function" ? f(t) : f && (f.current = t);
+  };
+  g(() => {
+    let t = !1;
+    return s ? (async () => {
+      u.current && clearTimeout(u.current);
+      const R = d.current;
+      R && await J(R, E), !t && (p(), I(!0), l.current = setTimeout(() => {
+        t || P(!0);
+      }, H));
+    })() : (l.current && clearTimeout(l.current), P(!1), u.current = setTimeout(() => {
+      t || I(!1);
+    }, v)), () => {
+      t = !0;
+    };
+  }, [s, H, v, p, E]), g(() => {
+    if (!h) return;
+    const t = () => {
+      p();
+    };
+    return window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }, [h, p]), g(() => {
+    const t = (r) => {
+      r.key === "Escape" && s && (e == null || e());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [s, e]), g(() => () => {
+    l.current && clearTimeout(l.current), u.current && clearTimeout(u.current);
+  }, []);
+  const x = h ? /* @__PURE__ */ S(C, { open: L, transitionDuration: v, "aria-hidden": !L, children: [
+    /* @__PURE__ */ n(y, { style: m.top, onClick: e }),
+    /* @__PURE__ */ n(y, { style: m.left, onClick: e }),
+    /* @__PURE__ */ n(y, { style: m.right, onClick: e }),
+    /* @__PURE__ */ n(y, { style: m.bottom, onClick: e }),
+    /* @__PURE__ */ n(
+      tt,
+      {
+        borderRadius: O,
+        style: {
+          top: c.top,
+          left: c.left,
+          width: c.width,
+          height: c.height
+        }
+      }
+    ),
+    b ? /* @__PURE__ */ n(
+      et,
+      {
+        style: Y(c, F, G),
+        onClick: A,
+        children: b
+      }
+    ) : null
+  ] }) : null;
+  return /* @__PURE__ */ S(K, { children: [
+    /* @__PURE__ */ n(Z, { ref: B, onClick: _, ...N, css: M, children: z }),
+    x ? $ ? x : q(x, document.body) : null
+  ] });
+});
+export {
+  ut as default
+};

package/Highlight/Highlight.stories.d.ts

@@ -0,0 +1,26 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Highlight').HighlightProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        overlayPlacement: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithOverlay: Story;
+export declare const WithTransitionDelay: Story;
+export declare const OffscreenTarget: Story;
+export declare const Nested: Story;
+export declare const SequentialTour: Story;

package/Highlight/Highlight.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=12,c={top:0,left:0,width:0,height:0},m=i=>{const{top:f,left:a,width:e,height:t}=i;return{top:{top:0,left:0,width:"100%",height:Math.max(f,0)},left:{top:f,left:0,width:Math.max(a,0),height:t},right:{top:f,left:a+e,right:0,height:t},bottom:{top:f+t,left:0,width:"100%",bottom:0}}};function p(i,f,a){const e=(a==null?void 0:a.x)??0,t=(a==null?void 0:a.y)??0,{top:o,left:n,width:l,height:s}=i;switch(f){case"top-left":return{top:o-r+t,left:n+e,transform:"translateY(-100%)"};case"top-center":return{top:o-r+t,left:n+l/2+e,transform:"translate(-50%, -100%)"};case"top-right":return{top:o-r+t,left:n+l+e,transform:"translate(-100%, -100%)"};case"bottom-left":return{top:o+s+r+t,left:n+e};case"bottom-center":return{top:o+s+r+t,left:n+l/2+e,transform:"translateX(-50%)"};case"bottom-right":return{top:o+s+r+t,left:n+l+e,transform:"translateX(-100%)"};case"left-top":return{top:o+t,left:n-r+e,transform:"translateX(-100%)"};case"left-middle":return{top:o+s/2+t,left:n-r+e,transform:"translate(-100%, -50%)"};case"left-bottom":return{top:o+s+t,left:n-r+e,transform:"translate(-100%, -100%)"};case"right-top":return{top:o+t,left:n+l+r+e};case"right-middle":return{top:o+s/2+t,left:n+l+r+e,transform:"translateY(-50%)"};case"right-bottom":return{top:o+s+t,left:n+l+r+e,transform:"translateY(-100%)"};default:return{top:o+s+r+t,left:n+l/2+e,transform:"translateX(-50%)"}}}exports.DEFAULT_HIGHLIGHT_POSITION=c;exports.OVERLAY_GAP=r;exports.getDimPanelStyles=m;exports.getOverlayStyle=p;

package/Highlight/Highlight.utils.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { HighlightOffset, HighlightPlacement } from './Highlight';
+
+export interface HighlightPosition {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export declare const OVERLAY_GAP = 12;
+export declare const DEFAULT_HIGHLIGHT_POSITION: HighlightPosition;
+export declare const getDimPanelStyles: (highlightPosition: HighlightPosition) => {
+    top: CSSProperties;
+    left: CSSProperties;
+    right: CSSProperties;
+    bottom: CSSProperties;
+};
+export declare function getOverlayStyle(highlightPosition: HighlightPosition, overlayPlacement: HighlightPlacement, overlayOffset?: HighlightOffset): CSSProperties;

package/Highlight/Highlight.utils.es.js

@@ -0,0 +1,121 @@
+const f = 12, p = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+}, h = (A) => {
+  const { top: l, left: n, width: e, height: t } = A;
+  return {
+    top: {
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: Math.max(l, 0)
+    },
+    left: {
+      top: l,
+      left: 0,
+      width: Math.max(n, 0),
+      height: t
+    },
+    right: {
+      top: l,
+      left: n + e,
+      right: 0,
+      height: t
+    },
+    bottom: {
+      top: l + t,
+      left: 0,
+      width: "100%",
+      bottom: 0
+    }
+  };
+};
+function c(A, l, n) {
+  const e = (n == null ? void 0 : n.x) ?? 0, t = (n == null ? void 0 : n.y) ?? 0, { top: r, left: o, width: a, height: s } = A;
+  switch (l) {
+    case "top-left":
+      return {
+        top: r - 12 + t,
+        left: o + e,
+        transform: "translateY(-100%)"
+      };
+    case "top-center":
+      return {
+        top: r - 12 + t,
+        left: o + a / 2 + e,
+        transform: "translate(-50%, -100%)"
+      };
+    case "top-right":
+      return {
+        top: r - 12 + t,
+        left: o + a + e,
+        transform: "translate(-100%, -100%)"
+      };
+    case "bottom-left":
+      return {
+        top: r + s + 12 + t,
+        left: o + e
+      };
+    case "bottom-center":
+      return {
+        top: r + s + 12 + t,
+        left: o + a / 2 + e,
+        transform: "translateX(-50%)"
+      };
+    case "bottom-right":
+      return {
+        top: r + s + 12 + t,
+        left: o + a + e,
+        transform: "translateX(-100%)"
+      };
+    case "left-top":
+      return {
+        top: r + t,
+        left: o - 12 + e,
+        transform: "translateX(-100%)"
+      };
+    case "left-middle":
+      return {
+        top: r + s / 2 + t,
+        left: o - 12 + e,
+        transform: "translate(-100%, -50%)"
+      };
+    case "left-bottom":
+      return {
+        top: r + s + t,
+        left: o - 12 + e,
+        transform: "translate(-100%, -100%)"
+      };
+    case "right-top":
+      return {
+        top: r + t,
+        left: o + a + 12 + e
+      };
+    case "right-middle":
+      return {
+        top: r + s / 2 + t,
+        left: o + a + 12 + e,
+        transform: "translateY(-50%)"
+      };
+    case "right-bottom":
+      return {
+        top: r + s + t,
+        left: o + a + 12 + e,
+        transform: "translateY(-100%)"
+      };
+    default:
+      return {
+        top: r + s + 12 + t,
+        left: o + a / 2 + e,
+        transform: "translateX(-50%)"
+      };
+  }
+}
+export {
+  p as DEFAULT_HIGHLIGHT_POSITION,
+  f as OVERLAY_GAP,
+  h as getDimPanelStyles,
+  c as getOverlayStyle
+};

package/Highlight/index.cjs

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

package/Highlight/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Highlight } from './Highlight';
+
+export type { HighlightOffset, HighlightPlacement, HighlightProps } from './Highlight';
+export default Highlight;

package/Highlight/index.es.js

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

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/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"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs"),a=require("./useForm/useForm.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;exports.useForm=a.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),o=require("./useCheckHasFocus/useCheckHasFocus.cjs"),s=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),c=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),t=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs"),l=require("./useForm/useForm.cjs"),a=require("./useScrollLock/useScrollLock.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=o.default;exports.useFocusBoundary=s.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=c.default;exports.usePrefersReducedMotion=t.default;exports.useForm=l.default;exports.useScrollLock=a.default;

package/hooks/index.d.ts

@@ -6,7 +6,9 @@ export { default as useCollapse } from './interactions/useCollapse/useCollapse';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 export { default as usePrefersReducedMotion } from './usePrefersReducedMotion/usePrefersReducedMotion';
 export { default as useForm } from './useForm/useForm';
+export { default as useScrollLock } from './useScrollLock/useScrollLock';
 export type { UseFocusBoundaryProps } from './useFocusBoundary/useFocusBoundary';
 export type { UseCheckHasFocusProps } from './useCheckHasFocus/useCheckHasFocus';
 export type { UseCollapseProps } from './interactions/useCollapse/useCollapse';
 export type { FieldErrors, FormContext, FormFieldHelper, OnSubmitFn, SubmitFn, ValidateFn, UseFormProps, UseFormReturn } from './useForm/useForm';
+export type { UseScrollLockProps } from './useScrollLock/useScrollLock';

package/hooks/index.es.js

@@ -1,18 +1,20 @@
-import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.js";
+import { default as r } from "./useCheckHoverPossible/useCheckHoverPossible.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 m } from "./interactions/useCollapse/useCollapse.es.js";
 import { default as c } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
 import { default as h } from "./usePrefersReducedMotion/usePrefersReducedMotion.es.js";
-import { default as i } from "./useForm/useForm.es.js";
+import { default as C } from "./useForm/useForm.es.js";
+import { default as y } from "./useScrollLock/useScrollLock.es.js";
 export {
   f as useCheckHasFocus,
-  s as useCheckHoverPossible,
+  r as useCheckHoverPossible,
   a as useCheckKeyboardMode,
   m as useCollapse,
   d as useFocusBoundary,
-  i as useForm,
+  C as useForm,
   c as useIsomorphicLayoutEffect,
-  h as usePrefersReducedMotion
+  h as usePrefersReducedMotion,
+  y as useScrollLock
 };

package/hooks/useScrollLock/useScrollLock.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),s=require("../../utils/isServer/isServer.cjs"),o=require("./useScrollLock.utils.cjs");function t({enabled:r=!1,targetRef:e}={}){c.useEffect(()=>{if(!r||s.default())return;const u=o.getScrollLockTargets((e==null?void 0:e.current)??null),l=o.lockOverflow(u);return()=>{o.unlockOverflow(u,l)}},[r,e])}exports.default=t;

package/hooks/useScrollLock/useScrollLock.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+
+export interface UseScrollLockProps {
+    enabled?: boolean;
+    targetRef?: RefObject<Element | null>;
+}
+export default function useScrollLock({ enabled, targetRef }?: UseScrollLockProps): void;

package/hooks/useScrollLock/useScrollLock.es.js

@@ -0,0 +1,15 @@
+import { useEffect as s } from "react";
+import u from "../../utils/isServer/isServer.es.js";
+import { getScrollLockTargets as n, lockOverflow as i, unlockOverflow as f } from "./useScrollLock.utils.es.js";
+function p({ enabled: r = !1, targetRef: o } = {}) {
+  s(() => {
+    if (!r || u()) return;
+    const c = n((o == null ? void 0 : o.current) ?? null), l = i(c);
+    return () => {
+      f(c, l);
+    };
+  }, [r, o]);
+}
+export {
+  p as default
+};

package/hooks/useScrollLock/useScrollLock.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=500,s={behavior:"smooth",block:"center",inline:"nearest"};function h(e){return/(auto|scroll|overlay)/.test(e)}function E(e){const t=getComputedStyle(e);return[t.overflow,t.overflowX,t.overflowY,e.style.overflow,e.style.overflowX,e.style.overflowY].some(h)}function l(e){const t=[];let o=e.parentElement;for(;o;)E(o)&&t.push(o),o=o.parentElement;return t}function g(e){if(!e)return[document.body];const t=[...l(e)];return!t.includes(document.body)&&!t.includes(document.documentElement)&&t.push(document.body),t}function f(e,t){return t.top>=e.top&&t.left>=e.left&&t.bottom<=e.bottom&&t.right<=e.right}function v(e){const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return!0;const o={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth};return f(o,t)?l(e).every(n=>f(n.getBoundingClientRect(),t)):!1}function d(e){return e===!1?null:e===!0?{...s}:{...s,...e}}function a(e=[],t=w){return new Promise(o=>{let n=!1;const r=[...new Set([...e,window])],c=()=>{n||(n=!0,r.forEach(i=>{i.removeEventListener("scrollend",u)}),window.clearTimeout(m),o())},u=()=>{c()};r.forEach(i=>{i.addEventListener("scrollend",u)});const m=setTimeout(c,t)})}async function O(e,t){const o=d(t);!o||v(e)||(e.scrollIntoView(o),o.behavior==="smooth"?await a(l(e)):await new Promise(n=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>n())})}))}function S(e){return e.map(t=>{const o={overflow:t.style.overflow,overflowX:t.style.overflowX,overflowY:t.style.overflowY};return t.style.overflow="hidden",o})}function y(e,t){e.forEach((o,n)=>{const r=t[n];r&&(o.style.overflow=r.overflow,o.style.overflowX=r.overflowX,o.style.overflowY=r.overflowY)})}exports.DEFAULT_SCROLL_INTO_VIEW_OPTIONS=s;exports.SCROLL_END_FALLBACK_MS=w;exports.ensureElementInView=O;exports.getOverflowAncestors=l;exports.getScrollIntoViewOptions=d;exports.getScrollLockTargets=g;exports.isElementInViewport=v;exports.lockOverflow=S;exports.unlockOverflow=y;exports.waitForScrollEnd=a;

package/hooks/useScrollLock/useScrollLock.utils.d.ts

@@ -0,0 +1,16 @@
+export declare const SCROLL_END_FALLBACK_MS = 500;
+export declare const DEFAULT_SCROLL_INTO_VIEW_OPTIONS: ScrollIntoViewOptions;
+interface OverflowInlineStyle {
+    overflow: string;
+    overflowX: string;
+    overflowY: string;
+}
+export declare function getOverflowAncestors(element: Element): HTMLElement[];
+export declare function getScrollLockTargets(element: Element | null): HTMLElement[];
+export declare function isElementInViewport(element: Element): boolean;
+export declare function getScrollIntoViewOptions(scrollIntoView: boolean | ScrollIntoViewOptions): ScrollIntoViewOptions | null;
+export declare function waitForScrollEnd(targets?: EventTarget[], timeout?: number): Promise<void>;
+export declare function ensureElementInView(element: HTMLElement, scrollIntoView: boolean | ScrollIntoViewOptions): Promise<void>;
+export declare function lockOverflow(elements: HTMLElement[]): OverflowInlineStyle[];
+export declare function unlockOverflow(elements: HTMLElement[], previous: OverflowInlineStyle[]): void;
+export {};

package/hooks/useScrollLock/useScrollLock.utils.es.js

@@ -0,0 +1,102 @@
+const y = 500, u = {
+  behavior: "smooth",
+  block: "center",
+  inline: "nearest"
+};
+function d(e) {
+  return /(auto|scroll|overlay)/.test(e);
+}
+function v(e) {
+  const t = getComputedStyle(e);
+  return [
+    t.overflow,
+    t.overflowX,
+    t.overflowY,
+    e.style.overflow,
+    e.style.overflowX,
+    e.style.overflowY
+  ].some(d);
+}
+function i(e) {
+  const t = [];
+  let o = e.parentElement;
+  for (; o; )
+    v(o) && t.push(o), o = o.parentElement;
+  return t;
+}
+function E(e) {
+  if (!e) return [document.body];
+  const t = [...i(e)];
+  return !t.includes(document.body) && !t.includes(document.documentElement) && t.push(document.body), t;
+}
+function f(e, t) {
+  return t.top >= e.top && t.left >= e.left && t.bottom <= e.bottom && t.right <= e.right;
+}
+function a(e) {
+  const t = e.getBoundingClientRect();
+  if (t.width <= 0 || t.height <= 0) return !0;
+  const o = {
+    top: 0,
+    left: 0,
+    bottom: window.innerHeight || document.documentElement.clientHeight,
+    right: window.innerWidth || document.documentElement.clientWidth
+  };
+  return f(o, t) ? i(e).every(
+    (n) => f(n.getBoundingClientRect(), t)
+  ) : !1;
+}
+function m(e) {
+  return e === !1 ? null : e === !0 ? { ...u } : { ...u, ...e };
+}
+function h(e = [], t = 500) {
+  return new Promise((o) => {
+    let n = !1;
+    const r = [.../* @__PURE__ */ new Set([...e, window])], s = () => {
+      n || (n = !0, r.forEach((l) => {
+        l.removeEventListener("scrollend", c);
+      }), window.clearTimeout(w), o());
+    }, c = () => {
+      s();
+    };
+    r.forEach((l) => {
+      l.addEventListener("scrollend", c);
+    });
+    const w = setTimeout(s, t);
+  });
+}
+async function g(e, t) {
+  const o = m(t);
+  !o || a(e) || (e.scrollIntoView(o), o.behavior === "smooth" ? await h(i(e)) : await new Promise((n) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => n());
+    });
+  }));
+}
+function p(e) {
+  return e.map((t) => {
+    const o = {
+      overflow: t.style.overflow,
+      overflowX: t.style.overflowX,
+      overflowY: t.style.overflowY
+    };
+    return t.style.overflow = "hidden", o;
+  });
+}
+function L(e, t) {
+  e.forEach((o, n) => {
+    const r = t[n];
+    r && (o.style.overflow = r.overflow, o.style.overflowX = r.overflowX, o.style.overflowY = r.overflowY);
+  });
+}
+export {
+  u as DEFAULT_SCROLL_INTO_VIEW_OPTIONS,
+  y as SCROLL_END_FALLBACK_MS,
+  g as ensureElementInView,
+  i as getOverflowAncestors,
+  m as getScrollIntoViewOptions,
+  E as getScrollLockTargets,
+  a as isElementInViewport,
+  p as lockOverflow,
+  L as unlockOverflow,
+  h as waitForScrollEnd
+};

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"),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"),m=require("./Dialog/DialogContent/DialogContent.cjs"),T=require("./Dialog/DialogAction/DialogAction.cjs"),k=require("./Dialog/DialogText/DialogText.cjs"),C=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"),A=require("./Switch/Switch.cjs"),P=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"),$=require("./Autocomplete/Autocomplete.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=m.default;exports.DialogAction=T.default;exports.DialogText=k.default;exports.Tooltip=C.default;exports.Select=h.default;exports.Option=b.default;exports.Menu=x.default;exports.MenuBlock=D.default;exports.Skeleton=y.default;exports.Switch=A.default;exports.BottomSheet=P.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;exports.Autocomplete=$.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"),i=require("./Flexbox/Flexbox.cjs"),n=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"),p=require("./Dialog/DialogTitle/DialogTitle.cjs"),h=require("./Dialog/DialogContent/DialogContent.cjs"),m=require("./Dialog/DialogAction/DialogAction.cjs"),T=require("./Dialog/DialogText/DialogText.cjs"),k=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"),A=require("./Switch/Switch.cjs"),P=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("./Highlight/Highlight.cjs"),H=require("./Card/Card.cjs"),j=require("./LineProgressIndicator/LineProgressIndicator.cjs"),z=require("./CircularProgressIndicator/CircularProgressIndicator.cjs"),J=require("./NumberKeypad/NumberKeypad.cjs"),Q=require("./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs"),U=require("./FocusBoundary/FocusBoundary.cjs"),V=require("./Badge/Badge.cjs"),W=require("./Tab/Tab.cjs"),X=require("./Tab/TabBlock/TabBlock.cjs"),Y=require("./Slider/Slider.cjs"),Z=require("./Accordion/Accordion.cjs"),_=require("./RadioGroup/RadioGroup.cjs"),$=require("./Collapse/Collapse.cjs"),ee=require("./Autocomplete/Autocomplete.cjs");exports.Button=e.default;exports.Icon=t.default;exports.Label=o.default;exports.Typography=r.default;exports.Box=u.default;exports.Flexbox=i.default;exports.TextField=n.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=p.default;exports.DialogContent=h.default;exports.DialogAction=m.default;exports.DialogText=T.default;exports.Tooltip=k.default;exports.Select=C.default;exports.Option=b.default;exports.Menu=x.default;exports.MenuBlock=D.default;exports.Skeleton=y.default;exports.Switch=A.default;exports.BottomSheet=P.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.Highlight=O.default;exports.Card=H.default;exports.LineProgressIndicator=j.default;exports.CircularProgressIndicator=z.default;exports.NumberKeypad=J.default;exports.NumberKeypadBlock=Q.default;exports.FocusBoundary=U.default;exports.Badge=V.default;exports.Tab=W.default;exports.TabBlock=X.default;exports.Slider=Y.default;exports.Accordion=Z.default;exports.RadioGroup=_.default;exports.Collapse=$.default;exports.Autocomplete=ee.default;

package/index.d.ts

@@ -52,6 +52,8 @@ export { default as FormControlText } from './FormControlText';
 export type { FormControlTextProps } from './FormControlText';
 export { default as ClickAwayListener } from './ClickAwayListener';
 export type { ClickAwayListenerProps } from './ClickAwayListener';
+export { default as Highlight } from './Highlight';
+export type { HighlightOffset, HighlightPlacement, HighlightProps } from './Highlight';
 export { default as Card } from './Card';
 export type { CardProps } from './Card';
 export { default as LineProgressIndicator } from './LineProgressIndicator';

package/index.es.js

@@ -3,11 +3,11 @@ import { default as f } from "./Icon/Icon.es.js";
 import { default as d } from "./Label/Label.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 i } 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 T } from "./PageControl/PageControl.es.js";
+import { default as S } from "./IconButton/IconButton.es.js";
+import { default as C } 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";
@@ -16,94 +16,96 @@ import { default as v } from "./SegmentedButton/SegmentedButtonBlock/SegmentedBu
 import { default as E } from "./Backdrop/Backdrop.es.js";
 import { default as K } from "./Dialog/Dialog.es.js";
 import { default as N } from "./Dialog/DialogTitle/DialogTitle.es.js";
-import { default as O } from "./Dialog/DialogContent/DialogContent.es.js";
-import { default as q } from "./Dialog/DialogAction/DialogAction.es.js";
-import { default as H } from "./Dialog/DialogText/DialogText.es.js";
+import { default as H } from "./Dialog/DialogContent/DialogContent.es.js";
+import { default as j } from "./Dialog/DialogAction/DialogAction.es.js";
+import { default as z } from "./Dialog/DialogText/DialogText.es.js";
 import { default as Q } from "./Tooltip/Tooltip.es.js";
 import { default as V } from "./Select/Select.es.js";
 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 eo } from "./Skeleton/Skeleton.es.js";
+import { default as to } 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 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 no } 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 Co } from "./DatePicker/DatePicker.es.js";
-import { default as ho } from "./DatePicker/EventDot/EventDot.es.js";
+import { default as ho } from "./ChainPicker/ChainPicker.es.js";
+import { default as ko } from "./DatePicker/DatePicker.es.js";
+import { default as To } 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";
-import { default as Lo } from "./Card/Card.es.js";
-import { default as wo } from "./LineProgressIndicator/LineProgressIndicator.es.js";
-import { default as Go } from "./CircularProgressIndicator/CircularProgressIndicator.es.js";
-import { default as Mo } from "./NumberKeypad/NumberKeypad.es.js";
-import { default as Ro } from "./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.es.js";
-import { default as jo } from "./FocusBoundary/FocusBoundary.es.js";
-import { default as zo } from "./Badge/Badge.es.js";
-import { default as Jo } from "./Tab/Tab.es.js";
-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";
-import { default as te } from "./Autocomplete/Autocomplete.es.js";
+import { default as Lo } from "./Highlight/Highlight.es.js";
+import { default as wo } from "./Card/Card.es.js";
+import { default as Go } from "./LineProgressIndicator/LineProgressIndicator.es.js";
+import { default as Mo } from "./CircularProgressIndicator/CircularProgressIndicator.es.js";
+import { default as Ro } from "./NumberKeypad/NumberKeypad.es.js";
+import { default as Oo } from "./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.es.js";
+import { default as qo } from "./FocusBoundary/FocusBoundary.es.js";
+import { default as Jo } from "./Badge/Badge.es.js";
+import { default as Uo } from "./Tab/Tab.es.js";
+import { default as Wo } from "./Tab/TabBlock/TabBlock.es.js";
+import { default as Yo } from "./Slider/Slider.es.js";
+import { default as _o } from "./Accordion/Accordion.es.js";
+import { default as ot } from "./RadioGroup/RadioGroup.es.js";
+import { default as et } from "./Collapse/Collapse.es.js";
+import { default as rt } from "./Autocomplete/Autocomplete.es.js";
 export {
-  Yo as Accordion,
-  te as Autocomplete,
+  _o as Accordion,
+  rt as Autocomplete,
   E as Backdrop,
-  zo as Badge,
+  Jo as Badge,
   fo as BottomSheet,
   so as BottomSheetAction,
   mo as BottomSheetContent,
-  io as BottomSheetText,
+  no as BottomSheetText,
   uo as BottomSheetTitle,
   x as Box,
   a as Button,
-  Lo as Card,
-  So as ChainPicker,
+  wo as Card,
+  ho as ChainPicker,
   b as Checkbox,
   P as Chip,
-  Go as CircularProgressIndicator,
+  Mo as CircularProgressIndicator,
   Fo as ClickAwayListener,
-  oe as Collapse,
-  Co as DatePicker,
+  et as Collapse,
+  ko as DatePicker,
   K as Dialog,
-  q as DialogAction,
-  O as DialogContent,
-  H as DialogText,
+  j as DialogAction,
+  H as DialogContent,
+  z as DialogText,
   N as DialogTitle,
-  ho as EventDot,
+  To as EventDot,
   Do as EventDotGroup,
-  n as Flexbox,
-  jo as FocusBoundary,
+  i as Flexbox,
+  qo as FocusBoundary,
   Ao as FormControlText,
+  Lo as Highlight,
   f as Icon,
-  k as IconButton,
+  S as IconButton,
   d as Label,
-  wo as LineProgressIndicator,
+  Go as LineProgressIndicator,
   Z as Menu,
   $ as MenuBlock,
-  Mo as NumberKeypad,
-  Ro as NumberKeypadBlock,
+  Ro as NumberKeypad,
+  Oo as NumberKeypadBlock,
   X as Option,
-  T as PageControl,
+  C as PageControl,
   y as Radio,
-  _o as RadioGroup,
+  ot as RadioGroup,
   I as SegmentedButton,
   v as SegmentedButtonBlock,
   V as Select,
-  eo as Skeleton,
-  Wo as Slider,
+  to as Skeleton,
+  Yo as Slider,
   Bo as Snackbar,
   ao as Switch,
-  Jo as Tab,
-  Uo as TabBlock,
+  Uo as Tab,
+  Wo as TabBlock,
   g as TextArea,
   c as TextField,
   Q as Tooltip,

package/package.json

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