@headless-adminapp/fluent 0.0.17-alpha.52 → 0.0.17-alpha.53

package/PageEntityView/PageEntityViewStringContext.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageEntityViewStringContext = exports.defaultPageEntityViewStrings = void 0;
-exports.usePageEntityViewStrings = usePageEntityViewStrings;
-const react_1 = require("react");
-exports.defaultPageEntityViewStrings = {
+import { createContext, useContext } from 'react';
+export const defaultPageEntityViewStrings = {
     add: 'Add',
     addColumns: 'Add columns',
     apply: 'Apply',
@@ -24,8 +20,8 @@ exports.defaultPageEntityViewStrings = {
     filterBy: 'Filter by',
     noRecordsFound: "We didn't find anything to show here",
 };
-exports.PageEntityViewStringContext = (0, react_1.createContext)(exports.defaultPageEntityViewStrings);
-function usePageEntityViewStrings() {
-    const context = (0, react_1.useContext)(exports.PageEntityViewStringContext);
+export const PageEntityViewStringContext = createContext(defaultPageEntityViewStrings);
+export function usePageEntityViewStrings() {
+    const context = useContext(PageEntityViewStringContext);
     return context;
 }

package/PageEntityView/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageEntityView = void 0;
-var PageEntityView_1 = require("./PageEntityView");
-Object.defineProperty(exports, "PageEntityView", { enumerable: true, get: function () { return PageEntityView_1.PageEntityView; } });
+export { PageEntityView } from './PageEntityView';

package/PageInsights/PageInsights.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createInsightLookup = createInsightLookup;
-exports.PageInsights = PageInsights;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const InsightsProvider_1 = require("@headless-adminapp/app/insights/InsightsProvider");
-const react_1 = require("react");
-const InsightsContainer_1 = require("../Insights/InsightsContainer");
-function createInsightLookup(insights) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InsightsProvider } from '@headless-adminapp/app/insights/InsightsProvider';
+import { useMemo } from 'react';
+import { InsightsContainer } from '../Insights/InsightsContainer';
+export function createInsightLookup(insights) {
     return insights.map((insight) => ({
         id: insight.id,
         title: insight.title,
         subtitle: insight.subtitle,
     }));
 }
-function PageInsights({ insightId, insights, onChangeInsight, }) {
-    const insightExpereince = (0, react_1.useMemo)(() => {
+export function PageInsights({ insightId, insights, onChangeInsight, }) {
+    const insightExpereince = useMemo(() => {
         return insights.find((insight) => insight.id === insightId);
     }, [insightId, insights]);
-    const insightLookups = (0, react_1.useMemo)(() => createInsightLookup(insights), [insights]);
+    const insightLookups = useMemo(() => createInsightLookup(insights), [insights]);
     if (!insightExpereince) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(InsightsProvider_1.InsightsProvider, { experience: insightExpereince, insightLookup: insightLookups, onInsightSelect: onChangeInsight, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }));
+    return (_jsx(InsightsProvider, { experience: insightExpereince, insightLookup: insightLookups, onInsightSelect: onChangeInsight, children: _jsx(InsightsContainer, {}) }));
 }

package/PageInsights/index.js

@@ -1,6 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createInsightLookup = exports.PageInsights = void 0;
-var PageInsights_1 = require("./PageInsights");
-Object.defineProperty(exports, "PageInsights", { enumerable: true, get: function () { return PageInsights_1.PageInsights; } });
-Object.defineProperty(exports, "createInsightLookup", { enumerable: true, get: function () { return PageInsights_1.createInsightLookup; } });
+export { PageInsights, createInsightLookup } from './PageInsights';

package/ProgressIndicatorContainer/index.js

@@ -1,30 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressIndicatorContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const hooks_1 = require("@headless-adminapp/app/progress-indicator/hooks");
-const ProgressIndicatorContainer = () => {
-    const state = (0, hooks_1.useProgressIndicator)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.overlayVisible && ((0, jsx_runtime_1.jsx)("div", { style: {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body1, Dialog, DialogBody, DialogContent, DialogSurface, Spinner, tokens, } from '@fluentui/react-components';
+import { useProgressIndicator } from '@headless-adminapp/app/progress-indicator/hooks';
+export const ProgressIndicatorContainer = () => {
+    const state = useProgressIndicator();
+    return (_jsxs(_Fragment, { children: [state.overlayVisible && (_jsx("div", { style: {
                     position: 'fixed',
                     top: 0,
                     bottom: 0,
                     left: 0,
                     right: 0,
                     zIndex: 1000,
-                } })), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: state.visible, onOpenChange: () => {
+                } })), _jsx(Dialog, { open: state.visible, onOpenChange: () => {
                     // do nothing
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}), !!state.message && ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                }, children: _jsx(DialogSurface, { style: { maxWidth: 320 }, children: _jsx(DialogBody, { children: _jsxs(DialogContent, { children: [_jsx(Spinner, {}), !!state.message && (_jsx(Body1, { style: {
                                         textAlign: 'center',
                                         display: 'flex',
                                         alignItems: 'center',
                                         justifyContent: 'center',
-                                        marginTop: react_components_1.tokens.spacingVerticalL,
-                                    }, children: state.message })), (0, jsx_runtime_1.jsx)("button", { style: {
+                                        marginTop: tokens.spacingVerticalL,
+                                    }, children: state.message })), _jsx("button", { style: {
                                         position: 'absolute',
                                         opacity: 0,
                                         pointerEvents: 'none',
                                     } })] }) }) }) })] }));
 };
-exports.ProgressIndicatorContainer = ProgressIndicatorContainer;

package/ToastNotificationContainer/index.js

@@ -1,23 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastNotificationContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const hooks_1 = require("@headless-adminapp/app/toast-notification/hooks");
-const react_1 = require("react");
-const ToastNotificationContainer = () => {
-    const items = (0, hooks_1.useToastNotificationItems)();
-    const toasterId = (0, react_components_1.useId)('toaster');
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Toaster, { toasterId: toasterId }), items.map((item) => {
-                return (0, jsx_runtime_1.jsx)(Item, { item: item, toasterId: toasterId }, item.id);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Toast, ToastBody, Toaster, ToastFooter, ToastTitle, useId, useToastController, } from '@fluentui/react-components';
+import { useCloseToastNotification, useToastNotificationItems, } from '@headless-adminapp/app/toast-notification/hooks';
+import { useEffect, useRef } from 'react';
+export const ToastNotificationContainer = () => {
+    const items = useToastNotificationItems();
+    const toasterId = useId('toaster');
+    return (_jsxs(_Fragment, { children: [_jsx(Toaster, { toasterId: toasterId }), items.map((item) => {
+                return _jsx(Item, { item: item, toasterId: toasterId }, item.id);
             })] }));
 };
-exports.ToastNotificationContainer = ToastNotificationContainer;
 const Item = ({ item, toasterId, }) => {
-    const { dispatchToast, dismissToast } = (0, react_components_1.useToastController)(toasterId);
-    const closeToastNotification = (0, hooks_1.useCloseToastNotification)();
-    const opened = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
+    const { dispatchToast, dismissToast } = useToastController(toasterId);
+    const closeToastNotification = useCloseToastNotification();
+    const opened = useRef(false);
+    useEffect(() => {
         var _a;
         if (!item.isOpen) {
             dismissToast(item.id);
@@ -27,7 +23,7 @@ const Item = ({ item, toasterId, }) => {
             return;
         }
         opened.current = true;
-        dispatchToast((0, jsx_runtime_1.jsxs)(react_components_1.Toast, { children: [(0, jsx_runtime_1.jsx)(react_components_1.ToastTitle, { children: item.title }), (0, jsx_runtime_1.jsx)(react_components_1.ToastBody, { children: item.text }), !!((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(react_components_1.ToastFooter, { children: item.actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
+        dispatchToast(_jsxs(Toast, { children: [_jsx(ToastTitle, { children: item.title }), _jsx(ToastBody, { children: item.text }), !!((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) && (_jsx(ToastFooter, { children: item.actions.map((action, index) => (_jsx(Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
             timeout: 2000,
             intent: item.type,
             pauseOnHover: true,

package/componentStore.js

@@ -1,5 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentStore = void 0;
-const store_1 = require("@headless-adminapp/app/store");
-exports.componentStore = new store_1.ComponentStore();
+import { ComponentStore } from '@headless-adminapp/app/store';
+export const componentStore = new ComponentStore();

package/components/BodyLoading.js

@@ -1,23 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BodyLoading = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const BodyLoading = ({ loading }) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner, tokens } from '@fluentui/react-components';
+export const BodyLoading = ({ loading }) => {
     if (!loading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,
-                    backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                    backgroundColor: tokens.colorNeutralBackground1,
                     opacity: 0.7,
-                } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                } }), _jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }));
+                }, children: _jsx(Spinner, { size: "small" }) })] }));
 };
-exports.BodyLoading = BodyLoading;

package/components/DialogLogin.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogLogin = DialogLogin;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const LoginForm_1 = require("./LoginForm");
-function DialogLogin(props) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl }) }) }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog, DialogBody, DialogContent, DialogSurface, } from '@fluentui/react-components';
+import { LoginForm } from './LoginForm';
+export function DialogLogin(props) {
+    return (_jsx(Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: _jsx(DialogSurface, { style: { maxWidth: 360 }, children: _jsx(DialogBody, { children: _jsx(DialogContent, { children: _jsx(LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl }) }) }) }) }));
 }

package/components/LoginForm.js

@@ -1,27 +1,3 @@
-"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) {
@@ -31,16 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoginForm = LoginForm;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const yup_1 = require("@hookform/resolvers/yup");
-const react_hook_form_1 = require("react-hook-form");
-const yup = __importStar(require("yup"));
-const SectionControl_1 = require("../DataForm/SectionControl");
-const PasswordControl_1 = require("../form/controls/PasswordControl");
-const TextControl_1 = require("../form/controls/TextControl");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, MessageBar, MessageBarBody, Spinner, Subtitle1, } from '@fluentui/react-components';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Controller, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { SectionControlWrapper } from '../DataForm/SectionControl';
+import { PasswordControl } from '../form/controls/PasswordControl';
+import { TextControl } from '../form/controls/TextControl';
 const validationSchema = yup
     .object()
     .shape({
@@ -51,10 +25,10 @@ const initialValues = {
     username: '',
     password: '',
 };
-function LoginForm(props) {
-    const form = (0, react_hook_form_1.useForm)({
+export function LoginForm(props) {
+    const form = useForm({
         defaultValues: initialValues,
-        resolver: (0, yup_1.yupResolver)(validationSchema),
+        resolver: yupResolver(validationSchema),
     });
     const handleOnSubmit = (values) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
@@ -69,33 +43,33 @@ function LoginForm(props) {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: form.handleSubmit(handleOnSubmit), children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsx("form", { onSubmit: form.handleSubmit(handleOnSubmit), children: _jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'stretch',
                 justifyContent: 'flex-start',
                 gap: 16,
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [_jsx("div", { style: {
                         width: 80,
                         height: 80,
-                    }, children: !!props.logoImageUrl && ((0, jsx_runtime_1.jsx)("img", { src: props.logoImageUrl, style: {
+                    }, children: !!props.logoImageUrl && (_jsx("img", { src: props.logoImageUrl, style: {
                             width: 80,
                             height: 80,
                             aspectRatio: 'auto 80 / 80',
-                        }, alt: "logo" })) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle1, { children: "Log in to your account" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, alt: "logo" })) }), _jsx(Subtitle1, { children: "Log in to your account" }), _jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'stretch',
                         justifyContent: 'flex-start',
                         gap: 16,
-                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => {
+                    }, children: [_jsx(Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => {
                                 var _a, _b, _c;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted }) }));
-                            } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => {
+                                return (_jsx(SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: _jsx(TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted }) }));
+                            } }), _jsx(Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => {
                                 var _a, _b, _c;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
-                            } }), !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
+                                return (_jsx(SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) && formState.isSubmitted, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, children: _jsx(PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
+                            } }), !!form.formState.errors.root && (_jsx(MessageBar, { intent: "error", children: _jsx(MessageBarBody, { children: form.formState.errors.root.message }) })), _jsxs(Button, { appearance: "primary", type: "submit", style: {
                                 marginTop: 8,
                                 pointerEvents: form.formState.isSubmitting ? 'none' : 'auto',
-                            }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));
+                            }, children: [form.formState.isSubmitting && (_jsx(Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] })] }), _jsx("div", { style: { height: 80 } })] }) }));
 }

