@lifi/widget 3.0.0-alpha.9 → 3.0.0-beta.1

package/App.tsx

@@ -1,29 +1,47 @@
 'use client';
 import { forwardRef, useMemo } from 'react';
-import { AppDefault } from './AppDefault';
-import type { WidgetDrawer } from './AppDrawer';
-import { AppDrawer } from './AppDrawer';
-import { AppProvider } from './AppProvider';
-import type { WidgetConfig, WidgetProps } from './types';
+import { AppDefault } from './AppDefault.js';
+import type { WidgetDrawer } from './AppDrawer.js';
+import { AppDrawer } from './AppDrawer.js';
+import { AppProvider } from './AppProvider.js';
+import type { WidgetConfig, WidgetProps } from './types/widget.js';
 
 export const App = forwardRef<WidgetDrawer, WidgetProps>(
-  ({ elementRef, open, integrator, ...other }, ref) => {
-    const config: WidgetConfig = useMemo(
-      () => ({ integrator, ...other, ...other.config }),
-      [integrator, other],
-    );
-    return config?.variant !== 'drawer' ? (
+  ({ elementRef, open, onClose, integrator, ...other }, ref) => {
+    const config: WidgetConfig = useMemo(() => {
+      const config = { integrator, ...other, ...other.config };
+      if (config.variant === 'drawer') {
+        config.theme = {
+          ...config.theme,
+          container: {
+            height: '100%',
+            ...config.theme?.container,
+          },
+        };
+      }
+      return config;
+    }, [integrator, other]);
+
+    if (config.variant === 'drawer') {
+      return (
+        <AppProvider config={config}>
+          <AppDrawer
+            ref={ref}
+            elementRef={elementRef}
+            config={config}
+            open={open}
+            onClose={onClose}
+          >
+            <AppDefault />
+          </AppDrawer>
+        </AppProvider>
+      );
+    }
+
+    return (
       <AppProvider config={config}>
         <AppDefault />
       </AppProvider>
-    ) : (
-      <AppDrawer
-        ref={ref}
-        elementRef={elementRef}
-        integrator={integrator}
-        config={config}
-        open={open}
-      />
     );
   },
 );

package/AppDefault.tsx

@@ -1,21 +1,20 @@
 'use client';
-import { AppRoutes } from './AppRoutes';
+import { AppRoutes } from './AppRoutes.js';
 import {
   AppContainer,
   AppExpandedContainer,
   FlexContainer,
-} from './components/AppContainer';
-import { Header } from './components/Header';
-import { Initializer } from './components/Initializer';
-import { PoweredBy } from './components/PoweredBy';
-import { RoutesExpanded } from './components/Routes';
-import { useExpandableVariant } from './hooks';
-import { useWidgetConfig } from './providers';
-import { ElementId, createElementId } from './utils';
+} from './components/AppContainer.js';
+import { Header } from './components/Header/Header.js';
+import { Initializer } from './components/Initializer.js';
+import { RoutesExpanded } from './components/Routes/RoutesExpanded.js';
+import { useWideVariant } from './hooks/useWideVariant.js';
+import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js';
+import { ElementId, createElementId } from './utils/elements.js';
 
 export const AppDefault = () => {
   const { elementId } = useWidgetConfig();
-  const expandable = useExpandableVariant();
+  const wideVariant = useWideVariant();
 
   return (
     <AppExpandedContainer
@@ -26,10 +25,9 @@ export const AppDefault = () => {
         <FlexContainer disableGutters>
           <AppRoutes />
         </FlexContainer>
-        <PoweredBy />
         <Initializer />
       </AppContainer>
-      {expandable ? <RoutesExpanded /> : null}
+      {wideVariant ? <RoutesExpanded /> : null}
     </AppExpandedContainer>
   );
 };

package/AppDrawer.style.tsx

@@ -1,101 +1,4 @@
-import { Button, IconButton, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-const getButtonTransformWidth = (
-  drawerWidth?: number | string,
-  drawerMaxWidth?: number | string,
-) => {
-  if (typeof drawerWidth === 'number') {
-    return `${drawerWidth}px`;
-  }
-  if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
-    return drawerWidth;
-  }
-  if (typeof drawerMaxWidth === 'number') {
-    return `${drawerMaxWidth}px`;
-  }
-  if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
-    return drawerMaxWidth;
-  }
-  return '392px';
-};
-
-export const DrawerButton = styled(Button, {
-  shouldForwardProp: (prop) =>
-    !['open', 'drawerProps'].includes(prop as string),
-})<{
-  open?: boolean;
-  drawerProps?: {
-    width?: number | string;
-    maxWidth?: number | string;
-  };
-}>(({ theme, open, drawerProps }) => ({
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.white
-      : theme.palette.common.black,
-  alignItems: 'center',
-  borderRadius: `${theme.shape.borderRadiusSecondary}px 0 0 ${theme.shape.borderRadiusSecondary}px`,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  minHeight: 144,
-  minWidth: 40,
-  padding: theme.spacing(1, 0, 1, 0),
-  position: 'absolute',
-  right: 0,
-  top: 'calc(50% - 74px)',
-  transform: `translate3d(calc(${
-    open
-      ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
-      : '0px'
-  } * -1), 0, 0)`,
-  transition: theme.transitions.create(['transform'], {
-    duration: open
-      ? theme.transitions.duration.enteringScreen
-      : theme.transitions.duration.leavingScreen,
-    easing: open
-      ? theme.transitions.easing.easeOut
-      : theme.transitions.easing.sharp,
-  }),
-  zIndex: 1500,
-  '&:hover': {
-    background:
-      theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white,
-  },
-  svg: {
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-  },
-}));
-
-export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
-  borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.white
-      : theme.palette.common.black,
-  cursor: 'pointer',
-  display: 'flex',
-  flexDirection: 'row',
-  padding: theme.spacing(1),
-  position: 'relative',
-  textTransform: 'none',
-  transform: 'rotateZ(180deg)',
-  writingMode: 'vertical-rl',
-}));
+import { IconButton, styled } from '@mui/material';
 
 export const CloseButtonLayout = styled(IconButton)(() => ({
   position: 'absolute',

package/AppDrawer.tsx

@@ -1,7 +1,5 @@
-import CloseIcon from '@mui/icons-material/CloseRounded';
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Drawer } from '@mui/material';
+import type { PropsWithChildren } from 'react';
 import {
   forwardRef,
   useCallback,
@@ -10,16 +8,9 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AppDefault } from './AppDefault';
-import {
-  CloseButtonLayout,
-  DrawerButton,
-  DrawerButtonTypography,
-} from './AppDrawer.style';
-import { AppProvider } from './AppProvider';
-import type { WidgetConfig, WidgetProps, WidgetSubvariant } from './types';
-import { HiddenUI } from './types';
+import type { WidgetDrawerContext } from './AppDrawerContext.js';
+import { DrawerContext } from './AppDrawerContext.js';
+import type { WidgetDrawerProps } from './types/widget.js';
 
 export interface WidgetDrawer {
   isOpen(): void;
@@ -28,114 +19,78 @@ export interface WidgetDrawer {
   closeDrawer(): void;
 }
 
-export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
-  ({ elementRef, open, integrator, config }, ref) => {
-    const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
+export const AppDrawer = forwardRef<
+  WidgetDrawer,
+  PropsWithChildren<WidgetDrawerProps>
+>(({ elementRef, open, onClose, config, children }, ref) => {
+  const openRef = useRef(Boolean(open));
+  const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
 
-    const toggleDrawer = useCallback(() => {
-      setDrawerOpen((open) => !open);
-    }, []);
+  const toggleDrawer = useCallback(() => {
+    setDrawerOpen((open) => {
+      openRef.current = !open;
+      return openRef.current;
+    });
+    if (!openRef.current) {
+      onClose?.();
+    }
+  }, [onClose]);
 
-    const openDrawer = useCallback(() => {
-      setDrawerOpen(true);
-    }, []);
+  const openDrawer = useCallback(() => {
+    setDrawerOpen(true);
+    openRef.current = true;
+  }, []);
 
-    const closeDrawer = useCallback(() => {
-      setDrawerOpen(false);
-    }, []);
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false);
+    openRef.current = false;
+    onClose?.();
+  }, [onClose]);
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => openRef.current,
-        toggleDrawer,
-        openDrawer,
-        closeDrawer,
-      }),
-      [closeDrawer, openDrawer, toggleDrawer],
-    );
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      toggleDrawer,
+      openDrawer,
+      closeDrawer,
+    }),
+    [closeDrawer, openDrawer, toggleDrawer],
+  );
 
