@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlockControls = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CodeBlock_1 = require("../../components/CodeBlock");
+const CopyButton_1 = require("../../components/CopyButton/CopyButton");
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
+function CodeBlockControls({ children, className, title, controls, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const { codeSnippet } = (0, hooks_1.useThemeConfig)();
+    const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
+    const { copy, expand, collapse, select, deselect, report } = controls
+        ? controls
+        : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
+    const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Title, null, title),
+        react_1.default.createElement(ControlsWrapper, null,
+            report && ((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: (_b = report.props) === null || _b === void 0 ? void 0 : _b.tooltip }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_c = report.props) === null || _c === void 0 ? void 0 : _c.buttonText) || 'Report')) : null,
+            expand && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
+            collapse && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
+            select ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "select-all", "data-testid": "select-all", asIcon: controlsType === 'icon', onClick: select === null || select === void 0 ? void 0 : select.onClick, title: select === null || select === void 0 ? void 0 : select.tooltipText }, controlsType === 'icon' ? react_1.default.createElement(icons_1.SelectIcon, null) : (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
+            deselect ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "clear-all", "data-testid": "clear-all", asIcon: controlsType === 'icon', onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, title: deselect === null || deselect === void 0 ? void 0 : deselect.tooltipText }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.DeselectIcon, null)) : (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? (deselect.label) : ('Clear all'))) : null,
+            copy && !((_f = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _f === void 0 ? void 0 : _f.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: () => {
+                    copy === null || copy === void 0 ? void 0 : copy.onClick;
+                    telemetry_1.telemetry.send('code_snippet_copied', {});
+                } })) : null))) : null;
+    return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
+}
+exports.CodeBlockControls = CodeBlockControls;
+const ContainerWraper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  min-height: 30px;
+  padding: var(--code-block-controls-padding);
+  background-color: var(--code-block-controls-background-color);
+  border-top: var(--code-block-controls-border);
+  border-left: var(--code-block-controls-border);
+  border-right: var(--code-block-controls-border);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  margin-top: 10px;
+`;
+const Title = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  color: var(--code-block-controls-text-color);
+`;
+const ControlsWrapper = styled_components_1.default.div `
+  display: flex;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;
+//# sourceMappingURL=CodeBlockControls.js.map

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

@@ -0,0 +1,5 @@
+export * from '../../components/CodeBlock/CodeBlock';
+export * from '../../components/CodeBlock/CodeBlockContainer';
+export * from '../../components/CodeBlock/CodeBlockControls';
+export * from '../../components/CodeBlock/CodeBlockControlButton';
+export * from '../../components/CodeBlock/styledVariables';

package/lib/components/CodeBlock/index.js

@@ -0,0 +1,22 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/CodeBlock/CodeBlock"), exports);
+__exportStar(require("../../components/CodeBlock/CodeBlockContainer"), exports);
+__exportStar(require("../../components/CodeBlock/CodeBlockControls"), exports);
+__exportStar(require("../../components/CodeBlock/CodeBlockControlButton"), exports);
+__exportStar(require("../../components/CodeBlock/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/CodeBlock/styledVariables.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.code = void 0;
+const styled_components_1 = require("styled-components");
+exports.code = (0, styled_components_1.css) `
+  /**
+    * @tokens Code base styles
+    */
+  --code-font-size: 13px; // @presenter FontSize
+  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --code-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --code-line-height: var(--line-height-xsm); // @presenter LineHeight
+  --code-wrap: pre;
+  --code-word-break: break-word;
+
+  /**
+    * @tokens Inline Code
+    */
+  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
+  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
+  --inline-code-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --inline-code-line-height: var(--code-line-height); // @presenter LineHeight
+  --inline-code-text-color: var(--text-secondary); // @presenter Color
+  --inline-code-background-color: var(--bg-overlay); // @presenter Color
+  --inline-code-border-color: var(--border-primary); // @presenter Color
+  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Code Block
+    */
+  --code-block-font-size: var(--code-font-size); // @presenter FontSize
+  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
+  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --code-block-text-color: var(--text-secondary); // @presenter Color
+  --code-block-background-color: var(--bg-raised); // @presenter Color
+  --code-block-border-color: var(--border-primary); // @presenter Color
+  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
+  --code-block-max-height: 50vh;
+  --code-block-word-break: initial;
+
+  /**
+    * @tokens Code Block controls
+    */
+
+  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
+  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
+  --code-block-controls-text-color: var(--text-secondary); // @presenter Color
+  --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
+  --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
+  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
+
+  /**
+    * @tokens Code Block tokens
+   */
+  --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
+  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
+  --code-block-tokens-string-color: var(--color-cyan-7); // @presenter Color
+  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-link-color: var(--color-blue-7); // @presenter Color
+  --code-block-tokens-operator-color: var(--color-gold-7); // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-keyword-color: var(--color-magenta-7); // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ColorModeSwitcherProps {
+    className?: string;
+}
+export declare function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element | null;
+export {};

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -0,0 +1,83 @@
+"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.ColorModeSwitcher = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ColorModeIcon_1 = require("../../icons/ColorModeIcon");
+const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
+function ColorModeSwitcher(props) {
+    const { className } = props;
+    const themeSettings = (0, hooks_1.useThemeConfig)();
+    const colorMode = themeSettings.colorMode;
+    const [activeColorMode, setActiveColorMode] = (0, react_1.useState)('');
+    const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
+    const defaultColor = modes[0] || 'light';
+    (0, hooks_1.useMount)(() => {
+        setActiveColorMode(document.documentElement.className || defaultColor);
+    });
+    if (colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide) {
+        return null;
+    }
+    const handelChangeColorMode = () => {
+        const activeIndex = modes.indexOf(activeColorMode);
+        const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
+        setActiveColorMode(mode);
+        localStorage.setItem('colorSchema', mode);
+        document.documentElement.className = `${mode} notransition`;
+        window.requestAnimationFrame(() => {
+            document.documentElement.classList.remove('notransition');
+        });
+        telemetry_1.telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
+    };
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes, role: "link", className: className }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
+}
+exports.ColorModeSwitcher = ColorModeSwitcher;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  ${ColorModeIcon_1.ColorModeIcon} {
+    display: none;
+  }
+
+  ${({ modes }) => {
+    const items = modes.map((mode) => {
+        return `
+        html.${mode} & ${ColorModeIcon_1.ColorModeIcon}.${mode} {
+          display: block;
+        }
+      `;
+    });
+    return items.join('');
+}}
+`;
+//# sourceMappingURL=ColorModeSwitcher.js.map

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

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

package/lib/components/ColorModeSwitcher/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/ColorModeSwitcher/ColorModeSwitcher"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ControlItemType } from '../../components/CodeBlock';
+import type { TooltipProps } from '../../components/Tooltip';
+export interface CopyButtonProps {
+    data: unknown;
+    type?: ControlItemType;
+    toasterPlacement?: TooltipProps['placement'];
+    toasterText?: string;
+    toasterDuration?: number;
+    buttonText?: string;
+    tooltipText?: string;
+    onCopyClick?: () => void;
+    dataTestId?: string;
+}
+export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;

package/lib/components/CopyButton/CopyButton.js

@@ -0,0 +1,53 @@
+"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.CopyButton = void 0;
+const react_1 = __importStar(require("react"));
+const CodeBlock_1 = require("../../components/CodeBlock");
+const Tooltip_1 = require("../../components/Tooltip");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const hooks_2 = require("../../mocks/hooks");
+function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, tooltipText, onCopyClick, dataTestId = 'copy-button', }) {
+    const tooltip = (0, hooks_1.useControl)();
+    const { translate } = (0, hooks_2.useTranslate)();
+    const showTooltip = (duration = 1500) => {
+        tooltip.handleOpen();
+        setTimeout(() => {
+            tooltip.handleClose();
+        }, duration);
+    };
+    const copy = (duration) => {
+        const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+        utils_1.ClipboardService.copyCustom(content);
+        showTooltip(duration);
+        onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
+    };
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: translate('theme.codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
+        react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { onClick: () => copy(toasterDuration), "data-cy": dataTestId, asIcon: type === 'icon', title: translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')))));
+}
+exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
+//# sourceMappingURL=CopyButton.js.map

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

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

package/lib/components/CopyButton/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/CopyButton/CopyButton"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface DropdownProps {
+    children?: React.ReactNode;
+    items: JSX.Element[] | string[];
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    onChange?: (value: React.ReactNode | string) => void;
+    icon?: React.ReactNode;
+}
+export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: DropdownProps) => React.JSX.Element;
+export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {
+    placement?: string | undefined;
+    alignment?: string | undefined;
+}, never>;
+export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
+    separator?: boolean | undefined;
+}, never>;

package/lib/components/Dropdown/Dropdown.js

@@ -0,0 +1,116 @@
+"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.DropdownListItem = exports.DropdownList = exports.DropdownHeader = exports.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../hooks");
+const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, placement, alignment, icon, }) => {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleClick = (value) => {
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
+    return (react_1.default.createElement(DropdownContainer, Object.assign({}, dataAttributes, { "data-testid": "dropdown", className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: handleClose, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+        react_1.default.createElement(exports.DropdownHeader, null,
+            children,
+            icon,
+            withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
+        isOpen && (react_1.default.createElement(exports.DropdownList, { placement: placement, alignment: alignment }, items.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
+        })))));
+};
+exports.Dropdown = Dropdown;
+const DropdownContainer = styled_components_1.default.div `
+  position: relative;
+  font-size: var(--dropdown-font-size);
+  font-weight: var(--dropdown-font-weight);
+  line-height: var(--dropdown-line-height);
+  border-radius: var(--dropdown-border-radius);
+  color: var(--dropdown-text-color);
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--dropdown-text-color);
+  }
+`;
+exports.DropdownHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+exports.DropdownList = styled_components_1.default.ul `
+  position: absolute;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  margin: 0;
+  min-width: var(--dropdown-list-min-width);
+  max-width: var(--dropdown-list-max-width);
+  padding: var(--dropdown-list-padding);
+  background-color: var(--dropdown-list-background-color);
+  border-radius: var(--dropdown-list-border-radius);
+  box-shadow: var(--dropdown-list-box-shadow);
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+`;
+exports.DropdownListItem = styled_components_1.default.li `
+  border-radius: var(--dropdown-list-item-border-radius);
+
+  & > * {
+    padding: var(--dropdown-list-item-vertical-padding) var(--dropdown-list-item-horizontal-padding);
+  }
+
+  :hover {
+    background-color: var(--dropdown-list-item-active-background-color);
+  }
+
+  ${({ separator }) => separator &&
+    (0, styled_components_1.css) `
+      border-bottom: 1px solid var(--dropdown-list-item-separator-color);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    `}
+`;
+//# sourceMappingURL=Dropdown.js.map

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

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

package/lib/components/Dropdown/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Dropdown/Dropdown"), exports);
+__exportStar(require("../../components/Dropdown/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Dropdown/styledVariables.d.ts

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

package/lib/components/Dropdown/styledVariables.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdown = void 0;
+const styled_components_1 = require("styled-components");
+exports.dropdown = (0, styled_components_1.css) `
+  /**
+    * @tokens Dropdown
+    * */
+  --dropdown-font-size: var(--font-size-base); // @presenter FontSize
+  --dropdown-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-text-color: var(--text-secondary); // @presenter Color
+  --dropdown-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --dropdown-list-min-width: 100px;
+  --dropdown-list-max-width: 300px;
+  --dropdown-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-list-background-color: var(--background-color); // @presenter Color
+  --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
+  --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/EditPageButton/EditPageButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface EditPageButtonProps {
+    to: string;
+}
+export declare const EditPageButton: ({ to }: EditPageButtonProps) => JSX.Element;