@redocly/theme 0.9.0-beta.2 → 0.9.0-beta.4

package/lib/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
 export interface ButtonProps {
     color?: ButtonColor;

package/lib/Button/Button.js

@@ -73,8 +73,8 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
     box-shadow: var(--button-active-box-shadow);
   }
 `;
-const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass }) => ({
-    className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
+    className: `button-color-${color}${variant ? ` ${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
   text-decoration: none;
@@ -131,6 +131,18 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
       animation: ${getBlink()} 1.2s infinite;
     `}
 
+  ${({ color }) => color === 'tertiary' &&
+    (0, styled_components_1.css) `
+      background-color: transparent;
+      border: none;
+      color: var(--text-color);
+
+      :hover {
+        border: none;
+        background: rgba(255, 255, 255, 0.65);
+      }
+    `}
+
   ${({ disabled }) => disabled &&
     (0, styled_components_1.css) `
       &,

package/lib/Catalog/Filter.js

@@ -12,9 +12,7 @@ function Filter({ filter }) {
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null,
-            filter.title,
-            " filter"),
+        react_1.default.createElement(FilterTitle, null, filter.title),
         filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
             react_1.default.createElement("option", { key: "none", value: "" }, "All"),
             filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },

package/lib/Markdown/Admonition.d.ts

@@ -4,6 +4,9 @@ interface AdmonitionTypeProps {
 }
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
     name?: string;
+    className?: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 }
-export declare function Admonition({ type, name, children, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
+export declare function Admonition({ type, name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
 export {};

package/lib/Markdown/Admonition.js

@@ -7,8 +7,8 @@ exports.Admonition = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
-function Admonition({ type = 'info', name, children, }) {
-    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition" },
+function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { type: type, className: className, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
         name ? react_1.default.createElement(Heading, { type: type }, name) : null,
         react_1.default.createElement(Content, null, children)));

package/lib/Markdown/CodeSample/CodeSample.d.ts

@@ -3,5 +3,7 @@ export type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 };
-export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
+export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }: CodeSampleProps): JSX.Element;

package/lib/Markdown/CodeSample/CodeSample.js

@@ -29,7 +29,7 @@ const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Feedback_1 = require("../../Feedback");
-function CodeSample({ rawContent, highlighted, language }) {
+function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const langClassName = language ? `language-${language}` : '';
     const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
@@ -39,7 +39,7 @@ function CodeSample({ rawContent, highlighted, language }) {
         setIsCopied(true);
         setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
     };
-    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(CodeSampleButtonContainer, null,
             !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
                 !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copy.tooltipText || 'Copy to clipboard' }, copy.buttonText || 'Copy')),

package/lib/Markdown/Heading.d.ts

@@ -1,5 +1,7 @@
 import type { PropsWithChildren } from 'react';
-export declare function Heading({ level, id, children, }: PropsWithChildren<{
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }: PropsWithChildren<{
     level: number;
     id: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 }>): JSX.Element;

package/lib/Markdown/Heading.js

@@ -26,18 +26,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../utils");
+const icons_1 = require("../icons");
 /**
  * Class name for all MD tags
  */
 const mdClassName = 'md';
-const SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
-    react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
-function Heading({ level, id, children, }) {
-    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
+function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
+        react_1.default.createElement(icons_1.AnchorIcon, null)));
     return (0, react_1.createElement)(`h${level}`, {
         id,
         className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
         'data-component-name': 'Markdown/Heading',
+        'data-source': dataSource,
+        'data-hash': dataHash,
     }, react_1.default.createElement(react_1.default.Fragment, null,
         linkEl,
         children));

package/lib/Markdown/Mermaid.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 };
-export declare function Mermaid({ diagramHtml }: MermaidProps): JSX.Element;
+export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }: MermaidProps): JSX.Element;
 export {};

package/lib/Markdown/Mermaid.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Mermaid({ diagramHtml }) {
-    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid" }));
+function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
 }
 exports.Mermaid = Mermaid;
 const Wrapper = styled_components_1.default.div `

package/lib/Profile/Profile.js

@@ -27,7 +27,7 @@ exports.Profile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../utils");
-function ProfileComponent({ name, imageUrl, onClick, color }) {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
     var _a;
     if (imageUrl) {
         return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },

package/lib/ReferenceDocs/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ClearButtonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    handleClear?: () => void;
+}
+export declare const ClearButton: import("styled-components").StyledComponent<React.NamedExoticComponent<ClearButtonProps>, any, {}, never>;
+export {};

package/lib/ReferenceDocs/ClearButton.js

@@ -0,0 +1,48 @@
+"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.ClearButton = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearButtonComponent = ({ className, style, handleClear }) => (react_1.default.createElement("button", { className: className, style: style, onClick: handleClear }, "\u2715"));
+exports.ClearButton = (0, styled_components_1.default)((0, react_1.memo)(ClearButtonComponent)) `
+  z-index: 1;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #89949f;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+`;
+//# sourceMappingURL=ClearButton.js.map

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TryItSecurityProps } from './TryItSecurity';
+export declare function DevOnboardingTryItSecurity(props: TryItSecurityProps): JSX.Element | null;

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -0,0 +1,158 @@
+"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.DevOnboardingTryItSecurity = void 0;
+const React = __importStar(require("react"));
+const _theme_1 = require("../index.js");
+const styled_components_1 = __importDefault(require("styled-components"));
+const usePageData_1 = require("../mocks/hooks/usePageData");
+const Dropdown_1 = require("./Dropdown");
+function DevOnboardingTryItSecurity(props) {
+    const apiId = props.apiId;
+    // @ts-ignore
+    const { userData } = (0, usePageData_1.usePageData)('userData') || {};
+    // TODO: handle error
+    const [_error, setError] = React.useState();
+    const [apps, setApps] = React.useState();
+    const [appId, setAppId] = React.useState('');
+    const [loading, setLoading] = React.useState(true);
+    const [appLoading, setAppLoading] = React.useState(false);
+    const [selectedAppSecret, setSelectedAppSecret] = React.useState();
+    const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
+    const initialRender = React.useRef(true);
+    React.useEffect(() => {
+        if (!props.value && initialRender.current)
+            return;
+        if (acceptValueUpdate) {
+            setAcceptValueUpdate(false);
+        }
+        else {
+            setAppId('');
+        }
+    }, [props.value]);
+    React.useEffect(() => {
+        initialRender.current = false;
+        const prevAppId = sessionStorage.getItem('redocly_onboarding:prevAppId');
+        if (prevAppId) {
+            setAppId(prevAppId);
+        }
+        if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+            fetch(`/api/api-keys/api-products/${apiId}/access?expand=1`).then((res) => {
+                return res
+                    .json()
+                    .then((data) => {
+                    if (res.ok) {
+                        setApps(data.apps);
+                    }
+                    else {
+                        setError(data.message);
+                    }
+                })
+                    .catch(() => setError('Something went wrong'))
+                    .finally(() => setLoading(false));
+            });
+        }
+    }, []);
+    React.useEffect(() => {
+        sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
+    }, [appId]);
+    if (!apiId) {
+        return null;
+    }
+    const loadAppCredentials = (appId) => {
+        setAppLoading(true);
+        fetch(`/api/api-keys/apps/${appId}`).then((res) => {
+            return res
+                .json()
+                .then((data) => {
+                if (res.ok) {
+                    const cred = data.credentials.find((cred) => cred.status === 'approved');
+                    setAcceptValueUpdate(true);
+                    setSelectedAppSecret(cred.clientSecret);
+                }
+                else {
+                    setError(data.message);
+                }
+            })
+                .catch(() => setError('Something went wrong'))
+                .finally(() => setAppLoading(false));
+        });
+    };
+    const placeholder = loading ? 'Loading your apps...' : undefined;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormLabel, { htmlFor: "server" }, "Select app: "),
+        React.createElement(FormControl, null,
+            React.createElement(TryItDropdown, { placeholder: placeholder, value: appId || placeholder, options: (apps === null || apps === void 0 ? void 0 : apps.map((app) => ({ title: app.title, value: app.id }))) || [], fullWidth: true, onChange: ({ value }) => {
+                    setAppId(value);
+                    loadAppCredentials(value);
+                } }),
+            React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", blinking: appLoading, onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, "Use key"))));
+}
+exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
+const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  .dropdown-select,
+  label {
+    background-color: var(--panel-try-it-dropdown-background-color);
+    border: var(--panel-try-it-dropdown-border);
+    color: var(--panel-try-it-dropdown-color);
+  }
+`;
+const FormControl = styled_components_1.default.div `
+  width: 100%;
+  /* font-family: var(--code-font-family); */
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const FormLabel = styled_components_1.default.label `
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({ required }) => required &&
+    `
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: var(--color-error-500);
+      }
+    `}
+`;
+const UseKeyButton = (0, styled_components_1.default)(_theme_1.Button) `
+  width: 100px;
+  align-self: flex-end;
+  margin-top: 16px;
+  margin-right: 0;
+`;
+//# sourceMappingURL=DevOnboardingTryItSecurity.js.map

