@redocly/theme 0.1.20 → 0.1.21

package/src/Typography/Emphasis.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Emphasis = styled.strong.attrs(() => ({
+  'data-component-name': 'Typography/Emphasis',
+}))`
+  font-weight: var(--font-weight-bold);
+`;

package/src/Typography/H1.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { typography } from '@theme/utils';
+
+export const H1 = styled.h1.attrs(() => ({
+  'data-component-name': 'Headings/H1',
+}))`
+  color: var(--color-content);
+  margin: 0 0 25px;
+
+  ${typography('h1', 'h')};
+`;

package/src/Typography/H2.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { typography } from '@theme/utils';
+
+export const H2 = styled.h2.attrs(() => ({
+  'data-component-name': 'Headings/H2',
+}))`
+  color: var(--color-content);
+  margin: 0 0 20px;
+
+  ${typography('h2', 'h')};
+`;

package/src/Typography/H3.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { typography } from '@theme/utils';
+
+export const H3 = styled.h3.attrs(() => ({
+  'data-component-name': 'Headings/H3',
+}))`
+  color: var(--color-content);
+
+  ${typography('h3', 'h')};
+`;

package/src/Typography/SectionHeader.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const SectionHeader = styled.h2`
+  color: var(--h-color);
+  font-size: 1.75em;
+  font-weight: var(--font-weight-regular);
+  text-align: center;
+  margin: 2.65em 0;
+  padding: 0 20px;
+  font-family: var(--h-font-family);
+`;

package/src/Typography/Typography.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { color, typography as typographySystem, TypographyProps } from 'styled-system';
+
+export const Typography = styled.p.attrs(() => ({
+  'data-component-name': 'Typography/Typography',
+}))<
+  TypographyProps & {
+    color?: string;
+    mt?: string;
+    mb?: string;
+  }
+>`
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+  color: var(--color-content);
+  ${color};
+  margin-top: ${({ mt }) => mt || '1em'};
+  margin-bottom: ${({ mb }) => mb || '1em'};
+  ${typographySystem}
+`;

package/src/Typography/index.ts

@@ -0,0 +1,7 @@
+export * from '@theme/Typography/H1';
+export * from '@theme/Typography/H2';
+export * from '@theme/Typography/H3';
+export * from '@theme/Typography/Emphasis';
+export * from '@theme/Typography/SectionHeader';
+export * from '@theme/Typography/Typography';
+export * from '@theme/Typography/CompactTypography';

