@foxford/ui 2.2.0-beta-07cd754-20230316 → 2.3.0

package/components/Arrow/Arrow.js

@@ -1,2 +1,2 @@
-import t from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{PureComponent as e}from'react';import o from'./images/arrow.module.svg.js';import{Root as i}from'./style.js';import{jsx as s}from'react/jsx-runtime';var a=["top","right","bottom","left","onClick"];var l={top:0,right:90,bottom:180,left:270};class n extends e{constructor(){super(...arguments),this.onClickHandler=t=>{t.preventDefault();var{disabled:r,onClick:e}=this.props;r||'function'!=typeof e||e(t)}}render(){var e=this.props,{top:n,right:p,bottom:m,left:c}=e,f=r(e,a);var d={top:n&&!m,right:p&&!c,bottom:m&&!n,left:c&&!p};var b=Object.values(d).filter((t=>!0===t)).length>1;var h=Object.keys(d).reduce(((t,r)=>d[r]?t+l[r]:t),0)/(b?2:1);var u={transform:"rotate(".concat(h,"deg)").concat(b?' translateY(-3px)':'')};return s(i,t(t({},f),{},{onClick:this.onClickHandler,children:s("span",{children:s(o,{style:u})})}))}}n.displayName='Arrow',n.defaultProps={size:'l',top:!1,right:!1,bottom:!1,left:!1,inverse:!1,outline:!1,disabled:!1,onClick:()=>{}};export{n as Arrow};
+import r from'@babel/runtime/helpers/objectSpread2';import{forwardRef as o}from'react';import{useUiTheme as e}from'../../hooks/use-theme.js';import s from'./images/arrow.module.svg.js';import a from'./images/chevron.module.svg.js';import{getArrowRotation as i}from'./utils.js';import{Root as t}from'./style.js';import{jsx as m}from'react/jsx-runtime';var n=o(((o,n)=>{var l,p,v,d;var u=e();var f='brand'===o.preset||'brand'===u.preset;var c=i(o);var b='l';var j='50%';var w=null===(l=u.components)||void 0===l||null===(p=l.Arrow)||void 0===p?void 0:p.size;var h=null===(v=u.components)||void 0===v||null===(d=v.Arrow)||void 0===d?void 0:d.square;return w&&(b=w),o.size&&(b=o.size),f&&(h&&(j='8px'),o.square&&(j='8px')),m(t,r(r({ref:n,type:"button"},o),{},{size:b,borderRadius:j,onClick:r=>{r.preventDefault(),o.disabled||'function'!=typeof o.onClick||o.onClick(r)},children:m("span",{children:m(f?s:a,{style:c})})}))}));var l='Arrow';n.displayName="Arrow";export{n as Arrow,l as COMPONENT_NAME};
 //# sourceMappingURL=Arrow.js.map

