@m4l/components 9.65.2-beta-feature-794-m4l-react-native-ui-nav-link-text-area.0 → 9.65.2-beta-update-switch-component-variable.0

package/components/DevicesPicker/slots/DevicesPickerSlots.d.ts

@@ -58,7 +58,7 @@ export declare const PanelStyled: import('@emotion/styled').StyledComponent<impo
 export declare const PanelHeaderStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').DevicesPickerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PanelSwitchStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../extended/mui/Switch/types').SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "error" | "action" | "classes" | "className" | "sx" | "form" | "label" | "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" | "type" | "value" | "icon" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "checked" | keyof import('react').RefAttributes<HTMLButtonElement> | "readOnly" | "required" | "inputProps" | "inputRef" | "checkedIcon" | "labelPlacement"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+export declare const PanelSwitchStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../extended/mui/Switch/types').SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "color" | "content" | "translate" | "error" | "action" | "classes" | "className" | "sx" | "form" | "label" | "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" | "type" | "variant" | "value" | "icon" | "disabled" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "checked" | keyof import('react').RefAttributes<HTMLButtonElement> | "readOnly" | "showIcon" | "required" | "inputProps" | "inputRef" | "checkedIcon" | "labelPlacement" | "showStartText" | "startText" | "showDescription" | "descriptionText" | "showEndText" | "endText"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').DevicesPickerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const PanelListStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').CheckableListProps, keyof import('../..').CheckableListProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {

package/components/extended/mui/Switch/Switch.d.ts

