@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

package/internal/icons/20px/icon.styles/icon.styles.js

@@ -2,14 +2,12 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2;
 
-import { memoizeStyle } from "../../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        font-size: 20px;\n        line-height: normal; /* Button with icon has vertical offset without this. */\n        -webkit-touch-callout: none; /* iOS Safari */\n        -webkit-user-select: none; /* Safari */\n        -khtml-user-select: none; /* Konqueror HTML */\n        -moz-user-select: none; /* Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n        user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */\n      "])));
-    },
-    icon: function icon() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        width: 1em;\n        height: 1em;\n        margin-bottom: -0.2em;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      font-size: 20px;\n      line-height: normal; /* Button with icon has vertical offset without this. */\n      -webkit-touch-callout: none; /* iOS Safari */\n      -webkit-user-select: none; /* Safari */\n      -khtml-user-select: none; /* Konqueror HTML */\n      -moz-user-select: none; /* Firefox */\n      -ms-user-select: none; /* Internet Explorer/Edge */\n      user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */\n    "])));
+  },
+  icon: function icon() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: 1em;\n      height: 1em;\n      margin-bottom: -0.2em;\n    "])));
+  }
+});

package/internal/icons/20px/icon.styles/icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["icon.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","icon"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,8BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;;;;;;AAUD,OAZU;AAaXC,MAAAA,IAbW,kBAaJ;AACL,eAAOH,OAAO,CAACE,GAAf;;;;;AAKD,OAnBU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        font-size: 20px;\n        line-height: normal; /* Button with icon has vertical offset without this. */\n        -webkit-touch-callout: none; /* iOS Safari */\n        -webkit-user-select: none; /* Safari */\n        -khtml-user-select: none; /* Konqueror HTML */\n        -moz-user-select: none; /* Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n        user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */\n      `;\n    },\n    icon() {\n      return emotion.css`\n        width: 1em;\n        height: 1em;\n        margin-bottom: -0.2em;\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["icon.styles.ts"],"names":["css","memoizeStyle","styles","root","icon"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,8BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;;;;;;;AAUD,GAZgC;AAajCI,EAAAA,IAbiC,kBAa1B;AACL,WAAOJ,GAAP;;;;;AAKD,GAnBgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      font-size: 20px;\n      line-height: normal; /* Button with icon has vertical offset without this. */\n      -webkit-touch-callout: none; /* iOS Safari */\n      -webkit-user-select: none; /* Safari */\n      -khtml-user-select: none; /* Konqueror HTML */\n      -moz-user-select: none; /* Firefox */\n      -ms-user-select: none; /* Internet Explorer/Edge */\n      user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */\n    `;\n  },\n  icon() {\n    return css`\n      width: 1em;\n      height: 1em;\n      margin-bottom: -0.2em;\n    `;\n  },\n});\n"]}

package/internal/icons/20px/icon.styles.d.ts

@@ -1,5 +1,4 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     icon(): string;
 };

package/internal/icons/20px/svg/svg.js

@@ -3,16 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["children", "color"];
 import React from 'react';
 import propTypes from 'prop-types';
-import { useEmotion } from "../../../../lib/theming/Emotion";
-import { getStyles } from "../icon.styles";
+import { styles } from "../icon.styles";
 export var SvgIcon = function SvgIcon(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var emotion = useEmotion();
-  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("span", _extends({
     className: styles.root()
   }, rest), /*#__PURE__*/React.cloneElement(children, {

package/internal/icons/20px/svg/svg.js.map

@@ -1 +1 @@
-{"version":3,"sources":["svg.tsx"],"names":["React","propTypes","useEmotion","getStyles","SvgIcon","children","color","rest","emotion","styles","root","cloneElement","className","icon","fill","focusable","node","string","Ok","props","Warning","Gear","User","Wait","Clear","Money","HelpCircle","Kebab"],"mappings":"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","sourcesContent":["import React from 'react';\nimport propTypes from 'prop-types';\n\nimport { useEmotion } from '../../../lib/theming/Emotion';\n\nimport { getStyles } from './icon.styles';\n\nexport interface SVGIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: React.CSSProperties['color'];\n}\n\nexport const SvgIcon: React.FunctionComponent<SVGIconProps> = ({ children, color = 'currentColor', ...rest }) => {\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n  return (\n    <span className={styles.root()} {...rest}>\n      {React.cloneElement(children as JSX.Element, {\n        className: styles.icon(),\n        fill: color,\n        focusable: 'false',\n        'aria-hidden': 'true',\n      })}\n    </span>\n  );\n};\n\nSvgIcon.propTypes = {\n  children: propTypes.node,\n  color: propTypes.string,\n};\n\nexport const Ok = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M9.4995 3C5.35742 3 2 6.35658 2 10.5C2 14.6423 5.35742 18 9.4995 18C13.6416 18 17 14.6423 17 10.5C17 6.35658 13.6416 3 9.4995 3V3ZM14.1761 8.508C14.1761 8.60542 14.1391 8.68983 14.0646 8.75917L8.71117 13.9983C8.63717 14.0708 8.54917 14.1072 8.44758 14.1072C8.347 14.1072 8.25892 14.0708 8.18442 13.9983L7.13717 12.9822C7.13717 12.9807 7.1325 12.9688 7.12158 12.9495L5.26 11.1398C5.18967 11.0679 5.15525 10.9814 5.15892 10.884C5.15892 10.7845 5.19225 10.7011 5.26 10.6318C5.26 10.6318 5.5215 10.3817 5.73258 10.1707C5.9175 9.98833 6.10192 9.9795 6.301 10.1827C6.6245 10.5078 7.12158 10.9799 7.12158 10.9799C7.1325 10.9992 7.13717 11.0112 7.13717 11.0127L8.18442 12.0287C8.25892 12.1012 8.347 12.1377 8.44758 12.1377C8.54917 12.1377 8.63717 12.1012 8.71117 12.0287C8.71117 12.0287 12.0405 8.78258 13.0361 7.79683C13.2643 7.57017 13.4201 7.62017 13.5295 7.72642C13.7499 7.94317 14.0646 8.25217 14.0646 8.25217C14.1391 8.32408 14.1761 8.4095 14.1761 8.508Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Warning = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17 10.5C17 14.6421 13.6421 18 9.5 18C5.35786 18 2 14.6421 2 10.5C2 6.35786 5.35786 3 9.5 3C13.6421 3 17 6.35786 17 10.5ZM10.6 6V10L10.2 12H8.8L8.4 10V6H10.6ZM9.5 15C10.3284 15 11 14.5523 11 14C11 13.4477 10.3284 13 9.5 13C8.67157 13 8 13.4477 8 14C8 14.5523 8.67157 15 9.5 15Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Gear = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.6685 2V4.4062C8.06636 4.54917 7.50089 4.78681 6.98866 5.10252L5.28686 3.40072L3.40072 5.28686L5.10252 6.98866C4.78681 7.50089 4.54917 8.06636 4.4062 8.6685H2V11.3359H4.4062C4.54917 11.938 4.78681 12.5035 5.10252 13.0157L3.40072 14.7175L5.28686 16.6037L6.98866 14.9019C7.50089 15.2176 8.06636 15.4552 8.6685 15.5982V18.0044H11.3359V15.5982C11.938 15.4552 12.5035 15.2176 13.0157 14.9019L14.7175 16.6037L16.6037 14.7175L14.9019 13.0157C15.2176 12.5035 15.4552 11.938 15.5982 11.3359H18.0044V8.6685H15.5982C15.4552 8.06636 15.2176 7.50089 14.9019 6.98866L16.6037 5.28686L14.7175 3.40072L13.0157 5.10252C12.5035 4.78681 11.938 4.54917 11.3359 4.4062V2H8.6685ZM13.3364 10.0022C13.3364 11.8437 11.8437 13.3364 10.0022 13.3364C8.16074 13.3364 6.66795 11.8437 6.66795 10.0022C6.66795 8.16074 8.16074 6.66795 10.0022 6.66795C11.8437 6.66795 13.3364 8.16074 13.3364 10.0022Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const User = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.37042 18C2.96022 18 2.63083 17.8757 2.38222 17.6271C2.13362 17.3785 2.00622 17.0491 2 16.6389V15C2 15 4.5 14.5 7.4537 12.5463V11.1852C7.0435 10.9055 6.71411 10.5171 6.46551 10.0199C6.2169 9.52268 6.0926 9.00062 6.0926 8.4537V6.41206C6.0926 5.45494 6.422 4.64699 7.0808 3.98819C7.73959 3.32939 8.54754 3 9.50466 3C10.4618 3 11.2697 3.32939 11.9285 3.98819C12.5873 4.64699 12.9167 5.45494 12.9167 6.41206V8.4537C12.9105 9.00062 12.7831 9.52268 12.5345 10.0199C12.2859 10.5171 11.9565 10.9055 11.5463 11.1852V12.5463C11.5463 12.5463 14.5 14.5 17 15V16.6389C17 17.0491 16.8757 17.3785 16.6271 17.6271C16.3785 17.8757 16.0491 18 15.6389 18H3.37042Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Wait = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17 10.5C17 14.6421 13.6421 18 9.5 18C5.35786 18 2 14.6421 2 10.5C2 6.35786 5.35786 3 9.5 3C13.6421 3 17 6.35786 17 10.5ZM15 10.5C15 13.5376 12.5376 16 9.5 16C6.46243 16 4 13.5376 4 10.5C4 7.46243 6.46243 5 9.5 5C12.5376 5 15 7.46243 15 10.5ZM8.15918 7.45947L6.54285 8.54204L9.02449 12.5586L13.3955 11.3898L12.8567 9.49533L9.98753 10.3614L8.15918 7.45947Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Clear = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M9.5 18C13.6421 18 17 14.6421 17 10.5C17 6.35786 13.6421 3 9.5 3C5.35786 3 2 6.35786 2 10.5C2 14.6421 5.35786 18 9.5 18ZM8.36863 10.5L5.75233 7.88371L6.88371 6.75233L9.5 9.36863L12.1163 6.75233L13.2477 7.88371L10.6314 10.5L13.2477 13.1163L12.1163 14.2477L9.5 11.6314L6.88371 14.2477L5.75233 13.1163L8.36863 10.5Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Money = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17 10.5C17 14.6421 13.6421 18 9.5 18C5.35786 18 2 14.6421 2 10.5C2 6.35786 5.35786 3 9.5 3C13.6421 3 17 6.35786 17 10.5ZM6 10H7V6H11.0021C12.1055 6 13 6.8939 13 8.00488V8.99512C13 10.1024 12.1017 11 11.0021 11H8V12H11V13H8V15H7V13H6V12H7V11H6V10ZM8.2 9.8V7.2H11.0021C11.4435 7.2 11.8 7.55733 11.8 8.00488V8.99512C11.8 9.43892 11.4397 9.8 11.0021 9.8H8.2Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const HelpCircle = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10 3C14.1 3 17.5 6.4 17.5 10.5C17.5 14.7 14.1 18 10 18C5.8 18 2.5 14.7 2.5 10.5C2.5 6.4 5.8 3 10 3V3ZM9 15.1H10.5V13.5H9V15.1ZM13.2 8.3C13.2 7.5 12.9 6.9 12.3 6.4C11.6 5.9 10.8 5.6 9.9 5.6C9 5.6 8.2 5.9 7.5 6.4C6.9 7 6.5 7.7 6.3 8.7L7.8 8.9C7.9 8.3 8.1 7.9 8.5 7.6C8.9 7.3 9.4 7.1 10 7.1C10.6 7.1 11 7.2 11.2 7.4C11.5 7.7 11.6 8 11.6 8.5C11.6 9.1 11.2 9.6 10.4 10C10.2 10.1 9.92372 10.2993 9.62372 10.5993C9.42372 10.7993 9 11.1874 9 11.7V12.4H10.5C10.5 12.4 10.3021 11.7005 10.91 11.2841C11.518 10.8676 12.0064 10.505 12.3 10.2L12.7569 9.78925C12.9569 9.48925 13 9.4 13.1 9.1C13.2 8.9 13.2 8.7 13.2 8.6C13.2 8.5 13.2 8.4 13.2 8.3Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Kebab = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 5C12 6.10457 11.1046 7 10 7C8.89543 7 8 6.10457 8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5ZM12 11C12 12.1046 11.1046 13 10 13C8.89543 13 8 12.1046 8 11C8 9.89543 8.89543 9 10 9C11.1046 9 12 9.89543 12 11ZM10 19C11.1046 19 12 18.1046 12 17C12 15.8954 11.1046 15 10 15C8.89543 15 8 15.8954 8 17C8 18.1046 8.89543 19 10 19Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n"]}
+{"version":3,"sources":["svg.tsx"],"names":["React","propTypes","styles","SvgIcon","children","color","rest","root","cloneElement","className","icon","fill","focusable","node","string","Ok","props","Warning","Gear","User","Wait","Clear","Money","HelpCircle","Kebab"],"mappings":"oMAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,MAAT,QAAuB,eAAvB;;;;;;AAMA,OAAO,IAAMC,OAA8C,GAAG,SAAjDA,OAAiD,YAAGC,QAAH,QAAGA,QAAH,mBAAaC,KAAb,CAAaA,KAAb,2BAAqB,cAArB,cAAwCC,IAAxC;AAC5D,2CAAM,SAAS,EAAEJ,MAAM,CAACK,IAAP,EAAjB,IAAoCD,IAApC;AACGN,IAAAA,KAAK,CAACQ,YAAN,CAAmBJ,QAAnB,EAA4C;AAC3CK,MAAAA,SAAS,EAAEP,MAAM,CAACQ,IAAP,EADgC;AAE3CC,MAAAA,IAAI,EAAEN,KAFqC;AAG3CO,MAAAA,SAAS,EAAE,OAHgC;AAI3C,qBAAe,MAJ4B,EAA5C,CADH,CAD4D,GAAvD;;;;;AAWPT,OAAO,CAACF,SAAR,GAAoB;AAClBG,EAAAA,QAAQ,EAAEH,SAAS,CAACY,IADF;AAElBR,EAAAA,KAAK,EAAEJ,SAAS,CAACa,MAFC,EAApB;;;AAKA,OAAO,IAAMC,EAAE,GAAG,SAALA,EAAK,CAACC,KAAD;AAChB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,07BAHJ,GADF,CADF,CADgB,GAAX;;;;;;AAYP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACD,KAAD;AACrB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,uRAHJ,GADF,CADF,CADqB,GAAhB;;;;;;AAYP,OAAO,IAAME,IAAI,GAAG,SAAPA,IAAO,CAACF,KAAD;AAClB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,q2BAHJ,GADF,CADF,CADkB,GAAb;;;;;;AAYP,OAAO,IAAMG,IAAI,GAAG,SAAPA,IAAO,CAACH,KAAD;AAClB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,woBAHJ,GADF,CADF,CADkB,GAAb;;;;;;AAYP,OAAO,IAAMI,IAAI,GAAG,SAAPA,IAAO,CAACJ,KAAD;AAClB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,qWAHJ,GADF,CADF,CADkB,GAAb;;;;;;AAYP,OAAO,IAAMK,KAAK,GAAG,SAARA,KAAQ,CAACL,KAAD;AACnB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,0TAHJ,GADF,CADF,CADmB,GAAd;;;;;;AAYP,OAAO,IAAMM,KAAK,GAAG,SAARA,KAAQ,CAACN,KAAD;AACnB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,qWAHJ,GADF,CADF,CADmB,GAAd;;;;;;AAYP,OAAO,IAAMO,UAAU,GAAG,SAAbA,UAAa,CAACP,KAAD;AACxB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,0nBAHJ,GADF,CADF,CADwB,GAAnB;;;;;;AAYP,OAAO,IAAMQ,KAAK,GAAG,SAARA,KAAQ,CAACR,KAAD;AACnB,wBAAC,OAAD,EAAaA,KAAb;AACE,iCAAK,OAAO,EAAC,WAAb,EAAyB,KAAK,EAAC,4BAA/B;AACE;AACE,MAAA,QAAQ,EAAC,SADX;AAEE,MAAA,QAAQ,EAAC,SAFX;AAGE,MAAA,CAAC,EAAC,kVAHJ,GADF,CADF,CADmB,GAAd","sourcesContent":["import React from 'react';\nimport propTypes from 'prop-types';\n\nimport { styles } from './icon.styles';\n\nexport interface SVGIconProps extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: React.CSSProperties['color'];\n}\n\nexport const SvgIcon: React.FunctionComponent<SVGIconProps> = ({ children, color = 'currentColor', ...rest }) => (\n  <span className={styles.root()} {...rest}>\n    {React.cloneElement(children as JSX.Element, {\n      className: styles.icon(),\n      fill: color,\n      focusable: 'false',\n      'aria-hidden': 'true',\n    })}\n  </span>\n);\n\nSvgIcon.propTypes = {\n  children: propTypes.node,\n  color: propTypes.string,\n};\n\nexport const Ok = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M9.4995 3C5.35742 3 2 6.35658 2 10.5C2 14.6423 5.35742 18 9.4995 18C13.6416 18 17 14.6423 17 10.5C17 6.35658 13.6416 3 9.4995 3V3ZM14.1761 8.508C14.1761 8.60542 14.1391 8.68983 14.0646 8.75917L8.71117 13.9983C8.63717 14.0708 8.54917 14.1072 8.44758 14.1072C8.347 14.1072 8.25892 14.0708 8.18442 13.9983L7.13717 12.9822C7.13717 12.9807 7.1325 12.9688 7.12158 12.9495L5.26 11.1398C5.18967 11.0679 5.15525 10.9814 5.15892 10.884C5.15892 10.7845 5.19225 10.7011 5.26 10.6318C5.26 10.6318 5.5215 10.3817 5.73258 10.1707C5.9175 9.98833 6.10192 9.9795 6.301 10.1827C6.6245 10.5078 7.12158 10.9799 7.12158 10.9799C7.1325 10.9992 7.13717 11.0112 7.13717 11.0127L8.18442 12.0287C8.25892 12.1012 8.347 12.1377 8.44758 12.1377C8.54917 12.1377 8.63717 12.1012 8.71117 12.0287C8.71117 12.0287 12.0405 8.78258 13.0361 7.79683C13.2643 7.57017 13.4201 7.62017 13.5295 7.72642C13.7499 7.94317 14.0646 8.25217 14.0646 8.25217C14.1391 8.32408 14.1761 8.4095 14.1761 8.508Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Warning = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17 10.5C17 14.6421 13.6421 18 9.5 18C5.35786 18 2 14.6421 2 10.5C2 6.35786 5.35786 3 9.5 3C13.6421 3 17 6.35786 17 10.5ZM10.6 6V10L10.2 12H8.8L8.4 10V6H10.6ZM9.5 15C10.3284 15 11 14.5523 11 14C11 13.4477 10.3284 13 9.5 13C8.67157 13 8 13.4477 8 14C8 14.5523 8.67157 15 9.5 15Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Gear = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.6685 2V4.4062C8.06636 4.54917 7.50089 4.78681 6.98866 5.10252L5.28686 3.40072L3.40072 5.28686L5.10252 6.98866C4.78681 7.50089 4.54917 8.06636 4.4062 8.6685H2V11.3359H4.4062C4.54917 11.938 4.78681 12.5035 5.10252 13.0157L3.40072 14.7175L5.28686 16.6037L6.98866 14.9019C7.50089 15.2176 8.06636 15.4552 8.6685 15.5982V18.0044H11.3359V15.5982C11.938 15.4552 12.5035 15.2176 13.0157 14.9019L14.7175 16.6037L16.6037 14.7175L14.9019 13.0157C15.2176 12.5035 15.4552 11.938 15.5982 11.3359H18.0044V8.6685H15.5982C15.4552 8.06636 15.2176 7.50089 14.9019 6.98866L16.6037 5.28686L14.7175 3.40072L13.0157 5.10252C12.5035 4.78681 11.938 4.54917 11.3359 4.4062V2H8.6685ZM13.3364 10.0022C13.3364 11.8437 11.8437 13.3364 10.0022 13.3364C8.16074 13.3364 6.66795 11.8437 6.66795 10.0022C6.66795 8.16074 8.16074 6.66795 10.0022 6.66795C11.8437 6.66795 13.3364 8.16074 13.3364 10.0022Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const User = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.37042 18C2.96022 18 2.63083 17.8757 2.38222 17.6271C2.13362 17.3785 2.00622 17.0491 2 16.6389V15C2 15 4.5 14.5 7.4537 12.5463V11.1852C7.0435 10.9055 6.71411 10.5171 6.46551 10.0199C6.2169 9.52268 6.0926 9.00062 6.0926 8.4537V6.41206C6.0926 5.45494 6.422 4.64699 7.0808 3.98819C7.73959 3.32939 8.54754 3 9.50466 3C10.4618 3 11.2697 3.32939 11.9285 3.98819C12.5873 4.64699 12.9167 5.45494 12.9167 6.41206V8.4537C12.9105 9.00062 12.7831 9.52268 12.5345 10.0199C12.2859 10.5171 11.9565 10.9055 11.5463 11.1852V12.5463C11.5463 12.5463 14.5 14.5 17 15V16.6389C17 17.0491 16.8757 17.3785 16.6271 17.6271C16.3785 17.8757 16.0491 18 15.6389 18H3.37042Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Wait = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17 10.5C17 14.6421 13.6421 18 9.5 18C5.35786 18 2 14.6421 2 10.5C2 6.35786 5.35786 3 9.5 3C13.6421 3 17 6.35786 17 10.5ZM15 10.5C15 13.5376 12.5376 16 9.5 16C6.46243 16 4 13.5376 4 10.5C4 7.46243 6.46243 5 9.5 5C12.5376 5 15 7.46243 15 10.5ZM8.15918 7.45947L6.54285 8.54204L9.02449 12.5586L13.3955 11.3898L12.8567 9.49533L9.98753 10.3614L8.15918 7.45947Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Clear = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M9.5 18C13.6421 18 17 14.6421 17 10.5C17 6.35786 13.6421 3 9.5 3C5.35786 3 2 6.35786 2 10.5C2 14.6421 5.35786 18 9.5 18ZM8.36863 10.5L5.75233 7.88371L6.88371 6.75233L9.5 9.36863L12.1163 6.75233L13.2477 7.88371L10.6314 10.5L13.2477 13.1163L12.1163 14.2477L9.5 11.6314L6.88371 14.2477L5.75233 13.1163L8.36863 10.5Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Money = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M17 10.5C17 14.6421 13.6421 18 9.5 18C5.35786 18 2 14.6421 2 10.5C2 6.35786 5.35786 3 9.5 3C13.6421 3 17 6.35786 17 10.5ZM6 10H7V6H11.0021C12.1055 6 13 6.8939 13 8.00488V8.99512C13 10.1024 12.1017 11 11.0021 11H8V12H11V13H8V15H7V13H6V12H7V11H6V10ZM8.2 9.8V7.2H11.0021C11.4435 7.2 11.8 7.55733 11.8 8.00488V8.99512C11.8 9.43892 11.4397 9.8 11.0021 9.8H8.2Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const HelpCircle = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10 3C14.1 3 17.5 6.4 17.5 10.5C17.5 14.7 14.1 18 10 18C5.8 18 2.5 14.7 2.5 10.5C2.5 6.4 5.8 3 10 3V3ZM9 15.1H10.5V13.5H9V15.1ZM13.2 8.3C13.2 7.5 12.9 6.9 12.3 6.4C11.6 5.9 10.8 5.6 9.9 5.6C9 5.6 8.2 5.9 7.5 6.4C6.9 7 6.5 7.7 6.3 8.7L7.8 8.9C7.9 8.3 8.1 7.9 8.5 7.6C8.9 7.3 9.4 7.1 10 7.1C10.6 7.1 11 7.2 11.2 7.4C11.5 7.7 11.6 8 11.6 8.5C11.6 9.1 11.2 9.6 10.4 10C10.2 10.1 9.92372 10.2993 9.62372 10.5993C9.42372 10.7993 9 11.1874 9 11.7V12.4H10.5C10.5 12.4 10.3021 11.7005 10.91 11.2841C11.518 10.8676 12.0064 10.505 12.3 10.2L12.7569 9.78925C12.9569 9.48925 13 9.4 13.1 9.1C13.2 8.9 13.2 8.7 13.2 8.6C13.2 8.5 13.2 8.4 13.2 8.3Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n\nexport const Kebab = (props: SVGIconProps) => (\n  <SvgIcon {...props}>\n    <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 5C12 6.10457 11.1046 7 10 7C8.89543 7 8 6.10457 8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5ZM12 11C12 12.1046 11.1046 13 10 13C8.89543 13 8 12.1046 8 11C8 9.89543 8.89543 9 10 9C11.1046 9 12 9.89543 12 11ZM10 19C11.1046 19 12 18.1046 12 17C12 15.8954 11.1046 15 10 15C8.89543 15 8 15.8954 8 17C8 18.1046 8.89543 19 10 19Z\"\n      />\n    </svg>\n  </SvgIcon>\n);\n"]}

package/internal/icons/SpinnerIcon/SpinnerIcon.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { isIE11 } from "../../../lib/client";
-import { createColorAnimation, createLengthAnimation, createOffsetAnimation, createRotationAnimation, SpinnerFallbackAnimationRunner } from "../../../components/Spinner/SpinnerFallbackAnimation";
+import { SpinnerFallbackAnimationRunner, createOffsetAnimation, createLengthAnimation, createColorAnimation, createRotationAnimation } from "../../../components/Spinner/SpinnerFallbackAnimation";
 import { isTestEnv } from "../../../lib/currentEnvironment";
-import { useEmotion } from "../../../lib/theming/Emotion";
-import { useTheme } from "../../../lib/theming/useTheme";
-import { getStyles } from "../SpinnerIcon.styles";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../SpinnerIcon.styles";
 export var sizes = {
   big: {
     size: 96,
@@ -28,7 +28,7 @@ var isSizeAlias = function isSizeAlias(size) {
 };
 
 export var SpinnerIcon = function SpinnerIcon(_ref) {
-  var _emotion$cx, _emotion$cx2;
+  var _cx, _cx2;
 
   var size = _ref.size,
       className = _ref.className,
@@ -36,7 +36,6 @@ export var SpinnerIcon = function SpinnerIcon(_ref) {
       inline = _ref.inline,
       width = _ref.width,
       color = _ref.color;
-  var emotion = useEmotion();
 
   var _size = isSizeAlias(size) ? sizes[size] : size;
 
@@ -50,11 +49,11 @@ export var SpinnerIcon = function SpinnerIcon(_ref) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var fallbackAnimationRef = React.useRef(null); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    var _useTheme = useTheme(),
-        red = _useTheme.red,
-        yellow = _useTheme.yellow,
-        green = _useTheme.green,
-        brand = _useTheme.brand; // eslint-disable-next-line react-hooks/rules-of-hooks
+    var _React$useContext = React.useContext(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.useEffect(function () {
@@ -83,12 +82,11 @@ export var SpinnerIcon = function SpinnerIcon(_ref) {
     }, [dimmed, red, yellow, green, brand]);
   }
 
-  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("span", {
-    className: emotion.cx(styles.root(), (_emotion$cx = {}, _emotion$cx[styles.rootInline()] = inline, _emotion$cx))
+    className: cx(styles.root(), (_cx = {}, _cx[styles.rootInline()] = inline, _cx))
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 " + currentSize.size + " " + currentSize.size,
-    className: emotion.cx(styles.icon(), className, (_emotion$cx2 = {}, _emotion$cx2[styles.iconInline()] = inline, _emotion$cx2)),
+    className: cx(styles.icon(), className, (_cx2 = {}, _cx2[styles.iconInline()] = inline, _cx2)),
     width: currentSize.size,
     height: currentSize.size,
     fill: "none",

package/internal/icons/SpinnerIcon/SpinnerIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SpinnerIcon.tsx"],"names":["React","isIE11","createColorAnimation","createLengthAnimation","createOffsetAnimation","createRotationAnimation","SpinnerFallbackAnimationRunner","isTestEnv","useEmotion","useTheme","getStyles","sizes","big","size","width","radius","normal","mini","isSizeAlias","SpinnerIcon","className","dimmed","inline","color","emotion","_size","currentSize","svgRef","useRef","fallbackAnimationRef","red","yellow","green","brand","useEffect","svg","current","setStyleProperty","style","setProperty","fallbackAnimation","stop","removeAttribute","styles","cx","root","rootInline","icon","iconInline"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isIE11 } from '../../lib/client';\nimport {\n  createColorAnimation,\n  createLengthAnimation,\n  createOffsetAnimation,\n  createRotationAnimation,\n  SpinnerFallbackAnimationRunner,\n} from '../../components/Spinner/SpinnerFallbackAnimation';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { useTheme } from '../../lib/theming/useTheme';\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  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 emotion = useEmotion();\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 } = useTheme();\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  const styles = getStyles(emotion);\n\n  return (\n    <span className={emotion.cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={emotion.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"]}
+{"version":3,"sources":["SpinnerIcon.tsx"],"names":["React","isIE11","SpinnerFallbackAnimationRunner","createOffsetAnimation","createLengthAnimation","createColorAnimation","createRotationAnimation","isTestEnv","ThemeContext","cx","styles","sizes","big","size","width","radius","normal","mini","isSizeAlias","SpinnerIcon","className","dimmed","inline","color","_size","currentSize","svgRef","useRef","fallbackAnimationRef","useContext","red","yellow","green","brand","useEffect","svg","current","setStyleProperty","style","setProperty","fallbackAnimation","stop","removeAttribute","root","rootInline","icon","iconInline"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA;AACEC,8BADF;AAEEC,qBAFF;AAGEC,qBAHF;AAIEC,oBAJF;AAKEC,uBALF;AAMO,mDANP;AAOA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,sBAAvB;;;;;;;;;;;;;;;;;AAiBA,OAAO,IAAMC,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,KAAK,EAAE,CAFJ;AAGHC,IAAAA,MAAM,EAAE,EAHL,EADc;;AAMnBC,EAAAA,MAAM,EAAE;AACNH,IAAAA,IAAI,EAAE,EADA;AAENC,IAAAA,KAAK,EAAE,CAFD;AAGNC,IAAAA,MAAM,EAAE,EAHF,EANW;;AAWnBE,EAAAA,IAAI,EAAE;AACJJ,IAAAA,IAAI,EAAE,EADF;AAEJC,IAAAA,KAAK,EAAE,GAFH;AAGJC,IAAAA,MAAM,EAAE,CAHJ,EAXa,EAAd;;;;AAkBP,IAAMG,WAAW,GAAG,SAAdA,WAAc,CAACL,IAAD,EAA+C;AACjE,SAAO,OAAOA,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,IAAIF,KAA3C;AACD,CAFD;;AAIA,OAAO,IAAMQ,WAAW,GAAG,SAAdA,WAAc,OAAyE,mBAAtEN,IAAsE,QAAtEA,IAAsE,CAAhEO,SAAgE,QAAhEA,SAAgE,CAArDC,MAAqD,QAArDA,MAAqD,CAA7CC,MAA6C,QAA7CA,MAA6C,CAArCR,KAAqC,QAArCA,KAAqC,CAA9BS,KAA8B,QAA9BA,KAA8B;AAClG,MAAMC,KAAK,GAAGN,WAAW,CAACL,IAAD,CAAX,GAAoBF,KAAK,CAACE,IAAD,CAAzB,GAAkCA,IAAhD;AACA,MAAMY,WAAW,GAAGH,MAAM,GAAGX,KAAK,CAACM,IAAT,GAAgBO,KAA1C;AACA,MAAME,MAAM,GAAG1B,KAAK,CAAC2B,MAAN,CAA4B,IAA5B,CAAf;;AAEA,MAAI1B,MAAM,IAAI,CAACM,SAAf,EAA0B;AACxB;AACA;AACA;;AAEA;AACA,QAAMqB,oBAAoB,GAAG5B,KAAK,CAAC2B,MAAN,CAAoD,IAApD,CAA7B;AACA;AACA,4BAAsC3B,KAAK,CAAC6B,UAAN,CAAiBrB,YAAjB,CAAtC,CAAQsB,GAAR,qBAAQA,GAAR,CAAaC,MAAb,qBAAaA,MAAb,CAAqBC,KAArB,qBAAqBA,KAArB,CAA4BC,KAA5B,qBAA4BA,KAA5B;AACA;AACAjC,IAAAA,KAAK,CAACkC,SAAN,CAAgB,YAAM;AACpB,UAAMC,GAAG,GAAGT,MAAM,CAACU,OAAnB;;AAEA,UAAMC,gBAAoD,GAAG,SAAvDA,gBAAuD,GAAa;AACxE,YAAIF,GAAJ,EAAS;AACP,wBAAAA,GAAG,CAACG,KAAJ,EAAUC,WAAV;AACD;AACF,OAJD;;AAMAX,MAAAA,oBAAoB,CAACQ,OAArB,GAA+B,IAAIlC,8BAAJ;;AAE3BC,MAAAA,qBAAqB,CAAC,CAAD,EAAI,CAAC,GAAL,EAAU,IAAV,EAAgBkC,gBAAhB,EAAkC,GAAlC,CAFM;AAG3BjC,MAAAA,qBAAqB,CAAC,CAAC,EAAD,EAAK,GAAL,CAAD,EAAY,CAAC,GAAD,EAAM,EAAN,CAAZ,EAAuB,IAAvB,EAA6BiC,gBAA7B,EAA+C,GAA/C,CAHM;AAI3B/B,MAAAA,uBAAuB,CAAC,CAAD,EAAI,GAAJ,EAAS,IAAT,EAAe+B,gBAAf,CAJI;AAKvBhB,MAAAA,MAAM,GAAG,EAAH,GAAQ,CAAChB,oBAAoB,CAAC,CAACyB,GAAD,EAAMC,MAAN,EAAcC,KAAd,EAAqBC,KAArB,CAAD,EAA8B,IAA9B,EAAoCI,gBAApC,CAArB,CALS;;AAO7B,aAAO,EAPsB,CAA/B;;;AAUA,aAAO,YAAM;AACX,YAAMG,iBAAiB,GAAGZ,oBAAoB,CAACQ,OAA/C;AACA,YAAII,iBAAJ,EAAuB;AACrBA,UAAAA,iBAAiB,CAACC,IAAlB;AACD;AACD,YAAIN,GAAJ,EAAS;AACPA,UAAAA,GAAG,CAACO,eAAJ,CAAoB,OAApB;AACD;AACF,OARD;AASD,KA5BD,EA4BG,CAACrB,MAAD,EAASS,GAAT,EAAcC,MAAd,EAAsBC,KAAtB,EAA6BC,KAA7B,CA5BH;AA6BD;;AAED;AACE,kCAAM,SAAS,EAAExB,EAAE,CAACC,MAAM,CAACiC,IAAP,EAAD,iBAAmBjC,MAAM,CAACkC,UAAP,EAAnB,IAAyCtB,MAAzC,OAAnB;AACE;AACE,MAAA,OAAO,WAASG,WAAW,CAACZ,IAArB,SAA6BY,WAAW,CAACZ,IADlD;AAEE,MAAA,SAAS,EAAEJ,EAAE,CAACC,MAAM,CAACmC,IAAP,EAAD,EAAgBzB,SAAhB;AACVV,MAAAA,MAAM,CAACoC,UAAP,EADU,IACYxB,MADZ,QAFf;;AAKE,MAAA,KAAK,EAAEG,WAAW,CAACZ,IALrB;AAME,MAAA,MAAM,EAAEY,WAAW,CAACZ,IANtB;AAOE,MAAA,IAAI,EAAC,MAPP;AAQE,MAAA,MAAM,EAAEU,KARV;AASE,MAAA,eAAe,EAAM,KAAKE,WAAW,CAACV,MAAlB,GAA4B,CAAjC,UAAwC,KAAKU,WAAW,CAACV,MAAlB,GAA4B,CATpF;AAUE,MAAA,gBAAgB,EAAC,GAVnB;AAWE,MAAA,WAAW,EAAED,KAAK,IAAIW,WAAW,CAACX,KAXpC;AAYE,MAAA,GAAG,EAAEY,MAZP;AAaE,MAAA,SAAS,EAAC,OAbZ;AAcE,qBAAY,MAdd;;AAgBE,oCAAQ,EAAE,EAAED,WAAW,CAACZ,IAAZ,GAAmB,CAA/B,EAAkC,EAAE,EAAEY,WAAW,CAACZ,IAAZ,GAAmB,CAAzD,EAA4D,CAAC,EAAEY,WAAW,CAACV,MAA3E,GAhBF,CADF,CADF;;;;AAsBD,CApEM","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"]}

package/internal/icons/SpinnerIcon.styles/SpinnerIcon.styles.js

@@ -2,20 +2,18 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        margin-left: -1px;\n        margin-right: -1px;\n      "])));
-    },
-    rootInline: function rootInline() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        margin-left: -0.0714285714285714em;\n        margin-right: -0.0714285714285714em;\n      "])));
-    },
-    icon: function icon() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        margin-bottom: -3px;\n        border-radius: 50%;\n        overflow: visible;\n      "])));
-    },
-    iconInline: function iconInline() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        height: 1.1428571428571428em;\n        width: 1.1428571428571428em;\n        margin-bottom: -0.2428571428571428em;\n        stroke-width: 0.10714285714285714em;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    "])));
+  },
+  rootInline: function rootInline() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    "])));
+  },
+  icon: function icon() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    "])));
+  },
+  iconInline: function iconInline() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    "])));
+  }
+});

package/internal/icons/SpinnerIcon.styles/SpinnerIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SpinnerIcon.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","rootInline","icon","iconInline"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;AAKD,OAPU;AAQXC,MAAAA,UARW,wBAQE;AACX,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAbU;;AAeXE,MAAAA,IAfW,kBAeJ;AACL,eAAOJ,OAAO,CAACE,GAAf;;;;;AAKD,OArBU;;AAuBXG,MAAAA,UAvBW,wBAuBE;AACX,eAAOL,OAAO,CAACE,GAAf;;;;;;AAMD,OA9BU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-block;\n        margin-left: -1px;\n        margin-right: -1px;\n      `;\n    },\n    rootInline() {\n      return emotion.css`\n        margin-left: -0.0714285714285714em;\n        margin-right: -0.0714285714285714em;\n      `;\n    },\n\n    icon() {\n      return emotion.css`\n        margin-bottom: -3px;\n        border-radius: 50%;\n        overflow: visible;\n      `;\n    },\n\n    iconInline() {\n      return emotion.css`\n        height: 1.1428571428571428em;\n        width: 1.1428571428571428em;\n        margin-bottom: -0.2428571428571428em;\n        stroke-width: 0.10714285714285714em;\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["SpinnerIcon.styles.ts"],"names":["css","memoizeStyle","styles","root","rootInline","icon","iconInline"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;;AAKD,GAPgC;AAQjCI,EAAAA,UARiC,wBAQpB;AACX,WAAOJ,GAAP;;;;AAID,GAbgC;;AAejCK,EAAAA,IAfiC,kBAe1B;AACL,WAAOL,GAAP;;;;;AAKD,GArBgC;;AAuBjCM,EAAAA,UAvBiC,wBAuBpB;AACX,WAAON,GAAP;;;;;;AAMD,GA9BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    `;\n  },\n  rootInline() {\n    return css`\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    `;\n  },\n\n  icon() {\n    return css`\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    `;\n  },\n\n  iconInline() {\n    return css`\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    `;\n  },\n});\n"]}

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

