@redocly/theme 0.41.0-rc.4 → 0.42.0

package/lib/components/Select/Select.js

@@ -26,148 +26,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectWrapper = exports.Select = void 0;
+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 CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
-const SelectInput_1 = require("../../components/Select/SelectInput");
-const Dropdown_1 = require("../../components/Dropdown/Dropdown");
-const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
-const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const hooks_1 = require("../../core/hooks");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
+const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
 function Select(props) {
-    const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, dataTestId = 'select', multiple, searchable, clearable, footer, onChange, onSearch, renderInput, renderDivider, } = props;
-    const getSelectedOptionsFromPropsValue = () => {
-        const values = Array.isArray(value) ? value : [value];
-        return values
-            .map((value) => {
-            const selectedOption = options.find((option) => option.value === value);
-            return selectedOption || typeof value === 'string'
-                ? { value }
-                : value;
-        })
-            .filter((option) => !!option);
-    };
-    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(getSelectedOptionsFromPropsValue());
-    const selectRef = (0, react_1.useRef)(null);
-    const [searchValue, setSearchValue] = (0, react_1.useState)(null);
-    const [dropdownActive, setDropdownActive] = (0, react_1.useState)(false);
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
-    const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
-    const inputId = (0, react_1.useId)();
-    (0, hooks_1.useOutsideClick)(selectRef, () => {
-        setDropdownActive(false);
-    });
-    (0, react_1.useEffect)(() => {
-        setFilteredOptions(options);
-    }, [options]);
-    (0, react_1.useEffect)(() => {
-        setSelectedOptions(getSelectedOptionsFromPropsValue());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [multiple, value]);
-    (0, react_1.useEffect)(() => {
-        if (onSearch) {
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
-        }
-        else {
-            if (typeof searchValue === 'string') {
-                const filteredOptions = options.filter((option) => {
-                    var _a, _b;
-                    const valueForSearch = String((_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '');
-                    return (!valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
-                });
-                setFilteredOptions(filteredOptions);
-            }
-            else {
-                setFilteredOptions(options);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchValue]);
-    const selectHandler = (selectedOption) => {
-        const newSelectedOptions = multiple
-            ? isSelected(selectedOption)
-                ? selectedOptions.filter((option) => option.value !== selectedOption.value)
-                : [...selectedOptions, selectedOption]
-            : [selectedOption];
-        const newSelectedValues = newSelectedOptions.length
-            ? multiple
-                ? newSelectedOptions.map((o) => o.value)
-                : newSelectedOptions[0].value
-            : multiple
-                ? []
-                : '';
-        setSelectedOptions(newSelectedOptions);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
-        setSearchValue(null);
-        setDropdownActive(false);
-        if (!multiple) {
-            setStickyInputValue('');
-        }
-    };
-    const searchHandler = (e) => {
-        const targetValue = e.target.value;
-        setSearchValue(targetValue);
-        setDropdownActive(true);
-    };
-    const clearHandler = (option) => {
-        if (option) {
-            selectHandler(option);
-        }
-        else {
-            if (!multiple) {
-                setStickyInputValue('');
-            }
-            setSelectedOptions([]);
-            onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? [] : '');
-        }
+    const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, renderInput, renderDivider, dataTestId = 'select', } = props;
+    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 inputBlurHandler = (e) => {
-        var _a, _b;
-        const relatedTarget = e.relatedTarget;
-        const isDropdownItem = ((_a = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.attributes.getNamedItem('data-component-name')) === null || _a === void 0 ? void 0 : _a.value) ===
-            'Dropdown/DropdownMenuItem';
-        if (!isDropdownItem) {
-            if (!e.relatedTarget || ((_b = e.relatedTarget) === null || _b === void 0 ? void 0 : _b.id) !== inputId) {
-                setDropdownActive(false);
-            }
-            setSearchValue(null);
-            setStickyInputValue('');
-        }
+    const handleClose = () => {
+        setIsOpen(false);
     };
-    const inputFocusHandler = () => {
-        if (!multiple && selectedOptions.length) {
-            setStickyInputValue(selectedOptions[0].label || selectedOptions[0].value);
-        }
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
     };
-    const inputClickHandler = () => {
-        setDropdownActive(!dropdownActive);
+    const handleSelect = (value) => {
+        // setSelectedIdx(options.findIndex(o => o.value === value));
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
-    const isSelected = (option) => {
-        return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
-    };
-    const renderDefaultInput = () => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
-    };
-    return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className }),
-        react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
-                return (react_1.default.createElement(react_1.Fragment, { key: index },
-                    react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon && isSelected(option) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null) }, typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element)),
-                    renderDivider && index !== options.length - 1 ? renderDivider() : null));
-            }) || 'No results')))));
+    (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);
+    const renderDefaultInput = () => (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(ChevronUpIcon_1.ChevronUpIcon, { size: "14px" }) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "14px" }) : null));
+    return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+        renderInput ? renderInput({ isOpen }) : renderDefaultInput(),
+        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => {
+            const selected = option.value === value;
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
+                    typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element),
+                    !hideCheckmarkIcon && selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)),
+                renderDivider && index !== options.length - 1 ? renderDivider() : null));
+        })))));
 }
 exports.Select = Select;
