@hh.ru/magritte-ui-floating-button 1.1.0 → 1.2.1

package/FloatingButton.js

@@ -10,15 +10,18 @@ import { Layer } from '@hh.ru/magritte-ui-layer';
 import { Loader } from '@hh.ru/magritte-ui-loader';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"wrapper":"magritte-wrapper___7m9lC_1-1-0","animation-timeout":"magritte-animation-timeout___NL8n0_1-1-0","animationTimeout":"magritte-animation-timeout___NL8n0_1-1-0","button":"magritte-button___nL-Hn_1-1-0","loading":"magritte-loading___C0oPZ_1-1-0","right":"magritte-right___3n0Rz_1-1-0","content":"magritte-content___JNpTZ_1-1-0","left":"magritte-left___GnzU7_1-1-0","center":"magritte-center___MdA40_1-1-0","textless":"magritte-textless___IbYgp_1-1-0","postfix":"magritte-postfix___r0EZ6_1-1-0","label":"magritte-label___EPgvj_1-1-0","withPostfix":"magritte-withPostfix___PmQAz_1-1-0","hideLabel":"magritte-hideLabel___K79XM_1-1-0","withLabelOnHover":"magritte-withLabelOnHover___1oktd_1-1-0","icon":"magritte-icon___VpqJt_1-1-0","border-radius":"magritte-border-radius___ObLLb_1-1-0","borderRadius":"magritte-border-radius___ObLLb_1-1-0","loader":"magritte-loader___EPezG_1-1-0","enter-animation":"magritte-enter-animation___2sPz3_1-1-0","enterAnimation":"magritte-enter-animation___2sPz3_1-1-0","enter-animation-active":"magritte-enter-animation-active___Lq9eq_1-1-0","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_1-1-0","exit-animation":"magritte-exit-animation___h2-7a_1-1-0","exitAnimation":"magritte-exit-animation___h2-7a_1-1-0","exit-animation-active":"magritte-exit-animation-active___w0F1a_1-1-0","exitAnimationActive":"magritte-exit-animation-active___w0F1a_1-1-0","button_style-neutral":"magritte-button_style-neutral___bPUwu_1-1-0","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_1-1-0","button_style-inverse":"magritte-button_style-inverse___Xgf26_1-1-0","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_1-1-0"};
+var styles = {"wrapper":"magritte-wrapper___7m9lC_1-2-1","animation-timeout":"magritte-animation-timeout___NL8n0_1-2-1","animationTimeout":"magritte-animation-timeout___NL8n0_1-2-1","button":"magritte-button___nL-Hn_1-2-1","loading":"magritte-loading___C0oPZ_1-2-1","withIconAndLabel":"magritte-withIconAndLabel___Qa-lU_1-2-1","right":"magritte-right___3n0Rz_1-2-1","content":"magritte-content___JNpTZ_1-2-1","left":"magritte-left___GnzU7_1-2-1","center":"magritte-center___MdA40_1-2-1","postfix":"magritte-postfix___r0EZ6_1-2-1","icon":"magritte-icon___VpqJt_1-2-1","textless":"magritte-textless___IbYgp_1-2-1","label":"magritte-label___EPgvj_1-2-1","withPostfix":"magritte-withPostfix___PmQAz_1-2-1","hideLabel":"magritte-hideLabel___K79XM_1-2-1","withLabelOnHover":"magritte-withLabelOnHover___1oktd_1-2-1","border-radius":"magritte-border-radius___ObLLb_1-2-1","borderRadius":"magritte-border-radius___ObLLb_1-2-1","loader":"magritte-loader___EPezG_1-2-1","enter-animation":"magritte-enter-animation___2sPz3_1-2-1","enterAnimation":"magritte-enter-animation___2sPz3_1-2-1","enter-animation-active":"magritte-enter-animation-active___Lq9eq_1-2-1","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_1-2-1","exit-animation":"magritte-exit-animation___h2-7a_1-2-1","exitAnimation":"magritte-exit-animation___h2-7a_1-2-1","exit-animation-active":"magritte-exit-animation-active___w0F1a_1-2-1","exitAnimationActive":"magritte-exit-animation-active___w0F1a_1-2-1","button_style-neutral":"magritte-button_style-neutral___bPUwu_1-2-1","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_1-2-1","button_style-inverse":"magritte-button_style-inverse___Xgf26_1-2-1","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_1-2-1"};
 
 const ALLOWED_BADGE_SIZES = ['small'];
