@m4l/layouts 9.2.2 → 9.3.1-beta.1

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -24,15 +24,15 @@ export declare const colorsLight: {
     readonly default: {
         readonly semanticText: string;
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -53,44 +53,51 @@ export declare const colorsLight: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
-        readonly paper: "#000";
+        readonly base: string;
+        readonly blur: string;
+        readonly paper: "#fff";
     };
     readonly chips: {
-        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly info: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly success: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -105,15 +112,15 @@ export declare const colorsLight: {
     };
     readonly info: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -125,15 +132,15 @@ export declare const colorsLight: {
     };
     readonly success: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -145,15 +152,15 @@ export declare const colorsLight: {
     };
     readonly warning: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -165,15 +172,15 @@ export declare const colorsLight: {
     };
     readonly error: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -209,15 +216,15 @@ export declare const colorsLight: {
     readonly default: {
         readonly semanticText: string;
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -238,44 +245,51 @@ export declare const colorsLight: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
-        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly info: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly success: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -290,15 +304,15 @@ export declare const colorsLight: {
     };
     readonly info: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -310,15 +324,15 @@ export declare const colorsLight: {
     };
     readonly success: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -330,15 +344,15 @@ export declare const colorsLight: {
     };
     readonly warning: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -350,15 +364,15 @@ export declare const colorsLight: {
     };
     readonly error: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -395,15 +409,15 @@ export declare const colorsDark: {
     readonly default: {
         readonly semanticText: string;
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -424,44 +438,51 @@ export declare const colorsDark: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
-        readonly paper: "#000";
+        readonly base: string;
+        readonly blur: string;
+        readonly paper: "#fff";
     };
     readonly chips: {
-        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly info: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly success: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -476,15 +497,15 @@ export declare const colorsDark: {
     };
     readonly info: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -496,15 +517,15 @@ export declare const colorsDark: {
     };
     readonly success: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -516,15 +537,15 @@ export declare const colorsDark: {
     };
     readonly warning: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -536,15 +557,15 @@ export declare const colorsDark: {
     };
     readonly error: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -580,15 +601,15 @@ export declare const colorsDark: {
     readonly default: {
         readonly semanticText: string;
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -609,44 +630,51 @@ export declare const colorsDark: {
         readonly surface: string;
         readonly hover: string;
         readonly backdrop: string;
+        readonly base: string;
+        readonly blur: string;
         readonly paper: "#000";
     };
     readonly chips: {
-        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly info: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly success: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly warning: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly error: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly default: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly forest: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly pink: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly orange: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
             readonly contained: {
-                readonly color: "¯(ツ)/¯";
-                readonly backgroundColor: "¯(ツ)/¯";
-                readonly backgroundHover: "¯(ツ)/¯";
-                readonly backgroundActive: "¯(ツ)/¯";
-                readonly colorTone: "¯(ツ)/¯";
-                readonly backgroundColorTone: "¯(ツ)/¯";
-                readonly backgroundHoverTone: "¯(ツ)/¯";
-                readonly backgroundActiveTone: "¯(ツ)/¯";
+                readonly color: string;
+                readonly backgroundColor: string;
+                readonly backgroundHover: string;
+                readonly backgroundActive: string;
+                readonly colorTone: string;
+                readonly backgroundColorTone: string;
+                readonly backgroundHoverTone: string;
+                readonly backgroundActiveTone: string;
             };
         };
     };
     readonly border: {
         readonly main: string;
+        readonly dens: string;
         readonly default: string;
         readonly secondary: string;
-        readonly dens: string;
         readonly disabled: string;
         readonly error: string;
     };
@@ -661,15 +689,15 @@ export declare const colorsDark: {
     };
     readonly info: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -681,15 +709,15 @@ export declare const colorsDark: {
     };
     readonly success: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -701,15 +729,15 @@ export declare const colorsDark: {
     };
     readonly warning: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;
@@ -721,15 +749,15 @@ export declare const colorsDark: {
     };
     readonly error: {
         readonly focusVisible: string;
-        readonly enabled: string;
-        readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
         readonly contrastText: string;
+        readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
         readonly hoverOpacity: string;
+        readonly focus: string;
         readonly focusOpacity: string;
         readonly selected: string;
         readonly selectedOpacity: string;

package/components/DynamicTabs/DynamicTabs.js

@@ -16,7 +16,7 @@ function DynamicTabs(props) {
           onChange: (_e, value) => handleChangeTab(value),
           children: finalTabs.map((tab) => {
             const { value, tabProps } = tab;
-            return /* @__PURE__ */ jsx(Tab, { value, label: tabProps?.label }, value);
+            return /* @__PURE__ */ jsx(Tab, { value, ...tabProps }, value);
           })
         }
       ),

package/components/ModuleDetailTabs/ModuleDetailTabs.js

@@ -19,8 +19,8 @@ function ModuleDetailTabs(props) {
         allowScrollButtonsMobile: true,
         onChange: (_e, value) => handleChangeTab(value),
         children: finalTabs.map((tab) => {
-          const { value, label } = tab;
-          return /* @__PURE__ */ jsx(Tab, { value, label }, value);
+          const { value, label, icon } = tab;
+          return /* @__PURE__ */ jsx(Tab, { value, label, icon }, value);
         })
       }
     ),

package/components/ModuleDetailTabs/index.d.ts

@@ -1,2 +1,2 @@
 export { ModuleDetailTabs } from './ModuleDetailTabs';
-export type { ModuleDatailTab, ModuleDetailObjectLogs, ModuleDetailTabContent, ModuleDetailTabsProps } from './types';
+export type { ModuleDatailTab, ModuleDetailObjectLogs, ModuleDetailOtherObjectLogs, ModuleDetailM4LObjectLogs, ModuleDetailTabContent, ModuleDetailTabsProps } from './types';

package/components/ModuleDetailTabs/useModuleDatailTabs.d.ts

@@ -16,26 +16,33 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         tabContent: import('react').FunctionComponent<any>;
         componentProps?: Omit<any, keyof import('./types').ModuleDetailTabContent<T_1, K_1>> | undefined;
         dictionaryId?: string;
-        size?: Extract<import('@m4l/styles').Sizes, "small" | "medium"> | undefined;
         children?: null | undefined;
         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;
-        title?: string | undefined;
-        component?: React.ElementType | undefined;
         id?: string | undefined;
-        disabled?: boolean | undefined;
+        className?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        classes?: (Partial<import('@mui/material').TabClasses> & Partial<import('@mui/material').ClassNameMap<never>>) | undefined;
         action?: React.Ref<import('@mui/material').ButtonBaseActions> | undefined;
-        hidden?: boolean | undefined;
+        centerRipple?: boolean | undefined;
+        disabled?: boolean | undefined;
+        disableRipple?: boolean | undefined;
+        disableTouchRipple?: boolean | undefined;
+        focusRipple?: boolean | undefined;
+        focusVisibleClassName?: string | undefined;
+        LinkComponent?: React.ElementType | undefined;
+        onFocusVisible?: React.FocusEventHandler<any> | undefined;
+        sx?: import('@mui/system').SxProps<import('@mui/material').Theme> | undefined;
+        tabIndex?: NonNullable<React.HTMLAttributes<any>["tabIndex"]> | undefined;
+        TouchRippleProps?: Partial<import('@mui/material/ButtonBase/TouchRipple').TouchRippleProps> | undefined;
+        touchRippleRef?: React.Ref<import('@mui/material/ButtonBase/TouchRipple').TouchRippleActions> | undefined;
         color?: Extract<import('@m4l/styles').ComponentPalletColor, "default"> | undefined;
         content?: string | undefined;
-        style?: React.CSSProperties | undefined;
         translate?: "yes" | "no" | undefined;
-        urlIcon?: string | undefined;
-        lang?: string | undefined;
+        disableFocusRipple?: boolean | undefined;
+        iconPosition?: ("top" | "bottom" | "start" | "end") | undefined;
+        wrapped?: boolean | undefined;
         slot?: string | undefined;
-        dir?: string | undefined;
-        className?: string | undefined;
-        classes?: (Partial<import('@mui/material').TabClasses> & Partial<import('@mui/material').ClassNameMap<never>>) | undefined;
-        sx?: import('@mui/system').SxProps<import('@mui/material').Theme> | undefined;
+        title?: string | undefined;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -44,13 +51,15 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         accessKey?: string | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        lang?: string | undefined;
         nonce?: string | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
-        tabIndex?: NonNullable<React.HTMLAttributes<any>["tabIndex"]> | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
         radioGroup?: string | undefined;
         role?: import('react').AriaRole | undefined;
         about?: string | undefined;
@@ -76,11 +85,11 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
@@ -91,37 +100,37 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;
@@ -291,19 +300,10 @@ export declare function useModuleDetailTabs<T extends Record<string, any> = Reco
         onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
-        centerRipple?: boolean | undefined;
-        disableRipple?: boolean | undefined;
-        disableTouchRipple?: boolean | undefined;
-        focusRipple?: boolean | undefined;
-        focusVisibleClassName?: string | undefined;
-        LinkComponent?: React.ElementType | undefined;
-        onFocusVisible?: React.FocusEventHandler<any> | undefined;
-        TouchRippleProps?: Partial<import('@mui/material/ButtonBase/TouchRipple').TouchRippleProps> | undefined;
-        touchRippleRef?: React.Ref<import('@mui/material/ButtonBase/TouchRipple').TouchRippleActions> | undefined;
-        disableFocusRipple?: boolean | undefined;
+        size?: Extract<import('@m4l/styles').Sizes, "small" | "medium"> | undefined;
+        component?: React.ElementType | undefined;
         dataTestId?: string | undefined;
-        iconPosition?: ("top" | "bottom" | "start" | "end") | undefined;
-        wrapped?: boolean | undefined;
+        urlIcon?: string | undefined;
     }[];
     handleChangeTab: (newValue: string) => void;
 };

package/components/ModuleDetailTabs/useModuleDatailTabs.js

@@ -38,13 +38,14 @@ function useModuleDetailTabs(props) {
         value: "objectLogs",
         tabContent: ObjectLogs,
         unmountable: false,
-        componentProps
+        componentProps,
+        icon: "/main/na/icons/i_common_master_detail_layout_detail_tab_logs"
       });
     }
     return arrTabs.map((tab) => ({
       ...tab,
       unmountable: tab.unmountable === void 0 ? true : tab.unmountable,
-      icon: typeof tab.icon === "string" ? /* @__PURE__ */ jsx(Icon, { src: `${urlAssetsPrefix}/${tab.icon}` }) : tab.icon,
+      icon: typeof tab.icon === "string" ? /* @__PURE__ */ jsx(Icon, { src: `${urlAssetsPrefix}${tab.icon}` }) : tab.icon,
       label: tab.dictionaryId ? getLabel(tab.dictionaryId) : void 0
     }));
   }, [masterSelection, tabs, objectLogsProps, urlAssetsPrefix, getLabel]);