-exports.SelectWrapper = styled_components_1.default.div `
-  display: flex;
-  width: 100%;
+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);
-  border: var(--search-trigger-border-width) var(--search-trigger-border-style)
-    var(--search-trigger-border-color);
   color: var(--select-text-color);
   min-width: 0;
 
@@ -176,15 +88,67 @@ exports.SelectWrapper = styled_components_1.default.div `
     opacity: 0.59;
     pointer-events: none;
   `}
+  a {
+    display: block;
+    text-decoration: none;
+    color: var(--select-text-color);
+  }
 `;
-const SelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  width: 100%;
+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);
+  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-bg-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 `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--select-list-item-border-radius);
+  gap: var(--select-list-item-gap);
+  padding: var(--select-list-item-padding);
+  ${({ selected }) => selected &&
+    `
+      font-weight: var(--select-list-item-font-weight-active);
+      background-color: var(--select-list-item-bg-color-active);
+      &:hover { background-color: var(--select-list-item-bg-color-active)};
+    `}
 
-  > * {
-    width: 100%;
+  & > * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    background-color: var(--select-list-item-bg-color-hover);
   }
-`;
-const SelectDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
-  width: 100%;
 `;
 //# sourceMappingURL=Select.js.map

package/lib/components/Select/variables.js

@@ -11,18 +11,10 @@ exports.select = (0, styled_components_1.css) `
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
-  
   --select-input-padding-vertical: 6px; // @presenter Spacing
-  --select-input-padding-horizontal: 6px; // @presenter Spacing
+  --select-input-padding-horizontal: 16px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
-  --select-input-gap: var(--spacing-xs); // @presenter Spacing
-  --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
   --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
-  --select-input-font-size: var(--font-size-base); // @presenter FontSize
-  --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --select-input-line-height: var(--line-height-base); // @presenter LineHeight
-  --select-input-bg-color: var(--bg-color); // @presenter Color
-  --select-input-placeholder-color: var(--input-content-placeholder-color); // @presenter Color
 
   --select-list-min-width: 100px;
   --select-list-max-width: 300px;
@@ -40,8 +32,6 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
-
-  --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Tag/Tag.d.ts

@@ -16,9 +16,7 @@ export type TagProps = {
     statusDotColor?: string;
     size?: string;
     icon?: React.ReactNode;
-    active?: boolean;
-    onClick?: (event: React.MouseEvent) => void;
-    onClose?: (event: React.MouseEvent) => void;
+    onClick?: () => void;
 };
-export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -17,41 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
-const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
-    return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
+    var { children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "onClick", "size", "borderless", "withStatusDot", "statusDotColor"]);
+    return (react_1.default.createElement(TagContainer, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        react_1.default.createElement(ContentWrapper, null, children),
-        closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
-                onClose === null || onClose === void 0 ? void 0 : onClose(event);
-            } },
-            react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
-        active && react_1.default.createElement(ActiveIcon, null)));
+        children));
 }
 exports.Tag = Tag;
-const ContentWrapper = styled_components_1.default.div `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-wrap: nowrap;
-
-  padding: var(--tag-content-padding);
-  gap: var(--tag-content-gap);
-`;
-const CloseButton = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
-
-  &:hover {
-    background: var(--tag-close-button-bg-color-hover);
-  }
-`;
-const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size }) => ({
+const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     className: (className || '') +
         ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
@@ -59,10 +32,8 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   align-items: center;
   justify-content: center;
   text-wrap: nowrap;
-  position: relative;
 
   padding: var(--tag-padding);
-  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
   margin: var(--tag-margin);
 
   &:last-child {
@@ -93,11 +64,4 @@ const StatusDot = styled_components_1.default.div `
   border-radius: 50%;
   background-color: ${({ color }) => color};
 `;
-const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
-`;
 //# sourceMappingURL=Tag.js.map

package/lib/components/Tag/variables.dark.js

