@infomaximum/ui-kit 0.17.4 → 0.18.0

package/dist/components/Button/Button.styles.js

@@ -57,6 +57,18 @@ const getWrapperSolidStyle = (theme, color, disabled) => {
       colorStyle = getSolidColorStyle(buttonTokens.buttonDanger, buttonTokens.buttonDangerHover, buttonTokens.buttonDangerActive);
       break;
     }
+    case "warning": {
+      colorStyle = getSolidColorStyle(buttonTokens.buttonWarning, buttonTokens.buttonWarningHover, buttonTokens.buttonWarningActive);
+      break;
+    }
+    case "positive": {
+      colorStyle = getSolidColorStyle(buttonTokens.buttonPositive, buttonTokens.buttonPositiveHover, buttonTokens.buttonPositiveActive);
+      break;
+    }
+    case "info": {
+      colorStyle = getSolidColorStyle(buttonTokens.buttonInfo, buttonTokens.buttonInfoHover, buttonTokens.buttonInfoActive);
+      break;
+    }
     case "remove": {
       colorStyle = getSolidColorStyle(buttonTokens.buttonSolidDefaultBg, buttonTokens.buttonDangerHover, buttonTokens.buttonDangerActive);
       break;
@@ -93,6 +105,18 @@ const getWrapperOutlinedStyle = (theme, color, disabled, borderStyle = "solid")
       colorStyle = getOutlinedColorStyle(buttonTokens.buttonDanger, buttonTokens.buttonDanger, buttonTokens.buttonDangerHover, buttonTokens.buttonDangerActive, borderStyle);
       break;
     }
