@skodaflow/web-library 5.0.0 → 7.0.0

package/components/accordion/accordion.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{forwardRef as i,useState as o,useRef as a,useEffect as r,useCallback as c,useMemo as s,createElement as d}from"react";import{Box as l,AccordionSummary as m,IconButton as p,AccordionDetails as u}from"@mui/material";import h from"@mui/material/Accordion";import{styled as f}from"@mui/material/styles";import{handleMaxChars as g}from"../../utils/utilities.js";import{Icon as x}from"../icon/icon.js";const b=i(((i,h)=>{var{items:f,onChange:b,disableAnimation:v,accordionContainerProps:j,accordionPanelMaxHeight:y,allowMultipleExpand:A}=i,C=e(i,["items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand"]);const[M,w]=o(!1),H=a(null);r((()=>{if(A){const e={};for(let t=0;t<f.length;t++){const n=f[t].id||`panel${t}`;e[n]=!!f[t].isDefaultExpanded}w((()=>e))}else{let e;const t=f.find(((t,n)=>{if(t.isDefaultExpanded)return e=n,t}));t&&w(t.id||`panel${e}`)}}),[A,f]),r((()=>{if(H&&H.current){const e=H.current.querySelector("button");e&&e.addEventListener("focusin",(e=>{e.preventDefault()}))}}),[H]);const N=c((e=>(t,n)=>{b&&b(e,n),w(A?t=>Object.assign(Object.assign({},t),{[e]:n}):!!n&&e)}),[A,b]),O=c((e=>"string"==typeof e?g(e,100):e),[]),E=s((()=>v?{timeout:0}:C.TransitionProps),[v,C.TransitionProps]);return t(l,Object.assign({ref:h},j,{"data-testid":"Accordion",children:f.map(((e,i)=>{const o=e.id||`panel${i}`,a=A?!!M[o]:M===o,r="string"==typeof e.content;return d(P,Object.assign({},C,{id:o,key:o,className:o,TransitionProps:E,expanded:a,onChange:N(o),isContentTypeString:r,disableGutters:!0,accordionPanelMaxHeight:y,square:!0,"data-testid":"Accordion.item"}),n(m,{className:"subheadline","aria-controls":`${o}d-content`,id:`${o}d-header`,expandIcon:t(p,{ref:H,"data-testid":"Accordion.btn",sx:{color:e=>e.palette.text.primary},children:t(x,{color:"inherit",className:"chevron-down"})}),"data-testid":"Accordion.summary",children:[t("div",{className:"accordion-panel-title",children:e.title}),C.previewContent&&r&&!a&&t("div",{className:"accordion-panel-title--sneak-peak","data-testid":"Accordion.peek",children:O(e.content)})]}),t(u,{"data-testid":"Accordion.content",children:t("div",{className:"text",children:e.content})}))}))}))})),P=f(h,{shouldForwardProp:e=>"previewContent"!==e&&"expandIcon"!==e&&"isContentTypeString"!==e&&"accordionPanelMaxHeight"!==e})((t=>{var n=e(t,["theme"]);let i={};return n.accordionPanelMaxHeight&&(i=Object.assign(Object.assign({},i),{"& .text":{maxHeight:n.accordionPanelMaxHeight,overflowY:"auto"}})),i}));export{b as Accordion};
+import{__rest as e}from"tslib";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{forwardRef as i,useState as o,useRef as a,useEffect as r,useCallback as c,useMemo as s,createElement as d}from"react";import{Box as l,AccordionSummary as m,IconButton as p,AccordionDetails as u}from"@mui/material";import h from"@mui/material/Accordion";import{styled as f}from"@mui/material/styles";import{handleMaxChars as g}from"../../utils/utilities.js";import{Icon as x}from"../icon/icon.js";import"../icon/icon.definitions.js";const b=i(((i,h)=>{var{items:f,onChange:b,disableAnimation:v,accordionContainerProps:j,accordionPanelMaxHeight:y,allowMultipleExpand:A}=i,C=e(i,["items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand"]);const[M,w]=o(!1),H=a(null);r((()=>{if(A){const e={};for(let t=0;t<f.length;t++){const n=f[t].id||`panel${t}`;e[n]=!!f[t].isDefaultExpanded}w((()=>e))}else{let e;const t=f.find(((t,n)=>{if(t.isDefaultExpanded)return e=n,t}));t&&w(t.id||`panel${e}`)}}),[A,f]),r((()=>{if(H&&H.current){const e=H.current.querySelector("button");e&&e.addEventListener("focusin",(e=>{e.preventDefault()}))}}),[H]);const O=c((e=>(t,n)=>{b&&b(e,n),w(A?t=>Object.assign(Object.assign({},t),{[e]:n}):!!n&&e)}),[A,b]),E=c((e=>"string"==typeof e?g(e,100):e),[]),N=s((()=>v?{timeout:0}:C.TransitionProps),[v,C.TransitionProps]);return t(l,Object.assign({ref:h},j,{"data-testid":"Accordion",children:f.map(((e,i)=>{const o=e.id||`panel${i}`,a=A?!!M[o]:M===o,r="string"==typeof e.content;return d(P,Object.assign({},C,{id:o,key:o,className:o,TransitionProps:N,expanded:a,onChange:O(o),isContentTypeString:r,disableGutters:!0,accordionPanelMaxHeight:y,square:!0,"data-testid":"Accordion.item"}),n(m,{className:"subheadline","aria-controls":`${o}d-content`,id:`${o}d-header`,expandIcon:t(p,{ref:H,"data-testid":"Accordion.btn",sx:{color:e=>e.palette.text.primary},children:t(x,{color:"inherit",name:"chevron-down"})}),"data-testid":"Accordion.summary",children:[t("div",{className:"accordion-panel-title",children:e.title}),C.previewContent&&r&&!a&&t("div",{className:"accordion-panel-title--sneak-peak","data-testid":"Accordion.peek",children:E(e.content)})]}),t(u,{"data-testid":"Accordion.content",children:t("div",{className:"text",children:e.content})}))}))}))})),P=f(h,{shouldForwardProp:e=>"previewContent"!==e&&"expandIcon"!==e&&"isContentTypeString"!==e&&"accordionPanelMaxHeight"!==e})((t=>{var n=e(t,["theme"]);let i={};return n.accordionPanelMaxHeight&&(i=Object.assign(Object.assign({},i),{"& .text":{maxHeight:n.accordionPanelMaxHeight,overflowY:"auto"}})),i}));export{b as Accordion};
 //# sourceMappingURL=accordion.js.map

package/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport { AccordionDetails, AccordionSummary, Box, IconButton } from '@mui/material';\nimport MuiAccordion from '@mui/material/Accordion';\nimport { styled } from '@mui/material/styles';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';\nimport { handleMaxChars } from '../../utils/utilities';\nimport { Icon } from '../icon';\nexport const Accordion = forwardRef((_a, ref) => {\n    var { items, onChange, disableAnimation, accordionContainerProps, accordionPanelMaxHeight, allowMultipleExpand } = _a, props = __rest(_a, [\"items\", \"onChange\", \"disableAnimation\", \"accordionContainerProps\", \"accordionPanelMaxHeight\", \"allowMultipleExpand\"]);\n    const [expand, setExpanded] = useState(false);\n    const controlRef = useRef(null);\n    useEffect(() => {\n        if (!allowMultipleExpand) {\n            let id;\n            const firstDefaultExpandedItem = items.find((item, index) => {\n                if (item.isDefaultExpanded) {\n                    id = index;\n                    return item;\n                }\n                return undefined;\n            });\n            if (firstDefaultExpandedItem) {\n                setExpanded(firstDefaultExpandedItem.id || `panel${id}`);\n            }\n        }\n        else {\n            const expandItems = {};\n            for (let index = 0; index < items.length; index++) {\n                const itemId = items[index].id || `panel${index}`;\n                expandItems[itemId] = !!items[index].isDefaultExpanded;\n            }\n            setExpanded(() => expandItems);\n        }\n    }, [allowMultipleExpand, items]);\n    //disable black rounded circle on icon controller click\n    useEffect(() => {\n        if (controlRef && controlRef.current) {\n            const controlBtn = controlRef.current.querySelector('button');\n            if (controlBtn) {\n                controlBtn.addEventListener('focusin', (e) => {\n                    e.preventDefault();\n                });\n            }\n        }\n    }, [controlRef]);\n    const handleChange = useCallback((panel) => (_, isExpanded) => {\n        onChange && onChange(panel, isExpanded);\n        if (!allowMultipleExpand) {\n            setExpanded(isExpanded ? panel : false);\n        }\n        else {\n            setExpanded((curr) => {\n                return Object.assign(Object.assign({}, curr), { [panel]: isExpanded });\n            });\n        }\n    }, [allowMultipleExpand, onChange]);\n    const handlePreviewContent = useCallback((content) => {\n        if (typeof content === 'string')\n            return handleMaxChars(content, 100);\n        return content;\n    }, []);\n    const getTransitionProps = useMemo(() => {\n        if (disableAnimation)\n            return { timeout: 0 };\n        else\n            return props.TransitionProps;\n    }, [disableAnimation, props.TransitionProps]);\n    return (_jsx(Box, Object.assign({ ref: ref }, accordionContainerProps, { \"data-testid\": \"Accordion\", children: items.map((item, index) => {\n            const panel = item.id || `panel${index}`;\n            const isExpanded = allowMultipleExpand ? !!expand[panel] : expand === panel;\n            const isContentTypeString = typeof item.content === 'string';\n            return (_createElement(AccordionStyled, Object.assign({}, props, { id: panel, key: panel, className: panel, TransitionProps: getTransitionProps, expanded: isExpanded, onChange: handleChange(panel), isContentTypeString: isContentTypeString, disableGutters: true, accordionPanelMaxHeight: accordionPanelMaxHeight, square: true, \"data-testid\": \"Accordion.item\" }),\n                _jsxs(AccordionSummary, { className: \"subheadline\", \"aria-controls\": `${panel}d-content`, id: `${panel}d-header`, expandIcon: _jsx(IconButton, { ref: controlRef, \"data-testid\": \"Accordion.btn\", sx: { color: (theme) => theme.palette.text.primary }, children: _jsx(Icon, { color: \"inherit\", className: \"chevron-down\" }) }), \"data-testid\": \"Accordion.summary\", children: [_jsx(\"div\", { className: \"accordion-panel-title\", children: item.title }), props.previewContent && isContentTypeString && !isExpanded && (_jsx(\"div\", { className: \"accordion-panel-title--sneak-peak\", \"data-testid\": \"Accordion.peek\", children: handlePreviewContent(item.content) }))] }),\n                _jsx(AccordionDetails, { \"data-testid\": \"Accordion.content\", children: _jsx(\"div\", { className: \"text\", children: item.content }) })));\n        }) })));\n});\nconst AccordionStyled = styled(MuiAccordion, {\n    shouldForwardProp: (prop) => prop !== 'previewContent' &&\n        prop !== 'expandIcon' &&\n        prop !== 'isContentTypeString' &&\n        prop !== 'accordionPanelMaxHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    let style = {};\n    if (args.accordionPanelMaxHeight) {\n        style = Object.assign(Object.assign({}, style), { '& .text': {\n                maxHeight: args.accordionPanelMaxHeight,\n                overflowY: 'auto',\n            } });\n    }\n    return style;\n});\n//# sourceMappingURL=accordion.js.map"],"names":["Accordion","forwardRef","_a","ref","items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand","props","__rest","expand","setExpanded","useState","controlRef","useRef","useEffect","expandItems","index","length","itemId","id","isDefaultExpanded","firstDefaultExpandedItem","find","item","current","controlBtn","querySelector","addEventListener","e","preventDefault","handleChange","useCallback","panel","_","isExpanded","curr","Object","assign","handlePreviewContent","content","handleMaxChars","getTransitionProps","useMemo","timeout","TransitionProps","_jsx","Box","children","map","isContentTypeString","_createElement","AccordionStyled","key","className","expanded","disableGutters","square","_jsxs","AccordionSummary","expandIcon","IconButton","sx","color","theme","palette","text","primary","Icon","title","previewContent","AccordionDetails","styled","MuiAccordion","shouldForwardProp","prop","args","style","maxHeight","overflowY"],"mappings":"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"}
+{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createElement as _createElement } from \"react\";\nimport { AccordionDetails, AccordionSummary, Box, IconButton } from '@mui/material';\nimport MuiAccordion from '@mui/material/Accordion';\nimport { styled } from '@mui/material/styles';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';\nimport { handleMaxChars } from '../../utils/utilities';\nimport { Icon } from '../icon';\nexport const Accordion = forwardRef((_a, ref) => {\n    var { items, onChange, disableAnimation, accordionContainerProps, accordionPanelMaxHeight, allowMultipleExpand } = _a, props = __rest(_a, [\"items\", \"onChange\", \"disableAnimation\", \"accordionContainerProps\", \"accordionPanelMaxHeight\", \"allowMultipleExpand\"]);\n    const [expand, setExpanded] = useState(false);\n    const controlRef = useRef(null);\n    useEffect(() => {\n        if (!allowMultipleExpand) {\n            let id;\n            const firstDefaultExpandedItem = items.find((item, index) => {\n                if (item.isDefaultExpanded) {\n                    id = index;\n                    return item;\n                }\n                return undefined;\n            });\n            if (firstDefaultExpandedItem) {\n                setExpanded(firstDefaultExpandedItem.id || `panel${id}`);\n            }\n        }\n        else {\n            const expandItems = {};\n            for (let index = 0; index < items.length; index++) {\n                const itemId = items[index].id || `panel${index}`;\n                expandItems[itemId] = !!items[index].isDefaultExpanded;\n            }\n            setExpanded(() => expandItems);\n        }\n    }, [allowMultipleExpand, items]);\n    //disable black rounded circle on icon controller click\n    useEffect(() => {\n        if (controlRef && controlRef.current) {\n            const controlBtn = controlRef.current.querySelector('button');\n            if (controlBtn) {\n                controlBtn.addEventListener('focusin', (e) => {\n                    e.preventDefault();\n                });\n            }\n        }\n    }, [controlRef]);\n    const handleChange = useCallback((panel) => (_, isExpanded) => {\n        onChange && onChange(panel, isExpanded);\n        if (!allowMultipleExpand) {\n            setExpanded(isExpanded ? panel : false);\n        }\n        else {\n            setExpanded((curr) => {\n                return Object.assign(Object.assign({}, curr), { [panel]: isExpanded });\n            });\n        }\n    }, [allowMultipleExpand, onChange]);\n    const handlePreviewContent = useCallback((content) => {\n        if (typeof content === 'string')\n            return handleMaxChars(content, 100);\n        return content;\n    }, []);\n    const getTransitionProps = useMemo(() => {\n        if (disableAnimation)\n            return { timeout: 0 };\n        else\n            return props.TransitionProps;\n    }, [disableAnimation, props.TransitionProps]);\n    return (_jsx(Box, Object.assign({ ref: ref }, accordionContainerProps, { \"data-testid\": \"Accordion\", children: items.map((item, index) => {\n            const panel = item.id || `panel${index}`;\n            const isExpanded = allowMultipleExpand ? !!expand[panel] : expand === panel;\n            const isContentTypeString = typeof item.content === 'string';\n            return (_createElement(AccordionStyled, Object.assign({}, props, { id: panel, key: panel, className: panel, TransitionProps: getTransitionProps, expanded: isExpanded, onChange: handleChange(panel), isContentTypeString: isContentTypeString, disableGutters: true, accordionPanelMaxHeight: accordionPanelMaxHeight, square: true, \"data-testid\": \"Accordion.item\" }),\n                _jsxs(AccordionSummary, { className: \"subheadline\", \"aria-controls\": `${panel}d-content`, id: `${panel}d-header`, expandIcon: _jsx(IconButton, { ref: controlRef, \"data-testid\": \"Accordion.btn\", sx: { color: (theme) => theme.palette.text.primary }, children: _jsx(Icon, { color: \"inherit\", name: \"chevron-down\" }) }), \"data-testid\": \"Accordion.summary\", children: [_jsx(\"div\", { className: \"accordion-panel-title\", children: item.title }), props.previewContent && isContentTypeString && !isExpanded && (_jsx(\"div\", { className: \"accordion-panel-title--sneak-peak\", \"data-testid\": \"Accordion.peek\", children: handlePreviewContent(item.content) }))] }),\n                _jsx(AccordionDetails, { \"data-testid\": \"Accordion.content\", children: _jsx(\"div\", { className: \"text\", children: item.content }) })));\n        }) })));\n});\nconst AccordionStyled = styled(MuiAccordion, {\n    shouldForwardProp: (prop) => prop !== 'previewContent' &&\n        prop !== 'expandIcon' &&\n        prop !== 'isContentTypeString' &&\n        prop !== 'accordionPanelMaxHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    let style = {};\n    if (args.accordionPanelMaxHeight) {\n        style = Object.assign(Object.assign({}, style), { '& .text': {\n                maxHeight: args.accordionPanelMaxHeight,\n                overflowY: 'auto',\n            } });\n    }\n    return style;\n});\n//# sourceMappingURL=accordion.js.map"],"names":["Accordion","forwardRef","_a","ref","items","onChange","disableAnimation","accordionContainerProps","accordionPanelMaxHeight","allowMultipleExpand","props","__rest","expand","setExpanded","useState","controlRef","useRef","useEffect","expandItems","index","length","itemId","id","isDefaultExpanded","firstDefaultExpandedItem","find","item","current","controlBtn","querySelector","addEventListener","e","preventDefault","handleChange","useCallback","panel","_","isExpanded","curr","Object","assign","handlePreviewContent","content","handleMaxChars","getTransitionProps","useMemo","timeout","TransitionProps","_jsx","Box","children","map","isContentTypeString","_createElement","AccordionStyled","key","className","expanded","disableGutters","square","_jsxs","AccordionSummary","expandIcon","IconButton","sx","color","theme","palette","text","primary","Icon","name","title","previewContent","AccordionDetails","styled","MuiAccordion","shouldForwardProp","prop","args","style","maxHeight","overflowY"],"mappings":"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"}

