@foxford/ui 2.0.0-beta-c85e125-20220630 → 2.0.0-beta-b086a52-20220630

package/components/Button/Button.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/esm/objectSpread2';import r from'@babel/runtime/helpers/esm/objectWithoutProperties';import{Link as t}from'react-router-dom';import{Root as o,Content as a}from'./style.js';import{PROPS_BY_SIZE as i,PRESETS as n}from'./default.js';import{jsxs as s,jsx as d}from'react/jsx-runtime';var l=["children","disabled","href","to","as","target","onClick","ref","icon","type","innerRef"];function m(m){var{children:p,disabled:c,href:f,to:u,as:b,target:y,onClick:h,ref:v,icon:j,type:g,innerRef:k}=m,P=r(m,l);var R=b||(c?'button':f?'a':u?t:'button');var S='a'!==R||c?{}:{href:f||u,target:y};var x='string'==typeof R||c?{}:{to:u||f};var C=P.size&&!P.round&&i[P.size]||{};var z=(e=>e.primary?n.primary:e.secondary?n.secondary:n.default)(m);return s(o,e(e(e(e(e(e({as:R,type:'button'===R?g:void 0,onClick:c||P.loading?void 0:h},C),S),x),z),P),{},{disabled:c,ref:v||k,children:[j&&d("span",{className:"icon",children:j}),p&&d(a,{children:p})]}))}m.defaultProps={size:'m',rounded:!0,display:'inline-block',as:'button',type:'button'},m.displayName='Button';export{m as Button};
+import e from'@babel/runtime/helpers/esm/objectSpread2';import r from'@babel/runtime/helpers/esm/objectWithoutProperties';import{Link as t}from'react-router-dom';import{Root as o,Content as a}from'./style.js';import{PROPS_BY_SIZE as i,PRESETS as n}from'./default.js';import{jsxs as s,jsx as d}from'react/jsx-runtime';var l=["children","disabled","href","to","as","target","onClick","ref","icon","type","innerRef"];function m(m){var{children:p,disabled:f,href:c,to:u,as:b,target:y,onClick:h,ref:v,icon:j,type:g,innerRef:x}=m,P=r(m,l);var R=b||(f?'button':c?'a':u?t:'button');var S='a'!==R||f?{}:{href:c||u,target:y};var k='string'==typeof R||f?{}:{to:u||c};var C=P.size&&!P.round&&i[P.size]||{};var z=(e=>e.primary?n.primary:e.secondary?n.secondary:n.default)(m);return s(o,e(e(e(e(e(e({as:R,type:'button'===R?g:void 0,onClick:f||P.loading?void 0:h},C),S),k),z),P),{},{disabled:f,ref:v||x,children:[j&&d("span",{className:"icon",children:j}),p&&d(a,{children:p})]}))}m.defaultProps={size:'m',rounded:!0,display:'inline-flex',type:'button'},m.displayName='Button';export{m as Button};
 //# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './default'\n\nexport interface ButtonProps\n  extends BaseProps,\n    Tooltiped,\n    Display,\n    Color,\n    Color<'fontColor'>,\n    ResponsiveProperty<'padding'>,\n    ResponsiveProperty<'paddingTop'>,\n    ResponsiveProperty<'paddingRight'>,\n    ResponsiveProperty<'paddingBottom'>,\n    ResponsiveProperty<'paddingLeft'>,\n    ResponsiveProperty<'margin'>,\n    ResponsiveProperty<'marginTop'>,\n    ResponsiveProperty<'marginRight'>,\n    ResponsiveProperty<'marginBottom'>,\n    ResponsiveProperty<'marginLeft'>,\n    ResponsiveProperty<'fontSize'>,\n    ResponsiveProperty<'fluid', boolean>,\n    ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n    ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n  /**\n   * Node type\n   */\n  as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n  target?: string\n  rel?: string\n  /**\n   *  Link href\n   */\n  href?: string\n  /**\n   * React router link to\n   */\n  to?: string\n  /**\n   * Type for button element\n   */\n  type?: 'button' | 'submit' | 'reset'\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   *  Basic button\n   */\n  basic?: boolean\n  /**\n   * Disabled\n   */\n  disabled?: boolean\n  /**\n   *  Is primary\n   */\n  primary?: boolean\n  /**\n   *  Is secondary\n   */\n  secondary?: boolean\n  /**\n   *  Is inverted\n   */\n  inverted?: boolean\n  /**\n   *  Is rounded\n   */\n  rounded?: boolean\n  /**\n   *  Is round (in a shape of circle)\n   */\n  round?: boolean\n  /**\n   * Indicates if there should not be any margin\n   * between this button and the previous one\n   */\n  noSpacing?: boolean\n  /**\n   *  Is in loading state\n   */\n  loading?: boolean\n  /**\n   * Button icon\n   */\n  icon?: React.ReactNode\n  /** On click callback */\n  onClick?: () => void\n  /** Function to make ref */\n  ref?: React.LegacyRef<HTMLDivElement>\n  /**\n   * Size\n   */\n  size?: 'l' | 'm' | 's' | 'xs'\n}\n\nButton.defaultProps = {\n  size: 'm',\n  rounded: true,\n  display: 'inline-block',\n  as: 'button',\n  type: 'button',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n  if (props.primary) return PRESETS.primary\n  if (props.secondary) return PRESETS.secondary\n  return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n  const { children, disabled, href, to, as, target, onClick, ref, icon, type, innerRef, ...restProps } = props\n\n  const _as = as || (disabled ? 'button' : href ? 'a' : to ? Link : 'button')\n  const aProps = _as === 'a' && !disabled ? { href: href || to, target } : {}\n  const linkProps = typeof _as !== 'string' && !disabled ? { to: to || href } : {}\n  const propsBySize: Partial<ButtonProps> =\n    restProps.size && !restProps.round ? PROPS_BY_SIZE[restProps.size] || {} : {}\n  const presetProps: Partial<ButtonProps> = extractPresetByProps(props)\n\n  return (\n    <Styled.Root\n      as={_as}\n      type={_as === 'button' ? type : undefined}\n      onClick={disabled || restProps.loading ? undefined : onClick}\n      {...propsBySize}\n      {...aProps}\n      {...linkProps}\n      {...presetProps}\n      {...restProps}\n      disabled={disabled}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={(ref || innerRef) as any}\n    >\n      {icon && <span className='icon'>{icon}</span>}\n      {children && <Styled.Content>{children}</Styled.Content>}\n    </Styled.Root>\n  )\n}\n"],"names":["Button","props","children","disabled","href","to","as","target","onClick","ref","icon","type","innerRef","restProps","_excluded","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_jsxs","Styled.Root","_objectSpread","loading","_jsx","className","Styled.Content","defaultProps","rounded","display","displayName"],"mappings":"8ZA4IO,SAASA,EAAOC,GACrB,IAAMC,SAAEA,EAAFC,SAAYA,EAAZC,KAAsBA,EAAtBC,GAA4BA,EAA5BC,GAAgCA,EAAhCC,OAAoCA,EAApCC,QAA4CA,EAA5CC,IAAqDA,EAArDC,KAA0DA,EAA1DC,KAAgEA,EAAhEC,SAAsEA,GAA2BX,EAAdY,IAAcZ,EAAvGa,GAEA,IAAMC,EAAMT,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKW,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBZ,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMW,EAA2B,iBAARH,GAAqBZ,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMe,EACJN,EAAUO,OAASP,EAAUQ,OAAQC,EAAcT,EAAUO,OAAc,GAC7E,IAAMG,EApCsBtB,CAAAA,GACxBA,EAAMuB,QAAgBC,EAAQD,QAC9BvB,EAAMyB,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHa1B,CAoCmCA,GAE/D,OACE2B,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACExB,GAAIS,EACJJ,KAAc,WAARI,EAAmBJ,SACzBH,QAASL,GAAYU,EAAUkB,aAAAA,EAAsBvB,GACjDW,GACAF,GACAC,GACAK,GACAV,GARN,GAAA,CASEV,SAAUA,EAEVM,IAAMA,GAAOG,EAXfV,SAAA,CAaGQ,GAAQsB,EAAA,OAAA,CAAMC,UAAU,OAAhB/B,SAAwBQ,IAChCR,GAAY8B,EAACE,EAAD,CAAAhC,SAAiBA,QA/DpCF,EAAOmC,aAAe,CACpBf,KAAM,IACNgB,WACAC,QAAS,eACT/B,GAAI,SACJK,KAAM,UAGRX,EAAOsC,YAAc"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './default'\n\nexport interface ButtonProps\n  extends BaseProps,\n    Tooltiped,\n    Display,\n    Color,\n    Color<'fontColor'>,\n    ResponsiveProperty<'padding'>,\n    ResponsiveProperty<'paddingTop'>,\n    ResponsiveProperty<'paddingRight'>,\n    ResponsiveProperty<'paddingBottom'>,\n    ResponsiveProperty<'paddingLeft'>,\n    ResponsiveProperty<'margin'>,\n    ResponsiveProperty<'marginTop'>,\n    ResponsiveProperty<'marginRight'>,\n    ResponsiveProperty<'marginBottom'>,\n    ResponsiveProperty<'marginLeft'>,\n    ResponsiveProperty<'fontSize'>,\n    ResponsiveProperty<'fluid', boolean>,\n    ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n    ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n  /**\n   * Node type\n   */\n  as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n  target?: string\n  rel?: string\n  /**\n   *  Link href\n   */\n  href?: string\n  /**\n   * React router link to\n   */\n  to?: string\n  /**\n   * Type for button element\n   */\n  type?: 'button' | 'submit' | 'reset'\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   *  Basic button\n   */\n  basic?: boolean\n  /**\n   * Disabled\n   */\n  disabled?: boolean\n  /**\n   *  Is primary\n   */\n  primary?: boolean\n  /**\n   *  Is secondary\n   */\n  secondary?: boolean\n  /**\n   *  Is inverted\n   */\n  inverted?: boolean\n  /**\n   *  Is rounded\n   */\n  rounded?: boolean\n  /**\n   *  Is round (in a shape of circle)\n   */\n  round?: boolean\n  /**\n   * Indicates if there should not be any margin\n   * between this button and the previous one\n   */\n  noSpacing?: boolean\n  /**\n   *  Is in loading state\n   */\n  loading?: boolean\n  /**\n   * Button icon\n   */\n  icon?: React.ReactNode\n  /** On click callback */\n  onClick?: () => void\n  /** Function to make ref */\n  ref?: React.LegacyRef<HTMLDivElement>\n  /**\n   * Size\n   */\n  size?: 'l' | 'm' | 's' | 'xs'\n}\n\nButton.defaultProps = {\n  size: 'm',\n  rounded: true,\n  display: 'inline-flex',\n  type: 'button',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n  if (props.primary) return PRESETS.primary\n  if (props.secondary) return PRESETS.secondary\n  return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n  const { children, disabled, href, to, as, target, onClick, ref, icon, type, innerRef, ...restProps } = props\n\n  const _as = as || (disabled ? 'button' : href ? 'a' : to ? Link : 'button')\n  const aProps = _as === 'a' && !disabled ? { href: href || to, target } : {}\n  const linkProps = typeof _as !== 'string' && !disabled ? { to: to || href } : {}\n  const propsBySize: Partial<ButtonProps> =\n    restProps.size && !restProps.round ? PROPS_BY_SIZE[restProps.size] || {} : {}\n  const presetProps: Partial<ButtonProps> = extractPresetByProps(props)\n\n  return (\n    <Styled.Root\n      as={_as}\n      type={_as === 'button' ? type : undefined}\n      onClick={disabled || restProps.loading ? undefined : onClick}\n      {...propsBySize}\n      {...aProps}\n      {...linkProps}\n      {...presetProps}\n      {...restProps}\n      disabled={disabled}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={(ref || innerRef) as any}\n    >\n      {icon && <span className='icon'>{icon}</span>}\n      {children && <Styled.Content>{children}</Styled.Content>}\n    </Styled.Root>\n  )\n}\n"],"names":["Button","props","children","disabled","href","to","as","target","onClick","ref","icon","type","innerRef","restProps","_excluded","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_jsxs","Styled.Root","_objectSpread","loading","_jsx","className","Styled.Content","defaultProps","rounded","display","displayName"],"mappings":"8ZA2IO,SAASA,EAAOC,GACrB,IAAMC,SAAEA,EAAFC,SAAYA,EAAZC,KAAsBA,EAAtBC,GAA4BA,EAA5BC,GAAgCA,EAAhCC,OAAoCA,EAApCC,QAA4CA,EAA5CC,IAAqDA,EAArDC,KAA0DA,EAA1DC,KAAgEA,EAAhEC,SAAsEA,GAA2BX,EAAdY,IAAcZ,EAAvGa,GAEA,IAAMC,EAAMT,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKW,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBZ,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMW,EAA2B,iBAARH,GAAqBZ,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMe,EACJN,EAAUO,OAASP,EAAUQ,OAAQC,EAAcT,EAAUO,OAAc,GAC7E,IAAMG,EApCsBtB,CAAAA,GACxBA,EAAMuB,QAAgBC,EAAQD,QAC9BvB,EAAMyB,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHa1B,CAoCmCA,GAE/D,OACE2B,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACExB,GAAIS,EACJJ,KAAc,WAARI,EAAmBJ,OAAAA,EACzBH,QAASL,GAAYU,EAAUkB,aAAAA,EAAsBvB,GACjDW,GACAF,GACAC,GACAK,GACAV,GARN,GAAA,CASEV,SAAUA,EAEVM,IAAMA,GAAOG,EAXfV,SAAA,CAaGQ,GAAQsB,EAAA,OAAA,CAAMC,UAAU,OAAhB/B,SAAwBQ,IAChCR,GAAY8B,EAACE,EAAD,CAAAhC,SAAiBA,QA9DpCF,EAAOmC,aAAe,CACpBf,KAAM,IACNgB,SAAAA,EACAC,QAAS,cACT1B,KAAM,UAGRX,EAAOsC,YAAc"}

