@salutejs/plasma-new-hope 0.131.1-canary.1396.10560424945.0 → 0.132.0-canary.1352.10568540479.0

package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.config.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Toast = /*#__PURE__*/require("../../../../components/Toast");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+    },
+    pilled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastProvider = exports.ToastController = exports.Toast = void 0;
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast.useToast;
+  }
+});
+var _Toast = /*#__PURE__*/require("../../../../components/Toast");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Toast2 = /*#__PURE__*/require("./Toast.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Toast.toastConfig, _Toast2.config);
+var Toast = exports.Toast = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var ToastController = exports.ToastController = /*#__PURE__*/(0, _Toast.ToastControllerHoc)(Toast);
+var ToastProvider = exports.ToastProvider = /*#__PURE__*/(0, _Toast.ToastProviderHoc)(ToastController);

package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.stories.tsx

@@ -0,0 +1,223 @@
+import React, { ComponentProps, useCallback, useRef, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { toastConfig } from '../../../../components/Toast';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { PopupProvider } from '../Popup/Popup';
+import { addNotification } from '../../../../../src/components/Notification';
+import { NotificationsProvider } from '../Notification/Notification';
+import { Modal } from '../Modal/Modal';
+
+import { config } from './Toast.config';
+import { Toast, ToastController, ToastProvider, useToast } from './Toast';
+
+const meta: Meta<typeof ToastController> = {
+    title: 'sds_engineer/Toast',
+    decorators: [WithTheme],
+};
+
+export default meta;
+
+type StoryComponentProps = ComponentProps<typeof Toast> & {
+    enableContentLeft?: boolean;
+};
+type StoryComponent = StoryObj<StoryComponentProps>;
+
+type StoryProps = ComponentProps<typeof ToastController> & {
+    text: string;
+    timeout?: number;
+    enableContentLeft?: boolean;
+};
+type Story = StoryObj<StoryProps>;
+
+const BellIcon = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+        <path
+            d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+const ToastContainer = styled.div`
+    position: fixed;
+    transform: translateX(50%);
+`;
+
+const Container = styled.div`
+    display: flex;
+    gap: 0.5rem;
+`;
+
+export const ToastComponent: StoryComponent = {
+    args: {
+        text: 'Текст всплывающего уведомления',
+        view: 'default',
+        size: 'm',
+        hasClose: true,
+        enableContentLeft: true,
+        pilled: false,
+    },
+    render: ({ enableContentLeft, ...args }) => (
+        <ToastContainer>
+            <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
+        </ToastContainer>
+    ),
+};
+
+const StoryLiveDemo = ({
+    text,
+    position,
+    timeout,
+    fade,
+    offset,
+    pilled,
+    view,
+    size,
+    hasClose,
+    enableContentLeft,
+}: StoryProps) => {
+    const { showToast, hideToast } = useToast();
+    const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
+
+    return (
+        <Container>
+            <Button onClick={hideToast}>Скрыть уведомление</Button>
+            <Button
+                onClick={() => {
+                    showToast({
+                        text,
+                        position,
+                        offset,
+                        timeout,
+                        fade,
+                        contentLeft,
+                        pilled,
+                        view,
+                        size,
+                        hasClose,
+                        onHide: action('onHide'),
+                        onShow: action('onShow'),
+                    });
+                }}
+            >
+                Показать уведомление
+            </Button>
+        </Container>
+    );
+};
+
+export const LiveDemo: Story = {
+    args: {
+        ...ToastComponent.args,
+        position: 'bottom',
+        fade: true,
+        offset: 0,
+        timeout: 3000,
+        role: 'alert',
+    },
+    argTypes: {
+        position: {
+            options: ['top', 'bottom'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
+        ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
+    },
+    parameters: {
+        chromatic: {
+            disable: true,
+        },
+    },
+    render: (args) => (
+        <ToastProvider>
+            <StoryLiveDemo {...args} />
+        </ToastProvider>
+    ),
+};
+
+const StoryComplex = ({
+    text,
+    position,
+    timeout,
+    fade,
+    offset,
+    pilled,
+    view,
+    size,
+    hasClose,
+    enableContentLeft,
+}: StoryProps) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const { showToast } = useToast();
+    const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
+
+    const handleShowToast = () => {
+        showToast({
+            text,
+            position,
+            offset,
+            timeout,
+            fade,
+            contentLeft,
+            pilled,
+            view,
+            size,
+            hasClose,
+            onHide: action('onHide'),
+            onShow: action('onShow'),
+        });
+    };
+
+    const count = useRef(0);
+    const handleShowNotification = useCallback(() => {
+        addNotification(
+            {
+                title: 'Добавить Toast',
+                size: 'xs',
+                actions: <Button text="Добавить" size="xs" stretch onClick={handleShowToast} />,
+            },
+            5000,
+        );
+        count.current++;
+    }, [count]);
+
+    return (
+        <NotificationsProvider>
+            <PopupProvider>
+                <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
+                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                    <div>Hello!</div>
+                    <Button view="default" text="Add notification" onClick={handleShowNotification} />
+                </Modal>
+            </PopupProvider>
+        </NotificationsProvider>
+    );
+};
+
+export const Complex: Story = {
+    args: {
+        ...LiveDemo.args,
+    },
+    argTypes: {
+        ...LiveDemo.argTypes,
+    },
+    parameters: {
+        chromatic: {
+            disable: true,
+        },
+    },
+    render: (args) => (
+        <ToastProvider>
+            <StoryComplex {...args} />
+        </ToastProvider>
+    ),
+};

package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Toolbar = /*#__PURE__*/require("../../../../components/Toolbar");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-soft-s);", ":var(--surface-solid-card);", ":var(--surface-transparent-tertiary);"], _Toolbar.toolbarTokens.boxShadow, _Toolbar.toolbarTokens.background, _Toolbar.toolbarTokens.dividerColor)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.25rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":0.0625rem;"], _Toolbar.toolbarTokens.size, _Toolbar.toolbarTokens.padding, _Toolbar.toolbarTokens.borderRadius, _Toolbar.toolbarTokens.dividerSize, _Toolbar.toolbarTokens.dividerOffset, _Toolbar.toolbarTokens.dividerBorderRadius),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":0.25rem;", ":0.875rem;", ":1.5rem;", ":0.5rem;", ":0.0625rem;"], _Toolbar.toolbarTokens.size, _Toolbar.toolbarTokens.padding, _Toolbar.toolbarTokens.borderRadius, _Toolbar.toolbarTokens.dividerSize, _Toolbar.toolbarTokens.dividerOffset, _Toolbar.toolbarTokens.dividerBorderRadius),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.75rem;", ":0.375rem;", ":1rem;", ":1.75rem;", ":0.625rem;", ":0.0625rem;"], _Toolbar.toolbarTokens.size, _Toolbar.toolbarTokens.padding, _Toolbar.toolbarTokens.borderRadius, _Toolbar.toolbarTokens.dividerSize, _Toolbar.toolbarTokens.dividerOffset, _Toolbar.toolbarTokens.dividerBorderRadius),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":4.5rem;", ":0.5rem;", ":1.25rem;", ":2rem;", ":0.75rem;", ":0.0625rem;"], _Toolbar.toolbarTokens.size, _Toolbar.toolbarTokens.padding, _Toolbar.toolbarTokens.borderRadius, _Toolbar.toolbarTokens.dividerSize, _Toolbar.toolbarTokens.dividerOffset, _Toolbar.toolbarTokens.dividerBorderRadius)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarDivider = exports.Toolbar = void 0;
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Toolbar = /*#__PURE__*/require("../../../../components/Toolbar");
+var _Toolbar2 = /*#__PURE__*/require("./Toolbar.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Toolbar.toolbarConfig, _Toolbar2.config);
+
+/**
+ * Компонент Toolbar.
+ */
+var Toolbar = exports.Toolbar = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedDividerConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Toolbar.toolbarDividerConfig);
+var ToolbarDivider = exports.ToolbarDivider = /*#__PURE__*/(0, _engines.component)(mergedDividerConfig);

