@bloom-housing/ui-components 12.7.6 → 13.0.0

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

@@ -1,100 +1,143 @@
+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);
+};
 import React, { useState } from "react";
-import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+// import { withKnobs, text, boolean } from "@storybook/addon-knobs"
 import { BADGES } from "../../.storybook/constants";
 import "./Modal.scss";
 import { Modal } from "./Modal";
 import { Button } from "../actions/Button";
 import { AppearanceBorderType, AppearanceSizeType, AppearanceStyleType, } from "../global/AppearanceTypes";
-import ModalDocumentation from "./Modal.docs.mdx";
 export default {
     title: "Overlays/Modal 🚩",
     id: "overlays-modal",
-    decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }, withKnobs],
+    decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
     parameters: {
-        docs: {
-            page: ModalDocumentation,
-        },
         badges: [BADGES.GEN2],
     },
+    argTypes: {
+        buttonLabel: {
+            control: "text",
+        },
+    },
 };
 var noop = function () {
     // intentionally blank
 };
-export var BasicModal = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: function () {
-                setOpenModal(!openModal);
-            } }, text("Button Label", "Open Modal")),
-        React.createElement("div", { style: { height: "1000px" } }),
-        React.createElement(Modal, { open: openModal, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: boolean("Backdrop", true), slim: boolean("Slim", false), hideCloseIcon: boolean("Hide Close Icon", false), actions: [
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, text("Action 2 Label", "Submit")),
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, size: AppearanceSizeType.small }, text("Action 1 Label", "Cancel")),
-            ] }, text("Content", "Modal Content"))));
+var defaultArgs = {
+    buttonLabel: "Open Modal",
+    title: "Modal Title",
+    backdrop: true,
+    slim: false,
+    hideCloseIcon: false,
+    action1Label: "Action 1 Label",
+    action2Label: "Action 2 Label",
+    content: "Modal Content",
 };
-export var BasicModalOverflowContent = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: function () {
-                setOpenModal(!openModal);
-            } }, text("Button Label", "Open Modal")),
-        React.createElement("div", { style: { height: "1000px" } }),
-        React.createElement(Modal, { open: openModal, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: boolean("Backdrop", true), slim: boolean("Slim", false), hideCloseIcon: boolean("Hide Close Icon", false), actions: [
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, text("Action 2 Label", "Submit")),
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, size: AppearanceSizeType.small }, text("Action 1 Label", "Cancel")),
-            ] },
-            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.createElement("div", null,
-                React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" })))));
+export var BasicModal = {
+    args: __assign({}, defaultArgs),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: function () {
+                    setOpenModal(!openModal);
+                } }, args.buttonLabel),
+            React.createElement("div", { style: { height: "1000px" } }),
+            React.createElement(Modal, { open: openModal, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: args.backdrop, slim: args.slim, hideCloseIcon: args.hideCloseIcon, actions: [
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, args.action2Label),
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, size: AppearanceSizeType.small }, args.action1Label),
+                ] }, args.content)));
+    },
+};
+export var BasicModalOverflowContent = {
+    args: __assign(__assign({}, defaultArgs), { 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." }),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: function () {
+                    setOpenModal(!openModal);
+                } }, args.buttonLabel),
+            React.createElement("div", { style: { height: "1000px" } }),
+            React.createElement(Modal, { open: openModal, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: args.backdrop, slim: args.slim, hideCloseIcon: args.hideCloseIcon, actions: [
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, args.action2Label),
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, size: AppearanceSizeType.small }, args.action1Label),
+                ] },
+                args.content,
+                React.createElement("div", null,
+                    React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" })))));
+    },
 };
-export var ScrollableModal = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(Modal, { open: true, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, actions: [
-            React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary }, text("Action 2 Label", "Submit")),
-            React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); } }, text("Action 1 Label", "Cancel")),
-        ], scrollableModal: true },
-        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.createElement("div", null,
-            React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+export var ScrollableModal = {
+    args: __assign(__assign({}, defaultArgs), { 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." }),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(Modal, { open: true, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, actions: [
+                React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary }, args.action2Label),
+                React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); } }, args.action1Label),
+            ], scrollableModal: true },
+            args.content,
+            React.createElement("div", null,
+                React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+    },
 };
