@foxford/ui 2.6.0-beta-a4621ec-20230707 → 2.6.0-beta-01c6423-20230713

package/components/Alert/Alert.js

@@ -1,2 +1,2 @@
-import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e}from'react';import{Close as r,WarningTriangleFill as t,CheckCircleFill as i,NotifFill as n,CloseCirlceFill as s}from'@foxford/icon-pack';import{useClassname as c}from'../../hooks/useClassname.js';import{useConfigPriority as a}from'../../hooks/use-config-priority.js';import{useFallbackTheme as l}from'../../hooks/use-theme.js';import{Icon as m}from'../Icon/Icon.js';import'../Icon/icons.js';import{countdownColor as p}from'./parts/CountdownCircle.js';import{Root as h,IconWrapper as C,Timer as u,ContentWrapper as d,Title as f,Content as y,Link as k,Actions as w,SecondaryAction as g,PrimaryAction as x,CancelTimer as b,CloseIcon as T}from'./style.js';import{jsxs as A,jsx as v}from'react/jsx-runtime';var z=o=>{var{isCompact:e,theme:r,type:c}=o;var a=e?16:24;switch(c){case'error':return v(s,{color:r.colors['alert-bg-error-500'],size:a});case'info':return v(n,{color:r.colors['content-brand-primary'],size:a});case'success':return v(i,{color:r.colors['alert-success'],size:a});case'warning':return v(t,{color:r.colors['alert-warning'],size:a});default:return null}};var I='Alert';var j=e(((e,t)=>{var i;var n=l();var{cancelTimerText:s="Отменить",primaryAction:I,primaryActionProps:j,secondaryAction:W,secondaryActionProps:P,children:N,className:F,clear:E=!1,content:H,customIcon:L,image:M,isCompact:O=!1,link:R,linkProps:S,noIcon:B=!1,onClickCancelTimer:_,closeToast:q,style:D,textProps:G,textWrap:J=!1,timer:K,title:Q,titleProps:U,type:V,width:X=['fit-content','fit-content','fit-content','351px','304px','304px']}=a(null===(i=n.components)||void 0===i?void 0:i.Alert,e);var Y=c("Alert",F);var Z=Boolean(!!Q||O&&(Q||R||I||W));return A(h,{className:Y,clear:E,column:Z,isCompact:O,noIcon:B,ref:t,style:D,textWrap:J,type:V,width:X,withAction:!!I||!!W,withCloseIcon:!!q,withImage:!!M,withLink:!!R,withTimer:!!K,withTitle:!!Q,children:[(!B||L)&&A(C,{column:Z,isCompact:O,withImage:!!M,children:[!B&&!K&&!L&&!M&&z({isCompact:O,theme:n,type:V}),L&&v(m,{name:L,size:O?16:24}),M,K&&v(u,{isCompact:O,timer:K,color:p({theme:n,type:V})})]}),A(d,{column:Z,isCompact:O,children:[Q&&v(f,o({color:n.colors['content-onmain-primary'],content:Q,isCompact:O,size:O?14:16,lineHeight:"m"},U)),v(y,o(o({color:n.colors['content-onmain-primary'],column:Z,content:'string'==typeof H?H:void 0,isCompact:O,lineHeight:"s",size:O?14:16,textWrap:J},G),{},{children:N||H})),R&&v(k,o(o({clear:E,column:Z,isCompact:O,onClick:R.onClick,preset:"brand",pseudo:!0,size:O?'s':'m',withTitle:!!Q},S),{},{children:R.content})),(I||W)&&A(w,{column:Z,isCompact:O,withTitle:!!Q,children:[W&&v(g,o(o({black:!0,column:Z,fontWeight:"normal",onClick:W.onClick,outline:!0,preset:"brand",size:"xs"},P),{},{children:W.content})),I&&v(x,o(o({black:!0,fontWeight:"normal",onClick:I.onClick,preset:"brand",size:"xs"},j),{},{children:I.content}))]})]}),_&&v(b,{black:!0,clear:!0,fontWeight:"normal",isCompact:O,onClick:_,preset:"brand",size:O?'xs':'m',children:s}),!q||K&&O?null:v(T,{"aria-label":"close",onClick:q,type:"button",withTimer:!!K,children:v(r,{color:n.colors['content-onmain-primary'],size:O?18:24})})]})}));j.displayName="Alert";export{j as Alert,I as COMPONENT_NAME};
+import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e}from'react';import{Close as r,WarningTriangleFill as t,CheckCircleFill as i,NotifFill as n,CloseCirlceFill as s}from'@foxford/icon-pack';import{useClassname as a}from'../../hooks/useClassname.js';import{useConfigPriority as c}from'../../hooks/use-config-priority.js';import{useFallbackTheme as l}from'../../hooks/use-theme.js';import{Icon as m}from'../Icon/Icon.js';import'../Icon/icons.js';import{countdownColor as p}from'./CountdownCircle.js';import{Root as h,IconWrapper as C,Timer as u,ContentWrapper as d,Title as f,Content as k,Link as y,Actions as w,SecondaryAction as b,PrimaryAction as g,CancelTimer as x,CloseIcon as T}from'./style.js';import{jsxs as z,jsx as A}from'react/jsx-runtime';var v=o=>{var{isCompact:e,theme:r,type:a}=o;var c=e?16:24;switch(a){case'error':return A(s,{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(i,{color:r.colors['alert-success'],size:c});case'warning':return A(t,{color:r.colors['alert-warning'],size:c});default:return null}};var I='Alert';var j=e(((e,t)=>{var i;var n=l();var{cancelTimerText:s="Отменить",primaryAction:I,primaryActionProps:j,secondaryAction:W,secondaryActionProps:P,children:N,className:F,clear:E,customIcon:H,image:L,isCompact:M,link:O,linkProps:R,noIcon:S,onClickCancelTimer:B,closeToast:_,size:q="small",style:D,textProps:G,textWrap:J,timer:K,title:Q,titleProps:U,type:V,width:X=['fit-content','fit-content','fit-content','351px','304px','304px']}=c(null===(i=n.components)||void 0===i?void 0:i.Alert,e);var Y=a("Alert",F);var Z=Boolean('big'===q||!!Q||M&&(Q||O||I||W));return z(h,{className:Y,clear:E,column:Z,isCompact:M,noIcon:S,ref:t,size:q,style:D,textWrap:J,type:V,width:X,withAction:!!I||!!W,withCloseIcon:!!_,withImage:!!L,withLink:!!O,withTimer:!!K,withTitle:!!Q,children:[(!S||H)&&z(C,{column:Z,isCompact:M,withImage:!!L,children:[!S&&!K&&!H&&!L&&v({isCompact:M,theme:n,type:V}),H&&A(m,{name:H,size:M?16:24}),L,K&&A(u,{isCompact:M,timer:K,color:p({theme:n,type:V})})]}),z(d,{column:Z,isCompact:M,children:[Q&&A(f,o(o({color:n.colors['content-onmain-primary'],isCompact:M,size:M?14:16,lineHeight:"m"},U),{},{children:Q})),A(k,o(o({color:n.colors['content-onmain-primary'],column:Z,isCompact:M,lineHeight:"s",size:M?14:16,textWrap:J},G),{},{children:N})),O&&A(y,o(o({clear:E,column:Z,isCompact:M,onClick:O.onClick,preset:"brand",pseudo:!0,size:M?'s':'m',withTitle:!!Q},R),{},{children:O.content})),(I||W)&&z(w,{column:Z,isCompact:M,withTitle:!!Q,children:[W&&A(b,o(o({black:!0,column:Z,fontWeight:"normal",onClick:W.onClick,outline:!0,preset:"brand",size:"xs"},P),{},{children:W.content})),I&&A(g,o(o({black:!0,fontWeight:"normal",onClick:I.onClick,preset:"brand",size:"xs"},j),{},{children:I.content}))]})]}),B&&A(x,{black:!0,clear:!0,fontWeight:"normal",isCompact:M,onClick:B,preset:"brand",size:M?'xs':'m',children:s}),!_||K&&M?null:A(T,{"aria-label":"close",onClick:_,type:"button",withTimer:!!K,children:A(r,{color:n.colors['content-onmain-primary'],size:M?18:24})})]})}));j.displayName="Alert";export{j as Alert,I as COMPONENT_NAME};
 //# sourceMappingURL=Alert.js.map

package/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\n\nimport { useConfigPriority } from '../../hooks/use-config-priority'\nimport { useFallbackTheme } from '../../hooks/use-theme'\n\nimport { Icon } from '../Icon'\n\nimport { countdownColor } from './parts/CountdownCircle'\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\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 = false,\n    content,\n    customIcon,\n    image,\n    isCompact = false,\n    link,\n    linkProps,\n    noIcon = false,\n    onClickCancelTimer,\n    closeToast,\n    style,\n    textProps,\n    textWrap = false,\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\n  const column = Boolean(!!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n  return (\n    <Styled.Root\n      className={_className}\n      clear={clear}\n      column={column}\n      isCompact={isCompact}\n      noIcon={noIcon}\n      ref={ref}\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 && <Styled.Timer isCompact={isCompact} timer={timer} color={countdownColor({ theme, type })} />}\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            content={title}\n            isCompact={isCompact}\n            size={isCompact ? 14 : 16}\n            lineHeight='m'\n            {...titleProps}\n          />\n        )}\n\n        <Styled.Content\n          color={theme.colors['content-onmain-primary']}\n          column={column}\n          content={typeof content === 'string' ? content : undefined}\n          isCompact={isCompact}\n          lineHeight='s'\n          size={isCompact ? 14 : 16}\n          textWrap={textWrap}\n          {...textProps}\n        >\n          {children || content}\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              <Styled.SecondaryAction\n                black\n                column={column}\n                fontWeight='normal'\n                onClick={secondaryAction.onClick}\n                outline\n                preset='brand'\n                size='xs'\n                {...secondaryActionProps}\n              >\n                {secondaryAction.content}\n              </Styled.SecondaryAction>\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","content","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","column","Boolean","_jsxs","Styled.Root","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Styled.IconWrapper","Icon","name","Styled.Timer","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","Styled.Link","onClick","preset","pseudo","Styled.Actions","Styled.SecondaryAction","black","fontWeight","outline","Styled.PrimaryAction","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\n\nimport { useConfigPriority } from '../../hooks/use-config-priority'\nimport { useFallbackTheme } from '../../hooks/use-theme'\n\nimport { Icon } from '../Icon'\n\nimport { countdownColor } from './CountdownCircle'\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\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 = 'small',\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\n  const column = Boolean(\n    size === 'big' || !!title || (isCompact && (title || link || primaryAction || secondaryAction))\n  )\n\n  return (\n    <Styled.Root\n      className={_className}\n      clear={clear}\n      column={column}\n      isCompact={isCompact}\n      noIcon={noIcon}\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 && <Styled.Timer isCompact={isCompact} timer={timer} color={countdownColor({ theme, type })} />}\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              <Styled.SecondaryAction\n                black\n                column={column}\n                fontWeight='normal'\n                onClick={secondaryAction.onClick}\n                outline\n                preset='brand'\n                size='xs'\n                {...secondaryActionProps}\n              >\n                {secondaryAction.content}\n              </Styled.SecondaryAction>\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","column","Boolean","_jsxs","Styled.Root","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Styled.IconWrapper","Icon","name","Styled.Timer","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","Styled.Link","onClick","preset","pseudo","content","Styled.Actions","Styled.SecondaryAction","black","fontWeight","outline","Styled.PrimaryAction","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}