-const FloatingButtonComponent = (props, ref) => {
-    const { Element = 'button', style = 'neutral', disabled, borderRadius, icon: IconComponent, postfix, loading, host, children, className, inlineStyle, visible, labelOnHover, hideLabel, badge, position = 'right', } = props;
-    let additionalAttributes;
+const FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabled, borderRadius, icon: IconComponent, postfix, loading, host, children, className, inlineStyle, visible, labelOnHover: _labelOnHover, hideLabel: _hideLabel, badge, position = 'right', 'data-qa': dataQa = 'floating-button', ...restProps }, ref) => {
+    const labelOnHover = _labelOnHover && !!IconComponent;
+    const hideLabel = _hideLabel && !!IconComponent;
     const isServerEnv = useServerEnv();
     const wrapperRef = useRef(null);
     const [animationTimeout, setAnimationTimeout] = useState(0);
+    const additionalAttributes = {
+        'data-qa': dataQa,
+    };
     useLayoutEffect(() => {
         const animationTimeoutElement = document.createElement('div');
         animationTimeoutElement.classList.add(styles.animationTimeout);
@@ -31,29 +34,25 @@ const FloatingButtonComponent = (props, ref) => {
         document.body.removeChild(animationTimeoutElement);
     }, []);
     if (Element === 'button') {
-        additionalAttributes = {
-            type: 'button',
-        };
+        additionalAttributes.type = 'button';
     }
     else {
-        additionalAttributes = {
-            role: 'button',
-            tabIndex: disabled ? -1 : 0,
-            'aria-disabled': disabled,
-        };
+        additionalAttributes.role = Element !== 'a' ? 'button' : undefined;
+        additionalAttributes['aria-disabled'] = disabled;
     }
     additionalAttributes.ref = ref;
     if (isServerEnv) {
         return null;
     }
-    let button = (jsx(Element, { ...additionalAttributes, disabled: !!disabled, className: classnames(styles.button, styles[`button_style-${style}`], {
+    let button = (jsx(Element, { ...additionalAttributes, ...restProps, disabled: !!disabled, tabIndex: disabled || loading ? -1 : 0, className: classnames(styles.button, styles[`button_style-${style}`], {
             [styles.borderRadius]: !!borderRadius,
             [styles.loading]: !!loading,
             [styles.withLabelOnHover]: !!labelOnHover,
-            [styles.hideLabel]: !!hideLabel,
+            [styles.hideLabel]: !!hideLabel || !children,
             [styles.withPostfix]: !!postfix,
             [styles.textless]: !postfix && (!children || !!hideLabel),
-        }, className), children: jsxs("span", { className: styles.content, children: [IconComponent && (jsx("span", { className: styles.icon, children: jsx(IconComponent, {}) })), children && (jsx("span", { className: styles.label, children: jsx(Text, { typography: 'subtitle-1-semibold', children: children }) })), postfix && (jsx("span", { className: styles.postfix, children: jsx(Text, { typography: 'subtitle-1-semibold', children: postfix }) })), loading && (jsx("span", { className: styles.loader, children: jsx(Loader, { size: 24 }) }))] }) }));
+            [styles.withIconAndLabel]: !!IconComponent && !!children && !hideLabel,
+        }), children: jsxs("span", { className: styles.content, children: [IconComponent && (jsx("span", { className: styles.icon, children: jsx(IconComponent, { "data-qa": `${dataQa}-icon` }) })), jsx("span", { className: styles.label, "data-qa": `${dataQa}-label`, children: jsx(Text, { typography: 'subtitle-1-semibold', children: children }) }), postfix && (jsx("span", { className: styles.postfix, "data-qa": `${dataQa}-postfix`, children: jsx(Text, { typography: 'subtitle-1-semibold', children: postfix }) })), loading && (jsx("span", { className: styles.loader, children: jsx(Loader, { size: 24 }) }))] }) }));
     if (badge && !disabled) {
         button = (jsx(ComponentWithBadge, { allowedSizes: ALLOWED_BADGE_SIZES, badge: badge, offset: 4, noClip: true, children: button }));
     }
@@ -67,7 +66,7 @@ const FloatingButtonComponent = (props, ref) => {
             enterActive: styles.enterAnimationActive,
             exit: styles.exitAnimation,
             exitActive: styles.exitAnimationActive,
-        }, timeout: animationTimeout, unmountOnExit: true, children: jsx(Layer, { layer: "floating-button", children: jsx("div", { className: classnames(styles.wrapper, styles[`${position}`]), ref: wrapperRef, style: inlineStyle, children: button }) }) }), host?.current || document.body);
+        }, timeout: animationTimeout, unmountOnExit: true, children: jsx(Layer, { layer: "floating-button", children: jsx("div", { className: classnames(styles.wrapper, styles[`${position}`], className), ref: wrapperRef, style: inlineStyle, "data-qa": `${dataQa}-wrapper`, children: button }) }) }), host?.current || document.body);
 };
 const FloatingButton = forwardRef(FloatingButtonComponent);
 

