@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

package/components/Textarea/__creevey__/Textarea.creevey.mts

@@ -0,0 +1,177 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Textarea', () => {
+  story('DifferentStates', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#TextareaPlain textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('FocusedByTab', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 0, y: 0 })
+        .click()
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused by tab');
+    });
+
+    test('Typed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#TextareaPlain textarea' }))
+        .sendKeys('Test...')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Typed');
+    });
+  });
+
+  story('AutoresizableTextareaStory', () => {
+    test('autoresize', async (context) => {
+      const textArea = () => context.webdriver.findElement({ css: '[data-tid~="TextArea"]' });
+      const before = await textArea().takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="AddButton"]' }))
+        .pause(500)
+        .perform();
+      const addText = await textArea().takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="CollapseButton"]' }))
+        .pause(500)
+        .perform();
+      const collapse = await textArea().takeScreenshot();
+      await context.matchImages({ before, addText, collapse });
+    });
+  });
+
+  story('SelectAllByProp', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focused', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused');
+    });
+  });
+
+  story('SelectAllByButton', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Selected', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="select-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Selected');
+    });
+  });
+
+  story('TextareaWithCounters', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flacky scrollbars height': {
+          in: ['firefox', 'firefox8px', 'firefoxFlat8px', 'firefoxDark'],
+        },
+      },
+    });
+
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterPlain textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('FocusAutoresize', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterAutoresizeTextarea textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'FocusAutoresize');
+    });
+
+    test('FocusWithHelpClosed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterWithHelp textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'CounterWithHelp');
+    });
+
+    test('FocusWithHelpOpened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterWithHelp textarea' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `svg` }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'CounterWithHelpOpened');
+    });
+  });
+});

package/components/Toast/Toast/Toast.js

@@ -74,10 +74,10 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
     };
     return _this;
   }
-  _inheritsLoose(Toast, _React$Component);
+  _inheritsLoose(Toast, _React$Component); /** @deprecated use `push` method in ref or `SingleToast.push` */
   Toast.push = function push(notification, action, showTime) {
     ToastStatic.push(notification, action, showTime);
-  };
+  } /** @deprecated use `close` method in ref or `SingleToast.close` */;
   Toast.close = function close() {
     ToastStatic.close();
   };

