@alfalab/core-components 29.3.0 → 29.4.0

package/plate/modern/Component.js

@@ -3,13 +3,16 @@ import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { Button } from '../../button/modern';
+import { ButtonList } from './components/button-list/component.js';
 
-var styles = {"component":"plate__component_8e6iw","foldable":"plate__foldable_8e6iw","focused":"plate__focused_8e6iw","inner":"plate__inner_8e6iw","common":"plate__common_8e6iw","negative":"plate__negative_8e6iw","positive":"plate__positive_8e6iw","attention":"plate__attention_8e6iw","isHidden":"plate__isHidden_8e6iw","leftAddons":"plate__leftAddons_8e6iw","title":"plate__title_8e6iw","content":"plate__content_8e6iw","isFolded":"plate__isFolded_8e6iw","contentContainer":"plate__contentContainer_8e6iw","withoutTitle":"plate__withoutTitle_8e6iw","contentInner":"plate__contentInner_8e6iw","closer":"plate__closer_8e6iw","folder":"plate__folder_8e6iw","buttons":"plate__buttons_8e6iw","button":"plate__button_8e6iw"};
+var styles = {"component":"plate__component_gekdg","foldable":"plate__foldable_gekdg","focused":"plate__focused_gekdg","inner":"plate__inner_gekdg","rounded":"plate__rounded_gekdg","noBorder":"plate__noBorder_gekdg","shadow":"plate__shadow_gekdg","common":"plate__common_gekdg","negative":"plate__negative_gekdg","positive":"plate__positive_gekdg","attention":"plate__attention_gekdg","custom":"plate__custom_gekdg","rect":"plate__rect_gekdg","isHidden":"plate__isHidden_gekdg","leftAddons":"plate__leftAddons_gekdg","rightAddons":"plate__rightAddons_gekdg","subAddons":"plate__subAddons_gekdg","bold":"plate__bold_gekdg","light":"plate__light_gekdg","content":"plate__content_gekdg","isFolded":"plate__isFolded_gekdg","contentContainer":"plate__contentContainer_gekdg","withoutTitle":"plate__withoutTitle_gekdg","limitWidth":"plate__limitWidth_gekdg","description":"plate__description_gekdg","footer":"plate__footer_gekdg","closer":"plate__closer_gekdg","folder":"plate__folder_gekdg","button":"plate__button_gekdg"};
 require('./index.css');
 
