@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Catalog/useCatalog.js

@@ -0,0 +1,317 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalog = void 0;
+const React = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const telemetry_1 = require("../../mocks/telemetry");
+const usePageData_1 = require("../../mocks/hooks/usePageData");
+const utils_1 = require("../../utils");
+function useCatalog(items, config) {
+    var _a;
+    const location = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const pageData = (0, usePageData_1.usePageData)();
+    const searchParams = useSearchParams(location);
+    const [filtersState, setFiltersState] = React.useState(() => {
+        var _a;
+        return ((_a = config.filters) !== null && _a !== void 0 ? _a : []).map((f) => {
+            var _a, _b;
+            if (f.type === 'date-range') {
+                const [from, to] = (_b = (_a = searchParams.get(f.property)) === null || _a === void 0 ? void 0 : _a.split('--')) !== null && _b !== void 0 ? _b : [];
+                if (!from && !to)
+                    return {};
+                return { from, to };
+            }
+            return new Set(searchParams.getAll(f.property));
+        });
+    });
+    const [filterTerm, setFilterTerm] = React.useState(() => searchParams.get('filter') || '');
+    const filtersWithOptions = React.useMemo(() => collectFilterOptions(items, config.filters), [items, config.filters]);
+    const customFields = (_a = pageData === null || pageData === void 0 ? void 0 : pageData.props) === null || _a === void 0 ? void 0 : _a.customFields;
+    const normalizedItems = React.useMemo(() => normalizeItems(items, config, customFields || {}), [items, config, customFields]);
+    const toggleOption = React.useCallback((filterIdx, option) => {
+        setFiltersState((prev) => {
+            const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set();
+            if (!(newFilterOptions instanceof Set))
+                return prev;
+            if (newFilterOptions.has(option)) {
+                newFilterOptions.delete(option);
+            }
+            else {
+                newFilterOptions.add(option);
+            }
+            return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
+        });
+        telemetry_1.telemetry.send('catalog_filter_changed', { type: 'toggle' });
+        window.scrollTo(0, 0);
+    }, []);
+    const selectOption = React.useCallback((filterIdx, option) => {
+        setFiltersState((prev) => {
+            const newFilterOptions = prev[filterIdx] instanceof Set
+                ? new Set(option ? [option] : [])
+                : {
+                    from: option === null || option === void 0 ? void 0 : option.from,
+                    to: option === null || option === void 0 ? void 0 : option.to,
+                };
+            const filter = filtersWithOptions[filterIdx];
+            return prev.map((f, idx) => idx === filterIdx
+                ? newFilterOptions
+                : filtersWithOptions[idx].parentFilter === filter.property
+                    ? new Set()
+                    : f);
+        });
+        telemetry_1.telemetry.send('catalog_filter_changed', { type: 'select' });
+        window.scrollTo(0, 0);
+    }, [filtersWithOptions]);
+    React.useEffect(() => {
+        filtersState.forEach((filterValues, filterIdx) => {
+            var _a;
+            const filter = (_a = config.filters) === null || _a === void 0 ? void 0 : _a[filterIdx];
+            if (!filter)
+                return;
+            searchParams.delete(filter.property);
+            if (filterValues instanceof Set) {
+                filterValues.forEach((value) => {
+                    searchParams.append(filter.property, value);
+                });
+            }
+            else if (filterValues.from || filterValues.to) {
+                searchParams.append(filter.property, `${filterValues.from || ''}--${filterValues.to || ''}`);
+                return;
+            }
+        });
+        if (filterTerm) {
+            searchParams.set('filter', filterTerm);
+        }
+        else {
+            searchParams.delete('filter');
+        }
+        const newSearch = searchParams.toString();
+        if (newSearch === location.search.substring(1))
+            return;
+        navigate({ search: newSearch });
+    }, [config.filters, searchParams, filtersState, filterTerm, navigate, location]);
+    // filterParents[i] is a Set with indexes of parents of this filter
+    const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
+    return React.useMemo(() => {
+        const filters = filtersWithOptions.map((filter, idx) => {
+            var _a, _b, _c, _d;
+            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!((_d = filtersState[idx]) === null || _d === void 0 ? void 0 : _d.from) }));
+        });
+        const filteredItems = filterItems(normalizedItems, filters, filterTerm);
+        // add more information to filters state which is known only after filtering items
+        const resolvedFilters = filters.map((filter, idx) => {
+            var _a, _b;
+            const parentFilterIdx = filters.findIndex((f) => f.property === filter.parentFilter);
+            const parentUsed = filter.parentFilter
+                ? ((_b = (_a = filtersState[parentFilterIdx]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0 ||
+                    !!filtersState[parentFilterIdx].from
+                : true;
+            // we filter items with all the other independent filters current state
+            // then we can calculate the options for this filter after other filters are applied
+            // we need it to have correct numbers but also to eliminate options which are not available due to other filters
+            const otherIndependentFilters = filters.filter((_f, i) => { var _a; return i !== idx && !((_a = filterParents[idx]) === null || _a === void 0 ? void 0 : _a.has(i)); });
+            const filteredWithOtherFilters = filterItems(normalizedItems, otherIndependentFilters, filterTerm);
+            // collect filter options for this filter, this is probably not optimal but perf is not critical here
+            const adjustedFilterOptions = collectFilterOptions(filteredWithOtherFilters.map((m) => ({ metadata: m })), config.filters);
+            return Object.assign(Object.assign({}, filter), { parentUsed, filteredOptions: adjustedFilterOptions[idx].options });
+        });
+        const groups = config.groupByFirstFilter
+            ? groupByFirstFilter(resolvedFilters, filteredItems)
+            : [{ title: 'APIs', items: filteredItems }];
+        return {
+            groups,
+            filters: resolvedFilters,
+            setFilterTerm: (newTerm) => {
+                setFilterTerm(newTerm);
+                telemetry_1.telemetry.send('catalog_filter_changed', { type: 'term' });
+            },
+            filterTerm,
+        };
+    }, [
+        filtersWithOptions,
+        normalizedItems,
+        filterTerm,
+        config.groupByFirstFilter,
+        config.filters,
+        filtersState,
+        toggleOption,
+        selectOption,
+        filterParents,
+    ]);
+}
+exports.useCatalog = useCatalog;
+function groupByFirstFilter(filters, filteredItems) {
+    return filters[0].options
+        .map((option) => ({
+        title: option.value,
+        items: filteredItems.filter((item) => {
+            const itemValue = (item === null || item === void 0 ? void 0 : item[filters[0].property]) || filters[0].missingCategoryName || 'Others';
+            if (Array.isArray(itemValue)) {
+                return itemValue.includes(option.value);
+            }
+            return itemValue === option.value;
+        }),
+    }))
+        .filter((group) => group.items.length > 0);
+}
+function useSearchParams(location) {
+    return React.useMemo(() => new URLSearchParams(location.search), [location.search]);
+}
+function normalizeItems(items, config, customFields) {
+    // because of RBAC some versions can be missing so we need to pick up other default version
+    const hasDeafultVersion = {};
+    for (const item of items) {
+        if (item.versionFolderId && item.isDefault) {
+            hasDeafultVersion[item.versionFolderId] = true;
+        }
+    }
+    if (!config.separateVersions) {
+        // keep only default version
+        // idea: save other versions information (may be useful for cards)
+        items = items.filter((item) => {
+            if (!item.versionFolderId)
+                return true;
+            if (!hasDeafultVersion[item.versionFolderId]) {
+                // we already picked the default version so let's ignore next versions
+                hasDeafultVersion[item.versionFolderId] = true;
+                return true;
+            }
+            return item.isDefault;
+        });
+    }
+    return items.map((item) => {
+        var _a, _b, _c;
+        const metadata = item.metadata || {};
+        const apiCustomFields = customFields[item.fsPath || ''] || {};
+        const link = item.link || ((_a = (0, utils_1.findDeepFirst)(item.items || [], (i) => 'link' in i && !!i.link)) === null || _a === void 0 ? void 0 : _a.link);
+        const firstSidebarItem = (_b = item.sidebar) === null || _b === void 0 ? void 0 : _b[0];
+        return Object.assign(Object.assign(Object.assign({}, metadata), apiCustomFields), { publishedAt: metadata.publishedAt || metadata.createdAt, title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
+    });
+}
+function collectFilterParents(filtersWithOptions) {
+    if (!filtersWithOptions)
+        return [];
+    const parents = [];
+    // use filter idx as id so we don't need users to provide unique ids
+    for (let i = 0; i < filtersWithOptions.length; i++) {
+        const filter = filtersWithOptions[i];
+        if (filter.parentFilter) {
+            const idx = filtersWithOptions.findIndex((f) => f.property === filter.parentFilter);
+            parents[idx] = parents[idx] || new Set();
+            parents[idx].add(i);
+        }
+    }
+    return parents;
+}
+function collectFilterOptions(items, filters) {
+    return (filters !== null && filters !== void 0 ? filters : []).map((filter) => {
+        var _a, _b, _c, _d;
+        const staticOptions = filter.options
+            ? Object.fromEntries(filter.options.map((o) => [o, 0]))
+            : undefined;
+        const usedOptions = staticOptions !== null && staticOptions !== void 0 ? staticOptions : {};
+        let othersCount = 0;
+        for (const item of items) {
+            const values = Array.isArray((_a = item.metadata) === null || _a === void 0 ? void 0 : _a[filter.property])
+                ? (_b = item.metadata) === null || _b === void 0 ? void 0 : _b[filter.property]
+                : [(_c = item.metadata) === null || _c === void 0 ? void 0 : _c[filter.property]];
+            for (const value of values) {
+                const str = mapFilterValues(String(value), filter.valuesMapping);
+                if (staticOptions) {
+                    if (str in staticOptions) {
+                        usedOptions[str] = usedOptions[str] + 1;
+                    }
+                    continue;
+                }
+                if (value) {
+                    usedOptions[str] = ((_d = usedOptions[str]) !== null && _d !== void 0 ? _d : 0) + 1;
+                }
+                else {
+                    othersCount++;
+                }
+            }
+        }
+        const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
+        if (!staticOptions) {
+            options.sort((a, b) => b.value.localeCompare(a.value));
+        }
+        if (othersCount) {
+            options.push({
+                value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
+                count: othersCount,
+            });
+        }
+        return Object.assign(Object.assign({}, filter), { options });
+    });
+}
+function filterItems(normalizedItems, filters, term) {
+    // filter by filters first, and then by search term
+    const filteredByFilters = normalizedItems.filter((item) => {
+        return filters.every((filter) => {
+            var _a, _b;
+            if (filter.selectedOptions && !(filter.selectedOptions instanceof Set)) {
+                try {
+                    const date = new Date(item[filter.property]).toISOString().split('T')[0];
+                    return (date >= ((_a = filter.selectedOptions.from) !== null && _a !== void 0 ? _a : '') &&
+                        date <= ((_b = filter.selectedOptions.to) !== null && _b !== void 0 ? _b : 'Z'));
+                }
+                catch (e) {
+                    return true;
+                }
+            }
+            if (filter.selectedOptions.size === 0) {
+                return true;
+            }
+            const itemValue = mapFilterValues((item === null || item === void 0 ? void 0 : item[filter.property]) || filter.missingCategoryName || 'Others', filter.valuesMapping);
+            if (Array.isArray(itemValue)) {
+                return itemValue.some((value) => filter.selectedOptions.has(value));
+            }
+            return filter.selectedOptions.has(itemValue);
+        });
+    });
+    if (term) {
+        term = term.toLowerCase();
+        return filteredByFilters.filter((item) => {
+            return Object.values(item).some((value) => {
+                return Array.isArray(value)
+                    ? value.some((value) => String(value).toLowerCase().includes(term))
+                    : String(value).toLowerCase().includes(term);
+            });
+        });
+    }
+    else {
+        return filteredByFilters;
+    }
+}
+function mapFilterValues(value, mapping) {
+    if (!mapping)
+        return value;
+    return Array.isArray(value)
+        ? value.map((v) => mapping[String(v)] || v)
+        : mapping[String(value)] || value;
+}
+//# sourceMappingURL=useCatalog.js.map

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { CodeBlockControlsProps } from '../../components/CodeBlock';
+export interface CodeBlockProps {
+    lang?: string;
+    source?: string;
+    externalSource?: ExternalSource;
+    header?: CodeBlockControlsProps;
+    dataTestId?: string;
+    className?: string;
+    withLineNumbers?: boolean;
+    startLineNumber?: number;
+    highlightedHtml?: string;
+    codeBlockRef?: (instance: HTMLPreElement | null) => void;
+}
+export interface Sample {
+    lang: string;
+    label?: string;
+}
+export type UnstableExternalCodeSample = Sample & {
+    get: (source: ExternalSource) => string;
+};
+export interface ExternalSource {
+    sample: UnstableExternalCodeSample;
+    exampleName?: string;
+    pathParams?: any;
+    properties?: any;
+    operation?: any;
+}
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, }: CodeBlockProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,66 @@
+"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.CodeBlock = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../utils");
+const Feedback_1 = require("../../components/Feedback");
+const CodeBlock_1 = require("../../components/CodeBlock");
+function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, }) {
+    var _a;
+    const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
+    const highlightedCode = highlightedHtml || (0, utils_1.highlight)(sourceCode, lang);
+    // The same initial value should be returned for ssr and frontend to avoid issues
+    // Because we don't have session storage in ssr and can't get the security details there
+    // Issue for more details https://github.com/Redocly/reference-docs/issues/888
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
+        if (_source) {
+            setSourceCode(_source);
+        }
+    }, [source, externalSource]);
+    const { reportDialog, reportButton } = (0, Feedback_1.useReportDialog)();
+    const controls = Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: ((_a = header === null || header === void 0 ? void 0 : header.controls) === null || _a === void 0 ? void 0 : _a.report)
+            ? Object.assign(Object.assign({}, header.controls.report), { props: reportButton.props }) : { props: reportButton.props } });
+    if (controls.copy && !controls.copy.handleOutside) {
+        controls.copy.data = sourceCode;
+    }
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
+        react_1.default.createElement(CodeBlock_1.CodeBlockControls, { className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
+        react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
+                __html: withLineNumbers
+                    ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
+                    : highlightedCode,
+            }, "data-cy": dataTestId, withControls: true }),
+        reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang })))));
+}
+exports.CodeBlock = CodeBlock;
+const Wrapper = styled_components_1.default.div ``;
+//# sourceMappingURL=CodeBlock.js.map

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -0,0 +1,3 @@
+export declare const CodeBlockContainer: import("styled-components").StyledComponent<"pre", any, {
+    withControls?: boolean | undefined;
+}, never>;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -0,0 +1,148 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockContainer = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../utils");
+exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className }) => ({
+    'data-component-name': 'CodeBlock/CodeBlockContainer',
+    className,
+})) `
+  && {
+    overflow-x: auto;
+    max-height: var(--code-block-max-height);
+    font-family: var(--code-block-font-family);
+    line-height: var(--code-block-line-height);
+    font-weight: var(--code-block-font-weight);
+    padding: var(--code-block-padding);
+    margin: var(--code-block-margin);
+    background-color: var(--code-block-background-color);
+    color: var(--code-block-text-color);
+    font-size: var(--code-block-font-size);
+    white-space: var(--code-wrap, pre);
+    max-height: var(--code-block-max-height, 600px);
+    word-break: var(--code-block-word-break, initial);
+
+    ${(withControls) => withControls
+    ? (0, styled_components_1.css) `
+            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
+            border-left: 1px solid var(--code-block-border-color);
+            border-right: 1px solid var(--code-block-border-color);
+            border-bottom: 1px solid var(--code-block-border-color);
+          `
+    : (0, styled_components_1.css) `
+            border-radius: var(--code-block-border-radius);
+            border: 1px solid var(--code-block-border-color);
+          `}
+
+  /**
+  * Based on prism-dark.css
+  */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: 0 -0.1em 0.2em black;
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  .token.punctuation {
+    opacity: 1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    & + a,
+    & + a:visited {
+      color: var(--code-block-tokens-link-color);
+      text-decoration: underline;
+    }
+  }
+
+  .token.property.string {
+    color: var(--code-block-tokens-property-string-color);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  ${(0, utils_1.generateCodeBlockTokens)()}
+`;
+//# sourceMappingURL=CodeBlockContainer.js.map