package/components/Toast/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","CSSTransition","TransitionGroup","globalObject","ThemeFactory","ThemeContext","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","_class","_Toast","_React$Component","props","_this","call","rootRef","createRef","safelyCall","onClose","state","notification","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","clearTimeout","_setTimer","_this$state$showTime","showTime","setTimeout","_refToast","_toast","id","_inheritsLoose","push","_proto","prototype","componentWillUnmount","render","_this2","createElement","Consumer","theme","create","Provider","value","_renderToast","onPush","_ref","_this$state","toastProps","onMouseEnter","onMouseLeave","children","key","classNames","enter","enterActive","exit","exitActive","timeout","nodeRef","_extends","rootNodeRef","ref","Component","__KONTUR_REACT_UI__","displayName","fn","_len","arguments","length","args","Array","_key","apply"],"sources":["Toast.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n  'aria-label'?: string;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает функцию, которая вызывается при возникновении тоста. */\n  onPush?: (notification: string, action?: Action) => void;\n\n  /** Задает функцию, которая вызывается при закрытии тоста. */\n  onClose?: (notification: string, action?: Action) => void;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.\n * Результат может быть положительным, отрицательным или нейтральным.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов рекомендуется использовать компонент SingleToast - в нём исправлены эти проблемы.\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  public static displayName = 'Toast';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: SafeTimer;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return (\n            <ThemeContext.Provider value={this.theme}>\n              <RenderContainer>\n                <TransitionGroup>{this._renderToast()}</TransitionGroup>\n              </RenderContainer>\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      'aria-label': this.props['aria-label'],\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      globalObject.clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    let showTime = this.state.action ? 7000 : 3000;\n    showTime = this.state.showTime ?? showTime;\n    this._timeout = globalObject.setTimeout(this.close, showTime);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","CSSTransition","TransitionGroup","globalObject","ThemeFactory","ThemeContext","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","_class","_Toast","_React$Component","props","_this","call","rootRef","createRef","safelyCall","onClose","state","notification","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","clearTimeout","_setTimer","_this$state$showTime","showTime","setTimeout","_refToast","_toast","id","_inheritsLoose","push","_proto","prototype","componentWillUnmount","render","_this2","createElement","Consumer","theme","create","Provider","value","_renderToast","onPush","_ref","_this$state","toastProps","onMouseEnter","onMouseLeave","children","key","classNames","enter","enterActive","exit","exitActive","timeout","nodeRef","_extends","rootNodeRef","ref","Component","__KONTUR_REACT_UI__","displayName","fn","_len","arguments","length","args","Array","_key","apply"],"sources":["Toast.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n  'aria-label'?: string;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает функцию, которая вызывается при возникновении тоста. */\n  onPush?: (notification: string, action?: Action) => void;\n\n  /** Задает функцию, которая вызывается при закрытии тоста. */\n  onClose?: (notification: string, action?: Action) => void;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.\n * Результат может быть положительным, отрицательным или нейтральным.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов рекомендуется использовать компонент SingleToast - в нём исправлены эти проблемы.\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  public static displayName = 'Toast';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  /** @deprecated use `push` method in ref or `SingleToast.push` */\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  /** @deprecated use `close` method in ref or `SingleToast.close` */\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: SafeTimer;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return (\n            <ThemeContext.Provider value={this.theme}>\n              <RenderContainer>\n                <TransitionGroup>{this._renderToast()}</TransitionGroup>\n              </RenderContainer>\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      'aria-label': this.props['aria-label'],\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      globalObject.clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    let showTime = this.state.action ? 7000 : 3000;\n    showTime = this.state.showTime ?? showTime;\n    this._timeout = globalObject.setTimeout(this.close, showTime);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Toast/Toast.d.ts

@@ -42,7 +42,9 @@ export declare class Toast extends React.Component<ToastProps, ToastState> {
     static displayName: string;
     private setRootNode;
     private theme;
+    /** @deprecated use `push` method in ref or `SingleToast.push` */
     static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
+    /** @deprecated use `close` method in ref or `SingleToast.close` */
     static close(): void;
     _toast: Nullable<ToastView>;
     private _timeout;

package/components/Toast/Toast.styles/Toast.styles.js

@@ -1,17 +1,46 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   enter: function enter() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      transform: translateY(-40px);\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "vulud0",
+      styles: "transform:translateY(-40px)"
+    } : {
+      name: "bis47w-enter",
+      styles: "transform:translateY(-40px);label:enter;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   enterActive: function enterActive() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "tofws6",
+      styles: "transition:transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);transform:translateY(0)!important"
+    } : {
+      name: "1d0rqaf-enterActive",
+      styles: "transition:transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);transform:translateY(0)!important;label:enterActive;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   exit: function exit() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      transform: translateY(0);\n      opacity: 1;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "folgfg",
+      styles: "transform:translateY(0);opacity:1"
+    } : {
+      name: "bdw22t-exit",
+      styles: "transform:translateY(0);opacity:1;label:exit;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   exitActive: function exitActive() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "1xwlk2i",
+      styles: "opacity:0.01!important;transition:opacity 0.15s ease-out"
+    } : {
+      name: "lh9jk6-exitActive",
+      styles: "opacity:0.01!important;transition:opacity 0.15s ease-out;label:exitActive;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   }
 });

package/components/Toast/Toast.styles/Toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","enter","_templateObject","_taggedTemplateLiteralLoose","enterActive","_templateObject2","exit","_templateObject3","exitActive","_templateObject4"],"sources":["Toast.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;EACDC,WAAW,WAAAA,YAAA,EAAG;IACZ,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;EACDG,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;EAIZ,CAAC;EACDK,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;EAIZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","enter","process","env","NODE_ENV","name","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","enterActive","exit","exitActive"],"sources":["Toast.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"],"mappings":"uRAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,KAAK,WAAAA,MAAA,EAAG;IACN,oBAAOH,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,YAAAL,MAAA,sCAAAK,IAAA,kBAAAL,MAAA,8CAAAM,QAAA,EAAAC,gCAAA;;;EAGZ,CAAC;EACDC,WAAW,WAAAA,YAAA,EAAG;IACZ,oBAAOV,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,YAAAL,MAAA,wGAAAK,IAAA,yBAAAL,MAAA,sHAAAM,QAAA,EAAAC,gCAAA;;;;EAIZ,CAAC;EACDE,IAAI,WAAAA,KAAA,EAAG;IACL,oBAAOX,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,YAAAL,MAAA,4CAAAK,IAAA,iBAAAL,MAAA,mDAAAM,QAAA,EAAAC,gCAAA;;;;EAIZ,CAAC;EACDG,UAAU,WAAAA,WAAA,EAAG;IACX,oBAAOZ,GAAG,CAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,IAAA,aAAAL,MAAA,mEAAAK,IAAA,uBAAAL,MAAA,gFAAAM,QAAA,EAAAC,gCAAA;;;;EAIZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Toast/ToastView.styles/ToastView.styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 var getVerticalPaddings = function getVerticalPaddings(theme) {
   var toastPaddingY = theme.toastPaddingY;
@@ -11,22 +9,22 @@ export var styles = memoizeStyle({
     var _getVerticalPaddings = getVerticalPaddings(t),
       paddingTop = _getVerticalPaddings[0],
       paddingBottom = _getVerticalPaddings[1];
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      border: ", ";\n      color: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBg, t.toastBorderRadius, t.toastBorder, t.toastColor, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
+    return /*#__PURE__*/css("background:", t.toastBg, ";border-radius:", t.toastBorderRadius, ";border:", t.toastBorder, ";color:", t.toastColor, ";display:inline-flex;font-size:", t.toastFontSize, ";line-height:", t.toastLineHeight, ";opacity:1;padding:", paddingTop, " ", t.toastPaddingX, " ", paddingBottom, ";position:relative;top:", t.toastTop, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:root;"));
   },
   wrapper: function wrapper(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
+    return /*#__PURE__*/css("position:fixed;top:0;left:0;right:0;height:0;text-align:center;border-radius:", t.toastBorderRadius, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:wrapper;"));
   },
   closeWrapper: function closeWrapper(t) {
     var _getVerticalPaddings2 = getVerticalPaddings(t),
       paddingTop = _getVerticalPaddings2[0],
       paddingBottom = _getVerticalPaddings2[1];
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      margin: -", " -", " -", " -", ";\n    "])), paddingTop, t.toastPaddingX, paddingBottom, t.toastClosePadding);
+    return /*#__PURE__*/css("display:flex;margin:-", paddingTop, " -", t.toastPaddingX, " -", paddingBottom, " -", t.toastClosePadding, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:closeWrapper;"));
   },
   link: function link(t) {
     var _getVerticalPaddings3 = getVerticalPaddings(t),
       paddingTop = _getVerticalPaddings3[0],
       paddingBottom = _getVerticalPaddings3[1];
     var padding = paddingTop + " " + t.toastLinkPadding;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, paddingTop, t.toastPaddingX, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
+    return /*#__PURE__*/css("border:none;font:inherit;color:", t.toastLinkColor, ";cursor:pointer;display:inline-block;font-weight:600;background-color:transparent;margin:-", paddingTop, " ", t.toastPaddingX, " -", paddingBottom, " ", t.toastPaddingX, ";padding:", padding, ";transition:background ", t.transitionDuration, " ", t.transitionTimingFunction, ";&:hover{background:", t.toastLinkBgHover, ";text-decoration:", t.toastLinkTextDecorationHover, ";}&:active{background:", t.toastLinkBgActive, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:link;"));
   }
 });

package/components/Toast/ToastView.styles/ToastView.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","getVerticalPaddings","theme","toastPaddingY","paddingY","parseInt","styles","root","t","_getVerticalPaddings","paddingTop","paddingBottom","_templateObject","_taggedTemplateLiteralLoose","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","_templateObject2","closeWrapper","_getVerticalPaddings2","_templateObject3","toastClosePadding","link","_getVerticalPaddings3","padding","toastLinkPadding","_templateObject4","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive"],"sources":["ToastView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} ${t.toastPaddingX} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAAY,EAAK;EAC5C,IAAQC,aAAa,GAAKD,KAAK,CAAvBC,aAAa;EACrB,IAAMC,QAAQ,GAAGC,QAAQ,CAACF,aAAa,CAAC;;EAExC,OAAO,CAAIC,QAAQ,SAASA,QAAQ,QAAK;AAC3C,CAAC;;AAED,OAAO,IAAME,MAAM,GAAGN,YAAY,CAAC;EACjCO,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,IAAAC,oBAAA,GAAoCR,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAD,oBAAA,IAAEE,aAAa,GAAAF,oBAAA;IAChC,OAAOV,GAAG,CAAAa,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACML,CAAC,CAACM,OAAO;IACNN,CAAC,CAACO,iBAAiB;IAC1BP,CAAC,CAACQ,WAAW;IACdR,CAAC,CAACS,UAAU;;IAERT,CAAC,CAACU,aAAa;IACbV,CAAC,CAACW,eAAe;;IAErBT,UAAU,EAAIF,CAAC,CAACY,aAAa,EAAIT,aAAa;;IAElDH,CAAC,CAACa,QAAQ;;EAErB,CAAC;;EAEDC,OAAO,WAAAA,QAACd,CAAQ,EAAE;IAChB,OAAOT,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;;;;;IAOSL,CAAC,CAACO,iBAAiB;;EAExC,CAAC;;EAEDS,YAAY,WAAAA,aAAChB,CAAQ,EAAE;IACrB,IAAAiB,qBAAA,GAAoCxB,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAe,qBAAA,IAAEd,aAAa,GAAAc,qBAAA;IAChC,OAAO1B,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;;IAEGH,UAAU,EAAKF,CAAC,CAACY,aAAa,EAAKT,aAAa,EAAKH,CAAC,CAACmB,iBAAiB;;EAEvF,CAAC;;EAEDC,IAAI,WAAAA,KAACpB,CAAQ,EAAE;IACb,IAAAqB,qBAAA,GAAoC5B,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAmB,qBAAA,IAAElB,aAAa,GAAAkB,qBAAA;IAChC,IAAMC,OAAO,GAAMpB,UAAU,SAAIF,CAAC,CAACuB,gBAAkB;;IAErD,OAAOhC,GAAG,CAAAiC,gBAAA,KAAAA,gBAAA,GAAAnB,2BAAA;;;IAGCL,CAAC,CAACyB,cAAc;;;;;;IAMdvB,UAAU,EAAIF,CAAC,CAACY,aAAa,EAAKT,aAAa,EAAIH,CAAC,CAACY,aAAa;;IAElEU,OAAO;IACOtB,CAAC,CAAC0B,kBAAkB,EAAI1B,CAAC,CAAC2B,wBAAwB;;IAE3D3B,CAAC,CAAC4B,gBAAgB;IACb5B,CAAC,CAAC6B,4BAA4B;;;;IAInC7B,CAAC,CAAC8B,iBAAiB;;;EAGvC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","getVerticalPaddings","theme","toastPaddingY","paddingY","parseInt","styles","root","t","_getVerticalPaddings","paddingTop","paddingBottom","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","process","env","NODE_ENV","wrapper","closeWrapper","_getVerticalPaddings2","toastClosePadding","link","_getVerticalPaddings3","padding","toastLinkPadding","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive"],"sources":["ToastView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} ${t.toastPaddingX} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n});\n"],"mappings":"AAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAAY,EAAK;EAC5C,IAAQC,aAAa,GAAKD,KAAK,CAAvBC,aAAa;EACrB,IAAMC,QAAQ,GAAGC,QAAQ,CAACF,aAAa,CAAC;;EAExC,OAAO,CAAIC,QAAQ,SAASA,QAAQ,QAAK;AAC3C,CAAC;;AAED,OAAO,IAAME,MAAM,GAAGN,YAAY,CAAC;EACjCO,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,IAAAC,oBAAA,GAAoCR,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAD,oBAAA,IAAEE,aAAa,GAAAF,oBAAA;IAChC,oBAAOV,GAAG;IACMS,CAAC,CAACI,OAAO;IACNJ,CAAC,CAACK,iBAAiB;IAC1BL,CAAC,CAACM,WAAW;IACdN,CAAC,CAACO,UAAU;;IAERP,CAAC,CAACQ,aAAa;IACbR,CAAC,CAACS,eAAe;;IAErBP,UAAU,OAAIF,CAAC,CAACU,aAAa,OAAIP,aAAa;;IAElDH,CAAC,CAACW,QAAQ,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAErB,CAAC;;EAEDC,OAAO,WAAAA,QAACf,CAAQ,EAAE;IAChB,oBAAOT,GAAG;;;;;;;IAOSS,CAAC,CAACK,iBAAiB,SAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAExC,CAAC;;EAEDE,YAAY,WAAAA,aAAChB,CAAQ,EAAE;IACrB,IAAAiB,qBAAA,GAAoCxB,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAe,qBAAA,IAAEd,aAAa,GAAAc,qBAAA;IAChC,oBAAO1B,GAAG;;IAEGW,UAAU,QAAKF,CAAC,CAACU,aAAa,QAAKP,aAAa,QAAKH,CAAC,CAACkB,iBAAiB,SAAAN,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAEvF,CAAC;;EAEDK,IAAI,WAAAA,KAACnB,CAAQ,EAAE;IACb,IAAAoB,qBAAA,GAAoC3B,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAkB,qBAAA,IAAEjB,aAAa,GAAAiB,qBAAA;IAChC,IAAMC,OAAO,GAAMnB,UAAU,SAAIF,CAAC,CAACsB,gBAAkB;;IAErD,oBAAO/B,GAAG;;;IAGCS,CAAC,CAACuB,cAAc;;;;;;IAMdrB,UAAU,OAAIF,CAAC,CAACU,aAAa,QAAKP,aAAa,OAAIH,CAAC,CAACU,aAAa;;IAElEW,OAAO;IACOrB,CAAC,CAACwB,kBAAkB,OAAIxB,CAAC,CAACyB,wBAAwB;;IAE3DzB,CAAC,CAAC0B,gBAAgB;IACb1B,CAAC,CAAC2B,4BAA4B;;;;IAInC3B,CAAC,CAAC4B,iBAAiB,UAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;EAGvC;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Toast/__creevey__/Toast.creevey.mts

@@ -0,0 +1,54 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const kindTests = () => {
+  test('toastShown', async (context) => {
+    const showToast = context.webdriver.findElement({ css: '[data-tid~="show-toast"]' });
+    await context.webdriver.actions({ bridge: true }).click(showToast).move({ x: 0, y: 0 }).click().perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot());
+  });
+};
+
+kind('Toast', () => {
+  story('SimpleNotification', () => {
+    kindTests();
+  });
+
+  story('TestNotifier', () => {
+    kindTests();
+  });
+
+  story('ComplexNotification', () => {
+    kindTests();
+  });
+
+  story('complex', () => {
+    kindTests();
+  });
+
+  story('StaticMethod', () => {
+    kindTests();
+  });
+
+  story('button', () => {
+    kindTests();
+  });
+
+  story('data-tid', () => {
+    kindTests();
+  });
+
+  story('onClick', () => {
+    kindTests();
+  });
+
+  story('Toast', () => {
+    kindTests();
+  });
+
+  story('push', () => {
+    kindTests();
+  });
+});

