@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Scorecard/Gauge.js

@@ -0,0 +1,61 @@
+"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.GaugeValue = exports.Gauge = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Gauge({ chunks, className }) {
+    const title = chunks
+        .map((chunk) => chunk.title)
+        .filter(Boolean)
+        .join(', ');
+    return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
+}
+exports.Gauge = Gauge;
+exports.GaugeValue = styled_components_1.default.span `
+  font-size: var(--font-size-lg);
+  line-height: var(line-height-regular);
+
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 0;
+  text-align: right;
+  width: 70px;
+`;
+const GaugeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  height: 10px;
+  width: 100%;
+`;
+const GaugeChunk = styled_components_1.default.div `
+  width: ${(props) => props.share}%;
+  background-color: ${(props) => props.color};
+  height: 10px;
+`;
+//# sourceMappingURL=Gauge.js.map

package/lib/components/Scorecard/StatusByLevelWidget.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface StatusByLevelWidgetProps {
+    title: string;
+    levels: {
+        name: string;
+        errors: number;
+        warnings: number;
+        total: number;
+    }[];
+    className?: string;
+}
+export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): React.JSX.Element;

package/lib/components/Scorecard/StatusByLevelWidget.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.StatusByLevelWidget = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Gauge_1 = require("../../components/Scorecard/Gauge");
+const Card_1 = require("../../components/Scorecard/Card");
+function StatusByLevelWidget(props) {
+    const { levels, title, className } = props;
+    return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
+        React.createElement(Card_1.ScorecardCardTitle, null, title),
+        React.createElement(CardBody, null, levels.map((level) => {
+            const success = level.total - level.errors - level.warnings;
+            return (React.createElement(CardRow, { key: level.name },
+                React.createElement("span", null, level.name),
+                React.createElement(Gauge_1.Gauge, { chunks: [
+                        {
+                            share: (success / level.total) * 100,
+                            color: 'var(--scorecard-color-success)',
+                            title: `${success} passed`,
+                        },
+                        {
+                            share: (level.warnings / level.total) * 100,
+                            color: 'var(--scorecard-color-warning)',
+                            title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
+                        },
+                        {
+                            share: (level.errors / level.total) * 100,
+                            color: 'var(--scorecard-color-error)',
+                            title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
+                        },
+                    ] }),
+                React.createElement(Gauge_1.GaugeValue, null,
+                    success,
+                    "/",
+                    level.total)));
+        }))));
+}
+exports.StatusByLevelWidget = StatusByLevelWidget;
+const CardBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+const CardRow = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  align-items: center;
+
+  > span:first-child {
+    text-align: right;
+    width: 100px;
+  }
+`;
+//# sourceMappingURL=StatusByLevelWidget.js.map

package/lib/components/Search/CancelSearch.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function CancelSearch({ onClick, className, }: {
+    onClick: () => void;
+    className?: string;
+}): JSX.Element;

package/lib/components/Search/CancelSearch.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.CancelSearch = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
+const Button_1 = require("../../components/Button");
+function CancelSearch({ onClick, className, }) {
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick, className: className },
+        React.createElement(Button_1.Button, { "data-translation-keys": "theme.search.cancel", fullWidth: true, variant: "outlined" }, translate('theme.search.cancel', 'Cancel'))));
+}
+exports.CancelSearch = CancelSearch;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  padding: 12px 16px 16px;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;
+//# sourceMappingURL=CancelSearch.js.map

package/lib/components/Search/ClearIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+export declare const ClearIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => React.JSX.Element, any, {}, never>;

package/lib/components/Search/ClearIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 298.7 298.7", "data-component-name": "Search/ClearIcon" }, props),
+    react_1.default.createElement("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " })));
+exports.ClearIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
+    'data-component-name': 'Search/ClearIcon',
+    className,
+})) `
+  cursor: pointer;
+  width: 0.5em;
+  height: 0.5em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 0.625em;
+    height: 0.625em;
+  }
+`;
+//# sourceMappingURL=ClearIcon.js.map

