@skodaflow/web-library 5.0.0 → 6.0.0

package/cjs/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport MuiPagination from '@mui/material/Pagination';\nimport MuiPaginationItem from '@mui/material/PaginationItem';\nimport TextField from '@mui/material/TextField';\nimport { styled } from '@mui/material/styles';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport { ternaryCondition } from '../../utils/utilities';\nimport { IconButton } from '../iconButton';\nimport { Icon } from '../icon';\n/**\n * @description SkodaFlow Pagination component.\n * Properties are inherited from HTML div Attribetes element.\n * @param props PaginationProps\n * @returns React Functional Component\n */\nconst isPageNumberValid = (pageNumber, count) => {\n    return (pageNumber === '' ||\n        (typeof pageNumber === 'number' && pageNumber - 1 > 0 && pageNumber + 1 <= count) ||\n        (typeof parseInt(pageNumber) === 'number' && parseInt(pageNumber) > 0 && parseInt(pageNumber) <= count));\n};\nconst mobileIconButton = (muiIcon, onClick, disabled, direction, hideLabel, label) => (_jsxs(IconButton, { variant: \"standard\", onClick: onClick, disabled: disabled, children: [direction === 'forward' && !hideLabel && label, _jsx(Icon, { className: muiIcon }), direction === 'back' && !hideLabel && label] }));\nexport const Pagination = forwardRef((_a, ref) => {\n    var { count, isDisabled, page, prevButtonLabel, nextButtonLabel, defaultPage, hideNextButton, hidePrevButton, hideFirstButton, hideLastButton, hideLabels, onValueChange } = _a, props = __rest(_a, [\"count\", \"isDisabled\", \"page\", \"prevButtonLabel\", \"nextButtonLabel\", \"defaultPage\", \"hideNextButton\", \"hidePrevButton\", \"hideFirstButton\", \"hideLastButton\", \"hideLabels\", \"onValueChange\"]);\n    const initialPage = defaultPage || 1;\n    const [currentPageNumber, setCurrentPageNumber] = useState(initialPage);\n    const [isFirstMount, setIsFirstMount] = useState(true);\n    const [prevStatePageNumber, setPrevStatePageNumber] = useState();\n    useEffect(() => {\n        currentPageNumber && onValueChange && onValueChange(currentPageNumber);\n    }, [currentPageNumber, onValueChange]);\n    useEffect(() => {\n        isFirstMount ? setIsFirstMount(false) : page && !isDisabled && setCurrentPageNumber(page);\n    }, [isDisabled, isFirstMount, page]);\n    const handleChange = useCallback((event, pageNumber) => {\n        setCurrentPageNumber(pageNumber);\n    }, []);\n    const handleValueChange = (payload) => {\n        if (payload === '') {\n            setPrevStatePageNumber(currentPageNumber);\n            setCurrentPageNumber(payload);\n        }\n        const castToNum = parseInt(payload);\n        if (typeof castToNum === 'number' && isPageNumberValid(castToNum, count)) {\n            setPrevStatePageNumber(castToNum);\n            setCurrentPageNumber(castToNum);\n        }\n    };\n    const mobilePagination = () => (_jsx(\"div\", { style: { display: 'flex', flexDirection: 'column' }, className: `mobileView ${isDisabled ? 'paginationDisabled' : ''}`, children: _jsxs(\"div\", { className: \"mobileContainer\", children: [mobileIconButton('chevron-previous', () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(1), !isPageNumberValid(currentPageNumber - 1, count)), mobileIconButton('cehvron-left', () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(currentPageNumber - 1), !isPageNumberValid(currentPageNumber - 1, count), 'back', hideLabels, prevButtonLabel), _jsx(TextField, { className: \"textFieldContainer\", value: currentPageNumber, inputProps: { inputMode: 'numeric', pattern: `[1-${count}]*` }, onChange: (val) => handleValueChange(val.target.value), onBlur: () => currentPageNumber === '' && setCurrentPageNumber(prevStatePageNumber) }), mobileIconButton('chevron-right', () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(currentPageNumber + 1), !isPageNumberValid(currentPageNumber + 1, count), 'forward', hideLabels, nextButtonLabel), mobileIconButton('chevron-next', () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(count), !isPageNumberValid(currentPageNumber + 1, count))] }) }));\n    const desktopPagination = () => (_jsx(MuiPagination, Object.assign({ className: \"desktopView\" }, props, { shape: \"rounded\", count: count, disabled: isDisabled, page: currentPageNumber, hideNextButton: hideNextButton, hidePrevButton: hidePrevButton, showFirstButton: !hideFirstButton, showLastButton: !hideLastButton, ref: ref, onChange: handleChange, renderItem: (item) => (_jsx(MuiPaginationItem, Object.assign({ className: ternaryCondition(hidePrevButton, false, 'MuiPagination-prev', ''), components: {\n                first: () => _jsx(Icon, { className: 'play-previous', fontSize: \"small\" }),\n                last: () => _jsx(Icon, { className: 'play-next', fontSize: \"small\" }),\n                previous: () => (_jsxs(_Fragment, { children: [_jsx(Icon, { className: 'cehvron-left', fontSize: \"small\" }), _jsx(_Fragment, { children: prevButtonLabel })] })),\n                next: () => (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: nextButtonLabel }), _jsx(Icon, { className: 'chevron-right', fontSize: \"small\" })] })),\n            } }, item))) })));\n    return (_jsxs(PaginationStyled, { \"data-testid\": \"Pagination-wrapper\", children: [desktopPagination(), \" \", mobilePagination()] }));\n});\n/**\n * @description Pagination styling definition based on props\n */\nconst PaginationStyled = styled('div')(({ theme }) => {\n    let style = {};\n    const flexStyle = {\n        alignItems: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        width: '100%',\n    };\n    style = {\n        [theme.breakpoints.up('md')]: {\n            '& .mobileView': {\n                display: 'none!important',\n            },\n        },\n        [theme.breakpoints.down('md')]: {\n            '& .desktopView': {\n                display: 'none!important',\n            },\n        },\n        '& .desktopView': {\n            '& .MuiButton-startIcon': {\n                marginRight: '8px',\n                display: 'inline-flex',\n            },\n            '& .MuiButton-endIcon': {\n                marginLeft: '8px',\n                display: 'inline-flex',\n            },\n        },\n        '& .mobileView': Object.assign(Object.assign({}, flexStyle), { flexDirection: 'column', flexWrap: 'nowrap', '& .mobileContainer': Object.assign(Object.assign({}, flexStyle), { flexWrap: 'nowrap' }), '& .textFieldContainer': {\n                height: '36px',\n                margin: '0 34px',\n                '& input, fieldset': {\n                    backgroundColor: flowColors.transparent.primary,\n                    border: 0,\n                    borderRadius: '4px',\n                    fontSize: '16px',\n                    fontWeight: '400',\n                    height: '36px',\n                    lineHeight: '36px',\n                    minWidth: '44px',\n                    maxWidth: '50px',\n                    padding: '0 4px',\n                    textAlign: 'center',\n                    color: flowColors.text.primary,\n                },\n                '& fieldset': {\n                    visibility: 'hidden',\n                },\n                '& div': {\n                    '&::before': {\n                        borderBottom: 0,\n                    },\n                    '&::after': {\n                        borderBottom: 0,\n                    },\n                },\n            }, '& .controllerContainer': {\n                '& .arrowLabel': {\n                    color: flowColors.text.primary,\n                    fontSize: '16px',\n                    fontWeight: '400',\n                    lineHeight: '16px',\n                },\n                '& .MuiButton-startIcon': {\n                    marginRight: '8px',\n                    display: 'inline-flex',\n                },\n                '& .MuiButton-endIcon': {\n                    marginLeft: '8px',\n                    display: 'inline-flex',\n                },\n                '& .MuiIcon-root': {\n                    fontSize: '16px',\n                    width: '20px',\n                    height: '20px',\n                },\n            }, '& .counter_label': {\n                color: flowColors.text.primary,\n                fontSize: '12px',\n                fontWeight: '400',\n                lineHeight: '24px',\n                marginTop: '4px',\n            }, '&.paginationDisabled': {\n                pointerEvents: 'none',\n                '& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset': {\n                    color: flowColors.disabled.primary,\n                },\n            } }),\n    };\n    return style;\n});\n//# sourceMappingURL=pagination.js.map"],"names":["isPageNumberValid","pageNumber","count","parseInt","mobileIconButton","muiIcon","onClick","disabled","direction","hideLabel","label","_jsxs","jsxs","IconButton","variant","children","_jsx","jsx","Icon","className","Pagination","forwardRef","_a","ref","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange","props","__rest","initialPage","currentPageNumber","setCurrentPageNumber","useState","isFirstMount","setIsFirstMount","prevStatePageNumber","setPrevStatePageNumber","useEffect","handleChange","useCallback","event","PaginationStyled","MuiPagination","Object","assign","shape","showFirstButton","showLastButton","onChange","renderItem","item","MuiPaginationItem","default","ternaryCondition","components","first","fontSize","last","previous","_Fragment","Fragment","next","style","display","flexDirection","TextField","value","inputProps","inputMode","pattern","val","payload","castToNum","handleValueChange","target","onBlur","styled","theme","flexStyle","alignItems","justifyContent","width","breakpoints","up","down","marginRight","marginLeft","flexWrap","height","margin","backgroundColor","flowColors","transparent","primary","border","borderRadius","fontWeight","lineHeight","minWidth","maxWidth","padding","textAlign","color","text","visibility","borderBottom","marginTop","pointerEvents"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport MuiPagination from '@mui/material/Pagination';\nimport MuiPaginationItem from '@mui/material/PaginationItem';\nimport TextField from '@mui/material/TextField';\nimport { styled } from '@mui/material/styles';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport { ternaryCondition } from '../../utils/utilities';\nimport { IconButton } from '../iconButton';\nimport { Icon } from '../icon';\n/**\n * @description SkodaFlow Pagination component.\n * Properties are inherited from HTML div Attribetes element.\n * @param props PaginationProps\n * @returns React Functional Component\n */\nconst isPageNumberValid = (pageNumber, count) => {\n    return (pageNumber === '' ||\n        (typeof pageNumber === 'number' && pageNumber - 1 > 0 && pageNumber + 1 <= count) ||\n        (typeof parseInt(pageNumber) === 'number' && parseInt(pageNumber) > 0 && parseInt(pageNumber) <= count));\n};\nconst mobileIconButton = (muiIcon, onClick, disabled, direction, hideLabel, label) => (_jsxs(IconButton, { variant: \"standard\", onClick: onClick, disabled: disabled, children: [direction === 'forward' && !hideLabel && label, _jsx(Icon, { name: muiIcon }), direction === 'back' && !hideLabel && label] }));\nexport const Pagination = forwardRef((_a, ref) => {\n    var { count, isDisabled, page, prevButtonLabel, nextButtonLabel, defaultPage, hideNextButton, hidePrevButton, hideFirstButton, hideLastButton, hideLabels, onValueChange } = _a, props = __rest(_a, [\"count\", \"isDisabled\", \"page\", \"prevButtonLabel\", \"nextButtonLabel\", \"defaultPage\", \"hideNextButton\", \"hidePrevButton\", \"hideFirstButton\", \"hideLastButton\", \"hideLabels\", \"onValueChange\"]);\n    const initialPage = defaultPage || 1;\n    const [currentPageNumber, setCurrentPageNumber] = useState(initialPage);\n    const [isFirstMount, setIsFirstMount] = useState(true);\n    const [prevStatePageNumber, setPrevStatePageNumber] = useState();\n    useEffect(() => {\n        currentPageNumber && onValueChange && onValueChange(currentPageNumber);\n    }, [currentPageNumber, onValueChange]);\n    useEffect(() => {\n        isFirstMount ? setIsFirstMount(false) : page && !isDisabled && setCurrentPageNumber(page);\n    }, [isDisabled, isFirstMount, page]);\n    const handleChange = useCallback((event, pageNumber) => {\n        setCurrentPageNumber(pageNumber);\n    }, []);\n    const handleValueChange = (payload) => {\n        if (payload === '') {\n            setPrevStatePageNumber(currentPageNumber);\n            setCurrentPageNumber(payload);\n        }\n        const castToNum = parseInt(payload);\n        if (typeof castToNum === 'number' && isPageNumberValid(castToNum, count)) {\n            setPrevStatePageNumber(castToNum);\n            setCurrentPageNumber(castToNum);\n        }\n    };\n    const mobilePagination = () => (_jsx(\"div\", { style: { display: 'flex', flexDirection: 'column' }, className: `mobileView ${isDisabled ? 'paginationDisabled' : ''}`, children: _jsxs(\"div\", { className: \"mobileContainer\", children: [mobileIconButton('chevron-previous', () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(1), !isPageNumberValid(currentPageNumber - 1, count)), mobileIconButton('chevron-left', () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(currentPageNumber - 1), !isPageNumberValid(currentPageNumber - 1, count), 'back', hideLabels, prevButtonLabel), _jsx(TextField, { className: \"textFieldContainer\", value: currentPageNumber, inputProps: { inputMode: 'numeric', pattern: `[1-${count}]*` }, onChange: (val) => handleValueChange(val.target.value), onBlur: () => currentPageNumber === '' && setCurrentPageNumber(prevStatePageNumber) }), mobileIconButton('chevron-right', () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(currentPageNumber + 1), !isPageNumberValid(currentPageNumber + 1, count), 'forward', hideLabels, nextButtonLabel), mobileIconButton('chevron-next', () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(count), !isPageNumberValid(currentPageNumber + 1, count))] }) }));\n    const desktopPagination = () => (_jsx(MuiPagination, Object.assign({ className: \"desktopView\" }, props, { shape: \"rounded\", count: count, disabled: isDisabled, page: currentPageNumber, hideNextButton: hideNextButton, hidePrevButton: hidePrevButton, showFirstButton: !hideFirstButton, showLastButton: !hideLastButton, ref: ref, onChange: handleChange, renderItem: (item) => (_jsx(MuiPaginationItem, Object.assign({ className: ternaryCondition(hidePrevButton, false, 'MuiPagination-prev', ''), components: {\n                first: () => _jsx(Icon, { name: \"previous\", fontSize: \"small\" }),\n                last: () => _jsx(Icon, { name: \"next\", fontSize: \"small\" }),\n                previous: () => (_jsxs(_Fragment, { children: [_jsx(Icon, { name: \"chevron-left\", fontSize: \"small\" }), _jsx(_Fragment, { children: prevButtonLabel })] })),\n                next: () => (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: nextButtonLabel }), _jsx(Icon, { name: \"chevron-right\", fontSize: \"small\" })] })),\n            } }, item))) })));\n    return (_jsxs(PaginationStyled, { \"data-testid\": \"Pagination-wrapper\", children: [desktopPagination(), \" \", mobilePagination()] }));\n});\n/**\n * @description Pagination styling definition based on props\n */\nconst PaginationStyled = styled('div')(({ theme }) => {\n    let style = {};\n    const flexStyle = {\n        alignItems: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        width: '100%',\n    };\n    style = {\n        [theme.breakpoints.up('md')]: {\n            '& .mobileView': {\n                display: 'none!important',\n            },\n        },\n        [theme.breakpoints.down('md')]: {\n            '& .desktopView': {\n                display: 'none!important',\n            },\n        },\n        '& .desktopView': {\n            '& .MuiButton-startIcon': {\n                marginRight: '8px',\n                display: 'inline-flex',\n            },\n            '& .MuiButton-endIcon': {\n                marginLeft: '8px',\n                display: 'inline-flex',\n            },\n        },\n        '& .mobileView': Object.assign(Object.assign({}, flexStyle), { flexDirection: 'column', flexWrap: 'nowrap', '& .mobileContainer': Object.assign(Object.assign({}, flexStyle), { flexWrap: 'nowrap' }), '& .textFieldContainer': {\n                height: '36px',\n                margin: '0 34px',\n                '& input, fieldset': {\n                    backgroundColor: flowColors.transparent.primary,\n                    border: 0,\n                    borderRadius: '4px',\n                    fontSize: '16px',\n                    fontWeight: '400',\n                    height: '36px',\n                    lineHeight: '36px',\n                    minWidth: '44px',\n                    maxWidth: '50px',\n                    padding: '0 4px',\n                    textAlign: 'center',\n                    color: flowColors.text.primary,\n                },\n                '& fieldset': {\n                    visibility: 'hidden',\n                },\n                '& div': {\n                    '&::before': {\n                        borderBottom: 0,\n                    },\n                    '&::after': {\n                        borderBottom: 0,\n                    },\n                },\n            }, '& .controllerContainer': {\n                '& .arrowLabel': {\n                    color: flowColors.text.primary,\n                    fontSize: '16px',\n                    fontWeight: '400',\n                    lineHeight: '16px',\n                },\n                '& .MuiButton-startIcon': {\n                    marginRight: '8px',\n                    display: 'inline-flex',\n                },\n                '& .MuiButton-endIcon': {\n                    marginLeft: '8px',\n                    display: 'inline-flex',\n                },\n                '& .MuiIcon-root': {\n                    fontSize: '16px',\n                    width: '20px',\n                    height: '20px',\n                },\n            }, '& .counter_label': {\n                color: flowColors.text.primary,\n                fontSize: '12px',\n                fontWeight: '400',\n                lineHeight: '24px',\n                marginTop: '4px',\n            }, '&.paginationDisabled': {\n                pointerEvents: 'none',\n                '& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset': {\n                    color: flowColors.disabled.primary,\n                },\n            } }),\n    };\n    return style;\n});\n//# sourceMappingURL=pagination.js.map"],"names":["isPageNumberValid","pageNumber","count","parseInt","mobileIconButton","muiIcon","onClick","disabled","direction","hideLabel","label","_jsxs","jsxs","IconButton","variant","children","_jsx","jsx","Icon","name","Pagination","forwardRef","_a","ref","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange","props","__rest","initialPage","currentPageNumber","setCurrentPageNumber","useState","isFirstMount","setIsFirstMount","prevStatePageNumber","setPrevStatePageNumber","useEffect","handleChange","useCallback","event","PaginationStyled","MuiPagination","Object","assign","className","shape","showFirstButton","showLastButton","onChange","renderItem","item","MuiPaginationItem","default","ternaryCondition","components","first","fontSize","last","previous","_Fragment","Fragment","next","style","display","flexDirection","TextField","value","inputProps","inputMode","pattern","val","payload","castToNum","handleValueChange","target","onBlur","styled","theme","flexStyle","alignItems","justifyContent","width","breakpoints","up","down","marginRight","marginLeft","flexWrap","height","margin","backgroundColor","flowColors","transparent","primary","border","borderRadius","fontWeight","lineHeight","minWidth","maxWidth","padding","textAlign","color","text","visibility","borderBottom","marginTop","pointerEvents"],"mappings":"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"}

package/cjs/components/progressBar/components/loader.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),a=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react"),s=require("../../icon/icon.js"),i=require("./styledProgressBarMessage.js");const n=r.forwardRef(((t,r)=>{var{state:n,errorMessage:o,successMessage:d,loaderSize:c,loadingPercentage:g,loadingPercentageDescribeText:m}=t,x=e.__rest(t,["state","errorMessage","successMessage","loaderSize","loadingPercentage","loadingPercentageDescribeText"]);return"error"===n?a.jsxs(i.StyledProgressBarMessage,{state:n,hasJustifyContent:!0,"data-testid":"Loader",children:[a.jsx(s.Icon,{className:"circle-multiply",fontSize:"medium",iconStyle:"filled"}),a.jsx("span",{className:"message",children:o})]}):"success"===n?a.jsxs(i.StyledProgressBarMessage,{state:n,hasJustifyContent:!0,"data-testid":"Loader",children:[a.jsx(s.Icon,{className:"circle-check",fontSize:"medium",iconStyle:"filled",color:"primary"}),a.jsx("span",{className:"message",children:d})]}):a.jsxs(l,Object.assign({loaderSize:c,loadingPercentage:g},x,{ref:r,"data-testid":"Loader",children:[(Boolean(g)||0===g)&&a.jsx("span",{className:"loading-text","data-testid":"Loader.percentage",children:m?`${m} ${g} %`:`${g} %`}),a.jsx("div",{className:"bar",children:a.jsx("div",{className:"mainBar"})})]}))})),l=t.styled("div",{shouldForwardProp:e=>"loaderSize"!==e&&"loadingPercentage"!==e})((a=>{var{theme:t}=a,r=e.__rest(a,["theme"]);const s="small"===r.loaderSize?"4px":"8px",i={width:"100%",maxWidth:"0",height:s,background:t.palette.brand.primary,animation:"animate 8s infinite",transition:null};(r.loadingPercentage||0===r.loadingPercentage)&&(i.maxWidth=`${r.loadingPercentage}%`,i.animation=null,i.transition="max-width 1s");let n={};return n={fontSize:"14px",lineHeight:"20px",color:t.palette.onSurface.os900,display:"flex",flexDirection:"column",fontWeight:500,"& .loading-text":{alignSelf:"flex-end",marginBottom:"4px",fontSize:"14px",lineHeight:"20px",color:t.palette.onSurface.os900},"@keyframes animate":{" 0%":{maxWidth:"0%"},"20%":{maxWidth:"20%"},"50%":{maxWidth:"50%"},"100%":{maxWidth:"100%"}},"& .bar":{width:" 100%",height:s,overflow:"hidden",background:t.palette.onSurface.os100,display:"inline-block","& > .mainBar":i}},n}));exports.Loader=n;
+"use strict";var e=require("tslib"),a=require("react/jsx-runtime"),i=require("@mui/material"),r=require("react"),t=require("../../icon/icon.js");require("../../icon/icon.definitions.js");var s=require("./styledProgressBarMessage.js");const n=r.forwardRef(((i,r)=>{var{state:n,errorMessage:l,successMessage:d,loaderSize:c,loadingPercentage:g,loadingPercentageDescribeText:m}=i,x=e.__rest(i,["state","errorMessage","successMessage","loaderSize","loadingPercentage","loadingPercentageDescribeText"]);return"error"===n?a.jsxs(s.StyledProgressBarMessage,{state:n,hasJustifyContent:!0,"data-testid":"Loader",children:[a.jsx(t.Icon,{name:"circle-close",fontSize:"medium",iconStyle:"filled"}),a.jsx("span",{className:"message",children:l})]}):"success"===n?a.jsxs(s.StyledProgressBarMessage,{state:n,hasJustifyContent:!0,"data-testid":"Loader",children:[a.jsx(t.Icon,{name:"circle-check",fontSize:"medium",iconStyle:"filled",color:"primary"}),a.jsx("span",{className:"message",children:d})]}):a.jsxs(o,Object.assign({loaderSize:c,loadingPercentage:g},x,{ref:r,"data-testid":"Loader",children:[(Boolean(g)||0===g)&&a.jsx("span",{className:"loading-text","data-testid":"Loader.percentage",children:m?`${m} ${g} %`:`${g} %`}),a.jsx("div",{className:"bar",children:a.jsx("div",{className:"mainBar"})})]}))})),o=i.styled("div",{shouldForwardProp:e=>"loaderSize"!==e&&"loadingPercentage"!==e})((a=>{var{theme:i}=a,r=e.__rest(a,["theme"]);const t="small"===r.loaderSize?"4px":"8px",s={width:"100%",maxWidth:"0",height:t,background:i.palette.brand.primary,animation:"animate 8s infinite",transition:null};(r.loadingPercentage||0===r.loadingPercentage)&&(s.maxWidth=`${r.loadingPercentage}%`,s.animation=null,s.transition="max-width 1s");let n={};return n={fontSize:"14px",lineHeight:"20px",color:i.palette.onSurface.os900,display:"flex",flexDirection:"column",fontWeight:500,"& .loading-text":{alignSelf:"flex-end",marginBottom:"4px",fontSize:"14px",lineHeight:"20px",color:i.palette.onSurface.os900},"@keyframes animate":{" 0%":{maxWidth:"0%"},"20%":{maxWidth:"20%"},"50%":{maxWidth:"50%"},"100%":{maxWidth:"100%"}},"& .bar":{width:" 100%",height:t,overflow:"hidden",background:i.palette.onSurface.os100,display:"inline-block","& > .mainBar":s}},n}));exports.Loader=n;
 //# sourceMappingURL=loader.js.map

package/cjs/components/progressBar/components/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sources":["../../../../../src/components/progressBar/components/loader.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { styled } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { Icon } from '../../icon';\nimport { StyledProgressBarMessage } from './styledProgressBarMessage';\nexport const Loader = forwardRef((_a, ref) => {\n    var { state, errorMessage, successMessage, loaderSize, loadingPercentage, loadingPercentageDescribeText } = _a, props = __rest(_a, [\"state\", \"errorMessage\", \"successMessage\", \"loaderSize\", \"loadingPercentage\", \"loadingPercentageDescribeText\"]);\n    if (state === 'error')\n        return (_jsxs(StyledProgressBarMessage, { state: state, hasJustifyContent: true, \"data-testid\": \"Loader\", children: [_jsx(Icon, { className: \"circle-multiply\", fontSize: \"medium\", iconStyle: \"filled\" }), _jsx(\"span\", { className: \"message\", children: errorMessage })] }));\n    if (state === 'success')\n        return (_jsxs(StyledProgressBarMessage, { state: state, hasJustifyContent: true, \"data-testid\": \"Loader\", children: [_jsx(Icon, { className: \"circle-check\", fontSize: \"medium\", iconStyle: \"filled\", color: \"primary\" }), _jsx(\"span\", { className: \"message\", children: successMessage })] }));\n    return (_jsxs(StyledLoader, Object.assign({ loaderSize: loaderSize, loadingPercentage: loadingPercentage }, props, { ref: ref, \"data-testid\": \"Loader\", children: [(Boolean(loadingPercentage) || loadingPercentage === 0) && (_jsx(\"span\", { className: \"loading-text\", \"data-testid\": \"Loader.percentage\", children: loadingPercentageDescribeText\n                    ? `${loadingPercentageDescribeText} ${loadingPercentage} %`\n                    : `${loadingPercentage} %` })), _jsx(\"div\", { className: \"bar\", children: _jsx(\"div\", { className: \"mainBar\" }) })] })));\n});\nconst StyledLoader = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'loaderSize' && prop !== 'loadingPercentage',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const height = args.loaderSize === 'small' ? '4px' : '8px';\n    const mainBarStyles = {\n        width: '100%',\n        maxWidth: '0',\n        height: height,\n        background: theme.palette.brand.primary,\n        animation: 'animate 8s infinite',\n        transition: null,\n    };\n    if (args.loadingPercentage || args.loadingPercentage === 0) {\n        mainBarStyles.maxWidth = `${args.loadingPercentage}%`;\n        mainBarStyles.animation = null;\n        mainBarStyles.transition = 'max-width 1s';\n    }\n    let styles = {};\n    styles = {\n        fontSize: '14px',\n        lineHeight: '20px',\n        color: theme.palette.onSurface.os900,\n        display: 'flex',\n        flexDirection: 'column',\n        fontWeight: 500,\n        '& .loading-text': {\n            alignSelf: 'flex-end',\n            marginBottom: '4px',\n            fontSize: '14px',\n            lineHeight: '20px',\n            color: theme.palette.onSurface.os900,\n        },\n        '@keyframes animate': {\n            ' 0%': {\n                maxWidth: '0%',\n            },\n            '20%': {\n                maxWidth: '20%',\n            },\n            '50%': {\n                maxWidth: '50%',\n            },\n            '100%': {\n                maxWidth: '100%',\n            },\n        },\n        '& .bar': {\n            width: ' 100%',\n            height: height,\n            overflow: 'hidden',\n            background: theme.palette.onSurface.os100,\n            display: 'inline-block',\n            '& > .mainBar': mainBarStyles,\n        },\n    };\n    return styles;\n});\n//# sourceMappingURL=loader.js.map"],"names":["Loader","forwardRef","_a","ref","state","errorMessage","successMessage","loaderSize","loadingPercentage","loadingPercentageDescribeText","props","__rest","_jsxs","jsxs","StyledProgressBarMessage","hasJustifyContent","children","_jsx","Icon","className","fontSize","iconStyle","color","jsx","StyledLoader","Object","assign","Boolean","styled","shouldForwardProp","prop","theme","args","height","mainBarStyles","width","maxWidth","background","palette","brand","primary","animation","transition","styles","lineHeight","onSurface","os900","display","flexDirection","fontWeight","alignSelf","marginBottom","overflow","os100"],"mappings":"4LAMY,MAACA,EAASC,EAAUA,YAAC,CAACC,EAAIC,KAClC,IAAIC,MAAEA,EAAKC,aAAEA,EAAYC,eAAEA,EAAcC,WAAEA,EAAUC,kBAAEA,EAAiBC,8BAAEA,GAAkCP,EAAIQ,EAAQC,EAAAA,OAAOT,EAAI,CAAC,QAAS,eAAgB,iBAAkB,aAAc,oBAAqB,kCAClN,MAAc,UAAVE,EACQQ,EAAKC,KAACC,EAAwBA,yBAAE,CAAEV,MAAOA,EAAOW,mBAAmB,EAAM,cAAe,SAAUC,SAAU,CAACC,EAAAA,IAAKC,EAAAA,KAAM,CAAEC,UAAW,kBAAmBC,SAAU,SAAUC,UAAW,WAAaJ,EAAAA,IAAK,OAAQ,CAAEE,UAAW,UAAWH,SAAUX,OACjP,YAAVD,EACQQ,EAAAA,KAAME,EAAAA,yBAA0B,CAAEV,MAAOA,EAAOW,mBAAmB,EAAM,cAAe,SAAUC,SAAU,CAACC,EAAAA,IAAKC,EAAAA,KAAM,CAAEC,UAAW,eAAgBC,SAAU,SAAUC,UAAW,SAAUC,MAAO,YAAcL,EAAIM,IAAC,OAAQ,CAAEJ,UAAW,UAAWH,SAAUV,OACtQM,EAAKC,KAACW,EAAcC,OAAOC,OAAO,CAAEnB,WAAYA,EAAYC,kBAAmBA,GAAqBE,EAAO,CAAEP,IAAKA,EAAK,cAAe,SAAUa,SAAU,EAAEW,QAAQnB,IAA4C,IAAtBA,IAA6BS,EAAAA,IAAK,OAAQ,CAAEE,UAAW,eAAgB,cAAe,oBAAqBH,SAAUP,EACrS,GAAGA,KAAiCD,MACpC,GAAGA,QAA2BS,MAAK,MAAO,CAAEE,UAAW,MAAOH,SAAUC,EAAIM,IAAC,MAAO,CAAEJ,UAAW,iBAAsB,IAEvIK,EAAeI,EAAMA,OAAC,MAAO,CAC/BC,kBAAoBC,GAAkB,eAATA,GAAkC,sBAATA,GADrCF,EAEjB1B,IACA,IAAI6B,MAAEA,GAAU7B,EAAI8B,EAAOrB,EAAAA,OAAOT,EAAI,CAAC,UACvC,MAAM+B,EAA6B,UAApBD,EAAKzB,WAAyB,MAAQ,MAC/C2B,EAAgB,CAClBC,MAAO,OACPC,SAAU,IACVH,OAAQA,EACRI,WAAYN,EAAMO,QAAQC,MAAMC,QAChCC,UAAW,sBACXC,WAAY,OAEZV,EAAKxB,mBAAgD,IAA3BwB,EAAKxB,qBAC/B0B,EAAcE,SAAW,GAAGJ,EAAKxB,qBACjC0B,EAAcO,UAAY,KAC1BP,EAAcQ,WAAa,gBAE/B,IAAIC,EAAS,CAAA,EAsCb,OArCAA,EAAS,CACLvB,SAAU,OACVwB,WAAY,OACZtB,MAAOS,EAAMO,QAAQO,UAAUC,MAC/BC,QAAS,OACTC,cAAe,SACfC,WAAY,IACZ,kBAAmB,CACfC,UAAW,WACXC,aAAc,MACd/B,SAAU,OACVwB,WAAY,OACZtB,MAAOS,EAAMO,QAAQO,UAAUC,OAEnC,qBAAsB,CAClB,MAAO,CACHV,SAAU,MAEd,MAAO,CACHA,SAAU,OAEd,MAAO,CACHA,SAAU,OAEd,OAAQ,CACJA,SAAU,SAGlB,SAAU,CACND,MAAO,QACPF,OAAQA,EACRmB,SAAU,SACVf,WAAYN,EAAMO,QAAQO,UAAUQ,MACpCN,QAAS,eACT,eAAgBb,IAGjBS,CAAM"}
+{"version":3,"file":"loader.js","sources":["../../../../../src/components/progressBar/components/loader.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { styled } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { Icon } from '../../icon';\nimport { StyledProgressBarMessage } from './styledProgressBarMessage';\nexport const Loader = forwardRef((_a, ref) => {\n    var { state, errorMessage, successMessage, loaderSize, loadingPercentage, loadingPercentageDescribeText } = _a, props = __rest(_a, [\"state\", \"errorMessage\", \"successMessage\", \"loaderSize\", \"loadingPercentage\", \"loadingPercentageDescribeText\"]);\n    if (state === 'error')\n        return (_jsxs(StyledProgressBarMessage, { state: state, hasJustifyContent: true, \"data-testid\": \"Loader\", children: [_jsx(Icon, { name: \"circle-close\", fontSize: \"medium\", iconStyle: \"filled\" }), _jsx(\"span\", { className: \"message\", children: errorMessage })] }));\n    if (state === 'success')\n        return (_jsxs(StyledProgressBarMessage, { state: state, hasJustifyContent: true, \"data-testid\": \"Loader\", children: [_jsx(Icon, { name: \"circle-check\", fontSize: \"medium\", iconStyle: \"filled\", color: \"primary\" }), _jsx(\"span\", { className: \"message\", children: successMessage })] }));\n    return (_jsxs(StyledLoader, Object.assign({ loaderSize: loaderSize, loadingPercentage: loadingPercentage }, props, { ref: ref, \"data-testid\": \"Loader\", children: [(Boolean(loadingPercentage) || loadingPercentage === 0) && (_jsx(\"span\", { className: \"loading-text\", \"data-testid\": \"Loader.percentage\", children: loadingPercentageDescribeText\n                    ? `${loadingPercentageDescribeText} ${loadingPercentage} %`\n                    : `${loadingPercentage} %` })), _jsx(\"div\", { className: \"bar\", children: _jsx(\"div\", { className: \"mainBar\" }) })] })));\n});\nconst StyledLoader = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'loaderSize' && prop !== 'loadingPercentage',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const height = args.loaderSize === 'small' ? '4px' : '8px';\n    const mainBarStyles = {\n        width: '100%',\n        maxWidth: '0',\n        height: height,\n        background: theme.palette.brand.primary,\n        animation: 'animate 8s infinite',\n        transition: null,\n    };\n    if (args.loadingPercentage || args.loadingPercentage === 0) {\n        mainBarStyles.maxWidth = `${args.loadingPercentage}%`;\n        mainBarStyles.animation = null;\n        mainBarStyles.transition = 'max-width 1s';\n    }\n    let styles = {};\n    styles = {\n        fontSize: '14px',\n        lineHeight: '20px',\n        color: theme.palette.onSurface.os900,\n        display: 'flex',\n        flexDirection: 'column',\n        fontWeight: 500,\n        '& .loading-text': {\n            alignSelf: 'flex-end',\n            marginBottom: '4px',\n            fontSize: '14px',\n            lineHeight: '20px',\n            color: theme.palette.onSurface.os900,\n        },\n        '@keyframes animate': {\n            ' 0%': {\n                maxWidth: '0%',\n            },\n            '20%': {\n                maxWidth: '20%',\n            },\n            '50%': {\n                maxWidth: '50%',\n            },\n            '100%': {\n                maxWidth: '100%',\n            },\n        },\n        '& .bar': {\n            width: ' 100%',\n            height: height,\n            overflow: 'hidden',\n            background: theme.palette.onSurface.os100,\n            display: 'inline-block',\n            '& > .mainBar': mainBarStyles,\n        },\n    };\n    return styles;\n});\n//# sourceMappingURL=loader.js.map"],"names":["Loader","forwardRef","_a","ref","state","errorMessage","successMessage","loaderSize","loadingPercentage","loadingPercentageDescribeText","props","__rest","_jsxs","jsxs","StyledProgressBarMessage","hasJustifyContent","children","_jsx","Icon","name","fontSize","iconStyle","className","color","jsx","StyledLoader","Object","assign","Boolean","styled","shouldForwardProp","prop","theme","args","height","mainBarStyles","width","maxWidth","background","palette","brand","primary","animation","transition","styles","lineHeight","onSurface","os900","display","flexDirection","fontWeight","alignSelf","marginBottom","overflow","os100"],"mappings":"0OAMY,MAACA,EAASC,EAAUA,YAAC,CAACC,EAAIC,KAClC,IAAIC,MAAEA,EAAKC,aAAEA,EAAYC,eAAEA,EAAcC,WAAEA,EAAUC,kBAAEA,EAAiBC,8BAAEA,GAAkCP,EAAIQ,EAAQC,EAAAA,OAAOT,EAAI,CAAC,QAAS,eAAgB,iBAAkB,aAAc,oBAAqB,kCAClN,MAAc,UAAVE,EACQQ,EAAKC,KAACC,EAAwBA,yBAAE,CAAEV,MAAOA,EAAOW,mBAAmB,EAAM,cAAe,SAAUC,SAAU,CAACC,EAAAA,IAAKC,EAAAA,KAAM,CAAEC,KAAM,eAAgBC,SAAU,SAAUC,UAAW,WAAaJ,EAAAA,IAAK,OAAQ,CAAEK,UAAW,UAAWN,SAAUX,OACzO,YAAVD,EACQQ,EAAAA,KAAME,EAAAA,yBAA0B,CAAEV,MAAOA,EAAOW,mBAAmB,EAAM,cAAe,SAAUC,SAAU,CAACC,EAAAA,IAAKC,EAAAA,KAAM,CAAEC,KAAM,eAAgBC,SAAU,SAAUC,UAAW,SAAUE,MAAO,YAAcN,EAAIO,IAAC,OAAQ,CAAEF,UAAW,UAAWN,SAAUV,OACjQM,EAAKC,KAACY,EAAcC,OAAOC,OAAO,CAAEpB,WAAYA,EAAYC,kBAAmBA,GAAqBE,EAAO,CAAEP,IAAKA,EAAK,cAAe,SAAUa,SAAU,EAAEY,QAAQpB,IAA4C,IAAtBA,IAA6BS,EAAAA,IAAK,OAAQ,CAAEK,UAAW,eAAgB,cAAe,oBAAqBN,SAAUP,EACrS,GAAGA,KAAiCD,MACpC,GAAGA,QAA2BS,MAAK,MAAO,CAAEK,UAAW,MAAON,SAAUC,EAAIO,IAAC,MAAO,CAAEF,UAAW,iBAAsB,IAEvIG,EAAeI,EAAMA,OAAC,MAAO,CAC/BC,kBAAoBC,GAAkB,eAATA,GAAkC,sBAATA,GADrCF,EAEjB3B,IACA,IAAI8B,MAAEA,GAAU9B,EAAI+B,EAAOtB,EAAAA,OAAOT,EAAI,CAAC,UACvC,MAAMgC,EAA6B,UAApBD,EAAK1B,WAAyB,MAAQ,MAC/C4B,EAAgB,CAClBC,MAAO,OACPC,SAAU,IACVH,OAAQA,EACRI,WAAYN,EAAMO,QAAQC,MAAMC,QAChCC,UAAW,sBACXC,WAAY,OAEZV,EAAKzB,mBAAgD,IAA3ByB,EAAKzB,qBAC/B2B,EAAcE,SAAW,GAAGJ,EAAKzB,qBACjC2B,EAAcO,UAAY,KAC1BP,EAAcQ,WAAa,gBAE/B,IAAIC,EAAS,CAAA,EAsCb,OArCAA,EAAS,CACLxB,SAAU,OACVyB,WAAY,OACZtB,MAAOS,EAAMO,QAAQO,UAAUC,MAC/BC,QAAS,OACTC,cAAe,SACfC,WAAY,IACZ,kBAAmB,CACfC,UAAW,WACXC,aAAc,MACdhC,SAAU,OACVyB,WAAY,OACZtB,MAAOS,EAAMO,QAAQO,UAAUC,OAEnC,qBAAsB,CAClB,MAAO,CACHV,SAAU,MAEd,MAAO,CACHA,SAAU,OAEd,MAAO,CACHA,SAAU,OAEd,OAAQ,CACJA,SAAU,SAGlB,SAAU,CACND,MAAO,QACPF,OAAQA,EACRmB,SAAU,SACVf,WAAYN,EAAMO,QAAQO,UAAUQ,MACpCN,QAAS,eACT,eAAgBb,IAGjBS,CAAM"}

package/cjs/components/progressBar/components/spinner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),n=require("react"),t=require("@mui/material"),s=require("../../icon/icon.js"),a=require("./styledProgressBarMessage.js");const i=n.forwardRef(((n,t)=>{var{state:i,errorMessage:l,successMessage:c,loadingPercentage:d,loadingPercentageDescribeText:p,spinnerControlledAnimation:g}=n,m=e.__rest(n,["state","errorMessage","successMessage","loadingPercentage","loadingPercentageDescribeText","spinnerControlledAnimation"]);return"error"===i?r.jsxs(a.StyledProgressBarMessage,{state:i,"data-testid":"Spinner",children:[r.jsx(s.Icon,{className:"circle-multiply",fontSize:"medium",iconStyle:"filled"}),r.jsx("span",{className:"message",children:l})]}):"success"===i?r.jsxs(a.StyledProgressBarMessage,{state:i,"data-testid":"Spinner",children:[r.jsx(s.Icon,{className:"circle-check",fontSize:"medium",iconStyle:"filled",color:"primary"}),r.jsx("span",{className:"message",children:c})]}):r.jsxs(o,Object.assign({},m,{ref:t,spinnerControlledAnimation:g,loadingPercentage:d,"data-testid":"Spinner",children:[r.jsx("svg",{viewBox:"0 0 50 50",width:"24",height:"24",children:r.jsx("circle",{cx:"25",cy:"25",r:"22.5"})}),(Boolean(d)||0===d)&&r.jsx("span",{className:"loading-text","data-testid":"Spinner.percentage",children:p?`${p} ${d} %`:`${d} %`})]}))})),o=t.styled("div",{shouldForwardProp:e=>"spinnerControlledAnimation"!==e&&"loaderSize"!==e&&"loadingPercentage"!==e})((r=>{var{theme:n}=r,t=e.__rest(r,["theme"]);const s="137.130521355",a=141.3716715,i=t.spinnerControlledAnimation&&"infinite"!==t.spinnerControlledAnimation?{animationCircle:null,animationSpinner:null,strokeDashoffset:a-1.4137167149999998*t.loadingPercentage,strokeLinecap:null}:{animationCircle:"2s ease-in-out infinite both spinner-circle",animationSpinner:"2s linear infinite spinner",strokeLinecap:"square",strokeDashoffset:null};let o={};return o={transitionProperty:"opacity",transitionDuration:"0.3s",transitionTimingFunction:"ease-in-out",backgroundColor:"transparent",fontSize:"14px",lineHeight:"20px",width:"100%",display:"flex",color:n.palette.onSurface.os900,alignItems:"center",fontWeight:400,"& .loading-text":{marginLeft:"8px"},"& circle":{animation:i.animationCircle,display:"block",fill:"transparent",stroke:n.palette.brand.primary,strokeLinecap:i.strokeLinecap,strokeDasharray:a,strokeDashoffset:i.strokeDashoffset,strokeWidth:"10px",transformOrigin:"50% 50%"},"& svg":{background:`radial-gradient(ellipse at center, transparent 0%,transparent 48%,${n.palette.onSurface.os100} 49%,${n.palette.onSurface.os100} 100%)`,borderRadius:"50%",animation:i.animationSpinner},"& .initial-spinner.-done":{opacity:"0",pointerEvents:"none"},"@keyframes spinner":{"0%":{transform:"rotateZ(0)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes spinner-circle":{"0%":{strokeDashoffset:s,transform:"rotate(0)"},"25%":{strokeDashoffset:s,transform:"rotate(0)"},"50%":{},"75%":{strokeDashoffset:"35.342917875",transform:"rotate(45deg)"},"100%":{strokeDashoffset:s,transform:"rotate(360deg)"}}},o}));exports.Spinner=i;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),n=require("react"),t=require("@mui/material"),i=require("../../icon/icon.js");require("../../icon/icon.definitions.js");var s=require("./styledProgressBarMessage.js");const a=n.forwardRef(((n,t)=>{var{state:a,errorMessage:l,successMessage:c,loadingPercentage:d,loadingPercentageDescribeText:p,spinnerControlledAnimation:g}=n,f=e.__rest(n,["state","errorMessage","successMessage","loadingPercentage","loadingPercentageDescribeText","spinnerControlledAnimation"]);return"error"===a?r.jsxs(s.StyledProgressBarMessage,{state:a,"data-testid":"Spinner",children:[r.jsx(i.Icon,{name:"circle-close",fontSize:"medium",iconStyle:"filled"}),r.jsx("span",{className:"message",children:l})]}):"success"===a?r.jsxs(s.StyledProgressBarMessage,{state:a,"data-testid":"Spinner",children:[r.jsx(i.Icon,{name:"circle-check",fontSize:"medium",iconStyle:"filled",color:"primary"}),r.jsx("span",{className:"message",children:c})]}):r.jsxs(o,Object.assign({},f,{ref:t,spinnerControlledAnimation:g,loadingPercentage:d,"data-testid":"Spinner",children:[r.jsx("svg",{viewBox:"0 0 50 50",width:"24",height:"24",children:r.jsx("circle",{cx:"25",cy:"25",r:"22.5"})}),(Boolean(d)||0===d)&&r.jsx("span",{className:"loading-text","data-testid":"Spinner.percentage",children:p?`${p} ${d} %`:`${d} %`})]}))})),o=t.styled("div",{shouldForwardProp:e=>"spinnerControlledAnimation"!==e&&"loaderSize"!==e&&"loadingPercentage"!==e})((r=>{var{theme:n}=r,t=e.__rest(r,["theme"]);const i="137.130521355",s=141.3716715,a=t.spinnerControlledAnimation&&"infinite"!==t.spinnerControlledAnimation?{animationCircle:null,animationSpinner:null,strokeDashoffset:s-1.4137167149999998*t.loadingPercentage,strokeLinecap:null}:{animationCircle:"2s ease-in-out infinite both spinner-circle",animationSpinner:"2s linear infinite spinner",strokeLinecap:"square",strokeDashoffset:null};let o={};return o={transitionProperty:"opacity",transitionDuration:"0.3s",transitionTimingFunction:"ease-in-out",backgroundColor:"transparent",fontSize:"14px",lineHeight:"20px",width:"100%",display:"flex",color:n.palette.onSurface.os900,alignItems:"center",fontWeight:400,"& .loading-text":{marginLeft:"8px"},"& circle":{animation:a.animationCircle,display:"block",fill:"transparent",stroke:n.palette.brand.primary,strokeLinecap:a.strokeLinecap,strokeDasharray:s,strokeDashoffset:a.strokeDashoffset,strokeWidth:"10px",transformOrigin:"50% 50%"},"& svg":{background:`radial-gradient(ellipse at center, transparent 0%,transparent 48%,${n.palette.onSurface.os100} 49%,${n.palette.onSurface.os100} 100%)`,borderRadius:"50%",animation:a.animationSpinner},"& .initial-spinner.-done":{opacity:"0",pointerEvents:"none"},"@keyframes spinner":{"0%":{transform:"rotateZ(0)"},"100%":{transform:"rotateZ(360deg)"}},"@keyframes spinner-circle":{"0%":{strokeDashoffset:i,transform:"rotate(0)"},"25%":{strokeDashoffset:i,transform:"rotate(0)"},"50%":{},"75%":{strokeDashoffset:"35.342917875",transform:"rotate(45deg)"},"100%":{strokeDashoffset:i,transform:"rotate(360deg)"}}},o}));exports.Spinner=a;
 //# sourceMappingURL=spinner.js.map

package/cjs/components/progressBar/components/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../../../../src/components/progressBar/components/spinner.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport { styled } from '@mui/material';\nimport { Icon } from '../../icon';\nimport { StyledProgressBarMessage } from './styledProgressBarMessage';\nexport const Spinner = forwardRef((_a, ref) => {\n    var { state, errorMessage, successMessage, loadingPercentage, loadingPercentageDescribeText, spinnerControlledAnimation } = _a, props = __rest(_a, [\"state\", \"errorMessage\", \"successMessage\", \"loadingPercentage\", \"loadingPercentageDescribeText\", \"spinnerControlledAnimation\"]);\n    if (state === 'error')\n        return (_jsxs(StyledProgressBarMessage, { state: state, \"data-testid\": \"Spinner\", children: [_jsx(Icon, { className: \"circle-multiply\", fontSize: \"medium\", iconStyle: \"filled\" }), _jsx(\"span\", { className: \"message\", children: errorMessage })] }));\n    if (state === 'success')\n        return (_jsxs(StyledProgressBarMessage, { state: state, \"data-testid\": \"Spinner\", children: [_jsx(Icon, { className: \"circle-check\", fontSize: \"medium\", iconStyle: \"filled\", color: \"primary\" }), _jsx(\"span\", { className: \"message\", children: successMessage })] }));\n    return (_jsxs(StyledSpinner, Object.assign({}, props, { ref: ref, spinnerControlledAnimation: spinnerControlledAnimation, loadingPercentage: loadingPercentage, \"data-testid\": \"Spinner\", children: [_jsx(\"svg\", { viewBox: \"0 0 50 50\", width: \"24\", height: \"24\", children: _jsx(\"circle\", { cx: \"25\", cy: \"25\", r: \"22.5\" }) }), (Boolean(loadingPercentage) || loadingPercentage === 0) && (_jsx(\"span\", { className: \"loading-text\", \"data-testid\": \"Spinner.percentage\", children: loadingPercentageDescribeText\n                    ? `${loadingPercentageDescribeText} ${loadingPercentage} %`\n                    : `${loadingPercentage} %` }))] })));\n});\nconst StyledSpinner = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'spinnerControlledAnimation' && prop !== 'loaderSize' && prop !== 'loadingPercentage',\n})((_a) => {\n    var { theme } = _a, props = __rest(_a, [\"theme\"]);\n    const strokeDashOffset = '137.130521355';\n    const strokeDashArray = 141.3716715;\n    const animationStyles = !props.spinnerControlledAnimation || props.spinnerControlledAnimation === 'infinite'\n        ? {\n            animationCircle: '2s ease-in-out infinite both spinner-circle',\n            animationSpinner: '2s linear infinite spinner',\n            strokeLinecap: 'square',\n            strokeDashoffset: null,\n        }\n        : {\n            animationCircle: null,\n            animationSpinner: null,\n            strokeDashoffset: strokeDashArray - (strokeDashArray / 100) * props.loadingPercentage,\n            strokeLinecap: null,\n        };\n    let styles = {};\n    styles = {\n        transitionProperty: 'opacity',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease-in-out',\n        backgroundColor: 'transparent',\n        fontSize: '14px',\n        lineHeight: '20px',\n        width: '100%',\n        display: 'flex',\n        color: theme.palette.onSurface.os900,\n        alignItems: 'center',\n        fontWeight: 400,\n        '& .loading-text': {\n            marginLeft: '8px',\n        },\n        '& circle': {\n            animation: animationStyles.animationCircle,\n            display: 'block',\n            fill: 'transparent',\n            stroke: theme.palette.brand.primary,\n            strokeLinecap: animationStyles.strokeLinecap,\n            strokeDasharray: strokeDashArray,\n            strokeDashoffset: animationStyles.strokeDashoffset,\n            strokeWidth: '10px',\n            transformOrigin: '50% 50%',\n        },\n        '& svg': {\n            background: `radial-gradient(ellipse at center, transparent 0%,transparent 48%,${theme.palette.onSurface.os100} 49%,${theme.palette.onSurface.os100} 100%)`,\n            borderRadius: '50%',\n            animation: animationStyles.animationSpinner,\n        },\n        '& .initial-spinner.-done': {\n            opacity: '0',\n            pointerEvents: 'none',\n        },\n        '@keyframes spinner': {\n            '0%': { transform: 'rotateZ(0)' },\n            '100%': { transform: 'rotateZ(360deg)' },\n        },\n        '@keyframes spinner-circle': {\n            '0%': {\n                strokeDashoffset: strokeDashOffset,\n                transform: 'rotate(0)',\n            },\n            '25%': {\n                strokeDashoffset: strokeDashOffset,\n                transform: 'rotate(0)',\n            },\n            '50%': {},\n            '75%': {\n                strokeDashoffset: '35.342917875',\n                transform: 'rotate(45deg)',\n            },\n            '100%': {\n                strokeDashoffset: strokeDashOffset,\n                transform: 'rotate(360deg)',\n            },\n        },\n    };\n    return styles;\n});\n//# sourceMappingURL=spinner.js.map"],"names":["Spinner","forwardRef","_a","ref","state","errorMessage","successMessage","loadingPercentage","loadingPercentageDescribeText","spinnerControlledAnimation","props","__rest","_jsxs","jsxs","StyledProgressBarMessage","children","_jsx","jsx","Icon","className","fontSize","iconStyle","color","StyledSpinner","Object","assign","viewBox","width","height","cx","cy","r","Boolean","styled","shouldForwardProp","prop","theme","strokeDashOffset","strokeDashArray","animationStyles","animationCircle","animationSpinner","strokeDashoffset","strokeLinecap","styles","transitionProperty","transitionDuration","transitionTimingFunction","backgroundColor","lineHeight","display","palette","onSurface","os900","alignItems","fontWeight","marginLeft","animation","fill","stroke","brand","primary","strokeDasharray","strokeWidth","transformOrigin","background","os100","borderRadius","opacity","pointerEvents","transform"],"mappings":"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"}
+{"version":3,"file":"spinner.js","sources":["../../../../../src/components/progressBar/components/spinner.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport { styled } from '@mui/material';\nimport { Icon } from '../../icon';\nimport { StyledProgressBarMessage } from './styledProgressBarMessage';\nexport const Spinner = forwardRef((_a, ref) => {\n    var { state, errorMessage, successMessage, loadingPercentage, loadingPercentageDescribeText, spinnerControlledAnimation } = _a, props = __rest(_a, [\"state\", \"errorMessage\", \"successMessage\", \"loadingPercentage\", \"loadingPercentageDescribeText\", \"spinnerControlledAnimation\"]);\n    if (state === 'error')\n        return (_jsxs(StyledProgressBarMessage, { state: state, \"data-testid\": \"Spinner\", children: [_jsx(Icon, { name: \"circle-close\", fontSize: \"medium\", iconStyle: \"filled\" }), _jsx(\"span\", { className: \"message\", children: errorMessage })] }));\n    if (state === 'success')\n        return (_jsxs(StyledProgressBarMessage, { state: state, \"data-testid\": \"Spinner\", children: [_jsx(Icon, { name: \"circle-check\", fontSize: \"medium\", iconStyle: \"filled\", color: \"primary\" }), _jsx(\"span\", { className: \"message\", children: successMessage })] }));\n    return (_jsxs(StyledSpinner, Object.assign({}, props, { ref: ref, spinnerControlledAnimation: spinnerControlledAnimation, loadingPercentage: loadingPercentage, \"data-testid\": \"Spinner\", children: [_jsx(\"svg\", { viewBox: \"0 0 50 50\", width: \"24\", height: \"24\", children: _jsx(\"circle\", { cx: \"25\", cy: \"25\", r: \"22.5\" }) }), (Boolean(loadingPercentage) || loadingPercentage === 0) && (_jsx(\"span\", { className: \"loading-text\", \"data-testid\": \"Spinner.percentage\", children: loadingPercentageDescribeText\n                    ? `${loadingPercentageDescribeText} ${loadingPercentage} %`\n                    : `${loadingPercentage} %` }))] })));\n});\nconst StyledSpinner = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'spinnerControlledAnimation' && prop !== 'loaderSize' && prop !== 'loadingPercentage',\n})((_a) => {\n    var { theme } = _a, props = __rest(_a, [\"theme\"]);\n    const strokeDashOffset = '137.130521355';\n    const strokeDashArray = 141.3716715;\n    const animationStyles = !props.spinnerControlledAnimation || props.spinnerControlledAnimation === 'infinite'\n        ? {\n            animationCircle: '2s ease-in-out infinite both spinner-circle',\n            animationSpinner: '2s linear infinite spinner',\n            strokeLinecap: 'square',\n            strokeDashoffset: null,\n        }\n        : {\n            animationCircle: null,\n            animationSpinner: null,\n            strokeDashoffset: strokeDashArray - (strokeDashArray / 100) * props.loadingPercentage,\n            strokeLinecap: null,\n        };\n    let styles = {};\n    styles = {\n        transitionProperty: 'opacity',\n        transitionDuration: '0.3s',\n        transitionTimingFunction: 'ease-in-out',\n        backgroundColor: 'transparent',\n        fontSize: '14px',\n        lineHeight: '20px',\n        width: '100%',\n        display: 'flex',\n        color: theme.palette.onSurface.os900,\n        alignItems: 'center',\n        fontWeight: 400,\n        '& .loading-text': {\n            marginLeft: '8px',\n        },\n        '& circle': {\n            animation: animationStyles.animationCircle,\n            display: 'block',\n            fill: 'transparent',\n            stroke: theme.palette.brand.primary,\n            strokeLinecap: animationStyles.strokeLinecap,\n            strokeDasharray: strokeDashArray,\n            strokeDashoffset: animationStyles.strokeDashoffset,\n            strokeWidth: '10px',\n            transformOrigin: '50% 50%',\n        },\n        '& svg': {\n            background: `radial-gradient(ellipse at center, transparent 0%,transparent 48%,${theme.palette.onSurface.os100} 49%,${theme.palette.onSurface.os100} 100%)`,\n            borderRadius: '50%',\n            animation: animationStyles.animationSpinner,\n        },\n        '& .initial-spinner.-done': {\n            opacity: '0',\n            pointerEvents: 'none',\n        },\n        '@keyframes spinner': {\n            '0%': { transform: 'rotateZ(0)' },\n            '100%': { transform: 'rotateZ(360deg)' },\n        },\n        '@keyframes spinner-circle': {\n            '0%': {\n                strokeDashoffset: strokeDashOffset,\n                transform: 'rotate(0)',\n            },\n            '25%': {\n                strokeDashoffset: strokeDashOffset,\n                transform: 'rotate(0)',\n            },\n            '50%': {},\n            '75%': {\n                strokeDashoffset: '35.342917875',\n                transform: 'rotate(45deg)',\n            },\n            '100%': {\n                strokeDashoffset: strokeDashOffset,\n                transform: 'rotate(360deg)',\n            },\n        },\n    };\n    return styles;\n});\n//# sourceMappingURL=spinner.js.map"],"names":["Spinner","forwardRef","_a","ref","state","errorMessage","successMessage","loadingPercentage","loadingPercentageDescribeText","spinnerControlledAnimation","props","__rest","_jsxs","jsxs","StyledProgressBarMessage","children","_jsx","jsx","Icon","name","fontSize","iconStyle","className","color","StyledSpinner","Object","assign","viewBox","width","height","cx","cy","r","Boolean","styled","shouldForwardProp","prop","theme","strokeDashOffset","strokeDashArray","animationStyles","animationCircle","animationSpinner","strokeDashoffset","strokeLinecap","styles","transitionProperty","transitionDuration","transitionTimingFunction","backgroundColor","lineHeight","display","palette","onSurface","os900","alignItems","fontWeight","marginLeft","animation","fill","stroke","brand","primary","strokeDasharray","strokeWidth","transformOrigin","background","os100","borderRadius","opacity","pointerEvents","transform"],"mappings":"0OAMY,MAACA,EAAUC,EAAUA,YAAC,CAACC,EAAIC,KACnC,IAAIC,MAAEA,EAAKC,aAAEA,EAAYC,eAAEA,EAAcC,kBAAEA,EAAiBC,8BAAEA,EAA6BC,2BAAEA,GAA+BP,EAAIQ,EAAQC,EAAAA,OAAOT,EAAI,CAAC,QAAS,eAAgB,iBAAkB,oBAAqB,gCAAiC,+BACrP,MAAc,UAAVE,EACQQ,EAAKC,KAACC,EAAwBA,yBAAE,CAAEV,MAAOA,EAAO,cAAe,UAAWW,SAAU,CAACC,EAAIC,IAACC,OAAM,CAAEC,KAAM,eAAgBC,SAAU,SAAUC,UAAW,WAAaL,EAAIC,IAAC,OAAQ,CAAEK,UAAW,UAAWP,SAAUV,OACjN,YAAVD,EACQQ,EAAKC,KAACC,EAAwBA,yBAAE,CAAEV,MAAOA,EAAO,cAAe,UAAWW,SAAU,CAACC,EAAAA,IAAKE,EAAAA,KAAM,CAAEC,KAAM,eAAgBC,SAAU,SAAUC,UAAW,SAAUE,MAAO,YAAcP,EAAAA,IAAK,OAAQ,CAAEM,UAAW,UAAWP,SAAUT,OACzOM,OAAMY,EAAeC,OAAOC,OAAO,CAAA,EAAIhB,EAAO,CAAEP,IAAKA,EAAKM,2BAA4BA,EAA4BF,kBAAmBA,EAAmB,cAAe,UAAWQ,SAAU,CAACC,EAAAA,IAAK,MAAO,CAAEW,QAAS,YAAaC,MAAO,KAAMC,OAAQ,KAAMd,SAAUC,MAAK,SAAU,CAAEc,GAAI,KAAMC,GAAI,KAAMC,EAAG,YAAeC,QAAQ1B,IAA4C,IAAtBA,IAA6BS,EAAIC,IAAC,OAAQ,CAAEK,UAAW,eAAgB,cAAe,qBAAsBP,SAAUP,EACvc,GAAGA,KAAiCD,MACpC,GAAGA,WAAgC,IAEnDiB,EAAgBU,EAAMA,OAAC,MAAO,CAChCC,kBAAoBC,GAAkB,+BAATA,GAAkD,eAATA,GAAkC,sBAATA,GAD7EF,EAElBhC,IACA,IAAImC,MAAEA,GAAUnC,EAAIQ,EAAQC,EAAAA,OAAOT,EAAI,CAAC,UACxC,MAAMoC,EAAmB,gBACnBC,EAAkB,YAClBC,EAAmB9B,EAAMD,4BAAmE,aAArCC,EAAMD,2BAO7D,CACEgC,gBAAiB,KACjBC,iBAAkB,KAClBC,iBAAkBJ,EAAkB,mBAA0B7B,EAAMH,kBACpEqC,cAAe,MAVjB,CACEH,gBAAiB,8CACjBC,iBAAkB,6BAClBE,cAAe,SACfD,iBAAkB,MAQ1B,IAAIE,EAAS,CAAA,EA4Db,OA3DAA,EAAS,CACLC,mBAAoB,UACpBC,mBAAoB,OACpBC,yBAA0B,cAC1BC,gBAAiB,cACjB7B,SAAU,OACV8B,WAAY,OACZtB,MAAO,OACPuB,QAAS,OACT5B,MAAOc,EAAMe,QAAQC,UAAUC,MAC/BC,WAAY,SACZC,WAAY,IACZ,kBAAmB,CACfC,WAAY,OAEhB,WAAY,CACRC,UAAWlB,EAAgBC,gBAC3BU,QAAS,QACTQ,KAAM,cACNC,OAAQvB,EAAMe,QAAQS,MAAMC,QAC5BlB,cAAeJ,EAAgBI,cAC/BmB,gBAAiBxB,EACjBI,iBAAkBH,EAAgBG,iBAClCqB,YAAa,OACbC,gBAAiB,WAErB,QAAS,CACLC,WAAY,qEAAqE7B,EAAMe,QAAQC,UAAUc,aAAa9B,EAAMe,QAAQC,UAAUc,cAC9IC,aAAc,MACdV,UAAWlB,EAAgBE,kBAE/B,2BAA4B,CACxB2B,QAAS,IACTC,cAAe,QAEnB,qBAAsB,CAClB,KAAM,CAAEC,UAAW,cACnB,OAAQ,CAAEA,UAAW,oBAEzB,4BAA6B,CACzB,KAAM,CACF5B,iBAAkBL,EAClBiC,UAAW,aAEf,MAAO,CACH5B,iBAAkBL,EAClBiC,UAAW,aAEf,MAAO,CAAE,EACT,MAAO,CACH5B,iBAAkB,eAClB4B,UAAW,iBAEf,OAAQ,CACJ5B,iBAAkBL,EAClBiC,UAAW,oBAIhB1B,CAAM"}

package/cjs/components/selectInput/selectInput.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { SelectChangeEvent } from '@mui/material/Select';
+import { IconNameProp } from '../icon';
 /**
  * @interface SelectInputProps
  * @description Base definition of SkodaFlow SelectInput independent on core implementation.
@@ -36,7 +37,7 @@ export interface SelectInputProps {
     /**
      * Icon name. For example "check". If no prefix is defined, default SKODA icon font is used
      */
-    icon?: string;
+    icon?: IconNameProp;
     /**
      *Boolean to check if the input returns an error or not
      */

package/cjs/components/selectInput/selectInput.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),t=require("react"),l=require("./formControlSelectStyled.js"),n=require("@mui/material/Select"),a=require("../icon/icon.js"),o=require("./hook/useSelectInput.js"),u=require("@mui/material/styles"),s=require("./inputLabelSelect.js"),i=require("@mui/material"),c=require("../common/helperText.js"),d=require("lodash/noop");function h(e){return e&&e.__esModule?e:{default:e}}var p=h(n),x=h(d);const m=u.styled(p.default,{shouldForwardProp:e=>"hasIcon"!==e&&"fullWidth"!==e})((r=>{var t=e.__rest(r,["theme"]);if(!t.fullWidth)return null;return{"& > .MuiSelect-filled":{position:"absolute",left:0,top:0,width:t.hasIcon?"calc(100% - 102px) !important":"calc(100% - 62px) !important"}}}));exports.SelectInput=n=>{var{label:u=null,onChange:d,onBlur:h,onFocus:p,value:f,children:b,staticLabel:S,InputProps:j,fullWidth:v=!0,removeSelectMenuMaxWidth:q}=n,I=e.__rest(n,["label","onChange","onBlur","onFocus","value","children","staticLabel","InputProps","fullWidth","removeSelectMenuMaxWidth"]);const[M,g]=t.useState(""),[F,W]=t.useState(!1),[C,B]=t.useState(!1),[k,L]=t.useState(!1),[T,_]=t.useState(!1),[w,O]=t.useState(null),{handleOnBlur:y,handleOnChange:P,handleOnFocus:N}=o.useSelectInput(F,x.default,x.default,v,I.helpText,f,g,I.required,L),E=t.useRef(null),R=t.useRef(null),V={sx:w?{maxWidth:q?"unset":w,"& .MuiBackdrop-root":{background:"transparent",backdropFilter:"blur(0px)"}}:{"& .MuiBackdrop-root":{background:"transparent",backdropFilter:"blur(0px)"}}};return r.jsx(r.Fragment,{children:r.jsxs(l.FormControlSelectStyled,Object.assign({},I,{ref:R,staticLabel:S,sx:v?{}:{width:"200px"},disabled:I.disabled,error:I.hasError,value:M,hideBg:I.hideBg,onMouseEnter:()=>{!C&&!T&&B(!0)},onMouseLeave:()=>{C&&!T&&B(!1)},onMouseDown:e=>{const r=e.currentTarget.offsetWidth;O(r)},icon:I.icon,hovered:C,focused:F,variant:"filled",fullWidth:v,children:[I.icon&&r.jsx(a.Icon,{color:I.disabled?"disabled":"inherit",className:I.icon}),r.jsx(s.default,{staticLabel:S,label:u,opened:T,currentValue:M}),r.jsx(m,{MenuProps:V,required:k,onOpen:()=>{_(!0)},onClose:()=>{W(!1),B(!1),_(!1)},onBlur:()=>y(W,h),onFocus:()=>N(W,p),IconComponent:()=>T?r.jsx(a.Icon,{className:"chevron-up"}):r.jsx(a.Icon,{className:"chevron-down"}),labelId:u,id:I.id,name:I.name,value:M,onChange:e=>P(e,d,g),ref:E,hasIcon:!!I.icon,fullWidth:v,children:b}),r.jsx(i.FormHelperText,{children:r.jsx(c.default,{maxChars:0,currentValue:M,helpText:I.helpText})})]}))})};
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),t=require("react"),n=require("./formControlSelectStyled.js"),l=require("@mui/material/Select"),o=require("../icon/icon.js");require("../icon/icon.definitions.js");var u=require("./hook/useSelectInput.js"),a=require("@mui/material/styles"),i=require("./inputLabelSelect.js"),s=require("@mui/material"),c=require("../common/helperText.js"),d=require("lodash/noop");function h(e){return e&&e.__esModule?e:{default:e}}var p=h(l),x=h(d);const f=a.styled(p.default,{shouldForwardProp:e=>"hasIcon"!==e&&"fullWidth"!==e})((r=>{var t=e.__rest(r,["theme"]);if(!t.fullWidth)return null;return{"& > .MuiSelect-filled":{position:"absolute",left:0,top:0,width:t.hasIcon?"calc(100% - 102px) !important":"calc(100% - 62px) !important"}}}));exports.SelectInput=l=>{var{label:a=null,onChange:d,onBlur:h,onFocus:p,value:m,children:b,staticLabel:S,InputProps:j,fullWidth:v=!0,removeSelectMenuMaxWidth:q}=l,I=e.__rest(l,["label","onChange","onBlur","onFocus","value","children","staticLabel","InputProps","fullWidth","removeSelectMenuMaxWidth"]);const[M,g]=t.useState(""),[F,W]=t.useState(!1),[C,B]=t.useState(!1),[k,L]=t.useState(!1),[T,_]=t.useState(!1),[w,O]=t.useState(null),{handleOnBlur:y,handleOnChange:P,handleOnFocus:E}=u.useSelectInput(F,x.default,x.default,v,I.helpText,m,g,I.required,L),R=t.useRef(null),V=t.useRef(null),D={sx:w?{maxWidth:q?"unset":w,"& .MuiBackdrop-root":{background:"transparent",backdropFilter:"blur(0px)"}}:{"& .MuiBackdrop-root":{background:"transparent",backdropFilter:"blur(0px)"}}};return r.jsx(r.Fragment,{children:r.jsxs(n.FormControlSelectStyled,Object.assign({},I,{ref:V,staticLabel:S,sx:v?{}:{width:"200px"},disabled:I.disabled,error:I.hasError,value:M,hideBg:I.hideBg,onMouseEnter:()=>{!C&&!T&&B(!0)},onMouseLeave:()=>{C&&!T&&B(!1)},onMouseDown:e=>{const r=e.currentTarget.offsetWidth;O(r)},icon:I.icon,hovered:C,focused:F,variant:"filled",fullWidth:v,children:[I.icon&&r.jsx(o.Icon,{color:I.disabled?"disabled":"inherit",name:I.icon}),r.jsx(i.default,{staticLabel:S,label:a,opened:T,currentValue:M}),r.jsx(f,{MenuProps:D,required:k,onOpen:()=>{_(!0)},onClose:()=>{W(!1),B(!1),_(!1)},onBlur:()=>y(W,h),onFocus:()=>E(W,p),IconComponent:()=>T?r.jsx(o.Icon,{name:"chevron-up"}):r.jsx(o.Icon,{name:"chevron-down"}),labelId:a,id:I.id,name:I.name,value:M,onChange:e=>P(e,d,g),ref:R,hasIcon:!!I.icon,fullWidth:v,children:b}),r.jsx(s.FormHelperText,{children:r.jsx(c.default,{maxChars:0,currentValue:M,helpText:I.helpText})})]}))})};
 //# sourceMappingURL=selectInput.js.map

package/cjs/components/selectInput/selectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectInput.js","sources":["../../../../src/components/selectInput/selectInput.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useRef, useState } from 'react';\nimport { FormControlSelectStyled } from './formControlSelectStyled';\nimport MuiSelect from '@mui/material/Select';\nimport { Icon } from '../icon';\nimport { useSelectInput } from './hook/useSelectInput';\nimport { styled } from '@mui/material/styles';\nimport InputLabelSelect from './inputLabelSelect';\nimport { FormHelperText } from '@mui/material';\nimport HelperText from '../common/helperText';\nimport noop from 'lodash/noop';\n/**\n * @description SkodaFlow SelectInput component.\n * Properties are inherited from HTML input element.\n * @param props SelectInputProps\n * @returns React Functional Component\n * @deprecated This component is deprecated. Use themed Select component from @mui/material instead.\n */\nexport const SelectInput = (_a) => {\n    var { label = null, onChange, onBlur, onFocus, value, children, staticLabel, InputProps, fullWidth = true, removeSelectMenuMaxWidth } = _a, props = __rest(_a, [\"label\", \"onChange\", \"onBlur\", \"onFocus\", \"value\", \"children\", \"staticLabel\", \"InputProps\", \"fullWidth\", \"removeSelectMenuMaxWidth\"]);\n    const [currentValue, setCurrentValue] = useState('');\n    const [isFocused, setIsFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const [isRequired, setIsRequired] = useState(false);\n    const [opened, setOpened] = useState(false);\n    const [inputWidth, setInputWidth] = useState(null);\n    const { handleOnBlur, handleOnChange, handleOnFocus } = useSelectInput(isFocused, noop, noop, fullWidth, props.helpText, value, setCurrentValue, props.required, setIsRequired);\n    const inputRef = useRef(null);\n    const formControlSelectRef = useRef(null);\n    const menuProps = {\n        sx: inputWidth\n            ? {\n                maxWidth: removeSelectMenuMaxWidth ? 'unset' : inputWidth,\n                '& .MuiBackdrop-root': {\n                    background: 'transparent',\n                    backdropFilter: 'blur(0px)',\n                },\n            }\n            : {\n                '& .MuiBackdrop-root': {\n                    background: 'transparent',\n                    backdropFilter: 'blur(0px)',\n                },\n            },\n    };\n    return (_jsx(_Fragment, { children: _jsxs(FormControlSelectStyled, Object.assign({}, props, { ref: formControlSelectRef, staticLabel: staticLabel, sx: !fullWidth ? { width: '200px' } : {}, disabled: props.disabled, error: props.hasError, value: currentValue, hideBg: props.hideBg, onMouseEnter: () => {\n                !hovered && !opened && setHovered(true);\n            }, onMouseLeave: () => {\n                hovered && !opened && setHovered(false);\n            }, onMouseDown: (e) => {\n                const elemWidth = e.currentTarget.offsetWidth;\n                setInputWidth(elemWidth);\n            }, icon: props.icon, hovered: hovered, focused: isFocused, variant: \"filled\", fullWidth: fullWidth, children: [props.icon && _jsx(Icon, { color: props.disabled ? 'disabled' : 'inherit', className: props.icon }), _jsx(InputLabelSelect, { staticLabel: staticLabel, label: label, opened: opened, currentValue: currentValue }), _jsx(SelectInputStyled, { MenuProps: menuProps, required: isRequired, onOpen: () => {\n                        setOpened(true);\n                    }, onClose: () => {\n                        setIsFocused(false);\n                        setHovered(false);\n                        setOpened(false);\n                    }, onBlur: () => handleOnBlur(setIsFocused, onBlur), onFocus: () => handleOnFocus(setIsFocused, onFocus), IconComponent: () => (opened ? _jsx(Icon, { className: \"chevron-up\" }) : _jsx(Icon, { className: \"chevron-down\" })), labelId: label, id: props.id, name: props.name, value: currentValue, onChange: (e) => handleOnChange(e, onChange, setCurrentValue), ref: inputRef, hasIcon: !!props.icon, fullWidth: fullWidth, children: children }), _jsx(FormHelperText, { children: _jsx(HelperText, { maxChars: 0, currentValue: currentValue, helpText: props.helpText }) })] })) }));\n};\n/**\n * @description Button styling defintion based on props\n */\nconst SelectInputStyled = styled(MuiSelect, {\n    shouldForwardProp: (prop) => prop !== 'hasIcon' && prop !== 'fullWidth',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    if (!args.fullWidth)\n        return null;\n    const width = args.hasIcon ? 'calc(100% - 102px) !important' : 'calc(100% - 62px) !important';\n    return {\n        '& > .MuiSelect-filled': {\n            position: 'absolute',\n            left: 0,\n            top: 0,\n            width: width,\n        },\n    };\n});\n//# sourceMappingURL=selectInput.js.map"],"names":["SelectInputStyled","styled","MuiSelect","shouldForwardProp","prop","_a","args","__rest","fullWidth","position","left","top","width","hasIcon","label","onChange","onBlur","onFocus","value","children","staticLabel","InputProps","removeSelectMenuMaxWidth","props","currentValue","setCurrentValue","useState","isFocused","setIsFocused","hovered","setHovered","isRequired","setIsRequired","opened","setOpened","inputWidth","setInputWidth","handleOnBlur","handleOnChange","handleOnFocus","useSelectInput","noop","helpText","required","inputRef","useRef","formControlSelectRef","menuProps","sx","maxWidth","background","backdropFilter","_jsx","_Fragment","_jsxs","jsxs","FormControlSelectStyled","Object","assign","ref","disabled","error","hasError","hideBg","onMouseEnter","onMouseLeave","onMouseDown","e","elemWidth","currentTarget","offsetWidth","icon","focused","variant","Icon","color","className","InputLabelSelect","default","jsx","MenuProps","onOpen","onClose","IconComponent","labelId","id","name","FormHelperText","HelperText","maxChars"],"mappings":"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"}
+{"version":3,"file":"selectInput.js","sources":["../../../../src/components/selectInput/selectInput.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useRef, useState } from 'react';\nimport { FormControlSelectStyled } from './formControlSelectStyled';\nimport MuiSelect from '@mui/material/Select';\nimport { Icon } from '../icon';\nimport { useSelectInput } from './hook/useSelectInput';\nimport { styled } from '@mui/material/styles';\nimport InputLabelSelect from './inputLabelSelect';\nimport { FormHelperText } from '@mui/material';\nimport HelperText from '../common/helperText';\nimport noop from 'lodash/noop';\n/**\n * @description SkodaFlow SelectInput component.\n * Properties are inherited from HTML input element.\n * @param props SelectInputProps\n * @returns React Functional Component\n * @deprecated This component is deprecated. Use themed Select component from @mui/material instead.\n */\nexport const SelectInput = (_a) => {\n    var { label = null, onChange, onBlur, onFocus, value, children, staticLabel, InputProps, fullWidth = true, removeSelectMenuMaxWidth } = _a, props = __rest(_a, [\"label\", \"onChange\", \"onBlur\", \"onFocus\", \"value\", \"children\", \"staticLabel\", \"InputProps\", \"fullWidth\", \"removeSelectMenuMaxWidth\"]);\n    const [currentValue, setCurrentValue] = useState('');\n    const [isFocused, setIsFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const [isRequired, setIsRequired] = useState(false);\n    const [opened, setOpened] = useState(false);\n    const [inputWidth, setInputWidth] = useState(null);\n    const { handleOnBlur, handleOnChange, handleOnFocus } = useSelectInput(isFocused, noop, noop, fullWidth, props.helpText, value, setCurrentValue, props.required, setIsRequired);\n    const inputRef = useRef(null);\n    const formControlSelectRef = useRef(null);\n    const menuProps = {\n        sx: inputWidth\n            ? {\n                maxWidth: removeSelectMenuMaxWidth ? 'unset' : inputWidth,\n                '& .MuiBackdrop-root': {\n                    background: 'transparent',\n                    backdropFilter: 'blur(0px)',\n                },\n            }\n            : {\n                '& .MuiBackdrop-root': {\n                    background: 'transparent',\n                    backdropFilter: 'blur(0px)',\n                },\n            },\n    };\n    return (_jsx(_Fragment, { children: _jsxs(FormControlSelectStyled, Object.assign({}, props, { ref: formControlSelectRef, staticLabel: staticLabel, sx: !fullWidth ? { width: '200px' } : {}, disabled: props.disabled, error: props.hasError, value: currentValue, hideBg: props.hideBg, onMouseEnter: () => {\n                !hovered && !opened && setHovered(true);\n            }, onMouseLeave: () => {\n                hovered && !opened && setHovered(false);\n            }, onMouseDown: (e) => {\n                const elemWidth = e.currentTarget.offsetWidth;\n                setInputWidth(elemWidth);\n            }, icon: props.icon, hovered: hovered, focused: isFocused, variant: \"filled\", fullWidth: fullWidth, children: [props.icon && _jsx(Icon, { color: props.disabled ? 'disabled' : 'inherit', name: props.icon }), _jsx(InputLabelSelect, { staticLabel: staticLabel, label: label, opened: opened, currentValue: currentValue }), _jsx(SelectInputStyled, { MenuProps: menuProps, required: isRequired, onOpen: () => {\n                        setOpened(true);\n                    }, onClose: () => {\n                        setIsFocused(false);\n                        setHovered(false);\n                        setOpened(false);\n                    }, onBlur: () => handleOnBlur(setIsFocused, onBlur), onFocus: () => handleOnFocus(setIsFocused, onFocus), IconComponent: () => (opened ? _jsx(Icon, { name: \"chevron-up\" }) : _jsx(Icon, { name: \"chevron-down\" })), labelId: label, id: props.id, name: props.name, value: currentValue, onChange: (e) => handleOnChange(e, onChange, setCurrentValue), ref: inputRef, hasIcon: !!props.icon, fullWidth: fullWidth, children: children }), _jsx(FormHelperText, { children: _jsx(HelperText, { maxChars: 0, currentValue: currentValue, helpText: props.helpText }) })] })) }));\n};\n/**\n * @description Button styling defintion based on props\n */\nconst SelectInputStyled = styled(MuiSelect, {\n    shouldForwardProp: (prop) => prop !== 'hasIcon' && prop !== 'fullWidth',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    if (!args.fullWidth)\n        return null;\n    const width = args.hasIcon ? 'calc(100% - 102px) !important' : 'calc(100% - 62px) !important';\n    return {\n        '& > .MuiSelect-filled': {\n            position: 'absolute',\n            left: 0,\n            top: 0,\n            width: width,\n        },\n    };\n});\n//# sourceMappingURL=selectInput.js.map"],"names":["SelectInputStyled","styled","MuiSelect","shouldForwardProp","prop","_a","args","__rest","fullWidth","position","left","top","width","hasIcon","label","onChange","onBlur","onFocus","value","children","staticLabel","InputProps","removeSelectMenuMaxWidth","props","currentValue","setCurrentValue","useState","isFocused","setIsFocused","hovered","setHovered","isRequired","setIsRequired","opened","setOpened","inputWidth","setInputWidth","handleOnBlur","handleOnChange","handleOnFocus","useSelectInput","noop","helpText","required","inputRef","useRef","formControlSelectRef","menuProps","sx","maxWidth","background","backdropFilter","_jsx","_Fragment","_jsxs","jsxs","FormControlSelectStyled","Object","assign","ref","disabled","error","hasError","hideBg","onMouseEnter","onMouseLeave","onMouseDown","e","elemWidth","currentTarget","offsetWidth","icon","focused","variant","Icon","color","name","InputLabelSelect","default","jsx","MenuProps","onOpen","onClose","IconComponent","labelId","id","FormHelperText","HelperText","maxChars"],"mappings":"mfAmBY,MA6CNA,EAAoBC,EAAMA,OAACC,UAAW,CACxCC,kBAAoBC,GAAkB,YAATA,GAA+B,cAATA,GAD7BH,EAEtBI,IACG,IAAiBC,EAAOC,EAAMA,OAACF,EAAI,CAAC,UACvC,IAAKC,EAAKE,UACN,OAAO,KAEX,MAAO,CACH,wBAAyB,CACrBC,SAAU,WACVC,KAAM,EACNC,IAAK,EACLC,MANMN,EAAKO,QAAU,gCAAkC,gCAQ9D,wBA3DuBR,IACxB,IAAIS,MAAEA,EAAQ,KAAIC,SAAEA,EAAQC,OAAEA,EAAMC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,YAAEA,EAAWC,WAAEA,EAAUb,UAAEA,GAAY,EAAIc,yBAAEA,GAA6BjB,EAAIkB,EAAQhB,EAAMA,OAACF,EAAI,CAAC,QAAS,WAAY,SAAU,UAAW,QAAS,WAAY,cAAe,aAAc,YAAa,6BACzQ,MAAOmB,EAAcC,GAAmBC,EAAQA,SAAC,KAC1CC,EAAWC,GAAgBF,EAAQA,UAAC,IACpCG,EAASC,GAAcJ,EAAQA,UAAC,IAChCK,EAAYC,GAAiBN,EAAQA,UAAC,IACtCO,EAAQC,GAAaR,EAAQA,UAAC,IAC9BS,EAAYC,GAAiBV,EAAQA,SAAC,OACvCW,aAAEA,EAAYC,eAAEA,EAAcC,cAAEA,GAAkBC,EAAcA,eAACb,EAAWc,UAAMA,EAAAA,QAAMjC,EAAWe,EAAMmB,SAAUxB,EAAOO,EAAiBF,EAAMoB,SAAUX,GAC3JY,EAAWC,SAAO,MAClBC,EAAuBD,SAAO,MAC9BE,EAAY,CACdC,GAAIb,EACE,CACEc,SAAU3B,EAA2B,QAAUa,EAC/C,sBAAuB,CACnBe,WAAY,cACZC,eAAgB,cAGtB,CACE,sBAAuB,CACnBD,WAAY,cACZC,eAAgB,eAIhC,OAAQC,EAAAA,IAAKC,EAAAA,SAAW,CAAElC,SAAUmC,EAAKC,KAACC,EAAuBA,wBAAEC,OAAOC,OAAO,CAAA,EAAInC,EAAO,CAAEoC,IAAKb,EAAsB1B,YAAaA,EAAa4B,GAAKxC,EAAiC,CAAA,EAArB,CAAEI,MAAO,SAAgBgD,SAAUrC,EAAMqC,SAAUC,MAAOtC,EAAMuC,SAAU5C,MAAOM,EAAcuC,OAAQxC,EAAMwC,OAAQC,aAAc,MAC1RnC,IAAYI,GAAUH,GAAW,EAAK,EACxCmC,aAAc,KACbpC,IAAYI,GAAUH,GAAW,EAAM,EACxCoC,YAAcC,IACb,MAAMC,EAAYD,EAAEE,cAAcC,YAClClC,EAAcgC,EAAU,EACzBG,KAAMhD,EAAMgD,KAAM1C,QAASA,EAAS2C,QAAS7C,EAAW8C,QAAS,SAAUjE,UAAWA,EAAWW,SAAU,CAACI,EAAMgD,MAAQnB,MAAKsB,EAAAA,KAAM,CAAEC,MAAOpD,EAAMqC,SAAW,WAAa,UAAWgB,KAAMrD,EAAMgD,OAASnB,EAAAA,IAAKyB,EAAgBC,QAAE,CAAE1D,YAAaA,EAAaN,MAAOA,EAAOmB,OAAQA,EAAQT,aAAcA,IAAiB4B,EAAI2B,IAAC/E,EAAmB,CAAEgF,UAAWjC,EAAWJ,SAAUZ,EAAYkD,OAAQ,KACjY/C,GAAU,EAAK,EAChBgD,QAAS,KACRtD,GAAa,GACbE,GAAW,GACXI,GAAU,EAAM,EACjBlB,OAAQ,IAAMqB,EAAaT,EAAcZ,GAASC,QAAS,IAAMsB,EAAcX,EAAcX,GAAUkE,cAAe,IAAOlD,EAASmB,EAAAA,IAAKsB,EAAAA,KAAM,CAAEE,KAAM,eAAkBxB,EAAAA,IAAKsB,EAAAA,KAAM,CAAEE,KAAM,iBAAoBQ,QAAStE,EAAOuE,GAAI9D,EAAM8D,GAAIT,KAAMrD,EAAMqD,KAAM1D,MAAOM,EAAcT,SAAWoD,GAAM7B,EAAe6B,EAAGpD,EAAUU,GAAkBkC,IAAKf,EAAU/B,UAAWU,EAAMgD,KAAM/D,UAAWA,EAAWW,SAAUA,IAAaiC,EAAAA,IAAKkC,EAAAA,eAAgB,CAAEnE,SAAUiC,MAAKmC,EAAAA,QAAY,CAAEC,SAAU,EAAGhE,aAAcA,EAAckB,SAAUnB,EAAMmB,kBAAwB"}

package/cjs/components/snackbar/snackbarMessage.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),s=require("react/jsx-runtime"),a=require("../icon/icon.js"),i=require("@mui/material/styles"),r=require("./snackbar.js");const c=i.styled("div")((s=>{var a=e.__rest(s,[]);return{"& .styled-message-header-message-container":{display:a.header?"block":"flex"},"& p":{display:a.header?"block":"inline",paddingBottom:a.header?"0px":"2px"},"& .snackbar-icon-wrapper":{"& span":{lineHeight:a.header?"20px":"unset"}},"& .custom-snackbar-divider":{paddingLeft:r.checkForIcon(a.icon)?"24px":"56px","& > div":{borderLeft:`1px solid ${a.theme.palette.onSurface.os600}`,height:a.header?"48px":"32px"}}}})),n=({icon:e})=>{let i=null;switch(e){case"alert":i=s.jsx(a.Icon,{className:"triangle-up-exclamation",fontSize:"inherit",iconStyle:"filled"});break;case"success":i=s.jsx(a.Icon,{className:"circle-check",fontSize:"inherit",iconStyle:"filled"});break;case"warning":i=s.jsx(a.Icon,{className:"circle-exclamation",fontSize:"inherit",iconStyle:"filled"})}return i?s.jsx("span",{className:"snackbar-icon-wrapper",children:i}):i};exports.SnackbarMessage=({header:e,icon:a,message:i})=>s.jsxs(c,{header:e,icon:a,children:[a&&s.jsx(n,{icon:a}),s.jsxs("div",{className:"styled-message-header-message-container",children:[e&&s.jsxs("h3",{children:[" ",e]}),s.jsxs("p",{children:[" ",i," "]})]}),s.jsx("div",{className:"custom-snackbar-divider",children:s.jsx("div",{})})]}),exports.SnackbarMessageStyled=c;
+"use strict";var e=require("tslib"),i=require("react/jsx-runtime"),s=require("../icon/icon.js");require("../icon/icon.definitions.js");var r=require("@mui/material/styles"),a=require("./snackbar.js");const n=r.styled("div")((i=>{var s=e.__rest(i,[]);return{"& .styled-message-header-message-container":{display:s.header?"block":"flex"},"& p":{display:s.header?"block":"inline",paddingBottom:s.header?"0px":"2px"},"& .snackbar-icon-wrapper":{"& span":{lineHeight:s.header?"20px":"unset"}},"& .custom-snackbar-divider":{paddingLeft:a.checkForIcon(s.icon)?"24px":"56px","& > div":{borderLeft:`1px solid ${s.theme.palette.onSurface.os600}`,height:s.header?"48px":"32px"}}}})),c=({icon:e})=>{let r=null;switch(e){case"alert":r=i.jsx(s.Icon,{name:"warning",fontSize:"inherit",iconStyle:"filled"});break;case"success":r=i.jsx(s.Icon,{name:"circle-check",fontSize:"inherit",iconStyle:"filled"});break;case"warning":r=i.jsx(s.Icon,{name:"circle-exclamation",fontSize:"inherit",iconStyle:"filled"})}return r?i.jsx("span",{className:"snackbar-icon-wrapper",children:r}):r};exports.SnackbarMessage=({header:e,icon:s,message:r})=>i.jsxs(n,{header:e,icon:s,children:[s&&i.jsx(c,{icon:s}),i.jsxs("div",{className:"styled-message-header-message-container",children:[e&&i.jsxs("h3",{children:[" ",e]}),i.jsxs("p",{children:[" ",r," "]})]}),i.jsx("div",{className:"custom-snackbar-divider",children:i.jsx("div",{})})]}),exports.SnackbarMessageStyled=n;
 //# sourceMappingURL=snackbarMessage.js.map

package/cjs/components/snackbar/snackbarMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbarMessage.js","sources":["../../../../src/components/snackbar/snackbarMessage.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '../icon';\nimport { styled } from '@mui/material/styles';\nimport { checkForIcon } from './snackbar';\nexport const SnackbarMessage = ({ header, icon, message }) => {\n    return (_jsxs(SnackbarMessageStyled, { header: header, icon: icon, children: [icon && _jsx(IconComponent, { icon: icon }), _jsxs(\"div\", { className: \"styled-message-header-message-container\", children: [header && _jsxs(\"h3\", { children: [\" \", header] }), _jsxs(\"p\", { children: [\" \", message, \" \"] })] }), _jsx(\"div\", { className: \"custom-snackbar-divider\", children: _jsx(\"div\", {}) })] }));\n};\n/**\n * @description SnackbarMessageStyled styling defintion based on props\n */\nexport const SnackbarMessageStyled = styled('div')((_a) => {\n    var args = __rest(_a, []);\n    return {\n        '& .styled-message-header-message-container': {\n            display: args.header ? 'block' : 'flex',\n        },\n        '& p': {\n            display: args.header ? 'block' : 'inline',\n            paddingBottom: args.header ? '0px' : '2px',\n        },\n        '& .snackbar-icon-wrapper': {\n            '& span': {\n                lineHeight: args.header ? '20px' : 'unset',\n            },\n        },\n        '& .custom-snackbar-divider': {\n            paddingLeft: checkForIcon(args.icon) ? '24px' : '56px',\n            '& > div': {\n                borderLeft: `1px solid ${args.theme.palette.onSurface.os600}`,\n                height: args.header ? '48px' : '32px',\n            },\n        },\n    };\n});\nconst IconComponent = ({ icon }) => {\n    let iconToReturn = null;\n    switch (icon) {\n        case 'alert':\n            iconToReturn = _jsx(Icon, { className: \"triangle-up-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n            break;\n        case 'success':\n            iconToReturn = _jsx(Icon, { className: \"circle-check\", fontSize: \"inherit\", iconStyle: \"filled\" });\n            break;\n        case 'warning':\n            iconToReturn = _jsx(Icon, { className: \"circle-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n            break;\n    }\n    return iconToReturn ? _jsx(\"span\", { className: \"snackbar-icon-wrapper\", children: iconToReturn }) : iconToReturn;\n};\n//# sourceMappingURL=snackbarMessage.js.map"],"names":["SnackbarMessageStyled","styled","_a","args","__rest","display","header","paddingBottom","lineHeight","paddingLeft","checkForIcon","icon","borderLeft","theme","palette","onSurface","os600","height","IconComponent","iconToReturn","_jsx","jsx","Icon","className","fontSize","iconStyle","children","message","_jsxs","jsxs"],"mappings":"6JAKY,MAMCA,EAAwBC,EAAMA,OAAC,MAAPA,EAAeC,IAChD,IAAIC,EAAOC,EAAAA,OAAOF,EAAI,IACtB,MAAO,CACH,6CAA8C,CAC1CG,QAASF,EAAKG,OAAS,QAAU,QAErC,MAAO,CACHD,QAASF,EAAKG,OAAS,QAAU,SACjCC,cAAeJ,EAAKG,OAAS,MAAQ,OAEzC,2BAA4B,CACxB,SAAU,CACNE,WAAYL,EAAKG,OAAS,OAAS,UAG3C,6BAA8B,CAC1BG,YAAaC,EAAAA,aAAaP,EAAKQ,MAAQ,OAAS,OAChD,UAAW,CACPC,WAAY,aAAaT,EAAKU,MAAMC,QAAQC,UAAUC,QACtDC,OAAQd,EAAKG,OAAS,OAAS,SAG1C,IAECY,EAAgB,EAAGP,KAAAA,MACrB,IAAIQ,EAAe,KACnB,OAAQR,GACJ,IAAK,QACDQ,EAAeC,EAAIC,IAACC,OAAM,CAAEC,UAAW,0BAA2BC,SAAU,UAAWC,UAAW,WAClG,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,UAAW,eAAgBC,SAAU,UAAWC,UAAW,WACvF,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,UAAW,qBAAsBC,SAAU,UAAWC,UAAW,WAGrG,OAAON,EAAeC,MAAK,OAAQ,CAAEG,UAAW,wBAAyBG,SAAUP,IAAkBA,CAAY,0BA3CtF,EAAGb,SAAQK,OAAMgB,aACpCC,OAAM5B,EAAuB,CAAEM,OAAQA,EAAQK,KAAMA,EAAMe,SAAU,CAACf,GAAQS,EAAAA,IAAKF,EAAe,CAAEP,KAAMA,IAASiB,OAAM,MAAO,CAAEL,UAAW,0CAA2CG,SAAU,CAACpB,GAAUsB,EAAKC,KAAC,KAAM,CAAEH,SAAU,CAAC,IAAKpB,KAAYsB,EAAKC,KAAC,IAAK,CAAEH,SAAU,CAAC,IAAKC,EAAS,UAAaP,MAAK,MAAO,CAAEG,UAAW,0BAA2BG,SAAUN,EAAIC,IAAC,MAAO,CAAE"}
+{"version":3,"file":"snackbarMessage.js","sources":["../../../../src/components/snackbar/snackbarMessage.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '../icon';\nimport { styled } from '@mui/material/styles';\nimport { checkForIcon } from './snackbar';\nexport const SnackbarMessage = ({ header, icon, message }) => {\n    return (_jsxs(SnackbarMessageStyled, { header: header, icon: icon, children: [icon && _jsx(IconComponent, { icon: icon }), _jsxs(\"div\", { className: \"styled-message-header-message-container\", children: [header && _jsxs(\"h3\", { children: [\" \", header] }), _jsxs(\"p\", { children: [\" \", message, \" \"] })] }), _jsx(\"div\", { className: \"custom-snackbar-divider\", children: _jsx(\"div\", {}) })] }));\n};\n/**\n * @description SnackbarMessageStyled styling defintion based on props\n */\nexport const SnackbarMessageStyled = styled('div')((_a) => {\n    var args = __rest(_a, []);\n    return {\n        '& .styled-message-header-message-container': {\n            display: args.header ? 'block' : 'flex',\n        },\n        '& p': {\n            display: args.header ? 'block' : 'inline',\n            paddingBottom: args.header ? '0px' : '2px',\n        },\n        '& .snackbar-icon-wrapper': {\n            '& span': {\n                lineHeight: args.header ? '20px' : 'unset',\n            },\n        },\n        '& .custom-snackbar-divider': {\n            paddingLeft: checkForIcon(args.icon) ? '24px' : '56px',\n            '& > div': {\n                borderLeft: `1px solid ${args.theme.palette.onSurface.os600}`,\n                height: args.header ? '48px' : '32px',\n            },\n        },\n    };\n});\nconst IconComponent = ({ icon }) => {\n    let iconToReturn = null;\n    switch (icon) {\n        case 'alert':\n            iconToReturn = _jsx(Icon, { name: \"warning\", fontSize: \"inherit\", iconStyle: \"filled\" });\n            break;\n        case 'success':\n            iconToReturn = _jsx(Icon, { name: \"circle-check\", fontSize: \"inherit\", iconStyle: \"filled\" });\n            break;\n        case 'warning':\n            iconToReturn = _jsx(Icon, { name: \"circle-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n            break;\n    }\n    return iconToReturn ? _jsx(\"span\", { className: \"snackbar-icon-wrapper\", children: iconToReturn }) : iconToReturn;\n};\n//# sourceMappingURL=snackbarMessage.js.map"],"names":["SnackbarMessageStyled","styled","_a","args","__rest","display","header","paddingBottom","lineHeight","paddingLeft","checkForIcon","icon","borderLeft","theme","palette","onSurface","os600","height","IconComponent","iconToReturn","_jsx","jsx","Icon","name","fontSize","iconStyle","className","children","message","_jsxs","jsxs"],"mappings":"wMAKY,MAMCA,EAAwBC,EAAMA,OAAC,MAAPA,EAAeC,IAChD,IAAIC,EAAOC,EAAAA,OAAOF,EAAI,IACtB,MAAO,CACH,6CAA8C,CAC1CG,QAASF,EAAKG,OAAS,QAAU,QAErC,MAAO,CACHD,QAASF,EAAKG,OAAS,QAAU,SACjCC,cAAeJ,EAAKG,OAAS,MAAQ,OAEzC,2BAA4B,CACxB,SAAU,CACNE,WAAYL,EAAKG,OAAS,OAAS,UAG3C,6BAA8B,CAC1BG,YAAaC,EAAAA,aAAaP,EAAKQ,MAAQ,OAAS,OAChD,UAAW,CACPC,WAAY,aAAaT,EAAKU,MAAMC,QAAQC,UAAUC,QACtDC,OAAQd,EAAKG,OAAS,OAAS,SAG1C,IAECY,EAAgB,EAAGP,KAAAA,MACrB,IAAIQ,EAAe,KACnB,OAAQR,GACJ,IAAK,QACDQ,EAAeC,EAAIC,IAACC,OAAM,CAAEC,KAAM,UAAWC,SAAU,UAAWC,UAAW,WAC7E,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,KAAM,eAAgBC,SAAU,UAAWC,UAAW,WAClF,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,KAAM,qBAAsBC,SAAU,UAAWC,UAAW,WAGhG,OAAON,EAAeC,MAAK,OAAQ,CAAEM,UAAW,wBAAyBC,SAAUR,IAAkBA,CAAY,0BA3CtF,EAAGb,SAAQK,OAAMiB,aACpCC,OAAM7B,EAAuB,CAAEM,OAAQA,EAAQK,KAAMA,EAAMgB,SAAU,CAAChB,GAAQS,EAAAA,IAAKF,EAAe,CAAEP,KAAMA,IAASkB,OAAM,MAAO,CAAEH,UAAW,0CAA2CC,SAAU,CAACrB,GAAUuB,EAAKC,KAAC,KAAM,CAAEH,SAAU,CAAC,IAAKrB,KAAYuB,EAAKC,KAAC,IAAK,CAAEH,SAAU,CAAC,IAAKC,EAAS,UAAaR,MAAK,MAAO,CAAEM,UAAW,0BAA2BC,SAAUP,EAAIC,IAAC,MAAO,CAAE"}

package/cjs/components/tab/hook/useTabs.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated use Tab component from @mui/material instead */
 declare const useTabs: () => {
     handleOverflowingTabs: (tabsRef: any, windowWidth: any, children: any, setMenuChildren: any) => void;
     handleIsMobileView: (variantSecondaryNavigation: any, isMobileView: any, setIsMobileView: any, setWindowWidth: any) => void;

package/cjs/components/tab/hook/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.js","sources":["../../../../../src/components/tab/hook/useTabs.ts"],"sourcesContent":["import { useTheme } from '@mui/material';\nimport React, { useCallback } from 'react';\nconst useTabs = () => {\n    const theme = useTheme();\n    //HANDLE THE RENDER OF THE MORE BTN TABS AND THE OVERFLOWING TABS THAT MUST BE SHOWN INSIDE THE DROPDOWN\n    const handleOverflowingTabs = useCallback((tabsRef, windowWidth, children, setMenuChildren) => {\n        const tabsListParent = tabsRef.current.closest('div');\n        const tabsListContainer = tabsListParent.querySelectorAll('div')[1];\n        const tabsList = tabsListContainer.querySelectorAll('.MuiTab-root');\n        const moreBtn = [...tabsList].find((item) => item.id === 'simple-tab-more');\n        tabsList.forEach((item) => {\n            item.style.display = 'inline-flex';\n        });\n        //if the screen size is desktop view, handle more btn, else hide more btn\n        const hiddenItems = [];\n        const primaryWidth = tabsListContainer.offsetWidth;\n        const primaryItems = [...tabsList].filter((item) => item.id !== 'simple-tab-more');\n        const moreBtnWidth = moreBtn.offsetWidth + 58;\n        //we are hiding tabs if the overflow the tabs container\n        primaryItems.forEach((item) => {\n            if (primaryWidth <= item.offsetLeft + (item.offsetWidth + moreBtnWidth)) {\n                item.style.display = 'none';\n                hiddenItems.push(item.id);\n            }\n        });\n        // if there are hidden elements (overflowing) show the more tabs and add hidden elements inisde the menu list\n        //else hide more button\n        if (!hiddenItems.length) {\n            moreBtn.style.display = 'none';\n        }\n        else {\n            const arr = [];\n            hiddenItems.forEach((item) => {\n                const filteredChildren = React.Children.toArray(children).find((child) => item === 'simple-tab-' + child.props.value);\n                if (filteredChildren) {\n                    arr.push(filteredChildren);\n                }\n            });\n            setMenuChildren(arr);\n        }\n    }, [theme.breakpoints.values.lg]);\n    const handleIsMobileView = useCallback((variantSecondaryNavigation, isMobileView, setIsMobileView, setWindowWidth) => {\n        setWindowWidth(window.innerWidth);\n        if (variantSecondaryNavigation) {\n            if (window.innerWidth <= theme.breakpoints.values.md && !isMobileView) {\n                setIsMobileView(true);\n            }\n            else if (window.innerWidth > theme.breakpoints.values.md) {\n                setIsMobileView(false);\n            }\n        }\n    }, [theme.breakpoints.values.md]);\n    //Returns the id and the aria controls for the tab component\n    const a11yProps = useCallback((index) => {\n        return {\n            id: `simple-tab-${index}`,\n            'aria-controls': `simple-tabpanel-${index}`,\n        };\n    }, []);\n    return {\n        handleOverflowingTabs,\n        handleIsMobileView,\n        a11yProps,\n    };\n};\nexport default useTabs;\n//# sourceMappingURL=useTabs.js.map"],"names":["theme","useTheme","handleOverflowingTabs","useCallback","tabsRef","windowWidth","children","setMenuChildren","tabsListContainer","current","closest","querySelectorAll","tabsList","moreBtn","find","item","id","forEach","style","display","hiddenItems","primaryWidth","offsetWidth","primaryItems","filter","moreBtnWidth","offsetLeft","push","length","arr","filteredChildren","React","default","Children","toArray","child","props","value","breakpoints","values","lg","handleIsMobileView","variantSecondaryNavigation","isMobileView","setIsMobileView","setWindowWidth","window","innerWidth","md","a11yProps","index"],"mappings":"oMAEgB,KACZ,MAAMA,EAAQC,EAAAA,WAwDd,MAAO,CACHC,sBAvD0BC,EAAAA,aAAY,CAACC,EAASC,EAAaC,EAAUC,KACvE,MACMC,EADiBJ,EAAQK,QAAQC,QAAQ,OACNC,iBAAiB,OAAO,GAC3DC,EAAWJ,EAAkBG,iBAAiB,gBAC9CE,EAAU,IAAID,GAAUE,MAAMC,GAAqB,oBAAZA,EAAKC,KAClDJ,EAASK,SAASF,IACdA,EAAKG,MAAMC,QAAU,aAAa,IAGtC,MAAMC,EAAc,GACdC,EAAeb,EAAkBc,YACjCC,EAAe,IAAIX,GAAUY,QAAQT,GAAqB,oBAAZA,EAAKC,KACnDS,EAAeZ,EAAQS,YAAc,GAU3C,GARAC,EAAaN,SAASF,IACdM,GAAgBN,EAAKW,YAAcX,EAAKO,YAAcG,KACtDV,EAAKG,MAAMC,QAAU,OACrBC,EAAYO,KAAKZ,EAAKC,IACzB,IAIAI,EAAYQ,OAGZ,CACD,MAAMC,EAAM,GACZT,EAAYH,SAASF,IACjB,MAAMe,EAAmBC,EAAKC,QAACC,SAASC,QAAQ5B,GAAUQ,MAAMqB,GAAUpB,IAAS,cAAgBoB,EAAMC,MAAMC,QAC3GP,GACAD,EAAIF,KAAKG,EACZ,IAELvB,EAAgBsB,EACnB,MAXGhB,EAAQK,MAAMC,QAAU,MAW3B,GACF,CAACnB,EAAMsC,YAAYC,OAAOC,KAqBzBC,mBApBuBtC,EAAAA,aAAY,CAACuC,EAA4BC,EAAcC,EAAiBC,KAC/FA,EAAeC,OAAOC,YAClBL,IACII,OAAOC,YAAc/C,EAAMsC,YAAYC,OAAOS,KAAOL,EACrDC,GAAgB,GAEXE,OAAOC,WAAa/C,EAAMsC,YAAYC,OAAOS,IAClDJ,GAAgB,GAEvB,GACF,CAAC5C,EAAMsC,YAAYC,OAAOS,KAWzBC,UATc9C,eAAa+C,IACpB,CACHlC,GAAI,cAAckC,IAClB,gBAAiB,mBAAmBA,OAEzC,IAKF"}
+{"version":3,"file":"useTabs.js","sources":["../../../../../src/components/tab/hook/useTabs.ts"],"sourcesContent":["import { useTheme } from '@mui/material';\nimport React, { useCallback } from 'react';\n/** @deprecated use Tab component from @mui/material instead */\nconst useTabs = () => {\n    const theme = useTheme();\n    //HANDLE THE RENDER OF THE MORE BTN TABS AND THE OVERFLOWING TABS THAT MUST BE SHOWN INSIDE THE DROPDOWN\n    const handleOverflowingTabs = useCallback((tabsRef, windowWidth, children, setMenuChildren) => {\n        const tabsListParent = tabsRef.current.closest('div');\n        const tabsListContainer = tabsListParent.querySelectorAll('div')[1];\n        const tabsList = tabsListContainer.querySelectorAll('.MuiTab-root');\n        const moreBtn = [...tabsList].find((item) => item.id === 'simple-tab-more');\n        tabsList.forEach((item) => {\n            item.style.display = 'inline-flex';\n        });\n        //if the screen size is desktop view, handle more btn, else hide more btn\n        const hiddenItems = [];\n        const primaryWidth = tabsListContainer.offsetWidth;\n        const primaryItems = [...tabsList].filter((item) => item.id !== 'simple-tab-more');\n        const moreBtnWidth = moreBtn.offsetWidth + 58;\n        //we are hiding tabs if the overflow the tabs container\n        primaryItems.forEach((item) => {\n            if (primaryWidth <= item.offsetLeft + (item.offsetWidth + moreBtnWidth)) {\n                item.style.display = 'none';\n                hiddenItems.push(item.id);\n            }\n        });\n        // if there are hidden elements (overflowing) show the more tabs and add hidden elements inisde the menu list\n        //else hide more button\n        if (!hiddenItems.length) {\n            moreBtn.style.display = 'none';\n        }\n        else {\n            const arr = [];\n            hiddenItems.forEach((item) => {\n                const filteredChildren = React.Children.toArray(children).find((child) => item === 'simple-tab-' + child.props.value);\n                if (filteredChildren) {\n                    arr.push(filteredChildren);\n                }\n            });\n            setMenuChildren(arr);\n        }\n    }, [theme.breakpoints.values.lg]);\n    const handleIsMobileView = useCallback((variantSecondaryNavigation, isMobileView, setIsMobileView, setWindowWidth) => {\n        setWindowWidth(window.innerWidth);\n        if (variantSecondaryNavigation) {\n            if (window.innerWidth <= theme.breakpoints.values.md && !isMobileView) {\n                setIsMobileView(true);\n            }\n            else if (window.innerWidth > theme.breakpoints.values.md) {\n                setIsMobileView(false);\n            }\n        }\n    }, [theme.breakpoints.values.md]);\n    //Returns the id and the aria controls for the tab component\n    const a11yProps = useCallback((index) => {\n        return {\n            id: `simple-tab-${index}`,\n            'aria-controls': `simple-tabpanel-${index}`,\n        };\n    }, []);\n    return {\n        handleOverflowingTabs,\n        handleIsMobileView,\n        a11yProps,\n    };\n};\nexport default useTabs;\n//# sourceMappingURL=useTabs.js.map"],"names":["theme","useTheme","handleOverflowingTabs","useCallback","tabsRef","windowWidth","children","setMenuChildren","tabsListContainer","current","closest","querySelectorAll","tabsList","moreBtn","find","item","id","forEach","style","display","hiddenItems","primaryWidth","offsetWidth","primaryItems","filter","moreBtnWidth","offsetLeft","push","length","arr","filteredChildren","React","default","Children","toArray","child","props","value","breakpoints","values","lg","handleIsMobileView","variantSecondaryNavigation","isMobileView","setIsMobileView","setWindowWidth","window","innerWidth","md","a11yProps","index"],"mappings":"oMAGgB,KACZ,MAAMA,EAAQC,EAAAA,WAwDd,MAAO,CACHC,sBAvD0BC,EAAAA,aAAY,CAACC,EAASC,EAAaC,EAAUC,KACvE,MACMC,EADiBJ,EAAQK,QAAQC,QAAQ,OACNC,iBAAiB,OAAO,GAC3DC,EAAWJ,EAAkBG,iBAAiB,gBAC9CE,EAAU,IAAID,GAAUE,MAAMC,GAAqB,oBAAZA,EAAKC,KAClDJ,EAASK,SAASF,IACdA,EAAKG,MAAMC,QAAU,aAAa,IAGtC,MAAMC,EAAc,GACdC,EAAeb,EAAkBc,YACjCC,EAAe,IAAIX,GAAUY,QAAQT,GAAqB,oBAAZA,EAAKC,KACnDS,EAAeZ,EAAQS,YAAc,GAU3C,GARAC,EAAaN,SAASF,IACdM,GAAgBN,EAAKW,YAAcX,EAAKO,YAAcG,KACtDV,EAAKG,MAAMC,QAAU,OACrBC,EAAYO,KAAKZ,EAAKC,IACzB,IAIAI,EAAYQ,OAGZ,CACD,MAAMC,EAAM,GACZT,EAAYH,SAASF,IACjB,MAAMe,EAAmBC,EAAKC,QAACC,SAASC,QAAQ5B,GAAUQ,MAAMqB,GAAUpB,IAAS,cAAgBoB,EAAMC,MAAMC,QAC3GP,GACAD,EAAIF,KAAKG,EACZ,IAELvB,EAAgBsB,EACnB,MAXGhB,EAAQK,MAAMC,QAAU,MAW3B,GACF,CAACnB,EAAMsC,YAAYC,OAAOC,KAqBzBC,mBApBuBtC,EAAAA,aAAY,CAACuC,EAA4BC,EAAcC,EAAiBC,KAC/FA,EAAeC,OAAOC,YAClBL,IACII,OAAOC,YAAc/C,EAAMsC,YAAYC,OAAOS,KAAOL,EACrDC,GAAgB,GAEXE,OAAOC,WAAa/C,EAAMsC,YAAYC,OAAOS,IAClDJ,GAAgB,GAEvB,GACF,CAAC5C,EAAMsC,YAAYC,OAAOS,KAWzBC,UATc9C,eAAa+C,IACpB,CACHlC,GAAI,cAAckC,IAClB,gBAAiB,mBAAmBA,OAEzC,IAKF"}

package/cjs/components/tab/menuTab.d.ts

@@ -32,5 +32,6 @@ export interface TabProps {
  * @description SkodaFlow Tab component.
  * @param props TabProps
  * @returns React Functional Component
+ * @deprecated use Tab component from @mui/material instead
  */
 export declare const MenuTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>;

package/cjs/components/tab/menuTab.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("./tabs.js"),l=require("@mui/material"),r=require("../icon/icon.js"),s=require("./tabStyled.js"),i=require("./hook/useTabs.js");function n(e){return e&&e.__esModule?e:{default:e}}var o=n(a);const u=a.forwardRef((({label:n,value:u,children:d},p)=>{const{activeTab:b,updateActiveTab:x,smallSize:h}=a.useContext(t.TabsContext),[m,f]=a.useState(!1),[j,v]=a.useState(!1),[C,k]=a.useState(null),[w,y]=a.useState(null),{a11yProps:S}=i.default(),g=a.useCallback((e=>{e.href?window.open(e.href,e.target):x(e.value,!0),v(!1),e.onClick&&e.onClick(e.value),e.analyticsCallback&&e.analyticsCallback(e.value),y(e.label)}),[x]),T=a.useCallback((e=>{v(!j),k(e.currentTarget)}),[j]),q=a.useCallback((()=>o.default.Children.map(d,(a=>e.jsx(l.MenuItem,{style:{fontSize:"16px"},onClick:()=>g(a.props),children:a.props.label})))),[d,g]);return a.useEffect((()=>{f(b===u)}),[b,m,u]),e.jsxs(e.Fragment,{children:[e.jsx(s.default,Object.assign({ref:p,wrapped:!0,onClick:T,smallSize:h,isActive:m,value:u,tabIndex:1,label:w||n},S(u),{icon:e.jsx(r.Icon,{className:j?"chevron-up":"chevron-down"}),iconPosition:"end",className:"MuiTab-more"})),e.jsx(l.Popper,{open:j,anchorEl:C,placement:"bottom",transition:!0,children:({TransitionProps:a})=>e.jsx(l.ClickAwayListener,{onClickAway:()=>v(!1),children:e.jsx(l.Fade,Object.assign({},a,{timeout:350,children:e.jsx(c,{id:"more-tabs-menu",children:q()})}))})})]})})),c=l.styled(l.MenuList)((()=>({top:"13px",left:"27px",boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px",borderRadius:"4px",padding:"0px",width:"131px",maxHeight:"240px",overflow:"overlay"})));exports.MenuTab=u;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("./tabs.js"),r=require("@mui/material"),i=require("../icon/icon.js");require("../icon/icon.definitions.js");var l=require("./tabStyled.js"),n=require("./hook/useTabs.js");function s(e){return e&&e.__esModule?e:{default:e}}var o=s(a);const u=a.forwardRef((({label:s,value:u,children:d},p)=>{const{activeTab:b,updateActiveTab:x,smallSize:h}=a.useContext(t.TabsContext),[m,f]=a.useState(!1),[j,v]=a.useState(!1),[C,k]=a.useState(null),[w,y]=a.useState(null),{a11yProps:S}=n.default(),g=a.useCallback((e=>{e.href?window.open(e.href,e.target):x(e.value,!0),v(!1),e.onClick&&e.onClick(e.value),e.analyticsCallback&&e.analyticsCallback(e.value),y(e.label)}),[x]),q=a.useCallback((e=>{v(!j),k(e.currentTarget)}),[j]),T=a.useCallback((()=>o.default.Children.map(d,(a=>e.jsx(r.MenuItem,{style:{fontSize:"16px"},onClick:()=>g(a.props),children:a.props.label})))),[d,g]);return a.useEffect((()=>{f(b===u)}),[b,m,u]),e.jsxs(e.Fragment,{children:[e.jsx(l.default,Object.assign({ref:p,wrapped:!0,onClick:q,smallSize:h,isActive:m,value:u,tabIndex:1,label:w||s},S(u),{icon:e.jsx(i.Icon,{name:j?"chevron-up":"chevron-down"}),iconPosition:"end",className:"MuiTab-more"})),e.jsx(r.Popper,{open:j,anchorEl:C,placement:"bottom",transition:!0,children:({TransitionProps:a})=>e.jsx(r.ClickAwayListener,{onClickAway:()=>v(!1),children:e.jsx(r.Fade,Object.assign({},a,{timeout:350,children:e.jsx(c,{id:"more-tabs-menu",children:T()})}))})})]})})),c=r.styled(r.MenuList)((()=>({top:"13px",left:"27px",boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px",borderRadius:"4px",padding:"0px",width:"131px",maxHeight:"240px",overflow:"overlay"})));exports.MenuTab=u;
 //# sourceMappingURL=menuTab.js.map

package/cjs/components/tab/menuTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuTab.js","sources":["../../../../src/components/tab/menuTab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport { TabsContext } from './tabs';\nimport { ClickAwayListener, Fade, MenuItem, MenuList, Popper, styled } from '@mui/material';\nimport { Icon } from '../icon';\nimport TabStyled from './tabStyled';\nimport useTabs from './hook/useTabs';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n */\nexport const MenuTab = forwardRef(({ label, value, children }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [selectedLabel, setSelectedLabel] = useState(null);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((_props) => {\n        if (!_props.href) {\n            updateActiveTab(_props.value, true);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n        _props.analyticsCallback && _props.analyticsCallback(_props.value);\n        setSelectedLabel(_props.label);\n    }, [updateActiveTab]);\n    const handleOpenMenu = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //RETURNS ALL THE TABS OVERFLOWING AS MENU ITEMS\n    const handleMenuItems = useCallback(() => {\n        return React.Children.map(children, (child) => {\n            return (_jsx(MenuItem, { style: { fontSize: '16px' }, onClick: () => handleOnClick(child.props), children: child.props.label }));\n        });\n    }, [children, handleOnClick]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, isActive, value]);\n    return (_jsxs(_Fragment, { children: [_jsx(TabStyled, Object.assign({ ref: ref, wrapped: true, onClick: handleOpenMenu, smallSize: smallSize, isActive: isActive, value: value, tabIndex: 1, label: selectedLabel || label }, a11yProps(value), { icon: _jsx(Icon, { className: open ? 'chevron-up' : 'chevron-down' }), iconPosition: \"end\", className: \"MuiTab-more\" })), _jsx(Popper, { open: open, anchorEl: anchorEl, placement: \"bottom\", transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) })) })] }));\n});\nconst MenuStyled = styled(MenuList)(() => {\n    return {\n        top: '13px',\n        left: '27px',\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        borderRadius: '4px',\n        padding: '0px',\n        width: '131px',\n        maxHeight: '240px',\n        overflow: 'overlay',\n    };\n});\n//# sourceMappingURL=menuTab.js.map"],"names":["MenuTab","forwardRef","label","value","children","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","open","setOpen","anchorEl","setAnchorEl","selectedLabel","setSelectedLabel","a11yProps","useTabs","handleOnClick","useCallback","_props","href","window","target","onClick","analyticsCallback","handleOpenMenu","e","currentTarget","handleMenuItems","React","default","Children","map","child","_jsx","MenuItem","style","fontSize","props","useEffect","_jsxs","jsxs","_Fragment","jsx","TabStyled","Object","assign","wrapped","tabIndex","icon","Icon","className","iconPosition","Popper","placement","transition","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","MenuStyled","id","styled","MenuList","top","left","boxShadow","borderRadius","padding","width","maxHeight","overflow"],"mappings":"2QAYY,MAACA,EAAUC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,YAAYC,KAC3D,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IAClCC,EAAMC,GAAWF,EAAQA,UAAC,IAC1BG,EAAUC,GAAeJ,EAAQA,SAAC,OAClCK,EAAeC,GAAoBN,EAAQA,SAAC,OAC7CO,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,IAC1BA,EAAOC,KAIRC,OAAOZ,KAAKU,EAAOC,KAAMD,EAAOG,QAHhCpB,EAAgBiB,EAAOrB,OAAO,GAKlCY,GAAQ,GACRS,EAAOI,SAAWJ,EAAOI,QAAQJ,EAAOrB,OACxCqB,EAAOK,mBAAqBL,EAAOK,kBAAkBL,EAAOrB,OAC5DgB,EAAiBK,EAAOtB,MAAM,GAC/B,CAACK,IACEuB,EAAiBP,eAAaQ,IAChChB,GAASD,GACTG,EAAYc,EAAEC,cAAc,GAC7B,CAAClB,IAEEmB,EAAkBV,EAAAA,aAAY,IACzBW,EAAKC,QAACC,SAASC,IAAIjC,GAAWkC,GACzBC,EAAAA,IAAKC,EAAAA,SAAU,CAAEC,MAAO,CAAEC,SAAU,QAAUd,QAAS,IAAMN,EAAcgB,EAAMK,OAAQvC,SAAUkC,EAAMK,MAAMzC,WAE5H,CAACE,EAAUkB,IAUd,OARAsB,EAAAA,WAAU,KAEFhC,EADAN,IAAcH,EAKjB,GACF,CAACG,EAAWK,EAAUR,IACjB0C,EAAKC,KAACC,WAAW,CAAE3C,SAAU,CAACmC,EAAIS,IAACC,UAAWC,OAAOC,OAAO,CAAE9C,IAAKA,EAAK+C,SAAS,EAAMxB,QAASE,EAAgBtB,UAAWA,EAAWG,SAAUA,EAAUR,MAAOA,EAAOkD,SAAU,EAAGnD,MAAOgB,GAAiBhB,GAASkB,EAAUjB,GAAQ,CAAEmD,KAAMf,MAAKgB,EAAAA,KAAM,CAAEC,UAAW1C,EAAO,aAAe,iBAAmB2C,aAAc,MAAOD,UAAW,iBAAmBjB,EAAIS,IAACU,SAAQ,CAAE5C,KAAMA,EAAME,SAAUA,EAAU2C,UAAW,SAAUC,YAAY,EAAMxD,SAAU,EAAGyD,qBAAuBtB,EAAIS,IAACc,oBAAmB,CAAEC,YAAa,IAAMhD,GAAQ,GAAQX,SAAUmC,EAAIS,IAACgB,EAAIA,KAAEd,OAAOC,OAAO,CAAE,EAAEU,EAAiB,CAAEI,QAAS,IAAK7D,SAAUmC,EAAIS,IAACkB,EAAY,CAAEC,GAAI,iBAAkB/D,SAAU6B,eAAqC,IAE3sBiC,EAAaE,EAAAA,OAAOC,EAAQA,SAAfD,EAAiB,KACzB,CACHE,IAAK,OACLC,KAAM,OACNC,UAAW,+BACXC,aAAc,MACdC,QAAS,MACTC,MAAO,QACPC,UAAW,QACXC,SAAU"}
+{"version":3,"file":"menuTab.js","sources":["../../../../src/components/tab/menuTab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport { TabsContext } from './tabs';\nimport { ClickAwayListener, Fade, MenuItem, MenuList, Popper, styled } from '@mui/material';\nimport { Icon } from '../icon';\nimport TabStyled from './tabStyled';\nimport useTabs from './hook/useTabs';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n * @deprecated use Tab component from @mui/material instead\n */\nexport const MenuTab = forwardRef(({ label, value, children }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [selectedLabel, setSelectedLabel] = useState(null);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((_props) => {\n        if (!_props.href) {\n            updateActiveTab(_props.value, true);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n        _props.analyticsCallback && _props.analyticsCallback(_props.value);\n        setSelectedLabel(_props.label);\n    }, [updateActiveTab]);\n    const handleOpenMenu = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //RETURNS ALL THE TABS OVERFLOWING AS MENU ITEMS\n    const handleMenuItems = useCallback(() => {\n        return React.Children.map(children, (child) => {\n            return (_jsx(MenuItem, { style: { fontSize: '16px' }, onClick: () => handleOnClick(child.props), children: child.props.label }));\n        });\n    }, [children, handleOnClick]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, isActive, value]);\n    return (_jsxs(_Fragment, { children: [_jsx(TabStyled, Object.assign({ ref: ref, wrapped: true, onClick: handleOpenMenu, smallSize: smallSize, isActive: isActive, value: value, tabIndex: 1, label: selectedLabel || label }, a11yProps(value), { icon: _jsx(Icon, { name: open ? 'chevron-up' : 'chevron-down' }), iconPosition: \"end\", className: \"MuiTab-more\" })), _jsx(Popper, { open: open, anchorEl: anchorEl, placement: \"bottom\", transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) })) })] }));\n});\nconst MenuStyled = styled(MenuList)(() => {\n    return {\n        top: '13px',\n        left: '27px',\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        borderRadius: '4px',\n        padding: '0px',\n        width: '131px',\n        maxHeight: '240px',\n        overflow: 'overlay',\n    };\n});\n//# sourceMappingURL=menuTab.js.map"],"names":["MenuTab","forwardRef","label","value","children","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","open","setOpen","anchorEl","setAnchorEl","selectedLabel","setSelectedLabel","a11yProps","useTabs","handleOnClick","useCallback","_props","href","window","target","onClick","analyticsCallback","handleOpenMenu","e","currentTarget","handleMenuItems","React","default","Children","map","child","_jsx","MenuItem","style","fontSize","props","useEffect","_jsxs","jsxs","_Fragment","jsx","TabStyled","Object","assign","wrapped","tabIndex","icon","Icon","name","iconPosition","className","Popper","placement","transition","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","MenuStyled","id","styled","MenuList","top","left","boxShadow","borderRadius","padding","width","maxHeight","overflow"],"mappings":"sTAaY,MAACA,EAAUC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,YAAYC,KAC3D,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IAClCC,EAAMC,GAAWF,EAAQA,UAAC,IAC1BG,EAAUC,GAAeJ,EAAQA,SAAC,OAClCK,EAAeC,GAAoBN,EAAQA,SAAC,OAC7CO,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,IAC1BA,EAAOC,KAIRC,OAAOZ,KAAKU,EAAOC,KAAMD,EAAOG,QAHhCpB,EAAgBiB,EAAOrB,OAAO,GAKlCY,GAAQ,GACRS,EAAOI,SAAWJ,EAAOI,QAAQJ,EAAOrB,OACxCqB,EAAOK,mBAAqBL,EAAOK,kBAAkBL,EAAOrB,OAC5DgB,EAAiBK,EAAOtB,MAAM,GAC/B,CAACK,IACEuB,EAAiBP,eAAaQ,IAChChB,GAASD,GACTG,EAAYc,EAAEC,cAAc,GAC7B,CAAClB,IAEEmB,EAAkBV,EAAAA,aAAY,IACzBW,EAAKC,QAACC,SAASC,IAAIjC,GAAWkC,GACzBC,EAAAA,IAAKC,EAAAA,SAAU,CAAEC,MAAO,CAAEC,SAAU,QAAUd,QAAS,IAAMN,EAAcgB,EAAMK,OAAQvC,SAAUkC,EAAMK,MAAMzC,WAE5H,CAACE,EAAUkB,IAUd,OARAsB,EAAAA,WAAU,KAEFhC,EADAN,IAAcH,EAKjB,GACF,CAACG,EAAWK,EAAUR,IACjB0C,EAAKC,KAACC,WAAW,CAAE3C,SAAU,CAACmC,EAAIS,IAACC,UAAWC,OAAOC,OAAO,CAAE9C,IAAKA,EAAK+C,SAAS,EAAMxB,QAASE,EAAgBtB,UAAWA,EAAWG,SAAUA,EAAUR,MAAOA,EAAOkD,SAAU,EAAGnD,MAAOgB,GAAiBhB,GAASkB,EAAUjB,GAAQ,CAAEmD,KAAMf,MAAKgB,EAAAA,KAAM,CAAEC,KAAM1C,EAAO,aAAe,iBAAmB2C,aAAc,MAAOC,UAAW,iBAAmBnB,EAAIS,IAACW,SAAQ,CAAE7C,KAAMA,EAAME,SAAUA,EAAU4C,UAAW,SAAUC,YAAY,EAAMzD,SAAU,EAAG0D,qBAAuBvB,EAAIS,IAACe,oBAAmB,CAAEC,YAAa,IAAMjD,GAAQ,GAAQX,SAAUmC,EAAIS,IAACiB,EAAIA,KAAEf,OAAOC,OAAO,CAAE,EAAEW,EAAiB,CAAEI,QAAS,IAAK9D,SAAUmC,EAAIS,IAACmB,EAAY,CAAEC,GAAI,iBAAkBhE,SAAU6B,eAAqC,IAEtsBkC,EAAaE,EAAAA,OAAOC,EAAQA,SAAfD,EAAiB,KACzB,CACHE,IAAK,OACLC,KAAM,OACNC,UAAW,+BACXC,aAAc,MACdC,QAAS,MACTC,MAAO,QACPC,UAAW,QACXC,SAAU"}

package/cjs/components/tab/secondaryNavigation/secondaryNavigationTabs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/AppBar"),i=require("@mui/material/Toolbar"),t=require("../../icon/icon.js"),a=require("./secondaryTabStyled.js"),n=require("@mui/material"),s=require("../../../design/skoda/palette.theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var p=l(r),d=l(o),c=l(i);const u=n.styled(n.Backdrop)((()=>({zIndex:2e3}))),x=n.styled(n.Popper)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),b=n.styled(n.MenuList)((({theme:e})=>({position:"absolute",bottom:"0",left:0,width:"100%",padding:"26px 0px 27px 0px",background:"white",boxSizing:"border-box",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",zIndex:2e3,boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px","& .MuiDivider-root":{display:"block",marginTop:"0px !important",marginBottom:"0px !important"},"& div:first-of-type":{"& > li":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}},"& > div > li":{fontSize:"16px",fontWeight:"400",color:e.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),h=n.styled(d.default)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${s.flowColors.transparent.secondary}`,backgroundColor:s.flowColors.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));exports.SecondaryNavigationTabs=({currentActiveTab:o,setCurrentActiveTab:i,children:s})=>{const[l,d]=r.useState(null),[m,g]=r.useState(null),[j,f]=r.useState(!1),[v,k]=r.useState(null),C=r.useCallback((e=>{i(e.value),e.onClick&&e.onClick()}),[i]),y=r.useCallback((e=>{f(!j),g(e.currentTarget)}),[j]),T=r.useCallback((r=>r.href?e.jsxs("a",{href:r.href,target:r.target||null,children:[e.jsx(t.Icon,{color:"inherit",className:r.icon||"more-horizontal"}),r.label]}):e.jsxs(e.Fragment,{children:[e.jsx(t.Icon,{color:"inherit",className:r.icon||"more-horizontal"}),r.label]})),[]),A=r.useCallback((e=>{k(e.label),e.href?window.open(e.href,e.target):i(e.value),f(!1),e.onClick&&e.onClick(e.value)}),[i]),w=r.useCallback((()=>l.slice(3).map(((r,o)=>e.jsxs("div",{children:[e.jsx(n.MenuItem,{onClick:()=>A(r.props),children:r.props.label},o),e.jsx(n.Divider,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},r.props.label)))),[l,A]);return r.useEffect((()=>{d(p.default.Children.toArray(s))}),[s]),e.jsx(h,{position:"fixed",color:"transparent",children:e.jsx(c.default,{children:e.jsx(n.Box,{sx:{display:"flex"},children:l&&e.jsxs(e.Fragment,{children:[e.jsx(a.default,Object.assign({},l[0].props,{isActive:o===l[0].props.value,onClick:()=>{C(l[0].props)},children:T(l[0].props)}),"secondary-tab-0"),e.jsx(a.default,Object.assign({},l[1].props,{isActive:o===l[1].props.value,onClick:()=>{C(l[1].props)},children:T(l[1].props)}),"secondary-tab-1"),e.jsx(a.default,Object.assign({},l[2].props,{isActive:o===l[2].props.value,onClick:()=>{C(l[2].props)},children:T(l[2].props)}),"secondary-tab-2"),l.length>4&&e.jsxs(e.Fragment,{children:[e.jsxs(a.default,{isActive:j,moreTab:!0,selectedMenuLabel:v,onClick:y,children:[e.jsx(t.Icon,{color:"inherit",className:"more-vertical"}),v]},"secondary-tab-more"),e.jsx(x,{open:j,anchorEl:m,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:r})=>e.jsx(n.ClickAwayListener,{onClickAway:()=>f(!1),children:e.jsx(u,{open:j,onClick:()=>f(!1),children:e.jsx(n.Fade,Object.assign({},r,{timeout:350,children:e.jsx(b,{id:"more-tabs-menu",children:w()})}))})})})]}),l.length<=4&&e.jsx(a.default,Object.assign({},l[3].props,{isActive:o===l[3].props.value,onClick:()=>{C(l[3].props)},children:T(l[3].props)}),"secondary-tab-3")]})})})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/AppBar"),i=require("@mui/material/Toolbar"),t=require("../../icon/icon.js");require("../../icon/icon.definitions.js");var a=require("./secondaryTabStyled.js"),n=require("@mui/material"),s=require("../../../design/skoda/palette.theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var p=l(r),d=l(o),c=l(i);const u=n.styled(n.Backdrop)((()=>({zIndex:2e3}))),x=n.styled(n.Popper)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),b=n.styled(n.MenuList)((({theme:e})=>({position:"absolute",bottom:"0",left:0,width:"100%",padding:"26px 0px 27px 0px",background:"white",boxSizing:"border-box",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",zIndex:2e3,boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px","& .MuiDivider-root":{display:"block",marginTop:"0px !important",marginBottom:"0px !important"},"& div:first-of-type":{"& > li":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}},"& > div > li":{fontSize:"16px",fontWeight:"400",color:e.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),h=n.styled(d.default)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${s.flowColors.transparent.secondary}`,backgroundColor:s.flowColors.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));exports.SecondaryNavigationTabs=({currentActiveTab:o,setCurrentActiveTab:i,children:s})=>{const[l,d]=r.useState(null),[m,g]=r.useState(null),[j,f]=r.useState(!1),[v,k]=r.useState(null),C=r.useCallback((e=>{i(e.value),e.onClick&&e.onClick()}),[i]),y=r.useCallback((e=>{f(!j),g(e.currentTarget)}),[j]),T=r.useCallback((r=>r.href?e.jsxs("a",{href:r.href,target:r.target||null,children:[e.jsx(t.Icon,{color:"inherit",name:r.icon||"more-horizontal"}),r.label]}):e.jsxs(e.Fragment,{children:[e.jsx(t.Icon,{color:"inherit",name:r.icon||"more-horizontal"}),r.label]})),[]),A=r.useCallback((e=>{k(e.label),e.href?window.open(e.href,e.target):i(e.value),f(!1),e.onClick&&e.onClick(e.value)}),[i]),w=r.useCallback((()=>l.slice(3).map(((r,o)=>e.jsxs("div",{children:[e.jsx(n.MenuItem,{onClick:()=>A(r.props),children:r.props.label},o),e.jsx(n.Divider,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},r.props.label)))),[l,A]);return r.useEffect((()=>{d(p.default.Children.toArray(s))}),[s]),e.jsx(h,{position:"fixed",color:"transparent",children:e.jsx(c.default,{children:e.jsx(n.Box,{sx:{display:"flex"},children:l&&e.jsxs(e.Fragment,{children:[e.jsx(a.default,Object.assign({},l[0].props,{isActive:o===l[0].props.value,onClick:()=>{C(l[0].props)},children:T(l[0].props)}),"secondary-tab-0"),e.jsx(a.default,Object.assign({},l[1].props,{isActive:o===l[1].props.value,onClick:()=>{C(l[1].props)},children:T(l[1].props)}),"secondary-tab-1"),e.jsx(a.default,Object.assign({},l[2].props,{isActive:o===l[2].props.value,onClick:()=>{C(l[2].props)},children:T(l[2].props)}),"secondary-tab-2"),l.length>4&&e.jsxs(e.Fragment,{children:[e.jsxs(a.default,{isActive:j,moreTab:!0,selectedMenuLabel:v,onClick:y,children:[e.jsx(t.Icon,{color:"inherit",name:"vertical"}),v]},"secondary-tab-more"),e.jsx(x,{open:j,anchorEl:m,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:r})=>e.jsx(n.ClickAwayListener,{onClickAway:()=>f(!1),children:e.jsx(u,{open:j,onClick:()=>f(!1),children:e.jsx(n.Fade,Object.assign({},r,{timeout:350,children:e.jsx(b,{id:"more-tabs-menu",children:w()})}))})})})]}),l.length<=4&&e.jsx(a.default,Object.assign({},l[3].props,{isActive:o===l[3].props.value,onClick:()=>{C(l[3].props)},children:T(l[3].props)}),"secondary-tab-3")]})})})})};
 //# sourceMappingURL=secondaryNavigationTabs.js.map

package/cjs/components/tab/secondaryNavigation/secondaryNavigationTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"secondaryNavigationTabs.js","sources":["../../../../../src/components/tab/secondaryNavigation/secondaryNavigationTabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useState } from 'react';\nimport MuiAppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { Icon } from '../../icon';\nimport SecondaryTabStyled from './secondaryTabStyled';\nimport { MenuItem, ClickAwayListener, Fade, MenuList, Popper, styled, Box, Backdrop, Divider } from '@mui/material';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props AppBarProps\n * @returns React Functional Component\n */\nexport const SecondaryNavigationTabs = ({ currentActiveTab, setCurrentActiveTab, children }) => {\n    const [childrenArr, setChildrenArr] = useState(null);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [open, setOpen] = useState(false);\n    const [selectedMenuLabel, setSelectedMenuLabel] = useState(null);\n    //handle the active tab selected\n    const handleActiveTab = useCallback((_props) => {\n        setCurrentActiveTab(_props.value);\n        _props.onClick && _props.onClick();\n    }, [setCurrentActiveTab]);\n    //handle the click on tab of type menu\n    const handleMenuTabClick = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //render a link tab or not based on type\n    const handleRenderTabType = useCallback((_props) => {\n        if (_props.href) {\n            return (_jsxs(\"a\", { href: _props.href, target: _props.target || null, children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n        else {\n            return (_jsxs(_Fragment, { children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n    }, []);\n    //handle the event triggered on onclick based on tab type (link or tab)\n    const onClickMenuItem = useCallback((_props) => {\n        setSelectedMenuLabel(_props.label);\n        if (!_props.href) {\n            setCurrentActiveTab(_props.value);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n    }, [setCurrentActiveTab]);\n    //returns the list of menu items\n    const handleMenuItems = useCallback(() => {\n        const menuItems = childrenArr.slice(3);\n        return menuItems.map((item, i) => {\n            return (_jsxs(\"div\", { children: [_jsx(MenuItem, { onClick: () => onClickMenuItem(item.props), children: item.props.label }, i), _jsx(Divider, { orientation: \"horizontal\", textAlign: \"center\", variant: \"middle\" })] }, item.props.label));\n        });\n    }, [childrenArr, onClickMenuItem]);\n    useEffect(() => {\n        setChildrenArr(React.Children.toArray(children));\n    }, [children]);\n    return (_jsx(AppBarStyled, { position: \"fixed\", color: \"transparent\", children: _jsx(Toolbar, { children: _jsx(Box, { sx: { display: 'flex' }, children: childrenArr && (_jsxs(_Fragment, { children: [_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[0].props, { isActive: currentActiveTab === childrenArr[0].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[0].props);\n                            }, children: handleRenderTabType(childrenArr[0].props) }), `secondary-tab-0`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[1].props, { isActive: currentActiveTab === childrenArr[1].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[1].props);\n                            }, children: handleRenderTabType(childrenArr[1].props) }), `secondary-tab-1`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[2].props, { isActive: currentActiveTab === childrenArr[2].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[2].props);\n                            }, children: handleRenderTabType(childrenArr[2].props) }), `secondary-tab-2`), childrenArr.length > 4 && (_jsxs(_Fragment, { children: [_jsxs(SecondaryTabStyled, { isActive: open, moreTab: true, selectedMenuLabel: selectedMenuLabel, onClick: handleMenuTabClick, children: [_jsx(Icon, { color: \"inherit\", className: 'more-vertical' }), selectedMenuLabel] }, `secondary-tab-more`), _jsx(PopperStyled, { open: open, anchorEl: anchorEl, placement: \"top\", transition: true, disablePortal: false, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(BackdropStyled, { open: open, onClick: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) }) })) })] })), childrenArr.length <= 4 && (_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[3].props, { isActive: currentActiveTab === childrenArr[3].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[3].props);\n                            }, children: handleRenderTabType(childrenArr[3].props) }), `secondary-tab-3`))] })) }) }) }));\n};\nconst BackdropStyled = styled(Backdrop)(() => {\n    return {\n        zIndex: 2000,\n    };\n});\nconst PopperStyled = styled(Popper)(() => {\n    const style = {\n        transform: 'unset !important',\n        position: 'static !important',\n        zIndex: 2000,\n    };\n    return style;\n});\nconst MenuStyled = styled(MenuList)(({ theme }) => {\n    return {\n        position: 'absolute',\n        bottom: '0',\n        left: 0,\n        width: '100%',\n        padding: '26px 0px 27px 0px',\n        background: 'white',\n        boxSizing: 'border-box',\n        borderTopLeftRadius: '16px',\n        borderTopRightRadius: '16px',\n        zIndex: 2000,\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        '& .MuiDivider-root': {\n            display: 'block',\n            marginTop: '0px !important',\n            marginBottom: '0px !important',\n        },\n        '& div:first-of-type': {\n            '& > li': {\n                borderTopLeftRadius: '16px',\n                borderTopRightRadius: '16px',\n            },\n        },\n        '& > div > li': {\n            fontSize: '16px',\n            fontWeight: '400',\n            color: theme.palette.onSurface.os900,\n            paddingTop: '11px',\n            paddingBottom: '11px',\n        },\n    };\n});\n/**\n * @description Tabs styling definition based on props\n */\nconst AppBarStyled = styled(MuiAppBar)(() => {\n    return {\n        maxHeigth: '56px',\n        padding: '0px',\n        top: 'auto',\n        bottom: 0,\n        boxShadow: 'none',\n        borderTop: `1px solid ${flowColors.transparent.secondary}`,\n        backgroundColor: flowColors.background.primary,\n        '& > div.MuiToolbar-root': {\n            maxHeight: '56px',\n            padding: '0px',\n            '& > div': {\n                width: '100%',\n                justifyContent: 'space-evenly',\n                '& > div': {\n                    '&> a': {\n                        padding: 0,\n                        textDecoration: 'none',\n                    },\n                },\n            },\n        },\n    };\n});\n//# sourceMappingURL=secondaryNavigationTabs.js.map"],"names":["BackdropStyled","styled","Backdrop","zIndex","PopperStyled","Popper","transform","position","MenuStyled","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","display","marginTop","marginBottom","fontSize","fontWeight","color","palette","onSurface","os900","paddingTop","paddingBottom","AppBarStyled","MuiAppBar","default","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration","currentActiveTab","setCurrentActiveTab","children","childrenArr","setChildrenArr","useState","anchorEl","setAnchorEl","open","setOpen","selectedMenuLabel","setSelectedMenuLabel","handleActiveTab","useCallback","_props","value","onClick","handleMenuTabClick","e","currentTarget","handleRenderTabType","href","_jsxs","target","_jsx","Icon","className","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","jsx","Toolbar","Box","sx","jsxs","SecondaryTabStyled","Object","assign","isActive","length","moreTab","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","id"],"mappings":"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"}
+{"version":3,"file":"secondaryNavigationTabs.js","sources":["../../../../../src/components/tab/secondaryNavigation/secondaryNavigationTabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useState } from 'react';\nimport MuiAppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { Icon } from '../../icon';\nimport SecondaryTabStyled from './secondaryTabStyled';\nimport { MenuItem, ClickAwayListener, Fade, MenuList, Popper, styled, Box, Backdrop, Divider } from '@mui/material';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props AppBarProps\n * @returns React Functional Component\n */\nexport const SecondaryNavigationTabs = ({ currentActiveTab, setCurrentActiveTab, children }) => {\n    const [childrenArr, setChildrenArr] = useState(null);\n    const [anchorEl, setAnchorEl] = useState(null);\n    const [open, setOpen] = useState(false);\n    const [selectedMenuLabel, setSelectedMenuLabel] = useState(null);\n    //handle the active tab selected\n    const handleActiveTab = useCallback((_props) => {\n        setCurrentActiveTab(_props.value);\n        _props.onClick && _props.onClick();\n    }, [setCurrentActiveTab]);\n    //handle the click on tab of type menu\n    const handleMenuTabClick = useCallback((e) => {\n        setOpen(!open);\n        setAnchorEl(e.currentTarget);\n    }, [open]);\n    //render a link tab or not based on type\n    const handleRenderTabType = useCallback((_props) => {\n        if (_props.href) {\n            return (_jsxs(\"a\", { href: _props.href, target: _props.target || null, children: [_jsx(Icon, { color: \"inherit\", name: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n        else {\n            return (_jsxs(_Fragment, { children: [_jsx(Icon, { color: \"inherit\", name: _props.icon || 'more-horizontal' }), _props.label] }));\n        }\n    }, []);\n    //handle the event triggered on onclick based on tab type (link or tab)\n    const onClickMenuItem = useCallback((_props) => {\n        setSelectedMenuLabel(_props.label);\n        if (!_props.href) {\n            setCurrentActiveTab(_props.value);\n        }\n        else {\n            window.open(_props.href, _props.target);\n        }\n        setOpen(false);\n        _props.onClick && _props.onClick(_props.value);\n    }, [setCurrentActiveTab]);\n    //returns the list of menu items\n    const handleMenuItems = useCallback(() => {\n        const menuItems = childrenArr.slice(3);\n        return menuItems.map((item, i) => {\n            return (_jsxs(\"div\", { children: [_jsx(MenuItem, { onClick: () => onClickMenuItem(item.props), children: item.props.label }, i), _jsx(Divider, { orientation: \"horizontal\", textAlign: \"center\", variant: \"middle\" })] }, item.props.label));\n        });\n    }, [childrenArr, onClickMenuItem]);\n    useEffect(() => {\n        setChildrenArr(React.Children.toArray(children));\n    }, [children]);\n    return (_jsx(AppBarStyled, { position: \"fixed\", color: \"transparent\", children: _jsx(Toolbar, { children: _jsx(Box, { sx: { display: 'flex' }, children: childrenArr && (_jsxs(_Fragment, { children: [_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[0].props, { isActive: currentActiveTab === childrenArr[0].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[0].props);\n                            }, children: handleRenderTabType(childrenArr[0].props) }), `secondary-tab-0`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[1].props, { isActive: currentActiveTab === childrenArr[1].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[1].props);\n                            }, children: handleRenderTabType(childrenArr[1].props) }), `secondary-tab-1`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[2].props, { isActive: currentActiveTab === childrenArr[2].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[2].props);\n                            }, children: handleRenderTabType(childrenArr[2].props) }), `secondary-tab-2`), childrenArr.length > 4 && (_jsxs(_Fragment, { children: [_jsxs(SecondaryTabStyled, { isActive: open, moreTab: true, selectedMenuLabel: selectedMenuLabel, onClick: handleMenuTabClick, children: [_jsx(Icon, { color: \"inherit\", name: \"vertical\" }), selectedMenuLabel] }, `secondary-tab-more`), _jsx(PopperStyled, { open: open, anchorEl: anchorEl, placement: \"top\", transition: true, disablePortal: false, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(BackdropStyled, { open: open, onClick: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) }) })) })] })), childrenArr.length <= 4 && (_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[3].props, { isActive: currentActiveTab === childrenArr[3].props.value, onClick: () => {\n                                handleActiveTab(childrenArr[3].props);\n                            }, children: handleRenderTabType(childrenArr[3].props) }), `secondary-tab-3`))] })) }) }) }));\n};\nconst BackdropStyled = styled(Backdrop)(() => {\n    return {\n        zIndex: 2000,\n    };\n});\nconst PopperStyled = styled(Popper)(() => {\n    const style = {\n        transform: 'unset !important',\n        position: 'static !important',\n        zIndex: 2000,\n    };\n    return style;\n});\nconst MenuStyled = styled(MenuList)(({ theme }) => {\n    return {\n        position: 'absolute',\n        bottom: '0',\n        left: 0,\n        width: '100%',\n        padding: '26px 0px 27px 0px',\n        background: 'white',\n        boxSizing: 'border-box',\n        borderTopLeftRadius: '16px',\n        borderTopRightRadius: '16px',\n        zIndex: 2000,\n        boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n        '& .MuiDivider-root': {\n            display: 'block',\n            marginTop: '0px !important',\n            marginBottom: '0px !important',\n        },\n        '& div:first-of-type': {\n            '& > li': {\n                borderTopLeftRadius: '16px',\n                borderTopRightRadius: '16px',\n            },\n        },\n        '& > div > li': {\n            fontSize: '16px',\n            fontWeight: '400',\n            color: theme.palette.onSurface.os900,\n            paddingTop: '11px',\n            paddingBottom: '11px',\n        },\n    };\n});\n/**\n * @description Tabs styling definition based on props\n */\nconst AppBarStyled = styled(MuiAppBar)(() => {\n    return {\n        maxHeigth: '56px',\n        padding: '0px',\n        top: 'auto',\n        bottom: 0,\n        boxShadow: 'none',\n        borderTop: `1px solid ${flowColors.transparent.secondary}`,\n        backgroundColor: flowColors.background.primary,\n        '& > div.MuiToolbar-root': {\n            maxHeight: '56px',\n            padding: '0px',\n            '& > div': {\n                width: '100%',\n                justifyContent: 'space-evenly',\n                '& > div': {\n                    '&> a': {\n                        padding: 0,\n                        textDecoration: 'none',\n                    },\n                },\n            },\n        },\n    };\n});\n//# sourceMappingURL=secondaryNavigationTabs.js.map"],"names":["BackdropStyled","styled","Backdrop","zIndex","PopperStyled","Popper","transform","position","MenuStyled","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","display","marginTop","marginBottom","fontSize","fontWeight","color","palette","onSurface","os900","paddingTop","paddingBottom","AppBarStyled","MuiAppBar","default","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration","currentActiveTab","setCurrentActiveTab","children","childrenArr","setChildrenArr","useState","anchorEl","setAnchorEl","open","setOpen","selectedMenuLabel","setSelectedMenuLabel","handleActiveTab","useCallback","_props","value","onClick","handleMenuTabClick","e","currentTarget","handleRenderTabType","href","_jsxs","target","_jsx","Icon","name","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","jsx","Toolbar","Box","sx","jsxs","SecondaryTabStyled","Object","assign","isActive","length","moreTab","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","id"],"mappings":"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"}

package/cjs/components/tab/tab.d.ts

@@ -45,5 +45,6 @@ export interface TabProps {
  * @description SkodaFlow Tab component.
  * @param props TabProps
  * @returns React Functional Component
+ * @deprecated use Tab component from @mui/material instead
  */
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>;

package/cjs/components/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/components/tab/tab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport useTabs from './hook/useTabs';\nimport { TabsContext } from './tabs';\nimport TabStyled from './tabStyled';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n */\nexport const Tab = forwardRef(({ label, value, onClick, analyticsCallback, href, target, ariaLabel }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((e) => {\n        updateActiveTab(value, false);\n        analyticsCallback && analyticsCallback(e);\n        onClick && onClick(e);\n    }, [value, onClick, updateActiveTab, analyticsCallback]);\n    //IF href prop is present: render the Link Tab\n    //Otherwise render the default tab\n    const handleTabType = useCallback(() => {\n        if (href) {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, smallSize: smallSize, isActive: isActive, \"aria-label\": ariaLabel, value: value, label: label, tabIndex: isActive ? 0 : -1 }, a11yProps(value), { component: 'a', href: href, target: target, onClick: (e) => handleOnClick(e) })));\n        }\n        else {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, \"aria-label\": ariaLabel, tabIndex: isActive ? 0 : -1, smallSize: smallSize, isActive: isActive, onClick: (e) => handleOnClick(e), value: value, label: label }, a11yProps(value))));\n        }\n    }, [href, smallSize, isActive, target, value, label, a11yProps, ariaLabel, handleOnClick, ref]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, value]);\n    return _jsx(_Fragment, { children: handleTabType() });\n});\n//# sourceMappingURL=tab.js.map"],"names":["Tab","forwardRef","label","value","onClick","analyticsCallback","href","target","ariaLabel","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","a11yProps","useTabs","handleOnClick","useCallback","e","handleTabType","_jsx","jsx","TabStyled","default","Object","assign","wrapped","tabIndex","component","useEffect","_Fragment","children"],"mappings":"qJAUY,MAACA,EAAMC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,UAASC,oBAAmBC,OAAMC,SAAQC,aAAaC,KAClG,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IACnCC,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,IAC/BX,EAAgBR,GAAO,GACvBE,GAAqBA,EAAkBiB,GACvClB,GAAWA,EAAQkB,EAAE,GACtB,CAACnB,EAAOC,EAASO,EAAiBN,IAG/BkB,EAAgBF,EAAAA,aAAY,IAC1Bf,EACQkB,EAAIC,IAACC,EAASC,QAAEC,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAKG,UAAWA,EAAWG,SAAUA,EAAU,aAAcP,EAAWL,MAAOA,EAAOD,MAAOA,EAAO6B,SAAUhB,EAAW,GAAK,GAAKG,EAAUf,GAAQ,CAAE6B,UAAW,IAAK1B,KAAMA,EAAMC,OAAQA,EAAQH,QAAUkB,GAAMF,EAAcE,MAGrRE,EAAAA,IAAKE,EAAAA,QAAWE,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAK,aAAcD,EAAWuB,SAAUhB,EAAW,GAAK,EAAGH,UAAWA,EAAWG,SAAUA,EAAUX,QAAUkB,GAAMF,EAAcE,GAAInB,MAAOA,EAAOD,MAAOA,GAASgB,EAAUf,MAEhP,CAACG,EAAMM,EAAWG,EAAUR,EAAQJ,EAAOD,EAAOgB,EAAWV,EAAWY,EAAeX,IAU1F,OARAwB,EAAAA,WAAU,KAEFjB,EADAN,IAAcP,EAKjB,GACF,CAACO,EAAWP,IACRqB,EAAAA,IAAKU,EAAAA,SAAW,CAAEC,SAAUZ,KAAkB"}
+{"version":3,"file":"tab.js","sources":["../../../../src/components/tab/tab.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useState, useContext, useEffect, useCallback, forwardRef } from 'react';\nimport useTabs from './hook/useTabs';\nimport { TabsContext } from './tabs';\nimport TabStyled from './tabStyled';\n/**\n * @description SkodaFlow Tab component.\n * @param props TabProps\n * @returns React Functional Component\n * @deprecated use Tab component from @mui/material instead\n */\nexport const Tab = forwardRef(({ label, value, onClick, analyticsCallback, href, target, ariaLabel }, ref) => {\n    const { activeTab, updateActiveTab, smallSize } = useContext(TabsContext);\n    const [isActive, setIsActive] = useState(false);\n    const { a11yProps } = useTabs();\n    //On tab clicked: set the new activeTab selected\n    //if is a menu tab: set the anchor element for the menu and set the width of the menu equal to the tab component\n    //then call the onClick from outside\n    const handleOnClick = useCallback((e) => {\n        updateActiveTab(value, false);\n        analyticsCallback && analyticsCallback(e);\n        onClick && onClick(e);\n    }, [value, onClick, updateActiveTab, analyticsCallback]);\n    //IF href prop is present: render the Link Tab\n    //Otherwise render the default tab\n    const handleTabType = useCallback(() => {\n        if (href) {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, smallSize: smallSize, isActive: isActive, \"aria-label\": ariaLabel, value: value, label: label, tabIndex: isActive ? 0 : -1 }, a11yProps(value), { component: 'a', href: href, target: target, onClick: (e) => handleOnClick(e) })));\n        }\n        else {\n            return (_jsx(TabStyled, Object.assign({ wrapped: true, ref: ref, \"aria-label\": ariaLabel, tabIndex: isActive ? 0 : -1, smallSize: smallSize, isActive: isActive, onClick: (e) => handleOnClick(e), value: value, label: label }, a11yProps(value))));\n        }\n    }, [href, smallSize, isActive, target, value, label, a11yProps, ariaLabel, handleOnClick, ref]);\n    //If the activeTab is equal to the current tab, set active\n    useEffect(() => {\n        if (activeTab === value) {\n            setIsActive(true);\n        }\n        else {\n            setIsActive(false);\n        }\n    }, [activeTab, value]);\n    return _jsx(_Fragment, { children: handleTabType() });\n});\n//# sourceMappingURL=tab.js.map"],"names":["Tab","forwardRef","label","value","onClick","analyticsCallback","href","target","ariaLabel","ref","activeTab","updateActiveTab","smallSize","useContext","TabsContext","isActive","setIsActive","useState","a11yProps","useTabs","handleOnClick","useCallback","e","handleTabType","_jsx","jsx","TabStyled","default","Object","assign","wrapped","tabIndex","component","useEffect","_Fragment","children"],"mappings":"qJAWY,MAACA,EAAMC,EAAUA,YAAC,EAAGC,QAAOC,QAAOC,UAASC,oBAAmBC,OAAMC,SAAQC,aAAaC,KAClG,MAAMC,UAAEA,EAASC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,WAAWC,EAAAA,cACtDC,EAAUC,GAAeC,EAAQA,UAAC,IACnCC,UAAEA,GAAcC,EAAAA,UAIhBC,EAAgBC,eAAaC,IAC/BX,EAAgBR,GAAO,GACvBE,GAAqBA,EAAkBiB,GACvClB,GAAWA,EAAQkB,EAAE,GACtB,CAACnB,EAAOC,EAASO,EAAiBN,IAG/BkB,EAAgBF,EAAAA,aAAY,IAC1Bf,EACQkB,EAAIC,IAACC,EAASC,QAAEC,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAKG,UAAWA,EAAWG,SAAUA,EAAU,aAAcP,EAAWL,MAAOA,EAAOD,MAAOA,EAAO6B,SAAUhB,EAAW,GAAK,GAAKG,EAAUf,GAAQ,CAAE6B,UAAW,IAAK1B,KAAMA,EAAMC,OAAQA,EAAQH,QAAUkB,GAAMF,EAAcE,MAGrRE,EAAAA,IAAKE,EAAAA,QAAWE,OAAOC,OAAO,CAAEC,SAAS,EAAMrB,IAAKA,EAAK,aAAcD,EAAWuB,SAAUhB,EAAW,GAAK,EAAGH,UAAWA,EAAWG,SAAUA,EAAUX,QAAUkB,GAAMF,EAAcE,GAAInB,MAAOA,EAAOD,MAAOA,GAASgB,EAAUf,MAEhP,CAACG,EAAMM,EAAWG,EAAUR,EAAQJ,EAAOD,EAAOgB,EAAWV,EAAWY,EAAeX,IAU1F,OARAwB,EAAAA,WAAU,KAEFjB,EADAN,IAAcP,EAKjB,GACF,CAACO,EAAWP,IACRqB,EAAAA,IAAKU,EAAAA,SAAW,CAAEC,SAAUZ,KAAkB"}

package/cjs/components/tab/tabPanel.d.ts

@@ -17,4 +17,5 @@ export interface TabPanelProps {
      */
     index?: number | string;
 }
+/** @deprecated use Tab component from @mui/material instead */
 export declare const TabPanel: React.FC<TabPanelProps>;