@foxford/ui 2.7.0-beta-5133c5e-20230721 → 2.7.0-beta-aed7670-20230811
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/CountdownCircle.js +1 -1
- package/components/Alert/CountdownCircle.js.map +1 -1
- package/components/Alert/style.js +1 -1
- package/components/Alert/style.js.map +1 -1
- package/components/Amount/Amount.js.map +1 -1
- package/components/Badge/Badge.js.map +1 -1
- package/components/Tag/Tag.js.map +1 -1
- package/components/Tag/style.js.map +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text.Heading/Text.Heading.js +1 -1
- package/components/Text.Heading/Text.Heading.js.map +1 -1
- package/components/Textarea/Textarea.js +1 -1
- package/components/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/style.js +1 -1
- package/components/Textarea/style.js.map +1 -1
- package/dts/index.d.ts +15 -48
- package/hooks/use-config-priority.js +1 -1
- package/hooks/use-config-priority.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e,useState as r}from'react';import{Close as t,WarningTriangleFill as i,CheckCircleFill as s,NotifFill as n,CloseCirlceFill as a}from'@foxford/icon-pack';import{useClassname as c}from'../../hooks/useClassname.js';import{useConfigPriority as l}from'../../hooks/use-config-priority.js';import{useFallbackTheme as m}from'../../hooks/use-theme.js';import{Button as p}from'../Button/Button.js';import{Icon as h}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as u,IconWrapper as C,Timer as d,ContentWrapper as f,Title as k,Content as y,Link as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e,useState as r}from'react';import{Close as t,WarningTriangleFill as i,CheckCircleFill as s,NotifFill as n,CloseCirlceFill as a}from'@foxford/icon-pack';import{useClassname as c}from'../../hooks/useClassname.js';import{useConfigPriority as l}from'../../hooks/use-config-priority.js';import{useFallbackTheme as m}from'../../hooks/use-theme.js';import{Button as p}from'../Button/Button.js';import{Icon as h}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as u,IconWrapper as C,Timer as d,ContentWrapper as f,Title as k,Content as y,Link as w,Actions as x,PrimaryAction as b,CancelTimer as g,CloseIcon as T}from'./style.js';import{countdownColor as v}from'./utils.js';import{jsxs as z,jsx as A}from'react/jsx-runtime';var j=o=>{var{isCompact:e,theme:r,type:t}=o;var c=e?16:24;switch(t){case'error':return A(a,{color:r.colors['alert-bg-error-500'],size:c});case'info':return A(n,{color:r.colors['content-brand-primary'],size:c});case'success':return A(s,{color:r.colors['alert-success'],size:c});case'warning':return A(i,{color:r.colors['alert-warning'],size:c});default:return null}};var I='Alert';var W=e(((e,i)=>{var s;var n=m();var{cancelTimerText:a="Отменить",primaryAction:I,primaryActionProps:W,secondaryAction:P,secondaryActionProps:N,children:F,className:B,clear:M,customIcon:E,image:L,isCompact:R,link:O,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']}=l(null===(s=n.components)||void 0===s?void 0:s.Alert,e);var Z=c("Alert",B);var[$,oo]=r(!1);var eo=Boolean('l'===D||!!U||R&&(U||O||I||P));return z(u,{className:Z,clear:M,column:eo,isCompact:R,noIcon:H,onMouseEnter:Q&&(()=>{oo(!0)}),onMouseLeave:Q&&(()=>{oo(!1)}),ref:i,size:D,style:G,textWrap:K,type:X,width:Y,withAction:!!I||!!P,withCloseIcon:!!q,withImage:!!L,withLink:!!O,withTimer:!!Q,withTitle:!!U,children:[(!H||E)&&z(C,{column:eo,isCompact:R,withImage:!!L,children:[!H&&!Q&&!E&&!L&&j({isCompact:R,theme:n,type:X}),E&&A(h,{name:E,size:R?16:24}),L,Q&&A(d,{isCompact:R,paused:$,timer:Q,color:v({theme:n,type:X})})]}),z(f,{column:eo,isCompact:R,children:[U&&A(k,o(o({color:n.colors['content-onmain-primary'],isCompact:R,size:R?14:16,lineHeight:"m"},V),{},{children:U})),A(y,o(o({appearance:"body",color:n.colors['content-onmain-primary'],column:eo,isCompact:R,size:R?'xs':'s',textWrap:K},J),{},{children:F})),O&&A(w,o(o({clear:M,column:eo,isCompact:R,onClick:O.onClick,preset:"brand",pseudo:!0,size:R?'s':'m',withTitle:!!U},S),{},{children:O.content})),(I||P)&&z(x,{column:eo,isCompact:R,withTitle:!!U,children:[P&&A(p,o(o({black:!0,fontWeight:"normal",marginRight:eo?4:8,onClick:P.onClick,outline:!0,preset:"brand",size:"xs"},N),{},{children:P.content})),I&&A(b,o(o({black:!0,fontWeight:"normal",onClick:I.onClick,preset:"brand",size:"xs"},W),{},{children:I.content}))]})]}),_&&A(g,{black:!0,clear:!0,fontWeight:"normal",isCompact:R,onClick:_,preset:"brand",size:R?'xs':'m',children:a}),q&&(!R||!Q)&&A(T,{"aria-label":"close",onClick:q,type:"button",withTimer:!!Q,children:A(t,{color:n.colors['content-onmain-primary'],size:R?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 { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { useFallbackTheme } from 'hooks/use-theme'\n\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps,\n secondaryAction,\n secondaryActionProps,\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps,\n noIcon,\n onClickCancelTimer,\n closeToast,\n size = 's',\n style,\n textProps,\n textWrap,\n timer,\n title,\n titleProps,\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n setTimerOnPause(true)\n }\n\n const handleMouseLeave = () => {\n setTimerOnPause(false)\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={timer && handleMouseEnter}\n onMouseLeave={timer && handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n onPause={timerOnPause}\n timer={timer}\n color={countdownColor({ theme, type })}\n />\n )}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n lineHeight='s'\n size={isCompact ? 14 : 16}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link\n clear={clear}\n column={column}\n isCompact={isCompact}\n onClick={link.onClick}\n preset='brand'\n pseudo\n size={isCompact ? 's' : 'm'}\n withTitle={!!title}\n {...linkProps}\n >\n {link.content}\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n marginRight={column ? 4 : 8}\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size='xs'\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Styled.PrimaryAction\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Styled.PrimaryAction>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 'm'}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {!closeToast || (timer && isCompact) ? null : (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","_ref","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","COMPONENT_NAME","Alert","forwardRef","props","ref","_theme$components","useFallbackTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled.Root","onMouseEnter","onMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Styled.IconWrapper","Icon","name","Styled.Timer","onPause","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","Styled.Link","onClick","preset","pseudo","content","Styled.Actions","Button","black","fontWeight","marginRight","outline","Styled.PrimaryAction","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { useFallbackTheme } from 'hooks/use-theme'\n\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps,\n secondaryAction,\n secondaryActionProps,\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps,\n noIcon,\n onClickCancelTimer,\n closeToast,\n size = 's',\n style,\n textProps,\n textWrap,\n timer,\n title,\n titleProps,\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n setTimerOnPause(true)\n }\n\n const handleMouseLeave = () => {\n setTimerOnPause(false)\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={timer && handleMouseEnter}\n onMouseLeave={timer && handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n 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\n clear={clear}\n column={column}\n isCompact={isCompact}\n onClick={link.onClick}\n preset='brand'\n pseudo\n size={isCompact ? 's' : 'm'}\n withTitle={!!title}\n {...linkProps}\n >\n {link.content}\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n marginRight={column ? 4 : 8}\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size='xs'\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Styled.PrimaryAction\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Styled.PrimaryAction>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 'm'}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {closeToast && (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","useFallbackTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled.Root","onMouseEnter","onMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Styled.IconWrapper","Icon","name","Styled.Timer","paused","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","appearance","Styled.Link","onClick","preset","pseudo","content","Styled.Actions","Button","black","fontWeight","marginRight","outline","Styled.PrimaryAction","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as r,useRef as e,useEffect as t}from'react';import{Progress as s}from'../Progress/Progress.js';import{jsx as a}from'react/jsx-runtime';var o=o=>{var{className:
|
|
1
|
+
import{useState as r,useRef as e,useEffect as t}from'react';import{Progress as s}from'../Progress/Progress.js';import{jsx as a}from'react/jsx-runtime';var o=o=>{var{className:c,color:n,isCompact:l,paused:u,timer:i}=o;var[m,p]=r(i);var v=e();t((()=>()=>{v.current&&clearInterval(v.current)}),[]),t((()=>{u?clearInterval(v.current):v.current=setInterval((()=>{p((r=>r<=.05?(clearInterval(v.current),r):r-.05))}),50)}),[u]);var f=m/i*100;return a(s.Circle,{className:c,content:Math.ceil(m),progress:f,progressStartAngle:0,resultColor:n,size:l?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5})};export{o as CountdownCircle};
|
|
2
2
|
//# sourceMappingURL=CountdownCircle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact,
|
|
1
|
+
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n\n useEffect(() => {\n return () => {\n if (intervalId.current) {\n clearInterval(intervalId.current)\n }\n }\n }, [])\n\n useEffect(() => {\n if (paused) {\n clearInterval(intervalId.current)\n } else {\n intervalId.current = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n clearInterval(intervalId.current)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n }\n }, [paused])\n\n const progress = (countdown / timer) * 100\n\n return (\n <Progress.Circle\n className={className}\n content={Math.ceil(countdown)}\n progress={progress}\n progressStartAngle={0}\n resultColor={color}\n size={isCompact ? 16 : 20}\n strokeBGColor='transparent'\n strokeLineWidth={1.5}\n />\n )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","_ref","className","color","isCompact","paused","timer","countdown","setCountdown","useState","intervalId","useRef","useEffect","current","clearInterval","setInterval","prevCountdown","progressRate","progress","_jsx","Progress","Circle","content","Math","ceil","progressStartAngle","resultColor","size","strokeBGColor","strokeLineWidth"],"mappings":"uJAQMA,IAAAA,EAAkBC,IAA0E,IAAzEC,UAAEA,EAAFC,MAAaA,EAAbC,UAAoBA,EAApBC,OAA+BA,EAA/BC,MAAuCA,GAAkCL,EAChG,IAAOM,EAAWC,GAAgBC,EAASH,GAC3C,IAAMI,EAAaC,IAEnBC,OACS,KACDF,EAAWG,SACbC,cAAcJ,EAAWG,WAG5B,IAEHD,QACMP,EACFS,cAAcJ,EAAWG,SAEzBH,EAAWG,QAAUE,aAAAA,KACnBP,GAAcQ,GACRA,GApBO,KAqBTF,cAAcJ,EAAWG,SAClBG,GAGFA,EAzBI,QA2BZC,MAEJ,CAACZ,IAEJ,IAAMa,EAAYX,EAAYD,EAAS,IAEvC,OACEa,EAACC,EAASC,OAAV,CACEnB,UAAWA,EACXoB,QAASC,KAAKC,KAAKjB,GACnBW,SAAUA,EACVO,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAc,cACdC,gBAAiB"}
|
|
@@ -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{Anchor as i}from'../Anchor/Anchor.js';import{Button as c}from'../Button/Button.js';import{Text as a}from'../Text/Text.js';import{CountdownCircle as e}from'./CountdownCircle.js';var r=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var p=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).attrs(t).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(r(n),";\n padding-right: ").concat((n=>{var{isCompact:o,withCloseIcon:t,withTimer:i}=n;return t?o?'12px':'16px':i?'8px':'20px'})(n),";\n padding-bottom: ").concat(r(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:i,withAction:c,withImage:a,withTitle:e}=n;return o?e||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':e||'l'===i?a||!t?'16px':'24px':a?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: ").concat(n.isCompact?'351px':'100%',";\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(
|
|
1
|
+
import n from'styled-components';import{responsiveProperty as o}from'../../mixins/responsive-property.js';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{Anchor as i}from'../Anchor/Anchor.js';import{Button as c}from'../Button/Button.js';import{Text as a}from'../Text/Text.js';import{CountdownCircle as e}from'./CountdownCircle.js';var r=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var p=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var s=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).attrs(t).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(r(n),";\n padding-right: ").concat((n=>{var{isCompact:o,withCloseIcon:t,withTimer:i}=n;return t?o?'12px':'16px':i?'8px':'20px'})(n),";\n padding-bottom: ").concat(r(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:i,withAction:c,withImage:a,withTitle:e}=n;return o?e||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':e||'l'===i?a||!t?'16px':'24px':a?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: ").concat(n.isCompact?'351px':'100%',";\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(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 m=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})([""," ",";"],(n=>"\n display: flex;\n margin-right: ".concat((n=>{var{column:o,isCompact:t,withImage:i}=n;return t?'8px':o?i?'8px':'12px':'8px'})(n),";\n ")),(n=>n.withImage?"\n img,\n svg {\n height: ".concat(p(n),";\n width: ").concat(p(n),";\n }\n "):null));var l=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-2"})(["",""],(n=>"\n display: flex;\n margin-right: auto;\n flex-direction: ".concat(n.column?'column':'row',";\n align-items: ").concat(n.column?'flex-start':'center',";\n max-width: ").concat(n.column?'260px':'initial',";\n white-space: ").concat(n.column||n.isCompact?'normal':'nowrap',";\n overflow: hidden;\n ")));var x=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-3"})(["",""],(n=>"\n display: inline-block;\n margin-top: ".concat(n.isCompact?'0':'2px',";\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n ")));var u=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["",""],(n=>"\n text-overflow: ".concat(n.column||n.isCompact?'clip':'ellipsis',";\n white-space: ").concat(n.column||n.isCompact||n.textWrap?'pre-wrap':'inherit',";\n overflow: hidden;\n ")));var d=n(i).withConfig({componentId:"fox-ui__sc-1v79u95-5"})(["",""],(n=>"\n display: flex;\n margin-top: ".concat(n.column?n.isCompact&&!n.withTitle?'4px':'12px':0,";\n margin-left: ").concat(n.column?0:'60px',";\n color: ").concat(n.clear?n.theme.colors['content-link']:n.theme.colors['content-onmain-primary'],";\n ")));var h=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-6"})(["",""],(n=>"\n margin-top: ".concat((n=>{var{column:o,isCompact:t,withTitle:i}=n;return o?t?i?'16px':'8px':'16px':0})(n),";\n margin-left: ").concat(n.column?0:'60px',";\n ")));var f=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-7"})(["&&{margin-left:0;}"]);var g=n.button.withConfig({componentId:"fox-ui__sc-1v79u95-8"})(["",""],(n=>"\n appearance: none;\n display: flex;\n margin-left: ".concat(n.withTimer?'0':'16px',";\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ").concat(n.theme.colors.accent,";\n outline-offset: 2px;\n }\n ")));var w=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-9"})(["",""],(n=>"\n margin-left: ".concat(n.isCompact?'28px':'60px',";\n padding-right: ").concat(n.isCompact?'16px':'28px',";\n padding-left: ").concat(n.isCompact?'16px':'28px',";\n ")));var v=n(e).withConfig({componentId:"fox-ui__sc-1v79u95-10"})(["",""],(n=>"\n line-height: ".concat(n.isCompact?'12px':'18px',";\n font-weight: ").concat(n.isCompact?'700':'400',";\n font-size: ").concat(n.isCompact?'11px':'14px',";\n color: ").concat(n.color,";\n\n svg {\n transform: rotateY(180deg);\n }\n ")));export{h as Actions,w as CancelTimer,g as CloseIcon,u as Content,l as ContentWrapper,m as IconWrapper,d as Link,f as PrimaryAction,s as Root,v as Timer,x 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'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n PrimaryActionProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (type: AlertType | undefined, theme: DefaultTheme, clear: boolean) => {\n if (clear) {\n return theme.colors['bg-onmain-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n } else {\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n }\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '20px'\n } else {\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n } else {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n } else {\n return withImage ? '16px' : '20px'\n }\n }\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n } else {\n return withTimer ? '8px' : '20px'\n }\n}\n\nexport const Root = styled.div\n .withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n })\n .attrs(injectDefaultTheme)`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.type, props.theme, !!props.clear)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? `\n img,\n svg {\n height: ${getImageSize(props)};\n width: ${getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '18px' : '20px'};\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled(Anchor).withConfig<LinkProps>({\n shouldForwardProp: (prop) => !['clear', 'column', 'isCompact', 'withTitle'].includes(prop),\n})`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n }\n\n return 0\n}\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n `}\n`\n\nexport const PrimaryAction = styled(Button)<PrimaryActionProps>`\n && {\n margin-left: 0;\n }\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","_ref","column","isCompact","withImage","withTimer","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","concat","textWrap","paddingRight","_ref3","withCloseIcon","paddingLeft","_ref2","noIcon","size","withAction","withTitle","type","theme","clear","colors","responsiveProperty","getImageSize","_ref5","IconWrapper","getMarginRightIconWrapper","_ref4","ContentWrapper","Title","Text","Content","Link","Anchor","Actions","_ref6","PrimaryAction","Button","CloseIcon","button","accent","CancelTimer","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n PrimaryActionProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (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(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\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n `}\n`\n\nexport const PrimaryAction = styled(Button)<PrimaryActionProps>`\n && {\n margin-left: 0;\n }\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","_ref","column","isCompact","withImage","withTimer","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","Anchor","Actions","_ref6","PrimaryAction","Button","CloseIcon","button","accent","CancelTimer","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Amount.js","sources":["../../../../src/components/Amount/Amount.tsx"],"sourcesContent":["import { PureComponent } from 'react'\nimport cx from 'clsx'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text } from '../Text
|
|
1
|
+
{"version":3,"file":"Amount.js","sources":["../../../../src/components/Amount/Amount.tsx"],"sourcesContent":["import { PureComponent } from 'react'\nimport cx from 'clsx'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text } from '../Text'\nimport { Display } from '../../mixins/display'\nimport { CurrencyCodes, CURRENCY_MAP } from './data'\nimport * as Styled from './style'\n\nexport interface AmountProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Value for amount\n */\n value?: number\n /**\n * Digits after point\n */\n digitsAfterPoint?: number\n /**\n * Show zero minor part\n */\n showZeroMinorPart?: boolean\n /**\n * Separator of major and minor part of amount\n */\n separator?: string\n /**\n * International code of currency.\n */\n currency?: keyof typeof CurrencyCodes | string\n /**\n * Use Header component for display amount\n */\n isHeader?: boolean\n /**\n * Amount is not valid and will be crossed out with ```text-decoration: line-through```\n */\n crossedOut?: boolean\n /**\n * If need only currency symbol\n */\n onlyCurrency?: boolean\n}\n\nconst AMOUNT_MAJOR_PART_SIZE = 3\nconst ZERO_MINOR_PART_REGEXP = /^0+$/\nconst MINUS_SIGN_HTML_CODE = '\\u2212'\n\nfunction createSplitter(partSize: number): (_s: string) => string[] {\n const parts = (str: string): string[] => {\n const { length } = str\n\n if (length <= partSize) {\n return [str]\n }\n\n const from = length - partSize\n const to = length\n\n return [str.slice(from, to)].concat(parts(str.slice(0, from)))\n }\n\n return parts\n}\n\nfunction formatAmount(\n value: AmountProps['value'] = 0,\n digitsAfterPoint: AmountProps['digitsAfterPoint'],\n currencyCode: AmountProps['currency']\n) {\n const isNegative = value < 0\n\n const valueAbs = Math.abs(value)\n const valueAbsStr = valueAbs.toFixed(digitsAfterPoint)\n\n const numberParts = valueAbsStr.split('.')\n const majorPart = numberParts[0]\n const minorPart = numberParts[1]\n\n const amountSplitter = createSplitter(AMOUNT_MAJOR_PART_SIZE)\n\n const majorPartFormatted = amountSplitter(majorPart).reverse().join(' ')\n\n const formattedValueStr = majorPartFormatted + (minorPart ? `,${minorPart}` : '')\n\n return {\n majorPart: majorPartFormatted,\n minorPart,\n value: formattedValueStr,\n isNegative,\n currencySymbol: currencyCode ? Amount.getCurrencySymbol(currencyCode) : '',\n }\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class Amount extends PureComponent<AmountProps> {\n static displayName = 'Amount'\n static defaultProps = {\n isHeader: false,\n showZeroMinorPart: false,\n crossedOut: false,\n digitsAfterPoint: 2,\n separator: ',',\n onlyCurrency: false,\n }\n\n static getCurrencySymbol(currencyCode: keyof typeof CurrencyCodes | string) {\n return CURRENCY_MAP[currencyCode] || currencyCode\n }\n\n renderMinorPart(minorPart: string) {\n const { showZeroMinorPart, separator } = this.props\n\n let needMinorPart = false\n\n if (minorPart) {\n needMinorPart = true\n\n if (!showZeroMinorPart && ZERO_MINOR_PART_REGEXP.test(minorPart)) {\n needMinorPart = false\n }\n }\n\n if (needMinorPart) {\n return (\n <span className='minor-container'>\n <span className='separator'>{separator}</span>\n <span className='minor'>{minorPart}</span>\n </span>\n )\n }\n\n return null\n }\n\n renderCurrencySymbol = (currencySymbol: string) => (\n <span style={{ position: 'relative' }}>\n {this.props.currency === 'RUR' ? (\n <span\n style={{\n position: 'absolute',\n width: 0,\n opacity: 0,\n visibility: 'hidden',\n }}\n >\n руб.\n </span>\n ) : null}\n <span>{` ${currencySymbol}`}</span>\n </span>\n )\n\n render() {\n const { value, digitsAfterPoint, currency, isHeader, className, style, crossedOut, onlyCurrency, ...rest } =\n this.props\n\n const { majorPart, minorPart, isNegative, currencySymbol } = formatAmount(value, digitsAfterPoint, currency)\n\n const classNames = cx('amount', className)\n\n const amountInner = (\n <Styled.Root className={classNames} style={style} crossedOut={crossedOut}>\n {!onlyCurrency ? (\n <>\n <span className='major'>\n {isNegative && MINUS_SIGN_HTML_CODE}\n {majorPart}\n </span>\n {this.renderMinorPart(minorPart)}\n </>\n ) : null}\n {currency && this.renderCurrencySymbol(currencySymbol)}\n </Styled.Root>\n )\n\n const Element = isHeader ? Text.Heading : Text\n\n return (\n <Element {...rest} as='span'>\n {amountInner}\n </Element>\n )\n }\n}\n"],"names":["ZERO_MINOR_PART_REGEXP","createSplitter","partSize","parts","str","length","from","slice","concat","Amount","PureComponent","constructor","super","arguments","this","renderCurrencySymbol","currencySymbol","_jsxs","style","position","children","props","currency","_jsx","width","opacity","visibility","static","currencyCode","CURRENCY_MAP","renderMinorPart","minorPart","showZeroMinorPart","separator","needMinorPart","test","className","render","_this$props","value","digitsAfterPoint","isHeader","crossedOut","onlyCurrency","rest","_objectWithoutProperties","_excluded","majorPart","isNegative","r","e","t","undefined","numberParts","Math","abs","toFixed","split","majorPartFormatted","reverse","join","formattedValueStr","getCurrencySymbol","classNames","cx","amountInner","Styled.Root","_Fragment","Text","Heading","_objectSpread","as","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text, TextProps } from '
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface BadgeProps extends BaseProps, Color, Display {\n /**\n * Children react node\n */\n children?: React.ReactNode\n content?: string | React.ReactNode\n textProps?: TextProps\n /** Make badge round */\n round?: string\n}\n\nBadge.displayName = 'Badge'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Badge({\n children,\n content,\n className,\n textProps,\n round,\n display = 'inline-block',\n ...restProps\n}: BadgeProps) {\n const _className = useClassname(Badge.displayName, className)\n return (\n <Styled.Root round={round} display={display} className={_className} {...restProps}>\n <Text\n className='text'\n size={round ? 10 : 12}\n weight={round ? 'bolder' : 'normal'}\n lineHeight='s'\n content={typeof content === 'string' ? content : undefined}\n {...textProps}\n >\n {children || content}\n </Text>\n </Styled.Root>\n )\n}\n"],"names":["Badge","_ref","children","content","className","textProps","round","display","restProps","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread","Text","size","weight","lineHeight","undefined"],"mappings":"qWA0BO,SAASA,EAQDC,GAAA,IAROC,SACpBA,EADoBC,QAEpBA,EAFoBC,UAGpBA,EAHoBC,UAIpBA,EAJoBC,MAKpBA,EALoBC,QAMpBA,EAAU,gBAEGN,EADVO,EACUC,EAAAR,EAAAS,GACb,IAAMC,EAAaC,EAAaZ,EAAMa,YAAaT,GACnD,OACEU,EAACC,EAADC,EAAAA,EAAA,CAAaV,MAAOA,EAAOC,QAASA,EAASH,UAAWO,GAAgBH,GAAxE,GAAA,CAAAN,SACEY,EAACG,EAADD,EAAAA,EAAA,CACEZ,UAAU,OACVc,KAAMZ,EAAQ,GAAK,GACnBa,OAAQb,EAAQ,SAAW,SAC3Bc,WAAW,IACXjB,QAA4B,iBAAZA,EAAuBA,OAAUkB,GAC7ChB,GANN,GAAA,CAAAH,SAQGA,GAAYC,QA5BrBH,EAAMa,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n Display,\n Color,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\n// Prevent brakechanges\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height'>`](#/Миксины)\n */\nexport function Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n"],"names":["TagInput","props","_jsx","Tag","_objectSpread","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_excluded","buttonProps","type","inputProps","_jsxs","Styled.Root","tabIndex","_onChange","_x","apply","this","arguments","toString","e","persist","_onClick","_x2","defaultChecked","hidden","Styled.Text","size","forwardedAs","color","defaultProps","display","height","Input","displayName"],"mappings":"4VAqFA,SAASA,EAASC,GAChB,OAAOC,EAACC,EAADC,EAAA,CAAKC,GAAG,SAAYJ,IAWtB,SAASE,EAAIF,GAClB,IAAMI,GACJA,EADIC,UAEJA,EAFIC,QAGJA,EAHIC,SAIJA,EAJIC,QAKJA,EALIC,GAMJA,EANIC,KAOJA,EAPIC,UAQJA,EARIC,MASJA,EATIC,SAUJA,EAVIC,SAWJA,EAXIC,QAYJA,EAZIC,QAaJA,EAbIC,QAcJA,GAEEjB,EADCkB,IACDlB,EAhBJmB,GAkBA,IAAMC,EAAqB,WAAPhB,EAAkB,CAAEiB,KAAM,UAAa,GAE3D,IAAMC,EAAoB,UAAPlB,EAAiB,CAAEI,QAASC,GAAMC,GAAS,GAE9D,OACEa,EAACC,EAADrB,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACEC,GAAW,UAAPA,EAAiB,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAAgB,UAAPX,EAAiBW,OAAAA,GATJ,UAAPX,EAAiB,CAAEI,QAAAA,GAAY,IAW1CY,GACAE,GACAJ,GATN,GAAA,CAAAX,SAWGH,CAAO,UAAPA,EACCH,EAAA,QAAA,CACEQ,GAAIA,GAAMC,EACVA,KAAMA,EACNW,KAAMV,GAAa,WACnBc,SAAU,EACVX,SAAQ,SAAAY,GAAA,SAAAZ,EAAAa,GAAA,OAAAD,EAAAE,MAAAC,KAAAC,WAAA,OAAAhB,EAAAiB,SAAA,IAAAL,EAAAK,WAAAjB,EAAA,EAAGkB,IACTA,EAAEC,UAEKnB,GAAYA,EAASkB,MAE9BjB,QAAO,SAAAmB,GAAA,SAAAnB,EAAAoB,GAAA,OAAAD,EAAAN,MAAAC,KAAAC,WAAA,OAAAf,EAAAgB,SAAA,IAAAG,EAAAH,WAAAhB,EAAA,EAAGiB,IACRA,EAAEC,UAEKlB,GAAWA,EAAQiB,MAE5BI,eAAgBpC,EAAMoC,eACtBnB,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVwB,QAAM,IAEN,KACH9B,EACDN,EAACqC,EAADnC,EAAAA,EAAA,CAAaoC,KAAM,GAAIC,YAAY,OAAOC,MAAOxB,IAAYD,EAAU,QAAU,aAAiBX,GAAlG,GAAA,CAAAE,SACGD,SAxFTJ,EAAIwC,aAAe,CACjBC,QAAS,eACTvC,GAAI,SACJwC,OAAQ,IAGV7C,EAAS2C,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAIV1C,EAAI2C,MAAQ9C,EAEZG,EAAI4C,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text'\nimport { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n l: 220,\n m: 182,\n s: 100,\n xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n if (props.width === 'auto') return 'auto'\n if (typeof props.width === 'number') return props.width\n\n if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n return 'auto'\n}\n\nconst active = css`\n border-color: transparent;\n background-color: currentColor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n vertical-align: middle;\n transition: color 0.25s ease;\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: rgba(0, 0, 0, 0.04);\n ${Text} {\n color: rgba(0, 0, 0, 0.16);\n }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n padding: 0px 16px;\n margin-bottom: 10px;\n border-radius: 3px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.whiteGray};\n box-sizing: border-box;\n vertical-align: middle;\n transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n text-align: center;\n touch-action: manipulation;\n min-width: 60px;\n\n ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(props.width, 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n\n ${(props) =>\n !props.disabled\n ? css`\n &:hover:not(:disabled) {\n border-color: currentColor;\n }\n &:active:not(:disabled) {\n ${active}\n ${Text} {\n color: ${(props) => props.theme.colors.white};\n }\n }\n `\n : null}\n\n ${(props) => (props.inverse || props.checked ? active : null)}\n\n &:disabled {\n ${disabled}\n }\n ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","UiText","withConfig","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","height","_ref","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","_ref2","widthXS","widthS","widthM","widthL","widthXL","display","color","inverse","checked"],"mappings":"8QAOA,IAAMA,EAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,IAAMC,EAASC,EAAf,CAAA,gEAKaC,EAAOC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAb,CAAA,2KAWP,IAAMI,EAAWN,EAAH,CAAA,wDAAA,6BAGVC,GAKG,IAAMM,EAAOL,EAAOM,OAAOJ,WAAqB,CACrDK,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KADhFN,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,0EAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAMMU,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAS/CJ,GAAWA,EAAMK,KAAOC,EAjDHN,CAAAA,GACJ,SAAhBA,EAAMO,MAAyB,OACR,iBAAhBP,EAAMO,MAA2BP,EAAMO,MAE9CP,EAAMK,MAAQvB,EAAOkB,EAAMK,MAAcvB,EAAOkB,EAAMK,MAEnD,OANiBL,CAiD6BA,GAAQ,SAAW,OACrEA,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,eAAiB,OAClER,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYG,YAAa,cAEhGjB,GAAWA,EAAMO,MAAQD,EAASN,EAAMO,MAAO,SAAW,OACzDW,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACFH,EAAwB,CAAEC,MAAO,CAAEG,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWN,YAAa,aAE3FjB,GAAWA,EAAMwB,QAAUA,EAAQxB,EAAMwB,SAAW,OACpDxB,GAAWA,EAAMyB,MAAQA,EAAMzB,EAAMyB,OAAS,OAM9CzB,GACAA,EAAMN,SAYH,KAXAN,EADJ,CAAA,6EAAA,IAAA,UAAA,OAMUD,EACAE,GACUW,GAAUA,EAAMC,MAAMC,OAAOC,UAMhDH,GAAWA,EAAM0B,SAAW1B,EAAM2B,QAAUxC,EAAS,MAGpDO,GAEDM,GAAWA,EAAMN,SAAWA,EAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { APPEARANCE } from './constants'\nimport type { TextProps, TextComponent, TextAppearance } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\nconst Text = forwardRef<HTMLElement, TextProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const prioritizedProps = useConfigPriority<TextProps>(theme.components?.Text, props)\n const appearanceProps = APPEARANCE[prioritizedProps.appearance as TextAppearance] ?? {}\n const mergedProps: TextProps = { ...appearanceProps, ...prioritizedProps }\n\n const {\n as = 'div',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n size = 'm',\n content,\n children,\n ...restProps\n } = mergedProps\n\n const className = useClassname(COMPONENT_NAME, restProps.className)\n\n if (children) {\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={as}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n size={size}\n className={className}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={as}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n size={size}\n className={className}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}) as TextComponent\n\nText.displayName = COMPONENT_NAME\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\n\nexport { Text, COMPONENT_NAME }\n
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport { APPEARANCE } from './constants'\nimport type { TextProps, TextComponent, TextAppearance } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\nconst Text = forwardRef<HTMLElement, TextProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const prioritizedProps = useConfigPriority<TextProps>(theme.components?.Text, props)\n const appearanceProps = APPEARANCE[prioritizedProps.appearance as TextAppearance] ?? {}\n const mergedProps: TextProps = { ...appearanceProps, ...prioritizedProps }\n\n const {\n as = 'div',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n size = 'm',\n content,\n children,\n ...restProps\n } = mergedProps\n\n const className = useClassname(COMPONENT_NAME, restProps.className)\n\n if (children) {\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={as}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n size={size}\n className={className}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={as}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n size={size}\n className={className}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}) as TextComponent\n\nText.displayName = COMPONENT_NAME\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\n\nexport { Text, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Text","forwardRef","props","ref","_theme$components","_APPEARANCE","theme","useFallbackTheme","prioritizedProps","useConfigPriority","components","appearanceProps","APPEARANCE","appearance","mergedProps","_objectSpread","as","weight","lineHeight","fontStyle","size","content","children","restProps","_excluded","className","useClassname","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","displayName","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"gpBAUMA,IAAAA,EAAiB,OAEjBC,IAAAA,EAAOC,IAAoCC,EAAOC,KAAQ,IAAAC,EAAAC,EAC9D,IAAMC,EAAQC,IAEd,IAAMC,EAAmBC,EAAiB,QAAAL,EAAYE,EAAMI,kBAAlB,IAAAN,SAAYA,EAAkBJ,KAAME,GAC9E,IAAMS,EAAe,UAAGC,EAAWJ,EAAiBK,mBAA/B,IAAAR,EAAAA,EAAgE,GACrF,IAAMS,EAAsBC,EAAAA,EAAA,GAAQJ,GAAoBH,GAExD,IAAMQ,GACJA,EAAK,MADDC,OAEJA,EAAS,SAFLC,WAGJA,EAAa,IAHTC,UAIJA,EAAY,SAJRC,KAKJA,EAAO,IALHC,QAMJA,EANIC,SAOJA,GAEER,EADCS,IACDT,EATJU,GAWA,IAAMC,EAAYC,EApBG,OAoB0BH,EAAUE,WAEzD,OAEIE,EAACC,SACKL,GADN,GAFAD,EAEA,CAEEnB,IAAKA,EACLa,GAAIA,EACJC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,KAAMA,EACNK,UAAWA,EARbH,SAUGA,GAML,CAEEnB,IAAKA,EACLa,GAAIA,EACJC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,KAAMA,EACNK,UAAWA,EACXI,wBAAyB,CAAEC,OAAQT,GAAW,UAKpDrB,EAAK+B,YAtDkB,OAwDvB/B,EAAKgC,QAAUC,EACfjC,EAAKkC,QAAUC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{Text as r}from'../Text/Text.js';import{jsx as s}from'react/jsx-runtime';var a=["h","fontFamily"];var h={h1:{size:44,sizeM:32,lineHeight:'s',weight:'bold'},h2:{size:32,sizeM:28,lineHeight:'s',weight:'bold'},h3:{size:28,lineHeight:'s',weight:'bold'},h4:{size:24,lineHeight:'s',weight:'bold'}};var m='Text.Heading';var l=m=>{var l;var n=t();var g=o(null===(l=n.components)||void 0===l?void 0:l["Text.Heading"],m),{h:p="h1",fontFamily:d}=g,b=i(g,a);return s(r,e(e({as:p,fontFamily:d},h[p]),b))};l.displayName="Text.Heading";export{m as COMPONENT_NAME,l as TextHeading};
|
|
2
2
|
//# sourceMappingURL=Text.Heading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { Text } from '../Text'\nimport type { TextHeadingProps, H } from './types'\n\nconst PARAMS: Record<H, Partial<TextHeadingProps>> = {\n h1: {\n size: 44,\n sizeM: 32,\n lineHeight: 's',\n weight: 'bold',\n },\n h2: {\n size: 32,\n sizeM: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h3: {\n size: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h4: {\n size: 24,\n lineHeight: 's',\n weight: 'bold',\n },\n}\n\nconst COMPONENT_NAME = 'Text.Heading'\n\n/**\n * @visibleName Text.Heading\n */\nconst TextHeading = (props: TextHeadingProps) => {\n const theme = useFallbackTheme()\n\n const {\n h = 'h1',\n fontFamily,\n ...configProps\n } = useConfigPriority<TextHeadingProps>(theme.components?.[COMPONENT_NAME], props)\n\n const predefinedParams = PARAMS[h]\n\n return <Text as={h} fontFamily={fontFamily} {...predefinedParams} {...configProps} />\n}\n\nTextHeading.displayName = COMPONENT_NAME\n\nexport { TextHeading, COMPONENT_NAME }\n"],"names":["PARAMS","h1","size","sizeM","lineHeight","weight","h2","h3","h4","COMPONENT_NAME","TextHeading","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","h","fontFamily","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","_jsx","Text","_objectSpread","as","displayName"],"mappings":"6VAKA,IAAMA,EAA+C,CACnDC,GAAI,CACFC,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVC,GAAI,CACFJ,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVE,GAAI,CACFL,KAAM,GACNE,WAAY,IACZC,OAAQ,QAEVG,GAAI,CACFN,KAAM,GACNE,WAAY,IACZC,OAAQ,SAINI,IAAAA,EAAiB,eAKjBC,IAAAA,EAAeC,IAA4B,IAAAC,EAC/C,IAAMC,EAAQC,IAEd,IAIIC,EAAAA,EAAoC,QAAAF,EAAAA,EAAMG,sBAANJ,OAAAA,EAAAA,EAZnB,gBAYuDD,IAJtEM,EACJA,EAAI,KADAC,WAEJA,GAFFC,EAGKC,EAHLC,EAAAF,EAAAG,GAQA,OAAOC,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAIT,EAAGC,WAAYA,GAFPlB,EAAOiB,IAEsCG,KAGxEV,EAAYiB,YAnBW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useRef as a,useState as o,useCallback as t,useEffect as s}from'react';import{omit as l}from'ramda';import{useFallbackTheme as i}from'../../hooks/use-theme.js';import{useConfigPriority as n}from'../../hooks/use-config-priority.js';import{Root as d}from'./style.js';import{jsx as m}from'react/jsx-runtime';var u=["preset","disabled","error","fluid","name","onChange","maxLength","placeholder","required","tabIndex","value","className","style","autosize","rounded","cols","rows","maxRows","color","placeholderColor","width"];var c='Textarea';var h=c=>{var h;var p=i();var f=n(null===(h=p.components)||void 0===h?void 0:h.Textarea,l(['children'],c)),{preset:v,disabled:g,error:b,fluid:x,name:C,onChange:y,maxLength:w,placeholder:T,required:j,tabIndex:N,value:R,className:H,style:I,autosize:k=!0,rounded:E=!0,cols:L=20,rows:M=2,maxRows:P=30,color:S="mineShaft",placeholderColor:q="silver",width:z=p.defaultInputControlsWidth}=f,A=r(f,u);var B=a();var[O,W]=o(M);var F=t((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&k){var a=r.getBoundingClientRect();r.scrollHeight>a.height&&O<P?W(O+1):r.value&&''!==r.value||W(M)}'function'==typeof y&&y(e)}),[y,O,P,k]);s((()=>{if(B&&B.current){var e=B.current;var r=e.getBoundingClientRect();if(e.scrollHeight>r.height){var a=parseInt(getComputedStyle(e).lineHeight,10);var o=Math.floor(e.scrollHeight/a);o<=P&&o>M&&W(o)}}}),[]);var U='brand'===p.preset;return'string'==typeof v&&(U='brand'===v),m(d,e(e({},A),{},{ref:B,className:H,style:I,onChange:F,cols:L,disabled:g,maxLength:w,name:C,placeholder:T,required:j,rows:O,tabIndex:N,value:R,color:S,rounded:E,placeholderColor:q,fluid:x,error:b,width:z,brandPresetUsed:U}))};h.displayName="Textarea";export{c as COMPONENT_NAME,h as Textarea};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { omit } from 'ramda'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\nconst Textarea = (props: TextareaProps) => {\n const theme = useFallbackTheme()\n\n const {\n preset,\n disabled,\n error,\n fluid,\n name,\n onChange,\n maxLength,\n placeholder,\n required,\n tabIndex,\n value,\n className,\n style,\n autosize = true,\n rounded = true,\n cols = 20,\n rows = 2,\n maxRows = 30,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n ...configProps\n } = useConfigPriority<TextareaProps>(theme.components?.[COMPONENT_NAME], omit(['children'], props))\n\n const textarea = useRef() as React.MutableRefObject<HTMLTextAreaElement>\n\n const [tRows, setRows] = useState(rows)\n\n const onChangeHandler: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n const { target } = event\n\n if (target instanceof HTMLTextAreaElement && autosize) {\n const rect = target.getBoundingClientRect()\n\n if (target.scrollHeight > rect.height && tRows < maxRows) {\n setRows(tRows + 1)\n } else if (!target.value || target.value === '') {\n setRows(rows)\n }\n }\n\n if (typeof onChange === 'function') {\n onChange(event)\n }\n },\n [onChange, tRows, maxRows, autosize]\n )\n\n useEffect(() => {\n if (!textarea || !textarea.current) return\n\n const el = textarea.current\n const rect = el.getBoundingClientRect()\n if (el.scrollHeight > rect.height) {\n const lh = parseInt(getComputedStyle(el).lineHeight, 10)\n const numberOfLines = Math.floor(el.scrollHeight / lh)\n if (numberOfLines <= maxRows && numberOfLines > rows) {\n setRows(numberOfLines)\n }\n }\n }, [])\n\n let brandPresetUsed = theme.preset === 'brand'\n if (typeof preset === 'string') brandPresetUsed = preset === 'brand'\n\n return (\n <Styled.Root\n {...configProps}\n ref={textarea}\n className={className}\n style={style}\n onChange={onChangeHandler}\n cols={cols}\n disabled={disabled}\n maxLength={maxLength}\n name={name}\n placeholder={placeholder}\n required={required}\n rows={tRows}\n tabIndex={tabIndex}\n value={value}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n fluid={fluid}\n error={error}\n width={width}\n brandPresetUsed={brandPresetUsed}\n />\n )\n}\n\nTextarea.displayName = COMPONENT_NAME\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Textarea","props","_theme$components","theme","useFallbackTheme","_useConfigPriority","useConfigPriority","components","omit","preset","disabled","error","fluid","name","onChange","maxLength","placeholder","required","tabIndex","value","className","style","autosize","rounded","cols","rows","maxRows","color","placeholderColor","width","defaultInputControlsWidth","configProps","_objectWithoutProperties","_excluded","textarea","useRef","tRows","setRows","useState","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","useEffect","current","el","lh","parseInt","getComputedStyle","lineHeight","numberOfLines","Math","floor","brandPresetUsed","_jsx","Styled.Root","ref","displayName"],"mappings":"moBAOMA,IAAAA,EAAiB,WAEjBC,IAAAA,EAAYC,IAAyB,IAAAC,EACzC,IAAMC,EAAQC,IAEd,IAAAC,EAuBIC,EAAiB,QAAgBH,EAAAA,EAAMI,kBAAtB,IAAAL,OAAA,EAAgBA,EAAAF,SAAoCQ,EAAK,CAAC,YAAaP,KAvBtFQ,OACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,MAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,UAOJA,EAPIC,YAQJA,EARIC,SASJA,EATIC,SAUJA,EAVIC,MAWJA,EAXIC,UAYJA,EAZIC,MAaJA,EAbIC,SAcJA,GAAW,EAdPC,QAeJA,GAAAA,EAfIC,KAgBJA,EAAO,GAhBHC,KAiBJA,EAAO,EAjBHC,QAkBJA,EAAU,GAlBNC,MAmBJA,EAAQ,YAnBJC,iBAoBJA,EAAmB,SApBfC,MAqBJA,EAAQ1B,EAAM2B,2BArBhBzB,EAsBK0B,EAtBLC,EAAA3B,EAAA4B,GAyBA,IAAMC,EAAWC,IAEjB,IAAOC,EAAOC,GAAWC,EAASb,GAElC,IAAMc,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBrB,EAAU,CACrD,IAAMsB,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUX,EAAQV,EAC/CW,EAAQD,EAAQ,GACNM,EAAOvB,OAA0B,KAAjBuB,EAAOvB,OACjCkB,EAAQZ,GAIY,mBAAbX,GACTA,EAAS2B,KAGb,CAAC3B,EAAUsB,EAAOV,EAASJ,IAG7B0B,GAAAA,KACE,GAAKd,GAAaA,EAASe,QAA3B,CAEA,IAAMC,EAAKhB,EAASe,QACpB,IAAML,EAAOM,EAAGL,wBAChB,GAAIK,EAAGJ,aAAeF,EAAKG,OAAQ,CACjC,IAAMI,EAAKC,SAASC,iBAAiBH,GAAII,WAAY,IACrD,IAAMC,EAAgBC,KAAKC,MAAMP,EAAGJ,aAAeK,GAC/CI,GAAiB7B,GAAW6B,EAAgB9B,GAC9CY,EAAQkB,OAGX,IAEH,IAAIG,EAAmC,UAAjBvD,EAAMM,OAG5B,MAFsB,iBAAXA,IAAqBiD,EAA6B,UAAXjD,GAGhDkD,EAACC,SACK7B,GADN,GAAA,CAEE8B,IAAK3B,EACLd,UAAWA,EACXC,MAAOA,EACPP,SAAUyB,EACVf,KAAMA,EACNd,SAAUA,EACVK,UAAWA,EACXF,KAAMA,EACNG,YAAaA,EACbC,SAAUA,EACVQ,KAAMW,EACNlB,SAAUA,EACVC,MAAOA,EACPQ,MAAOA,EACPJ,QAASA,EACTK,iBAAkBA,EAClBhB,MAAOA,EACPD,MAAOA,EACPkB,MAAOA,EACP6B,gBAAiBA,MAKvB1D,EAAS8D,YAnGc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'styled-components';import{
|
|
1
|
+
import o,{css as r}from'styled-components';import{injectDefaultTheme as n}from'../../shared/utils/inject-theme.js';import{property as e,responsiveNamedProperty as t}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'../Input/helpers.js';import{baseInputStyle as a}from'../Input/style.js';var d=r(["",";"," "," "," ",""],(o=>{var{theme:r}=o;return"\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ".concat(r.colors['bg-onmain-secondary'],";\n border: 1px solid ").concat(r.colors['border-onmain-default-large'],";\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ").concat(r.colors['content-onmain-primary'],";\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ").concat(r.colors['content-onmain-secondary'],";\n }\n\n &:focus {\n border: 1px solid ").concat(r.colors['border-brand-primary'],";\n caret-color: ").concat(r.colors['border-brand-primary'],";\n outline: none;\n }\n\n &:disabled {\n background-color: ").concat(r.colors['bg-disabled-large'],";\n border-color: ").concat(r.colors['border-disabled'],";\n color: ").concat(r.colors['content-disabled'],";\n cursor: not-allowed;\n }\n ")}),(o=>o.width?e(i(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null),(o=>t({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&'auto'!==o.width?'max-width':'width',customSizeHandler:i})),(o=>{var{fluid:r}=o;return r&&'width: 100%;'}),(o=>{var{error:r,theme:n}=o;return r&&"\n background-color: ".concat(n.colors['alert-bg-error-100'],";\n border: 1px solid ").concat(n.colors['alert-bg-error-500'],";\n ")}));var c=r(["resize:none;line-height:23px;padding:16px 20px 11px;",""],a);var s=o.textarea.withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error','brandPresetUsed','theme'].includes(o)&&!o.includes('width')}).attrs(n).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["",""],(o=>{var{brandPresetUsed:r}=o;return r?d:c}));export{s as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { baseInputStyle } from '../../components/Input/style'\nimport {
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from '../../components/Input/helpers'\nimport { baseInputStyle } from '../../components/Input/style'\nimport type { TextareaRootProps } from './types'\n\n/**\n * TODO: combine following styles durnig Input component rebranding and remove it from here\n * https://jira.netology-group.ru/browse/STOEGE-20514\n */\nconst brandTextareaStyle = css<TextareaRootProps>`\n ${({ theme }) => `\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ${theme.colors['bg-onmain-secondary']};\n border: 1px solid ${theme.colors['border-onmain-default-large']};\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${theme.colors['content-onmain-primary']};\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ${theme.colors['content-onmain-secondary']};\n }\n\n &:focus {\n border: 1px solid ${theme.colors['border-brand-primary']};\n caret-color: ${theme.colors['border-brand-primary']};\n outline: none;\n }\n\n &:disabled {\n background-color: ${theme.colors['bg-disabled-large']};\n border-color: ${theme.colors['border-disabled']};\n color: ${theme.colors['content-disabled']};\n cursor: not-allowed;\n }\n `};\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n\n ${(props) =>\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\n ${({ fluid }) => fluid && 'width: 100%;'}\n\n ${({ error, theme }) =>\n error &&\n `\n background-color: ${theme.colors['alert-bg-error-100']};\n border: 1px solid ${theme.colors['alert-bg-error-500']};\n `}\n`\n\nconst baseTextareaStyle = css`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n ${baseInputStyle}\n`\n\nexport const Root = styled.textarea\n .withConfig({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error', 'brandPresetUsed', 'theme'].includes(prop) &&\n !prop.includes('width'),\n })\n .attrs(injectDefaultTheme)<TextareaRootProps>`\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandTextareaStyle : baseTextareaStyle)}\n`\n"],"names":["brandTextareaStyle","css","_ref","theme","concat","colors","props","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","_ref2","_ref3","error","baseTextareaStyle","baseInputStyle","Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","_ref4","brandPresetUsed"],"mappings":"yTAWA,IAAMA,EAAqBC,EACvB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAAAC,IAAA,IAACC,MAAEA,GAAHD,EAAA,MAAA,qIAAAE,OAOcD,EAAME,OAAO,uBACPF,6BAAAA,OAAAA,EAAME,OAAO,+BARjC,qKAAAD,OAgBSD,EAAME,OAAO,0BAOXF,uMAAAA,OAAAA,EAAME,OAAO,4BAvBxB,uDAAAD,OA2BsBD,EAAME,OAAO,wBAClBF,0BAAAA,OAAAA,EAAME,OAAO,wBA5B9B,gFAAAD,OAiCsBD,EAAME,OAAO,qBACjBF,2BAAAA,OAAAA,EAAME,OAAO,mBAlC/B,oBAAAD,OAmCWD,EAAME,OAAO,oBAnCxB,+CAwCCC,GACDA,EAAMC,MACFC,EAASC,EAAiBH,EAAMC,OAAQD,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,SAC9F,OAEHD,GACDK,EAAwB,CACtBC,MAAO,CACLC,QAASP,EAAMO,QACfC,OAAQR,EAAMQ,OACdC,OAAQT,EAAMS,OACdC,OAAQV,EAAMU,OACdC,QAASX,EAAMW,SAEjBC,YAAaZ,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,QACnEY,kBAAmBV,MAGrBW,IAAA,IAACV,MAAEA,GAAHU,EAAA,OAAeV,GAAS,kBAExBW,IAAA,IAACC,MAAEA,EAAFnB,MAASA,GAAVkB,EAAA,OACAC,GAAK,6BAAAlB,OAEiBD,EAAME,OAAO,sBAF9B,+BAAAD,OAGiBD,EAAME,OAAO,sBAJnC,cAQJ,IAAMkB,EAAoBtB,EAAH,CAAA,uDAAA,IAInBuB,GAGG,IAAMC,EAAOC,EAAOC,SACxBC,WAAW,CACVC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,QAAS,kBAAmB,SAASC,SAASD,KAChGA,EAAKC,SAAS,WAElBC,MAAMC,GANQL,WAAA,CAAAM,YAAA,uBAAGR,CAOhB,CAAA,GAAA,KAAAS,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBpC,EAAqBuB"}
|
package/dts/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, SimpleInterpolatio
|
|
|
4
4
|
import * as react from 'react';
|
|
5
5
|
import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
|
|
6
6
|
import { ResponsiveNamedProperty as ResponsiveNamedProperty$1, ResponsiveProperty as ResponsiveProperty$1 } from 'mixins/responsive-property';
|
|
7
|
-
import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1 } from 'shared/interfaces';
|
|
7
|
+
import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1, InputField as InputField$1 } from 'shared/interfaces';
|
|
8
8
|
import { SizeLatin as SizeLatin$1 } from 'shared/enums/sizeLatin';
|
|
9
9
|
import { Link, NavLink } from 'react-router-dom';
|
|
10
10
|
import { Display as Display$1 } from 'mixins/display';
|
|
@@ -332,11 +332,7 @@ interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedPr
|
|
|
332
332
|
*/
|
|
333
333
|
fluid?: boolean;
|
|
334
334
|
/**
|
|
335
|
-
*
|
|
336
|
-
*/
|
|
337
|
-
children?: React.ReactNode;
|
|
338
|
-
/**
|
|
339
|
-
* Rounded style
|
|
335
|
+
* @preset {Default} Rounded style
|
|
340
336
|
*/
|
|
341
337
|
rounded?: boolean;
|
|
342
338
|
/**
|
|
@@ -2135,56 +2131,27 @@ declare class ContextMenu extends PureComponent<ContextMenuProps, {
|
|
|
2135
2131
|
}
|
|
2136
2132
|
|
|
2137
2133
|
declare type TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>;
|
|
2138
|
-
interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {
|
|
2139
|
-
/**
|
|
2140
|
-
* Specifies the visible width of a text area
|
|
2141
|
-
*/
|
|
2134
|
+
interface TextareaProps extends BaseProps$1, InputField$1, TextAreaHTMLAttributes {
|
|
2135
|
+
/** Specifies the visible width of a text area */
|
|
2142
2136
|
cols?: number;
|
|
2143
|
-
/**
|
|
2144
|
-
* Specifies the visible number of lines in a text area
|
|
2145
|
-
*/
|
|
2137
|
+
/** Specifies the visible number of lines in a text area */
|
|
2146
2138
|
rows?: number;
|
|
2147
|
-
/**
|
|
2148
|
-
* Specifies the visible max number of lines in a text area
|
|
2149
|
-
*/
|
|
2139
|
+
/** Specifies the visible max number of lines in a text area */
|
|
2150
2140
|
maxRows?: number;
|
|
2151
|
-
/**
|
|
2152
|
-
* Specifies the maximum number of characters allowed in the text area
|
|
2153
|
-
*/
|
|
2141
|
+
/** Specifies the maximum number of characters allowed in the text area */
|
|
2154
2142
|
maxLength?: number;
|
|
2155
|
-
/**
|
|
2156
|
-
* On change handler
|
|
2157
|
-
*/
|
|
2143
|
+
/** On change handler */
|
|
2158
2144
|
onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void;
|
|
2159
|
-
/**
|
|
2160
|
-
* Value
|
|
2161
|
-
*/
|
|
2145
|
+
/** Value */
|
|
2162
2146
|
value?: string;
|
|
2163
|
-
/**
|
|
2164
|
-
* Autosize for textarea
|
|
2165
|
-
*/
|
|
2147
|
+
/** Autosize for textarea */
|
|
2166
2148
|
autosize?: boolean;
|
|
2167
2149
|
}
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
*/
|
|
2174
|
-
declare function Textarea({ cols, disabled, error, fluid, name, onChange, maxLength, placeholder, required, rounded, rows, tabIndex, value, className, style, children, autosize, maxRows, color, placeholderColor, ...props }: typeof Textarea.defaultProps & TextareaProps): JSX.Element;
|
|
2175
|
-
declare namespace Textarea {
|
|
2176
|
-
var defaultProps: {
|
|
2177
|
-
onChange: (e: react.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
2178
|
-
rounded: boolean;
|
|
2179
|
-
color: string;
|
|
2180
|
-
placeholderColor: string;
|
|
2181
|
-
cols: number;
|
|
2182
|
-
maxRows: number;
|
|
2183
|
-
rows: number;
|
|
2184
|
-
autosize: boolean;
|
|
2185
|
-
};
|
|
2186
|
-
var displayName: string;
|
|
2187
|
-
}
|
|
2150
|
+
|
|
2151
|
+
declare const Textarea: {
|
|
2152
|
+
(props: TextareaProps): JSX.Element;
|
|
2153
|
+
displayName: string;
|
|
2154
|
+
};
|
|
2188
2155
|
|
|
2189
2156
|
interface InputPhoneProps extends InputProps {
|
|
2190
2157
|
/**
|