@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/components/Input/InputLayout/InputLayoutAside/InputLayoutAside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLayoutAside.tsx"],"names":["React","stylesLayout","InputLayoutAsideIcon","InputLayoutAsideText","InputLayoutAside","icon","text","side","asideClassName","aside","_icon","_text","child"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;AAIA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,oBAAT,QAAqC,wBAArC;AACA,SAASC,oBAAT,QAAqC,wBAArC;;;;;;;;AAQA,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,OAA0B,KAAvBC,IAAuB,QAAvBA,IAAuB,CAAjBC,IAAiB,QAAjBA,IAAiB,CAAXC,IAAW,QAAXA,IAAW;AACxG,MAAMC,cAAc,GAAGP,YAAY,CAACQ,KAAb,EAAvB;;AAEA,MAAMC,KAAK,gBAAG,oBAAC,oBAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEL,IAAvC,EAA6C,IAAI,EAAEE,IAAnD,GAAd;AACA,MAAMI,KAAK,gBAAG,oBAAC,oBAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEL,IAAvC,GAAd;;AAEA,MAAMM,KAAK,GAAGL,IAAI,KAAK,MAAT,GAAkB,CAACG,KAAD,EAAQC,KAAR,CAAlB,GAAmC,CAACA,KAAD,EAAQD,KAAR,CAAjD;;AAEA,sBAAO,8BAAM,SAAS,EAAEF,cAAjB,IAAkCI,KAAlC,CAAP;AACD,CATM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\n\nimport { stylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n  const asideClassName = stylesLayout.aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"]}
+{"version":3,"sources":["InputLayoutAside.tsx"],"names":["React","useEmotion","getStylesLayout","InputLayoutAsideIcon","InputLayoutAsideText","InputLayoutAside","icon","text","side","emotion","asideClassName","aside","_icon","_text","child"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,8BAA3B;;AAEA,SAASC,eAAT,QAAgC,sBAAhC;AACA,SAASC,oBAAT,QAAqC,wBAArC;AACA,SAASC,oBAAT,QAAqC,wBAArC;;;;;;;;AAQA,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,OAA0B,KAAvBC,IAAuB,QAAvBA,IAAuB,CAAjBC,IAAiB,QAAjBA,IAAiB,CAAXC,IAAW,QAAXA,IAAW;AACxG,MAAMC,OAAO,GAAGR,UAAU,EAA1B;AACA,MAAMS,cAAc,GAAGR,eAAe,CAACO,OAAD,CAAf,CAAyBE,KAAzB,EAAvB;;AAEA,MAAMC,KAAK,gBAAG,oBAAC,oBAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEN,IAAvC,EAA6C,IAAI,EAAEE,IAAnD,GAAd;AACA,MAAMK,KAAK,gBAAG,oBAAC,oBAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEN,IAAvC,GAAd;;AAEA,MAAMO,KAAK,GAAGN,IAAI,KAAK,MAAT,GAAkB,CAACI,KAAD,EAAQC,KAAR,CAAlB,GAAmC,CAACA,KAAD,EAAQD,KAAR,CAAjD;;AAEA,sBAAO,8BAAM,SAAS,EAAEF,cAAjB,IAAkCI,KAAlC,CAAP;AACD,CAVM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\n\nimport { getStylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n  const emotion = useEmotion();\n  const asideClassName = getStylesLayout(emotion).aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"]}

package/components/Input/InputLayout/InputLayoutAsideIcon/InputLayoutAsideIcon.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { isElement } from 'react-is';
 import { isKonturIcon } from "../../../../lib/utils";
-import { cx } from "../../../../lib/theming/Emotion";
-import { ThemeContext } from "../../../../lib/theming/ThemeContext";
+import { useEmotion } from "../../../../lib/theming/Emotion";
+import { useTheme } from "../../../../lib/theming/useTheme";
 import { InputLayoutContext } from "../InputLayoutContext";
-import { stylesLayout } from "../InputLayout.styles";
+import { getStylesLayout } from "../InputLayout.styles";
 export var InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {
   var _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? null : _ref$icon,
       side = _ref.side;
-  var theme = React.useContext(ThemeContext);
+  var emotion = useEmotion();
+  var theme = useTheme();
 
   var _React$useContext = React.useContext(InputLayoutContext),
       focused = _React$useContext.focused,
@@ -47,8 +48,9 @@ export var InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {
     }
   }
 
+  var stylesLayout = getStylesLayout(emotion);
   return _icon && /*#__PURE__*/React.createElement("span", {
     style: style,
-    className: cx(stylesLayout.aside(), stylesLayout.icon(theme), focused && stylesLayout.iconFocus(theme), disabled && stylesLayout.iconDisabled())
+    className: emotion.cx(stylesLayout.aside(), stylesLayout.icon(theme), focused && stylesLayout.iconFocus(theme), disabled && stylesLayout.iconDisabled())
   }, _icon);
 };

package/components/Input/InputLayout/InputLayoutAsideIcon/InputLayoutAsideIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLayoutAsideIcon.tsx"],"names":["React","isElement","isKonturIcon","cx","ThemeContext","InputLayoutContext","stylesLayout","InputLayoutAsideIcon","icon","side","theme","useContext","focused","disabled","size","sizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","gaps","inputIconGapSmall","inputIconGapMedium","inputIconGapLarge","_icon","Function","cloneElement","props","style","marginLeft","marginRight","aside","iconFocus","iconDisabled"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAEA,SAASC,YAAT,QAA6B,oBAA7B;;AAEA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;;;AAGA,SAASC,kBAAT,QAAmC,sBAAnC;AACA,SAASC,YAAT,QAA6B,sBAA7B;;;;;;AAMA,OAAO,IAAMC,oBAAwE,GAAG,SAA3EA,oBAA2E,OAA2B,sBAAxBC,IAAwB,CAAxBA,IAAwB,0BAAjB,IAAiB,aAAXC,IAAW,QAAXA,IAAW;AACjH,MAAMC,KAAK,GAAGV,KAAK,CAACW,UAAN,CAAiBP,YAAjB,CAAd;AACA,0BAAoCJ,KAAK,CAACW,UAAN,CAAiBN,kBAAjB,CAApC,CAAQO,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB,CAA2BC,IAA3B,qBAA2BA,IAA3B;;AAEA,MAAMC,KAA+B,GAAG;AACtCC,IAAAA,KAAK,EAAEC,QAAQ,CAACP,KAAK,CAACQ,kBAAP,CADuB;AAEtCC,IAAAA,MAAM,EAAEF,QAAQ,CAACP,KAAK,CAACU,mBAAP,CAFsB;AAGtCC,IAAAA,KAAK,EAAEJ,QAAQ,CAACP,KAAK,CAACY,kBAAP,CAHuB,EAAxC;;AAKA,MAAMC,IAA8B,GAAG;AACrCP,IAAAA,KAAK,EAAEC,QAAQ,CAACP,KAAK,CAACc,iBAAP,CADsB;AAErCL,IAAAA,MAAM,EAAEF,QAAQ,CAACP,KAAK,CAACe,kBAAP,CAFqB;AAGrCJ,IAAAA,KAAK,EAAEJ,QAAQ,CAACP,KAAK,CAACgB,iBAAP,CAHsB,EAAvC;;;AAMA,MAAIC,KAAK,GAAGnB,IAAI,YAAYoB,QAAhB,GAA2BpB,IAAI,EAA/B,GAAoCA,IAAhD;AACA,MAAIP,SAAS,CAACO,IAAD,CAAT,IAAmBN,YAAY,CAACM,IAAD,CAAnC,EAA2C;AACzCmB,IAAAA,KAAK,gBAAG3B,KAAK,CAAC6B,YAAN,CAAmBrB,IAAnB,EAAyB,EAAEM,IAAI,sBAAEN,IAAI,CAACsB,KAAL,CAAWhB,IAAb,+BAAqBC,KAAK,CAACD,IAAD,CAAhC,EAAzB,CAAR;AACD;;AAED,MAAMiB,KAA0B,GAAG,EAAnC;AACA,MAAItB,IAAJ,EAAU;AACR,QAAIA,IAAI,KAAK,OAAb,EAAsB;AACpBsB,MAAAA,KAAK,CAACC,UAAN,GAAmBT,IAAI,CAACT,IAAD,CAAvB;AACD,KAFD,MAEO;AACLiB,MAAAA,KAAK,CAACE,WAAN,GAAoBV,IAAI,CAACT,IAAD,CAAxB;AACD;AACF;;AAED;AACEa,IAAAA,KAAK;AACH;AACE,MAAA,KAAK,EAAEI,KADT;AAEE,MAAA,SAAS,EAAE5B,EAAE;AACXG,MAAAA,YAAY,CAAC4B,KAAb,EADW;AAEX5B,MAAAA,YAAY,CAACE,IAAb,CAAkBE,KAAlB,CAFW;AAGXE,MAAAA,OAAO,IAAIN,YAAY,CAAC6B,SAAb,CAAuBzB,KAAvB,CAHA;AAIXG,MAAAA,QAAQ,IAAIP,YAAY,CAAC8B,YAAb,EAJD,CAFf;;;AASGT,IAAAA,KATH,CAFJ;;;;AAeD,CA5CM","sourcesContent":["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../../lib/utils';\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { SizeProp } from '../../../lib/types/props';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon)) {\n    _icon = React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  return (\n    _icon && (\n      <span\n        style={style}\n        className={cx(\n          stylesLayout.aside(),\n          stylesLayout.icon(theme),\n          focused && stylesLayout.iconFocus(theme),\n          disabled && stylesLayout.iconDisabled(),\n        )}\n      >\n        {_icon}\n      </span>\n    )\n  );\n};\n"]}
+{"version":3,"sources":["InputLayoutAsideIcon.tsx"],"names":["React","isElement","isKonturIcon","useEmotion","useTheme","InputLayoutContext","getStylesLayout","InputLayoutAsideIcon","icon","side","emotion","theme","useContext","focused","disabled","size","sizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","gaps","inputIconGapSmall","inputIconGapMedium","inputIconGapLarge","_icon","Function","cloneElement","props","style","marginLeft","marginRight","stylesLayout","cx","aside","iconFocus","iconDisabled"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAEA,SAASC,YAAT,QAA6B,oBAA7B;;AAEA,SAASC,UAAT,QAA2B,8BAA3B;;AAEA,SAASC,QAAT,QAAyB,+BAAzB;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;AACA,SAASC,eAAT,QAAgC,sBAAhC;;;;;;;AAOA,OAAO,IAAMC,oBAAwE,GAAG,SAA3EA,oBAA2E,OAA2B,sBAAxBC,IAAwB,CAAxBA,IAAwB,0BAAjB,IAAiB,aAAXC,IAAW,QAAXA,IAAW;AACjH,MAAMC,OAAO,GAAGP,UAAU,EAA1B;AACA,MAAMQ,KAAK,GAAGP,QAAQ,EAAtB;AACA,0BAAoCJ,KAAK,CAACY,UAAN,CAAiBP,kBAAjB,CAApC,CAAQQ,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB,CAA2BC,IAA3B,qBAA2BA,IAA3B;;AAEA,MAAMC,KAA+B,GAAG;AACtCC,IAAAA,KAAK,EAAEC,QAAQ,CAACP,KAAK,CAACQ,kBAAP,CADuB;AAEtCC,IAAAA,MAAM,EAAEF,QAAQ,CAACP,KAAK,CAACU,mBAAP,CAFsB;AAGtCC,IAAAA,KAAK,EAAEJ,QAAQ,CAACP,KAAK,CAACY,kBAAP,CAHuB,EAAxC;;AAKA,MAAMC,IAA8B,GAAG;AACrCP,IAAAA,KAAK,EAAEC,QAAQ,CAACP,KAAK,CAACc,iBAAP,CADsB;AAErCL,IAAAA,MAAM,EAAEF,QAAQ,CAACP,KAAK,CAACe,kBAAP,CAFqB;AAGrCJ,IAAAA,KAAK,EAAEJ,QAAQ,CAACP,KAAK,CAACgB,iBAAP,CAHsB,EAAvC;;;AAMA,MAAIC,KAAK,GAAGpB,IAAI,YAAYqB,QAAhB,GAA2BrB,IAAI,EAA/B,GAAoCA,IAAhD;AACA,MAAIP,SAAS,CAACO,IAAD,CAAT,IAAmBN,YAAY,CAACM,IAAD,CAAnC,EAA2C;AACzCoB,IAAAA,KAAK,gBAAG5B,KAAK,CAAC8B,YAAN,CAAmBtB,IAAnB,EAAyB,EAAEO,IAAI,sBAAEP,IAAI,CAACuB,KAAL,CAAWhB,IAAb,+BAAqBC,KAAK,CAACD,IAAD,CAAhC,EAAzB,CAAR;AACD;;AAED,MAAMiB,KAA0B,GAAG,EAAnC;AACA,MAAIvB,IAAJ,EAAU;AACR,QAAIA,IAAI,KAAK,OAAb,EAAsB;AACpBuB,MAAAA,KAAK,CAACC,UAAN,GAAmBT,IAAI,CAACT,IAAD,CAAvB;AACD,KAFD,MAEO;AACLiB,MAAAA,KAAK,CAACE,WAAN,GAAoBV,IAAI,CAACT,IAAD,CAAxB;AACD;AACF;;AAED,MAAMoB,YAAY,GAAG7B,eAAe,CAACI,OAAD,CAApC;;AAEA;AACEkB,IAAAA,KAAK;AACH;AACE,MAAA,KAAK,EAAEI,KADT;AAEE,MAAA,SAAS,EAAEtB,OAAO,CAAC0B,EAAR;AACTD,MAAAA,YAAY,CAACE,KAAb,EADS;AAETF,MAAAA,YAAY,CAAC3B,IAAb,CAAkBG,KAAlB,CAFS;AAGTE,MAAAA,OAAO,IAAIsB,YAAY,CAACG,SAAb,CAAuB3B,KAAvB,CAHF;AAITG,MAAAA,QAAQ,IAAIqB,YAAY,CAACI,YAAb,EAJH,CAFb;;;AASGX,IAAAA,KATH,CAFJ;;;;AAeD,CA/CM","sourcesContent":["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../../lib/utils';\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\nimport { SizeProp } from '../../../lib/types/props';\nimport { useTheme } from '../../../lib/theming/useTheme';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon)) {\n    _icon = React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  const stylesLayout = getStylesLayout(emotion);\n\n  return (\n    _icon && (\n      <span\n        style={style}\n        className={emotion.cx(\n          stylesLayout.aside(),\n          stylesLayout.icon(theme),\n          focused && stylesLayout.iconFocus(theme),\n          disabled && stylesLayout.iconDisabled(),\n        )}\n      >\n        {_icon}\n      </span>\n    )\n  );\n};\n"]}

package/components/Input/InputLayout/InputLayoutAsideText/InputLayoutAsideText.js

@@ -1,18 +1,20 @@
 import React from 'react';
-import { cx } from "../../../../lib/theming/Emotion";
-import { ThemeContext } from "../../../../lib/theming/ThemeContext";
+import { useEmotion } from "../../../../lib/theming/Emotion";
+import { useTheme } from "../../../../lib/theming/useTheme";
 import { InputLayoutContext } from "../InputLayoutContext";
-import { stylesLayout } from "../InputLayout.styles";
+import { getStylesLayout } from "../InputLayout.styles";
 export var InputLayoutAsideText = function InputLayoutAsideText(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? null : _ref$text;
-  var theme = React.useContext(ThemeContext);
+  var emotion = useEmotion();
+  var theme = useTheme();
 
   var _React$useContext = React.useContext(InputLayoutContext),
       disabled = _React$useContext.disabled;
 
+  var stylesLayout = getStylesLayout(emotion);
   var asideClassName = stylesLayout.aside();
   return text && /*#__PURE__*/React.createElement("span", {
-    className: cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))
+    className: emotion.cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))
   }, text);
 };

