@redocly/theme 0.18.3-patch.8 → 0.18.4

package/lib/components/Select/Select.js

@@ -31,10 +31,10 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-function Select({ className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, placeholder, }) {
-    const containerRef = (0, react_1.useRef)(null);
+const Select = ({ className, selected, options, dataAttributes, withArrow, triggerEvent = 'click', onChange, }) => {
+    const selectRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
+    const [_selected, setSelected] = (0, react_1.useState)(selected);
     const handleOpen = () => {
         setIsOpen(true);
     };
@@ -45,23 +45,21 @@ function Select({ className, value, options, dataAttributes, withArrow = true, t
         setIsOpen(!isOpen);
     };
     const handleSelect = (value) => {
-        // setSelectedIdx(options.findIndex(o => o.value === value));
+        setSelected(value);
         setIsOpen(false);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
-    (0, hooks_1.useOutsideClick)(containerRef, handleClose);
-    // useEffect(() => {
-    //   handleSelect(selected);
-    //   // eslint-disable-next-line react-hooks/exhaustive-deps
-    // }, [selected]);
-    const selectedOption = options.find((option) => option.value === value);
-    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+    (0, hooks_1.useOutsideClick)(selectRef, handleClose);
+    (0, react_1.useEffect)(() => {
+        handleSelect(selected);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected]);
+    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: selectRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
-            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
-            icon,
+            react_1.default.createElement(exports.SelectInputValue, { withArrow: withArrow }, _selected),
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
-        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: option.value === value }, typeof option.element === 'string' ? react_1.default.createElement("div", null, option.element) : option.element)))))));
-}
+        isOpen && (react_1.default.createElement(exports.SelectList, null, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option) }, option)))))));
+};
 exports.Select = Select;
 exports.SelectContainer = styled_components_1.default.div `
   position: relative;
@@ -84,21 +82,17 @@ exports.SelectInput = styled_components_1.default.div `
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
-  gap: 8px;
 `;
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
-  min-width: 0;
+  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  top: 100%;
+  left: 0;
   margin: 0;
   min-width: var(--select-list-min-width);
-  width: 100%;
   max-width: var(--select-list-max-width);
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
@@ -118,12 +112,7 @@ exports.SelectListItem = styled_components_1.default.li `
   }
 
   :hover {
-    background-color: var(--select-list-item-hover-background-color);
+    background-color: var(--select-list-item-active-background-color);
   }
-
-  ${({ selected }) => selected &&
-    `
-    &, &:hover { background-color: var(--select-list-item-active-background-color); }
-    `}
 `;
 //# sourceMappingURL=Select.js.map

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

@@ -1,2 +1 @@
 export * from '../../components/Select/Select';
-export * from '../../components/Select/styledVariables';

package/lib/components/Select/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Select/Select"), exports);
-__exportStar(require("../../components/Select/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Separator/Separator.js

@@ -9,20 +9,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
 const hooks_1 = require("../../mocks/hooks");
-const hooks_2 = require("../../hooks");
 function Separator({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const { sidebar } = (0, hooks_2.useThemeConfig)();
-    const separatorLine = item.separatorLine || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.separatorLine);
-    const linePosition = item.linePosition || (sidebar === null || sidebar === void 0 ? void 0 : sidebar.linePosition) || 'bottom';
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className, linePosition: linePosition, withLabel: !!item.label },
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className },
         react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
-        separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.Separator = Separator;
-const Wrapper = styled_components_1.default.div `
-  display: flex;
-  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
-  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
-`;
+const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=Separator.js.map

package/lib/components/Separator/SeparatorItem.js

@@ -11,21 +11,24 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
     className,
 })) `
   cursor: default;
-  font-weight: var(--sidebar-item-separator-font-weight);
-  color: var(--sidebar-item-separator-text-color);
+  font-weight: var(--font-weight-bold);
+  color: var(--sidebar-separator-item-color);
+  font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
-  border-radius: 0;
-  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
+  *:not(:first-child) > & {
+    margin-top: var(--sidebar-item-separator-offset);
+  }
+
   :hover {
-    color: var(--sidebar-item-separator-text-color);
-    background: none;
+    color: inherit;
+    background-color: inherit;
   }
 `;
 //# sourceMappingURL=SeparatorItem.js.map

package/lib/components/Separator/SeparatorLine.js

@@ -9,12 +9,8 @@ exports.SeparatorLine = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/SeparatorLine',
     className,
 })) `
