@foxford/ui 2.6.0-beta-95a4a4e-20230719 → 2.7.0-beta-5133c5e-20230721
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/Alert/Alert.js +2 -0
- package/components/Alert/Alert.js.map +1 -0
- package/components/Alert/CountdownCircle.js +2 -0
- package/components/Alert/CountdownCircle.js.map +1 -0
- package/components/Alert/style.js +2 -0
- package/components/Alert/style.js.map +1 -0
- package/components/Alert/utils.js +2 -0
- package/components/Alert/utils.js.map +1 -0
- 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/dts/index.d.ts +245 -188
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/index.js +1 -1
- package/package.json +2 -1
- package/theme/colors.js +1 -1
- package/theme/colors.js.map +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e,useState as r}from'react';import{Close as t,WarningTriangleFill as i,CheckCircleFill as s,NotifFill as n,CloseCirlceFill as a}from'@foxford/icon-pack';import{useClassname as c}from'../../hooks/useClassname.js';import{useConfigPriority as l}from'../../hooks/use-config-priority.js';import{useFallbackTheme as m}from'../../hooks/use-theme.js';import{Button as p}from'../Button/Button.js';import{Icon as h}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as u,IconWrapper as C,Timer as d,ContentWrapper as f,Title as k,Content as y,Link as g,Actions as w,PrimaryAction as x,CancelTimer as b,CloseIcon as T}from'./style.js';import{countdownColor as v}from'./utils.js';import{jsxs as z,jsx as A}from'react/jsx-runtime';var j=o=>{var{isCompact:e,theme:r,type:t}=o;var c=e?16:24;switch(t){case'error':return A(a,{color:r.colors['alert-bg-error-500'],size:c});case'info':return A(n,{color:r.colors['content-brand-primary'],size:c});case'success':return A(s,{color:r.colors['alert-success'],size:c});case'warning':return A(i,{color:r.colors['alert-warning'],size:c});default:return null}};var I='Alert';var P=e(((e,i)=>{var s;var n=m();var{cancelTimerText:a="Отменить",primaryAction:I,primaryActionProps:P,secondaryAction:W,secondaryActionProps:N,children:F,className:B,clear:M,customIcon:E,image:L,isCompact:R,link:H,linkProps:O,noIcon:S,onClickCancelTimer:_,closeToast:q,size:D="s",style:G,textProps:J,textWrap:K,timer:Q,title:U,titleProps:V,type:X,width:Y=['fit-content','fit-content','fit-content','351px','304px','304px']}=l(null===(s=n.components)||void 0===s?void 0:s.Alert,e);var Z=c("Alert",B);var[$,oo]=r(!1);var eo=Boolean('l'===D||!!U||R&&(U||H||I||W));return z(u,{className:Z,clear:M,column:eo,isCompact:R,noIcon:S,onMouseEnter:Q&&(()=>{oo(!0)}),onMouseLeave:Q&&(()=>{oo(!1)}),ref:i,size:D,style:G,textWrap:K,type:X,width:Y,withAction:!!I||!!W,withCloseIcon:!!q,withImage:!!L,withLink:!!H,withTimer:!!Q,withTitle:!!U,children:[(!S||E)&&z(C,{column:eo,isCompact:R,withImage:!!L,children:[!S&&!Q&&!E&&!L&&j({isCompact:R,theme:n,type:X}),E&&A(h,{name:E,size:R?16:24}),L,Q&&A(d,{isCompact:R,onPause:$,timer:Q,color:v({theme:n,type:X})})]}),z(f,{column:eo,isCompact:R,children:[U&&A(k,o(o({color:n.colors['content-onmain-primary'],isCompact:R,size:R?14:16,lineHeight:"m"},V),{},{children:U})),A(y,o(o({color:n.colors['content-onmain-primary'],column:eo,isCompact:R,lineHeight:"s",size:R?14:16,textWrap:K},J),{},{children:F})),H&&A(g,o(o({clear:M,column:eo,isCompact:R,onClick:H.onClick,preset:"brand",pseudo:!0,size:R?'s':'m',withTitle:!!U},O),{},{children:H.content})),(I||W)&&z(w,{column:eo,isCompact:R,withTitle:!!U,children:[W&&A(p,o(o({black:!0,fontWeight:"normal",marginRight:eo?4:8,onClick:W.onClick,outline:!0,preset:"brand",size:"xs"},N),{},{children:W.content})),I&&A(x,o(o({black:!0,fontWeight:"normal",onClick:I.onClick,preset:"brand",size:"xs"},P),{},{children:I.content}))]})]}),_&&A(b,{black:!0,clear:!0,fontWeight:"normal",isCompact:R,onClick:_,preset:"brand",size:R?'xs':'m',children:a}),!q||Q&&R?null:A(T,{"aria-label":"close",onClick:q,type:"button",withTimer:!!Q,children:A(t,{color:n.colors['content-onmain-primary'],size:R?18:24})})]})}));P.displayName="Alert";export{P as Alert,I as COMPONENT_NAME};
|
|
2
|
+
//# sourceMappingURL=Alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { useFallbackTheme } from 'hooks/use-theme'\n\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps,\n secondaryAction,\n secondaryActionProps,\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps,\n noIcon,\n onClickCancelTimer,\n closeToast,\n size = 's',\n style,\n textProps,\n textWrap,\n timer,\n title,\n titleProps,\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n setTimerOnPause(true)\n }\n\n const handleMouseLeave = () => {\n setTimerOnPause(false)\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={timer && handleMouseEnter}\n onMouseLeave={timer && handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n onPause={timerOnPause}\n timer={timer}\n color={countdownColor({ theme, type })}\n />\n )}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n lineHeight='s'\n size={isCompact ? 14 : 16}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link\n clear={clear}\n column={column}\n isCompact={isCompact}\n onClick={link.onClick}\n preset='brand'\n pseudo\n size={isCompact ? 's' : 'm'}\n withTitle={!!title}\n {...linkProps}\n >\n {link.content}\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n marginRight={column ? 4 : 8}\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size='xs'\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Styled.PrimaryAction\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Styled.PrimaryAction>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 'm'}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {!closeToast || (timer && isCompact) ? null : (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","_ref","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","COMPONENT_NAME","Alert","forwardRef","props","ref","_theme$components","useFallbackTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled.Root","onMouseEnter","onMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Styled.IconWrapper","Icon","name","Styled.Timer","onPause","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","Styled.Link","onClick","preset","pseudo","content","Styled.Actions","Button","black","fontWeight","marginRight","outline","Styled.PrimaryAction","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useState as r,useRef as e,useEffect as t}from'react';import{Progress as s}from'../Progress/Progress.js';import{jsx as a}from'react/jsx-runtime';var o=o=>{var{className:n,color:c,isCompact:l,onPause:u,timer:i}=o;var[m,v]=r(i);var p=e();t((()=>()=>{p.current&&clearInterval(p.current)}),[]),t((()=>{u?clearInterval(p.current):p.current=setInterval((()=>{v((r=>r<=.05?(clearInterval(p.current),r):r-.05))}),50)}),[u]);var f=m/i*100;return a(s.Circle,{className:n,content:Math.ceil(m),progress:f,progressStartAngle:0,resultColor:c,size:l?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5})};export{o as CountdownCircle};
|
|
2
|
+
//# sourceMappingURL=CountdownCircle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, onPause, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n\n useEffect(() => {\n return () => {\n if (intervalId.current) {\n clearInterval(intervalId.current)\n }\n }\n }, [])\n\n useEffect(() => {\n if (onPause) {\n clearInterval(intervalId.current)\n } else {\n intervalId.current = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n clearInterval(intervalId.current)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n }\n }, [onPause])\n\n const progress = (countdown / timer) * 100\n\n return (\n <Progress.Circle\n className={className}\n content={Math.ceil(countdown)}\n progress={progress}\n progressStartAngle={0}\n resultColor={color}\n size={isCompact ? 16 : 20}\n strokeBGColor='transparent'\n strokeLineWidth={1.5}\n />\n )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","_ref","className","color","isCompact","onPause","timer","countdown","setCountdown","useState","intervalId","useRef","useEffect","current","clearInterval","setInterval","prevCountdown","progressRate","progress","_jsx","Progress","Circle","content","Math","ceil","progressStartAngle","resultColor","size","strokeBGColor","strokeLineWidth"],"mappings":"uJAQMA,IAAAA,EAAkBC,IAA2E,IAA1EC,UAAEA,EAAFC,MAAaA,EAAbC,UAAoBA,EAApBC,QAA+BA,EAA/BC,MAAwCA,GAAkCL,EACjG,IAAOM,EAAWC,GAAgBC,EAASH,GAC3C,IAAMI,EAAaC,IAEnBC,OACS,KACDF,EAAWG,SACbC,cAAcJ,EAAWG,WAG5B,IAEHD,QACMP,EACFS,cAAcJ,EAAWG,SAEzBH,EAAWG,QAAUE,aAAAA,KACnBP,GAAcQ,GACRA,GApBO,KAqBTF,cAAcJ,EAAWG,SAClBG,GAGFA,EAzBI,QA2BZC,MAEJ,CAACZ,IAEJ,IAAMa,EAAYX,EAAYD,EAAS,IAEvC,OACEa,EAACC,EAASC,OAAV,CACEnB,UAAWA,EACXoB,QAASC,KAAKC,KAAKjB,GACnBW,SAAUA,EACVO,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAc,cACdC,gBAAiB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import n from'styled-components';import{responsiveProperty as o}from'../../mixins/responsive-property.js';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{Anchor as i}from'../Anchor/Anchor.js';import{Button as c}from'../Button/Button.js';import{Text as a}from'../Text/Text.js';import{CountdownCircle as e}from'./CountdownCircle.js';var r=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var p=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).attrs(t).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(r(n),";\n padding-right: ").concat((n=>{var{isCompact:o,withCloseIcon:t,withTimer:i}=n;return t?o?'12px':'16px':i?'8px':'20px'})(n),";\n padding-bottom: ").concat(r(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:i,withAction:c,withImage:a,withTitle:e}=n;return o?e||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':e||'l'===i?a||!t?'16px':'24px':a?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: ").concat(n.isCompact?'351px':'100%',";\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(t)return o.colors['bg-onmain-primary'];switch(n){case'error':return o.colors['alert-bg-error-200'];case'info':return o.colors['bg-brand-primary-200'];case'success':return o.colors['alert-bg-success-200'];case'warning':return o.colors['alert-bg-warning-200'];default:return o.colors['bg-oncolor-primary']}})(n.type,n.theme,!!n.clear),";\n box-shadow: ").concat(n.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none',";\n box-sizing: border-box;\n ")),o('width','width'));var s=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var m=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})([""," ",";"],(n=>"\n display: flex;\n margin-right: ".concat((n=>{var{column:o,isCompact:t,withImage:i}=n;return t?'8px':o?i?'8px':'12px':'8px'})(n),";\n ")),(n=>n.withImage?"\n img,\n svg {\n height: ".concat(s(n),";\n width: ").concat(s(n),";\n }\n "):null));var l=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-2"})(["",""],(n=>"\n display: flex;\n margin-right: auto;\n flex-direction: ".concat(n.column?'column':'row',";\n align-items: ").concat(n.column?'flex-start':'center',";\n max-width: ").concat(n.column?'260px':'initial',";\n white-space: ").concat(n.column||n.isCompact?'normal':'nowrap',";\n overflow: hidden;\n ")));var x=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-3"})(["",""],(n=>"\n display: inline-block;\n margin-top: ".concat(n.isCompact?'0':'2px',";\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n ")));var u=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["",""],(n=>"\n line-height: ".concat(n.isCompact?'18px':'20px',";\n text-overflow: ").concat(n.column||n.isCompact?'clip':'ellipsis',";\n white-space: ").concat(n.column||n.isCompact||n.textWrap?'pre-wrap':'inherit',";\n overflow: hidden;\n ")));var d=n(i).withConfig({shouldForwardProp:n=>!['clear','column','isCompact','withTitle'].includes(n)}).withConfig({componentId:"fox-ui__sc-1v79u95-5"})(["",""],(n=>"\n display: flex;\n margin-top: ".concat(n.column?n.isCompact&&!n.withTitle?'4px':'12px':0,";\n margin-left: ").concat(n.column?0:'60px',";\n color: ").concat(n.clear?n.theme.colors['content-link']:n.theme.colors['content-onmain-primary'],";\n ")));var h=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-6"})(["",""],(n=>"\n margin-top: ".concat((n=>{var{column:o,isCompact:t,withTitle:i}=n;return o?t?i?'16px':'8px':'16px':0})(n),";\n margin-left: ").concat(n.column?0:'60px',";\n ")));var f=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-7"})(["&&{margin-left:0;}"]);var g=n.button.withConfig({componentId:"fox-ui__sc-1v79u95-8"})(["",""],(n=>"\n appearance: none;\n display: flex;\n margin-left: ".concat(n.withTimer?'0':'16px',";\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ").concat(n.theme.colors.accent,";\n outline-offset: 2px;\n }\n ")));var w=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-9"})(["",""],(n=>"\n margin-left: ".concat(n.isCompact?'28px':'60px',";\n padding-right: ").concat(n.isCompact?'16px':'28px',";\n padding-left: ").concat(n.isCompact?'16px':'28px',";\n ")));var v=n(e).withConfig({componentId:"fox-ui__sc-1v79u95-10"})(["",""],(n=>"\n line-height: ".concat(n.isCompact?'12px':'18px',";\n font-weight: ").concat(n.isCompact?'700':'400',";\n font-size: ").concat(n.isCompact?'11px':'14px',";\n color: ").concat(n.color,";\n\n svg {\n transform: rotateY(180deg);\n }\n ")));export{h as Actions,w as CancelTimer,g as CloseIcon,u as Content,l as ContentWrapper,m as IconWrapper,d as Link,f as PrimaryAction,p as Root,v as Timer,x as Title};
|
|
2
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n PrimaryActionProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (type: AlertType | undefined, theme: DefaultTheme, clear: boolean) => {\n if (clear) {\n return theme.colors['bg-onmain-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n } else {\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n }\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '20px'\n } else {\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n } else {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n } else {\n return withImage ? '16px' : '20px'\n }\n }\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n } else {\n return withTimer ? '8px' : '20px'\n }\n}\n\nexport const Root = styled.div\n .withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n })\n .attrs(injectDefaultTheme)`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.type, props.theme, !!props.clear)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? `\n img,\n svg {\n height: ${getImageSize(props)};\n width: ${getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '18px' : '20px'};\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled(Anchor).withConfig<LinkProps>({\n shouldForwardProp: (prop) => !['clear', 'column', 'isCompact', 'withTitle'].includes(prop),\n})`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n }\n\n return 0\n}\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n `}\n`\n\nexport const PrimaryAction = styled(Button)<PrimaryActionProps>`\n && {\n margin-left: 0;\n }\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","_ref","column","isCompact","withImage","withTimer","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","concat","textWrap","paddingRight","_ref3","withCloseIcon","paddingLeft","_ref2","noIcon","size","withAction","withTitle","type","theme","clear","colors","responsiveProperty","getImageSize","_ref5","IconWrapper","getMarginRightIconWrapper","_ref4","ContentWrapper","Title","Text","Content","Link","Anchor","Actions","_ref6","PrimaryAction","Button","CloseIcon","button","accent","CancelTimer","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var r=r=>{var{theme:e,type:o}=r;switch(o){case'error':return e.colors['alert-bg-error-500'];case'info':default:return e.colors['content-brand-primary'];case'success':return e.colors['alert-success'];case'warning':return e.colors['alert-warning']}};export{r as countdownColor};
|
|
2
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/Alert/utils.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\n\nimport type { ColorValue } from '../../mixins/color'\n\nimport type { AlertProps } from './types'\n\nexport const countdownColor = ({ theme, type }: Pick<AlertProps, 'type'> & { theme: DefaultTheme }): ColorValue => {\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-500']\n case 'info':\n return theme.colors['content-brand-primary']\n case 'success':\n return theme.colors['alert-success']\n case 'warning':\n return theme.colors['alert-warning']\n default:\n return theme.colors['content-brand-primary']\n }\n}\n"],"names":["countdownColor","_ref","theme","type","colors"],"mappings":"AAMO,IAAMA,EAAiBC,IAAqF,IAApFC,MAAEA,EAAFC,KAASA,GAA2EF,EACjH,OAAQE,GACN,IAAK,QACH,OAAOD,EAAME,OAAO,sBACtB,IAAK,OAML,QACE,OAAOF,EAAME,OAAO,yBALtB,IAAK,UACH,OAAOF,EAAME,OAAO,iBACtB,IAAK,UACH,OAAOF,EAAME,OAAO"}
|
|
@@ -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 a}from'../../hooks/useClassname.js';import{Root as o}from'./style.js';import{jsx as n}from'react/jsx-runtime';var t=["as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel","tabIndex"];function d(p){var u,z,m;var{as:c,to:y,href:h,wrapper:v,className:f,style:b,children:L,content:S,pseudo:X,underline:w,color:x,display:M,size:N,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,autoRel:D=!0,tabIndex:K=0}=p,R=s(p,t);var A=a(d.displayName,f);var B=i();var P;var T=l((()=>{var e,s;return D&&null!==(e=B.utils)&&void 0!==e&&e.relBuilder?B.utils.relBuilder(null!==(s=p.href)&&void 0!==s?s:p.to,p.target):p.rel}),[D,p.rel,p.href,p.to,p.target]);P='div'!==c||M?M:'block';var _={};S&&(_=e(e({},_),{},{dangerouslySetInnerHTML:{__html:S}}));var E=e=>{var s;'Enter'===e.key&&(null==R||null===(s=R.onClick)||void 0===s||s.call(R))};return n(o,c?e(e(e({as:c,pseudo:X,wrapper:v,underline:w,href:h,className:A,style:b,color:x,size:N,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K,onKeyDown:E},R),_),{},{rel:'a'===c?null!==(u=p.rel)&&void 0!==u?u:T:void 0,children:L}):X?e(e(e({as:"div",pseudo:X,wrapper:v,underline:w,href:h,className:A,color:x,style:b,size:N,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K,onKeyDown:E},R),_),{},{children:L}):y?e(e(e({as:r,to:y,pseudo:X,wrapper:v,underline:w,className:A,color:x,size:N,style:b,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K,onKeyDown:E},R),_),{},{rel:null!==(z=p.rel)&&void 0!==z?z:T,children:L}):e(e(e({as:"a",href:h,pseudo:X,wrapper:v,underline:w,className:A,color:x,size:N,style:b,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K},_),R),{},{rel:null!==(m=p.rel)&&void 0!==m?m:T,children:L}))}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 { 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":"
|
|
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 { KeyboardEvent, 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 tabIndex?: number\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 tabIndex = 0,\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 const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement | HTMLDivElement | HTMLSpanElement>): void => {\n if (event.key === 'Enter') {\n rest?.onClick?.()\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 tabIndex={tabIndex}\n onKeyDown={onKeyDown}\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 tabIndex={tabIndex}\n onKeyDown={onKeyDown}\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 tabIndex={tabIndex}\n onKeyDown={onKeyDown}\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 tabIndex={tabIndex}\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","tabIndex","rest","_excluded","_className","useClassname","displayName","theme","useTheme","_display","_rel","useMemo","_theme$utils","_props$href","utils","relBuilder","target","rel","contentProps","dangerouslySetInnerHTML","__html","onKeyDown","event","_rest$onClick","key","onClick","call","_jsx","Styled.Root","_objectSpread","Link","defaultProps"],"mappings":"qiBAuEO,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,EAnBNC,SAoBJA,EAAW,GAETvB,EADCwB,IACDxB,EAtBJyB,GAwBA,IAAMC,EAAaC,EAAa5B,EAAO6B,YAAapB,GACpD,IAAMqB,EAAQC,IAEd,IAAIC,EACJ,IAAMC,EAAOC,QAAc,IAAAC,EAAAC,EACzB,OAAOb,GAAO,QAAAY,EAAIL,EAAMO,aAAV,IAAAF,GAAIA,EAAaG,WAAaR,EAAMO,MAAMC,WAAZ,QAAAF,EAAuBnC,EAAMM,YAAAA,IAA7B6B,EAAAA,EAAqCnC,EAAMK,GAAIL,EAAMsC,QAAUtC,EAAMuC,MAChH,CAACjB,EAAStB,EAAMuC,IAAKvC,EAAMM,KAAMN,EAAMK,GAAIL,EAAMsC,SAG/CP,EADM,QAAP3B,GAAiBW,EACLA,EADyB,QAGzC,IAAIyB,EAAe,GAEf7B,IACF6B,SACKA,GADO,GAAA,CAEVC,wBAAyB,CAAEC,OAAQ/B,MAIvC,IAAMgC,EAAaC,IACU,IAAAC,EAAT,UAAdD,EAAME,MACRtB,MAAAA,GAAA,UAAAA,EAAMuB,eAAAA,IAANF,GAAAA,EAAAG,KAAAxB,KAIJ,OAEIyB,EAACC,EAFD9C,EAEA+C,EAAAA,EAAAA,EAAA,CACE/C,GAAIA,EACJQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWkB,EACXjB,MAAOA,EACPK,MAAOA,EACPE,KAAMA,EACND,QAASgB,EACTd,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,SAAUA,EACVoB,UAAWA,GACPnB,GACAgB,GAnBN,GAAA,CAoBED,IAAY,MAAPnC,EAAA,QAAAH,EAAaD,EAAMuC,WAAAA,IAAnBtC,EAAAA,EAA0B+B,SApBjCtB,SAsBGA,IAIHE,EAEAuC,EAAAA,EAAAA,EAAA,CACE/C,GAAG,MACHQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWkB,EACXZ,MAAOA,EACPL,MAAOA,EACPO,KAAMA,EACND,QAASgB,EACTd,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,SAAUA,EACVoB,UAAWA,GACPnB,GACAgB,GAnBN,GAAA,CAAA9B,SAqBGA,IAGEL,EAEL8C,EAAAA,EAAAA,EAAA,CACE/C,GAAIgD,EACJ/C,GAAIA,EACJO,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWkB,EACXZ,MAAOA,EACPE,KAAMA,EACNP,MAAOA,EACPM,QAASgB,EACTd,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,SAAUA,EACVoB,UAAWA,GACPnB,GACAgB,GAnBN,GAAA,CAoBED,YAAKvC,EAAAA,EAAMuC,WAAAA,QAAOP,EApBpBtB,SAsBGA,IAKHyC,EAAAA,EAAAA,EAAA,CACE/C,GAAG,IACHE,KAAMA,EACNM,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWkB,EACXZ,MAAOA,EACPE,KAAMA,EACNP,MAAOA,EACPM,QAASgB,EACTd,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,SAAUA,GACNiB,GACAhB,GAlBN,GAAA,CAmBEe,YAAKvC,EAAAA,EAAMuC,WAAAA,QAAOP,EAnBpBtB,SAqBGA,KAvKTX,EAAO6B,YAAc,SACrB7B,EAAOsD,aAAe,CACpBtC,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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"}
|