@m4l/components 9.3.4 → 9.3.5

package/@types/types.d.ts

@@ -144,6 +144,7 @@ import { RHFUploadSingleFileOwnerState, RHFUploadSingleFileSlotsType } from '../
 import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatusFormatter/types';
 import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
+import { SettingsLayoutOwnerState, SettingsLayoutSlotsType } from '../components/SettingsLayout/types';
 import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar/types';
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
@@ -225,12 +226,14 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
     M4LRHFUploadImage: RHFUploadImageSlotsType;
     M4LPrintingSystem: PrintingSystemSlotsType;
+    M4LSettingsLayout: SettingsLayoutSlotsType;
     M4LScrollbar: ScrollBarSlotsType;
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
     M4LCard: CardSlotsType;
     M4LContainerFlow: ContainerFlowSlotsType;
+    M4LSettingsLayoutBase: SettingsLayoutSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -306,12 +309,14 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: Partial<ChipStatusFormatterOwnerState>;
     M4LRHFUploadImage: Partial<RHFUploadImageOwnerState>;
     M4LPrintingSystem: Partial<PrintingSystemOwnerState>;
+    M4LSettingsLayout: Partial<SettingsLayoutOwnerState>;
     M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
     M4LCard: Partial<CardOwnerState>;
     M4LContainerFlow: Partial<ContainerFlowOwnerState>;
+    M4LSettingsLayoutBase: Partial<SettingsLayoutOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -684,6 +689,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LPrintingSystem'];
       variants?: ComponentsVariants['M4LPrintingSystem'];
     };
+    M4LSettingsLayout?: {
+      defaultProps?: ComponentsPropsList['M4LSettingsLayout'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSettingsLayout'];
+      variants?: ComponentsVariants['M4LSettingsLayout'];
+    };
     M4LScrollBar?: {
       defaultProps?: ComponentsPropsList['M4LScrollBar'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
@@ -714,5 +724,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
       variants?: ComponentsVariants['M4LContainerFlow'];
     };
+    M4LSettingsLayoutBase?: {
+      defaultProps?: ComponentsPropsList['M4LSettingsLayoutBase'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSettingsLayoutBase'];
+      variants?: ComponentsVariants['M4LSettingsLayoutBase'];
+    };
   }
 }

package/components/SettingsLayout/SettingsLayout.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutProps } from './types';
+/**
+ * todo
+ */
+export declare const SettingsLayout: (props: SettingsLayoutProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/SettingsLayout/SettingsLayout.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider, CommonFlags } from "@m4l/core";
+import { useLocales, useThemeSettingsStore } from "@m4l/graphics";
+import { S as SETTINGS_LAYOUT_DEFAULT_WIDTH } from "./constants.js";
+import { useMemo } from "react";
+import { S as SettingsLayoutBase } from "./subcomponents/SettingsLayoutBase/SettingsLayoutBase.js";
+const SettingsLayout = (props) => {
+  const {
+    width = SETTINGS_LAYOUT_DEFAULT_WIDTH
+  } = props;
+  const currentLang = useLocales().currentLocale?.localeString;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { open } = useThemeSettingsStore((state) => state);
+  const prefixPathIcon = `${host_static_assets}/${environment_assets}`;
+  const componentsDictionary = useMemo(() => {
+    return [];
+  }, []);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FlagsProvider, { children: /* @__PURE__ */ jsx(
+    ModuleDictionaryProvider,
+    {
+      isAuth: false,
+      moduleId: "theme_settings",
+      componentsDictionary,
+      currentLang,
+      children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, { flags: [CommonFlags.FLAG_DICTIONARY_LOADED], children: /* @__PURE__ */ jsx(SettingsLayoutBase, { prefixPathIcon, width }) })
+    }
+  ) });
+};
+export {
+  SettingsLayout as S
+};

package/components/SettingsLayout/SettingsLayout.styles.d.ts

@@ -0,0 +1,2 @@
+import { SettingsLayoutstyles } from './types';
+export declare const settingsLayoutStyles: SettingsLayoutstyles;

package/components/SettingsLayout/SettingsLayout.styles.js

