@skodaflow/web-library 5.0.0 → 6.0.0

package/cjs/components/cardMenu/cardMenu.js

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

package/cjs/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","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","jsxs","MenuItem","ToggleSwitch","onChange","compact"],"mappings":"gdAWY,MAACA,EAAWC,EAAAA,YAAW,EAAGC,QAAOC,WAAUC,OAAMC,SAAQC,YAAWC,mBAAkBC,qBAAoBC,cAAaC,UAASC,KAAIC,UAASC,YAAWC,cAAaC,WAAYC,KACzL,MAAMC,SAAEA,GAAaC,EAAAA,WACfC,gBAAEA,EAAeC,eAAEA,EAAcC,eAAEA,GAAmBC,EAAAA,YAAYpB,EAAOK,EAAkBJ,EAAUM,EAAaC,GACxH,OAAQa,EAAIC,IAACC,WAAW,CAAEC,SAAUT,EAAYU,EAAAA,KAAMC,EAAYA,aAAE,CAAExB,KAAMA,EAAMM,QAASA,EAASmB,OAAQ,SAAUlB,GAAIA,EAAIK,IAAKA,EAAKJ,QAASA,EAASkB,YAAazB,EAAQ,cAAe,WAAYqB,SAAU,CAACrB,GAAWkB,MAAK,MAAO,CAAEQ,UAAW,gBAAiB,cAAe,kBAAmBL,SAAUrB,IAAYkB,MAAKS,EAAAA,KAAM,CAAEN,SAAUxB,EAAM+B,KAAKC,GACxUP,EAAAA,KAAMQ,EAAAA,QAAMC,SAAU,CAAEV,SAAU,CAACC,EAAAA,KAAMU,EAAAA,SAAU,CAAEC,QAAQ,EAAMC,SAAUL,EAAKK,SAAUC,QAAS,IAAMpB,EAAec,GAAO,cAAe,gBAAiB,aAAcA,EAAKK,SAAW,gBAAaE,EAAWf,SAAU,CAACQ,EAAKQ,MAASnB,EAAIC,IAACmB,EAAYA,aAAE,CAAEjB,SAAUH,EAAIC,IAACoB,EAAIA,KAAE,CAAEb,UAAWG,EAAKQ,KAAMG,SAAU,YAAgBtB,EAAAA,IAAKuB,EAAAA,aAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASf,EAAKgB,OAAS3C,GAAqBgB,EAAIC,IAAC2B,EAAQA,SAAE,CAAEC,QAASlB,EAAKmB,UAAWd,SAAUL,EAAKK,SAAU,cAAe,sBAA0BhB,EAAAA,IAAK+B,EAAOA,QAAE,CAAEC,QAAS,aAAgBrB,EAAKgB,aAC/kB3B,EAAIC,IAACgC,EAAYA,aAAE,CAAEpD,KAAMA,EAAMqD,SAAUnD,EAAUoD,QAAS7C,UAAWA,EAAWG,IAAKA,EAAKD,QAASA,EAAS,cAAe,WAAYW,SAAUH,EAAIC,IAACmC,EAAiBA,kBAAE,CAAEC,YAAalD,EAASgB,SAAUC,EAAAA,KAAMkC,EAAAA,eAAgB,CAAEtD,iBAAkBA,EAAkBI,GAAIA,EAAIC,QAASA,EAASc,SAAU,CAACrB,GAAWsB,EAAKmC,KAACC,EAAQA,SAAE,CAAEhC,UAAW,mBAAoB,cAAe,kBAAmBL,SAAU,CAACH,EAAIC,IAACsB,eAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAS5C,IAAWkB,EAAIC,IAACmB,EAAYA,aAAE,CAAEH,QAAS9B,EAAS,cAAe,iBAAkBgB,SAAUH,EAAIC,IAACoB,EAAIA,KAAE,CAAEb,UAAW,UAAWc,SAAU,eAAoBxC,GAAUkB,EAAAA,IAAK+B,EAAAA,QAAS,CAAEC,QAAS,SAAUxB,UAAW,sBAAwBxB,GAAoBC,GAAuBmB,EAAAA,KAAMoC,EAAAA,SAAU,CAAEhC,UAAW,kBAAmB,cAAe,kBAAmBL,SAAU,CAACH,EAAAA,IAAKuB,EAAAA,aAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASnC,GAA4B,eAAiBS,EAAAA,IAAKyC,EAAAA,aAAc,CAAEC,SAAU5C,EAAgB+B,QAASjC,EAAiB+C,SAAS,OAAc3C,EAAAA,IAAK,MAAO,CAAEQ,UAAW,qBAAsBL,SAAUxB,EAAM+B,KAAKC,GAC1mCP,EAAKmC,KAACC,EAAQA,SAAE,CAAExB,SAAUL,EAAKK,SAAUC,QAAS,IAAMpB,EAAec,GAAO,cAAe,gBAAiB,aAAcA,EAAKK,SAAW,gBAAaE,EAAWf,SAAU,CAACQ,EAAKQ,MAASnB,EAAAA,IAAKoB,EAAAA,aAAc,CAAEjB,SAAUH,EAAIC,IAACoB,EAAIA,KAAE,CAAEb,UAAWG,EAAKQ,KAAMG,SAAU,YAAgBtB,EAAAA,IAAKuB,EAAAA,aAAc,CAAEC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASf,EAAKgB,OAAS3C,GAAqBgB,EAAIC,IAAC2B,EAAQA,SAAE,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';\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","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","jsxs","MenuItem","ToggleSwitch","onChange","compact"],"mappings":"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"}

