@vuu-ui/vuu-shell 0.6.25-debug → 0.6.26-debug

package/cjs/index.js

@@ -31,10 +31,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ConnectionStatusIcon: () => ConnectionStatusIcon,
+  DEFAULT_DENSITY: () => DEFAULT_DENSITY2,
+  DEFAULT_THEME: () => DEFAULT_THEME,
+  DEFAULT_THEME_MODE: () => DEFAULT_THEME_MODE,
+  DensitySwitch: () => DensitySwitch,
   Feature: () => Feature,
   LoginPanel: () => LoginPanel,
   Shell: () => Shell,
   ShellContextProvider: () => ShellContextProvider,
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
   ThemeSwitch: () => ThemeSwitch,
   getAuthDetailsFromCookies: () => getAuthDetailsFromCookies,
   logout: () => logout,
@@ -81,14 +87,42 @@ var ConnectionStatusIcon = ({ connectionStatus, className, element = "span", ...
   ] }) });
 };
 
+// src/density-switch/DensitySwitch.tsx
+var import_salt_lab = require("@heswell/salt-lab");
+var import_react2 = require("react");
+var import_classnames2 = __toESM(require("classnames"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var classBase = "vuuDensitySwitch";
+var densities = ["high", "medium", "low", "touch"];
+var DEFAULT_DENSITY = "high";
+var DensitySwitch = ({
+  className: classNameProp,
+  defaultDensity = DEFAULT_DENSITY,
+  onDensityChange
+}) => {
+  const handleSelectionChange = (0, import_react2.useCallback)((_event, selectedItem) => {
+    onDensityChange(selectedItem);
+  }, [onDensityChange]);
+  const className = (0, import_classnames2.default)(classBase, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_salt_lab.Dropdown,
+    {
+      className,
+      source: densities,
+      defaultSelected: defaultDensity,
+      onSelectionChange: handleSelectionChange
+    }
+  );
+};
+
 // src/feature/Feature.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 
 // src/feature/ErrorBoundary.jsx
-var import_react2 = __toESM(require("react"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react2.default.Component {
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react3.default.Component {
   constructor(props) {
     super(props);
     this.state = { errorMessage: null };
@@ -101,9 +135,9 @@ var ErrorBoundary = class extends import_react2.default.Component {
   }
   render() {
     if (this.state.errorMessage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: "Something went wrong." }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: this.state.errorMessage })
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: "Something went wrong." }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: this.state.errorMessage })
       ] });
     }
     return this.props.children;
@@ -111,17 +145,11 @@ var ErrorBoundary = class extends import_react2.default.Component {
 };
 
 // src/feature/Loader.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hwLoader", children: "loading" });
-
-// src/feature/css-module-loader.ts
-var importCSS = async (path) => {
-  const container = new CSSStyleSheet();
-  return fetch(path).then((x) => x.text()).then((x) => container.replace(x));
-};
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hwLoader", children: "loading" });
 
 // src/feature/Feature.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function RawFeature({
   url,
   css,
@@ -129,32 +157,37 @@ function RawFeature({
   ...props
 }) {
   if (css) {
-    importCSS(css).then((styleSheet) => {
-      document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        styleSheet
-      ];
-    });
+    import(
+      /* @vite-ignore */
+      css
+    ).then(
+      (cssModule) => {
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          cssModule.default
+        ];
+      }
+    );
   }
-  const LazyFeature = import_react3.default.lazy(() => import(
+  const LazyFeature = import_react4.default.lazy(() => import(
     /* @vite-ignore */
     url
   ));
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LazyFeature, { ...props, ...params }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LazyFeature, { ...props, ...params }) }) });
 }
-var Feature = import_react3.default.memo(RawFeature);
+var Feature = import_react4.default.memo(RawFeature);
 Feature.displayName = "Feature";
 (0, import_vuu_layout.registerComponent)("Feature", Feature, "view");
 
 // src/login/LoginPanel.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_core = require("@salt-ds/core");
