@xyo-network/react-appbar 7.6.2 → 8.0.0

package/dist/browser/components/CollapsibleDrawer/CollapseToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2BrD,CAAA"}
+{"version":3,"file":"CollapseToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/CollapsibleDrawer/CollapseToggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqCrD,CAAA"}

package/dist/browser/components/MobileSystemControls/controls/SystemControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemControl.d.ts","sourceRoot":"","sources":["../../../../../src/components/MobileSystemControls/controls/SystemControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAE7D,UAAU,kBAAmB,SAAQ,YAAY;IAC/C,cAAc,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CA6BlE,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"SystemControl.d.ts","sourceRoot":"","sources":["../../../../../src/components/MobileSystemControls/controls/SystemControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAE7D,UAAU,kBAAmB,SAAQ,YAAY;IAC/C,cAAc,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAgClE,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/browser/components/MobileSystemControls/controls/SystemControlText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/MobileSystemControls/controls/SystemControlText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,sBAAuB,SAAQ,YAAY;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAQjD,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"SystemControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/MobileSystemControls/controls/SystemControlText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,UAAU,sBAAuB,SAAQ,YAAY;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAYjD,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/browser/components/SearchBar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2C9C,CAAA"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8C9C,CAAA"}

package/dist/browser/components/Toolbar/Context/LogoLinkEx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogoLinkEx.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Context/LogoLinkEx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8BhD,CAAA"}
+{"version":3,"file":"LogoLinkEx.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Context/LogoLinkEx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgChD,CAAA"}

package/dist/browser/index.mjs

