@foxford/ui 2.20.6-beta-d0d288d-20240319 → 2.21.0

package/components/Arrow/Arrow.js

@@ -1,2 +1,2 @@
-import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as o}from'react';import{useTheme as t}from'styled-components';import{useConfigPriority as s}from'../../hooks/use-config-priority.js';import i from'./images/arrow.module.svg.js';import a from'./images/chevron.module.svg.js';import{getArrowRotation as m}from'./utils.js';import{Root as p}from'./style.js';import{jsx as n}from'react/jsx-runtime';var l=["size","onClick"];var f='Arrow';var d=o(((o,f)=>{var d;var u=t();var v=s(null===(d=u.components)||void 0===d?void 0:d.Arrow,o),{size:c="l",onClick:b}=v,j=e(v,l);var y='brand'===u.preset;'string'==typeof j.preset&&(y='brand'===j.preset);var g=j.square?'8px':'50%';var h=y?i:a;var w=m(j);return n(p,r(r({},j),{},{ref:f,type:"button",size:c,borderRadius:g,brandPresetUsed:y,onClick:r=>{r.preventDefault(),j.disabled||'function'!=typeof b||b(r)},children:n("span",{children:n(h,{style:w})})}))}));d.displayName="Arrow";export{d as Arrow,f as COMPONENT_NAME};
+import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{withMergedProps as s}from'../../hocs/withMergedProps.js';import{Icon as t}from'../Icon/Icon.js';import'../Icon/icons.js';import{SIZES as i,SIZES_DEFAULT as a}from'./constants.js';import p from'./images/arrow-top.module.svg.js';import{Root as m}from'./style.js';import{jsx as n}from'react/jsx-runtime';var c=["type","size","iconProps"];var f='Arrow';var j=s(e(((e,s)=>{var{type:i="button",size:a="l",iconProps:f={}}=e,j=o(e,c);return n(m,r(r({},j),{},{type:i,size:a,ref:s,children:n(t,r(r('brand'===j.preset?{icon:n(p,{})}:{name:"chevronUp"},{as:'span',color:'inherit'}),f))}))})),{displayName:"Arrow",sizes:r=>'brand'===r.preset?i:a});export{j as Arrow,f 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 { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport ArrowSvg from './images/arrow.module.svg'\nimport ChevronSvg from './images/chevron.module.svg'\nimport type { ArrowProps } from './types'\nimport { getArrowRotation } from './utils'\n\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Arrow'\n\n/**\n * Button with arrow icon\n */\nconst Arrow = forwardRef<HTMLButtonElement, ArrowProps>((props, ref) => {\n  const theme = useTheme()\n\n  const { size = 'l', onClick, ...configProps } = useConfigPriority<ArrowProps>(theme.components?.Arrow, props)\n\n  let brandPresetUsed = theme.preset === 'brand'\n  if (typeof configProps.preset === 'string') brandPresetUsed = configProps.preset === 'brand'\n\n  const borderRadius = configProps.square ? '8px' : '50%'\n  const Icon = brandPresetUsed ? ArrowSvg : ChevronSvg\n  const iconStyles = getArrowRotation(configProps)\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault()\n\n    if (!configProps.disabled && typeof onClick === 'function') {\n      onClick(event)\n    }\n  }\n\n  return (\n    <Styled.Root\n      {...configProps}\n      ref={ref}\n      type='button'\n      size={size}\n      borderRadius={borderRadius}\n      brandPresetUsed={brandPresetUsed}\n      onClick={handleClick}\n    >\n      <span>{<Icon style={iconStyles} />}</span>\n    </Styled.Root>\n  )\n})\n\nArrow.displayName = COMPONENT_NAME\n\nexport { Arrow, COMPONENT_NAME }\n\nexport type { ArrowProps }\n"],"names":["COMPONENT_NAME","Arrow","forwardRef","props","ref","_theme$components","theme","useTheme","useConfigPriority","components","size","onClick","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","brandPresetUsed","preset","borderRadius","square","Icon","ArrowSvg","ChevronSvg","iconStyles","getArrowRotation","_jsx","Styled.Root","type","event","preventDefault","disabled","children","style","displayName"],"mappings":"ofAUMA,IAAAA,EAAiB,QAKjBC,IAAAA,EAAQC,GAA0C,CAACC,EAAOC,KAAQ,IAAAC,EACtE,IAAMC,EAAQC,IAEd,IAAgDC,EAAAA,UAA8BF,EAAAA,EAAMG,kBAAAA,aAANJ,EAAkBJ,MAAOE,IAAjGO,KAAEA,EAAO,IAATC,QAAcA,GAApBC,EAAgCC,EAAhCC,EAAAF,EAAAG,GAEA,IAAIC,EAAmC,UAAjBV,EAAMW,OACM,iBAAvBJ,EAAYI,SAAqBD,EAAyC,UAAvBH,EAAYI,QAE1E,IAAMC,EAAeL,EAAYM,OAAS,MAAQ,MAClD,IAAMC,EAAOJ,EAAkBK,EAAWC,EAC1C,IAAMC,EAAaC,EAAiBX,GAUpC,OACEY,EAACC,SACKb,GADN,GAAA,CAEET,IAAKA,EACLuB,KAAK,SACLjB,KAAMA,EACNQ,aAAcA,EACdF,gBAAiBA,EACjBL,QAhBiBiB,IACnBA,EAAMC,iBAEDhB,EAAYiB,UAA+B,mBAAZnB,GAClCA,EAAQiB,IAKVG,SASEN,EAAA,OAAA,CAAAM,SAAON,EAACL,EAAD,CAAMY,MAAOT,YAK1BtB,EAAMgC,YAxCiB"}
+{"version":3,"file":"Arrow.js","sources":["../../../../src/components/Arrow/Arrow.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES, SIZES_DEFAULT } from './constants'\nimport ArrowTop from './images/arrow-top.module.svg'\nimport type { ArrowProps } from './types'\n\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Arrow'\n\n/**\n *\n * Component accepts all \\<button\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [ArrowProps](https://github.com/foxford/ui/blob/master/src/components/Arrow/types.ts)\n */\nconst Arrow: React.ForwardRefExoticComponent<ArrowProps> = withMergedProps<ArrowProps, HTMLButtonElement>(\n  forwardRef((props, ref) => {\n    const { type = 'button', size = 'l', iconProps = {}, ...restProps } = props\n\n    const iconBaseProps: IconProps = { as: 'span', color: 'inherit' }\n\n    return (\n      <Styled.Root {...restProps} type={type} size={size} ref={ref}>\n        {restProps.preset === 'brand' ? (\n          <Icon icon={<ArrowTop />} {...iconBaseProps} {...iconProps} />\n        ) : (\n          <Icon name='chevronUp' {...iconBaseProps} {...iconProps} />\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: (props) => (props.preset === 'brand' ? SIZES : SIZES_DEFAULT),\n  }\n)\n\nexport { Arrow, COMPONENT_NAME }\n\nexport type { ArrowProps }\n"],"names":["COMPONENT_NAME","Arrow","withMergedProps","forwardRef","props","ref","type","size","iconProps","restProps","_excluded","_jsx","Styled.Root","children","Icon","_objectSpread","preset","icon","ArrowTop","name","as","color","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"2eAUMA,IAAAA,EAAiB,QAYjBC,IAAAA,EAAqDC,EACzDC,GAAAA,CAAYC,EAAOC,KACjB,IAAMC,KAAEA,EAAO,SAATC,KAAmBA,EAAO,IAA1BC,UAA+BA,EAAY,IAAqBJ,EAAdK,IAAcL,EAAtEM,GAIA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BH,KAAMA,EAAMC,KAAMA,EAAMF,IAAKA,EAAzDQ,SAEIF,EAACG,EAADC,EAAAA,EADoB,UAArBN,EAAUO,OACT,CAAMC,KAAMN,EAACO,EAAD,KAEZ,CAAMC,KAAK,aAPgB,CAAEC,GAAI,OAAQC,MAAO,YAKCb,UAOzD,CACEc,YA7BmB,QA8BnBC,MAAQnB,GAA4B,UAAjBA,EAAMY,OAAqBQ,EAAQC"}

package/components/Arrow/constants.js

@@ -1,2 +1,2 @@
-var e=['preset','square','onColored','size','top','theme','right','bottom','left','inverse','outline','borderRadius','brandPresetUsed'];export{e as TRANSIENT_PROPS};
+var t={xxxl:{width:60,height:60,fontSize:28},xxl:{width:56,height:56,fontSize:28},xl:{width:52,height:52,fontSize:28},l:{width:48,height:48,fontSize:24},m:{width:44,height:44,fontSize:24},s:{width:40,height:40,fontSize:24},xs:{width:36,height:36,fontSize:20},xxs:{width:32,height:32,fontSize:20},xxxs:{width:28,height:28,fontSize:20}};var h={xxxl:{width:52,height:52,fontSize:18},xxl:{width:48,height:48,fontSize:18},xl:{width:44,height:44,fontSize:18},l:{width:40,height:40,fontSize:16},m:{width:28,height:28,fontSize:16},s:{width:24,height:24,fontSize:16},xs:{width:20,height:20,fontSize:16},xxs:{width:16,height:16,fontSize:12},xxxs:{width:14,height:14,fontSize:10}};export{t as SIZES,h as SIZES_DEFAULT};
 //# sourceMappingURL=constants.js.map

package/components/Arrow/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/Arrow/constants.ts"],"sourcesContent":["import type { ArrowTransientProp } from './types'\n\nexport const TRANSIENT_PROPS: ArrowTransientProp[] = [\n  'preset',\n  'square',\n  'onColored',\n  'size',\n  'top',\n  'theme',\n  'right',\n  'bottom',\n  'left',\n  'inverse',\n  'outline',\n  'borderRadius',\n  'brandPresetUsed',\n]\n"],"names":["TRANSIENT_PROPS"],"mappings":"AAEaA,IAAAA,EAAwC,CACnD,SACA,SACA,YACA,OACA,MACA,QACA,QACA,SACA,OACA,UACA,UACA,eACA"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/Arrow/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n  xxxl: {\n    width: 60,\n    height: 60,\n    fontSize: 28,\n  },\n  xxl: {\n    width: 56,\n    height: 56,\n    fontSize: 28,\n  },\n  xl: {\n    width: 52,\n    height: 52,\n    fontSize: 28,\n  },\n  l: {\n    width: 48,\n    height: 48,\n    fontSize: 24,\n  },\n  m: {\n    width: 44,\n    height: 44,\n    fontSize: 24,\n  },\n  s: {\n    width: 40,\n    height: 40,\n    fontSize: 24,\n  },\n  xs: {\n    width: 36,\n    height: 36,\n    fontSize: 20,\n  },\n  xxs: {\n    width: 32,\n    height: 32,\n    fontSize: 20,\n  },\n  xxxs: {\n    width: 28,\n    height: 28,\n    fontSize: 20,\n  },\n}\n\nexport const SIZES_DEFAULT: Sizes = {\n  xxxl: {\n    width: 52,\n    height: 52,\n    fontSize: 18,\n  },\n  xxl: {\n    width: 48,\n    height: 48,\n    fontSize: 18,\n  },\n  xl: {\n    width: 44,\n    height: 44,\n    fontSize: 18,\n  },\n  l: {\n    width: 40,\n    height: 40,\n    fontSize: 16,\n  },\n  m: {\n    width: 28,\n    height: 28,\n    fontSize: 16,\n  },\n  s: {\n    width: 24,\n    height: 24,\n    fontSize: 16,\n  },\n  xs: {\n    width: 20,\n    height: 20,\n    fontSize: 16,\n  },\n  xxs: {\n    width: 16,\n    height: 16,\n    fontSize: 12,\n  },\n  xxxs: {\n    width: 14,\n    height: 14,\n    fontSize: 10,\n  },\n}\n"],"names":["SIZES","xxxl","width","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs","SIZES_DEFAULT"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZC,IAAK,CACHH,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZQ,KAAM,CACJV,MAAO,GACPC,OAAQ,GACRC,SAAU,KAIP,IAAMS,EAAuB,CAClCZ,KAAM,CACJC,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZC,IAAK,CACHH,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZQ,KAAM,CACJV,MAAO,GACPC,OAAQ,GACRC,SAAU"}

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

@@ -0,0 +1,2 @@
+import*as e from'react';var r;function a(){return a=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var l in a)({}).hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},a.apply(this,arguments)}var l=l=>e.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"currentcolor",viewBox:"0 0 24 24"},l),r||(r=e.createElement("path",{fillRule:"evenodd",d:"M18.53 11.53a.75.75 0 0 1-1.06 0l-4.72-4.72V19a.75.75 0 0 1-1.5 0V6.81l-4.72 4.72a.75.75 0 0 1-1.06-1.06l6-6a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06",clipRule:"evenodd"})));export{l as default};
+//# sourceMappingURL=arrow-top.module.svg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-top.module.svg.js","sources":["../../../../../src/components/Arrow/images/arrow-top.module.svg"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentcolor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M18.53 11.53a.75.75 0 0 1-1.06 0l-4.72-4.72V19a.75.75 0 0 1-1.5 0V6.81l-4.72 4.72a.75.75 0 0 1-1.06-1.06l6-6a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06\" clip-rule=\"evenodd\"/></svg>"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgArrowTopmodule","props","React","createElement","xmlns","fill","viewBox","fillRule","d","clipRule"],"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,EAA+CC,GAC7BC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,6BACPC,KAAM,eACNC,QAAS,aACRL,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEI,SAAU,UACVC,EAAG,2JACHC,SAAU"}