@@ -1,5 +1,4 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     rootInline(): string;
     icon(): string;

package/internal/icons2022/BaseIcon/BaseIcon.js

@@ -3,8 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["color", "size", "style", "aria-hidden", "viewBoxSize", "align", "children"];
 import React from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
-import { useEmotion } from "../../../lib/theming/Emotion";
-import { getStyles } from "../BaseIcon.styles";
+import { styles } from "../BaseIcon.styles";
 export var BaseIcon = forwardRefAndName('BaseIcon', function (_ref, ref) {
   var color = _ref.color,
       size = _ref.size,
@@ -18,7 +17,6 @@ export var BaseIcon = forwardRefAndName('BaseIcon', function (_ref, ref) {
       children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var emotion = useEmotion();
   var icon = /*#__PURE__*/React.createElement("svg", _extends({
     ref: ref,
     width: size || viewBoxSize,
@@ -34,7 +32,6 @@ export var BaseIcon = forwardRefAndName('BaseIcon', function (_ref, ref) {
   }, rest), children);
 
   if (align === 'center') {
-    var styles = getStyles(emotion);
     return /*#__PURE__*/React.createElement("span", {
       className: styles.centeredIcon()
     }, icon);

package/internal/icons2022/BaseIcon/BaseIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BaseIcon.tsx"],"names":["React","forwardRefAndName","useEmotion","getStyles","BaseIcon","ref","color","size","style","ariaHidden","viewBoxSize","align","children","rest","emotion","icon","fill","marginBottom","flexShrink","styles","centeredIcon"],"mappings":"4PAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAA2D,6BAA3D;;AAEA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,SAAT,QAA0B,mBAA1B;;;;;;;;;;;;;AAaA,OAAO,IAAMC,QAAQ,GAAGH,iBAAiB;AACvC,UADuC;AAEvC;;AAEEI,GAFF;AAGK,KAFDC,KAEC,QAFDA,KAEC,CAFMC,IAEN,QAFMA,IAEN,CAFYC,KAEZ,QAFYA,KAEZ,wBAFmB,aAEnB,EAFkCC,UAElC,gCAF+C,IAE/C,2CAFqDC,WAErD,CAFqDA,WAErD,iCAFmE,EAEnE,sCAFuEC,KAEvE,CAFuEA,KAEvE,2BAF+E,QAE/E,cAFyFC,QAEzF,QAFyFA,QAEzF,CAFsGC,IAEtG;AACH,MAAMC,OAAO,GAAGZ,UAAU,EAA1B;AACA,MAAMa,IAAI;AACR;AACE,IAAA,GAAG,EAAEV,GADP;AAEE,IAAA,KAAK,EAAEE,IAAI,IAAIG,WAFjB;AAGE,IAAA,MAAM,EAAEH,IAAI,IAAIG,WAHlB;AAIE,IAAA,KAAK;AACHM,MAAAA,IAAI,EAAEV,KAAF,WAAEA,KAAF,GAAW,cADZ;AAEHW,MAAAA,YAAY,EAAEN,KAAK,KAAK,MAAV,IAAoBA,KAAK,KAAK,QAA9B,GAAyC,CAAzC,GAA6C,WAFxD;AAGHO,MAAAA,UAAU,EAAE,CAHT;AAIAV,IAAAA,KAJA,CAJP;;AAUE,IAAA,KAAK,EAAC,4BAVR;AAWE,IAAA,OAAO,WAASE,WAAT,SAAwBA,WAXjC;AAYE,mBAAaD,UAZf;AAaMI,EAAAA,IAbN;;AAeGD,EAAAA,QAfH,CADF;;;;AAoBA,MAAID,KAAK,KAAK,QAAd,EAAwB;AACtB,QAAMQ,MAAM,GAAGhB,SAAS,CAACW,OAAD,CAAxB;AACA,wBAAO,8BAAM,SAAS,EAAEK,MAAM,CAACC,YAAP,EAAjB,IAAyCL,IAAzC,CAAP;AACD;;AAED,SAAOA,IAAP;AACD,CAjCsC,CAAlC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName, ReactUIComponentWithRef } from '../../lib/forwardRefAndName';\nimport { SvgIconProps } from '../icons/16px';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './BaseIcon.styles';\n\nexport type IconProps = {\n  size?: number;\n  viewBoxSize?: number;\n  color?: string;\n  align?: 'center' | 'baseline' | 'none';\n} & React.SVGAttributes<SVGElement>;\n\nexport type BothIconType =\n  | ReactUIComponentWithRef<HTMLElement, SvgIconProps>\n  | ReactUIComponentWithRef<SVGSVGElement, IconProps>;\n\nexport const BaseIcon = forwardRefAndName<SVGSVGElement, IconProps>(\n  'BaseIcon',\n  (\n    { color, size, style, 'aria-hidden': ariaHidden = true, viewBoxSize = 16, align = 'center', children, ...rest },\n    ref,\n  ) => {\n    const emotion = useEmotion();\n    const icon = (\n      <svg\n        ref={ref}\n        width={size || viewBoxSize}\n        height={size || viewBoxSize}\n        style={{\n          fill: color ?? 'currentColor',\n          marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',\n          flexShrink: 0,\n          ...style,\n        }}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        aria-hidden={ariaHidden}\n        {...rest}\n      >\n        {children}\n      </svg>\n    );\n\n    if (align === 'center') {\n      const styles = getStyles(emotion);\n      return <span className={styles.centeredIcon()}>{icon}</span>;\n    }\n\n    return icon;\n  },\n);\n"]}
+{"version":3,"sources":["BaseIcon.tsx"],"names":["React","forwardRefAndName","styles","BaseIcon","ref","color","size","style","ariaHidden","viewBoxSize","align","children","rest","icon","fill","marginBottom","flexShrink","centeredIcon"],"mappings":"4PAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAA2D,6BAA3D;;;AAGA,SAASC,MAAT,QAAuB,mBAAvB;;;;;;;;;;;;;AAaA,OAAO,IAAMC,QAAQ,GAAGF,iBAAiB;AACvC,UADuC;AAEvC;;AAEEG,GAFF;AAGK,KAFDC,KAEC,QAFDA,KAEC,CAFMC,IAEN,QAFMA,IAEN,CAFYC,KAEZ,QAFYA,KAEZ,wBAFmB,aAEnB,EAFkCC,UAElC,gCAF+C,IAE/C,2CAFqDC,WAErD,CAFqDA,WAErD,iCAFmE,EAEnE,sCAFuEC,KAEvE,CAFuEA,KAEvE,2BAF+E,QAE/E,cAFyFC,QAEzF,QAFyFA,QAEzF,CAFsGC,IAEtG;AACH,MAAMC,IAAI;AACR;AACE,IAAA,GAAG,EAAET,GADP;AAEE,IAAA,KAAK,EAAEE,IAAI,IAAIG,WAFjB;AAGE,IAAA,MAAM,EAAEH,IAAI,IAAIG,WAHlB;AAIE,IAAA,KAAK;AACHK,MAAAA,IAAI,EAAET,KAAF,WAAEA,KAAF,GAAW,cADZ;AAEHU,MAAAA,YAAY,EAAEL,KAAK,KAAK,MAAV,IAAoBA,KAAK,KAAK,QAA9B,GAAyC,CAAzC,GAA6C,WAFxD;AAGHM,MAAAA,UAAU,EAAE,CAHT;AAIAT,IAAAA,KAJA,CAJP;;AAUE,IAAA,KAAK,EAAC,4BAVR;AAWE,IAAA,OAAO,WAASE,WAAT,SAAwBA,WAXjC;AAYE,mBAAaD,UAZf;AAaMI,EAAAA,IAbN;;AAeGD,EAAAA,QAfH,CADF;;;;AAoBA,MAAID,KAAK,KAAK,QAAd,EAAwB;AACtB,wBAAO,8BAAM,SAAS,EAAER,MAAM,CAACe,YAAP,EAAjB,IAAyCJ,IAAzC,CAAP;AACD;;AAED,SAAOA,IAAP;AACD,CA/BsC,CAAlC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName, ReactUIComponentWithRef } from '../../lib/forwardRefAndName';\nimport { SvgIconProps } from '../icons/16px';\n\nimport { styles } from './BaseIcon.styles';\n\nexport type IconProps = {\n  size?: number;\n  viewBoxSize?: number;\n  color?: string;\n  align?: 'center' | 'baseline' | 'none';\n} & React.SVGAttributes<SVGElement>;\n\nexport type BothIconType =\n  | ReactUIComponentWithRef<HTMLElement, SvgIconProps>\n  | ReactUIComponentWithRef<SVGSVGElement, IconProps>;\n\nexport const BaseIcon = forwardRefAndName<SVGSVGElement, IconProps>(\n  'BaseIcon',\n  (\n    { color, size, style, 'aria-hidden': ariaHidden = true, viewBoxSize = 16, align = 'center', children, ...rest },\n    ref,\n  ) => {\n    const icon = (\n      <svg\n        ref={ref}\n        width={size || viewBoxSize}\n        height={size || viewBoxSize}\n        style={{\n          fill: color ?? 'currentColor',\n          marginBottom: align === 'none' || align === 'center' ? 0 : '-0.1875em',\n          flexShrink: 0,\n          ...style,\n        }}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        aria-hidden={ariaHidden}\n        {...rest}\n      >\n        {children}\n      </svg>\n    );\n\n    if (align === 'center') {\n      return <span className={styles.centeredIcon()}>{icon}</span>;\n    }\n\n    return icon;\n  },\n);\n"]}

package/internal/icons2022/BaseIcon.styles/BaseIcon.styles.js

@@ -3,11 +3,9 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject;
 
 import { ZERO_WIDTH_SPACE_CSS } from "../../../lib/chars";
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    centeredIcon: function centeredIcon() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        align-items: center;\n\n        &::before {\n          content: '", "';\n        }\n      "])), ZERO_WIDTH_SPACE_CSS);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  centeredIcon: function centeredIcon() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '", "';\n      }\n    "])), ZERO_WIDTH_SPACE_CSS);
+  }
+});

package/internal/icons2022/BaseIcon.styles/BaseIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BaseIcon.styles.ts"],"names":["ZERO_WIDTH_SPACE_CSS","memoizeStyle","getStyles","emotion","centeredIcon","css"],"mappings":";;AAEA,SAASA,oBAAT,QAAqC,iBAArC;AACA,SAASC,YAAT,QAA6B,2BAA7B;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,YADW,0BACI;AACb,eAAOD,OAAO,CAACE,GAAf;;;;;AAKgBL,QAAAA,oBALhB;;;AAQD,OAVU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    centeredIcon() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["BaseIcon.styles.ts"],"names":["ZERO_WIDTH_SPACE_CSS","css","memoizeStyle","styles","centeredIcon"],"mappings":"oHAAA,SAASA,oBAAT,QAAqC,iBAArC;AACA,SAASC,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,YADiC,0BAClB;AACb,WAAOH,GAAP;;;;;AAKgBD,IAAAA,oBALhB;;;AAQD,GAVgC,EAAD,CAA3B","sourcesContent":["import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  centeredIcon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '${ZERO_WIDTH_SPACE_CSS}';\n      }\n    `;\n  },\n});\n"]}

package/internal/icons2022/BaseIcon.styles.d.ts

@@ -1,4 +1,3 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     centeredIcon(): string;
 };

package/internal/icons2022/LoadingIcon/LoadingIcon.js

@@ -2,19 +2,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 /* eslint-disable react/display-name */
 
 import React from 'react';
-import { getStyles } from "../../../components/Spinner/Spinner.styles";
-import { useEmotion } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { styles } from "../../../components/Spinner/Spinner.styles";
+import { cx } from "../../../lib/theming/Emotion";
 import { SpinnerIcon } from "../../icons/SpinnerIcon";
-import { useTheme } from "../../../lib/theming/useTheme";
 import { iconSizer } from "../iconSizer";
 
 var Icon = function Icon(props) {
-  var theme = useTheme();
-  var emotion = useEmotion();
-  var styles = getStyles(emotion);
+  var theme = React.useContext(ThemeContext);
   return /*#__PURE__*/React.createElement(SpinnerIcon, _extends({
     dimmed: true,
-    className: emotion.cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation())
+    className: cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation())
   }, props));
 };
 

