@skodaflow/web-library 5.0.0 → 7.0.0

package/components/cardMenu/cardMenu.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { IconNameProp } from '../icon';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { Placement } from '../../utils/enum';
@@ -11,7 +12,7 @@ export interface CardMenuItem {
     text: string;
     callback?: () => void;
     disabled?: boolean;
-    icon?: string;
+    icon?: IconNameProp;
     isChecked?: boolean;
     url?: string;
     target?: string;
@@ -84,4 +85,5 @@ export interface CardMenuProps extends HTMLAttributes<HTMLDivElement> {
     /** Renders the popper with border radius */
     rounded?: boolean;
 }
+/** @deprecated Use Menu component from @mui/material */
 export declare const CardMenu: React.ForwardRefExoticComponent<CardMenuProps & React.RefAttributes<HTMLDivElement>>;

package/components/cardMenu/cardMenu.js

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as a,jsxs as d}from"react/jsx-runtime";import r,{forwardRef as t}from"react";import i from"../common/hook/useWindowSize.js";import{List as o,ListItem as l,ListItemIcon as s,ListItemText as n,Divider as c,ClickAwayListener as m,MenuItem as p}from"@mui/material";import{Icon as h}from"../icon/icon.js";import{Checkbox as u}from"../checkbox/checkbox.js";import{ToggleSwitch as C}from"../toggleSwitch/toggleSwitch.js";import{useCardMenu as y}from"./hooks/useCardMenu.js";import{PopperStyled as g}from"./styled/popperStyled.js";import{MenuListStyled as b}from"./styled/menuListStyled.js";import{DrawerStyled as k}from"./styled/drawerStyled.js";const f=t((({items:t,setItems:f,open:M,header:x,anchorRef:S,allowMultiselect:j,hasToggleSelection:w,onItemClick:N,onClose:v,sx:T,classes:W,placement:z,toggleLabel:P,rounded:H},I)=>{const{isMobile:L}=i(),{isToggleChecked:A,onClickHandler:E,onToggleChange:F}=y(t,j,f,N,v);return e(a,{children:L?d(k,{open:M,onClose:v,anchor:"bottom",sx:T,ref:I,classes:W,hasHeader:!!x,"data-testid":"CardMenu",children:[x&&e("div",{className:"drawer-header","data-testid":"CardMenu.header",children:x}),e(o,{children:t.map((a=>d(r.Fragment,{children:[d(l,{button:!0,disabled:a.disabled,onClick:()=>E(a),"data-testid":"CardMenu.item","data-state":a.disabled?"disabled":void 0,children:[a.icon&&e(s,{children:e(h,{className:a.icon,fontSize:"small"})}),e(n,{primaryTypographyProps:{noWrap:!0},primary:a.text}),j&&e(u,{checked:a.isChecked,disabled:a.disabled,"data-testid":"CardMenu.check"})]}),e(c,{variant:"middle"})]},a.text)))})]}):e(g,{open:M,anchorEl:S.current,placement:z,ref:I,rounded:H,"data-testid":"CardMenu",children:e(m,{onClickAway:v,children:d(b,{allowMultiselect:j,sx:T,classes:W,children:[x&&d(p,{className:"menu-item-header","data-testid":"CardMenu.header",children:[e(n,{primaryTypographyProps:{noWrap:!0},primary:x}),e(s,{onClick:v,"data-testid":"CardMenu.close",children:e(h,{className:"ballotx",fontSize:"small"})})]}),x&&e(c,{variant:"middle",className:"menu-item-divider"}),j&&w&&d(p,{className:"menu-select-all","data-testid":"CardMenu.toggle",children:[e(n,{primaryTypographyProps:{noWrap:!0},primary:P||"Select all"}),e(C,{onChange:F,checked:A,compact:!0})]}),e("div",{className:"menu-content-items",children:t.map((a=>d(p,{disabled:a.disabled,onClick:()=>E(a),"data-testid":"CardMenu.item","data-state":a.disabled?"disabled":void 0,children:[a.icon&&e(s,{children:e(h,{className:a.icon,fontSize:"small"})}),e(n,{primaryTypographyProps:{noWrap:!0},primary:a.text}),j&&e(u,{checked:a.isChecked,disabled:a.disabled,"data-testid":"CardMenu.check"})]},a.text)))})]})})})})}));export{f as CardMenu};
+import{jsx as e,Fragment as a,jsxs as d}from"react/jsx-runtime";import i,{forwardRef as r}from"react";import t from"../common/hook/useWindowSize.js";import{List as o,ListItem as s,ListItemIcon as l,ListItemText as n,Divider as c,ClickAwayListener as m,MenuItem as p}from"@mui/material";import{Icon as h}from"../icon/icon.js";import"../icon/icon.definitions.js";import{Checkbox as u}from"../checkbox/checkbox.js";import{ToggleSwitch as C}from"../toggleSwitch/toggleSwitch.js";import{useCardMenu as y}from"./hooks/useCardMenu.js";import{PopperStyled as g}from"./styled/popperStyled.js";import{MenuListStyled as b}from"./styled/menuListStyled.js";import{DrawerStyled as f}from"./styled/drawerStyled.js";const k=r((({items:r,setItems:k,open:M,header:x,anchorRef:S,allowMultiselect:j,hasToggleSelection:w,onItemClick:v,onClose:T,sx:N,classes:W,placement:z,toggleLabel:P,rounded:H},I)=>{const{isMobile:L}=t(),{isToggleChecked:A,onClickHandler:E,onToggleChange:F}=y(r,j,k,v,T);return e(a,{children:L?d(f,{open:M,onClose:T,anchor:"bottom",sx:N,ref:I,classes:W,hasHeader:!!x,"data-testid":"CardMenu",children:[x&&e("div",{className:"drawer-header","data-testid":"CardMenu.header",children:x}),e(o,{children:r.map((a=>d(i.Fragment,{children:[d(s,{button:!0,disabled:a.disabled,onClick:()=>E(a),"data-testid":"CardMenu.item","data-state":a.disabled?"disabled":void 0,children:[a.icon&&e(l,{children:e(h,{name:a.icon,fontSize:"small"})}),e(n,{primaryTypographyProps:{noWrap:!0},primary:a.text}),j&&e(u,{checked:a.isChecked,disabled:a.disabled,"data-testid":"CardMenu.check"})]}),e(c,{variant:"middle"})]},a.text)))})]}):e(g,{open:M,anchorEl:S.current,placement:z,ref:I,rounded:H,"data-testid":"CardMenu",children:e(m,{onClickAway:T,children:d(b,{allowMultiselect:j,sx:N,classes:W,children:[x&&d(p,{className:"menu-item-header","data-testid":"CardMenu.header",children:[e(n,{primaryTypographyProps:{noWrap:!0},primary:x}),e(l,{onClick:T,"data-testid":"CardMenu.close",children:e(h,{name:"close",fontSize:"small"})})]}),x&&e(c,{variant:"middle",className:"menu-item-divider"}),j&&w&&d(p,{className:"menu-select-all","data-testid":"CardMenu.toggle",children:[e(n,{primaryTypographyProps:{noWrap:!0},primary:P||"Select all"}),e(C,{onChange:F,checked:A,compact:!0})]}),e("div",{className:"menu-content-items",children:r.map((a=>d(p,{disabled:a.disabled,onClick:()=>E(a),"data-testid":"CardMenu.item","data-state":a.disabled?"disabled":void 0,children:[a.icon&&e(l,{children:e(h,{name:a.icon,fontSize:"small"})}),e(n,{primaryTypographyProps:{noWrap:!0},primary:a.text}),j&&e(u,{checked:a.isChecked,disabled:a.disabled,"data-testid":"CardMenu.check"})]},a.text)))})]})})})})}));export{k as CardMenu};
 //# sourceMappingURL=cardMenu.js.map