package/components/Input/InputLayout/InputLayoutAsideText/InputLayoutAsideText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLayoutAsideText.tsx"],"names":["React","cx","ThemeContext","InputLayoutContext","stylesLayout","InputLayoutAsideText","text","theme","useContext","disabled","asideClassName","aside","textDisabled"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;AACA,SAASC,YAAT,QAA6B,sBAA7B;;;;;;AAMA,OAAO,IAAMC,oBAAwE,GAAG,SAA3EA,oBAA2E,OAAqB,sBAAlBC,IAAkB,CAAlBA,IAAkB,0BAAX,IAAW;AAC3G,MAAMC,KAAK,GAAGP,KAAK,CAACQ,UAAN,CAAiBN,YAAjB,CAAd;AACA,0BAAqBF,KAAK,CAACQ,UAAN,CAAiBL,kBAAjB,CAArB,CAAQM,QAAR,qBAAQA,QAAR;;AAEA,MAAMC,cAAc,GAAGN,YAAY,CAACO,KAAb,EAAvB;;AAEA;AACEL,IAAAA,IAAI;AACF,kCAAM,SAAS,EAAEL,EAAE,CAACS,cAAD,EAAiBN,YAAY,CAACE,IAAb,CAAkBC,KAAlB,CAAjB,EAA2CE,QAAQ,IAAIL,YAAY,CAACQ,YAAb,CAA0BL,KAA1B,CAAvD,CAAnB;AACGD,IAAAA,IADH,CAFJ;;;;AAOD,CAbM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const theme = React.useContext(ThemeContext);\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const asideClassName = stylesLayout.aside();\n\n  return (\n    text && (\n      <span className={cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}>\n        {text}\n      </span>\n    )\n  );\n};\n"]}
+{"version":3,"sources":["InputLayoutAsideText.tsx"],"names":["React","useEmotion","useTheme","InputLayoutContext","getStylesLayout","InputLayoutAsideText","text","emotion","theme","useContext","disabled","stylesLayout","asideClassName","aside","cx","textDisabled"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,8BAA3B;AACA,SAASC,QAAT,QAAyB,+BAAzB;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;AACA,SAASC,eAAT,QAAgC,sBAAhC;;;;;;AAMA,OAAO,IAAMC,oBAAwE,GAAG,SAA3EA,oBAA2E,OAAqB,sBAAlBC,IAAkB,CAAlBA,IAAkB,0BAAX,IAAW;AAC3G,MAAMC,OAAO,GAAGN,UAAU,EAA1B;AACA,MAAMO,KAAK,GAAGN,QAAQ,EAAtB;AACA,0BAAqBF,KAAK,CAACS,UAAN,CAAiBN,kBAAjB,CAArB,CAAQO,QAAR,qBAAQA,QAAR;;AAEA,MAAMC,YAAY,GAAGP,eAAe,CAACG,OAAD,CAApC;AACA,MAAMK,cAAc,GAAGD,YAAY,CAACE,KAAb,EAAvB;;AAEA;AACEP,IAAAA,IAAI;AACF;AACE,MAAA,SAAS,EAAEC,OAAO,CAACO,EAAR,CAAWF,cAAX,EAA2BD,YAAY,CAACL,IAAb,CAAkBE,KAAlB,CAA3B,EAAqDE,QAAQ,IAAIC,YAAY,CAACI,YAAb,CAA0BP,KAA1B,CAAjE,CADb;;AAGGF,IAAAA,IAHH,CAFJ;;;;AASD,CAjBM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\nimport { useTheme } from '../../../lib/theming/useTheme';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const stylesLayout = getStylesLayout(emotion);\n  const asideClassName = stylesLayout.aside();\n\n  return (\n    text && (\n      <span\n        className={emotion.cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}\n      >\n        {text}\n      </span>\n    )\n  );\n};\n"]}

package/components/Input/InputLayout/PolyfillPlaceholder/PolyfillPlaceholder.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { cx } from "../../../../lib/theming/Emotion";
-import { ThemeContext } from "../../../../lib/theming/ThemeContext";
-import { styles } from "../../Input.styles";
+import { useEmotion } from "../../../../lib/theming/Emotion";
+import { getStyles } from "../../Input.styles";
 import { needsPolyfillPlaceholder } from "../../../../lib/needsPolyfillPlaceholder";
+import { useTheme } from "../../../../lib/theming/useTheme";
 import { InputLayoutContext } from "../InputLayoutContext";
 export var PolyfillPlaceholder = function PolyfillPlaceholder(_ref) {
   var placeholder = _ref.children,
@@ -10,19 +10,21 @@ export var PolyfillPlaceholder = function PolyfillPlaceholder(_ref) {
       value = _ref.value,
       defaultValue = _ref.defaultValue,
       isMaskVisible = _ref.isMaskVisible;
-  var theme = React.useContext(ThemeContext);
+  var emotion = useEmotion();
+  var theme = useTheme();
 
   var _React$useContext = React.useContext(InputLayoutContext),
       focused = _React$useContext.focused,
       disabled = _React$useContext.disabled;
 
   var _placeholder = null;
+  var styles = getStyles(emotion);
 
   if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {
-    var _cx;
+    var _emotion$cx;
 
     _placeholder = /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.placeholder(theme), (_cx = {}, _cx[styles.placeholderDisabled(theme)] = disabled, _cx[styles.placeholderFocus(theme)] = focused, _cx)),
+      className: emotion.cx(styles.placeholder(theme), (_emotion$cx = {}, _emotion$cx[styles.placeholderDisabled(theme)] = disabled, _emotion$cx[styles.placeholderFocus(theme)] = focused, _emotion$cx)),
       style: {
         textAlign: align || 'inherit'
       }

package/components/Input/InputLayout/PolyfillPlaceholder/PolyfillPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PolyfillPlaceholder.tsx"],"names":["React","cx","ThemeContext","styles","needsPolyfillPlaceholder","InputLayoutContext","PolyfillPlaceholder","placeholder","children","align","value","defaultValue","isMaskVisible","theme","useContext","focused","disabled","_placeholder","placeholderDisabled","placeholderFocus","textAlign"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;AACA,SAASC,MAAT,QAAuB,iBAAvB;AACA,SAASC,wBAAT,QAAyC,uCAAzC;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;;;;;;;;;;AAUA,OAAO,IAAMC,mBAAyE,GAAG,SAA5EA,mBAA4E;;;;;;AAMnF,KALMC,WAKN,QALJC,QAKI,CAJJC,KAII,QAJJA,KAII,CAHJC,KAGI,QAHJA,KAGI,CAFJC,YAEI,QAFJA,YAEI,CADJC,aACI,QADJA,aACI;AACJ,MAAMC,KAAK,GAAGb,KAAK,CAACc,UAAN,CAAiBZ,YAAjB,CAAd;AACA,0BAA8BF,KAAK,CAACc,UAAN,CAAiBT,kBAAjB,CAA9B,CAAQU,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB;;AAEA,MAAIC,YAAY,GAAG,IAAnB;;AAEA,MAAIb,wBAAwB,IAAIG,WAA5B,IAA2C,CAACK,aAA5C,IAA6D,CAACF,KAA9D,IAAuE,CAACC,YAA5E,EAA0F;AACxFM,IAAAA,YAAY;AACV;AACE,MAAA,SAAS,EAAEhB,EAAE,CAACE,MAAM,CAACI,WAAP,CAAmBM,KAAnB,CAAD;AACVV,MAAAA,MAAM,CAACe,mBAAP,CAA2BL,KAA3B,CADU,IAC0BG,QAD1B;AAEVb,MAAAA,MAAM,CAACgB,gBAAP,CAAwBN,KAAxB,CAFU,IAEuBE,OAFvB,OADf;;AAKE,MAAA,KAAK,EAAE,EAAEK,SAAS,EAAEX,KAAK,IAAI,SAAtB,EALT;;AAOGF,IAAAA,WAPH,CADF;;;AAWD;;AAED,SAAOU,YAAP;AACD,CA3BM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { styles } from '../Input.styles';\nimport { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder';\n\nimport { InputLayoutContext } from './InputLayoutContext';\n\ntype PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {\n  isMaskVisible: boolean;\n};\n\nexport interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {\n  children: InputProps['placeholder'];\n}\n\nexport const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps> = ({\n  children: placeholder,\n  align,\n  value,\n  defaultValue,\n  isMaskVisible,\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled } = React.useContext(InputLayoutContext);\n\n  let _placeholder = null;\n\n  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {\n    _placeholder = (\n      <div\n        className={cx(styles.placeholder(theme), {\n          [styles.placeholderDisabled(theme)]: disabled,\n          [styles.placeholderFocus(theme)]: focused,\n        })}\n        style={{ textAlign: align || 'inherit' }}\n      >\n        {placeholder}\n      </div>\n    );\n  }\n\n  return _placeholder;\n};\n"]}
+{"version":3,"sources":["PolyfillPlaceholder.tsx"],"names":["React","useEmotion","getStyles","needsPolyfillPlaceholder","useTheme","InputLayoutContext","PolyfillPlaceholder","placeholder","children","align","value","defaultValue","isMaskVisible","emotion","theme","useContext","focused","disabled","_placeholder","styles","cx","placeholderDisabled","placeholderFocus","textAlign"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,8BAA3B;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,wBAAT,QAAyC,uCAAzC;AACA,SAASC,QAAT,QAAyB,+BAAzB;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;;;;;;;;;;AAUA,OAAO,IAAMC,mBAAyE,GAAG,SAA5EA,mBAA4E;;;;;;AAMnF,KALMC,WAKN,QALJC,QAKI,CAJJC,KAII,QAJJA,KAII,CAHJC,KAGI,QAHJA,KAGI,CAFJC,YAEI,QAFJA,YAEI,CADJC,aACI,QADJA,aACI;AACJ,MAAMC,OAAO,GAAGZ,UAAU,EAA1B;AACA,MAAMa,KAAK,GAAGV,QAAQ,EAAtB;AACA,0BAA8BJ,KAAK,CAACe,UAAN,CAAiBV,kBAAjB,CAA9B,CAAQW,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB;;AAEA,MAAIC,YAAY,GAAG,IAAnB;AACA,MAAMC,MAAM,GAAGjB,SAAS,CAACW,OAAD,CAAxB;;AAEA,MAAIV,wBAAwB,IAAII,WAA5B,IAA2C,CAACK,aAA5C,IAA6D,CAACF,KAA9D,IAAuE,CAACC,YAA5E,EAA0F;AACxFO,IAAAA,YAAY;AACV;AACE,MAAA,SAAS,EAAEL,OAAO,CAACO,EAAR,CAAWD,MAAM,CAACZ,WAAP,CAAmBO,KAAnB,CAAX;AACRK,MAAAA,MAAM,CAACE,mBAAP,CAA2BP,KAA3B,CADQ,IAC4BG,QAD5B;AAERE,MAAAA,MAAM,CAACG,gBAAP,CAAwBR,KAAxB,CAFQ,IAEyBE,OAFzB,eADb;;AAKE,MAAA,KAAK,EAAE,EAAEO,SAAS,EAAEd,KAAK,IAAI,SAAtB,EALT;;AAOGF,IAAAA,WAPH,CADF;;;AAWD;;AAED,SAAOW,YAAP;AACD,CA7BM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { useEmotion } from '../../../lib/theming/Emotion';\nimport { getStyles } from '../Input.styles';\nimport { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder';\nimport { useTheme } from '../../../lib/theming/useTheme';\n\nimport { InputLayoutContext } from './InputLayoutContext';\n\ntype PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {\n  isMaskVisible: boolean;\n};\n\nexport interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {\n  children: InputProps['placeholder'];\n}\n\nexport const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps> = ({\n  children: placeholder,\n  align,\n  value,\n  defaultValue,\n  isMaskVisible,\n}) => {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const { focused, disabled } = React.useContext(InputLayoutContext);\n\n  let _placeholder = null;\n  const styles = getStyles(emotion);\n\n  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {\n    _placeholder = (\n      <div\n        className={emotion.cx(styles.placeholder(theme), {\n          [styles.placeholderDisabled(theme)]: disabled,\n          [styles.placeholderFocus(theme)]: focused,\n        })}\n        style={{ textAlign: align || 'inherit' }}\n      >\n        {placeholder}\n      </div>\n    );\n  }\n\n  return _placeholder;\n};\n"]}

package/components/Kebab/Kebab/Kebab.js

@@ -12,16 +12,17 @@ import { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from "../../../l
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { keyListener } from "../../../lib/events/keyListener";
 import { PopupMenu } from "../../../internal/PopupMenu";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { MenuKebabIcon } from "../../../internal/icons/16px";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
-import { styles } from "../Kebab.styles";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Kebab.styles";
 import { KebabIcon } from "../KebabIcon";
 export var KebabDataTids = {
   caption: 'Kebab__caption'
@@ -65,6 +66,7 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         }
       };
 
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
         role: "button",
         "data-tid": KebabDataTids.caption,
@@ -73,7 +75,7 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         onKeyDown: handleCaptionKeyDown,
         onFocus: _this.handleFocus,
         onBlur: _this.handleBlur,
-        className: cx(styles.kebab(_this.theme), size === 'small' && styles.kebabSmall(_this.theme), size === 'medium' && styles.kebabMedium(_this.theme), size === 'large' && styles.kebabLarge(_this.theme), isTheme2022(_this.theme) && styles.kebab2022(), captionProps.opened && styles.opened(_this.theme), disabled && styles.disabled(), _this.state.focusedByTab && styles.focused(_this.theme)),
+        className: _this.emotion.cx(styles.kebab(_this.theme), size === 'small' && styles.kebabSmall(_this.theme), size === 'medium' && styles.kebabMedium(_this.theme), size === 'large' && styles.kebabLarge(_this.theme), isTheme2022(_this.theme) && styles.kebab2022(), captionProps.opened && styles.opened(_this.theme), disabled && styles.disabled(), _this.state.focusedByTab && styles.focused(_this.theme)),
         "aria-describedby": _this.props['aria-describedby']
       }, isTheme2022(_this.theme) ? _this.renderIcon2022() : _this.renderIcon());
     };
@@ -130,20 +132,25 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: ThemeFactory.create({
-          popupPinOffset: theme.kebabPinOffset,
-          popupMargin: theme.kebabMargin,
-          popupPinSize: theme.kebabPinSize,
-          menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY
-        }, theme)
-      }, _this2.renderMain());
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: ThemeFactory.create({
+            popupPinOffset: theme.kebabPinOffset,
+            popupMargin: theme.kebabMargin,
+            popupPinSize: theme.kebabPinSize,
+            menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY
+          }, theme)
+        }, _this2.renderMain());
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
     var disabled = this.props.disabled;
 
     var _this$getProps2 = this.getProps(),
