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

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

@@ -1 +1 @@
-{"version":3,"file":"MentionFinder.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_mentionFinder","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMentionFinder","exports","styled","div","StyledMotionMentionFinderPopup","motion","theme","$popupAlignment","MentionFinderPopupAlignment","Bottom","css","Top","undefined"],"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,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAA4E,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGrE,MAAMW,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA,CAAC;AAIM,MAAMC,8BAA8B,GAAAH,OAAA,CAAAG,8BAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEG;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKC,0CAA2B,CAACC,MAAM;MACnC,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,0CAA2B,CAACG,GAAG;MAChC,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOE,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEN;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MentionFinder.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_mentionFinder","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMentionFinder","exports","styled","div","StyledMentionFinderDragHandle","theme","$alignment","MentionFinderPopupAlignment","Top","css","StyledMentionFinderDragHandleInner","$isDragging","StyledMotionMentionFinderPopup","motion","$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":"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","ignoreList":[]}

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

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _MentionFinderItem = require("./MentionFinderItem.styles");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const MentionFinderItem = ({
   isActive,
   member,
@@ -24,7 +23,7 @@ const MentionFinderItem = ({
   }, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemImage, {
     src: member.imageUrl,
     $shouldShowRoundImage: member.shouldShowRoundImage
-  }), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContent, null, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentName, null, member.name), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentInfo, null, member.info)));
+  }), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContent, null, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentName, null, member.name), member.info && /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentInfo, null, member.info)));
 };
 MentionFinderItem.displayName = 'MentionFinderItem';
 var _default = exports.default = MentionFinderItem;

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

