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

package/cjs/internal/RenderContainer/RenderInnerContainer.js

@@ -6,6 +6,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _RenderContainer = require("./RenderContainer");
 
+var KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];
+
 
 
 
@@ -41,9 +43,33 @@ var Portal = exports.Portal = function Portal(_ref) {var _ref2;var container = _
 
 };var
 
-RenderInnerContainer = exports.RenderInnerContainer = /*#__PURE__*/function (_React$Component) {function RenderInnerContainer() {return _React$Component.apply(this, arguments) || this;}(0, _inheritsLoose2.default)(RenderInnerContainer, _React$Component);var _proto = RenderInnerContainer.prototype;_proto.
+RenderInnerContainer = exports.RenderInnerContainer = /*#__PURE__*/function (_React$Component) {function RenderInnerContainer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+    kColorsCheckerRef = /*#__PURE__*/_react.default.createRef();return _this;}(0, _inheritsLoose2.default)(RenderInnerContainer, _React$Component);var _proto = RenderInnerContainer.prototype;_proto.
 
+  componentDidMount = function componentDidMount() {
+    this.applyKonturColorsAttributes();
+  };_proto.
 
+  componentDidUpdate = function componentDidUpdate() {
+    this.applyKonturColorsAttributes();
+  };_proto.
+
+  applyKonturColorsAttributes = function applyKonturColorsAttributes() {var _this$kColorsCheckerR;
+    var domContainer = this.props.domContainer;
+    var source = (_this$kColorsCheckerR = this.kColorsCheckerRef.current) == null ? void 0 : _this$kColorsCheckerR.closest(
+      KONTUR_COLORS_ATTRIBUTES.map(function (x) {return "[" + x + "]";}).join(',')
+    );
+
+    for (var _i = 0, _KONTUR_COLORS_ATTRIB = KONTUR_COLORS_ATTRIBUTES; _i < _KONTUR_COLORS_ATTRIB.length; _i++) {var attribute = _KONTUR_COLORS_ATTRIB[_i];
+      var value = source == null ? void 0 : source.getAttribute(attribute);
+      if (value) {
+        domContainer == null || domContainer.setAttribute(attribute, value);
+      }
+    }
+  };_proto.
 
   render = function render() {
     var _this$props = this.props,anchor = _this$props.anchor,children = _this$props.children,domContainer = _this$props.domContainer,rootId = _this$props.rootId;
@@ -55,7 +81,8 @@ RenderInnerContainer = exports.RenderInnerContainer = /*#__PURE__*/function (_Re
       anchor, /*#__PURE__*/
       _react.default.createElement(Portal, { key: "portal-ref", rt_rootID: rootId, container: domContainer },
       children
-      )
+      ), /*#__PURE__*/
+      _react.default.createElement("span", { ref: this.kColorsCheckerRef, style: { display: 'none' } })
       );
 
     }

