@foxford/ui 2.87.0 → 2.87.2-beta-50b609f-20251201

package/components/Tab/style.js.map

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

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabListTabProp=style.createShouldForwardProp((e=>!['variant','active'].includes(e)));const shouldForwardContentProp=style.createShouldForwardProp();const template=e=>`\n  color: ${e.color};\n  background-color: ${e.backgroundColor};\n  &:hover {\n    color: ${e.colorHover};\n    background-color: ${e.backgroundColorHover};\n  }\n`;const COLOR_SCHEMA={underlined:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.colorHover??e.palette.color??tinycolor__default.default(e.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))},filled:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-primary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors['content-oncolor-hover']}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))},clear:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-tertiary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-secondary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Underline=styled__default.default.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],(e=>`\n    &, \n    & * {\n      cursor: ${e.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${e.variant==='underlined'&&e.active?1:0};\n    }\n  `),(e=>{const o=COLOR_SCHEMA[e.variant];return e.disabled?o.disabled:o.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin.responsiveMargin);const Hidden=styled__default.default.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);exports.Content=Content,exports.Hidden=Hidden,exports.Root=Root,exports.Underline=Underline;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var hover=require('../../mixins/hover.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabListTabProp=style.createShouldForwardProp((e=>!['variant','active'].includes(e)));const shouldForwardContentProp=style.createShouldForwardProp();const template=e=>`\n  color: ${e.color};\n  background-color: ${e.backgroundColor};\n  ${hover.hover(`\n    color: ${e.colorHover};\n    background-color: ${e.backgroundColorHover};\n  `)}\n`;const COLOR_SCHEMA={underlined:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.colorHover??e.palette.color??tinycolor__default.default(e.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))},filled:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-primary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors['content-oncolor-hover']}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))},clear:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-tertiary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-secondary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Underline=styled__default.default.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],(e=>`\n    &, \n    & * {\n      cursor: ${e.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${e.variant==='underlined'&&e.active?1:0};\n    }\n  `),(e=>{const o=COLOR_SCHEMA[e.variant];return e.disabled?o.disabled:o.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin.responsiveMargin);const Hidden=styled__default.default.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);exports.Content=Content,exports.Hidden=Hidden,exports.Root=Root,exports.Underline=Underline;
 //# sourceMappingURL=style.js.map

package/components/TabListTab/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  &:hover {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  ${hover(`\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  `)}\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}

package/components/TabListTab/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';const shouldForwardTabListTabProp=createShouldForwardProp((o=>!['variant','active'].includes(o)));const shouldForwardContentProp=createShouldForwardProp();const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  }\n`;const COLOR_SCHEMA={underlined:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.colorHover??o.palette.color??tinycolor(o.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))},filled:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors['content-oncolor-hover']}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))},clear:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-tertiary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-secondary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))}};const Underline=styled.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],(o=>`\n    &, \n    & * {\n      cursor: ${o.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${o.variant==='underlined'&&o.active?1:0};\n    }\n  `),(o=>{const e=COLOR_SCHEMA[o.variant];return o.disabled?e.disabled:e.default}),focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin);const Hidden=styled.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);export{Content,Hidden,Root,Underline};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardTabListTabProp=createShouldForwardProp((o=>!['variant','active'].includes(o)));const shouldForwardContentProp=createShouldForwardProp();const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  ${hover(`\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  `)}\n`;const COLOR_SCHEMA={underlined:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.colorHover??o.palette.color??tinycolor(o.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))},filled:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors['content-oncolor-hover']}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))},clear:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-tertiary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-secondary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))}};const Underline=styled.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],(o=>`\n    &, \n    & * {\n      cursor: ${o.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${o.variant==='underlined'&&o.active?1:0};\n    }\n  `),(o=>{const e=COLOR_SCHEMA[o.variant];return o.disabled?e.disabled:e.default}),focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin);const Hidden=styled.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);export{Content,Hidden,Root,Underline};
 //# sourceMappingURL=style.mjs.map

package/components/TabListTab/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  &:hover {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  ${hover(`\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  `)}\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"iWAWA,MAAMA,4BAA8BC,yBAAyBC,IAAa,CAAC,UAAW,UAAUC,SAASD,KAEzG,MAAME,yBAA2BH,0BAEjC,MAAMI,SAAYC,GAA+B,cACtCA,EAAQC,+BACGD,EAAQE,uBAC1BC,MAAM,gBACGH,EAAQI,sCACGJ,EAAQK,iCAIhC,MAAMC,aAAe,CACnBC,WAAY,CACVC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,OACRD,EAAMV,QAAQY,aAAeF,EAAMG,MAAMC,OAAO,yBAChDJ,EAAMV,QAAQC,OAASS,EAAMG,MAAMC,OAAO,0BAC/CV,WAAYM,EAAMC,OACbD,EAAMV,QAAQY,aAAeF,EAAMG,MAAMC,OAAO,yBAChDJ,EAAMV,QAAQI,YACfM,EAAMV,QAAQC,OACbc,UAAUL,EAAMG,MAAMC,OAAO,2BAA2BE,QAAQ,IAAIC,WACzEf,gBAAiBQ,EAAMC,OAClBD,EAAMV,QAAQkB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMV,QAAQE,iBAAmBQ,EAAMG,MAAMC,OAAOK,YACzDd,qBAAsBK,EAAMC,OACvBD,EAAMV,QAAQkB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMV,QAAQK,sBAAwBK,EAAMV,QAAQE,iBAAmBQ,EAAMG,MAAMC,OAAOK,gBAGrGC,SAAUX,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPE,MAAOS,EAAMC,OACRD,EAAMV,QAAQqB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMV,QAAQsB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDV,WAAYM,EAAMC,OACbD,EAAMV,QAAQqB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMV,QAAQsB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDZ,gBAAiBQ,EAAMC,OAClBD,EAAMV,QAAQuB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMV,QAAQwB,yBAA2Bd,EAAMG,MAAMC,OAAOK,YACjEd,qBAAsBK,EAAMC,OACvBD,EAAMV,QAAQuB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMV,QAAQwB,yBAA2Bd,EAAMG,MAAMC,OAAOK,iBAIzEM,OAAQ,CACNjB,QAASC,IAAG,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,OACRD,EAAMV,QAAQY,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMV,QAAQC,OAASS,EAAMG,MAAMC,OAAO,0BAC/CV,WAAYM,EAAMC,OACbD,EAAMV,QAAQY,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMV,QAAQI,YAAcM,EAAMV,QAAQC,OAASS,EAAMG,MAAMC,OAAO,0BAC3EZ,gBAAiBQ,EAAMC,OAClBD,EAAMV,QAAQkB,uBAAyBR,EAAMG,MAAMC,OAAO,sBAC1DJ,EAAMV,QAAQE,iBAAmBQ,EAAMG,MAAMC,OAAOK,YACzDd,qBAAsBK,EAAMC,OACvBD,EAAMV,QAAQkB,uBAAyBR,EAAMG,MAAMC,OAAO,sBAC1DJ,EAAMV,QAAQK,sBACfK,EAAMV,QAAQE,iBACdQ,EAAMG,MAAMC,OAAO,6BAG7BM,SAAUX,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPE,MAAOS,EAAMC,OACRD,EAAMV,QAAQqB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMV,QAAQsB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDV,WAAYM,EAAMC,OACbD,EAAMV,QAAQqB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMV,QAAQsB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDZ,gBAAiBQ,EAAMC,OAClBD,EAAMV,QAAQuB,+BAAiCb,EAAMG,MAAMC,OAAO,qBAClEJ,EAAMV,QAAQwB,yBAA2Bd,EAAMG,MAAMC,OAAOK,YACjEd,qBAAsBK,EAAMC,OACvBD,EAAMV,QAAQuB,+BAAiCb,EAAMG,MAAMC,OAAO,qBAClEJ,EAAMV,QAAQwB,yBAA2Bd,EAAMG,MAAMC,OAAOK,iBAIzEO,MAAO,CACLlB,QAASC,IAAG,CAAA,GAAA,KACPC,GACDX,SAAS,CACPE,MAAOS,EAAMC,OACRD,EAAMV,QAAQY,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMV,QAAQC,OAASS,EAAMG,MAAMC,OAAO,2BAC/CV,WAAYM,EAAMC,OACbD,EAAMV,QAAQY,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMV,QAAQI,YAAcM,EAAMV,QAAQC,OAASS,EAAMG,MAAMC,OAAO,4BAC3EZ,gBAAiBQ,EAAMC,OAClBD,EAAMV,QAAQkB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMV,QAAQE,iBAAmBQ,EAAMG,MAAMC,OAAOK,YACzDd,qBAAsBK,EAAMC,OACvBD,EAAMV,QAAQkB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMV,QAAQK,sBAAwBK,EAAMV,QAAQE,iBAAmBQ,EAAMG,MAAMC,OAAOK,gBAGrGC,SAAUX,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPE,MAAOS,EAAMC,OACRD,EAAMV,QAAQqB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMV,QAAQsB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDV,WAAYM,EAAMC,OACbD,EAAMV,QAAQqB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMV,QAAQsB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDZ,gBAAiBQ,EAAMC,OAClBD,EAAMV,QAAQuB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMV,QAAQwB,yBAA2Bd,EAAMG,MAAMC,OAAOK,YACjEd,qBAAsBK,EAAMC,OACvBD,EAAMV,QAAQuB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMV,QAAQwB,yBAA2Bd,EAAMG,MAAMC,OAAOK,wBAM9DQ,UAAYC,OAAOC,KAAIC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAXJ,CAgBxB,CAAA,iMAEM,MAAMK,KAAOL,OAAOM,OAAOJ,WAAkC,CAClEK,kBAAmBzC,8BACnBoC,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,4OAAA,IAAA,IAAA,IAAA,IAAA,KAeGlB,GAAU,uCAGCA,EAAMU,SAAW,cAAgB,gCAEvCO,sCACOjB,EAAM0B,UAAY,cAAgB1B,EAAMC,OAAS,EAAI,kBAIjED,IACD,MAAM2B,EAAS/B,aAAaI,EAAM0B,SAElC,OAAO1B,EAAMU,SAAWiB,EAAOjB,SAAWiB,EAAO7B,OAAO,GAGxD8B,MACAC,eACAC,kBAGG,MAAMC,QAAUb,OAAOC,KAAKC,WAAkC,CACnEK,kBAAmBrC,2BACnBgC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAFqBJ,CAErB,CAAA,yEAAA,IAMEY,wBAGSE,OAASd,OAAOC,KAAIC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAAXJ,CAWrB,CAAA"}

package/components/Tabs/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const borderColor=o=>styled.css(["border-bottom:1px solid ",";"],o);const Root=styled__default.default.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?color.color(o.borderColor,borderColor):null),(o=>o.color?color.color(o.color):null),responsiveProperty.responsiveProperty('width'));const Inner=styled__default.default.div.withConfig({displayName:"Tabs__Inner",componentId:"ui__sc-ggtlgu-1"})(["position:relative;display:block;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}"],20);const Content=styled__default.default.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow:auto hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?styled.css(["display:flex;justify-content:space-between;width:100%;"]):null));exports.Content=Content,exports.Inner=Inner,exports.Root=Root;
+'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const borderColor=o=>styled.css(["border-bottom:1px solid ",";"],o);const Root=styled__default.default.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?color.color(o.borderColor,borderColor):null),(o=>o.color?color.color(o.color):null),responsiveProperty.responsiveProperty('width'));const Inner=styled__default.default.div.withConfig({displayName:"Tabs__Inner",componentId:"ui__sc-ggtlgu-1"})(["position:relative;display:block;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}"],20);const Content=styled__default.default.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?styled.css(["display:flex;justify-content:space-between;width:100%;"]):null));exports.Content=Content,exports.Inner=Inner,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Tabs/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport type { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (value: string) => css`\n  border-bottom: 1px solid ${value};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n  color: rgba(247, 247, 247, 1);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: row;\n  ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n  ${responsiveProperty('width')}\n`\n\nexport const Inner = styled.div`\n  position: relative;\n  display: block;\n  height: auto;\n  padding: 0;\n  margin: 0 -20px;\n  box-sizing: border-box;\n  background: transparent;\n  overflow: visible;\n  max-width: 100%;\n  width: 100%;\n  &::before,\n  &::after {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n    height: 100%;\n  }\n\n  &::before {\n    left: 0;\n    background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n\n  &::after {\n    right: 0;\n    background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: 0;\n  margin: 0 auto;\n  white-space: nowrap;\n  box-sizing: border-box;\n  overflow: auto hidden;\n  -webkit-overflow-scrolling: touch;\n  color: ${(props) => props.theme.colors.mineShaft};\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  ${(props) =>\n    props.noBorder\n      ? css`\n          display: flex;\n          justify-content: space-between;\n          width: 100%;\n        `\n      : null}\n`\n"],"names":["borderColor","value","css","Root","styled","div","withConfig","shouldForwardProp","prop","displayName","componentId","props","noBorder","color","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"mRAOA,MAAMA,YAAeC,GAAkBC,WAAG,CAAA,2BAAA,KACbD,GAGtB,MAAME,KAAOC,gBAAAA,QAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAASA,IAAS,aACtCF,WAAA,CAAAG,YAAA,aAAAC,YAAA,mBAFkBN,CAElB,CAAA,yGAAA,IAAA,IAAA,KAMGO,GAAWA,EAAMX,cAAgBW,EAAMC,SAAWC,MAAAA,MAAMF,EAAMX,YAAaA,aAAe,OAC1FW,GAAWA,EAAME,MAAQA,YAAMF,EAAME,OAAS,MAC/CC,mBAAkBA,mBAAC,gBAGVC,MAAQX,gBAAAA,QAAOC,IAAGC,WAAA,CAAAG,YAAA,cAAAC,YAAA,mBAAVN,CAAU,CAAA,mPAAA,+MAnBG,UAoDrBY,QAAUZ,gBAAAA,QAAOC,IAAGC,WAAA,CAAAG,YAAA,gBAAAC,YAAA,mBAAVN,CAAU,CAAA,0KAAA,+KAAA,KAUrBO,GAAUA,EAAMM,MAAMC,OAAOC,YAepCR,GACDA,EAAMC,SACFV,OAAAA,IAAG,CAAA,2DAKH"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport type { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (value: string) => css`\n  border-bottom: 1px solid ${value};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n  color: rgba(247, 247, 247, 1);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: row;\n  ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n  ${responsiveProperty('width')}\n`\n\nexport const Inner = styled.div`\n  position: relative;\n  display: block;\n  height: auto;\n  padding: 0;\n  margin: 0 -20px;\n  box-sizing: border-box;\n  background: transparent;\n  overflow: visible;\n  max-width: 100%;\n  width: 100%;\n  &::before,\n  &::after {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n    height: 100%;\n  }\n\n  &::before {\n    left: 0;\n    background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n\n  &::after {\n    right: 0;\n    background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: 0;\n  margin: 0 auto;\n  white-space: nowrap;\n  box-sizing: border-box;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  color: ${(props) => props.theme.colors.mineShaft};\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  ${(props) =>\n    props.noBorder\n      ? css`\n          display: flex;\n          justify-content: space-between;\n          width: 100%;\n        `\n      : null}\n`\n"],"names":["borderColor","value","css","Root","styled","div","withConfig","shouldForwardProp","prop","displayName","componentId","props","noBorder","color","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"mRAOA,MAAMA,YAAeC,GAAkBC,WAAG,CAAA,2BAAA,KACbD,GAGtB,MAAME,KAAOC,gBAAAA,QAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAASA,IAAS,aACtCF,WAAA,CAAAG,YAAA,aAAAC,YAAA,mBAFkBN,CAElB,CAAA,yGAAA,IAAA,IAAA,KAMGO,GAAWA,EAAMX,cAAgBW,EAAMC,SAAWC,MAAAA,MAAMF,EAAMX,YAAaA,aAAe,OAC1FW,GAAWA,EAAME,MAAQA,YAAMF,EAAME,OAAS,MAC/CC,mBAAkBA,mBAAC,gBAGVC,MAAQX,gBAAAA,QAAOC,IAAGC,WAAA,CAAAG,YAAA,cAAAC,YAAA,mBAAVN,CAAU,CAAA,mPAAA,+MAnBG,UAoDrBY,QAAUZ,gBAAAA,QAAOC,IAAGC,WAAA,CAAAG,YAAA,gBAAAC,YAAA,mBAAVN,CAAU,CAAA,uLAAA,+KAAA,KAWrBO,GAAUA,EAAMM,MAAMC,OAAOC,YAepCR,GACDA,EAAMC,SACFV,OAAAA,IAAG,CAAA,2DAKH"}

