@foxford/ui 2.17.0 → 2.18.0

package/components/Tab/style.js

@@ -1,2 +1,2 @@
-import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{getColor as t}from'../../mixins/color.js';import{responsiveSize as c}from'../../mixins/size.js';import{responsiveMargin as a}from'../../mixins/margin.js';import{focus as l}from'../../mixins/focus.js';import{createShouldForwardProp as i}from'../../shared/utils/style.js';import m from'./images/arrow.module.svg.js';var s=i((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored'].includes(o)));var d={default:e(["",""],(o=>"\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    "))),compact:e(["",""],(o=>"\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    "))),crispyCompact:e(["",""],(o=>"\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    "))),crispy:e(["",""],(o=>"\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    ")))};var b=r.span.withConfig({componentId:"fox-ui__sc-26yal1-0"})(["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;"]);var p=r(m).withConfig({shouldForwardProp:()=>!1}).withConfig({componentId:"fox-ui__sc-26yal1-1"})(["flex-shrink:0;height:100%;",""],(o=>o.after&&'transform: rotate(180deg);'));var h=o=>"\n  &:hover > ".concat(b," {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n    border-color: ").concat(o.borderColorHover,";\n  }\n  &:hover > ").concat(p," {\n    color: ").concat(o.backgroundColorHover,";\n    stroke: ").concat(o.borderColorHover,";\n  }\n  & > ").concat(b,",\n  &:active > ").concat(b," {\n    color: ").concat(o.color,";\n    background-color: ").concat(o.backgroundColor,";\n    border-color: ").concat(o.borderColor,";\n  }\n  & > ").concat(p,",\n  &:active > ").concat(p," {\n    color: ").concat(o.backgroundColor,";\n    stroke: ").concat(o.borderColor,";\n  }\n  &:disabled > ").concat(b," {\n    color: ").concat(o.colorDisabled,";\n    background-color: ").concat(o.backgroundColorDisabled,";\n    border-color: ").concat(o.borderColorDisabled,";\n  }\n  &:disabled > ").concat(p," {\n    color: ").concat(o.backgroundColorDisabled,";\n    stroke: ").concat(o.borderColorDisabled,";\n  }\n");var g={default:{filled:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette)))),outline:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-primary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette))))},onColored:{filled:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette)))),outline:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:r.theme.colors['bg-brand-primary-500'],borderColor:r.theme.colors['bg-onmain-primary'],colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:r.theme.colors['bg-onmain-primary'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette))))}};var y=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r,e)=>({height:'2.8em',[r]:'string'==typeof o?o:"".concat(o).concat(e)})}).withConfig({componentId:"fox-ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{var r;var e=o.rounded?8:0;var n=o.left?0:e;var t=o.right?0:e;return"\n      display: ".concat('brand'===o.preset?'inline-flex':'inline-block',";\n      cursor: ").concat(null!==(r=o.cursor)&&void 0!==r?r:'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      &,\n      & > ").concat(b,", \n      & > ").concat(p," {\n        box-sizing: border-box;\n        transition-property: color, background-color;\n        transition-duration: 150ms;\n        transition-timing-function: ease-in;\n      }\n      & > ").concat(b," {\n        border-radius: ").concat(n,"px ").concat(t,"px ").concat(t,"px ").concat(n,"px;\n        border-left-style: ").concat(o.left?'none':'solid',";\n        border-right-style: ").concat(o.right?'none':'solid',";\n        margin-left: ").concat(o.left?-2:0,"px;\n        margin-right: ").concat(o.right?-2:0,"px;\n      }\n    ")}),(o=>{if('brand'===o.preset){var r=o.onColored?g.onColored:g.default;return o.outline?r.outline:r.filled}return o.compact||'compact'===o.tabTheme?d.compact:o.crispyCompact||'crispyCompact'===o.tabTheme?d.crispyCompact:o.crispy||'crispy'===o.tabTheme?d.crispy:d.default}),l,c,a,(o=>o.color&&"color: ".concat(t(o.color,o),";")),(o=>o.borderColor&&"border-color: ".concat(t(o.borderColor,o),";")));export{b as Content,p as Edge,y as Root};
+import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{getColor as t}from'../../mixins/color.js';import{responsiveSize as c}from'../../mixins/responsive-size.js';import{responsiveMargin as a}from'../../mixins/responsive-margin.js';import{focus as l}from'../../mixins/focus.js';import{createShouldForwardProp as i}from'../../shared/utils/style.js';import m from'./images/arrow.module.svg.js';var s=i((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored'].includes(o)));var d={default:e(["",""],(o=>"\n      font-size: 16px;\n      font-weight: bold;\n      padding-bottom: 12px;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 60px;\n      }\n    "))),compact:e(["",""],(o=>"\n      font-size: 16px;\n      font-weight: normal;\n      padding-bottom: 10px;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 20px;\n      }\n    "))),crispyCompact:e(["",""],(o=>"\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 6px;\n      text-transform: uppercase;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 18px;\n      }\n    "))),crispy:e(["",""],(o=>"\n      font-size: 12px;\n      font-weight: bold;\n      padding-bottom: 14px;\n      text-transform: uppercase;\n      color: ".concat(o.active?o.theme.colors.primary:o.theme.colors.mineShaft,";\n      border-bottom: 2px solid ").concat(o.active?'currentcolor':'transparent',";\n      &:hover {\n        color: ").concat(o.theme.colors.primary,";\n      }\n      &.active {\n        color: ").concat(o.theme.colors.primary,";\n        border-bottom-color: currentcolor;\n      }\n      & + & {\n        margin-left: 32px;\n      }\n    ")))};var b=r.span.withConfig({componentId:"fox-ui__sc-26yal1-0"})(["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;"]);var p=r(m).withConfig({shouldForwardProp:()=>!1}).withConfig({componentId:"fox-ui__sc-26yal1-1"})(["flex-shrink:0;height:100%;",""],(o=>o.after&&'transform: rotate(180deg);'));var h=o=>"\n  &:hover > ".concat(b," {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n    border-color: ").concat(o.borderColorHover,";\n  }\n  &:hover > ").concat(p," {\n    color: ").concat(o.backgroundColorHover,";\n    stroke: ").concat(o.borderColorHover,";\n  }\n  & > ").concat(b,",\n  &:active > ").concat(b," {\n    color: ").concat(o.color,";\n    background-color: ").concat(o.backgroundColor,";\n    border-color: ").concat(o.borderColor,";\n  }\n  & > ").concat(p,",\n  &:active > ").concat(p," {\n    color: ").concat(o.backgroundColor,";\n    stroke: ").concat(o.borderColor,";\n  }\n  &:disabled > ").concat(b," {\n    color: ").concat(o.colorDisabled,";\n    background-color: ").concat(o.backgroundColorDisabled,";\n    border-color: ").concat(o.borderColorDisabled,";\n  }\n  &:disabled > ").concat(p," {\n    color: ").concat(o.backgroundColorDisabled,";\n    stroke: ").concat(o.borderColorDisabled,";\n  }\n");var g={default:{filled:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:n(r.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette)))),outline:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-primary'],borderColor:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorHover:r.active?r.theme.colors['content-oncolor-primary']:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['bg-onmain-tertiary'],borderColorHover:r.active?r.theme.colors['bg-brand-primary-500']:r.theme.colors['border-onmain-default-large'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['bg-disabled-large']},r.palette))))},onColored:{filled:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette)))),outline:e(["",""],(r=>h(o({color:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColor:r.active?r.theme.colors['bg-onmain-primary']:r.theme.colors['bg-brand-primary-500'],borderColor:r.theme.colors['bg-onmain-primary'],colorHover:r.active?r.theme.colors['content-brand-primary']:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:r.theme.colors['bg-onmain-primary'],colorDisabled:r.theme.colors['content-disabled'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['bg-disabled-small']},r.palette))))}};var v=r.button.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:'string'==typeof o?o:"".concat(o).concat(r)})}).withConfig({componentId:"fox-ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{var r;var e=o.rounded?8:0;var n=o.left?0:e;var t=o.right?0:e;return"\n      display: ".concat('brand'===o.preset?'inline-flex':'inline-block',";\n      cursor: ").concat(null!==(r=o.cursor)&&void 0!==r?r:'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      &,\n      & > ").concat(b,", \n      & > ").concat(p," {\n        box-sizing: border-box;\n        transition-property: color, background-color;\n        transition-duration: 150ms;\n        transition-timing-function: ease-in;\n      }\n      & > ").concat(b," {\n        border-radius: ").concat(n,"px ").concat(t,"px ").concat(t,"px ").concat(n,"px;\n        border-left-style: ").concat(o.left?'none':'solid',";\n        border-right-style: ").concat(o.right?'none':'solid',";\n        margin-left: ").concat(o.left?-2:0,"px;\n        margin-right: ").concat(o.right?-2:0,"px;\n      }\n    ")}),(o=>{if('brand'===o.preset){var r=o.onColored?g.onColored:g.default;return o.outline?r.outline:r.filled}return o.compact||'compact'===o.tabTheme?d.compact:o.crispyCompact||'crispyCompact'===o.tabTheme?d.crispyCompact:o.crispy||'crispy'===o.tabTheme?d.crispy:d.default}),l,c,a,(o=>o.color&&"color: ".concat(t(o.color,o),";")),(o=>o.borderColor&&"border-color: ".concat(t(o.borderColor,o),";")));export{b as Content,p as Edge,v as Root};
 //# sourceMappingURL=style.js.map

