@foxford/ui 2.20.1-beta-1a63e52-20240307 → 2.20.2-beta-4fe6f48-20240311
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/FormInputLabel/FormInputLabel.js +1 -1
- package/components/FormInputLabel/FormInputLabel.js.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{Text as i}from'../Text/Text.js';import{Icon as t}from'../Icon/Icon.js';import'../Icon/icons.js';import{Spacer as s}from'../Spacer/Spacer.js';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{SIZES as n}from'./constants.js';import{Root as p,Label as l,Caption as m}from'./style.js';import{jsxs as c,jsx as h}from'react/jsx-runtime';var f=["size","labelPosition","textProps","iconProps","icon","input","label","text","controls"];var b='FormInputLabel';var d=a(e(((e,a)=>{var{size:n="m",labelPosition:b="dynamic",textProps:d={},iconProps:x={},icon:j,input:
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{Text as i}from'../Text/Text.js';import{Icon as t}from'../Icon/Icon.js';import'../Icon/icons.js';import{Spacer as s}from'../Spacer/Spacer.js';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{SIZES as n}from'./constants.js';import{Root as p,Label as l,Caption as m}from'./style.js';import{jsxs as c,jsx as h}from'react/jsx-runtime';var f=["size","labelPosition","textProps","iconProps","icon","input","label","text","controls"];var b='FormInputLabel';var d=a(e(((e,a)=>{var{size:n="m",labelPosition:b="dynamic",textProps:d={},iconProps:x={},icon:j,input:u,label:P,text:g,controls:I}=e,S=o(e,f);return c(p,r(r({},S),{},{size:n,labelPosition:b,ref:a,children:[j&&h(s,{display:"flex",marginRight:12,children:h(t,r({as:"span",color:"inherit",icon:j},x))}),c(l,r(r({size:"inherit",color:"inherit"},d),{},{children:[u,P&&h(m,{children:P})]})),g&&h(i,r(r({size:"inherit",color:"inherit",whiteSpace:"nowrap",cursor:"inherit",marginLeft:12,marginRight:I?void 0:6},d),{},{children:g})),I&&h(s,{display:"flex",marginLeft:4,children:I})]}))})),{sizes:n,displayName:"FormInputLabel"});export{b as COMPONENT_NAME,d as FormInputLabel};
|
|
2
2
|
//# sourceMappingURL=FormInputLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInputLabel.js","sources":["../../../../src/components/FormInputLabel/FormInputLabel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Spacer } from 'components/Spacer'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { FormInputLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormInputLabel'\n\nconst FormInputLabel: React.ForwardRefExoticComponent<FormInputLabelProps> = withMergedProps<\n FormInputLabelProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n icon,\n input,\n label,\n text,\n controls,\n ...restProps\n } = props\n\n return (\n <Styled.Root {...restProps} size={size} labelPosition={labelPosition} ref={ref}>\n {icon && (\n <Spacer display='flex' marginRight={12}>\n <Icon as='span' color='inherit' icon={icon} {...iconProps} />\n </Spacer>\n )}\n <Styled.Label size='inherit' color='inherit' {...textProps}>\n {input}\n {label && <Styled.Caption>{label}</Styled.Caption>}\n </Styled.Label>\n {text && (\n <Text\n size='inherit'\n color='inherit'\n whiteSpace='nowrap'\n marginLeft={12}\n marginRight={!controls ? 6 : undefined}\n {...textProps}\n >\n {text}\n </Text>\n )}\n {controls && (\n <Spacer display='flex' marginLeft={4}>\n {controls}\n </Spacer>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { FormInputLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormInputLabel","withMergedProps","forwardRef","props","ref","size","labelPosition","textProps","iconProps","icon","input","label","text","controls","restProps","_excluded","_jsxs","Styled.Root","children","_jsx","Spacer","display","marginRight","Icon","_objectSpread","as","color","Styled.Label","Styled.Caption","Text","whiteSpace","marginLeft","sizes","SIZES","displayName"],"mappings":"4lBASMA,IAAAA,EAAiB,iBAEjBC,IAAAA,EAAuEC,EAI3EC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,cAEJA,EAAgB,UAFZC,UAGJA,EAAY,GAHRC,UAIJA,EAAY,GAJRC,KAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,KAQJA,EARIC,SASJA,GAEEV,EADCW,IACDX,EAXJY,GAaA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BT,KAAMA,EAAMC,cAAeA,EAAeF,IAAKA,EAA3Ec,SACGT,CAAAA,GACCU,EAACC,EAAD,CAAQC,QAAQ,OAAOC,YAAa,GAApCJ,SACEC,EAACI,EAADC,EAAA,CAAMC,GAAG,OAAOC,MAAM,UAAUjB,KAAMA,GAAUD,MAGpDQ,EAACW,EAADH,EAAAA,EAAA,CAAcnB,KAAK,UAAUqB,MAAM,WAAcnB,GAAjD,GAAA,CAAAW,SAAA,CACGR,EACAC,GAASQ,EAACS,EAAD,CAAAV,SAAiBP,QAE5BC,GACCO,EAACU,EAADL,EAAAA,EAAA,CACEnB,KAAK,UACLqB,MAAM,UACNI,WAAW,SACXC,WAAY,
|
|
1
|
+
{"version":3,"file":"FormInputLabel.js","sources":["../../../../src/components/FormInputLabel/FormInputLabel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Spacer } from 'components/Spacer'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { FormInputLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormInputLabel'\n\nconst FormInputLabel: React.ForwardRefExoticComponent<FormInputLabelProps> = withMergedProps<\n FormInputLabelProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n icon,\n input,\n label,\n text,\n controls,\n ...restProps\n } = props\n\n return (\n <Styled.Root {...restProps} size={size} labelPosition={labelPosition} ref={ref}>\n {icon && (\n <Spacer display='flex' marginRight={12}>\n <Icon as='span' color='inherit' icon={icon} {...iconProps} />\n </Spacer>\n )}\n <Styled.Label size='inherit' color='inherit' {...textProps}>\n {input}\n {label && <Styled.Caption>{label}</Styled.Caption>}\n </Styled.Label>\n {text && (\n <Text\n size='inherit'\n color='inherit'\n whiteSpace='nowrap'\n cursor='inherit'\n marginLeft={12}\n marginRight={!controls ? 6 : undefined}\n {...textProps}\n >\n {text}\n </Text>\n )}\n {controls && (\n <Spacer display='flex' marginLeft={4}>\n {controls}\n </Spacer>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { FormInputLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormInputLabel","withMergedProps","forwardRef","props","ref","size","labelPosition","textProps","iconProps","icon","input","label","text","controls","restProps","_excluded","_jsxs","Styled.Root","children","_jsx","Spacer","display","marginRight","Icon","_objectSpread","as","color","Styled.Label","Styled.Caption","Text","whiteSpace","cursor","marginLeft","sizes","SIZES","displayName"],"mappings":"4lBASMA,IAAAA,EAAiB,iBAEjBC,IAAAA,EAAuEC,EAI3EC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,cAEJA,EAAgB,UAFZC,UAGJA,EAAY,GAHRC,UAIJA,EAAY,GAJRC,KAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,KAQJA,EARIC,SASJA,GAEEV,EADCW,IACDX,EAXJY,GAaA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BT,KAAMA,EAAMC,cAAeA,EAAeF,IAAKA,EAA3Ec,SACGT,CAAAA,GACCU,EAACC,EAAD,CAAQC,QAAQ,OAAOC,YAAa,GAApCJ,SACEC,EAACI,EAADC,EAAA,CAAMC,GAAG,OAAOC,MAAM,UAAUjB,KAAMA,GAAUD,MAGpDQ,EAACW,EAADH,EAAAA,EAAA,CAAcnB,KAAK,UAAUqB,MAAM,WAAcnB,GAAjD,GAAA,CAAAW,SAAA,CACGR,EACAC,GAASQ,EAACS,EAAD,CAAAV,SAAiBP,QAE5BC,GACCO,EAACU,EAADL,EAAAA,EAAA,CACEnB,KAAK,UACLqB,MAAM,UACNI,WAAW,SACXC,OAAO,UACPC,WAAY,GACZV,YAAcT,SAAW,GACrBN,GAPN,GAAA,CAAAW,SASGN,KAGJC,GACCM,EAACC,EAAD,CAAQC,QAAQ,OAAOW,WAAY,EAAnCd,SACGL,WAMX,CACEoB,MAAOC,EACPC,YAtDmB"}
|
|
@@ -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{Text as t}from'../Text/Text.js';import{createShouldForwardProp as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{Text as t}from'../Text/Text.js';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{responsiveSize as a}from'../../mixins/responsive-size.js';import{responsiveMargin as l}from'../../mixins/responsive-margin.js';var s=c((o=>!['primary','secondary','active','error','success','disabled','onColored','labelPosition','inline'].includes(o)));var i=r(t).attrs({forwardedAs:'label'}).withConfig({componentId:"fox-ui__sc-1il4atw-0"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;&::after{content:'';position:absolute;bottom:0;right:0;width:40px;height:100%;pointer-events:none;opacity:1;background-image:linear-gradient(90deg,transparent,currentColor);transition-property:color,opacity;}"]);var d=r.span.withConfig({componentId:"fox-ui__sc-1il4atw-1"})(["box-sizing:border-box;position:absolute;left:0;top:50%;width:100%;white-space:nowrap;cursor:inherit;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition-property:transform;"]);var m=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n &:focus-within {\n color: ").concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n }\n & > ").concat(i,"::after {\n color: ").concat(o.backgroundColor,";\n }\n");var b={onColored:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-200'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-200'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-200'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-200'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:n(r.theme.colors['bg-onmain-primary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},secondary:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:n(r.theme.colors['bg-onmain-secondary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},primary:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:n(r.theme.colors['bg-onmain-primary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))}};var g=r.div.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),padding:'0.25em 0.6em 0.25em 1em',minHeight:'3em',borderRadius:'0.6em'})}).withConfig({componentId:"fox-ui__sc-1il4atw-2"})([""," "," "," ",""],(o=>{var r;var e=o.active?'scale(0.7) translateX(-21.5%) translateY(-145%)':'translateY(-50%)';var n='1';var t='auto';return'top'===o.labelPosition&&(e='scale(0.7) translateX(-21.5%) translateY(-145%)'),'center'===o.labelPosition&&(e="translateY(-50%)",n=o.active?'0':'1',t=o.active?'-1':'auto'),"\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ".concat(o.inline?'inline-flex':'flex',";\n cursor: ").concat((null!==(r=o.cursor)&&void 0!==r?r:o.disabled)?'not-allowed':'pointer',";\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ").concat(i,"::after,\n & > ").concat(i," > ").concat(d," {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ").concat(i," > ").concat(d," {\n transform: ").concat(e,";\n opacity: ").concat(n,";\n z-index: ").concat(t,";\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ").concat(o.theme.colors.white,", 0 0 0 4px ").concat(o.theme.colors['border-focus'],";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ").concat(i,"::after,\n &:focus-within > ").concat(i,"::after {\n opacity: 0;\n }\n ")}),(o=>{var r=b.primary;return o.secondary&&(r=b.secondary),o.onColored&&(r=b.onColored),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),a,l);export{d as Caption,i as Label,g as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { Text } from 'components/Text'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'active',\n 'error',\n 'success',\n 'disabled',\n 'onColored',\n 'labelPosition',\n 'inline',\n ].includes(propKey)\n)\n\nexport const Label = styled(Text).attrs({ forwardedAs: 'label' })`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: 1;\n background-image: linear-gradient(90deg, transparent, currentColor);\n transition-property: color, opacity;\n }\n`\n\nexport const Caption = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform;\n`\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n & > ${Label}::after {\n color: ${palette.backgroundColor};\n }\n \n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n })\n .attrs<StyledFormInputLabelProps>(<Required<Pick<StyledFormInputLabelProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.25em 0.6em 0.25em 1em',\n minHeight: '3em',\n borderRadius: '0.6em',\n }),\n })`\n ${(props) => {\n let transform = props.active ? 'scale(0.7) translateX(-21.5%) translateY(-145%)' : 'translateY(-50%)'\n let opacity = '1'\n let zIndex = 'auto'\n\n if (props.labelPosition === 'top') {\n transform = 'scale(0.7) translateX(-21.5%) translateY(-145%)'\n }\n if (props.labelPosition === 'center') {\n transform = `translateY(-50%)`\n opacity = props.active ? '0' : '1'\n zIndex = props.active ? '-1' : 'auto'\n }\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ${Label}::after,\n & > ${Label} > ${Caption} {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ${Label} > ${Caption} {\n transform: ${transform};\n opacity: ${opacity};\n z-index: ${zIndex};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ${Label}::after,\n &:focus-within > ${Label}::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","Label","styled","Text","attrs","forwardedAs","withConfig","componentId","Caption","span","template","palette","concat","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","onColored","disabled","css","props","_objectSpread","theme","colors","transparent","error","success","default","active","tinycolor","darken","toString","secondary","primary","Root","div","shouldForwardProp","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","minHeight","borderRadius","_props$cursor","transform","opacity","zIndex","labelPosition","inline","cursor","white","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { Text } from 'components/Text'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'active',\n 'error',\n 'success',\n 'disabled',\n 'onColored',\n 'labelPosition',\n 'inline',\n ].includes(propKey)\n)\n\nexport const Label = styled(Text).attrs({ forwardedAs: 'label' })`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: 1;\n background-image: linear-gradient(90deg, transparent, currentColor);\n transition-property: color, opacity;\n }\n`\n\nexport const Caption = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n white-space: nowrap;\n cursor: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform;\n`\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:focus-within {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Label}::after {\n color: ${palette.backgroundColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n })\n .attrs<StyledFormInputLabelProps>(<Required<Pick<StyledFormInputLabelProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.25em 0.6em 0.25em 1em',\n minHeight: '3em',\n borderRadius: '0.6em',\n }),\n })`\n ${(props) => {\n let transform = props.active ? 'scale(0.7) translateX(-21.5%) translateY(-145%)' : 'translateY(-50%)'\n let opacity = '1'\n let zIndex = 'auto'\n\n if (props.labelPosition === 'top') {\n transform = 'scale(0.7) translateX(-21.5%) translateY(-145%)'\n }\n if (props.labelPosition === 'center') {\n transform = `translateY(-50%)`\n opacity = props.active ? '0' : '1'\n zIndex = props.active ? '-1' : 'auto'\n }\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ${Label}::after,\n & > ${Label} > ${Caption} {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ${Label} > ${Caption} {\n transform: ${transform};\n opacity: ${opacity};\n z-index: ${zIndex};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ${Label}::after,\n &:focus-within > ${Label}::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","Label","styled","Text","attrs","forwardedAs","withConfig","componentId","Caption","span","template","palette","concat","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","onColored","disabled","css","props","_objectSpread","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Root","div","shouldForwardProp","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","minHeight","borderRadius","_props$cursor","transform","active","opacity","zIndex","labelPosition","inline","cursor","white","schema","responsiveSize","responsiveMargin"],"mappings":"4WASA,IAAMA,EAAkCC,GACrCC,IACE,CACC,UACA,YACA,SACA,QACA,UACA,WACA,YACA,gBACA,UACAC,SAASD,KAGR,IAAME,EAAQC,EAAOC,GAAMC,MAAM,CAAEC,YAAa,UAArCC,WAAA,CAAAC,YAAA,wBAAGL,CAAd,CAAA,wTAqBMM,IAAAA,EAAUN,EAAOO,KAAVH,WAAA,CAAAC,YAAA,wBAAGL,CAAhB,CAAA,kMAcP,IAAMQ,EAAYC,GAAD,cAAAC,OACND,EAAQE,wCACGF,EAAQG,gBACZH,uBAAAA,OAAAA,EAAQI,YAHT,+BAAAH,OAKJD,EAAQK,+CACGL,EAAQM,qBACZN,yBAAAA,OAAAA,EAAQO,iBAPX,2CAAAN,OAUJD,EAAQE,0CACGF,EAAQG,gBACZH,yBAAAA,OAAAA,EAAQI,YAZX,kBAAAH,OAcTX,EACKU,0BAAAA,OAAAA,EAAQG,gBAfrB,YAmBA,IAAMK,EAAe,CACnBC,UAAW,CACTC,SAAUC,EACLC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,oBAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAME,MAAMC,OAAOC,YAChCX,WAAYO,EAAME,MAAMC,OAAO,oBAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,qBACzCR,iBAAkBK,EAAME,MAAMC,OAAOC,aAClCJ,EAAMZ,YAGfiB,MAAON,EACFC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,sBACpCX,YAAaQ,EAAME,MAAMC,OAAO,sBAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,sBACzCR,iBAAkBK,EAAME,MAAMC,OAAO,uBAClCH,EAAMZ,YAGfkB,QAASP,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,wBACpCX,YAAaQ,EAAME,MAAMC,OAAO,wBAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,wBACzCR,iBAAkBK,EAAME,MAAMC,OAAO,yBAClCH,EAAMZ,YAGfmB,QAASR,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAME,MAAMC,OAAO,+BAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBc,EAAUR,EAAME,MAAMC,OAAO,sBAAsBM,OAAO,GAAGC,WACnFf,iBAAkBK,EAAME,MAAMC,OAAO,gCAClCH,EAAMZ,aAIjBuB,UAAW,CACTb,SAAUC,EACLC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,oBAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAME,MAAMC,OAAOC,YAChCX,WAAYO,EAAME,MAAMC,OAAO,oBAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,qBACzCR,iBAAkBK,EAAME,MAAMC,OAAOC,aAClCJ,EAAMZ,YAGfiB,MAAON,EACFC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,sBACpCX,YAAaQ,EAAME,MAAMC,OAAO,sBAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,sBACzCR,iBAAkBK,EAAME,MAAMC,OAAO,uBAClCH,EAAMZ,YAGfkB,QAASP,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,wBACpCX,YAAaQ,EAAME,MAAMC,OAAO,wBAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,wBACzCR,iBAAkBK,EAAME,MAAMC,OAAO,yBAClCH,EAAMZ,YAGfmB,QAASR,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,uBACpCX,YAAaQ,EAAME,MAAMC,OAAO,+BAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBc,EAAUR,EAAME,MAAMC,OAAO,wBAAwBM,OAAO,GAAGC,WACrFf,iBAAkBK,EAAME,MAAMC,OAAO,gCAClCH,EAAMZ,aAIjBwB,QAAS,CACPd,SAAUC,EACLC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,oBAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAME,MAAMC,OAAOC,YAChCX,WAAYO,EAAME,MAAMC,OAAO,oBAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,qBACzCR,iBAAkBK,EAAME,MAAMC,OAAOC,aAClCJ,EAAMZ,YAGfiB,MAAON,EACFC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,sBACpCX,YAAaQ,EAAME,MAAMC,OAAO,sBAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,sBACzCR,iBAAkBK,EAAME,MAAMC,OAAO,uBAClCH,EAAMZ,YAGfkB,QAASP,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,wBACpCX,YAAaQ,EAAME,MAAMC,OAAO,wBAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBM,EAAME,MAAMC,OAAO,wBACzCR,iBAAkBK,EAAME,MAAMC,OAAO,yBAClCH,EAAMZ,YAGfmB,QAASR,EACJC,CAAAA,GAAAA,KAAAA,GACDb,EAAQc,EAAA,CACNX,MAAOU,EAAME,MAAMC,OAAO,4BAC1BZ,gBAAiBS,EAAME,MAAMC,OAAO,qBACpCX,YAAaQ,EAAME,MAAMC,OAAO,+BAChCV,WAAYO,EAAME,MAAMC,OAAO,4BAC/BT,qBAAsBc,EAAUR,EAAME,MAAMC,OAAO,sBAAsBM,OAAO,GAAGC,WACnFf,iBAAkBK,EAAME,MAAMC,OAAO,gCAClCH,EAAMZ,cAMZ,IAAMyB,EAAOlC,EAAOmC,IACxB/B,WAAsC,CACrCgC,kBAAmBzC,IAEpBO,MAAsG,CACrGmC,uBAAwB,CAACC,EAAMC,KAAe,CAC5CC,SAA0B,iBAATF,EAAoBA,EAAUA,GAAAA,OAAAA,GAAOC,OAAAA,GACtDE,QAAS,0BACTC,UAAW,MACXC,aAAc,YATHvC,WAAA,CAAAC,YAAA,wBAAGL,CAAH,CAAA,GAAA,IAAA,IAAA,IAAA,KAYZqB,IAAU,IAAAuB,EACX,IAAIC,EAAYxB,EAAMyB,OAAS,kDAAoD,mBACnF,IAAIC,EAAU,IACd,IAAIC,EAAS,OAWb,MAT4B,QAAxB3B,EAAM4B,gBACRJ,EAAY,mDAEc,WAAxBxB,EAAM4B,gBACRJ,EAAA,mBACAE,EAAU1B,EAAMyB,OAAS,IAAM,IAC/BE,EAAS3B,EAAMyB,OAAS,KAAO,QAOpBzB,yGAAAA,OAAAA,EAAM6B,OAAS,cAAgB,OAChC,qBAAAxC,QAAA,QAAAkC,EAAAvB,EAAM8B,cAAN,IAAAP,EAAAA,EAAgBvB,EAAMF,UAAW,cAAgB,UAOrDpB,4KAAAA,OAAAA,EACAA,wBAAAA,OAAAA,EAAWO,OAAAA,OAAAA,EAKXP,6GAAAA,OAAAA,gBAAWO,EAlBnB,2BAAAI,OAmBiBmC,EAnBjB,wBAAAnC,OAoBeqC,EApBf,wBAAArC,OAqBesC,EArBf,wEAAAtC,OAyB4BW,EAAME,MAAMC,OAAO4B,MAAoB/B,gBAAAA,OAAAA,EAAME,MAAMC,OAAO,gBAzBtF,yGAAAd,OA8BcX,EA9Bd,qCAAAW,OA+BqBX,EA/BrB,oDAoCCsB,IACD,IAAIgC,EAASpC,EAAagB,QAK1B,OAHIZ,EAAMW,YAAWqB,EAASpC,EAAae,WACvCX,EAAMH,YAAWmC,EAASpC,EAAaC,WAEvCG,EAAMF,SAAiBkC,EAAOlC,SAC9BE,EAAMK,MAAc2B,EAAO3B,MAC3BL,EAAMM,QAAgB0B,EAAO1B,QAE1B0B,EAAOzB,UAGd0B,EACAC"}
|
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 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
|
|
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 c={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','whiteSpace'].includes(n)));var l=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=c[n.lineHeight])&&void 0!==t?t:n.lineHeight,";"):'',"\n ").concat(n.underline?"border-bottom: 1px ".concat('string'==typeof n.underline?n.underline:'solid',";"):'',"\n ").concat(n.whiteSpace?"white-space: ".concat(n.whiteSpace,";"):'',"\n ").concat(n.cursor?"cursor: ".concat(n.cursor,";"):'',"\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{l 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/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 'whiteSpace',\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 ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\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","
|
|
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 'whiteSpace',\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 ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.cursor ? `cursor: ${props.cursor};` : ''}\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","transform","concat","weight","fontStyle","textAlign","lineHeight","underline","whiteSpace","cursor","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,YACA,cACAC,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,WAA6BH,gBAAAA,OAAAA,EAAMG,WAAgB,KAAA,GACzDH,UAAAA,OAAAA,EAAMI,oCAA+BJ,EAAMI,UAA3C,KAA0D,GAH5D,UAAAC,OAIEL,EAAMM,OAAN,gBAAAD,OAAA,QAAAJ,EAA+BrB,EAAWoB,EAAMM,eAAhD,IAAAL,EAAAA,EAA2DD,EAAMM,OAAjE,KAA6E,GAJ/E,UAAAD,OAKEL,EAAMO,UAAN,eAAAF,OAAiCL,EAAMO,UAAvC,KAAsD,GALxD,UAAAF,OAMEL,EAAMQ,UAAN,eAAAH,OAAiCL,EAAMQ,UAAvC,KAAsD,GANxD,UAAAH,OAOEL,EAAMS,WAA6BxB,gBAAAA,OAAnC,QAAmCA,EAAAA,EAAgBe,EAAMS,mBAAzD,IAAAP,EAAAA,EAAwEF,EAAMS,WAA9E,KAA8F,GAPhG,UAAAJ,OAQEL,EAAMU,UAAN,sBAAAL,OAAmE,iBAApBL,EAAMU,UAAyBV,EAAMU,UAAY,aAAa,GAR/G,UAAAL,OASEL,EAAMW,WAAN,gBAAAN,OAAmCL,EAAMW,WAAzC,KAAyD,GAT3D,UAAAN,OAUEL,EAAMY,OAAN,WAAAP,OAA0BL,EAAMY,OAAhC,KAA4C,GAV9C,sCAAAP,OAYqBL,EAAMa,eAAiB,YAAc,OAZ1D,4EAmBAC,EACAC,GAECf,GAAWA,EAAMgB,QAAUA,EAAQhB,EAAMgB,SAAW,OACpDhB,GAAyBiB,EAAdjB,EAAMiB,MAAcjB,EAAMiB,MAAejB,EAAMkB,MAAMC"}
|