@bloom-housing/ui-components 7.0.8-alpha.0 → 7.2.0

package/dist/src/forms/FieldGroup.js

@@ -0,0 +1,121 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldGroup = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+var ExpandableContent_1 = require("../actions/ExpandableContent");
+var ErrorMessage_1 = require("../notifications/ErrorMessage");
+var Field_1 = require("./Field");
+var translator_1 = require("../helpers/translator");
+var FieldGroup = function (_a) {
+    var name = _a.name, groupLabel = _a.groupLabel, fields = _a.fields, _b = _a.type, type = _b === void 0 ? "checkbox" : _b, _c = _a.validation, validation = _c === void 0 ? {} : _c, error = _a.error, errorMessage = _a.errorMessage, groupNote = _a.groupNote, register = _a.register, fieldGroupClassName = _a.fieldGroupClassName, fieldClassName = _a.fieldClassName, fieldLabelClassName = _a.fieldLabelClassName, groupSubNote = _a.groupSubNote, dataTestId = _a.dataTestId, strings = _a.strings;
+    // Always default align two-option radio groups side by side
+    if ((fields === null || fields === void 0 ? void 0 : fields.length) === 2) {
+        fieldGroupClassName = "".concat(fieldGroupClassName, " flex");
+        fieldClassName = "".concat(fieldClassName, " flex-initial mr-4");
+    }
+    var _d = (0, react_1.useState)([]), checkedInputs = _d[0], setCheckedInputs = _d[1];
+    var subfieldsExist = function () {
+        return fields === null || fields === void 0 ? void 0 : fields.filter(function (field) { return field.subFields; }).length;
+    };
+    var getIndividualInput = function (item) {
+        var _a, _b, _c;
+        return (react_1.default.createElement("div", { key: item.value },
+            react_1.default.createElement("input", __assign({ "aria-describedby": "".concat(name, "-error"), "aria-invalid": !!error || false, type: type, id: item.id, defaultValue: item.value || item.id, name: subfieldsExist() || item.uniqueName ? "".concat(name, "-").concat(item.value) : name, onClick: function (e) {
+                    // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
+                    if (e.currentTarget.checked) {
+                        setCheckedInputs(__spreadArray(__spreadArray([], checkedInputs, true), [item.label], false));
+                    }
+                    else {
+                        setCheckedInputs(checkedInputs.filter(function (subset) { return item.label !== subset; }));
+                    }
+                }, defaultChecked: item.defaultChecked || false, disabled: item.disabled, ref: register(validation) }, item.inputProps, { "data-test-id": (_a = item.dataTestId) !== null && _a !== void 0 ? _a : dataTestId })),
+            react_1.default.createElement("label", { htmlFor: item.id, className: "font-semibold ".concat(fieldLabelClassName, " ").concat(item.disabled && "text-gray-600 cursor-not-allowed") }, item.label),
+            item.note && react_1.default.createElement("span", { className: "field-note font-normal" }, item.note),
+            item.description && (react_1.default.createElement("div", { className: "ml-8 -mt-1 mb-5" },
+                react_1.default.createElement(ExpandableContent_1.ExpandableContent, { strings: {
+                        readMore: (_b = strings === null || strings === void 0 ? void 0 : strings.readMore) !== null && _b !== void 0 ? _b : (0, translator_1.t)("t.readMore"),
+                        readLess: (_c = strings === null || strings === void 0 ? void 0 : strings.readLess) !== null && _c !== void 0 ? _c : (0, translator_1.t)("t.readLess"),
+                    } },
+                    react_1.default.createElement("p", { className: "field-note mb-2 -mt-2" }, item.description))))));
+    };
+    var checkSelected = (0, react_1.useCallback)(function (formFields, checkedValues) {
+        formFields === null || formFields === void 0 ? void 0 : formFields.forEach(function (field) {
+            if (field.defaultChecked) {
+                checkedValues.push(field.label);
+            }
+            if (field.subFields) {
+                checkSelected(field.subFields, checkedValues);
+            }
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var initialValues = [];
+        checkSelected(fields, initialValues);
+        setCheckedInputs(__spreadArray([], initialValues, true));
+    }, [checkSelected, setCheckedInputs, fields]);
+    var getInputSet = function (item) {
+        var _a;
+        return (react_1.default.createElement("div", { key: item.value },
+            getIndividualInput(item),
+            item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (react_1.default.createElement(Field_1.Field, { id: item.id, key: "".concat(item.value, "-additionalText"), name: "".concat(name, "-").concat(item.value), register: register, defaultValue: item.defaultText, placeholder: (_a = strings === null || strings === void 0 ? void 0 : strings.description) !== null && _a !== void 0 ? _a : (0, translator_1.t)("t.description"), className: "mb-4", disabled: item.disabled, dataTestId: item.dataTestId }))));
+    };
+    return (react_1.default.createElement("div", null,
+        groupLabel && react_1.default.createElement("label", { className: "text__caps-spaced" }, groupLabel),
+        groupNote && react_1.default.createElement("p", { className: "field-note mb-4" }, groupNote),
+        react_1.default.createElement("div", { className: "field ".concat(error && "error", " ").concat(fieldGroupClassName || "", " mb-0") }, fields === null || fields === void 0 ? void 0 : fields.map(function (item) {
+            var _a;
+            return (react_1.default.createElement("div", { className: "field ".concat(fieldClassName || "", " mb-1"), key: item.id },
+                getInputSet(item),
+                item.subFields && checkedInputs.indexOf(item.label) >= 0 && (react_1.default.createElement("div", { className: "ml-8", key: "".concat(item.value, "-subfields") }, (_a = item.subFields) === null || _a === void 0 ? void 0 : _a.map(function (subItem) {
+                    return getInputSet(subItem);
+                })))));
+        })),
+        groupSubNote && react_1.default.createElement("p", { className: "field-sub-note" }, groupSubNote),
+        error && errorMessage && (react_1.default.createElement(ErrorMessage_1.ErrorMessage, { id: "".concat(name, "-error"), error: error }, errorMessage))));
+};
+exports.default = FieldGroup;
+exports.FieldGroup = FieldGroup;
+//# sourceMappingURL=FieldGroup.js.map

package/dist/src/forms/FieldGroup.js.map

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

package/dist/src/forms/FieldGroup.stories.d.ts

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

package/dist/src/forms/FieldGroup.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldGroupError = exports.FieldGroupDescriptions = exports.FieldGroupDefault = void 0;
+var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var FieldGroup_1 = require("./FieldGroup");
+exports.default = {
+    title: "Forms/FieldGroup",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var FieldGroupDefault = function () {
+    var register = (0, react_hook_form_1.useForm)({ mode: "onChange" }).register;
+    return (react_1.default.createElement(FieldGroup_1.FieldGroup, { register: register, name: "Test Input", type: "checkbox", fields: [
+            { id: "1234", label: "Input 1" },
+            { id: "5678", label: "Input 2" },
+        ], fieldGroupClassName: "field-group-classname", fieldClassName: "field-classname", fieldLabelClassName: "text-primary", groupNote: "Group Note", groupLabel: "Group Label" }));
+};
+exports.FieldGroupDefault = FieldGroupDefault;
+var FieldGroupDescriptions = function () {
+    var register = (0, react_hook_form_1.useForm)({ mode: "onChange" }).register;
+    return (react_1.default.createElement(FieldGroup_1.FieldGroup, { register: register, name: "Test Input", type: "radio", fields: [
+            {
+                id: "1234",
+                label: "Input 1",
+                description: (react_1.default.createElement("span", null,
+                    "This is an ",
+                    react_1.default.createElement("em", null, "HTML"),
+                    " description")),
+            },
+            { id: "5678", label: "Input 2", description: "This is a text description" },
+            { id: "9765", label: "Input 3" },
+            { id: "4321", label: "Input 4" },
+        ], fieldGroupClassName: "grid grid-cols-1", fieldClassName: "ml-0", groupNote: "Group Note", groupLabel: "Group Label" }));
+};
+exports.FieldGroupDescriptions = FieldGroupDescriptions;
+var FieldGroupError = function () {
+    var register = (0, react_hook_form_1.useForm)({ mode: "onChange" }).register;
+    return (react_1.default.createElement(FieldGroup_1.FieldGroup, { error: true, register: register, name: "testInput", type: "checkbox", fields: [
+            { id: "1234", label: "Input 1" },
+            { id: "5678", label: "Input 2" },
+        ], fieldGroupClassName: "field-group-classname", fieldClassName: "field-classname", fieldLabelClassName: "text-primary", groupNote: "Group Note", groupLabel: "Group Label" }));
+};
+exports.FieldGroupError = FieldGroupError;
+//# sourceMappingURL=FieldGroup.stories.js.map

package/dist/src/forms/FieldGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,mDAAyC;AACzC,2CAAyC;AAEzC,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,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,iBAAiB,GAAG;IACvB,IAAA,QAAQ,GAAK,IAAA,yBAAO,EAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,8BAAC,uBAAU,IACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE;YACN,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;YAChC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;SACjC,EACD,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,iBAAiB,EACjC,mBAAmB,EAAE,cAAc,EACnC,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,GACzB,CACH,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,iBAAiB,qBAkB7B;AAEM,IAAM,sBAAsB,GAAG;IAC5B,IAAA,QAAQ,GAAK,IAAA,yBAAO,EAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,8BAAC,uBAAU,IACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE;YACN;gBACE,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,CACX;;oBACa,iDAAa;mCACnB,CACR;aACF;YACD,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,4BAA4B,EAAE;YAC3E,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;YAChC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;SACjC,EACD,mBAAmB,EAAC,kBAAkB,EACtC,cAAc,EAAC,MAAM,EACrB,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,GACzB,CACH,CAAA;AACH,CAAC,CAAA;AA3BY,QAAA,sBAAsB,0BA2BlC;AAEM,IAAM,eAAe,GAAG;IACrB,IAAA,QAAQ,GAAK,IAAA,yBAAO,EAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,8BAAC,uBAAU,IACT,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE;YACN,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;YAChC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE;SACjC,EACD,mBAAmB,EAAE,uBAAuB,EAC5C,cAAc,EAAE,iBAAiB,EACjC,mBAAmB,EAAE,cAAc,EACnC,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,aAAa,GACzB,CACH,CAAA;AACH,CAAC,CAAA;AAnBY,QAAA,eAAe,mBAmB3B"}

package/dist/src/forms/Form.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface FormProps {
+    children: React.ReactNode;
+    id?: string;
+    className?: string;
+    onSubmit?: () => unknown;
+}
+declare const Form: ({ id, children, className, onSubmit }: FormProps) => JSX.Element;
+export { Form as default, Form };

package/dist/src/forms/Form.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var Form = function (_a) {
+    var id = _a.id, children = _a.children, className = _a.className, onSubmit = _a.onSubmit;
+    function onKeyPress(e) {
+        return e.key === "Enter" && !(e.target instanceof HTMLButtonElement) && e.preventDefault();
+    }
+    return (
+    // eslint-disable-next-line  jsx-a11y/no-noninteractive-element-interactions
+    react_1.default.createElement("form", { id: id, className: className, onSubmit: onSubmit, onKeyPress: onKeyPress, noValidate: true }, children));
+};
+exports.default = Form;
+exports.Form = Form;
+//# sourceMappingURL=Form.js.map

package/dist/src/forms/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/forms/Form.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AASzB,IAAM,IAAI,GAAG,UAAC,EAAgD;QAA9C,EAAE,QAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IAC/C,SAAS,UAAU,CAAC,CAAmC;QACrD,OAAO,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,iBAAiB,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,CAAA;IAC5F,CAAC;IAED,OAAO;IACL,4EAA4E;IAC5E,wCAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,UACvF,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CAAA;AAEgB,uBAAO;AAAE,oBAAI"}

package/dist/src/forms/HouseholdMemberForm.d.ts

@@ -0,0 +1,13 @@
+export interface HouseholdMemberFormProps {
+    editMember?: (memberId: number | undefined) => void;
+    editMode?: boolean;
+    memberFirstName: string;
+    memberId?: number;
+    memberLastName: string;
+    subtitle: string;
+    strings?: {
+        edit?: string;
+    };
+}
+declare const HouseholdMemberForm: (props: HouseholdMemberFormProps) => JSX.Element;
+export { HouseholdMemberForm as default, HouseholdMemberForm };

package/dist/src/forms/HouseholdMemberForm.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HouseholdMemberForm = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var translator_1 = require("../helpers/translator");
+var Icon_1 = require("../icons/Icon");
+var ViewItem_1 = require("../blocks/ViewItem");
+var HouseholdMemberForm = function (props) {
+    var _a, _b;
+    var editMode = props.editMode !== false && props.editMember; // undefined should default to true
+    return (react_1.default.createElement(ViewItem_1.ViewItem, { helper: props.subtitle, className: "pb-4 border-b text-left" },
+        props.memberFirstName,
+        " ",
+        props.memberLastName,
+        editMode ? (react_1.default.createElement("button", { id: "edit-member-".concat(props.memberFirstName, "-").concat(props.memberLastName), className: "edit-link", onClick: function () { return props.editMember && props.editMember(props.memberId); }, type: "button", "data-test-id": "app-household-member-edit-button" }, (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.edit) !== null && _b !== void 0 ? _b : (0, translator_1.t)("t.edit"))) : (react_1.default.createElement(Icon_1.Icon, { className: "ml-2 absolute top-0 right-0", size: "medium", symbol: "lock", fill: Icon_1.IconFillColors.primary }))));
+};
+exports.default = HouseholdMemberForm;
+exports.HouseholdMemberForm = HouseholdMemberForm;
+//# sourceMappingURL=HouseholdMemberForm.js.map

package/dist/src/forms/HouseholdMemberForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HouseholdMemberForm.js","sourceRoot":"","sources":["../../../src/forms/HouseholdMemberForm.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,oDAAyC;AACzC,sCAAoD;AACpD,+CAA6C;AAc7C,IAAM,mBAAmB,GAAG,UAAC,KAA+B;;IAC1D,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,KAAK,KAAK,IAAI,KAAK,CAAC,UAAU,CAAA,CAAC,mCAAmC;IAEjG,OAAO,CACL,8BAAC,mBAAQ,IAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,yBAAyB;QAClE,KAAK,CAAC,eAAe;;QAAG,KAAK,CAAC,cAAc;QAC5C,QAAQ,CAAC,CAAC,CAAC,CACV,0CACE,EAAE,EAAE,sBAAe,KAAK,CAAC,eAAe,cAAI,KAAK,CAAC,cAAc,CAAE,EAClE,SAAS,EAAC,WAAW,EACrB,OAAO,EAAE,cAAM,OAAA,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EAApD,CAAoD,EACnE,IAAI,EAAE,QAAQ,kBACA,kCAAkC,IAE/C,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,IAAI,mCAAI,IAAA,cAAC,EAAC,QAAQ,CAAC,CAC5B,CACV,CAAC,CAAC,CAAC,CACF,8BAAC,WAAI,IACH,SAAS,EAAC,6BAA6B,EACvC,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,qBAAc,CAAC,OAAO,GAC5B,CACH,CACQ,CACZ,CAAA;AACH,CAAC,CAAA;AAE+B,sCAAO;AAAE,kDAAmB"}

package/dist/src/forms/HouseholdMemberForm.stories.d.ts

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

package/dist/src/forms/HouseholdMemberForm.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notEditable = exports.editable = void 0;
+var React = __importStar(require("react"));
+var HouseholdMemberForm_1 = __importDefault(require("./HouseholdMemberForm"));
+exports.default = {
+    title: "Forms/HouseholdMemberForm",
+    decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var editable = function () { return (React.createElement(HouseholdMemberForm_1.default, { memberFirstName: "Firstname", memberLastName: "Lastname", key: "FirstnameLastname", subtitle: "Household Member", editMember: function () { } })); };
+exports.editable = editable;
+var notEditable = function () { return (React.createElement(HouseholdMemberForm_1.default, { memberFirstName: "Firstname", memberLastName: "Lastname", key: "FirstnameLastname", subtitle: "Household Member", editMode: false })); };
+exports.notEditable = notEditable;
+//# sourceMappingURL=HouseholdMemberForm.stories.js.map

package/dist/src/forms/HouseholdMemberForm.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HouseholdMemberForm.stories.js","sourceRoot":"","sources":["../../../src/forms/HouseholdMemberForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,8EAAuD;AAEvD,kBAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAEM,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,6BAAmB,IAClB,eAAe,EAAE,WAAW,EAC5B,cAAc,EAAE,UAAU,EAC1B,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,kBAAkB,EAC5B,UAAU,EAAE,cAAO,CAAC,GACpB,CACH,EAR6B,CAQ7B,CAAA;AARY,QAAA,QAAQ,YAQpB;AAEM,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,6BAAmB,IAClB,eAAe,EAAE,WAAW,EAC5B,cAAc,EAAE,UAAU,EAC1B,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,KAAK,GACf,CACH,EARgC,CAQhC,CAAA;AARY,QAAA,WAAW,eAQvB"}

package/dist/src/forms/HouseholdSizeField.d.ts

@@ -0,0 +1,20 @@
+import { UseFormMethods, FieldError } from "react-hook-form";
+export interface HouseholdSizeFieldProps {
+    assistanceUrl: string;
+    clearErrors: () => void;
+    error: FieldError | null;
+    householdSize: number;
+    householdSizeMax: number;
+    householdSizeMin: number;
+    register: UseFormMethods["register"];
+    validate: boolean;
+    strings?: {
+        dontQualifyDescription?: string;
+        dontQualifyHeader?: string;
+        getAssistance?: string;
+        householdTooBigError?: string;
+        householdTooSmallError?: string;
+    };
+}
+declare const HouseholdSizeField: (props: HouseholdSizeFieldProps) => JSX.Element;
+export { HouseholdSizeField as default, HouseholdSizeField };

package/dist/src/forms/HouseholdSizeField.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HouseholdSizeField = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var translator_1 = require("../helpers/translator");
+var ErrorMessage_1 = require("../notifications/ErrorMessage");
+var AlertBox_1 = require("../notifications/AlertBox");
+var AlertNotice_1 = require("../notifications/AlertNotice");
+var HouseholdSizeField = function (props) {
+    var _a, _b, _c, _d, _e;
+    var householdSize = props.householdSize, householdSizeMax = props.householdSizeMax, householdSizeMin = props.householdSizeMin, validate = props.validate, register = props.register, clearErrors = props.clearErrors, error = props.error, assistanceUrl = props.assistanceUrl, strings = props.strings;
+    if (!householdSizeMax || !validate) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: "hidden", "aria-hidden": "true" },
+            react_1.default.createElement("input", { className: "invisible", type: "number", id: "householdSize", name: "householdSize", defaultValue: householdSize, ref: householdSizeMax
+                    ? register({
+                        min: {
+                            value: householdSizeMin || 0,
+                            message: (_a = strings === null || strings === void 0 ? void 0 : strings.householdTooSmallError) !== null && _a !== void 0 ? _a : (0, translator_1.t)("errors.householdTooSmall"),
+                        },
+                        max: {
+                            value: householdSizeMax,
+                            message: (_b = strings === null || strings === void 0 ? void 0 : strings.householdTooBigError) !== null && _b !== void 0 ? _b : (0, translator_1.t)("errors.householdTooBig"),
+                        },
+                    })
+                    : register })),
+        react_1.default.createElement(ErrorMessage_1.ErrorMessage, { id: "householdsize-error", error: !!error, className: "block mt-0 line-normal text-alert" },
+            react_1.default.createElement(AlertBox_1.AlertBox, { type: "alert", inverted: true, onClose: function () { return clearErrors(); } }, (_c = strings === null || strings === void 0 ? void 0 : strings.dontQualifyHeader) !== null && _c !== void 0 ? _c : (0, translator_1.t)("application.household.dontQualifyHeader")),
+            react_1.default.createElement(AlertNotice_1.AlertNotice, { title: error === null || error === void 0 ? void 0 : error.message, type: "alert", inverted: true },
+                react_1.default.createElement("p", { className: "mb-2" }, (_d = strings === null || strings === void 0 ? void 0 : strings.dontQualifyDescription) !== null && _d !== void 0 ? _d : (0, translator_1.t)("application.household.dontQualifyInfo")),
+                react_1.default.createElement("p", null,
+                    react_1.default.createElement("a", { href: assistanceUrl }, (_e = strings === null || strings === void 0 ? void 0 : strings.getAssistance) !== null && _e !== void 0 ? _e : (0, translator_1.t)("pageTitle.getAssistance")))))));
+};
+exports.default = HouseholdSizeField;
+exports.HouseholdSizeField = HouseholdSizeField;
+//# sourceMappingURL=HouseholdSizeField.js.map