package/cjs/internal/RenderContainer/RenderInnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_RenderContainer","SSRPlaceholder","default","createElement","Portal","exports","_ref","_ref2","container","rt_rootID","children","Fragment","ReactDOM","createPortal","PORTAL_INLET_ATTR","RenderInnerContainer","_React$Component","apply","arguments","_inheritsLoose2","_proto","prototype","render","_this$props","props","anchor","domContainer","rootId","inner","key","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["RenderInnerContainer.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport type { Nullable } from '../../typings/utility-types';\n\nimport type { PortalProps, RenderContainerProps } from './RenderContainerTypes';\nimport { PORTAL_INLET_ATTR } from './RenderContainer';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript {...{ [PORTAL_INLET_ATTR]: rt_rootID }} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n  public static displayName = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.__KONTUR_REACT_UI__ = 'Portal';\nPortal.displayName = 'Portal';\n"],"mappings":"yRAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;;;;;AAKA,IAAAE,gBAAA,GAAAF,OAAA;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAA,uBAASL,MAAA,CAAAM,OAAA,CAAAC,aAAA,aAAQ,WAAQ,iBAAiB,EAAE,CAAC;;AAE1D,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,SAATA,MAAMA,CAAAE,IAAA,EAAwD,KAAAC,KAAA,KAAlDC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS,CAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EACrD;EACA;IACEd,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACP,MAAA,CAAAM,OAAK,CAACS,QAAQ;IACZH,SAAS,gBAAGI,iBAAQ,CAACC,YAAY,CAACH,QAAQ,EAAEF,SAAS,CAAC,gBAAGZ,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACF,cAAc,MAAE,CAAC;IAC3EO,SAAS,gBAAGZ,MAAA,CAAAM,OAAA,CAAAC,aAAA,cAAAI,KAAA,OAAAA,KAAA,CAAiBO,kCAAiB,IAAGL,SAAS,EAAAF,KAAA,CAAK,CAAC,gBAAGX,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACF,cAAc,MAAE;IACvE,CAAC;;AAErB,CAAC,CAAC;;AAEWc,oBAAoB,GAAAV,OAAA,CAAAU,oBAAA,0BAAAC,gBAAA,YAAAD,qBAAA,UAAAC,gBAAA,CAAAC,KAAA,OAAAC,SAAA,eAAAC,eAAA,CAAAjB,OAAA,EAAAa,oBAAA,EAAAC,gBAAA,MAAAI,MAAA,GAAAL,oBAAA,CAAAM,SAAA,CAAAD,MAAA;;;;EAIxBE,MAAM,GAAb,SAAAA,OAAA,EAAgB;IACd,IAAAC,WAAA,GAAmD,IAAI,CAACC,KAAK,CAArDC,MAAM,GAAAF,WAAA,CAANE,MAAM,CAAEf,QAAQ,GAAAa,WAAA,CAARb,QAAQ,CAAEgB,YAAY,GAAAH,WAAA,CAAZG,YAAY,CAAEC,MAAM,GAAAJ,WAAA,CAANI,MAAM;IAC9C,IAAIC,KAAK,GAAGH,MAAM;;IAElB,IAAIf,QAAQ,EAAE;MACZkB,KAAK;MACHhC,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACP,MAAA,CAAAM,OAAK,CAACS,QAAQ;MACZc,MAAM;MACP7B,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACC,MAAM,IAACyB,GAAG,EAAC,YAAY,EAACpB,SAAS,EAAEkB,MAAO,EAACnB,SAAS,EAAEkB,YAAa;MACjEhB;MACK;MACM,CACjB;;IACH;;IAEA,OAAOkB,KAAK;EACd,CAAC,QAAAb,oBAAA,GApBuCe,cAAK,CAACC,SAAS,EAA5ChB,oBAAoB,CACjBiB,mBAAmB,GAAG,sBAAsB,CAD/CjB,oBAAoB,CAEjBkB,WAAW,GAAG,sBAAsB;;;AAqBpD7B,MAAM,CAAC4B,mBAAmB,GAAG,QAAQ;AACrC5B,MAAM,CAAC6B,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_RenderContainer","KONTUR_COLORS_ATTRIBUTES","SSRPlaceholder","default","createElement","Portal","exports","_ref","_ref2","container","rt_rootID","children","Fragment","ReactDOM","createPortal","PORTAL_INLET_ATTR","RenderInnerContainer","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","kColorsCheckerRef","React","createRef","_inheritsLoose2","_proto","prototype","componentDidMount","applyKonturColorsAttributes","componentDidUpdate","_this$kColorsCheckerR","domContainer","props","source","current","closest","map","x","join","_i","_KONTUR_COLORS_ATTRIB","attribute","value","getAttribute","setAttribute","render","_this$props","anchor","rootId","inner","key","ref","style","display","Component","__KONTUR_REACT_UI__","displayName"],"sources":["RenderInnerContainer.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport type { Nullable } from '../../typings/utility-types';\n\nimport type { PortalProps, RenderContainerProps } from './RenderContainerTypes';\nimport { PORTAL_INLET_ATTR } from './RenderContainer';\n\nconst KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript {...{ [PORTAL_INLET_ATTR]: rt_rootID }} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n  public static displayName = 'RenderInnerContainer';\n\n  private kColorsCheckerRef = React.createRef<HTMLSpanElement>();\n\n  public componentDidMount() {\n    this.applyKonturColorsAttributes();\n  }\n\n  public componentDidUpdate() {\n    this.applyKonturColorsAttributes();\n  }\n\n  private applyKonturColorsAttributes() {\n    const { domContainer } = this.props;\n    const source = this.kColorsCheckerRef.current?.closest<HTMLElement>(\n      KONTUR_COLORS_ATTRIBUTES.map((x) => `[${x}]`).join(','),\n    );\n\n    for (const attribute of KONTUR_COLORS_ATTRIBUTES) {\n      const value = source?.getAttribute(attribute);\n      if (value) {\n        domContainer?.setAttribute(attribute, value);\n      }\n    }\n  }\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n          <span ref={this.kColorsCheckerRef} style={{ display: 'none' }} />\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.__KONTUR_REACT_UI__ = 'Portal';\nPortal.displayName = 'Portal';\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/RenderLayer/RenderLayer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import type { CommonProps } from '../CommonWrapper';
 import type { TGetRootNode } from '../../lib/rootNode';
 import type { Nullable } from '../../typings/utility-types';
@@ -14,6 +14,7 @@ export declare class RenderLayer extends React.Component<RenderLayerProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static defaultProps: DefaultProps;
+    private globalObject;
     private getProps;
     private focusOutsideListenerToken;
     getRootNode: TGetRootNode;
@@ -21,7 +22,7 @@ export declare class RenderLayer extends React.Component<RenderLayerProps> {
     componentDidMount(): void;
     componentDidUpdate(prevProps: RenderLayerProps): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
     private getAnchorNode;
     private attachListeners;
     private detachListeners;

package/cjs/internal/RenderLayer/RenderLayer.js

@@ -1,5 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.RenderLayer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _globalObject = require("@skbkontur/global-object");
+
 
 var _listenFocusOutside = require("../../lib/listenFocusOutside");
 
@@ -8,7 +8,10 @@ var _CommonWrapper = require("../CommonWrapper");
 var _rootNode = require("../../lib/rootNode");
 
 var _createPropsGetter = require("../../lib/createPropsGetter");
-var _isInstanceOf = require("../../lib/isInstanceOf");var _class, _RenderLayer;var
+var _isInstanceOf = require("../../lib/isInstanceOf");
+var _renderEnvironment = require("../../lib/renderEnvironment");var _class, _RenderLayer;var
+
+
 
 
 
@@ -20,8 +23,8 @@ var _isInstanceOf = require("../../lib/isInstanceOf");var _class, _RenderLayer;v
 
 
 
+RenderLayer = exports.RenderLayer = (0, _renderEnvironment.withRenderEnvironment)(_class = (0, _rootNode.rootNode)(_class = (_RenderLayer = /*#__PURE__*/function (_React$Component) {function RenderLayer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
-RenderLayer = exports.RenderLayer = (0, _rootNode.rootNode)(_class = (_RenderLayer = /*#__PURE__*/function (_React$Component) {function RenderLayer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -101,6 +104,8 @@ RenderLayer = exports.RenderLayer = (0, _rootNode.rootNode)(_class = (_RenderLay
 
 
 
+
+
 
 
 
@@ -114,11 +119,11 @@ RenderLayer = exports.RenderLayer = (0, _rootNode.rootNode)(_class = (_RenderLay
       var target = event.target || event.srcElement;
       var node = _this.getAnchorNode();
 
-      if (!node || (0, _isInstanceOf.isInstanceOf)(target, _globalObject.globalObject.Element) && (0, _listenFocusOutside.containsTargetOrRenderContainer)(target)(node)) {
+      if (!node || (0, _isInstanceOf.isInstanceOf)(target, _this.globalObject.Element) && (0, _listenFocusOutside.containsTargetOrRenderContainer)(target)(node)) {
         return;
       }
 
       if (_this.props.onClickOutside) {
         _this.props.onClickOutside(event);
       }
-    };return _this;}(0, _inheritsLoose2.default)(RenderLayer, _React$Component);var _proto = RenderLayer.prototype;_proto.componentDidMount = function componentDidMount() {if (this.getProps().active) {this.attachListeners();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),active = _this$getProps.active;if (!prevProps.active && active) {this.attachListeners();}if (prevProps.active && !active) {this.detachListeners();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.getProps().active) {this.detachListeners();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), _react.default.Children.only(this.props.children));};_proto.getAnchorNode = function getAnchorNode() {var getAnchorElement = this.props.getAnchorElement;return getAnchorElement ? getAnchorElement() : (0, _rootNode.getRootNode)(this);};_proto.attachListeners = function attachListeners() {var _globalObject$documen;var node = this.getAnchorNode();if (!node) {return;}this.focusOutsideListenerToken = (0, _listenFocusOutside.listen)(function () {return [node];}, this.handleFocusOutside);_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('blur', this.handleFocusOutside);(_globalObject$documen = _globalObject.globalObject.document) == null || _globalObject$documen.addEventListener('ontouchstart' in _globalObject.globalObject.document.documentElement && 'onpointerup' in _globalObject.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};_proto.detachListeners = function detachListeners() {var _globalObject$documen2;if (this.focusOutsideListenerToken) {this.focusOutsideListenerToken.remove();this.focusOutsideListenerToken = null;}_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('blur', this.handleFocusOutside);(_globalObject$documen2 = _globalObject.globalObject.document) == null || _globalObject$documen2.removeEventListener('ontouchstart' in _globalObject.globalObject.document.documentElement && 'onpointerup' in _globalObject.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};return RenderLayer;}(_react.default.Component), _RenderLayer.__KONTUR_REACT_UI__ = 'RenderLayer', _RenderLayer.displayName = 'RenderLayer', _RenderLayer.defaultProps = { active: true }, _RenderLayer)) || _class;
+    };return _this;}(0, _inheritsLoose2.default)(RenderLayer, _React$Component);var _proto = RenderLayer.prototype;_proto.componentDidMount = function componentDidMount() {if (this.getProps().active) {this.attachListeners();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),active = _this$getProps.active;if (!prevProps.active && active) {this.attachListeners();}if (prevProps.active && !active) {this.detachListeners();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.getProps().active) {this.detachListeners();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), _react.default.Children.only(this.props.children));};_proto.getAnchorNode = function getAnchorNode() {var getAnchorElement = this.props.getAnchorElement;return getAnchorElement ? getAnchorElement() : (0, _rootNode.getRootNode)(this);};_proto.attachListeners = function attachListeners() {var _this$globalObject$ad, _this$globalObject, _this$globalObject$do;var node = this.getAnchorNode();if (!node) {return;}this.focusOutsideListenerToken = (0, _listenFocusOutside.listen)(function () {return [node];}, this.handleFocusOutside, this.globalObject);(_this$globalObject$ad = (_this$globalObject = this.globalObject).addEventListener) == null || _this$globalObject$ad.call(_this$globalObject, 'blur', this.handleFocusOutside);(_this$globalObject$do = this.globalObject.document) == null || _this$globalObject$do.addEventListener('ontouchstart' in this.globalObject.document.documentElement && 'onpointerup' in this.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};_proto.detachListeners = function detachListeners() {var _this$globalObject$re, _this$globalObject2, _this$globalObject$do2;if (this.focusOutsideListenerToken) {this.focusOutsideListenerToken.remove();this.focusOutsideListenerToken = null;}(_this$globalObject$re = (_this$globalObject2 = this.globalObject).removeEventListener) == null || _this$globalObject$re.call(_this$globalObject2, 'blur', this.handleFocusOutside);(_this$globalObject$do2 = this.globalObject.document) == null || _this$globalObject$do2.removeEventListener('ontouchstart' in this.globalObject.document.documentElement && 'onpointerup' in this.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};return RenderLayer;}(_react.default.Component), _RenderLayer.__KONTUR_REACT_UI__ = 'RenderLayer', _RenderLayer.displayName = 'RenderLayer', _RenderLayer.defaultProps = { active: true }, _RenderLayer)) || _class) || _class;

package/cjs/internal/RenderLayer/RenderLayer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_listenFocusOutside","_CommonWrapper","_rootNode","_createPropsGetter","_isInstanceOf","_class","_RenderLayer","RenderLayer","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","isInstanceOf","globalObject","Element","containsTargetOrRenderContainer","onClickOutside","_inheritsLoose2","default","_proto","prototype","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","_this$getProps","detachListeners","componentWillUnmount","render","createElement","CommonWrapper","_extends2","rootNodeRef","setRootNode","React","Children","only","children","getAnchorElement","getRootNode","_globalObject$documen","listenFocusOutside","addEventListener","document","documentElement","_globalObject$documen2","remove","removeEventListener","Component","__KONTUR_REACT_UI__","displayName"],"sources":["RenderLayer.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getRootNode, rootNode } from '../../lib/rootNode';\nimport type { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n  public static displayName = 'RenderLayer';\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const { active } = this.getProps();\n\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside);\n    globalObject.addEventListener?.('blur', this.handleFocusOutside);\n    globalObject.document?.addEventListener(\n      'ontouchstart' in globalObject.document.documentElement && 'onpointerup' in globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    globalObject.removeEventListener?.('blur', this.handleFocusOutside);\n    globalObject.document?.removeEventListener(\n      'ontouchstart' in globalObject.document.documentElement && 'onpointerup' in globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = this.getAnchorNode();\n\n    if (!node || (isInstanceOf(target, globalObject.Element) && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_listenFocusOutside","_CommonWrapper","_rootNode","_createPropsGetter","_isInstanceOf","_renderEnvironment","_class","_RenderLayer","RenderLayer","exports","withRenderEnvironment","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","isInstanceOf","globalObject","Element","containsTargetOrRenderContainer","onClickOutside","_inheritsLoose2","default","_proto","prototype","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","_this$getProps","detachListeners","componentWillUnmount","render","createElement","CommonWrapper","_extends2","rootNodeRef","setRootNode","React","Children","only","children","getAnchorElement","getRootNode","_this$globalObject$ad","_this$globalObject","_this$globalObject$do","listenFocusOutside","addEventListener","document","documentElement","_this$globalObject$re","_this$globalObject2","_this$globalObject$do2","remove","removeEventListener","Component","__KONTUR_REACT_UI__","displayName"],"sources":["RenderLayer.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\n\nimport type { GlobalObject } from '../../lib/globalObject';\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getRootNode, rootNode } from '../../lib/rootNode';\nimport type { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@withRenderEnvironment\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n  public static displayName = 'RenderLayer';\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private globalObject!: GlobalObject;\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const { active } = this.getProps();\n\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside, this.globalObject);\n    this.globalObject.addEventListener?.('blur', this.handleFocusOutside);\n    this.globalObject.document?.addEventListener(\n      'ontouchstart' in this.globalObject.document.documentElement &&\n        'onpointerup' in this.globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    this.globalObject.removeEventListener?.('blur', this.handleFocusOutside);\n    this.globalObject.document?.removeEventListener(\n      'ontouchstart' in this.globalObject.document.documentElement &&\n        'onpointerup' in this.globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = this.getAnchorNode();\n\n    if (!node || (isInstanceOf(target, this.globalObject.Element) && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/ResizeDetector/ResizeDetector.d.ts

@@ -8,6 +8,9 @@ export declare class ResizeDetector extends React.Component<React.PropsWithChild
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     private iframeWindow;
+    private styles;
+    private emotion;
+    private cx;
     componentDidMount(): void;
     render(): React.JSX.Element;
     private handleResize;

package/cjs/internal/ResizeDetector/ResizeDetector.js

@@ -1,16 +1,18 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ResizeDetector = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-var _Emotion = require("../../lib/theming/Emotion");
 
-var _ResizeDetector2 = require("./ResizeDetector.styles");var
+var _renderEnvironment = require("../../lib/renderEnvironment");
 
+var _ResizeDetector2 = require("./ResizeDetector.styles");var _class, _ResizeDetector;var
 
 
 
 
 
 
-ResizeDetector = exports.ResizeDetector = /*#__PURE__*/function (_React$Component) {function ResizeDetector() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+ResizeDetector = exports.ResizeDetector = (0, _renderEnvironment.withRenderEnvironment)(_class = (_ResizeDetector = /*#__PURE__*/function (_React$Component) {function ResizeDetector() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -33,6 +35,11 @@ ResizeDetector = exports.ResizeDetector = /*#__PURE__*/function (_React$Componen
 
 
 
+
+
+
+
+
 
 
 
@@ -49,4 +56,4 @@ ResizeDetector = exports.ResizeDetector = /*#__PURE__*/function (_React$Componen
       if (iframe && iframe.contentWindow) {
         _this.iframeWindow = iframe.contentWindow;
       }
-    };return _this;}(0, _inheritsLoose2.default)(ResizeDetector, _React$Component);var _proto = ResizeDetector.prototype;_proto.componentDidMount = function componentDidMount() {if (this.iframeWindow) {this.iframeWindow.addEventListener('resize', this.handleResize);}};_proto.render = function render() {var _cx;return /*#__PURE__*/_react.default.createElement("div", { className: _ResizeDetector2.styles.root() }, /*#__PURE__*/_react.default.createElement("iframe", { title: "resizeDetector", ref: this.iframeRef, className: _ResizeDetector2.styles.iframe(), tabIndex: -1 }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_ResizeDetector2.styles.content()] = true, _cx[_ResizeDetector2.styles.fullHeight()] = this.props.fullHeight, _cx[_ResizeDetector2.styles.flex()] = this.props.alignBaseline, _cx)) }, this.props.children));};return ResizeDetector;}(_react.default.Component);ResizeDetector.__KONTUR_REACT_UI__ = 'ResizeDetector';ResizeDetector.displayName = 'ResizeDetector';
+    };return _this;}(0, _inheritsLoose2.default)(ResizeDetector, _React$Component);var _proto = ResizeDetector.prototype;_proto.componentDidMount = function componentDidMount() {if (this.iframeWindow) {this.iframeWindow.addEventListener('resize', this.handleResize);}};_proto.render = function render() {var _this$cx;this.styles = (0, _ResizeDetector2.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement("div", { className: this.styles.root() }, /*#__PURE__*/_react.default.createElement("iframe", { title: "resizeDetector", ref: this.iframeRef, className: this.styles.iframe(), tabIndex: -1 }), /*#__PURE__*/_react.default.createElement("div", { className: this.cx((_this$cx = {}, _this$cx[this.styles.content()] = true, _this$cx[this.styles.fullHeight()] = this.props.fullHeight, _this$cx[this.styles.flex()] = this.props.alignBaseline, _this$cx)) }, this.props.children));};return ResizeDetector;}(_react.default.Component), _ResizeDetector.__KONTUR_REACT_UI__ = 'ResizeDetector', _ResizeDetector.displayName = 'ResizeDetector', _ResizeDetector)) || _class;

package/cjs/internal/ResizeDetector/ResizeDetector.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Emotion","_ResizeDetector2","ResizeDetector","exports","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","_inheritsLoose2","default","_proto","prototype","componentDidMount","addEventListener","render","_cx","createElement","className","styles","root","title","ref","tabIndex","cx","content","fullHeight","flex","alignBaseline","children","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["ResizeDetector.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n  alignBaseline?: boolean;\n}\n\nexport class ResizeDetector extends React.Component<React.PropsWithChildren<ResizeDetectorProps>> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n  public static displayName = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    return (\n      <div className={styles.root()}>\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={styles.iframe()} tabIndex={-1} />\n        <div\n          className={cx({\n            [styles.content()]: true,\n            [styles.fullHeight()]: this.props.fullHeight,\n            [styles.flex()]: this.props.alignBaseline,\n          })}\n        >\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"],"mappings":"kQAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,gBAAA,GAAAF,OAAA,4BAAiD;;;;;;;;AAQpCG,cAAc,GAAAC,OAAA,CAAAD,cAAA,0BAAAE,gBAAA,YAAAF,eAAA,OAAAG,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;IAIjBU,YAAY,GAAkB,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBlCW,YAAY,GAAG,UAACC,KAAc,EAAK;MACzC,IAAIZ,KAAA,CAAKa,KAAK,CAACC,QAAQ,EAAE;QACvBd,KAAA,CAAKa,KAAK,CAACC,QAAQ,CAACF,KAAK,CAAC;MAC5B;IACF,CAAC,CAAAZ,KAAA;;IAEOe,SAAS,GAAG,UAACC,MAAyB,EAAK;MACjD,IAAIA,MAAM,IAAIA,MAAM,CAACC,aAAa,EAAE;QAClCjB,KAAA,CAAKU,YAAY,GAAGM,MAAM,CAACC,aAAa;MAC1C;IACF,CAAC,QAAAjB,KAAA,MAAAkB,eAAA,CAAAC,OAAA,EAAAtB,cAAA,EAAAE,gBAAA,MAAAqB,MAAA,GAAAvB,cAAA,CAAAwB,SAAA,CAAAD,MAAA,CAjCME,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,IAAI,CAACZ,YAAY,EAAE,CACrB,IAAI,CAACA,YAAY,CAACa,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAACZ,YAAY,CAAC,CACjE,CACF,CAAC,CAAAS,MAAA,CAEMI,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,GAAA,CACd,oBACEjC,MAAA,CAAA2B,OAAA,CAAAO,aAAA,UAAKC,SAAS,EAAEC,uBAAM,CAACC,IAAI,CAAC,CAAE,iBAC5BrC,MAAA,CAAA2B,OAAA,CAAAO,aAAA,aAAQI,KAAK,EAAC,gBAAgB,EAACC,GAAG,EAAE,IAAI,CAAChB,SAAU,EAACY,SAAS,EAAEC,uBAAM,CAACZ,MAAM,CAAC,CAAE,EAACgB,QAAQ,EAAE,CAAC,CAAE,EAAE,CAAC,eAChGxC,MAAA,CAAA2B,OAAA,CAAAO,aAAA,UACEC,SAAS,EAAE,IAAAM,WAAE,GAAAR,GAAA,OAAAA,GAAA,CACVG,uBAAM,CAACM,OAAO,CAAC,CAAC,IAAG,IAAI,EAAAT,GAAA,CACvBG,uBAAM,CAACO,UAAU,CAAC,CAAC,IAAG,IAAI,CAACtB,KAAK,CAACsB,UAAU,EAAAV,GAAA,CAC3CG,uBAAM,CAACQ,IAAI,CAAC,CAAC,IAAG,IAAI,CAACvB,KAAK,CAACwB,aAAa,EAAAZ,GAAA,CAC1C,CAAE,IAEF,IAAI,CAACZ,KAAK,CAACyB,QACT,CACF,CAAC,CAEV,CAAC,QAAAzC,cAAA,GA3BiC0C,cAAK,CAACC,SAAS,EAAtC3C,cAAc,CACX4C,mBAAmB,GAAG,gBAAgB,CADzC5C,cAAc,CAEX6C,WAAW,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_renderEnvironment","_ResizeDetector2","_class","_ResizeDetector","ResizeDetector","exports","withRenderEnvironment","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","_inheritsLoose2","default","_proto","prototype","componentDidMount","addEventListener","render","_this$cx","styles","getStyles","emotion","createElement","className","root","title","ref","tabIndex","cx","content","fullHeight","flex","alignBaseline","children","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["ResizeDetector.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { getStyles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n  alignBaseline?: boolean;\n}\n\n@withRenderEnvironment\nexport class ResizeDetector extends React.Component<React.PropsWithChildren<ResizeDetectorProps>> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n  public static displayName = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <div className={this.styles.root()}>\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={this.styles.iframe()} tabIndex={-1} />\n        <div\n          className={this.cx({\n            [this.styles.content()]: true,\n            [this.styles.fullHeight()]: this.props.fullHeight,\n            [this.styles.flex()]: this.props.alignBaseline,\n          })}\n        >\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/ResizeDetector/ResizeDetector.styles.d.ts

@@ -1,7 +1,7 @@
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(): string;
     iframe(): string;
     content(): string;
     fullHeight(): string;
     flex(): string;
-};
+}>;

package/cjs/internal/ResizeDetector/ResizeDetector.styles.js

@@ -1,16 +1,17 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
-var styles = exports.styles = (0, _Emotion.memoizeStyle)({
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      height: 100%;\n    "])));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+var getStyles = exports.getStyles = (0, _Emotion.memoizeGetStyles)(function (_ref) {var css = _ref.css;return {
+    root: function root() {
+      return css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      height: 100%;\n    "])));
 
 
-  },
 
-  iframe: function iframe() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
+    },
 
+    iframe: function iframe() {
+      return css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
 
 
 
@@ -21,23 +22,24 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
 
 
 
-  },
 
-  content: function content() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
+    },
 
+    content: function content() {
+      return css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
 
-  },
 
-  fullHeight: function fullHeight() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n    "])));
+    },
 
+    fullHeight: function fullHeight() {
+      return css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n    "])));
 
-  },
 
-  flex: function flex() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n    "])));
+    },
 
+    flex: function flex() {
+      return css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n    "])));
 
-  }
-});
+
+    }
+  };});