@@ -0,0 +1,270 @@
+import { PRIMARY_COLORS_LIGHT, PRIMARY_COLORS_DARK } from "@m4l/styles";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { v as varFade } from "../animate/variants/fade.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const settingsLayoutStyles = {
+  /**
+   * Estilos css de la ranura root
+   */
+  root: ({ theme, ownerState }) => ({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    transform: "unset!important",
+    padding: theme.vars.size.baseSpacings.sp6,
+    opacity: "1!important",
+    display: "flex",
+    position: "fixed",
+    width: ownerState?.width,
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp6,
+    boxShadow: theme.vars.customShadows?.z4,
+    overflowY: "auto",
+    zIndex: theme.zIndex.drawer + 3,
+    ...ownerState?.themeDirection === "ltr" && {
+      borderTopLeftRadius: theme.vars.size.borderRadius.r3,
+      borderBottomLeftRadius: theme.vars.size.borderRadius.r3
+    },
+    ...ownerState?.themeDirection === "rtl" && {
+      borderTopRightRadius: theme.vars.size.borderRadius.r3,
+      borderBottomRightRadius: theme.vars.size.borderRadius.r3
+    },
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.secondary,
+    backgroundColor: theme.vars.palette.background.base,
+    ...ownerState?.themeDirection !== "rtl" ? varFade({
+      distance: ownerState?.width,
+      durationIn: 0.32,
+      durationOut: 0.32
+    }).inRight : varFade({
+      distance: ownerState?.width,
+      durationIn: 0.32,
+      durationOut: 0.32
+    }).inLeft
+  }),
+  /**
+   * Estilos css de la ranura backdrop
+   */
+  backdrop: ({ theme }) => ({
+    background: "transparent",
+    zIndex: theme.zIndex.drawer + 1,
+    transform: "unset",
+    opacity: 1
+  }),
+  /**
+   * Estilos css de la ranura header
+   */
+  headerContainer: () => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  /**
+   * Estilos css de la ranura headerActions
+   */
+  headerActions: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    width: "fit-content",
+    alignItems: "center",
+    padding: theme.vars.size.baseSpacings["sp0-5"],
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.disabled,
+    backgroundColor: theme.vars.palette.background.default
+  }),
+  /**
+   * Estilos css de la ranura content
+   */
+  bodyContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    overflowY: "auto",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp6
+  }),
+  /**
+   * Estilos css de la ranura settingContainer
+   */
+  settingContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp4,
+    gap: theme.vars.size.baseSpacings.sp4,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.vars.palette.background.default
+  }),
+  /**
+   * Estilos css de la ranura settingIconTitle
+   */
+  settingIconTitle: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings["sp2-5"],
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }),
+  /**
+   * Estilos css de la ranura settingItemContent
+   */
+  settingItemContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: theme.vars.size.baseSpacings.sp4,
+    justifyContent: "space-between"
+  }),
+  /**
+   * Estilos css de la ranura settingItem
+   */
+  settingItem: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    border: theme.vars.size.borderStroke.container,
+    borderColor: theme.vars.palette.border.disabled,
+    padding: theme.vars.size.baseSpacings.sp2,
+    outline: "unset",
+    "& .M4LIcon-root": {
+      width: theme.vars.size.baseSpacings.sp5,
+      height: theme.vars.size.baseSpacings.sp5
+    },
+    ...ownerState?.onChange ? {
+      transition: "all 0.3s ease",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: theme.vars.palette.default.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: theme.vars.palette.default.activeOpacity
+      },
+      "&:focus-visible": {
+        borderColor: theme.vars.palette.border.main,
+        boxShadow: theme.vars.customShadows?.primary
+      },
+      ...ownerState?.selected ? {
+        borderColor: theme.vars.palette.border.main,
+        backgroundColor: theme.vars.palette.primary.enabledOpacity,
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.hoverOpacity
+        },
+        "&:active": {
+          backgroundColor: theme.vars.palette.primary.activeOpacity
+        }
+      } : {}
+    } : {}
+  }),
+  /**
+   * Estilos css de la ranura settingItemColorContainer
+   */
+  settingItemColorContainer: () => ({
+    display: "flex",
+    flexDirection: "row",
+    width: "auto",
+    height: "auto",
+    position: "relative"
+  }),
+  /**
+   * Estilos css de la ranura settingItemColor
+   */
+  settingItemColor: ({ theme, ownerState }) => {
+    const presetColor = ownerState?.color ?? "patronus";
+    const presetPalette = ownerState?.mode === "light" ? PRIMARY_COLORS_LIGHT[presetColor] : PRIMARY_COLORS_DARK[presetColor];
+    return {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "box",
+        (size) => ({
+          width: size,
+          height: size
+        })
+      ),
+      "&:focus-visible": {
+        borderColor: theme.vars.palette.border.main,
+        boxShadow: theme.vars.customShadows?.primary,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          inset: "-4px",
+          borderRadius: "40% / 45%",
+          boxShadow: `0 0 0 1px ${presetPalette.focus}`,
+          zIndex: 1
+        }
+      },
+      ...ownerState?.selected ? {
+        "&:before": {
+          content: '""',
+          position: "absolute",
+          inset: "0",
+          borderRadius: theme.vars.size.borderRadius.r3,
+          boxShadow: `0 0 0 1px ${presetPalette.enabled}`,
+          backgroundColor: presetPalette.enabledOpacity,
+          zIndex: 1
+        }
+      } : {},
+      "& .M4LIcon-icon": {
+        display: "flex",
+        flexDirection: "row",
+        backgroundColor: presetPalette.enabled,
+        outline: "unset",
+        position: "relative",
+        overflow: "visible",
+        transition: "all 0.3s ease",
+        ...ownerState?.onChange ? {
+          cursor: "pointer",
+          transition: "all 0.3s ease",
+          "&:hover": {
+            backgroundColor: presetPalette.hover
+          },
+          "&:active": {
+            backgroundColor: presetPalette.active
+          }
+        } : {}
+      }
+    };
+  },
+  /**
+   * Estilos css de la ranura settingFullscreen
+   */
+  settingFullscreen: ({ theme, ownerState }) => ({
+    /*  borderRadius: theme.vars.size.borderRadius['r1-5'],
+    border: 'unset',
+    outline: 'unset', */
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    "& .MuiTypography-root": {
+      width: "fit-content",
+      ...getTypographyStyles(
+        theme.generalSettings.isMobile,
+        ownerState?.size || "medium",
+        "bodyDens"
+      )
+    }
+  }),
+  /**
+   * Estilos css de la ranura icon
+   */
+  icon: {},
+  /**
+   * Estilos css de la ranura typography
+   */
+  typography: {},
+  /**
+   * Estilos css de la ranura divider
+   */
+  divider: {}
+};
+export {
+  settingsLayoutStyles as s
+};