-  height: var(--sidebar-item-separator-border-width);
-  background-color: var(--sidebar-item-separator-border-color);
-  margin: var(--mobile-sidebar-item-separator-line-offset);
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    margin: var(--sidebar-item-separator-line-offset);
-  }
+  height: 1px;
+  background-color: var(--sidebar-item-separator-line-color);
+  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
 `;
 //# sourceMappingURL=SeparatorLine.js.map

package/lib/components/Sidebar/ApiCallItem.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-import { Tag } from '../../components/Tag';
 import type { MenuItemProps } from '../../components/Sidebar/types';
 export declare function ApiCallItem({ item, className }: MenuItemProps): JSX.Element;
-export declare const HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;
+export declare const Badge: import("styled-components").StyledComponent<"span", any, {
+    className: `operation-type ${string}`;
+    'data-component-name': string;
+} & {
+    type: string;
+}, "className" | "data-component-name">;

package/lib/components/Sidebar/ApiCallItem.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HttpTag = exports.ApiCallItem = void 0;
+exports.Badge = exports.ApiCallItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tag_1 = require("../../components/Tag");
+const OperationBadge_1 = require("../../components/OperationBadge");
 const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
@@ -14,14 +14,12 @@ function ApiCallItem({ item, className }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
             react_1.default.createElement(Label, { active: item.active },
-                item.label,
-                react_1.default.createElement(exports.HttpTag, { color: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb))),
+                react_1.default.createElement(exports.Badge, { type: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb),
+                item.label)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.ApiCallItem = ApiCallItem;
 const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
-  display: flex;
-  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -29,17 +27,15 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
   }
 `;
 const Wrapper = styled_components_1.default.div ``;
-exports.HttpTag = (0, styled_components_1.default)(Tag_1.Tag) `
+exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge) `
   flex-shrink: 0;
-  margin: var(--sidebar-item-http-tag-margin);
-  text-transform: uppercase;
-
-  width: var(--sidebar-item-http-tag-width);
-  height: var(--sidebar-item-http-tag-height);
-
-  font-size: var(--sidebar-item-http-tag-font-size);
-  font-family: var(--sidebar-item-http-tag-font-family);
-  font-weight: var(--sidebar-item-http-tag-font-weight);
-  border-radius: var(--sidebar-item-http-tag-border-radius);
+  margin-top: 0;
+  width: 36px;
+  height: 14px;
+  font-size: var(--sidebar-item-badge-http-font-size);
+  font-family: var(--sidebar-item-badge-http-font-family);
+  font-weight: var(--sidebar-item-badge-http-font-weight);
+  border-radius: var(--sidebar-item-badge-http-border-radius);
+  color: var(--sidebar-item-badge-http-text-color);
 `;
 //# sourceMappingURL=ApiCallItem.js.map

package/lib/components/Sidebar/FooterWrapper.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.FooterWrapper = styled_components_1.default.div `
-  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
-
   ${({ collapsed }) => collapsed &&
     `
         position: sticky;
         bottom: 0;
-        padding: 0;
     `}
+  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
+  padding-top: var(--sidebar-spacing-unit);
+  padding-right: var(--sidebar-spacing-unit);
+  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/lib/components/Sidebar/HeaderWrapper.js

@@ -9,8 +9,8 @@ exports.HeaderWrapper = styled_components_1.default.div.attrs(({ className }) =>
     'data-component-name': 'Sidebar/HeaderWrapper',
     className,
 })) `
-  margin: var(--sidebar-offset-top) 0 0 0;
-  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
-  border-bottom: solid 1px var(--border-secondary);
+  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
+  padding-bottom: var(--sidebar-spacing-unit);
+  border-bottom: solid 1px var(--border-color);
 `;
 //# sourceMappingURL=HeaderWrapper.js.map

package/lib/components/Sidebar/VersionPicker.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import type { SelectProps } from '../Select';
-import { Select } from '../Select';
-export declare const VersionPicker: import("styled-components").StyledComponent<typeof Select, any, {
+export declare const VersionPicker: import("styled-components").StyledComponent<({ className, selected, options, dataAttributes, withArrow, triggerEvent, onChange, }: SelectProps) => JSX.Element, any, {
     dataAttributes: {
         'data-component-name': string;
     };
-} & SelectProps<any>, "dataAttributes">;
+} & SelectProps, "dataAttributes">;

package/lib/components/Sidebar/VersionPicker.js