package/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './useModule';
 export * from './useDynamicAccordions';
 export * from './useDynamicPaperForm';
 export * from './useNetworkActionConfirm';
+export * from './useFormAddEdit';

package/hooks/useFormAddEdit/dictionary.d.ts

@@ -0,0 +1 @@
+export declare const getformAddEditDictionary: () => string;

package/hooks/useFormAddEdit/index.d.ts

@@ -0,0 +1 @@
+export * from './useFormAddEdit';

package/hooks/useFormAddEdit/index.js

@@ -0,0 +1 @@
+

package/hooks/useFormAddEdit/types.d.ts

@@ -0,0 +1,27 @@
+import { NetworkProps } from '@m4l/core';
+import { FieldValues } from 'react-hook-form';
+export type ResponseEndpoint<TEndpointValues = FieldValues> = {
+    data: TEndpointValues;
+};
+export interface UseFormAddEditProps<TValues = FieldValues, TEndpointValues = FieldValues> {
+    /**
+     * Id del objeto, si se define, se llama al endpoint para obtener los datos
+     */
+    objectId?: number | string;
+    /**
+     * Valores iniciales del formulario
+     */
+    initialValues: TValues;
+    /**
+     * Funcion para formatear los datos del endpoint
+     */
+    formatDataEndpoint?: (response: ResponseEndpoint<TEndpointValues>) => TValues;
+    /**
+     * Si se define en true, no se llama al endpoint
+     */
+    omitCallEnpoint?: boolean;
+    /**
+     * Props para llamar al networkOperation
+     */
+    networkProps: NetworkProps;
+}