package/FloatingButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport type { PolymorphicComponentWithRef, PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport { BadgeSize, ComponentWithBadge } from '@hh.ru/magritte-ui-badge';\nimport type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nconst ALLOWED_BADGE_SIZES: BadgeSize[] = ['small'];\n\nconst FloatingButtonComponent: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'> = (props, ref) => {\n    const {\n        Element = 'button',\n        style = 'neutral',\n        disabled,\n        borderRadius,\n        icon: IconComponent,\n        postfix,\n        loading,\n        host,\n        children,\n        className,\n        inlineStyle,\n        visible,\n        labelOnHover,\n        hideLabel,\n        badge,\n        position = 'right',\n    } = props;\n\n    let additionalAttributes: Record<string, unknown>;\n    const isServerEnv = useServerEnv();\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [animationTimeout, setAnimationTimeout] = useState(0);\n\n    useLayoutEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    if (Element === 'button') {\n        additionalAttributes = {\n            type: 'button',\n        };\n    } else {\n        additionalAttributes = {\n            role: 'button',\n            tabIndex: disabled ? -1 : 0,\n            'aria-disabled': disabled,\n        };\n    }\n    additionalAttributes.ref = ref;\n\n    if (isServerEnv) {\n        return null;\n    }\n    let button = (\n        <Element\n            {...additionalAttributes}\n            disabled={!!disabled}\n            className={classnames(\n                styles.button,\n                styles[`button_style-${style}`],\n                {\n                    [styles.borderRadius]: !!borderRadius,\n                    [styles.loading]: !!loading,\n                    [styles.withLabelOnHover]: !!labelOnHover,\n                    [styles.hideLabel]: !!hideLabel,\n                    [styles.withPostfix]: !!postfix,\n                    [styles.textless]: !postfix && (!children || !!hideLabel),\n                },\n                className\n            )}\n        >\n            <span className={styles.content}>\n                {IconComponent && (\n                    <span className={styles.icon}>\n                        <IconComponent />\n                    </span>\n                )}\n\n                {children && (\n                    <span className={styles.label}>\n                        <Text typography={'subtitle-1-semibold'}>{children}</Text>\n                    </span>\n                )}\n                {postfix && (\n                    <span className={styles.postfix}>\n                        <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n                    </span>\n                )}\n\n                {loading && (\n                    <span className={styles.loader}>\n                        <Loader size={24} />\n                    </span>\n                )}\n            </span>\n        </Element>\n    );\n\n    if (badge && !disabled) {\n        button = (\n            <ComponentWithBadge allowedSizes={ALLOWED_BADGE_SIZES} badge={badge} offset={4} noClip>\n                {button}\n            </ComponentWithBadge>\n        );\n    }\n\n    if (isServerEnv) {\n        return null;\n    }\n\n    return createPortal(\n        <CSSTransition\n            appear\n            in={!!visible && !isServerEnv}\n            nodeRef={wrapperRef}\n            classNames={{\n                appear: styles.enterAnimation,\n                appearActive: styles.enterAnimationActive,\n                enter: styles.enterAnimation,\n                enterActive: styles.enterAnimationActive,\n                exit: styles.exitAnimation,\n                exitActive: styles.exitAnimationActive,\n            }}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            <Layer layer=\"floating-button\">\n                <div className={classnames(styles.wrapper, styles[`${position}`])} ref={wrapperRef} style={inlineStyle}>\n                    {button}\n                </div>\n            </Layer>\n        </CSSTransition>,\n        host?.current || document.body\n    );\n};\n\nexport const FloatingButton = forwardRef(FloatingButtonComponent) as PolymorphicComponentWithRef<\n    FloatingButtonProps,\n    'button'\n>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport type { PolymorphicComponentWithRef, PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport { BadgeSize, ComponentWithBadge } from '@hh.ru/magritte-ui-badge';\nimport type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nconst ALLOWED_BADGE_SIZES: BadgeSize[] = ['small'];\n\nconst FloatingButtonComponent: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'> = (\n    {\n        Element = 'button',\n        style = 'neutral',\n        disabled,\n        borderRadius,\n        icon: IconComponent,\n        postfix,\n        loading,\n        host,\n        children,\n        className,\n        inlineStyle,\n        visible,\n        labelOnHover: _labelOnHover,\n        hideLabel: _hideLabel,\n        badge,\n        position = 'right',\n        'data-qa': dataQa = 'floating-button',\n        ...restProps\n    },\n    ref\n) => {\n    const labelOnHover = _labelOnHover && !!IconComponent;\n    const hideLabel = _hideLabel && !!IconComponent;\n    const isServerEnv = useServerEnv();\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [animationTimeout, setAnimationTimeout] = useState(0);\n\n    const additionalAttributes: Record<string, unknown> = {\n        'data-qa': dataQa,\n    };\n\n    useLayoutEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.animationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    if (Element === 'button') {\n        additionalAttributes.type = 'button';\n    } else {\n        additionalAttributes.role = Element !== 'a' ? 'button' : undefined;\n        additionalAttributes['aria-disabled'] = disabled;\n    }\n\n    additionalAttributes.ref = ref;\n\n    if (isServerEnv) {\n        return null;\n    }\n    let button = (\n        <Element\n            {...additionalAttributes}\n            {...restProps}\n            disabled={!!disabled}\n            tabIndex={disabled || loading ? -1 : 0}\n            className={classnames(styles.button, styles[`button_style-${style}`], {\n                [styles.borderRadius]: !!borderRadius,\n                [styles.loading]: !!loading,\n                [styles.withLabelOnHover]: !!labelOnHover,\n                [styles.hideLabel]: !!hideLabel || !children,\n                [styles.withPostfix]: !!postfix,\n                [styles.textless]: !postfix && (!children || !!hideLabel),\n                [styles.withIconAndLabel]: !!IconComponent && !!children && !hideLabel,\n            })}\n        >\n            <span className={styles.content}>\n                {IconComponent && (\n                    <span className={styles.icon}>\n                        <IconComponent data-qa={`${dataQa}-icon`} />\n                    </span>\n                )}\n                <span className={styles.label} data-qa={`${dataQa}-label`}>\n                    <Text typography={'subtitle-1-semibold'}>{children}</Text>\n                </span>\n                {postfix && (\n                    <span className={styles.postfix} data-qa={`${dataQa}-postfix`}>\n                        <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n                    </span>\n                )}\n\n                {loading && (\n                    <span className={styles.loader}>\n                        <Loader size={24} />\n                    </span>\n                )}\n            </span>\n        </Element>\n    );\n\n    if (badge && !disabled) {\n        button = (\n            <ComponentWithBadge allowedSizes={ALLOWED_BADGE_SIZES} badge={badge} offset={4} noClip>\n                {button}\n            </ComponentWithBadge>\n        );\n    }\n\n    if (isServerEnv) {\n        return null;\n    }\n\n    return createPortal(\n        <CSSTransition\n            appear\n            in={!!visible && !isServerEnv}\n            nodeRef={wrapperRef}\n            classNames={{\n                appear: styles.enterAnimation,\n                appearActive: styles.enterAnimationActive,\n                enter: styles.enterAnimation,\n                enterActive: styles.enterAnimationActive,\n                exit: styles.exitAnimation,\n                exitActive: styles.exitAnimationActive,\n            }}\n            timeout={animationTimeout}\n            unmountOnExit\n        >\n            <Layer layer=\"floating-button\">\n                <div\n                    className={classnames(styles.wrapper, styles[`${position}`], className)}\n                    ref={wrapperRef}\n                    style={inlineStyle}\n                    data-qa={`${dataQa}-wrapper`}\n                >\n                    {button}\n                </div>\n            </Layer>\n        </CSSTransition>,\n        host?.current || document.body\n    );\n};\n\nexport const FloatingButton = forwardRef(FloatingButtonComponent) as PolymorphicComponentWithRef<\n    FloatingButtonProps,\n    'button'\n>;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,mBAAmB,GAAgB,CAAC,OAAO,CAAC,CAAC;AAEnD,MAAM,uBAAuB,GAAmE,CAC5F,EACI,OAAO,GAAG,QAAQ,EAClB,KAAK,GAAG,SAAS,EACjB,QAAQ,EACR,YAAY,EACZ,IAAI,EAAE,aAAa,EACnB,OAAO,EACP,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,QAAQ,GAAG,OAAO,EAClB,SAAS,EAAE,MAAM,GAAG,iBAAiB,EACrC,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,YAAY,GAAG,aAAa,IAAI,CAAC,CAAC,aAAa,CAAC;AACtD,IAAA,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,CAAC,aAAa,CAAC;AAChD,IAAA,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC;AACnC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAE5D,IAAA,MAAM,oBAAoB,GAA4B;AAClD,QAAA,SAAS,EAAE,MAAM;KACpB,CAAC;IAEF,eAAe,CAAC,MAAK;QACjB,MAAM,uBAAuB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,uBAAuB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC/D,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAsB,oBAAA,CAAA,CAAC,EAAE,EAAE,CAAC,CAAC;AACtF,QAAA,IAAI,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE;YACpC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;SACzC;AACD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;KACtD,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;AACtB,QAAA,oBAAoB,CAAC,IAAI,GAAG,QAAQ,CAAC;KACxC;SAAM;AACH,QAAA,oBAAoB,CAAC,IAAI,GAAG,OAAO,KAAK,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;AACnE,QAAA,oBAAoB,CAAC,eAAe,CAAC,GAAG,QAAQ,CAAC;KACpD;AAED,IAAA,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;IAE/B,IAAI,WAAW,EAAE;AACb,QAAA,OAAO,IAAI,CAAC;KACf;IACD,IAAI,MAAM,IACNA,GAAA,CAAC,OAAO,EACA,EAAA,GAAA,oBAAoB,KACpB,SAAS,EACb,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,QAAQ,EAAE,QAAQ,IAAI,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EACtC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAgB,aAAA,EAAA,KAAK,CAAE,CAAA,CAAC,EAAE;AAClE,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY;AACrC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO;AAC3B,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,CAAC,CAAC,YAAY;YACzC,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,QAAQ;AAC5C,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO;AAC/B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC;AACzD,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,SAAS;SACzE,CAAC,EAAA,QAAA,EAEFC,eAAM,SAAS,EAAE,MAAM,CAAC,OAAO,aAC1B,aAAa,KACVD,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACxB,QAAA,EAAAA,GAAA,CAAC,aAAa,EAAA,EAAA,SAAA,EAAU,CAAG,EAAA,MAAM,OAAO,EAAI,CAAA,EAAA,CACzC,CACV,EACDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,KAAK,EAAW,SAAA,EAAA,CAAA,EAAG,MAAM,CAAQ,MAAA,CAAA,EAAA,QAAA,EACrDA,IAAC,IAAI,EAAA,EAAC,UAAU,EAAE,qBAAqB,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EAAA,CACvD,EACN,OAAO,KACJA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAW,SAAA,EAAA,CAAA,EAAG,MAAM,CAAU,QAAA,CAAA,EAAA,QAAA,EACzDA,IAAC,IAAI,EAAA,EAAC,UAAU,EAAE,qBAAqB,EAAG,QAAA,EAAA,OAAO,EAAQ,CAAA,EAAA,CACtD,CACV,EAEA,OAAO,KACJA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAA,CAAI,GACjB,CACV,CAAA,EAAA,CACE,EACD,CAAA,CACb,CAAC;AAEF,IAAA,IAAI,KAAK,IAAI,CAAC,QAAQ,EAAE;QACpB,MAAM,IACFA,GAAC,CAAA,kBAAkB,IAAC,YAAY,EAAE,mBAAmB,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EACjF,IAAA,EAAA,QAAA,EAAA,MAAM,EACU,CAAA,CACxB,CAAC;KACL;IAED,IAAI,WAAW,EAAE;AACb,QAAA,OAAO,IAAI,CAAC;KACf;IAED,OAAO,YAAY,CACfA,GAAC,CAAA,aAAa,IACV,MAAM,EAAA,IAAA,EACN,EAAE,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE;YACR,MAAM,EAAE,MAAM,CAAC,cAAc;YAC7B,YAAY,EAAE,MAAM,CAAC,oBAAoB;YACzC,KAAK,EAAE,MAAM,CAAC,cAAc;YAC5B,WAAW,EAAE,MAAM,CAAC,oBAAoB;YACxC,IAAI,EAAE,MAAM,CAAC,aAAa;YAC1B,UAAU,EAAE,MAAM,CAAC,mBAAmB;SACzC,EACD,OAAO,EAAE,gBAAgB,EACzB,aAAa,EAEb,IAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,iBAAiB,EAAA,QAAA,EAC1BA,aACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,EACvE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,WAAW,EACT,SAAA,EAAA,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,EAE3B,QAAA,EAAA,MAAM,EACL,CAAA,EAAA,CACF,EACI,CAAA,EAChB,IAAI,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CACjC,CAAC;AACN,CAAC,CAAC;MAEW,cAAc,GAAG,UAAU,CAAC,uBAAuB;;;;"}

package/index.css

@@ -40,6 +40,10 @@
 :root{
   --magritte-semantic-animation-time-s-duration-v23-2-2:200ms;
   --magritte-semantic-animation-ease-base-timing-function-v23-2-2:cubic-bezier(0.4, 0.24, 0, 1);
+  --magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-100-duration-v23-2-2:100ms;
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v23-2-2:200ms;
 }
 
 .magritte-night-theme{
@@ -70,101 +74,117 @@
   --magritte-shadow-level-2-color-v23-2-2:#0000003d;
   --magritte-shadow-level-1-color-v23-2-2:#00000029;
 }
-.magritte-wrapper___7m9lC_1-1-0{
+.magritte-wrapper___7m9lC_1-2-1{
   display:inline-block;
   position:fixed;
 }
-.magritte-wrapper___7m9lC_1-1-0,
-.magritte-animation-timeout___NL8n0_1-1-0{
+.magritte-wrapper___7m9lC_1-2-1,
+.magritte-animation-timeout___NL8n0_1-2-1{
   --animation-duration:0;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-wrapper___7m9lC_1-1-0,
-  .magritte-animation-timeout___NL8n0_1-1-0{
+  .magritte-wrapper___7m9lC_1-2-1,
+  .magritte-animation-timeout___NL8n0_1-2-1{
     --animation-duration:var(--magritte-semantic-animation-time-s-duration-v23-2-2);
   }
 }
-.magritte-button___nL-Hn_1-1-0{
+.magritte-button___nL-Hn_1-2-1{
   display:inline-block;
-  padding:12px 16px;
+  padding:12px;
   border-radius:24px;
+  transition-property:transform;
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v23-2-2);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-2);
 }
-.magritte-button___nL-Hn_1-1-0:disabled,
-.magritte-button___nL-Hn_1-1-0.magritte-loading___C0oPZ_1-1-0{
+.magritte-button___nL-Hn_1-2-1:disabled,
+.magritte-button___nL-Hn_1-2-1[aria-disabled='true'],
+.magritte-button___nL-Hn_1-2-1.magritte-loading___C0oPZ_1-2-1{
   pointer-events:none;
   cursor:not-allowed;
 }
-.magritte-right___3n0Rz_1-1-0{
+.magritte-button___nL-Hn_1-2-1:not(:disabled):active,
+.magritte-button___nL-Hn_1-2-1:not([aria-disabled='true']):active{
+  transform:scale(0.96);
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-2);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v23-2-2);
+}
+.magritte-withIconAndLabel___Qa-lU_1-2-1{
+  padding:12px 16px;
+}
+.magritte-right___3n0Rz_1-2-1{
   right:16px;
   bottom:20px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-right___3n0Rz_1-1-0{
+  body.magritte-old-layout .magritte-right___3n0Rz_1-2-1{
     right:36px;
     bottom:32px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-right___3n0Rz_1-1-0{
+  body:not(.magritte-old-layout) .magritte-right___3n0Rz_1-2-1{
     right:36px;
     bottom:32px;
   }
 }
-.magritte-right___3n0Rz_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-right___3n0Rz_1-2-1 .magritte-content___JNpTZ_1-2-1{
   justify-content:end;
 }
-.magritte-left___GnzU7_1-1-0{
+.magritte-left___GnzU7_1-2-1{
   left:16px;
   bottom:20px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-left___GnzU7_1-1-0{
+  body.magritte-old-layout .magritte-left___GnzU7_1-2-1{
     left:36px;
     bottom:32px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-left___GnzU7_1-1-0{
+  body:not(.magritte-old-layout) .magritte-left___GnzU7_1-2-1{
     left:36px;
     bottom:32px;
   }
 }
-.magritte-left___GnzU7_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-left___GnzU7_1-2-1 .magritte-content___JNpTZ_1-2-1{
   justify-content:start;
 }
-.magritte-center___MdA40_1-1-0{
+.magritte-center___MdA40_1-2-1{
   left:50%;
   bottom:20px;
   transform:translateX(-50%);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-center___MdA40_1-1-0{
+  body.magritte-old-layout .magritte-center___MdA40_1-2-1{
     bottom:32px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-center___MdA40_1-1-0{
+  body:not(.magritte-old-layout) .magritte-center___MdA40_1-2-1{
     bottom:32px;
   }
 }
-.magritte-center___MdA40_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-center___MdA40_1-2-1 .magritte-content___JNpTZ_1-2-1{
   justify-content:space-between;
 }
-.magritte-textless___IbYgp_1-1-0{
-  padding:12px;
+.magritte-postfix___r0EZ6_1-2-1{
+  padding:0 4px;
+}
+.magritte-icon___VpqJt_1-2-1{
+  margin-right:4px;
 }
-.magritte-postfix___r0EZ6_1-1-0{
-  margin-left:8px;
+.magritte-textless___IbYgp_1-2-1 .magritte-icon___VpqJt_1-2-1{
+  margin:0;
 }
-.magritte-label___EPgvj_1-1-0{
+.magritte-label___EPgvj_1-2-1{
   text-align:left;
-  padding-left:8px;
   overflow:hidden;
   transition-property:padding;
   transition-duration:var(--animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
+  padding:0 4px;
 }
-.magritte-content___JNpTZ_1-1-0{
+.magritte-content___JNpTZ_1-2-1{
   display:inline-grid;
   justify-content:flex-end;
   grid-template-columns:max-content 1fr;
@@ -173,54 +193,76 @@
   transition-duration:var(--animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
 }
-.magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-withPostfix___PmQAz_1-2-1 .magritte-content___JNpTZ_1-2-1{
   grid-template-columns:max-content 1fr max-content;
 }
-.magritte-hideLabel___K79XM_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-hideLabel___K79XM_1-2-1 .magritte-content___JNpTZ_1-2-1{
   grid-template-columns:max-content 0fr;
 }
-.magritte-hideLabel___K79XM_1-1-0 .magritte-label___EPgvj_1-1-0{
+.magritte-hideLabel___K79XM_1-2-1 .magritte-label___EPgvj_1-2-1{
   padding:0;
 }
-.magritte-hideLabel___K79XM_1-1-0.magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-hideLabel___K79XM_1-2-1.magritte-withPostfix___PmQAz_1-2-1 .magritte-content___JNpTZ_1-2-1{
   grid-template-columns:max-content 0fr max-content;
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0){
+.magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1).magritte-withIconAndLabel___Qa-lU_1-2-1{
   padding:12px;
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0).magritte-withPostfix___PmQAz_1-1-0{
-  padding:12px 16px;
+.magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):not(.magritte-withPostfix___PmQAz_1-2-1) .magritte-icon___VpqJt_1-2-1{
+  margin:0;
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0) .magritte-content___JNpTZ_1-1-0{
+.magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1) .magritte-content___JNpTZ_1-2-1{
   grid-template-columns:max-content 0fr;
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0).magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
+.magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1).magritte-withPostfix___PmQAz_1-2-1 .magritte-content___JNpTZ_1-2-1{
   grid-template-columns:max-content 0fr max-content;
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0) .magritte-label___EPgvj_1-1-0{
+.magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1) .magritte-label___EPgvj_1-2-1{
   padding:0;
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']){
-  padding:12px 16px;
-}
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_1-1-0{
-  grid-template-columns:max-content 1fr;
-}
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
-  grid-template-columns:max-content 1fr max-content;
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']).magritte-withIconAndLabel___Qa-lU_1-2-1{
+    padding:12px 16px;
+  }
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']) .magritte-icon___VpqJt_1-2-1{
+    margin-right:4px;
+  }
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_1-2-1{
+    grid-template-columns:max-content 1fr;
+  }
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_1-2-1 .magritte-content___JNpTZ_1-2-1{
+    grid-template-columns:max-content 1fr max-content;
+  }
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_1-2-1{
+    padding:0 4px;
+  }
 }
-.magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_1-1-0{
-  padding-left:8px;
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']).magritte-withIconAndLabel___Qa-lU_1-2-1{
+    padding:12px 16px;
+  }
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']) .magritte-icon___VpqJt_1-2-1{
+    margin-right:4px;
+  }
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_1-2-1{
+    grid-template-columns:max-content 1fr;
+  }
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_1-2-1 .magritte-content___JNpTZ_1-2-1{
+    grid-template-columns:max-content 1fr max-content;
+  }
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-1:not(.magritte-hideLabel___K79XM_1-2-1):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_1-2-1{
+    padding:0 4px;
+  }
 }
-.magritte-loading___C0oPZ_1-1-0 .magritte-postfix___r0EZ6_1-1-0,
-.magritte-loading___C0oPZ_1-1-0 .magritte-icon___VpqJt_1-1-0,
-.magritte-loading___C0oPZ_1-1-0 .magritte-label___EPgvj_1-1-0{
+.magritte-loading___C0oPZ_1-2-1 .magritte-postfix___r0EZ6_1-2-1,
+.magritte-loading___C0oPZ_1-2-1 .magritte-icon___VpqJt_1-2-1,
+.magritte-loading___C0oPZ_1-2-1 .magritte-label___EPgvj_1-2-1{
   visibility:hidden;
 }
-.magritte-border-radius___ObLLb_1-1-0{
+.magritte-border-radius___ObLLb_1-2-1{
   border-radius:12px;
 }
-.magritte-loader___EPezG_1-1-0{
+.magritte-loader___EPezG_1-2-1{
   position:absolute;
   left:50%;
   top:50%;
@@ -228,91 +270,97 @@
   line-height:0;
   overflow:hidden;
 }
-.magritte-enter-animation___2sPz3_1-1-0{
+.magritte-enter-animation___2sPz3_1-2-1{
   opacity:0;
 }
-.magritte-enter-animation-active___Lq9eq_1-1-0{
+.magritte-enter-animation-active___Lq9eq_1-2-1{
   opacity:1;
   transition-property:opacity;
   transition-duration:var(--animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
 }
-.magritte-exit-animation___h2-7a_1-1-0{
+.magritte-exit-animation___h2-7a_1-2-1{
   opacity:1;
 }
-.magritte-exit-animation-active___w0F1a_1-1-0{
+.magritte-exit-animation-active___w0F1a_1-2-1{
   opacity:0;
   transition-property:opacity;
   transition-duration:var(--animation-duration);
   transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
 }
-.magritte-button_style-neutral___bPUwu_1-1-0{
+.magritte-button_style-neutral___bPUwu_1-2-1{
   background:var(--magritte-color-component-button-background-neutral-v23-2-2);
   --magritte-ui-text-color-override:var(--magritte-color-component-button-text-neutral-v23-2-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-neutral-v23-2-2);
   box-shadow:var(--magritte-shadow-level-2-x-v23-2-2) var(--magritte-shadow-level-2-y-v23-2-2) var(--magritte-shadow-level-2-blur-v23-2-2) var(--magritte-shadow-level-2-spread-v23-2-2) var(--magritte-shadow-level-2-color-v23-2-2);
   --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-neutral-v23-2-2);
 }
-.magritte-button_style-neutral___bPUwu_1-1-0 .magritte-postfix___r0EZ6_1-1-0{
+.magritte-button_style-neutral___bPUwu_1-2-1 .magritte-postfix___r0EZ6_1-2-1{
   --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-neutral-v23-2-2);
 }
-.magritte-button_style-neutral___bPUwu_1-1-0.focus-visible{
+.magritte-button_style-neutral___bPUwu_1-2-1.focus-visible{
   outline:4px solid var(--magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-2);
   background:var(--magritte-color-component-button-background-state-neutral-focused-v23-2-2);
 }
-.magritte-button_style-neutral___bPUwu_1-1-0:not(:disabled):active{
+.magritte-button_style-neutral___bPUwu_1-2-1:not(:disabled):active,
+.magritte-button_style-neutral___bPUwu_1-2-1:not([aria-disabled='true']):active{
   background:var(--magritte-color-component-button-background-state-neutral-pressed-v23-2-2);
 }
-.magritte-button_style-neutral___bPUwu_1-1-0:disabled{
+.magritte-button_style-neutral___bPUwu_1-2-1:disabled,
+.magritte-button_style-neutral___bPUwu_1-2-1[aria-disabled='true']{
   background:var(--magritte-color-component-button-background-state-neutral-disabled-v23-2-2);
   --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-neutral-disabled-v23-2-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-neutral-disabled-v23-2-2);
 }
-.magritte-button_style-neutral___bPUwu_1-1-0:disabled .magritte-postfix___r0EZ6_1-1-0{
+.magritte-button_style-neutral___bPUwu_1-2-1:disabled .magritte-postfix___r0EZ6_1-2-1,
+.magritte-button_style-neutral___bPUwu_1-2-1[aria-disabled='true'] .magritte-postfix___r0EZ6_1-2-1{
   --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-button_style-neutral___bPUwu_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+  body.magritte-old-layout .magritte-button_style-neutral___bPUwu_1-2-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
     background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+  body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_1-2-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
     background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-2);
   }
 }
-.magritte-button_style-inverse___Xgf26_1-1-0{
+.magritte-button_style-inverse___Xgf26_1-2-1{
   background:var(--magritte-color-component-button-background-inverse-v23-2-2);
   --magritte-ui-text-color-override:var(--magritte-color-component-button-text-inverse-v23-2-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-inverse-v23-2-2);
   box-shadow:var(--magritte-shadow-level-1-x-v23-2-2) var(--magritte-shadow-level-1-y-v23-2-2) var(--magritte-shadow-level-1-blur-v23-2-2) var(--magritte-shadow-level-1-spread-v23-2-2) var(--magritte-shadow-level-1-color-v23-2-2);
   --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-inverse-v23-2-2);
 }
-.magritte-button_style-inverse___Xgf26_1-1-0 .magritte-postfix___r0EZ6_1-1-0{
+.magritte-button_style-inverse___Xgf26_1-2-1 .magritte-postfix___r0EZ6_1-2-1{
   --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-inverse-v23-2-2);
 }
-.magritte-button_style-inverse___Xgf26_1-1-0.focus-visible{
+.magritte-button_style-inverse___Xgf26_1-2-1.focus-visible{
   outline:4px solid var(--magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-2);
   background:var(--magritte-color-component-button-background-state-inverse-focused-v23-2-2);
 }
-.magritte-button_style-inverse___Xgf26_1-1-0:not(:disabled):active{
+.magritte-button_style-inverse___Xgf26_1-2-1:not(:disabled):active,
+.magritte-button_style-inverse___Xgf26_1-2-1:not([aria-disabled='true']):active{
   background:var(--magritte-color-component-button-background-state-inverse-pressed-v23-2-2);
 }
-.magritte-button_style-inverse___Xgf26_1-1-0:disabled{
+.magritte-button_style-inverse___Xgf26_1-2-1:disabled,
+.magritte-button_style-inverse___Xgf26_1-2-1[aria-disabled='true']{
   background:var(--magritte-color-component-button-background-state-inverse-disabled-v23-2-2);
   --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-inverse-disabled-v23-2-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-inverse-disabled-v23-2-2);
 }
-.magritte-button_style-inverse___Xgf26_1-1-0:disabled .magritte-postfix___r0EZ6_1-1-0{
+.magritte-button_style-inverse___Xgf26_1-2-1:disabled .magritte-postfix___r0EZ6_1-2-1,
+.magritte-button_style-inverse___Xgf26_1-2-1[aria-disabled='true'] .magritte-postfix___r0EZ6_1-2-1{
   --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-button_style-inverse___Xgf26_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+  body.magritte-old-layout .magritte-button_style-inverse___Xgf26_1-2-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
     background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+  body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_1-2-1:hover:not(:active):not(:disabled):not([aria-disabled='true']){
     background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-2);
   }
 }

package/index.mock.d.ts

@@ -0,0 +1,2 @@
+export * from '@hh.ru/magritte-ui-floating-button/types';
+export declare const FloatingButton: import("react").ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,9 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const FloatingButton = mockComponent('FloatingButton', undefined, {
+    withChildren: true,
+});
+
+export { FloatingButton };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport * from '@hh.ru/magritte-ui-floating-button/types';\n\nexport const FloatingButton = mockComponent('FloatingButton', undefined, {\n    withChildren: true,\n});\n"],"names":[],"mappings":";;MAIa,cAAc,GAAG,aAAa,CAAC,gBAAgB,EAAE,SAAS,EAAE;AACrE,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-floating-button",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -21,12 +21,13 @@
   "dependencies": {
     "@hh.ru/magritte-common-is-server-env": "1.0.7",
     "@hh.ru/magritte-design-tokens": "23.2.2",
-    "@hh.ru/magritte-types": "5.0.4",
+    "@hh.ru/magritte-types": "5.0.5",
     "@hh.ru/magritte-ui-badge": "3.2.0",
     "@hh.ru/magritte-ui-breakpoint": "6.0.1",
     "@hh.ru/magritte-ui-layer": "3.0.4",
-    "@hh.ru/magritte-ui-loader": "2.0.9",
-    "@hh.ru/magritte-ui-typography": "4.2.3"
+    "@hh.ru/magritte-ui-loader": "2.0.10",
+    "@hh.ru/magritte-ui-mock-component": "1.1.5",
+    "@hh.ru/magritte-ui-typography": "4.2.4"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -37,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ca374027f73643dd942a6d0a2d23ec870924a20"
+  "gitHead": "15abe7ba2bc392ac808d2056c5571253286d099e"
 }

package/types.d.ts

@@ -6,28 +6,30 @@ export interface FloatingButtonProps extends PropsWithChildren {
     /** Кастомный компонент 'a', 'button', 'span' или функция */
     Element?: 'a' | 'button' | 'span';
     style?: FloatingButtonStyle;
+    /** Флаг видимости **/
+    visible?: boolean;
+    /** Заблокирована ли кнопка */
+    disabled?: boolean;
+    /** Отображение индикации загрузки */
+    loading?: boolean;
     icon?: IconWrapperComponentSize24;
+    /** Постфикс */
+    postfix?: ReactNode;
+    /** Показывать ли лейбл только при ховере */
+    labelOnHover?: boolean;
+    /** Скрыть ли лейбл */
+    hideLabel?: boolean;
+    /** Расположение (задает дефолтное положение и используется для анимации) */
+    position?: FloatingButtonPosition;
     /** Скругления */
     borderRadius?: boolean;
     /** Компонент Badge */
     badge?: ReactElement;
-    /** Постфикс */
-    postfix?: ReactNode;
-    /** Отображение индикации загрузки */
-    loading?: boolean;
-    /** Заблокирована ли кнопка */
-    disabled?: boolean;
-    /** Хост для отрисовки */
-    host?: RefObject<HTMLElement>;
     /** css-класс для позиционирования кнопки */
     className?: string;
     /** инлайн стили для позиционирования кнопки */
     inlineStyle?: CSSProperties;
-    visible?: boolean;
-    /** Показывать ли лейбл только при ховере */
-    labelOnHover?: boolean;
-    /** Скрыть ли лейбл */
-    hideLabel?: boolean;
-    /** Позиция */
-    position?: FloatingButtonPosition;
+    /** Хост для отрисовки */
+    host?: RefObject<HTMLElement>;
+    'data-qa'?: string;
 }