npm - @hh.ru/magritte-ui-floating-button - Versions diffs - 1.2.8 → 2.0.0 - Mend

@hh.ru/magritte-ui-floating-button 1.2.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/FloatingButton.js +13 -13
package/FloatingButton.js.map +1 -1
package/FloatingButtonStack.d.ts +3 -0
package/FloatingButtonStack.js +45 -0
package/FloatingButtonStack.js.map +1 -0
package/index.css +357 -189
package/index.d.ts +2 -1
package/index.js +3 -0
package/index.js.map +1 -1
package/index.mock.d.ts +1 -0
package/index.mock.js +4 -1
package/index.mock.js.map +1 -1
package/package.json +7 -6
package/types.d.ts +26 -2

package/FloatingButton.js CHANGED Viewed

@@ -10,18 +10,15 @@ 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-2-8","animation-timeout":"magritte-animation-timeout___NL8n0_1-2-8","animationTimeout":"magritte-animation-timeout___NL8n0_1-2-8","button":"magritte-button___nL-Hn_1-2-8","loading":"magritte-loading___C0oPZ_1-2-8","withIconAndLabel":"magritte-withIconAndLabel___Qa-lU_1-2-8","right":"magritte-right___3n0Rz_1-2-8","content":"magritte-content___JNpTZ_1-2-8","left":"magritte-left___GnzU7_1-2-8","center":"magritte-center___MdA40_1-2-8","postfix":"magritte-postfix___r0EZ6_1-2-8","icon":"magritte-icon___VpqJt_1-2-8","textless":"magritte-textless___IbYgp_1-2-8","label":"magritte-label___EPgvj_1-2-8","withPostfix":"magritte-withPostfix___PmQAz_1-2-8","hideLabel":"magritte-hideLabel___K79XM_1-2-8","withLabelOnHover":"magritte-withLabelOnHover___1oktd_1-2-8","border-radius":"magritte-border-radius___ObLLb_1-2-8","borderRadius":"magritte-border-radius___ObLLb_1-2-8","loader":"magritte-loader___EPezG_1-2-8","enter-animation":"magritte-enter-animation___2sPz3_1-2-8","enterAnimation":"magritte-enter-animation___2sPz3_1-2-8","enter-animation-active":"magritte-enter-animation-active___Lq9eq_1-2-8","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_1-2-8","exit-animation":"magritte-exit-animation___h2-7a_1-2-8","exitAnimation":"magritte-exit-animation___h2-7a_1-2-8","exit-animation-active":"magritte-exit-animation-active___w0F1a_1-2-8","exitAnimationActive":"magritte-exit-animation-active___w0F1a_1-2-8","button_style-neutral":"magritte-button_style-neutral___bPUwu_1-2-8","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_1-2-8","button_style-inverse":"magritte-button_style-inverse___Xgf26_1-2-8","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_1-2-8"};
+var styles = {"wrapper":"magritte-wrapper___7m9lC_2-0-0","animation-timeout":"magritte-animation-timeout___NL8n0_2-0-0","animationTimeout":"magritte-animation-timeout___NL8n0_2-0-0","button":"magritte-button___nL-Hn_2-0-0","loading":"magritte-loading___C0oPZ_2-0-0","withIconAndLabel":"magritte-withIconAndLabel___Qa-lU_2-0-0","right":"magritte-right___3n0Rz_2-0-0","content":"magritte-content___JNpTZ_2-0-0","left":"magritte-left___GnzU7_2-0-0","center":"magritte-center___MdA40_2-0-0","postfix":"magritte-postfix___r0EZ6_2-0-0","icon":"magritte-icon___VpqJt_2-0-0","textless":"magritte-textless___IbYgp_2-0-0","label":"magritte-label___EPgvj_2-0-0","withPostfix":"magritte-withPostfix___PmQAz_2-0-0","hideLabel":"magritte-hideLabel___K79XM_2-0-0","withLabelOnHover":"magritte-withLabelOnHover___1oktd_2-0-0","loader":"magritte-loader___EPezG_2-0-0","enter-animation":"magritte-enter-animation___2sPz3_2-0-0","enterAnimation":"magritte-enter-animation___2sPz3_2-0-0","enter-animation-active":"magritte-enter-animation-active___Lq9eq_2-0-0","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_2-0-0","exit-animation":"magritte-exit-animation___h2-7a_2-0-0","exitAnimation":"magritte-exit-animation___h2-7a_2-0-0","exit-animation-active":"magritte-exit-animation-active___w0F1a_2-0-0","exitAnimationActive":"magritte-exit-animation-active___w0F1a_2-0-0","button_style-neutral":"magritte-button_style-neutral___bPUwu_2-0-0","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_2-0-0","stackMode":"magritte-stackMode___RdOTJ_2-0-0","button_style-inverse":"magritte-button_style-inverse___Xgf26_2-0-0","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_2-0-0"};
 const ALLOWED_BADGE_SIZES = ['small'];
-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 FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabled, borderRadius = 'halfHeight', icon: IconComponent, postfix, loading, host, children, className, inlineStyle, visible, labelOnHover: _labelOnHover, hideLabel: _hideLabel, badge, position = 'right', 'data-qa': dataQa = 'floating-button', stackMode = false, ...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);
@@ -33,6 +30,12 @@ const FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabl
         }
         document.body.removeChild(animationTimeoutElement);
     }, []);
+    if (isServerEnv) {
+        return null;
+    }
+    const additionalAttributes = {
+        'data-qa': dataQa,
+    };
     if (Element === 'button') {
         additionalAttributes.type = 'button';
     }
@@ -41,23 +44,20 @@ const FloatingButtonComponent = ({ Element = 'button', style = 'neutral', disabl
         additionalAttributes['aria-disabled'] = disabled;
     }
     additionalAttributes.ref = ref;
-    if (isServerEnv) {
-        return null;
-    }
     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 || !children,
             [styles.withPostfix]: !!postfix,
             [styles.textless]: !postfix && (!children || !!hideLabel),
             [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 }) }))] }) }));
+            [styles.stackMode]: !!stackMode,
+        }), style: { borderRadius: borderRadius === 'halfHeight' ? '9999px' : `${borderRadius}px` }, 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 }));
+        button = (jsx(ComponentWithBadge, { allowedSizes: ALLOWED_BADGE_SIZES, badge: badge, offset: stackMode ? 12 : 4, noClip: true, children: button }));
     }