-const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, leftAddons, children, buttons, title, view = 'common', className, buttonsClassName, contentClassName, dataTestId, onClick, onClose, onToggle, }, ref) => {
+/* eslint-disable complexity */
+const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, rounded = true, limitContentWidth = true, leftAddons, subAddons, children, buttons, title, titleView = 'bold', view = 'common', border = view !== 'custom', shadow = view === 'custom', className, buttonsClassName, contentClassName, subAddonsClassName, dataTestId, onClick, onClose, onToggle, }, ref) => {
     const plateRef = useRef(null);
     const contentRef = useRef(null);
+    const subAddonsRef = useRef(null);
     const [focused] = useFocus(plateRef, 'keyboard');
     const [isHidden, setIsHidden] = useState(false);
     const [foldedState, setFoldedState] = useState(defaultFolded);
@@ -18,14 +21,17 @@ const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: f
     const folded = uncontrolled ? foldedState : foldedProp;
     const hasButtons = !!buttons && typeof buttons !== 'boolean';
     const hasContent = children || hasButtons;
-    const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    const hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+    const hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
     const handleClick = useCallback((event) => {
         const target = event.target;
         const eventInsideComponent = plateRef.current && plateRef.current.contains(target);
         const eventInsideContent = contentRef.current && contentRef.current.contains(target);
+        const eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
         const clickSimilarKeys = ['Enter', ' '].includes(event.key);
         const shouldChangeIsFolded = eventInsideComponent &&
             !eventInsideContent &&
+            !eventInsideSubAddons &&
             (event.type === 'click' || clickSimilarKeys);
         if (foldable && shouldChangeIsFolded) {
             if (uncontrolled) {
@@ -45,47 +51,44 @@ const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: f
             onClose(event);
         }
     }, [onClose]);
-    const renderButtons = () => {
-        if (buttonsIsArray) {
-            return (React.createElement("div", { className: cn(styles.buttons, buttonsClassName) }, buttons.map((button, index) => button
-                ? React.cloneElement(button, {
-                    // eslint-disable-next-line react/no-array-index-key
-                    key: index,
-                    size: 'xs',
-                    view: index === 0 ? 'outlined' : 'link',
-                    className: cn(button.props.className, styles.button),
-                })
-                : null)));
-        }
-        return React.createElement("div", { className: cn(styles.buttons, buttonsClassName) }, buttons);
-    };
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("div", { className: cn(styles.component, styles[view], {
-            [styles.foldable]: foldable,
-            [styles.focused]: focused,
-            [styles.isHidden]: hasCloser && isHidden,
-            [styles.isFolded]: foldable && folded,
-        }, className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
-        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React.createElement("div", { className: styles.inner },
-            leftAddons && React.createElement("div", { className: styles.leftAddons }, leftAddons),
-            React.createElement("div", { className: cn(styles.contentContainer, contentClassName, {
-                    [styles.withoutTitle]: !title,
-                }) },
-                title && React.createElement("div", { className: styles.title }, title),
-                hasContent && (React.createElement("div", { ref: contentRef, className: cn(styles.content, {
-                        [styles.isFolded]: foldable && folded,
+    return (React.createElement("div", { className: cn({
+            [styles.shadow]: shadow,
+            [styles.rounded]: rounded,
+        }) },
+        React.createElement("div", { className: cn(styles.component, styles[view], {
+                [styles.foldable]: foldable,
+                [styles.focused]: focused,
+                [styles.isHidden]: hasCloser && isHidden,
+                [styles.isFolded]: foldable && folded,
+                [styles.rounded]: rounded,
+                [styles.rect]: !rounded,
+                [styles.noBorder]: !border,
+            }, className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
+            React.createElement("div", { className: styles.inner },
+                leftAddons && React.createElement("div", { className: styles.leftAddons }, leftAddons),
+                React.createElement("div", { className: cn(styles.contentContainer, contentClassName, {
+                        [styles.withoutTitle]: !title && hasAnyAddons,
+                        [styles.limitWidth]: limitContentWidth,
                     }) },
-                    React.createElement("div", { className: styles.contentInner },
-                        children,
-                        hasButtons ? renderButtons() : null)))),
-            foldable && (React.createElement("div", { className: cn(styles.folder, {
-                    [styles.isFolded]: folded,
-                }) })),
-            hasCloser && !foldable && (React.createElement(Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))));
+                    title && React.createElement("div", { className: styles[titleView] }, title),
+                    hasContent && (React.createElement("div", { ref: contentRef, className: cn(styles.content, {
+                            [styles.isFolded]: foldable && folded,
+                        }) },
+                        children && (React.createElement("div", { className: styles.description }, children)),
+                        hasButtons && (React.createElement("div", { className: styles.footer },
+                            React.createElement(ButtonList, { buttons: buttons, containerClassName: buttonsClassName, buttonClassName: cn(styles.button, buttonsClassName) })))))),
+                hasSubAddons && (React.createElement("div", { ref: subAddonsRef, className: styles.subAddons },
+                    React.createElement(ButtonList, { buttons: subAddons, containerClassName: subAddonsClassName, buttonClassName: styles.button }))),
+                foldable && (React.createElement("div", { className: styles.rightAddons },
+                    React.createElement("div", { className: cn(styles.folder, {
+                            [styles.isFolded]: folded,
+                        }) }))),
+                hasCloser && !foldable && (React.createElement("div", { className: styles.rightAddons },
+                    React.createElement(Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
 });
+/* eslint-enable complexity */
 /**
  * Для отображения в сторибуке
  */

package/plate/modern/components/button-list/component.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ButtonListProps = {
+    /**
+     * Кнопки для рендера
+     */
+    buttons: ReactNode;
+    /**
+     * Дополнительный класс для контейнера
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительный класс для кнопок
+     */
+    buttonClassName?: string;
+};
+declare const ButtonList: FC<ButtonListProps>;
+export { ButtonListProps, ButtonList };

package/plate/modern/components/button-list/component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import cn from 'classnames';
+
+const ButtonList = ({ buttons, buttonClassName, containerClassName, }) => {
+    const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+    if (buttonsIsArray) {
+        return (React.createElement("div", { className: containerClassName }, buttons.map((button, index) => button
+            ? React.cloneElement(button, {
+                // eslint-disable-next-line react/no-array-index-key
+                key: index,
+                size: 'xxs',
+                view: index === 0 ? 'secondary' : 'link',
+                className: cn(button.props.className, buttonClassName),
+            })
+            : null)));
+    }
+    return React.createElement("div", { className: containerClassName }, buttons);
+};
+
+export { ButtonList };

package/plate/modern/index.css

@@ -14,6 +14,7 @@
     --color-light-text-primary: #0b1f35;
 }
 :root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
     /* Hard */
 
@@ -26,9 +27,7 @@
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-2xs-neg: -4px;
+    --gap-l: 20px;
 }
 :root {
     --border-radius-m: 8px;
@@ -39,73 +38,137 @@
 }
 :root {
     /* border */
-    --plate-border: 1px solid;
+    --plate-border-left: 2px;
+    --plate-border: 0 0 0 1px;
     --plate-border-radius: var(--border-radius-m);
 
+    /* width limit */
+
+    --plate-width-limit: 560px;
+
+    /* custom view */
+    --plate-background: transparent;
+    --plate-border-color: var(--color-static-status-grey);
+
     /* icons */
     --plate-closer-icon: url('https://alfabank.servicecdn.ru/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.servicecdn.ru/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_8e6iw {
+.plate__component_gekdg {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
-    border-radius: var(--plate-border-radius);
-    border: var(--plate-border);
     color: var(--color-light-text-primary);
     width: 100%;
     min-height: 56px;
-    padding: var(--gap-m);
-    outline: none;
-}
-.plate__foldable_8e6iw {
+    padding: var(--gap-s);
+    outline: none
+}
+.plate__component_gekdg:before {
+        content: '';
+        width: var(--plate-border-left);
+        position: absolute;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+.plate__foldable_gekdg {
     cursor: pointer;
 }
-.plate__component_8e6iw * {
+.plate__component_gekdg * {
     box-sizing: border-box;
 }
-.plate__focused_8e6iw {
+.plate__focused_gekdg {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_8e6iw {
+.plate__inner_gekdg {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_8e6iw {
+.plate__rounded_gekdg:before, .plate__noBorder_gekdg:before {
+        display: none;
+    }
+.plate__rounded_gekdg {
+    border-radius: var(--plate-border-radius);
+}
+.plate__shadow_gekdg {
+    box-shadow: var(--shadow-s);
+}
+.plate__common_gekdg {
     background-color: var(--color-light-bg-secondary);
-    border-color: var(--color-static-status-grey);
+    box-shadow: var(--plate-border) var(--color-static-status-grey)
 }
-.plate__negative_8e6iw {
+.plate__common_gekdg:before {
+        background-color: var(--color-static-status-grey);
+    }
+.plate__negative_gekdg {
     background-color: var(--color-light-bg-negative-muted);
-    border-color: var(--color-static-status-red);
+    box-shadow: var(--plate-border) var(--color-static-status-red)
 }
-.plate__positive_8e6iw {
+.plate__negative_gekdg:before {
+        background-color: var(--color-static-status-red);
+    }
+.plate__positive_gekdg {
     background-color: var(--color-light-bg-positive-muted);
-    border-color: var(--color-static-status-green);
+    box-shadow: var(--plate-border) var(--color-static-status-green)
 }
-.plate__attention_8e6iw {
+.plate__positive_gekdg:before {
+        background-color: var(--color-static-status-green);
+    }
+.plate__attention_gekdg {
     background-color: var(--color-light-bg-attention-muted);
-    border-color: var(--color-static-status-orange);
+    box-shadow: var(--plate-border) var(--color-static-status-orange)
 }
-.plate__isHidden_8e6iw {
+.plate__attention_gekdg:before {
+        background-color: var(--color-static-status-orange);
+    }
+.plate__custom_gekdg {
+    background: var(--plate-background);
+    box-shadow: var(--plate-border) var(--plate-border-color)
+}
+.plate__custom_gekdg:before {
+        background-color: var(--plate-border-color);
+    }
+.plate__rect_gekdg,
+.plate__noBorder_gekdg {
+    box-shadow: none;
+}
+.plate__isHidden_gekdg {
     display: none;
 }
-.plate__leftAddons_8e6iw {
+.plate__leftAddons_gekdg,
+.plate__rightAddons_gekdg {
+    padding: var(--gap-2xs);
+}
+.plate__leftAddons_gekdg {
     flex-shrink: 0;
     min-width: 24px;
-    margin-right: var(--gap-s);
+    margin-right: var(--gap-2xs);
+}
+.plate__subAddons_gekdg {
+    cursor: default;
+    align-self: flex-start;
 }
-.plate__title_8e6iw {
+.plate__bold_gekdg,
+.plate__light_gekdg {
+    word-break: break-word;
+}
+.plate__bold_gekdg {
     font-size: 18px;
-    line-height: 24px;
+    line-height: 22px;
     font-weight: 700;
-
-    word-break: break-word;
+    padding: 5px var(--gap-s) 5px var(--gap-2xs);
+}
+.plate__light_gekdg {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    padding: 6px var(--gap-s) 6px var(--gap-2xs);
 }
-.plate__content_8e6iw {
+.plate__content_gekdg {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -113,58 +176,58 @@
     max-height: 300vh;
     overflow: hidden;
     transition: max-height 2s ease-in-out;
-    padding: var(--gap-2xs);
-    margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_8e6iw.plate__isFolded_8e6iw {
+.plate__content_gekdg.plate__isFolded_gekdg {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_8e6iw {
+.plate__contentContainer_gekdg {
     flex: 1;
-    max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_8e6iw.plate__withoutTitle_8e6iw {
+.plate__contentContainer_gekdg.plate__withoutTitle_gekdg {
         padding-top: var(--gap-3xs);
     }
-.plate__title_8e6iw + .plate__content_8e6iw > .plate__contentInner_8e6iw {
-    padding-top: var(--gap-xs);
+.plate__limitWidth_gekdg {
+    max-width: var(--plate-width-limit);
 }
-.plate__closer_8e6iw,
-.plate__folder_8e6iw {
+.plate__description_gekdg {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+}
+.plate__footer_gekdg {
+    padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
+}
+.plate__closer_gekdg,
+.plate__folder_gekdg {
     display: block;
     height: 24px;
     width: 24px;
     opacity: 1;
     transition: opacity 0.2s ease;
     cursor: pointer;
-    margin-left: var(--gap-m)
+    margin-left: var(--gap-s)
 }
-.plate__closer_8e6iw:hover, .plate__folder_8e6iw:hover {
+.plate__closer_gekdg:hover, .plate__folder_gekdg:hover {
         opacity: 0.7;
     }
-.plate__closer_8e6iw:active, .plate__folder_8e6iw:active {
+.plate__closer_gekdg:active, .plate__folder_gekdg:active {
         opacity: 0.5;
     }
-.plate__closer_8e6iw {
+.plate__closer_gekdg {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_8e6iw {
+.plate__folder_gekdg {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_8e6iw.plate__isFolded_8e6iw {
+.plate__folder_gekdg.plate__isFolded_gekdg {
         transform: rotate(0deg);
     }
-.plate__buttons_8e6iw {
-    margin-top: var(--gap-xl);
-}
-.plate__button_8e6iw {
-    margin-right: var(--gap-s)
-}
-.plate__button_8e6iw:last-child {
-        margin-right: 0;
+.plate__button_gekdg:not(:last-child) {
+        margin-right: var(--gap-xs);
     }

package/plate/modern/index.js

@@ -3,4 +3,5 @@ import 'classnames';
 import 'react-merge-refs';
 import '@alfalab/hooks';
 import '../../button/modern';
+import './components/button-list/component.js';
 export { Plate } from './Component.js';

package/popover/Component.js

@@ -44,7 +44,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_if8ag","inner":"popover__inner_if8ag","scrollableContent":"popover__scrollableContent_if8ag","arrow":"popover__arrow_if8ag","arrowShift":"popover__arrowShift_if8ag","enter":"popover__enter_if8ag","enterActive":"popover__enterActive_if8ag","exit":"popover__exit_if8ag","exitActive":"popover__exitActive_if8ag"};
+var styles = {"component":"popover__component_59b7x","inner":"popover__inner_59b7x","scrollableContent":"popover__scrollableContent_59b7x","arrow":"popover__arrow_59b7x","arrowShift":"popover__arrowShift_59b7x","enter":"popover__enter_59b7x","enterActive":"popover__enterActive_59b7x","exit":"popover__exit_59b7x","exitActive":"popover__exitActive_59b7x"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {

package/popover/esm/Component.js

@@ -35,7 +35,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_if8ag","inner":"popover__inner_if8ag","scrollableContent":"popover__scrollableContent_if8ag","arrow":"popover__arrow_if8ag","arrowShift":"popover__arrowShift_if8ag","enter":"popover__enter_if8ag","enterActive":"popover__enterActive_if8ag","exit":"popover__exit_if8ag","exitActive":"popover__exitActive_if8ag"};
+var styles = {"component":"popover__component_59b7x","inner":"popover__inner_59b7x","scrollableContent":"popover__scrollableContent_59b7x","arrow":"popover__arrow_59b7x","arrowShift":"popover__arrowShift_59b7x","enter":"popover__enter_59b7x","enterActive":"popover__enterActive_59b7x","exit":"popover__exit_59b7x","exitActive":"popover__exitActive_59b7x"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {

package/popover/esm/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_if8ag {
+.popover__component_59b7x {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_if8ag {
+.popover__inner_59b7x {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_if8ag {
+.popover__scrollableContent_59b7x {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_if8ag {
+.popover__arrow_59b7x {
     z-index: 1;
 }
-.popover__arrow_if8ag:after {
+.popover__arrow_59b7x:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_if8ag[data-popper-placement='left'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='left-start'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='left-end'] .popover__arrow_if8ag {
+.popover__component_59b7x[data-popper-placement='left'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='left-start'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='left-end'] .popover__arrow_59b7x {
     right: 5px
 }
-.popover__component_if8ag[data-popper-placement='left'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='left-start'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='left-end'] .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='left'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='left-start'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='left-end'] .popover__arrow_59b7x:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_if8ag[data-popper-placement='left-start'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='left-start'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     top: -7px;
 }
-.popover__component_if8ag[data-popper-placement='left-end'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='left-end'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     top: -5px;
 }
-.popover__component_if8ag[data-popper-placement='right'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='right-start'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='right-end'] .popover__arrow_if8ag {
+.popover__component_59b7x[data-popper-placement='right'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='right-start'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='right-end'] .popover__arrow_59b7x {
     left: -7px
 }
-.popover__component_if8ag[data-popper-placement='right'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='right-start'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='right-end'] .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='right'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='right-start'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='right-end'] .popover__arrow_59b7x:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_if8ag[data-popper-placement='right-start'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='right-start'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     top: -7px;
 }
-.popover__component_if8ag[data-popper-placement='right-end'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='right-end'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     top: -5px;
 }
-.popover__component_if8ag[data-popper-placement='top'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='top-start'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='top-end'] .popover__arrow_if8ag {
+.popover__component_59b7x[data-popper-placement='top'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='top-start'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='top-end'] .popover__arrow_59b7x {
     bottom: 5px
 }
-.popover__component_if8ag[data-popper-placement='top'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='top-start'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='top-end'] .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='top'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='top-start'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='top-end'] .popover__arrow_59b7x:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_if8ag[data-popper-placement='top-start'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='top-start'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     left: -17px;
 }
-.popover__component_if8ag[data-popper-placement='top-end'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='top-end'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     left: 5px;
 }
-.popover__component_if8ag[data-popper-placement='bottom'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='bottom-start'] .popover__arrow_if8ag,
-.popover__component_if8ag[data-popper-placement='bottom-end'] .popover__arrow_if8ag {
+.popover__component_59b7x[data-popper-placement='bottom'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='bottom-start'] .popover__arrow_59b7x,
+.popover__component_59b7x[data-popper-placement='bottom-end'] .popover__arrow_59b7x {
     top: -7px
 }
-.popover__component_if8ag[data-popper-placement='bottom'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='bottom-start'] .popover__arrow_if8ag:after, .popover__component_if8ag[data-popper-placement='bottom-end'] .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='bottom'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='bottom-start'] .popover__arrow_59b7x:after, .popover__component_59b7x[data-popper-placement='bottom-end'] .popover__arrow_59b7x:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_if8ag[data-popper-placement='bottom-start'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='bottom-start'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     left: -17px;
 }
-.popover__component_if8ag[data-popper-placement='bottom-end'].popover__arrowShift_if8ag .popover__arrow_if8ag:after {
+.popover__component_59b7x[data-popper-placement='bottom-end'].popover__arrowShift_59b7x .popover__arrow_59b7x:after {
     left: 5px;
 }
-.popover__enter_if8ag .popover__inner_if8ag {
+.popover__enter_59b7x .popover__inner_59b7x {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_if8ag .popover__inner_if8ag {
+.popover__enterActive_59b7x .popover__inner_59b7x {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_if8ag .popover__inner_if8ag {
+.popover__exit_59b7x .popover__inner_59b7x {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_if8ag .popover__inner_if8ag {
+.popover__exitActive_59b7x .popover__inner_59b7x {
     opacity: 0;
     transform: scale(0.98);
 }