@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Markdown/MarkdownWrapper.js

@@ -0,0 +1,394 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const theme_helpers_1 = require("../../utils/theme-helpers");
+exports.baseTable = (0, styled_components_1.css) `
+  table.md {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: keep-all;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-top: var(--md-table-margin-vertical);
+    margin-bottom: var(--md-table-margin-vertical);
+    font-size: var(--md-table-font-size);
+
+    th,
+    td {
+      padding: var(--md-table-cell-padding);
+      border-bottom: 1px solid var(--md-table-border-color);
+      color: var(--md-table-cell-text-color);
+    }
+
+    tr {
+      background-color: var(--md-table-stripe-background-color);
+    }
+
+    th {
+      text-align: left;
+      font-weight: var(--md-table-head-font-weight);
+      color: var(--md-table-head-text-color);
+      background-color: var(--md-table-head-background-color);
+    }
+
+    tr th:first-child,
+    tr td:first-child {
+      border-left: 1px solid var(--md-table-border-color);
+    }
+
+    tr td:last-child,
+    tr th:last-child {
+      border-right: 1px solid var(--md-table-border-color);
+    }
+
+    thead td,
+    thead th {
+      border-top: 1px solid var(--md-table-border-color);
+    }
+
+    /* top-left border */
+
+    thead tr:first-child th:first-child {
+      border-top-left-radius: var(--md-table-border-radius);
+    }
+
+    /* top-right border */
+
+    thead tr:first-child th:last-child {
+      border-top-right-radius: var(--md-table-border-radius);
+    }
+
+    /* bottom-left border */
+
+    tbody tr:last-child td:first-child {
+      border-bottom-left-radius: var(--md-table-border-radius);
+    }
+
+    /* bottom-right border */
+
+    tbody tr:last-child td:last-child {
+      border-bottom-right-radius: var(--md-table-border-radius);
+    }
+  }
+`;
+// TODO: Can users specify another className or we should hardcode it?
+function headingAnchor(className = 'anchor') {
+    return (0, styled_components_1.css) `
+    .${className}.before {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      padding-right: var(--heading-anchor-offset-right);
+    }
+
+    .${className}.after {
+      display: inline-block;
+      padding-left: 4px;
+    }
+
+    svg,
+    .${className} svg {
+      fill: var(--heading-anchor-color);
+      visibility: hidden;
+
+      background-image: var(--heading-anchor-icon);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    :hover .${className} svg,
+    .${className}:focus svg {
+      visibility: visible;
+    }
+  `;
+}
+exports.headingAnchor = headingAnchor;
+exports.MarkdownWrapper = styled_components_1.default.main.attrs(() => ({
+    'data-component-name': 'Markdown/MarkdownWrapper',
+})) `
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--text-color);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  a:not([role='button']) {
+    text-decoration: var(--link-decoration);
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+
+    &:visited {
+      color: var(--link-visited-text-color);
+      text-decoration: var(--link-visited-decoration);
+    }
+
+    &:hover {
+      text-decoration: var(--link-hover-decoration);
+      color: var(--link-hover-text-color);
+    }
+
+    &:focus {
+      color: var(--link-active-text-color);
+      text-decoration: var(--link-active-decoration);
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  h1.md,
+  h2.md,
+  h3.md,
+  h4.md,
+  h5.md,
+  h6.md {
+    font-weight: var(--heading-font-weight);
+    font-family: var(--heading-font-family);
+    position: relative;
+
+    scroll-margin-top: 60px;
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  hr {
+    border-top: 1px solid var(--md-hr-border-color);
+    background-color: var(--md-hr-background-color);
+    height: var(--md-hr-height);
+    margin: var(--md-hr-margin-vertical) 0;
+  }
+
+  details {
+    margin: 1.125em 0;
+
+    summary {
+      color: var(--text-color);
+      font-weight: var(--font-weight-regular);
+      outline: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    > :not(summary):first-of-type {
+      margin-top: 1.25em;
+    }
+
+    > *:last-child {
+      margin-bottom: 1.25em;
+    }
+  }
+
+  ${exports.baseTable};
+
+  .code-snippets-tabs {
+    .snippets-tabs-headers {
+      font-size: 0.9em;
+
+      font-family: var(--heading-font-family);
+
+      .tab-header {
+        text-align: center;
+        padding: 0.2em 0.5em;
+        display: inline-block;
+        cursor: pointer;
+        color: var(--text-color-secondary);
+
+        &.active {
+          color: var(--heading-text-color);
+          font-weight: var(--font-weight-bold);
+        }
+      }
+    }
+
+    .tab-content {
+      margin-top: 4px;
+      display: none;
+
+      pre {
+        margin-top: 0;
+      }
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  p {
+    margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);
+
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1.md {
+    ${(0, theme_helpers_1.typography)('h1', 'h')};
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
+    ${headingAnchor()};
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h2.md {
+    ${(0, theme_helpers_1.typography)('h2', 'h')};
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h3.md {
+    ${(0, theme_helpers_1.typography)('h3', 'h')};
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h4.md {
+    ${(0, theme_helpers_1.typography)('h4', 'h')};
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h5.md {
+    ${(0, theme_helpers_1.typography)('h5', 'h')};
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h6.md {
+    ${(0, theme_helpers_1.typography)('h6', 'h')};
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h1.md code {
+    font-size: var(--h1-font-size);
+  }
+
+  h2.md code {
+    font-size: var(--h2-font-size);
+  }
+
+  h3.md code {
+    font-size: var(--h3-font-size);
+  }
+
+  h4.md code {
+    font-size: var(--h4-font-size);
+  }
+
+  h5.md code {
+    font-size: var(--h5-font-size);
+  }
+
+  h6.md code {
+    font-size: var(--h6-font-size);
+  }
+
+  code {
+    color: var(--inline-code-text-color);
+    background-color: var(--inline-code-background-color);
+
+    border-radius: var(--inline-code-border-radius);
+    border: 1px solid var(--inline-code-border-color);
+    padding: 0.1em 0.25em 0.2em;
+    font-weight: var(--code-font-weight);
+    word-break: break-word;
+    font-size: var(--inline-code-font-size);
+    font-family: var(--code-font-family);
+  }
+
+  blockquote {
+    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
+    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
+    border-left: var(--md-blockquote-border-left);
+    background-color: var(--md-blockquote-background-color);
+    color: var(--md-blockquote-text-color);
+    box-shadow: var(--md-blockquote-box-shadow);
+
+    & > p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    margin: 0 auto;
+
+    &:only-child {
+      display: block;
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: var(--md-list-left-padding);
+    margin: 0 0 var(--md-list-margin);
+
+    ul,
+    ol {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+
+  li {
+    margin: var(--md-list-item-margin);
+    list-style: var(--md-list-item-style);
+  }
+
+  ol > li {
+    list-style: var(--md-numbered-list-item-style);
+  }
+
+  ol > li:before {
+    content: counter(list-item);
+    display: var(--md-numbered-list-number-display);
+    color: var(--md-numbered-list-number-text-color);
+    font-size: var(--md-numbered-list-number-font-size);
+    font-family: var(--md-numbered-list-number-font-family);
+    font-weight: var(--md-numbered-list-number-font-weight);
+    background-color: var(--md-numbered-list-number-background-color);
+    border-radius: var(--md-numbered-list-number-border-radius);
+    border: var(--md-numbered-list-number-border);
+    margin-right: var(--md-numbered-list-number-margin-right);
+    padding: var(--md-numbered-list-number-padding);
+  }
+`;
+//# sourceMappingURL=MarkdownWrapper.js.map

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

