@chayns-components/core 5.0.0-beta.998 → 5.0.0

package/lib/esm/components/mention-finder/MentionFinder.styles.js

@@ -1,29 +1,116 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { MentionFinderPopupAlignment } from '../../constants/mentionFinder';
 export const StyledMentionFinder = styled.div`
     position: relative;
+    z-index: 2;
+`;
+export const StyledMentionFinderDragHandle = styled.div`
+    align-items: center;
+    background-color: ${({
+  theme
+}) => theme['000']};
+    border: 0;
+    cursor: grab;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    padding: 8px 0;
+    pointer-events: none;
+    position: sticky;
+    width: 100%;
+    z-index: 2;
+
+    ${({
+  $alignment
+}) => $alignment === MentionFinderPopupAlignment.Top ? css`
+                  border-bottom: 0;
+                  top: 0;
+              ` : css`
+                  border-top: 0;
+                  bottom: 0;
+              `}
+`;
+export const StyledMentionFinderDragHandleInner = styled.div`
+    background-color: ${({
+  theme
+}) => theme['005']};
+    border: 0;
+    border-radius: 2px;
+    cursor: ${({
+  $isDragging
+}) => $isDragging ? 'grabbing' : 'grab'};
+    display: flex;
+    height: 4px;
+    justify-content: center;
+    margin: 0 auto;
+    pointer-events: auto;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    width: 50px;
+
+    &::before {
+        content: '';
+        height: 36px;
+        left: 50%;
+        pointer-events: auto;
+        position: absolute;
+        top: 50%;
+        touch-action: none;
+        user-select: none;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        transform: translate(-50%, -50%);
+        width: 120px;
+    }
 `;
 export const StyledMotionMentionFinderPopup = styled(motion.div)`
-    background-color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['001'];
-}};
+    background-color: ${({
+  theme
+}) => theme['000']};
     border: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 0;
     border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+
+    ${({
+  $isDragging,
+  $popupAlignment
+}) => {
+  if (!$isDragging) return css`
+                z-index: 5;
+            `;
+  switch ($popupAlignment) {
+    case MentionFinderPopupAlignment.Bottom:
+      return css`
+                    border-bottom-left-radius: 15px;
+                    border-bottom-right-radius: 15px;
+                    z-index: 2;
+                `;
+    case MentionFinderPopupAlignment.Top:
+      return css`
+                    border-top-left-radius: 15px;
+                    border-top-right-radius: 15px;
+                    z-index: 2;
+                `;
+    default:
+      return css``;
+  }
+}}
     box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
     left: 0;
     max-height: 275px;
-    overflow-y: scroll;
+    overflow: hidden;
     position: absolute;
     width: 100%;
 
-    ${_ref2 => {
-  let {
-    $popupAlignment
-  } = _ref2;
+    ${({
+  $popupAlignment
+}) => {
   switch ($popupAlignment) {
     case MentionFinderPopupAlignment.Bottom:
       return css`
@@ -37,6 +124,11 @@ export const StyledMotionMentionFinderPopup = styled(motion.div)`
       return undefined;
   }
 }}
+`;
+export const StyledMentionFinderItemList = styled.div`
+    flex: 1 1 auto;
+    max-height: inherit;
+    overflow-y: auto;
 
     // Styles for custom scrollbar
     &::-webkit-scrollbar {
@@ -54,12 +146,9 @@ export const StyledMotionMentionFinderPopup = styled(motion.div)`
 
     &::-webkit-scrollbar-thumb {
         background-color: rgba(
-            ${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme['text-rgb'];
-}},
+            ${({
+  theme
+}) => theme['text-rgb']},
             0.15
         );
         border-radius: 20px;
@@ -69,16 +158,23 @@ export const StyledMotionMentionFinderPopup = styled(motion.div)`
     // only supported in Firefox:
     * {
         scrollbar-color: rgba(
-                ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme['text-rgb'];
-}},
+                ${({
+  theme
+}) => theme['text-rgb']},
                 0.15
             )
             transparent;
         scrollbar-width: thin;
     }
 `;
+export const StyledMentionFinderOverlay = styled(motion.div)`
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    background: radial-gradient(#000000a6 0, #000000bf 100%);
+    inset: 0;
+    opacity: 0;
+    pointer-events: all;
+    position: absolute;
+    z-index: 1;
+`;
 //# sourceMappingURL=MentionFinder.styles.js.map