package/internal/icons2022/LoadingIcon/LoadingIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LoadingIcon.tsx"],"names":["React","getStyles","useEmotion","SpinnerIcon","useTheme","iconSizer","Icon","props","theme","emotion","styles","cx","circle","circleDimmedColor","circleWithoutColorAnimation","LoadingIcon","small","medium","size","width","radius","large"],"mappings":"2DAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,yCAA1B;AACA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,WAAT,QAA8C,sBAA9C;AACA,SAASC,QAAT,QAAyB,4BAAzB;;AAEA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAA6B;AACxC,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;AACA,MAAMK,OAAO,GAAGP,UAAU,EAA1B;AACA,MAAMQ,MAAM,GAAGT,SAAS,CAACQ,OAAD,CAAxB;;AAEA;AACE,wBAAC,WAAD;AACE,MAAA,MAAM,MADR;AAEE,MAAA,SAAS,EAAEA,OAAO,CAACE,EAAR;AACTD,MAAAA,MAAM,CAACE,MAAP,CAAcJ,KAAd,CADS;AAETE,MAAAA,MAAM,CAACG,iBAAP,CAAyBL,KAAzB,CAFS;AAGTE,MAAAA,MAAM,CAACI,2BAAP,EAHS,CAFb;;AAOMP,IAAAA,KAPN,EADF;;;AAWD,CAhBD;;AAkBA,OAAO,IAAMQ,WAAW,GAAGV,SAAS;AAClC;AACEW,EAAAA,KAAK,EAAE,sCAAM,oBAAC,IAAD,IAAM,IAAI,EAAC,MAAX,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE;AACN,0BAAC,IAAD;AACE,QAAA,IAAI,EAAE;AACJC,UAAAA,IAAI,EAAE,EADF;AAEJC,UAAAA,KAAK,EAAE,CAFH;AAGJC,UAAAA,MAAM,EAAE,CAHJ,EADR,GADM,GAFV;;;;AAWEC,EAAAA,KAAK,EAAE;AACL,0BAAC,IAAD;AACE,QAAA,IAAI,EAAE;AACJH,UAAAA,IAAI,EAAE,EADF;AAEJC,UAAAA,KAAK,EAAE,GAFH;AAGJC,UAAAA,MAAM,EAAE,CAHJ,EADR,GADK,GAXT,EADkC;;;;;AAsBlC,aAtBkC,CAA7B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { getStyles } from '../../components/Spinner/Spinner.styles';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { SpinnerIcon, SpinnerIconProps } from '../icons/SpinnerIcon';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { iconSizer } from './iconSizer';\n\nconst Icon = (props: SpinnerIconProps) => {\n  const theme = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <SpinnerIcon\n      dimmed\n      className={emotion.cx(\n        styles.circle(theme),\n        styles.circleDimmedColor(theme),\n        styles.circleWithoutColorAnimation(),\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const LoadingIcon = iconSizer<Omit<SpinnerIconProps, 'size'>>(\n  {\n    small: () => <Icon size=\"mini\" />,\n    medium: () => (\n      <Icon\n        size={{\n          size: 20,\n          width: 1,\n          radius: 6,\n        }}\n      />\n    ),\n    large: () => (\n      <Icon\n        size={{\n          size: 24,\n          width: 1.5,\n          radius: 8,\n        }}\n      />\n    ),\n  },\n  'LoadingIcon',\n);\n"]}
+{"version":3,"sources":["LoadingIcon.tsx"],"names":["React","ThemeContext","styles","cx","SpinnerIcon","iconSizer","Icon","props","theme","useContext","circle","circleDimmedColor","circleWithoutColorAnimation","LoadingIcon","small","medium","size","width","radius","large"],"mappings":"2DAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,yCAAvB;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA8C,sBAA9C;;AAEA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAA6B;AACxC,MAAMC,KAAK,GAAGR,KAAK,CAACS,UAAN,CAAiBR,YAAjB,CAAd;AACA;AACE,wBAAC,WAAD;AACE,MAAA,MAAM,MADR;AAEE,MAAA,SAAS,EAAEE,EAAE,CAACD,MAAM,CAACQ,MAAP,CAAcF,KAAd,CAAD,EAAuBN,MAAM,CAACS,iBAAP,CAAyBH,KAAzB,CAAvB,EAAwDN,MAAM,CAACU,2BAAP,EAAxD,CAFf;AAGML,IAAAA,KAHN,EADF;;;AAOD,CATD;;AAWA,OAAO,IAAMM,WAAW,GAAGR,SAAS;AAClC;AACES,EAAAA,KAAK,EAAE,sCAAM,oBAAC,IAAD,IAAM,IAAI,EAAC,MAAX,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE;AACN,0BAAC,IAAD;AACE,QAAA,IAAI,EAAE;AACJC,UAAAA,IAAI,EAAE,EADF;AAEJC,UAAAA,KAAK,EAAE,CAFH;AAGJC,UAAAA,MAAM,EAAE,CAHJ,EADR,GADM,GAFV;;;;AAWEC,EAAAA,KAAK,EAAE;AACL,0BAAC,IAAD;AACE,QAAA,IAAI,EAAE;AACJH,UAAAA,IAAI,EAAE,EADF;AAEJC,UAAAA,KAAK,EAAE,GAFH;AAGJC,UAAAA,MAAM,EAAE,CAHJ,EADR,GADK,GAXT,EADkC;;;;;AAsBlC,aAtBkC,CAA7B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { styles } from '../../components/Spinner/Spinner.styles';\nimport { cx } from '../../lib/theming/Emotion';\nimport { SpinnerIcon, SpinnerIconProps } from '../icons/SpinnerIcon';\n\nimport { iconSizer } from './iconSizer';\n\nconst Icon = (props: SpinnerIconProps) => {\n  const theme = React.useContext(ThemeContext);\n  return (\n    <SpinnerIcon\n      dimmed\n      className={cx(styles.circle(theme), styles.circleDimmedColor(theme), styles.circleWithoutColorAnimation())}\n      {...props}\n    />\n  );\n};\n\nexport const LoadingIcon = iconSizer<Omit<SpinnerIconProps, 'size'>>(\n  {\n    small: () => <Icon size=\"mini\" />,\n    medium: () => (\n      <Icon\n        size={{\n          size: 20,\n          width: 1,\n          radius: 6,\n        }}\n      />\n    ),\n    large: () => (\n      <Icon\n        size={{\n          size: 24,\n          width: 1.5,\n          radius: 8,\n        }}\n      />\n    ),\n  },\n  'LoadingIcon',\n);\n"]}

package/lib/styles/Mixins/Mixins.js

@@ -2,9 +2,10 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2;
 
-export var resetButton = function resetButton(emotion) {
-  return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    outline: none;\n    border: none;\n    margin: 0; /* Need for Safari. */\n    padding: 0;\n    width: auto;\n    overflow: visible; /* On IE it's hidden by default. */\n    background: transparent;\n\n    /* inherit font & color from ancestor */\n    color: inherit;\n    font: inherit;\n\n    /* Normalize 'line-height'. Cannot be changed from 'normal' in Firefox 4+. */\n    line-height: normal;\n\n    /* Corrects font smoothing for webkit */\n    -webkit-font-smoothing: inherit;\n    -moz-osx-font-smoothing: inherit;\n\n    /* Corrects inability to style clickable 'input' types in iOS */\n    -webkit-appearance: none;\n    text-align: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
+import { css } from "../../theming/Emotion";
+export var resetButton = function resetButton() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    outline: none;\n    border: none;\n    margin: 0; /* Need for Safari. */\n    padding: 0;\n    width: auto;\n    overflow: visible; /* On IE it's hidden by default. */\n    background: transparent;\n\n    /* inherit font & color from ancestor */\n    color: inherit;\n    font: inherit;\n\n    /* Normalize 'line-height'. Cannot be changed from 'normal' in Firefox 4+. */\n    line-height: normal;\n\n    /* Corrects font smoothing for webkit */\n    -webkit-font-smoothing: inherit;\n    -moz-osx-font-smoothing: inherit;\n\n    /* Corrects inability to style clickable 'input' types in iOS */\n    -webkit-appearance: none;\n    text-align: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
 };
-export var resetText = function resetText(emotion) {
-  return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    letter-spacing: normal;\n    line-height: normal;\n    font-family: inherit;\n    font-weight: normal;\n    font-style: normal;\n    font-variant: normal;\n    font-stretch: normal;\n\n    /* ie11 doesnt support 'initial' */\n    text-align: left;\n    text-align: initial;\n    text-transform: none;\n    text-shadow: none;\n  "])));
+export var resetText = function resetText() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    letter-spacing: normal;\n    line-height: normal;\n    font-family: inherit;\n    font-weight: normal;\n    font-style: normal;\n    font-variant: normal;\n    font-stretch: normal;\n\n    /* ie11 doesnt support 'initial' */\n    text-align: left;\n    text-align: initial;\n    text-transform: none;\n    text-shadow: none;\n  "])));
 };

package/lib/styles/Mixins/Mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Mixins.ts"],"names":["resetButton","emotion","css","resetText"],"mappings":";;AAEA,OAAO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,OAAD,EAAsB;AAC/C,SAAOA,OAAO,CAACC,GAAf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BD,CA9BM;;AAgCP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACF,OAAD,EAAsB;AAC7C,SAAOA,OAAO,CAACC,GAAf;;;;;;;;;;;;;;;AAeD,CAhBM","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nexport const resetButton = (emotion: Emotion) => {\n  return emotion.css`\n    outline: none;\n    border: none;\n    margin: 0; /* Need for Safari. */\n    padding: 0;\n    width: auto;\n    overflow: visible; /* On IE it's hidden by default. */\n    background: transparent;\n\n    /* inherit font & color from ancestor */\n    color: inherit;\n    font: inherit;\n\n    /* Normalize 'line-height'. Cannot be changed from 'normal' in Firefox 4+. */\n    line-height: normal;\n\n    /* Corrects font smoothing for webkit */\n    -webkit-font-smoothing: inherit;\n    -moz-osx-font-smoothing: inherit;\n\n    /* Corrects inability to style clickable 'input' types in iOS */\n    -webkit-appearance: none;\n    text-align: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  `;\n};\n\nexport const resetText = (emotion: Emotion) => {\n  return emotion.css`\n    letter-spacing: normal;\n    line-height: normal;\n    font-family: inherit;\n    font-weight: normal;\n    font-style: normal;\n    font-variant: normal;\n    font-stretch: normal;\n\n    /* ie11 doesnt support 'initial' */\n    text-align: left;\n    text-align: initial;\n    text-transform: none;\n    text-shadow: none;\n  `;\n};\n"]}
+{"version":3,"sources":["Mixins.ts"],"names":["css","resetButton","resetText"],"mappings":"sIAAA,SAASA,GAAT,QAAoB,oBAApB;;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAC/B,SAAOD,GAAP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BD,CA9BM;;AAgCP,OAAO,IAAME,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,SAAOF,GAAP;;;;;;;;;;;;;;;AAeD,CAhBM","sourcesContent":["import { css } from '../theming/Emotion';\n\nexport const resetButton = () => {\n  return css`\n    outline: none;\n    border: none;\n    margin: 0; /* Need for Safari. */\n    padding: 0;\n    width: auto;\n    overflow: visible; /* On IE it's hidden by default. */\n    background: transparent;\n\n    /* inherit font & color from ancestor */\n    color: inherit;\n    font: inherit;\n\n    /* Normalize 'line-height'. Cannot be changed from 'normal' in Firefox 4+. */\n    line-height: normal;\n\n    /* Corrects font smoothing for webkit */\n    -webkit-font-smoothing: inherit;\n    -moz-osx-font-smoothing: inherit;\n\n    /* Corrects inability to style clickable 'input' types in iOS */\n    -webkit-appearance: none;\n    text-align: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  `;\n};\n\nexport const resetText = () => {\n  return css`\n    letter-spacing: normal;\n    line-height: normal;\n    font-family: inherit;\n    font-weight: normal;\n    font-style: normal;\n    font-variant: normal;\n    font-stretch: normal;\n\n    /* ie11 doesnt support 'initial' */\n    text-align: left;\n    text-align: initial;\n    text-transform: none;\n    text-shadow: none;\n  `;\n};\n"]}

package/lib/styles/Mixins.d.ts

@@ -1,3 +1,2 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const resetButton: (emotion: Emotion) => string;
-export declare const resetText: (emotion: Emotion) => string;
+export declare const resetButton: () => string;
+export declare const resetText: () => string;

package/lib/theming/AnimationKeyframes/AnimationKeyframes.js

@@ -2,19 +2,18 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-export var getAnimationKeyframes = function getAnimationKeyframes(emotion) {
-  return {
-    spinnerCircleOffset: function spinnerCircleOffset() {
-      return emotion.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      "])));
-    },
-    spinnerCircleLength: function spinnerCircleLength() {
-      return emotion.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      "])));
-    },
-    spinnerCircleRotate: function spinnerCircleRotate() {
-      return emotion.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        100% { transform: rotate(360deg); }\n      "])));
-    },
-    spinnerColor: function spinnerColor(t) {
-      return emotion.keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        100%, 0% { stroke: ", "; }\n        40% { stroke: ", "; }\n        66% { stroke: ", "; }\n        80%, 90% { stroke: ", "; }\n      "])), t.red, t.yellow, t.green, t.brand);
-    }
-  };
+import { keyframes } from "../Emotion";
+export var AnimationKeyframes = {
+  spinnerCircleOffset: function spinnerCircleOffset() {
+    return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      "])));
+  },
+  spinnerCircleLength: function spinnerCircleLength() {
+    return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      "])));
+  },
+  spinnerCircleRotate: function spinnerCircleRotate() {
+    return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        100% { transform: rotate(360deg); }\n      "])));
+  },
+  spinnerColor: function spinnerColor(t) {
+    return keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        100%, 0% { stroke: ", "; }\n        40% { stroke: ", "; }\n        66% { stroke: ", "; }\n        80%, 90% { stroke: ", "; }\n      "])), t.red, t.yellow, t.green, t.brand);
+  }
 };

package/lib/theming/AnimationKeyframes/AnimationKeyframes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimationKeyframes.ts"],"names":["getAnimationKeyframes","emotion","spinnerCircleOffset","keyframes","spinnerCircleLength","spinnerCircleRotate","spinnerColor","t","red","yellow","green","brand"],"mappings":";;;;AAIA,OAAO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,OAAD,UAAuB;AAC1DC,IAAAA,mBAD0D,iCACpC;AACpB,aAAOD,OAAO,CAACE,SAAf;;;;AAID,KANyD;AAO1DC,IAAAA,mBAP0D,iCAOpC;AACpB,aAAOH,OAAO,CAACE,SAAf;;;;;AAKD,KAbyD;AAc1DE,IAAAA,mBAd0D,iCAcpC;AACpB,aAAOJ,OAAO,CAACE,SAAf;;;AAGD,KAlByD;AAmB1DG,IAAAA,YAnB0D,wBAmB7CC,CAnB6C,EAmBnC;AACrB,aAAON,OAAO,CAACE,SAAf;AACyBI,MAAAA,CAAC,CAACC,GAD3B;AAEoBD,MAAAA,CAAC,CAACE,MAFtB;AAGoBF,MAAAA,CAAC,CAACG,KAHtB;AAIyBH,MAAAA,CAAC,CAACI,KAJ3B;;AAMD,KA1ByD,EAAvB,EAA9B","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from './Theme';\n\nexport const getAnimationKeyframes = (emotion: Emotion) => ({\n  spinnerCircleOffset() {\n    return emotion.keyframes`\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      `;\n  },\n  spinnerCircleLength() {\n    return emotion.keyframes`\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      `;\n  },\n  spinnerCircleRotate() {\n    return emotion.keyframes`\n        100% { transform: rotate(360deg); }\n      `;\n  },\n  spinnerColor(t: Theme) {\n    return emotion.keyframes`\n        100%, 0% { stroke: ${t.red}; }\n        40% { stroke: ${t.yellow}; }\n        66% { stroke: ${t.green}; }\n        80%, 90% { stroke: ${t.brand}; }\n      `;\n  },\n});\n"]}
+{"version":3,"sources":["AnimationKeyframes.ts"],"names":["keyframes","AnimationKeyframes","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","spinnerColor","t","red","yellow","green","brand"],"mappings":"0KAAA,SAASA,SAAT,QAA0B,WAA1B;;;AAGA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,mBADgC,iCACV;AACpB,WAAOF,SAAP;;;;AAID,GAN+B;AAOhCG,EAAAA,mBAPgC,iCAOV;AACpB,WAAOH,SAAP;;;;;AAKD,GAb+B;AAchCI,EAAAA,mBAdgC,iCAcV;AACpB,WAAOJ,SAAP;;;AAGD,GAlB+B;AAmBhCK,EAAAA,YAnBgC,wBAmBnBC,CAnBmB,EAmBT;AACrB,WAAON,SAAP;AACyBM,IAAAA,CAAC,CAACC,GAD3B;AAEoBD,IAAAA,CAAC,CAACE,MAFtB;AAGoBF,IAAAA,CAAC,CAACG,KAHtB;AAIyBH,IAAAA,CAAC,CAACI,KAJ3B;;AAMD,GA1B+B,EAA3B","sourcesContent":["import { keyframes } from './Emotion';\nimport { Theme } from './Theme';\n\nexport const AnimationKeyframes = {\n  spinnerCircleOffset() {\n    return keyframes`\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      `;\n  },\n  spinnerCircleLength() {\n    return keyframes`\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      `;\n  },\n  spinnerCircleRotate() {\n    return keyframes`\n        100% { transform: rotate(360deg); }\n      `;\n  },\n  spinnerColor(t: Theme) {\n    return keyframes`\n        100%, 0% { stroke: ${t.red}; }\n        40% { stroke: ${t.yellow}; }\n        66% { stroke: ${t.green}; }\n        80%, 90% { stroke: ${t.brand}; }\n      `;\n  },\n};\n"]}

package/lib/theming/AnimationKeyframes.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from './Theme';
-export declare const getAnimationKeyframes: (emotion: Emotion) => {
+export declare const AnimationKeyframes: {
     spinnerCircleOffset(): string;
     spinnerCircleLength(): string;
     spinnerCircleRotate(): string;

package/lib/theming/Emotion/Emotion.js

@@ -1,27 +1,32 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _globalObject$documen;
+
 import createEmotion from '@emotion/css/create-instance';
 import extraScopePlugin from 'stylis-plugin-extra-scope';
 import { globalObject } from '@skbkontur/global-object';
-import { createContext, useContext } from 'react';
 import { Upgrade } from "../../Upgrades";
-export var REACT_UI_PREFIX = Upgrade.getSpecificityClassName();
+var REACT_UI_PREFIX = Upgrade.getSpecificityClassName();
 var scope = new Array(Upgrade.getSpecificityLevel()).fill("." + REACT_UI_PREFIX).join('');
-export var getEmotion = function getEmotion(container, key) {
-  var _globalObject$documen;
 
-  return createEmotion({
-    key: key != null ? key : REACT_UI_PREFIX,
-    prepend: true,
-    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,
-    container: container != null ? container : (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.head
-  });
-};
+var _createEmotion = createEmotion({
+  key: REACT_UI_PREFIX,
+  prepend: true,
+  stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,
+  container: (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.head
+}),
+    flush = _createEmotion.flush,
+    hydrate = _createEmotion.hydrate,
+    cx = _createEmotion.cx,
+    merge = _createEmotion.merge,
+    getRegisteredStyles = _createEmotion.getRegisteredStyles,
+    injectGlobal = _createEmotion.injectGlobal,
+    keyframes = _createEmotion.keyframes,
+    css = _createEmotion.css,
+    sheet = _createEmotion.sheet,
+    cache = _createEmotion.cache;
 
-var _getEmotion = getEmotion(),
-    injectGlobal = _getEmotion.injectGlobal,
-    cache = _getEmotion.cache;
-
-export { injectGlobal, cache };
+export { flush, hydrate, cx, merge, getRegisteredStyles, injectGlobal, keyframes, css, sheet, cache };
 
 function isZeroArgs(fn) {
   return fn.length === 0;
@@ -69,12 +74,4 @@ export var prefix = function prefix(component, app) {
       return _extends({}, acc, (_extends2 = {}, _extends2[key] = app + "-" + component + "-" + classes[key], _extends2));
     }, {});
   };
-};
-var EmotionContext = /*#__PURE__*/createContext(getEmotion());
-export var EmotionConsumer = EmotionContext.Consumer;
-export var EmotionProvider = EmotionContext.Provider;
-export var useEmotion = function useEmotion() {
-  return useContext(EmotionContext);
-};
-EmotionContext.displayName = 'EmotionContext';
-EmotionContext.__KONTUR_REACT_UI__ = 'EmotionContext';
+};