@redocly/theme 0.18.3 → 0.18.4-patch.1

package/lib/components/Filter/styledVariables.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filter = void 0;
+const styled_components_1 = require("styled-components");
+exports.filter = (0, styled_components_1.css) `
+  /* === Filter === */
+  /**
+  * @tokens Filters
+  */
+  --filter-group-padding: var(--spacing-base) 0 0 0;
+
+  --filter-title-font-weight: var(--font-weight-bold);
+  --filter-title-font-size: var(--font-size-base);
+  --filter-title-margin: 0 0 var(--spacing-xxs) 0;
+
+  --filter-option-font-weight: var(--font-weight-regular);
+  --filter-option-font-size: var(--font-size-base);
+  --filter-option-margin: var(--spacing-xs) 0 0 0;
+
+  --filter-option-label-font-size: var(--font-size-base);
+  --filter-option-label-font-weight: var(--font-weight-regular);
+  --filter-option-label-margin: 0 var(--spacing-xs) 0 0;
+  --filter-option-label-color: var(--text-secondary);
+
+  --filter-option-count-height: 17px;
+  --filter-option-count-color: var(--text-secondary);
+  --filter-option-count-font-size: var(--font-size-sm);
+  --filter-option-count-font-weight: var(--font-weight-regular);
+  --filter-option-count-padding: 0px var(--spacing-xxs);
+  --filter-option-count-border-radius: var(--spacing-sm);
+  --filter-option-count-border: 1px solid var(--border-primary);
+  --filter-option-count-background-color: var(--bg-overlay);
+
+  --filter-content-border-color: var(--border-secondary);
+  --filter-content-items-padding: 0 var(--spacing-lg);
+  --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
+  --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
+  --filter-controls-background-color: var(--bg-base);
+
+  --filter-popover-background-color: var(--bg-base);
+  --filter-popover-header-padding: var(--mobile-catalog-filter-padding-vertical) var(--mobile-catalog-filter-padding-horizontal);
+  --filter-popover-header-border-color: var(--border-secondary);
+  --filter-popover-header-background-color: var(--navbar-background-color);
+  --filter-popover-header-label-color: var(--navbar-text-color);
+  --filter-popover-header-label-font-size: var(--font-size-lg);
+  --filter-popover-header-label-font-weight: var(--font-weight-bold);
+  --filter-popover-header-button-color: var(--navbar-text-color);
+  --filter-popover-header-button-height: var(--control-height-base);
+  --filter-popover-header-button-font-size: var(--font-size-base);
+  --filter-popover-header-button-font-weight: var(--font-weight-regular);
+
+  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) 0;
+  --filter-tag-color: var(--text-primary);
+  --filter-tag-border-radius: var(--spacing-sm);
+  --filter-tag-border-color: var(--border-primary);
+  --filter-tag-background-color: var(--bg-raised);
+  --filter-tag-padding: 0 var(--spacing-xs);
+  --filter-tag-font-size: var(--font-size-sm);
+  --filter-tag-font-weight: var(--font-weight-regular);
+  --filter-tag-margin: 0 var(--spacing-xxs) 0 0;
+  --filter-tag-label-margin: 0 var(--spacing-xxs) 0 0;
+
+  --filter-input-border: 1px solid var(--border-primary);
+  --filter-input-min-width: 200px;
+  --filter-input-padding: var(--input-padding);
+  --filter-input-border-radius: var(--input-border-radius);
+  --filter-input-background-color: var(--input-background-color);
+  --filter-input-color: var(--text-secondary);
+  --filter-input-font-family: var(--font-family-base);
+  --filter-input-font-size: var(--font-size-base);
+  --filter-input-line-height: var(--input-line-height);
+  --filter-input-placeholder-opacity: 0.6;
+  --filter-input-placeholder-color: var(--text-placeholder);
+  --filter-input-hover-color: var(--text-primary);
+  --filter-input-hover-border: 1px solid var(--border-primary);
+  --filter-input-focus-color: var(--text-primary);
+  --filter-input-focus-border: 1px solid var(--border-primary);
+
+  --filter-add-button-margin: 0 var(--spacing-sm) 0 0;
+  --filter-add-button-padding: 0;
+  --filter-add-button-font-size: var(--font-size-base);
+  --filter-add-button-font-weight: var(--font-weight-regular);
+
+  --filter-select-min-height: var(--control-height-base);
+  --filter-select-color: var(--text-primary);
+  --filter-select-border-color: var(--border-primary);
+  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-select-padding: 0;
+  --filter-select-hover-border-color: var(--text-primary);
+  --filter-select-option-margin: 0;
+
+  --filter-date-picker-color: var(--text-primary);
+  --filter-date-picker-margin: 0 0 var(--spacing-xxs) 0;
+  --filter-date-picker-gap: var(--spacing-xs);
+  --filter-date-picker-width: 50px;
+  --filter-date-picker-tile-background: var(--color-blue-2);
+  --filter-date-picker-tile-color: var(--text-primary);
+  --filter-date-picker-tile-hover-background: var(--color-blue-3);
+  --filter-date-picker-tile-hover-color: var(--text-primary);
+  --filter-date-picker-input-width: var(--spacing-md);
+  --filter-date-picker-invalid-input-background: var(--bg-raised);
+  --filter-date-picker-button-padding: var(--spacing-xxs);
+  --filter-date-picker-icon-stroke: var(--text-secondary);
+  --filter-date-picker-icon-width: var(--spacing-sm);
+  --filter-date-picker-hover-icon-stroke: var(--text-primary);
+  --filter-date-picker-wrapper-border-color: var(--border-primary);
+  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
+  --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.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-item-font-size);
+  font-size: var(--navbar-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,10 +1,11 @@
 /// <reference types="react" />
-import type { ResolvedNavItem } from '../../types/portal';
+import type { LogoConfig, ResolvedNavItem } from '../../types/portal';
 export declare function Footer(): JSX.Element | null;
 interface FooterPresentationalComponentProps {
     items: ResolvedNavItem[];
-    copyrightText: string;
+    copyrightText?: string;
+    logo?: LogoConfig;
     className?: string;
 }
-export declare function FooterPresentationalComponent({ items, copyrightText, className, }: FooterPresentationalComponentProps): JSX.Element | null;
+export declare function FooterPresentationalComponent({ items, copyrightText, logo, className, }: FooterPresentationalComponentProps): JSX.Element | null;
 export {};

package/lib/components/Footer/Footer.js

@@ -10,31 +10,49 @@ 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() {
-    const { footer } = (0, hooks_1.useThemeConfig)() || {};
+    var _a;
+    const { footer, logo } = (0, hooks_1.useThemeConfig)() || {};
     const { items, copyrightText } = footer || {};
-    if ((0, utils_1.isEmptyArray)(items) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
+    if ((0, utils_1.isEmptyArray)(items) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }
-    return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText }));
+    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 }));
 }
 exports.Footer = Footer;
-function FooterPresentationalComponent({ items, copyrightText, className, }) {
+function FooterPresentationalComponent({ items, copyrightText, logo, className, }) {
     return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer", className: className },
-        react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items }),
-        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
+        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 })));
 }
 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);
-  a,
-  a:hover {
-    color: var(--footer-text-color);
+
+  ${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);
   }
 `;
 //# 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<"i", any, {