package/components/Arrow/Arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../../src/components/Arrow/Arrow.tsx"],"sourcesContent":["import { PureComponent } from 'react'\nimport { BaseProps } from '../../shared/interfaces'\nimport ArrowSvg from './images/arrow.module.svg'\nimport * as Styled from './style'\n\nconst DIR_MAP = {\n  top: 0,\n  right: 90,\n  bottom: 180,\n  left: 270,\n}\n\nexport interface ArrowProps extends BaseProps {\n  /**\n   * Size of icon\n   */\n  size?: 'xs' | 'm' | 'l'\n  /**\n   * Direction arrow\n   */\n  top?: boolean\n  /**\n   * Direction arrow\n   */\n  right?: boolean\n  /**\n   * Direction arrow\n   */\n  bottom?: boolean\n  /**\n   * Direction arrow\n   */\n  left?: boolean\n  inverse?: boolean\n  outline?: boolean\n  disabled?: boolean\n  // eslint-disable-next-line no-unused-vars\n  onClick?(event: React.MouseEvent<HTMLButtonElement>): void\n}\n\n/* eslint-disable react/prefer-stateless-function */\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport class Arrow extends PureComponent<ArrowProps> {\n  static displayName = 'Arrow'\n  static defaultProps = {\n    size: 'l',\n    top: false,\n    right: false,\n    bottom: false,\n    left: false,\n    inverse: false,\n    outline: false,\n    disabled: false,\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onClick: () => {},\n  }\n\n  onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault()\n    const { disabled, onClick } = this.props\n\n    if (!disabled && typeof onClick === 'function') {\n      onClick(event)\n    }\n  }\n\n  render() {\n    const {\n      top,\n      right,\n      bottom,\n      left,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick, // eslint-disable-line no-unused-vars\n      ...restProps\n    } = this.props\n\n    const arrowDir = {\n      top: top && !bottom,\n      right: right && !left,\n      bottom: bottom && !top,\n      left: left && !right,\n    }\n\n    const isMultiDir = Object.values(arrowDir).filter((value) => value === true).length > 1\n\n    const rotateDeg =\n      Object.keys(arrowDir).reduce((acc, key) => (arrowDir[key] ? acc + DIR_MAP[key] : acc), 0) / (isMultiDir ? 2 : 1)\n\n    const arrowStyle = {\n      transform: `rotate(${rotateDeg}deg)${isMultiDir ? ' translateY(-3px)' : ''}`,\n    }\n\n    return (\n      <Styled.Root {...restProps} onClick={this.onClickHandler}>\n        <span>\n          <ArrowSvg style={arrowStyle} />\n        </span>\n      </Styled.Root>\n    )\n  }\n}\n"],"names":["DIR_MAP","top","right","bottom","left","Arrow","PureComponent","constructor","super","arguments","this","onClickHandler","event","preventDefault","disabled","onClick","props","render","_this$props","restProps","_objectWithoutProperties","_excluded","arrowDir","isMultiDir","Object","values","filter","value","length","rotateDeg","keys","reduce","acc","key","arrowStyle","transform","concat","_jsx","Styled.Root","children","ArrowSvg","style","displayName","defaultProps","size","inverse","outline"],"mappings":"8TAKA,IAAMA,EAAU,CACdC,IAAK,EACLC,MAAO,GACPC,OAAQ,IACRC,KAAM,KAqCD,MAAMC,UAAcC,EAA0BC,cAAAC,SAAAC,WAAAC,KAenDC,eAAkBC,IAChBA,EAAMC,iBACN,IAAMC,SAAEA,EAAFC,QAAYA,GAAYL,KAAKM,MAE9BF,GAA+B,mBAAZC,GACtBA,EAAQH,IAIZK,SACE,IAAAC,EAQIR,KAAKM,OARHf,IACJA,EADIC,MAEJA,EAFIC,OAGJA,EAHIC,KAIJA,GAJFc,EAOKC,EAPLC,EAAAF,EAAAG,GAUA,IAAMC,EAAW,CACfrB,IAAKA,IAAQE,EACbD,MAAOA,IAAUE,EACjBD,OAAQA,IAAWF,EACnBG,KAAMA,IAASF,GAGjB,IAAMqB,EAAaC,OAAOC,OAAOH,GAAUI,QAAQC,IAAoB,IAAVA,IAAgBC,OAAS,EAEtF,IAAMC,EACJL,OAAOM,KAAKR,GAAUS,SAAQC,EAAKC,IAASX,EAASW,GAAOD,EAAMhC,EAAQiC,GAAOD,GAAM,IAAMT,EAAa,EAAI,GAEhH,IAAMW,EAAa,CACjBC,2BAAqBN,EAAZ,QAAAO,OAA4Bb,EAAa,oBAAsB,KAG1E,OACEc,EAACC,SAAgBnB,GAAjB,GAAA,CAA4BJ,QAASL,KAAKC,eAA1C4B,SACEF,EAAA,OAAA,CAAAE,SACEF,EAACG,EAAD,CAAUC,MAAOP,UAtDd7B,EACJqC,YAAc,QADVrC,EAEJsC,aAAe,CACpBC,KAAM,IACN3C,KAAK,EACLC,SACAC,QAAAA,EACAC,MAAM,EACNyC,WACAC,SAAAA,EACAhC,UAAU,EAEVC,QAAS"}
+{"version":3,"file":"Arrow.js","sources":["../../../../src/components/Arrow/Arrow.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useUiTheme } from 'hooks/use-theme'\nimport ArrowSvg from './images/arrow.module.svg'\nimport ChevronSvg from './images/chevron.module.svg'\nimport type { ArrowProps, ArrowSize } from './types'\nimport { getArrowRotation } from './utils'\n\nimport * as Styled from './style'\n\n/**\n * Button with arrow icon\n */\nconst Arrow = forwardRef<HTMLButtonElement, ArrowProps>((props, ref) => {\n  const theme = useUiTheme()\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault()\n\n    if (!props.disabled && typeof props.onClick === 'function') {\n      props.onClick(event)\n    }\n  }\n\n  const brandPresetUsed = props.preset === 'brand' || theme.preset === 'brand'\n  const rotationStyles = getArrowRotation(props)\n\n  let size: ArrowSize = 'l'\n  let borderRadius = '50%'\n\n  const contextSize = theme.components?.Arrow?.size\n  const contextSquare = theme.components?.Arrow?.square\n\n  if (contextSize) size = contextSize\n  if (props.size) size = props.size\n\n  if (brandPresetUsed) {\n    if (contextSquare) borderRadius = '8px'\n    if (props.square) borderRadius = '8px'\n  }\n\n  return (\n    <Styled.Root ref={ref} type='button' {...props} size={size} borderRadius={borderRadius} onClick={handleClick}>\n      <span>{brandPresetUsed ? <ArrowSvg style={rotationStyles} /> : <ChevronSvg style={rotationStyles} />}</span>\n    </Styled.Root>\n  )\n})\n\nconst COMPONENT_NAME = 'Arrow'\n\nArrow.displayName = COMPONENT_NAME\n\nexport { Arrow, COMPONENT_NAME }\n\nexport type { ArrowProps }\n"],"names":["Arrow","forwardRef","props","ref","_theme$components","_theme$components$Arr","_theme$components2","_theme$components2$Ar","theme","useUiTheme","brandPresetUsed","preset","rotationStyles","getArrowRotation","size","borderRadius","contextSize","components","contextSquare","square","_jsx","Styled.Root","_objectSpread","type","onClick","event","preventDefault","disabled","children","ArrowSvg","ChevronSvg","style","COMPONENT_NAME","displayName"],"mappings":"+VAYMA,IAAAA,EAAQC,GAAAA,CAA2CC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EAAAC,EACtE,IAAMC,EAAQC,IAUd,IAAMC,EAAmC,UAAjBR,EAAMS,QAAuC,UAAjBH,EAAMG,OAC1D,IAAMC,EAAiBC,EAAiBX,GAExC,IAAIY,EAAkB,IACtB,IAAIC,EAAe,MAEnB,IAAMC,UAAcR,EAAAA,EAAMS,kBAAAA,OAAN,UAAAb,EAAkBJ,aAAAA,IAAlBK,SAAAA,EAAyBS,KAC7C,IAAMI,UAAgBV,EAAAA,EAAMS,yBAAN,UAAAX,EAAkBN,aAAAA,IAAlBO,OAAAA,EAAAA,EAAyBY,OAU/C,OARIH,IAAaF,EAAOE,GACpBd,EAAMY,OAAMA,EAAOZ,EAAMY,MAEzBJ,IACEQ,IAAeH,EAAe,OAC9Bb,EAAMiB,SAAQJ,EAAe,QAIjCK,EAACC,EAADC,EAAAA,EAAA,CAAanB,IAAKA,EAAKoB,KAAK,UAAarB,GAAzC,GAAA,CAAgDY,KAAMA,EAAMC,aAAcA,EAAcS,QA1BrEC,IACnBA,EAAMC,iBAEDxB,EAAMyB,UAAqC,mBAAlBzB,EAAMsB,SAClCtB,EAAMsB,QAAQC,IAsBhBG,SACER,EAAA,OAAA,CAAAQ,SAAyBR,EAAlBV,EAAmBmB,EAAsCC,EAAvC,CAAUC,MAAOnB,YAK1CoB,IAAAA,EAAiB,QAEvBhC,EAAMiC,YAFiB"}

package/components/Arrow/images/arrow.module.svg.js

@@ -1,2 +1,2 @@
-import*as t from'react';var r;function e(){return e=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var a in e)({}).hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t},e.apply(this,arguments)}var a=a=>t.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 4.233 4.233"},a),r||(r=t.createElement("path",{d:"m.76 3.175-.363-.369 1.72-1.748 1.72 1.748-.363.369-1.357-1.38z"})));export{a as default};
+import*as r from'react';var t;function e(){return e=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)({}).hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},e.apply(this,arguments)}var n=n=>r.createElement("svg",e({width:14,height:16,fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),t||(t=r.createElement("path",{d:"M7 1v14M7 1l6 6M7 1 1 7",stroke:"currentcolor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})));export{n as default};
 //# sourceMappingURL=arrow.module.svg.js.map

package/components/Arrow/images/arrow.module.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow.module.svg.js","sources":["../../../../../src/components/Arrow/images/arrow.module.svg"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 4.233 4.233\"><path d=\"M.76 3.175l-.363-.369 1.72-1.748 1.72 1.748-.363.369-1.357-1.38z\" /></svg>\n"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgArrowmodule","props","React","createElement","xmlns","width","height","viewBox","d"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAAA,IAA+BE,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAyCC,GACvBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,6BACPC,MAAO,GACPC,OAAQ,GACRC,QAAS,mBACRN,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEK,EAAG"}
+{"version":3,"file":"arrow.module.svg.js","sources":["../../../../../src/components/Arrow/images/arrow.module.svg"],"sourcesContent":["<svg width=\"14\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 1v14M7 1l6 6M7 1 1 7\" stroke=\"currentcolor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgArrowmodule","props","React","createElement","width","height","fill","xmlns","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAcN,IAAiBQ,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAyCC,GACvBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,GACPC,OAAQ,GACRC,KAAM,OACNC,MAAO,8BACNN,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEK,EAAG,0BACHC,OAAQ,eACRC,YAAa,IACbC,cAAe,QACfC,eAAgB"}

package/components/Arrow/images/chevron.module.svg.js

@@ -0,0 +1,2 @@
+import*as t from'react';var r;function e(){return e=Object.assign||function(t){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var a in e)({}).hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t},e.apply(this,arguments)}var a=a=>t.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 4.233 4.233"},a),r||(r=t.createElement("path",{d:"m.76 3.175-.363-.369 1.72-1.748 1.72 1.748-.363.369-1.357-1.38z"})));export{a as default};
+//# sourceMappingURL=chevron.module.svg.js.map

package/components/Arrow/images/chevron.module.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron.module.svg.js","sources":["../../../../../src/components/Arrow/images/chevron.module.svg"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 4.233 4.233\"><path d=\"M.76 3.175l-.363-.369 1.72-1.748 1.72 1.748-.363.369-1.357-1.38z\" /></svg>\n"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgChevronmodule","props","React","createElement","xmlns","width","height","viewBox","d"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAAA,IAA+BE,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAA6CC,GAC3BC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,6BACPC,MAAO,GACPC,OAAQ,GACRC,QAAS,mBACRN,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEK,EAAG"}

package/components/Arrow/style.js

@@ -1,2 +1,2 @@
-import e,{css as o}from'styled-components';var a=o(["box-shadow:inset 0 0 0 2px ",";background:transparent;svg{fill:",";}"],(e=>e.theme.colors.alto),(e=>e.theme.colors.alto));var t=o(["box-shadow:inset 0 0 0 2px ",";background:transparent;&:hover,&:active{background:",";svg{fill:",";}}&:active{box-shadow:inset 0 4px 0 #eaecf3;}svg{fill:",";}"],(e=>e.theme.colors.white),(e=>e.theme.colors.white),(e=>e.theme.colors.accent),(e=>e.theme.colors.white));var r=o(["cursor:not-allowed;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);"]);var s=e.button.withConfig({componentId:"fox-ui__sc-1xgj0m4-0"})(["outline:0;border:0;background:#fff;border-radius:99em;display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0;box-shadow:0 6px 20px rgba(0,0,0,0.1);transition:all 0.2s ease;margin:0;padding:0;cursor:pointer;"," &:hover{background:",";box-shadow:none;svg{fill:white;}}&:active{background:darken($accent,13);box-shadow:inset 0 4px 0 rgba(5,108,188,0.5);}svg{transition:all 0.2s ease;fill:",";}"," "," ",""],(e=>e.size?(e=>{var a;switch(e){case'l':a=40;break;case'm':default:a=28;break;case'xs':a=20}return o(["border-radius:","px;width:","px;height:","px;"],a,a,a)})(e.size):null),(e=>e.theme.colors.accent),(e=>e.theme.colors.accent),(e=>e.outline?a:null),(e=>e.inverse?t:null),(e=>e.disabled?r:null));export{s as Root};
+import o,{css as n}from'styled-components';import{injectDefaultTheme as r}from'../../shared/utils/inject-theme.js';import{responsiveProperty as c}from'../../mixins/responsive-property.js';var e={l:48,m:44,xs:40};var t={l:40,m:28,xs:20};var a=['preset','square','onColored','size','top','right','bottom','left','inverse','outline','borderRadius'];var l="\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n";var i="\n  cursor: not-allowed;\n  -webkit-filter: grayscale(100%);\n  -moz-filter: grayscale(100%);\n  -ms-filter: grayscale(100%);\n  -o-filter: grayscale(100%);\n  filter: grayscale(100%);\n";var s={filled:{default:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n        background-color: ".concat(r?n.colors['bg-disabled-large']:n.colors['bg-onmain-tertiary'],";\n        color: ").concat(r?n.colors['content-disabled']:n.colors['content-onmain-primary'],";\n        &::before {\n          ").concat(l,"\n          opacity: 0;\n          background-color: ").concat(n.colors['bg-oncolor-hover'],";\n      \n        }\n        &::after {\n          ").concat(l,"\n          opacity: 0;\n          box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n        }\n        ").concat(r?'cursor: default;':"\n              &:hover::before {\n                opacity: 1;\n              }\n              &:active::before {\n                opacity: 0;\n              }\n              &:active::after {\n                opacity: 1;\n              }\n              &:active {\n                background-color: ".concat(n.colors['bg-brand-primary-basic-active'],";\n                color: ").concat(n.colors['content-oncolor-primary'],";\n              }\n            "),"\n      ")})),onColored:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n        background-color: ".concat(n.colors['bg-oncolor-primary'],";\n        color: ").concat(r?n.colors['content-disabled']:n.colors['content-oncolor-constant'],";\n        &::before {\n          ").concat(l,"\n          opacity: 0;\n          background-color: ").concat(n.colors['bg-oncolor-hover'],";\n        }\n        &::after {\n          ").concat(l,"\n          opacity: 0;\n          box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n        }\n        ").concat(r?'cursor: default;':"\n              &:hover::before {\n                opacity: 1;\n              }\n              &:active::after {\n                opacity: 1;\n              }\n            ","\n      ")}))},outline:{default:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n        background-color: transparent; \n        color: ".concat(r?n.colors['border-disabled']:n.colors['content-onmain-primary'],";\n        &::before {\n          ").concat(l,"\n          opacity: 1;\n          box-shadow: inset 0 0 0 1px ").concat(r?n.colors['border-disabled']:n.colors['border-onmain-contrast'],";\n        }\n        &::after {\n          ").concat(l,"\n          opacity: 0;\n          box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n        }\n        ").concat(r?'cursor: default;':"\n              &:hover::before {\n                opacity: 0;\n              }\n              &:hover {\n                background-color: ".concat(n.colors['bg-onmain-tertiary'],";\n              }\n              &:active::after {\n                opacity: 1;\n              }\n              &:active {\n                background-color: ").concat(n.colors['bg-brand-primary-basic-active'],";\n                color: ").concat(n.colors['content-oncolor-primary'],";\n              }\n            "),"\n      ")})),onColored:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n        background-color: transparent; \n        color: ".concat(r?n.colors['border-oncolor-disabled']:n.colors['content-oncolor-primary'],";\n        &::before {\n          ").concat(l,"\n          opacity: 1;\n          box-shadow: inset 0 0 0 1px ").concat(r?n.colors['border-oncolor-disabled']:n.colors['border-oncolor-default'],";\n        }\n        &::after {\n          ").concat(l,"\n          opacity: 0;\n          box-shadow: inset 0 4px ").concat(n.colors['bg-oncolor-hover'],";\n        }\n        ").concat(r?'cursor: default;':"\n              &:hover::before {\n                opacity: 0;\n              }\n              &:hover {\n                background-color: ".concat(n.colors['bg-oncolor-primary'],";\n                color: ").concat(n.colors['content-oncolor-constant'],";\n              }\n              &:active::after {\n                opacity: 1;\n              }\n            "),"\n      ")}))}};var d={filled:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n      background-color: ".concat(n.colors.white,";\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n      & svg {\n        fill: ").concat(n.colors.accent,";\n      }\n      &:hover {\n        background-color: ").concat(n.colors.accent,";\n        box-shadow: none;\n        svg {\n          fill: ").concat(n.colors.white,";\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ").concat(r?i:'',"\n    ")})),outline:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ".concat(n.colors.alto,";\n      & svg {\n        fill: ").concat(n.colors.alto,";\n      }\n      &:hover {\n        background-color: ").concat(n.colors.accent,";\n        box-shadow: none;\n        svg {\n          fill: ").concat(n.colors.white,";\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ").concat(r?i:'',"\n    ")})),inverse:n(["",""],(o=>{var{theme:n,disabled:r}=o;return"\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ".concat(n.colors.white,";\n      & svg {\n        fill: ").concat(n.colors.white,";\n      }\n      &:hover {\n        background-color: ").concat(n.colors.white,";\n        box-shadow: none;\n        svg {\n          fill: ").concat(n.colors.accent,";\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 #eaecf3;\n      }\n      ").concat(r?i:'',"\n    ")}))};var b=(o,n)=>{var r='brand'===o.preset||'brand'===o.theme.preset?e:t;return['l','m','xs'].includes(o.size)?"".concat(n,": ").concat(r[o.size],"px;"):c('size',n)};var p=o.button.withConfig({shouldForwardProp:o=>!a.includes(o)}).attrs(r).withConfig({componentId:"fox-ui__sc-1xgj0m4-0"})([""," "," "," "," ",""],"\n  &,\n  & > span {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  position: relative;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  line-height: 1;\n  cursor: pointer;\n  overflow: hidden;\n  transition-property: background-color, box-shadow;\n  &::before, \n  &::after {\n    transition-property: opacity;\n  }\n  &,\n  &::before,\n  &::after {\n    transition-duration: 200ms;\n  }\n",(o=>'brand'===o.preset||'brand'===o.theme.preset?o.outline&&o.onColored?s.outline.onColored:o.outline&&!o.onColored?s.outline.default:!o.outline&&o.onColored?s.filled.onColored:s.filled.default:o.inverse?d.inverse:o.outline?d.outline:d.filled),(o=>b(o,'height')),(o=>b(o,'width')),(o=>"border-radius: ".concat(o.borderRadius,";")));export{p as Root};
 //# sourceMappingURL=style.js.map

