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

@skodaflow/web-library 8.1.0 → 8.2.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 (398) 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/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.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,...a}){const t=s.useCarousel(),i=r||t,[l,n]=u.useState(0);return u.useEffect(()=>{i?.autoplay&&i.on("autoplayTimeLeft",(e,r,a)=>{n(e.autoplay.paused?0:Math.round(100-100*a))})},[!!i]),e.jsx(o.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"]()},...a})},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 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","sxOverride","display","m","zIndex","bottom","left","right","Spinner"],"mappings":"yVAmFM,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,mCAjFwC,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,MAACU,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,8BACRrB,WAEJe,EAAAA,IAACkB,EAAAA,QAAO,CAAC9B,MAAOA,KAAWmB"}

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';

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),s=require("./hooks.js"),t=require("../../materialui/button/interactive.js"),a=require("../../materialui/slider/SliderContainer.js");const n=r.forwardRef(({carousel:o,position:t,variant:a,sx:n,...p},x)=>{const f=s.useCarousel(),h=o||f,m=r.useMemo(()=>{switch(a){case"scrollbar":return u;case"slider":return d;case"fraction":return l;case"lines":return c;default:return i}},[a]);return e.jsx(m,{carousel:h,sx:{..."inside"===t&&{position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0"},...n},ref:x,position:t,...p})}),i=r.forwardRef(({carousel:r,dotsWrapperProps:s,dotProps:t,position:a,sx:n,...i},l)=>{const{sx:c,...d}=s??{},{sx:u,...p}=t??{};return e.jsx(o.Box,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"center",...n},ref:l,...i,children:e.jsx(o.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"1000px",py:.5,px:1,gap:.5,width:12*(r?.slides.length||0)+4*((r?.slides.length||1)-1)+4+16+"px",..."inside"===a&&{backgroundColor:e=>"dark"===e.palette.mode?"surface.primary":"transparent.backdrop"},...c},...d,children:[...new Array(r?.slides.length||0)].map((s,t)=>e.jsx(o.Box,{className:!r?.params?.loop&&r?.isEnd&&t===(r?.slides.length||0)-1?"active":r?.isEnd&&!r.params?.loop||t!==r?.realIndex?void 0:"active",sx:{p:"0",width:"12px",height:"12px",transform:"scale(0.6667)",borderRadius:"100%",backgroundColor:"onSurface.os500",transition:"transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out","&.active":{transform:"scale(1)",backgroundColor:"text.primary",margin:"0 2px"},...u},...p},t))})})}),l=r.forwardRef(({carousel:r,buttonProps:s,position:a,sx:n,...i},l)=>{const{sx:c,...d}=s??{};return e.jsx(o.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"center",p:2,...n},ref:l,...i,children:e.jsx(o.Button,{variant:"text","aria-controls":"carousel",sx:{px:2,py:.25,borderRadius:"4px",fontSize:"18px",lineHeight:"28px",letterSpacing:"0.02em",...t.getInteractiveStyle({backgroundColor:"transparent.backdrop"},{backgroundColor:"onSurface.os100"}),...c},onClick:()=>r?.isEnd&&!r.params?.loop?r?.slideTo(0):r?.slideNext(),...d,children:e.jsxs(o.Box,{component:"span",children:[e.jsx(o.Box,{component:"span",sx:{fontWeight:"700",color:"onSurface.os900"},children:`${(r?.realIndex||0)+1}`}),e.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"400",mx:.5},children:" / "}),e.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"300"},children:`${r?.slides.length||0}`})]})})})}),c=r.forwardRef(({carousel:r,sx:s,linesProps:a,lineProgress:n,lineProgressProps:i,position:l,...c},d)=>{const{sx:u,...p}=a??{},{sx:x,...f}=i??{};return e.jsx(o.Box,{sx:{display:"flex",alignItems:"center",justifyContent:{xs:"stretch",md:"center"},flexGrow:{xs:"1",md:"0"},gap:1,p:2,...s},ref:d,...c,children:[...new Array(r?.slides.length||0)].map((s,a)=>{const i=!r?.params?.loop&&r?.isEnd&&a===(r?.slides.length||0)-1||(!r?.isEnd||r.params?.loop)&&a===r?.realIndex,l=a<=(r?.realIndex||0);return e.jsxs(o.Button,{color:"inherit",className:i?"active":void 0,sx:{p:0,minHeight:"0",height:i||l?"8px":"4px",borderRadius:i||l?"4px":"2px",width:{xs:"auto",md:"56px"},flexGrow:{xs:"1",md:"0"},justifyContent:"flex-start",...t.getInteractiveStyle({backgroundColor:"surface.primary","& .progress-line":{backgroundColor:"brand.secondary"}},{backgroundColor:"surface.secondary","& .progress-line":{backgroundColor:"brandHover.secondary"}}),...u},"aria-controls":"carousel",onClick:()=>r?.[r.params?.loop?"slideToLoop":"slideTo"](a),...p,children:[e.jsx(o.Box,{sx:{position:"absolute",top:"50%",left:"0",right:"0",height:"24px",transform:"translateY(-50%)",pointerEvents:"auto"}}),e.jsx(o.Box,{sx:{borderRadius:"4px",height:"100%",width:"100%",overflow:"hidden"},children:e.jsx(o.Box,{className:"progress-line",role:i?"progressbar":void 0,"aria-valuenow":i?n:void 0,"aria-valuemin":0,"aria-valuemax":100,sx:{opacity:void 0!==n||l?"1":"0",width:"100%",backgroundColor:"brand.secondary",height:"100%",transformOrigin:"left",transform:`scaleX(${void 0!==n&&i?n/100:l?1:0})`,transition:(void 0!==n?"transform 300ms ease-in-out, ":"")+"opacity 300ms ease-out, background-color 300ms ease-out",...x},...f})})]},a)})})}),d=r.forwardRef(({carousel:s,sliderProps:t,sx:a,progressProps:n,position:i,...l},c)=>{const{sx:d,...u}=t??{},[p,x]=r.useState(Math.round(100*(s?.progress||0))),f=r.useRef(!1),[,h]=r.useState({});return r.useEffect(()=>{f.current||x(Math.round(100*(s?.progress||0)))},[s?.progress]),r.useEffect(()=>{if(s){const e=()=>{f.current||h({})};return s.on("sliderMove",e),()=>{s.off("sliderMove",e)}}},[s]),e.jsx(o.Box,{sx:{my:2,...a},ref:c,...l,children:e.jsx(o.Slider,{value:p,min:0,max:100,onChange:(e,r)=>{f.current=!0,s?.setProgress(r/100,150),x(r)},onChangeCommitted:()=>{s?.slideToClosest(300),f.current=!1},sx:{display:"block",height:"4px",py:"14px",".MuiSlider-rail":{color:"surface.primary"},".MuiSlider-track":{color:"onSurface.os500",transitionDuration:`${s?.params?.speed??300}ms`},".MuiSlider-thumb":{display:"none"},...d},"aria-controls":"carousel",...u})})}),u=r.forwardRef(({carousel:o,sliderProps:s,position:t,...n},i)=>{const{sx:l,...c}=s??{},[u,p]=r.useState(!1),[,x]=r.useState({});r.useEffect(()=>{if(o){const e=()=>p(!0),r=()=>p(!1),s=()=>x({});return o.on("touchStart",e),o.on("touchEnd",r),o.on("resize",s),()=>{o.off("touchStart",e),o.off("touchEnd",r),o.off("resize",s)}}},[o]);const f=r.useMemo(()=>{if(o?.wrapperEl?.scrollWidth&&o?.width){const e=Math.ceil(o?.width**2/o?.wrapperEl?.scrollWidth);return Math.max(e,40)}return 40},[o?.wrapperEl?.scrollWidth,o?.width]);return e.jsx(d,{ref:i,carousel:o,component:a.SliderContainer,thumbSize:f,sliderProps:{tabIndex:-1,valueLabelDisplay:"off",sx:{".MuiSlider-rail, .MuiSlider-track":{color:"surface.primary"},".MuiSlider-thumb":{display:"flex",width:`${f}px`,maxWidth:"none",height:"4px",border:"none",backgroundColor:"onSurface.os500","&:after":{width:`${f}px`},...!u&&{transition:`left ${o?.params?.speed??300}ms ease-out`},"&.Mui-focusVisible":{boxShadow:"none","&:before":{content:"none"}}},...l},...c},...n})});exports.CarouselPagination=n,exports.DotsVariant=i,exports.FractionVariant=l,exports.LinesVariant=c,exports.ScrollbarVariant=u,exports.SliderVariant=d;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material"),s=require("../../utils/sxOverride/sxOverride.js"),t=require("./hooks.js"),i=require("../../materialui/button/interactive.js"),n=require("../../materialui/slider/SliderContainer.js");const a=r.forwardRef(({carousel:o,position:i,variant:n,sx:a,...p},f)=>{const h=t.useCarousel(),m=o||h,g=r.useMemo(()=>{switch(n){case"scrollbar":return x;case"slider":return u;case"fraction":return d;case"lines":return c;default:return l}},[n]);return e.jsx(g,{carousel:m,sx:s.sxOverride({..."inside"===i&&{position:"absolute",zIndex:"90",bottom:"0",left:"0",right:"0"}},a),ref:f,position:i,...p})}),l=r.forwardRef(({carousel:r,dotsWrapperProps:t,dotProps:i,position:n,sx:a,...l},d)=>{const{sx:c,...u}=t??{};return e.jsx(o.Box,{sx:s.sxOverride({p:2,display:"flex",alignItems:"center",justifyContent:"center"},a),ref:d,...l,children:e.jsx(o.Box,{sx:s.sxOverride({display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"1000px",py:.5,px:1,gap:.5,width:12*(r?.slides.length||0)+4*((r?.slides.length||1)-1)+4+16+"px",..."inside"===n&&{backgroundColor:e=>"dark"===e.palette.mode?"surface.primary":"transparent.backdrop"}},c),...u,children:r?.slides?.map((t,n)=>{const a=!r?.params?.loop&&r?.isEnd&&n===(r?.slides.length||0)-1||(!r?.isEnd||r.params?.loop)&&n===r?.realIndex,{sx:l,...d}=("function"==typeof i?i(n,a):i)??{};return e.jsx(o.Box,{className:a?"active":void 0,sx:s.sxOverride({p:"0",width:"12px",height:"12px",transform:"scale(0.6667)",borderRadius:"100%",backgroundColor:"onSurface.os500",transition:"transform 0.3s ease-out, background-color 0.3s ease-out, margin 0.3s ease-out","&.active":{transform:"scale(1)",backgroundColor:"text.primary",margin:"0 2px"}},l),...d},n)})})})}),d=r.forwardRef(({carousel:r,buttonProps:t,position:n,sx:a,...l},d)=>{const{sx:c,...u}=t??{};return e.jsx(o.Box,{sx:s.sxOverride({display:"flex",alignItems:"center",justifyContent:"center",p:2},a),ref:d,...l,children:e.jsx(o.Button,{variant:"text","aria-controls":"carousel",sx:s.sxOverride({px:2,py:.25,borderRadius:"4px",fontSize:"18px",lineHeight:"28px",letterSpacing:"0.02em",...i.getInteractiveStyle({backgroundColor:"transparent.backdrop"},{backgroundColor:"onSurface.os100"})},c),onClick:()=>r?.isEnd&&!r.params?.loop?r?.slideTo(0):r?.slideNext(),...u,children:e.jsxs(o.Box,{component:"span",children:[e.jsx(o.Box,{component:"span",sx:{fontWeight:"700",color:"onSurface.os900"},children:`${(r?.realIndex||0)+1}`}),e.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"400",mx:.5},children:" / "}),e.jsx(o.Box,{component:"span",sx:{color:"onSurface.os700",fontWeight:"300"},children:`${r?.slides.length||0}`})]})})})}),c=r.forwardRef(({carousel:r,sx:t,linesProps:n,lineProgress:a,lineProgressProps:l,position:d,...c},u)=>e.jsx(o.Box,{sx:s.sxOverride({display:"flex",alignItems:"center",justifyContent:{xs:"stretch",md:"center"},flexGrow:{xs:"1",md:"0"},gap:1,p:2},t),ref:u,...c,children:r?.slides?.map((t,d)=>{const c=!r?.params?.loop&&r?.isEnd&&d===(r?.slides.length||0)-1||(!r?.isEnd||r.params?.loop)&&d===r?.realIndex,u=d<=(r?.realIndex||0),{sx:x,...p}=("function"==typeof n?n(d,c):n)??{},{sx:f,...h}=("function"==typeof l?l(d,c):l)??{};return e.jsxs(o.Button,{color:"inherit",className:c?"active":void 0,sx:s.sxOverride({p:0,minHeight:"0",height:c||u?"8px":"4px",borderRadius:c||u?"4px":"2px",width:{xs:"auto",md:"56px"},flexGrow:{xs:"1",md:"0"},justifyContent:"flex-start",...i.getInteractiveStyle({backgroundColor:"surface.primary","& .progress-line":{backgroundColor:"brand.secondary"}},{backgroundColor:"surface.secondary","& .progress-line":{backgroundColor:"brandHover.secondary"}})},x),"aria-controls":"carousel",onClick:()=>r?.[r.params?.loop?"slideToLoop":"slideTo"](d),...p,children:[e.jsx(o.Box,{sx:{position:"absolute",top:"50%",left:"0",right:"0",height:"24px",transform:"translateY(-50%)",pointerEvents:"auto"}}),e.jsx(o.Box,{sx:{borderRadius:"4px",height:"100%",width:"100%",overflow:"hidden"},children:e.jsx(o.Box,{className:"progress-line",...c&&{role:"progressbar"},...c&&void 0!==a&&{"aria-valuenow":a,"aria-valuemin":0,"aria-valuemax":100},sx:s.sxOverride({opacity:void 0!==a||u?"1":"0",width:"100%",backgroundColor:"brand.secondary",height:"100%",transformOrigin:"left",transform:`scaleX(${void 0!==a&&c?a/100:u?1:0})`,transition:(void 0!==a?"transform 300ms ease-in-out, ":"")+"opacity 300ms ease-out, background-color 300ms ease-out"},f),...h})})]},d)})})),u=r.forwardRef(({carousel:t,sliderProps:i,sx:n,progressProps:a,position:l,...d},c)=>{const{sx:u,...x}=i??{},[p,f]=r.useState(Math.round(100*(t?.progress||0))),h=r.useRef(!1),[,m]=r.useState({});return r.useEffect(()=>{h.current||f(Math.round(100*(t?.progress||0)))},[t?.progress]),r.useEffect(()=>{if(t){const e=()=>{h.current||m({})};return t.on("sliderMove",e),()=>{t.off("sliderMove",e)}}},[t]),e.jsx(o.Box,{sx:s.sxOverride({my:2},n),ref:c,...d,children:e.jsx(o.Slider,{value:p,min:0,max:100,onChange:(e,r)=>{h.current=!0,t?.setProgress(r/100,150),f(r)},onChangeCommitted:()=>{t?.slideToClosest(300),h.current=!1},sx:s.sxOverride({display:"block",height:"4px",py:"14px",".MuiSlider-rail":{color:"surface.primary"},".MuiSlider-track":{color:"onSurface.os500",transitionDuration:`${t?.params?.speed??300}ms`},".MuiSlider-thumb":{display:"none"}},u),"aria-controls":"carousel",...x})})}),x=r.forwardRef(({carousel:o,sliderProps:t,position:i,...a},l)=>{const{sx:d,...c}=t??{},[x,p]=r.useState(!1),[,f]=r.useState({});r.useEffect(()=>{if(o){const e=()=>p(!0),r=()=>p(!1),s=()=>f({});return o.on("touchStart",e),o.on("touchEnd",r),o.on("resize",s),()=>{o.off("touchStart",e),o.off("touchEnd",r),o.off("resize",s)}}},[o]);const h=r.useMemo(()=>{if(o?.wrapperEl?.scrollWidth&&o?.width){const e=Math.ceil(o?.width**2/o?.wrapperEl?.scrollWidth);return Math.max(e,40)}return 40},[o?.wrapperEl?.scrollWidth,o?.width]);return e.jsx(u,{ref:l,carousel:o,component:n.SliderContainer,thumbSize:h,sliderProps:{tabIndex:-1,valueLabelDisplay:"off",sx:s.sxOverride({".MuiSlider-rail, .MuiSlider-track":{color:"surface.primary"},".MuiSlider-thumb":{display:"flex",width:`${h}px`,maxWidth:"none",height:"4px",border:"none",backgroundColor:"onSurface.os500","&:after":{width:`${h}px`},...!x&&{transition:`left ${o?.params?.speed??300}ms ease-out`},"&.Mui-focusVisible":{boxShadow:"none","&:before":{content:"none"}}}},d),...c},...a})});exports.CarouselPagination=a,exports.DotsVariant=l,exports.FractionVariant=d,exports.LinesVariant=c,exports.ScrollbarVariant=x,exports.SliderVariant=u;
 //# sourceMappingURL=Pagination.js.map