package/components/Toggle/Toggle.mixins/Toggle.mixins.js

@@ -1,28 +1,26 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { css } from "../../../lib/theming/Emotion";
 import { isChrome } from "../../../lib/client";
 import { globalClasses } from "../Toggle.styles";
 export var toggleSizeMixin = function toggleSizeMixin(fontSize, toggleHeight, toggleWidth) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n\n    &::before {\n      width: ", ";\n    }\n  "])), toggleHeight, fontSize, toggleWidth);
+  return /*#__PURE__*/css("line-height:", toggleHeight, ";font-size:", fontSize, ";&::before{width:", toggleWidth, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleSizeMixin;"));
 };
 export var buttonSizeMixin = function buttonSizeMixin(labGrotesqueBaselineCompensation, fontSize, toggleHeight, toggleWidth, toggleBorderRadius, toggleButtonOffsetY) {
   var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
   var buttonFontSize = parseInt(fontSize);
   var baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    width: ", ";\n    flex: 1 0 ", ";\n\n    border-radius: ", ";\n    line-height: ", ";\n\n    margin-top: calc(", " + ", "px);\n  "])), toggleHeight, toggleWidth, toggleWidth, toggleBorderRadius, toggleHeight, toggleButtonOffsetY, baselineCompensation);
+  return /*#__PURE__*/css("height:", toggleHeight, ";width:", toggleWidth, ";flex:1 0 ", toggleWidth, ";border-radius:", toggleBorderRadius, ";line-height:", toggleHeight, ";margin-top:calc(", toggleButtonOffsetY, " + ", baselineCompensation, "px);" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonSizeMixin;"));
 };
 export var captionSizeMixin = function captionSizeMixin(fontSize, toggleHeight) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n  "])), toggleHeight, fontSize);
+  return /*#__PURE__*/css("line-height:", toggleHeight, ";font-size:", fontSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:captionSizeMixin;"));
 };
 export var handleMixin = function handleMixin(toggleHandleSize, toggleHandleBorderRadius) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n    height: ", ";\n    width: ", ";\n  "])), toggleHandleBorderRadius, toggleHandleSize, toggleHandleSize);
+  return /*#__PURE__*/css("border-radius:", toggleHandleBorderRadius, ";height:", toggleHandleSize, ";width:", toggleHandleSize, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:handleMixin;"));
 };
 export var containerSizeMixin = function containerSizeMixin(toggleBorderRadius) {
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    border-radius: ", ";\n  "])), toggleBorderRadius);
+  return /*#__PURE__*/css("border-radius:", toggleBorderRadius, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:containerSizeMixin;"));
 };
 export var inputSizeMixin = function inputSizeMixin(toggleHeight, toggleWidth) {
   var handleWidthWithBorders = toggleHeight;
   var height = parseInt(toggleHeight);
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    &:checked ~ .", " .", " {\n      border-radius: ", "px 0 0 ", "px;\n    }\n    &:checked ~ .", " {\n      transform: translateX(", ") translateX(-", ");\n    }\n  "])), globalClasses.containerDisabled, globalClasses.background, height * 0.5, height * 0.5, globalClasses.handle, toggleWidth, handleWidthWithBorders);
+  return /*#__PURE__*/css("&:checked~.", globalClasses.containerDisabled, " .", globalClasses.background, "{border-radius:", height * 0.5, "px 0 0 ", height * 0.5, "px;}&:checked~.", globalClasses.handle, "{transform:translateX(", toggleWidth, ") translateX(-", handleWidthWithBorders, ");}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputSizeMixin;"));
 };

package/components/Toggle/Toggle.mixins/Toggle.mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","isChrome","globalClasses","toggleSizeMixin","fontSize","toggleHeight","toggleWidth","_templateObject","_taggedTemplateLiteralLoose","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","_templateObject2","captionSizeMixin","_templateObject3","handleMixin","toggleHandleSize","toggleHandleBorderRadius","_templateObject4","containerSizeMixin","_templateObject5","inputSizeMixin","handleWidthWithBorders","height","_templateObject6","containerDisabled","background","handle"],"sources":["Toggle.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { isChrome } from '../../lib/client';\n\nimport { globalClasses } from './Toggle.styles';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  toggleHeight: string,\n  toggleWidth: string,\n  toggleBorderRadius: string,\n  toggleButtonOffsetY: string,\n) => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const buttonFontSize = parseInt(fontSize);\n  const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n  return css`\n    height: ${toggleHeight};\n    width: ${toggleWidth};\n    flex: 1 0 ${toggleWidth};\n\n    border-radius: ${toggleBorderRadius};\n    line-height: ${toggleHeight};\n\n    margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n  `;\n};\n\nexport const captionSizeMixin = (fontSize: string, toggleHeight: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string) => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return css`\n    &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n      border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n    }\n    &:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n    }\n  `;\n};\n"],"mappings":"8MAAA,SAASA,GAAG,QAAQ,2BAA2B;AAC/C,SAASC,QAAQ,QAAQ,kBAAkB;;AAE3C,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,YAAoB,EAAEC,WAAmB,EAAK;EAC9F,OAAON,GAAG,CAAAO,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACOH,YAAY;EACdD,QAAQ;;;EAGVE,WAAW;;;AAG1B,CAAC;;AAED,OAAO,IAAMG,eAAe,GAAG,SAAlBA,eAAeA;AAC1BC,gCAAwC;AACxCN,QAAgB;AAChBC,YAAoB;AACpBC,WAAmB;AACnBK,kBAA0B;AAC1BC,mBAA2B;AACxB;EACH,IAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAgC,CAAC;EAC5E,IAAMK,cAAc,GAAGD,QAAQ,CAACV,QAAQ,CAAC;EACzC,IAAMY,oBAAoB,GAAGD,cAAc,IAAI,EAAE,IAAId,QAAQ,GAAG,CAACY,yBAAyB,GAAG,CAAC;EAC9F,OAAOb,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;EACEH,YAAY;EACbC,WAAW;EACRA,WAAW;;EAENK,kBAAkB;EACpBN,YAAY;;EAERO,mBAAmB,EAAMI,oBAAoB;;AAEpE,CAAC;;AAED,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAId,QAAgB,EAAEC,YAAoB,EAAK;EAC1E,OAAOL,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;EACOH,YAAY;EACdD,QAAQ;;AAEzB,CAAC;;AAED,OAAO,IAAMgB,WAAW,GAAG,SAAdA,WAAWA,CAAIC,gBAAwB,EAAEC,wBAAgC,EAAK;EACzF,OAAOtB,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;EACSc,wBAAwB;EAC/BD,gBAAgB;EACjBA,gBAAgB;;AAE7B,CAAC;;AAED,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIb,kBAA0B,EAAK;EAChE,OAAOX,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;EACSG,kBAAkB;;AAEvC,CAAC;;AAED,OAAO,IAAMe,cAAc,GAAG,SAAjBA,cAAcA,CAAIrB,YAAoB,EAAEC,WAAmB,EAAK;EAC3E,IAAMqB,sBAAsB,GAAGtB,YAAY;EAC3C,IAAMuB,MAAM,GAAGd,QAAQ,CAACT,YAAY,CAAC;EACrC,OAAOL,GAAG,CAAA6B,gBAAA,KAAAA,gBAAA,GAAArB,2BAAA;EACON,aAAa,CAAC4B,iBAAiB,EAAK5B,aAAa,CAAC6B,UAAU;EACxDH,MAAM,GAAG,GAAG,EAAUA,MAAM,GAAG,GAAG;;EAEtC1B,aAAa,CAAC8B,MAAM;EACT1B,WAAW,EAAiBqB,sBAAsB;;;AAGhF,CAAC","ignoreList":[]}
+{"version":3,"names":["css","isChrome","globalClasses","toggleSizeMixin","fontSize","toggleHeight","toggleWidth","process","env","NODE_ENV","buttonSizeMixin","labGrotesqueBaselineCompensation","toggleBorderRadius","toggleButtonOffsetY","labGrotesqueCompenstation","parseInt","buttonFontSize","baselineCompensation","captionSizeMixin","handleMixin","toggleHandleSize","toggleHandleBorderRadius","containerSizeMixin","inputSizeMixin","handleWidthWithBorders","height","containerDisabled","background","handle"],"sources":["Toggle.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { isChrome } from '../../lib/client';\n\nimport { globalClasses } from './Toggle.styles';\n\nexport const toggleSizeMixin = (fontSize: string, toggleHeight: string, toggleWidth: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n\n    &::before {\n      width: ${toggleWidth};\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  toggleHeight: string,\n  toggleWidth: string,\n  toggleBorderRadius: string,\n  toggleButtonOffsetY: string,\n) => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const buttonFontSize = parseInt(fontSize);\n  const baselineCompensation = buttonFontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n  return css`\n    height: ${toggleHeight};\n    width: ${toggleWidth};\n    flex: 1 0 ${toggleWidth};\n\n    border-radius: ${toggleBorderRadius};\n    line-height: ${toggleHeight};\n\n    margin-top: calc(${toggleButtonOffsetY} + ${baselineCompensation}px);\n  `;\n};\n\nexport const captionSizeMixin = (fontSize: string, toggleHeight: string) => {\n  return css`\n    line-height: ${toggleHeight};\n    font-size: ${fontSize};\n  `;\n};\n\nexport const handleMixin = (toggleHandleSize: string, toggleHandleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleHandleBorderRadius};\n    height: ${toggleHandleSize};\n    width: ${toggleHandleSize};\n  `;\n};\n\nexport const containerSizeMixin = (toggleBorderRadius: string) => {\n  return css`\n    border-radius: ${toggleBorderRadius};\n  `;\n};\n\nexport const inputSizeMixin = (toggleHeight: string, toggleWidth: string) => {\n  const handleWidthWithBorders = toggleHeight;\n  const height = parseInt(toggleHeight);\n  return css`\n    &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n      border-radius: ${height * 0.5}px 0 0 ${height * 0.5}px;\n    }\n    &:checked ~ .${globalClasses.handle} {\n      transform: translateX(${toggleWidth}) translateX(-${handleWidthWithBorders});\n    }\n  `;\n};\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,2BAA2B;AAC/C,SAASC,QAAQ,QAAQ,kBAAkB;;AAE3C,SAASC,aAAa,QAAQ,iBAAiB;;AAE/C,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB,EAAEC,YAAoB,EAAEC,WAAmB,EAAK;EAC9F,oBAAON,GAAG;EACOK,YAAY;EACdD,QAAQ;;;EAGVE,WAAW,UAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;AAG1B,CAAC;;AAED,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA;AAC1BC,gCAAwC;AACxCP,QAAgB;AAChBC,YAAoB;AACpBC,WAAmB;AACnBM,kBAA0B;AAC1BC,mBAA2B;AACxB;EACH,IAAMC,yBAAyB,GAAGC,QAAQ,CAACJ,gCAAgC,CAAC;EAC5E,IAAMK,cAAc,GAAGD,QAAQ,CAACX,QAAQ,CAAC;EACzC,IAAMa,oBAAoB,GAAGD,cAAc,IAAI,EAAE,IAAIf,QAAQ,GAAG,CAACa,yBAAyB,GAAG,CAAC;EAC9F,oBAAOd,GAAG;EACEK,YAAY;EACbC,WAAW;EACRA,WAAW;;EAENM,kBAAkB;EACpBP,YAAY;;EAERQ,mBAAmB,SAAMI,oBAAoB,YAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAEpE,CAAC;;AAED,OAAO,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAId,QAAgB,EAAEC,YAAoB,EAAK;EAC1E,oBAAOL,GAAG;EACOK,YAAY;EACdD,QAAQ,SAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAEzB,CAAC;;AAED,OAAO,IAAMU,WAAW,GAAG,SAAdA,WAAWA,CAAIC,gBAAwB,EAAEC,wBAAgC,EAAK;EACzF,oBAAOrB,GAAG;EACSqB,wBAAwB;EAC/BD,gBAAgB;EACjBA,gBAAgB,SAAAb,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAE7B,CAAC;;AAED,OAAO,IAAMa,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIV,kBAA0B,EAAK;EAChE,oBAAOZ,GAAG;EACSY,kBAAkB,SAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAEvC,CAAC;;AAED,OAAO,IAAMc,cAAc,GAAG,SAAjBA,cAAcA,CAAIlB,YAAoB,EAAEC,WAAmB,EAAK;EAC3E,IAAMkB,sBAAsB,GAAGnB,YAAY;EAC3C,IAAMoB,MAAM,GAAGV,QAAQ,CAACV,YAAY,CAAC;EACrC,oBAAOL,GAAG;EACOE,aAAa,CAACwB,iBAAiB,QAAKxB,aAAa,CAACyB,UAAU;EACxDF,MAAM,GAAG,GAAG,aAAUA,MAAM,GAAG,GAAG;;EAEtCvB,aAAa,CAAC0B,MAAM;EACTtB,WAAW,oBAAiBkB,sBAAsB,WAAAjB,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;AAGhF,CAAC","ignoreList":[]}