package/components/SettingsLayout/constants.d.ts

@@ -0,0 +1,7 @@
+import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
+/**
+ * Nombre de clase del componente.
+ */
+export declare const SETTINGS_LAYOUT_COMPONENT_KEY = "M4LSettingsLayout";
+export declare const SETTINGS_LAYOUT_CLASSES: Record<keyof typeof SettingsLayoutSlots, string>;
+export declare const SETTINGS_LAYOUT_DEFAULT_WIDTH = 300;

package/components/SettingsLayout/constants.js

@@ -0,0 +1,10 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { S as SettingsLayoutSlots } from "./slots/SettingsLayoutEnum.js";
+const SETTINGS_LAYOUT_COMPONENT_KEY = "M4LSettingsLayout";
+const SETTINGS_LAYOUT_CLASSES = getComponentClasses(SETTINGS_LAYOUT_COMPONENT_KEY, SettingsLayoutSlots);
+const SETTINGS_LAYOUT_DEFAULT_WIDTH = 300;
+export {
+  SETTINGS_LAYOUT_DEFAULT_WIDTH as S,
+  SETTINGS_LAYOUT_COMPONENT_KEY as a,
+  SETTINGS_LAYOUT_CLASSES as b
+};

package/components/SettingsLayout/dictionary.d.ts

@@ -0,0 +1,8 @@
+export declare const DICTIONARY: {
+    MODE: string;
+    DIRECTION: string;
+    PRESETS: string;
+    EXIT_FULLSCREEN: string;
+    FULLSCREEN: string;
+    MODULE_NAME: string;
+};

package/components/SettingsLayout/dictionary.js

@@ -0,0 +1,11 @@
+const DICTIONARY = {
+  MODE: "mode",
+  DIRECTION: "direction",
+  PRESETS: "presets",
+  EXIT_FULLSCREEN: "exit_fullscreen",
+  FULLSCREEN: "fullscreen",
+  MODULE_NAME: "module_name"
+};
+export {
+  DICTIONARY as D
+};

package/components/SettingsLayout/icons.d.ts

@@ -0,0 +1,14 @@
+export declare const PATH_ICONS: {
+    REFRESH: string;
+    CLOSE: string;
+    MOON: string;
+    SUN: string;
+    MODE: string;
+    PALETTE: string;
+    DIRECTION: string;
+    ALIGN_LEFT: string;
+    ALIGN_RIGHT: string;
+    FULLSCREEN: string;
+    FULLSCREEN_EXIT: string;
+    COLOR: string;
+};

package/components/SettingsLayout/icons.js

