@foxford/ui 2.39.0-beta-8d52b2b-20240822 → 2.39.0-beta-d0e7df8-20240822

package/components/Switcher/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport type { StyledSwitcherProps, SwitcherPropsByPreset } from './types'\n\nexport const Input = styled.input`\n  position: absolute;\n  overflow: visible;\n  z-index: -1;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n`\n\nexport const Label = styled.label`\n  display: inline;\n  padding-left: 14px;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label<SwitcherPropsByPreset>`\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: ${(props) => props.switcherWidth}px;\n  height: ${(props) => props.switcherHeight}px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.3s ease, background-image 0.3s ease;\n  border-radius: ${(props) => props.borderRadius}px;\n  flex: 0 0 auto;\n\n  &::before {\n    position: absolute;\n    top: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n    left: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n    display: block;\n    width: ${(props) => props.dotSize}px;\n    height: ${(props) => props.dotSize}px;\n    content: '';\n    transition: background 0.3s ease, left 0.3s ease;\n    transform: translateZ(0);\n    border-radius: 50%;\n  }\n`\n\nconst disabledStyles = `\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`\n\nconst checkedStyles = css<StyledSwitcherProps>`\n  & ${Switcher} {\n    &::before {\n      left: ${({ switcherWidth, switcherHeight, dotSize }) =>\n        switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n    }\n  }\n`\n\nconst baseStyles = css<StyledSwitcherProps>`\n  ${(props) => `\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ${props.switcherHeight}px;\n    line-height: ${props.switcherHeight}px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n  `}\n`\n\nconst defaultPresetStyle = css<StyledSwitcherProps>`\n  ${(props) => {\n    const color = props.color || 'atlantis'\n\n    return `\n      & ${Switcher} {\n        box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n        background-color: #eaecf3;\n\n        &::before {\n          background-color: ${props.theme.colors.white};\n          box-shadow: ${props.disabled ? 'none' : '0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n        }\n\n        ${\n          props.inactiveColor\n            ? `\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n                  ${getColor(props.inactiveColor, props)}\n                );\n              `\n            : ''\n        }\n\n        ${\n          props.checked\n            ? `\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(color, props)).lighten(10).toString()},\n                  ${getColor(color, props)}\n                );\n              `\n            : ''\n        }\n      }\n\n      & ${Input}:focus-visible + ${Switcher} {\n        outline: 1px solid ${getColor(color, props)};\n        outline-offset: 2px;\n      }\n    `\n  }}\n`\n\nconst brandPresetStyles = css<StyledSwitcherProps>`\n  ${(props) => `\n    & ${Switcher} {\n      background-color: ${\n        props.disabled\n          ? props.theme.colors[props.checked ? 'bg-disabled-active' : 'bg-disabled-small']\n          : props.theme.colors[props.checked ? 'bg-brand-primary-basic' : 'bg-onmain-tertiary']\n      };\n\n      &::before {\n        background-color: ${props.theme.colors['bg-oncolor-primary']};\n        box-shadow: ${props.disabled ? 'none' : '0px 2px 4px rgba(0, 0, 0, 0.08)'};\n      }\n\n      ${!props.checked && props.inactiveColor ? `background-color: ${getColor(props.inactiveColor, props)};` : ''}\n      ${props.checked && props.color ? `background-color: ${getColor(props.color, props)};` : ''}\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  `}\n`\n\nexport const Root = styled.div.withConfig<StyledSwitcherProps>({\n  shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n  ${baseStyles}\n\n  ${(props) => (props.checked ? checkedStyles : '')}\n  ${(props) => (props.disabled ? disabledStyles : '')}\n  ${({ brandPresetUsed }) => (brandPresetUsed ? brandPresetStyles : defaultPresetStyle)}\n`\n"],"names":["Input","styled","input","withConfig","displayName","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","dotSize","disabledStyles","checkedStyles","css","baseStyles","defaultPresetStyle","color","theme","colors","white","disabled","inactiveColor","tinycolor","getColor","lighten","toString","checked","brandPresetStyles","Root","div","shouldForwardProp","prop","includes","brandPresetUsed"],"mappings":"iMAKaA,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAQpB,CAAA,6FAEYK,MAAQL,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAQpB,CAAA,sIAEYO,SAAWP,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,WAAAC,YAAA,mBAAZJ,CAAY,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,6GAIxBQ,GAAUA,EAAMC,gBACfD,GAAUA,EAAME,iBAITF,GAAUA,EAAMG,eAKzB,EAAGD,iBAAgBE,cAAeF,EAAiBE,GAAW,IAC7D,EAAGF,iBAAgBE,cAAeF,EAAiBE,GAAW,IAE5DJ,GAAUA,EAAMI,UACfJ,GAAUA,EAAMI,UAQ/B,MAAMC,eAAiB,oDAIjBN,8HASAF,2CAKN,MAAMS,cAAgBC,IAChBR,CAAAA,KAAAA,mBAAAA,SAAAA,UAEQ,EAAGE,gBAAeC,iBAAgBE,aACxCH,EAAgBG,GAAWF,EAAiBE,GAAW,IAK/D,MAAMI,WAAaD,IAAG,CAAA,GAAA,KACjBP,GAAU,4HAKDA,EAAME,uCACDF,EAAME,0LAUzB,MAAMO,mBAAqBF,IAAG,CAAA,GAAA,KACzBP,IACD,MAAMU,EAAQV,EAAMU,OAAS,WAE7B,MAAO,aACDX,kKAKoBC,EAAMW,MAAMC,OAAOC,iCACzBb,EAAMc,SAAW,OAAS,0DAIxCd,EAAMe,cACF,wGAGMC,UAAUC,SAASjB,EAAMe,cAAef,IAAQkB,QAAQ,IAAIC,kCAC5DF,SAASjB,EAAMe,cAAef,yCAGpC,iBAIJA,EAAMoB,QACF,wGAGMJ,UAAUC,SAASP,EAAOV,IAAQkB,QAAQ,IAAIC,kCAC9CF,SAASP,EAAOV,yCAGtB,0BAIJT,yBAAyBQ,0CACNkB,SAASP,EAAOV,kDAGxC,IAIL,MAAMqB,kBAAoBd,IAAG,CAAA,GAAA,KACxBP,GAAU,WACPD,uCAEAC,EAAMc,SACFd,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,qBAAuB,qBAC1DpB,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,yBAA2B,0EAI9CpB,EAAMW,MAAMC,OAAO,+CACzBZ,EAAMc,SAAW,OAAS,yDAGvCd,EAAMoB,SAAWpB,EAAMe,cAAgB,qBAAqBE,SAASjB,EAAMe,cAAef,MAAY,aACvGA,EAAMoB,SAAWpB,EAAMU,MAAQ,qBAAqBO,SAASjB,EAAMU,MAAOV,MAAY,sBAGtFT,yBAAyBQ,2CACHC,EAAMW,MAAMC,OAAOC,oBAAoBb,EAAMW,MAAMC,OAAO,mGAOjF,MAAMU,KAAO9B,OAAO+B,IAAI7B,WAAgC,CAC7D8B,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KACzE/B,WAAA,CAAAC,YAAA,iBAAAC,YAAA,mBAFkBJ,CAGhBgB,CAAAA,GAAAA,IAAAA,IAAAA,IAAAA,IAAAA,YAECR,GAAWA,EAAMoB,QAAUd,cAAgB,KAC3CN,GAAWA,EAAMc,SAAWT,eAAiB,KAC9C,EAAGsB,qBAAuBA,EAAkBN,kBAAoBZ"}

package/components/Tab/Tab.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as s}from'../../hocs/withMergedProps.js';import{Text as o}from'../Text/Text.js';import{SIZES as a}from'./constants.js';import{SIZES_DEFAULT as i}from'./default-constants.js';import{Root as p,Edge as n,Content as m}from'./style.js';import{jsx as h,jsxs as d,Fragment as f}from'react/jsx-runtime';var c=["size","type","textProps","children","theme"];var l='Tab';var b=s(t(((t,s)=>{var{size:a="m",type:i="button",textProps:l={},children:b,theme:x}=t,T=r(t,c);var j={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return h(p,e(e({},T),{},{size:a,tabTheme:x,type:void 0===T.as?i:void 0,ref:s,children:'brand'===T.preset?d(f,{children:[T.left&&h(n,{}),h(m,{children:'function'==typeof b?b({baseTextProps:j,textProps:l}):h(o,e(e(e({},j),l),{},{children:b}))}),T.right&&h(n,{after:!0})]}):h(f,{children:'function'==typeof b?b({baseTextProps:j,textProps:l}):h(o,e(e(e({},j),l),{},{children:b}))})}))})),{displayName:"Tab",sizes:e=>'brand'===e.preset?a:i});export{l as COMPONENT_NAME,b as Tab};
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Text=require('../Text/Text.js');const Tab=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="m",type:s="button",textProps:i={},children:a,theme:n,...o}=e;const u={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return require$$0.jsx(style.Root,{...o,size:t,tabTheme:n,type:o.as===void 0?s:void 0,ref:r,children:o.preset==='brand'?require$$0.jsxs(require$$0.Fragment,{children:[o.left&&require$$0.jsx(style.Edge,{}),require$$0.jsx(style.Content,{children:typeof a=='function'?a({baseTextProps:u,textProps:i}):require$$0.jsx(Text.Text,{...u,...i,children:a})}),o.right&&require$$0.jsx(style.Edge,{after:!0})]}):require$$0.jsx(require$$0.Fragment,{children:typeof a=='function'?a({baseTextProps:u,textProps:i}):require$$0.jsx(Text.Text,{...u,...i,children:a})})})})),{displayName:"Tab",sizes:e=>e.preset==='brand'?constants.SIZES:defaultConstants.SIZES_DEFAULT});exports.COMPONENT_NAME="Tab",exports.Tab=Tab;
 //# sourceMappingURL=Tab.js.map