@@ -1 +1 @@
-{"version":3,"file":"MentionFinderItem.js","names":["_react","_interopRequireWildcard","require","_MentionFinderItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MentionFinderItem","isActive","member","onClick","onHover","handleItemClick","useCallback","handleItemMouseEnter","createElement","StyledMentionFinderItem","className","onMouseEnter","$isActive","StyledMentionFinderItemImage","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","StyledMentionFinderItemContent","StyledMentionFinderItemContentName","name","StyledMentionFinderItemContentInfo","info","displayName","_default","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAMoC,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASpC,MAAMW,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC;AAAQ,CAAC,KAAK;EAC9F,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAMH,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMI,oBAAoB,GAAG,IAAAD,kBAAW,EAAC,MAAMF,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACI5B,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC7B,kBAAA,CAAA8B,uBAAuB;IACpBC,SAAS,EAAC,oBAAoB;IAC9BP,OAAO,EAAEE,eAAgB;IACzBM,YAAY,EAAEJ,oBAAqB;IACnCK,SAAS,EAAEX;EAAS,gBAEpBzB,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC7B,kBAAA,CAAAkC,4BAA4B;IACzBC,GAAG,EAAEZ,MAAM,CAACa,QAAS;IACrBC,qBAAqB,EAAEd,MAAM,CAACe;EAAqB,CACtD,CAAC,eACFzC,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC7B,kBAAA,CAAAuC,8BAA8B,qBAC3B1C,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC7B,kBAAA,CAAAwC,kCAAkC,QAC9BjB,MAAM,CAACkB,IACwB,CAAC,eACrC5C,MAAA,CAAAU,OAAA,CAAAsB,aAAA,CAAC7B,kBAAA,CAAA0C,kCAAkC,QAC9BnB,MAAM,CAACoB,IACwB,CACR,CACX,CAAC;AAElC,CAAC;AAEDtB,iBAAiB,CAACuB,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAErCc,iBAAiB","ignoreList":[]}
+{"version":3,"file":"MentionFinderItem.js","names":["_react","_interopRequireWildcard","require","_MentionFinderItem","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MentionFinderItem","isActive","member","onClick","onHover","handleItemClick","useCallback","handleItemMouseEnter","createElement","StyledMentionFinderItem","className","onMouseEnter","$isActive","StyledMentionFinderItemImage","src","imageUrl","$shouldShowRoundImage","shouldShowRoundImage","StyledMentionFinderItemContent","StyledMentionFinderItemContentName","name","info","StyledMentionFinderItemContentInfo","displayName","_default","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAMoC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,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;AASpC,MAAMkB,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC,OAAO;EAAEC;AAAQ,CAAC,KAAK;EAC9F,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAMH,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMI,oBAAoB,GAAG,IAAAD,kBAAW,EAAC,MAAMF,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACI3B,MAAA,CAAAc,OAAA,CAAAiB,aAAA,CAAC5B,kBAAA,CAAA6B,uBAAuB;IACpBC,SAAS,EAAC,oBAAoB;IAC9BP,OAAO,EAAEE,eAAgB;IACzBM,YAAY,EAAEJ,oBAAqB;IACnCK,SAAS,EAAEX;EAAS,gBAEpBxB,MAAA,CAAAc,OAAA,CAAAiB,aAAA,CAAC5B,kBAAA,CAAAiC,4BAA4B;IACzBC,GAAG,EAAEZ,MAAM,CAACa,QAAS;IACrBC,qBAAqB,EAAEd,MAAM,CAACe;EAAqB,CACtD,CAAC,eACFxC,MAAA,CAAAc,OAAA,CAAAiB,aAAA,CAAC5B,kBAAA,CAAAsC,8BAA8B,qBAC3BzC,MAAA,CAAAc,OAAA,CAAAiB,aAAA,CAAC5B,kBAAA,CAAAuC,kCAAkC,QAC9BjB,MAAM,CAACkB,IACwB,CAAC,EACpClB,MAAM,CAACmB,IAAI,iBACR5C,MAAA,CAAAc,OAAA,CAAAiB,aAAA,CAAC5B,kBAAA,CAAA0C,kCAAkC,QAC9BpB,MAAM,CAACmB,IACwB,CAEZ,CACX,CAAC;AAElC,CAAC;AAEDrB,iBAAiB,CAACuB,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAErCS,iBAAiB","ignoreList":[]}

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

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledMentionFinderItemImage = exports.StyledMentionFinderItemContentName = exports.StyledMentionFinderItemContentInfo = exports.StyledMentionFinderItemContent = exports.StyledMentionFinderItem = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledMentionFinderItem = exports.StyledMentionFinderItem = _styledComponents.default.div`
     align-items: center;
     cursor: pointer;
@@ -20,12 +19,6 @@ const StyledMentionFinderItem = exports.StyledMentionFinderItem = _styledCompone
 }) => theme['text-rgb']}, 0.15);
     }
 
-    &:nth-child(even) {
-        background-color: ${({
-  theme
-}) => theme['101']};
-    }
-
     ${({
   $isActive,
   theme
@@ -49,6 +42,7 @@ const StyledMentionFinderItemImage = exports.StyledMentionFinderItemImage = _sty
 }) => 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;

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

@@ -1 +1 @@
-{"version":3,"file":"MentionFinderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMentionFinderItem","exports","styled","div","theme","$isActive","css","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    &: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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAKzC,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACrF;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAED;AAAM,CAAC,KACnBC,SAAS,IACT,IAAAC,qBAAG;AACX,gCAAgCF,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMM,MAAMG,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACM,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEK;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEL;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMM,8BAA8B,GAAAT,OAAA,CAAAS,8BAAA,GAAGR,yBAAM,CAACC,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACO,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG,EAAE;AAEvD,MAAMU,kCAAkC,GAAAZ,OAAA,CAAAY,kCAAA,GAAGX,yBAAM,CAACC,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"MentionFinderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMentionFinderItem","exports","styled","div","theme","$isActive","css","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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAKzC,MAAMkB,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,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,IACT,IAAAC,qBAAG;AACX,gCAAgCF,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMM,MAAMG,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACM,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEK;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEL;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMM,8BAA8B,GAAAT,OAAA,CAAAS,8BAAA,GAAGR,yBAAM,CAACC,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACO,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG,EAAE;AAEvD,MAAMU,kCAAkC,GAAAZ,OAAA,CAAAY,kCAAA,GAAGX,yBAAM,CAACC,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _environment = require("../../utils/environment");
+var _ActionButton = _interopRequireDefault(require("./action-button/ActionButton"));
+var _MultiActionButton = require("./MultiActionButton.styles");
+var _MultiActionButton2 = require("./MultiActionButton.types");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 = _MultiActionButton2.MultiActionButtonHeight.Medium,
+  width
+}) => {
+  const [isExtendedByClick, setIsExtendedByClick] = (0, _react.useState)(false);
+  const [isSecondaryExpanded, setIsSecondaryExpanded] = (0, _react.useState)(false);
+  const [isSecondaryHovered, setIsSecondaryHovered] = (0, _react.useState)(false);
+  const autoCollapseTimeoutRef = (0, _react.useRef)(null);
+  const isTouch = (0, _environment.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 = (0, _react.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 = (0, _react.useCallback)(() => {
+    setIsSecondaryExpanded(true);
+    setIsExtendedByClick(true);
+    resetAutoCollapseTimeout();
+  }, [resetAutoCollapseTimeout]);
+
+  /**
+   * Cleanup timers on unmount.
+   */
+  (0, _react.useEffect)(() => () => {
+    if (autoCollapseTimeoutRef.current) {
+      window.clearTimeout(autoCollapseTimeoutRef.current);
+    }
+  }, []);
+
+  /**
+   * Collapsing the control should also reset any temporary expansion state.
+   */
+  (0, _react.useEffect)(() => {
+    if (isCollapsed) {
+      setIsSecondaryExpanded(false);
+      setIsExtendedByClick(false);
+    }
+  }, [isCollapsed]);
+
+  /**
+   * Handler for the primary action button.
+   */
+  const handlePrimaryClick = (0, _react.useCallback)(event => {
+    var _primaryAction$onClic;
+    if (isDisabled || primaryAction.isDisabled) {
+      return;
+    }
+    const payload = {
+      action: 'primary',
+      event,
+      isExtended: isSecondaryExpanded,
+      isTouch
+    };
+    (_primaryAction$onClic = primaryAction.onClick) === null || _primaryAction$onClic === void 0 || _primaryAction$onClic.call(primaryAction, payload);
+  }, [isDisabled, isSecondaryExpanded, isTouch, primaryAction]);
+
+  /**
+   * Handler for the secondary action button.
+   */
+  const handleSecondaryClick = (0, _react.useCallback)(event => {
+    var _secondaryAction$onCl;
+    if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {
+      return;
+    }
+    const payload = {
+      action: 'secondary',
+      event,
+      isExtended: isSecondaryExpanded,
+      isTouch
+    };
+    (_secondaryAction$onCl = secondaryAction.onClick) === null || _secondaryAction$onCl === void 0 || _secondaryAction$onCl.call(secondaryAction, payload);
+    expandSecondaryByClick();
+  }, [expandSecondaryByClick, isCollapsed, isDisabled, isSecondaryExpanded, isTouch, secondaryAction]);
+
+  /**
+   * Desktop hover behavior keeps the secondary action expanded while hovered.
+   */
+  const handleSecondaryMouseEnter = (0, _react.useCallback)(() => {
+    if (!secondaryAction || isCollapsed || isTouch || isDisabled || secondaryAction.isDisabled) {
+      return;
+    }
+    setIsSecondaryHovered(true);
+    if (!isExtendedByClick) {
+      setIsSecondaryExpanded(true);
+    }
+  }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);
+  const handleSecondaryMouseLeave = (0, _react.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.default.createElement(_MultiActionButton.StyledMultiActionButton, {
+    className: (0, _clsx.default)('beta-chayns-multi-action', className),
+    style: {
+      maxWidth: '100%',
+      width: resolvedWidth
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    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.default.createElement(_ActionButton.default, {
+    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';
+var _default = exports.default = MultiActionButton;
+//# sourceMappingURL=MultiActionButton.js.map

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

@@ -0,0 +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","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","height","MultiActionButtonHeight","Medium","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 = 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":"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","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+`;
+//# sourceMappingURL=MultiActionButton.styles.js.map

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiActionButtonStatusType = exports.MultiActionButtonHeight = void 0;
+/**
+ * Supported status types for the multi action button.
+ */
+let MultiActionButtonStatusType = exports.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.
+ */
+let MultiActionButtonHeight = exports.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/cjs/components/multi-action-button/MultiActionButton.types.js.map

@@ -0,0 +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 (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;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.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("motion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../icon/Icon"));
+var _ActionButton = require("./ActionButton.styles");
+var _styledComponents = require("styled-components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LABEL_GAP = 6;
+const LABEL_TRANSITION = {
+  duration: 0.3
+};
+/**
+ * Shared action button UI used by both primary and secondary actions.
+ * Keeps layout and animations consistent while isolating styling details.
+ */
+const ActionButton = ({
+  action,
+  actionType,
+  backgroundColor,
+  isCollapsed,
+  isDisabled,
+  isExpanded,
+  isHidden,
+  isShrunk,
+  isSolo,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  showLabel,
+  shouldUseContentWidth,
+  height
+}) => {
+  var _action$status, _action$status2;
+  const theme = (0, _styledComponents.useTheme)();
+  const isPrimary = actionType === 'primary';
+  const isSecondary = actionType === 'secondary';
+  const actionColor = action.color ?? theme.text;
+  return /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionButton, {
+    disabled: isDisabled || action.isDisabled,
+    $backgroundColor: backgroundColor,
+    $isCollapsed: isCollapsed,
+    $isExpanded: isSecondary ? isExpanded : undefined,
+    $isHidden: isSecondary ? isHidden : undefined,
+    $isPrimary: isPrimary,
+    $isSecondary: isSecondary,
+    $isShrunk: isPrimary ? isShrunk : undefined,
+    $isSolo: isPrimary ? isSolo : undefined,
+    $pulseColors: (_action$status = action.status) === null || _action$status === void 0 ? void 0 : _action$status.pulseColors,
+    $height: height,
+    $statusType: (_action$status2 = action.status) === null || _action$status2 === void 0 ? void 0 : _action$status2.type,
+    $shouldUseContentWidth: shouldUseContentWidth,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    type: "button"
+  }, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionContent, null, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledIconSlot, {
+    $height: height
+  }, typeof action.icon === 'string' ? /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+    icons: [action.icon],
+    color: actionColor,
+    size: 18
+  }) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {
+    animate: {
+      opacity: 1,
+      width: 'auto',
+      marginLeft: LABEL_GAP
+    },
+    exit: {
+      opacity: 0,
+      width: 0,
+      marginLeft: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0,
+      marginLeft: 0
+    },
+    transition: LABEL_TRANSITION
+  }, /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledSecondaryLabel, {
+    style: {
+      color: actionColor
+    }
+  }, action.label)))));
+};
+ActionButton.displayName = 'ActionButton';
+var _default = exports.default = ActionButton;
+//# sourceMappingURL=ActionButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","_styledComponents","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","theme","useTheme","isPrimary","isSecondary","actionColor","color","text","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const theme = useTheme() as Theme;\n\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? theme.text;\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={18} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}