-    url?: string | undefined;
-    withIconPadding: boolean;
+export declare const FooterLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterColumnItems: import("styled-components").StyledComponent<"div", any, {
+    iconsOnly: boolean;
 }, never>;
 export {};

package/lib/components/Footer/FooterColumn.js

@@ -1,106 +1,100 @@
 "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.FooterLinkIcon = exports.FooterColumn = void 0;
+exports.FooterColumnItems = exports.FooterLinkIcon = exports.FooterColumn = void 0;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(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 hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
+    const { items = [] } = column;
+    const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
     return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn", className: className },
-        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) => {
+        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) => {
             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, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
-                react_1.default.createElement(exports.FooterLinkIcon, { url: columnItem.icon, withIconPadding: hasIcon }),
-                translate(columnItem.labelTranslationKey, columnItem.label)));
-        })));
+            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));
+        }))));
 }
 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-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);
+  margin-top: 0;
+  margin-bottom: var(--mobile-footer-title-margin-bottom);
   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: left;
-  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);
-  width: var(--footer-column-width);
+  text-align: center;
   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) `
-  font-weight: var(--font-weight-bold);
-  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);
+  padding: var(--footer-link-padding-vertical) var(--footer-link-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.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;
-    `}
+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;
+  }
 `;
 //# 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 auto;
+  margin: 0;
+  flex: 1;
 
   ${({ theme }) => theme.mediaQueries.small} {
-    padding: 5.625em 20px 3.9375em 20px;
+    margin: 0 auto;
   }
 
   ${({ theme }) => theme.mediaQueries.print} {
@@ -36,9 +36,11 @@ 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-evenly;
+    justify-content: space-between;
+    flex-direction: row;
   }
 `;
 //# sourceMappingURL=FooterColumns.js.map

package/lib/components/Footer/FooterCopyright.js