@@ -2,7 +2,7 @@ import { SwitchProps } from './types';
 /**
  * Extended Switch component built on top of MUI Switch.
  * Supports an optional inline label with configurable placement, error state, skeleton mode,
- * and ownerState-driven styling.
+ * Presentation variants, optional icon/content slots, and ownerState-driven styling.
  * @example
  * ```tsx
  * <Switch size="medium" label="Enable notifications" checked={true} />

package/components/extended/mui/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,WAAW,EAAE,MAAM,SAAS,CAAC;AAOxD;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,wHAsFlB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAoB,WAAW,EAAE,MAAM,SAAS,CAAC;AAiBxD;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,wHAiOlB,CAAC"}

package/components/extended/mui/Switch/Switch.js

@@ -1,82 +1,165 @@
-import { jsx as e, jsxs as c, Fragment as m } from "@emotion/react/jsx-runtime";
-import { forwardRef as g, useId as z } from "react";
-import { useModuleSkeleton as R } from "@m4l/core";
-import { useComponentSize as x } from "../../../../hooks/useComponentSize/index.js";
-import { getComponentSlotRoot as E } from "../../../../utils/getComponentSlotRoot.js";
-import { SWITCH_CLASSES as L, SWITCH_KEY_COMPONENT as M } from "./constants.js";
-import O from "clsx";
-import { getOptionLabelColor as P } from "../../../../utils/getOptionLabelColor.js";
-import { SwitchRootStyled as T, MUISwitchStyled as _, SkeletonStyled as S, LabelStyled as j } from "./slots/SwitchSlots.js";
-const B = g(
-  (p, u) => {
+import { jsx as e, jsxs as c, Fragment as S } from "@emotion/react/jsx-runtime";
+import { forwardRef as X, useId as Z } from "react";
+import { useModuleSkeleton as ee } from "@m4l/core";
+import { DesignPatronumOutlined as te } from "@m4l/icons";
+import { useComponentSize as oe } from "../../../../hooks/useComponentSize/index.js";
+import { getComponentSlotRoot as ne } from "../../../../utils/getComponentSlotRoot.js";
+import { SWITCH_CLASSES as B, SWITCH_KEY_COMPONENT as ae } from "./constants.js";
+import le from "clsx";
+import { getOptionLabelColor as x } from "../../../../utils/getOptionLabelColor.js";
+import { MUISwitchStyled as se, SwitchRootStyled as ie, IconSurfaceStyled as re, IconStyled as ce, ContentStyled as L, EndLabelStyled as de, SkeletonStyled as l, LabelStyled as P, DescriptionStyled as he } from "./slots/SwitchSlots.js";
+const ye = X(
+  (D, $) => {
     const {
-      className: b,
-      size: h = "medium",
+      className: R,
+      size: F = "medium",
       disabled: t,
-      color: f = "default",
-      error: n,
-      checked: r = !1,
-      label: o,
-      labelPlacement: i = "end",
-      onChange: w,
-      value: k,
-      id: C,
-      ...v
-    } = p, { currentSize: s } = x(h), y = R(), I = E(M), N = z(), l = C || N, a = {
+      color: O = "default",
+      error: w,
+      checked: s = !1,
+      label: d,
+      labelPlacement: y = "end",
+      onChange: M,
+      value: _,
+      id: j,
+      inputProps: H,
+      variant: u = "text",
+      showIcon: I,
+      icon: b,
+      showStartText: T,
+      startText: E,
+      showDescription: N,
+      descriptionText: m,
+      showEndText: C,
+      endText: p,
+      ...W
+    } = D, { currentSize: h } = oe(F), A = ee(), K = ne(ae), U = Z(), n = j || U, a = u !== "text" || I !== void 0 || b !== void 0 || T !== void 0 || E !== void 0 || N !== void 0 || m !== void 0 || C !== void 0 || p !== void 0, v = E ?? d, f = I ?? !!b, Y = T ?? !!v, q = N ?? !!m, G = C ?? !!p, J = b ?? /* @__PURE__ */ e(te, {}), i = a && Y && !!v, r = a && q && !!m, k = a && G && !!p, o = {
       disabled: t,
-      color: f,
-      error: n,
-      size: s,
-      checked: r
-    }, d = o ? /* @__PURE__ */ e(
-      j,
+      color: O,
+      error: w,
+      size: h,
+      checked: s,
+      variant: u,
+      hasIcon: a && f,
+      hasStartText: i,
+      hasDescription: r,
+      hasEndText: k,
+      hasEnhancedLayout: a
+    }, g = d ? /* @__PURE__ */ e(
+      P,
       {
-        id: `${l}-label`,
+        id: `${n}-label`,
         component: "label",
-        htmlFor: l,
+        htmlFor: n,
         variant: "body",
-        color: P(r, t),
-        ownerState: { ...a },
-        size: s,
+        color: x(s, t),
+        ownerState: { ...o },
+        size: h,
         disabled: t,
         ellipsis: !0,
-        children: o
+        children: d
       }
-    ) : null;
+    ) : null, Q = a ? /* @__PURE__ */ c(S, { children: [
+      i && /* @__PURE__ */ e(
+        P,
+        {
+          id: `${n}-label`,
+          component: "label",
+          htmlFor: n,
+          variant: "body",
+          color: x(s, t),
+          ownerState: { ...o },
+          size: h,
+          disabled: t,
+          ellipsis: !0,
+          children: v
+        }
+      ),
+      r && /* @__PURE__ */ e(
+        he,
+        {
+          id: `${n}-description`,
+          component: "span",
+          variant: "microSlim",
+          fontFamily: "Inter",
+          color: u === "contained" && s ? "text.disabled" : "text.secondary",
+          ownerState: { ...o },
+          size: h,
+          disabled: t,
+          children: m
+        }
+      )
+    ] }) : null, V = {
+      ...w ? { "aria-invalid": "true" } : {},
+      ...i ? { "aria-labelledby": `${n}-label` } : !a && d ? { "aria-labelledby": `${n}-label` } : {},
+      ...r ? { "aria-describedby": `${n}-description` } : {},
+      ...H
+    }, z = /* @__PURE__ */ e(
+      se,
+      {
+        ref: $,
+        id: n,
+        ownerState: { ...o },
+        disableRipple: !0,
+        checked: s,
+        disabled: t,
+        inputProps: V,
+        value: _,
+        onChange: M,
+        ...W
+      }
+    );
     return /* @__PURE__ */ e(
-      T,
+      ie,
       {
-        ownerState: { ...a },
-        className: O(b, I),
-        children: y ? /* @__PURE__ */ c(m, { children: [
-          /* @__PURE__ */ e(S, { "data-testid": "switch-skeleton", variant: "rounded", className: L.skeleton }),
-          o && /* @__PURE__ */ e(S, { "data-testid": "switch-skeleton-label", variant: "rectangular", className: "switchSkeletonLabel" })
-        ] }) : /* @__PURE__ */ c(m, { children: [
-          i === "start" && d,
-          /* @__PURE__ */ e(
-            _,
+        ownerState: { ...o },
+        className: le(R, K),
+        children: A ? a ? /* @__PURE__ */ c(S, { children: [
+          f && /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton-icon", variant: "rounded", className: "switchSkeletonIcon" }),
+          (i || r) && /* @__PURE__ */ c(L, { ownerState: { ...o }, children: [
+            i && /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton-label", variant: "rectangular", className: "switchSkeletonLabel" }),
+            r && /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton-description", variant: "rectangular", className: "switchSkeletonDescription" })
+          ] }),
+          /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton", variant: "rounded", className: B.skeleton }),
+          k && /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton-end-label", variant: "rectangular", className: "switchSkeletonEndLabel" })
+        ] }) : /* @__PURE__ */ c(S, { children: [
+          /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton", variant: "rounded", className: B.skeleton }),
+          d && /* @__PURE__ */ e(l, { "data-testid": "switch-skeleton-label", variant: "rectangular", className: "switchSkeletonLabel" })
+        ] }) : a ? /* @__PURE__ */ c(S, { children: [
+          f && /* @__PURE__ */ e(re, { ownerState: { ...o }, "data-testid": "switch-icon-surface", children: /* @__PURE__ */ e(
+            ce,
+            {
+              ownerState: { ...o },
+              src: J,
+              size: "small",
+              color: w ? "chips.error.contained.color" : "chips.default.contained.color",
+              disabled: t
+            }
+          ) }),
+          (i || r) && /* @__PURE__ */ e(L, { ownerState: { ...o }, children: Q }),
+          z,
+          k && /* @__PURE__ */ e(
+            de,
             {
-              ref: u,
-              id: l,
-              ownerState: { ...a },
-              disableRipple: !0,
-              checked: r,
+              component: "span",
+              variant: "body",
+              color: x(s, t),
+              ownerState: { ...o },
+              size: h,
               disabled: t,
-              inputProps: {
-                "aria-invalid": n ? "true" : void 0,
-                ...o && { "aria-labelledby": `${l}-label` }
-              },
-              value: k,
-              onChange: w,
-              ...v
+              ellipsis: !0,
+              children: p
             }
-          ),
-          i === "end" && d
+          )
+        ] }) : /* @__PURE__ */ c(S, { children: [
+          y === "start" && g,
+          z,
+          y === "end" && g
         ] })
       }
     );
   }
 );
 export {
-  B as Switch
+  ye as Switch
 };

package/components/extended/mui/Switch/Switch.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/Switch.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC,eAAO,MAAM,YAAY,EAAE,YA6J1B,CAAC"}
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/Switch.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC,eAAO,MAAM,YAAY,EAAE,YA8O1B,CAAC"}

package/components/extended/mui/Switch/Switch.styles.js

@@ -1,26 +1,40 @@
-import { SWITCH_CLASSES as o } from "./constants.js";
-import { getSizeStyles as p } from "../../../../utils/getSizeStyles/getSizeStyles.js";
-const s = {
+import { SWITCH_CLASSES as s } from "./constants.js";
+import { getSizeStyles as o } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+const d = {
   /** Root container styles: flex row, centered, with gap between thumb and label. */
-  root: ({ theme: a }) => ({
-    display: "flex",
-    alignItems: "center",
-    outline: "none",
-    overflow: "visible",
-    boxSizing: "border-box",
-    gap: a.vars.size.baseSpacings["sp2-5"],
-    width: "fit-content",
-    cursor: "pointer"
-  }),
+  root: ({ theme: a, ownerState: i }) => {
+    const r = i?.variant || "text";
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: i?.hasEnhancedLayout ? "center" : void 0,
+      outline: "none",
+      overflow: "visible",
+      boxSizing: "border-box",
+      gap: a.vars.size.baseSpacings["sp2-5"],
+      width: "fit-content",
+      maxWidth: "100%",
+      minWidth: 0,
+      cursor: i?.disabled ? "default" : "pointer",
+      ...r !== "text" && {
+        padding: a.vars.size.baseSpacings.sp2,
+        border: `1px solid ${i?.disabled ? a.vars.palette.border.disabled : a.vars.palette.border.default}`,
+        borderRadius: a.vars.size.borderRadius.r2,
+        ...r === "contained" && {
+          backgroundColor: a.vars.palette.default.enabledOpacity
+        }
+      }
+    };
+  },
   /** MUI Switch element styles: track, thumb, hover/active/focus rings, and checked/disabled states. */
-  muiSwitch: ({ theme: a, ownerState: e }) => {
-    const r = e?.error, t = e?.size || "medium", { height: i } = p(a, t, "action");
+  muiSwitch: ({ theme: a, ownerState: i }) => {
+    const r = i?.error, e = i?.size || "medium", { height: t } = o(a, e, "action");
     return {
       overflow: "visible",
       padding: 0,
       // Root = track: w = action × 1.133 (27.2/24), h = action × 0.667 (16/24)
-      width: `calc(${i} * 1.133)`,
-      height: `calc(${i} * 0.667)`,
+      width: `calc(${t} * 1.133)`,
+      height: `calc(${t} * 0.667)`,
       // Track — pill completa, llena el root
       "& .MuiSwitch-track": {
         width: "100%",
@@ -34,10 +48,10 @@ const s = {
       // SwitchBase — action×action, centrado sobre track (overflow -0.167 × action = -4px)
       "& .MuiSwitch-switchBase": {
         padding: 0,
-        width: i,
-        height: i,
-        top: `calc(${i} * -0.167)`,
-        left: `calc(${i} * -0.167)`,
+        width: t,
+        height: t,
+        top: `calc(${t} * -0.167)`,
+        left: `calc(${t} * -0.167)`,
         backgroundColor: "transparent",
         // Hover — ring via box-shadow en el thumb (unchecked)
         "&:hover .MuiSwitch-thumb": {
@@ -53,7 +67,7 @@ const s = {
         },
         // Checked: translateX 0.471 × action (11.3/24)
         "&.Mui-checked": {
-          transform: `translateX(calc(${i} * 0.471))`,
+          transform: `translateX(calc(${t} * 0.471))`,
           // Track — (primary/error)ownerstate/palettecolor/selectedopacity
           "& + .MuiSwitch-track": {
             backgroundColor: r ? a.vars.palette.error.selectedOpacity : a.vars.palette.primary.selectedOpacity,
@@ -73,67 +87,125 @@ const s = {
           // Active checked
           "&:active .MuiSwitch-thumb": {
             boxShadow: `0px 0px 0px 6px ${r ? a.vars.palette.error.activeOpacity : a.vars.palette.primary.activeOpacity}, 0px 1px 4px 0px rgba(0, 0, 0, 0.15)`
-          },
-          // Disabled unchecked — track: default.enabledOpacity, thumb faded
-          "&.Mui-disabled + .MuiSwitch-track": {
-            backgroundColor: r ? a.vars.palette.error.enabledOpacity : a.vars.palette.default.enabledOpacity,
-            opacity: 1
-          },
-          "&.Mui-disabled .MuiSwitch-thumb": {
-            opacity: 0.38
-          },
-          // Disabled checked — track: primary.enabledOpacity (rgba(0,100,255,0.08))
-          "&.Mui-disabled.Mui-checked + .MuiSwitch-track": {
-            backgroundColor: r ? a.vars.palette.error.enabledOpacity : a.vars.palette.primary.enabledOpacity,
-            opacity: 1
-          },
-          "&.Mui-disabled.Mui-checked .MuiSwitch-thumb": {
-            backgroundColor: r ? a.vars.palette.error.enabled : a.vars.palette.primary.enabled,
-            opacity: 0.38
           }
+        },
+        // Disabled unchecked — track: default.enabledOpacity, thumb faded.
+        "&.Mui-disabled + .MuiSwitch-track": {
+          backgroundColor: r ? a.vars.palette.error.enabledOpacity : a.vars.palette.default.enabledOpacity,
+          opacity: 1
+        },
+        "&.Mui-disabled .MuiSwitch-thumb": {
+          opacity: 0.38
+        },
+        // Disabled checked — track: primary.enabledOpacity (rgba(0,100,255,0.08)).
+        "&.Mui-disabled.Mui-checked + .MuiSwitch-track": {
+          backgroundColor: r ? a.vars.palette.error.enabledOpacity : a.vars.palette.primary.enabledOpacity,
+          opacity: 1
+        },
+        "&.Mui-disabled.Mui-checked .MuiSwitch-thumb": {
+          backgroundColor: r ? a.vars.palette.error.enabled : a.vars.palette.primary.enabled,
+          opacity: 0.38
         }
       },
       // Thumb — Ellipse 3: 12.8px (action × 0.533), margin 5.6px (action × 0.233)
       // unchecked: text.secondary token | checked: palette.primary.enabled (#0064FF)
       // Posición unchecked: 1.6px desde borde track | checked: ~13px desde borde izq
       "& .MuiSwitch-thumb": {
-        width: `calc(${i} * 0.533)`,
-        height: `calc(${i} * 0.533)`,
-        margin: `calc(${i} * 0.233)`,
+        width: `calc(${t} * 0.533)`,
+        height: `calc(${t} * 0.533)`,
+        margin: `calc(${t} * 0.233)`,
         backgroundColor: a.vars.palette.text.secondary,
         borderRadius: "50%",
         boxShadow: "inset 0px 2.4px 3.2px 0px rgba(255, 255, 255, 0.16)",
         filter: "drop-shadow(0px 1.6px 3.2px rgba(0, 0, 0, 0.16))"
       },
-      ...e?.disabled && {
+      ...i?.disabled && {
         pointerEvents: "none"
       }
     };
   },
+  /** Content column used by the optional title and description. */
+  content: ({ theme: a }) => ({
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    gap: a.vars.size.baseSpacings["sp0-5"],
+    minWidth: 0
+  }),
+  /** Icon surface matching the leading-icon treatment. */
+  iconSurface: ({ theme: a, ownerState: i }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: a.vars.size.baseSpacings.sp6,
+    height: a.vars.size.baseSpacings.sp6,
+    padding: a.vars.size.baseSpacings.sp1,
+    borderRadius: a.vars.size.borderRadius.r2,
+    backgroundColor: i?.error ? a.vars.palette.chips.error.contained.backgroundColor : a.vars.palette.chips.default.contained.backgroundColor
+  }),
+  /** Leading icon sizing and disabled treatment. */
+  icon: ({ ownerState: a }) => ({
+    flexShrink: 0,
+    ...a?.disabled && { opacity: 0.6 }
+  }),
+  /** Inline label styles for the legacy text presentation. */
   label: () => ({
-    cursor: "inherit"
+    cursor: "inherit",
+    minWidth: 0
+  }),
+  /** Secondary copy shown below the Switch title. */
+  description: () => ({
+    cursor: "inherit",
+    minWidth: 0,
+    maxWidth: "100%",
+    whiteSpace: "normal",
+    wordBreak: "break-word"
+  }),
+  /** Optional value text shown after the switch control. */
+  endLabel: () => ({
+    cursor: "inherit",
+    flexShrink: 0,
+    whiteSpace: "nowrap"
   }),
   /** Skeleton loading state styles for the switch track and optional label. */
-  skeleton: ({ theme: a, ownerState: e }) => {
-    const r = e?.size || "medium", { height: t } = p(a, r, "action");
+  skeleton: ({ theme: a, ownerState: i }) => {
+    const r = i?.size || "medium", { height: e } = o(a, r, "action");
     return {
       borderRadius: a.vars.size.borderRadius.r1,
       backgroundColor: a.vars.palette?.skeleton.default,
       // Label skeleton: ancho fijo aproximado al texto, alto = body typography
       "&.switchSkeletonLabel": {
-        width: `calc(${t} * 2.5)`,
-        height: `calc(${t} * 0.467)`,
+        width: `calc(${e} * 2.5)`,
+        height: `calc(${e} * 0.467)`,
+        borderRadius: a.vars.size.borderRadius.r1
+      },
+      "&.switchSkeletonDescription": {
+        width: `calc(${e} * 3.75)`,
+        height: `calc(${e} * 0.4)`,
         borderRadius: a.vars.size.borderRadius.r1
       },
+      "&.switchSkeletonEndLabel": {
+        width: `calc(${e} * 1.5)`,
+        height: `calc(${e} * 0.467)`,
+        borderRadius: a.vars.size.borderRadius.r1
+      },
+      "&.switchSkeletonIcon": {
+        width: `calc(${e})`,
+        height: `calc(${e})`,
+        borderRadius: a.vars.size.borderRadius.r2
+      },
       // Switch skeleton: mismas proporciones que el track real (action × 1.133 × 0.667)
-      [`&.${o.skeleton}`]: {
-        width: `calc(${t} * 1.133)`,
-        height: `calc(${t} * 0.667)`,
+      [`&.${s.skeleton}`]: {
+        width: `calc(${e} * 1.133)`,
+        height: `calc(${e} * 0.667)`,
         borderRadius: "80px"
       }
     };
   }
 };
 export {
-  s as switchStyles
+  d as switchStyles
 };

package/components/extended/mui/Switch/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const SWITCH_KEY_COMPONENT = "M4LSwitch";
-export declare const SWITCH_CLASSES: Record<"root" | "skeleton" | "label" | "muiSwitch", string>;
+export declare const SWITCH_CLASSES: Record<"root" | "content" | "skeleton" | "label" | "description" | "icon" | "muiSwitch" | "iconSurface" | "endLabel", string>;
 //# sourceMappingURL=constants.d.ts.map

package/components/extended/mui/Switch/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,cAAc,CAAC;AAEhD,eAAO,MAAM,cAAc,6DAAyD,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,cAAc,CAAC;AAEhD,eAAO,MAAM,cAAc,+HAAyD,CAAC"}

package/components/extended/mui/Switch/slots/SwitchEnum.d.ts

@@ -2,6 +2,11 @@ export declare enum SwitchSlots {
     root = "root",
     muiSwitch = "muiSwitch",
     label = "label",
+    content = "content",
+    iconSurface = "iconSurface",
+    icon = "icon",
+    description = "description",
+    endLabel = "endLabel",
     skeleton = "skeleton"
 }
 //# sourceMappingURL=SwitchEnum.d.ts.map

package/components/extended/mui/Switch/slots/SwitchEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchEnum.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/Switch/slots/SwitchEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB"}
+{"version":3,"file":"SwitchEnum.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/Switch/slots/SwitchEnum.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB"}

package/components/extended/mui/Switch/slots/SwitchEnum.js

@@ -1,4 +1,4 @@
-var r = /* @__PURE__ */ ((e) => (e.root = "root", e.muiSwitch = "muiSwitch", e.label = "label", e.skeleton = "skeleton", e))(r || {});
+var n = /* @__PURE__ */ ((e) => (e.root = "root", e.muiSwitch = "muiSwitch", e.label = "label", e.content = "content", e.iconSurface = "iconSurface", e.icon = "icon", e.description = "description", e.endLabel = "endLabel", e.skeleton = "skeleton", e))(n || {});
 export {
-  r as SwitchSlots
+  n as SwitchSlots
 };

package/components/extended/mui/Switch/slots/SwitchSlots.d.ts

@@ -7,6 +7,21 @@ export declare const MUISwitchStyled: import('@emotion/styled').StyledComponent<
 export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('@m4l/base').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "classes" | "children" | "className" | "sx" | "p" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "size" | "variant" | "dataTestid" | "paragraph" | "disabled" | "skeletonWidth" | "ellipsis" | "align" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonRows" | "htmlFor" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconSurfaceStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/base').IconProps, "src" | "icon" | keyof import('@m4l/base').IconBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const DescriptionStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('@m4l/base').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "classes" | "children" | "className" | "sx" | "p" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "size" | "variant" | "dataTestid" | "paragraph" | "disabled" | "skeletonWidth" | "ellipsis" | "align" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonRows" | "htmlFor" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const EndLabelStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('@m4l/base').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "classes" | "children" | "className" | "sx" | "p" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "size" | "variant" | "dataTestid" | "paragraph" | "disabled" | "skeletonWidth" | "ellipsis" | "align" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonRows" | "htmlFor" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
 export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "height" | "width" | "animation" | "classes" | "children" | "className" | "sx" | "style" | "variant">, "color" | "content" | "height" | "translate" | "width" | "animation" | "classes" | "children" | "className" | "sx" | "slot" | "style" | "title" | "ref" | "key" | "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" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SwitchOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/extended/mui/Switch/slots/SwitchSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchSlots.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/Switch/slots/SwitchSlots.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB;;6NAGR,CAAC;AAEtB,eAAO,MAAM,eAAe;;UAGF,CAAC;AAE3B,eAAO,MAAM,WAAW;;UAGF,CAAC;AAEvB,eAAO,MAAM,cAAc;;UAGF,CAAC"}
+{"version":3,"file":"SwitchSlots.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/extended/mui/Switch/slots/SwitchSlots.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB;;6NAGR,CAAC;AAEtB,eAAO,MAAM,eAAe;;UAGF,CAAC;AAE3B,eAAO,MAAM,WAAW;;UAGF,CAAC;AAEvB,eAAO,MAAM,aAAa;;6NAGF,CAAC;AAEzB,eAAO,MAAM,iBAAiB;;iOAGF,CAAC;AAE7B,eAAO,MAAM,UAAU;;UAGF,CAAC;AAEtB,eAAO,MAAM,iBAAiB;;UAGF,CAAC;AAE7B,eAAO,MAAM,cAAc;;UAGF,CAAC;AAE1B,eAAO,MAAM,cAAc;;UAGF,CAAC"}

package/components/extended/mui/Switch/slots/SwitchSlots.js

@@ -1,25 +1,46 @@
 import { styled as t } from "@mui/material/styles";
-import { Switch as m, Skeleton as i } from "@mui/material";
+import { Icon as c } from "@m4l/base";
+import { Switch as i, Skeleton as s } from "@mui/material";
 import { SwitchSlots as o } from "./SwitchEnum.js";
 import { SWITCH_KEY_COMPONENT as e } from "../constants.js";
-import { switchStyles as l } from "../Switch.styles.js";
-import { Typography as r } from "../../Typography/Typography.js";
-const h = t("div", {
+import { switchStyles as n } from "../Switch.styles.js";
+import { Typography as l } from "../../Typography/Typography.js";
+const f = t("div", {
   name: e,
   slot: o.root
-})(l.root), y = t(m, {
+})(n.root), h = t(i, {
   name: e,
   slot: o.muiSwitch
-})(l.muiSwitch), w = t(r, {
+})(n.muiSwitch), w = t(l, {
   name: e,
   slot: o.label
-})(l.label), d = t(i, {
+})(n.label), b = t("div", {
+  name: e,
+  slot: o.content
+})(n.content), u = t("span", {
+  name: e,
+  slot: o.iconSurface
+})(n.iconSurface), I = t(c, {
+  name: e,
+  slot: o.icon
+})(n.icon), k = t(l, {
+  name: e,
+  slot: o.description
+})(n.description), L = t(l, {
+  name: e,
+  slot: o.endLabel
+})(n.endLabel), C = t(s, {
   name: e,
   slot: o.skeleton
-})(l.skeleton);
+})(n.skeleton);
 export {
+  b as ContentStyled,
+  k as DescriptionStyled,
+  L as EndLabelStyled,
+  I as IconStyled,
+  u as IconSurfaceStyled,
   w as LabelStyled,
-  y as MUISwitchStyled,
-  d as SkeletonStyled,
-  h as SwitchRootStyled
+  h as MUISwitchStyled,
+  C as SkeletonStyled,
+  f as SwitchRootStyled
 };

package/components/extended/mui/Switch/types.d.ts

@@ -1,8 +1,11 @@
 import { SwitchProps as MUISwitchProps, Theme } from '@mui/material';
+import { IconProps } from '@m4l/base';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 import { SwitchSlots } from './slots/SwitchEnum';
 import { SWITCH_KEY_COMPONENT } from './constants';
+/** Supported container presentations for the Switch component. */
+export type SwitchVariant = 'text' | 'outlined' | 'contained';
 /** Props for the Switch component. */
 export interface SwitchProps extends MUISwitchProps {
     /** Optional label displayed inline next to the switch. */
@@ -15,6 +18,24 @@ export interface SwitchProps extends MUISwitchProps {
     color?: Extract<ComponentPalletColor, 'default'>;
     /** Indicates an error state. */
     error?: boolean;
+    /** Container presentation. Defaults to the legacy text presentation. */
+    variant?: SwitchVariant;
+    /** Whether to render the leading icon surface. */
+    showIcon?: boolean;
+    /** Optional icon source. The default Patronum icon is used when omitted. */
+    icon?: IconProps['src'];
+    /** Whether to render the main title. Defaults to whether a title is provided. */
+    showStartText?: boolean;
+    /** Main title rendered before the switch in the enhanced layout. */
+    startText?: string;
+    /** Whether to render the secondary description. */
+    showDescription?: boolean;
+    /** Secondary description rendered below the title. */
+    descriptionText?: string;
+    /** Whether to render the trailing value text. */
+    showEndText?: boolean;
+    /** Trailing value text rendered after the switch. */
+    endText?: string;
 }
 /** Internal owner state used by styled slots. */
 export interface SwitchOwnerState {
@@ -28,6 +49,18 @@ export interface SwitchOwnerState {
     color: Extract<ComponentPalletColor, 'default'>;
     /** Whether the switch is in an error state. */
     error?: boolean;
+    /** Container presentation. */
+    variant: SwitchVariant;
+    /** Whether the enhanced layout renders an icon. */
+    hasIcon?: boolean;
+    /** Whether the enhanced layout renders a title. */
+    hasStartText?: boolean;
+    /** Whether the enhanced layout renders a description. */
+    hasDescription?: boolean;
+    /** Whether the enhanced layout renders trailing text. */
+    hasEndText?: boolean;
+    /** Whether the enhanced content layout is active. */
+    hasEnhancedLayout?: boolean;
 }
 /** Union of slot keys for the Switch component. */
 export type SwitchSlotsType = keyof typeof SwitchSlots;

package/components/extended/mui/Switch/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,sCAAsC;AACtC,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACjC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IACjD,gCAAgC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IACzC,qBAAqB;IACrB,KAAK,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAChD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,mDAAmD;AACnD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,WAAW,CAAC;AAEvD,iDAAiD;AACjD,MAAM,MAAM,YAAY,GAAG,sBAAsB,CAC/C,eAAe,EACf,OAAO,oBAAoB,EAC3B,KAAK,CACN,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/extended/mui/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9D,sCAAsC;AACtC,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACjC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IACjD,gCAAgC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACxB,iFAAiF;IACjF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IACzC,qBAAqB;IACrB,KAAK,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAChD,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;IACvB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,mDAAmD;AACnD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,WAAW,CAAC;AAEvD,iDAAiD;AACjD,MAAM,MAAM,YAAY,GAAG,sBAAsB,CAC/C,eAAe,EACf,OAAO,oBAAoB,EAC3B,KAAK,CACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.65.2-beta-feature-794-m4l-react-native-ui-nav-link-text-area.0",
+  "version": "9.65.2-beta-update-switch-component-variable.0",
   "publishConfig": {
     "access": "public"
   },
@@ -56,16 +56,16 @@
     "@tanstack/react-virtual": "3.13.23",
     "react-color": "2.19.3",
     "@mui/x-date-pickers": "6.20.2",
-    "react-spinners": "0.13.8",
     "react-rnd": "10.5.2",
-    "react-dropzone": "14.4.1",
     "react-draggable": "4.5.0",
+    "react-dropzone": "14.4.1",
+    "react-spinners": "0.13.8",
     "chart.js": "4.5.1",
     "chartjs-chart-error-bars": "4.4.5",
     "qrcode.react": "3.2.0",
     "simplebar-react": "3.2.6",
-    "react-resizable-panels": "2.1.9",
     "react-simple-code-editor": "0.14.1",
+    "react-resizable-panels": "2.1.9",
     "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",