package/lib/esm/components/mention-finder/MentionFinder.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionFinder.styles.js","names":["motion","styled","css","MentionFinderPopupAlignment","StyledMentionFinder","div","StyledMotionMentionFinderPopup","_ref","theme","_ref2","$popupAlignment","Bottom","Top","undefined","_ref3","_ref4"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n    position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n    background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n    left: 0;\n    max-height: 275px;\n    overflow-y: scroll;\n    position: absolute;\n    width: 100%;\n\n    ${({ $popupAlignment }) => {\n        switch ($popupAlignment) {\n            case MentionFinderPopupAlignment.Bottom:\n                return css`\n                    top: 0;\n                `;\n            case MentionFinderPopupAlignment.Top:\n                return css`\n                    bottom: 0;\n                `;\n            default:\n                return undefined;\n        }\n    }}\n\n    // Styles for custom scrollbar\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    &::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+BAA+B;AAG3E,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA,CAAC;AAID,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAgC;AAC/F,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAyB;EAAA,IAAxB;IAAEC;EAAgB,CAAC,GAAAD,KAAA;EAClB,QAAQC,eAAe;IACnB,KAAKP,2BAA2B,CAACQ,MAAM;MACnC,OAAOT,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACS,GAAG;MAChC,OAAOV,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOW,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEN;EAAqC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,UAAU,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBO,KAAA;EAAA,IAAC;IAAEP;EAAqC,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAAC,UAAU,CAAC;AAAA;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MentionFinder.styles.js","names":["motion","styled","css","MentionFinderPopupAlignment","StyledMentionFinder","div","StyledMentionFinderDragHandle","theme","$alignment","Top","StyledMentionFinderDragHandleInner","$isDragging","StyledMotionMentionFinderPopup","$popupAlignment","Bottom","undefined","StyledMentionFinderItemList","StyledMentionFinderOverlay"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n    position: relative;\n    z-index: 2;\n`;\n\nexport const StyledMentionFinderDragHandle = styled.div<\n    WithTheme<{ $alignment: MentionFinderPopupAlignment }>\n>`\n    align-items: center;\n    background-color: ${({ theme }) => theme['000']};\n    border: 0;\n    cursor: grab;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    padding: 8px 0;\n    pointer-events: none;\n    position: sticky;\n    width: 100%;\n    z-index: 2;\n\n    ${({ $alignment }) =>\n        $alignment === MentionFinderPopupAlignment.Top\n            ? css`\n                  border-bottom: 0;\n                  top: 0;\n              `\n            : css`\n                  border-top: 0;\n                  bottom: 0;\n              `}\n`;\n\nexport const StyledMentionFinderDragHandleInner = styled.div<\n    WithTheme<{\n        $isDragging: boolean;\n        $alignment: MentionFinderPopupAlignment;\n        $dragProgress: number;\n        $dragOffset: number;\n    }>\n>`\n    background-color: ${({ theme }) => theme['005']};\n    border: 0;\n    border-radius: 2px;\n    cursor: ${({ $isDragging }) => ($isDragging ? 'grabbing' : 'grab')};\n    display: flex;\n    height: 4px;\n    justify-content: center;\n    margin: 0 auto;\n    pointer-events: auto;\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    width: 50px;\n\n    &::before {\n        content: '';\n        height: 36px;\n        left: 50%;\n        pointer-events: auto;\n        position: absolute;\n        top: 50%;\n        touch-action: none;\n        user-select: none;\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        transform: translate(-50%, -50%);\n        width: 120px;\n    }\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{\n    $popupAlignment: MentionFinderPopupAlignment;\n    $isDragging: boolean;\n}>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n    background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-bottom: 0;\n    border-radius: 3px;\n    display: flex;\n    flex-direction: column;\n\n    ${({ $isDragging, $popupAlignment }) => {\n        if (!$isDragging)\n            return css`\n                z-index: 5;\n            `;\n        switch ($popupAlignment) {\n            case MentionFinderPopupAlignment.Bottom:\n                return css`\n                    border-bottom-left-radius: 15px;\n                    border-bottom-right-radius: 15px;\n                    z-index: 2;\n                `;\n            case MentionFinderPopupAlignment.Top:\n                return css`\n                    border-top-left-radius: 15px;\n                    border-top-right-radius: 15px;\n                    z-index: 2;\n                `;\n            default:\n                return css``;\n        }\n    }}\n    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n    left: 0;\n    max-height: 275px;\n    overflow: hidden;\n    position: absolute;\n    width: 100%;\n\n    ${({ $popupAlignment }) => {\n        switch ($popupAlignment) {\n            case MentionFinderPopupAlignment.Bottom:\n                return css`\n                    top: 0;\n                `;\n            case MentionFinderPopupAlignment.Top:\n                return css`\n                    bottom: 0;\n                `;\n            default:\n                return undefined;\n        }\n    }}\n`;\n\ntype StyledMentionFinderItemListProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemList = styled.div<WithTheme<StyledMentionFinderItemListProps>>`\n    flex: 1 1 auto;\n    max-height: inherit;\n    overflow-y: auto;\n\n    // Styles for custom scrollbar\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    &::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledMentionFinderItemListProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledMentionFinderItemListProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledMentionFinderOverlay = styled(motion.div)`\n    -webkit-backdrop-filter: blur(5px);\n    backdrop-filter: blur(5px);\n    background: radial-gradient(#000000a6 0, #000000bf 100%);\n    inset: 0;\n    opacity: 0;\n    pointer-events: all;\n    position: absolute;\n    z-index: 1;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+BAA+B;AAG3E,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACI,GAEnD;AACD;AACA,wBAAwB,CAAC;EAAEE;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACbA,UAAU,KAAKL,2BAA2B,CAACM,GAAG,GACxCP,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMQ,kCAAkC,GAAGT,MAAM,CAACI,GAOxD;AACD,wBAAwB,CAAC;EAAEE;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA,cAAc,CAAC;EAAEI;AAAY,CAAC,KAAMA,WAAW,GAAG,UAAU,GAAG,MAAO;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,8BAA8B,GAAGX,MAAM,CAACD,MAAM,CAACK,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEE;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEI,WAAW;EAAEE;AAAgB,CAAC,KAAK;EACpC,IAAI,CAACF,WAAW,EACZ,OAAOT,GAAG;AACtB;AACA,aAAa;EACL,QAAQW,eAAe;IACnB,KAAKV,2BAA2B,CAACW,MAAM;MACnC,OAAOZ,GAAG;AAC1B;AACA;AACA;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACM,GAAG;MAChC,OAAOP,GAAG;AAC1B;AACA;AACA;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG,EAAE;EACpB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEW;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKV,2BAA2B,CAACW,MAAM;MACnC,OAAOZ,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACM,GAAG;MAChC,OAAOP,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOa,SAAS;EACxB;AACJ,CAAC;AACL,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGf,MAAM,CAACI,GAAgD;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEE;AAAwC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAwC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,0BAA0B,GAAGhB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js

@@ -1,12 +1,11 @@
 import React, { useCallback } from 'react';
 import { StyledMentionFinderItem, StyledMentionFinderItemContent, StyledMentionFinderItemContentInfo, StyledMentionFinderItemContentName, StyledMentionFinderItemImage } from './MentionFinderItem.styles';
-const MentionFinderItem = _ref => {
-  let {
-    isActive,
-    member,
-    onClick,
-    onHover
-  } = _ref;
+const MentionFinderItem = ({
+  isActive,
+  member,
+  onClick,
+  onHover
+}) => {
   const handleItemClick = useCallback(() => onClick(member), [member, onClick]);
   const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);
   return /*#__PURE__*/React.createElement(StyledMentionFinderItem, {
@@ -17,7 +16,7 @@ const MentionFinderItem = _ref => {
   }, /*#__PURE__*/React.createElement(StyledMentionFinderItemImage, {
     src: member.imageUrl,
     $shouldShowRoundImage: member.shouldShowRoundImage
-  }), /*#__PURE__*/React.createElement(StyledMentionFinderItemContent, null, /*#__PURE__*/React.createElement(StyledMentionFinderItemContentName, null, member.name), /*#__PURE__*/React.createElement(StyledMentionFinderItemContentInfo, null, member.info)));
+  }), /*#__PURE__*/React.createElement(StyledMentionFinderItemContent, null, /*#__PURE__*/React.createElement(StyledMentionFinderItemContentName, null, member.name), member.info && /*#__PURE__*/React.createElement(StyledMentionFinderItemContentInfo, null, member.info)));
 };
 MentionFinderItem.displayName = 'MentionFinderItem';
 export default MentionFinderItem;

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionFinderItem.js","names":["React","useCallback","StyledMentionFinderItem","StyledMentionFinderItemContent","StyledMentionFinderItemContentInfo","StyledMentionFinderItemContentName","StyledMentionFinderItemImage","MentionFinderItem","_ref","isActive","member","onClick","onHover","handleItemClick","handleItemMouseEnter","createElement","className","onMouseEnter","$isActive","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","name","info","displayName"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport type { MentionMember } from '../MentionFinder';\nimport {\n    StyledMentionFinderItem,\n    StyledMentionFinderItemContent,\n    StyledMentionFinderItemContentInfo,\n    StyledMentionFinderItemContentName,\n    StyledMentionFinderItemImage,\n} from './MentionFinderItem.styles';\n\nexport type MentionFinderItemProps = {\n    isActive: boolean;\n    member: MentionMember;\n    onClick: (member: MentionMember) => void;\n    onHover: (member: MentionMember) => void;\n};\n\nconst MentionFinderItem: FC<MentionFinderItemProps> = ({ isActive, member, onClick, onHover }) => {\n    const handleItemClick = useCallback(() => onClick(member), [member, onClick]);\n\n    const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);\n\n    return (\n        <StyledMentionFinderItem\n            className=\"prevent-lose-focus\"\n            onClick={handleItemClick}\n            onMouseEnter={handleItemMouseEnter}\n            $isActive={isActive}\n        >\n            <StyledMentionFinderItemImage\n                src={member.imageUrl}\n                $shouldShowRoundImage={member.shouldShowRoundImage}\n            />\n            <StyledMentionFinderItemContent>\n                <StyledMentionFinderItemContentName>\n                    {member.name}\n                </StyledMentionFinderItemContentName>\n                <StyledMentionFinderItemContentInfo>\n                    {member.info}\n                </StyledMentionFinderItemContentInfo>\n            </StyledMentionFinderItemContent>\n        </StyledMentionFinderItem>\n    );\n};\n\nMentionFinderItem.displayName = 'MentionFinderItem';\n\nexport default MentionFinderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAE9C,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,kCAAkC,EAClCC,kCAAkC,EAClCC,4BAA4B,QACzB,4BAA4B;AASnC,MAAMC,iBAA6C,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,OAAO;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EACzF,MAAMK,eAAe,GAAGZ,WAAW,CAAC,MAAMU,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMG,oBAAoB,GAAGb,WAAW,CAAC,MAAMW,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACIZ,KAAA,CAAAe,aAAA,CAACb,uBAAuB;IACpBc,SAAS,EAAC,oBAAoB;IAC9BL,OAAO,EAAEE,eAAgB;IACzBI,YAAY,EAAEH,oBAAqB;IACnCI,SAAS,EAAET;EAAS,gBAEpBT,KAAA,CAAAe,aAAA,CAACT,4BAA4B;IACzBa,GAAG,EAAET,MAAM,CAACU,QAAS;IACrBC,qBAAqB,EAAEX,MAAM,CAACY;EAAqB,CACtD,CAAC,eACFtB,KAAA,CAAAe,aAAA,CAACZ,8BAA8B,qBAC3BH,KAAA,CAAAe,aAAA,CAACV,kCAAkC,QAC9BK,MAAM,CAACa,IACwB,CAAC,eACrCvB,KAAA,CAAAe,aAAA,CAACX,kCAAkC,QAC9BM,MAAM,CAACc,IACwB,CACR,CACX,CAAC;AAElC,CAAC;AAEDjB,iBAAiB,CAACkB,WAAW,GAAG,mBAAmB;AAEnD,eAAelB,iBAAiB","ignoreList":[]}
+{"version":3,"file":"MentionFinderItem.js","names":["React","useCallback","StyledMentionFinderItem","StyledMentionFinderItemContent","StyledMentionFinderItemContentInfo","StyledMentionFinderItemContentName","StyledMentionFinderItemImage","MentionFinderItem","isActive","member","onClick","onHover","handleItemClick","handleItemMouseEnter","createElement","className","onMouseEnter","$isActive","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","name","info","displayName"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport type { MentionMember } from '../MentionFinder';\nimport {\n    StyledMentionFinderItem,\n    StyledMentionFinderItemContent,\n    StyledMentionFinderItemContentInfo,\n    StyledMentionFinderItemContentName,\n    StyledMentionFinderItemImage,\n} from './MentionFinderItem.styles';\n\nexport type MentionFinderItemProps = {\n    isActive: boolean;\n    member: MentionMember;\n    onClick: (member: MentionMember) => void;\n    onHover: (member: MentionMember) => void;\n};\n\nconst MentionFinderItem: FC<MentionFinderItemProps> = ({ isActive, member, onClick, onHover }) => {\n    const handleItemClick = useCallback(() => onClick(member), [member, onClick]);\n\n    const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);\n\n    return (\n        <StyledMentionFinderItem\n            className=\"prevent-lose-focus\"\n            onClick={handleItemClick}\n            onMouseEnter={handleItemMouseEnter}\n            $isActive={isActive}\n        >\n            <StyledMentionFinderItemImage\n                src={member.imageUrl}\n                $shouldShowRoundImage={member.shouldShowRoundImage}\n            />\n            <StyledMentionFinderItemContent>\n                <StyledMentionFinderItemContentName>\n                    {member.name}\n                </StyledMentionFinderItemContentName>\n                {member.info && (\n                    <StyledMentionFinderItemContentInfo>\n                        {member.info}\n                    </StyledMentionFinderItemContentInfo>\n                )}\n            </StyledMentionFinderItemContent>\n        </StyledMentionFinderItem>\n    );\n};\n\nMentionFinderItem.displayName = 'MentionFinderItem';\n\nexport default MentionFinderItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,QAAQ,OAAO;AAE9C,SACIC,uBAAuB,EACvBC,8BAA8B,EAC9BC,kCAAkC,EAClCC,kCAAkC,EAClCC,4BAA4B,QACzB,4BAA4B;AASnC,MAAMC,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC;AAAQ,CAAC,KAAK;EAC9F,MAAMC,eAAe,GAAGX,WAAW,CAAC,MAAMS,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMG,oBAAoB,GAAGZ,WAAW,CAAC,MAAMU,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACIX,KAAA,CAAAc,aAAA,CAACZ,uBAAuB;IACpBa,SAAS,EAAC,oBAAoB;IAC9BL,OAAO,EAAEE,eAAgB;IACzBI,YAAY,EAAEH,oBAAqB;IACnCI,SAAS,EAAET;EAAS,gBAEpBR,KAAA,CAAAc,aAAA,CAACR,4BAA4B;IACzBY,GAAG,EAAET,MAAM,CAACU,QAAS;IACrBC,qBAAqB,EAAEX,MAAM,CAACY;EAAqB,CACtD,CAAC,eACFrB,KAAA,CAAAc,aAAA,CAACX,8BAA8B,qBAC3BH,KAAA,CAAAc,aAAA,CAACT,kCAAkC,QAC9BI,MAAM,CAACa,IACwB,CAAC,EACpCb,MAAM,CAACc,IAAI,iBACRvB,KAAA,CAAAc,aAAA,CAACV,kCAAkC,QAC9BK,MAAM,CAACc,IACwB,CAEZ,CACX,CAAC;AAElC,CAAC;AAEDhB,iBAAiB,CAACiB,WAAW,GAAG,mBAAmB;AAEnD,eAAejB,iBAAiB","ignoreList":[]}

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js

@@ -7,69 +7,43 @@ export const StyledMentionFinderItem = styled.div`
 
     &:not(:last-child) {
         border-bottom: 1px solid
-            rgba(${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['text-rgb'];
-}}, 0.15);
+            rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.15);
     }
 
-    &:nth-child(even) {
-        background-color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme['101'];
-}};
-    }
-
-    ${_ref3 => {
-  let {
-    $isActive,
-    theme
-  } = _ref3;
-  return $isActive && css`
+    ${({
+  $isActive,
+  theme
+}) => $isActive && css`
             background-color: ${theme['102']} !important;
-        `;
-}}
+        `}
 `;
 export const StyledMentionFinderItemImage = styled.img`
     background-color: rgba(
-        ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme['text-rgb'];
-}},
+        ${({
+  theme
+}) => theme['text-rgb']},
         0.1
     );
-    border-radius: ${_ref5 => {
-  let {
-    $shouldShowRoundImage
-  } = _ref5;
-  return $shouldShowRoundImage ? '50%' : 'initial';
-}};
+    border-radius: ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage ? '50%' : 'initial'};
     box-shadow: 0 0 0 1px
-        rgba(${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme['009-rgb'];
-}}, 0.08) inset;
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
     flex: 0 0 auto;
     height: 40px;
+    object-fit: cover;
     overflow: hidden;
     transition: border-radius 0.3s ease;
     width: 40px;
 `;
 export const StyledMentionFinderItemContent = styled.div`
-    color: ${_ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;

package/lib/esm/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","_ref","theme","_ref2","_ref3","$isActive","StyledMentionFinderItemImage","img","_ref4","_ref5","$shouldShowRoundImage","_ref6","StyledMentionFinderItemContent","_ref7","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: 10px 8px;\n\n    &:not(:last-child) {\n        border-bottom: 1px solid\n            rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n    }\n\n    &:nth-child(even) {\n        background-color: ${({ theme }: StyledMentionFinderItemProps) => theme['101']};\n    }\n\n    ${({ $isActive, theme }) =>\n        $isActive &&\n        css`\n            background-color: ${theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n    color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    justify-content: center;\n    line-height: normal;\n    margin-left: 10px;\n    min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmBC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA;AACjF;AACA;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA;AACrF;AACA;AACA,MAAME,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACnBC,SAAS,IACTP,GAAG;AACX,gCAAgCI,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMI,4BAA4B,GAAGT,MAAM,CAACU,GAAsC;AACzF;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEN;EAAyC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,UAAU,CAAC;AAAA;AAC7E;AACA;AACA,qBAAqBO,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAG,SAAS;AAAA,CAAC;AAC/F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAET;EAAyC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,SAAS,CAAC;AAAA;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMU,8BAA8B,GAAGf,MAAM,CAACG,GAAG;AACxD,aAAaa,KAAA;EAAA,IAAC;IAAEX;EAA2C,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAACY,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGlB,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMgB,kCAAkC,GAAGnB,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MentionFinderItem.styles.js","names":["styled","css","StyledMentionFinderItem","div","theme","$isActive","StyledMentionFinderItemImage","img","$shouldShowRoundImage","StyledMentionFinderItemContent","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: 10px 8px;\n\n    &:not(:last-child) {\n        border-bottom: 1px solid\n            rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n    }\n\n    ${({ $isActive, theme }) =>\n        $isActive &&\n        css`\n            background-color: ${theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    object-fit: cover;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n    color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    justify-content: center;\n    line-height: normal;\n    margin-left: 10px;\n    min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAED;AAAM,CAAC,KACnBC,SAAS,IACTJ,GAAG;AACX,gCAAgCG,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMD,OAAO,MAAME,4BAA4B,GAAGN,MAAM,CAACO,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEH;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEI;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,8BAA8B,GAAGT,MAAM,CAACG,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACM,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGX,MAAM,CAACG,GAAG,EAAE;AAE9D,OAAO,MAAMS,kCAAkC,GAAGZ,MAAM,CAACG,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiActionButton.js","names":["clsx","React","useCallback","useEffect","useRef","useState","useIsTouch","ActionButton","StyledMultiActionButton","MultiActionButtonHeight","MultiActionButton","backgroundColor","className","extendedTimeoutMs","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","height","Medium","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 = 2000,\n    isCollapsed = false,\n    isDisabled = false,\n    primaryAction,\n    secondaryAction,\n    shouldUseFullWidth,\n    height = MultiActionButtonHeight.Medium,\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":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,IAAoBC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACvF,SAASC,UAAU,QAAQ,yBAAyB;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,uBAAuB,QAAQ,2BAA2B;AAMnE;AACA;AACA;AACA,MAAMC,iBAA6C,GAAGA,CAAC;EACnDC,eAAe;EACfC,SAAS;EACTC,iBAAiB,GAAG,IAAI;EACxBC,WAAW,GAAG,KAAK;EACnBC,UAAU,GAAG,KAAK;EAClBC,aAAa;EACbC,eAAe;EACfC,kBAAkB;EAClBC,MAAM,GAAGV,uBAAuB,CAACW,MAAM;EACvCC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM,CAACmB,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM,CAACqB,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EAEnE,MAAMuB,sBAAsB,GAAGxB,MAAM,CAAgB,IAAI,CAAC;EAE1D,MAAMyB,OAAO,GAAGvB,UAAU,CAAC,CAAC;EAE5B,MAAMwB,kBAAkB,GAAGC,OAAO,CAACd,eAAe,CAAC;EACnD,MAAMe,qBAAqB,GAAG,CAACX,KAAK,IAAI,CAACH,kBAAkB;EAE3D,MAAMe,aAAa,GAAGnB,WAAW,GAC3BK,MAAM,GACLE,KAAK,KAAKH,kBAAkB,GAAG,MAAM,GAAG,aAAa,CAAE;;EAE9D;AACJ;AACA;EACI,MAAMgB,wBAAwB,GAAGhC,WAAW,CAAC,MAAM;IAC/C,IAAI0B,sBAAsB,CAACO,OAAO,EAAE;MAChCC,MAAM,CAACC,YAAY,CAACT,sBAAsB,CAACO,OAAO,CAAC;IACvD;IAEAP,sBAAsB,CAACO,OAAO,GAAGC,MAAM,CAACE,UAAU,CAAC,MAAM;MACrDb,sBAAsB,CAAC,KAAK,CAAC;MAC7BF,oBAAoB,CAAC,KAAK,CAAC;IAC/B,CAAC,EAAEV,iBAAiB,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAEvB;AACJ;AACA;EACI,MAAM0B,sBAAsB,GAAGrC,WAAW,CAAC,MAAM;IAC7CuB,sBAAsB,CAAC,IAAI,CAAC;IAC5BF,oBAAoB,CAAC,IAAI,CAAC;IAC1BW,wBAAwB,CAAC,CAAC;EAC9B,CAAC,EAAE,CAACA,wBAAwB,CAAC,CAAC;;EAE9B;AACJ;AACA;EACI/B,SAAS,CACL,MAAM,MAAM;IACR,IAAIyB,sBAAsB,CAACO,OAAO,EAAE;MAChCC,MAAM,CAACC,YAAY,CAACT,sBAAsB,CAACO,OAAO,CAAC;IACvD;EACJ,CAAC,EACD,EACJ,CAAC;;EAED;AACJ;AACA;EACIhC,SAAS,CAAC,MAAM;IACZ,IAAIW,WAAW,EAAE;MACbW,sBAAsB,CAAC,KAAK,CAAC;MAC7BF,oBAAoB,CAAC,KAAK,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;;EAEjB;AACJ;AACA;EACI,MAAM0B,kBAAkB,GAAGtC,WAAW,CACjCuC,KAAoC,IAAK;IACtC,IAAI1B,UAAU,IAAIC,aAAa,CAACD,UAAU,EAAE;MACxC;IACJ;IAEA,MAAM2B,OAAqC,GAAG;MAC1CC,MAAM,EAAE,SAAS;MACjBF,KAAK;MACLG,UAAU,EAAEpB,mBAAmB;MAC/BK;IACJ,CAAC;IAEDb,aAAa,CAAC6B,OAAO,GAAGH,OAAO,CAAC;EACpC,CAAC,EACD,CAAC3B,UAAU,EAAES,mBAAmB,EAAEK,OAAO,EAAEb,aAAa,CAC5D,CAAC;;EAED;AACJ;AACA;EACI,MAAM8B,oBAAoB,GAAG5C,WAAW,CACnCuC,KAAoC,IAAK;IACtC,IAAI,CAACxB,eAAe,IAAIH,WAAW,IAAIC,UAAU,IAAIE,eAAe,CAACF,UAAU,EAAE;MAC7E;IACJ;IAEA,MAAM2B,OAAqC,GAAG;MAC1CC,MAAM,EAAE,WAAW;MACnBF,KAAK;MACLG,UAAU,EAAEpB,mBAAmB;MAC/BK;IACJ,CAAC;IAEDZ,eAAe,CAAC4B,OAAO,GAAGH,OAAO,CAAC;IAClCH,sBAAsB,CAAC,CAAC;EAC5B,CAAC,EACD,CACIA,sBAAsB,EACtBzB,WAAW,EACXC,UAAU,EACVS,mBAAmB,EACnBK,OAAO,EACPZ,eAAe,CAEvB,CAAC;;EAED;AACJ;AACA;EACI,MAAM8B,yBAAyB,GAAG7C,WAAW,CAAC,MAAM;IAChD,IACI,CAACe,eAAe,IAChBH,WAAW,IACXe,OAAO,IACPd,UAAU,IACVE,eAAe,CAACF,UAAU,EAC5B;MACE;IACJ;IAEAY,qBAAqB,CAAC,IAAI,CAAC;IAC3B,IAAI,CAACL,iBAAiB,EAAE;MACpBG,sBAAsB,CAAC,IAAI,CAAC;IAChC;EACJ,CAAC,EAAE,CAACX,WAAW,EAAEC,UAAU,EAAEO,iBAAiB,EAAEO,OAAO,EAAEZ,eAAe,CAAC,CAAC;EAE1E,MAAM+B,yBAAyB,GAAG9C,WAAW,CAAC,MAAM;IAChD,IAAI2B,OAAO,EAAE;MACT;IACJ;IAEAF,qBAAqB,CAAC,KAAK,CAAC;IAC5B,IAAI,CAACL,iBAAiB,IAAI,CAACR,WAAW,EAAE;MACpCW,sBAAsB,CAAC,KAAK,CAAC;IACjC;EACJ,CAAC,EAAE,CAACX,WAAW,EAAEQ,iBAAiB,EAAEO,OAAO,CAAC,CAAC;;EAE7C;AACJ;AACA;EACI,MAAMoB,uBAAuB,GAAGzB,mBAAmB,IAAK,CAACK,OAAO,IAAIH,kBAAmB;EAEvF,oBACIzB,KAAA,CAAAiD,aAAA,CAAC1C,uBAAuB;IACpBI,SAAS,EAAEZ,IAAI,CAAC,0BAA0B,EAAEY,SAAS,CAAE;IACvDuC,KAAK,EAAE;MAAEC,QAAQ,EAAE,MAAM;MAAE/B,KAAK,EAAEY;IAAc;EAAE,gBAElDhC,KAAA,CAAAiD,aAAA,CAAC3C,YAAY;IACToC,MAAM,EAAE3B,aAAc;IACtBqC,UAAU,EAAC,SAAS;IACpB1C,eAAe,EAAEA,eAAgB;IACjCG,WAAW,EAAEA,WAAY;IACzBC,UAAU,EAAEA,UAAW;IACvBuC,QAAQ,EAAExB,kBAAkB,IAAIN,mBAAoB;IACpD+B,MAAM,EAAE,CAACzB,kBAAkB,IAAI,CAAChB,WAAY;IAC5C+B,OAAO,EAAEL,kBAAmB;IAC5BgB,SAAS,EAAE,CAAC1C,WAAW,KAAK,CAACgB,kBAAkB,IAAI,CAACN,mBAAmB,CAAE;IACzEQ,qBAAqB,EAAEA,qBAAsB;IAC7Cb,MAAM,EAAEA;EAAO,CAClB,CAAC,EACDF,eAAe,iBACZhB,KAAA,CAAAiD,aAAA,CAAC3C,YAAY;IACToC,MAAM,EAAE1B,eAAgB;IACxBoC,UAAU,EAAC,WAAW;IACtB1C,eAAe,EAAEA,eAAgB;IACjCG,WAAW,EAAEA,WAAY;IACzBC,UAAU,EAAEA,UAAW;IACvB0C,UAAU,EAAEjC,mBAAoB;IAChCkC,QAAQ,EAAE5C,WAAY;IACtB+B,OAAO,EAAEC,oBAAqB;IAC9Ba,YAAY,EAAEZ,yBAA0B;IACxCa,YAAY,EAAEZ,yBAA0B;IACxCQ,SAAS,EAAEP,uBAAwB;IACnCjB,qBAAqB,EAAEA,qBAAsB;IAC7Cb,MAAM,EAAEA;EAAO,CAClB,CAEgB,CAAC;AAElC,CAAC;AAEDT,iBAAiB,CAACmD,WAAW,GAAG,mBAAmB;AAEnD,eAAenD,iBAAiB","ignoreList":[]}

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

@@ -0,0 +1,12 @@
+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;
+`;
+//# sourceMappingURL=MultiActionButton.styles.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,44 @@
+/**
+ * Supported status types for the multi action button.
+ */
+export let MultiActionButtonStatusType = /*#__PURE__*/function (MultiActionButtonStatusType) {
+  /**
+   * Pulsing background effect.
+   * @description Applies a subtle animated overlay on the action background to draw attention.
+   * This is intended for temporary states like recording or live activity indicators.
+   */
+  MultiActionButtonStatusType["Pulse"] = "pulse";
+  return MultiActionButtonStatusType;
+}({});
+
+/**
+ * Supported heights for the multi action button.
+ */
+export let MultiActionButtonHeight = /*#__PURE__*/function (MultiActionButtonHeight) {
+  /**
+   * Medium height (42px).
+   */
+  MultiActionButtonHeight[MultiActionButtonHeight["Medium"] = 42] = "Medium";
+  /**
+   * Large height (52px).
+   */
+  MultiActionButtonHeight[MultiActionButtonHeight["Large"] = 52] = "Large";
+  return MultiActionButtonHeight;
+}({});
+
+/**
+ * Minimal status configuration for an action.
+ */
+
+/**
+ * Event payload emitted on action click.
+ */
+
+/**
+ * Configuration for a single action.
+ */
+
+/**
+ * Props for the MultiActionButton component.
+ */
+//# sourceMappingURL=MultiActionButton.types.js.map

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

@@ -0,0 +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 (52px).\n     */\n    Large = 52,\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.\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 2000\n     * @optional\n     */\n    extendedTimeoutMs?: 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     * @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     * @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     * Height of the button.\n     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n     * @default 42\n     * @optional\n     */\n    height?: number;\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":[]}