@admin-layout/tailwind-design-pro 10.0.9-alpha.6 → 10.0.9-alpha.61

package/README.md

@@ -1 +1,345 @@
-# Tailwind UI
+# Tailwind Design Pro
+
+A universal tailwind design system for use across all projects.
+
+## Features
+
+-   Unified theme system with light and dark mode support
+-   Consistent styling across all projects
+-   Easy to customize and extend
+-   Built-in typography, forms, and aspect ratio support
+
+## Usage in Servers
+
+To use this package in your server project, follow these steps:
+
+### 1. Install the package
+
+```bash
+npm install @admin-layout/tailwind-design-pro
+```
+
+### 2. Use the Universal Tailwind Config
+
+Create a `tailwind.config.js` or `tailwind.config.ts` file in your server project and import the universal config:
+
+```typescript
+// tailwind.config.ts or tailwind.config.js
+import { themeConfig } from '@admin-layout/tailwind-design-pro';
+
+export default {
+    // Override content paths to include server-specific paths
+    content: [
+        './src/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        './app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
+        '../../packages/**/*.{js,jsx,ts,tsx}',
+        '../../packages-modules/**/*.{js,jsx,ts,tsx}',
+    ],
+
+    // You can add server-specific overrides here if needed
+    theme: {
+        extend: {
+            // Any server-specific extensions would go here
+            ...themeConfig,
+        },
+    },
+    darkMode: 'class',
+    variants: {
+        typography: ['dark'],
+    },
+    plugins: [typography, forms, aspectRatio],
+};
+```
+
+# Theme System Documentation
+
+## Overview
+
+The theme system provides a flexible and powerful way to manage the visual appearance of your application. It supports multiple pre-built themes (default, Airbnb, Slack, GitHub, and Spotify) and includes dark mode functionality.
+
+## Available Themes
+
+The system comes with several pre-built themes:
+
+-   `default`: A neutral theme with standard components
+-   `airbnb`: Inspired by Airbnb's design system
+-   `slack`: Based on Slack's color scheme and components
+-   `github`: Following GitHub's design patterns
+-   `spotify`: Matching Spotify's visual identity
+
+## Theme Structure
+
+Each theme follows a consistent structure defined by the `DefaultTheme` interface:
+
+```typescript
+interface DefaultTheme {
+    name: string;
+    colors: {
+        primary: ColorRamp;
+        secondary: ColorRamp;
+        accent: ColorRamp;
+        success: ColorRamp;
+        warning: ColorRamp;
+        error: ColorRamp;
+        neutral: ColorRamp;
+        background: {
+            light: string;
+            dark: string;
+        };
+        text: {
+            light: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+            dark: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+    };
+    borderRadius: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    fontFamily: {
+        sans: string[];
+        serif: string[];
+        mono: string[];
+    };
+    boxShadow: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    components: {
+        buttons: {
+            primary: ButtonStyle;
+            secondary: ButtonStyle;
+        };
+        cards: {
+            borderRadius: string;
+            padding: string;
+            shadow: string;
+            border: string;
+        };
+        inputs: {
+            borderRadius: string;
+            borderColor: string;
+            focusBorderColor: string;
+            padding: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+}
+```
+
+## Setting Up the Theme Provider
+
+To use the theme system, wrap your application with the `ThemeProviderTailwind` component:
+
+```tsx
+import { ThemeProviderTailwind } from 'packages/tailwind-design-pro/src/components/ThemeProvider';
+
+const App = () => {
+    const settings = {
+        theme: 'default', // or 'airbnb', 'slack', 'github', 'spotify'
+        themeType: 'light',
+        primaryColor: '#your-color',
+        fontFamily: 'your-font-family',
+        navTheme: 'light', // or 'dark'
+    };
+
+    return <ThemeProviderTailwind settings={settings}>{/* Your app components */}</ThemeProviderTailwind>;
+};
+```
+
+## Using the useTheme Hook
+
+The `useTheme` hook provides access to the current theme and theme-related functionality. Here's how to use it:
+
+```tsx
+import { useTheme } from 'packages/tailwind-design-pro/src/components/ThemeProvider';
+
+const YourComponent = () => {
+    const { themeName, theme, isDarkMode, toggleDarkMode } = useTheme();
+
+    return (
+        <div>
+            {/* Access theme colors */}
+            <div style={{ color: theme.colors.primary[500] }}>Primary Color</div>
+
+            {/* Use theme-specific styles */}
+            <button
+                style={{
+                    borderRadius: theme.borderRadius.DEFAULT,
+                    fontFamily: theme.fontFamily.sans.join(', '),
+                }}
+            >
+                Themed Button
+            </button>
+
+            {/* Toggle dark mode */}
+            <button onClick={toggleDarkMode}>Toggle {isDarkMode ? 'Light' : 'Dark'} Mode</button>
+        </div>
+    );
+};
+```
+
+### Available Properties from useTheme
+
+1. `themeName`: The current theme name ('default', 'airbnb', 'slack', 'github', or 'spotify')
+2. `theme`: The complete theme object containing all styling properties
+3. `isDarkMode`: Boolean indicating if dark mode is active
+4. `toggleDarkMode`: Function to toggle between light and dark modes
+
+## Theme Features
+
+### 1. Dark Mode Support
+
+-   Automatically handles dark mode through the `isDarkMode` state
+-   Persists dark mode preference in localStorage
+-   Applies appropriate dark mode classes to the document
+
+### 2. Dynamic Theme Switching
+
+-   Themes can be changed dynamically through the settings prop
+-   All theme properties are immediately applied when changed
+
+### 3. Component-Specific Styling
+
+Each theme includes specific styling for common components:
+
+-   Buttons (primary and secondary variants)
+-   Cards
+-   Input fields
+
+### 4. Color System
+
+-   Each theme includes a comprehensive color system with:
+    -   Primary colors
+    -   Secondary colors
+    -   Accent colors
+    -   Semantic colors (success, warning, error)
+    -   Neutral colors
+    -   Background colors
+    -   Text colors
+
+### 5. Typography
+
+-   Customizable font families for different text styles
+-   Consistent typography settings across themes
+
+## Best Practices
+
+1. **Theme Access**
+
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme properties directly
+    const primaryColor = theme.colors.primary[500];
+    ```
+
+2. **Dark Mode Handling**
+
+    ```tsx
+    const { isDarkMode, toggleDarkMode } = useTheme();
+    // Use isDarkMode to conditionally render styles
+    const backgroundColor = isDarkMode ? theme.colors.background.dark : theme.colors.background.light;
+    ```
+
+3. **Component Styling**
+
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme component styles
+    const buttonStyle = {
+        ...theme.components.buttons.primary,
+        // Add custom styles as needed
+    };
+    ```
+
+4. **Responsive Design**
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme's responsive values
+    const cardStyle = {
+        borderRadius: theme.borderRadius.md,
+        boxShadow: theme.boxShadow.DEFAULT,
+    };
+    ```
+
+## Theme Customization
+
+### Creating a Custom Theme
+
+You can create your own theme by following the `DefaultTheme` interface structure:
+
+```typescript
+const customTheme: DefaultTheme = {
+    name: 'custom',
+    colors: {
+        // Define your color palette
+    },
+    // Define other theme properties
+};
+```
+
+### Extending Existing Themes
+
+You can extend existing themes by importing them and modifying specific properties:
+
+```typescript
+import { defaultTheme } from './themes/default';
+
+const extendedTheme: DefaultTheme = {
+    ...defaultTheme,
+    name: 'extended',
+    colors: {
+        ...defaultTheme.colors,
+        primary: {
+            // Override primary colors
+        },
+    },
+};
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Theme Not Applying**
+
+    - Ensure the `ThemeProviderTailwind` is properly wrapped around your application
+    - Check if the theme name matches one of the available themes
+    - Verify that the settings prop is correctly configured
+
+2. **Dark Mode Not Working**
+
+    - Check if `navTheme` is properly set in the settings
+    - Verify that the dark mode classes are being applied to the document
+    - Ensure localStorage is accessible in your environment
+
+3. **Custom Styles Not Taking Effect**
+    - Verify that your custom theme follows the `DefaultTheme` interface
+    - Check if the theme is properly registered in the themes object
+    - Ensure the theme name is correctly referenced in the settings
+
+## Contributing
+
+When contributing to the theme system:
+
+1. Follow the existing theme structure
+2. Maintain consistency with other themes
+3. Include both light and dark mode variants
+4. Document any new theme properties or features
+5. Test the theme across different components and scenarios