package/components/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\nimport type { TabProps } from './types'\n\nconst COMPONENT_NAME = 'Tab'\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 [TabProps](https://github.com/foxford/ui/blob/master/src/components/Tab/types.ts)\n */\nconst Tab: React.ForwardRefExoticComponent<TabProps> = withMergedProps<TabProps, HTMLButtonElement>(\n  forwardRef((props, ref) => {\n    const { size = 'm', type = 'button', textProps = {}, children, theme, ...restProps } = props\n\n    const baseTextProps: TextProps = { as: 'span', size: 'inherit', color: 'inherit', weight: 'inherit' }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        size={size}\n        tabTheme={theme}\n        type={restProps.as === undefined ? type : undefined}\n        ref={ref}\n      >\n        {restProps.preset === 'brand' ? (\n          <>\n            {restProps.left && <Styled.Edge />}\n            <Styled.Content>\n              {typeof children === 'function' ? (\n                children({ baseTextProps, textProps })\n              ) : (\n                <Text {...baseTextProps} {...textProps}>\n                  {children}\n                </Text>\n              )}\n            </Styled.Content>\n            {restProps.right && <Styled.Edge after />}\n          </>\n        ) : (\n          <>\n            {typeof children === 'function' ? (\n              children({ baseTextProps, textProps })\n            ) : (\n              <Text {...baseTextProps} {...textProps}>\n                {children}\n              </Text>\n            )}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: (props) => {\n      return props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n    },\n  }\n)\n\nexport { Tab, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tab","withMergedProps","forwardRef","props","ref","size","type","textProps","children","theme","restProps","_excluded","baseTextProps","as","color","weight","_jsx","Styled.Root","tabTheme","undefined","preset","_jsxs","_Fragment","left","Styled.Edge","Styled.Content","Text","right","after","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"wgBASMA,IAAAA,EAAiB,MAYjBC,IAAAA,EAAiDC,EACrDC,IAAYC,EAAOC,KACjB,IAAMC,KAAEA,EAAO,IAATC,KAAcA,EAAO,SAArBC,UAA+BA,EAAY,GAA3CC,SAA+CA,EAA/CC,MAAyDA,GAAwBN,EAAdO,IAAcP,EAAvFQ,GAEA,IAAMC,EAA2B,CAAEC,GAAI,OAAQR,KAAM,UAAWS,MAAO,UAAWC,OAAQ,WAE1F,OACEC,EAACC,SACKP,GADN,GAAA,CAEEL,KAAMA,EACNa,SAAUT,EACVH,UAAuBa,IAAjBT,EAAUG,GAAmBP,SACnCF,IAAKA,EALPI,SAOwB,UAArBE,EAAUU,OACTC,EAAAC,EAAA,CAAAd,SAAA,CACGE,EAAUa,MAAQP,EAACQ,EADtB,IAEER,EAACS,EAAD,CAAAjB,SACuB,mBAAbA,EACNA,EAAS,CAAEI,cAAAA,EAAeL,UAAAA,IAE1BS,EAACU,EAASd,EAAAA,EAAAA,EAAAA,GAAAA,GAAmBL,GAA7B,GAAA,CAAAC,SACGA,OAINE,EAAUiB,OAASX,EAACQ,EAAD,CAAaI,OAAK,OAGxCZ,EAAAM,EAAA,CAAAd,SACuB,mBAAbA,EACNA,EAAS,CAAEI,cAAAA,EAAeL,UAAAA,IAE1BS,EAACU,EAASd,EAAAA,EAAAA,EAAAA,GAAAA,GAAmBL,GAA7B,GAAA,CAAAC,SACGA,aAQf,CACEqB,YAvDmB,MAwDnBC,MAAQ3B,GACkB,UAAjBA,EAAMiB,OAAqBW,EAAQC"}
+{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\nimport type { TabProps } from './types'\n\nconst COMPONENT_NAME = 'Tab'\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 [TabProps](https://github.com/foxford/ui/blob/master/src/components/Tab/types.ts)\n */\nconst Tab: React.ForwardRefExoticComponent<TabProps> = withMergedProps<TabProps, HTMLButtonElement>(\n  forwardRef((props, ref) => {\n    const { size = 'm', type = 'button', textProps = {}, children, theme, ...restProps } = props\n\n    const baseTextProps: TextProps = { as: 'span', size: 'inherit', color: 'inherit', weight: 'inherit' }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        size={size}\n        tabTheme={theme}\n        type={restProps.as === undefined ? type : undefined}\n        ref={ref}\n      >\n        {restProps.preset === 'brand' ? (\n          <>\n            {restProps.left && <Styled.Edge />}\n            <Styled.Content>\n              {typeof children === 'function' ? (\n                children({ baseTextProps, textProps })\n              ) : (\n                <Text {...baseTextProps} {...textProps}>\n                  {children}\n                </Text>\n              )}\n            </Styled.Content>\n            {restProps.right && <Styled.Edge after />}\n          </>\n        ) : (\n          <>\n            {typeof children === 'function' ? (\n              children({ baseTextProps, textProps })\n            ) : (\n              <Text {...baseTextProps} {...textProps}>\n                {children}\n              </Text>\n            )}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: (props) => {\n      return props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n    },\n  }\n)\n\nexport { Tab, COMPONENT_NAME }\n"],"names":["Tab","withMergedProps","forwardRef","props","ref","size","type","textProps","children","theme","restProps","baseTextProps","as","color","weight","_jsx","Styled","tabTheme","undefined","preset","_jsxs","_Fragment","left","jsx","Text","right","after","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"oTAqBMA,MAAAA,IAAiDC,gBAAAA,gBACrDC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KAAEA,EAAO,IAAGC,KAAEA,EAAO,SAAQC,UAAEA,EAAY,CAAE,EAAAC,SAAEA,EAAQC,MAAEA,KAAUC,GAAcP,EAEvF,MAAMQ,EAA2B,CAAEC,GAAI,OAAQP,KAAM,UAAWQ,MAAO,UAAWC,OAAQ,WAE1F,OACEC,WAAAA,IAACC,MAAAA,KAAW,IACNN,EACJL,KAAMA,EACNY,SAAUR,EACVH,KAAMI,EAAUE,UAAOM,EAAYZ,OAAOY,EAC1Cd,IAAKA,EAAII,SAERE,EAAUS,SAAW,QACpBC,WAAAA,KAAAC,WAAAA,SAAA,CAAAb,UACGE,EAAUY,MAAQP,WAAAA,IAACC,MAAAA,MAAa,GACjCD,WAAAQ,IAACP,cAAc,CAAAR,gBACLA,GAAa,WACnBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,WAAAQ,IAACC,UAAI,IAAKb,KAAmBJ,EAASC,SACnCA,MAINE,EAAUe,OAASV,WAAAA,IAACC,MAAAA,KAAW,CAACU,OAAK,OAGxCX,WAAAQ,IAAAF,oBAAA,CAAAb,gBACUA,GAAa,WACnBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,WAAAQ,IAACC,UAAI,IAAKb,KAAmBJ,EAASC,SACnCA,OAKG,IAGlB,CACEmB,YAvDmB,MAwDnBC,MAAQzB,GACCA,EAAMgB,SAAW,QAAUU,UAAAA,MAAQC,iBAAAA,uCAzDzB"}

package/components/Tab/Tab.mjs

@@ -0,0 +1,2 @@
+import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES}from'./constants.mjs';import{SIZES_DEFAULT}from'./default-constants.mjs';import{Root,Edge,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='Tab';const Tab=withMergedProps(forwardRef(((e,t)=>{const{size:r="m",type:s="button",textProps:o={},children:i,theme:n,...m}=e;const a={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return jsx(Root,{...m,size:r,tabTheme:n,type:m.as===void 0?s:void 0,ref:t,children:m.preset==='brand'?jsxs(Fragment,{children:[m.left&&jsx(Edge,{}),jsx(Content,{children:typeof i=='function'?i({baseTextProps:a,textProps:o}):jsx(Text,{...a,...o,children:i})}),m.right&&jsx(Edge,{after:!0})]}):jsx(Fragment,{children:typeof i=='function'?i({baseTextProps:a,textProps:o}):jsx(Text,{...a,...o,children:i})})})})),{displayName:"Tab",sizes:e=>e.preset==='brand'?SIZES:SIZES_DEFAULT});export{COMPONENT_NAME,Tab};
+//# sourceMappingURL=Tab.mjs.map

package/components/Tab/Tab.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.mjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\nimport type { TabProps } from './types'\n\nconst COMPONENT_NAME = 'Tab'\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 [TabProps](https://github.com/foxford/ui/blob/master/src/components/Tab/types.ts)\n */\nconst Tab: React.ForwardRefExoticComponent<TabProps> = withMergedProps<TabProps, HTMLButtonElement>(\n  forwardRef((props, ref) => {\n    const { size = 'm', type = 'button', textProps = {}, children, theme, ...restProps } = props\n\n    const baseTextProps: TextProps = { as: 'span', size: 'inherit', color: 'inherit', weight: 'inherit' }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        size={size}\n        tabTheme={theme}\n        type={restProps.as === undefined ? type : undefined}\n        ref={ref}\n      >\n        {restProps.preset === 'brand' ? (\n          <>\n            {restProps.left && <Styled.Edge />}\n            <Styled.Content>\n              {typeof children === 'function' ? (\n                children({ baseTextProps, textProps })\n              ) : (\n                <Text {...baseTextProps} {...textProps}>\n                  {children}\n                </Text>\n              )}\n            </Styled.Content>\n            {restProps.right && <Styled.Edge after />}\n          </>\n        ) : (\n          <>\n            {typeof children === 'function' ? (\n              children({ baseTextProps, textProps })\n            ) : (\n              <Text {...baseTextProps} {...textProps}>\n                {children}\n              </Text>\n            )}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: (props) => {\n      return props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n    },\n  }\n)\n\nexport { Tab, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tab","withMergedProps","forwardRef","props","ref","size","type","textProps","children","theme","restProps","baseTextProps","as","color","weight","_jsx","Styled","tabTheme","undefined","preset","_jsxs","_Fragment","left","Text","right","after","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"+SASMA,MAAAA,eAAiB,MAYjBC,MAAAA,IAAiDC,gBACrDC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KAAEA,EAAO,IAAGC,KAAEA,EAAO,SAAQC,UAAEA,EAAY,CAAE,EAAAC,SAAEA,EAAQC,MAAEA,KAAUC,GAAcP,EAEvF,MAAMQ,EAA2B,CAAEC,GAAI,OAAQP,KAAM,UAAWQ,MAAO,UAAWC,OAAQ,WAE1F,OACEC,IAACC,KAAW,IACNN,EACJL,KAAMA,EACNY,SAAUR,EACVH,KAAMI,EAAUE,UAAOM,EAAYZ,OAAOY,EAC1Cd,IAAKA,EAAII,SAERE,EAAUS,SAAW,QACpBC,KAAAC,SAAA,CAAAb,UACGE,EAAUY,MAAQP,IAACC,MAAa,GACjCD,IAACC,QAAc,CAAAR,gBACLA,GAAa,WACnBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,IAACQ,KAAI,IAAKZ,KAAmBJ,EAASC,SACnCA,MAINE,EAAUc,OAAST,IAACC,KAAW,CAACS,OAAK,OAGxCV,IAAAM,SAAA,CAAAb,gBACUA,GAAa,WACnBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,IAACQ,KAAI,IAAKZ,KAAmBJ,EAASC,SACnCA,OAKG,IAGlB,CACEkB,YAvDmB,MAwDnBC,MAAQxB,GACCA,EAAMgB,SAAW,QAAUS,MAAQC"}

package/components/Tab/constants.js

@@ -1,2 +1,2 @@
-var e={xxxl:{height:60,fontSize:20},xxl:{height:56,fontSize:20},xl:{height:52,fontSize:18},l:{height:48,fontSize:18},m:{height:44,fontSize:16},s:{height:40,fontSize:16},xs:{height:36,fontSize:14},xxs:{height:32,fontSize:14},xxxs:{height:28,fontSize:12}};export{e as SIZES};
+'use strict';exports.SIZES={xxxl:{height:60,fontSize:20},xxl:{height:56,fontSize:20},xl:{height:52,fontSize:18},l:{height:48,fontSize:18},m:{height:44,fontSize:16},s:{height:40,fontSize:16},xs:{height:36,fontSize:14},xxs:{height:32,fontSize:14},xxxs:{height:28,fontSize:12}};
 //# sourceMappingURL=constants.js.map

package/components/Tab/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/Tab/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n  xxxl: {\n    height: 60,\n    fontSize: 20,\n  },\n  xxl: {\n    height: 56,\n    fontSize: 20,\n  },\n  xl: {\n    height: 52,\n    fontSize: 18,\n  },\n  l: {\n    height: 48,\n    fontSize: 18,\n  },\n  m: {\n    height: 44,\n    fontSize: 16,\n  },\n  s: {\n    height: 40,\n    fontSize: 16,\n  },\n  xs: {\n    height: 36,\n    fontSize: 14,\n  },\n  xxs: {\n    height: 32,\n    fontSize: 14,\n  },\n  xxxs: {\n    height: 28,\n    fontSize: 12,\n  },\n}\n"],"names":["SIZES","xxxl","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,OAAQ,GACRC,SAAU,IAEZC,IAAK,CACHF,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFH,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDJ,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDL,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDN,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFP,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHR,OAAQ,GACRC,SAAU,IAEZQ,KAAM,CACJT,OAAQ,GACRC,SAAU"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/Tab/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n  xxxl: {\n    height: 60,\n    fontSize: 20,\n  },\n  xxl: {\n    height: 56,\n    fontSize: 20,\n  },\n  xl: {\n    height: 52,\n    fontSize: 18,\n  },\n  l: {\n    height: 48,\n    fontSize: 18,\n  },\n  m: {\n    height: 44,\n    fontSize: 16,\n  },\n  s: {\n    height: 40,\n    fontSize: 16,\n  },\n  xs: {\n    height: 36,\n    fontSize: 14,\n  },\n  xxs: {\n    height: 32,\n    fontSize: 14,\n  },\n  xxxs: {\n    height: 28,\n    fontSize: 12,\n  },\n}\n"],"names":["xxxl","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"2BAE4B,CAC1BA,KAAM,CACJC,OAAQ,GACRC,SAAU,IAEZC,IAAK,CACHF,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFH,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDJ,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDL,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDN,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFP,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHR,OAAQ,GACRC,SAAU,IAEZQ,KAAM,CACJT,OAAQ,GACRC,SAAU"}

package/components/Tab/constants.mjs

@@ -0,0 +1,2 @@
+const SIZES={xxxl:{height:60,fontSize:20},xxl:{height:56,fontSize:20},xl:{height:52,fontSize:18},l:{height:48,fontSize:18},m:{height:44,fontSize:16},s:{height:40,fontSize:16},xs:{height:36,fontSize:14},xxs:{height:32,fontSize:14},xxxs:{height:28,fontSize:12}};export{SIZES};
+//# sourceMappingURL=constants.mjs.map

package/components/Tab/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../../../src/components/Tab/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n  xxxl: {\n    height: 60,\n    fontSize: 20,\n  },\n  xxl: {\n    height: 56,\n    fontSize: 20,\n  },\n  xl: {\n    height: 52,\n    fontSize: 18,\n  },\n  l: {\n    height: 48,\n    fontSize: 18,\n  },\n  m: {\n    height: 44,\n    fontSize: 16,\n  },\n  s: {\n    height: 40,\n    fontSize: 16,\n  },\n  xs: {\n    height: 36,\n    fontSize: 14,\n  },\n  xxs: {\n    height: 32,\n    fontSize: 14,\n  },\n  xxxs: {\n    height: 28,\n    fontSize: 12,\n  },\n}\n"],"names":["SIZES","xxxl","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,MAAMA,MAAe,CAC1BC,KAAM,CACJC,OAAQ,GACRC,SAAU,IAEZC,IAAK,CACHF,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFH,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDJ,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDL,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDN,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFP,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHR,OAAQ,GACRC,SAAU,IAEZQ,KAAM,CACJT,OAAQ,GACRC,SAAU"}

package/components/Tab/default-constants.js

@@ -1,2 +1,2 @@
-var x={xxxl:{},xxl:{},xl:{},l:{},m:{},s:{},xs:{},xxs:{},xxxs:{}};export{x as SIZES_DEFAULT};
+'use strict';exports.SIZES_DEFAULT={xxxl:{},xxl:{},xl:{},l:{},m:{},s:{},xs:{},xxs:{},xxxs:{}};
 //# sourceMappingURL=default-constants.js.map

package/components/Tab/default-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-constants.js","sources":["../../../../src/components/Tab/default-constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES_DEFAULT: Sizes = {\n  xxxl: {},\n  xxl: {},\n  xl: {},\n  l: {},\n  m: {},\n  s: {},\n  xs: {},\n  xxs: {},\n  xxxs: {},\n}\n"],"names":["SIZES_DEFAULT","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAuB,CAClCC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,GACLC,KAAM"}
+{"version":3,"file":"default-constants.js","sources":["../../../../src/components/Tab/default-constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES_DEFAULT: Sizes = {\n  xxxl: {},\n  xxl: {},\n  xl: {},\n  l: {},\n  m: {},\n  s: {},\n  xs: {},\n  xxs: {},\n  xxxs: {},\n}\n"],"names":["xxxl","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"mCAEoC,CAClCA,KAAM,CAAE,EACRC,IAAK,CAAE,EACPC,GAAI,CAAE,EACNC,EAAG,CAAE,EACLC,EAAG,CAAE,EACLC,EAAG,CAAE,EACLC,GAAI,CAAE,EACNC,IAAK,CAAE,EACPC,KAAM,CAAC"}

package/components/Tab/default-constants.mjs

@@ -0,0 +1,2 @@
+const SIZES_DEFAULT={xxxl:{},xxl:{},xl:{},l:{},m:{},s:{},xs:{},xxs:{},xxxs:{}};export{SIZES_DEFAULT};
+//# sourceMappingURL=default-constants.mjs.map

package/components/Tab/default-constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-constants.mjs","sources":["../../../../src/components/Tab/default-constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES_DEFAULT: Sizes = {\n  xxxl: {},\n  xxl: {},\n  xl: {},\n  l: {},\n  m: {},\n  s: {},\n  xs: {},\n  xxs: {},\n  xxxs: {},\n}\n"],"names":["SIZES_DEFAULT","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,MAAMA,cAAuB,CAClCC,KAAM,CAAE,EACRC,IAAK,CAAE,EACPC,GAAI,CAAE,EACNC,EAAG,CAAE,EACLC,EAAG,CAAE,EACLC,EAAG,CAAE,EACLC,GAAI,CAAE,EACNC,IAAK,CAAE,EACPC,KAAM,CAAC"}

package/components/Tab/images/arrow.svg.js

@@ -0,0 +1,2 @@
+'use strict';function _interopNamespace(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((r=>{if(r!=='default'){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,'__esModule',{value:!0});var React__namespace=_interopNamespace(require('react'));var _path;function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}exports.default=e=>React__namespace.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",fill:"none",preserveAspectRatio:"none",viewBox:"0 0 21 48"},e),_path||(_path=React__namespace.createElement("path",{fill:"currentcolor",d:"M22 0h-3L1 24l18 24h3"})));
+//# sourceMappingURL=arrow.svg.js.map

package/components/Tab/images/arrow.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.svg.js","sources":["../../../../../src/components/Tab/images/arrow.svg?module"],"sourcesContent":["var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgArrow = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  preserveAspectRatio: \"none\",\n  viewBox: \"0 0 21 48\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"currentcolor\",\n  d: \"M22 0h-3L1 24l18 24h3\"\n})));\nexport default SvgArrow;"],"names":["_path","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","props","React","createElement","xmlns","fill","preserveAspectRatio","viewBox","d"],"mappings":"qZAAA,IAAIA,MACJ,SAASC,WAAa,OAAOA,SAAWC,OAAOC,OAASD,OAAOC,OAAOC,OAAS,SAAUC,GAAK,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAAIF,UAAUD,GAAI,IAAK,IAAII,KAAKD,GAAG,CAAG,GAAEE,eAAeC,KAAKH,EAAGC,KAAOL,EAAEK,GAAKD,EAAEC,IAAO,OAAOL,CAAE,EAAIJ,SAASY,MAAM,KAAMN,UAAa,iBAEnQO,GAAsBC,iBAAMC,cAAc,MAAOf,SAAS,CACzEgB,MAAO,6BACPC,KAAM,OACNC,oBAAqB,OACrBC,QAAS,aACRN,GAAQd,QAAUA,MAAqBe,iBAAMC,cAAc,OAAQ,CACpEE,KAAM,eACNG,EAAG"}

package/components/Tab/images/arrow.svg.mjs

@@ -0,0 +1,2 @@
+import*as React from'react';var _path;function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}const SvgArrow=e=>React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",fill:"none",preserveAspectRatio:"none",viewBox:"0 0 21 48"},e),_path||(_path=React.createElement("path",{fill:"currentcolor",d:"M22 0h-3L1 24l18 24h3"})));export{SvgArrow as default};
+//# sourceMappingURL=arrow.svg.mjs.map

package/components/Tab/images/arrow.svg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.svg.mjs","sources":["../../../../../src/components/Tab/images/arrow.svg?module"],"sourcesContent":["var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgArrow = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  preserveAspectRatio: \"none\",\n  viewBox: \"0 0 21 48\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"currentcolor\",\n  d: \"M22 0h-3L1 24l18 24h3\"\n})));\nexport default SvgArrow;"],"names":["_path","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","SvgArrow","props","React","createElement","xmlns","fill","preserveAspectRatio","viewBox","d"],"mappings":"4BAAA,IAAIA,MACJ,SAASC,WAAa,OAAOA,SAAWC,OAAOC,OAASD,OAAOC,OAAOC,OAAS,SAAUC,GAAK,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAAIF,UAAUD,GAAI,IAAK,IAAII,KAAKD,GAAG,CAAG,GAAEE,eAAeC,KAAKH,EAAGC,KAAOL,EAAEK,GAAKD,EAAEC,IAAO,OAAOL,CAAE,EAAIJ,SAASY,MAAM,KAAMN,UAAa,CAE/Q,MAACO,SAAWC,GAAsBC,MAAMC,cAAc,MAAOhB,SAAS,CACzEiB,MAAO,6BACPC,KAAM,OACNC,oBAAqB,OACrBC,QAAS,aACRN,GAAQf,QAAUA,MAAqBgB,MAAMC,cAAc,OAAQ,CACpEE,KAAM,eACNG,EAAG"}

package/components/Tab/style.js

@@ -1,2 +1,2 @@
-import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{getColor as t}from'../../mixins/color.js';import{responsiveSize as c}from'../../mixins/responsive-size.js';import{responsiveMargin as a}from'../../mixins/responsive-margin.js';import{focus as l}from'../../mixins/focus.js';import{createShouldForwardProp as i}from'../../shared/utils/style.js';import m from'./images/arrow.module.svg.js';var s=i((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));var d={default:e(["",""],(o=>"\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    "))),compact:e(["",""],(o=>"\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    "))),crispyCompact:e(["",""],(o=>"\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    "))),crispy:e(["",""],(o=>"\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    ")))};var b=r.span.withConfig({componentId:"fox-ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);var p=r(m).withConfig({shouldForwardProp:()=>!1}).withConfig({componentId:"fox-ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));var g=o=>"\n  & > ".concat(b," {\n    color: ").concat(o.color,";\n    background-color: ").concat(o.backgroundColor,";\n    border-color: ").concat(o.borderColor,";\n  }\n  & > ").concat(p," {\n    color: ").concat(o.backgroundColor,";\n    stroke: ").concat(o.borderColor,";\n  }\n  &:hover > ").concat(b," {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n    border-color: ").concat(o.borderColorHover,";\n  }\n  &:hover > ").concat(p," {\n    color: ").concat(o.backgroundColorHover,";\n    stroke: ").concat(o.borderColorHover,";\n  }\n  &:disabled > ").concat(b," {\n    color: ").concat(o.colorDisabled,";\n    background-color: ").concat(o.backgroundColorDisabled,";\n    border-color: ").concat(o.borderColorDisabled,";\n  }\n  &:disabled > ").concat(p," {\n    color: ").concat(o.backgroundColorDisabled,";\n    stroke: ").concat(o.borderColorDisabled,";\n  }\n");var h={default:{default:e(["",""],(r=>g(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette)))),outline:e(["",""],(r=>g(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-primary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette))))},onColored:{default:e(["",""],(r=>g(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette)))),outline:e(["",""],(r=>g(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:r.theme.colors['bg-brand-primary-500'],borderColor:r.theme.colors['bg-onmain-primary'],colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:r.theme.colors['bg-onmain-primary'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette))))},black:{default:e(["",""],(r=>g(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors['bg-onmain-tertiary'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-contrast']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-onmain-contrast']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette)))),outline:e(["",""],(r=>g(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors['bg-onmain-primary'],borderColor:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-contrast']:n(r.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-onmain-contrast']:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette))))}};var y=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:'string'==typeof o?o:"".concat(o).concat(r)})}).withConfig({componentId:"fox-ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{var r=o.rounded?8:0;var e=o.left?0:r;var n=o.right?0:r;return"\n      box-sizing: border-box;\n      display: ".concat('brand'===o.preset?'inline-flex':'inline-block',";\n      cursor: ").concat(o.disabled?'not-allowed':'pointer',";\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ").concat(b,", \n      & > ").concat(p," {\n        transition-duration: 250ms;\n      }\n      & > ").concat(b," {\n        border-radius: ").concat(e,"px ").concat(n,"px ").concat(n,"px ").concat(e,"px;\n        border-left-style: ").concat(o.left?'none':'solid',";\n        border-right-style: ").concat(o.right?'none':'solid',";\n        margin-left: ").concat(o.left?-2:0,"px;\n        margin-right: ").concat(o.right?-2:0,"px;\n      }\n    ")}),(o=>{if('brand'===o.preset){var r=h.default;return o.black&&(r=h.black),o.onColored&&(r=h.onColored),o.outline?r.outline:r.default}return o.compact||'compact'===o.tabTheme?d.compact:o.crispyCompact||'crispyCompact'===o.tabTheme?d.crispyCompact:o.crispy||'crispy'===o.tabTheme?d.crispy:d.default}),l,c,a,(o=>o.color&&"color: ".concat(t(o.color,o),";")),(o=>o.borderColor&&"border-color: ".concat(t(o.borderColor,o),";")));export{b as Content,p as Edge,y as Root};
+'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardTabProp=style.createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:styled.css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `)),compact:styled.css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `)),crispyCompact:styled.css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `)),crispy:styled.css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `))};const Content=styled__default.default.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled__default.default(arrow.default).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n  & > ${Content} {\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${Edge} {\n    color: ${o.backgroundColor};\n    stroke: ${o.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${o.backgroundColorHover};\n    stroke: ${o.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${o.backgroundColorDisabled};\n    stroke: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor.default(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${e}px ${t}px ${t}px ${e}px;\n        border-left-style: ${o.left?'none':'solid'};\n        border-right-style: ${o.right?'none':'solid'};\n        margin-left: ${o.left?-2:0}px;\n        margin-right: ${o.right?-2:0}px;\n      }\n    `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.color&&`color: ${color.getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${color.getColor(o.borderColor,o)};`));exports.Content=Content,exports.Edge=Edge,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Tab/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.module.svg'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'active',\n      'compact',\n      'crispy',\n      'crispyCompact',\n      'tabTheme',\n      'left',\n      'right',\n      'rounded',\n      'outline',\n      'onColored',\n      'black',\n    ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n  default: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `}\n  `,\n  compact: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `}\n  `,\n  crispyCompact: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `}\n  `,\n  crispy: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `}\n  `,\n}\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 0;\n  height: 100%;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n  shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: 100%;\n  transition-property: color, stroke;\n  ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n  & > ${Content} {\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    border-color: ${palette.borderColor};\n  }\n  & > ${Edge} {\n    color: ${palette.backgroundColor};\n    stroke: ${palette.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${palette.backgroundColorHover};\n    stroke: ${palette.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${palette.colorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${palette.backgroundColorDisabled};\n    stroke: ${palette.borderColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-tertiary'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-primary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['border-onmain-default-large'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['border-onmain-default-large'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n  onColored: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n          colorHover: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n          borderColorDisabled: props.theme.colors['bg-disabled-small'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : props.theme.colors['bg-brand-primary-500'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          colorHover: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n          borderColorHover: props.theme.colors['bg-onmain-primary'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n          borderColorDisabled: props.theme.colors['bg-disabled-small'],\n          ...props.palette,\n        })}\n    `,\n  },\n  black: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-tertiary'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-primary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['border-onmain-default-large'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['border-onmain-default-large'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.button\n  .withConfig<StyledTabProps>({\n    shouldForwardProp: shouldForwardTabProp,\n  })\n  .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, sizeUnits) => {\n      return {\n        height: '2.8em',\n        fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n      }\n    },\n  })`\n  ${(props) => {\n    const radius = props.rounded ? 8 : 0\n    const leftRadius = props.left ? 0 : radius\n    const rightRadius = props.right ? 0 : radius\n\n    return `\n      box-sizing: border-box;\n      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n        border-left-style: ${props.left ? 'none' : 'solid'};\n        border-right-style: ${props.right ? 'none' : 'solid'};\n        margin-left: ${props.left ? -2 : 0}px;\n        margin-right: ${props.right ? -2 : 0}px;\n      }\n    `\n  }}\n\n  ${(props) => {\n    if (props.preset === 'brand') {\n      let schema = COLOR_SCHEMA.default\n\n      if (props.black) schema = COLOR_SCHEMA.black\n      if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n      return props.outline ? schema.outline : schema.default\n    }\n\n    if (props.compact || props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n    if (props.crispyCompact || props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n    if (props.crispy || props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n    return DEFAULT_STYLES.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n  ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","concat","compact","crispyCompact","crispy","Content","styled","span","withConfig","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","_objectSpread","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"gdAWA,IAAMA,EAAuBC,GAC1BC,IACE,CACC,SACA,UACA,SACA,gBACA,WACA,OACA,QACA,UACA,UACA,YACA,SACAC,SAASD,KAGf,IAAME,EAAiB,CACrBC,QAASC,EACJC,CAAAA,GAAAA,KAAAA,2GAIQA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,uDAC7CL,EAAMC,OAAS,eAAiB,cAL3D,uCAAAK,OAOWN,EAAME,MAAMC,OAAOC,QAGnBJ,iDAAAA,OAAAA,EAAME,MAAMC,OAAOC,QAV9B,sHAkBJG,QAASR,EACJC,CAAAA,GAAAA,KAAAA,6GAIQA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,uDAC7CL,EAAMC,OAAS,eAAiB,cAL3D,uCAAAK,OAOWN,EAAME,MAAMC,OAAOC,QAGnBJ,iDAAAA,OAAAA,EAAME,MAAMC,OAAOC,QAV9B,sHAkBJI,cAAeT,EACVC,CAAAA,GAAAA,KAAAA,4IAKQA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,uDAC7CL,EAAMC,OAAS,eAAiB,cAN3D,uCAAAK,OAQWN,EAAME,MAAMC,OAAOC,QAGnBJ,iDAAAA,OAAAA,EAAME,MAAMC,OAAOC,QAX9B,sHAmBJK,OAAQV,EACHC,CAAAA,GAAAA,KAAAA,6IAKQA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,uDAC7CL,EAAMC,OAAS,eAAiB,cAN3D,uCAAAK,OAQWN,EAAME,MAAMC,OAAOC,gEAGnBJ,EAAME,MAAMC,OAAOC,QAZ5B,uHAsBKM,IAAAA,EAAUC,EAAOC,KAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAhB,CAAA,0NAcA,IAAMI,EAAOJ,EAAOK,GAAOH,WAAW,CAC3CI,kBAAmB,KAAA,IADJJ,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,oFAAA,KAOZX,GAAUA,EAAMkB,OAAS,+BAG9B,IAAMC,EAAYC,GAAD,WAAAd,OACTI,EACKU,mBAAAA,OAAAA,EAAQC,0CACGD,EAAQE,gBAHf,yBAAAhB,OAIGc,EAAQG,YAEpBR,kBAAAA,OAAAA,4BACKK,EAAQE,gBAPJ,mBAAAhB,OAQHc,EAAQG,YAERb,wBAAAA,OAAAA,4BACDU,EAAQI,WAXJ,6BAAAlB,OAYOc,EAAQK,qBACZL,yBAAAA,OAAAA,EAAQM,iBAbX,wBAAApB,OAeHS,EAfG,mBAAAT,OAgBJc,EAAQK,qBACPL,mBAAAA,OAAAA,EAAQM,iBAjBL,2BAAApB,OAmBAI,EAnBA,mBAAAJ,OAoBJc,EAAQO,cACGP,6BAAAA,OAAAA,EAAQQ,wBArBf,yBAAAtB,OAsBGc,EAAQS,oBAEXd,2BAAAA,OAAAA,EACJK,mBAAAA,OAAAA,EAAQQ,wBAzBJ,mBAAAtB,OA0BHc,EAAQS,oBA1BtB,YA8BA,IAAMC,EAAe,CACnBhC,QAAS,CACPA,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDmB,EAAQY,EAAA,CACNV,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnER,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnEP,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,sBACrCH,EAAMoB,YAGfe,QAASpC,EACJC,CAAAA,GAAAA,KAAAA,GACDmB,EAAQY,EAAA,CACNV,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,qBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,sBAAsB8B,OAAO,GAAGC,WAClER,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,sBACrCH,EAAMoB,aAIjBgB,UAAW,CACTtC,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDmB,EAAQY,EAAA,CACNV,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,IAAIH,WACvEX,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,qBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,IAAIH,WACvEV,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,GAAGH,WACtER,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,qBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,GAAGH,WACtEP,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,sBACrCH,EAAMoB,YAGfe,QAASpC,EACJC,CAAAA,GAAAA,KAAAA,GACDmB,EAAQY,EAAA,CACNV,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAO,wBACvBoB,YAAavB,EAAME,MAAMC,OAAO,qBAChCqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,yBAAyB8B,OAAO,GAAGC,WACrER,iBAAkB1B,EAAME,MAAMC,OAAO,qBACrCwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,sBACrCH,EAAMoB,aAIjBkB,MAAO,CACLxC,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDmB,EAAQY,EAAA,CACNV,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnER,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnEP,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,sBACrCH,EAAMoB,YAGfe,QAASpC,EACJC,CAAAA,GAAAA,KAAAA,GACDmB,EAAQY,EAAA,CACNV,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,qBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB6B,EAAUhC,EAAME,MAAMC,OAAO,sBAAsB8B,OAAO,GAAGC,WAClER,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,sBACrCH,EAAMoB,cAMZ,IAAMmB,EAAO5B,EAAO6B,OACxB3B,WAA2B,CAC1BI,kBAAmBxB,IAEpBgD,MAAgE,CAC/DC,uBAAwB,CAACC,EAAMC,KAAAA,CAE3BC,OAAQ,QACRC,SAA0B,iBAATH,EAAoBA,EAA3B,GAAArC,OAAqCqC,GAArCrC,OAA4CsC,OAR7C/B,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KAYZX,IACD,IAAM+C,EAAS/C,EAAMgD,QAAU,EAAI,EACnC,IAAMC,EAAajD,EAAMkD,KAAO,EAAIH,EACpC,IAAMI,EAAcnD,EAAMoD,MAAQ,EAAIL,EAEtC,MAAA,mDAAAzC,OAE8B,UAAjBN,EAAMqD,OAAqB,cAAgB,eAFxD,qBAAA/C,OAGYN,EAAMsD,SAAW,cAAgB,UASrC5C,mOAAAA,OAAAA,EACAK,kBAAAA,OAAAA,EAGAL,gEAAAA,OAAAA,EACauC,+BAAAA,OAAAA,EAAgBE,OAAAA,OAAAA,EAAiBA,OAAAA,OAAAA,gBAAiBF,EAjBvE,oCAAA3C,OAkByBN,EAAMkD,KAAO,OAAS,QAlB/C,mCAAA5C,OAmB0BN,EAAMoD,MAAQ,OAAS,QAC9BpD,4BAAAA,OAAAA,EAAMkD,MAAQ,EAAI,EApBrC,+BAAA5C,OAqBoBN,EAAMoD,OAAS,EAAI,EArBvC,yBA0BCpD,IACD,GAAqB,UAAjBA,EAAMqD,OAAoB,CAC5B,IAAIE,EAASzB,EAAahC,QAK1B,OAHIE,EAAMsC,QAAOiB,EAASzB,EAAaQ,OACnCtC,EAAMoC,YAAWmB,EAASzB,EAAaM,WAEpCpC,EAAMmC,QAAUoB,EAAOpB,QAAUoB,EAAOzD,QAGjD,OAAIE,EAAMO,SAA8B,YAAnBP,EAAMwD,SAA+B3D,EAAeU,QACrEP,EAAMQ,eAAoC,kBAAnBR,EAAMwD,SAAqC3D,EAAeW,cACjFR,EAAMS,QAA6B,WAAnBT,EAAMwD,SAA8B3D,EAAeY,OAEhEZ,EAAeC,UAGtB2D,EACAC,EACAC,GAEC3D,GAAUA,EAAMqB,OAAN,UAAAf,OAAyBsD,EAAS5D,EAAMqB,MAAOrB,UACzDA,GAAUA,EAAMuB,aAAN,iBAAAjB,OAAsCsD,EAAS5D,EAAMuB,YAAavB"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.svg?module'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'active',\n      'compact',\n      'crispy',\n      'crispyCompact',\n      'tabTheme',\n      'left',\n      'right',\n      'rounded',\n      'outline',\n      'onColored',\n      'black',\n    ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n  default: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `}\n  `,\n  compact: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `}\n  `,\n  crispyCompact: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `}\n  `,\n  crispy: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `}\n  `,\n}\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 0;\n  height: 100%;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n  shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: 100%;\n  transition-property: color, stroke;\n  ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n  & > ${Content} {\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    border-color: ${palette.borderColor};\n  }\n  & > ${Edge} {\n    color: ${palette.backgroundColor};\n    stroke: ${palette.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${palette.backgroundColorHover};\n    stroke: ${palette.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${palette.colorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${palette.backgroundColorDisabled};\n    stroke: ${palette.borderColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-tertiary'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-primary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['border-onmain-default-large'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['border-onmain-default-large'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n  onColored: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n          colorHover: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n          borderColorDisabled: props.theme.colors['bg-disabled-small'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : props.theme.colors['bg-brand-primary-500'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          colorHover: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n          borderColorHover: props.theme.colors['bg-onmain-primary'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n          borderColorDisabled: props.theme.colors['bg-disabled-small'],\n          ...props.palette,\n        })}\n    `,\n  },\n  black: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-tertiary'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-primary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['border-onmain-default-large'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['border-onmain-default-large'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.button\n  .withConfig<StyledTabProps>({\n    shouldForwardProp: shouldForwardTabProp,\n  })\n  .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, sizeUnits) => {\n      return {\n        height: '2.8em',\n        fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n      }\n    },\n  })`\n  ${(props) => {\n    const radius = props.rounded ? 8 : 0\n    const leftRadius = props.left ? 0 : radius\n    const rightRadius = props.right ? 0 : radius\n\n    return `\n      box-sizing: border-box;\n      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n        border-left-style: ${props.left ? 'none' : 'solid'};\n        border-right-style: ${props.right ? 'none' : 'solid'};\n        margin-left: ${props.left ? -2 : 0}px;\n        margin-right: ${props.right ? -2 : 0}px;\n      }\n    `\n  }}\n\n  ${(props) => {\n    if (props.preset === 'brand') {\n      let schema = COLOR_SCHEMA.default\n\n      if (props.black) schema = COLOR_SCHEMA.black\n      if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n      return props.outline ? schema.outline : schema.default\n    }\n\n    if (props.compact || props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n    if (props.crispyCompact || props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n    if (props.crispy || props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n    return DEFAULT_STYLES.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n  ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","compact","crispyCompact","crispy","Content","styled","span","withConfig","displayName","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}

