@skodaflow/web-library 4.2.0 → 6.0.0

package/components/card/Card.d.ts

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

package/components/card/Card.js

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

package/components/card/Card.js.map

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

package/components/card/FlippingCard.d.ts

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

package/components/card/FlippingCard.js

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

package/components/card/FlippingCard.js.map

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

package/components/card/LinkCard.d.ts

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

package/components/card/LinkCard.js

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

package/components/card/LinkCard.js.map

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

package/components/card/SelectableCard.d.ts

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

package/components/card/SelectableCard.js

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

package/components/card/SelectableCard.js.map

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

package/components/card/SimpleCard.d.ts

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

package/components/card/SimpleCard.js

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

package/components/card/SimpleCard.js.map

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

package/components/card/index.d.ts

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

package/components/cardContainer/cardContainer.d.ts

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

package/components/cardContainer/cardContainer.js.map

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

package/components/cardMenu/cardMenu.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from 'react';
+import { IconNameProp } from '../icon';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { Placement } from '../../utils/enum';
@@ -11,7 +12,7 @@ export interface CardMenuItem {
     text: string;
     callback?: () => void;
     disabled?: boolean;
-    icon?: string;
+    icon?: IconNameProp;
     isChecked?: boolean;
     url?: string;
     target?: string;

package/components/cardMenu/cardMenu.js

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

package/components/cardMenu/cardMenu.js.map

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

package/components/cardMenu/styled/menuListStyled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const MenuListStyled: import("@emotion/styled").StyledComponent<import("@mui/material/MenuList").MenuListOwnProps & import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: import("react").Ref<HTMLUListElement>;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "autoFocus" | "variant" | "dense" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap" | "disablePadding" | "subheader"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "autoFocus" | "dense" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap" | "disablePadding" | "subheader"> & {
     theme?: import("@emotion/react").Theme;
 } & {
     theme?: any;

package/components/chip/chipDropdownChildren/chipDropdownChildren.js

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

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

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

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

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

package/components/chip/chipMultiselect/multiSelectChip.js

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

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

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

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

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

package/components/chip/regular/chip.js

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

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

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

package/components/closeDialogButton/index.js

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

package/components/closeDialogButton/index.js.map

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

package/components/common/hook/useWindowSize.js

@@ -1,2 +1,2 @@
-import{useState as i,useEffect as e}from"react";import{customBreakpoints as n}from"../../../design/skoda/components/breakpoints.theme.js";function t(){const t="undefined"!=typeof window,[o,d]=i({width:t?1440:window.innerWidth,height:t?800:window.innerHeight,isMobile:!1});function r(){d({width:window.innerWidth,height:window.innerHeight,isMobile:window.innerWidth<n.values.md})}return e((()=>(r(),window.addEventListener("resize",r),()=>{r(),window.removeEventListener("resize",r)})),[]),o}export{t as default};
+import{useState as i,useEffect as e}from"react";import{customBreakpoints as n}from"../../../design/skoda/components/layout/breakpoints.theme.js";function t(){const t="undefined"!=typeof window,[o,d]=i({width:t?1440:window.innerWidth,height:t?800:window.innerHeight,isMobile:!1});function r(){d({width:window.innerWidth,height:window.innerHeight,isMobile:window.innerWidth<n.values.md})}return e((()=>(r(),window.addEventListener("resize",r),()=>{r(),window.removeEventListener("resize",r)})),[]),o}export{t as default};
 //# sourceMappingURL=useWindowSize.js.map

package/components/common/hook/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","sources":["../../../../src/components/common/hook/useWindowSize.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { customBreakpoints } from '../../../design/skoda/components/breakpoints.theme';\nexport default function useWindowSize() {\n    const isSSR = typeof window !== 'undefined';\n    const [windowSize, setWindowSize] = useState({\n        width: isSSR ? 1440 : window.innerWidth,\n        height: isSSR ? 800 : window.innerHeight,\n        isMobile: false,\n    });\n    function changeWindowSize() {\n        setWindowSize({\n            width: window.innerWidth,\n            height: window.innerHeight,\n            isMobile: window.innerWidth < customBreakpoints.values['md'] ? true : false,\n        });\n    }\n    useEffect(() => {\n        changeWindowSize();\n        window.addEventListener('resize', changeWindowSize);\n        return () => {\n            changeWindowSize();\n            window.removeEventListener('resize', changeWindowSize);\n        };\n    }, []);\n    return windowSize;\n}\n//# sourceMappingURL=useWindowSize.js.map"],"names":["useWindowSize","isSSR","window","windowSize","setWindowSize","useState","width","innerWidth","height","innerHeight","isMobile","changeWindowSize","customBreakpoints","values","useEffect","addEventListener","removeEventListener"],"mappings":"0IAEe,SAASA,IACpB,MAAMC,EAA0B,oBAAXC,QACdC,EAAYC,GAAiBC,EAAS,CACzCC,MAAOL,EAAQ,KAAOC,OAAOK,WAC7BC,OAAQP,EAAQ,IAAMC,OAAOO,YAC7BC,UAAU,IAEd,SAASC,IACLP,EAAc,CACVE,MAAOJ,OAAOK,WACdC,OAAQN,OAAOO,YACfC,SAAUR,OAAOK,WAAaK,EAAkBC,OAAW,IAElE,CASD,OARAC,GAAU,KACNH,IACAT,OAAOa,iBAAiB,SAAUJ,GAC3B,KACHA,IACAT,OAAOc,oBAAoB,SAAUL,EAAiB,IAE3D,IACIR,CACX"}
+{"version":3,"file":"useWindowSize.js","sources":["../../../../src/components/common/hook/useWindowSize.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { customBreakpoints } from '../../../design/skoda/components/layout/breakpoints.theme';\nexport default function useWindowSize() {\n    const isSSR = typeof window !== 'undefined';\n    const [windowSize, setWindowSize] = useState({\n        width: isSSR ? 1440 : window.innerWidth,\n        height: isSSR ? 800 : window.innerHeight,\n        isMobile: false,\n    });\n    function changeWindowSize() {\n        setWindowSize({\n            width: window.innerWidth,\n            height: window.innerHeight,\n            isMobile: window.innerWidth < customBreakpoints.values['md'] ? true : false,\n        });\n    }\n    useEffect(() => {\n        changeWindowSize();\n        window.addEventListener('resize', changeWindowSize);\n        return () => {\n            changeWindowSize();\n            window.removeEventListener('resize', changeWindowSize);\n        };\n    }, []);\n    return windowSize;\n}\n//# sourceMappingURL=useWindowSize.js.map"],"names":["useWindowSize","isSSR","window","windowSize","setWindowSize","useState","width","innerWidth","height","innerHeight","isMobile","changeWindowSize","customBreakpoints","values","useEffect","addEventListener","removeEventListener"],"mappings":"iJAEe,SAASA,IACpB,MAAMC,EAA0B,oBAAXC,QACdC,EAAYC,GAAiBC,EAAS,CACzCC,MAAOL,EAAQ,KAAOC,OAAOK,WAC7BC,OAAQP,EAAQ,IAAMC,OAAOO,YAC7BC,UAAU,IAEd,SAASC,IACLP,EAAc,CACVE,MAAOJ,OAAOK,WACdC,OAAQN,OAAOO,YACfC,SAAUR,OAAOK,WAAaK,EAAkBC,OAAW,IAElE,CASD,OARAC,GAAU,KACNH,IACAT,OAAOa,iBAAiB,SAAUJ,GAC3B,KACHA,IACAT,OAAOc,oBAAoB,SAAUL,EAAiB,IAE3D,IACIR,CACX"}

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

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

package/components/common/styled/textFieldStyled.d.ts

@@ -4,7 +4,7 @@ import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
  */
 declare const TextFieldStyled: import("@emotion/styled").StyledComponent<{
     variant?: import("@mui/material/TextField").TextFieldVariants;
-} & Omit<import("@mui/material/TextField").StandardTextFieldProps | import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & (MuiTextFieldProps & {
+} & Omit<import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & (MuiTextFieldProps & {
     isSelect?: boolean;
     disabled?: boolean;
     hasError?: boolean;

package/components/controls/controls.d.ts

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