package/components/Arrow/style.js

@@ -1,2 +1,2 @@
-import o,{css as n}from'styled-components';import{responsiveProperty as r}from'../../mixins/responsive-property.js';import{TRANSIENT_PROPS as c}from'./constants.js';var e={l:48,m:44,xs:40};var a={l:40,m:28,xs:20};var t="\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n";var l="\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 i={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(t,"\n          opacity: 0;\n          background-color: ").concat(n.colors['bg-oncolor-hover'],";\n      \n        }\n        &::after {\n          ").concat(t,"\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(t,"\n          opacity: 0;\n          background-color: ").concat(n.colors['bg-oncolor-hover'],";\n        }\n        &::after {\n          ").concat(t,"\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(t,"\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(t,"\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(t,"\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(t,"\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 s={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?l:'',"\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?l:'',"\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?l:'',"\n    ")}))};var d=(o,n)=>{var c=o.brandPresetUsed?e:a;return['l','m','xs'].includes(o.size)?"".concat(n,": ").concat(c[o.size],"px;"):r('size',n)};var b=o.button.withConfig({shouldForwardProp:o=>!c.includes(o)}).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=>o.brandPresetUsed?o.outline&&o.onColored?i.outline.onColored:o.outline&&!o.onColored?i.outline.default:!o.outline&&o.onColored?i.filled.onColored:i.filled.default:o.inverse?s.inverse:o.outline?s.outline:s.filled),(o=>d(o,'height')),(o=>d(o,'width')),(o=>"border-radius: ".concat(o.borderRadius,";")));export{b as Root};
+import o from'@babel/runtime/helpers/objectSpread2';import r,{css as n}from'styled-components';import e from'tinycolor2';import{responsiveSize as t}from'../../mixins/responsive-size.js';import{responsiveMargin as c}from'../../mixins/responsive-margin.js';import{focus as a}from'../../mixins/focus.js';import{createShouldForwardProp as l}from'../../shared/utils/style.js';var s=l((o=>!['square','top','right','bottom','left','onColored','outline','inverse'].includes(o)));var i=o=>"\n  color: ".concat(o.color,";\n  background-color: ").concat(o.backgroundColor,";\n  border-color: ").concat(o.borderColor,";\n  &::before {\n    box-shadow: inset 0px 4px 0px ").concat(o.shadowColor,";\n  }\n  &:hover {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n    border-color: ").concat(o.borderColorHover,";\n  }\n  &:active {\n    color: ").concat(o.colorActive,";\n    background-color: ").concat(o.backgroundColorActive,";\n    border-color: ").concat(o.borderColorActive,";\n  }\n  &:disabled {\n    color: ").concat(o.colorDisabled,";\n    background-color: ").concat(o.backgroundColorDisabled,";\n    border-color: ").concat(o.borderColorDisabled,";\n  }\n");var d="\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 b={onColored:{outline:n(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors.transparent,borderColor:r.theme.colors['border-oncolor-default'],colorHover:r.theme.colors['content-oncolor-constant'],backgroundColorHover:r.theme.colors['bg-oncolor-primary'],borderColorHover:r.theme.colors.transparent,colorActive:r.theme.colors['content-oncolor-constant'],backgroundColorActive:e(r.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorActive:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:r.theme.colors.transparent,borderColorDisabled:r.theme.colors['border-oncolor-disabled'],shadowColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:n(["",""],(r=>i(o({color:r.theme.colors['content-oncolor-constant'],backgroundColor:r.theme.colors['bg-oncolor-primary'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-oncolor-constant'],backgroundColorHover:e(r.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorHover:r.theme.colors.transparent,colorActive:r.theme.colors['content-oncolor-constant'],backgroundColorActive:e(r.theme.colors['bg-oncolor-primary']).darken(8).toString(),borderColorActive:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-oncolor-primary'],borderColorDisabled:r.theme.colors.transparent,shadowColor:r.theme.colors['bg-oncolor-hover']},r.palette))))},default:{outline:n(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors.transparent,borderColor:r.theme.colors['border-onmain-contrast'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-onmain-tertiary'],borderColorHover:r.theme.colors.transparent,colorActive:r.theme.colors['content-oncolor-primary'],backgroundColorActive:r.theme.colors['bg-brand-primary-basic-active'],borderColorActive:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors.transparent,borderColorDisabled:r.theme.colors['border-disabled'],shadowColor:r.theme.colors['bg-oncolor-hover']},r.palette)))),default:n(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-tertiary'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:e(r.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorHover:r.theme.colors.transparent,colorActive:r.theme.colors['content-oncolor-primary'],backgroundColorActive:r.theme.colors['bg-brand-primary-basic-active'],borderColorActive:r.theme.colors.transparent,colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors.transparent,shadowColor:r.theme.colors['bg-oncolor-hover']},r.palette))))}};var m={filled:n(["",""],(o=>{var{theme:r,disabled:n}=o;return"\n      background-color: ".concat(r.colors.white,";\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n      & svg {\n        fill: ").concat(r.colors.accent,";\n      }\n      &:hover {\n        background-color: ").concat(r.colors.accent,";\n        box-shadow: none;\n        svg {\n          fill: ").concat(r.colors.white,";\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ").concat(n?d:'',"\n    ")})),outline:n(["",""],(o=>{var{theme:r,disabled:n}=o;return"\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ".concat(r.colors.alto,";\n      & svg {\n        fill: ").concat(r.colors.alto,";\n      }\n      &:hover {\n        background-color: ").concat(r.colors.accent,";\n        box-shadow: none;\n        svg {\n          fill: ").concat(r.colors.white,";\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ").concat(n?d:'',"\n    ")})),inverse:n(["",""],(o=>{var{theme:r,disabled:n}=o;return"\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ".concat(r.colors.white,";\n      & svg {\n        fill: ").concat(r.colors.white,";\n      }\n      &:hover {\n        background-color: ").concat(r.colors.white,";\n        box-shadow: none;\n        svg {\n          fill: ").concat(r.colors.accent,";\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 #eaecf3;\n      }\n      ").concat(n?d:'',"\n    ")}))};var h=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),width:'1.8em',height:'1.8em'})}).withConfig({componentId:"fox-ui__sc-1xgj0m4-0"})([""," "," "," "," ",""],(o=>{var r;var n='rotate(0deg)';return o.right&&(n='rotate(90deg)'),o.bottom&&(n='rotate(180deg)'),o.left&&(n='rotate(270deg)'),"\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      appearance: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      padding: 0;\n      border-radius: ".concat(o.square?'8px':'50%',";\n      cursor: ").concat((null!==(r=o.cursor)&&void 0!==r?r:o.disabled)?'not-allowed':'pointer',";\n      & svg {\n        transform: ").concat(n,";\n        transform-origin: center;\n      }\n      ").concat('brand'===o.preset?"\n            border: 1px solid transparent;\n            transition-property: background-color; \n            transition-duration: 250ms;\n            &::before {\n              content: '';\n              position: absolute;\n              top: -1px;\n              left: -1px;\n              width: calc(100% + 2px);\n              height: calc(100% + 2px);\n              border-radius: inherit;\n              opacity: 0;\n              transition-property: opacity; \n              transition-duration: 150ms;\n              transition-timing-function: ease-in;\n            }\n            &:active:not(:disabled)::before {\n              opacity: 1;\n            }":"\n            border: none;\n            transition-property: background-color, box-shadow;\n            transition-duration: 200ms;","\n    ")}),(o=>{if('brand'===o.preset){var r=o.onColored?b.onColored:b.default;return o.outline?r.outline:r.default}return o.inverse?m.inverse:o.outline?m.outline:m.filled}),a,t,c);export{h 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 type { DefaultTheme, ThemedStyledProps } from 'styled-components'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TRANSIENT_PROPS } from './constants'\nimport type { StyledArrowProps, 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 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<StyledArrowProps>`\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<StyledArrowProps>`\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<StyledArrowProps>`\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<StyledArrowProps>`\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<StyledArrowProps>`\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<StyledArrowProps>`\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<StyledArrowProps>`\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: ThemedStyledProps<StyledArrowProps, DefaultTheme>, cssProperty: 'height' | 'width') => {\n  const config = props.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: ThemedStyledProps<StyledArrowProps, DefaultTheme>) => {\n  if (props.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.withConfig<StyledArrowProps>({\n  shouldForwardProp: (prop) => {\n    return !TRANSIENT_PROPS.includes(<ArrowTransientProp>prop)\n  },\n})`\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","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","brandPresetUsed","includes","size","responsiveProperty","Root","styled","button","withConfig","shouldForwardProp","prop","TRANSIENT_PROPS","componentId","borderRadius"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledArrowProps, ArrowPalette } from './types'\n\nconst shouldForwardArrowProp = createShouldForwardProp((propKey) => {\n  return !['square', 'top', 'right', 'bottom', 'left', 'onColored', 'outline', 'inverse'].includes(propKey)\n})\n\nconst template = (palette: ArrowPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n  &::before {\n    box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n  }\n  &:hover {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  }\n  &:active {\n    color: ${palette.colorActive};\n    background-color: ${palette.backgroundColorActive};\n    border-color: ${palette.borderColorActive};\n  }\n  &:disabled {\n    color: ${palette.colorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n`\n\nconst defaultDisabledStyles = `\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 COLOR_SCHEMA = {\n  onColored: {\n    outline: css<StyledArrowProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.theme.colors.transparent,\n          borderColor: props.theme.colors['border-oncolor-default'],\n          colorHover: props.theme.colors['content-oncolor-constant'],\n          backgroundColorHover: props.theme.colors['bg-oncolor-primary'],\n          borderColorHover: props.theme.colors.transparent,\n          colorActive: props.theme.colors['content-oncolor-constant'],\n          backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n          borderColorActive: props.theme.colors.transparent,\n          colorDisabled: props.theme.colors['content-oncolor-disabled'],\n          backgroundColorDisabled: props.theme.colors.transparent,\n          borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n          shadowColor: props.theme.colors['bg-oncolor-hover'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledArrowProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-oncolor-constant'],\n          backgroundColor: props.theme.colors['bg-oncolor-primary'],\n          borderColor: props.theme.colors.transparent,\n          colorHover: props.theme.colors['content-oncolor-constant'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n          borderColorHover: props.theme.colors.transparent,\n          colorActive: props.theme.colors['content-oncolor-constant'],\n          backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(8).toString() as CSSColor,\n          borderColorActive: props.theme.colors.transparent,\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-oncolor-primary'],\n          borderColorDisabled: props.theme.colors.transparent,\n          shadowColor: props.theme.colors['bg-oncolor-hover'],\n          ...props.palette,\n        })}\n    `,\n  },\n  default: {\n    outline: css<StyledArrowProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors.transparent,\n          borderColor: props.theme.colors['border-onmain-contrast'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['bg-onmain-tertiary'],\n          borderColorHover: props.theme.colors.transparent,\n          colorActive: props.theme.colors['content-oncolor-primary'],\n          backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n          borderColorActive: props.theme.colors.transparent,\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors.transparent,\n          borderColorDisabled: props.theme.colors['border-disabled'],\n          shadowColor: props.theme.colors['bg-oncolor-hover'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledArrowProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.theme.colors.transparent,\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(4).toString() as CSSColor,\n          borderColorHover: props.theme.colors.transparent,\n          colorActive: props.theme.colors['content-oncolor-primary'],\n          backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n          borderColorActive: props.theme.colors.transparent,\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors.transparent,\n          shadowColor: props.theme.colors['bg-oncolor-hover'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nconst DEFAULT_STYLES = {\n  filled: css<StyledArrowProps>`\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<StyledArrowProps>`\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<StyledArrowProps>`\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\nexport const Root = styled.button\n  .withConfig<StyledArrowProps>({\n    shouldForwardProp: shouldForwardArrowProp,\n  })\n  .attrs<StyledArrowProps>(<Required<Pick<StyledArrowProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, sizeUnits) => {\n      return {\n        fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n        width: '1.8em',\n        height: '1.8em',\n      }\n    },\n  })`\n  ${(props) => {\n    let transform = 'rotate(0deg)'\n\n    if (props.right) transform = 'rotate(90deg)'\n    if (props.bottom) transform = 'rotate(180deg)'\n    if (props.left) transform = 'rotate(270deg)'\n\n    return `\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      appearance: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      padding: 0;\n      border-radius: ${props.square ? '8px' : '50%'};\n      cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n      & svg {\n        transform: ${transform};\n        transform-origin: center;\n      }\n      ${\n        props.preset === 'brand'\n          ? `\n            border: 1px solid transparent;\n            transition-property: background-color; \n            transition-duration: 250ms;\n            &::before {\n              content: '';\n              position: absolute;\n              top: -1px;\n              left: -1px;\n              width: calc(100% + 2px);\n              height: calc(100% + 2px);\n              border-radius: inherit;\n              opacity: 0;\n              transition-property: opacity; \n              transition-duration: 150ms;\n              transition-timing-function: ease-in;\n            }\n            &:active:not(:disabled)::before {\n              opacity: 1;\n            }`\n          : `\n            border: none;\n            transition-property: background-color, box-shadow;\n            transition-duration: 200ms;`\n      }\n    `\n  }}\n\n  ${(props) => {\n    if (props.preset === 'brand') {\n      const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n      return props.outline ? schema.outline : schema.default\n    }\n\n    const defaultStyles = DEFAULT_STYLES\n\n    if (props.inverse) return defaultStyles.inverse\n    if (props.outline) return defaultStyles.outline\n\n    return defaultStyles.filled\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardArrowProp","createShouldForwardProp","propKey","includes","template","palette","color","concat","backgroundColor","borderColor","shadowColor","colorHover","backgroundColorHover","borderColorHover","colorActive","backgroundColorActive","borderColorActive","colorDisabled","backgroundColorDisabled","borderColorDisabled","defaultDisabledStyles","COLOR_SCHEMA","onColored","outline","css","props","_objectSpread","theme","colors","transparent","tinycolor","darken","toString","default","DEFAULT_STYLES","filled","_ref","disabled","white","accent","_ref2","alto","inverse","_ref3","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","height","componentId","_props$cursor","transform","right","bottom","left","square","cursor","preset","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}

package/dts/index.d.ts

@@ -1466,37 +1466,53 @@ interface AlertProps extends BaseProps {
 
 declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
-declare type ArrowStaticSize = 'l' | 'm' | 'xs';
-declare type ArrowSize = ArrowStaticSize | ResponsiveProperty<`${number}rem` | number>;
-interface ArrowProps extends BaseProps {
-    /** Square shape */
+declare type ArrowPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    borderColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    borderColorHover: CSSColor;
+    colorActive: CSSColor;
+    backgroundColorActive: CSSColor;
+    borderColorActive: CSSColor;
+    colorDisabled: CSSColor;
+    backgroundColorDisabled: CSSColor;
+    borderColorDisabled: CSSColor;
+    shadowColor: CSSColor;
+};
+interface ArrowProps extends BaseProps, ColorPaletteProps<keyof ArrowPalette>, ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+    /** Props for icon component */
+    iconProps?: IconProps;
+    /** Shape variant */
     square?: boolean;
-    /** Used on colored background */
-    onColored?: boolean;
-    /** Size of button */
-    size?: ArrowSize;
-    /** Arrow points top */
+    /** Arrow direction */
     top?: boolean;
-    /** Arrow points right */
+    /** Arrow direction */
     right?: boolean;
-    /** Arrow points bottom */
+    /** Arrow direction */
     bottom?: boolean;
-    /** Arrow points left */
+    /** Arrow direction */
     left?: boolean;
-    /** Inverted colors */
-    inverse?: boolean;
-    /** Outlined appearance */
+    /** Appearance variant */
+    onColored?: boolean;
+    /** Appearance variant */
     outline?: boolean;
-    /** Button disabled */
-    disabled?: boolean;
-    /** Click handler */
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    /** @ignore */
+    inverse?: boolean;
 }
 
 /**
- * Button with arrow icon
+ *
+ * Component accepts all \<button\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [ArrowProps](https://github.com/foxford/ui/blob/master/src/components/Arrow/types.ts)
  */
-declare const Arrow: react.ForwardRefExoticComponent<ArrowProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Arrow: React.ForwardRefExoticComponent<ArrowProps>;
 
 declare type InputCheckboxPalette = {
     color: CSSColor;