@skodaflow/web-library 4.2.0 → 6.0.0

package/components/controls/controls.js

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

package/components/controls/controls.js.map

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

package/components/icon/icon.d.ts

@@ -1,4 +1,5 @@
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
+import { IconNameProp } from './icon.definitions';
 /**
  * @interface IconProps
  * @description Base definition of SkodaFlow Icon independent on core implementation.
@@ -18,6 +19,14 @@ export interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'
      * The iconStyle apply to the icons regular or filled format.
      */
     iconStyle?: 'regular' | 'filled';
+    /**
+     * Name of the icon that should be used
+     */
+    name?: IconNameProp;
+    /**
+     * @deprecated use properties `iconStyle` and `name` to define icon
+     */
+    className?: string;
 }
 /**
  * @description SkodaFlow Icon component.
@@ -25,4 +34,4 @@ export interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'
  * @param props IconProps
  * @returns React Functional Component
  */
-export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLSpanElement>>;