@@ -28,21 +28,23 @@ var LogoLinkEx = ({
 }) => {
   const theme = useTheme();
   assertEx(href === void 0, () => "href is not supported");
-  return /* @__PURE__ */ jsx2(LinkEx, { to, sx: { "opacity": 0.8, "&:hover": { opacity: 1 } }, ...props, children: /* @__PURE__ */ jsxs(FlexRow, { paddingX: "4px", children: [
+  return /* @__PURE__ */ jsx2(LinkEx, { to, sx: { "opacity": 0.8, "&:hover": { opacity: 1 } }, ...props, children: /* @__PURE__ */ jsxs(FlexRow, { sx: { paddingX: "4px" }, children: [
     logo ?? /* @__PURE__ */ jsx2(Logo, { height: "40", width: "43" }),
     version === void 0 ? null : /* @__PURE__ */ jsx2(
       Typography,
       {
-        position: "absolute",
-        borderRadius: 1,
-        right: 6,
         color: theme.vars.palette.primary.main,
-        bottom: 0,
-        bgcolor: theme.vars.palette.primary.contrastText,
-        paddingX: "2px",
-        lineHeight: 1,
         variant: "caption",
-        border: `1px ${theme.vars.palette.primary.main} solid`,
+        sx: {
+          position: "absolute",
+          borderRadius: 1,
+          right: 6,
+          bottom: 0,
+          bgcolor: theme.vars.palette.primary.contrastText,
+          paddingX: "2px",
+          lineHeight: 1,
+          border: `1px ${theme.vars.palette.primary.main} solid`
+        },
         children: typeof version === "string" ? version : "2.1"
       }
     )
@@ -81,7 +83,7 @@ var XyoSystemToolbar = ({
 }) => {
   return /* @__PURE__ */ jsxs3(SystemToolbar, { ...props, children: [
     precedingChildren,
-    hideNetworkSelect ? null : /* @__PURE__ */ jsx4(FlexRow2, { marginX: 0.5, children: /* @__PURE__ */ jsx4(Paper, { variant: "elevation", children: /* @__PURE__ */ jsx4(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) }),
+    hideNetworkSelect ? null : /* @__PURE__ */ jsx4(FlexRow2, { sx: { marginX: 0.5 }, children: /* @__PURE__ */ jsx4(Paper, { variant: "elevation", children: /* @__PURE__ */ jsx4(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) }),
     children
   ] });
 };
@@ -125,17 +127,31 @@ var CollapseToggleFlex = (props) => {
     setCollapse?.(!collapse);
     setCollapseEnd?.((previous) => previous ? false : previous);
   };
-  return /* @__PURE__ */ jsx6(FlexRow3, { mt: 2, py: 2, justifyContent: collapse ? "start" : "center", ...props, children: /* @__PURE__ */ jsx6(
-    Icon,
+  return /* @__PURE__ */ jsx6(
+    FlexRow3,
     {
-      onClick: handleCollapseToggle,
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      fontSize: "large",
-      sx: { color: hover ? theme.vars.palette.secondary.main : "inherit", cursor: "pointer" },
-      children: collapse ? /* @__PURE__ */ jsx6(VscArrowSmallRight, {}) : /* @__PURE__ */ jsx6(VscArrowSmallLeft, {})
+      ...props,
+      sx: [{
+        mt: 2,
+        py: 2,
+        justifyContent: collapse ? "start" : "center"
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: /* @__PURE__ */ jsx6(
+        Icon,
+        {
+          onClick: handleCollapseToggle,
+          onMouseEnter: () => setHover(true),
+          onMouseLeave: () => setHover(false),
+          sx: {
+            fontSize: "large",
+            color: hover ? theme.vars.palette.secondary.main : "inherit",
+            cursor: "pointer"
+          },
+          children: collapse ? /* @__PURE__ */ jsx6(VscArrowSmallRight, {}) : /* @__PURE__ */ jsx6(VscArrowSmallLeft, {})
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/components/CollapsibleDrawer/CollapsibleDrawer.tsx
@@ -218,7 +234,14 @@ var SystemControl = ({
     }
   }
   return /* @__PURE__ */ jsxs4(FlexRow4, { className: "controls", ...props, children: [
-    /* @__PURE__ */ jsx8(Collapse2, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ jsx8(FlexRow4, { bgcolor: "primary.main", className: "control", children: controlElement }) }),
+    /* @__PURE__ */ jsx8(Collapse2, { in: toggleControls, orientation, timeout: 500, children: /* @__PURE__ */ jsx8(
+      FlexRow4,
+      {
+        className: "control",
+        sx: { bgcolor: "primary.main" },
+        children: controlElement
+      }
+    ) }),
     /* @__PURE__ */ jsx8(FlexCol, { style: { cursor: "pointer" }, onClick: () => setToggleControls(!toggleControls), children })
   ] });
 };
@@ -311,53 +334,60 @@ var SearchBar = ({
   ...props
 }) => {
   const [term, setTerm] = useState3();
-  return /* @__PURE__ */ jsx11(FlexRow6, { alignItems: "stretch", ...props, children: /* @__PURE__ */ jsxs5(
-    Paper3,
+  return /* @__PURE__ */ jsx11(
+    FlexRow6,
     {
-      variant: "elevation",
-      elevation: 0,
-      style: {
-        display: "flex",
-        overflow: "hidden",
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsx11(
-          TextField,
-          {
-            variant: "outlined",
-            size: "small",
-            defaultValue,
-            fullWidth: true,
-            onChange: (event) => setTerm(event.target.value),
-            onKeyDown: (event) => {
-              if (event.key === "Enter") onSearch?.(term);
-            },
-            slotProps: {
-              input: {
-                color: "secondary",
-                style: {
-                  borderBottomRightRadius: 0,
-                  borderTopRightRadius: 0,
-                  borderWidth: 0
+      ...props,
+      sx: [{ alignItems: "stretch" }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: /* @__PURE__ */ jsxs5(
+        Paper3,
+        {
+          variant: "elevation",
+          elevation: 0,
+          style: {
+            display: "flex",
+            overflow: "hidden",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx11(
+              TextField,
+              {
+                variant: "outlined",
+                size: "small",
+                defaultValue,
+                fullWidth: true,
+                onChange: (event) => setTerm(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") onSearch?.(term);
+                },
+                slotProps: {
+                  input: {
+                    color: "secondary",
+                    style: {
+                      borderBottomRightRadius: 0,
+                      borderTopRightRadius: 0,
+                      borderWidth: 0
+                    }
+                  }
                 }
               }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx11(
-          ButtonEx,
-          {
-            variant: "contained",
-            style: { borderRadius: 0, borderTopLeftRadius: 0 },
-            color: "secondary",
-            onClick: () => onSearch?.(term),
-            children: /* @__PURE__ */ jsx11(SearchIcon, {})
-          }
-        )
-      ]
+            ),
+            /* @__PURE__ */ jsx11(
+              ButtonEx,
+              {
+                variant: "contained",
+                style: { borderRadius: 0, borderTopLeftRadius: 0 },
+                onClick: () => onSearch?.(term),
+                sx: { color: "secondary" },
+                children: /* @__PURE__ */ jsx11(SearchIcon, {})
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   CollapseToggleFlex,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/AppBar/Application.tsx","../../src/components/Toolbar/Context/ContextToolbar.tsx","../../src/components/Toolbar/Context/LogoLinkEx.tsx","../../src/components/Toolbar/Context/Logo.tsx","../../src/components/Toolbar/System/SystemToolbar.tsx","../../src/components/CollapsibleDrawer/CollapseToggle.tsx","../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx","../../src/components/MobileSystemControls/SystemControls.tsx","../../src/components/MobileSystemControls/SystemControlsRoot.tsx","../../src/components/MobileSystemControls/SystemControlsType.ts","../../src/components/MobileSystemControls/SystemControlsUnstyled.tsx","../../src/components/MobileSystemControls/controls/SystemControl.tsx","../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import type { ToolbarProps } from '@mui/material'\nimport type { ApplicationAppBarProps } from '@xylabs/react-appbar'\nimport { ApplicationAppBar } from '@xylabs/react-appbar'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport { XyoContextToolbar, XyoSystemToolbar } from '../Toolbar/index.ts'\n\nexport interface XyoApplicationAppBarProps extends ApplicationAppBarProps {\n  contextToolbar?: ReactElement<ToolbarProps>\n  responsive?: boolean\n  systemToolbar?: ReactElement<ToolbarProps>\n}\n\nexport const XyoApplicationAppBar: React.FC<XyoApplicationAppBarProps> = ({\n  systemToolbar, contextToolbar, responsive = true, ...props\n}) => {\n  return (\n    <ApplicationAppBar\n      systemToolbar={systemToolbar ?? <XyoSystemToolbar />}\n      contextToolbar={contextToolbar ?? <XyoContextToolbar />}\n      position=\"sticky\"\n      responsive={responsive}\n      {...props}\n    />\n  )\n}\n","import { Toolbar } from '@mui/material'\nimport type { ContextToolbarProps } from '@xylabs/react-appbar'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { LogoLinkEx } from './LogoLinkEx.tsx'\n\nexport interface XyoContextToolbarProps extends ContextToolbarProps {\n  logo?: ReactNode\n}\n\nexport const XyoContextToolbar: React.FC<XyoContextToolbarProps> = ({\n  children, logo, logoTo = '/', version = false, ...props\n}) => {\n  return (\n    <Toolbar {...props}>\n      <LogoLinkEx logo={logo} version={version} to={logoTo} />\n      {children}\n    </Toolbar>\n  )\n}\n","import { Typography, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { assertEx } from '@xylabs/sdk-js'\nimport React from 'react'\n\nimport { Logo } from './Logo.tsx'\n\nexport type LogoLinkExProps = LinkExProps & {\n  logo?: React.ReactNode\n  version?: boolean | string\n}\n\nexport const LogoLinkEx: React.FC<LogoLinkExProps> = ({\n  logo, to = '/', href, version = false, ...props\n}) => {\n  const theme = useTheme()\n  assertEx(href === undefined, () => 'href is not supported')\n  return (\n    <LinkEx to={to} sx={{ 'opacity': 0.8, '&:hover': { opacity: 1 } }} {...props}>\n      <FlexRow paddingX=\"4px\">\n        {logo ?? <Logo height=\"40\" width=\"43\" />}\n        {version === undefined\n          ? null\n          : (\n              <Typography\n                position=\"absolute\"\n                borderRadius={1}\n                right={6}\n                color={theme.vars.palette.primary.main}\n                bottom={0}\n                bgcolor={theme.vars.palette.primary.contrastText}\n                paddingX=\"2px\"\n                lineHeight={1}\n                variant=\"caption\"\n                border={`1px ${theme.vars.palette.primary.main} solid`}\n              >\n                {typeof version === 'string' ? version : '2.1'}\n              </Typography>\n            )}\n      </FlexRow>\n    </LinkEx>\n  )\n}\n","import React from 'react'\n\nexport const Logo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {\n  const logoUrl\n    = 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'\n  return <img src={logoUrl} {...props} />\n}\n","import { Paper } from '@mui/material'\nimport {\n  type SiteMenuProps, SystemToolbar, type SystemToolbarProps,\n} from '@xylabs/react-appbar'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { NetworkSelectExProps } from '@xyo-network/react-network'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport interface XyoSystemToolbarProps extends SystemToolbarProps {\n  darkModeButton?: boolean\n  developerMode?: boolean\n  hideNetworkSelect?: boolean\n  menuItems?: ReactNode\n  networkSelectProps?: NetworkSelectExProps\n  onMenuToggle?: SiteMenuProps['onMenuToggle']\n  precedingChildren?: ReactNode\n}\n\nexport const XyoSystemToolbar: React.FC<XyoSystemToolbarProps> = ({\n  children,\n  hideNetworkSelect,\n  networkSelectProps,\n  precedingChildren,\n  ...props\n}) => {\n  return (\n    <SystemToolbar {...props}>\n      {precedingChildren}\n      {hideNetworkSelect\n        ? null\n        : (\n            <FlexRow marginX={0.5}>\n              <Paper variant=\"elevation\">\n                <NetworkSelectEx fullWidth {...networkSelectProps} />\n              </Paper>\n            </FlexRow>\n          )}\n      {children}\n    </SystemToolbar>\n  )\n}\n","import { Icon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useCollapsible } from '@xylabs/react-shared'\nimport React, { useState } from 'react'\nimport { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'\n\nexport const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {\n  const {\n    collapse, setCollapse, setCollapseEnd,\n  } = useCollapsible()\n  const [hover, setHover] = useState(false)\n  const theme = useTheme()\n\n  const handleCollapseToggle = () => {\n    setCollapse?.(!collapse)\n    setCollapseEnd?.(previous => (previous ? false : previous))\n  }\n\n  return (\n    <FlexRow mt={2} py={2} justifyContent={collapse ? 'start' : 'center'} {...props}>\n      <Icon\n        onClick={handleCollapseToggle}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        fontSize=\"large\"\n        sx={{ color: hover ? theme.vars.palette.secondary.main : 'inherit', cursor: 'pointer' }}\n      >\n        {collapse\n          ? <VscArrowSmallRight />\n          : <VscArrowSmallLeft />}\n      </Icon>\n    </FlexRow>\n  )\n}\n","import type { CollapseProps } from '@mui/material'\nimport {\n  Collapse, styled, useTheme,\n} from '@mui/material'\nimport { useCollapsible } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nexport const CollapsibleDrawer: React.FC<PropsWithChildren<CollapseProps>> = ({\n  children, sx, ...props\n}) => {\n  const { collapse, setCollapseEnd } = useCollapsible()\n  const theme = useTheme()\n\n  const collapsedSize = props.collapsedSize ?? theme.spacing(5)\n\n  return (\n    <CollapsibleFlexInner\n      in={!collapse}\n      orientation=\"horizontal\"\n      collapsedSize={collapsedSize}\n      onExited={() => setCollapseEnd?.(true)}\n      sx={{\n        alignItems: 'start',\n        display: 'flex',\n        height: '100%',\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </CollapsibleFlexInner>\n  )\n}\n\nconst CollapsibleFlexInner = styled(Collapse)(() => ({\n  '& .MuiCollapse-wrapperInner': {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}))\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport { SystemControlsRoot } from './SystemControlsRoot.tsx'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\n\nconst SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {\n  return (\n    <FlexCol>\n      <SystemControlsRoot {...props} />\n    </FlexCol>\n  )\n}\n\nexport { SystemControls }\n","import { styled } from '@mui/material'\nimport type React from 'react'\n\nimport { SystemControlsType } from './SystemControlsType.ts'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\nimport { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'\n\nconst SystemControlsRoot: React.FC<SystemControlsUnstyledProps> = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({\n  // shared defaults\n  ['&']: {\n    '.toggle': { backgroundColor: theme.vars.palette.primary.main },\n    'alignItems': 'start',\n    'zIndex': 1,\n  },\n  // WindowShade System Controls styles\n  [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {\n    '.control': {\n      borderRadius: '0 0 5px 5px',\n      flexDirection: 'row',\n      flexGrow: 1,\n      justifyContent: 'space-around',\n      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n    },\n    '.controls': {\n      alignItems: 'stretch',\n      flexDirection: 'column',\n      flexGrow: 1,\n    },\n    '.toggle': {\n      borderRadius: '0 0 5px 5px',\n      padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,\n    },\n    'flexDirection': 'row',\n    'position': 'absolute',\n    'top': 0,\n    'width': '100%',\n  },\n  // Left System Control styles\n  [`&.system-controls-type-${SystemControlsType.Left}`]: {\n    '.control': {\n      alignItems: 'start',\n      flexDirection: 'column',\n      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n    },\n    '.control-wrap': { marginBottom: `${theme.spacing(2)}` },\n    '.toggle': {\n      borderRadius: '0 5px 5px 0',\n      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,\n      writingMode: 'vertical-rl',\n    },\n    'flexDirection': 'column',\n    'left': 0,\n    'position': 'fixed',\n    'top': '30vh',\n    'width': 'auto',\n  },\n}))\n\nexport { SystemControlsRoot }\n","import type { EnumValue } from '@xylabs/sdk-js'\nimport { Enum } from '@xylabs/sdk-js'\n\nexport const SystemControlsType = Enum({\n  Left: 'Left',\n  Right: 'Right',\n  WindowShade: 'WindowShade',\n})\n\nexport type SystemControlsType = EnumValue<typeof SystemControlsType>\n","import type { Theme } from '@mui/material'\nimport { Paper, useMediaQuery } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport React from 'react'\n\nimport { SystemControl } from './controls/index.ts'\nimport { SystemControlsType } from './SystemControlsType.ts'\n\ninterface SystemControlsUnstyledProps extends FlexBoxProps {\n  systemControlsType?: SystemControlsType\n  visible?: boolean\n}\n\nconst SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({\n  visible,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'))\n\n  return visible || isSmall\n    ? (\n        <FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>\n          <SystemControl\n            systemControlsType={systemControlsType}\n            controlElement={(\n              <FlexRow className=\"control-wrap\">\n                <Paper variant=\"elevation\" elevation={0}>\n                  <NetworkSelectEx responsive={false} className=\"network-ex\" />\n                </Paper>\n              </FlexRow>\n            )}\n          />\n        </FlexCol>\n      )\n    : <FlexCol />\n}\n\nexport type { SystemControlsUnstyledProps }\nexport { SystemControlsUnstyled }\n","import type { CollapseProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, { useState } from 'react'\n\nimport { SystemControlsType } from '../SystemControlsType.ts'\n\ninterface SystemControlProps extends FlexBoxProps {\n  controlElement: React.ReactNode\n  systemControlsType?: SystemControlsType\n}\n\nconst SystemControl: React.FC<PropsWithChildren<SystemControlProps>> = ({\n  children,\n  controlElement,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const [toggleControls, setToggleControls] = useState(false)\n\n  let orientation: CollapseProps['orientation'] = 'vertical'\n\n  switch (systemControlsType) {\n    case SystemControlsType.Left: {\n      orientation = 'horizontal'\n      break\n    }\n  }\n\n  return (\n    <FlexRow className=\"controls\" {...props}>\n      <Collapse in={toggleControls} orientation={orientation} timeout={500}>\n        <FlexRow bgcolor=\"primary.main\" className=\"control\">\n          {controlElement}\n        </FlexRow>\n      </Collapse>\n      <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>\n        {children}\n      </FlexCol>\n    </FlexRow>\n  )\n}\n\nexport { SystemControl }\n","import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n  onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({\n  defaultValue, onSearch, ...props\n}) => {\n  const [term, setTerm] = useState<string>()\n\n  return (\n    <FlexRow alignItems=\"stretch\" {...props}>\n      <Paper\n        variant=\"elevation\"\n        elevation={0}\n        style={{\n          display: 'flex', overflow: 'hidden', width: '100%',\n        }}\n      >\n        <TextField\n          variant=\"outlined\"\n          size=\"small\"\n          defaultValue={defaultValue}\n          fullWidth\n          onChange={event => setTerm(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') onSearch?.(term)\n          }}\n          slotProps={{\n            input: {\n              color: 'secondary',\n              style: {\n                borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,\n              },\n            },\n          }}\n        />\n        <ButtonEx\n          variant=\"contained\"\n          style={{ borderRadius: 0, borderTopLeftRadius: 0 }}\n          color=\"secondary\"\n          onClick={() => onSearch?.(term)}\n        >\n          <SearchIcon />\n        </ButtonEx>\n      </Paper>\n    </FlexRow>\n  )\n}\n"],"mappings":"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","names":["jsx","jsx","jsxs","FlexRow","jsx","jsxs","jsx","useTheme","FlexRow","jsx","useTheme","useCollapsible","jsx","FlexCol","styled","Paper","FlexCol","FlexRow","NetworkSelectEx","Collapse","FlexRow","useState","jsx","jsxs","useState","FlexRow","Collapse","jsx","FlexCol","FlexRow","Paper","NetworkSelectEx","styled","jsx","FlexCol","Paper","FlexRow","useState","jsx","jsxs"]}
+{"version":3,"sources":["../../src/components/AppBar/Application.tsx","../../src/components/Toolbar/Context/ContextToolbar.tsx","../../src/components/Toolbar/Context/LogoLinkEx.tsx","../../src/components/Toolbar/Context/Logo.tsx","../../src/components/Toolbar/System/SystemToolbar.tsx","../../src/components/CollapsibleDrawer/CollapseToggle.tsx","../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx","../../src/components/MobileSystemControls/SystemControls.tsx","../../src/components/MobileSystemControls/SystemControlsRoot.tsx","../../src/components/MobileSystemControls/SystemControlsType.ts","../../src/components/MobileSystemControls/SystemControlsUnstyled.tsx","../../src/components/MobileSystemControls/controls/SystemControl.tsx","../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import type { ToolbarProps } from '@mui/material'\nimport type { ApplicationAppBarProps } from '@xylabs/react-appbar'\nimport { ApplicationAppBar } from '@xylabs/react-appbar'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport { XyoContextToolbar, XyoSystemToolbar } from '../Toolbar/index.ts'\n\nexport interface XyoApplicationAppBarProps extends ApplicationAppBarProps {\n  contextToolbar?: ReactElement<ToolbarProps>\n  responsive?: boolean\n  systemToolbar?: ReactElement<ToolbarProps>\n}\n\nexport const XyoApplicationAppBar: React.FC<XyoApplicationAppBarProps> = ({\n  systemToolbar, contextToolbar, responsive = true, ...props\n}) => {\n  return (\n    <ApplicationAppBar\n      systemToolbar={systemToolbar ?? <XyoSystemToolbar />}\n      contextToolbar={contextToolbar ?? <XyoContextToolbar />}\n      position=\"sticky\"\n      responsive={responsive}\n      {...props}\n    />\n  )\n}\n","import { Toolbar } from '@mui/material'\nimport type { ContextToolbarProps } from '@xylabs/react-appbar'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { LogoLinkEx } from './LogoLinkEx.tsx'\n\nexport interface XyoContextToolbarProps extends ContextToolbarProps {\n  logo?: ReactNode\n}\n\nexport const XyoContextToolbar: React.FC<XyoContextToolbarProps> = ({\n  children, logo, logoTo = '/', version = false, ...props\n}) => {\n  return (\n    <Toolbar {...props}>\n      <LogoLinkEx logo={logo} version={version} to={logoTo} />\n      {children}\n    </Toolbar>\n  )\n}\n","import { Typography, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { assertEx } from '@xylabs/sdk-js'\nimport React from 'react'\n\nimport { Logo } from './Logo.tsx'\n\nexport type LogoLinkExProps = LinkExProps & {\n  logo?: React.ReactNode\n  version?: boolean | string\n}\n\nexport const LogoLinkEx: React.FC<LogoLinkExProps> = ({\n  logo, to = '/', href, version = false, ...props\n}) => {\n  const theme = useTheme()\n  assertEx(href === undefined, () => 'href is not supported')\n  return (\n    <LinkEx to={to} sx={{ 'opacity': 0.8, '&:hover': { opacity: 1 } }} {...props}>\n      <FlexRow sx={{ paddingX: '4px' }}>\n        {logo ?? <Logo height=\"40\" width=\"43\" />}\n        {version === undefined\n          ? null\n          : (\n              <Typography\n                color={theme.vars.palette.primary.main}\n                variant=\"caption\"\n                sx={{\n                  position: 'absolute',\n                  borderRadius: 1,\n                  right: 6,\n                  bottom: 0,\n                  bgcolor: theme.vars.palette.primary.contrastText,\n                  paddingX: '2px',\n                  lineHeight: 1,\n                  border: `1px ${theme.vars.palette.primary.main} solid`,\n                }}\n              >\n                {typeof version === 'string' ? version : '2.1'}\n              </Typography>\n            )}\n      </FlexRow>\n    </LinkEx>\n  )\n}\n","import React from 'react'\n\nexport const Logo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {\n  const logoUrl\n    = 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'\n  return <img src={logoUrl} {...props} />\n}\n","import { Paper } from '@mui/material'\nimport {\n  type SiteMenuProps, SystemToolbar, type SystemToolbarProps,\n} from '@xylabs/react-appbar'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { NetworkSelectExProps } from '@xyo-network/react-network'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport interface XyoSystemToolbarProps extends SystemToolbarProps {\n  darkModeButton?: boolean\n  developerMode?: boolean\n  hideNetworkSelect?: boolean\n  menuItems?: ReactNode\n  networkSelectProps?: NetworkSelectExProps\n  onMenuToggle?: SiteMenuProps['onMenuToggle']\n  precedingChildren?: ReactNode\n}\n\nexport const XyoSystemToolbar: React.FC<XyoSystemToolbarProps> = ({\n  children,\n  hideNetworkSelect,\n  networkSelectProps,\n  precedingChildren,\n  ...props\n}) => {\n  return (\n    <SystemToolbar {...props}>\n      {precedingChildren}\n      {hideNetworkSelect\n        ? null\n        : (\n            <FlexRow sx={{ marginX: 0.5 }}>\n              <Paper variant=\"elevation\">\n                <NetworkSelectEx fullWidth {...networkSelectProps} />\n              </Paper>\n            </FlexRow>\n          )}\n      {children}\n    </SystemToolbar>\n  )\n}\n","import { Icon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useCollapsible } from '@xylabs/react-shared'\nimport React, { useState } from 'react'\nimport { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'\n\nexport const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {\n  const {\n    collapse, setCollapse, setCollapseEnd,\n  } = useCollapsible()\n  const [hover, setHover] = useState(false)\n  const theme = useTheme()\n\n  const handleCollapseToggle = () => {\n    setCollapse?.(!collapse)\n    setCollapseEnd?.(previous => (previous ? false : previous))\n  }\n\n  return (\n    <FlexRow\n      {...props}\n      sx={[{\n        mt: 2,\n        py: 2,\n        justifyContent: collapse ? 'start' : 'center',\n      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\n      <Icon\n        onClick={handleCollapseToggle}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        sx={{\n          fontSize: 'large',\n          color: hover ? theme.vars.palette.secondary.main : 'inherit',\n          cursor: 'pointer',\n        }}\n      >\n        {collapse\n          ? <VscArrowSmallRight />\n          : <VscArrowSmallLeft />}\n      </Icon>\n    </FlexRow>\n  )\n}\n","import type { CollapseProps } from '@mui/material'\nimport {\n  Collapse, styled, useTheme,\n} from '@mui/material'\nimport { useCollapsible } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nexport const CollapsibleDrawer: React.FC<PropsWithChildren<CollapseProps>> = ({\n  children, sx, ...props\n}) => {\n  const { collapse, setCollapseEnd } = useCollapsible()\n  const theme = useTheme()\n\n  const collapsedSize = props.collapsedSize ?? theme.spacing(5)\n\n  return (\n    <CollapsibleFlexInner\n      in={!collapse}\n      orientation=\"horizontal\"\n      collapsedSize={collapsedSize}\n      onExited={() => setCollapseEnd?.(true)}\n      sx={{\n        alignItems: 'start',\n        display: 'flex',\n        height: '100%',\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </CollapsibleFlexInner>\n  )\n}\n\nconst CollapsibleFlexInner = styled(Collapse)(() => ({\n  '& .MuiCollapse-wrapperInner': {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}))\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport { SystemControlsRoot } from './SystemControlsRoot.tsx'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\n\nconst SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {\n  return (\n    <FlexCol>\n      <SystemControlsRoot {...props} />\n    </FlexCol>\n  )\n}\n\nexport { SystemControls }\n","import { styled } from '@mui/material'\nimport type React from 'react'\n\nimport { SystemControlsType } from './SystemControlsType.ts'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\nimport { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'\n\nconst SystemControlsRoot: React.FC<SystemControlsUnstyledProps> = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({\n  // shared defaults\n  ['&']: {\n    '.toggle': { backgroundColor: theme.vars.palette.primary.main },\n    'alignItems': 'start',\n    'zIndex': 1,\n  },\n  // WindowShade System Controls styles\n  [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {\n    '.control': {\n      borderRadius: '0 0 5px 5px',\n      flexDirection: 'row',\n      flexGrow: 1,\n      justifyContent: 'space-around',\n      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n    },\n    '.controls': {\n      alignItems: 'stretch',\n      flexDirection: 'column',\n      flexGrow: 1,\n    },\n    '.toggle': {\n      borderRadius: '0 0 5px 5px',\n      padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,\n    },\n    'flexDirection': 'row',\n    'position': 'absolute',\n    'top': 0,\n    'width': '100%',\n  },\n  // Left System Control styles\n  [`&.system-controls-type-${SystemControlsType.Left}`]: {\n    '.control': {\n      alignItems: 'start',\n      flexDirection: 'column',\n      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n    },\n    '.control-wrap': { marginBottom: `${theme.spacing(2)}` },\n    '.toggle': {\n      borderRadius: '0 5px 5px 0',\n      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,\n      writingMode: 'vertical-rl',\n    },\n    'flexDirection': 'column',\n    'left': 0,\n    'position': 'fixed',\n    'top': '30vh',\n    'width': 'auto',\n  },\n}))\n\nexport { SystemControlsRoot }\n","import type { EnumValue } from '@xylabs/sdk-js'\nimport { Enum } from '@xylabs/sdk-js'\n\nexport const SystemControlsType = Enum({\n  Left: 'Left',\n  Right: 'Right',\n  WindowShade: 'WindowShade',\n})\n\nexport type SystemControlsType = EnumValue<typeof SystemControlsType>\n","import type { Theme } from '@mui/material'\nimport { Paper, useMediaQuery } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport React from 'react'\n\nimport { SystemControl } from './controls/index.ts'\nimport { SystemControlsType } from './SystemControlsType.ts'\n\ninterface SystemControlsUnstyledProps extends FlexBoxProps {\n  systemControlsType?: SystemControlsType\n  visible?: boolean\n}\n\nconst SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({\n  visible,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'))\n\n  return visible || isSmall\n    ? (\n        <FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>\n          <SystemControl\n            systemControlsType={systemControlsType}\n            controlElement={(\n              <FlexRow className=\"control-wrap\">\n                <Paper variant=\"elevation\" elevation={0}>\n                  <NetworkSelectEx responsive={false} className=\"network-ex\" />\n                </Paper>\n              </FlexRow>\n            )}\n          />\n        </FlexCol>\n      )\n    : <FlexCol />\n}\n\nexport type { SystemControlsUnstyledProps }\nexport { SystemControlsUnstyled }\n","import type { CollapseProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, { useState } from 'react'\n\nimport { SystemControlsType } from '../SystemControlsType.ts'\n\ninterface SystemControlProps extends FlexBoxProps {\n  controlElement: React.ReactNode\n  systemControlsType?: SystemControlsType\n}\n\nconst SystemControl: React.FC<PropsWithChildren<SystemControlProps>> = ({\n  children,\n  controlElement,\n  systemControlsType = SystemControlsType.WindowShade,\n  ...props\n}) => {\n  const [toggleControls, setToggleControls] = useState(false)\n\n  let orientation: CollapseProps['orientation'] = 'vertical'\n\n  switch (systemControlsType) {\n    case SystemControlsType.Left: {\n      orientation = 'horizontal'\n      break\n    }\n  }\n\n  return (\n    <FlexRow className=\"controls\" {...props}>\n      <Collapse in={toggleControls} orientation={orientation} timeout={500}>\n        <FlexRow\n          className=\"control\"\n          sx={{ bgcolor: 'primary.main' }}\n        >\n          {controlElement}\n        </FlexRow>\n      </Collapse>\n      <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>\n        {children}\n      </FlexCol>\n    </FlexRow>\n  )\n}\n\nexport { SystemControl }\n","import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n  onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({\n  defaultValue, onSearch, ...props\n}) => {\n  const [term, setTerm] = useState<string>()\n\n  return (\n    <FlexRow\n      {...props}\n      sx={[{ alignItems: 'stretch' }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\n      <Paper\n        variant=\"elevation\"\n        elevation={0}\n        style={{\n          display: 'flex', overflow: 'hidden', width: '100%',\n        }}\n      >\n        <TextField\n          variant=\"outlined\"\n          size=\"small\"\n          defaultValue={defaultValue}\n          fullWidth\n          onChange={event => setTerm(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') onSearch?.(term)\n          }}\n          slotProps={{\n            input: {\n              color: 'secondary',\n              style: {\n                borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,\n              },\n            },\n          }}\n        />\n        <ButtonEx\n          variant=\"contained\"\n          style={{ borderRadius: 0, borderTopLeftRadius: 0 }}\n          onClick={() => onSearch?.(term)}\n          sx={{ color: 'secondary' }}\n        >\n          <SearchIcon />\n        </ButtonEx>\n      </Paper>\n    </FlexRow>\n  )\n}\n"],"mappings":"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","names":["jsx","jsx","jsxs","FlexRow","jsx","jsxs","jsx","useTheme","FlexRow","jsx","useTheme","useCollapsible","jsx","FlexCol","styled","Paper","FlexCol","FlexRow","NetworkSelectEx","Collapse","FlexRow","useState","jsx","jsxs","useState","FlexRow","Collapse","jsx","FlexCol","FlexRow","Paper","NetworkSelectEx","styled","jsx","FlexCol","Paper","FlexRow","useState","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-appbar",
-  "version": "7.6.2",
+  "version": "8.0.0",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -41,12 +41,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@xyo-network/react-network": "~7.6.2"
+    "@xyo-network/react-network": "~8.0.0"
   },
   "devDependencies": {
     "@bitauth/libauth": "~3.0.0",
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@react-spring/web": "~10.0.3",
@@ -54,33 +54,33 @@
     "@scure/bip39": "~2.2.0",
     "@storybook/react-vite": "~10.3.6",
     "@types/react": "^19.2.14",
-    "@xylabs/pixel": "~5.1.1",
-    "@xylabs/react-appbar": "~7.2.3",
-    "@xylabs/react-button": "~7.2.3",
-    "@xylabs/react-crypto": "~7.2.3",
-    "@xylabs/react-flexbox": "~7.2.3",
-    "@xylabs/react-hooks": "~7.2.3",
-    "@xylabs/react-identicon": "~7.2.3",
-    "@xylabs/react-link": "~7.2.3",
-    "@xylabs/react-number-status": "~7.2.3",
-    "@xylabs/react-promise": "~7.2.3",
-    "@xylabs/react-select": "~7.2.3",
-    "@xylabs/react-shared": "~7.2.3",
-    "@xylabs/react-theme": "~7.2.3",
-    "@xylabs/sdk-js": "^5.1.1",
-    "@xylabs/threads": "~5.1.1",
-    "@xylabs/toolchain": "~7.13.7",
-    "@xylabs/tsconfig": "^7.13.7",
-    "@xylabs/tsconfig-dom": "^7.13.7",
-    "@xylabs/tsconfig-react": "~7.13.7",
-    "@xyo-network/account-model": "^5.6.2",
-    "@xyo-network/boundwitness-model": "^5.6.2",
-    "@xyo-network/boundwitness-validator": "^5.6.1",
-    "@xyo-network/network": "~5.6.2",
-    "@xyo-network/payload-builder": "^5.6.1",
-    "@xyo-network/payload-model": "^5.6.2",
-    "@xyo-network/wallet": "~5.6.1",
-    "@xyo-network/wallet-model": "^5.6.2",
+    "@xylabs/pixel": "~5.1.2",
+    "@xylabs/react-appbar": "~8.0",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-crypto": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-hooks": "~8.0",
+    "@xylabs/react-identicon": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-number-status": "~8.0",
+    "@xylabs/react-promise": "~8.0",
+    "@xylabs/react-select": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/react-theme": "~8.0",
+    "@xylabs/sdk-js": "^5.1.2",
+    "@xylabs/threads": "~5.1.2",
+    "@xylabs/toolchain": "~7.13.22",
+    "@xylabs/tsconfig": "^7.13.22",
+    "@xylabs/tsconfig-dom": "^7.13.22",
+    "@xylabs/tsconfig-react": "~7.13.22",
+    "@xyo-network/account-model": "^5.6.3",
+    "@xyo-network/boundwitness-model": "^5.6.3",
+    "@xyo-network/boundwitness-validator": "^5.6.2",
+    "@xyo-network/network": "~5.6.3",
+    "@xyo-network/payload-builder": "^5.6.2",
+    "@xyo-network/payload-model": "^5.6.3",
+    "@xyo-network/wallet": "~5.6.2",
+    "@xyo-network/wallet-model": "^5.6.3",
     "async-mutex": "^0.5.0",
     "bn.js": "^5.2.3",
     "bowser": "^2.14.1",
@@ -99,61 +99,61 @@
     "observable-fns": "~0.6.1",
     "pako": "^2.1.0",
     "query-string": "~9.3.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-icons": "~5.6.0",
-    "react-is": "^19.2.5",
+    "react-is": "^19.2.6",
     "react-router-dom": "^7.15.0",
     "recharts": "~3.8.1",
     "spark-md5": "~3.0.2",
     "storybook": "^10.3.6",
     "typescript": "^5.9.3",
-    "viem": "~2.48.8",
-    "vite": "^8.0.10",
+    "viem": "~2.48.11",
+    "vite": "^8.0.11",
     "wasm-feature-detect": "~1.8.0",
     "zod": "^4.4.3",
-    "@xyo-network/react-storybook": "~7.6.2",
-    "@xyo-network/react-wallet": "~7.6.2"
+    "@xyo-network/react-storybook": "~8.0.0",
+    "@xyo-network/react-wallet": "~8.0.0"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=7.3.10 <8",
-    "@mui/material": ">=7.3.10 <8",
-    "@opentelemetry/api": ">=1.9.1 <2",
-    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
-    "@react-spring/web": ">=10.0.3 <10.1",
-    "@xylabs/pixel": ">=5.1.1 <5.2",
-    "@xylabs/react-appbar": ">=7.2.3 <7.3",
-    "@xylabs/react-button": ">=7.2.3 <7.3",
-    "@xylabs/react-flexbox": ">=7.2.3 <7.3",
-    "@xylabs/react-link": ">=7.2.3 <7.3",
-    "@xylabs/react-select": ">=7.2.3 <7.3",
-    "@xylabs/react-shared": ">=7.2.3 <7.3",
-    "@xylabs/sdk-js": ">=5.1.1 <6",
-    "@xylabs/threads": ">=5.1.1 <5.2",
-    "@xyo-network/network": ">=5.6.2 <5.7",
-    "async-mutex": ">=0.5.0 <1",
-    "bn.js": ">=5.2.3 <6",
-    "bowser": ">=2.14.1 <3",
-    "buffer": ">=6.0.3 <7",
-    "chalk": ">=5.6.2 <6",
-    "debug": ">=4.4.3 <4.5",
-    "ethers": ">=6.16.0 <7",
-    "fast-deep-equal": ">=3.1.3 <3.2",
-    "hash-wasm": ">=4.12.0 <4.13",
-    "js-cookie": ">=3.0.5 <3.1",
-    "mixpanel-browser": ">=2.78.0 <2.79",
-    "observable-fns": ">=0.6.1 <0.7",
-    "pako": ">=2.1.0 <3",
-    "query-string": ">=9.3.1 <9.4",
-    "react": ">=19.2.5 <20",
-    "react-dom": ">=19.2.5 <20",
-    "react-icons": ">=5.6.0 <5.7",
-    "react-is": ">=19.2.5 <20",
-    "react-router-dom": ">=7.15.0 <8",
-    "recharts": ">=3.8.1 <3.9",
-    "spark-md5": ">=3.0.2 <3.1",
-    "wasm-feature-detect": ">=1.8.0 <1.9",
-    "zod": ">=4.4.3 <5"
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
+    "@opentelemetry/api": "^1.9",
+    "@opentelemetry/sdk-trace-base": "^2.7",
+    "@react-spring/web": "~10.0",
+    "@xylabs/pixel": "~5.1",
+    "@xylabs/react-appbar": "~8.0",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-select": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/sdk-js": "^5.1",
+    "@xylabs/threads": "~5.1",
+    "@xyo-network/network": "~5.6",
+    "async-mutex": "^0.5",
+    "bn.js": "^5.2",
+    "bowser": "^2.14",
+    "buffer": "^6.0",
+    "chalk": "^5.6",
+    "debug": "~4.4",
+    "ethers": "^6.16",
+    "fast-deep-equal": "~3.1",
+    "hash-wasm": "~4.12",
+    "js-cookie": "~3.0",
+    "mixpanel-browser": "~2.78",
+    "observable-fns": "~0.6",
+    "pako": "^2.1",
+    "query-string": "~9.3",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "react-icons": "~5.6",
+    "react-is": "^19.2",
+    "react-router-dom": "^7.15",
+    "recharts": "~3.8",
+    "spark-md5": "~3.0",
+    "wasm-feature-detect": "~1.8",
+    "zod": "^4.4"
   },
   "publishConfig": {
     "access": "public"