@foxford/ui 2.111.0 → 2.112.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/components/AddElement/style.js +1 -1
  2. package/components/AddElement/style.js.map +1 -1
  3. package/components/AddElement/style.mjs +1 -1
  4. package/components/AddElement/style.mjs.map +1 -1
  5. package/components/Alert/CountdownCircle.js +1 -1
  6. package/components/Alert/CountdownCircle.js.map +1 -1
  7. package/components/Alert/CountdownCircle.mjs +1 -1
  8. package/components/Alert/CountdownCircle.mjs.map +1 -1
  9. package/components/ContextMenu/Item.js +1 -1
  10. package/components/ContextMenu/Item.js.map +1 -1
  11. package/components/ContextMenu/Item.mjs +1 -1
  12. package/components/ContextMenu/Item.mjs.map +1 -1
  13. package/components/ContextMenu.Multilevel/Controls.js +1 -1
  14. package/components/ContextMenu.Multilevel/Controls.js.map +1 -1
  15. package/components/ContextMenu.Multilevel/Controls.mjs +1 -1
  16. package/components/ContextMenu.Multilevel/Controls.mjs.map +1 -1
  17. package/components/ContextMenu.Multilevel/Heading.js +1 -1
  18. package/components/ContextMenu.Multilevel/Heading.js.map +1 -1
  19. package/components/ContextMenu.Multilevel/Heading.mjs +1 -1
  20. package/components/ContextMenu.Multilevel/Heading.mjs.map +1 -1
  21. package/components/ContextMenu.Multilevel/SubHeading.js +1 -1
  22. package/components/ContextMenu.Multilevel/SubHeading.js.map +1 -1
  23. package/components/ContextMenu.Multilevel/SubHeading.mjs +1 -1
  24. package/components/ContextMenu.Multilevel/SubHeading.mjs.map +1 -1
  25. package/components/DialogComponent/style.js +1 -1
  26. package/components/DialogComponent/style.js.map +1 -1
  27. package/components/DialogComponent/style.mjs +1 -1
  28. package/components/DialogComponent/style.mjs.map +1 -1
  29. package/components/FormInputLabel/style.js +1 -1
  30. package/components/FormInputLabel/style.js.map +1 -1
  31. package/components/FormInputLabel/style.mjs +1 -1
  32. package/components/FormInputLabel/style.mjs.map +1 -1
  33. package/components/InputCheckbox/style.js +1 -1
  34. package/components/InputCheckbox/style.js.map +1 -1
  35. package/components/InputCheckbox/style.mjs +1 -1
  36. package/components/InputCheckbox/style.mjs.map +1 -1
  37. package/components/InputRadio/style.js +1 -1
  38. package/components/InputRadio/style.js.map +1 -1
  39. package/components/InputRadio/style.mjs +1 -1
  40. package/components/InputRadio/style.mjs.map +1 -1
  41. package/components/Progress.Segmented/style.js +1 -1
  42. package/components/Progress.Segmented/style.js.map +1 -1
  43. package/components/Progress.Segmented/style.mjs +1 -1
  44. package/components/Progress.Segmented/style.mjs.map +1 -1
  45. package/components/Switch/style.js +1 -1
  46. package/components/Switch/style.js.map +1 -1
  47. package/components/Switch/style.mjs +1 -1
  48. package/components/Switch/style.mjs.map +1 -1
  49. package/components/Switcher/style.js +1 -1
  50. package/components/Switcher/style.js.map +1 -1
  51. package/components/Switcher/style.mjs +1 -1
  52. package/components/Switcher/style.mjs.map +1 -1
  53. package/components/Tag/Tag.js +1 -1
  54. package/components/Tag/Tag.js.map +1 -1
  55. package/components/Tag/Tag.mjs +1 -1
  56. package/components/Tag/Tag.mjs.map +1 -1
  57. package/dts/index.d.ts +21 -882
  58. package/index.js +1 -1
  59. package/index.mjs +1 -1
  60. package/mixins/focus.js +1 -1
  61. package/mixins/focus.js.map +1 -1
  62. package/mixins/focus.mjs +1 -1
  63. package/mixins/focus.mjs.map +1 -1
  64. package/package.json +2 -2
  65. package/theme/colors-dark.js.map +1 -1
  66. package/theme/colors-dark.mjs.map +1 -1
  67. package/theme/colors-light.js.map +1 -1
  68. package/theme/colors-light.mjs.map +1 -1
  69. package/theme/colors.js +1 -1
  70. package/theme/colors.js.map +1 -1
  71. package/theme/colors.mjs +1 -1
  72. package/theme/colors.mjs.map +1 -1
  73. package/theme/theme-colors.js +2 -0
  74. package/theme/theme-colors.js.map +1 -0
  75. package/theme/theme-colors.mjs +2 -0
  76. package/theme/theme-colors.mjs.map +1 -0
  77. package/theme/themes.js +1 -1
  78. package/theme/themes.js.map +1 -1
  79. package/theme/themes.mjs +1 -1
  80. package/theme/themes.mjs.map +1 -1
