@chayns-components/core 5.0.6 → 5.0.7

package/lib/cjs/components/multi-action-button/MultiActionButton.js

@@ -19,6 +19,7 @@ const MultiActionButton = ({
   backgroundColor,
   className,
   extendedTimeoutMs = 3000,
+  gapColor,
   height = _MultiActionButton2.MultiActionButtonHeight.Medium,
   isCollapsed = false,
   isDisabled = false,
@@ -43,6 +44,10 @@ const MultiActionButton = ({
     if (autoCollapseTimeoutRef.current) {
       window.clearTimeout(autoCollapseTimeoutRef.current);
     }
+    if (extendedTimeoutMs <= 0) {
+      autoCollapseTimeoutRef.current = null;
+      return;
+    }
     autoCollapseTimeoutRef.current = window.setTimeout(() => {
       setIsSecondaryExpanded(false);
       setIsExtendedByClick(false);
@@ -156,7 +161,9 @@ const MultiActionButton = ({
     showLabel: !isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded),
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
-  }), secondaryAction && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+  }), secondaryAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isCollapsed && /*#__PURE__*/_react.default.createElement(_MultiActionButton.StyledSeparator, {
+    $gapColor: gapColor
+  }), /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     action: secondaryAction,
     actionType: "secondary",
     backgroundColor: backgroundColor,
@@ -170,7 +177,7 @@ const MultiActionButton = ({
     showLabel: isSecondaryLabelVisible,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
-  }));
+  })));
 };
 MultiActionButton.displayName = 'MultiActionButton';
 var _default = exports.default = MultiActionButton;