@@ -152,33 +159,37 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         onOpen = _this$getProps2.onOpen,
         onClose = _this$getProps2.onClose;
 
-    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-      rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement(PopupMenu, {
-      popupHasPin: true,
-      preventIconsOffset: this.props.preventIconsOffset,
-      positions: positions,
-      onChangeMenuState: this.handleChangeMenuState,
-      caption: this.renderCaption,
-      disableAnimations: disableAnimations,
-      menuMaxHeight: this.props.menuMaxHeight,
-      onOpen: onOpen,
-      onClose: onClose,
-      popupMenuId: this.props.popupMenuId,
-      "aria-label": this.props['aria-label']
-    }, !disabled && this.props.children));
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      var hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(_this3.theme);
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), /*#__PURE__*/React.createElement(PopupMenu, {
+        popupHasPin: hasPin,
+        preventIconsOffset: _this3.props.preventIconsOffset,
+        positions: positions,
+        onChangeMenuState: _this3.handleChangeMenuState,
+        caption: _this3.renderCaption,
+        disableAnimations: disableAnimations,
+        menuMaxHeight: _this3.props.menuMaxHeight,
+        onOpen: onOpen,
+        onClose: onClose,
+        popupMenuId: _this3.props.popupMenuId,
+        "aria-label": _this3.props['aria-label']
+      }, !disabled && _this3.props.children));
+    });
   };
 
   _proto.renderIcon = function renderIcon() {
-    var _cx;
+    var _this$emotion$cx;
 
     var _this$getProps3 = this.getProps(),
         size = _this$getProps3.size,
         _this$getProps3$icon = _this$getProps3.icon,
         icon = _this$getProps3$icon === void 0 ? /*#__PURE__*/React.createElement(MenuKebabIcon, null) : _this$getProps3$icon;
 
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx = {}, _cx[styles.icon(this.theme)] = true, _cx[styles.iconsmall(this.theme)] = size === 'small', _cx[styles.iconmedium(this.theme)] = size === 'medium', _cx[styles.iconlarge(this.theme)] = size === 'large', _cx))
+      className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.icon(this.theme)] = true, _this$emotion$cx[styles.iconsmall(this.theme)] = size === 'small', _this$emotion$cx[styles.iconmedium(this.theme)] = size === 'medium', _this$emotion$cx[styles.iconlarge(this.theme)] = size === 'large', _this$emotion$cx))
     }, icon);
   };
 
