npm - @skodaflow/web-library - Versions diffs - 8.1.0 → 8.3.0 - Mend

@skodaflow/web-library 8.1.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 (490) hide show

package/cjs/components/advancedTable/agGrid.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var a=require("react/jsx-runtime"),e=require("@mui/material"),i=require("react"),o=require("./agGridVariables.js"),n=require("./agGridSkodaTheme.js"),r=require("./agGridIcons.js");const g=a=>{const e=n.skodaAgThemeParams(a);return{width:"100%","*":{maxWidth:"none"},'&:not(:has([class*="ag-theme-params-"])),&.ag-theme-material':{...o.agGridVariables(a)},".ag-row-last":{borderBottom:"none"},".ag-column-last .ag-header-cell-resize":{display:"none"},".ag-center-cols-container":{minWidth:"100%"},".ag-center-cols-viewport":{minHeight:"56px"},"& .ag-header-cell .ag-header-cell-text":{fontWeight:`${e.headerFontWeight}`},"& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden":{display:"block !important",cursor:"initial"},"& .ag-body-horizontal-scroll":{alignItems:"center",px:"22px",borderTop:"1px solid",borderTopColor:a.palette.surface.secondary,maxHeight:"none !important",height:"auto !important"},"& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport":{mt:"16px",mb:"23px"},"& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport":{my:0},"& .ag-paging-panel":{justifyContent:"center",px:"24px"},"& .ag-paging-panel .ag-paging-page-size":{position:"absolute"},"& .ag-paging-panel .ag-paging-page-summary-panel":{marginLeft:"auto"},"& .ag-paging-row-summary-panel":{display:"none"},"& .ag-paging-description":{fontSize:"18px",px:"18px"},"& .ag-paging-panel .ag-paging-description span":{color:"text.primary",px:"2px"},"& .ag-paging-panel .ag-paging-description .ag-paging-number":{fontWeight:"700"},"& .ag-paging-panel .ag-paging-description span:last-child":{fontWeight:"300"},"& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last":{display:"none"},"& .ag-paging-panel .ag-picker-field-wrapper":{border:"none",px:"0",cursor:"pointer",minWidth:"auto"},"& .ag-paging-panel .ag-picker-field-display":{minWidth:"28px",width:"auto",pr:"6px",fontSize:"18px",fontWeight:"700",textAlign:"center"},"& .ag-paging-panel .ag-label":{mr:"6px",fontSize:"18px"},"& .ag-popup > *":{backgroundColor:"onSurface.os0",cursor:"pointer",borderRadius:"0px"},"& .skoda-ag-row-pointer .ag-row:hover":{cursor:"pointer"},...r.agGridCssIcons,"& .ag-icon-asc, & .ag-icon-desc":{color:a.palette.onSurface.os600},"& .ag-icon-asc:hover, & .ag-icon-desc:hover":{color:a.palette.text.primary},"& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)":{display:"inline-block !important"},"& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before":{content:'""',display:"flex",width:"17px",height:"17px",maskSize:"contain",maskRepeat:"no-repeat",maskPosition:"center",verticalAlign:"middle",maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(r.agGridIconsDefinition.ascHover.svg)})`},"& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(r.agGridIconsDefinition.asc.svg)})`},fontFamily:e.fontFamily}},t=i.forwardRef(({sx:i,children:o,...n},r)=>a.jsx(e.Box,{sx:a=>({...g(a),...i}),ref:r,...n,children:o}));exports.SkodaAgGridProvider=t,exports.agGridStyles=g;
+"use strict";var a=require("react/jsx-runtime"),e=require("@mui/material"),i=require("react"),r=require("./agGridVariables.js"),o=require("./agGridSkodaTheme.js"),n=require("./agGridIcons.js"),g=require("../../utils/sxOverride/sxOverride.js");const t=a=>{const e=o.skodaAgThemeParams(a);return{width:"100%","*":{maxWidth:"none"},'&:not(:has([class*="ag-theme-params-"])),&.ag-theme-material':{...r.agGridVariables(a)},".ag-row-last":{borderBottom:"none"},".ag-column-last .ag-header-cell-resize":{display:"none"},".ag-center-cols-container":{minWidth:"100%"},".ag-center-cols-viewport":{minHeight:"56px"},"& .ag-header-cell .ag-header-cell-text":{fontWeight:`${e.headerFontWeight}`},"& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden":{display:"block !important",cursor:"initial"},"& .ag-body-horizontal-scroll":{alignItems:"center",px:"22px",borderTop:"1px solid",borderTopColor:a.palette.surface.secondary,maxHeight:"none !important",height:"auto !important"},"& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport":{mt:"16px",mb:"23px"},"& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport":{my:0},"& .ag-paging-panel":{justifyContent:"center",px:"24px"},"& .ag-paging-panel .ag-paging-page-size":{position:"absolute"},"& .ag-paging-panel .ag-paging-page-summary-panel":{marginLeft:"auto"},"& .ag-paging-row-summary-panel":{display:"none"},"& .ag-paging-description":{fontSize:"18px",px:"18px"},"& .ag-paging-panel .ag-paging-description span":{color:"text.primary",px:"2px"},"& .ag-paging-panel .ag-paging-description .ag-paging-number":{fontWeight:"700"},"& .ag-paging-panel .ag-paging-description span:last-child":{fontWeight:"300"},"& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last":{display:"none"},"& .ag-paging-panel .ag-picker-field-wrapper":{border:"none",px:"0",cursor:"pointer",minWidth:"auto"},"& .ag-paging-panel .ag-picker-field-display":{minWidth:"28px",width:"auto",pr:"6px",fontSize:"18px",fontWeight:"700",textAlign:"center"},"& .ag-paging-panel .ag-label":{mr:"6px",fontSize:"18px"},"& .ag-popup > *":{backgroundColor:"onSurface.os0",cursor:"pointer",borderRadius:"0px"},"& .skoda-ag-row-pointer .ag-row:hover":{cursor:"pointer"},...n.agGridCssIcons,"& .ag-icon-asc, & .ag-icon-desc":{color:a.palette.onSurface.os600},"& .ag-icon-asc:hover, & .ag-icon-desc:hover":{color:a.palette.text.primary},"& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)":{display:"inline-block !important"},"& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before":{content:'""',display:"flex",width:"17px",height:"17px",maskSize:"contain",maskRepeat:"no-repeat",maskPosition:"center",verticalAlign:"middle",maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(n.agGridIconsDefinition.ascHover.svg)})`},"& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(n.agGridIconsDefinition.asc.svg)})`},fontFamily:e.fontFamily}},s=i.forwardRef(({sx:i,children:r,...o},n)=>a.jsx(e.Box,{sx:g.sxOverride(a=>({...t(a)}),i),ref:n,...o,children:r}));exports.SkodaAgGridProvider=s,exports.agGridStyles=t;
 //# sourceMappingURL=agGrid.js.map

