@skodaflow/web-library 7.0.3 → 7.1.1

package/cjs/organisms/notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../../src/organisms/notification/Notification.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Indicator } from '@/src/components';\nimport { Box, Icon, IconButton, Stack, Typography, styled, useTheme } from '@mui/material';\nexport const Notification = (props) => {\n    const theme = useTheme();\n    return (_jsxs(Box, { sx: {\n            background: props.color === 'grey' ? theme.palette.surface.primary : theme.palette.onSurface.os0,\n            padding: '24px 32px',\n            display: 'flex',\n            flexDirection: 'row',\n            gap: '24px',\n            alignItems: 'center',\n            position: 'relative',\n        }, \"data-testid\": \"Notification\", children: [props.icon && (_jsx(IconBox, { sx: {\n                    display: { sm: 'flex', xs: 'none' },\n                    overflow: 'hidden',\n                    img: { width: '100%', height: '100%', objectFit: 'cover' },\n                }, \"data-testid\": \"Notification.icon\", children: props.icon })), _jsxs(Box, { sx: {\n                    width: '100%',\n                    maxWidth: '100%',\n                    overflow: 'hidden',\n                    display: 'flex',\n                    gap: '8px',\n                    flexDirection: 'column',\n                }, children: [_jsxs(Box, { display: \"flex\", alignItems: \"center\", children: [props.isNew && _jsx(Indicator, { color: \"neutral\" }), _jsx(Box, { sx: {\n                                    whiteSpace: 'nowrap',\n                                    overflow: 'hidden',\n                                    textOverflow: 'ellipsis',\n                                }, children: _jsx(Typography, { variant: \"subheadline\", \"data-testid\": \"Notification.headline\", children: props.headline }) })] }), _jsx(Box, { \"data-testid\": \"Notification.description\", children: typeof props.description === 'string' ? (_jsx(Typography, { sx: {\n                                lineHeight: '16px',\n                                maxHeight: '32px',\n                                overflow: 'hidden',\n                                textOverflow: 'ellipsis',\n                                display: '-webkit-box',\n                                WebkitLineClamp: '2',\n                                WebkitBoxOrient: 'vertical',\n                            }, variant: \"disclaimer\", children: props.description })) : (props.description) }), props.footer && (_jsx(Typography, { variant: \"disclaimer\", color: theme.palette.onSurface.os500, \"data-testid\": \"Notification.footer\", children: props.footer })), props.buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, \"data-testid\": \"Notification.buttons\", children: props.buttons }))] }), props.onDismiss && (_jsx(IconButton, { onClick: props.onDismiss, size: \"small\", sx: {\n                    position: 'absolute',\n                    right: '8px',\n                    top: '8px',\n                    '.sa-i': {\n                        height: '28px',\n                    },\n                }, \"data-testid\": \"Notification.dismiss\", children: _jsx(Icon, { fontSize: \"small\", className: \"ballotx close\" }) }))] }));\n};\nconst IconBox = styled(Box)(({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: '50%',\n    width: '56px',\n    height: '56px',\n    background: theme.palette.onSurface.os200,\n    flexShrink: 0,\n}));\n//# sourceMappingURL=Notification.js.map"],"names":["IconBox","styled","Box","theme","display","justifyContent","alignItems","borderRadius","width","height","background","palette","onSurface","os200","flexShrink","props","useTheme","_jsxs","jsxs","sx","color","surface","primary","os0","padding","flexDirection","gap","position","children","icon","_jsx","jsx","sm","xs","overflow","img","objectFit","maxWidth","isNew","Indicator","whiteSpace","textOverflow","Typography","variant","headline","description","lineHeight","maxHeight","WebkitLineClamp","WebkitBoxOrient","footer","os500","buttons","Stack","direction","spacing","onDismiss","IconButton","onClick","size","right","top","Icon","fontSize","className"],"mappings":"krIAGY,MA0CNA,EAAUC,EAAAA,OAAOC,EAAAA,IAAPD,EAAY,EAAGE,YAAa,CACxCC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,aAAc,MACdC,MAAO,OACPC,OAAQ,OACRC,WAAYP,EAAMQ,QAAQC,UAAUC,MACpCC,WAAY,2BAlDaC,IACzB,MAAMZ,EAAQa,EAAAA,WACd,OAAQC,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CACjBT,WAA4B,SAAhBK,EAAMK,MAAmBjB,EAAMQ,QAAQU,QAAQC,QAAUnB,EAAMQ,QAAQC,UAAUW,IAC7FC,QAAS,YACTpB,QAAS,OACTqB,cAAe,MACfC,IAAK,OACLpB,WAAY,SACZqB,SAAU,YACX,cAAe,eAAgBC,SAAU,CAACb,EAAMc,MAASC,EAAIC,IAAC/B,EAAS,CAAEmB,GAAI,CACpEf,QAAS,CAAE4B,GAAI,OAAQC,GAAI,QAC3BC,SAAU,SACVC,IAAK,CAAE3B,MAAO,OAAQC,OAAQ,OAAQ2B,UAAW,UAClD,cAAe,oBAAqBR,SAAUb,EAAMc,OAAUZ,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CAC9EX,MAAO,OACP6B,SAAU,OACVH,SAAU,SACV9B,QAAS,OACTsB,IAAK,MACLD,cAAe,UAChBG,SAAU,CAACX,EAAKC,KAAChB,MAAK,CAAEE,QAAS,OAAQE,WAAY,SAAUsB,SAAU,CAACb,EAAMuB,OAASR,EAAAA,IAAKS,EAASA,UAAE,CAAEnB,MAAO,YAAcU,EAAIC,IAAC7B,MAAK,CAAEiB,GAAI,CAC/HqB,WAAY,SACZN,SAAU,SACVO,aAAc,YACfb,SAAUE,EAAIC,IAACW,aAAY,CAAEC,QAAS,cAAe,cAAe,wBAAyBf,SAAUb,EAAM6B,gBAAoBd,EAAIC,IAAC7B,EAAGA,IAAE,CAAE,cAAe,2BAA4B0B,SAAuC,iBAAtBb,EAAM8B,YAA4Bf,EAAIC,IAACW,EAAUA,WAAE,CAAEvB,GAAI,CACrQ2B,WAAY,OACZC,UAAW,OACXb,SAAU,SACVO,aAAc,WACdrC,QAAS,cACT4C,gBAAiB,IACjBC,gBAAiB,YAClBN,QAAS,aAAcf,SAAUb,EAAM8B,cAAmB9B,EAAiB,cAAMA,EAAMmC,QAAWpB,EAAIC,IAACW,aAAY,CAAEC,QAAS,aAAcvB,MAAOjB,EAAMQ,QAAQC,UAAUuC,MAAO,cAAe,sBAAuBvB,SAAUb,EAAMmC,SAAYnC,EAAMqC,SAAYtB,EAAAA,IAAKuB,EAAKA,MAAE,CAAEC,UAAW,MAAOC,QAAS,EAAG,cAAe,uBAAwB3B,SAAUb,EAAMqC,aAAiBrC,EAAMyC,WAAc1B,EAAAA,IAAK2B,EAAAA,WAAY,CAAEC,QAAS3C,EAAMyC,UAAWG,KAAM,QAASxC,GAAI,CACzdQ,SAAU,WACViC,MAAO,MACPC,IAAK,MACL,QAAS,CACLpD,OAAQ,SAEb,cAAe,uBAAwBmB,SAAUE,EAAIC,IAAC+B,EAAIA,KAAE,CAAEC,SAAU,QAASC,UAAW,sBAA4B"}
+{"version":3,"file":"Notification.js","sources":["../../../../src/organisms/notification/Notification.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Indicator } from '@/src/components';\nimport { Box, Icon, IconButton, Stack, Typography, styled, useTheme } from '@mui/material';\nexport const Notification = (props) => {\n    const theme = useTheme();\n    return (_jsxs(Box, { sx: {\n            background: props.color === 'grey' ? theme.palette.surface.primary : theme.palette.onSurface.os0,\n            padding: '24px 32px',\n            display: 'flex',\n            flexDirection: 'row',\n            gap: '24px',\n            alignItems: 'center',\n            position: 'relative',\n        }, \"data-testid\": \"Notification\", children: [props.icon && (_jsx(IconBox, { sx: {\n                    display: { sm: 'flex', xs: 'none' },\n                    overflow: 'hidden',\n                    img: { width: '100%', height: '100%', objectFit: 'cover' },\n                }, \"data-testid\": \"Notification.icon\", children: props.icon })), _jsxs(Box, { sx: {\n                    width: '100%',\n                    maxWidth: '100%',\n                    overflow: 'hidden',\n                    display: 'flex',\n                    gap: '8px',\n                    flexDirection: 'column',\n                }, children: [_jsxs(Box, { display: \"flex\", alignItems: \"center\", children: [props.isNew && _jsx(Indicator, { color: \"neutral\" }), _jsx(Box, { sx: {\n                                    whiteSpace: 'nowrap',\n                                    overflow: 'hidden',\n                                    textOverflow: 'ellipsis',\n                                }, children: _jsx(Typography, { variant: \"subheadline\", \"data-testid\": \"Notification.headline\", children: props.headline }) })] }), _jsx(Box, { \"data-testid\": \"Notification.description\", children: typeof props.description === 'string' ? (_jsx(Typography, { sx: {\n                                lineHeight: '16px',\n                                maxHeight: '32px',\n                                overflow: 'hidden',\n                                textOverflow: 'ellipsis',\n                                display: '-webkit-box',\n                                WebkitLineClamp: '2',\n                                WebkitBoxOrient: 'vertical',\n                            }, variant: \"disclaimer\", children: props.description })) : (props.description) }), props.footer && (_jsx(Typography, { variant: \"disclaimer\", color: theme.palette.onSurface.os500, \"data-testid\": \"Notification.footer\", children: props.footer })), props.buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, \"data-testid\": \"Notification.buttons\", children: props.buttons }))] }), props.onDismiss && (_jsx(IconButton, { onClick: props.onDismiss, size: \"small\", sx: {\n                    position: 'absolute',\n                    right: '8px',\n                    top: '8px',\n                    '.sa-i': {\n                        height: '28px',\n                    },\n                }, \"data-testid\": \"Notification.dismiss\", children: _jsx(Icon, { fontSize: \"small\", className: \"ballotx close\" }) }))] }));\n};\nconst IconBox = styled(Box)(({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: '50%',\n    width: '56px',\n    height: '56px',\n    background: theme.palette.onSurface.os200,\n    flexShrink: 0,\n}));\n//# sourceMappingURL=Notification.js.map"],"names":["IconBox","styled","Box","theme","display","justifyContent","alignItems","borderRadius","width","height","background","palette","onSurface","os200","flexShrink","props","useTheme","_jsxs","jsxs","sx","color","surface","primary","os0","padding","flexDirection","gap","position","children","icon","_jsx","jsx","sm","xs","overflow","img","objectFit","maxWidth","isNew","Indicator","whiteSpace","textOverflow","Typography","variant","headline","description","lineHeight","maxHeight","WebkitLineClamp","WebkitBoxOrient","footer","os500","buttons","Stack","direction","spacing","onDismiss","IconButton","onClick","size","right","top","Icon","fontSize","className"],"mappings":"81IAGY,MA0CNA,EAAUC,EAAAA,OAAOC,EAAAA,IAAPD,EAAY,EAAGE,YAAa,CACxCC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,aAAc,MACdC,MAAO,OACPC,OAAQ,OACRC,WAAYP,EAAMQ,QAAQC,UAAUC,MACpCC,WAAY,2BAlDaC,IACzB,MAAMZ,EAAQa,EAAAA,WACd,OAAQC,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CACjBT,WAA4B,SAAhBK,EAAMK,MAAmBjB,EAAMQ,QAAQU,QAAQC,QAAUnB,EAAMQ,QAAQC,UAAUW,IAC7FC,QAAS,YACTpB,QAAS,OACTqB,cAAe,MACfC,IAAK,OACLpB,WAAY,SACZqB,SAAU,YACX,cAAe,eAAgBC,SAAU,CAACb,EAAMc,MAASC,EAAIC,IAAC/B,EAAS,CAAEmB,GAAI,CACpEf,QAAS,CAAE4B,GAAI,OAAQC,GAAI,QAC3BC,SAAU,SACVC,IAAK,CAAE3B,MAAO,OAAQC,OAAQ,OAAQ2B,UAAW,UAClD,cAAe,oBAAqBR,SAAUb,EAAMc,OAAUZ,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CAC9EX,MAAO,OACP6B,SAAU,OACVH,SAAU,SACV9B,QAAS,OACTsB,IAAK,MACLD,cAAe,UAChBG,SAAU,CAACX,EAAKC,KAAChB,MAAK,CAAEE,QAAS,OAAQE,WAAY,SAAUsB,SAAU,CAACb,EAAMuB,OAASR,EAAAA,IAAKS,EAASA,UAAE,CAAEnB,MAAO,YAAcU,EAAIC,IAAC7B,MAAK,CAAEiB,GAAI,CAC/HqB,WAAY,SACZN,SAAU,SACVO,aAAc,YACfb,SAAUE,EAAIC,IAACW,aAAY,CAAEC,QAAS,cAAe,cAAe,wBAAyBf,SAAUb,EAAM6B,gBAAoBd,EAAIC,IAAC7B,EAAGA,IAAE,CAAE,cAAe,2BAA4B0B,SAAuC,iBAAtBb,EAAM8B,YAA4Bf,EAAIC,IAACW,EAAUA,WAAE,CAAEvB,GAAI,CACrQ2B,WAAY,OACZC,UAAW,OACXb,SAAU,SACVO,aAAc,WACdrC,QAAS,cACT4C,gBAAiB,IACjBC,gBAAiB,YAClBN,QAAS,aAAcf,SAAUb,EAAM8B,cAAmB9B,EAAiB,cAAMA,EAAMmC,QAAWpB,EAAIC,IAACW,aAAY,CAAEC,QAAS,aAAcvB,MAAOjB,EAAMQ,QAAQC,UAAUuC,MAAO,cAAe,sBAAuBvB,SAAUb,EAAMmC,SAAYnC,EAAMqC,SAAYtB,EAAAA,IAAKuB,EAAKA,MAAE,CAAEC,UAAW,MAAOC,QAAS,EAAG,cAAe,uBAAwB3B,SAAUb,EAAMqC,aAAiBrC,EAAMyC,WAAc1B,EAAAA,IAAK2B,EAAAA,WAAY,CAAEC,QAAS3C,EAAMyC,UAAWG,KAAM,QAASxC,GAAI,CACzdQ,SAAU,WACViC,MAAO,MACPC,IAAK,MACL,QAAS,CACLpD,OAAQ,SAEb,cAAe,uBAAwBmB,SAAUE,EAAIC,IAAC+B,EAAIA,KAAE,CAAEC,SAAU,QAASC,UAAW,sBAA4B"}

package/cjs/utils/useFeatureFlag/useFeatureFlag.js

@@ -1,2 +1,2 @@
-"use strict";require("react"),exports.evaluateFeatureFlag=function(e){try{return"true"==`${process.env[`VITE_FEATURE_FLAG_${e}`]}`}catch(e){return!1}};
+"use strict";require("react"),exports.evaluateFeatureFlag=function(e){try{return"true"==`${process.env[`SKODAFLOW_FEATURE_FLAG_${e}`]}`}catch(e){return!1}};
 //# sourceMappingURL=useFeatureFlag.js.map

package/cjs/utils/useFeatureFlag/useFeatureFlag.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFeatureFlag.js","sources":["../../../../src/utils/useFeatureFlag/useFeatureFlag.tsx"],"sourcesContent":["import { useMemo } from 'react';\n/**\n * Returns allowed or disabled state of the feature based on the feature flag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n *  e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @returns {boolean} allowed state of the feature\n */\nexport function evaluateFeatureFlag(featureFlag) {\n    try {\n        // check if feature is active or not\n        const featureFlagValue = process.env[`VITE_FEATURE_FLAG_${featureFlag}`];\n        return `${featureFlagValue}` === 'true';\n    }\n    catch (_a) {\n        return false;\n    }\n}\n/**\n * Component that renders or not renders content based on the featureFlag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n *  e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @param children - content\n */\nexport function FeatureFlagBlock({ children, featureFlag }) {\n    const featureFlagEnabled = useFeatureFlag(featureFlag);\n    return featureFlagEnabled ? children : null;\n}\n/**\n * Returns cached allowed or disabled state of the feature based on the feature flag\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n *  e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n */\nexport default function useFeatureFlag(featureFlag) {\n    return useMemo(() => evaluateFeatureFlag(featureFlag), [featureFlag]);\n}\n//# sourceMappingURL=useFeatureFlag.js.map"],"names":["featureFlag","process","env","_a"],"mappings":"0DAQO,SAA6BA,GAChC,IAGI,MAAiC,QAA1B,GADkBC,QAAQC,IAAI,qBAAqBF,MAE7D,CACD,MAAOG,GACH,OAAO,CACV,CACL"}
+{"version":3,"file":"useFeatureFlag.js","sources":["../../../../src/utils/useFeatureFlag/useFeatureFlag.tsx"],"sourcesContent":["import { useMemo } from 'react';\n/**\n * Returns allowed or disabled state of the feature based on the feature flag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n *  e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @returns {boolean} allowed state of the feature\n */\nexport function evaluateFeatureFlag(featureFlag) {\n    try {\n        // check if feature is active or not\n        const featureFlagValue = process.env[`SKODAFLOW_FEATURE_FLAG_${featureFlag}`];\n        return `${featureFlagValue}` === 'true';\n    }\n    catch (_a) {\n        return false;\n    }\n}\n/**\n * Component that renders or not renders content based on the featureFlag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n *  e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @param children - content\n */\nexport function FeatureFlagBlock({ children, featureFlag }) {\n    const featureFlagEnabled = useFeatureFlag(featureFlag);\n    return featureFlagEnabled ? children : null;\n}\n/**\n * Returns cached allowed or disabled state of the feature based on the feature flag\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n *  e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n */\nexport default function useFeatureFlag(featureFlag) {\n    return useMemo(() => evaluateFeatureFlag(featureFlag), [featureFlag]);\n}\n//# sourceMappingURL=useFeatureFlag.js.map"],"names":["featureFlag","process","env","_a"],"mappings":"0DAQO,SAA6BA,GAChC,IAGI,MAAiC,QAA1B,GADkBC,QAAQC,IAAI,0BAA0BF,MAElE,CACD,MAAOG,GACH,OAAO,CACV,CACL"}

package/components/alert/Alert.d.ts

@@ -3,6 +3,9 @@ export type AlertProps = PropsWithChildren<{
     type?: 'success' | 'warning' | 'error';
     actions?: React.ReactNode;
     width?: string | number;
+    /**
+     * @deprecated direction is taken from the theme
+     */
     direction?: 'rtl' | 'ltr';
 }>;
 export declare const Alert: React.FC<AlertProps>;

package/components/alert/Alert.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as r}from"react/jsx-runtime";import{Box as e}from"@mui/material";import i from"./assets/successIcon.svg.js";import s from"./assets/warningIcon.svg.js";import l from"./assets/errorIcon.svg.js";const n=({type:n,children:o,actions:a,width:d,direction:c="ltr"})=>t(e,{dir:null!=c?c:"ltr",sx:{padding:1,paddingLeft:"ltr"===c?2:1,paddingRight:"rtl"===c?2:1,background:t=>t.palette.brand.tertiary,borderRadius:1,color:t=>t.palette.onSurface.os0,display:"flex",alignItems:"center",gap:"11px",minWidth:"300px",maxWidth:null!=d?d:"624px",width:null!=d?d:"auto"},"data-testid":"Alert",children:[n&&t(e,{sx:{height:"40px",display:"flex",flexDirection:"column",justifyContent:"center"},"data-testid":"Alert.icon",children:["success"===n&&r("img",{src:i}),"error"===n&&r("img",{src:l}),"warning"===n&&r("img",{src:s})]}),r(e,{sx:{flexGrow:1},"data-testid":"Alert.content",children:o}),a&&r(e,{sx:{paddingLeft:"ltr"===c?"11px":void 0,paddingRight:"rtl"===c?"11px":void 0,borderLeft:t=>`${"ltr"===c?"1px":"0px"} solid ${t.palette.onSurface.os600}`,borderRight:t=>`${"rtl"===c?"1px":"0px"} solid ${t.palette.onSurface.os600}`,alignSelf:"stretch",display:"flex",flexDirection:"row",alignItems:"center"},"data-testid":"Alert.actions",children:a})]});export{n as Alert};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Box as r}from"@mui/material";import i from"./assets/successIcon.svg.js";import s from"./assets/warningIcon.svg.js";import n from"./assets/errorIcon.svg.js";const a=({type:a,children:o,actions:d,width:l})=>t(r,{sx:{padding:1,paddingLeft:2,paddingRight:1,background:t=>t.palette.brand.tertiary,borderRadius:1,color:t=>t.palette.onSurface.os0,display:"flex",alignItems:"center",gap:"11px",minWidth:"300px",maxWidth:null!=l?l:"624px",width:null!=l?l:"auto"},"data-testid":"Alert",children:[a&&t(r,{sx:{height:"40px",display:"flex",flexDirection:"column",justifyContent:"center"},"data-testid":"Alert.icon",children:["success"===a&&e("img",{src:i}),"error"===a&&e("img",{src:n}),"warning"===a&&e("img",{src:s})]}),e(r,{sx:{flexGrow:1},"data-testid":"Alert.content",children:o}),d&&e(r,{sx:{paddingLeft:"11px",borderLeft:t=>`1px solid ${t.palette.onSurface.os600}`,alignSelf:"stretch",display:"flex",flexDirection:"row",alignItems:"center"},"data-testid":"Alert.actions",children:d})]});export{a as Alert};
 //# sourceMappingURL=Alert.js.map

package/components/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Box } from '@mui/material';\nimport successIcon from './assets/successIcon.svg';\nimport warningIcon from './assets/warningIcon.svg';\nimport errorIcon from './assets/errorIcon.svg';\nexport const Alert = ({ type, children, actions, width, direction = 'ltr' }) => {\n    return (_jsxs(Box, { dir: direction !== null && direction !== void 0 ? direction : 'ltr', sx: {\n            padding: 1,\n            paddingLeft: direction === 'ltr' ? 2 : 1,\n            paddingRight: direction === 'rtl' ? 2 : 1,\n            background: (theme) => theme.palette.brand.tertiary,\n            borderRadius: 1,\n            color: (theme) => theme.palette.onSurface.os0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: '11px',\n            minWidth: '300px',\n            maxWidth: width !== null && width !== void 0 ? width : '624px',\n            width: width !== null && width !== void 0 ? width : 'auto',\n        }, \"data-testid\": \"Alert\", children: [type && (_jsxs(Box, { sx: {\n                    height: '40px',\n                    display: 'flex',\n                    flexDirection: 'column',\n                    justifyContent: 'center',\n                }, \"data-testid\": \"Alert.icon\", children: [type === 'success' && _jsx(\"img\", { src: successIcon }), type === 'error' && _jsx(\"img\", { src: errorIcon }), type === 'warning' && _jsx(\"img\", { src: warningIcon })] })), _jsx(Box, { sx: {\n                    flexGrow: 1,\n                }, \"data-testid\": \"Alert.content\", children: children }), actions && (_jsx(Box, { sx: {\n                    paddingLeft: direction === 'ltr' ? '11px' : undefined,\n                    paddingRight: direction === 'rtl' ? '11px' : undefined,\n                    borderLeft: (theme) => `${direction === 'ltr' ? '1px' : '0px'} solid ${theme.palette.onSurface.os600}`,\n                    borderRight: (theme) => `${direction === 'rtl' ? '1px' : '0px'} solid ${theme.palette.onSurface.os600}`,\n                    alignSelf: 'stretch',\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                }, \"data-testid\": \"Alert.actions\", children: actions }))] }));\n};\n//# sourceMappingURL=Alert.js.map"],"names":["Alert","type","children","actions","width","direction","_jsxs","Box","dir","sx","padding","paddingLeft","paddingRight","background","theme","palette","brand","tertiary","borderRadius","color","onSurface","os0","display","alignItems","gap","minWidth","maxWidth","height","flexDirection","justifyContent","_jsx","src","successIcon","errorIcon","warningIcon","flexGrow","undefined","borderLeft","os600","borderRight","alignSelf"],"mappings":"qNAKY,MAACA,EAAQ,EAAGC,OAAMC,WAAUC,UAASC,QAAOC,YAAY,SACxDC,EAAMC,EAAK,CAAEC,IAAKH,QAA6CA,EAAY,MAAOI,GAAI,CACtFC,QAAS,EACTC,YAA2B,QAAdN,EAAsB,EAAI,EACvCO,aAA4B,QAAdP,EAAsB,EAAI,EACxCQ,WAAaC,GAAUA,EAAMC,QAAQC,MAAMC,SAC3CC,aAAc,EACdC,MAAQL,GAAUA,EAAMC,QAAQK,UAAUC,IAC1CC,QAAS,OACTC,WAAY,SACZC,IAAK,OACLC,SAAU,QACVC,SAAUtB,QAAqCA,EAAQ,QACvDA,MAAOA,QAAqCA,EAAQ,QACrD,cAAe,QAASF,SAAU,CAACD,GAASK,EAAMC,EAAK,CAAEE,GAAI,CACpDkB,OAAQ,OACRL,QAAS,OACTM,cAAe,SACfC,eAAgB,UACjB,cAAe,aAAc3B,SAAU,CAAU,YAATD,GAAsB6B,EAAK,MAAO,CAAEC,IAAKC,IAAyB,UAAT/B,GAAoB6B,EAAK,MAAO,CAAEC,IAAKE,IAAuB,YAAThC,GAAsB6B,EAAK,MAAO,CAAEC,IAAKG,OAAqBJ,EAAKvB,EAAK,CAAEE,GAAI,CACnO0B,SAAU,GACX,cAAe,gBAAiBjC,SAAUA,IAAaC,GAAY2B,EAAKvB,EAAK,CAAEE,GAAI,CAClFE,YAA2B,QAAdN,EAAsB,YAAS+B,EAC5CxB,aAA4B,QAAdP,EAAsB,YAAS+B,EAC7CC,WAAavB,GAAU,GAAiB,QAAdT,EAAsB,MAAQ,eAAeS,EAAMC,QAAQK,UAAUkB,QAC/FC,YAAczB,GAAU,GAAiB,QAAdT,EAAsB,MAAQ,eAAeS,EAAMC,QAAQK,UAAUkB,QAChGE,UAAW,UACXlB,QAAS,OACTM,cAAe,MACfL,WAAY,UACb,cAAe,gBAAiBrB,SAAUC"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Box } from '@mui/material';\nimport successIcon from './assets/successIcon.svg';\nimport warningIcon from './assets/warningIcon.svg';\nimport errorIcon from './assets/errorIcon.svg';\nexport const Alert = ({ type, children, actions, width }) => {\n    return (_jsxs(Box, { sx: {\n            padding: 1,\n            paddingLeft: 2,\n            paddingRight: 1,\n            background: (theme) => theme.palette.brand.tertiary,\n            borderRadius: 1,\n            color: (theme) => theme.palette.onSurface.os0,\n            display: 'flex',\n            alignItems: 'center',\n            gap: '11px',\n            minWidth: '300px',\n            maxWidth: width !== null && width !== void 0 ? width : '624px',\n            width: width !== null && width !== void 0 ? width : 'auto',\n        }, \"data-testid\": \"Alert\", children: [type && (_jsxs(Box, { sx: {\n                    height: '40px',\n                    display: 'flex',\n                    flexDirection: 'column',\n                    justifyContent: 'center',\n                }, \"data-testid\": \"Alert.icon\", children: [type === 'success' && _jsx(\"img\", { src: successIcon }), type === 'error' && _jsx(\"img\", { src: errorIcon }), type === 'warning' && _jsx(\"img\", { src: warningIcon })] })), _jsx(Box, { sx: {\n                    flexGrow: 1,\n                }, \"data-testid\": \"Alert.content\", children: children }), actions && (_jsx(Box, { sx: {\n                    paddingLeft: '11px',\n                    borderLeft: (theme) => `1px solid ${theme.palette.onSurface.os600}`,\n                    alignSelf: 'stretch',\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                }, \"data-testid\": \"Alert.actions\", children: actions }))] }));\n};\n//# sourceMappingURL=Alert.js.map"],"names":["Alert","type","children","actions","width","_jsxs","Box","sx","padding","paddingLeft","paddingRight","background","theme","palette","brand","tertiary","borderRadius","color","onSurface","os0","display","alignItems","gap","minWidth","maxWidth","height","flexDirection","justifyContent","_jsx","src","successIcon","errorIcon","warningIcon","flexGrow","borderLeft","os600","alignSelf"],"mappings":"qNAKY,MAACA,EAAQ,EAAGC,OAAMC,WAAUC,UAASC,WACrCC,EAAMC,EAAK,CAAEC,GAAI,CACjBC,QAAS,EACTC,YAAa,EACbC,aAAc,EACdC,WAAaC,GAAUA,EAAMC,QAAQC,MAAMC,SAC3CC,aAAc,EACdC,MAAQL,GAAUA,EAAMC,QAAQK,UAAUC,IAC1CC,QAAS,OACTC,WAAY,SACZC,IAAK,OACLC,SAAU,QACVC,SAAUpB,QAAqCA,EAAQ,QACvDA,MAAOA,QAAqCA,EAAQ,QACrD,cAAe,QAASF,SAAU,CAACD,GAASI,EAAMC,EAAK,CAAEC,GAAI,CACpDkB,OAAQ,OACRL,QAAS,OACTM,cAAe,SACfC,eAAgB,UACjB,cAAe,aAAczB,SAAU,CAAU,YAATD,GAAsB2B,EAAK,MAAO,CAAEC,IAAKC,IAAyB,UAAT7B,GAAoB2B,EAAK,MAAO,CAAEC,IAAKE,IAAuB,YAAT9B,GAAsB2B,EAAK,MAAO,CAAEC,IAAKG,OAAqBJ,EAAKtB,EAAK,CAAEC,GAAI,CACnO0B,SAAU,GACX,cAAe,gBAAiB/B,SAAUA,IAAaC,GAAYyB,EAAKtB,EAAK,CAAEC,GAAI,CAClFE,YAAa,OACbyB,WAAatB,GAAU,aAAaA,EAAMC,QAAQK,UAAUiB,QAC5DC,UAAW,UACXhB,QAAS,OACTM,cAAe,MACfL,WAAY,UACb,cAAe,gBAAiBnB,SAAUC"}

package/components/banner/banner.js

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as t}from"react/jsx-runtime";import"tslib";import{useTheme as o,lighten as i,Stack as e,Box as a,Typography as s}from"@mui/material";import"../../design/skoda/theme.js";import{useMemo as m}from"react";import"@mui/material/styles";import"../accordion/accordion.js";import"../backdrop/backdrop.js";import"../button/button.js";import"../cardContainer/cardContainer.js";import"../cardMenu/cardMenu.js";import"../checkbox/checkbox.js";import"../chip/chipImage/chipImage.js";import"../chip/regular/chip.js";import"../chip/chipMultiselect/multiSelectChip.js";import"../chip/chipDropdownChildren/chipDropdownChildren.js";import"../controls/controls.js";import"../divider/divider.js";import"../drawer/drawer.js";import"../flag/flag.js";import"@mui/material/Grid";import{Icon as n}from"../icon/icon.js";import"../icon/icon.definitions.js";import"../indicator/indicator.js";import"../label/label.js";import"../labelCO2/labelCO2.js";import"../labelFeature/labelFeature.js";import"../labelPromotional/labelPromotional.js";import"../labelStatus/labelStatus.js";import"../menu/menu.js";import"@mui/material/MenuItem";import"@mui/material/MobileStepper";import"../mobileStepper/mobileStepperButton.js";import"../modal/modal.js";import"../modal/modalTitle.js";import"../numbering/numbering.js";import"../pagination/pagination.js";import"../progressBar/progressBar.js";import"../radioButton/radioButton.js";import"../selectInput/selectInput.js";import"../slider/slider.js";import"../snackbar/snackbar.js";import"../stepper/stepper.js";import"../textArea/textArea.js";import"../common/styled/textFieldStyled.js";import"../helperTextContent/index.js";import"../toggleSwitch/toggleSwitch.js";import"../avatar/Avatar.js";import"../iconButton/index.js";import"../alert/AlertButton.js";import"../../organisms/gallery/Gallery.js";import"../../organisms/gallery/GalleryItem.js";import"minimatch";import"../../utils/enum.js";import"../../organisms/cardOwnedVehicle/cardOwnedVehicle.js";import"../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js";import"../../organisms/cardPhotoFixed/cardPhotoFixed.js";import"../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js";import"../../organisms/common/styled/cardStandardWrapperStyled.js";import"../../organisms/cardTypeOnly/cardTypeOnly.js";import"embla-carousel-react";import"embla-carousel-class-names";import"embla-carousel-autoplay";import"../../organisms/carousel/styledComponents/styledCarouselHorizontal.js";import"../../organisms/carousel/styledComponents/styledCarouselVertical.js";import"../../organisms/heroImageCard/heroImageCard.js";import"@googlemaps/react-wrapper";import"@googlemaps/markerclusterer";import"../../organisms/maps/utils/mapIcons.js";import"../../organisms/maps/mapComponents/mapStyled.js";import"../../organisms/shortcutLink/shortcutLink.js";import"../../organisms/textCta/textCta.js";import"../../organisms/tile/tile.js";import"@mui/system";import"../../organisms/carousel2/galleryCarousel/galleryContext.js";import"../../organisms/carousel2/galleryCarousel/galleryItemContext.js";import"../../organisms/carousel2/heroCarousel/heroCarouselContext.js";import"../../organisms/notification/Notification.js";import"../../organisms/notification/NotificationCenter.js";import"../../layout/Header/HeaderContext.js";import"../../layout/Header/HeaderButton.js";import"../../layout/Header/HeaderNavigationHero.js";import"../../layout/Header/HeaderNavigationLink.js";import"../../layout/Header/HeaderNavigationMenu.js";import"../../layout/Header/PredefinedHeaderButtons.js";import"../../layout/Header/HeaderOverheadItem.js";import"../../layout/SideMenu/SideMenuItem.js";import"@mui/material/Unstable_Grid2";import"../../layout/SecondaryNavigation/SecondaryNavigationCta.js";import"../../layout/SecondaryNavigation/SecondaryNavigationItem.js";import"@mui/material/Container";import"../../production/Button/Button.js";const p=({children:p,variant:l="info",buttons:d})=>{const c=o(),[u,j]=m((()=>{switch(l){case"error":return[c.palette.error.main,i(c.palette.error.light,.9)];case"warning":return[c.palette.warning.main,i(c.palette.warning.light,.9)];default:return[c.palette.info.main,i(c.palette.info.light,.9)]}}),[l,c]);return r(e,{direction:{md:"row",sm:"column"},spacing:0,sx:{borderLeft:"6px solid",alignItems:"flex-start",borderColor:u,backgroundColor:j},"data-testid":"Banner",children:[r(e,{direction:"row",spacing:2,sx:{padding:{md:"12px 16px",sm:"16px",xs:"11px 16px"},flexGrow:1,alignItems:"center"},children:[t(n,{name:"info"===l?"circle-info":"circle-exclamation",iconStyle:"filled",color:l,sx:{alignSelf:"flex-start",color:u,marginTop:{lg:"2px !important",md:"1px !important",sm:"-2px !important"}}}),t(a,{children:"string"==typeof p?t(s,{children:p}):p})]}),d&&t(e,{direction:"row",spacing:1,useFlexGap:!0,sx:{padding:"8px 16px",textWrap:"nowrap",flexWrap:"wrap",alignSelf:"center",marginRight:"auto"},"data-testid":"Banner.buttons",children:d})]})};export{p as Banner};
+import{jsxs as t,jsx as r}from"react/jsx-runtime";import"tslib";import{useMemo as o}from"react";import{useTheme as i,lighten as e,Stack as a,Box as s,Typography as m}from"@mui/material";import"@emotion/react";import"@emotion/cache";import"stylis";import"stylis-plugin-rtl";import"../../design/skoda/theme.js";import"../../design/skoda/theme.breakpoints.js";import"@mui/material/styles";import"@mui/system";import"../accordion/accordion.js";import"../backdrop/backdrop.js";import"../button/button.js";import"../cardContainer/cardContainer.js";import"../cardMenu/cardMenu.js";import"../checkbox/checkbox.js";import"../chip/chipImage/chipImage.js";import"../chip/regular/chip.js";import"../chip/chipMultiselect/multiSelectChip.js";import"../chip/chipDropdownChildren/chipDropdownChildren.js";import"../controls/controls.js";import"../divider/divider.js";import"../drawer/drawer.js";import"../flag/flag.js";import"@mui/material/Grid";import{Icon as n}from"../icon/icon.js";import"../icon/icon.definitions.js";import"../indicator/indicator.js";import"../label/label.js";import"../labelCO2/labelCO2.js";import"../labelFeature/labelFeature.js";import"../labelPromotional/labelPromotional.js";import"../labelStatus/labelStatus.js";import"../menu/menu.js";import"@mui/material/MenuItem";import"@mui/material/MobileStepper";import"../mobileStepper/mobileStepperButton.js";import"../modal/modal.js";import"../modal/modalTitle.js";import"../numbering/numbering.js";import"../pagination/pagination.js";import"../progressBar/progressBar.js";import"../radioButton/radioButton.js";import"../selectInput/selectInput.js";import"../slider/slider.js";import"../snackbar/snackbar.js";import"../stepper/stepper.js";import"../textArea/textArea.js";import"../common/styled/textFieldStyled.js";import"../helperTextContent/index.js";import"../toggleSwitch/toggleSwitch.js";import"../avatar/Avatar.js";import"../iconButton/index.js";import"../alert/AlertButton.js";import"../../organisms/gallery/Gallery.js";import"../../organisms/gallery/GalleryItem.js";import"minimatch";import"../../utils/enum.js";import"../../organisms/cardOwnedVehicle/cardOwnedVehicle.js";import"../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js";import"../../organisms/cardPhotoFixed/cardPhotoFixed.js";import"../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js";import"../../organisms/common/styled/cardStandardWrapperStyled.js";import"../../organisms/cardTypeOnly/cardTypeOnly.js";import"embla-carousel-react";import"embla-carousel-class-names";import"embla-carousel-autoplay";import"../../organisms/carousel/styledComponents/styledCarouselHorizontal.js";import"../../organisms/carousel/styledComponents/styledCarouselVertical.js";import"../../organisms/heroImageCard/heroImageCard.js";import"@googlemaps/react-wrapper";import"@googlemaps/markerclusterer";import"../../organisms/maps/utils/mapIcons.js";import"../../organisms/maps/mapComponents/mapStyled.js";import"../../organisms/shortcutLink/shortcutLink.js";import"../../organisms/textCta/textCta.js";import"../../organisms/tile/tile.js";import"../../organisms/carousel2/galleryCarousel/galleryContext.js";import"../../organisms/carousel2/galleryCarousel/galleryItemContext.js";import"../../organisms/carousel2/heroCarousel/heroCarouselContext.js";import"../../organisms/notification/Notification.js";import"../../organisms/notification/NotificationCenter.js";import"../../layout/Header/HeaderContext.js";import"../../layout/Header/HeaderButton.js";import"../../layout/Header/HeaderNavigationHero.js";import"../../layout/Header/HeaderNavigationLink.js";import"../../layout/Header/HeaderNavigationMenu.js";import"../../layout/Header/PredefinedHeaderButtons.js";import"../../layout/Header/HeaderOverheadItem.js";import"../../layout/SideMenu/SideMenuItem.js";import"../../layout/Footer/PredefinedFooterIconButtons.js";import"../../layout/SecondaryNavigation/SecondaryNavigationCta.js";import"../../layout/SecondaryNavigation/SecondaryNavigationItem.js";import"@mui/material/Container";import"../../production/Button/Button.js";const p=({children:p,variant:l="info",buttons:c})=>{const d=i(),[u,j]=o((()=>{switch(l){case"error":return[d.palette.error.main,e(d.palette.error.light,.9)];case"warning":return[d.palette.warning.main,e(d.palette.warning.light,.9)];default:return[d.palette.info.main,e(d.palette.info.light,.9)]}}),[l,d]);return t(a,{direction:{md:"row",sm:"column"},spacing:0,sx:{borderLeft:"6px solid",alignItems:"flex-start",borderColor:u,backgroundColor:j},"data-testid":"Banner",children:[t(a,{direction:"row",spacing:2,sx:{padding:{md:"12px 16px",sm:"16px",xs:"11px 16px"},flexGrow:1,alignItems:"center"},children:[r(n,{name:"info"===l?"circle-info":"circle-exclamation",iconStyle:"filled",color:l,sx:{alignSelf:"flex-start",color:u,marginTop:{lg:"2px !important",md:"1px !important",sm:"-2px !important"}}}),r(s,{children:"string"==typeof p?r(m,{children:p}):p})]}),c&&r(a,{direction:"row",spacing:1,useFlexGap:!0,sx:{padding:"8px 16px",textWrap:"nowrap",flexWrap:"wrap",alignSelf:"center",marginRight:"auto"},"data-testid":"Banner.buttons",children:c})]})};export{p as Banner};
 //# sourceMappingURL=banner.js.map

package/components/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '@/src';\nimport { Box, Stack, Typography, lighten, useTheme } from '@mui/material';\nimport { useMemo } from 'react';\n/**\n * Alert notification banner\n */\nexport const Banner = ({ children, variant = 'info', buttons }) => {\n    const theme = useTheme();\n    const [borderColor, backgroundColor] = useMemo(() => {\n        switch (variant) {\n            case 'error':\n                return [theme.palette.error.main, lighten(theme.palette.error.light, 0.9)];\n            case 'warning':\n                return [theme.palette.warning.main, lighten(theme.palette.warning.light, 0.9)];\n            case 'info':\n            default:\n                return [theme.palette.info.main, lighten(theme.palette.info.light, 0.9)];\n        }\n    }, [variant, theme]);\n    return (_jsxs(Stack, { direction: { md: 'row', sm: 'column' }, spacing: 0, sx: {\n            borderLeft: '6px solid',\n            alignItems: 'flex-start',\n            borderColor,\n            backgroundColor,\n        }, \"data-testid\": \"Banner\", children: [_jsxs(Stack, { direction: \"row\", spacing: 2, sx: { padding: { md: '12px 16px', sm: '16px', xs: '11px 16px' }, flexGrow: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: variant === 'info' ? 'circle-info' : 'circle-exclamation', iconStyle: \"filled\", color: variant, sx: {\n                            alignSelf: 'flex-start',\n                            color: borderColor,\n                            marginTop: { lg: '2px !important', md: '1px !important', sm: '-2px !important' },\n                        } }), _jsx(Box, { children: typeof children === 'string' ? _jsx(Typography, { children: children }) : children })] }), buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, useFlexGap: true, sx: { padding: '8px 16px', textWrap: 'nowrap', flexWrap: 'wrap', alignSelf: 'center', marginRight: 'auto' }, \"data-testid\": \"Banner.buttons\", children: buttons }))] }));\n};\n//# sourceMappingURL=banner.js.map"],"names":["Banner","children","variant","buttons","theme","useTheme","borderColor","backgroundColor","useMemo","palette","error","main","lighten","light","warning","info","_jsxs","Stack","direction","md","sm","spacing","sx","borderLeft","alignItems","padding","xs","flexGrow","_jsx","Icon","name","iconStyle","color","alignSelf","marginTop","lg","Box","Typography","useFlexGap","textWrap","flexWrap","marginRight"],"mappings":"izHAOY,MAACA,EAAS,EAAGC,WAAUC,UAAU,OAAQC,cACjD,MAAMC,EAAQC,KACPC,EAAaC,GAAmBC,GAAQ,KAC3C,OAAQN,GACJ,IAAK,QACD,MAAO,CAACE,EAAMK,QAAQC,MAAMC,KAAMC,EAAQR,EAAMK,QAAQC,MAAMG,MAAO,KACzE,IAAK,UACD,MAAO,CAACT,EAAMK,QAAQK,QAAQH,KAAMC,EAAQR,EAAMK,QAAQK,QAAQD,MAAO,KAE7E,QACI,MAAO,CAACT,EAAMK,QAAQM,KAAKJ,KAAMC,EAAQR,EAAMK,QAAQM,KAAKF,MAAO,KAC1E,GACF,CAACX,EAASE,IACb,OAAQY,EAAMC,EAAO,CAAEC,UAAW,CAAEC,GAAI,MAAOC,GAAI,UAAYC,QAAS,EAAGC,GAAI,CACvEC,WAAY,YACZC,WAAY,aACZlB,cACAC,mBACD,cAAe,SAAUN,SAAU,CAACe,EAAMC,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGC,GAAI,CAAEG,QAAS,CAAEN,GAAI,YAAaC,GAAI,OAAQM,GAAI,aAAeC,SAAU,EAAGH,WAAY,UAAYvB,SAAU,CAAC2B,EAAKC,EAAM,CAAEC,KAAkB,SAAZ5B,EAAqB,cAAgB,qBAAsB6B,UAAW,SAAUC,MAAO9B,EAASoB,GAAI,CACxSW,UAAW,aACXD,MAAO1B,EACP4B,UAAW,CAAEC,GAAI,iBAAkBhB,GAAI,iBAAkBC,GAAI,sBAC3DQ,EAAKQ,EAAK,CAAEnC,SAA8B,iBAAbA,EAAwB2B,EAAKS,EAAY,CAAEpC,SAAUA,IAAcA,OAAiBE,GAAYyB,EAAKX,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGiB,YAAY,EAAMhB,GAAI,CAAEG,QAAS,WAAYc,SAAU,SAAUC,SAAU,OAAQP,UAAW,SAAUQ,YAAa,QAAU,cAAe,iBAAkBxC,SAAUE,MAAiB"}
+{"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '@/src';\nimport { Box, Stack, Typography, lighten, useTheme } from '@mui/material';\nimport { useMemo } from 'react';\n/**\n * Alert notification banner\n */\nexport const Banner = ({ children, variant = 'info', buttons }) => {\n    const theme = useTheme();\n    const [borderColor, backgroundColor] = useMemo(() => {\n        switch (variant) {\n            case 'error':\n                return [theme.palette.error.main, lighten(theme.palette.error.light, 0.9)];\n            case 'warning':\n                return [theme.palette.warning.main, lighten(theme.palette.warning.light, 0.9)];\n            case 'info':\n            default:\n                return [theme.palette.info.main, lighten(theme.palette.info.light, 0.9)];\n        }\n    }, [variant, theme]);\n    return (_jsxs(Stack, { direction: { md: 'row', sm: 'column' }, spacing: 0, sx: {\n            borderLeft: '6px solid',\n            alignItems: 'flex-start',\n            borderColor,\n            backgroundColor,\n        }, \"data-testid\": \"Banner\", children: [_jsxs(Stack, { direction: \"row\", spacing: 2, sx: { padding: { md: '12px 16px', sm: '16px', xs: '11px 16px' }, flexGrow: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: variant === 'info' ? 'circle-info' : 'circle-exclamation', iconStyle: \"filled\", color: variant, sx: {\n                            alignSelf: 'flex-start',\n                            color: borderColor,\n                            marginTop: { lg: '2px !important', md: '1px !important', sm: '-2px !important' },\n                        } }), _jsx(Box, { children: typeof children === 'string' ? _jsx(Typography, { children: children }) : children })] }), buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, useFlexGap: true, sx: { padding: '8px 16px', textWrap: 'nowrap', flexWrap: 'wrap', alignSelf: 'center', marginRight: 'auto' }, \"data-testid\": \"Banner.buttons\", children: buttons }))] }));\n};\n//# sourceMappingURL=banner.js.map"],"names":["Banner","children","variant","buttons","theme","useTheme","borderColor","backgroundColor","useMemo","palette","error","main","lighten","light","warning","info","_jsxs","Stack","direction","md","sm","spacing","sx","borderLeft","alignItems","padding","xs","flexGrow","_jsx","Icon","name","iconStyle","color","alignSelf","marginTop","lg","Box","Typography","useFlexGap","textWrap","flexWrap","marginRight"],"mappings":"88HAOY,MAACA,EAAS,EAAGC,WAAUC,UAAU,OAAQC,cACjD,MAAMC,EAAQC,KACPC,EAAaC,GAAmBC,GAAQ,KAC3C,OAAQN,GACJ,IAAK,QACD,MAAO,CAACE,EAAMK,QAAQC,MAAMC,KAAMC,EAAQR,EAAMK,QAAQC,MAAMG,MAAO,KACzE,IAAK,UACD,MAAO,CAACT,EAAMK,QAAQK,QAAQH,KAAMC,EAAQR,EAAMK,QAAQK,QAAQD,MAAO,KAE7E,QACI,MAAO,CAACT,EAAMK,QAAQM,KAAKJ,KAAMC,EAAQR,EAAMK,QAAQM,KAAKF,MAAO,KAC1E,GACF,CAACX,EAASE,IACb,OAAQY,EAAMC,EAAO,CAAEC,UAAW,CAAEC,GAAI,MAAOC,GAAI,UAAYC,QAAS,EAAGC,GAAI,CACvEC,WAAY,YACZC,WAAY,aACZlB,cACAC,mBACD,cAAe,SAAUN,SAAU,CAACe,EAAMC,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGC,GAAI,CAAEG,QAAS,CAAEN,GAAI,YAAaC,GAAI,OAAQM,GAAI,aAAeC,SAAU,EAAGH,WAAY,UAAYvB,SAAU,CAAC2B,EAAKC,EAAM,CAAEC,KAAkB,SAAZ5B,EAAqB,cAAgB,qBAAsB6B,UAAW,SAAUC,MAAO9B,EAASoB,GAAI,CACxSW,UAAW,aACXD,MAAO1B,EACP4B,UAAW,CAAEC,GAAI,iBAAkBhB,GAAI,iBAAkBC,GAAI,sBAC3DQ,EAAKQ,EAAK,CAAEnC,SAA8B,iBAAbA,EAAwB2B,EAAKS,EAAY,CAAEpC,SAAUA,IAAcA,OAAiBE,GAAYyB,EAAKX,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGiB,YAAY,EAAMhB,GAAI,CAAEG,QAAS,WAAYc,SAAU,SAAUC,SAAU,OAAQP,UAAW,SAAUQ,YAAa,QAAU,cAAe,iBAAkBxC,SAAUE,MAAiB"}

package/components/box/box.component.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps as MuiBoxProps } from '@mui/material';
+export type BoxProps = MuiBoxProps;
+export declare const Box: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;

package/components/box/index.d.ts

@@ -0,0 +1 @@
+export { Box } from '@mui/material';

package/components/controls/controls.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useRef as e,useCallback as i,useEffect as n}from"react";import{styled as a}from"@mui/material/styles";import{Icon as l}from"../icon/icon.js";import"../icon/icon.definitions.js";import{paletteLight as s}from"../../design/skoda/paletteLight.theme.js";import{ternaryCondition as c}from"../../utils/utilities.js";const p=r(((r,a)=>{var s=t(r,[]);const c=e(null),p=i((t=>{s.onClickCallback&&!s.isDisabled&&s.onClickCallback(t)}),[s]);return n((()=>{c.current.addEventListener("mousedown",(t=>{t.preventDefault()}))}),[c]),o(d,Object.assign({},s,{ref:a,onClick:()=>p(s.controlType),children:o("button",{ref:c,children:o(l,{fontSize:s.iconFontSize,name:s.controlType,iconStyle:s.iconStyle})})}))})),d=a("div",{shouldForwardProp:t=>"controlType"!==t&&"controllerColor"!==t&&"iconStyle"!==t&&"iconFontSize"!==t&&"controlVariant"!==t&&"onClickCallback"!==t&&"isDisabled"!==t&&"customHeight"!==t})((o=>{var r=t(o,["theme"]);const e=c(r.controllerColor,"light",s.surface.tertiary,s.text.primary);let i={};const n=Object.assign(Object.assign({},{display:"flex",justifyContent:"center",alignItems:"center"}),{width:c(r.iconFontSize,"small","34px","42px"),height:c(r.iconFontSize,"small","34px","42px"),borderRadius:"50%",backgroundColor:"transparent",border:"none",position:"relative",outline:c(r.controlVariant,"standard",0,`2px solid ${e}`),cursor:"pointer","& .MuiIcon-root":{color:c(r.controllerColor,"light",s.surface.tertiary,s.text.primary),fontSize:c(r.iconFontSize,"small","18px","24px"),"&:before":{transform:"translateY(-2px)"}},"&:active":{transform:"scale(0.95)"},"&:hover":{backgroundColor:s.transparent.primary},"&:focus":{"&:after":{content:'""',display:"block",width:"calc(100% + 6px)",height:"calc(100% + 6px)",outline:c(r.controllerColor,"light",`2px solid ${s.surface.tertiary}`,`2px solid ${s.text.primary}`),position:"absolute",left:"-3px",top:"-3px",borderRadius:"50%"}}});return i=Object.assign(Object.assign({},i),{height:(r.customHeight?r.customHeight:"100%")+"!important","& button":Object.assign({},n)}),r.isDisabled&&(i=Object.assign(Object.assign({},i),{"& button":Object.assign(Object.assign({},n),{borderColor:s.disabled.primary,cursor:"default",outline:c(r.controlVariant,"standard",0,`2px solid ${s.disabled.primary}`),"&:active":{transform:"scale(1)"},"&:hover":{backgroundColor:"transparent"},"&:focus":{"&:after":{content:"none"}},"& .MuiIcon-root":{color:s.disabled.primary,fontSize:c(r.iconFontSize,"small","18px","24px"),"&:before":{transform:"translateY(-2px)"}}})})),i}));export{p as Controller};
+import{__rest as t}from"tslib";import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useRef as i,useCallback as e,useEffect as n}from"react";import{styled as a}from"@mui/material/styles";import{Icon as l}from"../icon/icon.js";import"../icon/icon.definitions.js";import{paletteLight as s}from"../../design/skoda/paletteLight.theme.js";import{ternaryCondition as c}from"../../utils/utilities.js";const p=r(((r,a)=>{var s=t(r,[]);const c=i(null),p=e((t=>{s.onClickCallback&&!s.isDisabled&&s.onClickCallback(t)}),[s]);return n((()=>{c.current.addEventListener("mousedown",(t=>{t.preventDefault()}))}),[c]),o(d,Object.assign({},s,{ref:a,onClick:()=>p(s.controlType),children:o("button",{ref:c,children:o(l,{fontSize:s.iconFontSize,name:s.controlType,iconStyle:s.iconStyle})})}))})),d=a("div",{shouldForwardProp:t=>"controlType"!==t&&"controllerColor"!==t&&"iconStyle"!==t&&"iconFontSize"!==t&&"controlVariant"!==t&&"onClickCallback"!==t&&"isDisabled"!==t&&"customHeight"!==t})((o=>{var r=t(o,["theme"]);const i=c(r.controllerColor,"light",s.surface.tertiary,s.text.primary);let e={};const n=Object.assign(Object.assign({},{display:"flex",justifyContent:"center",alignItems:"center"}),{width:c(r.iconFontSize,"small","34px","42px"),height:c(r.iconFontSize,"small","34px","42px"),borderRadius:"50%",backgroundColor:"transparent",border:"none",position:"relative",outline:c(r.controlVariant,"standard",0,`2px solid ${i}`),cursor:"pointer","& .MuiIcon-root":{color:c(r.controllerColor,"light",s.surface.tertiary,s.text.primary),fontSize:c(r.iconFontSize,"small","18px","24px")},"&:active":{transform:"scale(0.95)"},"&:hover":{backgroundColor:s.transparent.primary},"&:focus":{"&:after":{content:'""',display:"block",width:"calc(100% + 6px)",height:"calc(100% + 6px)",outline:c(r.controllerColor,"light",`2px solid ${s.surface.tertiary}`,`2px solid ${s.text.primary}`),position:"absolute",left:"-3px",top:"-3px",borderRadius:"50%"}}});return e=Object.assign(Object.assign({},e),{height:(r.customHeight?r.customHeight:"100%")+"!important","& button":Object.assign({},n)}),r.isDisabled&&(e=Object.assign(Object.assign({},e),{"& button":Object.assign(Object.assign({},n),{borderColor:s.disabled.primary,cursor:"default",outline:c(r.controlVariant,"standard",0,`2px solid ${s.disabled.primary}`),"&:active":{transform:"scale(1)"},"&:hover":{backgroundColor:"transparent"},"&:focus":{"&:after":{content:"none"}},"& .MuiIcon-root":{color:s.disabled.primary,fontSize:c(r.iconFontSize,"small","18px","24px")}})})),e}));export{p as Controller};
 //# sourceMappingURL=controls.js.map

package/components/controls/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","sources":["../../../src/components/controls/controls.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport { paletteLight as flowColors } from '../../design/skoda/paletteLight.theme';\nimport { ternaryCondition } from '../../utils/utilities';\n/**\n * @description SkodaFlow Controls component.\n * Properties are inherited from HTML Button Attribetes element.\n * @param props ControlsProps\n * @returns React Functional Component\n */\nexport const Controller = forwardRef((_a, ref) => {\n    var props = __rest(_a, []);\n    const btnRef = useRef(null);\n    const handleOnClick = useCallback((e) => {\n        props.onClickCallback && !props.isDisabled && props.onClickCallback(e);\n    }, [props]);\n    useEffect(() => {\n        btnRef.current.addEventListener('mousedown', (e) => {\n            e.preventDefault();\n        });\n    }, [btnRef]);\n    return (_jsx(ControlStyled, Object.assign({}, props, { ref: ref, onClick: () => handleOnClick(props.controlType), children: _jsx(\"button\", { ref: btnRef, children: _jsx(Icon, { fontSize: props.iconFontSize, name: props.controlType, iconStyle: props.iconStyle }) }) })));\n});\n/**\n * @description Controls styling definition based on props\n */\nconst ControlStyled = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'controlType' &&\n        prop !== 'controllerColor' &&\n        prop !== 'iconStyle' &&\n        prop !== 'iconFontSize' &&\n        prop !== 'controlVariant' &&\n        prop !== 'onClickCallback' &&\n        prop !== 'isDisabled' &&\n        prop !== 'customHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const controlsColor = ternaryCondition(args.controllerColor, 'light', flowColors.surface.tertiary, flowColors.text.primary);\n    let styles = {};\n    const flexDisplay = {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n    };\n    const buttonSlyle = Object.assign(Object.assign({}, flexDisplay), { width: ternaryCondition(args.iconFontSize, 'small', '34px', '42px'), height: ternaryCondition(args.iconFontSize, 'small', '34px', '42px'), borderRadius: '50%', backgroundColor: 'transparent', border: 'none', position: 'relative', outline: ternaryCondition(args.controlVariant, 'standard', 0, `2px solid ${controlsColor}`), cursor: 'pointer', '& .MuiIcon-root': {\n            color: ternaryCondition(args.controllerColor, 'light', flowColors.surface.tertiary, flowColors.text.primary),\n            fontSize: ternaryCondition(args.iconFontSize, 'small', '18px', '24px'),\n            '&:before': {\n                transform: 'translateY(-2px)',\n            },\n        }, '&:active': {\n            transform: 'scale(0.95)',\n        }, '&:hover': {\n            backgroundColor: flowColors.transparent.primary,\n        }, '&:focus': {\n            '&:after': {\n                content: '\"\"',\n                display: 'block',\n                width: 'calc(100% + 6px)',\n                height: 'calc(100% + 6px)',\n                outline: ternaryCondition(args.controllerColor, 'light', `2px solid ${flowColors.surface.tertiary}`, `2px solid ${flowColors.text.primary}`),\n                position: 'absolute',\n                left: '-3px',\n                top: '-3px',\n                borderRadius: '50%',\n            },\n        } });\n    styles = Object.assign(Object.assign({}, styles), { height: (args.customHeight ? args.customHeight : '100%') + '!important', '& button': Object.assign({}, buttonSlyle) });\n    if (args.isDisabled) {\n        styles = Object.assign(Object.assign({}, styles), { '& button': Object.assign(Object.assign({}, buttonSlyle), { borderColor: flowColors.disabled.primary, cursor: 'default', outline: ternaryCondition(args.controlVariant, 'standard', 0, `2px solid ${flowColors.disabled.primary}`), '&:active': {\n                    transform: 'scale(1)',\n                }, '&:hover': {\n                    backgroundColor: 'transparent',\n                }, '&:focus': {\n                    '&:after': {\n                        content: 'none',\n                    },\n                }, '& .MuiIcon-root': {\n                    color: flowColors.disabled.primary,\n                    fontSize: ternaryCondition(args.iconFontSize, 'small', '18px', '24px'),\n                    '&:before': {\n                        transform: 'translateY(-2px)',\n                    },\n                } }) });\n    }\n    return styles;\n});\n//# sourceMappingURL=controls.js.map"],"names":["Controller","forwardRef","_a","ref","props","__rest","btnRef","useRef","handleOnClick","useCallback","e","onClickCallback","isDisabled","useEffect","current","addEventListener","preventDefault","_jsx","ControlStyled","Object","assign","onClick","controlType","children","Icon","fontSize","iconFontSize","name","iconStyle","styled","shouldForwardProp","prop","args","controlsColor","ternaryCondition","controllerColor","flowColors","surface","tertiary","text","primary","styles","buttonSlyle","display","justifyContent","alignItems","width","height","borderRadius","backgroundColor","border","position","outline","controlVariant","cursor","color","transform","transparent","content","left","top","customHeight","borderColor","disabled"],"mappings":"mZAaY,MAACA,EAAaC,GAAW,CAACC,EAAIC,KACtC,IAAIC,EAAQC,EAAOH,EAAI,IACvB,MAAMI,EAASC,EAAO,MAChBC,EAAgBC,GAAaC,IAC/BN,EAAMO,kBAAoBP,EAAMQ,YAAcR,EAAMO,gBAAgBD,EAAE,GACvE,CAACN,IAMJ,OALAS,GAAU,KACNP,EAAOQ,QAAQC,iBAAiB,aAAcL,IAC1CA,EAAEM,gBAAgB,GACpB,GACH,CAACV,IACIW,EAAKC,EAAeC,OAAOC,OAAO,CAAE,EAAEhB,EAAO,CAAED,IAAKA,EAAKkB,QAAS,IAAMb,EAAcJ,EAAMkB,aAAcC,SAAUN,EAAK,SAAU,CAAEd,IAAKG,EAAQiB,SAAUN,EAAKO,EAAM,CAAEC,SAAUrB,EAAMsB,aAAcC,KAAMvB,EAAMkB,YAAaM,UAAWxB,EAAMwB,gBAAqB,IAK5QV,EAAgBW,EAAO,MAAO,CAChCC,kBAAoBC,GAAkB,gBAATA,GAChB,oBAATA,GACS,cAATA,GACS,iBAATA,GACS,mBAATA,GACS,oBAATA,GACS,eAATA,GACS,iBAATA,GARcF,EASlB3B,IACG,IAAiB8B,EAAO3B,EAAOH,EAAI,CAAC,UACvC,MAAM+B,EAAgBC,EAAiBF,EAAKG,gBAAiB,QAASC,EAAWC,QAAQC,SAAUF,EAAWG,KAAKC,SACnH,IAAIC,EAAS,CAAA,EACb,MAKMC,EAAcvB,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAL5B,CAChBuB,QAAS,OACTC,eAAgB,SAChBC,WAAY,WAEkD,CAAEC,MAAOZ,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,QAASqB,OAAQb,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,QAASsB,aAAc,MAAOC,gBAAiB,cAAeC,OAAQ,OAAQC,SAAU,WAAYC,QAASlB,EAAiBF,EAAKqB,eAAgB,WAAY,EAAG,aAAapB,KAAkBqB,OAAQ,UAAW,kBAAmB,CACraC,MAAOrB,EAAiBF,EAAKG,gBAAiB,QAASC,EAAWC,QAAQC,SAAUF,EAAWG,KAAKC,SACpGf,SAAUS,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,QAC/D,WAAY,CACR8B,UAAW,qBAEhB,WAAY,CACXA,UAAW,eACZ,UAAW,CACVP,gBAAiBb,EAAWqB,YAAYjB,SACzC,UAAW,CACV,UAAW,CACPkB,QAAS,KACTf,QAAS,QACTG,MAAO,mBACPC,OAAQ,mBACRK,QAASlB,EAAiBF,EAAKG,gBAAiB,QAAS,aAAaC,EAAWC,QAAQC,WAAY,aAAaF,EAAWG,KAAKC,WAClIW,SAAU,WACVQ,KAAM,OACNC,IAAK,OACLZ,aAAc,UAqB1B,OAlBAP,EAAStB,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEqB,GAAS,CAAEM,QAASf,EAAK6B,aAAe7B,EAAK6B,aAAe,QAAU,aAAc,WAAY1C,OAAOC,OAAO,CAAE,EAAEsB,KACvJV,EAAKpB,aACL6B,EAAStB,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIqB,GAAS,CAAE,WAAYtB,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIsB,GAAc,CAAEoB,YAAa1B,EAAW2B,SAASvB,QAASc,OAAQ,UAAWF,QAASlB,EAAiBF,EAAKqB,eAAgB,WAAY,EAAG,aAAajB,EAAW2B,SAASvB,WAAY,WAAY,CACxRgB,UAAW,YACZ,UAAW,CACVP,gBAAiB,eAClB,UAAW,CACV,UAAW,CACPS,QAAS,SAEd,kBAAmB,CAClBH,MAAOnB,EAAW2B,SAASvB,QAC3Bf,SAAUS,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,QAC/D,WAAY,CACR8B,UAAW,0BAIxBf,CAAM"}
+{"version":3,"file":"controls.js","sources":["../../../src/components/controls/controls.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport { paletteLight as flowColors } from '../../design/skoda/paletteLight.theme';\nimport { ternaryCondition } from '../../utils/utilities';\n/**\n * @description SkodaFlow Controls component.\n * Properties are inherited from HTML Button Attribetes element.\n * @param props ControlsProps\n * @returns React Functional Component\n */\nexport const Controller = forwardRef((_a, ref) => {\n    var props = __rest(_a, []);\n    const btnRef = useRef(null);\n    const handleOnClick = useCallback((e) => {\n        props.onClickCallback && !props.isDisabled && props.onClickCallback(e);\n    }, [props]);\n    useEffect(() => {\n        btnRef.current.addEventListener('mousedown', (e) => {\n            e.preventDefault();\n        });\n    }, [btnRef]);\n    return (_jsx(ControlStyled, Object.assign({}, props, { ref: ref, onClick: () => handleOnClick(props.controlType), children: _jsx(\"button\", { ref: btnRef, children: _jsx(Icon, { fontSize: props.iconFontSize, name: props.controlType, iconStyle: props.iconStyle }) }) })));\n});\n/**\n * @description Controls styling definition based on props\n */\nconst ControlStyled = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'controlType' &&\n        prop !== 'controllerColor' &&\n        prop !== 'iconStyle' &&\n        prop !== 'iconFontSize' &&\n        prop !== 'controlVariant' &&\n        prop !== 'onClickCallback' &&\n        prop !== 'isDisabled' &&\n        prop !== 'customHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const controlsColor = ternaryCondition(args.controllerColor, 'light', flowColors.surface.tertiary, flowColors.text.primary);\n    let styles = {};\n    const flexDisplay = {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n    };\n    const buttonSlyle = Object.assign(Object.assign({}, flexDisplay), { width: ternaryCondition(args.iconFontSize, 'small', '34px', '42px'), height: ternaryCondition(args.iconFontSize, 'small', '34px', '42px'), borderRadius: '50%', backgroundColor: 'transparent', border: 'none', position: 'relative', outline: ternaryCondition(args.controlVariant, 'standard', 0, `2px solid ${controlsColor}`), cursor: 'pointer', '& .MuiIcon-root': {\n            color: ternaryCondition(args.controllerColor, 'light', flowColors.surface.tertiary, flowColors.text.primary),\n            fontSize: ternaryCondition(args.iconFontSize, 'small', '18px', '24px'),\n        }, '&:active': {\n            transform: 'scale(0.95)',\n        }, '&:hover': {\n            backgroundColor: flowColors.transparent.primary,\n        }, '&:focus': {\n            '&:after': {\n                content: '\"\"',\n                display: 'block',\n                width: 'calc(100% + 6px)',\n                height: 'calc(100% + 6px)',\n                outline: ternaryCondition(args.controllerColor, 'light', `2px solid ${flowColors.surface.tertiary}`, `2px solid ${flowColors.text.primary}`),\n                position: 'absolute',\n                left: '-3px',\n                top: '-3px',\n                borderRadius: '50%',\n            },\n        } });\n    styles = Object.assign(Object.assign({}, styles), { height: (args.customHeight ? args.customHeight : '100%') + '!important', '& button': Object.assign({}, buttonSlyle) });\n    if (args.isDisabled) {\n        styles = Object.assign(Object.assign({}, styles), { '& button': Object.assign(Object.assign({}, buttonSlyle), { borderColor: flowColors.disabled.primary, cursor: 'default', outline: ternaryCondition(args.controlVariant, 'standard', 0, `2px solid ${flowColors.disabled.primary}`), '&:active': {\n                    transform: 'scale(1)',\n                }, '&:hover': {\n                    backgroundColor: 'transparent',\n                }, '&:focus': {\n                    '&:after': {\n                        content: 'none',\n                    },\n                }, '& .MuiIcon-root': {\n                    color: flowColors.disabled.primary,\n                    fontSize: ternaryCondition(args.iconFontSize, 'small', '18px', '24px'),\n                } }) });\n    }\n    return styles;\n});\n//# sourceMappingURL=controls.js.map"],"names":["Controller","forwardRef","_a","ref","props","__rest","btnRef","useRef","handleOnClick","useCallback","e","onClickCallback","isDisabled","useEffect","current","addEventListener","preventDefault","_jsx","ControlStyled","Object","assign","onClick","controlType","children","Icon","fontSize","iconFontSize","name","iconStyle","styled","shouldForwardProp","prop","args","controlsColor","ternaryCondition","controllerColor","flowColors","surface","tertiary","text","primary","styles","buttonSlyle","display","justifyContent","alignItems","width","height","borderRadius","backgroundColor","border","position","outline","controlVariant","cursor","color","transform","transparent","content","left","top","customHeight","borderColor","disabled"],"mappings":"mZAaY,MAACA,EAAaC,GAAW,CAACC,EAAIC,KACtC,IAAIC,EAAQC,EAAOH,EAAI,IACvB,MAAMI,EAASC,EAAO,MAChBC,EAAgBC,GAAaC,IAC/BN,EAAMO,kBAAoBP,EAAMQ,YAAcR,EAAMO,gBAAgBD,EAAE,GACvE,CAACN,IAMJ,OALAS,GAAU,KACNP,EAAOQ,QAAQC,iBAAiB,aAAcL,IAC1CA,EAAEM,gBAAgB,GACpB,GACH,CAACV,IACIW,EAAKC,EAAeC,OAAOC,OAAO,CAAE,EAAEhB,EAAO,CAAED,IAAKA,EAAKkB,QAAS,IAAMb,EAAcJ,EAAMkB,aAAcC,SAAUN,EAAK,SAAU,CAAEd,IAAKG,EAAQiB,SAAUN,EAAKO,EAAM,CAAEC,SAAUrB,EAAMsB,aAAcC,KAAMvB,EAAMkB,YAAaM,UAAWxB,EAAMwB,gBAAqB,IAK5QV,EAAgBW,EAAO,MAAO,CAChCC,kBAAoBC,GAAkB,gBAATA,GAChB,oBAATA,GACS,cAATA,GACS,iBAATA,GACS,mBAATA,GACS,oBAATA,GACS,eAATA,GACS,iBAATA,GARcF,EASlB3B,IACG,IAAiB8B,EAAO3B,EAAOH,EAAI,CAAC,UACvC,MAAM+B,EAAgBC,EAAiBF,EAAKG,gBAAiB,QAASC,EAAWC,QAAQC,SAAUF,EAAWG,KAAKC,SACnH,IAAIC,EAAS,CAAA,EACb,MAKMC,EAAcvB,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAL5B,CAChBuB,QAAS,OACTC,eAAgB,SAChBC,WAAY,WAEkD,CAAEC,MAAOZ,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,QAASqB,OAAQb,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,QAASsB,aAAc,MAAOC,gBAAiB,cAAeC,OAAQ,OAAQC,SAAU,WAAYC,QAASlB,EAAiBF,EAAKqB,eAAgB,WAAY,EAAG,aAAapB,KAAkBqB,OAAQ,UAAW,kBAAmB,CACraC,MAAOrB,EAAiBF,EAAKG,gBAAiB,QAASC,EAAWC,QAAQC,SAAUF,EAAWG,KAAKC,SACpGf,SAAUS,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,SAChE,WAAY,CACX8B,UAAW,eACZ,UAAW,CACVP,gBAAiBb,EAAWqB,YAAYjB,SACzC,UAAW,CACV,UAAW,CACPkB,QAAS,KACTf,QAAS,QACTG,MAAO,mBACPC,OAAQ,mBACRK,QAASlB,EAAiBF,EAAKG,gBAAiB,QAAS,aAAaC,EAAWC,QAAQC,WAAY,aAAaF,EAAWG,KAAKC,WAClIW,SAAU,WACVQ,KAAM,OACNC,IAAK,OACLZ,aAAc,UAkB1B,OAfAP,EAAStB,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEqB,GAAS,CAAEM,QAASf,EAAK6B,aAAe7B,EAAK6B,aAAe,QAAU,aAAc,WAAY1C,OAAOC,OAAO,CAAE,EAAEsB,KACvJV,EAAKpB,aACL6B,EAAStB,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIqB,GAAS,CAAE,WAAYtB,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIsB,GAAc,CAAEoB,YAAa1B,EAAW2B,SAASvB,QAASc,OAAQ,UAAWF,QAASlB,EAAiBF,EAAKqB,eAAgB,WAAY,EAAG,aAAajB,EAAW2B,SAASvB,WAAY,WAAY,CACxRgB,UAAW,YACZ,UAAW,CACVP,gBAAiB,eAClB,UAAW,CACV,UAAW,CACPS,QAAS,SAEd,kBAAmB,CAClBH,MAAOnB,EAAW2B,SAASvB,QAC3Bf,SAAUS,EAAiBF,EAAKN,aAAc,QAAS,OAAQ,cAGxEe,CAAM"}

package/components/icon/icon.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{Icon as n}from"@mui/material";import{iconDefinitions as i}from"./icon.definitions.js";const a=a=>{var{name:r,className:l,iconStyle:s,color:c,fontSize:m,sx:f}=a,d=e(a,["name","className","iconStyle","color","fontSize","sx"]);const u=t((()=>{var e;const o=i.find((e=>e.name===(r||l)||e.altName&&e.altName===(r||l)))||i.find((e=>"circle-question"===e.name));return null!==(e=null==o?void 0:o.content)&&void 0!==e?e:""}),[r,l]),p=t((()=>"filled"===s?"SKODA Next Icons Filled":"SKODA Next Icons Regular"),[s]);return o(n,Object.assign({color:c,fontSize:m,sx:Object.assign({"&::before":{content:`'${"\\"+u}'`,display:"block"},fontFamily:p,lineHeight:"0.7em"},f||{}),"data-testid":"Icon",className:r||l},d))};export{a as Icon};
+import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{useMemo as t}from"react";import{Icon as n}from"@mui/material";import{iconDefinitions as i}from"./icon.definitions.js";const a=a=>{var{name:l,className:r,iconStyle:s,color:c,fontSize:m,sx:f}=a,d=e(a,["name","className","iconStyle","color","fontSize","sx"]);const u=t((()=>{var e;const o=l&&i.find((e=>e.name===l||e.altName&&e.altName===l))||r&&i.find((e=>r.includes(e.name)||r.includes(e.altName)))||i.find((e=>"circle-question"===e.name));return null!==(e=null==o?void 0:o.content)&&void 0!==e?e:""}),[l,r]),N=t((()=>"filled"===s?"SKODA Next Icons Filled":"SKODA Next Icons Regular"),[s]);return o(n,Object.assign({color:c,fontSize:m,sx:Object.assign({"&::before":{content:`'${"\\"+u}'`,display:"block",height:"100%",width:"100%"},fontFamily:N,lineHeight:"0.7em"},f||{}),"data-testid":"Icon",className:[r,l].filter(Boolean).join(" ")},d))};export{a as Icon};
 //# sourceMappingURL=icon.js.map

package/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport { Icon as MuiIcon } from '@mui/material';\nimport { iconDefinitions } from './icon.definitions';\n/**\n * @description SkodaFlow Icon component.\n * @param props IconProps\n * @returns React Functional Component\n */\nexport const Icon = (_a) => {\n    var { name, className, iconStyle, color, fontSize, sx } = _a, rest = __rest(_a, [\"name\", \"className\", \"iconStyle\", \"color\", \"fontSize\", \"sx\"]);\n    const content = useMemo(() => {\n        var _a;\n        const definition = iconDefinitions.find((item) => item.name === (name || className) || (item.altName && item.altName === (name || className))) ||\n            // fallback\n            iconDefinitions.find((item) => item.name === 'circle-question');\n        return (_a = definition === null || definition === void 0 ? void 0 : definition.content) !== null && _a !== void 0 ? _a : '';\n    }, [name, className]);\n    const fontFamily = useMemo(() => {\n        if (iconStyle === 'filled') {\n            return 'SKODA Next Icons Filled';\n        }\n        return 'SKODA Next Icons Regular';\n    }, [iconStyle]);\n    return (_jsx(MuiIcon, Object.assign({ color: color, fontSize: fontSize, sx: Object.assign({ '&::before': {\n                content: `'${'\\\\' + content}'`,\n                display: 'block',\n            }, fontFamily, lineHeight: '0.7em' }, (sx || {})), \"data-testid\": \"Icon\", className: name || className }, rest)));\n};\n//# sourceMappingURL=icon.js.map"],"names":["Icon","_a","name","className","iconStyle","color","fontSize","sx","rest","__rest","content","useMemo","definition","iconDefinitions","find","item","altName","fontFamily","_jsx","MuiIcon","Object","assign","display","lineHeight"],"mappings":"oMAUY,MAACA,EAAQC,IACjB,IAAIC,KAAEA,EAAIC,UAAEA,EAASC,UAAEA,EAASC,MAAEA,EAAKC,SAAEA,EAAQC,GAAEA,GAAON,EAAIO,EAAOC,EAAOR,EAAI,CAAC,OAAQ,YAAa,YAAa,QAAS,WAAY,OACxI,MAAMS,EAAUC,GAAQ,KACpB,IAAIV,EACJ,MAAMW,EAAaC,EAAgBC,MAAMC,GAASA,EAAKb,QAAUA,GAAQC,IAAeY,EAAKC,SAAWD,EAAKC,WAAad,GAAQC,MAE9HU,EAAgBC,MAAMC,GAAuB,oBAAdA,EAAKb,OACxC,OAA6F,QAArFD,EAAKW,aAA+C,EAASA,EAAWF,eAA4B,IAAPT,EAAgBA,EAAK,EAAE,GAC7H,CAACC,EAAMC,IACJc,EAAaN,GAAQ,IACL,WAAdP,EACO,0BAEJ,4BACR,CAACA,IACJ,OAAQc,EAAKC,EAASC,OAAOC,OAAO,CAAEhB,MAAOA,EAAOC,SAAUA,EAAUC,GAAIa,OAAOC,OAAO,CAAE,YAAa,CAC7FX,QAAS,IAAI,KAAOA,KACpBY,QAAS,SACVL,aAAYM,WAAY,SAAYhB,GAAM,CAAA,GAAM,cAAe,OAAQJ,UAAWD,GAAQC,GAAaK,GAAQ"}
+{"version":3,"file":"icon.js","sources":["../../../src/components/icon/icon.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport { Icon as MuiIcon } from '@mui/material';\nimport { iconDefinitions } from './icon.definitions';\n/**\n * @description SkodaFlow Icon component.\n * @param props IconProps\n * @returns React Functional Component\n */\nexport const Icon = (_a) => {\n    var { name, className, iconStyle, color, fontSize, sx } = _a, rest = __rest(_a, [\"name\", \"className\", \"iconStyle\", \"color\", \"fontSize\", \"sx\"]);\n    const content = useMemo(() => {\n        var _a;\n        const definition = \n        // try to find by name\n        (name && iconDefinitions.find((item) => item.name === name || (item.altName && item.altName === name))) ||\n            // try to find by className\n            (className &&\n                iconDefinitions.find((item) => className.includes(item.name) || className.includes(item.altName))) ||\n            // fallback\n            iconDefinitions.find((item) => item.name === 'circle-question');\n        return (_a = definition === null || definition === void 0 ? void 0 : definition.content) !== null && _a !== void 0 ? _a : '';\n    }, [name, className]);\n    const fontFamily = useMemo(() => {\n        if (iconStyle === 'filled') {\n            return 'SKODA Next Icons Filled';\n        }\n        return 'SKODA Next Icons Regular';\n    }, [iconStyle]);\n    return (_jsx(MuiIcon, Object.assign({ color: color, fontSize: fontSize, sx: Object.assign({ '&::before': {\n                content: `'${'\\\\' + content}'`,\n                display: 'block',\n                height: '100%',\n                width: '100%',\n            }, fontFamily, lineHeight: '0.7em' }, (sx || {})), \"data-testid\": \"Icon\", className: [className, name].filter(Boolean).join(' ') }, rest)));\n};\n//# sourceMappingURL=icon.js.map"],"names":["Icon","_a","name","className","iconStyle","color","fontSize","sx","rest","__rest","content","useMemo","definition","iconDefinitions","find","item","altName","includes","fontFamily","_jsx","MuiIcon","Object","assign","display","height","width","lineHeight","filter","Boolean","join"],"mappings":"oMAUY,MAACA,EAAQC,IACjB,IAAIC,KAAEA,EAAIC,UAAEA,EAASC,UAAEA,EAASC,MAAEA,EAAKC,SAAEA,EAAQC,GAAEA,GAAON,EAAIO,EAAOC,EAAOR,EAAI,CAAC,OAAQ,YAAa,YAAa,QAAS,WAAY,OACxI,MAAMS,EAAUC,GAAQ,KACpB,IAAIV,EACJ,MAAMW,EAELV,GAAQW,EAAgBC,MAAMC,GAASA,EAAKb,OAASA,GAASa,EAAKC,SAAWD,EAAKC,UAAYd,KAE3FC,GACGU,EAAgBC,MAAMC,GAASZ,EAAUc,SAASF,EAAKb,OAASC,EAAUc,SAASF,EAAKC,YAE5FH,EAAgBC,MAAMC,GAAuB,oBAAdA,EAAKb,OACxC,OAA6F,QAArFD,EAAKW,aAA+C,EAASA,EAAWF,eAA4B,IAAPT,EAAgBA,EAAK,EAAE,GAC7H,CAACC,EAAMC,IACJe,EAAaP,GAAQ,IACL,WAAdP,EACO,0BAEJ,4BACR,CAACA,IACJ,OAAQe,EAAKC,EAASC,OAAOC,OAAO,CAAEjB,MAAOA,EAAOC,SAAUA,EAAUC,GAAIc,OAAOC,OAAO,CAAE,YAAa,CAC7FZ,QAAS,IAAI,KAAOA,KACpBa,QAAS,QACTC,OAAQ,OACRC,MAAO,QACRP,aAAYQ,WAAY,SAAYnB,GAAM,IAAM,cAAe,OAAQJ,UAAW,CAACA,EAAWD,GAAMyB,OAAOC,SAASC,KAAK,MAAQrB,GAAQ"}

package/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './backdrop';
 export * from './button';
 export * from './banner';
+export * from './box';
 export * from './cardContainer';
 export * from './cardMenu';
 export * from './checkbox';

package/components/menu/menu.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as o,Fragment as i}from"react/jsx-runtime";import{forwardRef as r,useState as l,useCallback as n,useEffect as a}from"react";import{styled as p}from"@mui/material/styles";import c from"@mui/material/MenuItem";import m from"@mui/material/MenuList";import g from"@mui/material/Paper";import s from"@mui/material/ListItemText";import u from"@mui/material/ListItemIcon";import{Checkbox as d}from"../checkbox/checkbox.js";import{ToggleSwitch as h}from"../toggleSwitch/toggleSwitch.js";import{Icon as f}from"../icon/icon.js";import"../icon/icon.definitions.js";import x from"@mui/material/Divider";import{Typography as b}from"@mui/material";import{Flag as S}from"../flag/flag.js";const v=r(((r,p)=>{var{setIsOpen:g,reactHook:v,items:M,hasIcon:L,multipleSelection:j,groupToggleSelection:k,groupLabel:y="",toggleLabel:T}=r,O=e(r,["setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel"]);const{state:w,setState:R}=v,[C,W]=l(!1),H=n((()=>{((e,t,o,i)=>{const r=!e;o((()=>r?[...t]:[])),i(r)})(C,M,R,W)}),[M,R,C]),D=n(((e,t)=>{((e,t,o,i,r,l)=>{const n=e?i.includes(o):i.find((e=>e.value.toString()===o)),a=e?[o]:l.filter((e=>e.value.toString()===o));r(t?n?i.filter((t=>e?t!==o:t.value.toString()!==o)):e=>[...a,...e]:n?[]:a)})(t,j,e.currentTarget.id,w,R,M)}),[M,w,j,R]),P=n(((e,i)=>{const r=e?w.includes(i):w.some((e=>e.value===i.value)),l=e?i:i.title,n=e?i:i.value;return t(c,{id:n,selected:r,onClick:t=>D(t,e),children:[L&&!e&&o(u,{children:o(S,{flag:i.flag,title:i.title})}),o(s,{children:o(b,{noWrap:!0,children:l})}),j&&o(d,{checked:r})]},n)}),[w,L,j,D]);return a((()=>{((e,t,o,i,r)=>{e&&t&&(i.length===o.length&&r(!0),i.length<o.length&&r(!1))})(j,k,M,w,W)}),[k,M,w,j]),t(I,Object.assign({},O,{ref:p,groupLabel:y,groupToggleSelection:k,multipleSelection:j.toString(),sx:y||k&&j?{paddingTop:"0px"}:{},children:[y.length>0&&t(i,{children:[t(c,{children:[o(s,{children:o(b,{noWrap:!0,children:y})}),o(u,{onClick:()=>g(!1),children:o(f,{name:"close"})})]}),o(x,{variant:"middle"})]}),j&&k&&o(i,{children:t(c,{className:"menu-select-all",children:[o(s,{children:T||"Select all"}),o(h,{onClick:H,checked:C})]})}),o(m,{children:M.map((e=>P("string"==typeof e,e)))})]}))})),I=p(g,{shouldForwardProp:e=>"multipleSelection"!==e&&"groupLabel"!==e&&"groupToggleSelection"!==e})((t=>{var{theme:o}=t;const i=e(t,["theme"]);let r={};const l={height:"48px",padding:"0px 24px"};return"true"===i.multipleSelection&&(l.paddingRight="16px"),r=Object.assign(Object.assign({},r),{boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)","& .MuiList-root":{maxHeight:"240px",overflow:"overlay",padding:"0px",borderRadius:"4px"},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",color:o.palette.onSurface.os900,fontWeight:"500",paddingRight:"16px"},"& li > .MuiListItemIcon-root":{minWidth:"0px",marginRight:"16px"},"& .MuiDivider-root":{marginTop:"0px",marginBottom:"0px"},"& li.menu-select-all":{"& .MuiTypography-root":{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"},"&:hover":{backgroundColor:o.palette.onSurface.os0}},"& .MuiMenuItem-root":l}),i.groupLabel&&i.groupLabel.length>0?r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px",paddingRight:"21px","& .MuiTypography-root":{fontWeight:"700"},"& .MuiListItemIcon-root":{marginRight:"0px",color:o.palette.onSurface.os900,"& .MuiIcon-root:before":{position:"relative",top:"-3px"}},"&:hover":{backgroundColor:`${o.palette.background.primary}`}}}):i.multipleSelection&&i.groupToggleSelection&&(r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px"}})),r}));export{v as Menu};
+import{__rest as e}from"tslib";import{jsxs as t,jsx as o,Fragment as i}from"react/jsx-runtime";import{forwardRef as r,useState as l,useCallback as n,useEffect as a}from"react";import{styled as p}from"@mui/material/styles";import c from"@mui/material/MenuItem";import m from"@mui/material/MenuList";import g from"@mui/material/Paper";import s from"@mui/material/ListItemText";import u from"@mui/material/ListItemIcon";import{Checkbox as d}from"../checkbox/checkbox.js";import{ToggleSwitch as h}from"../toggleSwitch/toggleSwitch.js";import{Icon as f}from"../icon/icon.js";import"../icon/icon.definitions.js";import x from"@mui/material/Divider";import{Typography as b}from"@mui/material";import{Flag as S}from"../flag/flag.js";const v=r(((r,p)=>{var{setIsOpen:g,reactHook:v,items:I,hasIcon:L,multipleSelection:j,groupToggleSelection:k,groupLabel:y="",toggleLabel:T}=r,O=e(r,["setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel"]);const{state:w,setState:R}=v,[C,W]=l(!1),H=n((()=>{((e,t,o,i)=>{const r=!e;o((()=>r?[...t]:[])),i(r)})(C,I,R,W)}),[I,R,C]),D=n(((e,t)=>{((e,t,o,i,r,l)=>{const n=e?i.includes(o):i.find((e=>e.value.toString()===o)),a=e?[o]:l.filter((e=>e.value.toString()===o));r(t?n?i.filter((t=>e?t!==o:t.value.toString()!==o)):e=>[...a,...e]:n?[]:a)})(t,j,e.currentTarget.id,w,R,I)}),[I,w,j,R]),F=n(((e,i)=>{const r=e?w.includes(i):w.some((e=>e.value===i.value)),l=e?i:i.title,n=e?i:i.value;return t(c,{id:n,selected:r,onClick:t=>D(t,e),children:[L&&!e&&o(u,{children:o(S,{flag:i.flag,title:i.title})}),o(s,{children:o(b,{noWrap:!0,children:l})}),j&&o(d,{checked:r})]},n)}),[w,L,j,D]);return a((()=>{((e,t,o,i,r)=>{e&&t&&(i.length===o.length&&r(!0),i.length<o.length&&r(!1))})(j,k,I,w,W)}),[k,I,w,j]),t(M,Object.assign({},O,{ref:p,groupLabel:y,groupToggleSelection:k,multipleSelection:j.toString(),sx:y||k&&j?{paddingTop:"0px"}:{},children:[y.length>0&&t(i,{children:[t(c,{children:[o(s,{children:o(b,{noWrap:!0,children:y})}),o(u,{onClick:()=>g(!1),children:o(f,{name:"close"})})]}),o(x,{variant:"middle"})]}),j&&k&&o(i,{children:t(c,{className:"menu-select-all",children:[o(s,{children:T||"Select all"}),o(h,{onClick:H,checked:C})]})}),o(m,{children:I.map((e=>F("string"==typeof e,e)))})]}))})),M=p(g,{shouldForwardProp:e=>"multipleSelection"!==e&&"groupLabel"!==e&&"groupToggleSelection"!==e})((t=>{var{theme:o}=t;const i=e(t,["theme"]);let r={};const l={height:"48px",padding:"0px 24px"};return"true"===i.multipleSelection&&(l.paddingRight="16px"),r=Object.assign(Object.assign({},r),{boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)","& .MuiList-root":{maxHeight:"240px",overflow:"overlay",padding:"0px",borderRadius:"4px"},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",color:o.palette.onSurface.os900,fontWeight:"500",paddingRight:0},"& li > .MuiListItemIcon-root":{minWidth:"0px",marginRight:"16px"},"& .MuiDivider-root":{marginTop:"0px",marginBottom:"0px"},"& li.menu-select-all":{"& .MuiTypography-root":{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"},"&:hover":{backgroundColor:o.palette.onSurface.os0}},"& .MuiMenuItem-root":l,"& .MuiFormControlLabel-root":{marginLeft:"16px",marginRight:0}}),i.groupLabel&&i.groupLabel.length>0?r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px",paddingRight:"21px","& .MuiTypography-root":{fontWeight:"700"},"& .MuiListItemIcon-root":{marginRight:"0px",color:o.palette.onSurface.os900,"& .MuiIcon-root:before":{position:"relative",top:"-3px"}},"&:hover":{backgroundColor:`${o.palette.background.primary}`}}}):i.multipleSelection&&i.groupToggleSelection&&(r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px"}})),r}));export{v as Menu};
 //# sourceMappingURL=menu.js.map

package/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport MenuList from '@mui/material/MenuList';\nimport MuiPaper from '@mui/material/Paper';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport { Checkbox } from '../checkbox';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { Icon } from '../icon';\nimport Divider from '@mui/material/Divider';\nimport { Typography } from '@mui/material';\nimport { Flag } from '../flag';\n/**\n * @description SkodaFlow Menu component.\n * Properties are inherited from HTML Div element.\n * @param props PaperProps\n * @returns React Functional Component\n */\n/**\n * @function onToggleClickHandler\n * @description Set itemsstate and toggle checked on toggle click.\n */\nconst onToggleClickHandler = (currToggleChecked, initItems, setItems, setToggle) => {\n    const expectedFutureToggleCheckedState = !currToggleChecked;\n    setItems(() => (expectedFutureToggleCheckedState ? [...initItems] : []));\n    setToggle(expectedFutureToggleCheckedState);\n};\n/**\n * @function onMenuItemClickHandler\n * @description Set itemsstate on menu item click.\n */\nconst onMenuItemClickHandler = (isString, multipleSelection, id, itemsState, setItemsState, initItems) => {\n    const itemExist = isString ? itemsState.includes(id) : itemsState.find((item) => item.value.toString() === id);\n    const newItem = isString\n        ? [id]\n        : initItems.filter((item) => item.value.toString() === id);\n    //if the menu is not multiple selection\n    if (!multipleSelection) {\n        //if the item is already selected (itemExist === true): return an empty array (deselect item)\n        //else return the new item selected (object or string depending on the array of items passed)\n        if (itemExist) {\n            setItemsState([]);\n        }\n        else {\n            setItemsState(newItem);\n        }\n    }\n    //if the menu is multiple selection\n    else {\n        if (itemExist) {\n            const listWithoutItem = itemsState.filter((item) => (isString ? item !== id : item.value.toString() !== id));\n            setItemsState(listWithoutItem);\n        }\n        else {\n            setItemsState((prevArr) => [...newItem, ...prevArr]);\n        }\n    }\n};\n/**\n * @function setToggle\n * @description Set toggle based on menu items change.\n */\nconst setToggle = (multipleSelection, groupToggleSelection, initItems, itemsState, setToggleChecked) => {\n    if (multipleSelection && groupToggleSelection) {\n        if (itemsState.length === initItems.length)\n            setToggleChecked(true);\n        if (itemsState.length < initItems.length)\n            setToggleChecked(false);\n    }\n};\nexport const Menu = forwardRef((_a, ref) => {\n    var { setIsOpen, reactHook, items, hasIcon, multipleSelection, groupToggleSelection, groupLabel = '', toggleLabel } = _a, props = __rest(_a, [\"setIsOpen\", \"reactHook\", \"items\", \"hasIcon\", \"multipleSelection\", \"groupToggleSelection\", \"groupLabel\", \"toggleLabel\"]);\n    const { state: itemsState, setState: setItemsState } = reactHook;\n    const [toggleChecked, setToggleChecked] = useState(false);\n    const onToggleClickHandlerWithUseCallback = useCallback(() => {\n        onToggleClickHandler(toggleChecked, items, setItemsState, setToggleChecked);\n    }, [items, setItemsState, toggleChecked]);\n    //callback fired when an item in the menu list is clicked\n    const onMenuItemClickHandlerWithUseCallback = useCallback((e, isString) => {\n        onMenuItemClickHandler(isString, multipleSelection, e.currentTarget.id, itemsState, setItemsState, items);\n    }, [items, itemsState, multipleSelection, setItemsState]);\n    //Return the menuItem depending on the type of the item (string or MenuItemObject)\n    const handleTypeItem = useCallback((isString, item) => {\n        const selected = isString\n            ? itemsState.includes(item)\n            : itemsState.some((itemState) => itemState.value === item.value);\n        const title = isString ? item : item.title;\n        const id = isString ? item : item.value;\n        return (_jsxs(MenuItem, { id: id, selected: selected, onClick: (e) => onMenuItemClickHandlerWithUseCallback(e, isString), children: [hasIcon && !isString && (_jsx(ListItemIcon, { children: _jsx(Flag, { flag: item.flag, title: item.title }) })), _jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: title }) }), multipleSelection && _jsx(Checkbox, { checked: selected })] }, id));\n    }, [itemsState, hasIcon, multipleSelection, onMenuItemClickHandlerWithUseCallback]);\n    useEffect(() => {\n        setToggle(multipleSelection, groupToggleSelection, items, itemsState, setToggleChecked);\n    }, [groupToggleSelection, items, itemsState, multipleSelection]);\n    return (_jsxs(PaperStyled, Object.assign({}, props, { ref: ref, groupLabel: groupLabel, groupToggleSelection: groupToggleSelection, multipleSelection: multipleSelection.toString(), sx: groupLabel || (groupToggleSelection && multipleSelection) ? { paddingTop: '0px' } : {}, children: [groupLabel.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { children: [_jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: groupLabel }) }), _jsx(ListItemIcon, { onClick: () => setIsOpen(false), children: _jsx(Icon, { name: \"close\" }) })] }), _jsx(Divider, { variant: \"middle\" })] })), multipleSelection && groupToggleSelection && (_jsx(_Fragment, { children: _jsxs(MenuItem, { className: \"menu-select-all\", children: [_jsx(ListItemText, { children: toggleLabel ? toggleLabel : 'Select all' }), _jsx(ToggleSwitch, { onClick: onToggleClickHandlerWithUseCallback, checked: toggleChecked })] }) })), _jsx(MenuList, { children: items.map((item) => {\n                    const isString = typeof item === 'string';\n                    return handleTypeItem(isString, item);\n                }) })] })));\n});\n/**\n * @description Menu styling defintion based on props\n */\nconst PaperStyled = styled(MuiPaper, {\n    shouldForwardProp: (prop) => prop !== 'multipleSelection' && prop !== 'groupLabel' && prop !== 'groupToggleSelection',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    let styles = {};\n    const hasmultipleSelection = props.multipleSelection === 'true';\n    const itemStyles = {\n        height: '48px',\n        padding: '0px 24px',\n    };\n    if (hasmultipleSelection)\n        itemStyles.paddingRight = '16px';\n    styles = Object.assign(Object.assign({}, styles), { boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)', '& .MuiList-root': {\n            maxHeight: '240px',\n            overflow: 'overlay',\n            padding: '0px',\n            borderRadius: '4px',\n        }, '& .MuiTypography-root': {\n            fontSize: '16px',\n            lineHeight: '24px',\n            color: theme.palette.onSurface.os900,\n            fontWeight: '500',\n            paddingRight: '16px',\n        }, '& li > .MuiListItemIcon-root': {\n            minWidth: '0px',\n            marginRight: '16px',\n        }, '& .MuiDivider-root': {\n            marginTop: '0px',\n            marginBottom: '0px',\n        }, '& li.menu-select-all': {\n            '& .MuiTypography-root': {\n                textOverflow: 'ellipsis',\n                overflow: 'hidden',\n                whiteSpace: 'nowrap',\n            },\n            '&:hover': {\n                backgroundColor: theme.palette.onSurface.os0,\n            },\n        }, '& .MuiMenuItem-root': itemStyles });\n    if (props.groupLabel && props.groupLabel.length > 0) {\n        styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n                borderRadius: '4px',\n                paddingRight: '21px',\n                '& .MuiTypography-root': {\n                    fontWeight: '700',\n                },\n                '& .MuiListItemIcon-root': {\n                    marginRight: '0px',\n                    color: theme.palette.onSurface.os900,\n                    '& .MuiIcon-root:before': {\n                        position: 'relative',\n                        top: '-3px',\n                    },\n                },\n                '&:hover': {\n                    backgroundColor: `${theme.palette.background.primary}`,\n                },\n            } });\n    }\n    else if (props.multipleSelection && props.groupToggleSelection) {\n        styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n                borderRadius: '4px',\n            } });\n    }\n    return styles;\n});\n//# sourceMappingURL=menu.js.map"],"names":["Menu","forwardRef","_a","ref","setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel","props","__rest","state","itemsState","setState","setItemsState","toggleChecked","setToggleChecked","useState","onToggleClickHandlerWithUseCallback","useCallback","currToggleChecked","initItems","setItems","setToggle","expectedFutureToggleCheckedState","onToggleClickHandler","onMenuItemClickHandlerWithUseCallback","e","isString","id","itemExist","includes","find","item","value","toString","newItem","filter","prevArr","onMenuItemClickHandler","currentTarget","handleTypeItem","selected","some","itemState","title","_jsxs","MenuItem","onClick","children","_jsx","ListItemIcon","Flag","flag","ListItemText","Typography","noWrap","Checkbox","checked","useEffect","length","PaperStyled","Object","assign","sx","paddingTop","_Fragment","Icon","name","Divider","variant","className","ToggleSwitch","MenuList","map","styled","MuiPaper","shouldForwardProp","prop","theme","styles","itemStyles","height","padding","paddingRight","boxShadow","maxHeight","overflow","borderRadius","fontSize","lineHeight","color","palette","onSurface","os900","fontWeight","minWidth","marginRight","marginTop","marginBottom","textOverflow","whiteSpace","backgroundColor","os0","position","top","background","primary"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport MenuList from '@mui/material/MenuList';\nimport MuiPaper from '@mui/material/Paper';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport { Checkbox } from '../checkbox';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { Icon } from '../icon';\nimport Divider from '@mui/material/Divider';\nimport { Typography } from '@mui/material';\nimport { Flag } from '../flag';\n/**\n * @description SkodaFlow Menu component.\n * Properties are inherited from HTML Div element.\n * @param props PaperProps\n * @returns React Functional Component\n */\n/**\n * @function onToggleClickHandler\n * @description Set itemsstate and toggle checked on toggle click.\n */\nconst onToggleClickHandler = (currToggleChecked, initItems, setItems, setToggle) => {\n    const expectedFutureToggleCheckedState = !currToggleChecked;\n    setItems(() => (expectedFutureToggleCheckedState ? [...initItems] : []));\n    setToggle(expectedFutureToggleCheckedState);\n};\n/**\n * @function onMenuItemClickHandler\n * @description Set itemsstate on menu item click.\n */\nconst onMenuItemClickHandler = (isString, multipleSelection, id, itemsState, setItemsState, initItems) => {\n    const itemExist = isString ? itemsState.includes(id) : itemsState.find((item) => item.value.toString() === id);\n    const newItem = isString\n        ? [id]\n        : initItems.filter((item) => item.value.toString() === id);\n    //if the menu is not multiple selection\n    if (!multipleSelection) {\n        //if the item is already selected (itemExist === true): return an empty array (deselect item)\n        //else return the new item selected (object or string depending on the array of items passed)\n        if (itemExist) {\n            setItemsState([]);\n        }\n        else {\n            setItemsState(newItem);\n        }\n    }\n    //if the menu is multiple selection\n    else {\n        if (itemExist) {\n            const listWithoutItem = itemsState.filter((item) => (isString ? item !== id : item.value.toString() !== id));\n            setItemsState(listWithoutItem);\n        }\n        else {\n            setItemsState((prevArr) => [...newItem, ...prevArr]);\n        }\n    }\n};\n/**\n * @function setToggle\n * @description Set toggle based on menu items change.\n */\nconst setToggle = (multipleSelection, groupToggleSelection, initItems, itemsState, setToggleChecked) => {\n    if (multipleSelection && groupToggleSelection) {\n        if (itemsState.length === initItems.length)\n            setToggleChecked(true);\n        if (itemsState.length < initItems.length)\n            setToggleChecked(false);\n    }\n};\nexport const Menu = forwardRef((_a, ref) => {\n    var { setIsOpen, reactHook, items, hasIcon, multipleSelection, groupToggleSelection, groupLabel = '', toggleLabel } = _a, props = __rest(_a, [\"setIsOpen\", \"reactHook\", \"items\", \"hasIcon\", \"multipleSelection\", \"groupToggleSelection\", \"groupLabel\", \"toggleLabel\"]);\n    const { state: itemsState, setState: setItemsState } = reactHook;\n    const [toggleChecked, setToggleChecked] = useState(false);\n    const onToggleClickHandlerWithUseCallback = useCallback(() => {\n        onToggleClickHandler(toggleChecked, items, setItemsState, setToggleChecked);\n    }, [items, setItemsState, toggleChecked]);\n    //callback fired when an item in the menu list is clicked\n    const onMenuItemClickHandlerWithUseCallback = useCallback((e, isString) => {\n        onMenuItemClickHandler(isString, multipleSelection, e.currentTarget.id, itemsState, setItemsState, items);\n    }, [items, itemsState, multipleSelection, setItemsState]);\n    //Return the menuItem depending on the type of the item (string or MenuItemObject)\n    const handleTypeItem = useCallback((isString, item) => {\n        const selected = isString\n            ? itemsState.includes(item)\n            : itemsState.some((itemState) => itemState.value === item.value);\n        const title = isString ? item : item.title;\n        const id = isString ? item : item.value;\n        return (_jsxs(MenuItem, { id: id, selected: selected, onClick: (e) => onMenuItemClickHandlerWithUseCallback(e, isString), children: [hasIcon && !isString && (_jsx(ListItemIcon, { children: _jsx(Flag, { flag: item.flag, title: item.title }) })), _jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: title }) }), multipleSelection && _jsx(Checkbox, { checked: selected })] }, id));\n    }, [itemsState, hasIcon, multipleSelection, onMenuItemClickHandlerWithUseCallback]);\n    useEffect(() => {\n        setToggle(multipleSelection, groupToggleSelection, items, itemsState, setToggleChecked);\n    }, [groupToggleSelection, items, itemsState, multipleSelection]);\n    return (_jsxs(PaperStyled, Object.assign({}, props, { ref: ref, groupLabel: groupLabel, groupToggleSelection: groupToggleSelection, multipleSelection: multipleSelection.toString(), sx: groupLabel || (groupToggleSelection && multipleSelection) ? { paddingTop: '0px' } : {}, children: [groupLabel.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { children: [_jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: groupLabel }) }), _jsx(ListItemIcon, { onClick: () => setIsOpen(false), children: _jsx(Icon, { name: \"close\" }) })] }), _jsx(Divider, { variant: \"middle\" })] })), multipleSelection && groupToggleSelection && (_jsx(_Fragment, { children: _jsxs(MenuItem, { className: \"menu-select-all\", children: [_jsx(ListItemText, { children: toggleLabel ? toggleLabel : 'Select all' }), _jsx(ToggleSwitch, { onClick: onToggleClickHandlerWithUseCallback, checked: toggleChecked })] }) })), _jsx(MenuList, { children: items.map((item) => {\n                    const isString = typeof item === 'string';\n                    return handleTypeItem(isString, item);\n                }) })] })));\n});\n/**\n * @description Menu styling defintion based on props\n */\nconst PaperStyled = styled(MuiPaper, {\n    shouldForwardProp: (prop) => prop !== 'multipleSelection' && prop !== 'groupLabel' && prop !== 'groupToggleSelection',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    let styles = {};\n    const hasmultipleSelection = props.multipleSelection === 'true';\n    const itemStyles = {\n        height: '48px',\n        padding: '0px 24px',\n    };\n    if (hasmultipleSelection)\n        itemStyles.paddingRight = '16px';\n    styles = Object.assign(Object.assign({}, styles), { boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)', '& .MuiList-root': {\n            maxHeight: '240px',\n            overflow: 'overlay',\n            padding: '0px',\n            borderRadius: '4px',\n        }, '& .MuiTypography-root': {\n            fontSize: '16px',\n            lineHeight: '24px',\n            color: theme.palette.onSurface.os900,\n            fontWeight: '500',\n            paddingRight: 0,\n        }, '& li > .MuiListItemIcon-root': {\n            minWidth: '0px',\n            marginRight: '16px',\n        }, '& .MuiDivider-root': {\n            marginTop: '0px',\n            marginBottom: '0px',\n        }, '& li.menu-select-all': {\n            '& .MuiTypography-root': {\n                textOverflow: 'ellipsis',\n                overflow: 'hidden',\n                whiteSpace: 'nowrap',\n            },\n            '&:hover': {\n                backgroundColor: theme.palette.onSurface.os0,\n            },\n        }, '& .MuiMenuItem-root': itemStyles, '& .MuiFormControlLabel-root': {\n            marginLeft: '16px',\n            marginRight: 0,\n        } });\n    if (props.groupLabel && props.groupLabel.length > 0) {\n        styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n                borderRadius: '4px',\n                paddingRight: '21px',\n                '& .MuiTypography-root': {\n                    fontWeight: '700',\n                },\n                '& .MuiListItemIcon-root': {\n                    marginRight: '0px',\n                    color: theme.palette.onSurface.os900,\n                    '& .MuiIcon-root:before': {\n                        position: 'relative',\n                        top: '-3px',\n                    },\n                },\n                '&:hover': {\n                    backgroundColor: `${theme.palette.background.primary}`,\n                },\n            } });\n    }\n    else if (props.multipleSelection && props.groupToggleSelection) {\n        styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n                borderRadius: '4px',\n            } });\n    }\n    return styles;\n});\n//# sourceMappingURL=menu.js.map"],"names":["Menu","forwardRef","_a","ref","setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel","props","__rest","state","itemsState","setState","setItemsState","toggleChecked","setToggleChecked","useState","onToggleClickHandlerWithUseCallback","useCallback","currToggleChecked","initItems","setItems","setToggle","expectedFutureToggleCheckedState","onToggleClickHandler","onMenuItemClickHandlerWithUseCallback","e","isString","id","itemExist","includes","find","item","value","toString","newItem","filter","prevArr","onMenuItemClickHandler","currentTarget","handleTypeItem","selected","some","itemState","title","_jsxs","MenuItem","onClick","children","_jsx","ListItemIcon","Flag","flag","ListItemText","Typography","noWrap","Checkbox","checked","useEffect","length","PaperStyled","Object","assign","sx","paddingTop","_Fragment","Icon","name","Divider","variant","className","ToggleSwitch","MenuList","map","styled","MuiPaper","shouldForwardProp","prop","theme","styles","itemStyles","height","padding","paddingRight","boxShadow","maxHeight","overflow","borderRadius","fontSize","lineHeight","color","palette","onSurface","os900","fontWeight","minWidth","marginRight","marginTop","marginBottom","textOverflow","whiteSpace","backgroundColor","os0","marginLeft","position","top","background","primary"],"mappings":"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"}

package/components/modal/modal.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{forwardRef as i,useState as n,useEffect as e,useCallback as d}from"react";import{styled as l}from"@mui/material/styles";import r from"@mui/material/Modal";import{Button as s}from"../button/button.js";import{Icon as c}from"../icon/icon.js";import"../icon/icon.definitions.js";import{ContentDiv as m}from"./contentDiv.js";import{useTheme as p}from"@mui/material";const u=i(((i,l)=>{var{children:r,open:u,handleClose:b,onClickTopButton:h,onClickBottomButton:f,ariaLabelledby:g,ariaDescribedBy:B,firstButton:v,secondButton:C,hasCloseButton:k,size:w,firstButtonVariant:W,secondButtonVariant:F,secondButtonVisible:y,defaultButtonSection:M=!0,maxWidth:T,modalLoadedCallback:z,disableAutoFocus:j,disableEnforceFocus:V}=i,L=t(i,["children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus"]);const[O,D]=n(!1),[S,A]=n(!1),E=p();e((()=>{const t=window.matchMedia(`(min-width: ${E.breakpoints.values.md}px)`);A(t.matches)}),[E.breakpoints.values.md]);const H=d((()=>{if(S&&"large"===(w||"large"))return!1}),[S,w]);return o(x,Object.assign({},L,{ref:l,open:u,size:w,onClose:b,isOverFlowing:O,"aria-labelledby":g,"aria-describedby":B,compactButtons:H(),maxWidth:T,"data-testid":"Modal",disableEnforceFocus:V,disableAutoFocus:j,children:a("div",{className:"modal-container","data-testid":"Modal.container",children:[k&&o("button",{onClick:b,"data-testid":"Modal.close",children:o(c,{name:"close",fontSize:"medium"})}),o(m,{setIsOverFlowing:D,className:"modal-container--content",modalLoadedCallback:z,"data-testid":"Modal.content",children:r}),M&&a("div",{className:"modal-container--action-buttons","data-testid":"Modal.buttons",children:[o(s,{label:v,onClick:h,fullWidth:!0,variant:W,compact:H(),"data-testid":"Modal.button1","data-variant":W}),y&&o(s,{label:C,onClick:f,fullWidth:!0,variant:F,compact:H(),"data-testid":"Modal.button2","data-variant":F})]})]})}))})),x=l(r,{shouldForwardProp:t=>"compactButtons"!==t&&"isOverFlowing"!==t&&"maxWidth"!==t})((o=>{var{theme:a}=o,i=t(o,["theme"]);const n=i.compactButtons?"16px":"24px",e=i.maxWidth?i.maxWidth:"calc(100% - 40px)",d="large"===(i.size||"large"),l=i.size&&"full-width"===i.size,r=d?{maxWidth:"624px",marginTop:"40px",padding:"40px"}:l?{maxWidth:e,marginTop:"40px",padding:"40px"}:{maxWidth:"408px",marginTop:"48px",padding:"24px 40px 40px 40px"};return{"& .modal-container":{maxHeight:"calc(100vh - 64px)",minHeight:"300px",display:"flex",flexDirection:"column","&--content":{overflowX:"hidden",overflowY:"overlay",marginTop:"48px",padding:"0px 24px"},"&--action-buttons":{padding:"32px 24px",paddingBottom:n,boxShadow:i.isOverFlowing?"0px 0px 32px rgba(0, 0, 0, 0.15)":null,"div:first-of-type":{marginBottom:"15px"}}},[a.breakpoints.up("md")]:{"& .modal-container":{maxHeight:"calc(100vh - 160px)",margin:"0px",width:"100%",maxWidth:r.maxWidth,"&--content":{marginTop:r.marginTop,padding:"0px 40px"},"&--action-buttons":{padding:r.padding,paddingBottom:n}}}}}));export{u as Modal};
+import{__rest as t}from"tslib";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{forwardRef as i,useState as n,useEffect as e,useCallback as d}from"react";import{styled as l}from"@mui/material/styles";import r from"@mui/material/Modal";import{Button as s}from"../button/button.js";import{Icon as c}from"../icon/icon.js";import"../icon/icon.definitions.js";import{ContentDiv as m}from"./contentDiv.js";import{useTheme as p}from"@mui/material";const u=i(((i,l)=>{var{children:r,open:u,handleClose:b,onClickTopButton:h,onClickBottomButton:f,ariaLabelledby:g,ariaDescribedBy:B,firstButton:v,secondButton:C,hasCloseButton:k,size:w,firstButtonVariant:W,secondButtonVariant:F,secondButtonVisible:y,defaultButtonSection:M=!0,maxWidth:T,modalLoadedCallback:z,disableAutoFocus:j,disableEnforceFocus:V}=i,L=t(i,["children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus"]);const[O,D]=n(!1),[S,A]=n(!1),E=p();e((()=>{const t=window.matchMedia(`(min-width: ${E.breakpoints.values.md}px)`);A(t.matches)}),[E.breakpoints.values.md]);const H=d((()=>{if(S&&"large"===(w||"large"))return!1}),[S,w]);return o(x,Object.assign({},L,{ref:l,open:u,size:w,onClose:b,isOverFlowing:O,"aria-labelledby":g,"aria-describedby":B,compactButtons:H(),maxWidth:T,"data-testid":"Modal",disableEnforceFocus:V,disableAutoFocus:j,dir:E.direction,children:a("div",{className:"modal-container","data-testid":"Modal.container",children:[k&&o("button",{onClick:b,"data-testid":"Modal.close",children:o(c,{name:"close",fontSize:"medium"})}),o(m,{setIsOverFlowing:D,className:"modal-container--content",modalLoadedCallback:z,"data-testid":"Modal.content",children:r}),M&&a("div",{className:"modal-container--action-buttons","data-testid":"Modal.buttons",children:[o(s,{label:v,onClick:h,fullWidth:!0,variant:W,compact:H(),"data-testid":"Modal.button1","data-variant":W}),y&&o(s,{label:C,onClick:f,fullWidth:!0,variant:F,compact:H(),"data-testid":"Modal.button2","data-variant":F})]})]})}))})),x=l(r,{shouldForwardProp:t=>"compactButtons"!==t&&"isOverFlowing"!==t&&"maxWidth"!==t})((o=>{var{theme:a}=o,i=t(o,["theme"]);const n=i.compactButtons?"16px":"24px",e=i.maxWidth?i.maxWidth:"calc(100% - 40px)",d="large"===(i.size||"large"),l=i.size&&"full-width"===i.size,r=d?{maxWidth:"624px",marginTop:"40px",padding:"40px"}:l?{maxWidth:e,marginTop:"40px",padding:"40px"}:{maxWidth:"408px",marginTop:"48px",padding:"24px 40px 40px 40px"};return{"& .modal-container":{maxHeight:"calc(100vh - 64px)",minHeight:"300px",display:"flex",flexDirection:"column","&--content":{overflowX:"hidden",overflowY:"auto",marginTop:"48px",padding:"0px 24px"},"&--action-buttons":{padding:"32px 24px",paddingBottom:n,boxShadow:i.isOverFlowing?"0px 0px 32px rgba(0, 0, 0, 0.15)":null,"div:first-of-type":{marginBottom:"15px"}}},[a.breakpoints.up("md")]:{"& .modal-container":{maxHeight:"calc(100vh - 160px)",margin:"0px",width:"100%",maxWidth:r.maxWidth,"&--content":{marginTop:r.marginTop,padding:"0px 40px"},"&--action-buttons":{padding:r.padding,paddingBottom:n}}}}}));export{u as Modal};
 //# sourceMappingURL=modal.js.map

package/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useState, forwardRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MuiModal from '@mui/material/Modal';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ContentDiv } from './contentDiv';\nimport { useTheme } from '@mui/material';\n/**\n * @description Styled SkodaFlow Modal component\n * @param props ModalProps\n * @returns React Functional Component\n */\nexport const Modal = forwardRef((_a, ref) => {\n    var { children, open, handleClose, onClickTopButton, onClickBottomButton, ariaLabelledby, ariaDescribedBy, firstButton, secondButton, hasCloseButton, size, firstButtonVariant, secondButtonVariant, secondButtonVisible, defaultButtonSection = true, maxWidth, modalLoadedCallback, disableAutoFocus, disableEnforceFocus } = _a, props = __rest(_a, [\"children\", \"open\", \"handleClose\", \"onClickTopButton\", \"onClickBottomButton\", \"ariaLabelledby\", \"ariaDescribedBy\", \"firstButton\", \"secondButton\", \"hasCloseButton\", \"size\", \"firstButtonVariant\", \"secondButtonVariant\", \"secondButtonVisible\", \"defaultButtonSection\", \"maxWidth\", \"modalLoadedCallback\", \"disableAutoFocus\", \"disableEnforceFocus\"]);\n    const [isOverFlowing, setIsOverFlowing] = useState(false);\n    const [desktopView, setDesktopView] = useState(false);\n    const theme = useTheme();\n    useEffect(() => {\n        const mq = window.matchMedia(`(min-width: ${theme.breakpoints.values.md}px)`);\n        setDesktopView(mq.matches);\n    }, [theme.breakpoints.values.md]);\n    const isCompactButton = useCallback(() => {\n        const isModalLarge = (size || 'large') === 'large';\n        if (desktopView && isModalLarge)\n            return false;\n    }, [desktopView, size]);\n    return (_jsx(ModalStyled, Object.assign({}, props, { ref: ref, open: open, size: size, onClose: handleClose, isOverFlowing: isOverFlowing, \"aria-labelledby\": ariaLabelledby, \"aria-describedby\": ariaDescribedBy, compactButtons: isCompactButton(), maxWidth: maxWidth, \"data-testid\": \"Modal\", disableEnforceFocus: disableEnforceFocus, disableAutoFocus: disableAutoFocus, children: _jsxs(\"div\", { className: \"modal-container\", \"data-testid\": \"Modal.container\", children: [hasCloseButton && (_jsx(\"button\", { onClick: handleClose, \"data-testid\": \"Modal.close\", children: _jsx(Icon, { name: \"close\", fontSize: \"medium\" }) })), _jsx(ContentDiv, { setIsOverFlowing: setIsOverFlowing, className: \"modal-container--content\", modalLoadedCallback: modalLoadedCallback, \"data-testid\": \"Modal.content\", children: children }), defaultButtonSection && (_jsxs(\"div\", { className: \"modal-container--action-buttons\", \"data-testid\": \"Modal.buttons\", children: [_jsx(Button, { label: firstButton, onClick: onClickTopButton, fullWidth: true, variant: firstButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button1\", \"data-variant\": firstButtonVariant }), secondButtonVisible && (_jsx(Button, { label: secondButton, onClick: onClickBottomButton, fullWidth: true, variant: secondButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button2\", \"data-variant\": secondButtonVariant }))] }))] }) })));\n});\n/**\n * @description Modal styling definition\n */\nconst ModalStyled = styled(MuiModal, {\n    shouldForwardProp: (prop) => prop !== 'compactButtons' && prop !== 'isOverFlowing' && prop !== 'maxWidth',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const bottomButtonPadding = args.compactButtons ? '16px' : '24px';\n    const smallModalWidth = '408px';\n    const largeModalWidth = '624px';\n    const fullWidthModal = args.maxWidth ? args.maxWidth : 'calc(100% - 40px)';\n    const isModalLarge = (args.size || 'large') === 'large';\n    const isModalFullWidth = args.size && args.size === 'full-width';\n    const sizeBasedStyles = isModalLarge\n        ? { maxWidth: largeModalWidth, marginTop: '40px', padding: '40px' }\n        : isModalFullWidth\n            ? { maxWidth: fullWidthModal, marginTop: '40px', padding: '40px' }\n            : {\n                maxWidth: smallModalWidth,\n                marginTop: '48px',\n                padding: '24px 40px 40px 40px',\n            };\n    return {\n        '& .modal-container': {\n            maxHeight: 'calc(100vh - 64px)',\n            minHeight: '300px',\n            display: 'flex',\n            flexDirection: 'column',\n            '&--content': {\n                overflowX: 'hidden',\n                overflowY: 'overlay',\n                marginTop: '48px',\n                padding: '0px 24px',\n            },\n            '&--action-buttons': {\n                padding: '32px 24px',\n                paddingBottom: bottomButtonPadding,\n                boxShadow: args.isOverFlowing ? '0px 0px 32px rgba(0, 0, 0, 0.15)' : null,\n                'div:first-of-type': {\n                    marginBottom: '15px',\n                },\n            },\n        },\n        [theme.breakpoints.up('md')]: {\n            '& .modal-container': {\n                maxHeight: 'calc(100vh - 160px)',\n                margin: '0px',\n                width: '100%',\n                maxWidth: sizeBasedStyles.maxWidth,\n                '&--content': {\n                    marginTop: sizeBasedStyles.marginTop,\n                    padding: '0px 40px',\n                },\n                '&--action-buttons': {\n                    padding: sizeBasedStyles.padding,\n                    paddingBottom: bottomButtonPadding,\n                },\n            },\n        },\n    };\n});\n//# sourceMappingURL=modal.js.map"],"names":["Modal","forwardRef","_a","ref","children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus","props","__rest","isOverFlowing","setIsOverFlowing","useState","desktopView","setDesktopView","theme","useTheme","useEffect","mq","window","matchMedia","breakpoints","values","md","matches","isCompactButton","useCallback","_jsx","ModalStyled","Object","assign","onClose","compactButtons","_jsxs","className","onClick","Icon","name","fontSize","ContentDiv","Button","label","fullWidth","variant","compact","styled","MuiModal","shouldForwardProp","prop","args","bottomButtonPadding","fullWidthModal","isModalLarge","isModalFullWidth","sizeBasedStyles","marginTop","padding","maxHeight","minHeight","display","flexDirection","overflowX","overflowY","paddingBottom","boxShadow","marginBottom","up","margin","width"],"mappings":"icAcY,MAACA,EAAQC,GAAW,CAACC,EAAIC,KACjC,IAAIC,SAAEA,EAAQC,KAAEA,EAAIC,YAAEA,EAAWC,iBAAEA,EAAgBC,oBAAEA,EAAmBC,eAAEA,EAAcC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,eAAEA,EAAcC,KAAEA,EAAIC,mBAAEA,EAAkBC,oBAAEA,EAAmBC,oBAAEA,EAAmBC,qBAAEA,GAAuB,EAAIC,SAAEA,EAAQC,oBAAEA,EAAmBC,iBAAEA,EAAgBC,oBAAEA,GAAwBpB,EAAIqB,EAAQC,EAAOtB,EAAI,CAAC,WAAY,OAAQ,cAAe,mBAAoB,sBAAuB,iBAAkB,kBAAmB,cAAe,eAAgB,iBAAkB,OAAQ,qBAAsB,sBAAuB,sBAAuB,uBAAwB,WAAY,sBAAuB,mBAAoB,wBACvpB,MAAOuB,EAAeC,GAAoBC,GAAS,IAC5CC,EAAaC,GAAkBF,GAAS,GACzCG,EAAQC,IACdC,GAAU,KACN,MAAMC,EAAKC,OAAOC,WAAW,eAAeL,EAAMM,YAAYC,OAAOC,SACrET,EAAeI,EAAGM,QAAQ,GAC3B,CAACT,EAAMM,YAAYC,OAAOC,KAC7B,MAAME,EAAkBC,GAAY,KAEhC,GAAIb,GADuC,WAArBd,GAAQ,SAE1B,OAAO,CAAK,GACjB,CAACc,EAAad,IACjB,OAAQ4B,EAAKC,EAAaC,OAAOC,OAAO,CAAE,EAAEtB,EAAO,CAAEpB,IAAKA,EAAKE,KAAMA,EAAMS,KAAMA,EAAMgC,QAASxC,EAAamB,cAAeA,EAAe,kBAAmBhB,EAAgB,mBAAoBC,EAAiBqC,eAAgBP,IAAmBrB,SAAUA,EAAU,cAAe,QAASG,oBAAqBA,EAAqBD,iBAAkBA,EAAkBjB,SAAU4C,EAAM,MAAO,CAAEC,UAAW,kBAAmB,cAAe,kBAAmB7C,SAAU,CAACS,GAAmB6B,EAAK,SAAU,CAAEQ,QAAS5C,EAAa,cAAe,cAAeF,SAAUsC,EAAKS,EAAM,CAAEC,KAAM,QAASC,SAAU,aAAiBX,EAAKY,EAAY,CAAE5B,iBAAkBA,EAAkBuB,UAAW,2BAA4B7B,oBAAqBA,EAAqB,cAAe,gBAAiBhB,SAAUA,IAAac,GAAyB8B,EAAM,MAAO,CAAEC,UAAW,kCAAmC,cAAe,gBAAiB7C,SAAU,CAACsC,EAAKa,EAAQ,CAAEC,MAAO7C,EAAauC,QAAS3C,EAAkBkD,WAAW,EAAMC,QAAS3C,EAAoB4C,QAASnB,IAAmB,cAAe,gBAAiB,eAAgBzB,IAAuBE,GAAwByB,EAAKa,EAAQ,CAAEC,MAAO5C,EAAcsC,QAAS1C,EAAqBiD,WAAW,EAAMC,QAAS1C,EAAqB2C,QAASnB,IAAmB,cAAe,gBAAiB,eAAgBxB,YAAsC,IAKr3C2B,EAAciB,EAAOC,EAAU,CACjCC,kBAAoBC,GAAkB,mBAATA,GAAsC,kBAATA,GAAqC,aAATA,GADtEH,EAEhB1D,IACA,IAAI4B,MAAEA,GAAU5B,EAAI8D,EAAOxC,EAAOtB,EAAI,CAAC,UACvC,MAAM+D,EAAsBD,EAAKjB,eAAiB,OAAS,OAGrDmB,EAAiBF,EAAK7C,SAAW6C,EAAK7C,SAAW,oBACjDgD,EAA0C,WAA1BH,EAAKlD,MAAQ,SAC7BsD,EAAmBJ,EAAKlD,MAAsB,eAAdkD,EAAKlD,KACrCuD,EAAkBF,EAClB,CAAEhD,SALgB,QAKWmD,UAAW,OAAQC,QAAS,QACzDH,EACI,CAAEjD,SAAU+C,EAAgBI,UAAW,OAAQC,QAAS,QACxD,CACEpD,SAVY,QAWZmD,UAAW,OACXC,QAAS,uBAErB,MAAO,CACH,qBAAsB,CAClBC,UAAW,qBACXC,UAAW,QACXC,QAAS,OACTC,cAAe,SACf,aAAc,CACVC,UAAW,SACXC,UAAW,UACXP,UAAW,OACXC,QAAS,YAEb,oBAAqB,CACjBA,QAAS,YACTO,cAAeb,EACfc,UAAWf,EAAKvC,cAAgB,mCAAqC,KACrE,oBAAqB,CACjBuD,aAAc,UAI1B,CAAClD,EAAMM,YAAY6C,GAAG,OAAQ,CAC1B,qBAAsB,CAClBT,UAAW,sBACXU,OAAQ,MACRC,MAAO,OACPhE,SAAUkD,EAAgBlD,SAC1B,aAAc,CACVmD,UAAWD,EAAgBC,UAC3BC,QAAS,YAEb,oBAAqB,CACjBA,QAASF,EAAgBE,QACzBO,cAAeb,KAI9B"}
+{"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useState, forwardRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MuiModal from '@mui/material/Modal';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ContentDiv } from './contentDiv';\nimport { useTheme } from '@mui/material';\n/**\n * @description Styled SkodaFlow Modal component\n * @param props ModalProps\n * @returns React Functional Component\n */\nexport const Modal = forwardRef((_a, ref) => {\n    var { children, open, handleClose, onClickTopButton, onClickBottomButton, ariaLabelledby, ariaDescribedBy, firstButton, secondButton, hasCloseButton, size, firstButtonVariant, secondButtonVariant, secondButtonVisible, defaultButtonSection = true, maxWidth, modalLoadedCallback, disableAutoFocus, disableEnforceFocus } = _a, props = __rest(_a, [\"children\", \"open\", \"handleClose\", \"onClickTopButton\", \"onClickBottomButton\", \"ariaLabelledby\", \"ariaDescribedBy\", \"firstButton\", \"secondButton\", \"hasCloseButton\", \"size\", \"firstButtonVariant\", \"secondButtonVariant\", \"secondButtonVisible\", \"defaultButtonSection\", \"maxWidth\", \"modalLoadedCallback\", \"disableAutoFocus\", \"disableEnforceFocus\"]);\n    const [isOverFlowing, setIsOverFlowing] = useState(false);\n    const [desktopView, setDesktopView] = useState(false);\n    const theme = useTheme();\n    useEffect(() => {\n        const mq = window.matchMedia(`(min-width: ${theme.breakpoints.values.md}px)`);\n        setDesktopView(mq.matches);\n    }, [theme.breakpoints.values.md]);\n    const isCompactButton = useCallback(() => {\n        const isModalLarge = (size || 'large') === 'large';\n        if (desktopView && isModalLarge)\n            return false;\n    }, [desktopView, size]);\n    return (_jsx(ModalStyled, Object.assign({}, props, { ref: ref, open: open, size: size, onClose: handleClose, isOverFlowing: isOverFlowing, \"aria-labelledby\": ariaLabelledby, \"aria-describedby\": ariaDescribedBy, compactButtons: isCompactButton(), maxWidth: maxWidth, \"data-testid\": \"Modal\", disableEnforceFocus: disableEnforceFocus, disableAutoFocus: disableAutoFocus, dir: theme.direction, children: _jsxs(\"div\", { className: \"modal-container\", \"data-testid\": \"Modal.container\", children: [hasCloseButton && (_jsx(\"button\", { onClick: handleClose, \"data-testid\": \"Modal.close\", children: _jsx(Icon, { name: \"close\", fontSize: \"medium\" }) })), _jsx(ContentDiv, { setIsOverFlowing: setIsOverFlowing, className: \"modal-container--content\", modalLoadedCallback: modalLoadedCallback, \"data-testid\": \"Modal.content\", children: children }), defaultButtonSection && (_jsxs(\"div\", { className: \"modal-container--action-buttons\", \"data-testid\": \"Modal.buttons\", children: [_jsx(Button, { label: firstButton, onClick: onClickTopButton, fullWidth: true, variant: firstButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button1\", \"data-variant\": firstButtonVariant }), secondButtonVisible && (_jsx(Button, { label: secondButton, onClick: onClickBottomButton, fullWidth: true, variant: secondButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button2\", \"data-variant\": secondButtonVariant }))] }))] }) })));\n});\n/**\n * @description Modal styling definition\n */\nconst ModalStyled = styled(MuiModal, {\n    shouldForwardProp: (prop) => prop !== 'compactButtons' && prop !== 'isOverFlowing' && prop !== 'maxWidth',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const bottomButtonPadding = args.compactButtons ? '16px' : '24px';\n    const smallModalWidth = '408px';\n    const largeModalWidth = '624px';\n    const fullWidthModal = args.maxWidth ? args.maxWidth : 'calc(100% - 40px)';\n    const isModalLarge = (args.size || 'large') === 'large';\n    const isModalFullWidth = args.size && args.size === 'full-width';\n    const sizeBasedStyles = isModalLarge\n        ? { maxWidth: largeModalWidth, marginTop: '40px', padding: '40px' }\n        : isModalFullWidth\n            ? { maxWidth: fullWidthModal, marginTop: '40px', padding: '40px' }\n            : {\n                maxWidth: smallModalWidth,\n                marginTop: '48px',\n                padding: '24px 40px 40px 40px',\n            };\n    return {\n        '& .modal-container': {\n            maxHeight: 'calc(100vh - 64px)',\n            minHeight: '300px',\n            display: 'flex',\n            flexDirection: 'column',\n            '&--content': {\n                overflowX: 'hidden',\n                overflowY: 'auto',\n                marginTop: '48px',\n                padding: '0px 24px',\n            },\n            '&--action-buttons': {\n                padding: '32px 24px',\n                paddingBottom: bottomButtonPadding,\n                boxShadow: args.isOverFlowing ? '0px 0px 32px rgba(0, 0, 0, 0.15)' : null,\n                'div:first-of-type': {\n                    marginBottom: '15px',\n                },\n            },\n        },\n        [theme.breakpoints.up('md')]: {\n            '& .modal-container': {\n                maxHeight: 'calc(100vh - 160px)',\n                margin: '0px',\n                width: '100%',\n                maxWidth: sizeBasedStyles.maxWidth,\n                '&--content': {\n                    marginTop: sizeBasedStyles.marginTop,\n                    padding: '0px 40px',\n                },\n                '&--action-buttons': {\n                    padding: sizeBasedStyles.padding,\n                    paddingBottom: bottomButtonPadding,\n                },\n            },\n        },\n    };\n});\n//# sourceMappingURL=modal.js.map"],"names":["Modal","forwardRef","_a","ref","children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus","props","__rest","isOverFlowing","setIsOverFlowing","useState","desktopView","setDesktopView","theme","useTheme","useEffect","mq","window","matchMedia","breakpoints","values","md","matches","isCompactButton","useCallback","_jsx","ModalStyled","Object","assign","onClose","compactButtons","dir","direction","_jsxs","className","onClick","Icon","name","fontSize","ContentDiv","Button","label","fullWidth","variant","compact","styled","MuiModal","shouldForwardProp","prop","args","bottomButtonPadding","fullWidthModal","isModalLarge","isModalFullWidth","sizeBasedStyles","marginTop","padding","maxHeight","minHeight","display","flexDirection","overflowX","overflowY","paddingBottom","boxShadow","marginBottom","up","margin","width"],"mappings":"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"}

package/components/numbering/numbering.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{styled as o}from"@mui/material/styles";import{NumberingSizes as a,NumberingColors as i}from"../../utils/enum.js";import{paletteLight as n}from"../../design/skoda/paletteLight.theme.js";const s=o=>{var a=t(o,[]);return e(m,Object.assign({},a,{style:a.customStyle,"data-testid":"Numbering",children:[e("span",{className:"index-container","data-testid":"Numbering.index",children:[a.index," "]}),e("span",{className:"separator-container","data-testid":"Numbering.separator",children:[a.customSeparator?a.customSeparator:"/"," "]}),r("span",{className:"total-container","data-testid":"Numbering.total",children:a.total})]}))},m=o("div",{shouldForwardProp:t=>"customSeparator"!==t&&"colorTheme"!==t})((e=>{var r=t(e,["theme"]);let o={};return o={fontFamily:"SKODA Next",fontStyle:"normal",fontWeight:"700",fontSize:r.size===a.LARGE?"18px":"16px",lineHeight:r.size===a.LARGE?"28px":"24px",letterSpacing:"0.02em","& .index-container":{color:r.colorTheme===i.DARK?n.text.primary:n.onSurface.os0},"& .separator-container":{color:n.onSurface.os600},"& .total-container":{color:n.onSurface.os600}},o}));export{s as Numbering};
+import{__rest as t}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{styled as o}from"@mui/material/styles";import{NumberingSizes as a,NumberingColors as i}from"../../utils/enum.js";import{paletteLight as n}from"../../design/skoda/paletteLight.theme.js";const s=o=>{var a=t(o,[]);return e(m,Object.assign({},a,{style:a.customStyle,"data-testid":"Numbering",children:[e("span",{className:"index-container","data-testid":"Numbering.index",children:[a.index," "]}),e("span",{className:"separator-container","data-testid":"Numbering.separator",children:[a.customSeparator?a.customSeparator:"/"," "]}),r("span",{className:"total-container","data-testid":"Numbering.total",children:a.total})]}))},m=o("div",{shouldForwardProp:t=>"customSeparator"!==t&&"colorTheme"!==t})((e=>{var r=t(e,["theme"]);return{fontWeight:"700",fontSize:r.size===a.LARGE?"18px":"16px",lineHeight:r.size===a.LARGE?"28px":"24px",letterSpacing:"0.02em","& .index-container":{color:r.colorTheme===i.DARK?n.text.primary:n.onSurface.os0},"& .separator-container":{color:n.onSurface.os600},"& .total-container":{color:n.onSurface.os600}}}));export{s as Numbering};
 //# sourceMappingURL=numbering.js.map

package/components/numbering/numbering.js.map

@@ -1 +1 @@
-{"version":3,"file":"numbering.js","sources":["../../../src/components/numbering/numbering.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nimport { styled } from '@mui/material/styles';\nimport { NumberingColors, NumberingSizes } from '../../utils/enum';\nimport { paletteLight as flowColors } from '../../design/skoda/paletteLight.theme';\n/**\n * @description SkodaFlow Numbering component.\n * @param props NumberingProps\n * @returns React Functional Component\n */\nexport const Numbering = (_a) => {\n    var props = __rest(_a, []);\n    return (_jsxs(NumberingStyled, Object.assign({}, props, { style: props.customStyle, \"data-testid\": \"Numbering\", children: [_jsxs(\"span\", { className: \"index-container\", \"data-testid\": \"Numbering.index\", children: [props.index, ' '] }), _jsxs(\"span\", { className: \"separator-container\", \"data-testid\": \"Numbering.separator\", children: [props.customSeparator ? props.customSeparator : '/', ' '] }), _jsx(\"span\", { className: \"total-container\", \"data-testid\": \"Numbering.total\", children: props.total })] })));\n};\n/**\n * @description Controls styling definition based on props\n */\nconst NumberingStyled = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'customSeparator' && prop !== 'colorTheme',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    let styles = {};\n    styles = {\n        fontFamily: 'SKODA Next',\n        fontStyle: 'normal',\n        fontWeight: '700',\n        fontSize: args.size === NumberingSizes.LARGE ? '18px' : '16px',\n        lineHeight: args.size === NumberingSizes.LARGE ? '28px' : '24px',\n        letterSpacing: '0.02em',\n        '& .index-container': {\n            color: args.colorTheme === NumberingColors.DARK ? flowColors.text.primary : flowColors.onSurface.os0,\n        },\n        '& .separator-container': {\n            color: flowColors.onSurface.os600,\n        },\n        '& .total-container': {\n            color: flowColors.onSurface.os600,\n        },\n    };\n    return styles;\n});\n//# sourceMappingURL=numbering.js.map"],"names":["Numbering","_a","props","__rest","_jsxs","NumberingStyled","Object","assign","style","customStyle","children","className","index","customSeparator","_jsx","total","styled","shouldForwardProp","prop","args","styles","fontFamily","fontStyle","fontWeight","fontSize","size","NumberingSizes","LARGE","lineHeight","letterSpacing","color","colorTheme","NumberingColors","DARK","flowColors","text","primary","onSurface","os0","os600"],"mappings":"iRAUY,MAACA,EAAaC,IACtB,IAAIC,EAAQC,EAAOF,EAAI,IACvB,OAAQG,EAAMC,EAAiBC,OAAOC,OAAO,CAAE,EAAEL,EAAO,CAAEM,MAAON,EAAMO,YAAa,cAAe,YAAaC,SAAU,CAACN,EAAM,OAAQ,CAAEO,UAAW,kBAAmB,cAAe,kBAAmBD,SAAU,CAACR,EAAMU,MAAO,OAASR,EAAM,OAAQ,CAAEO,UAAW,sBAAuB,cAAe,sBAAuBD,SAAU,CAACR,EAAMW,gBAAkBX,EAAMW,gBAAkB,IAAK,OAASC,EAAK,OAAQ,CAAEH,UAAW,kBAAmB,cAAe,kBAAmBD,SAAUR,EAAMa,WAAe,EAKzfV,EAAkBW,EAAO,MAAO,CAClCC,kBAAoBC,GAAkB,oBAATA,GAAuC,eAATA,GADvCF,EAEpBf,IACG,IAAiBkB,EAAOhB,EAAOF,EAAI,CAAC,UACvC,IAAImB,EAAS,CAAA,EAkBb,OAjBAA,EAAS,CACLC,WAAY,aACZC,UAAW,SACXC,WAAY,MACZC,SAAUL,EAAKM,OAASC,EAAeC,MAAQ,OAAS,OACxDC,WAAYT,EAAKM,OAASC,EAAeC,MAAQ,OAAS,OAC1DE,cAAe,SACf,qBAAsB,CAClBC,MAAOX,EAAKY,aAAeC,EAAgBC,KAAOC,EAAWC,KAAKC,QAAUF,EAAWG,UAAUC,KAErG,yBAA0B,CACtBR,MAAOI,EAAWG,UAAUE,OAEhC,qBAAsB,CAClBT,MAAOI,EAAWG,UAAUE,QAG7BnB,CAAM"}
+{"version":3,"file":"numbering.js","sources":["../../../src/components/numbering/numbering.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nimport { styled } from '@mui/material/styles';\nimport { NumberingColors, NumberingSizes } from '../../utils/enum';\nimport { paletteLight as flowColors } from '../../design/skoda/paletteLight.theme';\n/**\n * @description SkodaFlow Numbering component.\n * @param props NumberingProps\n * @returns React Functional Component\n */\nexport const Numbering = (_a) => {\n    var props = __rest(_a, []);\n    return (_jsxs(NumberingStyled, Object.assign({}, props, { style: props.customStyle, \"data-testid\": \"Numbering\", children: [_jsxs(\"span\", { className: \"index-container\", \"data-testid\": \"Numbering.index\", children: [props.index, ' '] }), _jsxs(\"span\", { className: \"separator-container\", \"data-testid\": \"Numbering.separator\", children: [props.customSeparator ? props.customSeparator : '/', ' '] }), _jsx(\"span\", { className: \"total-container\", \"data-testid\": \"Numbering.total\", children: props.total })] })));\n};\n/**\n * @description Controls styling definition based on props\n */\nconst NumberingStyled = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'customSeparator' && prop !== 'colorTheme',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    return {\n        fontWeight: '700',\n        fontSize: args.size === NumberingSizes.LARGE ? '18px' : '16px',\n        lineHeight: args.size === NumberingSizes.LARGE ? '28px' : '24px',\n        letterSpacing: '0.02em',\n        '& .index-container': {\n            color: args.colorTheme === NumberingColors.DARK ? flowColors.text.primary : flowColors.onSurface.os0,\n        },\n        '& .separator-container': {\n            color: flowColors.onSurface.os600,\n        },\n        '& .total-container': {\n            color: flowColors.onSurface.os600,\n        },\n    };\n});\n//# sourceMappingURL=numbering.js.map"],"names":["Numbering","_a","props","__rest","_jsxs","NumberingStyled","Object","assign","style","customStyle","children","className","index","customSeparator","_jsx","total","styled","shouldForwardProp","prop","args","fontWeight","fontSize","size","NumberingSizes","LARGE","lineHeight","letterSpacing","color","colorTheme","NumberingColors","DARK","flowColors","text","primary","onSurface","os0","os600"],"mappings":"iRAUY,MAACA,EAAaC,IACtB,IAAIC,EAAQC,EAAOF,EAAI,IACvB,OAAQG,EAAMC,EAAiBC,OAAOC,OAAO,CAAE,EAAEL,EAAO,CAAEM,MAAON,EAAMO,YAAa,cAAe,YAAaC,SAAU,CAACN,EAAM,OAAQ,CAAEO,UAAW,kBAAmB,cAAe,kBAAmBD,SAAU,CAACR,EAAMU,MAAO,OAASR,EAAM,OAAQ,CAAEO,UAAW,sBAAuB,cAAe,sBAAuBD,SAAU,CAACR,EAAMW,gBAAkBX,EAAMW,gBAAkB,IAAK,OAASC,EAAK,OAAQ,CAAEH,UAAW,kBAAmB,cAAe,kBAAmBD,SAAUR,EAAMa,WAAe,EAKzfV,EAAkBW,EAAO,MAAO,CAClCC,kBAAoBC,GAAkB,oBAATA,GAAuC,eAATA,GADvCF,EAEpBf,IACG,IAAiBkB,EAAOhB,EAAOF,EAAI,CAAC,UACvC,MAAO,CACHmB,WAAY,MACZC,SAAUF,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OACxDC,WAAYN,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OAC1DE,cAAe,SACf,qBAAsB,CAClBC,MAAOR,EAAKS,aAAeC,EAAgBC,KAAOC,EAAWC,KAAKC,QAAUF,EAAWG,UAAUC,KAErG,yBAA0B,CACtBR,MAAOI,EAAWG,UAAUE,OAEhC,qBAAsB,CAClBT,MAAOI,EAAWG,UAAUE,OAEnC"}

package/components/stepper/stepper.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{StepConnector as r,stepConnectorClasses as t,Step as n,StepLabel as i}from"@mui/material";import a from"@mui/material/Stepper";import{styled as l}from"@mui/material/styles";import{paletteLight as c}from"../../design/skoda/paletteLight.theme.js";const d=r=>{var{activeStep:t,alternativeLabel:l,children:c,classes:d,connector:p,nonLinear:b,orientation:u,step:f}=r,g=e(r,["activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step"]);const x={lineHeight:"16px",fontSize:"12px",fontWeight:"400"};return o(h,{children:o("div",{children:o(a,Object.assign({className:"controllerContainer"},g,{activeStep:t,sx:{maxWidth:800,display:"flex",alignItems:"center",spacing:4},alternativeLabel:l,connector:o(m,{}),children:f.map((e=>o(n,{children:o(i,{style:x,StepIconComponent:s,children:e})},e)))}))})})};function s(e){const{active:r,completed:t,className:n}=e;return o(p,{className:n,children:o("div",r?{className:"QontoStepIcon-active"}:t?{className:"QontoStepIcon-completedIcon"}:{className:"QontoStepIcon-circle"})})}const p=l("div")((({theme:e})=>{let o={};return o={color:"dark"===e.palette.mode?e.palette.grey[700]:"#464748",display:"flex",height:22,alignItems:"center","& .QontoStepIcon-completedIcon":{color:c.onSurface.os700,width:12,height:12,borderRadius:"50%",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-active":{color:c.onSurface.os700,width:18,height:18,borderRadius:"50%",marginRight:"5.25px",marginLeft:"0px",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-circle":{width:12,height:12,borderRadius:"50%",border:"1.5px solid #C4C6C7",color:"transparent","&:hover":{cursor:"pointer",borderRadius:"50%",border:`1.5px solid ${c.disabled.tertiary}`,backgroundColor:c.disabled.secondary}}},o})),m=l(r)((({theme:e})=>({[`&.${t.alternativeLabel}`]:{top:10,left:"calc(-50% + 9px)",right:"calc(50% + 9px)"},[`&.${t.active}`]:{[`& .${t.line}`]:{borderColor:c.onSurface.os700,width:"60px"}},[`&.${t.completed}`]:{[`& .${t.line}`]:{borderColor:c.onSurface.os700}},[`& .${t.line}`]:{borderColor:"dark"===e.palette.mode?e.palette.grey[800]:c.disabled.primary,borderTopWidth:3,borderRadius:1}}))),h=l("div")((()=>{let e={};return e={"& .controllerContainer":{display:"flex",alignItems:"center",fontFamily:"SKODA Next",fontStyle:"normal",fontWeight:"700",fontSize:"12px",lineHeight:"16px"}},e}));export{d as Stepper};
+import{__rest as e}from"tslib";import{jsx as o}from"react/jsx-runtime";import{StepConnector as r,stepConnectorClasses as t,Step as n,StepLabel as i}from"@mui/material";import a from"@mui/material/Stepper";import{styled as l}from"@mui/material/styles";import{paletteLight as c}from"../../design/skoda/paletteLight.theme.js";const d=r=>{var{activeStep:t,alternativeLabel:l,children:c,classes:d,connector:p,nonLinear:b,orientation:u,step:g}=r,f=e(r,["activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step"]);const x={lineHeight:"16px",fontSize:"12px",fontWeight:"400"};return o(h,{children:o("div",{children:o(a,Object.assign({className:"controllerContainer"},f,{activeStep:t,sx:{maxWidth:800,display:"flex",alignItems:"center",spacing:4},alternativeLabel:l,connector:o(m,{}),children:g.map((e=>o(n,{children:o(i,{style:x,StepIconComponent:s,children:e})},e)))}))})})};function s(e){const{active:r,completed:t,className:n}=e;return o(p,{className:n,children:o("div",r?{className:"QontoStepIcon-active"}:t?{className:"QontoStepIcon-completedIcon"}:{className:"QontoStepIcon-circle"})})}const p=l("div")((({theme:e})=>{let o={};return o={color:"dark"===e.palette.mode?e.palette.grey[700]:"#464748",display:"flex",height:22,alignItems:"center","& .QontoStepIcon-completedIcon":{color:c.onSurface.os700,width:12,height:12,borderRadius:"50%",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-active":{color:c.onSurface.os700,width:18,height:18,borderRadius:"50%",marginRight:"5.25px",marginLeft:"0px",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${c.onSurface.os700}`,color:c.brand.secondary}},"& .QontoStepIcon-circle":{width:12,height:12,borderRadius:"50%",border:"1.5px solid #C4C6C7",color:"transparent","&:hover":{cursor:"pointer",borderRadius:"50%",border:`1.5px solid ${c.disabled.tertiary}`,backgroundColor:c.disabled.secondary}}},o})),m=l(r)((({theme:e})=>({[`&.${t.alternativeLabel}`]:{top:10,left:"calc(-50% + 9px)",right:"calc(50% + 9px)"},[`&.${t.active}`]:{[`& .${t.line}`]:{borderColor:c.onSurface.os700,width:"60px"}},[`&.${t.completed}`]:{[`& .${t.line}`]:{borderColor:c.onSurface.os700}},[`& .${t.line}`]:{borderColor:"dark"===e.palette.mode?e.palette.grey[800]:c.disabled.primary,borderTopWidth:3,borderRadius:1}}))),h=l("div")((()=>({"& .controllerContainer":{display:"flex",alignItems:"center",fontStyle:"normal",fontWeight:"700",fontSize:"12px",lineHeight:"16px"}})));export{d as Stepper};
 //# sourceMappingURL=stepper.js.map

package/components/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Step, StepConnector, StepLabel, stepConnectorClasses } from '@mui/material';\nimport MuiStepper from '@mui/material/Stepper';\nimport { styled } from '@mui/material/styles';\nimport { paletteLight as flowColors } from '../../design/skoda/paletteLight.theme';\nexport const Stepper = (_a) => {\n    var { activeStep, alternativeLabel, children, classes, connector, nonLinear, orientation, step } = _a, props = __rest(_a, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"connector\", \"nonLinear\", \"orientation\", \"step\"]);\n    const styles = {\n        lineHeight: '16px',\n        fontSize: '12px',\n        fontWeight: '400',\n    };\n    const desktopStepper = () => (_jsx(\"div\", { children: _jsx(MuiStepper, Object.assign({ className: \"controllerContainer\" }, props, { activeStep: activeStep, sx: {\n                maxWidth: 800,\n                display: 'flex',\n                alignItems: 'center',\n                spacing: 4,\n            }, alternativeLabel: alternativeLabel, connector: _jsx(QontoConnector, {}), children: step.map((label) => (_jsx(Step, { children: _jsx(StepLabel, { style: styles, StepIconComponent: QontoStepIcon, children: label }) }, label))) })) }));\n    return _jsx(StepperStyled, { children: desktopStepper() });\n};\nfunction QontoStepIcon(props) {\n    const { active, completed, className } = props;\n    return (_jsx(QontoStepIconRoot, { className: className, children: active ? (_jsx(\"div\", { className: \"QontoStepIcon-active\" })) : completed ? (_jsx(\"div\", { className: \"QontoStepIcon-completedIcon\" })) : (_jsx(\"div\", { className: \"QontoStepIcon-circle\" })) }));\n}\nconst QontoStepIconRoot = styled('div')(({ theme }) => {\n    let style = {};\n    style = {\n        color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#464748',\n        display: 'flex',\n        height: 22,\n        alignItems: 'center',\n        '& .QontoStepIcon-completedIcon': {\n            color: flowColors.onSurface.os700,\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-active': {\n            color: flowColors.onSurface.os700,\n            width: 18,\n            height: 18,\n            borderRadius: '50%',\n            marginRight: '5.25px',\n            marginLeft: '0px',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-circle': {\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            border: '1.5px solid #C4C6C7',\n            color: 'transparent',\n            '&:hover': {\n                cursor: 'pointer',\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.disabled.tertiary}`,\n                backgroundColor: flowColors.disabled.secondary,\n            },\n        },\n    };\n    return style;\n});\nconst QontoConnector = styled(StepConnector)(({ theme }) => ({\n    [`&.${stepConnectorClasses.alternativeLabel}`]: {\n        top: 10,\n        left: 'calc(-50% + 9px)',\n        right: 'calc(50% + 9px)',\n    },\n    [`&.${stepConnectorClasses.active}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n            width: '60px',\n        },\n    },\n    [`&.${stepConnectorClasses.completed}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n        },\n    },\n    [`& .${stepConnectorClasses.line}`]: {\n        borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : flowColors.disabled.primary,\n        borderTopWidth: 3,\n        borderRadius: 1,\n    },\n}));\nconst StepperStyled = styled('div')(() => {\n    let style = {};\n    const SKODA_NEXT = 'SKODA Next';\n    style = {\n        '& .controllerContainer': {\n            display: 'flex',\n            alignItems: 'center',\n            fontFamily: SKODA_NEXT,\n            fontStyle: 'normal',\n            fontWeight: '700',\n            fontSize: '12px',\n            lineHeight: '16px',\n        },\n    };\n    return style;\n});\n//# sourceMappingURL=stepper.js.map"],"names":["Stepper","_a","activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step","props","__rest","styles","lineHeight","fontSize","fontWeight","_jsx","StepperStyled","MuiStepper","Object","assign","className","sx","maxWidth","display","alignItems","spacing","QontoConnector","map","label","Step","StepLabel","style","StepIconComponent","QontoStepIcon","active","completed","QontoStepIconRoot","styled","theme","color","palette","mode","grey","height","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","StepConnector","stepConnectorClasses","top","left","right","line","borderColor","primary","borderTopWidth","fontFamily","fontStyle"],"mappings":"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"}
+{"version":3,"file":"stepper.js","sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Step, StepConnector, StepLabel, stepConnectorClasses } from '@mui/material';\nimport MuiStepper from '@mui/material/Stepper';\nimport { styled } from '@mui/material/styles';\nimport { paletteLight as flowColors } from '../../design/skoda/paletteLight.theme';\nexport const Stepper = (_a) => {\n    var { activeStep, alternativeLabel, children, classes, connector, nonLinear, orientation, step } = _a, props = __rest(_a, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"connector\", \"nonLinear\", \"orientation\", \"step\"]);\n    const styles = {\n        lineHeight: '16px',\n        fontSize: '12px',\n        fontWeight: '400',\n    };\n    const desktopStepper = () => (_jsx(\"div\", { children: _jsx(MuiStepper, Object.assign({ className: \"controllerContainer\" }, props, { activeStep: activeStep, sx: {\n                maxWidth: 800,\n                display: 'flex',\n                alignItems: 'center',\n                spacing: 4,\n            }, alternativeLabel: alternativeLabel, connector: _jsx(QontoConnector, {}), children: step.map((label) => (_jsx(Step, { children: _jsx(StepLabel, { style: styles, StepIconComponent: QontoStepIcon, children: label }) }, label))) })) }));\n    return _jsx(StepperStyled, { children: desktopStepper() });\n};\nfunction QontoStepIcon(props) {\n    const { active, completed, className } = props;\n    return (_jsx(QontoStepIconRoot, { className: className, children: active ? (_jsx(\"div\", { className: \"QontoStepIcon-active\" })) : completed ? (_jsx(\"div\", { className: \"QontoStepIcon-completedIcon\" })) : (_jsx(\"div\", { className: \"QontoStepIcon-circle\" })) }));\n}\nconst QontoStepIconRoot = styled('div')(({ theme }) => {\n    let style = {};\n    style = {\n        color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#464748',\n        display: 'flex',\n        height: 22,\n        alignItems: 'center',\n        '& .QontoStepIcon-completedIcon': {\n            color: flowColors.onSurface.os700,\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-active': {\n            color: flowColors.onSurface.os700,\n            width: 18,\n            height: 18,\n            borderRadius: '50%',\n            marginRight: '5.25px',\n            marginLeft: '0px',\n            backgroundColor: 'currentColor',\n            '&:hover': {\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.onSurface.os700}`,\n                color: flowColors.brand.secondary,\n            },\n        },\n        '& .QontoStepIcon-circle': {\n            width: 12,\n            height: 12,\n            borderRadius: '50%',\n            border: '1.5px solid #C4C6C7',\n            color: 'transparent',\n            '&:hover': {\n                cursor: 'pointer',\n                borderRadius: '50%',\n                border: `1.5px solid ${flowColors.disabled.tertiary}`,\n                backgroundColor: flowColors.disabled.secondary,\n            },\n        },\n    };\n    return style;\n});\nconst QontoConnector = styled(StepConnector)(({ theme }) => ({\n    [`&.${stepConnectorClasses.alternativeLabel}`]: {\n        top: 10,\n        left: 'calc(-50% + 9px)',\n        right: 'calc(50% + 9px)',\n    },\n    [`&.${stepConnectorClasses.active}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n            width: '60px',\n        },\n    },\n    [`&.${stepConnectorClasses.completed}`]: {\n        [`& .${stepConnectorClasses.line}`]: {\n            borderColor: flowColors.onSurface.os700,\n        },\n    },\n    [`& .${stepConnectorClasses.line}`]: {\n        borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : flowColors.disabled.primary,\n        borderTopWidth: 3,\n        borderRadius: 1,\n    },\n}));\nconst StepperStyled = styled('div')(() => {\n    return {\n        '& .controllerContainer': {\n            display: 'flex',\n            alignItems: 'center',\n            fontStyle: 'normal',\n            fontWeight: '700',\n            fontSize: '12px',\n            lineHeight: '16px',\n        },\n    };\n});\n//# sourceMappingURL=stepper.js.map"],"names":["Stepper","_a","activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step","props","__rest","styles","lineHeight","fontSize","fontWeight","_jsx","StepperStyled","MuiStepper","Object","assign","className","sx","maxWidth","display","alignItems","spacing","QontoConnector","map","label","Step","StepLabel","style","StepIconComponent","QontoStepIcon","active","completed","QontoStepIconRoot","styled","theme","color","palette","mode","grey","height","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","StepConnector","stepConnectorClasses","top","left","right","line","borderColor","primary","borderTopWidth","fontStyle"],"mappings":"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"}