@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Search/Shortcut.js

@@ -0,0 +1,51 @@
+"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.Shortcut = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Shortcut({ combination, text, className, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/Shortcut", className: className },
+        React.createElement(Key, null, combination),
+        text));
+}
+exports.Shortcut = Shortcut;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  padding: 2px 4px;
+  gap: 8px;
+  color: var(--search-item-text-color);
+`;
+const Key = styled_components_1.default.span `
+  background: rgba(150, 150, 150, 0.1);
+  border: 1px solid rgba(100, 100, 100, 0.2);
+  border-radius: 3px;
+  font-size: 12px;
+  padding: 2px 6px;
+`;
+//# sourceMappingURL=Shortcut.js.map

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ShortcutKeyProps {
+    keyShortcuts?: string | string[];
+    className?: string;
+}
+export declare function ShortcutKey(props: ShortcutKeyProps): JSX.Element;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Search/ShortcutKey.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.Wrapper = exports.ShortcutKey = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function ShortcutKey(props) {
+    let mainShortcutKey = null;
+    if (props.keyShortcuts) {
+        if (Array.isArray(props.keyShortcuts)) {
+            mainShortcutKey = props.keyShortcuts[0];
+        }
+        else {
+            mainShortcutKey = props.keyShortcuts;
+        }
+    }
+    mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
+    return react_1.default.createElement(exports.Wrapper, { className: props.className }, mainShortcutKey);
+}
+exports.ShortcutKey = ShortcutKey;
+exports.Wrapper = styled_components_1.default.div `
+  font-size: var(--search-trigger-shortcut-font-size);
+`;
+//# sourceMappingURL=ShortcutKey.js.map

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare function SuggestedPages({ className }: {
+    className?: string;
+}): React.JSX.Element | null;

package/lib/components/Search/SuggestedPages.js

@@ -0,0 +1,104 @@
+"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.SuggestedPages = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClockBackwardsIcon_1 = require("../../components/Search/ClockBackwardsIcon");
+const search_1 = require("../../mocks/search");
+const Link_1 = require("../../mocks/Link");
+const hooks_1 = require("../../mocks/hooks");
+function SuggestedPages({ className }) {
+    const pages = (0, search_1.useSuggestedPages)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    if (!pages.length)
+        return null;
+    return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages", className: className },
+        React.createElement(Title, { "data-translation-key": "theme.search.suggested" }, translate('theme.search.suggested', 'Suggested pages')),
+        React.createElement(SuggestedItems, null, pages.map((page) => page.link ? (React.createElement(Item, { key: page.label },
+            React.createElement(PageLink, Object.assign({ to: page.link }, page),
+                React.createElement(Group, null,
+                    React.createElement(ClockBackwardsIcon, null),
+                    page.label)))) : null))));
+}
+exports.SuggestedPages = SuggestedPages;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const Title = styled_components_1.default.div `
+  color: var(--search-item-title-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  padding: 8px 24px;
+`;
+const SuggestedItems = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  order: 1;
+`;
+const ClockBackwardsIcon = (0, styled_components_1.default)(ClockBackwardsIcon_1.ClockBackwardsIcon) `
+  width: 16px;
+  height: 16px;
+  fill: #8d8d8d;
+`;
+const Item = styled_components_1.default.div `
+  display: flex;
+  font-size: var(--font-size-base);
+  align-items: center;
+  padding: 0 12px 4px;
+  width: 100%;
+`;
+const PageLink = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+  color: var(--search-item-text-color);
+  width: 100%;
+  padding: 8px 12px;
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--search-item-active-background-color);
+    color: var(--search-item-active-text-color);
+
+    ${ClockBackwardsIcon} {
+      fill: var(--search-item-active-text-color);
+    }
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-primary);
+    border-radius: 2px;
+  }
+`;
+const Group = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+//# sourceMappingURL=SuggestedPages.js.map

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

@@ -0,0 +1,19 @@
+export * from '../../components/Search/InputWrapper';
+export * from '../../components/Search/ClearIcon';
+export * from '../../components/Search/Input';
+export * from '../../components/Search/Popover';
+export * from '../../components/Search/Search';
+export * from '../../components/Search/SearchDialog';
+export * from '../../components/Search/SearchIcon';
+export * from '../../components/Search/SearchItem';
+export * from '../../components/Search/SearchTrigger';
+export * from '../../components/Search/Shortcut';
+export * from '../../components/Search/ShortcutKey';
+export * from '../../components/Search/RecentSearches';
+export * from '../../components/Search/ClockBackwardsIcon';
+export * from '../../components/Search/SuggestedPages';
+export * from '../../components/Search/MobileSearchTrigger';
+export * from '../../components/Search/CancelSearch';
+export * from '../../components/Search/ProductTag';
+export * from '../../components/Search/utils';
+export * from '../../components/Search/styledVariables';

package/lib/components/Search/index.js

@@ -0,0 +1,36 @@
+"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/Search/InputWrapper"), exports);
+__exportStar(require("../../components/Search/ClearIcon"), exports);
+__exportStar(require("../../components/Search/Input"), exports);
+__exportStar(require("../../components/Search/Popover"), exports);
+__exportStar(require("../../components/Search/Search"), exports);
+__exportStar(require("../../components/Search/SearchDialog"), exports);
+__exportStar(require("../../components/Search/SearchIcon"), exports);
+__exportStar(require("../../components/Search/SearchItem"), exports);
+__exportStar(require("../../components/Search/SearchTrigger"), exports);
+__exportStar(require("../../components/Search/Shortcut"), exports);
+__exportStar(require("../../components/Search/ShortcutKey"), exports);
+__exportStar(require("../../components/Search/RecentSearches"), exports);
+__exportStar(require("../../components/Search/ClockBackwardsIcon"), exports);
+__exportStar(require("../../components/Search/SuggestedPages"), exports);
+__exportStar(require("../../components/Search/MobileSearchTrigger"), exports);
+__exportStar(require("../../components/Search/CancelSearch"), exports);
+__exportStar(require("../../components/Search/ProductTag"), exports);
+__exportStar(require("../../components/Search/utils"), exports);
+__exportStar(require("../../components/Search/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/Search/styledVariables.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.search = void 0;
+const styled_components_1 = require("styled-components");
+exports.search = (0, styled_components_1.css) `
+  /**
+      * @tokens Search
+      */
+
+  --search-highlight-background-color: none; // @presenter Color
+  --search-highlight-text-color: var(--color-info); // @presenter Color
+
+  /**
+      * @tokens Portal Search
+      */
+
+  --search-input-background-color: var(--bg-raised); // @presenter Color
+  --search-input-text-color: var(--text-primary); // @presenter Color
+
+  --search-input-border: none;
+  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-font-size: var(--font-size-base); // @presenter FontSize
+  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
+  --search-input-line-height: 1.15em; // @presenter LineHeight
+
+  --search-input-hover-background-color: var(--bg-raised); // @presenter Color
+  --search-input-hover-border: none; // @presenter Color
+  --search-input-placeholder-color: var(--text-placeholder);
+  --search-input-icons-color: var(--text-placeholder);
+
+  --search-popover-background-color: var(--bg-base); // @presenter Color
+  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
+  --search-popover-shadow: var(--bg-base-shadow); // @presenter BoxShadow
+  --search-popover-border: none;
+
+  --search-item-padding: 8px 24px;
+  --search-item-text-color: var(--text-secondary); // @presenter Color
+  --search-item-title-text-color: var(--text-primary); // @presenter Color
+  --search-item-path-text-color: var(--text-description); // @presenter Color
+  --search-item-background-color: transparent; // @presenter Color
+  --search-item-active-text-color: var(--text-primary); // @presenter Color
+  --search-item-active-title-text-color: var(--text-primary); // @presenter Color
+  --search-item-active-background-color: var(--bg-raised); // @presenter Color
+
+  /**
+    * @tokens Sidebar Search
+    */
+
+  --sidebar-search-button-background-color: transparent; // @presenter Color
+  --sidebar-search-button-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-search-button-border: var(--border-primary);
+  --sidebar-search-button-border-radius: none; // @presenter BorderRadius
+  --sidebar-search-button-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight
+  --sidebar-search-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-search-button-hover-border: var(--border-primary); // @presenter Color
+  --sidebar-search-button-active-background-color: transparent; // @presenter Color
+  --sidebar-search-button-active-border: var(--border-primary); // @presenter Color
+
+  /**
+    * @tokens Search results modal
+    * @presenter Color
+    */
+
+  --search-modal-background: var(--bg-base);
+  --search-modal-text-color: var(--text-primary);
+  --search-modal-border: none;
+  --search-modal-box-shadow: none;
+
+  --search-modal-header-border-radius: var(--border-radius-lg);
+  --search-modal-header-background-color: var(--bg-raised);
+  --search-modal-clear-button-background-color: var(--bg-overlay);
+  --search-modal-clear-button-border: 1px solid var(--bg-overlay);
+  --search-modal-clear-button-hover-background-color: var(--bg-overlay);
+  --search-modal-clear-button-hover-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Sidebar Trigger
+  */
+
+  --search-trigger-padding-horizontal: var(--spacing-sm);
+  --search-trigger-padding-vertical: calc(var(--spacing-unit) * 1.5);
+  --search-trigger-padding: var(--search-trigger-padding-vertical)
+    var(--search-trigger-padding-horizontal);
+  --search-trigger-text-color: var(--text-placeholder);
+  --search-trigger-background-color: var(--bg-base);
+  --search-trigger-border: 1px solid var(--border-primary);
+  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color);
+  --search-trigger-gap: var(--spacing-sm);
+  --search-trigger-font-size: var(--font-size-base);
+  --search-trigger-shortcut-font-size: var(--font-size-sm);
+  --search-trigger-icon-size: 16px;
+  
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const highlight: (text: string | string[]) => JSX.Element | string;