package/components/Tab/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Tab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { getColor } from 'mixins/color'\nimport { responsiveSize } from 'mixins/size'\nimport { responsiveMargin } from 'mixins/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.module.svg'\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    ].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  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`\n\nexport const Edge = styled(Arrow).withConfig({\n  shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n  flex-shrink: 0;\n  height: 100%;\n  ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\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  & > ${Content},\n  &:active > ${Content} {\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    border-color: ${palette.borderColor};\n  }\n  & > ${Edge},\n  &:active > ${Edge} {\n    color: ${palette.backgroundColor};\n    stroke: ${palette.borderColor};\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    filled: 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        return 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            : props.theme.colors['bg-onmain-tertiary'],\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  },\n  onColored: {\n    filled: 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}\n\nconst tabStyles = (props: ThemedStyledProps<StyledTabProps, DefaultTheme>) => {\n  if (props.preset === 'brand') {\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n    return props.outline ? schema.outline : schema.filled\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\nexport const Root = styled.button\n  .withConfig<StyledTabProps>({\n    shouldForwardProp: shouldForwardTabProp,\n  })\n  .attrs(<Required<Pick<StyledTabProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, cssProperty, cssUnit) => {\n      return {\n        height: '2.8em',\n        [cssProperty]: typeof size === 'string' ? size : `${size}${cssUnit}`,\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      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n      cursor: ${props.cursor ?? '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      &,\n      & > ${Content}, \n      & > ${Edge} {\n        box-sizing: border-box;\n        transition-property: color, background-color;\n        transition-duration: 150ms;\n        transition-timing-function: ease-in;\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  ${tabStyles}\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","concat","compact","crispyCompact","crispy","Content","styled","span","withConfig","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","colorHover","backgroundColorHover","borderColorHover","color","backgroundColor","borderColor","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","filled","_objectSpread","tinycolor","darken","toString","outline","onColored","lighten","Root","button","attrs","dynamicSizeDeclaration","size","cssProperty","cssUnit","height","_props$cursor","radius","rounded","leftRadius","left","rightRadius","right","preset","cursor","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 type { ThemedStyledProps, DefaultTheme } from 'styled-components'\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.module.svg'\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    ].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  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`\n\nexport const Edge = styled(Arrow).withConfig({\n  shouldForwardProp: () => false,\n})<StyledTabEdgeProps>`\n  flex-shrink: 0;\n  height: 100%;\n  ${(props) => props.after && 'transform: rotate(180deg);'}\n`\n\nconst template = (palette: TabPalette) => `\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  & > ${Content},\n  &:active > ${Content} {\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    border-color: ${palette.borderColor};\n  }\n  & > ${Edge},\n  &:active > ${Edge} {\n    color: ${palette.backgroundColor};\n    stroke: ${palette.borderColor};\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    filled: 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        return 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            : props.theme.colors['bg-onmain-tertiary'],\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  },\n  onColored: {\n    filled: 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}\n\nconst tabStyles = (props: ThemedStyledProps<StyledTabProps, DefaultTheme>) => {\n  if (props.preset === 'brand') {\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n    return props.outline ? schema.outline : schema.filled\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\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      display: ${props.preset === 'brand' ? 'inline-flex' : 'inline-block'};\n      cursor: ${props.cursor ?? '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      &,\n      & > ${Content}, \n      & > ${Edge} {\n        box-sizing: border-box;\n        transition-property: color, background-color;\n        transition-duration: 150ms;\n        transition-timing-function: ease-in;\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  ${tabStyles}\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","concat","compact","crispyCompact","crispy","Content","styled","span","withConfig","componentId","Edge","Arrow","shouldForwardProp","after","template","palette","colorHover","backgroundColorHover","borderColorHover","color","backgroundColor","borderColor","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","filled","_objectSpread","tinycolor","darken","toString","outline","onColored","lighten","Root","button","attrs","dynamicSizeDeclaration","size","sizeUnits","height","fontSize","_props$cursor","radius","rounded","leftRadius","left","rightRadius","right","preset","cursor","schema","tabTheme","focus","responsiveSize","responsiveMargin","getColor"],"mappings":"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"}

package/components/Text/style.js

@@ -1,2 +1,2 @@
-import n from'styled-components';import{display as o}from'../../mixins/display.js';import{color as t}from'../../mixins/color.js';import{responsiveSize as i}from'../../mixins/size.js';import{responsiveMargin as e}from'../../mixins/margin.js';import{createShouldForwardProp as r}from'../../shared/utils/style.js';var a={lighter:100,normal:400,bold:600,bolder:800};var l={l:1.5,m:1.3,s:1.15,xs:1};var c=r((n=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','underline'].includes(n)));var s=n.div.withConfig({shouldForwardProp:c}).attrs({dynamicSizeDeclaration:(n,o,t)=>({[o]:'string'==typeof n?n:"".concat(n).concat(t)})}).withConfig({componentId:"fox-ui__sc-s2fogy-0"})([""," "," "," "," ",""],(n=>{var o,t;return"\n    margin: 0;\n    ".concat(n.fontFamily?"font-family: ".concat(n.fontFamily,";"):'',"\n    ").concat(n.transform?"text-transform: ".concat(n.transform,";"):'',"\n    ").concat(n.weight?"font-weight: ".concat(null!==(o=a[n.weight])&&void 0!==o?o:n.weight,";"):'',"\n    ").concat(n.fontStyle?"font-style: ".concat(n.fontStyle,";"):'',"\n    ").concat(n.textAlign?"text-align: ".concat(n.textAlign,";"):'',"\n    ").concat(n.lineHeight?"line-height: ".concat(null!==(t=l[n.lineHeight])&&void 0!==t?t:n.lineHeight,";"):'',"\n    ").concat(n.underline?"border-bottom: 1px ".concat('string'==typeof n.underline?n.underline:'solid',";"):'',"\n    a {\n      text-decoration: ").concat(n.underlineLinks?'underline':'none',";\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  ")}),i,e,(n=>n.display?o(n.display):null),(n=>t(n.color?n.color:n.theme.textColor)));export{s as Root};
+import n from'styled-components';import{display as o}from'../../mixins/display.js';import{color as t}from'../../mixins/color.js';import{responsiveSize as e}from'../../mixins/responsive-size.js';import{responsiveMargin as i}from'../../mixins/responsive-margin.js';import{createShouldForwardProp as r}from'../../shared/utils/style.js';var a={lighter:100,normal:400,bold:600,bolder:800};var l={l:1.5,m:1.3,s:1.15,xs:1};var s=r((n=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','underline'].includes(n)));var c=n.div.withConfig({shouldForwardProp:s}).withConfig({componentId:"fox-ui__sc-s2fogy-0"})([""," "," "," "," ",""],(n=>{var o,t;return"\n    margin: 0;\n    ".concat(n.fontFamily?"font-family: ".concat(n.fontFamily,";"):'',"\n    ").concat(n.transform?"text-transform: ".concat(n.transform,";"):'',"\n    ").concat(n.weight?"font-weight: ".concat(null!==(o=a[n.weight])&&void 0!==o?o:n.weight,";"):'',"\n    ").concat(n.fontStyle?"font-style: ".concat(n.fontStyle,";"):'',"\n    ").concat(n.textAlign?"text-align: ".concat(n.textAlign,";"):'',"\n    ").concat(n.lineHeight?"line-height: ".concat(null!==(t=l[n.lineHeight])&&void 0!==t?t:n.lineHeight,";"):'',"\n    ").concat(n.underline?"border-bottom: 1px ".concat('string'==typeof n.underline?n.underline:'solid',";"):'',"\n    a {\n      text-decoration: ").concat(n.underlineLinks?'underline':'none',";\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  ")}),e,i,(n=>n.display?o(n.display):null),(n=>t(n.color?n.color:n.theme.textColor)));export{c as Root};
 //# sourceMappingURL=style.js.map

package/components/Text/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/size'\nimport { responsiveMargin } from 'mixins/margin'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color } from 'shared/types'\nimport type { StyledTextProps } from './types'\n\nconst WEIGHT_MAP = {\n  lighter: 100,\n  normal: 400,\n  bold: 600,\n  bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n  l: 1.5,\n  m: 1.3,\n  s: 1.15,\n  xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'appearance',\n      'fontFamily',\n      'weight',\n      'fontStyle',\n      'transform',\n      'underlineLinks',\n      'textAlign',\n      'lineHeight',\n      'content',\n      'display',\n      'chars',\n      'quoted',\n      'showZeroMinorPart',\n      'separator',\n      'underline',\n    ].includes(propKey)\n)\n\nexport const Root = styled.div\n  .withConfig<StyledTextProps>({\n    shouldForwardProp: shouldForwardTextProp,\n  })\n  .attrs(<Required<Pick<StyledTextProps, 'dynamicSizeDeclaration'>>>{\n    dynamicSizeDeclaration: (size, cssProperty, cssUnit) => {\n      return {\n        [cssProperty]: typeof size === 'string' ? size : `${size}${cssUnit}`,\n      }\n    },\n  })`\n  ${(props) => `\n    margin: 0;\n    ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n    ${props.transform ? `text-transform: ${props.transform};` : ''}\n    ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n    ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n    ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n    ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n    ${props.underline ? `border-bottom: 1px ${typeof props.underline === 'string' ? props.underline : 'solid'};` : ''}\n    a {\n      text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  `}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","Root","styled","div","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","cssProperty","cssUnit","concat","componentId","props","_WEIGHT_MAP$props$wei","_LINE_HEIGHT_MAP$prop","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","underline","underlineLinks","responsiveSize","responsiveMargin","display","color","theme","textColor"],"mappings":"uTASA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,IAAMC,EAAwBC,GAC3BC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACAC,SAASD,KAGR,IAAME,EAAOC,EAAOC,IACxBC,WAA4B,CAC3BC,kBAAmBR,IAEpBS,MAAiE,CAChEC,uBAAwB,CAACC,EAAMC,EAAaC,KAAAA,CAExCD,CAACA,GAA8B,iBAATD,EAAoBA,EAA3B,GAAAG,OAAqCH,GAArCG,OAA4CD,OAPlDN,WAAA,CAAAQ,YAAA,uBAAGV,CAAH,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAWZW,IAAD,IAAAC,EAAAC,EAAA,MAEEF,yBAAAA,OAAAA,EAAMG,WAAN,gBAAAL,OAAmCE,EAAMG,gBAAgB,GAF3D,UAAAL,OAGEE,EAAMI,oCAA+BJ,EAAMI,UAAe,KAAA,GAC1DJ,UAAAA,OAAAA,EAAMK,8BAAqDL,UAA5B1B,EAAW0B,EAAMK,eAAAA,IAAWL,EAAAA,EAAAA,EAAMK,OAAY,KAAA,oBAC7EL,EAAMM,UAA2BN,eAAAA,OAAAA,EAAMM,UAAvC,KAAsD,GALxD,UAAAR,OAMEE,EAAMO,UAA2BP,eAAAA,OAAAA,EAAMO,UAAvC,KAAsD,GACtDP,UAAAA,OAAAA,EAAMQ,WAA6B7B,gBAAAA,OAAnC,QAAmCA,EAAAA,EAAgBqB,EAAMQ,uBAAzDN,EAAAA,EAAwEF,EAAMQ,WAAgB,KAAA,GAC9FR,UAAAA,OAAAA,EAAMS,UAAN,sBAAAX,OAAmE,iBAApBE,EAAMS,UAAyBT,EAAMS,UAAY,QAAhG,KAA6G,GAE1FT,sCAAAA,OAAAA,EAAMU,eAAiB,YAAc,OAV1D,4EAiBAC,EACAC,GAECZ,GAAWA,EAAMa,QAAUA,EAAQb,EAAMa,SAAW,OACpDb,GAAyBc,EAAdd,EAAMc,MAAcd,EAAMc,MAAed,EAAMe,MAAMC"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color } from 'shared/types'\nimport type { StyledTextProps } from './types'\n\nconst WEIGHT_MAP = {\n  lighter: 100,\n  normal: 400,\n  bold: 600,\n  bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n  l: 1.5,\n  m: 1.3,\n  s: 1.15,\n  xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'appearance',\n      'fontFamily',\n      'weight',\n      'fontStyle',\n      'transform',\n      'underlineLinks',\n      'textAlign',\n      'lineHeight',\n      'content',\n      'display',\n      'chars',\n      'quoted',\n      'showZeroMinorPart',\n      'separator',\n      'underline',\n    ].includes(propKey)\n)\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n  shouldForwardProp: shouldForwardTextProp,\n})`\n  ${(props) => `\n    margin: 0;\n    ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n    ${props.transform ? `text-transform: ${props.transform};` : ''}\n    ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n    ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n    ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n    ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n    ${props.underline ? `border-bottom: 1px ${typeof props.underline === 'string' ? props.underline : 'solid'};` : ''}\n    a {\n      text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  `}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n\n  ${(props) => (props.display ? display(props.display) : null)}\n  ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","Root","styled","div","withConfig","shouldForwardProp","componentId","props","_WEIGHT_MAP$props$wei","_LINE_HEIGHT_MAP$prop","fontFamily","concat","transform","weight","fontStyle","textAlign","lineHeight","underline","underlineLinks","responsiveSize","responsiveMargin","display","color","theme","textColor"],"mappings":"6UASA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,IAAMC,EAAwBC,GAC3BC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACAC,SAASD,KAGR,IAAME,EAAOC,EAAOC,IAAIC,WAA4B,CACzDC,kBAAmBR,IADJO,WAAA,CAAAE,YAAA,uBAAGJ,CAAH,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAGZK,IAAD,IAAAC,EAAAC,EAAA,MAEEF,yBAAAA,OAAAA,EAAMG,WAAN,gBAAAC,OAAmCJ,EAAMG,gBAAgB,GAF3D,UAAAC,OAGEJ,EAAMK,oCAA+BL,EAAMK,UAAe,KAAA,GAC1DL,UAAAA,OAAAA,EAAMM,8BAAqDN,UAA5BpB,EAAWoB,EAAMM,eAAWN,IAAAA,EAAAA,EAAAA,EAAMM,OAAY,KAAA,oBAC7EN,EAAMO,UAA2BP,eAAAA,OAAAA,EAAMO,UAAvC,KAAsD,GALxD,UAAAH,OAMEJ,EAAMQ,UAA2BR,eAAAA,OAAAA,EAAMQ,UAAvC,KAAsD,GACtDR,UAAAA,OAAAA,EAAMS,WAA6BxB,gBAAAA,OAAnC,QAAmCA,EAAAA,EAAgBe,EAAMS,mBAAAA,IAAzDP,EAAAA,EAAwEF,EAAMS,WAAgB,KAAA,GAC9FT,UAAAA,OAAAA,EAAMU,UAAN,sBAAAN,OAAmE,iBAApBJ,EAAMU,UAAyBV,EAAMU,UAAY,QAAhG,KAA6G,GAE1FV,sCAAAA,OAAAA,EAAMW,eAAiB,YAAc,OAV1D,4EAiBAC,EACAC,GAECb,GAAWA,EAAMc,QAAUA,EAAQd,EAAMc,SAAW,OACpDd,GAAyBe,EAAdf,EAAMe,MAAcf,EAAMe,MAAef,EAAMgB,MAAMC"}