@@ -3,26 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.tagDarkMode = (0, styled_components_1.css) `
-  --tag-operation-color-delete: #fa82a2; // @presenter Color
-  --tag-operation-bg-color-delete: #77214C; // @presenter Color
-
-  --tag-operation-color-get: #68cc97; // @presenter Color
-  --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
-
-  --tag-operation-color-post: #90b0f0; // @presenter Color
-  --tag-operation-bg-color-post: #233061; // @presenter Color
-
-  --tag-operation-color-put: #e0a663; // @presenter Color
-  --tag-operation-bg-color-put: #612729; // @presenter Color
-
-  --tag-operation-color-patch: #e0c363; // @presenter Color
-  --tag-operation-bg-color-patch: #5C3721; // @presenter Color
-
-  --tag-operation-color-head: #e6e1fe; // @presenter Color
-  --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
-
-  --tag-operation-color-options: #1a1c21; // @presenter Color
-  --tag-operation-bg-color-options: #2a2b33; // @presenter Color
+  --tag-operation-color-delete: #fa82a2;
+  --tag-operation-color-get: #68cc97;
+  --tag-operation-color-post: #90b0f0;
+  --tag-operation-color-put: #e0a663;
+  --tag-operation-color-patch: #e0c363;
 
   .tag-grey,
   .tag-draft,

package/lib/components/Tag/variables.js

@@ -9,7 +9,7 @@ exports.tag = (0, styled_components_1.css) `
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
@@ -22,17 +22,8 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag spacing
     */
 
-  --tag-padding-vertical: 1px; //@presenter Spacing
-  --tag-padding-horizontal: 8px; //@presenter Spacing
-  --tag-padding: 0 var(--tag-padding-horizontal); //@presenter Spacing
-  --tag-content-padding: var(--tag-padding-vertical) 0; //@presenter Spacing
-  --tag-content-gap: 4px; //@presenter Spacing
-
-  --tag-large-padding-vertical: 4px; //@presenter Spacing
-  --tag-large-padding-horizontal: 16px; //@presenter Spacing
-  --tag-large-padding: 0 var(--tag-large-padding-horizontal); //@presenter Spacing
-  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
-  
+  --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -42,7 +33,6 @@ exports.tag = (0, styled_components_1.css) `
 
   .tag-size-large {
     --tag-padding: var(--tag-large-padding);
-    --tag-content-padding: var(--tag-large-content-padding);
     --tag-font-size: var(--font-size-base);
   }
 
@@ -77,7 +67,6 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--text-color-primary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   .tag-green,
@@ -86,7 +75,6 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
   }
 
   .tag-red,
@@ -95,7 +83,6 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
     --tag-border-color: var(--color-error-active); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
   }
 
   .tag-gold,
@@ -104,7 +91,6 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
   }
 
   .tag-blue,
@@ -112,7 +98,6 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
   }
 
   .tag-purple,
@@ -120,24 +105,26 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
   }
 
   .tag-cyan,
-  .tag-option,
-  .tag-geekblue,
-  .tag-link {
+  .tag-option {
     --tag-color: var(--color-turquoise-7); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
     --tag-border-color: var(--color-turquoise-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
   }
 
   .tag-yellow {
     --tag-color: var(--color-carrot-7); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
     --tag-border-color: var(--color-carrot-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+  }
+
+  .tag-geekblue,
+  .tag-link {
+    --tag-color: var(--color-turquoise-7); // @presenter Color
+    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
+    --tag-border-color: var(--color-turquoise-7); // @presenter Color
   }
 
   .tag-magenta,
@@ -145,21 +132,18 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
     --tag-border-color: var(--color-magenta-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
   }
 
   .tag-lime {
     --tag-color: var(--color-green-7); // @presenter Color
     --tag-bg-color: none; // @presenter Color
     --tag-border-color: var(--color-green-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
   }
 
   .tag-product {
     --tag-color: var(--color-warm-grey-7); // @presenter Color
     --tag-bg-color: transparent; // @presenter Color
     --tag-border-color: var(--color-warm-grey-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   /**
@@ -174,28 +158,12 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Operation tag colors
     */
 
-  --tag-operation-color-delete: #e70b46; // @presenter Color
-  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
-  
-  --tag-operation-color-get: #25b869; // @presenter Color
-  --tag-operation-bg-color-get: #e5faef; // @presenter Color
-  
-  --tag-operation-color-post: #1e65f5; // @presenter Color
-  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
-  
-  --tag-operation-color-put: #f5901d; // @presenter Color
-  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
-  
-  --tag-operation-color-patch: #f5c31d; // @presenter Color
-  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
-
-  --tag-operation-color-head: #5b4ccc; // @presenter Color
-  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
-
-  --tag-operation-color-options: #1a1c21; // @presenter Color
-  --tag-operation-bg-color-options: #ededf2; // @presenter Color
-  
-  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
+  --tag-operation-color-delete: #E70B46;
+  --tag-operation-color-get: #25B869;
+  --tag-operation-color-post: #1E65F5;
+  --tag-operation-color-put: #F5901D;
+  --tag-operation-color-patch: #F5C31D;
+  --tag-operation-color-deprecated: var(--text-color-disabled);
 
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color

package/lib/components/VersionPicker/VersionPicker.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { Version } from '@redocly/config';
-import type { SelectProps } from '../../core/types/select';
-import { Select } from '../../components/Select/Select';
+import { Select, type SelectProps } from '../../components/Select/Select';
+export interface VersionPickerProps extends SelectProps {
+}
 export declare function VersionPicker(props: {
     versions?: Version[];
     onChange: (v: Version) => void;