gd-design-library 1.2.0 → 1.3.0

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

@@ -1,18 +1,18 @@
 import { PropsWithChildren } from 'react';
 import { EnumOrPrimitive, LabelPosition } from '../../../types';
-import { CommonCssComponentProps, CommonCssComponentStyledProps, CommonCssInputStyledProps } from '../..';
-export interface SwitchProps<T> extends PropsWithChildren<CommonCssComponentProps<T>> {
+import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssInputStyledProps } from '../..';
+export interface SwitchProps<T> extends PropsWithChildren<BoxCssComponentProps<T>> {
     label?: EnumOrPrimitive<LabelPosition>;
     name?: string;
     disabled?: boolean;
     checked?: boolean;
     onValueChange?: (value: boolean) => void;
 }
-export interface SwitchStyledProps<T> extends PropsWithChildren<CommonCssComponentStyledProps<T>> {
+export interface SwitchStyledProps<T> extends PropsWithChildren<BoxCssComponentStyledProps<T>> {
     $disabled?: boolean;
     $checked?: boolean;
 }
-export interface SwitchLabelStyledProps extends PropsWithChildren<CommonCssComponentStyledProps> {
+export interface SwitchLabelStyledProps extends PropsWithChildren<BoxCssComponentStyledProps> {
     $label?: EnumOrPrimitive<LabelPosition>;
 }
 export interface HiddenCheckboxStyledProps extends CommonCssInputStyledProps {

package/components/domainSpecific/Accordion/Accordion.d.ts

@@ -1,2 +1,2 @@
 import { AccordionWrapperProps } from './Accordion.types';
-export declare const Accordion: ({ children, allowMultipleExpand, withoutSeparator, value, defaultValue, onChange, }: AccordionWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ children, allowMultipleExpand, withoutSeparator, value, defaultValue, onChange, isInline, }: AccordionWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/domainSpecific/Accordion/Accordion.js

@@ -1,37 +1,46 @@
 "use client";
-import { jsx as x } from "@emotion/react/jsx-runtime";
-import { useState as A, useCallback as p, useMemo as b } from "react";
+import { jsx as P } from "@emotion/react/jsx-runtime";
+import { useState as T, useCallback as f, useMemo as $ } from "react";
+import { COMPONENT_NAME as O } from "./constants.js";
 import { isArray as j, without as v } from "../../../utils/helpers.js";
-import { AccordionContext as P } from "./hooks/useAccordion.js";
-const G = ({
-  children: u,
-  allowMultipleExpand: m = !1,
-  withoutSeparator: n,
-  value: d,
-  defaultValue: I = [],
-  onChange: s
+import { AccordionContext as L } from "./hooks/useAccordion.js";
+import { useLogger as M } from "../../../hooks/useLogger/useLogger.js";
+const D = ({
+  children: g,
+  allowMultipleExpand: s = !1,
+  withoutSeparator: p,
+  value: u,
+  defaultValue: A = [],
+  onChange: o,
+  isInline: i
 }) => {
-  const [f, l] = A(I), o = j(d), e = o ? d : f, r = p((t) => {
-    if (o) {
-      s == null || s(t);
-      return;
-    }
-    l(t);
-  }, [s, o]), i = p((t) => {
-    if (e.includes(t)) {
-      const c = v(e, t);
-      r(c);
+  const r = M(), [b, l] = T(A), m = j(u), t = m ? u : b, c = f((e) => {
+    r.debug(`${O}: Items updated`, {
+      openedItems: e
+    }), o == null || o(e), !m && l(e);
+  }, [o, m]), I = f((e) => {
+    const d = t.includes(e), x = d ? "Close" : "Open";
+    if (r.debug(`${O}: Toggle item`, {
+      itemId: e,
+      action: x,
+      wasOpened: d,
+      allowMultipleExpand: s,
+      currentOpenedItems: t
+    }), d) {
+      const n = v(t, e);
+      c(n);
     } else {
-      const c = m ? [...e, t] : [t];
-      r(c);
+      const n = s ? [...t, e] : [e];
+      c(n);
     }
-  }, [m, e, r]), O = b(() => ({
-    openedItems: e,
-    toggleItem: i,
-    withoutSeparator: n
-  }), [i, e, n]);
-  return /* @__PURE__ */ x(P.Provider, { value: O, children: u });
+  }, [s, t, c, r]), N = $(() => ({
+    openedItems: t,
+    toggleItem: I,
+    withoutSeparator: p,
+    isInline: i
+  }), [I, t, p, i]);
+  return /* @__PURE__ */ P(L.Provider, { value: N, children: g });
 };
 export {
-  G as Accordion
+  D as Accordion
 };

package/components/domainSpecific/Accordion/Accordion.types.d.ts

@@ -9,13 +9,16 @@ export interface AccordionHeaderProps extends AccordionBaseProps {
 export interface AccordionBasePropsStyled extends CommonCssComponentStyledProps, Omit<BoxCssComponentStyledProps, 'onAbort'>, PropsWithChildren {
     $isOpen?: boolean;
     $withoutSeparator?: boolean;
+    $isInline?: boolean;
 }
 export interface AccordionHeaderPropsStyled extends CommonCssComponentStyledProps, Omit<BoxCssComponentStyledProps, 'onAbort'>, PropsWithChildren {
+    $isInline?: boolean;
 }
 export type AccordionContextType = {
     openedItems: string[];
     toggleItem: (key: string) => void;
     withoutSeparator?: boolean;
+    isInline?: boolean;
 };
 export interface AccordionWrapperProps {
     children: ReactNode;
@@ -23,5 +26,6 @@ export interface AccordionWrapperProps {
     withoutSeparator?: boolean;
     value?: string[];
     defaultValue?: string[];
+    isInline?: boolean;
     onChange?: (openedItems: string[]) => void;
 }

package/components/domainSpecific/Accordion/AccordionHeader/AccordionHeader.js

@@ -1,30 +1,31 @@
 "use client";
-import { jsxs as p, jsx as f } from "@emotion/react/jsx-runtime";
-import { HEADER_COMPONENT as h } from "../constants.js";
-import { AccordionHeaderStyled as A, AccordionIconStyled as $ } from "../AccordionStyled.js";
+import { jsxs as f, jsx as h } from "@emotion/react/jsx-runtime";
+import { HEADER_COMPONENT as $ } from "../constants.js";
+import { AccordionHeaderStyled as A, AccordionIconStyled as I } from "../AccordionStyled.js";
 import { useTheme as u } from "../../../../hooks/useTheme/useTheme.js";
 import { useAccordion as x } from "../hooks/useAccordion.js";
-const j = ({
-  children: t,
+const k = ({
+  children: c,
   id: o,
-  styles: n = {},
-  className: d = "",
+  styles: t = {},
+  className: i = "",
   isOpen: e = !1,
   expandIcon: r,
-  ...i
+  ...d
 }) => {
   const {
-    theme: c
+    theme: n
   } = u(), {
-    toggleItem: a
-  } = x(), s = `accordion-header-${o}`, l = `accordion-panel-${o}`, m = () => {
-    o && a(o);
+    toggleItem: s,
+    isInline: a
+  } = x(), l = `accordion-header-${o}`, m = `accordion-panel-${o}`, p = () => {
+    o && s(o);
   };
-  return /* @__PURE__ */ p(A, { theme: c, id: s, "data-testid": `${h}-${o}`, className: d, "aria-expanded": e, "aria-controls": l, onClick: m, styles: n, ...i, children: [
-    t,
-    r && /* @__PURE__ */ f($, { theme: c, $isOpen: e, children: r })
+  return /* @__PURE__ */ f(A, { theme: n, id: l, "data-testid": `${$}-${o}`, className: i, "aria-expanded": e, "aria-controls": m, onClick: p, styles: t, $isInline: a, ...d, children: [
+    c,
+    r && /* @__PURE__ */ h(I, { theme: n, $isOpen: e, children: r })
   ] });
 };
 export {
-  j as AccordionHeader
+  k as AccordionHeader
 };

package/components/domainSpecific/Accordion/AccordionItem/AccordionItem.d.ts

@@ -1,2 +1,2 @@
 import { AccordionBaseProps } from '../Accordion.types';
-export declare const AccordionItem: ({ children, id, styles, className, ...rest }: AccordionBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AccordionItem: ({ children, id, styles, ...rest }: AccordionBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/domainSpecific/Accordion/AccordionItem/AccordionItem.js

@@ -1,26 +1,26 @@
 "use client";
-import { jsx as s } from "@emotion/react/jsx-runtime";
+import { jsx as c } from "@emotion/react/jsx-runtime";
 import { Children as l, isValidElement as u, cloneElement as d } from "react";
 import { ITEM_COMPONENT as f } from "../constants.js";
-import { AccordionItemStyled as h } from "../AccordionStyled.js";
-import { useAccordion as E } from "../hooks/useAccordion.js";
-import { useTheme as I } from "../../../../hooks/useTheme/useTheme.js";
+import { AccordionItemStyled as I } from "../AccordionStyled.js";
+import { useAccordion as h } from "../hooks/useAccordion.js";
+import { useTheme as $ } from "../../../../hooks/useTheme/useTheme.js";
 const x = ({
   children: r,
-  id: t,
+  id: e,
   styles: n = {},
-  className: m = "",
   ...i
 }) => {
   const {
-    openedItems: a,
-    withoutSeparator: c
-  } = E(), {
-    theme: p
-  } = I(), e = t && a.includes(t);
-  return /* @__PURE__ */ s(h, { "data-testid": `${f}-${t}`, "data-open": e, "data-value": t, theme: p, $withoutSeparator: c, className: m, styles: n, ...i, children: l.map(r, (o) => u(o) ? d(o, {
-    id: t,
-    isOpen: e
+    openedItems: m,
+    withoutSeparator: s,
+    isInline: p
+  } = h(), {
+    theme: a
+  } = $(), t = e && m.includes(e);
+  return /* @__PURE__ */ c(I, { "data-testid": `${f}-${e}`, "data-open": t, "data-value": e, theme: a, $withoutSeparator: s, $isInline: p, $isOpen: !!t, styles: n, ...i, children: l.map(r, (o) => u(o) ? d(o, {
+    id: e,
+    isOpen: t
   }) : null) });
 };
 export {

package/components/domainSpecific/Accordion/AccordionStyled.js

@@ -1,7 +1,7 @@
-import { jsx as y } from "@emotion/react/jsx-runtime";
-import { getBoxStyles as a, tokensHandler as i } from "../../../tokens/utils.js";
+import { jsx as S } from "@emotion/react/jsx-runtime";
+import { getBoxStyles as u, tokensHandler as a } from "../../../tokens/utils.js";
 import { get as t } from "../../../utils/helpers.js";
-const A = (e) => {
+const f = (e) => {
   const {
     theme: {
       accordion: s,
@@ -12,22 +12,23 @@ const A = (e) => {
     ...d
   } = e, {
     boxStyles: o,
-    restProps: p
-  } = a(d), l = new Proxy(s || {}, i(n)), m = t(l, "content", {}), S = c ? "opened" : "closed", u = [t(m, "default", {}), t(m, S, {}), o, r];
-  return /* @__PURE__ */ y("div", { css: u, ...p });
-}, f = (e) => {
+    restProps: l
+  } = u(d), p = new Proxy(s || {}, a(n)), i = t(p, "content", {}), m = c ? "opened" : "closed", y = [t(i, "default", {}), t(i, m, {}), o, r];
+  return /* @__PURE__ */ S("div", { css: y, ...l });
+}, $ = (e) => {
   const {
     theme: {
       accordion: s,
       ...n
     } = {},
-    styles: c,
-    ...r
+    $isInline: c,
+    styles: r,
+    ...d
   } = e, {
-    boxStyles: d,
-    restProps: o
-  } = a(r), p = new Proxy(s || {}, i(n)), l = t(p, "header", {}), m = [t(l, "default", {}), d, c];
-  return /* @__PURE__ */ y("button", { css: m, ...o });
+    boxStyles: o,
+    restProps: l
+  } = u(d), p = new Proxy(s || {}, a(n)), i = t(p, "header", {}), m = [t(i, "default", {}), c ? t(i, "inline", {}) : {}, o, r];
+  return /* @__PURE__ */ S("button", { css: m, ...l });
 }, w = (e) => {
   const {
     theme: {
@@ -36,12 +37,14 @@ const A = (e) => {
     } = {},
     styles: c,
     $withoutSeparator: r,
-    ...d
+    $isInline: d,
+    $isOpen: o,
+    ...l
   } = e, {
-    boxStyles: o,
-    restProps: p
-  } = a(d), l = new Proxy(s || {}, i(n)), m = t(l, r ? "itemNoSeparator" : "item", {}), S = [t(m, "default", {}), o, c];
-  return /* @__PURE__ */ y("div", { css: S, ...p });
+    boxStyles: p,
+    restProps: i
+  } = u(l), m = new Proxy(s || {}, a(n)), y = t(m, "item", {}), P = [d ? t(y, "inline", {}) : {}, t(y, r ? "noSeparator" : "default", {}), t(y, o ? "opened" : "closed", {}), p, c];
+  return /* @__PURE__ */ S("div", { css: P, ...i });
 }, b = (e) => {
   const {
     theme: {
@@ -50,12 +53,12 @@ const A = (e) => {
     } = {},
     $isOpen: c,
     ...r
-  } = e, d = new Proxy(s || {}, i(n)), o = t(d, "icon", {}), p = c ? "opened" : "closed", l = [t(o, "default", {}), t(o, p, {})];
-  return /* @__PURE__ */ y("span", { css: l, ...r });
+  } = e, d = new Proxy(s || {}, a(n)), o = t(d, "icon", {}), l = c ? "opened" : "closed", p = [t(o, "default", {}), t(o, l, {})];
+  return /* @__PURE__ */ S("span", { css: p, ...r });
 };
 export {
-  A as AccordionContentStyled,
-  f as AccordionHeaderStyled,
+  f as AccordionContentStyled,
+  $ as AccordionHeaderStyled,
   b as AccordionIconStyled,
   w as AccordionItemStyled
 };

package/components/domainSpecific/Accordion/constants.js

@@ -1,7 +1,8 @@
-const o = "AccordionItem", c = "AccordionContent", n = "AccordionHeader", t = "Accordion Context must be inside Accordion component";
+const o = "Accordion", c = "AccordionItem", n = "AccordionContent", t = "AccordionHeader", E = "Accordion Context must be inside Accordion component";
 export {
-  c as CONTENT_COMPONENT,
-  t as CONTEXT_ERROR_MESSAGE,
-  n as HEADER_COMPONENT,
-  o as ITEM_COMPONENT
+  o as COMPONENT_NAME,
+  n as CONTENT_COMPONENT,
+  E as CONTEXT_ERROR_MESSAGE,
+  t as HEADER_COMPONENT,
+  c as ITEM_COMPONENT
 };

package/components/domainSpecific/Card/Card.stories.play.d.ts

@@ -0,0 +1,4 @@
+import { StoryContext } from '@storybook/types';
+export declare const withVerticalCardActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withHorizontalCardActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const myCardWithFallbackImageActions: ({ canvasElement, step }: StoryContext) => Promise<void>;

package/components/domainSpecific/ChatBubble/ChatBubbleStyled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as u, jsxs as S } from "@emotion/react/jsx-runtime";
 import { forwardRef as P } from "react";
-import { getBoxStyles as y, tokensHandler as h, getMediaQuery as a } from "../../../tokens/utils.js";
+import { getBoxStyles as y, tokensHandler as h, getMediaQuery as d } from "../../../tokens/utils.js";
 import { Loader as f } from "../../core/Loader/Loader.js";
 import { get as t } from "../../../utils/helpers.js";
 const B = P((r, n) => {
@@ -13,20 +13,20 @@ const B = P((r, n) => {
     styles: c = {},
     $variant: o,
     $status: l,
-    ...d
+    ...p
   } = r, {
     boxStyles: i,
-    restProps: m
-  } = y(d), p = new Proxy(s || {}, h(e)), b = [t(p, "default", {}), t(p, [o, "default"], {}), t(p, l, {}), a({
+    restProps: a
+  } = y(p), m = new Proxy(s || {}, h(e)), b = [t(m, "default", {}), t(m, [o, "default"], {}), t(m, l, {}), d({
     min: t(e, "breakpoints.xs")
-  }, t(s, [o, "xs"], {})), a({
+  }, t(s, [o, "xs"], {})), d({
     min: t(e, "breakpoints.sm")
-  }, t(s, [o, "sm"], {})), a({
+  }, t(s, [o, "sm"], {})), d({
     min: t(e, "breakpoints.md")
-  }, t(s, [o, "sm"], {})), a({
+  }, t(s, [o, "sm"], {})), d({
     min: t(e, "breakpoints.lg")
   }, t(s, [o, "lg"], {})), i, c];
-  return /* @__PURE__ */ u("div", { css: b, ...m, ref: n });
+  return /* @__PURE__ */ u("div", { css: b, ...a, ref: n });
 }), w = (r) => {
   const {
     theme: {
@@ -38,11 +38,11 @@ const B = P((r, n) => {
     styles: o,
     ...l
   } = r, {
-    boxStyles: d,
+    boxStyles: p,
     restProps: i
-  } = y(l), m = new Proxy(n || {}, h(s)), p = t(m, "loader.props", {}), b = [t(m, "content.default", {}), t(m, ["content", e], {}), d, o];
+  } = y(l), a = new Proxy(n || {}, h(s)), m = t(a, "loader.attrs", {}), b = [t(a, "content.default", {}), t(a, ["content", e], {}), p, o];
   return /* @__PURE__ */ S("div", { css: b, ...i, children: [
-    e === "pending" && /* @__PURE__ */ u(f, { ...p }),
+    e === "pending" && /* @__PURE__ */ u(f, { ...m }),
     c
   ] });
 }, N = (r) => {

package/components/domainSpecific/Header/Header.stories.play.d.ts

@@ -0,0 +1,9 @@
+import { StoryContext } from '@storybook/types';
+export declare const completeHeaderActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withSearchActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withActionsActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withMenuActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const darkHeaderActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const interactiveMobileMenuActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withCustomChildrenActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const minimalActions: ({ canvasElement, step }: StoryContext) => Promise<void>;

package/components/domainSpecific/SearchModal/SearchModal.stories.play.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext } from '@storybook/types';
+export declare const withSearchModalActions: ({ canvasElement, step }: StoryContext) => Promise<void>;

package/components/widget/DragAndDrop/DragAndDrop.stories.play.d.ts

@@ -0,0 +1,6 @@
+import { StoryContext } from '@storybook/types';
+export declare const defaultActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const disabledActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const loadingActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const errorActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const usageAsWrapperActions: ({ canvasElement, step }: StoryContext) => Promise<void>;

package/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -1 +1,4 @@
+/**
+ * @TODO: Common util uses window prevent SSR issues
+ */
 export declare const useMediaQuery: (query: string) => boolean;

package/hooks/useMediaQuery/useMediaQuery.js

@@ -1,13 +1,15 @@
 "use client";
-import { useState as i, useEffect as r } from "react";
+import { useState as a, useEffect as c } from "react";
 const o = (e) => {
-  const [a, s] = i(() => window.matchMedia(e).matches);
-  return r(() => {
-    const t = window.matchMedia(e), n = (c) => s(c.matches);
-    return t.addEventListener("change", n), s(t.matches), () => {
-      t.removeEventListener("change", n);
+  const [i, n] = a(() => typeof window > "u" ? !1 : window.matchMedia(e).matches);
+  return c(() => {
+    if (typeof window > "u")
+      return;
+    const t = window.matchMedia(e), s = (r) => n(r.matches);
+    return t.addEventListener("change", s), n(t.matches), () => {
+      t.removeEventListener("change", s);
     };
-  }, [e]), a;
+  }, [e]), i;
 };
 export {
   o as useMediaQuery

package/hooks/useTheme/NoOpTheme.d.ts

@@ -290,10 +290,11 @@ export declare class NoOpTheme implements ITheme {
                 flexDirection: import('../../types').FlexDirection;
             };
             loader: {
-                props: {
+                attrs: {
                     name: string;
                     size: string;
                     withWrapper: boolean;
+                    rounded: (theme: Record<symbol, unknown>) => string;
                 };
             };
         };
@@ -2428,6 +2429,7 @@ export declare class NoOpTheme implements ITheme {
             dropdown: {
                 position: string;
                 textAlign: string;
+                color: (theme: Record<symbol, unknown>) => string;
                 background: (theme: Record<symbol, unknown>) => string;
                 boxShadow: (theme: Record<symbol, unknown>) => string;
                 fontFamily: (theme: Record<symbol, unknown>) => string;
@@ -3205,11 +3207,18 @@ export declare class NoOpTheme implements ITheme {
             content: {
                 default: {
                     backgroundColor: (theme: Record<symbol, unknown>) => string;
+                    zIndex: (theme: Record<symbol, unknown>) => string;
                     position: string;
                     overflow: string;
                     boxShadow: (theme: Record<symbol, unknown>) => string;
                 };
             };
+            attrs: {
+                minHeight: number;
+                maxHeight: number;
+                offsetX: number;
+                offsetY: number;
+            };
         };
         price: {
             default: {
@@ -3421,10 +3430,16 @@ export declare class NoOpTheme implements ITheme {
                     display: string;
                     alignItems: string;
                     justifyContent: string;
+                    gap: (theme: Record<symbol, unknown>) => string;
                     ':first-of-type': {
                         flex: string;
                     };
                 };
+                inline: {
+                    width: string;
+                    display: string;
+                    justifyContent: string;
+                };
             };
             content: {
                 default: {
@@ -3453,16 +3468,23 @@ export declare class NoOpTheme implements ITheme {
                         left: (theme: Record<symbol, unknown>) => string;
                         right: (theme: Record<symbol, unknown>) => string;
                         height: string;
-                        width: string;
                         backgroundColor: (theme: Record<symbol, unknown>) => string;
                     };
                 };
-            };
-            itemNoSeparator: {
-                default: {
+                noSeparator: {
                     position: string;
                     padding: (theme: Record<symbol, unknown>) => string;
                 };
+                inline: {
+                    width: string;
+                    display: string;
+                    flexWrap: string;
+                    flexDirection: string;
+                };
+                opened: {
+                    width: string;
+                };
+                closed: {};
             };
             icon: {
                 default: {

package/llms.txt

@@ -84,19 +84,21 @@ Each component has:
 - [Tabs](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-tabs--docs) - Tab navigation component with keyboard support
 - [Stepper](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-stepper--docs) - Step-by-step navigation indicator
 - [List](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-list--docs) - List container component with flexible item rendering
-- [Accordion](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion--docs) - Collapsible content sections with animation. Built with subcomponents: AccordionItem (wrapper with unique id), AccordionHeader (clickable header with optional expandIcon), AccordionContent (collapsible content). Supports controlled/uncontrolled modes, multiple expand, and custom styling per subcomponent
+- [Accordion](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion--docs) - Collapsible content sections with animation. Built with subcomponents: AccordionItem (wrapper with unique id), AccordionHeader (clickable header with optional expandIcon), AccordionContent (collapsible content). Supports controlled/uncontrolled modes, multiple expand, custom styling per subcomponent, inline layout via `isInline` prop, and integrated logging support via useLogger hook for debugging component behavior, state changes, and user interactions
   - [AccordionItem](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion-accordionitem--docs) - Individual accordion item wrapper (requires unique id prop). **Supports all Box layout props** including margin, padding, width, height, flex, position, and more for flexible layout control
   - [AccordionHeader](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion-accordionheader--docs) - Clickable header with optional expandIcon and rich content support
   - [AccordionContent](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion-accordioncontent--docs) - Collapsible content section with smooth animations
 - [Link](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-link--docs) - Navigation link component with external link support
 - [Dropdown](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-dropdown--docs) - Dropdown menu container with positioning
 - [DropdownItem](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-dropdownitem--docs) - Individual dropdown menu item
-- [Menu](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-menu--docs) - Menu component for navigation and actions with accurate corner positioning, ref API for programmatic control (open, close), closeOnSelect prop for multi-select scenarios, placement prop for explicit positioning, and full Box layout support.
+- [Menu](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-menu--docs) - Menu component for navigation and actions with accurate corner positioning, ref API for programmatic control (open, close), closeOnSelect prop for multi-select scenarios, placement prop for explicit positioning, dynamic height constraints, and full Box layout support.
   - Ref API: Use `ref.open(event.target)` and `ref.close(event.target)` for programmatic control. Pass `event.target` as the parameter to identify API-controlled interactions, which helps distinguish programmatic control from user interactions. Access current state via `ref.isOpen`, `ref.selectedValue`. Example: `<Button onClick={(e) => menuRef.current?.open(e.target)}>Open Menu</Button>`.
   - Close on select: Set `closeOnSelect={false}` to keep menu open after selecting items, useful for multiple selections.
   - Placement: Use `placement="top-left"`, `placement="top-right"`, `placement="bottom-left"`, or `placement="bottom-right"` to explicitly set menu position relative to trigger edges. Defaults to `"bottom-right"` if not specified. Placement provides accurate corner positioning aligned to trigger edges.
+  - Offset: Use `offsetX` and `offsetY` props to control the horizontal and vertical distance in pixels between the menu and trigger element. Defaults are 4 pixels for both. Use `offsetX` for horizontal spacing and `offsetY` for vertical spacing. Example: `<Menu offsetX={8} offsetY={12} content={menuItems}>Menu</Menu>`.
+  - Height constraints: Use `minHeight` and `maxHeight` props (in pixels) to control dynamic height calculations based on available viewport space. Defaults are 80px and 400px respectively. The menu will adjust its height based on available space, respecting these constraints. Example: `<Menu minHeight={100} maxHeight={500} content={menuItems}>Menu</Menu>`.
   - Positioning: Menu uses absolute positioning with viewport-based coordinate calculations that account for scroll position, ensuring accurate placement in Portal-rendered content.
-  - Box props: Full Box component props support for flexible layout control - use `margin`, `padding`, `position`, `flex`, `gap`, `width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, `display`, `overflow`, `zIndex`, and more for precise positioning and spacing. Example: `<Menu padding="16px" marginTop="8px" content={menuItems}>Menu</Menu>` or `<Menu width="200px" maxHeight="300px" overflow="auto" content={menuItems}>Menu</Menu>`.
+  - Box props: Full Box component props support for flexible layout control - use `margin`, `padding`, `position`, `flex`, `gap`, `width`, `height`, `minWidth`, `maxWidth`, `display`, `overflow`, `zIndex`, and more for precise positioning and spacing. Example: `<Menu padding="16px" marginTop="8px" content={menuItems}>Menu</Menu>` or `<Menu width="200px" overflow="auto" content={menuItems}>Menu</Menu>`.
 
 **Display & Content:**
 - [Typography](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-typography--docs) - Text component with hierarchical variants and styling
@@ -108,6 +110,7 @@ Each component has:
 - [Icon](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-icon--docs) - Icon component with 51 built-in icons from IconsList. **CRITICAL: Use ONLY these exact icon names**: cross, success, error, warning, info, dot, check, arrowDown, arrowRight, arrowLeft, arrowForward, keyboardArrowDown, keyboardArrowUp, mobileMenu, home, slash, localShipping, favorite, favoriteOutlined, shoppingBag, paymentCard, accountCircle, portrait, deleteOutlined, minus, plus, edit, search, filter, ruler, processing, eye, attachment, upload, folder, folderOpen, wifiTethering, contentCopy, thumbUp, thumbDown, fileCopy, send, thumbUpFilled, thumbDownFilled, chat, chatBubble, phone, star, starOutlined, errorOutline, volumeUp. Do NOT use: "add" (use plus), "chevronRight" (use arrowRight), "expandMore" (use arrowDown), "close" (use cross), "settings", "infoIcon", or any other invented names
   - Box props: Icon supports full Box component props for flexible layout control. Use `margin`, `padding`, `position`, `flex`, `gap`, and more for precise positioning and spacing. Example: `<Icon name="check" marginRight="12px" />` or `<Icon name="search" position="absolute" top="10px" right="10px" />`
 - [Image](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-image--docs) - Image component with optimization and fallback handling
+  - As prop: Use `as="figure"` for semantic HTML when Image has a caption, or `as="span"` for inline images. The wrapper element can be any HTML tag or React component. Example: `<Image src="/photo.jpg" alt="Product" as="figure" caption="Product photo" />`.
 - [Card](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/templates-card--docs) - Content container with subcomponents, layout variants, and interactive hover effects. Built on Box with support for withShadowHover
 - [Avatar](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-avatar--docs) - User avatar component with fallback and badge support
 - [Carousel](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-carousel--docs) - Image/content carousel with navigation controls

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gd-design-library",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",

package/tokens/accordion.d.ts

@@ -11,10 +11,16 @@ export declare const accordion: {
             display: string;
             alignItems: string;
             justifyContent: string;
+            gap: (theme: Record<symbol, unknown>) => string;
             ':first-of-type': {
                 flex: string;
             };
         };
+        inline: {
+            width: string;
+            display: string;
+            justifyContent: string;
+        };
     };
     content: {
         default: {
@@ -43,16 +49,23 @@ export declare const accordion: {
                 left: (theme: Record<symbol, unknown>) => string;
                 right: (theme: Record<symbol, unknown>) => string;
                 height: string;
-                width: string;
                 backgroundColor: (theme: Record<symbol, unknown>) => string;
             };
         };
-    };
-    itemNoSeparator: {
-        default: {
+        noSeparator: {
             position: string;
             padding: (theme: Record<symbol, unknown>) => string;
         };
+        inline: {
+            width: string;
+            display: string;
+            flexWrap: string;
+            flexDirection: string;
+        };
+        opened: {
+            width: string;
+        };
+        closed: {};
     };
     icon: {
         default: {