@redocly/theme 0.18.3-patch.8 → 0.18.4

package/lib/components/Catalog/CatalogCard.js

@@ -31,120 +31,89 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Highlight_1 = require("../../ui/Highlight");
-const Tag_1 = require("../../components/Tag");
-const icons_1 = require("../../icons");
+const Tags_1 = require("../../components/Tags");
+const hooks_1 = require("../../mocks/hooks");
 const telemetry_1 = require("../../mocks/telemetry");
-const utils_1 = require("../../utils");
 function CatalogCard({ item }) {
-    var _a, _b;
-    const hasTags = item.scorecardStatus || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
+    var _a;
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        footer: 'theme.catalog.card.footer',
+    };
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardTitle, null,
                 React.createElement(Highlight_1.Highlight, null, item.title)),
-            React.createElement(CardContent, null,
-                React.createElement(CardDescription, null,
-                    React.createElement(Highlight_1.Highlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : '')),
-                React.createElement(CardFooter, null,
-                    hasTags && (React.createElement(CardTags, null,
-                        (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
-                            React.createElement(Highlight_1.Highlight, null, tag)))),
-                        (item.scorecardLevel && item.scorecardStatus && (React.createElement(CardTag, { color: statusToColor(item.scorecardStatus), className: "tag-variant-scorecard-level" },
-                            React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
-                            null)),
-                    React.createElement(SelectButton, null,
-                        React.createElement(icons_1.PointingArrowIcon, null)))))));
+            React.createElement(CardDescription, null,
+                React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
+            item.tags ? React.createElement(Tags_1.Tags, { tags: item.tags }) : null,
+            React.createElement("hr", null),
+            React.createElement(CardFooter, { "data-translation-key": translationKeys.footer }, translate(translationKeys.footer, 'View documentation')))));
 }
 exports.CatalogCard = CatalogCard;
-function statusToColor(status) {
-    switch (status) {
-        case 'Below minimum':
-            return 'error';
-        case 'Minimum':
-            return 'warning';
-        case 'Highest':
-            return 'success';
-        default:
-            return '';
-    }
-}
-const SelectButton = styled_components_1.default.div `
-  border: 1px solid var(--catalog-card-button-border-color);
-  border-radius: 100%;
-  width: var(--catalog-card-button-width);
-  height: var(--catalog-card-button-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-
-  svg {
-    fill: var(--catalog-card-icon-color);
-  }
-`;
-const StyledCard = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/CatalogCard' }) `
-  min-height: var(--catalog-card-min-height);
+const StyledCard = styled_components_1.default.div `
+  min-height: 268px;
   height: 100%;
-  color: var(--catalog-card-text-color);
-  font-size: var(--catalog-card-font-size);
-  font-weight: var(--catalog-card-font-weight);
-  background-color: var(--catalog-card-background-color);
-  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
-  transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-card-border-radius);
-  cursor: pointer;
+  box-shadow: var(--box-shadow);
+
   display: flex;
   flex-direction: column;
 
-  &:hover {
-    border-color: var(--catalog-card-hover-border-color);
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
 
-    ${SelectButton} {
-      transform: rotate(-45deg);
-      border-color: var(--catalog-card-hover-border-color);
-      background: var(--catalog-card-button-hover-background);
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  transition: all 0.2s ease-in-out;
 
-      svg {
-        fill: var(--catalog-card-icon-hover-color);
-      }
-    }
+  &:hover {
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
+
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 `;
 const CardTitle = styled_components_1.default.h4 `
-  color: var(--catalog-card-title-color);
-  min-height: var(--catalog-card-title-min-height);
-  font-size: var(--catalog-card-title-font-size);
-  font-weight: var(--catalog-card-title-font-weight);
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
   margin: 0;
-  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
+  margin-bottom: 16px;
 `;
 const CardDescription = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--catalog-card-description-margin-bottom);
-`;
-const CardContent = styled_components_1.default.div `
-  background-color: var(--catalog-card-content-background-color);
-  border-radius: var(--catalog-card-content-border-radius);
-  padding: var(--catalog-card-content-padding);
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
 `;
 const CardFooter = styled_components_1.default.div `