package/components/Tabs/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import{color}from'../../mixins/color.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';const borderColor=o=>css(["border-bottom:1px solid ",";"],o);const Root=styled.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?color(o.borderColor,borderColor):null),(o=>o.color?color(o.color):null),responsiveProperty('width'));const Inner=styled.div.withConfig({displayName:"Tabs__Inner",componentId:"ui__sc-ggtlgu-1"})(["position:relative;display:block;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}"],20);const Content=styled.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow:auto hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?css(["display:flex;justify-content:space-between;width:100%;"]):null));export{Content,Inner,Root};
+import styled,{css}from'styled-components';import{color}from'../../mixins/color.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';const borderColor=o=>css(["border-bottom:1px solid ",";"],o);const Root=styled.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?color(o.borderColor,borderColor):null),(o=>o.color?color(o.color):null),responsiveProperty('width'));const Inner=styled.div.withConfig({displayName:"Tabs__Inner",componentId:"ui__sc-ggtlgu-1"})(["position:relative;display:block;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}"],20);const Content=styled.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?css(["display:flex;justify-content:space-between;width:100%;"]):null));export{Content,Inner,Root};
 //# sourceMappingURL=style.mjs.map

package/components/Tabs/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport type { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (value: string) => css`\n  border-bottom: 1px solid ${value};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n  color: rgba(247, 247, 247, 1);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: row;\n  ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n  ${responsiveProperty('width')}\n`\n\nexport const Inner = styled.div`\n  position: relative;\n  display: block;\n  height: auto;\n  padding: 0;\n  margin: 0 -20px;\n  box-sizing: border-box;\n  background: transparent;\n  overflow: visible;\n  max-width: 100%;\n  width: 100%;\n  &::before,\n  &::after {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n    height: 100%;\n  }\n\n  &::before {\n    left: 0;\n    background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n\n  &::after {\n    right: 0;\n    background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: 0;\n  margin: 0 auto;\n  white-space: nowrap;\n  box-sizing: border-box;\n  overflow: auto hidden;\n  -webkit-overflow-scrolling: touch;\n  color: ${(props) => props.theme.colors.mineShaft};\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  ${(props) =>\n    props.noBorder\n      ? css`\n          display: flex;\n          justify-content: space-between;\n          width: 100%;\n        `\n      : null}\n`\n"],"names":["borderColor","value","css","Root","styled","div","withConfig","shouldForwardProp","prop","displayName","componentId","props","noBorder","color","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"0JAOA,MAAMA,YAAeC,GAAkBC,IAAG,CAAA,2BAAA,KACbD,GAGtB,MAAME,KAAOC,OAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAASA,IAAS,aACtCF,WAAA,CAAAG,YAAA,aAAAC,YAAA,mBAFkBN,CAElB,CAAA,yGAAA,IAAA,IAAA,KAMGO,GAAWA,EAAMX,cAAgBW,EAAMC,SAAWC,MAAMF,EAAMX,YAAaA,aAAe,OAC1FW,GAAWA,EAAME,MAAQA,MAAMF,EAAME,OAAS,MAC/CC,mBAAmB,gBAGVC,MAAQX,OAAOC,IAAGC,WAAA,CAAAG,YAAA,cAAAC,YAAA,mBAAVN,CAAU,CAAA,mPAAA,+MAnBG,UAoDrBY,QAAUZ,OAAOC,IAAGC,WAAA,CAAAG,YAAA,gBAAAC,YAAA,mBAAVN,CAAU,CAAA,0KAAA,+KAAA,KAUrBO,GAAUA,EAAMM,MAAMC,OAAOC,YAepCR,GACDA,EAAMC,SACFV,IAAG,CAAA,2DAKH"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport type { TabsProps } from './Tabs'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (value: string) => css`\n  border-bottom: 1px solid ${value};\n`\n\nexport const Root = styled.div.withConfig({\n  shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n  color: rgba(247, 247, 247, 1);\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: row;\n  ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n  ${responsiveProperty('width')}\n`\n\nexport const Inner = styled.div`\n  position: relative;\n  display: block;\n  height: auto;\n  padding: 0;\n  margin: 0 -20px;\n  box-sizing: border-box;\n  background: transparent;\n  overflow: visible;\n  max-width: 100%;\n  width: 100%;\n  &::before,\n  &::after {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    display: block;\n    content: '';\n    width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n    height: 100%;\n  }\n\n  &::before {\n    left: 0;\n    background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n\n  &::after {\n    right: 0;\n    background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentcolor 100%);\n  }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n  position: relative;\n  z-index: 1;\n  display: block;\n  padding: 0;\n  margin: 0 auto;\n  white-space: nowrap;\n  box-sizing: border-box;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  color: ${(props) => props.theme.colors.mineShaft};\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    height: 0;\n    background: transparent;\n    visibility: hidden;\n  }\n\n  ${(props) =>\n    props.noBorder\n      ? css`\n          display: flex;\n          justify-content: space-between;\n          width: 100%;\n        `\n      : null}\n`\n"],"names":["borderColor","value","css","Root","styled","div","withConfig","shouldForwardProp","prop","displayName","componentId","props","noBorder","color","responsiveProperty","Inner","Content","theme","colors","mineShaft"],"mappings":"0JAOA,MAAMA,YAAeC,GAAkBC,IAAG,CAAA,2BAAA,KACbD,GAGtB,MAAME,KAAOC,OAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAASA,IAAS,aACtCF,WAAA,CAAAG,YAAA,aAAAC,YAAA,mBAFkBN,CAElB,CAAA,yGAAA,IAAA,IAAA,KAMGO,GAAWA,EAAMX,cAAgBW,EAAMC,SAAWC,MAAMF,EAAMX,YAAaA,aAAe,OAC1FW,GAAWA,EAAME,MAAQA,MAAMF,EAAME,OAAS,MAC/CC,mBAAmB,gBAGVC,MAAQX,OAAOC,IAAGC,WAAA,CAAAG,YAAA,cAAAC,YAAA,mBAAVN,CAAU,CAAA,mPAAA,+MAnBG,UAoDrBY,QAAUZ,OAAOC,IAAGC,WAAA,CAAAG,YAAA,gBAAAC,YAAA,mBAAVN,CAAU,CAAA,uLAAA,+KAAA,KAWrBO,GAAUA,EAAMM,MAAMC,OAAOC,YAepCR,GACDA,EAAMC,SACFV,IAAG,CAAA,2DAKH"}