@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Feedback/Sentiment.js

@@ -0,0 +1,79 @@
+"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.Sentiment = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Feedback_1 = require("../../components/Feedback");
+const Thumbs_1 = require("../../components/Feedback/Thumbs");
+const Sentiment = ({ settings, onSubmit }) => {
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [score, setScore] = React.useState(0);
+    const [comment, setComment] = React.useState('');
+    const [reasons, setReasons] = React.useState([]);
+    if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
+        const { label: reasonsLabel, items, multi } = reasonsSettings;
+        const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
+        return (React.createElement(Feedback_1.Reasons, { onSubmit: ({ reasons }) => setReasons(reasons), settings: { label: reasonsLabel, items, multi, buttonText } }));
+    }
+    if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
+        const commentLabel = score === 1
+            ? commentSettings.likeLabel || 'What was most helpful?'
+            : commentSettings.dislikeLabel || 'What can we improve?';
+        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
+    }
+    if (score) {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+        });
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment" },
+        React.createElement(Label, null, label || 'Was this page helpful?'),
+        React.createElement(Vote, { onClick: () => setScore(1) },
+            React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
+        React.createElement(Vote, { onClick: () => setScore(-1) },
+            React.createElement(Thumbs_1.ThumbDown, null))));
+};
+exports.Sentiment = Sentiment;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+`;
+const Vote = styled_components_1.default.div `
+  cursor: pointer;
+  margin: 0 10px;
+`;
+//# sourceMappingURL=Sentiment.js.map

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

@@ -0,0 +1,8 @@
+export { Feedback } from '../../components/Feedback/Feedback';
+export { Rating } from '../../components/Feedback/Rating';
+export { Sentiment } from '../../components/Feedback/Sentiment';
+export { Comment } from '../../components/Feedback/Comment';
+export { Reasons } from '../../components/Feedback/Reasons';
+export { ReportDialog } from '../../components/Feedback/ReportDialog';
+export { useReportDialog } from '../../components/Feedback/useReportDialog';
+export * from './types';

package/lib/components/Feedback/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReportDialog = exports.ReportDialog = exports.Reasons = exports.Comment = exports.Sentiment = exports.Rating = exports.Feedback = void 0;
+var Feedback_1 = require("../../components/Feedback/Feedback");
+Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return Feedback_1.Feedback; } });
+var Rating_1 = require("../../components/Feedback/Rating");
+Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
+var Sentiment_1 = require("../../components/Feedback/Sentiment");
+Object.defineProperty(exports, "Sentiment", { enumerable: true, get: function () { return Sentiment_1.Sentiment; } });
+var Comment_1 = require("../../components/Feedback/Comment");
+Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return Comment_1.Comment; } });
+var Reasons_1 = require("../../components/Feedback/Reasons");
+Object.defineProperty(exports, "Reasons", { enumerable: true, get: function () { return Reasons_1.Reasons; } });
+var ReportDialog_1 = require("../../components/Feedback/ReportDialog");
+Object.defineProperty(exports, "ReportDialog", { enumerable: true, get: function () { return ReportDialog_1.ReportDialog; } });
+var useReportDialog_1 = require("../../components/Feedback/useReportDialog");
+Object.defineProperty(exports, "useReportDialog", { enumerable: true, get: function () { return useReportDialog_1.useReportDialog; } });
+__exportStar(require("./types"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Feedback/types.d.ts

@@ -0,0 +1,76 @@
+import type { SubmitFeedbackParams } from '../../types/portal/src/shared/types/feedback';
+export type RatingProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
+    settings?: {
+        label?: string;
+        max?: number;
+        submitText?: string;
+        comment?: {
+            enable: boolean;
+            label?: string;
+        };
+        reasons?: {
+            enable: boolean;
+            label?: string;
+            multi?: boolean;
+            items: string[];
+        };
+    };
+};
+export type SentimentProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
+    settings?: {
+        label?: string;
+        submitText?: string;
+        comment?: {
+            enable: boolean;
+            likeLabel?: string;
+            dislikeLabel?: string;
+        };
+        reasons?: {
+            enable: boolean;
+            label?: string;
+            multi?: boolean;
+            items: string[];
+        };
+    };
+};
+export type CommentProps = {
+    onSubmit: (value: {
+        comment: string;
+    }) => void;
+    onCancel?: () => unknown;
+    settings?: {
+        label?: string;
+        submitText?: string;
+    };
+};
+export type ReasonsProps = {
+    onSubmit: (value: {
+        reasons: string[];
+    }) => void;
+    settings: {
+        label?: string;
+        multi?: boolean;
+        items: string[];
+        submitText?: string;
+        buttonText?: string;
+    };
+};
+export type ReportDialogProps = {
+    location: string;
+    onSubmit: () => void;
+    onCancel: () => void;
+    settings: {
+        label?: string;
+    };
+    submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+export declare function Filter({ filter }: {
+    filter: ResolvedFilter;
+}): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filter = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Checkbox_1 = require("../../ui/Checkbox");
+function Filter({ filter }) {
+    var _a;
+    if (!filter.parentUsed)
+        return null;
+    return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
+        react_1.default.createElement(FilterTitle, null, filter.title),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
+            react_1.default.createElement("option", { key: "none", value: "" }, "All"),
+            filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },
+                value.value,
+                " (",
+                value.count,
+                ")"))))) : (filter.filteredOptions.map((value) => {
+            const id = 'filter--' + filter.property + '--' + slug(value.value);
+            return (react_1.default.createElement(FilterValue, { key: id },
+                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 },
+                    value.value,
+                    " (",
+                    value.count,
+                    ")")));
+        }))));
+}
+exports.Filter = Filter;
+const FilterGroup = styled_components_1.default.div `
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
+const FilterTitle = styled_components_1.default.h4 `
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+const FilterValue = styled_components_1.default.label `
+  display: block;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 8px 0;
+
+  input {
+    cursor: pointer;
+  }
+`;
+const StyledSelect = styled_components_1.default.select `
+  border: 1px solid rgba(0, 0, 0, 0.23);
+
+  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);
+
+  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%;
+`;
+// TODO: import from portal
+function slug(str) {
+    return str.replace(/\s/g, '-').toLowerCase();
+}
+//# sourceMappingURL=Filter.js.map

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

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

package/lib/components/Filter/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Filter/Filter"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { NavGroupRecord } from '../../types/portal';
+interface FooterProps {
+    data: NavGroupRecord;
+}
+export declare function CustomFooter({ data }: FooterProps): JSX.Element | null;
+export {};

package/lib/components/Footer/CustomFooter.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooter = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CustomFooterNavItem_1 = require("../../components/Footer/CustomFooterNavItem");
+const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
+function CustomFooter({ data }) {
+    if (!data) {
+        return null;
+    }
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/CustomFooter" },
+        data.links.map((navItem, index) => {
+            return (react_1.default.createElement(CustomFooterNavItem_1.CustomFooterNavItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
+        }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: data.copyrightText })));
+}
+exports.CustomFooter = CustomFooter;
+const FooterContainer = styled_components_1.default.div `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  background-color: var(--footer-background-color);
+  text-align: center;
+  font-family: var(--font-family-base);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+//# sourceMappingURL=CustomFooter.js.map

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+interface CustomFooterNavItemProps {
+    navItem: ResolvedNavItem;
+}
+export declare function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element;
+export {};