@@ -11,11 +11,6 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
         'data-component-name': 'Sidebar/VersionPicker',
     },
 })) `
-  --select-list-item-active-background-color: var(
-    --version-picker-list-item-active-background-color
-  );
-  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
-
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
@@ -47,6 +42,10 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
       padding: var(--version-picker-list-item-vertical-padding)
         var(--version-picker-list-item-horizontal-padding);
     }
+
+    :hover {
+      background-color: var(--version-picker-list-item-active-background-color);
+    }
   }
 `;
 //# sourceMappingURL=VersionPicker.js.map

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

@@ -11,4 +11,3 @@ export * from '../../components/Sidebar/FooterWrapper';
 export * from '../../components/Sidebar/HeaderWrapper';
 export * from '../../components/Sidebar/SidebarItemIcon';
 export * from '../../components/Sidebar/VersionPicker';
-export * from '../../components/Sidebar/styledVariables';

package/lib/components/Sidebar/index.js

@@ -27,5 +27,4 @@ __exportStar(require("../../components/Sidebar/FooterWrapper"), exports);
 __exportStar(require("../../components/Sidebar/HeaderWrapper"), exports);
 __exportStar(require("../../components/Sidebar/SidebarItemIcon"), exports);
 __exportStar(require("../../components/Sidebar/VersionPicker"), exports);
-__exportStar(require("../../components/Sidebar/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Sidebar/types.d.ts

@@ -43,7 +43,6 @@ export interface NavItem {
     requiredPermission?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
-    linePosition?: 'top' | 'bottom';
     version?: string;
     default?: boolean;
 }

package/lib/components/SidebarActions/CollapseSidebarButton.js

@@ -1,53 +1,13 @@
 "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.CollapseSidebarButton = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
 const styled_1 = require("../../components/SidebarActions/styled");
 const CollapseSidebarButton = ({ initialValue, onClick, }) => {
-    return (react_1.default.createElement(ToggleButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick, collapsed: initialValue }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
+    return (react_1.default.createElement(styled_1.StyledToggleRightPanelButton, { title: initialValue ? 'Show sidebar' : 'Hide sidebar', onClick: onClick }, initialValue ? react_1.default.createElement(styled_1.HideLeftPanelSVG, null) : react_1.default.createElement(styled_1.ShowLeftPanelSVG, null)));
 };
 exports.CollapseSidebarButton = CollapseSidebarButton;
-const ToggleButton = (0, styled_components_1.default)(styled_1.StyledToggleRightPanelButton) `
-  background: var(--sidebar-collapse-button-background-color);
-  fill: var(--sidebar-collapse-button-icon-color);
-  margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
-  border: 1px solid var(--sidebar-collapse-button-border-color);
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-xxs);
-  height: var(--control-height-sm);
-  width: var(--control-height-sm);
-
-  ${({ collapsed }) => collapsed &&
-    (0, styled_components_1.css) `
-      background: var(--sidebar-collapse-button-active-background-color);
-      border: var(--sidebar-collapse-button-active-border-color);
-    `}
-`;
 //# sourceMappingURL=CollapseSidebarButton.js.map

package/lib/components/SidebarActions/styled.js

@@ -30,11 +30,11 @@ exports.ControlsWrapChangeLayoutButtons = exports.ControlsWrap = exports.ChangeV
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 exports.ShowLeftPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M4.375 7L8.75 2.625L9.3625 3.2375L5.6 7L9.3625 10.7625L8.75 11.375L4.375 7Z", fill: "var(--text-secondary)" })))) `
+    react_1.default.createElement("path", { d: "M4.375 7L8.75 2.625L9.3625 3.2375L5.6 7L9.3625 10.7625L8.75 11.375L4.375 7Z", fill: "var(--color-emphasis-400)" })))) `
   position: absolute;
 `;
 exports.HideLeftPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M9.62495 7L5.24995 11.375L4.63745 10.7625L8.39995 7L4.63745 3.2375L5.24995 2.625L9.62495 7Z", fill: "var(--text-secondary)" })))) `
+    react_1.default.createElement("path", { d: "M9.62495 7L5.24995 11.375L4.63745 10.7625L8.39995 7L4.63745 3.2375L5.24995 2.625L9.62495 7Z", fill: "var(--color-emphasis-400)" })))) `
   position: absolute;
 `;
 exports.StyledToggleRightPanelButton = styled_components_1.default.a `
@@ -44,22 +44,19 @@ exports.StyledToggleRightPanelButton = styled_components_1.default.a `
   cursor: pointer;
   z-index: 1;
   /* Rectangle 201 */
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-xs);
-  height: var(--control-height-base);
-  width: var(--control-height-base);
-  border: 1px solid var(--border-primary);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-unit);
 
   &:hover {
-    background-color: var(--sidebar-item-hover-background-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
 `;
 exports.HideRightPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3Z", fill: "currentColor" })))) `
+    react_1.default.createElement("path", { d: "M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3Z", fill: "var(--color-emphasis-400)" })))) `
   position: absolute;
 `;
 exports.ShowRightPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3ZM14 13H11V3H14V13Z", fill: "currentColor" })))) `