package/hooks/useFormAddEdit/useFormAddEdit.d.ts

@@ -0,0 +1,11 @@
+import { UseFormAddEditProps } from './types';
+import { FormStatusLoad } from '@m4l/components';
+import { FieldValues } from 'react-hook-form';
+/**
+ * TODO: Documentar
+ */
+export declare function useFormAddEdit<TValues extends FieldValues = FieldValues, TEndpointValues extends FieldValues = FieldValues>(props: UseFormAddEditProps<TValues, TEndpointValues>): {
+    formValues: TValues;
+    statusLoad: FormStatusLoad;
+    refresh: () => void;
+};

package/hooks/useFormAddEdit/useFormAddEdit.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { useNetwork, useFlagsStore, useModuleDictionary } from "@m4l/core";
+import { useState, useCallback, useEffect } from "react";
+import { useModal, WindowConfirm } from "@m4l/components";
+function useFormAddEdit(props) {
+  const {
+    initialValues,
+    objectId,
+    networkProps,
+    formatDataEndpoint,
+    omitCallEnpoint = false
+  } = props;
+  const { openModal, closeModal } = useModal();
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const addFlag = useFlagsStore((state) => state.flagsActions.addFlag);
+  const { getLabel } = useModuleDictionary();
+  const refresh = useCallback(() => {
+    if (statusLoad === "ready") {
+      setStatusLoad("edit");
+    }
+  }, [statusLoad]);
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      if (omitCallEnpoint) {
+        addFlag("form_loaded");
+        setStatusLoad("ready");
+        return;
+      }
+      networkOperation(networkProps).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEndpoint) {
+              setFormValues(formatDataEndpoint(response));
+            } else {
+              setFormValues(response.data);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+          openModal({
+            window: /* @__PURE__ */ jsx(
+              WindowConfirm,
+              {
+                variant: "error",
+                title: getLabel("form_add_edit.label_error_title"),
+                msg: getLabel("form_add_edit.error_authorization_message"),
+                onClickIntro: () => closeModal()
+              }
+            ),
+            variant: "delete"
+          });
+          addFlag("form_loaded");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  useEffect(() => {
+    if (statusLoad === "ready" && objectId !== void 0) {
+      setStatusLoad("edit");
+    }
+  }, [objectId]);
+  return { formValues, statusLoad, refresh };
+}
+export {
+  useFormAddEdit as u
+};