package/components/Alert/CountdownCircle.js

@@ -0,0 +1,2 @@
+import{useState as r,useEffect as e}from'react';import{Progress as s}from'../Progress/Progress.js';import{jsx as t}from'react/jsx-runtime';var a=r=>{var{theme:e,type:s}=r;switch(s){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']}};var o=a=>{var{className:o,color:n,isCompact:c,timer:l}=a;var[i,u]=r(l);e((()=>{var r=setInterval((()=>{u((e=>e<=.05?(clearInterval(r),e):e-.05))}),50);return()=>{clearInterval(r)}}),[]);var m=i/l*100;return t(s.Circle,{className:o,content:Math.ceil(i),progress:m,progressStartAngle:0,resultColor:n,size:c?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5})};o.displayName='CountdownCircle';export{o as CountdownCircle,a as countdownColor};
+//# sourceMappingURL=CountdownCircle.js.map

package/components/Alert/CountdownCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { DefaultTheme } from 'styled-components'\n\nimport { ColorValue } from '../../mixins/color'\n\nimport { Progress } from '../Progress'\n\nimport { AlertProps, CountdownCircleProps } from './types'\n\nconst 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\nconst COMPONENT_NAME = 'CountdownCircle'\n\nconst CountdownCircle = ({ className, color, isCompact, timer }: CountdownCircleProps) => {\n  const [countdown, setCountdown] = useState(timer)\n\n  useEffect(() => {\n    const progressRate = 0.05\n    const intervalId = setInterval(() => {\n      setCountdown((prevCountdown) => {\n        if (prevCountdown <= progressRate) {\n          clearInterval(intervalId)\n          return prevCountdown\n        }\n\n        return prevCountdown - progressRate\n      })\n    }, progressRate * 1000)\n\n    return () => {\n      clearInterval(intervalId)\n    }\n  }, [])\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\nCountdownCircle.displayName = COMPONENT_NAME\n\nexport { CountdownCircle, countdownColor }\n"],"names":["countdownColor","_ref","theme","type","colors","CountdownCircle","_ref2","className","color","isCompact","timer","countdown","setCountdown","useState","useEffect","intervalId","setInterval","prevCountdown","clearInterval","progressRate","progress","_jsx","Progress","Circle","content","Math","ceil","progressStartAngle","resultColor","size","strokeBGColor","strokeLineWidth","displayName"],"mappings":"2IASMA,IAAAA,EAAiBC,IAAqF,IAApFC,MAAEA,EAAFC,KAASA,GAA2EF,EAC1G,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,mBAQpBC,IAAAA,EAAkBC,IAAkE,IAAjEC,UAAEA,EAAFC,MAAaA,EAAbC,UAAoBA,EAApBC,MAA+BA,GAAkCJ,EACxF,IAAOK,EAAWC,GAAgBC,EAASH,GAE3CI,GAAU,KAER,IAAMC,EAAaC,kBACjBJ,GAAcK,GACRA,GAHa,KAIfC,cAAcH,GACPE,GAGFA,EARU,QAUlBE,IAEH,MAAO,KACLD,cAAcH,MAEf,IAEH,IAAMK,EAAYT,EAAYD,EAAS,IAEvC,OACEW,EAACC,EAASC,OAAV,CACEhB,UAAWA,EACXiB,QAASC,KAAKC,KAAKf,GACnBS,SAAUA,EACVO,mBAAoB,EACpBC,YAAapB,EACbqB,KAAMpB,EAAY,GAAK,GACvBqB,cAAc,cACdC,gBAAiB,OAKvB1B,EAAgB2B,YAvCO"}

package/components/Alert/style.js

@@ -1,2 +1,2 @@
-import o,{css as t}from'styled-components';import{responsiveProperty as i}from'../../mixins/responsive-property.js';import{injectDefaultTheme as r}from'../../shared/utils/inject-theme.js';import{Anchor as n}from'../Anchor/Anchor.js';import{Button as e}from'../Button/Button.js';import{Text as a}from'../Text/Text.js';import{CountdownCircle as p}from'./parts/CountdownCircle.js';var c=o=>{var{column:t,isCompact:i,withImage:r,withTimer:n}=o;return t?'16px':i?n?'5px':'12px':r?'8px':n?'2px':'12px'};var s=o.div.withConfig({shouldForwardProp:o=>['children','className','style'].includes(o)}).attrs(r).withConfig({componentId:"fox-ui__sc-1v79u95-0"})(["display:flex;align-items:",";justify-content:",";padding-top:",";padding-right:",";padding-bottom:",";padding-left:",";height:",";min-width:",";max-width:100%;border-radius:",";background-color:",";box-shadow:",";box-sizing:border-box;",""],(o=>o.column||(o.isCompact?!o.withTimer:o.textWrap)?'flex-start':'center'),(o=>o.withTimer?'space-between':'flex-start'),(o=>c(o)),(o=>(o=>{var{isCompact:t,withCloseIcon:i,withTimer:r}=o;return i?t?'12px':'16px':r?'8px':'20px'})(o)),(o=>c(o)),(o=>(o=>{var{isCompact:t,noIcon:i,withAction:r,withImage:n,withTitle:e}=o;return t?e?n||!i?'16px':'20px':n?'12px':r&&i?'20px':'16px':e?n||!i?'16px':'24px':n?'16px':'20px'})(o)),(o=>o.isCompact||o.column||o.textWrap?'auto':'48px'),(o=>"".concat(o.isCompact?'304px':'auto')),(o=>o.column?o.isCompact?'20px':'12px':'30px'),(o=>((o,t,i)=>{if(i)return'dark'===t.mode?t.colors['bg-onmain-primary']:t.colors['bg-oncolor-primary'];switch(o){case'error':return t.colors['alert-bg-error-200'];case'info':return t.colors['bg-brand-primary-200'];case'success':return t.colors['alert-bg-success-200'];case'warning':return t.colors['alert-bg-warning-200'];default:return t.colors['bg-oncolor-primary']}})(o.type,o.theme,!!o.clear)),(o=>o.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none'),i('width','width'));var m=o=>{var{column:t,isCompact:i}=o;return i?'20px':t?'28px':'32px'};var l=o.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})(["display:flex;margin-right:",";",";"],(o=>(o=>{var{column:t,isCompact:i,withImage:r}=o;return i?'8px':t?r?'8px':'12px':'8px'})(o)),(o=>o.withImage?t(["img,svg{height:",";width:",";}"],(o=>m(o)),(o=>m(o))):null));var x=o.div.withConfig({componentId:"fox-ui__sc-1v79u95-2"})(["display:flex;margin-right:auto;flex-direction:",";align-items:",";max-width:",";white-space:",";overflow:hidden;"],(o=>o.column?'column':'row'),(o=>o.column?'flex-start':'center'),(o=>o.column?'260px':'initial'),(o=>o.column||o.isCompact?'normal':'nowrap'));var u=o(a).withConfig({componentId:"fox-ui__sc-1v79u95-3"})(["display:inline-block;margin-top:",";margin-bottom:8px;max-width:100%;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden;"],(o=>o.isCompact?'0':'2px'));var d=o(a).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["line-height:",";text-overflow:",";white-space:",";overflow:hidden;"],(o=>o.isCompact?'18px':'20px'),(o=>o.column||o.isCompact?'clip':'ellipsis'),(o=>o.column||o.isCompact||o.textWrap?'pre-wrap':'inherit'));var h=o(n).withConfig({componentId:"fox-ui__sc-1v79u95-5"})(["display:flex;margin-top:",";margin-left:",";color:",";"],(o=>o.column?o.isCompact&&!o.withTitle?'4px':'12px':0),(o=>o.column?0:'60px'),(o=>o.clear?o.theme.colors['content-link']:o.theme.colors['content-onmain-primary']));var g=o.div.withConfig({componentId:"fox-ui__sc-1v79u95-6"})(["margin-top:",";margin-left:",";"],(o=>(o=>{var{column:t,isCompact:i,withTitle:r}=o;return t?i?r?'16px':'8px':'16px':0})(o)),(o=>o.column?0:'60px'));var f=o(e).withConfig({componentId:"fox-ui__sc-1v79u95-7"})(["margin-right:",";"],(o=>o.column?'4px':'8px'));var w=o(e).withConfig({componentId:"fox-ui__sc-1v79u95-8"})(["margin-left:0 !important;background-color:",";color:",";"],(o=>{return'dark'===(t=o.theme).mode?t.colors['bg-onmain-inverse']:t.colors['bg-onmain-contrast'];var t}),(o=>{return'dark'===(t=o.theme).mode?t.colors['content-oncolor-constant']:t.colors['content-oncolor-primary'];var t}));var v=o.button.withConfig({componentId:"fox-ui__sc-1v79u95-9"})(["-webkit-appearance:none;display:flex;margin-left:",";border-radius:0;text-align:inherit;background:none;box-shadow:none;padding:0;border:none;color:inherit;font:inherit;cursor:pointer;outline:none;&:focus-visible{outline:",";outline-offset:2px;}"],(o=>o.withTimer?'0':'16px'),(o=>"1px solid ".concat(o.theme.colors.accent)));var C=o(e).withConfig({componentId:"fox-ui__sc-1v79u95-10"})(["margin-left:",";padding-right:",";padding-left:",";"],(o=>o.isCompact?'28px':'60px'),(o=>o.isCompact?'16px':'28px'),(o=>o.isCompact?'16px':'28px'));var b=o(p).withConfig({componentId:"fox-ui__sc-1v79u95-11"})(["line-height:",";font-weight:",";font-size:",";color:",";svg{transform:rotateY(180deg);}"],(o=>o.isCompact?'12px':'18px'),(o=>o.isCompact?'700':'400'),(o=>o.isCompact?'11px':'14px'),(o=>o.color));export{g as Actions,C as CancelTimer,v as CloseIcon,d as Content,x as ContentWrapper,l as IconWrapper,h as Link,w as PrimaryAction,s as Root,f as SecondaryAction,b as Timer,u as Title};
+import n,{css as o}from'styled-components';import{responsiveProperty as t}from'../../mixins/responsive-property.js';import{injectDefaultTheme as c}from'../../shared/utils/inject-theme.js';import{Anchor as i}from'../Anchor/Anchor.js';import{Button as r}from'../Button/Button.js';import{Text as a}from'../Text/Text.js';import{CountdownCircle as e}from'./CountdownCircle.js';var p=n=>{var{column:o,isCompact:t,withImage:c,withTimer:i}=n;return o?'16px':t?i?'5px':'12px':c?'8px':i?'2px':'12px'};var s=n.div.withConfig({shouldForwardProp:n=>['children','className','style'].includes(n)}).attrs(c).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(p(n),";\n    padding-right: ").concat((n=>{var{isCompact:o,withCloseIcon:t,withTimer:c}=n;return t?o?'12px':'16px':c?'8px':'20px'})(n),";\n    padding-bottom: ").concat(p(n),";\n    padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:c,withAction:i,withImage:r,withTitle:a}=n;return o?a||'big'===c?r||!t?'16px':'20px':r?'12px':i&&t?'20px':'16px':a||'big'===c?r||!t?'16px':'24px':r?'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: 100%;\n    border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n    background-color: ").concat(((n,o,t)=>{if(t)return'dark'===o.mode?o.colors['bg-onmain-primary']:o.colors['bg-oncolor-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  ")),t('width','width'));var m=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var l=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})([""," ",";"],(n=>"\n    display: flex;\n    margin-right: ".concat((n=>{var{column:o,isCompact:t,withImage:c}=n;return t?'8px':o?c?'8px':'12px':'8px'})(n),";\n  ")),(n=>n.withImage?o(["img,svg{height:",";width:",";}"],(n=>m(n)),(n=>m(n))):null));var x=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 u=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 d=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 h=n(i).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 g=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-6"})(["",""],(n=>"\n     margin-top: ".concat((n=>{var{column:o,isCompact:t,withTitle:c}=n;return o?t?c?'16px':'8px':'16px':0})(n),";\n     margin-left: ").concat(n.column?0:'60px',";\n  ")));var f=n(r).withConfig({componentId:"fox-ui__sc-1v79u95-7"})(["",""],(n=>"\n    margin-right: ".concat(n.column?'4px':'8px',";\n  ")));var w=n(r).withConfig({componentId:"fox-ui__sc-1v79u95-8"})(["",""],(n=>{return"\n    margin-left: 0 !important;\n    background-color: ".concat((o=n.theme,'dark'===o.mode?o.colors['bg-onmain-inverse']:o.colors['bg-onmain-contrast']),";\n    color: ").concat((n=>'dark'===n.mode?n.colors['content-oncolor-constant']:n.colors['content-oncolor-primary'])(n.theme),";\n  ");var o}));var v=n.button.withConfig({componentId:"fox-ui__sc-1v79u95-9"})(["",""],(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 C=n(r).withConfig({componentId:"fox-ui__sc-1v79u95-10"})(["",""],(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 b=n(e).withConfig({componentId:"fox-ui__sc-1v79u95-11"})(["",""],(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{g as Actions,C as CancelTimer,v as CloseIcon,d as Content,x as ContentWrapper,l as IconWrapper,h as Link,w as PrimaryAction,s as Root,f as SecondaryAction,b as Timer,u as Title};
 //# sourceMappingURL=style.js.map

package/components/Alert/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css, 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 type { AnchorProps } from '../Anchor'\nimport type { ButtonProps } from '../Button'\nimport type { TextProps } from '../Text'\n\nimport { CountdownCircle } from './parts/CountdownCircle'\n\nimport type { AlertType, CountdownCircleProps, ExtendedAlertProps } from './types'\n\nconst bgColor = (type: AlertType | undefined, theme: DefaultTheme, clear: boolean) => {\n  if (clear) {\n    return theme.mode === 'dark' ? theme.colors['bg-onmain-primary'] : theme.colors['bg-oncolor-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 buttonBgColor = (theme: DefaultTheme) => {\n  return theme.mode === 'dark' ? theme.colors['bg-onmain-inverse'] : theme.colors['bg-onmain-contrast']\n}\n\nconst buttonColor = (theme: DefaultTheme) => {\n  return theme.mode === 'dark' ? theme.colors['content-oncolor-constant'] : theme.colors['content-oncolor-primary']\n}\n\nconst getPaddingY = ({\n  column,\n  isCompact,\n  withImage,\n  withTimer,\n}: Pick<ExtendedAlertProps, '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  withAction,\n  withImage,\n  withTitle,\n}: Pick<ExtendedAlertProps, 'isCompact' | 'noIcon' | 'withAction' | 'withImage' | 'withTitle'>) => {\n  if (isCompact) {\n    if (withTitle) {\n      return withImage || !noIcon ? '16px' : '20px'\n    } else {\n      return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n    }\n  } else {\n    if (withTitle) {\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<ExtendedAlertProps, '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<ExtendedAlertProps>({\n    shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n  })\n  .attrs(injectDefaultTheme)`\n  display: flex;\n  align-items: ${(props) =>\n    props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n  justify-content: ${(props) => (props.withTimer ? 'space-between' : 'flex-start')};\n  padding-top: ${(props) => getPaddingY(props)};\n  padding-right: ${(props) => paddingRight(props)};\n  padding-bottom: ${(props) => getPaddingY(props)};\n  padding-left: ${(props) => paddingLeft(props)};\n  height: ${(props) => (props.isCompact || props.column || props.textWrap ? 'auto' : '48px')};\n  min-width: ${(props) => `${props.isCompact ? '304px' : 'auto'}`};\n  max-width: 100%;\n  border-radius: ${(props) => (props.column ? (props.isCompact ? '20px' : '12px') : '30px')};\n  background-color: ${(props) => bgColor(props.type, props.theme, !!props.clear)};\n  box-shadow: ${(props) => (props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none')};\n  box-sizing: border-box;\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<{\n  column: boolean\n  isCompact: boolean\n  withImage: boolean\n}>`\n  display: flex;\n  margin-right: ${(props) => getMarginRightIconWrapper(props)};\n\n  ${(props) =>\n    props.withImage\n      ? css`\n          img,\n          svg {\n            height: ${(props: { column: boolean; isCompact: boolean }) => getImageSize(props)};\n            width: ${(props: { column: boolean; isCompact: boolean }) => getImageSize(props)};\n          }\n        `\n      : null};\n`\n\nexport const ContentWrapper = styled.div<{\n  column?: boolean\n  isCompact?: boolean\n}>`\n  display: flex;\n  margin-right: auto;\n  flex-direction: ${(props) => (props.column ? 'column' : 'row')};\n  align-items: ${(props) => (props.column ? 'flex-start' : 'center')};\n  max-width: ${(props) => (props.column ? '260px' : 'initial')};\n  white-space: ${(props) => (props.column || props.isCompact ? 'normal' : 'nowrap')};\n  overflow: hidden;\n`\n\nexport const Title = styled(Text)<TextProps & { isCompact: boolean }>`\n  display: inline-block;\n  margin-top: ${(props) => (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\nexport const Content = styled(Text)<TextProps & { column: boolean; isCompact: boolean; textWrap: boolean }>`\n  line-height: ${(props) => (props.isCompact ? '18px' : '20px')};\n  text-overflow: ${(props) => (props.column || props.isCompact ? 'clip' : 'ellipsis')};\n  white-space: ${(props) => (props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit')};\n  overflow: hidden;\n`\n\nexport const Link = styled(Anchor)<\n  AnchorProps & { clear: boolean; column: boolean; isCompact: boolean; withTitle: boolean }\n>`\n  display: flex;\n  margin-top: ${(props) => (props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0)};\n  margin-left: ${(props) => (props.column ? 0 : '60px')};\n  color: ${(props) =>\n    props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n`\n\nconst getActionsMarginTop = ({\n  column,\n  isCompact,\n  withTitle,\n}: Pick<ExtendedAlertProps, 'column' | 'isCompact' | 'withTitle'>) => {\n  if (column) {\n    return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n  } else {\n    return 0\n  }\n}\nexport const Actions = styled.div<{ column: boolean; isCompact: boolean; withTitle: boolean }>`\n  margin-top: ${(props) => getActionsMarginTop(props)};\n  margin-left: ${(props) => (props.column ? 0 : '60px')};\n`\n\nexport const SecondaryAction = styled(Button)<ButtonProps & { column: boolean }>`\n  margin-right: ${(props) => (props.column ? '4px' : '8px')};\n`\n\nexport const PrimaryAction = styled(Button)<ButtonProps>`\n  margin-left: 0 !important;\n  background-color: ${(props) => buttonBgColor(props.theme)};\n  color: ${(props) => buttonColor(props.theme)};\n`\n\nexport const CloseIcon = styled.button<{ withTimer: boolean }>`\n  -webkit-appearance: none;\n  display: flex;\n  margin-left: ${(props) => (props.withTimer ? '0' : '16px')};\n  border-radius: 0;\n  text-align: inherit;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  border: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  &:focus-visible {\n    outline: ${(props) => `1px solid ${props.theme.colors.accent}`};\n    outline-offset: 2px;\n  }\n`\n\nexport const CancelTimer = styled(Button)<ButtonProps & { isCompact: boolean }>`\n  margin-left: ${(props) => (props.isCompact ? '28px' : '60px')};\n  padding-right: ${(props) => (props.isCompact ? '16px' : '28px')};\n  padding-left: ${(props) => (props.isCompact ? '16px' : '28px')};\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n  line-height: ${(props) => (props.isCompact ? '12px' : '18px')};\n  font-weight: ${(props) => (props.isCompact ? '700' : '400')};\n  font-size: ${(props) => (props.isCompact ? '11px' : '14px')};\n  color: ${(props) => props.color};\n\n  svg {\n    transform: rotateY(180deg);\n  }\n`\n"],"names":["getPaddingY","_ref","column","isCompact","withImage","withTimer","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","textWrap","_ref3","withCloseIcon","_ref2","noIcon","withAction","withTitle","concat","type","theme","clear","mode","colors","responsiveProperty","getImageSize","_ref5","IconWrapper","_ref4","css","ContentWrapper","Title","Text","Content","Link","Anchor","Actions","_ref6","SecondaryAction","Button","PrimaryAction","buttonBgColor","buttonColor","CloseIcon","button","accent","CancelTimer","Timer","CountdownCircle","color"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css, 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 { AlertType, CountdownCircleProps, RootAlertProps } from './types'\nimport {\n  ActionsProps,\n  CancelTimerProps,\n  CloseIconProps,\n  ContentProps,\n  ContentWrapperProps,\n  IconWrapperProps,\n  LinkProps,\n  PrimaryActionProps,\n  SecondaryActionProps,\n  TitleProps,\n} from './types'\n\nconst bgColor = (type: AlertType | undefined, theme: DefaultTheme, clear: boolean) => {\n  if (clear) {\n    return theme.mode === 'dark' ? theme.colors['bg-onmain-primary'] : theme.colors['bg-oncolor-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 buttonBgColor = (theme: DefaultTheme) => {\n  return theme.mode === 'dark' ? theme.colors['bg-onmain-inverse'] : theme.colors['bg-onmain-contrast']\n}\n\nconst buttonColor = (theme: DefaultTheme) => {\n  return theme.mode === 'dark' ? theme.colors['content-oncolor-constant'] : theme.colors['content-oncolor-primary']\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 === 'big') {\n      return withImage || !noIcon ? '16px' : '20px'\n    } else {\n      return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n    }\n  } else {\n    if (withTitle || size === 'big') {\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', '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: 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      ? css`\n          img,\n          svg {\n            height: ${(props: { column: boolean; isCompact?: boolean }) => getImageSize(props)};\n            width: ${(props: { column: boolean; isCompact?: boolean }) => 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)<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\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  } else {\n    return 0\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 SecondaryAction = styled(Button)<SecondaryActionProps>`\n  ${(props) => `\n    margin-right: ${props.column ? '4px' : '8px'};\n  `}\n`\n\nexport const PrimaryAction = styled(Button)<PrimaryActionProps>`\n  ${(props) => `\n    margin-left: 0 !important;\n    background-color: ${buttonBgColor(props.theme)};\n    color: ${buttonColor(props.theme)};\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","textWrap","concat","_ref3","withCloseIcon","_ref2","noIcon","size","withAction","withTitle","type","theme","clear","mode","colors","responsiveProperty","getImageSize","_ref5","IconWrapper","_ref4","css","ContentWrapper","Title","Text","Content","Link","Anchor","Actions","_ref6","SecondaryAction","Button","PrimaryAction","buttonBgColor","buttonColor","CloseIcon","button","accent","CancelTimer","Timer","CountdownCircle","color"],"mappings":"oXAoDA,IAAMA,EAAcC,IAK4D,IAL3DC,OACnBA,EADmBC,UAEnBA,EAFmBC,UAGnBA,EAHmBC,UAInBA,GAC8EJ,EAC9E,OAAIC,EAAe,OAEfC,EACKE,EAAY,MAAQ,OAEpBD,EAAY,MAAQC,EAAY,MAAQ,QAuC5C,IAAMC,EAAOC,EAAOC,IACxBC,WAA2B,CAC1BC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KAE1EE,MAAMC,GAJQL,WAAA,CAAAM,YAAA,wBAAGR,CAKfS,CAAAA,GAAAA,IAAAA,KAAAA,GAEcA,0CAAAA,OAAAA,EAAMd,SAAWc,EAAMb,WAAaa,EAAMX,UAAYW,EAAMC,UAAY,aAAe,SAFtG,4BAAAC,OAGmBF,EAAMX,UAAY,gBAAkB,aACxCL,wBAAAA,OAAAA,EAAYgB,GAJ3B,0BAAAE,OAjBiBC,CAAAA,IAIoD,IAJnDhB,UACpBA,EADoBiB,cAEpBA,EAFoBf,UAGpBA,GACuEc,EACvE,OAAIC,EACKjB,EAAY,OAAS,OAErBE,EAAY,MAAQ,QARVc,CAsBaH,GACZhB,2BAAAA,OAAAA,EAAYgB,GAN9B,yBAAAE,OAxCgBG,CAAAA,IAOoF,IAPnFlB,UACnBA,EADmBmB,OAEnBA,EAFmBC,KAGnBA,EAHmBC,WAInBA,EAJmBpB,UAKnBA,EALmBqB,UAMnBA,GACsGJ,EACtG,OAAIlB,EACEsB,GAAsB,QAATF,EACRnB,IAAckB,EAAS,OAAS,OAEhClB,EAAY,OAASoB,GAAcF,EAAS,OAAS,OAG1DG,GAAsB,QAATF,EACRnB,IAAckB,EAAS,OAAS,OAEhClB,EAAY,OAAS,QAlBdiB,CA+CYL,GAClBA,mBAAAA,OAAAA,EAAMb,WAAaa,EAAMd,QAAUc,EAAMC,SAAW,OAAS,OARvE,sBAAAC,OASaF,EAAMb,UAAY,QAAU,OATzC,gDAAAe,OAWiBF,EAAMd,OAAUc,EAAMb,UAAY,OAAS,OAAU,OAXtE,6BAAAe,OAlFY,EAACQ,EAA6BC,EAAqBC,KACjE,GAAIA,EACF,MAAsB,SAAfD,EAAME,KAAkBF,EAAMG,OAAO,qBAAuBH,EAAMG,OAAO,sBAGlF,OAAQJ,GACN,IAAK,QACH,OAAOC,EAAMG,OAAO,sBACtB,IAAK,OACH,OAAOH,EAAMG,OAAO,wBACtB,IAAK,UACH,OAAOH,EAAMG,OAAO,wBACtB,IAAK,UACH,OAAOH,EAAMG,OAAO,wBACtB,QACE,OAAOH,EAAMG,OAAO,wBAfV,CA8FgBd,EAAMU,KAAMV,EAAMW,QAASX,EAAMY,OAC/CZ,uBAAAA,OAAAA,EAAMY,MAAQ,kCAAoC,OAlBnD,uCAqBbG,EAAmB,QAAS,UAiBhC,IAAMC,EAAeC,IAAqE,IAApE/B,OAAEA,EAAFC,UAAUA,GAA0D8B,EACxF,OAAI9B,EAAkB,OAEfD,EAAS,OAAS,QAGdgC,IAAAA,EAAc3B,EAAOC,IAAVC,WAAA,CAAAM,YAAA,wBAAGR,CAAH,CAAA,GAAA,IAAA,MACnBS,GAAD,2CAAAE,OArB8BiB,CAAAA,IAQ5B,IAR6BjC,OACjCA,EADiCC,UAEjCA,EAFiCC,UAGjCA,GAKI+B,EACJ,OAAIhC,EAAkB,MAEfD,EAAUE,EAAY,MAAQ,OAAU,OAXf+B,CAuBYnB,GAHtB,WAMnBA,GACDA,EAAMZ,UACFgC,EAGepB,CAAAA,kBAAAA,UAAAA,OAAAA,GAAoDgB,EAAahB,KAClEA,GAAoDgB,EAAahB,KAG/E,OAGKqB,IAAAA,EAAiB9B,EAAOC,IAAVC,WAAA,CAAAM,YAAA,wBAAGR,CAAH,CAAA,GAAA,KACtBS,GAGiBA,sEAAAA,OAAAA,EAAMd,OAAS,SAAW,MAH5C,wBAAAgB,OAIeF,EAAMd,OAAS,aAAe,SAChCc,sBAAAA,OAAAA,EAAMd,OAAS,QAAU,UALtC,wBAAAgB,OAMeF,EAAMd,QAAUc,EAAMb,UAAY,SAAW,+CAKnDmC,EAAQ/B,EAAOgC,GAAV9B,WAAA,CAAAM,YAAA,wBAAGR,CAChBS,CAAAA,GAAAA,KAAAA,GAEaA,iDAAAA,OAAAA,EAAMb,UAAY,IAAM,MAFtC,iMAaSqC,EAAUjC,EAAOgC,GAAV9B,WAAA,CAAAM,YAAA,wBAAGR,CAAH,CAAA,GAAA,KACfS,GACcA,sBAAAA,OAAAA,EAAMb,UAAY,OAAS,OAD1C,0BAAAe,OAEiBF,EAAMd,QAAUc,EAAMb,UAAY,OAAS,0CAC7Ca,EAAMd,QAAUc,EAAMb,WAAaa,EAAMC,SAAW,WAAa,gDAKvEwB,EAAOlC,EAAOmC,GAAVjC,WAAA,CAAAM,YAAA,wBAAGR,CACfS,CAAAA,GAAAA,KAAAA,mDAEaA,EAAMd,OAAUc,EAAMb,YAAca,EAAMS,UAAY,MAAQ,OAAU,EAFtF,wBAAAP,OAGeF,EAAMd,OAAS,EAAI,OACzBc,kBAAAA,OAAAA,EAAMY,MAAQZ,EAAMW,MAAMG,OAAO,gBAAkBd,EAAMW,MAAMG,OAAO,0BAJ/E,WAuBSa,IAAAA,EAAUpC,EAAOC,IAAVC,WAAA,CAAAM,YAAA,wBAAGR,CAAH,CAAA,GAAA,KACfS,GAAD,sBAAAE,OAhBwB0B,CAAAA,IAQtB,IARuB1C,OAC3BA,EAD2BC,UAE3BA,EAF2BsB,UAG3BA,GAKImB,EACJ,OAAI1C,EACKC,EAAasB,EAAY,OAAS,MAAS,OAE3C,GAZiBmB,CAiBW5B,GADnC,yBAAAE,OAEgBF,EAAMd,OAAS,EAAI,sBAI1B2C,EAAkBtC,EAAOuC,GAAVrC,WAAA,CAAAM,YAAA,wBAAGR,CAC1BS,CAAAA,GAAAA,KAAAA,GACeA,uBAAAA,OAAAA,EAAMd,OAAS,MAAQ,MADvC,eAKS6C,EAAgBxC,EAAOuC,GAAVrC,WAAA,CAAAM,YAAA,wBAAGR,CAAH,CAAA,GAAA,KACrBS,IAEmBgC,MAAAA,2DAAAA,QAnMDrB,EAmMeX,EAAMW,MAlMpB,SAAfA,EAAME,KAAkBF,EAAMG,OAAO,qBAAuBH,EAAMG,OAAO,uBAmMrEmB,kBAAAA,OAhMQtB,CAAAA,GACG,SAAfA,EAAME,KAAkBF,EAAMG,OAAO,4BAA8BH,EAAMG,OAAO,2BADpEH,CAgMIX,EAAMW,gBApMRA,IAAAA,KAwMVuB,IAAAA,EAAY3C,EAAO4C,OAAV1C,WAAA,CAAAM,YAAA,wBAAGR,CAAH,CAAA,GAAA,KACjBS,GAGcA,iEAAAA,OAAAA,EAAMX,UAAY,IAAM,OAUhBW,4MAAAA,OAAAA,EAAMW,MAAMG,OAAOsB,yDAMjCC,EAAc9C,EAAOuC,GAAVrC,WAAA,CAAAM,YAAA,yBAAGR,CACtBS,CAAAA,GAAAA,KAAAA,GACcA,sBAAAA,OAAAA,EAAMb,UAAY,OAAS,OACzBa,0BAAAA,OAAAA,EAAMb,UAAY,OAAS,OAF5C,yBAAAe,OAGgBF,EAAMb,UAAY,OAAS,OAH3C,eAOSmD,EAAQ/C,EAAOgD,GAAV9C,WAAA,CAAAM,YAAA,yBAAGR,CAAH,CAAA,GAAA,KACbS,GAAD,sBAAAE,OACeF,EAAMb,UAAY,OAAS,OAD1C,wBAAAe,OAEeF,EAAMb,UAAY,MAAQ,MAC5Ba,sBAAAA,OAAAA,EAAMb,UAAY,OAAS,OAC/Ba,kBAAAA,OAAAA,EAAMwC"}

package/dts/index.d.ts

@@ -207,7 +207,7 @@ declare enum ColorNames {
     darkgrey = "darkgrey",
     lightgrey = "lightgrey",
     superlightgrey = "superlightgrey",
-    transparent = "rgba(0,0,0,0)"
+    transparent = "transparent"
 }
 
 declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
@@ -826,6 +826,7 @@ declare namespace Text {
 }
 
 declare type AlertType = 'warning' | 'error' | 'info' | 'success';
+declare type AlertSize = 'big' | 'small';
 interface AlertProps extends BaseProps {
     /** Text of the timer cancellation button */
     cancelTimerText: string | React.ReactNode;
@@ -835,7 +836,6 @@ interface AlertProps extends BaseProps {
     clear?: boolean;
     /** This method is taken from react-toastify library */
     closeToast?(): void;
-    content?: string | React.ReactNode;
     /** Icon name (for inner Icon component) */
     customIcon?: keyof typeof IconNames;
     /** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
@@ -864,6 +864,8 @@ interface AlertProps extends BaseProps {
         onClick(): void;
     };
     secondaryActionProps?: ButtonProps;
+    /** Use this to change the appearance of the alert */
+    size: AlertSize;
     /** Use it when you need to move text to another line in alerts without a title */
     textProps?: TextProps;
     textWrap?: boolean;