package/components/Button/style.js

@@ -1,2 +1,2 @@
-import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{chooseWidthValue as d}from'./helpers.js';var g={l:52,m:48,s:40,xs:32};var p=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var l=t(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],p);var s=t(["border-radius:",";"],(i=>i.theme.borderRadius));var m=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var h=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>i.inverted&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var c=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var u=()=>t(["min-width:initial;width:100%;"]);var f=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var L=i.div.withConfig({shouldForwardProp:i=>['children','className','style','target','to','href','ref','onClick','type','onMouseEnter','onMouseLeave'].includes(i)}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.loading?l:null),(i=>i.rounded?s:null),(i=>i.color?e(i.color,i.inverted?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted?'background-color':'color'):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],f)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.size?o(d(i.size),'width'):null),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(d(i.width),'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:'width',customSizeHandler:d})}),(i=>i.round&&i.size?o('string'==typeof i.size&&g[i.size]?g[i.size]:i.size,c):null),(i=>i.fluid?o(i.fluid,u):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:u})}),(i=>i.disabled?m:null),(i=>i.disabled||i.loading?null:h));export{f as Content,L as Root};
+import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>i.inverted&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','style','target','to','href','ref','onClick','type','onMouseEnter','onMouseLeave'].includes(i)}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.display?d(i.display):null),(i=>i.loading?s:null),(i=>i.rounded?m:null),(i=>i.color?e(i.color,i.inverted?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted?'background-color':'color'):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],L)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.size?o(g(i.size),'width'):null),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(g(i.width),'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:'width',customSizeHandler:g})}),(i=>i.round&&i.size?o('string'==typeof i.size&&p[i.size]?p[i.size]:i.size,u):null),(i=>i.fluid?o(i.fluid,f):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:f})}),(i=>i.disabled?h:null),(i=>i.disabled||i.loading?null:c));export{L as Content,S as Root};
 //# sourceMappingURL=style.js.map