package/hooks/useFormAddEdit/useFormAddEdit.test.d.ts

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

package/index.js

@@ -14,6 +14,7 @@ import { u as u2 } from "./hooks/useModule/index.js";
 import { u as u3 } from "./hooks/useDynamicAccordions/useDynamicAccordions.js";
 import { c, u as u4 } from "./hooks/useDynamicPaperForm/useDynamicPaperForm.js";
 import { u as u5 } from "./hooks/useNetworkActionConfirm/useNetworkActionConfirm.js";
+import { u as u6 } from "./hooks/useFormAddEdit/useFormAddEdit.js";
 import { c as c2 } from "./utils/createAppMF.js";
 export {
   D as DynamicTabs,
@@ -33,6 +34,7 @@ export {
   g3 as getNoAuthModuleLayoutComponentsDictionary,
   u3 as useDynamicAccordions,
   u4 as useDynamicPaperForm,
+  u6 as useFormAddEdit,
   u as useMasterDetail,
   u2 as useModule,
   u5 as useNetworkActionConfirm

package/layouts/NoAuthModuleLayout/slots/NoAuthModuleLayoutSlots.d.ts

@@ -16,4 +16,4 @@ export declare const FormContentDesktopStyled: import('@emotion/styled').StyledC
 export declare const WrapperFormContentDesktopStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContainerModuleNameDesktopStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const ContentFormDesktopStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const TypographyBannerStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const TypographyBannerStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.2.2",
+  "version": "9.3.1-beta.1",
   "license": "UNLICENSED",
   "author": "M4L Team ",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "peerDependencies": {
-    "@m4l/components": "^9.0.0",
+    "@m4l/components": "9.2.54-beta.1",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^7.0.0",
-    "@m4l/styles": "^7.0.0"
+    "@m4l/graphics": "7.1.2-beta.1",
+    "@m4l/styles": "7.1.29-beta.1"
   },
   "resolutions": {
     "glob": "^10.4.5",

package/test/mocks.d.ts

@@ -17,10 +17,10 @@ export declare const mock_useEnvironment: {
 };
 export declare const formatterValues: Formatters;
 export declare const mockedGraphics: {
-    useFormatter: import('vitest').MockInstance<() => graphics.Formatters>;
+    useFormatter: import('vitest').MockInstance<() => import('@m4l/graphics').Formatters>;
 };
 export declare function restoreGraphicsMocked(): void;
 export declare const coreImplementation: typeof core;
 export declare const graphicsImplementation: {
-    useFormatter: import('vitest').MockInstance<() => graphics.Formatters>;
+    useFormatter: import('vitest').MockInstance<() => import('@m4l/graphics').Formatters>;
 };