@redocly/theme 0.0.0-react18-20231120182601

package/lib/utils/jsonToHtml.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLines = exports.jsonToHTML = void 0;
+// Moved from reference-docs
+let level = 0;
+let line = 1;
+const ellipsis = '<span class="ellipsis"></span>';
+const colon = '<span class="colon">: </span>';
+function jsonToHTML(json, maxExpandLevel, startLine = 1) {
+    level = 0;
+    line = startLine;
+    let output = '';
+    output += '<div data-cy="json-sample" class="redoc-json">';
+    output += '<code>';
+    output += getLines(json, maxExpandLevel);
+    output += '</code>';
+    output += '</div>';
+    return output;
+}
+exports.jsonToHTML = jsonToHTML;
+function htmlEncode(t) {
+    return t !== undefined
+        ? t
+            .toString()
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        : '';
+}
+function stringifyStringLiteral(str) {
+    return JSON.stringify(str).slice(1, -1);
+}
+function decorateWithSpan(value, className) {
+    return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
+}
+function punctuation(val) {
+    return '<span class="token punctuation">' + val + '</span>';
+}
+function collapser(maxExpandLevel) {
+    const collapsed = level > maxExpandLevel ? 'expand' : 'collapse';
+    return `<button class="collapser" aria-label="${collapsed}"></button>`;
+}
+function getLines(json, maxExpandLevel) {
+    const collapsibleLines = [];
+    const lines = valueToHTML(json, maxExpandLevel, 'root');
+    let nextLine = lines.next();
+    while (!nextLine.done) {
+        collapsibleLines.push(nextLine.value);
+        nextLine = lines.next();
+    }
+    collapsibleLines.push(nextLine.value);
+    return collapsibleLines.join('\n');
+}
+exports.getLines = getLines;
+function* valueToHTML(value, maxExpandLevel, context) {
+    const valueType = typeof value;
+    if (value === undefined || value === null) {
+        return decorateWithSpan('null', 'token keyword');
+    }
+    else if (value && value.constructor === Array) {
+        const length = typeof value.length === 'number' ? value.length : 0;
+        if (!length) {
+            return punctuation('[ ]');
+        }
+        level++;
+        yield context === 'root'
+            ? `<span data-line="${line++}">${punctuation('[')}</span>`
+            : punctuation('[');
+        for (const line of arrayToHTML(value, length, maxExpandLevel)) {
+            yield line;
+        }
+        level--;
+        return `<span data-line="${line++}">${punctuation(']')}</span>`;
+    }
+    else if (value && value.constructor === Date) {
+        return decorateWithSpan('"' + value.toISOString() + '"', 'token string');
+    }
+    else if (valueType === 'object') {
+        const keys = Object.keys(value);
+        if (!keys.length) {
+            return punctuation('{ }');
+        }
+        level++;
+        yield context === 'root'
+            ? `<span data-line="${line++}">${punctuation('{')}</span>`
+            : punctuation('{');
+        for (const line of objectToHTML(value, keys, maxExpandLevel)) {
+            yield line;
+        }
+        level--;
+        return `<span data-line="${line++}">${punctuation('}')}</span>`;
+    }
+    else if (valueType === 'number') {
+        return decorateWithSpan(value, 'token number');
+    }
+    else if (valueType === 'string') {
+        if (/^(http|https):\/\/[^\s]+$/.test(value)) {
+            return (decorateWithSpan('"', 'token string') +
+                `<a href="${encodeURI(value)}">` +
+                htmlEncode(stringifyStringLiteral(value)) +
+                '</a>' +
+                decorateWithSpan('"', 'token string'));
+        }
+        else {
+            return decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
+        }
+    }
+    else if (valueType === 'boolean') {
+        return decorateWithSpan(value, 'token boolean');
+    }
+}
+function getLineTemplate({ isFirstKey, isLastKey, nextLine, context, lineTemplate, maxExpandLevel, }) {
+    let lineValue = isFirstKey ? `${ellipsis}<span class="${context} collapsible">` : '';
+    // Create hoverable
+    lineValue += `<span data-line="${line++}" class="${level > maxExpandLevel ? 'hoverable collapsed' : 'hoverable'}">`;
+    // Add collapser button if item has nested lines
+    lineValue += (!nextLine.done && collapser(maxExpandLevel)) || '';
+    lineValue += lineTemplate;
+    lineValue += nextLine.value;
+    // Add punctuation in case we dont have more nested lines and it is not last item
+    lineValue += nextLine.done && !isLastKey ? punctuation(',') : '';
+    // Close hoverable if we dont have nested lines
+    lineValue += nextLine.done ? '</span>' : '';
+    // Close collapsible if value is single line and we are on last item
+    lineValue += nextLine.done && isLastKey ? '</span>' : '';
+    return lineValue;
+}
+function* arrayToHTML(array, arrayLength, maxExpandLevel) {
+    for (let i = 0; i < arrayLength; i++) {
+        const lines = valueToHTML(array[i], maxExpandLevel, 'array');
+        const isFirstKey = i === 0;
+        const isLastKey = i === arrayLength - 1;
+        let nextLine = lines.next();
+        yield getLineTemplate({
+            context: 'array',
+            isFirstKey,
+            isLastKey,
+            nextLine,
+            lineTemplate: '',
+            maxExpandLevel,
+        });
+        nextLine = lines.next();
+        while (!nextLine.done) {
+            yield nextLine.value;
+            nextLine = lines.next();
+        }
+        if (nextLine.value) {
+            // Close hoverable and collapsible (if last array item)
+            yield `${nextLine.value}${i < arrayLength - 1 ? punctuation(',') : '</span>'}</span>`;
+        }
+    }
+}
+function* objectToHTML(object, keys, maxExpandLevel) {
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const lines = valueToHTML(object[key], maxExpandLevel, 'object');
+        const isFirstKey = i === 0;
+        const isLastKey = i === keys.length - 1;
+        let nextLine = lines.next();
+        yield getLineTemplate({
+            context: 'obj',
+            isFirstKey,
+            isLastKey,
+            nextLine,
+            lineTemplate: `<span class="property token string">"${htmlEncode(key)}"</span>${colon}`,
+            maxExpandLevel,
+        });
+        nextLine = lines.next();
+        while (!nextLine.done) {
+            yield nextLine.value;
+            nextLine = lines.next();
+        }
+        if (nextLine.value) {
+            // Close hoverable and collapsible (if last field)
+            yield `${nextLine.value}${isLastKey ? '</span>' : punctuation(',')}</span>`;
+        }
+    }
+}
+//# sourceMappingURL=jsonToHtml.js.map