package/components/backdrop/backdrop.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useEffect as i}from"react";import t from"@mui/material/Backdrop";import{styled as n}from"@mui/material/styles";import s from"../common/hook/backdrop.js";import{flowColors as a}from"../../design/skoda/palette.theme.js";const m=e(((e,t)=>{var{open:n,onClose:a}=e,m=o(e,["open","onClose"]);const{openBackdrop:l,handleCloseBackdrop:c,setOpenBackdrop:d}=s();return i((()=>{d(n)}),[n,d]),r(p,{ref:t,classes:m.classes,open:l,onClick:()=>{c(),a&&a(!1)},invisible:m.invisible,sx:m.sx,transitionDuration:m.transitionDuration,children:m.children})})),p=n(t)((r=>o(r,["theme"]).invisible?{backgroundColor:a.transparent.backdrop,backdropFilter:"blur(0px)"}:null));export{m as Backdrop};
+import{__rest as o}from"tslib";import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useEffect as i}from"react";import t from"@mui/material/Backdrop";import{styled as n}from"@mui/material/styles";import s from"../common/hook/backdrop.js";import{paletteLight as a}from"../../design/skoda/paletteLight.theme.js";const m=e(((e,t)=>{var{open:n,onClose:a}=e,m=o(e,["open","onClose"]);const{openBackdrop:l,handleCloseBackdrop:c,setOpenBackdrop:d}=s();return i((()=>{d(n)}),[n,d]),r(p,{ref:t,classes:m.classes,open:l,onClick:()=>{c(),a&&a(!1)},invisible:m.invisible,sx:m.sx,transitionDuration:m.transitionDuration,children:m.children})})),p=n(t)((r=>o(r,["theme"]).invisible?{backgroundColor:a.transparent.backdrop,backdropFilter:"blur(0px)"}:null));export{m as Backdrop};
 //# sourceMappingURL=backdrop.js.map

package/components/backdrop/backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"backdrop.js","sources":["../../../src/components/backdrop/backdrop.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect } from 'react';\nimport MuiBackdrop from '@mui/material/Backdrop';\nimport { styled } from '@mui/material/styles';\nimport useBackdrop from '../common/hook/backdrop';\nimport { flowColors } from '../../design/skoda/palette.theme';\n/**\n * @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead\n */\nexport const Backdrop = forwardRef((_a, ref) => {\n    var { open, onClose } = _a, props = __rest(_a, [\"open\", \"onClose\"]);\n    const { openBackdrop, handleCloseBackdrop, setOpenBackdrop } = useBackdrop();\n    const handleClose = () => {\n        handleCloseBackdrop();\n        onClose && onClose(false);\n    };\n    useEffect(() => {\n        setOpenBackdrop(open);\n    }, [open, setOpenBackdrop]);\n    return (_jsx(BackdropStyled, { ref: ref, classes: props.classes, open: openBackdrop, onClick: handleClose, invisible: props.invisible, sx: props.sx, transitionDuration: props.transitionDuration, children: props.children }));\n});\nconst BackdropStyled = styled(MuiBackdrop)((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    if (args.invisible)\n        return {\n            backgroundColor: flowColors.transparent.backdrop,\n            backdropFilter: 'blur(0px)',\n        };\n    return null;\n});\n//# sourceMappingURL=backdrop.js.map"],"names":["Backdrop","forwardRef","_a","ref","open","onClose","props","__rest","openBackdrop","handleCloseBackdrop","setOpenBackdrop","useBackdrop","useEffect","_jsx","BackdropStyled","classes","onClick","invisible","sx","transitionDuration","children","styled","MuiBackdrop","backgroundColor","flowColors","transparent","backdrop","backdropFilter"],"mappings":"wTAUY,MAACA,EAAWC,GAAW,CAACC,EAAIC,KACpC,IAAIC,KAAEA,EAAIC,QAAEA,GAAYH,EAAII,EAAQC,EAAOL,EAAI,CAAC,OAAQ,YACxD,MAAMM,aAAEA,EAAYC,oBAAEA,EAAmBC,gBAAEA,GAAoBC,IAQ/D,OAHAC,GAAU,KACNF,EAAgBN,EAAK,GACtB,CAACA,EAAMM,IACFG,EAAKC,EAAgB,CAAEX,IAAKA,EAAKY,QAAST,EAAMS,QAASX,KAAMI,EAAcQ,QAPjE,KAChBP,IACAJ,GAAWA,GAAQ,EAAM,EAK8EY,UAAWX,EAAMW,UAAWC,GAAIZ,EAAMY,GAAIC,mBAAoBb,EAAMa,mBAAoBC,SAAUd,EAAMc,UAAa,IAE9NN,EAAiBO,EAAOC,EAAPD,EAAqBnB,GACbK,EAAOL,EAAI,CAAC,UAC9Be,UACE,CACHM,gBAAiBC,EAAWC,YAAYC,SACxCC,eAAgB,aAEjB"}
+{"version":3,"file":"backdrop.js","sources":["../../../src/components/backdrop/backdrop.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect } from 'react';\nimport MuiBackdrop from '@mui/material/Backdrop';\nimport { styled } from '@mui/material/styles';\nimport useBackdrop from '../common/hook/backdrop';\nimport { paletteLight } from '../../design/skoda/paletteLight.theme';\n/**\n * @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead\n */\nexport const Backdrop = forwardRef((_a, ref) => {\n    var { open, onClose } = _a, props = __rest(_a, [\"open\", \"onClose\"]);\n    const { openBackdrop, handleCloseBackdrop, setOpenBackdrop } = useBackdrop();\n    const handleClose = () => {\n        handleCloseBackdrop();\n        onClose && onClose(false);\n    };\n    useEffect(() => {\n        setOpenBackdrop(open);\n    }, [open, setOpenBackdrop]);\n    return (_jsx(BackdropStyled, { ref: ref, classes: props.classes, open: openBackdrop, onClick: handleClose, invisible: props.invisible, sx: props.sx, transitionDuration: props.transitionDuration, children: props.children }));\n});\nconst BackdropStyled = styled(MuiBackdrop)((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    if (args.invisible)\n        return {\n            backgroundColor: paletteLight.transparent.backdrop,\n            backdropFilter: 'blur(0px)',\n        };\n    return null;\n});\n//# sourceMappingURL=backdrop.js.map"],"names":["Backdrop","forwardRef","_a","ref","open","onClose","props","__rest","openBackdrop","handleCloseBackdrop","setOpenBackdrop","useBackdrop","useEffect","_jsx","BackdropStyled","classes","onClick","invisible","sx","transitionDuration","children","styled","MuiBackdrop","backgroundColor","paletteLight","transparent","backdrop","backdropFilter"],"mappings":"+TAUY,MAACA,EAAWC,GAAW,CAACC,EAAIC,KACpC,IAAIC,KAAEA,EAAIC,QAAEA,GAAYH,EAAII,EAAQC,EAAOL,EAAI,CAAC,OAAQ,YACxD,MAAMM,aAAEA,EAAYC,oBAAEA,EAAmBC,gBAAEA,GAAoBC,IAQ/D,OAHAC,GAAU,KACNF,EAAgBN,EAAK,GACtB,CAACA,EAAMM,IACFG,EAAKC,EAAgB,CAAEX,IAAKA,EAAKY,QAAST,EAAMS,QAASX,KAAMI,EAAcQ,QAPjE,KAChBP,IACAJ,GAAWA,GAAQ,EAAM,EAK8EY,UAAWX,EAAMW,UAAWC,GAAIZ,EAAMY,GAAIC,mBAAoBb,EAAMa,mBAAoBC,SAAUd,EAAMc,UAAa,IAE9NN,EAAiBO,EAAOC,EAAPD,EAAqBnB,GACbK,EAAOL,EAAI,CAAC,UAC9Be,UACE,CACHM,gBAAiBC,EAAaC,YAAYC,SAC1CC,eAAgB,aAEjB"}

package/components/banner/banner.d.ts

@@ -1,57 +1,19 @@
-import { MouseEvent } from 'react';
-import { ButtonVariant } from '../common/type/ButtonVariant';
-export interface BannerProps {
+import React, { ReactNode } from 'react';
+export type BannerProps = {
     /**
-     * Variant of banner defines different look and style
+     * Defines which variant of Banner component should be rendered
+     * @default info
      */
-    variant: 'primary' | 'secondary' | 'tertiary';
+    variant?: 'error' | 'warning' | 'info';
     /**
-     * Icon name base on Icon component
+     * ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment
+     * @default undefined
      */
-    icon?: string;
+    buttons?: ReactNode;
     /**
-     * Icon Type if icon is normal or filled
+     * Content of Banner component
+     * @requires
      */
-    iconIsFilled?: boolean;
-    /**
-     * Text of banner
-     */
-    textContent?: string;
-    /**
-     * Dismiss Button label
-     */
-    buttonLabel?: string;
-    /**
-     * Dismiss Button variant
-     */
-    buttonVariant?: ButtonVariant;
-    /**
-     * Dismiss button callback
-     */
-    buttonCallback?: (ev: MouseEvent) => void;
-    /**
-     * Additional Button show/hide
-     */
-    additionalButton?: boolean;
-    /**
-     * Additional Button variant
-     */
-    additionalButtonVariant?: ButtonVariant;
-    /**
-     * Additional Button Label
-     */
-    additionalButtonLabel?: string;
-    /**
-     * Additional Button Callback
-     */
-    additionalButtonCallback?: (ev: MouseEvent) => void;
-    /**
-     * Additional Button Callback
-     */
-    analyticsCallback?: (ev: MouseEvent) => void;
-    /**
-     * Visibility control over whole banner
-     */
-    isVisible?: boolean;
-}
-export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;
+    children: ReactNode;
+};
+export declare const Banner: React.FC<BannerProps>;

