npm - @skodaflow/web-library - Versions diffs - 7.16.1 → 8.0.1 - Mend

@skodaflow/web-library 7.16.1 → 8.0.1

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 (1916) hide show

package/README.md CHANGED Viewed

@@ -7,10 +7,10 @@
 ## Documentation
-Visit https://skodaflow-web.azurewebsites.net/ to view the full documentation in the storybook.
+Visit https://flow-library.skoda-auto.com/ to view the full documentation in the storybook.
 ## Resources
-- [Storybook](https://skodaflow-web.azurewebsites.net/)
+- [Storybook](https://flow-library.skoda-auto.com/)
 - [Flow Design System](https://skoda-brand.com/hub/26)
 - [@mui/material](https://mui.com/material-ui/getting-started/overview/)

package/cjs/components/advancedTable/agGrid.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import { Theme } from '@mui/material';
-import { BoxProps, CSSObject } from '@mui/system';
+import { BoxProps, CSSObject, Theme } from '@mui/material';
 import React from 'react';
 export declare const agGridStyles: (theme: Theme) => CSSObject;
 interface SkodaAgGridProviderProps extends BoxProps {

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

@@ -1,2 +1,2 @@
-"use strict";var a=require("tslib"),e=require("react/jsx-runtime"),i=require("@mui/material"),n=require("react"),r=require("./agGridVariables.js"),o=require("./agGridSkodaTheme.js"),g=require("./agGridIcons.js");const t=a=>{const e=o.skodaAgThemeParams(a);return Object.assign(Object.assign({width:"100%",'&:not(:has([class*="ag-theme-params-"])),&.ag-theme-material':Object.assign({},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"}},g.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(g.agGridIconsDefinition.ascHover.svg)})`},"& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(g.agGridIconsDefinition.asc.svg)})`},fontFamily:e.fontFamily})},s=n.forwardRef((n,r)=>{var{sx:o,children:g}=n,s=a.__rest(n,["sx","children"]);return e.jsx(i.Box,Object.assign({sx:a=>Object.assign(Object.assign({},t(a)),o),ref:r},s,{children:g}))});exports.SkodaAgGridProvider=s,exports.agGridStyles=t;
+"use strict";var a=require("tslib"),e=require("react/jsx-runtime"),i=require("@mui/material"),n=require("react"),r=require("./agGridVariables.js"),o=require("./agGridSkodaTheme.js"),g=require("./agGridIcons.js");const t=a=>{const e=o.skodaAgThemeParams(a);return Object.assign(Object.assign({width:"100%","*":{maxWidth:"none"},'&:not(:has([class*="ag-theme-params-"])),&.ag-theme-material':Object.assign({},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"}},g.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(g.agGridIconsDefinition.ascHover.svg)})`},"& .ag-header-cell-sortable .ag-hidden .ag-icon-asc:hover::before":{maskImage:`url(data:image/svg+xml;utf8,${encodeURIComponent(g.agGridIconsDefinition.asc.svg)})`},fontFamily:e.fontFamily})},s=n.forwardRef((n,r)=>{var{sx:o,children:g}=n,s=a.__rest(n,["sx","children"]);return e.jsx(i.Box,Object.assign({sx:a=>Object.assign(Object.assign({},t(a)),o),ref:r},s,{children:g}))});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, ~~Theme } from '@mui/material';\nimport {~~ BoxProps, CSSObject } from '@mui/~~system~~';\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 // 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","Object","assign","width","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","_a","ref","sx","children","rest","__rest","_jsx","Box"],"mappings":"~~oNAOO~~,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAAA,mBAAmBF,GAEnC,OAAAG,OAAAC,OAAAD,OAAAC,OAAA,CACEC,MAAO,OAEP,+~~DAA8DF~~,OAAAC,OAAA,CAAA,~~EACzDE~~,EAAAA,~~gBAAgBN~~,IAGrB,eAAgB,~~CAAEO~~,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,~~GAAGV~~,~~EAAQW~~,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,~~eAAgBjB~~,~~EAAMkB~~,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,~~OACVJ~~,MAAO,~~OACP2B~~,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,YAIPwB,EAAAA,gBAAc,CAGjB,kCAAmC,CACjCP,~~MAAO9B~~,~~EAAMkB~~,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,~~MAAO9B~~,~~EAAMkB~~,QAAQsB,KAAKC,SAE5B,+HACE,CACEjC,QAAS,2BAGb,6DAA8D,CAC5DkC,QAAS,KACTlC,QAAS,~~OACTH~~,MAAO,~~OACPiB~~,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,~~WAAYpD~~,~~EAAQoD~~,cASXC,EAA0DC,EAAAA,WAAW,CAACC,EAA2BC,SAA3BC,GAAEA,EAAEC,SAAEA,GAAQH,EAAKI,EAAIC,EAAAA,OAAAL,EAAvB,mBACjF,OACEM,MAACC,EAAAA,~~IAAG5D~~,OAAAC,OAAA,~~CACFsD~~,~~GAAK1D~~,GAAUG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,EAAaC,~~IACb0D~~,GAELD,IAAKA,GACDG,EAAI,CAAAD,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';\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","Object","assign","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","_a","ref","sx","children","rest","__rest","_jsx","Box"],"mappings":"oNAMO,MAAMA,EAAgBC,IAC3B,MAAMC,EAAUC,EAAAA,mBAAmBF,GAEnC,OAAAG,OAAAC,OAAAD,OAAAC,OAAA,CACEC,MAAO,OAEP,IAAK,CACHC,SAAU,QAGZ,+DAA8DH,OAAAC,OAAA,CAAA,EACzDG,EAAAA,gBAAgBP,IAGrB,eAAgB,CAAEQ,aAAc,QAChC,yCAA0C,CAAEC,QAAS,QAGrD,4BAA6B,CAC3BC,SAAU,QAGZ,2BAA4B,CAE1BC,UAAW,QAIb,yCAA0C,CACxCC,WAAY,GAAGX,EAAQY,oBAIzB,4EAA6E,CAC3EJ,QAAS,mBACTK,OAAQ,WAIV,+BAAgC,CAC9BC,WAAY,SACZC,GAAI,OACJC,UAAW,YACXC,eAAgBlB,EAAMmB,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,YAIPwB,EAAAA,gBAAc,CAGjB,kCAAmC,CACjCP,MAAO/B,EAAMmB,QAAQoB,UAAUC,OAEjC,8CAA+C,CAC7CT,MAAO/B,EAAMmB,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,WAAYrD,EAAQqD,cASXC,EAA0DC,EAAAA,WAAW,CAACC,EAA2BC,SAA3BC,GAAEA,EAAEC,SAAEA,GAAQH,EAAKI,EAAIC,EAAAA,OAAAL,EAAvB,mBACjF,OACEM,MAACC,EAAAA,IAAG7D,OAAAC,OAAA,CACFuD,GAAK3D,GAAUG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,EAAaC,IACb2D,GAELD,IAAKA,GACDG,EAAI,CAAAD,SAEPA"}

package/cjs/components/advancedTable/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './agGrid';
 export * from './agGridIcons';
+export * from './agGridSkodaTheme';
 export * from './agGridVariables';

package/cjs/components/alert/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-export * from './Alert';
 export * from './AlertButton';
 export * from './AlertNotificationButton';

package/cjs/components/banner/Banner.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { BoxProps, SvgIconProps, TypographyProps } from '@mui/material';
+import React, { ElementType, ComponentType, ReactNode } from 'react';
+export interface BannerProps extends BoxProps<ElementType> {
+    /**
+     * Defines which variant of Banner component should be rendered
+     * @default info
+     */
+    variant?: 'info' | 'warning' | 'error';
+    /**
+     * Set the proportions
+     * @default large
+     */
+    size?: 'large' | 'small';
+    /**
+     * Properties passed to indicator icon
+     */
+    iconProps?: SvgIconProps;
+    /**
+     * Icon node to be used
+     */
+    IconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Properties passed to wrapper of children
+     */
+    typographyProps?: TypographyProps<ElementType>;
+    /**
+     * Properties applied to wrapper of content (Icon and Typography)
+     */
+    wrapperProps?: BoxProps<ElementType>;
+    /**
+     * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment
+     */
+    buttons?: ReactNode;
+    /**
+     * Properties applied to wrapper element of buttons
+     */
+    buttonsWrapperProps?: BoxProps<ElementType>;
+}
+/**
+ * Alert notification banner
+ */
+export declare const Banner: React.FC<BannerProps>;

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

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

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

@@ -0,0 +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","_a","ref","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","__rest","theme","useTheme","_b","iconSx","restIcon","_c","typographySx","restTypography","_d","wrapperSx","restWrapper","_e","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","Object","assign","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":"+TA+CO,MAAMA,EAAgCC,EAAAA,WAC3C,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,QACRA,EAAU,OAAMC,KAChBA,EAAO,QAAOC,GACdA,EAAEC,UACFA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,QACZA,EAAOC,oBACPA,EAAmBC,QACnBA,GAAOZ,EACJa,EAAIC,EAAAA,OAAAd,EAZT,2IAgBA,MAAMe,EAAQC,EAAAA,WACRC,EAA8BX,QAAAA,EAAa,IAAzCD,GAAIa,GAAMD,EAAKE,EAAQL,EAAAA,OAAAG,EAAzB,CAAA,OACAG,EAA0CZ,QAAAA,EAAmB,IAA3DH,GAAIgB,GAAYD,EAAKE,EAAcR,EAAAA,OAAAM,EAArC,CAAA,OACAG,EAAoCd,QAAAA,EAAgB,IAAlDJ,GAAImB,GAASD,EAAKE,EAAWX,EAAAA,OAAAS,EAA/B,CAAA,OACAG,EAAkDf,QAAAA,EAAuB,IAAvEN,GAAIsB,GAAgBD,EAAKE,EAAkBd,EAAAA,OAAAY,EAA7C,CAAA,QAECG,EAAaC,EAAiBC,GAAwBC,EAAAA,QAAQ,KACnE,OAAQ7B,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe8B,qBACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,+BAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,iCAEtC,CAAChC,IACEiC,EAAa7B,QAAAA,EAAiBwB,EAEpC,OACEM,OAACC,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,SACZC,KAAK,QAAO,cACA,OAAM,YACR,YACV7B,QAASA,EACTP,GAAEkC,OAAAC,OAAAD,OAAAC,OAAA,CACAE,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAAT9C,EAAmB,EAAI,CAAEyC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZvB,YAAaA,EACbC,gBAAwC,SAAvBf,EAAMsC,QAAQC,KAAkB,kBAAoBxB,EACrEyB,UAAW,QAEP3C,GAAO2B,OAAAC,OAAA,CACTgB,SAAU,WACVC,OAAQ,WAELC,EAAAA,kBAAkB3C,GAAO,EAAM,SAEjCV,GAELJ,IAAKA,GACDY,EAAI,CAAAX,SAAA,CAERmC,EAAAA,KAACC,MAAGC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GAAEkC,OAAAC,OAAA,CAEAmB,SAAU,IACVjB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IACD1B,IAEDC,EAAW,CAAAvB,SAAA,CAEf0D,EAAAA,IAACxB,EAAUG,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAqB,MAAOhC,GACJX,IAEDC,IAENyC,MAACE,EAAAA,WAAUvB,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAqB,MAAO,eACPF,SAAU,IAEVI,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SACf3C,IAEDC,EAAc,CAAApB,SAEjBA,SAGJQ,GACCkD,EAAAA,IAACtB,EAAAA,IAAGC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GAAEkC,OAAAC,OAAA,CACAE,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELe,WAAY,IAEZC,GAAI,CAAEtB,GAAI,EAAGC,GAAI,GAEjBsB,UAAW,YACRzC,IAEDC,EAAkB,CAAA1B,SAErBQ"}

package/cjs/components/banner/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export * from './banner';
+export * from './Banner';
 export * from './BannerButton';
 export * from './BannerDismissButton';

package/cjs/components/bottomSheet/BottomSheet.d.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import React, { ComponentType, ElementType } from 'react';
+import { BoxProps, IconButtonProps, SwipeableDrawerProps, TypographyProps, SvgIconProps } from '@mui/material';
+export interface BottomSheetProps extends Omit<SwipeableDrawerProps, 'onClose' | 'onOpen' | 'title'> {
+    /**
+     * Open state component flag
+     */
+    open: boolean;
+    /**
+     * Open state component function
+     */
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Flag for displaying close button
+     */
+    closeButton?: boolean;
+    /**
+     * Props applied to closeButton IconButton
+     */
+    closeButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Props applied to Icon in closeButton
+     */
+    closeButtonIconProps?: SvgIconProps;
+    /**
+     * Icon node to be used
+     */
+    CloseButtonIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Flag for displaying bar that visualizes pulling function
+     */
+    puller?: boolean;
+    /**
+     * Props applied to wrapper of puller
+     */
+    pullerWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Props applied to puller
+     */
+    pullerProps?: BoxProps<ElementType>;
+    /**
+     * Footer children slot
+     */
+    footerSlot?: React.ReactNode;
+    /**
+     * Text in header
+     */
+    title?: React.ReactNode;
+    /**
+     * Text props
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Max height of whole component in percentages
+     * @default 60
+     */
+    maxHeight?: number;
+    /**
+     * Wrapper of header
+     */
+    headerWrapper?: BoxProps<ElementType>;
+    /**
+     * Wrapper of title and close button
+     */
+    titleWrapper?: BoxProps<ElementType>;
+    /**
+     * Wrapper of content
+     */
+    contentWrapper?: BoxProps<ElementType>;
+    /**
+     * Wrapper of footer
+     */
+    footerWrapper?: BoxProps<ElementType>;
+}
+export declare const BottomSheet: React.FC<BottomSheetProps>;

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

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

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

@@ -0,0 +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","_a","ref","children","open","setOpen","slotProps","puller","pullerWrapperProps","pullerProps","closeButton","closeButtonProps","closeButtonIconProps","CloseButtonIconComponent","footerSlot","title","titleProps","headerWrapper","titleWrapper","contentWrapper","footerWrapper","maxHeight","rest","__rest","_c","sx","headerSx","restHeader","_d","titleWrapperSx","restTitleWrapper","_e","titleSx","restTitle","_f","pullerWrapperSx","restPullerWrapper","_g","pullerSx","restPuller","_h","closeButtonSx","restCloseButton","_j","contentSx","restContent","_k","footerSx","restFooter","theme","useTheme","BottomSheetCloseButtonIcon","CloseIcon","isScrollable","elementRef","useElementScrollable","_jsxs","SwipeableDrawer","dir","direction","anchor","onClose","onOpen","disableSwipeToOpen","ModalProps","keepMounted","paper","Object","assign","boxShadow","borderTopLeftRadius","borderTopRightRadius","_b","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":"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"}

package/cjs/components/bottomSheet/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from './~~bottomSheet~~';
1	+ export * from './BottomSheet';

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

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("tslib"),o=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("@mui/material"),i=require("../focusring/focusring.js");const c=t.forwardRef((t,r)=>{var{children:c,className:a,href:l="#",sx:u,replace:d=!1,active:p=!1,onClick:m,portalProps:f}=t,b=e.__rest(t,["children","className","href","sx","replace","active","onClick","portalProps"]);const g=n.useTheme();return o.jsx(s,Object.assign({disablePortal:!0},f,{children:o.jsx(n.ButtonBase,Object.assign({tabIndex:0,component:"a",href:l,onClick:e=>{var o;null==m\|\|m(e),d&&(e.preventDefault(),null===(o=null===document\|\|void 0===document?void 0:document.getElementById(null==l?void 0:l.replace("#","")))\|\|void 0===o\|\|o.scrollIntoView(!0))},className:p?["Mui-focusVisible",a].filter(Boolean).join(" "):a,sx:Object.assign(Object.assign(Object.assign({position:"absolute",zIndex:`${g.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"},g.typography.body),{"&.Mui-focusVisible":Object.assign(Object.assign({},i.getFocusRingStyle(g,!1)),{padding:"8px 24px",width:"auto",height:"auto",overflow:"visible",clip:"unset",margin:"0",left:"10px"})}),u),ref:r},b,{children:c}))}))});function s({children:e,container:o,disablePortal:n}){const[i]=t.useState(()=>null===document\|\|void 0===document?void 0:document.createElement("div"));return t.useEffect(()=>{const e=("function"==typeof o?o():o)\|\|(null===document\|\|void 0===document?void 0:document.body);return e&&i&&!n&&e.prepend(i),()=>{i&&!n&&i.remove()}},[]),i&&!n?r.createPortal(e,i):e}exports.BypassBlock=c;
2	+ //# sourceMappingURL=BypassBlock.js.map

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

@@ -0,0 +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","_a","ref","children","className","href","sx","replace","active","onClick","portalProps","rest","__rest","theme","useTheme","_jsx","PrependPortal","Object","assign","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":"+KAoCO,MAAMA,EAA0CC,EAAAA,WACrD,CAACC,EAAyGC,SAAzGC,SAAEA,EAAQC,UAAEA,EAASC,KAAEA,EAAO,IAAGC,GAAEA,EAAEC,QAAEA,GAAU,EAAKC,OAAEA,GAAS,EAAKC,QAAEA,EAAOC,YAAEA,GAAWT,EAAKU,EAAIC,EAAAA,OAAAX,EAArG,CAAA,WAAA,YAAA,OAAA,KAAA,UAAA,SAAA,UAAA,gBACC,MAAMY,EAAQC,EAAAA,WAEd,OACEC,MAACC,EAAaC,OAAAC,OAAA,CAACC,eAAe,GAAUT,EAAW,CAAAP,SACjDY,EAAAA,IAACK,4BACCC,SAAU,EACVC,UAAU,IACVjB,KAAMA,EACNI,QAAUc,UACRd,SAAAA,EAAUc,GACNhB,IAEFgB,EAAEC,iBAE8C,QAAhDvB,EAAQ,OAARwB,eAAQ,IAARA,cAAQ,EAARA,SAAUC,eAAerB,aAAI,EAAJA,EAAME,QAAQ,IAAK,YAAI,IAAAN,GAAAA,EAAE0B,gBAAe,KAGrEvB,UAAWI,EAAS,CAAC,mBAAoBJ,GAAWwB,OAAOC,SAASC,KAAK,KAAO1B,EAChFE,GAAEW,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACAa,SAAU,WACVC,OAAQ,GAAGnB,EAAMmB,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,OACXhC,EAAMiC,WAAWC,MAAI,CAExB,qBAAoB9B,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACf8B,EAAAA,kBAAkBnC,GAAO,IAAM,CAClC2B,QAAS,WACTL,MAAO,OACPC,OAAQ,OACRG,SAAU,UACVD,KAAM,QACND,OAAQ,IACRY,KAAM,WAEL3C,GAELJ,IAAKA,GACDS,YAEHR,UAWX,SAASa,GAAcb,SAAEA,EAAQ+C,UAAEA,EAAS/B,cAAEA,IAC5C,MAAOgC,GAAmBC,WAAS,WAAM3B,eAAQ,IAARA,cAAQ,EAARA,SAAU4B,cAAc,QAejE,OAbAC,EAAAA,UAAU,KAER,MAAMP,GAA6B,mBAAdG,EAA2BA,IAAcA,KAAsB,OAARzB,eAAQ,IAARA,cAAQ,EAARA,SAAUsB,MAItF,OADAA,GAAQI,IAAoBhC,GAAiB4B,EAAKQ,QAAQJ,GACnD,KAELA,IAAoBhC,GAAiBgC,EAAgBK,WAEtD,IAGIL,IAAoBhC,EAAgBsC,EAAAA,aAAatD,EAAUgD,GAAmBhD,CACvF"}

package/cjs/components/bypassBlock/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from './~~bypassBlock~~';
1	+ export * from './BypassBlock';

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Autoplay.js","sources":["../../../../../src/components/carousel/Autoplay.tsx"],"sourcesContent":["import { Box, BoxProps, CSSObject } from '@mui/material';\nimport { useCarousel } from './hooks';\nimport { Swiper as CarouselInstance } from 'swiper';\nimport { useSwiper } from 'swiper/react';\nimport { useEffect, useState, useMemo } 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: rawSx,\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 // position extra styling applied to wrapper\n const sx = useMemo<CSSObject | BoxProps['sx']>(() => {\n if (position === 'inside') {\n return {\n position: 'absolute',\n zIndex: '90',\n bottom: '0',\n left: '0',\n right: '0',\n m: 2,\n ...rawSx,\n };\n } else {\n return rawSx;\n }\n }, [position, JSON.stringify(rawSx)]);\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 sx={{ position: 'relative', display: 'flex', m: 2, ...sx }} data-testid=\"CarouselAutoplayProgress\" {...rest}>\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":["_a","carousel","carouselProp","rest","__rest","carouselHook","useCarousel","value","setValue","useState","useEffect","autoplay","on","instance","_timeLeft","percentage","paused","Math","round","_jsx","PlayPauseButton","Object","assign","_b","running","isPlaying","_c","progress","onClick","sx","rawSx","spinnerProps","position","useSwiper","useMemo","zIndex","bottom","left","right","m","JSON","stringify","Box","display","children","Spinner"],"mappings":"0TAgFM,SAAqCA,YAAEC,SAAUC,GAAYF,EAAKG,EAAIC,SAAAJ,EAAjC,cACzC,MAAMK,EAAeC,EAAAA,cACfL,EAAWC,GAAgBG,GAC1BE,EAAOC,GAAYC,EAAAA,SAAiB,GAW3C,OATAC,EAAAA,UAAU,MAEJT,aAAQ,EAARA,EAAUU,WACZV,EAASW,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDP,EAASK,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGd,IAGJkB,EAAAA,IAACC,kBAAeC,OAAAC,OAAA,CAAA,cACgB,QAAlBC,EAAAtB,aAAQ,EAARA,EAAUU,gBAAQ,IAAAY,OAAA,EAAAA,EAAEC,SAAU,0BAA4B,yBACtEC,qBAAaC,EAAAzB,aAAQ,EAARA,EAAUU,+BAAUa,SACjCG,SAAUpB,EACVqB,QAAS,aACW,QAAlB5B,EAAAC,aAAQ,EAARA,EAAUU,gBAAQ,IAAAX,GAAAA,GAAqB,QAAlBuB,EAAAtB,aAAQ,EAARA,EAAUU,gBAAQ,IAAAY,OAAA,EAAAA,EAAEC,SAAU,OAAS,aAE1DrB,GAGV,mCA/EyCH,IAAA,IACvCC,SAAUC,EACV2B,GAAIC,EAAKC,aACTA,EAAYC,SACZA,EAAW,WAAShC,EACjBG,EAAIC,EAAAA,OAAAJ,EALgC,6CAOvC,MAAOO,EAAOC,GAAYC,EAAAA,SAAiB,GACrCJ,EAAe4B,EAAAA,YACfhC,EAAWC,GAAgBG,EAG3BwB,EAAKK,EAAAA,QAAoC,IAC5B,WAAbF,EACFX,OAAAC,OAAA,CACEU,SAAU,WACVG,OAAQ,KACRC,OAAQ,IACRC,KAAM,IACNC,MAAO,IACPC,EAAG,GACAT,GAGEA,EAER,CAACE,EAAUQ,KAAKC,UAAUX,KAW7B,OATApB,EAAAA,UAAU,MAEJT,aAAQ,EAARA,EAAUU,WACZV,EAASW,GAAG,mBAAoB,CAACC,EAAUC,EAAWC,KACpDP,EAASK,EAASF,SAASK,OAAS,EAAIC,KAAKC,MAAM,IAAmB,IAAbH,OAG5D,GAAGd,IAGJkB,EAAAA,IAACuB,EAAAA,IAAGrB,OAAAC,OAAA,CAACO,GAAER,OAAAC,OAAA,CAAIU,SAAU,WAAYW,QAAS,OAAQJ,EAAG,GAAMV,iBAAkB,4BAA+B1B,EAAI,CAAAyC,SAC9GzB,EAAAA,IAAC0B,EAAAA,QAAOxB,OAAAC,OAAA,CAACf,MAAOA,GAAWwB"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("tslib"),i=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),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=r.forwardRef((r,l)=>{var{children:d,sx:u,onInit:c,effect:w,autoplay:f,parallax:m,peekDistance:x=100,peekSpeed:h=150}=r,b=e.__rest(r,["children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed"]);return i.jsx(t.Box,Object.assign({component:a.Swiper,spaceBetween:0,autoHeight:!0,loop:!0,keyboard:{enabled:!0},modules:[s.default,..."fade"===w?[p.default]:[],...f?[o.default]:[],...m?[n.default]:[]],parallax:m,effect:w,autoplay:f,ref:l},b,{onSwiper:c,"data-peekspeed":h,sx:Object.assign(Object.assign(Object.assign({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"!==w&&{"&.peeking .swiper-wrapper > .swiper-slide":{transitionProperty:"transform",transitionDuration:`${h}ms`,transitionTimingFunction:"var(--swiper-wrapper-transition-timing-function, initial)"},"&.peek-next .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"":"-"}${x}px, 0, 0)`},"&.peek-prev .swiper-wrapper > .swiper-slide":{transform:e=>`translate3D(${"rtl"===e.direction?"-":""}${x}px, 0, 0)`}}),{".swiper-slide-invisible-blank":{visibility:"hidden"},".swiper-backface-hidden .swiper-slide":{transform:"translateZ(0)",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}}),u),children:d}))});exports.Carousel=l;
2	+ //# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +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 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","_a","ref","children","sx","onInit","effect","autoplay","parallax","peekDistance","peekSpeed","rest","__rest","_jsx","Box","Object","assign","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":"uZA+BO,MAAMA,EAAoCC,EAAAA,WAC/C,CAACC,EAAoGC,SAApGC,SAAEA,EAAQC,GAAEA,EAAEC,OAAEA,EAAMC,OAAEA,EAAMC,SAAEA,WAAUC,EAAQC,aAAEA,EAAe,IAAGC,UAAEA,EAAY,OAAQC,EAAIC,SAAAX,EAAhG,CAAA,WAAA,KAAA,SAAA,SAAA,WAAA,WAAA,eAAA,cACC,OACEY,EAAAA,IAACC,EAAAA,IAAGC,OAAAC,OAAA,CACFC,UAAWC,EAAAA,OACXC,aAAc,EACdC,cACAC,MAAI,EACJC,SAAU,CACRC,SAAS,GAEXC,QAAS,CACPC,EAAAA,WACe,SAAXnB,EAAoB,CAACoB,EAAAA,SAAc,MACnCnB,EAAW,CAACoB,WAAY,MACxBnB,EAAW,CAACoB,WAAY,IAE9BpB,SAAUA,EACVF,OAAQA,EACRC,SAAUA,EACVL,IAAKA,GACDS,EAAI,CACRkB,SAAUxB,EAAM,iBACAK,EAChBN,GAAEW,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAEAc,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,2BAGE,SAAX3C,GAAqB,CACvB,4CAA6C,CAC3CuC,mBAAoB,YACpBK,mBAAoB,GAAGxC,MACvBqC,yBAA0B,6DAE5B,8CAA+C,CAC7CE,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,GAAK,MAAM1C,cAE9E,8CAA+C,CAC7CwC,UAAYZ,GAAU,eAAmC,QAApBA,EAAMc,UAAsB,IAAM,KAAK1C,gBAE9E,CAEF,gCAAiC,CAC/B2C,WAAY,UAEd,wCAAyC,CACvCH,UAAW,gBACXI,yBAA0B,SAC1BC,mBAAoB,YAGnBlD,GAAED,SAGNA"}

package/cjs/components/carousel/Navigation.d.ts ADDED Viewed

@@ -0,0 +1,57 @@
+import { ComponentType } from 'react';
+import { IconButtonProps, SvgIconProps } from '@mui/material';
+import type { Swiper as CarouselInstance } from 'swiper';
+export interface CarouselNavigationProps {
+    /**
+     * Optional Carousel instance from useCarouselInstance hook
+     */
+    carousel?: CarouselInstance;
+    /**
+     * Enable/disable peek effect on hover
+     * @default: false
+     */
+    peekEffect?: boolean;
+    /**
+     * Previous Slide IconButton
+     */
+    prevButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Previous icon props
+     */
+    prevIconProps?: SvgIconProps;
+    /**
+     * Previous icon node
+     */
+    PrevIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Next Slide IconButton
+     */
+    nextButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Previous icon props
+     */
+    nextIconProps?: SvgIconProps;
+    /**
+     * Next icon node
+     */
+    NextIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Replaces Chevrons with Arrows
+     * @default true
+     */
+    arrows?: boolean;
+    /**
+     * Enable if placing on a plain background (not on top of an image/video)
+     * @default false
+     */
+    onBackground?: boolean;
+    /**
+     * Hide navigation buttons on case there are not enough slides for sliding
+     * @default false
+     */
+    autoHideNavigation?: boolean;
+}
+/**
+ * Left & Right navigation arrows
+ */
+export declare function CarouselNavigation({ carousel: carouselProp, peekEffect: propPeekEffect, prevButtonProps, prevIconProps, PrevIconComponent, nextButtonProps, nextIconProps, NextIconComponent, arrows, onBackground, autoHideNavigation, }: CarouselNavigationProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +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","_a","params","effect","theme","useTheme","upMD","useMediaQuery","breakpoints","up","_d","sx","prevSx","restPrev","__rest","_e","nextSx","restNext","peek","setPeek","useCarouselPeekEffect","PrevIcon","ArrowLeftIcon","ChevronLeftIcon","NextIcon","ArrowRightIcon","ChevronRightIcon","sharedSx","useMemo","Object","assign","position","zIndex","top","width","xs","md","xl","height","mt","fontSize","getInteractiveStyle","color","borderColor","backgroundColor","isLocked","_jsxs","_Fragment","children","_jsx","IconButton","disabled","_b","loop","isBeginning","onClick","slidePrev","onMouseEnter","onMouseLeave","insetInlineStart","size","direction","_c","isEnd","slideNext","insetInlineEnd"],"mappings":"4ZAiEEA,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,cAErB,MAAMC,EAAeC,EAAAA,cACfd,EAAWC,GAAgBY,EAC3BX,EAA0C,UAAb,QAAhBa,EAAAf,aAAQ,EAARA,EAAUgB,cAAM,IAAAD,OAAA,EAAAA,EAAEE,SAAqBd,EACpDe,EAAQC,EAAAA,WACRC,EAAOC,EAAAA,cAAcH,EAAMI,YAAYC,GAAG,OAC1CC,EAA8BpB,GAAmB,IAA/CqB,GAAIC,KAAWC,EAAQC,EAAAA,OAAAJ,EAAzB,CAAA,OACAK,EAA8BtB,GAAmB,IAA/CkB,GAAIK,KAAWC,EAAQH,EAAAA,OAAAC,EAAzB,CAAA,QACCG,EAAMC,GAAWC,EAAAA,sBAAsBlC,GACxCmC,EAAW7B,IAAsBI,EAAS0B,EAAAA,cAAgBC,EAAAA,iBAC1DC,EAAW7B,IAAsBC,EAAS6B,EAAAA,eAAiBC,EAAAA,kBAG3DC,EAAWC,EAAAA,QACf,IAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAEJC,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,UAG3BI,EAAAA,oBACD,CACEC,MAAO,eACPC,YAAa9C,EAAe,0BAA4B,kBACxD+C,gBAAiB/C,EAAe,0BAA4B,mBAE9D,CACE+C,gBAAiB,uBAEpB,CAED,iBAAkB,CAChBF,MAAO,oBACPC,YAAa9C,EAAe,0BAA4B,qBACxD+C,gBAAiB/C,EAAe,0BAA4B,wBAGhE,IAIF,OAAIC,IAAsBZ,aAAQ,EAARA,EAAU2D,UAC3B,KAGPC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACEC,EAAAA,IAACC,aAAUrB,OAAAC,OAAA,CACTqB,SAAUjE,KAA4B,QAAfkE,EAAAlE,EAASgB,cAAM,IAAAkD,OAAA,EAAAA,EAAEC,OAAQnE,EAASoE,YACzDC,QAAS,KACPrE,SAAAA,EAAUsE,YACVpE,GAAc8B,GAAQC,EAAQ,UAEhCsC,aAAc,IAAMnD,GAAQlB,GAAc+B,EAAQ,QAClDuC,aAAc,IAAMtE,GAAc8B,GAAQC,EAAQ,SAClDR,gDACKgB,GAAQ,CACXgC,iBAAkB,SACf/C,GAAM,aAEA,iCACG,WACd8B,MAAM,UACNkB,KAAK,UACD/C,EAAQ,CAAAmC,SAES,QAApB5C,EAAMyD,UAAsBZ,MAACzB,mBAAajC,IAAoB0D,EAAAA,IAAC5B,EAAQQ,OAAAC,OAAA,CAAA,EAAKvC,OAE/E0D,EAAAA,IAACC,EAAAA,WAAUrB,OAAAC,OAAA,CACTqB,SAAUjE,aAAa4E,EAAA5E,EAASgB,6BAAQmD,OAAQnE,EAAS6E,MACzDR,QAAS,KACPrE,SAAAA,EAAU8E,YACV5E,GAAc8B,GAAQC,EAAQ,UAEhCsC,aAAc,IAAMnD,GAAQlB,GAAc+B,EAAQ,QAClDuC,aAAc,IAAMtE,GAAc8B,GAAQC,EAAQ,SAClDR,GAAEkB,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACGH,GAAQ,CACXsC,eAAgB,SACbjD,GAAM,aAEA,aAAY,gBACT,WACd0B,MAAM,WACFzB,EAAQ,CAAA+B,SAES,QAApB5C,EAAMyD,UAAsBZ,EAAAA,IAAC5B,EAAQQ,OAAAC,OAAA,CAAA,EAAKpC,IAAoBuD,EAAAA,IAACzB,mBAAa9B,SAIrF"}

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

@@ -0,0 +1,92 @@
+import React, { ElementType } from 'react';
+import { BoxProps, ButtonProps, SliderProps } from '@mui/material';
+import type { Swiper as CarouselInstance } from 'swiper';
+export interface CarouselPaginationVariantProps extends Omit<BoxProps<ElementType>, 'children' | 'position'> {
+    /**
+     * Carousel instance from useCarousel hook
+     */
+    carousel: CarouselInstance;
+}
+export interface CarouselPaginationDotsProps extends CarouselPaginationVariantProps {
+    variant?: 'dots';
+    /**
+     * Properties applied to wrapper of dots
+     */
+    dotsWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to each dot
+     */
+    dotProps?: BoxProps<ElementType>;
+}
+export interface CarouselPaginationFractionProps extends CarouselPaginationVariantProps {
+    variant?: 'fraction';
+    /**
+     * Properties applied to button used to render text
+     */
+    buttonProps?: ButtonProps;
+}
+export interface CarouselPaginationLinesProps extends CarouselPaginationVariantProps {
+    variant?: 'lines';
+    /**
+     * Properties applied to each line
+     */
+    linesProps?: ButtonProps;
+    /**
+     * Show progress in active line instead
+     */
+    lineProgress?: number;
+    /**
+     * Properties applied to active line progress
+     */
+    lineProgressProps?: BoxProps<ElementType>;
+}
+export interface CarouselPaginationSliderProps extends CarouselPaginationVariantProps {
+    variant?: 'slider';
+    /**
+     * Properties applied to Slider
+     */
+    sliderProps?: SliderProps;
+}
+export interface CarouselPaginationScrollbarProps extends CarouselPaginationVariantProps {
+    variant?: 'scrollbar';
+    /**
+     * Properties applied to Slider
+     */
+    sliderProps?: SliderProps;
+}
+export interface CarouselPaginationBaseProps {
+    /**
+     * Optional Carousel instance from useCarouselInstance hook
+     */
+    carousel?: CarouselInstance;
+    /**
+     * Append style to wrapper box to change position of control
+     * @default outside
+     */
+    position?: 'outside' | 'inside';
+}
+export type CarouselPaginationProps = CarouselPaginationBaseProps & (Omit<CarouselPaginationDotsProps, 'carousel'> | Omit<CarouselPaginationFractionProps, 'carousel'> | Omit<CarouselPaginationLinesProps, 'carousel'> | Omit<CarouselPaginationSliderProps, 'carousel'> | Omit<CarouselPaginationScrollbarProps, 'carousel'>);
+/**
+ * Pagination controls
+ */
+export declare const CarouselPagination: React.FC<CarouselPaginationProps>;
+/**
+ * Dots variant (...)
+ */
+export declare const DotsVariant: React.FC<CarouselPaginationDotsProps>;
+/**
+ * Fraction variant (text 1/3)
+ */
+export declare const FractionVariant: React.FC<CarouselPaginationFractionProps>;
+/**
+ * Lines variant (- - -)
+ */
+export declare const LinesVariant: React.FC<CarouselPaginationLinesProps>;
+/**
+ * Slider variant (___)
+ */
+export declare const SliderVariant: React.FC<CarouselPaginationSliderProps>;
+/**
+ * Scrollbar variant (_--)
+ */
+export declare const ScrollbarVariant: React.FC<CarouselPaginationSliderProps>;