@foxford/ui 2.21.2 → 2.21.3-beta-045f237-20240328
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 +1 -1
- package/components/Alert/Alert.js.map +1 -1
- package/components/Alert/style.js +1 -1
- package/components/Alert/style.js.map +1 -1
- package/components/Input/style.js.map +1 -1
- package/dts/index.d.ts +2 -0
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +2 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e,useState as r}from'react';import{useTheme as t}from'styled-components';import{Close as i,WarningTriangleFill as n,CheckCircleFill as s,NotifFill as a,CloseCirlceFill as c}from'@foxford/icon-pack';import{useClassname as l}from'../../hooks/useClassname.js';import{useConfigPriority as m}from'../../hooks/use-config-priority.js';import{Anchor as p}from'../Anchor/Anchor.js';import{Button as h}from'../Button/Button.js';import{Icon as u}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as C,IconWrapper as d,Timer as f,ContentWrapper as y,Title as k,Content as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e,useState as r}from'react';import{useTheme as t}from'styled-components';import{Close as i,WarningTriangleFill as n,CheckCircleFill as s,NotifFill as a,CloseCirlceFill as c}from'@foxford/icon-pack';import{useClassname as l}from'../../hooks/useClassname.js';import{useConfigPriority as m}from'../../hooks/use-config-priority.js';import{Anchor as p}from'../Anchor/Anchor.js';import{Button as h}from'../Button/Button.js';import{Icon as u}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as C,IconWrapper as d,Timer as f,ContentWrapper as y,Title as k,Content as g,Link as w,Actions as x,CancelTimer as A,CloseIcon as T}from'./style.js';import{countdownColor as b}from'./utils.js';import{jsxs as v,jsx as z}from'react/jsx-runtime';var j=o=>{var{isCompact:e,theme:r,type:t}=o;var i=e?16:24;switch(t){case'error':return z(c,{color:r.colors['alert-bg-error-500'],size:i});case'info':return z(a,{color:r.colors['content-brand-primary'],size:i});case'success':return z(s,{color:r.colors['alert-success'],size:i});case'warning':return z(n,{color:r.colors['alert-warning'],size:i});default:return null}};var I='Alert';var W=e(((e,n)=>{var s;var a=t();var{cancelTimerText:c="Отменить",primaryAction:I,primaryActionProps:W={},secondaryAction:N,secondaryActionProps:P={},children:B,className:F,clear:M,customIcon:E,image:L,isCompact:O,link:R,linkProps:S={},noIcon:H,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']}=m(null===(s=a.components)||void 0===s?void 0:s.Alert,e);var Z=l("Alert",F);var[$,oo]=r(!1);var eo=Boolean('l'===D||!!U||O&&(U||R||I||N));return v(C,{className:Z,clear:M,column:eo,isCompact:O,noIcon:H,onMouseEnter:()=>{Q&&oo(!0)},onMouseLeave:()=>{Q&&oo(!1)},ref:n,size:D,style:G,textWrap:K,type:X,width:Y,withAction:!!I||!!N,withCloseIcon:!!q,withImage:!!L,withLink:!!R,withTimer:!!Q,withTitle:!!U,children:[(!H||E)&&v(d,{column:eo,isCompact:O,withImage:!!L,children:[!H&&!Q&&!E&&!L&&j({isCompact:O,theme:a,type:X}),E&&z(u,{name:E,size:O?16:24}),L,Q&&z(f,{isCompact:O,paused:$,timer:Q,color:b({theme:a,type:X})})]}),v(y,{column:eo,isCompact:O,children:[U&&z(k,o(o({color:a.colors['content-onmain-primary'],isCompact:O,size:O?14:16,lineHeight:"m"},V),{},{children:U})),z(g,o(o({appearance:"body",color:a.colors['content-onmain-primary'],column:eo,isCompact:O,size:O?'xs':'s',textWrap:K},J),{},{children:B})),R&&z(w,{clear:M,column:eo,isCompact:O,withTitle:!!U,children:z(p,o(o({color:e.clear?a.colors['content-link']:a.colors['content-onmain-primary'],onClick:R.onClick,preset:"default",pseudo:!0,size:O?'s':'m'},S),{},{children:R.content}))}),(I||N)&&v(x,{column:eo,isCompact:O,withTitle:!!U,children:[N&&z(h,o(o({black:!0,fontWeight:"normal",onClick:N.onClick,outline:!0,preset:"brand",size:O?'xs':'s',margin:4},P),{},{children:N.content})),I&&z(h,o(o({black:!0,fontWeight:"normal",onClick:I.onClick,preset:"brand",size:O?'xs':'s',margin:4},W),{},{children:I.content}))]})]}),_&&z(A,{black:!0,clear:!0,fontWeight:"normal",isCompact:O,onClick:_,preset:"brand",size:O?'xs':'s',margin:4,children:c}),q&&(!O||!Q)&&z(T,{"aria-label":"close",onClick:q,type:"button",withTimer:!!Q,children:z(i,{color:a.colors['content-onmain-primary'],size:O?18:24})})]})}));W.displayName="Alert";export{W as Alert,I as COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\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'\n\nimport { Anchor } from '../Anchor'\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 = useTheme()\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 if (timer) {\n setTimerOnPause(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (timer) {\n setTimerOnPause(false)\n }\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={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 paused={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 appearance='body'\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n size={isCompact ? 'xs' : 's'}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link clear={clear} column={column} isCompact={isCompact} withTitle={!!title}>\n <Anchor\n color={props.clear ? theme.colors['content-link'] : theme.colors['content-onmain-primary']}\n onClick={link.onClick}\n preset='default'\n pseudo\n size={isCompact ? 's' : 'm'}\n {...linkProps}\n >\n {link.content}\n </Anchor>\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 <Button\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\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 && (isCompact ? !timer : true) && (\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","useTheme","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","paused","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","appearance","Styled.Link","Anchor","onClick","preset","pseudo","content","Styled.Actions","Button","black","fontWeight","marginRight","outline","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\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'\n\nimport { Anchor } from '../Anchor'\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 = useTheme()\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 if (timer) {\n setTimerOnPause(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (timer) {\n setTimerOnPause(false)\n }\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={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 paused={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 appearance='body'\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n size={isCompact ? 'xs' : 's'}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link clear={clear} column={column} isCompact={isCompact} withTitle={!!title}>\n <Anchor\n color={props.clear ? theme.colors['content-link'] : theme.colors['content-onmain-primary']}\n onClick={link.onClick}\n preset='default'\n pseudo\n size={isCompact ? 's' : 'm'}\n {...linkProps}\n >\n {link.content}\n </Anchor>\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 onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\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' : 's'}\n margin={4}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {closeToast && (isCompact ? !timer : true) && (\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","useTheme","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","paused","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","appearance","Styled.Link","Anchor","onClick","preset","pseudo","content","Styled.Actions","Button","black","fontWeight","outline","margin","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n from'styled-components';import{focus as o}from'../../mixins/focus.js';import{responsiveProperty as t}from'../../mixins/responsive-property.js';import{Button as i}from'../Button/Button.js';import{Text as c}from'../Text/Text.js';import{CountdownCircle as a}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 e=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var p=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).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:r}=n;return o?r||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':r||'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(o)return n.colors['bg-onmain-primary'];switch(t){case'error':return n.colors['alert-bg-error-200'];case'info':return n.colors['bg-brand-primary-200'];case'success':return n.colors['alert-bg-success-200'];case'warning':return n.colors['alert-bg-warning-200'];default:return n.colors['bg-oncolor-primary']}})(n.theme,!!n.clear,n.type),";\n box-shadow: ").concat(n.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none',";\n box-sizing: border-box;\n ")),t('width','width'));var s=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(e(n),";\n width: ").concat(e(n),";\n }\n "):null));var m=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 align-self: center;\n max-width: ").concat(n.column?'260px':'initial',";\n white-space: ").concat(n.column||n.isCompact?'normal':'nowrap',";\n overflow: hidden;\n ")));var l=n(c).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 x=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["",""],(n=>"\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 u=n.div.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 d=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
|
|
1
|
+
import n from'styled-components';import{focus as o}from'../../mixins/focus.js';import{responsiveProperty as t}from'../../mixins/responsive-property.js';import{Button as i}from'../Button/Button.js';import{Text as c}from'../Text/Text.js';import{CountdownCircle as a}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 e=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var p=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).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:r}=n;return o?r||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':r||'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(o)return n.colors['bg-onmain-primary'];switch(t){case'error':return n.colors['alert-bg-error-200'];case'info':return n.colors['bg-brand-primary-200'];case'success':return n.colors['alert-bg-success-200'];case'warning':return n.colors['alert-bg-warning-200'];default:return n.colors['bg-oncolor-primary']}})(n.theme,!!n.clear,n.type),";\n box-shadow: ").concat(n.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none',";\n box-sizing: border-box;\n ")),t('width','width'));var s=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(e(n),";\n width: ").concat(e(n),";\n }\n "):null));var m=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 align-self: center;\n max-width: ").concat(n.column?'260px':'initial',";\n white-space: ").concat(n.column||n.isCompact?'normal':'nowrap',";\n overflow: hidden;\n ")));var l=n(c).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 x=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["",""],(n=>"\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 u=n.div.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 d=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 g=n.button.withConfig({componentId:"fox-ui__sc-1v79u95-7"})([""," ",""],(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 border-radius: 50%;\n ")),o);var h=n(i).withConfig({componentId:"fox-ui__sc-1v79u95-8"})(["",""],(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 f=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-9"})(["",""],(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{d as Actions,h as CancelTimer,g as CloseIcon,x as Content,m as ContentWrapper,s as IconWrapper,u as Link,p as Root,f as Timer,l as Title};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +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'\nimport { focus } from 'mixins/focus'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\n\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 RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (theme: DefaultTheme, clear: boolean, type?: AlertType) => {\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 }\n\n return withImage ? '8px' : withTimer ? '2px' : '12px'\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 }\n\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n }\n\n return withImage ? '16px' : '20px'\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 }\n\n return withTimer ? '8px' : '20px'\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\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}\n\nexport const Root = styled.div.withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n})`\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.theme, !!props.clear, props.type)};\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\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 align-self: 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 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.div<LinkProps>`\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\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n\n && > button {\n margin-left: 0;\n }\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 border-radius: 50%;\n `}\n ${focus}\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","getImageSize","_ref5","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","concat","textWrap","paddingRight","_ref3","withCloseIcon","paddingLeft","_ref2","noIcon","size","withAction","withTitle","theme","clear","type","colors","responsiveProperty","IconWrapper","getMarginRightIconWrapper","_ref4","ContentWrapper","Title","Text","Content","Link","Actions","_ref6","CloseIcon","button","focus","CancelTimer","Button","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { focus } from 'mixins/focus'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\n\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 RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (theme: DefaultTheme, clear: boolean, type?: AlertType) => {\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 }\n\n return withImage ? '8px' : withTimer ? '2px' : '12px'\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 }\n\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n }\n\n return withImage ? '16px' : '20px'\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 }\n\n return withTimer ? '8px' : '20px'\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\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}\n\nexport const Root = styled.div.withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n})`\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.theme, !!props.clear, props.type)};\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\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 align-self: 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 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.div<LinkProps>`\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\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 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 border-radius: 50%;\n `}\n ${focus}\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","getImageSize","_ref5","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","concat","textWrap","paddingRight","_ref3","withCloseIcon","paddingLeft","_ref2","noIcon","size","withAction","withTitle","theme","clear","type","colors","responsiveProperty","IconWrapper","getMarginRightIconWrapper","_ref4","ContentWrapper","Title","Text","Content","Link","Actions","_ref6","CloseIcon","button","focus","CancelTimer","Button","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledBaseInputProps, StyledInputProps, StyledInputControlsProps, InputPalette } from './types'\n\nconst template = (\n palette: Pick<\n InputPalette,\n | 'inputColor'\n | 'inputPlaceholderColor'\n | 'inputColorDisabled'\n | 'inputColorDisabled'\n | 'inputPlaceholderColorDisabled'\n >\n) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (\n palette: Pick<\n InputPalette,\n | 'controlsColor'\n | 'controlsBackgroundColor'\n | 'controlsColorHover'\n | 'controlsBackgroundColorHover'\n | 'controlsColorActive'\n | 'controlsBackgroundColorActive'\n | 'controlsColorDisabled'\n | 'controlsBackgroundColorDisabled'\n | 'controlsSeparatorColor'\n >\n) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","componentId","Input","propKey","opacity","paddingTop","label","labelPosition","concat","active","template","palette","_objectSpread","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledBaseInputProps, StyledInputProps, StyledInputControlsProps, InputPalette } from './types'\n\nconst template = (\n palette: Pick<\n InputPalette,\n 'inputColor' | 'inputPlaceholderColor' | 'inputColorDisabled' | 'inputPlaceholderColorDisabled'\n >\n) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (\n palette: Pick<\n InputPalette,\n | 'controlsColor'\n | 'controlsBackgroundColor'\n | 'controlsColorHover'\n | 'controlsBackgroundColorHover'\n | 'controlsColorActive'\n | 'controlsBackgroundColorActive'\n | 'controlsColorDisabled'\n | 'controlsBackgroundColorDisabled'\n | 'controlsSeparatorColor'\n >\n) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","componentId","Input","propKey","opacity","paddingTop","label","labelPosition","concat","active","template","palette","_objectSpread","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1618,6 +1618,8 @@ interface SwitcherProps extends ColorProperty<'color'>, ColorProperty<'inactiveC
|
|
|
1618
1618
|
preset?: ThemePreset;
|
|
1619
1619
|
/** Input id */
|
|
1620
1620
|
id?: string;
|
|
1621
|
+
/** Class attribute */
|
|
1622
|
+
className?: string;
|
|
1621
1623
|
/** Input name */
|
|
1622
1624
|
name?: string;
|
|
1623
1625
|
/** Input value */
|