@@ -6,26 +6,31 @@ 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 }, translate(translationKeys.copyrightText, copyrightText))) : null;
+    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;
 }
 exports.FooterCopyright = FooterCopyright;
 const Wrapper = styled_components_1.default.section `
   display: flex;
-  justify-content: center;
-  font-size: 0.875em;
-  padding: 1.5em 3em;
-  font-weight: var(--font-weight-bold);
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--footer-copyright-font-size);
+  margin-top: var(--footer-copyright-margin-top);
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
-  text-align: center;
+  text-align: var(--footer-copyright-text-align);
   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,3 +2,4 @@ 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,4 +18,5 @@ __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/Footer/styledVariables.d.ts

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

package/lib/components/Footer/styledVariables.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.footer = void 0;
+const styled_components_1 = require("styled-components");
+exports.footer = (0, styled_components_1.css) `
+  /**
+    * @tokens Footer
+    */
+  --footer-background-color: var(--bg-raised); // @presenter Color
+  --footer-text-color: var(--text-secondary); // @presenter Color
+  --footer-border-color: var(--border-secondary); // @presenter Color
+
+  --footer-padding-vertical: calc(var(--spacing-unit) * 20); // @presenter Spacing
+  --footer-padding-horizontal: calc(var(--spacing-unit) * 20); // @presenter Spacing
+
+  --footer-font-size: var(--font-size-base); // @presenter FontSize
+  --footer-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  --footer-dividing-border-color: var(--footer-border-color); // @presenter Color
+
+  --footer-title-text-color: var(--text-primary); // @presenter Color
+  --footer-title-font-size: var(--font-size-xl); // @presenter FontSize
+  --footer-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --footer-title-margin-bottom: var(--spacing-lg); // @presenter Spacing
+
+  --footer-link-text-color: var(--text-secondary); // @presenter Color
+  --footer-link-hover-color: var(--text-primary); // @presenter Color
+  --footer-link-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --footer-link-padding-horizontal: 0;
+
+  --footer-item-icon-width: var(--spacing-lg); // @presenter Spacing
+  --footer-item-icon-height: var(--spacing-lg); // @presenter Spacing
+  --footer-item-icon-margin-right: var(--spacing-sm); // @presenter Spacing
+  --footer-item-icon-border-color: var(--border-primary); // @presenter Color
+  --footer-item-icon-border-radius: 12px; // @presenter BorderRadius
+  --footer-item-icon-padding: var(--spacing-xxs); // @presenter Spacing
+
+  --footer-column-min-width: calc(var(--spacing-unit) * 30);
+  --footer-column-margin-bottom: var(--spacing-lg); // @presenter Spacing
+  --footer-column-margin-horizontal: var(--spacing-sm); // @presenter Spacing
+
+  --footer-copyright-font-size: var(--footer-font-size); // @presenter FontSize
+  --footer-copyright-margin-top: var(--spacing-sm); // @presenter Spacing
+  --footer-copyright-text-align: start;
+
+  --footer-logo-display: block;
+  --footer-logo-margin-right: 0; // @presenter Spacing
+  --footer-logo-margin-bottom: var(--spacing-xl); // @presenter Spacing
+
+  --footer-language-picker-display: block;
+
+  --footer-container-max-width: var(--container-width); // @presenter Spacing
+
+  --mobile-footer-padding-vertical: var(--spacing-base); // @presenter Spacing
+  --mobile-footer-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --mobile-footer-column-margin-bottom: var(--spacing-base); // @presenter Spacing
+  --mobile-footer-title-margin-bottom: var(--spacing-sm); // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Image/Image.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type ImageProps = {
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    className?: string;
+};
+export declare function Image(props: ImageProps): JSX.Element;
+export {};

package/lib/components/Image/Image.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function parseSrcSet(srcSet) {
+    const result = new Map();
+    const parts = srcSet.split(', ');
+    for (const part of parts) {
+        const [url, theme] = part.split(' ');
+        result.set(theme, url);
+    }
+    return result;
+}
+function Image(props) {
+    const { src, srcSet, alt, className } = props;
+    const parsedSourceSetMap = react_1.default.useMemo(() => {
+        return srcSet ? parseSrcSet(srcSet) : new Map();
+    }, [srcSet]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, src ? (react_1.default.createElement("img", { src: src, alt: alt, className: className })) : (Array.from(parsedSourceSetMap).map(([key, value]) => (react_1.default.createElement(ColorModeAwareImage, { key: key, colorMode: key, src: value, alt: alt }))))));
+}
+exports.Image = Image;
+const ColorModeAwareImage = styled_components_1.default.img `
+  html:not(.${(props) => props.colorMode}) && {
+    display: none;
+  }
+`;
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+export * from '../../components/Image/Image';

package/lib/components/{Tags → Image}/index.js

@@ -14,5 +14,5 @@ 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("./Tags"), exports);
+__exportStar(require("../../components/Image/Image"), 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-color-inverse);
+    color: var(--text-secondary);
     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: #fff;
+      color: var(--text-secondary);
       width: var(--size);
       height: var(--size);
       margin-left: calc((var(--size) + var(--margin-right)) * -1);

package/lib/components/LastUpdated/LastUpdated.js

@@ -55,6 +55,7 @@ function LastUpdated(props) {
         : translate(translationKey, 'Last updated on');
     return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
+        " ",
         React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }
 exports.LastUpdated = LastUpdated;

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

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

package/lib/components/{OperationBadge → LastUpdated}/index.js

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

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

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

package/lib/components/LastUpdated/styledVariables.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastUpdated = void 0;
+const styled_components_1 = require("styled-components");
+exports.lastUpdated = (0, styled_components_1.css) `
+  --last-updated-text-color: var(--text-secondary);
+  --last-updated-font-size: var(--font-size-sm);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;
+//# sourceMappingURL=styledVariables.js.map