@redocly/theme 0.38.0 → 0.38.2

package/lib/components/Badge/Badge.js

@@ -39,7 +39,7 @@ const BadgeComponent = styled_components_1.default.span `
   vertical-align: middle;
   line-height: var(--line-height-base);
   color: var(--badge-text-color);
-  background-color: var(--badge-bg-color);
+  background-color: ${({ color }) => color || 'var(--badge-bg-color)'};
   border-radius: var(--badge-border-radius);
   margin: 0 0 0 0.5em;
   font-size: var(--font-size-base);

package/lib/components/Feedback/Mood.js

@@ -101,15 +101,15 @@ function Mood({ settings, onSubmit, className }) {
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
-                            setScore(MOOD_STATES.SATISFIED);
-                        }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) }),
+                    React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
+                            setScore(MOOD_STATES.DISSATISFIED);
+                        }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
                     React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
                             setScore(MOOD_STATES.NEUTRAL);
                         }, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
-                    React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
-                            setScore(MOOD_STATES.DISSATISFIED);
-                        }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }))),
+                    React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
+                            setScore(MOOD_STATES.SATISFIED);
+                        }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
                         label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,

package/lib/components/Search/SearchItem.js

@@ -54,7 +54,10 @@ function SearchItem({ item, className, product }) {
                 item.pathName ? (0, SearchHighlight_1.highlight)(item.pathName) : null)) : null,
             react_1.default.createElement(SearchItemTitleWrapper, null,
                 react_1.default.createElement(SearchItemTitle, null, (0, SearchHighlight_1.highlight)(item.title)),
-                item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null),
+                item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
+                item.badges
+                    ? item.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
+                    : null),
             Array.isArray(item.text) ? (react_1.default.createElement(SearchItemDescription, null, (0, SearchHighlight_1.highlight)(item.text))) : null),
         itemParam ? (react_1.default.createElement(SearchItemPlace, null,
             react_1.default.createElement("div", null,

package/lib/components/Switch/Switch.d.ts

@@ -0,0 +1,6 @@
+export type SwitchProps = {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+};
+export declare function Switch({ value, disabled, onChange }: SwitchProps): JSX.Element;

package/lib/components/Switch/Switch.js

@@ -0,0 +1,76 @@
+"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.Switch = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+function Switch({ value = false, disabled = false, onChange }) {
+    const handleClick = () => {
+        if (disabled)
+            return;
+        onChange(!value);
+    };
+    return (react_1.default.createElement(SwitchWrapper, { onClick: handleClick, role: "switch", selected: value, disabled: disabled },
+        react_1.default.createElement(Knob, { selected: value })));
+}
+exports.Switch = Switch;
+const SwitchWrapper = styled_components_1.default.div `
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: var(--switch-border-radius);
+  background-color: ${({ selected, disabled }) => disabled
+    ? 'var(--switch-bg-color-disabled)'
+    : selected
+        ? 'var(--switch-bg-color-selected)'
+        : 'var(--switch-bg-color)'};
+  display: flex;
+  align-items: center;
+  padding: var(--switch-padding);
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  transition: var(--switch-bg-transition);
+
+  ${({ disabled }) => !disabled &&
+    (0, styled_components_1.css) `
+      &:hover {
+        background-color: var(--switch-bg-color-hover);
+      }
+    `}
+
+  &:active {
+    background-color: var(--switch-bg-color-pressed);
+  }
+`;
+const Knob = styled_components_1.default.div `
+  width: var(--switch-knob-width);
+  height: var(--switch-knob-height);
+  border-radius: var(--switch-knob-border-radius);
+  background-color: ${({ selected }) => selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
+  transform: ${({ selected }) => selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
+  transition: var(--switch-knob-transition);
+`;
+//# sourceMappingURL=Switch.js.map

package/lib/components/Switch/variables.d.ts

@@ -0,0 +1 @@
+export declare const switcher: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Switch/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const switcherDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Switch/variables.dark.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switcherDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.switcherDarkMode = (0, styled_components_1.css) `
+    --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
+    --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: all 0.3s; // @presenter Transition
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Switch/variables.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switcher = void 0;
+const styled_components_1 = require("styled-components");
+exports.switcher = (0, styled_components_1.css) `
+    --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
+    --switch-knob-bg-color: var(--color-white); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: transform 0.3s; // @presenter Transition
+`;
+//# sourceMappingURL=variables.js.map

package/lib/core/styles/dark.js

@@ -10,6 +10,7 @@ const variables_dark_5 = require("../../components/Segmented/variables.dark");
 const variables_dark_6 = require("../../icons/CheckboxIcon/variables.dark");
 const variables_dark_7 = require("../../components/Tag/variables.dark");
 const variables_dark_8 = require("../../components/StatusCode/variables.dark");
+const variables_dark_9 = require("../../components/Switch/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -299,6 +300,8 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_2.mermaidDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
+  ${variables_dark_9.switcherDarkMode}
+
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -36,6 +36,7 @@ const variables_30 = require("../../components/UserMenu/variables");
 const variables_31 = require("../../components/Tags/variables");
 const variables_32 = require("../../components/VersionPicker/variables");
 const variables_33 = require("../../components/DatePicker/variables");
+const variables_34 = require("../../components/Switch/variables");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
   /**
@@ -1177,6 +1178,7 @@ exports.styles = (0, styled_components_1.css) `
     ${icon}
     ${tree}
     ${variables_29.segmented}
+    ${variables_34.switcher}
     ${variables_14.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}

package/lib/core/types/search.d.ts

@@ -1,4 +1,4 @@
-import type { REDOCLY_ROUTE_RBAC } from '@redocly/config';
+import type { ItemBadge, REDOCLY_ROUTE_RBAC } from '@redocly/config';
 import type { ProductConfig } from '../../config';
 export type OperationParameter = {
     name: string | string[];
@@ -28,4 +28,5 @@ export type SearchDocument = {
         slug?: string;
         fsPath?: string;
     };
+    badges?: ItemBadge[];
 };

package/lib/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/JsonViewer/JsonViewer';
 export * from './components/Tag/Tag';
 export * from './components/TableOfContent/TableOfContent';
 export * from './components/ColorModeSwitcher/ColorModeSwitcher';
+export * from './components/Switch/Switch';
 export * from './components/Select/Select';
 export * from './components/Badge/Badge';
 export * from './components/Dropdown/Dropdown';

package/lib/index.js

@@ -35,6 +35,7 @@ __exportStar(require("./components/JsonViewer/JsonViewer"), exports);
 __exportStar(require("./components/Tag/Tag"), exports);
 __exportStar(require("./components/TableOfContent/TableOfContent"), exports);
 __exportStar(require("./components/ColorModeSwitcher/ColorModeSwitcher"), exports);
+__exportStar(require("./components/Switch/Switch"), exports);
 __exportStar(require("./components/Select/Select"), exports);
 __exportStar(require("./components/Badge/Badge"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.38.0",
+  "version": "0.38.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Badge/Badge.tsx

@@ -18,7 +18,7 @@ const BadgeComponent = styled.span<BadgeProps>`
   vertical-align: middle;
   line-height: var(--line-height-base);
   color: var(--badge-text-color);
-  background-color: var(--badge-bg-color);
+  background-color: ${({ color }) => color || 'var(--badge-bg-color)'};
   border-radius: var(--badge-border-radius);
   margin: 0 0 0 0.5em;
   font-size: var(--font-size-base);

package/src/components/Feedback/Mood.tsx

@@ -124,12 +124,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
           <StyledMandatoryFieldContainer>
             <Button
               type="button"
-              variant={score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary'}
               size="medium"
+              variant={score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary'}
+              tone={score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default'}
               onClick={() => {
-                setScore(MOOD_STATES.SATISFIED);
+                setScore(MOOD_STATES.DISSATISFIED);
               }}
-              icon={<FaceSatisfiedIcon />}
+              icon={<FaceDissatisfiedIcon />}
             />
             <Button
               type="button"
@@ -142,13 +143,12 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             />
             <Button
               type="button"
+              variant={score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary'}
               size="medium"
-              variant={score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary'}
-              tone={score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default'}
               onClick={() => {
-                setScore(MOOD_STATES.DISSATISFIED);
+                setScore(MOOD_STATES.SATISFIED);
               }}
-              icon={<FaceDissatisfiedIcon />}
+              icon={<FaceSatisfiedIcon />}
             />
           </StyledMandatoryFieldContainer>
         </StyledFormMandatoryFields>

package/src/components/Search/SearchItem.tsx

@@ -56,6 +56,13 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
         <SearchItemTitleWrapper>
           <SearchItemTitle>{highlight(item.title)}</SearchItemTitle>
           {item.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+          {item.badges
+            ? item.badges.map(({ name, color }) => (
+                <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>
+                  {name}
+                </SearchItemBadge>
+              ))
+            : null}
         </SearchItemTitleWrapper>
         {Array.isArray(item.text) ? (
           <SearchItemDescription>{highlight(item.text)}</SearchItemDescription>

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+export type SwitchProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+export function Switch({ value = false, disabled = false, onChange }: SwitchProps): JSX.Element {
+  const handleClick = () => {
+    if (disabled) return;
+    onChange(!value);
+  };
+
+  return (
+    <SwitchWrapper onClick={handleClick} role="switch" selected={value} disabled={disabled}>
+      <Knob selected={value} />
+    </SwitchWrapper>
+  );
+}
+
+const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: var(--switch-border-radius);
+  background-color: ${({ selected, disabled }) =>
+    disabled
+      ? 'var(--switch-bg-color-disabled)'
+      : selected
+      ? 'var(--switch-bg-color-selected)'
+      : 'var(--switch-bg-color)'};
+  display: flex;
+  align-items: center;
+  padding: var(--switch-padding);
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  transition: var(--switch-bg-transition);
+
+  ${({ disabled }) =>
+    !disabled &&
+    css`
+      &:hover {
+        background-color: var(--switch-bg-color-hover);
+      }
+    `}
+
+  &:active {
+    background-color: var(--switch-bg-color-pressed);
+  }
+`;
+
+const Knob = styled.div<{ selected: boolean }>`
+  width: var(--switch-knob-width);
+  height: var(--switch-knob-height);
+  border-radius: var(--switch-knob-border-radius);
+  background-color: ${({ selected }) =>
+    selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
+  transform: ${({ selected }) =>
+    selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
+  transition: var(--switch-knob-transition);
+`;

package/src/components/Switch/variables.dark.ts

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+export const switcherDarkMode = css`
+    --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
+    --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: all 0.3s; // @presenter Transition
+`;

package/src/components/Switch/variables.ts

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+export const switcher = css`
+    --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
+    --switch-knob-bg-color: var(--color-white); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: transform 0.3s; // @presenter Transition
+`;

package/src/core/styles/dark.ts

@@ -8,6 +8,7 @@ import { segmentedButtonsDarkMode } from '@redocly/theme/components/Segmented/va
 import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.dark';
 import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
+import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -299,6 +300,8 @@ export const darkMode = css`
   ${mermaidDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
+  ${switcherDarkMode}
+
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -34,6 +34,7 @@ import { userMenu } from '@redocly/theme/components/UserMenu/variables';
 import { httpTag } from '@redocly/theme/components/Tags/variables';
 import { versionPicker } from '@redocly/theme/components/VersionPicker/variables';
 import { datePicker } from '@redocly/theme/components/DatePicker/variables'
+import { switcher } from '@redocly/theme/components/Switch/variables';
 
 
 const themeColors = css`
@@ -1200,6 +1201,7 @@ export const styles = css`
     ${icon}
     ${tree}
     ${segmented}
+    ${switcher}
     ${checkbox}
     ${feedback}
     ${scorecard}

package/src/core/types/search.ts

@@ -1,4 +1,4 @@
-import type { REDOCLY_ROUTE_RBAC } from '@redocly/config';
+import type { ItemBadge, REDOCLY_ROUTE_RBAC } from '@redocly/config';
 import type { ProductConfig } from '@redocly/theme/config';
 
 export type OperationParameter = {
@@ -25,4 +25,5 @@ export type SearchDocument = {
   product?: ProductConfig;
   'redocly::teams-rbac'?: { [x: string]: string };
   [REDOCLY_ROUTE_RBAC]?: { slug?: string; fsPath?: string };
+  badges?: ItemBadge[];
 };

package/src/index.ts

@@ -7,6 +7,7 @@ export * from '@redocly/theme/components/JsonViewer/JsonViewer';
 export * from '@redocly/theme/components/Tag/Tag';
 export * from '@redocly/theme/components/TableOfContent/TableOfContent';
 export * from '@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher';
+export * from '@redocly/theme/components/Switch/Switch';
 export * from '@redocly/theme/components/Select/Select';
 export * from '@redocly/theme/components/Badge/Badge';
 export * from '@redocly/theme/components/Dropdown/Dropdown';