-var import_salt_lab = require("@heswell/salt-lab");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var classBase = "vuuLoginPanel";
+var import_salt_lab2 = require("@heswell/salt-lab");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase2 = "vuuLoginPanel";
 var LoginPanel = ({ onSubmit }) => {
-  const [username, setUserName] = (0, import_react4.useState)("");
-  const [password, setPassword] = (0, import_react4.useState)("");
+  const [username, setUserName] = (0, import_react5.useState)("");
+  const [password, setPassword] = (0, import_react5.useState)("");
   const login = () => {
     onSubmit(username, password);
   };
@@ -165,10 +198,10 @@ var LoginPanel = ({ onSubmit }) => {
     setPassword(value);
   };
   const dataIsValid = username.trim() !== "" && password.trim() !== "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classBase, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.Input, { value: username, id: "text-username", onChange: handleUsername }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab.FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_salt_lab.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: classBase2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.FormField, { label: "Username", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.Input, { value: username, id: "text-username", onChange: handleUsername }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab2.FormField, { label: "Password", style: { width: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_salt_lab2.Input,
       {
         type: "password",
         value: password,
@@ -176,10 +209,10 @@ var LoginPanel = ({ onSubmit }) => {
         onChange: handlePassword
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_core.Button,
       {
-        className: `${classBase}-login`,
+        className: `${classBase2}-login`,
         disabled: !dataIsValid,
         onClick: login,
         variant: "cta",
@@ -207,16 +240,43 @@ var logout = (loginUrl) => {
 
 // src/shell.tsx
 var import_vuu_data = require("@vuu-ui/vuu-data");
+var import_classnames5 = __toESM(require("classnames"));
 var import_react11 = require("react");
 
+// src/ShellContextProvider.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultConfig = {};
+var ShellContext = (0, import_react6.createContext)(defaultConfig);
+var Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShellContext.Provider, { value: mergedContext, children });
+};
+var ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Provider, { context: value, inheritedContext: context, children }) });
+};
+var useShellContext = () => {
+  return (0, import_react6.useContext)(ShellContext);
+};
+
 // src/use-layout-config.js