package/components/PageBroken.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageBroken = PageBroken;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-function PageBroken({ title, message, Icon }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1, Button, Title2 } from '@fluentui/react-components';
+export function PageBroken({ title, message, Icon }) {
+    return (_jsxs("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             gap: 16,
-        }, children: [!!Icon && (0, jsx_runtime_1.jsx)(Icon, { size: 64 }), (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: title }), !!message && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: message }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.history.back(), children: "Go back" })] }));
+        }, children: [!!Icon && _jsx(Icon, { size: 64 }), _jsx(Title2, { children: title }), !!message && _jsx(Body1, { children: message }), _jsx(Button, { onClick: () => window.history.back(), children: "Go back" })] }));
 }

package/components/PageLoading.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageLoading = PageLoading;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-function PageLoading({ message }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1, Spinner } from '@fluentui/react-components';
+export function PageLoading({ message }) {
+    return (_jsxs("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             gap: 16,
             alignItems: 'center',
             justifyContent: 'center',
-        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}), !!message && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: message })] }));
+        }, children: [_jsx(Spinner, {}), !!message && _jsx(Body1, { children: message })] }));
 }

package/components/PageLogin.js

@@ -1,39 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageLogin = PageLogin;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const LoginForm_1 = require("./LoginForm");
-function PageLogin(props) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '@fluentui/react-components';
+import { LoginForm } from './LoginForm';
+export function PageLogin(props) {
+    return (_jsx("div", { style: {
             height: '100vh',
             width: '100vw',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            background: react_components_1.tokens.colorNeutralBackground2,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                boxShadow: react_components_1.tokens.shadow4,
+            background: tokens.colorNeutralBackground2,
+        }, children: _jsx("div", { style: {
+                boxShadow: tokens.shadow4,
                 maxWidth: 992,
                 width: '100%',
                 overflow: 'hidden',
-                borderRadius: react_components_1.tokens.borderRadiusMedium,
-                background: react_components_1.tokens.colorNeutralBackground1,
-            }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', minHeight: 'calc(-200px + 100vh)' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                borderRadius: tokens.borderRadiusMedium,
+                background: tokens.colorNeutralBackground1,
+            }, children: _jsxs("div", { style: { display: 'flex', minHeight: 'calc(-200px + 100vh)' }, children: [_jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 16,
                             flex: 1,
                             alignItems: 'center',
                             justifyContent: 'center',
-                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: _jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 alignItems: 'stretch',
                                 justifyContent: 'flex-start',
                                 gap: 16,
                                 minWidth: 300,
-                            }, children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { logoImageUrl: props.logoImageUrl, onLogin: props.onLogin }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            }, children: _jsx(LoginForm, { logoImageUrl: props.logoImageUrl, onLogin: props.onLogin }) }) }), _jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 16,
@@ -41,5 +38,5 @@ function PageLogin(props) {
                             alignItems: 'stretch',
                             justifyContent: 'center',
                             overflow: 'hidden',
-                        }, children: (0, jsx_runtime_1.jsx)("img", { src: props.illustrationImageUrl, alt: "Login", style: { width: '100%', height: '100%', objectFit: 'contain' } }) })] }) }) }));
+                        }, children: _jsx("img", { src: props.illustrationImageUrl, alt: "Login", style: { width: '100%', height: '100%', objectFit: 'contain' } }) })] }) }) }));
 }

