@skodaflow/web-library 5.0.0 → 7.0.0

package/cjs/components/cardContainer/cardContainer.js

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

package/cjs/components/cardContainer/cardContainer.js.map

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

package/cjs/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/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":"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"}
+{"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","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/cardMenu/styled/menuListStyled.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("@emotion/styled"),e=require("@mui/material/MenuList"),i=require("../../../design/skoda/palette.theme.js");function o(t){return t&&t.__esModule?t:{default:t}}var r=o(t),a=o(e);const n=r.default(a.default,{shouldForwardProp:t=>"allowMultiselect"!==t})((({theme:t,allowMultiselect:e})=>{const o=e?{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:o.padding,"&.Mui-disabled":{color:i.flowColors.disabled.primary,opacity:1,"& .MuiIcon-root":{color:`${i.flowColors.disabled.primary}!important`}},"&:hover":{background:i.flowColors.surface.primary},"& > .MuiListItemText-root":{marginRight:o.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:o.marginRightCross,cursor:"pointer"},"& > .MuiListItemText-root":{marginRight:"15px"}},"&.menu-select-all":{"&:hover":{background:t.palette.background.primary,cursor:"default"}}}},r}));exports.MenuListStyled=n;
+"use strict";var t=require("@emotion/styled"),e=require("@mui/material/MenuList"),i=require("../../../design/skoda/paletteLight.theme.js");function r(t){return t&&t.__esModule?t:{default:t}}var o=r(t),a=r(e);const n=o.default(a.default,{shouldForwardProp:t=>"allowMultiselect"!==t})((({theme:t,allowMultiselect:e})=>{const r=e?{marginRight:"16px",marginRightCross:"3px",padding:"12px 12px 12px 24px"}:{marginRight:"0px",marginRightCross:"0px",padding:"12px 24px"};let o={};return o={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:r.padding,"&.Mui-disabled":{color:i.paletteLight.disabled.primary,opacity:1,"& .MuiIcon-root":{color:`${i.paletteLight.disabled.primary}!important`}},"&:hover":{background:i.paletteLight.surface.primary},"& > .MuiListItemText-root":{marginRight:r.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:r.marginRightCross,cursor:"pointer"},"& > .MuiListItemText-root":{marginRight:"15px"}},"&.menu-select-all":{"&:hover":{background:t.palette.background.primary,cursor:"default"}}}},o}));exports.MenuListStyled=n;
 //# sourceMappingURL=menuListStyled.js.map

package/cjs/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","default","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":"2MAGY,MAACA,EAAiBC,EAAMC,QAACC,UAAU,CAC3CC,kBAAoBC,GAAkB,qBAATA,GADHJ,EAE3B,EAAGK,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,EAAAA,WAAWC,SAASC,QAC3BC,QAAS,EACT,kBAAmB,CACfP,MAAO,GAAGI,EAAAA,WAAWC,SAASC,sBAGtC,UAAW,CACPd,WAAYY,EAAAA,WAAWI,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","default","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":"gNAGY,MAACA,EAAiBC,EAAMC,QAACC,UAAU,CAC3CC,kBAAoBC,GAAkB,qBAATA,GADHJ,EAE3B,EAAGK,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,EAAAA,aAAaC,SAASC,QAC7BC,QAAS,EACT,kBAAmB,CACfP,MAAO,GAAGI,EAAAA,aAAaC,SAASC,sBAGxC,UAAW,CACPd,WAAYY,EAAAA,aAAaI,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/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/common/styled/textFieldStyled.js

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

package/cjs/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":"oRAOK,MAACA,EAAkBC,EAAMA,OAACC,UAAc,CACzCC,kBAAoBC,GAAkB,aAATA,GAChB,aAATA,GACS,WAATA,GACS,aAATA,GACS,YAATA,GACS,mBAATA,GANgBH,EAOpBI,IACG,IAAiBC,EAAQC,EAAMA,OAACF,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,EAAAA,WAAWC,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,EAAAA,WAAWC,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":"yRAOK,MAACA,EAAkBC,EAAMA,OAACC,UAAc,CACzCC,kBAAoBC,GAAkB,aAATA,GAChB,aAATA,GACS,WAATA,GACS,aAATA,GACS,YAATA,GACS,mBAATA,GANgBH,EAOpBI,IACG,IAAiBC,EAAQC,EAAMA,OAACF,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,EAAAA,aAAaC,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,EAAAA,aAAaC,MAAY,aAMhEZ,EAAMiB,WACNf,EAASE,OAAOC,OAAO,CAAE,EAAEH,IAExBA,CAAM"}

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

package/cjs/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>>;