package/src/{ui → icons/AlertIcon}/AlertIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IconProps {
+export interface AlertIconProps {
   type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
   className?: string;
 }
 
-function Icon({ type, className }: IconProps) {
+function Icon({ type, className }: AlertIconProps) {
   switch (type) {
     case 'warning':
       return (
@@ -96,7 +96,7 @@ function Icon({ type, className }: IconProps) {
 }
 
 export const AlertIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'ui/AlertIcon',
+  'data-component-name': 'icons/AlertIcon/AlertIcon',
 }))`
   position: absolute;
   left: var(--admonition-padding-horizontal);

package/src/icons/AlertIcon/index.ts

@@ -0,0 +1,2 @@
+export { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
+export type { AlertIconProps } from '@theme/icons/AlertIcon/AlertIcon';

package/src/{ui/Arrow.tsx → icons/ArrowIcon/ArrowIcon.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export interface ArrowProps {
-  direction?: string;
+export interface ArrowIconProps {
+  direction?: 'up' | 'right' | 'left' | 'down';
 }
 
-function directionToTransform({ direction }: ArrowProps) {
+function directionToTransform({ direction }: ArrowIconProps) {
   switch (direction) {
     case 'up':
       return 180;
@@ -19,14 +19,14 @@ function directionToTransform({ direction }: ArrowProps) {
 }
 
 const Icon = ({ className }: { className?: string }) => (
-  <span data-component-name="ui/Arrow/Arrow">
+  <span data-component-name="icons/ArrowIcon/ArrowIcon">
     <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 5" className={className}>
       <path d="M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" />
     </svg>
   </span>
 );
 
-export const Arrow = styled(Icon)`
+export const ArrowIcon = styled(Icon)`
   width: var(--sidebar-chevron-size);
   height: var(--sidebar-chevron-size);
   fill: var(--sidebar-chevron-color);

package/src/icons/ArrowIcon/index.ts

@@ -0,0 +1,2 @@
+export { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
+export type { ArrowIconProps } from '@theme/icons/ArrowIcon/ArrowIcon';

package/src/icons/index.ts

@@ -1 +1,3 @@
 export * from '@theme/icons/ShelfIcon';
+export * from '@theme/icons/AlertIcon';
+export * from '@theme/icons/ArrowIcon';

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from './Button';
 export * from './CopyButton';
 export * from './JsonViewer';
-export * from './Headings';
+export * from './Typography';
 export * from './SidebarLogo';
 export * from './CodeBlock';
 export * from './SamplesPanelControls';

package/src/mocks/constants/index.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_THEME_NAME = '@redocly/theme';
+export const USER_THEME_ALIAS = '@theme';

package/src/mocks/hooks/index.ts

@@ -0,0 +1,17 @@
+interface RawTheme {
+  name: string;
+  settings?: any;
+}
+
+export function useThemeSettings(name: string): RawTheme['settings'] {
+  return {
+    name,
+    settings: {
+      toc: { header: 'header', hide: false },
+      navigation: {
+        nextPageLink: { label: 'next page' },
+        previousPageLink: { label: 'prev page' },
+      },
+    },
+  };
+}

package/src/ui/Jumbotron.tsx

@@ -1,7 +1,7 @@
 import { space } from 'styled-system';
 import styled from 'styled-components';
 
-import { H1, H2 } from '@theme/ui/Typography';
+import { H1, H2 } from '@theme/Typography';
 import { Background } from '@theme/ui/Background';
 
 export const Jumbotron = styled(Background).attrs(() => ({

package/src/ui/index.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
 
 export * from '@theme/ui/Tiles';
-export * from '@theme/ui/AlertIcon';
-export * from '@theme/ui/Arrow';
 export * from '@theme/ui/Background';
 export * from '@theme/ui/Box';
-export * from '@theme/ui/Button';
 export * from '@theme/ui/Dropdown';
 export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
-export * from '@theme/ui/Typography';
 export * from '@theme/ui/UniversalLink';
 
 export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>

package/ui/Jumbotron.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Jumbotron = void 0;
 var styled_system_1 = require("styled-system");
 var styled_components_1 = __importDefault(require("styled-components"));
-var Typography_1 = require("../ui/Typography");
+var Typography_1 = require("../Typography");
 var Background_1 = require("../ui/Background");
 exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).attrs(function () { return ({
     'data-component-name': 'ui/Jumbotron',

package/ui/index.d.ts

@@ -1,14 +1,10 @@
 import React from 'react';
 export * from '../ui/Tiles';
-export * from '../ui/AlertIcon';
-export * from '../ui/Arrow';
 export * from '../ui/Background';
 export * from '../ui/Box';
-export * from '../ui/Button';
 export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
-export * from '../ui/Typography';
 export * from '../ui/UniversalLink';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/ui/index.js

@@ -16,15 +16,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyLayout = exports.LandingLayout = void 0;
 __exportStar(require("../ui/Tiles"), exports);
-__exportStar(require("../ui/AlertIcon"), exports);
-__exportStar(require("../ui/Arrow"), exports);
 __exportStar(require("../ui/Background"), exports);
 __exportStar(require("../ui/Box"), exports);
-__exportStar(require("../ui/Button"), exports);
 __exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
-__exportStar(require("../ui/Typography"), exports);
 __exportStar(require("../ui/UniversalLink"), exports);
 var LandingLayout = function (_a) {
     var children = _a.children;

package/Headings/Headings.d.ts

@@ -1,3 +0,0 @@
-export declare const H1: import("styled-components").StyledComponent<"h1", any, {}, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", any, {}, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/Headings/Headings.js

@@ -1,16 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H3 = exports.H2 = exports.H1 = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var utils_1 = require("../utils");
-exports.H1 = styled_components_1.default.h1(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
-exports.H2 = styled_components_1.default.h2(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
-exports.H3 = styled_components_1.default.h3(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
-var templateObject_1, templateObject_2, templateObject_3;

package/Headings/index.d.ts

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

package/JsonViewer/styled.d.ts

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

package/JsonViewer/styled.js

@@ -1,10 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsonStyles = void 0;
-var styled_components_1 = require("styled-components");
-exports.jsonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n\n    & > .collapser {\n      display: none;\n      pointer-events: none;\n    }\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n\n    & > .collapser {\n      display: none;\n      pointer-events: none;\n    }\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"])));
-var templateObject_1;

package/Markdown/CodeSample/styled.d.ts

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

package/Markdown/CodeSample/styled.js

@@ -1,85 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
-exports.CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
-exports.DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"])));
-// const lightStyleTokens = css`
-//   .token.comment,
-//   .token.prolog,
-//   .token.doctype,
-//   .token.cdata {
-//     color: #999988;
-//     font-style: italic;
-//   }
-//   .token.namespace {
-//     opacity: 0.7;
-//   }
-//   .token.string,
-//   .token.attr-value {
-//     color: #e3116c;
-//   }
-//   .token.punctuation,
-//   .token.operator {
-//     color: #393a34; /* no highlight */
-//   }
-//   .token.entity,
-//   .token.url,
-//   .token.symbol,
-//   .token.number,
-//   .token.boolean,
-//   .token.variable,
-//   .token.constant,
-//   .token.property,
-//   .token.regex,
-//   .token.inserted {
-//     color: #36acaa;
-//   }
-//   .token.atrule,
-//   .token.keyword,
-//   .token.attr-name,
-//   .language-autohotkey .token.selector {
-//     color: #00a4db;
-//   }
-//   .token.function,
-//   .token.deleted,
-//   .language-autohotkey .token.tag {
-//     color: #9a050f;
-//   }
-//   .token.tag,
-//   .token.selector,
-//   .language-autohotkey .token.keyword {
-//     color: #00009f;
-//   }
-// `;
-var darkStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n  .token.deleted {\n    color: red;\n  }\n"])));
-exports.Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", ";\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\n  }\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, darkStyleTokens);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/src/Headings/Headings.ts

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-
-import { typography } from '@theme/utils';
-
-export const H1 = styled.h1`
-  color: var(--color-content);
-  margin: 0 0 25px;
-
-  ${typography('h1', 'h')};
-`;
-
-export const H2 = styled.h2`
-  color: var(--color-content);
-  margin: 0 0 20px;
-
-  ${typography('h2', 'h')};
-`;
-
-export const H3 = styled.h3`
-  color: var(--color-content);
-
-  ${typography('h3', 'h')};
-`;