package/cjs/components/chip/chipDropdownChildren/chipDropdownChildren.js

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

package/cjs/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","jsxs","_Fragment","Fragment","children","label","_jsx","Icon","className","fontSize","onFocusVisibleHandler","onBlur","e","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","default","focusVisible","ChipDropdownChildrenStyled","icon","undefined","disabled","onClick","onFocusVisible","MenuContainer","marginTop","isEmptyMenu","styled","MuiChip","shouldForwardProp","prop","marginLeft","transform","top","transition","transformOrigin"],"mappings":"sWAeY,MAACA,EAAuBC,EAAUA,YAAC,CAACC,EAAIC,KAChD,IAAIC,QAAEA,GAAYF,EAAIG,EAAQC,EAAAA,OAAOJ,EAAI,CAAC,YAC1C,MAAOK,EAAeC,GAAmBC,EAAQA,UAAC,IAC3CC,EAAQC,GAAaF,EAAQA,UAAC,GAC/BG,EAAkBC,EAAAA,aAAY,KAChCF,GAAU,EAAM,GACjB,IACGG,EAAcC,EAAAA,SAAQ,IAChBC,EAAKC,KAACC,EAASC,SAAE,CAAEC,SAAU,CAACf,EAAMgB,MAAOC,MAAKC,EAAAA,KAAM,CAAEC,UAAW,iBAAgBd,EAAS,SAAW,IAAMe,SAAU,cAChI,CAACf,EAAQL,EAAMgB,QACZK,EAAwBb,EAAAA,aAAY,KACtCL,GAAgB,EAAK,GACtB,IACGmB,EAASd,eAAae,IACxBpB,GAAgB,GACZH,EAAMsB,QACNtB,EAAMsB,OAAOC,EAAE,GACpB,CAACvB,IACJ,OAAQiB,EAAAA,IAAKO,EAAAA,kBAAmB,CAAEC,YAAalB,EAAiBQ,SAAUJ,EAAKC,KAAC,OAAQ,CAAEG,SAAU,CAACE,EAAAA,IAAK,MAAO,CAAEF,SAAUE,EAAAA,IAAKS,EAAsBC,QAAE,CAAEC,aAAc1B,EAAeH,QAASA,EAASgB,SAAUE,MAAKY,EAA4B,CAAEV,UAAuB,WAAZpB,GAAwB,iBAAkBD,IAAKA,EAAKC,QAAS,SAAU+B,KAAM9B,EAAM8B,KAAOb,EAAAA,IAAKC,EAAAA,KAAM,CAAEC,UAAWnB,EAAM8B,YAAUC,EAAWC,SAAUhC,EAAMgC,SAAUhB,MAAOP,EAAawB,QAAS,IAAM3B,GAAWD,GAAS6B,eAAgBb,EAAuBC,OAAQA,EAAQjB,OAAQA,QAAiBY,EAAAA,IAAKkB,EAAAA,QAAe,CAAE9B,OAAQA,EAAQ+B,UAAW,GAAIC,aAAa,EAAMtB,SAAUf,EAAMe,eAAoB,IAK3pBc,EAA6BS,EAAMA,OAACC,UAAS,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","jsxs","_Fragment","Fragment","children","label","_jsx","Icon","name","className","fontSize","onFocusVisibleHandler","onBlur","e","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","default","focusVisible","ChipDropdownChildrenStyled","icon","undefined","disabled","onClick","onFocusVisible","MenuContainer","marginTop","isEmptyMenu","styled","MuiChip","shouldForwardProp","prop","marginLeft","transform","top","transition","transformOrigin"],"mappings":"gZAeY,MAACA,EAAuBC,EAAUA,YAAC,CAACC,EAAIC,KAChD,IAAIC,QAAEA,GAAYF,EAAIG,EAAQC,EAAAA,OAAOJ,EAAI,CAAC,YAC1C,MAAOK,EAAeC,GAAmBC,EAAQA,UAAC,IAC3CC,EAAQC,GAAaF,EAAQA,UAAC,GAC/BG,EAAkBC,EAAAA,aAAY,KAChCF,GAAU,EAAM,GACjB,IACGG,EAAcC,EAAAA,SAAQ,IAChBC,EAAKC,KAACC,EAASC,SAAE,CAAEC,SAAU,CAACf,EAAMgB,MAAOC,MAAKC,EAAAA,KAAM,CAAEC,KAAM,eAAgBC,UAAWf,EAAS,SAAW,GAAIgB,SAAU,cACpI,CAAChB,EAAQL,EAAMgB,QACZM,EAAwBd,EAAAA,aAAY,KACtCL,GAAgB,EAAK,GACtB,IACGoB,EAASf,eAAagB,IACxBrB,GAAgB,GACZH,EAAMuB,QACNvB,EAAMuB,OAAOC,EAAE,GACpB,CAACxB,IACJ,OAAQiB,EAAAA,IAAKQ,EAAAA,kBAAmB,CAAEC,YAAanB,EAAiBQ,SAAUJ,EAAKC,KAAC,OAAQ,CAAEG,SAAU,CAACE,EAAAA,IAAK,MAAO,CAAEF,SAAUE,EAAAA,IAAKU,EAAsBC,QAAE,CAAEC,aAAc3B,EAAeH,QAASA,EAASgB,SAAUE,MAAKa,EAA4B,CAAEV,UAAuB,WAAZrB,GAAwB,iBAAkBD,IAAKA,EAAKC,QAAS,SAAUgC,KAAM/B,EAAM+B,KAAOd,EAAAA,IAAKC,EAAAA,KAAM,CAAEE,UAAWpB,EAAM+B,YAAUC,EAAWC,SAAUjC,EAAMiC,SAAUjB,MAAOP,EAAayB,QAAS,IAAM5B,GAAWD,GAAS8B,eAAgBb,EAAuBC,OAAQA,EAAQlB,OAAQA,QAAiBY,EAAAA,IAAKmB,EAAAA,QAAe,CAAE/B,OAAQA,EAAQgC,UAAW,GAAIC,aAAa,EAAMvB,SAAUf,EAAMe,eAAoB,IAK3pBe,EAA6BS,EAAMA,OAACC,UAAS,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/cjs/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/cjs/components/chip/chipMultiselect/multiSelectChip.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),a=require("react"),r=require("@mui/material/Chip"),o=require("@mui/material/styles"),i=require("../../icon/icon.js"),n=require("../chipFocusVisibleStyled.js"),s=require("@mui/material"),l=require("../../common/menuContainer.js");function c(e){return e&&e.__esModule?e:{default:e}}var u=c(r);const d=a.forwardRef(((r,o)=>{var{variant:c,label:u,disabled:d,icon:h}=r,g=e.__rest(r,["variant","label","disabled","icon"]);const[m,b]=a.useState(!1),[x,f]=a.useState(!1),[j,k]=a.useState(!1),C=a.useCallback((e=>{e.stopPropagation(),g.reactHook.setState([])}),[g.reactHook]),S=a.useMemo((()=>t.jsxs(t.Fragment,{children:[u,g.reactHook.state.length>0&&t.jsx("span",{className:"count",children:t.jsx("span",{children:g.reactHook.state.length})}),g.reactHook.state.length>0&&t.jsx(i.Icon,{color:"inherit",className:"ballotx",fontSize:"small",onClick:C})||t.jsx(i.Icon,{color:"inherit",className:"chevron-down "+(j?"isOpen":""),fontSize:"small"})]})),[j,u,C,g.reactHook.state.length]),v=a.useCallback((e=>{b(!1),g.onBlur&&g.onBlur(e)}),[g]),H=a.useCallback((()=>{k((e=>!e)),f((e=>!e))}),[]),q=a.useCallback((()=>{k(!1),f(!1)}),[]),w=a.useCallback((()=>{b(!0)}),[]);return t.jsx(t.Fragment,{children:t.jsx(s.ClickAwayListener,{onClickAway:q,children:t.jsxs("span",{children:[t.jsx("div",{children:t.jsx(n.default,{focusVisible:m,variant:c,children:t.jsx(p,{className:"shadow"===c&&"MuiChip-shadow",ref:o,variant:"filled",icon:h?t.jsx(i.Icon,{className:`${h}`}):void 0,label:S,disabled:d,onClick:H,color:x||g.reactHook.state.length?"primary":"default",onFocusVisible:w,onBlur:v,count:g.reactHook.state.length,isOpen:j})})}),t.jsx(l.default,{disabled:d,isOpen:j,items:g.items,hasIcon:g.hasIcon,multipleSelection:!0,groupToggleSelection:g.groupToggleSelection,groupLabel:g.groupLabel,reactHook:g.reactHook,width:182,marginTop:14,setIsOpen:k,toggleLabel:g.toggleLabel})]})})})})),p=o.styled(u.default,{shouldForwardProp:e=>"isOpen"!==e})((({theme:e})=>{const t=e.palette;let a={"& .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:t.onSurface.os0,borderRadius:"50%",backgroundColor:t.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 a=Object.assign(Object.assign({},a),{}),a}));exports.MultiSelectChip=d;
+"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),r=require("react"),a=require("@mui/material/Chip"),i=require("@mui/material/styles"),o=require("../../icon/icon.js");require("../../icon/icon.definitions.js");var n=require("../chipFocusVisibleStyled.js"),s=require("@mui/material"),l=require("../../common/menuContainer.js");function c(e){return e&&e.__esModule?e:{default:e}}var u=c(a);const d=r.forwardRef(((a,i)=>{var{variant:c,label:u,disabled:d,icon:h}=a,m=e.__rest(a,["variant","label","disabled","icon"]);const[g,b]=r.useState(!1),[x,f]=r.useState(!1),[j,k]=r.useState(!1),C=r.useCallback((e=>{e.stopPropagation(),m.reactHook.setState([])}),[m.reactHook]),S=r.useMemo((()=>t.jsxs(t.Fragment,{children:[u,m.reactHook.state.length>0&&t.jsx("span",{className:"count",children:t.jsx("span",{children:m.reactHook.state.length})}),m.reactHook.state.length>0&&t.jsx(o.Icon,{color:"inherit",name:"close",fontSize:"small",onClick:C})||t.jsx(o.Icon,{color:"inherit",name:"chevron-down",className:j?"isOpen":"",fontSize:"small"})]})),[j,u,C,m.reactHook.state.length]),v=r.useCallback((e=>{b(!1),m.onBlur&&m.onBlur(e)}),[m]),H=r.useCallback((()=>{k((e=>!e)),f((e=>!e))}),[]),q=r.useCallback((()=>{k(!1),f(!1)}),[]),w=r.useCallback((()=>{b(!0)}),[]);return t.jsx(t.Fragment,{children:t.jsx(s.ClickAwayListener,{onClickAway:q,children:t.jsxs("span",{children:[t.jsx("div",{children:t.jsx(n.default,{focusVisible:g,variant:c,children:t.jsx(p,{className:"shadow"===c&&"MuiChip-shadow",ref:i,variant:"filled",icon:h?t.jsx(o.Icon,{name:h}):void 0,label:S,disabled:d,onClick:H,color:x||m.reactHook.state.length?"primary":"default",onFocusVisible:w,onBlur:v,count:m.reactHook.state.length,isOpen:j})})}),t.jsx(l.default,{disabled:d,isOpen:j,items:m.items,hasIcon:m.hasIcon,multipleSelection:!0,groupToggleSelection:m.groupToggleSelection,groupLabel:m.groupLabel,reactHook:m.reactHook,width:182,marginTop:14,setIsOpen:k,toggleLabel:m.toggleLabel})]})})})})),p=i.styled(u.default,{shouldForwardProp:e=>"isOpen"!==e})((({theme:e})=>{const t=e.palette;let r={"& .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:t.onSurface.os0,borderRadius:"50%",backgroundColor:t.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 r=Object.assign(Object.assign({},r),{}),r}));exports.MultiSelectChip=d;
 //# sourceMappingURL=multiSelectChip.js.map

package/cjs/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","jsxs","_Fragment","Fragment","children","state","length","_jsx","className","jsx","Icon","color","fontSize","onClick","onBlur","onSelectHandler","curr","handleClickAway","onFocusVisibleHandler","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","default","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":"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"}
+{"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","jsxs","_Fragment","Fragment","children","state","length","_jsx","className","jsx","Icon","color","name","fontSize","onClick","onBlur","onSelectHandler","curr","handleClickAway","onFocusVisibleHandler","ClickAwayListener","onClickAway","ChipFocusVisibleStyled","focusVisible","MultiSelectChipStyled","undefined","onFocusVisible","count","MenuContainer","default","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":"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"}

package/cjs/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/cjs/components/chip/regular/chip.js

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

package/cjs/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":["ChipStyled","styled","MuiChip","_a","variant","label","disabled","isSelected","icon","onClickCallback","props","__rest","focusVisibled","setFocusVisible","useState","selected","setSelected","useEffect","_jsx","ChipFocusVisibleStyled","focusVisible","children","className","Icon","fontSize","undefined","onClick","e","onSelect","color","onFocusVisible","onBlur"],"mappings":"gSAcY,MAqBNA,EAAaC,EAAMA,OAACC,UAAS,gBArBdC,IACjB,IAAIC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,WAAEA,GAAa,EAAOC,KAAAA,EAAIC,gBAAEA,GAAoBN,EAAIO,EAAQC,SAAOR,EAAI,CAAC,UAAW,QAAS,WAAY,aAAc,OAAQ,oBAC5J,MAAOS,EAAeC,GAAmBC,EAAQA,UAAC,IAC3CC,EAAUC,GAAeF,EAAQA,UAAC,GACzCG,EAAAA,WAAU,KACND,EAAYT,EAAW,GACxB,CAACA,IAUJ,OAAQW,MAAKC,EAAAA,QAAwB,CAAEf,QAASA,EAASgB,aAAcR,EAAeS,SAAUH,EAAAA,IAAKlB,EAAY,CAAEsB,UAAuB,WAAZlB,GAAwB,iBAAkBA,QAAS,SAAUI,KAAMA,EAAOU,MAAKK,EAAAA,KAAM,CAAED,UAAW,GAAGd,gBAAoBgB,SAAU,eAAaC,EAAWpB,MAAOA,EAAOC,SAAUA,EAAUoB,QAAUC,GAJpT,CAACA,IACdX,GAAaD,GACbN,GAAmBA,EAAgBkB,GAAIZ,EAAS,EAEuRa,CAASD,GAAIE,MAAOd,EAAW,UAAY,UAAWe,eAAgB,IAAMjB,GAAgB,GAAOkB,OAT9ZJ,IACZd,GAAgB,GACZH,EAAMqB,QACNrB,EAAMqB,OAAOJ,EAAE,KAM6a"}
+{"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":["ChipStyled","styled","MuiChip","_a","variant","label","disabled","isSelected","icon","onClickCallback","props","__rest","focusVisibled","setFocusVisible","useState","selected","setSelected","useEffect","_jsx","ChipFocusVisibleStyled","focusVisible","children","className","jsx","Icon","name","fontSize","undefined","onClick","e","onSelect","color","onFocusVisible","onBlur"],"mappings":"8UAcY,MAqBNA,EAAaC,EAAMA,OAACC,UAAS,gBArBdC,IACjB,IAAIC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,EAAQC,WAAEA,GAAa,EAAOC,KAAAA,EAAIC,gBAAEA,GAAoBN,EAAIO,EAAQC,SAAOR,EAAI,CAAC,UAAW,QAAS,WAAY,aAAc,OAAQ,oBAC5J,MAAOS,EAAeC,GAAmBC,EAAQA,UAAC,IAC3CC,EAAUC,GAAeF,EAAQA,UAAC,GACzCG,EAAAA,WAAU,KACND,EAAYT,EAAW,GACxB,CAACA,IAUJ,OAAQW,MAAKC,EAAAA,QAAwB,CAAEf,QAASA,EAASgB,aAAcR,EAAeS,SAAUH,MAAKlB,EAAY,CAAEsB,UAAuB,WAAZlB,GAAwB,iBAAkBA,QAAS,SAAUI,KAAMA,EAAOU,EAAIK,IAACC,OAAM,CAAEC,KAAMjB,EAAMc,UAAW,cAAeI,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"}

package/cjs/components/closeDialogButton/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),r=require("../icon/icon.js");exports.CloseDialogButton=s=>e.jsx(i.IconButton,Object.assign({size:"small",color:"inherit"},s,{children:e.jsx(r.Icon,{className:"ballotx",fontSize:"medium"})}));
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),r=require("../icon/icon.js");require("../icon/icon.definitions.js");exports.CloseDialogButton=n=>e.jsx(i.IconButton,Object.assign({size:"small",color:"inherit"},n,{children:e.jsx(r.Icon,{name:"close",fontSize:"medium"})}));
 //# sourceMappingURL=index.js.map