package/components/InputCheckbox/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/InputCheckbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { CheckFill, MinusFill } from '@foxford/icon-pack'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { hover } from 'mixins/hover'\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(CheckFill)`\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(MinusFill)`\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","CheckFill","InputIndeterminate","MinusFill","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
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/InputCheckbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { CheckFill, MinusFill } from '@foxford/icon-pack'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { hover } from 'mixins/hover'\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(CheckFill)`\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(MinusFill)`\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['border-focus-inner']}, 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","CheckFill","InputIndeterminate","MinusFill","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","schema","onColored","responsiveSize"],"mappings":"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"}
package/components/InputRadio/style.js CHANGED
@@ -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 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;
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['border-focus-inner']}, 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
package/components/InputRadio/style.js.map CHANGED
@@ -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 { 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":"4TAMA,MAAMA,4BAA8BC,MAAAA,wBACjCC,IAAa,CAAC,SAAU,QAAS,UAAW,YAAa,YAAYC,SAASD,UAGpEE,MAAQC,gBAAAA,QAAOC,MAAKC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAZJ,CAAY,CAAA,sJAgBpBK,UAAYL,gBAAAA,QAAOM,KAAIJ,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAXJ,CAAW,CAAA,6QAsBpC,MAAMO,SAAYC,GAA+B,WACzCH,sCACgBG,EAAQC,uCACZD,EAAQE,4BAEpBL,8CACgBG,EAAQG,kBAE5BC,YACA,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,OAAAA,IAAG,CAAA,GAAA,IACLC,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,WAGfwB,QAASJ,OAAAA,IAAG,CAAA,GAAA,IACPC,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,WAGfkB,QAASE,OAAAA,IAAG,CAAA,GAAA,IACPC,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,YAIjByB,SAAU,CACRN,MAAOC,OAAAA,IAAG,CAAA,GAAA,IACLC,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,WAGfwB,QAASJ,OAAAA,IAAG,CAAA,GAAA,IACPC,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,WAGfkB,QAASE,OAAAA,IAAG,CAAA,GAAA,IACPC,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,aAMZ,MAAM0B,KAAOlC,gBAAAA,QAAOM,KAAKJ,WAAkC,CAChEiC,kBAAmBxC,8BACnBO,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IACG6B,GAAU,yGAIEA,EAAMO,OAAS,cAAgB,4EAGhCP,EAAMQ,SAAW,cAAgB,yBACrCtC,yDAGAA,mBAAmBM,gEAGnBN,yBAAyBM,8CACLwB,EAAMC,MAAMC,OAAOO,oBAAoBT,EAAMC,MAAMC,OAAO,uGAKrFF,IACD,MAAMU,EAASV,EAAMI,UAAYJ,EAAMW,UAAYf,aAAaQ,SAAWR,aAAaC,QAExF,OAAIG,EAAMF,MAAcY,EAAOZ,MAC3BE,EAAMG,QAAgBO,EAAOP,QAE1BO,EAAOb,SAGde,eAAAA"}
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['border-focus-inner']}, 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","schema","onColored","responsiveSize"],"mappings":"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"}
package/components/InputRadio/style.mjs CHANGED
@@ -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{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};
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['border-focus-inner']}, 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
package/components/InputRadio/style.mjs.map CHANGED
@@ -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 { 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,wBACjCC,IAAa,CAAC,SAAU,QAAS,UAAW,YAAa,YAAYC,SAASD,UAGpEE,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAZJ,CAAY,CAAA,sJAgBpBK,UAAYL,OAAOM,KAAIJ,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAXJ,CAAW,CAAA,6QAsBpC,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,IACLC,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,WAGfwB,QAASJ,IAAG,CAAA,GAAA,IACPC,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,WAGfkB,QAASE,IAAG,CAAA,GAAA,IACPC,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,YAIjByB,SAAU,CACRN,MAAOC,IAAG,CAAA,GAAA,IACLC,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,WAGfwB,QAASJ,IAAG,CAAA,GAAA,IACPC,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,WAGfkB,QAASE,IAAG,CAAA,GAAA,IACPC,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,aAMZ,MAAM0B,KAAOlC,OAAOM,KAAKJ,WAAkC,CAChEiC,kBAAmBxC,8BACnBO,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IACG6B,GAAU,yGAIEA,EAAMO,OAAS,cAAgB,4EAGhCP,EAAMQ,SAAW,cAAgB,yBACrCtC,yDAGAA,mBAAmBM,gEAGnBN,yBAAyBM,8CACLwB,EAAMC,MAAMC,OAAOO,oBAAoBT,EAAMC,MAAMC,OAAO,uGAKrFF,IACD,MAAMU,EAASV,EAAMI,UAAYJ,EAAMW,UAAYf,aAAaQ,SAAWR,aAAaC,QAExF,OAAIG,EAAMF,MAAcY,EAAOZ,MAC3BE,EAAMG,QAAgBO,EAAOP,QAE1BO,EAAOb,SAGde"}
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['border-focus-inner']}, 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","schema","onColored","responsiveSize"],"mappings":"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"}
package/components/Progress.Segmented/style.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var colors=require('../../theme/colors.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const Progress=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Progress",componentId:"ui__sc-10x2wrn-0"})(["height:100%;border-radius:10px;width:",";",";"],e=>`${e.percent||0}%`,e=>color.color(e.percentColor?e.percentColor:colors.DefaultColorNames.atlantis,'background'));const Separators=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Separators",componentId:"ui__sc-10x2wrn-1"})(["position:absolute;top:0;display:flex;justify-content:space-between;width:100%;height:4px;z-index:3;"]);const Separator=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Separator",componentId:"ui__sc-10x2wrn-2"})(["width:2px;height:100%;&:first-child,&:last-child{width:0;}",""],e=>color.color(e.separatorColor?e.separatorColor:colors.DefaultColorNames.white,'background'));const isEmpty=styled.css(["& ","{&:first-child{&:before{background:rgba(0,0,0,0.1);}}}"],Separator);const Root=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Root",componentId:"ui__sc-10x2wrn-3"})(["position:relative;height:4px;background:rgba(0,0,0,0.1);border-radius:10px;"," "," ",""],e=>e.haveCircle?(e=>styled.css(["margin-left:8px;border-radius:0 10px 10px 0;& ","{border-radius:0 10px 10px 0;}& ","{&:first-child{position:relative;&:before{position:absolute;display:block;content:'';left:-8px;top:-2px;width:8px;height:8px;border-radius:50%;background:",";}}}"],Progress,Separator,color.getColor(e.percentColor||colors.DefaultColorNames.atlantis,e)))(e):null,e=>e.percent===100?(e=>styled.css(["& ","{&:last-child{position:relative;&:before{position:absolute;top:-6px;right:-6px;display:block;content:'';background:"," url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K') center no-repeat;width:16px;height:16px;border-radius:50%;}}}"],Separator,color.getColor(e.percentColor||colors.DefaultColorNames.atlantis,e)))(e):null,e=>e.percent===0?isEmpty:null);exports.Progress=Progress,exports.Root=Root,exports.Separator=Separator,exports.Separators=Separators;
1
+ 'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const Progress=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Progress",componentId:"ui__sc-10x2wrn-0"})(["height:100%;border-radius:10px;width:",";",";"],e=>`${e.percent||0}%`,e=>color.color(e.percentColor?e.percentColor:'atlantis','background'));const Separators=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Separators",componentId:"ui__sc-10x2wrn-1"})(["position:absolute;top:0;display:flex;justify-content:space-between;width:100%;height:4px;z-index:3;"]);const Separator=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Separator",componentId:"ui__sc-10x2wrn-2"})(["width:2px;height:100%;&:first-child,&:last-child{width:0;}",""],e=>color.color(e.separatorColor?e.separatorColor:'white','background'));const isEmpty=styled.css(["& ","{&:first-child{&:before{background:rgba(0,0,0,0.1);}}}"],Separator);const Root=styled__default.default.div.withConfig({displayName:"ProgressSegmented__Root",componentId:"ui__sc-10x2wrn-3"})(["position:relative;height:4px;background:rgba(0,0,0,0.1);border-radius:10px;"," "," ",""],e=>e.haveCircle?(e=>styled.css(["margin-left:8px;border-radius:0 10px 10px 0;& ","{border-radius:0 10px 10px 0;}& ","{&:first-child{position:relative;&:before{position:absolute;display:block;content:'';left:-8px;top:-2px;width:8px;height:8px;border-radius:50%;background:",";}}}"],Progress,Separator,color.getColor(e.percentColor||'atlantis',e)))(e):null,e=>e.percent===100?(e=>styled.css(["& ","{&:last-child{position:relative;&:before{position:absolute;top:-6px;right:-6px;display:block;content:'';background:"," url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K') center no-repeat;width:16px;height:16px;border-radius:50%;}}}"],Separator,color.getColor(e.percentColor||'atlantis',e)))(e):null,e=>e.percent===0?isEmpty:null);exports.Progress=Progress,exports.Root=Root,exports.Separator=Separator,exports.Separators=Separators;
2
2
  //# sourceMappingURL=style.js.map
