@vuu-ui/vuu-shell 0.8.43 → 0.8.45

package/esm/shell-layouts/side-panel/SidePanel.js

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import sidePanelCss from './SidePanel.css.js';
 
 const classBase = "vuuShellSidePanel";
 const SidePanel = ({
@@ -11,6 +14,12 @@ const SidePanel = ({
   style: styleProp,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-side-panel",
+    css: sidePanelCss,
+    window: targetWindow
+  });
   const style = useMemo(
     () => ({
       ...styleProp,

package/esm/shell-layouts/side-panel/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../../../src/shell-layouts/side-panel/SidePanel.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./SidePanel.css\";\n// import { useLayoutManager } from \"../../layout-management\";\n\nconst classBase = \"vuuShellSidePanel\";\n\nexport interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  path?: string;\n  sizeOpen?: number;\n  sizeClosed?: number;\n}\n\nexport const SidePanel = ({\n  children,\n  open = true,\n  sizeClosed = 90,\n  sizeOpen = 200,\n  style: styleProp,\n  ...htmlAttributes\n}: SidePanelProps) => {\n  //   const { applicationJson, saveApplicationSettings } = useLayoutManager();\n  //   console.log(`settings`, {\n  //     expanded: applicationJson?.settings?.leftNav?.expanded,\n  //     active: applicationJson?.settings?.leftNav?.activeTabIndex,\n  //   });\n\n  const style = useMemo(\n    () =>\n      ({\n        ...styleProp,\n        \"--shell-left-nav-size\": open ? `${sizeOpen}px` : `${sizeClosed}px`,\n      } as CSSProperties),\n    [open, sizeClosed, sizeOpen, styleProp]\n  );\n  return (\n    <div {...htmlAttributes} className={cx(classBase)} style={style}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,SAAY,GAAA,mBAAA,CAAA;AASX,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,UAAa,GAAA,EAAA;AAAA,EACb,QAAW,GAAA,GAAA;AAAA,EACX,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAsB,KAAA;AAOpB,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OACG;AAAA,MACC,GAAG,SAAA;AAAA,MACH,yBAAyB,IAAO,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA,GAAO,GAAG,UAAU,CAAA,EAAA,CAAA;AAAA,KACjE,CAAA;AAAA,IACF,CAAC,IAAA,EAAM,UAAY,EAAA,QAAA,EAAU,SAAS,CAAA;AAAA,GACxC,CAAA;AACA,EACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAS,CAAG,EAAA,KAAA,EAChD,QACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SidePanel.js","sources":["../../../src/shell-layouts/side-panel/SidePanel.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport sidePanelCss from \"./SidePanel.css\";\n// import { useLayoutManager } from \"../../layout-management\";\n\nconst classBase = \"vuuShellSidePanel\";\n\nexport interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  path?: string;\n  sizeOpen?: number;\n  sizeClosed?: number;\n}\n\nexport const SidePanel = ({\n  children,\n  open = true,\n  sizeClosed = 90,\n  sizeOpen = 200,\n  style: styleProp,\n  ...htmlAttributes\n}: SidePanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-side-panel\",\n    css: sidePanelCss,\n    window: targetWindow,\n  });\n\n  //   const { applicationJson, saveApplicationSettings } = useLayoutManager();\n  //   console.log(`settings`, {\n  //     expanded: applicationJson?.settings?.leftNav?.expanded,\n  //     active: applicationJson?.settings?.leftNav?.activeTabIndex,\n  //   });\n\n  const style = useMemo(\n    () =>\n      ({\n        ...styleProp,\n        \"--shell-left-nav-size\": open ? `${sizeOpen}px` : `${sizeClosed}px`,\n      } as CSSProperties),\n    [open, sizeClosed, sizeOpen, styleProp]\n  );\n  return (\n    <div {...htmlAttributes} className={cx(classBase)} style={style}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,SAAY,GAAA,mBAAA,CAAA;AASX,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,UAAa,GAAA,EAAA;AAAA,EACb,QAAW,GAAA,GAAA;AAAA,EACX,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAQD,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OACG;AAAA,MACC,GAAG,SAAA;AAAA,MACH,yBAAyB,IAAO,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA,GAAO,GAAG,UAAU,CAAA,EAAA,CAAA;AAAA,KACjE,CAAA;AAAA,IACF,CAAC,IAAA,EAAM,UAAY,EAAA,QAAA,EAAU,SAAS,CAAA;AAAA,GACxC,CAAA;AACA,EACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAS,CAAG,EAAA,KAAA,EAChD,QACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/theme-switch/ThemeSwitch.css.js

@@ -0,0 +1,4 @@
+var themeSwitchCss = "\n.vuuThemeSwitch {\n    --saltButton-minWidth: 22px;\n    --svg-light: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>');\n    --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>');\n    padding: 2px;\n}\n\n.salt-density-high .vuuThemeSwitch {\n    --saltButton-minWidth: 16px;\n    --saltButton-width: 18px;\n    --vuuThemeSwitch-iconSize: 16px;\n}\n\n.vuuThemeSwitch [data-icon] {\n    --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);\n}\n\n.vuuThemeSwitch [data-icon='light'] {\n    --vuu-icon-svg: var(--svg-light);\n}\n.vuuThemeSwitch [data-icon='dark'] {\n    --vuu-icon-svg: var(--svg-dark);\n}\n\n.vuuThemeSwitch .saltToggleButton {\n    height: 20px;\n    width: 20px;\n}\n\n";
+
+export { themeSwitchCss as default };
+//# sourceMappingURL=ThemeSwitch.css.js.map

package/esm/theme-switch/ThemeSwitch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/theme-switch/ThemeSwitch.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'clsx';
 import { useControlled, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { useCallback } from 'react';
+import themeSwitchCss from './ThemeSwitch.css.js';
 
 const classBase = "vuuThemeSwitch";
 const ThemeSwitch = ({
@@ -11,6 +14,12 @@ const ThemeSwitch = ({
   onChange,
   ...htmlAttributes
 }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-theme-switch",
+    css: themeSwitchCss,
+    window: targetWindow
+  });
   const [mode, setMode] = useControlled({
     controlled: modeProp,
     default: defaultModeProp ?? "light",

package/esm/theme-switch/ThemeSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitch.js","sources":["../../src/theme-switch/ThemeSwitch.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ToggleButton, ToggleButtonGroup, useControlled } from \"@salt-ds/core\";\nimport { HTMLAttributes, SyntheticEvent, useCallback } from \"react\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\n\nimport \"./ThemeSwitch.css\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultMode?: ThemeMode;\n  mode?: ThemeMode;\n  onChange: (mode: ThemeMode) => void;\n}\n\nexport const ThemeSwitch = ({\n  className: classNameProp,\n  defaultMode: defaultModeProp,\n  mode: modeProp,\n  onChange,\n  ...htmlAttributes\n}: ThemeSwitchProps) => {\n  const [mode, setMode] = useControlled<ThemeMode>({\n    controlled: modeProp,\n    default: defaultModeProp ?? \"light\",\n    name: \"ThemeSwitch\",\n    state: \"mode\",\n  });\n\n  const handleChangeSecondary = useCallback(\n    (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const { value } = evt.target as HTMLButtonElement;\n      setMode(value as ThemeMode);\n      onChange(value as ThemeMode);\n    },\n    [onChange, setMode]\n  );\n  const className = cx(classBase, classNameProp);\n  return (\n    <ToggleButtonGroup\n      className={className}\n      {...htmlAttributes}\n      onChange={handleChangeSecondary}\n      value={mode}\n    >\n      <ToggleButton aria-label=\"alert\" data-icon=\"light\" value=\"light\" />\n      <ToggleButton aria-label=\"home\" data-icon=\"dark\" value=\"dark\" />\n    </ToggleButtonGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAQX,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,IAAM,EAAA,QAAA;AAAA,EACN,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAyB,CAAA;AAAA,IAC/C,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,OAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,OAAA,CAAQ,KAAkB,CAAA,CAAA;AAC1B,MAAA,QAAA,CAAS,KAAkB,CAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,UAAU,OAAO,CAAA;AAAA,GACpB,CAAA;AACA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EACE,uBAAA,IAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,QAAU,EAAA,qBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAa,YAAW,EAAA,OAAA,EAAQ,WAAU,EAAA,OAAA,EAAQ,OAAM,OAAQ,EAAA,CAAA;AAAA,4BAChE,YAAa,EAAA,EAAA,YAAA,EAAW,QAAO,WAAU,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAChE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ThemeSwitch.js","sources":["../../src/theme-switch/ThemeSwitch.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ToggleButton, ToggleButtonGroup, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, SyntheticEvent, useCallback } from \"react\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\n\nimport themeSwitchCss from \"./ThemeSwitch.css\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultMode?: ThemeMode;\n  mode?: ThemeMode;\n  onChange: (mode: ThemeMode) => void;\n}\n\nexport const ThemeSwitch = ({\n  className: classNameProp,\n  defaultMode: defaultModeProp,\n  mode: modeProp,\n  onChange,\n  ...htmlAttributes\n}: ThemeSwitchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-theme-switch\",\n    css: themeSwitchCss,\n    window: targetWindow,\n  });\n\n  const [mode, setMode] = useControlled<ThemeMode>({\n    controlled: modeProp,\n    default: defaultModeProp ?? \"light\",\n    name: \"ThemeSwitch\",\n    state: \"mode\",\n  });\n\n  const handleChangeSecondary = useCallback(\n    (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const { value } = evt.target as HTMLButtonElement;\n      setMode(value as ThemeMode);\n      onChange(value as ThemeMode);\n    },\n    [onChange, setMode]\n  );\n  const className = cx(classBase, classNameProp);\n  return (\n    <ToggleButtonGroup\n      className={className}\n      {...htmlAttributes}\n      onChange={handleChangeSecondary}\n      value={mode}\n    >\n      <ToggleButton aria-label=\"alert\" data-icon=\"light\" value=\"light\" />\n      <ToggleButton aria-label=\"home\" data-icon=\"dark\" value=\"dark\" />\n    </ToggleButtonGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAQX,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,IAAM,EAAA,QAAA;AAAA,EACN,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAyB,CAAA;AAAA,IAC/C,UAAY,EAAA,QAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,OAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,OAAA,CAAQ,KAAkB,CAAA,CAAA;AAC1B,MAAA,QAAA,CAAS,KAAkB,CAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,UAAU,OAAO,CAAA;AAAA,GACpB,CAAA;AACA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EACE,uBAAA,IAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACJ,QAAU,EAAA,qBAAA;AAAA,MACV,KAAO,EAAA,IAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAa,YAAW,EAAA,OAAA,EAAQ,WAAU,EAAA,OAAA,EAAQ,OAAM,OAAQ,EAAA,CAAA;AAAA,4BAChE,YAAa,EAAA,EAAA,YAAA,EAAW,QAAO,WAAU,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAChE,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,24 +1,24 @@
 {
-  "version": "0.8.43",
+  "version": "0.8.45",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.43",
-    "@vuu-ui/vuu-protocol-types": "0.8.43",
-    "@vuu-ui/vuu-table-types": "0.8.43"
+    "@vuu-ui/vuu-data-types": "0.8.45",
+    "@vuu-ui/vuu-protocol-types": "0.8.45",
+    "@vuu-ui/vuu-table-types": "0.8.45"
   },
   "dependencies": {
     "@salt-ds/core": "1.17.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-remote": "0.8.43",
-    "@vuu-ui/vuu-icons": "0.8.43",
-    "@vuu-ui/vuu-layout": "0.8.43",
-    "@vuu-ui/vuu-popups": "0.8.43",
-    "@vuu-ui/vuu-table": "0.8.43",
-    "@vuu-ui/vuu-ui-controls": "0.8.43",
-    "@vuu-ui/vuu-utils": "0.8.43",
+    "@vuu-ui/vuu-data-remote": "0.8.45",
+    "@vuu-ui/vuu-icons": "0.8.45",
+    "@vuu-ui/vuu-layout": "0.8.45",
+    "@vuu-ui/vuu-popups": "0.8.45",
+    "@vuu-ui/vuu-table": "0.8.45",
+    "@vuu-ui/vuu-ui-controls": "0.8.45",
+    "@vuu-ui/vuu-utils": "0.8.45",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {
@@ -33,8 +33,13 @@
     "cjs",
     "/types"
   ],
+  "exports": {
+    "require": "./cjs/index.js",
+    "import": "./esm/index.js"
+  },
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "name": "@vuu-ui/vuu-shell",
+  "type": "module",
   "types": "types/index.d.ts"
 }

package/types/connection-status/{ConnectionStatusIcon.d.ts → ConnectionStatusIndicator.d.ts}

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import "./ConnectionStatusIcon.css";
 type connectionStatus = "connected" | "reconnected" | "connecting" | "disconnected";
 interface ConnectionStatusProps {
     connectionStatus: connectionStatus;
@@ -7,5 +6,5 @@ interface ConnectionStatusProps {
     props?: unknown;
     element?: string;
 }
-export declare const ConnectionStatusIcon: ({ connectionStatus, className, element, ...props }: ConnectionStatusProps) => JSX.Element;
+export declare const ConnectionStatusIndicator: ({ connectionStatus, className, element, ...props }: ConnectionStatusProps) => JSX.Element;
 export {};

package/types/connection-status/index.d.ts

@@ -1 +1 @@
-export * from "./ConnectionStatusIcon";
+export * from "./ConnectionStatusIndicator";

package/types/layout-management/LayoutList.d.ts

@@ -1,3 +1,2 @@
 import { HTMLAttributes } from "react";
-import "./LayoutList.css";
 export declare const LayoutList: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/types/layout-management/LayoutTile.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LayoutMetadata } from "./layoutTypes";
-import "./LayoutTile.css";
 type LayoutTileProps = {
     metadata: LayoutMetadata;
     handleLoadLayout: (layoutId?: string) => void;

package/types/layout-management/SaveLayoutPanel.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LayoutMetadataDto } from "./layoutTypes";
-import "./SaveLayoutPanel.css";
 type SaveLayoutPanelProps = {
     componentId?: string;
     defaultTitle?: string;

package/types/left-nav/LeftNav.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
 import { FeatureProps } from "../feature";
-import "./LeftNav.css";
 export type NavDisplayStatus = "menu-full" | "menu-icons" | "menu-full-content" | "menu-icons-content";
 export type NavDisplayStatusHandler = (navDisplayStatus: NavDisplayStatus) => void;
 export interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {

package/types/login/LoginPanel.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./LoginPanel.css";
 export interface LoginPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
     appName?: string;
     onSubmit: (username: string, password?: string) => void;

package/types/session-editing-form/SessionEditingForm.d.ts

@@ -1,7 +1,6 @@
 import { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
 import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
 import { HTMLAttributes } from "react";
-import "./SessionEditingForm.css";
 export type FormFieldDescriptor = {
     isKeyField?: boolean;
     label?: string;

package/types/shell-layouts/context-panel/ContextPanel.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { LayoutJSON } from "@vuu-ui/vuu-layout";
-import "./ContextPanel.css";
 export interface ContextPanelProps {
     [key: string]: unknown;
     className?: string;

package/types/shell-layouts/side-panel/SidePanel.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./SidePanel.css";
 export interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     path?: string;

package/types/theme-switch/ThemeSwitch.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
 import { ThemeMode } from "@vuu-ui/vuu-utils";
-import "./ThemeSwitch.css";
 export interface ThemeSwitchProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     defaultMode?: ThemeMode;
     mode?: ThemeMode;

package/cjs/connection-status/ConnectionStatusIcon.css

@@ -1,68 +0,0 @@
-.vuuStatus-container {
-	display: flex;
-}
-
-.vuuStatus-text {
-	align-self: center;
-}
-
-
-.vuuStatus {
-	--vuu-icon-height: 18px;
-	--vuu-icon-padding: var(--vuuStatus-padding, 6px);
-	--vuu-icon-width: var(--vuuStatus-width, auto);
-	--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
-	align-items: center;
-	display: inline-flex;
-	height: var(--vuu-icon-height);
-	justify-content: center;
-	min-width: var(--vuu-icon-min-width);
-	padding: 0 var(--vuu-icon-padding);
-	width: var(--vuu-icon-width);
-	position: relative;
-}
-
-.vuuStatus[data-icon]::after {
-	inset: 0 0 0 0;
-	content: '';
-	box-shadow: 0 0 0 0 black;
-	position: absolute;
-	mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
-	-webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
-}
-
-.vuuActiveStatus::after {
-	--vuu-icon-svg: var(--svg-active-status);
-	background-color: rgb(0, 255, 0);
-}
-
-.vuuConnectingStatus::after {
-	--vuu-icon-svg: var(--svg-connecting-status);
-	background-color: orange;
-	transform: scale(1);
-	animation: infinite pulse 1s;
-}
-
-.vuuDisconnectedStatus::after {
-	--vuu-icon-svg: var(--svg-disconnected-status);
-	background-color: red;
-	transform: scale(1);
-	animation: infinite pulse 0.5s;
-}
-
-@keyframes pulse {
-	0% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
-	}
-
-	70% {
-		transform: scale(1);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-	}
-
-	100% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-	}
-}

package/cjs/connection-status/ConnectionStatusIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConnectionStatusIcon.js","sources":["../../src/connection-status/ConnectionStatusIcon.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./ConnectionStatusIcon.css\";\n\ntype connectionStatus =\n  | \"connected\"\n  | \"reconnected\"\n  | \"connecting\"\n  | \"disconnected\";\n\ninterface ConnectionStatusProps {\n  connectionStatus: connectionStatus;\n  className?: string;\n  props?: unknown;\n  element?: string;\n}\n\nexport const ConnectionStatusIcon = ({\n  connectionStatus,\n  className,\n  element = \"span\",\n  ...props\n}: ConnectionStatusProps) => {\n  const [classBase, setClassBase] = useState<string>(\"vuuConnectingStatus\");\n  useEffect(() => {\n    switch (connectionStatus) {\n      case \"connected\":\n      case \"reconnected\":\n        setClassBase(\"vuuActiveStatus\");\n        break;\n      case \"connecting\":\n        setClassBase(\"vuuConnectingStatus\");\n        break;\n      case \"disconnected\":\n        setClassBase(\"vuuDisconnectedStatus\");\n        break;\n      default:\n        break;\n    }\n  }, [connectionStatus]);\n\n  const statusIcon = React.createElement(element, {\n    ...props,\n    className: cx(\"vuuStatus vuuIcon\", classBase, className),\n  });\n\n  return (\n    <>\n      <div className=\"vuuStatus-container salt-theme\">\n        {statusIcon}\n        <div className=\"vuuStatus-text\">\n          Status: {connectionStatus.toUpperCase()}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useState","useEffect","jsx","Fragment","jsxs"],"mappings":";;;;;;AAkBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,GAAG,KAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAiB,qBAAqB,CAAA,CAAA;AACxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,QAAQ,gBAAkB;AAAA,MACxB,KAAK,WAAA,CAAA;AAAA,MACL,KAAK,aAAA;AACH,QAAA,YAAA,CAAa,iBAAiB,CAAA,CAAA;AAC9B,QAAA,MAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,YAAA,CAAa,qBAAqB,CAAA,CAAA;AAClC,QAAA,MAAA;AAAA,MACF,KAAK,cAAA;AACH,QAAA,YAAA,CAAa,uBAAuB,CAAA,CAAA;AACpC,QAAA,MAAA;AAEA,KACJ;AAAA,GACF,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,UAAA,GAAa,KAAM,CAAA,aAAA,CAAc,OAAS,EAAA;AAAA,IAC9C,GAAG,KAAA;AAAA,IACH,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,GACxD,CAAA,CAAA;AAED,EAAA,uBAEIC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,kBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gCACZ,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA;AAAA,oBACDA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBAAiB,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MACrB,iBAAiB,WAAY,EAAA;AAAA,KACxC,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/layout-management/LayoutList.css

@@ -1,86 +0,0 @@
-.vuuLayoutList {
-    --vuuLayoutList-width: 90%;
-    --vuuMeasuredContainer-flex: 1 1 1px;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    padding-right: 6px;
-
-    /* compatible with Chrome, Edge, and Safari */
-    ::-webkit-scrollbar {
-        width: 4px;
-        height: 4px;
-    }
-
-    ::-webkit-scrollbar-track {
-        background: transparent;
-        margin-top: 15px;
-        margin-bottom: 15px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        border-radius: 4px;
-        background: #D9D9D9;
-    }
-}
-
-.vuuLayoutList-header {
-    display: flex;
-    flex: 0 0 47px;
-    width: var(--vuuLayoutList-width);
-    padding: 16px 0;
-    border-bottom: 1px solid rgba(119, 124, 148, 0.10);
-    color: var(--light-text-primary, #15171B);
-    font-weight: 700;
-    letter-spacing: 0.48px;
-    line-height: 200%;
-    text-transform: uppercase;
-}
-
-.vuuLayoutList-groupName {
-    display: flex;
-    padding-top: 24px;
-    width: var(--vuuLayoutList-width);
-    color: var(--light-text-secondary, #606477);
-    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
-    font-family: Nunito Sans;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 200%;
-    letter-spacing: 0.48px;
-    text-transform: uppercase;
-}
-
-.vuuLayoutList-layoutContainer {
-    display: flex;
-    align-items: center;
-    width: 90%;
-    height: auto;
-    gap: 8px;
-    padding: 8px 0;
-    flex: 1 1 auto;
-    cursor: pointer;
-}
-
-.vuuLayoutList-layoutName {
-    color: var(--light-text-primary, #15171B);
-    font-weight: 600;
-    line-height: 133.333%;
-    text-transform: capitalize;
-}
-
-.vuuLayoutList-screenshot {
-    width: 60px;
-    height: 45.6px;
-    border: 1px solid #D6D7DA;
-}
-
-.vuuLayoutList-layoutDetails {
-    color: var(--light-text-secondary, #606477);
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 150%;
-}

package/cjs/layout-management/LayoutTile.css

@@ -1,28 +0,0 @@
-.vuuLayoutTile-layoutTile {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0px;
-  flex: 1 1 auto;
-  cursor: pointer;
-}
-
-.vuuLayoutTile-layoutName {
-  color: var(--light-text-primary, #15171B);
-  font-weight: 600;
-  line-height: 133.333%;
-  text-transform: capitalize;
-}
-
-.vuuLayoutTile-screenshot {
-  width: 60px;
-  height: 45.6px;
-  border: 1px solid #D6D7DA;
-}
-
-.vuuLayoutTile-layoutDetails {
-  color: var(--light-text-secondary, #606477);
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 150%;
-}

package/cjs/layout-management/SaveLayoutPanel.css

@@ -1,130 +0,0 @@
-.saveLayoutPanel {
-  --salt-selectable-foreground-hover: #6d18bdc3;
-  --salt-selectable-foreground-selected: #6D18BD;
-  --salt-selectable-borderColor-selected: #6D18BD;
-  --saltInputLegacy-fontSize: 12px;
-  --salt-text-label-fontSize: 10px;
-  --saltFormFieldLegacy-label-paddingLeft: 0;
-  --saltFormField-label-fontWeight: 400;
-  --saltText-color: var(--text-secondary-foreground, #606477);
-}
-
-.spinner{
-  width: 100px;
-  height:100px;
-  background-image: var(--svg-spinner);
-}
-
-.saveLayoutPanel-panelContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.saveLayoutPanel-panelContent {
-  display: flex;
-  align-items: flex-start;
-  gap: 32px;
-}
-
-.saveLayoutPanel-formContainer {
-  display: flex;
-  width: 217px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-.saveLayoutPanel-formField {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.saveLayoutPanel-inputText {
-  border: none;
-  color: var(--light-text-primary, #15171B);
-  font-family: Nunito Sans A-Variant, serif;
-  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  padding-left: 4px;
-  width: 100%;
-  outline: none;
-}
-
-.saveLayoutPanel-settingsGroup {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 10px;
-  width: 100%;
-  line-height: 16px;
-}
-
-.saveLayoutPanel-screenshotContainer {
-  display: flex;
-  width: 304px;
-  height: 208px;
-  padding: 11px 15.5px;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #E8E8E8;
-  background: var(--dark-text-primary, #FFF);
-}
-
-.saveLayoutPanel-screenshot {
-  background: lightgray 50% / cover no-repeat;
-  width: 273px;
-  height: 186px;
-}
-
-.saveLayoutPanel-buttonsContainer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  align-self: stretch;
-  padding-top: 24px;
-  gap: 8px;
-}
-
-.saveLayoutPanel-cancelButton,
-.saveLayoutPanel-saveButton {
-  display: flex;
-  height: fit-content;
-  padding: 4px 8px;
-  align-items: flex-start;
-  gap: 8px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 133.333%;
-  letter-spacing: 0.48px;
-  text-transform: uppercase;
-}
-
-.saveLayoutPanel-cancelButton {
-  color: var(--actionable-primary-foreground-default, #606477);
-  background: var(--actionable-primary-background-default, #FFF);
-}
-
-.saveLayoutPanel-saveButton {
-  background: #6D18BD;
-  border-color: #6D18BD;
-  color: white;
-}
-
-.saveLayoutPanel-saveButton.saltButton:disabled {
-  background: #6D18BD;
-  border-color: #6D18BD;
-  color: white;
-  opacity: 0.3;
-}
-
-.saveLayoutPanel-saveButton.saltButton:hover {
-  background: #F37880;
-  border-color: #F37880;
-  color: white;
-}