@redocly/theme 0.18.4-patch.1 → 0.18.5

package/lib/components/Filter/Filter.js

@@ -7,11 +7,10 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_date_picker_1 = require("react-date-picker");
+const Checkbox_1 = require("../../ui/Checkbox");
 const hooks_1 = require("../../mocks/hooks");
-const icons_1 = require("../../icons");
-const Select_1 = require("../../components/Select");
-function Filter({ filter, filterValuesCasing, }) {
-    var _a;
+function Filter({ filter }) {
+    var _a, _b;
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         selectAll: 'theme.catalog.filters.select.all',
@@ -19,29 +18,20 @@ function Filter({ filter, filterValuesCasing, }) {
     };
     if (!filter.parentUsed)
         return null;
-    let selectOptions = [];
-    if (filter.type === 'select') {
-        const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
-        selectOptions = [
-            {
-                value: '',
-                element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
-                    react_1.default.createElement(FilterOptionLabel, null, translate(translationKeys.selectAll, 'All')),
-                    react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
-            },
-        ];
-        selectOptions.push(...filter.filteredOptions.map((option) => ({
-            value: option.value,
-            element: (react_1.default.createElement(FilterOption, { key: option.value },
-                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
-                react_1.default.createElement(FilterOptionCount, null, option.count))),
-        })));
-    }
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
         react_1.default.createElement(FilterTitle, null,
             translate(filter.titleTranslationKey, filter.title),
-            " "),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+            ' ',
+            ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) ? (react_1.default.createElement("a", { "data-translation-key": translationKeys.clear, onClick: () => filter.selectOption('') }, translate(translationKeys.clear, 'Clear'))) : null),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_b = filter.selectedOptions.values().next()) === null || _b === void 0 ? void 0 : _b.value) || '' },
+            react_1.default.createElement("option", { key: "none", value: "", "data-translation-key": translationKeys.selectAll }, translate(translationKeys.selectAll, 'All')),
+            filter.filteredOptions.map((value) => {
+                return (react_1.default.createElement("option", { key: value.value, value: value.value },
+                    translate(value.value),
+                    " (",
+                    value.count,
+                    ")"));
+            }))) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(DatePickerWrapper, null,
                 react_1.default.createElement("span", null, "From:"),
                 react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
@@ -57,101 +47,84 @@ function Filter({ filter, filterValuesCasing, }) {
                         filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
                     } })))) : (filter.filteredOptions.map((value) => {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
-            return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
-                react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
-                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
-                react_1.default.createElement(FilterOptionCount, null, value.count)));
+            return (react_1.default.createElement(FilterValue, { key: id, role: "link" },
+                react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
+                react_1.default.createElement("label", { htmlFor: id },
+                    translate(value.value),
+                    " (",
+                    value.count,
+                    ")")));
         }))));
 }
 exports.Filter = Filter;
-function changeCasing(str, casing) {
-    if (!casing || casing === 'original' || !str)
-        return str;
-    if (casing === 'lowercase') {
-        return str.toLowerCase();
-    }
-    if (casing === 'uppercase') {
-        return str.toUpperCase();
-    }
-    if (casing === 'sentence') {
-        const words = str.split(/[\s-_]+/);
-        return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
-    }
-}
 const FilterGroup = styled_components_1.default.div `
-  padding: var(--filter-group-padding);
-`;
-const FilterOptionLabel = styled_components_1.default.label `
-  cursor: pointer;
-  font-size: var(--filter-option-label-font-size);
-  font-weight: var(--filter-option-label-font-weight);
-  margin: var(--filter-option-label-margin);
-  color: var(--filter-option-label-color);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-const FilterOptionCount = styled_components_1.default.label `
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  height: var(--filter-option-count-height);
-  color: var(--filter-option-count-color);
-  text-align: center;
-  font-size: var(--filter-option-count-font-size);
-  font-weight: var(--filter-option-count-font-weight);
-  padding: var(--filter-option-count-padding);
-  border-radius: var(--filter-option-count-border-radius);
-  border: var(--filter-option-count-border);
-  background-color: var(--filter-option-count-background-color);
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
 `;
 const FilterTitle = styled_components_1.default.h4 `