package/lib/components/Search/ClockBackwardsIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+export declare const ClockBackwardsIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => React.JSX.Element, any, {}, never>;

package/lib/components/Search/ClockBackwardsIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClockBackwardsIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M10.295 11L7.5 8.205V3.5H8.5V7.79L11 10.295L10.295 11Z" }),
+    react_1.default.createElement("path", { d: "M8 1C7.06748 1.00013 6.14446 1.18739 5.28562 1.55068C4.42677 1.91397 3.64955 2.44591 3 3.115V1H2V5H6V4H3.54C4.47801 2.95765 5.75149 2.27676 7.13926 2.0756C8.52703 1.87444 9.94142 2.16571 11.1368 2.89882C12.3322 3.63193 13.233 4.76057 13.6829 6.08873C14.1327 7.41689 14.1032 8.86066 13.5993 10.1693C13.0955 11.4779 12.1492 12.5688 10.9249 13.2523C9.7005 13.9359 8.27537 14.1691 6.897 13.9113C5.51862 13.6535 4.27407 12.9211 3.3795 11.8412C2.48492 10.7614 1.99683 9.40227 2 8H1C1 9.38447 1.41054 10.7378 2.17971 11.889C2.94888 13.0401 4.04213 13.9373 5.32122 14.4672C6.6003 14.997 8.00776 15.1356 9.36563 14.8655C10.7235 14.5954 11.9708 13.9287 12.9497 12.9497C13.9287 11.9708 14.5954 10.7235 14.8655 9.36563C15.1356 8.00776 14.997 6.6003 14.4672 5.32122C13.9373 4.04213 13.0401 2.94888 11.889 2.17971C10.7378 1.41054 9.38447 1 8 1Z" })));
+exports.ClockBackwardsIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
+    'data-component-name': 'Search/RecentlyViewedIcon',
+    className,
+})) `
+  width: 0.5em;
+  height: 0.5em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 0.625em;
+    height: 0.625em;
+  }
+`;
+//# sourceMappingURL=ClockBackwardsIcon.js.map

package/lib/components/Search/Input.d.ts

@@ -0,0 +1 @@
+export declare const FormInput: import("styled-components").StyledComponent<"input", any, {}, never>;

package/lib/components/Search/Input.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FormInput = styled_components_1.default.input.attrs(({ className }) => ({
+    'data-component-name': 'Search/Input',
+    className,
+})) `
+  padding: 1em 2.5em 1em 2.5em;
+  background-color: var(--search-input-background-color);
+  border-radius: var(--search-input-border-radius);
+  border: var(--search-input-border);
+  outline: none;
+  color: var(--search-input-text-color);
+  font-size: var(--search-input-font-size);
+  font-family: var(--search-input-font-family);
+  line-height: var(--search-input-line-height);
+  width: 100%;
+
+  ::placeholder {
+    color: var(--search-input-placeholder-color);
+  }
+`;
+//# sourceMappingURL=Input.js.map

package/lib/components/Search/InputWrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface InputWrapperProps {
+    placeholder?: string;
+    value: string;
+    change(value: string): void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    isLoading: boolean;
+    className?: string;
+}
+export declare function InputWrapper({ placeholder, value, change, isLoading, className, }: InputWrapperProps): JSX.Element;
+export {};

package/lib/components/Search/InputWrapper.js