-    const widgetConfig: WidgetConfig = useMemo(
-      () => ({
-        ...config,
-        integrator,
-        containerStyle: {
-          ...config?.containerStyle,
-          height: '100%',
-        },
-      }),
-      [config, integrator],
-    );
+  const drawerContext: WidgetDrawerContext = useMemo(
+    () => ({
+      closeDrawer,
+    }),
+    [closeDrawer],
+  );
 
-    return (
-      <AppProvider config={widgetConfig}>
-        {!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (
-          <DrawerButton
-            variant="contained"
-            onClick={toggleDrawer}
-            open={drawerOpen}
-            drawerProps={config?.containerStyle}
-          >
-            {drawerOpen ? (
-              <KeyboardArrowRightIcon />
-            ) : (
-              <KeyboardArrowLeftIcon />
-            )}
-            <DrawerButtonText
-              open={drawerOpen}
-              subvariant={config?.subvariant}
-            />
-          </DrawerButton>
-        ) : null}
-        <Drawer
-          ref={elementRef}
-          anchor="right"
-          open={drawerOpen}
-          onClose={closeDrawer}
-          slotProps={{
-            backdrop: {
-              sx: {
-                backgroundColor: 'rgb(0 0 0 / 48%)',
-                backdropFilter: 'blur(3px)',
-              },
-            },
-          }}
-          PaperProps={{
+  return (
+    <DrawerContext.Provider value={drawerContext}>
+      <Drawer
+        ref={elementRef}
+        anchor="right"
+        open={drawerOpen}
+        onClose={closeDrawer}
+        slotProps={{
+          backdrop: {
             sx: {
-              width: config?.containerStyle?.width ?? '100%',
-              minWidth: config?.containerStyle?.minWidth ?? 360,
-              maxWidth: config?.containerStyle?.maxWidth ?? 392,
+              backgroundColor: 'rgb(0 0 0 / 48%)',
+              backdropFilter: 'blur(3px)',
             },
-          }}
-          keepMounted
-        >
-          <CloseButtonLayout onClick={closeDrawer} edge="end">
-            <CloseIcon />
-          </CloseButtonLayout>
-          <AppDefault />
-        </Drawer>
-      </AppProvider>
-    );
-  },
-);
-
-export const DrawerButtonText = ({
-  open,
-  subvariant,
-}: {
-  open: boolean;
-  subvariant?: WidgetSubvariant;
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <DrawerButtonTypography>
-      {open
-        ? t('button.hide')
-        : subvariant === 'nft'
-          ? t('button.lifiCheckout')
-          : t('button.lifiExchange')}
-    </DrawerButtonTypography>
+          },
+        }}
+        PaperProps={{
+          sx: (theme) => ({
+            width: theme?.container?.width ?? '100%',
+            minWidth: theme?.container?.minWidth ?? theme.breakpoints.values.xs,
+            maxWidth: theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
+          }),
+        }}
+        keepMounted
+      >
+        {children}
+      </Drawer>
+    </DrawerContext.Provider>
   );
