@foxford/ui 2.87.0-beta-64439a1-20251201 → 2.87.1-beta-3a7d913-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":"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"}

package/components/Tag/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var display=require('../../mixins/display.js');var responsiveProperty=require('../../mixins/responsive-property.js');var color=require('../../mixins/color.js');var Text$1=require('../Text/Text.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const WIDTHS={l:220,m:182,s:100,xs:60};const active=styled.css(["border-color:transparent;background-color:currentcolor;"]);const Text=styled__default.default(Text$1.Text).withConfig({displayName:"Tag__Text",componentId:"ui__sc-3oi44j-0"})(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;vertical-align:middle;transition:color 0.25s ease;"]);const disabled=styled.css(["cursor:not-allowed;background-color:rgba(0,0,0,0.04);","{color:rgba(0,0,0,0.16);}"],Text);const Root=styled__default.default.button.withConfig({shouldForwardProp:e=>['children','htmlFor','className','style','onClick'].includes(e)}).withConfig({displayName:"Tag__Root",componentId:"ui__sc-3oi44j-1"})(["padding:0 16px;margin-bottom:10px;border-radius:3px;background-color:",";border:1px solid ",";box-sizing:border-box;vertical-align:middle;transition:color 0.25s ease,background 0.25s ease,border-color 0.25s ease;cursor:pointer;text-align:center;touch-action:manipulation;min-width:60px;"," "," "," "," "," "," "," "," &:not(:last-child){margin-right:20px;}"," "," &:disabled{","}",""],(e=>e.theme.colors.white),(e=>e.theme.colors.whiteGray),(e=>e.size?responsiveProperty.property((e=>e.width==='auto'?'auto':typeof e.width=='number'?e.width:e.size&&WIDTHS[e.size]?WIDTHS[e.size]:'auto')(e),'width'):null),(e=>e.height?responsiveProperty.property(e.height,'line-height'):null),(e=>e.height?responsiveProperty.property(e.height,'height'):null),(({heightXS:e,heightS:t,heightM:o,heightL:i,heightXL:r})=>responsiveProperty.responsiveNamedProperty({sizes:{heightXS:e,heightS:t,heightM:o,heightL:i,heightXL:r},cssProperty:'height'})),(e=>e.width?responsiveProperty.property(e.width,'width'):null),(({widthXS:e,widthS:t,widthM:o,widthL:i,widthXL:r})=>responsiveProperty.responsiveNamedProperty({sizes:{widthXS:e,widthS:t,widthM:o,widthL:i,widthXL:r},cssProperty:'width'})),(e=>e.display?display.display(e.display):null),(e=>e.color?color.color(e.color):null),(e=>e.disabled?null:styled.css(["&:hover:not(:disabled){border-color:currentcolor;}&:active:not(:disabled){"," ","{color:",";}}"],active,Text,(({theme:e})=>e.colors.white))),(e=>e.inverse||e.checked?active:null),disabled,(e=>e.disabled?disabled:null));exports.Root=Root,exports.Text=Text;
+'use strict';var styled=require('styled-components');var display=require('../../mixins/display.js');var responsiveProperty=require('../../mixins/responsive-property.js');var color=require('../../mixins/color.js');var hover=require('../../mixins/hover.js');var Text$1=require('../Text/Text.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const WIDTHS={l:220,m:182,s:100,xs:60};const active=styled.css(["border-color:transparent;background-color:currentcolor;"]);const Text=styled__default.default(Text$1.Text).withConfig({displayName:"Tag__Text",componentId:"ui__sc-3oi44j-0"})(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;vertical-align:middle;transition:color 0.25s ease;"]);const disabled=styled.css(["cursor:not-allowed;background-color:rgba(0,0,0,0.04);","{color:rgba(0,0,0,0.16);}"],Text);const Root=styled__default.default.button.withConfig({shouldForwardProp:e=>['children','htmlFor','className','style','onClick'].includes(e)}).withConfig({displayName:"Tag__Root",componentId:"ui__sc-3oi44j-1"})(["padding:0 16px;margin-bottom:10px;border-radius:3px;background-color:",";border:1px solid ",";box-sizing:border-box;vertical-align:middle;transition:color 0.25s ease,background 0.25s ease,border-color 0.25s ease;cursor:pointer;text-align:center;touch-action:manipulation;min-width:60px;"," "," "," "," "," "," "," "," &:not(:last-child){margin-right:20px;}"," "," &:disabled{","}",""],(e=>e.theme.colors.white),(e=>e.theme.colors.whiteGray),(e=>e.size?responsiveProperty.property((e=>e.width==='auto'?'auto':typeof e.width=='number'?e.width:e.size&&WIDTHS[e.size]?WIDTHS[e.size]:'auto')(e),'width'):null),(e=>e.height?responsiveProperty.property(e.height,'line-height'):null),(e=>e.height?responsiveProperty.property(e.height,'height'):null),(({heightXS:e,heightS:t,heightM:o,heightL:r,heightXL:i})=>responsiveProperty.responsiveNamedProperty({sizes:{heightXS:e,heightS:t,heightM:o,heightL:r,heightXL:i},cssProperty:'height'})),(e=>e.width?responsiveProperty.property(e.width,'width'):null),(({widthXS:e,widthS:t,widthM:o,widthL:r,widthXL:i})=>responsiveProperty.responsiveNamedProperty({sizes:{widthXS:e,widthS:t,widthM:o,widthL:r,widthXL:i},cssProperty:'width'})),(e=>e.display?display.display(e.display):null),(e=>e.color?color.color(e.color):null),(e=>e.disabled?null:styled.css([""," &:active:not(:disabled){"," ","{color:",";}}"],hover.hover("\n              border-color: currentcolor;\n            ",'&:hover:not(:disabled)'),active,Text,(({theme:e})=>e.colors.white))),(e=>e.inverse||e.checked?active:null),disabled,(e=>e.disabled?disabled:null));exports.Root=Root,exports.Text=Text;
 //# sourceMappingURL=style.js.map

package/components/Tag/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport type { PossibleValues } from 'mixins/responsive-property'\nimport { color } from 'mixins/color'\nimport { Text as UiText } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n  l: 220,\n  m: 182,\n  s: 100,\n  xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n  if (props.width === 'auto') return 'auto'\n  if (typeof props.width === 'number') return props.width\n\n  if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n  return 'auto'\n}\n\nconst active = css`\n  border-color: transparent;\n  background-color: currentcolor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n  display: inline-block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  vertical-align: middle;\n  transition: color 0.25s ease;\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  background-color: rgba(0, 0, 0, 0.04);\n  ${Text} {\n    color: rgba(0, 0, 0, 0.16);\n  }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n  shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n  padding: 0 16px;\n  margin-bottom: 10px;\n  border-radius: 3px;\n  background-color: ${(props) => props.theme.colors.white};\n  border: 1px solid ${(props) => props.theme.colors.whiteGray};\n  box-sizing: border-box;\n  vertical-align: middle;\n  transition:\n    color 0.25s ease,\n    background 0.25s ease,\n    border-color 0.25s ease;\n  cursor: pointer;\n  text-align: center;\n  touch-action: manipulation;\n  min-width: 60px;\n\n  ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n  ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n  ${(props) => (props.height ? property(props.height, 'height') : null)}\n  ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n    responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n  ${(props) => (props.width ? property(props.width, 'width') : null)}\n    ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n    responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n\n  &:not(:last-child) {\n    margin-right: 20px;\n  }\n\n  ${(props) =>\n    !props.disabled\n      ? css`\n          &:hover:not(:disabled) {\n            border-color: currentcolor;\n          }\n          &:active:not(:disabled) {\n            ${active}\n            ${Text} {\n              color: ${({ theme }) => theme.colors.white};\n            }\n          }\n        `\n      : null}\n\n  ${(props) => (props.inverse || props.checked ? active : null)}\n\n  &:disabled {\n    ${disabled}\n  }\n  ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","default","UiText","withConfig","displayName","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","chooseWidthValue","height","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","widthXS","widthS","widthM","widthL","widthXL","display","color","inverse","checked"],"mappings":"wWASA,MAAMA,OAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,MAAMC,OAASC,OAAGA,IAGjB,CAAA,4DAEM,MAAMC,KAAOC,gBAAMC,QAACC,aAAOC,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAAdL,CAQnB,CAAA,qJAED,MAAMM,SAAWR,OAAGA,IAAA,CAAA,wDAAA,6BAGhBC,MAKG,MAAMQ,KAAOP,gBAAAA,QAAOQ,OAAOL,WAAqB,CACrDM,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KAC/FP,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAFkBL,CAElB,CAAA,wEAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAIqBY,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAY/CJ,GAAWA,EAAMK,KAAOC,mBAAQA,SAnDXN,IACpBA,EAAMO,QAAU,OAAe,cACxBP,EAAMO,OAAU,SAAiBP,EAAMO,MAE9CP,EAAMK,MAAQzB,OAAOoB,EAAMK,MAAczB,OAAOoB,EAAMK,MAEnD,OA6C6BG,CAAiBR,GAAQ,SAAW,OACrEA,GAAWA,EAAMS,OAASH,mBAAQA,SAACN,EAAMS,OAAQ,eAAiB,OAClET,GAAWA,EAAMS,OAASH,mBAAQA,SAACN,EAAMS,OAAQ,UAAY,OAC9D,EAAGC,WAAUC,UAASC,UAASC,UAASC,cACxCC,2CAAwB,CAAEC,MAAO,CAAEN,WAAUC,UAASC,UAASC,UAASC,YAAYG,YAAa,aAEhGjB,GAAWA,EAAMO,MAAQD,mBAAAA,SAASN,EAAMO,MAAO,SAAW,OACzD,EAAGW,UAASC,SAAQC,SAAQC,SAAQC,aACtCP,2CAAwB,CAAEC,MAAO,CAAEE,UAASC,SAAQC,SAAQC,SAAQC,WAAWL,YAAa,YAE3FjB,GAAWA,EAAMuB,QAAUA,QAAOA,QAACvB,EAAMuB,SAAW,OACpDvB,GAAWA,EAAMwB,MAAQA,MAAKA,MAACxB,EAAMwB,OAAS,OAM9CxB,GACAA,EAAMN,SAYH,KAXAR,OAAAA,uGAKMD,OACAE,MACS,EAAGc,WAAYA,EAAMC,OAAOC,UAM9CH,GAAWA,EAAMyB,SAAWzB,EAAM0B,QAAUzC,OAAS,MAGpDS,UAEDM,GAAWA,EAAMN,SAAWA,SAAW"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport type { PossibleValues } from 'mixins/responsive-property'\nimport { color } from 'mixins/color'\nimport { Text as UiText } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport { hover } from 'mixins/hover'\nimport type { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n  l: 220,\n  m: 182,\n  s: 100,\n  xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n  if (props.width === 'auto') return 'auto'\n  if (typeof props.width === 'number') return props.width\n\n  if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n  return 'auto'\n}\n\nconst active = css`\n  border-color: transparent;\n  background-color: currentcolor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n  display: inline-block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  vertical-align: middle;\n  transition: color 0.25s ease;\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  background-color: rgba(0, 0, 0, 0.04);\n  ${Text} {\n    color: rgba(0, 0, 0, 0.16);\n  }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n  shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n  padding: 0 16px;\n  margin-bottom: 10px;\n  border-radius: 3px;\n  background-color: ${(props) => props.theme.colors.white};\n  border: 1px solid ${(props) => props.theme.colors.whiteGray};\n  box-sizing: border-box;\n  vertical-align: middle;\n  transition:\n    color 0.25s ease,\n    background 0.25s ease,\n    border-color 0.25s ease;\n  cursor: pointer;\n  text-align: center;\n  touch-action: manipulation;\n  min-width: 60px;\n\n  ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n  ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n  ${(props) => (props.height ? property(props.height, 'height') : null)}\n  ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n    responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n  ${(props) => (props.width ? property(props.width, 'width') : null)}\n    ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n    responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.color ? color(props.color) : null)}\n\n  &:not(:last-child) {\n    margin-right: 20px;\n  }\n\n  ${(props) =>\n    !props.disabled\n      ? css`\n          ${hover(\n            `\n              border-color: currentcolor;\n            `,\n            '&:hover:not(:disabled)'\n          )}\n          &:active:not(:disabled) {\n            ${active}\n            ${Text} {\n              color: ${({ theme }) => theme.colors.white};\n            }\n          }\n        `\n      : null}\n\n  ${(props) => (props.inverse || props.checked ? active : null)}\n\n  &:disabled {\n    ${disabled}\n  }\n  ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","default","UiText","withConfig","displayName","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","chooseWidthValue","height","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","widthXS","widthS","widthM","widthL","widthXL","display","color","hover","inverse","checked"],"mappings":"mZAUA,MAAMA,OAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,MAAMC,OAASC,OAAGA,IAGjB,CAAA,4DAEM,MAAMC,KAAOC,gBAAMC,QAACC,aAAOC,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAAdL,CAQnB,CAAA,qJAED,MAAMM,SAAWR,OAAGA,IAAA,CAAA,wDAAA,6BAGhBC,MAKG,MAAMQ,KAAOP,gBAAAA,QAAOQ,OAAOL,WAAqB,CACrDM,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KAC/FP,WAAA,CAAAC,YAAA,YAAAC,YAAA,mBAFkBL,CAElB,CAAA,wEAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAIqBY,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAY/CJ,GAAWA,EAAMK,KAAOC,mBAAQA,SAnDXN,IACpBA,EAAMO,QAAU,OAAe,cACxBP,EAAMO,OAAU,SAAiBP,EAAMO,MAE9CP,EAAMK,MAAQzB,OAAOoB,EAAMK,MAAczB,OAAOoB,EAAMK,MAEnD,OA6C6BG,CAAiBR,GAAQ,SAAW,OACrEA,GAAWA,EAAMS,OAASH,mBAAQA,SAACN,EAAMS,OAAQ,eAAiB,OAClET,GAAWA,EAAMS,OAASH,mBAAQA,SAACN,EAAMS,OAAQ,UAAY,OAC9D,EAAGC,WAAUC,UAASC,UAASC,UAASC,cACxCC,2CAAwB,CAAEC,MAAO,CAAEN,WAAUC,UAASC,UAASC,UAASC,YAAYG,YAAa,aAEhGjB,GAAWA,EAAMO,MAAQD,mBAAAA,SAASN,EAAMO,MAAO,SAAW,OACzD,EAAGW,UAASC,SAAQC,SAAQC,SAAQC,aACtCP,2CAAwB,CAAEC,MAAO,CAAEE,UAASC,SAAQC,SAAQC,SAAQC,WAAWL,YAAa,YAE3FjB,GAAWA,EAAMuB,QAAUA,QAAOA,QAACvB,EAAMuB,SAAW,OACpDvB,GAAWA,EAAMwB,MAAQA,MAAKA,MAACxB,EAAMwB,OAAS,OAM9CxB,GACAA,EAAMN,SAeH,KAdAR,OAAAA,IAAG,CAAA,GAAA,4BAAA,IAAA,UAAA,OACCuC,MAAKA,MACL,4DAGA,0BAGExC,OACAE,MACS,EAAGc,WAAYA,EAAMC,OAAOC,UAM9CH,GAAWA,EAAM0B,SAAW1B,EAAM2B,QAAU1C,OAAS,MAGpDS,UAEDM,GAAWA,EAAMN,SAAWA,SAAW"}