package/lib/cdm-locales/en/settings.json

@@ -5,6 +5,8 @@
     "header": "Header",
     "footer": "Footer",
     "search_bar": "Search Bar",
+    "search_bar_on_scroll": "Show Search Bar on Scroll",
+    "search_bar_overlay": "Show Overlay on Search",
     "menu": "Menu",
     "menu_header": "Menu Header",
     "setting": "Setting",
@@ -15,5 +17,23 @@
     "other_setting": "Other Setting",
     "weak_mode": "Weak Mode",
     "light": "Light",
-    "dark": "Dark"
+    "dark": "Dark",
+    "font_family": "Font Family",
+    "select_theme": "Select Theme",
+    "scroll_threshold": "Searchbar Scroll Threshold",
+    "menu_divider_names": "Menu Divider Names",
+    "upper_menu_divider": "Upper Menu Divider",
+    "middle_menu_divider": "Middle Menu Divider",
+    "lower_menu_divider": "Lower Menu Divider",
+    "header_elements": "Header Elements",
+    "show_logo": "Show Logo",
+    "show_search_slot": "Show Search Slot",
+    "show_right_content": "Show Right Content",
+    "desktop_settings": "Desktop Settings",
+    "mobile_settings": "Mobile Settings",
+    "show_menu_toggle": "Show Menu Toggle",
+    "show_back_button": "Show Back Button",
+    "show_page_title": "Show Page Title",
+    "show_action_buttons": "Show Action Buttons",
+    "show_header": "Show Header"
 }

