@skodaflow/web-library 8.2.0 → 8.3.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 (121) hide show
  1. package/cjs/components/advancedTable/agGridSkodaTheme.js +1 -1
  2. package/cjs/components/advancedTable/agGridSkodaTheme.js.map +1 -1
  3. package/cjs/components/carousel/Autoplay.d.ts +7 -2
  4. package/cjs/components/carousel/Autoplay.js +1 -1
  5. package/cjs/components/carousel/Autoplay.js.map +1 -1
  6. package/cjs/components/carousel/hooks.js +1 -1
  7. package/cjs/components/carousel/hooks.js.map +1 -1
  8. package/cjs/components/icon/filled/CarChargingFilledIcon.d.ts +6 -0
  9. package/cjs/components/icon/filled/CarChargingFilledIcon.js +2 -0
  10. package/cjs/components/icon/filled/CarChargingFilledIcon.js.map +1 -0
  11. package/cjs/components/icon/filled/EmissionLabelFilledIcon.d.ts +6 -0
  12. package/cjs/components/icon/filled/EmissionLabelFilledIcon.js +2 -0
  13. package/cjs/components/icon/filled/EmissionLabelFilledIcon.js.map +1 -0
  14. package/cjs/components/icon/filled/PictureErrorFilledIcon.d.ts +6 -0
  15. package/cjs/components/icon/filled/PictureErrorFilledIcon.js +2 -0
  16. package/cjs/components/icon/filled/PictureErrorFilledIcon.js.map +1 -0
  17. package/cjs/components/icon/filled/PowerpassFilledIcon.d.ts +6 -0
  18. package/cjs/components/icon/filled/PowerpassFilledIcon.js +2 -0
  19. package/cjs/components/icon/filled/PowerpassFilledIcon.js.map +1 -0
  20. package/cjs/components/icon/filled/index.d.ts +4 -0
  21. package/cjs/components/icon/icon.definitions.js +1 -1
  22. package/cjs/components/icon/icon.definitions.js.map +1 -1
  23. package/cjs/components/icon/stroke/CarChargingIcon.d.ts +6 -0
  24. package/cjs/components/icon/stroke/CarChargingIcon.js +2 -0
  25. package/cjs/components/icon/stroke/CarChargingIcon.js.map +1 -0
  26. package/cjs/components/icon/stroke/EmissionLabelIcon.d.ts +6 -0
  27. package/cjs/components/icon/stroke/EmissionLabelIcon.js +2 -0
  28. package/cjs/components/icon/stroke/EmissionLabelIcon.js.map +1 -0
  29. package/cjs/components/icon/stroke/PictureErrorIcon.d.ts +6 -0
  30. package/cjs/components/icon/stroke/PictureErrorIcon.js +2 -0
  31. package/cjs/components/icon/stroke/PictureErrorIcon.js.map +1 -0
  32. package/cjs/components/icon/stroke/PowerpassIcon.d.ts +6 -0
  33. package/cjs/components/icon/stroke/PowerpassIcon.js +2 -0
  34. package/cjs/components/icon/stroke/PowerpassIcon.js.map +1 -0
  35. package/cjs/components/icon/stroke/index.d.ts +4 -0
  36. package/cjs/components/promptBar/PromptSubmitIconButton.js +1 -1
  37. package/cjs/components/promptBar/PromptSubmitIconButton.js.map +1 -1
  38. package/cjs/index.js +1 -1
  39. package/cjs/materialui/autocomplete/autocomplete.theme.js +1 -1
  40. package/cjs/materialui/autocomplete/autocomplete.theme.js.map +1 -1
  41. package/cjs/materialui/card/Card.js +1 -1
  42. package/cjs/materialui/card/Card.js.map +1 -1
  43. package/cjs/materialui/card/card.theme.js +1 -1
  44. package/cjs/materialui/card/card.theme.js.map +1 -1
  45. package/cjs/materialui/datepicker/datecalendar.theme.d.ts +1178 -1178
  46. package/cjs/materialui/datepicker/digitalclock.theme.d.ts +1176 -1176
  47. package/cjs/materialui/switch/switch.theme.js +1 -1
  48. package/cjs/materialui/switch/switch.theme.js.map +1 -1
  49. package/cjs/materialui/table/tablePagination.theme.js +1 -1
  50. package/cjs/materialui/table/tablePagination.theme.js.map +1 -1
  51. package/cjs/materialui/textfield/inputLabel.theme.js +1 -1
  52. package/cjs/materialui/textfield/inputLabel.theme.js.map +1 -1
  53. package/cjs/materialui/theme/paletteDark.theme.js +1 -1
  54. package/cjs/materialui/theme/paletteDark.theme.js.map +1 -1
  55. package/cjs/materialui/theme/theme.extensions.d.ts +10 -0
  56. package/cjs/materialui/themeProvider/baseline.theme.js +1 -1
  57. package/cjs/materialui/themeProvider/baseline.theme.js.map +1 -1
  58. package/cjs/materialui/typography/typography.theme.d.ts +4 -0
  59. package/cjs/materialui/typography/typography.theme.js +1 -1
  60. package/cjs/materialui/typography/typography.theme.js.map +1 -1
  61. package/components/advancedTable/agGridSkodaTheme.js +1 -1
  62. package/components/advancedTable/agGridSkodaTheme.js.map +1 -1
  63. package/components/carousel/Autoplay.d.ts +7 -2
  64. package/components/carousel/Autoplay.js +1 -1
  65. package/components/carousel/Autoplay.js.map +1 -1
  66. package/components/carousel/hooks.js +1 -1
  67. package/components/carousel/hooks.js.map +1 -1
  68. package/components/icon/filled/CarChargingFilledIcon.d.ts +6 -0
  69. package/components/icon/filled/CarChargingFilledIcon.js +2 -0
  70. package/components/icon/filled/CarChargingFilledIcon.js.map +1 -0
  71. package/components/icon/filled/EmissionLabelFilledIcon.d.ts +6 -0
  72. package/components/icon/filled/EmissionLabelFilledIcon.js +2 -0
  73. package/components/icon/filled/EmissionLabelFilledIcon.js.map +1 -0
  74. package/components/icon/filled/PictureErrorFilledIcon.d.ts +6 -0
  75. package/components/icon/filled/PictureErrorFilledIcon.js +2 -0
  76. package/components/icon/filled/PictureErrorFilledIcon.js.map +1 -0
  77. package/components/icon/filled/PowerpassFilledIcon.d.ts +6 -0
  78. package/components/icon/filled/PowerpassFilledIcon.js +2 -0
  79. package/components/icon/filled/PowerpassFilledIcon.js.map +1 -0
  80. package/components/icon/filled/index.d.ts +4 -0
  81. package/components/icon/icon.definitions.js +1 -1
  82. package/components/icon/icon.definitions.js.map +1 -1
  83. package/components/icon/stroke/CarChargingIcon.d.ts +6 -0
  84. package/components/icon/stroke/CarChargingIcon.js +2 -0
  85. package/components/icon/stroke/CarChargingIcon.js.map +1 -0
  86. package/components/icon/stroke/EmissionLabelIcon.d.ts +6 -0
  87. package/components/icon/stroke/EmissionLabelIcon.js +2 -0
  88. package/components/icon/stroke/EmissionLabelIcon.js.map +1 -0
  89. package/components/icon/stroke/PictureErrorIcon.d.ts +6 -0
  90. package/components/icon/stroke/PictureErrorIcon.js +2 -0
  91. package/components/icon/stroke/PictureErrorIcon.js.map +1 -0
  92. package/components/icon/stroke/PowerpassIcon.d.ts +6 -0
  93. package/components/icon/stroke/PowerpassIcon.js +2 -0
  94. package/components/icon/stroke/PowerpassIcon.js.map +1 -0
  95. package/components/icon/stroke/index.d.ts +4 -0
  96. package/components/promptBar/PromptSubmitIconButton.js +1 -1
  97. package/components/promptBar/PromptSubmitIconButton.js.map +1 -1
  98. package/index.js +1 -1
  99. package/materialui/autocomplete/autocomplete.theme.js +1 -1
  100. package/materialui/autocomplete/autocomplete.theme.js.map +1 -1
  101. package/materialui/card/Card.js +1 -1
  102. package/materialui/card/Card.js.map +1 -1
  103. package/materialui/card/card.theme.js +1 -1
  104. package/materialui/card/card.theme.js.map +1 -1
  105. package/materialui/datepicker/datecalendar.theme.d.ts +1178 -1178
  106. package/materialui/datepicker/digitalclock.theme.d.ts +1176 -1176
  107. package/materialui/switch/switch.theme.js +1 -1
  108. package/materialui/switch/switch.theme.js.map +1 -1
  109. package/materialui/table/tablePagination.theme.js +1 -1
  110. package/materialui/table/tablePagination.theme.js.map +1 -1
  111. package/materialui/textfield/inputLabel.theme.js +1 -1
  112. package/materialui/textfield/inputLabel.theme.js.map +1 -1
  113. package/materialui/theme/paletteDark.theme.js +1 -1
  114. package/materialui/theme/paletteDark.theme.js.map +1 -1
  115. package/materialui/theme/theme.extensions.d.ts +10 -0
  116. package/materialui/themeProvider/baseline.theme.js +1 -1
  117. package/materialui/themeProvider/baseline.theme.js.map +1 -1
  118. package/materialui/typography/typography.theme.d.ts +4 -0
  119. package/materialui/typography/typography.theme.js +1 -1
  120. package/materialui/typography/typography.theme.js.map +1 -1
  121. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete.theme.js","sources":["../../../../../src/materialui/autocomplete/autocomplete.theme.tsx"],"sourcesContent":["import { Components, Theme, ComponentsOverrides } from '@mui/material/styles';\nimport { Box, MenuList, MenuItem, ListItemText, Checkbox } from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { flowMenu } from '../menu/menu.theme';\nimport { flowMenuItem } from '../menu/menuItem.theme';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowAutocomplete: Components<Theme>['MuiAutocomplete'] = {\n defaultProps: {\n // ensure clicking on AutoComplete sent event to FormControl to correctly handle FocusRing\n onPointerDown: (e) => {\n const formControlEl = e.currentTarget.querySelector('.MuiFormControl-root');\n // we have formControl and click is outside of it (clicking on margin from helperText)\n if (formControlEl && !formControlEl.contains(e.target as Node)) {\n // sent pointerDown event to it\n formControlEl.dispatchEvent(\n new PointerEvent('pointerdown', {\n bubbles: true,\n cancelable: true,\n pointerType: e.pointerType,\n }),\n );\n }\n },\n popupIcon: <ChevronDownIcon />,\n clearIcon: <CloseIcon />,\n noOptionsText: 'No matching results',\n slots: {\n // we are replacing listbox to remove Autocomplete styling and match with Menu design\n listbox: MenuList,\n },\n // option matched with design of menu with Checkbox for multiple choices\n renderOption: ({ key, ...rest }, option, state, ownerState) => {\n return (\n <MenuItem key={key} {...rest}>\n {ownerState?.multiple && <Checkbox checked={state.selected} tabIndex={-1} />}\n <ListItemText>{option?.label ?? option}</ListItemText>\n </MenuItem>\n );\n },\n renderValue: (value) =>\n (Array.isArray(value) ? value : [value]).map((v, idx) => (\n <Box key={`${v}`} component=\"span\" className=\"FlowAutoComplete-value\">\n {`${v}${(Array.isArray(value) ? value : [value]).length !== idx + 1 ? ', ' : ''}`}\n </Box>\n )),\n },\n styleOverrides: {\n root: ({ theme }) => ({\n // when value is present\n '& .FlowAutoComplete-value + .MuiAutocomplete-input': {\n // hide placeholder\n '&::-webkit-input-placeholder': {\n color: 'transparent',\n },\n },\n // overwrite autoComplete default styling and match with TextField\n '& .MuiFilledInput-root': {\n // gap between tags and input\n gap: theme.spacing(0.5),\n // field proportions matched with textfield\n padding: '24px 12px 8px',\n // hidden label for variant with placeholder\n '&.MuiInputBase-hiddenLabel': {\n padding: '18px 12px 14px',\n },\n // small\n '&.MuiInputBase-sizeSmall': {\n padding: '22px 12px 4px',\n '&.MuiInputBase-hiddenLabel': {\n padding: '14px 12px 12px',\n },\n },\n // moved padding from input to allow wrap with too many tags\n '&, &.MuiInputBase-sizeSmall, &.MuiInputBase-hiddenLabel, &.MuiInputBase-sizeSmall.MuiInputBase-hiddenLabel': {\n '& .MuiFilledInput-input': {\n padding: '0',\n },\n },\n },\n }),\n // select arrow\n popupIndicator: {\n // remove default style\n transition: 'none',\n ...getInteractiveStyle(\n { color: 'inherit', backgroundColor: 'transparent' },\n { color: 'inherit', backgroundColor: 'transparent' },\n ),\n // style icon\n '& .MuiSvgIcon-root': {\n fontSize: '17px',\n flexShrink: '0',\n },\n },\n // 'x' clear button\n clearIndicator: {\n // keep always visible once the value is selected\n visibility: 'visible',\n // remove default style\n transition: 'none',\n ...getInteractiveStyle(\n { color: 'inherit', backgroundColor: 'transparent' },\n { color: 'inherit', backgroundColor: 'transparent' },\n ),\n // style icon\n '& .MuiSvgIcon-root': {\n fontSize: '17px',\n flexShrink: '0',\n },\n // select arrow next to it\n '& + .MuiAutocomplete-popupIndicator': {\n // hide it\n display: 'none',\n },\n },\n // chip tags, no longer used as we overwrite renderTags fn\n tag: {\n // space between multiple chips and limit tags text\n margin: '0',\n '&.MuiChip-root': {\n // reduce size\n padding: '0px 8px',\n '& .MuiChip-deleteIcon': {\n '&, &:last-of-type': {\n marginLeft: '2px',\n },\n },\n },\n },\n // select popover\n popper: {\n // direct style of listBox is not used, as it is overwritten via slots property to remove default styling\n '& .MuiAutocomplete-listbox': {\n padding: '0',\n maxHeight: '240px',\n // necessary to make scroll with keyboard navigation work\n overflow: 'auto',\n },\n },\n // holder of list\n paper: flowMenu.styleOverrides.paper as ComponentsOverrides<Theme>['MuiAutocomplete'],\n // list options\n option: flowMenuItem.styleOverrides.root as ComponentsOverrides<Theme>['MuiAutocomplete'],\n // no matching result\n noOptions: [\n flowMenuItem.styleOverrides.root as ComponentsOverrides<Theme>['MuiAutocomplete'],\n {\n pointerEvents: 'none',\n cursor: 'auto',\n },\n ],\n },\n};\n"],"names":["flowAutocomplete","defaultProps","onPointerDown","e","formControlEl","currentTarget","querySelector","contains","target","dispatchEvent","PointerEvent","bubbles","cancelable","pointerType","popupIcon","_jsx","ChevronDownIcon","clearIcon","CloseIcon","noOptionsText","slots","listbox","MenuList","renderOption","key","rest","option","state","ownerState","_jsxs","MenuItem","multiple","Checkbox","checked","selected","tabIndex","ListItemText","children","label","renderValue","value","Array","isArray","map","v","idx","Box","component","className","length","styleOverrides","root","theme","color","gap","spacing","padding","popupIndicator","transition","getInteractiveStyle","backgroundColor","fontSize","flexShrink","clearIndicator","visibility","display","tag","margin","marginLeft","popper","maxHeight","overflow","paper","flowMenu","flowMenuItem","noOptions","pointerEvents","cursor"],"mappings":"+SAQO,MAAMA,EAAyD,CACpEC,aAAc,CAEZC,cAAgBC,IACd,MAAMC,EAAgBD,EAAEE,cAAcC,cAAc,wBAEhDF,IAAkBA,EAAcG,SAASJ,EAAEK,SAE7CJ,EAAcK,cACZ,IAAIC,aAAa,cAAe,CAC9BC,SAAS,EACTC,YAAY,EACZC,YAAaV,EAAEU,gBAKvBC,UAAWC,EAAAA,IAACC,EAAAA,gBAAe,IAC3BC,UAAWF,EAAAA,IAACG,EAAAA,UAAS,IACrBC,cAAe,sBACfC,MAAO,CAELC,QAASC,EAAAA,UAGXC,aAAc,EAAGC,SAAQC,GAAQC,EAAQC,EAAOC,IAE5CC,OAACC,EAAAA,SAAQ,IAAeL,YACrBG,GAAYG,UAAYhB,EAAAA,IAACiB,WAAQ,CAACC,QAASN,EAAMO,SAAUC,UAAU,IACtEpB,EAAAA,IAACqB,EAAAA,aAAY,CAAAC,SAAEX,GAAQY,OAASZ,MAFnBF,GAMnBe,YAAcC,IACXC,MAAMC,QAAQF,GAASA,EAAQ,CAACA,IAAQG,IAAI,CAACC,EAAGC,IAC/C9B,MAAC+B,EAAAA,IAAG,CAAcC,UAAU,OAAOC,UAAU,yBAAwBX,SAClE,GAAGO,KAAKH,MAAMC,QAAQF,GAASA,EAAQ,CAACA,IAAQS,SAAWJ,EAAM,EAAI,KAAO,MADrE,GAAGD,OAKnBM,eAAgB,CACdC,KAAM,EAAGC,YAAO,CAEd,qDAAsD,CAEpD,+BAAgC,CAC9BC,MAAO,gBAIX,yBAA0B,CAExBC,IAAKF,EAAMG,QAAQ,IAEnBC,QAAS,gBAET,6BAA8B,CAC5BA,QAAS,kBAGX,2BAA4B,CAC1BA,QAAS,gBACT,6BAA8B,CAC5BA,QAAS,mBAIb,6GAA8G,CAC5G,0BAA2B,CACzBA,QAAS,SAMjBC,eAAgB,CAEdC,WAAY,UACTC,sBACD,CAAEN,MAAO,UAAWO,gBAAiB,eACrC,CAAEP,MAAO,UAAWO,gBAAiB,gBAGvC,qBAAsB,CACpBC,SAAU,OACVC,WAAY,MAIhBC,eAAgB,CAEdC,WAAY,UAEZN,WAAY,UACTC,sBACD,CAAEN,MAAO,UAAWO,gBAAiB,eACrC,CAAEP,MAAO,UAAWO,gBAAiB,gBAGvC,qBAAsB,CACpBC,SAAU,OACVC,WAAY,KAGd,sCAAuC,CAErCG,QAAS,SAIbC,IAAK,CAEHC,OAAQ,IACR,iBAAkB,CAEhBX,QAAS,UACT,wBAAyB,CACvB,oBAAqB,CACnBY,WAAY,UAMpBC,OAAQ,CAEN,6BAA8B,CAC5Bb,QAAS,IACTc,UAAW,QAEXC,SAAU,SAIdC,MAAOC,EAAAA,SAASvB,eAAesB,MAE/B9C,OAAQgD,EAAAA,aAAaxB,eAAeC,KAEpCwB,UAAW,CACTD,EAAAA,aAAaxB,eAAeC,KAC5B,CACEyB,cAAe,OACfC,OAAQ"}
1
+ {"version":3,"file":"autocomplete.theme.js","sources":["../../../../../src/materialui/autocomplete/autocomplete.theme.tsx"],"sourcesContent":["import { Components, Theme, ComponentsOverrides } from '@mui/material/styles';\nimport { Box, MenuList, MenuItem, ListItemText, Checkbox } from '@mui/material';\nimport { ChevronDownIcon } from '@/src/components/icon/stroke/ChevronDownIcon';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { flowMenu } from '../menu/menu.theme';\nimport { flowMenuItem } from '../menu/menuItem.theme';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowAutocomplete: Components<Theme>['MuiAutocomplete'] = {\n defaultProps: {\n // ensure clicking on AutoComplete sent event to FormControl to correctly handle FocusRing\n onPointerDown: (e) => {\n const formControlEl = e.currentTarget.querySelector('.MuiFormControl-root');\n // we have formControl, and click is outside it (clicking on margin from helperText)\n if (formControlEl && !formControlEl.contains(e.target as Node)) {\n // sent pointerDown event to it\n formControlEl.dispatchEvent(\n new PointerEvent('pointerdown', {\n bubbles: true,\n cancelable: true,\n pointerType: e.pointerType,\n }),\n );\n }\n },\n popupIcon: <ChevronDownIcon />,\n clearIcon: <CloseIcon />,\n noOptionsText: 'No matching results',\n slots: {\n // we are replacing listbox to remove Autocomplete styling and match with Menu design\n listbox: MenuList,\n },\n // option matched with design of menu with Checkbox for multiple choices\n renderOption: ({ key, ...rest }, option, state, ownerState) => {\n return (\n <MenuItem key={key} {...rest}>\n {ownerState?.multiple && <Checkbox checked={state.selected} tabIndex={-1} />}\n <ListItemText>{ownerState.getOptionLabel(option)}</ListItemText>\n </MenuItem>\n );\n },\n renderValue: (value, _getCustomizedItemProps, ownerState) => {\n const values = Array.isArray(value) ? value : [value];\n return values.map((v, idx) => {\n const label = ownerState.getOptionLabel(v);\n return (\n <Box key={`${v}`} component=\"span\" className=\"FlowAutoComplete-value\">\n {`${label}${idx + 1 === values.length ? '' : ', '}`}\n </Box>\n );\n });\n },\n },\n styleOverrides: {\n root: ({ theme }) => ({\n // when value is present\n '& .FlowAutoComplete-value + .MuiAutocomplete-input': {\n // hide placeholder\n '&::-webkit-input-placeholder': {\n color: 'transparent',\n },\n },\n // overwrite autoComplete default styling and match with TextField\n '& .MuiFilledInput-root': {\n // gap between tags and input\n gap: theme.spacing(0.5),\n // field proportions matched with textfield\n padding: '24px 12px 8px',\n // hidden label for variant with placeholder\n '&.MuiInputBase-hiddenLabel': {\n padding: '18px 12px 14px',\n },\n // small\n '&.MuiInputBase-sizeSmall': {\n padding: '22px 12px 4px',\n '&.MuiInputBase-hiddenLabel': {\n padding: '14px 12px 12px',\n },\n },\n // moved padding from input to allow wrap with too many tags\n '&, &.MuiInputBase-sizeSmall, &.MuiInputBase-hiddenLabel, &.MuiInputBase-sizeSmall.MuiInputBase-hiddenLabel': {\n '& .MuiFilledInput-input': {\n padding: '0',\n },\n },\n },\n }),\n // select arrow\n popupIndicator: {\n // remove default style\n transition: 'none',\n ...getInteractiveStyle(\n { color: 'inherit', backgroundColor: 'transparent' },\n { color: 'inherit', backgroundColor: 'transparent' },\n ),\n // style icon\n '& .MuiSvgIcon-root': {\n fontSize: '17px',\n flexShrink: '0',\n },\n },\n // 'x' clear button\n clearIndicator: {\n // keep always visible once the value is selected\n visibility: 'visible',\n // remove default style\n transition: 'none',\n ...getInteractiveStyle(\n { color: 'inherit', backgroundColor: 'transparent' },\n { color: 'inherit', backgroundColor: 'transparent' },\n ),\n // style icon\n '& .MuiSvgIcon-root': {\n fontSize: '17px',\n flexShrink: '0',\n },\n // select arrow next to it\n '& + .MuiAutocomplete-popupIndicator': {\n // hide it\n display: 'none',\n },\n },\n // chip tags, no longer used as we overwrite renderTags fn\n tag: {\n // space between multiple chips and limit tags text\n margin: '0',\n '&.MuiChip-root': {\n // reduce size\n padding: '0px 8px',\n '& .MuiChip-deleteIcon': {\n '&, &:last-of-type': {\n marginLeft: '2px',\n },\n },\n },\n },\n // select popover\n popper: {\n // direct style of listBox is not used, as it is overwritten via slots property to remove default styling\n '& .MuiAutocomplete-listbox': {\n padding: '0',\n maxHeight: '240px',\n // necessary to make scroll with keyboard navigation work\n overflow: 'auto',\n },\n },\n // holder of list\n paper: flowMenu.styleOverrides.paper as ComponentsOverrides<Theme>['MuiAutocomplete'],\n // list options\n option: flowMenuItem.styleOverrides.root as ComponentsOverrides<Theme>['MuiAutocomplete'],\n // no matching result\n noOptions: [\n flowMenuItem.styleOverrides.root as ComponentsOverrides<Theme>['MuiAutocomplete'],\n {\n pointerEvents: 'none',\n cursor: 'auto',\n },\n ],\n },\n};\n"],"names":["flowAutocomplete","defaultProps","onPointerDown","e","formControlEl","currentTarget","querySelector","contains","target","dispatchEvent","PointerEvent","bubbles","cancelable","pointerType","popupIcon","_jsx","ChevronDownIcon","clearIcon","CloseIcon","noOptionsText","slots","listbox","MenuList","renderOption","key","rest","option","state","ownerState","_jsxs","MenuItem","multiple","Checkbox","checked","selected","tabIndex","ListItemText","getOptionLabel","renderValue","value","_getCustomizedItemProps","values","Array","isArray","map","v","idx","label","Box","component","className","children","length","styleOverrides","root","theme","color","gap","spacing","padding","popupIndicator","transition","getInteractiveStyle","backgroundColor","fontSize","flexShrink","clearIndicator","visibility","display","tag","margin","marginLeft","popper","maxHeight","overflow","paper","flowMenu","flowMenuItem","noOptions","pointerEvents","cursor"],"mappings":"+SAQO,MAAMA,EAAyD,CACpEC,aAAc,CAEZC,cAAgBC,IACd,MAAMC,EAAgBD,EAAEE,cAAcC,cAAc,wBAEhDF,IAAkBA,EAAcG,SAASJ,EAAEK,SAE7CJ,EAAcK,cACZ,IAAIC,aAAa,cAAe,CAC9BC,SAAS,EACTC,YAAY,EACZC,YAAaV,EAAEU,gBAKvBC,UAAWC,EAAAA,IAACC,EAAAA,gBAAe,IAC3BC,UAAWF,EAAAA,IAACG,EAAAA,UAAS,IACrBC,cAAe,sBACfC,MAAO,CAELC,QAASC,EAAAA,UAGXC,aAAc,EAAGC,SAAQC,GAAQC,EAAQC,EAAOC,IAE5CC,EAAAA,KAACC,EAAAA,SAAQ,IAAeL,YACrBG,GAAYG,UAAYhB,EAAAA,IAACiB,EAAAA,SAAQ,CAACC,QAASN,EAAMO,SAAUC,UAAU,IACtEpB,MAACqB,EAAAA,uBAAcR,EAAWS,eAAeX,OAF5BF,GAMnBc,YAAa,CAACC,EAAOC,EAAyBZ,KAC5C,MAAMa,EAASC,MAAMC,QAAQJ,GAASA,EAAQ,CAACA,GAC/C,OAAOE,EAAOG,IAAI,CAACC,EAAGC,KACpB,MAAMC,EAAQnB,EAAWS,eAAeQ,GACxC,OACE9B,EAAAA,IAACiC,MAAG,CAAcC,UAAU,OAAOC,UAAU,yBAAwBC,SAClE,GAAGJ,IAAQD,EAAM,IAAML,EAAOW,OAAS,GAAK,QADrC,GAAGP,SAOrBQ,eAAgB,CACdC,KAAM,EAAGC,YAAO,CAEd,qDAAsD,CAEpD,+BAAgC,CAC9BC,MAAO,gBAIX,yBAA0B,CAExBC,IAAKF,EAAMG,QAAQ,IAEnBC,QAAS,gBAET,6BAA8B,CAC5BA,QAAS,kBAGX,2BAA4B,CAC1BA,QAAS,gBACT,6BAA8B,CAC5BA,QAAS,mBAIb,6GAA8G,CAC5G,0BAA2B,CACzBA,QAAS,SAMjBC,eAAgB,CAEdC,WAAY,UACTC,sBACD,CAAEN,MAAO,UAAWO,gBAAiB,eACrC,CAAEP,MAAO,UAAWO,gBAAiB,gBAGvC,qBAAsB,CACpBC,SAAU,OACVC,WAAY,MAIhBC,eAAgB,CAEdC,WAAY,UAEZN,WAAY,UACTC,sBACD,CAAEN,MAAO,UAAWO,gBAAiB,eACrC,CAAEP,MAAO,UAAWO,gBAAiB,gBAGvC,qBAAsB,CACpBC,SAAU,OACVC,WAAY,KAGd,sCAAuC,CAErCG,QAAS,SAIbC,IAAK,CAEHC,OAAQ,IACR,iBAAkB,CAEhBX,QAAS,UACT,wBAAyB,CACvB,oBAAqB,CACnBY,WAAY,UAMpBC,OAAQ,CAEN,6BAA8B,CAC5Bb,QAAS,IACTc,UAAW,QAEXC,SAAU,SAIdC,MAAOC,EAAAA,SAASvB,eAAesB,MAE/BjD,OAAQmD,EAAAA,aAAaxB,eAAeC,KAEpCwB,UAAW,CACTD,EAAAA,aAAaxB,eAAeC,KAC5B,CACEyB,cAAe,OACfC,OAAQ"}
@@ -1,2 +1,2 @@
1
- "use strict";var o=require("react/jsx-runtime"),r=require("react"),e=require("@mui/material"),n=require("../../utils/sxOverride/sxOverride.js"),s=require("../../components/icon/stroke/CheckIcon.js"),i=require("../../components/icon/stroke/PlusIcon.js"),c=require("../../components/icon/stroke/MinusIcon.js"),t=require("../../components/focusring/focusring.js"),a=require("../button/interactive.js");const d=r.forwardRef(({children:r,isSelected:d,disableIcon:l=!0,iconSlots:u,iconPlacement:p="top-end",iconProps:x,hoverIconProps:b,iconWrapperProps:m,contentWrapperProps:y,onClick:f,disabled:h,color:v,...I},k)=>{const{sx:g,...C}=y||{},{sx:j,className:S,...q}=m||{},{sx:P,...w}=x||{},{sx:O,...B}=b||{},{icon:M,selectedIcon:R,hoverIcon:F,hoverSelectedIcon:H}={icon:i.PlusIcon,selectedIcon:s.CheckIcon,hoverIcon:i.PlusIcon,hoverSelectedIcon:c.MinusIcon,...u||{}},z=!h&&d?R:M,N=!h&&d?H:F;return o.jsx(e.Paper,{color:v,onClick:h?void 0:f,...I,ref:k,children:o.jsxs(e.Box,{sx:n.sxOverride({borderRadius:"inherit",overflow:"hidden",height:"100%"},g),...C,children:[!l&&o.jsxs(e.Box,{sx:n.sxOverride({border:1,borderColor:"onSurface.os100",backgroundColor:"background.primary",..."secondary"===v&&{backgroundColor:"surface.primary"},borderRadius:"1000px",p:"5px",width:"auto",height:"auto",transition:"none",position:"absolute",...p.includes("top")?{top:"16px"}:{},...p.includes("bottom")?{bottom:"16px"}:{},...p.includes("start")?{left:"16px"}:{},...p.includes("end")?{right:"16px"}:{},"&.MuiButtonBase-root":{...t.updateFocusRingStyle(1),"&:before":{transition:"none"},...a.getInteractiveStyle({backgroundColor:"background.primary",..."secondary"===v&&{backgroundColor:"surface.primary"},...d&&{backgroundColor:"brand.primary",borderColor:"brand.primary",color:"common.white"},"& .MuiSvgIcon-root":{"&:first-of-type":{display:"block"},"&:last-of-type":{display:"none"}}},{backgroundColor:"surface.primary",..."secondary"===v&&{backgroundColor:"surface.secondary"},...d&&{backgroundColor:"brandHover.primary",borderColor:"brandHover.primary",color:"common.white"},"& .MuiSvgIcon-root":{"&:first-of-type":{display:"none"},"&:last-of-type":{display:"block"}}})}},j),className:["FlowCard-Icon-root",S].filter(Boolean).join(" "),...q,children:[o.jsx(z,{"data-testid":"Card.Icon",sx:n.sxOverride({display:"block",fontSize:"20px"},P),...w}),o.jsx(N,{"data-testid":"Card.HoverIcon",sx:n.sxOverride({display:"none",fontSize:"20px"},O),...B})]}),r]})})});exports.FlowCard=d;
1
+ "use strict";var r=require("react/jsx-runtime"),o=require("react"),e=require("@mui/material"),n=require("../../utils/sxOverride/sxOverride.js"),i=require("../../components/icon/stroke/CheckIcon.js"),s=require("../../components/icon/stroke/PlusIcon.js"),c=require("../../components/icon/stroke/MinusIcon.js"),t=require("../../components/focusring/focusring.js"),a=require("../button/interactive.js"),d=require("../../components/progress/Spinner.js");const l=o.forwardRef(({children:o,isSelected:l,disableIcon:p=!0,iconSlots:u,iconPlacement:x="top-end",iconProps:b,hoverIconProps:y,iconWrapperProps:m,contentWrapperProps:g,onClick:h,disabled:k,color:v,loading:f,loadingProps:C,...I},j)=>{const{sx:S,...q}=g||{},{sx:w,className:P,...O}=m||{},{sx:F,...B}=b||{},{sx:H,...M}=y||{},{sx:R,...z}=C||{},{icon:N,selectedIcon:W,hoverIcon:L,hoverSelectedIcon:A}={icon:s.PlusIcon,selectedIcon:i.CheckIcon,hoverIcon:s.PlusIcon,hoverSelectedIcon:c.MinusIcon,...u||{}},D=!k&&l?W:N,E=!k&&l?A:L,G=f&&!k;return r.jsx(e.Paper,{color:v,onClick:k?void 0:h,...I,ref:j,children:r.jsxs(e.Box,{sx:n.sxOverride({borderRadius:"inherit",overflow:"hidden",height:"100%"},S),...q,children:[!p&&r.jsx(e.Box,{sx:n.sxOverride({border:1,borderColor:"onSurface.os100",backgroundColor:"background.primary",..."secondary"===v&&{backgroundColor:"surface.primary"},borderRadius:"1000px",p:G?"3px":"5px",width:"auto",height:"auto",transition:"none",position:"absolute",...x.includes("top")?{top:"16px"}:{},...x.includes("bottom")?{bottom:"16px"}:{},...x.includes("start")?{left:"16px"}:{},...x.includes("end")?{right:"16px"}:{},"&.MuiButtonBase-root":{...t.updateFocusRingStyle(1),"&:before":{transition:"none"},...a.getInteractiveStyle({backgroundColor:"background.primary",..."secondary"===v&&{backgroundColor:"surface.primary"},...l&&{backgroundColor:"brand.primary",borderColor:"brand.primary",color:"common.white"},...G&&l&&{backgroundColor:"brandHover.primary",borderColor:"brandHover.primary"},...!G&&{".MuiSvgIcon-root":{"&:first-of-type":{display:"block"},"&:last-of-type":{display:"none"}}}},{backgroundColor:"surface.primary",..."secondary"===v&&{backgroundColor:"surface.secondary"},...l&&{backgroundColor:"brandHover.primary",borderColor:"brandHover.primary",color:"common.white"},...!G&&{".MuiSvgIcon-root":{"&:first-of-type":{display:"none"},"&:last-of-type":{display:"block"}}}})}},w),className:["FlowCard-Icon-root",P].filter(Boolean).join(" "),...O,children:G?r.jsx(d.Spinner,{"data-testid":"Card.LoadingSpinner",size:24,sx:n.sxOverride({display:"block",width:"24px",height:"24px",...l&&{"& .FlowSpinner-circle-primary":{stroke:r=>r.palette.brand.secondary},"& .FlowSpinner-circle-secondary":{stroke:r=>r.palette.transparent.secondary}}},R),...z}):r.jsxs(r.Fragment,{children:[r.jsx(D,{"data-testid":"Card.Icon",sx:n.sxOverride({display:"block",fontSize:"20px"},F),...B}),r.jsx(E,{"data-testid":"Card.HoverIcon",sx:n.sxOverride({display:"none",fontSize:"20px"},H),...M})]})}),o]})})});exports.FlowCard=l;
2
2
  //# sourceMappingURL=Card.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../../../../../src/materialui/card/Card.tsx"],"sourcesContent":["import React, { FC, forwardRef } from 'react';\nimport { Paper, Box, CardProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { MinusIcon } from '@/src/components/icon/stroke/MinusIcon';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\n/**\n * Standard MUI Card extended with custom properties\n */\nexport const FlowCard: FC<CardProps> = forwardRef(\n (\n {\n children,\n isSelected,\n disableIcon = true,\n iconSlots,\n iconPlacement = 'top-end',\n iconProps,\n hoverIconProps,\n iconWrapperProps,\n contentWrapperProps,\n onClick,\n disabled,\n color,\n ...rest\n },\n ref,\n ) => {\n const { sx: wrapperSx, ...restWrapper } = contentWrapperProps || {};\n const { sx: iconWrapperSx, className: iconWrapperClassName, ...restIconWrapper } = iconWrapperProps || {};\n const { sx: iconSx, ...restIcon } = iconProps || {};\n const { sx: hoverIconSx, ...restHoverIcon } = hoverIconProps || {};\n const { icon, selectedIcon, hoverIcon, hoverSelectedIcon } = {\n icon: PlusIcon,\n selectedIcon: CheckIcon,\n hoverIcon: PlusIcon,\n hoverSelectedIcon: MinusIcon,\n ...(iconSlots || {}),\n };\n const IconComponent = !disabled && isSelected ? selectedIcon : icon;\n const HoverIconComponent = !disabled && isSelected ? hoverSelectedIcon : hoverIcon;\n\n return (\n <Paper color={color} onClick={disabled ? undefined : onClick} {...rest} ref={ref}>\n <Box\n sx={sxOverride({ borderRadius: 'inherit', overflow: 'hidden', height: '100%' }, wrapperSx)}\n {...restWrapper}\n >\n {!disableIcon && (\n <Box\n sx={sxOverride(\n {\n // circle\n border: 1,\n borderColor: 'onSurface.os100',\n backgroundColor: 'background.primary',\n ...(color === 'secondary' && {\n backgroundColor: 'surface.primary',\n }),\n borderRadius: '1000px',\n p: '5px',\n // reset IconButton style\n width: 'auto',\n height: 'auto',\n transition: 'none',\n // interactive and selected effect is controlled by card.theme\n // placement\n position: 'absolute',\n ...(iconPlacement.includes('top') ? { top: '16px' } : {}),\n ...(iconPlacement.includes('bottom') ? { bottom: '16px' } : {}),\n ...(iconPlacement.includes('start') ? { left: '16px' } : {}),\n ...(iconPlacement.includes('end') ? { right: '16px' } : {}),\n // Box overwritten to button\n '&.MuiButtonBase-root': {\n ...updateFocusRingStyle(1),\n // remove smooth transition effect to match card behavior\n '&:before': {\n transition: 'none',\n },\n // same style is also applied in card.theme\n ...getInteractiveStyle(\n {\n backgroundColor: 'background.primary',\n ...(color === 'secondary' && {\n backgroundColor: 'surface.primary',\n }),\n ...(isSelected && {\n backgroundColor: 'brand.primary',\n borderColor: 'brand.primary',\n color: 'common.white',\n }),\n '& .MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'block',\n },\n '&:last-of-type': {\n display: 'none',\n },\n },\n },\n {\n backgroundColor: 'surface.primary',\n ...(color === 'secondary' && {\n backgroundColor: 'surface.secondary',\n }),\n ...(isSelected && {\n backgroundColor: 'brandHover.primary',\n borderColor: 'brandHover.primary',\n color: 'common.white',\n }),\n // flip icon being shown\n '& .MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'none',\n },\n '&:last-of-type': {\n display: 'block',\n },\n },\n },\n ),\n },\n },\n iconWrapperSx,\n )}\n className={['FlowCard-Icon-root', iconWrapperClassName].filter(Boolean).join(' ')}\n {...restIconWrapper}\n >\n <IconComponent\n data-testid=\"Card.Icon\"\n sx={sxOverride({ display: 'block', fontSize: '20px' }, iconSx)}\n {...restIcon}\n />\n <HoverIconComponent\n data-testid=\"Card.HoverIcon\"\n sx={sxOverride({ display: 'none', fontSize: '20px' }, hoverIconSx)}\n {...restHoverIcon}\n />\n </Box>\n )}\n {children}\n </Box>\n </Paper>\n );\n },\n);\n"],"names":["FlowCard","forwardRef","children","isSelected","disableIcon","iconSlots","iconPlacement","iconProps","hoverIconProps","iconWrapperProps","contentWrapperProps","onClick","disabled","color","rest","ref","sx","wrapperSx","restWrapper","iconWrapperSx","className","iconWrapperClassName","restIconWrapper","iconSx","restIcon","hoverIconSx","restHoverIcon","icon","selectedIcon","hoverIcon","hoverSelectedIcon","PlusIcon","CheckIcon","MinusIcon","IconComponent","HoverIconComponent","_jsx","Paper","undefined","_jsxs","Box","sxOverride","borderRadius","overflow","height","border","borderColor","backgroundColor","p","width","transition","position","includes","top","bottom","left","right","updateFocusRingStyle","getInteractiveStyle","display","filter","Boolean","join","fontSize"],"mappings":"+YAYO,MAAMA,EAA0BC,EAAAA,WACrC,EAEIC,WACAC,aACAC,eAAc,EACdC,YACAC,gBAAgB,UAChBC,YACAC,iBACAC,mBACAC,sBACAC,UACAC,WACAC,WACGC,GAELC,KAEA,MAAQC,GAAIC,KAAcC,GAAgBR,GAAuB,CAAA,GACzDM,GAAIG,EAAeC,UAAWC,KAAyBC,GAAoBb,GAAoB,CAAA,GAC/FO,GAAIO,KAAWC,GAAajB,GAAa,CAAA,GACzCS,GAAIS,KAAgBC,GAAkBlB,GAAkB,CAAA,GAC1DmB,KAAEA,EAAIC,aAAEA,EAAYC,UAAEA,EAASC,kBAAEA,GAAsB,CAC3DH,KAAMI,EAAAA,SACNH,aAAcI,EAAAA,UACdH,UAAWE,EAAAA,SACXD,kBAAmBG,EAAAA,aACf5B,GAAa,CAAA,GAEb6B,GAAiBtB,GAAYT,EAAayB,EAAeD,EACzDQ,GAAsBvB,GAAYT,EAAa2B,EAAoBD,EAEzE,OACEO,EAAAA,IAACC,EAAAA,MAAK,CAACxB,MAAOA,EAAOF,QAASC,OAAW0B,EAAY3B,KAAaG,EAAMC,IAAKA,EAAGb,SAC9EqC,OAACC,EAAAA,KACCxB,GAAIyB,EAAAA,WAAW,CAAEC,aAAc,UAAWC,SAAU,SAAUC,OAAQ,QAAU3B,MAC5EC,EAAWhB,SAAA,EAEbE,GACAmC,EAAAA,KAACC,MAAG,CACFxB,GAAIyB,aACF,CAEEI,OAAQ,EACRC,YAAa,kBACbC,gBAAiB,wBACH,cAAVlC,GAAyB,CAC3BkC,gBAAiB,mBAEnBL,aAAc,SACdM,EAAG,MAEHC,MAAO,OACPL,OAAQ,OACRM,WAAY,OAGZC,SAAU,cACN7C,EAAc8C,SAAS,OAAS,CAAEC,IAAK,QAAW,MAClD/C,EAAc8C,SAAS,UAAY,CAAEE,OAAQ,QAAW,MACxDhD,EAAc8C,SAAS,SAAW,CAAEG,KAAM,QAAW,MACrDjD,EAAc8C,SAAS,OAAS,CAAEI,MAAO,QAAW,GAExD,uBAAwB,IACnBC,EAAAA,qBAAqB,GAExB,WAAY,CACVP,WAAY,WAGXQ,sBACD,CACEX,gBAAiB,wBACH,cAAVlC,GAAyB,CAC3BkC,gBAAiB,sBAEf5C,GAAc,CAChB4C,gBAAiB,gBACjBD,YAAa,gBACbjC,MAAO,gBAET,qBAAsB,CACpB,kBAAmB,CACjB8C,QAAS,SAEX,iBAAkB,CAChBA,QAAS,UAIf,CACEZ,gBAAiB,qBACH,cAAVlC,GAAyB,CAC3BkC,gBAAiB,wBAEf5C,GAAc,CAChB4C,gBAAiB,qBACjBD,YAAa,qBACbjC,MAAO,gBAGT,qBAAsB,CACpB,kBAAmB,CACjB8C,QAAS,QAEX,iBAAkB,CAChBA,QAAS,cAOrBxC,GAEFC,UAAW,CAAC,qBAAsBC,GAAsBuC,OAAOC,SAASC,KAAK,QACzExC,EAAepB,SAAA,CAEnBkC,EAAAA,IAACF,iBACa,YACZlB,GAAIyB,aAAW,CAAEkB,QAAS,QAASI,SAAU,QAAUxC,MACnDC,IAENY,EAAAA,IAACD,EAAkB,CAAA,cACL,iBACZnB,GAAIyB,EAAAA,WAAW,CAAEkB,QAAS,OAAQI,SAAU,QAAUtC,MAClDC,OAITxB"}
1
+ {"version":3,"file":"Card.js","sources":["../../../../../src/materialui/card/Card.tsx"],"sourcesContent":["import React, { FC, forwardRef } from 'react';\nimport { Paper, Box, CardProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { CheckIcon } from '@/src/components/icon/stroke/CheckIcon';\nimport { PlusIcon } from '@/src/components/icon/stroke/PlusIcon';\nimport { MinusIcon } from '@/src/components/icon/stroke/MinusIcon';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { Spinner } from '@/src/components/progress/Spinner';\n\n/**\n * Standard MUI Card extended with custom properties\n */\nexport const FlowCard: FC<CardProps> = forwardRef(\n (\n {\n children,\n isSelected,\n disableIcon = true,\n iconSlots,\n iconPlacement = 'top-end',\n iconProps,\n hoverIconProps,\n iconWrapperProps,\n contentWrapperProps,\n onClick,\n disabled,\n color,\n loading,\n loadingProps,\n ...rest\n },\n ref,\n ) => {\n const { sx: wrapperSx, ...restWrapper } = contentWrapperProps || {};\n const { sx: iconWrapperSx, className: iconWrapperClassName, ...restIconWrapper } = iconWrapperProps || {};\n const { sx: iconSx, ...restIcon } = iconProps || {};\n const { sx: hoverIconSx, ...restHoverIcon } = hoverIconProps || {};\n const { sx: loadingSpinnerSx, ...restLoadingProps } = loadingProps || {};\n const { icon, selectedIcon, hoverIcon, hoverSelectedIcon } = {\n icon: PlusIcon,\n selectedIcon: CheckIcon,\n hoverIcon: PlusIcon,\n hoverSelectedIcon: MinusIcon,\n ...(iconSlots || {}),\n };\n const IconComponent = !disabled && isSelected ? selectedIcon : icon;\n const HoverIconComponent = !disabled && isSelected ? hoverSelectedIcon : hoverIcon;\n const showLoadingSpinner = loading && !disabled;\n\n return (\n <Paper color={color} onClick={disabled ? undefined : onClick} {...rest} ref={ref}>\n <Box\n sx={sxOverride({ borderRadius: 'inherit', overflow: 'hidden', height: '100%' }, wrapperSx)}\n {...restWrapper}\n >\n {!disableIcon && (\n <Box\n sx={sxOverride(\n {\n // circle\n border: 1,\n borderColor: 'onSurface.os100',\n backgroundColor: 'background.primary',\n ...(color === 'secondary' && {\n backgroundColor: 'surface.primary',\n }),\n borderRadius: '1000px',\n p: showLoadingSpinner ? '3px' : '5px',\n // reset IconButton style\n width: 'auto',\n height: 'auto',\n transition: 'none',\n // interactive and selected effect is controlled by card.theme\n // placement\n position: 'absolute',\n ...(iconPlacement.includes('top') ? { top: '16px' } : {}),\n ...(iconPlacement.includes('bottom') ? { bottom: '16px' } : {}),\n ...(iconPlacement.includes('start') ? { left: '16px' } : {}),\n ...(iconPlacement.includes('end') ? { right: '16px' } : {}),\n // Box overwritten to button\n '&.MuiButtonBase-root': {\n ...updateFocusRingStyle(1),\n // remove smooth transition effect to match card behavior\n '&:before': {\n transition: 'none',\n },\n // same style is also applied in card.theme\n ...getInteractiveStyle(\n {\n backgroundColor: 'background.primary',\n ...(color === 'secondary' && {\n backgroundColor: 'surface.primary',\n }),\n ...(isSelected && {\n backgroundColor: 'brand.primary',\n borderColor: 'brand.primary',\n color: 'common.white',\n }),\n ...(showLoadingSpinner && isSelected && {\n backgroundColor: 'brandHover.primary',\n borderColor: 'brandHover.primary',\n }),\n ...(!showLoadingSpinner && {\n '.MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'block',\n },\n '&:last-of-type': {\n display: 'none',\n },\n },\n }),\n },\n {\n backgroundColor: 'surface.primary',\n ...(color === 'secondary' && {\n backgroundColor: 'surface.secondary',\n }),\n ...(isSelected && {\n backgroundColor: 'brandHover.primary',\n borderColor: 'brandHover.primary',\n color: 'common.white',\n }),\n // flip icon being shown\n ...(!showLoadingSpinner && {\n '.MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'none',\n },\n '&:last-of-type': {\n display: 'block',\n },\n },\n }),\n },\n ),\n },\n },\n iconWrapperSx,\n )}\n className={['FlowCard-Icon-root', iconWrapperClassName].filter(Boolean).join(' ')}\n {...restIconWrapper}\n >\n {showLoadingSpinner ? (\n <Spinner\n data-testid=\"Card.LoadingSpinner\"\n size={24}\n sx={sxOverride(\n {\n display: 'block',\n width: '24px',\n height: '24px',\n ...(isSelected && {\n '& .FlowSpinner-circle-primary': {\n stroke: (theme) => theme.palette.brand.secondary,\n },\n '& .FlowSpinner-circle-secondary': {\n stroke: (theme) => theme.palette.transparent.secondary,\n },\n }),\n },\n loadingSpinnerSx,\n )}\n {...restLoadingProps}\n />\n ) : (\n <>\n <IconComponent\n data-testid=\"Card.Icon\"\n sx={sxOverride({ display: 'block', fontSize: '20px' }, iconSx)}\n {...restIcon}\n />\n <HoverIconComponent\n data-testid=\"Card.HoverIcon\"\n sx={sxOverride({ display: 'none', fontSize: '20px' }, hoverIconSx)}\n {...restHoverIcon}\n />\n </>\n )}\n </Box>\n )}\n {children}\n </Box>\n </Paper>\n );\n },\n);\n"],"names":["FlowCard","forwardRef","children","isSelected","disableIcon","iconSlots","iconPlacement","iconProps","hoverIconProps","iconWrapperProps","contentWrapperProps","onClick","disabled","color","loading","loadingProps","rest","ref","sx","wrapperSx","restWrapper","iconWrapperSx","className","iconWrapperClassName","restIconWrapper","iconSx","restIcon","hoverIconSx","restHoverIcon","loadingSpinnerSx","restLoadingProps","icon","selectedIcon","hoverIcon","hoverSelectedIcon","PlusIcon","CheckIcon","MinusIcon","IconComponent","HoverIconComponent","showLoadingSpinner","_jsx","Paper","undefined","_jsxs","Box","sxOverride","borderRadius","overflow","height","border","borderColor","backgroundColor","p","width","transition","position","includes","top","bottom","left","right","updateFocusRingStyle","getInteractiveStyle","display","filter","Boolean","join","Spinner","size","stroke","theme","palette","brand","secondary","transparent","_Fragment","fontSize"],"mappings":"ucAaaA,EAA0BC,EAAAA,WACrC,EAEIC,WACAC,aACAC,eAAc,EACdC,YACAC,gBAAgB,UAChBC,YACAC,iBACAC,mBACAC,sBACAC,UACAC,WACAC,QACAC,UACAC,kBACGC,GAELC,KAEA,MAAQC,GAAIC,KAAcC,GAAgBV,GAAuB,CAAA,GACzDQ,GAAIG,EAAeC,UAAWC,KAAyBC,GAAoBf,GAAoB,CAAA,GAC/FS,GAAIO,KAAWC,GAAanB,GAAa,CAAA,GACzCW,GAAIS,KAAgBC,GAAkBpB,GAAkB,CAAA,GACxDU,GAAIW,KAAqBC,GAAqBf,GAAgB,CAAA,GAChEgB,KAAEA,EAAIC,aAAEA,EAAYC,UAAEA,EAASC,kBAAEA,GAAsB,CAC3DH,KAAMI,EAAAA,SACNH,aAAcI,EAAAA,UACdH,UAAWE,EAAAA,SACXD,kBAAmBG,EAAAA,aACfhC,GAAa,CAAA,GAEbiC,GAAiB1B,GAAYT,EAAa6B,EAAeD,EACzDQ,GAAsB3B,GAAYT,EAAa+B,EAAoBD,EACnEO,EAAqB1B,IAAYF,EAEvC,OACE6B,EAAAA,IAACC,EAAAA,MAAK,CAAC7B,MAAOA,EAAOF,QAASC,OAAW+B,EAAYhC,KAAaK,EAAMC,IAAKA,EAAGf,SAC9E0C,OAACC,EAAAA,KACC3B,GAAI4B,EAAAA,WAAW,CAAEC,aAAc,UAAWC,SAAU,SAAUC,OAAQ,QAAU9B,MAC5EC,EAAWlB,SAAA,EAEbE,GACAqC,EAAAA,IAACI,MAAG,CACF3B,GAAI4B,aACF,CAEEI,OAAQ,EACRC,YAAa,kBACbC,gBAAiB,wBACH,cAAVvC,GAAyB,CAC3BuC,gBAAiB,mBAEnBL,aAAc,SACdM,EAAGb,EAAqB,MAAQ,MAEhCc,MAAO,OACPL,OAAQ,OACRM,WAAY,OAGZC,SAAU,cACNlD,EAAcmD,SAAS,OAAS,CAAEC,IAAK,QAAW,MAClDpD,EAAcmD,SAAS,UAAY,CAAEE,OAAQ,QAAW,MACxDrD,EAAcmD,SAAS,SAAW,CAAEG,KAAM,QAAW,MACrDtD,EAAcmD,SAAS,OAAS,CAAEI,MAAO,QAAW,GAExD,uBAAwB,IACnBC,EAAAA,qBAAqB,GAExB,WAAY,CACVP,WAAY,WAGXQ,sBACD,CACEX,gBAAiB,wBACH,cAAVvC,GAAyB,CAC3BuC,gBAAiB,sBAEfjD,GAAc,CAChBiD,gBAAiB,gBACjBD,YAAa,gBACbtC,MAAO,mBAEL2B,GAAsBrC,GAAc,CACtCiD,gBAAiB,qBACjBD,YAAa,0BAEVX,GAAsB,CACzB,mBAAoB,CAClB,kBAAmB,CACjBwB,QAAS,SAEX,iBAAkB,CAChBA,QAAS,WAKjB,CACEZ,gBAAiB,qBACH,cAAVvC,GAAyB,CAC3BuC,gBAAiB,wBAEfjD,GAAc,CAChBiD,gBAAiB,qBACjBD,YAAa,qBACbtC,MAAO,oBAGJ2B,GAAsB,CACzB,mBAAoB,CAClB,kBAAmB,CACjBwB,QAAS,QAEX,iBAAkB,CAChBA,QAAS,eAQvB3C,GAEFC,UAAW,CAAC,qBAAsBC,GAAsB0C,OAAOC,SAASC,KAAK,QACzE3C,WAEHgB,EACCC,EAAAA,IAAC2B,UAAO,CAAA,cACM,sBACZC,KAAM,GACNnD,GAAI4B,EAAAA,WACF,CACEkB,QAAS,QACTV,MAAO,OACPL,OAAQ,UACJ9C,GAAc,CAChB,gCAAiC,CAC/BmE,OAASC,GAAUA,EAAMC,QAAQC,MAAMC,WAEzC,kCAAmC,CACjCJ,OAASC,GAAUA,EAAMC,QAAQG,YAAYD,aAInD7C,MAEEC,IAGNc,OAAAgC,EAAAA,SAAA,CAAA1E,SAAA,CACEuC,EAAAA,IAACH,iBACa,YACZpB,GAAI4B,EAAAA,WAAW,CAAEkB,QAAS,QAASa,SAAU,QAAUpD,MACnDC,IAENe,MAACF,EAAkB,CAAA,cACL,iBACZrB,GAAI4B,EAAAA,WAAW,CAAEkB,QAAS,OAAQa,SAAU,QAAUlD,MAClDC,SAMb1B"}
@@ -1,2 +1,2 @@
1
- "use strict";var r=require("./Card.js"),o=require("../../components/focusring/focusring.js"),e=require("../button/interactive.js");const t={defaultProps:{elevation:0,component:r.FlowCard},styleOverrides:{root:({theme:r,color:t,disabled:a,isSelected:l})=>({backgroundColor:"secondary"===t?r.palette.surface.primary:r.palette.background.primary,position:"relative",borderRadius:"8px",overflow:"visible",border:"1px solid transparent","&::after":{content:'""',position:"absolute",maxWidth:"none",borderStyle:"solid",borderRadius:"inherit",pointerEvents:"none",zIndex:"1",inset:"-1px",borderWidth:"1px",borderColor:r.palette.onSurface.os100,...!a&&l&&{inset:"-3px",borderWidth:"3px",borderColor:r.palette.brand.primary}},...!a&&l&&{"& .FlowCard-Icon-root":{color:r.palette.common.white,backgroundColor:r.palette.brand.primary,borderColor:r.palette.brand.primary},"&:hover":{"&::after":{borderColor:r.palette.brandHover.primary}}},...!a&&{"&:has(.MuiCardActionArea-root)":{...e.getInteractiveStyle({"&::after":{inset:"-1px",borderWidth:"1px",borderColor:r.palette.onSurface.os100,...l&&{inset:"-3px",borderWidth:"3px",borderColor:r.palette.brand.primary}},"& .FlowCard-Icon-root":{backgroundColor:r.palette.background.primary,..."secondary"===t&&{backgroundColor:r.palette.surface.primary},...l&&{backgroundColor:r.palette.brand.primary,borderColor:r.palette.brand.primary}},"& .FlowCard-Icon-root .MuiSvgIcon-root":{"&:first-of-type":{display:"block"},"&:last-of-type":{display:"none"}}},{"&::after":{inset:"-3px",borderWidth:"3px",...l&&{borderColor:r.palette.brandHover.primary}},"& .FlowCard-Icon-root":{backgroundColor:r.palette.surface.primary,..."secondary"===t&&{backgroundColor:r.palette.surface.secondary},...l&&{backgroundColor:r.palette.brandHover.primary,borderColor:r.palette.brandHover.primary}},"& .FlowCard-Icon-root .MuiSvgIcon-root":{"&:first-of-type":{display:"none"},"&:last-of-type":{display:"block"}}},null,null,"&:has(.MuiCardActionArea-root.Mui-focusVisible)")},...o.getFocusRingStyle(r,!1,3,":has(.MuiCardActionArea-root.Mui-focusVisible, .FlowFlippingCardContent-root.Mui-focusVisible)")},...a&&{backgroundColor:r.palette.surface.primary,borderColor:r.palette.disabled.secondary,cursor:"not-allowed",userSelect:"none",pointerEvents:"none","& .FlowCard-Icon-root":{backgroundColor:r.palette.disabled.secondary,color:r.palette.disabled.tertiary},"&, & .MuiTypography-root":{color:r.palette.disabled.tertiary},"& img":{opacity:"0.6"}}})},variants:[{props:{raised:!0},style:({theme:r})=>({boxShadow:r.flowShadows.xs})}]};exports.flowCard=t;
1
+ "use strict";var r=require("./Card.js"),o=require("../../components/focusring/focusring.js"),e=require("../button/interactive.js");const a={defaultProps:{elevation:0,component:r.FlowCard},styleOverrides:{root:({theme:r,color:a,disabled:t,isSelected:l,loading:d})=>({backgroundColor:"secondary"===a?r.palette.surface.primary:r.palette.background.primary,position:"relative",borderRadius:"8px",overflow:"visible",border:"1px solid transparent","&::after":{content:'""',position:"absolute",maxWidth:"none",borderStyle:"solid",borderRadius:"inherit",pointerEvents:"none",zIndex:"1",inset:"-1px",borderWidth:"1px",borderColor:r.palette.onSurface.os100,...!t&&l&&{inset:"-3px",borderWidth:"3px",borderColor:r.palette.brand.primary}},...!t&&l&&{"& .FlowCard-Icon-root":{color:r.palette.common.white,backgroundColor:r.palette.brand.primary,borderColor:r.palette.brand.primary,...d&&{backgroundColor:r.palette.brandHover.primary,borderColor:r.palette.brandHover.primary}},"&:hover":{"&::after":{borderColor:r.palette.brandHover.primary}}},...!t&&{"&:has(.MuiCardActionArea-root)":{...e.getInteractiveStyle({"&::after":{inset:"-1px",borderWidth:"1px",borderColor:r.palette.onSurface.os100,...l&&{inset:"-3px",borderWidth:"3px",borderColor:r.palette.brand.primary}},"& .FlowCard-Icon-root":{backgroundColor:r.palette.background.primary,..."secondary"===a&&{backgroundColor:r.palette.surface.primary},...l&&{backgroundColor:r.palette.brand.primary,borderColor:r.palette.brand.primary},...l&&d&&{backgroundColor:r.palette.brandHover.primary,borderColor:r.palette.brandHover.primary}},...!d&&{"& .FlowCard-Icon-root .MuiSvgIcon-root":{"&:first-of-type":{display:"block"},"&:last-of-type":{display:"none"}}}},{"&::after":{inset:"-3px",borderWidth:"3px",...l&&{borderColor:r.palette.brandHover.primary}},"& .FlowCard-Icon-root":{backgroundColor:r.palette.surface.primary,..."secondary"===a&&{backgroundColor:r.palette.surface.secondary},...l&&{backgroundColor:r.palette.brandHover.primary,borderColor:r.palette.brandHover.primary}},...!d&&{"& .FlowCard-Icon-root .MuiSvgIcon-root":{"&:first-of-type":{display:"none"},"&:last-of-type":{display:"block"}}}},null,null,"&:has(.MuiCardActionArea-root.Mui-focusVisible)")},...o.getFocusRingStyle(r,!1,3,":has(.MuiCardActionArea-root.Mui-focusVisible, .FlowFlippingCardContent-root.Mui-focusVisible)")},...t&&{backgroundColor:r.palette.surface.primary,borderColor:r.palette.disabled.secondary,cursor:"not-allowed",userSelect:"none",pointerEvents:"none","& .FlowCard-Icon-root":{backgroundColor:r.palette.disabled.secondary,color:r.palette.disabled.tertiary},"&, & .MuiTypography-root":{color:r.palette.disabled.tertiary},"& img":{opacity:"0.6"}}})},variants:[{props:{raised:!0},style:({theme:r})=>({boxShadow:r.flowShadows.xs})}]};exports.flowCard=a;
2
2
  //# sourceMappingURL=card.theme.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"card.theme.js","sources":["../../../../../src/materialui/card/card.theme.tsx"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { FlowCard } from './Card';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowCard: Components<Theme>['MuiCard'] = {\n defaultProps: {\n elevation: 0,\n // we use custom Card component that extends @mui card greatly\n component: FlowCard,\n },\n styleOverrides: {\n root: ({ theme, color, disabled, isSelected }) => ({\n backgroundColor: color === 'secondary' ? theme.palette.surface.primary : theme.palette.background.primary,\n position: 'relative',\n borderRadius: '8px',\n overflow: 'visible',\n // adding standard border and changing its width on hover creates layout shift\n // therefore we use absolute positioned border\n border: '1px solid transparent',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n maxWidth: 'none',\n borderStyle: 'solid',\n borderRadius: 'inherit',\n pointerEvents: 'none',\n zIndex: '1',\n // same style is applied for the interactive effect bellow\n // into the transparent border\n inset: '-1px',\n borderWidth: '1px',\n borderColor: theme.palette.onSurface.os100,\n // selected\n ...(!disabled &&\n isSelected && {\n // keep 1px inside\n inset: '-3px',\n borderWidth: '3px',\n borderColor: theme.palette.brand.primary,\n }),\n },\n // selected\n ...(!disabled &&\n isSelected && {\n // change style of icon\n '& .FlowCard-Icon-root': {\n color: theme.palette.common.white,\n backgroundColor: theme.palette.brand.primary,\n borderColor: theme.palette.brand.primary,\n },\n // hover effect that for non-link selected card\n '&:hover': {\n '&::after': {\n borderColor: theme.palette.brandHover.primary,\n },\n },\n }),\n // hover effect is applied only if FlowIconButton exists\n ...(!disabled && {\n '&:has(.MuiCardActionArea-root)': {\n ...getInteractiveStyle(\n {\n '&::after': {\n inset: '-1px',\n borderWidth: '1px',\n borderColor: theme.palette.onSurface.os100,\n // selected\n ...(isSelected && {\n inset: '-3px',\n borderWidth: '3px',\n borderColor: theme.palette.brand.primary,\n }),\n },\n // same style is also in Card.tsx\n '& .FlowCard-Icon-root': {\n backgroundColor: theme.palette.background.primary,\n ...(color === 'secondary' && {\n backgroundColor: theme.palette.surface.primary,\n }),\n ...(isSelected && {\n backgroundColor: theme.palette.brand.primary,\n borderColor: theme.palette.brand.primary,\n }),\n },\n '& .FlowCard-Icon-root .MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'block',\n },\n '&:last-of-type': {\n display: 'none',\n },\n },\n },\n {\n // adjust style of border\n '&::after': {\n inset: '-3px',\n borderWidth: '3px',\n ...(isSelected && {\n borderColor: theme.palette.brandHover.primary,\n }),\n },\n // change style of icon\n '& .FlowCard-Icon-root': {\n backgroundColor: theme.palette.surface.primary,\n ...(color === 'secondary' && {\n backgroundColor: theme.palette.surface.secondary,\n }),\n ...(isSelected && {\n backgroundColor: theme.palette.brandHover.primary,\n borderColor: theme.palette.brandHover.primary,\n }),\n },\n // flip icon being shown\n '& .FlowCard-Icon-root .MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'none',\n },\n '&:last-of-type': {\n display: 'block',\n },\n },\n },\n null,\n null,\n '&:has(.MuiCardActionArea-root.Mui-focusVisible)',\n ),\n },\n ...getFocusRingStyle(\n theme,\n false,\n 3,\n ':has(.MuiCardActionArea-root.Mui-focusVisible, .FlowFlippingCardContent-root.Mui-focusVisible)',\n ),\n }),\n // disabled style\n ...(disabled && {\n backgroundColor: theme.palette.surface.primary,\n borderColor: theme.palette.disabled.secondary,\n cursor: 'not-allowed',\n userSelect: 'none',\n pointerEvents: 'none',\n // change style of icon\n '& .FlowCard-Icon-root': {\n backgroundColor: theme.palette.disabled.secondary,\n color: theme.palette.disabled.tertiary,\n },\n // important selector to overwrite Typography sx color styling\n '&, & .MuiTypography-root': {\n color: theme.palette.disabled.tertiary,\n },\n // change visibility of images\n '& img': {\n opacity: '0.6',\n },\n }),\n }),\n },\n variants: [\n {\n props: { raised: true },\n style: ({ theme }) => ({\n boxShadow: theme.flowShadows['xs'],\n }),\n },\n ],\n};\n"],"names":["flowCard","defaultProps","elevation","component","FlowCard","styleOverrides","root","theme","color","disabled","isSelected","backgroundColor","palette","surface","primary","background","position","borderRadius","overflow","border","content","maxWidth","borderStyle","pointerEvents","zIndex","inset","borderWidth","borderColor","onSurface","os100","brand","common","white","brandHover","getInteractiveStyle","display","secondary","getFocusRingStyle","cursor","userSelect","tertiary","opacity","variants","props","raised","style","boxShadow","flowShadows"],"mappings":"mIAMO,MAAMA,EAAyC,CACpDC,aAAc,CACZC,UAAW,EAEXC,UAAWC,EAAAA,UAEbC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,QAAOC,WAAUC,iBAAY,CAC3CC,gBAA2B,cAAVH,EAAwBD,EAAMK,QAAQC,QAAQC,QAAUP,EAAMK,QAAQG,WAAWD,QAClGE,SAAU,WACVC,aAAc,MACdC,SAAU,UAGVC,OAAQ,wBACR,WAAY,CACVC,QAAS,KACTJ,SAAU,WACVK,SAAU,OACVC,YAAa,QACbL,aAAc,UACdM,cAAe,OACfC,OAAQ,IAGRC,MAAO,OACPC,YAAa,MACbC,YAAapB,EAAMK,QAAQgB,UAAUC,UAEhCpB,GACHC,GAAc,CAEZe,MAAO,OACPC,YAAa,MACbC,YAAapB,EAAMK,QAAQkB,MAAMhB,cAIlCL,GACHC,GAAc,CAEZ,wBAAyB,CACvBF,MAAOD,EAAMK,QAAQmB,OAAOC,MAC5BrB,gBAAiBJ,EAAMK,QAAQkB,MAAMhB,QACrCa,YAAapB,EAAMK,QAAQkB,MAAMhB,SAGnC,UAAW,CACT,WAAY,CACVa,YAAapB,EAAMK,QAAQqB,WAAWnB,eAKzCL,GAAY,CACf,iCAAkC,IAC7ByB,sBACD,CACE,WAAY,CACVT,MAAO,OACPC,YAAa,MACbC,YAAapB,EAAMK,QAAQgB,UAAUC,SAEjCnB,GAAc,CAChBe,MAAO,OACPC,YAAa,MACbC,YAAapB,EAAMK,QAAQkB,MAAMhB,UAIrC,wBAAyB,CACvBH,gBAAiBJ,EAAMK,QAAQG,WAAWD,WAC5B,cAAVN,GAAyB,CAC3BG,gBAAiBJ,EAAMK,QAAQC,QAAQC,YAErCJ,GAAc,CAChBC,gBAAiBJ,EAAMK,QAAQkB,MAAMhB,QACrCa,YAAapB,EAAMK,QAAQkB,MAAMhB,UAGrC,yCAA0C,CACxC,kBAAmB,CACjBqB,QAAS,SAEX,iBAAkB,CAChBA,QAAS,UAIf,CAEE,WAAY,CACVV,MAAO,OACPC,YAAa,SACThB,GAAc,CAChBiB,YAAapB,EAAMK,QAAQqB,WAAWnB,UAI1C,wBAAyB,CACvBH,gBAAiBJ,EAAMK,QAAQC,QAAQC,WACzB,cAAVN,GAAyB,CAC3BG,gBAAiBJ,EAAMK,QAAQC,QAAQuB,cAErC1B,GAAc,CAChBC,gBAAiBJ,EAAMK,QAAQqB,WAAWnB,QAC1Ca,YAAapB,EAAMK,QAAQqB,WAAWnB,UAI1C,yCAA0C,CACxC,kBAAmB,CACjBqB,QAAS,QAEX,iBAAkB,CAChBA,QAAS,WAIf,KACA,KACA,uDAGDE,EAAAA,kBACD9B,GACA,EACA,EACA,sGAIAE,GAAY,CACdE,gBAAiBJ,EAAMK,QAAQC,QAAQC,QACvCa,YAAapB,EAAMK,QAAQH,SAAS2B,UACpCE,OAAQ,cACRC,WAAY,OACZhB,cAAe,OAEf,wBAAyB,CACvBZ,gBAAiBJ,EAAMK,QAAQH,SAAS2B,UACxC5B,MAAOD,EAAMK,QAAQH,SAAS+B,UAGhC,2BAA4B,CAC1BhC,MAAOD,EAAMK,QAAQH,SAAS+B,UAGhC,QAAS,CACPC,QAAS,WAKjBC,SAAU,CACR,CACEC,MAAO,CAAEC,QAAQ,GACjBC,MAAO,EAAGtC,YAAO,CACfuC,UAAWvC,EAAMwC,YAAgB"}
1
+ {"version":3,"file":"card.theme.js","sources":["../../../../../src/materialui/card/card.theme.tsx"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { FlowCard } from './Card';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowCard: Components<Theme>['MuiCard'] = {\n defaultProps: {\n elevation: 0,\n // we use custom Card component that extends @mui card greatly\n component: FlowCard,\n },\n styleOverrides: {\n root: ({ theme, color, disabled, isSelected, loading }) => ({\n backgroundColor: color === 'secondary' ? theme.palette.surface.primary : theme.palette.background.primary,\n position: 'relative',\n borderRadius: '8px',\n overflow: 'visible',\n // adding standard border and changing its width on hover creates layout shift\n // therefore we use absolute positioned border\n border: '1px solid transparent',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n maxWidth: 'none',\n borderStyle: 'solid',\n borderRadius: 'inherit',\n pointerEvents: 'none',\n zIndex: '1',\n // same style is applied for the interactive effect bellow\n // into the transparent border\n inset: '-1px',\n borderWidth: '1px',\n borderColor: theme.palette.onSurface.os100,\n // selected\n ...(!disabled &&\n isSelected && {\n // keep 1px inside\n inset: '-3px',\n borderWidth: '3px',\n borderColor: theme.palette.brand.primary,\n }),\n },\n // selected\n ...(!disabled &&\n isSelected && {\n // change style of icon\n '& .FlowCard-Icon-root': {\n color: theme.palette.common.white,\n backgroundColor: theme.palette.brand.primary,\n borderColor: theme.palette.brand.primary,\n ...(loading && {\n backgroundColor: theme.palette.brandHover.primary,\n borderColor: theme.palette.brandHover.primary,\n }),\n },\n // hover effect that for non-link selected card\n '&:hover': {\n '&::after': {\n borderColor: theme.palette.brandHover.primary,\n },\n },\n }),\n // hover effect is applied only if FlowIconButton exists\n ...(!disabled && {\n '&:has(.MuiCardActionArea-root)': {\n ...getInteractiveStyle(\n {\n '&::after': {\n inset: '-1px',\n borderWidth: '1px',\n borderColor: theme.palette.onSurface.os100,\n // selected\n ...(isSelected && {\n inset: '-3px',\n borderWidth: '3px',\n borderColor: theme.palette.brand.primary,\n }),\n },\n // same style is also in Card.tsx\n '& .FlowCard-Icon-root': {\n backgroundColor: theme.palette.background.primary,\n ...(color === 'secondary' && {\n backgroundColor: theme.palette.surface.primary,\n }),\n ...(isSelected && {\n backgroundColor: theme.palette.brand.primary,\n borderColor: theme.palette.brand.primary,\n }),\n ...(isSelected && loading && {\n backgroundColor: theme.palette.brandHover.primary,\n borderColor: theme.palette.brandHover.primary,\n }),\n },\n ...(!loading && {\n '& .FlowCard-Icon-root .MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'block',\n },\n '&:last-of-type': {\n display: 'none',\n },\n },\n }),\n },\n {\n // adjust style of border\n '&::after': {\n inset: '-3px',\n borderWidth: '3px',\n ...(isSelected && {\n borderColor: theme.palette.brandHover.primary,\n }),\n },\n // change style of icon\n '& .FlowCard-Icon-root': {\n backgroundColor: theme.palette.surface.primary,\n ...(color === 'secondary' && {\n backgroundColor: theme.palette.surface.secondary,\n }),\n ...(isSelected && {\n backgroundColor: theme.palette.brandHover.primary,\n borderColor: theme.palette.brandHover.primary,\n }),\n },\n // flip icon being shown\n ...(!loading && {\n '& .FlowCard-Icon-root .MuiSvgIcon-root': {\n '&:first-of-type': {\n display: 'none',\n },\n '&:last-of-type': {\n display: 'block',\n },\n },\n }),\n },\n null,\n null,\n '&:has(.MuiCardActionArea-root.Mui-focusVisible)',\n ),\n },\n ...getFocusRingStyle(\n theme,\n false,\n 3,\n ':has(.MuiCardActionArea-root.Mui-focusVisible, .FlowFlippingCardContent-root.Mui-focusVisible)',\n ),\n }),\n // disabled style\n ...(disabled && {\n backgroundColor: theme.palette.surface.primary,\n borderColor: theme.palette.disabled.secondary,\n cursor: 'not-allowed',\n userSelect: 'none',\n pointerEvents: 'none',\n // change style of icon\n '& .FlowCard-Icon-root': {\n backgroundColor: theme.palette.disabled.secondary,\n color: theme.palette.disabled.tertiary,\n },\n // important selector to overwrite Typography sx color styling\n '&, & .MuiTypography-root': {\n color: theme.palette.disabled.tertiary,\n },\n // change visibility of images\n '& img': {\n opacity: '0.6',\n },\n }),\n }),\n },\n variants: [\n {\n props: { raised: true },\n style: ({ theme }) => ({\n boxShadow: theme.flowShadows['xs'],\n }),\n },\n ],\n};\n"],"names":["flowCard","defaultProps","elevation","component","FlowCard","styleOverrides","root","theme","color","disabled","isSelected","loading","backgroundColor","palette","surface","primary","background","position","borderRadius","overflow","border","content","maxWidth","borderStyle","pointerEvents","zIndex","inset","borderWidth","borderColor","onSurface","os100","brand","common","white","brandHover","getInteractiveStyle","display","secondary","getFocusRingStyle","cursor","userSelect","tertiary","opacity","variants","props","raised","style","boxShadow","flowShadows"],"mappings":"mIAMO,MAAMA,EAAyC,CACpDC,aAAc,CACZC,UAAW,EAEXC,UAAWC,EAAAA,UAEbC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,QAAOC,WAAUC,aAAYC,cAAS,CACpDC,gBAA2B,cAAVJ,EAAwBD,EAAMM,QAAQC,QAAQC,QAAUR,EAAMM,QAAQG,WAAWD,QAClGE,SAAU,WACVC,aAAc,MACdC,SAAU,UAGVC,OAAQ,wBACR,WAAY,CACVC,QAAS,KACTJ,SAAU,WACVK,SAAU,OACVC,YAAa,QACbL,aAAc,UACdM,cAAe,OACfC,OAAQ,IAGRC,MAAO,OACPC,YAAa,MACbC,YAAarB,EAAMM,QAAQgB,UAAUC,UAEhCrB,GACHC,GAAc,CAEZgB,MAAO,OACPC,YAAa,MACbC,YAAarB,EAAMM,QAAQkB,MAAMhB,cAIlCN,GACHC,GAAc,CAEZ,wBAAyB,CACvBF,MAAOD,EAAMM,QAAQmB,OAAOC,MAC5BrB,gBAAiBL,EAAMM,QAAQkB,MAAMhB,QACrCa,YAAarB,EAAMM,QAAQkB,MAAMhB,WAC7BJ,GAAW,CACbC,gBAAiBL,EAAMM,QAAQqB,WAAWnB,QAC1Ca,YAAarB,EAAMM,QAAQqB,WAAWnB,UAI1C,UAAW,CACT,WAAY,CACVa,YAAarB,EAAMM,QAAQqB,WAAWnB,eAKzCN,GAAY,CACf,iCAAkC,IAC7B0B,sBACD,CACE,WAAY,CACVT,MAAO,OACPC,YAAa,MACbC,YAAarB,EAAMM,QAAQgB,UAAUC,SAEjCpB,GAAc,CAChBgB,MAAO,OACPC,YAAa,MACbC,YAAarB,EAAMM,QAAQkB,MAAMhB,UAIrC,wBAAyB,CACvBH,gBAAiBL,EAAMM,QAAQG,WAAWD,WAC5B,cAAVP,GAAyB,CAC3BI,gBAAiBL,EAAMM,QAAQC,QAAQC,YAErCL,GAAc,CAChBE,gBAAiBL,EAAMM,QAAQkB,MAAMhB,QACrCa,YAAarB,EAAMM,QAAQkB,MAAMhB,YAE/BL,GAAcC,GAAW,CAC3BC,gBAAiBL,EAAMM,QAAQqB,WAAWnB,QAC1Ca,YAAarB,EAAMM,QAAQqB,WAAWnB,cAGrCJ,GAAW,CACd,yCAA0C,CACxC,kBAAmB,CACjByB,QAAS,SAEX,iBAAkB,CAChBA,QAAS,WAKjB,CAEE,WAAY,CACVV,MAAO,OACPC,YAAa,SACTjB,GAAc,CAChBkB,YAAarB,EAAMM,QAAQqB,WAAWnB,UAI1C,wBAAyB,CACvBH,gBAAiBL,EAAMM,QAAQC,QAAQC,WACzB,cAAVP,GAAyB,CAC3BI,gBAAiBL,EAAMM,QAAQC,QAAQuB,cAErC3B,GAAc,CAChBE,gBAAiBL,EAAMM,QAAQqB,WAAWnB,QAC1Ca,YAAarB,EAAMM,QAAQqB,WAAWnB,cAIrCJ,GAAW,CACd,yCAA0C,CACxC,kBAAmB,CACjByB,QAAS,QAEX,iBAAkB,CAChBA,QAAS,YAKjB,KACA,KACA,uDAGDE,EAAAA,kBACD/B,GACA,EACA,EACA,sGAIAE,GAAY,CACdG,gBAAiBL,EAAMM,QAAQC,QAAQC,QACvCa,YAAarB,EAAMM,QAAQJ,SAAS4B,UACpCE,OAAQ,cACRC,WAAY,OACZhB,cAAe,OAEf,wBAAyB,CACvBZ,gBAAiBL,EAAMM,QAAQJ,SAAS4B,UACxC7B,MAAOD,EAAMM,QAAQJ,SAASgC,UAGhC,2BAA4B,CAC1BjC,MAAOD,EAAMM,QAAQJ,SAASgC,UAGhC,QAAS,CACPC,QAAS,WAKjBC,SAAU,CACR,CACEC,MAAO,CAAEC,QAAQ,GACjBC,MAAO,EAAGvC,YAAO,CACfwC,UAAWxC,EAAMyC,YAAgB"}