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

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

@@ -0,0 +1,177 @@
+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

@@ -0,0 +1,193 @@
+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

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

package/src/login/LoginPanel.css.js

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,124 @@
+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 };