@foxford/ui 2.17.0 → 2.18.0-beta-e3198ab-20240126
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/ArrowBadge/style.js +1 -1
- package/components/ArrowBadge/style.js.map +1 -1
- package/components/Badge/style.js +1 -1
- package/components/Badge/style.js.map +1 -1
- package/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/dts/index.d.ts +41 -53
- package/hocs/withMergedProps.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/mixins/create-responsive-props.js +2 -0
- package/mixins/create-responsive-props.js.map +1 -0
- package/mixins/responsive-margin.js +2 -0
- package/mixins/responsive-margin.js.map +1 -0
- package/mixins/responsive-size.js +2 -0
- package/mixins/responsive-size.js.map +1 -0
- package/mixins/screen.js +1 -1
- package/mixins/screen.js.map +1 -1
- package/package.json +2 -1
- package/shared/constants.js +2 -0
- package/shared/constants.js.map +1 -0
- package/shared/regexp.js +1 -1
- package/shared/regexp.js.map +1 -1
- package/theme/themes.js +1 -1
- package/theme/themes.js.map +1 -1
- package/mixins/margin.js +0 -2
- package/mixins/margin.js.map +0 -1
- package/mixins/size.js +0 -2
- package/mixins/size.js.map +0 -1
- package/theme/breakpoints.js +0 -2
- package/theme/breakpoints.js.map +0 -1
package/components/Tab/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +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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"}
|
|
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/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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n from'styled-components';import{display as o}from'../../mixins/display.js';import{color as t}from'../../mixins/color.js';import{responsiveSize as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +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
|
|
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/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
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import * as react from 'react';
|
|
3
|
-
import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
|
|
4
2
|
import * as styled_components from 'styled-components';
|
|
5
3
|
import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css } from 'styled-components';
|
|
4
|
+
import * as react from 'react';
|
|
5
|
+
import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
|
|
6
6
|
import { LinkProps, Link } from 'react-router-dom';
|
|
7
7
|
import { Classes } from 'react-modal';
|
|
8
8
|
import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
|
|
@@ -809,9 +809,7 @@ declare type CSSVerticalAlign = CSSGlobalValue | 'baseline' | 'sub' | 'super' |
|
|
|
809
809
|
declare type CSSFontWeight = CSSGlobalValue | 'normal' | 'bold' | 'lighter' | 'bolder' | number;
|
|
810
810
|
declare type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
|
|
811
811
|
declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
|
|
812
|
-
declare type SizeValue = Size | CSSGlobalValue | number;
|
|
813
812
|
declare type Color = keyof typeof ColorNames | CSSColor;
|
|
814
|
-
declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
|
|
815
813
|
declare type ColorPaletteKey = 'color' | `color${string}` | `${string}Color` | `${string}Color${string}`;
|
|
816
814
|
declare type Sizes = Record<Size, CSSProperties>;
|
|
817
815
|
declare type ThemePreset = 'default' | 'brand';
|
|
@@ -922,6 +920,25 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
|
|
|
922
920
|
render(): JSX.Element;
|
|
923
921
|
}
|
|
924
922
|
|
|
923
|
+
declare type ResponsivePropKey = 'size' | keyof CSSProperties;
|
|
924
|
+
declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
|
|
925
|
+
[key in K]?: V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
|
|
926
|
+
} & {
|
|
927
|
+
[key in `${K}${Breakpoint}`]?: V;
|
|
928
|
+
};
|
|
929
|
+
|
|
930
|
+
declare type SizeProperty = 'size';
|
|
931
|
+
declare type SizeValue = Size | CSSGlobalValue | number;
|
|
932
|
+
declare type ResponsiveSizeProps = ResponsiveProps<SizeProperty, SizeValue> & {
|
|
933
|
+
sizeUnits?: CSSUnit;
|
|
934
|
+
sizes?: Partial<Sizes>;
|
|
935
|
+
};
|
|
936
|
+
|
|
937
|
+
declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
|
|
938
|
+
declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, CSSProperties['margin']> & {
|
|
939
|
+
marginUnits?: CSSUnit;
|
|
940
|
+
};
|
|
941
|
+
|
|
925
942
|
declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
|
|
926
943
|
interface DisplayProperty {
|
|
927
944
|
display?: Display;
|
|
@@ -1015,28 +1032,11 @@ interface InputField extends ColorProperty, ColorProperty<'placeholderColor'>, R
|
|
|
1015
1032
|
readOnly?: boolean | undefined;
|
|
1016
1033
|
required?: boolean | undefined;
|
|
1017
1034
|
}
|
|
1018
|
-
declare type ResponsiveSizeProps = {
|
|
1019
|
-
sizeUnits?: CSSUnit;
|
|
1020
|
-
sizes?: Partial<Sizes>;
|
|
1021
|
-
size?: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
|
|
1022
|
-
} & {
|
|
1023
|
-
[key in `size${Breakpoint}`]?: SizeValue;
|
|
1024
|
-
};
|
|
1025
1035
|
declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
|
|
1026
1036
|
palette?: Partial<Record<T, Color>>;
|
|
1027
1037
|
};
|
|
1028
|
-
declare type
|
|
1029
|
-
|
|
1030
|
-
dynamicSizeDeclaration?: DynamicSizeDeclaration;
|
|
1031
|
-
sizeProperty?: keyof CSSProperties;
|
|
1032
|
-
sizes: Sizes;
|
|
1033
|
-
size: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
|
|
1034
|
-
palette: Partial<Record<ColorPaletteKey, CSSColor>>;
|
|
1035
|
-
};
|
|
1036
|
-
declare type ResponsiveMarginProps = {
|
|
1037
|
-
marginUnits?: CSSUnit;
|
|
1038
|
-
} & {
|
|
1039
|
-
[key in `${MarginProperty}${Breakpoint | ''}`]?: CSSProperties['margin'];
|
|
1038
|
+
declare type ColorPaletteInterpolationProps<K extends ColorPaletteKey, T extends ColorPaletteProps<K>> = Omit<T, 'palette'> & {
|
|
1039
|
+
palette: Partial<Record<K, CSSColor>>;
|
|
1040
1040
|
};
|
|
1041
1041
|
declare type ColorSchemaProps = {
|
|
1042
1042
|
primary?: boolean;
|
|
@@ -1634,14 +1634,7 @@ DisplayProperty, ColorPaletteProps<keyof BadgePalette>, Omit<React.ComponentProp
|
|
|
1634
1634
|
declare const Badge: React.ForwardRefExoticComponent<BadgeProps>;
|
|
1635
1635
|
|
|
1636
1636
|
interface Theme {
|
|
1637
|
-
breakpoints: Readonly<
|
|
1638
|
-
xl: number;
|
|
1639
|
-
l: number;
|
|
1640
|
-
m: number;
|
|
1641
|
-
s: number;
|
|
1642
|
-
xs: number;
|
|
1643
|
-
xxs: number;
|
|
1644
|
-
}>;
|
|
1637
|
+
breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
|
|
1645
1638
|
colors: Record<keyof typeof ColorNames, CSSColor>;
|
|
1646
1639
|
borderRadius: string;
|
|
1647
1640
|
textColor?: string;
|
|
@@ -1676,11 +1669,6 @@ interface Theme {
|
|
|
1676
1669
|
};
|
|
1677
1670
|
}
|
|
1678
1671
|
|
|
1679
|
-
declare type StyledComponentProps = {
|
|
1680
|
-
theme?: {
|
|
1681
|
-
breakpoints?: typeof defaultTheme.breakpoints;
|
|
1682
|
-
};
|
|
1683
|
-
};
|
|
1684
1672
|
declare type MediaQueryParams = {
|
|
1685
1673
|
and?: string;
|
|
1686
1674
|
condition?: (_props: any) => boolean;
|
|
@@ -1688,67 +1676,67 @@ declare type MediaQueryParams = {
|
|
|
1688
1676
|
/**
|
|
1689
1677
|
* @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`
|
|
1690
1678
|
*/
|
|
1691
|
-
declare const screenXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1679
|
+
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>>;
|
|
1692
1680
|
/**
|
|
1693
1681
|
* @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`
|
|
1694
1682
|
*/
|
|
1695
|
-
declare const screenS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1683
|
+
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>>;
|
|
1696
1684
|
/**
|
|
1697
1685
|
* @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`
|
|
1698
1686
|
*/
|
|
1699
|
-
declare const screenM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1687
|
+
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>>;
|
|
1700
1688
|
/**
|
|
1701
1689
|
* @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`
|
|
1702
1690
|
*/
|
|
1703
|
-
declare const screenL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1691
|
+
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>>;
|
|
1704
1692
|
/**
|
|
1705
1693
|
* @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`
|
|
1706
1694
|
*/
|
|
1707
|
-
declare const screenXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1695
|
+
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>>;
|
|
1708
1696
|
/**
|
|
1709
1697
|
* @return `@media screen and (max-width: 319px) { ...args }`
|
|
1710
1698
|
*/
|
|
1711
|
-
declare const screenMaxXxs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1699
|
+
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>>;
|
|
1712
1700
|
/**
|
|
1713
1701
|
* @return `@media screen and (max-width: 374px) { ...args }`
|
|
1714
1702
|
*/
|
|
1715
|
-
declare const screenMaxXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1703
|
+
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>>;
|
|
1716
1704
|
/**
|
|
1717
1705
|
* @return `@media screen and (min-width: 375px) { ...args }`
|
|
1718
1706
|
*/
|
|
1719
|
-
declare const screenMinXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1707
|
+
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>>;
|
|
1720
1708
|
/**
|
|
1721
1709
|
* @return `@media screen and (max-width: 767px) { ...args }`
|
|
1722
1710
|
*/
|
|
1723
|
-
declare const screenMaxS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1711
|
+
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>>;
|
|
1724
1712
|
/**
|
|
1725
1713
|
* @return `@media screen and (min-width: 768px) { ...args }`
|
|
1726
1714
|
*/
|
|
1727
|
-
declare const screenMinS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1715
|
+
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>>;
|
|
1728
1716
|
/**
|
|
1729
1717
|
* @return `@media screen and (max-width: 1023px) { ...args }`
|
|
1730
1718
|
*/
|
|
1731
|
-
declare const screenMaxM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1719
|
+
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>>;
|
|
1732
1720
|
/**
|
|
1733
1721
|
* @return `@media screen and (min-width: 1024px) { ...args }`
|
|
1734
1722
|
*/
|
|
1735
|
-
declare const screenMinM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1723
|
+
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>>;
|
|
1736
1724
|
/**
|
|
1737
1725
|
* @return `@media screen and (max-width: 1279px) { ...args }`
|
|
1738
1726
|
*/
|
|
1739
|
-
declare const screenMaxL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1727
|
+
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>>;
|
|
1740
1728
|
/**
|
|
1741
1729
|
* @return `@media screen and (min-width: 1280px) { ...args }`
|
|
1742
1730
|
*/
|
|
1743
|
-
declare const screenMinL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1731
|
+
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>>;
|
|
1744
1732
|
/**
|
|
1745
1733
|
* @return `@media screen and (max-width: 1439px) { ...args }`
|
|
1746
1734
|
*/
|
|
1747
|
-
declare const screenMaxXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1735
|
+
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>>;
|
|
1748
1736
|
/**
|
|
1749
1737
|
* @return `@media screen and (min-width: 1440px) { ...args }`
|
|
1750
1738
|
*/
|
|
1751
|
-
declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props:
|
|
1739
|
+
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>>;
|
|
1752
1740
|
/**
|
|
1753
1741
|
* @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`
|
|
1754
1742
|
*/
|
|
@@ -3305,4 +3293,4 @@ declare namespace Select {
|
|
|
3305
3293
|
var displayName: string;
|
|
3306
3294
|
}
|
|
3307
3295
|
|
|
3308
|
-
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,
|
|
3296
|
+
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 };
|
|
@@ -1 +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
|
|
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 } 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"}
|