@bloom-housing/ui-components 7.1.0 → 7.2.0

package/dist/src/overlays/Modal.stories.js

@@ -0,0 +1,141 @@
+"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.ManyButtons = exports.TransparentOverlayModal = exports.ScrollableModalMinimalContent = exports.ScrollableModalManyButtons = exports.ScrollableModalNoFooter = exports.ScrollableModal = exports.BasicModalOverflowContent = exports.BasicModal = void 0;
+var react_1 = __importStar(require("react"));
+var addon_knobs_1 = require("@storybook/addon-knobs");
+var constants_1 = require("../../.storybook/constants");
+require("./Modal.scss");
+var Modal_1 = require("./Modal");
+var Button_1 = require("../actions/Button");
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var Modal_docs_mdx_1 = __importDefault(require("./Modal.docs.mdx"));
+exports.default = {
+    title: "Overlays/Modal 🚩",
+    id: "overlays-modal",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }, addon_knobs_1.withKnobs],
+    parameters: {
+        docs: {
+            page: Modal_docs_mdx_1.default,
+        },
+        badges: [constants_1.BADGES.GEN2],
+    },
+};
+var noop = function () {
+    // intentionally blank
+};
+var BasicModal = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.Button, { onClick: function () {
+                setOpenModal(!openModal);
+            } }, (0, addon_knobs_1.text)("Button Label", "Open Modal")),
+        react_1.default.createElement("div", { style: { height: "1000px" } }),
+        react_1.default.createElement(Modal_1.Modal, { open: openModal, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: (0, addon_knobs_1.boolean)("Backdrop", true), slim: (0, addon_knobs_1.boolean)("Slim", false), hideCloseIcon: (0, addon_knobs_1.boolean)("Hide Close Icon", false), actions: [
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+            ] }, (0, addon_knobs_1.text)("Content", "Modal Content"))));
+};
+exports.BasicModal = BasicModal;
+var BasicModalOverflowContent = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.Button, { onClick: function () {
+                setOpenModal(!openModal);
+            } }, (0, addon_knobs_1.text)("Button Label", "Open Modal")),
+        react_1.default.createElement("div", { style: { height: "1000px" } }),
+        react_1.default.createElement(Modal_1.Modal, { open: openModal, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: (0, addon_knobs_1.boolean)("Backdrop", true), slim: (0, addon_knobs_1.boolean)("Slim", false), hideCloseIcon: (0, addon_knobs_1.boolean)("Hide Close Icon", false), actions: [
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+            ] },
+            (0, addon_knobs_1.text)("Content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu. Porttitor lacus luctus accumsan tortor. Viverra mauris in aliquam sem fringilla. At augue eget arcu dictum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Aliquam vestibulum morbi blandit cursus risus. Tellus at urna condimentum mattis pellentesque id nibh. Interdum consectetur libero id faucibus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Tristique senectus et netus et malesuada. Ultrices neque ornare aenean euismod elementum. Tellus elementum sagittis vitae et leo duis. In egestas erat imperdiet sed euismod nisi porta. Nisl purus in mollis nunc sed id semper risus. Ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper auctor. Risus pretium quam vulputate dignissim suspendisse in est ante. Cursus vitae congue mauris rhoncus aenean vel. In vitae turpis massa sed elementum tempus egestas sed. Blandit libero volutpat sed cras ornare arcu. Sapien faucibus et molestie ac. Duis ut diam quam nulla. Non nisi est sit amet facilisis magna. Maecenas ultricies mi eget mauris pharetra. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Enim diam vulputate ut pharetra sit amet aliquam id diam. Ultricies mi quis hendrerit dolor. In aliquam sem fringilla ut morbi tincidunt. Leo a diam sollicitudin tempor id eu nisl. Rhoncus urna neque viverra justo. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nisi scelerisque eu ultrices vitae auctor. Consequat mauris nunc congue nisi. Id diam vel quam elementum pulvinar etiam. Cras ornare arcu dui vivamus. Eu turpis egestas pretium aenean pharetra. Lobortis feugiat vivamus at augue eget arcu dictum varius. Massa enim nec dui nunc. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Arcu risus quis varius quam quisque id diam. Et magnis dis parturient montes nascetur ridiculus mus. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Porttitor rhoncus dolor purus non enim praesent. Arcu non sodales neque sodales ut. Aenean et tortor at risus viverra. Aliquet sagittis id consectetur purus. Suscipit tellus mauris a diam maecenas. Pharetra sit amet aliquam id diam maecenas ultricies mi. Tellus id interdum velit laoreet. Arcu cursus vitae congue mauris. Sem integer vitae justo eget magna fermentum iaculis eu. Morbi tristique senectus et netus et malesuada fames. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Sed felis eget velit aliquet. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Sit amet mattis vulputate enim nulla aliquet porttitor. Amet dictum sit amet justo donec. Mauris augue neque gravida in. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Faucibus turpis in eu mi bibendum neque egestas congue. At ultrices mi tempus imperdiet nulla. Et leo duis ut diam quam nulla porttitor massa id. Natoque penatibus et magnis dis parturient montes nascetur. Nunc vel risus commodo viverra maecenas. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Est ante in nibh mauris cursus mattis molestie a iaculis. Habitant morbi tristique senectus et netus. Integer feugiat scelerisque varius morbi enim nunc. Venenatis lectus magna fringilla urna. Nunc vel risus commodo viverra maecenas accumsan. Quam lacus suspendisse faucibus interdum posuere. Velit euismod in pellentesque massa placerat duis ultricies. In metus vulputate eu scelerisque felis imperdiet proin. Convallis convallis tellus id interdum velit laoreet id. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Eget nunc scelerisque viverra mauris. In nisl nisi scelerisque eu ultrices. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Eget est lorem ipsum dolor sit amet consectetur. Auctor urna nunc id cursus metus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Etiam erat velit scelerisque in dictum. Sodales neque sodales ut etiam sit amet nisl purus. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Sed turpis tincidunt id aliquet. Duis at consectetur lorem donec massa. Egestas congue quisque egestas diam in. A erat nam at lectus urna duis. Rhoncus dolor purus non enim praesent elementum. At imperdiet dui accumsan sit amet nulla. Leo urna molestie at elementum eu facilisis sed odio. Molestie nunc non blandit massa enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Mollis nunc sed id semper risus in hendrerit gravida. Nam libero justo laoreet sit amet cursus. Id neque aliquam vestibulum morbi blandit."),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" })))));
+};
+exports.BasicModalOverflowContent = BasicModalOverflowContent;
+var ScrollableModal = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(Modal_1.Modal, { open: true, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, actions: [
+            react_1.default.createElement(Button_1.Button, { size: AppearanceTypes_1.AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+            react_1.default.createElement(Button_1.Button, { size: AppearanceTypes_1.AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); } }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+        ], scrollable: true },
+        (0, addon_knobs_1.text)("Content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu. Porttitor lacus luctus accumsan tortor. Viverra mauris in aliquam sem fringilla. At augue eget arcu dictum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Aliquam vestibulum morbi blandit cursus risus. Tellus at urna condimentum mattis pellentesque id nibh. Interdum consectetur libero id faucibus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Tristique senectus et netus et malesuada. Ultrices neque ornare aenean euismod elementum. Tellus elementum sagittis vitae et leo duis. In egestas erat imperdiet sed euismod nisi porta. Nisl purus in mollis nunc sed id semper risus. Ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper auctor. Risus pretium quam vulputate dignissim suspendisse in est ante. Cursus vitae congue mauris rhoncus aenean vel. In vitae turpis massa sed elementum tempus egestas sed. Blandit libero volutpat sed cras ornare arcu. Sapien faucibus et molestie ac. Duis ut diam quam nulla. Non nisi est sit amet facilisis magna. Maecenas ultricies mi eget mauris pharetra. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Enim diam vulputate ut pharetra sit amet aliquam id diam. Ultricies mi quis hendrerit dolor. In aliquam sem fringilla ut morbi tincidunt. Leo a diam sollicitudin tempor id eu nisl. Rhoncus urna neque viverra justo. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nisi scelerisque eu ultrices vitae auctor. Consequat mauris nunc congue nisi. Id diam vel quam elementum pulvinar etiam. Cras ornare arcu dui vivamus. Eu turpis egestas pretium aenean pharetra. Lobortis feugiat vivamus at augue eget arcu dictum varius. Massa enim nec dui nunc. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Arcu risus quis varius quam quisque id diam. Et magnis dis parturient montes nascetur ridiculus mus. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Porttitor rhoncus dolor purus non enim praesent. Arcu non sodales neque sodales ut. Aenean et tortor at risus viverra. Aliquet sagittis id consectetur purus. Suscipit tellus mauris a diam maecenas. Pharetra sit amet aliquam id diam maecenas ultricies mi. Tellus id interdum velit laoreet. Arcu cursus vitae congue mauris. Sem integer vitae justo eget magna fermentum iaculis eu. Morbi tristique senectus et netus et malesuada fames. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Sed felis eget velit aliquet. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Sit amet mattis vulputate enim nulla aliquet porttitor. Amet dictum sit amet justo donec. Mauris augue neque gravida in. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Faucibus turpis in eu mi bibendum neque egestas congue. At ultrices mi tempus imperdiet nulla. Et leo duis ut diam quam nulla porttitor massa id. Natoque penatibus et magnis dis parturient montes nascetur. Nunc vel risus commodo viverra maecenas. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Est ante in nibh mauris cursus mattis molestie a iaculis. Habitant morbi tristique senectus et netus. Integer feugiat scelerisque varius morbi enim nunc. Venenatis lectus magna fringilla urna. Nunc vel risus commodo viverra maecenas accumsan. Quam lacus suspendisse faucibus interdum posuere. Velit euismod in pellentesque massa placerat duis ultricies. In metus vulputate eu scelerisque felis imperdiet proin. Convallis convallis tellus id interdum velit laoreet id. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Eget nunc scelerisque viverra mauris. In nisl nisi scelerisque eu ultrices. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Eget est lorem ipsum dolor sit amet consectetur. Auctor urna nunc id cursus metus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Etiam erat velit scelerisque in dictum. Sodales neque sodales ut etiam sit amet nisl purus. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Sed turpis tincidunt id aliquet. Duis at consectetur lorem donec massa. Egestas congue quisque egestas diam in. A erat nam at lectus urna duis. Rhoncus dolor purus non enim praesent elementum. At imperdiet dui accumsan sit amet nulla. Leo urna molestie at elementum eu facilisis sed odio. Molestie nunc non blandit massa enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Mollis nunc sed id semper risus in hendrerit gravida. Nam libero justo laoreet sit amet cursus. Id neque aliquam vestibulum morbi blandit."),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+};
+exports.ScrollableModal = ScrollableModal;
+var ScrollableModalNoFooter = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(Modal_1.Modal, { open: true, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, scrollable: true }, (0, addon_knobs_1.text)("Content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu. Porttitor lacus luctus accumsan tortor. Viverra mauris in aliquam sem fringilla. At augue eget arcu dictum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Aliquam vestibulum morbi blandit cursus risus. Tellus at urna condimentum mattis pellentesque id nibh. Interdum consectetur libero id faucibus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Tristique senectus et netus et malesuada. Ultrices neque ornare aenean euismod elementum. Tellus elementum sagittis vitae et leo duis. In egestas erat imperdiet sed euismod nisi porta. Nisl purus in mollis nunc sed id semper risus. Ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper auctor. Risus pretium quam vulputate dignissim suspendisse in est ante. Cursus vitae congue mauris rhoncus aenean vel. In vitae turpis massa sed elementum tempus egestas sed. Blandit libero volutpat sed cras ornare arcu. Sapien faucibus et molestie ac. Duis ut diam quam nulla. Non nisi est sit amet facilisis magna. Maecenas ultricies mi eget mauris pharetra. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Enim diam vulputate ut pharetra sit amet aliquam id diam. Ultricies mi quis hendrerit dolor. In aliquam sem fringilla ut morbi tincidunt. Leo a diam sollicitudin tempor id eu nisl. Rhoncus urna neque viverra justo. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nisi scelerisque eu ultrices vitae auctor. Consequat mauris nunc congue nisi. Id diam vel quam elementum pulvinar etiam. Cras ornare arcu dui vivamus. Eu turpis egestas pretium aenean pharetra. Lobortis feugiat vivamus at augue eget arcu dictum varius. Massa enim nec dui nunc. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Arcu risus quis varius quam quisque id diam. Et magnis dis parturient montes nascetur ridiculus mus. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Porttitor rhoncus dolor purus non enim praesent. Arcu non sodales neque sodales ut. Aenean et tortor at risus viverra. Aliquet sagittis id consectetur purus. Suscipit tellus mauris a diam maecenas. Pharetra sit amet aliquam id diam maecenas ultricies mi. Tellus id interdum velit laoreet. Arcu cursus vitae congue mauris. Sem integer vitae justo eget magna fermentum iaculis eu. Morbi tristique senectus et netus et malesuada fames. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Sed felis eget velit aliquet. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Sit amet mattis vulputate enim nulla aliquet porttitor. Amet dictum sit amet justo donec. Mauris augue neque gravida in. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Faucibus turpis in eu mi bibendum neque egestas congue. At ultrices mi tempus imperdiet nulla. Et leo duis ut diam quam nulla porttitor massa id. Natoque penatibus et magnis dis parturient montes nascetur. Nunc vel risus commodo viverra maecenas. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Est ante in nibh mauris cursus mattis molestie a iaculis. Habitant morbi tristique senectus et netus. Integer feugiat scelerisque varius morbi enim nunc. Venenatis lectus magna fringilla urna. Nunc vel risus commodo viverra maecenas accumsan. Quam lacus suspendisse faucibus interdum posuere. Velit euismod in pellentesque massa placerat duis ultricies. In metus vulputate eu scelerisque felis imperdiet proin. Convallis convallis tellus id interdum velit laoreet id. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Eget nunc scelerisque viverra mauris. In nisl nisi scelerisque eu ultrices. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Eget est lorem ipsum dolor sit amet consectetur. Auctor urna nunc id cursus metus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Etiam erat velit scelerisque in dictum. Sodales neque sodales ut etiam sit amet nisl purus. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Sed turpis tincidunt id aliquet. Duis at consectetur lorem donec massa. Egestas congue quisque egestas diam in. A erat nam at lectus urna duis. Rhoncus dolor purus non enim praesent elementum. At imperdiet dui accumsan sit amet nulla. Leo urna molestie at elementum eu facilisis sed odio. Molestie nunc non blandit massa enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Mollis nunc sed id semper risus in hendrerit gravida. Nam libero justo laoreet sit amet cursus. Id neque aliquam vestibulum morbi blandit.")));
+};
+exports.ScrollableModalNoFooter = ScrollableModalNoFooter;
+var ScrollableModalManyButtons = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(Modal_1.Modal, { open: true, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, scrollable: true, actions: [
+            react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 4 Label", "New")),
+            react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 3 Label", "Copy")),
+            react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+            react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+        ] },
+        (0, addon_knobs_1.text)("Content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu. Porttitor lacus luctus accumsan tortor. Viverra mauris in aliquam sem fringilla. At augue eget arcu dictum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Aliquam vestibulum morbi blandit cursus risus. Tellus at urna condimentum mattis pellentesque id nibh. Interdum consectetur libero id faucibus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Tristique senectus et netus et malesuada. Ultrices neque ornare aenean euismod elementum. Tellus elementum sagittis vitae et leo duis. In egestas erat imperdiet sed euismod nisi porta. Nisl purus in mollis nunc sed id semper risus. Ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper auctor. Risus pretium quam vulputate dignissim suspendisse in est ante. Cursus vitae congue mauris rhoncus aenean vel. In vitae turpis massa sed elementum tempus egestas sed. Blandit libero volutpat sed cras ornare arcu. Sapien faucibus et molestie ac. Duis ut diam quam nulla. Non nisi est sit amet facilisis magna. Maecenas ultricies mi eget mauris pharetra. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Enim diam vulputate ut pharetra sit amet aliquam id diam. Ultricies mi quis hendrerit dolor. In aliquam sem fringilla ut morbi tincidunt. Leo a diam sollicitudin tempor id eu nisl. Rhoncus urna neque viverra justo. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nisi scelerisque eu ultrices vitae auctor. Consequat mauris nunc congue nisi. Id diam vel quam elementum pulvinar etiam. Cras ornare arcu dui vivamus. Eu turpis egestas pretium aenean pharetra. Lobortis feugiat vivamus at augue eget arcu dictum varius. Massa enim nec dui nunc. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Arcu risus quis varius quam quisque id diam. Et magnis dis parturient montes nascetur ridiculus mus. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Porttitor rhoncus dolor purus non enim praesent. Arcu non sodales neque sodales ut. Aenean et tortor at risus viverra. Aliquet sagittis id consectetur purus. Suscipit tellus mauris a diam maecenas. Pharetra sit amet aliquam id diam maecenas ultricies mi. Tellus id interdum velit laoreet. Arcu cursus vitae congue mauris. Sem integer vitae justo eget magna fermentum iaculis eu. Morbi tristique senectus et netus et malesuada fames. Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim. Sed felis eget velit aliquet. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Sit amet mattis vulputate enim nulla aliquet porttitor. Amet dictum sit amet justo donec. Mauris augue neque gravida in. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Faucibus turpis in eu mi bibendum neque egestas congue. At ultrices mi tempus imperdiet nulla. Et leo duis ut diam quam nulla porttitor massa id. Natoque penatibus et magnis dis parturient montes nascetur. Nunc vel risus commodo viverra maecenas. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Est ante in nibh mauris cursus mattis molestie a iaculis. Habitant morbi tristique senectus et netus. Integer feugiat scelerisque varius morbi enim nunc. Venenatis lectus magna fringilla urna. Nunc vel risus commodo viverra maecenas accumsan. Quam lacus suspendisse faucibus interdum posuere. Velit euismod in pellentesque massa placerat duis ultricies. In metus vulputate eu scelerisque felis imperdiet proin. Convallis convallis tellus id interdum velit laoreet id. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Eget nunc scelerisque viverra mauris. In nisl nisi scelerisque eu ultrices. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Eget est lorem ipsum dolor sit amet consectetur. Auctor urna nunc id cursus metus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Etiam erat velit scelerisque in dictum. Sodales neque sodales ut etiam sit amet nisl purus. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Sed turpis tincidunt id aliquet. Duis at consectetur lorem donec massa. Egestas congue quisque egestas diam in. A erat nam at lectus urna duis. Rhoncus dolor purus non enim praesent elementum. At imperdiet dui accumsan sit amet nulla. Leo urna molestie at elementum eu facilisis sed odio. Molestie nunc non blandit massa enim. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Mollis nunc sed id semper risus in hendrerit gravida. Nam libero justo laoreet sit amet cursus. Id neque aliquam vestibulum morbi blandit."),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+};
+exports.ScrollableModalManyButtons = ScrollableModalManyButtons;
+var ScrollableModalMinimalContent = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(Modal_1.Modal, { open: true, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, actions: [
+            react_1.default.createElement(Button_1.Button, { size: AppearanceTypes_1.AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+            react_1.default.createElement(Button_1.Button, { size: AppearanceTypes_1.AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); } }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+        ], scrollable: true },
+        (0, addon_knobs_1.text)("Content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+};
+exports.ScrollableModalMinimalContent = ScrollableModalMinimalContent;
+var TransparentOverlayModal = function () { return (react_1.default.createElement(Modal_1.Modal, { open: true, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: (0, addon_knobs_1.text)("Aria Description", "Modal Description"), hideCloseIcon: true, actions: [
+        react_1.default.createElement(Button_1.Button, { size: AppearanceTypes_1.AppearanceSizeType.small, onClick: noop, styleType: AppearanceTypes_1.AppearanceStyleType.primary }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+        react_1.default.createElement(Button_1.Button, { size: AppearanceTypes_1.AppearanceSizeType.small, onClick: noop }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+    ], backdrop: false }, (0, addon_knobs_1.text)("Content", "Modal Content"))); };
+exports.TransparentOverlayModal = TransparentOverlayModal;
+var ManyButtons = function () {
+    var _a = (0, react_1.useState)(false), openModal = _a[0], setOpenModal = _a[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.Button, { onClick: function () {
+                setOpenModal(!openModal);
+            } }, (0, addon_knobs_1.text)("Button Label", "Open Modal")),
+        react_1.default.createElement("div", { style: { height: "1000px" } }),
+        react_1.default.createElement(Modal_1.Modal, { open: openModal, title: (0, addon_knobs_1.text)("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: (0, addon_knobs_1.boolean)("Backdrop", true), slim: (0, addon_knobs_1.boolean)("Slim", false), hideCloseIcon: (0, addon_knobs_1.boolean)("Hide Close Icon", false), actions: [
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 4 Label", "New")),
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 3 Label", "Copy")),
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 2 Label", "Submit")),
+                react_1.default.createElement(Button_1.Button, { onClick: function () { return setOpenModal(!openModal); }, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, (0, addon_knobs_1.text)("Action 1 Label", "Cancel")),
+            ] }, (0, addon_knobs_1.text)("Content", "Modal Content"))));
+};
+exports.ManyButtons = ManyButtons;
+//# sourceMappingURL=Modal.stories.js.map

package/dist/src/overlays/Modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/overlays/Modal.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/overlays/Overlay.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Overlay.scss";
+export declare type OverlayProps = {
+    open?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescription?: string;
+    className?: string;
+    backdrop?: boolean;
+    onClose?: () => void;
+    children: React.ReactNode;
+    slim?: boolean;
+    role?: string;
+    scrollable?: boolean;
+};
+export declare const Overlay: (props: OverlayProps) => any;
+export default Overlay;

package/dist/src/overlays/Overlay.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.Overlay = void 0;
+var react_1 = __importStar(require("react"));
+require("./Overlay.scss");
+var useKeyPress_1 = __importDefault(require("../helpers/useKeyPress"));
+var react_dom_1 = require("react-dom");
+var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
+var react_remove_scroll_1 = require("react-remove-scroll");
+var react_transition_group_1 = require("react-transition-group");
+var OverlayInner = function (props) {
+    var closeHandler = function () {
+        if (props.onClose)
+            props.onClose();
+    };
+    (0, useKeyPress_1.default)("Escape", function () { return closeHandler(); });
+    var classNames = ["fixed-overlay"];
+    if (typeof props.backdrop === "undefined" || props.backdrop)
+        classNames.push("is-backdrop");
+    if (props.className)
+        classNames.push(props.className);
+    return (react_1.default.createElement("div", { className: classNames.join(" "), role: props.role, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescription, onClick: function (e) {
+            if (e.target === e.currentTarget)
+                closeHandler();
+        }, onKeyPress: function (e) {
+            if (e.key === "Escape")
+                closeHandler();
+        } },
+        react_1.default.createElement("div", { className: "fixed-overlay__inner ".concat(props.slim ? "fixed-overlay__inner-slim" : "") },
+            react_1.default.createElement(react_focus_lock_1.default, null, props.children))));
+};
+var Overlay = function (props) {
+    var documentAvailable = typeof document !== "undefined";
+    var overlayRoot = (0, react_1.useState)(documentAvailable ? document.querySelector("#__next") : null)[0];
+    var elForPortal = (0, react_1.useState)(documentAvailable ? document.createElement("div") : null)[0];
+    // append overlay to the root of app
+    (0, react_1.useEffect)(function () {
+        if (!(overlayRoot && elForPortal))
+            return;
+        overlayRoot.appendChild(elForPortal);
+        return function () {
+            overlayRoot.removeChild(elForPortal);
+        };
+    }, [elForPortal, overlayRoot]);
+    return (elForPortal &&
+        (0, react_dom_1.createPortal)(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: props.open, timeout: 250, classNames: "overlay-effect", mountOnEnter: true, unmountOnExit: true },
+            react_1.default.createElement(react_remove_scroll_1.RemoveScroll, null,
+                react_1.default.createElement(OverlayInner, __assign({}, props), props.children))), elForPortal));
+};
+exports.Overlay = Overlay;
+exports.default = exports.Overlay;
+//# sourceMappingURL=Overlay.js.map

package/dist/src/overlays/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../src/overlays/Overlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAClD,0BAAuB;AACvB,uEAAgD;AAChD,uCAAwC;AACxC,sEAAwC;AACxC,2DAAkD;AAClD,iEAAsD;AAetD,IAAM,YAAY,GAAG,UAAC,KAAmB;IACvC,IAAM,YAAY,GAAG;QACnB,IAAI,KAAK,CAAC,OAAO;YAAE,KAAK,CAAC,OAAO,EAAE,CAAA;IACpC,CAAC,CAAA;IAED,IAAA,qBAAW,EAAC,QAAQ,EAAE,cAAM,OAAA,YAAY,EAAE,EAAd,CAAc,CAAC,CAAA;IAE3C,IAAM,UAAU,GAAG,CAAC,eAAe,CAAC,CAAA;IACpC,IAAI,OAAO,KAAK,CAAC,QAAQ,KAAK,WAAW,IAAI,KAAK,CAAC,QAAQ;QAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAC3F,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAErD,OAAO,CACL,uCACE,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,qBACC,KAAK,CAAC,cAAc,sBACnB,KAAK,CAAC,eAAe,EACvC,OAAO,EAAE,UAAC,CAAC;YACT,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;gBAAE,YAAY,EAAE,CAAA;QAClD,CAAC,EACD,UAAU,EAAE,UAAC,CAAC;YACZ,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,YAAY,EAAE,CAAA;QACxC,CAAC;QAED,uCAAK,SAAS,EAAE,+BAAwB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAE;YACrF,8BAAC,0BAAS,QAAE,KAAK,CAAC,QAAQ,CAAa,CACnC,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAEM,IAAM,OAAO,GAAG,UAAC,KAAmB;IACzC,IAAM,iBAAiB,GAAG,OAAO,QAAQ,KAAK,WAAW,CAAA;IACzD,IAAM,WAAW,GAAG,IAAA,gBAAQ,EAC1B,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAC7D,CAAC,CAAC,CAAC,CAAA;IACJ,IAAM,WAAW,GAAG,IAAA,gBAAQ,EAC1B,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CACzD,CAAC,CAAC,CAAC,CAAA;IAEJ,oCAAoC;IACpC,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC;YAAE,OAAM;QAEzC,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QAEpC,OAAO;YACL,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QACtC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9B,OAAO,CACL,WAAW;QACX,IAAA,wBAAY,EACV,8BAAC,sCAAa,IACZ,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,OAAO,EAAE,GAAG,EACZ,UAAU,EAAC,gBAAgB,EAC3B,YAAY,QACZ,aAAa;YAEb,8BAAC,kCAAY;gBACX,8BAAC,YAAY,eAAK,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAgB,CAC3C,CACD,EAChB,WAAW,CACZ,CACF,CAAA;AACH,CAAC,CAAA;AArCY,QAAA,OAAO,WAqCnB;AAED,kBAAe,eAAO,CAAA"}

package/dist/src/page_components/ApplicationTimeline.d.ts

@@ -0,0 +1,10 @@
+import "./ApplicationTimeline.scss";
+export interface ApplicationTimelineProps {
+    strings?: {
+        applicationReceived?: string;
+        applicationsClosed?: string;
+        applicationsRanked?: string;
+    };
+}
+declare const ApplicationTimeline: (props: ApplicationTimelineProps) => JSX.Element;
+export { ApplicationTimeline };

package/dist/src/page_components/ApplicationTimeline.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApplicationTimeline = void 0;
+var react_1 = __importDefault(require("react"));
+var markdown_to_jsx_1 = __importDefault(require("markdown-to-jsx"));
+var Icon_1 = require("../icons/Icon");
+var translator_1 = require("../helpers/translator");
+require("./ApplicationTimeline.scss");
+var ApplicationTimeline = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    return (react_1.default.createElement("ul", { className: "progress-nav application-timeline", "aria-label": "Steps of processing your application" },
+        react_1.default.createElement("li", { className: "progress-nav__dot-item is-active", "aria-current": "step" },
+            react_1.default.createElement("span", { className: "text-white absolute" },
+                react_1.default.createElement(Icon_1.Icon, { symbol: "check", size: "base" })),
+            react_1.default.createElement(markdown_to_jsx_1.default, { className: "font-bold", options: { disableParsingRawHTML: true } }, (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.applicationReceived) !== null && _b !== void 0 ? _b : (0, translator_1.t)("application.review.confirmation.applicationReceived"))),
+        react_1.default.createElement("li", { className: "progress-nav__dot-item is-disabled" },
+            react_1.default.createElement(markdown_to_jsx_1.default, { options: { disableParsingRawHTML: true } }, (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.applicationsClosed) !== null && _d !== void 0 ? _d : (0, translator_1.t)("application.review.confirmation.applicationsClosed"))),
+        react_1.default.createElement("li", { className: "progress-nav__dot-item is-disabled" },
+            react_1.default.createElement(markdown_to_jsx_1.default, { options: { disableParsingRawHTML: true } }, (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.applicationsRanked) !== null && _f !== void 0 ? _f : (0, translator_1.t)("application.review.confirmation.applicationsRanked")))));
+};
+exports.ApplicationTimeline = ApplicationTimeline;
+//# sourceMappingURL=ApplicationTimeline.js.map

package/dist/src/page_components/ApplicationTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationTimeline.js","sourceRoot":"","sources":["../../../src/page_components/ApplicationTimeline.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,oEAAsC;AACtC,sCAAoC;AACpC,oDAAyC;AACzC,sCAAmC;AASnC,IAAM,mBAAmB,GAAG,UAAC,KAA+B;;IAAK,OAAA,CAC/D,sCACE,SAAS,EAAC,mCAAmC,gBAClC,sCAAsC;QAEjD,sCAAI,SAAS,EAAC,kCAAkC,kBAAc,MAAM;YAClE,wCAAM,SAAS,EAAC,qBAAqB;gBACnC,8BAAC,WAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,CAC9B;YACP,8BAAC,yBAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,IACrE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,mBAAmB,mCACjC,IAAA,cAAC,EAAC,qDAAqD,CAAC,CACjD,CACR;QACL,sCAAI,SAAS,EAAC,oCAAoC;YAChD,8BAAC,yBAAQ,IAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAC/C,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,kBAAkB,mCAChC,IAAA,cAAC,EAAC,oDAAoD,CAAC,CAChD,CACR;QACL,sCAAI,SAAS,EAAC,oCAAoC;YAChD,8BAAC,yBAAQ,IAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAC/C,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,kBAAkB,mCAChC,IAAA,cAAC,EAAC,oDAAoD,CAAC,CAChD,CACR,CACF,CACN,CAAA;CAAA,CAAA;AAEQ,kDAAmB"}

package/dist/src/page_components/NavigationHeader.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./NavigationHeader.scss";
+declare type NavigationHeaderProps = {
+    className?: string;
+    title: React.ReactNode;
+    listingId?: string;
+    tabs?: NavigationHeaderTabs;
+    breadcrumbs?: React.ReactNode;
+    children?: React.ReactChild;
+};
+declare type NavigationHeaderTabs = {
+    show?: boolean;
+    flagsQty?: number;
+    listingLabel: string;
+    applicationsLabel: string;
+};
+declare const NavigationHeader: ({ className, title, listingId, tabs, children, breadcrumbs, }: NavigationHeaderProps) => JSX.Element;
+export { NavigationHeader as default, NavigationHeader };

package/dist/src/page_components/NavigationHeader.js

@@ -0,0 +1,65 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationHeader = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+var __1 = require("../..");
+var NavigationContext_1 = require("../config/NavigationContext");
+require("./NavigationHeader.scss");
+var NavigationHeader = function (_a) {
+    var className = _a.className, title = _a.title, listingId = _a.listingId, tabs = _a.tabs, children = _a.children, breadcrumbs = _a.breadcrumbs;
+    var navigation = (0, react_1.useContext)(NavigationContext_1.NavigationContext);
+    var currentPath = navigation.router.asPath;
+    var tabNavElements = (0, react_1.useMemo)(function () {
+        var elements = [
+            {
+                label: (tabs === null || tabs === void 0 ? void 0 : tabs.listingLabel) || "",
+                path: "/listings/".concat(listingId),
+                activePaths: ["/listings/".concat(listingId)],
+                content: undefined,
+            },
+            {
+                label: (tabs === null || tabs === void 0 ? void 0 : tabs.applicationsLabel) || "",
+                path: "/listings/".concat(listingId, "/applications"),
+                activePaths: [
+                    "/listings/".concat(listingId, "/applications"),
+                    "/listings/".concat(listingId, "/applications/pending"),
+                    "/listings/".concat(listingId, "/applications/pending?type=name_dob"),
+                    "/listings/".concat(listingId, "/applications/pending?type=email"),
+                    "/listings/".concat(listingId, "/applications/resolved"),
+                ],
+                content: undefined,
+            },
+        ];
+        return elements;
+    }, [tabs, listingId]);
+    var tabNavItems = (0, react_1.useMemo)(function () {
+        return (react_1.default.createElement(__1.TabNav, { className: "relative -bottom-8 md:-bottom-10" }, tabNavElements.map(function (tab) { return (react_1.default.createElement(__1.TabNavItem, { key: tab.path, tagContent: tab === null || tab === void 0 ? void 0 : tab.content, current: tab.activePaths.includes(currentPath), href: tab.path, tagSize: __1.AppearanceSizeType.small }, tab.label)); })));
+    }, [currentPath, tabNavElements]);
+    return (react_1.default.createElement(__1.PageHeader, { className: "navigation-header ".concat(className !== null && className !== void 0 ? className : ""), title: title, tabNav: (tabs === null || tabs === void 0 ? void 0 : tabs.show) ? tabNavItems : null, breadcrumbs: breadcrumbs }, children));
+};
+exports.default = NavigationHeader;
+exports.NavigationHeader = NavigationHeader;
+//# sourceMappingURL=NavigationHeader.js.map

package/dist/src/page_components/NavigationHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationHeader.js","sourceRoot":"","sources":["../../../src/page_components/NavigationHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmD;AACnD,2BAA2E;AAC3E,iEAAgE;AAChE,mCAAiC;AAyBjC,IAAM,gBAAgB,GAAG,UAAC,EAOF;QANtB,SAAS,eAAA,EACT,KAAK,WAAA,EACL,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEX,IAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,qCAAiB,CAAC,CAAC;IACjD,IAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC;IAE7C,IAAM,cAAc,GAAG,IAAA,eAAO,EAAC;QAC7B,IAAM,QAAQ,GAAkC;YAC9C;gBACE,KAAK,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,KAAI,EAAE;gBAC/B,IAAI,EAAE,oBAAa,SAAS,CAAE;gBAC9B,WAAW,EAAE,CAAC,oBAAa,SAAS,CAAE,CAAC;gBACvC,OAAO,EAAE,SAAS;aACnB;YACD;gBACE,KAAK,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,iBAAiB,KAAI,EAAE;gBACpC,IAAI,EAAE,oBAAa,SAAS,kBAAe;gBAC3C,WAAW,EAAE;oBACX,oBAAa,SAAS,kBAAe;oBACrC,oBAAa,SAAS,0BAAuB;oBAC7C,oBAAa,SAAS,wCAAqC;oBAC3D,oBAAa,SAAS,qCAAkC;oBACxD,oBAAa,SAAS,2BAAwB;iBAC/C;gBACD,OAAO,EAAE,SAAS;aACnB;SACF,CAAC;QAEF,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtB,IAAM,WAAW,GAAG,IAAA,eAAO,EAAC;QAC1B,OAAO,CACL,8BAAC,UAAM,IAAC,SAAS,EAAC,kCAAkC,IACjD,cAAc,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,CAC3B,8BAAC,cAAU,IACT,GAAG,EAAE,GAAG,CAAC,IAAI,EACb,UAAU,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,EACxB,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,EAC9C,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,OAAO,EAAE,sBAAkB,CAAC,KAAK,IAEhC,GAAG,CAAC,KAAK,CACC,CACd,EAV4B,CAU5B,CAAC,CACK,CACV,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,8BAAC,cAAU,IACT,SAAS,EAAE,4BAAqB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,EACjD,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,EAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EACvC,WAAW,EAAE,WAAW,IAEvB,QAAQ,CACE,CACd,CAAC;AACJ,CAAC,CAAC;AAE2B,mCAAO;AAAE,4CAAgB"}

package/dist/src/page_components/forgot-password/FormForgotPassword.d.ts

@@ -0,0 +1,21 @@
+import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn";
+import type { UseFormMethods } from "react-hook-form";
+export declare type FormForgotPasswordProps = {
+    control: FormForgotPasswordControl;
+    onSubmit: (data: FormForgotPasswordValues) => void;
+    networkError: FormForgotPasswordNetworkError;
+};
+export declare type FormForgotPasswordNetworkError = {
+    error: NetworkStatusContent;
+    reset: NetworkErrorReset;
+};
+export declare type FormForgotPasswordControl = {
+    errors: UseFormMethods["errors"];
+    handleSubmit: UseFormMethods["handleSubmit"];
+    register: UseFormMethods["register"];
+};
+export declare type FormForgotPasswordValues = {
+    email: string;
+};
+declare const FormForgotPassword: ({ onSubmit, networkError, control: { errors, register, handleSubmit }, }: FormForgotPasswordProps) => JSX.Element;
+export { FormForgotPassword as default, FormForgotPassword };

package/dist/src/page_components/forgot-password/FormForgotPassword.js

@@ -0,0 +1,59 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormForgotPassword = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+var __1 = require("../../..");
+var NavigationContext_1 = require("../../config/NavigationContext");
+var FormForgotPassword = function (_a) {
+    var _b;
+    var onSubmit = _a.onSubmit, networkError = _a.networkError, _c = _a.control, errors = _c.errors, register = _c.register, handleSubmit = _c.handleSubmit;
+    var onError = function () {
+        window.scrollTo(0, 0);
+    };
+    var router = (0, react_1.useContext)(NavigationContext_1.NavigationContext).router;
+    return (react_1.default.createElement(__1.FormCard, null,
+        react_1.default.createElement("div", { className: "form-card__lead text-center border-b mx-0" },
+            react_1.default.createElement(__1.Icon, { size: "2xl", symbol: "profile" }),
+            react_1.default.createElement("h1", { className: "form-card__title" }, (0, __1.t)("authentication.forgotPassword.sendEmail"))),
+        Object.entries(errors).length > 0 && !networkError.error && (react_1.default.createElement(__1.AlertBox, { type: "alert", inverted: true, closeable: true }, errors.authentication
+            ? errors.authentication.message
+            : (0, __1.t)("errors.errorsToResolve"))),
+        !!((_b = networkError.error) === null || _b === void 0 ? void 0 : _b.error) && Object.entries(errors).length === 0 && (react_1.default.createElement(__1.ErrorMessage, { id: "forgotpasswordemail-error", error: !!networkError.error },
+            react_1.default.createElement(__1.AlertBox, { type: "alert", inverted: true, onClose: function () { return networkError.reset(); } }, networkError.error.title),
+            react_1.default.createElement(__1.AlertNotice, { title: "", type: "alert", inverted: true }, networkError.error.description))),
+        react_1.default.createElement(__1.SiteAlert, { type: "notice", dismissable: true }),
+        react_1.default.createElement("div", { className: "form-card__group pt-0" },
+            react_1.default.createElement(__1.Form, { id: "sign-in", className: "mt-10", onSubmit: handleSubmit(onSubmit, onError) },
+                react_1.default.createElement(__1.Field, { caps: true, name: "email", label: (0, __1.t)("t.email"), validation: { required: true, pattern: __1.emailRegex }, error: errors.email, errorMessage: errors.email ? (0, __1.t)("authentication.signIn.loginError") : undefined, register: register, onChange: function () { return networkError.reset(); } }),
+                react_1.default.createElement("section", null,
+                    react_1.default.createElement("div", { className: "text-center mt-6" },
+                        react_1.default.createElement(__1.Button, { styleType: __1.AppearanceStyleType.primary }, (0, __1.t)("authentication.forgotPassword.sendEmail"))),
+                    react_1.default.createElement("div", { className: "text-center mt-6" },
+                        react_1.default.createElement(__1.Button, { onClick: function () { return router.back(); }, unstyled: true }, (0, __1.t)("t.cancel"))))))));
+};
+exports.default = FormForgotPassword;
+exports.FormForgotPassword = FormForgotPassword;
+//# sourceMappingURL=FormForgotPassword.js.map

package/dist/src/page_components/forgot-password/FormForgotPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormForgotPassword.js","sourceRoot":"","sources":["../../../../src/page_components/forgot-password/FormForgotPassword.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAC1C,8BAakB;AAElB,oEAAmE;AAwBnE,IAAM,kBAAkB,GAAG,UAAC,EAIF;;QAHxB,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,eAA2C,EAAhC,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAA;IAEzC,IAAM,OAAO,GAAG;QACd,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEM,IAAA,MAAM,GAAK,IAAA,kBAAU,EAAC,qCAAiB,CAAC,OAAlC,CAAmC;IAEjD,OAAO,CACL,8BAAC,YAAQ;QACP,uCAAK,SAAS,EAAC,2CAA2C;YACxD,8BAAC,QAAI,IAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,GAAG;YACpC,sCAAI,SAAS,EAAC,kBAAkB,IAC7B,IAAA,KAAC,EAAC,yCAAyC,CAAC,CAC1C,CACD;QAEL,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAC3D,8BAAC,YAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,QAAC,SAAS,UACtC,MAAM,CAAC,cAAc;YACpB,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,OAAO;YAC/B,CAAC,CAAC,IAAA,KAAC,EAAC,wBAAwB,CAAC,CACtB,CACZ;QAEA,CAAC,CAAC,CAAA,MAAA,YAAY,CAAC,KAAK,0CAAE,KAAK,CAAA,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CACrE,8BAAC,gBAAY,IACX,EAAE,EAAE,2BAA2B,EAC/B,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,KAAK;YAE3B,8BAAC,YAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,QAAC,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,KAAK,EAAE,EAApB,CAAoB,IAChE,YAAY,CAAC,KAAK,CAAC,KAAK,CAChB;YAEX,8BAAC,eAAW,IAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,UACxC,YAAY,CAAC,KAAK,CAAC,WAAW,CACnB,CACD,CAChB;QAED,8BAAC,aAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,SAAG;QAEvC,uCAAK,SAAS,EAAC,uBAAuB;YACpC,8BAAC,QAAI,IACH,EAAE,EAAC,SAAS,EACZ,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC;gBAEzC,8BAAC,SAAK,IACJ,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAA,KAAC,EAAC,SAAS,CAAC,EACnB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,cAAU,EAAE,EACnD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,YAAY,EACV,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAA,KAAC,EAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAElE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,cAAM,OAAA,YAAY,CAAC,KAAK,EAAE,EAApB,CAAoB,GACpC;gBACF;oBACE,uCAAK,SAAS,EAAC,kBAAkB;wBAC/B,8BAAC,UAAM,IAAC,SAAS,EAAE,uBAAmB,CAAC,OAAO,IAC3C,IAAA,KAAC,EAAC,yCAAyC,CAAC,CACtC,CACL;oBACN,uCAAK,SAAS,EAAC,kBAAkB;wBAC/B,8BAAC,UAAM,IAAC,OAAO,EAAE,cAAM,OAAA,MAAM,CAAC,IAAI,EAAE,EAAb,CAAa,EAAE,QAAQ,EAAE,IAAI,IACjD,IAAA,KAAC,EAAC,UAAU,CAAC,CACP,CACL,CACE,CACL,CACH,CACG,CACZ,CAAC;AACJ,CAAC,CAAC;AAE6B,qCAAO;AAAE,gDAAkB"}

package/dist/src/page_components/listing/AdditionalFees.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface AdditionalFeesProps {
+    /** The application fee for the property, rendered in the first block */
+    applicationFee?: string;
+    /** The deposit amount for the property, rendered in the second block */
+    deposit?: string;
+    strings: {
+        sectionHeader: string;
+        deposit?: string;
+        depositSubtext?: string[];
+        applicationFee?: string;
+        applicationFeeSubtext?: string[];
+    };
+    /** Footer content rendered below both blocks, i.e. utilities included section, strings, or other formatted info  */
+    footerContent?: (string | React.ReactNode)[];
+}
+declare const AdditionalFees: ({ deposit, applicationFee, footerContent, strings, }: AdditionalFeesProps) => JSX.Element;
+export { AdditionalFees as default, AdditionalFees };

package/dist/src/page_components/listing/AdditionalFees.js

@@ -0,0 +1,48 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdditionalFees = exports.default = void 0;
+var React = __importStar(require("react"));
+var AdditionalFees = function (_a) {
+    var _b, _c;
+    var deposit = _a.deposit, applicationFee = _a.applicationFee, footerContent = _a.footerContent, strings = _a.strings;
+    if (!deposit && !applicationFee && (!footerContent || (footerContent === null || footerContent === void 0 ? void 0 : footerContent.length) === 0))
+        return React.createElement(React.Fragment, null);
+    return (React.createElement("div", { className: "info-card bg-gray-100 border-0" },
+        React.createElement("p", { className: "info-card__title mb-2" }, strings.sectionHeader),
+        React.createElement("div", { className: "info-card__columns text-sm" },
+            applicationFee && (React.createElement("div", { className: "info-card__column-2 ".concat(deposit && "mr-2") },
+                React.createElement("div", { className: "text-base" }, strings.applicationFee),
+                React.createElement("div", { className: "text-xl font-bold" }, applicationFee), (_b = strings.applicationFeeSubtext) === null || _b === void 0 ? void 0 :
+                _b.map(function (appFeeSubtext, index) { return (React.createElement("div", { key: index }, appFeeSubtext)); }))),
+            deposit && (React.createElement("div", { className: "info-card__column-2 ".concat(applicationFee && "ml-2") },
+                React.createElement("div", { className: "text-base" }, strings.deposit),
+                React.createElement("div", { className: "text-xl font-bold" }, deposit), (_c = strings.depositSubtext) === null || _c === void 0 ? void 0 :
+                _c.map(function (depositSubtext, index) { return (React.createElement("div", { key: index }, depositSubtext)); })))),
+        footerContent && (footerContent === null || footerContent === void 0 ? void 0 : footerContent.length) > 0 && (React.createElement("div", { className: "info-card__columns text-sm" }, footerContent === null || footerContent === void 0 ? void 0 : footerContent.map(function (elem, idx) { return (React.createElement("div", { key: "footer_info_".concat(idx), className: "info-card__column-2" }, elem)); })))));
+};
+exports.default = AdditionalFees;
+exports.AdditionalFees = AdditionalFees;
+//# sourceMappingURL=AdditionalFees.js.map