package/dts/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import * as react from 'react';
-import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css } from 'styled-components';
+import * as react from 'react';
+import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 import { LinkProps, Link } from 'react-router-dom';
 import { Classes } from 'react-modal';
 import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
@@ -809,9 +809,7 @@ declare type CSSVerticalAlign = CSSGlobalValue | 'baseline' | 'sub' | 'super' |
 declare type CSSFontWeight = CSSGlobalValue | 'normal' | 'bold' | 'lighter' | 'bolder' | number;
 declare type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
 declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
-declare type SizeValue = Size | CSSGlobalValue | number;
 declare type Color = keyof typeof ColorNames | CSSColor;
-declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
 declare type ColorPaletteKey = 'color' | `color${string}` | `${string}Color` | `${string}Color${string}`;
 declare type Sizes = Record<Size, CSSProperties>;
 declare type ThemePreset = 'default' | 'brand';
@@ -922,6 +920,25 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
     render(): JSX.Element;
 }
 
+declare type ResponsivePropKey = 'size' | keyof CSSProperties;
+declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
+    [key in K]?: V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
+} & {
+    [key in `${K}${Breakpoint}`]?: V;
+};
+
+declare type SizeProperty = 'size';
+declare type SizeValue = Size | CSSGlobalValue | number;
+declare type ResponsiveSizeProps = ResponsiveProps<SizeProperty, SizeValue> & {
+    sizeUnits?: CSSUnit;
+    sizes?: Partial<Sizes>;
+};
+
+declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
+declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, CSSProperties['margin']> & {
+    marginUnits?: CSSUnit;
+};
+
 declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
 interface DisplayProperty {
     display?: Display;
@@ -1015,28 +1032,11 @@ interface InputField extends ColorProperty, ColorProperty<'placeholderColor'>, R
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
 }