package/lib/components/Footer/CustomFooterNavItem.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooterNavItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+function CustomFooterNavItem({ navItem }) {
+    const item = navItem;
+    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem" },
+        react_1.default.createElement(FooterLink, { to: item.link },
+            react_1.default.createElement(FooterLabel, null, item.label))));
+}
+exports.CustomFooterNavItem = CustomFooterNavItem;
+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);
+  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  font-weight: var(--font-weight-regular);
+`;
+const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;
+const FooterLabel = styled_components_1.default.span `
+  cursor: pointer;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=CustomFooterNavItem.js.map

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

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

package/lib/components/Footer/Footer.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterPresentationalComponent = exports.Footer = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FooterColumns_1 = require("../../components/Footer/FooterColumns");
+const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
+const utils_1 = require("../../utils");
+const hooks_1 = require("../../hooks");
+function Footer() {
+    const { footer } = (0, hooks_1.useThemeConfig)() || {};
+    const { items, copyrightText } = footer || {};
+    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 }));
+}
+exports.Footer = Footer;
+function FooterPresentationalComponent({ items, copyrightText, }) {
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },
+        react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
+}
+exports.FooterPresentationalComponent = FooterPresentationalComponent;
+const FooterContainer = styled_components_1.default.footer `
+  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);
+  }
+`;
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+interface FooterColumnProps {
+    column: ResolvedNavItem;
+}
+export declare function FooterColumn({ column }: FooterColumnProps): JSX.Element;
+export {};

package/lib/components/Footer/FooterColumn.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterColumn = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+function FooterColumn({ column }) {
+    var _a;
+    return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
+        react_1.default.createElement(FooterColumnTitle, null, 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 }, columnItem.label)) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label }, 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-bottom: var(--footer-title-margin-vertical);
+  font-family: var(--footer-font-family);
+  color: var(--footer-title-text-color);
+`;
+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);
+  word-break: break-word;
+`;
+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);
+  color: var(--footer-link-text-color);
+  text-decoration: none;
+  &:hover {
+    color: var(--footer-link-hover-color);
+  }
+`;
+//# sourceMappingURL=FooterColumn.js.map

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '../../types/portal';
+interface FooterColumnsProps {
+    columns: ResolvedNavItem[];
+}
+export declare function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null;
+export declare const FooterColumnsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Footer/FooterColumns.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterRow = exports.FooterColumnsContainer = exports.FooterColumns = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FooterColumn_1 = require("../../components/Footer/FooterColumn");
+function FooterColumns({ columns }) {
+    if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
+        return null;
+    }
+    return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns" },
+        react_1.default.createElement(exports.FooterRow, null, columns.map((column, index) => (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: `${column.label}_${index}`, column: column }))))));
+}
+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;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 5.625em 20px 3.9375em 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    color: black;
+    display: none;
+  }
+`;
+exports.FooterRow = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    justify-content: space-evenly;
+  }
+`;
+//# sourceMappingURL=FooterColumns.js.map

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { NavGroup } from '../../types/portal';
+interface FooterCopyrightProps {
+    copyrightText: NavGroup;
+}
+export declare function FooterCopyright({ copyrightText }: FooterCopyrightProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,4 @@
+export * from '../../components/Footer/Footer';
+export * from '../../components/Footer/FooterColumn';
+export * from '../../components/Footer/FooterColumns';
+export * from '../../components/Footer/FooterCopyright';

package/lib/components/Footer/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Footer/Footer"), exports);
+__exportStar(require("../../components/Footer/FooterColumn"), exports);
+__exportStar(require("../../components/Footer/FooterColumns"), exports);
+__exportStar(require("../../components/Footer/FooterCopyright"), exports);
+//# sourceMappingURL=index.js.map