@dotss/ui 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dotss/ui
 
+## 1.9.0
+
+### Minor Changes
+
+- d15467e: feat(ui): Highlight 컴포넌트 추가
+
 ## 1.8.0
 
 ### Minor 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/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.8.0",
+  "version": "1.9.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",