@vuu-ui/vuu-shell 2.1.19-beta.2 → 2.1.19-beta.3

package/src/left-nav/LeftNav.css.js

@@ -1,177 +0,0 @@
-const css = `
-.vuuLeftNav {
-  --vuuOverflowContainer-height: auto;
-  --vuuFeatureList-padding: 195px 32px 16px 24px;
-  --salt-navigable-fontWeight-active: 700;
-  --vuuTab-background-selected: #ffffff1a;
-  --vuuTab-hover-background: #ffffff1a;
-  --vuuTab-before-content: none;
-  --vuuTab-borderRadius: 6px;
-  --vuuTab-height: 40px;
-  --vuuTabstrip-fontWeight: 700;
-  --vuuTabstrip-width: 100%;
-  --svg-demo: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>");
-  --svg-features: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>");
-  --svg-tables: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>");
-  --svg-layouts: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>");
-  --vuu-light-text-primary: #15171b;
-  --menu-level-2-width: 0px;
-  z-index: 0;
-  height: calc(100% - 4px);
-  margin-bottom: 4px;
-  transition: width .2s ease-out;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 3px 4px 4px #00000026;
-}
-
-.vuuLeftNav-menu-full {
-  --menu-width: var(--nav-menu-expanded-width);
-}
-
-.vuuLeftNav-menu-icons {
-  --menu-width: var(--nav-menu-collapsed-width);
-}
-
-.vuuLeftNav-menu-icons-content {
-  --menu-width: var(--nav-menu-collapsed-width);
-  --menu-level-2-width: var(--nav-menu-content-width);
-}
-
-.vuuLeftNav-menu-full-content {
-  --menu-width: var(--nav-menu-expanded-width);
-  --menu-level-2-width: var(--nav-menu-content-width);
-}
-
-.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary, .vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {
-  display: flex;
-}
-
-.vuuLeftNav-menu-primary {
-  flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: var(--menu-width);
-  background-color: #2a015f;
-  height: 100%;
-  padding: 32px 16px;
-  transition: flex-basis .2s ease-out;
-  display: flex;
-  container-type: inline-size;
-}
-
-.vuuLeftNav-menu-secondary {
-  flex: none;
-  flex-basis: var(--nav-menu-content-width, 240px);
-  z-index: -1;
-  display: none;
-  top: 0;
-  right: 0;
-
-  & .vuuTabs-tabPanel {
-    background: var(--salt-container-primary-background);
-    height: 100%;
-    padding: 34px 32px 8px 24px;
-  }
-}
-
-.vuuLeftNav .vuuTabstrip {
-  margin-top: 102px;
-}
-
-.vuuLeftNav .vuuTab {
-  --vuuTab-focusVisible-color: pink;
-  --vuu-icon-color: white;
-  --vuu-icon-left: 12px;
-  --vuu-icon-size: 16px;
-  border-left: 4px solid #0000;
-  padding: 0 0 0 48px;
-}
-
-.vuuLeftNav .vuuTab-selected {
-  --vuu-icon-color: var(--salt-navigable-indicator-active);
-  border-left: solid 4px var(--salt-navigable-indicator-active);
-}
-
-.vuuLeftNav-logo {
-  flex: none;
-  justify-content: center;
-  display: flex;
-}
-
-.vuuLeftNav-main {
-  flex: auto;
-}
-
-.vuuLeftNav-menu {
-  color: #fff;
-  margin-top: 102px;
-  padding: 0;
-}
-
-.vuuLeftNav [data-icon="demo"] {
-  --vuu-icon-svg: var(--svg-demo);
-}
-
-.vuuLeftNav [data-icon="tables"] {
-  --vuu-icon-svg: var(--svg-tables);
-}
-
-.vuuLeftNav [data-icon="features"] {
-  --vuu-icon-svg: var(--svg-features);
-}
-
-.vuuLeftNav [data-icon="layouts"] {
-  --vuu-icon-svg: var(--svg-layouts);
-}
-
-@container (width <= 100px) {
-  .vuuTab {
-    --vuuTab-padding: 0 0 0 42px;
-  }
-
-  .vuuTab-main {
-    display: none !important;
-  }
-}
-
-.vuuLeftNav-buttonBar {
-  flex: 0 0 100px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.vuuLeftNav-toggleButton {
-  --vuu-icon-color: var(--vuu-light-text-primary);
-  --vuu-icon-left: 11px;
-  --vuu-icon-top: 10px;
-  --vuu-icon-size: 16px;
-  background-color: var(--salt-navigable-indicator-active);
-  border-width: 0;
-  border-radius: 18px;
-  width: 36px;
-  height: 36px;
-  position: relative;
-}
-
-.vuuLeftNav-toggleButton-open {
-  --vuu-icon-left: 9px;
-}
-
-.vuuLeftNav-drawer {
-  background: #fff;
-  flex-direction: column;
-  flex-shrink: 0;
-  align-self: stretch;
-  align-items: flex-start;
-  height: 100%;
-  padding: 0 0 0 24px;
-  display: flex;
-  box-shadow: 3px 4px 4px #00000026;
-}
-
-
-`;
-export default css;