package/cjs/components/advancedTable/agGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agGrid.js","sources":["../../../../../src/components/advancedTable/agGrid.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject, Theme } from '@mui/material';\nimport React, { forwardRef } from 'react';\nimport { agGridVariables } from './agGridVariables';\nimport { skodaAgThemeParams } from './agGridSkodaTheme';\nimport { agGridCssIcons, agGridIconsDefinition } from './agGridIcons';\n\nexport const agGridStyles = (theme: Theme): CSSObject => {\n const agTheme = skodaAgThemeParams(theme);\n\n return {\n width: '100%',\n // support applying global style on all elements maxWidth: '100%'\n '': {\n maxWidth: 'none',\n },\n // Apply CSS variables only for non-themed tables of the old versions of ag grid (old versions of ag-grid, <v33, themes does not have ag-theme-params- class)\n '&:not(:has([class=\"ag-theme-params-\"])),&.ag-theme-material': {\n ...agGridVariables(theme),\n },\n\n '.ag-row-last': { borderBottom: 'none' },\n '.ag-column-last .ag-header-cell-resize': { display: 'none' },\n\n // Row lines full width\n '.ag-center-cols-container': {\n minWidth: '100%',\n },\n\n '.ag-center-cols-viewport': {\n // reduce to 1 row from default 150px\n minHeight: '56px',\n },\n\n // # Header styles\n '& .ag-header-cell .ag-header-cell-text': {\n fontWeight: `${agTheme.headerFontWeight}`,\n },\n\n // # Header Separators (only when column resizing is not activated and not for the last column)\n '& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden': {\n display: 'block !important',\n cursor: 'initial',\n },\n\n // # Horizontal Scrollbar\n '& .ag-body-horizontal-scroll': {\n alignItems: 'center',\n px: '22px',\n borderTop: '1px solid',\n borderTopColor: theme.palette.surface.secondary,\n maxHeight: 'none !important',\n height: 'auto !important',\n },\n '& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport': {\n mt: '16px',\n mb: '23px',\n },\n '& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport': {\n my: 0,\n },\n\n // # Pagination styles\n '& .ag-paging-panel': {\n justifyContent: 'center',\n px: '24px',\n },\n\n // Pagination layout - rows per page centered, arrows right-aligned\n '& .ag-paging-panel .ag-paging-page-size': {\n position: 'absolute',\n },\n '& .ag-paging-panel .ag-paging-page-summary-panel': {\n marginLeft: 'auto',\n },\n\n // Disable pagination summary\n '& .ag-paging-row-summary-panel': {\n display: 'none',\n },\n\n // Text styling within pagination arrows\n '& .ag-paging-description': {\n fontSize: '18px',\n px: '18px',\n },\n '& .ag-paging-panel .ag-paging-description span': {\n color: 'text.primary',\n px: '2px',\n },\n '& .ag-paging-panel .ag-paging-description .ag-paging-number': {\n fontWeight: '700',\n },\n '& .ag-paging-panel .ag-paging-description span:last-child': {\n fontWeight: '300',\n },\n\n // Disable AG-grid pagination icons - start, end\n '& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last': {\n display: 'none',\n },\n\n // Pagination - rows per page\n '& .ag-paging-panel .ag-picker-field-wrapper': {\n border: 'none',\n px: '0',\n cursor: 'pointer',\n minWidth: 'auto',\n },\n '& .ag-paging-panel .ag-picker-field-display': {\n minWidth: '28px',\n width: 'auto',\n pr: '6px',\n fontSize: '18px',\n fontWeight: '700',\n textAlign: 'center',\n },\n '& .ag-paging-panel .ag-label': {\n mr: '6px',\n fontSize: '18px',\n },\n\n '& .ag-popup > ': {\n backgroundColor: 'onSurface.os0',\n cursor: 'pointer',\n borderRadius: '0px',\n },\n\n // # Opt-in className=\"skoda-ag-pointer\"\n '& .skoda-ag-row-pointer .ag-row:hover': {\n cursor: 'pointer',\n },\n\n // Additional icons\n ...agGridCssIcons,\n\n // Show icons according to the SkodaFlow design\n '& .ag-icon-asc, & .ag-icon-desc': {\n color: theme.palette.onSurface.os600,\n },\n '& .ag-icon-asc:hover, & .ag-icon-desc:hover': {\n color: theme.palette.text.primary,\n },\n '& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)':\n {\n display: 'inline-block !important', // Ag grid also uses !important so we have to override it\n },\n\n '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {\n content: '\"\"',\n display: 'flex',\n width: '17px',\n height: '17px',\n maskSize: 'contain',\n maskRepeat: 'no-repeat',\n maskPosition: 'center',\n verticalAlign: 'middle',\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n },\n '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.asc.svg)})`,\n },\n\n // Legacy class approach, no theme\n fontFamily: agTheme.fontFamily,\n };\n};\n\ninterface SkodaAgGridProviderProps extends BoxProps {}\n\n/*\n A provider wrapper that applies Skoda AG Grid theming via sx.\n */\nexport const SkodaAgGridProvider: React.FC<SkodaAgGridProviderProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n return (\n <Box\n sx={(theme) => ({\n ...agGridStyles(theme),\n ~~...~~sx,\n })}\n ref={ref}\n {...rest}\n >\n {children}\n </Box>\n );\n});\n"],"names":["agGridStyles","theme","agTheme","skodaAgThemeParams","width","maxWidth","agGridVariables","borderBottom","display","minWidth","minHeight","fontWeight","headerFontWeight","cursor","alignItems","px","borderTop","borderTopColor","palette","surface","secondary","maxHeight","height","mt","mb","my","justifyContent","position","marginLeft","fontSize","color","border","pr","textAlign","mr","backgroundColor","borderRadius","agGridCssIcons","onSurface","os600","text","primary","content","maskSize","maskRepeat","maskPosition","verticalAlign","maskImage","encodeURIComponent","agGridIconsDefinition","ascHover","svg","asc","fontFamily","SkodaAgGridProvider","forwardRef","sx","children","rest","ref","_jsx","Box"],"mappings":"~~iMAMO~~,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAAA,mBAAmBF,GAEnC,MAAO,CACLG,MAAO,OAEP,IAAK,CACHC,SAAU,QAGZ,+DAAgE,IAC3DC,EAAAA,gBAAgBL,IAGrB,eAAgB,CAAEM,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGT,EAAQU,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,eAAgBhB,EAAMiB,QAAQC,QAAQC,UACtCC,UAAW,kBACXC,OAAQ,mBAEV,mEAAoE,CAClEC,GAAI,OACJC,GAAI,QAEN,gFAAiF,CAC/EC,GAAI,GAIN,qBAAsB,CACpBC,eAAgB,SAChBX,GAAI,QAIN,0CAA2C,CACzCY,SAAU,YAEZ,mDAAoD,CAClDC,WAAY,QAId,iCAAkC,CAChCpB,QAAS,QAIX,2BAA4B,CAC1BqB,SAAU,OACVd,GAAI,QAEN,iDAAkD,CAChDe,MAAO,eACPf,GAAI,OAEN,8DAA+D,CAC7DJ,WAAY,OAEd,4DAA6D,CAC3DA,WAAY,OAId,sEAAuE,CACrEH,QAAS,QAIX,8CAA+C,CAC7CuB,OAAQ,OACRhB,GAAI,IACJF,OAAQ,UACRJ,SAAU,QAEZ,8CAA+C,CAC7CA,SAAU,OACVL,MAAO,OACP4B,GAAI,MACJH,SAAU,OACVlB,WAAY,MACZsB,UAAW,UAEb,+BAAgC,CAC9BC,GAAI,MACJL,SAAU,QAGZ,kBAAmB,CACjBM,gBAAiB,gBACjBtB,OAAQ,UACRuB,aAAc,OAIhB,wCAAyC,CACvCvB,OAAQ,cAIPwB,EAAAA,eAGH,kCAAmC,CACjCP,MAAO7B,EAAMiB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO7B,EAAMiB,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAGb,6DAA8D,CAC5DkC,QAAS,KACTlC,QAAS,OACTJ,MAAO,OACPkB,OAAQ,OACRqB,SAAU,UACVC,WAAY,YACZC,aAAc,SACdC,cAAe,SACfC,UAAW,+BAA+BC,mBAAmBC,EAAAA,sBAAsBC,SAASC,SAE9F,mEAAoE,CAClEJ,UAAW,+BAA+BC,mBAAmBC,EAAAA,sBAAsBG,IAAID,SAIzFE,WAAYnD,EAAQmD,aASXC,EAA0DC,EAAAA,WAAW,EAAGC,KAAIC,cAAaC,GAAQC,IAE1GC,EAAAA,IAACC,EAAAA,IAAG,CACFL,~~GAAKvD~~,IAAK,~~IACLD~~,EAAaC,~~MACbuD~~,~~IAELG~~,IAAKA,KACDD,EAAID,SAEPA"}
1	+ {"version":3,"file":"agGrid.js","sources":["../../../../../src/components/advancedTable/agGrid.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject, Theme } from '@mui/material';\nimport React, { forwardRef } from 'react';\nimport { agGridVariables } from './agGridVariables';\nimport { skodaAgThemeParams } from './agGridSkodaTheme';\nimport { agGridCssIcons, agGridIconsDefinition } from './agGridIcons';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport const agGridStyles = (theme: Theme): CSSObject => {\n const agTheme = skodaAgThemeParams(theme);\n\n return {\n width: '100%',\n // support applying global style on all elements maxWidth: '100%'\n '': {\n maxWidth: 'none',\n },\n // Apply CSS variables only for non-themed tables of the old versions of ag grid (old versions of ag-grid, <v33, themes does not have ag-theme-params- class)\n '&:not(:has([class=\"ag-theme-params-\"])),&.ag-theme-material': {\n ...agGridVariables(theme),\n },\n\n '.ag-row-last': { borderBottom: 'none' },\n '.ag-column-last .ag-header-cell-resize': { display: 'none' },\n\n // Row lines full width\n '.ag-center-cols-container': {\n minWidth: '100%',\n },\n\n '.ag-center-cols-viewport': {\n // reduce to 1 row from default 150px\n minHeight: '56px',\n },\n\n // # Header styles\n '& .ag-header-cell .ag-header-cell-text': {\n fontWeight: `${agTheme.headerFontWeight}`,\n },\n\n // # Header Separators (only when column resizing is not activated and not for the last column)\n '& .ag-header-cell:not(.ag-column-last) > .ag-header-cell-resize.ag-hidden': {\n display: 'block !important',\n cursor: 'initial',\n },\n\n // # Horizontal Scrollbar\n '& .ag-body-horizontal-scroll': {\n alignItems: 'center',\n px: '22px',\n borderTop: '1px solid',\n borderTopColor: theme.palette.surface.secondary,\n maxHeight: 'none !important',\n height: 'auto !important',\n },\n '& .ag-body-horizontal-scroll .ag-body-horizontal-scroll-viewport': {\n mt: '16px',\n mb: '23px',\n },\n '& .ag-body-horizontal-scroll.ag-invisible .ag-body-horizontal-scroll-viewport': {\n my: 0,\n },\n\n // # Pagination styles\n '& .ag-paging-panel': {\n justifyContent: 'center',\n px: '24px',\n },\n\n // Pagination layout - rows per page centered, arrows right-aligned\n '& .ag-paging-panel .ag-paging-page-size': {\n position: 'absolute',\n },\n '& .ag-paging-panel .ag-paging-page-summary-panel': {\n marginLeft: 'auto',\n },\n\n // Disable pagination summary\n '& .ag-paging-row-summary-panel': {\n display: 'none',\n },\n\n // Text styling within pagination arrows\n '& .ag-paging-description': {\n fontSize: '18px',\n px: '18px',\n },\n '& .ag-paging-panel .ag-paging-description span': {\n color: 'text.primary',\n px: '2px',\n },\n '& .ag-paging-panel .ag-paging-description .ag-paging-number': {\n fontWeight: '700',\n },\n '& .ag-paging-panel .ag-paging-description span:last-child': {\n fontWeight: '300',\n },\n\n // Disable AG-grid pagination icons - start, end\n '& .ag-paging-panel .ag-icon-first, & .ag-paging-panel .ag-icon-last': {\n display: 'none',\n },\n\n // Pagination - rows per page\n '& .ag-paging-panel .ag-picker-field-wrapper': {\n border: 'none',\n px: '0',\n cursor: 'pointer',\n minWidth: 'auto',\n },\n '& .ag-paging-panel .ag-picker-field-display': {\n minWidth: '28px',\n width: 'auto',\n pr: '6px',\n fontSize: '18px',\n fontWeight: '700',\n textAlign: 'center',\n },\n '& .ag-paging-panel .ag-label': {\n mr: '6px',\n fontSize: '18px',\n },\n\n '& .ag-popup > ': {\n backgroundColor: 'onSurface.os0',\n cursor: 'pointer',\n borderRadius: '0px',\n },\n\n // # Opt-in className=\"skoda-ag-pointer\"\n '& .skoda-ag-row-pointer .ag-row:hover': {\n cursor: 'pointer',\n },\n\n // Additional icons\n ...agGridCssIcons,\n\n // Show icons according to the SkodaFlow design\n '& .ag-icon-asc, & .ag-icon-desc': {\n color: theme.palette.onSurface.os600,\n },\n '& .ag-icon-asc:hover, & .ag-icon-desc:hover': {\n color: theme.palette.text.primary,\n },\n '& .ag-header-cell-sortable .ag-sort-indicator-container:has(.ag-sort-descending-icon.ag-hidden) .ag-hidden:has(.ag-icon-asc)':\n {\n display: 'inline-block !important', // Ag grid also uses !important so we have to override it\n },\n\n '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc::before': {\n content: '\"\"',\n display: 'flex',\n width: '17px',\n height: '17px',\n maskSize: 'contain',\n maskRepeat: 'no-repeat',\n maskPosition: 'center',\n verticalAlign: 'middle',\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.ascHover.svg)})`,\n },\n '& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before': {\n maskImage: `url(data:image/svg+xml;utf8,${encodeURIComponent(agGridIconsDefinition.asc.svg)})`,\n },\n\n // Legacy class approach, no theme\n fontFamily: agTheme.fontFamily,\n };\n};\n\ninterface SkodaAgGridProviderProps extends BoxProps {}\n\n/*\n A provider wrapper that applies Skoda AG Grid theming via sx.\n */\nexport const SkodaAgGridProvider: React.FC<SkodaAgGridProviderProps> = forwardRef(({ sx, children, ...rest }, ref) => {\n return (\n <Box\n sx={sxOverride(\n (theme) => ({\n ...agGridStyles(theme),\n }),\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Box>\n );\n});\n"],"names":["agGridStyles","theme","agTheme","skodaAgThemeParams","width","maxWidth","agGridVariables","borderBottom","display","minWidth","minHeight","fontWeight","headerFontWeight","cursor","alignItems","px","borderTop","borderTopColor","palette","surface","secondary","maxHeight","height","mt","mb","my","justifyContent","position","marginLeft","fontSize","color","border","pr","textAlign","mr","backgroundColor","borderRadius","agGridCssIcons","onSurface","os600","text","primary","content","maskSize","maskRepeat","maskPosition","verticalAlign","maskImage","encodeURIComponent","agGridIconsDefinition","ascHover","svg","asc","fontFamily","SkodaAgGridProvider","forwardRef","sx","children","rest","ref","_jsx","Box","sxOverride"],"mappings":"mPAOO,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAAA,mBAAmBF,GAEnC,MAAO,CACLG,MAAO,OAEP,IAAK,CACHC,SAAU,QAGZ,+DAAgE,IAC3DC,EAAAA,gBAAgBL,IAGrB,eAAgB,CAAEM,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGT,EAAQU,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,eAAgBhB,EAAMiB,QAAQC,QAAQC,UACtCC,UAAW,kBACXC,OAAQ,mBAEV,mEAAoE,CAClEC,GAAI,OACJC,GAAI,QAEN,gFAAiF,CAC/EC,GAAI,GAIN,qBAAsB,CACpBC,eAAgB,SAChBX,GAAI,QAIN,0CAA2C,CACzCY,SAAU,YAEZ,mDAAoD,CAClDC,WAAY,QAId,iCAAkC,CAChCpB,QAAS,QAIX,2BAA4B,CAC1BqB,SAAU,OACVd,GAAI,QAEN,iDAAkD,CAChDe,MAAO,eACPf,GAAI,OAEN,8DAA+D,CAC7DJ,WAAY,OAEd,4DAA6D,CAC3DA,WAAY,OAId,sEAAuE,CACrEH,QAAS,QAIX,8CAA+C,CAC7CuB,OAAQ,OACRhB,GAAI,IACJF,OAAQ,UACRJ,SAAU,QAEZ,8CAA+C,CAC7CA,SAAU,OACVL,MAAO,OACP4B,GAAI,MACJH,SAAU,OACVlB,WAAY,MACZsB,UAAW,UAEb,+BAAgC,CAC9BC,GAAI,MACJL,SAAU,QAGZ,kBAAmB,CACjBM,gBAAiB,gBACjBtB,OAAQ,UACRuB,aAAc,OAIhB,wCAAyC,CACvCvB,OAAQ,cAIPwB,EAAAA,eAGH,kCAAmC,CACjCP,MAAO7B,EAAMiB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO7B,EAAMiB,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAGb,6DAA8D,CAC5DkC,QAAS,KACTlC,QAAS,OACTJ,MAAO,OACPkB,OAAQ,OACRqB,SAAU,UACVC,WAAY,YACZC,aAAc,SACdC,cAAe,SACfC,UAAW,+BAA+BC,mBAAmBC,EAAAA,sBAAsBC,SAASC,SAE9F,mEAAoE,CAClEJ,UAAW,+BAA+BC,mBAAmBC,EAAAA,sBAAsBG,IAAID,SAIzFE,WAAYnD,EAAQmD,aASXC,EAA0DC,EAAAA,WAAW,EAAGC,KAAIC,cAAaC,GAAQC,IAE1GC,EAAAA,IAACC,EAAAA,IAAG,CACFL,GAAIM,EAAAA,WACD7D,IAAK,IACDD,EAAaC,KAElBuD,GAEFG,IAAKA,KACDD,EAAID,SAEPA"}

package/cjs/components/advancedTable/agGridSkodaTheme.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";exports.skodaAgThemeParams=e=>({fontFamily:"rtl"===e.direction?"SKODA Next R2L":"SKODA Next",fontSize:14,iconSize:17,backgroundColor:"transparent",foregroundColor:e.palette.text.primary,dataColor:e.palette.text.primary,headerForegroundColor:e.palette.text.primary,headerBackgroundColor:"transparent",subHeaderBackgroundColor:"transparent",subHeaderToolbarBackgroundColor:"transparent",secondaryForegroundColor:e.palette.onSurface.os500,disabledForegroundColor:e.palette.disabled.tertiary,checkboxCheckedColor:e.palette.brand.primary,checkboxIndeterminateColor:e.palette.brand.primary,rowHoverColor:e.palette.surface.primary,oddRowBackgroundColor:"transparent",rowBorderColor:e.palette.surface.secondary,selectedRowBackgroundColor:e.palette.surface.primary,headerFontSize:14,headerFontWeight:700,headerHeight:54,rowHeight:56,paginationPanelHeight:70,cellHorizontalPadding:16,cellVerticalPadding:4,rowVerticalPaddingScale:.04,borderRadius:8,headerColumnSeparatorColor:e.palette.surface.secondary,headerColumnResizeHandleColor:e.palette.surface.secondary,headerColumnSeparatorDisplay:"block",headerColumnResizeHandleDisplay:"block"});
+"use strict";var e=require("../../materialui/typography/typography.theme.js");exports.skodaAgThemeParams=r=>({fontFamily:e.getFontFamily("rtl"===r.direction),fontSize:14,iconSize:17,backgroundColor:"transparent",foregroundColor:r.palette.text.primary,dataColor:r.palette.text.primary,headerForegroundColor:r.palette.text.primary,headerBackgroundColor:"transparent",subHeaderBackgroundColor:"transparent",subHeaderToolbarBackgroundColor:"transparent",secondaryForegroundColor:r.palette.onSurface.os500,disabledForegroundColor:r.palette.disabled.tertiary,checkboxCheckedColor:r.palette.brand.primary,checkboxIndeterminateColor:r.palette.brand.primary,rowHoverColor:r.palette.surface.primary,oddRowBackgroundColor:"transparent",rowBorderColor:r.palette.surface.secondary,selectedRowBackgroundColor:r.palette.surface.primary,headerFontSize:14,headerFontWeight:700,headerHeight:54,rowHeight:56,paginationPanelHeight:70,cellHorizontalPadding:16,cellVerticalPadding:4,rowVerticalPaddingScale:.04,borderRadius:8,headerColumnSeparatorColor:r.palette.surface.secondary,headerColumnResizeHandleColor:r.palette.surface.secondary,headerColumnSeparatorDisplay:"block",headerColumnResizeHandleDisplay:"block"});
 //# sourceMappingURL=agGridSkodaTheme.js.map

package/cjs/components/advancedTable/agGridSkodaTheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agGridSkodaTheme.js","sources":["../../../../../src/components/advancedTable/agGridSkodaTheme.ts"],"sourcesContent":["import { Theme } from '@mui/material';\n\n/** AG Grid Theme parameters (replaces variables since AG Grid v32) */\nexport const skodaAgThemeParams = (theme: Theme) => ({\n // typography\n fontFamily: theme.direction === 'rtl' ~~? 'SKODA Next R2L' : 'SKODA Next'~~,\n fontSize: 14,\n iconSize: 17,\n\n // colors\n backgroundColor: 'transparent',\n foregroundColor: theme.palette.text.primary,\n dataColor: theme.palette.text.primary,\n headerForegroundColor: theme.palette.text.primary,\n headerBackgroundColor: 'transparent',\n subHeaderBackgroundColor: 'transparent',\n subHeaderToolbarBackgroundColor: 'transparent',\n secondaryForegroundColor: theme.palette.onSurface.os500,\n disabledForegroundColor: theme.palette.disabled.tertiary,\n checkboxCheckedColor: theme.palette.brand.primary,\n checkboxIndeterminateColor: theme.palette.brand.primary,\n\n // rows / hover / borders\n rowHoverColor: theme.palette.surface.primary,\n oddRowBackgroundColor: 'transparent',\n rowBorderColor: theme.palette.surface.secondary,\n selectedRowBackgroundColor: theme.palette.surface.primary,\n\n // sizing / spacing\n headerFontSize: 14,\n headerFontWeight: 700,\n headerHeight: 54,\n rowHeight: 56,\n paginationPanelHeight: 70,\n cellHorizontalPadding: 16,\n cellVerticalPadding: 4,\n rowVerticalPaddingScale: 0.04,\n borderRadius: 8,\n\n // header separators\n headerColumnSeparatorColor: theme.palette.surface.secondary,\n headerColumnResizeHandleColor: theme.palette.surface.secondary,\n headerColumnSeparatorDisplay: 'block',\n headerColumnResizeHandleDisplay: 'block',\n});\n"],"names":["theme","fontFamily","direction","fontSize","iconSize","backgroundColor","foregroundColor","palette","text","primary","dataColor","headerForegroundColor","headerBackgroundColor","subHeaderBackgroundColor","subHeaderToolbarBackgroundColor","secondaryForegroundColor","onSurface","os500","disabledForegroundColor","disabled","tertiary","checkboxCheckedColor","brand","checkboxIndeterminateColor","rowHoverColor","surface","oddRowBackgroundColor","rowBorderColor","secondary","selectedRowBackgroundColor","headerFontSize","headerFontWeight","headerHeight","rowHeight","paginationPanelHeight","cellHorizontalPadding","cellVerticalPadding","rowVerticalPaddingScale","borderRadius","headerColumnSeparatorColor","headerColumnResizeHandleColor","headerColumnSeparatorDisplay","headerColumnResizeHandleDisplay"],"mappings":"~~wCAGmCA~~,IAAY,CAE7CC,~~WAAgC~~,~~QAApBD~~,~~EAAME~~,~~UAAsB~~,~~iBAAmB~~,~~aAC3DC~~,SAAU,GACVC,SAAU,GAGVC,gBAAiB,cACjBC,~~gBAAiBN~~,~~EAAMO~~,QAAQC,KAAKC,QACpCC,~~UAAWV~~,~~EAAMO~~,QAAQC,KAAKC,QAC9BE,~~sBAAuBX~~,~~EAAMO~~,QAAQC,KAAKC,QAC1CG,sBAAuB,cACvBC,yBAA0B,cAC1BC,gCAAiC,cACjCC,~~yBAA0Bf~~,~~EAAMO~~,QAAQS,UAAUC,MAClDC,~~wBAAyBlB~~,~~EAAMO~~,QAAQY,SAASC,SAChDC,~~qBAAsBrB~~,~~EAAMO~~,QAAQe,MAAMb,QAC1Cc,~~2BAA4BvB~~,~~EAAMO~~,QAAQe,MAAMb,QAGhDe,~~cAAexB~~,~~EAAMO~~,QAAQkB,QAAQhB,QACrCiB,sBAAuB,cACvBC,~~eAAgB3B~~,~~EAAMO~~,QAAQkB,QAAQG,UACtCC,~~2BAA4B7B~~,~~EAAMO~~,QAAQkB,QAAQhB,QAGlDqB,eAAgB,GAChBC,iBAAkB,IAClBC,aAAc,GACdC,UAAW,GACXC,sBAAuB,GACvBC,sBAAuB,GACvBC,oBAAqB,EACrBC,wBAAyB,IACzBC,aAAc,EAGdC,~~2BAA4BvC~~,~~EAAMO~~,QAAQkB,QAAQG,UAClDY,8BAA+~~BxC~~,~~EAAMO~~,QAAQkB,QAAQG,UACrDa,6BAA8B,QAC9BC,gCAAiC"}
1	+ {"version":3,"file":"agGridSkodaTheme.js","sources":["../../../../../src/components/advancedTable/agGridSkodaTheme.ts"],"sourcesContent":["import { Theme } from '@mui/material';\nimport { getFontFamily } from '@/src/materialui/typography/typography.theme';\n\n/** AG Grid Theme parameters (replaces variables since AG Grid v32) */\nexport const skodaAgThemeParams = (theme: Theme) => ({\n // typography\n fontFamily: getFontFamily(theme.direction === 'rtl'),\n fontSize: 14,\n iconSize: 17,\n\n // colors\n backgroundColor: 'transparent',\n foregroundColor: theme.palette.text.primary,\n dataColor: theme.palette.text.primary,\n headerForegroundColor: theme.palette.text.primary,\n headerBackgroundColor: 'transparent',\n subHeaderBackgroundColor: 'transparent',\n subHeaderToolbarBackgroundColor: 'transparent',\n secondaryForegroundColor: theme.palette.onSurface.os500,\n disabledForegroundColor: theme.palette.disabled.tertiary,\n checkboxCheckedColor: theme.palette.brand.primary,\n checkboxIndeterminateColor: theme.palette.brand.primary,\n\n // rows / hover / borders\n rowHoverColor: theme.palette.surface.primary,\n oddRowBackgroundColor: 'transparent',\n rowBorderColor: theme.palette.surface.secondary,\n selectedRowBackgroundColor: theme.palette.surface.primary,\n\n // sizing / spacing\n headerFontSize: 14,\n headerFontWeight: 700,\n headerHeight: 54,\n rowHeight: 56,\n paginationPanelHeight: 70,\n cellHorizontalPadding: 16,\n cellVerticalPadding: 4,\n rowVerticalPaddingScale: 0.04,\n borderRadius: 8,\n\n // header separators\n headerColumnSeparatorColor: theme.palette.surface.secondary,\n headerColumnResizeHandleColor: theme.palette.surface.secondary,\n headerColumnSeparatorDisplay: 'block',\n headerColumnResizeHandleDisplay: 'block',\n});\n"],"names":["theme","fontFamily","getFontFamily","direction","fontSize","iconSize","backgroundColor","foregroundColor","palette","text","primary","dataColor","headerForegroundColor","headerBackgroundColor","subHeaderBackgroundColor","subHeaderToolbarBackgroundColor","secondaryForegroundColor","onSurface","os500","disabledForegroundColor","disabled","tertiary","checkboxCheckedColor","brand","checkboxIndeterminateColor","rowHoverColor","surface","oddRowBackgroundColor","rowBorderColor","secondary","selectedRowBackgroundColor","headerFontSize","headerFontWeight","headerHeight","rowHeight","paginationPanelHeight","cellHorizontalPadding","cellVerticalPadding","rowVerticalPaddingScale","borderRadius","headerColumnSeparatorColor","headerColumnResizeHandleColor","headerColumnSeparatorDisplay","headerColumnResizeHandleDisplay"],"mappings":"yGAImCA,IAAY,CAE7CC,WAAYC,EAAAA,cAAkC,QAApBF,EAAMG,WAChCC,SAAU,GACVC,SAAU,GAGVC,gBAAiB,cACjBC,gBAAiBP,EAAMQ,QAAQC,KAAKC,QACpCC,UAAWX,EAAMQ,QAAQC,KAAKC,QAC9BE,sBAAuBZ,EAAMQ,QAAQC,KAAKC,QAC1CG,sBAAuB,cACvBC,yBAA0B,cAC1BC,gCAAiC,cACjCC,yBAA0BhB,EAAMQ,QAAQS,UAAUC,MAClDC,wBAAyBnB,EAAMQ,QAAQY,SAASC,SAChDC,qBAAsBtB,EAAMQ,QAAQe,MAAMb,QAC1Cc,2BAA4BxB,EAAMQ,QAAQe,MAAMb,QAGhDe,cAAezB,EAAMQ,QAAQkB,QAAQhB,QACrCiB,sBAAuB,cACvBC,eAAgB5B,EAAMQ,QAAQkB,QAAQG,UACtCC,2BAA4B9B,EAAMQ,QAAQkB,QAAQhB,QAGlDqB,eAAgB,GAChBC,iBAAkB,IAClBC,aAAc,GACdC,UAAW,GACXC,sBAAuB,GACvBC,sBAAuB,GACvBC,oBAAqB,EACrBC,wBAAyB,IACzBC,aAAc,EAGdC,2BAA4BxC,EAAMQ,QAAQkB,QAAQG,UAClDY,8BAA+BzC,EAAMQ,QAAQkB,QAAQG,UACrDa,6BAA8B,QAC9BC,gCAAiC"}

package/cjs/components/banner/Banner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../icon/filled/CircleExclamationFilledIcon.js"),n=require("../icon/filled/CircleInformationFilledIcon.js"),i=require("../icon/filled/WarningFilledIcon.js"),t=require("@mui/material"),o=require("react"),a=require("../focusring/focusring.js");const l=o.forwardRef(({children:l,variant:s="info",size:c="large",sx:x,iconProps:d,IconComponent:p,typographyProps:f,wrapperProps:u,buttons:m,buttonsWrapperProps:g,onClick:h,...y},j)=>{const w=t.useTheme(),{sx:C,...I}=d??{},{sx:B,...b}=f??{},{sx:q,...F}=u??{},{sx:k,...v}=g??{},[S,P,W]=o.useMemo(()=>{switch(s){case"error":return["error.main","error.light",i.WarningFilledIcon];case"warning":return["warning.main","warning.light",r.CircleExclamationFilledIcon];default:return["info.main","info.light",n.CircleInformationFilledIcon]}},[s]),z=p??W;return e.jsxs(t.Box,{"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:h,sx:{display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===c?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:S,backgroundColor:"dark"===w.palette.mode?"onSurface.os900":P,textAlign:"left",...h&&{position:"relative",cursor:"pointer",...a.getFocusRingStyle(w,!0,"2px")},...x},ref:j,...y,children:[e.jsxs(t.Box,{"data-testid":"Banner.wrapper",sx:{flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5,...q},...F,children:[e.jsx(z,{"data-testid":"Banner.icon",sx:{color:S,...C},...I}),e.jsx(t.Typography,{"data-testid":"Banner.text",sx:{color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"},...B},...b,children:l})]}),m&&e.jsx(t.Box,{"data-testid":"Banner.buttons",sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end",...k},...v,children:m})]})});exports.Banner=l;
+"use strict";var e=require("react/jsx-runtime"),r=require("../icon/filled/CircleExclamationFilledIcon.js"),i=require("../icon/filled/CircleInformationFilledIcon.js"),n=require("../icon/filled/WarningFilledIcon.js"),t=require("@mui/material"),s=require("react"),o=require("../../utils/sxOverride/sxOverride.js"),a=require("../focusring/focusring.js");const l=s.forwardRef(({children:l,variant:x="info",size:c="large",sx:d,iconProps:p,IconComponent:f,typographyProps:u,wrapperProps:m,buttons:g,buttonsWrapperProps:h,onClick:j,...y},w)=>{const v=t.useTheme(),{sx:C,...I}=p??{},{sx:B,...b}=u??{},{sx:q,...F}=m??{},{sx:O,...k}=h??{},[S,P,W]=s.useMemo(()=>{switch(x){case"error":return["error.main","error.light",n.WarningFilledIcon];case"warning":return["warning.main","warning.light",r.CircleExclamationFilledIcon];default:return["info.main","info.light",i.CircleInformationFilledIcon]}},[x]),z=f??W;return e.jsxs(t.Box,{"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:j,sx:o.sxOverride({display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===c?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:S,backgroundColor:"dark"===v.palette.mode?"onSurface.os900":P,textAlign:"left",...j&&{position:"relative",cursor:"pointer",...a.getFocusRingStyle(v,!0,"2px")}},d),ref:w,...y,children:[e.jsxs(t.Box,{"data-testid":"Banner.wrapper",sx:o.sxOverride({flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5},q),...F,children:[e.jsx(z,{"data-testid":"Banner.icon",sx:o.sxOverride({color:S},C),...I}),e.jsx(t.Typography,{"data-testid":"Banner.text",sx:o.sxOverride({color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"}},B),...b,children:l})]}),g&&e.jsx(t.Box,{"data-testid":"Banner.buttons",sx:o.sxOverride({display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end"},O),...k,children:g})]})});exports.Banner=l;
 //# sourceMappingURL=Banner.js.map

package/cjs/components/banner/Banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.js","sources":["../../../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, ComponentType, forwardRef, ReactNode, useMemo } from 'react';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n /*\n Defines which variant of Banner component should be rendered\n * @default info\n /\n variant?: 'info' \| 'warning' \| 'error';\n /\n Set the proportions\n * @default large\n /\n size?: 'large' \| 'small';\n /\n Properties passed to indicator icon\n /\n iconProps?: SvgIconProps;\n /\n Icon node to be used\n /\n IconComponent?: ComponentType<SvgIconProps>;\n /\n Properties passed to wrapper of children\n /\n typographyProps?: TypographyProps<ElementType>;\n /\n Properties applied to wrapper of content (Icon and Typography)\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n /\n buttons?: ReactNode;\n /\n Properties applied to wrapper element of buttons\n /\n buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/\n Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n (\n {\n children,\n variant = 'info',\n size = 'large',\n sx,\n iconProps,\n IconComponent,\n typographyProps,\n wrapperProps,\n buttons,\n buttonsWrapperProps,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: iconSx, ...restIcon } = iconProps ?? {};\n const { sx: typographySx, ...restTypography } = typographyProps ?? {};\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps ?? {};\n\n const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n switch (variant) {\n case 'error':\n return ['error.main', 'error.light', WarningFilledIcon];\n case 'warning':\n return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n case 'info':\n default:\n return ['info.main', 'info.light', CircleInformationFilledIcon];\n }\n }, [variant]);\n const BannerIcon = IconComponent ?? IconVariantComponent;\n\n return (\n <Box\n data-testid=\"Banner\"\n role=\"alert\"\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n onClick={onClick}\n sx={{\n display: 'flex',\n width: '100%',\n // on mobile content and button bellow each other\n flexDirection: { xs: 'column', md: 'row' },\n alignItems: { xs: 'flex-start', md: 'center' },\n justifyContent: 'space-between',\n // proportions\n px: 2,\n py: size === 'small' ? 1 : { xs: 2, md: 1 },\n gap: 1,\n // style\n borderLeft: 6,\n borderColor: borderColor,\n backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n textAlign: 'left',\n // clickable style\n ...(onClick && {\n position: 'relative',\n cursor: 'pointer',\n // focused style\n ...getFocusRingStyle(theme, true, '2px'),\n }),\n ~~...~~sx,\n }}\n ref={ref}\n {...rest}\n >\n <Box\n data-testid=\"Banner.wrapper\"\n sx={{\n // align icon and content\n flexGrow: '1',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n gap: 1,\n py: 0.5,\n ~~...~~wrapperSx,\n }}\n {...restWrapper}\n >\n <BannerIcon\n data-testid=\"Banner.icon\"\n sx={{\n color: borderColor,\n ~~...~~iconSx,\n }}\n {...restIcon}\n />\n <Typography\n data-testid=\"Banner.text\"\n sx={{\n color: 'text.primary',\n flexGrow: '1',\n // custom font according to Figma\n fontSize: { xl: '16px' },\n lineHeight: { xl: '24px' },\n ~~...~~typographySx,\n }}\n {...restTypography}\n >\n {children}\n </Typography>\n </Box>\n {buttons && (\n <Box\n data-testid=\"Banner.buttons\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n // always show buttons next to each other\n flexShrink: '0',\n // on mobile align with text\n ml: { xs: 4, md: 0 },\n // on mobile move to the right side\n alignSelf: 'flex-end',\n ~~...~~buttonsWrapperSx,\n }}\n {...restButtonsWrapper}\n >\n {buttons}\n </Box>\n )}\n </Box>\n );\n },\n);\n"],"names":["Banner","forwardRef","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","ref","theme","useTheme","iconSx","restIcon","typographySx","restTypography","wrapperSx","restWrapper","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","role","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","flexGrow","_jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"~~4SA+CO~~,MAAMA,EAAgCC,EAAAA,WAC3C,EAEIC,WACAC,UAAU,OACVC,OAAO,QACPC,KACAC,YACAC,gBACAC,kBACAC,eACAC,UACAC,sBACAC,aACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNX,GAAIY,KAAWC,GAAaZ,GAAa,CAAA,GACzCD,GAAIc,KAAiBC,GAAmBZ,GAAmB,CAAA,GAC3DH,GAAIgB,KAAcC,GAAgBb,GAAgB,CAAA,GAClDJ,GAAIkB,KAAqBC,GAAuBb,GAAuB,CAAA,GAExEc,EAAaC,EAAiBC,GAAwBC,EAAAA,QAAQ,KACnE,OAAQzB,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe0B,qBACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,+BAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,iCAEtC,CAAC5B,IACE6B,EAAazB,GAAiBoB,EAEpC,OACEM,EAAAA,KAACC,EAAAA,~~mBACa~~,SACZC,KAAK,~~sBACO~~,OAAM,YACR,YACVvB,QAASA,EACTP,GAAI~~,CACF~~+B,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,~~UAATxC~~,EAAmB,EAAI,~~CAAEmC~~,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,~~EACZrB~~,YAAaA,EACbC,gBAAwC,SAAvBX,~~EAAMgC~~,QAAQC,KAAkB,~~kBAAoBtB~~,~~EACrEuB~~,UAAW,~~UAEPrC~~,GAAW,~~CACbsC~~,SAAU,WACVC,OAAQ,aAELC,~~oBAAkBrC~~,GAAO,EAAM,~~WAEjCV~~,~~GAELS~~,IAAKA,KACDD,EAAIX,SAAA,CAER+B,EAAAA,KAACC,~~MAAG~~,CAAA,cACU,iBACZ7B,GAAI,~~CAEFgD~~,SAAU,IACVjB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,~~MACDvB~~,~~MAEDC~~,~~YAEJgC~~,EAAAA,~~IAACtB~~,~~iBACa~~,cACZ3B,GAAI,~~CACFkD~~,~~MAAO9B~~,~~KACJR~~,~~MAEDC~~,~~IAENoC~~,EAAAA,IAACE,EAAAA,WAAU,CAAA,cACG,~~cACZnD~~,GAAI,~~CACFkD~~,MAAO,eACPF,SAAU,IAEVI,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,~~WACfvC~~,~~MAEDC~~,~~EAAclB~~,~~SAEjBA,~~OAGJQ,~~GACC4C~~,EAAAA,~~IAACpB~~,EAAAA,IAAG,CAAA,cACU,iBACZ7B,GAAI~~,CACF~~+B,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELe,WAAY,IAEZC,GAAI,CAAEtB,GAAI,EAAGC,GAAI,GAEjBsB,UAAW,~~cACRvC~~,~~MAEDC~~,EAAkBtB,SAErBQ"}
1	+ {"version":3,"file":"Banner.js","sources":["../../../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, ComponentType, forwardRef, ReactNode, useMemo } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n /*\n Defines which variant of Banner component should be rendered\n * @default info\n /\n variant?: 'info' \| 'warning' \| 'error';\n /\n Set the proportions\n * @default large\n /\n size?: 'large' \| 'small';\n /\n Properties passed to indicator icon\n /\n iconProps?: SvgIconProps;\n /\n Icon node to be used\n /\n IconComponent?: ComponentType<SvgIconProps>;\n /\n Properties passed to wrapper of children\n /\n typographyProps?: TypographyProps<ElementType>;\n /\n Properties applied to wrapper of content (Icon and Typography)\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n /\n buttons?: ReactNode;\n /\n Properties applied to wrapper element of buttons\n /\n buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/\n Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n (\n {\n children,\n variant = 'info',\n size = 'large',\n sx,\n iconProps,\n IconComponent,\n typographyProps,\n wrapperProps,\n buttons,\n buttonsWrapperProps,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: iconSx, ...restIcon } = iconProps ?? {};\n const { sx: typographySx, ...restTypography } = typographyProps ?? {};\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps ?? {};\n\n const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n switch (variant) {\n case 'error':\n return ['error.main', 'error.light', WarningFilledIcon];\n case 'warning':\n return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n case 'info':\n default:\n return ['info.main', 'info.light', CircleInformationFilledIcon];\n }\n }, [variant]);\n const BannerIcon = IconComponent ?? IconVariantComponent;\n\n return (\n <Box\n data-testid=\"Banner\"\n role=\"alert\"\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n onClick={onClick}\n sx={sxOverride(\n {\n display: 'flex',\n width: '100%',\n // on mobile content and button bellow each other\n flexDirection: { xs: 'column', md: 'row' },\n alignItems: { xs: 'flex-start', md: 'center' },\n justifyContent: 'space-between',\n // proportions\n px: 2,\n py: size === 'small' ? 1 : { xs: 2, md: 1 },\n gap: 1,\n // style\n borderLeft: 6,\n borderColor: borderColor,\n backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n textAlign: 'left',\n // clickable style\n ...(onClick && {\n position: 'relative',\n cursor: 'pointer',\n // focused style\n ...getFocusRingStyle(theme, true, '2px'),\n }),\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n <Box\n data-testid=\"Banner.wrapper\"\n sx={sxOverride(\n {\n // align icon and content\n flexGrow: '1',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n gap: 1,\n py: 0.5,\n },\n wrapperSx,\n )}\n {...restWrapper}\n >\n <BannerIcon\n data-testid=\"Banner.icon\"\n sx={sxOverride(\n {\n color: borderColor,\n },\n iconSx,\n )}\n {...restIcon}\n />\n <Typography\n data-testid=\"Banner.text\"\n sx={sxOverride(\n {\n color: 'text.primary',\n flexGrow: '1',\n // custom font according to Figma\n fontSize: { xl: '16px' },\n lineHeight: { xl: '24px' },\n },\n typographySx,\n )}\n {...restTypography}\n >\n {children}\n </Typography>\n </Box>\n {buttons && (\n <Box\n data-testid=\"Banner.buttons\"\n sx={sxOverride(\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n // always show buttons next to each other\n flexShrink: '0',\n // on mobile align with text\n ml: { xs: 4, md: 0 },\n // on mobile move to the right side\n alignSelf: 'flex-end',\n },\n buttonsWrapperSx,\n )}\n {...restButtonsWrapper}\n >\n {buttons}\n </Box>\n )}\n </Box>\n );\n },\n);\n"],"names":["Banner","forwardRef","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","ref","theme","useTheme","iconSx","restIcon","typographySx","restTypography","wrapperSx","restWrapper","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","role","sxOverride","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","flexGrow","_jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"8VAgDO,MAAMA,EAAgCC,EAAAA,WAC3C,EAEIC,WACAC,UAAU,OACVC,OAAO,QACPC,KACAC,YACAC,gBACAC,kBACAC,eACAC,UACAC,sBACAC,aACGC,GAELC,KAEA,MAAMC,EAAQC,EAAAA,YACNX,GAAIY,KAAWC,GAAaZ,GAAa,CAAA,GACzCD,GAAIc,KAAiBC,GAAmBZ,GAAmB,CAAA,GAC3DH,GAAIgB,KAAcC,GAAgBb,GAAgB,CAAA,GAClDJ,GAAIkB,KAAqBC,GAAuBb,GAAuB,CAAA,GAExEc,EAAaC,EAAiBC,GAAwBC,EAAAA,QAAQ,KACnE,OAAQzB,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe0B,qBACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,+BAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,iCAEtC,CAAC5B,IACE6B,EAAazB,GAAiBoB,EAEpC,OACEM,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,SACZC,KAAK,QAAO,cACA,OAAM,YACR,YACVvB,QAASA,EACTP,GAAI+B,aACF,CACEC,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAATzC,EAAmB,EAAI,CAAEoC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZtB,YAAaA,EACbC,gBAAwC,SAAvBX,EAAMiC,QAAQC,KAAkB,kBAAoBvB,EACrEwB,UAAW,UAEPtC,GAAW,CACbuC,SAAU,WACVC,OAAQ,aAELC,oBAAkBtC,GAAO,EAAM,SAGtCV,GAEFS,IAAKA,KACDD,EAAIX,SAAA,CAER+B,EAAAA,KAACC,EAAAA,IAAG,CAAA,cACU,iBACZ7B,GAAI+B,EAAAA,WACF,CAEEkB,SAAU,IACVjB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IAENxB,MAEEC,EAAWpB,SAAA,CAEfqD,EAAAA,IAACvB,EAAU,CAAA,cACG,cACZ3B,GAAI+B,EAAAA,WACF,CACEoB,MAAO/B,GAETR,MAEEC,IAENqC,EAAAA,IAACE,EAAAA,WAAU,CAAA,cACG,cACZpD,GAAI+B,EAAAA,WACF,CACEoB,MAAO,eACPF,SAAU,IAEVI,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SAEpBxC,MAEEC,WAEHlB,OAGJQ,GACC6C,EAAAA,IAACrB,EAAAA,IAAG,CAAA,cACU,iBACZ7B,GAAI+B,aACF,CACEC,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELe,WAAY,IAEZC,GAAI,CAAEtB,GAAI,EAAGC,GAAI,GAEjBsB,UAAW,YAEbxC,MAEEC,EAAkBtB,SAErBQ"}

package/cjs/components/bottomSheet/BottomSheet.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),o=require("@mui/material"),r=require("../icon/stroke/CloseIcon.js"),s=require("../../utils/useElementScrollable/useElementScrollable.js"),l=require("../focusring/focusring.js");const n=t.forwardRef(({children:t,open:n,setOpen:i,slotProps:a,puller:p,pullerWrapperProps:x,pullerProps:d,closeButton:c,closeButtonProps:u,closeButtonIconProps:h,CloseButtonIconComponent:m,footerSlot:f,title:b,titleProps:B={},headerWrapper:S,titleWrapper:j,contentWrapper:g,footerWrapper:C,maxHeight:w=60,...y},I)=>{const{sx:P,...R}=S??{},{sx:q,...T}=j??{},{sx:v,...W}=B??{},{sx:k,...D}=x??{},{sx:E,...O}=d??{},{sx:H,...M}=u??{},{sx:z,...F}=g??{},{sx:L,...$}=C??{},A=o.useTheme(),G=m||r.CloseIcon,{isScrollable:J,elementRef:K}=s.useElementScrollable("y");return e.jsxs(o.SwipeableDrawer,{dir:A.direction,anchor:"bottom",open:n,onClose:()=>i(!1),onOpen:()=>i(!0),disableSwipeToOpen:!0,ModalProps:{keepMounted:!0},"data-testid":"BottomSheet",slotProps:{...a,paper:{...a?.paper,sx:{boxShadow:"none",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",maxHeight:`${w}%`,...a?.paper?.sx}}},ref:I,...y,children:[(b||c||p)&&e.jsxs(o.Box,{sx:{px:2,...P},"data-testid":"BottomSheet-header",...R,children:[p&&e.jsx(o.Box,{sx:{position:"relative",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",...k},...D,children:e.jsx(o.Box,{"data-testid":"BottomSheet-puller",sx:{width:"28px",height:"4px",backgroundColor:"onSurface.os500",mt:1,mb:1.5,borderRadius:"8px",...E},...O})}),(b||c&&!p)&&e.jsxs(o.Box,{sx:{display:"flex",justifyContent:b?"space-between":"flex-end",alignItems:"flex-start",gap:1,pt:J&&p?1:0,...q},...T,children:[b&&e.jsx(o.Typography,{"data-testid":"BottomSheet-title",variant:"h4",component:"h2",sx:{mt:p?0:2,mb:J?2:0,...v},...W,children:b}),c&&!p&&e.jsx(o.IconButton,{"data-testid":"BottomSheet-closeButton",size:"medium",onClick:()=>i(!1),"aria-label":"Close bottom sheet",sx:{my:"4px",mr:"-6px",...H},...M,children:e.jsx(G,{...h})})]})]}),e.jsx(o.Box,{"data-testid":"BottomSheet-content",ref:K,sx:{overflow:"auto",borderTop:J?1:0,borderBottom:J&&f?1:0,borderColor:"surface.secondary",p:2,"&:focus-visible":{outline:"none",boxShadow:l.getFocusRingBoxShadow(A,!0)},...z},...F,children:t}),f&&e.jsx(o.Box,{"data-testid":"BottomSheet-footer",sx:{px:2,pt:3,pb:2,display:"flex",justifyContent:"flex-start",alignItems:"stretch",flexDirection:"column",gap:"16px",...L},...$,children:f})]})});exports.BottomSheet=n;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),o=require("@mui/material"),r=require("../icon/stroke/CloseIcon.js"),s=require("../../utils/useElementScrollable/useElementScrollable.js"),i=require("../focusring/focusring.js"),l=require("../../utils/sxOverride/sxOverride.js");const n=t.forwardRef(({children:t,open:n,setOpen:a,slotProps:x,puller:p,pullerWrapperProps:d,pullerProps:c,closeButton:u,closeButtonProps:h,closeButtonIconProps:m,CloseButtonIconComponent:f,footerSlot:b,title:B,titleProps:S={},headerWrapper:j,titleWrapper:v,contentWrapper:g,footerWrapper:O,maxHeight:w=60,...C},y)=>{const{sx:I,...P}=j??{},{sx:q,...R}=v??{},{sx:T,...W}=S??{},{sx:k,...D}=d??{},{sx:E,...H}=c??{},{sx:M,...z}=h??{},{sx:F,...L}=g??{},{sx:$,...A}=O??{},G=o.useTheme(),J=f||r.CloseIcon,{isScrollable:K,elementRef:N}=s.useElementScrollable("y");return e.jsxs(o.SwipeableDrawer,{dir:G.direction,anchor:"bottom",open:n,onClose:()=>a(!1),onOpen:()=>a(!0),disableSwipeToOpen:!0,ModalProps:{keepMounted:!0},"data-testid":"BottomSheet",slotProps:{...x,paper:{...x?.paper,sx:{boxShadow:"none",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",maxHeight:`${w}%`,...x?.paper?.sx}}},ref:y,...C,children:[(B||u||p)&&e.jsxs(o.Box,{sx:l.sxOverride({px:2},I),"data-testid":"BottomSheet-header",...P,children:[p&&e.jsx(o.Box,{sx:l.sxOverride({position:"relative",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},k),...D,children:e.jsx(o.Box,{"data-testid":"BottomSheet-puller",sx:l.sxOverride({width:"28px",height:"4px",backgroundColor:"onSurface.os500",mt:1,mb:1.5,borderRadius:"8px"},E),...H})}),(B||u&&!p)&&e.jsxs(o.Box,{sx:l.sxOverride({display:"flex",justifyContent:B?"space-between":"flex-end",alignItems:"flex-start",gap:1,pt:K&&p?1:0},q),...R,children:[B&&e.jsx(o.Typography,{"data-testid":"BottomSheet-title",variant:"h4",component:"h2",sx:l.sxOverride({mt:p?0:2,mb:K?2:0,overflow:"hidden"},T),...W,children:B}),u&&!p&&e.jsx(o.IconButton,{"data-testid":"BottomSheet-closeButton",size:"medium",onClick:()=>a(!1),"aria-label":"Close bottom sheet",sx:l.sxOverride({my:"4px",mr:"-6px"},M),...z,children:e.jsx(J,{...m})})]})]}),e.jsx(o.Box,{"data-testid":"BottomSheet-content",ref:N,sx:l.sxOverride({overflow:"auto",borderTop:K?1:0,borderBottom:K&&b?1:0,borderColor:"surface.secondary",p:2,"&:focus-visible":{outline:"none",boxShadow:i.getFocusRingBoxShadow(G,!0)}},F),...L,children:t}),b&&e.jsx(o.Box,{"data-testid":"BottomSheet-footer",sx:l.sxOverride({px:2,pt:3,pb:2,display:"flex",justifyContent:"flex-start",alignItems:"stretch",flexDirection:"column",gap:"16px"},$),...A,children:b})]})});exports.BottomSheet=n;
 //# sourceMappingURL=BottomSheet.js.map

package/cjs/components/bottomSheet/BottomSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.js","sources":["../../../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport {\n Box,\n BoxProps,\n IconButtonProps,\n SwipeableDrawer,\n SwipeableDrawerProps,\n IconButton,\n Typography,\n TypographyProps,\n useTheme,\n SvgIconProps,\n PaperProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingBoxShadow } from '@/src/components/focusring/focusring';\n\nexport interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' \| 'onOpen' \| 'title'> {\n /*\n Open state component flag\n /\n open: boolean;\n /\n Open state component function\n /\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n /\n Flag for displaying close button\n /\n closeButton?: boolean;\n /\n Props applied to closeButton IconButton\n /\n closeButtonProps?: Partial<IconButtonProps>;\n /\n Props applied to Icon in closeButton\n /\n closeButtonIconProps?: SvgIconProps;\n /\n Icon node to be used\n /\n CloseButtonIconComponent?: ComponentType<SvgIconProps>;\n /\n Flag for displaying bar that visualizes pulling function\n /\n puller?: boolean;\n /\n Props applied to wrapper of puller\n /\n pullerWrapperProps?: BoxProps<ElementType>;\n /\n Props applied to puller\n /\n pullerProps?: BoxProps<ElementType>;\n /\n Footer children slot\n /\n footerSlot?: React.ReactNode;\n /\n Text in header\n /\n title?: React.ReactNode;\n /\n Text props\n /\n titleProps?: TypographyProps<ElementType>;\n /\n Max height of whole component in percentages\n * @default 60\n /\n maxHeight?: number;\n /\n Wrapper of header\n /\n headerWrapper?: BoxProps<ElementType>;\n /\n Wrapper of title and close button\n /\n titleWrapper?: BoxProps<ElementType>;\n /\n Wrapper of content\n /\n contentWrapper?: BoxProps<ElementType>;\n /\n Wrapper of footer\n */\n footerWrapper?: BoxProps<ElementType>;\n}\n\nexport const BottomSheet: React.FC<BottomSheetProps> = forwardRef(\n (\n {\n children,\n open,\n setOpen,\n slotProps,\n puller,\n pullerWrapperProps,\n pullerProps,\n closeButton,\n closeButtonProps,\n closeButtonIconProps,\n CloseButtonIconComponent,\n footerSlot,\n title,\n titleProps = {},\n headerWrapper,\n titleWrapper,\n contentWrapper,\n footerWrapper,\n maxHeight = 60,\n ...rest\n },\n ref,\n ) => {\n const { sx: headerSx, ...restHeader } = headerWrapper ?? {};\n const { sx: titleWrapperSx, ...restTitleWrapper } = titleWrapper ?? {};\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: pullerWrapperSx, ...restPullerWrapper } = pullerWrapperProps ?? {};\n const { sx: pullerSx, ...restPuller } = pullerProps ?? {};\n const { sx: closeButtonSx, ...restCloseButton } = closeButtonProps ?? {};\n const { sx: contentSx, ...restContent } = contentWrapper ?? {};\n const { sx: footerSx, ...restFooter } = footerWrapper ?? {};\n const theme = useTheme();\n const BottomSheetCloseButtonIcon = CloseButtonIconComponent \|\| CloseIcon;\n\n const { isScrollable, elementRef } = useElementScrollable('y');\n\n return (\n <SwipeableDrawer\n dir={theme.direction}\n anchor=\"bottom\"\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n disableSwipeToOpen\n ModalProps={{\n keepMounted: true,\n }}\n data-testid=\"BottomSheet\"\n slotProps={{\n ...slotProps,\n paper: {\n ...slotProps?.paper,\n sx: {\n boxShadow: 'none',\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n maxHeight: `${maxHeight}%`,\n ...(slotProps?.paper as PaperProps)?.sx,\n },\n },\n }}\n ref={ref}\n {...rest}\n >\n {(title \|\| closeButton \|\| puller) && (\n <Box sx={{ px: 2, ...headerSx }} data-testid=\"BottomSheet-header\" {...restHeader}>\n {puller && (\n <Box\n sx={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n ...pullerWrapperSx,\n }}\n {...restPullerWrapper}\n >\n <Box\n data-testid=\"BottomSheet-puller\"\n sx={{\n width: '28px',\n height: '4px',\n backgroundColor: 'onSurface.os500',\n mt: 1,\n mb: 1.5,\n borderRadius: '8px',\n ...pullerSx,\n }}\n {...restPuller}\n />\n </Box>\n )}\n {(title \|\| (closeButton && !puller)) && (\n <Box\n sx={{\n display: 'flex',\n justifyContent: title ? 'space-between' : 'flex-end',\n alignItems: 'flex-start',\n gap: 1,\n pt: isScrollable && puller ? 1 : 0,\n ...titleWrapperSx,\n }}\n {...restTitleWrapper}\n >\n {title && (\n <Typography\n data-testid=\"BottomSheet-title\"\n variant=\"h4\"\n component=\"h2\"\n sx={{\n mt: puller ? 0 : 2,\n mb: isScrollable ? 2 : 0,\n ...titleSx,\n }}\n {...restTitle}\n >\n {title}\n </Typography>\n )}\n {closeButton && !puller && (\n <IconButton\n data-testid=\"BottomSheet-closeButton\"\n size=\"medium\"\n onClick={() => setOpen(false)}\n aria-label=\"Close bottom sheet\"\n sx={{\n my: '4px',\n mr: '-6px',\n ...closeButtonSx,\n }}\n {...restCloseButton}\n >\n <BottomSheetCloseButtonIcon {...closeButtonIconProps} />\n </IconButton>\n )}\n </Box>\n )}\n </Box>\n )}\n <Box\n data-testid=\"BottomSheet-content\"\n ref={elementRef}\n sx={{\n overflow: 'auto',\n borderTop: isScrollable ? 1 : 0,\n borderBottom: isScrollable && footerSlot ? 1 : 0,\n borderColor: 'surface.secondary',\n p: 2,\n // can be focused since scrollable\n '&:focus-visible': {\n outline: 'none',\n boxShadow: getFocusRingBoxShadow(theme, true),\n },\n ...contentSx,\n }}\n {...restContent}\n >\n {children}\n </Box>\n {footerSlot && (\n <Box\n data-testid=\"BottomSheet-footer\"\n sx={{\n px: 2,\n pt: 3,\n pb: 2,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n flexDirection: 'column',\n gap: '16px',\n ...footerSx,\n }}\n {...restFooter}\n >\n {footerSlot}\n </Box>\n )}\n </SwipeableDrawer>\n );\n },\n);\n"],"names":["BottomSheet","forwardRef","children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight","rest","ref","sx","headerSx","restHeader","titleWrapperSx","restTitleWrapper","titleSx","restTitle","pullerWrapperSx","restPullerWrapper","pullerSx","restPuller","closeButtonSx","restCloseButton","contentSx","restContent","footerSx","restFooter","theme","useTheme","BottomSheetCloseButtonIcon","CloseIcon","isScrollable","elementRef","useElementScrollable","_jsxs","SwipeableDrawer","dir","direction","anchor","onClose","onOpen","disableSwipeToOpen","ModalProps","keepMounted","paper","boxShadow","borderTopLeftRadius","borderTopRightRadius","Box","px","_jsx","position","display","flexDirection","justifyContent","alignItems","width","height","backgroundColor","mt","mb","borderRadius","gap","pt","Typography","variant","component","IconButton","size","onClick","my","mr","overflow","borderTop","borderBottom","borderColor","p","outline","getFocusRingBoxShadow","pb"],"mappings":"oPA0FO,MAAMA,EAA0CC,EAAAA,WACrD,EAEIC,WACAC,OACAC,UACAC,YACAC,SACAC,qBACAC,cACAC,cACAC,mBACAC,uBACAC,2BACAC,aACAC,QACAC,aAAa,CAAA,EACbC,gBACAC,eACAC,iBACAC,gBACAC,YAAY,MACTC,GAELC,KAEA,MAAQC,GAAIC,KAAaC,GAAeT,GAAiB,CAAA,GACjDO,GAAIG,KAAmBC,GAAqBV,GAAgB,CAAA,GAC5DM,GAAIK,KAAYC,GAAcd,GAAc,CAAA,GAC5CQ,GAAIO,KAAoBC,GAAsBxB,GAAsB,CAAA,GACpEgB,GAAIS,KAAaC,GAAezB,GAAe,CAAA,GAC/Ce,GAAIW,KAAkBC,GAAoBzB,GAAoB,CAAA,GAC9Da,GAAIa,KAAcC,GAAgBnB,GAAkB,CAAA,GACpDK,GAAIe,KAAaC,GAAepB,GAAiB,CAAA,EACnDqB,EAAQC,EAAAA,WACRC,EAA6B9B,GAA4B+B,EAAAA,WAEzDC,aAAEA,EAAYC,WAAEA,GAAeC,EAAAA,qBAAqB,KAE1D,OACEC,EAAAA,KAACC,mBACCC,IAAKT,EAAMU,UACXC,OAAO,SACPhD,KAAMA,EACNiD,QAAS,IAAMhD,GAAQ,GACvBiD,OAAQ,IAAMjD,GAAQ,GACtBkD,oBAAkB,EAClBC,WAAY,CACVC,aAAa,GACd,cACW,cACZnD,UAAW,IACNA,EACHoD,MAAO,IACFpD,GAAWoD,MACdlC,GAAI,CACFmC,UAAW,OACXC,oBAAqB,OACrBC,qBAAsB,OACtBxC,UAAW,GAAGA,QACVf,GAAWoD,OAAsBlC,MAI3CD,IAAKA,KACDD,EAAInB,SAAA,EAENY,GAASL,GAAeH,IACxByC,EAAAA,KAACc,EAAAA,KAAItC,GAAI,CAAEuC,GAAI,KAAMtC,iBAAwB,wBAAyBC,EAAUvB,SAAA,CAC7EI,GACCyD,EAAAA,IAACF,EAAAA,IAAG,CACFtC,GAAI,CACFyC,SAAU,WACVC,QAAS,OACTC,cAAe,MACfC,eAAgB,SAChBC,WAAY,YACTtC,MAEDC,WAEJgC,EAAAA,IAACF,EAAAA,mBACa,qBACZtC,GAAI,CACF8C,MAAO,OACPC,OAAQ,MACRC,gBAAiB,kBACjBC,GAAI,EACJC,GAAI,IACJC,aAAc,SACX1C,MAEDC,OAIRnB,GAAUL,IAAgBH,IAC1ByC,EAAAA,KAACc,EAAAA,IAAG,CACFtC,GAAI,CACF0C,QAAS,OACTE,eAAgBrD,EAAQ,gBAAkB,WAC1CsD,WAAY,aACZO,IAAK,EACLC,GAAIhC,GAAgBtC,EAAS,EAAI,KAC9BoB,MAEDC,EAAgBzB,SAAA,CAEnBY,GACCiD,EAAAA,IAACc,EAAAA,WAAU,CAAA,cACG,oBACZC,QAAQ,KACRC,UAAU,KACVxD,GAAI,CACFiD,GAAIlE,EAAS,EAAI,EACjBmE,GAAI7B,EAAe,EAAI,KACpBhB,MAEDC,EAAS3B,SAEZY,IAGJL,IAAgBH,GACfyD,EAAAA,IAACiB,4BACa,0BACZC,KAAK,SACLC,QAAS,IAAM9E,GAAQ,GAAM,aAClB,qBACXmB,GAAI,CACF4D,GAAI,MACJC,GAAI,UACDlD,MAEDC,EAAejC,SAEnB6D,MAACrB,EAA0B,IAAK/B,YAO5CoD,EAAAA,IAACF,EAAAA,IAAG,CAAA,cACU,sBACZvC,IAAKuB,EACLtB,GAAI,CACF8D,SAAU,OACVC,UAAW1C,EAAe,EAAI,EAC9B2C,aAAc3C,GAAgB/B,EAAa,EAAI,EAC/C2E,YAAa,oBACbC,EAAG,EAEH,kBAAmB,CACjBC,QAAS,OACThC,UAAWiC,EAAAA,sBAAsBnD,GAAO,OAEvCJ,MAEDC,EAAWnC,SAEdA,IAEFW,GACCkD,EAAAA,IAACF,MAAG,CAAA,cACU,qBACZtC,GAAI,CACFuC,GAAI,EACJc,GAAI,EACJgB,GAAI,EACJ3B,QAAS,OACTE,eAAgB,aAChBC,WAAY,UACZF,cAAe,SACfS,IAAK,UACFrC,MAEDC,EAAUrC,SAEbW"}
1	+ {"version":3,"file":"BottomSheet.js","sources":["../../../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import React, { ComponentType, ElementType, forwardRef } from 'react';\nimport {\n Box,\n BoxProps,\n IconButtonProps,\n SwipeableDrawer,\n SwipeableDrawerProps,\n IconButton,\n Typography,\n TypographyProps,\n useTheme,\n SvgIconProps,\n PaperProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingBoxShadow } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' \| 'onOpen' \| 'title'> {\n /*\n Open state component flag\n /\n open: boolean;\n /\n Open state component function\n /\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n /\n Flag for displaying close button\n /\n closeButton?: boolean;\n /\n Props applied to closeButton IconButton\n /\n closeButtonProps?: Partial<IconButtonProps>;\n /\n Props applied to Icon in closeButton\n /\n closeButtonIconProps?: SvgIconProps;\n /\n Icon node to be used\n /\n CloseButtonIconComponent?: ComponentType<SvgIconProps>;\n /\n Flag for displaying bar that visualizes pulling function\n /\n puller?: boolean;\n /\n Props applied to wrapper of puller\n /\n pullerWrapperProps?: BoxProps<ElementType>;\n /\n Props applied to puller\n /\n pullerProps?: BoxProps<ElementType>;\n /\n Footer children slot\n /\n footerSlot?: React.ReactNode;\n /\n Text in header\n /\n title?: React.ReactNode;\n /\n Text props\n /\n titleProps?: TypographyProps<ElementType>;\n /\n Max height of whole component in percentages\n * @default 60\n /\n maxHeight?: number;\n /\n Wrapper of header\n /\n headerWrapper?: BoxProps<ElementType>;\n /\n Wrapper of title and close button\n /\n titleWrapper?: BoxProps<ElementType>;\n /\n Wrapper of content\n /\n contentWrapper?: BoxProps<ElementType>;\n /\n Wrapper of footer\n */\n footerWrapper?: BoxProps<ElementType>;\n}\n\nexport const BottomSheet: React.FC<BottomSheetProps> = forwardRef(\n (\n {\n children,\n open,\n setOpen,\n slotProps,\n puller,\n pullerWrapperProps,\n pullerProps,\n closeButton,\n closeButtonProps,\n closeButtonIconProps,\n CloseButtonIconComponent,\n footerSlot,\n title,\n titleProps = {},\n headerWrapper,\n titleWrapper,\n contentWrapper,\n footerWrapper,\n maxHeight = 60,\n ...rest\n },\n ref,\n ) => {\n const { sx: headerSx, ...restHeader } = headerWrapper ?? {};\n const { sx: titleWrapperSx, ...restTitleWrapper } = titleWrapper ?? {};\n const { sx: titleSx, ...restTitle } = titleProps ?? {};\n const { sx: pullerWrapperSx, ...restPullerWrapper } = pullerWrapperProps ?? {};\n const { sx: pullerSx, ...restPuller } = pullerProps ?? {};\n const { sx: closeButtonSx, ...restCloseButton } = closeButtonProps ?? {};\n const { sx: contentSx, ...restContent } = contentWrapper ?? {};\n const { sx: footerSx, ...restFooter } = footerWrapper ?? {};\n const theme = useTheme();\n const BottomSheetCloseButtonIcon = CloseButtonIconComponent \|\| CloseIcon;\n\n const { isScrollable, elementRef } = useElementScrollable('y');\n\n return (\n <SwipeableDrawer\n dir={theme.direction}\n anchor=\"bottom\"\n open={open}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n disableSwipeToOpen\n ModalProps={{\n keepMounted: true,\n }}\n data-testid=\"BottomSheet\"\n slotProps={{\n ...slotProps,\n paper: {\n ...slotProps?.paper,\n sx: {\n boxShadow: 'none',\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n maxHeight: `${maxHeight}%`,\n ...(slotProps?.paper as PaperProps)?.sx,\n },\n },\n }}\n ref={ref}\n {...rest}\n >\n {(title \|\| closeButton \|\| puller) && (\n <Box sx={sxOverride({ px: 2 }, headerSx)} data-testid=\"BottomSheet-header\" {...restHeader}>\n {puller && (\n <Box\n sx={sxOverride(\n {\n position: 'relative',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n pullerWrapperSx,\n )}\n {...restPullerWrapper}\n >\n <Box\n data-testid=\"BottomSheet-puller\"\n sx={sxOverride(\n {\n width: '28px',\n height: '4px',\n backgroundColor: 'onSurface.os500',\n mt: 1,\n mb: 1.5,\n borderRadius: '8px',\n },\n pullerSx,\n )}\n {...restPuller}\n />\n </Box>\n )}\n {(title \|\| (closeButton && !puller)) && (\n <Box\n sx={sxOverride(\n {\n display: 'flex',\n justifyContent: title ? 'space-between' : 'flex-end',\n alignItems: 'flex-start',\n gap: 1,\n pt: isScrollable && puller ? 1 : 0,\n },\n titleWrapperSx,\n )}\n {...restTitleWrapper}\n >\n {title && (\n <Typography\n data-testid=\"BottomSheet-title\"\n variant=\"h4\"\n component=\"h2\"\n sx={sxOverride(\n {\n mt: puller ? 0 : 2,\n mb: isScrollable ? 2 : 0,\n overflow: 'hidden',\n },\n titleSx,\n )}\n {...restTitle}\n >\n {title}\n </Typography>\n )}\n {closeButton && !puller && (\n <IconButton\n data-testid=\"BottomSheet-closeButton\"\n size=\"medium\"\n onClick={() => setOpen(false)}\n aria-label=\"Close bottom sheet\"\n sx={sxOverride(\n {\n my: '4px',\n mr: '-6px',\n },\n closeButtonSx,\n )}\n {...restCloseButton}\n >\n <BottomSheetCloseButtonIcon {...closeButtonIconProps} />\n </IconButton>\n )}\n </Box>\n )}\n </Box>\n )}\n <Box\n data-testid=\"BottomSheet-content\"\n ref={elementRef}\n sx={sxOverride(\n {\n overflow: 'auto',\n borderTop: isScrollable ? 1 : 0,\n borderBottom: isScrollable && footerSlot ? 1 : 0,\n borderColor: 'surface.secondary',\n p: 2,\n // can be focused since scrollable\n '&:focus-visible': {\n outline: 'none',\n boxShadow: getFocusRingBoxShadow(theme, true),\n },\n },\n contentSx,\n )}\n {...restContent}\n >\n {children}\n </Box>\n {footerSlot && (\n <Box\n data-testid=\"BottomSheet-footer\"\n sx={sxOverride(\n {\n px: 2,\n pt: 3,\n pb: 2,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n flexDirection: 'column',\n gap: '16px',\n },\n footerSx,\n )}\n {...restFooter}\n >\n {footerSlot}\n </Box>\n )}\n </SwipeableDrawer>\n );\n },\n);\n"],"names":["BottomSheet","forwardRef","children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight","rest","ref","sx","headerSx","restHeader","titleWrapperSx","restTitleWrapper","titleSx","restTitle","pullerWrapperSx","restPullerWrapper","pullerSx","restPuller","closeButtonSx","restCloseButton","contentSx","restContent","footerSx","restFooter","theme","useTheme","BottomSheetCloseButtonIcon","CloseIcon","isScrollable","elementRef","useElementScrollable","_jsxs","SwipeableDrawer","dir","direction","anchor","onClose","onOpen","disableSwipeToOpen","ModalProps","keepMounted","paper","boxShadow","borderTopLeftRadius","borderTopRightRadius","Box","sxOverride","px","_jsx","position","display","flexDirection","justifyContent","alignItems","width","height","backgroundColor","mt","mb","borderRadius","gap","pt","Typography","variant","component","overflow","IconButton","size","onClick","my","mr","borderTop","borderBottom","borderColor","p","outline","getFocusRingBoxShadow","pb"],"mappings":"sSA2FO,MAAMA,EAA0CC,EAAAA,WACrD,EAEIC,WACAC,OACAC,UACAC,YACAC,SACAC,qBACAC,cACAC,cACAC,mBACAC,uBACAC,2BACAC,aACAC,QACAC,aAAa,CAAA,EACbC,gBACAC,eACAC,iBACAC,gBACAC,YAAY,MACTC,GAELC,KAEA,MAAQC,GAAIC,KAAaC,GAAeT,GAAiB,CAAA,GACjDO,GAAIG,KAAmBC,GAAqBV,GAAgB,CAAA,GAC5DM,GAAIK,KAAYC,GAAcd,GAAc,CAAA,GAC5CQ,GAAIO,KAAoBC,GAAsBxB,GAAsB,CAAA,GACpEgB,GAAIS,KAAaC,GAAezB,GAAe,CAAA,GAC/Ce,GAAIW,KAAkBC,GAAoBzB,GAAoB,CAAA,GAC9Da,GAAIa,KAAcC,GAAgBnB,GAAkB,CAAA,GACpDK,GAAIe,KAAaC,GAAepB,GAAiB,CAAA,EACnDqB,EAAQC,EAAAA,WACRC,EAA6B9B,GAA4B+B,EAAAA,WAEzDC,aAAEA,EAAYC,WAAEA,GAAeC,EAAAA,qBAAqB,KAE1D,OACEC,EAAAA,KAACC,mBACCC,IAAKT,EAAMU,UACXC,OAAO,SACPhD,KAAMA,EACNiD,QAAS,IAAMhD,GAAQ,GACvBiD,OAAQ,IAAMjD,GAAQ,GACtBkD,oBAAkB,EAClBC,WAAY,CACVC,aAAa,GACd,cACW,cACZnD,UAAW,IACNA,EACHoD,MAAO,IACFpD,GAAWoD,MACdlC,GAAI,CACFmC,UAAW,OACXC,oBAAqB,OACrBC,qBAAsB,OACtBxC,UAAW,GAAGA,QACVf,GAAWoD,OAAsBlC,MAI3CD,IAAKA,KACDD,EAAInB,SAAA,EAENY,GAASL,GAAeH,IACxByC,EAAAA,KAACc,EAAAA,IAAG,CAACtC,GAAIuC,EAAAA,WAAW,CAAEC,GAAI,GAAKvC,GAAS,cAAc,wBAAyBC,YAC5EnB,GACC0D,EAAAA,IAACH,EAAAA,KACCtC,GAAIuC,EAAAA,WACF,CACEG,SAAU,WACVC,QAAS,OACTC,cAAe,MACfC,eAAgB,SAChBC,WAAY,UAEdvC,MAEEC,EAAiB7B,SAErB8D,EAAAA,IAACH,EAAAA,IAAG,CAAA,cACU,qBACZtC,GAAIuC,EAAAA,WACF,CACEQ,MAAO,OACPC,OAAQ,MACRC,gBAAiB,kBACjBC,GAAI,EACJC,GAAI,IACJC,aAAc,OAEhB3C,MAEEC,OAIRnB,GAAUL,IAAgBH,IAC1ByC,EAAAA,KAACc,EAAAA,IAAG,CACFtC,GAAIuC,aACF,CACEI,QAAS,OACTE,eAAgBtD,EAAQ,gBAAkB,WAC1CuD,WAAY,aACZO,IAAK,EACLC,GAAIjC,GAAgBtC,EAAS,EAAI,GAEnCoB,MAEEC,EAAgBzB,SAAA,CAEnBY,GACCkD,EAAAA,IAACc,EAAAA,WAAU,CAAA,cACG,oBACZC,QAAQ,KACRC,UAAU,KACVzD,GAAIuC,aACF,CACEW,GAAInE,EAAS,EAAI,EACjBoE,GAAI9B,EAAe,EAAI,EACvBqC,SAAU,UAEZrD,MAEEC,EAAS3B,SAEZY,IAGJL,IAAgBH,GACf0D,EAAAA,IAACkB,EAAAA,WAAU,CAAA,cACG,0BACZC,KAAK,SACLC,QAAS,IAAMhF,GAAQ,GAAM,aAClB,qBACXmB,GAAIuC,EAAAA,WACF,CACEuB,GAAI,MACJC,GAAI,QAENpD,MAEEC,EAAejC,SAEnB8D,EAAAA,IAACtB,EAA0B,IAAK/B,YAO5CqD,EAAAA,IAACH,MAAG,CAAA,cACU,sBACZvC,IAAKuB,EACLtB,GAAIuC,EAAAA,WACF,CACEmB,SAAU,OACVM,UAAW3C,EAAe,EAAI,EAC9B4C,aAAc5C,GAAgB/B,EAAa,EAAI,EAC/C4E,YAAa,oBACbC,EAAG,EAEH,kBAAmB,CACjBC,QAAS,OACTjC,UAAWkC,EAAAA,sBAAsBpD,GAAO,KAG5CJ,MAEEC,EAAWnC,SAEdA,IAEFW,GACCmD,EAAAA,IAACH,EAAAA,IAAG,CAAA,cACU,qBACZtC,GAAIuC,EAAAA,WACF,CACEC,GAAI,EACJc,GAAI,EACJgB,GAAI,EACJ3B,QAAS,OACTE,eAAgB,aAChBC,WAAY,UACZF,cAAe,SACfS,IAAK,QAEPtC,MAEEC,EAAUrC,SAEbW"}

package/cjs/components/bypassBlock/BypassBlock.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("react-dom"),t=require("@mui/material"),i=require("../focusring/focusring.js");const n=r.forwardRef(({children:r,className:o,href:n="#",sx:c,replace:s=!1,active:l=!1,onClick:u,portalProps:d,...p},f)=>{const x=t.useTheme();return e.jsx(a,{disablePortal:!0,...d,children:e.jsx(t.ButtonBase,{tabIndex:0,component:"a",href:n,onClick:e=>{u?.(e),s&&(e.preventDefault(),document?.getElementById(n?.replace("#",""))?.scrollIntoView(!0))},className:l?["Mui-focusVisible",o].filter(Boolean).join(" "):o,sx:{position:"absolute",zIndex:`${x.zIndex.tooltip+100}`,top:"10px",width:"1px",height:"1px",margin:"-1px",clip:"rect(0 0 0 0)",overflow:"hidden",padding:"0",border:"none",whiteSpace:"nowrap",backgroundColor:"onSurface.os900",color:"onSurface.os0",borderRadius:"4px",...x.typography.body,"&.Mui-focusVisible":{...i.getFocusRingStyle(x,!1),padding:"8px 24px",width:"auto",height:"auto",overflow:"visible",clip:"unset",margin:"0",left:"10px"},...c},ref:f,...p,children:r})})});function a({children:e,container:t,disablePortal:i}){const[n]=r.useState(()=>document?.createElement("div"));return r.useEffect(()=>{const e=("function"==typeof t?t():t)||document?.body;return e&&n&&!i&&e.prepend(n),()=>{n&&!i&&n.remove()}},[]),n&&!i?o.createPortal(e,n):e}exports.BypassBlock=n;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("react-dom"),t=require("@mui/material"),i=require("../focusring/focusring.js"),n=require("../../utils/sxOverride/sxOverride.js");const s=r.forwardRef(({children:r,className:o,href:s="#",sx:c,replace:l=!1,active:u=!1,onClick:d,portalProps:p,...f},x)=>{const h=t.useTheme();return e.jsx(a,{disablePortal:!0,...p,children:e.jsx(t.ButtonBase,{tabIndex:0,component:"a",href:s,onClick:e=>{d?.(e),l&&(e.preventDefault(),document?.getElementById(s?.replace("#",""))?.scrollIntoView(!0))},className:u?["Mui-focusVisible",o].filter(Boolean).join(" "):o,sx:n.sxOverride({position:"absolute",zIndex:`${h.zIndex.tooltip+100}`,top:"10px",width:"1px",height:"1px",margin:"-1px",clip:"rect(0 0 0 0)",overflow:"hidden",padding:"0",border:"none",whiteSpace:"nowrap",backgroundColor:"onSurface.os900",color:"onSurface.os0",borderRadius:"4px",...h.typography.body,"&.Mui-focusVisible":{...i.getFocusRingStyle(h,!1),padding:"8px 24px",width:"auto",height:"auto",overflow:"visible",clip:"unset",margin:"0",left:"10px"}},c),ref:x,...f,children:r})})});function a({children:e,container:t,disablePortal:i}){const[n]=r.useState(()=>document?.createElement("div"));return r.useEffect(()=>{const e=("function"==typeof t?t():t)||document?.body;return e&&n&&!i&&e.prepend(n),()=>{n&&!i&&n.remove()}},[]),n&&!i?o.createPortal(e,n):e}exports.BypassBlock=s;
 //# sourceMappingURL=BypassBlock.js.map

package/cjs/components/bypassBlock/BypassBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BypassBlock.js","sources":["../../../../../src/components/bypassBlock/BypassBlock.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ButtonBase, ButtonBaseProps, PortalProps, useTheme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BypassBlockProps extends ButtonBaseProps<'a'> {\n /*\n Button label, e.g. 'Skip to content'\n /\n children: ReactNode;\n /\n ID of content section, e.g. '#content'\n * @default '#'\n /\n href: string;\n /\n Prevent push of new link into history stack\n * @default false\n /\n replace?: boolean;\n /\n Programmatically control if button should be visible\n * @default false\n /\n active?: boolean;\n /\n props applied to portal moving the button at the top\n /\n portalProps?: PortalProps;\n}\n\n/\n Accessibility button to quickly scroll into the content area.\n * - first focusable element on the page\n * - only visible when focused\n /\nexport const BypassBlock: React.FC<BypassBlockProps> = forwardRef(\n ({ children, className, href = '#', sx, replace = false, active = false, onClick, portalProps, ...rest }, ref) => {\n const theme = useTheme();\n\n return (\n <PrependPortal disablePortal={true} {...portalProps}>\n <ButtonBase\n tabIndex={0}\n component=\"a\"\n href={href}\n onClick={(e) => {\n onClick?.(e);\n if (replace) {\n // prevent push of # into url\n e.preventDefault();\n // use js to scroll into element\n document?.getElementById(href?.replace('#', ''))?.scrollIntoView(true);\n }\n }}\n className={active ? [`Mui-focusVisible`, className].filter(Boolean).join(' ') : className}\n sx={{\n position: 'absolute',\n zIndex: `${theme.zIndex.tooltip + 100}`,\n top: '10px',\n // hidden by default, still have to be at least 1px for the Safari focus\n width: '1px',\n height: '1px',\n margin: '-1px',\n clip: 'rect(0 0 0 0)',\n overflow: 'hidden',\n padding: '0',\n border: 'none',\n whiteSpace: 'nowrap',\n // style\n backgroundColor: 'onSurface.os900',\n color: 'onSurface.os0',\n borderRadius: '4px',\n ...theme.typography.body,\n // focus\n '&.Mui-focusVisible': {\n ...getFocusRingStyle(theme, false),\n padding: '8px 24px',\n width: 'auto',\n height: 'auto',\n overflow: 'visible',\n clip: 'unset',\n margin: '0',\n left: '10px',\n },\n ~~...~~sx,\n }}\n ref={ref}\n {...rest}\n >\n {children}\n </ButtonBase>\n </PrependPortal>\n );\n },\n);\n\n/\n Portal component that create extra div prepended instead of appended to the container.\n * This way element can be placed at the begging of container instead of at the end.\n */\nfunction PrependPortal({ children, container, disablePortal }: PortalProps) {\n const [portalContainer] = useState(() => document?.createElement('div'));\n\n useEffect(() => {\n // obtain proper container for placement (default body tag)\n const body = (typeof container === 'function' ? container() : container) \|\| document?.body;\n\n // prepend (add into begging) extra div into body\n body && portalContainer && !disablePortal && body.prepend(portalContainer);\n return () => {\n // remove div with unmount\n portalContainer && !disablePortal && portalContainer.remove();\n };\n }, []);\n\n // utilize createPortal to place children into container at the begging of body\n return portalContainer && !disablePortal ? createPortal(children, portalContainer) : children;\n}\n"],"names":["BypassBlock","forwardRef","children","className","href","sx","replace","active","onClick","portalProps","rest","ref","theme","useTheme","_jsx","PrependPortal","disablePortal","ButtonBase","tabIndex","component","e","preventDefault","document","getElementById","scrollIntoView","filter","Boolean","join","position","zIndex","tooltip","top","width","height","margin","clip","overflow","padding","border","whiteSpace","backgroundColor","color","borderRadius","typography","body","getFocusRingStyle","left","container","portalContainer","useState","createElement","useEffect","prepend","remove","createPortal"],"mappings":"~~4JAoCO~~,MAAMA,EAA0CC,EAAAA,WACrD,EAAGC,WAAUC,YAAWC,OAAO,IAAKC,KAAIC,WAAU,EAAOC,UAAS,EAAOC,UAASC,iBAAgBC,GAAQC,KACxG,MAAMC,EAAQC,EAAAA,WAEd,OACEC,EAAAA,IAACC,EAAa,CAACC,eAAe,KAAUP,EAAWP,SACjDY,MAACG,EAAAA,YACCC,SAAU,EACVC,UAAU,IACVf,KAAMA,EACNI,QAAUY,IACRZ,IAAUY,GACNd,IAEFc,EAAEC,iBAEFC,UAAUC,eAAenB,GAAME,QAAQ,IAAK,MAAMkB,gBAAe,KAGrErB,UAAWI,EAAS,CAAC,mBAAoBJ,GAAWsB,OAAOC,SAASC,KAAK,KAAOxB,EAChFE,~~GAAI~~,~~CACFuB~~,SAAU,WACVC,OAAQ,~~GAAGjB~~,~~EAAMiB~~,OAAOC,QAAU,MAClCC,IAAK,OAELC,MAAO,MACPC,OAAQ,MACRC,OAAQ,OACRC,KAAM,gBACNC,SAAU,SACVC,QAAS,IACTC,OAAQ,OACRC,WAAY,SAEZC,gBAAiB,kBACjBC,MAAO,gBACPC,aAAc,~~SACX9B,EAAM+~~B,WAAWC,KAEpB,qBAAsB,IACjBC,EAAAA,~~kBAAkBjC~~,GAAO,~~GAC5ByB~~,QAAS,WACTL,MAAO,OACPC,OAAQ,OACRG,SAAU,UACVD,KAAM,QACND,OAAQ,IACRY,KAAM,~~WAELzC~~,~~GAELM~~,IAAKA,KACDD,~~WAEHR~~,QAWX,SAASa,GAAcb,SAAEA,~~EAAQ6C~~,UAAEA,~~EAAS/B~~,cAAEA,IAC5C,~~MAAOgC~~,GAAmBC,EAAAA,SAAS,~~IAAM3B~~,~~UAAU4B~~,cAAc,QAejE,OAbAC,EAAAA,UAAU,KAER,MAAMP,GAA6B,mBAAdG,EAA2BA,IAAcA,~~IAAczB~~,~~UAAUsB~~,KAItF,OADAA,GAAQI,~~IAAoBhC~~,~~GAAiB4B~~,EAAKQ,QAAQJ,GACnD,KAELA,~~IAAoBhC~~,~~GAAiBgC~~,EAAgBK,WAEtD,IAGIL,~~IAAoBhC~~,~~EAAgBsC~~,EAAAA,~~aAAapD~~,~~EAAU8C~~,~~GAAmB9C~~,CACvF"}
1	+ {"version":3,"file":"BypassBlock.js","sources":["../../../../../src/components/bypassBlock/BypassBlock.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ButtonBase, ButtonBaseProps, PortalProps, useTheme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface BypassBlockProps extends ButtonBaseProps<'a'> {\n /*\n Button label, e.g. 'Skip to content'\n /\n children: ReactNode;\n /\n ID of content section, e.g. '#content'\n * @default '#'\n /\n href: string;\n /\n Prevent push of new link into history stack\n * @default false\n /\n replace?: boolean;\n /\n Programmatically control if button should be visible\n * @default false\n /\n active?: boolean;\n /\n props applied to portal moving the button at the top\n /\n portalProps?: PortalProps;\n}\n\n/\n Accessibility button to quickly scroll into the content area.\n * - first focusable element on the page\n * - only visible when focused\n /\nexport const BypassBlock: React.FC<BypassBlockProps> = forwardRef(\n ({ children, className, href = '#', sx, replace = false, active = false, onClick, portalProps, ...rest }, ref) => {\n const theme = useTheme();\n\n return (\n <PrependPortal disablePortal={true} {...portalProps}>\n <ButtonBase\n tabIndex={0}\n component=\"a\"\n href={href}\n onClick={(e) => {\n onClick?.(e);\n if (replace) {\n // prevent push of # into url\n e.preventDefault();\n // use js to scroll into element\n document?.getElementById(href?.replace('#', ''))?.scrollIntoView(true);\n }\n }}\n className={active ? [`Mui-focusVisible`, className].filter(Boolean).join(' ') : className}\n sx={sxOverride(\n {\n position: 'absolute',\n zIndex: `${theme.zIndex.tooltip + 100}`,\n top: '10px',\n // hidden by default, still have to be at least 1px for the Safari focus\n width: '1px',\n height: '1px',\n margin: '-1px',\n clip: 'rect(0 0 0 0)',\n overflow: 'hidden',\n padding: '0',\n border: 'none',\n whiteSpace: 'nowrap',\n // style\n backgroundColor: 'onSurface.os900',\n color: 'onSurface.os0',\n borderRadius: '4px',\n ...theme.typography.body,\n // focus\n '&.Mui-focusVisible': {\n ...getFocusRingStyle(theme, false),\n padding: '8px 24px',\n width: 'auto',\n height: 'auto',\n overflow: 'visible',\n clip: 'unset',\n margin: '0',\n left: '10px',\n },\n },\n sx,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </ButtonBase>\n </PrependPortal>\n );\n },\n);\n\n/\n Portal component that create extra div prepended instead of appended to the container.\n * This way element can be placed at the begging of container instead of at the end.\n */\nfunction PrependPortal({ children, container, disablePortal }: PortalProps) {\n const [portalContainer] = useState(() => document?.createElement('div'));\n\n useEffect(() => {\n // obtain proper container for placement (default body tag)\n const body = (typeof container === 'function' ? container() : container) \|\| document?.body;\n\n // prepend (add into begging) extra div into body\n body && portalContainer && !disablePortal && body.prepend(portalContainer);\n return () => {\n // remove div with unmount\n portalContainer && !disablePortal && portalContainer.remove();\n };\n }, []);\n\n // utilize createPortal to place children into container at the begging of body\n return portalContainer && !disablePortal ? createPortal(children, portalContainer) : children;\n}\n"],"names":["BypassBlock","forwardRef","children","className","href","sx","replace","active","onClick","portalProps","rest","ref","theme","useTheme","_jsx","PrependPortal","disablePortal","ButtonBase","tabIndex","component","e","preventDefault","document","getElementById","scrollIntoView","filter","Boolean","join","sxOverride","position","zIndex","tooltip","top","width","height","margin","clip","overflow","padding","border","whiteSpace","backgroundColor","color","borderRadius","typography","body","getFocusRingStyle","left","container","portalContainer","useState","createElement","useEffect","prepend","remove","createPortal"],"mappings":"8MAqCO,MAAMA,EAA0CC,EAAAA,WACrD,EAAGC,WAAUC,YAAWC,OAAO,IAAKC,KAAIC,WAAU,EAAOC,UAAS,EAAOC,UAASC,iBAAgBC,GAAQC,KACxG,MAAMC,EAAQC,EAAAA,WAEd,OACEC,EAAAA,IAACC,EAAa,CAACC,eAAe,KAAUP,EAAWP,SACjDY,MAACG,EAAAA,YACCC,SAAU,EACVC,UAAU,IACVf,KAAMA,EACNI,QAAUY,IACRZ,IAAUY,GACNd,IAEFc,EAAEC,iBAEFC,UAAUC,eAAenB,GAAME,QAAQ,IAAK,MAAMkB,gBAAe,KAGrErB,UAAWI,EAAS,CAAC,mBAAoBJ,GAAWsB,OAAOC,SAASC,KAAK,KAAOxB,EAChFE,GAAIuB,aACF,CACEC,SAAU,WACVC,OAAQ,GAAGlB,EAAMkB,OAAOC,QAAU,MAClCC,IAAK,OAELC,MAAO,MACPC,OAAQ,MACRC,OAAQ,OACRC,KAAM,gBACNC,SAAU,SACVC,QAAS,IACTC,OAAQ,OACRC,WAAY,SAEZC,gBAAiB,kBACjBC,MAAO,gBACPC,aAAc,SACX/B,EAAMgC,WAAWC,KAEpB,qBAAsB,IACjBC,EAAAA,kBAAkBlC,GAAO,GAC5B0B,QAAS,WACTL,MAAO,OACPC,OAAQ,OACRG,SAAU,UACVD,KAAM,QACND,OAAQ,IACRY,KAAM,SAGV1C,GAEFM,IAAKA,KACDD,EAAIR,SAEPA,QAWX,SAASa,GAAcb,SAAEA,EAAQ8C,UAAEA,EAAShC,cAAEA,IAC5C,MAAOiC,GAAmBC,EAAAA,SAAS,IAAM5B,UAAU6B,cAAc,QAejE,OAbAC,EAAAA,UAAU,KAER,MAAMP,GAA6B,mBAAdG,EAA2BA,IAAcA,IAAc1B,UAAUuB,KAItF,OADAA,GAAQI,IAAoBjC,GAAiB6B,EAAKQ,QAAQJ,GACnD,KAELA,IAAoBjC,GAAiBiC,EAAgBK,WAEtD,IAGIL,IAAoBjC,EAAgBuC,EAAAA,aAAarD,EAAU+C,GAAmB/C,CACvF"}

package/cjs/components/carousel/Autoplay.d.ts CHANGED Viewed

@@ -20,13 +20,18 @@ export interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children'
  * Spinner with autoplay progress value
  */
 export declare const CarouselAutoplayProgress: ({ carousel: carouselProp, sx, spinnerProps, position, ...rest }: CarouselAutoplayProgressProps) => import("react/jsx-runtime").JSX.Element;
-export interface CarouselAutoplayIconButtonProps extends Partial<PlayPauseButtonProps> {
+export interface CarouselAutoplayIconButtonProps extends Omit<Partial<PlayPauseButtonProps>, 'aria-label'> {
     /**
      * Optional Carousel instance from useCarouselInstance hook
      */
     carousel?: CarouselInstance;
+    /**
+     * Accessible label for the button. Accepts a plain string or a function called with the current playing state.
+     * @default (isPlaying) => isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay'
+     */
+    'aria-label'?: string | ((isPlaying: boolean) => string);
 }
 /**
  * IconButton controlling play/paused state of the autoplay
  */
-export declare function CarouselAutoplayIconButton({ carousel: carouselProp, ...rest }: CarouselAutoplayIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselAutoplayIconButton({ carousel: carouselProp, 'aria-label': ariaLabel, ...rest }: CarouselAutoplayIconButtonProps): import("react/jsx-runtime").JSX.Element;

package/cjs/components/carousel/Autoplay.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@mui/material"),t=require("./hooks.js"),s=require("../../node_modules/swiper/swiper-react.js"),u=require("react"),r=require("../playPauseButton/PlayPauseButton.js"),o=require("../progress/Spinner.js");exports.CarouselAutoplayIconButton=function({carousel:a,...s}){const o=t.useCarousel(),i=a||o,[l,n]=u.useState(0);return u.useEffect(()=>{i?.autoplay&&i.on("autoplayTimeLeft",(e,a,t)=>{n(e.autoplay.paused?0:Math.round(100-100*t))})},[!!i]),e.jsx(r.PlayPauseButton,{"aria-label":i?.autoplay?.running?"Pause carousel autoplay":"Play carousel autoplay",isPlaying:!!i?.autoplay?.running,progress:l,onClick:()=>{i?.autoplay?.[i?.autoplay?.running?"stop":"start"]()},...s})},exports.CarouselAutoplayProgress=({carousel:t,sx:r,spinnerProps:i,position:l="outside",...n})=>{const[p,y]=u.useState(0),c=s.useSwiper(),d=t||c;return u.useEffect(()=>{d?.autoplay&&d.on("autoplayTimeLeft",(e,a,t)=>{y(e.autoplay.paused?0:Math.round(100-100*t))})},[!!d]),e.jsx(a.Box,{sx:{position:"relative",display:"flex",m:2,..."inside"===l&&{position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0",m:2},...r},"data-testid":"CarouselAutoplayProgress",...n,children:e.jsx(o.Spinner,{value:p,...i})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),a=require("../../utils/sxOverride/sxOverride.js"),s=require("./hooks.js"),t=require("../../node_modules/swiper/swiper-react.js"),u=require("react"),o=require("../playPauseButton/PlayPauseButton.js"),i=require("../progress/Spinner.js");exports.CarouselAutoplayIconButton=function({carousel:r,"aria-label":a=e=>e?"Pause carousel autoplay":"Play carousel autoplay",...t}){const i=s.useCarousel(),l=r||i,[n,p]=u.useState(0),y=!!l?.autoplay?.running;return u.useEffect(()=>{l?.autoplay&&l.on("autoplayTimeLeft",(e,r,a)=>{p(e.autoplay.paused?0:Math.round(100-100*a))})},[!!l]),e.jsx(o.PlayPauseButton,{"aria-label":"function"==typeof a?a(y):a,isPlaying:y,progress:n,onClick:()=>{l?.autoplay?.[l?.autoplay?.running?"stop":"start"]()},...t})},exports.CarouselAutoplayProgress=({carousel:s,sx:o,spinnerProps:l,position:n="outside",...p})=>{const[y,c]=u.useState(0),d=t.useSwiper(),x=s||d;return u.useEffect(()=>{x?.autoplay&&x.on("autoplayTimeLeft",(e,r,a)=>{c(e.autoplay.paused?0:Math.round(100-100*a))})},[!!x]),e.jsx(r.Box,{sx:a.sxOverride({position:"relative",display:"flex",m:2,..."inside"===n&&{position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0",m:2}},o),"data-testid":"CarouselAutoplayProgress",...p,children:e.jsx(i.Spinner,{value:y,...l})})};
 //# sourceMappingURL=Autoplay.js.map

package/cjs/components/carousel/Autoplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Autoplay.js","sources":["../../../../../src/components/carousel/Autoplay.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState } from 'react';\nimport { PlayPauseButton, PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' \| 'position'> {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Progress Props\n /\n spinnerProps?: Omit<SpinnerProps, 'value'>;\n /\n Append style to wrapper box to change position of component\n /\n position?: 'outside' \| 'inside';\n}\n\n/\n Spinner with autoplay progress value\n /\nexport const CarouselAutoplayProgress = ({\n carousel: carouselProp,\n sx,\n spinnerProps,\n position = 'outside',\n ...rest\n}: CarouselAutoplayProgressProps) => {\n const [value, setValue] = useState<number>(0);\n const carouselHook = useSwiper();\n const carousel = carouselProp \|\| carouselHook;\n\n useEffect(() => {\n // attach listener that controls progress value based on swiper special event\n if (carousel?.autoplay) {\n carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage 100));\n });\n }\n }, [!!carousel]);\n\n return (\n <Box\n sx={{\n position: 'relative',\n display: 'flex',\n m: 2,\n ...(position === 'inside' && {\n position: 'absolute',\n zIndex: '90',\n bottom: '0',\n left: '0',\n right: '0',\n m: 2,\n }),\n ~~...~~sx,\n }}\n data-testid=\"CarouselAutoplayProgress\"\n {...rest}\n >\n <Spinner value={value} {...spinnerProps} />\n </Box>\n );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Partial<PlayPauseButtonProps> {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n}\n\n/\n IconButton controlling play/paused state of the autoplay\n /\nexport function CarouselAutoplayIconButton({ carousel: carouselProp, ...rest }: CarouselAutoplayIconButtonProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n const [value, setValue] = useState<number>(0);\n\n useEffect(() => {\n // attach listener that controls progress value based on swiper special event\n if (carousel?.autoplay) {\n carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage 100));\n });\n }\n }, [!!carousel]);\n\n return (\n <PlayPauseButton\n aria-label={~~carousel?.autoplay?.running~~ ? '~~Pause~~ ~~carousel~~ ~~autoplay'~~ : ~~'Play carousel autoplay'~~}\n isPlaying={~~!!carousel?.autoplay?.running~~}\n progress={value}\n onClick={() => {\n carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']();\n }}\n {...rest}\n />\n );\n}\n"],"names":["carousel","carouselProp","rest","carouselHook","useCarousel","value","setValue","useState","~~useEffect~~","~~autoplay~~","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","PlayPauseButton","~~running","isPlaying","~~progress","onClick","sx","spinnerProps","position","useSwiper","Box","display","m","zIndex","bottom","left","right","~~children","~~Spinner"],"mappings":"~~uSAgFM~~,~~UAAuCA~~,SAAUC,~~KAAiBC~~,~~IACtE~~,MAAMC,EAAeC,EAAAA,~~cACfJ~~,EAAWC,~~GAAgBE~~,GAC1BE,EAAOC,GAAYC,EAAAA,SAAiB,~~GAW3C~~,OATAC,EAAAA,UAAU,~~KAEJR~~,~~GAAUS~~,~~UACZT~~,~~EAASU~~,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,~~KACpDP~~,~~EAASK~~,~~EAASF~~,~~SAASK~~,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,~~GAAGb~~,~~IAGJiB~~,EAAAA,IAACC,EAAAA,gBAAe,CAAA,~~aACFlB~~,~~GAAUS~~,~~UAAUU~~,~~QAAU~~,~~0BAA4B~~,~~yBACtEC~~,~~YAAapB~~,~~GAAUS~~,~~UAAUU~~,~~QACjCE~~,~~SAAUhB,EACViB,~~QAAS,~~KACPtB~~,~~GAAUS~~,~~WAAWT~~,~~GAAUS~~,~~UAAUU~~,QAAU,OAAS,~~eAE1DjB~~,GAGV,~~mCA/EwC~~,~~EACtCF~~,SAAUC,~~EACVsB~~,KACAC,eACAC,WAAW,~~aACRvB~~,MAEH,MAAOG,EAAOC,GAAYC,EAAAA,SAAiB,GACrCJ,~~EAAeuB~~,EAAAA,~~YACf1B~~,EAAWC,~~GAAgBE~~,EAWjC,~~OATAK~~,EAAAA,UAAU,~~KAEJR~~,~~GAAUS~~,~~UACZT~~,~~EAASU~~,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,~~KACpDP~~,~~EAASK~~,~~EAASF~~,~~SAASK~~,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,~~GAAGb~~,~~IAGJiB~~,EAAAA,~~IAACU~~,~~MAAG~~,~~CACFJ~~,~~GAAI~~,~~CACFE~~,SAAU,~~WACVG~~,QAAS,OACTC,EAAG,KACc,~~WAAbJ~~,GAAyB,CAC3BA,SAAU,~~WACVK~~,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPJ,EAAG,~~MAEFN~~,~~GACJ~~,cACW,~~8BACRrB~~,~~EAAIgC~~,~~SAERjB~~,EAAAA,~~IAACkB~~,~~UAAO~~,~~CAAC9B,~~MAAOA,~~KAAWmB~~"}
1	+ {"version":3,"file":"Autoplay.js","sources":["../../../../../src/components/carousel/Autoplay.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState } from 'react';\nimport { PlayPauseButton, PlayPauseButtonProps } from '@/src/components/playPauseButton/PlayPauseButton';\nimport { Spinner, SpinnerProps } from '@/src/components/progress/Spinner';\n\nexport interface CarouselAutoplayProgressProps extends Omit<BoxProps, 'children' \| 'position'> {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Progress Props\n /\n spinnerProps?: Omit<SpinnerProps, 'value'>;\n /\n Append style to wrapper box to change position of component\n /\n position?: 'outside' \| 'inside';\n}\n\n/\n Spinner with autoplay progress value\n /\nexport const CarouselAutoplayProgress = ({\n carousel: carouselProp,\n sx,\n spinnerProps,\n position = 'outside',\n ...rest\n}: CarouselAutoplayProgressProps) => {\n const [value, setValue] = useState<number>(0);\n const carouselHook = useSwiper();\n const carousel = carouselProp \|\| carouselHook;\n\n useEffect(() => {\n // attach listener that controls progress value based on swiper special event\n if (carousel?.autoplay) {\n carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage 100));\n });\n }\n }, [!!carousel]);\n\n return (\n <Box\n sx={sxOverride(\n {\n position: 'relative',\n display: 'flex',\n m: 2,\n ...(position === 'inside' && {\n position: 'absolute',\n zIndex: '90',\n bottom: '0',\n left: '0',\n right: '0',\n m: 2,\n }),\n },\n sx,\n )}\n data-testid=\"CarouselAutoplayProgress\"\n {...rest}\n >\n <Spinner value={value} {...spinnerProps} />\n </Box>\n );\n};\n\nexport interface CarouselAutoplayIconButtonProps extends Omit<Partial<PlayPauseButtonProps>, 'aria-label'> {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Accessible label for the button. Accepts a plain string or a function called with the current playing state.\n * @default (isPlaying) => isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay'\n /\n 'aria-label'?: string \| ((isPlaying: boolean) => string);\n}\n\n/\n IconButton controlling play/paused state of the autoplay\n /\nexport function CarouselAutoplayIconButton({\n carousel: carouselProp,\n 'aria-label': ariaLabel = (isPlaying) => isPlaying ? 'Pause carousel autoplay' : 'Play carousel autoplay',\n ...rest\n}: CarouselAutoplayIconButtonProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n const [value, setValue] = useState<number>(0);\n const isPlaying = !!carousel?.autoplay?.running;\n\n useEffect(() => {\n // attach listener that controls progress value based on swiper special event\n if (carousel?.autoplay) {\n carousel.on('autoplayTimeLeft', (instance, _timeLeft, percentage) => {\n setValue(instance.autoplay.paused ? 0 : Math.round(100 - percentage 100));\n });\n }\n }, [!!carousel]);\n\n return (\n <PlayPauseButton\n aria-label={typeof ariaLabel === 'function' ? ariaLabel(isPlaying) : ariaLabel}\n isPlaying={isPlaying}\n progress={value}\n onClick={() => {\n carousel?.autoplay?.[carousel?.autoplay?.running ? 'stop' : 'start']();\n }}\n {...rest}\n />\n );\n}\n"],"names":["carousel","carouselProp","ariaLabel","isPlaying","rest","carouselHook","useCarousel","value","setValue","useState","autoplay","running","useEffect","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","PlayPauseButton","progress","onClick","sx","spinnerProps","position","useSwiper","Box","sxOverride","display","m","zIndex","bottom","left","right","Spinner"],"mappings":"yVAwFM,UACJA,SAAUC,EACV,aAAcC,EAAaC,GAAcA,EAAY,0BAA4B,4BAC9EC,IAEH,MAAMC,EAAeC,EAAAA,cACfN,EAAWC,GAAgBI,GAC1BE,EAAOC,GAAYC,EAAAA,SAAiB,GACrCN,IAAcH,GAAUU,UAAUC,QAWxC,OATAC,EAAAA,UAAU,KAEJZ,GAAUU,UACZV,EAASa,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDR,EAASM,EAASJ,SAASO,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGhB,IAGJoB,EAAAA,IAACC,EAAAA,gBAAe,CAAA,aACmB,mBAAdnB,EAA2BA,EAAUC,GAAaD,EACrEC,UAAWA,EACXmB,SAAUf,EACVgB,QAAS,KACPvB,GAAUU,WAAWV,GAAUU,UAAUC,QAAU,OAAS,eAE1DP,GAGV,mCA3FwC,EACtCJ,SAAUC,EACVuB,KACAC,eACAC,WAAW,aACRtB,MAEH,MAAOG,EAAOC,GAAYC,EAAAA,SAAiB,GACrCJ,EAAesB,EAAAA,YACf3B,EAAWC,GAAgBI,EAWjC,OATAO,EAAAA,UAAU,KAEJZ,GAAUU,UACZV,EAASa,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDR,EAASM,EAASJ,SAASO,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGhB,IAGJoB,MAACQ,EAAAA,KACCJ,GAAIK,EAAAA,WACF,CACEH,SAAU,WACVI,QAAS,OACTC,EAAG,KACc,WAAbL,GAAyB,CAC3BA,SAAU,WACVM,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPJ,EAAG,IAGPP,GACD,cACW,8BACRpB,WAEJgB,EAAAA,IAACgB,EAAAA,QAAO,CAAC7B,MAAOA,KAAWkB"}

package/cjs/components/carousel/Carousel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("@mui/material"),t=require("../../node_modules/swiper/swiper-react.js"),a=require("../../node_modules/swiper/modules/keyboard.js"),n=require("../../node_modules/swiper/modules/parallax.js"),s=require("../../node_modules/swiper/modules/autoplay.js"),o=require("../../node_modules/swiper/modules/effect-fade.js");const p=i.forwardRef(({children:i,sx:p,onInit:l,effect:d,autoplay:u,parallax:w,peekDistance:c=100,peekSpeed:f=150,...m},x)=>e.jsx(r.Box,{component:t.Swiper,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[a.default,..."fade"===d?[o.default]:[],...u?[s.default]:[],...w?[n.default]:[]],parallax:w,effect:d,autoplay:u,ref:x,...m,onSwiper:l,"data-peekspeed":f,sx:{display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:e=>e.zIndex.carousel,overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:e=>e.zIndex.carousel,display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"},..."fade"!==d&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${f}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${c}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${c}px, 0, 0)`}},".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"},...p},children:i}));exports.Carousel=p;
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),a=require("../../node_modules/swiper/swiper-react.js"),s=require("../../node_modules/swiper/modules/keyboard.js"),n=require("../../node_modules/swiper/modules/parallax.js"),o=require("../../node_modules/swiper/modules/autoplay.js"),p=require("../../node_modules/swiper/modules/effect-fade.js");const l=i.forwardRef(({children:i,sx:l,onInit:d,effect:u,autoplay:w,parallax:c,peekDistance:f=100,peekSpeed:m=150,...x},h)=>e.jsx(r.Box,{component:a.Swiper,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[s.default,..."fade"===u?[p.default]:[],...w?[o.default]:[],...c?[n.default]:[]],parallax:c,effect:u,autoplay:w,ref:h,...x,onSwiper:d,"data-peekspeed":m,sx:t.sxOverride({display:"block",ml:"auto",mr:"auto",p:"0",maxWidth:"100%",position:"relative",zIndex:e=>e.zIndex.carousel,overflow:"hidden",listStyle:"none","&.swiper-horizontal":{touchAction:"pan-y"},"&.swiper-vertical":{touchAction:"pan-x","& > .swiper-wrapper":{flexDirection:"column"}},"&.swiper-autoheight":{height:"auto","& > .swiper-wrapper":{alignItems:"flex-start",transitionProperty:"transform, height"}},"& .swiper-wrapper":{position:"relative",width:"100%",height:"100%",zIndex:e=>e.zIndex.carousel,display:"flex",transitionProperty:"transform",transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)",boxSizing:"content-box",transform:"translate3d(0px, 0, 0)"},..."fade"!==u&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${m}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${f}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${f}px, 0, 0)`}},".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}},l),children:i}));exports.Carousel=l;
 //# sourceMappingURL=Carousel.js.map

package/cjs/components/carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","sources":["../../../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport { Keyboard, EffectFade, Autoplay, Parallax } from 'swiper/modules';\n\nexport interface CarouselProps\n // `cssMode` not supported\n // instead of `navigation` use <CarouselNavigation />\n // instead of `pagination` use <CarouselPagination />\n // instead of `onSwiper` use `onInit`\n extends\n Omit<SwiperProps, 'children' \| 'cssMode' \| 'navigation' \| 'pagination' \| 'onSwiper'>,\n Omit<BoxProps, keyof Omit<SwiperProps, 'children'> \| 'component'> {\n /*\n Callback that receives Swiper instance\n /\n onInit?: SwiperProps['onSwiper'];\n /\n Travelled distance in px for peek effect\n * @default 100\n /\n peekDistance?: number;\n /\n Speed of peek effect\n * @default 150 (half of default Carousel's speed)\n /\n peekSpeed?: number;\n}\n\n/\n Modern mobile friendly carousel for slideshows, built with Swiper\n */\nexport const Carousel: React.FC<CarouselProps> = forwardRef(\n ({ children, sx, onInit, effect, autoplay, parallax, peekDistance = 100, peekSpeed = 150, ...rest }, ref) => {\n return (\n <Box\n component={Swiper}\n spaceBetween={0}\n autoHeight\n loop\n keyboard={{\n enabled: true,\n }}\n modules={[\n Keyboard,\n ...(effect === 'fade' ? [EffectFade] : []),\n ...(autoplay ? [Autoplay] : []),\n ...(parallax ? [Parallax] : []),\n ]}\n parallax={parallax}\n effect={effect}\n autoplay={autoplay}\n ref={ref}\n {...rest}\n onSwiper={onInit}\n data-peekspeed={peekSpeed}\n sx={{\n // generic root styling, based on the `import 'swiper/css'`\n display: 'block',\n ml: 'auto',\n mr: 'auto',\n p: '0',\n maxWidth: '100%',\n // ensure correct position\n position: 'relative',\n zIndex: (theme) => theme.zIndex.carousel,\n overflow: 'hidden',\n // support for ul-type\n listStyle: 'none',\n // variants\n '&.swiper-horizontal': {\n touchAction: 'pan-y',\n },\n '&.swiper-vertical': {\n touchAction: 'pan-x',\n '& > .swiper-wrapper': {\n flexDirection: 'column',\n },\n },\n '&.swiper-autoheight': {\n height: 'auto',\n '& > .swiper-wrapper': {\n alignItems: 'flex-start',\n transitionProperty: 'transform, height',\n },\n },\n // wrapper of all slides\n '& .swiper-wrapper': {\n position: 'relative',\n width: '100%',\n height: '100%',\n zIndex: (theme) => theme.zIndex.carousel,\n display: 'flex',\n transitionProperty: 'transform',\n transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n boxSizing: 'content-box',\n transform: 'translate3d(0px, 0, 0)',\n },\n // peek effect\n ...(effect !== 'fade' && {\n '&.peeking .swiper-wrapper > .swiper-slide': {\n transitionProperty: 'transform',\n transitionDuration: `${peekSpeed}ms`,\n transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n },\n '&.peek-next .swiper-wrapper > .swiper-slide': {\n transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '' : '-'}${peekDistance}px, 0, 0)`,\n },\n '&.peek-prev .swiper-wrapper > .swiper-slide': {\n transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '-' : ''}${peekDistance}px, 0, 0)`,\n },\n }),\n // swiper internal\n '.swiper-slide-invisible-blank': {\n visibility: 'hidden',\n },\n '.swiper-backface-hidden .swiper-slide': {\n transform: 'translateZ(0)',\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n },\n // does not include CSS Mode, 3D Shadows, lazy loading\n ~~...~~sx,\n }}\n >\n {children}\n </Box>\n );\n },\n);\n"],"names":["Carousel","forwardRef","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","ref","_jsx","Box","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","EffectFade","Autoplay","Parallax","onSwiper","display","ml","mr","p","maxWidth","position","zIndex","theme","carousel","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"~~oYAgCO~~,MAAMA,EAAoCC,EAAAA,WAC/C,EAAGC,WAAUC,KAAIC,SAAQC,SAAMC,SAAEA,EAAQC,SAAEA,EAAUC,eAAe,IAAKC,YAAY,OAAQC,GAAQC,IAEjGC,MAACC,EAAAA,IAAG,CACFC,UAAWC,EAAAA,OACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,EAAAA,WACe,SAAXjB,EAAoB,CAACkB,EAAAA,SAAc,MACnCjB,EAAW,CAACkB,WAAY,MACxBjB,EAAW,CAACkB,WAAY,IAE9BlB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVK,IAAKA,KACDD,EACJgB,SAAUtB,EAAM,iBACAK,EAChBN,~~GAAI~~,~~CAEFwB~~,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAASC,GAAUA,EAAMD,OAAOE,SAChCC,SAAU,SAEVC,UAAW,OAEX,sBAAuB,CACrBC,YAAa,SAEf,oBAAqB,CACnBA,YAAa,QACb,sBAAuB,CACrBC,cAAe,WAGnB,sBAAuB,CACrBC,OAAQ,OACR,sBAAuB,CACrBC,WAAY,aACZC,mBAAoB,sBAIxB,oBAAqB,CACnBV,SAAU,WACVW,MAAO,OACPH,OAAQ,OACRP,OAASC,GAAUA,EAAMD,OAAOE,SAChCR,QAAS,OACTe,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,6BAGE,~~SAAXzC~~,GAAqB,CACvB,4CAA6C,~~CAC3CqC~~,mBAAoB,YACpBK,mBAAoB,~~GAAGtC~~,~~MACvBmC~~,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,GAAK,~~MAAMxC~~,cAE9E,8CAA+C,~~CAC7CsC~~,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,IAAM,~~KAAKxC~~,eAIhF,gCAAiC,CAC/~~ByC~~,WAAY,UAEd,wCAAyC,CACvCH,UAAW,gBACXI,yBAA0B,SAC1BC,mBAAoB,~~aAGnBhD~~,~~GACJD~~,SAEAA"}
1	+ {"version":3,"file":"Carousel.js","sources":["../../../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { Swiper, SwiperProps } from 'swiper/react';\nimport { Keyboard, EffectFade, Autoplay, Parallax } from 'swiper/modules';\n\nexport interface CarouselProps\n // `cssMode` not supported\n // instead of `navigation` use <CarouselNavigation />\n // instead of `pagination` use <CarouselPagination />\n // instead of `onSwiper` use `onInit`\n extends\n Omit<SwiperProps, 'children' \| 'cssMode' \| 'navigation' \| 'pagination' \| 'onSwiper'>,\n Omit<BoxProps, keyof Omit<SwiperProps, 'children'> \| 'component'> {\n /*\n Callback that receives Swiper instance\n /\n onInit?: SwiperProps['onSwiper'];\n /\n Travelled distance in px for peek effect\n * @default 100\n /\n peekDistance?: number;\n /\n Speed of peek effect\n * @default 150 (half of default Carousel's speed)\n /\n peekSpeed?: number;\n}\n\n/\n Modern mobile friendly carousel for slideshows, built with Swiper\n */\nexport const Carousel: React.FC<CarouselProps> = forwardRef(\n ({ children, sx, onInit, effect, autoplay, parallax, peekDistance = 100, peekSpeed = 150, ...rest }, ref) => {\n return (\n <Box\n component={Swiper}\n spaceBetween={0}\n autoHeight\n loop\n keyboard={{\n enabled: true,\n }}\n modules={[\n Keyboard,\n ...(effect === 'fade' ? [EffectFade] : []),\n ...(autoplay ? [Autoplay] : []),\n ...(parallax ? [Parallax] : []),\n ]}\n parallax={parallax}\n effect={effect}\n autoplay={autoplay}\n ref={ref}\n {...rest}\n onSwiper={onInit}\n data-peekspeed={peekSpeed}\n sx={sxOverride(\n {\n // generic root styling, based on the `import 'swiper/css'`\n display: 'block',\n ml: 'auto',\n mr: 'auto',\n p: '0',\n maxWidth: '100%',\n // ensure correct position\n position: 'relative',\n zIndex: (theme) => theme.zIndex.carousel,\n overflow: 'hidden',\n // support for ul-type\n listStyle: 'none',\n // variants\n '&.swiper-horizontal': {\n touchAction: 'pan-y',\n },\n '&.swiper-vertical': {\n touchAction: 'pan-x',\n '& > .swiper-wrapper': {\n flexDirection: 'column',\n },\n },\n '&.swiper-autoheight': {\n height: 'auto',\n '& > .swiper-wrapper': {\n alignItems: 'flex-start',\n transitionProperty: 'transform, height',\n },\n },\n // wrapper of all slides\n '& .swiper-wrapper': {\n position: 'relative',\n width: '100%',\n height: '100%',\n zIndex: (theme) => theme.zIndex.carousel,\n display: 'flex',\n transitionProperty: 'transform',\n transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n boxSizing: 'content-box',\n transform: 'translate3d(0px, 0, 0)',\n },\n // peek effect\n ...(effect !== 'fade' && {\n '&.peeking .swiper-wrapper > .swiper-slide': {\n transitionProperty: 'transform',\n transitionDuration: `${peekSpeed}ms`,\n transitionTimingFunction: 'var(--swiper-wrapper-transition-timing-function, initial)',\n },\n '&.peek-next .swiper-wrapper > .swiper-slide': {\n transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '' : '-'}${peekDistance}px, 0, 0)`,\n },\n '&.peek-prev .swiper-wrapper > .swiper-slide': {\n transform: (theme) => `translate3D(${theme.direction === 'rtl' ? '-' : ''}${peekDistance}px, 0, 0)`,\n },\n }),\n // swiper internal\n '.swiper-slide-invisible-blank': {\n visibility: 'hidden',\n },\n '.swiper-backface-hidden .swiper-slide': {\n transform: 'translateZ(0)',\n WebkitBackfaceVisibility: 'hidden',\n backfaceVisibility: 'hidden',\n },\n // does not include CSS Mode, 3D Shadows, lazy loading\n },\n sx,\n )}\n >\n {children}\n </Box>\n );\n },\n);\n"],"names":["Carousel","forwardRef","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","ref","_jsx","Box","component","Swiper","spaceBetween","autoHeight","loop","keyboard","enabled","modules","Keyboard","EffectFade","Autoplay","Parallax","onSwiper","sxOverride","display","ml","mr","p","maxWidth","position","zIndex","theme","carousel","overflow","listStyle","touchAction","flexDirection","height","alignItems","transitionProperty","width","transitionTimingFunction","boxSizing","transform","transitionDuration","direction","visibility","WebkitBackfaceVisibility","backfaceVisibility"],"mappings":"sbAiCO,MAAMA,EAAoCC,EAAAA,WAC/C,EAAGC,WAAUC,KAAIC,SAAQC,SAAMC,SAAEA,EAAQC,SAAEA,EAAUC,eAAe,IAAKC,YAAY,OAAQC,GAAQC,IAEjGC,MAACC,EAAAA,IAAG,CACFC,UAAWC,EAAAA,OACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,EAAAA,WACe,SAAXjB,EAAoB,CAACkB,EAAAA,SAAc,MACnCjB,EAAW,CAACkB,WAAY,MACxBjB,EAAW,CAACkB,WAAY,IAE9BlB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVK,IAAKA,KACDD,EACJgB,SAAUtB,EAAM,iBACAK,EAChBN,GAAIwB,aACF,CAEEC,QAAS,QACTC,GAAI,OACJC,GAAI,OACJC,EAAG,IACHC,SAAU,OAEVC,SAAU,WACVC,OAASC,GAAUA,EAAMD,OAAOE,SAChCC,SAAU,SAEVC,UAAW,OAEX,sBAAuB,CACrBC,YAAa,SAEf,oBAAqB,CACnBA,YAAa,QACb,sBAAuB,CACrBC,cAAe,WAGnB,sBAAuB,CACrBC,OAAQ,OACR,sBAAuB,CACrBC,WAAY,aACZC,mBAAoB,sBAIxB,oBAAqB,CACnBV,SAAU,WACVW,MAAO,OACPH,OAAQ,OACRP,OAASC,GAAUA,EAAMD,OAAOE,SAChCR,QAAS,OACTe,mBAAoB,YACpBE,yBAA0B,4DAC1BC,UAAW,cACXC,UAAW,6BAGE,SAAX1C,GAAqB,CACvB,4CAA6C,CAC3CsC,mBAAoB,YACpBK,mBAAoB,GAAGvC,MACvBoC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,GAAK,MAAMzC,cAE9E,8CAA+C,CAC7CuC,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,IAAM,KAAKzC,eAIhF,gCAAiC,CAC/B0C,WAAY,UAEd,wCAAyC,CACvCH,UAAW,gBACXI,yBAA0B,SAC1BC,mBAAoB,WAIxBjD,GACDD,SAEAA"}

package/cjs/components/carousel/Navigation.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("./hooks.js"),n=require("@mui/material"),t=require("../icon/stroke/ChevronLeftIcon.js"),s=require("../icon/stroke/ChevronRightIcon.js"),a=require("../icon/stroke/ArrowLeftIcon.js"),i=require("../icon/stroke/ArrowRightIcon.js"),c=require("../../materialui/button/interactive.js");exports.CarouselNavigation=function({carousel:u,peekEffect:l=!1,prevButtonProps:d,prevIconProps:p,PrevIconComponent:x,nextButtonProps:m,nextIconProps:I,NextIconComponent:f,arrows:v=!0,onBackground:b=!1,autoHideNavigation:g=!1}){const h=o.useCarousel(),C=u||h,k="fade"!==C?.params?.effect&&l,j=n.useTheme(),q=n.useMediaQuery(j.breakpoints.up("md")),{sx:y,...M}=d||{},{sx:P,...L}=m||{},[w,B]=o.useCarouselPeekEffect(C),E=x||(v?a.ArrowLeftIcon:t.ChevronLeftIcon),N=f||(v?i.ArrowRightIcon:s.ChevronRightIcon),S=r.useMemo(()=>({position:"absolute",zIndex:"100",top:"50%",width:{xs:"32px",md:"40px",xl:"44px"},height:{xs:"32px",md:"40px",xl:"44px"},mt:{xs:"-16px",md:"-20px",xl:"-22px"},"& .MuiSvgIcon-root":{fontSize:{xs:"17px",xl:"20px"}},...c.getInteractiveStyle({color:"text.primary",borderColor:b?"transparent.transparent":"onSurface.os100",backgroundColor:b?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:b?"transparent.transparent":"disabled.secondary",backgroundColor:b?"transparent.transparent":"disabled.secondary"}}),[]);return g&&C?.isLocked?null:e.jsxs(e.Fragment,{children:[e.jsx(n.IconButton,{disabled:C&&!C.params?.loop&&C.isBeginning,onClick:()=>{C?.slidePrev(),k&&w&&B("reset")},onMouseEnter:()=>q&&k&&B("prev"),onMouseLeave:()=>k&&w&&B("reset"),sx:{...S,insetInlineStart:"16px",...y},"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",...M,children:"rtl"===j.direction?e.jsx(N,{...p}):e.jsx(E,{...p})}),e.jsx(n.IconButton,{disabled:C&&!C.params?.loop&&C.isEnd,onClick:()=>{C?.slideNext(),k&&w&&B("reset")},onMouseEnter:()=>q&&k&&B("next"),onMouseLeave:()=>k&&w&&B("reset"),sx:{...S,insetInlineEnd:"16px",...P},"aria-label":"Next slide","aria-controls":"carousel",color:"surface",...L,children:"rtl"===j.direction?e.jsx(E,{...I}):e.jsx(N,{...I})})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("./hooks.js"),s=require("@mui/material"),n=require("../icon/stroke/ChevronLeftIcon.js"),t=require("../icon/stroke/ChevronRightIcon.js"),i=require("../icon/stroke/ArrowLeftIcon.js"),a=require("../icon/stroke/ArrowRightIcon.js"),c=require("../../materialui/button/interactive.js"),u=require("../../utils/sxOverride/sxOverride.js");exports.CarouselNavigation=function({carousel:l,peekEffect:d=!1,prevButtonProps:x,prevIconProps:p,PrevIconComponent:v,nextButtonProps:m,nextIconProps:I,NextIconComponent:f,arrows:b=!0,onBackground:g=!1,autoHideNavigation:h=!1}){const C=o.useCarousel(),j=l||C,k="fade"!==j?.params?.effect&&d,q=s.useTheme(),y=s.useMediaQuery(q.breakpoints.up("md")),{sx:M,...P}=x||{},{sx:L,...w}=m||{},[B,E]=o.useCarouselPeekEffect(j),N=v||(b?i.ArrowLeftIcon:n.ChevronLeftIcon),S=f||(b?a.ArrowRightIcon:t.ChevronRightIcon),A=r.useMemo(()=>({position:"absolute",zIndex:"100",top:"50%",width:{xs:"32px",md:"40px",xl:"44px"},height:{xs:"32px",md:"40px",xl:"44px"},mt:{xs:"-16px",md:"-20px",xl:"-22px"},"& .MuiSvgIcon-root":{fontSize:{xs:"17px",xl:"20px"}},...c.getInteractiveStyle({color:"text.primary",borderColor:g?"transparent.transparent":"onSurface.os100",backgroundColor:g?"transparent.transparent":"surface.primary"},{backgroundColor:"surface.secondary"}),"&.Mui-disabled":{color:"disabled.tertiary",borderColor:g?"transparent.transparent":"disabled.secondary",backgroundColor:g?"transparent.transparent":"disabled.secondary"}}),[]);return h&&j?.isLocked?null:e.jsxs(e.Fragment,{children:[e.jsx(s.IconButton,{disabled:j&&!j.params?.loop&&j.isBeginning,onClick:()=>{j?.slidePrev(),k&&B&&E("reset")},onMouseEnter:()=>y&&k&&E("prev"),onMouseLeave:()=>k&&B&&E("reset"),sx:u.sxOverride({...A,insetInlineStart:"16px"},M),"aria-label":"Previous slide","aria-controls":"carousel",color:"surface",size:"medium",...P,children:"rtl"===q.direction?e.jsx(S,{...p}):e.jsx(N,{...p})}),e.jsx(s.IconButton,{disabled:j&&!j.params?.loop&&j.isEnd,onClick:()=>{j?.slideNext(),k&&B&&E("reset")},onMouseEnter:()=>y&&k&&E("next"),onMouseLeave:()=>k&&B&&E("reset"),sx:u.sxOverride({...A,insetInlineEnd:"16px"},L),"aria-label":"Next slide","aria-controls":"carousel",color:"surface",...w,children:"rtl"===q.direction?e.jsx(N,{...I}):e.jsx(S,{...I})})]})};
 //# sourceMappingURL=Navigation.js.map

package/cjs/components/carousel/Navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.js","sources":["../../../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport interface CarouselNavigationProps {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Enable/disable peek effect on hover\n * @default: false\n /\n peekEffect?: boolean;\n /\n Previous Slide IconButton\n /\n prevButtonProps?: Partial<IconButtonProps>;\n /\n Previous icon props\n /\n prevIconProps?: SvgIconProps;\n /\n Previous icon node\n /\n PrevIconComponent?: ComponentType<SvgIconProps>;\n /\n Next Slide IconButton\n /\n nextButtonProps?: Partial<IconButtonProps>;\n /\n Previous icon props\n /\n nextIconProps?: SvgIconProps;\n /\n Next icon node\n /\n NextIconComponent?: ComponentType<SvgIconProps>;\n /\n Replaces Chevrons with Arrows\n * @default true\n /\n arrows?: boolean;\n /\n Enable if placing on a plain background (not on top of an image/video)\n * @default false\n /\n onBackground?: boolean;\n /\n Hide navigation buttons on case there are not enough slides for sliding\n * @default false\n /\n autoHideNavigation?: boolean;\n}\n\n/\n Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n carousel: carouselProp,\n peekEffect: propPeekEffect = false,\n prevButtonProps,\n prevIconProps,\n PrevIconComponent,\n nextButtonProps,\n nextIconProps,\n NextIconComponent,\n arrows = true,\n onBackground = false,\n autoHideNavigation = false,\n}: CarouselNavigationProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n const peekEffect = carousel?.params?.effect !== 'fade' && propPeekEffect;\n const theme = useTheme();\n const upMD = useMediaQuery(theme.breakpoints.up('md'));\n const { sx: prevSx, ...restPrev } = prevButtonProps \|\| {};\n const { sx: nextSx, ...restNext } = nextButtonProps \|\| {};\n const [peek, setPeek] = useCarouselPeekEffect(carousel);\n const PrevIcon = PrevIconComponent \|\| (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n const NextIcon = NextIconComponent \|\| (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n // shared style between buttons\n const sharedSx = useMemo(\n () => ({\n // absolute inside the carousel position\n position: 'absolute',\n zIndex: '100',\n top: '50%',\n // responsive\n width: { xs: '32px', md: '40px', xl: '44px' },\n height: { xs: '32px', md: '40px', xl: '44px' },\n // manual v-align, half the icon size\n mt: { xs: '-16px', md: '-20px', xl: '-22px' },\n '& .MuiSvgIcon-root': {\n fontSize: { xs: '17px', xl: '20px' },\n },\n // highlight border\n ...getInteractiveStyle(\n {\n color: 'text.primary',\n borderColor: onBackground ? 'transparent.transparent' : 'onSurface.os100',\n backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n },\n {\n backgroundColor: 'surface.secondary',\n },\n ),\n // disabled state\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n borderColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n },\n }),\n [],\n );\n\n // hide navigation when not needed\n if (autoHideNavigation && carousel?.isLocked) {\n return null;\n }\n return (\n <>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isBeginning}\n onClick={() => {\n carousel?.slidePrev();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={{\n ...sharedSx,\n insetInlineStart: '16px',\n ~~...~~prevSx,\n }}\n aria-label=\"Previous slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n size=\"medium\"\n {...restPrev}\n >\n {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n </IconButton>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isEnd}\n onClick={() => {\n carousel?.slideNext();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={{\n ...sharedSx,\n insetInlineEnd: '16px',\n ~~...~~nextSx,\n }}\n aria-label=\"Next slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n {...restNext}\n >\n {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n </IconButton>\n </>\n );\n}\n"],"names":["carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"~~yYAiEEA~~,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,EAAAA,cACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAAA,sBAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAWzB,IAAsBC,EAASyB,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,QACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,sBACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,0BAA4B,kBACxDyC,gBAAiBzC,EAAe,0BAA4B,mBAE9D,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,0BAA4B,qBACxDyC,gBAAiBzC,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,EAAAA,2BACEC,EAAAA,IAACC,EAAAA,YACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,~~GAAI~~,~~IACCc~~,~~EACH2B~~,iBAAkB,~~UACfxC~~,~~GACJ~~,aACU,iBAAgB,gBACb,WACd0B,MAAM,~~UACNe~~,KAAK,~~YACDxC~~,~~EAAQyC~~,SAES,~~QAApBjD~~,~~EAAMkD~~,~~UAAsBZ~~,~~MAACrB~~,EAAQ,IAAK7B,IAAoBkD,EAAAA,IAACxB,EAAQ,IAAK1B,MAE/EkD,EAAAA,IAACC,~~aAAU~~,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,~~EAASoE~~,~~MACzDR~~,QAAS,KACP5D,~~GAAUqE~~,~~YACVnE~~,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,~~GAAI~~,~~IACCc~~,~~EACHiC~~,eAAgB,~~UACb5C~~,~~GACJ~~,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,~~WAEiB~~,~~QAApBV~~,~~EAAMkD~~,~~UAAsBZ~~,EAAAA,IAACxB,EAAQ,IAAKvB,IAAoB+C,EAAAA,IAACrB,~~MAAa1B~~,QAIrF"}
1	+ {"version":3,"file":"Navigation.js","sources":["../../../../../src/components/carousel/Navigation.tsx"],"sourcesContent":["import React, { useMemo, ComponentType } from 'react';\nimport { useCarousel, useCarouselPeekEffect } from './hooks';\nimport { useTheme, IconButton, IconButtonProps, SvgIconProps, useMediaQuery } from '@mui/material';\nimport type { Swiper as CarouselInstance } from 'swiper';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface CarouselNavigationProps {\n /*\n Optional Carousel instance from useCarouselInstance hook\n /\n carousel?: CarouselInstance;\n /\n Enable/disable peek effect on hover\n * @default: false\n /\n peekEffect?: boolean;\n /\n Previous Slide IconButton\n /\n prevButtonProps?: Partial<IconButtonProps>;\n /\n Previous icon props\n /\n prevIconProps?: SvgIconProps;\n /\n Previous icon node\n /\n PrevIconComponent?: ComponentType<SvgIconProps>;\n /\n Next Slide IconButton\n /\n nextButtonProps?: Partial<IconButtonProps>;\n /\n Previous icon props\n /\n nextIconProps?: SvgIconProps;\n /\n Next icon node\n /\n NextIconComponent?: ComponentType<SvgIconProps>;\n /\n Replaces Chevrons with Arrows\n * @default true\n /\n arrows?: boolean;\n /\n Enable if placing on a plain background (not on top of an image/video)\n * @default false\n /\n onBackground?: boolean;\n /\n Hide navigation buttons on case there are not enough slides for sliding\n * @default false\n /\n autoHideNavigation?: boolean;\n}\n\n/\n Left & Right navigation arrows\n */\nexport function CarouselNavigation({\n carousel: carouselProp,\n peekEffect: propPeekEffect = false,\n prevButtonProps,\n prevIconProps,\n PrevIconComponent,\n nextButtonProps,\n nextIconProps,\n NextIconComponent,\n arrows = true,\n onBackground = false,\n autoHideNavigation = false,\n}: CarouselNavigationProps) {\n const carouselHook = useCarousel();\n const carousel = carouselProp \|\| carouselHook;\n const peekEffect = carousel?.params?.effect !== 'fade' && propPeekEffect;\n const theme = useTheme();\n const upMD = useMediaQuery(theme.breakpoints.up('md'));\n const { sx: prevSx, ...restPrev } = prevButtonProps \|\| {};\n const { sx: nextSx, ...restNext } = nextButtonProps \|\| {};\n const [peek, setPeek] = useCarouselPeekEffect(carousel);\n const PrevIcon = PrevIconComponent \|\| (arrows ? ArrowLeftIcon : ChevronLeftIcon);\n const NextIcon = NextIconComponent \|\| (arrows ? ArrowRightIcon : ChevronRightIcon);\n\n // shared style between buttons\n const sharedSx = useMemo(\n () => ({\n // absolute inside the carousel position\n position: 'absolute',\n zIndex: '100',\n top: '50%',\n // responsive\n width: { xs: '32px', md: '40px', xl: '44px' },\n height: { xs: '32px', md: '40px', xl: '44px' },\n // manual v-align, half the icon size\n mt: { xs: '-16px', md: '-20px', xl: '-22px' },\n '& .MuiSvgIcon-root': {\n fontSize: { xs: '17px', xl: '20px' },\n },\n // highlight border\n ...getInteractiveStyle(\n {\n color: 'text.primary',\n borderColor: onBackground ? 'transparent.transparent' : 'onSurface.os100',\n backgroundColor: onBackground ? 'transparent.transparent' : 'surface.primary',\n },\n {\n backgroundColor: 'surface.secondary',\n },\n ),\n // disabled state\n '&.Mui-disabled': {\n color: 'disabled.tertiary',\n borderColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n backgroundColor: onBackground ? 'transparent.transparent' : 'disabled.secondary',\n },\n }),\n [],\n );\n\n // hide navigation when not needed\n if (autoHideNavigation && carousel?.isLocked) {\n return null;\n }\n return (\n <>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isBeginning}\n onClick={() => {\n carousel?.slidePrev();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('prev')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={sxOverride(\n {\n ...sharedSx,\n insetInlineStart: '16px',\n },\n prevSx,\n )}\n aria-label=\"Previous slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n size=\"medium\"\n {...restPrev}\n >\n {theme.direction === 'rtl' ? <NextIcon {...prevIconProps} /> : <PrevIcon {...prevIconProps} />}\n </IconButton>\n <IconButton\n disabled={carousel && !carousel.params?.loop && carousel.isEnd}\n onClick={() => {\n carousel?.slideNext();\n peekEffect && peek && setPeek('reset');\n }}\n onMouseEnter={() => upMD && peekEffect && setPeek('next')}\n onMouseLeave={() => peekEffect && peek && setPeek('reset')}\n sx={sxOverride(\n {\n ...sharedSx,\n insetInlineEnd: '16px',\n },\n nextSx,\n )}\n aria-label=\"Next slide\"\n aria-controls=\"carousel\"\n color=\"surface\"\n {...restNext}\n >\n {theme.direction === 'rtl' ? <PrevIcon {...nextIconProps} /> : <NextIcon {...nextIconProps} />}\n </IconButton>\n </>\n );\n}\n"],"names":["carousel","carouselProp","peekEffect","propPeekEffect","prevButtonProps","prevIconProps","PrevIconComponent","nextButtonProps","nextIconProps","NextIconComponent","arrows","onBackground","autoHideNavigation","carouselHook","useCarousel","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","sx","prevSx","restPrev","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_jsx","IconButton","disabled","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","sxOverride","insetInlineStart","size","children","direction","isEnd","slideNext","insetInlineEnd"],"mappings":"2bAkEEA,SAAUC,EACVC,WAAYC,GAAiB,EAAKC,gBAClCA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,gBACjBA,EAAeC,cACfA,EAAaC,kBACbA,EAAiBC,OACjBA,GAAS,EAAIC,aACbA,GAAe,EAAKC,mBACpBA,GAAqB,IAErB,MAAMC,EAAeC,EAAAA,cACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,SAA7BF,GAAUe,QAAQC,QAAqBb,EACpDc,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,QACxCC,GAAIC,KAAWC,GAAarB,GAAmB,CAAA,GAC/CmB,GAAIG,KAAWC,GAAapB,GAAmB,CAAA,GAChDqB,EAAMC,GAAWC,EAAAA,sBAAsB9B,GACxC+B,EAAWzB,IAAsBI,EAASsB,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAWzB,IAAsBC,EAASyB,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,QACf,KAAA,CAEEC,SAAU,WACVC,OAAQ,MACRC,IAAK,MAELC,MAAO,CAAEC,GAAI,OAAQC,GAAI,OAAQC,GAAI,QACrCC,OAAQ,CAAEH,GAAI,OAAQC,GAAI,OAAQC,GAAI,QAEtCE,GAAI,CAAEJ,GAAI,QAASC,GAAI,QAASC,GAAI,SACpC,qBAAsB,CACpBG,SAAU,CAAEL,GAAI,OAAQE,GAAI,YAG3BI,sBACD,CACEC,MAAO,eACPC,YAAaxC,EAAe,0BAA4B,kBACxDyC,gBAAiBzC,EAAe,0BAA4B,mBAE9D,CACEyC,gBAAiB,sBAIrB,iBAAkB,CAChBF,MAAO,oBACPC,YAAaxC,EAAe,0BAA4B,qBACxDyC,gBAAiBzC,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,GAAsBZ,GAAUqD,SAC3B,KAGPC,EAAAA,2BACEC,EAAAA,IAACC,EAAAA,YACCC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAAS2D,YACzDC,QAAS,KACP5D,GAAU6D,YACV3D,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,aACF,IACK3B,EACH4B,iBAAkB,QAEpBzC,GACD,aACU,iBAAgB,gBACb,WACd0B,MAAM,UACNgB,KAAK,YACDzC,EAAQ0C,SAES,QAApBlD,EAAMmD,UAAsBb,EAAAA,IAACrB,EAAQ,IAAK7B,IAAoBkD,EAAAA,IAACxB,EAAQ,IAAK1B,MAE/EkD,EAAAA,IAACC,EAAAA,WAAU,CACTC,SAAUzD,IAAaA,EAASe,QAAQ2C,MAAQ1D,EAASqE,MACzDT,QAAS,KACP5D,GAAUsE,YACVpE,GAAc0B,GAAQC,EAAQ,UAEhCiC,aAAc,IAAM3C,GAAQjB,GAAc2B,EAAQ,QAClDkC,aAAc,IAAM7D,GAAc0B,GAAQC,EAAQ,SAClDN,GAAIyC,aACF,IACK3B,EACHkC,eAAgB,QAElB7C,GACD,aACU,aAAY,gBACT,WACdwB,MAAM,aACFvB,EAAQwC,SAES,QAApBlD,EAAMmD,UAAsBb,EAAAA,IAACxB,EAAQ,IAAKvB,IAAoB+C,EAAAA,IAACrB,EAAQ,IAAK1B,QAIrF"}

package/cjs/components/carousel/Pagination.d.ts CHANGED Viewed

@@ -14,9 +14,9 @@ export interface CarouselPaginationDotsProps extends CarouselPaginationVariantPr
      */
     dotsWrapperProps?: BoxProps<ElementType>;
     /**
-     * Properties applied to each dot
+     * Properties applied to each dot, or a factory receiving the dot index
      */
-    dotProps?: BoxProps<ElementType>;
+    dotProps?: BoxProps<ElementType> | ((index: number, active: boolean) => BoxProps<ElementType>);
 }
 export interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {
     variant?: 'fraction';
@@ -28,17 +28,17 @@ export interface CarouselPaginationFractionProps extends CarouselPaginationVaria
 export interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {
     variant?: 'lines';
     /**
-     * Properties applied to each line
+     * Properties applied to each line, or a factory receiving the line index
      */
-    linesProps?: ButtonProps;
+    linesProps?: ButtonProps | ((index: number, active: boolean) => ButtonProps);
     /**
      * Show progress in active line instead
      */
     lineProgress?: number;
     /**
-     * Properties applied to active line progress
+     * Properties applied to active line progress, or a factory receiving the line index
      */
-    lineProgressProps?: BoxProps<ElementType>;
+    lineProgressProps?: BoxProps<ElementType> | ((index: number, active: boolean) => BoxProps<ElementType>);
 }
 export interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {
     variant?: 'slider';