@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Panel/styledVariables.js

@@ -0,0 +1,482 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.apiReferencePanels = exports.responsePanelColors = void 0;
+const styled_components_1 = require("styled-components");
+exports.responsePanelColors = (0, styled_components_1.css) `
+  /**
+  * @tokens Response Panel Common
+  */
+
+  --panel-response-heading-padding: 10px 20px;
+  --panel-response-heading-font-size: var(--font-size-base);
+  --panel-response-heading-line-height: var(--line-height-sm);
+  --panel-response-heading-font-weight: var(--font-weight-bold);
+  --panel-response-heading-text-color: var(--text-primary);
+
+  --panel-response-body-text-color: var(--text-secondary);
+
+  /**
+  * @tokens Response Panel Success colors
+  * @presenter Color
+  */
+  --panel-response-success-border-color: var(--color-success-border);
+  --panel-response-success-heading-background-color: var(--color-success-bg);
+  --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-success-body-background-color: transparent;
+  --panel-response-success-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Error colors
+  * @presenter Color
+  */
+
+  --panel-response-error-border-color: var(--color-error-border);
+  --panel-response-error-heading-background-color: var(--color-error-bg);
+  --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-error-body-background-color: transparent;
+  --panel-response-error-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Redirect colors
+  * @presenter Color
+  */
+
+  --panel-response-redirect-border-color: var(--color-warning-border);
+  --panel-response-redirect-heading-background-color: var(--color-warning-bg);
+  --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-redirect-body-background-color: transparent;
+  --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Info colors
+  * @presenter Color
+  */
+
+  --panel-response-info-border-color: var(--color-info-border);
+  --panel-response-info-heading-background-color: var(--color-info-bg);
+  --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-info-body-background-color: transparent;
+  --panel-response-info-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Callback colors
+  * @presenter Color
+  */
+
+  --panel-response-callback-border-color: var(--color-geekblue-3);
+  --panel-response-callback-heading-background-color: var(--color-geekblue-1);
+  --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-callback-body-background-color: transparent;
+  --panel-response-callback-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Panel response success, info, error, redirect, callback common
+  */
+
+  .panel-response-success,
+  .panel-response-info,
+  .panel-response-error,
+  .panel-response-redirect,
+  .panel-response-callback {
+    --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+
+    --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
+    --panel-heading-font-size-local: var(--panel-response-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-response-heading-line-height);
+    --panel-heading-padding-local: var(--panel-response-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+    --panel-heading-white-space-local: normal;
+    --panel-body-padding-local: var(--panel-body-padding);
+  }
+
+  /**
+  * @tokens Panel response success colors
+  * @presenter Color
+  */
+
+  .panel-response-success {
+    --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-success-body-text-color);
+    --panel-body-background-color: var(--panel-response-success-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-success-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-success-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response info colors
+  * @presenter Color
+  */
+
+  .panel-response-info {
+    --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-info-body-text-color);
+    --panel-body-background-color: var(--panel-response-info-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-info-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-info-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response error colors
+  * @presenter Color
+  */
+
+  .panel-response-error {
+    --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-error-body-text-color);
+    --panel-body-background-color: var(--panel-response-error-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-error-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-error-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response redirect colors
+  * @presenter Color
+  */
+
+  .panel-response-redirect {
+    --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border
+    --panel-body-text-color: var(--panel-response-redirect-body-text-color);
+
+    --panel-body-background-color: var(--panel-response-redirect-body-background-color);
+    --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response callback colors
+  * @presenter Color
+  */
+
+  .panel-response-callback {
+    --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-callback-body-text-color);
+    --panel-body-background-color: var(--panel-response-callback-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
+  }
+
+  // @tokens End
+`;
+exports.apiReferencePanels = (0, styled_components_1.css) `
+  /**
+  * @tokens Panels spacing
+  * @presenter Spacing
+  */
+
+  --panel-gap-horizontal: var(--spacing-xl);
+  --panel-gap-vertical: var(--spacing-base);
+
+  /**
+  * @tokens Panel common
+  */
+
+  --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --panel-border: 1px solid var(--border-primary); // @presenter Border
+
+  --panel-line-height: var(--line-height-base); // @presenter LineHeight
+  --panel-font-size: var(--font-size-base); // @presenter FontSize
+  --panel-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+  * @tokens Panel heading common
+  */
+
+  --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-heading-font-size: 18px; // @presenter FontSize
+  --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --panel-heading-text-color: var(--text-primary);
+  --panel-heading-padding: var(--spacing-base);
+  --panel-heading-line-height: 1; // @presenter LineHeight
+  --panel-heading-white-space: 'nowrap';
+  --panel-heading-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Panel body common
+  */
+
+  --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-body-font-size: var(--font-size-base); // @presenter FontSize
+  --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --panel-body-text-color: var(--text-secondary);
+  --panel-body-padding: var(--spacing-base);
+  --panel-body-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Panel default, response, callback, security schemas
+  */
+
+  .panel-request-schemas,
+  .panel-response-schemas,
+  .panel-callback-schemas,
+  .panel-security-schemas,
+  .panel-default {
+    --panel-text-color: var(--text-primary); // @presenter Color
+    --panel-font-family-local: var(--panel-font-family);
+    --panel-font-size-local: var(--panel-font-size);
+    --panel-font-weight-local: var(--panel-font-weight);
+    --panel-background-color: var(--bg-base); // @presenter Color
+    --panel-border-local: var(--panel-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--text-primary); // @presenter Color
+
+    --panel-body-text-color: var(--panel-text-color); // @presenter Color
+    --panel-body-font-family-local: var(--panel-body-font-family);
+    --panel-body-font-size-local: var(--panel-body-font-size);
+    --panel-body-font-weight-local: var(--panel-body-font-weight);
+    --panel-body-padding-local: var(--panel-body-padding);
+    --panel-body-background-color: var(--bg-base); // @presenter Color
+    --panel-body-border: var(--panel-body-border); // @presenter Border
+
+    --panel-heading-text-color: var(--panel-text-color); // @presenter Color
+    --panel-heading-font-family-local: var(--panel-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-heading-line-height);
+    --panel-heading-padding-local: var(--panel-heading-padding);
+    --panel-heading-background-color: var(--bg-base); // @presenter Color
+    --panel-heading-border: var(--panel-heading-border); // @presenter Border
+    --panel-heading-white-space-local: var(--panel-heading-white-space);
+  }
+
+  /**
+  * @tokens Panel samples common
+  */
+
+  --panel-samples-block-background-color: var(--bg-base); // @presenter Color
+  --panel-samples-width: 50%;
+
+  --panel-samples-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight
+  --panel-samples-background-color: var(--bg-raised); // @presenter Color
+  --panel-samples-border: var(--panel-border); // @presenter Border
+  --panel-samples-chevron-icon-color: var(--text-primary); // @presenter Color
+
+  /**
+  * @tokens Panel samples body common
+  */
+
+  --panel-samples-body-text-color: var(--text-secondary); // @presenter Color
+  --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
+  --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize
+  --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
+  --panel-samples-body-padding: var(--panel-body-padding);
+  --panel-samples-body-background-color: var(--bg-raised); // @presenter Color
+  --panel-samples-body-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel samples heading common
+  */
+
+  --panel-samples-heading-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily
+  --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-samples-heading-line-height: var(--line-height-xxlg); // @presenter LineHeight
+  --panel-samples-heading-padding: 0 20px;
+  --panel-samples-heading-background-color: var(--bg-overlay); // @presenter Color
+  --panel-samples-heading-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel samples default
+  */
+  .panel-samples-default {
+    --text-color: var(--panel-samples-text-color);
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: 0;
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
+  /**
+  * @tokens Panel try-it, request-samples, response-samples, callback samples
+  */
+
+  .panel-try-it,
+  .panel-pull-right,
+  .panel-request-samples,
+  .panel-response-samples,
+  .panel-callback-samples {
+    --text-color: var(--panel-samples-text-color);
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: var(--panel-samples-body-padding);
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
+  /**
+  * @tokens Panel try-it nested common
+  * @presenter Color
+  */
+
+  --panel-try-it-nested-text-color: var(--text-primary);
+  --panel-try-it-nested-chevron-icon-color: var(--text-primary);
+
+  --panel-try-it-nested-body-background-color: var(--bg-raised);
+  --panel-try-it-nested-body-text-color: var(--text-secondary);
+  --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing
+  --panel-try-it-nested-body-border-color: var(--border-primary);
+
+  --panel-try-it-nested-heading-text-color: var(--text-primary);
+  --panel-try-it-nested-heading-background-color: transparent;
+  --panel-try-it-nested-heading-border-color: var(--border-primary);
+
+  /**
+  * @tokens Panel try-it nested
+  * @presenter Color
+  */
+
+  .panel-try-it-nested {
+    --panel-text-color: var(--panel-try-it-nested-text-color);
+    --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);
+
+    --panel-body-text-color: var(--panel-try-it-nested-body-text-color);
+    --panel-body-background-color: var(--panel-try-it-nested-body-background-color);
+    --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing
+
+    --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);
+    --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);
+  }
+
+  /**
+  * @tokens Panel samples tabs
+  */
+
+  --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+
+  --panel-samples-tabs-text-color: var(--text-secondary); // @presenter Color
+  --panel-samples-tabs-hover-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-tabs-active-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
+
+  --panel-samples-tabs-background-color: transparent; // @presenter Color
+  --panel-samples-tabs-hover-background-color: transparent; // @presenter Color
+  --panel-samples-tabs-active-background-color: var(--bg-base); // @presenter Color
+
+  --panel-samples-code-block-background-color: var(--code-block-background-color); // @presenter Color
+
+  /**
+  * @tokens Panel try-it tabs
+  */
+
+  --panel-try-it-tabs-font-size: var(--font-size-sm);
+  --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+
+  --panel-try-it-tabs-text-color: var(--text-secondary); // @presenter Color
+  --panel-try-it-tabs-hover-text-color: var(--text-primary); // @presenter Color
+  --panel-try-it-tabs-active-text-color: var(--text-primary); // @presenter Color
+  --panel-try-it-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
+
+  --panel-try-it-tabs-background-color: none; // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--bg-raised); // @presenter Color
+  --panel-try-it-tabs-active-background-color: var(--bg-base); // @presenter Color
+  --panel-try-it-tabs-disabled-background-color: none; // @presenter Color
+
+  /**
+  * @tokens Panel try-it action button
+  */
+
+  --panel-try-it-action-button-width: auto;
+  --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-try-it-action-button-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-text-wrap: var(--button-text-wrap);
+  --panel-try-it-action-button-background-color: var(--color-primary); // @presenter Color
+  --panel-try-it-action-button-border-color: var(--color-primary); // @presenter Color
+
+  --panel-try-it-action-button-active-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-primary-active); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-primary-active); // @presenter Color
+
+  --panel-try-it-action-button-hover-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-hover-background-color: var(--color-primary-hover); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-primary-hover); // @presenter Color
+
+  /**
+  * @tokens Panel samples other styles
+  */
+  --panel-samples-dropdown-background-color: var(--bg-base); // @presenter Color
+  --panel-samples-dropdown-color: var(--text-secondary); // @presenter Color
+  --panel-samples-dropdown-border: 1px solid var(--border-primary); // @presenter Border
+
+  /**
+  * @tokens Panel try-it other styles
+  */
+
+  --panel-try-it-input-background-color: var(--bg-base); // @presenter Color
+  --panel-try-it-input-text-color: var(--text-secondary); // @presenter Color
+  --panel-try-it-input-border: 1px solid var(--border-primary); // @presenter Border
+
+  --panel-try-it-dropdown-background-color: var(--bg-base); // @presenter Color
+  --panel-try-it-dropdown-color: var(--text-secondary); // @presenter Color
+  --panel-try-it-dropdown-border: 1px solid var(--border-primary); // @presenter Border
+  --panel-try-it-border: 1px solid var(--border-primary); // @presenter Border
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Product/Product.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ProductConfig } from '../../config';
+export type ProductProps = {
+    product: ProductConfig;
+    className?: string;
+};
+export declare const Product: ({ product, className }: ProductProps) => JSX.Element | null;

package/lib/components/Product/Product.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Product = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Product = ({ product, className }) => {
+    return (react_1.default.createElement(ProductWrapper, { "data-component-name": "Product/Product", className: className },
+        product.icon && react_1.default.createElement(ProductLogo, { src: product.icon }),
+        react_1.default.createElement("span", null, product.name)));
+};
+exports.Product = Product;
+const ProductWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const ProductLogo = styled_components_1.default.img `
+  margin-right: var(--product-logo-margin);
+  max-height: var(--select-line-height);
+`;
+//# sourceMappingURL=Product.js.map

package/lib/components/Product/ProductPicker.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ProductPicker: () => React.JSX.Element | null;

package/lib/components/Product/ProductPicker.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPicker = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
+const usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
+const icons_1 = require("../../icons");
+const Select_1 = require("../../components/Select");
+const Product_1 = require("../../components/Product");
+const ProductPicker = () => {
+    var _a;
+    const globalData = (0, hooks_1.useGlobalData)();
+    const currentProduct = (0, hooks_1.useCurrentProduct)();
+    const { push } = (0, usePreloadHistory_1.usePreloadHistory)();
+    const products = Object.values(((_a = globalData === null || globalData === void 0 ? void 0 : globalData.theme) === null || _a === void 0 ? void 0 : _a.products) || {});
+    const productComponents = products.map((product) => ({
+        element: react_1.default.createElement(Product_1.Product, { product: product }),
+        value: product,
+    }));
+    return products.length ? (react_1.default.createElement(ProductSelect, { value: currentProduct, placeholder: "Products", options: productComponents, triggerEvent: "hover", onChange: (product) => {
+            if (!product)
+                return;
+            push(product.link);
+        } })) : null;
+};
+exports.ProductPicker = ProductPicker;
+const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Product/ProductPicker',
+    },
+})) `
+  --select-list-item-active-background-color: var(
+    --product-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--product-picker-list-item-hover-background-color);
+
+  display: none;
+  font-size: var(--product-picker-font-size);
+  font-weight: var(--product-picker-font-weight);
+  line-height: var(--product-picker-line-height);
+  border-radius: var(--product-picker-border-radius);
+  color: var(--product-picker-text-color);
+
+  ${Select_1.SelectInput} {
+    border-radius: var(--product-picker-input-border-radius);
+    padding: var(--product-picker-input-padding-vertical)
+      var(--product-picker-input-padding-horizontal);
+    color: var(--navbar-text-color);
+
+    a {
+      color: var(--navbar-text-color);
+    }
+  }
+
+  ${Select_1.SelectList} {
+    min-width: var(--product-picker-list-min-width);
+    max-width: var(--product-picker-list-max-width);
+    padding: var(--product-picker-list-padding);
+    background-color: var(--product-picker-list-background-color);
+    border-radius: var(--product-picker-list-border-radius);
+    box-shadow: var(--product-picker-list-box-shadow);
+  }
+
+  ${Select_1.SelectListItem} {
+    border-radius: var(--product-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--product-picker-list-item-vertical-padding)
+        var(--product-picker-list-item-horizontal-padding);
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+  }
+
+  ${icons_1.ArrowIcon} {
+    fill: var(--navbar-text-color);
+  }
+`;
+//# sourceMappingURL=ProductPicker.js.map

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

@@ -0,0 +1,3 @@
+export * from '../../components/Product/ProductPicker';
+export * from '../../components/Product/Product';
+export * from '../../components/Product/styledVariables';

package/lib/components/Product/index.js

@@ -0,0 +1,20 @@
+"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/Product/ProductPicker"), exports);
+__exportStar(require("../../components/Product/Product"), exports);
+__exportStar(require("../../components/Product/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

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

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