@@ -0,0 +1,80 @@
+"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.InputWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Input_1 = require("../../components/Search/Input");
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+const SpinnerIcon_1 = require("../../icons/SpinnerIcon");
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function InputWrapper({ placeholder, value, change, isLoading, className, }) {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const refInput = (0, react_1.useRef)(null);
+    const onFocus = () => setIsFocused(true);
+    const close = () => {
+        setIsFocused(false);
+    };
+    const reset = () => {
+        change('');
+        close();
+    };
+    const stopPropagation = (event) => event.stopPropagation();
+    const onChange = (event) => {
+        setIsFocused(true);
+        change(event.target.value);
+    };
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/InputContainer", className: className },
+        isFocused && isLoading ? react_1.default.createElement(SpinnerIcon, null) : react_1.default.createElement(SearchIcon, null),
+        react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onClick: stopPropagation, ref: refInput }),
+        !!value && react_1.default.createElement(ClearIcon, { onClick: reset })));
+}
+exports.InputWrapper = InputWrapper;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  padding: 12px 16px;
+  height: 56px;
+`;
+const SearchIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
+  width: 20px;
+  height: 20px;
+  fill: var(--search-input-placeholder-color);
+`;
+const SpinnerIcon = (0, styled_components_1.default)(SpinnerIcon_1.SpinnerIcon) `
+  width: 20px;
+  height: 20px;
+  fill: var(--search-input-placeholder-color);
+`;
+const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
+  width: 12px;
+  height: 12px;
+  fill: var(--search-input-placeholder-color);
+`;
+//# sourceMappingURL=InputWrapper.js.map

package/lib/components/Search/MobileSearchTrigger.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function MobileSearchTrigger({ onClick, className, }: {
+    onClick: () => void;
+    className?: string;
+}): JSX.Element;

package/lib/components/Search/MobileSearchTrigger.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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSearchTrigger = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+function MobileSearchTrigger({ onClick, className, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/MobileSearchTrigger", onClick: onClick, className: className },
+        React.createElement(SearchIcon, null)));
+}
+exports.MobileSearchTrigger = MobileSearchTrigger;
+const SearchIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
+  width: var(--mobile-menu-search-icon-size);
+  height: var(--mobile-menu-search-icon-size);
+  fill: var(--navbar-text-color);
+`;
+const Wrapper = styled_components_1.default.div `
+  display: block;
+  user-select: none;
+  height: var(--mobile-menu-search-icon-size);
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;
+//# sourceMappingURL=MobileSearchTrigger.js.map

package/lib/components/Search/Popover.d.ts

@@ -0,0 +1 @@
+export declare const Popover: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Search/Popover.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Popover = styled_components_1.default.div.attrs(({ className }) => ({
+    'data-component-name': 'Search/Popover',
+    className,
+})) `
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  z-index: var(--z-index-raised);
+  min-width: 100%;
+  max-width: 90vw;
+  max-height: 400px;
+  overflow-y: auto;
+  box-shadow: var(--search-popover-shadow);
+  background: var(--search-popover-background-color);
+  list-style: none;
+  border-radius: var(--search-popover-border-radius);
+  border: var(--search-popover-border);
+  width: 100%;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    width: 400px;
+  }
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.medium; }} {
+    width: 550px;
+  }
+`;
+//# sourceMappingURL=Popover.js.map

package/lib/components/Search/ProductTag.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function ProductTag({ label, className, onRemove, }: {
+    label: string;
+    className?: string;
+    onRemove?: () => void;
+}): JSX.Element;

package/lib/components/Search/ProductTag.js

@@ -0,0 +1,61 @@
+"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.ProductTag = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function ProductTag({ label, className, onRemove, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/ProductTag", className: className },
+        React.createElement(Label, null, label),
+        onRemove && React.createElement(ClearIcon, { onClick: onRemove })));
+}
+exports.ProductTag = ProductTag;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1px 8px;
+  gap: 4px;
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-xlg);
+  margin-right: var(--spacing-base);
+`;
+const Label = styled_components_1.default.span `
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+`;
+const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
+  width: 8px;
+  height: 8px;
+  fill: var(--search-input-placeholder-color);
+`;
+//# sourceMappingURL=ProductTag.js.map

package/lib/components/Search/RecentSearches.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare function RecentSearches({ onSelect, className, }: {
+    onSelect: (value: string) => void;
+    className?: string;
+}): React.JSX.Element | null;