@m4l/components 9.50.0 → 9.51.0-beta-m4lcom-764-device-picker.0

package/components/Chip/ChipStyles.js

@@ -1,59 +1,62 @@
-import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
-import { getColors as c } from "./helpers.js";
-const h = {
+import { getIconPaintStyles as d } from "@m4l/base";
+import { getSizeStyles as a } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { getColors as l } from "./helpers.js";
+const x = {
   /**
    * Styles for the root element of the chip.
    */
-  root: ({ theme: s, ownerState: i }) => {
-    const { color: a, finalPalette: n } = c(s, i), t = s.vars.palette.chips.default.contained.backgroundColor, p = i?.hasDescription ? t : i?.opacity ? n.backgroundColor : n.backgroundColorTone, d = i?.hasDescription ? t : i?.opacity ? n.backgroundHover : n.backgroundHoverTone, e = i?.hasDescription ? t : i?.opacity ? n.backgroundActive : n.backgroundActiveTone;
+  root: ({ theme: n, ownerState: i }) => {
+    const { color: s, finalPalette: o } = l(n, i), r = n.vars.palette.chips.default.contained.backgroundColor, e = i?.hasDescription ? r : i?.opacity ? o.backgroundColor : o.backgroundColorTone, g = i?.hasDescription ? r : i?.opacity ? o.backgroundHover : o.backgroundHoverTone, c = i?.hasDescription ? r : i?.opacity ? o.backgroundActive : o.backgroundActiveTone, b = i?.variant === "contained" && i?.opacity === !1, p = d(s), h = n.vars.palette.chips.error.contained.backgroundColorTone, v = d(h);
     return {
       display: "flex",
       alignItems: "center",
-      padding: i?.hasDescription ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings.sp1,
-      borderRadius: s.vars.size.borderRadius["r1-5"],
-      gap: i?.hasDescription ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings["sp0-5"],
+      padding: i?.hasDescription ? n.vars.size.baseSpacings.sp2 : n.vars.size.baseSpacings.sp1,
+      borderRadius: n.vars.size.borderRadius["r1-5"],
+      gap: i?.hasDescription ? n.vars.size.baseSpacings.sp2 : n.vars.size.baseSpacings["sp0-5"],
       width: "max-content",
       ...i?.ellipsis && {
         maxWidth: "100%"
       },
       cursor: "pointer",
-      color: a,
-      backgroundColor: i?.variant !== "outlined" ? p : "transparent",
-      ...o(
-        s,
+      color: s,
+      backgroundColor: i?.variant !== "outlined" ? e : "transparent",
+      ...a(
+        n,
         i?.size || "medium",
         "base",
-        (r) => ({
-          height: i?.hasDescription ? "fit-content" : r,
-          minHeight: r
+        (t) => ({
+          height: i?.hasDescription ? "fit-content" : t,
+          minHeight: t
         })
       ),
       //TODO: OJO no OLVIDAR interactive ************ JUAN
       ...i?.interactive && {
         "&:hover": {
-          backgroundColor: d
+          backgroundColor: g
         },
         "&:active": {
-          backgroundColor: e
+          backgroundColor: c
         },
         "&:focus-visible": {
           boxShadow: "none",
-          outline: `${s.vars.size.borderStroke.container} ${s.vars.palette.border.main}`,
-          backgroundColor: e
+          outline: `${n.vars.size.borderStroke.container} ${n.vars.palette.border.main}`,
+          backgroundColor: c
         }
       },
       ...i?.variant === "outlined" && {
-        border: `${s.vars.size.borderStroke.container}`,
-        borderColor: p
+        border: `${n.vars.size.borderStroke.container}`,
+        borderColor: e
       },
       "&&& .M4LChip-closeIcon": {
-        ...o(
-          s,
+        ...p,
+        "&:hover, &:focus-visible, &:active": b ? p : v,
+        ...a(
+          n,
           i?.size || "medium",
           "base",
-          (r) => ({
-            height: r,
-            width: r
+          (t) => ({
+            height: t,
+            width: t
           })
         )
       },
@@ -63,71 +66,71 @@ const h = {
   /**
    * Styles for the text chip element.
    */
-  textChip: ({ theme: s, ownerState: i }) => ({
+  textChip: ({ theme: n, ownerState: i }) => ({
     whiteSpace: "nowrap",
-    paddingLeft: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
-    paddingRight: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
+    paddingLeft: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1,
+    paddingRight: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1,
     ...i?.hasDescription && {
-      color: s.vars.palette.text.primary
+      color: n.vars.palette.text.primary
     }
   }),
   /**
    * Styles for the chip description text.
    */
-  descriptionChip: ({ theme: s, ownerState: i }) => ({
+  descriptionChip: ({ theme: n, ownerState: i }) => ({
     whiteSpace: "nowrap",
-    color: s.vars.palette.text.secondary,
-    paddingLeft: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1,
-    paddingRight: i?.hasDescription ? 0 : s.vars.size.baseSpacings.sp1
+    color: n.vars.palette.text.secondary,
+    paddingLeft: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1,
+    paddingRight: i?.hasDescription ? 0 : n.vars.size.baseSpacings.sp1
   }),
   /**
    * Styles for label + description wrapper.
    */
-  textWrapper: ({ theme: s }) => ({
+  textWrapper: ({ theme: n }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: s.vars.size.baseSpacings["sp0-5"],
+    gap: n.vars.size.baseSpacings["sp0-5"],
     minWidth: 0,
     alignItems: "flex-start"
   }),
   /**
    * Styles for the chip icon element.
    */
-  chipIcon: ({ theme: s, ownerState: i }) => {
-    const { color: a } = c(s, i);
+  chipIcon: ({ theme: n, ownerState: i }) => {
+    const { color: s } = l(n, i);
     return {
       "& .M4LIcon-icon": {
-        backgroundColor: i?.hasDescription ? s.vars.palette.text.primary : `${a} !important`
+        backgroundColor: i?.hasDescription ? n.vars.palette.text.primary : `${s} !important`
       }
     };
   },
   /**
    * Styles for image-only start adornment wrapper.
    */
-  startAdornmentImageWrapper: ({ theme: s, ownerState: i }) => ({
-    marginRight: s.vars.size.baseSpacings["sp0-5"],
+  startAdornmentImageWrapper: ({ theme: n, ownerState: i }) => ({
+    marginRight: n.vars.size.baseSpacings["sp0-5"],
     display: "inline-flex",
     alignItems: "center",
     "& .M4LImage-root": {
       width: i?.hasDescription ? "fit-content" : "16px!important",
       height: i?.hasDescription ? "fit-content" : "16px!important"
     },
-    ...o(
-      s,
+    ...a(
+      n,
       i?.size || "medium",
       "container",
-      (a) => ({
-        maxWidth: a,
-        maxHeight: a
+      (s) => ({
+        maxWidth: s,
+        maxHeight: s
       })
     ),
-    ...o(
-      s,
+    ...a(
+      n,
       i?.size || "medium",
       "base",
-      (a) => ({
-        minWidth: a,
-        minHeight: a,
+      (s) => ({
+        minWidth: s,
+        minHeight: s,
         height: "fit-content",
         width: "fit-content"
       })
@@ -136,73 +139,70 @@ const h = {
   /**
    * Styles for image-only end adornment wrapper.
    */
-  endAdornmentImageWrapper: ({ theme: s, ownerState: i }) => ({
-    marginLeft: s.vars.size.baseSpacings["sp0-5"],
+  endAdornmentImageWrapper: ({ theme: n, ownerState: i }) => ({
+    marginLeft: n.vars.size.baseSpacings["sp0-5"],
     display: "inline-flex",
     alignItems: "center",
     "& .M4LImage-root": {
       width: i?.hasDescription ? "fit-content" : "16px!important",
       height: i?.hasDescription ? "fit-content" : "16px!important"
     },
-    ...o(
-      s,
+    ...a(
+      n,
       i?.size || "medium",
       "container",
-      (a) => ({
-        maxWidth: a,
-        maxHeight: a
+      (s) => ({
+        maxWidth: s,
+        maxHeight: s
       })
     ),
-    ...o(
-      s,
+    ...a(
+      n,
       i?.size || "medium",
       "base",
-      (a) => ({
-        minWidth: a,
-        minHeight: a,
+      (s) => ({
+        minWidth: s,
+        minHeight: s,
         height: "fit-content",
         width: "fit-content"
       })
     )
   }),
+  /**
+   * Styles for a component-based start icon wrapper.
+   */
+  startAdornmentIconWrapper: () => ({
+    display: "inline-flex",
+    alignItems: "center"
+  }),
+  /**
+   * Styles for a component-based end icon wrapper.
+   */
+  endAdornmentIconWrapper: () => ({
+    display: "inline-flex",
+    alignItems: "center"
+  }),
   /**
    * Styles for the icon button inside the chip element.
    */
-  iconButton: ({ theme: s, ownerState: i }) => {
-    const { color: a } = c(s, i);
-    return {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${a} !important`
-      },
-      ...o(
-        s,
-        i?.size || "medium",
-        "base",
-        (n) => ({
-          height: n,
-          width: n,
-          minHeight: n
-        })
-      )
-    };
-  },
+  iconButton: () => ({}),
   /**
    * Styles for the skeleton chip element.
    */
-  skeletonChip: ({ theme: s, ownerState: i }) => ({
+  skeletonChip: ({ theme: n, ownerState: i }) => ({
     width: "100%",
-    background: s.vars.palette.skeleton.default,
-    ...o(
-      s,
+    background: n.vars.palette.skeleton.default,
+    ...a(
+      n,
       i?.size || "medium",
       "base",
-      (a) => ({
-        height: `${a}!important`,
-        minHeight: `${a}!important`
+      (s) => ({
+        height: `${s}!important`,
+        minHeight: `${s}!important`
       })
     )
   })
 };
 export {
-  h as chipStyles
+  x as chipStyles
 };

package/components/Chip/constants.d.ts

@@ -17,10 +17,12 @@ export declare const COMBINED_CHIP_ENUMS: {
     textWrapper: ChipSlots.textWrapper;
     startAdornmentImageWrapper: ChipSlots.startAdornmentImageWrapper;
     endAdornmentImageWrapper: ChipSlots.endAdornmentImageWrapper;
+    startAdornmentIconWrapper: ChipSlots.startAdornmentIconWrapper;
+    endAdornmentIconWrapper: ChipSlots.endAdornmentIconWrapper;
     iconButton: ChipSlots.iconButton;
 };
 /**
  * Inventario de clases CSS para el componente Chip
  */
-export declare const CHIP_CLASSES: Record<"root" | "startAdornmentImageWrapper" | "endAdornmentImageWrapper" | "iconButton" | "textWrapper" | "closeIcon" | "skeletonChip" | "chipIcon" | "textChip" | "descriptionChip", string>;
+export declare const CHIP_CLASSES: Record<"root" | "startAdornmentImageWrapper" | "endAdornmentImageWrapper" | "iconButton" | "textWrapper" | "startAdornmentIconWrapper" | "endAdornmentIconWrapper" | "closeIcon" | "skeletonChip" | "chipIcon" | "textChip" | "descriptionChip", string>;
 //# sourceMappingURL=constants.d.ts.map

package/components/Chip/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Chip/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACvE;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAE5C,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,gMAA+D,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Chip/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACvE;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAE5C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;CAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,0PAA+D,CAAC"}

package/components/Chip/slots/ChipEnum.d.ts

@@ -7,6 +7,8 @@ export declare enum ChipSlots {
     textWrapper = "textWrapper",
     startAdornmentImageWrapper = "startAdornmentImageWrapper",
     endAdornmentImageWrapper = "endAdornmentImageWrapper",
+    startAdornmentIconWrapper = "startAdornmentIconWrapper",
+    endAdornmentIconWrapper = "endAdornmentIconWrapper",
     iconButton = "iconButton"
 }
 export declare enum ChipComplementaryClasses {

package/components/Chip/slots/ChipEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/Chip/slots/ChipEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,YAAY,aAAa;IACzB,QAAQ,SAAS;IACjB,QAAQ,SAAS;IACjB,eAAe,gBAAgB;IAC/B,WAAW,gBAAgB;IAC3B,0BAA0B,+BAA+B;IACzD,wBAAwB,6BAA6B;IACrD,UAAU,eAAe;CAC1B;AAED,oBAAY,wBAAwB;IAClC,SAAS,cAAc;CACxB"}
+{"version":3,"file":"ChipEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/Chip/slots/ChipEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,YAAY,aAAa;IACzB,QAAQ,SAAS;IACjB,QAAQ,SAAS;IACjB,eAAe,gBAAgB;IAC/B,WAAW,gBAAgB;IAC3B,0BAA0B,+BAA+B;IACzD,wBAAwB,6BAA6B;IACrD,yBAAyB,8BAA8B;IACvD,uBAAuB,4BAA4B;IACnD,UAAU,eAAe;CAC1B;AAED,oBAAY,wBAAwB;IAClC,SAAS,cAAc;CACxB"}

package/components/Chip/slots/ChipEnum.js

@@ -1,5 +1,5 @@
-var r = /* @__PURE__ */ ((e) => (e.root = "root", e.skeletonChip = "skeleton", e.chipIcon = "icon", e.textChip = "text", e.descriptionChip = "description", e.textWrapper = "textWrapper", e.startAdornmentImageWrapper = "startAdornmentImageWrapper", e.endAdornmentImageWrapper = "endAdornmentImageWrapper", e.iconButton = "iconButton", e))(r || {}), n = /* @__PURE__ */ ((e) => (e.closeIcon = "closeIcon", e))(n || {});
+var e = /* @__PURE__ */ ((r) => (r.root = "root", r.skeletonChip = "skeleton", r.chipIcon = "icon", r.textChip = "text", r.descriptionChip = "description", r.textWrapper = "textWrapper", r.startAdornmentImageWrapper = "startAdornmentImageWrapper", r.endAdornmentImageWrapper = "endAdornmentImageWrapper", r.startAdornmentIconWrapper = "startAdornmentIconWrapper", r.endAdornmentIconWrapper = "endAdornmentIconWrapper", r.iconButton = "iconButton", r))(e || {}), n = /* @__PURE__ */ ((r) => (r.closeIcon = "closeIcon", r))(n || {});
 export {
   n as ChipComplementaryClasses,
-  r as ChipSlots
+  e as ChipSlots
 };

package/components/Chip/slots/ChipSlots.d.ts

@@ -22,8 +22,14 @@ declare const StartAdornmentImageWrapperStyled: import('@emotion/styled').Styled
 declare const EndAdornmentImageWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').ChipOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
-declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../..').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "action" | "classes" | "children" | "className" | "sx" | "form" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "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" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "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" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "component" | "name" | "size" | "instaceDataTestId" | "variant" | "src" | "tooltip" | "value" | "icon" | "selected" | "dataTestId" | "placement" | "rotationAngle" | "instanceDataTestId" | "disabled" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "type" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+declare const StartAdornmentIconWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').ChipOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+declare const EndAdornmentIconWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').ChipOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../..').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "action" | "classes" | "children" | "className" | "sx" | "form" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "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" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "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" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "component" | "name" | "size" | "instaceDataTestId" | "type" | "variant" | "src" | "tooltip" | "value" | "icon" | "selected" | "dataTestId" | "placement" | "rotationAngle" | "instanceDataTestId" | "disabled" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').ChipOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export { ChipRootStyled, SkeletonChipStyled, IconStyled, TextChipStyled, DescriptionChipStyled, TextWrapperStyled, StartAdornmentImageWrapperStyled, EndAdornmentImageWrapperStyled, IconButtonStyled, };
+export { ChipRootStyled, SkeletonChipStyled, IconStyled, TextChipStyled, DescriptionChipStyled, TextWrapperStyled, StartAdornmentImageWrapperStyled, EndAdornmentImageWrapperStyled, StartAdornmentIconWrapperStyled, EndAdornmentIconWrapperStyled, IconButtonStyled, };
 //# sourceMappingURL=ChipSlots.d.ts.map

package/components/Chip/slots/ChipSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/Chip/slots/ChipSlots.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,cAAc;;6NAGA,CAAC;AACrB,QAAA,MAAM,kBAAkB;;UAGI,CAAC;AAC7B,QAAA,MAAM,UAAU;;UAGQ,CAAC;AACzB,QAAA,MAAM,cAAc;;UAGI,CAAC;AACzB,QAAA,MAAM,qBAAqB;;UAGI,CAAC;AAChC,QAAA,MAAM,iBAAiB;;UAGI,CAAC;AAC5B,QAAA,MAAM,gCAAgC;;iOAGI,CAAC;AAC3C,QAAA,MAAM,8BAA8B;;iOAGI,CAAC;AACzC,QAAA,MAAM,gBAAgB;;UAGI,CAAC;AAC3B,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,gCAAgC,EAChC,8BAA8B,EAC9B,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"ChipSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/components/Chip/slots/ChipSlots.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,cAAc;;6NAGA,CAAC;AACrB,QAAA,MAAM,kBAAkB;;UAGI,CAAC;AAC7B,QAAA,MAAM,UAAU;;UAGQ,CAAC;AACzB,QAAA,MAAM,cAAc;;UAGI,CAAC;AACzB,QAAA,MAAM,qBAAqB;;UAGI,CAAC;AAChC,QAAA,MAAM,iBAAiB;;UAGI,CAAC;AAC5B,QAAA,MAAM,gCAAgC;;iOAGI,CAAC;AAC3C,QAAA,MAAM,8BAA8B;;iOAGI,CAAC;AACzC,QAAA,MAAM,+BAA+B;;iOAGI,CAAC;AAC1C,QAAA,MAAM,6BAA6B;;iOAGI,CAAC;AACxC,QAAA,MAAM,gBAAgB;;UAGI,CAAC;AAC3B,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,gCAAgC,EAChC,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,gBAAgB,GACjB,CAAC"}

package/components/Chip/slots/ChipSlots.js

@@ -1,47 +1,55 @@
 import { Box as p } from "@mui/material";
 import { styled as t } from "@mui/material/styles";
 import { chipStyles as o } from "../ChipStyles.js";
-import { CHIP_KEY_COMPONENT as e } from "../constants.js";
-import { ChipSlots as n } from "./ChipEnum.js";
+import { CHIP_KEY_COMPONENT as n } from "../constants.js";
+import { ChipSlots as e } from "./ChipEnum.js";
 import { Icon as m, Typography as r } from "@m4l/base";
-import { Skeleton as i } from "../../extended/mui/Skeleton/Skeleton.js";
-import { IconButton as a } from "../../extended/mui/IconButton/IconButton.js";
-const I = t("div", {
-  name: e,
-  slot: n.root
-})(o?.root), W = t(i, {
-  name: e,
-  slot: n.skeletonChip
-})(o?.skeletonChip), f = t(m, {
-  name: e,
-  slot: n.chipIcon
-})(o?.chipIcon), x = t(r, {
-  name: e,
-  slot: n.textChip
-})(o?.textChip), g = t(r, {
-  name: e,
-  slot: n.descriptionChip
-})(o?.descriptionChip), A = t(p, {
-  name: e,
-  slot: n.textWrapper
+import { Skeleton as a } from "../../extended/mui/Skeleton/Skeleton.js";
+import { IconButton as s } from "../../extended/mui/IconButton/IconButton.js";
+const W = t("div", {
+  name: n,
+  slot: e.root
+})(o?.root), C = t(a, {
+  name: n,
+  slot: e.skeletonChip
+})(o?.skeletonChip), A = t(m, {
+  name: n,
+  slot: e.chipIcon
+})(o?.chipIcon), f = t(r, {
+  name: n,
+  slot: e.textChip
+})(o?.textChip), x = t(r, {
+  name: n,
+  slot: e.descriptionChip
+})(o?.descriptionChip), g = t(p, {
+  name: n,
+  slot: e.textWrapper
 })(o?.textWrapper), B = t("span", {
-  name: e,
-  slot: n.startAdornmentImageWrapper
+  name: n,
+  slot: e.startAdornmentImageWrapper
 })(o?.startAdornmentImageWrapper), k = t("span", {
-  name: e,
-  slot: n.endAdornmentImageWrapper
-})(o?.endAdornmentImageWrapper), u = t(a, {
-  name: e,
-  slot: n.iconButton
+  name: n,
+  slot: e.endAdornmentImageWrapper
+})(o?.endAdornmentImageWrapper), u = t("span", {
+  name: n,
+  slot: e.startAdornmentIconWrapper
+})(o?.startAdornmentIconWrapper), E = t("span", {
+  name: n,
+  slot: e.endAdornmentIconWrapper
+})(o?.endAdornmentIconWrapper), T = t(s, {
+  name: n,
+  slot: e.iconButton
 })(o?.iconButton);
 export {
-  I as ChipRootStyled,
-  g as DescriptionChipStyled,
+  W as ChipRootStyled,
+  x as DescriptionChipStyled,
+  E as EndAdornmentIconWrapperStyled,
   k as EndAdornmentImageWrapperStyled,
-  u as IconButtonStyled,
-  f as IconStyled,
-  W as SkeletonChipStyled,
+  T as IconButtonStyled,
+  A as IconStyled,
+  C as SkeletonChipStyled,
+  u as StartAdornmentIconWrapperStyled,
   B as StartAdornmentImageWrapperStyled,
-  x as TextChipStyled,
-  A as TextWrapperStyled
+  f as TextChipStyled,
+  g as TextWrapperStyled
 };

package/components/Color/Color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Color/Color.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAOtD;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,qDA+CtC,CAAC"}
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/Color/Color.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAUtD;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,qDA6CtC,CAAC"}

package/components/Color/Color.js

@@ -1,43 +1,44 @@
-import { jsx as e } from "@emotion/react/jsx-runtime";
-import { clsx as _ } from "clsx";
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { clsx as u } from "clsx";
 import { useMemo as m } from "react";
-import { useEnvironment as f, useModuleSkeleton as O } from "@m4l/core";
-import { useComponentSize as v } from "../../hooks/useComponentSize/index.js";
-import { getComponentClasses as z } from "../../utils/getComponentSlotRoot.js";
-import { COLOR_KEY_COMPONENT as T, COLOR_SWATCH_VIEW_BOX as h, COLOR_SWATCH_PATH as x } from "./constants.js";
-import { ColorSlots as y } from "./slots/ColorEnum.js";
-import { ColorStyled as E, IconStyled as I, RootStyled as N } from "./slots/ColorSlots.js";
-const k = (i) => {
-  const { size: l, className: c, value: o, dataTestId: a = "m4l_color_test" } = i, { host_static_assets: d, environment_assets: u } = f(), p = z(T, y), n = `${d}/${u}/frontend/commons/assets/icons/out_of.svg`, { currentSize: s } = v(l), t = s === "small" || s === "medium" ? s : "medium", C = O(), r = m(
+import { useModuleSkeleton as C } from "@m4l/core";
+import { useComponentSize as O } from "../../hooks/useComponentSize/index.js";
+import { getComponentClasses as S } from "../../utils/getComponentSlotRoot.js";
+import { COLOR_KEY_COMPONENT as f, COLOR_SWATCH_VIEW_BOX as _, COLOR_SWATCH_PATH as z } from "./constants.js";
+import { LegacyS3OutOfOutlined as L } from "@m4l/icons";
+import { ColorSlots as T } from "./slots/ColorEnum.js";
+import { ColorStyled as y, IconStyled as N, RootStyled as R } from "./slots/ColorSlots.js";
+const x = /* @__PURE__ */ o(L, {}), j = (i) => {
+  const { size: l, className: n, value: t, dataTestId: a = "m4l_color_test" } = i, c = S(f, T), { currentSize: r } = O(l), e = r === "small" || r === "medium" ? r : "medium", d = C(), s = m(
     () => ({
-      size: t,
-      value: o
+      size: e,
+      value: t
     }),
-    [t, o]
-  ), S = m(
-    () => o ? /* @__PURE__ */ e(
-      E,
+    [e, t]
+  ), p = m(
+    () => t ? /* @__PURE__ */ o(
+      y,
       {
         role: "status",
         "aria-live": "polite",
-        ownerState: { ...r },
-        viewBox: h,
-        children: /* @__PURE__ */ e("path", { d: x, fill: "currentColor" })
+        ownerState: { ...s },
+        viewBox: _,
+        children: /* @__PURE__ */ o("path", { d: z, fill: "currentColor" })
       }
-    ) : /* @__PURE__ */ e(I, { src: n, size: t }),
-    [o, r, t, n]
+    ) : /* @__PURE__ */ o(N, { src: x, size: e }),
+    [t, s, e]
   );
-  return /* @__PURE__ */ e(
-    N,
+  return /* @__PURE__ */ o(
+    R,
     {
-      className: _(c, p.root),
-      "aria-busy": C,
+      className: u(n, c.root),
+      "aria-busy": d,
       "data-testid": a,
-      ownerState: r,
-      children: S
+      ownerState: s,
+      children: p
     }
   );
 };
 export {
-  k as Color
+  j as Color
 };

package/components/ColorPicker/ColorPicker.js

@@ -4,11 +4,11 @@ import { clsx as Y } from "clsx";
 import { useComponentSize as $ } from "../../hooks/useComponentSize/index.js";
 import { getPropDataTestId as c } from "../../test/getNameDataTestId.js";
 import { getComponentClasses as j } from "../../utils/getComponentSlotRoot.js";
-import { COLOR_PICKER_DEFAULT_EMPTY_VALUE_LABEL as G, COLOR_PICKER_DEFAULT_QUICK_COLORS as q, COLOR_PICKER_FIELD_TRIGGER_OPEN_KEYS as H, COLOR_PICKER_KEY_COMPONENT as t } from "./constants.js";
+import { COLOR_PICKER_DEFAULT_EMPTY_VALUE_LABEL as G, COLOR_PICKER_KEY_COMPONENT as t, COLOR_PICKER_DEFAULT_QUICK_COLORS as q, COLOR_PICKER_FIELD_TRIGGER_OPEN_KEYS as H } from "./constants.js";
+import { ColorPickerSlots as l } from "./slots/ColorPickerEnum.js";
 import { useColorPicker as J } from "./hooks/useColorPicker/useColorPicker.js";
 import { RootStyled as W, TextFieldTriggerStyled as X, QuickColorsStyled as Z, IconButtonStyled as b, PopoverStyled as ee, SketchPickerStyled as oe } from "./slots/ColorPickerSlots.js";
 import { Color as O } from "../Color/Color.js";
-import { ColorPickerSlots as l } from "./slots/ColorPickerEnum.js";
 import { ActionsContainer as re } from "../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { ActionCancel as te } from "../CommonActions/components/ActionCancel/ActionCancel.js";
 import { ActionIntro as le } from "../CommonActions/components/ActionIntro/ActionIntro.js";