@bloom-housing/ui-components 7.1.0 → 7.2.0

package/dist/src/sections/ContentSection.js

@@ -0,0 +1,37 @@
+"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.ContentSection = exports.default = void 0;
+var React = __importStar(require("react"));
+require("./ContentSection.scss");
+var ContentSection = function (props) { return (React.createElement("section", { className: "content-section" },
+    props.title && (React.createElement("header", { className: "content-section__header" },
+        React.createElement("hgroup", null,
+            React.createElement("h3", { className: "content-section__title" }, props.title),
+            React.createElement("span", { className: "content-section__subtitle" }, props.subtitle)))),
+    props.children)); };
+exports.default = ContentSection;
+exports.ContentSection = ContentSection;
+//# sourceMappingURL=ContentSection.js.map

package/dist/src/sections/ContentSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSection.js","sourceRoot":"","sources":["../../../src/sections/ContentSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,iCAA8B;AAQ9B,IAAM,cAAc,GAAG,UAAC,KAA0B,IAAK,OAAA,CACrD,iCAAS,SAAS,EAAC,iBAAiB;IACjC,KAAK,CAAC,KAAK,IAAI,CACd,gCAAQ,SAAS,EAAC,yBAAyB;QACzC;YACE,4BAAI,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAC,KAAK,CAAM;YACzD,8BAAM,SAAS,EAAC,2BAA2B,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAC5D,CACF,CACV;IAEA,KAAK,CAAC,QAAQ,CACP,CACX,EAbsD,CAatD,CAAA;AAE0B,iCAAO;AAAE,wCAAc"}

package/dist/src/sections/FooterSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import "./FooterSection.scss";
+export interface FooterSectionProps {
+    children: React.ReactNode;
+    className?: string;
+    small?: boolean;
+}
+declare const FooterSection: (props: FooterSectionProps) => JSX.Element;
+export { FooterSection as default, FooterSection };

package/dist/src/sections/FooterSection.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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.FooterSection = exports.default = void 0;
+var React = __importStar(require("react"));
+require("./FooterSection.scss");
+var FooterSection = function (props) { return (React.createElement("div", { className: "footer-row ".concat(props.className || "") },
+    React.createElement("div", { className: "footer-row__section ".concat(props.small ? "py-2" : "pb-8") }, props.children))); };
+exports.default = FooterSection;
+exports.FooterSection = FooterSection;
+//# sourceMappingURL=FooterSection.js.map

package/dist/src/sections/FooterSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterSection.js","sourceRoot":"","sources":["../../../src/sections/FooterSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,gCAA6B;AAQ7B,IAAM,aAAa,GAAG,UAAC,KAAyB,IAAK,OAAA,CACnD,6BAAK,SAAS,EAAE,qBAAc,KAAK,CAAC,SAAS,IAAI,EAAE,CAAE;IACnD,6BAAK,SAAS,EAAE,8BAAuB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAE,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC1F,CACP,EAJoD,CAIpD,CAAA;AAEyB,gCAAO;AAAE,sCAAa"}

package/dist/src/sections/GridSection.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import "./GridSection.scss";
+export interface GridCellProps {
+    children: React.ReactNode;
+    span?: number;
+    className?: string;
+    ariaLabel?: string;
+}
+declare const GridCell: (props: GridCellProps) => JSX.Element;
+export interface GridSectionProps {
+    title?: React.ReactNode;
+    subtitle?: string;
+    description?: string;
+    tinted?: boolean;
+    grid?: boolean;
+    columns?: number;
+    inset?: boolean;
+    className?: string;
+    tightSpacing?: boolean;
+    reverse?: boolean;
+    children: React.ReactNode;
+    separator?: boolean;
+}
+declare const GridSection: (props: GridSectionProps) => JSX.Element;
+export { GridSection as default, GridSection, GridCell };

package/dist/src/sections/GridSection.js