package/components/banner/banner.js

@@ -1,2 +1,2 @@
-import{__rest as a}from"tslib";import{jsx as n,Fragment as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as i,useState as o,useEffect as r}from"react";import l from"@emotion/styled";import{Icon as d}from"../icon/icon.js";import{Button as s}from"../button/button.js";import{flowColors as c}from"../../design/skoda/palette.theme.js";import{ColourSheme as b}from"../../utils/enum.js";const m=i(((i,l)=>{var c=a(i,[]);const[m,u]=o(!0);r((()=>{(c.isVisible||!1===c.isVisible)&&u(c.isVisible)}),[c.isVisible]);const f=(a,n)=>{var t,e,i;"additional"===n?null===(t=c.additionalButtonCallback)||void 0===t||t.call(c,a):null===(e=c.buttonCallback)||void 0===e||e.call(c,a),null===(i=c.analyticsCallback)||void 0===i||i.call(c,a),u(!1)},x=c.iconIsFilled?" filled":"",g=c.buttonVariant,v=c.additionalButtonVariant;return n(t,{children:m&&n(p,{className:c.variant,variant:c.variant,ref:l,"data-testid":"Banner",children:e("div",{className:"bannerWrapper",children:[e("div",{className:"bannerHeader",children:[c.icon&&n(d,{fontSize:"medium",className:`${c.icon} ${x}`,"data-testid":"Banner.icon"}),n("p",{className:"body","data-testid":"Banner.body",children:c.textContent})]}),e("div",{className:"bannerBtnContainer",children:[c.additionalButton&&n(s,{variant:v,compact:!0,label:c.additionalButtonLabel,onClick:a=>f(a,"additional"),"data-testid":"Banner.btn2"}),"secondary"===c.variant?n(s,{variant:g,colourScheme:b.LIGHT_MODE,compact:!0,label:c.additionalButtonLabel,onClick:a=>f(a,"main"),"data-testid":"Banner.btn1"}):n(s,{variant:g,compact:!0,label:c.buttonLabel,onClick:a=>f(a,"main"),"data-testid":"Banner.btn1"})]})]})})})})),p=l.div((n=>{var{theme:t}=n;const e=a(n,["theme"]);let i={};switch(i=Object.assign(Object.assign({},i),{"& > .bannerWrapper":{boxSizing:"border-box",padding:"16px",display:"flex",flexDirection:"column",flexWrap:"nowrap",width:"100%",[t.breakpoints.up("md")]:{padding:"7px 16px",flexDirection:"row"},"& *":{boxSizing:"border-box"}},"& .bannerHeader":{display:"flex",alignItems:"flex-start",justifyContent:"flex-items",width:"100%",marginBottom:"16px",[t.breakpoints.up("md")]:{alignItems:"center",marginBottom:"0"},"& .MuiIcon-root":{color:c.brand.tertiary,fontSize:"20px"}},"& .body":{margin:"0 0 0 8px",fontSize:"14px",fontWeight:"400",letterSpacing:"0.05px"},"& .bannerBtnContainer":{display:"flex",width:"100%",justifyContent:"flex-start",[t.breakpoints.up("md")]:{justifyContent:"flex-end"},"& > div + div":{marginLeft:"16px"}}}),e.variant){case"secondary":i=Object.assign(Object.assign({},i),{backgroundColor:c.brand.tertiary,color:c.onSurface.os0,"& .bannerHeader .MuiIcon-root":{color:c.brand.secondary}});break;case"tertiary":i=Object.assign(Object.assign({},i),{backgroundColor:c.surface.secondary,color:c.onSurface.os800,"& .bannerHeader .MuiIcon-root":{color:c.brand.primary}});break;default:i=Object.assign(Object.assign({},i),{backgroundColor:c.brand.secondary,color:c.onSurface.os900})}return i}));export{m as Banner};
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import"tslib";import{useTheme as o,lighten as e,Stack as i,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"lodash/noop";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"lodash/merge";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"react-keyed-flatten-children";import"react-use";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=o(),u=m((()=>{switch(l){case"error":return d.palette.error.main;case"warning":return d.palette.warning.main;default:return d.palette.info.main}}),[l,d]),g=m((()=>{switch(l){case"error":return e(d.palette.error.light,.9);case"warning":return e(d.palette.warning.light,.9);default:return e(d.palette.info.light,.9)}}),[l,d]);return r(i,{direction:{md:"row",sm:"column"},spacing:0,sx:{borderLeft:"6px solid",alignItems:"flex-start",borderColor:u,backgroundColor:g},"data-testid":"Banner",children:[r(i,{direction:"row",spacing:2,sx:{padding:{md:"12px 16px",sm:"16px",xs:"11px 16px"},flexGrow:1,alignItems:"center"},children:[t(a,{component: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})]}),c&&t(i,{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 { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useEffect, useState, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { Icon } from '../../components/icon';\nimport { Button } from '../../components/button';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport { ColourSheme } from '../../utils/enum';\nexport const Banner = forwardRef((_a, ref) => {\n    var props = __rest(_a, []);\n    const [isBannerVisible, setIsBannerVisible] = useState(true);\n    useEffect(() => {\n        if (props.isVisible || props.isVisible === false) {\n            setIsBannerVisible(props.isVisible);\n        }\n    }, [props.isVisible]);\n    const onClickButtons = (ev, btnType) => {\n        var _a, _b, _c;\n        if (btnType === 'additional') {\n            (_a = props.additionalButtonCallback) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n        }\n        else {\n            (_b = props.buttonCallback) === null || _b === void 0 ? void 0 : _b.call(props, ev);\n        }\n        (_c = props.analyticsCallback) === null || _c === void 0 ? void 0 : _c.call(props, ev);\n        setIsBannerVisible(false);\n    };\n    const isFilled = props.iconIsFilled ? ' filled' : '';\n    const buttonVariantMain = props.buttonVariant;\n    const buttonVariantAdditional = props.additionalButtonVariant;\n    return (_jsx(_Fragment, { children: isBannerVisible && (_jsx(BannerStyled, { className: props.variant, variant: props.variant, ref: ref, \"data-testid\": \"Banner\", children: _jsxs(\"div\", { className: \"bannerWrapper\", children: [_jsxs(\"div\", { className: \"bannerHeader\", children: [props.icon && (_jsx(Icon, { fontSize: \"medium\", className: `${props.icon} ${isFilled}`, \"data-testid\": \"Banner.icon\" })), _jsx(\"p\", { className: \"body\", \"data-testid\": \"Banner.body\", children: props.textContent })] }), _jsxs(\"div\", { className: \"bannerBtnContainer\", children: [props.additionalButton && (_jsx(Button, { variant: buttonVariantAdditional, compact: true, label: props.additionalButtonLabel, onClick: (ev) => onClickButtons(ev, 'additional'), \"data-testid\": \"Banner.btn2\" })), props.variant === 'secondary' ? (_jsx(Button, { variant: buttonVariantMain, colourScheme: ColourSheme.LIGHT_MODE, compact: true, label: props.additionalButtonLabel, onClick: (ev) => onClickButtons(ev, 'main'), \"data-testid\": \"Banner.btn1\" })) : (_jsx(Button, { variant: buttonVariantMain, compact: true, label: props.buttonLabel, onClick: (ev) => onClickButtons(ev, 'main'), \"data-testid\": \"Banner.btn1\" }))] })] }) })) }));\n});\nconst BannerStyled = styled.div((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    let styles = {};\n    styles = Object.assign(Object.assign({}, styles), { '& > .bannerWrapper': {\n            boxSizing: 'border-box',\n            padding: '16px',\n            display: 'flex',\n            flexDirection: 'column',\n            flexWrap: 'nowrap',\n            width: '100%',\n            [theme.breakpoints.up('md')]: {\n                padding: '7px 16px',\n                flexDirection: 'row',\n            },\n            '& *': {\n                boxSizing: 'border-box',\n            },\n        }, '& .bannerHeader': {\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'flex-items',\n            width: '100%',\n            marginBottom: '16px',\n            [theme.breakpoints.up('md')]: {\n                alignItems: 'center',\n                marginBottom: '0',\n            },\n            '& .MuiIcon-root': {\n                color: flowColors.brand.tertiary,\n                fontSize: '20px',\n            },\n        }, '& .body': {\n            margin: '0 0 0 8px',\n            fontSize: '14px',\n            fontWeight: '400',\n            letterSpacing: '0.05px',\n        }, '& .bannerBtnContainer': {\n            display: 'flex',\n            width: '100%',\n            justifyContent: 'flex-start',\n            [theme.breakpoints.up('md')]: {\n                justifyContent: 'flex-end',\n            },\n            '& > div + div': {\n                marginLeft: '16px',\n            },\n        } });\n    switch (props.variant) {\n        case 'secondary':\n            styles = Object.assign(Object.assign({}, styles), { backgroundColor: flowColors.brand.tertiary, color: flowColors.onSurface.os0, '& .bannerHeader .MuiIcon-root': {\n                    color: flowColors.brand.secondary,\n                } });\n            break;\n        case 'tertiary':\n            styles = Object.assign(Object.assign({}, styles), { backgroundColor: flowColors.surface.secondary, color: flowColors.onSurface.os800, '& .bannerHeader .MuiIcon-root': {\n                    color: flowColors.brand.primary,\n                } });\n            break;\n        case 'primary':\n        default:\n            styles = Object.assign(Object.assign({}, styles), { backgroundColor: flowColors.brand.secondary, color: flowColors.onSurface.os900 });\n            break;\n    }\n    return styles;\n});\n//# sourceMappingURL=banner.js.map"],"names":["Banner","forwardRef","_a","ref","props","__rest","isBannerVisible","setIsBannerVisible","useState","useEffect","isVisible","onClickButtons","ev","btnType","_b","_c","additionalButtonCallback","call","buttonCallback","analyticsCallback","isFilled","iconIsFilled","buttonVariantMain","buttonVariant","buttonVariantAdditional","additionalButtonVariant","_jsx","_Fragment","children","BannerStyled","className","variant","_jsxs","icon","Icon","fontSize","textContent","additionalButton","Button","compact","label","additionalButtonLabel","onClick","colourScheme","ColourSheme","LIGHT_MODE","buttonLabel","styled","div","theme","styles","Object","assign","boxSizing","padding","display","flexDirection","flexWrap","width","breakpoints","up","alignItems","justifyContent","marginBottom","color","flowColors","brand","tertiary","margin","fontWeight","letterSpacing","marginLeft","backgroundColor","onSurface","os0","secondary","surface","os800","primary","os900"],"mappings":"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"}
+{"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';\nexport const Banner = ({ children, variant = 'info', buttons }) => {\n    const theme = useTheme();\n    const borderColor = useMemo(() => {\n        switch (variant) {\n            case 'error':\n                return theme.palette.error.main;\n            case 'warning':\n                return theme.palette.warning.main;\n            case 'info':\n            default:\n                return theme.palette.info.main;\n        }\n    }, [variant, theme]);\n    const backgroundColor = useMemo(() => {\n        switch (variant) {\n            case 'error':\n                return lighten(theme.palette.error.light, 0.9);\n            case 'warning':\n                return lighten(theme.palette.warning.light, 0.9);\n            case 'info':\n            default:\n                return 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(Box, { component: 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","useMemo","palette","error","main","warning","info","backgroundColor","lighten","light","_jsxs","Stack","direction","md","sm","spacing","sx","borderLeft","alignItems","padding","xs","flexGrow","_jsx","Box","component","Icon","name","iconStyle","color","alignSelf","marginTop","lg","Typography","useFlexGap","textWrap","flexWrap","marginRight"],"mappings":"i5HAIY,MAACA,EAAS,EAAGC,WAAUC,UAAU,OAAQC,cACjD,MAAMC,EAAQC,IACRC,EAAcC,GAAQ,KACxB,OAAQL,GACJ,IAAK,QACD,OAAOE,EAAMI,QAAQC,MAAMC,KAC/B,IAAK,UACD,OAAON,EAAMI,QAAQG,QAAQD,KAEjC,QACI,OAAON,EAAMI,QAAQI,KAAKF,KACjC,GACF,CAACR,EAASE,IACPS,EAAkBN,GAAQ,KAC5B,OAAQL,GACJ,IAAK,QACD,OAAOY,EAAQV,EAAMI,QAAQC,MAAMM,MAAO,IAC9C,IAAK,UACD,OAAOD,EAAQV,EAAMI,QAAQG,QAAQI,MAAO,IAEhD,QACI,OAAOD,EAAQV,EAAMI,QAAQI,KAAKG,MAAO,IAChD,GACF,CAACb,EAASE,IACb,OAAQY,EAAMC,EAAO,CAAEC,UAAW,CAAEC,GAAI,MAAOC,GAAI,UAAYC,QAAS,EAAGC,GAAI,CACvEC,WAAY,YACZC,WAAY,aACZlB,cACAO,mBACD,cAAe,SAAUZ,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,EAAK,CAAEC,UAAWC,EAAMC,KAAkB,SAAZ9B,EAAqB,cAAgB,qBAAsB+B,UAAW,SAAUC,MAAOhC,EAASoB,GAAI,CACxTa,UAAW,aACXD,MAAO5B,EACP8B,UAAW,CAAEC,GAAI,iBAAkBlB,GAAI,iBAAkBC,GAAI,sBAC3DQ,EAAKC,EAAK,CAAE5B,SAA8B,iBAAbA,EAAwB2B,EAAKU,EAAY,CAAErC,SAAUA,IAAcA,OAAiBE,GAAYyB,EAAKX,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGkB,YAAY,EAAMjB,GAAI,CAAEG,QAAS,WAAYe,SAAU,SAAUC,SAAU,OAAQN,UAAW,SAAUO,YAAa,QAAU,cAAe,iBAAkBzC,SAAUE,MAAiB"}

package/components/button/button.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { IconNameProp } from '../icon';
 import { ColourSheme } from '../../utils/enum';
 /**
  * @type ButtonVariants
@@ -32,7 +33,7 @@ export interface ButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'co
     /**
      * Icon name. For example "heart".
      */
-    icon?: string;
+    icon?: IconNameProp;
     /**
      * Compact, minimalistic view of component
      */

package/components/button/button.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsx as r}from"react/jsx-runtime";import{forwardRef as i,useState as o,useMemo as a}from"react";import n from"@mui/material/Button";import{styled as e}from"@mui/material/styles";import{Icon as c}from"../icon/icon.js";import s from"../common/styled/buttonFocusVisibleStyled.js";import{ColourSheme as l}from"../../utils/enum.js";import{ternaryCondition as m}from"../../utils/utilities.js";import u from"lodash/merge";var d;!function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.GHOST="ghost",t.TERTIARY="tertiary",t.NAVIGATION="navigation"}(d||(d={}));const p=i(((i,n)=>{var e,{variant:u=d.PRIMARY,colourScheme:p,direction:h="back",label:A,icon:T,compact:g,disabled:v}=i,b=t(i,["variant","colourScheme","direction","label","icon","compact","disabled"]);const[N,O]=o(!1),M=a((()=>I(u)),[u]),S=a((()=>R(u)),[u]),Y="navigation"===u,y=Y&&"forward"===h,B=Y&&"back"===h;return r(s,{focusVisible:N,isNavigationVariant:Y,fullWidth:b.fullWidth,children:r(f,Object.assign({},b,{ref:n,variant:M,color:S,startIcon:T&&!Y||B?r(c,{className:B?"arrow-left":T}):void 0,endIcon:y?r(c,{className:"arrow-right"}):void 0,disabled:v,size:g?"small":void 0,onFocusVisible:()=>O(!0),onBlur:t=>{O(!1),b.onBlur&&b.onBlur(t)},className:m(p,l.LIGHT_MODE,"MuiButton-white",""),children:null!==(e=b.children)&&void 0!==e?e:A}))})})),f=e(n)((r=>{const i=t(r,["theme"]),o="navigation"===i.variant,a={};return!i.children&&i.startIcon&&u(a,{width:44,padding:0,"& .MuiButton-startIcon":{margin:"-4px 0 0 0",fontSize:"16px",".MuiIcon-root":{paddingTop:3,"&::before":{marginLeft:1}}}}),o&&u(a,{"& .MuiButton-endIcon":{marginTop:"2px"},"& .MuiButton-startIcon":{marginTop:"2px"}}),a})),I=t=>{switch(t){case d.PRIMARY:return"contained";case d.GHOST:return"outlined";case d.NAVIGATION:return"navigation";case d.SECONDARY:return"contained";case d.TERTIARY:return"text";default:return"contained"}},R=t=>{switch(t){case d.PRIMARY:return"primary";case d.GHOST:case d.NAVIGATION:case d.SECONDARY:case d.TERTIARY:return"secondary";default:return"primary"}};export{p as Button,d as ButtonVariants};
+import{__rest as t}from"tslib";import{jsx as i}from"react/jsx-runtime";import{forwardRef as r,useState as o,useMemo as n}from"react";import e from"@mui/material/Button";import{styled as a}from"@mui/material/styles";import{Icon as c}from"../icon/icon.js";import"../icon/icon.definitions.js";import s from"../common/styled/buttonFocusVisibleStyled.js";import{ColourSheme as m}from"../../utils/enum.js";import{ternaryCondition as u}from"../../utils/utilities.js";import l from"lodash/merge";var d;!function(t){t.PRIMARY="primary",t.SECONDARY="secondary",t.GHOST="ghost",t.TERTIARY="tertiary",t.NAVIGATION="navigation"}(d||(d={}));const p=r(((r,e)=>{var a,{variant:l=d.PRIMARY,colourScheme:p,direction:h="back",label:A,icon:T,compact:g,disabled:v}=r,b=t(r,["variant","colourScheme","direction","label","icon","compact","disabled"]);const[N,O]=o(!1),M=n((()=>I(l)),[l]),S=n((()=>R(l)),[l]),Y="navigation"===l,y=Y&&"forward"===h,B=Y&&"back"===h;return i(s,{focusVisible:N,isNavigationVariant:Y,fullWidth:b.fullWidth,children:i(f,Object.assign({},b,{ref:e,variant:M,color:S,startIcon:T&&!Y||B?i(c,{name:B?"arrow-left":T}):void 0,endIcon:y?i(c,{name:"arrow-right"}):void 0,disabled:v,size:g?"small":void 0,onFocusVisible:()=>O(!0),onBlur:t=>{O(!1),b.onBlur&&b.onBlur(t)},className:u(p,m.LIGHT_MODE,"MuiButton-white",""),children:null!==(a=b.children)&&void 0!==a?a:A}))})})),f=a(e)((i=>{const r=t(i,["theme"]),o="navigation"===r.variant,n={};return!r.children&&r.startIcon&&l(n,{width:44,padding:0,"& .MuiButton-startIcon":{margin:"-4px 0 0 0",fontSize:"16px",".MuiIcon-root":{paddingTop:3,"&::before":{marginLeft:1}}}}),o&&l(n,{"& .MuiButton-endIcon":{marginTop:"2px"},"& .MuiButton-startIcon":{marginTop:"2px"}}),n})),I=t=>{switch(t){case d.PRIMARY:return"contained";case d.GHOST:return"outlined";case d.NAVIGATION:return"navigation";case d.SECONDARY:return"contained";case d.TERTIARY:return"text";default:return"contained"}},R=t=>{switch(t){case d.PRIMARY:return"primary";case d.GHOST:case d.NAVIGATION:case d.SECONDARY:case d.TERTIARY:return"secondary";default:return"primary"}};export{p as Button,d as ButtonVariants};
 //# sourceMappingURL=button.js.map

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useMemo, useState } from 'react';\nimport MuiButton from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport ButtonFocusVisibleStyled from '../common/styled/buttonFocusVisibleStyled';\nimport { ColourSheme } from '../../utils/enum';\nimport { ternaryCondition } from '../../utils/utilities';\nimport merge from 'lodash/merge';\n/**\n * @type ButtonVariants\n * @description The variants of the Button component.\n */\nexport var ButtonVariants;\n(function (ButtonVariants) {\n    ButtonVariants[\"PRIMARY\"] = \"primary\";\n    ButtonVariants[\"SECONDARY\"] = \"secondary\";\n    ButtonVariants[\"GHOST\"] = \"ghost\";\n    ButtonVariants[\"TERTIARY\"] = \"tertiary\";\n    ButtonVariants[\"NAVIGATION\"] = \"navigation\";\n})(ButtonVariants || (ButtonVariants = {}));\n/**\n * @description SkodaFlow Button component.\n * Properties are inherited from HTML Button element.\n * @param props ButtonProps\n * @returns React Functional Component\n * @deprecated Use Button component from '@mui/material' module instead.\n */\nexport const Button = forwardRef((_a, ref) => {\n    var _b;\n    var { variant = ButtonVariants.PRIMARY, colourScheme, direction = 'back', label, icon, compact, disabled } = _a, props = __rest(_a, [\"variant\", \"colourScheme\", \"direction\", \"label\", \"icon\", \"compact\", \"disabled\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const buttonVariantResolved = useMemo(() => getButtonVariant(variant), [variant]);\n    const buttonColor = useMemo(() => getButtonColor(variant), [variant]);\n    const onBlur = (e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    };\n    const isNavigationVariant = variant === 'navigation';\n    const isDirectionForward = isNavigationVariant && direction === 'forward';\n    const isDirectionBack = isNavigationVariant && direction === 'back';\n    return (_jsx(ButtonFocusVisibleStyled, { focusVisible: focusVisibled, isNavigationVariant: isNavigationVariant, fullWidth: props.fullWidth, children: _jsx(ButtonStyled, Object.assign({}, props, { ref: ref, variant: buttonVariantResolved, color: buttonColor, startIcon: (icon && !isNavigationVariant) || isDirectionBack ? (_jsx(Icon, { className: isDirectionBack ? 'arrow-left' : icon })) : undefined, endIcon: isDirectionForward ? _jsx(Icon, { className: \"arrow-right\" }) : undefined, disabled: disabled, size: compact ? 'small' : undefined, onFocusVisible: () => setFocusVisible(true), onBlur: onBlur, className: ternaryCondition(colourScheme, ColourSheme.LIGHT_MODE, 'MuiButton-white', ''), children: (_b = props.children) !== null && _b !== void 0 ? _b : label })) }));\n});\n/**\n * @description Button styling defintion based on props\n */\nconst ButtonStyled = styled(MuiButton)((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    const isNavigationVariant = props.variant === 'navigation';\n    const styles = {};\n    if (!props.children && props.startIcon) {\n        merge(styles, {\n            width: 44,\n            padding: 0,\n            '& .MuiButton-startIcon': {\n                margin: '-4px 0 0 0',\n                fontSize: '16px',\n                '.MuiIcon-root': {\n                    paddingTop: 3,\n                    '&::before': {\n                        marginLeft: 1,\n                    },\n                },\n            },\n        });\n    }\n    if (isNavigationVariant) {\n        merge(styles, {\n            '& .MuiButton-endIcon': {\n                marginTop: '2px',\n            },\n            '& .MuiButton-startIcon': {\n                marginTop: '2px',\n            },\n        });\n    }\n    return styles;\n});\nconst getButtonVariant = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'contained';\n        case ButtonVariants.GHOST:\n            return 'outlined';\n        case ButtonVariants.NAVIGATION:\n            return 'navigation';\n        case ButtonVariants.SECONDARY:\n            return 'contained';\n        case ButtonVariants.TERTIARY:\n            return 'text';\n        default:\n            return 'contained';\n    }\n};\nconst getButtonColor = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'primary';\n        case ButtonVariants.GHOST:\n            return 'secondary';\n        case ButtonVariants.NAVIGATION:\n            return 'secondary';\n        case ButtonVariants.SECONDARY:\n            return 'secondary';\n        case ButtonVariants.TERTIARY:\n            return 'secondary';\n        default:\n            return 'primary';\n    }\n};\n//# sourceMappingURL=button.js.map"],"names":["ButtonVariants","Button","forwardRef","_a","ref","_b","variant","PRIMARY","colourScheme","direction","label","icon","compact","disabled","props","__rest","focusVisibled","setFocusVisible","useState","buttonVariantResolved","useMemo","getButtonVariant","buttonColor","getButtonColor","isNavigationVariant","isDirectionForward","isDirectionBack","_jsx","ButtonFocusVisibleStyled","focusVisible","fullWidth","children","ButtonStyled","Object","assign","color","startIcon","Icon","className","undefined","endIcon","size","onFocusVisible","onBlur","e","ternaryCondition","ColourSheme","LIGHT_MODE","styled","MuiButton","styles","merge","width","padding","margin","fontSize","paddingTop","marginLeft","marginTop","GHOST","NAVIGATION","SECONDARY","TERTIARY"],"mappings":"ocAcU,IAACA,GACX,SAAWA,GACPA,EAAwB,QAAI,UAC5BA,EAA0B,UAAI,YAC9BA,EAAsB,MAAI,QAC1BA,EAAyB,SAAI,WAC7BA,EAA2B,WAAI,YAClC,CAND,CAMGA,IAAmBA,EAAiB,CAAE,IAQ7B,MAACC,EAASC,GAAW,CAACC,EAAIC,KAClC,IAAIC,GACAC,QAAEA,EAAUN,EAAeO,QAAOC,aAAEA,EAAYC,UAAEA,EAAY,OAAMC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,SAAEA,GAAaV,EAAIW,EAAQC,EAAOZ,EAAI,CAAC,UAAW,eAAgB,YAAa,QAAS,OAAQ,UAAW,aACzM,MAAOa,EAAeC,GAAmBC,GAAS,GAC5CC,EAAwBC,GAAQ,IAAMC,EAAiBf,IAAU,CAACA,IAClEgB,EAAcF,GAAQ,IAAMG,EAAejB,IAAU,CAACA,IAMtDkB,EAAkC,eAAZlB,EACtBmB,EAAqBD,GAAqC,YAAdf,EAC5CiB,EAAkBF,GAAqC,SAAdf,EAC/C,OAAQkB,EAAKC,EAA0B,CAAEC,aAAcb,EAAeQ,oBAAqBA,EAAqBM,UAAWhB,EAAMgB,UAAWC,SAAUJ,EAAKK,EAAcC,OAAOC,OAAO,CAAE,EAAEpB,EAAO,CAAEV,IAAKA,EAAKE,QAASa,EAAuBgB,MAAOb,EAAac,UAAYzB,IAASa,GAAwBE,EAAmBC,EAAKU,EAAM,CAAEC,UAAWZ,EAAkB,aAAef,SAAW4B,EAAWC,QAASf,EAAqBE,EAAKU,EAAM,CAAEC,UAAW,qBAAmBC,EAAW1B,SAAUA,EAAU4B,KAAM7B,EAAU,aAAU2B,EAAWG,eAAgB,IAAMzB,GAAgB,GAAO0B,OAR3jBC,IACZ3B,GAAgB,GACZH,EAAM6B,QACN7B,EAAM6B,OAAOC,EAAE,EAKokBN,UAAWO,EAAiBrC,EAAcsC,EAAYC,WAAY,kBAAmB,IAAKhB,SAAoC,QAAzB1B,EAAKS,EAAMiB,gBAA6B,IAAP1B,EAAgBA,EAAKK,MAAc,IAKlwBsB,EAAegB,EAAOC,EAAPD,EAAmB7C,IAEpC,MAAMW,EADqBC,EAAOZ,EAAI,CAAC,UAEjCqB,EAAwC,eAAlBV,EAAMR,QAC5B4C,EAAS,CAAA,EA2Bf,OA1BKpC,EAAMiB,UAAYjB,EAAMsB,WACzBe,EAAMD,EAAQ,CACVE,MAAO,GACPC,QAAS,EACT,yBAA0B,CACtBC,OAAQ,aACRC,SAAU,OACV,gBAAiB,CACbC,WAAY,EACZ,YAAa,CACTC,WAAY,OAM5BjC,GACA2B,EAAMD,EAAQ,CACV,uBAAwB,CACpBQ,UAAW,OAEf,yBAA0B,CACtBA,UAAW,SAIhBR,CAAM,IAEX7B,EAAoBf,IACtB,OAAQA,GACJ,KAAKN,EAAeO,QAChB,MAAO,YACX,KAAKP,EAAe2D,MAChB,MAAO,WACX,KAAK3D,EAAe4D,WAChB,MAAO,aACX,KAAK5D,EAAe6D,UAChB,MAAO,YACX,KAAK7D,EAAe8D,SAChB,MAAO,OACX,QACI,MAAO,YACd,EAECvC,EAAkBjB,IACpB,OAAQA,GACJ,KAAKN,EAAeO,QAChB,MAAO,UACX,KAAKP,EAAe2D,MAEpB,KAAK3D,EAAe4D,WAEpB,KAAK5D,EAAe6D,UAEpB,KAAK7D,EAAe8D,SAChB,MAAO,YACX,QACI,MAAO,UACd"}
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useMemo, useState } from 'react';\nimport MuiButton from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport ButtonFocusVisibleStyled from '../common/styled/buttonFocusVisibleStyled';\nimport { ColourSheme } from '../../utils/enum';\nimport { ternaryCondition } from '../../utils/utilities';\nimport merge from 'lodash/merge';\n/**\n * @type ButtonVariants\n * @description The variants of the Button component.\n */\nexport var ButtonVariants;\n(function (ButtonVariants) {\n    ButtonVariants[\"PRIMARY\"] = \"primary\";\n    ButtonVariants[\"SECONDARY\"] = \"secondary\";\n    ButtonVariants[\"GHOST\"] = \"ghost\";\n    ButtonVariants[\"TERTIARY\"] = \"tertiary\";\n    ButtonVariants[\"NAVIGATION\"] = \"navigation\";\n})(ButtonVariants || (ButtonVariants = {}));\n/**\n * @description SkodaFlow Button component.\n * Properties are inherited from HTML Button element.\n * @param props ButtonProps\n * @returns React Functional Component\n * @deprecated Use Button component from '@mui/material' module instead.\n */\nexport const Button = forwardRef((_a, ref) => {\n    var _b;\n    var { variant = ButtonVariants.PRIMARY, colourScheme, direction = 'back', label, icon, compact, disabled } = _a, props = __rest(_a, [\"variant\", \"colourScheme\", \"direction\", \"label\", \"icon\", \"compact\", \"disabled\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const buttonVariantResolved = useMemo(() => getButtonVariant(variant), [variant]);\n    const buttonColor = useMemo(() => getButtonColor(variant), [variant]);\n    const onBlur = (e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    };\n    const isNavigationVariant = variant === 'navigation';\n    const isDirectionForward = isNavigationVariant && direction === 'forward';\n    const isDirectionBack = isNavigationVariant && direction === 'back';\n    return (_jsx(ButtonFocusVisibleStyled, { focusVisible: focusVisibled, isNavigationVariant: isNavigationVariant, fullWidth: props.fullWidth, children: _jsx(ButtonStyled, Object.assign({}, props, { ref: ref, variant: buttonVariantResolved, color: buttonColor, startIcon: (icon && !isNavigationVariant) || isDirectionBack ? (_jsx(Icon, { name: isDirectionBack ? 'arrow-left' : icon })) : undefined, endIcon: isDirectionForward ? _jsx(Icon, { name: \"arrow-right\" }) : undefined, disabled: disabled, size: compact ? 'small' : undefined, onFocusVisible: () => setFocusVisible(true), onBlur: onBlur, className: ternaryCondition(colourScheme, ColourSheme.LIGHT_MODE, 'MuiButton-white', ''), children: (_b = props.children) !== null && _b !== void 0 ? _b : label })) }));\n});\n/**\n * @description Button styling defintion based on props\n */\nconst ButtonStyled = styled(MuiButton)((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const props = args;\n    const isNavigationVariant = props.variant === 'navigation';\n    const styles = {};\n    if (!props.children && props.startIcon) {\n        merge(styles, {\n            width: 44,\n            padding: 0,\n            '& .MuiButton-startIcon': {\n                margin: '-4px 0 0 0',\n                fontSize: '16px',\n                '.MuiIcon-root': {\n                    paddingTop: 3,\n                    '&::before': {\n                        marginLeft: 1,\n                    },\n                },\n            },\n        });\n    }\n    if (isNavigationVariant) {\n        merge(styles, {\n            '& .MuiButton-endIcon': {\n                marginTop: '2px',\n            },\n            '& .MuiButton-startIcon': {\n                marginTop: '2px',\n            },\n        });\n    }\n    return styles;\n});\nconst getButtonVariant = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'contained';\n        case ButtonVariants.GHOST:\n            return 'outlined';\n        case ButtonVariants.NAVIGATION:\n            return 'navigation';\n        case ButtonVariants.SECONDARY:\n            return 'contained';\n        case ButtonVariants.TERTIARY:\n            return 'text';\n        default:\n            return 'contained';\n    }\n};\nconst getButtonColor = (variant) => {\n    switch (variant) {\n        case ButtonVariants.PRIMARY:\n            return 'primary';\n        case ButtonVariants.GHOST:\n            return 'secondary';\n        case ButtonVariants.NAVIGATION:\n            return 'secondary';\n        case ButtonVariants.SECONDARY:\n            return 'secondary';\n        case ButtonVariants.TERTIARY:\n            return 'secondary';\n        default:\n            return 'primary';\n    }\n};\n//# sourceMappingURL=button.js.map"],"names":["ButtonVariants","Button","forwardRef","_a","ref","_b","variant","PRIMARY","colourScheme","direction","label","icon","compact","disabled","props","__rest","focusVisibled","setFocusVisible","useState","buttonVariantResolved","useMemo","getButtonVariant","buttonColor","getButtonColor","isNavigationVariant","isDirectionForward","isDirectionBack","_jsx","ButtonFocusVisibleStyled","focusVisible","fullWidth","children","ButtonStyled","Object","assign","color","startIcon","Icon","name","undefined","endIcon","size","onFocusVisible","onBlur","e","className","ternaryCondition","ColourSheme","LIGHT_MODE","styled","MuiButton","styles","merge","width","padding","margin","fontSize","paddingTop","marginLeft","marginTop","GHOST","NAVIGATION","SECONDARY","TERTIARY"],"mappings":"weAcU,IAACA,GACX,SAAWA,GACPA,EAAwB,QAAI,UAC5BA,EAA0B,UAAI,YAC9BA,EAAsB,MAAI,QAC1BA,EAAyB,SAAI,WAC7BA,EAA2B,WAAI,YAClC,CAND,CAMGA,IAAmBA,EAAiB,CAAE,IAQ7B,MAACC,EAASC,GAAW,CAACC,EAAIC,KAClC,IAAIC,GACAC,QAAEA,EAAUN,EAAeO,QAAOC,aAAEA,EAAYC,UAAEA,EAAY,OAAMC,MAAEA,EAAKC,KAAEA,EAAIC,QAAEA,EAAOC,SAAEA,GAAaV,EAAIW,EAAQC,EAAOZ,EAAI,CAAC,UAAW,eAAgB,YAAa,QAAS,OAAQ,UAAW,aACzM,MAAOa,EAAeC,GAAmBC,GAAS,GAC5CC,EAAwBC,GAAQ,IAAMC,EAAiBf,IAAU,CAACA,IAClEgB,EAAcF,GAAQ,IAAMG,EAAejB,IAAU,CAACA,IAMtDkB,EAAkC,eAAZlB,EACtBmB,EAAqBD,GAAqC,YAAdf,EAC5CiB,EAAkBF,GAAqC,SAAdf,EAC/C,OAAQkB,EAAKC,EAA0B,CAAEC,aAAcb,EAAeQ,oBAAqBA,EAAqBM,UAAWhB,EAAMgB,UAAWC,SAAUJ,EAAKK,EAAcC,OAAOC,OAAO,CAAE,EAAEpB,EAAO,CAAEV,IAAKA,EAAKE,QAASa,EAAuBgB,MAAOb,EAAac,UAAYzB,IAASa,GAAwBE,EAAmBC,EAAKU,EAAM,CAAEC,KAAMZ,EAAkB,aAAef,SAAW4B,EAAWC,QAASf,EAAqBE,EAAKU,EAAM,CAAEC,KAAM,qBAAmBC,EAAW1B,SAAUA,EAAU4B,KAAM7B,EAAU,aAAU2B,EAAWG,eAAgB,IAAMzB,GAAgB,GAAO0B,OARjjBC,IACZ3B,GAAgB,GACZH,EAAM6B,QACN7B,EAAM6B,OAAOC,EAAE,EAK0jBC,UAAWC,EAAiBtC,EAAcuC,EAAYC,WAAY,kBAAmB,IAAKjB,SAAoC,QAAzB1B,EAAKS,EAAMiB,gBAA6B,IAAP1B,EAAgBA,EAAKK,MAAc,IAKxvBsB,EAAeiB,EAAOC,EAAPD,EAAmB9C,IAEpC,MAAMW,EADqBC,EAAOZ,EAAI,CAAC,UAEjCqB,EAAwC,eAAlBV,EAAMR,QAC5B6C,EAAS,CAAA,EA2Bf,OA1BKrC,EAAMiB,UAAYjB,EAAMsB,WACzBgB,EAAMD,EAAQ,CACVE,MAAO,GACPC,QAAS,EACT,yBAA0B,CACtBC,OAAQ,aACRC,SAAU,OACV,gBAAiB,CACbC,WAAY,EACZ,YAAa,CACTC,WAAY,OAM5BlC,GACA4B,EAAMD,EAAQ,CACV,uBAAwB,CACpBQ,UAAW,OAEf,yBAA0B,CACtBA,UAAW,SAIhBR,CAAM,IAEX9B,EAAoBf,IACtB,OAAQA,GACJ,KAAKN,EAAeO,QAChB,MAAO,YACX,KAAKP,EAAe4D,MAChB,MAAO,WACX,KAAK5D,EAAe6D,WAChB,MAAO,aACX,KAAK7D,EAAe8D,UAChB,MAAO,YACX,KAAK9D,EAAe+D,SAChB,MAAO,OACX,QACI,MAAO,YACd,EAECxC,EAAkBjB,IACpB,OAAQA,GACJ,KAAKN,EAAeO,QAChB,MAAO,UACX,KAAKP,EAAe4D,MAEpB,KAAK5D,EAAe6D,WAEpB,KAAK7D,EAAe8D,UAEpB,KAAK9D,EAAe+D,SAChB,MAAO,YACX,QACI,MAAO,UACd"}

package/components/card/Card.d.ts

@@ -0,0 +1,92 @@
+import { SxProps, Theme } from '@mui/material';
+import { FC, ReactNode, MouseEvent } from 'react';
+export type BasicCardProps = {
+    /**
+     * Defines which color should the card be
+     * @default white
+     */
+    color: 'white' | 'grey' | 'clear';
+    /**
+     * Content of a Card
+     * @requires
+     */
+    children: ReactNode;
+    /**
+     * Specifies how the Card is sized
+     * content - Card will adjust its width based on width of its content
+     * parent - Card will occupy available space based on its parent
+     * @default content
+     */
+    cardSizing?: 'content' | 'parent';
+    /**
+     * Specifies that card works like a checkbox
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Specifies that card have flipping detail
+     * @default false
+     */
+    flipping?: boolean;
+    /**
+     * Specifies that card behaves as a link
+     * @default false
+     */
+    link?: boolean;
+    /**
+     * Renders Card disabled
+     * @default false
+     */
+    disabled?: boolean;
+};
+export type SelectableCardProps = {
+    selectable: true;
+    /**
+     * Callback that is called when user click on selectable card
+     * @param isSelected
+     * @param event
+     * @returns void
+     * @default undefined
+     */
+    handleSelection?: (isSelected: boolean, event: any) => void;
+    /**
+     * Defines if selectable card is currently selected
+     * @required
+     */
+    isSelected: boolean;
+};
+export type FlippingCardProps = {
+    flipping: true;
+    /**
+     * Specifies if detail should be flipped on card hover
+     * @default true
+     */
+    flipOnHover?: boolean;
+    /**
+     * Specifies if detail should be flipped
+     * @default false
+     */
+    isFlipped?: boolean;
+    /**
+     * Content of the Card when it is flipped
+     */
+    flippingContent: ReactNode;
+};
+export type LinkCardProps = {
+    link: true;
+    /**
+     * Anchor link
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * On click handler
+     * @param e Click Event
+     * @returns void
+     */
+    onClick?: (e: MouseEvent) => void;
+};
+export type CardComponentProps = (SelectableCardProps | FlippingCardProps | LinkCardProps) & BasicCardProps;
+export declare const Card: FC<CardComponentProps>;
+export declare const CardDisabledOverlay: () => import("react/jsx-runtime").JSX.Element;
+export declare const useCardSxProps: (color: CardComponentProps['color'], cardSizing: CardComponentProps['cardSizing'], isDisabled?: boolean, isActive?: boolean, canInteract?: boolean) => SxProps<Theme>;

package/components/card/Card.js

@@ -0,0 +1,2 @@
+import{__rest as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{Box as a,alpha as t}from"@mui/material";import{useMemo as o}from"react";import{SelectableCard as i}from"./SelectableCard.js";import{FlippingCard as c}from"./FlippingCard.js";import{SimpleCard as n}from"./SimpleCard.js";import{LinkCard as s}from"./LinkCard.js";const d=a=>{var{color:t="white",cardSizing:o="content"}=a,d=r(a,["color","cardSizing"]);const b=Object.assign({color:t,cardSizing:o},d);return function(r){return!0===r.selectable}(b)?e(i,Object.assign({},b)):function(r){return!0===r.flipping}(b)?e(c,Object.assign({},b)):function(r){return!0===r.link}(b)?e(s,Object.assign({},b)):e(n,Object.assign({},b))},b=()=>e(a,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,background:r=>t(r.palette.surface.secondary,.8),zIndex:8}}),l=(r,e,a,t,i)=>o((()=>{let o={position:"relative",overflow:"hidden",padding:2,borderRadius:"8px",border:"1px solid",display:"content"===e?"inline-block":"block",height:"content"===e?void 0:"100%",transition:"border-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",background:"var(--card-background)",borderColor:t?"var(--card-active-border)":"var(--card-inactive-border)","--card-active-border":r=>r.palette.primary.main,"--card-active-hover-border":r=>r.palette.primary.light};return i&&(o=Object.assign(Object.assign({},o),{cursor:"pointer","&:hover":{borderColor:t?"var(--card-active-hover-border)":"var(--card-inactive-hover-border)"}})),a&&(o=Object.assign(Object.assign({},o),{cursor:"not-allowed"})),"white"===r&&(o=Object.assign(Object.assign({},o),{"--card-background":r=>r.palette.surface.tertiary,"--card-inactive-border":r=>r.palette.surface.secondary,"--card-inactive-hover-border":r=>r.palette.surface.primary})),"grey"===r&&(o=Object.assign(Object.assign({},o),{"--card-background":r=>r.palette.surface.primary,"--card-inactive-border":r=>r.palette.surface.secondary,"--card-inactive-hover-border":r=>r.palette.surface.primary})),"clear"===r&&(o=Object.assign(Object.assign({},o),{"--card-background":"transparent","--card-inactive-border":r=>r.palette.onSurface.os200,"--card-inactive-hover-border":r=>r.palette.surface.secondary,borderStyle:"dashed"})),o}),[r,t,i,e,a]);export{d as Card,b as CardDisabledOverlay,l as useCardSxProps};
+//# sourceMappingURL=Card.js.map

package/components/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Box, alpha } from '@mui/material';\nimport { useMemo } from 'react';\nimport { SelectableCard } from './SelectableCard';\nimport { FlippingCard } from './FlippingCard';\nimport { SimpleCard } from './SimpleCard';\nimport { LinkCard } from './LinkCard';\nfunction isFlippingCard(props) {\n    return props.flipping === true;\n}\nfunction isSelectableCard(props) {\n    return props.selectable === true;\n}\nfunction isLinkCard(props) {\n    return props.link === true;\n}\nexport const Card = (_a) => {\n    var { color = 'white', cardSizing = 'content' } = _a, rest = __rest(_a, [\"color\", \"cardSizing\"]);\n    const props = Object.assign({ color,\n        cardSizing }, rest);\n    if (isSelectableCard(props)) {\n        return _jsx(SelectableCard, Object.assign({}, props));\n    }\n    if (isFlippingCard(props)) {\n        return _jsx(FlippingCard, Object.assign({}, props));\n    }\n    if (isLinkCard(props)) {\n        return _jsx(LinkCard, Object.assign({}, props));\n    }\n    return _jsx(SimpleCard, Object.assign({}, props));\n};\nexport const CardDisabledOverlay = () => (_jsx(Box, { sx: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: (theme) => alpha(theme.palette.surface.secondary, 0.8),\n        zIndex: 8,\n    } }));\nexport const useCardSxProps = (color, cardSizing, isDisabled, isActive, canInteract) => useMemo(() => {\n    let sxProps = {\n        position: 'relative',\n        overflow: 'hidden',\n        padding: 2,\n        borderRadius: '8px',\n        border: '1px solid',\n        display: cardSizing === 'content' ? 'inline-block' : 'block',\n        height: cardSizing === 'content' ? undefined : '100%',\n        transition: 'border-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n        background: 'var(--card-background)',\n        borderColor: isActive ? 'var(--card-active-border)' : 'var(--card-inactive-border)',\n        '--card-active-border': (theme) => theme.palette.primary.main,\n        '--card-active-hover-border': (theme) => theme.palette.primary.light,\n    };\n    if (canInteract) {\n        sxProps = Object.assign(Object.assign({}, sxProps), { cursor: 'pointer', '&:hover': {\n                borderColor: isActive ? 'var(--card-active-hover-border)' : 'var(--card-inactive-hover-border)',\n            } });\n    }\n    if (isDisabled) {\n        sxProps = Object.assign(Object.assign({}, sxProps), { cursor: 'not-allowed' });\n    }\n    if (color === 'white') {\n        sxProps = Object.assign(Object.assign({}, sxProps), { '--card-background': (theme) => theme.palette.surface.tertiary, '--card-inactive-border': (theme) => theme.palette.surface.secondary, '--card-inactive-hover-border': (theme) => theme.palette.surface.primary });\n    }\n    if (color === 'grey') {\n        sxProps = Object.assign(Object.assign({}, sxProps), { '--card-background': (theme) => theme.palette.surface.primary, '--card-inactive-border': (theme) => theme.palette.surface.secondary, '--card-inactive-hover-border': (theme) => theme.palette.surface.primary });\n    }\n    if (color === 'clear') {\n        sxProps = Object.assign(Object.assign({}, sxProps), { '--card-background': 'transparent', '--card-inactive-border': (theme) => theme.palette.onSurface.os200, '--card-inactive-hover-border': (theme) => theme.palette.surface.secondary, borderStyle: 'dashed' });\n    }\n    return sxProps;\n}, [color, isActive, canInteract, cardSizing, isDisabled]);\n//# sourceMappingURL=Card.js.map"],"names":["Card","_a","color","cardSizing","rest","__rest","props","Object","assign","selectable","isSelectableCard","_jsx","SelectableCard","flipping","isFlippingCard","FlippingCard","link","isLinkCard","LinkCard","SimpleCard","CardDisabledOverlay","Box","sx","position","top","left","right","bottom","background","theme","alpha","palette","surface","secondary","zIndex","useCardSxProps","isDisabled","isActive","canInteract","useMemo","sxProps","overflow","padding","borderRadius","border","display","height","undefined","transition","borderColor","primary","main","light","cursor","tertiary","onSurface","os200","borderStyle"],"mappings":"kVAiBY,MAACA,EAAQC,IACjB,IAAIC,MAAEA,EAAQ,QAAOC,WAAEA,EAAa,WAAcF,EAAIG,EAAOC,EAAOJ,EAAI,CAAC,QAAS,eAClF,MAAMK,EAAQC,OAAOC,OAAO,CAAEN,QAC1BC,cAAcC,GAClB,OAVJ,SAA0BE,GACtB,OAA4B,IAArBA,EAAMG,UACjB,CAQQC,CAAiBJ,GACVK,EAAKC,EAAgBL,OAAOC,OAAO,CAAE,EAAEF,IAdtD,SAAwBA,GACpB,OAA0B,IAAnBA,EAAMO,QACjB,CAcQC,CAAeR,GACRK,EAAKI,EAAcR,OAAOC,OAAO,CAAE,EAAEF,IAXpD,SAAoBA,GAChB,OAAsB,IAAfA,EAAMU,IACjB,CAWQC,CAAWX,GACJK,EAAKO,EAAUX,OAAOC,OAAO,CAAE,EAAEF,IAErCK,EAAKQ,EAAYZ,OAAOC,OAAO,CAAE,EAAEF,GAAO,EAExCc,EAAsB,IAAOT,EAAKU,EAAK,CAAEC,GAAI,CAClDC,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,WAAaC,GAAUC,EAAMD,EAAME,QAAQC,QAAQC,UAAW,IAC9DC,OAAQ,KAEHC,EAAiB,CAACjC,EAAOC,EAAYiC,EAAYC,EAAUC,IAAgBC,GAAQ,KAC5F,IAAIC,EAAU,CACVjB,SAAU,WACVkB,SAAU,SACVC,QAAS,EACTC,aAAc,MACdC,OAAQ,YACRC,QAAwB,YAAf1C,EAA2B,eAAiB,QACrD2C,OAAuB,YAAf3C,OAA2B4C,EAAY,OAC/CC,WAAY,sDACZpB,WAAY,yBACZqB,YAAaZ,EAAW,4BAA8B,8BACtD,uBAAyBR,GAAUA,EAAME,QAAQmB,QAAQC,KACzD,6BAA+BtB,GAAUA,EAAME,QAAQmB,QAAQE,OAmBnE,OAjBId,IACAE,EAAUjC,OAAOC,OAAOD,OAAOC,OAAO,GAAIgC,GAAU,CAAEa,OAAQ,UAAW,UAAW,CAC5EJ,YAAaZ,EAAW,kCAAoC,wCAGpED,IACAI,EAAUjC,OAAOC,OAAOD,OAAOC,OAAO,GAAIgC,GAAU,CAAEa,OAAQ,iBAEpD,UAAVnD,IACAsC,EAAUjC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIgC,GAAU,CAAE,oBAAsBX,GAAUA,EAAME,QAAQC,QAAQsB,SAAU,yBAA2BzB,GAAUA,EAAME,QAAQC,QAAQC,UAAW,+BAAiCJ,GAAUA,EAAME,QAAQC,QAAQkB,WAEnP,SAAVhD,IACAsC,EAAUjC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIgC,GAAU,CAAE,oBAAsBX,GAAUA,EAAME,QAAQC,QAAQkB,QAAS,yBAA2BrB,GAAUA,EAAME,QAAQC,QAAQC,UAAW,+BAAiCJ,GAAUA,EAAME,QAAQC,QAAQkB,WAElP,UAAVhD,IACAsC,EAAUjC,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIgC,GAAU,CAAE,oBAAqB,cAAe,yBAA2BX,GAAUA,EAAME,QAAQwB,UAAUC,MAAO,+BAAiC3B,GAAUA,EAAME,QAAQC,QAAQC,UAAWwB,YAAa,YAEpPjB,CAAO,GACf,CAACtC,EAAOmC,EAAUC,EAAanC,EAAYiC"}

package/components/card/FlippingCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BasicCardProps, FlippingCardProps } from './Card';
+export declare const FlippingCard: FC<FlippingCardProps & BasicCardProps>;

package/components/card/FlippingCard.js

@@ -0,0 +1,2 @@
+import{__rest as i}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as o,useEffect as s,useCallback as t}from"react";import{useCardSxProps as n,CardDisabledOverlay as l}from"./Card.js";import{Box as p,Slide as d}from"@mui/material";import"../../utils/enum.js";import{useClosure as a}from"../../utils/useClosure/useClosure.js";const m=m=>{var{flipOnHover:u=!0}=m,c=i(m,["flipOnHover"]);const f=n(c.color,c.cardSizing,c.disabled),{isOpen:b,setOpen:g}=a(c.isFlipped),h=o(null);s((()=>{g(c.isFlipped)}),[c.isFlipped,g]);const F=t((()=>{u&&!c.disabled&&g(!0)}),[u,g,c.disabled]),j=t((()=>{!u||c.isFlipped||c.disabled||g(!1)}),[u,c.isFlipped,c.disabled,g]);return e(p,{sx:f,ref:h,onMouseEnter:F,onMouseLeave:j,children:[c.disabled&&r(l,{}),c.children,r(d,{in:b,direction:"up",container:h.current,children:r(p,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,padding:2,background:i=>i.palette.surface.secondary},children:c.flippingContent})})]})};export{m as FlippingCard};
+//# sourceMappingURL=FlippingCard.js.map

package/components/card/FlippingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlippingCard.js","sources":["../../../src/components/card/FlippingCard.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useRef } from 'react';\nimport { CardDisabledOverlay, useCardSxProps } from './Card';\nimport { Box, Slide } from '@mui/material';\nimport { useClosure } from '@/src/utils';\nexport const FlippingCard = (_a) => {\n    var { flipOnHover = true } = _a, props = __rest(_a, [\"flipOnHover\"]);\n    const sxProps = useCardSxProps(props.color, props.cardSizing, props.disabled);\n    const { isOpen: isFlipped, setOpen: setIsFlipped } = useClosure(props.isFlipped);\n    const containerRef = useRef(null);\n    useEffect(() => {\n        setIsFlipped(props.isFlipped);\n    }, [props.isFlipped, setIsFlipped]);\n    const handleMouseEnter = useCallback(() => {\n        if (flipOnHover && !props.disabled) {\n            setIsFlipped(true);\n        }\n    }, [flipOnHover, setIsFlipped, props.disabled]);\n    const handleMouseLeave = useCallback(() => {\n        if (flipOnHover && !props.isFlipped && !props.disabled) {\n            setIsFlipped(false);\n        }\n    }, [flipOnHover, props.isFlipped, props.disabled, setIsFlipped]);\n    return (_jsxs(Box, { sx: sxProps, ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [props.disabled && _jsx(CardDisabledOverlay, {}), props.children, _jsx(Slide, { in: isFlipped, direction: \"up\", container: containerRef.current, children: _jsx(Box, { sx: {\n                        position: 'absolute',\n                        top: 0,\n                        left: 0,\n                        right: 0,\n                        bottom: 0,\n                        padding: 2,\n                        background: (theme) => theme.palette.surface.secondary,\n                    }, children: props.flippingContent }) })] }));\n};\n//# sourceMappingURL=FlippingCard.js.map"],"names":["FlippingCard","_a","flipOnHover","props","__rest","sxProps","useCardSxProps","color","cardSizing","disabled","isOpen","isFlipped","setOpen","setIsFlipped","useClosure","containerRef","useRef","useEffect","handleMouseEnter","useCallback","handleMouseLeave","_jsxs","Box","sx","ref","onMouseEnter","onMouseLeave","children","_jsx","CardDisabledOverlay","Slide","in","direction","container","current","position","top","left","right","bottom","padding","background","theme","palette","surface","secondary","flippingContent"],"mappings":"iWAMY,MAACA,EAAgBC,IACzB,IAAIC,YAAEA,GAAc,GAASD,EAAIE,EAAQC,EAAOH,EAAI,CAAC,gBACrD,MAAMI,EAAUC,EAAeH,EAAMI,MAAOJ,EAAMK,WAAYL,EAAMM,WAC5DC,OAAQC,EAAWC,QAASC,GAAiBC,EAAWX,EAAMQ,WAChEI,EAAeC,EAAO,MAC5BC,GAAU,KACNJ,EAAaV,EAAMQ,UAAU,GAC9B,CAACR,EAAMQ,UAAWE,IACrB,MAAMK,EAAmBC,GAAY,KAC7BjB,IAAgBC,EAAMM,UACtBI,GAAa,EAChB,GACF,CAACX,EAAaW,EAAcV,EAAMM,WAC/BW,EAAmBD,GAAY,MAC7BjB,GAAgBC,EAAMQ,WAAcR,EAAMM,UAC1CI,GAAa,EAChB,GACF,CAACX,EAAaC,EAAMQ,UAAWR,EAAMM,SAAUI,IAClD,OAAQQ,EAAMC,EAAK,CAAEC,GAAIlB,EAASmB,IAAKT,EAAcU,aAAcP,EAAkBQ,aAAcN,EAAkBO,SAAU,CAACxB,EAAMM,UAAYmB,EAAKC,EAAqB,CAAE,GAAG1B,EAAMwB,SAAUC,EAAKE,EAAO,CAAEC,GAAIpB,EAAWqB,UAAW,KAAMC,UAAWlB,EAAamB,QAASP,SAAUC,EAAKN,EAAK,CAAEC,GAAI,CACtRY,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,WAAaC,GAAUA,EAAMC,QAAQC,QAAQC,WAC9ClB,SAAUxB,EAAM2C,sBAA2B"}

package/components/card/LinkCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BasicCardProps, LinkCardProps } from './Card';
+export declare const LinkCard: FC<LinkCardProps & BasicCardProps>;

package/components/card/LinkCard.js

@@ -0,0 +1,2 @@
+import{jsxs as r,jsx as i}from"react/jsx-runtime";import{useCallback as o}from"react";import{useCardSxProps as e,CardDisabledOverlay as l}from"./Card.js";import{Box as a}from"@mui/material";const c=c=>{const d=e(c.color,c.cardSizing,c.disabled,!1,!0),n=o((r=>{var i;c.disabled||null===(i=c.onClick)||void 0===i||i.call(c,r)}),[c.onClick,c.disabled]);return r(a,{component:"a",href:c.href,sx:d,onClick:n,children:[c.disabled&&i(l,{}),c.children]})};export{c as LinkCard};
+//# sourceMappingURL=LinkCard.js.map

package/components/card/LinkCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.js","sources":["../../../src/components/card/LinkCard.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { CardDisabledOverlay, useCardSxProps } from './Card';\nimport { Box } from '@mui/material';\nexport const LinkCard = (props) => {\n    const sxProps = useCardSxProps(props.color, props.cardSizing, props.disabled, false, true);\n    const clickHandler = useCallback((e) => {\n        var _a;\n        if (!props.disabled) {\n            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);\n        }\n    }, [props.onClick, props.disabled]);\n    return (_jsxs(Box, { component: \"a\", href: props.href, sx: sxProps, onClick: clickHandler, children: [props.disabled && _jsx(CardDisabledOverlay, {}), props.children] }));\n};\n//# sourceMappingURL=LinkCard.js.map"],"names":["LinkCard","props","sxProps","useCardSxProps","color","cardSizing","disabled","clickHandler","useCallback","e","_a","onClick","call","_jsxs","Box","component","href","sx","children","_jsx","CardDisabledOverlay"],"mappings":"8LAIY,MAACA,EAAYC,IACrB,MAAMC,EAAUC,EAAeF,EAAMG,MAAOH,EAAMI,WAAYJ,EAAMK,UAAU,GAAO,GAC/EC,EAAeC,GAAaC,IAC9B,IAAIC,EACCT,EAAMK,UACkB,QAAxBI,EAAKT,EAAMU,eAA4B,IAAPD,GAAyBA,EAAGE,KAAKX,EAAOQ,EAC5E,GACF,CAACR,EAAMU,QAASV,EAAMK,WACzB,OAAQO,EAAMC,EAAK,CAAEC,UAAW,IAAKC,KAAMf,EAAMe,KAAMC,GAAIf,EAASS,QAASJ,EAAcW,SAAU,CAACjB,EAAMK,UAAYa,EAAKC,EAAqB,CAAE,GAAGnB,EAAMiB,WAAc"}

package/components/card/SelectableCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BasicCardProps, SelectableCardProps } from './Card';
+export declare const SelectableCard: FC<SelectableCardProps & BasicCardProps>;

package/components/card/SelectableCard.js

@@ -0,0 +1,2 @@
+import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useCallback as o}from"react";import{useCardSxProps as r,CardDisabledOverlay as t}from"./Card.js";import{Box as c,Fade as n}from"@mui/material";import{Icon as l}from"../icon/icon.js";import"../icon/icon.definitions.js";const d=d=>{const s=r(d.color,d.cardSizing,d.disabled,d.isSelected,!0),a=o((i=>{d.disabled||d.handleSelection(!d.isSelected,i)}),[d.handleSelection,d.isSelected,d.disabled]);return i(c,{sx:Object.assign(Object.assign({},s),{minHeight:"64px",minWidth:"64px"}),onClick:a,children:[d.disabled&&e(t,{}),e(n,{in:d.isSelected,children:e(c,{sx:{position:"absolute",right:"13px",top:"13px"},children:e(l,{name:"circle-check",iconStyle:"filled",fontSize:"large",color:"primary"})})}),d.children]})};export{d as SelectableCard};
+//# sourceMappingURL=SelectableCard.js.map

package/components/card/SelectableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.js","sources":["../../../src/components/card/SelectableCard.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { CardDisabledOverlay, useCardSxProps } from './Card';\nimport { Box, Fade } from '@mui/material';\nimport { Icon } from '../icon';\nexport const SelectableCard = (props) => {\n    const sxProps = useCardSxProps(props.color, props.cardSizing, props.disabled, props.isSelected, true);\n    const handleSelection = useCallback((event) => {\n        if (!props.disabled) {\n            props.handleSelection(!props.isSelected, event);\n        }\n    }, [props.handleSelection, props.isSelected, props.disabled]);\n    return (_jsxs(Box, { sx: Object.assign(Object.assign({}, sxProps), { minHeight: '64px', minWidth: '64px' }), onClick: handleSelection, children: [props.disabled && _jsx(CardDisabledOverlay, {}), _jsx(Fade, { in: props.isSelected, children: _jsx(Box, { sx: {\n                        position: 'absolute',\n                        right: '13px',\n                        top: '13px',\n                    }, children: _jsx(Icon, { name: \"circle-check\", iconStyle: \"filled\", fontSize: \"large\", color: \"primary\" }) }) }), props.children] }));\n};\n//# sourceMappingURL=SelectableCard.js.map"],"names":["SelectableCard","props","sxProps","useCardSxProps","color","cardSizing","disabled","isSelected","handleSelection","useCallback","event","_jsxs","Box","sx","Object","assign","minHeight","minWidth","onClick","children","_jsx","CardDisabledOverlay","Fade","in","position","right","top","Icon","name","iconStyle","fontSize"],"mappings":"mRAKY,MAACA,EAAkBC,IAC3B,MAAMC,EAAUC,EAAeF,EAAMG,MAAOH,EAAMI,WAAYJ,EAAMK,SAAUL,EAAMM,YAAY,GAC1FC,EAAkBC,GAAaC,IAC5BT,EAAMK,UACPL,EAAMO,iBAAiBP,EAAMM,WAAYG,EAC5C,GACF,CAACT,EAAMO,gBAAiBP,EAAMM,WAAYN,EAAMK,WACnD,OAAQK,EAAMC,EAAK,CAAEC,GAAIC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEb,GAAU,CAAEc,UAAW,OAAQC,SAAU,SAAWC,QAASV,EAAiBW,SAAU,CAAClB,EAAMK,UAAYc,EAAKC,EAAqB,CAAE,GAAGD,EAAKE,EAAM,CAAEC,GAAItB,EAAMM,WAAYY,SAAUC,EAAKR,EAAK,CAAEC,GAAI,CAC5OW,SAAU,WACVC,MAAO,OACPC,IAAK,QACNP,SAAUC,EAAKO,EAAM,CAAEC,KAAM,eAAgBC,UAAW,SAAUC,SAAU,QAAS1B,MAAO,gBAAoBH,EAAMkB,WAAc"}

package/components/card/SimpleCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BasicCardProps } from './Card';
+export declare const SimpleCard: FC<BasicCardProps>;

package/components/card/SimpleCard.js

@@ -0,0 +1,2 @@
+import{jsxs as r,jsx as i}from"react/jsx-runtime";import{useCardSxProps as o,CardDisabledOverlay as t}from"./Card.js";import{Box as e}from"@mui/material";const m=m=>{const d=o(m.color,m.cardSizing,m.disabled);return r(e,{sx:d,children:[m.disabled&&i(t,{}),m.children]})};export{m as SimpleCard};
+//# sourceMappingURL=SimpleCard.js.map

package/components/card/SimpleCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleCard.js","sources":["../../../src/components/card/SimpleCard.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { CardDisabledOverlay, useCardSxProps } from './Card';\nimport { Box } from '@mui/material';\nexport const SimpleCard = (props) => {\n    const sxProps = useCardSxProps(props.color, props.cardSizing, props.disabled);\n    return (_jsxs(Box, { sx: sxProps, children: [props.disabled && _jsx(CardDisabledOverlay, {}), props.children] }));\n};\n//# sourceMappingURL=SimpleCard.js.map"],"names":["SimpleCard","props","sxProps","useCardSxProps","color","cardSizing","disabled","_jsxs","Box","sx","children","_jsx","CardDisabledOverlay"],"mappings":"0JAGY,MAACA,EAAcC,IACvB,MAAMC,EAAUC,EAAeF,EAAMG,MAAOH,EAAMI,WAAYJ,EAAMK,UACpE,OAAQC,EAAMC,EAAK,CAAEC,GAAIP,EAASQ,SAAU,CAACT,EAAMK,UAAYK,EAAKC,EAAqB,CAAE,GAAGX,EAAMS,WAAc"}

package/components/card/index.d.ts

@@ -0,0 +1 @@
+export { Card, type CardComponentProps } from './Card';

package/components/cardContainer/cardContainer.d.ts

@@ -26,4 +26,5 @@ export interface CardContainerProps extends HTMLAttributes<HTMLDivElement> {
      */
     padding?: string;
 }
+/** @deprecated use Card component instead */
 export declare const CardContainer: React.ForwardRefExoticComponent<CardContainerProps & React.RefAttributes<HTMLDivElement>>;

package/components/cardContainer/cardContainer.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useState as a,useEffect as o,useCallback as t}from"react";import s from"@emotion/styled";import{flowColors as n}from"../../design/skoda/palette.theme.js";import{ternaryCondition as d}from"../../utils/utilities.js";const c=e(((e,s)=>{var{children:n,isClickable:d,onClickCallback:c,isClicked:p,padding:b="10px",isGreyVariant:x=!1}=e,m=i(e,["children","isClickable","onClickCallback","isClicked","padding","isGreyVariant"]);const[k,C]=a(!1);o((()=>{d&&C((()=>p))}),[d,p]);const g=t((()=>{d&&C((i=>(c&&c(!i),!i)))}),[d,c]);return r(l,Object.assign({style:{padding:b}},m,{ref:s,onClick:g,isClicked:k,isClickable:d,isGreyVariant:x,"data-state":k?"clicked":"idle","data-testid":"CardContainer",children:r("div",{children:n})}))})),l=s.div((r=>{var e=i(r,["theme"]);const a=`inset 0 0 0 1px ${n.surface.secondary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,o=e.isClicked?{boxShadow:`inset 0 0 0 1px ${n.brand.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,"&:hover":{boxShadow:`inset 0 0 0 1px ${n.brandHover.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`}}:{boxShadow:a},t=e.isClickable?Object.assign({cursor:"pointer"},o):{boxShadow:a};let s={};return s=Object.assign({display:"inline-block",boxSizing:"border-box",borderRadius:"8px",background:d(e.isGreyVariant,!0,n.surface.primary,n.surface.tertiary),"&:hover":{border:"",boxShadow:`inset 0 0 0 1px ${n.onSurface.os300}, 0px 0px 8px rgba(0, 0, 0, 0.15)`}},t),s}));export{c as CardContainer};
+import{__rest as i}from"tslib";import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useState as a,useEffect as t,useCallback as o}from"react";import s from"@emotion/styled";import{paletteLight as n}from"../../design/skoda/paletteLight.theme.js";import{ternaryCondition as d}from"../../utils/utilities.js";const c=e(((e,s)=>{var{children:n,isClickable:d,onClickCallback:c,isClicked:p,padding:b="10px",isGreyVariant:x=!1}=e,m=i(e,["children","isClickable","onClickCallback","isClicked","padding","isGreyVariant"]);const[k,C]=a(!1);t((()=>{d&&C((()=>p))}),[d,p]);const g=o((()=>{d&&C((i=>(c&&c(!i),!i)))}),[d,c]);return r(l,Object.assign({style:{padding:b}},m,{ref:s,onClick:g,isClicked:k,isClickable:d,isGreyVariant:x,"data-state":k?"clicked":"idle","data-testid":"CardContainer",children:r("div",{children:n})}))})),l=s.div((r=>{var e=i(r,["theme"]);const a=`inset 0 0 0 1px ${n.surface.secondary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,t=e.isClicked?{boxShadow:`inset 0 0 0 1px ${n.brand.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,"&:hover":{boxShadow:`inset 0 0 0 1px ${n.brandHover.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`}}:{boxShadow:a},o=e.isClickable?Object.assign({cursor:"pointer"},t):{boxShadow:a};let s={};return s=Object.assign({display:"inline-block",boxSizing:"border-box",borderRadius:"8px",background:d(e.isGreyVariant,!0,n.surface.primary,n.surface.tertiary),"&:hover":{border:"",boxShadow:`inset 0 0 0 1px ${n.onSurface.os300}, 0px 0px 8px rgba(0, 0, 0, 0.15)`}},o),s}));export{c as CardContainer};
 //# sourceMappingURL=cardContainer.js.map

package/components/cardContainer/cardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"cardContainer.js","sources":["../../../src/components/cardContainer/cardContainer.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport { ternaryCondition } from '../../utils/utilities';\nexport const CardContainer = forwardRef((_a, ref) => {\n    var { children, isClickable, onClickCallback, isClicked: isClickedFromOutsideState, padding = '10px', isGreyVariant = false } = _a, props = __rest(_a, [\"children\", \"isClickable\", \"onClickCallback\", \"isClicked\", \"padding\", \"isGreyVariant\"]);\n    const [isClicked, setIsClicked] = useState(false);\n    useEffect(() => {\n        if (!isClickable)\n            return;\n        setIsClicked(() => isClickedFromOutsideState);\n    }, [isClickable, isClickedFromOutsideState]);\n    const isClickedHandler = useCallback(() => {\n        if (!isClickable)\n            return;\n        setIsClicked((curr) => {\n            onClickCallback && onClickCallback(!curr);\n            return !curr;\n        });\n    }, [isClickable, onClickCallback]);\n    return (_jsx(StyledCardContainer, Object.assign({ style: { padding: padding } }, props, { ref: ref, onClick: isClickedHandler, isClicked: isClicked, isClickable: isClickable, isGreyVariant: isGreyVariant, \"data-state\": isClicked ? 'clicked' : 'idle', \"data-testid\": \"CardContainer\", children: _jsx(\"div\", { children: children }) })));\n});\nconst StyledCardContainer = styled.div((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const defaultBoxShadow = `inset 0 0 0 1px ${flowColors.surface.secondary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`;\n    const stylesBasedOnClick = args.isClicked\n        ? {\n            boxShadow: `inset 0 0 0 1px ${flowColors.brand.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,\n            '&:hover': {\n                boxShadow: `inset 0 0 0 1px ${flowColors.brandHover.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,\n            },\n        }\n        : { boxShadow: defaultBoxShadow };\n    const stylesBasedOnIsClickable = args.isClickable\n        ? Object.assign({ cursor: 'pointer' }, stylesBasedOnClick) : { boxShadow: defaultBoxShadow };\n    let styles = {};\n    styles = Object.assign({ display: 'inline-block', boxSizing: 'border-box', borderRadius: '8px', background: ternaryCondition(args.isGreyVariant, true, flowColors.surface.primary, flowColors.surface.tertiary), '&:hover': {\n            border: '',\n            boxShadow: `inset 0 0 0 1px ${flowColors.onSurface.os300}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,\n        } }, stylesBasedOnIsClickable);\n    return styles;\n});\n//# sourceMappingURL=cardContainer.js.map"],"names":["CardContainer","forwardRef","_a","ref","children","isClickable","onClickCallback","isClicked","isClickedFromOutsideState","padding","isGreyVariant","props","__rest","setIsClicked","useState","useEffect","isClickedHandler","useCallback","curr","_jsx","StyledCardContainer","Object","assign","style","onClick","styled","div","args","defaultBoxShadow","flowColors","surface","secondary","stylesBasedOnClick","boxShadow","brand","primary","brandHover","stylesBasedOnIsClickable","cursor","styles","display","boxSizing","borderRadius","background","ternaryCondition","tertiary","border","onSurface","os300"],"mappings":"oTAMY,MAACA,EAAgBC,GAAW,CAACC,EAAIC,KACzC,IAAIC,SAAEA,EAAQC,YAAEA,EAAWC,gBAAEA,EAAiBC,UAAWC,EAAyBC,QAAEA,EAAU,OAAMC,cAAEA,GAAgB,GAAUR,EAAIS,EAAQC,EAAOV,EAAI,CAAC,WAAY,cAAe,kBAAmB,YAAa,UAAW,kBAC9N,MAAOK,EAAWM,GAAgBC,GAAS,GAC3CC,GAAU,KACDV,GAELQ,GAAa,IAAML,GAA0B,GAC9C,CAACH,EAAaG,IACjB,MAAMQ,EAAmBC,GAAY,KAC5BZ,GAELQ,GAAcK,IACVZ,GAAmBA,GAAiBY,IAC5BA,IACV,GACH,CAACb,EAAaC,IACjB,OAAQa,EAAKC,EAAqBC,OAAOC,OAAO,CAAEC,MAAO,CAAEd,QAASA,IAAaE,EAAO,CAAER,IAAKA,EAAKqB,QAASR,EAAkBT,UAAWA,EAAWF,YAAaA,EAAaK,cAAeA,EAAe,aAAcH,EAAY,UAAY,OAAQ,cAAe,gBAAiBH,SAAUe,EAAK,MAAO,CAAEf,SAAUA,MAAiB,IAE5UgB,EAAsBK,EAAOC,KAAKxB,IACjC,IAAiByB,EAAOf,EAAOV,EAAI,CAAC,UACvC,MAAM0B,EAAmB,mBAAmBC,EAAWC,QAAQC,6CACzDC,EAAqBL,EAAKpB,UAC1B,CACE0B,UAAW,mBAAmBJ,EAAWK,MAAMC,2CAC/C,UAAW,CACPF,UAAW,mBAAmBJ,EAAWO,WAAWD,6CAG1D,CAAEF,UAAWL,GACbS,EAA2BV,EAAKtB,YAChCgB,OAAOC,OAAO,CAAEgB,OAAQ,WAAaN,GAAsB,CAAEC,UAAWL,GAC9E,IAAIW,EAAS,CAAA,EAKb,OAJAA,EAASlB,OAAOC,OAAO,CAAEkB,QAAS,eAAgBC,UAAW,aAAcC,aAAc,MAAOC,WAAYC,EAAiBjB,EAAKjB,eAAe,EAAMmB,EAAWC,QAAQK,QAASN,EAAWC,QAAQe,UAAW,UAAW,CACpNC,OAAQ,GACRb,UAAW,mBAAmBJ,EAAWkB,UAAUC,2CAClDX,GACFE,CAAM"}
+{"version":3,"file":"cardContainer.js","sources":["../../../src/components/cardContainer/cardContainer.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { paletteLight } from '../../design/skoda/paletteLight.theme';\nimport { ternaryCondition } from '../../utils/utilities';\n/** @deprecated use Card component instead */\nexport const CardContainer = forwardRef((_a, ref) => {\n    var { children, isClickable, onClickCallback, isClicked: isClickedFromOutsideState, padding = '10px', isGreyVariant = false } = _a, props = __rest(_a, [\"children\", \"isClickable\", \"onClickCallback\", \"isClicked\", \"padding\", \"isGreyVariant\"]);\n    const [isClicked, setIsClicked] = useState(false);\n    useEffect(() => {\n        if (!isClickable)\n            return;\n        setIsClicked(() => isClickedFromOutsideState);\n    }, [isClickable, isClickedFromOutsideState]);\n    const isClickedHandler = useCallback(() => {\n        if (!isClickable)\n            return;\n        setIsClicked((curr) => {\n            onClickCallback && onClickCallback(!curr);\n            return !curr;\n        });\n    }, [isClickable, onClickCallback]);\n    return (_jsx(StyledCardContainer, Object.assign({ style: { padding: padding } }, props, { ref: ref, onClick: isClickedHandler, isClicked: isClicked, isClickable: isClickable, isGreyVariant: isGreyVariant, \"data-state\": isClicked ? 'clicked' : 'idle', \"data-testid\": \"CardContainer\", children: _jsx(\"div\", { children: children }) })));\n});\nconst StyledCardContainer = styled.div((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const defaultBoxShadow = `inset 0 0 0 1px ${paletteLight.surface.secondary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`;\n    const stylesBasedOnClick = args.isClicked\n        ? {\n            boxShadow: `inset 0 0 0 1px ${paletteLight.brand.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,\n            '&:hover': {\n                boxShadow: `inset 0 0 0 1px ${paletteLight.brandHover.primary}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,\n            },\n        }\n        : { boxShadow: defaultBoxShadow };\n    const stylesBasedOnIsClickable = args.isClickable\n        ? Object.assign({ cursor: 'pointer' }, stylesBasedOnClick) : { boxShadow: defaultBoxShadow };\n    let styles = {};\n    styles = Object.assign({ display: 'inline-block', boxSizing: 'border-box', borderRadius: '8px', background: ternaryCondition(args.isGreyVariant, true, paletteLight.surface.primary, paletteLight.surface.tertiary), '&:hover': {\n            border: '',\n            boxShadow: `inset 0 0 0 1px ${paletteLight.onSurface.os300}, 0px 0px 8px rgba(0, 0, 0, 0.15)`,\n        } }, stylesBasedOnIsClickable);\n    return styles;\n});\n//# sourceMappingURL=cardContainer.js.map"],"names":["CardContainer","forwardRef","_a","ref","children","isClickable","onClickCallback","isClicked","isClickedFromOutsideState","padding","isGreyVariant","props","__rest","setIsClicked","useState","useEffect","isClickedHandler","useCallback","curr","_jsx","StyledCardContainer","Object","assign","style","onClick","styled","div","args","defaultBoxShadow","paletteLight","surface","secondary","stylesBasedOnClick","boxShadow","brand","primary","brandHover","stylesBasedOnIsClickable","cursor","styles","display","boxSizing","borderRadius","background","ternaryCondition","tertiary","border","onSurface","os300"],"mappings":"2TAOY,MAACA,EAAgBC,GAAW,CAACC,EAAIC,KACzC,IAAIC,SAAEA,EAAQC,YAAEA,EAAWC,gBAAEA,EAAiBC,UAAWC,EAAyBC,QAAEA,EAAU,OAAMC,cAAEA,GAAgB,GAAUR,EAAIS,EAAQC,EAAOV,EAAI,CAAC,WAAY,cAAe,kBAAmB,YAAa,UAAW,kBAC9N,MAAOK,EAAWM,GAAgBC,GAAS,GAC3CC,GAAU,KACDV,GAELQ,GAAa,IAAML,GAA0B,GAC9C,CAACH,EAAaG,IACjB,MAAMQ,EAAmBC,GAAY,KAC5BZ,GAELQ,GAAcK,IACVZ,GAAmBA,GAAiBY,IAC5BA,IACV,GACH,CAACb,EAAaC,IACjB,OAAQa,EAAKC,EAAqBC,OAAOC,OAAO,CAAEC,MAAO,CAAEd,QAASA,IAAaE,EAAO,CAAER,IAAKA,EAAKqB,QAASR,EAAkBT,UAAWA,EAAWF,YAAaA,EAAaK,cAAeA,EAAe,aAAcH,EAAY,UAAY,OAAQ,cAAe,gBAAiBH,SAAUe,EAAK,MAAO,CAAEf,SAAUA,MAAiB,IAE5UgB,EAAsBK,EAAOC,KAAKxB,IACjC,IAAiByB,EAAOf,EAAOV,EAAI,CAAC,UACvC,MAAM0B,EAAmB,mBAAmBC,EAAaC,QAAQC,6CAC3DC,EAAqBL,EAAKpB,UAC1B,CACE0B,UAAW,mBAAmBJ,EAAaK,MAAMC,2CACjD,UAAW,CACPF,UAAW,mBAAmBJ,EAAaO,WAAWD,6CAG5D,CAAEF,UAAWL,GACbS,EAA2BV,EAAKtB,YAChCgB,OAAOC,OAAO,CAAEgB,OAAQ,WAAaN,GAAsB,CAAEC,UAAWL,GAC9E,IAAIW,EAAS,CAAA,EAKb,OAJAA,EAASlB,OAAOC,OAAO,CAAEkB,QAAS,eAAgBC,UAAW,aAAcC,aAAc,MAAOC,WAAYC,EAAiBjB,EAAKjB,eAAe,EAAMmB,EAAaC,QAAQK,QAASN,EAAaC,QAAQe,UAAW,UAAW,CACxNC,OAAQ,GACRb,UAAW,mBAAmBJ,EAAakB,UAAUC,2CACpDX,GACFE,CAAM"}