package/src/Headings/index.ts

@@ -1 +0,0 @@
-export * from '@theme/Headings/Headings';

package/src/JsonViewer/styled.ts

@@ -1,110 +0,0 @@
-import { css } from 'styled-components';
-
-export const jsonStyles = css`
-  .redoc-json code {
-    background-color: var(--samples-panel-controls-background-color);
-    color: var(--color-content-inverse);
-    padding: inherit;
-    border: none;
-
-    & > .collapser {
-      display: none;
-      pointer-events: none;
-    }
-  }
-
-  contain: content;
-  overflow-x: auto;
-  padding: 10px;
-  border-radius: var(--global-border-radius);
-  background-color: var(--samples-panel-controls-background-color);
-  color: var(--color-content-inverse);
-  font-size: var(--code-font-size);
-  font-family: var(--code-font-family);
-  white-space: var(--code-wrap, pre);
-
-  .callback-function {
-    color: gray;
-  }
-
-  .collapser:after {
-    content: '-';
-    cursor: pointer;
-  }
-
-  .collapsed > .collapser:after {
-    content: '+';
-    cursor: pointer;
-  }
-
-  .ellipsis:after {
-    content: ' … ';
-  }
-
-  .collapsible {
-    margin-left: 2ch;
-  }
-
-  .hoverable {
-    padding: 1px 2px;
-  }
-
-  .hovered {
-    background-color: rgba(235, 238, 249, 1);
-  }
-
-  .collapser {
-    background-color: transparent;
-    border: 0;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 15px;
-    height: 15px;
-    position: absolute;
-    top: 4px;
-    left: -1.5em;
-    cursor: default;
-    user-select: none;
-    -webkit-user-select: none;
-    padding: 2px;
-    font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
-    &:focus {
-      outline: #fff dotted 1px;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0 0 0 26px;
-  }
-
-  li {
-    position: relative;
-    display: block;
-  }
-
-  .hoverable {
-    display: inline-block;
-  }
-
-  .selected {
-    outline-width: 1px;
-    outline-style: dotted;
-  }
-
-  .collapsed > .collapsible {
-    display: none;
-  }
-
-  .ellipsis {
-    display: none;
-  }
-
-  .collapsed > .ellipsis {
-    display: inherit;
-  }
-`;