package/src/left-nav/LeftNav.js

@@ -1,193 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { VuuLogo } from "@vuu-ui/vuu-icons";
-import { Stack, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
-import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
-import { hasFilterTableFeatureProps } from "@vuu-ui/vuu-utils";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { useCallback, useMemo, useState } from "react";
-import { FeatureList } from "../feature-list/index.js";
-import { LayoutList } from "../workspace-management/index.js";
-import LeftNav from "./LeftNav.css";
-import { useFeatures } from "../feature-and-layout-provider/index.js";
-const classBase = "vuuLeftNav";
-const getDisplayStatus = (activeTabIndex, expanded)=>{
-    if (0 === activeTabIndex) return expanded ? "menu-full" : "menu-icons";
-    return expanded ? "menu-full-content" : "menu-icons-content";
-};
-const byModule = (f1, f2)=>{
-    const t1 = f1.ComponentProps?.tableSchema.table;
-    const t2 = f2.ComponentProps?.tableSchema.table;
-    if (t1 && t2) {
-        const m1 = t1.module.toLowerCase();
-        const m2 = t2.module.toLowerCase();
-        if (m1 < m2) return -1;
-        if (m1 > m2) return 1;
-        if (t1.table < t2.table) return -1;
-        else if (t1.table > t2.table) return 1;
-        else return 0;
-    }
-    throw Error("Invalid tableFeature");
-};
-const LeftNav_LeftNav = (props)=>{
-    const dispatch = useLayoutProviderDispatch();
-    const { "data-path": path, defaultExpanded = true, defaultActiveTabIndex = 0, onActiveChange, onTogglePrimaryMenu, sizeCollapsed = 80, sizeContent = 300, sizeExpanded = 240, style: styleProp, ...htmlAttributes } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-left-nav",
-        css: LeftNav,
-        window: targetWindow
-    });
-    const { dynamicFeatures = [], tableFeatures = [] } = useFeatures();
-    const [navState, setNavState] = useState({
-        activeTabIndex: defaultActiveTabIndex,
-        expanded: defaultExpanded
-    });
-    const tableFeaturesByGroup = useMemo(()=>tableFeatures?.sort(byModule).reduce((acc, filterTableFeature)=>{
-            if (!hasFilterTableFeatureProps(filterTableFeature)) return acc;
-            {
-                const { table } = filterTableFeature.ComponentProps.tableSchema;
-                const key = `${table.module} Tables`;
-                if (!acc[key]) acc[key] = [];
-                return {
-                    ...acc,
-                    [key]: acc[key].concat(filterTableFeature)
-                };
-            }
-        }, {}), [
-        tableFeatures
-    ]);
-    const getFullWidth = useCallback((tabIndex, expanded)=>{
-        if (0 === tabIndex) return expanded ? sizeExpanded : sizeCollapsed;
-        return expanded ? sizeExpanded + sizeContent : sizeCollapsed + sizeContent;
-    }, [
-        sizeCollapsed,
-        sizeContent,
-        sizeExpanded
-    ]);
-    const handleTabSelection = useCallback((activeTabIndex)=>{
-        const { activeTabIndex: currentIndex, expanded } = navState;
-        const newState = {
-            activeTabIndex,
-            expanded
-        };
-        setNavState(newState);
-        if (0 === activeTabIndex || 0 === currentIndex) {
-            const width = getFullWidth(activeTabIndex, expanded);
-            dispatch({
-                type: "layout-resize",
-                path: "#vuu-side-panel",
-                size: width
-            });
-        }
-        onActiveChange?.(activeTabIndex);
-    }, [
-        dispatch,
-        getFullWidth,
-        navState,
-        onActiveChange
-    ]);
-    const displayStatus = getDisplayStatus(navState.activeTabIndex, navState.expanded);
-    const toggleExpanded = useCallback(()=>{
-        const { activeTabIndex, expanded } = navState;
-        const primaryMenuExpanded = !expanded;
-        const newState = {
-            activeTabIndex,
-            expanded: primaryMenuExpanded
-        };
-        setNavState(newState);
-        dispatch({
-            type: "layout-resize",
-            path: "#vuu-side-panel",
-            size: getFullWidth(activeTabIndex, primaryMenuExpanded)
-        });
-        onTogglePrimaryMenu?.(primaryMenuExpanded);
-    }, [
-        dispatch,
-        getFullWidth,
-        navState,
-        onTogglePrimaryMenu
-    ]);
-    const style = {
-        ...styleProp,
-        "--nav-menu-collapsed-width": `${sizeCollapsed}px`,
-        "--nav-menu-expanded-width": `${sizeExpanded}px`,
-        "--nav-menu-content-width": `${sizeContent}px`
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, `${classBase}-${displayStatus}`),
-        style: style,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: clsx(`${classBase}-menu-primary`),
-                "data-mode": "dark",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "vuuLeftNav-logo",
-                        children: /*#__PURE__*/ jsx(VuuLogo, {})
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-main`,
-                        children: /*#__PURE__*/ jsxs(Tabstrip, {
-                            activeTabIndex: navState.activeTabIndex,
-                            animateSelectionThumb: false,
-                            className: `${classBase}-Tabstrip`,
-                            onActiveChange: handleTabSelection,
-                            orientation: "vertical",
-                            children: [
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "demo",
-                                    label: "DEMO"
-                                }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "features",
-                                    label: "VUU FEATURES"
-                                }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "tables",
-                                    label: "VUU TABLES"
-                                }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "layouts",
-                                    label: "MY LAYOUTS"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "vuuLeftNav-buttonBar",
-                        children: /*#__PURE__*/ jsx("button", {
-                            className: clsx("vuuLeftNav-toggleButton", {
-                                "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
-                                "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
-                            }),
-                            "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
-                            onClick: toggleExpanded
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(Stack, {
-                active: navState.activeTabIndex - 1,
-                className: `${classBase}-menu-secondary`,
-                showTabs: false,
-                children: [
-                    /*#__PURE__*/ jsx(FeatureList, {
-                        features: dynamicFeatures,
-                        title: "VUU FEATURES"
-                    }),
-                    /*#__PURE__*/ jsx(FeatureList, {
-                        features: tableFeaturesByGroup,
-                        title: "VUU TABLES"
-                    }),
-                    /*#__PURE__*/ jsx(LayoutList, {
-                        title: "MY LAYOUTS"
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { LeftNav_LeftNav as LeftNav };

package/src/left-nav/index.js

@@ -1 +0,0 @@
-export * from "./LeftNav.js";

package/src/login/LoginPanel.css.js

@@ -1,72 +0,0 @@
-const css = `
-.vuuLoginPanel {
-  --saltInput-paddingLeft: 8px;
-  --login-width: 856px;
-  --login-height: 550px;
-  --hwTextInput-border: solid 1px #ccc;
-  --hwTextInput-height: 28px;
-  --hwTextInput-padding: 0 12px;
-  --hwTextInput-width: 100%;
-  --login-row-height: 60px;
-  height: var(--login-height);
-  width: var(--login-width);
-  border-radius: 16px;
-  margin: 0 auto;
-  display: flex;
-  box-shadow: 0 24px 44px #00000040;
-}
-
-.vuuLoginPanel .saltInput-primary {
-  --saltInput-height: 36px;
-}
-
-.vuuLoginPanel-title {
-  justify-content: center;
-  font-size: 28px;
-  font-weight: 400;
-  display: flex;
-}
-
-.vuuLoginPanel-branding {
-  background-color: var(--vuu-color-deep-purple);
-  border-radius: 16px 0 0 16px;
-  flex-direction: column;
-  flex: 0 0 368px;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-  padding: 40px 100px;
-  display: flex;
-}
-
-.vuuLoginPanel-form {
-  background-color: #fff;
-  border-radius: 0 16px 16px 0;
-  flex-direction: column;
-  flex: auto;
-  justify-content: center;
-  gap: 32px;
-  padding: 0 40px;
-  display: flex;
-}
-
-.vuuLoginPanel-password {
-  --vuu-icon-size: 16px;
-}
-
-.vuuLoginPanel-appName {
-  color: #fff;
-  text-transform: uppercase;
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.vuuLoginPanel-login {
-  --saltButton-height: 36px;
-  --saltButton-borderRadius: 6px;
-  width: 100%;
-}
-
-
-`;
-export default css;

package/src/login/LoginPanel.js

@@ -1,124 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { VuuInput } from "@vuu-ui/vuu-ui-controls";
-import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { VuuLogo } from "./VuuLogo.js";
-import LoginPanel from "./LoginPanel.css";
-const classBase = "vuuLoginPanel";
-const LoginPanel_LoginPanel = ({ appName = "Demo App", className, onSubmit, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-login-panel",
-        css: LoginPanel,
-        window: targetWindow
-    });
-    const [username, setUserName] = useState("");
-    const [password, setPassword] = useState("");
-    const inputRef = useRef(null);
-    const login = ()=>{
-        onSubmit(username, password);
-    };
-    const handleUsername = (evt)=>{
-        setUserName(evt.target.value);
-    };
-    const handlePassword = (evt)=>{
-        setPassword(evt.target.value);
-    };
-    const handleCommitName = useCallback(()=>{
-        if (password) onSubmit(username, password);
-    }, [
-        onSubmit,
-        password,
-        username
-    ]);
-    const handleCommitPassword = useCallback(()=>{
-        if (username) onSubmit(username, password);
-    }, [
-        onSubmit,
-        password,
-        username
-    ]);
-    const dataIsValid = "" !== username.trim() && "" !== password.trim();
-    useEffect(()=>{
-        console.log("inputRef", {
-            input: inputRef.current
-        });
-        inputRef.current?.focus();
-    }, []);
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, className),
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-branding`,
-                children: [
-                    /*#__PURE__*/ jsx(VuuLogo, {}),
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-appName`,
-                        children: appName
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: `${classBase}-form`,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-title`,
-                        children: "Welcome Back"
-                    }),
-                    /*#__PURE__*/ jsxs(FormField, {
-                        children: [
-                            /*#__PURE__*/ jsx(FormFieldLabel, {
-                                children: "Username"
-                            }),
-                            /*#__PURE__*/ jsx(VuuInput, {
-                                bordered: true,
-                                value: username,
-                                id: "text-username",
-                                inputRef: inputRef,
-                                onChange: handleUsername,
-                                onCommit: handleCommitName
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(FormField, {
-                        children: [
-                            /*#__PURE__*/ jsx(FormFieldLabel, {
-                                children: "Password"
-                            }),
-                            /*#__PURE__*/ jsx(VuuInput, {
-                                bordered: true,
-                                className: `${classBase}-password`,
-                                inputProps: {
-                                    type: "password"
-                                },
-                                value: password,
-                                id: "text-password",
-                                onChange: handlePassword,
-                                onCommit: handleCommitPassword,
-                                endAdornment: /*#__PURE__*/ jsx("span", {
-                                    "data-icon": "eye",
-                                    style: {
-                                        cursor: "pointer"
-                                    }
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        appearance: "solid",
-                        className: `${classBase}-login`,
-                        disabled: !dataIsValid,
-                        onClick: login,
-                        sentiment: "accented",
-                        children: "Login"
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { LoginPanel_LoginPanel as LoginPanel };