package/components/cardMenu/cardMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"cardMenu.js","sources":["../../../src/components/cardMenu/cardMenu.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { forwardRef } from 'react';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport { List, ListItem, ListItemIcon, ListItemText, MenuItem, ClickAwayListener, Divider } from '@mui/material';\nimport { Icon } from '../icon';\nimport { Checkbox } from '../checkbox';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { useCardMenu } from './hooks/useCardMenu';\nimport { PopperStyled } from './styled/popperStyled';\nimport { MenuListStyled } from './styled/menuListStyled';\nimport { DrawerStyled } from './styled/drawerStyled';\nexport const CardMenu = forwardRef(({ items, setItems, open, header, anchorRef, allowMultiselect, hasToggleSelection, onItemClick, onClose, sx, classes, placement, toggleLabel, rounded, }, ref) => {\n    const { isMobile } = useWindowSize();\n    const { isToggleChecked, onClickHandler, onToggleChange } = useCardMenu(items, allowMultiselect, setItems, onItemClick, onClose);\n    return (_jsx(_Fragment, { children: isMobile ? (_jsxs(DrawerStyled, { open: open, onClose: onClose, anchor: \"bottom\", sx: sx, ref: ref, classes: classes, hasHeader: !!header, \"data-testid\": \"CardMenu\", children: [header && (_jsx(\"div\", { className: \"drawer-header\", \"data-testid\": \"CardMenu.header\", children: header })), _jsx(List, { children: items.map((item) => {\n                        return (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { button: true, disabled: item.disabled, onClick: () => onClickHandler(item), \"data-testid\": \"CardMenu.item\", \"data-state\": item.disabled ? 'disabled' : undefined, children: [item.icon && (_jsx(ListItemIcon, { children: _jsx(Icon, { className: item.icon, fontSize: \"small\" }) })), _jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: item.text }), allowMultiselect && (_jsx(Checkbox, { checked: item.isChecked, disabled: item.disabled, \"data-testid\": \"CardMenu.check\" }))] }), _jsx(Divider, { variant: \"middle\" })] }, item.text));\n                    }) })] })) : (_jsx(PopperStyled, { open: open, anchorEl: anchorRef.current, placement: placement, ref: ref, rounded: rounded, \"data-testid\": \"CardMenu\", children: _jsx(ClickAwayListener, { onClickAway: onClose, children: _jsxs(MenuListStyled, { allowMultiselect: allowMultiselect, sx: sx, classes: classes, children: [header && (_jsxs(MenuItem, { className: \"menu-item-header\", \"data-testid\": \"CardMenu.header\", children: [_jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: header }), _jsx(ListItemIcon, { onClick: onClose, \"data-testid\": \"CardMenu.close\", children: _jsx(Icon, { className: \"ballotx\", fontSize: \"small\" }) })] })), header && _jsx(Divider, { variant: \"middle\", className: \"menu-item-divider\" }), allowMultiselect && hasToggleSelection && (_jsxs(MenuItem, { className: \"menu-select-all\", \"data-testid\": \"CardMenu.toggle\", children: [_jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: toggleLabel ? toggleLabel : 'Select all' }), _jsx(ToggleSwitch, { onChange: onToggleChange, checked: isToggleChecked, compact: true })] })), _jsx(\"div\", { className: \"menu-content-items\", children: items.map((item) => {\n                                return (_jsxs(MenuItem, { disabled: item.disabled, onClick: () => onClickHandler(item), \"data-testid\": \"CardMenu.item\", \"data-state\": item.disabled ? 'disabled' : undefined, children: [item.icon && (_jsx(ListItemIcon, { children: _jsx(Icon, { className: item.icon, fontSize: \"small\" }) })), _jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: item.text }), allowMultiselect && (_jsx(Checkbox, { checked: item.isChecked, disabled: item.disabled, \"data-testid\": \"CardMenu.check\" }))] }, item.text));\n                            }) })] }) }) })) }));\n});\n//# sourceMappingURL=cardMenu.js.map"],"names":["CardMenu","forwardRef","items","setItems","open","header","anchorRef","allowMultiselect","hasToggleSelection","onItemClick","onClose","sx","classes","placement","toggleLabel","rounded","ref","isMobile","useWindowSize","isToggleChecked","onClickHandler","onToggleChange","useCardMenu","_jsx","_Fragment","children","_jsxs","DrawerStyled","anchor","hasHeader","className","List","map","item","React","Fragment","ListItem","button","disabled","onClick","undefined","icon","ListItemIcon","Icon","fontSize","ListItemText","primaryTypographyProps","noWrap","primary","text","Checkbox","checked","isChecked","Divider","variant","PopperStyled","anchorEl","current","ClickAwayListener","onClickAway","MenuListStyled","MenuItem","ToggleSwitch","onChange","compact"],"mappings":"wpBAWY,MAACA,EAAWC,GAAW,EAAGC,QAAOC,WAAUC,OAAMC,SAAQC,YAAWC,mBAAkBC,qBAAoBC,cAAaC,UAASC,KAAIC,UAASC,YAAWC,cAAaC,WAAYC,KACzL,MAAMC,SAAEA,GAAaC,KACfC,gBAAEA,EAAeC,eAAEA,EAAcC,eAAEA,GAAmBC,EAAYpB,EAAOK,EAAkBJ,EAAUM,EAAaC,GACxH,OAAQa,EAAKC,EAAW,CAAEC,SAAUR,EAAYS,EAAMC,EAAc,CAAEvB,KAAMA,EAAMM,QAASA,EAASkB,OAAQ,SAAUjB,GAAIA,EAAIK,IAAKA,EAAKJ,QAASA,EAASiB,YAAaxB,EAAQ,cAAe,WAAYoB,SAAU,CAACpB,GAAWkB,EAAK,MAAO,CAAEO,UAAW,gBAAiB,cAAe,kBAAmBL,SAAUpB,IAAYkB,EAAKQ,EAAM,CAAEN,SAAUvB,EAAM8B,KAAKC,GACxUP,EAAMQ,EAAMC,SAAU,CAAEV,SAAU,CAACC,EAAMU,EAAU,CAAEC,QAAQ,EAAMC,SAAUL,EAAKK,SAAUC,QAAS,IAAMnB,EAAea,GAAO,cAAe,gBAAiB,aAAcA,EAAKK,SAAW,gBAAaE,EAAWf,SAAU,CAACQ,EAAKQ,MAASlB,EAAKmB,EAAc,CAAEjB,SAAUF,EAAKoB,EAAM,CAAEb,UAAWG,EAAKQ,KAAMG,SAAU,YAAgBrB,EAAKsB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASf,EAAKgB,OAAS1C,GAAqBgB,EAAK2B,EAAU,CAAEC,QAASlB,EAAKmB,UAAWd,SAAUL,EAAKK,SAAU,cAAe,sBAA0Bf,EAAK8B,EAAS,CAAEC,QAAS,aAAgBrB,EAAKgB,aAC/kB1B,EAAKgC,EAAc,CAAEnD,KAAMA,EAAMoD,SAAUlD,EAAUmD,QAAS5C,UAAWA,EAAWG,IAAKA,EAAKD,QAASA,EAAS,cAAe,WAAYU,SAAUF,EAAKmC,EAAmB,CAAEC,YAAajD,EAASe,SAAUC,EAAMkC,EAAgB,CAAErD,iBAAkBA,EAAkBI,GAAIA,EAAIC,QAASA,EAASa,SAAU,CAACpB,GAAWqB,EAAMmC,EAAU,CAAE/B,UAAW,mBAAoB,cAAe,kBAAmBL,SAAU,CAACF,EAAKsB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAS3C,IAAWkB,EAAKmB,EAAc,CAAEH,QAAS7B,EAAS,cAAe,iBAAkBe,SAAUF,EAAKoB,EAAM,CAAEb,UAAW,UAAWc,SAAU,eAAoBvC,GAAUkB,EAAK8B,EAAS,CAAEC,QAAS,SAAUxB,UAAW,sBAAwBvB,GAAoBC,GAAuBkB,EAAMmC,EAAU,CAAE/B,UAAW,kBAAmB,cAAe,kBAAmBL,SAAU,CAACF,EAAKsB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASlC,GAA4B,eAAiBS,EAAKuC,EAAc,CAAEC,SAAU1C,EAAgB8B,QAAShC,EAAiB6C,SAAS,OAAczC,EAAK,MAAO,CAAEO,UAAW,qBAAsBL,SAAUvB,EAAM8B,KAAKC,GAC1mCP,EAAMmC,EAAU,CAAEvB,SAAUL,EAAKK,SAAUC,QAAS,IAAMnB,EAAea,GAAO,cAAe,gBAAiB,aAAcA,EAAKK,SAAW,gBAAaE,EAAWf,SAAU,CAACQ,EAAKQ,MAASlB,EAAKmB,EAAc,CAAEjB,SAAUF,EAAKoB,EAAM,CAAEb,UAAWG,EAAKQ,KAAMG,SAAU,YAAgBrB,EAAKsB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASf,EAAKgB,OAAS1C,GAAqBgB,EAAK2B,EAAU,CAAEC,QAASlB,EAAKmB,UAAWd,SAAUL,EAAKK,SAAU,cAAe,qBAAyBL,EAAKgB,kBAC7e"}
+{"version":3,"file":"cardMenu.js","sources":["../../../src/components/cardMenu/cardMenu.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { forwardRef } from 'react';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport { List, ListItem, ListItemIcon, ListItemText, MenuItem, ClickAwayListener, Divider } from '@mui/material';\nimport { Icon } from '../icon';\nimport { Checkbox } from '../checkbox';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { useCardMenu } from './hooks/useCardMenu';\nimport { PopperStyled } from './styled/popperStyled';\nimport { MenuListStyled } from './styled/menuListStyled';\nimport { DrawerStyled } from './styled/drawerStyled';\n/** @deprecated Use Menu component from @mui/material */\nexport const CardMenu = forwardRef(({ items, setItems, open, header, anchorRef, allowMultiselect, hasToggleSelection, onItemClick, onClose, sx, classes, placement, toggleLabel, rounded, }, ref) => {\n    const { isMobile } = useWindowSize();\n    const { isToggleChecked, onClickHandler, onToggleChange } = useCardMenu(items, allowMultiselect, setItems, onItemClick, onClose);\n    return (_jsx(_Fragment, { children: isMobile ? (_jsxs(DrawerStyled, { open: open, onClose: onClose, anchor: \"bottom\", sx: sx, ref: ref, classes: classes, hasHeader: !!header, \"data-testid\": \"CardMenu\", children: [header && (_jsx(\"div\", { className: \"drawer-header\", \"data-testid\": \"CardMenu.header\", children: header })), _jsx(List, { children: items.map((item) => {\n                        return (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { button: true, disabled: item.disabled, onClick: () => onClickHandler(item), \"data-testid\": \"CardMenu.item\", \"data-state\": item.disabled ? 'disabled' : undefined, children: [item.icon && (_jsx(ListItemIcon, { children: _jsx(Icon, { name: item.icon, fontSize: \"small\" }) })), _jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: item.text }), allowMultiselect && (_jsx(Checkbox, { checked: item.isChecked, disabled: item.disabled, \"data-testid\": \"CardMenu.check\" }))] }), _jsx(Divider, { variant: \"middle\" })] }, item.text));\n                    }) })] })) : (_jsx(PopperStyled, { open: open, anchorEl: anchorRef.current, placement: placement, ref: ref, rounded: rounded, \"data-testid\": \"CardMenu\", children: _jsx(ClickAwayListener, { onClickAway: onClose, children: _jsxs(MenuListStyled, { allowMultiselect: allowMultiselect, sx: sx, classes: classes, children: [header && (_jsxs(MenuItem, { className: \"menu-item-header\", \"data-testid\": \"CardMenu.header\", children: [_jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: header }), _jsx(ListItemIcon, { onClick: onClose, \"data-testid\": \"CardMenu.close\", children: _jsx(Icon, { name: \"close\", fontSize: \"small\" }) })] })), header && _jsx(Divider, { variant: \"middle\", className: \"menu-item-divider\" }), allowMultiselect && hasToggleSelection && (_jsxs(MenuItem, { className: \"menu-select-all\", \"data-testid\": \"CardMenu.toggle\", children: [_jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: toggleLabel ? toggleLabel : 'Select all' }), _jsx(ToggleSwitch, { onChange: onToggleChange, checked: isToggleChecked, compact: true })] })), _jsx(\"div\", { className: \"menu-content-items\", children: items.map((item) => {\n                                return (_jsxs(MenuItem, { disabled: item.disabled, onClick: () => onClickHandler(item), \"data-testid\": \"CardMenu.item\", \"data-state\": item.disabled ? 'disabled' : undefined, children: [item.icon && (_jsx(ListItemIcon, { children: _jsx(Icon, { name: item.icon, fontSize: \"small\" }) })), _jsx(ListItemText, { primaryTypographyProps: { noWrap: true }, primary: item.text }), allowMultiselect && (_jsx(Checkbox, { checked: item.isChecked, disabled: item.disabled, \"data-testid\": \"CardMenu.check\" }))] }, item.text));\n                            }) })] }) }) })) }));\n});\n//# sourceMappingURL=cardMenu.js.map"],"names":["CardMenu","forwardRef","items","setItems","open","header","anchorRef","allowMultiselect","hasToggleSelection","onItemClick","onClose","sx","classes","placement","toggleLabel","rounded","ref","isMobile","useWindowSize","isToggleChecked","onClickHandler","onToggleChange","useCardMenu","_jsx","_Fragment","children","_jsxs","DrawerStyled","anchor","hasHeader","className","List","map","item","React","Fragment","ListItem","button","disabled","onClick","undefined","icon","ListItemIcon","Icon","name","fontSize","ListItemText","primaryTypographyProps","noWrap","primary","text","Checkbox","checked","isChecked","Divider","variant","PopperStyled","anchorEl","current","ClickAwayListener","onClickAway","MenuListStyled","MenuItem","ToggleSwitch","onChange","compact"],"mappings":"4rBAYY,MAACA,EAAWC,GAAW,EAAGC,QAAOC,WAAUC,OAAMC,SAAQC,YAAWC,mBAAkBC,qBAAoBC,cAAaC,UAASC,KAAIC,UAASC,YAAWC,cAAaC,WAAYC,KACzL,MAAMC,SAAEA,GAAaC,KACfC,gBAAEA,EAAeC,eAAEA,EAAcC,eAAEA,GAAmBC,EAAYpB,EAAOK,EAAkBJ,EAAUM,EAAaC,GACxH,OAAQa,EAAKC,EAAW,CAAEC,SAAUR,EAAYS,EAAMC,EAAc,CAAEvB,KAAMA,EAAMM,QAASA,EAASkB,OAAQ,SAAUjB,GAAIA,EAAIK,IAAKA,EAAKJ,QAASA,EAASiB,YAAaxB,EAAQ,cAAe,WAAYoB,SAAU,CAACpB,GAAWkB,EAAK,MAAO,CAAEO,UAAW,gBAAiB,cAAe,kBAAmBL,SAAUpB,IAAYkB,EAAKQ,EAAM,CAAEN,SAAUvB,EAAM8B,KAAKC,GACxUP,EAAMQ,EAAMC,SAAU,CAAEV,SAAU,CAACC,EAAMU,EAAU,CAAEC,QAAQ,EAAMC,SAAUL,EAAKK,SAAUC,QAAS,IAAMnB,EAAea,GAAO,cAAe,gBAAiB,aAAcA,EAAKK,SAAW,gBAAaE,EAAWf,SAAU,CAACQ,EAAKQ,MAASlB,EAAKmB,EAAc,CAAEjB,SAAUF,EAAKoB,EAAM,CAAEC,KAAMX,EAAKQ,KAAMI,SAAU,YAAgBtB,EAAKuB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAShB,EAAKiB,OAAS3C,GAAqBgB,EAAK4B,EAAU,CAAEC,QAASnB,EAAKoB,UAAWf,SAAUL,EAAKK,SAAU,cAAe,sBAA0Bf,EAAK+B,EAAS,CAAEC,QAAS,aAAgBtB,EAAKiB,aAC1kB3B,EAAKiC,EAAc,CAAEpD,KAAMA,EAAMqD,SAAUnD,EAAUoD,QAAS7C,UAAWA,EAAWG,IAAKA,EAAKD,QAASA,EAAS,cAAe,WAAYU,SAAUF,EAAKoC,EAAmB,CAAEC,YAAalD,EAASe,SAAUC,EAAMmC,EAAgB,CAAEtD,iBAAkBA,EAAkBI,GAAIA,EAAIC,QAASA,EAASa,SAAU,CAACpB,GAAWqB,EAAMoC,EAAU,CAAEhC,UAAW,mBAAoB,cAAe,kBAAmBL,SAAU,CAACF,EAAKuB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAS5C,IAAWkB,EAAKmB,EAAc,CAAEH,QAAS7B,EAAS,cAAe,iBAAkBe,SAAUF,EAAKoB,EAAM,CAAEC,KAAM,QAASC,SAAU,eAAoBxC,GAAUkB,EAAK+B,EAAS,CAAEC,QAAS,SAAUzB,UAAW,sBAAwBvB,GAAoBC,GAAuBkB,EAAMoC,EAAU,CAAEhC,UAAW,kBAAmB,cAAe,kBAAmBL,SAAU,CAACF,EAAKuB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASnC,GAA4B,eAAiBS,EAAKwC,EAAc,CAAEC,SAAU3C,EAAgB+B,QAASjC,EAAiB8C,SAAS,OAAc1C,EAAK,MAAO,CAAEO,UAAW,qBAAsBL,SAAUvB,EAAM8B,KAAKC,GACnmCP,EAAMoC,EAAU,CAAExB,SAAUL,EAAKK,SAAUC,QAAS,IAAMnB,EAAea,GAAO,cAAe,gBAAiB,aAAcA,EAAKK,SAAW,gBAAaE,EAAWf,SAAU,CAACQ,EAAKQ,MAASlB,EAAKmB,EAAc,CAAEjB,SAAUF,EAAKoB,EAAM,CAAEC,KAAMX,EAAKQ,KAAMI,SAAU,YAAgBtB,EAAKuB,EAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAShB,EAAKiB,OAAS3C,GAAqBgB,EAAK4B,EAAU,CAAEC,QAASnB,EAAKoB,UAAWf,SAAUL,EAAKK,SAAU,cAAe,qBAAyBL,EAAKiB,kBACxe"}

package/components/cardMenu/styled/menuListStyled.js