+  height: 46px;
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-`;
-const CardTags = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-`;
-const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  margin: 0;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
 `;
 //# sourceMappingURL=CatalogCard.js.map

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

@@ -1,4 +1,3 @@
-export * from '../../components/Catalog/Catalog';
-export * from '../../components/Catalog/CatalogCard';
-export * from '../../components/Catalog/useCatalog';
-export * from '../../components/Catalog/styledVariables';
+export * from './Catalog';
+export * from './CatalogCard';
+export * from './useCatalog';

package/lib/components/Catalog/index.js

@@ -14,8 +14,7 @@ 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/Catalog/Catalog"), exports);
-__exportStar(require("../../components/Catalog/CatalogCard"), exports);
-__exportStar(require("../../components/Catalog/useCatalog"), exports);
-__exportStar(require("../../components/Catalog/styledVariables"), exports);
+__exportStar(require("./Catalog"), exports);
+__exportStar(require("./CatalogCard"), exports);
+__exportStar(require("./useCatalog"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -1,30 +1,10 @@
 "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.CodeBlockContainer = void 0;
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
 exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className }) => ({
     'data-component-name': 'CodeBlock/CodeBlockContainer',
@@ -34,28 +14,20 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     overflow-x: auto;
     max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
-    line-height: var(--code-block-line-height);
-    font-weight: var(--code-block-font-weight);
+    line-height: var(--code-line-height);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
+    border-radius: ${(withControls) => withControls
+    ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
+    : 'var(--code-block-border-radius)'};
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
-    font-size: var(--code-block-font-size);
+    font-size: var(--code-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);
-
-    ${(withControls) => withControls
-    ? (0, styled_components_1.css) `
-            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
-            border-left: 1px solid var(--code-block-border-color);
-            border-right: 1px solid var(--code-block-border-color);
-            border-bottom: 1px solid var(--code-block-border-color);
-          `
-    : (0, styled_components_1.css) `
-            border-radius: var(--code-block-border-radius);
-            border: 1px solid var(--code-block-border-color);
-          `}
+    border: none;
+  }
 
   /**
   * Based on prism-dark.css

package/lib/components/CodeBlock/CodeBlockControlButton.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-export declare const CodeBlockControlButton: import("styled-components").StyledComponent<import("react").FC<import("../../components/Button").ButtonProps>, any, {
+export declare const CodeBlockControlButton: import("styled-components").StyledComponent<"button", any, {
+    'data-component-name': string;
+} & {
     asIcon?: boolean | undefined;
-}, never>;
+}, "data-component-name">;

package/lib/components/CodeBlock/CodeBlockControlButton.js

@@ -25,17 +25,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockControlButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
-const Button_1 = require("../../components/Button");
-exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Button) `
-  color: var(--code-block-controls-text-color);
+exports.CodeBlockControlButton = styled_components_1.default.button.attrs(() => ({
+    'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+})) `
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  color: var(--panel-samples-controls-text-color);
 
   ${({ asIcon }) => asIcon
     ? (0, styled_components_1.css) `
-          background-color: var(--code-block-icon-controls-background-color);
+          background-color: var(--panel-samples-icon-controls-background-color);
         `
     : (0, styled_components_1.css) `
           min-width: 90px;
-          background-color: var(--code-block-text-controls-background-color);
+          background-color: var(--panel-samples-text-controls-background-color);
         `}
 
   ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
@@ -45,5 +54,10 @@ exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Butto
   :not(:first-child) {
     margin-left: 5px;
   }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
 `;
 //# sourceMappingURL=CodeBlockControlButton.js.map

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -36,22 +36,19 @@ exports.CodeBlockControls = CodeBlockControls;
 const ContainerWraper = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
+  padding: 5px 10px;
   min-height: 30px;
-  padding: var(--code-block-controls-padding);
-  background-color: var(--code-block-controls-background-color);
-  border-top: var(--code-block-controls-border);
-  border-left: var(--code-block-controls-border);
-  border-right: var(--code-block-controls-border);
-  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  background-color: var(--panel-samples-controls-background-color);
+  border-bottom: var(--panel-samples-controls-border);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   margin-top: 10px;
 `;
 const Title = styled_components_1.default.span `
   display: flex;
   align-items: center;
-  color: var(--code-block-controls-text-color);
+  color: var(--panel-samples-controls-text-color);
 `;
 const ControlsWrapper = styled_components_1.default.div `
-  display: flex;
   opacity: 0.7;
   transition: opacity 0.3s ease;
   text-align: right;

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

@@ -2,4 +2,3 @@ export * from '../../components/CodeBlock/CodeBlock';
 export * from '../../components/CodeBlock/CodeBlockContainer';
 export * from '../../components/CodeBlock/CodeBlockControls';
 export * from '../../components/CodeBlock/CodeBlockControlButton';
-export * from '../../components/CodeBlock/styledVariables';

package/lib/components/CodeBlock/index.js

@@ -18,5 +18,4 @@ __exportStar(require("../../components/CodeBlock/CodeBlock"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockContainer"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockControls"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockControlButton"), exports);
-__exportStar(require("../../components/CodeBlock/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -60,6 +60,7 @@ function ColorModeSwitcher(props) {
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 const Wrapper = styled_components_1.default.div `
+  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,22 +1,16 @@
 import React from 'react';
 export interface DropdownProps {
-    children?: React.ReactNode;
+    children: React.ReactNode;
     items: JSX.Element[] | string[];
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
     triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
     onChange?: (value: React.ReactNode | string) => void;
-    icon?: React.ReactNode;
 }
-export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: DropdownProps) => JSX.Element;
 export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {
-    placement?: string | undefined;
-    alignment?: string | undefined;
-}, never>;
+export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
     separator?: boolean | undefined;
 }, never>;

package/lib/components/Dropdown/Dropdown.js

@@ -28,7 +28,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, placement, alignment, icon, }) => {
+const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, }) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleOpen = () => {
@@ -48,9 +48,8 @@ const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click
     return (react_1.default.createElement(DropdownContainer, Object.assign({}, dataAttributes, { "data-testid": "dropdown", className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: handleClose, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.DropdownHeader, null,
             children,
-            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.DropdownList, { placement: placement, alignment: alignment }, items.map((item, index) => {
+        isOpen && (react_1.default.createElement(exports.DropdownList, null, items.map((item, index) => {
             var _a;
             return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
         })))));
@@ -78,10 +77,8 @@ exports.DropdownHeader = styled_components_1.default.div `
 `;
 exports.DropdownList = 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')};
+  top: 100%;
+  left: 0;
   margin: 0;
   min-width: var(--dropdown-list-min-width);
   max-width: var(--dropdown-list-max-width);

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

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

package/lib/components/Dropdown/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Dropdown/Dropdown"), exports);
-__exportStar(require("../../components/Dropdown/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/EditPageButton/EditPageButton.js

@@ -17,16 +17,12 @@ exports.EditPageButton = EditPageButton;
 const EditButton = (0, styled_components_1.default)(Link_1.Link) `
   margin-left: auto;
   display: inline-flex;
-  color: var(--text-secondary);
+  color: var(--color-content);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
 
-  &:hover {
-    color: var(--text-primary);
-  }
-
   @media print {
     display: none;
   }

package/lib/components/Feedback/Comment.js

@@ -70,11 +70,6 @@ const Wrapper = styled_components_1.default.div `
   width: 100%;
 `;
 const Label = styled_components_1.default.h3 `
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 const TextArea = styled_components_1.default.textarea `

package/lib/components/Feedback/Rating.js

@@ -83,10 +83,6 @@ const Star = styled_components_1.default.span `
 `;
 const Label = styled_components_1.default.h3 `
   margin-right: 15px;
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
+  font-family: var(--font-family-base);
 `;
 //# sourceMappingURL=Rating.js.map

package/lib/components/Feedback/Reasons.js

@@ -67,11 +67,6 @@ const Wrapper = styled_components_1.default.div `
   flex-direction: column;
 `;
 const Label = styled_components_1.default.h3 `
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
@@ -90,7 +85,7 @@ const OptionWrapper = styled_components_1.default.div `
     cursor: pointer;
   }
   label {
-    font-size: var(--font-size-base);
+    font-size: 14px;
     cursor: pointer;
   }
 `;

package/lib/components/Feedback/Sentiment.js

@@ -82,11 +82,6 @@ const Wrapper = styled_components_1.default.div `
   align-items: center;
 `;
 const Label = styled_components_1.default.h3 `
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 const Vote = styled_components_1.default.div `

package/lib/components/Feedback/Thumbs.js

@@ -69,12 +69,12 @@ exports.ThumbDown = ThumbDown;
 const Wrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-info-text);
+  color: var(--color-primary-500);
   &:hover {
-    color: var(--color-info-text-active);
+    color: var(--color-primary-600);
     svg {
       > g {
-        fill: var(--color-info-text-active);
+        fill: var(--color-primary-600);
       }
     }
   }
@@ -85,7 +85,7 @@ const Icon = styled_components_1.default.div `
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-info-text);
+      fill: var(--color-primary-500);
     }
   }
 `;

package/lib/components/Filter/Filter.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
-import type { ThemeConfig } from '../../config';
-export declare function Filter({ filter, filterValuesCasing, }: {
+export declare function Filter({ filter }: {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
-    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }): JSX.Element | null;