package/lib/cjs/components/multi-action-button/MultiActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ActionButton","_MultiActionButton","_MultiActionButton2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","backgroundColor","className","extendedTimeoutMs","height","MultiActionButtonHeight","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","useCallback","current","window","clearTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={backgroundColor}\n                    isCollapsed={isCollapsed}\n                    isDisabled={isDisabled}\n                    isExpanded={isSecondaryExpanded}\n                    isHidden={isCollapsed}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    showLabel={isSecondaryLabelVisible}\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ActionButton","_MultiActionButton","_MultiActionButton2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","backgroundColor","className","extendedTimeoutMs","gapColor","height","MultiActionButtonHeight","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","useCallback","current","window","clearTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","Fragment","StyledSeparator","$gapColor","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    gapColor,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        if (extendedTimeoutMs <= 0) {\n            autoCollapseTimeoutRef.current = null;\n            return;\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <>\n                    {!isCollapsed && <StyledSeparator $gapColor={gapColor} />}\n                    <ActionButton\n                        action={secondaryAction}\n                        actionType=\"secondary\"\n                        backgroundColor={backgroundColor}\n                        isCollapsed={isCollapsed}\n                        isDisabled={isDisabled}\n                        isExpanded={isSecondaryExpanded}\n                        isHidden={isCollapsed}\n                        onClick={handleSecondaryClick}\n                        onMouseEnter={handleSecondaryMouseEnter}\n                        onMouseLeave={handleSecondaryMouseLeave}\n                        showLabel={isSecondaryLabelVisible}\n                        shouldUseContentWidth={shouldUseContentWidth}\n                        height={height}\n                    />\n                </>\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AACA,IAAAM,mBAAA,GAAAN,OAAA;AAAoE,SAAAE,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAT,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAMpE;AACA;AACA;AACA,MAAMmB,iBAA6C,GAAGA,CAAC;EACnDC,eAAe;EACfC,SAAS;EACTC,iBAAiB,GAAG,IAAI;EACxBC,QAAQ;EACRC,MAAM,GAAGC,2CAAuB,CAACC,MAAM;EACvCC,WAAW,GAAG,KAAK;EACnBC,UAAU,GAAG,KAAK;EAClBC,aAAa;EACbC,eAAe;EACfC,kBAAkB;EAClBC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACjE,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EACrE,MAAM,CAACG,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EAEnE,MAAMK,sBAAsB,GAAG,IAAAC,aAAM,EAAgB,IAAI,CAAC;EAE1D,MAAMC,OAAO,GAAG,IAAAC,uBAAU,EAAC,CAAC;EAE5B,MAAMC,kBAAkB,GAAGC,OAAO,CAACf,eAAe,CAAC;EACnD,MAAMgB,qBAAqB,GAAG,CAACd,KAAK,IAAI,CAACD,kBAAkB;EAE3D,MAAMgB,aAAa,GAAGpB,WAAW,GAC3BH,MAAM,GACLQ,KAAK,KAAKD,kBAAkB,GAAG,MAAM,GAAG,aAAa,CAAE;;EAE9D;AACJ;AACA;EACI,MAAMiB,wBAAwB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC/C,IAAIT,sBAAsB,CAACU,OAAO,EAAE;MAChCC,MAAM,CAACC,YAAY,CAACZ,sBAAsB,CAACU,OAAO,CAAC;IACvD;IAEA,IAAI5B,iBAAiB,IAAI,CAAC,EAAE;MACxBkB,sBAAsB,CAACU,OAAO,GAAG,IAAI;MACrC;IACJ;IAEAV,sBAAsB,CAACU,OAAO,GAAGC,MAAM,CAACE,UAAU,CAAC,MAAM;MACrDhB,sBAAsB,CAAC,KAAK,CAAC;MAC7BH,oBAAoB,CAAC,KAAK,CAAC;IAC/B,CAAC,EAAEZ,iBAAiB,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAEvB;AACJ;AACA;EACI,MAAMgC,sBAAsB,GAAG,IAAAL,kBAAW,EAAC,MAAM;IAC7CZ,sBAAsB,CAAC,IAAI,CAAC;IAC5BH,oBAAoB,CAAC,IAAI,CAAC;IAC1Bc,wBAAwB,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACA,wBAAwB,CAAC,CAAC;;EAE9B;AACJ;AACA;EACI,IAAAO,gBAAS,EACL,MAAM,MAAM;IACR,IAAIf,sBAAsB,CAACU,OAAO,EAAE;MAChCC,MAAM,CAACC,YAAY,CAACZ,sBAAsB,CAACU,OAAO,CAAC;IACvD;EACJ,CAAC,EACD,EACJ,CAAC;;EAED;AACJ;AACA;EACI,IAAAK,gBAAS,EAAC,MAAM;IACZ,IAAI5B,WAAW,EAAE;MACbU,sBAAsB,CAAC,KAAK,CAAC;MAC7BH,oBAAoB,CAAC,KAAK,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACP,WAAW,CAAC,CAAC;;EAEjB;AACJ;AACA;EACI,MAAM6B,kBAAkB,GAAG,IAAAP,kBAAW,EACjCQ,KAAoC,IAAK;IAAA,IAAAC,qBAAA;IACtC,IAAI9B,UAAU,IAAIC,aAAa,CAACD,UAAU,EAAE;MACxC;IACJ;IAEA,MAAM+B,OAAqC,GAAG;MAC1CC,MAAM,EAAE,SAAS;MACjBH,KAAK;MACLI,UAAU,EAAEzB,mBAAmB;MAC/BM;IACJ,CAAC;IAED,CAAAgB,qBAAA,GAAA7B,aAAa,CAACiC,OAAO,cAAAJ,qBAAA,eAArBA,qBAAA,CAAA3C,IAAA,CAAAc,aAAa,EAAW8B,OAAO,CAAC;EACpC,CAAC,EACD,CAAC/B,UAAU,EAAEQ,mBAAmB,EAAEM,OAAO,EAAEb,aAAa,CAC5D,CAAC;;EAED;AACJ;AACA;EACI,MAAMkC,oBAAoB,GAAG,IAAAd,kBAAW,EACnCQ,KAAoC,IAAK;IAAA,IAAAO,qBAAA;IACtC,IAAI,CAAClC,eAAe,IAAIH,WAAW,IAAIC,UAAU,IAAIE,eAAe,CAACF,UAAU,EAAE;MAC7E;IACJ;IAEA,MAAM+B,OAAqC,GAAG;MAC1CC,MAAM,EAAE,WAAW;MACnBH,KAAK;MACLI,UAAU,EAAEzB,mBAAmB;MAC/BM;IACJ,CAAC;IAED,CAAAsB,qBAAA,GAAAlC,eAAe,CAACgC,OAAO,cAAAE,qBAAA,eAAvBA,qBAAA,CAAAjD,IAAA,CAAAe,eAAe,EAAW6B,OAAO,CAAC;IAClCL,sBAAsB,CAAC,CAAC;EAC5B,CAAC,EACD,CACIA,sBAAsB,EACtB3B,WAAW,EACXC,UAAU,EACVQ,mBAAmB,EACnBM,OAAO,EACPZ,eAAe,CAEvB,CAAC;;EAED;AACJ;AACA;EACI,MAAMmC,yBAAyB,GAAG,IAAAhB,kBAAW,EAAC,MAAM;IAChD,IACI,CAACnB,eAAe,IAChBH,WAAW,IACXe,OAAO,IACPd,UAAU,IACVE,eAAe,CAACF,UAAU,EAC5B;MACE;IACJ;IAEAW,qBAAqB,CAAC,IAAI,CAAC;IAC3B,IAAI,CAACN,iBAAiB,EAAE;MACpBI,sBAAsB,CAAC,IAAI,CAAC;IAChC;EACJ,CAAC,EAAE,CAACV,WAAW,EAAEC,UAAU,EAAEK,iBAAiB,EAAES,OAAO,EAAEZ,eAAe,CAAC,CAAC;EAE1E,MAAMoC,yBAAyB,GAAG,IAAAjB,kBAAW,EAAC,MAAM;IAChD,IAAIP,OAAO,EAAE;MACT;IACJ;IAEAH,qBAAqB,CAAC,KAAK,CAAC;IAC5B,IAAI,CAACN,iBAAiB,IAAI,CAACN,WAAW,EAAE;MACpCU,sBAAsB,CAAC,KAAK,CAAC;IACjC;EACJ,CAAC,EAAE,CAACV,WAAW,EAAEM,iBAAiB,EAAES,OAAO,CAAC,CAAC;;EAE7C;AACJ;AACA;EACI,MAAMyB,uBAAuB,GAAG/B,mBAAmB,IAAK,CAACM,OAAO,IAAIJ,kBAAmB;EAEvF,oBACI5C,MAAA,CAAAgB,OAAA,CAAA0D,aAAA,CAACtE,kBAAA,CAAAuE,uBAAuB;IACpBhD,SAAS,EAAE,IAAAiD,aAAI,EAAC,0BAA0B,EAAEjD,SAAS,CAAE;IACvDkD,KAAK,EAAE;MAAEC,QAAQ,EAAE,MAAM;MAAExC,KAAK,EAAEe;IAAc;EAAE,gBAElDrD,MAAA,CAAAgB,OAAA,CAAA0D,aAAA,CAACvE,aAAA,CAAAa,OAAY;IACTkD,MAAM,EAAE/B,aAAc;IACtB4C,UAAU,EAAC,SAAS;IACpBrD,eAAe,EAAEA,eAAgB;IACjCO,WAAW,EAAEA,WAAY;IACzBC,UAAU,EAAEA,UAAW;IACvB8C,QAAQ,EAAE9B,kBAAkB,IAAIR,mBAAoB;IACpDuC,MAAM,EAAE,CAAC/B,kBAAkB,IAAI,CAACjB,WAAY;IAC5CmC,OAAO,EAAEN,kBAAmB;IAC5BoB,SAAS,EAAE,CAACjD,WAAW,KAAK,CAACiB,kBAAkB,IAAI,CAACR,mBAAmB,CAAE;IACzEU,qBAAqB,EAAEA,qBAAsB;IAC7CtB,MAAM,EAAEA;EAAO,CAClB,CAAC,EACDM,eAAe,iBACZpC,MAAA,CAAAgB,OAAA,CAAA0D,aAAA,CAAA1E,MAAA,CAAAgB,OAAA,CAAAmE,QAAA,QACK,CAAClD,WAAW,iBAAIjC,MAAA,CAAAgB,OAAA,CAAA0D,aAAA,CAACtE,kBAAA,CAAAgF,eAAe;IAACC,SAAS,EAAExD;EAAS,CAAE,CAAC,eACzD7B,MAAA,CAAAgB,OAAA,CAAA0D,aAAA,CAACvE,aAAA,CAAAa,OAAY;IACTkD,MAAM,EAAE9B,eAAgB;IACxB2C,UAAU,EAAC,WAAW;IACtBrD,eAAe,EAAEA,eAAgB;IACjCO,WAAW,EAAEA,WAAY;IACzBC,UAAU,EAAEA,UAAW;IACvBoD,UAAU,EAAE5C,mBAAoB;IAChC6C,QAAQ,EAAEtD,WAAY;IACtBmC,OAAO,EAAEC,oBAAqB;IAC9BmB,YAAY,EAAEjB,yBAA0B;IACxCkB,YAAY,EAAEjB,yBAA0B;IACxCU,SAAS,EAAET,uBAAwB;IACnCrB,qBAAqB,EAAEA,qBAAsB;IAC7CtB,MAAM,EAAEA;EAAO,CAClB,CACH,CAEe,CAAC;AAElC,CAAC;AAEDL,iBAAiB,CAACiE,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5E,OAAA,GAErCS,iBAAiB","ignoreList":[]}