@@ -206,7 +217,7 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   };
 
   return Kebab;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.displayName = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = {
   onOpen: function onOpen() {
     return undefined;
   },

package/components/Kebab/Kebab/Kebab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["React","PropTypes","isElement","globalObject","isKonturIcon","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","cx","rootNode","createPropsGetter","isTheme2022","styles","KebabIcon","KebabDataTids","caption","Kebab","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","isTabPressed","componentDidMount","addListener","componentWillUnmount","render","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","preventIconsOffset","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { isElement } from 'react-is';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isKonturIcon } from '../../lib/utils';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  disabled?: boolean;\n  size?: SizeProp;\n  /**\n   * Список позиций доступных для расположения выпадашки.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.kebabPinOffset,\n                  popupMargin: theme.kebabMargin,\n                  popupPinSize: theme.kebabPinSize,\n                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          popupHasPin\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n          aria-label={this.props['aria-label']}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx(\n          styles.kebab(this.theme),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\n    });\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<SizeProp, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}
+{"version":3,"sources":["Kebab.tsx"],"names":["React","PropTypes","isElement","globalObject","isKonturIcon","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","isTheme2022","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeContext","getStyles","KebabIcon","KebabDataTids","caption","Kebab","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","styles","emotion","handleFocus","handleBlur","cx","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","isTabPressed","componentDidMount","addListener","componentWillUnmount","render","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","positions","disableAnimations","onOpen","onClose","flags","hasPin","kebabHintRemovePin","setRootNode","preventIconsOffset","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","displayName","propTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { isElement } from 'react-is';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isKonturIcon } from '../../lib/utils';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  disabled?: boolean;\n  size?: SizeProp;\n  /**\n   * Список позиций доступных для расположения выпадашки.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n  public static displayName = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <ThemeContext.Provider\n                    value={ThemeFactory.create(\n                      {\n                        popupPinOffset: theme.kebabPinOffset,\n                        popupMargin: theme.kebabMargin,\n                        popupPinSize: theme.kebabPinSize,\n                        menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                      },\n                      theme,\n                    )}\n                  >\n                    {this.renderMain()}\n                  </ThemeContext.Provider>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme);\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <PopupMenu\n                popupHasPin={hasPin}\n                preventIconsOffset={this.props.preventIconsOffset}\n                positions={positions}\n                onChangeMenuState={this.handleChangeMenuState}\n                caption={this.renderCaption}\n                disableAnimations={disableAnimations}\n                menuMaxHeight={this.props.menuMaxHeight}\n                onOpen={onOpen}\n                onClose={onClose}\n                popupMenuId={this.props.popupMenuId}\n                aria-label={this.props['aria-label']}\n              >\n                {!disabled && this.props.children}\n              </PopupMenu>\n            </CommonWrapper>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n    const styles = getStyles(this.emotion);\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={this.emotion.cx(\n          styles.kebab(this.theme),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\n    });\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    const styles = getStyles(this.emotion);\n    return (\n      <div\n        className={this.emotion.cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<SizeProp, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}

package/components/Kebab/Kebab.d.ts

@@ -40,11 +40,13 @@ export interface KebabState {
 declare type DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;
 export declare class Kebab extends React.Component<KebabProps, KebabState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {};
     static defaultProps: DefaultProps;
     private getProps;
     state: KebabState;
     private theme;
+    private emotion;
     private setRootNode;
     private listener;
     componentDidMount(): void;

package/components/Kebab/Kebab.styles/Kebab.styles.js

@@ -2,45 +2,47 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  kebab: function kebab(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover, t.kebabBackgroundActive);
-  },
-  kebabSmall: function kebabSmall(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeSmall, t.kebabSizeSmall);
-  },
-  kebabMedium: function kebabMedium(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeMedium, t.kebabSizeMedium);
-  },
-  kebabLarge: function kebabLarge(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeLarge, t.kebabSizeLarge);
-  },
-  kebab2022: function kebab2022() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    "])));
-  },
-  focused: function focused(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n    "])), t.kebabBackgroundHover, t.borderColorFocus);
-  },
-  opened: function opened(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])), t.kebabBackgroundActive);
-  },
-  disabled: function disabled() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
-  },
-  icon: function icon(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      line-height: 1;\n    "])), t.kebabIconColor);
-  },
-  iconsmall: function iconsmall(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      margin-top: 2px;\n      font-size: ", ";\n    "])), t.kebabIconSizeSmall);
-  },
-  iconmedium: function iconmedium(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: ", ";\n    "])), t.kebabIconSizeMedium);
-  },
-  iconlarge: function iconlarge(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: ", ";\n    "])), t.kebabIconSizeLarge);
-  },
-  menu: function menu(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
-  }
-});
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    kebab: function kebab(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        text-align: center;\n        border: ", ";\n        box-sizing: border-box;\n        border-radius: ", ";\n        user-select: none;\n        cursor: pointer;\n        outline: 0;\n        transition: background 0.12s ease-out;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &:active {\n          background: ", ";\n        }\n      "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover, t.kebabBackgroundActive);
+    },
+    kebabSmall: function kebabSmall(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n      "])), t.kebabSizeSmall, t.kebabSizeSmall);
+    },
+    kebabMedium: function kebabMedium(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n      "])), t.kebabSizeMedium, t.kebabSizeMedium);
+    },
+    kebabLarge: function kebabLarge(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        width: ", ";\n        height: ", ";\n      "])), t.kebabSizeLarge, t.kebabSizeLarge);
+    },
+    kebab2022: function kebab2022() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      "])));
+    },
+    focused: function focused(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        border-color: ", ";\n      "])), t.kebabBackgroundHover, t.borderColorFocus);
+    },
+    opened: function opened(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        background: ", " !important; // override kebab:hover style\n        cursor: default;\n      "])), t.kebabBackgroundActive);
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      "])));
+    },
+    icon: function icon(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        line-height: 1;\n      "])), t.kebabIconColor);
+    },
+    iconsmall: function iconsmall(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        margin-top: 2px;\n        font-size: ", ";\n      "])), t.kebabIconSizeSmall);
+    },
+    iconmedium: function iconmedium(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        margin-top: -1px;\n        margin-left: 0.5px;\n        font-size: ", ";\n      "])), t.kebabIconSizeMedium);
+    },
+    iconlarge: function iconlarge(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        margin-top: -2px;\n        margin-left: 1px;\n        font-size: ", ";\n      "])), t.kebabIconSizeLarge);
+    },
+    menu: function menu(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        overflow: hidden;\n        border-radius: ", ";\n      "])), t.popupBorderRadius);
+    }
+  });
+};