@@ -0,0 +1,9 @@
+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';

package/lib/components/Markdown/index.js

@@ -0,0 +1,26 @@
+"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);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ItemState } from '../../mocks/Sidebar/types';
+export interface MenuListProps {
+    items: ItemState[];
+    depth?: number;
+}
+export declare function Menu({ depth, items }: MenuListProps): 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("./MenuItemSwitch");
+function Menu({ depth = 0, items }) {
+    // TODO: provide active section via MenuContext
+    const activeItem = items.find(({ active }) => active);
+    return (react_1.default.createElement(exports.ThemeMenu, null, items.map((item, index) => {
+        var _a;
+        return (react_1.default.createElement(MenuItemSwitch_1.MenuItemSwitch, { item: item, key: `${item.pageId}-${index}`, activeItem: activeItem }, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? react_1.default.createElement(Menu, { items: item.items, depth: depth + 1 }) : null));
+    })));
+}
+exports.Menu = Menu;
+exports.ThemeMenu = styled_components_1.default.ul.attrs(() => ({
+    'data-component-name': 'Menu/Menu',
+})) `
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  color: var(--sidebar-item-text-color);
+  position: relative;
+`;
+//# sourceMappingURL=Menu.js.map

package/lib/components/Menu/MenuContainer.js

@@ -0,0 +1,17 @@
+"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 }) => ({
+    'data-component-name': 'Menu/MenuContainer',
+    growContent: growContent === undefined ? true : growContent,
+})) `
+  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,9 @@
+import React from 'react';
+import type { ItemState } from '../../components/Sidebar/types';
+interface MenuGroupProps {
+    item: ItemState;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+}
+export declare function MenuGroup({ item, isExpanded, toggleExpanded, children, }: React.PropsWithChildren<MenuGroupProps>): JSX.Element;
+export {};

package/lib/components/Menu/MenuGroup.js

@@ -0,0 +1,88 @@
+"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");
+function MenuGroup({ item, isExpanded, toggleExpanded, children, }) {
+    const [showChildren, setShowChildren] = (0, react_1.useState)(isExpanded);
+    const timer = (0, react_1.useRef)(null);
+    (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" },
+        react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active },
+                react_1.default.createElement(MenuGroupArrow, { visibility: item.items.length ? 'visible' : 'hidden', direction: isExpanded ? 'down' : 'right' }),
+                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);
+  ${(props) => props.active
+    ? `color: var(--sidebar-item-group-active-text-color);
+        background-color: var(--sidebar-item-group-active-background-color);`
+    : null};
+`;
+const MenuGroupArrow = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon) `
+  margin-right: calc(var(--sidebar-spacing-unit) / 2);
+`;
+//# 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 }: MenuItemProps): JSX.Element;