package/components/Progress.Segmented/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Progress.Segmented/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { color, getColor } from 'mixins/color'\nimport { DefaultColorNames } from 'theme/colors'\nimport type { ProgressSegmentedProps } from './Progress.Segmented'\n\nexport const Progress = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'percentColor'>>`\n height: 100%;\n border-radius: 10px;\n width: ${(props) => `${props.percent || 0}%`};\n ${(props) =>\n props.percentColor ? color(props.percentColor, 'background') : color(DefaultColorNames.atlantis, 'background')};\n`\n\nexport const Separators = styled.div`\n position: absolute;\n top: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n height: 4px;\n z-index: 3;\n`\n\nexport const Separator = styled.div<Pick<ProgressSegmentedProps, 'separatorColor'>>`\n width: 2px;\n height: 100%;\n &:first-child,\n &:last-child {\n width: 0;\n }\n ${(props) =>\n props.separatorColor ? color(props.separatorColor, 'background') : color(DefaultColorNames.white, 'background')}\n`\n\nconst haveCircle = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n margin-left: 8px;\n border-radius: 0 10px 10px 0;\n & ${Progress} {\n border-radius: 0 10px 10px 0;\n }\n & ${Separator} {\n &:first-child {\n position: relative;\n &:before {\n position: absolute;\n display: block;\n content: '';\n left: -8px;\n top: -2px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: ${getColor(props.percentColor || DefaultColorNames.atlantis, props)};\n }\n }\n }\n`\n\nconst isDone = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n & ${Separator} {\n &:last-child {\n position: relative;\n &:before {\n position: absolute;\n top: -6px;\n right: -6px;\n display: block;\n content: '';\n background: ${getColor(props.percentColor || DefaultColorNames.atlantis, props)}\n url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K')\n center no-repeat;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n }\n }\n }\n`\n\nconst isEmpty = css`\n & ${Separator} {\n &:first-child {\n &:before {\n background: rgba(0, 0, 0, 0.1);\n }\n }\n }\n`\n\nexport const Root = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'haveCircle' | 'isActive' | 'percentColor'>>`\n position: relative;\n height: 4px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n ${(props) => (props.haveCircle ? haveCircle(props) : null)}\n ${(props) => (props.percent === 100 ? isDone(props) : null)}\n ${(props) => (props.percent === 0 ? isEmpty : null)}\n`\n"],"names":["Progress","styled","div","withConfig","displayName","componentId","props","percent","color","percentColor","DefaultColorNames","atlantis","Separators","Separator","separatorColor","white","isEmpty","css","Root","haveCircle","getColor","isDone"],"mappings":"+PAMaA,SAAWC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,oBAAVJ,CAAU,CAAA,wCAAA,IAAA,KAGtBK,GAAU,GAAGA,EAAMC,SAAW,KACrCD,GACoBE,MAAAA,MAArBF,EAAMG,aAAqBH,EAAMG,aAAoCC,yBAAkBC,SAAxC,qBAGtCC,WAAaX,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,oBAAVJ,CAAU,CAAA,8GAUvBY,UAAYZ,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,oBAAVJ,CAAU,CAAA,6DAAA,IAO9BK,GACsBE,MAAAA,MAAvBF,EAAMQ,eAAuBR,EAAMQ,eAAsCJ,OAAAA,kBAAkBK,MAAxC,eAgDvD,MAAMC,QAAUC,OAAAA,IAAG,CAAA,KAAA,0DACbJ,iBASOK,KAAOjB,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,oBAAVJ,CAAU,CAAA,8EAAA,IAAA,IAAA,IAKzBK,GAAWA,EAAMa,WA5DFb,IAAkFW,WAAG,CAAA,iDAAA,mCAAA,6JAAA,QAGnGjB,SAGAa,UAYgBO,MAAAA,SAASd,EAAMG,cAAgBC,OAAAA,kBAAkBC,SAAUL,IA0C9Ca,CAAWb,GAAS,KAClDA,GAAWA,EAAMC,UAAY,IArClBD,IAAkFW,OAAAA,IAAG,CAAA,KAAA,sHAAA,oWAC/FJ,UASgBO,MAAAA,SAASd,EAAMG,cAAgBC,OAAAA,kBAAkBC,SAAUL,IA2BzCe,CAAOf,GAAS,KACnDA,GAAWA,EAAMC,UAAY,EAAIS,QAAU"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Progress.Segmented/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { color, getColor } from 'mixins/color'\nimport type { ProgressSegmentedProps } from './Progress.Segmented'\n\nexport const Progress = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'percentColor'>>`\n height: 100%;\n border-radius: 10px;\n width: ${(props) => `${props.percent || 0}%`};\n ${(props) => (props.percentColor ? color(props.percentColor, 'background') : color('atlantis', 'background'))};\n`\n\nexport const Separators = styled.div`\n position: absolute;\n top: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n height: 4px;\n z-index: 3;\n`\n\nexport const Separator = styled.div<Pick<ProgressSegmentedProps, 'separatorColor'>>`\n width: 2px;\n height: 100%;\n &:first-child,\n &:last-child {\n width: 0;\n }\n ${(props) => (props.separatorColor ? color(props.separatorColor, 'background') : color('white', 'background'))}\n`\n\nconst haveCircle = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n margin-left: 8px;\n border-radius: 0 10px 10px 0;\n & ${Progress} {\n border-radius: 0 10px 10px 0;\n }\n & ${Separator} {\n &:first-child {\n position: relative;\n &:before {\n position: absolute;\n display: block;\n content: '';\n left: -8px;\n top: -2px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: ${getColor(props.percentColor || 'atlantis', props)};\n }\n }\n }\n`\n\nconst isDone = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n & ${Separator} {\n &:last-child {\n position: relative;\n &:before {\n position: absolute;\n top: -6px;\n right: -6px;\n display: block;\n content: '';\n background: ${getColor(props.percentColor || 'atlantis', props)}\n url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K')\n center no-repeat;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n }\n }\n }\n`\n\nconst isEmpty = css`\n & ${Separator} {\n &:first-child {\n &:before {\n background: rgba(0, 0, 0, 0.1);\n }\n }\n }\n`\n\nexport const Root = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'haveCircle' | 'isActive' | 'percentColor'>>`\n position: relative;\n height: 4px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n ${(props) => (props.haveCircle ? haveCircle(props) : null)}\n ${(props) => (props.percent === 100 ? isDone(props) : null)}\n ${(props) => (props.percent === 0 ? isEmpty : null)}\n`\n"],"names":["Progress","styled","div","withConfig","displayName","componentId","props","percent","color","percentColor","Separators","Separator","separatorColor","isEmpty","css","Root","haveCircle","getColor","isDone"],"mappings":"mNAKaA,SAAWC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,oBAAVJ,CAAU,CAAA,wCAAA,IAAA,KAGtBK,GAAU,GAAGA,EAAMC,SAAW,KACrCD,GAAgCE,MAAAA,MAArBF,EAAMG,aAAqBH,EAAMG,aAAoC,WAAtB,qBAGlDC,WAAaT,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,oBAAVJ,CAAU,CAAA,8GAUvBU,UAAYV,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,oBAAVJ,CAAU,CAAA,6DAAA,IAO9BK,GAAkCE,MAAAA,MAAvBF,EAAMM,eAAuBN,EAAMM,eAAsC,QAAtB,eAgDnE,MAAMC,QAAUC,OAAAA,IAAG,CAAA,KAAA,0DACbH,iBASOI,KAAOd,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,oBAAVJ,CAAU,CAAA,8EAAA,IAAA,IAAA,IAKzBK,GAAWA,EAAMU,WA5DFV,IAAkFQ,OAAAA,IAAG,CAAA,iDAAA,mCAAA,6JAAA,QAGnGd,SAGAW,UAYgBM,MAAAA,SAASX,EAAMG,cAAgB,WAAYH,IA0C9BU,CAAWV,GAAS,KAClDA,GAAWA,EAAMC,UAAY,IArClBD,IAAkFQ,OAAAA,IAAG,CAAA,KAAA,sHAAA,oWAC/FH,UASgBM,MAAAA,SAASX,EAAMG,cAAgB,WAAYH,IA2BzBY,CAAOZ,GAAS,KACnDA,GAAWA,EAAMC,UAAY,EAAIM,QAAU"}
package/components/Progress.Segmented/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled,{css}from'styled-components';import{color,getColor}from'../../mixins/color.mjs';import{DefaultColorNames}from'../../theme/colors.mjs';const Progress=styled.div.withConfig({displayName:"ProgressSegmented__Progress",componentId:"ui__sc-10x2wrn-0"})(["height:100%;border-radius:10px;width:",";",";"],o=>`${o.percent||0}%`,o=>color(o.percentColor?o.percentColor:DefaultColorNames.atlantis,'background'));const Separators=styled.div.withConfig({displayName:"ProgressSegmented__Separators",componentId:"ui__sc-10x2wrn-1"})(["position:absolute;top:0;display:flex;justify-content:space-between;width:100%;height:4px;z-index:3;"]);const Separator=styled.div.withConfig({displayName:"ProgressSegmented__Separator",componentId:"ui__sc-10x2wrn-2"})(["width:2px;height:100%;&:first-child,&:last-child{width:0;}",""],o=>color(o.separatorColor?o.separatorColor:DefaultColorNames.white,'background'));const isEmpty=css(["& ","{&:first-child{&:before{background:rgba(0,0,0,0.1);}}}"],Separator);const Root=styled.div.withConfig({displayName:"ProgressSegmented__Root",componentId:"ui__sc-10x2wrn-3"})(["position:relative;height:4px;background:rgba(0,0,0,0.1);border-radius:10px;"," "," ",""],o=>o.haveCircle?(o=>css(["margin-left:8px;border-radius:0 10px 10px 0;& ","{border-radius:0 10px 10px 0;}& ","{&:first-child{position:relative;&:before{position:absolute;display:block;content:'';left:-8px;top:-2px;width:8px;height:8px;border-radius:50%;background:",";}}}"],Progress,Separator,getColor(o.percentColor||DefaultColorNames.atlantis,o)))(o):null,o=>o.percent===100?(o=>css(["& ","{&:last-child{position:relative;&:before{position:absolute;top:-6px;right:-6px;display:block;content:'';background:"," url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K') center no-repeat;width:16px;height:16px;border-radius:50%;}}}"],Separator,getColor(o.percentColor||DefaultColorNames.atlantis,o)))(o):null,o=>o.percent===0?isEmpty:null);export{Progress,Root,Separator,Separators};
1
+ import styled,{css}from'styled-components';import{color,getColor}from'../../mixins/color.mjs';const Progress=styled.div.withConfig({displayName:"ProgressSegmented__Progress",componentId:"ui__sc-10x2wrn-0"})(["height:100%;border-radius:10px;width:",";",";"],o=>`${o.percent||0}%`,o=>color(o.percentColor?o.percentColor:'atlantis','background'));const Separators=styled.div.withConfig({displayName:"ProgressSegmented__Separators",componentId:"ui__sc-10x2wrn-1"})(["position:absolute;top:0;display:flex;justify-content:space-between;width:100%;height:4px;z-index:3;"]);const Separator=styled.div.withConfig({displayName:"ProgressSegmented__Separator",componentId:"ui__sc-10x2wrn-2"})(["width:2px;height:100%;&:first-child,&:last-child{width:0;}",""],o=>color(o.separatorColor?o.separatorColor:'white','background'));const isEmpty=css(["& ","{&:first-child{&:before{background:rgba(0,0,0,0.1);}}}"],Separator);const Root=styled.div.withConfig({displayName:"ProgressSegmented__Root",componentId:"ui__sc-10x2wrn-3"})(["position:relative;height:4px;background:rgba(0,0,0,0.1);border-radius:10px;"," "," ",""],o=>o.haveCircle?(o=>css(["margin-left:8px;border-radius:0 10px 10px 0;& ","{border-radius:0 10px 10px 0;}& ","{&:first-child{position:relative;&:before{position:absolute;display:block;content:'';left:-8px;top:-2px;width:8px;height:8px;border-radius:50%;background:",";}}}"],Progress,Separator,getColor(o.percentColor||'atlantis',o)))(o):null,o=>o.percent===100?(o=>css(["& ","{&:last-child{position:relative;&:before{position:absolute;top:-6px;right:-6px;display:block;content:'';background:"," url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K') center no-repeat;width:16px;height:16px;border-radius:50%;}}}"],Separator,getColor(o.percentColor||'atlantis',o)))(o):null,o=>o.percent===0?isEmpty:null);export{Progress,Root,Separator,Separators};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/Progress.Segmented/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Progress.Segmented/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { color, getColor } from 'mixins/color'\nimport { DefaultColorNames } from 'theme/colors'\nimport type { ProgressSegmentedProps } from './Progress.Segmented'\n\nexport const Progress = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'percentColor'>>`\n height: 100%;\n border-radius: 10px;\n width: ${(props) => `${props.percent || 0}%`};\n ${(props) =>\n props.percentColor ? color(props.percentColor, 'background') : color(DefaultColorNames.atlantis, 'background')};\n`\n\nexport const Separators = styled.div`\n position: absolute;\n top: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n height: 4px;\n z-index: 3;\n`\n\nexport const Separator = styled.div<Pick<ProgressSegmentedProps, 'separatorColor'>>`\n width: 2px;\n height: 100%;\n &:first-child,\n &:last-child {\n width: 0;\n }\n ${(props) =>\n props.separatorColor ? color(props.separatorColor, 'background') : color(DefaultColorNames.white, 'background')}\n`\n\nconst haveCircle = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n margin-left: 8px;\n border-radius: 0 10px 10px 0;\n & ${Progress} {\n border-radius: 0 10px 10px 0;\n }\n & ${Separator} {\n &:first-child {\n position: relative;\n &:before {\n position: absolute;\n display: block;\n content: '';\n left: -8px;\n top: -2px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: ${getColor(props.percentColor || DefaultColorNames.atlantis, props)};\n }\n }\n }\n`\n\nconst isDone = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n & ${Separator} {\n &:last-child {\n position: relative;\n &:before {\n position: absolute;\n top: -6px;\n right: -6px;\n display: block;\n content: '';\n background: ${getColor(props.percentColor || DefaultColorNames.atlantis, props)}\n url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K')\n center no-repeat;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n }\n }\n }\n`\n\nconst isEmpty = css`\n & ${Separator} {\n &:first-child {\n &:before {\n background: rgba(0, 0, 0, 0.1);\n }\n }\n }\n`\n\nexport const Root = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'haveCircle' | 'isActive' | 'percentColor'>>`\n position: relative;\n height: 4px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n ${(props) => (props.haveCircle ? haveCircle(props) : null)}\n ${(props) => (props.percent === 100 ? isDone(props) : null)}\n ${(props) => (props.percent === 0 ? isEmpty : null)}\n`\n"],"names":["Progress","styled","div","withConfig","displayName","componentId","props","percent","color","percentColor","DefaultColorNames","atlantis","Separators","Separator","separatorColor","white","isEmpty","css","Root","haveCircle","getColor","isDone"],"mappings":"0JAMaA,SAAWC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,oBAAVJ,CAAU,CAAA,wCAAA,IAAA,KAGtBK,GAAU,GAAGA,EAAMC,SAAW,KACrCD,GACoBE,MAArBF,EAAMG,aAAqBH,EAAMG,aAAoCC,kBAAkBC,SAAxC,qBAGtCC,WAAaX,OAAOC,IAAGC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,oBAAVJ,CAAU,CAAA,8GAUvBY,UAAYZ,OAAOC,IAAGC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,oBAAVJ,CAAU,CAAA,6DAAA,IAO9BK,GACsBE,MAAvBF,EAAMQ,eAAuBR,EAAMQ,eAAsCJ,kBAAkBK,MAAxC,eAgDvD,MAAMC,QAAUC,IAAG,CAAA,KAAA,0DACbJ,iBASOK,KAAOjB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,oBAAVJ,CAAU,CAAA,8EAAA,IAAA,IAAA,IAKzBK,GAAWA,EAAMa,WA5DFb,IAAkFW,IAAG,CAAA,iDAAA,mCAAA,6JAAA,QAGnGjB,SAGAa,UAYgBO,SAASd,EAAMG,cAAgBC,kBAAkBC,SAAUL,IA0C9Ca,CAAWb,GAAS,KAClDA,GAAWA,EAAMC,UAAY,IArClBD,IAAkFW,IAAG,CAAA,KAAA,sHAAA,oWAC/FJ,UASgBO,SAASd,EAAMG,cAAgBC,kBAAkBC,SAAUL,IA2BzCe,CAAOf,GAAS,KACnDA,GAAWA,EAAMC,UAAY,EAAIS,QAAU"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Progress.Segmented/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { color, getColor } from 'mixins/color'\nimport type { ProgressSegmentedProps } from './Progress.Segmented'\n\nexport const Progress = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'percentColor'>>`\n height: 100%;\n border-radius: 10px;\n width: ${(props) => `${props.percent || 0}%`};\n ${(props) => (props.percentColor ? color(props.percentColor, 'background') : color('atlantis', 'background'))};\n`\n\nexport const Separators = styled.div`\n position: absolute;\n top: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n height: 4px;\n z-index: 3;\n`\n\nexport const Separator = styled.div<Pick<ProgressSegmentedProps, 'separatorColor'>>`\n width: 2px;\n height: 100%;\n &:first-child,\n &:last-child {\n width: 0;\n }\n ${(props) => (props.separatorColor ? color(props.separatorColor, 'background') : color('white', 'background'))}\n`\n\nconst haveCircle = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n margin-left: 8px;\n border-radius: 0 10px 10px 0;\n & ${Progress} {\n border-radius: 0 10px 10px 0;\n }\n & ${Separator} {\n &:first-child {\n position: relative;\n &:before {\n position: absolute;\n display: block;\n content: '';\n left: -8px;\n top: -2px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: ${getColor(props.percentColor || 'atlantis', props)};\n }\n }\n }\n`\n\nconst isDone = (props: Pick<ProgressSegmentedProps, 'percentColor'> & { theme: DefaultTheme }) => css`\n & ${Separator} {\n &:last-child {\n position: relative;\n &:before {\n position: absolute;\n top: -6px;\n right: -6px;\n display: block;\n content: '';\n background: ${getColor(props.percentColor || 'atlantis', props)}\n url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjciIHZpZXdCb3g9IjAgMCA5IDciPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNi45MTQgMEw4IDEuMDQ1IDIuODQ4IDYgMCAzLjI2MWwxLjA4Ni0xLjA0NUwyLjg0OCAzLjkxeiIvPgo8L3N2Zz4K')\n center no-repeat;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n }\n }\n }\n`\n\nconst isEmpty = css`\n & ${Separator} {\n &:first-child {\n &:before {\n background: rgba(0, 0, 0, 0.1);\n }\n }\n }\n`\n\nexport const Root = styled.div<Pick<ProgressSegmentedProps, 'percent' | 'haveCircle' | 'isActive' | 'percentColor'>>`\n position: relative;\n height: 4px;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 10px;\n ${(props) => (props.haveCircle ? haveCircle(props) : null)}\n ${(props) => (props.percent === 100 ? isDone(props) : null)}\n ${(props) => (props.percent === 0 ? isEmpty : null)}\n`\n"],"names":["Progress","styled","div","withConfig","displayName","componentId","props","percent","color","percentColor","Separators","Separator","separatorColor","isEmpty","css","Root","haveCircle","getColor","isDone"],"mappings":"oGAKaA,SAAWC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,oBAAVJ,CAAU,CAAA,wCAAA,IAAA,KAGtBK,GAAU,GAAGA,EAAMC,SAAW,KACrCD,GAAgCE,MAArBF,EAAMG,aAAqBH,EAAMG,aAAoC,WAAtB,qBAGlDC,WAAaT,OAAOC,IAAGC,WAAA,CAAAC,YAAA,gCAAAC,YAAA,oBAAVJ,CAAU,CAAA,8GAUvBU,UAAYV,OAAOC,IAAGC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,oBAAVJ,CAAU,CAAA,6DAAA,IAO9BK,GAAkCE,MAAvBF,EAAMM,eAAuBN,EAAMM,eAAsC,QAAtB,eAgDnE,MAAMC,QAAUC,IAAG,CAAA,KAAA,0DACbH,iBASOI,KAAOd,OAAOC,IAAGC,WAAA,CAAAC,YAAA,0BAAAC,YAAA,oBAAVJ,CAAU,CAAA,8EAAA,IAAA,IAAA,IAKzBK,GAAWA,EAAMU,WA5DFV,IAAkFQ,IAAG,CAAA,iDAAA,mCAAA,6JAAA,QAGnGd,SAGAW,UAYgBM,SAASX,EAAMG,cAAgB,WAAYH,IA0C9BU,CAAWV,GAAS,KAClDA,GAAWA,EAAMC,UAAY,IArClBD,IAAkFQ,IAAG,CAAA,KAAA,sHAAA,oWAC/FH,UASgBM,SAASX,EAAMG,cAAgB,WAAYH,IA2BzBY,CAAOZ,GAAS,KACnDA,GAAWA,EAAMC,UAAY,EAAIM,QAAU"}
package/components/Switch/style.js CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');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);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardSwitchProp=style.createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=style.createShouldForwardProp();const Input=styled__default.default.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled__default.default.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize.responsiveSize);const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\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=>{return e={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${e.knobColor};\n box-shadow: 0px 2px 4px ${e.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${e.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${e.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${e.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${e.trackColorDisabledChecked};\n }\n ${hover.hover(`\n background-color: ${e.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover.hover(`\n background-color: ${e.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var e},responsiveSize.responsiveSize);exports.Input=Input,exports.Knob=Knob,exports.Root=Root,exports.Track=Track;
1
+ 'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');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);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardSwitchProp=style.createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=style.createShouldForwardProp();const Input=styled__default.default.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled__default.default.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize.responsiveSize);const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `,o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover.hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover.hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize.responsiveSize);exports.Input=Input,exports.Knob=Knob,exports.Root=Root,exports.Track=Track;
2
2
  //# sourceMappingURL=style.js.map
package/components/Switch/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\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 cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\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\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","white","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"kZAQA,MAAMA,wBAA0BC,MAAAA,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,MAAAA,0BAEvB,MAAMI,MAAQC,gBAAAA,QAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,gBAAAA,QAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,gBAAAA,QAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,8LAAA,KAWIS,eAAAA,gBAmCC,MAAMC,KAAOV,gBAAAA,QAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAOC,oBAAoBL,EAAMG,MAAMC,OAAO,uGAMrFJ,IACDM,OAtDcC,EAsDL,CACPC,UAAWR,EAAMG,MAAMC,OAAO,sBAC9BK,gBAAiBT,EAAMG,MAAMC,OAAO,oBACpCM,WAAYV,EAAMG,MAAMC,OAAO,sBAC/BO,gBAAiBC,mBAAAA,QAAUZ,EAAMG,MAAMC,OAAO,uBAAuBS,OAAO,GAAGC,WAC/EC,kBAAmBf,EAAMG,MAAMC,OAAO,0BACtCY,uBAAwBJ,mBAAAA,QAAUZ,EAAMG,MAAMC,OAAO,2BAA2Ba,QAAQ,GAAGH,WAC3FI,mBAAoBlB,EAAMG,MAAMC,OAAO,qBACvCe,0BAA2BnB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMO,SA/D8B,WACrCZ,WAAWE,wCACKU,EAAQC,2CACFD,EAAQE,gCAE9Bd,kCACgBY,EAAQG,2BAExBtB,kCAAkCO,kCAClBY,EAAQQ,kCAExB3B,oBAAoBO,kCACJY,EAAQW,mCAExB9B,4BAA4BO,kCACZY,EAAQY,sCAE5BC,YACA,6BACsBb,EAAQI,yBAE9B,aAAavB,0BAA0BO,eAEvCyB,YACA,6BACsBb,EAAQS,gCAE9B,aAAa5B,kCAAkCO,aA3BjCY,OAkEdT,eAAAA"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\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 cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"kZAQA,MAAMA,wBAA0BC,MAAAA,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,MAAAA,0BAEvB,MAAMI,MAAQC,gBAAAA,QAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,gBAAAA,QAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,gBAAAA,QAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,8LAAA,KAWIS,eAAAA,gBAmCC,MAAMC,KAAOV,gBAAAA,QAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAO,oCAAoCJ,EAAMG,MAAMC,OAAO,uGAMrGJ,IACDK,OAtDcC,EAsDL,CACPC,UAAWP,EAAMG,MAAMC,OAAO,sBAC9BI,gBAAiBR,EAAMG,MAAMC,OAAO,oBACpCK,WAAYT,EAAMG,MAAMC,OAAO,sBAC/BM,gBAAiBC,mBAAAA,QAAUX,EAAMG,MAAMC,OAAO,uBAAuBQ,OAAO,GAAGC,WAC/EC,kBAAmBd,EAAMG,MAAMC,OAAO,0BACtCW,uBAAwBJ,mBAAAA,QAAUX,EAAMG,MAAMC,OAAO,2BAA2BY,QAAQ,GAAGH,WAC3FI,mBAAoBjB,EAAMG,MAAMC,OAAO,qBACvCc,0BAA2BlB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMM,SA/D8B,WACrCX,WAAWE,wCACKS,EAAQC,2CACFD,EAAQE,gCAE9Bb,kCACgBW,EAAQG,2BAExBrB,kCAAkCO,kCAClBW,EAAQQ,kCAExB1B,oBAAoBO,kCACJW,EAAQW,mCAExB7B,4BAA4BO,kCACZW,EAAQY,sCAE5BC,YACA,6BACsBb,EAAQI,yBAE9B,aAAatB,0BAA0BO,eAEvCwB,YACA,6BACsBb,EAAQS,gCAE9B,aAAa3B,kCAAkCO,aA3BjCW,OAkEdR,eAAAA"}
package/components/Switch/style.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import styled from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardSwitchProp=createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=createShouldForwardProp();const Input=styled.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize);const Root=styled.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\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=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize);export{Input,Knob,Root,Track};
1
+ import styled from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardSwitchProp=createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=createShouldForwardProp();const Input=styled.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize);const Root=styled.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `,o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize);export{Input,Knob,Root,Track};
2
2
  //# sourceMappingURL=style.mjs.map