@@ -0,0 +1,78 @@
+"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.GridCell = exports.GridSection = exports.default = void 0;
+var React = __importStar(require("react"));
+require("./GridSection.scss");
+var GridCell = function (props) {
+    var _a;
+    var gridCellClasses = ["grid-item"];
+    if (props.span)
+        gridCellClasses.push("md:col-span-".concat(props.span));
+    if (props.className)
+        gridCellClasses.push(props.className);
+    return (React.createElement("article", { "aria-label": (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : "", className: gridCellClasses.join(" ") }, props.children));
+};
+exports.GridCell = GridCell;
+var GridSection = function (props) {
+    var sectionClasses = ["grid-section"];
+    if (props.separator)
+        sectionClasses.push("has-separator");
+    var gridClasses = ["grid-section__inner"];
+    var grid = typeof props.grid != "undefined" ? props.grid : true;
+    if (props.tinted)
+        gridClasses.push("is-tinted");
+    if (props.inset)
+        gridClasses.push("is-inset");
+    if (grid) {
+        var columns = props.columns || 3;
+        gridClasses.push("md:grid md:grid-cols-".concat(columns));
+        if (props.tightSpacing) {
+            gridClasses.push("md:gap-2");
+        }
+        else {
+            gridClasses.push("md:gap-8");
+        }
+        if (props.reverse)
+            gridClasses.push("is-reversed");
+    }
+    if (props.className)
+        gridClasses.push(props.className);
+    var headerClasses = ["grid-section__header"];
+    if (props.subtitle && (!props.title || !props.inset))
+        headerClasses.push("mb-0");
+    var subtitleClasses = ["grid-section__subtitle"];
+    if (props.title)
+        subtitleClasses.push("mt-4");
+    return (React.createElement("section", { className: sectionClasses.join(" ") },
+        (props.title || props.subtitle) && (React.createElement("header", { className: headerClasses.join(" ") },
+            props.title && React.createElement("h2", { className: "grid-section__title" }, props.title),
+            props.subtitle && React.createElement("h3", { className: subtitleClasses.join(" ") }, props.subtitle),
+            props.description && (React.createElement("span", { className: "grid-section__description" }, props.description)))),
+        React.createElement("div", { className: gridClasses.join(" ") }, props.children)));
+};
+exports.default = GridSection;
+exports.GridSection = GridSection;
+//# sourceMappingURL=GridSection.js.map

package/dist/src/sections/GridSection.js.map

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

package/dist/src/sections/GridSection.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const DefaultThreeColumns: () => JSX.Element;
+export declare const TwoColumns: () => JSX.Element;
+export declare const FourColumnsEdit: () => JSX.Element;
+export declare const FourColumnsFields: () => JSX.Element;
+export declare const Address: () => JSX.Element;
+export declare const AddressFields: () => JSX.Element;
+export declare const GridSectionSingleColumn: () => JSX.Element;
+export declare const GridSectionSingleColumnWarn: () => JSX.Element;
+export declare const GridSectionTable: () => JSX.Element;
+export declare const ButtonGrid: () => JSX.Element;

package/dist/src/sections/GridSection.stories.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGrid = exports.GridSectionTable = exports.GridSectionSingleColumnWarn = exports.GridSectionSingleColumn = exports.AddressFields = exports.Address = exports.FourColumnsFields = exports.FourColumnsEdit = exports.TwoColumns = exports.DefaultThreeColumns = void 0;
+var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var MinimalTable_1 = require("../tables/MinimalTable");
+var ViewItem_1 = require("../blocks/ViewItem");
+var GridSection_1 = require("./GridSection");
+var Field_1 = require("../forms/Field");
+var Button_1 = require("../actions/Button");
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var StandardTable_stories_1 = require("../tables/StandardTable.stories");
+exports.default = {
+    title: "Sections/Grid Section",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var DefaultThreeColumns = function () { return (react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", subtitle: "Subsection Title" },
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "First Name", children: "Lisa" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Middle Name", children: "S" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Last Name", children: "Jones" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Date of Birth", children: "01/01/1985" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Email", children: "lisa@gmail.com" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Phone", children: "111-222-3333", helper: "Cell" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Second Phone", children: "111-222-3333", helper: "Work" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Perferred Contact", children: "Phone" })))); };
+exports.DefaultThreeColumns = DefaultThreeColumns;
+var TwoColumns = function () { return (react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", columns: 2 },
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "First Name", children: "Lisa" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Middle Name", children: "S" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Last Name", children: "Jones" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Date of Birth", children: "01/01/1985" })))); };
+exports.TwoColumns = TwoColumns;
+var FourColumnsEdit = function () { return (react_1.default.createElement(GridSection_1.GridSection, { title: "Very Long Section Title That Wraps on Mobile", subtitle: "Subsection Title", columns: 4, tinted: true, inset: true },
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "First Name", children: "Lisa" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Middle Name", children: "S" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Last Name", children: "Jones" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Date of Birth", children: "01/01/1985" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Email", children: "lisa@gmail.com" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Phone", children: "111-222-3333", helper: "Cell" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Second Phone", children: "111-222-3333", helper: "Work" })),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Perferred Contact", children: "Phone" })))); };
+exports.FourColumnsEdit = FourColumnsEdit;
+var FourColumnsFields = function () {
+    var register = (0, react_hook_form_1.useForm)().register;
+    return (react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", columns: 4 },
+        react_1.default.createElement(Field_1.Field, { label: "Alpha", placeholder: "Enter text", name: "label1", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Beta", placeholder: "Enter text", name: "label2", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Gamma", placeholder: "Enter text", name: "label3", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Delta", placeholder: "Enter text", name: "label4", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Epsilon", placeholder: "Enter text", name: "label5", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Zeta", placeholder: "Enter text", name: "label6", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Eta", placeholder: "Enter text", name: "label7", register: register }),
+        react_1.default.createElement(Field_1.Field, { label: "Theta", placeholder: "Enter text", name: "label8", register: register })));
+};
+exports.FourColumnsFields = FourColumnsFields;
+var Address = function () { return (react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", tinted: true, inset: true, grid: false, className: "gap-y-4" },
+    react_1.default.createElement(GridSection_1.GridSection, { subtitle: "Residence Address", columns: 4 },
+        react_1.default.createElement(GridSection_1.GridCell, { span: 3 },
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Street Address", children: "112 Springfield St." })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Apt Unit #", children: "1" })),
+        react_1.default.createElement(GridSection_1.GridCell, { span: 2 },
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "City", children: "Oakland" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "State", children: "CA" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Zip", children: "94577" }))),
+    react_1.default.createElement(GridSection_1.GridSection, { subtitle: "Work Address", columns: 4 },
+        react_1.default.createElement(GridSection_1.GridCell, { span: 3 },
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Street Address", children: "112 Springfield St." })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Apt Unit #", children: "1" })),
+        react_1.default.createElement(GridSection_1.GridCell, { span: 2 },
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "City", children: "Oakland" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "State", children: "CA" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Zip", children: "94577" }))))); };
+exports.Address = Address;
+var AddressFields = function () {
+    var register = (0, react_hook_form_1.useForm)().register;
+    return (react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", grid: false, className: "mt-8" },
+        react_1.default.createElement(GridSection_1.GridSection, { title: "My Group", columns: 6 },
+            react_1.default.createElement(GridSection_1.GridCell, { span: 4 },
+                react_1.default.createElement(Field_1.Field, { label: "Street Address", placeholder: "Enter text", name: "label1", register: register })),
+            react_1.default.createElement(GridSection_1.GridCell, { span: 2 },
+                react_1.default.createElement(Field_1.Field, { label: "Address 2", placeholder: "Enter text", name: "label2", register: register })),
+            react_1.default.createElement(GridSection_1.GridCell, { span: 2 },
+                react_1.default.createElement(Field_1.Field, { label: "City", placeholder: "Enter text", name: "label3", register: register })),
+            react_1.default.createElement(Field_1.Field, { label: "State", placeholder: "Enter text", name: "label4", register: register }),
+            react_1.default.createElement(Field_1.Field, { label: "Zip", placeholder: "Enter text", name: "label5", register: register }))));
+};
+exports.AddressFields = AddressFields;
+var GridSectionSingleColumn = function () { return (react_1.default.createElement(GridSection_1.GridSection, { tinted: true, grid: false, inset: true },
+    react_1.default.createElement(GridSection_1.GridSection, { subtitle: "My Group", columns: 1, className: "md:gap-y-2" },
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "First Name", children: "Lisa" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Middle Name", children: "S" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Last Name", children: "Jones" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Date of Birth", children: "01/01/1985" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Email", children: "lisa@gmail.com" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Phone", children: "111-222-3333", helper: "Cell" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Second Phone", children: "111-222-3333", helper: "Work" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Preferred Contact", children: "Phone" }))))); };
+exports.GridSectionSingleColumn = GridSectionSingleColumn;
+var GridSectionSingleColumnWarn = function () { return (react_1.default.createElement(GridSection_1.GridSection, { grid: false },
+    react_1.default.createElement(ViewItem_1.ViewItem, { label: "Application Number", children: "APP-0001002002" }),
+    react_1.default.createElement(GridSection_1.GridSection, { grid: false, tinted: true },
+        react_1.default.createElement("div", { className: "my-4 p-4" },
+            react_1.default.createElement("fieldset", null,
+                react_1.default.createElement("legend", { className: "field-note mb-4 text-gray-750" }, "Confirm this application is valid:"),
+                react_1.default.createElement("div", { className: "field-group--inline" },
+                    react_1.default.createElement("div", { className: "field " },
+                        react_1.default.createElement("input", { type: "radio", id: "testvalidappkeep", name: "testvalidapp", value: "keep" }),
+                        react_1.default.createElement("label", { className: "font-semibold", htmlFor: "testvalidappkeep" }, "Keep")),
+                    react_1.default.createElement("div", { className: "field " },
+                        react_1.default.createElement("input", { type: "radio", id: "testvalidappremove", name: "testvalidapp", value: "remove" }),
+                        react_1.default.createElement("label", { className: "font-semibold", htmlFor: "testvalidappremove" }, "Remove")))))),
+    react_1.default.createElement(GridSection_1.GridSection, { subtitle: "My Group", columns: 1, inset: true, tinted: true, className: "md:gap-y-4" },
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "First Name", children: "Lisa", flagged: true })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Middle Name", children: "S", flagged: true })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Last Name", children: "Jones", flagged: true })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Date of Birth", children: "01/01/1985", flagged: true })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Email", children: "lisa@gmail.com" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Phone", children: "111-222-3333", helper: "Cell" })),
+        react_1.default.createElement(GridSection_1.GridCell, null,
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Second Phone", children: "111-222-3333", helper: "Work" })),
+        react_1.default.createElement(ViewItem_1.ViewItem, { label: "Preferred Contact", children: "Phone" })))); };
+exports.GridSectionSingleColumnWarn = GridSectionSingleColumnWarn;
+var GridSectionTable = function () { return (react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", grid: false, tinted: true, inset: true },
+    react_1.default.createElement(MinimalTable_1.MinimalTable, { headers: StandardTable_stories_1.mockHeaders, data: StandardTable_stories_1.mockData }))); };
+exports.GridSectionTable = GridSectionTable;
+var ButtonGrid = function () { return (react_1.default.createElement(GridSection_1.GridSection, { columns: 2, tightSpacing: true },
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(Button_1.Button, { fullWidth: true }, "I'm a Button!")),
+    react_1.default.createElement(GridSection_1.GridCell, null,
+        react_1.default.createElement(Button_1.Button, { fullWidth: true }, "Another Button")),
+    react_1.default.createElement(GridSection_1.GridCell, { span: 2 },
+        react_1.default.createElement(Button_1.Button, { styleType: AppearanceTypes_1.AppearanceStyleType.primary, fullWidth: true }, "I'm a Button!")))); };
+exports.ButtonGrid = ButtonGrid;
+//# sourceMappingURL=GridSection.stories.js.map

package/dist/src/sections/GridSection.stories.js.map

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

package/dist/src/sections/InfoCardGrid.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import "./InfoCardGrid.scss";
+export interface InfoCardGridProps {
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+}
+declare const InfoCardGrid: (props: InfoCardGridProps) => JSX.Element;
+export { InfoCardGrid as default, InfoCardGrid };

package/dist/src/sections/InfoCardGrid.js

@@ -0,0 +1,37 @@
+"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.InfoCardGrid = exports.default = void 0;
+var React = __importStar(require("react"));
+var Heading_1 = require("../text/Heading");
+require("./InfoCardGrid.scss");
+var InfoCardGrid = function (props) { return (React.createElement("section", { className: "info-cards" },
+    React.createElement("header", { className: "info-cards__header" },
+        React.createElement(Heading_1.Heading, { styleType: "underlineWeighted", priority: 2, className: "text-tiny" }, props.title),
+        props.subtitle && React.createElement("p", { className: "info-cards__subtitle" }, props.subtitle)),
+    React.createElement("div", { className: "info-cards__grid" }, props.children))); };
+exports.default = InfoCardGrid;
+exports.InfoCardGrid = InfoCardGrid;
+//# sourceMappingURL=InfoCardGrid.js.map

package/dist/src/sections/InfoCardGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCardGrid.js","sourceRoot":"","sources":["../../../src/sections/InfoCardGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,2CAAyC;AACzC,+BAA4B;AAQ5B,IAAM,YAAY,GAAG,UAAC,KAAwB,IAAK,OAAA,CACjD,iCAAS,SAAS,EAAC,YAAY;IAC7B,gCAAQ,SAAS,EAAC,oBAAoB;QACpC,oBAAC,iBAAO,IAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,WAAW,IACzE,KAAK,CAAC,KAAK,CACJ;QACT,KAAK,CAAC,QAAQ,IAAI,2BAAG,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,QAAQ,CAAK,CACpE;IACT,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,QAAQ,CAAO,CAChD,CACX,EAVkD,CAUlD,CAAA;AAEwB,+BAAO;AAAE,oCAAY"}

package/dist/src/sections/InfoCardGrid.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const ThreeCards: () => JSX.Element;

package/dist/src/sections/InfoCardGrid.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreeCards = void 0;
+var react_1 = __importDefault(require("react"));
+var InfoCard_1 = require("../blocks/InfoCard");
+var InfoCardGrid_1 = require("./InfoCardGrid");
+var ExpandableText_1 = require("../actions/ExpandableText");
+exports.default = {
+    title: "Sections/Info Card Grid",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var ThreeCards = function () { return (react_1.default.createElement(InfoCardGrid_1.InfoCardGrid, { title: "Rentals", subtitle: "Other rental housing funded by the City, as well as lists developed each month by community nonprofit agencies." },
+    react_1.default.createElement(InfoCard_1.InfoCard, { title: "My Card", externalHref: "http://google.com", className: "is-normal-primary-lighter" }, "\nParagraph content\n\n----\n\nMore content\n      "),
+    react_1.default.createElement(InfoCard_1.InfoCard, { title: "My Card", externalHref: "http://google.com", className: "is-normal-primary-lighter" }, "\n#### Header 4\n\n* A list\n* of items\n      "),
+    react_1.default.createElement(InfoCard_1.InfoCard, { title: "My Card", externalHref: "http://google.com", className: "is-normal-primary-lighter" },
+        react_1.default.createElement(ExpandableText_1.ExpandableText, { buttonClassName: "ml-4", strings: { readMore: "More", readLess: "Less" } }, "\nText within _another_ component\u2026\n      ")))); };
+exports.ThreeCards = ThreeCards;
+//# sourceMappingURL=InfoCardGrid.stories.js.map

package/dist/src/sections/InfoCardGrid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCardGrid.stories.js","sourceRoot":"","sources":["../../../src/sections/InfoCardGrid.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,+CAA6C;AAC7C,+CAA6C;AAC7C,4DAA0D;AAE1D,kBAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAEM,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,8BAAC,2BAAY,IACX,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,iHAAiH;IAE1H,8BAAC,mBAAQ,IACP,KAAK,EAAC,SAAS,EACf,YAAY,EAAC,mBAAmB,EAChC,SAAS,EAAC,2BAA2B,IAEpC,qDAMA,CACQ;IACX,8BAAC,mBAAQ,IACP,KAAK,EAAC,SAAS,EACf,YAAY,EAAC,mBAAmB,EAChC,SAAS,EAAC,2BAA2B,IAEpC,iDAKA,CACQ;IAEX,8BAAC,mBAAQ,IACP,KAAK,EAAC,SAAS,EACf,YAAY,EAAC,mBAAmB,EAChC,SAAS,EAAC,2BAA2B;QAErC,8BAAC,+BAAc,IAAC,eAAe,EAAC,MAAM,EAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IACnF,iDAEF,CACgB,CACR,CACE,CAChB,EA3C+B,CA2C/B,CAAA;AA3CY,QAAA,UAAU,cA2CtB"}

package/dist/src/sections/ListSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import "./ListSection.scss";
+export interface ListSectionProps {
+    title: string;
+    subtitle: string | React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const ListSection: (props: ListSectionProps) => JSX.Element;
+export { ListSection as default, ListSection };

package/dist/src/sections/ListSection.js

@@ -0,0 +1,37 @@
+"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.ListSection = exports.default = void 0;
+var React = __importStar(require("react"));
+require("./ListSection.scss");
+var ListSection = function (props) { return (React.createElement("li", { className: "list-section custom-counter__item" },
+    React.createElement("header", { className: "list-section__header custom-counter__header" },
+        React.createElement("hgroup", null,
+            React.createElement("h3", { className: "custom-counter__title" }, props.title),
+            React.createElement("span", { className: "custom-counter__subtitle" }, props.subtitle))),
+    props.children)); };
+exports.default = ListSection;
+exports.ListSection = ListSection;
+//# sourceMappingURL=ListSection.js.map

package/dist/src/sections/ListSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSection.js","sourceRoot":"","sources":["../../../src/sections/ListSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,8BAA2B;AAQ3B,IAAM,WAAW,GAAG,UAAC,KAAuB,IAAK,OAAA,CAC/C,4BAAI,SAAS,EAAC,mCAAmC;IAC/C,gCAAQ,SAAS,EAAC,6CAA6C;QAC7D;YACE,4BAAI,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAC,KAAK,CAAM;YACxD,8BAAM,SAAS,EAAC,0BAA0B,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAC3D,CACF;IAER,KAAK,CAAC,QAAQ,CACZ,CACN,EAXgD,CAWhD,CAAA;AAEuB,8BAAO;AAAE,kCAAW"}

package/dist/src/sections/MarkdownSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import "./MarkdownSection.scss";
+export interface MarkdownSectionProps {
+    fullwidth?: boolean;
+    padding?: boolean;
+    children: React.ReactNode;
+}
+export declare const MarkdownSection: ({ fullwidth, padding, children }: MarkdownSectionProps) => JSX.Element;
+export default MarkdownSection;

package/dist/src/sections/MarkdownSection.js

@@ -0,0 +1,41 @@
+"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.MarkdownSection = void 0;
+var React = __importStar(require("react"));
+require("./MarkdownSection.scss");
+var MarkdownSection = function (_a) {
+    var fullwidth = _a.fullwidth, _b = _a.padding, padding = _b === void 0 ? true : _b, children = _a.children;
+    var contentWidth = fullwidth ? "markdown" : "markdown max-w-2xl";
+    var sectionClassNames = ["markdown-section"];
+    if (padding)
+        sectionClassNames.push("markdown-section--with-padding");
+    return (React.createElement("div", { className: sectionClassNames.join(" ") },
+        React.createElement("div", { className: "markdown-section__inner" },
+            React.createElement("article", { className: contentWidth }, children))));
+};
+exports.MarkdownSection = MarkdownSection;
+exports.default = exports.MarkdownSection;
+//# sourceMappingURL=MarkdownSection.js.map

package/dist/src/sections/MarkdownSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownSection.js","sourceRoot":"","sources":["../../../src/sections/MarkdownSection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,kCAA+B;AAQxB,IAAM,eAAe,GAAG,UAAC,EAA6D;QAA3D,SAAS,eAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EAAE,QAAQ,cAAA;IACnE,IAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAA;IAClE,IAAM,iBAAiB,GAAG,CAAC,kBAAkB,CAAC,CAAA;IAE9C,IAAI,OAAO;QAAE,iBAAiB,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAA;IAErE,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,iCAAS,SAAS,EAAE,YAAY,IAAG,QAAQ,CAAW,CAClD,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,eAAe,mBAa3B;AAED,kBAAe,uBAAe,CAAA"}