package/components/Tab/style.mjs

@@ -0,0 +1,2 @@
+import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{getColor}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import SvgArrow from'./images/arrow.svg.mjs';const shouldForwardTabProp=createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `)),compact:css(["",""],(o=>`\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `)),crispyCompact:css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `)),crispy:css(["",""],(o=>`\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n      border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n      &:hover {\n        color: ${o.theme.colors.primary};\n      }\n      &.active {\n        color: ${o.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `))};const Content=styled.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled(SvgArrow).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n  & > ${Content} {\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    border-color: ${o.borderColor};\n  }\n  & > ${Edge} {\n    color: ${o.backgroundColor};\n    stroke: ${o.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${o.backgroundColorHover};\n    stroke: ${o.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${o.backgroundColorDisabled};\n    stroke: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${e}px ${t}px ${t}px ${e}px;\n        border-left-style: ${o.left?'none':'solid'};\n        border-right-style: ${o.right?'none':'solid'};\n        margin-left: ${o.left?-2:0}px;\n        margin-right: ${o.right?-2:0}px;\n      }\n    `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus,responsiveSize,responsiveMargin,(o=>o.color&&`color: ${getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${getColor(o.borderColor,o)};`));export{Content,Edge,Root};
+//# sourceMappingURL=style.mjs.map

package/components/Tab/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { StyledTabProps, StyledTabEdgeProps, TabPalette } from './types'\nimport Arrow from './images/arrow.svg?module'\n\nconst shouldForwardTabProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'active',\n      'compact',\n      'crispy',\n      'crispyCompact',\n      'tabTheme',\n      'left',\n      'right',\n      'rounded',\n      'outline',\n      'onColored',\n      'black',\n    ].includes(propKey)\n)\n\nconst DEFAULT_STYLES = {\n  default: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    `}\n  `,\n  compact: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    `}\n  `,\n  crispyCompact: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    `}\n  `,\n  crispy: css<StyledTabProps>`\n    ${(props) => `\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ${props.active ? props.theme.colors.primary : props.theme.colors.mineShaft};\n      border-bottom: 2px solid ${props.active ? 'currentcolor' : 'transparent'};\n      &:hover {\n        color: ${props.theme.colors.primary};\n      }\n      &.active {\n        color: ${props.theme.colors.primary};\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    `}\n  `,\n}\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  flex-shrink: 0;\n  height: 100%;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition-property: background-color, border-color;\n`\n\nexport const Edge = styled(Arrow).withConfig({\n  shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n  box-sizing: border-box;\n  flex-shrink: 0;\n  height: 100%;\n  transition-property: color, stroke;\n  ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\n  & > ${Content} {\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    border-color: ${palette.borderColor};\n  }\n  & > ${Edge} {\n    color: ${palette.backgroundColor};\n    stroke: ${palette.borderColor};\n  }\n  &:hover > ${Content} {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  }\n  &:hover > ${Edge} {\n    color: ${palette.backgroundColorHover};\n    stroke: ${palette.borderColorHover};\n  }\n  &:disabled > ${Content} {\n    color: ${palette.colorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled > ${Edge} {\n    color: ${palette.backgroundColorDisabled};\n    stroke: ${palette.borderColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-tertiary'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['bg-onmain-primary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['border-onmain-default-large'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-brand-primary-500']\n            : props.theme.colors['border-onmain-default-large'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n  onColored: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(10).toString() as CSSColor),\n          colorHover: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n          borderColorDisabled: props.theme.colors['bg-disabled-small'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : props.theme.colors['bg-brand-primary-500'],\n          borderColor: props.theme.colors['bg-onmain-primary'],\n          colorHover: props.active\n            ? props.theme.colors['content-brand-primary']\n            : props.theme.colors['content-oncolor-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-primary']\n            : (tinycolor(props.theme.colors['bg-brand-primary-500']).darken(3).toString() as CSSColor),\n          borderColorHover: props.theme.colors['bg-onmain-primary'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n          borderColorDisabled: props.theme.colors['bg-disabled-small'],\n          ...props.palette,\n        })}\n    `,\n  },\n  black: {\n    default: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-tertiary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-tertiary'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor),\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n    outline: css<StyledTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['bg-onmain-primary'],\n          borderColor: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['border-onmain-default-large'],\n          colorHover: props.active\n            ? props.theme.colors['content-oncolor-primary']\n            : props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(6).toString() as CSSColor),\n          borderColorHover: props.active\n            ? props.theme.colors['bg-onmain-contrast']\n            : props.theme.colors['border-onmain-default-large'],\n          colorDisabled: props.theme.colors['content-disabled'],\n          backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n          borderColorDisabled: props.theme.colors['bg-disabled-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.button\n  .withConfig<StyledTabProps>({\n    shouldForwardProp: shouldForwardTabProp,\n  })\n  .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, sizeUnits) => {\n      return {\n        height: '2.8em',\n        fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n      }\n    },\n  })`\n  ${(props) => {\n    const radius = props.rounded ? 8 : 0\n    const leftRadius = props.left ? 0 : radius\n    const rightRadius = props.right ? 0 : radius\n\n    return `\n      box-sizing: border-box;\n      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      isolation: isolate;\n      flex-shrink: 0;\n      appearance: none;\n      padding: 0;\n      border: none;\n      background-color: transparent;\n      text-decoration: none;\n      width: max-content;\n      & > ${Content}, \n      & > ${Edge} {\n        transition-duration: 250ms;\n      }\n      & > ${Content} {\n        border-radius: ${leftRadius}px ${rightRadius}px ${rightRadius}px ${leftRadius}px;\n        border-left-style: ${props.left ? 'none' : 'solid'};\n        border-right-style: ${props.right ? 'none' : 'solid'};\n        margin-left: ${props.left ? -2 : 0}px;\n        margin-right: ${props.right ? -2 : 0}px;\n      }\n    `\n  }}\n\n  ${(props) => {\n    if (props.preset === 'brand') {\n      let schema = COLOR_SCHEMA.default\n\n      if (props.black) schema = COLOR_SCHEMA.black\n      if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n      return props.outline ? schema.outline : schema.default\n    }\n\n    if (props.compact || props.tabTheme === 'compact') return DEFAULT_STYLES.compact\n    if (props.crispyCompact || props.tabTheme === 'crispyCompact') return DEFAULT_STYLES.crispyCompact\n    if (props.crispy || props.tabTheme === 'crispy') return DEFAULT_STYLES.crispy\n\n    return DEFAULT_STYLES.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n  ${(props) => props.borderColor && `border-color: ${getColor(props.borderColor, props)};`}\n`\n"],"names":["shouldForwardTabProp","createShouldForwardProp","propKey","includes","DEFAULT_STYLES","default","css","props","active","theme","colors","primary","mineShaft","compact","crispyCompact","crispy","Content","styled","span","withConfig","displayName","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","tinycolor","darken","toString","outline","onColored","lighten","black","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","radius","rounded","leftRadius","left","rightRadius","right","preset","disabled","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"kdAWA,MAAMA,qBAAuBC,yBAC1BC,IACE,CACC,SACA,UACA,SACA,gBACA,WACA,OACA,QACA,UACA,UACA,YACA,SACAC,SAASD,KAGf,MAAME,eAAiB,CACrBC,QAASC,IACJC,CAAAA,GAAAA,KAAAA,GAAU,iGAIFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,4HAQlCE,QAASP,IACJC,CAAAA,GAAAA,KAAAA,GAAU,mGAIFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,4HAQlCG,cAAeR,IACVC,CAAAA,GAAAA,KAAAA,GAAU,kIAKFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,4HAQlCI,OAAQT,IACHC,CAAAA,GAAAA,KAAAA,GAAU,mIAKFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,mDAEhDD,EAAME,MAAMC,OAAOC,uDAGnBJ,EAAME,MAAMC,OAAOC,mIAUvBK,QAAUC,OAAOC,KAAIC,WAAA,CAAAC,YAAA,eAAAC,YAAA,mBAAXJ,CAYtB,CAAA,0NAEM,MAAMK,KAAOL,OAAOM,UAAOJ,WAAW,CAC3CK,kBAAmBA,KAAM,IACzBL,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAFkBJ,CAElB,CAAA,oFAAA,KAKGV,GAAUA,EAAMkB,OAAS,+BAG9B,MAAMC,SAAYC,GAAwB,WAClCX,yBACKW,EAAQC,iCACGD,EAAQE,uCACZF,EAAQG,4BAEpBR,sBACKK,EAAQE,iCACPF,EAAQG,kCAERd,yBACDW,EAAQI,sCACGJ,EAAQK,4CACZL,EAAQM,uCAEdX,sBACDK,EAAQK,sCACPL,EAAQM,0CAELjB,yBACJW,EAAQO,yCACGP,EAAQQ,+CACZR,EAAQS,6CAEXd,sBACJK,EAAQQ,yCACPR,EAAQS,8BAItB,MAAMC,aAAe,CACnBhC,QAAS,CACPA,QAASC,IAAG,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEN,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,YAGfc,QAASnC,IAAG,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,qBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,sBAAsB6B,OAAO,GAAGC,WAClEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,aAIjBe,UAAW,CACTrC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,IAAIH,WACvEV,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,qBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,IAAIH,WACvET,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,GAAGH,WACtEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,yBAAyBiC,QAAQ,GAAGH,WACtEN,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,YAGfc,QAASnC,IAAG,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAO,wBACvBoB,YAAavB,EAAME,MAAMC,OAAO,qBAChCqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,yBAAyB6B,OAAO,GAAGC,WACrEP,iBAAkB1B,EAAME,MAAMC,OAAO,qBACrCwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,aAIjBiB,MAAO,CACLvC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,uBAAuB6B,OAAO,GAAGC,WACnEN,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,YAGfc,QAASnC,IAAG,CAAA,GAAA,KACPC,GACDmB,SAAS,CACPE,MAAOrB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBmB,gBAAiBtB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,qBACvBoB,YAAavB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBqB,WAAYxB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBsB,qBAAsBzB,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB4B,UAAU/B,EAAME,MAAMC,OAAO,sBAAsB6B,OAAO,GAAGC,WAClEP,iBAAkB1B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBwB,cAAe3B,EAAME,MAAMC,OAAO,oBAClCyB,wBAAyB5B,EAAME,MAAMC,OAAO,qBAC5C0B,oBAAqB7B,EAAME,MAAMC,OAAO,wBACrCH,EAAMoB,cAMZ,MAAMkB,KAAO5B,OAAO6B,OACxB3B,WAA2B,CAC1BK,kBAAmBxB,uBAEpB+C,MAAgE,CAC/DC,uBAAwBA,CAACC,EAAMC,KACtB,CACLC,OAAQ,QACRC,gBAAiBH,GAAS,SAAWA,EAAO,GAAGA,IAAOC,QAG1D/B,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAXgBJ,CAWhB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACCV,IACD,MAAM8C,EAAS9C,EAAM+C,QAAU,EAAI,EACnC,MAAMC,EAAahD,EAAMiD,KAAO,EAAIH,EACpC,MAAMI,EAAclD,EAAMmD,MAAQ,EAAIL,EAEtC,MAAO,mDAEM9C,EAAMoD,SAAW,QAAU,cAAgB,kCAC5CpD,EAAMqD,SAAW,cAAgB,2OASrC5C,wBACAM,mEAGAN,qCACauC,OAAgBE,OAAiBA,OAAiBF,oCAC9ChD,EAAMiD,KAAO,OAAS,yCACrBjD,EAAMmD,MAAQ,OAAS,kCAC9BnD,EAAMiD,MAAQ,EAAI,+BACjBjD,EAAMmD,OAAS,EAAI,qBAEtC,IAGAnD,IACD,GAAIA,EAAMoD,SAAW,QAAS,CAC5B,IAAIE,EAASxB,aAAahC,QAK1B,OAHIE,EAAMqC,QAAOiB,EAASxB,aAAaO,OACnCrC,EAAMmC,YAAWmB,EAASxB,aAAaK,WAEpCnC,EAAMkC,QAAUoB,EAAOpB,QAAUoB,EAAOxD,OACjD,CAEA,OAAIE,EAAMM,SAAWN,EAAMuD,WAAa,UAAkB1D,eAAeS,QACrEN,EAAMO,eAAiBP,EAAMuD,WAAa,gBAAwB1D,eAAeU,cACjFP,EAAMQ,QAAUR,EAAMuD,WAAa,SAAiB1D,eAAeW,OAEhEX,eAAeC,OAAO,GAG7B0D,MACAC,eACAC,kBAEC1D,GAAUA,EAAMqB,OAAS,UAAUsC,SAAS3D,EAAMqB,MAAOrB,QACzDA,GAAUA,EAAMuB,aAAe,iBAAiBoC,SAAS3D,EAAMuB,YAAavB"}

package/components/Tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{Tab as r}from'../Tab/Tab.js';import{Root as o,Inner as a,Content as e}from'./style.js';import{jsx as s}from'react/jsx-runtime';function l(r){var{children:l,className:t,classNameInner:n,classNameContent:c,borderColor:d,color:m,noBorder:i,style:b,width:h}=r;return s(o,{className:t,style:b,width:h,borderColor:d,color:m,noBorder:i,children:s(a,{className:n,children:s(e,{noBorder:i,className:c,children:l})})})}l.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},l.Tab=r;export{l as Tabs};
+'use strict';var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Tab=require('../Tab/Tab.js');function Tabs(r){const{children:e,className:s,classNameInner:a,classNameContent:o,borderColor:l,color:t,noBorder:n,style:c,width:i}=r;return require$$0.jsx(style.Root,{className:s,style:c,width:i,borderColor:l,color:t,noBorder:n,children:require$$0.jsx(style.Inner,{className:a,children:require$$0.jsx(style.Content,{noBorder:n,className:o,children:e})})})}Tabs.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},Tabs.Tab=Tab.Tab,exports.Tabs=Tabs;
 //# sourceMappingURL=Tabs.js.map

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ResponsiveProperty } from 'mixins/responsive-property'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled.Root","Styled.Inner","Styled.Content","defaultProps","Tab"],"mappings":"sIAqCO,SAASA,EAAKC,GACnB,IAAMC,SAAEA,EAAFC,UAAYA,EAAZC,eAAuBA,EAAvBC,iBAAuCA,EAAvCC,YAAyDA,EAAzDC,MAAsEA,EAAtEC,SAA6EA,EAA7EC,MAAuFA,EAAvFC,MAA8FA,GAAUT,EAE9G,OACEU,EAACC,EAAD,CACET,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EANZN,SAQES,EAACE,EAAD,CAAcV,UAAWC,EAAzBF,SACES,EAACG,EAAD,CAAgBN,SAAUA,EAAUL,UAAWE,EAA/CH,SACGA,QA9BXF,EAAKe,aAAe,CAClBT,YAAa,OACbC,MAAO,0BAGTP,EAAKgB,IAAMA"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ResponsiveProperty } from 'mixins/responsive-property'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled","jsx","defaultProps","Tab"],"mappings":"0HAqCO,SAASA,KAAKC,GACnB,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,eAAEA,EAAcC,iBAAEA,EAAgBC,YAAEA,EAAWC,MAAEA,EAAKC,SAAEA,QAAUC,EAAKC,MAAEA,GAAUT,EAE9G,OACEU,WAAAA,IAACC,MAAAA,KAAW,CACVT,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EAASN,SAEnBS,WAAAE,IAACD,YAAY,CAACT,UAAWC,EAAeF,SACtCS,WAAAE,IAACD,cAAc,CAACJ,SAAUA,EAAUL,UAAWE,EAAiBH,SAC7DA,OAKX,CAnCAF,KAAKc,aAAe,CAClBR,YAAa,OACbC,MAAO,0BAGTP,KAAKe,IAAMA,IAAAA"}

package/components/Tabs/Tabs.mjs

@@ -0,0 +1,2 @@
+import{Root,Inner,Content}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{Tab}from'../Tab/Tab.mjs';function Tabs(o){const{children:r,className:e,classNameInner:s,classNameContent:a,borderColor:n,color:t,noBorder:l,style:c,width:m}=o;return jsx(Root,{className:e,style:c,width:m,borderColor:n,color:t,noBorder:l,children:jsx(Inner,{className:s,children:jsx(Content,{noBorder:l,className:a,children:r})})})}Tabs.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},Tabs.Tab=Tab;export{Tabs};
+//# sourceMappingURL=Tabs.mjs.map