package/components/Switch/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\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 cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\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\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","white","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"iPAQA,MAAMA,wBAA0BC,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,0BAEvB,MAAMI,MAAQC,OAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,OAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,OAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,8LAAA,KAWIS,gBAmCC,MAAMC,KAAOV,OAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAOC,oBAAoBL,EAAMG,MAAMC,OAAO,uGAMrFJ,IACDM,OAtDcC,EAsDL,CACPC,UAAWR,EAAMG,MAAMC,OAAO,sBAC9BK,gBAAiBT,EAAMG,MAAMC,OAAO,oBACpCM,WAAYV,EAAMG,MAAMC,OAAO,sBAC/BO,gBAAiBC,UAAUZ,EAAMG,MAAMC,OAAO,uBAAuBS,OAAO,GAAGC,WAC/EC,kBAAmBf,EAAMG,MAAMC,OAAO,0BACtCY,uBAAwBJ,UAAUZ,EAAMG,MAAMC,OAAO,2BAA2Ba,QAAQ,GAAGH,WAC3FI,mBAAoBlB,EAAMG,MAAMC,OAAO,qBACvCe,0BAA2BnB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMO,SA/D8B,WACrCZ,WAAWE,wCACKU,EAAQC,2CACFD,EAAQE,gCAE9Bd,kCACgBY,EAAQG,2BAExBtB,kCAAkCO,kCAClBY,EAAQQ,kCAExB3B,oBAAoBO,kCACJY,EAAQW,mCAExB9B,4BAA4BO,kCACZY,EAAQY,sCAE5BC,MACA,6BACsBb,EAAQI,yBAE9B,aAAavB,0BAA0BO,eAEvCyB,MACA,6BACsBb,EAAQS,gCAE9B,aAAa5B,kCAAkCO,aA3BjCY,OAkEdT"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\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 cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"iPAQA,MAAMA,wBAA0BC,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,0BAEvB,MAAMI,MAAQC,OAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,OAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,OAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,8LAAA,KAWIS,gBAmCC,MAAMC,KAAOV,OAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAO,oCAAoCJ,EAAMG,MAAMC,OAAO,uGAMrGJ,IACDK,OAtDcC,EAsDL,CACPC,UAAWP,EAAMG,MAAMC,OAAO,sBAC9BI,gBAAiBR,EAAMG,MAAMC,OAAO,oBACpCK,WAAYT,EAAMG,MAAMC,OAAO,sBAC/BM,gBAAiBC,UAAUX,EAAMG,MAAMC,OAAO,uBAAuBQ,OAAO,GAAGC,WAC/EC,kBAAmBd,EAAMG,MAAMC,OAAO,0BACtCW,uBAAwBJ,UAAUX,EAAMG,MAAMC,OAAO,2BAA2BY,QAAQ,GAAGH,WAC3FI,mBAAoBjB,EAAMG,MAAMC,OAAO,qBACvCc,0BAA2BlB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMM,SA/D8B,WACrCX,WAAWE,wCACKS,EAAQC,2CACFD,EAAQE,gCAE9Bb,kCACgBW,EAAQG,2BAExBrB,kCAAkCO,kCAClBW,EAAQQ,kCAExB1B,oBAAoBO,kCACJW,EAAQW,mCAExB7B,4BAA4BO,kCACZW,EAAQY,sCAE5BC,MACA,6BACsBb,EAAQI,yBAE9B,aAAatB,0BAA0BO,eAEvCwB,MACA,6BACsBb,EAAQS,gCAE9B,aAAa3B,kCAAkCO,aA3BjCW,OAkEdR"}