package/dist/src/forms/HouseholdSizeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HouseholdSizeField.js","sourceRoot":"","sources":["../../../src/forms/HouseholdSizeField.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,oDAAyC;AACzC,8DAA4D;AAC5D,sDAAoD;AACpD,4DAA0D;AAqB1D,IAAM,kBAAkB,GAAG,UAAC,KAA8B;;IAEtD,IAAA,aAAa,GASX,KAAK,cATM,EACb,gBAAgB,GAQd,KAAK,iBARS,EAChB,gBAAgB,GAOd,KAAK,iBAPS,EAChB,QAAQ,GAMN,KAAK,SANC,EACR,QAAQ,GAKN,KAAK,SALC,EACR,WAAW,GAIT,KAAK,YAJI,EACX,KAAK,GAGH,KAAK,MAHF,EACL,aAAa,GAEX,KAAK,cAFM,EACb,OAAO,GACL,KAAK,QADA,CACA;IACT,IAAI,CAAC,gBAAgB,IAAI,CAAC,QAAQ,EAAE;QAClC,OAAO,6DAAK,CAAA;KACb;IACD,OAAO,CACL;QACE,wCAAM,SAAS,EAAC,QAAQ,iBAAa,MAAM;YACzC,yCACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,eAAe,EAClB,IAAI,EAAC,eAAe,EACpB,YAAY,EAAE,aAAa,EAC3B,GAAG,EACD,gBAAgB;oBACd,CAAC,CAAC,QAAQ,CAAC;wBACP,GAAG,EAAE;4BACH,KAAK,EAAE,gBAAgB,IAAI,CAAC;4BAC5B,OAAO,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,mCAAI,IAAA,cAAC,EAAC,0BAA0B,CAAC;yBAC1E;wBACD,GAAG,EAAE;4BACH,KAAK,EAAE,gBAAgB;4BACvB,OAAO,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAA,cAAC,EAAC,wBAAwB,CAAC;yBACtE;qBACF,CAAC;oBACJ,CAAC,CAAC,QAAQ,GAEd,CACG;QACP,8BAAC,2BAAY,IACX,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,SAAS,EAAC,mCAAmC;YAE7C,8BAAC,mBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,QAAC,OAAO,EAAE,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,IACzD,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,mCAAI,IAAA,cAAC,EAAC,yCAAyC,CAAC,CAClE;YACX,8BAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,QAAQ;gBACvD,qCAAG,SAAS,EAAC,MAAM,IAChB,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,sBAAsB,mCAAI,IAAA,cAAC,EAAC,uCAAuC,CAAC,CAC5E;gBACJ;oBACE,qCAAG,IAAI,EAAE,aAAa,IAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,mCAAI,IAAA,cAAC,EAAC,yBAAyB,CAAC,CAAK,CAClF,CACQ,CACD,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AAE8B,qCAAO;AAAE,gDAAkB"}