package/components/Button/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n  l: 52,\n  m: 48,\n  s: 40,\n  xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 50px 50px;\n  }\n`\n\nconst loading = css`\n  background-image: linear-gradient(\n    -45deg,\n    rgba(255, 255, 255, 0.2) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.2) 50%,\n    rgba(255, 255, 255, 0.2) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 25px 25px;\n  animation: ${loadingAnimation} 2s linear infinite;\n  /* pointer-events: none; */\n  cursor: progress;\n`\n\nconst rounded = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  background-color: ${(props) => props.theme.colors.mercury};\n  color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n  &:active {\n    box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n  }\n  &:hover {\n    ${(props: ButtonProps & { theme: DefaultTheme }) => {\n      if (!props.color || !props.fontColor) return null\n\n      return css`\n        color: ${props.fontColor};\n        background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n      `\n    }}\n  }\n  ${(props) =>\n    props.inverted && props.fontColor && props.color\n      ? css`\n          &:not(:hover) {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n          &:hover {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n        `\n      : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n  return css`\n    width: ${size}${sizing};\n    height: ${size}${sizing};\n    font-size: ${0.44 * size}${sizing};\n    line-height: ${0.44 * size}${sizing};\n    padding: ${0.28 * size}${sizing};\n  `\n}\n\nconst fluid: CalcProperty = () => {\n  return css`\n    min-width: initial;\n    width: 100%;\n  `\n}\n\nexport const Content = styled.span`\n  display: inline-block;\n  line-height: 1;\n  vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n  shouldForwardProp: (prop) =>\n    [\n      'children',\n      'className',\n      'style',\n      'target',\n      'to',\n      'href',\n      'ref',\n      'onClick',\n      'type',\n      'onMouseEnter',\n      'onMouseLeave',\n    ].includes(prop),\n})`\n  -webkit-box-sizing: border-box !important;\n  -moz-box-sizing: border-box !important;\n  -ms-box-sizing: border-box !important;\n  box-sizing: border-box !important;\n  position: relative;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 600;\n  padding-top: 0;\n  padding-bottom: 0;\n  text-decoration: none;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  transition: 0.2s all;\n  white-space: nowrap;\n  appearance: none;\n  vertical-align: top;\n  & + & {\n    margin-left: 1em;\n    ${(props) =>\n      props.noSpacing\n        ? css`\n            margin-left: auto;\n          `\n        : null}\n  }\n  ${(props) => (props.loading ? loading : null)}\n  ${(props) => (props.rounded ? rounded : null)}\n  ${(props) => (props.color ? color(props.color, props.inverted ? 'color' : 'background-color') : null)}\n  ${(props) => (props.fontColor ? color(props.fontColor, props.inverted ? 'background-color' : 'color') : null)}\n\n  ${(props) =>\n    props.round\n      ? css`\n          border-radius: 100%;\n          letter-spacing: 0.5px;\n          & > * {\n            display: inline-block !important;\n            vertical-align: middle !important;\n          }\n          .icon {\n            vertical-align: middle;\n\n            & > * {\n              vertical-align: middle !important;\n            }\n            svg {\n              vertical-align: middle;\n            }\n          }\n        `\n      : css`\n          .icon {\n            display: inline-block;\n            font-size: inherit;\n            line-height: 0;\n            vertical-align: middle;\n            & > * {\n              vertical-align: baseline !important;\n            }\n            & + ${Content} {\n              margin-left: 10px;\n            }\n          }\n        `}\n\n  &:focus {\n    outline: 0;\n  }\n\n  /** BEGIN paddings */\n  ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n  ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n  ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n  ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n  ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n  /** END paddings */ \n\n  /** BEGIN margins */\n  ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n  ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n  ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n  ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n  ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n  /** END margins */ \n\n  /** BEGIN Responsive paddings */\n  ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n    responsiveProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n  ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n    responsiveProperty({\n      sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n      cssProperty: 'padding-top',\n    })}\n  ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n    responsiveProperty({\n      sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n      cssProperty: 'padding-right',\n    })}\n  ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n    responsiveProperty({\n      sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n      cssProperty: 'padding-bottom',\n    })}\n  ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n    responsiveProperty({\n      sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n      cssProperty: 'padding-left',\n    })}\n  /** END Responsive paddings */ \n\n  /** BEGIN Responsive margins */\n  ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n    responsiveProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n  ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n    responsiveProperty({\n      sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n      cssProperty: 'margin-top',\n    })}\n  ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n    responsiveProperty({\n      sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n      cssProperty: 'margin-right',\n    })}\n  ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n    responsiveProperty({\n      sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n      cssProperty: 'margin-bottom',\n    })}\n  ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n    responsiveProperty({\n      sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n      cssProperty: 'margin-left',\n    })}\n  /** END Responsive margins */\n\n  /** BEGIN Responsive font-size */\n  ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n  ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n    return responsiveProperty({\n      sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n      cssProperty: 'font-size',\n    })\n  }}\n  /** END Responsive font-size */\n\n  ${(props) => (props.size ? property(chooseWidthValue(props.size), 'width') : null)}\n\n  ${(props) => (props.height ? property(props.height, 'height') : null)}\n  ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n    responsiveProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n  ${(props) => (props.width ? property(chooseWidthValue(props.width), 'width') : null)}\n  ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n    responsiveProperty({\n      sizes: { widthXS, widthS, widthM, widthL, widthXL },\n      cssProperty: 'width',\n      customSizeHandler: chooseWidthValue,\n    })}\n  \n\n  ${(props) =>\n    props.round && props.size\n      ? property(\n          typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n          roundSize\n        )\n      : null}\n  \n\n  ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n  ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n    responsiveProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n  ${(props) => (props.disabled ? disabled : null)}\n  ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","chooseWidthValue","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n  l: 52,\n  m: 48,\n  s: 40,\n  xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 50px 50px;\n  }\n`\n\nconst loading = css`\n  background-image: linear-gradient(\n    -45deg,\n    rgba(255, 255, 255, 0.2) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.2) 50%,\n    rgba(255, 255, 255, 0.2) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 25px 25px;\n  animation: ${loadingAnimation} 2s linear infinite;\n  /* pointer-events: none; */\n  cursor: progress;\n`\n\nconst rounded = css`\n  border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  background-color: ${(props) => props.theme.colors.mercury};\n  color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n  &:active {\n    box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n  }\n  &:hover {\n    ${(props: ButtonProps & { theme: DefaultTheme }) => {\n      if (!props.color || !props.fontColor) return null\n\n      return css`\n        color: ${props.fontColor};\n        background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n      `\n    }}\n  }\n  ${(props) =>\n    props.inverted && props.fontColor && props.color\n      ? css`\n          &:not(:hover) {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n          &:hover {\n            border: 1px solid ${props.theme.colors[props.color]};\n          }\n        `\n      : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n  return css`\n    width: ${size}${sizing};\n    height: ${size}${sizing};\n    font-size: ${0.44 * size}${sizing};\n    line-height: ${0.44 * size}${sizing};\n    padding: ${0.28 * size}${sizing};\n  `\n}\n\nconst fluid: CalcProperty = () => {\n  return css`\n    min-width: initial;\n    width: 100%;\n  `\n}\n\nexport const Content = styled.span`\n  display: inline-block;\n  line-height: 1;\n  vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n  shouldForwardProp: (prop) =>\n    [\n      'children',\n      'className',\n      'style',\n      'target',\n      'to',\n      'href',\n      'ref',\n      'onClick',\n      'type',\n      'onMouseEnter',\n      'onMouseLeave',\n    ].includes(prop),\n})`\n  -webkit-box-sizing: border-box !important;\n  -moz-box-sizing: border-box !important;\n  -ms-box-sizing: border-box !important;\n  box-sizing: border-box !important;\n  position: relative;\n  overflow: hidden;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 600;\n  padding-top: 0;\n  padding-bottom: 0;\n  text-decoration: none;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  transition: 0.2s all;\n  white-space: nowrap;\n  appearance: none;\n  vertical-align: top;\n  & + & {\n    margin-left: 1em;\n    ${(props) =>\n      props.noSpacing\n        ? css`\n            margin-left: auto;\n          `\n        : null}\n  }\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.loading ? loading : null)}\n  ${(props) => (props.rounded ? rounded : null)}\n  ${(props) => (props.color ? color(props.color, props.inverted ? 'color' : 'background-color') : null)}\n  ${(props) => (props.fontColor ? color(props.fontColor, props.inverted ? 'background-color' : 'color') : null)}\n\n  ${(props) =>\n    props.round\n      ? css`\n          border-radius: 100%;\n          letter-spacing: 0.5px;\n          & > * {\n            display: inline-block !important;\n            vertical-align: middle !important;\n          }\n          .icon {\n            vertical-align: middle;\n\n            & > * {\n              vertical-align: middle !important;\n            }\n            svg {\n              vertical-align: middle;\n            }\n          }\n        `\n      : css`\n          .icon {\n            display: inline-block;\n            font-size: inherit;\n            line-height: 0;\n            vertical-align: middle;\n            & > * {\n              vertical-align: baseline !important;\n            }\n            & + ${Content} {\n              margin-left: 10px;\n            }\n          }\n        `}\n\n  &:focus {\n    outline: 0;\n  }\n\n  /** BEGIN paddings */\n  ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n  ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n  ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n  ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n  ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n  /** END paddings */ \n\n  /** BEGIN margins */\n  ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n  ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n  ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n  ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n  ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n  /** END margins */ \n\n  /** BEGIN Responsive paddings */\n  ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n    responsiveProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n  ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n    responsiveProperty({\n      sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n      cssProperty: 'padding-top',\n    })}\n  ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n    responsiveProperty({\n      sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n      cssProperty: 'padding-right',\n    })}\n  ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n    responsiveProperty({\n      sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n      cssProperty: 'padding-bottom',\n    })}\n  ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n    responsiveProperty({\n      sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n      cssProperty: 'padding-left',\n    })}\n  /** END Responsive paddings */ \n\n  /** BEGIN Responsive margins */\n  ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n    responsiveProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n  ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n    responsiveProperty({\n      sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n      cssProperty: 'margin-top',\n    })}\n  ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n    responsiveProperty({\n      sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n      cssProperty: 'margin-right',\n    })}\n  ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n    responsiveProperty({\n      sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n      cssProperty: 'margin-bottom',\n    })}\n  ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n    responsiveProperty({\n      sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n      cssProperty: 'margin-left',\n    })}\n  /** END Responsive margins */\n\n  /** BEGIN Responsive font-size */\n  ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n  ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n    return responsiveProperty({\n      sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n      cssProperty: 'font-size',\n    })\n  }}\n  /** END Responsive font-size */\n\n  ${(props) => (props.size ? property(chooseWidthValue(props.size), 'width') : null)}\n\n  ${(props) => (props.height ? property(props.height, 'height') : null)}\n  ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n    responsiveProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n  ${(props) => (props.width ? property(chooseWidthValue(props.width), 'width') : null)}\n  ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n    responsiveProperty({\n      sizes: { widthXS, widthS, widthM, widthL, widthXL },\n      cssProperty: 'width',\n      customSizeHandler: chooseWidthValue,\n    })}\n  \n\n  ${(props) =>\n    props.round && props.size\n      ? property(\n          typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n          roundSize\n        )\n      : null}\n  \n\n  ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n  ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n    responsiveProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n  ${(props) => (props.disabled ? disabled : null)}\n  ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","chooseWidthValue","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}

package/components/Tabs/style.js

@@ -1,2 +1,2 @@
-import o,{css as t}from'styled-components';import{color as r}from'../../mixins/color.js';var e=o=>t(["border-bottom:1px solid ",";"],o);var i=t(["color:",";position:relative;&:after{width:initial;opacity:1;}"],(o=>o.theme.colors.primary));var n=o.div.withConfig({shouldForwardProp:o=>'children'===o}).withConfig({componentId:"fox-ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," ",""],(o=>o.borderColor&&!o.noBorder?r(o.borderColor,e):null),(o=>o.color?r(o.color):null));var l=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-1"})(["position:relative;display:block;width:auto;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;z-index:1;top:0;bottom:0;display:block;content:'';width:20px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentColor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentColor 100%);}"]);var a=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-2"})(["display:block;max-width:calc(100% - 40px);padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0px;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?t(["display:flex;justify-content:space-between;width:100%;"]):null));var c=o.div.withConfig({shouldForwardProp:o=>!['themeKey','color','borderColor','active'].includes(o)}).withConfig({componentId:"fox-ui__sc-ggtlgu-3"})(["display:inline-block;margin-bottom:-1px;flex-shrink:0;font-size:16px;font-weight:bold;line-height:20px;padding-bottom:14px;text-decoration:none;cursor:pointer;z-index:2;transition:color 0.2s ease-out;"," "," &:after{opacity:0;width:0;content:'';height:3px;position:absolute;bottom:-1px;z-index:1;left:0;right:0;background-color:currentColor;transition:opacity 0.2s ease-out;}&:hover{color:",";}& + &{margin-left:60px;}"," ",""],(o=>o.color?r(o.color):null),(o=>o.borderColor?r(o.borderColor,e):null),(o=>o.theme.colors.primary),(o=>o.themeKey?(o=>{switch(o){case'compact':return t(["font-weight:normal;& + &{margin-left:20px;}"]);case'crispyCompact':return t(["text-transform:uppercase;font-size:12px;height:16px;line-height:16px;padding-bottom:8px;border-bottom:1px solid ",";& + &{margin-left:18px;}"],(o=>o.theme.colors.mercury));case'crispy':return t(["height:35px;text-transform:uppercase;font-size:12px;& + &{margin-left:32px;}"]);default:return null}})(o.themeKey):null),(o=>o.active?i:null));export{a as Content,l as Inner,n as Root,c as Tab};
+import o,{css as t}from'styled-components';import{color as r}from'../../mixins/color.js';var e=o=>t(["border-bottom:1px solid ",";"],o);var i=t(["color:",";position:relative;&:after{width:initial;opacity:1;}"],(o=>o.theme.colors.primary));var n=o.div.withConfig({shouldForwardProp:o=>'children'===o}).withConfig({componentId:"fox-ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," ",""],(o=>o.borderColor&&!o.noBorder?r(o.borderColor,e):null),(o=>o.color?r(o.color):null));var l=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-1"})(["position:relative;display:block;width:auto;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;z-index:1;top:0;bottom:0;display:block;content:'';width:20px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentColor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentColor 100%);}"]);var a=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-2"})(["display:block;max-width:calc(100% - 40px);padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0px;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?t(["display:flex;justify-content:space-between;width:100%;"]):null));var c=o.div.withConfig({shouldForwardProp:o=>!['themeKey','color','borderColor','active'].includes(o)}).withConfig({componentId:"fox-ui__sc-ggtlgu-3"})(["display:inline-block;margin-bottom:-1px;flex-shrink:0;font-size:16px;font-weight:bold;line-height:20px;padding-bottom:14px;text-decoration:none;cursor:pointer;z-index:2;transition:color 0.2s ease-out;"," "," &:after{opacity:0;width:0;content:'';height:3px;position:absolute;bottom:-1px;z-index:1;left:0;right:0;background-color:currentColor;transition:opacity 0.2s ease-out;}&:hover{color:",";}& + &{margin-left:60px;}"," "," &.active{","}"],(o=>o.color?r(o.color):null),(o=>o.borderColor?r(o.borderColor,e):null),(o=>o.theme.colors.primary),(o=>o.themeKey?(o=>{switch(o){case'compact':return t(["font-weight:normal;& + &{margin-left:20px;}"]);case'crispyCompact':return t(["text-transform:uppercase;font-size:12px;height:16px;line-height:16px;padding-bottom:8px;border-bottom:1px solid ",";& + &{margin-left:18px;}"],(o=>o.theme.colors.mercury));case'crispy':return t(["height:35px;text-transform:uppercase;font-size:12px;& + &{margin-left:32px;}"]);default:return null}})(o.themeKey):null),(o=>o.active?i:null),i);export{a as Content,l as Inner,n as Root,c as Tab};
 //# sourceMappingURL=style.js.map

package/components/Tabs/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './Tab'\n\nconst borderColor = (color: string) => css`\n  border-bottom: 1px solid ${color};\n`\n\nconst getThemedCss = (theme: TabProps['theme']) => {\n  switch (theme) {\n    case 'compact':\n      return css`\n        font-weight: normal;\n        & + & {\n          margin-left: 20px;\n        }\n      `\n    case 'crispyCompact':\n      return css`\n        text-transform: uppercase;\n        font-size: 12px;\n        height: 16px;\n        line-height: 16px;\n        padding-bottom: 8px;\n        border-bottom: 1px solid ${(props) => props.theme.colors.mercury};\n        & + & {\n          margin-left: 18px;\n        }\n      `\n    case 'crispy':\n      return css`\n        height: 35px;\n        text-transform: uppercase;\n        font-size: 12px;\n        & + & {\n          margin-left: 32px;\n        }\n      `\n    default:\n      return null\n  }\n}\n\nconst activeTab = css`\n  color: ${(props) => props.theme.colors.primary};\n  position: relative;\n  &:after {\n    width: initial;\n    opacity: 1;\n  }\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color'>>`\n  color: rgba(247, 247, 247, 1);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: row;\n  ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n`\n\nexport const Inner = styled.div`\n  position: relative;\n  display: block;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 -20px;\n  box-sizing: border-box;\n  background: transparent;\n  overflow: visible;\n  max-width: 100%;\n  width: 100%;\n  &::before,\n  &::after {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: 20px;\n    height: 100%;\n  }\n\n  &::before {\n    left: 0;\n    background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n  }\n\n  &::after {\n    right: 0;\n    background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n  }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n  display: block;\n  max-width: calc(100% - 40px);\n  padding: 0;\n  margin: 0 auto;\n  white-space: nowrap;\n  box-sizing: border-box;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  color: ${(props) => props.theme.colors.mineShaft};\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    height: 0px;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  ${(props) =>\n    props.noBorder\n      ? css`\n          display: flex;\n          justify-content: space-between;\n          width: 100%;\n        `\n      : null}\n`\n\nexport const Tab = styled.div.withConfig<TabProps & { themeKey: TabProps['theme'] }>({\n  shouldForwardProp: (prop) => !['themeKey', 'color', 'borderColor', 'active'].includes(prop),\n})`\n  display: inline-block;\n  margin-bottom: -1px;\n  flex-shrink: 0;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 20px;\n  padding-bottom: 14px;\n  text-decoration: none;\n  cursor: pointer;\n  z-index: 2;\n  transition: color 0.2s ease-out;\n  ${(props) => (props.color ? color(props.color) : null)}\n  ${(props) => (props.borderColor ? color(props.borderColor, borderColor) : null)}\n  &:after {\n    opacity: 0;\n    width: 0;\n    content: '';\n    height: 3px;\n    position: absolute;\n    bottom: -1px;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    background-color: currentColor;\n    transition: opacity 0.2s ease-out;\n  }\n  &:hover {\n    color: ${(props) => props.theme.colors.primary};\n  }\n  & + & {\n    margin-left: 60px;\n  }\n  ${(props) => (props.themeKey ? getThemedCss(props.themeKey) : null)}\n  ${(props) => (props.active ? activeTab : null)}\n`\n"],"names":["borderColor","color","css","activeTab","props","theme","colors","primary","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","noBorder","Inner","Content","mineShaft","Tab","includes","themeKey","mercury","active"],"mappings":"yFAKA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAsC7B,IAAME,EAAYD,EAAH,CAAA,SAAA,yDACHE,GAAUA,EAAMC,MAAMC,OAAOC,UAQlC,IAAMC,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,KAQZL,GAAWA,EAAMJ,cAAgBI,EAAMW,SAAWd,EAAMG,EAAMJ,YAAaA,GAAe,OAC1FI,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAGtCe,IAAAA,EAAQP,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAd,CAAA,udAmCMQ,IAAAA,EAAUR,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,uLAAA,iLAAA,KAURL,GAAUA,EAAMC,MAAMC,OAAOY,YAepCd,GACDA,EAAMW,SACFb,EADJ,CAAA,2DAMI,OAGD,IAAMiB,EAAMV,EAAOC,IAAIC,WAAuD,CACnFC,kBAAoBC,IAAU,CAAC,WAAY,QAAS,cAAe,UAAUO,SAASP,KADxEF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2MAAA,IAAA,yLAAA,6BAAA,IAAA,KAcXL,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAC9CG,GAAWA,EAAMJ,YAAcC,EAAMG,EAAMJ,YAAaA,GAAe,OAe9DI,GAAUA,EAAMC,MAAMC,OAAOC,UAKtCH,GAAWA,EAAMiB,SAjKAhB,CAAAA,IACpB,OAAQA,GACN,IAAK,UACH,OAAOH,EAAP,CAAA,gDAMF,IAAK,gBACH,OAAOA,EAMuBE,CAAAA,mHAAAA,8BAAAA,GAAUA,EAAMC,MAAMC,OAAOgB,UAK7D,IAAK,SACH,OAAOpB,EAAP,CAAA,iFAQF,QACE,OAAO,OA/BSG,CAiKwBD,EAAMiB,UAAY,OAC3DjB,GAAWA,EAAMmB,OAASpB,EAAY"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './Tab'\n\nconst borderColor = (color: string) => css`\n  border-bottom: 1px solid ${color};\n`\n\nconst getThemedCss = (theme: TabProps['theme']) => {\n  switch (theme) {\n    case 'compact':\n      return css`\n        font-weight: normal;\n        & + & {\n          margin-left: 20px;\n        }\n      `\n    case 'crispyCompact':\n      return css`\n        text-transform: uppercase;\n        font-size: 12px;\n        height: 16px;\n        line-height: 16px;\n        padding-bottom: 8px;\n        border-bottom: 1px solid ${(props) => props.theme.colors.mercury};\n        & + & {\n          margin-left: 18px;\n        }\n      `\n    case 'crispy':\n      return css`\n        height: 35px;\n        text-transform: uppercase;\n        font-size: 12px;\n        & + & {\n          margin-left: 32px;\n        }\n      `\n    default:\n      return null\n  }\n}\n\nconst activeTab = css`\n  color: ${(props) => props.theme.colors.primary};\n  position: relative;\n  &:after {\n    width: initial;\n    opacity: 1;\n  }\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color'>>`\n  color: rgba(247, 247, 247, 1);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: row;\n  ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n`\n\nexport const Inner = styled.div`\n  position: relative;\n  display: block;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 -20px;\n  box-sizing: border-box;\n  background: transparent;\n  overflow: visible;\n  max-width: 100%;\n  width: 100%;\n  &::before,\n  &::after {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: 20px;\n    height: 100%;\n  }\n\n  &::before {\n    left: 0;\n    background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n  }\n\n  &::after {\n    right: 0;\n    background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n  }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n  display: block;\n  max-width: calc(100% - 40px);\n  padding: 0;\n  margin: 0 auto;\n  white-space: nowrap;\n  box-sizing: border-box;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  color: ${(props) => props.theme.colors.mineShaft};\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    height: 0px;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  ${(props) =>\n    props.noBorder\n      ? css`\n          display: flex;\n          justify-content: space-between;\n          width: 100%;\n        `\n      : null}\n`\n\nexport const Tab = styled.div.withConfig<TabProps & { themeKey: TabProps['theme'] }>({\n  shouldForwardProp: (prop) => !['themeKey', 'color', 'borderColor', 'active'].includes(prop),\n})`\n  display: inline-block;\n  margin-bottom: -1px;\n  flex-shrink: 0;\n  font-size: 16px;\n  font-weight: bold;\n  line-height: 20px;\n  padding-bottom: 14px;\n  text-decoration: none;\n  cursor: pointer;\n  z-index: 2;\n  transition: color 0.2s ease-out;\n  ${(props) => (props.color ? color(props.color) : null)}\n  ${(props) => (props.borderColor ? color(props.borderColor, borderColor) : null)}\n  &:after {\n    opacity: 0;\n    width: 0;\n    content: '';\n    height: 3px;\n    position: absolute;\n    bottom: -1px;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    background-color: currentColor;\n    transition: opacity 0.2s ease-out;\n  }\n  &:hover {\n    color: ${(props) => props.theme.colors.primary};\n  }\n  & + & {\n    margin-left: 60px;\n  }\n  ${(props) => (props.themeKey ? getThemedCss(props.themeKey) : null)}\n  ${(props) => (props.active ? activeTab : null)}\n  &.active {\n    ${activeTab}\n  }\n`\n"],"names":["borderColor","color","css","activeTab","props","theme","colors","primary","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","noBorder","Inner","Content","mineShaft","Tab","includes","themeKey","mercury","active"],"mappings":"yFAKA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAsC7B,IAAME,EAAYD,EAAH,CAAA,SAAA,yDACHE,GAAUA,EAAMC,MAAMC,OAAOC,UAQlC,IAAMC,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,KAQZL,GAAWA,EAAMJ,cAAgBI,EAAMW,SAAWd,EAAMG,EAAMJ,YAAaA,GAAe,OAC1FI,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAGtCe,IAAAA,EAAQP,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAd,CAAA,udAmCMQ,IAAAA,EAAUR,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,uLAAA,iLAAA,KAURL,GAAUA,EAAMC,MAAMC,OAAOY,YAepCd,GACDA,EAAMW,SACFb,EADJ,CAAA,2DAMI,OAGD,IAAMiB,EAAMV,EAAOC,IAAIC,WAAuD,CACnFC,kBAAoBC,IAAU,CAAC,WAAY,QAAS,cAAe,UAAUO,SAASP,KADxEF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2MAAA,IAAA,yLAAA,6BAAA,IAAA,aAAA,MAcXL,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAC9CG,GAAWA,EAAMJ,YAAcC,EAAMG,EAAMJ,YAAaA,GAAe,OAe9DI,GAAUA,EAAMC,MAAMC,OAAOC,UAKtCH,GAAWA,EAAMiB,SAjKAhB,CAAAA,IACpB,OAAQA,GACN,IAAK,UACH,OAAOH,EAAP,CAAA,gDAMF,IAAK,gBACH,OAAOA,EAMuBE,CAAAA,mHAAAA,8BAAAA,GAAUA,EAAMC,MAAMC,OAAOgB,UAK7D,IAAK,SACH,OAAOpB,EAAP,CAAA,iFAQF,QACE,OAAO,OA/BSG,CAiKwBD,EAAMiB,UAAY,OAC3DjB,GAAWA,EAAMmB,OAASpB,EAAY,MAErCA"}