-  font-weight: var(--filter-title-font-weight);
-  font-size: var(--filter-title-font-size);
-  margin: var(--filter-title-margin);
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+
+  > a {
+    font-size: 14px;
+    cursor: pointer;
+  }
 `;
-const FilterOption = styled_components_1.default.label.attrs({ 'data-cy': 'Filter/FilterOption' }) `
-  display: flex;
-  align-items: center;
+const FilterValue = styled_components_1.default.label `
+  display: block;
   cursor: pointer;
-  font-weight: var(--filter-option-font-weight);
-  font-size: var(--filter-option-font-size);
-  margin: var(--filter-option-margin);
+  font-size: 16px;
+  margin: 8px 0;
 
   input {
     cursor: pointer;
   }
 `;
-const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
-  min-height: var(--filter-select-min-height);
-  color: var(--filter-select-color);
-  border: 1px solid var(--filter-select-border-color);
-  border-radius: var(--filter-select-border-radius);
-  padding: var(--filter-select-padding);
+const StyledSelect = styled_components_1.default.select `
+  border: 1px solid rgba(0, 0, 0, 0.23);
 
-  :hover {
-    border-color: var(--filter-select-hover-border-color);
-  }
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
 
-  ${FilterOption} {
-    margin: var(--filter-select-option-margin);
-  }
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  transition: outline 0.25s ease;
+  display: inline-block;
+  text-align: left;
+  appearance: none;
+
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 1em;
+  width: 100%;
+  padding-right: 25px;
 `;
 // TODO: import from portal
 function slug(str) {
     return str.replace(/\s/g, '-').toLowerCase();
 }
 const DatePickerWrapper = styled_components_1.default.div `
-  color: var(--filter-date-picker-color);
   display: flex;
   flex-direction: row;
-  margin: var(--filter-date-picker-margin);
+  margin-bottom: 5px;
 
   align-items: center;
-  gap: var(--filter-date-picker-gap);
+  gap: 10px;
 
   > span {
-    width: var(--filter-date-picker-width);
+    width: 50px;
   }
 
   .react-date-picker {
@@ -159,41 +132,35 @@ const DatePickerWrapper = styled_components_1.default.div `
   }
 
   .react-calendar__tile--now {
-    background: var(--filter-date-picker-tile-background);
-    color: var(--filter-date-picker-tile-color);
+    background: #cbf7f1;
+    color: black;
 
     &:enabled:hover,
     &:enabled:focus {
-      background: var(--filter-date-picker-tile-hover-background);
-      color: var(--filter-date-picker-tile-hover-color);
+      background: #b1efe7;
+      color: black;
     }
   }
 