package/lib/components/Search/utils.js

@@ -0,0 +1,46 @@
+"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.highlight = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const highlight = (text) => {
+    if (!Array.isArray(text))
+        return text;
+    const [pre, entry, suf] = text;
+    return (React.createElement(React.Fragment, null,
+        pre,
+        React.createElement(Highlight, null, entry),
+        suf));
+};
+exports.highlight = highlight;
+const Highlight = styled_components_1.default.span `
+  background-color: var(--search-highlight-background-color);
+  color: var(--search-highlight-text-color);
+`;
+//# sourceMappingURL=utils.js.map

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface SelectProps<T = any> {
+    value: T;
+    options: {
+        element: React.ReactNode | string;
+        value: T;
+        label?: string;
+    }[];
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    onChange?: (value: any) => void;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    icon?: React.ReactNode;
+    onlyIcon?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare function Select<T>({ className, value, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, }: SelectProps<T>): React.JSX.Element;
+export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
+    placement?: string | undefined;
+    alignment?: string | undefined;
+}, never>;
+export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {
+    selected: boolean;
+}, never>;

package/lib/components/Select/Select.js

@@ -0,0 +1,139 @@
+"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.SelectListItem = exports.SelectList = exports.SelectInputValue = exports.SelectInput = exports.SelectContainer = exports.Select = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../hooks");
+function Select({ className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleSelect = (value) => {
+        // setSelectedIdx(options.findIndex(o => o.value === value));
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    (0, hooks_1.useOutsideClick)(containerRef, handleClose);
+    // useEffect(() => {
+    //   handleSelect(selected);
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [selected]);
+    const selectedOption = options.find((option) => option.value === value);
+    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { disabled: disabled, "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+        react_1.default.createElement(exports.SelectInput, null,
+            !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
+            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.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => (react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: option.value === value }, typeof option.element === 'string' ? react_1.default.createElement("div", null, option.element) : option.element)))))));
+}
+exports.Select = Select;
+exports.SelectContainer = styled_components_1.default.div `
+  position: relative;
+  font-size: var(--select-font-size);
+  font-weight: var(--select-font-weight);
+  line-height: var(--select-line-height);
+  border-radius: var(--select-border-radius);
+  color: var(--select-text-color);
+  min-width: 0;
+
+  ${({ disabled }) => disabled &&
+    `
+    opacity: 0.59;
+    pointer-events: none;
+  `}
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--select-text-color);
+  }
+`;
+exports.SelectInput = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--select-input-border-radius);
+  padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  cursor: pointer;
+  gap: 8px;
+`;
+exports.SelectInputValue = styled_components_1.default.div `
+  pointer-events: none;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+exports.SelectList = 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(--select-list-min-width);
+  max-width: var(--select-list-max-width);
+  padding: var(--select-list-padding);
+  background-color: var(--select-list-background-color);
+  border-radius: var(--select-list-border-radius);
+  box-shadow: var(--select-list-box-shadow);
+  list-style-type: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+`;
+exports.SelectListItem = styled_components_1.default.li `
+  border-radius: var(--select-list-item-border-radius);
+
+  & > * {
+    padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :hover {
+    background-color: var(--select-list-item-hover-background-color);
+  }
+
+  ${({ selected }) => selected &&
+    `
+    &, &:hover { background-color: var(--select-list-item-active-background-color); }
+    `}
+`;
+//# sourceMappingURL=Select.js.map

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

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

package/lib/components/Select/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/Select/Select"), exports);
+__exportStar(require("../../components/Select/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/Select/styledVariables.js

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

package/lib/components/Separator/Separator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MenuItemProps } from '../../components/Sidebar/types';
+export declare function Separator({ item, className }: MenuItemProps): JSX.Element;