package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js

@@ -3,17 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMultiActionButton = void 0;
+exports.StyledSeparator = exports.StyledMultiActionButton = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledMultiActionButton = exports.StyledMultiActionButton = (0, _styledComponents.default)(_react.motion.div)`
     align-items: stretch;
-    background: transparent;
     display: inline-flex;
     max-width: 100%;
     position: relative;
     transition: width 0.2s ease;
     width: fit-content;
 `;
+const StyledSeparator = exports.StyledSeparator = _styledComponents.default.span`
+    align-self: stretch;
+    background: ${({
+  $gapColor,
+  theme
+}) => $gapColor || (theme === null || theme === void 0 ? void 0 : theme['cw-body-background']) || '#fff'};
+    flex: 0 0 1px;
+    width: 1px;
+`;
 //# sourceMappingURL=MultiActionButton.styles.js.map

package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMultiActionButton","exports","styled","motion","div"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    background: transparent;\n    display: inline-flex;\n    max-width: 100%;\n    position: relative;\n    transition: width 0.2s ease;\n    width: fit-content;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMultiActionButton","exports","styled","motion","div","StyledSeparator","span","$gapColor","theme"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    display: inline-flex;\n    max-width: 100%;\n    position: relative;\n    transition: width 0.2s ease;\n    width: fit-content;\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n    $gapColor?: string;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n    align-self: stretch;\n    background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n    flex: 0 0 1px;\n    width: 1px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,eAAe,GAAAJ,OAAA,CAAAI,eAAA,GAAGH,yBAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,KAAIC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,oBAAoB,CAAC,KAAI,MAAM;AAChG;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Auto-reset timeout for the extended state (ms).\n     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,\n     * the secondary action collapses automatically.\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;AA0CA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;AA0CA;AACA;AACA","ignoreList":[]}