package/components/Tabs/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ResponsiveProperty } from 'mixins/responsive-property'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled","defaultProps","Tab"],"mappings":"+GAqCO,SAASA,KAAKC,GACnB,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,eAAEA,EAAcC,iBAAEA,EAAgBC,YAAEA,EAAWC,MAAEA,EAAKC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUT,EAE9G,OACEU,IAACC,KAAW,CACVT,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EAASN,SAEnBS,IAACC,MAAY,CAACT,UAAWC,EAAeF,SACtCS,IAACC,QAAc,CAACJ,SAAUA,EAAUL,UAAWE,EAAiBH,SAC7DA,OAKX,CAnCAF,KAAKa,aAAe,CAClBP,YAAa,OACbC,MAAO,0BAGTP,KAAKc,IAAMA"}

package/components/Tabs/style.js

@@ -1,2 +1,2 @@
-import o,{css as r}from'styled-components';import{color as i}from'../../mixins/color.js';import{responsiveProperty as e}from'../../mixins/responsive-property.js';var t=o=>r(["border-bottom:1px solid ",";"],o);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?i(o.borderColor,t):null),(o=>o.color?i(o.color):null),e('width'));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;top:0;bottom:0;display:block;content:'';width:","px;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%);}"],20);var a=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;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?r(["display:flex;justify-content:space-between;width:100%;"]):null));export{a as Content,l as Inner,n as Root};
+'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const borderColor=o=>styled.css(["border-bottom:1px solid ",";"],o);const Root=styled__default.default.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"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?color.color(o.borderColor,borderColor):null),(o=>o.color?color.color(o.color):null),responsiveProperty.responsiveProperty('width'));const Inner=styled__default.default.div.withConfig({displayName:"Tabs__Inner",componentId:"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;top:0;bottom:0;display:block;content:'';width:","px;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%);}"],20);const Content=styled__default.default.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;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?styled.css(["display:flex;justify-content:space-between;width:100%;"]):null));exports.Content=Content,exports.Inner=Inner,exports.Root=Root;
 //# 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 { responsiveProperty } from 'mixins/responsive-property'\nimport { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n  border-bottom: 1px solid ${color};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\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  ${responsiveProperty('width')}\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    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\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  position: relative;\n  z-index: 1;\n  display: block;\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"],"names":["borderColor","color","css","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","props","noBorder","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"kKAOA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAGtB,IAAME,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,IAAA,KAQZM,GAAWA,EAAMV,cAAgBU,EAAMC,SAAWV,EAAMS,EAAMV,YAAaA,GAAe,OAC1FU,GAAWA,EAAMT,MAAQA,EAAMS,EAAMT,OAAS,MAC/CW,EAAmB,UAGVC,IAAAA,EAAQT,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,8PAAA,+MAnBgB,IAqDrBU,IAAAA,EAAUV,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,uLAAA,iLAAA,KAWRM,GAAUA,EAAMK,MAAMC,OAAOC,YAepCP,GACDA,EAAMC,SACFT,EADJ,CAAA,2DAMI"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n  border-bottom: 1px solid ${color};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\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  ${responsiveProperty('width')}\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    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\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  position: relative;\n  z-index: 1;\n  display: block;\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"],"names":["borderColor","color","css","Root","styled","div","withConfig","shouldForwardProp","prop","displayName","componentId","props","noBorder","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"mRAOA,MAAMA,YAAeC,GAAkBC,WAAG,CAAA,2BAAA,KACbD,GAGtB,MAAME,KAAOC,gBAAAA,QAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAASA,IAAS,aACtCF,WAAA,CAAAG,YAAA,aAAAC,YAAA,mBAFkBN,CAElB,CAAA,yGAAA,IAAA,IAAA,KAMGO,GAAWA,EAAMX,cAAgBW,EAAMC,SAAWX,MAAAA,MAAMU,EAAMX,YAAaA,aAAe,OAC1FW,GAAWA,EAAMV,MAAQA,YAAMU,EAAMV,OAAS,MAC/CY,mBAAkBA,mBAAC,gBAGVC,MAAQV,gBAAAA,QAAOC,IAAGC,WAAA,CAAAG,YAAA,cAAAC,YAAA,mBAAVN,CAAU,CAAA,8PAAA,+MAnBG,UAqDrBW,QAAUX,gBAAAA,QAAOC,IAAGC,WAAA,CAAAG,YAAA,gBAAAC,YAAA,mBAAVN,CAAU,CAAA,uLAAA,iLAAA,KAWrBO,GAAUA,EAAMK,MAAMC,OAAOC,YAepCP,GACDA,EAAMC,SACFV,OAAAA,IAAG,CAAA,2DAKH"}

