@skbkontur/react-ui 5.6.0 → 5.6.1-85c65.0

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","_class","_TooltipMenu","_React$Component","props","_this","call","getProps","defaultProps","caption","Error","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","Provider","value","create","popupPinOffsetX","tooltipMenuPinOffsetX","popupPinOffsetY","tooltipMenuPinOffsetY","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","_this$getProps","disableAnimations","_extends","rootNodeRef","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","popupHasPin","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["TooltipMenu.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { PopupMenuProps } from '../../internal/PopupMenu';\nimport { PopupMenu } from '../../internal/PopupMenu';\nimport type { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport type { MenuHeaderProps } from '../MenuHeader';\nimport type { PopupPositionsType } from '../../internal/Popup';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  /** @ignore */\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Задает максимальную высоту меню. */\n  menuMaxHeight?: number | string;\n  /** Задает ширину меню. */\n  menuWidth?: number | string;\n  /** Задает элемент или функцию возвращающую элемент, которые используется вместо `caption`.\n   * В случае функции, внутри нее необходимо управлять открытием и закрытием меню. */\n  caption: PopupMenuProps['caption'];\n  /** Задает элемент, который будет отрендерен в шапке меню.\n   * _Примечание_: контрол MenuHeader передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`. */\n  header?: React.ReactNode;\n  /** Задает элемент, который будет отрендерен в подвале меню.\n   * Перед элементом переданным в `footer` будет отрендерен MenuSeparator. */\n  footer?: React.ReactNode;\n  /** Определяет список позиций, доступных для расположения выпадашки относительно caption.\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка. */\n  positions?: PopupPositionsType[];\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню `TooltipMenu` раскрывается по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  public static displayName = 'TooltipMenu';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffsetX: theme.tooltipMenuPinOffsetX,\n                  popupPinOffsetY: theme.tooltipMenuPinOffsetY,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","warning","ThemeFactory","ThemeContext","PopupMenu","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","_class","_TooltipMenu","_React$Component","props","_this","call","getProps","defaultProps","caption","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","Provider","value","create","popupPinOffsetX","tooltipMenuPinOffsetX","popupPinOffsetY","tooltipMenuPinOffsetY","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","_this$getProps","disableAnimations","_extends","rootNodeRef","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","popupHasPin","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["TooltipMenu.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { PopupMenuProps } from '../../internal/PopupMenu';\nimport { PopupMenu } from '../../internal/PopupMenu';\nimport type { MenuItemProps } from '../MenuItem';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport type { MenuHeaderProps } from '../MenuHeader';\nimport type { PopupPositionsType } from '../../internal/Popup';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  /** @ignore */\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Задает максимальную высоту меню. */\n  menuMaxHeight?: number | string;\n  /** Задает ширину меню. */\n  menuWidth?: number | string;\n  /** Задает элемент или функцию возвращающую элемент, которые используется вместо `caption`.\n   * В случае функции, внутри нее необходимо управлять открытием и закрытием меню. */\n  caption: PopupMenuProps['caption'];\n  /** Задает элемент, который будет отрендерен в шапке меню.\n   * _Примечание_: контрол MenuHeader передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`. */\n  header?: React.ReactNode;\n  /** Задает элемент, который будет отрендерен в подвале меню.\n   * Перед элементом переданным в `footer` будет отрендерен MenuSeparator. */\n  footer?: React.ReactNode;\n  /** Определяет список позиций, доступных для расположения выпадашки относительно caption.\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка. */\n  positions?: PopupPositionsType[];\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню `TooltipMenu` раскрывается по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  public static displayName = 'TooltipMenu';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption) {\n      warning(false, 'Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffsetX: theme.tooltipMenuPinOffsetX,\n                  popupPinOffsetY: theme.tooltipMenuPinOffsetY,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): React.JSX.Element | null {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/__stories__/Form/Form.js

@@ -1,26 +1,27 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _class, _Form;
 var _excluded = ["children", "className"],
   _excluded2 = ["children", "className"],
   _excluded3 = ["children", "className"],
   _excluded4 = ["children", "className"],
   _excluded5 = ["children", "className"],
   _excluded6 = ["children", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import React from 'react';
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-var line = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: baseline;\n  margin-bottom: 10px;\n"])));
-var title = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  margin-right: 10px;\n  width: 150px;\n  text-align: right;\n"])));
-var content = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n"])));
-var formLineBreak = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  height: 20px;\n"])));
-var actionsBar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  padding-left: 160px;\n"])));
-var formWrapper = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+import { useEmotion, withRenderEnvironment } from "../../../lib/renderEnvironment";
+var line = "\n  display: flex;\n  align-items: baseline;\n  margin-bottom: 10px;\n";
+var title = "\n  box-sizing: border-box;\n  margin-right: 10px;\n  width: 150px;\n  text-align: right;\n";
+var content = "\n  display: inline-flex;\n";
+var formLineBreak = "\n  height: 20px;\n";
+var actionsBar = "\n  margin-top: 10px;\n  padding-left: 160px;\n";
+var formWrapper = "\n  display: flex;\n  flex-direction: column;\n";
 var FormLine = function FormLine(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useEmotion = useEmotion(),
+    css = _useEmotion.css;
   return /*#__PURE__*/(
     React.createElement("div", _extends({
       className: css(line, className)
@@ -31,6 +32,8 @@ var Line = function Line(_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var _useEmotion2 = useEmotion(),
+    css = _useEmotion2.css;
   return /*#__PURE__*/(
     React.createElement("div", _extends({
       className: css(line, className)
@@ -41,6 +44,8 @@ var Title = function Title(_ref3) {
   var children = _ref3.children,
     className = _ref3.className,
     rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var _useEmotion3 = useEmotion(),
+    css = _useEmotion3.css;
   return /*#__PURE__*/(
     React.createElement("span", _extends({
       className: css(title, className)
@@ -51,6 +56,8 @@ var Content = function Content(_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
     rest = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  var _useEmotion4 = useEmotion(),
+    css = _useEmotion4.css;
   return /*#__PURE__*/(
     React.createElement("span", _extends({
       className: css(content, className)
@@ -61,6 +68,8 @@ var LineBreak = function LineBreak(_ref5) {
   var children = _ref5.children,
     className = _ref5.className,
     rest = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  var _useEmotion5 = useEmotion(),
+    css = _useEmotion5.css;
   return /*#__PURE__*/(
     React.createElement("div", _extends({
       className: css(formLineBreak, className)
@@ -71,13 +80,15 @@ var ActionsBar = function ActionsBar(_ref6) {
   var children = _ref6.children,
     className = _ref6.className,
     rest = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  var _useEmotion6 = useEmotion(),
+    css = _useEmotion6.css;
   return /*#__PURE__*/(
     React.createElement("div", _extends({
       className: css(actionsBar, className)
     }, rest), children)
   );
 };
-export var Form = /*#__PURE__*/function (_React$Component) {
+export var Form = withRenderEnvironment(_class = (_Form = /*#__PURE__*/function (_React$Component) {
   function Form() {
     return _React$Component.apply(this, arguments) || this;
   }
@@ -85,14 +96,8 @@ export var Form = /*#__PURE__*/function (_React$Component) {
   var _proto = Form.prototype;
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: css(formWrapper, this.props.className)
+      className: this.emotion.css(formWrapper, this.props.className)
     }, this.props.children);
   };
   return Form;
-}(React.Component);
-Form.Line = Line;
-Form.LineBreak = LineBreak;
-Form.ActionsBar = ActionsBar;
-Form.FormLine = FormLine;
-Form.Title = Title;
-Form.Content = Content;
+}(React.Component), _Form.Line = Line, _Form.LineBreak = LineBreak, _Form.ActionsBar = ActionsBar, _Form.FormLine = FormLine, _Form.Title = Title, _Form.Content = Content, _Form)) || _class;

package/components/__stories__/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","css","line","_templateObject","_taggedTemplateLiteralLoose","title","_templateObject2","content","_templateObject3","formLineBreak","_templateObject4","actionsBar","_templateObject5","formWrapper","_templateObject6","FormLine","_ref","children","className","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","Line","_ref2","_excluded2","Title","_ref3","_excluded3","Content","_ref4","_excluded4","LineBreak","_ref5","_excluded5","ActionsBar","_ref6","_excluded6","Form","_React$Component","apply","arguments","_inheritsLoose","_proto","prototype","render","props","Component"],"sources":["Form.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@skbkontur/react-ui/lib/theming/Emotion';\n\nconst line = css`\n  display: flex;\n  align-items: baseline;\n  margin-bottom: 10px;\n`;\n\nconst title = css`\n  box-sizing: border-box;\n  margin-right: 10px;\n  width: 150px;\n  text-align: right;\n`;\n\nconst content = css`\n  display: inline-flex;\n`;\n\nconst formLineBreak = css`\n  height: 20px;\n`;\n\nconst actionsBar = css`\n  margin-top: 10px;\n  padding-left: 160px;\n`;\n\nconst formWrapper = css`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype ComponentProps = React.PropsWithChildren<React.HTMLAttributes<HTMLElement>>;\n\nconst FormLine = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Line = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Title = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <span className={css(title, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst Content = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <span className={css(content, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst LineBreak = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(formLineBreak, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst ActionsBar = ({ children, className, ...rest }: ComponentProps) => {\n  return (\n    <div className={css(actionsBar, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nexport class Form extends React.Component<ComponentProps> {\n  public static Line = Line;\n  public static LineBreak = LineBreak;\n  public static ActionsBar = ActionsBar;\n  public static FormLine = FormLine;\n  public static Title = Title;\n  public static Content = Content;\n\n  public render() {\n    return <div className={css(formWrapper, this.props.className)}>{this.props.children}</div>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEmotion","withRenderEnvironment","line","title","content","formLineBreak","actionsBar","formWrapper","FormLine","_ref","children","className","rest","_objectWithoutPropertiesLoose","_excluded","_useEmotion","css","createElement","_extends","Line","_ref2","_excluded2","_useEmotion2","Title","_ref3","_excluded3","_useEmotion3","Content","_ref4","_excluded4","_useEmotion4","LineBreak","_ref5","_excluded5","_useEmotion5","ActionsBar","_ref6","_excluded6","_useEmotion6","Form","_class","_Form","_React$Component","apply","arguments","_inheritsLoose","_proto","prototype","render","emotion","props","Component"],"sources":["Form.tsx"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\nimport React from 'react';\n\nimport { useEmotion, withRenderEnvironment } from '../../lib/renderEnvironment';\n\nconst line = `\n  display: flex;\n  align-items: baseline;\n  margin-bottom: 10px;\n`;\n\nconst title = `\n  box-sizing: border-box;\n  margin-right: 10px;\n  width: 150px;\n  text-align: right;\n`;\n\nconst content = `\n  display: inline-flex;\n`;\n\nconst formLineBreak = `\n  height: 20px;\n`;\n\nconst actionsBar = `\n  margin-top: 10px;\n  padding-left: 160px;\n`;\n\nconst formWrapper = `\n  display: flex;\n  flex-direction: column;\n`;\n\ntype ComponentProps = React.PropsWithChildren<React.HTMLAttributes<HTMLElement>>;\n\nconst FormLine = ({ children, className, ...rest }: ComponentProps) => {\n  const { css } = useEmotion();\n\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Line = ({ children, className, ...rest }: ComponentProps) => {\n  const { css } = useEmotion();\n\n  return (\n    <div className={css(line, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst Title = ({ children, className, ...rest }: ComponentProps) => {\n  const { css } = useEmotion();\n\n  return (\n    <span className={css(title, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst Content = ({ children, className, ...rest }: ComponentProps) => {\n  const { css } = useEmotion();\n\n  return (\n    <span className={css(content, className)} {...rest}>\n      {children}\n    </span>\n  );\n};\n\nconst LineBreak = ({ children, className, ...rest }: ComponentProps) => {\n  const { css } = useEmotion();\n\n  return (\n    <div className={css(formLineBreak, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst ActionsBar = ({ children, className, ...rest }: ComponentProps) => {\n  const { css } = useEmotion();\n\n  return (\n    <div className={css(actionsBar, className)} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n@withRenderEnvironment\nexport class Form extends React.Component<ComponentProps> {\n  public static Line = Line;\n  public static LineBreak = LineBreak;\n  public static ActionsBar = ActionsBar;\n  public static FormLine = FormLine;\n  public static Title = Title;\n  public static Content = Content;\n\n  private emotion!: Emotion;\n\n  public render() {\n    return <div className={this.emotion.css(formWrapper, this.props.className)}>{this.props.children}</div>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/hooks/useDrop/useDrop.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { globalObject } from '@skbkontur/global-object';
 export var useDrop = function useDrop(props) {
   if (props === void 0) {
     props = {};
@@ -8,18 +7,18 @@ export var useDrop = function useDrop(props) {
     onDrop = _props.onDrop;
   var droppableRef = useRef(null);
   var overRef = useRef(false);
-  var timerId = useRef();
+  var timerId = useRef(undefined);
   var _useState = useState(false),
     isDraggable = _useState[0],
     setIsDraggable = _useState[1];
   var clearTimer = useCallback(function () {
-    timerId.current && globalObject.clearTimeout(timerId.current);
+    timerId.current && clearTimeout(timerId.current);
   }, []);
   var handleDragOver = useCallback(function (event) {
     event.preventDefault();
     setIsDraggable(true);
     clearTimer();
-    timerId.current = globalObject.setTimeout(function () {
+    timerId.current = setTimeout(function () {
       overRef.current = false;
       setIsDraggable(false);
     }, 200);

package/hooks/useDrop/useDrop.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useRef","useState","globalObject","useDrop","props","_props","onDrop","droppableRef","overRef","timerId","_useState","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"sources":["useDrop.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { SafeTimer } from '@skbkontur/global-object';\nimport { globalObject } from '@skbkontur/global-object';\n\ninterface IUseDropProps {\n  onDrop?: (event: DragEvent) => void;\n}\n\ntype IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;\n\ninterface IUseDropResult<TElement extends IElementWithListener> {\n  isDraggable: boolean;\n  ref: MutableRefObject<TElement | null>;\n}\n\nexport const useDrop = <TElement extends IElementWithListener>(props: IUseDropProps = {}): IUseDropResult<TElement> => {\n  const { onDrop } = props;\n\n  const droppableRef = useRef<TElement>(null);\n  const overRef = useRef<boolean>(false);\n  const timerId = useRef<SafeTimer>();\n  const [isDraggable, setIsDraggable] = useState<boolean>(false);\n\n  const clearTimer = useCallback(() => {\n    timerId.current && globalObject.clearTimeout(timerId.current);\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      setIsDraggable(true);\n\n      clearTimer();\n      timerId.current = globalObject.setTimeout(() => {\n        overRef.current = false;\n        setIsDraggable(false);\n      }, 200);\n    },\n    [clearTimer],\n  );\n\n  const preventDefault = useCallback((event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      preventDefault(event);\n      setIsDraggable(false);\n      overRef.current = false;\n\n      onDrop?.(event);\n    },\n    [preventDefault, onDrop],\n  );\n\n  useEffect(() => {\n    const ref = droppableRef.current;\n\n    if (!ref) {\n      return;\n    }\n\n    ref.addEventListener('dragenter', preventDefault);\n    ref.addEventListener('dragleave', preventDefault);\n    ref.addEventListener('dragover', handleDragOver);\n    ref.addEventListener('drop', handleDrop);\n\n    return () => {\n      ref.removeEventListener('dragenter', preventDefault);\n      ref.removeEventListener('dragleave', preventDefault);\n      ref.removeEventListener('dragover', handleDragOver);\n      ref.removeEventListener('drop', handleDrop);\n    };\n  }, [handleDrop, handleDragOver, preventDefault]);\n\n  return { isDraggable, ref: droppableRef };\n};\n"],"mappings":";AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;AAEhE,SAASC,YAAY,QAAQ,0BAA0B;;;;;;;;;;;;;AAavD,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAA2CC,KAAoB,EAAoC,KAAxDA,KAAoB,cAApBA,KAAoB,GAAG,CAAC,CAAC;EACtF,IAAAC,MAAA,GAAmBD,KAAK,CAAhBE,MAAM,GAAAD,MAAA,CAANC,MAAM;;EAEd,IAAMC,YAAY,GAAGP,MAAM,CAAW,IAAI,CAAC;EAC3C,IAAMQ,OAAO,GAAGR,MAAM,CAAU,KAAK,CAAC;EACtC,IAAMS,OAAO,GAAGT,MAAM,CAAY,CAAC;EACnC,IAAAU,SAAA,GAAsCT,QAAQ,CAAU,KAAK,CAAC,CAAvDU,WAAW,GAAAD,SAAA,IAAEE,cAAc,GAAAF,SAAA;;EAElC,IAAMG,UAAU,GAAGf,WAAW,CAAC,YAAM;IACnCW,OAAO,CAACK,OAAO,IAAIZ,YAAY,CAACa,YAAY,CAACN,OAAO,CAACK,OAAO,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAME,cAAc,GAAGlB,WAAW;IAChC,UAACmB,KAAgB,EAAK;MACpBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBN,cAAc,CAAC,IAAI,CAAC;;MAEpBC,UAAU,CAAC,CAAC;MACZJ,OAAO,CAACK,OAAO,GAAGZ,YAAY,CAACiB,UAAU,CAAC,YAAM;QAC9CX,OAAO,CAACM,OAAO,GAAG,KAAK;QACvBF,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IACD,CAACC,UAAU;EACb,CAAC;;EAED,IAAMK,cAAc,GAAGpB,WAAW,CAAC,UAACmB,KAAgB,EAAK;IACvDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACG,eAAe,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMC,UAAU,GAAGvB,WAAW;IAC5B,UAACmB,KAAgB,EAAK;MACpBC,cAAc,CAACD,KAAK,CAAC;MACrBL,cAAc,CAAC,KAAK,CAAC;MACrBJ,OAAO,CAACM,OAAO,GAAG,KAAK;;MAEvBR,MAAM,YAANA,MAAM,CAAGW,KAAK,CAAC;IACjB,CAAC;IACD,CAACC,cAAc,EAAEZ,MAAM;EACzB,CAAC;;EAEDP,SAAS,CAAC,YAAM;IACd,IAAMuB,GAAG,GAAGf,YAAY,CAACO,OAAO;;IAEhC,IAAI,CAACQ,GAAG,EAAE;MACR;IACF;;IAEAA,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,UAAU,EAAEP,cAAc,CAAC;IAChDM,GAAG,CAACC,gBAAgB,CAAC,MAAM,EAAEF,UAAU,CAAC;;IAExC,OAAO,YAAM;MACXC,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,UAAU,EAAER,cAAc,CAAC;MACnDM,GAAG,CAACE,mBAAmB,CAAC,MAAM,EAAEH,UAAU,CAAC;IAC7C,CAAC;EACH,CAAC,EAAE,CAACA,UAAU,EAAEL,cAAc,EAAEE,cAAc,CAAC,CAAC;;EAEhD,OAAO,EAAEP,WAAW,EAAXA,WAAW,EAAEW,GAAG,EAAEf,YAAY,CAAC,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useRef","useState","useDrop","props","_props","onDrop","droppableRef","overRef","timerId","undefined","_useState","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"sources":["useDrop.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SafeTimer } from '../lib/globalObject';\n\ninterface IUseDropProps {\n  onDrop?: (event: DragEvent) => void;\n}\n\ntype IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;\n\ninterface IUseDropResult<TElement extends IElementWithListener> {\n  isDraggable: boolean;\n  ref: MutableRefObject<TElement | null>;\n}\n\nexport const useDrop = <TElement extends IElementWithListener>(props: IUseDropProps = {}): IUseDropResult<TElement> => {\n  const { onDrop } = props;\n\n  const droppableRef = useRef<TElement>(null);\n  const overRef = useRef<boolean>(false);\n  const timerId = useRef<SafeTimer>(undefined);\n  const [isDraggable, setIsDraggable] = useState<boolean>(false);\n\n  const clearTimer = useCallback(() => {\n    timerId.current && clearTimeout(timerId.current);\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      setIsDraggable(true);\n\n      clearTimer();\n      timerId.current = setTimeout(() => {\n        overRef.current = false;\n        setIsDraggable(false);\n      }, 200);\n    },\n    [clearTimer],\n  );\n\n  const preventDefault = useCallback((event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      preventDefault(event);\n      setIsDraggable(false);\n      overRef.current = false;\n\n      onDrop?.(event);\n    },\n    [preventDefault, onDrop],\n  );\n\n  useEffect(() => {\n    const ref = droppableRef.current;\n\n    if (!ref) {\n      return;\n    }\n\n    ref.addEventListener('dragenter', preventDefault);\n    ref.addEventListener('dragleave', preventDefault);\n    ref.addEventListener('dragover', handleDragOver);\n    ref.addEventListener('drop', handleDrop);\n\n    return () => {\n      ref.removeEventListener('dragenter', preventDefault);\n      ref.removeEventListener('dragleave', preventDefault);\n      ref.removeEventListener('dragover', handleDragOver);\n      ref.removeEventListener('drop', handleDrop);\n    };\n  }, [handleDrop, handleDragOver, preventDefault]);\n\n  return { isDraggable, ref: droppableRef };\n};\n"],"mappings":";AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;;;;;;;;;;;;;;;AAehE,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAA2CC,KAAoB,EAAoC,KAAxDA,KAAoB,cAApBA,KAAoB,GAAG,CAAC,CAAC;EACtF,IAAAC,MAAA,GAAmBD,KAAK,CAAhBE,MAAM,GAAAD,MAAA,CAANC,MAAM;;EAEd,IAAMC,YAAY,GAAGN,MAAM,CAAW,IAAI,CAAC;EAC3C,IAAMO,OAAO,GAAGP,MAAM,CAAU,KAAK,CAAC;EACtC,IAAMQ,OAAO,GAAGR,MAAM,CAAYS,SAAS,CAAC;EAC5C,IAAAC,SAAA,GAAsCT,QAAQ,CAAU,KAAK,CAAC,CAAvDU,WAAW,GAAAD,SAAA,IAAEE,cAAc,GAAAF,SAAA;;EAElC,IAAMG,UAAU,GAAGf,WAAW,CAAC,YAAM;IACnCU,OAAO,CAACM,OAAO,IAAIC,YAAY,CAACP,OAAO,CAACM,OAAO,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAME,cAAc,GAAGlB,WAAW;IAChC,UAACmB,KAAgB,EAAK;MACpBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBN,cAAc,CAAC,IAAI,CAAC;;MAEpBC,UAAU,CAAC,CAAC;MACZL,OAAO,CAACM,OAAO,GAAGK,UAAU,CAAC,YAAM;QACjCZ,OAAO,CAACO,OAAO,GAAG,KAAK;QACvBF,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IACD,CAACC,UAAU;EACb,CAAC;;EAED,IAAMK,cAAc,GAAGpB,WAAW,CAAC,UAACmB,KAAgB,EAAK;IACvDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACG,eAAe,CAAC,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN,IAAMC,UAAU,GAAGvB,WAAW;IAC5B,UAACmB,KAAgB,EAAK;MACpBC,cAAc,CAACD,KAAK,CAAC;MACrBL,cAAc,CAAC,KAAK,CAAC;MACrBL,OAAO,CAACO,OAAO,GAAG,KAAK;;MAEvBT,MAAM,YAANA,MAAM,CAAGY,KAAK,CAAC;IACjB,CAAC;IACD,CAACC,cAAc,EAAEb,MAAM;EACzB,CAAC;;EAEDN,SAAS,CAAC,YAAM;IACd,IAAMuB,GAAG,GAAGhB,YAAY,CAACQ,OAAO;;IAEhC,IAAI,CAACQ,GAAG,EAAE;MACR;IACF;;IAEAA,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,WAAW,EAAEL,cAAc,CAAC;IACjDI,GAAG,CAACC,gBAAgB,CAAC,UAAU,EAAEP,cAAc,CAAC;IAChDM,GAAG,CAACC,gBAAgB,CAAC,MAAM,EAAEF,UAAU,CAAC;;IAExC,OAAO,YAAM;MACXC,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,WAAW,EAAEN,cAAc,CAAC;MACpDI,GAAG,CAACE,mBAAmB,CAAC,UAAU,EAAER,cAAc,CAAC;MACnDM,GAAG,CAACE,mBAAmB,CAAC,MAAM,EAAEH,UAAU,CAAC;IAC7C,CAAC;EACH,CAAC,EAAE,CAACA,UAAU,EAAEL,cAAc,EAAEE,cAAc,CAAC,CAAC;;EAEhD,OAAO,EAAEP,WAAW,EAAXA,WAAW,EAAEW,GAAG,EAAEhB,YAAY,CAAC,CAAC;AAC3C,CAAC","ignoreList":[]}

package/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useEffectWithoutInitCall","effect","deps","isMountedRef","current"],"sources":["useEffectWithoutInitCall.ts"],"sourcesContent":["import type { DependencyList } from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList) => {\n  const isMountedRef = useRef(false);\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      effect();\n    }\n  }, deps);\n\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n};\n"],"mappings":";AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;;AAEzC,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,MAAkB,EAAEC,IAAoB,EAAK;EACpF,IAAMC,YAAY,GAAGJ,MAAM,CAAC,KAAK,CAAC;;EAElCD,SAAS,CAAC,YAAM;IACd,IAAIK,YAAY,CAACC,OAAO,EAAE;MACxBH,MAAM,CAAC,CAAC;IACV;EACF,CAAC,EAAEC,IAAI,CAAC;;EAERJ,SAAS,CAAC,YAAM;IACdK,YAAY,CAACC,OAAO,GAAG,IAAI;IAC3B,OAAO,YAAM;MACXD,YAAY,CAACC,OAAO,GAAG,KAAK;IAC9B,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;AACR,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useRef","useEffectWithoutInitCall","effect","deps","isMountedRef","current"],"sources":["useEffectWithoutInitCall.ts"],"sourcesContent":["import type { DependencyList } from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList): void => {\n  const isMountedRef = useRef(false);\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      effect();\n    }\n  }, deps);\n\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n};\n"],"mappings":";AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;;AAEzC,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,MAAkB,EAAEC,IAAoB,EAAW;EAC1F,IAAMC,YAAY,GAAGJ,MAAM,CAAC,KAAK,CAAC;;EAElCD,SAAS,CAAC,YAAM;IACd,IAAIK,YAAY,CAACC,OAAO,EAAE;MACxBH,MAAM,CAAC,CAAC;IACV;EACF,CAAC,EAAEC,IAAI,CAAC;;EAERJ,SAAS,CAAC,YAAM;IACdK,YAAY,CAACC,OAAO,GAAG,IAAI;IAC3B,OAAO,YAAM;MACXD,YAAY,CAACC,OAAO,GAAG,KAAK;IAC9B,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;AACR,CAAC","ignoreList":[]}

package/hooks/useMemoObject/useMemoObject.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useMemoObject","objectValue","Object","values"],"sources":["useMemoObject.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { AnyObject } from '../lib/utils';\n\nexport const useMemoObject = <TObject extends AnyObject>(objectValue: TObject) => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;;;;AAI/B,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAA+BC,WAAoB,EAAK;EAChF,OAAOF,OAAO,CAAU,oBAAME,WAAW,IAAEC,MAAM,CAACC,MAAM,CAACF,WAAW,CAAC,CAAC;AACxE,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","useMemoObject","objectValue","Object","values"],"sources":["useMemoObject.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { AnyObject } from '../lib/utils';\n\nexport const useMemoObject = <TObject extends AnyObject>(objectValue: TObject): TObject => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;;;;AAI/B,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAA+BC,WAAoB,EAAc;EACzF,OAAOF,OAAO,CAAU,oBAAME,WAAW,IAAEC,MAAM,CAACC,MAAM,CAACF,WAAW,CAAC,CAAC;AACxE,CAAC","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["size", "style", "data-tid"];
 import React from 'react';
-import { globalObject } from '@skbkontur/global-object';
-import { cx } from "../../../lib/theming/Emotion";
-import { keyListener } from "../../../lib/events/keyListener";
+import { useGlobal, useEmotion, useStyles } from "../../../lib/renderEnvironment";
+import { useKeyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../CommonWrapper";
-import { styles } from "../ClearCrossIcon.styles";
+import { getStyles } from "../ClearCrossIcon.styles";
 import { CrossIcon } from "../CrossIcon";
 export var ClearCrossIcon = function ClearCrossIcon(_ref) {
   var _ref$size = _ref.size,
@@ -15,7 +14,12 @@ export var ClearCrossIcon = function ClearCrossIcon(_ref) {
     style = _ref.style,
     dataTid = _ref['data-tid'],
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var globalObject = useGlobal();
+  var _useEmotion = useEmotion(),
+    cx = _useEmotion.cx;
+  var styles = useStyles(getStyles);
   var theme = React.useContext(ThemeContext);
+  var keyListener = useKeyListener();
   var getSizeClassNames = function getSizeClassNames(size) {
     switch (size) {
       case 'large':

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","CommonWrapper","styles","CrossIcon","ClearCrossIcon","_ref","_ref$size","size","style","dataTid","rest","_objectWithoutPropertiesLoose","_excluded","theme","useContext","getSizeClassNames","button","clearCrossLarge","span","relativeWidthLarge","clearCrossMedium","relativeWidthMedium","clearCrossSmall","relativeWidthSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","createElement","className","_extends","type","tabIndex","root","focus","onFocus","onBlur","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { styles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root(theme),\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus(theme),\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useGlobal","useEmotion","useStyles","useKeyListener","ThemeContext","CommonWrapper","getStyles","CrossIcon","ClearCrossIcon","_ref","_ref$size","size","style","dataTid","rest","_objectWithoutPropertiesLoose","_excluded","globalObject","_useEmotion","cx","styles","theme","useContext","keyListener","getSizeClassNames","button","clearCrossLarge","span","relativeWidthLarge","clearCrossMedium","relativeWidthMedium","clearCrossSmall","relativeWidthSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","createElement","className","_extends","type","tabIndex","root","focus","onFocus","onBlur","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment';\nimport { useKeyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { getStyles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = React.useContext(ThemeContext);\n  const keyListener = useKeyListener();\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root(theme),\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus(theme),\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":";AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,EAAEC,UAAU,EAAEC,SAAS,QAAQ,6BAA6B;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,aAAa,QAAQ,kBAAkB;;;;AAIhD,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,SAAS,QAAQ,aAAa;;;;;;;;;;;;AAYvC,OAAO,IAAMC,cAA4D,GAAG,SAA/DA,cAA4DA,CAAAC,IAAA;;;;;AAKnE,KAAAC,SAAA,GAAAD,IAAA,CAJJE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA,CACdE,KAAK,GAAAH,IAAA,CAALG,KAAK,CACOC,OAAO,GAAAJ,IAAA,CAAnB,UAAU,EACPK,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;EAEP,IAAMC,YAAY,GAAGjB,SAAS,CAAC,CAAC;EAChC,IAAAkB,WAAA,GAAejB,UAAU,CAAC,CAAC,CAAnBkB,EAAE,GAAAD,WAAA,CAAFC,EAAE;EACV,IAAMC,MAAM,GAAGlB,SAAS,CAACI,SAAS,CAAC;EACnC,IAAMe,KAAK,GAAGtB,KAAK,CAACuB,UAAU,CAAClB,YAAY,CAAC;EAC5C,IAAMmB,WAAW,GAAGpB,cAAc,CAAC,CAAC;EACpC,IAAMqB,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIb,IAAe,EAAK;IAC7C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAO,EAAEc,MAAM,EAAEL,MAAM,CAACM,eAAe,CAACL,KAAK,CAAC,EAAEM,IAAI,EAAEP,MAAM,CAACQ,kBAAkB,CAACP,KAAK,CAAC,CAAC,CAAC;MAC1F,KAAK,QAAQ;QACX,OAAO,EAAEI,MAAM,EAAEL,MAAM,CAACS,gBAAgB,CAACR,KAAK,CAAC,EAAEM,IAAI,EAAEP,MAAM,CAACU,mBAAmB,CAACT,KAAK,CAAC,CAAC,CAAC;MAC5F,KAAK,OAAO;MACZ;QACE,OAAO,EAAEI,MAAM,EAAEL,MAAM,CAACW,eAAe,CAACV,KAAK,CAAC,EAAEM,IAAI,EAAEP,MAAM,CAACY,kBAAkB,CAACX,KAAK,CAAC,CAAC,CAAC;IAC5F;EACF,CAAC;;EAED,IAAAY,eAAA,GAAwClC,KAAK,CAACmC,QAAQ,CAAU,KAAK,CAAC,CAA/DC,YAAY,GAAAF,eAAA,IAAEG,eAAe,GAAAH,eAAA;;EAEpC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB;IACApB,YAAY,CAACqB,qBAAqB,YAAlCrB,YAAY,CAACqB,qBAAqB,CAAG,YAAM;MACzC,IAAIf,WAAW,CAACgB,YAAY,EAAE;QAC5BH,eAAe,CAAC,IAAI,CAAC;MACvB;IACF,CAAC,CAAC;EACJ,CAAC;EACD,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,UAASJ,eAAe,CAAC,KAAK,CAAC;;EAE/C;IACErC,KAAA,CAAA0C,aAAA,CAACpC,aAAa,EAAKS,IAAI;IACrBf,KAAA,CAAA0C,aAAA,WAAMC,SAAS,EAAElB,iBAAiB,CAACb,IAAI,CAAC,CAACgB,IAAK;IAC5C5B,KAAA,CAAA0C,aAAA,WAAAE,QAAA;MACE,YAAU9B,OAAQ;MAClB+B,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAC,CAAE;MACbH,SAAS,EAAEvB,EAAE;QACXC,MAAM,CAAC0B,IAAI,CAACzB,KAAK,CAAC;QAClB;QACAc,YAAY,IAAIf,MAAM,CAAC2B,KAAK,CAAC1B,KAAK,CAAC;QACnCG,iBAAiB,CAACb,IAAI,CAAC,CAACc;MAC1B,CAAE;MACFb,KAAK,EAAEA,KAAM;MACboC,OAAO,EAAEX,WAAY;MACrBY,MAAM,EAAET,UAAW;IACf1B,IAAI;;IAERf,KAAA,CAAA0C,aAAA,CAAClC,SAAS,IAACI,IAAI,EAAEA,IAAK,EAACuC,SAAS,QAAE;IAC5B;IACJ;IACO,CAAC;;AAEpB,CAAC;;AAED1C,cAAc,CAAC2C,mBAAmB,GAAG,gBAAgB;AACrD3C,cAAc,CAAC4C,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js

@@ -1,30 +1,32 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor, t.clearCrossIconAlign, t.inputBorderWidth, t.inputBorderWidth);
-  },
-  focus: function focus(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.clearCrossIconHoverColor);
-  },
-  clearCrossSmall: function clearCrossSmall(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconBorderRadiusSmall);
-  },
-  clearCrossMedium: function clearCrossMedium(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconBorderRadiusMedium);
-  },
-  clearCrossLarge: function clearCrossLarge(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconBorderRadiusLarge);
-  },
-  relativeWidthSmall: function relativeWidthSmall(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeSmall);
-  },
-  relativeWidthMedium: function relativeWidthMedium(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeMedium);
-  },
-  relativeWidthLarge: function relativeWidthLarge(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeLarge);
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor, t.clearCrossIconAlign, t.inputBorderWidth, t.inputBorderWidth);
+    },
+    focus: function focus(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.clearCrossIconHoverColor);
+    },
+    clearCrossSmall: function clearCrossSmall(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconBorderRadiusSmall);
+    },
+    clearCrossMedium: function clearCrossMedium(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconBorderRadiusMedium);
+    },
+    clearCrossLarge: function clearCrossLarge(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconBorderRadiusLarge);
+    },
+    relativeWidthSmall: function relativeWidthSmall(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeSmall);
+    },
+    relativeWidthMedium: function relativeWidthMedium(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeMedium);
+    },
+    relativeWidthLarge: function relativeWidthLarge(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeLarge);
+    }
+  });
+};

package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","resetButton","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","clearCrossIconAlign","inputBorderWidth","focus","_templateObject2","clearCrossSmall","_templateObject3","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","_templateObject4","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","_templateObject5","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconBorderRadiusLarge","relativeWidthSmall","_templateObject6","inputIconSizeSmall","relativeWidthMedium","_templateObject7","inputIconSizeMedium","relativeWidthLarge","_templateObject8","inputIconSizeLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: ${t.clearCrossIconAlign};\n      align-items: center;\n      position: absolute;\n      right: -${t.inputBorderWidth};\n      top: -${t.inputBorderWidth};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.clearCrossIconHoverColor};\n    `;\n  },\n\n  clearCrossSmall(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n  relativeWidthSmall(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeSmall};\n    `;\n  },\n  relativeWidthMedium(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeMedium};\n    `;\n  },\n  relativeWidthLarge(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeLarge};\n    `;\n  },\n});\n"],"mappings":"kPAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACNL,WAAW,CAAC,CAAC;IACNG,CAAC,CAACG,mBAAmB;;IAEVH,CAAC,CAACI,kBAAkB,EAAIJ,CAAC,CAACK,wBAAwB;;IAE3DL,CAAC,CAACM,wBAAwB;;;IAGlBN,CAAC,CAACO,mBAAmB;;;IAG9BP,CAAC,CAACQ,gBAAgB;IACpBR,CAAC,CAACQ,gBAAgB;;EAE9B,CAAC;;EAEDC,KAAK,WAAAA,MAACT,CAAQ,EAAE;IACd,OAAOL,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACCF,CAAC,CAACM,wBAAwB;;EAEvC,CAAC;;EAEDK,eAAe,WAAAA,gBAACX,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;IACCF,CAAC,CAACa,wBAAwB;IACzBb,CAAC,CAACc,yBAAyB;IACpBd,CAAC,CAACe,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAAChB,CAAQ,EAAE;IACzB,OAAOL,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;IACCF,CAAC,CAACkB,yBAAyB;IAC1BlB,CAAC,CAACmB,0BAA0B;IACrBnB,CAAC,CAACoB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACrB,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACCF,CAAC,CAACuB,wBAAwB;IACzBvB,CAAC,CAACwB,yBAAyB;IACpBxB,CAAC,CAACyB,+BAA+B;;EAEtD,CAAC;EACDC,kBAAkB,WAAAA,mBAAC1B,CAAQ,EAAE;IAC3B,OAAOL,GAAG,CAAAgC,gBAAA,KAAAA,gBAAA,GAAAzB,2BAAA;;IAECF,CAAC,CAAC4B,kBAAkB;;EAEjC,CAAC;EACDC,mBAAmB,WAAAA,oBAAC7B,CAAQ,EAAE;IAC5B,OAAOL,GAAG,CAAAmC,gBAAA,KAAAA,gBAAA,GAAA5B,2BAAA;;IAECF,CAAC,CAAC+B,mBAAmB;;EAElC,CAAC;EACDC,kBAAkB,WAAAA,mBAAChC,CAAQ,EAAE;IAC3B,OAAOL,GAAG,CAAAsC,gBAAA,KAAAA,gBAAA,GAAA/B,2BAAA;;IAECF,CAAC,CAACkC,kBAAkB;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeStyle","resetButton","getStyles","emotion","root","t","css","_templateObject","_taggedTemplateLiteralLoose","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","clearCrossIconAlign","inputBorderWidth","focus","_templateObject2","clearCrossSmall","_templateObject3","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","_templateObject4","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","_templateObject5","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconBorderRadiusLarge","relativeWidthSmall","_templateObject6","inputIconSizeSmall","relativeWidthMedium","_templateObject7","inputIconSizeMedium","relativeWidthLarge","_templateObject8","inputIconSizeLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n      ${resetButton()}\n      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: ${t.clearCrossIconAlign};\n      align-items: center;\n      position: absolute;\n      right: -${t.inputBorderWidth};\n      top: -${t.inputBorderWidth};\n    `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n        color: ${t.clearCrossIconHoverColor};\n      `;\n    },\n\n    clearCrossSmall(t: Theme) {\n      return emotion.css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n    },\n    clearCrossMedium(t: Theme) {\n      return emotion.css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n    },\n    clearCrossLarge(t: Theme) {\n      return emotion.css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n    },\n    relativeWidthSmall(t: Theme) {\n      return emotion.css`\n      display: inline-block;\n      width: ${t.inputIconSizeSmall};\n    `;\n    },\n    relativeWidthMedium(t: Theme) {\n      return emotion.css`\n      display: inline-block;\n      width: ${t.inputIconSizeMedium};\n    `;\n    },\n    relativeWidthLarge(t: Theme) {\n      return emotion.css`\n      display: inline-block;\n      width: ${t.inputIconSizeLarge};\n    `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCH,YAAY,CAAC;MACXI,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QAChBP,WAAW,CAAC,CAAC;QACNI,CAAC,CAACI,mBAAmB;;QAEVJ,CAAC,CAACK,kBAAkB,EAAIL,CAAC,CAACM,wBAAwB;;QAE3DN,CAAC,CAACO,wBAAwB;;;QAGlBP,CAAC,CAACQ,mBAAmB;;;QAG9BR,CAAC,CAACS,gBAAgB;QACpBT,CAAC,CAACS,gBAAgB;;MAE5B,CAAC;;MAEDC,KAAK,WAAAA,MAACV,CAAQ,EAAE;QACd,OAAOF,OAAO,CAACG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;QACPH,CAAC,CAACO,wBAAwB;;MAEvC,CAAC;;MAEDK,eAAe,WAAAA,gBAACZ,CAAQ,EAAE;QACxB,OAAOF,OAAO,CAACG,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;QACTH,CAAC,CAACc,wBAAwB;QACzBd,CAAC,CAACe,yBAAyB;QACpBf,CAAC,CAACgB,+BAA+B;;MAEpD,CAAC;MACDC,gBAAgB,WAAAA,iBAACjB,CAAQ,EAAE;QACzB,OAAOF,OAAO,CAACG,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;QACTH,CAAC,CAACmB,yBAAyB;QAC1BnB,CAAC,CAACoB,0BAA0B;QACrBpB,CAAC,CAACqB,gCAAgC;;MAErD,CAAC;MACDC,eAAe,WAAAA,gBAACtB,CAAQ,EAAE;QACxB,OAAOF,OAAO,CAACG,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;QACTH,CAAC,CAACwB,wBAAwB;QACzBxB,CAAC,CAACyB,yBAAyB;QACpBzB,CAAC,CAAC0B,+BAA+B;;MAEpD,CAAC;MACDC,kBAAkB,WAAAA,mBAAC3B,CAAQ,EAAE;QAC3B,OAAOF,OAAO,CAACG,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAAzB,2BAAA;;QAETH,CAAC,CAAC6B,kBAAkB;;MAE/B,CAAC;MACDC,mBAAmB,WAAAA,oBAAC9B,CAAQ,EAAE;QAC5B,OAAOF,OAAO,CAACG,GAAG,CAAA8B,gBAAA,KAAAA,gBAAA,GAAA5B,2BAAA;;QAETH,CAAC,CAACgC,mBAAmB;;MAEhC,CAAC;MACDC,kBAAkB,WAAAA,mBAACjC,CAAQ,EAAE;QAC3B,OAAOF,OAAO,CAACG,GAAG,CAAAiC,gBAAA,KAAAA,gBAAA,GAAA/B,2BAAA;;QAETH,CAAC,CAACmC,kBAAkB;;MAE/B;IACF,CAAC,CAAC","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(t: Theme): string;
     focus(t: Theme): string;
     clearCrossSmall(t: Theme): string;

package/internal/ClearCrossIcon/CrossIcon.d.ts

@@ -1,3 +1,3 @@
 export declare const CrossIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon").IconProps, "size"> & {
-    size?: number | "small" | "medium" | "large" | undefined;
+    size?: import("../icons2022/BaseIcon").IconProps["size"] | import("../icons2022/iconConstants").IconSizeAliases;
 }>;

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js

@@ -2,14 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
 import React from 'react';
-import { globalObject } from '@skbkontur/global-object';
-import { cx } from "../../../lib/theming/Emotion";
-import { keyListener } from "../../../lib/events/keyListener";
+import { useGlobal, useEmotion, useStyles } from "../../../lib/renderEnvironment";
+import { useKeyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { DEFAULT_ICON_SIZE } from "../../icons2022/iconConstants";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { CommonWrapper } from "../../CommonWrapper";
-import { styles } from "../CloseButtonIcon.styles";
+import { getStyles } from "../CloseButtonIcon.styles";
 import { CrossIcon } from "../CrossIcon";
 export var CloseButtonIcon = function CloseButtonIcon(_ref) {
   var _ref$side = _ref.side,
@@ -22,11 +21,16 @@ export var CloseButtonIcon = function CloseButtonIcon(_ref) {
     tabbable = _ref$tabbable === void 0 ? true : _ref$tabbable,
     style = _ref.style,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var globalObject = useGlobal();
+  var _useEmotion = useEmotion(),
+    cx = _useEmotion.cx;
+  var styles = useStyles(getStyles);
   var _theme = React.useContext(ThemeContext);
   var theme = ThemeFactory.create({
     closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
     closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor
   }, _theme);
+  var keyListener = useKeyListener();
   var _React$useState = React.useState(false),
     focusedByTab = _React$useState[0],
     setFocusedByTab = _React$useState[1];

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","styles","CrossIcon","CloseButtonIcon","_ref","_ref$side","side","_ref$size","size","color","colorHover","_ref$tabbable","tabbable","style","rest","_objectWithoutPropertiesLoose","_excluded","_theme","useContext","theme","create","closeBtnIconColor","closeBtnIconHoverColor","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","createElement","_extends","className","root","focus","rootDisabled","width","height","onFocus","onBlur","wrapper","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["CloseButtonIcon.tsx"],"sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\n\nimport { styles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useGlobal","useEmotion","useStyles","useKeyListener","ThemeContext","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","getStyles","CrossIcon","CloseButtonIcon","_ref","_ref$side","side","_ref$size","size","color","colorHover","_ref$tabbable","tabbable","style","rest","_objectWithoutPropertiesLoose","_excluded","globalObject","_useEmotion","cx","styles","_theme","useContext","theme","create","closeBtnIconColor","closeBtnIconHoverColor","keyListener","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","createElement","_extends","className","root","focus","rootDisabled","width","height","onFocus","onBlur","wrapper","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["CloseButtonIcon.tsx"],"sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment';\nimport { useKeyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\n\nimport { getStyles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"],"mappings":"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","ignoreList":[]}

package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js

@@ -1,18 +1,20 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      display: inline-block;\n      position: relative;\n      border-radius: ", ";\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ", ";\n      }\n    "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
-  },
-  rootDisabled: function rootDisabled(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.closeBtnIconDisabledColor);
-  },
-  focus: function focus(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.closeBtnIconFocusShadow);
-  },
-  wrapper: function wrapper() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      box-sizing: content-box;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n    "])));
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
+    },
+    rootDisabled: function rootDisabled(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.closeBtnIconDisabledColor);
+    },
+    focus: function focus(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        box-shadow: ", ";\n      "])), t.closeBtnIconFocusShadow);
+    },
+    wrapper: function wrapper() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "])));
+    }
+  });
+};