-declare type ResponsiveSizeProps = {
-    sizeUnits?: CSSUnit;
-    sizes?: Partial<Sizes>;
-    size?: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
-} & {
-    [key in `size${Breakpoint}`]?: SizeValue;
-};
 declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
     palette?: Partial<Record<T, Color>>;
 };
-declare type DynamicSizeDeclaration = (size: number | CSSGlobalValue, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties;
-declare type CommonInterpolationProps<T extends ResponsiveSizeProps & ColorPaletteProps> = Omit<T, 'sizes' | 'size' | 'palette'> & {
-    dynamicSizeDeclaration?: DynamicSizeDeclaration;
-    sizeProperty?: keyof CSSProperties;
-    sizes: Sizes;
-    size: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
-    palette: Partial<Record<ColorPaletteKey, CSSColor>>;
-};
-declare type ResponsiveMarginProps = {
-    marginUnits?: CSSUnit;
-} & {
-    [key in `${MarginProperty}${Breakpoint | ''}`]?: CSSProperties['margin'];
+declare type ColorPaletteInterpolationProps<K extends ColorPaletteKey, T extends ColorPaletteProps<K>> = Omit<T, 'palette'> & {
+    palette: Partial<Record<K, CSSColor>>;
 };
 declare type ColorSchemaProps = {
     primary?: boolean;
@@ -1634,14 +1634,7 @@ DisplayProperty, ColorPaletteProps<keyof BadgePalette>, Omit<React.ComponentProp
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps>;
 
 interface Theme {
-    breakpoints: Readonly<{
-        xl: number;
-        l: number;
-        m: number;
-        s: number;
-        xs: number;
-        xxs: number;
-    }>;
+    breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
     colors: Record<keyof typeof ColorNames, CSSColor>;
     borderRadius: string;
     textColor?: string;
@@ -1676,11 +1669,6 @@ interface Theme {
     };
 }
 
-declare type StyledComponentProps = {
-    theme?: {
-        breakpoints?: typeof defaultTheme.breakpoints;
-    };
-};
 declare type MediaQueryParams = {
     and?: string;
     condition?: (_props: any) => boolean;
@@ -1688,67 +1676,67 @@ declare type MediaQueryParams = {
 /**
  * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`
  */
-declare const screenXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`
  */
-declare const screenS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`
  */
-declare const screenM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`
  */
-declare const screenL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`
  */
-declare const screenXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 319px) { ...args }`
  */
-declare const screenMaxXxs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxXxs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 374px) { ...args }`
  */
-declare const screenMaxXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 375px) { ...args }`
  */
-declare const screenMinXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 767px) { ...args }`
  */
-declare const screenMaxS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 768px) { ...args }`
  */
-declare const screenMinS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 1023px) { ...args }`
  */
-declare const screenMaxM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1024px) { ...args }`
  */
-declare const screenMinM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 1279px) { ...args }`
  */
-declare const screenMaxL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1280px) { ...args }`
  */
-declare const screenMinL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 1439px) { ...args }`
  */