package/components/Tabs/style.mjs

@@ -0,0 +1,2 @@
+import styled,{css}from'styled-components';import{color}from'../../mixins/color.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';const borderColor=o=>css(["border-bottom:1px solid ",";"],o);const Root=styled.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"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?color(o.borderColor,borderColor):null),(o=>o.color?color(o.color):null),responsiveProperty('width'));const Inner=styled.div.withConfig({displayName:"Tabs__Inner",componentId:"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;top:0;bottom:0;display:block;content:'';width:","px;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%);}"],20);const Content=styled.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;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?css(["display:flex;justify-content:space-between;width:100%;"]):null));export{Content,Inner,Root};
+//# sourceMappingURL=style.mjs.map

package/components/Tabs/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n  border-bottom: 1px solid ${color};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\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  ${responsiveProperty('width')}\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    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\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  position: relative;\n  z-index: 1;\n  display: block;\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"],"names":["borderColor","color","css","Root","styled","div","withConfig","shouldForwardProp","prop","displayName","componentId","props","noBorder","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"0JAOA,MAAMA,YAAeC,GAAkBC,IAAG,CAAA,2BAAA,KACbD,GAGtB,MAAME,KAAOC,OAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAASA,IAAS,aACtCF,WAAA,CAAAG,YAAA,aAAAC,YAAA,mBAFkBN,CAElB,CAAA,yGAAA,IAAA,IAAA,KAMGO,GAAWA,EAAMX,cAAgBW,EAAMC,SAAWX,MAAMU,EAAMX,YAAaA,aAAe,OAC1FW,GAAWA,EAAMV,MAAQA,MAAMU,EAAMV,OAAS,MAC/CY,mBAAmB,gBAGVC,MAAQV,OAAOC,IAAGC,WAAA,CAAAG,YAAA,cAAAC,YAAA,mBAAVN,CAAU,CAAA,8PAAA,+MAnBG,UAqDrBW,QAAUX,OAAOC,IAAGC,WAAA,CAAAG,YAAA,gBAAAC,YAAA,mBAAVN,CAAU,CAAA,uLAAA,iLAAA,KAWrBO,GAAUA,EAAMK,MAAMC,OAAOC,YAepCP,GACDA,EAAMC,SACFV,IAAG,CAAA,2DAKH"}

