@m4l/components 9.2.57 → 9.2.58-beta.1

package/components/mui_extended/Accordion/Accordion.js

@@ -4,7 +4,8 @@ import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { P as PATH_EXPANDED_ICON, A as ACCORDION_KEY } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconLabelStyled, L as LabelStyled, b as IconExpandedStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";
-import { forwardRef } from "react";
+import { forwardRef, useState, useEffect } from "react";
+import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const Accordion = forwardRef((props, ref) => {
   const {
@@ -15,28 +16,37 @@ const Accordion = forwardRef((props, ref) => {
     icon: labelIcon,
     className,
     dataTestId = "",
-    skeletonLabelWidth,
-    size
+    skeletonLabelWidth = "100px",
+    size,
+    expanded,
+    variant = "outlined"
   } = props;
-  const currentSize = useComponentSize(size);
-  const ownerState = { size: currentSize.currentSize === "large" ? "medium" : currentSize.currentSize };
-  const classRoot = getComponentSlotRoot(className ?? ACCORDION_KEY);
+  const { currentSize } = useComponentSize(size);
+  const classRoot = getComponentSlotRoot(ACCORDION_KEY);
+  const [expandedState, setExpandedState] = useState(expanded ?? true);
+  const handleToggle = () => {
+    setExpandedState((prev) => !prev);
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (mounted && expanded !== void 0) {
+      setExpandedState(expanded);
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [expanded]);
+  const ownerState = { size: currentSize, variant, expanded: expandedState };
   return /* @__PURE__ */ jsxs(
     AccordionRootStyled,
     {
-      ownerState: {},
+      ownerState,
       ref,
       role: "contentinfo",
-      className: classRoot,
-      defaultExpanded: true,
+      className: clsx(classRoot, className),
+      expanded: expandedState,
       ...accordionProps,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(
-          ACCORDION_KEY,
-          "root",
-          dataTestId
-        )
-      } : {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(ACCORDION_KEY, "root", dataTestId) } : {},
       children: [
         /* @__PURE__ */ jsxs(
           AccordionSummaryStyled,
@@ -44,11 +54,11 @@ const Accordion = forwardRef((props, ref) => {
             ownerState,
             role: "heading",
             "aria-controls": "expanded-content",
-            disableTouchRipple: false,
+            onClick: handleToggle,
             expandIcon: /* @__PURE__ */ jsx(
               IconExpandedStyled,
               {
-                ownerState: {},
+                ownerState,
                 size,
                 "aria-label": "settings",
                 src: PATH_EXPANDED_ICON
@@ -56,13 +66,13 @@ const Accordion = forwardRef((props, ref) => {
             ),
             ...summaryProps,
             children: [
-              labelIcon && /* @__PURE__ */ jsx(IconLabelStyled, { ownerState: {}, src: labelIcon, size }),
+              labelIcon && /* @__PURE__ */ jsx(IconLabelStyled, { ownerState, src: labelIcon, size }),
               /* @__PURE__ */ jsx(
                 LabelStyled,
                 {
-                  ownerState: {},
+                  ownerState,
                   size,
-                  variant: "body",
+                  variant: "caption",
                   skeletonWidth: skeletonLabelWidth,
                   children: label
                 }
@@ -70,7 +80,7 @@ const Accordion = forwardRef((props, ref) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx(AccordionDetailsStyled, { ownerState: {}, children })
+        /* @__PURE__ */ jsx(AccordionDetailsStyled, { ownerState, children })
       ]
     }
   );

package/components/mui_extended/Accordion/slots/AccordionSlots.d.ts

@@ -13,23 +13,23 @@ export declare const AccordionRootStyled: import('@emotion/styled').StyledCompon
     TransitionProps?: import('@mui/material/transitions').TransitionProps;
 } & import('@mui/material').AccordionSlotsAndSlotProps & Omit<import('@mui/material').PaperOwnProps, "classes" | "onChange"> & 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" | "disabled" | "expanded" | "square" | "variant" | keyof import('@mui/material/OverridableComponent').CommonProps | "sx" | "onChange" | "TransitionComponent" | "TransitionProps" | "elevation" | "disableGutters" | "defaultExpanded" | keyof import('@mui/material').AccordionSlotsAndSlotProps>, "children" | "ref" | "title" | "id" | "disabled" | "hidden" | "color" | "content" | "expanded" | "square" | "variant" | "translate" | keyof import('@mui/material/OverridableComponent').CommonProps | "sx" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "TransitionComponent" | "TransitionProps" | "elevation" | "disableGutters" | "defaultExpanded" | keyof import('@mui/material').AccordionSlotsAndSlotProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AccordionOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AccordionOwnerState> & Record<string, unknown>;
+}, "children" | "disabled" | "expanded" | "square" | "variant" | keyof import('@mui/material/OverridableComponent').CommonProps | "sx" | "onChange" | "TransitionComponent" | "TransitionProps" | "elevation" | "disableGutters" | "defaultExpanded" | keyof import('@mui/material').AccordionSlotsAndSlotProps>, "children" | "ref" | "title" | "id" | "disabled" | "hidden" | "color" | "content" | "expanded" | "square" | "variant" | "translate" | keyof import('@mui/material/OverridableComponent').CommonProps | "sx" | "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" | "TransitionComponent" | "TransitionProps" | "elevation" | "disableGutters" | "defaultExpanded" | keyof import('@mui/material').AccordionSlotsAndSlotProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AccordionOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const AccordionSummaryStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').AccordionSummaryOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & 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" | "disabled" | "action" | "style" | "className" | "classes" | "sx" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon">, "children" | "ref" | "title" | "id" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "translate" | "className" | "classes" | "sx" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "expandIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AccordionOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AccordionOwnerState> & Record<string, unknown>;
+}, "children" | "disabled" | "action" | "style" | "className" | "classes" | "sx" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon">, "children" | "ref" | "title" | "id" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "translate" | "className" | "classes" | "sx" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AccordionOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const IconLabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AccordionOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AccordionOwnerState> & Record<string, unknown>;
+export declare const IconLabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AccordionOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AccordionOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AccordionOwnerState> & Record<string, unknown>;
+export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AccordionOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const IconExpandedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AccordionOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AccordionOwnerState> & Record<string, unknown>;
+export declare const IconExpandedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AccordionOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const AccordionDetailsStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').AccordionDetailsProps, keyof import('@mui/material').AccordionDetailsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AccordionOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AccordionOwnerState> & Record<string, unknown>;
+export declare const AccordionDetailsStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').AccordionDetailsProps, keyof import('@mui/material').AccordionDetailsProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AccordionOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/mui_extended/Accordion/styles.js

@@ -1,16 +1,22 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const accordionStyles = {
   /**
    * *********************************************************
    *Estilos del contenedor principal del componente Accordion
    **********************************************************
    */
-  accordionRoot: ({ theme }) => ({
-    border: `${theme.size.borderStroke.container} ${theme.vars.palette.border.default}`,
-    borderRadius: `${theme.size.borderRadius.r1} !important`,
-    "& .Mui-disabled": {
-      '& [class*="M4LIcon-icon"]': {
-        background: theme.vars.palette.text.disabled
-      }
+  accordionRoot: ({ theme, ownerState }) => ({
+    "&&&": {
+      ...ownerState?.variant === "outlined" && {
+        border: `${theme.size.borderStroke.container} ${theme.vars.palette.border.secondary}`,
+        borderRadius: ownerState?.variant === "outlined" ? theme.size.borderRadius.r2 : "unset"
+      },
+      ...ownerState?.variant === "text" && {
+        borderBottom: ownerState?.expanded ? `${theme.size.borderStroke.container} ${theme.vars.palette.border.default}` : `${theme.size.borderStroke.container} ${theme.vars.palette.border.default}`,
+        borderRadius: "unset"
+      },
+      margin: "unset",
+      overflow: "visible"
     }
   }),
   /**
@@ -19,29 +25,48 @@ const accordionStyles = {
    * **************************************************************
    */
   accordionSummary: ({ theme, ownerState }) => ({
-    padding: `0px ${theme.vars.size.baseSpacings.sp1} 0px ${theme.vars.size.baseSpacings.sp2}`,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    height: `${theme.vars.size[theme.generalSettings.isMobile ? "mobile" : "desktop"][ownerState.size ?? "medium"].container} !important`,
-    minHeight: `${theme.vars.size[theme.generalSettings.isMobile ? "mobile" : "desktop"][ownerState.size ?? "medium"].container} !important`,
-    background: theme.vars.palette.background.neutral,
-    overflow: "hidden",
-    "&:hover": {
-      background: theme.vars.palette.primary.hoverOpacity
-    },
-    "&:focus-visible": {
-      background: theme.vars.palette.primary.activeOpacity,
-      borderRadius: `${theme.size.borderRadius.r1} !important`,
-      outline: `${theme.size.borderStroke.container} ${theme.vars.palette.border.main}`,
-      outlineOffset: `${theme.size.baseSpacings["sp0-5"]}`
-    },
-    "&:active": {
-      background: theme.vars.palette.primary.activeOpacity
-    },
-    "& .MuiAccordionSummary-content": {
-      gap: `${theme.vars.size.baseSpacings.sp1}`
+    "&&&": {
+      paddingLeft: theme.vars.size.baseSpacings.sp2,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
+      gap: theme.vars.size.baseSpacings.sp2,
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      ...getSizeStyles(theme, ownerState?.size ?? "medium", "container", (size) => ({
+        minHeight: size,
+        height: size
+      })),
+      background: theme.vars.palette.background.default,
+      overflow: "hidden",
+      borderBottom: ownerState?.expanded && ownerState?.variant === "outlined" ? `${theme.size.borderStroke.container} ${theme.vars.palette.border.disabled}` : "unset",
+      borderRadius: "unset",
+      ...ownerState?.variant === "outlined" && {
+        borderTopLeftRadius: theme.size.borderRadius.r2,
+        borderTopRightRadius: theme.size.borderRadius.r2,
+        borderBottomLeftRadius: !ownerState?.expanded ? theme.size.borderRadius.r2 : "unset",
+        borderBottomRightRadius: !ownerState?.expanded ? theme.size.borderRadius.r2 : "unset"
+      },
+      "&:hover": {
+        background: theme.vars.palette.default.hoverOpacity
+      },
+      "&:focus-visible": {
+        borderRadius: theme.size.borderRadius["r1-5"],
+        boxShadow: `0px 0px 0px 1.3px ${theme.vars.palette.border.main}`
+      },
+      "&:active": {
+        background: theme.vars.palette.default.activeOpacity
+      },
+      "& .MuiAccordionSummary-content": {
+        gap: `${theme.vars.size.baseSpacings.sp1}`,
+        overflow: "hidden",
+        paddingLeft: theme.vars.size.baseSpacings.sp1,
+        "& .MuiTypography-root": {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }
     }
   }),
   /**
@@ -75,15 +100,17 @@ const accordionStyles = {
    * Estilos del contenedor que muestra el contenido del accordion
    * **************************************************************
    */
-  accordionDetails: ({ theme }) => ({
+  accordionDetails: ({ theme, ownerState }) => ({
     padding: theme.vars.size.baseSpacings.sp3,
     background: theme.vars.palette.background.default,
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
     alignSelf: "stretch",
-    borderBottomLeftRadius: `${theme.size.borderRadius.r1}`,
-    borderBottomRightRadius: `${theme.size.borderRadius.r1}`
+    ...ownerState?.variant === "outlined" && {
+      borderBottomLeftRadius: theme.size.borderRadius["r1-5"],
+      borderBottomRightRadius: theme.size.borderRadius["r1-5"]
+    }
   })
 };
 export {

package/components/mui_extended/Accordion/types.d.ts

@@ -1,22 +1,55 @@
 import { AccordionProps as MUIAccordionProps, AccordionSummaryProps, Theme } from '@mui/material';
 import { ReactNode } from 'react';
 import { AccordionSlots } from './slots/AccordionEnum';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { ACCORDION_KEY } from './constants';
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 export interface AccordionProps {
+    /**
+     * The label for the Accordion component
+     */
     label: string;
+    /**
+     * Optional class name for the Accordion component
+     */
     className?: string;
+    /**
+     * The children nodes of the Accordion component
+     */
     children: ReactNode;
+    /**
+     * Optional props for the MUI Accordion component
+     */
     accordionProps?: Omit<MUIAccordionProps, 'sx' | 'children'>;
+    /**
+     * Optional props for the Accordion Summary component
+     */
     summaryProps?: AccordionSummaryProps;
+    /**
+     * Optional icon for the Accordion component
+     */
     icon?: string;
+    /**
+     * Optional width for the skeleton label
+     */
     skeletonLabelWidth?: number | string;
-    variant?: 'standard';
-    color?: Extract<ComponentPalletColor, 'primary'>;
+    /**
+     * Optional variant for the Accordion component
+     */
+    variant?: 'outlined' | 'text';
+    /**
+     * Optional size for the Accordion component
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Optional data test id for the Accordion component
+     */
     dataTestId?: string;
+    /**
+     * Optional expanded state for the Accordion component
+     */
+    expanded?: boolean;
 }
 export type AccordionSlotsType = keyof typeof AccordionSlots;
-export type AccordionStyles = OverridesStyleRules<AccordionSlotsType, typeof ACCORDION_KEY, Theme>;
-export type AccordionOwnerState = Pick<AccordionProps, 'size'>;
+export type AccordionStyles = M4LOverridesStyleRules<AccordionSlotsType, typeof ACCORDION_KEY, Theme>;
+export type AccordionOwnerState = Pick<AccordionProps, 'size' | 'variant'>;

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -46,7 +46,7 @@ const autocompleteSyles = {
    * Styles for the chip component.
    */
   chip: ({ theme, ownerState }) => ({
-    ...ownerState.disabled && {
+    ...ownerState?.disabled && {
       background: theme.vars.palette.chips.disabled.contained.backgroundColor,
       color: theme.vars.palette.text.disabled,
       "&& .M4LIcon-icon": {
@@ -66,7 +66,7 @@ const autocompleteSyles = {
         gap: theme.vars.size.baseSpacings.sp1,
         flexWrap: "wrap",
         paddingLeft: `${theme.vars.size.baseSpacings.sp1} !important`,
-        // borderColor: `${ ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.secondary} !important`,
+        // borderColor: `${ ownerState?.error ? theme.vars.palette.border.error : theme.vars.palette.border.secondary} !important`,
         "& > input": {
           width: "100%",
           textOverflow: "ellipsis",
@@ -95,7 +95,7 @@ const autocompleteSyles = {
   skeletonAutocomplete: ({ theme, ownerState }) => {
     return {
       width: "100%",
-      background: theme.vars.palette.skeleton.transition,
+      background: theme.vars.palette.skeleton.default,
       display: "flex",
       borderRadius: theme.vars.size.borderRadius.r1,
       ...getSizeStyles(

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js

@@ -13,7 +13,7 @@ function useEndAdornments(props) {
     onOpenLocal
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsxs(AdormentsStyled, { ownerState: {}, children: [
+  return /* @__PURE__ */ jsxs(AdormentsStyled, { children: [
     loading ? /* @__PURE__ */ jsx(
       CircularProgressStyled,
       {