package/dist/src/forms/HouseholdSizeField.stories.d.ts

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

package/dist/src/forms/HouseholdSizeField.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorHouseholdSizeField = void 0;
+var React = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var HouseholdSizeField_1 = __importDefault(require("./HouseholdSizeField"));
+exports.default = {
+    title: "Forms/HouseholdSizeField",
+    decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var errorHouseholdSizeField = function () {
+    var register = (0, react_hook_form_1.useForm)({ mode: "onChange" }).register;
+    return (React.createElement(HouseholdSizeField_1.default, { assistanceUrl: "", clearErrors: function () {
+            alert("clearErrors called");
+        }, error: { message: "Uh oh!", type: "validate" }, householdSize: 1, householdSizeMax: 3, householdSizeMin: 2, register: register, validate: true }));
+};
+exports.errorHouseholdSizeField = errorHouseholdSizeField;
+//# sourceMappingURL=HouseholdSizeField.stories.js.map

package/dist/src/forms/HouseholdSizeField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HouseholdSizeField.stories.js","sourceRoot":"","sources":["../../../src/forms/HouseholdSizeField.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,mDAAyC;AACzC,4EAAqD;AAErD,kBAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAEM,IAAM,uBAAuB,GAAG;IAC7B,IAAA,QAAQ,GAAK,IAAA,yBAAO,EAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,4BAAkB,IACjB,aAAa,EAAE,EAAE,EACjB,WAAW,EAAE;YACX,KAAK,CAAC,oBAAoB,CAAC,CAAA;QAC7B,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,EAC9C,aAAa,EAAE,CAAC,EAChB,gBAAgB,EAAE,CAAC,EACnB,gBAAgB,EAAE,CAAC,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,GACd,CACH,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,uBAAuB,2BAgBnC"}

package/dist/src/forms/MultiSelectField.d.ts

@@ -0,0 +1,21 @@
+import { UseFormMethods, RegisterOptions } from "react-hook-form";
+import "./MultiSelectField.scss";
+export interface MultiSelectFieldItem {
+    value: string;
+    label: string;
+}
+export declare type MultiSelectDataSourceParams<T> = (query: string, render: (toRender: MultiSelectFieldItem[]) => void, isFirstCall: boolean) => T;
+export interface MultiSelectFieldProps {
+    name: string;
+    dataSource: string | string[] | MultiSelectFieldItem[] | MultiSelectDataSourceParams<MultiSelectFieldItem[]> | MultiSelectDataSourceParams<Promise<MultiSelectFieldItem[]>>;
+    register: UseFormMethods["register"];
+    getValues: UseFormMethods["getValues"];
+    setValue: UseFormMethods["setValue"];
+    placeholder?: string;
+    validation?: RegisterOptions;
+    label?: string;
+    id?: string;
+    dataTestId?: string;
+}
+declare const MultiSelectField: (props: MultiSelectFieldProps) => JSX.Element;
+export { MultiSelectField as default, MultiSelectField };

package/dist/src/forms/MultiSelectField.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectField = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+require("./MultiSelectField.scss");
+var Icon_1 = require("../icons/Icon");
+var MultiSelectField = function (props) {
+    var autocompleteRef = (0, react_1.useRef)(null);
+    var name = props.name, register = props.register, setValue = props.setValue;
+    register({ name: name }, props.validation);
+    (0, react_1.useEffect)(function () {
+        // We need to dynamically import the aria-autocomplete control only on the
+        // client-side, because of its use of `window` and other browser-only
+        // capabilities (and it doesn't really make sense to SSR the control anyway)
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var AriaAutocomplete;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!autocompleteRef.current) return [3 /*break*/, 2];
+                        return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("aria-autocomplete")); })];
+                    case 1:
+                        AriaAutocomplete = (_a.sent()).default;
+                        autocompleteRef.current.value = props.getValues(name);
+                        AriaAutocomplete(autocompleteRef.current, {
+                            source: props.dataSource,
+                            delay: 300,
+                            inputClassName: "input",
+                            multiple: true,
+                            placeholder: props.placeholder,
+                            deleteOnBackspace: true,
+                            showAllControl: true,
+                            cssNameSpace: "multi-select-field",
+                            onChange: function (selected) {
+                                setValue(name, selected.map(function (item) { return item.value; }));
+                            },
+                        });
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [autocompleteRef, name, setValue, props]);
+    var label = (0, react_1.useMemo)(function () {
+        var labelClasses = ["label"];
+        return (react_1.default.createElement("label", { className: labelClasses.join(" "), htmlFor: props.id }, props.label));
+    }, [props.id, props.label]);
+    return (react_1.default.createElement("div", { className: "field multi-select-field" },
+        props.label && label,
+        react_1.default.createElement("div", { className: "control", "data-test-id": props.dataTestId },
+            react_1.default.createElement(Icon_1.Icon, { symbol: "search", size: "medium" }),
+            react_1.default.createElement("input", { id: props.id, ref: autocompleteRef, className: "input" }))));
+};
+exports.default = MultiSelectField;
+exports.MultiSelectField = MultiSelectField;
+//# sourceMappingURL=MultiSelectField.js.map