package/lib/ReferenceDocs/Dropdown.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface DropdownOption {
+    idx?: number;
+    value: string;
+    title?: string;
+    serverUrl?: string;
+    label?: string;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    onChange: (option: DropdownOption) => void;
+    handleClear?: () => void;
+    clearable?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    dense?: boolean;
+    fullWidth?: boolean;
+    variant?: 'dark' | 'light';
+}
+export interface ArrowIconProps {
+    className?: string;
+    variant?: 'light' | 'dark';
+    style?: React.CSSProperties;
+}
+export declare const Dropdown: import("styled-components").StyledComponent<React.NamedExoticComponent<DropdownProps>, any, {}, never>;
+export declare const normalizeText: (description?: string | Record<string, any>) => string;

package/lib/ReferenceDocs/Dropdown.js

@@ -0,0 +1,150 @@
+"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.normalizeText = exports.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearButton_1 = require("./ClearButton");
+const ArrowSvg = ({ className, style }) => (react_1.default.createElement("svg", { className: className, style: style, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    react_1.default.createElement("polyline", { points: "6 9 12 15 18 9" })));
+const ArrowIcon = (0, styled_components_1.default)(ArrowSvg) `
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  margin: auto;
+  text-align: center;
+  polyline {
+    color: ${(props) => props.variant === 'dark' && 'white'};
+  }
+`;
+const DropdownComponent = ({ options, onChange, handleClear, clearable, placeholder, value = '', className, variant = 'light', }) => {
+    var _a;
+    const handleOnChange = (event) => {
+        const { selectedIndex } = event.target;
+        const index = placeholder || !value ? selectedIndex - 1 : selectedIndex;
+        onChange(options[index]);
+    };
+    const renderOptions = (0, react_1.useMemo)(() => options.map(({ idx, value, title }, index) => {
+        const normalizedValue = (0, exports.normalizeText)(value);
+        return (react_1.default.createElement("option", { key: idx || normalizedValue + index, value: normalizedValue, className: "dropdown-option" }, title || normalizedValue));
+    }), [options]);
+    const normalizedValue = (0, exports.normalizeText)(value);
+    const title = ((_a = options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.title) || normalizedValue;
+    return (react_1.default.createElement("div", { className: className + ' dropdown-wrapper' },
+        react_1.default.createElement(ArrowIcon, { variant: variant }),
+        clearable && (normalizedValue === null || normalizedValue === void 0 ? void 0 : normalizedValue.length) > 0 && react_1.default.createElement(ClearButton_1.ClearButton, { handleClear: handleClear }),
+        react_1.default.createElement("select", { onChange: handleOnChange, value: normalizedValue, className: "dropdown-select" },
+            placeholder && (react_1.default.createElement("option", { disabled: true, hidden: true, value: placeholder }, placeholder)),
+            !normalizedValue && !placeholder && react_1.default.createElement("option", { disabled: true }),
+            renderOptions),
+        react_1.default.createElement("label", null, title)));
+};
+exports.Dropdown = (0, styled_components_1.default)((0, react_1.memo)(DropdownComponent)) `
+
+box-sizing: border-box;
+  outline: none;
+  display: inline-block;
+  border-radius: var(--border-radius);
+  vertical-align: bottom;
+  position: relative;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  cursor: pointer;
+  text-transform: none;
+
+  label {
+    box-sizing: border-box;
+    min-width: 90px;
+    height: 36px;
+    outline: none;
+    display: inline-block;
+    color: var(--dropdown-text-color);
+    border-radius: var(--border-radius);
+    border: var(--dropdown-border);
+    padding: var(--dropdown-padding);
+    vertical-align: bottom;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    text-transform: none;
+    line-height: inherit;
+    font-size: var(--dropdown-font-size);
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--border-color);
+      box-shadow: none;
+    }
+
+    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
+  }
+
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: var(--text-color);
+    line-height: inherit;
+    font-size: 14px;
+    font-family: inherit;
+    padding: var(--dropdown-padding);
+    ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
+
+`;
+const darkDropdownStyle = `
+  background-color: var(--panel-samples-dropdown-background-color);
+  border: var(--panel-samples-dropdown-border);
+  color: var(--panel-samples-dropdown-color);
+
+  &,
+  &:hover,
+  &:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+`;
+function isString(value) {
+    return typeof value === 'string';
+}
+const normalizeText = (description) => isString(description) ? description : description === null || description === void 0 ? void 0 : description.raw;
+exports.normalizeText = normalizeText;
+//# sourceMappingURL=Dropdown.js.map

package/lib/ReferenceDocs/TryItSecurity.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type TryItSecurityProps = {
+    apiId?: string;
+    value?: string;
+    onChange: (newSecretKey: string) => void;
+};
+export declare function TryItSecurity(props: TryItSecurityProps): JSX.Element | null;

package/lib/ReferenceDocs/TryItSecurity.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TryItSecurity = void 0;
+const react_1 = __importDefault(require("react"));
+const useGlobalData_1 = require("../mocks/useGlobalData");
+const DevOnboardingTryItSecurity_1 = require("./DevOnboardingTryItSecurity");
+function TryItSecurity(props) {
+    const { hasDeveloperOnboarding } = (0, useGlobalData_1.useGlobalData)() || {};
+    return hasDeveloperOnboarding && props.apiId ? react_1.default.createElement(DevOnboardingTryItSecurity_1.DevOnboardingTryItSecurity, Object.assign({}, props)) : null;
+}
+exports.TryItSecurity = TryItSecurity;
+//# sourceMappingURL=TryItSecurity.js.map

package/lib/ReferenceDocs/index.d.ts

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

package/lib/ReferenceDocs/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("./TryItSecurity"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Sidebar/FooterWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/Sidebar/FooterWrapper.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FooterWrapper = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Sidebar/FooterWrapper',
+})) `
+  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
+  padding-top: var(--sidebar-spacing-unit);
+  border-top: solid 1px #daddde;
+`;
+//# sourceMappingURL=FooterWrapper.js.map

package/lib/Sidebar/HeaderWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;