-declare const screenMaxXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1440px) { ...args }`
  */
-declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: StyledComponentProps) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`
  */
@@ -3305,4 +3293,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, CommonInterpolationProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, DynamicSizeDeclaration, HEX, INITIAL_MASK, Icon, Input, InputField, MarginProperty, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, ResponsiveMarginProps, ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, SizeValue, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, TypographyProps, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteInterpolationProps, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, TypographyProps, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };

package/hocs/withMergedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type { BaseProps, ColorPaletteProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport type { CSSColor, Sizes, Color, ThemePreset, ColorPaletteKey } from 'shared/types'\n\nconst injectThemeColors = (\n  colors: Partial<Record<ColorPaletteKey, Color>> = {},\n  theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n  Object.keys(colors).reduce((resultColors, colorKey) => {\n    const color = colors[colorKey]\n    resultColors[colorKey] = theme.colors[color] ?? color\n    return resultColors\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n  T extends ResponsiveSizeProps & ColorPaletteProps & BaseProps,\n  P extends HTMLElement = HTMLElement\n>(\n  Component: React.FC<\n    Omit<T, 'sizes' | 'preset' | 'palette'> & {\n      sizes: Sizes\n      preset: ThemePreset\n      palette: Partial<Record<ColorPaletteKey, CSSColor>>\n    } & React.RefAttributes<P>\n  >,\n  options: {\n    displayName: string\n    sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n  }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const componentSizes =\n      typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n    const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAiBaA,EAAkB,CAI7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QAlCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAkCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}
+{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type { BaseProps, ColorPaletteProps } from 'shared/interfaces'\nimport type { ResponsiveSizeProps } from 'mixins/responsive-size'\nimport type { CSSColor, Sizes, Color, ThemePreset, ColorPaletteKey } from 'shared/types'\n\nconst injectThemeColors = (\n  colors: Partial<Record<ColorPaletteKey, Color>> = {},\n  theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n  Object.keys(colors).reduce((resultColors, colorKey) => {\n    const color = colors[colorKey]\n    resultColors[colorKey] = theme.colors[color] ?? color\n    return resultColors\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n  T extends ResponsiveSizeProps & ColorPaletteProps & BaseProps,\n  P extends HTMLElement = HTMLElement\n>(\n  Component: React.FC<\n    Omit<T, 'sizes' | 'preset' | 'palette'> & {\n      sizes: Sizes\n      preset: ThemePreset\n      palette: Partial<Record<ColorPaletteKey, CSSColor>>\n    } & React.RefAttributes<P>\n  >,\n  options: {\n    displayName: string\n    sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n  }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const componentSizes =\n      typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n    const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAkBaA,EAAkB,CAI7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QAlCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAkCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}