package/components/Arrow/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { ArrowProps } from './Arrow'\n\nconst outline = css`\n  box-shadow: inset 0 0 0 2px ${(props) => props.theme.colors.alto};\n  background: transparent;\n\n  svg {\n    fill: ${(props) => props.theme.colors.alto};\n  }\n`\n\nconst inverse = css`\n  box-shadow: inset 0 0 0 2px ${(props) => props.theme.colors.white};\n  background: transparent;\n  &:hover,\n  &:active {\n    background: ${(props) => props.theme.colors.white};\n    svg {\n      fill: ${(props) => props.theme.colors.accent};\n    }\n  }\n  &:active {\n    box-shadow: inset 0 4px 0 #eaecf3;\n  }\n\n  svg {\n    fill: ${(props) => props.theme.colors.white};\n  }\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  -webkit-filter: grayscale(100%);\n  -moz-filter: grayscale(100%);\n  -ms-filter: grayscale(100%);\n  -o-filter: grayscale(100%);\n  filter: grayscale(100%);\n`\n\nconst size = (size: ArrowProps['size']) => {\n  let radius\n  switch (size) {\n    case 'l':\n      radius = 40\n      break\n    case 'm':\n      radius = 28\n      break\n    case 'xs':\n      radius = 20\n      break\n    default:\n      radius = 28\n  }\n  return css`\n    border-radius: ${radius}px;\n    width: ${radius}px;\n    height: ${radius}px;\n  `\n}\n\nexport const Root = styled.button<ArrowProps>`\n  outline: 0;\n  border: 0;\n  background: #fff;\n  border-radius: 99em;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0;\n  line-height: 0;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transition: all 0.2s ease;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  ${(props) => (props.size ? size(props.size) : null)}\n\n  &:hover {\n    background: ${(props) => props.theme.colors.accent};\n    box-shadow: none;\n    svg {\n      fill: white;\n    }\n  }\n\n  &:active {\n    background: darken($accent, 13);\n    box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n  }\n\n  svg {\n    transition: all 0.2s ease;\n    fill: ${(props) => props.theme.colors.accent};\n  }\n\n  ${(props) => (props.outline ? outline : null)}\n  ${(props) => (props.inverse ? inverse : null)}\n  ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["outline","css","props","theme","colors","alto","inverse","white","accent","disabled","Root","styled","button","withConfig","componentId","size","radius"],"mappings":"2CAGA,IAAMA,EAAUC,EAAH,CAAA,8BAAA,oCAAA,OACoBC,GAAUA,EAAMC,MAAMC,OAAOC,OAIjDH,GAAUA,EAAMC,MAAMC,OAAOC,OAI1C,IAAMC,EAAUL,sKACiBC,GAAUA,EAAMC,MAAMC,OAAOG,QAI3CL,GAAUA,EAAMC,MAAMC,OAAOG,QAEjCL,GAAUA,EAAMC,MAAMC,OAAOI,SAQ/BN,GAAUA,EAAMC,MAAMC,OAAOG,QAI1C,IAAME,EAAWR,EAAjB,CAAA,+JA+BaS,IAAAA,EAAOC,EAAOC,OAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,kPAAA,uBAAA,4JAAA,KAAA,IAAA,IAAA,KAeZT,GAAWA,EAAMa,KArCRA,CAAAA,IACZ,IAAIC,EACJ,OAAQD,GACN,IAAK,IACHC,EAAS,GACT,MACF,IAAK,IAML,QACEA,EAAS,GAJX,MAAA,IAAK,KACHA,EAAS,GAKb,OAAOf,EACYe,CAAAA,iBAAAA,YAAAA,aAAAA,OAAAA,EACRA,EACCA,IAlBAD,CAqCoBb,EAAMa,MAAQ,OAG7Bb,GAAUA,EAAMC,MAAMC,OAAOI,SAcnCN,GAAUA,EAAMC,MAAMC,OAAOI,SAGrCN,GAAWA,EAAMF,QAAUA,EAAU,OACrCE,GAAWA,EAAMI,QAAUA,EAAU,OACrCJ,GAAWA,EAAMO,SAAWA,EAAW"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport type { ArrowRootProps, ArrowStaticSize, ArrowTransientProp } from './types'\n\nconst SIZES: Record<ArrowStaticSize, number> = { l: 48, m: 44, xs: 40 }\n\nconst DEFAULT_SIZES: Record<ArrowStaticSize, number> = { l: 40, m: 28, xs: 20 }\n\nconst TRANSIENT_PROPS: ArrowTransientProp[] = [\n  'preset',\n  'square',\n  'onColored',\n  'size',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'inverse',\n  'outline',\n  'borderRadius',\n]\n\nconst baseStyles = `\n  &,\n  & > span {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  position: relative;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  line-height: 1;\n  cursor: pointer;\n  overflow: hidden;\n  transition-property: background-color, box-shadow;\n  &::before, \n  &::after {\n    transition-property: opacity;\n  }\n  &,\n  &::before,\n  &::after {\n    transition-duration: 200ms;\n  }\n`\n\nconst pseudoBaseStyles = `\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n`\n\nconst defaultDisabledStyles = `\n  cursor: not-allowed;\n  -webkit-filter: grayscale(100%);\n  -moz-filter: grayscale(100%);\n  -ms-filter: grayscale(100%);\n  -o-filter: grayscale(100%);\n  filter: grayscale(100%);\n`\n\nconst PRESET = {\n  filled: {\n    default: css<ArrowRootProps>`\n      ${({ theme, disabled }) => `\n        background-color: ${disabled ? theme.colors['bg-disabled-large'] : theme.colors['bg-onmain-tertiary']};\n        color: ${disabled ? theme.colors['content-disabled'] : theme.colors['content-onmain-primary']};\n        &::before {\n          ${pseudoBaseStyles}\n          opacity: 0;\n          background-color: ${theme.colors['bg-oncolor-hover']};\n      \n        }\n        &::after {\n          ${pseudoBaseStyles}\n          opacity: 0;\n          box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n        }\n        ${\n          disabled\n            ? 'cursor: default;'\n            : `\n              &:hover::before {\n                opacity: 1;\n              }\n              &:active::before {\n                opacity: 0;\n              }\n              &:active::after {\n                opacity: 1;\n              }\n              &:active {\n                background-color: ${theme.colors['bg-brand-primary-basic-active']};\n                color: ${theme.colors['content-oncolor-primary']};\n              }\n            `\n        }\n      `}\n    `,\n    onColored: css<ArrowRootProps>`\n      ${({ theme, disabled }) => `\n        background-color: ${theme.colors['bg-oncolor-primary']};\n        color: ${disabled ? theme.colors['content-disabled'] : theme.colors['content-oncolor-constant']};\n        &::before {\n          ${pseudoBaseStyles}\n          opacity: 0;\n          background-color: ${theme.colors['bg-oncolor-hover']};\n        }\n        &::after {\n          ${pseudoBaseStyles}\n          opacity: 0;\n          box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n        }\n        ${\n          disabled\n            ? 'cursor: default;'\n            : `\n              &:hover::before {\n                opacity: 1;\n              }\n              &:active::after {\n                opacity: 1;\n              }\n            `\n        }\n      `}\n    `,\n  },\n  outline: {\n    default: css<ArrowRootProps>`\n      ${({ theme, disabled }) => `\n        background-color: transparent; \n        color: ${disabled ? theme.colors['border-disabled'] : theme.colors['content-onmain-primary']};\n        &::before {\n          ${pseudoBaseStyles}\n          opacity: 1;\n          box-shadow: inset 0 0 0 1px ${\n            disabled ? theme.colors['border-disabled'] : theme.colors['border-onmain-contrast']\n          };\n        }\n        &::after {\n          ${pseudoBaseStyles}\n          opacity: 0;\n          box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n        }\n        ${\n          disabled\n            ? 'cursor: default;'\n            : `\n              &:hover::before {\n                opacity: 0;\n              }\n              &:hover {\n                background-color: ${theme.colors['bg-onmain-tertiary']};\n              }\n              &:active::after {\n                opacity: 1;\n              }\n              &:active {\n                background-color: ${theme.colors['bg-brand-primary-basic-active']};\n                color: ${theme.colors['content-oncolor-primary']};\n              }\n            `\n        }\n      `}\n    `,\n    onColored: css<ArrowRootProps>`\n      ${({ theme, disabled }) => `\n        background-color: transparent; \n        color: ${disabled ? theme.colors['border-oncolor-disabled'] : theme.colors['content-oncolor-primary']};\n        &::before {\n          ${pseudoBaseStyles}\n          opacity: 1;\n          box-shadow: inset 0 0 0 1px ${\n            disabled ? theme.colors['border-oncolor-disabled'] : theme.colors['border-oncolor-default']\n          };\n        }\n        &::after {\n          ${pseudoBaseStyles}\n          opacity: 0;\n          box-shadow: inset 0 4px ${theme.colors['bg-oncolor-hover']};\n        }\n        ${\n          disabled\n            ? 'cursor: default;'\n            : `\n              &:hover::before {\n                opacity: 0;\n              }\n              &:hover {\n                background-color: ${theme.colors['bg-oncolor-primary']};\n                color: ${theme.colors['content-oncolor-constant']};\n              }\n              &:active::after {\n                opacity: 1;\n              }\n            `\n        }\n      `}\n    `,\n  },\n}\n\nconst PRESET_DEFAULT = {\n  filled: css<ArrowRootProps>`\n    ${({ theme, disabled }) => `\n      background-color: ${theme.colors.white};\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n      & svg {\n        fill: ${theme.colors.accent};\n      }\n      &:hover {\n        background-color: ${theme.colors.accent};\n        box-shadow: none;\n        svg {\n          fill: ${theme.colors.white};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ${disabled ? defaultDisabledStyles : ''}\n    `}\n  `,\n  outline: css<ArrowRootProps>`\n    ${({ theme, disabled }) => `\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n      & svg {\n        fill: ${theme.colors.alto};\n      }\n      &:hover {\n        background-color: ${theme.colors.accent};\n        box-shadow: none;\n        svg {\n          fill: ${theme.colors.white};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ${disabled ? defaultDisabledStyles : ''}\n    `}\n  `,\n  inverse: css<ArrowRootProps>`\n    ${({ theme, disabled }) => `\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ${theme.colors.white};\n      & svg {\n        fill: ${theme.colors.white};\n      }\n      &:hover {\n        background-color: ${theme.colors.white};\n        box-shadow: none;\n        svg {\n          fill: ${theme.colors.accent};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 #eaecf3;\n      }\n      ${disabled ? defaultDisabledStyles : ''}\n    `}\n  `,\n}\n\nconst extractSize = (props: ArrowRootProps & { theme: DefaultTheme }, cssProperty: 'height' | 'width') => {\n  const brandPresetUsed = props.preset === 'brand' || props.theme.preset === 'brand'\n  const config = brandPresetUsed ? SIZES : DEFAULT_SIZES\n\n  return ['l', 'm', 'xs'].includes(<ArrowStaticSize>props.size)\n    ? `${cssProperty}: ${config[<ArrowStaticSize>props.size]}px;`\n    : responsiveProperty('size', cssProperty)\n}\n\nconst extractStyles = (props: ArrowRootProps & { theme: DefaultTheme }) => {\n  const brandPresetUsed = props.preset === 'brand' || props.theme.preset === 'brand'\n\n  if (brandPresetUsed) {\n    if (props.outline && props.onColored) return PRESET.outline.onColored\n    if (props.outline && !props.onColored) return PRESET.outline.default\n    if (!props.outline && props.onColored) return PRESET.filled.onColored\n\n    return PRESET.filled.default\n  }\n\n  if (props.inverse) return PRESET_DEFAULT.inverse\n  if (props.outline) return PRESET_DEFAULT.outline\n\n  return PRESET_DEFAULT.filled\n}\n\nexport const Root = styled.button\n  .withConfig({\n    shouldForwardProp: (prop) => {\n      return !TRANSIENT_PROPS.includes(<ArrowTransientProp>prop)\n    },\n  })\n  .attrs(injectDefaultTheme)<ArrowRootProps>`\n  ${baseStyles}\n  ${extractStyles}\n  ${(props) => extractSize(props, 'height')}\n  ${(props) => extractSize(props, 'width')}\n  ${(props) => `border-radius: ${props.borderRadius};`}\n`\n"],"names":["SIZES","l","m","xs","DEFAULT_SIZES","TRANSIENT_PROPS","pseudoBaseStyles","defaultDisabledStyles","PRESET","filled","default","css","_ref","theme","disabled","concat","colors","onColored","_ref2","outline","_ref3","_ref4","PRESET_DEFAULT","_ref5","white","accent","_ref6","alto","inverse","_ref7","extractSize","props","cssProperty","config","preset","includes","size","responsiveProperty","Root","styled","button","withConfig","shouldForwardProp","prop","attrs","injectDefaultTheme","componentId","borderRadius"],"mappings":"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"}

package/components/Arrow/utils.js

@@ -0,0 +1,2 @@
+var t={top:0,right:90,bottom:180,left:270};function r(r){var{top:o,right:e,bottom:a,left:n}=r;var c={top:o&&!a,right:e&&!n,bottom:a&&!o,left:n&&!e};var l=Object.values(c).filter((t=>!0===t)).length>1;var f=Object.keys(c).reduce(((r,o)=>c[o]?r+t[o]:r),0)/(l?2:1);return{transform:"rotate(".concat(f,"deg)").concat(l?' translateY(-3px)':'')}}export{t as DIR_MAP,r as getArrowRotation};
+//# sourceMappingURL=utils.js.map

package/components/Arrow/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Arrow/utils.ts"],"sourcesContent":["import type { ArrowProps } from './types'\n\nexport const DIR_MAP = {\n  top: 0,\n  right: 90,\n  bottom: 180,\n  left: 270,\n}\n\nexport function getArrowRotation({ top, right, bottom, left }: ArrowProps): React.CSSProperties {\n  const arrowDir = {\n    top: top && !bottom,\n    right: right && !left,\n    bottom: bottom && !top,\n    left: left && !right,\n  }\n\n  const isMultiDir = Object.values(arrowDir).filter((value) => value === true).length > 1\n\n  const rotateDeg =\n    Object.keys(arrowDir).reduce((acc, key) => (arrowDir[key] ? acc + DIR_MAP[key] : acc), 0) / (isMultiDir ? 2 : 1)\n\n  return {\n    transform: `rotate(${rotateDeg}deg)${isMultiDir ? ' translateY(-3px)' : ''}`,\n  }\n}\n"],"names":["DIR_MAP","top","right","bottom","left","getArrowRotation","_ref","arrowDir","isMultiDir","Object","values","filter","value","length","rotateDeg","keys","reduce","acc","key","transform","concat"],"mappings":"AAEO,IAAMA,EAAU,CACrBC,IAAK,EACLC,MAAO,GACPC,OAAQ,IACRC,KAAM,KAGD,SAASC,EAAgFC,GAAA,IAA/DL,IAAEA,EAAFC,MAAOA,EAAPC,OAAcA,EAAdC,KAAsBA,GAAyCE,EAC9F,IAAMC,EAAW,CACfN,IAAKA,IAAQE,EACbD,MAAOA,IAAUE,EACjBD,OAAQA,IAAWF,EACnBG,KAAMA,IAASF,GAGjB,IAAMM,EAAaC,OAAOC,OAAOH,GAAUI,QAAQC,IAAoB,IAAVA,IAAgBC,OAAS,EAEtF,IAAMC,EACJL,OAAOM,KAAKR,GAAUS,SAAQC,EAAKC,IAASX,EAASW,GAAOD,EAAMjB,EAAQkB,GAAOD,GAAM,IAAMT,EAAa,EAAI,GAEhH,MAAO,CACLW,2BAAqBL,EAAZ,QAAAM,OAA4BZ,EAAa,oBAAsB"}

package/components/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport { cloneElement, PureComponent } from 'react'\nimport { ContextMenuMultiLevel } from '../../components/ContextMenu.Multilevel'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Tooltip } from './../Tooltip'\nimport { ContextMenuItem } from './Item'\nimport * as Styled from './style'\nimport { tooltipStyles } from './tooltip-styles'\n\nexport interface ContextMenuProps extends BaseProps {\n  /**\n   * Children react node\n   */\n  children: React.ReactNode\n  /** Indicates if button is active (e.g. when context menu is open) */\n  onClick?: (_e: React.MouseEvent<HTMLDivElement>) => void\n  /** Manually controled state */\n  isOpen?: boolean\n  /** On open menu callback  */\n  onOpen?: (_e: React.MouseEvent<HTMLDivElement>) => void\n  /** On close menu callback  */\n  onClose?: (_e: React.MouseEvent<HTMLDivElement>) => void\n  /** Content */\n  trigger?: React.ReactNode\n  /** Properties for inner Tooltip component */\n  tooltipProps?: Partial<Parameters<typeof Tooltip>[0]>\n  /** Hide overlay for debug */\n  hideOverlay?: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport class ContextMenu extends PureComponent<ContextMenuProps, { isOpen: boolean }> {\n  static Item = ContextMenuItem\n  static MultiLevel = ContextMenuMultiLevel\n  static displayName = 'ContextMenu'\n\n  static defaultProps = {\n    tooltipProps: {\n      event: 'click',\n      placement: 'left-start',\n      offset: 2,\n      showCloseButton: false,\n      styles: tooltipStyles,\n    },\n    hideOverlay: false,\n  }\n\n  constructor(props: ContextMenuProps) {\n    super(props)\n\n    this.state = {\n      isOpen: this.props.isOpen || false,\n    }\n  }\n\n  getOpen = () => {\n    const { isOpen } = this.props\n\n    if (isOpen !== undefined) return isOpen\n\n    return this.state.isOpen || false\n  }\n\n  openMenu = (e: React.MouseEvent<HTMLDivElement>) => {\n    this.setState({ isOpen: true })\n\n    const { onOpen } = this.props\n\n    onOpen && onOpen(e)\n  }\n\n  closeMenu = (e: React.MouseEvent<HTMLDivElement>) => {\n    this.setState({ isOpen: false })\n\n    const { onClose } = this.props\n\n    onClose && onClose(e)\n  }\n\n  toggleMenu = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { openMenu, closeMenu } = this\n    const isOpen = this.getOpen()\n\n    e.persist()\n    e.preventDefault()\n    e.stopPropagation()\n\n    isOpen ? closeMenu(e) : openMenu(e)\n\n    return false\n  }\n\n  render() {\n    const { className, tooltipProps = {}, trigger, children, hideOverlay } = this.props\n    const isOpen = this.getOpen()\n\n    if (children) tooltipProps.content = children\n\n    return (\n      <Styled.Root className={className} isOpen={isOpen} onClick={this.toggleMenu} hideOverlay={hideOverlay}>\n        <Tooltip {...tooltipProps} open={isOpen}>\n          <div onClick={this.closeMenu}>{trigger && cloneElement(trigger as any, { active: isOpen })}</div>\n        </Tooltip>\n      </Styled.Root>\n    )\n  }\n}\n"],"names":["ContextMenu","PureComponent","constructor","props","super","this","getOpen","isOpen","state","openMenu","e","setState","onOpen","closeMenu","onClose","toggleMenu","persist","preventDefault","stopPropagation","render","className","tooltipProps","trigger","children","hideOverlay","content","_jsx","Styled.Root","onClick","Tooltip","_objectSpread","open","cloneElement","active","Item","ContextMenuItem","MultiLevel","ContextMenuMultiLevel","displayName","defaultProps","event","placement","offset","showCloseButton","styles","tooltipStyles"],"mappings":"kaAkCO,MAAMA,UAAoBC,EAgB/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAQrCC,QAAU,KACR,IAAMC,OAAEA,GAAWF,KAAKF,MAExB,gBAAII,EAA6BA,EAE1BF,KAAKG,MAAMD,YAbiBF,KAgBrCI,SAAYC,IACVL,KAAKM,SAAS,CAAEJ,QAAAA,IAEhB,IAAMK,OAAEA,GAAWP,KAAKF,MAExBS,GAAUA,EAAOF,IArBkBL,KAwBrCQ,UAAaH,IACXL,KAAKM,SAAS,CAAEJ,YAEhB,IAAMO,QAAEA,GAAYT,KAAKF,MAEzBW,GAAWA,EAAQJ,IA7BgBL,KAgCrCU,WAAcL,IACZ,IAAMD,SAAEA,EAAFI,UAAYA,GAAcR,KAChC,IAAME,EAASF,KAAKC,UAQpB,OANAI,EAAEM,UACFN,EAAEO,iBACFP,EAAEQ,kBAEFX,EAASM,EAAUH,GAAKD,EAASC,OArCjCL,KAAKG,MAAQ,CACXD,OAAQF,KAAKF,MAAMI,SAAAA,GAyCvBY,SACE,IAAMC,UAAEA,EAAFC,aAAaA,EAAe,GAA5BC,QAAgCA,EAAhCC,SAAyCA,EAAzCC,YAAmDA,GAAgBnB,KAAKF,MAC9E,IAAMI,EAASF,KAAKC,UAIpB,OAFIiB,IAAUF,EAAaI,QAAUF,GAGnCG,EAACC,EAAD,CAAaP,UAAWA,EAAWb,OAAQA,EAAQqB,QAASvB,KAAKU,WAAYS,YAAaA,EAA1FD,SACEG,EAACG,EAADC,EAAAA,EAAA,GAAaT,GAAb,GAAA,CAA2BU,KAAMxB,EAAjCgB,SACEG,EAAA,MAAA,CAAKE,QAASvB,KAAKQ,UAAnBU,SAA+BD,GAAWU,EAAaV,EAAgB,CAAEW,OAAQ1B,YAtE9EP,EACJkC,KAAOC,EADHnC,EAEJoC,WAAaC,EAFTrC,EAGJsC,YAAc,cAHVtC,EAKJuC,aAAe,CACpBlB,aAAc,CACZmB,MAAO,QACPC,UAAW,aACXC,OAAQ,EACRC,mBACAC,OAAQC,GAEVrB,aAAAA"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport { cloneElement, PureComponent } from 'react'\nimport { ContextMenuMultiLevel } from '../../components/ContextMenu.Multilevel'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Tooltip } from './../Tooltip'\nimport { ContextMenuItem } from './Item'\nimport * as Styled from './style'\nimport { tooltipStyles } from './tooltip-styles'\n\nexport interface ContextMenuProps extends BaseProps {\n  /**\n   * Children react node\n   */\n  children: React.ReactNode\n  /** Indicates if button is active (e.g. when context menu is open) */\n  onClick?: (_e: React.MouseEvent<HTMLDivElement>) => void\n  /** Manually controled state */\n  isOpen?: boolean\n  /** On open menu callback  */\n  onOpen?: (_e: React.MouseEvent<HTMLDivElement>) => void\n  /** On close menu callback  */\n  onClose?: (_e: React.MouseEvent<HTMLDivElement>) => void\n  /** Content */\n  trigger?: React.ReactNode\n  /** Properties for inner Tooltip component */\n  tooltipProps?: Partial<Parameters<typeof Tooltip>[0]>\n  /** Hide overlay for debug */\n  hideOverlay?: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport class ContextMenu extends PureComponent<ContextMenuProps, { isOpen: boolean }> {\n  static Item = ContextMenuItem\n  static MultiLevel = ContextMenuMultiLevel\n  static displayName = 'ContextMenu'\n\n  static defaultProps = {\n    tooltipProps: {\n      event: 'click',\n      placement: 'left-start',\n      offset: 2,\n      showCloseButton: false,\n      styles: tooltipStyles,\n    },\n    hideOverlay: false,\n  }\n\n  constructor(props: ContextMenuProps) {\n    super(props)\n\n    this.state = {\n      isOpen: this.props.isOpen || false,\n    }\n  }\n\n  getOpen = () => {\n    const { isOpen } = this.props\n\n    if (isOpen !== undefined) return isOpen\n\n    return this.state.isOpen || false\n  }\n\n  openMenu = (e: React.MouseEvent<HTMLDivElement>) => {\n    this.setState({ isOpen: true })\n\n    const { onOpen } = this.props\n\n    onOpen && onOpen(e)\n  }\n\n  closeMenu = (e: React.MouseEvent<HTMLDivElement>) => {\n    this.setState({ isOpen: false })\n\n    const { onClose } = this.props\n\n    onClose && onClose(e)\n  }\n\n  toggleMenu = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { openMenu, closeMenu } = this\n    const isOpen = this.getOpen()\n\n    e.persist()\n    e.preventDefault()\n    e.stopPropagation()\n\n    isOpen ? closeMenu(e) : openMenu(e)\n\n    return false\n  }\n\n  render() {\n    const { className, tooltipProps = {}, trigger, children, hideOverlay } = this.props\n    const isOpen = this.getOpen()\n\n    if (children) tooltipProps.content = children\n\n    return (\n      <Styled.Root className={className} isOpen={isOpen} onClick={this.toggleMenu} hideOverlay={hideOverlay}>\n        <Tooltip {...tooltipProps} open={isOpen}>\n          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n          <div onClick={this.closeMenu}>{trigger && cloneElement(trigger as any, { active: isOpen })}</div>\n        </Tooltip>\n      </Styled.Root>\n    )\n  }\n}\n"],"names":["ContextMenu","PureComponent","constructor","props","super","this","getOpen","isOpen","state","openMenu","e","setState","onOpen","closeMenu","onClose","toggleMenu","persist","preventDefault","stopPropagation","render","className","tooltipProps","trigger","children","hideOverlay","content","_jsx","Styled.Root","onClick","Tooltip","_objectSpread","open","cloneElement","active","Item","ContextMenuItem","MultiLevel","ContextMenuMultiLevel","displayName","defaultProps","event","placement","offset","showCloseButton","styles","tooltipStyles"],"mappings":"kaAkCO,MAAMA,UAAoBC,EAgB/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAQrCC,QAAU,KACR,IAAMC,OAAEA,GAAWF,KAAKF,MAExB,gBAAII,EAA6BA,EAE1BF,KAAKG,MAAMD,YAbiBF,KAgBrCI,SAAYC,IACVL,KAAKM,SAAS,CAAEJ,QAAAA,IAEhB,IAAMK,OAAEA,GAAWP,KAAKF,MAExBS,GAAUA,EAAOF,IArBkBL,KAwBrCQ,UAAaH,IACXL,KAAKM,SAAS,CAAEJ,YAEhB,IAAMO,QAAEA,GAAYT,KAAKF,MAEzBW,GAAWA,EAAQJ,IA7BgBL,KAgCrCU,WAAcL,IACZ,IAAMD,SAAEA,EAAFI,UAAYA,GAAcR,KAChC,IAAME,EAASF,KAAKC,UAQpB,OANAI,EAAEM,UACFN,EAAEO,iBACFP,EAAEQ,kBAEFX,EAASM,EAAUH,GAAKD,EAASC,OArCjCL,KAAKG,MAAQ,CACXD,OAAQF,KAAKF,MAAMI,SAAAA,GAyCvBY,SACE,IAAMC,UAAEA,EAAFC,aAAaA,EAAe,GAA5BC,QAAgCA,EAAhCC,SAAyCA,EAAzCC,YAAmDA,GAAgBnB,KAAKF,MAC9E,IAAMI,EAASF,KAAKC,UAIpB,OAFIiB,IAAUF,EAAaI,QAAUF,GAGnCG,EAACC,EAAD,CAAaP,UAAWA,EAAWb,OAAQA,EAAQqB,QAASvB,KAAKU,WAAYS,YAAaA,EAA1FD,SACEG,EAACG,EAADC,EAAAA,EAAA,GAAaT,GAAb,GAAA,CAA2BU,KAAMxB,EAAjCgB,SAEEG,EAAA,MAAA,CAAKE,QAASvB,KAAKQ,UAAnBU,SAA+BD,GAAWU,EAAaV,EAAgB,CAAEW,OAAQ1B,YAvE9EP,EACJkC,KAAOC,EADHnC,EAEJoC,WAAaC,EAFTrC,EAGJsC,YAAc,cAHVtC,EAKJuC,aAAe,CACpBlB,aAAc,CACZmB,MAAO,QACPC,UAAW,aACXC,OAAQ,EACRC,mBACAC,OAAQC,GAEVrB,aAAAA"}

package/components/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paper.js","sources":["../../../../src/components/Paper/Paper.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport * as Styled from './style'\nimport { SpacerProps } from '../../components/Spacer'\n\nexport interface PaperProps extends SpacerProps, Color, ResponsiveNamedProperty<'padding'> {\n  /**\n   * Set to true to generate a circlular paper container\n   */\n  circle?: boolean\n  /**\n   * Paper with rounded corners\n   */\n  rounded?: boolean\n  /**\n   * Paper with shadow\n   */\n  shadow?: boolean\n  /**\n   * This number represents the zDepth of the paper shadow\n   */\n  zDepth?: false | 0 | 1 | 2 | 3 | 4\n  /**\n   * Text align\n   */\n  textAlign?: 'left' | 'center' | 'right'\n}\n\nPaper.displayName = 'Paper'\n\n/**\n * Расширен:\n * - [`SpacerProps`](#/Разметка%20и%20позиционирование/Spacer)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)\n */\nexport function Paper({ padding = 'm', rounded = true, shadow = true, className, ...props }: PaperProps) {\n  const _className = useClassname(Paper.displayName, className)\n\n  return <Styled.Root padding={padding} rounded={rounded} shadow={shadow} className={_className} {...props} />\n}\n"],"names":["Paper","_ref","padding","rounded","shadow","className","props","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread"],"mappings":"wSAqCO,SAASA,EAAyFC,GAAA,IAAnFC,QAAEA,EAAU,IAAZC,QAAiBA,GAAAA,EAAjBC,OAAiCA,GAAS,EAA1CC,UAAgDA,GAAmCJ,EAArBK,EAAqBC,EAAAN,EAAAO,GACvG,IAAMC,EAAaC,EAAaV,EAAMW,YAAaN,GAEnD,OAAOO,EAACC,EAADC,EAAA,CAAaZ,QAASA,EAASC,QAASA,EAASC,OAAQA,EAAQC,UAAWI,GAAgBH,IAXrGN,EAAMW,YAAc"}
+{"version":3,"file":"Paper.js","sources":["../../../../src/components/Paper/Paper.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { SpacerProps } from '../../components/Spacer'\nimport * as Styled from './style'\n\nexport interface PaperProps extends SpacerProps, Color, ResponsiveNamedProperty<'padding'> {\n  /**\n   * Set to true to generate a circlular paper container\n   */\n  circle?: boolean\n  /**\n   * Paper with rounded corners\n   */\n  rounded?: boolean\n  /**\n   * Paper with shadow\n   */\n  shadow?: boolean\n  /**\n   * This number represents the zDepth of the paper shadow\n   */\n  zDepth?: false | 0 | 1 | 2 | 3 | 4\n  /**\n   * Text align\n   */\n  textAlign?: 'left' | 'center' | 'right'\n}\n\nPaper.displayName = 'Paper'\n\n/**\n * Расширен:\n * - [`SpacerProps`](#/Разметка%20и%20позиционирование/Spacer)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)\n */\nexport function Paper({ padding = 'm', rounded = true, shadow = true, className, ...props }: PaperProps) {\n  const _className = useClassname(Paper.displayName, className)\n\n  return <Styled.Root padding={padding} rounded={rounded} shadow={shadow} className={_className} {...props} />\n}\n"],"names":["Paper","_ref","padding","rounded","shadow","className","props","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread"],"mappings":"wSAqCO,SAASA,EAAyFC,GAAA,IAAnFC,QAAEA,EAAU,IAAZC,QAAiBA,GAAAA,EAAjBC,OAAiCA,GAAS,EAA1CC,UAAgDA,GAAmCJ,EAArBK,EAAqBC,EAAAN,EAAAO,GACvG,IAAMC,EAAaC,EAAaV,EAAMW,YAAaN,GAEnD,OAAOO,EAACC,EAADC,EAAA,CAAaZ,QAASA,EAASC,QAASA,EAASC,OAAQA,EAAQC,UAAWI,GAAgBH,IAXrGN,EAAMW,YAAc"}

package/dts/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, SimpleInterpolation, css } from 'styled-components';
+import { ResponsiveProperty as ResponsiveProperty$1 } from 'mixins/responsive-property';
 import * as react from 'react';
 import { PureComponent, Component } from 'react';
 import { Link, NavLink } from 'react-router-dom';
@@ -14,6 +15,22 @@ import Floater from 'react-floater';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
+interface ThemeProviderProps {
+    theme: Partial<DefaultTheme> | ((topLevelTheme: DefaultTheme) => DefaultTheme);
+    children: React.ReactNode;
+}
+declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+
+declare const defaultTheme: DefaultTheme;
+declare const motherLightTheme: DefaultTheme;
+declare const motherDarkTheme: DefaultTheme;
+declare const babyLightTheme: DefaultTheme;
+declare const babyDarkTheme: DefaultTheme;
+declare const teenLightTheme: DefaultTheme;
+declare const teenDarkTheme: DefaultTheme;
+declare const adultLightTheme: DefaultTheme;
+declare const adultDarkTheme: DefaultTheme;
+
 declare enum ColorNames {
     facebook = "facebook",
     twitter = "twitter",
@@ -188,14 +205,6 @@ declare enum ColorNames {
     superlightgrey = "superlightgrey"
 }
 
-interface Props {
-    theme: DefaultTheme;
-    children: React.ReactNode;
-}
-declare function ThemeProvider(props: Props): JSX.Element;
-
-declare const theme: Theme;
-
 declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
 declare type ColorValue = keyof typeof ColorNames | RGB | RGBA | HEX;
 declare type ColorCalcProperty = (_color: ColorValue) => FlattenSimpleInterpolation | null;
@@ -273,6 +282,44 @@ declare const responsiveNamedProperty: <T extends PropsProperties>({ sizes, cssP
  */
 declare const responsiveProperty: (propName: string, cssProperty?: string | null, sizing?: null | string) => () => (props: any) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>> | null;
 
+declare type ArrowStaticSize = 'l' | 'm' | 'xs';
+declare type ArrowSize = ArrowStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
+declare type ArrowProps = {
+    /** Appearance preset */
+    preset?: 'default' | 'brand';
+    /** Square shape */
+    square?: boolean;
+    /** Used on colored background */
+    onColored?: boolean;
+    /** Size of button */
+    size?: ArrowSize;
+    /** Arrow points top */
+    top?: boolean;
+    /** Arrow points right */
+    right?: boolean;
+    /** Arrow points bottom */
+    bottom?: boolean;
+    /** Arrow points left */
+    left?: boolean;
+    /** Inverted colors */
+    inverse?: boolean;
+    /** Outlined appearance */
+    outline?: boolean;
+    /** Button disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    /** CSS classname */
+    className?: string;
+    /** Style object */
+    style?: React.CSSProperties;
+};
+
+/**
+ * Button with arrow icon
+ */
+declare const Arrow: react.ForwardRefExoticComponent<ArrowProps & react.RefAttributes<HTMLButtonElement>>;
+
 declare enum SizeInput {
     l = 380,
     m = 300,
@@ -283,6 +330,9 @@ declare enum SizeInput {
 declare type HEX = `#${string}`;
 declare type RGB = `rgb(${number}, ${number}, ${number})`;
 declare type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+declare type ThemePreset = 'default' | 'brand';
+declare type ThemeMode = 'light' | 'dark';
+declare type ComponentConfig<P> = Omit<Partial<P>, 'className' | 'style'>;
 interface Tooltiped {
     innerRef?: React.LegacyRef<HTMLElement>;
     onMouseEnter?: () => void;
@@ -361,11 +411,16 @@ interface Theme {
     utils?: {
         relBuilder?: (_link?: string, _target?: string) => undefined | string;
     };
+    mode: ThemeMode;
+    preset: ThemePreset;
+    components?: {
+        Arrow?: ComponentConfig<ArrowProps>;
+    };
 }
 
 declare type StyledComponentProps = {
     theme?: {
-        breakpoints?: typeof theme.breakpoints;
+        breakpoints?: typeof defaultTheme.breakpoints;
     };
 };
 declare type MediaQueryParams = {
@@ -826,53 +881,6 @@ declare namespace Anchor {
     };
 }
 
-interface ArrowProps extends BaseProps {
-    /**
-     * Size of icon
-     */
-    size?: 'xs' | 'm' | 'l';
-    /**
-     * Direction arrow
-     */
-    top?: boolean;
-    /**
-     * Direction arrow
-     */
-    right?: boolean;
-    /**
-     * Direction arrow
-     */
-    bottom?: boolean;
-    /**
-     * Direction arrow
-     */
-    left?: boolean;
-    inverse?: boolean;
-    outline?: boolean;
-    disabled?: boolean;
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- */
-declare class Arrow extends PureComponent<ArrowProps> {
-    static displayName: string;
-    static defaultProps: {
-        size: string;
-        top: boolean;
-        right: boolean;
-        bottom: boolean;
-        left: boolean;
-        inverse: boolean;
-        outline: boolean;
-        disabled: boolean;
-        onClick: () => void;
-    };
-    onClickHandler: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
-}
-
 interface AvatarProps extends BaseProps, Color {
     /**
      * Children react node
@@ -2570,4 +2578,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeProvider, Tooltip, Tooltiped, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, mobileFirst, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, theme, vAlign };
+export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, ComponentConfig, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemePreset, ThemeProvider, Tooltip, Tooltiped, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };

package/hooks/use-theme.js

@@ -0,0 +1,2 @@
+import{useTheme as e}from'styled-components';import{defaultTheme as t}from'../theme/themes.js';function m(){var m=e();return'object'==typeof m&&Object.keys(m).length?m:t}export{m as useUiTheme};
+//# sourceMappingURL=use-theme.js.map

package/hooks/use-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme.js","sources":["../../../src/hooks/use-theme.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { defaultTheme } from '../theme/themes'\n\nexport function useUiTheme(): DefaultTheme {\n  const theme = useTheme()\n  const shouldForwardTheme = typeof theme === 'object' && Object.keys(theme).length\n\n  return shouldForwardTheme ? theme : defaultTheme\n}\n"],"names":["useUiTheme","theme","useTheme","Object","keys","length","defaultTheme"],"mappings":"+FAIO,SAASA,IACd,IAAMC,EAAQC,IAGd,MAF4C,iBAAVD,GAAsBE,OAAOC,KAAKH,GAAOI,OAE/CJ,EAAQK"}