package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js

@@ -43,7 +43,6 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
         border-radius 0.2s ease,
         color 0.2s ease,
         flex-grow 0.2s ease,
-        margin-left 0.2s ease,
         opacity 0.2s ease,
         padding 0.2s ease,
         width 0.2s ease;
@@ -103,17 +102,10 @@ const StyledActionButton = exports.StyledActionButton = _styledComponents.defaul
             width: ${props.$height}px;
         `}
 
-    ${({
-  $isSecondary
-}) => $isSecondary && (0, _styledComponents.css)`
-            margin-left: 1px;
-        `}
-
     /* Fully hide the secondary action when the whole control is collapsed. */
     ${({
   $isHidden
 }) => $isHidden && (0, _styledComponents.css)`
-            margin-left: 0;
             opacity: 0;
             pointer-events: none;
             width: 0;

package/lib/cjs/components/multi-action-button/action-button/ActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 1px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_MultiActionButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","pulse","color1","color2","keyframes","StyledActionButton","exports","styled","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","css","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","MultiActionButtonStatusType","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","motion","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIsTouch } from '../../utils/environment';
 import ActionButton from './action-button/ActionButton';
-import { StyledMultiActionButton } from './MultiActionButton.styles';
+import { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';
 import { MultiActionButtonHeight } from './MultiActionButton.types';
 /**
  * Multi-action button with optional secondary action that can expand on hover/click.
@@ -11,6 +11,7 @@ const MultiActionButton = ({
   backgroundColor,
   className,
   extendedTimeoutMs = 3000,
+  gapColor,
   height = MultiActionButtonHeight.Medium,
   isCollapsed = false,
   isDisabled = false,
@@ -35,6 +36,10 @@ const MultiActionButton = ({
     if (autoCollapseTimeoutRef.current) {
       window.clearTimeout(autoCollapseTimeoutRef.current);
     }
+    if (extendedTimeoutMs <= 0) {
+      autoCollapseTimeoutRef.current = null;
+      return;
+    }
     autoCollapseTimeoutRef.current = window.setTimeout(() => {
       setIsSecondaryExpanded(false);
       setIsExtendedByClick(false);
@@ -146,7 +151,9 @@ const MultiActionButton = ({
     showLabel: !isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded),
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
-  }), secondaryAction && /*#__PURE__*/React.createElement(ActionButton, {
+  }), secondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, !isCollapsed && /*#__PURE__*/React.createElement(StyledSeparator, {
+    $gapColor: gapColor
+  }), /*#__PURE__*/React.createElement(ActionButton, {
     action: secondaryAction,
     actionType: "secondary",
     backgroundColor: backgroundColor,
@@ -160,7 +167,7 @@ const MultiActionButton = ({
     showLabel: isSecondaryLabelVisible,
     shouldUseContentWidth: shouldUseContentWidth,
     height: height
-  }));
+  })));
 };
 MultiActionButton.displayName = 'MultiActionButton';
 export default MultiActionButton;