package/components/Tag/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import{display}from'../../mixins/display.mjs';import{property,responsiveNamedProperty}from'../../mixins/responsive-property.mjs';import{color}from'../../mixins/color.mjs';import{Text as Text$1}from'../Text/Text.mjs';const WIDTHS={l:220,m:182,s:100,xs:60};const active=css(["border-color:transparent;background-color:currentcolor;"]);const Text=styled(Text$1).withConfig({displayName:"Tag__Text",componentId:"ui__sc-3oi44j-0"})(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;vertical-align:middle;transition:color 0.25s ease;"]);const disabled=css(["cursor:not-allowed;background-color:rgba(0,0,0,0.04);","{color:rgba(0,0,0,0.16);}"],Text);const Root=styled.button.withConfig({shouldForwardProp:o=>['children','htmlFor','className','style','onClick'].includes(o)}).withConfig({displayName:"Tag__Root",componentId:"ui__sc-3oi44j-1"})(["padding:0 16px;margin-bottom:10px;border-radius:3px;background-color:",";border:1px solid ",";box-sizing:border-box;vertical-align:middle;transition:color 0.25s ease,background 0.25s ease,border-color 0.25s ease;cursor:pointer;text-align:center;touch-action:manipulation;min-width:60px;"," "," "," "," "," "," "," "," &:not(:last-child){margin-right:20px;}"," "," &:disabled{","}",""],(o=>o.theme.colors.white),(o=>o.theme.colors.whiteGray),(o=>o.size?property((o=>o.width==='auto'?'auto':typeof o.width=='number'?o.width:o.size&&WIDTHS[o.size]?WIDTHS[o.size]:'auto')(o),'width'):null),(o=>o.height?property(o.height,'line-height'):null),(o=>o.height?property(o.height,'height'):null),(({heightXS:o,heightS:e,heightM:t,heightL:i,heightXL:r})=>responsiveNamedProperty({sizes:{heightXS:o,heightS:e,heightM:t,heightL:i,heightXL:r},cssProperty:'height'})),(o=>o.width?property(o.width,'width'):null),(({widthXS:o,widthS:e,widthM:t,widthL:i,widthXL:r})=>responsiveNamedProperty({sizes:{widthXS:o,widthS:e,widthM:t,widthL:i,widthXL:r},cssProperty:'width'})),(o=>o.display?display(o.display):null),(o=>o.color?color(o.color):null),(o=>o.disabled?null:css(["&:hover:not(:disabled){border-color:currentcolor;}&:active:not(:disabled){"," ","{color:",";}}"],active,Text,(({theme:o})=>o.colors.white))),(o=>o.inverse||o.checked?active:null),disabled,(o=>o.disabled?disabled:null));export{Root,Text};
+import styled,{css}from'styled-components';import{display}from'../../mixins/display.mjs';import{property,responsiveNamedProperty}from'../../mixins/responsive-property.mjs';import{color}from'../../mixins/color.mjs';import{hover}from'../../mixins/hover.mjs';import{Text as Text$1}from'../Text/Text.mjs';const WIDTHS={l:220,m:182,s:100,xs:60};const active=css(["border-color:transparent;background-color:currentcolor;"]);const Text=styled(Text$1).withConfig({displayName:"Tag__Text",componentId:"ui__sc-3oi44j-0"})(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;vertical-align:middle;transition:color 0.25s ease;"]);const disabled=css(["cursor:not-allowed;background-color:rgba(0,0,0,0.04);","{color:rgba(0,0,0,0.16);}"],Text);const Root=styled.button.withConfig({shouldForwardProp:o=>['children','htmlFor','className','style','onClick'].includes(o)}).withConfig({displayName:"Tag__Root",componentId:"ui__sc-3oi44j-1"})(["padding:0 16px;margin-bottom:10px;border-radius:3px;background-color:",";border:1px solid ",";box-sizing:border-box;vertical-align:middle;transition:color 0.25s ease,background 0.25s ease,border-color 0.25s ease;cursor:pointer;text-align:center;touch-action:manipulation;min-width:60px;"," "," "," "," "," "," "," "," &:not(:last-child){margin-right:20px;}"," "," &:disabled{","}",""],(o=>o.theme.colors.white),(o=>o.theme.colors.whiteGray),(o=>o.size?property((o=>o.width==='auto'?'auto':typeof o.width=='number'?o.width:o.size&&WIDTHS[o.size]?WIDTHS[o.size]:'auto')(o),'width'):null),(o=>o.height?property(o.height,'line-height'):null),(o=>o.height?property(o.height,'height'):null),(({heightXS:o,heightS:e,heightM:i,heightL:t,heightXL:r})=>responsiveNamedProperty({sizes:{heightXS:o,heightS:e,heightM:i,heightL:t,heightXL:r},cssProperty:'height'})),(o=>o.width?property(o.width,'width'):null),(({widthXS:o,widthS:e,widthM:i,widthL:t,widthXL:r})=>responsiveNamedProperty({sizes:{widthXS:o,widthS:e,widthM:i,widthL:t,widthXL:r},cssProperty:'width'})),(o=>o.display?display(o.display):null),(o=>o.color?color(o.color):null),(o=>o.disabled?null:css([""," &:active:not(:disabled){"," ","{color:",";}}"],hover("\n              border-color: currentcolor;\n            ",'&:hover:not(:disabled)'),active,Text,(({theme:o})=>o.colors.white))),(o=>o.inverse||o.checked?active:null),disabled,(o=>o.disabled?disabled:null));export{Root,Text};
 //# sourceMappingURL=style.mjs.map