package/lib/cdm-locales/es/settings.json

@@ -5,15 +5,35 @@
     "header": "Encabezado",
     "footer": "Pie de Página",
     "search_bar": "Barra de Búsqueda",
+    "search_bar_on_scroll": "Mostrar Barra de Búsqueda al Desplazar",
+    "search_bar_overlay": "Mostrar Superposición en Búsqueda",
     "menu": "Menú",
     "menu_header": "Encabezado del Menú",
     "setting": "Configuración",
-    "page_style_settings": "Configuraciones de Estilo de Página",
+    "page_style_settings": "Configuración de Estilo de Página",
     "theme_color": "Color del Tema",
     "navigation_mode": "Modo de Navegación",
-    "regional_rettings": "Configuraciones Regionales",
+    "regional_rettings": "Configuración Regional",
     "other_setting": "Otra Configuración",
     "weak_mode": "Modo Débil",
     "light": "Claro",
-    "dark": "Oscuro"
+    "dark": "Oscuro",
+    "font_family": "Familia de Fuente",
+    "select_theme": "Seleccionar Tema",
+    "scroll_threshold": "Umbral de Desplazamiento de la Barra de Búsqueda",
+    "menu_divider_names": "Nombres de Divisores de Menú",
+    "upper_menu_divider": "Divisor Superior del Menú",
+    "middle_menu_divider": "Divisor Medio del Menú",
+    "lower_menu_divider": "Divisor Inferior del Menú",
+    "header_elements": "Elementos del Encabezado",
+    "show_logo": "Mostrar Logo",
+    "show_search_slot": "Mostrar Espacio de Búsqueda",
+    "show_right_content": "Mostrar Contenido Derecho",
+    "desktop_settings": "Configuración de Escritorio",
+    "mobile_settings": "Configuración Móvil",
+    "show_menu_toggle": "Mostrar Alternador de Menú",
+    "show_back_button": "Mostrar Botón de Atrás",
+    "show_page_title": "Mostrar Título de Página",
+    "show_action_buttons": "Mostrar Botones de Acción",
+    "show_header": "Mostrar Encabezado"
 }