package/lib/utils/media-css.d.ts

@@ -0,0 +1,12 @@
+export type MediaQueries = {
+    print: string;
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare function generateMediaQueries(breakpoints: Omit<MediaQueries, 'print'>): MediaQueries;

package/lib/utils/media-css.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMediaQueries = exports.breakpoints = void 0;
+exports.breakpoints = { small: '50rem', medium: '85rem', large: '105rem' };
+function generateMediaQueries(breakpoints) {
+    const result = { print: '@media print' };
+    for (const [key, value] of Object.entries(breakpoints)) {
+        result[key] = `@media screen and (min-width: ${value})`;
+    }
+    return result;
+}
+exports.generateMediaQueries = generateMediaQueries;
+//# sourceMappingURL=media-css.js.map

package/lib/utils/replaceHashInColor.d.ts

@@ -0,0 +1 @@
+export declare function replaceHashInColor(color: string): string;

package/lib/utils/replaceHashInColor.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceHashInColor = void 0;
+function replaceHashInColor(color) {
+    return color.replace('#', '%23');
+}
+exports.replaceHashInColor = replaceHashInColor;
+//# sourceMappingURL=replaceHashInColor.js.map

package/lib/utils/tags-parser.d.ts

@@ -0,0 +1 @@
+export declare const slug: (value: string) => string;

package/lib/utils/tags-parser.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slug = void 0;
+const slug = (value) => {
+    const matches = value.match(/[a-zA-Z0-9_-]*/g);
+    const result = matches === null || matches === void 0 ? void 0 : matches.filter((value) => value !== '').join('-').toLowerCase();
+    return result !== null && result !== void 0 ? result : value;
+};
+exports.slug = slug;
+//# sourceMappingURL=tags-parser.js.map

package/lib/utils/text-transform.d.ts

@@ -0,0 +1 @@
+export declare function capitalize(input: string): string;

package/lib/utils/text-transform.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+function capitalize(input) {
+    return input.charAt(0).toUpperCase() + input.slice(1);
+}
+exports.capitalize = capitalize;
+//# sourceMappingURL=text-transform.js.map

package/lib/utils/theme-helpers.d.ts

@@ -0,0 +1,4 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+export declare function getTypographyCssRulesByComponentName(componentName: string, fallbackName?: string): Record<string, string>;
+export declare function typography(componentName: string, fallbackName?: string): FlattenSimpleInterpolation;
+export declare function generateCodeBlockTokens(): FlattenSimpleInterpolation | string;

package/lib/utils/theme-helpers.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
+const styled_components_1 = require("styled-components");
+var Token;
+(function (Token) {
+    Token["Comment"] = "comment";
+    Token["Prolog"] = "prolog";
+    Token["Doctype"] = "doctype";
+    Token["Cdata"] = "cdata";
+    Token["Punctuation"] = "punctuation";
+    Token["Property"] = "property";
+    Token["Tag"] = "tag";
+    Token["Number"] = "number";
+    Token["Constant"] = "constant";
+    Token["Symbol"] = "symbol";
+    Token["Boolean"] = "boolean";
+    Token["Selector"] = "selector";
+    Token["String"] = "string";
+    Token["Char"] = "char";
+    Token["Builtin"] = "builtin";
+    Token["Inserted"] = "inserted";
+    Token["Operator"] = "operator";
+    Token["Entity"] = "entity";
+    Token["Url"] = "url";
+    Token["Variable"] = "variable";
+    Token["Atrule"] = "atrule";
+    Token["AttrValue"] = "attr-value";
+    Token["AttrName"] = "attr-name";
+    Token["Keyword"] = "keyword";
+    Token["Regex"] = "regex";
+    Token["Important"] = "important";
+    Token["Bold"] = "bold";
+    Token["Italic"] = "italic";
+    Token["Deleted"] = "deleted";
+})(Token || (Token = {}));
+const typographyProperties = Object.entries({
+    fontSize: 'font-size',
+    fontWeight: 'font-weight',
+    fontFamily: 'font-family',
+    lineHeight: 'line-height',
+    color: 'text-color',
+    textTransform: 'text-transform',
+});
+function getTypographyCssRulesByComponentName(componentName, fallbackName) {
+    const result = {};
+    for (const [styledPropertyName, cssPropertyName] of typographyProperties) {
+        const cssVariable = `--${componentName}-${cssPropertyName}`;
+        const fallbackVariable = fallbackName ? `,var(--${fallbackName}-${cssPropertyName})` : '';
+        result[styledPropertyName] = `var(${cssVariable}${fallbackVariable})`;
+    }
+    return result;
+}
+exports.getTypographyCssRulesByComponentName = getTypographyCssRulesByComponentName;
+function typography(componentName, fallbackName) {
+    return (0, styled_components_1.css) `
+    ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
+  `;
+}
+exports.typography = typography;
+function generateCodeBlockTokens() {
+    let res = '';
+    for (const token of Object.values(Token)) {
+        const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
+        res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
+    }
+    return (0, styled_components_1.css) `
+    pre& {
+      color: var(--code-block-tokens-default-color);
+    }
+    ${res}
+  `;
+}
+exports.generateCodeBlockTokens = generateCodeBlockTokens;
+//# sourceMappingURL=theme-helpers.js.map

package/lib/utils/urls.d.ts

@@ -0,0 +1,11 @@
+export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
+export declare function withPathPrefix(url: string): string;
+export declare function withoutPathPrefix(pathname: string): string;
+export declare function withoutHash(url: undefined | null): undefined;
+export declare function withoutHash(url: string): string;
+export declare function withoutHash(url: string | undefined): string | undefined;
+export declare function getPathPrefix(): string;
+export declare function normalizePathPrefix(prefix: string): string;
+export declare function addLeadingSlash(url: string): string;
+export declare function removeTrailingSlash(url: string): string;
+export declare function removeLeadingSlash(url: string): string;

package/lib/utils/urls.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeLeadingSlash = exports.removeTrailingSlash = exports.addLeadingSlash = exports.normalizePathPrefix = exports.getPathPrefix = exports.withoutHash = exports.withoutPathPrefix = exports.withPathPrefix = exports.combineUrls = void 0;
+function combineUrls(baseURL, ...relativeURLs) {
+    let res = baseURL;
+    for (let relativeURL of relativeURLs) {
+        res = relativeURL
+            ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
+            : res;
+    }
+    return res;
+}
+exports.combineUrls = combineUrls;
+function withPathPrefix(url) {
+    return combineUrls(getPathPrefix(), url);
+}
+exports.withPathPrefix = withPathPrefix;
+function withoutPathPrefix(pathname) {
+    const pathPrefix = getPathPrefix();
+    return pathPrefix && pathname.startsWith(pathPrefix)
+        ? pathname.slice(pathPrefix.length)
+        : pathname;
+}
+exports.withoutPathPrefix = withoutPathPrefix;
+function withoutHash(url) {
+    if (url == null)
+        return undefined;
+    return url.split('#')[0];
+}
+exports.withoutHash = withoutHash;
+function getPathPrefix() {
+    if (process.env.REDOCLY_PREFIX_PATHS) {
+        return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
+    }
+    return '';
+}
+exports.getPathPrefix = getPathPrefix;
+function normalizePathPrefix(prefix) {
+    const withoutTrailing = removeTrailingSlash(prefix);
+    return addLeadingSlash(withoutTrailing === '.' ? '' : withoutTrailing);
+}
+exports.normalizePathPrefix = normalizePathPrefix;
+function addLeadingSlash(url) {
+    return url.startsWith('/') ? url : `/${url}`;
+}
+exports.addLeadingSlash = addLeadingSlash;
+function removeTrailingSlash(url) {
+    return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+}
+exports.removeTrailingSlash = removeTrailingSlash;
+function removeLeadingSlash(url) {
+    return url.startsWith('/') ? url.substring(1) : url;
+}
+exports.removeLeadingSlash = removeLeadingSlash;
+//# sourceMappingURL=urls.js.map

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@redocly/theme",
+  "version": "0.0.0-react18-20231120182601",
+  "description": "Shared UI components lib",
+  "keywords": [
+    "theme",
+    "redocly"
+  ],
+  "author": "team@redocly.com",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./config.js": "./lib/config.js",
+    "./config": "./lib/config.js",
+    ".": "./lib/index.js",
+    "./Sidebar/*": "./lib/Sidebar/*.js",
+    "./src/": "./src/"
+  },
+  "peerDependencies": {
+    "lodash.throttle": "^4.1.1",
+    "prismjs": "^1.28.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.10.0",
+    "styled-components": "^5.3.7",
+    "styled-system": "^5.1.5"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-viewport": "^7.5.0",
+    "@storybook/addons": "^7.5.0",
+    "@storybook/core-common": "^7.5.0",
+    "@storybook/node-logger": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/highlight-words-core": "^1.2.1",
+    "@types/jest": "^29.2.1",
+    "@types/jest-when": "^3.5.2",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/node": "^18.11.18",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "@types/styled-components": "^5.1.30",
+    "@types/styled-system": "^5.1.13",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "chromatic": "^6.10.2",
+    "concurrently": "^7.4.0",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "jest-styled-components": "^7.1.1",
+    "jest-when": "^3.5.1",
+    "json-schema-to-ts": "^2.7.2",
+    "lodash.throttle": "^4.1.1",
+    "npm-run-all": "^4.1.5",
+    "react-refresh": "^0.14.0",
+    "react-router-dom": "^6.10.0",
+    "storybook": "^7.5.0",
+    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook-design-token": "3.0.0-beta.6",
+    "styled-components": "^5.3.7",
+    "styled-system": "^5.1.5",
+    "ts-jest": "^29.0.3",
+    "ts-node": "^10.7.0",
+    "ts-node-dev": "^2.0.0",
+    "tsc-alias": "^1.8.2",
+    "tsconfig-paths": "^4.2.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^5.2.2",
+    "webpack": "^5.72.0",
+    "@redocly/portal-types": "1.2.0"
+  },
+  "dependencies": {
+    "@redocly/ajv": "^8.11.0",
+    "copy-to-clipboard": "^3.3.3",
+    "highlight-words-core": "^1.2.2",
+    "hotkeys-js": "^3.10.1",
+    "react-calendar": "4.2.1",
+    "react-date-picker": "10.0.3",
+    "timeago.js": "^4.0.2"
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
+    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "npm run clean && npm run compile",
+    "test": "jest",
+    "test:update": "jest -u",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:coverage:html": "jest --coverage --coverageReporters html",
+    "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "npm run storybook:tokens && storybook build",
+    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
+    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  }
+}

