@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Markdown/Mermaid.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mermaid = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../utils");
+function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
+    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
+}
+exports.Mermaid = Mermaid;
+const Wrapper = styled_components_1.default.div `
+  background-color: var(--mermaid-background-color);
+  border-radius: var(--mermaid-border-radius);
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    max-width: 100%;
+  }
+`;
+//# sourceMappingURL=Mermaid.js.map

package/lib/components/Markdown/PageWrapper.d.ts

@@ -0,0 +1 @@
+export declare const PageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Markdown/PageWrapper.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.PageWrapper = styled_components_1.default.div.attrs(({ className }) => ({
+    'data-component-name': 'Markdown/PageWrapper',
+    className,
+})) `
+  display: flex;
+  flex: 1;
+  width: 100%;
+`;
+//# sourceMappingURL=PageWrapper.js.map

package/lib/components/Markdown/Sup.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+export declare function Sup({ children, className, }: PropsWithChildren<{
+    className?: string;
+}>): JSX.Element;

package/lib/components/Markdown/Sup.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sup = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Sup({ children, className, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Markdown/Sup", className: className }, children));
+}
+exports.Sup = Sup;
+const Wrapper = styled_components_1.default.sup ``;
+//# sourceMappingURL=Sup.js.map

package/lib/components/Markdown/index.d.ts

@@ -0,0 +1,10 @@
+export * from '../../components/Markdown/Admonition';
+export * from '../../components/Markdown/ContainerWrapper';
+export * from '../../components/Markdown/Details';
+export * from '../../components/Markdown/Heading';
+export * from '../../components/Markdown/MarkdownLayout';
+export * from '../../components/Markdown/MarkdownWrapper';
+export * from '../../components/Markdown/Mermaid';
+export * from '../../components/Markdown/PageWrapper';
+export * from '../../components/Markdown/Sup';
+export * from '../../components/Markdown/styledVariables';

package/lib/components/Markdown/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Markdown/Admonition"), exports);
+__exportStar(require("../../components/Markdown/ContainerWrapper"), exports);
+__exportStar(require("../../components/Markdown/Details"), exports);
+__exportStar(require("../../components/Markdown/Heading"), exports);
+__exportStar(require("../../components/Markdown/MarkdownLayout"), exports);
+__exportStar(require("../../components/Markdown/MarkdownWrapper"), exports);
+__exportStar(require("../../components/Markdown/Mermaid"), exports);
+__exportStar(require("../../components/Markdown/PageWrapper"), exports);
+__exportStar(require("../../components/Markdown/Sup"), exports);
+__exportStar(require("../../components/Markdown/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Markdown/styledVariables.d.ts

@@ -0,0 +1,3 @@
+export declare const admonition: import("styled-components").FlattenSimpleInterpolation;
+export declare const markdown: import("styled-components").FlattenSimpleInterpolation;
+export declare const mermaid: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Markdown/styledVariables.js

@@ -0,0 +1,285 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mermaid = exports.markdown = exports.admonition = void 0;
+const styled_components_1 = require("styled-components");
+exports.admonition = (0, styled_components_1.css) `
+  /* === Admonitions === */
+
+  /**
+  * @tokens Admonition typography
+  */
+
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
+  --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-transform: uppercase;
+
+  /**
+  * @tokens Admonition spacing
+  * @presenter Spacing
+  */
+
+  --admonition-margin-horizontal: 0;
+  --admonition-margin-vertical: var(--spacing-lg);
+  --admonition-padding-horizontal: var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
+  --admonition-icon-size: 25px;
+
+  /**
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: 0; // @presenter BorderRadius
+  --admonition-border-style: var(--border-style);
+  --admonition-border-width: var(--border-width);
+
+  /**
+  * @tokens Admonition type info
+  */
+
+  --admonition-info-background-color: var(--color-info-bg); // @presenter Color
+  --admonition-info-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-info-text-color: var(--text-secondary); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-border-color: inherit; // @presenter Color
+  --admonition-info-border-style: var(--admonition-border-style);
+  --admonition-info-border-width: var(--admonition-border-width);
+  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
+    var(--admonition-info-border-color); // @presenter Border
+  --admonition-info-icon: none;
+
+  /**
+  * @tokens Admonition type attention
+  * @presenter Color
+  */
+
+  --admonition-attention-background-color: var(--color-yellow-1); // @presenter Color
+  --admonition-attention-text-color: var(--text-secondary); // @presenter Color
+  --admonition-attention-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-attention-icon-color: var(--color-yellow-6); // @presenter Color
+  --admonition-attention-border-color: inherit; // @presenter Color
+  --admonition-attention-border-style: var(--admonition-border-style);
+  --admonition-attention-border-width: var(--admonition-border-width);
+  --admonition-attention-border: var(--admonition-attention-border-width)
+    var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border
+  --admonition-attention-icon: none;
+
+  /**
+  * @tokens Admonition type warning
+  */
+
+  /* warning */
+  --admonition-warning-background-color: var(--color-warning-bg); // @presenter Color
+  --admonition-warning-text-color: var(--text-secondary); // @presenter Color
+  --admonition-warning-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-border-color: inherit; // @presenter Color
+  --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-warning-border: var(--admonition-warning-border-width)
+    var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
+  --admonition-warning-icon: none;
+
+  /**
+  * @tokens Admonition type danger
+  */
+
+  --admonition-danger-background-color: var(--color-error-bg); // @presenter Color
+  --admonition-danger-text-color: var(--text-secondary); // @presenter Color
+  --admonition-danger-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-border-color: inherit; // @presenter Color
+  --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-danger-border: var(--admonition-danger-border-width)
+    var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
+  --admonition-danger-icon: none;
+
+  /**
+  * @tokens Admonition type success
+  */
+
+  --admonition-success-background-color: var(--color-success-bg); // @presenter Color
+  --admonition-success-text-color: var(--text-secondary); // @presenter Color
+  --admonition-success-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-border-color: inherit; // @presenter Color
+  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-success-border: var(--admonition-success-border-width)
+    var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
+  --admonition-success-icon: none;
+
+  // @tokens End
+`;
+exports.markdown = (0, styled_components_1.css) `
+  /**
+  * @tokens Markdown Container
+  */
+
+  --md-container-max-width: 910px;
+  --md-container-padding-vertical: 25px; // @presenter Spacing
+  --md-container-padding-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Blockquote
+  */
+
+  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing
+  --md-blockquote-margin-horizontal: 0; // @presenter Spacing
+  --md-blockquote-padding-vertical: 0; // @presenter Spacing
+  --md-blockquote-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --md-blockquote-border-color: var(--border-primary); // @presenter Color
+  --md-blockquote-background-color: transparent; // @presenter Color
+  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border
+  --md-blockquote-text-color: var(--text-secondary); // @presenter Color
+  --md-blockquote-box-shadow: none; // @presenter Shadow
+
+  /**
+  * @tokens Markdown Paragraph
+  */
+
+  --md-paragraph-margin-vertical: 10px; // @presenter Spacing
+  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Table
+  */
+
+  --md-table-font-size: var(--font-size-sm); // @presenter FontSize
+  --md-table-margin-vertical: 20px; // @presenter Spacing
+  --md-table-background-color: transparent; // @presenter Color
+
+  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --md-table-border-width: 1px;
+  --md-table-border-color: var(--border-primary); // @presenter Color
+
+  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color
+
+  --md-table-cell-text-color: var(--text-secondary); // @presenter Color
+  --md-table-cell-padding: var(--spacing-sm); // @presenter Spacing
+
+  --md-table-head-background-color: var(--bg-overlay); // @presenter Color
+  --md-table-head-text-color: var(--text-primary); // @presenter Color
+  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  /**
+  * @tokens Markdown Horizontal Rule
+  */
+
+  --md-hr-background-color: transparent; // @presenter Color
+  --md-hr-border-color: var(--border-primary); // @presenter Color
+  --md-hr-height: unset;
+  --md-hr-margin-vertical: 20px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown List
+  */
+
+  --md-list-left-padding: 2rem; // @presenter Spacing
+  --md-list-margin: 1rem; // @presenter Spacing
+  --md-list-item-margin: 0.25rem; // @presenter Spacing
+  --md-list-item-style: inherit;
+
+
+  /**
+  * @tokens Markdown Checkbox List
+  */
+
+  --md-checkbox-list-item-style: none;
+
+  /**
+  * @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-number-display: none;
+  --md-numbered-list-item-style: var(--md-list-item-style);
+  --md-numbered-list-number-text-color: var(--text-secondary); // @presenter Color
+  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-background-color: var(--bg-raised); // @presenter Color
+  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
+  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing
+  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
+
+  // @tokens End
+
+  /**
+  * @tokens Markdown Tabs
+  */
+  
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-background-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-background-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
+
+  --md-tabs-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --md-tabs-tab-background-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-active-tab-border-color: var(--text-base); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 2px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+  
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1.5px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+
+  // @tokens End
+`;
+exports.mermaid = (0, styled_components_1.css) `
+  /**
+  * @tokens Mermaid
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Menu/Menu.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ItemState } from '../../mocks/Sidebar/types';
+export interface MenuListProps {
+    items: ItemState[];
+    depth?: number;
+    isMobile?: boolean;
+    className?: string;
+}
+export declare function Menu({ depth, items, className, isMobile }: MenuListProps): React.JSX.Element;
+export declare const ThemeMenu: import("styled-components").StyledComponent<"ul", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/components/Menu/Menu.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeMenu = exports.Menu = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const MenuItemSwitch_1 = require("../../components/Menu/MenuItemSwitch");
+function Menu({ depth = 0, items, className, isMobile }) {
+    // TODO: provide active section via MenuContext
+    const activeItem = items.find(({ active }) => active);
+    return (react_1.default.createElement(exports.ThemeMenu, { className: className }, items.map((item, index) => {
+        var _a;
+        return (react_1.default.createElement(MenuItemSwitch_1.MenuItemSwitch, { item: item, key: `${item.pageId}-${index}`, activeItem: activeItem, isMobile: isMobile }, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(Menu, { items: item.items, depth: depth + 1, isMobile: isMobile })) : null));
+    })));
+}
+exports.Menu = Menu;
+exports.ThemeMenu = styled_components_1.default.ul.attrs(() => ({
+    'data-component-name': 'Menu/Menu',
+})) `
+  padding: var(--menu-padding);
+  margin: var(--menu-margin);
+  list-style: var(--menu-list-style);
+  color: var(--menu-text-color);
+  position: relative;
+`;
+//# sourceMappingURL=Menu.js.map

package/lib/components/Menu/MenuContainer.d.ts

@@ -0,0 +1,6 @@
+interface MenuContainerProps {
+    growContent?: boolean;
+    className?: string;
+}
+export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, MenuContainerProps, never>;
+export {};

package/lib/components/Menu/MenuContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.MenuContainer = styled_components_1.default.div.attrs(({ growContent, className }) => ({
+    'data-component-name': 'Menu/MenuContainer',
+    growContent: growContent === undefined ? true : growContent,
+    className,
+})) `
+  position: relative;
+  overflow-y: auto;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
+  padding-top: var(--sidebar-offset-top);
+`;
+//# sourceMappingURL=MenuContainer.js.map

package/lib/components/Menu/MenuGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ItemState } from '../../components/Sidebar/types';
+interface MenuGroupProps {
+    item: ItemState;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    className?: string;
+}
+export declare function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }: React.PropsWithChildren<MenuGroupProps>): JSX.Element;
+export {};

package/lib/components/Menu/MenuGroup.js

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuGroup = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ArrowIcon_1 = require("../../icons/ArrowIcon/ArrowIcon");
+const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
+const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
+const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
+const hooks_1 = require("../../mocks/hooks");
+function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
+    const [showChildren, setShowChildren] = (0, react_1.useState)(isExpanded);
+    const timer = (0, react_1.useRef)(null);
+    const { translate } = (0, hooks_1.useTranslate)();
+    (0, react_1.useEffect)(() => {
+        timer.current && clearTimeout(timer.current);
+        if (isExpanded) {
+            setShowChildren(true);
+        }
+        else {
+            timer.current = setTimeout(() => {
+                setShowChildren(false);
+            }, 800);
+        }
+        return () => {
+            timer.current && clearTimeout(timer.current);
+        };
+    }, [isExpanded]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: className },
+        react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded, withArrow: !!item.items.length },
+                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
+                react_1.default.createElement(LabelWrapper, null,
+                    item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
+                    translate(item.labelTranslationKey, item.label)))),
+        react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.MenuGroup = MenuGroup;
+const Wrapper = styled_components_1.default.div ``;
+const MenuWrapper = styled_components_1.default.div `
+  padding-left: var(--sidebar-item-nested-offset);
+  overflow: hidden;
+  ${(props) => props.isExpanded
+    ? `max-height: 99999px;
+        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
+    : `max-height: 0px;
+	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
+`;
+const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  padding-left: var(--sidebar-item-padding-horizontal);
+  cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
+  font-family: var(--sidebar-item-group-font-family);
+  font-size: var(--sidebar-item-group-font-size);
+  text-transform: var(--sidebar-text-group-transform);
+  color: var(--sidebar-item-group-text-color);
+  background: var(--sidebar-item-group-background-color);
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--sidebar-item-group-gap);
+
+  ${({ active }) => active
+    ? `color: var(--sidebar-item-group-active-text-color);
+        background-color: var(--sidebar-item-group-active-background-color);`
+    : null};
+
+  ${({ expanded }) => expanded &&
+    `
+    color: var(--sidebar-item-group-active-text-color);
+  `}
+
+  ${({ withArrow }) => !withArrow &&
+    `
+    padding-left: var(--sidebar-item-label-padding);
+  `}
+`;
+const LabelWrapper = styled_components_1.default.div `
+  display: flex;
+`;
+//# sourceMappingURL=MenuGroup.js.map

package/lib/components/Menu/MenuItem.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MenuItemProps } from '../../components/Sidebar/types';
+export declare function MenuItem({ item, className }: MenuItemProps): JSX.Element;

package/lib/components/Menu/MenuItem.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
+const ExternalIcon_1 = require("../../icons/ExternalIcon");
+const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
+const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
+const SidebarItemIcon_1 = require("../../components/Sidebar/SidebarItemIcon");
+const hooks_1 = require("../../mocks/hooks");
+function MenuItem({ item, className }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuItem", className: className },
+        react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(Label, { active: item.active },
+                item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
+                translate(item.labelTranslationKey, item.label),
+                item.external ? react_1.default.createElement(ExternalIcon_1.ExternalIcon, null) : null)),
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.MenuItem = MenuItem;
+const Wrapper = styled_components_1.default.div ``;
+const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  padding-left: var(--sidebar-item-label-padding);
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+
+  ${({ active, theme }) => active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+    }
+  `};
+`;
+//# sourceMappingURL=MenuItem.js.map

package/lib/components/Menu/MenuItemLabel.d.ts

@@ -0,0 +1,3 @@
+export declare const MenuItemLabel: import("styled-components").StyledComponent<"li", any, {
+    active?: boolean | undefined;
+}, never>;