package/lib/esm/components/multi-action-button/MultiActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useRef","useState","useIsTouch","ActionButton","StyledMultiActionButton","MultiActionButtonHeight","MultiActionButton","backgroundColor","className","extendedTimeoutMs","height","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","isTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","current","window","clearTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","payload","action","isExtended","onClick","handleSecondaryClick","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","style","maxWidth","actionType","isShrunk","isSolo","showLabel","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <ActionButton\n                    action={secondaryAction}\n                    actionType=\"secondary\"\n                    backgroundColor={backgroundColor}\n                    isCollapsed={isCollapsed}\n                    isDisabled={isDisabled}\n                    isExpanded={isSecondaryExpanded}\n                    isHidden={isCollapsed}\n                    onClick={handleSecondaryClick}\n                    onMouseEnter={handleSecondaryMouseEnter}\n                    onMouseLeave={handleSecondaryMouseLeave}\n                    showLabel={isSecondaryLabelVisible}\n                    shouldUseContentWidth={shouldUseContentWidth}\n                    height={height}\n                />\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useRef","useState","useIsTouch","ActionButton","StyledMultiActionButton","StyledSeparator","MultiActionButtonHeight","MultiActionButton","backgroundColor","className","extendedTimeoutMs","gapColor","height","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","isTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","current","window","clearTimeout","setTimeout","expandSecondaryByClick","handlePrimaryClick","event","payload","action","isExtended","onClick","handleSecondaryClick","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","style","maxWidth","actionType","isShrunk","isSolo","showLabel","Fragment","$gapColor","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n    MultiActionButtonActionEvent,\n    MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n    backgroundColor,\n    className,\n    extendedTimeoutMs = 3000,\n    gapColor,\n    height = MultiActionButtonHeight.Medium,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    width,\n}) => {\n    const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n    const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n    const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n    const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n    const isTouch = useIsTouch();\n\n    const hasSecondaryAction = Boolean(secondaryAction);\n    const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n    const resolvedWidth = isCollapsed\n        ? height\n        : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n    /**\n     * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n     */\n    const resetAutoCollapseTimeout = useCallback(() => {\n        if (autoCollapseTimeoutRef.current) {\n            window.clearTimeout(autoCollapseTimeoutRef.current);\n        }\n\n        if (extendedTimeoutMs <= 0) {\n            autoCollapseTimeoutRef.current = null;\n            return;\n        }\n\n        autoCollapseTimeoutRef.current = window.setTimeout(() => {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }, extendedTimeoutMs);\n    }, [extendedTimeoutMs]);\n\n    /**\n     * Expands the secondary action and remembers that it originated from a click.\n     */\n    const expandSecondaryByClick = useCallback(() => {\n        setIsSecondaryExpanded(true);\n        setIsExtendedByClick(true);\n        resetAutoCollapseTimeout();\n    }, [resetAutoCollapseTimeout]);\n\n    /**\n     * Cleanup timers on unmount.\n     */\n    useEffect(\n        () => () => {\n            if (autoCollapseTimeoutRef.current) {\n                window.clearTimeout(autoCollapseTimeoutRef.current);\n            }\n        },\n        [],\n    );\n\n    /**\n     * Collapsing the control should also reset any temporary expansion state.\n     */\n    useEffect(() => {\n        if (isCollapsed) {\n            setIsSecondaryExpanded(false);\n            setIsExtendedByClick(false);\n        }\n    }, [isCollapsed]);\n\n    /**\n     * Handler for the primary action button.\n     */\n    const handlePrimaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (isDisabled || primaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'primary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            primaryAction.onClick?.(payload);\n        },\n        [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n    );\n\n    /**\n     * Handler for the secondary action button.\n     */\n    const handleSecondaryClick = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n                return;\n            }\n\n            const payload: MultiActionButtonActionEvent = {\n                action: 'secondary',\n                event,\n                isExtended: isSecondaryExpanded,\n                isTouch,\n            };\n\n            secondaryAction.onClick?.(payload);\n            expandSecondaryByClick();\n        },\n        [\n            expandSecondaryByClick,\n            isCollapsed,\n            isDisabled,\n            isSecondaryExpanded,\n            isTouch,\n            secondaryAction,\n        ],\n    );\n\n    /**\n     * Desktop hover behavior keeps the secondary action expanded while hovered.\n     */\n    const handleSecondaryMouseEnter = useCallback(() => {\n        if (\n            !secondaryAction ||\n            isCollapsed ||\n            isTouch ||\n            isDisabled ||\n            secondaryAction.isDisabled\n        ) {\n            return;\n        }\n\n        setIsSecondaryHovered(true);\n        if (!isExtendedByClick) {\n            setIsSecondaryExpanded(true);\n        }\n    }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n    const handleSecondaryMouseLeave = useCallback(() => {\n        if (isTouch) {\n            return;\n        }\n\n        setIsSecondaryHovered(false);\n        if (!isExtendedByClick && !isCollapsed) {\n            setIsSecondaryExpanded(false);\n        }\n    }, [isCollapsed, isExtendedByClick, isTouch]);\n\n    /**\n     * Secondary label is visible when expanded or when hovered (desktop only).\n     */\n    const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n    return (\n        <StyledMultiActionButton\n            className={clsx('beta-chayns-multi-action', className)}\n            style={{ maxWidth: '100%', width: resolvedWidth }}\n        >\n            <ActionButton\n                action={primaryAction}\n                actionType=\"primary\"\n                backgroundColor={backgroundColor}\n                isCollapsed={isCollapsed}\n                isDisabled={isDisabled}\n                isShrunk={hasSecondaryAction && isSecondaryExpanded}\n                isSolo={!hasSecondaryAction && !isCollapsed}\n                onClick={handlePrimaryClick}\n                showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n                shouldUseContentWidth={shouldUseContentWidth}\n                height={height}\n            />\n            {secondaryAction && (\n                <>\n                    {!isCollapsed && <StyledSeparator $gapColor={gapColor} />}\n                    <ActionButton\n                        action={secondaryAction}\n                        actionType=\"secondary\"\n                        backgroundColor={backgroundColor}\n                        isCollapsed={isCollapsed}\n                        isDisabled={isDisabled}\n                        isExpanded={isSecondaryExpanded}\n                        isHidden={isCollapsed}\n                        onClick={handleSecondaryClick}\n                        onMouseEnter={handleSecondaryMouseEnter}\n                        onMouseLeave={handleSecondaryMouseLeave}\n                        showLabel={isSecondaryLabelVisible}\n                        shouldUseContentWidth={shouldUseContentWidth}\n                        height={height}\n                    />\n                </>\n            )}\n        </StyledMultiActionButton>\n    );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.styles.js

