@salutejs/sdds-cs 0.319.0-canary.2021.15824070198.0 → 0.319.0-canary.2022.15754718552.0

package/emotion/cjs/components/Modal/Modal.stories.tsx

@@ -0,0 +1,426 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { SSRProvider } from '../SSRProvider';
+import { Button } from '../Button';
+import { TextField } from '../TextField';
+import { PopupProvider, popupClasses } from '../Popup';
+
+import { Modal, modalClasses } from '.';
+import type { ModalProps } from '.';
+
+const meta: Meta<ModalProps> = {
+    title: 'Overlay/Modal',
+    decorators: [InSpacingDecorator],
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '30rem' } },
+    },
+    argTypes: {
+        ...disableProps(['view', 'hasBody']),
+        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;
+
+export default meta;
+
+type StoryModalProps = ComponentProps<typeof Modal> & {
+    placement: string;
+    offsetX: number;
+    offsetY: number;
+    closeOnEsc: boolean;
+    closeOnOverlayClick: boolean;
+    withBlur: boolean;
+    hasClose?: boolean;
+};
+
+const StyledButton = styled(Button)`
+    margin-top: 1rem;
+    width: 15rem;
+`;
+
+const StyledWrapper = styled.div`
+    height: 1200px;
+`;
+
+const Content = styled.div`
+    background: var(--surface-solid-card);
+    padding: 1.5rem;
+    border-radius: 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]}
+                        hasBody
+                        {...rest}
+                    >
+                        <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]}
+                            hasBody
+                            {...rest}
+                        >
+                            <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]}
+                                hasBody
+                                {...rest}
+                            >
+                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                    Close
+                                </Button>
+                                <>Content</>
+                            </Modal>
+                        </Modal>
+                    </StyledModal>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+const StoryCustomModalDemo = ({ 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 Default: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+        hasClose: true,
+    },
+    argTypes: {
+        hasClose: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    render: (args) => <StoryModalDemo {...args} />,
+};
+
+export const CustomModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryCustomModalDemo {...args} />,
+};
+
+const StyledModalAnimation = styled(Modal)`
+    /* stylelint-disable */
+    ${({ placement }) =>
+        placement !== 'center'
+            ? css`
+                  --initial-position: 0, 100%;
+                  --end-position: 0, -50%;
+              `
+            : css`
+                  --initial-position: -50%, 100%;
+                  --end-position: -50%, -50%;
+              `}
+
+    && .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    && .${modalClasses.overlay} {
+        animation: overlayFadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: overlayFadeOut 1s forwards;
+    }
+    /* stylelint-enable */
+
+    @keyframes overlayFadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes overlayFadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translate(var(--initial-position));
+        }
+
+        to {
+            opacity: 1;
+            transform: translate(var(--end-position));
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translate(var(--end-position));
+        }
+
+        to {
+            opacity: 0;
+            transform: translate(var(--initial-position));
+        }
+    }
+`;
+
+const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const ref = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
+                <StyledModalAnimation
+                    id="modal"
+                    frame="theme-root"
+                    withAnimation
+                    onClose={() => setIsOpen(false)}
+                    opened={isOpen}
+                    placement={placement}
+                    offset={[offsetX, offsetY]}
+                    initialFocusRef={ref}
+                    {...rest}
+                >
+                    <Content>
+                        <TextField value="Text" onChange={() => {}} />
+                        <TextField ref={ref} value="Text2" onChange={() => {}} />
+                        <Button text="Закрыть" onClick={close} />
+                    </Content>
+                </StyledModalAnimation>
+            </PopupProvider>
+        </SSRProvider>
+    );
+};
+
+export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'bottom',
+        withAnimation: true,
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalAnimationDemo {...args} />,
+};

package/emotion/cjs/components/Modal/index.js

@@ -1,20 +1,19 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Modal () {
-        return _Modal.Modal;
-    },
-    get modalClasses () {
-        return _emotion.modalClasses;
-    }
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.Modal;
+  }
 });
-var _Modal = require("./Modal");
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
+Object.defineProperty(exports, "modalClasses", {
+  enumerable: true,
+  get: function get() {
+    return _emotion.modalClasses;
+  }
+});
+var _Modal = /*#__PURE__*/require("./Modal");
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");

package/emotion/cjs/components/Notification/Notification.config.js

@@ -1,168 +1,31 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": var(--outline-solid-primary);\n\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 1rem;\n\n                ",
-        ": 0;\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 1.625rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.5rem;\n\n                ",
-        ": 0.375rem;\n\n                ",
-        ": 1.5rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n\n                ",
-        ": var(--text-accent);\n                ",
-        ": #1A9E32;\n\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.8125rem 0.5rem 0.8125rem 0.875rem;\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 30rem;\n                ",
-        ": 0.75rem 0.75rem 0.75rem 0.75rem;\n                ",
-        ": flex-start;\n                ",
-        ": flex-end;\n                ",
-        ": flex-start;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 15rem;\n                ",
-        ": 0.375rem;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 0.75rem;\n                ",
-        ": 0rem;\n\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 0rem;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.875rem;\n                ",
-        ": 1rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 0.75rem 1rem 1rem 1rem;\n                ",
-        ": 0.1875rem;\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0rem;\n                ",
-        ": 0rem;\n\n                ",
-        ": 2rem;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.5rem;\n                ",
-        ": 1.5rem;\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default',
-        closeIconType: 'thin'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    closeIconType: 'thin'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-solid-card);\n                ", ": 0.75rem;\n                ", ": 0.75rem;\n                ", ": var(--outline-solid-primary);\n\n                ", ": 0.125rem;\n                ", ": 0.25rem;\n                ", ": 0rem;\n                ", ": 0.25rem;\n\n                ", ": 0.25rem;\n                ", ": 1rem;\n\n                ", ": 0;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": 0.125rem;\n\n                ", ": 1.625rem;\n                ", ": 0.25rem;\n\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n\n                ", ": 0.375rem;\n\n                ", ": 1.5rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-bold-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": var(--text-accent);\n                ", ": #1A9E32;\n\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.8125rem 0.5rem 0.8125rem 0.875rem;\n            "])), _emotion.notificationTokens.titleColor, _emotion.notificationTokens.contentLeftIconColor, _emotion.notificationTokens.contentColor, _emotion.notificationTokens.background, _emotion.notificationTokens.borderRadius, _emotion.notificationTokens.padding, _emotion.notificationTokens.borderColor, _emotion.notificationTokens.contentPaddingTop, _emotion.notificationTokens.contentPaddingRight, _emotion.notificationTokens.contentPaddingBottom, _emotion.notificationTokens.contentPaddingLeft, _emotion.notificationTokens.contentPaddingTopWithoutIcon, _emotion.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _emotion.notificationTokens.textboxPaddingTop, _emotion.notificationTokens.textboxPaddingRight, _emotion.notificationTokens.textboxPaddingBottom, _emotion.notificationTokens.textboxPaddingLeft, _emotion.notificationTokens.textboxPaddingRightWithCloseIcon, _emotion.notificationTokens.textboxGap, _emotion.notificationTokens.closeIconTop, _emotion.notificationTokens.closeIconRight, _emotion.notificationTokens.buttonsMarginTop, _emotion.notificationTokens.contentLeftIconSize, _emotion.notificationTokens.contentLeftIconMargin, _emotion.notificationTokens.contentTopIconMargin, _emotion.notificationTokens.contentFontFamily, _emotion.notificationTokens.contentFontSize, _emotion.notificationTokens.contentFontStyle, _emotion.notificationTokens.contentFontWeight, _emotion.notificationTokens.contentFontLetterSpacing, _emotion.notificationTokens.contentFontLineHeight, _emotion.notificationTokens.titleFontFamily, _emotion.notificationTokens.titleFontSize, _emotion.notificationTokens.titleFontStyle, _emotion.notificationTokens.titleFontWeight, _emotion.notificationTokens.titleFontLetterSpacing, _emotion.notificationTokens.titleFontLineHeight, _emotion.notificationTokens.closeIconColor, _emotion.notificationTokens.closeIconColorOnHover, _emotion.notificationTokens.horizontalLayoutGap, _emotion.notificationTokens.horizontalLayoutLeftIconMargin, _emotion.notificationTokens.paddingOneLineTextbox)
+    },
+    layout: {
+      horizontal: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 30rem;\n                ", ": 0.75rem 0.75rem 0.75rem 0.75rem;\n                ", ": flex-start;\n                ", ": flex-end;\n                ", ": flex-start;\n            "])), _emotion.notificationTokens.width, _emotion.notificationTokens.horizontalLayoutPadding, _emotion.notificationTokens.horisontalIconLeftAlignSelf, _emotion.notificationTokens.horisontalActionsAlignSelf, _emotion.notificationTokens.horisontalIconCloseAlignSelf),
+      vertical: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 15rem;\n                ", ": 0.375rem;\n            "])), _emotion.notificationTokens.width, _emotion.notificationTokens.padding)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 0.75rem;\n                ", ": 0rem;\n\n                ", ": 0.125rem;\n                ", ": 0.25rem;\n                ", ": 0rem;\n                ", ": 0.25rem;\n\n                ", ": 0rem;\n            "])), _emotion.notificationTokens.closeIconTop, _emotion.notificationTokens.closeIconRight, _emotion.notificationTokens.borderWidth, _emotion.notificationTokens.padding, _emotion.notificationTokens.textboxPaddingTopWithTopIcon, _emotion.notificationTokens.contentPaddingTop, _emotion.notificationTokens.contentPaddingRight, _emotion.notificationTokens.contentPaddingBottom, _emotion.notificationTokens.contentPaddingLeft, _emotion.notificationTokens.buttonsMarginLeft),
+      xxs: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.875rem;\n                ", ": 1rem;\n                ", ": 0.125rem;\n\n                ", ": 0.75rem 1rem 1rem 1rem;\n                ", ": 0.1875rem;\n\n                ", ": 0.25rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n\n                ", ": 2rem;\n            "])), _emotion.notificationTokens.closeIconTop, _emotion.notificationTokens.closeIconRight, _emotion.notificationTokens.borderWidth, _emotion.notificationTokens.padding, _emotion.notificationTokens.textboxPaddingTopWithTopIcon, _emotion.notificationTokens.contentPaddingTop, _emotion.notificationTokens.contentPaddingRight, _emotion.notificationTokens.contentPaddingBottom, _emotion.notificationTokens.contentPaddingLeft, _emotion.notificationTokens.buttonsMarginLeft)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.notificationTokens.titleColor, _emotion.notificationTokens.contentLeftIconColor, _emotion.notificationTokens.contentColor, _emotion.notificationTokens.background, _emotion.notificationTokens.borderRadius, _emotion.notificationTokens.padding, _emotion.notificationTokens.borderColor, _emotion.notificationTokens.contentPaddingTop, _emotion.notificationTokens.contentPaddingRight, _emotion.notificationTokens.contentPaddingBottom, _emotion.notificationTokens.contentPaddingLeft, _emotion.notificationTokens.contentPaddingTopWithoutIcon, _emotion.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _emotion.notificationTokens.textboxPaddingTop, _emotion.notificationTokens.textboxPaddingRight, _emotion.notificationTokens.textboxPaddingBottom, _emotion.notificationTokens.textboxPaddingLeft, _emotion.notificationTokens.textboxPaddingRightWithCloseIcon, _emotion.notificationTokens.textboxGap, _emotion.notificationTokens.closeIconTop, _emotion.notificationTokens.closeIconRight, _emotion.notificationTokens.buttonsMarginTop, _emotion.notificationTokens.contentLeftIconSize, _emotion.notificationTokens.contentLeftIconMargin, _emotion.notificationTokens.contentTopIconMargin, _emotion.notificationTokens.contentFontFamily, _emotion.notificationTokens.contentFontSize, _emotion.notificationTokens.contentFontStyle, _emotion.notificationTokens.contentFontWeight, _emotion.notificationTokens.contentFontLetterSpacing, _emotion.notificationTokens.contentFontLineHeight, _emotion.notificationTokens.titleFontFamily, _emotion.notificationTokens.titleFontSize, _emotion.notificationTokens.titleFontStyle, _emotion.notificationTokens.titleFontWeight, _emotion.notificationTokens.titleFontLetterSpacing, _emotion.notificationTokens.titleFontLineHeight, _emotion.notificationTokens.closeIconColor, _emotion.notificationTokens.closeIconColorOnHover, _emotion.notificationTokens.horizontalLayoutGap, _emotion.notificationTokens.horizontalLayoutLeftIconMargin, _emotion.notificationTokens.paddingOneLineTextbox)
-        },
-        layout: {
-            horizontal: (0, _emotion.css)(_templateObject1(), _emotion.notificationTokens.width, _emotion.notificationTokens.horizontalLayoutPadding, _emotion.notificationTokens.horisontalIconLeftAlignSelf, _emotion.notificationTokens.horisontalActionsAlignSelf, _emotion.notificationTokens.horisontalIconCloseAlignSelf),
-            vertical: (0, _emotion.css)(_templateObject2(), _emotion.notificationTokens.width, _emotion.notificationTokens.padding)
-        },
-        size: {
-            xs: (0, _emotion.css)(_templateObject3(), _emotion.notificationTokens.closeIconTop, _emotion.notificationTokens.closeIconRight, _emotion.notificationTokens.borderWidth, _emotion.notificationTokens.padding, _emotion.notificationTokens.textboxPaddingTopWithTopIcon, _emotion.notificationTokens.contentPaddingTop, _emotion.notificationTokens.contentPaddingRight, _emotion.notificationTokens.contentPaddingBottom, _emotion.notificationTokens.contentPaddingLeft, _emotion.notificationTokens.buttonsMarginLeft),
-            xxs: (0, _emotion.css)(_templateObject4(), _emotion.notificationTokens.closeIconTop, _emotion.notificationTokens.closeIconRight, _emotion.notificationTokens.borderWidth, _emotion.notificationTokens.padding, _emotion.notificationTokens.textboxPaddingTopWithTopIcon, _emotion.notificationTokens.contentPaddingTop, _emotion.notificationTokens.contentPaddingRight, _emotion.notificationTokens.contentPaddingBottom, _emotion.notificationTokens.contentPaddingLeft, _emotion.notificationTokens.buttonsMarginLeft)
-        },
-        closeIconType: {
-            thin: (0, _emotion.css)(_templateObject5(), _emotion.notificationTokens.closeIconButtonSize, _emotion.notificationTokens.closeIconSize)
-        }
+    closeIconType: {
+      thin: /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n            "])), _emotion.notificationTokens.closeIconButtonSize, _emotion.notificationTokens.closeIconSize)
     }
-};
+  }
+};