@m4l/components 9.2.65 → 9.3.1-B21072025-beta.1

package/components/SettingsLayout/SettingsLayout.styles.js

@@ -0,0 +1,245 @@
+import { PRIMARY_COLORS_LIGHT, PRIMARY_COLORS_DARK } from "@m4l/styles";
+import { v as varFade } from "../animate/variants/fade.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 settingItemColor
+   */
+  settingItemColor: ({ theme, ownerState }) => {
+    const presetColor = ownerState?.color ?? "patronus";
+    const presetPalette = ownerState?.mode === "light" ? PRIMARY_COLORS_LIGHT[presetColor] : PRIMARY_COLORS_DARK[presetColor];
+    return {
+      display: "flex",
+      flexDirection: "row",
+      width: "24px",
+      height: "24px",
+      borderRadius: theme.vars.size.borderRadius.r2,
+      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
+        },
+        "&:focus-visible": {
+          borderColor: theme.vars.palette.border.main,
+          boxShadow: theme.vars.customShadows?.primary,
+          "&:after": {
+            content: '""',
+            position: "absolute",
+            inset: "-5px",
+            borderRadius: theme.vars.size.borderRadius.r3,
+            boxShadow: `0 0 0 1px ${presetPalette.focus}`,
+            zIndex: 1
+          }
+        },
+        ...ownerState?.selected ? {
+          "&:before": {
+            content: '""',
+            position: "absolute",
+            inset: "-5px",
+            borderRadius: theme.vars.size.borderRadius.r3,
+            boxShadow: `0 0 0 1px ${presetPalette.enabled}`,
+            backgroundColor: presetPalette.enabledOpacity,
+            zIndex: 1
+          }
+        } : {}
+      } : {}
+    };
+  },
+  /**
+   * Estilos css de la ranura settingFullscreen
+   */
+  settingFullscreen: ({ theme }) => ({
+    /*  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"
+    }
+  }),
+  /**
+   * 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_CLASSES as a,
+  SETTINGS_LAYOUT_COMPONENT_KEY as b
+};

package/components/SettingsLayout/dictionary.d.ts

@@ -0,0 +1,56 @@
+export declare const DICTIONARY: {
+    COMPANY_SLOGAN: string;
+    COMPANY_NAME: string;
+    MODE: string;
+    DIRECTION: string;
+    PRESETS: string;
+    STRETCH: string;
+    EXIT_FULLSCREEN: string;
+    FULLSCREEN: string;
+    COMPANY_NAME_SUBTITLE: string;
+    VALIDATION_EMAIL_INVALID: string;
+    VALIDATION_PWD_REQUIRED: string;
+    LABEL_BACK_LOGIN: string;
+    LABEL_EMAIL: string;
+    LABEL_INTRO: string;
+    MODULE_DESCRIPTION: string;
+    MODULE_LEYEND: string;
+    MODULE_NAME: string;
+    LABEL_PWD: string;
+    LABEL_PWD_CONFIRM: string;
+    LABEL_FORGOT: string;
+    LABEL_NOT_MEMBER: string;
+    LABEL_REGISTER: string;
+    LABEL_REMEMBERME: string;
+    LABEL_USER: string;
+    P_HOLDER_USER: string;
+    VALIDATION_USER_REQUIRED: string;
+    VALIDATION_EMAIL_REQUIRED: string;
+    VALIDATION_PWD_INVALID: string;
+    LABEL_FIRST_PHONE: string;
+    LABEL_COMPANY_NAME: string;
+    LABEL_COUNTRY_LABORATORY: string;
+    LABEL_EMAIL_CONFIRM: string;
+    LABEL_FIRST_NAME: string;
+    LABEL_LAST_NAME: string;
+    LABEL_MEMBER: string;
+    LABEL_STATE: string;
+    LABEL_CITY: string;
+    LABEL_ADDRESS: string;
+    LABEL_COUNTRY_CLIENT: string;
+    VALIDATION_FIRST_PHONE_REQUIRED: string;
+    VALITATION_COMPONY_NAME_REQUIRED: string;
+    VALIDATION_COUNTRY_LABORATORY_REQUIRED: string;
+    VALIDATION_COUNTRY_CLIENT_REQUIRED: string;
+    VALIDATION_EMAIL_CONFIRM_MATCHES: string;
+    VALIDATION_FIRST_NAME_REQUIRED: string;
+    VALIDATION_LAST_NAME_REQUIRED: string;
+    VALIDATION_STATE_REQUIRED: string;
+    VALIDATION_CITY_REQUIRED: string;
+    VALIDATION_ADDRESS_REQUIRED: string;
+    MODULE_DESCRIPTION_COMPLETED: string;
+    LABEL_CHANGE_PASSWORD_COMPLETED: string;
+    VALIDATION_PWD_CONFIRM_MATCHES: string;
+    NOT_FOUND_TITLE: string;
+    NOT_FOUND_DESCRIPTION: string;
+};

package/components/SettingsLayout/dictionary.js

@@ -0,0 +1,12 @@
+const DICTIONARY = {
+  /* ---------------------Settings 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,13 @@
+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;
+};

package/components/SettingsLayout/icons.js

@@ -0,0 +1,16 @@
+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"
+};
+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,16 @@
+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",
+    settingItemContent = "settingItemContent",
+    settingFullscreen = "settingFullscreen"
+}

package/components/SettingsLayout/slots/SettingsLayoutEnum.js

@@ -0,0 +1,20 @@
+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["settingItemContent"] = "settingItemContent";
+  SettingsLayoutSlots2["settingFullscreen"] = "settingFullscreen";
+  return SettingsLayoutSlots2;
+})(SettingsLayoutSlots || {});
+export {
+  SettingsLayoutSlots as S
+};

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

@@ -0,0 +1,44 @@
+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<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;
+}, {}, {}>;

package/components/SettingsLayout/slots/SettingsLayoutSlots.js

@@ -0,0 +1,78 @@
+import { styled } from "@mui/material/styles";
+import { S as SettingsLayoutSlots } from "./SettingsLayoutEnum.js";
+import { b as SETTINGS_LAYOUT_COMPONENT_KEY } from "../constants.js";
+import { s as settingsLayoutStyles } from "../SettingsLayout.styles.js";
+import { Backdrop } from "@mui/material";
+import { I as Icon } from "../../Icon/Icon.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { B as Button } from "../../mui_extended/Button/Button.js";
+const SettingsLayoutRootStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.root
+})(settingsLayoutStyles.root);
+const BackdropStyled = styled(Backdrop, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.backdrop
+})(settingsLayoutStyles.backdrop);
+styled(Icon, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.icon
+})(settingsLayoutStyles.icon);
+const TypographyStyled = styled(Typography, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.typography
+})(settingsLayoutStyles.typography);
+const HeaderContainerStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.headerContainer
+})(settingsLayoutStyles.headerContainer);
+const HeaderActionsStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.headerActions
+})(settingsLayoutStyles.headerActions);
+styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.divider
+})(settingsLayoutStyles.divider);
+const BodyContentStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.bodyContent
+})(settingsLayoutStyles.bodyContent);
+const SettingContainerStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingContainer
+})(settingsLayoutStyles.settingContainer);
+const SettingIconTitleStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingIconTitle
+})(settingsLayoutStyles.settingIconTitle);
+const SettingItemStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItem
+})(settingsLayoutStyles.settingItem);
+const SettingItemContentStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemContent
+})(settingsLayoutStyles.settingItemContent);
+const SettingItemColorStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemColor
+})(settingsLayoutStyles.settingItemColor);
+const SettingFullscreenStyled = styled(Button, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingFullscreen
+})(settingsLayoutStyles.settingFullscreen);
+export {
+  BackdropStyled as B,
+  HeaderContainerStyled as H,
+  SettingContainerStyled as S,
+  TypographyStyled as T,
+  SettingIconTitleStyled as a,
+  SettingItemContentStyled as b,
+  SettingFullscreenStyled as c,
+  SettingItemStyled as d,
+  SettingItemColorStyled as e,
+  SettingsLayoutRootStyled as f,
+  HeaderActionsStyled as g,
+  BodyContentStyled as h
+};

package/components/SettingsLayout/subcomponents/SettingColorPresets/SettingColorPresets.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Color presets
+ */
+export declare const SettingColorPresets: () => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingColorPresets/SettingColorPresets.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { useBase, useModuleDictionary } from "@m4l/core";
+import { S as SettingContainerStyled, a as SettingIconTitleStyled, b as SettingItemContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { P as PATH_ICONS } from "../../icons.js";
+import { S as SettingItemColor } from "../SettingItemColor/SettingItemColor.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const SettingColorPresets = () => {
+  const { onChangeColor, themeUserSettings: settings, presetsOptionsColorMain, prefixPathIcon } = useBase();
+  const { themeColor: themeColorPresets } = settings;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(SettingContainerStyled, { children: [
+    /* @__PURE__ */ jsxs(SettingIconTitleStyled, { children: [
+      /* @__PURE__ */ jsx(Icon, { src: `${prefixPathIcon}/${PATH_ICONS.PALETTE}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel(DICTIONARY.PRESETS) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingItemContentStyled, { role: "group", "aria-label": "theme-preset-options", children: presetsOptionsColorMain.map((color, index) => {
+      const isSelected = themeColorPresets === color.name;
+      return /* @__PURE__ */ jsx(
+        SettingItemColor,
+        {
+          color: color.name,
+          selected: isSelected,
+          onChange: () => onChangeColor(color.name)
+        },
+        `${color.name}-${index}`
+      );
+    }) })
+  ] });
+};
+export {
+  SettingColorPresets as S
+};

package/components/SettingsLayout/subcomponents/SettingColorPresets/index.d.ts

@@ -0,0 +1 @@
+export { SettingColorPresets } from './SettingColorPresets';

package/components/SettingsLayout/subcomponents/SettingColorPresets/index.js

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingDirection/SettingDirection.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Configuración de la dirección del tema
+ */
+export default function SettingDirection(): import("react/jsx-runtime").JSX.Element;