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

package/components/NoItemSelected/NoItemSelected.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { N as NO_ITEM_SELECTED_CLASSES } from "./constant.js";
+import { D as DICTIONARY } from "./dictionary.js";
+import { N as NoItemSelectedRootStyled } from "./slots/NoItemSelectedSlots.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+function NoItemSelected(props) {
+  const { image, title, message, size, className, dataTestId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentSize } = useComponentSize(size);
+  const { getLabel } = useModuleDictionary();
+  const defaultImage = useMemo(() => {
+    return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
+  }, []);
+  return /* @__PURE__ */ jsx(
+    NoItemSelectedRootStyled,
+    {
+      imageUrl: image || defaultImage,
+      title: title || getLabel(DICTIONARY.LABEL_TITLE),
+      message: message || getLabel(DICTIONARY.LABEL_DETAIL),
+      size: currentSize,
+      className: clsx(NO_ITEM_SELECTED_CLASSES.root, className),
+      dataTestId,
+      role: "alert",
+      "aria-label": "NoItemSelected",
+      imageAriaLabel: "illustration no item selected"
+    }
+  );
+}
+export {
+  NoItemSelected as N
+};

package/components/NoItemSelected/NoItemSelected.styles.js

@@ -0,0 +1,6 @@
+const noItemSelectedStyles = {
+  root: {}
+};
+export {
+  noItemSelectedStyles as n
+};

package/components/NoItemSelected/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const NO_ITEM_SELECTED_KEY_COMPONENT = "M4LNoItemSelected";
+export declare const NO_ITEM_SELECTED_CLASSES: Record<string, string>;

package/components/NoItemSelected/constant.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { N as NoItemSelectedSlots } from "./slots/NoItemSelectedEnum.js";
+const NO_ITEM_SELECTED_KEY_COMPONENT = "M4LNoItemSelected";
+const NO_ITEM_SELECTED_CLASSES = getComponentClasses(NO_ITEM_SELECTED_KEY_COMPONENT, NoItemSelectedSlots);
+export {
+  NO_ITEM_SELECTED_CLASSES as N,
+  NO_ITEM_SELECTED_KEY_COMPONENT as a
+};

package/components/{ImageText/components/NoItemSelected → NoItemSelected}/dictionary.d.ts

@@ -1,6 +1,4 @@
-import { Dictionary } from '@m4l/core';
 export declare function getNoItemSelectedComponentsDictionary(): string[];
