@foxford/ui 2.9.1-beta-edfc6c0-20230906 → 2.9.2-beta-d5c15b2-20230912

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.
Files changed (5) hide show
  1. package/components/Alert/style.js +1 -1
  2. package/components/Alert/style.js.map +1 -1
  3. package/index.cjs.js +1 -1
  4. package/index.cjs.js.map +1 -1
  5. package/package.json +1 -1
package/components/Alert/style.js CHANGED
@@ -1,2 +1,2 @@
1
- import n from'styled-components';import{responsiveProperty as o}from'../../mixins/responsive-property.js';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{Button as i}from'../Button/Button.js';import{Text as c}from'../Text/Text.js';import{CountdownCircle as a}from'./CountdownCircle.js';var e=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var r=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)}).attrs(t).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(e(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(e(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:i,withAction:c,withImage:a,withTitle:e}=n;return o?e||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':e||'l'===i?a||!t?'16px':'24px':a?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: ").concat(n.isCompact?'351px':'100%',";\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(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 ")),o('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(r(n),";\n width: ").concat(r(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 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\n && > button {\n margin-left: 0;\n }\n ")));var h=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 outline: none;\n\n &:focus-visible {\n outline: 1px solid ").concat(n.theme.colors.accent,";\n outline-offset: 2px;\n }\n ")));var g=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,g as CancelTimer,h as CloseIcon,x as Content,m as ContentWrapper,s as IconWrapper,u as Link,p as Root,f as Timer,l as Title};
1
+ import n from'styled-components';import{responsiveProperty as o}from'../../mixins/responsive-property.js';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{Button as i}from'../Button/Button.js';import{Text as c}from'../Text/Text.js';import{CountdownCircle as a}from'./CountdownCircle.js';var e=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var r=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)}).attrs(t).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(e(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(e(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:i,withAction:c,withImage:a,withTitle:e}=n;return o?e||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':e||'l'===i?a||!t?'16px':'24px':a?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: ").concat(n.isCompact?'351px':'100%',";\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(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 ")),o('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(r(n),";\n width: ").concat(r(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\n && > button {\n margin-left: 0;\n }\n ")));var h=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 outline: none;\n\n &:focus-visible {\n outline: 1px solid ").concat(n.theme.colors.accent,";\n outline-offset: 2px;\n }\n ")));var g=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,g as CancelTimer,h 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
package/components/Alert/style.js.map CHANGED
@@ -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'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\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\n .withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n })\n .attrs(injectDefaultTheme)`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.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 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 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","getImageSize","_ref5","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","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","accent","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'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\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\n .withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n })\n .attrs(injectDefaultTheme)`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.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 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","getImageSize","_ref5","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","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","accent","CancelTimer","Button","Timer","CountdownCircle","color"],"mappings":"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"}