package/form/FormControl.js

@@ -1,4 +1,3 @@
-"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,29 +9,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_1 = require("react");
-const uuid_1 = require("uuid");
-const CurrencyControl_1 = require("./controls/CurrencyControl");
-const DateControl_1 = require("./controls/DateControl");
-const DateTimeControl_1 = require("./controls/DateTimeControl");
-const DecimalControl_1 = require("./controls/DecimalControl");
-const EmailControl_1 = require("./controls/EmailControl");
-const LookupControl_1 = require("./controls/LookupControl");
-const MultiSelectControl_1 = __importDefault(require("./controls/MultiSelectControl"));
-const MultiSelectLookupControl_1 = require("./controls/MultiSelectLookupControl");
-const PasswordControl_1 = require("./controls/PasswordControl");
-const SelectControl_1 = __importDefault(require("./controls/SelectControl"));
-const SwitchControl_1 = require("./controls/SwitchControl");
-const TelephoneControl_1 = require("./controls/TelephoneControl");
-const TextAreaControl_1 = require("./controls/TextAreaControl");
-const TextControl_1 = require("./controls/TextControl");
-const FormControlLoading_1 = require("./FormControlLoading");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '@fluentui/react-components';
+import { useCallback, useMemo } from 'react';
+import { v4 as uuid } from 'uuid';
+import { CurrencyControl } from './controls/CurrencyControl';
+import { DateControl } from './controls/DateControl';
+import { DateTimeControl } from './controls/DateTimeControl';
+import { DecimalControl } from './controls/DecimalControl';
+import { EmailControl } from './controls/EmailControl';
+import { LookupControl } from './controls/LookupControl';
+import MultiSelectControl from './controls/MultiSelectControl';
+import { MultiSelectLookupControl } from './controls/MultiSelectLookupControl';
+import { PasswordControl } from './controls/PasswordControl';
+import SelectControl from './controls/SelectControl';
+import { SwitchControl } from './controls/SwitchControl';
+import { TelephoneControl } from './controls/TelephoneControl';
+import { TextAreaControl } from './controls/TextAreaControl';
+import { TextControl } from './controls/TextControl';
+import { FormControlLoading } from './FormControlLoading';
 function Control(props) {
     const { type, label: _label, value, onChange } = props, rest = __rest(props, ["type", "label", "value", "onChange"]);
     switch (type) {
@@ -43,42 +38,42 @@ function Control(props) {
                 disabled: props.disabled,
             });
         case 'text':
-            return ((0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(TextControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'textarea':
-            return ((0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(TextAreaControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'telephone':
-            return ((0, jsx_runtime_1.jsx)(TelephoneControl_1.TelephoneControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(TelephoneControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'email':
-            return ((0, jsx_runtime_1.jsx)(EmailControl_1.EmailControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(EmailControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'password':
-            return ((0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(PasswordControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(DecimalControl_1.DecimalControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(DecimalControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'currency':
-            return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(CurrencyControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'date':
-            return ((0, jsx_runtime_1.jsx)(DateControl_1.DateControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(DateControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'datetime':
-            return ((0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(DateTimeControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'select':
-            return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(SelectControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'multi-select':
-            return ((0, jsx_runtime_1.jsx)(MultiSelectControl_1.default, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(MultiSelectControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'lookup':
-            return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(LookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'lookups':
-            return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(MultiSelectLookupControl, Object.assign({ value: value, onChange: onChange }, rest)));
         case 'switch':
-            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, Object.assign({ value: value, onChange: onChange }, rest)));
+            return (_jsx(SwitchControl, Object.assign({ value: value, onChange: onChange }, rest)));
         default:
-            return (0, jsx_runtime_1.jsx)("div", {});
+            return _jsx("div", {});
     }
 }
 function FormControl(props) {
     const { label, id, onChange } = props;
-    const _id = (0, react_1.useMemo)(() => id !== null && id !== void 0 ? id : (0, uuid_1.v4)(), [id]);
-    const noop = (0, react_1.useCallback)(() => { }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));
+    const _id = useMemo(() => id !== null && id !== void 0 ? id : uuid(), [id]);
+    const noop = useCallback(() => { }, []);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { style: { width: 160, marginTop: 4 }, children: label }), _jsx("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: _jsx(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));
 }
-FormControl.Loading = FormControlLoading_1.FormControlLoading;
-exports.default = FormControl;
+FormControl.Loading = FormControlLoading;
+export default FormControl;

package/form/FormControlLoading.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormControlLoading = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const FormControlLoading = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 2 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Skeleton, { style: { width: 100, height: 20 } }), (0, jsx_runtime_1.jsx)(react_components_1.Skeleton, { style: { height: 32 } })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@fluentui/react-components';
+export const FormControlLoading = () => {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 2 }, children: [_jsx(Skeleton, { style: { width: 100, height: 20 } }), _jsx(Skeleton, { style: { height: 32 } })] }));
 };
-exports.FormControlLoading = FormControlLoading;