package/lib/components/Menu/MenuItem.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.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");
+function MenuItem({ item }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuItem" },
+        react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(MenuItemLabel_1.MenuItemLabel, { active: item.active },
+                item.label,
+                item.external ? react_1.default.createElement(ExternalIcon_1.ExternalIcon, { dataComponentName: "Sidebar/ExternalIcon" }) : null)),
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.MenuItem = MenuItem;
+const Wrapper = styled_components_1.default.div ``;
+//# sourceMappingURL=MenuItem.js.map

package/lib/components/Menu/MenuItemLabel.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItemLabel = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.MenuItemLabel = styled_components_1.default.li.attrs(() => ({
+    'data-component-name': 'Menu/MenuItemLabel',
+})) `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  word-break: break-word;
+  margin-bottom: 1px;
+
+  background-color: var(--sidebar-item-background-color);
+  font-family: var(--sidebar-item-font-family);
+  font-size: var(--sidebar-item-font-size);
+  font-weight: var(--font-weight-regular);
+  margin-left: var(--sidebar-offset-left);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  padding-left: calc(
+    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
+      var(--sidebar-spacing-unit) * 0.5
+  );
+  border-radius: var(--sidebar-item-border-radius);
+
+  ${(props) => props.active
+    ? `
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
+  `
+    : null};
+
+  :hover {
+    color: var(--sidebar-item-hover-color);
+    background-color: var(--sidebar-item-hover-background-color);
+  }
+
+  :empty {
+    padding: 0;
+  }
+`;
+//# sourceMappingURL=MenuItemLabel.js.map

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

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+import type { MenuItemProps } from '../Sidebar/types';
+export declare function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>): JSX.Element;