@@ -0,0 +1,17 @@
+const PATH_ICONS = {
+  REFRESH: "frontend/components/setting_layout/assets/icons/refresh.svg",
+  CLOSE: "frontend/components/setting_layout/assets/icons/closeSmall.svg",
+  MOON: "frontend/components/setting_layout/assets/icons/CloudMoon.svg",
+  SUN: "frontend/components/setting_layout/assets/icons/Sun.svg",
+  MODE: "frontend/components/setting_layout/assets/icons/eclipse.svg",
+  PALETTE: "frontend/components/setting_layout/assets/icons/palette.svg",
+  DIRECTION: "frontend/components/setting_layout/assets/icons/signpost.svg",
+  ALIGN_LEFT: "frontend/components/setting_layout/assets/icons/align-start-vertical.svg",
+  ALIGN_RIGHT: "frontend/components/setting_layout/assets/icons/align-end-vertical.svg",
+  FULLSCREEN: "frontend/components/setting_layout/assets/icons/FrameCorners.svg",
+  FULLSCREEN_EXIT: "frontend/components/setting_layout/assets/icons/exit_fullscreen.svg",
+  COLOR: "frontend/components/setting_layout/assets/icons/color_preset.svg"
+};
+export {
+  PATH_ICONS as P
+};

package/components/SettingsLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { SettingsLayout } from './SettingsLayout';
+export type { SettingsLayoutProps } from './types';

package/components/SettingsLayout/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/slots/SettingsLayoutEnum.d.ts

@@ -0,0 +1,17 @@
+export declare enum SettingsLayoutSlots {
+    root = "root",
+    backdrop = "backdrop",
+    icon = "icon",
+    typography = "typography",
+    divider = "divider",
+    headerContainer = "headerContainer",
+    headerActions = "headerActions",
+    bodyContent = "bodyContent",
+    settingContainer = "settingContainer",
+    settingIconTitle = "settingIconTitle",
+    settingItem = "settingItem",
+    settingItemColor = "settingItemColor",
+    settingItemColorContainer = "settingItemColorContainer",
+    settingItemContent = "settingItemContent",
+    settingFullscreen = "settingFullscreen"
+}

package/components/SettingsLayout/slots/SettingsLayoutEnum.js

@@ -0,0 +1,21 @@
+var SettingsLayoutSlots = /* @__PURE__ */ ((SettingsLayoutSlots2) => {
+  SettingsLayoutSlots2["root"] = "root";
+  SettingsLayoutSlots2["backdrop"] = "backdrop";
+  SettingsLayoutSlots2["icon"] = "icon";
+  SettingsLayoutSlots2["typography"] = "typography";
+  SettingsLayoutSlots2["divider"] = "divider";
+  SettingsLayoutSlots2["headerContainer"] = "headerContainer";
+  SettingsLayoutSlots2["headerActions"] = "headerActions";
+  SettingsLayoutSlots2["bodyContent"] = "bodyContent";
+  SettingsLayoutSlots2["settingContainer"] = "settingContainer";
+  SettingsLayoutSlots2["settingIconTitle"] = "settingIconTitle";
+  SettingsLayoutSlots2["settingItem"] = "settingItem";
+  SettingsLayoutSlots2["settingItemColor"] = "settingItemColor";
+  SettingsLayoutSlots2["settingItemColorContainer"] = "settingItemColorContainer";
+  SettingsLayoutSlots2["settingItemContent"] = "settingItemContent";
+  SettingsLayoutSlots2["settingFullscreen"] = "settingFullscreen";
+  return SettingsLayoutSlots2;
+})(SettingsLayoutSlots || {});
+export {
+  SettingsLayoutSlots as S
+};

package/components/SettingsLayout/slots/SettingsLayoutSlots.d.ts

@@ -0,0 +1,47 @@
+export declare const SettingsLayoutRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const BackdropStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').BackdropOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "ref" | "title" | "timeout" | "id" | "components" | "exit" | "hidden" | "color" | "content" | "style" | "open" | "easing" | "transitionDuration" | "translate" | "className" | "classes" | "sx" | "slots" | "slotProps" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "enter" | "componentsProps" | "TransitionComponent" | "in" | "mountOnEnter" | "unmountOnExit" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "invisible" | "appear">, "children" | "ref" | "title" | "timeout" | "id" | "components" | "exit" | "hidden" | "color" | "content" | "style" | "open" | "easing" | "transitionDuration" | "translate" | "className" | "classes" | "sx" | "slots" | "slotProps" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "enter" | "componentsProps" | "TransitionComponent" | "in" | "mountOnEnter" | "unmountOnExit" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "invisible" | "appear"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').IconProps, keyof import('../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const HeaderContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const HeaderActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DividerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const BodyContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const SettingContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const SettingIconTitleStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const SettingItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const SettingItemContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const SettingItemColorStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').IconProps, keyof import('../..').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const SettingItemColorContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const SettingFullscreenStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "variant" | "translate" | "className" | "classes" | "sx" | "form" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "skeletonWidth" | "startIcon" | "endIcon" | keyof import('react').RefAttributes<HTMLButtonElement> | "disableElevation" | "fullWidth"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SettingsLayoutOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;