-export declare const defaultNoItemSelectedDictionary: Dictionary;
 export declare const DICTIONARY: {
     readonly LABEL_TITLE: "no_item_selected.title";
     readonly LABEL_DETAIL: "no_item_selected.detail";

package/components/NoItemSelected/dictionary.js

@@ -0,0 +1,12 @@
+const NO_ITEM_SELECTED_DICTIONARY_KEY = "no_item_selected";
+function getNoItemSelectedComponentsDictionary() {
+  return [NO_ITEM_SELECTED_DICTIONARY_KEY];
+}
+const DICTIONARY = {
+  LABEL_TITLE: `${NO_ITEM_SELECTED_DICTIONARY_KEY}.title`,
+  LABEL_DETAIL: `${NO_ITEM_SELECTED_DICTIONARY_KEY}.detail`
+};
+export {
+  DICTIONARY as D,
+  getNoItemSelectedComponentsDictionary as g
+};

package/components/NoItemSelected/slots/NoItemSelectedEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum NoItemSelectedSlots {
+    root = "root"
+}

package/components/NoItemSelected/slots/NoItemSelectedEnum.js

@@ -0,0 +1,7 @@
+var NoItemSelectedSlots = /* @__PURE__ */ ((NoItemSelectedSlots2) => {
+  NoItemSelectedSlots2["root"] = "root";
+  return NoItemSelectedSlots2;
+})(NoItemSelectedSlots || {});
+export {
+  NoItemSelectedSlots as N
+};

package/components/NoItemSelected/slots/NoItemSelectedSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const NoItemSelectedRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../ImageText/types').ImageTextProps, keyof import('../../ImageText/types').ImageTextProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/NoItemSelected/slots/NoItemSelectedSlots.js

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material/styles";
+import { N as NoItemSelectedSlots } from "./NoItemSelectedEnum.js";
+import { a as NO_ITEM_SELECTED_KEY_COMPONENT } from "../constant.js";
+import { n as noItemSelectedStyles } from "../NoItemSelected.styles.js";
+import { I as ImageText } from "../../ImageText/ImageText.js";
+const NoItemSelectedRootStyled = styled(ImageText, {
+  name: NO_ITEM_SELECTED_KEY_COMPONENT,
+  slot: NoItemSelectedSlots.root
+})(noItemSelectedStyles?.root);
+export {
+  NoItemSelectedRootStyled as N
+};

package/components/NoItemSelected/test/NoItemSelected.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/{ImageText/components/NoItemSelected → NoItemSelected}/types.d.ts

@@ -1,11 +1,12 @@
 import { Theme, PaletteColor } from '@mui/material';
-import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
-import { NO_ITEM_SELECT_KEY_COMPONENT } from './constant';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { NO_ITEM_SELECTED_KEY_COMPONENT } from './constant';
 import { Sizes } from '@m4l/styles';
 import { NoItemSelectedSlots } from './slots/NoItemSelectedEnum';
-import { LabelProps } from '../../../Label';
+import { LabelProps } from '../Label/types';
 export interface NoItemSelectedProps extends Pick<LabelProps, 'label'> {
     image?: string;
+    title?: string;
     message?: string;
     paletteColor?: PaletteColor;
     dictionaryId?: string;
@@ -13,8 +14,6 @@ export interface NoItemSelectedProps extends Pick<LabelProps, 'label'> {
     dataTestId?: string;
     size?: Extract<Sizes, 'small' | 'medium'>;
 }
-export interface NoItemSelectedOwnerState {
-    size: Extract<Sizes, 'small' | 'medium'>;
-}
+export type NoItemSelectedOwnerState = {};
 export type NoItemSelectedSlotsType = keyof typeof NoItemSelectedSlots;
-export type NoItemSelectedStyles = M4LOverridesStyleRules<NoItemSelectedSlotsType, typeof NO_ITEM_SELECT_KEY_COMPONENT, Theme>;
+export type NoItemSelectedStyles = M4LOverridesStyleRules<NoItemSelectedSlotsType, typeof NO_ITEM_SELECTED_KEY_COMPONENT, Theme>;

package/components/NumberInput/NumberInput.styles.js

@@ -15,6 +15,7 @@ const numberInputStyles = {
     paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: ownerState?.noButtons && theme.vars.size.baseSpacings.sp1,
     boxSizing: "border-box",
+    overflow: "hidden",
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
       ownerState?.size || "medium",

package/components/ObjectLogs/helpers/Fields/filterFields.d.ts

@@ -1,4 +1,4 @@
-import { FilterField } from '@m4l/components';
+import { FilterField } from '../../../../components/DynamicFilter';
 /**
  * Opciones del filtro
  */

package/components/ObjectLogs/hooks/useDetailFormatter.js

@@ -16,7 +16,7 @@ const useDetailFormatter = (type) => {
       if (type === "m4l") {
         logId = rowProps.id;
       } else {
-        logId = rowProps.row.uuid;
+        logId = rowProps.uuid;
       }
       const iconConfig = {
         iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`,

package/components/ObjectLogs/hooks/useFilterAndSort.js

@@ -1,7 +1,8 @@
 import { useCallback } from "react";
-import { getRawFiltersForNetwork, useDynamicFilterAndSort } from "@m4l/components";
 import { useEnvironment } from "@m4l/core";
 import { f as filterFieldsGenerator } from "../helpers/Fields/filterFields.js";
+import { g as getRawFiltersForNetwork } from "../../DynamicFilter/helpers/getRawFiltersForNetwork.js";
+import { u as useDynamicFilterAndSort } from "../../../hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 function useFilterAndSort(props) {
   const { setBackendQueryParams, Refresh, otherApp = false, resourceTypeId, resourceSerialId } = props;
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/PaperForm/PaperForm.js

@@ -29,9 +29,8 @@ function PaperForm(props) {
   const { currentSize } = useComponentSize(size);
   const paperFormRef = useRef(null);
   const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
-  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
-    size: adjustedSize,
+    size: currentSize,
     color,
     isForm,
     paperFormVariant: variant

package/components/PaperForm/components/Header.js

@@ -1,26 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useModuleSkeleton } from "@m4l/core";
 import { H as HeaderStyled, I as IconStyled, T as TitleStyled } from "../slots/PaperFormSlots.js";
-import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 const Header = (props) => {
   const { urlIcon, title, size, dataTestId, color } = props;
-  const isSkeleton = useModuleSkeleton();
   const ownerState = {
     color
   };
-  const renderSkeleton = () => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      urlIcon ? /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16 }) : null,
-      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 })
-    ] });
-  };
   const renderContentHeader = () => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       urlIcon ? /* @__PURE__ */ jsx(IconStyled, { src: urlIcon, size }) : null,
       /* @__PURE__ */ jsx(TitleStyled, { variant: "bodyDens", size, children: title })
     ] });
   };
-  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: isSkeleton ? renderSkeleton() : renderContentHeader() });
+  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: renderContentHeader() });
 };
 export {
   Header as H

package/components/PaperForm/styles.js

@@ -58,10 +58,7 @@ const paperFormStyles = {
    * @param theme
    ***********************************************************
    */
-  containerIcon: () => ({
-    display: "grid",
-    placeItems: "center"
-  }),
+  containerIcon: {},
   /**
    * ************************************************************
    * Estilos del contenido del componente PaperForm

package/components/PropertyValue/PropertyValue.js

@@ -77,7 +77,7 @@ function PropertyValue(props) {
       children: [
         /* @__PURE__ */ jsxs(NameStyled, { ownerState, children: [
           renderIcon(),
-          /* @__PURE__ */ jsx(
+          property && /* @__PURE__ */ jsx(
             Label,
             {
               size: currentSize,

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/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"
+}