gd-design-library 1.0.2 → 1.2.0

package/components/core/Loader/LoaderStyled.js

@@ -1,39 +1,43 @@
-"use client";
-import { jsxs as g, jsx as w } from "@emotion/react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { getBoxStyles as V, tokensHandler as j } from "../../../tokens/utils.js";
-import { getAnimationDataByName as z } from "./utils.js";
-import { WrapperVariant as A } from "../../../types/wrapper.js";
-import { SizeVariant as B } from "../../../types/common.js";
+import { jsxs as N, jsx as P } from "@emotion/react/jsx-runtime";
+import { forwardRef as V } from "react";
+import { getBoxStyles as b, tokensHandler as j } from "../../../tokens/utils.js";
+import { getAnimationDataByName as A } from "./utils.js";
 import { get as t } from "../../../utils/helpers.js";
-const K = N((n, a) => {
+import { WrapperVariant as B } from "../../../types/wrapper.js";
+import { SizeVariant as L } from "../../../types/common.js";
+const M = V(({
+  theme: {
+    loader: a,
+    animations: n,
+    ...e
+  } = {},
+  styles: m,
+  $name: o,
+  $variant: s = B.Inline,
+  $size: d = L.Md,
+  $animationProps: p,
+  children: f,
+  $rounded: c,
+  ...l
+}, y) => {
   const {
-    theme: {
-      loader: i,
-      animations: s,
-      ...m
-    } = {},
-    styles: p,
-    $name: o,
-    $variant: l = A.Inline,
-    $size: c = B.Md,
-    $animationProps: d,
-    children: f,
-    ...y
-  } = n, {
     boxStyles: x,
-    restProps: S
-  } = V(y), e = new Proxy(i || {}, j(m)), u = t(e, ["animation", o, "name"], ""), P = t(s, u, {}), {
-    animation: r,
+    restProps: u
+  } = b(l), r = new Proxy(a || {}, j(e)), S = t(r, ["animation", o, "name"], ""), g = t(n, S, {}), {
+    animation: i,
     AnimationView: h
-  } = z(o, P, d), $ = [t(e, "default", {}), t(e, l, {}), t(e, [o, "default"], {}), t(e, [o, c], {}), ...r ? [{
-    animation: r
-  }] : [], x, p];
-  return /* @__PURE__ */ g("span", { css: $, ...S, ref: a, children: [
-    /* @__PURE__ */ w(h, {}),
+  } = A(o, g, p), w = [t(r, "default", {}), t(r, s, {}), t(r, [o, "default"], {}), t(r, [o, d], {}), o !== "circle" ? {
+    ".dot": {
+      borderRadius: t(e, ["radius", c], "0px")
+    }
+  } : {}, ...i ? [{
+    animation: i
+  }] : [], x, m];
+  return /* @__PURE__ */ N("span", { css: w, ...u, ref: y, children: [
+    /* @__PURE__ */ P(h, {}),
     f
   ] });
 });
 export {
-  K as LoaderStyled
+  M as LoaderStyled
 };

package/components/core/Menu/Menu.d.ts

@@ -1,2 +1,2 @@
-import { MenuProps } from './Menu.types';
-export declare const Menu: import('react').ForwardRefExoticComponent<MenuProps<unknown> & import('react').RefAttributes<HTMLDivElement>>;
+import { MenuProps, MenuRef } from './';
+export declare const Menu: import('react').ForwardRefExoticComponent<MenuProps & import('react').RefAttributes<MenuRef>>;

package/components/core/Menu/Menu.js

@@ -1,106 +1,126 @@
 "use client";
-import { jsxs as K, Fragment as V, jsx as g } from "@emotion/react/jsx-runtime";
-import { forwardRef as W, useState as M, useMemo as Y, useRef as h, useCallback as O, useImperativeHandle as $, useEffect as I } from "react";
-import { MENU_DEFAULT_OPTIONS as j, EMPTY_CLIENT_RECT as P, COMPONENT_NAME as w } from "./constants.js";
-import { MenuTriggerStyled as U, MenuContentStyled as J } from "./MenuStyled.js";
-import { useAnimationFrame as q } from "../../../utils/animationFrame.js";
-import { SelectContext as z } from "../Select/hooks/useSelectContext.js";
-import { convertToInlineBoxStyles as G } from "../../../tokens/utils.js";
-import { useTheme as Q } from "../../../hooks/useTheme/useTheme.js";
-import { Portal as X } from "../Portal/Portal.js";
-import { KEYBOARD_KEYS as Z } from "../../../constants/keyboard.js";
-const tt = W((S, T) => {
+import { jsxs as X, jsx as x } from "@emotion/react/jsx-runtime";
+import { forwardRef as K, useState as y, useRef as H, useCallback as L, useEffect as U, useImperativeHandle as W } from "react";
+import { EMPTY_CLIENT_RECT as j, COMPONENT_NAME as m } from "./constants.js";
+import { MenuTriggerStyled as G, MenuContentStyled as R } from "./MenuStyled.js";
+import { useAnimationFrame as V } from "../../../utils/animationFrame.js";
+import { SelectContext as q } from "../Select/hooks/useSelectContext.js";
+import { convertToInlineBoxStyles as z } from "../../../tokens/utils.js";
+import { useTheme as J } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as Q } from "../../../hooks/useLogger/useLogger.js";
+import { Portal as Z } from "../Portal/Portal.js";
+import { KEYBOARD_KEYS as ee } from "../../../constants/keyboard.js";
+const n = 4, te = 400, oe = 80, ne = K(({
+  onSelect: a,
+  children: A,
+  content: Y,
+  itemIdentifier: I = (f, r) => (f == null ? void 0 : f.value) === (r == null ? void 0 : r.value),
+  closeOnSelect: M = !0,
+  placement: _,
+  ...$
+}, v) => {
   const {
-    onSelect: v,
-    children: N,
-    content: k,
-    options: x = {},
-    itemIdentifier: R = (t, n) => (t == null ? void 0 : t.value) === (n == null ? void 0 : n.value),
-    ...y
-  } = S, {
-    theme: C
-  } = Q(), [B, L] = M(), a = Y(() => ({
-    ...j,
-    ...x
-  }), [JSON.stringify(x)]), r = h(null), o = h(null), b = h(), _ = h({
+    theme: f
+  } = J(), r = Q(), [l, g] = y(!1), [i, P] = y(), [N, E] = y(), p = H(null), s = H(null), S = H({
     top: 0,
-    left: 0,
-    maxHeight: a.maxHeight
-  }), [u, f] = M(!1), A = O(({
+    left: 0
+  }), F = L(({
     width: t,
-    height: n
+    height: e
   }) => {
-    const e = r.current ? r.current.getBoundingClientRect() : P, {
-      minHeight: i,
-      align: c,
-      direction: m,
-      offset: s
-    } = a, l = b.current || m || "top", E = e.right + s, p = {
-      top: e.top - 2 * s,
-      bottom: window.innerHeight - e.bottom - 2 * s
-    }, d = {
-      top: e.top,
-      bottom: e.bottom + s,
-      right: E,
-      center: e.left + e.width / 2 + t / 2 < window.innerWidth - s ? e.left + e.width / 2 - t / 2 : E,
-      left: e.left + t < window.innerWidth - s ? e.left : E
-    }, H = p.top > p.bottom ? "top" : "bottom";
-    return p[l] > i && m || p[l] > n ? {
-      top: d[l],
-      left: d[c]
-    } : (b.current = H, {
-      top: d[H],
-      left: d[c]
-    });
-  }, [a]), D = {
-    onSelect: ({
+    const o = p.current ? p.current.getBoundingClientRect() : j, w = window.innerWidth, d = window.innerHeight, h = window.scrollX || window.pageXOffset || 0, k = window.scrollY || window.pageYOffset || 0, O = _ || "bottom-right";
+    let c, u;
+    switch (O) {
+      case "top-left": {
+        c = o.left - t, u = o.top - e - n;
+        break;
+      }
+      case "top-right": {
+        c = o.right + n, u = o.top - e - n;
+        break;
+      }
+      case "bottom-left": {
+        c = o.left - t, u = o.bottom + n;
+        break;
+      }
+      case "bottom-right": {
+        c = o.right + n, u = o.bottom + n;
+        break;
+      }
+    }
+    return c + t > w && (c = w - t - n), c < 0 && (c = n), u + e > d && (u = d - e - n), u < 0 && (u = n), {
+      left: c + h,
+      top: u + k
+    };
+  }, [_]), C = L(({
+    event: t,
+    data: e
+  }) => {
+    r.debug(`${m}: Select`, {
+      value: e == null ? void 0 : e.value,
+      name: e == null ? void 0 : e.name,
+      previousValue: i == null ? void 0 : i.value,
+      previousName: i == null ? void 0 : i.name
+    }), a == null || a({
       event: t,
-      data: n
-    }) => {
-      v == null || v({
-        event: t,
-        data: n
-      }), L(n), f(!1);
-    },
-    value: B,
-    itemIdentifier: R
-  }, F = O(() => {
-    f((t) => !t);
-  }, []);
-  return $(T, () => r.current), q(() => {
-    if (o.current && u) {
-      const t = o.current.getBoundingClientRect(), n = r.current ? r.current.getBoundingClientRect() : P, {
+      data: e
+    }), P(e), M && g(!1);
+  }, [a, M, i]), B = L(() => {
+    g((t) => {
+      const e = !t;
+      return r.debug(`${m}: ${e ? "Open" : "Close"}`, {
+        trigger: "toggle"
+      }), e;
+    });
+  }, []), D = {
+    onSelect: C,
+    value: i,
+    itemIdentifier: I
+  }, b = (t) => {
+    var e;
+    ((e = v == null ? void 0 : v.current) != null && e.isOpen || l) && t.key === ee.ESCAPE && (r.debug(`${m}: Close`, {
+      trigger: "escape"
+    }), g(!1));
+  }, T = (t) => {
+    var e, o;
+    !((e = p == null ? void 0 : p.current) != null && e.contains(N || t.target)) && !((o = s == null ? void 0 : s.current) != null && o.contains(t.target)) && (r.debug(`${m}: Close`, {
+      trigger: "outsideClick"
+    }), g(!1), E(null));
+  };
+  return U(() => (l ? (document.addEventListener("keydown", b), document.addEventListener("mousedown", T)) : (document.removeEventListener("keydown", b), document.removeEventListener("mousedown", T)), () => {
+    document.removeEventListener("keydown", b), document.removeEventListener("mousedown", T);
+  }), [l]), V(() => {
+    if (s.current && l) {
+      const t = s.current.getBoundingClientRect(), {
         top: e,
-        left: i
-      } = A(t), {
-        offset: c,
-        maxHeight: m
-      } = a, l = i < n.right && t.right > n.left && e < 2 * c ? n.top - 2 * c : window.innerHeight - e - c;
-      _.current = {
+        left: o
+      } = F(t), w = window.innerHeight, d = window.scrollY || window.pageYOffset || 0, h = e - d, k = w - h - n, O = Math.max(oe, Math.min(te, k));
+      S.current = {
         top: e,
-        left: i,
-        maxHeight: Math.min(m, l)
-      }, o.current && (o.current.style.left = `${i}px`, o.current.style.top = `${e}px`, o.current.style.maxHeight = `${Math.min(m, l)}px`);
+        left: o
+      }, s.current && (s.current.style.left = `${o}px`, s.current.style.top = `${e}px`, s.current.style.maxHeight = `${O}px`);
     }
-  }), I(() => {
-    const t = (n) => {
-      u && n.key === Z.ESCAPE && f(!1);
-    };
-    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [u]), I(() => {
-    const t = (n) => {
-      var e, i;
-      !((e = r == null ? void 0 : r.current) != null && e.contains(n.target)) && !((i = o == null ? void 0 : o.current) != null && i.contains(n.target)) && f(!1);
-    };
-    return document.addEventListener("mousedown", t), () => {
-      document.removeEventListener("mousedown", t);
-    };
-  }, [o]), /* @__PURE__ */ K(V, { children: [
-    /* @__PURE__ */ g(U, { onClick: F, theme: C, ref: r, "data-testid": w, ...y, children: N }),
-    u && /* @__PURE__ */ g(X, { withWrapper: !1, children: /* @__PURE__ */ g(z.Provider, { value: D, children: /* @__PURE__ */ g(J, { ref: o, "data-testid": w, theme: C, ...G(y), children: k }) }) })
+  }), W(v, () => ({
+    ref: p,
+    isOpen: l,
+    selectedValue: i,
+    onSelect: C,
+    open: (t) => {
+      r.debug(`${m}: Open`, {
+        trigger: "ref"
+      }), !l && (E(t || null), g(!0));
+    },
+    close: (t) => {
+      r.debug(`${m}: Close`, {
+        trigger: "ref"
+      }), l && (E(t || null), g(!1));
+    }
+  }), [l, i, C]), /* @__PURE__ */ X(q.Provider, { value: D, children: [
+    /* @__PURE__ */ x(G, { onClick: B, theme: f, ref: p, "data-testid": m, ...$, children: A }),
+    l && /* @__PURE__ */ x(Z, { withWrapper: !1, children: /* @__PURE__ */ x(R, { ref: s, "data-testid": m, theme: f, ...z($), children: Y }) })
   ] });
 });
-tt.displayName = w;
+ne.displayName = m;
 export {
-  tt as Menu
+  ne as Menu
 };

package/components/core/Menu/Menu.types.d.ts

@@ -1,15 +1,20 @@
-import { ReactNode } from 'react';
-import { Theme } from '../../../hooks';
-import { ButtonProps, CommonCssComponentStyledProps, SelectProps } from '../..';
-import { MENU_DEFAULT_OPTIONS } from './constants';
-export type MenuOptions = Partial<typeof MENU_DEFAULT_OPTIONS>;
-export type VerticalAlignment = 'bottom' | 'top';
-export interface MenuProps<T> extends Partial<Pick<SelectProps<T>, 'styles' | 'onSelect' | 'itemIdentifier' | 'children'>> {
-    title?: string;
+import { ReactNode, Ref } from 'react';
+import { BoxCssComponentProps, CommonCssComponentStyledProps, Option, SelectOnSelect, ItemIdentifier } from '../..';
+export type MenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface MenuProps extends Omit<BoxCssComponentProps, 'content' | 'onSelect'> {
+    itemIdentifier?: ItemIdentifier;
     content?: ReactNode;
-    options?: MenuOptions;
+    onSelect?: SelectOnSelect;
+    closeOnSelect?: boolean;
+    placement?: MenuPlacement;
 }
-export interface MenuTriggerStyledProps extends Partial<ButtonProps> {
-    theme?: Theme;
+export interface MenuRef {
+    ref: Ref<HTMLDivElement>;
+    selectedValue?: Option | null;
+    isOpen: boolean;
+    onSelect: SelectOnSelect;
+    open: (target?: EventTarget | null) => void;
+    close: (target?: EventTarget | null) => void;
 }
+export type MenuTriggerStyledProps = CommonCssComponentStyledProps;
 export type MenuContentStyledProps = CommonCssComponentStyledProps;

package/components/core/Menu/MenuStyled.d.ts

@@ -1,3 +1,3 @@
 import { MenuTriggerStyledProps, MenuContentStyledProps } from './Menu.types';
-export declare const MenuTriggerStyled: import('react').ForwardRefExoticComponent<MenuTriggerStyledProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const MenuTriggerStyled: import('react').ForwardRefExoticComponent<Omit<MenuTriggerStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const MenuContentStyled: import('react').ForwardRefExoticComponent<Omit<MenuContentStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Menu/constants.js

@@ -1,4 +1,4 @@
-const i = "Menu", t = {
+const o = "Menu", t = {
   bottom: 0,
   height: 0,
   left: 0,
@@ -7,18 +7,10 @@ const i = "Menu", t = {
   width: 0,
   x: 0,
   y: 0
-}, o = {
-  ...t
 }, e = {
-  align: "right",
-  direction: null,
-  limitWidth: "auto",
-  maxHeight: 400,
-  minHeight: 80,
-  offset: 4
+  ...t
 };
 export {
-  i as COMPONENT_NAME,
-  o as EMPTY_CLIENT_RECT,
-  e as MENU_DEFAULT_OPTIONS
+  o as COMPONENT_NAME,
+  e as EMPTY_CLIENT_RECT
 };

package/components/core/Modal/Modal.js

@@ -1,47 +1,71 @@
 "use client";
-import { jsx as t, jsxs as m, Fragment as k } from "@emotion/react/jsx-runtime";
-import { forwardRef as w, useEffect as O } from "react";
-import { COMPONENT_NAME as r } from "./constants.js";
-import { ModalOverlayStyled as v, ModalContentStyled as B, ModalHeaderStyled as T, ModalTitleStyled as b, CloseButtonStyled as x, ModalBodyStyled as N, ModalFooterStyled as P } from "./ModalStyled.js";
-import { useTheme as $ } from "../../../hooks/useTheme/useTheme.js";
-import { get as f } from "../../../utils/helpers.js";
-import { Portal as g } from "../Portal/Portal.js";
-import { convertToInlineBoxStyles as A } from "../../../tokens/utils.js";
-import { Icon as K } from "../Icon/Icon.js";
-import { KEYBOARD_KEYS as j } from "../../../constants/keyboard.js";
-const D = w((y, p) => {
+import { jsx as a, jsxs as g, Fragment as T } from "@emotion/react/jsx-runtime";
+import { forwardRef as x, useEffect as u, useCallback as h } from "react";
+import { COMPONENT_NAME as t } from "./constants.js";
+import { ModalOverlayStyled as N, ModalContentStyled as P, ModalHeaderStyled as A, ModalTitleStyled as B, CloseButtonStyled as F, ModalBodyStyled as K, ModalFooterStyled as L } from "./ModalStyled.js";
+import { useTheme as j } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as D } from "../../../hooks/useLogger/useLogger.js";
+import { get as p } from "../../../utils/helpers.js";
+import { Portal as H } from "../Portal/Portal.js";
+import { convertToInlineBoxStyles as I } from "../../../tokens/utils.js";
+import { Icon as R } from "../Icon/Icon.js";
+import { KEYBOARD_KEYS as Y } from "../../../constants/keyboard.js";
+const _ = x(({
+  isOpen: o = !1,
+  isCustomView: f = !1,
+  onClose: r,
+  showCloseButton: i = !0,
+  closeOnEscape: c,
+  title: e,
+  children: y,
+  footer: m,
+  styles: s,
+  ...S
+}, k) => {
   const {
-    isOpen: d = !1,
-    isCustomView: u = !1,
-    onClose: o,
-    showCloseButton: s = !0,
-    closeOnEscape: a,
-    title: l,
-    children: i,
-    footer: c,
-    styles: h,
-    ...S
-  } = y, {
-    theme: e
-  } = $(), C = f(e, "modal.icons", {}), E = l || s && o;
-  return O(() => {
-    if (!a) return;
-    const n = (M) => {
-      o && M.key === j.ESCAPE && o();
+    theme: d
+  } = j(), l = D(), b = p(d, "modal.icons", {}), M = e || !!(i && r);
+  u(() => {
+    o && l.debug(`${t}: Open`, {
+      title: e,
+      isCustomView: f,
+      showCloseButton: i,
+      closeOnEscape: c,
+      hasFooter: !!m
+    });
+  }, [o, e, f, i, c, m]);
+  const $ = h(() => {
+    l.debug(`${t}: Close`, {
+      title: e,
+      trigger: "overlay"
+    }), r == null || r();
+  }, [r, e]), v = h(() => {
+    l.debug(`${t}: Close`, {
+      title: e,
+      trigger: "closeButton"
+    }), r == null || r();
+  }, [r, e]);
+  return u(() => {
+    if (!c) return;
+    const n = (E) => {
+      r && E.key === Y.ESCAPE && (l.debug(`${t}: Close`, {
+        title: e,
+        trigger: "escape"
+      }), r());
     };
     return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [d, a, o]), d ? /* @__PURE__ */ t(g, { blocksScroll: !0, children: /* @__PURE__ */ t(v, { onClick: o, theme: e, children: /* @__PURE__ */ t(B, { ref: p, onClick: (n) => n.stopPropagation(), "data-testid": r, theme: e, styles: h, ...A(S), children: u ? i : /* @__PURE__ */ m(k, { children: [
-    E && /* @__PURE__ */ m(T, { theme: e, $withTitle: !!l, children: [
-      l && /* @__PURE__ */ t(b, { theme: e, "data-testid": `${r}-title`, children: l }),
-      s && o && /* @__PURE__ */ t(x, { onClick: o, "data-testid": "close-button", theme: e, children: /* @__PURE__ */ t(K, { ...f(C, "close", {
+  }, [o, c, r, e]), o ? /* @__PURE__ */ a(H, { blocksScroll: !0, children: /* @__PURE__ */ a(N, { onClick: $, theme: d, children: /* @__PURE__ */ a(P, { ref: k, onClick: (n) => n.stopPropagation(), "data-testid": t, theme: d, styles: s, ...I(S), children: f ? y : /* @__PURE__ */ g(T, { children: [
+    M && /* @__PURE__ */ g(A, { theme: d, $withTitle: !!e, "data-testid": `${t}-header`, children: [
+      e && /* @__PURE__ */ a(B, { theme: d, "data-testid": `${t}-title`, children: e }),
+      i && r && /* @__PURE__ */ a(F, { onClick: v, "data-testid": "close-button", theme: d, children: /* @__PURE__ */ a(R, { ...p(b, "close", {
         name: "cross"
       }) }) })
     ] }),
-    i && /* @__PURE__ */ t(N, { theme: e, "data-testid": `${r}-body`, children: i }),
-    c && /* @__PURE__ */ t(P, { theme: e, "data-testid": `${r}-footer`, children: c })
+    y && /* @__PURE__ */ a(K, { theme: d, "data-testid": `${t}-body`, children: y }),
+    m && /* @__PURE__ */ a(L, { theme: d, "data-testid": `${t}-footer`, children: m })
   ] }) }) }) }) : null;
 });
-D.displayName = r;
+_.displayName = t;
 export {
-  D as Modal
+  _ as Modal
 };

package/components/core/Modal/ModalStyled.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as m } from "@emotion/react/jsx-runtime";
 import { forwardRef as u } from "react";
 import { getBoxStyles as p, tokensHandler as a } from "../../../tokens/utils.js";
@@ -7,93 +6,93 @@ const M = (t) => {
   const {
     theme: {
       modal: e,
-      ...s
+      ...o
     } = {},
-    styles: o,
+    styles: s,
     ...r
   } = t, {
     boxStyles: l,
     restProps: n
-  } = p(r), d = new Proxy(e || {}, a(s)), c = [y(d, "overlay.default", {}), l, o];
+  } = p(r), d = new Proxy(e || {}, a(o)), c = [y(d, "overlay.default", {}), l, s];
   return /* @__PURE__ */ m("div", { css: c, ...n });
 }, w = u((t, e) => {
   const {
     theme: {
-      modal: s,
-      ...o
+      modal: o,
+      ...s
     } = {},
     styles: r = {},
     ...l
   } = t, {
     boxStyles: n,
     restProps: d
-  } = p(l), c = new Proxy(s || {}, a(o)), S = [y(c, "content.default", {}), n, r];
+  } = p(l), c = new Proxy(o || {}, a(s)), S = [y(c, "content.default", {}), n, r];
   return /* @__PURE__ */ m("div", { css: S, ...d, ref: e });
 }), b = (t) => {
   const {
     theme: {
       modal: e,
-      ...s
+      ...o
     } = {},
-    $withTitle: o,
+    $withTitle: s,
     styles: r,
     ...l
   } = t, {
     boxStyles: n,
     restProps: d
-  } = p(l), c = new Proxy(e || {}, a(s)), S = y(c, "header", {}), P = [y(S, "default", {}), o ? y(S, "withTitle", {}) : {}, n, r];
+  } = p(l), c = new Proxy(e || {}, a(o)), S = y(c, "header", {}), P = [y(S, "default", {}), s ? y(S, "withTitle", {}) : {}, n, r];
   return /* @__PURE__ */ m("div", { css: P, ...d });
 }, v = (t) => {
   const {
     theme: {
       modal: e,
-      ...s
+      ...o
     } = {},
-    styles: o,
+    styles: s,
     ...r
   } = t, {
     boxStyles: l,
     restProps: n
-  } = p(r), d = new Proxy(e || {}, a(s)), c = [y(d, "title.default", {}), l, o];
+  } = p(r), d = new Proxy(e || {}, a(o)), c = [y(d, "title.default", {}), l, s];
   return /* @__PURE__ */ m("div", { css: c, ...n });
 }, N = (t) => {
   const {
     theme: {
       modal: e,
-      ...s
+      ...o
     } = {},
-    styles: o,
+    styles: s,
     ...r
   } = t, {
     boxStyles: l,
     restProps: n
-  } = p(r), d = new Proxy(e || {}, a(s)), c = [y(d, "body.default", {}), l, o];
+  } = p(r), d = new Proxy(e || {}, a(o)), c = [y(d, "body.default", {}), l, s];
   return /* @__PURE__ */ m("div", { css: c, ...n });
 }, B = (t) => {
   const {
     theme: {
       modal: e,
-      ...s
+      ...o
     } = {},
-    styles: o,
+    styles: s,
     ...r
   } = t, {
     boxStyles: l,
     restProps: n
-  } = p(r), d = new Proxy(e || {}, a(s)), c = [y(d, "footer.default", {}), l, o];
+  } = p(r), d = new Proxy(e || {}, a(o)), c = [y(d, "footer.default", {}), l, s];
   return /* @__PURE__ */ m("div", { css: c, ...n });
 }, T = (t) => {
   const {
     theme: {
       modal: e,
-      ...s
+      ...o
     } = {},
-    styles: o,
+    styles: s,
     ...r
   } = t, {
     boxStyles: l,
     restProps: n
-  } = p(r), d = new Proxy(e || {}, a(s)), c = [y(d, "closeButton.default", {}), l, o];
+  } = p(r), d = new Proxy(e || {}, a(o)), c = [y(d, "closeButton.default", {}), l, s];
   return /* @__PURE__ */ m("button", { css: c, ...n });
 };
 export {

package/components/core/Scroll/Scroll.d.ts

@@ -10,10 +10,16 @@ import { ScrollProps } from './Scroll.types';
  * @component
  * @param {'auto' | 'hidden' | 'visible'} [vertical='auto'] - Controls vertical scrollbar visibility.
  * @param {'auto' | 'hidden' | 'visible'} [horizontal='auto'] - Controls horizontal scrollbar visibility.
+ * @param {boolean} [autoHide=false] - When true, scrollbars are only visible during scrolling.
  *
  * @example
  * <Scroll vertical="auto" horizontal="hidden">
  *   <div>Scrollable content</div>
  * </Scroll>
+ *
+ * @example
+ * <Scroll vertical="auto" autoHide>
+ *   <div>Scrollable content with auto-hiding scrollbars</div>
+ * </Scroll>
  */
 export declare const Scroll: import('react').ForwardRefExoticComponent<ScrollProps & import('react').RefAttributes<HTMLDivElement>>;