package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { IconDone } from '../../../../components/_Icon';
+import { Button } from '../Button/Button';
+import { WithTheme } from '../../../_helpers';
+
+import { Toolbar, ToolbarDivider } from './Toolbar';
+
+const orientations: Array<string> = ['vertical', 'horizontal'];
+const size: Array<string> = ['xs', 's', 'm', 'l'];
+
+const ToolbarWrapper = (props: ComponentProps<typeof Toolbar>) => {
+    return (
+        <Toolbar {...props}>
+            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
+            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
+            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
+            <ToolbarDivider />
+            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
+            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
+        </Toolbar>
+    );
+};
+
+const meta: Meta<typeof Toolbar> = {
+    title: 'sds_engineer/Toolbar',
+    component: ToolbarWrapper,
+    decorators: [WithTheme],
+    argTypes: {
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'select',
+            },
+        },
+        hasShadow: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        orientation: 'vertical',
+        hasShadow: true,
+        size: 'm',
+        view: 'default',
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toolbar>;
+
+export const Default: Story = {
+    args: {},
+};

package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.config.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Tooltip = /*#__PURE__*/require("../../../../components/Tooltip");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":1.5rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":500;", ":0px;", ":1rem;", ":0.25rem;", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0ibTgsMTUuNzhsLTIuMjQsLTQuMzRjLTAuOTIsLTEuNzkgLTEuMzgsLTIuNjggLTIuMTUsLTMuMTdjLTAuNzcsLTAuNDkgLTEuNzIsLTAuNDkgLTMuNjEsLTAuNDlsMTYsMGMtMS44OSwwIC0yLjgzLDAgLTMuNiwwLjQ5Yy0wLjc4LDAuNDkgLTEuMjQsMS4zOCAtMi4xNiwzLjE2bC0yLjI0LDQuMzV6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLW9wYWNpdHk9IjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9InBvaW50ZXIiLz4KPC9zdmc+\");", ":0.5rem;", ":0.625rem;", ":#475056;"], _Tooltip.tooltipTokens.paddingTop, _Tooltip.tooltipTokens.paddingRight, _Tooltip.tooltipTokens.paddingBottom, _Tooltip.tooltipTokens.paddingLeft, _Tooltip.tooltipTokens.minHeight, _Tooltip.tooltipTokens.borderRadius, _Tooltip.tooltipTokens.textFontFamily, _Tooltip.tooltipTokens.textFontSize, _Tooltip.tooltipTokens.textFontStyle, _Tooltip.tooltipTokens.textFontWeight, _Tooltip.tooltipTokens.textFontLetterSpacing, _Tooltip.tooltipTokens.textFontLineHeight, _Tooltip.tooltipTokens.contentLeftMargin, _Tooltip.tooltipTokens.arrowMaskWidth, _Tooltip.tooltipTokens.arrowMaskHeight, _Tooltip.tooltipTokens.arrowMaskImage, _Tooltip.tooltipTokens.arrowHeight, _Tooltip.tooltipTokens.arrowEdgeMargin, _Tooltip.tooltipTokens.arrowBackground)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":#475056;", ":0px 1px 2px 0px rgba(2,13,76,0.15),0px 3.6px 7.1px 0px rgba(2,13,76,0.12),0px 16px 32px 0px rgba(2,13,76,0.2);", ":var(--on-dark-text-primary);"], _Tooltip.tooltipTokens.backgroundColor, _Tooltip.tooltipTokens.boxShadow, _Tooltip.tooltipTokens.color)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+var _Tooltip = /*#__PURE__*/require("../../../../components/Tooltip");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Tooltip2 = /*#__PURE__*/require("./Tooltip.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tooltip.tooltipConfig, _Tooltip2.config);
+var Tooltip = exports.Tooltip = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { PopoverPlacement } from '../Popover/Popover';
+import { IconDisclosureRight } from '../../../../components/_Icon';
+
+import { Tooltip } from './Tooltip';
+import type { TooltipProps } from './Tooltip';
+
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
+
+const meta: Meta<TooltipProps> = {
+    title: 'sds_engineer/Tooltip',
+    decorators: [WithTheme],
+    component: Tooltip,
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '20rem' } },
+    },
+};
+
+export default meta;
+
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: 1rem 3.5rem;
+    padding: 3.5rem;
+`;
+
+const StoryDefault = ({ size }: TooltipProps) => {
+    return (
+        <StyledGrid>
+            <Tooltip
+                target={
+                    <Tooltip
+                        target={<Button>Btn</Button>}
+                        placement="left"
+                        size={size}
+                        opened
+                        hasArrow
+                        text="left"
+                        frame="theme-root"
+                    />
+                }
+                placement="top-start"
+                size={size}
+                opened
+                hasArrow
+                text="top-start"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="top"
+                size={size}
+                opened
+                hasArrow
+                text="top"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={
+                    <Tooltip
+                        target={<Button>Btn</Button>}
+                        placement="right"
+                        size={size}
+                        opened
+                        hasArrow
+                        text="right"
+                        frame="theme-root"
+                    />
+                }
+                placement="top-end"
+                size={size}
+                opened
+                hasArrow
+                text="top-end"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-start"
+                size={size}
+                opened
+                hasArrow
+                text="bottom-start"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom"
+                size={size}
+                opened
+                hasArrow
+                text="bottom"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-end"
+                size={size}
+                opened
+                hasArrow
+                text="bottom-end"
+                frame="theme-root"
+            />
+        </StyledGrid>
+    );
+};
+
+export const Default: StoryObj<TooltipProps> = {
+    argTypes: {
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        size: 'm',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StyledRow = styled.div`
+    display: flex;
+    width: 150vw;
+    height: 150vh;
+    padding: 10rem;
+`;
+
+const StoryLive = (args: TooltipProps) => {
+    const [text, setText] = useState('Type here');
+
+    return (
+        <>
+            <StyledRow>
+                <Tooltip
+                    target={
+                        <input
+                            name="Имя"
+                            value={text}
+                            onChange={(e) => setText(e.target.value)}
+                            aria-describedby="example-tooltip-firstname"
+                        />
+                    }
+                    contentLeft={<IconDisclosureRight size="xs" />}
+                    {...args}
+                    id="example-tooltip-firstname"
+                    text={text}
+                    opened
+                    frame="theme-root"
+                />
+            </StyledRow>
+        </>
+    );
+};
+
+export const Live: StoryObj<TooltipProps> = {
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            mapping: placements,
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        placement: 'bottom',
+        maxWidth: 10,
+        minWidth: 3,
+        hasArrow: true,
+        size: 'm',
+    },
+    render: (args) => <StoryLive {...args} />,
+};

package/styled-components/cjs/examples/themes/index.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.themes = void 0;
 var _plasma_b2cModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./plasma_b2c.module.css"));
 var _plasma_webModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./plasma_web.module.css"));
+var _sds_engineerModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./sds_engineer.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /* eslint-disable camelcase */
 
 var themes = exports.themes = {
   plasma_b2c: _plasma_b2cModule["default"],
-  plasma_web: _plasma_webModule["default"]
+  plasma_web: _plasma_webModule["default"],
+  sds_engineer: _sds_engineerModule["default"]
 };