@foxford/ui 2.102.0 → 2.103.0-beta-bdca95a-20260331

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 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;
 //# 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 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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"}

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 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};
 //# 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 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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"}

package/components/TabList/TabList.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var tabList=require('../../shared/context/tabList.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var focus=require('../../mixins/focus.js');var TabListPanel=require('./TabListPanel.js');var hooks=require('./hooks.js');var TabListMenuTab=require('./TabListMenuTab.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/ChevronLeft/index.js');var index$1=require('../../icon-pack/src/icons/ChevronRight/index.js');const TabList=Object.assign(withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:r="m",layout:o="horizontal",gap:s=8,activationOnFocus:n=!1,tabsAutoGroup:a=!1,scrollControls:i=!1,scrollFading:l=!1,defaultActiveTab:c,activeTab:u,onActiveTabChange:d,variant:b,disabled:h,children:y,menuItems:m,addon:v,menuTabText:g,menuTabControl:x,scrollControlLeft:j,scrollControlRight:T,palette:f,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q,...D}=e;const O=React.useMemo((()=>({size:r,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S})),[r,R,L,C,k,p,S]);const X={layout:o,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q};const P=React.useRef(null);const E=React.useRef(null);const w=React.useRef(null);React.useImperativeHandle(t,(()=>P.current),[]);const F=hooks.useTabListItems(y,m);const H=hooks.useTabListAutoGroup({enabled:a,tabList:F.tabs});const K=hooks.useTabList({defaultActiveTab:c,activeTab:u,onActiveTabChange:d,tabList:a?F.tabs:F.combined});const{scrollThresholds:_,setScrollThresholds:N}=useScrollThresholds.useScrollThresholds({enabled:!a,target:E});const U={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:jsxRuntime.jsx(index.ChevronLeft,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current||!w.current)return;const e=Math.round(E.current.getBoundingClientRect().left+w.current.getBoundingClientRect().width);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().left+focus.focus.padding)));const r=t.findIndex((t=>t>=e));[-1,0,1].includes(r)?E.current.scrollTo({top:0,left:0,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[r-1]-e,behavior:'smooth'})}};const W={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:jsxRuntime.jsx(index$1.ChevronRight,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current)return;const e=Math.round(E.current.getBoundingClientRect().right);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().right+focus.focus.padding))).reverse();const r=t.findIndex((t=>t<=e));[-1,0,1].includes(r)?E.current.scrollTo({top:0,left:E.current.scrollWidth,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[r-1]-e,behavior:'smooth'})}};const Y=React.useMemo((()=>({...K,activationOnFocus:n})),[K,n]);const Z=React.useMemo((()=>({...O,role:'tab',marginRight:s,variant:b,disabled:h,palette:{color:f.tabColor,colorHover:f.tabColorHover,colorActive:f.tabColorActive,colorDisabled:f.tabColorDisabled,colorActiveDisabled:f.tabColorActiveDisabled,backgroundColor:f.tabBackgroundColor,backgroundColorHover:f.tabBackgroundColorHover,backgroundColorActive:f.tabBackgroundColorActive,backgroundColorDisabled:f.tabBackgroundColorDisabled,backgroundColorActiveDisabled:f.tabBackgroundColorActiveDisabled}})),[O,s,b,h,f]);const G=React.useMemo((()=>({...O,marginRight:s,variant:b})),[O,s,b]);const $=a?H.groups.tabs:F.tabs;const V=a?H.groups.menuItems:F.menuItems;return jsxRuntime.jsxs(style.Root,{...D,...O,...X,layouts:layouts.LAYOUTS,palette:{backgroundColor:f.backgroundColor},ref:e=>{P.current=e,H.refs.root(e)},children:[jsxRuntime.jsxs(style.List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(constants.keyboardKeys.Home.validate(e.key)||constants.keyboardKeys.End.validate(e.key)||constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter((e=>!e.closest('[aria-hidden="true"]')));t.length!==0&&(constants.keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):constants.keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),dom.navigateHorizontalList(e.key,document.activeElement,t,dom.SELECTORS_FOCUSABLE)))},children:[jsxRuntime.jsxs(style.Container,{ref:H.refs.container,children:[jsxRuntime.jsxs(style.TabsTrack,{children:[a||!i&&!l?null:jsxRuntime.jsxs(style.Floats,{hidden:_.left===!0||_.left===null,children:[i?jsxRuntime.jsx(style.Control,{ref:w,children:typeof j=='function'?j(U):jsxRuntime.jsx(IconButton.IconButton,{...U})}):null,l?jsxRuntime.jsx(style.ScrollFading,{}):null]}),jsxRuntime.jsx(style.TrackScrollable,{ref:e=>{E.current=e,H.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const r=e.target.getBoundingClientRect();const o=Math.round(t.right);const s=Math.round(w.current&&_.left===!1?t.left+w.current.getBoundingClientRect().width:t.left);const n=Math.round(r.right+focus.focus.padding);const a=Math.round(r.left-focus.focus.padding);n>o?e.currentTarget.scrollBy(n-o,0):a<s&&e.currentTarget.scrollBy(a-s,0)},onScroll:e=>{a||N(e.currentTarget)},children:jsxRuntime.jsx(tabList.TabListTabsContext.Provider,{value:Y,children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:Z,children:a?$.map(((e,t)=>jsxRuntime.jsx(style.TabWrapper,{children:e},t))):$})})}),!a&&l?jsxRuntime.jsx(style.Floats,{hidden:_.right===!0||_.right===null,after:!0,children:jsxRuntime.jsx(style.ScrollFading,{after:!0})}):null]}),!a&&i?jsxRuntime.jsx(style.Control,{hidden:_.right===!0||_.right===null,children:typeof T=='function'?T(W):jsxRuntime.jsx(IconButton.IconButton,{...W})}):null,V.length>0&&jsxRuntime.jsx(style.Control,{ref:e=>{H.refs.control(e)},children:jsxRuntime.jsx(TabListMenuTab.TabListMenuTab,{...O,...K,role:"tab",variant:b,disabled:h,palette:f,menuItems:V,activationOnFocus:n,text:g,control:x})})]}),a?jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:jsxRuntime.jsx(style.TabsHidden,{children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:G,children:F.tabs.map(((e,t)=>jsxRuntime.jsx(style.TabWrapper,{ref:e=>{H.refs.tabHidden(t,e)},children:React.cloneElement(e,{ref:null,id:void 0,role:'none'})},t)))})})}):null]}),v?jsxRuntime.jsx(style.Addon,{...X,layouts:layouts.LAYOUTS_ADDON,ref:e=>{H.refs.addon(e)},children:v}):null,b==='underlined'&&jsxRuntime.jsx(style.DividerPositioned,{...X,layouts:layouts.LAYOUTS_DIVIDER,color:f.dividerColor})]})})),{displayName:'TabList',sizes:sizes.SIZES}),{Tab:TabListTab.TabListTab,Panel:TabListPanel.TabListPanel});exports.TabList=TabList;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var tabList=require('../../shared/context/tabList.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var focus=require('../../mixins/focus.js');var TabListPanel=require('./TabListPanel.js');var hooks=require('./hooks.js');var TabListMenuTab=require('./TabListMenuTab.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var TabListTab=require('../TabListTab/TabListTab.js');var IconButton=require('../IconButton/IconButton.js');var index=require('../../icon-pack/src/icons/ChevronLeft/index.js');var index$1=require('../../icon-pack/src/icons/ChevronRight/index.js');const TabList=Object.assign(withMergedProps.withMergedProps(React.forwardRef((e,t)=>{const{size:r="m",layout:o="horizontal",gap:s=8,activationOnFocus:n=!1,tabsAutoGroup:a=!1,scrollControls:i=!1,scrollFading:l=!1,defaultActiveTab:c,activeTab:u,onActiveTabChange:d,variant:b,disabled:h,children:y,menuItems:m,addon:v,menuTabText:g,menuTabControl:x,scrollControlLeft:j,scrollControlRight:T,palette:f,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q,...D}=e;const O=React.useMemo(()=>({size:r,sizeXXS:R,sizeXS:L,sizeS:C,sizeM:k,sizeL:p,sizeXL:S}),[r,R,L,C,k,p,S]);const X={layout:o,layoutXXS:A,layoutXS:z,layoutS:B,layoutM:M,layoutL:I,layoutXL:q};const P=React.useRef(null);const E=React.useRef(null);const w=React.useRef(null);React.useImperativeHandle(t,()=>P.current,[]);const F=hooks.useTabListItems(y,m);const H=hooks.useTabListAutoGroup({enabled:a,tabList:F.tabs});const K=hooks.useTabList({defaultActiveTab:c,activeTab:u,onActiveTabChange:d,tabList:a?F.tabs:F.combined});const{scrollThresholds:_,setScrollThresholds:N}=useScrollThresholds.useScrollThresholds({enabled:!a,target:E});const U={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:jsxRuntime.jsx(index.ChevronLeft,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current||!w.current)return;const e=Math.round(E.current.getBoundingClientRect().left+w.current.getBoundingClientRect().width);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map(e=>Math.round(e.getBoundingClientRect().left+focus.focus.padding));const r=t.findIndex(t=>t>=e);[-1,0,1].includes(r)?E.current.scrollTo({top:0,left:0,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[r-1]-e,behavior:'smooth'})}};const W={...O,sizes:sizes.SIZES_SCROLL_CONTROL,icon:jsxRuntime.jsx(index$1.ChevronRight,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!E.current)return;const e=Math.round(E.current.getBoundingClientRect().right);const t=Array.from(E.current.querySelectorAll('[role="tab"]')).map(e=>Math.round(e.getBoundingClientRect().right+focus.focus.padding)).reverse();const r=t.findIndex(t=>t<=e);[-1,0,1].includes(r)?E.current.scrollTo({top:0,left:E.current.scrollWidth,behavior:'smooth'}):E.current.scrollBy({top:0,left:t[r-1]-e,behavior:'smooth'})}};const Y=React.useMemo(()=>({...K,activationOnFocus:n}),[K,n]);const Z=React.useMemo(()=>({...O,role:'tab',marginRight:s,variant:b,disabled:h,palette:{color:f.tabColor,colorHover:f.tabColorHover,colorActive:f.tabColorActive,colorDisabled:f.tabColorDisabled,colorActiveDisabled:f.tabColorActiveDisabled,backgroundColor:f.tabBackgroundColor,backgroundColorHover:f.tabBackgroundColorHover,backgroundColorActive:f.tabBackgroundColorActive,backgroundColorDisabled:f.tabBackgroundColorDisabled,backgroundColorActiveDisabled:f.tabBackgroundColorActiveDisabled}}),[O,s,b,h,f]);const G=React.useMemo(()=>({...O,marginRight:s,variant:b}),[O,s,b]);const $=a?H.groups.tabs:F.tabs;const V=a?H.groups.menuItems:F.menuItems;return jsxRuntime.jsxs(style.Root,{...D,...O,...X,layouts:layouts.LAYOUTS,palette:{backgroundColor:f.backgroundColor},ref:e=>{P.current=e,H.refs.root(e)},children:[jsxRuntime.jsxs(style.List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(constants.keyboardKeys.Home.validate(e.key)||constants.keyboardKeys.End.validate(e.key)||constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter(e=>!e.closest('[aria-hidden="true"]'));t.length!==0&&(constants.keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):constants.keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(constants.keyboardKeys.ArrowRight.validate(e.key)||constants.keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),dom.navigateHorizontalList(e.key,document.activeElement,t,dom.SELECTORS_FOCUSABLE)))},children:[jsxRuntime.jsxs(style.Container,{ref:H.refs.container,children:[jsxRuntime.jsxs(style.TabsTrack,{children:[a||!i&&!l?null:jsxRuntime.jsxs(style.Floats,{hidden:_.left===!0||_.left===null,children:[i?jsxRuntime.jsx(style.Control,{ref:w,children:typeof j=='function'?j(U):jsxRuntime.jsx(IconButton.IconButton,{...U})}):null,l?jsxRuntime.jsx(style.ScrollFading,{}):null]}),jsxRuntime.jsx(style.TrackScrollable,{ref:e=>{E.current=e,H.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const r=e.target.getBoundingClientRect();const o=Math.round(t.right);const s=Math.round(w.current&&_.left===!1?t.left+w.current.getBoundingClientRect().width:t.left);const n=Math.round(r.right+focus.focus.padding);const a=Math.round(r.left-focus.focus.padding);n>o?e.currentTarget.scrollBy(n-o,0):a<s&&e.currentTarget.scrollBy(a-s,0)},onScroll:e=>{a||N(e.currentTarget)},children:jsxRuntime.jsx(tabList.TabListTabsContext.Provider,{value:Y,children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:Z,children:a?$.map((e,t)=>jsxRuntime.jsx(style.TabWrapper,{children:e},t)):$})})}),!a&&l?jsxRuntime.jsx(style.Floats,{hidden:_.right===!0||_.right===null,after:!0,children:jsxRuntime.jsx(style.ScrollFading,{after:!0})}):null]}),!a&&i?jsxRuntime.jsx(style.Control,{hidden:_.right===!0||_.right===null,children:typeof T=='function'?T(W):jsxRuntime.jsx(IconButton.IconButton,{...W})}):null,V.length>0&&jsxRuntime.jsx(style.Control,{ref:e=>{H.refs.control(e)},children:jsxRuntime.jsx(TabListMenuTab.TabListMenuTab,{...O,...K,role:"tab",variant:b,disabled:h,palette:f,menuItems:V,activationOnFocus:n,text:g,control:x})})]}),a?jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:jsxRuntime.jsx(style.TabsHidden,{children:jsxRuntime.jsx(tabList.TabListPropsContext.Provider,{value:G,children:F.tabs.map((e,t)=>jsxRuntime.jsx(style.TabWrapper,{ref:e=>{H.refs.tabHidden(t,e)},children:React.cloneElement(e,{ref:null,id:void 0,role:'none'})},t))})})}):null]}),v?jsxRuntime.jsx(style.Addon,{...X,layouts:layouts.LAYOUTS_ADDON,ref:e=>{H.refs.addon(e)},children:v}):null,b==='underlined'&&jsxRuntime.jsx(style.DividerPositioned,{...X,layouts:layouts.LAYOUTS_DIVIDER,color:f.dividerColor})]})}),{displayName:'TabList',sizes:sizes.SIZES}),{Tab:TabListTab.TabListTab,Panel:TabListPanel.TabListPanel});exports.TabList=TabList;
 //# sourceMappingURL=TabList.js.map

package/components/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, cloneElement, useMemo } from 'react'\nimport { ChevronLeft, ChevronRight } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { TabListTab } from 'components/TabListTab'\nimport { IconButton } from 'components/IconButton'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { keyboardKeys } from 'shared/constants'\nimport { navigateHorizontalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport { focus } from 'mixins/focus'\nimport { TabListPanel } from './TabListPanel'\nimport { useTabList, useTabListItems, useTabListAutoGroup } from './hooks'\nimport { TabListMenuTab } from './TabListMenuTab'\nimport { SIZES, SIZES_SCROLL_CONTROL } from './sizes'\nimport { LAYOUTS, LAYOUTS_DIVIDER, LAYOUTS_ADDON } from './layouts'\nimport type { TabListProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabList'\n\n/**\n *\n * Компонент для создания группы табов и ассоциированных с ними панелей с контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabList: React.ForwardRefExoticComponent<TabListProps> & {\n  Tab: typeof TabListTab\n  Panel: typeof TabListPanel\n} = Object.assign(\n  withMergedProps<TabListProps, HTMLDivElement>(\n    forwardRef<HTMLDivElement, MergedProps<TabListProps>>((props, forwardedRef) => {\n      const {\n        size = 'm',\n        layout = 'horizontal',\n        gap = 8,\n        activationOnFocus = false,\n        tabsAutoGroup = false,\n        scrollControls = false,\n        scrollFading = false,\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        variant,\n        disabled,\n        children,\n        menuItems: menuItemsProp,\n        addon,\n        menuTabText,\n        menuTabControl,\n        scrollControlLeft,\n        scrollControlRight,\n        palette,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n        ...restProps\n      } = props\n\n      const sizeProps = useMemo(\n        () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n        [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n      )\n\n      const layoutProps = {\n        layout,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n      }\n\n      const rootRef = useRef<HTMLDivElement | null>(null)\n      const tabsTrackRef = useRef<HTMLDivElement | null>(null)\n      const scrollControlRef = useRef<HTMLDivElement | null>(null)\n\n      useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement, [])\n\n      const tabListItems = useTabListItems(children, menuItemsProp)\n\n      const autoGroupMode = useTabListAutoGroup({\n        enabled: tabsAutoGroup,\n        tabList: tabListItems.tabs,\n      })\n\n      const tabList = useTabList({\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        tabList: tabsAutoGroup ? tabListItems.tabs : tabListItems.combined,\n      })\n\n      const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n        enabled: !tabsAutoGroup,\n        target: tabsTrackRef,\n      })\n\n      const scrollControlLeftProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: <ChevronLeft />,\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current || !scrollControlRef.current) {\n            return\n          }\n\n          const trackLeft = Math.round(\n            tabsTrackRef.current.getBoundingClientRect().left + scrollControlRef.current.getBoundingClientRect().width\n          )\n          const tabsLeft = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]')).map((tab) =>\n            Math.round(tab.getBoundingClientRect().left + focus.padding)\n          )\n\n          const idx = tabsLeft.findIndex((tabLeft) => tabLeft >= trackLeft)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsLeft[idx - 1] - trackLeft,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const scrollControlRightProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: <ChevronRight />,\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current) {\n            return\n          }\n\n          const trackRight = Math.round(tabsTrackRef.current.getBoundingClientRect().right)\n          const tabsRight = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]'))\n            .map((tab) => Math.round(tab.getBoundingClientRect().right + focus.padding))\n            .reverse()\n\n          const idx = tabsRight.findIndex((tabRight) => tabRight <= trackRight)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: tabsTrackRef.current.scrollWidth, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsRight[idx - 1] - trackRight,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const controlsContextProps = useMemo(() => ({ ...tabList, activationOnFocus }), [tabList, activationOnFocus])\n\n      const tabsContextProps = useMemo(\n        () => ({\n          ...sizeProps,\n          role: 'tab',\n          marginRight: gap,\n          variant,\n          disabled,\n          palette: {\n            color: palette.tabColor,\n            colorHover: palette.tabColorHover,\n            colorActive: palette.tabColorActive,\n            colorDisabled: palette.tabColorDisabled,\n            colorActiveDisabled: palette.tabColorActiveDisabled,\n            backgroundColor: palette.tabBackgroundColor,\n            backgroundColorHover: palette.tabBackgroundColorHover,\n            backgroundColorActive: palette.tabBackgroundColorActive,\n            backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n            backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n          },\n        }),\n        [sizeProps, gap, variant, disabled, palette]\n      )\n\n      const hiddenTabsContextProps = useMemo(\n        () => ({ ...sizeProps, marginRight: gap, variant }),\n        [sizeProps, gap, variant]\n      )\n\n      const tabs = tabsAutoGroup ? autoGroupMode.groups.tabs : tabListItems.tabs\n      const menuItems = tabsAutoGroup ? autoGroupMode.groups.menuItems : tabListItems.menuItems\n\n      return (\n        <Styled.Root\n          {...restProps}\n          {...sizeProps}\n          {...layoutProps}\n          layouts={LAYOUTS}\n          palette={{\n            backgroundColor: palette.backgroundColor,\n          }}\n          ref={(node) => {\n            rootRef.current = node\n            autoGroupMode.refs.root(node)\n          }}\n        >\n          <Styled.List\n            role='tablist'\n            aria-orientation='horizontal'\n            onKeyDown={(evt) => {\n              if (\n                !(document.activeElement instanceof HTMLElement) ||\n                !document.activeElement.matches('[role=\"tab\"]') ||\n                (!keyboardKeys.Home.validate(evt.key) &&\n                  !keyboardKeys.End.validate(evt.key) &&\n                  !keyboardKeys.ArrowRight.validate(evt.key) &&\n                  !keyboardKeys.ArrowLeft.validate(evt.key))\n              ) {\n                return\n              }\n\n              const tabListTabs = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n                (tab) => !tab.closest('[aria-hidden=\"true\"]')\n              )\n\n              if (tabListTabs.length === 0) return\n\n              if (keyboardKeys.Home.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[0].focus()\n              } else if (keyboardKeys.End.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[tabListTabs.length - 1].focus()\n              } else if (keyboardKeys.ArrowRight.validate(evt.key) || keyboardKeys.ArrowLeft.validate(evt.key)) {\n                evt.preventDefault()\n                navigateHorizontalList(evt.key, document.activeElement, tabListTabs, SELECTORS_FOCUSABLE)\n              }\n            }}\n          >\n            <Styled.Container ref={autoGroupMode.refs.container}>\n              <Styled.TabsTrack>\n                {!tabsAutoGroup && (scrollControls || scrollFading) ? (\n                  <Styled.Floats hidden={scrollThresholds.left === true || scrollThresholds.left === null}>\n                    {scrollControls ? (\n                      <Styled.Control ref={scrollControlRef}>\n                        {typeof scrollControlLeft === 'function' ? (\n                          scrollControlLeft(scrollControlLeftProps)\n                        ) : (\n                          <IconButton {...scrollControlLeftProps} />\n                        )}\n                      </Styled.Control>\n                    ) : null}\n                    {scrollFading ? <Styled.ScrollFading /> : null}\n                  </Styled.Floats>\n                ) : null}\n                <Styled.TrackScrollable\n                  ref={(node) => {\n                    tabsTrackRef.current = node\n                    autoGroupMode.refs.track(node)\n                  }}\n                  tabIndex={-1}\n                  data-ui-track-scrollable\n                  onFocus={(evt) => {\n                    if (!evt.target.matches('[role=\"tab\"]')) {\n                      return\n                    }\n\n                    const trackRect = evt.currentTarget.getBoundingClientRect()\n                    const tabRect = evt.target.getBoundingClientRect()\n\n                    const trackRight = Math.round(trackRect.right)\n                    const trackLeft = Math.round(\n                      scrollControlRef.current && scrollThresholds.left === false\n                        ? trackRect.left + scrollControlRef.current.getBoundingClientRect().width\n                        : trackRect.left\n                    )\n\n                    const tabRight = Math.round(tabRect.right + focus.padding)\n                    const tabLeft = Math.round(tabRect.left - focus.padding)\n\n                    if (tabRight > trackRight) {\n                      evt.currentTarget.scrollBy(tabRight - trackRight, 0)\n                    } else if (tabLeft < trackLeft) {\n                      evt.currentTarget.scrollBy(tabLeft - trackLeft, 0)\n                    }\n                  }}\n                  onScroll={(evt) => {\n                    if (!tabsAutoGroup) {\n                      setScrollThresholds(evt.currentTarget)\n                    }\n                  }}\n                >\n                  <TabListTabsContext.Provider value={controlsContextProps}>\n                    <TabListPropsContext.Provider value={tabsContextProps}>\n                      {tabsAutoGroup\n                        ? tabs.map((tab, idx) => <Styled.TabWrapper key={idx}>{tab}</Styled.TabWrapper>)\n                        : tabs}\n                    </TabListPropsContext.Provider>\n                  </TabListTabsContext.Provider>\n                </Styled.TrackScrollable>\n                {!tabsAutoGroup && scrollFading ? (\n                  <Styled.Floats hidden={scrollThresholds.right === true || scrollThresholds.right === null} after>\n                    <Styled.ScrollFading after />\n                  </Styled.Floats>\n                ) : null}\n              </Styled.TabsTrack>\n              {!tabsAutoGroup && scrollControls ? (\n                <Styled.Control hidden={scrollThresholds.right === true || scrollThresholds.right === null}>\n                  {typeof scrollControlRight === 'function' ? (\n                    scrollControlRight(scrollControlRightProps)\n                  ) : (\n                    <IconButton {...scrollControlRightProps} />\n                  )}\n                </Styled.Control>\n              ) : null}\n              {menuItems.length > 0 && (\n                <Styled.Control\n                  ref={(node) => {\n                    autoGroupMode.refs.control(node)\n                  }}\n                >\n                  <TabListMenuTab\n                    {...sizeProps}\n                    {...tabList}\n                    role='tab'\n                    variant={variant}\n                    disabled={disabled}\n                    palette={palette}\n                    menuItems={menuItems}\n                    activationOnFocus={activationOnFocus}\n                    text={menuTabText}\n                    control={menuTabControl}\n                  />\n                </Styled.Control>\n              )}\n            </Styled.Container>\n            {tabsAutoGroup ? (\n              <Styled.Hidden aria-hidden>\n                <Styled.TabsHidden>\n                  <TabListPropsContext.Provider value={hiddenTabsContextProps}>\n                    {tabListItems.tabs.map((tab, idx) => (\n                      <Styled.TabWrapper\n                        key={idx}\n                        ref={(node) => {\n                          autoGroupMode.refs.tabHidden(idx, node)\n                        }}\n                      >\n                        {cloneElement(tab, { ref: null, id: undefined, role: 'none' })}\n                      </Styled.TabWrapper>\n                    ))}\n                  </TabListPropsContext.Provider>\n                </Styled.TabsHidden>\n              </Styled.Hidden>\n            ) : null}\n          </Styled.List>\n          {addon ? (\n            <Styled.Addon\n              {...layoutProps}\n              layouts={LAYOUTS_ADDON}\n              ref={(node) => {\n                autoGroupMode.refs.addon(node)\n              }}\n            >\n              {addon}\n            </Styled.Addon>\n          ) : null}\n          {variant === 'underlined' && (\n            <Styled.DividerPositioned {...layoutProps} layouts={LAYOUTS_DIVIDER} color={palette.dividerColor} />\n          )}\n        </Styled.Root>\n      )\n    }),\n    {\n      displayName: COMPONENT_NAME,\n      sizes: SIZES,\n    }\n  ),\n  {\n    Tab: TabListTab,\n    Panel: TabListPanel,\n  }\n)\n\nexport { TabList }\n"],"names":["TabList","Object","assign","withMergedProps","forwardRef","props","forwardedRef","size","layout","gap","activationOnFocus","tabsAutoGroup","scrollControls","scrollFading","defaultActiveTab","activeTab","onActiveTabChange","variant","disabled","children","menuItems","menuItemsProp","addon","menuTabText","menuTabControl","scrollControlLeft","scrollControlRight","palette","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","useMemo","layoutProps","rootRef","useRef","tabsTrackRef","scrollControlRef","useImperativeHandle","current","tabListItems","useTabListItems","autoGroupMode","useTabListAutoGroup","enabled","tabList","tabs","useTabList","combined","scrollThresholds","setScrollThresholds","useScrollThresholds","target","scrollControlLeftProps","sizes","SIZES_SCROLL_CONTROL","icon","_jsx","ChevronLeft","tabIndex","onFocus","evt","currentTarget","blur","onClick","trackLeft","Math","round","getBoundingClientRect","left","width","tabsLeft","Array","from","querySelectorAll","map","tab","focus","padding","idx","findIndex","tabLeft","includes","scrollTo","top","behavior","scrollBy","scrollControlRightProps","ChevronRight","trackRight","right","tabsRight","reverse","tabRight","scrollWidth","controlsContextProps","tabsContextProps","role","marginRight","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","hiddenTabsContextProps","groups","_jsxs","Styled","layouts","LAYOUTS","ref","node","refs","root","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","tabListTabs","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","IconButton","track","trackRect","tabRect","onScroll","TabListTabsContext","Provider","value","TabListPropsContext","after","control","TabListMenuTab","text","tabHidden","cloneElement","id","undefined","LAYOUTS_ADDON","LAYOUTS_DIVIDER","dividerColor","displayName","SIZES","Tab","TabListTab","Panel","TabListPanel"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/TabList/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef, useImperativeHandle, cloneElement, useMemo } from 'react'\nimport { ChevronLeft, ChevronRight } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { TabListTab } from 'components/TabListTab'\nimport { IconButton } from 'components/IconButton'\nimport type { IconButtonProps } from 'components/IconButton'\nimport { TabListTabsContext, TabListPropsContext } from 'shared/context/tabList'\nimport { keyboardKeys } from 'shared/constants'\nimport { navigateHorizontalList, SELECTORS_FOCUSABLE } from 'shared/utils/dom'\nimport { focus } from 'mixins/focus'\nimport { TabListPanel } from './TabListPanel'\nimport { useTabList, useTabListItems, useTabListAutoGroup } from './hooks'\nimport { TabListMenuTab } from './TabListMenuTab'\nimport { SIZES, SIZES_SCROLL_CONTROL } from './sizes'\nimport { LAYOUTS, LAYOUTS_DIVIDER, LAYOUTS_ADDON } from './layouts'\nimport type { TabListProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabList'\n\n/**\n *\n * Компонент для создания группы табов и ассоциированных с ними панелей с контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n */\nconst TabList: React.ForwardRefExoticComponent<TabListProps> & {\n  Tab: typeof TabListTab\n  Panel: typeof TabListPanel\n} = Object.assign(\n  withMergedProps<TabListProps, HTMLDivElement>(\n    forwardRef<HTMLDivElement, MergedProps<TabListProps>>((props, forwardedRef) => {\n      const {\n        size = 'm',\n        layout = 'horizontal',\n        gap = 8,\n        activationOnFocus = false,\n        tabsAutoGroup = false,\n        scrollControls = false,\n        scrollFading = false,\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        variant,\n        disabled,\n        children,\n        menuItems: menuItemsProp,\n        addon,\n        menuTabText,\n        menuTabControl,\n        scrollControlLeft,\n        scrollControlRight,\n        palette,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n        ...restProps\n      } = props\n\n      const sizeProps = useMemo(\n        () => ({ size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL }),\n        [size, sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL]\n      )\n\n      const layoutProps = {\n        layout,\n        layoutXXS,\n        layoutXS,\n        layoutS,\n        layoutM,\n        layoutL,\n        layoutXL,\n      }\n\n      const rootRef = useRef<HTMLDivElement | null>(null)\n      const tabsTrackRef = useRef<HTMLDivElement | null>(null)\n      const scrollControlRef = useRef<HTMLDivElement | null>(null)\n\n      useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement, [])\n\n      const tabListItems = useTabListItems(children, menuItemsProp)\n\n      const autoGroupMode = useTabListAutoGroup({\n        enabled: tabsAutoGroup,\n        tabList: tabListItems.tabs,\n      })\n\n      const tabList = useTabList({\n        defaultActiveTab,\n        activeTab,\n        onActiveTabChange,\n        tabList: tabsAutoGroup ? tabListItems.tabs : tabListItems.combined,\n      })\n\n      const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n        enabled: !tabsAutoGroup,\n        target: tabsTrackRef,\n      })\n\n      const scrollControlLeftProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: <ChevronLeft />,\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current || !scrollControlRef.current) {\n            return\n          }\n\n          const trackLeft = Math.round(\n            tabsTrackRef.current.getBoundingClientRect().left + scrollControlRef.current.getBoundingClientRect().width\n          )\n          const tabsLeft = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]')).map((tab) =>\n            Math.round(tab.getBoundingClientRect().left + focus.padding)\n          )\n\n          const idx = tabsLeft.findIndex((tabLeft) => tabLeft >= trackLeft)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsLeft[idx - 1] - trackLeft,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const scrollControlRightProps: IconButtonProps = {\n        ...sizeProps,\n        sizes: SIZES_SCROLL_CONTROL,\n        icon: <ChevronRight />,\n        tabIndex: -1,\n        onFocus: (evt) => {\n          evt.currentTarget.blur()\n        },\n        onClick: () => {\n          if (!tabsTrackRef.current) {\n            return\n          }\n\n          const trackRight = Math.round(tabsTrackRef.current.getBoundingClientRect().right)\n          const tabsRight = Array.from(tabsTrackRef.current.querySelectorAll<HTMLLIElement>('[role=\"tab\"]'))\n            .map((tab) => Math.round(tab.getBoundingClientRect().right + focus.padding))\n            .reverse()\n\n          const idx = tabsRight.findIndex((tabRight) => tabRight <= trackRight)\n\n          if ([-1, 0, 1].includes(idx)) {\n            tabsTrackRef.current.scrollTo({ top: 0, left: tabsTrackRef.current.scrollWidth, behavior: 'smooth' })\n          } else {\n            tabsTrackRef.current.scrollBy({\n              top: 0,\n              left: tabsRight[idx - 1] - trackRight,\n              behavior: 'smooth',\n            })\n          }\n        },\n      }\n\n      const controlsContextProps = useMemo(() => ({ ...tabList, activationOnFocus }), [tabList, activationOnFocus])\n\n      const tabsContextProps = useMemo(\n        () => ({\n          ...sizeProps,\n          role: 'tab',\n          marginRight: gap,\n          variant,\n          disabled,\n          palette: {\n            color: palette.tabColor,\n            colorHover: palette.tabColorHover,\n            colorActive: palette.tabColorActive,\n            colorDisabled: palette.tabColorDisabled,\n            colorActiveDisabled: palette.tabColorActiveDisabled,\n            backgroundColor: palette.tabBackgroundColor,\n            backgroundColorHover: palette.tabBackgroundColorHover,\n            backgroundColorActive: palette.tabBackgroundColorActive,\n            backgroundColorDisabled: palette.tabBackgroundColorDisabled,\n            backgroundColorActiveDisabled: palette.tabBackgroundColorActiveDisabled,\n          },\n        }),\n        [sizeProps, gap, variant, disabled, palette]\n      )\n\n      const hiddenTabsContextProps = useMemo(\n        () => ({ ...sizeProps, marginRight: gap, variant }),\n        [sizeProps, gap, variant]\n      )\n\n      const tabs = tabsAutoGroup ? autoGroupMode.groups.tabs : tabListItems.tabs\n      const menuItems = tabsAutoGroup ? autoGroupMode.groups.menuItems : tabListItems.menuItems\n\n      return (\n        <Styled.Root\n          {...restProps}\n          {...sizeProps}\n          {...layoutProps}\n          layouts={LAYOUTS}\n          palette={{\n            backgroundColor: palette.backgroundColor,\n          }}\n          ref={(node) => {\n            rootRef.current = node\n            autoGroupMode.refs.root(node)\n          }}\n        >\n          <Styled.List\n            role='tablist'\n            aria-orientation='horizontal'\n            onKeyDown={(evt) => {\n              if (\n                !(document.activeElement instanceof HTMLElement) ||\n                !document.activeElement.matches('[role=\"tab\"]') ||\n                (!keyboardKeys.Home.validate(evt.key) &&\n                  !keyboardKeys.End.validate(evt.key) &&\n                  !keyboardKeys.ArrowRight.validate(evt.key) &&\n                  !keyboardKeys.ArrowLeft.validate(evt.key))\n              ) {\n                return\n              }\n\n              const tabListTabs = Array.from(evt.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n                (tab) => !tab.closest('[aria-hidden=\"true\"]')\n              )\n\n              if (tabListTabs.length === 0) return\n\n              if (keyboardKeys.Home.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[0].focus()\n              } else if (keyboardKeys.End.validate(evt.key)) {\n                evt.preventDefault()\n                tabListTabs[tabListTabs.length - 1].focus()\n              } else if (keyboardKeys.ArrowRight.validate(evt.key) || keyboardKeys.ArrowLeft.validate(evt.key)) {\n                evt.preventDefault()\n                navigateHorizontalList(evt.key, document.activeElement, tabListTabs, SELECTORS_FOCUSABLE)\n              }\n            }}\n          >\n            <Styled.Container ref={autoGroupMode.refs.container}>\n              <Styled.TabsTrack>\n                {!tabsAutoGroup && (scrollControls || scrollFading) ? (\n                  <Styled.Floats hidden={scrollThresholds.left === true || scrollThresholds.left === null}>\n                    {scrollControls ? (\n                      <Styled.Control ref={scrollControlRef}>\n                        {typeof scrollControlLeft === 'function' ? (\n                          scrollControlLeft(scrollControlLeftProps)\n                        ) : (\n                          <IconButton {...scrollControlLeftProps} />\n                        )}\n                      </Styled.Control>\n                    ) : null}\n                    {scrollFading ? <Styled.ScrollFading /> : null}\n                  </Styled.Floats>\n                ) : null}\n                <Styled.TrackScrollable\n                  ref={(node) => {\n                    tabsTrackRef.current = node\n                    autoGroupMode.refs.track(node)\n                  }}\n                  tabIndex={-1}\n                  data-ui-track-scrollable\n                  onFocus={(evt) => {\n                    if (!evt.target.matches('[role=\"tab\"]')) {\n                      return\n                    }\n\n                    const trackRect = evt.currentTarget.getBoundingClientRect()\n                    const tabRect = evt.target.getBoundingClientRect()\n\n                    const trackRight = Math.round(trackRect.right)\n                    const trackLeft = Math.round(\n                      scrollControlRef.current && scrollThresholds.left === false\n                        ? trackRect.left + scrollControlRef.current.getBoundingClientRect().width\n                        : trackRect.left\n                    )\n\n                    const tabRight = Math.round(tabRect.right + focus.padding)\n                    const tabLeft = Math.round(tabRect.left - focus.padding)\n\n                    if (tabRight > trackRight) {\n                      evt.currentTarget.scrollBy(tabRight - trackRight, 0)\n                    } else if (tabLeft < trackLeft) {\n                      evt.currentTarget.scrollBy(tabLeft - trackLeft, 0)\n                    }\n                  }}\n                  onScroll={(evt) => {\n                    if (!tabsAutoGroup) {\n                      setScrollThresholds(evt.currentTarget)\n                    }\n                  }}\n                >\n                  <TabListTabsContext.Provider value={controlsContextProps}>\n                    <TabListPropsContext.Provider value={tabsContextProps}>\n                      {tabsAutoGroup\n                        ? tabs.map((tab, idx) => <Styled.TabWrapper key={idx}>{tab}</Styled.TabWrapper>)\n                        : tabs}\n                    </TabListPropsContext.Provider>\n                  </TabListTabsContext.Provider>\n                </Styled.TrackScrollable>\n                {!tabsAutoGroup && scrollFading ? (\n                  <Styled.Floats hidden={scrollThresholds.right === true || scrollThresholds.right === null} after>\n                    <Styled.ScrollFading after />\n                  </Styled.Floats>\n                ) : null}\n              </Styled.TabsTrack>\n              {!tabsAutoGroup && scrollControls ? (\n                <Styled.Control hidden={scrollThresholds.right === true || scrollThresholds.right === null}>\n                  {typeof scrollControlRight === 'function' ? (\n                    scrollControlRight(scrollControlRightProps)\n                  ) : (\n                    <IconButton {...scrollControlRightProps} />\n                  )}\n                </Styled.Control>\n              ) : null}\n              {menuItems.length > 0 && (\n                <Styled.Control\n                  ref={(node) => {\n                    autoGroupMode.refs.control(node)\n                  }}\n                >\n                  <TabListMenuTab\n                    {...sizeProps}\n                    {...tabList}\n                    role='tab'\n                    variant={variant}\n                    disabled={disabled}\n                    palette={palette}\n                    menuItems={menuItems}\n                    activationOnFocus={activationOnFocus}\n                    text={menuTabText}\n                    control={menuTabControl}\n                  />\n                </Styled.Control>\n              )}\n            </Styled.Container>\n            {tabsAutoGroup ? (\n              <Styled.Hidden aria-hidden>\n                <Styled.TabsHidden>\n                  <TabListPropsContext.Provider value={hiddenTabsContextProps}>\n                    {tabListItems.tabs.map((tab, idx) => (\n                      <Styled.TabWrapper\n                        key={idx}\n                        ref={(node) => {\n                          autoGroupMode.refs.tabHidden(idx, node)\n                        }}\n                      >\n                        {cloneElement(tab, { ref: null, id: undefined, role: 'none' })}\n                      </Styled.TabWrapper>\n                    ))}\n                  </TabListPropsContext.Provider>\n                </Styled.TabsHidden>\n              </Styled.Hidden>\n            ) : null}\n          </Styled.List>\n          {addon ? (\n            <Styled.Addon\n              {...layoutProps}\n              layouts={LAYOUTS_ADDON}\n              ref={(node) => {\n                autoGroupMode.refs.addon(node)\n              }}\n            >\n              {addon}\n            </Styled.Addon>\n          ) : null}\n          {variant === 'underlined' && (\n            <Styled.DividerPositioned {...layoutProps} layouts={LAYOUTS_DIVIDER} color={palette.dividerColor} />\n          )}\n        </Styled.Root>\n      )\n    }),\n    {\n      displayName: COMPONENT_NAME,\n      sizes: SIZES,\n    }\n  ),\n  {\n    Tab: TabListTab,\n    Panel: TabListPanel,\n  }\n)\n\nexport { TabList }\n"],"names":["TabList","Object","assign","withMergedProps","forwardRef","props","forwardedRef","size","layout","gap","activationOnFocus","tabsAutoGroup","scrollControls","scrollFading","defaultActiveTab","activeTab","onActiveTabChange","variant","disabled","children","menuItems","menuItemsProp","addon","menuTabText","menuTabControl","scrollControlLeft","scrollControlRight","palette","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","restProps","sizeProps","useMemo","layoutProps","rootRef","useRef","tabsTrackRef","scrollControlRef","useImperativeHandle","current","tabListItems","useTabListItems","autoGroupMode","useTabListAutoGroup","enabled","tabList","tabs","useTabList","combined","scrollThresholds","setScrollThresholds","useScrollThresholds","target","scrollControlLeftProps","sizes","SIZES_SCROLL_CONTROL","icon","_jsx","ChevronLeft","tabIndex","onFocus","evt","currentTarget","blur","onClick","trackLeft","Math","round","getBoundingClientRect","left","width","tabsLeft","Array","from","querySelectorAll","map","tab","focus","padding","idx","findIndex","tabLeft","includes","scrollTo","top","behavior","scrollBy","scrollControlRightProps","ChevronRight","trackRight","right","tabsRight","reverse","tabRight","scrollWidth","controlsContextProps","tabsContextProps","role","marginRight","color","tabColor","colorHover","tabColorHover","colorActive","tabColorActive","colorDisabled","tabColorDisabled","colorActiveDisabled","tabColorActiveDisabled","backgroundColor","tabBackgroundColor","backgroundColorHover","tabBackgroundColorHover","backgroundColorActive","tabBackgroundColorActive","backgroundColorDisabled","tabBackgroundColorDisabled","backgroundColorActiveDisabled","tabBackgroundColorActiveDisabled","hiddenTabsContextProps","groups","_jsxs","Styled","layouts","LAYOUTS","ref","node","refs","root","onKeyDown","document","activeElement","HTMLElement","matches","keyboardKeys","Home","validate","key","End","ArrowRight","ArrowLeft","tabListTabs","filter","closest","length","preventDefault","navigateHorizontalList","SELECTORS_FOCUSABLE","container","hidden","IconButton","track","trackRect","tabRect","onScroll","TabListTabsContext","Provider","value","TabListPropsContext","after","control","TabListMenuTab","text","tabHidden","cloneElement","id","undefined","LAYOUTS_ADDON","LAYOUTS_DIVIDER","dividerColor","displayName","SIZES","Tab","TabListTab","Panel","TabListPanel"],"mappings":"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"}