-export var ScrollableModalNoFooter = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(Modal, { open: true, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, scrollableModal: true }, 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.")));
+export var ScrollableModalNoFooter = {
+    args: __assign(__assign({}, defaultArgs), { 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." }),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(Modal, { open: true, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, scrollableModal: true }, args.content));
+    },
 };
-export var ScrollableModalManyButtons = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(Modal, { open: true, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, scrollableModal: true, actions: [
-            React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, text("Action 4 Label", "New")),
-            React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, text("Action 3 Label", "Copy")),
-            React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, text("Action 2 Label", "Submit")),
-            React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, text("Action 1 Label", "Cancel")),
-        ] },
-        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.createElement("div", null,
-            React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+export var ScrollableModalManyButtons = {
+    args: __assign(__assign({}, defaultArgs), { action3Label: "Copy", action4Label: "New", 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." }),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(Modal, { open: true, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, scrollableModal: true, actions: [
+                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, args.action4Label),
+                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, args.action3Label),
+                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, args.action2Label),
+                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, args.action1Label),
+            ] },
+            args.content,
+            React.createElement("div", null,
+                React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+    },
 };
-export var ScrollableModalMinimalContent = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(Modal, { open: true, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, actions: [
-            React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary }, text("Action 2 Label", "Submit")),
-            React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); } }, text("Action 1 Label", "Cancel")),
-        ], scrollableModal: true },
-        text("Content", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
-        React.createElement("div", null,
-            React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+export var ScrollableModalMinimalContent = {
+    args: __assign(__assign({}, defaultArgs), { content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(Modal, { open: true, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, actions: [
+                React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary }, args.action1Label),
+                React.createElement(Button, { size: AppearanceSizeType.small, onClick: function () { return setOpenModal(!openModal); } }, args.action2Label),
+            ], scrollableModal: true },
+            args.content,
+            React.createElement("div", null,
+                React.createElement("input", { type: "text", placeholder: "Text Input", className: "border mt-4 p-3" }))));
+    },
 };
-export var ManyButtons = function () {
-    var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: function () {
-                setOpenModal(!openModal);
-            } }, text("Button Label", "Open Modal")),
-        React.createElement("div", { style: { height: "1000px" } }),
-        React.createElement(Modal, { open: openModal, title: text("Title", "Modal Title"), ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: boolean("Backdrop", true), slim: boolean("Slim", false), hideCloseIcon: boolean("Hide Close Icon", false), actions: [
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, text("Action 4 Label", "New")),
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, text("Action 3 Label", "Copy")),
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, text("Action 2 Label", "Submit")),
-                React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, text("Action 1 Label", "Cancel")),
-            ] }, text("Content", "Modal Content"))));
+export var ManyButtons = {
+    args: __assign(__assign({}, defaultArgs), { action3Label: "Copy", action4Label: "New" }),
+    render: function (args) {
+        var _a = useState(false), openModal = _a[0], setOpenModal = _a[1];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: function () {
+                    setOpenModal(!openModal);
+                } }, args.buttonLabel),
+            React.createElement("div", { style: { height: "1000px" } }),
+            React.createElement(Modal, { open: openModal, title: args.title, ariaDescription: "Modal description", onClose: function () { return setOpenModal(!openModal); }, backdrop: args.backdrop, slim: args.slim, hideCloseIcon: args.hideCloseIcon, actions: [
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, args.action4Label),
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, args.action3Label),
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, styleType: AppearanceStyleType.primary, size: AppearanceSizeType.small }, args.action2Label),
+                    React.createElement(Button, { onClick: function () { return setOpenModal(!openModal); }, border: AppearanceBorderType.borderless, size: AppearanceSizeType.small }, args.action1Label),
+                ] }, args.content)));
+    },
 };
 //# sourceMappingURL=Modal.stories.js.map

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

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

@@ -12,6 +12,7 @@ export type OverlayProps = {
     slim?: boolean;
     role?: string;
     scrollable?: boolean;
+    nodeRef?: React.MutableRefObject<null>;
 };
 export declare const Overlay: (props: OverlayProps) => any;
 export default Overlay;

package/dist/src/overlays/Overlay.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import "./Overlay.scss";
 import useKeyPress from "../helpers/useKeyPress";
 import { createPortal } from "react-dom";
