@foxford/ui 2.20.0 → 2.20.1

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 (31) hide show
  1. package/components/Alert/style.js +1 -1
  2. package/components/Alert/style.js.map +1 -1
  3. package/components/FormInputLabel/FormInputLabel.js +1 -1
  4. package/components/FormInputLabel/FormInputLabel.js.map +1 -1
  5. package/components/FormInputLabel/constants.js +1 -1
  6. package/components/FormInputLabel/constants.js.map +1 -1
  7. package/components/FormInputLabel/style.js +1 -1
  8. package/components/FormInputLabel/style.js.map +1 -1
  9. package/components/Input/style.js +1 -1
  10. package/components/Input/style.js.map +1 -1
  11. package/components/InputCheckbox/style.js +1 -1
  12. package/components/InputCheckbox/style.js.map +1 -1
  13. package/components/InputRadio/style.js +1 -1
  14. package/components/InputRadio/style.js.map +1 -1
  15. package/components/Switcher/style.js +1 -1
  16. package/components/Switcher/style.js.map +1 -1
  17. package/components/Textarea/style.js +1 -1
  18. package/components/Textarea/style.js.map +1 -1
  19. package/dts/index.d.ts +6 -3
  20. package/index.cjs.js +1 -1
  21. package/index.cjs.js.map +1 -1
  22. package/mixins/focus.js +1 -1
  23. package/mixins/focus.js.map +1 -1
  24. package/mixins/responsive-margin.js.map +1 -1
  25. package/package.json +1 -1
  26. package/theme/colors-dark.js +1 -1
  27. package/theme/colors-dark.js.map +1 -1
  28. package/theme/colors-light.js +1 -1
  29. package/theme/colors-light.js.map +1 -1
  30. package/theme/colors.js +1 -1
  31. package/theme/colors.js.map +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{Button as t}from'../Button/Button.js';import{Text as i}from'../Text/Text.js';import{CountdownCircle as c}from'./CountdownCircle.js';var a=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var e=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var r=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(a(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(a(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 p=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})([""," ",";"],(n=>"\n display: flex;\n margin-right: ".concat((n=>{var{column:o,isCompact:t,withImage:i}=n;return t?'8px':o?i?'8px':'12px':'8px'})(n),";\n ")),(n=>n.withImage?"\n img,\n svg {\n height: ".concat(e(n),";\n width: ").concat(e(n),";\n }\n "):null));var s=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(i).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 m=n(i).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 x=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 u=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 d=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(t).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 h=n(c).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{u as Actions,g as CancelTimer,d as CloseIcon,m as Content,s as ContentWrapper,p as IconWrapper,x as Link,r as Root,h as Timer,l as Title};
1
+ import n from'styled-components';import{focus as o}from'../../mixins/focus.js';import{responsiveProperty as t}from'../../mixins/responsive-property.js';import{Button as i}from'../Button/Button.js';import{Text as c}from'../Text/Text.js';import{CountdownCircle as a}from'./CountdownCircle.js';var r=n=>{var{column:o,isCompact:t,withImage:i,withTimer:c}=n;return o?'16px':t?c?'5px':'12px':i?'8px':c?'2px':'12px'};var e=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var p=n.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(r(n),";\n padding-right: ").concat((n=>{var{isCompact:o,withCloseIcon:t,withTimer:i}=n;return t?o?'12px':'16px':i?'8px':'20px'})(n),";\n padding-bottom: ").concat(r(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:i,withAction:c,withImage:a,withTitle:r}=n;return o?r||'l'===i?a||!t?'16px':'20px':a?'12px':c&&t?'20px':'16px':r||'l'===i?a||!t?'16px':'24px':a?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: ").concat(n.isCompact?'351px':'100%',";\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(o)return n.colors['bg-onmain-primary'];switch(t){case'error':return n.colors['alert-bg-error-200'];case'info':return n.colors['bg-brand-primary-200'];case'success':return n.colors['alert-bg-success-200'];case'warning':return n.colors['alert-bg-warning-200'];default:return n.colors['bg-oncolor-primary']}})(n.theme,!!n.clear,n.type),";\n box-shadow: ").concat(n.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none',";\n box-sizing: border-box;\n ")),t('width','width'));var s=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})([""," ",";"],(n=>"\n display: flex;\n margin-right: ".concat((n=>{var{column:o,isCompact:t,withImage:i}=n;return t?'8px':o?i?'8px':'12px':'8px'})(n),";\n ")),(n=>n.withImage?"\n img,\n svg {\n height: ".concat(e(n),";\n width: ").concat(e(n),";\n }\n "):null));var m=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-2"})(["",""],(n=>"\n display: flex;\n margin-right: auto;\n flex-direction: ".concat(n.column?'column':'row',";\n align-items: ").concat(n.column?'flex-start':'center',";\n align-self: center;\n max-width: ").concat(n.column?'260px':'initial',";\n white-space: ").concat(n.column||n.isCompact?'normal':'nowrap',";\n overflow: hidden;\n ")));var l=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-3"})(["",""],(n=>"\n display: inline-block;\n margin-top: ".concat(n.isCompact?'0':'2px',";\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n ")));var x=n(c).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["",""],(n=>"\n text-overflow: ".concat(n.column||n.isCompact?'clip':'ellipsis',";\n white-space: ").concat(n.column||n.isCompact||n.textWrap?'pre-wrap':'inherit',";\n overflow: hidden;\n ")));var u=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-5"})(["",""],(n=>"\n display: flex;\n margin-top: ".concat(n.column?n.isCompact&&!n.withTitle?'4px':'12px':0,";\n margin-left: ").concat(n.column?0:'60px',";\n color: ").concat(n.clear?n.theme.colors['content-link']:n.theme.colors['content-onmain-primary'],";\n ")));var d=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-6"})(["",""],(n=>"\n margin-top: ".concat((n=>{var{column:o,isCompact:t,withTitle:i}=n;return o?t?i?'16px':'8px':'16px':0})(n),";\n margin-left: ").concat(n.column?0:'60px',";\n\n && > button {\n margin-left: 0;\n }\n ")));var g=n.button.withConfig({componentId:"fox-ui__sc-1v79u95-7"})([""," ",""],(n=>"\n appearance: none;\n display: flex;\n margin-left: ".concat(n.withTimer?'0':'16px',";\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n border-radius: 50%;\n ")),o);var f=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 h=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,f as CancelTimer,g as CloseIcon,x as Content,m as ContentWrapper,s as IconWrapper,u as Link,p as Root,h 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'\n\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (theme: DefaultTheme, clear: boolean, type?: AlertType) => {\n if (clear) {\n return theme.colors['bg-onmain-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n }\n\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '20px'\n }\n\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n }\n\n return withImage ? '16px' : '20px'\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n }\n\n return withTimer ? '8px' : '20px'\n}\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n }\n\n return 0\n}\n\nexport const Root = styled.div.withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n})`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.theme, !!props.clear, props.type)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? `\n img,\n svg {\n height: ${getImageSize(props)};\n width: ${getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n align-self: center;\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled.div<LinkProps>`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n\n && > button {\n margin-left: 0;\n }\n `}\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n 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","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'\nimport { focus } from 'mixins/focus'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\n\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (theme: DefaultTheme, clear: boolean, type?: AlertType) => {\n if (clear) {\n return theme.colors['bg-onmain-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n }\n\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '20px'\n }\n\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n }\n\n return withImage ? '16px' : '20px'\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n }\n\n return withTimer ? '8px' : '20px'\n}\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n }\n\n return 0\n}\n\nexport const Root = styled.div.withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n})`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.theme, !!props.clear, props.type)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? `\n img,\n svg {\n height: ${getImageSize(props)};\n width: ${getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n align-self: center;\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled.div<LinkProps>`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n\n && > button {\n margin-left: 0;\n }\n `}\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n border-radius: 50%;\n `}\n ${focus}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","_ref","column","isCompact","withImage","withTimer","getImageSize","_ref5","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","concat","textWrap","paddingRight","_ref3","withCloseIcon","paddingLeft","_ref2","noIcon","size","withAction","withTitle","theme","clear","type","colors","responsiveProperty","IconWrapper","getMarginRightIconWrapper","_ref4","ContentWrapper","Title","Text","Content","Link","Actions","_ref6","CloseIcon","button","focus","CancelTimer","Button","Timer","CountdownCircle","color"],"mappings":"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"}
package/components/FormInputLabel/FormInputLabel.js CHANGED
@@ -1,2 +1,2 @@
1
- import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as o}from'react';import{Text as i}from'../Text/Text.js';import{Icon as t}from'../Icon/Icon.js';import'../Icon/icons.js';import{Spacer as s}from'../Spacer/Spacer.js';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{SIZES as n}from'./constants.js';import{Root as p,Label as l,Caption as m}from'./style.js';import{jsxs as c,jsx as h}from'react/jsx-runtime';var f=["size","labelPosition","textProps","iconProps","icon","input","label","text","controls"];var b='FormInputLabel';var d=a(o(((o,a)=>{var{size:n="m",labelPosition:b="dynamic",textProps:d={},iconProps:x={},icon:j,input:P,label:u,text:I,controls:S}=o,g=e(o,f);return c(p,r(r({},g),{},{size:n,labelPosition:b,ref:a,children:[j&&h(s,{display:"flex",marginRight:12,children:h(t,r({as:"span",color:"inherit",icon:j},x))}),c(l,r(r({size:"inherit",color:"inherit"},d),{},{children:[P,u&&h(m,{children:u})]})),I&&h(i,r(r({size:"inherit",color:"inherit",whiteSpace:"nowrap",marginLeft:12},d),{},{children:I})),S&&h(s,{display:"flex",marginLeft:4,children:S})]}))})),{sizes:n,displayName:"FormInputLabel"});export{b as COMPONENT_NAME,d as FormInputLabel};
1
+ import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{Text as i}from'../Text/Text.js';import{Icon as t}from'../Icon/Icon.js';import'../Icon/icons.js';import{Spacer as s}from'../Spacer/Spacer.js';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{SIZES as n}from'./constants.js';import{Root as p,Label as l,Caption as m}from'./style.js';import{jsxs as c,jsx as h}from'react/jsx-runtime';var f=["size","labelPosition","textProps","iconProps","icon","input","label","text","controls"];var b='FormInputLabel';var d=a(e(((e,a)=>{var{size:n="m",labelPosition:b="dynamic",textProps:d={},iconProps:x={},icon:j,input:P,label:u,text:g,controls:I}=e,S=o(e,f);return c(p,r(r({},S),{},{size:n,labelPosition:b,ref:a,children:[j&&h(s,{display:"flex",marginRight:12,children:h(t,r({as:"span",color:"inherit",icon:j},x))}),c(l,r(r({size:"inherit",color:"inherit"},d),{},{children:[P,u&&h(m,{children:u})]})),g&&h(i,r(r({size:"inherit",color:"inherit",whiteSpace:"nowrap",marginLeft:12,marginRight:I?void 0:6},d),{},{children:g})),I&&h(s,{display:"flex",marginLeft:4,children:I})]}))})),{sizes:n,displayName:"FormInputLabel"});export{b as COMPONENT_NAME,d as FormInputLabel};
2
2
  //# sourceMappingURL=FormInputLabel.js.map
package/components/FormInputLabel/FormInputLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormInputLabel.js","sources":["../../../../src/components/FormInputLabel/FormInputLabel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Spacer } from 'components/Spacer'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { FormInputLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormInputLabel'\n\nconst FormInputLabel: React.ForwardRefExoticComponent<FormInputLabelProps> = withMergedProps<\n FormInputLabelProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n icon,\n input,\n label,\n text,\n controls,\n ...restProps\n } = props\n\n return (\n <Styled.Root {...restProps} size={size} labelPosition={labelPosition} ref={ref}>\n {icon && (\n <Spacer display='flex' marginRight={12}>\n <Icon as='span' color='inherit' icon={icon} {...iconProps} />\n </Spacer>\n )}\n <Styled.Label size='inherit' color='inherit' {...textProps}>\n {input}\n {label && <Styled.Caption>{label}</Styled.Caption>}\n </Styled.Label>\n {text && (\n <Text size='inherit' color='inherit' whiteSpace='nowrap' marginLeft={12} {...textProps}>\n {text}\n </Text>\n )}\n {controls && (\n <Spacer display='flex' marginLeft={4}>\n {controls}\n </Spacer>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { FormInputLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormInputLabel","withMergedProps","forwardRef","props","ref","size","labelPosition","textProps","iconProps","icon","input","label","text","controls","restProps","_excluded","_jsxs","Styled.Root","children","_jsx","Spacer","display","marginRight","Icon","_objectSpread","as","color","Styled.Label","Styled.Caption","Text","whiteSpace","marginLeft","sizes","SIZES","displayName"],"mappings":"4lBASMA,IAAAA,EAAiB,iBAEjBC,IAAAA,EAAuEC,EAI3EC,GAAAA,CAAYC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,cAEJA,EAAgB,UAFZC,UAGJA,EAAY,GAHRC,UAIJA,EAAY,GAJRC,KAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,KAQJA,EARIC,SASJA,GAEEV,EADCW,IACDX,EAXJY,GAaA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BT,KAAMA,EAAMC,cAAeA,EAAeF,IAAKA,EAA3Ec,SACGT,CAAAA,GACCU,EAACC,EAAD,CAAQC,QAAQ,OAAOC,YAAa,GAApCJ,SACEC,EAACI,EAADC,EAAA,CAAMC,GAAG,OAAOC,MAAM,UAAUjB,KAAMA,GAAUD,MAGpDQ,EAACW,EAADH,EAAAA,EAAA,CAAcnB,KAAK,UAAUqB,MAAM,WAAcnB,GAAjD,GAAA,CAAAW,SAAA,CACGR,EACAC,GAASQ,EAACS,EAAD,CAAAV,SAAiBP,QAE5BC,GACCO,EAACU,EAADL,EAAAA,EAAA,CAAMnB,KAAK,UAAUqB,MAAM,UAAUI,WAAW,SAASC,WAAY,IAAQxB,GAA7E,GAAA,CAAAW,SACGN,KAGJC,GACCM,EAACC,EAAD,CAAQC,QAAQ,OAAOU,WAAY,EAAnCb,SACGL,WAMX,CACEmB,MAAOC,EACPC,YA9CmB"}
1
+ {"version":3,"file":"FormInputLabel.js","sources":["../../../../src/components/FormInputLabel/FormInputLabel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Spacer } from 'components/Spacer'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { FormInputLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormInputLabel'\n\nconst FormInputLabel: React.ForwardRefExoticComponent<FormInputLabelProps> = withMergedProps<\n FormInputLabelProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 'm',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n icon,\n input,\n label,\n text,\n controls,\n ...restProps\n } = props\n\n return (\n <Styled.Root {...restProps} size={size} labelPosition={labelPosition} ref={ref}>\n {icon && (\n <Spacer display='flex' marginRight={12}>\n <Icon as='span' color='inherit' icon={icon} {...iconProps} />\n </Spacer>\n )}\n <Styled.Label size='inherit' color='inherit' {...textProps}>\n {input}\n {label && <Styled.Caption>{label}</Styled.Caption>}\n </Styled.Label>\n {text && (\n <Text\n size='inherit'\n color='inherit'\n whiteSpace='nowrap'\n marginLeft={12}\n marginRight={!controls ? 6 : undefined}\n {...textProps}\n >\n {text}\n </Text>\n )}\n {controls && (\n <Spacer display='flex' marginLeft={4}>\n {controls}\n </Spacer>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { FormInputLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormInputLabel","withMergedProps","forwardRef","props","ref","size","labelPosition","textProps","iconProps","icon","input","label","text","controls","restProps","_excluded","_jsxs","Styled.Root","children","_jsx","Spacer","display","marginRight","Icon","_objectSpread","as","color","Styled.Label","Styled.Caption","Text","whiteSpace","marginLeft","sizes","SIZES","displayName"],"mappings":"4lBASMA,IAAAA,EAAiB,iBAEjBC,IAAAA,EAAuEC,EAI3EC,GAAW,CAACC,EAAOC,KACjB,IAAMC,KACJA,EAAO,IADHC,cAEJA,EAAgB,UAFZC,UAGJA,EAAY,GAHRC,UAIJA,EAAY,GAJRC,KAKJA,EALIC,MAMJA,EANIC,MAOJA,EAPIC,KAQJA,EARIC,SASJA,GAEEV,EADCW,IACDX,EAXJY,GAaA,OACEC,EAACC,SAAgBH,GAAjB,GAAA,CAA4BT,KAAMA,EAAMC,cAAeA,EAAeF,IAAKA,EAA3Ec,SACGT,CAAAA,GACCU,EAACC,EAAD,CAAQC,QAAQ,OAAOC,YAAa,GAApCJ,SACEC,EAACI,EAADC,EAAA,CAAMC,GAAG,OAAOC,MAAM,UAAUjB,KAAMA,GAAUD,MAGpDQ,EAACW,EAADH,EAAAA,EAAA,CAAcnB,KAAK,UAAUqB,MAAM,WAAcnB,GAAjD,GAAA,CAAAW,SAAA,CACGR,EACAC,GAASQ,EAACS,EAAD,CAAAV,SAAiBP,QAE5BC,GACCO,EAACU,EAADL,EAAAA,EAAA,CACEnB,KAAK,UACLqB,MAAM,UACNI,WAAW,SACXC,WAAY,GACZT,YAAcT,SAAW,GACrBN,GANN,GAAA,CAAAW,SAQGN,KAGJC,GACCM,EAACC,EAAD,CAAQC,QAAQ,OAAOU,WAAY,EAAnCb,SACGL,WAMX,CACEmB,MAAOC,EACPC,YArDmB"}
package/components/FormInputLabel/constants.js CHANGED
@@ -1,2 +1,2 @@
1
- var d={xxxl:{fontSize:22,paddingTop:4,paddingRight:16,paddingBottom:4,paddingLeft:16,minHeight:72},xxl:{fontSize:22,paddingTop:4,paddingRight:16,paddingBottom:4,paddingLeft:16,minHeight:72},xl:{fontSize:20,paddingTop:4,paddingRight:16,paddingBottom:4,paddingLeft:16,minHeight:64},l:{fontSize:18,paddingTop:4,paddingRight:16,paddingBottom:4,paddingLeft:16,minHeight:56},m:{fontSize:16,paddingTop:4,paddingRight:16,paddingBottom:4,paddingLeft:16,minHeight:48},s:{fontSize:14,paddingTop:4,paddingRight:14,paddingBottom:4,paddingLeft:14,minHeight:40},xs:{fontSize:12,paddingTop:4,paddingRight:14,paddingBottom:4,paddingLeft:14,minHeight:40},xxs:{fontSize:12,paddingTop:4,paddingRight:14,paddingBottom:4,paddingLeft:14,minHeight:40},xxxs:{fontSize:12,paddingTop:4,paddingRight:14,paddingBottom:4,paddingLeft:14,minHeight:40}};export{d as SIZES};
1
+ var d={xxxl:{fontSize:22,paddingTop:4,paddingRight:8,paddingBottom:4,paddingLeft:16,minHeight:72,borderRadius:15},xxl:{fontSize:22,paddingTop:4,paddingRight:8,paddingBottom:4,paddingLeft:16,minHeight:72,borderRadius:15},xl:{fontSize:20,paddingTop:4,paddingRight:8,paddingBottom:4,paddingLeft:16,minHeight:64,borderRadius:13},l:{fontSize:18,paddingTop:4,paddingRight:8,paddingBottom:4,paddingLeft:16,minHeight:56,borderRadius:12},m:{fontSize:16,paddingTop:4,paddingRight:8,paddingBottom:4,paddingLeft:16,minHeight:48,borderRadius:10},s:{fontSize:14,paddingTop:4,paddingRight:6,paddingBottom:4,paddingLeft:14,minHeight:40,borderRadius:8},xs:{fontSize:12,paddingTop:4,paddingRight:6,paddingBottom:4,paddingLeft:14,minHeight:40,borderRadius:8},xxs:{fontSize:12,paddingTop:4,paddingRight:6,paddingBottom:4,paddingLeft:14,minHeight:40,borderRadius:8},xxxs:{fontSize:12,paddingTop:4,paddingRight:6,paddingBottom:4,paddingLeft:14,minHeight:40,borderRadius:8}};export{d as SIZES};
2
2
  //# sourceMappingURL=constants.js.map
package/components/FormInputLabel/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/components/FormInputLabel/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n fontSize: 22,\n paddingTop: 4,\n paddingRight: 16,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 72,\n },\n xxl: {\n fontSize: 22,\n paddingTop: 4,\n paddingRight: 16,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 72,\n },\n xl: {\n fontSize: 20,\n paddingTop: 4,\n paddingRight: 16,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 64,\n },\n l: {\n fontSize: 18,\n paddingTop: 4,\n paddingRight: 16,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 56,\n },\n m: {\n fontSize: 16,\n paddingTop: 4,\n paddingRight: 16,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 48,\n },\n s: {\n fontSize: 14,\n paddingTop: 4,\n paddingRight: 14,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n },\n xs: {\n fontSize: 12,\n paddingTop: 4,\n paddingRight: 14,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n },\n xxs: {\n fontSize: 12,\n paddingTop: 4,\n paddingRight: 14,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n },\n xxxs: {\n fontSize: 12,\n paddingTop: 4,\n paddingRight: 14,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n },\n}\n"],"names":["SIZES","xxxl","fontSize","paddingTop","paddingRight","paddingBottom","paddingLeft","minHeight","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbC,IAAK,CACHN,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbE,GAAI,CACFP,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbG,EAAG,CACDR,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbI,EAAG,CACDT,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbK,EAAG,CACDV,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbM,GAAI,CACFX,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbO,IAAK,CACHZ,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW,IAEbQ,KAAM,CACJb,SAAU,GACVC,WAAY,EACZC,aAAc,GACdC,cAAe,EACfC,YAAa,GACbC,UAAW"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/components/FormInputLabel/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n fontSize: 22,\n paddingTop: 4,\n paddingRight: 8,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 72,\n borderRadius: 15,\n },\n xxl: {\n fontSize: 22,\n paddingTop: 4,\n paddingRight: 8,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 72,\n borderRadius: 15,\n },\n xl: {\n fontSize: 20,\n paddingTop: 4,\n paddingRight: 8,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 64,\n borderRadius: 13,\n },\n l: {\n fontSize: 18,\n paddingTop: 4,\n paddingRight: 8,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 56,\n borderRadius: 12,\n },\n m: {\n fontSize: 16,\n paddingTop: 4,\n paddingRight: 8,\n paddingBottom: 4,\n paddingLeft: 16,\n minHeight: 48,\n borderRadius: 10,\n },\n s: {\n fontSize: 14,\n paddingTop: 4,\n paddingRight: 6,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n borderRadius: 8,\n },\n xs: {\n fontSize: 12,\n paddingTop: 4,\n paddingRight: 6,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n borderRadius: 8,\n },\n xxs: {\n fontSize: 12,\n paddingTop: 4,\n paddingRight: 6,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n borderRadius: 8,\n },\n xxxs: {\n fontSize: 12,\n paddingTop: 4,\n paddingRight: 6,\n paddingBottom: 4,\n paddingLeft: 14,\n minHeight: 40,\n borderRadius: 8,\n },\n}\n"],"names":["SIZES","xxxl","fontSize","paddingTop","paddingRight","paddingBottom","paddingLeft","minHeight","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,IAEhBC,IAAK,CACHP,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,IAEhBE,GAAI,CACFR,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,IAEhBG,EAAG,CACDT,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,IAEhBI,EAAG,CACDV,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,IAEhBK,EAAG,CACDX,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,GAEhBM,GAAI,CACFZ,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,GAEhBO,IAAK,CACHb,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc,GAEhBQ,KAAM,CACJd,SAAU,GACVC,WAAY,EACZC,aAAc,EACdC,cAAe,EACfC,YAAa,GACbC,UAAW,GACXC,aAAc"}
package/components/FormInputLabel/style.js CHANGED
@@ -1,2 +1,2 @@
1
- import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{Text as t}from'../Text/Text.js';import{createShouldForwardProp as a}from'../../shared/utils/style.js';import{responsiveSize as c}from'../../mixins/responsive-size.js';import{responsiveMargin as l}from'../../mixins/responsive-margin.js';var s=a((o=>!['primary','secondary','active','error','success','disabled','onColored','labelPosition','inline'].includes(o)));var i=r(t).attrs({forwardedAs:'label'}).withConfig({componentId:"fox-ui__sc-1il4atw-0"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;&::after{content:'';position:absolute;bottom:0;right:0;width:40px;height:100%;pointer-events:none;opacity:1;background-image:linear-gradient(90deg,transparent,currentColor);transition-property:color,opacity;}"]);var d=r.span.withConfig({componentId:"fox-ui__sc-1il4atw-1"})(["box-sizing:border-box;position:absolute;left:0;top:50%;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition-property:transform;"]);var m=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n & > ").concat(i,"::after {\n color: ").concat(o.backgroundColor,";\n }\n \n");var b={onColored:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-200'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-200'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-200'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-200'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-onmain-primary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},secondary:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-secondary']:n(r.theme.colors['bg-onmain-secondary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},primary:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-onmain-primary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))}};var g=r.div.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),padding:'0.25em 1em',minHeight:'3em'})}).withConfig({componentId:"fox-ui__sc-1il4atw-2"})([""," "," "," ",""],(o=>{var r;var e=o.active?'scale(0.7) translateX(-21.5%) translateY(-160%)':'translateY(-50%)';var n='1';var t='auto';return'top'===o.labelPosition&&(e='scale(0.7) translateX(-21.5%) translateY(-160%)'),'center'===o.labelPosition&&(e="translateY(-50%)",n=o.active?'0':'1',t=o.active?'-1':'auto'),"\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ".concat(o.inline?'inline-flex':'flex',";\n cursor: ").concat((null!==(r=o.cursor)&&void 0!==r?r:o.disabled)?'not-allowed':'pointer',";\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n border-radius: 10px;\n transition-property: background-color;\n\n &,\n & > ").concat(i,"::after,\n & > ").concat(i," > ").concat(d," {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ").concat(i," > ").concat(d," {\n transform: ").concat(e,";\n opacity: ").concat(n,";\n z-index: ").concat(t,";\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ").concat(o.theme.colors.toryBlueDark,", 0 0 0 4px ").concat(o.theme.colors.white,";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ").concat(i,"::after,\n &:focus-within > ").concat(i,"::after {\n opacity: 0;\n }\n ")}),(o=>{var r=b.primary;return o.secondary&&(r=b.secondary),o.onColored&&(r=b.onColored),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),c,l);export{d as Caption,i as Label,g as Root};
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{Text as t}from'../Text/Text.js';import{createShouldForwardProp as a}from'../../shared/utils/style.js';import{responsiveSize as c}from'../../mixins/responsive-size.js';import{responsiveMargin as l}from'../../mixins/responsive-margin.js';var s=a((o=>!['primary','secondary','active','error','success','disabled','onColored','labelPosition','inline'].includes(o)));var i=r(t).attrs({forwardedAs:'label'}).withConfig({componentId:"fox-ui__sc-1il4atw-0"})(["box-sizing:border-box;position:relative;display:flex;flex-grow:1;align-self:stretch;cursor:inherit;&::after{content:'';position:absolute;bottom:0;right:0;width:40px;height:100%;pointer-events:none;opacity:1;background-image:linear-gradient(90deg,transparent,currentColor);transition-property:color,opacity;}"]);var d=r.span.withConfig({componentId:"fox-ui__sc-1il4atw-1"})(["box-sizing:border-box;position:absolute;left:0;top:50%;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition-property:transform;"]);var m=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n & > ").concat(i,"::after {\n color: ").concat(o.backgroundColor,";\n }\n \n");var b={onColored:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-200'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-200'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-200'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-200'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-onmain-primary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},secondary:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-secondary']:n(r.theme.colors['bg-onmain-secondary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},primary:{disabled:e(["",""],(r=>m(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors.transparent,colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors.transparent},r.palette)))),error:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-bg-success-500']},r.palette)))),default:e(["",""],(r=>m(o({color:r.theme.colors['content-onmain-secondary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-secondary'],backgroundColorHover:r.active?r.theme.colors['bg-onmain-primary']:n(r.theme.colors['bg-onmain-primary']).darken(4).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))}};var g=r.div.withConfig({shouldForwardProp:s}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),padding:'0.25em 0.6em 0.25em 1em',minHeight:'3em',borderRadius:'0.6em'})}).withConfig({componentId:"fox-ui__sc-1il4atw-2"})([""," "," "," ",""],(o=>{var r;var e=o.active?'scale(0.7) translateX(-21.5%) translateY(-145%)':'translateY(-50%)';var n='1';var t='auto';return'top'===o.labelPosition&&(e='scale(0.7) translateX(-21.5%) translateY(-145%)'),'center'===o.labelPosition&&(e="translateY(-50%)",n=o.active?'0':'1',t=o.active?'-1':'auto'),"\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ".concat(o.inline?'inline-flex':'flex',";\n cursor: ").concat((null!==(r=o.cursor)&&void 0!==r?r:o.disabled)?'not-allowed':'pointer',";\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ").concat(i,"::after,\n & > ").concat(i," > ").concat(d," {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ").concat(i," > ").concat(d," {\n transform: ").concat(e,";\n opacity: ").concat(n,";\n z-index: ").concat(t,";\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ").concat(o.theme.colors.white,", 0 0 0 4px ").concat(o.theme.colors['border-focus'],";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ").concat(i,"::after,\n &:focus-within > ").concat(i,"::after {\n opacity: 0;\n }\n ")}),(o=>{var r=b.primary;return o.secondary&&(r=b.secondary),o.onColored&&(r=b.onColored),o.disabled?r.disabled:o.error?r.error:o.success?r.success:r.default}),c,l);export{d as Caption,i as Label,g as Root};
2
2
  //# sourceMappingURL=style.js.map
package/components/FormInputLabel/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { Text } from 'components/Text'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'active',\n 'error',\n 'success',\n 'disabled',\n 'onColored',\n 'labelPosition',\n 'inline',\n ].includes(propKey)\n)\n\nexport const Label = styled(Text).attrs({ forwardedAs: 'label' })`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: 1;\n background-image: linear-gradient(90deg, transparent, currentColor);\n transition-property: color, opacity;\n }\n`\n\nexport const Caption = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition-property: transform;\n`\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n & > ${Label}::after {\n color: ${palette.backgroundColor};\n }\n \n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n })\n .attrs<StyledFormInputLabelProps>(<Required<Pick<StyledFormInputLabelProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.25em 1em',\n minHeight: '3em',\n }),\n })`\n ${(props) => {\n let transform = props.active ? 'scale(0.7) translateX(-21.5%) translateY(-160%)' : 'translateY(-50%)'\n let opacity = '1'\n let zIndex = 'auto'\n\n if (props.labelPosition === 'top') {\n transform = 'scale(0.7) translateX(-21.5%) translateY(-160%)'\n }\n if (props.labelPosition === 'center') {\n transform = `translateY(-50%)`\n opacity = props.active ? '0' : '1'\n zIndex = props.active ? '-1' : 'auto'\n }\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n border-radius: 10px;\n transition-property: background-color;\n\n &,\n & > ${Label}::after,\n & > ${Label} > ${Caption} {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ${Label} > ${Caption} {\n transform: ${transform};\n opacity: ${opacity};\n z-index: ${zIndex};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.toryBlueDark}, 0 0 0 4px ${props.theme.colors.white};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ${Label}::after,\n &:focus-within > ${Label}::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","Label","styled","Text","attrs","forwardedAs","withConfig","componentId","Caption","span","template","palette","concat","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","onColored","disabled","css","props","_objectSpread","theme","colors","transparent","error","success","default","active","tinycolor","darken","toString","secondary","primary","Root","div","shouldForwardProp","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","minHeight","_props$cursor","transform","opacity","zIndex","labelPosition","inline","cursor","toryBlueDark","white","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { Text } from 'components/Text'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'active',\n 'error',\n 'success',\n 'disabled',\n 'onColored',\n 'labelPosition',\n 'inline',\n ].includes(propKey)\n)\n\nexport const Label = styled(Text).attrs({ forwardedAs: 'label' })`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: 1;\n background-image: linear-gradient(90deg, transparent, currentColor);\n transition-property: color, opacity;\n }\n`\n\nexport const Caption = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform;\n`\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n & > ${Label}::after {\n color: ${palette.backgroundColor};\n }\n \n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : (tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.active\n ? props.theme.colors['bg-onmain-primary']\n : (tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor),\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n })\n .attrs<StyledFormInputLabelProps>(<Required<Pick<StyledFormInputLabelProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.25em 0.6em 0.25em 1em',\n minHeight: '3em',\n borderRadius: '0.6em',\n }),\n })`\n ${(props) => {\n let transform = props.active ? 'scale(0.7) translateX(-21.5%) translateY(-145%)' : 'translateY(-50%)'\n let opacity = '1'\n let zIndex = 'auto'\n\n if (props.labelPosition === 'top') {\n transform = 'scale(0.7) translateX(-21.5%) translateY(-145%)'\n }\n if (props.labelPosition === 'center') {\n transform = `translateY(-50%)`\n opacity = props.active ? '0' : '1'\n zIndex = props.active ? '-1' : 'auto'\n }\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ${Label}::after,\n & > ${Label} > ${Caption} {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ${Label} > ${Caption} {\n transform: ${transform};\n opacity: ${opacity};\n z-index: ${zIndex};\n }\n\n &:focus-within {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n\n &:hover > ${Label}::after,\n &:focus-within > ${Label}::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","Label","styled","Text","attrs","forwardedAs","withConfig","componentId","Caption","span","template","palette","concat","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","onColored","disabled","css","props","_objectSpread","theme","colors","transparent","error","success","default","active","tinycolor","darken","toString","secondary","primary","Root","div","shouldForwardProp","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","minHeight","borderRadius","_props$cursor","transform","opacity","zIndex","labelPosition","inline","cursor","white","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
package/components/Input/style.js CHANGED
@@ -1,2 +1,2 @@
1
- import o from'@babel/runtime/helpers/objectSpread2';import r,{css as n}from'styled-components';import e from'react-input-mask';import t from'tinycolor2';import{color as l}from'../../mixins/color.js';import{property as a,responsiveNamedProperty as c}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'./helpers.js';import{focus as s}from'../../mixins/focus.js';var d=n(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>t(o.theme.colors.pomegranate).setAlpha(.1).toString()));var p=n(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);var u=n(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));var h=n(["border-radius:",";"],(o=>o.theme.borderRadius));var b=o=>n(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?l(o.color):null,o.placeholderColor?l(o.placeholderColor):null,u,o.disabled?p:null,o.rounded?h:null,o.width?a(i(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null,c({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.fluid?n(["width:100%;"]):null,o.error?d:null);var m=r(e).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({componentId:"fox-ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>b(o)));var g=r(e).withConfig({shouldForwardProp:o=>!['palette','label','labelPosition','active','cursor'].includes(o)}).withConfig({componentId:"fox-ui__sc-1gazj3c-1"})([""," ",""],(o=>{var r;var n='1';var e='0px';return o.label&&'dynamic'===o.labelPosition&&(n="".concat(o.active?1:0),e='16px'),o.label&&'top'===o.labelPosition&&(e='16px'),o.label&&'center'===o.labelPosition&&(n="".concat(o.active?1:0)),"\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ".concat(n,";\n padding-top: ").concat(e,";\n cursor: ").concat((null!==(r=o.cursor)&&void 0!==r?r:o.disabled)?'not-allowed':'auto',";\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n outline: none;\n }\n ")}),(r=>{return n=o({inputColor:r.theme.colors['content-onmain-primary'],inputPlaceholderColor:r.theme.colors['content-onmain-secondary'],inputColorDisabled:r.theme.colors['content-disabled'],inputPlaceholderColorDisabled:r.theme.colors['content-disabled']},r.palette),"\n color: ".concat(n.inputColor,";\n &::placeholder {\n color: ").concat(n.inputPlaceholderColor,";\n }\n &:disabled {\n color: ").concat(n.inputColorDisabled,";\n }\n &:disabled::placeholder {\n color: ").concat(n.inputPlaceholderColorDisabled,";\n }\n");var n}));var f=r.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-1gazj3c-2"})(["box-sizing:border-box;appearance:none;position:relative;padding:6px;margin:0;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;cursor:inherit;&:first-child{margin-left:4px;}&:not(:first-child){margin-left:9px;}&:not(:first-child)::before{content:'';position:absolute;width:1px;height:60%;top:50%;left:-5px;transform:translateY(-50%);}"," ",""],(r=>{return n=o({controlsColor:r.theme.colors['content-onmain-tertiary'],controlsColorHover:r.theme.colors['content-onmain-primary'],controlsColorActive:r.theme.colors['content-onmain-primary'],controlsColorDisabled:r.theme.colors['content-disabled'],controlsBackgroundColor:r.theme.colors.transparent,controlsBackgroundColorHover:t(r.theme.colors['bg-oncolor-hover']).lighten(20).toString(),controlsBackgroundColorActive:r.theme.colors['bg-oncolor-hover'],controlsBackgroundColorDisabled:r.theme.colors.transparent,controlsSeparatorColor:r.theme.colors['border-onmain-default-large']},r.palette),"\n color: ".concat(n.controlsColor,";\n background-color: ").concat(n.controlsBackgroundColor,";\n &:hover {\n color: ").concat(n.controlsColorHover,";\n background-color: ").concat(n.controlsBackgroundColorHover,";\n }\n &:active {\n color: ").concat(n.controlsColorActive,";\n background-color: ").concat(n.controlsBackgroundColorActive,";\n }\n &:disabled {\n color: ").concat(n.controlsColorDisabled,";\n background-color: ").concat(n.controlsBackgroundColorDisabled,";\n }\n &:not(:first-child)::before {\n background-color: ").concat(n.controlsSeparatorColor,";\n }\n");var n}),s);export{g as Input,f as InputControl,m as Root,b as baseInputStyle,p as disabledStyle,d as errorStyle,u as focusStyle,h as roundedStyle};
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r,{css as n}from'styled-components';import e from'react-input-mask';import t from'tinycolor2';import{color as l}from'../../mixins/color.js';import{property as a,responsiveNamedProperty as c}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'./helpers.js';import{focus as s}from'../../mixins/focus.js';var d=n(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>t(o.theme.colors.pomegranate).setAlpha(.1).toString()));var p=n(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);var u=n(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));var h=n(["border-radius:",";"],(o=>o.theme.borderRadius));var b=o=>n(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?l(o.color):null,o.placeholderColor?l(o.placeholderColor):null,u,o.disabled?p:null,o.rounded?h:null,o.width?a(i(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null,c({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.fluid?n(["width:100%;"]):null,o.error?d:null);var m=r(e).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({componentId:"fox-ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>b(o)));var g=r(e).withConfig({shouldForwardProp:o=>!['palette','label','labelPosition','active','cursor'].includes(o)}).withConfig({componentId:"fox-ui__sc-1gazj3c-1"})([""," ",""],(o=>{var r;var n='1';var e='0px';return o.label&&'dynamic'===o.labelPosition&&(n="".concat(o.active?1:0),e='0.8em'),o.label&&'top'===o.labelPosition&&(e='0.8em'),o.label&&'center'===o.labelPosition&&(n="".concat(o.active?1:0)),"\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ".concat(n,";\n padding-top: ").concat(e,";\n cursor: ").concat((null!==(r=o.cursor)&&void 0!==r?r:o.disabled)?'not-allowed':'pointer',";\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n ")}),(r=>{return n=o({inputColor:r.theme.colors['content-onmain-primary'],inputPlaceholderColor:r.theme.colors['content-onmain-secondary'],inputColorDisabled:r.theme.colors['content-disabled'],inputPlaceholderColorDisabled:r.theme.colors['content-disabled']},r.palette),"\n color: ".concat(n.inputColor,";\n &::placeholder {\n color: ").concat(n.inputPlaceholderColor,";\n }\n &:disabled {\n color: ").concat(n.inputColorDisabled,";\n }\n &:disabled::placeholder {\n color: ").concat(n.inputPlaceholderColorDisabled,";\n }\n");var n}));var f=r.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-1gazj3c-2"})(["box-sizing:border-box;appearance:none;position:relative;padding:5px;margin:0;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;cursor:inherit;&:first-child{margin-left:4px;}&:not(:first-child){margin-left:9px;}&:not(:first-child)::before{content:'';position:absolute;width:1px;height:60%;top:50%;left:-5px;transform:translateY(-50%);}"," ",""],(r=>{return n=o({controlsColor:r.theme.colors['content-onmain-tertiary'],controlsColorHover:r.theme.colors['content-onmain-primary'],controlsColorActive:r.theme.colors['content-onmain-primary'],controlsColorDisabled:r.theme.colors['content-disabled'],controlsBackgroundColor:r.theme.colors.transparent,controlsBackgroundColorHover:t(r.theme.colors['bg-oncolor-hover']).lighten(20).toString(),controlsBackgroundColorActive:r.theme.colors['bg-oncolor-hover'],controlsBackgroundColorDisabled:r.theme.colors.transparent,controlsSeparatorColor:r.theme.colors['border-onmain-default-large']},r.palette),"\n color: ".concat(n.controlsColor,";\n background-color: ").concat(n.controlsBackgroundColor,";\n &:hover {\n color: ").concat(n.controlsColorHover,";\n background-color: ").concat(n.controlsBackgroundColorHover,";\n }\n &:active {\n color: ").concat(n.controlsColorActive,";\n background-color: ").concat(n.controlsBackgroundColorActive,";\n }\n &:disabled {\n color: ").concat(n.controlsColorDisabled,";\n background-color: ").concat(n.controlsBackgroundColorDisabled,";\n }\n &:not(:first-child)::before {\n background-color: ").concat(n.controlsSeparatorColor,";\n }\n");var n}),s);export{g as Input,f as InputControl,m as Root,b as baseInputStyle,p as disabledStyle,d as errorStyle,u as focusStyle,h as roundedStyle};
2
2
  //# sourceMappingURL=style.js.map
package/components/Input/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type {\n StyledBaseInputProps,\n StyledInputProps,\n StyledInputControlsProps,\n InputPalette,\n InputControlsPalette,\n} from './types'\n\nconst template = (palette: InputPalette) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (palette: InputControlsPalette) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active', 'cursor'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '16px'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '16px'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'auto'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 6px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: inherit;\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","componentId","Input","propKey","_props$cursor","opacity","paddingTop","label","labelPosition","concat","active","cursor","template","palette","_objectSpread","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type {\n StyledBaseInputProps,\n StyledInputProps,\n StyledInputControlsProps,\n InputPalette,\n InputControlsPalette,\n} from './types'\n\nconst template = (palette: InputPalette) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (palette: InputControlsPalette) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active', 'cursor'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: inherit;\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","componentId","Input","propKey","_props$cursor","opacity","paddingTop","label","labelPosition","concat","active","cursor","template","palette","_objectSpread","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
package/components/InputCheckbox/style.js CHANGED
@@ -1,2 +1,2 @@
1
- import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';import a from'./images/checked.module.svg.js';import s from'./images/indeterminate.module.svg.js';var n=c((o=>!['inline','error','success','onColored','indeterminate'].includes(o)));var d=r.input.withConfig({componentId:"fox-ui__sc-3ztnvc-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;&:focus{outline:none;}"]);var b=r.span.withConfig({componentId:"fox-ui__sc-3ztnvc-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;"]);var i=r(a).withConfig({componentId:"fox-ui__sc-3ztnvc-2"})(["box-sizing:border-box;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;"]);var t=r(s).withConfig({componentId:"fox-ui__sc-3ztnvc-3"})(["box-sizing:border-box;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);var g=o=>"\n & > ".concat(b," {\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n color: ").concat(o.color,";\n }\n &:hover > ").concat(b," {\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n color: ").concat(o.colorHover,";\n }\n & > ").concat(d,":checked:not(:disabled) + ").concat(b," {\n background-color: ").concat(o.backgroundColorChecked,";\n border-color: ").concat(o.borderColorChecked,";\n color: ").concat(o.colorChecked,";\n }\n & > ").concat(d,":disabled:not(:checked) + ").concat(b," {\n background-color: ").concat(o.backgroundColorDisabled,";\n border-color: ").concat(o.borderColorDisabled,";\n color: ").concat(o.colorDisabled,";\n }\n & > ").concat(d,":disabled:checked + ").concat(b," {\n background-color: ").concat(o.backgroundColorDisabledChecked,";\n border-color: ").concat(o.borderColorDisabledChecked,";\n color: ").concat(o.colorDisabledChecked,";\n }\n");var C={default:{error:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-primary'],borderColor:e.colors['alert-bg-error-500'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-primary'],borderColorHover:e.colors['alert-bg-error-500'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-error-500'],borderColorChecked:e.colors['alert-bg-error-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-large'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),success:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-primary'],borderColor:e.colors['alert-bg-success-500'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-primary'],borderColorHover:e.colors['alert-bg-success-500'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-success-500'],borderColorChecked:e.colors['alert-bg-success-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-large'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),default:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['bg-brand-primary-basic']:e.colors['bg-onmain-primary'],borderColor:l?e.colors['bg-brand-primary-basic']:e.colors['border-onmain-default-small'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['bg-brand-primary-basic']:e.colors['bg-onmain-primary'],borderColorHover:l?e.colors['bg-brand-primary-basic']:e.colors['border-brand-primary'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['bg-brand-primary-basic'],borderColorChecked:e.colors['bg-brand-primary-basic'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-large'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))}))},onColored:{error:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-secondary'],borderColor:l?e.colors['alert-bg-error-500']:e.colors['alert-error'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-secondary'],borderColorHover:l?e.colors['alert-bg-error-500']:e.colors['alert-error'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-error-500'],borderColorChecked:e.colors['alert-bg-error-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-small'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),success:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-secondary'],borderColor:l?e.colors['alert-bg-success-500']:e.colors['alert-success'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-secondary'],borderColorHover:l?e.colors['alert-bg-success-500']:e.colors['alert-success'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-success-500'],borderColorChecked:e.colors['alert-bg-success-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-small'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),default:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['bg-brand-primary-basic'],backgroundColor:l?e.colors['bg-oncolor-primary']:e.colors['bg-onmain-primary'],borderColor:l?e.colors['bg-oncolor-primary']:e.colors['border-onmain-default-small'],colorHover:e.colors['bg-brand-primary-basic'],backgroundColorHover:l?e.colors['bg-oncolor-primary']:e.colors['bg-onmain-primary'],borderColorHover:l?e.colors['bg-oncolor-primary']:e.colors['border-brand-primary'],colorChecked:e.colors['bg-brand-primary-basic'],backgroundColorChecked:e.colors['bg-oncolor-primary'],borderColorChecked:e.colors['bg-oncolor-primary'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-small'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))}))}};var m=r.span.withConfig({shouldForwardProp:n}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),height:'1em',width:'1em'})}).withConfig({componentId:"fox-ui__sc-3ztnvc-4"})([""," "," ",""],(o=>"\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ".concat(o.inline?'inline-flex':'flex',";\n border-radius: 4px;\n flex-shrink: 0;\n & > ").concat(d," {\n cursor: ").concat(o.cursor?o.cursor:'pointer',";\n }\n & > ").concat(d,":checked + ").concat(b," > ").concat(i," {\n opacity: 1;\n }\n & > ").concat(d,":focus-visible + ").concat(b," {\n box-shadow: 0 0 0 2px ").concat(o.theme.colors.toryBlueDark,", 0 0 0 4px ").concat(o.theme.colors.white,";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n ")),(o=>{var r=o.onColored?C.onColored:C.default;return o.error?r.error:o.success?r.success:r.default}),l);export{d as Input,i as InputChecked,t as InputIndeterminate,b as InputMask,m as Root};
1
+ import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';import a from'./images/checked.module.svg.js';import s from'./images/indeterminate.module.svg.js';var n=c((o=>!['inline','error','success','onColored','indeterminate'].includes(o)));var d=r.input.withConfig({componentId:"fox-ui__sc-3ztnvc-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;&:focus{outline:none;}"]);var b=r.span.withConfig({componentId:"fox-ui__sc-3ztnvc-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;"]);var i=r(a).withConfig({componentId:"fox-ui__sc-3ztnvc-2"})(["box-sizing:border-box;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;"]);var t=r(s).withConfig({componentId:"fox-ui__sc-3ztnvc-3"})(["box-sizing:border-box;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);var g=o=>"\n & > ".concat(b," {\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n color: ").concat(o.color,";\n }\n &:hover > ").concat(b," {\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n color: ").concat(o.colorHover,";\n }\n & > ").concat(d,":checked:not(:disabled) + ").concat(b," {\n background-color: ").concat(o.backgroundColorChecked,";\n border-color: ").concat(o.borderColorChecked,";\n color: ").concat(o.colorChecked,";\n }\n & > ").concat(d,":disabled:not(:checked) + ").concat(b," {\n background-color: ").concat(o.backgroundColorDisabled,";\n border-color: ").concat(o.borderColorDisabled,";\n color: ").concat(o.colorDisabled,";\n }\n & > ").concat(d,":disabled:checked + ").concat(b," {\n background-color: ").concat(o.backgroundColorDisabledChecked,";\n border-color: ").concat(o.borderColorDisabledChecked,";\n color: ").concat(o.colorDisabledChecked,";\n }\n");var C={default:{error:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-primary'],borderColor:e.colors['alert-bg-error-500'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-primary'],borderColorHover:e.colors['alert-bg-error-500'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-error-500'],borderColorChecked:e.colors['alert-bg-error-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-large'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),success:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-primary'],borderColor:e.colors['alert-bg-success-500'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-primary'],borderColorHover:e.colors['alert-bg-success-500'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-success-500'],borderColorChecked:e.colors['alert-bg-success-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-large'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),default:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['bg-brand-primary-basic']:e.colors['bg-onmain-primary'],borderColor:l?e.colors['bg-brand-primary-basic']:e.colors['border-onmain-default-small'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['bg-brand-primary-basic']:e.colors['bg-onmain-primary'],borderColorHover:l?e.colors['bg-brand-primary-basic']:e.colors['border-brand-primary'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['bg-brand-primary-basic'],borderColorChecked:e.colors['bg-brand-primary-basic'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-large'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))}))},onColored:{error:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-secondary'],borderColor:l?e.colors['alert-bg-error-500']:e.colors['alert-error'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-error-500']:e.colors['bg-onmain-secondary'],borderColorHover:l?e.colors['alert-bg-error-500']:e.colors['alert-error'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-error-500'],borderColorChecked:e.colors['alert-bg-error-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-small'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),success:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['content-oncolor-primary'],backgroundColor:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-secondary'],borderColor:l?e.colors['alert-bg-success-500']:e.colors['alert-success'],colorHover:e.colors['content-oncolor-primary'],backgroundColorHover:l?e.colors['alert-bg-success-500']:e.colors['bg-onmain-secondary'],borderColorHover:l?e.colors['alert-bg-success-500']:e.colors['alert-success'],colorChecked:e.colors['content-oncolor-primary'],backgroundColorChecked:e.colors['alert-bg-success-500'],borderColorChecked:e.colors['alert-bg-success-500'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-small'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))})),default:e(["",""],(r=>{var{theme:e,palette:c,indeterminate:l}=r;return g(o({color:e.colors['bg-brand-primary-basic'],backgroundColor:l?e.colors['bg-oncolor-primary']:e.colors['bg-onmain-primary'],borderColor:l?e.colors['bg-oncolor-primary']:e.colors['border-onmain-default-small'],colorHover:e.colors['bg-brand-primary-basic'],backgroundColorHover:l?e.colors['bg-oncolor-primary']:e.colors['bg-onmain-primary'],borderColorHover:l?e.colors['bg-oncolor-primary']:e.colors['border-brand-primary'],colorChecked:e.colors['bg-brand-primary-basic'],backgroundColorChecked:e.colors['bg-oncolor-primary'],borderColorChecked:e.colors['bg-oncolor-primary'],colorDisabled:e.colors['bg-onmain-secondary'],backgroundColorDisabled:l?e.colors['bg-disabled-active']:e.colors['bg-disabled-small'],borderColorDisabled:l?e.colors['bg-disabled-active']:e.colors['border-disabled'],colorDisabledChecked:e.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:e.colors['bg-disabled-active'],borderColorDisabledChecked:e.colors['bg-disabled-active']},c))}))}};var m=r.span.withConfig({shouldForwardProp:n}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),height:'1em',width:'1em'})}).withConfig({componentId:"fox-ui__sc-3ztnvc-4"})([""," "," ",""],(o=>"\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ".concat(o.inline?'inline-flex':'flex',";\n border-radius: 4px;\n flex-shrink: 0;\n & > ").concat(d," {\n cursor: ").concat(o.cursor?o.cursor:'pointer',";\n }\n & > ").concat(d,":checked + ").concat(b," > ").concat(i," {\n opacity: 1;\n }\n & > ").concat(d,":focus-visible + ").concat(b," {\n box-shadow: 0 0 0 2px ").concat(o.theme.colors.white,", 0 0 0 4px ").concat(o.theme.colors['border-focus'],";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n ")),(o=>{var r=o.onColored?C.onColored:C.default;return o.error?r.error:o.success?r.success:r.default}),l);export{d as Input,i as InputChecked,t as InputIndeterminate,b as InputMask,m as Root};
2
2
  //# sourceMappingURL=style.js.map
package/components/InputCheckbox/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/InputCheckbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport Checked from './images/checked.module.svg'\nimport Indeterminate from './images/indeterminate.module.svg'\nimport type { StyledInputCheckboxProps, InputCheckboxPalette } from './types'\n\nconst shouldForwardInputCheckboxProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'indeterminate'].includes(propKey)\n)\n\nexport const Input = styled.input`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n &:focus {\n outline: none;\n }\n`\n\nexport const InputMask = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n border: 1px solid transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const InputChecked = styled(Checked)`\n box-sizing: border-box;\n width: 90%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n`\n\nexport const InputIndeterminate = styled(Indeterminate)`\n box-sizing: border-box;\n width: 90%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`\n\nconst template = (palette: InputCheckboxPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n color: ${palette.color};\n }\n &:hover > ${InputMask} {\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n color: ${palette.colorHover};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['bg-onmain-primary'],\n borderColor: theme.colors['alert-bg-error-500'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['bg-onmain-primary'],\n borderColorHover: theme.colors['alert-bg-error-500'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-error-500'],\n borderColorChecked: theme.colors['alert-bg-error-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-large'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n success: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['bg-onmain-primary'],\n borderColor: theme.colors['alert-bg-success-500'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['alert-bg-success-500']\n : theme.colors['bg-onmain-primary'],\n borderColorHover: theme.colors['alert-bg-success-500'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-success-500'],\n borderColorChecked: theme.colors['alert-bg-success-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-large'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n default: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['bg-brand-primary-basic'] : theme.colors['bg-onmain-primary'],\n borderColor: indeterminate\n ? theme.colors['bg-brand-primary-basic']\n : theme.colors['border-onmain-default-small'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['bg-brand-primary-basic']\n : theme.colors['bg-onmain-primary'],\n borderColorHover: indeterminate\n ? theme.colors['bg-brand-primary-basic']\n : theme.colors['border-brand-primary'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['bg-brand-primary-basic'],\n borderColorChecked: theme.colors['bg-brand-primary-basic'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-large'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n },\n onColored: {\n error: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['bg-onmain-secondary'],\n borderColor: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['alert-error'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['alert-bg-error-500']\n : theme.colors['bg-onmain-secondary'],\n borderColorHover: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['alert-error'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-error-500'],\n borderColorChecked: theme.colors['alert-bg-error-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-small'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n success: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['bg-onmain-secondary'],\n borderColor: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['alert-success'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['alert-bg-success-500']\n : theme.colors['bg-onmain-secondary'],\n borderColorHover: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['alert-success'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-success-500'],\n borderColorChecked: theme.colors['alert-bg-success-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-small'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n default: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['bg-brand-primary-basic'],\n backgroundColor: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['bg-onmain-primary'],\n borderColor: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['border-onmain-default-small'],\n colorHover: theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['bg-onmain-primary'],\n borderColorHover: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['border-brand-primary'],\n colorChecked: theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: theme.colors['bg-oncolor-primary'],\n borderColorChecked: theme.colors['bg-oncolor-primary'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-small'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span\n .withConfig<StyledInputCheckboxProps>({\n shouldForwardProp: shouldForwardInputCheckboxProp,\n })\n .attrs(<Required<Pick<StyledInputCheckboxProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n height: '1em',\n width: '1em',\n }\n },\n })`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 4px;\n flex-shrink: 0;\n & > ${Input} {\n cursor: ${props.cursor ? props.cursor : 'pointer'};\n }\n & > ${Input}:checked + ${InputMask} > ${InputChecked} {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${props.theme.colors.toryBlueDark}, 0 0 0 4px ${props.theme.colors.white};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardInputCheckboxProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","componentId","InputMask","span","InputChecked","Checked","InputIndeterminate","Indeterminate","template","palette","backgroundColor","concat","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","_ref","theme","indeterminate","_objectSpread","colors","success","_ref2","_ref3","onColored","_ref4","_ref5","_ref6","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","height","width","props","inline","cursor","toryBlueDark","white","schema","responsiveSize"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/InputCheckbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport Checked from './images/checked.module.svg'\nimport Indeterminate from './images/indeterminate.module.svg'\nimport type { StyledInputCheckboxProps, InputCheckboxPalette } from './types'\n\nconst shouldForwardInputCheckboxProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'indeterminate'].includes(propKey)\n)\n\nexport const Input = styled.input`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n &:focus {\n outline: none;\n }\n`\n\nexport const InputMask = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n border: 1px solid transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const InputChecked = styled(Checked)`\n box-sizing: border-box;\n width: 90%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n`\n\nexport const InputIndeterminate = styled(Indeterminate)`\n box-sizing: border-box;\n width: 90%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`\n\nconst template = (palette: InputCheckboxPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n color: ${palette.color};\n }\n &:hover > ${InputMask} {\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n color: ${palette.colorHover};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['bg-onmain-primary'],\n borderColor: theme.colors['alert-bg-error-500'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['bg-onmain-primary'],\n borderColorHover: theme.colors['alert-bg-error-500'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-error-500'],\n borderColorChecked: theme.colors['alert-bg-error-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-large'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n success: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['bg-onmain-primary'],\n borderColor: theme.colors['alert-bg-success-500'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['alert-bg-success-500']\n : theme.colors['bg-onmain-primary'],\n borderColorHover: theme.colors['alert-bg-success-500'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-success-500'],\n borderColorChecked: theme.colors['alert-bg-success-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-large'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n default: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['bg-brand-primary-basic'] : theme.colors['bg-onmain-primary'],\n borderColor: indeterminate\n ? theme.colors['bg-brand-primary-basic']\n : theme.colors['border-onmain-default-small'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['bg-brand-primary-basic']\n : theme.colors['bg-onmain-primary'],\n borderColorHover: indeterminate\n ? theme.colors['bg-brand-primary-basic']\n : theme.colors['border-brand-primary'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['bg-brand-primary-basic'],\n borderColorChecked: theme.colors['bg-brand-primary-basic'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-large'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n },\n onColored: {\n error: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['bg-onmain-secondary'],\n borderColor: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['alert-error'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['alert-bg-error-500']\n : theme.colors['bg-onmain-secondary'],\n borderColorHover: indeterminate ? theme.colors['alert-bg-error-500'] : theme.colors['alert-error'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-error-500'],\n borderColorChecked: theme.colors['alert-bg-error-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-small'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n success: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['content-oncolor-primary'],\n backgroundColor: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['bg-onmain-secondary'],\n borderColor: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['alert-success'],\n colorHover: theme.colors['content-oncolor-primary'],\n backgroundColorHover: indeterminate\n ? theme.colors['alert-bg-success-500']\n : theme.colors['bg-onmain-secondary'],\n borderColorHover: indeterminate ? theme.colors['alert-bg-success-500'] : theme.colors['alert-success'],\n colorChecked: theme.colors['content-oncolor-primary'],\n backgroundColorChecked: theme.colors['alert-bg-success-500'],\n borderColorChecked: theme.colors['alert-bg-success-500'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-small'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n default: css<StyledInputCheckboxProps>`\n ${({ theme, palette, indeterminate }) =>\n template({\n color: theme.colors['bg-brand-primary-basic'],\n backgroundColor: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['bg-onmain-primary'],\n borderColor: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['border-onmain-default-small'],\n colorHover: theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['bg-onmain-primary'],\n borderColorHover: indeterminate ? theme.colors['bg-oncolor-primary'] : theme.colors['border-brand-primary'],\n colorChecked: theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: theme.colors['bg-oncolor-primary'],\n borderColorChecked: theme.colors['bg-oncolor-primary'],\n colorDisabled: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: indeterminate\n ? theme.colors['bg-disabled-active']\n : theme.colors['bg-disabled-small'],\n borderColorDisabled: indeterminate ? theme.colors['bg-disabled-active'] : theme.colors['border-disabled'],\n colorDisabledChecked: theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: theme.colors['bg-disabled-active'],\n ...palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span\n .withConfig<StyledInputCheckboxProps>({\n shouldForwardProp: shouldForwardInputCheckboxProp,\n })\n .attrs(<Required<Pick<StyledInputCheckboxProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n height: '1em',\n width: '1em',\n }\n },\n })`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 4px;\n flex-shrink: 0;\n & > ${Input} {\n cursor: ${props.cursor ? props.cursor : 'pointer'};\n }\n & > ${Input}:checked + ${InputMask} > ${InputChecked} {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardInputCheckboxProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","componentId","InputMask","span","InputChecked","Checked","InputIndeterminate","Indeterminate","template","palette","backgroundColor","concat","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","_ref","theme","indeterminate","_objectSpread","colors","success","_ref2","_ref3","onColored","_ref4","_ref5","_ref6","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","height","width","props","inline","cursor","white","schema","responsiveSize"],"mappings":"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"}