-    if (isServerEnv) {
-        return null;
+    if (stackMode) {
+        return button;
     }
     return createPortal(jsx(CSSTransition, { appear: true, in: !!visible && !isServerEnv, nodeRef: wrapperRef, classNames: {
             appear: styles.enterAnimation,

package/FloatingButton.js.map CHANGED Viewed

	@@ -1 +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'> = (\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":"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"}
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, FloatingButtonPropsWithStackMode } 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<FloatingButtonPropsWithStackMode, 'button'> = (\n {\n Element = 'button',\n style = 'neutral',\n disabled,\n borderRadius = 'halfHeight',\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 stackMode = false,\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 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 (isServerEnv) {\n return null;\n }\n\n const additionalAttributes: Record<string, unknown> = {\n 'data-qa': dataQa,\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 additionalAttributes.ref = ref;\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.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 [styles.stackMode]: !!stackMode,\n })}\n style={{ borderRadius: borderRadius === 'halfHeight' ? '9999px' : `${borderRadius}px` }}\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={stackMode ? 12 : 4} noClip>\n {button}\n </ComponentWithBadge>\n );\n }\n\n if (stackMode) {\n return button;\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":"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"}

package/FloatingButtonStack.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { FloatingButtonStackProps } from '@hh.ru/magritte-ui-floating-button/types';
+export declare const FloatingButtonStack: React.ForwardRefExoticComponent<FloatingButtonStackProps & React.RefAttributes<HTMLDivElement>>;

package/FloatingButtonStack.js ADDED Viewed

@@ -0,0 +1,45 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import classnames from 'classnames';
+import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { ArrowUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+var styles = {"stack":"magritte-stack___v7QhJ_2-0-0","right":"magritte-right___v4PFa_2-0-0","left":"magritte-left___JXzpq_2-0-0","center":"magritte-center___rV3kK_2-0-0","up-button":"magritte-up-button___M-Jgi_2-0-0","upButton":"magritte-up-button___M-Jgi_2-0-0","visible":"magritte-visible___lDPdq_2-0-0","has-visibled-children":"magritte-has-visibled-children___rA8xx_2-0-0","hasVisibledChildren":"magritte-has-visibled-children___rA8xx_2-0-0","floating-buttons":"magritte-floating-buttons___oi9Yx_2-0-0","floatingButtons":"magritte-floating-buttons___oi9Yx_2-0-0","floating-buttons_neutral":"magritte-floating-buttons_neutral___LCnTQ_2-0-0","floatingButtonsNeutral":"magritte-floating-buttons_neutral___LCnTQ_2-0-0","disabled":"magritte-disabled___XSSqS_2-0-0","floating-buttons_inverse":"magritte-floating-buttons_inverse___xhm17_2-0-0","floatingButtonsInverse":"magritte-floating-buttons_inverse___xhm17_2-0-0","floating-button-wrapper":"magritte-floating-button-wrapper___HlTzE_2-0-0","floatingButtonWrapper":"magritte-floating-button-wrapper___HlTzE_2-0-0"};
+const FloatingButtonStack = forwardRef(({ style = 'neutral', host, children, className, inlineStyle, upButtonVisible, disabled = false, position = 'right', onUpButtonClick, 'data-qa': dataQa = 'floating-button-stack', }, ref) => {
+    const isServerEnv = useServerEnv();
+    const { isMobile } = useBreakpoint();
+    if (isServerEnv) {
+        return null;
+    }
+    const preparedChildren = Children.toArray(children)
+        .filter((isValidElement))
+        .map((child) => cloneElement(child, {
+        style,
+        disabled,
+        stackMode: true,
+        children: null,
+        postfix: null,
+    }));
+    const hasVisibledChildren = preparedChildren.filter((floatingButton) => floatingButton.props.visible).length > 0;
+    return createPortal(jsx(Layer, { layer: "floating-button", children: jsxs("div", { ref: ref, className: classnames(styles.stack, styles[`${position}`], className), style: inlineStyle, "data-qa": dataQa, children: [jsx("div", { className: classnames(styles.upButton, {
+                        [styles.visible]: upButtonVisible,
+                        [styles.hasVisibledChildren]: hasVisibledChildren,
+                    }), children: jsx(ArrowUpOutlinedSize24, { padding: isMobile ? 16 : 24, onClick: onUpButtonClick, backgroundStyle: "secondary", borderRadius: 'halfHeight', disabled: disabled, "data-qa": `${dataQa}-up-button` }) }), jsx("div", { className: classnames(styles.floatingButtons, styles[`floating-buttons_${style}`], {
+                        [styles.disabled]: disabled,
+                        [styles.hasVisibledChildren]: hasVisibledChildren,
+                    }), children: preparedChildren.map((floatingButton) => {
+                        const visible = floatingButton.props.visible;
+                        return (jsx("div", { className: classnames(styles.floatingButtonWrapper, {
+                                [styles.visible]: visible,
+                            }), children: floatingButton }, floatingButton.key));
+                    }) })] }) }), host?.current || document.body);
+});
+FloatingButtonStack.displayName = 'FloatingButtonStack';
+export { FloatingButtonStack };
+//# sourceMappingURL=FloatingButtonStack.js.map

package/FloatingButtonStack.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FloatingButtonStack.js","sources":["../src/FloatingButtonStack.tsx"],"sourcesContent":["import React, { Children, cloneElement, isValidElement, forwardRef, type LegacyRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport type {\n FloatingButtonStackProps,\n FloatingButtonPropsWithStackMode,\n} from '@hh.ru/magritte-ui-floating-button/types';\nimport { ArrowUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './floating-button-stack.less';\n\nexport const FloatingButtonStack = forwardRef<HTMLDivElement, FloatingButtonStackProps>(\n (\n {\n style = 'neutral',\n host,\n children,\n className,\n inlineStyle,\n upButtonVisible,\n disabled = false,\n position = 'right',\n onUpButtonClick,\n 'data-qa': dataQa = 'floating-button-stack',\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const { isMobile } = useBreakpoint();\n\n if (isServerEnv) {\n return null;\n }\n\n const preparedChildren = Children.toArray(children)\n .filter(isValidElement<FloatingButtonPropsWithStackMode>)\n .map((child) =>\n cloneElement(child, {\n style,\n disabled,\n stackMode: true,\n children: null,\n postfix: null,\n })\n );\n const hasVisibledChildren =\n preparedChildren.filter((floatingButton) => floatingButton.props.visible).length > 0;\n\n return createPortal(\n <Layer layer=\"floating-button\">\n <div\n ref={ref as LegacyRef<HTMLDivElement>}\n className={classnames(styles.stack, styles[`${position}`], className)}\n style={inlineStyle}\n data-qa={dataQa}\n >\n <div\n className={classnames(styles.upButton, {\n [styles.visible]: upButtonVisible,\n [styles.hasVisibledChildren]: hasVisibledChildren,\n })}\n >\n <ArrowUpOutlinedSize24\n padding={isMobile ? 16 : 24}\n onClick={onUpButtonClick}\n backgroundStyle=\"secondary\"\n borderRadius={'halfHeight'}\n disabled={disabled}\n data-qa={`${dataQa}-up-button`}\n />\n </div>\n <div\n className={classnames(styles.floatingButtons, styles[`floating-buttons_${style}`], {\n [styles.disabled]: disabled,\n [styles.hasVisibledChildren]: hasVisibledChildren,\n })}\n >\n {preparedChildren.map((floatingButton) => {\n const visible = floatingButton.props.visible;\n return (\n <div\n key={floatingButton.key as React.Key}\n className={classnames(styles.floatingButtonWrapper, {\n [styles.visible]: visible,\n })}\n >\n {floatingButton}\n </div>\n );\n })}\n </div>\n </div>\n </Layer>,\n host?.current || document.body\n );\n }\n);\n\nFloatingButtonStack.displayName = 'FloatingButtonStack';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/index.css CHANGED Viewed

@@ -1,268 +1,265 @@
 :root{
-  --magritte-color-component-button-background-neutral-v24-0-1:#000000;
-  --magritte-color-component-button-background-inverse-v24-0-1:#ffffff;
-  --magritte-color-component-button-background-state-neutral-disabled-v24-0-1:#DCE3EB;
-  --magritte-color-component-button-background-state-neutral-hovered-v24-0-1:#343c43;
-  --magritte-color-component-button-background-state-neutral-pressed-v24-0-1:#000000;
-  --magritte-color-component-button-background-state-neutral-focused-v24-0-1:#000000;
-  --magritte-color-component-button-background-state-inverse-hovered-v24-0-1:#EEF1F7;
-  --magritte-color-component-button-background-state-inverse-pressed-v24-0-1:#ffffff;
-  --magritte-color-component-button-background-state-inverse-focused-v24-0-1:#ffffff;
-  --magritte-color-component-button-background-state-inverse-disabled-v24-0-1:#ffffff;
-  --magritte-color-component-button-text-neutral-v24-0-1:#ffffff;
-  --magritte-color-component-button-text-inverse-v24-0-1:#0d1115;
-  --magritte-color-component-button-icon-neutral-v24-0-1:#ffffff;
-  --magritte-color-component-button-icon-inverse-v24-0-1:#0d1115;
-  --magritte-color-component-button-loader-icon-neutral-v24-0-1:#ffffff;
-  --magritte-color-component-button-loader-icon-inverse-v24-0-1:#000000;
-  --magritte-color-component-button-text-state-neutral-disabled-v24-0-1:#8293a2;
-  --magritte-color-component-button-text-state-inverse-disabled-v24-0-1:#8da0b0;
-  --magritte-color-component-button-icon-state-neutral-disabled-v24-0-1:#8293a2;
-  --magritte-color-component-button-icon-state-inverse-disabled-v24-0-1:#8da0b0;
-  --magritte-color-component-button-stroke-state-neutral-focused-accessible-v24-0-1:#0070ff7a;
-  --magritte-color-component-button-stroke-state-inverse-focused-accessible-v24-0-1:#a4c9fe7a;
-  --magritte-color-component-button-postfix-text-neutral-v24-0-1:#AABBCA;
-  --magritte-color-component-button-postfix-text-inverse-v24-0-1:#0d1115;
-  --magritte-color-component-button-postfix-text-state-neutral-disabled-v24-0-1:#AABBCA;
-  --magritte-color-component-button-postfix-text-state-inverse-disabled-v24-0-1:#96aabb;
-  --magritte-shadow-level-2-color-v24-0-1:#7090b03d;
-  --magritte-shadow-level-2-x-v24-0-1:0px;
-  --magritte-shadow-level-2-y-v24-0-1:8px;
-  --magritte-shadow-level-2-blur-v24-0-1:16px;
-  --magritte-shadow-level-2-spread-v24-0-1:0px;
-  --magritte-shadow-level-1-color-v24-0-1:#7090b029;
-  --magritte-shadow-level-1-x-v24-0-1:0px;
-  --magritte-shadow-level-1-y-v24-0-1:4px;
-  --magritte-shadow-level-1-blur-v24-0-1:12px;
-  --magritte-shadow-level-1-spread-v24-0-1:0px;
+  --magritte-color-component-button-background-neutral-v24-0-2:#000000;
+  --magritte-color-component-button-background-inverse-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-state-neutral-disabled-v24-0-2:#DCE3EB;
+  --magritte-color-component-button-background-state-neutral-hovered-v24-0-2:#343c43;
+  --magritte-color-component-button-background-state-neutral-pressed-v24-0-2:#000000;
+  --magritte-color-component-button-background-state-neutral-focused-v24-0-2:#000000;
+  --magritte-color-component-button-background-state-inverse-hovered-v24-0-2:#EEF1F7;
+  --magritte-color-component-button-background-state-inverse-pressed-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-state-inverse-focused-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-state-inverse-disabled-v24-0-2:#ffffff;
+  --magritte-color-component-button-text-neutral-v24-0-2:#ffffff;
+  --magritte-color-component-button-text-inverse-v24-0-2:#0d1115;
+  --magritte-color-component-button-icon-neutral-v24-0-2:#ffffff;
+  --magritte-color-component-button-icon-inverse-v24-0-2:#0d1115;
+  --magritte-color-component-button-loader-icon-neutral-v24-0-2:#ffffff;
+  --magritte-color-component-button-loader-icon-inverse-v24-0-2:#000000;
+  --magritte-color-component-button-text-state-neutral-disabled-v24-0-2:#8293a2;
+  --magritte-color-component-button-text-state-inverse-disabled-v24-0-2:#8da0b0;
+  --magritte-color-component-button-icon-state-neutral-disabled-v24-0-2:#8293a2;
+  --magritte-color-component-button-icon-state-inverse-disabled-v24-0-2:#8da0b0;
+  --magritte-color-component-button-stroke-state-neutral-focused-accessible-v24-0-2:#0070ff7a;
+  --magritte-color-component-button-stroke-state-inverse-focused-accessible-v24-0-2:#a4c9fe7a;
+  --magritte-color-component-button-postfix-text-neutral-v24-0-2:#AABBCA;
+  --magritte-color-component-button-postfix-text-inverse-v24-0-2:#0d1115;
+  --magritte-color-component-button-postfix-text-state-neutral-disabled-v24-0-2:#AABBCA;
+  --magritte-color-component-button-postfix-text-state-inverse-disabled-v24-0-2:#96aabb;
+  --magritte-shadow-level-2-color-v24-0-2:#7090b03d;
+  --magritte-shadow-level-2-x-v24-0-2:0px;
+  --magritte-shadow-level-2-y-v24-0-2:8px;
+  --magritte-shadow-level-2-blur-v24-0-2:16px;
+  --magritte-shadow-level-2-spread-v24-0-2:0px;
+  --magritte-shadow-level-1-color-v24-0-2:#7090b029;
+  --magritte-shadow-level-1-x-v24-0-2:0px;
+  --magritte-shadow-level-1-y-v24-0-2:4px;
+  --magritte-shadow-level-1-blur-v24-0-2:12px;
+  --magritte-shadow-level-1-spread-v24-0-2:0px;
 }
 :root{
-  --magritte-semantic-animation-time-s-duration-v24-0-1:200ms;
-  --magritte-semantic-animation-ease-base-timing-function-v24-0-1:cubic-bezier(0.4, 0.24, 0, 1);
-  --magritte-semantic-animation-ease-in-out-100-timing-function-v24-0-1:cubic-bezier(0.25, 0.1, 0.25, 1);
-  --magritte-semantic-animation-ease-in-out-100-duration-v24-0-1:100ms;
-  --magritte-semantic-animation-ease-in-out-200-timing-function-v24-0-1:cubic-bezier(0.25, 0.1, 0.25, 1);
-  --magritte-semantic-animation-ease-in-out-200-duration-v24-0-1:200ms;
+  --magritte-semantic-animation-time-s-duration-v24-0-2:200ms;
+  --magritte-semantic-animation-ease-base-timing-function-v24-0-2:cubic-bezier(0.4, 0.24, 0, 1);
+  --magritte-semantic-animation-ease-in-out-100-timing-function-v24-0-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-100-duration-v24-0-2:100ms;
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v24-0-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v24-0-2:200ms;
 }
 .magritte-night-theme{
-  --magritte-color-component-button-background-neutral-v24-0-1:#ffffff;
-  --magritte-color-component-button-background-inverse-v24-0-1:#303030;
-  --magritte-color-component-button-background-state-neutral-disabled-v24-0-1:#303030;
-  --magritte-color-component-button-background-state-inverse-disabled-v24-0-1:#262626;
-  --magritte-color-component-button-background-state-neutral-hovered-v24-0-1:#F1F1F1;
-  --magritte-color-component-button-background-state-neutral-pressed-v24-0-1:#ffffff;
-  --magritte-color-component-button-background-state-neutral-focused-v24-0-1:#ffffff;
-  --magritte-color-component-button-background-state-inverse-hovered-v24-0-1:#3B3B3B;
-  --magritte-color-component-button-background-state-inverse-pressed-v24-0-1:#303030;
-  --magritte-color-component-button-background-state-inverse-focused-v24-0-1:#303030;
-  --magritte-color-component-button-text-neutral-v24-0-1:#000000;
-  --magritte-color-component-button-text-inverse-v24-0-1:#ffffff;
-  --magritte-color-component-button-text-state-neutral-disabled-v24-0-1:#848484;
-  --magritte-color-component-button-text-state-inverse-disabled-v24-0-1:#848484;
-  --magritte-color-component-button-icon-state-neutral-disabled-v24-0-1:#848484;
-  --magritte-color-component-button-icon-state-inverse-disabled-v24-0-1:#848484;
-  --magritte-color-component-button-icon-neutral-v24-0-1:#000000;
-  --magritte-color-component-button-icon-inverse-v24-0-1:#ffffff;
-  --magritte-color-component-button-loader-icon-neutral-v24-0-1:#000000;
-  --magritte-color-component-button-loader-icon-inverse-v24-0-1:#ffffff;
-  --magritte-color-component-button-postfix-text-neutral-v24-0-1:#ABABAB;
-  --magritte-color-component-button-postfix-text-inverse-v24-0-1:#ABABAB;
-  --magritte-color-component-button-postfix-text-state-neutral-disabled-v24-0-1:#535353;
-  --magritte-color-component-button-postfix-text-state-inverse-disabled-v24-0-1:#535353;
-  --magritte-shadow-level-2-color-v24-0-1:#0000003d;
-  --magritte-shadow-level-1-color-v24-0-1:#00000029;
-}
-.magritte-wrapper___7m9lC_1-2-8{
+  --magritte-color-component-button-background-neutral-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-inverse-v24-0-2:#303030;
+  --magritte-color-component-button-background-state-neutral-disabled-v24-0-2:#303030;
+  --magritte-color-component-button-background-state-inverse-disabled-v24-0-2:#262626;
+  --magritte-color-component-button-background-state-neutral-hovered-v24-0-2:#F1F1F1;
+  --magritte-color-component-button-background-state-neutral-pressed-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-state-neutral-focused-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-state-inverse-hovered-v24-0-2:#3B3B3B;
+  --magritte-color-component-button-background-state-inverse-pressed-v24-0-2:#303030;
+  --magritte-color-component-button-background-state-inverse-focused-v24-0-2:#303030;
+  --magritte-color-component-button-text-neutral-v24-0-2:#000000;
+  --magritte-color-component-button-text-inverse-v24-0-2:#ffffff;
+  --magritte-color-component-button-text-state-neutral-disabled-v24-0-2:#848484;
+  --magritte-color-component-button-text-state-inverse-disabled-v24-0-2:#848484;
+  --magritte-color-component-button-icon-state-neutral-disabled-v24-0-2:#848484;
+  --magritte-color-component-button-icon-state-inverse-disabled-v24-0-2:#848484;
+  --magritte-color-component-button-icon-neutral-v24-0-2:#000000;
+  --magritte-color-component-button-icon-inverse-v24-0-2:#ffffff;
+  --magritte-color-component-button-loader-icon-neutral-v24-0-2:#000000;
+  --magritte-color-component-button-loader-icon-inverse-v24-0-2:#ffffff;
+  --magritte-color-component-button-postfix-text-neutral-v24-0-2:#ABABAB;
+  --magritte-color-component-button-postfix-text-inverse-v24-0-2:#ABABAB;
+  --magritte-color-component-button-postfix-text-state-neutral-disabled-v24-0-2:#535353;
+  --magritte-color-component-button-postfix-text-state-inverse-disabled-v24-0-2:#535353;
+  --magritte-shadow-level-2-color-v24-0-2:#0000003d;
+  --magritte-shadow-level-1-color-v24-0-2:#00000029;
+}
+.magritte-wrapper___7m9lC_2-0-0{
   display:inline-block;
   position:fixed;
 }
-.magritte-wrapper___7m9lC_1-2-8,
-.magritte-animation-timeout___NL8n0_1-2-8{
+.magritte-wrapper___7m9lC_2-0-0,
+.magritte-animation-timeout___NL8n0_2-0-0{
   --animation-duration:0;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-wrapper___7m9lC_1-2-8,
-  .magritte-animation-timeout___NL8n0_1-2-8{
-    --animation-duration:var(--magritte-semantic-animation-time-s-duration-v24-0-1);
+  .magritte-wrapper___7m9lC_2-0-0,
+  .magritte-animation-timeout___NL8n0_2-0-0{
+    --animation-duration:var(--magritte-semantic-animation-time-s-duration-v24-0-2);
   }
 }
-.magritte-button___nL-Hn_1-2-8{
+.magritte-button___nL-Hn_2-0-0{
   display:inline-block;
   padding:12px;
   border-radius:24px;
   transition-property:transform;
-  transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-0-1);
-  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-0-1);
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v24-0-2);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v24-0-2);
 }
-.magritte-button___nL-Hn_1-2-8:disabled,
-.magritte-button___nL-Hn_1-2-8[aria-disabled='true'],
-.magritte-button___nL-Hn_1-2-8.magritte-loading___C0oPZ_1-2-8{
+.magritte-button___nL-Hn_2-0-0:disabled,
+.magritte-button___nL-Hn_2-0-0[aria-disabled='true'],
+.magritte-button___nL-Hn_2-0-0.magritte-loading___C0oPZ_2-0-0{
   pointer-events:none;
   cursor:not-allowed;
 }
-.magritte-button___nL-Hn_1-2-8:not(:disabled):active,
-.magritte-button___nL-Hn_1-2-8:not([aria-disabled='true']):active{
+.magritte-button___nL-Hn_2-0-0:not(:disabled):active,
+.magritte-button___nL-Hn_2-0-0:not([aria-disabled='true']):active{
   transform:scale(0.96);
-  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v24-0-1);
-  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v24-0-1);
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v24-0-2);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v24-0-2);
 }
-.magritte-withIconAndLabel___Qa-lU_1-2-8{
+.magritte-withIconAndLabel___Qa-lU_2-0-0{
   padding:12px 16px;
 }
-.magritte-right___3n0Rz_1-2-8{
+.magritte-right___3n0Rz_2-0-0{
   right:16px;
   bottom:20px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-right___3n0Rz_1-2-8{
+  body.magritte-old-layout .magritte-right___3n0Rz_2-0-0{
     right:36px;
     bottom:32px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-right___3n0Rz_1-2-8{
+  body:not(.magritte-old-layout) .magritte-right___3n0Rz_2-0-0{
     right:36px;
     bottom:32px;
   }
 }
-.magritte-right___3n0Rz_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-right___3n0Rz_2-0-0 .magritte-content___JNpTZ_2-0-0{
   justify-content:end;
 }
-.magritte-left___GnzU7_1-2-8{
+.magritte-left___GnzU7_2-0-0{
   left:16px;
   bottom:20px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-left___GnzU7_1-2-8{
+  body.magritte-old-layout .magritte-left___GnzU7_2-0-0{
     left:36px;
     bottom:32px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-left___GnzU7_1-2-8{
+  body:not(.magritte-old-layout) .magritte-left___GnzU7_2-0-0{
     left:36px;
     bottom:32px;
   }
 }
-.magritte-left___GnzU7_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-left___GnzU7_2-0-0 .magritte-content___JNpTZ_2-0-0{
   justify-content:start;
 }
-.magritte-center___MdA40_1-2-8{
+.magritte-center___MdA40_2-0-0{
   left:50%;
   bottom:20px;
   transform:translateX(-50%);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-center___MdA40_1-2-8{
+  body.magritte-old-layout .magritte-center___MdA40_2-0-0{
     bottom:32px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-center___MdA40_1-2-8{
+  body:not(.magritte-old-layout) .magritte-center___MdA40_2-0-0{
     bottom:32px;
   }
 }
-.magritte-center___MdA40_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-center___MdA40_2-0-0 .magritte-content___JNpTZ_2-0-0{
   justify-content:space-between;
 }
-.magritte-postfix___r0EZ6_1-2-8{
+.magritte-postfix___r0EZ6_2-0-0{
   padding:0 4px;
 }
-.magritte-icon___VpqJt_1-2-8{
+.magritte-icon___VpqJt_2-0-0{
   margin-right:4px;
 }
-.magritte-textless___IbYgp_1-2-8 .magritte-icon___VpqJt_1-2-8{
+.magritte-textless___IbYgp_2-0-0 .magritte-icon___VpqJt_2-0-0{
   margin:0;
 }
-.magritte-label___EPgvj_1-2-8{
+.magritte-label___EPgvj_2-0-0{
   text-align:left;
   overflow:hidden;
   transition-property:padding;
   transition-duration:var(--animation-duration);
-  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
   padding:0 4px;
 }
-.magritte-content___JNpTZ_1-2-8{
+.magritte-content___JNpTZ_2-0-0{
   display:inline-grid;
   justify-content:flex-end;
   grid-template-columns:max-content 1fr;
   transition-property:grid-template-columns;
   min-height:24px;
   transition-duration:var(--animation-duration);
-  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
 }
-.magritte-withPostfix___PmQAz_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-withPostfix___PmQAz_2-0-0 .magritte-content___JNpTZ_2-0-0{
   grid-template-columns:max-content 1fr max-content;
 }
-.magritte-hideLabel___K79XM_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-hideLabel___K79XM_2-0-0 .magritte-content___JNpTZ_2-0-0{
   grid-template-columns:max-content 0fr;
 }
-.magritte-hideLabel___K79XM_1-2-8 .magritte-label___EPgvj_1-2-8{
+.magritte-hideLabel___K79XM_2-0-0 .magritte-label___EPgvj_2-0-0{
   padding:0;
 }
-.magritte-hideLabel___K79XM_1-2-8.magritte-withPostfix___PmQAz_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-hideLabel___K79XM_2-0-0.magritte-withPostfix___PmQAz_2-0-0 .magritte-content___JNpTZ_2-0-0{
   grid-template-columns:max-content 0fr max-content;
 }
-.magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8).magritte-withIconAndLabel___Qa-lU_1-2-8{
+.magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0).magritte-withIconAndLabel___Qa-lU_2-0-0{
   padding:12px;
 }
-.magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):not(.magritte-withPostfix___PmQAz_1-2-8) .magritte-icon___VpqJt_1-2-8{
+.magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):not(.magritte-withPostfix___PmQAz_2-0-0) .magritte-icon___VpqJt_2-0-0{
   margin:0;
 }
-.magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8) .magritte-content___JNpTZ_1-2-8{
+.magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0) .magritte-content___JNpTZ_2-0-0{
   grid-template-columns:max-content 0fr;
 }
-.magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8).magritte-withPostfix___PmQAz_1-2-8 .magritte-content___JNpTZ_1-2-8{
+.magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0).magritte-withPostfix___PmQAz_2-0-0 .magritte-content___JNpTZ_2-0-0{
   grid-template-columns:max-content 0fr max-content;
 }
-.magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8) .magritte-label___EPgvj_1-2-8{
+.magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0) .magritte-label___EPgvj_2-0-0{
   padding:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']).magritte-withIconAndLabel___Qa-lU_1-2-8{
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']).magritte-withIconAndLabel___Qa-lU_2-0-0{
     padding:12px 16px;
   }
-  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']) .magritte-icon___VpqJt_1-2-8{
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-icon___VpqJt_2-0-0{
     margin-right:4px;
   }
-  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_1-2-8{
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_2-0-0{
     grid-template-columns:max-content 1fr;
   }
-  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_1-2-8 .magritte-content___JNpTZ_1-2-8{
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_2-0-0 .magritte-content___JNpTZ_2-0-0{
     grid-template-columns:max-content 1fr max-content;
   }
-  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_1-2-8{
+  body.magritte-old-layout .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_2-0-0{
     padding:0 4px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']).magritte-withIconAndLabel___Qa-lU_1-2-8{
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']).magritte-withIconAndLabel___Qa-lU_2-0-0{
     padding:12px 16px;
   }
-  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']) .magritte-icon___VpqJt_1-2-8{
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-icon___VpqJt_2-0-0{
     margin-right:4px;
   }
-  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_1-2-8{
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_2-0-0{
     grid-template-columns:max-content 1fr;
   }
-  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_1-2-8 .magritte-content___JNpTZ_1-2-8{
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_2-0-0 .magritte-content___JNpTZ_2-0-0{
     grid-template-columns:max-content 1fr max-content;
   }
-  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_1-2-8:not(.magritte-hideLabel___K79XM_1-2-8):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_1-2-8{
+  body:not(.magritte-old-layout) .magritte-withLabelOnHover___1oktd_2-0-0:not(.magritte-hideLabel___K79XM_2-0-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_2-0-0{
     padding:0 4px;
   }
 }
-.magritte-loading___C0oPZ_1-2-8 .magritte-postfix___r0EZ6_1-2-8,
-.magritte-loading___C0oPZ_1-2-8 .magritte-icon___VpqJt_1-2-8,
-.magritte-loading___C0oPZ_1-2-8 .magritte-label___EPgvj_1-2-8{
+.magritte-loading___C0oPZ_2-0-0 .magritte-postfix___r0EZ6_2-0-0,
+.magritte-loading___C0oPZ_2-0-0 .magritte-icon___VpqJt_2-0-0,
+.magritte-loading___C0oPZ_2-0-0 .magritte-label___EPgvj_2-0-0{
   visibility:hidden;
 }
-.magritte-border-radius___ObLLb_1-2-8{
-  border-radius:12px;
-}
-.magritte-loader___EPezG_1-2-8{
+.magritte-loader___EPezG_2-0-0{
   position:absolute;
   left:50%;
   top:50%;
@@ -270,97 +267,268 @@
   line-height:0;
   overflow:hidden;
 }
-.magritte-enter-animation___2sPz3_1-2-8{
+.magritte-enter-animation___2sPz3_2-0-0{
   opacity:0;
 }
-.magritte-enter-animation-active___Lq9eq_1-2-8{
+.magritte-enter-animation-active___Lq9eq_2-0-0{
   opacity:1;
   transition-property:opacity;
   transition-duration:var(--animation-duration);
-  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
 }
-.magritte-exit-animation___h2-7a_1-2-8{
+.magritte-exit-animation___h2-7a_2-0-0{
   opacity:1;
 }
-.magritte-exit-animation-active___w0F1a_1-2-8{
+.magritte-exit-animation-active___w0F1a_2-0-0{
   opacity:0;
   transition-property:opacity;
   transition-duration:var(--animation-duration);
-  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
+}
+.magritte-button_style-neutral___bPUwu_2-0-0{
+  background:var(--magritte-color-component-button-background-neutral-v24-0-2);
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-neutral-v24-0-2);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-neutral-v24-0-2);
+  box-shadow:var(--magritte-shadow-level-2-x-v24-0-2) var(--magritte-shadow-level-2-y-v24-0-2) var(--magritte-shadow-level-2-blur-v24-0-2) var(--magritte-shadow-level-2-spread-v24-0-2) var(--magritte-shadow-level-2-color-v24-0-2);
+  --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-neutral-v24-0-2);
 }
-.magritte-button_style-neutral___bPUwu_1-2-8{
-  background:var(--magritte-color-component-button-background-neutral-v24-0-1);
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-neutral-v24-0-1);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-neutral-v24-0-1);
-  box-shadow:var(--magritte-shadow-level-2-x-v24-0-1) var(--magritte-shadow-level-2-y-v24-0-1) var(--magritte-shadow-level-2-blur-v24-0-1) var(--magritte-shadow-level-2-spread-v24-0-1) var(--magritte-shadow-level-2-color-v24-0-1);
-  --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-neutral-v24-0-1);
+.magritte-button_style-neutral___bPUwu_2-0-0 .magritte-postfix___r0EZ6_2-0-0{
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-neutral-v24-0-2);
 }
-.magritte-button_style-neutral___bPUwu_1-2-8 .magritte-postfix___r0EZ6_1-2-8{
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-neutral-v24-0-1);
+.magritte-button_style-neutral___bPUwu_2-0-0.magritte-stackMode___RdOTJ_2-0-0{
+  box-shadow:none;
 }
-.magritte-button_style-neutral___bPUwu_1-2-8.focus-visible{
-  outline:4px solid var(--magritte-color-component-button-stroke-state-neutral-focused-accessible-v24-0-1);
-  background:var(--magritte-color-component-button-background-state-neutral-focused-v24-0-1);
+.magritte-button_style-neutral___bPUwu_2-0-0.focus-visible{
+  outline:4px solid var(--magritte-color-component-button-stroke-state-neutral-focused-accessible-v24-0-2);
+  background:var(--magritte-color-component-button-background-state-neutral-focused-v24-0-2);
 }
-.magritte-button_style-neutral___bPUwu_1-2-8:not(:disabled):active,
-.magritte-button_style-neutral___bPUwu_1-2-8:not([aria-disabled='true']):active{
-  background:var(--magritte-color-component-button-background-state-neutral-pressed-v24-0-1);
+.magritte-button_style-neutral___bPUwu_2-0-0:not(:disabled):active,
+.magritte-button_style-neutral___bPUwu_2-0-0:not([aria-disabled='true']):active{
+  background:var(--magritte-color-component-button-background-state-neutral-pressed-v24-0-2);
 }
-.magritte-button_style-neutral___bPUwu_1-2-8:disabled,
-.magritte-button_style-neutral___bPUwu_1-2-8[aria-disabled='true']{
-  background:var(--magritte-color-component-button-background-state-neutral-disabled-v24-0-1);
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-neutral-disabled-v24-0-1);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-neutral-disabled-v24-0-1);
+.magritte-button_style-neutral___bPUwu_2-0-0:disabled,
+.magritte-button_style-neutral___bPUwu_2-0-0[aria-disabled='true']{
+  background:var(--magritte-color-component-button-background-state-neutral-disabled-v24-0-2);
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-neutral-disabled-v24-0-2);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-neutral-disabled-v24-0-2);
 }
-.magritte-button_style-neutral___bPUwu_1-2-8:disabled .magritte-postfix___r0EZ6_1-2-8,
-.magritte-button_style-neutral___bPUwu_1-2-8[aria-disabled='true'] .magritte-postfix___r0EZ6_1-2-8{
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-neutral-disabled-v24-0-1);
+.magritte-button_style-neutral___bPUwu_2-0-0:disabled .magritte-postfix___r0EZ6_2-0-0,
+.magritte-button_style-neutral___bPUwu_2-0-0[aria-disabled='true'] .magritte-postfix___r0EZ6_2-0-0{
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-neutral-disabled-v24-0-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-button_style-neutral___bPUwu_1-2-8:hover:not(:active):not(:disabled):not([aria-disabled='true']){
-    background:var(--magritte-color-component-button-background-state-neutral-hovered-v24-0-1);
+  body.magritte-old-layout .magritte-button_style-neutral___bPUwu_2-0-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+    background:var(--magritte-ui-flb-background-color-hovered-override, var(--magritte-color-component-button-background-state-neutral-hovered-v24-0-2));
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_1-2-8:hover:not(:active):not(:disabled):not([aria-disabled='true']){
-    background:var(--magritte-color-component-button-background-state-neutral-hovered-v24-0-1);
+  body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_2-0-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+    background:var(--magritte-ui-flb-background-color-hovered-override, var(--magritte-color-component-button-background-state-neutral-hovered-v24-0-2));
   }
 }
-.magritte-button_style-inverse___Xgf26_1-2-8{
-  background:var(--magritte-color-component-button-background-inverse-v24-0-1);
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-inverse-v24-0-1);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-inverse-v24-0-1);
-  box-shadow:var(--magritte-shadow-level-1-x-v24-0-1) var(--magritte-shadow-level-1-y-v24-0-1) var(--magritte-shadow-level-1-blur-v24-0-1) var(--magritte-shadow-level-1-spread-v24-0-1) var(--magritte-shadow-level-1-color-v24-0-1);
-  --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-inverse-v24-0-1);
+.magritte-button_style-inverse___Xgf26_2-0-0{
+  background:var(--magritte-color-component-button-background-inverse-v24-0-2);
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-inverse-v24-0-2);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-inverse-v24-0-2);
+  box-shadow:var(--magritte-shadow-level-1-x-v24-0-2) var(--magritte-shadow-level-1-y-v24-0-2) var(--magritte-shadow-level-1-blur-v24-0-2) var(--magritte-shadow-level-1-spread-v24-0-2) var(--magritte-shadow-level-1-color-v24-0-2);
+  --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-inverse-v24-0-2);
+}
+.magritte-button_style-inverse___Xgf26_2-0-0 .magritte-postfix___r0EZ6_2-0-0{
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-inverse-v24-0-2);
 }
-.magritte-button_style-inverse___Xgf26_1-2-8 .magritte-postfix___r0EZ6_1-2-8{
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-inverse-v24-0-1);
+.magritte-button_style-inverse___Xgf26_2-0-0.magritte-stackMode___RdOTJ_2-0-0{
+  box-shadow:none;
 }
-.magritte-button_style-inverse___Xgf26_1-2-8.focus-visible{
-  outline:4px solid var(--magritte-color-component-button-stroke-state-inverse-focused-accessible-v24-0-1);
-  background:var(--magritte-color-component-button-background-state-inverse-focused-v24-0-1);
+.magritte-button_style-inverse___Xgf26_2-0-0.focus-visible{
+  outline:4px solid var(--magritte-color-component-button-stroke-state-inverse-focused-accessible-v24-0-2);
+  background:var(--magritte-color-component-button-background-state-inverse-focused-v24-0-2);
 }
-.magritte-button_style-inverse___Xgf26_1-2-8:not(:disabled):active,
-.magritte-button_style-inverse___Xgf26_1-2-8:not([aria-disabled='true']):active{
-  background:var(--magritte-color-component-button-background-state-inverse-pressed-v24-0-1);
+.magritte-button_style-inverse___Xgf26_2-0-0:not(:disabled):active,
+.magritte-button_style-inverse___Xgf26_2-0-0:not([aria-disabled='true']):active{
+  background:var(--magritte-color-component-button-background-state-inverse-pressed-v24-0-2);
 }
-.magritte-button_style-inverse___Xgf26_1-2-8:disabled,
-.magritte-button_style-inverse___Xgf26_1-2-8[aria-disabled='true']{
-  background:var(--magritte-color-component-button-background-state-inverse-disabled-v24-0-1);
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-inverse-disabled-v24-0-1);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-inverse-disabled-v24-0-1);
+.magritte-button_style-inverse___Xgf26_2-0-0:disabled,
+.magritte-button_style-inverse___Xgf26_2-0-0[aria-disabled='true']{
+  background:var(--magritte-color-component-button-background-state-inverse-disabled-v24-0-2);
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-inverse-disabled-v24-0-2);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-inverse-disabled-v24-0-2);
 }
-.magritte-button_style-inverse___Xgf26_1-2-8:disabled .magritte-postfix___r0EZ6_1-2-8,
-.magritte-button_style-inverse___Xgf26_1-2-8[aria-disabled='true'] .magritte-postfix___r0EZ6_1-2-8{
-  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-inverse-disabled-v24-0-1);
+.magritte-button_style-inverse___Xgf26_2-0-0:disabled .magritte-postfix___r0EZ6_2-0-0,
+.magritte-button_style-inverse___Xgf26_2-0-0[aria-disabled='true'] .magritte-postfix___r0EZ6_2-0-0{
+  --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-inverse-disabled-v24-0-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-button_style-inverse___Xgf26_1-2-8:hover:not(:active):not(:disabled):not([aria-disabled='true']){
-    background:var(--magritte-color-component-button-background-state-inverse-hovered-v24-0-1);
+  body.magritte-old-layout .magritte-button_style-inverse___Xgf26_2-0-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+    background:var(--magritte-ui-flb-background-color-hovered-override, var(--magritte-color-component-button-background-state-inverse-hovered-v24-0-2));
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_1-2-8:hover:not(:active):not(:disabled):not([aria-disabled='true']){
-    background:var(--magritte-color-component-button-background-state-inverse-hovered-v24-0-1);
+  body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_2-0-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
+    background:var(--magritte-ui-flb-background-color-hovered-override, var(--magritte-color-component-button-background-state-inverse-hovered-v24-0-2));
+  }
+}
+:root{
+  --magritte-color-component-button-background-neutral-v24-0-2:#000000;
+  --magritte-color-component-button-background-inverse-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-state-neutral-disabled-v24-0-2:#DCE3EB;
+  --magritte-color-component-button-background-state-inverse-disabled-v24-0-2:#ffffff;
+  --magritte-shadow-level-2-color-v24-0-2:#7090b03d;
+  --magritte-shadow-level-2-x-v24-0-2:0px;
+  --magritte-shadow-level-2-y-v24-0-2:8px;
+  --magritte-shadow-level-2-blur-v24-0-2:16px;
+  --magritte-shadow-level-2-spread-v24-0-2:0px;
+  --magritte-shadow-level-1-color-v24-0-2:#7090b029;
+  --magritte-shadow-level-1-x-v24-0-2:0px;
+  --magritte-shadow-level-1-y-v24-0-2:4px;
+  --magritte-shadow-level-1-blur-v24-0-2:12px;
+  --magritte-shadow-level-1-spread-v24-0-2:0px;
+}
+:root{
+  --magritte-semantic-animation-time-s-duration-v24-0-2:200ms;
+  --magritte-semantic-animation-ease-base-timing-function-v24-0-2:cubic-bezier(0.4, 0.24, 0, 1);
+}
+.magritte-night-theme{
+  --magritte-color-component-button-background-neutral-v24-0-2:#ffffff;
+  --magritte-color-component-button-background-inverse-v24-0-2:#303030;
+  --magritte-color-component-button-background-state-neutral-disabled-v24-0-2:#303030;
+  --magritte-color-component-button-background-state-inverse-disabled-v24-0-2:#262626;
+  --magritte-shadow-level-2-color-v24-0-2:#0000003d;
+  --magritte-shadow-level-1-color-v24-0-2:#00000029;
+}
+.magritte-stack___v7QhJ_2-0-0{
+  display:inline-flex;
+  position:fixed;
+  flex-direction:column;
+}
+.magritte-right___v4PFa_2-0-0{
+  right:16px;
+  bottom:20px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-right___v4PFa_2-0-0{
+    right:36px;
+    bottom:32px;
   }
 }
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-right___v4PFa_2-0-0{
+    right:36px;
+    bottom:32px;
+  }
+}
+.magritte-left___JXzpq_2-0-0{
+  left:16px;
+  bottom:20px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-left___JXzpq_2-0-0{
+    left:36px;
+    bottom:32px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-left___JXzpq_2-0-0{
+    left:36px;
+    bottom:32px;
+  }
+}
+.magritte-center___rV3kK_2-0-0{
+  left:50%;
+  bottom:20px;
+  transform:translateX(-50%);
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-center___rV3kK_2-0-0{
+    bottom:32px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-center___rV3kK_2-0-0{
+    bottom:32px;
+  }
+}
+.magritte-up-button___M-Jgi_2-0-0{
+  opacity:0;
+  height:0;
+  transition:height var(--magritte-semantic-animation-time-s-duration-v24-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2), opacity var(--magritte-semantic-animation-time-s-duration-v24-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
+}
+.magritte-up-button___M-Jgi_2-0-0.magritte-visible___lDPdq_2-0-0{
+  height:56px;
+  opacity:1;
+}
+.magritte-up-button___M-Jgi_2-0-0.magritte-visible___lDPdq_2-0-0.magritte-has-visibled-children___rA8xx_2-0-0{
+  margin-bottom:12px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-up-button___M-Jgi_2-0-0.magritte-visible___lDPdq_2-0-0{
+    height:72px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-up-button___M-Jgi_2-0-0.magritte-visible___lDPdq_2-0-0{
+    height:72px;
+  }
+}
+.magritte-floating-buttons___oi9Yx_2-0-0{
+  display:flex;
+  flex-direction:column;
+  padding:0 4px;
+  opacity:0;
+  border-radius:40px;
+  overflow:hidden;
+  transition:opacity var(--magritte-semantic-animation-time-s-duration-v24-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2), padding var(--magritte-semantic-animation-time-s-duration-v24-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
+  z-index:1;
+}
+.magritte-floating-buttons___oi9Yx_2-0-0.magritte-has-visibled-children___rA8xx_2-0-0{
+  padding:4px;
+  opacity:1;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-floating-buttons___oi9Yx_2-0-0{
+    padding:0 12px;
+  }
+  body.magritte-old-layout .magritte-floating-buttons___oi9Yx_2-0-0.magritte-has-visibled-children___rA8xx_2-0-0{
+    padding:12px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-floating-buttons___oi9Yx_2-0-0{
+    padding:0 12px;
+  }
+  body:not(.magritte-old-layout) .magritte-floating-buttons___oi9Yx_2-0-0.magritte-has-visibled-children___rA8xx_2-0-0{
+    padding:12px;
+  }
+}
+.magritte-floating-buttons_neutral___LCnTQ_2-0-0{
+  background-color:var(--magritte-color-component-button-background-neutral-v24-0-2);
+  box-shadow:var(--magritte-shadow-level-2-x-v24-0-2) var(--magritte-shadow-level-2-y-v24-0-2) var(--magritte-shadow-level-2-blur-v24-0-2) var(--magritte-shadow-level-2-spread-v24-0-2) var(--magritte-shadow-level-2-color-v24-0-2);
+  --magritte-ui-flb-background-color-hovered-override:var(--magritte-color-component-button-background-neutral-v24-0-2);
+  --magritte-ui-badge-border-color-override:var(--magritte-color-component-button-background-neutral-v24-0-2);
+}
+.magritte-floating-buttons_neutral___LCnTQ_2-0-0.magritte-disabled___XSSqS_2-0-0{
+  background-color:var(--magritte-color-component-button-background-state-neutral-disabled-v24-0-2);
+}
+.magritte-floating-buttons_inverse___xhm17_2-0-0{
+  background-color:var(--magritte-color-component-button-background-inverse-v24-0-2);
+  box-shadow:var(--magritte-shadow-level-1-x-v24-0-2) var(--magritte-shadow-level-1-y-v24-0-2) var(--magritte-shadow-level-1-blur-v24-0-2) var(--magritte-shadow-level-1-spread-v24-0-2) var(--magritte-shadow-level-1-color-v24-0-2);
+  --magritte-ui-flb-background-color-hovered-override:var(--magritte-color-component-button-background-inverse-v24-0-2);
+  --magritte-ui-badge-border-color-override:var(--magritte-color-component-button-background-inverse-v24-0-2);
+}
+.magritte-floating-buttons_inverse___xhm17_2-0-0.magritte-disabled___XSSqS_2-0-0{
+  background-color:var(--magritte-color-component-button-background-state-inverse-disabled-v24-0-2);
+}
+.magritte-floating-button-wrapper___HlTzE_2-0-0{
+  overflow:hidden;
+  height:0;
+  opacity:0;
+  padding:4px;
+  margin:-4px;
+  transition:height var(--magritte-semantic-animation-time-s-duration-v24-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2), opacity var(--magritte-semantic-animation-time-s-duration-v24-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v24-0-2);
+}
+.magritte-floating-button-wrapper___HlTzE_2-0-0.magritte-visible___lDPdq_2-0-0{
+  height:48px;
+  opacity:1;
+}

package/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from '@hh.ru/magritte-ui-floating-button/FloatingButton';
-export * from '@hh.ru/magritte-ui-floating-button/types';
+export * from '@hh.ru/magritte-ui-floating-button/FloatingButtonStack';
+export type { FloatingButtonStyle, FloatingButtonPosition, FloatingButtonRadius, FloatingButtonProps, FloatingButtonStackProps, } from '@hh.ru/magritte-ui-floating-button/types';

package/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import './index.css';
 export { FloatingButton } from './FloatingButton.js';
+export { FloatingButtonStack } from './FloatingButtonStack.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-dom';
@@ -10,4 +11,6 @@ import '@hh.ru/magritte-ui-badge';
 import '@hh.ru/magritte-ui-layer';
 import '@hh.ru/magritte-ui-loader';
 import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-icon/variants/icon';
 //# sourceMappingURL=index.js.map

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/index.mock.d.ts CHANGED Viewed

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

package/index.mock.js CHANGED Viewed

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

package/index.mock.js.map CHANGED Viewed

	@@ -1 +1 @@
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;;;;"}
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\nexport const FloatingButtonStack = mockComponent('FloatingButtonStack', undefined, {\n withChildren: true,\n});\n"],"names":[],"mappings":";;MAIa,cAAc,GAAG,aAAa,CAAC,gBAAgB,EAAE,SAAS,EAAE;AACrE,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EAAE;MAEU,mBAAmB,GAAG,aAAa,CAAC,qBAAqB,EAAE,SAAS,EAAE;AAC/E,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-floating-button",
-  "version": "1.2.8",
+  "version": "2.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -20,14 +20,15 @@
   },
   "dependencies": {
     "@hh.ru/magritte-common-is-server-env": "1.0.7",
-    "@hh.ru/magritte-design-tokens": "24.0.1",
+    "@hh.ru/magritte-design-tokens": "24.0.2",
     "@hh.ru/magritte-types": "5.0.5",
-    "@hh.ru/magritte-ui-badge": "3.2.5",
+    "@hh.ru/magritte-ui-badge": "3.3.1",
     "@hh.ru/magritte-ui-breakpoint": "6.0.1",
+    "@hh.ru/magritte-ui-icon": "13.4.0",
     "@hh.ru/magritte-ui-layer": "3.0.5",
-    "@hh.ru/magritte-ui-loader": "2.0.17",
+    "@hh.ru/magritte-ui-loader": "2.0.19",
     "@hh.ru/magritte-ui-mock-component": "1.1.5",
-    "@hh.ru/magritte-ui-typography": "4.3.0"
+    "@hh.ru/magritte-ui-typography": "4.3.1"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -38,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8a0169936e3009404c090e950b82e6b81efc6bc9"
+  "gitHead": "0bee0320d8b83b5915471b94b688af7954d5f7bd"
 }

package/types.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { CSSProperties, PropsWithChildren, ReactElement, ReactNode, type RefObject } from 'react';
-import { IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';
+import { IconWrapperComponentSize24, IconProps } from '@hh.ru/magritte-ui-icon';
 export type FloatingButtonStyle = 'neutral' | 'inverse';
 export type FloatingButtonPosition = 'left' | 'right' | 'center';
+export type FloatingButtonRadius = 12 | 'halfHeight';
 export interface FloatingButtonProps extends PropsWithChildren {
     /** Кастомный компонент 'a', 'button', 'span' или функция */
     Element?: 'a' | 'button' | 'span';
@@ -22,7 +23,7 @@ export interface FloatingButtonProps extends PropsWithChildren {
     /** Расположение (задает дефолтное положение и используется для анимации) */
     position?: FloatingButtonPosition;
     /** Скругления */
-    borderRadius?: boolean;
+    borderRadius?: FloatingButtonRadius;
     /** Компонент Badge */
     badge?: ReactElement;
     /** css-класс для позиционирования кнопки */
@@ -33,3 +34,26 @@ export interface FloatingButtonProps extends PropsWithChildren {
     host?: RefObject<HTMLElement>;
     'data-qa'?: string;
 }
+export interface FloatingButtonPropsWithStackMode extends FloatingButtonProps {
+    /** Флаг, включающий stack режим для кнопки (отключает тени, меняется позиция badge) */
+    stackMode?: boolean;
+}
+export interface FloatingButtonStackProps extends PropsWithChildren {
+    /** Стилизация компонента */
+    style?: FloatingButtonStyle;
+    /** Расположение компонента */
+    position?: FloatingButtonPosition;
+    /** Флаг видимости кнопки Наверх */
+    upButtonVisible?: boolean;
+    /** Css-класс для позиционирования кнопки */
+    className?: string;
+    /** Инлайн стили для позиционирования кнопки */
+    inlineStyle?: CSSProperties;
+    /** Хост для отрисовки */
+    host?: RefObject<HTMLElement>;
+    'data-qa'?: string;
+    /** Заблокирована ли кнопка */
+    disabled?: boolean;
+    /** Обработчик события клика кнопки Наверх */
+    onUpButtonClick?: IconProps['onClick'];
+}