-  .react-date-picker__inputGroup__input {
-    width: var(--filter-date-picker-input-width);
-
-    &:invalid {
-      background: var(--filter-date-picker-invalid-input-background);
-    }
+  .react-date-picker__inputGroup__input:invalid {
+    background: rgb(255 125 0 / 10%);
   }
 
   .react-date-picker__button {
-    padding: var(--filter-date-picker-button-padding);
-
+    padding: 4px 4px;
     svg {
-      stroke: var(--filter-date-picker-icon-stroke);
-      width: var(--filter-date-picker-icon-width);
-    }
-
-    &:enabled:hover .react-date-picker__button__icon {
-      stroke: var(--filter-date-picker-hover-icon-stroke);
+      width: 12px;
     }
   }
 
   .react-date-picker__wrapper {
-    border: 1px solid var(--filter-date-picker-wrapper-border-color);
-    border-radius: var(--filter-date-picker-wrapper-radius);
-    padding: var(--filter-date-picker-wrapper-padding);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+    border-radius: var(--border-radius);
+    padding: var(--input-padding);
+  }
+
+  .react-date-picker__inputGroup__input {
+    width: 20px;
   }
 `;
 function padZero(num) {

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

@@ -1,3 +1 @@
 export * from '../../components/Filter/Filter';
-export * from '../../components/Filter/FilterContent';
-export * from '../../components/Filter/styledVariables';

package/lib/components/Filter/index.js

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

package/lib/components/Footer/CustomFooterNavItem.js

@@ -18,7 +18,7 @@ const FooterItem = styled_components_1.default.li `
   display: inline-block;
   text-align: center;
   line-height: var(--line-height-base);
-  font-size: var(--navbar-font-size);
+  font-size: var(--navbar-item-font-size);
   margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
   font-weight: var(--font-weight-regular);
 `;

package/lib/components/Footer/Footer.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import type { LogoConfig, ResolvedNavItem } from '../../types/portal';
+import type { ResolvedNavItem } from '../../types/portal';
 export declare function Footer(): JSX.Element | null;
 interface FooterPresentationalComponentProps {
     items: ResolvedNavItem[];
-    copyrightText?: string;
-    logo?: LogoConfig;
+    copyrightText: string;
     className?: string;
 }
-export declare function FooterPresentationalComponent({ items, copyrightText, logo, className, }: FooterPresentationalComponentProps): JSX.Element | null;
+export declare function FooterPresentationalComponent({ items, copyrightText, className, }: FooterPresentationalComponentProps): JSX.Element | null;
 export {};

package/lib/components/Footer/Footer.js

@@ -10,49 +10,31 @@ const FooterColumns_1 = require("../../components/Footer/FooterColumns");
 const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
 const utils_1 = require("../../utils");
 const hooks_1 = require("../../hooks");
-const ui_1 = require("../../ui");
-const NavbarLogo_1 = require("../../components/NavbarLogo");
 function Footer() {
-    var _a;
-    const { footer, logo } = (0, hooks_1.useThemeConfig)() || {};
+    const { footer } = (0, hooks_1.useThemeConfig)() || {};
     const { items, copyrightText } = footer || {};
-    if ((0, utils_1.isEmptyArray)(items) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
+    if ((0, utils_1.isEmptyArray)(items) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }
-    return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText, logo: ((_a = footer === null || footer === void 0 ? void 0 : footer.logo) === null || _a === void 0 ? void 0 : _a.hide) ? undefined : logo }));
+    return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText }));
 }
 exports.Footer = Footer;
-function FooterPresentationalComponent({ items, copyrightText, logo, className, }) {
+function FooterPresentationalComponent({ items, copyrightText, className, }) {
     return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer", className: className },
-        react_1.default.createElement(ColumnsSection, null,
-            logo && react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
-            react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items })),
-        copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
+        react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
 }
 exports.FooterPresentationalComponent = FooterPresentationalComponent;
-const ColumnsSection = (0, styled_components_1.default)(ui_1.Flex) `
-  flex-direction: column;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    flex-direction: row;
-  }
-`;
 const FooterContainer = styled_components_1.default.footer `
-  padding: var(--mobile-footer-padding-vertical) var(--mobile-footer-padding-horizontal);
-  border-top: 1px solid var(--footer-border-color);
   font-size: var(--footer-font-size);
   flex-shrink: 0;
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
+  font-family: var(--footer-font-family);
   font-weight: var(--footer-font-weight);
