@admin-layout/tailwind-design-pro 10.1.1-alpha.9 → 11.2.1-alpha.1

package/lib/components/SettingDrawer/SettingDrawer.js

@@ -1,522 +1,213 @@
-import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useSelector}from'@xstate/react';import {useTranslation}from'react-i18next';import isBrowser from'../../utils/isBrowser/index.js';import {parse}from'qs';import clsx from'clsx';import {defaultSettings,compareAndSaveSettingsDifferences}from'@admin-layout/client';import ThemeColor from'./ThemeColor.js';import CheckBoxTheme from'./CheckBoxTheme.js';import LayoutChange from'./LayoutChange.js';import RegionalSettings from'./RegionalSettings.js';import {ThemeSelector}from'./ThemeSelector.js';import NavigationModes from'./NavigationsModes.js';import {icons}from'../../icons.js';import'@common-stack/components-pro';import {AdditionalSettingsSlot}from'../Layout/slot-fill/AdditionalSettings.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {WebFontsSelector}from'./WebFontsSelector.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';let oldSetting = {};
-const updateTheme = (dark, color, publicPath = '/theme') => {
-  // ssr
-  if (typeof window === 'undefined' || !window.umi_plugin_ant_themeVar) {
-    return;
-  }
-  const href = dark ? `${publicPath}/dark` : `${publicPath}/`;
-  // If it is DARK, and is color = daybreak, there is no need to splice
-  let colorFileName = dark && color ? `-${encodeURIComponent(color)}` : encodeURIComponent(color || '');
-  if (color === 'daybreak' && dark) {
-    colorFileName = '';
-  }
-  const dom = document.getElementById('theme-style');
-  // If these two are empty
-  if (!href && !colorFileName) {
-    if (dom) {
-      dom.remove();
-      localStorage.removeItem('site-theme');
-    }
-    return;
-  }
-  const url = `${href}${colorFileName || ''}.css`;
-  if (dom) {
-    dom.onload = () => {
-      window.setTimeout(() => {});
-    };
-    dom.href = url;
-  } else {
-    const style = document.createElement('link');
-    style.type = 'text/css';
-    style.rel = 'stylesheet';
-    style.id = 'theme-style';
-    style.onload = () => {
-      window.setTimeout(() => {});
-    };
-    style.href = url;
-    if (document.body.append) {
-      document.body.append(style);
-    } else {
-      document.body.appendChild(style);
-    }
-  }
-  // localStorage.setItem('site-theme', dark ? 'dark' : 'light');
-};
-const initState = (settings, onSettingChange, publicPath) => {
-  if (!isBrowser()) {
-    return;
-  }
-  let loadedStyle = false;
-  if (window.location.search) {
-    const params = parse(window.location.search.replace('?', ''));
-    const replaceSetting = {};
-    Object.keys(params).forEach(key => {
-      if (defaultSettings[key] || defaultSettings[key] === undefined) {
-        replaceSetting[key] = params[key];
-        if (key.includes('Render')) {
-          replaceSetting[key] = params[key] === 'false' ? false : undefined;
-        }
-      }
-    });
-    if (onSettingChange) {
-      onSettingChange({
-        ...settings,
-        ...replaceSetting
-      });
-    }
-    // Set the topic in the URL and load it once.
-    if (oldSetting.navTheme !== params.navTheme && params.navTheme) {
-      updateTheme(settings.navTheme === 'realDark', params.primaryColor, publicPath);
-      loadedStyle = true;
-    }
-  }
-  if (loadedStyle) {
-    return;
-  }
-  // If there is no topic in the URL, and no load in the URL is loaded.
-  if (defaultSettings.navTheme !== settings.navTheme && settings.navTheme) {
-    updateTheme(settings.navTheme === 'realDark', settings.primaryColor, publicPath);
-  }
-};
-const getThemeList = (settings, location) => {
-  const {
-    t
-  } = useTranslation('settings');
-  const {
-    isMobile
-  } = useMediaQuery();
-  const currentRoute = location?.pathname || '/';
-  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
-  const deviceType = isMobile ? 'mobile' : 'desktop';
-  const deviceLayout = routeSettings?.layout?.[deviceType] || {};
-  let list = [];
-  const defaultList = [
-  //@sri following are needed otherwise we need make above plugin to work
-  {
-    key: 'dust',
-    fileName: 'dust.css',
-    modifyVars: {
-      '@primary-color': '#F5222D'
-    }
-  }, {
-    key: 'volcano',
-    fileName: 'volcano.css',
-    modifyVars: {
-      '@primary-color': '#FA541C'
-    }
-  }, {
-    key: 'sunset',
-    fileName: 'sunset.css',
-    modifyVars: {
-      '@primary-color': '#FAAD14'
-    }
-  }, {
-    key: 'cyan',
-    fileName: 'cyan.css',
-    modifyVars: {
-      '@primary-color': '#13C2C2'
-    }
-  }, {
-    key: 'green',
-    fileName: 'green.css',
-    modifyVars: {
-      '@primary-color': '#52C41A'
-    }
-  }, {
-    key: 'geekblue',
-    fileName: 'geekblue.css',
-    modifyVars: {
-      '@primary-color': '#2F54EB'
-    }
-  }, {
-    key: 'purple',
-    fileName: 'purple.css',
-    modifyVars: {
-      '@primary-color': '#722ED1'
-    }
-  }];
-  // ssr
-  if (typeof window === 'undefined') {
-    list = defaultList;
-  } else {
-    list = window.umi_plugin_ant_themeVar || defaultList;
-  }
-  const themeList = [{
-    key: 'light',
-    title: t('light')
-  }];
-  const darkColorList = [{
-    key: 'daybreak',
-    color: '#1890ff',
-    theme: 'dark'
-  }];
-  const lightColorList = [{
-    key: 'daybreak',
-    color: '#1890ff',
-    theme: 'dark'
-  }];
-  if (deviceLayout.navigationMode !== 'mixed') {
-    themeList.push({
-      key: 'dark',
-      title: t('dark')
-    });
-  }
-  if (list.find(item => item.theme === 'dark')) {
-    themeList.push({
-      key: 'realDark',
-      title: t('dark')
-    });
-  }
-  // insert  theme color List
-  list.forEach(item => {
-    const color = (item.modifyVars || {})['@primary-color'];
-    if (item.theme === 'dark' && color) {
-      darkColorList.push({
-        color,
-        ...item
-      });
-    }
-    if (!item.theme || item.theme === 'light') {
-      lightColorList.push({
-        color,
-        ...item
-      });
-    }
-  });
-  return {
-    colorList: {
-      dark: darkColorList,
-      light: lightColorList
-    },
-    themeList
-  };
-};
-const themeOptions = [{
-  key: 'default',
-  title: 'Default'
-}, {
-  key: 'github',
-  title: 'Github Theme'
-}, {
-  key: 'slack',
-  title: 'Slack Theme'
-}, {
-  key: 'airbnb',
-  title: 'Airbnb Theme'
-}, {
-  key: 'spotify',
-  title: 'Spotify Theme'
-}];
-const fontOptions = [{
-  key: 'Poppins, sans-serif',
-  title: 'Poppins'
-}, {
-  key: 'Roboto, sans-serif',
-  title: 'Roboto'
-}, {
-  key: 'Open Sans, sans-serif',
-  title: 'Open Sans'
-}, {
-  key: 'Montserrat, sans-serif',
-  title: 'Montserrat'
-}, {
-  key: 'Lato, sans-serif',
-  title: 'Lato'
-}, {
-  key: 'Nunito, sans-serif',
-  title: 'Nunito'
-}, {
-  key: 'Ubuntu, sans-serif',
-  title: 'Ubuntu'
-}, {
-  key: 'Inter, sans-serif',
-  title: 'Inter'
-}, {
-  key: 'Arial, sans-serif',
-  title: 'Arial'
-}, {
-  key: 'Helvetica, sans-serif',
-  title: 'Helvetica'
-}, {
-  key: 'Tahoma, sans-serif',
-  title: 'Tahoma'
-}, {
-  key: 'Trebuchet MS, sans-serif',
-  title: 'Trebuchet MS'
-}, {
-  key: 'Georgia, serif',
-  title: 'Georgia'
-}, {
-  key: 'Bookman, serif',
-  title: 'Bookman'
-}, {
-  key: 'Geneva, sans-serif',
-  title: 'Geneva'
-}, {
-  key: 'Lucida Console, monospace',
-  title: 'Lucida Console'
-}, {
-  key: 'Courier New, monospace',
-  title: 'Courier New'
-}, {
-  key: 'Lucida Sans, sans-serif',
-  title: 'Lucida Sans'
-}];
-const SettingDrawer = props => {
+import {useSelector}from'@xstate/react';import clsx from'clsx';import*as React from'react';import {useRef,useState,useEffect}from'react';import {useTranslation}from'react-i18next';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';import {icons}from'../../icons.js';import isBrowser from'../../utils/isBrowser/index.js';import {getDefaultApplyToAllRoutes,getSettingValue}from'../../utils/settingsUtils.js';import'@common-stack/components-pro';import {AdditionalSettingsSlot}from'../Layout/slot-fill/AdditionalSettings.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {ApplyToAllRoutesToggle}from'./components/ApplyToAllRoutesToggle.js';import {CheckBoxTheme}from'./components/CheckBoxTheme.js';import {DeviceTabs}from'./components/DeviceTabs.js';import {InvitationSettings}from'./components/InvitationSettings.js';import {LayoutChange}from'./components/LayoutChange.js';import {MenuVisibilitySettings}from'./components/MenuVisibilitySettings.js';import {NavigationModes}from'./components/NavigationsModes.js';import {RegionalSettings}from'./components/RegionalSettings.js';import {SettingsActions}from'./components/SettingsActions.js';import {SettingsDrawerHeader}from'./components/SettingsDrawerHeader.js';import {ThemeColor}from'./components/ThemeColor.js';import {ThemeSelector}from'./components/ThemeSelector.js';import {WebFontsSelector}from'./components/WebFontsSelector.js';import {useSettingsOperations}from'./hooks/useSettingsOperations.js';import {THEME_OPTIONS,FONT_OPTIONS}from'./utils/constants.js';import {useThemeList,parseSettingPath}from'./utils/helper.js';function SettingDrawer(props) {
   const {
-    settings,
-    onSettingChange,
-    hideLoading,
-    hideColors,
-    publicPath,
-    hideHintAlert,
-    hideCopyButton,
     actor,
     colorList,
     navTheme,
     pathname,
-    location
+    location,
+    fullMenuData,
+    routePattern
   } = props;
   const {
     CloseIcon,
-    Settings5FillIcon,
-    CopyIcon,
-    CheckIcon
+    Settings5FillIcon
   } = icons;
-  const [show, setShow] = useState(false);
+  // Refs
+  const btnRef = useRef();
+  // Hooks
   const {
     isMobile
   } = useMediaQuery();
-  const [copied, setCopied] = useState(false);
-  const [copiedModified, setCopiedModified] = useState(false);
   const {
     t
   } = useTranslation('settings');
-  const state = useSelector(actor, state => state);
-  const btnRef = useRef();
-  const settingState = state?.context;
-  const currentRoute = location?.pathname || '/';
-  // const routeSettings =
-  //     settingState?.routeSettings?.[currentRoute] || settingState?.routeSettings?.['/'] || settingState;
-  const deviceType = isMobile ? 'mobile' : 'desktop';
-  // const deviceLayout = routeSettings?.layout?.[deviceType] || {};
-  const themeList = getThemeList(settingState, location);
-  console.log('--STATE--', settingState);
-  /**
-   * Modify settings
-   * @param key
-   * @param value
-   */
-  const handleSettingChange = (key, value) => {
-    // If the key is a layout setting, update it in the device-specific path
-    if (key.startsWith('layout.')) {
-      const layoutKey = key.replace('layout.', '');
+  // State
+  const [show, setShow] = useState(false);
+  const [activeDeviceTab, setActiveDeviceTab] = useState(isMobile ? 'mobile' : 'desktop');
+  const [applyToAllRoutes, setApplyToAllRoutes] = useState(false);
+  // Selectors - guard actor so that useSelector isn't called with undefined/invalid actor
+  const settingState = actor ? useSelector(actor, state => state.context.public) : {};
+  const changedSettings = actor ? useSelector(actor, state => state.context.internal.changedSettings) : {};
+  // Custom hooks
+  const {
+    copied,
+    copiedModified,
+    handleCopySettings,
+    handleCopyModifiedSettings,
+    handleSaveSettings,
+    handleResetSettings
+  } = useSettingsOperations({
+    actor,
+    settingState,
+    changedSettings
+  });
+  // Computed values
+  const currentRoute = routePattern || location?.pathname || '/';
+  const deviceType = activeDeviceTab;
+  const currentPathname = isBrowser() ? window.location.pathname : pathname || '';
+  const themeList = useThemeList(settingState, location, routePattern);
+  // Derived state
+  const defaultApplyToAllRoutes = React.useMemo(() => {
+    return getDefaultApplyToAllRoutes(settingState, currentRoute, deviceType);
+  }, [settingState, currentRoute, deviceType]);
+  const settingsForComponents = settingState;
+  // Effects
+  useEffect(() => {
+    setApplyToAllRoutes(defaultApplyToAllRoutes);
+  }, [defaultApplyToAllRoutes]);
+  useEffect(() => {
+    setActiveDeviceTab(isMobile ? 'mobile' : 'desktop');
+  }, [isMobile]);
+  useEffect(() => {
+    if (actor) {
       actor.send({
-        type: 'UPDATE',
-        value: {
-          [`routeSettings.${currentRoute}.layout.${deviceType}.${layoutKey}`]: value
-        }
+        type: 'UISETTING_UPDATE_DEVICE_TYPE',
+        deviceType: activeDeviceTab
       });
-    } else {
+    }
+  }, [activeDeviceTab, actor]);
+  // Helper func
+  function handleSettingChange(key, value) {
+    const isGlobalSetting = key === 'hiddenMenuKeys' || key === 'hiddenMenuCategories' || key === 'applyToAllRoutes' || key === 'fixedHeader' || key === 'fixedSidebar' || key === 'splitMenus' || key === 'upperMenuDividerName' || key === 'middleMenuDividerName' || key === 'lowerMenuDividerName';
+    if (isGlobalSetting) {
       actor.send({
-        type: 'UPDATE',
+        type: 'UISETTING_UPDATE',
         value: {
           [key]: value
         }
       });
+      return;
     }
-  };
-  const handleCopySettings = async () => {
-    if (!isBrowser()) return;
-    try {
-      const settings = JSON.stringify(settingState, null, 2);
-      await navigator.clipboard.writeText(settings);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy settings:', err);
-    }
-  };
-  const handleCopyModifiedSettings = async () => {
-    if (!isBrowser()) return;
-    try {
-      const modifiedSettings = compareAndSaveSettingsDifferences(settingState, defaultSettings);
-      const settings = JSON.stringify(modifiedSettings, null, 2);
-      await navigator.clipboard.writeText(settings);
-      setCopiedModified(true);
-      setTimeout(() => setCopiedModified(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy modified settings:', err);
-    }
-  };
-  useEffect(() => {
-    // Only update if there's a meaningful difference
-    if (JSON.stringify(settingState) !== JSON.stringify(settings)) {
-      oldSetting = {
-        ...defaultSettings,
-        ...settings
-      };
-      if (isBrowser()) {
-        // Compare settings with oldSetting to determine if initialization is needed
-        if (JSON.stringify(settings) !== JSON.stringify(oldSetting)) {
-          initState(settings, onSettingChange, props.publicPath);
-        }
-      }
-    }
-  }, [settings]); // Only depend on settings
-  const currentPathname = isBrowser() ? window.location.pathname : pathname || '';
-  return jsx(Fragment, {
-    children: settings?.showSettingPanel && jsxs(Fragment, {
-      children: [jsx("button", {
-        ref: btnRef,
-        onClick: () => setShow(!show),
-        style: {
-          backgroundColor: settings?.primaryColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
-        className: `fixed top-24 right-0 z-50 border-none cursor-pointer transition duration-500 w-12 h-12 rounded-l-lg hover:bg-opacity-80 ${show ? 'mr-[20rem]' : 'mr-0'}`,
-        children: !show ? jsx(Settings5FillIcon, {
-          fontSize: '32px',
-          className: "text-white"
-        }) : jsx(CloseIcon, {
-          className: "text-white",
-          fontSize: '36px'
-        })
-      }), jsxs("div", {
-        className: clsx('fixed right-0 top-0 w-[20rem] transition-all duration-500 overflow-hidden overflow-y-auto z-50 p-4 min-h-full max-h-full', 'bg-white dark:bg-[#1f1f1f]', show ? 'opacity-100 visible' : 'w-0 opacity-0 invisible', 'shadow-lg'),
-        children: [jsxs("div", {
-          className: "flex flex-row items-center",
-          children: [jsx("p", {
-            className: "text-2xl mb-0 text-black dark:text-white",
-            children: t('setting')
-          }), jsx("div", {
-            className: "flex-grow"
-          }), jsx("button", {
-            onClick: () => setShow(false),
-            className: "bg-transparent border-none rounded-lg w-10 h-10 cursor-pointer mb-2 hover:bg-gray-200 dark:hover:bg-[#2a2a2a]",
-            children: jsx(CloseIcon, {
-              fontSize: '36px'
-            })
-          })]
-        }), jsxs("div", {
-          className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
-          children: [jsx("p", {
-            className: "text-black dark:text-white",
-            children: t('page_style_settings')
-          }), jsx("div", {
-            children: jsx(CheckBoxTheme, {
-              list: themeList.themeList,
-              changeSetting: handleSettingChange,
-              settings: settingState,
-              ...props
-            })
-          }), jsxs("div", {
-            className: "mt-8",
-            children: [jsx("p", {
-              className: "text-black dark:text-white",
-              children: t('Select Theme')
-            }), jsx(ThemeSelector, {
-              value: settingState.theme || 'default',
-              onChange: value => handleSettingChange('theme', value),
-              options: themeOptions
-            })]
-          }), jsxs("div", {
-            className: "mt-8 dark:border-[#2a2b2a]",
-            children: [jsx("p", {
-              className: "mb-2 text-black dark:text-white",
-              children: t('theme_color')
-            }), jsx(ThemeColor, {
-              color: colorList || themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light'],
-              changeSetting: handleSettingChange,
-              settings: settingState
-            })]
-          }), jsxs("div", {
-            className: "mt-8",
-            children: [jsx("p", {
-              className: "text-black dark:text-white",
-              children: t('Font Family')
-            }), jsx(WebFontsSelector, {
-              value: settingState.fontFamily || 'Poppins, sans-serif',
-              onChange: value => handleSettingChange('fontFamily', value),
-              options: fontOptions
-            })]
-          })]
-        }), jsxs("div", {
-          className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
-          children: [jsx(NavigationModes, {
-            settings: settingState,
-            changeSetting: handleSettingChange,
-            ...props
-          }), jsx("div", {
-            className: "mt-8",
-            children: jsx(LayoutChange, {
-              settings: settingState,
-              changeSetting: handleSettingChange,
-              ...props
-            })
-          })]
-        }), jsxs("div", {
-          className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
-          children: [jsx("p", {
-            className: "mb-2 text-black dark:text-white",
-            children: t('regional_rettings')
-          }), jsx(RegionalSettings, {
-            settings: settingState,
-            changeSetting: handleSettingChange,
-            ...props
-          })]
-        }), jsx("div", {
-          className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]",
-          children: jsx(AdditionalSettingsSlot, {
-            settings: settingState,
-            onSettingsChange: handleSettingChange,
-            pathname: currentPathname
-          })
-        }), jsxs("div", {
-          className: "bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mt-4",
-          children: [jsx("p", {
-            className: "text-sm text-yellow-700 dark:text-yellow-200",
-            children: "Setting panel shows in development environment only, please manually modify"
-          }), jsxs("div", {
-            className: "flex flex-wrap gap-2 mt-2",
-            children: [jsx("button", {
-              className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', copied ? 'border-green-300 text-green-700 bg-green-50 dark:border-green-600 dark:text-green-200 dark:bg-green-900' : 'border-yellow-300 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 dark:border-yellow-600 dark:text-yellow-200 dark:bg-yellow-900/50 dark:hover:bg-yellow-900'),
-              onClick: handleCopySettings,
-              children: copied ? jsxs(Fragment, {
-                children: [jsx(CheckIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copied!"
-                })]
-              }) : jsxs(Fragment, {
-                children: [jsx(CopyIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copy All Settings"
-                })]
-              })
-            }), jsx("button", {
-              className: clsx('flex-1 min-w-[140px] sm:flex-none sm:w-auto px-4 py-2 rounded-lg border text-sm font-medium shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2', copiedModified ? 'border-green-300 text-green-700 bg-green-50 dark:border-green-600 dark:text-green-200 dark:bg-green-900' : 'border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 dark:border-blue-600 dark:text-blue-200 dark:bg-blue-900/50 dark:hover:bg-blue-900'),
-              onClick: handleCopyModifiedSettings,
-              children: copiedModified ? jsxs(Fragment, {
-                children: [jsx(CheckIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copied!"
-                })]
-              }) : jsxs(Fragment, {
-                children: [jsx(CopyIcon, {
-                  className: "w-4 h-4"
-                }), jsx("span", {
-                  children: "Copy Modified Settings"
-                })]
-              })
-            })]
-          })]
-        })]
-      })]
-    })
-  });
-};export{SettingDrawer};//# sourceMappingURL=SettingDrawer.js.map
+    const bracketKey = applyToAllRoutes ? `[${deviceType}]` : `[${currentRoute}][${deviceType}]`;
+    const settingObject = parseSettingPath(key, value);
+    const nestedValue = {
+      [bracketKey]: settingObject
+    };
+    actor.send({
+      type: 'UISETTING_UPDATE',
+      value: nestedValue
+    });
+  }
+  function getThemeValue() {
+    return getSettingValue(settingState, 'theme', applyToAllRoutes, currentRoute, deviceType, 'default');
+  }
+  function getFontFamilyValue() {
+    return getSettingValue(settingState, 'fontFamily', applyToAllRoutes, currentRoute, deviceType, 'Poppins, sans-serif');
+  }
+  return React.createElement(React.Fragment, null, settingState?.showSettingPanel && React.createElement(React.Fragment, null, React.createElement("button", {
+    ref: btnRef,
+    onClick: () => setShow(!show),
+    style: {
+      backgroundColor: settingState?.primaryColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    className: `fixed top-24 right-0 z-50 border-none cursor-pointer transition duration-500 w-12 h-12 rounded-l-lg hover:bg-opacity-80 ${show ? 'mr-[20rem]' : 'mr-0'}`
+  }, !show ? React.createElement(Settings5FillIcon, {
+    fontSize: '32px',
+    className: "text-white"
+  }) : React.createElement(CloseIcon, {
+    className: "text-white",
+    fontSize: '36px'
+  })), React.createElement("div", {
+    className: clsx('fixed right-0 top-0 w-[20rem] transition-all duration-500 overflow-hidden overflow-y-auto z-50 p-4 min-h-full max-h-full', 'bg-white dark:bg-[#1f1f1f]', show ? 'opacity-100 visible' : 'w-0 opacity-0 invisible', 'shadow-lg')
+  }, React.createElement(SettingsDrawerHeader, {
+    onClose: () => setShow(false)
+  }), React.createElement("div", {
+    className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]"
+  }, React.createElement(MenuVisibilitySettings, {
+    fullMenuData: fullMenuData,
+    settings: settingState,
+    changeSetting: handleSettingChange
+  }), React.createElement(ApplyToAllRoutesToggle, {
+    checked: applyToAllRoutes,
+    onChange: setApplyToAllRoutes
+  }), React.createElement(DeviceTabs, {
+    activeTab: activeDeviceTab,
+    onTabChange: setActiveDeviceTab
+  })), React.createElement("div", {
+    className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]"
+  }, React.createElement("p", {
+    className: "text-black dark:text-white"
+  }, t('page_style_settings')), React.createElement("div", null, React.createElement(CheckBoxTheme, {
+    list: themeList.themeList,
+    changeSetting: handleSettingChange,
+    settings: settingsForComponents,
+    location: location,
+    applyToAllRoutes: applyToAllRoutes
+  })), React.createElement("div", {
+    className: "mt-8"
+  }, React.createElement("p", {
+    className: "text-black dark:text-white"
+  }, t('Select Theme')), React.createElement(ThemeSelector, {
+    value: getThemeValue(),
+    onChange: value => handleSettingChange('theme', value),
+    options: THEME_OPTIONS
+  })), React.createElement("div", {
+    className: "mt-8 dark:border-[#2a2b2a]"
+  }, React.createElement("p", {
+    className: "mb-2 text-black dark:text-white"
+  }, t('theme_color')), React.createElement(ThemeColor, {
+    color: colorList || themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light'],
+    changeSetting: handleSettingChange,
+    settings: settingsForComponents,
+    location: location,
+    routePattern: routePattern,
+    applyToAllRoutes: applyToAllRoutes
+  })), React.createElement("div", {
+    className: "mt-8"
+  }, React.createElement("p", {
+    className: "text-black dark:text-white"
+  }, t('Font Family')), React.createElement(WebFontsSelector, {
+    value: getFontFamilyValue(),
+    onChange: value => handleSettingChange('fontFamily', value),
+    options: FONT_OPTIONS
+  }))), React.createElement("div", {
+    className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]"
+  }, React.createElement(NavigationModes, {
+    settings: settingsForComponents,
+    changeSetting: handleSettingChange,
+    applyToAllRoutes: applyToAllRoutes,
+    location: location,
+    routePattern: routePattern
+  }), React.createElement("div", {
+    className: "mt-8"
+  }, React.createElement(LayoutChange, {
+    settings: settingsForComponents,
+    changeSetting: handleSettingChange,
+    applyToAllRoutes: applyToAllRoutes,
+    location: location,
+    routePattern: routePattern
+  })), React.createElement("div", {
+    className: "mt-8"
+  }, React.createElement(InvitationSettings, {
+    settings: settingsForComponents,
+    changeSetting: handleSettingChange,
+    location: location,
+    routePattern: routePattern,
+    applyToAllRoutes: applyToAllRoutes
+  }))), React.createElement("div", {
+    className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]"
+  }, React.createElement(RegionalSettings, {
+    settings: settingsForComponents,
+    changeSetting: handleSettingChange,
+    applyToAllRoutes: applyToAllRoutes,
+    location: location,
+    routePattern: routePattern
+  })), React.createElement("div", {
+    className: "mt-8 pb-8 border-b border-black dark:border-[#2a2b2a]"
+  }, React.createElement(AdditionalSettingsSlot, {
+    settings: settingsForComponents,
+    onSettingsChange: handleSettingChange,
+    pathname: currentPathname
+  })), React.createElement(SettingsActions, {
+    hasChanges: changedSettings && Object.keys(changedSettings).length > 0,
+    copied: copied,
+    copiedModified: copiedModified,
+    onSave: handleSaveSettings,
+    onCopyAll: handleCopySettings,
+    onCopyModified: handleCopyModifiedSettings,
+    onReset: handleResetSettings
+  }))));
+}export{SettingDrawer};//# sourceMappingURL=SettingDrawer.js.map