@@ -2,11 +2,19 @@ import { motion } from 'motion/react';
 import styled from 'styled-components';
 export const StyledMultiActionButton = styled(motion.div)`
     align-items: stretch;
-    background: transparent;
     display: inline-flex;
     max-width: 100%;
     position: relative;
     transition: width 0.2s ease;
     width: fit-content;
 `;
+export const StyledSeparator = styled.span`
+    align-self: stretch;
+    background: ${({
+  $gapColor,
+  theme
+}) => $gapColor || theme?.['cw-body-background'] || '#fff'};
+    flex: 0 0 1px;
+    width: 1px;
+`;
 //# sourceMappingURL=MultiActionButton.styles.js.map

package/lib/esm/components/multi-action-button/MultiActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    background: transparent;\n    display: inline-flex;\n    max-width: 100%;\n    position: relative;\n    transition: width 0.2s ease;\n    width: fit-content;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n    align-items: stretch;\n    display: inline-flex;\n    max-width: 100%;\n    position: relative;\n    transition: width 0.2s ease;\n    width: fit-content;\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n    $gapColor?: string;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n    align-self: stretch;\n    background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n    flex: 0 0 1px;\n    width: 1px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,IAAIC,KAAK,GAAG,oBAAoB,CAAC,IAAI,MAAM;AAChG;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Auto-reset timeout for the extended state (ms).\n     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,\n     * the secondary action collapses automatically.\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":"AAGA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AA0CA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n    /**\n     * Pulsing background effect.\n     * @description Applies a subtle animated overlay on the action background to draw attention.\n     * This is intended for temporary states like recording or live activity indicators.\n     */\n    Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n    /**\n     * Medium height (42px).\n     */\n    Medium = 42,\n    /**\n     * Large height (48px).\n     */\n    Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n    /**\n     * Optional pulse colors for the animation.\n     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n     * @optional\n     */\n    pulseColors?: [string, string];\n    /**\n     * Status type to apply.\n     * @description Selects the visual emphasis type applied to the action. The component currently\n     * supports a pulsing overlay, and additional types may be added later.\n     * @optional\n     */\n    type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n    /**\n     * Which action was clicked.\n     * @description Indicates whether the primary or secondary action fired. This is helpful when\n     * sharing a handler between both actions.\n     */\n    action: 'primary' | 'secondary';\n    /**\n     * Original click event.\n     * @description Useful to access modifier keys, prevent default, or stop propagation.\n     */\n    event: MouseEvent<HTMLButtonElement>;\n    /**\n     * Whether the secondary action is currently extended.\n     * @description Useful for flows that need to distinguish between a collapsed and expanded\n     * secondary action, especially on touch devices.\n     */\n    isExtended: boolean;\n    /**\n     * Whether the device is considered touch.\n     * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n     */\n    isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n    /**\n     * Optional color for the icon and label.\n     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon for the action.\n     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.\n     * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n     */\n    icon: string | ReactNode;\n    /**\n     * Whether the action is disabled.\n     * @description Disabled actions do not respond to hover or click and are visually dimmed.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * The optional label for the action.\n     * @description The label is shown next to the icon and will be truncated with ellipsis when\n     * there is not enough horizontal space.\n     * @optional\n     */\n    label: ReactNode;\n    /**\n     * Click handler for the action.\n     * @description Receives a payload that includes the action type, extension state, and device info.\n     * This allows external logic to decide whether the click should trigger an action immediately.\n     * @optional\n     */\n    onClick?: (info: MultiActionButtonActionEvent) => void;\n    /**\n     * Status effect configuration for the action.\n     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n     * @optional\n     */\n    status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n    /**\n     * Optional background color for both actions.\n     * @description Overrides the default background color for the action buttons. This is useful\n     * when the button is used on different backgrounds or when a specific brand color is needed.\n     * If omitted, the primary color from the theme is used.\n     * @default theme.primary\n     * @optional\n     */\n    backgroundColor?: string;\n    /**\n     * Additional class name for the wrapper element.\n     * @description Useful for custom styling or testing hooks.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Timeout in ms before the secondary action collapses after a click.\n     * @description Set to 0 to keep the secondary action extended until the user collapses it.\n     * @example\n     * <MultiActionButton\n     *   primaryAction={primaryAction}\n     *   secondaryAction={secondaryAction}\n     *   extendedTimeoutMs={0}\n     * />\n     * @default 3000\n     * @optional\n     */\n    extendedTimeoutMs?: number;\n    /**\n     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default MultiActionButtonHeight.Medium\n     * @optional\n     */\n    height?: number;\n    /**\n     * Optional color for the 1px separator line between actions.\n     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n     * @optional\n     */\n    gapColor?: string;\n    /**\n     * Whether the button is collapsed to a single icon.\n     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n     * Use this to provide compact states or toolbar modes.\n     * @default false\n     * @optional\n     */\n    isCollapsed?: boolean;\n    /**\n     * Whether the whole control is disabled.\n     * @description Disables interactions for both actions, including hover expansion and clicks.\n     * @default false\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Primary action configuration.\n     * @description Required action shown on the left side (or as the only action when no secondary is provided).\n     */\n    primaryAction: MultiActionButtonAction;\n    /**\n     * Secondary action configuration.\n     * @description Optional action shown on the right side. When present, it can expand on hover or click.\n     * @optional\n     */\n    secondaryAction?: MultiActionButtonAction;\n    /**\n     * Whether the button should take the full width of its parent.\n     * @description When true, the control stretches to 100% width unless `width` is provided.\n     * @optional\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * Optional width override for the whole button.\n     * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n     * the width is driven by the content unless `shouldUseFullWidth` is true.\n     * @optional\n     */\n    width?: number | MotionValue<number>;\n};\n"],"mappings":"AAGA;AACA;AACA;AACA,WAAYA,2BAA2B,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;;AASvC;AACA;AACA;AACA,WAAYC,uBAAuB,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;;AAWnC;AACA;AACA;;AAiBA;AACA;AACA;;AA0BA;AACA;AACA;;AA0CA;AACA;AACA","ignoreList":[]}

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js

