@foxford/ui 2.6.0-beta-3f7fdb5-20230713 → 2.6.0
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/Anchor.js +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Text/Text.js +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text/constants.js +2 -0
- package/components/Text/constants.js.map +1 -0
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/dts/index.d.ts +194 -315
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/index.js +1 -1
- package/mixins/responsive-property.js +1 -1
- package/mixins/responsive-property.js.map +1 -1
- package/mixins/shared.js +1 -1
- package/mixins/shared.js.map +1 -1
- package/package.json +1 -3
- package/theme/colors.js +1 -1
- package/theme/colors.js.map +1 -1
- package/components/Alert/Alert.js +0 -2
- package/components/Alert/Alert.js.map +0 -1
- package/components/Alert/CountdownCircle.js +0 -2
- package/components/Alert/CountdownCircle.js.map +0 -1
- package/components/Alert/style.js +0 -2
- package/components/Alert/style.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useTheme as i}from'styled-components';import{useMemo as l}from'react';import{useClassname as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useTheme as i}from'styled-components';import{useMemo as l}from'react';import{useClassname as o}from'../../hooks/useClassname.js';import{Root as a}from'./style.js';import{jsx as t}from'react/jsx-runtime';var n=["as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel"];function d(p){var u,z,m;var{as:c,to:h,href:y,wrapper:f,className:v,style:L,children:S,content:X,pseudo:b,underline:M,color:N,display:j,size:w,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A,autoRel:B=!0}=p,C=s(p,n);var P=o(d.displayName,v);var T=i();var _;var H=l((()=>{var e,s;return B&&null!==(e=T.utils)&&void 0!==e&&e.relBuilder?T.utils.relBuilder(null!==(s=p.href)&&void 0!==s?s:p.to,p.target):p.rel}),[B,p.rel,p.href,p.to,p.target]);_='div'!==c||j?j:'block';var I={};return X&&(I=e(e({},I),{},{dangerouslySetInnerHTML:{__html:X}})),t(a,c?e(e(e({as:c,pseudo:b,wrapper:f,underline:M,href:y,className:P,style:L,color:N,size:w,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},C),I),{},{rel:'a'===c?null!==(u=p.rel)&&void 0!==u?u:H:void 0,children:S}):b?e(e(e({as:"div",pseudo:b,wrapper:f,underline:M,href:y,className:P,color:N,style:L,size:w,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},C),I),{},{children:S}):h?e(e(e({as:r,to:h,pseudo:b,wrapper:f,underline:M,className:P,color:N,size:w,style:L,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},C),I),{},{rel:null!==(z=p.rel)&&void 0!==z?z:H,children:S}):e(e(e({as:"a",href:y,pseudo:b,wrapper:f,underline:M,className:P,color:N,size:w,style:L,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},I),C),{},{rel:null!==(m=p.rel)&&void 0!==m?m:H,children:S}))}d.displayName='Anchor',d.defaultProps={display:'inline-block'};export{d as Anchor};
|
|
2
2
|
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport {
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n autoRel = true,\n ...rest\n } = props\n\n const _className = useClassname(Anchor.displayName, className)\n const theme = useTheme()\n\n let _display: Display['display']\n const _rel = useMemo(() => {\n return autoRel && theme.utils?.relBuilder ? theme.utils.relBuilder(props.href ?? props.to, props.target) : props.rel\n }, [autoRel, props.rel, props.href, props.to, props.target])\n\n if (as === 'div' && !display) _display = 'block'\n else _display = display\n\n let contentProps = {}\n\n if (content) {\n contentProps = {\n ...contentProps,\n dangerouslySetInnerHTML: { __html: content },\n }\n }\n\n if (as)\n return (\n <Styled.Root\n as={as}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n style={style}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n rel={as === 'a' ? props.rel ?? _rel : undefined}\n >\n {children}\n </Styled.Root>\n )\n\n if (pseudo)\n return (\n <Styled.Root\n as='div'\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n color={color}\n style={style}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n else if (to)\n return (\n <Styled.Root\n as={Link}\n to={to}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n else\n return (\n <Styled.Root\n as='a'\n href={href}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...contentProps}\n {...rest}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Anchor","props","_props$rel","_props$rel2","_props$rel3","as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel","rest","_excluded","_className","useClassname","displayName","theme","useTheme","_display","_rel","useMemo","_theme$utils","_props$href","utils","relBuilder","target","rel","contentProps","dangerouslySetInnerHTML","__html","_jsx","Styled.Root","_objectSpread","Link","defaultProps"],"mappings":"0hBAsEO,SAASA,EAAOC,GAAiD,IAAAC,EAAAC,EAAAC,EACtE,IAAMC,GACJA,EADIC,GAEJA,EAFIC,KAGJA,EAHIC,QAIJA,EAJIC,UAKJA,EALIC,MAMJA,EANIC,SAOJA,EAPIC,QAQJA,EARIC,OASJA,EATIC,UAUJA,EAVIC,MAWJA,EAXIC,QAYJA,EAZIC,KAaJA,EAbIC,OAcJA,EAdIC,MAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,OAkBJA,EAlBIC,QAmBJA,GAAU,GAERtB,EADCuB,IACDvB,EArBJwB,GAuBA,IAAMC,EAAaC,EAAa3B,EAAO4B,YAAanB,GACpD,IAAMoB,EAAQC,IAEd,IAAIC,EACJ,IAAMC,EAAOC,GAAQ,KAAM,IAAAC,EAAAC,EACzB,OAAOZ,GAAO,QAAAW,EAAIL,EAAMO,aAAAA,IAAVF,GAAIA,EAAaG,WAAaR,EAAMO,MAAMC,WAAZ,QAAAF,EAAuBlC,EAAMM,YAAAA,IAA7B4B,EAAAA,EAAqClC,EAAMK,GAAIL,EAAMqC,QAAUrC,EAAMsC,MAChH,CAAChB,EAAStB,EAAMsC,IAAKtC,EAAMM,KAAMN,EAAMK,GAAIL,EAAMqC,SAG/CP,EADM,QAAP1B,GAAiBW,EACLA,EADyB,QAGzC,IAAIwB,EAAe,GASnB,OAPI5B,IACF4B,SACKA,GADO,GAAA,CAEVC,wBAAyB,CAAEC,OAAQ9B,MAMnC+B,EAACC,EAFDvC,EAEAwC,EAAAA,EAAAA,EAAA,CACExC,GAAIA,EACJQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWiB,EACXhB,MAAOA,EACPK,MAAOA,EACPE,KAAMA,EACND,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJE,GACAgB,GAjBN,GAAA,CAkBED,IAAY,MAAPlC,EAAA,QAAAH,EAAaD,EAAMsC,WAAnB,IAAArC,EAAAA,EAA0B8B,OAAAA,EAlBjCrB,SAoBGA,IAIHE,EAEAgC,EAAAA,EAAAA,EAAA,CACExC,GAAG,MACHQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWiB,EACXX,MAAOA,EACPL,MAAOA,EACPO,KAAMA,EACND,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJE,GACAgB,GAjBN,GAAA,CAAA7B,SAmBGA,IAGEL,EAELuC,EAAAA,EAAAA,EAAA,CACExC,GAAIyC,EACJxC,GAAIA,EACJO,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWiB,EACXX,MAAOA,EACPE,KAAMA,EACNP,MAAOA,EACPM,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJE,GACAgB,GAjBN,GAAA,CAkBED,YAAKtC,EAAAA,EAAMsC,mBAAOP,EAlBpBrB,SAoBGA,IAKHkC,EAAAA,EAAAA,EAAA,CACExC,GAAG,IACHE,KAAMA,EACNM,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWiB,EACXX,MAAOA,EACPE,KAAMA,EACNP,MAAOA,EACPM,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJkB,GACAhB,GAjBN,GAAA,CAkBEe,YAAKtC,EAAAA,EAAMsC,WAAAA,QAAOP,EAlBpBrB,SAoBGA,KAzJTX,EAAO4B,YAAc,SACrB5B,EAAO+C,aAAe,CACpB/B,QAAS"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as n,keyframes as r}from'styled-components';import e from'tinycolor2';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{property as a,responsiveNamedProperty as c,responsiveProperty as i}from'../../mixins/responsive-property.js';import{color as s}from'../../mixins/color.js';import{FORWARD_PROPS as d,STATIC_SIZES as l}from'./constants.js';import g from'./images/check.module.svg.js';import p from'./images/spinner.module.svg.js';var m={xl:320,l:280,m:245,s:180,xs:140};var h={xl:60,l:52,m:48,s:40,xs:32};var b={xl:18,l:16,m:16,s:14,xs:14};var u=n(["",""],(o=>"\n display: ".concat(o.display,";\n font-weight: ").concat(o.fontWeight,";\n border-radius: ").concat(o.borderRadius,";\n line-height: ").concat(o.lineHeight,";\n padding: ").concat(o.basePadding,";\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before,\n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ").concat(o.noSpacing?'auto':'1em',";\n }\n ")));var f=r(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var v=r(["100%{transform:rotate(360deg);}"]);var y=n(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],f);var L=o=>'auto'===o?'auto':'number'==typeof o||'boolean'==typeof o?o:o&&m[o]?m[o]:'auto';var S=function(o,r){var e=arguments.length>1&&void 0!==r?r:'px';return n(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],o,e,o,e,.44*o,e,.44*o,e,.28*o,e)};var x=()=>n(["min-width:initial;width:100%;"]);var X="\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n";var w={filled:{default:n(["",""],(o=>{var n=o.theme.colors['bg-brand-primary-basic'];o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-oncolor-primary'];o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(e=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(e,";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-primary'];o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-constant'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},outline:{default:n(["",""],(o=>{var n='transparent';!o.loading||o.success||o.black||o.danger||(n=o.theme.colors['bg-brand-primary-basic']),o.loading&&!o.success&&o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.loading&&!o.success&&o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),(o.success||o.loading)&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['border-brand-primary'];o.black&&(e=o.theme.colors['border-onmain-contrast']),o.danger&&(e=o.theme.colors['alert-bg-error-500']),o.loading&&!o.success&&(e='transparent'),o.success&&(e=o.theme.colors['alert-bg-success-500']),o.disabled&&(e=o.theme.colors['bg-disabled-large']);var t=o.theme.colors['bg-brand-primary-basic'];o.black&&(t=o.theme.colors['bg-onmain-contrast']),o.danger&&(t=o.theme.colors['alert-bg-error-500']);var a=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(a=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 ").concat(o.fontBold?2:1,"px ").concat(e,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(t,";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n background-color: ").concat(a,";\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-primary'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")})),onColored:n(["",""],(o=>{var n='transparent';(o.success||o.loading)&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];o.loading&&!o.success&&(r=o.theme.colors['content-oncolor-constant']),o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']);var e=o.theme.colors['border-oncolor-default'];return o.disabled&&(e='transparent'),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 ").concat(o.fontBold?2:1,"px ").concat(e,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-primary'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-constant'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")}))},base:{default:n(["",""],(o=>{var n=o.theme.colors['bg-onmain-tertiary'];o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];return o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),o.success&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-secondary'];o.success&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},clear:{default:n(["",""],(o=>{var n=o.theme.colors['content-brand-primary'];return o.black&&(n=o.theme.colors['content-oncolor-inverse']),o.danger&&(n=o.theme.colors['alert-error']),o.success&&(n=o.theme.colors['alert-success']),o.disabled&&(n=o.theme.colors['content-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['content-oncolor-primary'];return o.disabled&&(n=o.theme.colors['content-oncolor-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))}};var k={default:n([""," "," "," "," "," ",""],(o=>o.disabled||o.loading?'':"\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ".concat(o.fontColor,";\n background-color: ").concat(e(o.theme.colors[o.color]).saturate(-5).lighten(-8).toString(),";\n }\n ").concat(o.inverted||o.basic||o.outline?"\n &:not(:hover) {\n border: 1px solid ".concat(o.theme.colors[o.color],";\n }\n &:hover {\n border: 1px solid ").concat(o.theme.colors[o.color],";\n }\n "):'',"\n ")),(o=>o.loading?y:''),(o=>{var n='background-color';return(o.inverted||o.basic||o.outline)&&(n='color'),s(o.color,n)}),(o=>{var n='color';return(o.inverted||o.basic||o.outline)&&(n='background-color'),s(o.fontColor,n)}),(o=>o.disabled?"\n cursor: not-allowed;\n background-color: ".concat(o.theme.colors.mercury,";\n color: ").concat(o.theme.colors.silver,";\n "):''),(o=>o.basic||o.outline?'background-color: transparent;':''))};var z=o.button.withConfig({shouldForwardProp:o=>d.includes(o)||o.includes('data')}).attrs(t).withConfig({componentId:"fox-ui__sc-16o31r2-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],u,(o=>o.brandPresetUsed?!o.clear||o.base||o.outline||o.onColored?o.clear&&!o.base&&!o.outline&&o.onColored?w.clear.onColored:!o.base||o.clear||o.outline||o.onColored?o.base&&!o.clear&&!o.outline&&o.onColored?w.base.onColored:!o.outline||o.clear||o.base||o.onColored?o.outline&&!o.clear&&!o.base&&o.onColored?w.outline.onColored:o.onColored?w.filled.onColored:w.filled.default:w.outline.default:w.base.default:w.clear.default:k.default),(o=>l.includes(o.size)?'':i('size','font-size')),(o=>o.round?l.includes(o.size)?o.brandPresetUsed?"font-size: ".concat(b[o.size],"px;\n padding: 1em;"):a(h[o.size],S):'padding: 1em;':''),(o=>o.padding?a(o.padding,'padding'):null),(o=>o.paddingTop?a(o.paddingTop,'padding-top'):null),(o=>o.paddingRight?a(o.paddingRight,'padding-right'):null),(o=>o.paddingBottom?a(o.paddingBottom,'padding-bottom'):null),(o=>o.paddingLeft?a(o.paddingLeft,'padding-left'):null),(o=>o.margin?a(o.margin,'margin'):null),(o=>o.marginTop?a(o.marginTop,'margin-top'):null),(o=>o.marginRight?a(o.marginRight,'margin-right'):null),(o=>o.marginBottom?a(o.marginBottom,'margin-bottom'):null),(o=>o.marginLeft?a(o.marginLeft,'margin-left'):null),(o=>o.fontSize?a(o.fontSize,'font-size'):null),(o=>o.height?a(o.height,'height'):null),(o=>{var n=o.fluid&&'auto'!==o.width?'max-width':'width';return o.width?a(L(o.width),n):null}),(o=>{var{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:a}=o;return c({sizes:{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:a},cssProperty:'padding'})}),(o=>{var{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:a}=o;return c({sizes:{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:a},cssProperty:'padding-top'})}),(o=>{var{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:a}=o;return c({sizes:{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:a},cssProperty:'padding-right'})}),(o=>{var{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:a}=o;return c({sizes:{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:a},cssProperty:'padding-bottom'})}),(o=>{var{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:a}=o;return c({sizes:{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:a},cssProperty:'padding-left'})}),(o=>{var{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:a}=o;return c({sizes:{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:a},cssProperty:'margin'})}),(o=>{var{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:a}=o;return c({sizes:{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:a},cssProperty:'margin-top'})}),(o=>{var{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:a}=o;return c({sizes:{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:a},cssProperty:'margin-right'})}),(o=>{var{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:a}=o;return c({sizes:{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:a},cssProperty:'margin-bottom'})}),(o=>{var{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:a}=o;return c({sizes:{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:a},cssProperty:'margin-left'})}),(o=>{var{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:a}=o;return c({sizes:{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:a},cssProperty:'font-size'})}),(o=>{var{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:a}=o;return c({sizes:{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:a},cssProperty:'height'})}),(o=>{var{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:a,fluid:i,width:s}=o;return c({sizes:{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:a},cssProperty:i&&'auto'!==s?'max-width':'width',customSizeHandler:L})}),(o=>o.fluid?a(o.fluid,x):null),(o=>{var{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:a}=o;return c({sizes:{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:a},cssProperty:x})}));var R=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["",""],(o=>"\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ".concat(o.marginLeft?'0.4em':0,";\n margin-right: ").concat(o.marginRight?'0.4em':0,";\n ")));var M=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-2"})(["position:relative;z-index:1;"]);var T=o(p).withConfig({componentId:"fox-ui__sc-16o31r2-3"})(["width:100%;animation:"," 2000ms linear infinite;",""],v,(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));var B=o(g).withConfig({componentId:"fox-ui__sc-16o31r2-4"})(["width:100%;",""],(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));export{B as CheckIcon,M as Content,R as IconSlot,z as Root,T as SpinnerIcon};
|
|
1
|
+
import o,{css as n,keyframes as r}from'styled-components';import e from'tinycolor2';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{property as a,responsiveNamedProperty as c,responsiveProperty as i}from'../../mixins/responsive-property.js';import{color as s}from'../../mixins/color.js';import{FORWARD_PROPS as d,STATIC_SIZES as l}from'./constants.js';import g from'./images/check.module.svg.js';import p from'./images/spinner.module.svg.js';var m={xl:320,l:280,m:245,s:180,xs:140};var h={xl:60,l:52,m:48,s:40,xs:32};var b={xl:18,l:16,m:16,s:14,xs:14};var u=n(["",""],(o=>"\n display: ".concat(o.display,";\n font-weight: ").concat(o.fontWeight,";\n border-radius: ").concat(o.borderRadius,";\n line-height: ").concat(o.lineHeight,";\n padding: ").concat(o.basePadding,";\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before, \n &::after {\n transition-property: opacity;\n }\n &, \n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ").concat(o.noSpacing?'auto':'1em',";\n }\n ")));var f=r(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var v=r(["100%{transform:rotate(360deg);}"]);var y=n(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],f);var L=o=>'auto'===o?'auto':'number'==typeof o||'boolean'==typeof o?o:o&&m[o]?m[o]:'auto';var S=function(o,r){var e=arguments.length>1&&void 0!==r?r:'px';return n(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],o,e,o,e,.44*o,e,.44*o,e,.28*o,e)};var x=()=>n(["min-width:initial;width:100%;"]);var X="\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n";var w={filled:{default:n(["",""],(o=>{var n=o.theme.colors['bg-brand-primary-basic'];o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-oncolor-primary'];o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(e=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(e,";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-primary'];o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-constant'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n \n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},outline:{default:n(["",""],(o=>{var n='transparent';!o.loading||o.success||o.black||o.danger||(n=o.theme.colors['bg-brand-primary-basic']),o.loading&&!o.success&&o.black&&(n=o.theme.colors['bg-onmain-contrast']),o.loading&&!o.success&&o.danger&&(n=o.theme.colors['alert-bg-error-500']),o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),(o.success||o.loading)&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']);var e=o.theme.colors['border-brand-primary'];o.black&&(e=o.theme.colors['border-onmain-contrast']),o.danger&&(e=o.theme.colors['alert-bg-error-500']),o.loading&&!o.success&&(e='transparent'),o.success&&(e=o.theme.colors['alert-bg-success-500']),o.disabled&&(e=o.theme.colors['bg-disabled-large']);var t=o.theme.colors['bg-brand-primary-basic'];o.black&&(t=o.theme.colors['bg-onmain-contrast']),o.danger&&(t=o.theme.colors['alert-bg-error-500']);var a=o.theme.colors['bg-oncolor-hover'];return o.black&&!o.danger&&(a=o.theme.colors['bg-oncontrast-hover']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 ").concat(o.fontBold?2:1,"px ").concat(e,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(t,";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n background-color: ").concat(a,";\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-primary'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")})),onColored:n(["",""],(o=>{var n='transparent';(o.success||o.loading)&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];o.loading&&!o.success&&(r=o.theme.colors['content-oncolor-constant']),o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']);var e=o.theme.colors['border-oncolor-default'];return o.disabled&&(e='transparent'),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n box-shadow: inset 0 0 0 ").concat(o.fontBold?2:1,"px ").concat(e,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-primary'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover {\n color: ".concat(o.theme.colors['content-oncolor-constant'],";\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n "),"\n ")}))},base:{default:n(["",""],(o=>{var n=o.theme.colors['bg-onmain-tertiary'];o.success&&(n=o.theme.colors['alert-bg-success-500']),o.disabled&&(n=o.theme.colors['bg-disabled-large']);var r=o.theme.colors['content-brand-primary'];return o.black&&(r=o.theme.colors['content-oncolor-inverse']),o.danger&&(r=o.theme.colors['alert-error']),o.success&&(r=o.theme.colors['content-oncolor-primary']),o.disabled&&(r=o.theme.colors['content-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['bg-oncolor-secondary'];o.success&&(n=o.theme.colors['bg-oncolor-primary']),o.disabled&&(n=o.theme.colors['bg-oncolor-disabled']);var r=o.theme.colors['content-oncolor-primary'];return o.success&&(r=o.theme.colors['alert-success']),o.disabled&&(r=o.theme.colors['content-oncolor-disabled']),"\n background-color: ".concat(n,";\n color: ").concat(r,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))},clear:{default:n(["",""],(o=>{var n=o.theme.colors['content-brand-primary'];return o.black&&(n=o.theme.colors['content-oncolor-inverse']),o.danger&&(n=o.theme.colors['alert-error']),o.success&&(n=o.theme.colors['alert-success']),o.disabled&&(n=o.theme.colors['content-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncolor-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")})),onColored:n(["",""],(o=>{var n=o.theme.colors['content-oncolor-primary'];return o.disabled&&(n=o.theme.colors['content-oncolor-disabled']),"\n background-color: transparent;\n color: ".concat(n,";\n\n &::before {\n ").concat(X,"\n background-color: ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n &::after {\n ").concat(X,"\n box-shadow: inset 0px 4px 0px ").concat(o.theme.colors['bg-oncontrast-hover'],";\n opacity: 0;\n }\n\n ").concat(o.disabled||o.success||o.loading?'cursor: default;':"\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n ","\n ")}))}};var k={default:n([""," "," "," "," "," ",""],(o=>o.disabled||o.loading?'':"\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ".concat(o.fontColor,";\n background-color: ").concat(e(o.theme.colors[o.color]).saturate(-5).lighten(-8).toString(),";\n }\n ").concat(o.inverted||o.basic||o.outline?"\n &:not(:hover) {\n border: 1px solid ".concat(o.theme.colors[o.color],";\n }\n &:hover {\n border: 1px solid ").concat(o.theme.colors[o.color],";\n } \n "):'',"\n ")),(o=>o.loading?y:''),(o=>{var n='background-color';return(o.inverted||o.basic||o.outline)&&(n='color'),s(o.color,n)}),(o=>{var n='color';return(o.inverted||o.basic||o.outline)&&(n='background-color'),s(o.fontColor,n)}),(o=>o.disabled?"\n cursor: not-allowed;\n background-color: ".concat(o.theme.colors.mercury,";\n color: ").concat(o.theme.colors.silver,";\n "):''),(o=>o.basic||o.outline?'background-color: transparent;':''))};var z=o.button.withConfig({shouldForwardProp:o=>d.includes(o)||o.includes('data')}).attrs(t).withConfig({componentId:"fox-ui__sc-16o31r2-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],u,(o=>o.brandPresetUsed?!o.clear||o.base||o.outline||o.onColored?o.clear&&!o.base&&!o.outline&&o.onColored?w.clear.onColored:!o.base||o.clear||o.outline||o.onColored?o.base&&!o.clear&&!o.outline&&o.onColored?w.base.onColored:!o.outline||o.clear||o.base||o.onColored?o.outline&&!o.clear&&!o.base&&o.onColored?w.outline.onColored:o.onColored?w.filled.onColored:w.filled.default:w.outline.default:w.base.default:w.clear.default:k.default),(o=>l.includes(o.size)?'':i('size','font-size')),(o=>o.round?l.includes(o.size)?o.brandPresetUsed?"font-size: ".concat(b[o.size],"px;\n padding: 1em;"):a(h[o.size],S):'padding: 1em;':''),(o=>o.padding?a(o.padding,'padding'):null),(o=>o.paddingTop?a(o.paddingTop,'padding-top'):null),(o=>o.paddingRight?a(o.paddingRight,'padding-right'):null),(o=>o.paddingBottom?a(o.paddingBottom,'padding-bottom'):null),(o=>o.paddingLeft?a(o.paddingLeft,'padding-left'):null),(o=>o.margin?a(o.margin,'margin'):null),(o=>o.marginTop?a(o.marginTop,'margin-top'):null),(o=>o.marginRight?a(o.marginRight,'margin-right'):null),(o=>o.marginBottom?a(o.marginBottom,'margin-bottom'):null),(o=>o.marginLeft?a(o.marginLeft,'margin-left'):null),(o=>o.fontSize?a(o.fontSize,'font-size'):null),(o=>o.height?a(o.height,'height'):null),(o=>{var n=o.fluid&&'auto'!==o.width?'max-width':'width';return o.width?a(L(o.width),n):null}),(o=>{var{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:a}=o;return c({sizes:{paddingXS:n,paddingS:r,paddingM:e,paddingL:t,paddingXL:a},cssProperty:'padding'})}),(o=>{var{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:a}=o;return c({sizes:{paddingTopXS:n,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:a},cssProperty:'padding-top'})}),(o=>{var{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:a}=o;return c({sizes:{paddingRightXS:n,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:a},cssProperty:'padding-right'})}),(o=>{var{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:a}=o;return c({sizes:{paddingBottomXS:n,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:a},cssProperty:'padding-bottom'})}),(o=>{var{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:a}=o;return c({sizes:{paddingLeftXS:n,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:a},cssProperty:'padding-left'})}),(o=>{var{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:a}=o;return c({sizes:{marginXS:n,marginS:r,marginM:e,marginL:t,marginXL:a},cssProperty:'margin'})}),(o=>{var{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:a}=o;return c({sizes:{marginTopXS:n,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:a},cssProperty:'margin-top'})}),(o=>{var{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:a}=o;return c({sizes:{marginRightXS:n,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:a},cssProperty:'margin-right'})}),(o=>{var{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:a}=o;return c({sizes:{marginBottomXS:n,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:a},cssProperty:'margin-bottom'})}),(o=>{var{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:a}=o;return c({sizes:{marginLeftXS:n,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:a},cssProperty:'margin-left'})}),(o=>{var{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:a}=o;return c({sizes:{fontSizeXS:n,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:a},cssProperty:'font-size'})}),(o=>{var{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:a}=o;return c({sizes:{heightXS:n,heightS:r,heightM:e,heightL:t,heightXL:a},cssProperty:'height'})}),(o=>{var{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:a,fluid:i,width:s}=o;return c({sizes:{widthXS:n,widthS:r,widthM:e,widthL:t,widthXL:a},cssProperty:i&&'auto'!==s?'max-width':'width',customSizeHandler:L})}),(o=>o.fluid?a(o.fluid,x):null),(o=>{var{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:a}=o;return c({sizes:{fluidXS:n,fluidS:r,fluidM:e,fluidL:t,fluidXL:a},cssProperty:x})}));var R=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["",""],(o=>"\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ".concat(o.marginLeft?'0.4em':0,";\n margin-right: ").concat(o.marginRight?'0.4em':0,";\n ")));var M=o.span.withConfig({componentId:"fox-ui__sc-16o31r2-2"})(["position:relative;z-index:1;"]);var T=o(p).withConfig({componentId:"fox-ui__sc-16o31r2-3"})(["width:100%;animation:"," 2000ms linear infinite;",""],v,(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));var B=o(g).withConfig({componentId:"fox-ui__sc-16o31r2-4"})(["width:100%;",""],(o=>"\n > path {\n stroke-width: ".concat(o.strokeWidth,";\n }\n ")));export{B as CheckIcon,M as Content,R as IconSlot,z as Root,T as SpinnerIcon};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport type { DefaultTheme, ThemedStyledProps } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { CalcProperty, property, responsiveNamedProperty, responsiveProperty } from 'mixins/responsive-property'\nimport { color as colorFn } from 'mixins/color'\nimport type { PossibleValues } from 'mixins/responsive-property'\nimport { FORWARD_PROPS, STATIC_SIZES } from './constants'\nimport Check from './images/check.module.svg'\nimport Spinner from './images/spinner.module.svg'\nimport type { ButtonStaticSize, ButtonRootProps, ButtonForwardProp } from './types'\n\nconst WIDTHS: Record<ButtonStaticSize, number> = {\n xl: 320,\n l: 280,\n m: 245,\n s: 180,\n xs: 140,\n}\n\nconst DEFAULT_ROUND_SIZES: Record<ButtonStaticSize, number> = {\n xl: 60,\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst BRAND_ROUND_SIZES: Record<ButtonStaticSize, number> = {\n xl: 18,\n l: 16,\n m: 16,\n s: 14,\n xs: 14,\n}\n\nconst baseStyles = css<ButtonRootProps>`\n ${(props) => `\n display: ${props.display};\n font-weight: ${props.fontWeight};\n border-radius: ${props.borderRadius};\n line-height: ${props.lineHeight};\n padding: ${props.basePadding};\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before,\n &::after {\n transition-property: opacity;\n }\n &,\n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ${props.noSpacing ? 'auto' : '1em'};\n }\n `}\n`\n\nconst loading = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst spin = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nconst defaultLoadingStyles = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loading} 2s linear infinite;\n cursor: progress;\n`\n\nconst getWidth = (width: PossibleValues): PossibleValues => {\n if (width === 'auto') return 'auto'\n if (typeof width === 'number') return width\n if (typeof width === 'boolean') return width\n\n if (width && WIDTHS[width]) return WIDTHS[width]\n\n return 'auto'\n}\n\nconst getDefaultRoundSizes: CalcProperty = (size, sizing = 'px') => css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n font-size: ${0.44 * (size as number)}${sizing};\n line-height: ${0.44 * (size as number)}${sizing};\n padding: ${0.28 * (size as number)}${sizing};\n`\n\nconst fluidStyles: CalcProperty = () => css`\n min-width: initial;\n width: 100%;\n`\n\nconst pseudoBaseStyles = `\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n`\n\nconst PRESET = {\n filled: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-brand-primary-basic']\n if (props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let backgroundBefore = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundBefore = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n outline: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let background = 'transparent'\n if (props.loading && !props.success && !props.black && !props.danger)\n background = props.theme.colors['bg-brand-primary-basic']\n if (props.loading && !props.success && props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.loading && !props.success && props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success || props.loading) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let boxShadow: string = props.theme.colors['border-brand-primary']\n if (props.black) boxShadow = props.theme.colors['border-onmain-contrast']\n if (props.danger) boxShadow = props.theme.colors['alert-bg-error-500']\n if (props.loading && !props.success) boxShadow = 'transparent'\n if (props.success) boxShadow = props.theme.colors['alert-bg-success-500']\n if (props.disabled) boxShadow = props.theme.colors['bg-disabled-large']\n\n let backgroundBefore = props.theme.colors['bg-brand-primary-basic']\n if (props.black) backgroundBefore = props.theme.colors['bg-onmain-contrast']\n if (props.danger) backgroundBefore = props.theme.colors['alert-bg-error-500']\n\n let backgroundAfter = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundAfter = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 ${props.fontBold ? 2 : 1}px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n background-color: ${backgroundAfter};\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-primary']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let background = 'transparent'\n if (props.success || props.loading) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.loading && !props.success) color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n let boxShadow: string = props.theme.colors['border-oncolor-default']\n if (props.disabled) boxShadow = 'transparent'\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 ${props.fontBold ? 2 : 1}px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-primary']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-constant']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n base: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-onmain-tertiary']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-secondary']\n if (props.success) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n clear: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<ButtonRootProps>`\n ${(props) => {\n if (props.disabled || props.loading) return ''\n\n return `\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n }\n ${\n props.inverted || props.basic || props.outline\n ? `\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : ''\n }\n `\n }}\n\n ${(props) => (props.loading ? defaultLoadingStyles : '')}\n\n ${(props) => {\n let cssProperty = 'background-color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'color'\n\n return colorFn(props.color, cssProperty)\n }}\n\n ${(props) => {\n let cssProperty = 'color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'background-color'\n\n return colorFn(props.fontColor, cssProperty)\n }}\n\n ${(props) => {\n if (!props.disabled) return ''\n\n return `\n cursor: not-allowed;\n background-color: ${props.theme.colors.mercury};\n color: ${props.theme.colors.silver};\n `\n }}\n\n ${(props) => (props.basic || props.outline ? 'background-color: transparent;' : '')}\n `,\n}\n\nconst extractStyles = (props: ThemedStyledProps<ButtonRootProps, DefaultTheme>) => {\n if (props.brandPresetUsed) {\n if (props.clear && !props.base && !props.outline && !props.onColored) return PRESET.clear.default\n if (props.clear && !props.base && !props.outline && props.onColored) return PRESET.clear.onColored\n\n if (props.base && !props.clear && !props.outline && !props.onColored) return PRESET.base.default\n if (props.base && !props.clear && !props.outline && props.onColored) return PRESET.base.onColored\n\n if (props.outline && !props.clear && !props.base && !props.onColored) return PRESET.outline.default\n if (props.outline && !props.clear && !props.base && props.onColored) return PRESET.outline.onColored\n\n return props.onColored ? PRESET.filled.onColored : PRESET.filled.default\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractFontSize = (props: ThemedStyledProps<ButtonRootProps, DefaultTheme>) => {\n if (STATIC_SIZES.includes(<ButtonStaticSize>props.size)) return ''\n return responsiveProperty('size', 'font-size')\n}\n\nconst extractRoundStyles = (props: ThemedStyledProps<ButtonRootProps, DefaultTheme>) => {\n if (!props.round) return ''\n\n if (STATIC_SIZES.includes(<ButtonStaticSize>props.size)) {\n return props.brandPresetUsed\n ? `font-size: ${BRAND_ROUND_SIZES[<ButtonStaticSize>props.size]}px;\n padding: 1em;`\n : property(DEFAULT_ROUND_SIZES[<ButtonStaticSize>props.size], getDefaultRoundSizes)\n }\n\n return 'padding: 1em;'\n}\n\nexport const Root = styled.button\n .withConfig({\n shouldForwardProp: (prop) => {\n return FORWARD_PROPS.includes(<ButtonForwardProp>prop) || prop.includes('data')\n },\n })\n .attrs(injectDefaultTheme)<ButtonRootProps>`\n ${baseStyles}\n ${extractStyles}\n ${extractFontSize}\n ${extractRoundStyles}\n\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n\n ${(props) => {\n const cssProperty = props.fluid && props.width !== 'auto' ? 'max-width' : 'width'\n return props.width ? property(getWidth(props.width), cssProperty) : null\n }}\n\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL },\n cssProperty: 'padding',\n })\n }}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })\n }}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })\n }}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })\n }}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })\n }}\n\n ${({ marginXS, marginS, marginM, marginL, marginXL }) => {\n return responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })\n }}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) => {\n return responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })\n }}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) => {\n return responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })\n }}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })\n }}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })\n }}\n\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n\n ${({ heightXS, heightS, heightM, heightL, heightXL }) => {\n return responsiveNamedProperty({\n sizes: { heightXS, heightS, heightM, heightL, heightXL },\n cssProperty: 'height',\n })\n }}\n\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) => {\n return responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: getWidth,\n })\n }}\n\n ${(props) => (props.fluid ? property(props.fluid, fluidStyles) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) => {\n return responsiveNamedProperty({\n sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL },\n cssProperty: fluidStyles,\n })\n }}\n`\n\nexport const IconSlot = styled.span<{\n children: React.ReactNode\n marginLeft?: boolean\n marginRight?: boolean\n}>`\n ${(props) => `\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ${props.marginLeft ? '0.4em' : 0};\n margin-right: ${props.marginRight ? '0.4em' : 0};\n `}\n`\n\nexport const Content = styled.span`\n position: relative;\n z-index: 1;\n`\n\nexport const SpinnerIcon = styled(Spinner)`\n width: 100%;\n animation: ${spin} 2000ms linear infinite;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n\nexport const CheckIcon = styled(Check)`\n width: 100%;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n"],"names":["WIDTHS","xl","l","m","s","xs","DEFAULT_ROUND_SIZES","BRAND_ROUND_SIZES","baseStyles","css","props","display","fontWeight","concat","borderRadius","lineHeight","basePadding","noSpacing","loading","keyframes","spin","defaultLoadingStyles","getWidth","width","getDefaultRoundSizes","size","r","sizing","fluidStyles","pseudoBaseStyles","PRESET","filled","default","background","theme","colors","black","danger","success","disabled","color","backgroundBefore","onColored","outline","boxShadow","backgroundAfter","fontBold","base","clear","PRESET_DEFAULT","fontColor","tiny","saturate","lighten","toString","inverted","basic","cssProperty","colorFn","mercury","silver","Root","styled","button","withConfig","shouldForwardProp","prop","FORWARD_PROPS","includes","attrs","injectDefaultTheme","componentId","brandPresetUsed","STATIC_SIZES","responsiveProperty","round","property","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","fontSize","height","fluid","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","_ref12","heightXS","heightS","heightM","heightL","heightXL","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL","IconSlot","span","Content","SpinnerIcon","Spinner","strokeWidth","CheckIcon","Check"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport type { DefaultTheme, ThemedStyledProps } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { CalcProperty, property, responsiveNamedProperty, responsiveProperty } from 'mixins/responsive-property'\nimport { color as colorFn } from 'mixins/color'\nimport type { PossibleValues } from 'mixins/responsive-property'\nimport { FORWARD_PROPS, STATIC_SIZES } from './constants'\nimport Check from './images/check.module.svg'\nimport Spinner from './images/spinner.module.svg'\nimport type { ButtonStaticSize, ButtonRootProps, ButtonForwardProp } from './types'\n\nconst WIDTHS: Record<ButtonStaticSize, number> = {\n xl: 320,\n l: 280,\n m: 245,\n s: 180,\n xs: 140,\n}\n\nconst DEFAULT_ROUND_SIZES: Record<ButtonStaticSize, number> = {\n xl: 60,\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst BRAND_ROUND_SIZES: Record<ButtonStaticSize, number> = {\n xl: 18,\n l: 16,\n m: 16,\n s: 14,\n xs: 14,\n}\n\nconst baseStyles = css<ButtonRootProps>`\n ${(props) => `\n display: ${props.display};\n font-weight: ${props.fontWeight};\n border-radius: ${props.borderRadius};\n line-height: ${props.lineHeight};\n padding: ${props.basePadding};\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n border: none;\n text-decoration: none;\n appearance: none;\n white-space: nowrap;\n text-align: center;\n vertical-align: top;\n transition-property: color, background-color, box-shadow;\n &::before, \n &::after {\n transition-property: opacity;\n }\n &, \n &::before,\n &::after {\n transition-duration: 200ms;\n }\n & + & {\n margin-left: ${props.noSpacing ? 'auto' : '1em'};\n }\n `}\n`\n\nconst loading = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst spin = keyframes`\n 100% {\n transform: rotate(360deg);\n }\n`\n\nconst defaultLoadingStyles = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loading} 2s linear infinite;\n cursor: progress;\n`\n\nconst getWidth = (width: PossibleValues): PossibleValues => {\n if (width === 'auto') return 'auto'\n if (typeof width === 'number') return width\n if (typeof width === 'boolean') return width\n\n if (width && WIDTHS[width]) return WIDTHS[width]\n\n return 'auto'\n}\n\nconst getDefaultRoundSizes: CalcProperty = (size, sizing = 'px') => css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n font-size: ${0.44 * (size as number)}${sizing};\n line-height: ${0.44 * (size as number)}${sizing};\n padding: ${0.28 * (size as number)}${sizing};\n`\n\nconst fluidStyles: CalcProperty = () => css`\n min-width: initial;\n width: 100%;\n`\n\nconst pseudoBaseStyles = `\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n`\n\nconst PRESET = {\n filled: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-brand-primary-basic']\n if (props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let backgroundBefore = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundBefore = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n \n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n outline: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let background = 'transparent'\n if (props.loading && !props.success && !props.black && !props.danger)\n background = props.theme.colors['bg-brand-primary-basic']\n if (props.loading && !props.success && props.black) background = props.theme.colors['bg-onmain-contrast']\n if (props.loading && !props.success && props.danger) background = props.theme.colors['alert-bg-error-500']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success || props.loading) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n let boxShadow: string = props.theme.colors['border-brand-primary']\n if (props.black) boxShadow = props.theme.colors['border-onmain-contrast']\n if (props.danger) boxShadow = props.theme.colors['alert-bg-error-500']\n if (props.loading && !props.success) boxShadow = 'transparent'\n if (props.success) boxShadow = props.theme.colors['alert-bg-success-500']\n if (props.disabled) boxShadow = props.theme.colors['bg-disabled-large']\n\n let backgroundBefore = props.theme.colors['bg-brand-primary-basic']\n if (props.black) backgroundBefore = props.theme.colors['bg-onmain-contrast']\n if (props.danger) backgroundBefore = props.theme.colors['alert-bg-error-500']\n\n let backgroundAfter = props.theme.colors['bg-oncolor-hover']\n if (props.black && !props.danger) backgroundAfter = props.theme.colors['bg-oncontrast-hover']\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 ${props.fontBold ? 2 : 1}px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${backgroundBefore};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n background-color: ${backgroundAfter};\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-primary']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let background = 'transparent'\n if (props.success || props.loading) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.loading && !props.success) color = props.theme.colors['content-oncolor-constant']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n let boxShadow: string = props.theme.colors['border-oncolor-default']\n if (props.disabled) boxShadow = 'transparent'\n\n return `\n background-color: ${background};\n color: ${color};\n box-shadow: inset 0 0 0 ${props.fontBold ? 2 : 1}px ${boxShadow};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-primary']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover {\n color: ${props.theme.colors['content-oncolor-constant']};\n box-shadow: none;\n }\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n base: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-onmain-tertiary']\n if (props.success) background = props.theme.colors['alert-bg-success-500']\n if (props.disabled) background = props.theme.colors['bg-disabled-large']\n\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let background = props.theme.colors['bg-oncolor-secondary']\n if (props.success) background = props.theme.colors['bg-oncolor-primary']\n if (props.disabled) background = props.theme.colors['bg-oncolor-disabled']\n\n let color = props.theme.colors['content-oncolor-primary']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: ${background};\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n clear: {\n default: css<ButtonRootProps>`\n ${(props) => {\n let color = props.theme.colors['content-brand-primary']\n if (props.black) color = props.theme.colors['content-oncolor-inverse']\n if (props.danger) color = props.theme.colors['alert-error']\n if (props.success) color = props.theme.colors['alert-success']\n if (props.disabled) color = props.theme.colors['content-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncolor-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n onColored: css<ButtonRootProps>`\n ${(props) => {\n let color = props.theme.colors['content-oncolor-primary']\n if (props.disabled) color = props.theme.colors['content-oncolor-disabled']\n\n return `\n background-color: transparent;\n color: ${color};\n\n &::before {\n ${pseudoBaseStyles}\n background-color: ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n &::after {\n ${pseudoBaseStyles}\n box-shadow: inset 0px 4px 0px ${props.theme.colors['bg-oncontrast-hover']};\n opacity: 0;\n }\n\n ${\n !props.disabled && !props.success && !props.loading\n ? `\n &:hover::before {\n opacity: 1;\n }\n &:active::after {\n opacity: 1;\n }\n `\n : 'cursor: default;'\n }\n `\n }}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<ButtonRootProps>`\n ${(props) => {\n if (props.disabled || props.loading) return ''\n\n return `\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n }\n ${\n props.inverted || props.basic || props.outline\n ? `\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n } \n `\n : ''\n }\n `\n }}\n\n ${(props) => (props.loading ? defaultLoadingStyles : '')}\n \n ${(props) => {\n let cssProperty = 'background-color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'color'\n\n return colorFn(props.color, cssProperty)\n }}\n\n ${(props) => {\n let cssProperty = 'color'\n if (props.inverted || props.basic || props.outline) cssProperty = 'background-color'\n\n return colorFn(props.fontColor, cssProperty)\n }}\n \n ${(props) => {\n if (!props.disabled) return ''\n\n return `\n cursor: not-allowed;\n background-color: ${props.theme.colors.mercury};\n color: ${props.theme.colors.silver};\n `\n }}\n \n ${(props) => (props.basic || props.outline ? 'background-color: transparent;' : '')}\n `,\n}\n\nconst extractStyles = (props: ThemedStyledProps<ButtonRootProps, DefaultTheme>) => {\n if (props.brandPresetUsed) {\n if (props.clear && !props.base && !props.outline && !props.onColored) return PRESET.clear.default\n if (props.clear && !props.base && !props.outline && props.onColored) return PRESET.clear.onColored\n\n if (props.base && !props.clear && !props.outline && !props.onColored) return PRESET.base.default\n if (props.base && !props.clear && !props.outline && props.onColored) return PRESET.base.onColored\n\n if (props.outline && !props.clear && !props.base && !props.onColored) return PRESET.outline.default\n if (props.outline && !props.clear && !props.base && props.onColored) return PRESET.outline.onColored\n\n return props.onColored ? PRESET.filled.onColored : PRESET.filled.default\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractFontSize = (props: ThemedStyledProps<ButtonRootProps, DefaultTheme>) => {\n if (STATIC_SIZES.includes(<ButtonStaticSize>props.size)) return ''\n return responsiveProperty('size', 'font-size')\n}\n\nconst extractRoundStyles = (props: ThemedStyledProps<ButtonRootProps, DefaultTheme>) => {\n if (!props.round) return ''\n\n if (STATIC_SIZES.includes(<ButtonStaticSize>props.size)) {\n return props.brandPresetUsed\n ? `font-size: ${BRAND_ROUND_SIZES[<ButtonStaticSize>props.size]}px;\n padding: 1em;`\n : property(DEFAULT_ROUND_SIZES[<ButtonStaticSize>props.size], getDefaultRoundSizes)\n }\n\n return 'padding: 1em;'\n}\n\nexport const Root = styled.button\n .withConfig({\n shouldForwardProp: (prop) => {\n return FORWARD_PROPS.includes(<ButtonForwardProp>prop) || prop.includes('data')\n },\n })\n .attrs(injectDefaultTheme)<ButtonRootProps>`\n ${baseStyles}\n ${extractStyles}\n ${extractFontSize}\n ${extractRoundStyles}\n\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n\n ${(props) => {\n const cssProperty = props.fluid && props.width !== 'auto' ? 'max-width' : 'width'\n return props.width ? property(getWidth(props.width), cssProperty) : null\n }}\n\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL },\n cssProperty: 'padding',\n })\n }}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })\n }}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })\n }}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })\n }}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })\n }}\n\n ${({ marginXS, marginS, marginM, marginL, marginXL }) => {\n return responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })\n }}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) => {\n return responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })\n }}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) => {\n return responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })\n }}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) => {\n return responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })\n }}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) => {\n return responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })\n }}\n\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n \n ${({ heightXS, heightS, heightM, heightL, heightXL }) => {\n return responsiveNamedProperty({\n sizes: { heightXS, heightS, heightM, heightL, heightXL },\n cssProperty: 'height',\n })\n }}\n\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) => {\n return responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: getWidth,\n })\n }}\n\n ${(props) => (props.fluid ? property(props.fluid, fluidStyles) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) => {\n return responsiveNamedProperty({\n sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL },\n cssProperty: fluidStyles,\n })\n }}\n`\n\nexport const IconSlot = styled.span<{\n children: React.ReactNode\n marginLeft?: boolean\n marginRight?: boolean\n}>`\n ${(props) => `\n position: relative;\n z-index: 1;\n display: flex;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n margin-left: ${props.marginLeft ? '0.4em' : 0};\n margin-right: ${props.marginRight ? '0.4em' : 0};\n `}\n`\n\nexport const Content = styled.span`\n position: relative;\n z-index: 1;\n`\n\nexport const SpinnerIcon = styled(Spinner)`\n width: 100%;\n animation: ${spin} 2000ms linear infinite;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n\nexport const CheckIcon = styled(Check)`\n width: 100%;\n ${(props) => `\n > path {\n stroke-width: ${props.strokeWidth};\n }\n `}\n`\n"],"names":["WIDTHS","xl","l","m","s","xs","DEFAULT_ROUND_SIZES","BRAND_ROUND_SIZES","baseStyles","css","props","display","fontWeight","concat","borderRadius","lineHeight","basePadding","noSpacing","loading","keyframes","spin","defaultLoadingStyles","getWidth","width","getDefaultRoundSizes","size","r","sizing","fluidStyles","pseudoBaseStyles","PRESET","filled","default","background","theme","colors","black","danger","success","disabled","color","backgroundBefore","onColored","outline","boxShadow","backgroundAfter","fontBold","base","clear","PRESET_DEFAULT","fontColor","tiny","saturate","lighten","toString","inverted","basic","cssProperty","colorFn","mercury","silver","Root","styled","button","withConfig","shouldForwardProp","prop","FORWARD_PROPS","includes","attrs","injectDefaultTheme","componentId","brandPresetUsed","STATIC_SIZES","responsiveProperty","round","property","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","fontSize","height","fluid","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","_ref12","heightXS","heightS","heightM","heightL","heightXL","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL","IconSlot","span","Content","SpinnerIcon","Spinner","strokeWidth","CheckIcon","Check"],"mappings":"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"}
|
package/components/Text/Text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useClassname as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectWithoutProperties';import t from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useFallbackTheme as s}from'../../hooks/use-theme.js';import{useConfigPriority as a}from'../../hooks/use-config-priority.js';import{useClassname as o}from'../../hooks/useClassname.js';import{TextHeading as i}from'../Text.Heading/Text.Heading.js';import{TextEllipse as l}from'../Text.Ellipse/Text.Ellipse.js';import{APPEARANCE as m}from'./constants.js';import{Root as n}from'./style.js';import{jsx as p}from'react/jsx-runtime';var f=["as","weight","lineHeight","fontStyle","size","content","children"];var h='Text';var c=r(((r,i)=>{var l,h;var c=s();var d=a(null===(l=c.components)||void 0===l?void 0:l.Text,r);var g=null!==(h=m[d.appearance])&&void 0!==h?h:{};var u=t(t({},g),d);var{as:v="div",weight:x="normal",lineHeight:T="m",fontStyle:j="normal",size:y="m",content:H,children:E}=u,N=e(u,f);var b=o("Text",N.className);return p(n,t(t({},N),{},E?{ref:i,as:v,weight:x,lineHeight:T,fontStyle:j,size:y,className:b,children:E}:{ref:i,as:v,weight:x,lineHeight:T,fontStyle:j,size:y,className:b,dangerouslySetInnerHTML:{__html:H||''}}))}));c.displayName="Text",c.Heading=i,c.Ellipse=l;export{h as COMPONENT_NAME,c as Text};
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { APPEARANCE } from './constants'\nimport type { TextProps, TextComponent, TextAppearance } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\nconst Text = forwardRef<HTMLElement, TextProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const prioritizedProps = useConfigPriority<TextProps>(theme.components?.Text, props)\n const appearanceProps = APPEARANCE[prioritizedProps.appearance as TextAppearance] ?? {}\n const mergedProps: TextProps = { ...appearanceProps, ...prioritizedProps }\n\n const {\n as = 'div',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n size = 'm',\n content,\n children,\n ...restProps\n } = mergedProps\n\n const className = useClassname(COMPONENT_NAME, restProps.className)\n\n if (children) {\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={as}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n size={size}\n className={className}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={as}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n size={size}\n className={className}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}) as TextComponent\n\nText.displayName = COMPONENT_NAME\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\n\nexport { Text, COMPONENT_NAME }\n\nexport type { TextProps }\n"],"names":["COMPONENT_NAME","Text","forwardRef","props","ref","_theme$components","_APPEARANCE","theme","useFallbackTheme","prioritizedProps","useConfigPriority","components","appearanceProps","APPEARANCE","appearance","mergedProps","_objectSpread","as","weight","lineHeight","fontStyle","size","content","children","restProps","_excluded","className","useClassname","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","displayName","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"gpBAUMA,IAAAA,EAAiB,OAEjBC,IAAAA,EAAOC,IAAoCC,EAAOC,KAAQ,IAAAC,EAAAC,EAC9D,IAAMC,EAAQC,IAEd,IAAMC,EAAmBC,EAAiB,QAAAL,EAAYE,EAAMI,kBAAlB,IAAAN,SAAYA,EAAkBJ,KAAME,GAC9E,IAAMS,EAAe,UAAGC,EAAWJ,EAAiBK,mBAA/B,IAAAR,EAAAA,EAAgE,GACrF,IAAMS,EAAsBC,EAAAA,EAAA,GAAQJ,GAAoBH,GAExD,IAAMQ,GACJA,EAAK,MADDC,OAEJA,EAAS,SAFLC,WAGJA,EAAa,IAHTC,UAIJA,EAAY,SAJRC,KAKJA,EAAO,IALHC,QAMJA,EANIC,SAOJA,GAEER,EADCS,IACDT,EATJU,GAWA,IAAMC,EAAYC,EApBG,OAoB0BH,EAAUE,WAEzD,OAEIE,EAACC,SACKL,GADN,GAFAD,EAEA,CAEEnB,IAAKA,EACLa,GAAIA,EACJC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,KAAMA,EACNK,UAAWA,EARbH,SAUGA,GAML,CAEEnB,IAAKA,EACLa,GAAIA,EACJC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,KAAMA,EACNK,UAAWA,EACXI,wBAAyB,CAAEC,OAAQT,GAAW,UAKpDrB,EAAK+B,YAtDkB,OAwDvB/B,EAAKgC,QAAUC,EACfjC,EAAKkC,QAAUC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var x={display:{sizes:{xxxl:84,xxl:76,xl:68,l:60,m:52,s:44,xs:36,xxs:28,xxxs:20},lineHeight:1,weight:800,fontStyle:'normal',margin:0},heading:{sizes:{xxxl:64,xxl:56,xl:48,l:40,m:36,s:32,xs:28,xxs:24,xxxs:20},lineHeight:1.1,weight:800,fontStyle:'normal',margin:0},subheading:{sizes:{xxxl:52,xxl:46,xl:40,l:34,m:28,s:24,xs:20,xxs:16,xxxs:12},lineHeight:1.1,weight:700,fontStyle:'normal',margin:0},'subheading-compact':{sizes:{xxxl:36,xxl:32,xl:28,l:24,m:20,s:18,xs:16,xxs:14,xxxs:12},lineHeight:1.3,weight:800,fontStyle:'normal',margin:0},body:{sizes:{xxxl:32,xxl:28,xl:24,l:20,m:18,s:16,xs:14,xxs:12,xxxs:10},lineHeight:1.3,weight:400,fontStyle:'normal',margin:0},caption:{sizes:{xxxl:32,xxl:28,xl:24,l:20,m:18,s:16,xs:14,xxs:12,xxxs:10},lineHeight:1.2,weight:400,fontStyle:'normal',margin:0}};export{x as APPEARANCE};
|
|
2
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/Text/constants.ts"],"sourcesContent":["import type { TextAppearance, TextProps } from './types'\n\nexport const APPEARANCE: Record<TextAppearance, Partial<Omit<TextProps, 'appearance'>>> = {\n display: {\n sizes: { xxxl: 84, xxl: 76, xl: 68, l: 60, m: 52, s: 44, xs: 36, xxs: 28, xxxs: 20 },\n lineHeight: 1,\n weight: 800,\n fontStyle: 'normal',\n margin: 0,\n },\n heading: {\n sizes: { xxxl: 64, xxl: 56, xl: 48, l: 40, m: 36, s: 32, xs: 28, xxs: 24, xxxs: 20 },\n lineHeight: 1.1,\n weight: 800,\n fontStyle: 'normal',\n margin: 0,\n },\n subheading: {\n sizes: { xxxl: 52, xxl: 46, xl: 40, l: 34, m: 28, s: 24, xs: 20, xxs: 16, xxxs: 12 },\n lineHeight: 1.1,\n weight: 700,\n fontStyle: 'normal',\n margin: 0,\n },\n 'subheading-compact': {\n sizes: { xxxl: 36, xxl: 32, xl: 28, l: 24, m: 20, s: 18, xs: 16, xxs: 14, xxxs: 12 },\n lineHeight: 1.3,\n weight: 800,\n fontStyle: 'normal',\n margin: 0,\n },\n body: {\n sizes: { xxxl: 32, xxl: 28, xl: 24, l: 20, m: 18, s: 16, xs: 14, xxs: 12, xxxs: 10 },\n lineHeight: 1.3,\n weight: 400,\n fontStyle: 'normal',\n margin: 0,\n },\n caption: {\n sizes: { xxxl: 32, xxl: 28, xl: 24, l: 20, m: 18, s: 16, xs: 14, xxs: 12, xxxs: 10 },\n lineHeight: 1.2,\n weight: 400,\n fontStyle: 'normal',\n margin: 0,\n },\n}\n"],"names":["APPEARANCE","display","sizes","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","lineHeight","weight","fontStyle","margin","heading","subheading","body","caption"],"mappings":"AAEO,IAAMA,EAA6E,CACxFC,QAAS,CACPC,MAAO,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAChFC,WAAY,EACZC,OAAQ,IACRC,UAAW,SACXC,OAAQ,GAEVC,QAAS,CACPd,MAAO,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAChFC,WAAY,IACZC,OAAQ,IACRC,UAAW,SACXC,OAAQ,GAEVE,WAAY,CACVf,MAAO,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAChFC,WAAY,IACZC,OAAQ,IACRC,UAAW,SACXC,OAAQ,GAEV,qBAAsB,CACpBb,MAAO,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAChFC,WAAY,IACZC,OAAQ,IACRC,UAAW,SACXC,OAAQ,GAEVG,KAAM,CACJhB,MAAO,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAChFC,WAAY,IACZC,OAAQ,IACRC,UAAW,SACXC,OAAQ,GAEVI,QAAS,CACPjB,MAAO,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAChFC,WAAY,IACZC,OAAQ,IACRC,UAAW,SACXC,OAAQ"}
|
package/components/Text/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import n from'styled-components';import{injectDefaultTheme as e}from'../../shared/utils/inject-theme.js';import{display as t}from'../../mixins/display.js';import{color as i}from'../../mixins/color.js';import{property as o,responsiveNamedProperty as s}from'../../mixins/responsive-property.js';var r={lighter:100,normal:400,bold:600,bolder:800};var a={l:1.5,m:1.3,s:1.15,xs:1};var l=n.div.withConfig({shouldForwardProp:n=>['children','className','style','title','dangerouslySetInnerHTML','id'].includes(n)}).attrs(e).withConfig({componentId:"fox-ui__sc-s2fogy-0"})([""," "," "," "," ",""],(n=>{var e,t,i;return"\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!==(e=r[n.weight])&&void 0!==e?e:n.weight,";"):'',"\n ").concat(n.fontStyle?"font-style: ".concat(n.fontStyle,";"):'',"\n ").concat(n.textAlign?"text-align: ".concat(n.textAlign,";"):'',"\n line-height: ").concat(n.lineHeight?"".concat(null!==(t=a[n.lineHeight])&&void 0!==t?t:n.lineHeight):'inherit',";\n margin: ").concat(null!==(i=n.margin)&&void 0!==i?i:'initial').concat('number'==typeof n.margin?'px':'',";\n a {\n text-decoration: ").concat(n.underlineLinks?'underline':'none',";\n &:hover {\n text-decoration: none;\n }\n }\n ")}),(n=>n.display?t(n.display):null),(n=>i(n.color?n.color:n.theme.textColor)),(n=>{var e;return n.size?o(n.size,'font-size',null!==(e=n.fontUnits)&&void 0!==e?e:'px',n.sizes):null}),(n=>{var{sizeXXS:e,sizeXS:t,sizeS:i,sizeM:o,sizeL:r,sizeXL:a,fontUnits:l,sizes:c}=n;return s({sizes:{sizeXXS:e,sizeXS:t,sizeS:i,sizeM:o,sizeL:r,sizeXL:a},cssProperty:'font-size',sizing:null!=l?l:'px',predefinedSizes:c})}));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
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { display } from 'mixins/display'\nimport { color, ColorValue } from 'mixins/color'\nimport { responsiveNamedProperty, property } from 'mixins/responsive-property'\nimport type { TextRootProps } 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\nexport const Root = styled.div\n .withConfig<TextRootProps>({\n shouldForwardProp: (prop) => {\n return ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML', 'id'].includes(prop)\n },\n })\n .attrs(injectDefaultTheme)<TextRootProps>`\n ${(props) => `\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 line-height: ${props.lineHeight ? `${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight}` : 'inherit'};\n margin: ${props.margin ?? 'initial'}${typeof props.margin === 'number' ? 'px' : ''};\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as ColorValue))}\n ${(props) => (props.size ? property(props.size, 'font-size', props.fontUnits ?? 'px', props.sizes) : null)}\n ${({ sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL, fontUnits, sizes }) =>\n responsiveNamedProperty({\n sizes: { sizeXXS, sizeXS, sizeS, sizeM, sizeL, sizeXL },\n cssProperty: 'font-size',\n sizing: fontUnits ?? 'px',\n predefinedSizes: sizes,\n })}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","_WEIGHT_MAP$props$wei","_LINE_HEIGHT_MAP$prop","_props$margin","fontFamily","concat","transform","weight","fontStyle","textAlign","lineHeight","margin","underlineLinks","display","color","theme","textColor","_props$fontUnits","size","property","fontUnits","sizes","_ref","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","cssProperty","sizing","predefinedSizes"],"mappings":"qSAOA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGC,IAAMC,EAAOC,EAAOC,IACxBC,WAA0B,CACzBC,kBAAoBC,GACX,CAAC,WAAY,YAAa,QAAS,QAAS,0BAA2B,MAAMC,SAASD,KAGhGE,MAAMC,GANQL,WAAA,CAAAM,YAAA,uBAAGR,CAAH,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAOZS,IAAD,IAAAC,EAAAC,EAAAC,EAAA,MACEH,SAAAA,OAAAA,EAAMI,WAAN,gBAAAC,OAAmCL,EAAMI,gBAAgB,GAD3D,UAAAC,OAEEL,EAAMM,oCAA+BN,EAAMM,UAAe,KAAA,GAC1DN,UAAAA,OAAAA,EAAMO,8BAAqDP,UAA5BpB,EAAWoB,EAAMO,eAAAA,IAAWP,EAAAA,EAAAA,EAAMO,OAAjE,KAA6E,GAC7EP,UAAAA,OAAAA,EAAMQ,UAAN,eAAAH,OAAiCL,EAAMQ,UAAe,KAAA,GACtDR,UAAAA,OAAAA,EAAMS,UAAN,eAAAJ,OAAiCL,EAAMS,eAAe,GALxD,uBAAAJ,OAMeL,EAAMU,qBAAqDV,UAArCf,EAAgBe,EAAMU,mBAAeV,IAAAA,EAAAA,EAAAA,EAAMU,YAAe,oCACrE,UAAhBV,EAAMW,cAAU,IAAAR,EAAAA,EAAA,kBAAoC,iBAAjBH,EAAMW,OAAsB,KAAO,GAE3DX,uCAAAA,OAAAA,EAAMY,eAAiB,YAAc,OAT1D,6EAgBCZ,GAAWA,EAAMa,QAAUA,EAAQb,EAAMa,SAAW,OACpDb,GAAyBc,EAAdd,EAAMc,MAAcd,EAAMc,MAAed,EAAMe,MAAMC,aAChEhB,IAAD,IAAAiB,EAAA,OAAYjB,EAAMkB,KAAOC,EAASnB,EAAMkB,KAAM,YAAb,UAA0BlB,EAAMoB,iBAAhC,IAAAH,EAAAA,EAA6C,KAAMjB,EAAMqB,OAAS,QACnGC,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,MAAmBA,EAAnBC,MAA0BA,EAA1BC,MAAiCA,EAAjCC,OAAwCA,EAAxCR,UAAgDA,EAAhDC,MAA2DA,GAA5DC,EAAA,OACAO,EAAwB,CACtBR,MAAO,CAAEE,QAAAA,EAASC,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAC/CE,YAAa,YACbC,OAAQX,MAAAA,EAAAA,EAAa,KACrBY,gBAAiBX"}
|