package/dts/index.d.ts

@@ -54,6 +54,7 @@ interface ResponsivePropertyPayload<T extends PropsProperties> {
     cssProperty: CssProperty;
     sizing?: 'px' | 'rem' | 'em' | '%';
     customSizeHandler?: (_value: PossibleValues) => PossibleValues;
+    sort?: (_a: string, _b: string) => number;
 }
 /**
  * Миксин для генерации media запросов
@@ -64,7 +65,7 @@ interface ResponsivePropertyPayload<T extends PropsProperties> {
  * @param obj.customSizeHandler функция для вычисления кастомных значений величин
  * @returns строки медиазапросов
  */
-declare const responsiveProperty: <T extends PropsProperties>({ sizes, cssProperty, sizing, customSizeHandler, }: ResponsivePropertyPayload<T>) => () => () => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>[];
+declare const responsiveProperty: <T extends PropsProperties>({ sizes, cssProperty, sizing, customSizeHandler, sort, }: ResponsivePropertyPayload<T>) => () => () => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>>[];
 
 declare type HEX = `#${string}`;
 declare type RGB = `rgb(${number}, ${number}, ${number})`;
@@ -1097,7 +1098,6 @@ declare namespace Button {
         size: string;
         rounded: boolean;
         display: string;
-        as: string;
         type: string;
     };
     var displayName: string;