@@ -27,7 +27,7 @@ var OverlayInner = function (props) {
         classNames.push("is-backdrop");
     if (props.className)
         classNames.push(props.className);
-    return (React.createElement("div", { className: classNames.join(" "), role: props.role, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescription, "aria-modal": props.ariaModal, onClick: function (e) {
+    return (React.createElement("div", { ref: props.nodeRef, className: classNames.join(" "), role: props.role, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescription, "aria-modal": props.ariaModal, onClick: function (e) {
             if (e.target === e.currentTarget)
                 closeHandler();
         }, onKeyPress: function (e) {
@@ -38,6 +38,7 @@ var OverlayInner = function (props) {
             React.createElement(FocusLock, null, props.children))));
 };
 export var Overlay = function (props) {
+    var nodeRef = useRef(null);
     var documentAvailable = typeof document !== "undefined";
     var overlayRoot = useState(documentAvailable ? document.querySelector("#__next") : null)[0];
     var elForPortal = useState(documentAvailable ? document.createElement("div") : null)[0];
@@ -51,9 +52,9 @@ export var Overlay = function (props) {
         };
     }, [elForPortal, overlayRoot]);
     return (elForPortal &&
-        createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 250, classNames: "overlay-effect", mountOnEnter: true, unmountOnExit: true },
+        createPortal(React.createElement(CSSTransition, { nodeRef: nodeRef, in: props.open, timeout: 250, classNames: "overlay-effect", mountOnEnter: true, unmountOnExit: true },
             React.createElement(RemoveScroll, null,
-                React.createElement(OverlayInner, __assign({}, props), props.children))), elForPortal));
+                React.createElement(OverlayInner, __assign({ nodeRef: nodeRef }, props), props.children))), elForPortal));
 };
 export default Overlay;
 //# sourceMappingURL=Overlay.js.map

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

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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "12.7.6",
+  "version": "13.0.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",
   "main": "index.js",
   "license": "Apache-2.0",
   "private": false,
+  "packageManager": "yarn@1.22.22",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -29,43 +30,40 @@
     "index.ts"
   ],
   "scripts": {
-    "build-storybook": "build-storybook -c .storybook -s ./public",
-    "start": "start-storybook -s ./public -p 40791",
+    "build-storybook": "storybook build -c .storybook ./public",
+    "start": "storybook dev ./public -p 40791",
     "build": "tsc",
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",
     "prettier": "prettier --write \"**/*.tsx\"",
-    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
+    "test:a11y": "storybook build -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.4",
+    "@chromatic-com/storybook": "^3",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@geometricpanda/storybook-addon-badges": "^1.1.1",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storyshots": "^6.3.8",
-    "@storybook/addon-storyshots-puppeteer": "^6.3.8",
-    "@storybook/addons": "^6.5.8",
-    "@storybook/api": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/components": "^6.5.8",
-    "@storybook/core-events": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.8",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
+    "@geometricpanda/storybook-addon-badges": "^2.0.5",
+    "@storybook/addon-a11y": "8.6.14",
+    "@storybook/addon-actions": "8.6.14",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-mdx-gfm": "8.6.14",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/components": "8.6.14",
+    "@storybook/core-events": "8.6.14",
+    "@storybook/node-logger": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-webpack5": "8.6.14",
+    "@storybook/test": "8.6.14",
+    "@storybook/theming": "8.6.14",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.3.0",
     "@types/dompurify": "^2.3.3",
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^30.0.0",
     "@types/jwt-decode": "^2.2.1",
     "@types/mdx": "^2.0.1",
     "@types/node": "18.14.6",
@@ -85,6 +83,7 @@
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "css-loader": "^7.1.2",
     "dotenv": "^8.2.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",
@@ -115,6 +114,7 @@
     "sass": "1.52.1",
     "sass-loader": "^10.0.3",
     "semantic-release": "19.0.5",
+    "storybook": "8.6.14",
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
@@ -135,17 +135,17 @@
     "markdown-to-jsx": "7.1.8",
     "nanoid": "^3.1.12",
     "node-polyglot": "^2.4.0",
-    "react": "18.2.0",
+    "react": "^19.1.1",
     "react-accessible-accordion": "5.0.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "18.2.0",
+    "react-dom": "^19.1.1",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.9.4",
     "react-hook-form": "^6.15.5",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
-    "react-tabs": "^3.2.2",
+    "react-tabs": "^6.0.0",
     "react-text-mask": "^5.5.0",
     "react-transition-group": "^4.4.1",
     "tailwindcss": "2.2.10",

package/src/actions/Button.docs.mdx

@@ -1,6 +1,9 @@
-import { Canvas, Story, Source, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { Button } from "./Button"
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
 
 # Button
 
@@ -14,15 +17,13 @@ The button component offers flexible usage with a variety of different appearanc
 
 There are several props which accept enums to adjust style type, border, and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
 
-<Canvas>
-  <Story id="actions-button--small-and-primary" />
-</Canvas>
+<Canvas of={ButtonStories.SmallAndPrimary} />
 
 Other variants include appearances which aren't button-like such as `unstyled` and `inline`.
 
 ## Component Properties
 
-<ArgsTable of={Button} />
+<ArgTypes of={Button} />
 
 ## Theming Variables