package/components/TabList/TabList.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useMemo,useRef,useImperativeHandle,cloneElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{TabListTabsContext,TabListPropsContext}from'../../shared/context/tabList.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{navigateHorizontalList,SELECTORS_FOCUSABLE}from'../../shared/utils/dom.mjs';import{focus}from'../../mixins/focus.mjs';import{TabListPanel}from'./TabListPanel.mjs';import{useTabListItems,useTabListAutoGroup,useTabList}from'./hooks.mjs';import{TabListMenuTab}from'./TabListMenuTab.mjs';import{SIZES,SIZES_SCROLL_CONTROL}from'./sizes.mjs';import{LAYOUTS,LAYOUTS_ADDON,LAYOUTS_DIVIDER}from'./layouts.mjs';import{Root,List,Container,TabsTrack,Floats,Control,ScrollFading,TrackScrollable,TabWrapper,Hidden,TabsHidden,Addon,DividerPositioned}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{TabListTab}from'../TabListTab/TabListTab.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{ChevronLeft}from'../../icon-pack/src/icons/ChevronLeft/index.mjs';import{ChevronRight}from'../../icon-pack/src/icons/ChevronRight/index.mjs';const TabList=Object.assign(withMergedProps(forwardRef(((e,t)=>{const{size:o="m",layout:r="horizontal",gap:n=8,activationOnFocus:s=!1,tabsAutoGroup:a=!1,scrollControls:l=!1,scrollFading:i=!1,defaultActiveTab:c,activeTab:d,onActiveTabChange:u,variant:b,disabled:m,children:h,menuItems:f,addon:T,menuTabText:g,menuTabControl:L,scrollControlLeft:v,scrollControlRight:p,palette:C,sizeXXS:y,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:M,layoutXL:z,...D}=e;const E=useMemo((()=>({size:o,sizeXXS:y,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A})),[o,y,S,j,x,k,A]);const H={layout:r,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:M,layoutXL:z};const X=useRef(null);const F=useRef(null);const P=useRef(null);useImperativeHandle(t,(()=>X.current),[]);const w=useTabListItems(h,f);const _=useTabListAutoGroup({enabled:a,tabList:w.tabs});const K=useTabList({defaultActiveTab:c,activeTab:d,onActiveTabChange:u,tabList:a?w.tabs:w.combined});const{scrollThresholds:U,setScrollThresholds:N}=useScrollThresholds({enabled:!a,target:F});const Y={...E,sizes:SIZES_SCROLL_CONTROL,icon:jsx(ChevronLeft,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!F.current||!P.current)return;const e=Math.round(F.current.getBoundingClientRect().left+P.current.getBoundingClientRect().width);const t=Array.from(F.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().left+focus.padding)));const o=t.findIndex((t=>t>=e));[-1,0,1].includes(o)?F.current.scrollTo({top:0,left:0,behavior:'smooth'}):F.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const Z={...E,sizes:SIZES_SCROLL_CONTROL,icon:jsx(ChevronRight,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!F.current)return;const e=Math.round(F.current.getBoundingClientRect().right);const t=Array.from(F.current.querySelectorAll('[role="tab"]')).map((e=>Math.round(e.getBoundingClientRect().right+focus.padding))).reverse();const o=t.findIndex((t=>t<=e));[-1,0,1].includes(o)?F.current.scrollTo({top:0,left:F.current.scrollWidth,behavior:'smooth'}):F.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const W=useMemo((()=>({...K,activationOnFocus:s})),[K,s]);const q=useMemo((()=>({...E,role:'tab',marginRight:n,variant:b,disabled:m,palette:{color:C.tabColor,colorHover:C.tabColorHover,colorActive:C.tabColorActive,colorDisabled:C.tabColorDisabled,colorActiveDisabled:C.tabColorActiveDisabled,backgroundColor:C.tabBackgroundColor,backgroundColorHover:C.tabBackgroundColorHover,backgroundColorActive:C.tabBackgroundColorActive,backgroundColorDisabled:C.tabBackgroundColorDisabled,backgroundColorActiveDisabled:C.tabBackgroundColorActiveDisabled}})),[E,n,b,m,C]);const G=useMemo((()=>({...E,marginRight:n,variant:b})),[E,n,b]);const V=a?_.groups.tabs:w.tabs;const J=a?_.groups.menuItems:w.menuItems;return jsxs(Root,{...D,...E,...H,layouts:LAYOUTS,palette:{backgroundColor:C.backgroundColor},ref:e=>{X.current=e,_.refs.root(e)},children:[jsxs(List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(keyboardKeys.Home.validate(e.key)||keyboardKeys.End.validate(e.key)||keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter((e=>!e.closest('[aria-hidden="true"]')));t.length!==0&&(keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),navigateHorizontalList(e.key,document.activeElement,t,SELECTORS_FOCUSABLE)))},children:[jsxs(Container,{ref:_.refs.container,children:[jsxs(TabsTrack,{children:[a||!l&&!i?null:jsxs(Floats,{hidden:U.left===!0||U.left===null,children:[l?jsx(Control,{ref:P,children:typeof v=='function'?v(Y):jsx(IconButton,{...Y})}):null,i?jsx(ScrollFading,{}):null]}),jsx(TrackScrollable,{ref:e=>{F.current=e,_.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const o=e.target.getBoundingClientRect();const r=Math.round(t.right);const n=Math.round(P.current&&U.left===!1?t.left+P.current.getBoundingClientRect().width:t.left);const s=Math.round(o.right+focus.padding);const a=Math.round(o.left-focus.padding);s>r?e.currentTarget.scrollBy(s-r,0):a<n&&e.currentTarget.scrollBy(a-n,0)},onScroll:e=>{a||N(e.currentTarget)},children:jsx(TabListTabsContext.Provider,{value:W,children:jsx(TabListPropsContext.Provider,{value:q,children:a?V.map(((e,t)=>jsx(TabWrapper,{children:e},t))):V})})}),!a&&i?jsx(Floats,{hidden:U.right===!0||U.right===null,after:!0,children:jsx(ScrollFading,{after:!0})}):null]}),!a&&l?jsx(Control,{hidden:U.right===!0||U.right===null,children:typeof p=='function'?p(Z):jsx(IconButton,{...Z})}):null,J.length>0&&jsx(Control,{ref:e=>{_.refs.control(e)},children:jsx(TabListMenuTab,{...E,...K,role:"tab",variant:b,disabled:m,palette:C,menuItems:J,activationOnFocus:s,text:g,control:L})})]}),a?jsx(Hidden,{"aria-hidden":!0,children:jsx(TabsHidden,{children:jsx(TabListPropsContext.Provider,{value:G,children:w.tabs.map(((e,t)=>jsx(TabWrapper,{ref:e=>{_.refs.tabHidden(t,e)},children:cloneElement(e,{ref:null,id:void 0,role:'none'})},t)))})})}):null]}),T?jsx(Addon,{...H,layouts:LAYOUTS_ADDON,ref:e=>{_.refs.addon(e)},children:T}):null,b==='underlined'&&jsx(DividerPositioned,{...H,layouts:LAYOUTS_DIVIDER,color:C.dividerColor})]})})),{displayName:'TabList',sizes:SIZES}),{Tab:TabListTab,Panel:TabListPanel});export{TabList};
+import{forwardRef,useMemo,useRef,useImperativeHandle,cloneElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{TabListTabsContext,TabListPropsContext}from'../../shared/context/tabList.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{navigateHorizontalList,SELECTORS_FOCUSABLE}from'../../shared/utils/dom.mjs';import{focus}from'../../mixins/focus.mjs';import{TabListPanel}from'./TabListPanel.mjs';import{useTabListItems,useTabListAutoGroup,useTabList}from'./hooks.mjs';import{TabListMenuTab}from'./TabListMenuTab.mjs';import{SIZES,SIZES_SCROLL_CONTROL}from'./sizes.mjs';import{LAYOUTS,LAYOUTS_ADDON,LAYOUTS_DIVIDER}from'./layouts.mjs';import{Root,List,Container,TabsTrack,Floats,Control,ScrollFading,TrackScrollable,TabWrapper,Hidden,TabsHidden,Addon,DividerPositioned}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{TabListTab}from'../TabListTab/TabListTab.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{ChevronLeft}from'../../icon-pack/src/icons/ChevronLeft/index.mjs';import{ChevronRight}from'../../icon-pack/src/icons/ChevronRight/index.mjs';const TabList=Object.assign(withMergedProps(forwardRef((e,t)=>{const{size:o="m",layout:r="horizontal",gap:n=8,activationOnFocus:s=!1,tabsAutoGroup:a=!1,scrollControls:l=!1,scrollFading:i=!1,defaultActiveTab:c,activeTab:d,onActiveTabChange:u,variant:b,disabled:m,children:h,menuItems:f,addon:T,menuTabText:g,menuTabControl:L,scrollControlLeft:v,scrollControlRight:p,palette:C,sizeXXS:y,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:M,layoutXL:z,...D}=e;const E=useMemo(()=>({size:o,sizeXXS:y,sizeXS:S,sizeS:j,sizeM:x,sizeL:k,sizeXL:A}),[o,y,S,j,x,k,A]);const H={layout:r,layoutXXS:R,layoutXS:I,layoutS:O,layoutM:B,layoutL:M,layoutXL:z};const X=useRef(null);const F=useRef(null);const P=useRef(null);useImperativeHandle(t,()=>X.current,[]);const w=useTabListItems(h,f);const _=useTabListAutoGroup({enabled:a,tabList:w.tabs});const K=useTabList({defaultActiveTab:c,activeTab:d,onActiveTabChange:u,tabList:a?w.tabs:w.combined});const{scrollThresholds:U,setScrollThresholds:N}=useScrollThresholds({enabled:!a,target:F});const Y={...E,sizes:SIZES_SCROLL_CONTROL,icon:jsx(ChevronLeft,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!F.current||!P.current)return;const e=Math.round(F.current.getBoundingClientRect().left+P.current.getBoundingClientRect().width);const t=Array.from(F.current.querySelectorAll('[role="tab"]')).map(e=>Math.round(e.getBoundingClientRect().left+focus.padding));const o=t.findIndex(t=>t>=e);[-1,0,1].includes(o)?F.current.scrollTo({top:0,left:0,behavior:'smooth'}):F.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const Z={...E,sizes:SIZES_SCROLL_CONTROL,icon:jsx(ChevronRight,{}),tabIndex:-1,onFocus:e=>{e.currentTarget.blur()},onClick:()=>{if(!F.current)return;const e=Math.round(F.current.getBoundingClientRect().right);const t=Array.from(F.current.querySelectorAll('[role="tab"]')).map(e=>Math.round(e.getBoundingClientRect().right+focus.padding)).reverse();const o=t.findIndex(t=>t<=e);[-1,0,1].includes(o)?F.current.scrollTo({top:0,left:F.current.scrollWidth,behavior:'smooth'}):F.current.scrollBy({top:0,left:t[o-1]-e,behavior:'smooth'})}};const W=useMemo(()=>({...K,activationOnFocus:s}),[K,s]);const q=useMemo(()=>({...E,role:'tab',marginRight:n,variant:b,disabled:m,palette:{color:C.tabColor,colorHover:C.tabColorHover,colorActive:C.tabColorActive,colorDisabled:C.tabColorDisabled,colorActiveDisabled:C.tabColorActiveDisabled,backgroundColor:C.tabBackgroundColor,backgroundColorHover:C.tabBackgroundColorHover,backgroundColorActive:C.tabBackgroundColorActive,backgroundColorDisabled:C.tabBackgroundColorDisabled,backgroundColorActiveDisabled:C.tabBackgroundColorActiveDisabled}}),[E,n,b,m,C]);const G=useMemo(()=>({...E,marginRight:n,variant:b}),[E,n,b]);const V=a?_.groups.tabs:w.tabs;const J=a?_.groups.menuItems:w.menuItems;return jsxs(Root,{...D,...E,...H,layouts:LAYOUTS,palette:{backgroundColor:C.backgroundColor},ref:e=>{X.current=e,_.refs.root(e)},children:[jsxs(List,{role:"tablist","aria-orientation":"horizontal",onKeyDown:e=>{if(!(document.activeElement instanceof HTMLElement&&document.activeElement.matches('[role="tab"]')&&(keyboardKeys.Home.validate(e.key)||keyboardKeys.End.validate(e.key)||keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))))return;const t=Array.from(e.currentTarget.querySelectorAll('[role="tab"]')).filter(e=>!e.closest('[aria-hidden="true"]'));t.length!==0&&(keyboardKeys.Home.validate(e.key)?(e.preventDefault(),t[0].focus()):keyboardKeys.End.validate(e.key)?(e.preventDefault(),t[t.length-1].focus()):(keyboardKeys.ArrowRight.validate(e.key)||keyboardKeys.ArrowLeft.validate(e.key))&&(e.preventDefault(),navigateHorizontalList(e.key,document.activeElement,t,SELECTORS_FOCUSABLE)))},children:[jsxs(Container,{ref:_.refs.container,children:[jsxs(TabsTrack,{children:[a||!l&&!i?null:jsxs(Floats,{hidden:U.left===!0||U.left===null,children:[l?jsx(Control,{ref:P,children:typeof v=='function'?v(Y):jsx(IconButton,{...Y})}):null,i?jsx(ScrollFading,{}):null]}),jsx(TrackScrollable,{ref:e=>{F.current=e,_.refs.track(e)},tabIndex:-1,"data-ui-track-scrollable":!0,onFocus:e=>{if(!e.target.matches('[role="tab"]'))return;const t=e.currentTarget.getBoundingClientRect();const o=e.target.getBoundingClientRect();const r=Math.round(t.right);const n=Math.round(P.current&&U.left===!1?t.left+P.current.getBoundingClientRect().width:t.left);const s=Math.round(o.right+focus.padding);const a=Math.round(o.left-focus.padding);s>r?e.currentTarget.scrollBy(s-r,0):a<n&&e.currentTarget.scrollBy(a-n,0)},onScroll:e=>{a||N(e.currentTarget)},children:jsx(TabListTabsContext.Provider,{value:W,children:jsx(TabListPropsContext.Provider,{value:q,children:a?V.map((e,t)=>jsx(TabWrapper,{children:e},t)):V})})}),!a&&i?jsx(Floats,{hidden:U.right===!0||U.right===null,after:!0,children:jsx(ScrollFading,{after:!0})}):null]}),!a&&l?jsx(Control,{hidden:U.right===!0||U.right===null,children:typeof p=='function'?p(Z):jsx(IconButton,{...Z})}):null,J.length>0&&jsx(Control,{ref:e=>{_.refs.control(e)},children:jsx(TabListMenuTab,{...E,...K,role:"tab",variant:b,disabled:m,palette:C,menuItems:J,activationOnFocus:s,text:g,control:L})})]}),a?jsx(Hidden,{"aria-hidden":!0,children:jsx(TabsHidden,{children:jsx(TabListPropsContext.Provider,{value:G,children:w.tabs.map((e,t)=>jsx(TabWrapper,{ref:e=>{_.refs.tabHidden(t,e)},children:cloneElement(e,{ref:null,id:void 0,role:'none'})},t))})})}):null]}),T?jsx(Addon,{...H,layouts:LAYOUTS_ADDON,ref:e=>{_.refs.addon(e)},children:T}):null,b==='underlined'&&jsx(DividerPositioned,{...H,layouts:LAYOUTS_DIVIDER,color:C.dividerColor})]})}),{displayName:'TabList',sizes:SIZES}),{Tab:TabListTab,Panel:TabListPanel});export{TabList};
 //# sourceMappingURL=TabList.mjs.map