+    react_1.default.createElement("path", { d: "M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3ZM14 13H11V3H14V13Z", fill: "var(--color-emphasis-400)" })))) `
   position: absolute;
 `;
 exports.StyledChangeViewButton = styled_components_1.default.a `
@@ -68,28 +65,25 @@ exports.StyledChangeViewButton = styled_components_1.default.a `
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-radius: var(--border-radius-md);
-  background: var(--bg-overlay);
+  border-radius: var(--border-radius);
   z-index: 1;
   /* Rectangle 201 */
-  padding: var(--spacing-xs);
-  height: var(--control-height-base);
-  width: var(--control-height-base);
+  padding: var(--spacing-unit);
 
   &:hover {
-    background-color: var(--sidebar-item-hover-background-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
 `;
 exports.ChangeViewSvgRow = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z", fill: "currentColor" }),
-    react_1.default.createElement("path", { d: "M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z", fill: "currentColor" }),
-    react_1.default.createElement("path", { d: "M2.625 11.375L2.625 8.75L11.375 8.75L11.375 11.375L2.625 11.375ZM2.625 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375L12.25 8.75C12.25 8.51794 12.1578 8.29538 11.9937 8.13128C11.8296 7.96719 11.6071 7.875 11.375 7.875L2.625 7.875C2.39294 7.875 2.17038 7.96719 2.00628 8.13128C1.84219 8.29538 1.75 8.51793 1.75 8.75L1.75 11.375C1.75 11.6071 1.84219 11.8296 2.00628 11.9937C2.17038 12.1578 2.39294 12.25 2.625 12.25Z", fill: "currentColor" })))) `
+    react_1.default.createElement("path", { d: "M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M2.625 11.375L2.625 8.75L11.375 8.75L11.375 11.375L2.625 11.375ZM2.625 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375L12.25 8.75C12.25 8.51794 12.1578 8.29538 11.9937 8.13128C11.8296 7.96719 11.6071 7.875 11.375 7.875L2.625 7.875C2.39294 7.875 2.17038 7.96719 2.00628 8.13128C1.84219 8.29538 1.75 8.51793 1.75 8.75L1.75 11.375C1.75 11.6071 1.84219 11.8296 2.00628 11.9937C2.17038 12.1578 2.39294 12.25 2.625 12.25Z", fill: "var(--color-emphasis-400)" })))) `
   position: absolute;
 `;
 exports.ChangeViewSvgColumn = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z", fill: "currentColor" }),
-    react_1.default.createElement("path", { d: "M5.6875 12.25L5.6875 1.75L4.8125 1.75L4.8125 12.25L5.6875 12.25Z", fill: "currentColor" }),
-    react_1.default.createElement("path", { d: "M11.375 11.375L8.75 11.375L8.75 2.625L11.375 2.625L11.375 11.375ZM12.25 11.375L12.25 2.625C12.25 2.39294 12.1578 2.17038 11.9937 2.00628C11.8296 1.84219 11.6071 1.75 11.375 1.75L8.75 1.75C8.51794 1.75 8.29538 1.84219 8.13128 2.00628C7.96719 2.17038 7.875 2.39294 7.875 2.625L7.875 11.375C7.875 11.6071 7.96719 11.8296 8.13128 11.9937C8.29538 12.1578 8.51794 12.25 8.75 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375Z", fill: "currentColor" })))) `
+    react_1.default.createElement("path", { d: "M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M5.6875 12.25L5.6875 1.75L4.8125 1.75L4.8125 12.25L5.6875 12.25Z", fill: "var(--color-emphasis-400)" }),
+    react_1.default.createElement("path", { d: "M11.375 11.375L8.75 11.375L8.75 2.625L11.375 2.625L11.375 11.375ZM12.25 11.375L12.25 2.625C12.25 2.39294 12.1578 2.17038 11.9937 2.00628C11.8296 1.84219 11.6071 1.75 11.375 1.75L8.75 1.75C8.51794 1.75 8.29538 1.84219 8.13128 2.00628C7.96719 2.17038 7.875 2.39294 7.875 2.625L7.875 11.375C7.875 11.6071 7.96719 11.8296 8.13128 11.9937C8.29538 12.1578 8.51794 12.25 8.75 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375Z", fill: "var(--color-emphasis-400)" })))) `
   position: absolute;
 `;
 exports.ControlsWrap = styled_components_1.default.span `
