@foxford/ui 2.130.0 → 2.132.0

package/components/Tab/Tab.js

@@ -1,2 +1,2 @@
-'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 jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const Tab=withMergedProps.withMergedProps(React.forwardRef((e,t)=>{const{size:s="m",type:r="button",textProps:n={},children:i,theme:a,...o}=e;const x={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return jsxRuntime.jsx(style.Root,{...o,size:s,tabTheme:a,type:o.as===void 0?r:void 0,ref:t,children:o.preset==='brand'?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[o.left?jsxRuntime.jsx(style.Edge,{}):null,jsxRuntime.jsx(style.Content,{children:typeof i=='function'?i({baseTextProps:x,textProps:n}):jsxRuntime.jsx(Text.Text,{...x,...n,children:i})}),o.right?jsxRuntime.jsx(style.Edge,{after:!0}):null]}):typeof i=='function'?i({baseTextProps:x,textProps:n}):jsxRuntime.jsx(Text.Text,{...x,...n,children:i})})}),{displayName:"Tab",sizes:e=>e.preset==='brand'?constants.SIZES:defaultConstants.SIZES_DEFAULT});exports.COMPONENT_NAME="Tab",exports.Tab=Tab;
+'use strict';var useMergedProps=require('../../hooks/useMergedProps.js');var createPolymorphicComponentWithRef=require('../../shared/utils/createPolymorphicComponentWithRef.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var Text=require('../Text/Text.js');const Tab=createPolymorphicComponentWithRef.createPolymorphicComponentWithRef((e,t)=>{const{size:s="m",type:r="button",textProps:o={},component:n,as:i,children:a,content:u,theme:l,...c}=useMergedProps.useMergedProps(e,{componentName:"Tab",sizes:e=>e.preset==='brand'?sizes.SIZES:sizes.SIZES_DEFAULT});const p=n??i??'button';const x={as:'span',size:'inherit',color:'inherit',weight:'inherit'};const m={...x,...o};const j=jsxRuntime.jsx(Slot.Slot,{render:u,props:m,fallback:()=>typeof a=='function'?a({baseTextProps:x,textProps:o}):jsxRuntime.jsx(Text.Text,{...m,children:a})});return jsxRuntime.jsx(style.Root,{...c,as:p,size:s,tabTheme:l,type:p==='button'?r:void 0,ref:t,children:c.preset==='brand'?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[c.left?jsxRuntime.jsx(style.Edge,{}):null,jsxRuntime.jsx(style.Content,{children:j}),c.right?jsxRuntime.jsx(style.Edge,{after:!0}):null]}):j})});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 type { MergedProps } 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 * Контрол, предназначенный для навигации между разделами контента.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Tab: React.ForwardRefExoticComponent<TabProps> = withMergedProps<TabProps, HTMLButtonElement>(\n  forwardRef<HTMLButtonElement, MergedProps<TabProps>>((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 /> : null}\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 /> : null}\n          </>\n        ) : typeof children === 'function' ? (\n          children({ baseTextProps, textProps })\n        ) : (\n          <Text {...baseTextProps} {...textProps}>\n            {children}\n          </Text>\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","Text","right","after","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"oTAkBA,MAAMA,IAAiDC,gBAAAA,gBACrDC,MAAAA,WAAqD,CAACC,EAAOC,KAC3D,MAAMC,KAAEA,EAAO,IAAGC,KAAEA,EAAO,SAAQC,UAAEA,EAAY,CAAA,EAAEC,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,KAAOP,WAAAA,IAACC,WAAW,CAAA,GAAM,KACpCD,WAAAA,IAACC,cAAc,CAAAR,gBACLA,GAAa,WACnBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,WAAAA,IAACQ,UAAI,IAAKZ,KAAmBJ,EAASC,SACnCA,MAINE,EAAUc,MAAQT,WAAAA,IAACC,MAAAA,KAAW,CAACS,OAAK,IAAM,eAEpCjB,GAAa,WACtBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,WAAAA,IAACQ,UAAI,IAAKZ,KAAmBJ,EAASC,SACnCA,QAMX,CACEkB,YA/CmB,MAgDnBC,MAAQxB,GACCA,EAAMgB,SAAW,QAAUS,UAAAA,MAAQC,iBAAAA,uCAjDzB"}
+{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { Slot } from 'components/Slot'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport type { ComponentElementType } from 'shared/types'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport { SIZES, SIZES_DEFAULT } from './sizes'\nimport * as Styled from './style'\nimport type { TabProps } from './types'\n\nconst COMPONENT_NAME = 'Tab'\n\n/**\n *\n * *v1.0.0*\n *\n * Контрол, предназначенный для навигации между разделами контента.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst Tab = createPolymorphicComponentWithRef<'button', TabProps>((props, ref) => {\n  const {\n    size = 'm',\n    type = 'button',\n    textProps: textPropsProp = {},\n    component,\n    as: _as,\n    children,\n    content,\n    theme,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, TabProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: (p) => (p.preset === 'brand' ? SIZES : SIZES_DEFAULT),\n  })\n\n  const asProp: ComponentElementType = component ?? _as ?? 'button'\n\n  const baseTextProps: TextProps = { as: 'span', size: 'inherit', color: 'inherit', weight: 'inherit' }\n\n  const textProps: TextProps = { ...baseTextProps, ...textPropsProp }\n\n  const mainContent = (\n    <Slot\n      render={content}\n      props={textProps}\n      fallback={() =>\n        typeof children === 'function' ? (\n          children({ baseTextProps, textProps: textPropsProp })\n        ) : (\n          <Text {...textProps}>{children}</Text>\n        )\n      }\n    />\n  )\n\n  return (\n    <Styled.Root\n      {...restProps}\n      as={asProp}\n      size={size}\n      tabTheme={theme}\n      type={asProp === 'button' ? type : undefined}\n      ref={ref}\n    >\n      {restProps.preset === 'brand' ? (\n        <>\n          {restProps.left ? <Styled.Edge /> : null}\n          <Styled.Content>{mainContent}</Styled.Content>\n          {restProps.right ? <Styled.Edge after /> : null}\n        </>\n      ) : (\n        mainContent\n      )}\n    </Styled.Root>\n  )\n})\n\nconst TabDoc: React.FC<TabProps> = () => null\n\nexport { TabDoc, Tab, COMPONENT_NAME }\n"],"names":["Tab","createPolymorphicComponentWithRef","props","ref","size","type","textProps","textPropsProp","component","as","_as","children","content","theme","restProps","useMergedProps","componentName","sizes","p","preset","SIZES","SIZES_DEFAULT","asProp","baseTextProps","color","weight","mainContent","_jsx","Slot","render","fallback","Text","Styled","tabTheme","undefined","_jsxs","_Fragment","left","right","after"],"mappings":"sWAuBA,MAAMA,IAAMC,kCAAAA,kCAAsD,CAACC,EAAOC,KACxE,MAAMC,KACJA,EAAO,IAAGC,KACVA,EAAO,SACPC,UAAWC,EAAgB,CAAA,EAAEC,UAC7BA,EACAC,GAAIC,EAAGC,SACPA,EAAQC,QACRA,EAAOC,MACPA,KACGC,GACDC,eAAAA,eAA8Db,EAAO,CACvEc,cAxBmB,MAyBnBC,MAAQC,GAAOA,EAAEC,SAAW,QAAUC,MAAAA,MAAQC,MAAAA,gBAGhD,MAAMC,EAA+Bd,GAAaE,GAAO,SAEzD,MAAMa,EAA2B,CAAEd,GAAI,OAAQL,KAAM,UAAWoB,MAAO,UAAWC,OAAQ,WAE1F,MAAMnB,EAAuB,IAAKiB,KAAkBhB,GAEpD,MAAMmB,EACJC,WAAAA,IAACC,UAAI,CACHC,OAAQjB,EACRV,MAAOI,EACPwB,SAAUA,WACDnB,GAAa,WAClBA,EAAS,CAAEY,gBAAejB,UAAWC,IAErCoB,WAAAA,IAACI,UAAI,IAAKzB,EAASK,SAAGA,MAM9B,OACEgB,WAAAA,IAACK,MAAAA,KAAW,IACNlB,EACJL,GAAIa,EACJlB,KAAMA,EACN6B,SAAUpB,EACVR,KAAMiB,IAAW,SAAWjB,OAAO6B,EACnC/B,IAAKA,EAAIQ,SAERG,EAAUK,SAAW,QACpBgB,WAAAA,KAAAC,WAAAA,SAAA,CAAAzB,UACGG,EAAUuB,KAAOV,WAAAA,IAACK,WAAW,CAAA,GAAM,KACpCL,WAAAA,IAACK,cAAc,CAAArB,SAAEe,IAChBZ,EAAUwB,MAAQX,WAAAA,IAACK,MAAAA,KAAW,CAACO,OAAK,IAAM,QAG7Cb,6BAhEe"}

package/components/Tab/Tab.mjs

@@ -1,2 +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((t,e)=>{const{size:r="m",type:s="button",textProps:o={},children:n,theme:i,...m}=t;const a={as:'span',size:'inherit',color:'inherit',weight:'inherit'};return jsx(Root,{...m,size:r,tabTheme:i,type:m.as===void 0?s:void 0,ref:e,children:m.preset==='brand'?jsxs(Fragment,{children:[m.left?jsx(Edge,{}):null,jsx(Content,{children:typeof n=='function'?n({baseTextProps:a,textProps:o}):jsx(Text,{...a,...o,children:n})}),m.right?jsx(Edge,{after:!0}):null]}):typeof n=='function'?n({baseTextProps:a,textProps:o}):jsx(Text,{...a,...o,children:n})})}),{displayName:"Tab",sizes:t=>t.preset==='brand'?SIZES:SIZES_DEFAULT});export{COMPONENT_NAME,Tab};
+import{useMergedProps}from'../../hooks/useMergedProps.mjs';import{createPolymorphicComponentWithRef}from'../../shared/utils/createPolymorphicComponentWithRef.mjs';import{SIZES,SIZES_DEFAULT}from'./sizes.mjs';import{Root,Edge,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{Text}from'../Text/Text.mjs';const COMPONENT_NAME='Tab';const Tab=createPolymorphicComponentWithRef((e,t)=>{const{size:o="m",type:r="button",textProps:s={},component:n,as:i,children:m,content:p,theme:c,...a}=useMergedProps(e,{componentName:"Tab",sizes:e=>e.preset==='brand'?SIZES:SIZES_DEFAULT});const l=n??i??'button';const h={as:'span',size:'inherit',color:'inherit',weight:'inherit'};const x={...h,...s};const d=jsx(Slot,{render:p,props:x,fallback:()=>typeof m=='function'?m({baseTextProps:h,textProps:s}):jsx(Text,{...x,children:m})});return jsx(Root,{...a,as:l,size:o,tabTheme:c,type:l==='button'?r:void 0,ref:t,children:a.preset==='brand'?jsxs(Fragment,{children:[a.left?jsx(Edge,{}):null,jsx(Content,{children:d}),a.right?jsx(Edge,{after:!0}):null]}):d})});export{COMPONENT_NAME,Tab};
 //# sourceMappingURL=Tab.mjs.map

package/components/Tab/Tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } 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 * Контрол, предназначенный для навигации между разделами контента.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Tab: React.ForwardRefExoticComponent<TabProps> = withMergedProps<TabProps, HTMLButtonElement>(\n  forwardRef<HTMLButtonElement, MergedProps<TabProps>>((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 /> : null}\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 /> : null}\n          </>\n        ) : typeof children === 'function' ? (\n          children({ baseTextProps, textProps })\n        ) : (\n          <Text {...baseTextProps} {...textProps}>\n            {children}\n          </Text>\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":"+SAUA,MAAMA,eAAiB,MAQvB,MAAMC,IAAiDC,gBACrDC,WAAqD,CAACC,EAAOC,KAC3D,MAAMC,KAAEA,EAAO,IAAGC,KAAEA,EAAO,SAAQC,UAAEA,EAAY,CAAA,EAAEC,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,KAAOP,IAACC,KAAW,CAAA,GAAM,KACpCD,IAACC,QAAc,CAAAR,gBACLA,GAAa,WACnBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,IAACQ,KAAI,IAAKZ,KAAmBJ,EAASC,SACnCA,MAINE,EAAUc,MAAQT,IAACC,KAAW,CAACS,OAAK,IAAM,eAEpCjB,GAAa,WACtBA,EAAS,CAAEG,gBAAeJ,cAE1BQ,IAACQ,KAAI,IAAKZ,KAAmBJ,EAASC,SACnCA,QAMX,CACEkB,YA/CmB,MAgDnBC,MAAQxB,GACCA,EAAMgB,SAAW,QAAUS,MAAQC"}
+{"version":3,"file":"Tab.mjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { Slot } from 'components/Slot'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport type { ComponentElementType } from 'shared/types'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport { SIZES, SIZES_DEFAULT } from './sizes'\nimport * as Styled from './style'\nimport type { TabProps } from './types'\n\nconst COMPONENT_NAME = 'Tab'\n\n/**\n *\n * *v1.0.0*\n *\n * Контрол, предназначенный для навигации между разделами контента.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<button\\>).\n */\nconst Tab = createPolymorphicComponentWithRef<'button', TabProps>((props, ref) => {\n  const {\n    size = 'm',\n    type = 'button',\n    textProps: textPropsProp = {},\n    component,\n    as: _as,\n    children,\n    content,\n    theme,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, TabProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: (p) => (p.preset === 'brand' ? SIZES : SIZES_DEFAULT),\n  })\n\n  const asProp: ComponentElementType = component ?? _as ?? 'button'\n\n  const baseTextProps: TextProps = { as: 'span', size: 'inherit', color: 'inherit', weight: 'inherit' }\n\n  const textProps: TextProps = { ...baseTextProps, ...textPropsProp }\n\n  const mainContent = (\n    <Slot\n      render={content}\n      props={textProps}\n      fallback={() =>\n        typeof children === 'function' ? (\n          children({ baseTextProps, textProps: textPropsProp })\n        ) : (\n          <Text {...textProps}>{children}</Text>\n        )\n      }\n    />\n  )\n\n  return (\n    <Styled.Root\n      {...restProps}\n      as={asProp}\n      size={size}\n      tabTheme={theme}\n      type={asProp === 'button' ? type : undefined}\n      ref={ref}\n    >\n      {restProps.preset === 'brand' ? (\n        <>\n          {restProps.left ? <Styled.Edge /> : null}\n          <Styled.Content>{mainContent}</Styled.Content>\n          {restProps.right ? <Styled.Edge after /> : null}\n        </>\n      ) : (\n        mainContent\n      )}\n    </Styled.Root>\n  )\n})\n\nconst TabDoc: React.FC<TabProps> = () => null\n\nexport { TabDoc, Tab, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Tab","createPolymorphicComponentWithRef","props","ref","size","type","textProps","textPropsProp","component","as","_as","children","content","theme","restProps","useMergedProps","componentName","sizes","p","preset","SIZES","SIZES_DEFAULT","asProp","baseTextProps","color","weight","mainContent","_jsx","Slot","render","fallback","Text","Styled","tabTheme","undefined","_jsxs","_Fragment","left","right","after"],"mappings":"kXAWA,MAAMA,eAAiB,MAYvB,MAAMC,IAAMC,kCAAsD,CAACC,EAAOC,KACxE,MAAMC,KACJA,EAAO,IAAGC,KACVA,EAAO,SACPC,UAAWC,EAAgB,CAAA,EAAEC,UAC7BA,EACAC,GAAIC,EAAGC,SACPA,EAAQC,QACRA,EAAOC,MACPA,KACGC,GACDC,eAA8Db,EAAO,CACvEc,cAxBmB,MAyBnBC,MAAQC,GAAOA,EAAEC,SAAW,QAAUC,MAAQC,gBAGhD,MAAMC,EAA+Bd,GAAaE,GAAO,SAEzD,MAAMa,EAA2B,CAAEd,GAAI,OAAQL,KAAM,UAAWoB,MAAO,UAAWC,OAAQ,WAE1F,MAAMnB,EAAuB,IAAKiB,KAAkBhB,GAEpD,MAAMmB,EACJC,IAACC,KAAI,CACHC,OAAQjB,EACRV,MAAOI,EACPwB,SAAUA,WACDnB,GAAa,WAClBA,EAAS,CAAEY,gBAAejB,UAAWC,IAErCoB,IAACI,KAAI,IAAKzB,EAASK,SAAGA,MAM9B,OACEgB,IAACK,KAAW,IACNlB,EACJL,GAAIa,EACJlB,KAAMA,EACN6B,SAAUpB,EACVR,KAAMiB,IAAW,SAAWjB,OAAO6B,EACnC/B,IAAKA,EAAIQ,SAERG,EAAUK,SAAW,QACpBgB,KAAAC,SAAA,CAAAzB,UACGG,EAAUuB,KAAOV,IAACK,KAAW,CAAA,GAAM,KACpCL,IAACK,QAAc,CAAArB,SAAEe,IAChBZ,EAAUwB,MAAQX,IAACK,KAAW,CAACO,OAAK,IAAM,QAG7Cb"}

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

@@ -1,2 +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"})));
+'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 20 48"},e),_path||(_path=React__namespace.createElement("path",{fill:"currentcolor",d:"M19.5.5v47h-2.241L.612 24 17.26.5z"})));
 //# sourceMappingURL=arrow.svg.js.map

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

@@ -1 +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":"mZAAA,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,GAAK,CAAE,OAAOL,CAAG,EAAGJ,SAASY,MAAM,KAAMN,UAAY,iBAElQO,GAAsBC,iBAAMC,cAAc,MAAOf,SAAS,CACzEgB,MAAO,6BACPC,KAAM,OACNC,oBAAqB,OACrBC,QAAS,aACRN,GAAQd,QAAUA,MAAqBe,iBAAMC,cAAc,OAAQ,CACpEE,KAAM,eACNG,EAAG"}
+{"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 20 48\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"currentcolor\",\n  d: \"M19.5.5v47h-2.241L.612 24 17.26.5z\"\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":"mZAAA,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,GAAK,CAAE,OAAOL,CAAG,EAAGJ,SAASY,MAAM,KAAMN,UAAY,iBAElQO,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

@@ -1,2 +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};
+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 20 48"},e),_path||(_path=React.createElement("path",{fill:"currentcolor",d:"M19.5.5v47h-2.241L.612 24 17.26.5z"})));export{SvgArrow as default};
 //# sourceMappingURL=arrow.svg.mjs.map

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

@@ -1 +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,GAAK,CAAE,OAAOL,CAAG,EAAGJ,SAASY,MAAM,KAAMN,UAAY,CAE9Q,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"}
+{"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 20 48\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n  fill: \"currentcolor\",\n  d: \"M19.5.5v47h-2.241L.612 24 17.26.5z\"\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,GAAK,CAAE,OAAOL,CAAG,EAAGJ,SAASY,MAAM,KAAMN,UAAY,CAE9Q,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/sizes.js

@@ -0,0 +1,2 @@
+'use strict';exports.SIZES={xxxl:{height:60,fontSize:20,'--tab-padding-inline':'11px'},xxl:{height:56,fontSize:20,'--tab-padding-inline':'11px'},xl:{height:52,fontSize:18,'--tab-padding-inline':'11px'},l:{height:48,fontSize:18,'--tab-padding-inline':'11px'},m:{height:44,fontSize:18,'--tab-padding-inline':'11px'},s:{height:40,fontSize:16,'--tab-padding-inline':'11px'},xs:{height:36,fontSize:14,'--tab-padding-inline':'11px'},xxs:{height:32,fontSize:14,'--tab-padding-inline':'11px'},xxxs:{height:28,fontSize:12,'--tab-padding-inline':'11px'}},exports.SIZES_DEFAULT={xxxl:{},xxl:{},xl:{},l:{},m:{},s:{},xs:{},xxs:{},xxxs:{}};
+//# sourceMappingURL=sizes.js.map

package/components/Tab/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.js","sources":["../../../../src/components/Tab/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES_DEFAULT: Record<Size, CSSProperties> = {\n  xxxl: {},\n  xxl: {},\n  xl: {},\n  l: {},\n  m: {},\n  s: {},\n  xs: {},\n  xxs: {},\n  xxxs: {},\n}\n\nexport const SIZES: Record<Size, CSSProperties> = {\n  xxxl: {\n    height: 60,\n    fontSize: 20,\n    '--tab-padding-inline': '11px',\n  },\n  xxl: {\n    height: 56,\n    fontSize: 20,\n    '--tab-padding-inline': '11px',\n  },\n  xl: {\n    height: 52,\n    fontSize: 18,\n    '--tab-padding-inline': '11px',\n  },\n  l: {\n    height: 48,\n    fontSize: 18,\n    '--tab-padding-inline': '11px',\n  },\n  m: {\n    height: 44,\n    fontSize: 18,\n    '--tab-padding-inline': '11px',\n  },\n  s: {\n    height: 40,\n    fontSize: 16,\n    '--tab-padding-inline': '11px',\n  },\n  xs: {\n    height: 36,\n    fontSize: 14,\n    '--tab-padding-inline': '11px',\n  },\n  xxs: {\n    height: 32,\n    fontSize: 14,\n    '--tab-padding-inline': '11px',\n  },\n  xxxs: {\n    height: 28,\n    fontSize: 12,\n    '--tab-padding-inline': '11px',\n  },\n}\n"],"names":["xxxl","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"2BAekD,CAChDA,KAAM,CACJC,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BC,IAAK,CACHF,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BE,GAAI,CACFH,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BG,EAAG,CACDJ,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BI,EAAG,CACDL,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BK,EAAG,CACDN,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BM,GAAI,CACFP,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BO,IAAK,CACHR,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BQ,KAAM,CACJT,OAAQ,GACRC,SAAU,GACV,uBAAwB,+BAxD8B,CACxDF,KAAM,CAAA,EACNG,IAAK,CAAA,EACLC,GAAI,CAAA,EACJC,EAAG,CAAA,EACHC,EAAG,CAAA,EACHC,EAAG,CAAA,EACHC,GAAI,CAAA,EACJC,IAAK,CAAA,EACLC,KAAM,CAAA"}

package/components/Tab/sizes.mjs

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

package/components/Tab/sizes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Tab/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from 'shared/types'\n\nexport const SIZES_DEFAULT: Record<Size, CSSProperties> = {\n  xxxl: {},\n  xxl: {},\n  xl: {},\n  l: {},\n  m: {},\n  s: {},\n  xs: {},\n  xxs: {},\n  xxxs: {},\n}\n\nexport const SIZES: Record<Size, CSSProperties> = {\n  xxxl: {\n    height: 60,\n    fontSize: 20,\n    '--tab-padding-inline': '11px',\n  },\n  xxl: {\n    height: 56,\n    fontSize: 20,\n    '--tab-padding-inline': '11px',\n  },\n  xl: {\n    height: 52,\n    fontSize: 18,\n    '--tab-padding-inline': '11px',\n  },\n  l: {\n    height: 48,\n    fontSize: 18,\n    '--tab-padding-inline': '11px',\n  },\n  m: {\n    height: 44,\n    fontSize: 18,\n    '--tab-padding-inline': '11px',\n  },\n  s: {\n    height: 40,\n    fontSize: 16,\n    '--tab-padding-inline': '11px',\n  },\n  xs: {\n    height: 36,\n    fontSize: 14,\n    '--tab-padding-inline': '11px',\n  },\n  xxs: {\n    height: 32,\n    fontSize: 14,\n    '--tab-padding-inline': '11px',\n  },\n  xxxs: {\n    height: 28,\n    fontSize: 12,\n    '--tab-padding-inline': '11px',\n  },\n}\n"],"names":["SIZES_DEFAULT","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","SIZES","height","fontSize"],"mappings":"AAGO,MAAMA,cAA6C,CACxDC,KAAM,CAAA,EACNC,IAAK,CAAA,EACLC,GAAI,CAAA,EACJC,EAAG,CAAA,EACHC,EAAG,CAAA,EACHC,EAAG,CAAA,EACHC,GAAI,CAAA,EACJC,IAAK,CAAA,EACLC,KAAM,CAAA,GAGD,MAAMC,MAAqC,CAChDT,KAAM,CACJU,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BV,IAAK,CACHS,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BT,GAAI,CACFQ,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BR,EAAG,CACDO,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BP,EAAG,CACDM,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BN,EAAG,CACDK,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BL,GAAI,CACFI,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BJ,IAAK,CACHG,OAAQ,GACRC,SAAU,GACV,uBAAwB,QAE1BH,KAAM,CACJE,OAAQ,GACRC,SAAU,GACV,uBAAwB"}

package/components/Tab/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');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 hover=require('../../mixins/hover.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);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.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.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.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.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.hover(`\n      color: ${o.colorHover};\n      background-color: ${o.backgroundColorHover};\n      border-color: ${o.borderColorHover};\n    `,`&:hover > ${Content}`)}\n  ${hover.hover(`\n      color: ${o.backgroundColorHover};\n      stroke: ${o.borderColorHover};\n    `,`&:hover > ${Edge}`)}\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.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.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.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.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.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.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.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.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.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.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.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;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');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 hover=require('../../mixins/hover.js');var cursor=require('../../mixins/cursor.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);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.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.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.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.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;align-self:baseline;flex-grow:1;flex-shrink:0;height:100%;padding:0 var(--tab-padding-inline);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%;width:20px;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.hover(`\n      color: ${o.colorHover};\n      background-color: ${o.backgroundColorHover};\n      border-color: ${o.borderColorHover};\n    `,`&:hover > ${Content}`)}\n  ${hover.hover(`\n      color: ${o.backgroundColorHover};\n      stroke: ${o.borderColorHover};\n    `,`&:hover > ${Edge}`)}\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.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.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.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}))},contrast:{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.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.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.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.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.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.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.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.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}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," "," ",""],o=>{const{left:r,right:e}=o;const t=o.rounded?8:0;const n=r?0:t;const l=e?0:t;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\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: ${n}px ${l}px ${l}px ${n}px;\n        border-left-style: ${r?'none':'solid'};\n        border-right-style: ${e?'none':'solid'};\n        margin-left: ${r?-2:0}px;\n        margin-right: ${e?-2:0}px;\n        padding-left: calc(var(--tab-padding-inline) + ${(r?-6:0)+(e?4:0)}px);\n        padding-right: calc(var(--tab-padding-inline) + ${(e?-6:0)+(r?4:0)}px);\n      }\n    `},o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),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,cursor.cursor,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 { hover } from 'mixins/hover'\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(\n    `\n      color: ${palette.colorHover};\n      background-color: ${palette.backgroundColorHover};\n      border-color: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Content}`\n  )}\n  ${hover(\n    `\n      color: ${palette.backgroundColorHover};\n      stroke: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Edge}`\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","hover","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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"}
+{"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 { hover } from 'mixins/hover'\nimport { cursor } from 'mixins/cursor'\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  align-self: baseline;\n  flex-grow: 1;\n  flex-shrink: 0;\n  height: 100%;\n  padding: 0 var(--tab-padding-inline);\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  width: 20px;\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(\n    `\n      color: ${palette.colorHover};\n      background-color: ${palette.backgroundColorHover};\n      border-color: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Content}`\n  )}\n  ${hover(\n    `\n      color: ${palette.backgroundColorHover};\n      stroke: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Edge}`\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  contrast: {\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.withConfig<StyledTabProps>({\n  shouldForwardProp: shouldForwardTabProp,\n})`\n  ${(props) => {\n    const { left, right } = props\n    const radius = props.rounded ? 8 : 0\n    const leftRadius = left ? 0 : radius\n    const rightRadius = right ? 0 : radius\n    const paddingLeftOffset = (left ? -6 : 0) + (right ? 4 : 0)\n    const paddingRightOffset = (right ? -6 : 0) + (left ? 4 : 0)\n\n    return `\n      box-sizing: border-box;\n      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\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: ${left ? 'none' : 'solid'};\n        border-right-style: ${right ? 'none' : 'solid'};\n        margin-left: ${left ? -2 : 0}px;\n        margin-right: ${right ? -2 : 0}px;\n        padding-left: calc(var(--tab-padding-inline) + ${paddingLeftOffset}px);\n        padding-right: calc(var(--tab-padding-inline) + ${paddingRightOffset}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.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\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  ${cursor}\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","hover","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","contrast","lighten","black","Root","button","left","right","radius","rounded","leftRadius","rightRadius","preset","schema","onColored","tabTheme","focus","cursor","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}

package/components/Tab/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';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{hover}from'../../mixins/hover.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(`\n      color: ${o.colorHover};\n      background-color: ${o.backgroundColorHover};\n      border-color: ${o.borderColorHover};\n    `,`&:hover > ${Content}`)}\n  ${hover(`\n      color: ${o.backgroundColorHover};\n      stroke: ${o.borderColorHover};\n    `,`&:hover > ${Edge}`)}\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};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';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{hover}from'../../mixins/hover.mjs';import{cursor}from'../../mixins/cursor.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;align-self:baseline;flex-grow:1;flex-shrink:0;height:100%;padding:0 var(--tab-padding-inline);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%;width:20px;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(`\n      color: ${o.colorHover};\n      background-color: ${o.backgroundColorHover};\n      border-color: ${o.borderColorHover};\n    `,`&:hover > ${Content}`)}\n  ${hover(`\n      color: ${o.backgroundColorHover};\n      stroke: ${o.borderColorHover};\n    `,`&:hover > ${Edge}`)}\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}))},contrast:{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}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," "," ",""],o=>{const{left:r,right:e}=o;const n=o.rounded?8:0;const t=r?0:n;const a=e?0:n;return`\n      box-sizing: border-box;\n      display: ${o.preset==='brand'?'inline-flex':'inline-block'};\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: ${t}px ${a}px ${a}px ${t}px;\n        border-left-style: ${r?'none':'solid'};\n        border-right-style: ${e?'none':'solid'};\n        margin-left: ${r?-2:0}px;\n        margin-right: ${e?-2:0}px;\n        padding-left: calc(var(--tab-padding-inline) + ${(r?-6:0)+(e?4:0)}px);\n        padding-right: calc(var(--tab-padding-inline) + ${(e?-6:0)+(r?4:0)}px);\n      }\n    `},o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),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,cursor,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

@@ -1 +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 { hover } from 'mixins/hover'\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(\n    `\n      color: ${palette.colorHover};\n      background-color: ${palette.backgroundColorHover};\n      border-color: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Content}`\n  )}\n  ${hover(\n    `\n      color: ${palette.backgroundColorHover};\n      stroke: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Edge}`\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","hover","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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"}
+{"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 { hover } from 'mixins/hover'\nimport { cursor } from 'mixins/cursor'\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  align-self: baseline;\n  flex-grow: 1;\n  flex-shrink: 0;\n  height: 100%;\n  padding: 0 var(--tab-padding-inline);\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  width: 20px;\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(\n    `\n      color: ${palette.colorHover};\n      background-color: ${palette.backgroundColorHover};\n      border-color: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Content}`\n  )}\n  ${hover(\n    `\n      color: ${palette.backgroundColorHover};\n      stroke: ${palette.borderColorHover};\n    `,\n    `&:hover > ${Edge}`\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  contrast: {\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.withConfig<StyledTabProps>({\n  shouldForwardProp: shouldForwardTabProp,\n})`\n  ${(props) => {\n    const { left, right } = props\n    const radius = props.rounded ? 8 : 0\n    const leftRadius = left ? 0 : radius\n    const rightRadius = right ? 0 : radius\n    const paddingLeftOffset = (left ? -6 : 0) + (right ? 4 : 0)\n    const paddingRightOffset = (right ? -6 : 0) + (left ? 4 : 0)\n\n    return `\n      box-sizing: border-box;\n      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\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: ${left ? 'none' : 'solid'};\n        border-right-style: ${right ? 'none' : 'solid'};\n        margin-left: ${left ? -2 : 0}px;\n        margin-right: ${right ? -2 : 0}px;\n        padding-left: calc(var(--tab-padding-inline) + ${paddingLeftOffset}px);\n        padding-right: calc(var(--tab-padding-inline) + ${paddingRightOffset}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.contrast || props.onColored) schema = COLOR_SCHEMA.contrast\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  ${cursor}\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","hover","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","contrast","lighten","black","Root","button","left","right","radius","rounded","leftRadius","rightRadius","preset","schema","onColored","tabTheme","focus","cursor","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}