@foxford/ui 2.87.0 → 2.87.2-beta-50b609f-20251201
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AccordionItem/style.js +1 -1
- package/components/AccordionItem/style.js.map +1 -1
- package/components/AccordionItem/style.mjs +1 -1
- package/components/AccordionItem/style.mjs.map +1 -1
- package/components/ActionBtn/style.js +1 -1
- package/components/ActionBtn/style.js.map +1 -1
- package/components/ActionBtn/style.mjs +1 -1
- package/components/ActionBtn/style.mjs.map +1 -1
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Anchor/style.mjs +1 -1
- package/components/Anchor/style.mjs.map +1 -1
- package/components/Arrow/style.js +1 -1
- package/components/Arrow/style.js.map +1 -1
- package/components/Arrow/style.mjs +1 -1
- package/components/Arrow/style.mjs.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Button/style.mjs +1 -1
- package/components/Button/style.mjs.map +1 -1
- package/components/Checkbox/style.js +1 -1
- package/components/Checkbox/style.js.map +1 -1
- package/components/Checkbox/style.mjs +1 -1
- package/components/Checkbox/style.mjs.map +1 -1
- package/components/Chip/style.js +1 -1
- package/components/Chip/style.js.map +1 -1
- package/components/Chip/style.mjs +1 -1
- package/components/Chip/style.mjs.map +1 -1
- package/components/ContextMenu/style.js +1 -1
- package/components/ContextMenu/style.js.map +1 -1
- package/components/ContextMenu/style.mjs +1 -1
- package/components/ContextMenu/style.mjs.map +1 -1
- package/components/FormInput/style.js +1 -1
- package/components/FormInput/style.js.map +1 -1
- package/components/FormInput/style.mjs +1 -1
- package/components/FormInput/style.mjs.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/FormInputLabel/style.mjs +1 -1
- package/components/FormInputLabel/style.mjs.map +1 -1
- package/components/FormLabel/style.js +1 -1
- package/components/FormLabel/style.js.map +1 -1
- package/components/FormLabel/style.mjs +1 -1
- package/components/FormLabel/style.mjs.map +1 -1
- package/components/IconButton/style.js +1 -1
- package/components/IconButton/style.js.map +1 -1
- package/components/IconButton/style.mjs +1 -1
- package/components/IconButton/style.mjs.map +1 -1
- package/components/InputCheckbox/style.js +1 -1
- package/components/InputCheckbox/style.js.map +1 -1
- package/components/InputCheckbox/style.mjs +1 -1
- package/components/InputCheckbox/style.mjs.map +1 -1
- package/components/InputRadio/style.js +1 -1
- package/components/InputRadio/style.js.map +1 -1
- package/components/InputRadio/style.mjs +1 -1
- package/components/InputRadio/style.mjs.map +1 -1
- package/components/ListItem/style.js +1 -1
- package/components/ListItem/style.js.map +1 -1
- package/components/ListItem/style.mjs +1 -1
- package/components/ListItem/style.mjs.map +1 -1
- package/components/MenuComponent/style.js +1 -1
- package/components/MenuComponent/style.js.map +1 -1
- package/components/MenuComponent/style.mjs +1 -1
- package/components/MenuComponent/style.mjs.map +1 -1
- package/components/Modal/style.js +1 -1
- package/components/Modal/style.js.map +1 -1
- package/components/Modal/style.mjs +1 -1
- package/components/Modal/style.mjs.map +1 -1
- package/components/Select/style.js +1 -1
- package/components/Select/style.js.map +1 -1
- package/components/Select/style.mjs +1 -1
- package/components/Select/style.mjs.map +1 -1
- package/components/Switch/style.js +1 -1
- package/components/Switch/style.js.map +1 -1
- package/components/Switch/style.mjs +1 -1
- package/components/Switch/style.mjs.map +1 -1
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/components/Tab/style.mjs +1 -1
- package/components/Tab/style.mjs.map +1 -1
- package/components/TabListTab/style.js +1 -1
- package/components/TabListTab/style.js.map +1 -1
- package/components/TabListTab/style.mjs +1 -1
- package/components/TabListTab/style.mjs.map +1 -1
- package/components/Tabs/style.js +1 -1
- package/components/Tabs/style.js.map +1 -1
- package/components/Tabs/style.mjs +1 -1
- package/components/Tabs/style.mjs.map +1 -1
- package/components/Tag/style.js +1 -1
- package/components/Tag/style.js.map +1 -1
- package/components/Tag/style.mjs +1 -1
- package/components/Tag/style.mjs.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text/style.mjs +1 -1
- package/components/Text/style.mjs.map +1 -1
- package/mixins/hover.js +2 -0
- package/mixins/hover.js.map +1 -0
- package/mixins/hover.mjs +2 -0
- package/mixins/hover.mjs.map +1 -0
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var checked=require('./images/checked.svg.js');var indeterminate=require('./images/indeterminate.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardInputCheckboxProp=style.createShouldForwardProp((o=>!['inline','error','success','onColored','indeterminate','disabled'].includes(o)));const Input=styled__default.default.input.withConfig({displayName:"InputCheckbox__Input",componentId:"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;}"]);const InputMask=styled__default.default.span.withConfig({displayName:"InputCheckbox__InputMask",componentId:"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;"]);const InputChecked=styled__default.default(checked.default).withConfig({displayName:"InputCheckbox__InputChecked",componentId:"ui__sc-3ztnvc-2"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;"]);const InputIndeterminate=styled__default.default(indeterminate.default).withConfig({displayName:"InputCheckbox__InputIndeterminate",componentId:"ui__sc-3ztnvc-3"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n color: ${o.color};\n }\n
|
|
1
|
+
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var hover=require('../../mixins/hover.js');var checked=require('./images/checked.svg.js');var indeterminate=require('./images/indeterminate.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardInputCheckboxProp=style.createShouldForwardProp((o=>!['inline','error','success','onColored','indeterminate','disabled'].includes(o)));const Input=styled__default.default.input.withConfig({displayName:"InputCheckbox__Input",componentId:"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;}"]);const InputMask=styled__default.default.span.withConfig({displayName:"InputCheckbox__InputMask",componentId:"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;"]);const InputChecked=styled__default.default(checked.default).withConfig({displayName:"InputCheckbox__InputChecked",componentId:"ui__sc-3ztnvc-2"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;"]);const InputIndeterminate=styled__default.default(indeterminate.default).withConfig({displayName:"InputCheckbox__InputIndeterminate",componentId:"ui__sc-3ztnvc-3"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n color: ${o.color};\n }\n ${hover.hover(`\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n color: ${o.colorHover};\n `,`&:hover > ${InputMask}`)}\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${o.backgroundColorChecked};\n border-color: ${o.borderColorChecked};\n color: ${o.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n color: ${o.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${o.backgroundColorDisabledChecked};\n border-color: ${o.borderColorDisabledChecked};\n color: ${o.colorDisabledChecked};\n }\n`;const COLOR_SCHEMA={default:{error:styled.css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-primary'],borderColor:o.colors['alert-bg-error-500'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-primary'],borderColorHover:o.colors['alert-bg-error-500'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-error-500'],borderColorChecked:o.colors['alert-bg-error-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-large'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),success:styled.css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-primary'],borderColor:o.colors['alert-bg-success-500'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-primary'],borderColorHover:o.colors['alert-bg-success-500'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-success-500'],borderColorChecked:o.colors['alert-bg-success-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-large'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),default:styled.css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['bg-brand-primary-basic']:o.colors['bg-onmain-primary'],borderColor:e?o.colors['bg-brand-primary-basic']:o.colors['border-onmain-default-small'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['bg-brand-primary-basic']:o.colors['bg-onmain-primary'],borderColorHover:e?o.colors['bg-brand-primary-basic']:o.colors['border-brand-primary'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['bg-brand-primary-basic'],borderColorChecked:o.colors['bg-brand-primary-basic'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-large'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r})))},contrast:{error:styled.css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-secondary'],borderColor:e?o.colors['alert-bg-error-500']:o.colors['alert-error'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-secondary'],borderColorHover:e?o.colors['alert-bg-error-500']:o.colors['alert-error'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-error-500'],borderColorChecked:o.colors['alert-bg-error-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-small'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),success:styled.css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-secondary'],borderColor:e?o.colors['alert-bg-success-500']:o.colors['alert-success'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-secondary'],borderColorHover:e?o.colors['alert-bg-success-500']:o.colors['alert-success'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-success-500'],borderColorChecked:o.colors['alert-bg-success-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-small'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),default:styled.css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['bg-brand-primary-basic'],backgroundColor:e?o.colors['bg-oncolor-primary']:o.colors['bg-onmain-primary'],borderColor:e?o.colors['bg-oncolor-primary']:o.colors['border-onmain-default-small'],colorHover:o.colors['bg-brand-primary-basic'],backgroundColorHover:e?o.colors['bg-oncolor-primary']:o.colors['bg-onmain-primary'],borderColorHover:e?o.colors['bg-oncolor-primary']:o.colors['border-brand-primary'],colorChecked:o.colors['bg-brand-primary-basic'],backgroundColorChecked:o.colors['bg-oncolor-primary'],borderColorChecked:o.colors['bg-oncolor-primary'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-small'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r})))}};const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardInputCheckboxProp}).withConfig({displayName:"InputCheckbox__Root",componentId:"ui__sc-3ztnvc-4"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${o.inline?'inline-flex':'flex'};\n flex-shrink: 0;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask} > ${InputChecked} {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.error?r.error:o.success?r.success:r.default}),responsiveSize.responsiveSize);exports.Input=Input,exports.InputChecked=InputChecked,exports.InputIndeterminate=InputIndeterminate,exports.InputMask=InputMask,exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -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.svg?module'\nimport Indeterminate from './images/indeterminate.svg?module'\nimport type { StyledInputCheckboxProps, InputCheckboxPalette } from './types'\n\nconst shouldForwardInputCheckboxProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'indeterminate', 'disabled'].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`\n\nexport const InputChecked = styled(Checked)`\n box-sizing: border-box;\n width: 80%;\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: 80%;\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 contrast: {\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.withConfig<StyledInputCheckboxProps>({\n shouldForwardProp: shouldForwardInputCheckboxProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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","displayName","componentId","InputMask","span","InputChecked","default","Checked","InputIndeterminate","Indeterminate","template","palette","backgroundColor","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","error","css","theme","indeterminate","colors","success","contrast","Root","shouldForwardProp","props","inline","disabled","white","schema","onColored","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 { hover } from 'mixins/hover'\nimport Checked from './images/checked.svg?module'\nimport Indeterminate from './images/indeterminate.svg?module'\nimport type { StyledInputCheckboxProps, InputCheckboxPalette } from './types'\n\nconst shouldForwardInputCheckboxProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'indeterminate', 'disabled'].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`\n\nexport const InputChecked = styled(Checked)`\n box-sizing: border-box;\n width: 80%;\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: 80%;\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(\n `\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n color: ${palette.colorHover};\n `,\n `&:hover > ${InputMask}`\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 contrast: {\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.withConfig<StyledInputCheckboxProps>({\n shouldForwardProp: shouldForwardInputCheckboxProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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","displayName","componentId","InputMask","span","InputChecked","default","Checked","InputIndeterminate","Indeterminate","template","palette","backgroundColor","borderColor","color","hover","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","error","css","theme","indeterminate","colors","success","contrast","Root","shouldForwardProp","props","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import SvgChecked from'./images/checked.svg.mjs';import SvgIndeterminate from'./images/indeterminate.svg.mjs';const shouldForwardInputCheckboxProp=createShouldForwardProp((o=>!['inline','error','success','onColored','indeterminate','disabled'].includes(o)));const Input=styled.input.withConfig({displayName:"InputCheckbox__Input",componentId:"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;}"]);const InputMask=styled.span.withConfig({displayName:"InputCheckbox__InputMask",componentId:"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;"]);const InputChecked=styled(SvgChecked).withConfig({displayName:"InputCheckbox__InputChecked",componentId:"ui__sc-3ztnvc-2"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;"]);const InputIndeterminate=styled(SvgIndeterminate).withConfig({displayName:"InputCheckbox__InputIndeterminate",componentId:"ui__sc-3ztnvc-3"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n color: ${o.color};\n }\n
|
|
1
|
+
import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';import SvgChecked from'./images/checked.svg.mjs';import SvgIndeterminate from'./images/indeterminate.svg.mjs';const shouldForwardInputCheckboxProp=createShouldForwardProp((o=>!['inline','error','success','onColored','indeterminate','disabled'].includes(o)));const Input=styled.input.withConfig({displayName:"InputCheckbox__Input",componentId:"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;}"]);const InputMask=styled.span.withConfig({displayName:"InputCheckbox__InputMask",componentId:"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;"]);const InputChecked=styled(SvgChecked).withConfig({displayName:"InputCheckbox__InputChecked",componentId:"ui__sc-3ztnvc-2"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;"]);const InputIndeterminate=styled(SvgIndeterminate).withConfig({displayName:"InputCheckbox__InputIndeterminate",componentId:"ui__sc-3ztnvc-3"})(["box-sizing:border-box;width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n color: ${o.color};\n }\n ${hover(`\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n color: ${o.colorHover};\n `,`&:hover > ${InputMask}`)}\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${o.backgroundColorChecked};\n border-color: ${o.borderColorChecked};\n color: ${o.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n color: ${o.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${o.backgroundColorDisabledChecked};\n border-color: ${o.borderColorDisabledChecked};\n color: ${o.colorDisabledChecked};\n }\n`;const COLOR_SCHEMA={default:{error:css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-primary'],borderColor:o.colors['alert-bg-error-500'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-primary'],borderColorHover:o.colors['alert-bg-error-500'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-error-500'],borderColorChecked:o.colors['alert-bg-error-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-large'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),success:css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-primary'],borderColor:o.colors['alert-bg-success-500'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-primary'],borderColorHover:o.colors['alert-bg-success-500'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-success-500'],borderColorChecked:o.colors['alert-bg-success-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-large'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),default:css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['bg-brand-primary-basic']:o.colors['bg-onmain-primary'],borderColor:e?o.colors['bg-brand-primary-basic']:o.colors['border-onmain-default-small'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['bg-brand-primary-basic']:o.colors['bg-onmain-primary'],borderColorHover:e?o.colors['bg-brand-primary-basic']:o.colors['border-brand-primary'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['bg-brand-primary-basic'],borderColorChecked:o.colors['bg-brand-primary-basic'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-large'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r})))},contrast:{error:css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-secondary'],borderColor:e?o.colors['alert-bg-error-500']:o.colors['alert-error'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-error-500']:o.colors['bg-onmain-secondary'],borderColorHover:e?o.colors['alert-bg-error-500']:o.colors['alert-error'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-error-500'],borderColorChecked:o.colors['alert-bg-error-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-small'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),success:css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['content-oncolor-primary'],backgroundColor:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-secondary'],borderColor:e?o.colors['alert-bg-success-500']:o.colors['alert-success'],colorHover:o.colors['content-oncolor-primary'],backgroundColorHover:e?o.colors['alert-bg-success-500']:o.colors['bg-onmain-secondary'],borderColorHover:e?o.colors['alert-bg-success-500']:o.colors['alert-success'],colorChecked:o.colors['content-oncolor-primary'],backgroundColorChecked:o.colors['alert-bg-success-500'],borderColorChecked:o.colors['alert-bg-success-500'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-small'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r}))),default:css(["",""],(({theme:o,palette:r,indeterminate:e})=>template({color:o.colors['bg-brand-primary-basic'],backgroundColor:e?o.colors['bg-oncolor-primary']:o.colors['bg-onmain-primary'],borderColor:e?o.colors['bg-oncolor-primary']:o.colors['border-onmain-default-small'],colorHover:o.colors['bg-brand-primary-basic'],backgroundColorHover:e?o.colors['bg-oncolor-primary']:o.colors['bg-onmain-primary'],borderColorHover:e?o.colors['bg-oncolor-primary']:o.colors['border-brand-primary'],colorChecked:o.colors['bg-brand-primary-basic'],backgroundColorChecked:o.colors['bg-oncolor-primary'],borderColorChecked:o.colors['bg-oncolor-primary'],colorDisabled:o.colors['bg-onmain-secondary'],backgroundColorDisabled:e?o.colors['bg-disabled-active']:o.colors['bg-disabled-small'],borderColorDisabled:e?o.colors['bg-disabled-active']:o.colors['border-disabled'],colorDisabledChecked:o.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.colors['bg-disabled-active'],borderColorDisabledChecked:o.colors['bg-disabled-active'],...r})))}};const Root=styled.span.withConfig({shouldForwardProp:shouldForwardInputCheckboxProp}).withConfig({displayName:"InputCheckbox__Root",componentId:"ui__sc-3ztnvc-4"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${o.inline?'inline-flex':'flex'};\n flex-shrink: 0;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask} > ${InputChecked} {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.error?r.error:o.success?r.success:r.default}),responsiveSize);export{Input,InputChecked,InputIndeterminate,InputMask,Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","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.svg?module'\nimport Indeterminate from './images/indeterminate.svg?module'\nimport type { StyledInputCheckboxProps, InputCheckboxPalette } from './types'\n\nconst shouldForwardInputCheckboxProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'indeterminate', 'disabled'].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`\n\nexport const InputChecked = styled(Checked)`\n box-sizing: border-box;\n width: 80%;\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: 80%;\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 contrast: {\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.withConfig<StyledInputCheckboxProps>({\n shouldForwardProp: shouldForwardInputCheckboxProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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","displayName","componentId","InputMask","span","InputChecked","Checked","InputIndeterminate","Indeterminate","template","palette","backgroundColor","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","theme","indeterminate","colors","success","contrast","Root","shouldForwardProp","props","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","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 { hover } from 'mixins/hover'\nimport Checked from './images/checked.svg?module'\nimport Indeterminate from './images/indeterminate.svg?module'\nimport type { StyledInputCheckboxProps, InputCheckboxPalette } from './types'\n\nconst shouldForwardInputCheckboxProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'indeterminate', 'disabled'].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`\n\nexport const InputChecked = styled(Checked)`\n box-sizing: border-box;\n width: 80%;\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: 80%;\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(\n `\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n color: ${palette.colorHover};\n `,\n `&:hover > ${InputMask}`\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 contrast: {\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.withConfig<StyledInputCheckboxProps>({\n shouldForwardProp: shouldForwardInputCheckboxProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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","displayName","componentId","InputMask","span","InputChecked","Checked","InputIndeterminate","Indeterminate","template","palette","backgroundColor","borderColor","color","hover","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","theme","indeterminate","colors","success","contrast","Root","shouldForwardProp","props","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardInputRadioProp=style.createShouldForwardProp((o=>!['inline','error','success','onColored','disabled'].includes(o)));const Input=styled__default.default.input.withConfig({displayName:"InputRadio__Input",componentId:"ui__sc-rgocm7-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;}"]);const InputMask=styled__default.default.span.withConfig({displayName:"InputRadio__InputMask",componentId:"ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${o.color};\n }\n
|
|
1
|
+
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardInputRadioProp=style.createShouldForwardProp((o=>!['inline','error','success','onColored','disabled'].includes(o)));const Input=styled__default.default.input.withConfig({displayName:"InputRadio__Input",componentId:"ui__sc-rgocm7-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;}"]);const InputMask=styled__default.default.span.withConfig({displayName:"InputRadio__InputMask",componentId:"ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${o.color};\n }\n ${hover.hover(`\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n &::before {\n background-color: ${o.colorHover};\n }\n `,`&:hover > ${InputMask}`)}\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${o.backgroundColorChecked};\n border-color: ${o.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${o.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${o.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${o.backgroundColorDisabledChecked};\n border-color: ${o.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${o.colorDisabledChecked};\n }\n`;const COLOR_SCHEMA={default:{error:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-error-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-success-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-success-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['bg-brand-primary-basic'],borderColorChecked:o.theme.colors['bg-brand-primary-basic'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))},contrast:{error:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-error'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-error'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-success'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['bg-brand-primary-basic'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['bg-brand-primary-basic'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['bg-brand-primary-basic'],backgroundColorChecked:o.theme.colors['bg-oncolor-primary'],borderColorChecked:o.theme.colors['bg-oncolor-primary'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))}};const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardInputRadioProp}).withConfig({displayName:"InputRadio__Root",componentId:"ui__sc-rgocm7-2"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${o.inline?'inline-flex':'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask}::before {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{const e=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize);exports.Input=Input,exports.InputMask=InputMask,exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/InputRadio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledInputRadioProps, InputRadioPalette } from './types'\n\nconst shouldForwardInputRadioProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'disabled'].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 &::before {\n content: '';\n position: absolute;\n width: 40%;\n height: 40%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n opacity: 0;\n }\n`\n\nconst template = (palette: InputRadioPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${palette.color};\n }\n &:hover > ${InputMask} {\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${InputMask}::before {\n background-color: ${palette.colorHover};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['bg-brand-primary-basic'],\n borderColorChecked: props.theme.colors['bg-brand-primary-basic'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-error'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-success'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['bg-brand-primary-basic'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: props.theme.colors['bg-oncolor-primary'],\n borderColorChecked: props.theme.colors['bg-oncolor-primary'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span.withConfig<StyledInputRadioProps>({\n shouldForwardProp: shouldForwardInputRadioProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask}::before {\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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":["shouldForwardInputRadioProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","displayName","componentId","InputMask","span","template","palette","backgroundColor","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","props","theme","colors","success","contrast","Root","shouldForwardProp","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/InputRadio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { hover } from 'mixins/hover'\nimport type { StyledInputRadioProps, InputRadioPalette } from './types'\n\nconst shouldForwardInputRadioProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'disabled'].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 &::before {\n content: '';\n position: absolute;\n width: 40%;\n height: 40%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n opacity: 0;\n }\n`\n\nconst template = (palette: InputRadioPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${palette.color};\n }\n ${hover(\n `\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n &::before {\n background-color: ${palette.colorHover};\n }\n `,\n `&:hover > ${InputMask}`\n )}\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['bg-brand-primary-basic'],\n borderColorChecked: props.theme.colors['bg-brand-primary-basic'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-error'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-success'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['bg-brand-primary-basic'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: props.theme.colors['bg-oncolor-primary'],\n borderColorChecked: props.theme.colors['bg-oncolor-primary'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span.withConfig<StyledInputRadioProps>({\n shouldForwardProp: shouldForwardInputRadioProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask}::before {\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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":["shouldForwardInputRadioProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","displayName","componentId","InputMask","span","template","palette","backgroundColor","borderColor","color","hover","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","props","theme","colors","success","contrast","Root","shouldForwardProp","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';const shouldForwardInputRadioProp=createShouldForwardProp((o=>!['inline','error','success','onColored','disabled'].includes(o)));const Input=styled.input.withConfig({displayName:"InputRadio__Input",componentId:"ui__sc-rgocm7-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;}"]);const InputMask=styled.span.withConfig({displayName:"InputRadio__InputMask",componentId:"ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${o.color};\n }\n
|
|
1
|
+
import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardInputRadioProp=createShouldForwardProp((o=>!['inline','error','success','onColored','disabled'].includes(o)));const Input=styled.input.withConfig({displayName:"InputRadio__Input",componentId:"ui__sc-rgocm7-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;}"]);const InputMask=styled.span.withConfig({displayName:"InputRadio__InputMask",componentId:"ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);const template=o=>`\n & > ${InputMask} {\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${o.color};\n }\n ${hover(`\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n &::before {\n background-color: ${o.colorHover};\n }\n `,`&:hover > ${InputMask}`)}\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${o.backgroundColorChecked};\n border-color: ${o.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${o.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${o.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${o.backgroundColorDisabledChecked};\n border-color: ${o.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${o.colorDisabledChecked};\n }\n`;const COLOR_SCHEMA={default:{error:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-error-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['alert-bg-success-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['alert-bg-success-500'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['bg-brand-primary-basic'],borderColorChecked:o.theme.colors['bg-brand-primary-basic'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))},contrast:{error:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-error'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-error'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-error-500'],borderColorChecked:o.theme.colors['alert-bg-error-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),success:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['alert-success'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-onmain-secondary'],borderColorHover:o.theme.colors['alert-success'],colorChecked:o.theme.colors['content-oncolor-primary'],backgroundColorChecked:o.theme.colors['alert-bg-success-500'],borderColorChecked:o.theme.colors['alert-bg-success-500'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['bg-brand-primary-basic'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-small'],colorHover:o.theme.colors['bg-brand-primary-basic'],backgroundColorHover:o.theme.colors['bg-onmain-primary'],borderColorHover:o.theme.colors['border-brand-primary'],colorChecked:o.theme.colors['bg-brand-primary-basic'],backgroundColorChecked:o.theme.colors['bg-oncolor-primary'],borderColorChecked:o.theme.colors['bg-oncolor-primary'],colorDisabled:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['border-disabled'],colorDisabledChecked:o.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:o.theme.colors['bg-disabled-active'],borderColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette})))}};const Root=styled.span.withConfig({shouldForwardProp:shouldForwardInputRadioProp}).withConfig({displayName:"InputRadio__Root",componentId:"ui__sc-rgocm7-2"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${o.inline?'inline-flex':'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask}::before {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{const e=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.error?e.error:o.success?e.success:e.default}),responsiveSize);export{Input,InputMask,Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/InputRadio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledInputRadioProps, InputRadioPalette } from './types'\n\nconst shouldForwardInputRadioProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'disabled'].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 &::before {\n content: '';\n position: absolute;\n width: 40%;\n height: 40%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n opacity: 0;\n }\n`\n\nconst template = (palette: InputRadioPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${palette.color};\n }\n &:hover > ${InputMask} {\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${InputMask}::before {\n background-color: ${palette.colorHover};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['bg-brand-primary-basic'],\n borderColorChecked: props.theme.colors['bg-brand-primary-basic'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-error'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-success'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['bg-brand-primary-basic'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: props.theme.colors['bg-oncolor-primary'],\n borderColorChecked: props.theme.colors['bg-oncolor-primary'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span.withConfig<StyledInputRadioProps>({\n shouldForwardProp: shouldForwardInputRadioProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask}::before {\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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":["shouldForwardInputRadioProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","displayName","componentId","InputMask","span","template","palette","backgroundColor","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","props","theme","colors","success","contrast","Root","shouldForwardProp","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/InputRadio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { hover } from 'mixins/hover'\nimport type { StyledInputRadioProps, InputRadioPalette } from './types'\n\nconst shouldForwardInputRadioProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored', 'disabled'].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 &::before {\n content: '';\n position: absolute;\n width: 40%;\n height: 40%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n opacity: 0;\n }\n`\n\nconst template = (palette: InputRadioPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${palette.color};\n }\n ${hover(\n `\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n &::before {\n background-color: ${palette.colorHover};\n }\n `,\n `&:hover > ${InputMask}`\n )}\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['bg-brand-primary-basic'],\n borderColorChecked: props.theme.colors['bg-brand-primary-basic'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-error'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-success'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['bg-brand-primary-basic'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: props.theme.colors['bg-oncolor-primary'],\n borderColorChecked: props.theme.colors['bg-oncolor-primary'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span.withConfig<StyledInputRadioProps>({\n shouldForwardProp: shouldForwardInputRadioProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & > ${Input} {\n cursor: inherit;\n }\n & > ${Input}:checked + ${InputMask}::before {\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.contrast || props.onColored ? COLOR_SCHEMA.contrast : 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":["shouldForwardInputRadioProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","displayName","componentId","InputMask","span","template","palette","backgroundColor","borderColor","color","hover","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","props","theme","colors","success","contrast","Root","shouldForwardProp","inline","disabled","white","schema","onColored","responsiveSize"],"mappings":"oNAMA,MAAMA,4BAA8BC,yBACjCC,IAAa,CAAC,SAAU,QAAS,UAAW,YAAa,YAAYC,SAASD,WAGpEE,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAZJ,CAcpB,CAAA,sJAEYK,UAAYL,OAAOM,KAAIJ,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAXJ,CAoBxB,CAAA,6QAED,MAAMO,SAAYC,GAA+B,WACzCH,sCACgBG,EAAQC,uCACZD,EAAQE,4BAEpBL,8CACgBG,EAAQG,kBAE5BC,MACA,6BACsBJ,EAAQK,8CACZL,EAAQM,mEAEFN,EAAQO,6BAGhC,aAAaV,uBAETN,kCAAkCM,sCAClBG,EAAQQ,8CACZR,EAAQS,mCAEpBlB,kCAAkCM,8CAClBG,EAAQU,6BAExBnB,kCAAkCM,sCAClBG,EAAQW,+CACZX,EAAQY,oCAEpBrB,kCAAkCM,8CAClBG,EAAQa,8BAExBtB,4BAA4BM,sCACZG,EAAQc,sDACZd,EAAQe,2CAEpBxB,4BAA4BM,8CACZG,EAAQgB,+BAIhC,MAAMC,aAAe,CACnBC,QAAS,CACPC,MAAOC,IAAG,CAAA,GAAA,KACLC,GACDtB,SAAS,CACPI,MAAOkB,EAAMC,MAAMC,OAAO,2BAC1BtB,gBAAiBoB,EAAMC,MAAMC,OAAO,qBACpCrB,YAAamB,EAAMC,MAAMC,OAAO,sBAChChB,WAAYc,EAAMC,MAAMC,OAAO,2BAC/BlB,qBAAsBgB,EAAMC,MAAMC,OAAO,qBACzCjB,iBAAkBe,EAAMC,MAAMC,OAAO,sBACrCb,aAAcW,EAAMC,MAAMC,OAAO,2BACjCf,uBAAwBa,EAAMC,MAAMC,OAAO,sBAC3Cd,mBAAoBY,EAAMC,MAAMC,OAAO,sBACvCV,cAAeQ,EAAMC,MAAMC,OAAO,uBAClCZ,wBAAyBU,EAAMC,MAAMC,OAAO,qBAC5CX,oBAAqBS,EAAMC,MAAMC,OAAO,mBACxCP,qBAAsBK,EAAMC,MAAMC,OAAO,uBACzCT,+BAAgCO,EAAMC,MAAMC,OAAO,sBACnDR,2BAA4BM,EAAMC,MAAMC,OAAO,yBAC5CF,EAAMrB,YAGfwB,QAASJ,IAAG,CAAA,GAAA,KACPC,GACDtB,SAAS,CACPI,MAAOkB,EAAMC,MAAMC,OAAO,2BAC1BtB,gBAAiBoB,EAAMC,MAAMC,OAAO,qBACpCrB,YAAamB,EAAMC,MAAMC,OAAO,wBAChChB,WAAYc,EAAMC,MAAMC,OAAO,2BAC/BlB,qBAAsBgB,EAAMC,MAAMC,OAAO,qBACzCjB,iBAAkBe,EAAMC,MAAMC,OAAO,wBACrCb,aAAcW,EAAMC,MAAMC,OAAO,2BACjCf,uBAAwBa,EAAMC,MAAMC,OAAO,wBAC3Cd,mBAAoBY,EAAMC,MAAMC,OAAO,wBACvCV,cAAeQ,EAAMC,MAAMC,OAAO,uBAClCZ,wBAAyBU,EAAMC,MAAMC,OAAO,qBAC5CX,oBAAqBS,EAAMC,MAAMC,OAAO,mBACxCP,qBAAsBK,EAAMC,MAAMC,OAAO,uBACzCT,+BAAgCO,EAAMC,MAAMC,OAAO,sBACnDR,2BAA4BM,EAAMC,MAAMC,OAAO,yBAC5CF,EAAMrB,YAGfkB,QAASE,IAAG,CAAA,GAAA,KACPC,GACDtB,SAAS,CACPI,MAAOkB,EAAMC,MAAMC,OAAO,2BAC1BtB,gBAAiBoB,EAAMC,MAAMC,OAAO,qBACpCrB,YAAamB,EAAMC,MAAMC,OAAO,+BAChChB,WAAYc,EAAMC,MAAMC,OAAO,2BAC/BlB,qBAAsBgB,EAAMC,MAAMC,OAAO,qBACzCjB,iBAAkBe,EAAMC,MAAMC,OAAO,wBACrCb,aAAcW,EAAMC,MAAMC,OAAO,2BACjCf,uBAAwBa,EAAMC,MAAMC,OAAO,0BAC3Cd,mBAAoBY,EAAMC,MAAMC,OAAO,0BACvCV,cAAeQ,EAAMC,MAAMC,OAAO,uBAClCZ,wBAAyBU,EAAMC,MAAMC,OAAO,qBAC5CX,oBAAqBS,EAAMC,MAAMC,OAAO,mBACxCP,qBAAsBK,EAAMC,MAAMC,OAAO,uBACzCT,+BAAgCO,EAAMC,MAAMC,OAAO,sBACnDR,2BAA4BM,EAAMC,MAAMC,OAAO,yBAC5CF,EAAMrB,aAIjByB,SAAU,CACRN,MAAOC,IAAG,CAAA,GAAA,KACLC,GACDtB,SAAS,CACPI,MAAOkB,EAAMC,MAAMC,OAAO,2BAC1BtB,gBAAiBoB,EAAMC,MAAMC,OAAO,uBACpCrB,YAAamB,EAAMC,MAAMC,OAAO,eAChChB,WAAYc,EAAMC,MAAMC,OAAO,2BAC/BlB,qBAAsBgB,EAAMC,MAAMC,OAAO,uBACzCjB,iBAAkBe,EAAMC,MAAMC,OAAO,eACrCb,aAAcW,EAAMC,MAAMC,OAAO,2BACjCf,uBAAwBa,EAAMC,MAAMC,OAAO,sBAC3Cd,mBAAoBY,EAAMC,MAAMC,OAAO,sBACvCV,cAAeQ,EAAMC,MAAMC,OAAO,uBAClCZ,wBAAyBU,EAAMC,MAAMC,OAAO,qBAC5CX,oBAAqBS,EAAMC,MAAMC,OAAO,mBACxCP,qBAAsBK,EAAMC,MAAMC,OAAO,uBACzCT,+BAAgCO,EAAMC,MAAMC,OAAO,sBACnDR,2BAA4BM,EAAMC,MAAMC,OAAO,yBAC5CF,EAAMrB,YAGfwB,QAASJ,IAAG,CAAA,GAAA,KACPC,GACDtB,SAAS,CACPI,MAAOkB,EAAMC,MAAMC,OAAO,2BAC1BtB,gBAAiBoB,EAAMC,MAAMC,OAAO,uBACpCrB,YAAamB,EAAMC,MAAMC,OAAO,iBAChChB,WAAYc,EAAMC,MAAMC,OAAO,2BAC/BlB,qBAAsBgB,EAAMC,MAAMC,OAAO,uBACzCjB,iBAAkBe,EAAMC,MAAMC,OAAO,iBACrCb,aAAcW,EAAMC,MAAMC,OAAO,2BACjCf,uBAAwBa,EAAMC,MAAMC,OAAO,wBAC3Cd,mBAAoBY,EAAMC,MAAMC,OAAO,wBACvCV,cAAeQ,EAAMC,MAAMC,OAAO,uBAClCZ,wBAAyBU,EAAMC,MAAMC,OAAO,qBAC5CX,oBAAqBS,EAAMC,MAAMC,OAAO,mBACxCP,qBAAsBK,EAAMC,MAAMC,OAAO,uBACzCT,+BAAgCO,EAAMC,MAAMC,OAAO,sBACnDR,2BAA4BM,EAAMC,MAAMC,OAAO,yBAC5CF,EAAMrB,YAGfkB,QAASE,IAAG,CAAA,GAAA,KACPC,GACDtB,SAAS,CACPI,MAAOkB,EAAMC,MAAMC,OAAO,0BAC1BtB,gBAAiBoB,EAAMC,MAAMC,OAAO,qBACpCrB,YAAamB,EAAMC,MAAMC,OAAO,+BAChChB,WAAYc,EAAMC,MAAMC,OAAO,0BAC/BlB,qBAAsBgB,EAAMC,MAAMC,OAAO,qBACzCjB,iBAAkBe,EAAMC,MAAMC,OAAO,wBACrCb,aAAcW,EAAMC,MAAMC,OAAO,0BACjCf,uBAAwBa,EAAMC,MAAMC,OAAO,sBAC3Cd,mBAAoBY,EAAMC,MAAMC,OAAO,sBACvCV,cAAeQ,EAAMC,MAAMC,OAAO,uBAClCZ,wBAAyBU,EAAMC,MAAMC,OAAO,qBAC5CX,oBAAqBS,EAAMC,MAAMC,OAAO,mBACxCP,qBAAsBK,EAAMC,MAAMC,OAAO,uBACzCT,+BAAgCO,EAAMC,MAAMC,OAAO,sBACnDR,2BAA4BM,EAAMC,MAAMC,OAAO,yBAC5CF,EAAMrB,cAMZ,MAAM0B,KAAOlC,OAAOM,KAAKJ,WAAkC,CAChEiC,kBAAmBxC,8BACnBO,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,KACG6B,GAAU,yGAIEA,EAAMO,OAAS,cAAgB,4EAGhCP,EAAMQ,SAAW,cAAgB,yBACrCtC,yDAGAA,mBAAmBM,gEAGnBN,yBAAyBM,8CACLwB,EAAMC,MAAMC,OAAOO,oBAAoBT,EAAMC,MAAMC,OAAO,yGAKrFF,IACD,MAAMU,EAASV,EAAMI,UAAYJ,EAAMW,UAAYf,aAAaQ,SAAWR,aAAaC,QAExF,OAAIG,EAAMF,MAAcY,EAAOZ,MAC3BE,EAAMG,QAAgBO,EAAOP,QAE1BO,EAAOb,OAAO,GAGrBe"}
|