package/src/components/ApiOnboarding/AppCustomAttributes.tsx

@@ -0,0 +1,9 @@
+interface AppCustomAttributesProps {
+  onChange: (value: Record<string, string>) => void;
+}
+
+// Do not remove this component. It's for ejecting.
+// Some customers need to add custom attributes to a form in dev onboarding plugin, so they can just eject this component and add those attributes there
+export function AppCustomAttributes(_props: AppCustomAttributesProps) {
+  return null;
+}

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export const Breadcrumb = (props: {
+  label: string;
+  link?: string;
+  isActive: boolean;
+  onClick?: () => void;
+}) => {
+  const { label, link, isActive, onClick } = props;
+
+  return (
+    <BreadcrumbWrapper
+      data-component-name="Breadcrumbs/Breadcrumb"
+      isLink={link != null}
+      isActive={isActive}
+      onClick={onClick}
+    >
+      {link ? (
+        <BreadcrumbLink to={link}>{label}</BreadcrumbLink>
+      ) : (
+        <BreadcrumbText>{label}</BreadcrumbText>
+      )}
+    </BreadcrumbWrapper>
+  );
+};
+
+const BreadcrumbText = styled.div`
+  cursor: default;
+`;
+
+const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
+  border-radius: var(--border-radius);
+
+  ${(props) =>
+    props.isLink &&
+    `
+    &:hover {
+      text-decoration: var(--breadcrumbs-hover-text-decoration);
+    }
+  `}
+
+  ${(props) =>
+    props.isActive &&
+    `
+    color: var(--breadcrumbs-active-text-color);
+  `}
+`;
+
+const BreadcrumbLink = styled(Link)`
+  text-decoration: none;
+  color: var(--breadcrumbs-text-color);
+
+  &:visited {
+    color: var(--breadcrumbs-text-color);
+  }
+`;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useBreadcrumbs } from '@portal/Sidebar/useBreadcrumbs';
+import { telemetry } from '@portal/telemetry';
+import { Breadcrumb } from '@theme/components/Breadcrumbs/Breadcrumb';
+
+export const Breadcrumbs = (props: { className?: string }) => {
+  const breadcrumbs = useBreadcrumbs();
+
+  if (breadcrumbs.length === 0) {
+    return null;
+  }
+
+  return (
+    <Container data-component-name="Breadcrumbs/Breadcrumbs" className={props.className}>
+      {breadcrumbs.map((breadcrumb, idx) => {
+        const isLast = idx === breadcrumbs.length - 1;
+        return (
+          <React.Fragment key={idx}>
+            <Breadcrumb
+              link={breadcrumb.link}
+              label={breadcrumb.label}
+              isActive={isLast}
+              onClick={() => {
+                telemetry.send('breadcrumb_clicked', {
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  total_breadcrumbs: breadcrumbs.length,
+                });
+              }}
+            />
+            {isLast ? null : <span>/</span>}
+          </React.Fragment>
+        );
+      })}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--breadcrumbs-text-color);
+  font-size: var(--breadcrumbs-font-size);
+  flex-wrap: wrap;
+
+  > div {
+    padding: var(--breadcrumbs-padding);
+  }
+
+  > span {
+    padding: var(--breadcrumbs-gap);
+  }
+
+  @media print {
+    display: none;
+  }
+`;

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/components/Breadcrumbs/Breadcrumbs';
+export * from '@theme/components/Breadcrumbs/Breadcrumb';
+export * from '@theme/components/Breadcrumbs/styledVariables';

package/src/components/Breadcrumbs/styledVariables.ts

@@ -0,0 +1,17 @@
+import { css } from 'styled-components';
+
+export const breadcrumbs = css`
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-description); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
+  --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
+  --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
+
+  // @tokens End
+`;