@salutejs/plasma-new-hope 0.134.0-canary.1404.10612716409.0 → 0.134.0-canary.1405.10615646161.0

package/styled-components/es/examples/sds_engineer/components/Modal/Modal.stories.tsx

@@ -1,208 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { SSRProvider } from '@salutejs/plasma-core';
-
-import { PopupProvider, popupClasses } from '../Popup/Popup';
-import { Button } from '../Button/Button';
-import { WithTheme } from '../../../_helpers';
-
-import { Modal, modalClasses } from './Modal';
-
-export default {
-    title: 'sds_engineer/Modal',
-    decorators: [WithTheme],
-    argTypes: {
-        placement: {
-            options: [
-                'center',
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'top-right',
-                'top-left',
-                'bottom-right',
-                'bottom-left',
-            ],
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'center' } },
-        },
-        offsetX: {
-            control: {
-                type: 'number',
-            },
-            table: { defaultValue: { summary: 0 } },
-        },
-        offsetY: {
-            control: {
-                type: 'number',
-            },
-            table: { defaultValue: { summary: 0 } },
-        },
-        closeOnEsc: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        closeOnOverlayClick: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        withBlur: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: false } },
-        },
-    },
-} as Meta;
-
-type StoryModalProps = ComponentProps<typeof Modal> & {
-    placement: string;
-    offsetX: number;
-    offsetY: number;
-    closeOnEsc: boolean;
-    closeOnOverlayClick: boolean;
-    withBlur: boolean;
-};
-
-const StyledButton = styled(Button)`
-    margin-top: 1rem;
-    width: 15rem;
-`;
-
-const StyledWrapper = styled.div`
-    height: 1200px;
-`;
-
-const Content = styled.div`
-    background: var(--plasma-colors-surface-solid02);
-    padding: 1rem;
-`;
-
-const ButtonWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-`;
-
-const StyledModal = styled(Modal)`
-    && .${popupClasses.root}, .${modalClasses.overlay} {
-        animation: fadeIn 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${popupClasses.root} {
-        animation: fadeOut 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
-        animation: fadeOut 1s forwards;
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-        }
-
-        to {
-            opacity: 0;
-        }
-    }
-`;
-
-const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
-    const [isOpenA, setIsOpenA] = useState(false);
-    const [isOpenB, setIsOpenB] = useState(false);
-    const [isOpenC, setIsOpenC] = useState(false);
-
-    return (
-        <SSRProvider>
-            <StyledWrapper>
-                <PopupProvider>
-                    <ButtonWrapper>
-                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </ButtonWrapper>
-                    <StyledModal
-                        id="modalA"
-                        frame="theme-root"
-                        withAnimation
-                        onClose={() => setIsOpenA(false)}
-                        opened={isOpenA}
-                        placement={placement}
-                        offset={[offsetX, offsetY]}
-                        {...rest}
-                    >
-                        <Content>
-                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                            <ButtonWrapper>
-                                <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
-                            </ButtonWrapper>
-                            <Modal
-                                id="modalB"
-                                frame="theme-root"
-                                onClose={() => setIsOpenB(false)}
-                                opened={isOpenB}
-                                placement="left"
-                                offset={[offsetX, offsetY]}
-                                {...rest}
-                            >
-                                <Content>
-                                    <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
-                                        Close
-                                    </Button>
-                                    <ButtonWrapper>
-                                        <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
-                                    </ButtonWrapper>
-                                    <Modal
-                                        id="modalC"
-                                        frame="theme-root"
-                                        onClose={() => setIsOpenC(false)}
-                                        opened={isOpenC}
-                                        placement="top"
-                                        offset={[offsetX, offsetY]}
-                                        {...rest}
-                                    >
-                                        <Content>
-                                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
-                                                Close
-                                            </Button>
-                                            <>Content</>
-                                        </Content>
-                                    </Modal>
-                                </Content>
-                            </Modal>
-                        </Content>
-                    </StyledModal>
-                </PopupProvider>
-            </StyledWrapper>
-        </SSRProvider>
-    );
-};
-
-export const ModalDemo: StoryObj<StoryModalProps> = {
-    args: {
-        placement: 'center',
-        withBlur: false,
-        closeOnEsc: true,
-        closeOnOverlayClick: true,
-        offsetX: 0,
-        offsetY: 0,
-    },
-    render: (args) => <StoryModalDemo {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Notification/Notification.config.js

@@ -1,19 +0,0 @@
-import { css } from 'styled-components';
-import { notificationTokens } from '../../../../components/Notification';
-export var config = {
-  defaults: {
-    view: 'default'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], notificationTokens.contentColor, notificationTokens.background, notificationTokens.borderRadius, notificationTokens.padding, notificationTokens.contentPaddingTop, notificationTokens.contentPaddingRight, notificationTokens.contentPaddingBottom, notificationTokens.contentPaddingLeft, notificationTokens.contentPaddingTopWithoutIcon, notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, notificationTokens.textboxPaddingTop, notificationTokens.textboxPaddingRight, notificationTokens.textboxPaddingBottom, notificationTokens.textboxPaddingLeft, notificationTokens.textboxPaddingRightWithCloseIcon, notificationTokens.textboxGap, notificationTokens.closeIconTop, notificationTokens.closeIconRight, notificationTokens.buttonsMarginTop, notificationTokens.contentLeftIconSize, notificationTokens.contentLeftIconMargin, notificationTokens.contentTopIconMargin, notificationTokens.contentFontFamily, notificationTokens.contentFontSize, notificationTokens.contentFontStyle, notificationTokens.contentFontWeight, notificationTokens.contentFontLetterSpacing, notificationTokens.contentFontLineHeight, notificationTokens.titleFontFamily, notificationTokens.titleFontSize, notificationTokens.titleFontStyle, notificationTokens.titleFontWeight, notificationTokens.titleFontLetterSpacing, notificationTokens.titleFontLineHeight, notificationTokens.closeIconColor, notificationTokens.closeIconColorOnHover, notificationTokens.horizontalLayoutGap, notificationTokens.horizontalLayoutLeftIconMargin, notificationTokens.paddingOneLineTextbox)
-    },
-    layout: {
-      horizontal: /*#__PURE__*/css(["", ":25rem;", ":1rem 0.5rem 1rem 0.875rem;"], notificationTokens.width, notificationTokens.horizontalLayoutPadding),
-      vertical: /*#__PURE__*/css(["", ":15rem;", ":0.375rem;"], notificationTokens.width, notificationTokens.padding)
-    },
-    size: {
-      xs: /*#__PURE__*/css(["", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0rem;"], notificationTokens.closeIconTop, notificationTokens.closeIconRight, notificationTokens.padding, notificationTokens.textboxPaddingTopWithTopIcon, notificationTokens.contentPaddingTop, notificationTokens.contentPaddingRight, notificationTokens.contentPaddingBottom, notificationTokens.contentPaddingLeft, notificationTokens.buttonsMarginLeft)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Notification/Notification.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { noticationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Notification.config';
-export { modalClasses } from '../../../../components/Modal';
-var mergedConfig = /*#__PURE__*/mergeConfig(noticationConfig, config);
-export var Notification = /*#__PURE__*/component(mergedConfig);
-export var NotificationsProvider = function NotificationsProvider(_ref) {
-  var children = _ref.children,
-    _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
-  return /*#__PURE__*/React.createElement(Provider, {
-    config: mergedConfig,
-    frame: frame
-  }, children);
-};

package/styled-components/es/examples/sds_engineer/components/Notification/Notification.stories.tsx

@@ -1,159 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { Button } from '../Button/Button';
-import { Modal } from '../Modal/Modal';
-import {
-    NotificationIconPlacement,
-    NotificationLayout,
-    addNotification,
-} from '../../../../../src/components/Notification';
-import { WithTheme } from '../../../_helpers';
-import { PopupProvider } from '../Popup/Popup';
-import { NotificationProps } from '../../../../components/Notification';
-import { IconDisclosureRight } from '../../../../components/_Icon';
-
-import { Notification, NotificationsProvider } from './Notification';
-
-const titles = ['Выполнено', 'Внимание', 'Ошибка'];
-const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
-const iconPlacement = ['top', 'left'];
-
-const longText = `JavaScript frameworks are an essential part of modern front-end web development,
-providing developers with proven tools for building scalable, interactive web applications.
-`;
-
-const getNotificationProps = (i: number) => ({
-    title: titles[i % 3],
-    children: texts[i % 3],
-    iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
-});
-
-const placements = ['top', 'left'];
-
-const meta: Meta<NotificationProps> = {
-    title: 'sds_engineer/Notification',
-    decorators: [WithTheme],
-};
-
-export default meta;
-
-interface StoryDefaultProps {
-    title: string;
-    children: string;
-    showCloseIcon: boolean;
-    showLeftIcon: boolean;
-    layout: NotificationLayout;
-    iconPlacement: NotificationIconPlacement;
-}
-
-const StoryDefault = ({ title, children, iconPlacement, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
-    return (
-        <Notification
-            title={title}
-            icon={showLeftIcon ? <IconDisclosureRight /> : ''}
-            iconPlacement={iconPlacement}
-            actions={<Button text="text" size="xs" stretch={layout === 'vertical'} />}
-            layout={layout}
-            {...rest}
-        >
-            {children}
-        </Notification>
-    );
-};
-
-export const Default: StoryObj<StoryDefaultProps> = {
-    argTypes: {
-        iconPlacement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        layout: {
-            options: ['vertical', 'horizontal'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        title: 'Title',
-        children: longText,
-        showCloseIcon: true,
-        showLeftIcon: true,
-        iconPlacement: 'top',
-        layout: 'vertical',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
-    timeout: number;
-    layout: NotificationLayout;
-    iconPlacement: NotificationIconPlacement;
-};
-
-const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
-    const count = useRef(0);
-    const handleClick = useCallback(() => {
-        addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
-        count.current++;
-    }, [count, rest]);
-
-    return (
-        <NotificationsProvider>
-            <Button text="Добавить уведомление" onClick={handleClick} />
-        </NotificationsProvider>
-    );
-};
-
-export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
-    argTypes: {
-        layout: {
-            options: ['vertical', 'horizontal'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        timeout: 3000,
-        role: 'alert',
-        layout: 'vertical',
-    },
-    render: (args) => <StoryLiveDemo {...args} />,
-};
-
-type StoryWithModalProps = ComponentProps<typeof Notification> & {
-    timeout: number;
-};
-
-const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const count = useRef(0);
-    const handleClick = useCallback(() => {
-        addNotification(getNotificationProps(count.current), timeout);
-        count.current++;
-    }, [count]);
-
-    return (
-        <NotificationsProvider>
-            <PopupProvider>
-                <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
-                    <div>Hello!</div>
-                    <Button view="primary" text="Add notification" onClick={handleClick} />
-                </Modal>
-            </PopupProvider>
-        </NotificationsProvider>
-    );
-};
-
-export const WithModal: StoryObj<StoryLiveDemoProps> = {
-    args: {
-        timeout: 3500,
-    },
-    render: (args) => <StoryWithModal {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Overlay/Overlay.stories.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Button } from '../Button/Button';
-import { WithTheme } from '../../../_helpers';
-import { Overlay } from '../../../../components/Overlay';
-
-const onOverlayClick = action('onOverlayClick');
-
-type StoryOverlayProps = ComponentProps<typeof Overlay>;
-
-const meta: Meta<StoryOverlayProps> = {
-    title: 'sds_engineer/Overlay',
-    decorators: [WithTheme],
-    argTypes: {
-        isClickable: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        withBlur: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: false } },
-        },
-        ...disableProps(['onOverlayClick', 'zIndex']),
-    },
-    component: Overlay,
-};
-
-export default meta;
-
-const StyledButton = styled(Button)`
-    margin: 1rem;
-    width: 15rem;
-`;
-
-const StyledCloseButton = styled(Button)`
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 101;
-    transform: translate(-50%, -50%);
-    width: 15rem;
-`;
-
-const StoryDefault = (props: StoryOverlayProps) => {
-    const [isVisible, setIsVisible] = useState(false);
-
-    return (
-        <>
-            <StyledButton text="Показать overlay" onClick={() => setIsVisible(true)} />
-            {isVisible && (
-                <>
-                    <Overlay {...props} />
-                    <StyledCloseButton text=" Скрыть overlay" onClick={() => setIsVisible(false)} />
-                </>
-            )}
-        </>
-    );
-};
-
-export const Default: StoryObj<StoryOverlayProps> = {
-    args: {
-        zIndex: '100',
-        backgroundColorProperty: 'var(--overlay-soft)',
-        withBlur: false,
-        transparent: false,
-        isClickable: true,
-        onOverlayClick,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Panel/Panel.config.js

@@ -1,21 +0,0 @@
-import { css } from 'styled-components';
-import { panelTokens } from '../../../../components/Panel';
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'm',
-    borderRadius: 'none'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":0 3.75rem 7rem -0.5rem rgba(0,0,0,0.08);", ":var(--surface-transparent-primary);"], panelTokens.background, panelTokens.shadow, panelTokens.contentBackgroundColor)
-    },
-    size: {
-      m: /*#__PURE__*/css(["", ":1.5rem;"], panelTokens.padding)
-    },
-    borderRadius: {
-      none: /*#__PURE__*/css(["", ":0;"], panelTokens.borderRadius),
-      "default": /*#__PURE__*/css(["", ":0.625rem;"], panelTokens.borderRadius)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Panel/Panel.js

@@ -1,12 +0,0 @@
-import { panelContentConfig, panelFooterConfig, panelHeaderConfig } from '../../../../components/Panel';
-import { panelConfig } from '../../../../components/Panel/Panel';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Panel.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(panelConfig, config);
-export var Panel = /*#__PURE__*/component(mergedConfig);
-var mergedContentConfig = /*#__PURE__*/mergeConfig(panelContentConfig);
-export var PanelContent = /*#__PURE__*/component(mergedContentConfig);
-var mergedHeaderConfig = /*#__PURE__*/mergeConfig(panelHeaderConfig);
-export var PanelHeader = /*#__PURE__*/component(mergedHeaderConfig);
-var mergedFooterConfig = /*#__PURE__*/mergeConfig(panelFooterConfig);
-export var PanelFooter = /*#__PURE__*/component(mergedFooterConfig);

package/styled-components/es/examples/sds_engineer/components/Panel/Panel.stories.tsx

@@ -1,148 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { Button } from '../Button/Button';
-import { WithTheme } from '../../../_helpers';
-import { Heading } from '../../../typograpy/components/Heading/Heading';
-import { IconDone } from '../../../../components/_Icon';
-import { ClosePlacementType } from '../../../../components/Panel';
-import { SSRProvider } from '../../../../components/SSRProvider';
-
-import { Panel, PanelContent, PanelFooter, PanelHeader } from './Panel';
-
-export default {
-    title: 'sds_engineer/Panel',
-    decorators: [WithTheme],
-    argTypes: {
-        borderRadius: {
-            options: ['none', 'default'],
-            control: {
-                type: 'select',
-            },
-        },
-        showHeader: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        showFooter: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        showActions: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        closePlacement: {
-            options: ['right', 'left'],
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'right' } },
-        },
-    },
-} as Meta;
-
-type StoryPanelProps = ComponentProps<typeof Panel> & {
-    showHeader: boolean;
-    showFooter: boolean;
-    showActions: boolean;
-    closePlacement: string;
-    hasCloseArrow: boolean;
-};
-
-const StyledWrapper = styled.div`
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`;
-
-const StyledContentWrapper = styled.div`
-    height: 80%;
-    display: flex;
-    flex-grow: 1;
-`;
-
-const StyledContent = styled.div`
-    background: #f5f5dc;
-    flex-grow: 1;
-    height: 100%;
-`;
-
-const StyledSection = styled.div`
-    background: #808080;
-    min-height: 20%;
-`;
-
-const StyledIconButton = styled(Button)`
-    position: relative;
-    width: 1.5rem;
-    height: 1.5rem;
-`;
-
-const StoryPanelDemo = ({ showHeader, showFooter, showActions, closePlacement, ...rest }: StoryPanelProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <SSRProvider>
-            <StyledWrapper>
-                <StyledSection>
-                    <Button text="Открыть панель" onClick={() => setIsOpen(true)} />
-                </StyledSection>
-                <StyledContentWrapper>
-                    {isOpen && (
-                        <Panel {...rest}>
-                            <PanelHeader
-                                closePlacement={closePlacement as ClosePlacementType}
-                                actions={
-                                    showActions && (
-                                        <StyledIconButton size="s" view="clear">
-                                            <IconDone size="s" />
-                                        </StyledIconButton>
-                                    )
-                                }
-                                onClose={() => setIsOpen(false)}
-                            >
-                                {showHeader && <Heading size="h3">Header</Heading>}
-                            </PanelHeader>
-                            <PanelContent>Content</PanelContent>
-                            {showFooter && (
-                                <PanelFooter>
-                                    <Heading size="h3">Footer</Heading>
-                                </PanelFooter>
-                            )}
-                        </Panel>
-                    )}
-                    <StyledContent>
-                        <Heading style={{ margin: '2rem' }} size="h2">
-                            Some basic content
-                        </Heading>
-                    </StyledContent>
-                </StyledContentWrapper>
-                <StyledSection />
-            </StyledWrapper>
-        </SSRProvider>
-    );
-};
-
-export const PanelDemo: StoryObj<StoryPanelProps> = {
-    args: {
-        showHeader: true,
-        showFooter: true,
-        showActions: true,
-        hasCloseArrow: true,
-        borderRadius: 'none',
-        closePlacement: 'right',
-        width: '30%',
-        height: '100%',
-    },
-    render: (args) => <StoryPanelDemo {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Popover/Popover.config.js

@@ -1,12 +0,0 @@
-import { css } from 'styled-components';
-import { popoverTokens } from '../../../../components/Popover';
-export var config = {
-  defaults: {
-    view: 'default'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--plasma-colors-surface-solid03);"], popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
-    }
-  }
-};