@@ -36,7 +36,6 @@ export const StyledActionButton = styled.button`
         border-radius 0.2s ease,
         color 0.2s ease,
         flex-grow 0.2s ease,
-        margin-left 0.2s ease,
         opacity 0.2s ease,
         padding 0.2s ease,
         width 0.2s ease;
@@ -96,17 +95,10 @@ export const StyledActionButton = styled.button`
             width: ${props.$height}px;
         `}
 
-    ${({
-  $isSecondary
-}) => $isSecondary && css`
-            margin-left: 1px;
-        `}
-
     /* Fully hide the secondary action when the whole control is collapsed. */
     ${({
   $isHidden
 }) => $isHidden && css`
-            margin-left: 0;
             opacity: 0;
             pointer-events: none;
             width: 0;

package/lib/esm/components/multi-action-button/action-button/ActionButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        margin-left 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            margin-left: 1px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            margin-left: 0;\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.styles.js","names":["motion","styled","css","keyframes","MultiActionButtonStatusType","pulse","color1","color2","StyledActionButton","button","$height","$backgroundColor","theme","primary","$shouldUseContentWidth","$isExpanded","props","$isCollapsed","$isPrimary","$isShrunk","$isSecondary","$isHidden","$isSolo","$statusType","$pulseColors","Pulse","StyledActionContent","span","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { MultiActionButtonStatusType } from '../MultiActionButton.types';\n\ntype StyledActionButtonProps = WithTheme<{\n    $backgroundColor?: string;\n    $isCollapsed?: boolean;\n    $isExpanded?: boolean;\n    $isHidden?: boolean;\n    $isPrimary?: boolean;\n    $isSecondary?: boolean;\n    $isShrunk?: boolean;\n    $isSolo?: boolean;\n    $pulseColors?: [string, string];\n    $height: number;\n    $statusType?: MultiActionButtonStatusType;\n    $shouldUseContentWidth?: boolean;\n}>;\n\nconst pulse = (color1: string, color2: string) => keyframes`\n    0% {\n        background: ${color1};\n    }\n    50% {\n        background: ${color2};\n    }\n    100% {\n        background: ${color1};\n    }\n`;\n\nexport const StyledActionButton = styled.button<StyledActionButtonProps>`\n    align-items: center;\n    border: none;\n    border-radius: ${({ $height }) => $height / 2}px;\n    cursor: pointer;\n    display: inline-flex;\n    flex: 1 1 auto;\n    height: ${({ $height }) => $height}px;\n    line-height: 22px;\n    min-height: ${({ $height }) => $height}px;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n    transition:\n        background-color 0.2s ease,\n        border-radius 0.2s ease,\n        color 0.2s ease,\n        flex-grow 0.2s ease,\n        opacity 0.2s ease,\n        padding 0.2s ease,\n        width 0.2s ease;\n    user-select: none;\n    white-space: nowrap;\n\n    background-color: ${({ $backgroundColor, theme }) =>\n        $backgroundColor || theme?.primary || '#000'};\n    color: #fff;\n\n    /* When width is content-driven, avoid flex stretching. */\n    ${({ $shouldUseContentWidth }) =>\n        $shouldUseContentWidth &&\n        css`\n            flex: 0 1 auto;\n        `}\n\n    /* Expanded secondary button when width is not content-driven. */\n    ${({ $isExpanded, $shouldUseContentWidth }) =>\n        $isExpanded &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Collapsed state clamps to a fixed icon size. */\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Primary action stretches unless content-driven. */\n    ${({ $isPrimary, $isCollapsed, $shouldUseContentWidth }) =>\n        $isPrimary &&\n        !$isCollapsed &&\n        !$shouldUseContentWidth &&\n        css`\n            flex: 1 1 auto;\n            min-width: 0;\n        `}\n\n    /* Shrink the primary action to icon size when secondary is expanded. */\n    ${(props) =>\n        props.$isShrunk &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Keep secondary icon-only when collapsed and not expanded. */\n    ${(props) =>\n        props.$isSecondary &&\n        !props.$isExpanded &&\n        !props.$shouldUseContentWidth &&\n        css`\n            flex: 0 0 auto;\n            padding: 0;\n            width: ${props.$height}px;\n        `}\n\n    /* Fully hide the secondary action when the whole control is collapsed. */\n    ${({ $isHidden }) =>\n        $isHidden &&\n        css`\n            opacity: 0;\n            pointer-events: none;\n            width: 0;\n        `}\n\n    /* Joining both buttons into a pill shape. */\n    ${({ $isPrimary }) =>\n        $isPrimary &&\n        css`\n            border-bottom-right-radius: 0;\n            border-top-right-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isPrimary &&\n        props.$isCollapsed &&\n        css`\n            border-bottom-right-radius: ${props.$height / 2}px;\n            border-top-right-radius: ${props.$height / 2}px;\n        `}\n\n    ${({ $isSecondary }) =>\n        $isSecondary &&\n        css`\n            border-bottom-left-radius: 0;\n            border-top-left-radius: 0;\n        `}\n\n    ${(props) =>\n        props.$isSolo &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    ${(props) =>\n        props.$isCollapsed &&\n        css`\n            border-radius: ${props.$height / 2}px;\n        `}\n\n    /* Optional pulse overlay used by status. */\n    ${({ $statusType, $pulseColors }) =>\n        $statusType === MultiActionButtonStatusType.Pulse &&\n        css`\n            overflow: hidden;\n\n            &::before {\n                animation: ${pulse($pulseColors?.[0] || '#A50000', $pulseColors?.[1] || '#630000')}\n                    1.6s ease-in-out infinite;\n                border-radius: 3px;\n                content: '';\n                inset: 0;\n                pointer-events: none;\n                position: absolute;\n            }\n        `}\n\n    &:disabled {\n        cursor: default;\n        opacity: 0.5;\n    }\n\n    &:hover:not(:disabled) {\n        background-color: ${({ $backgroundColor, theme }) =>\n            `color-mix(in srgb, ${$backgroundColor || theme?.primary || '#000'} 85%, black)`};\n    }\n`;\n\nexport const StyledActionContent = styled.span`\n    align-items: center;\n    display: inline-flex;\n    flex: 1 1 auto;\n    gap: 0;\n    min-width: 0;\n    position: relative;\n    z-index: 1;\n`;\n\nexport const StyledIconSlot = styled.span<{ $height: number }>`\n    align-items: center;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: ${({ $height }) => $height}px;\n    justify-content: center;\n    width: ${({ $height }) => $height}px;\n`;\n\nexport const StyledLabelWrapper = styled(motion.span)`\n    /* The wrapper animates width/margin to avoid layout jumps. */\n    display: inline-flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-align: left;\n`;\n\nexport const StyledSecondaryLabel = styled.span`\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    padding-right: 18px;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/multi-action-button/MultiActionButton.styles.d.ts

@@ -1,3 +1,9 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 export declare const StyledMultiActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
+type StyledSeparatorProps = WithTheme<{
+    $gapColor?: string;
+}>;
+export declare const StyledSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledSeparatorProps>> & string;
+export {};

package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts

@@ -132,9 +132,14 @@ export type MultiActionButtonProps = {
      */
     className?: string;
     /**
-     * Auto-reset timeout for the extended state (ms).
-     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,
-     * the secondary action collapses automatically.
+     * Timeout in ms before the secondary action collapses after a click.
+     * @description Set to 0 to keep the secondary action extended until the user collapses it.
+     * @example
+     * <MultiActionButton
+     *   primaryAction={primaryAction}
+     *   secondaryAction={secondaryAction}
+     *   extendedTimeoutMs={0}
+     * />
      * @default 3000
      * @optional
      */
@@ -146,6 +151,12 @@ export type MultiActionButtonProps = {
      * @optional
      */
     height?: number;
+    /**
+     * Optional color for the 1px separator line between actions.
+     * @description Defaults to theme.cw-body-background and falls back to #fff if not available.
+     * @optional
+     */
+    gapColor?: string;
     /**
      * Whether the button is collapsed to a single icon.
      * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.6",
+    "version": "5.0.7",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -62,7 +62,7 @@
         "@types/styled-components": "^5.1.36",
         "@types/uuid": "^10.0.0",
         "babel-loader": "^9.2.1",
-        "chayns-api": "^2.6.5",
+        "chayns-api": "^2.6.7",
         "cross-env": "^7.0.3",
         "lerna": "^8.2.4",
         "react": "^18.3.1",
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0137467e8e2b22a7d4f7975177d914bc9d6d5309"
+    "gitHead": "9adbb6dac7f8504305ad3cd8314cbbbb8c7d1651"
 }