package/components/Kebab/Kebab.styles/Kebab.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.styles.ts"],"names":["css","memoizeStyle","styles","kebab","t","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","kebabBackgroundActive","kebabSmall","kebabSizeSmall","kebabMedium","kebabSizeMedium","kebabLarge","kebabSizeLarge","kebab2022","focused","borderColorFocus","opened","disabled","icon","kebabIconColor","iconsmall","kebabIconSizeSmall","iconmedium","kebabIconSizeMedium","iconlarge","kebabIconSizeLarge","menu","popupBorderRadius"],"mappings":"gVAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;;;AAGYI,IAAAA,CAAC,CAACC,WAHd;;AAKmBD,IAAAA,CAAC,CAACE,iBALrB;;;;;AAUgBF,IAAAA,CAAC,CAACG,eAVlB;;;AAakBH,IAAAA,CAAC,CAACI,oBAbpB;;;;AAiBkBJ,IAAAA,CAAC,CAACK,qBAjBpB;;;AAoBD,GAtBgC;;AAwBjCC,EAAAA,UAxBiC,sBAwBtBN,CAxBsB,EAwBZ;AACnB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACO,cADb;AAEYP,IAAAA,CAAC,CAACO,cAFd;;AAID,GA7BgC;;AA+BjCC,EAAAA,WA/BiC,uBA+BrBR,CA/BqB,EA+BX;AACpB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACS,eADb;AAEYT,IAAAA,CAAC,CAACS,eAFd;;AAID,GApCgC;;AAsCjCC,EAAAA,UAtCiC,sBAsCtBV,CAtCsB,EAsCZ;AACnB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACW,cADb;AAEYX,IAAAA,CAAC,CAACW,cAFd;;AAID,GA3CgC;;AA6CjCC,EAAAA,SA7CiC,uBA6CrB;AACV,WAAOhB,GAAP;;;;;AAKD,GAnDgC;;AAqDjCiB,EAAAA,OArDiC,mBAqDzBb,CArDyB,EAqDf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,oBADlB;AAEkBJ,IAAAA,CAAC,CAACc,gBAFpB;;AAID,GA1DgC;;AA4DjCC,EAAAA,MA5DiC,kBA4D1Bf,CA5D0B,EA4DhB;AACf,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACK,qBADlB;;;AAID,GAjEgC;;AAmEjCW,EAAAA,QAnEiC,sBAmEtB;AACT,WAAOpB,GAAP;;;;;;;AAOD,GA3EgC;;AA6EjCqB,EAAAA,IA7EiC,gBA6E5BjB,CA7E4B,EA6ElB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACkB,cADb;;;AAID,GAlFgC;;AAoFjCC,EAAAA,SApFiC,qBAoFvBnB,CApFuB,EAoFb;AAClB,WAAOJ,GAAP;;AAEeI,IAAAA,CAAC,CAACoB,kBAFjB;;AAID,GAzFgC;;AA2FjCC,EAAAA,UA3FiC,sBA2FtBrB,CA3FsB,EA2FZ;AACnB,WAAOJ,GAAP;;;AAGeI,IAAAA,CAAC,CAACsB,mBAHjB;;AAKD,GAjGgC;;AAmGjCC,EAAAA,SAnGiC,qBAmGvBvB,CAnGuB,EAmGb;AAClB,WAAOJ,GAAP;;;AAGeI,IAAAA,CAAC,CAACwB,kBAHjB;;AAKD,GAzGgC;;AA2GjCC,EAAAA,IA3GiC,gBA2G5BzB,CA3G4B,EA2GlB;AACb,WAAOJ,GAAP;;AAEmBI,IAAAA,CAAC,CAAC0B,iBAFrB;;AAID,GAhHgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  kebab(t: Theme) {\n    return css`\n      display: inline-block;\n      text-align: center;\n      border: ${t.kebabBorder};\n      box-sizing: border-box;\n      border-radius: ${t.kebabBorderRadius};\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ${t.kebabBackground};\n\n      &:hover {\n        background: ${t.kebabBackgroundHover};\n      }\n\n      &:active {\n        background: ${t.kebabBackgroundActive};\n      }\n    `;\n  },\n\n  kebabSmall(t: Theme) {\n    return css`\n      width: ${t.kebabSizeSmall};\n      height: ${t.kebabSizeSmall};\n    `;\n  },\n\n  kebabMedium(t: Theme) {\n    return css`\n      width: ${t.kebabSizeMedium};\n      height: ${t.kebabSizeMedium};\n    `;\n  },\n\n  kebabLarge(t: Theme) {\n    return css`\n      width: ${t.kebabSizeLarge};\n      height: ${t.kebabSizeLarge};\n    `;\n  },\n\n  kebab2022() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover};\n      border-color: ${t.borderColorFocus};\n    `;\n  },\n\n  opened(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundActive} !important; // override kebab:hover style\n      cursor: default;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      color: ${t.kebabIconColor};\n      line-height: 1;\n    `;\n  },\n\n  iconsmall(t: Theme) {\n    return css`\n      margin-top: 2px;\n      font-size: ${t.kebabIconSizeSmall};\n    `;\n  },\n\n  iconmedium(t: Theme) {\n    return css`\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: ${t.kebabIconSizeMedium};\n    `;\n  },\n\n  iconlarge(t: Theme) {\n    return css`\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: ${t.kebabIconSizeLarge};\n    `;\n  },\n\n  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Kebab.styles.ts"],"names":["memoizeStyle","getStyles","emotion","kebab","t","css","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","kebabBackgroundActive","kebabSmall","kebabSizeSmall","kebabMedium","kebabSizeMedium","kebabLarge","kebabSizeLarge","kebab2022","focused","borderColorFocus","opened","disabled","icon","kebabIconColor","iconsmall","kebabIconSizeSmall","iconmedium","kebabIconSizeMedium","iconlarge","kebabIconSizeLarge","menu","popupBorderRadius"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,KADW,iBACLC,CADK,EACK;AACd,eAAOF,OAAO,CAACG,GAAf;;;AAGYD,QAAAA,CAAC,CAACE,WAHd;;AAKmBF,QAAAA,CAAC,CAACG,iBALrB;;;;;AAUgBH,QAAAA,CAAC,CAACI,eAVlB;;;AAakBJ,QAAAA,CAAC,CAACK,oBAbpB;;;;AAiBkBL,QAAAA,CAAC,CAACM,qBAjBpB;;;AAoBD,OAtBU;;AAwBXC,MAAAA,UAxBW,sBAwBAP,CAxBA,EAwBU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACQ,cADb;AAEYR,QAAAA,CAAC,CAACQ,cAFd;;AAID,OA7BU;;AA+BXC,MAAAA,WA/BW,uBA+BCT,CA/BD,EA+BW;AACpB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACU,eADb;AAEYV,QAAAA,CAAC,CAACU,eAFd;;AAID,OApCU;;AAsCXC,MAAAA,UAtCW,sBAsCAX,CAtCA,EAsCU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACY,cADb;AAEYZ,QAAAA,CAAC,CAACY,cAFd;;AAID,OA3CU;;AA6CXC,MAAAA,SA7CW,uBA6CC;AACV,eAAOf,OAAO,CAACG,GAAf;;;;;AAKD,OAnDU;;AAqDXa,MAAAA,OArDW,mBAqDHd,CArDG,EAqDO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACK,oBADlB;AAEkBL,QAAAA,CAAC,CAACe,gBAFpB;;AAID,OA1DU;;AA4DXC,MAAAA,MA5DW,kBA4DJhB,CA5DI,EA4DM;AACf,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACM,qBADlB;;;AAID,OAjEU;;AAmEXW,MAAAA,QAnEW,sBAmEA;AACT,eAAOnB,OAAO,CAACG,GAAf;;;;;;;AAOD,OA3EU;;AA6EXiB,MAAAA,IA7EW,gBA6ENlB,CA7EM,EA6EI;AACb,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACmB,cADb;;;AAID,OAlFU;;AAoFXC,MAAAA,SApFW,qBAoFDpB,CApFC,EAoFS;AAClB,eAAOF,OAAO,CAACG,GAAf;;AAEeD,QAAAA,CAAC,CAACqB,kBAFjB;;AAID,OAzFU;;AA2FXC,MAAAA,UA3FW,sBA2FAtB,CA3FA,EA2FU;AACnB,eAAOF,OAAO,CAACG,GAAf;;;AAGeD,QAAAA,CAAC,CAACuB,mBAHjB;;AAKD,OAjGU;;AAmGXC,MAAAA,SAnGW,qBAmGDxB,CAnGC,EAmGS;AAClB,eAAOF,OAAO,CAACG,GAAf;;;AAGeD,QAAAA,CAAC,CAACyB,kBAHjB;;AAKD,OAzGU;;AA2GXC,MAAAA,IA3GW,gBA2GN1B,CA3GM,EA2GI;AACb,eAAOF,OAAO,CAACG,GAAf;;AAEmBD,QAAAA,CAAC,CAAC2B,iBAFrB;;AAID,OAhHU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    kebab(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        text-align: center;\n        border: ${t.kebabBorder};\n        box-sizing: border-box;\n        border-radius: ${t.kebabBorderRadius};\n        user-select: none;\n        cursor: pointer;\n        outline: 0;\n        transition: background 0.12s ease-out;\n        background: ${t.kebabBackground};\n\n        &:hover {\n          background: ${t.kebabBackgroundHover};\n        }\n\n        &:active {\n          background: ${t.kebabBackgroundActive};\n        }\n      `;\n    },\n\n    kebabSmall(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeSmall};\n        height: ${t.kebabSizeSmall};\n      `;\n    },\n\n    kebabMedium(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeMedium};\n        height: ${t.kebabSizeMedium};\n      `;\n    },\n\n    kebabLarge(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeLarge};\n        height: ${t.kebabSizeLarge};\n      `;\n    },\n\n    kebab2022() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      `;\n    },\n\n    focused(t: Theme) {\n      return emotion.css`\n        background: ${t.kebabBackgroundHover};\n        border-color: ${t.borderColorFocus};\n      `;\n    },\n\n    opened(t: Theme) {\n      return emotion.css`\n        background: ${t.kebabBackgroundActive} !important; // override kebab:hover style\n        cursor: default;\n      `;\n    },\n\n    disabled() {\n      return emotion.css`\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      `;\n    },\n\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.kebabIconColor};\n        line-height: 1;\n      `;\n    },\n\n    iconsmall(t: Theme) {\n      return emotion.css`\n        margin-top: 2px;\n        font-size: ${t.kebabIconSizeSmall};\n      `;\n    },\n\n    iconmedium(t: Theme) {\n      return emotion.css`\n        margin-top: -1px;\n        margin-left: 0.5px;\n        font-size: ${t.kebabIconSizeMedium};\n      `;\n    },\n\n    iconlarge(t: Theme) {\n      return emotion.css`\n        margin-top: -2px;\n        margin-left: 1px;\n        font-size: ${t.kebabIconSizeLarge};\n      `;\n    },\n\n    menu(t: Theme) {\n      return emotion.css`\n        overflow: hidden;\n        border-radius: ${t.popupBorderRadius};\n      `;\n    },\n  });\n"]}

package/components/Kebab/Kebab.styles.d.ts

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