package/components/Tag/Tag.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectWithoutProperties';import t from'@babel/runtime/helpers/objectSpread2';import{DefaultColorNames as n}from'../../theme/colors.js';import{Root as i,Text as r}from'./style.js';import{jsx as o,jsxs as a}from'react/jsx-runtime';var l=["as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked"];function s(e){return o(p,t({as:"input"},e))}function p(s){var{as:p,textProps:u,content:c,children:d,htmlFor:h,id:m,name:b,inputType:f,value:k,disabled:g,onChange:v,onClick:y,inverse:C,checked:x}=s,j=e(s,l);var S='button'===p?{type:'button'}:{};var P='input'===p?{htmlFor:m||b}:{};return a(i,t(t(t(t(t({as:'input'===p?'label':p,inverse:C,checked:x,disabled:g,onClick:'input'!==p?y:void 0},'label'===p?{htmlFor:h}:{}),S),P),j),{},{children:['input'===p?o("input",{id:m||b,name:b,type:f||'checkbox',tabIndex:0,onChange:function(e){function t(t){return e.apply(this,arguments)}return t.toString=()=>e.toString(),t}((e=>(e.persist(),v&&v(e)))),onClick:function(e){function t(t){return e.apply(this,arguments)}return t.toString=()=>e.toString(),t}((e=>(e.persist(),y&&y(e)))),defaultChecked:s.defaultChecked,checked:x,value:k,disabled:g,hidden:!0}):null,d,o(r,t(t({size:14,forwardedAs:"span",color:x&&!C?n.white:n.mineShaft},u),{},{children:c}))]}))}p.defaultProps={display:'inline-block',as:'button',height:40},s.defaultProps={display:'inline-block',height:40},p.Input=s,p.displayName='Tag';export{p as Tag};
+'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');function TagInput(e){return require$$0.jsx(Tag,{as:"input",...e})}function Tag(e){const{as:t,textProps:r,content:i,children:n,htmlFor:a,id:l,name:s,inputType:o,value:u,disabled:c,onChange:d,onClick:p,inverse:h,checked:g,...T}=e;return require$$0.jsxs(style.Root,{as:t==='input'?'label':t,inverse:h,checked:g,disabled:c,onClick:t!=='input'?p:void 0,...t==='label'?{htmlFor:a}:{},...t==='button'?{type:'button'}:{},...t==='input'?{htmlFor:l||s}:{},...T,children:[t==='input'?require$$0.jsx("input",{id:l||s,name:s,type:o||'checkbox',tabIndex:0,onChange:e=>(e.persist(),d&&d(e)),onClick:e=>(e.persist(),p&&p(e)),defaultChecked:e.defaultChecked,checked:g,value:u,disabled:c,hidden:!0}):null,n,require$$0.jsx(style.Text,{size:14,forwardedAs:"span",color:g&&!h?colors.DefaultColorNames.white:colors.DefaultColorNames.mineShaft,...r,children:i})]})}Tag.defaultProps={display:'inline-block',as:'button',height:40},TagInput.defaultProps={display:'inline-block',height:40},Tag.Input=TagInput,Tag.displayName='Tag',exports.Tag=Tag;
 //# sourceMappingURL=Tag.js.map