-
-  ${NavbarLogo_1.LogoContainer} {
-    display: var(--footer-logo-display);
-    margin: 0 var(--footer-logo-margin-right) var(--footer-logo-margin-bottom) 0;
-  }
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
+  a,
+  a:hover {
+    color: var(--footer-text-color);
   }
 `;
 //# sourceMappingURL=Footer.js.map

package/lib/components/Footer/FooterColumn.d.ts

@@ -5,8 +5,8 @@ interface FooterColumnProps {
     className?: string;
 }
 export declare function FooterColumn({ column, className }: FooterColumnProps): JSX.Element;
-export declare const FooterLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterColumnItems: import("styled-components").StyledComponent<"div", any, {
-    iconsOnly: boolean;
+export declare const FooterLinkIcon: import("styled-components").StyledComponent<"i", any, {
+    url?: string | undefined;
+    withIconPadding: boolean;
 }, never>;
 export {};

package/lib/components/Footer/FooterColumn.js

@@ -1,100 +1,106 @@
 "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.FooterColumnItems = exports.FooterLinkIcon = exports.FooterColumn = void 0;
+exports.FooterLinkIcon = exports.FooterColumn = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
-const Image_1 = require("../../components/Image/Image");
 const telemetry_1 = require("../../mocks/telemetry");
-const icons_1 = require("../../icons");
 function FooterColumn({ column, className }) {
+    var _a;
     const { translate } = (0, hooks_1.useTranslate)();
-    const { items = [] } = column;
-    const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
+    const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
     return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn", className: className },
-        react_1.default.createElement(FooterColumnTitle, null, translate(column.labelTranslationKey, column.label)),
-        react_1.default.createElement(exports.FooterColumnItems, { iconsOnly: iconsOnly }, items === null || items === void 0 ? void 0 : items.map((columnItem, columnItemIndex) => {
+        react_1.default.createElement(FooterColumnTitle, { withIconPadding: hasIcon }, translate(column.labelTranslationKey, column.label)), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
+        _a.map((columnItem, columnItemIndex) => {
             if (columnItem.type === 'error') {
                 return null;
             }
-            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, iconsOnly: iconsOnly, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
-                columnItem.icon || columnItem.srcSet ? (react_1.default.createElement(exports.FooterLinkIcon, null,
-                    react_1.default.createElement(Image_1.Image, { src: columnItem.icon, srcSet: columnItem.srcSet }))) : null,
-                !iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label),
-                columnItem.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null));
-        }))));
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
+                react_1.default.createElement(exports.FooterLinkIcon, { url: columnItem.icon, withIconPadding: hasIcon }),
+                translate(columnItem.labelTranslationKey, columnItem.label)));
+        })));
 }
 exports.FooterColumn = FooterColumn;
 const FooterColumnTitle = styled_components_1.default.p `
   display: inline-block;
   font-weight: var(--footer-title-font-weight);
   font-size: var(--footer-title-font-size);
-  margin-top: 0;
-  margin-bottom: var(--mobile-footer-title-margin-bottom);
+  margin-bottom: var(--footer-title-margin-vertical);
+  ${({ withIconPadding }) => withIconPadding &&
+    (0, styled_components_1.css) `
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
+  font-family: var(--footer-font-family);
   color: var(--footer-title-text-color);
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    margin-bottom: var(--footer-title-margin-bottom);
-  }
 `;
 const FooterSeparator = styled_components_1.default.div `
   opacity: 0.75;
   margin: 10px 0 5px 0;
   font-size: 0.75em;
   text-transform: uppercase;
+  font-family: var(--footer-font-family);
 `;
 const FooterColumnContainer = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  text-align: center;
+  text-align: left;
+  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);
+  width: var(--footer-column-width);
   word-break: break-word;
-  flex: 1;
-  margin: 0 0 var(--mobile-footer-column-margin-bottom) 0;
-  min-width: var(--footer-column-min-width);
-  align-content: center;
-  flex-wrap: wrap;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    text-align: left;
-    margin: 0 var(--footer-column-margin-horizontal);
-    border-right: 1px solid var(--footer-dividing-border-color);
-    margin-bottom: var(--footer-column-margin-bottom);
-  }
-`;
-exports.FooterLinkIcon = styled_components_1.default.div `
-  display: inline-flex;
-  width: var(--footer-item-icon-width);
-  height: var(--footer-item-icon-height);
-  margin-right: var(--footer-item-icon-margin-right);
-  vertical-align: middle;
-  border: 1px solid var(--footer-item-icon-border-color);
-  border-radius: var(--footer-item-icon-border-radius);
-  padding: var(--footer-item-icon-padding);
 `;
 const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
-  padding: var(--footer-link-padding-vertical) var(--footer-link-padding-horizontal);
+  font-weight: var(--font-weight-bold);
+  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);
   color: var(--footer-link-text-color);
   text-decoration: none;
   &:hover {
     color: var(--footer-link-hover-color);
   }
-
-  &:last-child ${exports.FooterLinkIcon} {
-    margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
-  }
 `;