@@ -97,19 +91,17 @@ exports.ControlsWrap = styled_components_1.default.span `
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-unit);
   align-items: center;
-  margin-left: var(--sidebar-controls-margin-left);
+  margin-left: '15px';
   z-index: 2;
   background: var(--sidebar-background-color);
 
   ${({ isCollapsed }) => isCollapsed &&
     (0, styled_components_1.css) `
       flex-direction: column;
-      margin-left: 0;
-      gap: var(--sidebar-controls-collapsed-gap);
-      padding: var(--sidebar-controls-collapsed-padding-vertical)
-        var(--sidebar-controls-collapsed-padding-horizontal);
+      gap: 10px;
+      padding-bottom: 10px;
     `}
 
   ${({ theme }) => (0, styled_components_1.css) `
@@ -126,7 +118,7 @@ exports.ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
-  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
   align-items: center;
 `;
 //# sourceMappingURL=styled.js.map

package/lib/components/TableOfContent/TableOfContent.js

@@ -69,12 +69,11 @@ const TocHeader = styled_components_1.default.div `
   font-weight: var(--toc-heading-font-weight);
   padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
   color: var(--toc-heading-text-color);
-  text-transform: var(--toc-heading-text-transform);
+  text-transform: uppercase;
 `;
 const MenuItem = styled_components_1.default.a `
   display: block;
   color: var(--toc-item-text-color);
-  font-weight: var(--toc-item-font-weight);
   background-color: var(--toc-item-background-color);
   cursor: pointer;
   font-size: var(--toc-item-font-size);
@@ -88,6 +87,7 @@ const MenuItem = styled_components_1.default.a `
   :hover,
   &.active {
     color: var(--toc-item-active-text-color);
+    background-color: var(--toc-item-active-background-color);
   }
 
   :empty {
@@ -108,6 +108,7 @@ const TableOfContentItems = styled_components_1.default.div `
   position: sticky;
   top: calc(var(--navbar-height) + var(--toc-offset-top));
   max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
   width: var(--toc-width);
 `;

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

@@ -1,2 +1 @@
 export * from '../../components/TableOfContent/TableOfContent';
-export * from '../../components/TableOfContent/styledVariables';

package/lib/components/TableOfContent/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/TableOfContent/TableOfContent"), exports);
-__exportStar(require("../../components/TableOfContent/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Tabs/Tab.js

@@ -22,7 +22,7 @@ const TabItem = styled_components_1.default.li `
       background-color: var(--background-color);
       border: solid var(--md-tabs-active-tab-border-color);
       border-width: 0 0 1px 0;
-      color: var(--text-primary);
+      color: var(--text-color);
     `
     : `
     &:hover {

package/lib/components/Tabs/Tabs.js

@@ -59,7 +59,7 @@ const TabList = styled_components_1.default.ol `
   color: var(--md-tabs-tab-text-color);
   padding: 0;
   margin-block-end: 0;
-  border: solid var(--border-primary);
+  border: solid var(--color-secondary-400);
   border-width: 0 0 1px 0;
 
   li[class^='Tab__TabItem'] {

package/lib/components/Tags/Tags.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function Tags({ tags, className }: {
+    tags: string[];
+    className?: string;
+}): JSX.Element;

package/lib/components/Tags/Tags.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Highlight_1 = require("../../ui/Highlight");
+function Tags({ tags, className }) {
+    return (react_1.default.createElement(TagsWrapper, { className: className }, tags.map((tag) => (react_1.default.createElement(Tag, { key: tag, className: 'tag-' + slug(tag) },
+        react_1.default.createElement(Highlight_1.Highlight, null, tag))))));
+}
+exports.Tags = Tags;
+const TagsWrapper = styled_components_1.default.div `
+  margin-top: 16px;
+`;
+const Tag = styled_components_1.default.div `
+  display: inline-block;
+  background-color: #d3f4ef;
+  color: #000;
+  padding: 2px 5px;
+  border-radius: var(--border-radius);
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+`;
+// TODO: import from portal
+function slug(str) {
+    return str.replace(/\s/g, '-').toLowerCase();
+}
+//# sourceMappingURL=Tags.js.map

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

@@ -0,0 +1 @@
+export * from './Tags';

package/lib/components/{Image → Tags}/index.js

@@ -14,5 +14,5 @@ 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/Image/Image"), exports);
+__exportStar(require("./Tags"), exports);
 //# sourceMappingURL=index.js.map