@@ -1,2 +1,2 @@
-import t from"@emotion/styled";import i from"@mui/material/MenuList";import{flowColors as o}from"../../../design/skoda/palette.theme.js";const e=t(i,{shouldForwardProp:t=>"allowMultiselect"!==t})((({theme:t,allowMultiselect:i})=>{const e=i?{marginRight:"16px",marginRightCross:"3px",padding:"12px 12px 12px 24px"}:{marginRight:"0px",marginRightCross:"0px",padding:"12px 24px"};let r={};return r={boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)",background:t.palette.background.white,padding:"0px",minWidth:"105px",maxWidth:"222px","& > .menu-item-divider":{margin:"0px !important"},"& > .menu-content-items":{maxHeight:"240px",overflowY:"overlay","& .MuiCheckbox-root":{marginRight:"4px"}},"& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root":{color:t.palette.onSurface.os900,whiteSpace:"nowrap",padding:e.padding,"&.Mui-disabled":{color:o.disabled.primary,opacity:1,"& .MuiIcon-root":{color:`${o.disabled.primary}!important`}},"&:hover":{background:o.surface.primary},"& > .MuiListItemText-root":{marginRight:e.marginRight},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"16px","& > .MuiIcon-root":{color:t.palette.text.primary,display:"inline"}},"&.menu-item-header":{padding:"12px 12px 12px 24px","& .MuiTypography-root":{fontWeight:"700",lineHeight:"20px"},"&:hover":{background:t.palette.background.primary,cursor:"default"},"& .MuiListItemIcon-root":{color:t.palette.onSurface.os900,marginRight:e.marginRightCross,cursor:"pointer"},"& > .MuiListItemText-root":{marginRight:"15px"}},"&.menu-select-all":{"&:hover":{background:t.palette.background.primary,cursor:"default"}}}},r}));export{e as MenuListStyled};
+import t from"@emotion/styled";import i from"@mui/material/MenuList";import{paletteLight as o}from"../../../design/skoda/paletteLight.theme.js";const e=t(i,{shouldForwardProp:t=>"allowMultiselect"!==t})((({theme:t,allowMultiselect:i})=>{const e=i?{marginRight:"16px",marginRightCross:"3px",padding:"12px 12px 12px 24px"}:{marginRight:"0px",marginRightCross:"0px",padding:"12px 24px"};let r={};return r={boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)",background:t.palette.background.white,padding:"0px",minWidth:"105px",maxWidth:"222px","& > .menu-item-divider":{margin:"0px !important"},"& > .menu-content-items":{maxHeight:"240px",overflowY:"overlay","& .MuiCheckbox-root":{marginRight:"4px"}},"& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root":{color:t.palette.onSurface.os900,whiteSpace:"nowrap",padding:e.padding,"&.Mui-disabled":{color:o.disabled.primary,opacity:1,"& .MuiIcon-root":{color:`${o.disabled.primary}!important`}},"&:hover":{background:o.surface.primary},"& > .MuiListItemText-root":{marginRight:e.marginRight},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"16px","& > .MuiIcon-root":{color:t.palette.text.primary,display:"inline"}},"&.menu-item-header":{padding:"12px 12px 12px 24px","& .MuiTypography-root":{fontWeight:"700",lineHeight:"20px"},"&:hover":{background:t.palette.background.primary,cursor:"default"},"& .MuiListItemIcon-root":{color:t.palette.onSurface.os900,marginRight:e.marginRightCross,cursor:"pointer"},"& > .MuiListItemText-root":{marginRight:"15px"}},"&.menu-select-all":{"&:hover":{background:t.palette.background.primary,cursor:"default"}}}},r}));export{e as MenuListStyled};
 //# sourceMappingURL=menuListStyled.js.map

package/components/cardMenu/styled/menuListStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuListStyled.js","sources":["../../../../src/components/cardMenu/styled/menuListStyled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport MenuList from '@mui/material/MenuList';\nimport { flowColors } from '../../../design/skoda/palette.theme';\nexport const MenuListStyled = styled(MenuList, {\n    shouldForwardProp: (prop) => prop !== 'allowMultiselect',\n})(({ theme, allowMultiselect }) => {\n    const conditionalStyles = allowMultiselect\n        ? { marginRight: '16px', marginRightCross: '3px', padding: '12px 12px 12px 24px' }\n        : { marginRight: '0px', marginRightCross: '0px', padding: '12px 24px' };\n    let style = {};\n    style = {\n        boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)',\n        background: theme.palette.background.white,\n        padding: '0px',\n        minWidth: '105px',\n        maxWidth: '222px',\n        '& > .menu-item-divider': {\n            margin: '0px !important',\n        },\n        '& > .menu-content-items': {\n            maxHeight: '240px',\n            overflowY: 'overlay',\n            '& .MuiCheckbox-root': {\n                marginRight: '4px',\n            },\n        },\n        '& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root': {\n            color: theme.palette.onSurface.os900,\n            whiteSpace: 'nowrap',\n            padding: conditionalStyles.padding,\n            '&.Mui-disabled': {\n                color: flowColors.disabled.primary,\n                opacity: 1,\n                '& .MuiIcon-root': {\n                    color: `${flowColors.disabled.primary}!important`,\n                },\n            },\n            '&:hover': {\n                background: flowColors.surface.primary,\n            },\n            '& > .MuiListItemText-root': {\n                marginRight: conditionalStyles.marginRight,\n            },\n            '& .MuiTypography-root': {\n                fontSize: '16px',\n                lineHeight: '24px',\n                fontWeight: '400',\n            },\n            '& > .MuiListItemIcon-root': {\n                display: 'inline-block',\n                lineHeight: '21px',\n                minWidth: 'unset',\n                width: '20px',\n                marginRight: '16px',\n                '& > .MuiIcon-root': {\n                    color: theme.palette.text.primary,\n                    display: 'inline',\n                },\n            },\n            '&.menu-item-header': {\n                padding: '12px 12px 12px 24px',\n                '& .MuiTypography-root': {\n                    fontWeight: '700',\n                    lineHeight: '20px',\n                },\n                '&:hover': {\n                    background: theme.palette.background.primary,\n                    cursor: 'default',\n                },\n                '& .MuiListItemIcon-root': {\n                    color: theme.palette.onSurface.os900,\n                    marginRight: conditionalStyles.marginRightCross,\n                    cursor: 'pointer',\n                },\n                '& > .MuiListItemText-root': {\n                    marginRight: '15px',\n                },\n            },\n            '&.menu-select-all': {\n                '&:hover': {\n                    background: theme.palette.background.primary,\n                    cursor: 'default',\n                },\n            },\n        },\n    };\n    return style;\n});\n//# sourceMappingURL=menuListStyled.js.map"],"names":["MenuListStyled","styled","MenuList","shouldForwardProp","prop","theme","allowMultiselect","conditionalStyles","marginRight","marginRightCross","padding","style","boxShadow","background","palette","white","minWidth","maxWidth","margin","maxHeight","overflowY","color","onSurface","os900","whiteSpace","flowColors","disabled","primary","opacity","surface","fontSize","lineHeight","fontWeight","display","width","text","cursor"],"mappings":"yIAGY,MAACA,EAAiBC,EAAOC,EAAU,CAC3CC,kBAAoBC,GAAkB,qBAATA,GADHH,EAE3B,EAAGI,QAAOC,uBACT,MAAMC,EAAoBD,EACpB,CAAEE,YAAa,OAAQC,iBAAkB,MAAOC,QAAS,uBACzD,CAAEF,YAAa,MAAOC,iBAAkB,MAAOC,QAAS,aAC9D,IAAIC,EAAQ,CAAA,EA6EZ,OA5EAA,EAAQ,CACJC,UAAW,kCACXC,WAAYR,EAAMS,QAAQD,WAAWE,MACrCL,QAAS,MACTM,SAAU,QACVC,SAAU,QACV,yBAA0B,CACtBC,OAAQ,kBAEZ,0BAA2B,CACvBC,UAAW,QACXC,UAAW,UACX,sBAAuB,CACnBZ,YAAa,QAGrB,mEAAoE,CAChEa,MAAOhB,EAAMS,QAAQQ,UAAUC,MAC/BC,WAAY,SACZd,QAASH,EAAkBG,QAC3B,iBAAkB,CACdW,MAAOI,EAAWC,SAASC,QAC3BC,QAAS,EACT,kBAAmB,CACfP,MAAO,GAAGI,EAAWC,SAASC,sBAGtC,UAAW,CACPd,WAAYY,EAAWI,QAAQF,SAEnC,4BAA6B,CACzBnB,YAAaD,EAAkBC,aAEnC,wBAAyB,CACrBsB,SAAU,OACVC,WAAY,OACZC,WAAY,OAEhB,4BAA6B,CACzBC,QAAS,eACTF,WAAY,OACZf,SAAU,QACVkB,MAAO,OACP1B,YAAa,OACb,oBAAqB,CACjBa,MAAOhB,EAAMS,QAAQqB,KAAKR,QAC1BM,QAAS,WAGjB,qBAAsB,CAClBvB,QAAS,sBACT,wBAAyB,CACrBsB,WAAY,MACZD,WAAY,QAEhB,UAAW,CACPlB,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,WAEZ,0BAA2B,CACvBf,MAAOhB,EAAMS,QAAQQ,UAAUC,MAC/Bf,YAAaD,EAAkBE,iBAC/B2B,OAAQ,WAEZ,4BAA6B,CACzB5B,YAAa,SAGrB,oBAAqB,CACjB,UAAW,CACPK,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,cAKjBzB,CAAK"}
+{"version":3,"file":"menuListStyled.js","sources":["../../../../src/components/cardMenu/styled/menuListStyled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport MenuList from '@mui/material/MenuList';\nimport { paletteLight } from '../../../design/skoda/paletteLight.theme';\nexport const MenuListStyled = styled(MenuList, {\n    shouldForwardProp: (prop) => prop !== 'allowMultiselect',\n})(({ theme, allowMultiselect }) => {\n    const conditionalStyles = allowMultiselect\n        ? { marginRight: '16px', marginRightCross: '3px', padding: '12px 12px 12px 24px' }\n        : { marginRight: '0px', marginRightCross: '0px', padding: '12px 24px' };\n    let style = {};\n    style = {\n        boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)',\n        background: theme.palette.background.white,\n        padding: '0px',\n        minWidth: '105px',\n        maxWidth: '222px',\n        '& > .menu-item-divider': {\n            margin: '0px !important',\n        },\n        '& > .menu-content-items': {\n            maxHeight: '240px',\n            overflowY: 'overlay',\n            '& .MuiCheckbox-root': {\n                marginRight: '4px',\n            },\n        },\n        '& > .MuiMenuItem-root, > .menu-content-items > .MuiMenuItem-root': {\n            color: theme.palette.onSurface.os900,\n            whiteSpace: 'nowrap',\n            padding: conditionalStyles.padding,\n            '&.Mui-disabled': {\n                color: paletteLight.disabled.primary,\n                opacity: 1,\n                '& .MuiIcon-root': {\n                    color: `${paletteLight.disabled.primary}!important`,\n                },\n            },\n            '&:hover': {\n                background: paletteLight.surface.primary,\n            },\n            '& > .MuiListItemText-root': {\n                marginRight: conditionalStyles.marginRight,\n            },\n            '& .MuiTypography-root': {\n                fontSize: '16px',\n                lineHeight: '24px',\n                fontWeight: '400',\n            },\n            '& > .MuiListItemIcon-root': {\n                display: 'inline-block',\n                lineHeight: '21px',\n                minWidth: 'unset',\n                width: '20px',\n                marginRight: '16px',\n                '& > .MuiIcon-root': {\n                    color: theme.palette.text.primary,\n                    display: 'inline',\n                },\n            },\n            '&.menu-item-header': {\n                padding: '12px 12px 12px 24px',\n                '& .MuiTypography-root': {\n                    fontWeight: '700',\n                    lineHeight: '20px',\n                },\n                '&:hover': {\n                    background: theme.palette.background.primary,\n                    cursor: 'default',\n                },\n                '& .MuiListItemIcon-root': {\n                    color: theme.palette.onSurface.os900,\n                    marginRight: conditionalStyles.marginRightCross,\n                    cursor: 'pointer',\n                },\n                '& > .MuiListItemText-root': {\n                    marginRight: '15px',\n                },\n            },\n            '&.menu-select-all': {\n                '&:hover': {\n                    background: theme.palette.background.primary,\n                    cursor: 'default',\n                },\n            },\n        },\n    };\n    return style;\n});\n//# sourceMappingURL=menuListStyled.js.map"],"names":["MenuListStyled","styled","MenuList","shouldForwardProp","prop","theme","allowMultiselect","conditionalStyles","marginRight","marginRightCross","padding","style","boxShadow","background","palette","white","minWidth","maxWidth","margin","maxHeight","overflowY","color","onSurface","os900","whiteSpace","paletteLight","disabled","primary","opacity","surface","fontSize","lineHeight","fontWeight","display","width","text","cursor"],"mappings":"gJAGY,MAACA,EAAiBC,EAAOC,EAAU,CAC3CC,kBAAoBC,GAAkB,qBAATA,GADHH,EAE3B,EAAGI,QAAOC,uBACT,MAAMC,EAAoBD,EACpB,CAAEE,YAAa,OAAQC,iBAAkB,MAAOC,QAAS,uBACzD,CAAEF,YAAa,MAAOC,iBAAkB,MAAOC,QAAS,aAC9D,IAAIC,EAAQ,CAAA,EA6EZ,OA5EAA,EAAQ,CACJC,UAAW,kCACXC,WAAYR,EAAMS,QAAQD,WAAWE,MACrCL,QAAS,MACTM,SAAU,QACVC,SAAU,QACV,yBAA0B,CACtBC,OAAQ,kBAEZ,0BAA2B,CACvBC,UAAW,QACXC,UAAW,UACX,sBAAuB,CACnBZ,YAAa,QAGrB,mEAAoE,CAChEa,MAAOhB,EAAMS,QAAQQ,UAAUC,MAC/BC,WAAY,SACZd,QAASH,EAAkBG,QAC3B,iBAAkB,CACdW,MAAOI,EAAaC,SAASC,QAC7BC,QAAS,EACT,kBAAmB,CACfP,MAAO,GAAGI,EAAaC,SAASC,sBAGxC,UAAW,CACPd,WAAYY,EAAaI,QAAQF,SAErC,4BAA6B,CACzBnB,YAAaD,EAAkBC,aAEnC,wBAAyB,CACrBsB,SAAU,OACVC,WAAY,OACZC,WAAY,OAEhB,4BAA6B,CACzBC,QAAS,eACTF,WAAY,OACZf,SAAU,QACVkB,MAAO,OACP1B,YAAa,OACb,oBAAqB,CACjBa,MAAOhB,EAAMS,QAAQqB,KAAKR,QAC1BM,QAAS,WAGjB,qBAAsB,CAClBvB,QAAS,sBACT,wBAAyB,CACrBsB,WAAY,MACZD,WAAY,QAEhB,UAAW,CACPlB,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,WAEZ,0BAA2B,CACvBf,MAAOhB,EAAMS,QAAQQ,UAAUC,MAC/Bf,YAAaD,EAAkBE,iBAC/B2B,OAAQ,WAEZ,4BAA6B,CACzB5B,YAAa,SAGrB,oBAAqB,CACjB,UAAW,CACPK,WAAYR,EAAMS,QAAQD,WAAWc,QACrCS,OAAQ,cAKjBzB,CAAK"}

package/components/chip/chipDropdownChildren/chipDropdownChildren.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsxs as r,Fragment as o,jsx as n}from"react/jsx-runtime";import{forwardRef as e,useState as a,useCallback as t,useMemo as s}from"react";import{ClickAwayListener as m}from"@mui/material";import l from"../chipFocusVisibleStyled.js";import c from"@mui/material/Chip";import{styled as p}from"@mui/material/styles";import d from"../../common/menuContainer.js";import{Icon as f}from"../../icon/icon.js";const h=e(((e,c)=>{var{variant:p}=e,h=i(e,["variant"]);const[b,v]=a(!1),[w,O]=a(!1),g=t((()=>{O(!1)}),[]),x=s((()=>r(o,{children:[h.label,n(f,{className:"chevron-down "+(w?"isOpen":""),fontSize:"small"})]})),[w,h.label]),C=t((()=>{v(!0)}),[]),j=t((i=>{v(!1),h.onBlur&&h.onBlur(i)}),[h]);return n(m,{onClickAway:g,children:r("span",{children:[n("div",{children:n(l,{focusVisible:b,variant:p,children:n(u,{className:"shadow"===p&&"MuiChip-shadow",ref:c,variant:"filled",icon:h.icon?n(f,{className:h.icon}):void 0,disabled:h.disabled,label:x,onClick:()=>O(!w),onFocusVisible:C,onBlur:j,isOpen:w})})}),n(d,{isOpen:w,marginTop:14,isEmptyMenu:!0,children:h.children})]})})})),u=p(c,{shouldForwardProp:i=>"isOpen"!==i})((()=>({"& .chevron-down":{marginLeft:"8px",transform:"rotate(0deg)",top:"4px",transition:"transform 0.6s","&.isOpen":{transform:"rotate(180deg) translateY(2px)",transformOrigin:"50%"}}})));export{h as ChipDropdownChildren};
+import{__rest as i}from"tslib";import{jsxs as r,Fragment as o,jsx as n}from"react/jsx-runtime";import{forwardRef as e,useState as a,useCallback as t,useMemo as s}from"react";import{ClickAwayListener as m}from"@mui/material";import l from"../chipFocusVisibleStyled.js";import c from"@mui/material/Chip";import{styled as p}from"@mui/material/styles";import d from"../../common/menuContainer.js";import{Icon as f}from"../../icon/icon.js";import"../../icon/icon.definitions.js";const h=e(((e,c)=>{var{variant:p}=e,h=i(e,["variant"]);const[b,v]=a(!1),[w,O]=a(!1),g=t((()=>{O(!1)}),[]),j=s((()=>r(o,{children:[h.label,n(f,{name:"chevron-down",className:w?"isOpen":"",fontSize:"small"})]})),[w,h.label]),x=t((()=>{v(!0)}),[]),C=t((i=>{v(!1),h.onBlur&&h.onBlur(i)}),[h]);return n(m,{onClickAway:g,children:r("span",{children:[n("div",{children:n(l,{focusVisible:b,variant:p,children:n(u,{className:"shadow"===p&&"MuiChip-shadow",ref:c,variant:"filled",icon:h.icon?n(f,{className:h.icon}):void 0,disabled:h.disabled,label:j,onClick:()=>O(!w),onFocusVisible:x,onBlur:C,isOpen:w})})}),n(d,{isOpen:w,marginTop:14,isEmptyMenu:!0,children:h.children})]})})})),u=p(c,{shouldForwardProp:i=>"isOpen"!==i})((()=>({"& .chevron-down":{marginLeft:"8px",transform:"rotate(0deg)",top:"4px",transition:"transform 0.6s","&.isOpen":{transform:"rotate(180deg) translateY(2px)",transformOrigin:"50%"}}})));export{h as ChipDropdownChildren};
 //# sourceMappingURL=chipDropdownChildren.js.map

package/components/chip/chipDropdownChildren/chipDropdownChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"chipDropdownChildren.js","sources":["../../../../src/components/chip/chipDropdownChildren/chipDropdownChildren.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState, useCallback, useMemo, forwardRef } from 'react';\nimport { ClickAwayListener } from '@mui/material';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\nimport MuiChip from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport MenuContainer from '../../common/menuContainer';\nimport { Icon } from '../../icon';\n/**\n * @description SkodaFlow Chip component.\n * Properties are inherited from HTML Div element.\n * @param props ChipProps\n * @returns React Functional Component\n */\nexport const ChipDropdownChildren = forwardRef((_a, ref) => {\n    var { variant } = _a, props = __rest(_a, [\"variant\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const handleClickAway = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n    const renderLabel = useMemo(() => {\n        return (_jsxs(_Fragment, { children: [props.label, _jsx(Icon, { className: `chevron-down ${isOpen ? 'isOpen' : ''}`, fontSize: \"small\" })] }));\n    }, [isOpen, props.label]);\n    const onFocusVisibleHandler = useCallback(() => {\n        setFocusVisible(true);\n    }, []);\n    const onBlur = useCallback((e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    }, [props]);\n    return (_jsx(ClickAwayListener, { onClickAway: handleClickAway, children: _jsxs(\"span\", { children: [_jsx(\"div\", { children: _jsx(ChipFocusVisibleStyled, { focusVisible: focusVisibled, variant: variant, children: _jsx(ChipDropdownChildrenStyled, { className: variant === 'shadow' && 'MuiChip-shadow', ref: ref, variant: 'filled', icon: props.icon ? _jsx(Icon, { className: props.icon }) : undefined, disabled: props.disabled, label: renderLabel, onClick: () => setIsOpen(!isOpen), onFocusVisible: onFocusVisibleHandler, onBlur: onBlur, isOpen: isOpen }) }) }), _jsx(MenuContainer, { isOpen: isOpen, marginTop: 14, isEmptyMenu: true, children: props.children })] }) }));\n});\n/**\n * @description Chip styling definition based on props\n */\nconst ChipDropdownChildrenStyled = styled(MuiChip, {\n    shouldForwardProp: (prop) => prop !== 'isOpen',\n})(() => ({\n    '& .chevron-down': {\n        marginLeft: '8px',\n        transform: 'rotate(0deg)',\n        top: '4px',\n        transition: 'transform 0.6s',\n        '&.isOpen': {\n            transform: 'rotate(180deg) translateY(2px)',\n            transformOrigin: '50%',\n        },\n    },\n}));\n//# sourceMappingURL=chipDropdownChildren.js.map"],"names":["ChipDropdownChildren","forwardRef","_a","ref","variant","props","__rest","focusVisibled","setFocusVisible","useState","isOpen","setIsOpen","handleClickAway","useCallback","renderLabel","useMemo","_jsxs","_Fragment","children","label","_jsx","Icon","className","fontSize","onFocusVisibleHandler","onBlur","e","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","ChipDropdownChildrenStyled","icon","undefined","disabled","onClick","onFocusVisible","MenuContainer","marginTop","isEmptyMenu","styled","MuiChip","shouldForwardProp","prop","marginLeft","transform","top","transition","transformOrigin"],"mappings":"mbAeY,MAACA,EAAuBC,GAAW,CAACC,EAAIC,KAChD,IAAIC,QAAEA,GAAYF,EAAIG,EAAQC,EAAOJ,EAAI,CAAC,YAC1C,MAAOK,EAAeC,GAAmBC,GAAS,IAC3CC,EAAQC,GAAaF,GAAS,GAC/BG,EAAkBC,GAAY,KAChCF,GAAU,EAAM,GACjB,IACGG,EAAcC,GAAQ,IAChBC,EAAMC,EAAW,CAAEC,SAAU,CAACb,EAAMc,MAAOC,EAAKC,EAAM,CAAEC,UAAW,iBAAgBZ,EAAS,SAAW,IAAMa,SAAU,cAChI,CAACb,EAAQL,EAAMc,QACZK,EAAwBX,GAAY,KACtCL,GAAgB,EAAK,GACtB,IACGiB,EAASZ,GAAaa,IACxBlB,GAAgB,GACZH,EAAMoB,QACNpB,EAAMoB,OAAOC,EAAE,GACpB,CAACrB,IACJ,OAAQe,EAAKO,EAAmB,CAAEC,YAAahB,EAAiBM,SAAUF,EAAM,OAAQ,CAAEE,SAAU,CAACE,EAAK,MAAO,CAAEF,SAAUE,EAAKS,EAAwB,CAAEC,aAAcvB,EAAeH,QAASA,EAASc,SAAUE,EAAKW,EAA4B,CAAET,UAAuB,WAAZlB,GAAwB,iBAAkBD,IAAKA,EAAKC,QAAS,SAAU4B,KAAM3B,EAAM2B,KAAOZ,EAAKC,EAAM,CAAEC,UAAWjB,EAAM2B,YAAUC,EAAWC,SAAU7B,EAAM6B,SAAUf,MAAOL,EAAaqB,QAAS,IAAMxB,GAAWD,GAAS0B,eAAgBZ,EAAuBC,OAAQA,EAAQf,OAAQA,QAAiBU,EAAKiB,EAAe,CAAE3B,OAAQA,EAAQ4B,UAAW,GAAIC,aAAa,EAAMrB,SAAUb,EAAMa,eAAoB,IAK3pBa,EAA6BS,EAAOC,EAAS,CAC/CC,kBAAoBC,GAAkB,WAATA,GADEH,EAEhC,KAAO,CACN,kBAAmB,CACfI,WAAY,MACZC,UAAW,eACXC,IAAK,MACLC,WAAY,iBACZ,WAAY,CACRF,UAAW,iCACXG,gBAAiB"}
+{"version":3,"file":"chipDropdownChildren.js","sources":["../../../../src/components/chip/chipDropdownChildren/chipDropdownChildren.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState, useCallback, useMemo, forwardRef } from 'react';\nimport { ClickAwayListener } from '@mui/material';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\nimport MuiChip from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport MenuContainer from '../../common/menuContainer';\nimport { Icon } from '../../icon';\n/**\n * @description SkodaFlow Chip component.\n * Properties are inherited from HTML Div element.\n * @param props ChipProps\n * @returns React Functional Component\n */\nexport const ChipDropdownChildren = forwardRef((_a, ref) => {\n    var { variant } = _a, props = __rest(_a, [\"variant\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const handleClickAway = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n    const renderLabel = useMemo(() => {\n        return (_jsxs(_Fragment, { children: [props.label, _jsx(Icon, { name: \"chevron-down\", className: isOpen ? 'isOpen' : '', fontSize: \"small\" })] }));\n    }, [isOpen, props.label]);\n    const onFocusVisibleHandler = useCallback(() => {\n        setFocusVisible(true);\n    }, []);\n    const onBlur = useCallback((e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    }, [props]);\n    return (_jsx(ClickAwayListener, { onClickAway: handleClickAway, children: _jsxs(\"span\", { children: [_jsx(\"div\", { children: _jsx(ChipFocusVisibleStyled, { focusVisible: focusVisibled, variant: variant, children: _jsx(ChipDropdownChildrenStyled, { className: variant === 'shadow' && 'MuiChip-shadow', ref: ref, variant: 'filled', icon: props.icon ? _jsx(Icon, { className: props.icon }) : undefined, disabled: props.disabled, label: renderLabel, onClick: () => setIsOpen(!isOpen), onFocusVisible: onFocusVisibleHandler, onBlur: onBlur, isOpen: isOpen }) }) }), _jsx(MenuContainer, { isOpen: isOpen, marginTop: 14, isEmptyMenu: true, children: props.children })] }) }));\n});\n/**\n * @description Chip styling definition based on props\n */\nconst ChipDropdownChildrenStyled = styled(MuiChip, {\n    shouldForwardProp: (prop) => prop !== 'isOpen',\n})(() => ({\n    '& .chevron-down': {\n        marginLeft: '8px',\n        transform: 'rotate(0deg)',\n        top: '4px',\n        transition: 'transform 0.6s',\n        '&.isOpen': {\n            transform: 'rotate(180deg) translateY(2px)',\n            transformOrigin: '50%',\n        },\n    },\n}));\n//# sourceMappingURL=chipDropdownChildren.js.map"],"names":["ChipDropdownChildren","forwardRef","_a","ref","variant","props","__rest","focusVisibled","setFocusVisible","useState","isOpen","setIsOpen","handleClickAway","useCallback","renderLabel","useMemo","_jsxs","_Fragment","children","label","_jsx","Icon","name","className","fontSize","onFocusVisibleHandler","onBlur","e","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","ChipDropdownChildrenStyled","icon","undefined","disabled","onClick","onFocusVisible","MenuContainer","marginTop","isEmptyMenu","styled","MuiChip","shouldForwardProp","prop","marginLeft","transform","top","transition","transformOrigin"],"mappings":"0dAeY,MAACA,EAAuBC,GAAW,CAACC,EAAIC,KAChD,IAAIC,QAAEA,GAAYF,EAAIG,EAAQC,EAAOJ,EAAI,CAAC,YAC1C,MAAOK,EAAeC,GAAmBC,GAAS,IAC3CC,EAAQC,GAAaF,GAAS,GAC/BG,EAAkBC,GAAY,KAChCF,GAAU,EAAM,GACjB,IACGG,EAAcC,GAAQ,IAChBC,EAAMC,EAAW,CAAEC,SAAU,CAACb,EAAMc,MAAOC,EAAKC,EAAM,CAAEC,KAAM,eAAgBC,UAAWb,EAAS,SAAW,GAAIc,SAAU,cACpI,CAACd,EAAQL,EAAMc,QACZM,EAAwBZ,GAAY,KACtCL,GAAgB,EAAK,GACtB,IACGkB,EAASb,GAAac,IACxBnB,GAAgB,GACZH,EAAMqB,QACNrB,EAAMqB,OAAOC,EAAE,GACpB,CAACtB,IACJ,OAAQe,EAAKQ,EAAmB,CAAEC,YAAajB,EAAiBM,SAAUF,EAAM,OAAQ,CAAEE,SAAU,CAACE,EAAK,MAAO,CAAEF,SAAUE,EAAKU,EAAwB,CAAEC,aAAcxB,EAAeH,QAASA,EAASc,SAAUE,EAAKY,EAA4B,CAAET,UAAuB,WAAZnB,GAAwB,iBAAkBD,IAAKA,EAAKC,QAAS,SAAU6B,KAAM5B,EAAM4B,KAAOb,EAAKC,EAAM,CAAEE,UAAWlB,EAAM4B,YAAUC,EAAWC,SAAU9B,EAAM8B,SAAUhB,MAAOL,EAAasB,QAAS,IAAMzB,GAAWD,GAAS2B,eAAgBZ,EAAuBC,OAAQA,EAAQhB,OAAQA,QAAiBU,EAAKkB,EAAe,CAAE5B,OAAQA,EAAQ6B,UAAW,GAAIC,aAAa,EAAMtB,SAAUb,EAAMa,eAAoB,IAK3pBc,EAA6BS,EAAOC,EAAS,CAC/CC,kBAAoBC,GAAkB,WAATA,GADEH,EAEhC,KAAO,CACN,kBAAmB,CACfI,WAAY,MACZC,UAAW,eACXC,IAAK,MACLC,WAAY,iBACZ,WAAY,CACRF,UAAW,iCACXG,gBAAiB"}

package/components/chip/chipMultiselect/multiSelectChip.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { IconNameProp } from '../../icon';
 import { PaperProps } from '../../menu';
 /**
  * @interface ChipProps
@@ -17,7 +18,7 @@ export interface MultiSelectChipProps extends HTMLAttributes<HTMLDivElement>, Om
     /**
      * Icon name. For example "check". If no prefix is defined, default SKODA icon font is used
      */
-    icon?: string;
+    icon?: IconNameProp;
     /**
      * Variant of chip defines different look and style
      */

package/components/chip/chipMultiselect/multiSelectChip.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as o,Fragment as t,jsx as r}from"react/jsx-runtime";import{forwardRef as i,useState as a,useCallback as n,useMemo as l}from"react";import s from"@mui/material/Chip";import{styled as c}from"@mui/material/styles";import{Icon as m}from"../../icon/icon.js";import p from"../chipFocusVisibleStyled.js";import{ClickAwayListener as d}from"@mui/material";import h from"../../common/menuContainer.js";const g=i(((i,s)=>{var{variant:c,label:g,disabled:f,icon:b}=i,k=e(i,["variant","label","disabled","icon"]);const[x,H]=a(!1),[v,O]=a(!1),[S,C]=a(!1),j=n((e=>{e.stopPropagation(),k.reactHook.setState([])}),[k.reactHook]),w=l((()=>o(t,{children:[g,k.reactHook.state.length>0&&r("span",{className:"count",children:r("span",{children:k.reactHook.state.length})}),k.reactHook.state.length>0&&r(m,{color:"inherit",className:"ballotx",fontSize:"small",onClick:j})||r(m,{color:"inherit",className:"chevron-down "+(S?"isOpen":""),fontSize:"small"})]})),[S,g,j,k.reactHook.state.length]),y=n((e=>{H(!1),k.onBlur&&k.onBlur(e)}),[k]),L=n((()=>{C((e=>!e)),O((e=>!e))}),[]),N=n((()=>{C(!1),O(!1)}),[]),I=n((()=>{H(!0)}),[]);return r(t,{children:r(d,{onClickAway:N,children:o("span",{children:[r("div",{children:r(p,{focusVisible:x,variant:c,children:r(u,{className:"shadow"===c&&"MuiChip-shadow",ref:s,variant:"filled",icon:b?r(m,{className:`${b}`}):void 0,label:w,disabled:f,onClick:L,color:v||k.reactHook.state.length?"primary":"default",onFocusVisible:I,onBlur:y,count:k.reactHook.state.length,isOpen:S})})}),r(h,{disabled:f,isOpen:S,items:k.items,hasIcon:k.hasIcon,multipleSelection:!0,groupToggleSelection:k.groupToggleSelection,groupLabel:k.groupLabel,reactHook:k.reactHook,width:182,marginTop:14,setIsOpen:C,toggleLabel:k.toggleLabel})]})})})})),u=c(s,{shouldForwardProp:e=>"isOpen"!==e})((({theme:e})=>{const o=e.palette;let t={"& .chevron-down":{color:"inherit",marginLeft:"8px",transform:"rotate(0deg)",top:"4px",transition:"transform 0.6s","&.isOpen":{transform:"rotate(180deg) translateY(2px)",transformOrigin:"50%"}},"& .ballotx":{color:"inherit"},"& .count":{color:o.onSurface.os0,borderRadius:"50%",backgroundColor:o.brand.primary,minWidth:"20px",height:"20px",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:"14px",lineHeight:"16px",fontWeight:"700",margin:"0 8px",padding:"0 4px"}};return t=Object.assign(Object.assign({},t),{}),t}));export{g as MultiSelectChip};
+import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{forwardRef as r,useState as n,useCallback as a,useMemo as l}from"react";import s from"@mui/material/Chip";import{styled as c}from"@mui/material/styles";import{Icon as m}from"../../icon/icon.js";import"../../icon/icon.definitions.js";import p from"../chipFocusVisibleStyled.js";import{ClickAwayListener as d}from"@mui/material";import h from"../../common/menuContainer.js";const g=r(((r,s)=>{var{variant:c,label:g,disabled:f,icon:b}=r,k=o(r,["variant","label","disabled","icon"]);const[x,H]=n(!1),[v,O]=n(!1),[S,j]=n(!1),C=a((o=>{o.stopPropagation(),k.reactHook.setState([])}),[k.reactHook]),w=l((()=>e(t,{children:[g,k.reactHook.state.length>0&&i("span",{className:"count",children:i("span",{children:k.reactHook.state.length})}),k.reactHook.state.length>0&&i(m,{color:"inherit",name:"close",fontSize:"small",onClick:C})||i(m,{color:"inherit",name:"chevron-down",className:S?"isOpen":"",fontSize:"small"})]})),[S,g,C,k.reactHook.state.length]),y=a((o=>{H(!1),k.onBlur&&k.onBlur(o)}),[k]),L=a((()=>{j((o=>!o)),O((o=>!o))}),[]),I=a((()=>{j(!1),O(!1)}),[]),z=a((()=>{H(!0)}),[]);return i(t,{children:i(d,{onClickAway:I,children:e("span",{children:[i("div",{children:i(p,{focusVisible:x,variant:c,children:i(u,{className:"shadow"===c&&"MuiChip-shadow",ref:s,variant:"filled",icon:b?i(m,{name:b}):void 0,label:w,disabled:f,onClick:L,color:v||k.reactHook.state.length?"primary":"default",onFocusVisible:z,onBlur:y,count:k.reactHook.state.length,isOpen:S})})}),i(h,{disabled:f,isOpen:S,items:k.items,hasIcon:k.hasIcon,multipleSelection:!0,groupToggleSelection:k.groupToggleSelection,groupLabel:k.groupLabel,reactHook:k.reactHook,width:182,marginTop:14,setIsOpen:j,toggleLabel:k.toggleLabel})]})})})})),u=c(s,{shouldForwardProp:o=>"isOpen"!==o})((({theme:o})=>{const e=o.palette;let t={"& .chevron-down":{color:"inherit",marginLeft:"8px",transform:"rotate(0deg)",top:"4px",transition:"transform 0.6s","&.isOpen":{transform:"rotate(180deg) translateY(2px)",transformOrigin:"50%"}},"& .ballotx":{color:"inherit"},"& .count":{color:e.onSurface.os0,borderRadius:"50%",backgroundColor:e.brand.primary,minWidth:"20px",height:"20px",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:"14px",lineHeight:"16px",fontWeight:"700",margin:"0 8px",padding:"0 4px"}};return t=Object.assign(Object.assign({},t),{}),t}));export{g as MultiSelectChip};
 //# sourceMappingURL=multiSelectChip.js.map

package/components/chip/chipMultiselect/multiSelectChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiSelectChip.js","sources":["../../../../src/components/chip/chipMultiselect/multiSelectChip.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport MuiChip from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../../icon';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\nimport { ClickAwayListener } from '@mui/material';\nimport MenuContainer from '../../common/menuContainer';\n/**\n * @description SkodaFlow Chip component.\n * Properties are inherited from HTML Div element.\n * @param props ChipProps\n * @returns React Functional Component\n */\nexport const MultiSelectChip = forwardRef((_a, ref) => {\n    var { variant, label, disabled, icon } = _a, props = __rest(_a, [\"variant\", \"label\", \"disabled\", \"icon\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [selected, setSelected] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const onClickCloseHandler = useCallback((e) => {\n        e.stopPropagation();\n        props.reactHook.setState([]);\n    }, [props.reactHook]);\n    const Count = useMemo(() => {\n        return (_jsxs(_Fragment, { children: [label, props.reactHook.state.length > 0 && (_jsx(\"span\", { className: \"count\", children: _jsx(\"span\", { children: props.reactHook.state.length }) })), (props.reactHook.state.length > 0 && (_jsx(Icon, { color: \"inherit\", className: \"ballotx\", fontSize: \"small\", onClick: onClickCloseHandler }))) || _jsx(Icon, { color: \"inherit\", className: `chevron-down ${isOpen ? 'isOpen' : ''}`, fontSize: \"small\" })] }));\n    }, [isOpen, label, onClickCloseHandler, props.reactHook.state.length]);\n    const onBlur = useCallback((e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    }, [props]);\n    const onSelectHandler = useCallback(() => {\n        setIsOpen((curr) => !curr);\n        setSelected((curr) => !curr);\n    }, []);\n    const handleClickAway = useCallback(() => {\n        setIsOpen(false);\n        setSelected(false);\n    }, []);\n    const onFocusVisibleHandler = useCallback(() => {\n        setFocusVisible(true);\n    }, []);\n    return (_jsx(_Fragment, { children: _jsx(ClickAwayListener, { onClickAway: handleClickAway, children: _jsxs(\"span\", { children: [_jsx(\"div\", { children: _jsx(ChipFocusVisibleStyled, { focusVisible: focusVisibled, variant: variant, children: _jsx(MultiSelectChipStyled, { className: variant === 'shadow' && 'MuiChip-shadow', ref: ref, variant: 'filled', icon: icon ? _jsx(Icon, { className: `${icon}` }) : undefined, label: Count, disabled: disabled, onClick: onSelectHandler, color: selected || props.reactHook.state.length ? 'primary' : 'default', onFocusVisible: onFocusVisibleHandler, onBlur: onBlur, count: props.reactHook.state.length, isOpen: isOpen }) }) }), _jsx(MenuContainer, { disabled: disabled, isOpen: isOpen, items: props.items, hasIcon: props.hasIcon, multipleSelection: true, groupToggleSelection: props.groupToggleSelection, groupLabel: props.groupLabel, reactHook: props.reactHook, width: 182, marginTop: 14, setIsOpen: setIsOpen, toggleLabel: props.toggleLabel })] }) }) }));\n});\n/**\n * @description Chip styling definition based on props\n */\nconst MultiSelectChipStyled = styled(MuiChip, {\n    shouldForwardProp: (prop) => prop !== 'isOpen',\n})(({ theme }) => {\n    const flowColors = theme.palette;\n    const stateStyle = {};\n    // if (count > 0) {\n    // \tstateStyle = {\n    // \t\t'&.MuiChip-root': {\n    // \t\t\tbackgroundColor: flowColors.brand.quarternary,\n    // \t\t\tcolor: flowColors.brand.primary,\n    // \t\t\t'& .MuiIcon-root': {\n    // \t\t\t\tcolor: flowColors.brand.primary,\n    // \t\t\t},\n    // \t\t\t'&: hover': {\n    // \t\t\t\tcolor: flowColors.brandHover.primary,\n    // \t\t\t\t'& .MuiIcon-root': {\n    // \t\t\t\t\tcolor: flowColors.brandHover.primary,\n    // \t\t\t\t},\n    // \t\t\t\t'& .count': {\n    // \t\t\t\t\tbackgroundColor: flowColors.brandHover.primary,\n    // \t\t\t\t},\n    // \t\t\t},\n    // \t\t\t'&.Mui-disabled': {\n    // \t\t\t\tbackgroundColor: flowColors.transparent.primary,\n    // \t\t\t},\n    // \t\t},\n    // \t};\n    // } else {\n    // \tstateStyle = {};\n    // }\n    let style = {\n        '& .chevron-down': {\n            color: 'inherit',\n            marginLeft: '8px',\n            transform: 'rotate(0deg)',\n            top: '4px',\n            transition: 'transform 0.6s',\n            '&.isOpen': {\n                transform: 'rotate(180deg) translateY(2px)',\n                transformOrigin: '50%',\n            },\n        },\n        '& .ballotx': {\n            color: 'inherit',\n        },\n        '& .count': {\n            color: flowColors.onSurface.os0,\n            borderRadius: '50%',\n            backgroundColor: flowColors.brand.primary,\n            minWidth: '20px',\n            height: '20px',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontSize: '14px',\n            lineHeight: '16px',\n            fontWeight: '700',\n            margin: '0 8px',\n            padding: '0 4px',\n        },\n    };\n    style = Object.assign(Object.assign({}, style), stateStyle);\n    return style;\n});\n//# sourceMappingURL=multiSelectChip.js.map"],"names":["MultiSelectChip","forwardRef","_a","ref","variant","label","disabled","icon","props","__rest","focusVisibled","setFocusVisible","useState","selected","setSelected","isOpen","setIsOpen","onClickCloseHandler","useCallback","e","stopPropagation","reactHook","setState","Count","useMemo","_jsxs","_Fragment","children","state","length","_jsx","className","Icon","color","fontSize","onClick","onBlur","onSelectHandler","curr","handleClickAway","onFocusVisibleHandler","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","MultiSelectChipStyled","undefined","onFocusVisible","count","MenuContainer","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","width","marginTop","toggleLabel","styled","MuiChip","shouldForwardProp","prop","theme","flowColors","palette","style","marginLeft","transform","top","transition","transformOrigin","onSurface","os0","borderRadius","backgroundColor","brand","primary","minWidth","height","display","alignItems","justifyContent","lineHeight","fontWeight","margin","padding","Object","assign"],"mappings":"mbAeY,MAACA,EAAkBC,GAAW,CAACC,EAAIC,KAC3C,IAAIC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASL,EAAIM,EAAQC,EAAOP,EAAI,CAAC,UAAW,QAAS,WAAY,SACjG,MAAOQ,EAAeC,GAAmBC,GAAS,IAC3CC,EAAUC,GAAeF,GAAS,IAClCG,EAAQC,GAAaJ,GAAS,GAC/BK,EAAsBC,GAAaC,IACrCA,EAAEC,kBACFZ,EAAMa,UAAUC,SAAS,GAAG,GAC7B,CAACd,EAAMa,YACJE,EAAQC,GAAQ,IACVC,EAAMC,EAAW,CAAEC,SAAU,CAACtB,EAAOG,EAAMa,UAAUO,MAAMC,OAAS,GAAMC,EAAK,OAAQ,CAAEC,UAAW,QAASJ,SAAUG,EAAK,OAAQ,CAAEH,SAAUnB,EAAMa,UAAUO,MAAMC,WAAgBrB,EAAMa,UAAUO,MAAMC,OAAS,GAAMC,EAAKE,EAAM,CAAEC,MAAO,UAAWF,UAAW,UAAWG,SAAU,QAASC,QAASlB,KAA4Ba,EAAKE,EAAM,CAAEC,MAAO,UAAWF,UAAW,iBAAgBhB,EAAS,SAAW,IAAMmB,SAAU,cAC/a,CAACnB,EAAQV,EAAOY,EAAqBT,EAAMa,UAAUO,MAAMC,SACxDO,EAASlB,GAAaC,IACxBR,GAAgB,GACZH,EAAM4B,QACN5B,EAAM4B,OAAOjB,EAAE,GACpB,CAACX,IACE6B,EAAkBnB,GAAY,KAChCF,GAAWsB,IAAUA,IACrBxB,GAAawB,IAAUA,GAAK,GAC7B,IACGC,EAAkBrB,GAAY,KAChCF,GAAU,GACVF,GAAY,EAAM,GACnB,IACG0B,EAAwBtB,GAAY,KACtCP,GAAgB,EAAK,GACtB,IACH,OAAQmB,EAAKJ,EAAW,CAAEC,SAAUG,EAAKW,EAAmB,CAAEC,YAAaH,EAAiBZ,SAAUF,EAAM,OAAQ,CAAEE,SAAU,CAACG,EAAK,MAAO,CAAEH,SAAUG,EAAKa,EAAwB,CAAEC,aAAclC,EAAeN,QAASA,EAASuB,SAAUG,EAAKe,EAAuB,CAAEd,UAAuB,WAAZ3B,GAAwB,iBAAkBD,IAAKA,EAAKC,QAAS,SAAUG,KAAMA,EAAOuB,EAAKE,EAAM,CAAED,UAAW,GAAGxB,WAAYuC,EAAWzC,MAAOkB,EAAOjB,SAAUA,EAAU6B,QAASE,EAAiBJ,MAAOpB,GAAYL,EAAMa,UAAUO,MAAMC,OAAS,UAAY,UAAWkB,eAAgBP,EAAuBJ,OAAQA,EAAQY,MAAOxC,EAAMa,UAAUO,MAAMC,OAAQd,OAAQA,QAAiBe,EAAKmB,EAAe,CAAE3C,SAAUA,EAAUS,OAAQA,EAAQmC,MAAO1C,EAAM0C,MAAOC,QAAS3C,EAAM2C,QAASC,mBAAmB,EAAMC,qBAAsB7C,EAAM6C,qBAAsBC,WAAY9C,EAAM8C,WAAYjC,UAAWb,EAAMa,UAAWkC,MAAO,IAAKC,UAAW,GAAIxC,UAAWA,EAAWyC,YAAajD,EAAMiD,oBAA0B,IAKj+BZ,EAAwBa,EAAOC,EAAS,CAC1CC,kBAAoBC,GAAkB,WAATA,GADHH,EAE3B,EAAGI,YACF,MAAMC,EAAaD,EAAME,QA2BzB,IAAIC,EAAQ,CACR,kBAAmB,CACfhC,MAAO,UACPiC,WAAY,MACZC,UAAW,eACXC,IAAK,MACLC,WAAY,iBACZ,WAAY,CACRF,UAAW,iCACXG,gBAAiB,QAGzB,aAAc,CACVrC,MAAO,WAEX,WAAY,CACRA,MAAO8B,EAAWQ,UAAUC,IAC5BC,aAAc,MACdC,gBAAiBX,EAAWY,MAAMC,QAClCC,SAAU,OACVC,OAAQ,OACRC,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChB/C,SAAU,OACVgD,WAAY,OACZC,WAAY,MACZC,OAAQ,QACRC,QAAS,UAIjB,OADApB,EAAQqB,OAAOC,OAAOD,OAAOC,OAAO,GAAItB,GAzDrB,CAAA,GA0DZA,CAAK"}
+{"version":3,"file":"multiSelectChip.js","sources":["../../../../src/components/chip/chipMultiselect/multiSelectChip.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport MuiChip from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../../icon';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\nimport { ClickAwayListener } from '@mui/material';\nimport MenuContainer from '../../common/menuContainer';\n/**\n * @description SkodaFlow Chip component.\n * Properties are inherited from HTML Div element.\n * @param props ChipProps\n * @returns React Functional Component\n */\nexport const MultiSelectChip = forwardRef((_a, ref) => {\n    var { variant, label, disabled, icon } = _a, props = __rest(_a, [\"variant\", \"label\", \"disabled\", \"icon\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [selected, setSelected] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const onClickCloseHandler = useCallback((e) => {\n        e.stopPropagation();\n        props.reactHook.setState([]);\n    }, [props.reactHook]);\n    const Count = useMemo(() => {\n        return (_jsxs(_Fragment, { children: [label, props.reactHook.state.length > 0 && (_jsx(\"span\", { className: \"count\", children: _jsx(\"span\", { children: props.reactHook.state.length }) })), (props.reactHook.state.length > 0 && (_jsx(Icon, { color: \"inherit\", name: \"close\", fontSize: \"small\", onClick: onClickCloseHandler }))) || _jsx(Icon, { color: \"inherit\", name: \"chevron-down\", className: isOpen ? 'isOpen' : '', fontSize: \"small\" })] }));\n    }, [isOpen, label, onClickCloseHandler, props.reactHook.state.length]);\n    const onBlur = useCallback((e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    }, [props]);\n    const onSelectHandler = useCallback(() => {\n        setIsOpen((curr) => !curr);\n        setSelected((curr) => !curr);\n    }, []);\n    const handleClickAway = useCallback(() => {\n        setIsOpen(false);\n        setSelected(false);\n    }, []);\n    const onFocusVisibleHandler = useCallback(() => {\n        setFocusVisible(true);\n    }, []);\n    return (_jsx(_Fragment, { children: _jsx(ClickAwayListener, { onClickAway: handleClickAway, children: _jsxs(\"span\", { children: [_jsx(\"div\", { children: _jsx(ChipFocusVisibleStyled, { focusVisible: focusVisibled, variant: variant, children: _jsx(MultiSelectChipStyled, { className: variant === 'shadow' && 'MuiChip-shadow', ref: ref, variant: 'filled', icon: icon ? _jsx(Icon, { name: icon }) : undefined, label: Count, disabled: disabled, onClick: onSelectHandler, color: selected || props.reactHook.state.length ? 'primary' : 'default', onFocusVisible: onFocusVisibleHandler, onBlur: onBlur, count: props.reactHook.state.length, isOpen: isOpen }) }) }), _jsx(MenuContainer, { disabled: disabled, isOpen: isOpen, items: props.items, hasIcon: props.hasIcon, multipleSelection: true, groupToggleSelection: props.groupToggleSelection, groupLabel: props.groupLabel, reactHook: props.reactHook, width: 182, marginTop: 14, setIsOpen: setIsOpen, toggleLabel: props.toggleLabel })] }) }) }));\n});\n/**\n * @description Chip styling definition based on props\n */\nconst MultiSelectChipStyled = styled(MuiChip, {\n    shouldForwardProp: (prop) => prop !== 'isOpen',\n})(({ theme }) => {\n    const flowColors = theme.palette;\n    const stateStyle = {};\n    // if (count > 0) {\n    // \tstateStyle = {\n    // \t\t'&.MuiChip-root': {\n    // \t\t\tbackgroundColor: flowColors.brand.quarternary,\n    // \t\t\tcolor: flowColors.brand.primary,\n    // \t\t\t'& .MuiIcon-root': {\n    // \t\t\t\tcolor: flowColors.brand.primary,\n    // \t\t\t},\n    // \t\t\t'&: hover': {\n    // \t\t\t\tcolor: flowColors.brandHover.primary,\n    // \t\t\t\t'& .MuiIcon-root': {\n    // \t\t\t\t\tcolor: flowColors.brandHover.primary,\n    // \t\t\t\t},\n    // \t\t\t\t'& .count': {\n    // \t\t\t\t\tbackgroundColor: flowColors.brandHover.primary,\n    // \t\t\t\t},\n    // \t\t\t},\n    // \t\t\t'&.Mui-disabled': {\n    // \t\t\t\tbackgroundColor: flowColors.transparent.primary,\n    // \t\t\t},\n    // \t\t},\n    // \t};\n    // } else {\n    // \tstateStyle = {};\n    // }\n    let style = {\n        '& .chevron-down': {\n            color: 'inherit',\n            marginLeft: '8px',\n            transform: 'rotate(0deg)',\n            top: '4px',\n            transition: 'transform 0.6s',\n            '&.isOpen': {\n                transform: 'rotate(180deg) translateY(2px)',\n                transformOrigin: '50%',\n            },\n        },\n        '& .ballotx': {\n            color: 'inherit',\n        },\n        '& .count': {\n            color: flowColors.onSurface.os0,\n            borderRadius: '50%',\n            backgroundColor: flowColors.brand.primary,\n            minWidth: '20px',\n            height: '20px',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontSize: '14px',\n            lineHeight: '16px',\n            fontWeight: '700',\n            margin: '0 8px',\n            padding: '0 4px',\n        },\n    };\n    style = Object.assign(Object.assign({}, style), stateStyle);\n    return style;\n});\n//# sourceMappingURL=multiSelectChip.js.map"],"names":["MultiSelectChip","forwardRef","_a","ref","variant","label","disabled","icon","props","__rest","focusVisibled","setFocusVisible","useState","selected","setSelected","isOpen","setIsOpen","onClickCloseHandler","useCallback","e","stopPropagation","reactHook","setState","Count","useMemo","_jsxs","_Fragment","children","state","length","_jsx","className","Icon","color","name","fontSize","onClick","onBlur","onSelectHandler","curr","handleClickAway","onFocusVisibleHandler","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","MultiSelectChipStyled","undefined","onFocusVisible","count","MenuContainer","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","width","marginTop","toggleLabel","styled","MuiChip","shouldForwardProp","prop","theme","flowColors","palette","style","marginLeft","transform","top","transition","transformOrigin","onSurface","os0","borderRadius","backgroundColor","brand","primary","minWidth","height","display","alignItems","justifyContent","lineHeight","fontWeight","margin","padding","Object","assign"],"mappings":"0dAeY,MAACA,EAAkBC,GAAW,CAACC,EAAIC,KAC3C,IAAIC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASL,EAAIM,EAAQC,EAAOP,EAAI,CAAC,UAAW,QAAS,WAAY,SACjG,MAAOQ,EAAeC,GAAmBC,GAAS,IAC3CC,EAAUC,GAAeF,GAAS,IAClCG,EAAQC,GAAaJ,GAAS,GAC/BK,EAAsBC,GAAaC,IACrCA,EAAEC,kBACFZ,EAAMa,UAAUC,SAAS,GAAG,GAC7B,CAACd,EAAMa,YACJE,EAAQC,GAAQ,IACVC,EAAMC,EAAW,CAAEC,SAAU,CAACtB,EAAOG,EAAMa,UAAUO,MAAMC,OAAS,GAAMC,EAAK,OAAQ,CAAEC,UAAW,QAASJ,SAAUG,EAAK,OAAQ,CAAEH,SAAUnB,EAAMa,UAAUO,MAAMC,WAAgBrB,EAAMa,UAAUO,MAAMC,OAAS,GAAMC,EAAKE,EAAM,CAAEC,MAAO,UAAWC,KAAM,QAASC,SAAU,QAASC,QAASnB,KAA4Ba,EAAKE,EAAM,CAAEC,MAAO,UAAWC,KAAM,eAAgBH,UAAWhB,EAAS,SAAW,GAAIoB,SAAU,cAC5a,CAACpB,EAAQV,EAAOY,EAAqBT,EAAMa,UAAUO,MAAMC,SACxDQ,EAASnB,GAAaC,IACxBR,GAAgB,GACZH,EAAM6B,QACN7B,EAAM6B,OAAOlB,EAAE,GACpB,CAACX,IACE8B,EAAkBpB,GAAY,KAChCF,GAAWuB,IAAUA,IACrBzB,GAAayB,IAAUA,GAAK,GAC7B,IACGC,EAAkBtB,GAAY,KAChCF,GAAU,GACVF,GAAY,EAAM,GACnB,IACG2B,EAAwBvB,GAAY,KACtCP,GAAgB,EAAK,GACtB,IACH,OAAQmB,EAAKJ,EAAW,CAAEC,SAAUG,EAAKY,EAAmB,CAAEC,YAAaH,EAAiBb,SAAUF,EAAM,OAAQ,CAAEE,SAAU,CAACG,EAAK,MAAO,CAAEH,SAAUG,EAAKc,EAAwB,CAAEC,aAAcnC,EAAeN,QAASA,EAASuB,SAAUG,EAAKgB,EAAuB,CAAEf,UAAuB,WAAZ3B,GAAwB,iBAAkBD,IAAKA,EAAKC,QAAS,SAAUG,KAAMA,EAAOuB,EAAKE,EAAM,CAAEE,KAAM3B,SAAUwC,EAAW1C,MAAOkB,EAAOjB,SAAUA,EAAU8B,QAASE,EAAiBL,MAAOpB,GAAYL,EAAMa,UAAUO,MAAMC,OAAS,UAAY,UAAWmB,eAAgBP,EAAuBJ,OAAQA,EAAQY,MAAOzC,EAAMa,UAAUO,MAAMC,OAAQd,OAAQA,QAAiBe,EAAKoB,EAAe,CAAE5C,SAAUA,EAAUS,OAAQA,EAAQoC,MAAO3C,EAAM2C,MAAOC,QAAS5C,EAAM4C,QAASC,mBAAmB,EAAMC,qBAAsB9C,EAAM8C,qBAAsBC,WAAY/C,EAAM+C,WAAYlC,UAAWb,EAAMa,UAAWmC,MAAO,IAAKC,UAAW,GAAIzC,UAAWA,EAAW0C,YAAalD,EAAMkD,oBAA0B,IAKv9BZ,EAAwBa,EAAOC,EAAS,CAC1CC,kBAAoBC,GAAkB,WAATA,GADHH,EAE3B,EAAGI,YACF,MAAMC,EAAaD,EAAME,QA2BzB,IAAIC,EAAQ,CACR,kBAAmB,CACfjC,MAAO,UACPkC,WAAY,MACZC,UAAW,eACXC,IAAK,MACLC,WAAY,iBACZ,WAAY,CACRF,UAAW,iCACXG,gBAAiB,QAGzB,aAAc,CACVtC,MAAO,WAEX,WAAY,CACRA,MAAO+B,EAAWQ,UAAUC,IAC5BC,aAAc,MACdC,gBAAiBX,EAAWY,MAAMC,QAClCC,SAAU,OACVC,OAAQ,OACRC,QAAS,cACTC,WAAY,SACZC,eAAgB,SAChB/C,SAAU,OACVgD,WAAY,OACZC,WAAY,MACZC,OAAQ,QACRC,QAAS,UAIjB,OADApB,EAAQqB,OAAOC,OAAOD,OAAOC,OAAO,GAAItB,GAzDrB,CAAA,GA0DZA,CAAK"}

package/components/chip/regular/chip.d.ts

@@ -1,4 +1,5 @@
 import React, { FC, HTMLAttributes } from 'react';
+import { IconNameProp } from '../../icon';
 /**
  * @interface ChipProps
  * @description Base definition of SkodaFlow Chip independent on core implementation.
@@ -16,7 +17,7 @@ export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Boolean to display icon
      */
-    icon?: string;
+    icon?: IconNameProp;
     /**
      * Variant of chip defines different look and style
      */

package/components/chip/regular/chip.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"tslib";import{jsx as l}from"react/jsx-runtime";import{useState as o,useEffect as a}from"react";import r from"@mui/material/Chip";import{styled as e}from"@mui/material/styles";import{Icon as t}from"../../icon/icon.js";import s from"../chipFocusVisibleStyled.js";const c=r=>{var{variant:e,label:c,disabled:n,isSelected:d=!1,icon:b,onClickCallback:f}=r,p=i(r,["variant","label","disabled","isSelected","icon","onClickCallback"]);const[u,C]=o(!1),[h,v]=o(!1);a((()=>{v(d)}),[d]);return l(s,{variant:e,focusVisible:u,children:l(m,{className:"shadow"===e&&"MuiChip-shadow",variant:"filled",icon:b?l(t,{className:`${b} beforeLabel`,fontSize:"small"}):void 0,label:c,disabled:n,onClick:i=>(i=>{v(!h),f&&f(i,!h)})(i),color:h?"primary":"default",onFocusVisible:()=>C(!0),onBlur:i=>{C(!1),p.onBlur&&p.onBlur(i)}})})},m=e(r)``;export{c as Chip};
+import{__rest as i}from"tslib";import{jsx as o}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import r from"@mui/material/Chip";import{styled as e}from"@mui/material/styles";import{Icon as t}from"../../icon/icon.js";import"../../icon/icon.definitions.js";import s from"../chipFocusVisibleStyled.js";const n=r=>{var{variant:e,label:n,disabled:m,isSelected:d=!1,icon:b,onClickCallback:f}=r,p=i(r,["variant","label","disabled","isSelected","icon","onClickCallback"]);const[u,C]=l(!1),[h,v]=l(!1);a((()=>{v(d)}),[d]);return o(s,{variant:e,focusVisible:u,children:o(c,{className:"shadow"===e&&"MuiChip-shadow",variant:"filled",icon:b?o(t,{name:b,className:"beforeLabel",fontSize:"small"}):void 0,label:n,disabled:m,onClick:i=>(i=>{v(!h),f&&f(i,!h)})(i),color:h?"primary":"default",onFocusVisible:()=>C(!0),onBlur:i=>{C(!1),p.onBlur&&p.onBlur(i)}})})},c=e(r)``;export{n as Chip};
 //# sourceMappingURL=chip.js.map

package/components/chip/regular/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/chip/regular/chip.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect, useState } from 'react';\nimport MuiChip from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../../icon';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\n/**\n * @description SkodaFlow Chip component.\n * Properties are inherited from HTML Div element.\n * @param props ChipProps\n * @returns React Functional Component\n * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.\n */\nexport const Chip = (_a) => {\n    var { variant, label, disabled, isSelected = false, icon, onClickCallback } = _a, props = __rest(_a, [\"variant\", \"label\", \"disabled\", \"isSelected\", \"icon\", \"onClickCallback\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [selected, setSelected] = useState(false);\n    useEffect(() => {\n        setSelected(isSelected);\n    }, [isSelected]);\n    const onBlur = (e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    };\n    const onSelect = (e) => {\n        setSelected(!selected);\n        onClickCallback && onClickCallback(e, !selected);\n    };\n    return (_jsx(ChipFocusVisibleStyled, { variant: variant, focusVisible: focusVisibled, children: _jsx(ChipStyled, { className: variant === 'shadow' && 'MuiChip-shadow', variant: 'filled', icon: icon ? _jsx(Icon, { className: `${icon} beforeLabel`, fontSize: \"small\" }) : undefined, label: label, disabled: disabled, onClick: (e) => onSelect(e), color: selected ? 'primary' : 'default', onFocusVisible: () => setFocusVisible(true), onBlur: onBlur }) }));\n};\n/**\n * @description Chip styling defintion based on props\n */\nconst ChipStyled = styled(MuiChip) ``;\n//# sourceMappingURL=chip.js.map"],"names":["Chip","_a","variant","label","disabled","isSelected","icon","onClickCallback","props","__rest","focusVisibled","setFocusVisible","useState","selected","setSelected","useEffect","_jsx","ChipFocusVisibleStyled","focusVisible","children","ChipStyled","className","Icon","fontSize","undefined","onClick","e","onSelect","color","onFocusVisible","onBlur","styled","MuiChip"],"mappings":"6RAcY,MAACA,EAAQC,IACjB,IAAIC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,KAAEA,EAAIC,gBAAEA,GAAoBN,EAAIO,EAAQC,EAAOR,EAAI,CAAC,UAAW,QAAS,WAAY,aAAc,OAAQ,oBAC5J,MAAOS,EAAeC,GAAmBC,GAAS,IAC3CC,EAAUC,GAAeF,GAAS,GACzCG,GAAU,KACND,EAAYT,EAAW,GACxB,CAACA,IAUJ,OAAQW,EAAKC,EAAwB,CAAEf,QAASA,EAASgB,aAAcR,EAAeS,SAAUH,EAAKI,EAAY,CAAEC,UAAuB,WAAZnB,GAAwB,iBAAkBA,QAAS,SAAUI,KAAMA,EAAOU,EAAKM,EAAM,CAAED,UAAW,GAAGf,gBAAoBiB,SAAU,eAAaC,EAAWrB,MAAOA,EAAOC,SAAUA,EAAUqB,QAAUC,GAJpT,CAACA,IACdZ,GAAaD,GACbN,GAAmBA,EAAgBmB,GAAIb,EAAS,EAEuRc,CAASD,GAAIE,MAAOf,EAAW,UAAY,UAAWgB,eAAgB,IAAMlB,GAAgB,GAAOmB,OAT9ZJ,IACZf,GAAgB,GACZH,EAAMsB,QACNtB,EAAMsB,OAAOJ,EAAE,KAM6a,EAKlcN,EAAaW,EAAOC,EAAS"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/chip/regular/chip.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect, useState } from 'react';\nimport MuiChip from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../../icon';\nimport ChipFocusVisibleStyled from '../chipFocusVisibleStyled';\n/**\n * @description SkodaFlow Chip component.\n * Properties are inherited from HTML Div element.\n * @param props ChipProps\n * @returns React Functional Component\n * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.\n */\nexport const Chip = (_a) => {\n    var { variant, label, disabled, isSelected = false, icon, onClickCallback } = _a, props = __rest(_a, [\"variant\", \"label\", \"disabled\", \"isSelected\", \"icon\", \"onClickCallback\"]);\n    const [focusVisibled, setFocusVisible] = useState(false);\n    const [selected, setSelected] = useState(false);\n    useEffect(() => {\n        setSelected(isSelected);\n    }, [isSelected]);\n    const onBlur = (e) => {\n        setFocusVisible(false);\n        if (props.onBlur)\n            props.onBlur(e);\n    };\n    const onSelect = (e) => {\n        setSelected(!selected);\n        onClickCallback && onClickCallback(e, !selected);\n    };\n    return (_jsx(ChipFocusVisibleStyled, { variant: variant, focusVisible: focusVisibled, children: _jsx(ChipStyled, { className: variant === 'shadow' && 'MuiChip-shadow', variant: 'filled', icon: icon ? _jsx(Icon, { name: icon, className: \"beforeLabel\", fontSize: \"small\" }) : undefined, label: label, disabled: disabled, onClick: (e) => onSelect(e), color: selected ? 'primary' : 'default', onFocusVisible: () => setFocusVisible(true), onBlur: onBlur }) }));\n};\n/**\n * @description Chip styling defintion based on props\n */\nconst ChipStyled = styled(MuiChip) ``;\n//# sourceMappingURL=chip.js.map"],"names":["Chip","_a","variant","label","disabled","isSelected","icon","onClickCallback","props","__rest","focusVisibled","setFocusVisible","useState","selected","setSelected","useEffect","_jsx","ChipFocusVisibleStyled","focusVisible","children","ChipStyled","className","Icon","name","fontSize","undefined","onClick","e","onSelect","color","onFocusVisible","onBlur","styled","MuiChip"],"mappings":"oUAcY,MAACA,EAAQC,IACjB,IAAIC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,KAAEA,EAAIC,gBAAEA,GAAoBN,EAAIO,EAAQC,EAAOR,EAAI,CAAC,UAAW,QAAS,WAAY,aAAc,OAAQ,oBAC5J,MAAOS,EAAeC,GAAmBC,GAAS,IAC3CC,EAAUC,GAAeF,GAAS,GACzCG,GAAU,KACND,EAAYT,EAAW,GACxB,CAACA,IAUJ,OAAQW,EAAKC,EAAwB,CAAEf,QAASA,EAASgB,aAAcR,EAAeS,SAAUH,EAAKI,EAAY,CAAEC,UAAuB,WAAZnB,GAAwB,iBAAkBA,QAAS,SAAUI,KAAMA,EAAOU,EAAKM,EAAM,CAAEC,KAAMjB,EAAMe,UAAW,cAAeG,SAAU,eAAaC,EAAWtB,MAAOA,EAAOC,SAAUA,EAAUsB,QAAUC,GAJxT,CAACA,IACdb,GAAaD,GACbN,GAAmBA,EAAgBoB,GAAId,EAAS,EAE2Re,CAASD,GAAIE,MAAOhB,EAAW,UAAY,UAAWiB,eAAgB,IAAMnB,GAAgB,GAAOoB,OATlaJ,IACZhB,GAAgB,GACZH,EAAMuB,QACNvB,EAAMuB,OAAOJ,EAAE,KAMib,EAKtcP,EAAaY,EAAOC,EAAS"}

package/components/closeDialogButton/index.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{IconButton as o}from"@mui/material";import{Icon as m}from"../icon/icon.js";const r=r=>i(o,Object.assign({size:"small",color:"inherit"},r,{children:i(m,{className:"ballotx",fontSize:"medium"})}));export{r as CloseDialogButton};
+import{jsx as i}from"react/jsx-runtime";import{IconButton as o}from"@mui/material";import{Icon as m}from"../icon/icon.js";import"../icon/icon.definitions.js";const r=r=>i(o,Object.assign({size:"small",color:"inherit"},r,{children:i(m,{name:"close",fontSize:"medium"})}));export{r as CloseDialogButton};
 //# sourceMappingURL=index.js.map

package/components/closeDialogButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/closeDialogButton/index.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { IconButton } from '@mui/material';\nimport { Icon } from '../icon';\nexport const CloseDialogButton = (props) => {\n    return (_jsx(IconButton, Object.assign({ size: \"small\", color: \"inherit\" }, props, { children: _jsx(Icon, { className: \"ballotx\", fontSize: \"medium\" }) })));\n};\n//# sourceMappingURL=index.js.map"],"names":["CloseDialogButton","props","_jsx","IconButton","Object","assign","size","color","children","Icon","className","fontSize"],"mappings":"0HAGY,MAACA,EAAqBC,GACtBC,EAAKC,EAAYC,OAAOC,OAAO,CAAEC,KAAM,QAASC,MAAO,WAAaN,EAAO,CAAEO,SAAUN,EAAKO,EAAM,CAAEC,UAAW,UAAWC,SAAU"}
+{"version":3,"file":"index.js","sources":["../../../src/components/closeDialogButton/index.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { IconButton } from '@mui/material';\nimport { Icon } from '../icon';\nexport const CloseDialogButton = (props) => {\n    return (_jsx(IconButton, Object.assign({ size: \"small\", color: \"inherit\" }, props, { children: _jsx(Icon, { name: \"close\", fontSize: \"medium\" }) })));\n};\n//# sourceMappingURL=index.js.map"],"names":["CloseDialogButton","props","_jsx","IconButton","Object","assign","size","color","children","Icon","name","fontSize"],"mappings":"8JAGY,MAACA,EAAqBC,GACtBC,EAAKC,EAAYC,OAAOC,OAAO,CAAEC,KAAM,QAASC,MAAO,WAAaN,EAAO,CAAEO,SAAUN,EAAKO,EAAM,CAAEC,KAAM,QAASC,SAAU"}

package/components/common/interface/textInputInterface.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IconNameProp } from '../../icon';
 /**
  * @interface TextInputProps
  * @description Base definition of SkodaFlow TextArea and TextInput independent on core implementation.
@@ -41,7 +42,7 @@ export interface TextInputProps {
     /**
      * Icon name. For example "check". If no prefix is defined, default SKODA icon font is used
      */
-    icon?: string;
+    icon?: IconNameProp;
     /**
      *Boolean to check if the input returns an error or not
      */

package/components/common/styled/textFieldStyled.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import e from"@mui/material/TextField";import{styled as r}from"@mui/material/styles";import{flowColors as o}from"../../../design/skoda/palette.theme.js";const i=r(e,{shouldForwardProp:t=>"helpText"!==t&&"maxChars"!==t&&"hideBg"!==t&&"hasError"!==t&&"hovered"!==t&&"textAreaHeight"!==t})((e=>{var r=t(e,["theme"]);let i={};return i={},r.focused&&(i=Object.assign({},i)),r.error&&(i=Object.assign({},i)),r.icon&&(i=Object.assign({},i)),r.icon&&!r.placeholder&&(i=Object.assign(Object.assign({},i),{"& .MuiInput-underline":Object.assign(Object.assign({},i["& .MuiInput-underline"]),{"&:after":{bottom:"0px"},"&.Mui-error":{"&:after":{borderBottomColor:o.alert.main}}}),"& .MuiInput-root":Object.assign(Object.assign({},i["& .MuiInput-root"]),{marginTop:0,height:"inherit",transform:"translateY(0px)","& input":{marginTop:"20px"},"& .MuiIcon-root":{top:"0px !important"},"&:before":{bottom:"0px"}})})),r.icon&&r.placeholder&&(i=Object.assign(Object.assign({},i),{"& .MuiInput-root":Object.assign(Object.assign({},i["& .MuiInput-root"]),{"& .MuiIcon-root":{top:"-4px !important","&.Mui-error":{"&:after":{borderBottomColor:o.alert.main}}}})})),r.disabled&&(i=Object.assign({},i)),i}));export{i as default};
+import{__rest as t}from"tslib";import e from"@mui/material/TextField";import{styled as r}from"@mui/material/styles";import{paletteLight as o}from"../../../design/skoda/paletteLight.theme.js";const i=r(e,{shouldForwardProp:t=>"helpText"!==t&&"maxChars"!==t&&"hideBg"!==t&&"hasError"!==t&&"hovered"!==t&&"textAreaHeight"!==t})((e=>{var r=t(e,["theme"]);let i={};return i={},r.focused&&(i=Object.assign({},i)),r.error&&(i=Object.assign({},i)),r.icon&&(i=Object.assign({},i)),r.icon&&!r.placeholder&&(i=Object.assign(Object.assign({},i),{"& .MuiInput-underline":Object.assign(Object.assign({},i["& .MuiInput-underline"]),{"&:after":{bottom:"0px"},"&.Mui-error":{"&:after":{borderBottomColor:o.alert.main}}}),"& .MuiInput-root":Object.assign(Object.assign({},i["& .MuiInput-root"]),{marginTop:0,height:"inherit",transform:"translateY(0px)","& input":{marginTop:"20px"},"& .MuiIcon-root":{top:"0px !important"},"&:before":{bottom:"0px"}})})),r.icon&&r.placeholder&&(i=Object.assign(Object.assign({},i),{"& .MuiInput-root":Object.assign(Object.assign({},i["& .MuiInput-root"]),{"& .MuiIcon-root":{top:"-4px !important","&.Mui-error":{"&:after":{borderBottomColor:o.alert.main}}}})})),r.disabled&&(i=Object.assign({},i)),i}));export{i as default};
 //# sourceMappingURL=textFieldStyled.js.map

package/components/common/styled/textFieldStyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"textFieldStyled.js","sources":["../../../../src/components/common/styled/textFieldStyled.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport MuiTextField from '@mui/material/TextField';\nimport { styled } from '@mui/material/styles';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description TextInput styling definition based on props\n */\nconst TextFieldStyled = styled(MuiTextField, {\n    shouldForwardProp: (prop) => prop !== 'helpText' &&\n        prop !== 'maxChars' &&\n        prop !== 'hideBg' &&\n        prop !== 'hasError' &&\n        prop !== 'hovered' &&\n        prop !== 'textAreaHeight',\n})((_a) => {\n    var { theme } = _a, props = __rest(_a, [\"theme\"]);\n    let styles = {};\n    styles = {\n    // '&, & *': {\n    // \tboxSizing: 'content-box !important',\n    // },\n    };\n    //Change styles if the input is focused\n    if (props.focused) {\n        styles = Object.assign({}, styles);\n    }\n    //If the input has an error, change the color of the label text and color/size of border's input\n    if (props.error) {\n        styles = Object.assign({}, styles);\n    }\n    if (props.icon) {\n        styles = Object.assign({}, styles);\n    }\n    if (props.icon && !props.placeholder) {\n        styles = Object.assign(Object.assign({}, styles), { '& .MuiInput-underline': Object.assign(Object.assign({}, styles['& .MuiInput-underline']), { '&:after': {\n                    bottom: '0px',\n                }, '&.Mui-error': {\n                    '&:after': {\n                        borderBottomColor: flowColors.alert['main'],\n                    },\n                } }), '& .MuiInput-root': Object.assign(Object.assign({}, styles['& .MuiInput-root']), { marginTop: 0, height: 'inherit', transform: 'translateY(0px)', '& input': {\n                    marginTop: '20px',\n                }, '& .MuiIcon-root': {\n                    top: '0px !important',\n                }, '&:before': {\n                    bottom: '0px',\n                } }) });\n    }\n    if (props.icon && props.placeholder) {\n        styles = Object.assign(Object.assign({}, styles), { '& .MuiInput-root': Object.assign(Object.assign({}, styles['& .MuiInput-root']), { '& .MuiIcon-root': {\n                    top: '-4px !important',\n                    '&.Mui-error': {\n                        '&:after': {\n                            borderBottomColor: flowColors.alert['main'],\n                        },\n                    },\n                } }) });\n    }\n    //Change styles if the input is disabled\n    if (props.disabled) {\n        styles = Object.assign({}, styles);\n    }\n    return styles;\n});\nexport default TextFieldStyled;\n//# sourceMappingURL=textFieldStyled.js.map"],"names":["TextFieldStyled","styled","MuiTextField","shouldForwardProp","prop","_a","props","__rest","styles","focused","Object","assign","error","icon","placeholder","bottom","borderBottomColor","flowColors","alert","marginTop","height","transform","top","disabled"],"mappings":"wLAOK,MAACA,EAAkBC,EAAOC,EAAc,CACzCC,kBAAoBC,GAAkB,aAATA,GAChB,aAATA,GACS,WAATA,GACS,aAATA,GACS,YAATA,GACS,mBAATA,GANgBH,EAOpBI,IACG,IAAiBC,EAAQC,EAAOF,EAAI,CAAC,UACxC,IAAIG,EAAS,CAAA,EA8Cb,OA7CAA,EAAS,CAIb,EAEQF,EAAMG,UACND,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAG3BF,EAAMM,QACNJ,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAE3BF,EAAMO,OACNL,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAE3BF,EAAMO,OAASP,EAAMQ,cACrBN,EAASE,OAAOC,OAAOD,OAAOC,OAAO,GAAIH,GAAS,CAAE,wBAAyBE,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEH,EAAO,0BAA2B,CAAE,UAAW,CAChJO,OAAQ,OACT,cAAe,CACd,UAAW,CACPC,kBAAmBC,EAAWC,MAAY,SAE5C,mBAAoBR,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIH,EAAO,qBAAsB,CAAEW,UAAW,EAAGC,OAAQ,UAAWC,UAAW,kBAAmB,UAAW,CAC/JF,UAAW,QACZ,kBAAmB,CAClBG,IAAK,kBACN,WAAY,CACXP,OAAQ,YAGpBT,EAAMO,MAAQP,EAAMQ,cACpBN,EAASE,OAAOC,OAAOD,OAAOC,OAAO,GAAIH,GAAS,CAAE,mBAAoBE,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEH,EAAO,qBAAsB,CAAE,kBAAmB,CAC9Ic,IAAK,kBACL,cAAe,CACX,UAAW,CACPN,kBAAmBC,EAAWC,MAAY,aAM9DZ,EAAMiB,WACNf,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAExBA,CAAM"}
+{"version":3,"file":"textFieldStyled.js","sources":["../../../../src/components/common/styled/textFieldStyled.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport MuiTextField from '@mui/material/TextField';\nimport { styled } from '@mui/material/styles';\nimport { paletteLight } from '../../../design/skoda/paletteLight.theme';\n/**\n * @description TextInput styling definition based on props\n */\nconst TextFieldStyled = styled(MuiTextField, {\n    shouldForwardProp: (prop) => prop !== 'helpText' &&\n        prop !== 'maxChars' &&\n        prop !== 'hideBg' &&\n        prop !== 'hasError' &&\n        prop !== 'hovered' &&\n        prop !== 'textAreaHeight',\n})((_a) => {\n    var { theme } = _a, props = __rest(_a, [\"theme\"]);\n    let styles = {};\n    styles = {\n    // '&, & *': {\n    // \tboxSizing: 'content-box !important',\n    // },\n    };\n    //Change styles if the input is focused\n    if (props.focused) {\n        styles = Object.assign({}, styles);\n    }\n    //If the input has an error, change the color of the label text and color/size of border's input\n    if (props.error) {\n        styles = Object.assign({}, styles);\n    }\n    if (props.icon) {\n        styles = Object.assign({}, styles);\n    }\n    if (props.icon && !props.placeholder) {\n        styles = Object.assign(Object.assign({}, styles), { '& .MuiInput-underline': Object.assign(Object.assign({}, styles['& .MuiInput-underline']), { '&:after': {\n                    bottom: '0px',\n                }, '&.Mui-error': {\n                    '&:after': {\n                        borderBottomColor: paletteLight.alert['main'],\n                    },\n                } }), '& .MuiInput-root': Object.assign(Object.assign({}, styles['& .MuiInput-root']), { marginTop: 0, height: 'inherit', transform: 'translateY(0px)', '& input': {\n                    marginTop: '20px',\n                }, '& .MuiIcon-root': {\n                    top: '0px !important',\n                }, '&:before': {\n                    bottom: '0px',\n                } }) });\n    }\n    if (props.icon && props.placeholder) {\n        styles = Object.assign(Object.assign({}, styles), { '& .MuiInput-root': Object.assign(Object.assign({}, styles['& .MuiInput-root']), { '& .MuiIcon-root': {\n                    top: '-4px !important',\n                    '&.Mui-error': {\n                        '&:after': {\n                            borderBottomColor: paletteLight.alert['main'],\n                        },\n                    },\n                } }) });\n    }\n    //Change styles if the input is disabled\n    if (props.disabled) {\n        styles = Object.assign({}, styles);\n    }\n    return styles;\n});\nexport default TextFieldStyled;\n//# sourceMappingURL=textFieldStyled.js.map"],"names":["TextFieldStyled","styled","MuiTextField","shouldForwardProp","prop","_a","props","__rest","styles","focused","Object","assign","error","icon","placeholder","bottom","borderBottomColor","paletteLight","alert","marginTop","height","transform","top","disabled"],"mappings":"+LAOK,MAACA,EAAkBC,EAAOC,EAAc,CACzCC,kBAAoBC,GAAkB,aAATA,GAChB,aAATA,GACS,WAATA,GACS,aAATA,GACS,YAATA,GACS,mBAATA,GANgBH,EAOpBI,IACG,IAAiBC,EAAQC,EAAOF,EAAI,CAAC,UACxC,IAAIG,EAAS,CAAA,EA8Cb,OA7CAA,EAAS,CAIb,EAEQF,EAAMG,UACND,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAG3BF,EAAMM,QACNJ,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAE3BF,EAAMO,OACNL,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAE3BF,EAAMO,OAASP,EAAMQ,cACrBN,EAASE,OAAOC,OAAOD,OAAOC,OAAO,GAAIH,GAAS,CAAE,wBAAyBE,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEH,EAAO,0BAA2B,CAAE,UAAW,CAChJO,OAAQ,OACT,cAAe,CACd,UAAW,CACPC,kBAAmBC,EAAaC,MAAY,SAE9C,mBAAoBR,OAAOC,OAAOD,OAAOC,OAAO,CAAA,EAAIH,EAAO,qBAAsB,CAAEW,UAAW,EAAGC,OAAQ,UAAWC,UAAW,kBAAmB,UAAW,CAC/JF,UAAW,QACZ,kBAAmB,CAClBG,IAAK,kBACN,WAAY,CACXP,OAAQ,YAGpBT,EAAMO,MAAQP,EAAMQ,cACpBN,EAASE,OAAOC,OAAOD,OAAOC,OAAO,GAAIH,GAAS,CAAE,mBAAoBE,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEH,EAAO,qBAAsB,CAAE,kBAAmB,CAC9Ic,IAAK,kBACL,cAAe,CACX,UAAW,CACPN,kBAAmBC,EAAaC,MAAY,aAMhEZ,EAAMiB,WACNf,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAExBA,CAAM"}

package/components/controls/controls.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import { ControllerSize, IconsStyle, DarkLightOptions, ControlVariant } from '../../utils/types';
+import { IconNameProp } from '../icon';
 export interface ControlsProps extends HTMLAttributes<HTMLDivElement> {
     controlVariant?: ControlVariant;
     /**
@@ -17,7 +18,7 @@ export interface ControlsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      *  Type of controls: next, previous, play, pause.
      */
-    controlType?: string;
+    controlType?: IconNameProp;
     /**
      *  If true, the control is disabled.
      */

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

package/components/icon/icon.d.ts

@@ -1,16 +1,17 @@
-import React, { HTMLAttributes } from 'react';
+/// <reference types="react" />
+import { IconProps as MuiIconProps } from '@mui/material';
+import { IconNameProp } from './icon.definitions';
 /**
  * @interface IconProps
- * @description Base definition of SkodaFlow Icon independent on core implementation.
- * Properties are inherited from HTML Span element
+ * @description Base definition of SkodaFlow Icon
  */
-export interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+export interface IconProps extends MuiIconProps {
     /**
-     *color of the icon
+     * Color of the icon
      */
     color?: 'inherit' | 'disabled' | 'action' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
     /**
-     * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+     * The fontSize applied to the icon. Defaults to 24px, but can be configured to inherit font size.
      * @default 'medium'
      */
     fontSize?: 'inherit' | 'extraLarge' | 'large' | 'medium' | 'small';
@@ -18,11 +19,18 @@ 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;
+    /**
+     * Class for the icon, used as `name` when property is not provided
+     */
+    className?: string;
 }
 /**
  * @description SkodaFlow Icon component.
- * Properties are inherited from HTML Span element.
  * @param props IconProps
  * @returns React Functional Component
  */
-export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;