package/lib/components/Layout/BasicLayout/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BasicLayoutProps, GlobalHeaderProps } from '@admin-layout/client';
-export declare const useHorizontalScroll: ({ scrolled, setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
-    scrolled: any;
+export declare const useHorizontalScroll: ({ setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
     setScrolled: any;
     setSearchOptionsShown: any;
     onScrollReachEnd: any;

package/lib/components/Layout/BasicLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAGpB,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,mBAAmB;;;;;uCA6B/B,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAqI3F,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAIpB,MAAM,sBAAsB,CAAC;AAU9B,eAAO,MAAM,mBAAmB;;;;uCA4B/B,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA0N3F,CAAC"}

package/lib/components/Layout/BasicLayout/index.js

@@ -1,5 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {Sidebar}from'../Sidebar/Sidebar.js';import {GlobalHeader}from'../GlobalHeader/Header.js';import {useLocation,Outlet}from'@remix-run/react';import warning from'warning';import {omit}from'lodash-es';import {SettingDrawer}from'../../SettingDrawer/SettingDrawer.js';import {defaultSettings,useComponentSize,getMenuSeparation,getThemeColors}from'@admin-layout/client';import isBrowser from'../../../utils/isBrowser/index.js';import {getPageTitleInfo}from'../getPageTitle.js';import {GlobalFooter}from'../GlobalFooter/Footer.js';import {ThemeProvider}from'../../ThemeProvider/ThemeProvider.js';const useHorizontalScroll = ({
-  scrolled,
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {Sidebar}from'../Sidebar/Sidebar.js';import {GlobalHeader}from'../GlobalHeader/Header.js';import {Outlet}from'@remix-run/react';import warning from'warning';import {omit}from'lodash-es';import {SettingDrawer}from'../../SettingDrawer/SettingDrawer.js';import {defaultSettings,useComponentSize,getMenuSeparation,getThemeColors}from'@admin-layout/client';import isBrowser from'../../../utils/isBrowser/index.js';import {getPageTitleInfo}from'../getPageTitle.js';import {useTheme}from'../../ThemeProvider/ThemeProvider.js';import {MainHeader}from'../GlobalHeader/MainHeader.js';import'../GlobalHeader/Logo.js';import'react-router';import'../../../helpers/DynamicIcon.js';import'@app/dialog/WrappedDialogsSwitch';import'@common-stack/components-pro';import {FooterSlot}from'../slot-fill/Footer.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {config}from'../../../config/env-config.js';import {useScrollThreshold}from'../../../hooks/useScrollThreshold.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import'../../../hooks/use-get-current-lat-long.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';const useHorizontalScroll = ({
   setScrolled,
   setSearchOptionsShown,
   onScrollReachEnd
@@ -64,17 +63,13 @@ const BasicLayout = props => {
   const {
     children,
     onCollapse: propsOnCollapse,
-    // contentStyle,
     defaultCollapsed,
     menuData,
-    // style,
-    // disableContentMargin,
     siderWidth = 208,
     menu,
-    // isChildrenLayout: propsIsChildrenLayout,
     menuDataRender,
     loading,
-    // location,
+    location,
     routeParams,
     settings,
     authorities,
@@ -84,15 +79,32 @@ const BasicLayout = props => {
     actor
   } = propsWithSettings;
   const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-  useState(false);
-  const location = useLocation();
   const [scrollEnd, setScrollEnd] = useState(false);
   const [searchOptionsShown, setSearchOptionsShown] = useState(false);
+  const {
+    picture
+  } = mainHeaderProps;
+  const {
+    LAYOUT_ROOT
+  } = config;
+  const {
+    theme,
+    isDarkMode
+  } = useTheme();
+  const {
+    isMobile
+  } = useMediaQuery();
+  // Get current route settings with proper fallback
+  const currentRoute = location?.pathname || '/';
+  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
+  // Get device-specific settings
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  const deviceSettings = routeSettings?.regions?.[deviceType] || {};
+  const layoutSettings = routeSettings?.layout?.[deviceType] || {};
   const onScrollReachEnd = () => {
     setScrollEnd(prevScrollEnd => !prevScrollEnd);
   };
-  useHorizontalScroll({
-    scrolled,
+  const horizontalScrollRef = useHorizontalScroll({
     setScrolled,
     setSearchOptionsShown,
     onScrollReachEnd
@@ -100,13 +112,20 @@ const BasicLayout = props => {
   const defaultProps = omit({
     ...propsWithSettings
   }, ['layout']);
-  defaultPageTitleRender({
+  const pageTitleInfo = defaultPageTitleRender({
     pathname: location?.pathname,
     ...defaultProps
   }, propsWithSettings);
   const settingRef = useRef(settings);
+  const scrollThreshold = deviceSettings?.header?.scrollThreshold || 50;
+  const {
+    componentVisibility
+  } = useScrollThreshold([{
+    threshold: scrollThreshold,
+    id: 'search-bar',
+    useWindowScroll: true
+  }]);
   useEffect(() => {
-    // Only update if the primaryColor actually needs to change
     if (settingRef.current?.primaryColor === '#3FA541C' && primaryColor !== '#3FA541C') {
       const newState = {
         ...settingRef.current,
@@ -115,6 +134,15 @@ const BasicLayout = props => {
       onSettingChange(newState);
     }
   }, [primaryColor, isBrowser, settingRef]);
+  // Update settings when route changes
+  useEffect(() => {
+    if (actor && location?.pathname) {
+      actor.send({
+        type: 'ROUTE_CHANGE',
+        pathname: location?.pathname
+      });
+    }
+  }, [location?.pathname, actor]);
   const {
     ref: refHeader,
     height: heightHeader
@@ -139,11 +167,35 @@ const BasicLayout = props => {
   const closeSideMenu = () => {
     setIsSideMenuOpen(false);
   };
-  return jsx(ThemeProvider, {
-    settings: settings,
-    children: jsxs("div", {
-      className: "flex h-screen bg-background font-sans",
-      children: [settings?.layout.navigationMode !== 'topbar' && settings?.regions.showMenu && !settings?.layout.splitMenus && jsx(Sidebar, {
+  const backgroundColor = isDarkMode ? theme.colors.background.dark : theme.colors.background.light;
+  return jsxs("div", {
+    className: "flex flex-col h-screen bg-background font-sans",
+    ref: horizontalScrollRef,
+    style: {
+      backgroundColor: backgroundColor
+    },
+    children: [deviceSettings?.header?.showHeader && LAYOUT_ROOT != '/' && jsx(GlobalHeader, {
+      toggleSideMenu: toggleSideMenu,
+      settings: settings,
+      upperMenus: getMenuSeparation(menuData).upperMenus,
+      routeParams: routeParams,
+      collapsed: collapsed,
+      ...props
+    }), LAYOUT_ROOT === '/' && deviceSettings?.header?.showHeader && jsx(MainHeader, {
+      scrolled: scrolled,
+      location: location,
+      menuData: menuData,
+      settings: settings,
+      pageTitleInfo: pageTitleInfo,
+      onSettingChange: onSettingChange,
+      searchOptionsShown: searchOptionsShown,
+      setSearchOptionsShown: setSearchOptionsShown,
+      authorities: authorities,
+      picture: picture,
+      componentVisibility: componentVisibility
+    }), jsxs("div", {
+      className: "flex flex-1 relative",
+      children: [layoutSettings?.navigationMode !== 'topbar' && deviceSettings?.header?.showMenu && LAYOUT_ROOT != '/' && jsx(Sidebar, {
         isSideMenuOpen: isSideMenuOpen,
         closeSideMenu: closeSideMenu,
         menuData: menuData,
@@ -152,30 +204,43 @@ const BasicLayout = props => {
         routeParams: routeParams,
         settings: settings
       }), jsxs("div", {
-        className: "flex flex-col flex-1 w-full",
-        children: [settings?.regions.showHeader && jsx(GlobalHeader, {
-          toggleSideMenu: toggleSideMenu,
-          settings: settings,
-          upperMenus: getMenuSeparation(menuData).upperMenus,
-          routeParams: routeParams,
-          collapsed: collapsed
-        }), jsx(SettingDrawer, {
+        className: "flex flex-col flex-1 overflow-auto",
+        style: {
+          marginLeft: layoutSettings?.navigationMode !== 'topbar' && deviceSettings?.header?.showMenu && layoutSettings?.fixedSidebar && !isMobile && LAYOUT_ROOT != '/' ? collapsed ? '64px' : '256px' : '0px'
+        },
+        children: [jsx(SettingDrawer, {
           primaryColor: primaryColor,
           settings: settings,
-          onSettingChange: onSettingChange,
+          onSettingChange: newSettings => {
+            if (actor) {
+              actor.send({
+                type: 'UPDATE',
+                value: newSettings
+              });
+            }
+            onSettingChange?.(newSettings);
+          },
           actor: actor,
-          colorList: getThemeColors(settings?.theme)
-        }), jsx("main", {
-          className: "h-full overflow-y-auto bg-background text-foreground",
-          children: jsx("div", {
-            className: "container px-6 mx-auto grid",
-            children: jsx(Outlet, {})
+          colorList: getThemeColors(settings?.theme),
+          ...props
+        }), jsxs("main", {
+          className: "relative",
+          children: [searchOptionsShown && deviceSettings?.header?.searchBarOverlay && jsx("div", {
+            className: "fixed inset-0 bg-black bg-opacity-50 z-30 cursor-pointer",
+            onClick: e => {
+              e.stopPropagation();
+              setSearchOptionsShown(false);
+            }
+          }), jsx(Outlet, {})]
+        }), jsx("div", {
+          ref: refFooter,
+          className: footerFixed ? 'fixed bottom-0 w-full' : '',
+          children: jsx(FooterSlot, {
+            settings: settings,
+            active: deviceSettings?.footer?.showFooter
           })
-        }), jsx(GlobalFooter, {
-          settings: settings,
-          active: settings?.regions?.showFooter
         })]
       })]
-    })
+    })]
   });
 };export{BasicLayout,useHorizontalScroll};//# sourceMappingURL=index.js.map

package/lib/components/Layout/BasicLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"sourcesContent":[null],"names":[],"mappings":"owCAyBO,MAAM,mBAAmB,GAAG,CAAC;AAChC,EAAA,WAAW;uBAEI;AACX,EAAA;;AAEI,EAAA,MAAA,KAAA,GAAA,MAAa,EAAA;AACT,EAAA,SAAA,CAAA,MAAA;oBAAmB,CAAO,OAAA,IAAA,IAAA;;mBAEL,GAAA,CAAA,IAAA;AACrB,QAAA,IAAA,CAAA,CAAA,MAAI,OAAO;wBACI,EAAA;6BACd,CAAA,KAAA,CAAA;AACD,QAAA,IAAA,MAAA,CAAA,OAAU,GAAC,EAAA,EAAA;qBACI,CAAA,IAAA,CAAA;;AAEf,QAAA,IAAA,MAAA,CAAA,OAAU,GAAY,EAAA,EAAA;AAClB,UAAA,WAAA,CAAA,KAAA,CAAA;;AAER,QAAA,IAAA,MAAE,CAAA,WAAA,GAAA,MAAA,CAAA,OAAA,IAAA,QAAA,CAAA,IAAA,CAAA,YAAA,EAAA;AAEF,UAAA,gBAAuB,EAAA;AACvB;AACI,OAAA;AACJ,MAAA,MAAA,CAAC,gBAAC,CAAA,QAAA,EAAA,OAAA,CAAA;aACL,MAAA;QACA,MAAE,CAAA,mBAAA,CAAA,QAAA,EAAA,OAAA,CAAA;AACP,OAAA;AACJ;AAEA,GAAA,EAAA;AAQI,EAAA,OAAA,KAAQ;AACR;AACA,MAAA,sBAAwB,GAAK,CAAA,SAAG,EAAA,KAAA,KAAA;QAC5B;AACI,IAAA;AACA,GAAA,GAAA,KAAA;AACA,EAAA,MAAA,gBAAY,gBAAA,CAAA,SAAA,CAAA;qBACd,KAAA,KAAA,EAAA;IACN,OAAC;MACG,KAAA,EAAA,KAAA,CAAA,SAAkB,EAAA;AAClB,MAAA,EAAA,EAAA,EAAA;AACA,MAAA,QAAW,EAAA;;AAEH;qBACK,EAAA;eACP,GAAA,eAAA,CAAA,SAAA,EAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA;QACN,OAAC,KAAA,KAAA,QAAA,EAAA;aACM;QACV,GAAA,aAAA;AACD,QAAA;AACJ,OAAE;AAEF;IAGI,OAAM,CAAA,OAAA,KAAA,4EAA0D,CAAA;;SAE1D,aAAY;AAClB,CAAA;AAmBqB,MAAA,WAAA,GAAE,KAAiB,IAAA;QAClC,iBAAwB,GAAA;IAC9B,GAAM,eAAmB;AACzB,IAAA,GAAA;AACA,GAAA;QAEM,CAAA,QAAO,EAAE,YAAY,GAAG,QAAQ,MAAG,CAAA;AACzC,EAAA,MAAA,CAAA,SAAgB,EAAA,YAAK,CAAA,GAAA,QAAgB,CAAA,KAAA,CAAA;QAEa;AAClD,IAAA;AACA,IAAA,2BAAsB;IAEtB,gBAA+B;IAC/B,QAAM;IACN,UAAM,GAAA,GAAA;IACN,IAAM;IAEN,cAAM;WACU;AAChB,IAAA,QAAE;IAEF,WAAM;YACS;eACU;gBACL;AACnB,IAAA,eAAE;IAEH,eAAM;AAEE,IAAA;AACH,GAAA,GAAA,iBAEH;QACI,CAAA,cAAa,EAAG,iBAAA,CAAA,GAAA,QAClB,CAAA,KAAA,CAAA;QACI,CAAQ,SAAE,EAAQ,YAAU,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAC5B,EAAA,MAAA,CAAA,kBAAe,EAAA,qBAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QAEnB;AAGJ,IAAA;MAEM,eAAA;AAEN,EAAA,MAAA;AACI,IAAA;AACI,GAAA,GAAA,MAAA;AACA,EAAA,MAAA;AACA,IAAA,KAAA;AACH,IAAA;AACJ,GAAA,GAAC,QAAC,EAAA;QAEM;AACL,IAAA;mBACU,EAAA;;QAEV,YAAC,GAAA,QAAA,EAAA,QAAA,IAAA,GAAA;QACD,aAAY,WAAa,EAAA,aAAa,GAAA,YAAA,CAAA,IAAA,QAAA,EAAA,aAAA,GAAA,GAAA,CAAA,IAAA,QAAA;;QAGjC,UAAM,GAAA,QAAA,GAAA,QAAA,GAAA,SAAA;AACX,EAAA,MAAA,cAAa,GAAA,aAAU,SAAW,GAAA,UAAA,CAAA,IAAA,EAAA;sBACpB,GAAC,aAAA,EAAA,MAAA,GAAA,UAAA,CAAA,IAAA,EAAA;AACP,EAAA,MAAA,gBAAoB,GAAA,MAAA;gBACpB,CAAQ,aAAU,IAAA,CAAA,aAAU,CAAA;AAC/B,GAAA;QACL,mBAAC,GAAA,mBAAA,CAAA;IACL,WAAY;AAEZ,IAAA,qBAAa;AACb,IAAA;AACA,GAAA,CAAA;QACM,YAAY,GAAA,IAAgB,CAAA;IAElC,GAAS;AACL,GAAA,EAAA,CAAA;qBACQ,GAAA,uBAA+B;sBAA8C,EAAA,QAAK;;sBACnE,CAAA;QACvB,UAAC,GAAA,MAAA,CAAA,QAAA,CAAA;QACD,gCAA0B,EAAA,MAAc,EAAC,eAAA,IAAA,EAAA;QAEvC;AACF,IAAA;AACJ,GAAA,GAAE,kBAAA,CAAA,CAAA;IAEF,SAAM,EAAA,eAAqB;QACvB,YAAiB;AACrB,IAAA,eAAE,EAAA;IAEF,CAAM;AAEN,EAAA,SAAO,CACH,MAAA;0BAoC0B,EAAA,YAAE,KAAM,UAAU,IAAA,YAAA,KAAA,UAAA,EAAA;AAChC,MAAA,MAAA,QAAA,GAAA;AAgBI,QAAA,GAAA,UAAA,CAAA,OAAA;;AAGI,OAAA;AACA,MAAA,eAAA,CAAA,QAAA,CAAA;AACA;AACI,GAAA,EAAA,CAAA,YAAA,EAAA,SAAA,EAAA,UAAW,CAAA,CAAA;AACP;AACA,EAAA,SAAA,CAAA,MAAA;AACJ,IAAA,IAAA,KAAA,IAAA,QAAA,EAAA,QAAO,EAAA;AAClB,MAAA,KAAA,CAAA,IAAA,CAAA;;;AAQe,OAAA,CAAA;AACA;AACH,GAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;AAEL,IAAA,GAAA,EAAA,SAAA;AACJ,IAAA,MAAA,EAAA;;;;AAwBxB,IAAE,MAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/GlobalFooter/BottomMenuDropdown.d.ts

@@ -1,12 +1,5 @@
 import * as React from 'react';
-export interface BottomMenuDropDownProps {
-    menus: any;
-    collapsed: boolean;
-    routeParams: {
-        orgName?: string;
-        [key: string]: string;
-    };
-}
+import { BottomMenuDropDownProps } from '../../typings';
 declare const BottomMenuDropDown: React.FC<BottomMenuDropDownProps>;
 export default BottomMenuDropDown;
 //# sourceMappingURL=BottomMenuDropdown.d.ts.map