-var import_react5 = require("react");
+var import_react7 = require("react");
 var useLayoutConfig = (user, defaultLayout) => {
-  const [layout, _setLayout] = (0, import_react5.useState)(defaultLayout);
+  const [layout, _setLayout] = (0, import_react7.useState)(defaultLayout);
   const setLayout = (layout2) => {
     _setLayout(layout2);
   };
-  const load = (0, import_react5.useCallback)(
+  const load = (0, import_react7.useCallback)(
     async (id = "latest") => {
       fetch(`api/vui/${user.username}/${id}`, {}).then((response) => {
         return response.ok ? response.json() : defaultLayout;
@@ -226,10 +286,10 @@ var useLayoutConfig = (user, defaultLayout) => {
     },
     [defaultLayout, user.username]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     load();
   }, [load]);
-  const saveData = (0, import_react5.useCallback)(
+  const saveData = (0, import_react7.useCallback)(
     (data) => {
       fetch(`api/vui/${user.username}`, {
         method: "POST",
@@ -243,7 +303,7 @@ var useLayoutConfig = (user, defaultLayout) => {
     },
     [defaultLayout, user]
   );
-  const loadLayoutById = (0, import_react5.useCallback)(
+  const loadLayoutById = (0, import_react7.useCallback)(
     (id) => {
       load(id);
     },
@@ -253,34 +313,7 @@ var useLayoutConfig = (user, defaultLayout) => {
 };
 var use_layout_config_default = useLayoutConfig;
 
-// src/ShellContextProvider.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var defaultConfig = {};
-var ShellContext = (0, import_react6.createContext)(defaultConfig);
-var Provider = ({
-  children,
-  context,
-  inheritedContext
-}) => {
-  const mergedContext = {
-    ...inheritedContext,
-    ...context
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShellContext.Provider, { value: mergedContext, children });
-};
-var ShellContextProvider = ({
-  children,
-  value
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider, { context: value, inheritedContext: context, children }) });
-};
-var useShellContext = () => {
-  return (0, import_react6.useContext)(ShellContext);
-};
-
 // src/shell.tsx
-var import_classnames5 = __toESM(require("classnames"));
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
 
 // src/app-header/AppHeader.tsx
@@ -288,15 +321,15 @@ var import_react10 = require("react");
 
 // src/user-profile/UserProfile.tsx
 var import_core3 = require("@salt-ds/core");
-var import_salt_lab3 = require("@heswell/salt-lab");
+var import_salt_lab4 = require("@heswell/salt-lab");
 var import_icons2 = require("@salt-ds/icons");
 
 // src/user-profile/UserPanel.tsx
 var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var import_salt_lab2 = require("@heswell/salt-lab");
+var import_salt_lab3 = require("@heswell/salt-lab");
 var import_core2 = require("@salt-ds/core");
 var import_icons = require("@salt-ds/icons");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/get-layout-history.ts
 var getLayoutHistory = async (user) => {
@@ -309,16 +342,16 @@ var getLayoutHistory = async (user) => {
 };
 
 // src/user-profile/UserPanel.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
   return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
 };
 var HistoryListItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_salt_lab2.ListItem, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab3.ListItem, { ...props });
 };
-var UserPanel = (0, import_react7.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
-  const [history, setHistory] = (0, import_react7.useState)([]);
-  (0, import_react7.useEffect)(() => {
+var UserPanel = (0, import_react8.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react8.useState)([]);
+  (0, import_react8.useEffect)(() => {
     async function getHistory() {
       const history2 = await getLayoutHistory(user);
       const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
@@ -331,7 +364,7 @@ var UserPanel = (0, import_react7.forwardRef)(function UserPanel2({ loginUrl, on
     }
     getHistory();
   }, [user]);
-  const handleHisorySelected = (0, import_react7.useCallback)(
+  const handleHisorySelected = (0, import_react8.useCallback)(
     (evt, selected2) => {
       if (selected2) {
         onNavigate(selected2.id);
@@ -339,13 +372,13 @@ var UserPanel = (0, import_react7.forwardRef)(function UserPanel2({ loginUrl, on
     },
     [onNavigate]
   );
-  const handleLogout = (0, import_react7.useCallback)(() => {
+  const handleLogout = (0, import_react8.useCallback)(() => {
     logout(loginUrl);
   }, [loginUrl]);
   const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_salt_lab2.List,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_salt_lab3.List,
       {
         ListItem: HistoryListItem,
         className: "vuuUserPanel-history",
@@ -354,15 +387,15 @@ var UserPanel = (0, import_react7.forwardRef)(function UserPanel2({ loginUrl, on
         source: history
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.ExportIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core2.Button, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ExportIcon, {}),
       " Logout"
     ] }) })
   ] });
 });
 
 // src/user-profile/UserProfile.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var UserProfile = ({
   layoutId,
   loginUrl,
@@ -372,9 +405,9 @@ var UserProfile = ({
   const handleNavigate = (id) => {
     onNavigate(id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_salt_lab3.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.UserSolidIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_salt_lab4.DropdownBase, { className: "vuuUserProfile", placement: "bottom-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.UserSolidIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       UserPanel,
       {
         layoutId,
@@ -387,12 +420,12 @@ var UserProfile = ({
 };
 
 // src/theme-switch/ThemeSwitch.tsx
-var import_salt_lab4 = require("@heswell/salt-lab");
-var import_classnames2 = __toESM(require("classnames"));
+var import_salt_lab5 = require("@heswell/salt-lab");
+var import_classnames3 = __toESM(require("classnames"));
 var import_core4 = require("@salt-ds/core");
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase2 = "vuuThemeSwitch";
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase3 = "vuuThemeSwitch";
 var modes = ["light", "dark"];
 var ThemeSwitch = ({
   className: classNameProp,
@@ -408,7 +441,7 @@ var ThemeSwitch = ({
     state: "mode"
   });
   const selectedIndex = modes.indexOf(mode);
-  const handleChangeSecondary = (0, import_react8.useCallback)(
+  const handleChangeSecondary = (0, import_react9.useCallback)(
     (_evt, index) => {
       const mode2 = modes[index];
       setMode(mode2);
@@ -416,25 +449,25 @@ var ThemeSwitch = ({
     },
     [onChange, setMode]
   );
-  const className = (0, import_classnames2.default)(classBase2, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    import_salt_lab4.ToggleButtonGroup,
+  const className = (0, import_classnames3.default)(classBase3, classNameProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_salt_lab5.ToggleButtonGroup,
     {
       className,
       ...htmlAttributes,
       onChange: handleChangeSecondary,
       selectedIndex,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_salt_lab4.ToggleButton,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_salt_lab5.ToggleButton,
           {
             "aria-label": "alert",
             tooltipText: "Light Theme",
             "data-icon": "light"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_salt_lab4.ToggleButton,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_salt_lab5.ToggleButton,
           {
             "aria-label": "home",
             tooltipText: "Dark Theme",
@@ -448,36 +481,6 @@ var ThemeSwitch = ({
 
 // src/app-header/AppHeader.tsx
 var import_classnames4 = __toESM(require("classnames"));
-
-// src/density-switch/DensitySwitch.tsx
-var import_salt_lab5 = require("@heswell/salt-lab");
-var import_core5 = require("@salt-ds/core");
-var import_react9 = require("react");
-var import_classnames3 = __toESM(require("classnames"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase3 = "vuuDensitySwitch";
-var densities = ["high", "medium", "low", "touch"];
-var DensitySwitch = ({
-  className: classNameProp,
-  defaultDensity = import_core5.DEFAULT_DENSITY,
-  onDensityChange
-}) => {
-  const handleSelectionChange = (0, import_react9.useCallback)((_event, selectedItem) => {
-    onDensityChange(selectedItem);
-  }, [onDensityChange]);
-  const className = (0, import_classnames3.default)(classBase3, classNameProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_salt_lab5.Dropdown,
-    {
-      className,
-      source: densities,
-      defaultSelected: defaultDensity,
-      onSelectionChange: handleSelectionChange
-    }
-  );
-};
-
-// src/app-header/AppHeader.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var classBase4 = "vuuAppHeader";
 var AppHeader = ({
@@ -487,23 +490,16 @@ var AppHeader = ({
   onNavigate,
   onSwitchTheme,
   themeMode = "light",
-  onDensitySwitch,
-  density = "medium",
   user,
   ...htmlAttributes
 }) => {
-  const className = (0, import_classnames4.default)(classBase4, classNameProp, `salt-density-${density}`);
+  const className = (0, import_classnames4.default)(classBase4, classNameProp);
   const handleSwitchTheme = (0, import_react10.useCallback)(
     (mode) => onSwitchTheme == null ? void 0 : onSwitchTheme(mode),
     [onSwitchTheme]
   );
-  const handleDensitySwitch = (0, import_react10.useCallback)(
-    (density2) => onDensitySwitch == null ? void 0 : onDensitySwitch(density2),
-    [onDensitySwitch]
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className, ...htmlAttributes, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeSwitch, { defaultMode: themeMode, onChange: handleSwitchTheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DensitySwitch, { defaultDensity: density, onDensityChange: handleDensitySwitch }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       UserProfile,
       {
@@ -543,7 +539,6 @@ var Shell = ({
   ...htmlAttributes
 }) => {
   const rootRef = (0, import_react11.useRef)(null);
-  const [density, setDensity] = (0, import_react11.useState)("medium");
   const paletteView = (0, import_react11.useRef)(null);
   const [open, setOpen] = (0, import_react11.useState)(false);
   const layoutId = (0, import_react11.useRef)("latest");
@@ -562,12 +557,6 @@ var Shell = ({
       rootRef.current.dataset.mode = mode;
     }
   }, []);
-  const handleDensitySwitch = (0, import_react11.useCallback)(
-    (density2) => {
-      setDensity(density2);
-    },
-    [setDensity]
-  );
   const handleDrawerClick = (e) => {
     var _a;
     const target = e.target;
@@ -623,7 +612,7 @@ var Shell = ({
     "vuuShell",
     classNameProp,
     "salt-theme",
-    `salt-density-${density}`
+    "salt-density-high"
   );
   return (
     // ShellContext TBD
@@ -648,11 +637,10 @@ var Shell = ({
                     loginUrl,
                     user,
                     onNavigate: handleNavigate,
-                    onSwitchTheme: handleSwitchTheme,
-                    onDensitySwitch: handleDensitySwitch
+                    onSwitchTheme: handleSwitchTheme
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.Chest, { style: { flex: 1 }, children: getDrawers().concat(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vuu_layout2.DockLayout, { style: { flex: 1 }, children: getDrawers().concat(
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     import_vuu_layout2.DraggableLayout,
                     {
@@ -671,4 +659,64 @@ var Shell = ({
     ] })
   );
 };
+
+// src/theme-provider/ThemeProvider.tsx
+var import_react12 = require("react");
+var import_classnames6 = __toESM(require("classnames"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DEFAULT_DENSITY2 = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = (0, import_react12.createContext)({
+  density: "high",
+  theme: "salt-theme",
+  themeMode: "light"
+});
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a;
+  if ((0, import_react12.isValidElement)(children)) {
+    return (0, import_react12.cloneElement)(children, {
+      className: (0, import_classnames6.default)(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        (_a = children.props) == null ? void 0 : _a.className,
+        theme,
+        `salt-density-${density}`
+      ),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      "data-mode": themeMode
+    });
+  } else {
+    console.warn(
+      `
+ThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
+          Wrap elements with a single container`
+    );
+    return children;
+  }
+};
+var ThemeProvider = ({
+  children,
+  theme: themeProp,
+  themeMode: themeModeProp,
+  density: densityProp
+}) => {
+  var _a, _b, _c;
+  const {
+    density: inheritedDensity,
+    themeMode: inheritedThemeMode,
+    theme: inheritedTheme
+  } = (0, import_react12.useContext)(ThemeContext);
+  const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY2;
+  const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
+  const theme = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
+  const themedChildren = createThemedChildren(
+    children,
+    theme,
+    themeMode,
+    density
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
 //# sourceMappingURL=index.js.map