-};
+});

package/AppDrawerContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export interface WidgetDrawerContext {
+  closeDrawer?(): void;
+}
+
+export const DrawerContext = createContext<WidgetDrawerContext>({});
+
+export const useDrawer = (): WidgetDrawerContext => useContext(DrawerContext);

package/AppProvider.tsx

@@ -2,18 +2,17 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import type { PropsWithChildren } from 'react';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
-import { queryClient } from './config/queryClient';
+import { queryClient } from './config/queryClient.js';
+import { I18nProvider } from './providers/I18nProvider/I18nProvider.js';
+import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js';
+import { WalletProvider } from './providers/WalletProvider/WalletProvider.js';
 import {
-  FormProvider,
-  I18nProvider,
-  ThemeProvider,
-  URLSearchParamsBuilder,
-  WalletProvider,
   WidgetProvider,
   useWidgetConfig,
-} from './providers';
-import { StoreProvider } from './stores';
-import type { WidgetConfigProps } from './types';
+} from './providers/WidgetProvider/WidgetProvider.js';
+import { StoreProvider } from './stores/StoreProvider.js';
+import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js';
+import type { WidgetConfigProps } from './types/widget.js';
 
 export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   children,
@@ -22,17 +21,15 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   return (
     <QueryClientProvider client={queryClient}>
       <WidgetProvider config={config}>
-        <ThemeProvider>
-          <I18nProvider>
-            <WalletProvider>
-              <FormProvider>
-                <StoreProvider config={config}>
-                  <AppRouter>{children}</AppRouter>
-                </StoreProvider>
-              </FormProvider>
-            </WalletProvider>
-          </I18nProvider>
-        </ThemeProvider>
+        <WalletProvider>
+          <ThemeProvider>
+            <I18nProvider>
+              <StoreProvider config={config}>
+                <AppRouter>{children}</AppRouter>
+              </StoreProvider>
+            </I18nProvider>
+          </ThemeProvider>
+        </WalletProvider>
       </WidgetProvider>
     </QueryClientProvider>
   );