package/cjs/internal/ResizeDetector/ResizeDetector.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","iframe","content","fullHeight","flex"],"sources":["ResizeDetector.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  flex() {\n    return css`\n      display: flex;\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAAA,EAAG;IACL,WAAOC,YAAG,EAAAT,eAAA,KAAAA,eAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;EAIZ,CAAC;;EAEDC,MAAM,WAAAA,OAAA,EAAG;IACP,WAAOH,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;;;;;;;;;;EAYZ,CAAC;;EAEDE,OAAO,WAAAA,QAAA,EAAG;IACR,WAAOJ,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDG,UAAU,WAAAA,WAAA,EAAG;IACX,WAAOL,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDI,IAAI,WAAAA,KAAA,EAAG;IACL,WAAON,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","getStyles","exports","memoizeGetStyles","_ref","css","root","_taggedTemplateLiteralLoose2","default","iframe","content","fullHeight","flex"],"sources":["ResizeDetector.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  flex() {\n    return css`\n      display: flex;\n    `;\n  },\n}));\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA,8BAA6D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAEtD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAgB,EAAC,UAAAC,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOD,GAAG,CAAAT,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;IAIZ,CAAC;;IAEDC,MAAM,WAAAA,OAAA,EAAG;MACP,OAAOJ,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;;;;;;;;;IAYZ,CAAC;;IAEDE,OAAO,WAAAA,QAAA,EAAG;MACR,OAAOL,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;IAGZ,CAAC;;IAEDG,UAAU,WAAAA,WAAA,EAAG;MACX,OAAON,GAAG,CAAAN,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;IAGZ,CAAC;;IAEDI,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOP,GAAG,CAAAL,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;IAGZ;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

package/cjs/internal/SpinnerIcon/SpinnerIcon.d.ts

@@ -7,7 +7,6 @@ interface SpinnerIconSize {
 export interface SpinnerIconProps {
     className?: string;
     size: SpinnerIconSize | keyof typeof sizes;
-    dimmed?: boolean;
     inline?: boolean;
     width?: number;
     color?: React.CSSProperties['color'];
@@ -29,5 +28,5 @@ export declare const sizes: {
         readonly radius: 6;
     };
 };
-export declare const SpinnerIcon: ({ size, className, dimmed, inline, width, color }: SpinnerIconProps) => React.JSX.Element;
+export declare const SpinnerIcon: ({ size, className, inline, width, color }: SpinnerIconProps) => React.JSX.Element;
 export {};

package/cjs/internal/SpinnerIcon/SpinnerIcon.js

@@ -1,16 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.sizes = exports.SpinnerIcon = void 0;var _react = _interopRequireDefault(require("react"));
 
-var _client = require("../../lib/client");
-var _SpinnerFallbackAnimation = require("../../components/Spinner/SpinnerFallbackAnimation");
-
-
-
-
-
-
-var _currentEnvironment = require("../../lib/currentEnvironment");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _Emotion = require("../../lib/theming/Emotion");
+var _renderEnvironment = require("../../lib/renderEnvironment");
 
 var _SpinnerIcon = require("./SpinnerIcon.styles");
 
@@ -28,7 +18,6 @@ var _SpinnerIcon = require("./SpinnerIcon.styles");
 
 
 
-
 var sizes = exports.sizes = {
   big: {
     size: 96,
@@ -51,58 +40,19 @@ var isSizeAlias = function isSizeAlias(size) {
   return typeof size === 'string' && size in sizes;
 };
 
-var SpinnerIcon = exports.SpinnerIcon = function SpinnerIcon(_ref) {var _cx, _cx2;var size = _ref.size,className = _ref.className,dimmed = _ref.dimmed,inline = _ref.inline,width = _ref.width,color = _ref.color;
+var SpinnerIcon = exports.SpinnerIcon = function SpinnerIcon(_ref) {var _cx, _cx2;var size = _ref.size,className = _ref.className,inline = _ref.inline,width = _ref.width,color = _ref.color;
   var _size = isSizeAlias(size) ? sizes[size] : size;
   var currentSize = inline ? sizes.mini : _size;
-  var svgRef = _react.default.useRef(null);
-
-  if (_client.isIE11 && !_currentEnvironment.isTestEnv) {
-    // This condition will not change during app's life time
-    // So its OK to use hooks here
-    // https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var fallbackAnimationRef = _react.default.useRef(null);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var _React$useContext = _react.default.useContext(_ThemeContext.ThemeContext),red = _React$useContext.red,yellow = _React$useContext.yellow,green = _React$useContext.green,brand = _React$useContext.brand;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    _react.default.useEffect(function () {
-      var svg = svgRef.current;
-
-      var setStyleProperty = function setStyleProperty() {
-        if (svg) {var _svg$style;
-          (_svg$style = svg.style).setProperty.apply(_svg$style, arguments);
-        }
-      };
-
-      fallbackAnimationRef.current = new _SpinnerFallbackAnimation.SpinnerFallbackAnimationRunner([
-
-      (0, _SpinnerFallbackAnimation.createOffsetAnimation)(0, -230, 1000, setStyleProperty, '%'),
-      (0, _SpinnerFallbackAnimation.createLengthAnimation)([62, 168], [187, 43], 2000, setStyleProperty, '%'),
-      (0, _SpinnerFallbackAnimation.createRotationAnimation)(0, 360, 2000, setStyleProperty)].concat(
-        dimmed ? [] : [(0, _SpinnerFallbackAnimation.createColorAnimation)([red, yellow, green, brand], 1500, setStyleProperty)]),
-
-      1000 / 60
-      );
-
-      return function () {
-        var fallbackAnimation = fallbackAnimationRef.current;
-        if (fallbackAnimation) {
-          fallbackAnimation.stop();
-        }
-        if (svg) {
-          svg.removeAttribute('style');
-        }
-      };
-    }, [dimmed, red, yellow, green, brand]);
-  }
+
+  var _useEmotion = (0, _renderEnvironment.useEmotion)(),cx = _useEmotion.cx;
+  var styles = (0, _renderEnvironment.useStyles)(_SpinnerIcon.getStyles);
 
   return /*#__PURE__*/(
-    _react.default.createElement("span", { className: (0, _Emotion.cx)(_SpinnerIcon.styles.root(), (_cx = {}, _cx[_SpinnerIcon.styles.rootInline()] = inline, _cx)) }, /*#__PURE__*/
+    _react.default.createElement("span", { className: cx(styles.root(), (_cx = {}, _cx[styles.rootInline()] = inline, _cx)) }, /*#__PURE__*/
     _react.default.createElement("svg", {
       viewBox: "0 0 " + currentSize.size + " " + currentSize.size,
-      className: (0, _Emotion.cx)(_SpinnerIcon.styles.icon(), className, (_cx2 = {}, _cx2[
-      _SpinnerIcon.styles.iconInline()] = inline, _cx2)
+      className: cx(styles.icon(), className, (_cx2 = {}, _cx2[
+      styles.iconInline()] = inline, _cx2)
       ),
       width: currentSize.size,
       height: currentSize.size,
@@ -111,7 +61,6 @@ var SpinnerIcon = exports.SpinnerIcon = function SpinnerIcon(_ref) {var _cx, _cx
       strokeDasharray: 10 * currentSize.radius / 6 + ", " + 27 * currentSize.radius / 6,
       strokeDashoffset: "0",
       strokeWidth: width || currentSize.width,
-      ref: svgRef,
       focusable: "false",
       "aria-hidden": "true" }, /*#__PURE__*/
 

package/cjs/internal/SpinnerIcon/SpinnerIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_client","_SpinnerFallbackAnimation","_currentEnvironment","_ThemeContext","_Emotion","_SpinnerIcon","sizes","exports","big","size","width","radius","normal","mini","isSizeAlias","SpinnerIcon","_ref","_cx","_cx2","className","dimmed","inline","color","_size","currentSize","svgRef","React","useRef","isIE11","isTestEnv","fallbackAnimationRef","_React$useContext","useContext","ThemeContext","red","yellow","green","brand","useEffect","svg","current","setStyleProperty","_svg$style","style","setProperty","apply","arguments","SpinnerFallbackAnimationRunner","createOffsetAnimation","createLengthAnimation","createRotationAnimation","concat","createColorAnimation","fallbackAnimation","stop","removeAttribute","default","createElement","cx","styles","root","rootInline","viewBox","icon","iconInline","height","fill","stroke","strokeDasharray","strokeDashoffset","strokeWidth","ref","focusable","cy","r"],"sources":["SpinnerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isIE11 } from '../../lib/client';\nimport {\n  SpinnerFallbackAnimationRunner,\n  createOffsetAnimation,\n  createLengthAnimation,\n  createColorAnimation,\n  createRotationAnimation,\n} from '../../components/Spinner/SpinnerFallbackAnimation';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './SpinnerIcon.styles';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  dimmed?: boolean;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  big: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  normal: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  mini: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, dimmed, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.mini : _size;\n  const svgRef = React.useRef<SVGSVGElement>(null);\n\n  if (isIE11 && !isTestEnv) {\n    // This condition will not change during app's life time\n    // So its OK to use hooks here\n    // https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const fallbackAnimationRef = React.useRef<SpinnerFallbackAnimationRunner | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { red, yellow, green, brand } = React.useContext(ThemeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      const svg = svgRef.current;\n\n      const setStyleProperty: CSSStyleDeclaration['setProperty'] = (...args) => {\n        if (svg) {\n          svg.style.setProperty(...args);\n        }\n      };\n\n      fallbackAnimationRef.current = new SpinnerFallbackAnimationRunner(\n        [\n          createOffsetAnimation(0, -230, 1000, setStyleProperty, '%'),\n          createLengthAnimation([62, 168], [187, 43], 2000, setStyleProperty, '%'),\n          createRotationAnimation(0, 360, 2000, setStyleProperty),\n          ...(dimmed ? [] : [createColorAnimation([red, yellow, green, brand], 1500, setStyleProperty)]),\n        ],\n        1000 / 60,\n      );\n\n      return () => {\n        const fallbackAnimation = fallbackAnimationRef.current;\n        if (fallbackAnimation) {\n          fallbackAnimation.stop();\n        }\n        if (svg) {\n          svg.removeAttribute('style');\n        }\n      };\n    }, [dimmed, red, yellow, green, brand]);\n  }\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        ref={svgRef}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_renderEnvironment","_SpinnerIcon","sizes","exports","big","size","width","radius","normal","mini","isSizeAlias","SpinnerIcon","_ref","_cx","_cx2","className","inline","color","_size","currentSize","_useEmotion","useEmotion","cx","styles","useStyles","getStyles","default","createElement","root","rootInline","viewBox","icon","iconInline","height","fill","stroke","strokeDasharray","strokeDashoffset","strokeWidth","focusable","cy","r"],"sources":["SpinnerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment';\n\nimport { getStyles } from './SpinnerIcon.styles';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  big: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  normal: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  mini: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.mini : _size;\n\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/SpinnerIcon/SpinnerIcon.styles.d.ts

@@ -1,6 +1,6 @@
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(): string;
     rootInline(): string;
     icon(): string;
     iconInline(): string;
-};
+}>;