package/dist/src/forms/MultiSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../../src/forms/MultiSelectField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyD;AAEzD,mCAAgC;AAChC,sCAAoC;AA+BpC,IAAM,gBAAgB,GAAG,UAAC,KAA4B;IACpD,IAAM,eAAe,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAA;IAE9C,IAAA,IAAI,GAAyB,KAAK,KAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;IAC1C,QAAQ,CAAC,EAAE,IAAI,MAAA,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IAEpC,IAAA,iBAAS,EAAC;QACR,0EAA0E;QAC1E,qEAAqE;QACrE,4EAA4E;QAE5E,mEAAmE;QACnE,CAAC;QAAA,CAAC;;;;;6BACI,eAAe,CAAC,OAAO,EAAvB,wBAAuB;wBACC,sFAAa,mBAAmB,QAAC;;wBAArD,gBAAgB,GAAG,CAAC,SAAiC,CAAC,CAAC,OAAO;wBACpE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;wBACrD,gBAAgB,CAAC,eAAe,CAAC,OAAO,EAAE;4BACxC,MAAM,EAAE,KAAK,CAAC,UAAU;4BACxB,KAAK,EAAE,GAAG;4BACV,cAAc,EAAE,OAAO;4BACvB,QAAQ,EAAE,IAAI;4BACd,WAAW,EAAE,KAAK,CAAC,WAAW;4BAC9B,iBAAiB,EAAE,IAAI;4BACvB,cAAc,EAAE,IAAI;4BACpB,YAAY,EAAE,oBAAoB;4BAClC,QAAQ,EAAE,UAAC,QAAQ;gCACjB,QAAQ,CACN,IAAI,EACJ,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU,CAAC,CACnC,CAAA;4BACH,CAAC;yBACF,CAAC,CAAA;;;;;aAEL,CAAC,EAAE,CAAA;IACN,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE5C,IAAM,KAAK,GAAG,IAAA,eAAO,EAAC;QACpB,IAAM,YAAY,GAAG,CAAC,OAAO,CAAC,CAAA;QAE9B,OAAO,CACL,yCAAO,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,IACxD,KAAK,CAAC,KAAK,CACN,CACT,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAE3B,OAAO,CACL,uCAAK,SAAS,EAAC,0BAA0B;QACtC,KAAK,CAAC,KAAK,IAAI,KAAK;QACrB,uCAAK,SAAS,EAAC,SAAS,kBAAe,KAAK,CAAC,UAAU;YACrD,8BAAC,WAAI,IAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG;YACtC,yCAAO,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,SAAS,EAAC,OAAO,GAAG,CAC3D,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAE4B,mCAAO;AAAE,4CAAgB"}

package/dist/src/forms/MultiSelectField.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="mdx" />
+import { BADGES } from "../../.storybook/constants";
+import MultiSelectFieldDocumentation from "./MultiSelectField.docs.mdx";
+declare const _default: {
+    title: string;
+    id: string;
+    decorators: ((storyFn: () => JSX.Element) => JSX.Element)[];
+    parameters: {
+        docs: {
+            page: typeof MultiSelectFieldDocumentation;
+        };
+        badges: BADGES[];
+    };
+};
+export default _default;
+export declare const standard: () => JSX.Element;
+export declare const withPreviousSelections: () => JSX.Element;
+export declare const withStaticData: () => JSX.Element;