package/lib/components/CodeBlock/CodeBlockControlButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const CodeBlockControlButton: import("styled-components").StyledComponent<import("react").FC<import("../../components/Button").ButtonProps>, any, {
+    asIcon?: boolean | undefined;
+}, never>;

package/lib/components/CodeBlock/CodeBlockControlButton.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockControlButton = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = require("../../components/Button");
+exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Button) `
+  color: var(--code-block-controls-text-color);
+  border: none;
+
+  ${({ asIcon }) => asIcon
+    ? (0, styled_components_1.css) `
+          background-color: var(--code-block-icon-controls-background-color);
+        `
+    : (0, styled_components_1.css) `
+          min-width: 90px;
+          background-color: var(--code-block-text-controls-background-color);
+        `}
+
+  padding: 0;
+
+  :not(:first-child) {
+    margin-left: 5px;
+  }
+
+  &:hover {
+    border: none;
+  }
+`;
+//# sourceMappingURL=CodeBlockControlButton.js.map

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface CodeBlockControlsProps {
+    children?: React.ReactNode;
+    className?: string;
+    title?: React.ReactNode | string;
+    controls?: ControlItems;
+}
+interface ControlItems {
+    copy?: CopyControlProps;
+    expand?: ControlProps;
+    collapse?: ControlProps;
+    report?: ControlProps;
+    select?: ControlProps;
+    deselect?: ControlProps;
+}
+interface ControlProps {
+    label?: string;
+    tooltipText?: string;
+    onClick?: () => void;
+    props?: Record<string, any>;
+}
+interface CopyControlProps extends ControlProps {
+    data?: string;
+    dataSource?: string;
+    dataHash?: string;
+    toasterPlacement?: 'left' | 'right' | 'top' | 'bottom';
+    toasterText?: string;
+    toasterDuration?: number;
+    handleOutside?: boolean;
+}
+export type ControlItemType = 'text' | 'icon';
+export declare function CodeBlockControls({ children, className, title, controls, }: CodeBlockControlsProps): JSX.Element | null;
+export {};