+    case "warning": {
+      colorStyle = getOutlinedColorStyle(buttonTokens.buttonWarning, buttonTokens.buttonWarning, buttonTokens.buttonWarningHover, buttonTokens.buttonWarningActive, borderStyle);
+      break;
+    }
+    case "positive": {
+      colorStyle = getOutlinedColorStyle(buttonTokens.buttonPositive, buttonTokens.buttonPositive, buttonTokens.buttonPositiveHover, buttonTokens.buttonPositiveActive, borderStyle);
+      break;
+    }
+    case "info": {
+      colorStyle = getOutlinedColorStyle(buttonTokens.buttonInfo, buttonTokens.buttonInfo, buttonTokens.buttonInfoHover, buttonTokens.buttonInfoActive, borderStyle);
+      break;
+    }
     case "remove": {
       colorStyle = getOutlinedColorStyle(buttonTokens.buttonDefaultBorder, buttonTokens.buttonDefaultText, buttonTokens.buttonDangerHover, buttonTokens.buttonDangerActive, borderStyle);
       break;
@@ -131,6 +155,18 @@ const getWrapperTextStyle = (theme, color, disabled) => {
       colorStyle = getTextColorStyle("none", buttonTokens.buttonTextDangerBgHover, buttonTokens.buttonTextDangerBgActive, buttonTokens.buttonDanger);
       break;
     }
+    case "warning": {
+      colorStyle = getTextColorStyle("none", buttonTokens.buttonTextWarningBgHover, buttonTokens.buttonTextWarningBgActive, buttonTokens.buttonWarning);
+      break;
+    }
+    case "positive": {
+      colorStyle = getTextColorStyle("none", buttonTokens.buttonTextPositiveBgHover, buttonTokens.buttonTextPositiveBgActive, buttonTokens.buttonPositive);
+      break;
+    }
+    case "info": {
+      colorStyle = getTextColorStyle("none", buttonTokens.buttonTextInfoBgHover, buttonTokens.buttonTextInfoBgActive, buttonTokens.buttonInfo);
+      break;
+    }
     case "remove": {
       colorStyle = getTextColorStyle("none", buttonTokens.buttonTextDefaultBgHover, buttonTokens.buttonTextDefaultBgActive, buttonTokens.buttonDefaultText, buttonTokens.buttonDanger);
       break;

package/dist/components/Button/Button.tokens.d.ts

@@ -6,6 +6,15 @@ export declare const getButtonTokens: (theme: Theme) => {
     buttonDanger: "#FF4D4F";
     buttonDangerHover: "#FF7875";
     buttonDangerActive: "#CF1322";
+    buttonWarning: "#FA8C16";
+    buttonWarningHover: "#FFA940";
+    buttonWarningActive: "#D46B08";
+    buttonPositive: "#52C41A";
+    buttonPositiveHover: "#73D13D";
+    buttonPositiveActive: "#389E0D";
+    buttonInfo: "#1677FF";
+    buttonInfoHover: "#4096FF";
+    buttonInfoActive: "#0958D9";
     buttonDefaultText: "#262626";
     buttonDefaultBorder: "#D9D9D9";
     buttonSolidText: "#FFFFFF";
@@ -19,6 +28,12 @@ export declare const getButtonTokens: (theme: Theme) => {
     buttonTextPrimaryBgActive: "#A3E6DD";
     buttonTextDangerBgHover: "#FFF1F0";
     buttonTextDangerBgActive: "#FFCCC7";
+    buttonTextWarningBgHover: "#FFF7E6";
+    buttonTextWarningBgActive: "#FFE7BA";
+    buttonTextPositiveBgHover: "#F6FFED";
+    buttonTextPositiveBgActive: "#D9F7BE";
+    buttonTextInfoBgHover: "#E6F4FF";
+    buttonTextInfoBgActive: "#BAE0FF";
     buttonDisabledText: "#8C8C8C";
     buttonDisabledBg: "#F0F0F0";
     buttonPaddingVertical: 4;

package/dist/components/Button/Button.tokens.js

@@ -5,6 +5,15 @@ const getButtonTokens = (theme) => ({
   buttonDanger: theme.dangerBase,
   buttonDangerHover: theme.dangerHover,
   buttonDangerActive: theme.dangerActive,
+  buttonWarning: theme.warningBase,
+  buttonWarningHover: theme.warningHover,
+  buttonWarningActive: theme.warningActive,
+  buttonPositive: theme.positiveBase,
+  buttonPositiveHover: theme.positiveHover,
+  buttonPositiveActive: theme.positiveActive,
+  buttonInfo: theme.infoBase,
+  buttonInfoHover: theme.infoHover,
+  buttonInfoActive: theme.infoActive,
   buttonDefaultText: theme.textPrimary,
   buttonDefaultBorder: theme.lineBorder,
   buttonSolidText: theme.textContrast,
@@ -18,6 +27,12 @@ const getButtonTokens = (theme) => ({
   buttonTextPrimaryBgActive: theme.primaryActiveInverse,
   buttonTextDangerBgHover: theme.dangerHoverInverse,
   buttonTextDangerBgActive: theme.dangerActiveInverse,
+  buttonTextWarningBgHover: theme.warningHoverInverse,
+  buttonTextWarningBgActive: theme.warningActiveInverse,
+  buttonTextPositiveBgHover: theme.positiveHoverInverse,
+  buttonTextPositiveBgActive: theme.positiveActiveInverse,
+  buttonTextInfoBgHover: theme.infoHoverInverse,
+  buttonTextInfoBgActive: theme.infoActiveInverse,
   buttonDisabledText: theme.textDisabled,
   buttonDisabledBg: theme.bgContainerDisabled,
   buttonPaddingVertical: theme.x1,

package/dist/components/Button/Button.types.d.ts

@@ -3,7 +3,7 @@ import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
 import { Theme } from '../../themes';
 import { TooltipProps } from '../Tooltip';
 export type ButtonVariant = "solid" | "outlined" | "dashed" | "text" | "link";
-export type ButtonColor = "default" | "primary" | "danger" | "remove";
+export type ButtonColor = "default" | "primary" | "danger" | "warning" | "positive" | "info" | "remove";
 export type ButtonIconPosition = "start" | "end";
 export type ButtonType = "default" | "primary" | "dashed" | "text" | "link";
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {

package/dist/components/Collapse/Collapse.d.ts

@@ -0,0 +1,2 @@
+import { CollapseProps } from './Collapse.types';
+export declare const Collapse: import('react').NamedExoticComponent<CollapseProps>;

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,49 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo, useMemo, useCallback } from "react";
+import { getCollapseTokens } from "./Collapse.tokens.js";
+import { getCollapseContainerStyle } from "./Collapse.styles.js";
+import { CollapsePanel } from "./components/CollapsePanel/CollapsePanel.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
+const normalizeKeys = (key) => {
+  if (key === void 0) return [];
+  return Array.isArray(key) ? key : [key];
+};
+const CollapseComponent = (props) => {
+  const {
+    items,
+    activeKey,
+    defaultActiveKey,
+    accordion = false,
+    bordered = true,
+    collapsible = "header",
+    expandIcon,
+    inline = false,
+    size = "middle",
+    onChange,
+    destroyOnHidden = false,
+    styles,
+    "test-id": testId
+  } = props;
+  const theme = useTheme();
+  const tokens = getCollapseTokens(theme);
+  const normalizedActiveKey = useMemo(() => activeKey !== void 0 ? normalizeKeys(activeKey) : void 0, [activeKey]);
+  const [activeKeys, setActiveKeys] = useControlledState(normalizeKeys(defaultActiveKey), normalizedActiveKey);
+  const handleToggle = useCallback((key) => {
+    if (collapsible === "disabled") return;
+    let newActiveKeys;
+    if (accordion) {
+      newActiveKeys = (activeKeys == null ? void 0 : activeKeys.includes(key)) ? [] : [key];
+    } else {
+      newActiveKeys = (activeKeys == null ? void 0 : activeKeys.includes(key)) ? activeKeys.filter((k) => k !== key) : [...activeKeys || [], key];
+    }
+    setActiveKeys(newActiveKeys);
+    onChange == null ? void 0 : onChange(newActiveKeys);
+  }, [activeKeys, accordion, collapsible, onChange, setActiveKeys]);
+  const effectiveInline = inline && !bordered;
+  return /* @__PURE__ */ jsx("div", { css: getCollapseContainerStyle(tokens, bordered, size)(theme), "test-id": testId, children: items.map((item, index) => /* @__PURE__ */ jsx(CollapsePanel, { item, isActive: (activeKeys == null ? void 0 : activeKeys.includes(item.key)) || false, isLast: index === items.length - 1, bordered, inline: effectiveInline, size, collapsible, expandIcon, destroyOnHidden, styles, onToggle: handleToggle }, item.key)) });
+};
+const Collapse = memo(CollapseComponent);
+export {
+  Collapse
+};

package/dist/components/Collapse/Collapse.styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../themes';
+import { CollapseTokens } from './Collapse.tokens';
+import { CollapseSize } from './Collapse.types';
+export declare const getCollapseContainerStyle: (tokens: CollapseTokens, bordered: boolean, size: CollapseSize) => (theme: Theme) => {
+    "& > *:first-child > *:first-child": {
+        borderTopLeftRadius: 4 | 8;
+        borderTopRightRadius: 4 | 8;
+    };
+    border?: string | undefined;
+    color: "#262626";
+    width: string;
+    borderRadius: 4 | 8;
+    fontFamily: "Roboto";
+    fontSize: 14;
+    lineHeight: "20px";
+};

package/dist/components/Collapse/Collapse.styles.js

@@ -0,0 +1,19 @@
+const getCollapseContainerStyle = (tokens, bordered, size) => (theme) => {
+  const radius = size === "small" ? theme.borderRadiusM : theme.borderRadiusL;
+  return {
+    ...theme.typography.body2,
+    color: tokens.collapseText,
+    width: "100%",
+    borderRadius: radius,
+    ...bordered ? {
+      border: `1px solid ${tokens.collapseBorder}`
+    } : {},
+    "& > *:first-child > *:first-child": {
+      borderTopLeftRadius: radius,
+      borderTopRightRadius: radius
+    }
+  };
+};
+export {
+  getCollapseContainerStyle
+};

package/dist/components/Collapse/Collapse.tokens.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../themes';
+export declare const getCollapseTokens: (theme: Theme) => {
+    readonly collapseText: "#262626";
+    readonly collapseBorder: "#D9D9D9";
+    readonly collapseBg: "#FFFFFF";
+    readonly collapseItemHeaderBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+};
+export type CollapseTokens = ReturnType<typeof getCollapseTokens>;

package/dist/components/Collapse/Collapse.tokens.js

@@ -0,0 +1,9 @@
+const getCollapseTokens = (theme) => ({
+  collapseText: theme.textPrimary,
+  collapseBorder: theme.lineBorder,
+  collapseBg: theme.bgContainer,
+  collapseItemHeaderBgHover: theme.bgContainerHover
+});
+export {
+  getCollapseTokens
+};

package/dist/components/Collapse/Collapse.types.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { Interpolation } from '@emotion/react';
+import { Theme } from '../../themes';
+import { CollapseTokens } from './Collapse.tokens';
+export type GetStyle = (collapseTokens: CollapseTokens, theme: Theme) => Interpolation;
+export type CollapseKey = string | number;
+export type CollapseSize = "small" | "middle";
+export type CollapseCollapsible = "header" | "icon" | "disabled";
+export interface CollapseExpandIconProps {
+    isActive: boolean;
+    panelKey: CollapseKey;
+}
+export interface CollapseItemType extends Pick<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    key: CollapseKey;
+    label: ReactNode;
+    children: ReactNode;
+    extra?: ReactNode;
+    showArrow?: boolean;
+    forceRender?: boolean;
+    styles?: {
+        header?: CSSProperties;
+        body?: CSSProperties;
+    };
+}
+export interface CollapseProps {
+    items: CollapseItemType[];
+    activeKey?: CollapseKey | CollapseKey[];
+    defaultActiveKey?: CollapseKey | CollapseKey[];
+    /** @default false */
+    accordion?: boolean;
+    /** @default true */
+    bordered?: boolean;
+    /** @default 'header' */
+    collapsible?: CollapseCollapsible;
+    expandIcon?: (props: CollapseExpandIconProps) => ReactNode;
+    /** @default false */
+    inline?: boolean;
+    /** @default 'middle' */
+    size?: CollapseSize;
+    onChange?: (key: CollapseKey[]) => void;
+    /** @default false */
+    destroyOnHidden?: boolean;
+    styles?: {
+        panelHeader?: GetStyle;
+        panelHeaderText?: GetStyle;
+        panelBody?: GetStyle;
+    };
+    "test-id"?: string;
+}

package/dist/components/Collapse/components/CollapsePanel/CollapsePanel.d.ts

@@ -0,0 +1,2 @@
+import { CollapsePanelProps } from './CollapsePanel.types';
+export declare const CollapsePanel: import('react').NamedExoticComponent<CollapsePanelProps>;

package/dist/components/Collapse/components/CollapsePanel/CollapsePanel.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useRef } from "react";
+import { CaretRightOutlined } from "@infomaximum/icons";
+import { getCollapseTokens } from "../../Collapse.tokens.js";
+import { getLastPanelEndStyle, getCollapsePanelHeaderStyle, getCollapsePanelIconStyle, collapsePanelLabelStyle, collapsePanelExtraStyle, getCollapsePanelBodyStyle } from "./CollapsePanel.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const isActivationKey = (key) => key === "Enter" || key === " ";
+const CollapsePanelComponent = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    item,
+    isActive,
+    isLast,
+    bordered,
+    inline,
+    size,
+    collapsible,
+    expandIcon,
+    destroyOnHidden,
+    styles,
+    onToggle
+  } = props;
+  const theme = useTheme();
+  const tokens = getCollapseTokens(theme);
+  const hasRenderedRef = useRef(item.forceRender ?? false);
+  if (isActive) hasRenderedRef.current = true;
+  const shouldRender = destroyOnHidden ? isActive : hasRenderedRef.current;
+  const lastPanelEndStyle = isLast ? getLastPanelEndStyle({
+    size,
+    bordered
+  })(theme) : void 0;
+  const handleHeaderClick = () => {
+    if (collapsible === "header") {
+      onToggle(item.key);
+    }
+  };
+  const handleHeaderKeyDown = (e) => {
+    if (collapsible === "header" && isActivationKey(e.key)) {
+      e.preventDefault();
+      onToggle(item.key);
+    }
+  };
+  const handleIconClick = (e) => {
+    if (collapsible === "icon") {
+      e.stopPropagation();
+      onToggle(item.key);
+    }
+  };
+  const handleIconKeyDown = (e) => {
+    if (collapsible === "icon" && isActivationKey(e.key)) {
+      e.preventDefault();
+      e.stopPropagation();
+      onToggle(item.key);
+    }
+  };
+  const iconNode = expandIcon ? expandIcon({
+    isActive,
+    panelKey: item.key
+  }) : /* @__PURE__ */ jsx(CaretRightOutlined, {});
+  const showArrow = item.showArrow !== false;
+  return /* @__PURE__ */ jsxs("div", { onClick: item.onClick, children: [
+    /* @__PURE__ */ jsxs("div", { css: [getCollapsePanelHeaderStyle({
+      tokens,
+      size,
+      bordered,
+      inline,
+      collapsible
+    })(theme), (_a = styles == null ? void 0 : styles.panelHeader) == null ? void 0 : _a.call(styles, tokens, theme), !isActive && lastPanelEndStyle, process.env.NODE_ENV === "production" ? "" : ";label:CollapsePanelComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQ29sbGFwc2UvY29tcG9uZW50cy9Db2xsYXBzZVBhbmVsL0NvbGxhcHNlUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStFUSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL2NvbXBvbmVudHMvQ29sbGFwc2VQYW5lbC9Db2xsYXBzZVBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZVJlZiwgdHlwZSBGQywgdHlwZSBLZXlib2FyZEV2ZW50LCB0eXBlIE1vdXNlRXZlbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENhcmV0UmlnaHRPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcIi4uLy4uLy4uLy4uL2hvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRDb2xsYXBzZVRva2VucyB9IGZyb20gXCIuLi8uLi9Db2xsYXBzZS50b2tlbnNcIjtcbmltcG9ydCB0eXBlIHsgQ29sbGFwc2VQYW5lbFByb3BzIH0gZnJvbSBcIi4vQ29sbGFwc2VQYW5lbC50eXBlc1wiO1xuaW1wb3J0IHtcbiAgZ2V0TGFzdFBhbmVsRW5kU3R5bGUsXG4gIGdldENvbGxhcHNlUGFuZWxCb2R5U3R5bGUsXG4gIGdldENvbGxhcHNlUGFuZWxIZWFkZXJTdHlsZSxcbiAgZ2V0Q29sbGFwc2VQYW5lbEljb25TdHlsZSxcbiAgY29sbGFwc2VQYW5lbEV4dHJhU3R5bGUsXG4gIGNvbGxhcHNlUGFuZWxMYWJlbFN0eWxlLFxufSBmcm9tIFwiLi9Db2xsYXBzZVBhbmVsLnN0eWxlc1wiO1xuXG5jb25zdCBpc0FjdGl2YXRpb25LZXkgPSAoa2V5OiBzdHJpbmcpID0+IGtleSA9PT0gXCJFbnRlclwiIHx8IGtleSA9PT0gXCIgXCI7XG5cbmNvbnN0IENvbGxhcHNlUGFuZWxDb21wb25lbnQ6IEZDPENvbGxhcHNlUGFuZWxQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3Qge1xuICAgIGl0ZW0sXG4gICAgaXNBY3RpdmUsXG4gICAgaXNMYXN0LFxuICAgIGJvcmRlcmVkLFxuICAgIGlubGluZSxcbiAgICBzaXplLFxuICAgIGNvbGxhcHNpYmxlLFxuICAgIGV4cGFuZEljb24sXG4gICAgZGVzdHJveU9uSGlkZGVuLFxuICAgIHN0eWxlcyxcbiAgICBvblRvZ2dsZSxcbiAgfSA9IHByb3BzO1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IHRva2VucyA9IGdldENvbGxhcHNlVG9rZW5zKHRoZW1lKTtcblxuICBjb25zdCBoYXNSZW5kZXJlZFJlZiA9IHVzZVJlZihpdGVtLmZvcmNlUmVuZGVyID8/IGZhbHNlKTtcbiAgaWYgKGlzQWN0aXZlKSBoYXNSZW5kZXJlZFJlZi5jdXJyZW50ID0gdHJ1ZTtcblxuICBjb25zdCBzaG91bGRSZW5kZXIgPSBkZXN0cm95T25IaWRkZW4gPyBpc0FjdGl2ZSA6IGhhc1JlbmRlcmVkUmVmLmN1cnJlbnQ7XG5cbiAgY29uc3QgbGFzdFBhbmVsRW5kU3R5bGUgPSBpc0xhc3QgPyBnZXRMYXN0UGFuZWxFbmRTdHlsZSh7IHNpemUsIGJvcmRlcmVkIH0pKHRoZW1lKSA6IHVuZGVmaW5lZDtcblxuICBjb25zdCBoYW5kbGVIZWFkZXJDbGljayA9ICgpID0+IHtcbiAgICBpZiAoY29sbGFwc2libGUgPT09IFwiaGVhZGVyXCIpIHtcbiAgICAgIG9uVG9nZ2xlKGl0ZW0ua2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlSGVhZGVyS2V5RG93biA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChjb2xsYXBzaWJsZSA9PT0gXCJoZWFkZXJcIiAmJiBpc0FjdGl2YXRpb25LZXkoZS5rZXkpKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBvblRvZ2dsZShpdGVtLmtleSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUljb25DbGljayA9IChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKGNvbGxhcHNpYmxlID09PSBcImljb25cIikge1xuICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgIG9uVG9nZ2xlKGl0ZW0ua2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlSWNvbktleURvd24gPSAoZTogS2V5Ym9hcmRFdmVudDxIVE1MU3BhbkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGNvbGxhcHNpYmxlID09PSBcImljb25cIiAmJiBpc0FjdGl2YXRpb25LZXkoZS5rZXkpKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgb25Ub2dnbGUoaXRlbS5rZXkpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBpY29uTm9kZSA9IGV4cGFuZEljb24gPyAoXG4gICAgZXhwYW5kSWNvbih7IGlzQWN0aXZlLCBwYW5lbEtleTogaXRlbS5rZXkgfSlcbiAgKSA6IChcbiAgICA8Q2FyZXRSaWdodE91dGxpbmVkIC8+XG4gICk7XG5cbiAgY29uc3Qgc2hvd0Fycm93ID0gaXRlbS5zaG93QXJyb3cgIT09IGZhbHNlO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBvbkNsaWNrPXtpdGVtLm9uQ2xpY2t9PlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tcbiAgICAgICAgICBnZXRDb2xsYXBzZVBhbmVsSGVhZGVyU3R5bGUoeyB0b2tlbnMsIHNpemUsIGJvcmRlcmVkLCBpbmxpbmUsIGNvbGxhcHNpYmxlIH0pKHRoZW1lKSxcbiAgICAgICAgICBzdHlsZXM/LnBhbmVsSGVhZGVyPy4odG9rZW5zLCB0aGVtZSksXG4gICAgICAgICAgIWlzQWN0aXZlICYmIGxhc3RQYW5lbEVuZFN0eWxlLFxuICAgICAgICBdfVxuICAgICAgICBzdHlsZT17aXRlbS5zdHlsZXM/LmhlYWRlcn1cbiAgICAgICAgcm9sZT17Y29sbGFwc2libGUgIT09IFwiZGlzYWJsZWRcIiA/IFwiYnV0dG9uXCIgOiB1bmRlZmluZWR9XG4gICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzQWN0aXZlfVxuICAgICAgICBhcmlhLWRpc2FibGVkPXtjb2xsYXBzaWJsZSA9PT0gXCJkaXNhYmxlZFwiIHx8IHVuZGVmaW5lZH1cbiAgICAgICAgdGFiSW5kZXg9e2NvbGxhcHNpYmxlID09PSBcImhlYWRlclwiID8gMCA6IHVuZGVmaW5lZH1cbiAgICAgICAgb25DbGljaz17aGFuZGxlSGVhZGVyQ2xpY2t9XG4gICAgICAgIG9uS2V5RG93bj17aGFuZGxlSGVhZGVyS2V5RG93bn1cbiAgICAgICAgdGVzdC1pZD17YGNvbGxhcHNlLXBhbmVsLWhlYWRlci0ke2l0ZW0ua2V5fWB9XG4gICAgICA+XG4gICAgICAgIHtzaG93QXJyb3cgJiYgKFxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICBjc3M9e2dldENvbGxhcHNlUGFuZWxJY29uU3R5bGUoaXNBY3RpdmUsIGNvbGxhcHNpYmxlKSh0aGVtZSl9XG4gICAgICAgICAgICByb2xlPXtjb2xsYXBzaWJsZSA9PT0gXCJpY29uXCIgPyBcImJ1dHRvblwiIDogdW5kZWZpbmVkfVxuICAgICAgICAgICAgdGFiSW5kZXg9e2NvbGxhcHNpYmxlID09PSBcImljb25cIiA/IDAgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVJY29uQ2xpY2t9XG4gICAgICAgICAgICBvbktleURvd249e2hhbmRsZUljb25LZXlEb3dufVxuICAgICAgICAgICAgdGVzdC1pZD17YGNvbGxhcHNlLXBhbmVsLWljb24tJHtpdGVtLmtleX1gfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtpY29uTm9kZX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY3NzPXtbY29sbGFwc2VQYW5lbExhYmVsU3R5bGUsIHN0eWxlcz8ucGFuZWxIZWFkZXJUZXh0Py4odG9rZW5zLCB0aGVtZSldfVxuICAgICAgICAgIHRlc3QtaWQ9e2Bjb2xsYXBzZS1wYW5lbC1oZWFkZXItdGV4dC0ke2l0ZW0ua2V5fWB9XG4gICAgICAgID5cbiAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICB7aXRlbS5leHRyYSAhPT0gdW5kZWZpbmVkICYmIDxzcGFuIGNzcz17Y29sbGFwc2VQYW5lbEV4dHJhU3R5bGUodGhlbWUpfT57aXRlbS5leHRyYX08L3NwYW4+fVxuICAgICAgPC9kaXY+XG4gICAgICB7c2hvdWxkUmVuZGVyICYmIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0Q29sbGFwc2VQYW5lbEJvZHlTdHlsZSh7IHRva2Vucywgc2l6ZSwgYm9yZGVyZWQsIGlubGluZSB9KSh0aGVtZSksXG4gICAgICAgICAgICBzdHlsZXM/LnBhbmVsQm9keT8uKHRva2VucywgdGhlbWUpLFxuICAgICAgICAgICAgaXNBY3RpdmUgJiYgbGFzdFBhbmVsRW5kU3R5bGUsXG4gICAgICAgICAgICAhaXNBY3RpdmUgJiYgeyBkaXNwbGF5OiBcIm5vbmVcIiB9LFxuICAgICAgICAgIF19XG4gICAgICAgICAgc3R5bGU9e2l0ZW0uc3R5bGVzPy5ib2R5fVxuICAgICAgICAgIHRlc3QtaWQ9e2Bjb2xsYXBzZS1wYW5lbC1ib2R5LSR7aXRlbS5rZXl9YH1cbiAgICAgICAgPlxuICAgICAgICAgIHtpdGVtLmNoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgQ29sbGFwc2VQYW5lbCA9IG1lbW8oQ29sbGFwc2VQYW5lbENvbXBvbmVudCk7XG4iXX0= */"], style: (_b = item.styles) == null ? void 0 : _b.header, role: collapsible !== "disabled" ? "button" : void 0, "aria-expanded": isActive, "aria-disabled": collapsible === "disabled" || void 0, tabIndex: collapsible === "header" ? 0 : void 0, onClick: handleHeaderClick, onKeyDown: handleHeaderKeyDown, "test-id": `collapse-panel-header-${item.key}`, children: [
+      showArrow && /* @__PURE__ */ jsx("span", { css: getCollapsePanelIconStyle(isActive, collapsible)(theme), role: collapsible === "icon" ? "button" : void 0, tabIndex: collapsible === "icon" ? 0 : void 0, onClick: handleIconClick, onKeyDown: handleIconKeyDown, "test-id": `collapse-panel-icon-${item.key}`, children: iconNode }),
+      /* @__PURE__ */ jsx("span", { css: [collapsePanelLabelStyle, (_c = styles == null ? void 0 : styles.panelHeaderText) == null ? void 0 : _c.call(styles, tokens, theme), process.env.NODE_ENV === "production" ? "" : ";label:CollapsePanelComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQ29sbGFwc2UvY29tcG9uZW50cy9Db2xsYXBzZVBhbmVsL0NvbGxhcHNlUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBHVSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL2NvbXBvbmVudHMvQ29sbGFwc2VQYW5lbC9Db2xsYXBzZVBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZVJlZiwgdHlwZSBGQywgdHlwZSBLZXlib2FyZEV2ZW50LCB0eXBlIE1vdXNlRXZlbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENhcmV0UmlnaHRPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcIi4uLy4uLy4uLy4uL2hvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRDb2xsYXBzZVRva2VucyB9IGZyb20gXCIuLi8uLi9Db2xsYXBzZS50b2tlbnNcIjtcbmltcG9ydCB0eXBlIHsgQ29sbGFwc2VQYW5lbFByb3BzIH0gZnJvbSBcIi4vQ29sbGFwc2VQYW5lbC50eXBlc1wiO1xuaW1wb3J0IHtcbiAgZ2V0TGFzdFBhbmVsRW5kU3R5bGUsXG4gIGdldENvbGxhcHNlUGFuZWxCb2R5U3R5bGUsXG4gIGdldENvbGxhcHNlUGFuZWxIZWFkZXJTdHlsZSxcbiAgZ2V0Q29sbGFwc2VQYW5lbEljb25TdHlsZSxcbiAgY29sbGFwc2VQYW5lbEV4dHJhU3R5bGUsXG4gIGNvbGxhcHNlUGFuZWxMYWJlbFN0eWxlLFxufSBmcm9tIFwiLi9Db2xsYXBzZVBhbmVsLnN0eWxlc1wiO1xuXG5jb25zdCBpc0FjdGl2YXRpb25LZXkgPSAoa2V5OiBzdHJpbmcpID0+IGtleSA9PT0gXCJFbnRlclwiIHx8IGtleSA9PT0gXCIgXCI7XG5cbmNvbnN0IENvbGxhcHNlUGFuZWxDb21wb25lbnQ6IEZDPENvbGxhcHNlUGFuZWxQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3Qge1xuICAgIGl0ZW0sXG4gICAgaXNBY3RpdmUsXG4gICAgaXNMYXN0LFxuICAgIGJvcmRlcmVkLFxuICAgIGlubGluZSxcbiAgICBzaXplLFxuICAgIGNvbGxhcHNpYmxlLFxuICAgIGV4cGFuZEljb24sXG4gICAgZGVzdHJveU9uSGlkZGVuLFxuICAgIHN0eWxlcyxcbiAgICBvblRvZ2dsZSxcbiAgfSA9IHByb3BzO1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IHRva2VucyA9IGdldENvbGxhcHNlVG9rZW5zKHRoZW1lKTtcblxuICBjb25zdCBoYXNSZW5kZXJlZFJlZiA9IHVzZVJlZihpdGVtLmZvcmNlUmVuZGVyID8/IGZhbHNlKTtcbiAgaWYgKGlzQWN0aXZlKSBoYXNSZW5kZXJlZFJlZi5jdXJyZW50ID0gdHJ1ZTtcblxuICBjb25zdCBzaG91bGRSZW5kZXIgPSBkZXN0cm95T25IaWRkZW4gPyBpc0FjdGl2ZSA6IGhhc1JlbmRlcmVkUmVmLmN1cnJlbnQ7XG5cbiAgY29uc3QgbGFzdFBhbmVsRW5kU3R5bGUgPSBpc0xhc3QgPyBnZXRMYXN0UGFuZWxFbmRTdHlsZSh7IHNpemUsIGJvcmRlcmVkIH0pKHRoZW1lKSA6IHVuZGVmaW5lZDtcblxuICBjb25zdCBoYW5kbGVIZWFkZXJDbGljayA9ICgpID0+IHtcbiAgICBpZiAoY29sbGFwc2libGUgPT09IFwiaGVhZGVyXCIpIHtcbiAgICAgIG9uVG9nZ2xlKGl0ZW0ua2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlSGVhZGVyS2V5RG93biA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChjb2xsYXBzaWJsZSA9PT0gXCJoZWFkZXJcIiAmJiBpc0FjdGl2YXRpb25LZXkoZS5rZXkpKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBvblRvZ2dsZShpdGVtLmtleSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUljb25DbGljayA9IChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKGNvbGxhcHNpYmxlID09PSBcImljb25cIikge1xuICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgIG9uVG9nZ2xlKGl0ZW0ua2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlSWNvbktleURvd24gPSAoZTogS2V5Ym9hcmRFdmVudDxIVE1MU3BhbkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGNvbGxhcHNpYmxlID09PSBcImljb25cIiAmJiBpc0FjdGl2YXRpb25LZXkoZS5rZXkpKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgb25Ub2dnbGUoaXRlbS5rZXkpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBpY29uTm9kZSA9IGV4cGFuZEljb24gPyAoXG4gICAgZXhwYW5kSWNvbih7IGlzQWN0aXZlLCBwYW5lbEtleTogaXRlbS5rZXkgfSlcbiAgKSA6IChcbiAgICA8Q2FyZXRSaWdodE91dGxpbmVkIC8+XG4gICk7XG5cbiAgY29uc3Qgc2hvd0Fycm93ID0gaXRlbS5zaG93QXJyb3cgIT09IGZhbHNlO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBvbkNsaWNrPXtpdGVtLm9uQ2xpY2t9PlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tcbiAgICAgICAgICBnZXRDb2xsYXBzZVBhbmVsSGVhZGVyU3R5bGUoeyB0b2tlbnMsIHNpemUsIGJvcmRlcmVkLCBpbmxpbmUsIGNvbGxhcHNpYmxlIH0pKHRoZW1lKSxcbiAgICAgICAgICBzdHlsZXM/LnBhbmVsSGVhZGVyPy4odG9rZW5zLCB0aGVtZSksXG4gICAgICAgICAgIWlzQWN0aXZlICYmIGxhc3RQYW5lbEVuZFN0eWxlLFxuICAgICAgICBdfVxuICAgICAgICBzdHlsZT17aXRlbS5zdHlsZXM/LmhlYWRlcn1cbiAgICAgICAgcm9sZT17Y29sbGFwc2libGUgIT09IFwiZGlzYWJsZWRcIiA/IFwiYnV0dG9uXCIgOiB1bmRlZmluZWR9XG4gICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzQWN0aXZlfVxuICAgICAgICBhcmlhLWRpc2FibGVkPXtjb2xsYXBzaWJsZSA9PT0gXCJkaXNhYmxlZFwiIHx8IHVuZGVmaW5lZH1cbiAgICAgICAgdGFiSW5kZXg9e2NvbGxhcHNpYmxlID09PSBcImhlYWRlclwiID8gMCA6IHVuZGVmaW5lZH1cbiAgICAgICAgb25DbGljaz17aGFuZGxlSGVhZGVyQ2xpY2t9XG4gICAgICAgIG9uS2V5RG93bj17aGFuZGxlSGVhZGVyS2V5RG93bn1cbiAgICAgICAgdGVzdC1pZD17YGNvbGxhcHNlLXBhbmVsLWhlYWRlci0ke2l0ZW0ua2V5fWB9XG4gICAgICA+XG4gICAgICAgIHtzaG93QXJyb3cgJiYgKFxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICBjc3M9e2dldENvbGxhcHNlUGFuZWxJY29uU3R5bGUoaXNBY3RpdmUsIGNvbGxhcHNpYmxlKSh0aGVtZSl9XG4gICAgICAgICAgICByb2xlPXtjb2xsYXBzaWJsZSA9PT0gXCJpY29uXCIgPyBcImJ1dHRvblwiIDogdW5kZWZpbmVkfVxuICAgICAgICAgICAgdGFiSW5kZXg9e2NvbGxhcHNpYmxlID09PSBcImljb25cIiA/IDAgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVJY29uQ2xpY2t9XG4gICAgICAgICAgICBvbktleURvd249e2hhbmRsZUljb25LZXlEb3dufVxuICAgICAgICAgICAgdGVzdC1pZD17YGNvbGxhcHNlLXBhbmVsLWljb24tJHtpdGVtLmtleX1gfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtpY29uTm9kZX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY3NzPXtbY29sbGFwc2VQYW5lbExhYmVsU3R5bGUsIHN0eWxlcz8ucGFuZWxIZWFkZXJUZXh0Py4odG9rZW5zLCB0aGVtZSldfVxuICAgICAgICAgIHRlc3QtaWQ9e2Bjb2xsYXBzZS1wYW5lbC1oZWFkZXItdGV4dC0ke2l0ZW0ua2V5fWB9XG4gICAgICAgID5cbiAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICB7aXRlbS5leHRyYSAhPT0gdW5kZWZpbmVkICYmIDxzcGFuIGNzcz17Y29sbGFwc2VQYW5lbEV4dHJhU3R5bGUodGhlbWUpfT57aXRlbS5leHRyYX08L3NwYW4+fVxuICAgICAgPC9kaXY+XG4gICAgICB7c2hvdWxkUmVuZGVyICYmIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0Q29sbGFwc2VQYW5lbEJvZHlTdHlsZSh7IHRva2Vucywgc2l6ZSwgYm9yZGVyZWQsIGlubGluZSB9KSh0aGVtZSksXG4gICAgICAgICAgICBzdHlsZXM/LnBhbmVsQm9keT8uKHRva2VucywgdGhlbWUpLFxuICAgICAgICAgICAgaXNBY3RpdmUgJiYgbGFzdFBhbmVsRW5kU3R5bGUsXG4gICAgICAgICAgICAhaXNBY3RpdmUgJiYgeyBkaXNwbGF5OiBcIm5vbmVcIiB9LFxuICAgICAgICAgIF19XG4gICAgICAgICAgc3R5bGU9e2l0ZW0uc3R5bGVzPy5ib2R5fVxuICAgICAgICAgIHRlc3QtaWQ9e2Bjb2xsYXBzZS1wYW5lbC1ib2R5LSR7aXRlbS5rZXl9YH1cbiAgICAgICAgPlxuICAgICAgICAgIHtpdGVtLmNoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgQ29sbGFwc2VQYW5lbCA9IG1lbW8oQ29sbGFwc2VQYW5lbENvbXBvbmVudCk7XG4iXX0= */"], "test-id": `collapse-panel-header-text-${item.key}`, children: item.label }),
+      item.extra !== void 0 && /* @__PURE__ */ jsx("span", { css: collapsePanelExtraStyle(theme), children: item.extra })
+    ] }),
+    shouldRender && /* @__PURE__ */ jsx("div", { css: [getCollapsePanelBodyStyle({
+      tokens,
+      size,
+      bordered,
+      inline
+    })(theme), (_d = styles == null ? void 0 : styles.panelBody) == null ? void 0 : _d.call(styles, tokens, theme), isActive && lastPanelEndStyle, !isActive && {
+      display: "none"
+    }, process.env.NODE_ENV === "production" ? "" : ";label:CollapsePanelComponent;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQ29sbGFwc2UvY29tcG9uZW50cy9Db2xsYXBzZVBhbmVsL0NvbGxhcHNlUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1IVSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL2NvbXBvbmVudHMvQ29sbGFwc2VQYW5lbC9Db2xsYXBzZVBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZVJlZiwgdHlwZSBGQywgdHlwZSBLZXlib2FyZEV2ZW50LCB0eXBlIE1vdXNlRXZlbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENhcmV0UmlnaHRPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcIi4uLy4uLy4uLy4uL2hvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBnZXRDb2xsYXBzZVRva2VucyB9IGZyb20gXCIuLi8uLi9Db2xsYXBzZS50b2tlbnNcIjtcbmltcG9ydCB0eXBlIHsgQ29sbGFwc2VQYW5lbFByb3BzIH0gZnJvbSBcIi4vQ29sbGFwc2VQYW5lbC50eXBlc1wiO1xuaW1wb3J0IHtcbiAgZ2V0TGFzdFBhbmVsRW5kU3R5bGUsXG4gIGdldENvbGxhcHNlUGFuZWxCb2R5U3R5bGUsXG4gIGdldENvbGxhcHNlUGFuZWxIZWFkZXJTdHlsZSxcbiAgZ2V0Q29sbGFwc2VQYW5lbEljb25TdHlsZSxcbiAgY29sbGFwc2VQYW5lbEV4dHJhU3R5bGUsXG4gIGNvbGxhcHNlUGFuZWxMYWJlbFN0eWxlLFxufSBmcm9tIFwiLi9Db2xsYXBzZVBhbmVsLnN0eWxlc1wiO1xuXG5jb25zdCBpc0FjdGl2YXRpb25LZXkgPSAoa2V5OiBzdHJpbmcpID0+IGtleSA9PT0gXCJFbnRlclwiIHx8IGtleSA9PT0gXCIgXCI7XG5cbmNvbnN0IENvbGxhcHNlUGFuZWxDb21wb25lbnQ6IEZDPENvbGxhcHNlUGFuZWxQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3Qge1xuICAgIGl0ZW0sXG4gICAgaXNBY3RpdmUsXG4gICAgaXNMYXN0LFxuICAgIGJvcmRlcmVkLFxuICAgIGlubGluZSxcbiAgICBzaXplLFxuICAgIGNvbGxhcHNpYmxlLFxuICAgIGV4cGFuZEljb24sXG4gICAgZGVzdHJveU9uSGlkZGVuLFxuICAgIHN0eWxlcyxcbiAgICBvblRvZ2dsZSxcbiAgfSA9IHByb3BzO1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IHRva2VucyA9IGdldENvbGxhcHNlVG9rZW5zKHRoZW1lKTtcblxuICBjb25zdCBoYXNSZW5kZXJlZFJlZiA9IHVzZVJlZihpdGVtLmZvcmNlUmVuZGVyID8/IGZhbHNlKTtcbiAgaWYgKGlzQWN0aXZlKSBoYXNSZW5kZXJlZFJlZi5jdXJyZW50ID0gdHJ1ZTtcblxuICBjb25zdCBzaG91bGRSZW5kZXIgPSBkZXN0cm95T25IaWRkZW4gPyBpc0FjdGl2ZSA6IGhhc1JlbmRlcmVkUmVmLmN1cnJlbnQ7XG5cbiAgY29uc3QgbGFzdFBhbmVsRW5kU3R5bGUgPSBpc0xhc3QgPyBnZXRMYXN0UGFuZWxFbmRTdHlsZSh7IHNpemUsIGJvcmRlcmVkIH0pKHRoZW1lKSA6IHVuZGVmaW5lZDtcblxuICBjb25zdCBoYW5kbGVIZWFkZXJDbGljayA9ICgpID0+IHtcbiAgICBpZiAoY29sbGFwc2libGUgPT09IFwiaGVhZGVyXCIpIHtcbiAgICAgIG9uVG9nZ2xlKGl0ZW0ua2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlSGVhZGVyS2V5RG93biA9IChlOiBLZXlib2FyZEV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGlmIChjb2xsYXBzaWJsZSA9PT0gXCJoZWFkZXJcIiAmJiBpc0FjdGl2YXRpb25LZXkoZS5rZXkpKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBvblRvZ2dsZShpdGVtLmtleSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUljb25DbGljayA9IChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKGNvbGxhcHNpYmxlID09PSBcImljb25cIikge1xuICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgIG9uVG9nZ2xlKGl0ZW0ua2V5KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlSWNvbktleURvd24gPSAoZTogS2V5Ym9hcmRFdmVudDxIVE1MU3BhbkVsZW1lbnQ+KSA9PiB7XG4gICAgaWYgKGNvbGxhcHNpYmxlID09PSBcImljb25cIiAmJiBpc0FjdGl2YXRpb25LZXkoZS5rZXkpKSB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgb25Ub2dnbGUoaXRlbS5rZXkpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBpY29uTm9kZSA9IGV4cGFuZEljb24gPyAoXG4gICAgZXhwYW5kSWNvbih7IGlzQWN0aXZlLCBwYW5lbEtleTogaXRlbS5rZXkgfSlcbiAgKSA6IChcbiAgICA8Q2FyZXRSaWdodE91dGxpbmVkIC8+XG4gICk7XG5cbiAgY29uc3Qgc2hvd0Fycm93ID0gaXRlbS5zaG93QXJyb3cgIT09IGZhbHNlO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBvbkNsaWNrPXtpdGVtLm9uQ2xpY2t9PlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tcbiAgICAgICAgICBnZXRDb2xsYXBzZVBhbmVsSGVhZGVyU3R5bGUoeyB0b2tlbnMsIHNpemUsIGJvcmRlcmVkLCBpbmxpbmUsIGNvbGxhcHNpYmxlIH0pKHRoZW1lKSxcbiAgICAgICAgICBzdHlsZXM/LnBhbmVsSGVhZGVyPy4odG9rZW5zLCB0aGVtZSksXG4gICAgICAgICAgIWlzQWN0aXZlICYmIGxhc3RQYW5lbEVuZFN0eWxlLFxuICAgICAgICBdfVxuICAgICAgICBzdHlsZT17aXRlbS5zdHlsZXM/LmhlYWRlcn1cbiAgICAgICAgcm9sZT17Y29sbGFwc2libGUgIT09IFwiZGlzYWJsZWRcIiA/IFwiYnV0dG9uXCIgOiB1bmRlZmluZWR9XG4gICAgICAgIGFyaWEtZXhwYW5kZWQ9e2lzQWN0aXZlfVxuICAgICAgICBhcmlhLWRpc2FibGVkPXtjb2xsYXBzaWJsZSA9PT0gXCJkaXNhYmxlZFwiIHx8IHVuZGVmaW5lZH1cbiAgICAgICAgdGFiSW5kZXg9e2NvbGxhcHNpYmxlID09PSBcImhlYWRlclwiID8gMCA6IHVuZGVmaW5lZH1cbiAgICAgICAgb25DbGljaz17aGFuZGxlSGVhZGVyQ2xpY2t9XG4gICAgICAgIG9uS2V5RG93bj17aGFuZGxlSGVhZGVyS2V5RG93bn1cbiAgICAgICAgdGVzdC1pZD17YGNvbGxhcHNlLXBhbmVsLWhlYWRlci0ke2l0ZW0ua2V5fWB9XG4gICAgICA+XG4gICAgICAgIHtzaG93QXJyb3cgJiYgKFxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICBjc3M9e2dldENvbGxhcHNlUGFuZWxJY29uU3R5bGUoaXNBY3RpdmUsIGNvbGxhcHNpYmxlKSh0aGVtZSl9XG4gICAgICAgICAgICByb2xlPXtjb2xsYXBzaWJsZSA9PT0gXCJpY29uXCIgPyBcImJ1dHRvblwiIDogdW5kZWZpbmVkfVxuICAgICAgICAgICAgdGFiSW5kZXg9e2NvbGxhcHNpYmxlID09PSBcImljb25cIiA/IDAgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVJY29uQ2xpY2t9XG4gICAgICAgICAgICBvbktleURvd249e2hhbmRsZUljb25LZXlEb3dufVxuICAgICAgICAgICAgdGVzdC1pZD17YGNvbGxhcHNlLXBhbmVsLWljb24tJHtpdGVtLmtleX1gfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtpY29uTm9kZX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY3NzPXtbY29sbGFwc2VQYW5lbExhYmVsU3R5bGUsIHN0eWxlcz8ucGFuZWxIZWFkZXJUZXh0Py4odG9rZW5zLCB0aGVtZSldfVxuICAgICAgICAgIHRlc3QtaWQ9e2Bjb2xsYXBzZS1wYW5lbC1oZWFkZXItdGV4dC0ke2l0ZW0ua2V5fWB9XG4gICAgICAgID5cbiAgICAgICAgICB7aXRlbS5sYWJlbH1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICB7aXRlbS5leHRyYSAhPT0gdW5kZWZpbmVkICYmIDxzcGFuIGNzcz17Y29sbGFwc2VQYW5lbEV4dHJhU3R5bGUodGhlbWUpfT57aXRlbS5leHRyYX08L3NwYW4+fVxuICAgICAgPC9kaXY+XG4gICAgICB7c2hvdWxkUmVuZGVyICYmIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNzcz17W1xuICAgICAgICAgICAgZ2V0Q29sbGFwc2VQYW5lbEJvZHlTdHlsZSh7IHRva2Vucywgc2l6ZSwgYm9yZGVyZWQsIGlubGluZSB9KSh0aGVtZSksXG4gICAgICAgICAgICBzdHlsZXM/LnBhbmVsQm9keT8uKHRva2VucywgdGhlbWUpLFxuICAgICAgICAgICAgaXNBY3RpdmUgJiYgbGFzdFBhbmVsRW5kU3R5bGUsXG4gICAgICAgICAgICAhaXNBY3RpdmUgJiYgeyBkaXNwbGF5OiBcIm5vbmVcIiB9LFxuICAgICAgICAgIF19XG4gICAgICAgICAgc3R5bGU9e2l0ZW0uc3R5bGVzPy5ib2R5fVxuICAgICAgICAgIHRlc3QtaWQ9e2Bjb2xsYXBzZS1wYW5lbC1ib2R5LSR7aXRlbS5rZXl9YH1cbiAgICAgICAgPlxuICAgICAgICAgIHtpdGVtLmNoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgQ29sbGFwc2VQYW5lbCA9IG1lbW8oQ29sbGFwc2VQYW5lbENvbXBvbmVudCk7XG4iXX0= */"], style: (_e = item.styles) == null ? void 0 : _e.body, "test-id": `collapse-panel-body-${item.key}`, children: item.children })
+  ] });
+};
+const CollapsePanel = memo(CollapsePanelComponent);
+export {
+  CollapsePanel
+};

package/dist/components/Collapse/components/CollapsePanel/CollapsePanel.styles.d.ts

@@ -0,0 +1,87 @@
+import { Theme } from '../../../../themes';
+import { CollapseTokens } from '../../Collapse.tokens';
+import { CollapseCollapsible, CollapseSize } from '../../Collapse.types';
+export declare const getLastPanelEndStyle: ({ size, bordered }: {
+    size: CollapseSize;
+    bordered: boolean;
+}) => (theme: Theme) => {
+    borderBottom?: string | undefined;
+    paddingBlockEnd?: 4 | 8 | undefined;
+    borderBottomLeftRadius: 4 | 8;
+    borderBottomRightRadius: 4 | 8;
+};
+export declare const getCollapsePanelHeaderStyle: ({ tokens, size, bordered, inline, collapsible, }: {
+    tokens: CollapseTokens;
+    size: CollapseSize;
+    bordered: boolean;
+    inline: boolean;
+    collapsible: CollapseCollapsible;
+}) => (theme: Theme) => {
+    ":hover"?: {
+        backgroundColor: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    } | undefined;
+    gap: 8 | 12;
+    backgroundColor: "#FFFFFF";
+    cursor: string;
+    userSelect: "none";
+    borderBottom?: string | undefined;
+    paddingBlockStart: 4 | 8;
+    paddingBlockEnd: number;
+    paddingInline: number;
+    fontFamily: "Roboto";
+    fontSize: 14;
+    lineHeight: "20px";
+    display: string;
+    alignItems: string;
+} | {
+    ":hover"?: {
+        backgroundColor: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    } | undefined;
+    gap: 8 | 12;
+    backgroundColor: "#FFFFFF";
+    cursor: string;
+    userSelect: "none";
+    borderBottom?: string | undefined;
+    paddingBlockStart: 4 | 8;
+    paddingBlockEnd: number;
+    paddingInline: number;
+    fontFamily: "Roboto";
+    fontSize: 12;
+    lineHeight: "20px";
+    display: string;
+    alignItems: string;
+};
+export declare const collapsePanelLabelStyle: {
+    flex: number;
+    minWidth: number;
+    overflow: "hidden";
+    textOverflow: "ellipsis";
+    whiteSpace: "nowrap";
+};
+export declare const collapsePanelExtraStyle: (theme: Theme) => {
+    display: string;
+    alignItems: string;
+    flexShrink: number;
+    fontSize: 16;
+};
+export declare const getCollapsePanelIconStyle: (isActive: boolean, collapsible: CollapseCollapsible) => (theme: Theme) => {
+    cursor?: string | undefined;
+    display: string;
+    alignItems: string;
+    fontSize: 12;
+    lineHeight: number;
+    flexShrink: number;
+    transform: string;
+};
+export declare const getCollapsePanelBodyStyle: ({ tokens, size, bordered, inline, }: {
+    tokens: CollapseTokens;
+    size: CollapseSize;
+    bordered: boolean;
+    inline: boolean;
+}) => (theme: Theme) => {
+    backgroundColor: string;
+    borderBottom?: string | undefined;
+    paddingBlockStart: 4 | 8;
+    paddingBlockEnd: number;
+    paddingInline: number;
+};

package/dist/components/Collapse/components/CollapsePanel/CollapsePanel.styles.js

@@ -0,0 +1,102 @@
+const getPanelSectionCommonStyle = ({
+  size,
+  bordered,
+  inline,
+  tokens,
+  theme
+}) => ({
+  paddingBlockStart: size === "small" ? theme.x1 : theme.x2,
+  paddingBlockEnd: (size === "small" ? theme.x1 : theme.x2) - (bordered ? 1 : 0),
+  paddingInline: inline ? 0 : size === "small" ? theme.x2 : theme.x3,
+  ...bordered ? {
+    borderBottom: `1px solid ${tokens.collapseBorder}`
+  } : {}
+});
+const getLastPanelEndStyle = ({
+  size,
+  bordered
+}) => (theme) => {
+  const radius = size === "small" ? theme.borderRadiusM : theme.borderRadiusL;
+  return {
+    borderBottomLeftRadius: radius,
+    borderBottomRightRadius: radius,
+    ...bordered ? {
+      borderBottom: "none",
+      paddingBlockEnd: size === "small" ? theme.x1 : theme.x2
+    } : {}
+  };
+};
+const getCollapsePanelHeaderStyle = ({
+  tokens,
+  size,
+  bordered,
+  inline,
+  collapsible
+}) => (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  ...size === "small" ? theme.typography.body3 : theme.typography.body2,
+  ...getPanelSectionCommonStyle({
+    size,
+    bordered,
+    inline,
+    tokens,
+    theme
+  }),
+  gap: size === "small" ? theme.spaceM : theme.spaceL,
+  backgroundColor: tokens.collapseBg,
+  cursor: collapsible === "header" ? "pointer" : collapsible === "disabled" ? "not-allowed" : "default",
+  userSelect: "none",
+  ...collapsible === "header" ? {
+    ":hover": {
+      backgroundColor: tokens.collapseItemHeaderBgHover
+    }
+  } : {}
+});
+const collapsePanelLabelStyle = {
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+const collapsePanelExtraStyle = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  fontSize: theme.iconM
+});
+const getCollapsePanelIconStyle = (isActive, collapsible) => (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  fontSize: theme.iconS,
+  lineHeight: 1,
+  flexShrink: 0,
+  transform: isActive ? "rotate(90deg)" : "rotate(0deg)",
+  ...collapsible === "icon" ? {
+    cursor: "pointer"
+  } : {}
+});
+const getCollapsePanelBodyStyle = ({
+  tokens,
+  size,
+  bordered,
+  inline
+}) => (theme) => ({
+  ...getPanelSectionCommonStyle({
+    size,
+    bordered,
+    inline,
+    tokens,
+    theme
+  }),
+  backgroundColor: bordered ? tokens.collapseBg : "transparent"
+});
+export {
+  collapsePanelExtraStyle,
+  collapsePanelLabelStyle,
+  getCollapsePanelBodyStyle,
+  getCollapsePanelHeaderStyle,
+  getCollapsePanelIconStyle,
+  getLastPanelEndStyle
+};

package/dist/components/Collapse/components/CollapsePanel/CollapsePanel.types.d.ts

@@ -0,0 +1,7 @@
+import { CollapseItemType, CollapseKey, CollapseProps } from '../../Collapse.types';
+export interface CollapsePanelProps extends Required<Pick<CollapseProps, "bordered" | "inline" | "size" | "collapsible">>, Pick<CollapseProps, "expandIcon" | "styles" | "destroyOnHidden"> {
+    item: CollapseItemType;
+    isActive: boolean;
+    isLast: boolean;
+    onToggle: (key: CollapseKey) => void;
+}

package/dist/components/Collapse/index.d.ts

@@ -0,0 +1,2 @@
+export { Collapse } from './Collapse';
+export type { CollapseProps, CollapseItemType, CollapseKey, CollapseExpandIconProps, } from './Collapse.types';

package/dist/index.d.ts

@@ -50,4 +50,5 @@ export { type SegmentedProps, type SegmentedLabeledOption, Segmented, } from './
 export { ContextIsolator } from './components/ContextIsolator';
 export { type SpinProps, Spin } from './components/Spin';
 export { type TableProps, type DefaultRecord, type RenderFn, type Column, type ColumnWithChildren, Table, } from './components/Table';
+export { Collapse, type CollapseProps, type CollapseItemType, type CollapseKey, type CollapseExpandIconProps, } from './components/Collapse';
 export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -39,12 +39,14 @@ import { Segmented } from "./components/Segmented/Segmented.js";
 import { ContextIsolator } from "./components/ContextIsolator/ContextIsolator.js";
 import { Spin } from "./components/Spin/Spin.js";
 import { Table } from "./components/Table/Table.js";
+import { Collapse } from "./components/Collapse/Collapse.js";
 export {
   Alert,
   Avatar,
   Breadcrumb,
   Button,
   Checkbox,
+  Collapse,
   ConfigProvider,
   ContextIsolator,
   DatePicker,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.17.4",
+  "version": "0.18.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",