package/AppRoutes.tsx

@@ -1,19 +1,24 @@
 import type { RouteObject } from 'react-router-dom';
 import { useLocation, useRoutes } from 'react-router-dom';
-import { NotFound } from './components/NotFound';
-import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
-import { LanguagesPage } from './pages/LanguagesPage';
-import { MainPage } from './pages/MainPage';
-import { RoutesPage } from './pages/RoutesPage';
-import { SelectChainPage } from './pages/SelectChainPage';
-import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
-import { SelectTokenPage } from './pages/SelectTokenPage';
-import { SelectWalletPage } from './pages/SelectWalletPage';
-import { SettingsPage } from './pages/SettingsPage';
-import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
-import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
-import { TransactionPage } from './pages/TransactionPage';
-import { navigationRoutes } from './utils';
+import { NotFound } from './components/NotFound.js';
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage/ActiveTransactionsPage.js';
+import { LanguagesPage } from './pages/LanguagesPage.js';
+import { MainPage } from './pages/MainPage/MainPage.js';
+import { RoutesPage } from './pages/RoutesPage/RoutesPage.js';
+import { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js';
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js';
+import { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js';
+import { SelectWalletPage } from './pages/SelectWalletPage/SelectWalletPage.js';
+import { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js';
+import { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js';
+import { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js';
+import { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js';
+import { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js';
+import { SettingsPage } from './pages/SettingsPage/SettingsPage.js';
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js';
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage/TransactionHistoryPage.js';
+import { TransactionPage } from './pages/TransactionPage/TransactionPage.js';
+import { navigationRoutes } from './utils/navigationRoutes.js';
 
 // SelectWalletPage should be accessible from every page and this handler helps avoid creating multiple paths.
 // Avoid using it for anything else, we need to come up with a better solution once we have one more page accessible from everywhere.
@@ -75,6 +80,26 @@ const routes: RouteObject[] = [
     path: navigationRoutes.activeTransactions,
     element: <ActiveTransactionsPage />,
   },
+  {
+    path: navigationRoutes.sendToWallet,
+    element: <SendToWalletPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.bookmarks}`,
+    element: <BookmarksPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.recentWallets}`,
+    element: <RecentWalletsPage />,
+  },
+  {
+    path: `${navigationRoutes.sendToWallet}/${navigationRoutes.connectedWallets}`,
+    element: <ConnectedWalletsPage />,
+  },
+  {
+    path: navigationRoutes.configuredWallets,
+    element: <SendToConfiguredWalletPage />,
+  },
   {
     path: navigationRoutes.transactionHistory,
     element: <TransactionHistoryPage />,

package/_esm/App.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import type { WidgetDrawer } from './AppDrawer';
-import type { WidgetConfig } from './types';
-export declare const App: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
+/// <reference types="react" resolution-mode="require"/>
+import type { WidgetDrawer } from './AppDrawer.js';
+import type { WidgetConfig } from './types/widget.js';
+export declare const App: import("react").ForwardRefExoticComponent<import("./types/widget.js").WidgetDrawerProps & WidgetConfig & import("./types/widget.js").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;

package/_esm/App.js

@@ -1,11 +1,26 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
-import { AppDefault } from './AppDefault';
-import { AppDrawer } from './AppDrawer';
-import { AppProvider } from './AppProvider';
-export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
-    const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
-    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+import { AppDefault } from './AppDefault.js';
+import { AppDrawer } from './AppDrawer.js';
+import { AppProvider } from './AppProvider.js';
+export const App = forwardRef(({ elementRef, open, onClose, integrator, ...other }, ref) => {
+    const config = useMemo(() => {
+        const config = { integrator, ...other, ...other.config };
+        if (config.variant === 'drawer') {
+            config.theme = {
+                ...config.theme,
+                container: {
+                    height: '100%',
+                    ...config.theme?.container,
+                },
+            };
+        }
+        return config;
+    }, [integrator, other]);
+    if (config.variant === 'drawer') {
+        return (_jsx(AppProvider, { config: config, children: _jsx(AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open, onClose: onClose, children: _jsx(AppDefault, {}) }) }));
+    }
+    return (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) }));
 });
 //# sourceMappingURL=App.js.map

package/_esm/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../App.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClD,MAAM,MAAM,GAAiB,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EACjD,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAC;IACF,OAAO,MAAM,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,YACzB,KAAC,UAAU,KAAG,GACF,CACf,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../App.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,MAAM,MAAM,GAAiB,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,MAAM,GAAG,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;QACzD,IAAI,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,MAAM,CAAC,KAAK,GAAG;gBACb,GAAG,MAAM,CAAC,KAAK;gBACf,SAAS,EAAE;oBACT,MAAM,EAAE,MAAM;oBACd,GAAG,MAAM,CAAC,KAAK,EAAE,SAAS;iBAC3B;aACF,CAAC;QACJ,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,IAAI,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QAChC,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,YACzB,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,YAEhB,KAAC,UAAU,KAAG,GACJ,GACA,CACf,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,YACzB,KAAC,UAAU,KAAG,GACF,CACf,CAAC;AACJ,CAAC,CACF,CAAC"}

package/_esm/AppDefault.js

@@ -1,17 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppRoutes } from './AppRoutes';
-import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer';
-import { Header } from './components/Header';
-import { Initializer } from './components/Initializer';
-import { PoweredBy } from './components/PoweredBy';
-import { RoutesExpanded } from './components/Routes';
-import { useExpandableVariant } from './hooks';
-import { useWidgetConfig } from './providers';
-import { ElementId, createElementId } from './utils';
+import { AppRoutes } from './AppRoutes.js';
+import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer.js';
+import { Header } from './components/Header/Header.js';
+import { Initializer } from './components/Initializer.js';
+import { RoutesExpanded } from './components/Routes/RoutesExpanded.js';
+import { useWideVariant } from './hooks/useWideVariant.js';
+import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js';
+import { ElementId, createElementId } from './utils/elements.js';
 export const AppDefault = () => {
     const { elementId } = useWidgetConfig();
-    const expandable = useExpandableVariant();
-    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
+    const wideVariant = useWideVariant();
+    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(Initializer, {})] }), wideVariant ? _jsx(RoutesExpanded, {}) : null] }));
 };
 //# sourceMappingURL=AppDefault.js.map

package/_esm/AppDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDefault.js","sourceRoot":"","sources":["../AppDefault.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,aAAa,GACd,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,OAAO,CACL,MAAC,oBAAoB,IACnB,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,oBAAoB,EAAE,SAAS,CAAC,aAE9D,MAAC,YAAY,eACX,KAAC,MAAM,KAAG,EACV,KAAC,aAAa,IAAC,cAAc,kBAC3B,KAAC,SAAS,KAAG,GACC,EAChB,KAAC,SAAS,KAAG,EACb,KAAC,WAAW,KAAG,IACF,EACd,UAAU,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,IAAI,IAClB,CACxB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"AppDefault.js","sourceRoot":"","sources":["../AppDefault.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,aAAa,GACd,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IACxC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,OAAO,CACL,MAAC,oBAAoB,IACnB,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,oBAAoB,EAAE,SAAS,CAAC,aAE9D,MAAC,YAAY,eACX,KAAC,MAAM,KAAG,EACV,KAAC,aAAa,IAAC,cAAc,kBAC3B,KAAC,SAAS,KAAG,GACC,EAChB,KAAC,WAAW,KAAG,IACF,EACd,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,IAAI,IACnB,CACxB,CAAC;AACJ,CAAC,CAAC"}