package/cjs/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":["props","_jsx","jsx","IconButton","Object","assign","size","color","children","Icon","className","fontSize"],"mappings":"kIAGkCA,GACtBC,EAAIC,IAACC,aAAYC,OAAOC,OAAO,CAAEC,KAAM,QAASC,MAAO,WAAaP,EAAO,CAAEQ,SAAUP,EAAAA,IAAKQ,EAAIA,KAAE,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":["props","_jsx","jsx","IconButton","Object","assign","size","color","children","Icon","name","fontSize"],"mappings":"yKAGkCA,GACtBC,EAAIC,IAACC,aAAYC,OAAOC,OAAO,CAAEC,KAAM,QAASC,MAAO,WAAaP,EAAO,CAAEQ,SAAUP,EAAAA,IAAKQ,EAAIA,KAAE,CAAEC,KAAM,QAASC,SAAU"}

package/cjs/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/cjs/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/cjs/components/controls/controls.js

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

package/cjs/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","jsx","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":"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"}
+{"version":3,"file":"controls.js","sources":["../../../../src/components/controls/controls.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport { Icon } from '../icon';\nimport { flowColors } from '../../design/skoda/palette.theme';\nimport { ternaryCondition } from '../../utils/utilities';\n/**\n * @description SkodaFlow Controls component.\n * Properties are inherited from HTML Button Attribetes element.\n * @param props ControlsProps\n * @returns React Functional Component\n */\nexport const Controller = forwardRef((_a, ref) => {\n    var props = __rest(_a, []);\n    const btnRef = useRef(null);\n    const handleOnClick = useCallback((e) => {\n        props.onClickCallback && !props.isDisabled && props.onClickCallback(e);\n    }, [props]);\n    useEffect(() => {\n        btnRef.current.addEventListener('mousedown', (e) => {\n            e.preventDefault();\n        });\n    }, [btnRef]);\n    return (_jsx(ControlStyled, Object.assign({}, props, { ref: ref, onClick: () => handleOnClick(props.controlType), children: _jsx(\"button\", { ref: btnRef, children: _jsx(Icon, { fontSize: props.iconFontSize, name: props.controlType, iconStyle: props.iconStyle }) }) })));\n});\n/**\n * @description Controls styling definition based on props\n */\nconst ControlStyled = styled('div', {\n    shouldForwardProp: (prop) => prop !== 'controlType' &&\n        prop !== 'controllerColor' &&\n        prop !== 'iconStyle' &&\n        prop !== 'iconFontSize' &&\n        prop !== 'controlVariant' &&\n        prop !== 'onClickCallback' &&\n        prop !== 'isDisabled' &&\n        prop !== 'customHeight',\n})((_a) => {\n    var { theme } = _a, args = __rest(_a, [\"theme\"]);\n    const controlsColor = ternaryCondition(args.controllerColor, 'light', flowColors.surface.tertiary, flowColors.text.primary);\n    let styles = {};\n    const flexDisplay = {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n    };\n    const buttonSlyle = Object.assign(Object.assign({}, flexDisplay), { width: ternaryCondition(args.iconFontSize, 'small', '34px', '42px'), height: ternaryCondition(args.iconFontSize, 'small', '34px', '42px'), borderRadius: '50%', backgroundColor: 'transparent', border: 'none', position: 'relative', outline: ternaryCondition(args.controlVariant, 'standard', 0, `2px solid ${controlsColor}`), cursor: 'pointer', '& .MuiIcon-root': {\n            color: ternaryCondition(args.controllerColor, 'light', flowColors.surface.tertiary, flowColors.text.primary),\n            fontSize: ternaryCondition(args.iconFontSize, 'small', '18px', '24px'),\n            '&:before': {\n                transform: 'translateY(-2px)',\n            },\n        }, '&:active': {\n            transform: 'scale(0.95)',\n        }, '&:hover': {\n            backgroundColor: flowColors.transparent.primary,\n        }, '&:focus': {\n            '&:after': {\n                content: '\"\"',\n                display: 'block',\n                width: 'calc(100% + 6px)',\n                height: 'calc(100% + 6px)',\n                outline: ternaryCondition(args.controllerColor, 'light', `2px solid ${flowColors.surface.tertiary}`, `2px solid ${flowColors.text.primary}`),\n                position: 'absolute',\n                left: '-3px',\n                top: '-3px',\n                borderRadius: '50%',\n            },\n        } });\n    styles = Object.assign(Object.assign({}, styles), { height: (args.customHeight ? args.customHeight : '100%') + '!important', '& button': Object.assign({}, buttonSlyle) });\n    if (args.isDisabled) {\n        styles = Object.assign(Object.assign({}, styles), { '& button': Object.assign(Object.assign({}, buttonSlyle), { borderColor: flowColors.disabled.primary, cursor: 'default', outline: ternaryCondition(args.controlVariant, 'standard', 0, `2px solid ${flowColors.disabled.primary}`), '&:active': {\n                    transform: 'scale(1)',\n                }, '&:hover': {\n                    backgroundColor: 'transparent',\n                }, '&:focus': {\n                    '&:after': {\n                        content: 'none',\n                    },\n                }, '& .MuiIcon-root': {\n                    color: flowColors.disabled.primary,\n                    fontSize: ternaryCondition(args.iconFontSize, 'small', '18px', '24px'),\n                    '&:before': {\n                        transform: 'translateY(-2px)',\n                    },\n                } }) });\n    }\n    return styles;\n});\n//# sourceMappingURL=controls.js.map"],"names":["Controller","forwardRef","_a","ref","props","__rest","btnRef","useRef","handleOnClick","useCallback","e","onClickCallback","isDisabled","useEffect","current","addEventListener","preventDefault","_jsx","ControlStyled","Object","assign","onClick","controlType","children","jsx","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":"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"}

package/cjs/components/icon/icon.d.ts

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