-exports.FooterColumnItems = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    justify-content: flex-start;
-  }
+exports.FooterLinkIcon = styled_components_1.default.i `
+  ${({ withIconPadding, url }) => withIconPadding &&
+    !url &&
+    (0, styled_components_1.css) `
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
+  ${({ url }) => url &&
+    (0, styled_components_1.css) `
+      background-image: url('${url}');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      width: var(--footer-item-icon-width);
+      height: var(--footer-item-icon-height);
+      display: inline-block;
+      margin-right: var(--footer-item-icon-margin-right);
+      vertical-align: middle;
+    `}
 `;
 //# sourceMappingURL=FooterColumn.js.map

package/lib/components/Footer/FooterColumns.js

@@ -16,15 +16,15 @@ function FooterColumns({ columns, className }) {
 }
 exports.FooterColumns = FooterColumns;
 exports.FooterColumnsContainer = styled_components_1.default.div `
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: var(--footer-container-max-width);
-  margin: 0;
-  flex: 1;
+  margin: 0 auto;
 
   ${({ theme }) => theme.mediaQueries.small} {
-    margin: 0 auto;
+    padding: 5.625em 20px 3.9375em 20px;
   }
 
   ${({ theme }) => theme.mediaQueries.print} {
@@ -36,11 +36,9 @@ exports.FooterRow = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  flex-direction: column;
 
   ${({ theme }) => theme.mediaQueries.small} {
-    justify-content: space-between;
-    flex-direction: row;
+    justify-content: space-evenly;
   }
 `;
 //# sourceMappingURL=FooterColumns.js.map

package/lib/components/Footer/FooterCopyright.js

@@ -6,31 +6,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterCopyright = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const _theme_1 = require("../../index.js");
 const hooks_1 = require("../../mocks/hooks");
 function FooterCopyright({ copyrightText = '', className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const { changeLanguage } = (0, hooks_1.useI18n)();
     const translationKeys = {
         copyrightText: 'theme.footer.copyrightText',
     };
-    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText },
-        react_1.default.createElement(Label, null, translate(translationKeys.copyrightText, copyrightText)),
-        react_1.default.createElement(_theme_1.LanguagePicker, { onChangeLanguage: changeLanguage, placement: "top", alignment: "end" }))) : null;
+    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText }, translate(translationKeys.copyrightText, copyrightText))) : null;
 }
 exports.FooterCopyright = FooterCopyright;
 const Wrapper = styled_components_1.default.section `
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: var(--footer-copyright-font-size);
-  margin-top: var(--footer-copyright-margin-top);
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
-  text-align: var(--footer-copyright-text-align);
+  text-align: center;
   span {
     max-width: var(--footer-container-max-width);
   }
 `;
-const Label = styled_components_1.default.div ``;
 //# sourceMappingURL=FooterCopyright.js.map

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

@@ -2,4 +2,3 @@ export * from '../../components/Footer/Footer';
 export * from '../../components/Footer/FooterColumn';
 export * from '../../components/Footer/FooterColumns';
 export * from '../../components/Footer/FooterCopyright';
-export * from '../../components/Footer/styledVariables';

package/lib/components/Footer/index.js

@@ -18,5 +18,4 @@ __exportStar(require("../../components/Footer/Footer"), exports);
 __exportStar(require("../../components/Footer/FooterColumn"), exports);
 __exportStar(require("../../components/Footer/FooterColumns"), exports);
 __exportStar(require("../../components/Footer/FooterCopyright"), exports);
-__exportStar(require("../../components/Footer/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/JsonViewer/JsonViewer.js

@@ -103,7 +103,7 @@ exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() =>
 })) `
   .redoc-json code {
     background-color: var(--panel-samples-code-block-background-color);
-    color: var(--text-secondary);
+    color: var(--text-color-inverse);
     padding: inherit;
     border: none;
   }
@@ -170,7 +170,7 @@ exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() =>
       background-color: transparent;
       border: 0;
       padding: 1px;
-      color: var(--text-secondary);
+      color: #fff;
       width: var(--size);
       height: var(--size);
       margin-left: calc((var(--size) + var(--margin-right)) * -1);