@m4l/components 9.3.2-B04082025-beta.2 → 9.3.2-B11082025-beta.1

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;
+}, {}, {}>;

package/components/SettingsLayout/slots/SettingsLayoutSlots.js

@@ -0,0 +1,83 @@
+import { styled } from "@mui/material/styles";
+import { S as SettingsLayoutSlots } from "./SettingsLayoutEnum.js";
+import { a 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(Icon, {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemColor
+})(settingsLayoutStyles.settingItemColor);
+const SettingItemColorContainerStyled = styled("div", {
+  name: SETTINGS_LAYOUT_COMPONENT_KEY,
+  slot: SettingsLayoutSlots.settingItemColorContainer
+})(settingsLayoutStyles.settingItemColorContainer);
+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,
+  SettingItemColorContainerStyled as e,
+  SettingItemColorStyled as f,
+  SettingsLayoutRootStyled as g,
+  HeaderActionsStyled as h,
+  BodyContentStyled as i
+};

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

@@ -0,0 +1,5 @@
+import { SettingColorPresetsProps } from './types';
+/**
+ * Color presets
+ */
+export declare const SettingColorPresets: (props: SettingColorPresetsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { 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 { useThemeSettingsStore } from "@m4l/graphics";
+import { S as SettingItemColor } from "../SettingItemColor/SettingItemColor.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const SettingColorPresets = (props) => {
+  const { prefixPathIcon } = props;
+  const { themeUserSettings, settingsActions, presetsOptionsColorMain } = useThemeSettingsStore((state) => state);
+  const { themeColor: themeColorPresets } = themeUserSettings;
+  const { onChangeColor } = settingsActions;
+  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/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingColorPresetsProps {
+    prefixPathIcon: string;
+}

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

@@ -0,0 +1,5 @@
+import { SettingDirectionProps } from './types';
+/**
+ * Configuración de la dirección del tema
+ */
+export default function SettingDirection(props: SettingDirectionProps): import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingDirection/SettingDirection.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { S as SettingContainerStyled, a as SettingIconTitleStyled, b as SettingItemContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+import { S as SettingItem } from "../SettingItem/SettingItem.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+function SettingDirection(props) {
+  const { prefixPathIcon } = props;
+  const { themeUserSettings, settingsActions } = useThemeSettingsStore((state) => state);
+  const { themeDirection } = themeUserSettings;
+  const { onChangeDirection } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(SettingContainerStyled, { children: [
+    /* @__PURE__ */ jsxs(SettingIconTitleStyled, { children: [
+      /* @__PURE__ */ jsx(Icon, { src: `${prefixPathIcon}/${PATH_ICONS.DIRECTION}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel(DICTIONARY.DIRECTION) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingItemContentStyled, { role: "group", "aria-label": "theme-direction-options", children: ["ltr", "rtl"].map((direction, index) => {
+      const isSelected = themeDirection === direction;
+      return /* @__PURE__ */ jsx(
+        SettingItem,
+        {
+          iconUrl: direction === "ltr" ? `${prefixPathIcon}/${PATH_ICONS.ALIGN_LEFT}` : `${prefixPathIcon}/${PATH_ICONS.ALIGN_RIGHT}`,
+          selected: isSelected,
+          onChange: () => onChangeDirection(direction)
+        },
+        `${direction}-${index}`
+      );
+    }) })
+  ] });
+}
+export {
+  SettingDirection as S
+};

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

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

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

@@ -0,0 +1,3 @@
+export interface SettingDirectionProps {
+    prefixPathIcon: string;
+}

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

@@ -0,0 +1,5 @@
+import { SettingFullscreenProps } from './types';
+/**
+ * Configuración de pantalla completa
+ */
+export declare const SettingFullscreen: (props: SettingFullscreenProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingFullscreen/SettingFullscreen.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { useModuleDictionary } from "@m4l/core";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { P as PATH_ICONS } from "../../icons.js";
+import { c as SettingFullscreenStyled } from "../../slots/SettingsLayoutSlots.js";
+const SettingFullscreen = (props) => {
+  const { prefixPathIcon } = props;
+  const [fullscreen, setFullscreen] = useState(false);
+  const { getLabel } = useModuleDictionary();
+  const toggleFullScreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setFullscreen(true);
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen();
+      setFullscreen(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    SettingFullscreenStyled,
+    {
+      fullWidth: true,
+      variant: "contained",
+      color: "default",
+      startIcon: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: fullscreen ? `${prefixPathIcon}/${PATH_ICONS.FULLSCREEN_EXIT}` : `${prefixPathIcon}/${PATH_ICONS.FULLSCREEN}`
+        }
+      ),
+      onClick: toggleFullScreen,
+      label: getLabel(fullscreen ? DICTIONARY.EXIT_FULLSCREEN : DICTIONARY.FULLSCREEN)
+    }
+  );
+};
+export {
+  SettingFullscreen as S
+};

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

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

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

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingFullscreen/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingFullscreenProps {
+    prefixPathIcon: string;
+}

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

@@ -0,0 +1,8 @@
+import { SettingItemProps } from './types';
+/**
+ * Componente para el item de configuración.
+ * Este componente se utiliza para mostrar un item de configuración en el componente SettingsLayout.
+ * @param props - Propiedades del componente.
+ * @returns Componente SettingItem.
+ */
+export declare const SettingItem: (props: SettingItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingItem/SettingItem.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { d as SettingItemStyled } from "../../slots/SettingsLayoutSlots.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const SettingItem = (props) => {
+  const { iconUrl, onChange, selected } = props;
+  return /* @__PURE__ */ jsx(
+    SettingItemStyled,
+    {
+      ...onChange ? {
+        onClick: onChange,
+        tabIndex: 0,
+        role: "radio",
+        "aria-label": "theme-mode-options",
+        "aria-checked": true
+      } : {},
+      ownerState: { selected, onChange: !!onChange },
+      children: /* @__PURE__ */ jsx(Icon, { src: iconUrl, color: selected ? "primary.enabled" : "text.secondary" })
+    }
+  );
+};
+export {
+  SettingItem as S
+};

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

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

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

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingItem/types.d.ts

@@ -0,0 +1,5 @@
+export interface SettingItemProps {
+    iconUrl: string;
+    onChange?: VoidFunction;
+    selected: boolean;
+}

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

@@ -0,0 +1,8 @@
+import { SettingItemColorProps } from './types';
+/**
+ * Componente para el item de configuración.
+ * Este componente se utiliza para mostrar un item de configuración en el componente SettingsLayout.
+ * @param props - Propiedades del componente.
+ * @returns Componente SettingItem.
+ */
+export declare const SettingItemColor: (props: SettingItemColorProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingItemColor/SettingItemColor.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { e as SettingItemColorContainerStyled, f as SettingItemColorStyled } from "../../slots/SettingsLayoutSlots.js";
+import { P as PATH_ICONS } from "../../icons.js";
+import { useEnvironment } from "@m4l/core";
+const SettingItemColor = (props) => {
+  const { onChange, selected, color } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsx(SettingItemColorContainerStyled, { children: /* @__PURE__ */ jsx(
+    SettingItemColorStyled,
+    {
+      src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.COLOR}`,
+      ...onChange ? {
+        onClick: onChange,
+        tabIndex: 0,
+        role: "radio",
+        "aria-checked": true
+      } : {},
+      ownerState: { selected, onChange: !!onChange, color }
+    }
+  ) });
+};
+export {
+  SettingItemColor as S
+};

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

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

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

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingItemColor/types.d.ts

@@ -0,0 +1,6 @@
+import { ThemeUserColor } from '@m4l/styles';
+export interface SettingItemColorProps {
+    onChange?: VoidFunction;
+    selected: boolean;
+    color: ThemeUserColor;
+}

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

@@ -0,0 +1,5 @@
+import { SettingModeProps } from './types';
+/**
+ * Configuración de modo de tema
+ */
+export declare const SettingMode: (props: SettingModeProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingMode/SettingMode.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../../Icon/Icon.js";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { S as SettingContainerStyled, a as SettingIconTitleStyled, b as SettingItemContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
+import { S as SettingItem } from "../SettingItem/SettingItem.js";
+const SettingMode = (props) => {
+  const { prefixPathIcon } = props;
+  const { settingsActions, themeUserSettings } = useThemeSettingsStore((state) => state);
+  const { onChangeMode } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(SettingContainerStyled, { role: "group", "aria-label": "theme-mode-options", children: [
+    /* @__PURE__ */ jsxs(SettingIconTitleStyled, { children: [
+      /* @__PURE__ */ jsx(Icon, { src: `${prefixPathIcon}/${PATH_ICONS.MODE}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel(DICTIONARY.MODE) })
+    ] }),
+    /* @__PURE__ */ jsx(SettingItemContentStyled, { children: ["light", "dark"].map((mode, index) => {
+      const isSelected = themeUserSettings.themeMode === mode;
+      return /* @__PURE__ */ jsx(
+        SettingItem,
+        {
+          iconUrl: mode === "light" ? `${prefixPathIcon}/${PATH_ICONS.SUN}` : `${prefixPathIcon}/${PATH_ICONS.MOON}`,
+          selected: isSelected,
+          onChange: () => onChangeMode(mode)
+        },
+        `${mode}-${index}`
+      );
+    }) })
+  ] });
+};
+export {
+  SettingMode as S
+};

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

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

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

@@ -0,0 +1 @@
+

package/components/SettingsLayout/subcomponents/SettingMode/types.d.ts

@@ -0,0 +1,3 @@
+export interface SettingModeProps {
+    prefixPathIcon: string;
+}

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

@@ -0,0 +1,5 @@
+import { SettingsLayoutBaseProps } from './types';
+/**
+ * Theme Settings
+ */
+export declare const SettingsLayoutBase: (props: SettingsLayoutBaseProps) => import("react/jsx-runtime").JSX.Element;

package/components/SettingsLayout/subcomponents/SettingsLayoutBase/SettingsLayoutBase.js

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "framer-motion";
+import { useModuleDictionary } from "@m4l/core";
+import { P as PATH_ICONS } from "../../icons.js";
+import { B as BackdropStyled, g as SettingsLayoutRootStyled, H as HeaderContainerStyled, T as TypographyStyled, h as HeaderActionsStyled, i as BodyContentStyled } from "../../slots/SettingsLayoutSlots.js";
+import { S as SettingDirection } from "../SettingDirection/SettingDirection.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { b as SETTINGS_LAYOUT_CLASSES } from "../../constants.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+import { S as SettingMode } from "../SettingMode/SettingMode.js";
+import { S as SettingColorPresets } from "../SettingColorPresets/SettingColorPresets.js";
+import { S as SettingFullscreen } from "../SettingFullscreen/SettingFullscreen.js";
+const SettingsLayoutBase = (props) => {
+  const {
+    open,
+    themeUserSettings,
+    settingsActions
+  } = useThemeSettingsStore((state) => state);
+  const { prefixPathIcon, width } = props;
+  const { themeDirection } = themeUserSettings;
+  const { onResetSetting, handleOpen } = settingsActions;
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BackdropStyled,
+      {
+        ownerState: {},
+        open,
+        onClick: () => handleOpen()
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(SettingsLayoutRootStyled, { role: "form", "aria-label": "settings-layout", ownerState: { themeDirection, width }, className: SETTINGS_LAYOUT_CLASSES.root, children: [
+      /* @__PURE__ */ jsxs(HeaderContainerStyled, { ownerState: {}, className: SETTINGS_LAYOUT_CLASSES.headerContainer, children: [
+        /* @__PURE__ */ jsx(
+          TypographyStyled,
+          {
+            ownerState: {},
+            variant: "subtitleDens",
+            ellipsis: true,
+            children: getLabel(DICTIONARY.MODULE_NAME)
+          }
+        ),
+        /* @__PURE__ */ jsxs(HeaderActionsStyled, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: `${prefixPathIcon}/${PATH_ICONS.REFRESH}`,
+              onClick: onResetSetting,
+              role: "button",
+              "aria-label": "reset-setting"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              src: `${prefixPathIcon}/${PATH_ICONS.CLOSE}`,
+              onClick: () => handleOpen(),
+              role: "button",
+              "aria-label": "close-settings"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(BodyContentStyled, { ownerState: {}, children: [
+        /* @__PURE__ */ jsx(SettingMode, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingDirection, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingColorPresets, { prefixPathIcon }),
+        /* @__PURE__ */ jsx(SettingFullscreen, { prefixPathIcon })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  SettingsLayoutBase as S
+};

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

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

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

@@ -0,0 +1 @@
+