@foxford/ui 2.131.0 → 2.133.0

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":"ueAaA,MAAMA,qBAAuBC,wBAC1BC,IACE,CACC,SACA,UACA,SACA,gBACA,WACA,OACA,QACA,UACA,UACA,YACA,SACAC,SAASD,IAGf,MAAME,eAAiB,CACrBC,QAASC,IAAG,CAAA,GAAA,IACPC,GAAU,iGAIFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,yBACzDK,MAAM,oBACGN,EAAME,MAAMC,OAAOC,yDAGnBJ,EAAME,MAAMC,OAAOC,2HAQlCG,QAASR,IAAG,CAAA,GAAA,IACPC,GAAU,mGAIFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,yBACzDK,MAAM,oBACGN,EAAME,MAAMC,OAAOC,yDAGnBJ,EAAME,MAAMC,OAAOC,2HAQlCI,cAAeT,IAAG,CAAA,GAAA,IACbC,GAAU,kIAKFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,yBACzDK,MAAM,oBACGN,EAAME,MAAMC,OAAOC,yDAGnBJ,EAAME,MAAMC,OAAOC,2HAQlCK,OAAQV,IAAG,CAAA,GAAA,IACNC,GAAU,mIAKFA,EAAMC,OAASD,EAAME,MAAMC,OAAOC,QAAUJ,EAAME,MAAMC,OAAOE,8CAC7CL,EAAMC,OAAS,eAAiB,yBACzDK,MAAM,oBACGN,EAAME,MAAMC,OAAOC,yDAGnBJ,EAAME,MAAMC,OAAOC,kIAUvBM,QAAUC,OAAOC,KAAIC,WAAA,CAAAC,YAAA,eAAAC,YAAA,mBAAXJ,CAAW,CAAA,oQAe3B,MAAMK,KAAOL,OAAOM,UAAOJ,WAAW,CAC3CK,kBAAmBA,KAAM,IACzBL,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAFkBJ,CAElB,CAAA,+FAAA,IAMGX,GAAUA,EAAMmB,OAAS,8BAG9B,MAAMC,SAAYC,GAAwB,WAClCX,yBACKW,EAAQC,iCACGD,EAAQE,uCACZF,EAAQG,4BAEpBR,sBACKK,EAAQE,iCACPF,EAAQG,wBAElBlB,MACA,kBACWe,EAAQI,wCACGJ,EAAQK,8CACZL,EAAQM,0BAE1B,aAAajB,iBAEbJ,MACA,kBACWe,EAAQK,wCACPL,EAAQM,0BAEpB,aAAaX,2BAEAN,yBACJW,EAAQO,yCACGP,EAAQQ,+CACZR,EAAQS,6CAEXd,sBACJK,EAAQQ,yCACPR,EAAQS,8BAItB,MAAMC,aAAe,CACnBjC,QAAS,CACPA,QAASC,IAAG,CAAA,GAAA,IACPC,GACDoB,SAAS,CACPE,MAAOtB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBoB,gBAAiBvB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,YAAaxB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,sBACvBsB,WAAYzB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBuB,qBAAsB1B,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnEP,iBAAkB3B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnEN,cAAe5B,EAAME,MAAMC,OAAO,oBAClC0B,wBAAyB7B,EAAME,MAAMC,OAAO,qBAC5C2B,oBAAqB9B,EAAME,MAAMC,OAAO,wBACrCH,EAAMqB,WAGfc,QAASpC,IAAG,CAAA,GAAA,IACPC,GACDoB,SAAS,CACPE,MAAOtB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBoB,gBAAiBvB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,qBACvBqB,YAAaxB,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvBsB,WAAYzB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBuB,qBAAsB1B,EAAMC,OACxBD,EAAME,MAAMC,OAAO,wBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,sBAAsB8B,OAAO,GAAGC,WAClEP,iBAAkB3B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,+BACvByB,cAAe5B,EAAME,MAAMC,OAAO,oBAClC0B,wBAAyB7B,EAAME,MAAMC,OAAO,qBAC5C2B,oBAAqB9B,EAAME,MAAMC,OAAO,wBACrCH,EAAMqB,YAIjBe,SAAU,CACRtC,QAASC,IAAG,CAAA,GAAA,IACPC,GACDoB,SAAS,CACPE,MAAOtB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBoB,gBAAiBvB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,IAAIH,WACvEV,YAAaxB,EAAMC,OACfD,EAAME,MAAMC,OAAO,qBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,IAAIH,WACvET,WAAYzB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBuB,qBAAsB1B,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,GAAGH,WACtEP,iBAAkB3B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,qBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,yBAAyBkC,QAAQ,GAAGH,WACtEN,cAAe5B,EAAME,MAAMC,OAAO,oBAClC0B,wBAAyB7B,EAAME,MAAMC,OAAO,qBAC5C2B,oBAAqB9B,EAAME,MAAMC,OAAO,wBACrCH,EAAMqB,WAGfc,QAASpC,IAAG,CAAA,GAAA,IACPC,GACDoB,SAAS,CACPE,MAAOtB,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBoB,gBAAiBvB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAO,wBACvBqB,YAAaxB,EAAME,MAAMC,OAAO,qBAChCsB,WAAYzB,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,2BACvBuB,qBAAsB1B,EAAMC,OACxBD,EAAME,MAAMC,OAAO,qBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,yBAAyB8B,OAAO,GAAGC,WACrEP,iBAAkB3B,EAAME,MAAMC,OAAO,qBACrCyB,cAAe5B,EAAME,MAAMC,OAAO,oBAClC0B,wBAAyB7B,EAAME,MAAMC,OAAO,qBAC5C2B,oBAAqB9B,EAAME,MAAMC,OAAO,wBACrCH,EAAMqB,YAIjBiB,MAAO,CACLxC,QAASC,IAAG,CAAA,GAAA,IACPC,GACDoB,SAAS,CACPE,MAAOtB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBoB,gBAAiBvB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBqB,YAAaxB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBsB,WAAYzB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBuB,qBAAsB1B,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnEP,iBAAkB3B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,uBAAuB8B,OAAO,GAAGC,WACnEN,cAAe5B,EAAME,MAAMC,OAAO,oBAClC0B,wBAAyB7B,EAAME,MAAMC,OAAO,qBAC5C2B,oBAAqB9B,EAAME,MAAMC,OAAO,wBACrCH,EAAMqB,WAGfc,QAASpC,IAAG,CAAA,GAAA,IACPC,GACDoB,SAAS,CACPE,MAAOtB,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBoB,gBAAiBvB,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,qBACvBqB,YAAaxB,EAAMC,OACfD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvBsB,WAAYzB,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBuB,qBAAsB1B,EAAMC,OACxBD,EAAME,MAAMC,OAAO,sBAClB6B,UAAUhC,EAAME,MAAMC,OAAO,sBAAsB8B,OAAO,GAAGC,WAClEP,iBAAkB3B,EAAMC,OACpBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,+BACvByB,cAAe5B,EAAME,MAAMC,OAAO,oBAClC0B,wBAAyB7B,EAAME,MAAMC,OAAO,qBAC5C2B,oBAAqB9B,EAAME,MAAMC,OAAO,wBACrCH,EAAMqB,aAMZ,MAAMkB,KAAO5B,OAAO6B,OAAO3B,WAA2B,CAC3DK,kBAAmBzB,uBACnBoB,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IACGX,IACD,MAAMyC,KAAEA,EAAIC,MAAEA,GAAU1C,EACxB,MAAM2C,EAAS3C,EAAM4C,QAAU,EAAI,EACnC,MAAMC,EAAaJ,EAAO,EAAIE,EAC9B,MAAMG,EAAcJ,EAAQ,EAAIC,EAIhC,MAAO,mDAEM3C,EAAM+C,SAAW,QAAU,cAAgB,gPAShDrC,wBACAM,mEAGAN,qCACamC,OAAgBC,OAAiBA,OAAiBD,oCAC9CJ,EAAO,OAAS,yCACfC,EAAQ,OAAS,kCACxBD,GAAO,EAAK,+BACXC,GAAQ,EAAK,iEAvBND,GAAO,EAAK,IAAMC,EAAQ,EAAI,oEAC7BA,GAAQ,EAAK,IAAMD,EAAO,EAAI,yBA6BzDzC,IACD,GAAIA,EAAM+C,SAAW,QAAS,CAC5B,IAAIC,EAASjB,aAAajC,QAK1B,OAHIE,EAAMsC,QAAOU,EAASjB,aAAaO,QACnCtC,EAAMoC,UAAYpC,EAAMiD,aAAWD,EAASjB,aAAaK,UAEtDpC,EAAMmC,QAAUa,EAAOb,QAAUa,EAAOlD,OACjD,CAEA,OAAIE,EAAMO,SAAWP,EAAMkD,WAAa,UAAkBrD,eAAeU,QACrEP,EAAMQ,eAAiBR,EAAMkD,WAAa,gBAAwBrD,eAAeW,cACjFR,EAAMS,QAAUT,EAAMkD,WAAa,SAAiBrD,eAAeY,OAEhEZ,eAAeC,SAGtBqD,MACAC,OACAC,eACAC,iBAECtD,GAAUA,EAAMsB,OAAS,UAAUiC,SAASvD,EAAMsB,MAAOtB,MACzDA,GAAUA,EAAMwB,aAAe,iBAAiB+B,SAASvD,EAAMwB,YAAaxB"}