npm - @skodaflow/web-library - Versions diffs - 7.13.1 → 7.15.0 - Mend

@skodaflow/web-library 7.13.1 → 7.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (798) hide show

package/cjs/organisms/common/menuCardComponent/menuCardComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menuCardComponent.js","sources":["../../../../../../src/organisms/common/menuCardComponent/menuCardComponent.tsx"],"sourcesContent":["import React, { FC, useCallback, useRef, useState } from 'react';\nimport { Icon } from '../../../components/icon';\nimport { styled } from '@mui/~~system~~';\nimport { CardMenu, CardMenuItemsArray } from '../../../components/cardMenu/cardMenu';\nimport { ~~SxProps } from '@mui/system';\nimport { Theme } from '@mui/material/styles';\nimport {~~ Placement } from '../../../utils/enum';\n\nexport interface MenuCardComponentProps {\n /*\n The content of the component.\n /\n items: CardMenuItemsArray;\n /\n React useState hook set function used to update the passed items to the component.\n /\n setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;\n /\n If header is provided, a text will be displayed on top of the elements.\n /\n header?: string;\n /\n If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.\n * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..\n /\n allowMultiselect?: boolean;\n /\n Callback fired when item is clicked.\n /\n onItemClick?: (itemText: string) => void;\n /\n The system prop that allows defining system overrides as well as additional CSS styles.\n /\n sx?: SxProps<Theme>;\n /\n Override or extend the styles applied to the component.\n /\n classes?: object;\n /\n Popper placement. Default is 'bottom'.\n /\n placement?: Placement;\n /\n If true, a switch button is added to the items allowing to select or deselect all of the items.\n * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.\n */\n hasToggleSelection?: boolean;\n}\n\nconst MenuCardComponent: FC<MenuCardComponentProps> = ({ ...props }) => {\n const [isOpen, setIsOpen] = useState(false);\n const anchorRef = useRef(null);\n\n const setOpen = useCallback(() => setIsOpen(true), []);\n\n const setClosed = useCallback(() => setIsOpen(false), []);\n\n return (\n <MenuCardStyled className=\"menuCardComponent\">\n <Icon ref={anchorRef} onClick={setOpen} name=\"vertical\" />\n <CardMenu {...props} open={isOpen} onClose={setClosed} anchorRef={anchorRef} />\n </MenuCardStyled>\n );\n};\n\nconst MenuCardStyled = styled('div')<{ theme? }>(() => {\n let style = {};\n\n style = {\n ...style,\n position: 'absolute',\n zIndex: 4,\n cursor: 'pointer',\n top: '24px',\n width: '20px',\n height: '30px',\n right: '24px',\n '& > .MuiIcon-root': {\n width: '20px',\n height: '30px',\n fontSize: '20px',\n },\n '& > div': {\n marginRight: '40px',\n },\n };\n\n return style;\n});\n\nexport default MenuCardComponent;\n"],"names":["MenuCardStyled","styled","style","Object","assign","position","zIndex","cursor","top","width","height","right","fontSize","marginRight","_a","props","__rest","isOpen","setIsOpen","useState","anchorRef","useRef","setOpen","useCallback","setClosed","_jsxs","className","children","_jsx","Icon","ref","onClick","name","CardMenu","open","onClose"],"mappings":"~~sUAiDA~~,MAgBMA,EAAiBC,EAAAA,OAAO,MAAPA,EAA0B,KAC/C,IAAIC,EAAQ,CAAE,EAqBd,OAnBAA,EACKC,OAAAC,OAAAD,OAAAC,OAAA,GAAAF,GACH,CAAAG,SAAU,WACVC,OAAQ,EACRC,OAAQ,UACRC,IAAK,OACLC,MAAO,OACPC,OAAQ,OACRC,MAAO,OACP,oBAAqB,CACnBF,MAAO,OACPC,OAAQ,OACRE,SAAU,QAEZ,UAAW,CACTC,YAAa,UAIVX,CAAK,oBAtCyCY,QAAKC,EAAKC,EAAAA,OAAAF,EAAV,IACrD,MAAOG,EAAQC,GAAaC,EAAAA,UAAS,GAC/BC,EAAYC,EAAMA,OAAC,MAEnBC,EAAUC,EAAAA,aAAY,IAAML,GAAU,IAAO,IAE7CM,EAAYD,EAAAA,aAAY,IAAML,GAAU,IAAQ,IAEtD,OACEO,EAAAA,KAACzB,GAAe0B,UAAU,oBACxBC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,KAAK,CAAAC,IAAKV,EAAWW,QAAST,EAASU,KAAK,aAC7CJ,MAACK,EAAQA,SAAA9B,OAAAC,OAAA,CAAA,EAAKW,EAAO,CAAAmB,KAAMjB,EAAQkB,QAASX,EAAWJ,UAAWA,OACnD"}
1	+ {"version":3,"file":"menuCardComponent.js","sources":["../../../../../../src/organisms/common/menuCardComponent/menuCardComponent.tsx"],"sourcesContent":["import React, { FC, useCallback, useRef, useState } from 'react';\nimport { Icon } from '../../../components/icon';\nimport { styled, SxProps, Theme } from '@mui/material';\nimport { CardMenu, CardMenuItemsArray } from '../../../components/cardMenu/cardMenu';\nimport { Placement } from '../../../utils/enum';\n\nexport interface MenuCardComponentProps {\n /*\n The content of the component.\n /\n items: CardMenuItemsArray;\n /\n React useState hook set function used to update the passed items to the component.\n /\n setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;\n /\n If header is provided, a text will be displayed on top of the elements.\n /\n header?: string;\n /\n If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.\n * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..\n /\n allowMultiselect?: boolean;\n /\n Callback fired when item is clicked.\n /\n onItemClick?: (itemText: string) => void;\n /\n The system prop that allows defining system overrides as well as additional CSS styles.\n /\n sx?: SxProps<Theme>;\n /\n Override or extend the styles applied to the component.\n /\n classes?: object;\n /\n Popper placement. Default is 'bottom'.\n /\n placement?: Placement;\n /\n If true, a switch button is added to the items allowing to select or deselect all of the items.\n * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.\n */\n hasToggleSelection?: boolean;\n}\n\nconst MenuCardComponent: FC<MenuCardComponentProps> = ({ ...props }) => {\n const [isOpen, setIsOpen] = useState(false);\n const anchorRef = useRef(null);\n\n const setOpen = useCallback(() => setIsOpen(true), []);\n\n const setClosed = useCallback(() => setIsOpen(false), []);\n\n return (\n <MenuCardStyled className=\"menuCardComponent\">\n <Icon ref={anchorRef} onClick={setOpen} name=\"vertical\" />\n <CardMenu {...props} open={isOpen} onClose={setClosed} anchorRef={anchorRef} />\n </MenuCardStyled>\n );\n};\n\nconst MenuCardStyled = styled('div')<{ theme? }>(() => {\n let style = {};\n\n style = {\n ...style,\n position: 'absolute',\n zIndex: 4,\n cursor: 'pointer',\n top: '24px',\n width: '20px',\n height: '30px',\n right: '24px',\n '& > .MuiIcon-root': {\n width: '20px',\n height: '30px',\n fontSize: '20px',\n },\n '& > div': {\n marginRight: '40px',\n },\n };\n\n return style;\n});\n\nexport default MenuCardComponent;\n"],"names":["MenuCardStyled","styled","style","Object","assign","position","zIndex","cursor","top","width","height","right","fontSize","marginRight","_a","props","__rest","isOpen","setIsOpen","useState","anchorRef","useRef","setOpen","useCallback","setClosed","_jsxs","className","children","_jsx","Icon","ref","onClick","name","CardMenu","open","onClose"],"mappings":"wUA+CA,MAgBMA,EAAiBC,EAAAA,OAAO,MAAPA,EAA0B,KAC/C,IAAIC,EAAQ,CAAE,EAqBd,OAnBAA,EACKC,OAAAC,OAAAD,OAAAC,OAAA,GAAAF,GACH,CAAAG,SAAU,WACVC,OAAQ,EACRC,OAAQ,UACRC,IAAK,OACLC,MAAO,OACPC,OAAQ,OACRC,MAAO,OACP,oBAAqB,CACnBF,MAAO,OACPC,OAAQ,OACRE,SAAU,QAEZ,UAAW,CACTC,YAAa,UAIVX,CAAK,oBAtCyCY,QAAKC,EAAKC,EAAAA,OAAAF,EAAV,IACrD,MAAOG,EAAQC,GAAaC,EAAAA,UAAS,GAC/BC,EAAYC,EAAMA,OAAC,MAEnBC,EAAUC,EAAAA,aAAY,IAAML,GAAU,IAAO,IAE7CM,EAAYD,EAAAA,aAAY,IAAML,GAAU,IAAQ,IAEtD,OACEO,EAAAA,KAACzB,GAAe0B,UAAU,oBACxBC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,KAAK,CAAAC,IAAKV,EAAWW,QAAST,EAASU,KAAK,aAC7CJ,MAACK,EAAQA,SAAA9B,OAAAC,OAAA,CAAA,EAAKW,EAAO,CAAAmB,KAAMjB,EAAQkB,QAASX,EAAWJ,UAAWA,OACnD"}

package/cjs/organisms/index.d.ts CHANGED Viewed

@@ -10,5 +10,4 @@ export * from './shortcutLink';
 export * from './textCta';
 export * from './tile';
 export * from './carousel2';
-export * from './notification';
 export * from './gallery';

package/cjs/organisms/textCta/textCta.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),i=require("react"),n=require("../../components/label/label.js"),o=require("@mui/material"),r=require("../../components/button/button.js"),s=require("../../components/icon/icon.js");require("../../components/icon/icon.definitions.js");const a=i.forwardRef(((a,l)=>{var{label:x,headlineTitle:d,text:c,showFirstButton:h=!1,showSecondButton:m=!1,onClickFirstBtn:u,onClickSecondBtn:g,firstButtonProps:S,secondButtonProps:B,listItems:b,showAppStore:j=!1,showPlayStore:f=!1,appStoreProps:C,playStoreProps:w}=a,y=t.__rest(a,["label","headlineTitle","text","showFirstButton","showSecondButton","onClickFirstBtn","onClickSecondBtn","firstButtonProps","secondButtonProps","listItems","showAppStore","showPlayStore","appStoreProps","playStoreProps"]);const k=i.useCallback((t=>{window.open(t,"_blank")}),[]),P=i.useCallback(((t,e,i)=>{i&&k(i),e&&e(t)}),[k]),v=i.useCallback(((t,i)=>{const n=Object.assign(Object.assign({},t),{url:t.url||null});return e.jsx(r.Button,Object.assign({},n,{onClick:t=>P(t,i,n.url)}))}),[P]);return e.jsxs(p,Object.assign({ref:l,listItems:b},y,{children:[x&&e.jsx(n.Label,{label:x}),d&&e.jsx("div",{className:"headlineContainer",children:e.jsx(o.Typography,{className:"textCtaHeadline",children:d})}),c&&e.jsx("p",{className:`textCtaText ${f&&"isPlayStore"}`,children:c}),b&&b.length>0&&e.jsx(o.List,{className:"textCtaList",children:b.map(((t,i)=>e.jsxs(o.ListItem,{disableGutters:!0,children:[e.jsx(s.Icon,{name:t.icon||"check"}),t.text]},"text-cta-list-item"+i)))}),e.jsxs("div",{className:"textCtaBtnGroup",children:[(!j||!f)&&e.jsxs(e.Fragment,{children:[h&&v(S,u),m&&v(B,g)]}),(!h||!m)&&e.jsxs(e.Fragment,{children:[j&&e.jsx("span",{className:"appStoreBadge",onClick:()=>k(C.url),children:e.jsx("img",{src:C.img,alt:C.alt})}),f&&e.jsx("span",{className:"playStoreBadge",dangerouslySetInnerHTML:{__html:w}})]})]})]}))})),l=t=>{switch(t){case"h1":return{fontSize:"44px",lineHeight:"52px"};case"h2":return{fontSize:"36px",lineHeight:"44px"};case"h3":return{fontSize:"30px",lineHeight:"36px"};case"h4":return{fontSize:"24px",lineHeight:"28px"};default:return{fontSize:"18px",lineHeight:"28px"}}},p=o.styled("div",{shouldForwardProp:t=>"listItems"!==t&&"headlineVariant"!==t})((e=>{var{theme:i}=e,n=t.__rest(e,["theme"]);let o={};return o={"& > span":{margin:0},"& > div.headlineContainer":{marginBottom:"10px",marginTop:"5px","& > .textCtaHeadline":Object.assign({fontWeight:"bold"},l(n.headlineVariant))},"& > div.subheadlineContainer":{marginBottom:"10px","& > .textCtaSubheadline":{fontWeight:"bold",fontSize:"18px",lineHeight:"28px"}},"& > .textCtaList":{marginBottom:"10px"},"& > .textCtaText":{fontSize:"18px",lineHeight:"28px",margin:"12px 0 16px 0","&.isPlayStore":{marginBottom:"2px"}},"& > div.textCtaBtnGroup":{display:"flex",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap","& > div":{[i.breakpoints.down("sm")]:{width:"100%"}},"& > .appStoreBadge":{cursor:"pointer",marginRight:"8px","& > img":{height:"40px"}},"& > .playStoreBadge":{cursor:"pointer","& img":{maxWidth:"153px"}},"& .MuiButton-root":{paddingLeft:"16px",paddingRight:"16px",paddingBottom:"2px",fontSize:"14px",minWidth:"93px",height:"32px",[i.breakpoints.down("sm")]:{height:"44px",width:"100%"}},"& .MuiButton-root:first-of-type":{marginRight:"16px",marginBottom:0,[i.breakpoints.down("sm")]:{marginBottom:"16px"}}}," & > .MuiList-root":{padding:"0px","& > .MuiListItem-root":{padding:"0px 0px 6px 0px","& > .MuiIcon-root":{width:"20px",height:"24px",fontSize:"14px"}}}},o}));exports.TextCta=a;
+"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),i=require("react"),n=require("../../components/label/label.js"),o=require("@mui/material"),r=require("../../components/button/button.js"),s=require("../../components/icon/icon.js");require("../../components/icon/icon.definitions.js");const a=i.forwardRef(((a,l)=>{var{label:x,headlineTitle:d,text:c,showFirstButton:h=!1,showSecondButton:u=!1,onClickFirstBtn:m,onClickSecondBtn:g,firstButtonProps:B,secondButtonProps:S,listItems:b,showAppStore:j=!1,showPlayStore:f=!1,appStoreProps:C,playStoreProps:w}=a,y=t.__rest(a,["label","headlineTitle","text","showFirstButton","showSecondButton","onClickFirstBtn","onClickSecondBtn","firstButtonProps","secondButtonProps","listItems","showAppStore","showPlayStore","appStoreProps","playStoreProps"]);const k=i.useCallback((t=>{window.open(t,"_blank")}),[]),P=i.useCallback(((t,e,i)=>{i&&k(i),e&&e(t)}),[k]),v=i.useCallback(((t,i)=>{const n=Object.assign(Object.assign({},t),{url:t.url||null});return e.jsx(r.Button,Object.assign({},n,{onClick:t=>P(t,i,n.url)}))}),[P]);return e.jsxs(p,Object.assign({ref:l,listItems:b},y,{children:[x&&e.jsx(n.Label,{label:x}),d&&e.jsx("div",{className:"headlineContainer",children:e.jsx(o.Typography,{className:"textCtaHeadline",children:d})}),c&&e.jsx("p",{className:`textCtaText ${f&&"isPlayStore"}`,children:c}),b&&b.length>0&&e.jsx(o.List,{className:"textCtaList",children:b.map(((t,i)=>e.jsxs(o.ListItem,{disableGutters:!0,children:[e.jsx(s.Icon,{name:t.icon||"check"}),t.text]},"text-cta-list-item"+i)))}),e.jsxs("div",{className:"textCtaBtnGroup",children:[(!j||!f)&&e.jsxs(e.Fragment,{children:[h&&v(B,m),u&&v(S,g)]}),(!h||!u)&&e.jsxs(e.Fragment,{children:[j&&e.jsx(o.ButtonBase,{className:"appStoreBadge",onClick:()=>k(C.url),children:e.jsx("img",{src:C.img,alt:C.alt})}),f&&e.jsx("span",{className:"playStoreBadge",dangerouslySetInnerHTML:{__html:w}})]})]})]}))})),l=t=>{switch(t){case"h1":return{fontSize:"44px",lineHeight:"52px"};case"h2":return{fontSize:"36px",lineHeight:"44px"};case"h3":return{fontSize:"30px",lineHeight:"36px"};case"h4":return{fontSize:"24px",lineHeight:"28px"};default:return{fontSize:"18px",lineHeight:"28px"}}},p=o.styled("div",{shouldForwardProp:t=>"listItems"!==t&&"headlineVariant"!==t})((e=>{var{theme:i}=e,n=t.__rest(e,["theme"]);let o={};return o={"& > span":{margin:0},"& > div.headlineContainer":{marginBottom:"10px",marginTop:"5px","& > .textCtaHeadline":Object.assign({fontWeight:"bold"},l(n.headlineVariant))},"& > div.subheadlineContainer":{marginBottom:"10px","& > .textCtaSubheadline":{fontWeight:"bold",fontSize:"18px",lineHeight:"28px"}},"& > .textCtaList":{marginBottom:"10px"},"& > .textCtaText":{fontSize:"18px",lineHeight:"28px",margin:"12px 0 16px 0","&.isPlayStore":{marginBottom:"2px"}},"& > div.textCtaBtnGroup":{display:"flex",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap","& > div":{[i.breakpoints.down("sm")]:{width:"100%"}},"& > .appStoreBadge":{cursor:"pointer",marginRight:"8px","& > img":{height:"40px"}},"& > .playStoreBadge":{cursor:"pointer","& img":{maxWidth:"153px"}},"& .MuiButton-root":{paddingLeft:"16px",paddingRight:"16px",paddingBottom:"2px",fontSize:"14px",minWidth:"93px",height:"32px",[i.breakpoints.down("sm")]:{height:"44px",width:"100%"}},"& .MuiButton-root:first-of-type":{marginRight:"16px",marginBottom:0,[i.breakpoints.down("sm")]:{marginBottom:"16px"}}}," & > .MuiList-root":{padding:"0px","& > .MuiListItem-root":{padding:"0px 0px 6px 0px","& > .MuiIcon-root":{width:"20px",height:"24px",fontSize:"14px"}}}},o}));exports.TextCta=a;
 //# sourceMappingURL=textCta.js.map

package/cjs/organisms/textCta/textCta.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textCta.js","sources":["../../../../../src/organisms/textCta/textCta.tsx"],"sourcesContent":["import React, { useCallback, forwardRef } from 'react';\nimport { Label } from '../../components/label';\nimport { List, ListItem, Typography, styled } from '@mui/material';\nimport { Button, ButtonProps } from '../../components/button';\nimport { Icon, IconNameProp } from '../../components/icon';\n\nexport type variants = 'subHeadline' \| 'h1' \| 'h2' \| 'h3' \| 'h4';\n\nexport interface TextCtaProps {\n /*\n label to be shown on the top of component\n /\n label?: string;\n\n /\n headline to be shown on the top of component\n /\n headlineTitle?: string;\n /\n headline type variant\n /\n headlineVariant?: variants;\n\n /\n text to be shown under headline/subheadline\n /\n text?: string;\n\n /\n Show the primary button if true. Must fill the firstButtonProps\n /\n showFirstButton?: boolean;\n\n /\n Show the secondary button if true. Must fill the secondButtonProps\n /\n showSecondButton?: boolean;\n\n /\n props primary button. Same of skoda button component\n /\n firstButtonProps?: ButtonProps & { url?: string };\n\n /\n props secondary button. Same of skoda button component\n /\n secondButtonProps?: ButtonProps & { url?: string };\n\n /\n callback on click primary button\n /\n onClickFirstBtn?: (e: unknown) => void;\n\n /\n callback on click secondary button\n /\n onClickSecondBtn?: (e: unknown) => void;\n\n /\n If true, shows the AppStore badge\n /\n showAppStore?: boolean;\n\n /\n If true, shows the PlayStore badge\n /\n showPlayStore?: boolean;\n\n /\n List items show icon and text\n * default icon for list is the check,it's possible to configure using the icon name provide in the Icon component\n /\n listItems?: {\n text?: string;\n icon?: IconNameProp;\n }[];\n\n /\n object appStore Badge:\n * {url: \"url\",\talt: ' alt description image', img: 'image badges'}\n /\n appStoreProps?: Record<string, string>;\n\n /\n object playStore Badge\n * {url: \"url\",\talt: ' alt description image', img: 'image badges'}\n /\n playStoreProps?: unknown;\n}\n\n/\n @deprecated use TextAndCta component instead\n /\nexport const TextCta = forwardRef<HTMLDivElement, TextCtaProps>(\n (\n {\n label,\n headlineTitle,\n text,\n showFirstButton = false,\n showSecondButton = false,\n onClickFirstBtn,\n onClickSecondBtn,\n firstButtonProps,\n secondButtonProps,\n listItems,\n showAppStore = false,\n showPlayStore = false,\n appStoreProps,\n playStoreProps,\n ...props\n },\n ref,\n ) => {\n const handleUrlClick = useCallback((url) => {\n window.open(url, '_blank');\n }, []);\n\n const handleOnClickBtn = useCallback(\n (e: unknown, callback: (e: unknown) => void, url: string) => {\n if (url) {\n handleUrlClick(url);\n }\n callback && callback(e);\n },\n [handleUrlClick],\n );\n\n const handleRenderBtn = useCallback(\n (btnProps: ButtonProps & { url?: string }, onClickHandler: (e: unknown) => void) => {\n const propsA = {\n ...btnProps,\n url: btnProps.url \|\| null,\n };\n return <Button {...propsA} onClick={(e) => handleOnClickBtn(e, onClickHandler, propsA.url)} />;\n },\n [handleOnClickBtn],\n );\n\n return (\n <TextCtaContainerStyled ref={ref} listItems={listItems} {...props}>\n {label && <Label label={label} />}\n {headlineTitle && (\n <div className=\"headlineContainer\">\n <Typography className=\"textCtaHeadline\">{headlineTitle}</Typography>\n </div>\n )}\n {text && <p className={`textCtaText ${showPlayStore && 'isPlayStore'}`}>{text}</p>}\n {listItems && listItems.length > 0 && (\n <List className=\"textCtaList\">\n {listItems.map((item, index) => {\n return (\n <ListItem key={'text-cta-list-item' + index} disableGutters>\n <Icon name={item.icon \|\| 'check'} />\n {item.text}\n </ListItem>\n );\n })}\n </List>\n )}\n <div className=\"textCtaBtnGroup\">\n {(!showAppStore \|\| !showPlayStore) && (\n <>\n {showFirstButton && handleRenderBtn(firstButtonProps, onClickFirstBtn)}\n {showSecondButton && handleRenderBtn(secondButtonProps, onClickSecondBtn)}\n </>\n )}\n {(!showFirstButton \|\| !showSecondButton) && (\n <>\n {showAppStore && (\n <span className=\"appStoreBadge\" onClick={() => handleUrlClick(appStoreProps.url)}>\n <img src={appStoreProps.img} alt={appStoreProps.alt} />\n </span>\n )}\n {showPlayStore && (\n <span className=\"playStoreBadge\" dangerouslySetInnerHTML={{ __html: playStoreProps }}></span>\n )}\n </>\n )}\n </div>\n </TextCtaContainerStyled>\n );\n },\n);\n\n//Set the correct font and lineheight depending on the prop variant passed\nconst getHeadlineStyle = (headlineVariant: variants) => {\n switch (headlineVariant) {\n case 'h1':\n return {\n fontSize: '44px',\n lineHeight: '52px',\n };\n case 'h2':\n return {\n fontSize: '36px',\n lineHeight: '44px',\n };\n case 'h3':\n return {\n fontSize: '30px',\n lineHeight: '36px',\n };\n case 'h4':\n return {\n fontSize: '24px',\n lineHeight: '28px',\n };\n default:\n return {\n fontSize: '18px',\n lineHeight: '28px',\n };\n }\n};\n\n/\n @description Button styling defintion based on props\n */\nconst TextCtaContainerStyled = styled('div', {\n shouldForwardProp: (prop) => prop !== 'listItems' && prop !== 'headlineVariant',\n})<TextCtaProps>(({ theme, ...args }) => {\n let styles = {};\n\n styles = {\n '& > span': {\n margin: 0,\n },\n '& > div.headlineContainer': {\n marginBottom: '10px',\n marginTop: '5px',\n '& > .textCtaHeadline': {\n fontWeight: 'bold',\n ...getHeadlineStyle(args.headlineVariant),\n },\n },\n '& > div.subheadlineContainer': {\n marginBottom: '10px',\n '& > .textCtaSubheadline': {\n fontWeight: 'bold',\n fontSize: '18px',\n lineHeight: '28px',\n },\n },\n '& > .textCtaList': {\n marginBottom: '10px',\n },\n '& > .textCtaText': {\n fontSize: '18px',\n lineHeight: '28px',\n margin: '12px 0 16px 0',\n '&.isPlayStore': {\n marginBottom: '2px',\n },\n },\n '& > div.textCtaBtnGroup': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n '& > div': {\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n '& > .appStoreBadge': {\n cursor: 'pointer',\n marginRight: '8px',\n '& > img': {\n height: '40px',\n },\n },\n '& > .playStoreBadge': {\n cursor: 'pointer',\n '& img': {\n maxWidth: '153px',\n },\n },\n '& .MuiButton-root': {\n paddingLeft: '16px',\n paddingRight: '16px',\n paddingBottom: '2px',\n fontSize: '14px',\n minWidth: '93px',\n height: '32px',\n [theme.breakpoints.down('sm')]: {\n height: '44px',\n width: '100%',\n },\n },\n '& .MuiButton-root:first-of-type': {\n marginRight: '16px',\n marginBottom: 0,\n [theme.breakpoints.down('sm')]: {\n marginBottom: '16px',\n },\n },\n },\n ' & > .MuiList-root': {\n padding: '0px',\n '& > .MuiListItem-root': {\n padding: '0px 0px 6px 0px',\n\n '& > .MuiIcon-root': {\n width: '20px',\n height: '24px',\n fontSize: '14px',\n },\n },\n },\n };\n\n return styles;\n});\n"],"names":["TextCta","forwardRef","_a","ref","label","headlineTitle","text","showFirstButton","showSecondButton","onClickFirstBtn","onClickSecondBtn","firstButtonProps","secondButtonProps","listItems","showAppStore","showPlayStore","appStoreProps","playStoreProps","props","__rest","handleUrlClick","useCallback","url","window","open","handleOnClickBtn","e","callback","handleRenderBtn","btnProps","onClickHandler","propsA","Object","assign","_jsx","Button","onClick","_jsxs","jsxs","TextCtaContainerStyled","Label","className","children","Typography","length","List","map","item","index","ListItem","disableGutters","jsx","Icon","name","icon","_Fragment","src","img","alt","dangerouslySetInnerHTML","__html","getHeadlineStyle","headlineVariant","fontSize","lineHeight","styled","shouldForwardProp","prop","theme","args","styles","margin","marginBottom","marginTop","fontWeight","display","alignItems","justifyContent","flexWrap","breakpoints","down","width","cursor","marginRight","height","maxWidth","paddingLeft","paddingRight","paddingBottom","minWidth","padding"],"mappings":"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"}
1	+ {"version":3,"file":"textCta.js","sources":["../../../../../src/organisms/textCta/textCta.tsx"],"sourcesContent":["import React, { useCallback, forwardRef } from 'react';\nimport { Label } from '../../components/label';\nimport { List, ListItem, Typography, styled, ButtonBase } from '@mui/material';\nimport { Button, ButtonProps } from '../../components/button';\nimport { Icon, IconNameProp } from '../../components/icon';\n\nexport type variants = 'subHeadline' \| 'h1' \| 'h2' \| 'h3' \| 'h4';\n\nexport interface TextCtaProps {\n /*\n label to be shown on the top of component\n /\n label?: string;\n\n /\n headline to be shown on the top of component\n /\n headlineTitle?: string;\n /\n headline type variant\n /\n headlineVariant?: variants;\n\n /\n text to be shown under headline/subheadline\n /\n text?: string;\n\n /\n Show the primary button if true. Must fill the firstButtonProps\n /\n showFirstButton?: boolean;\n\n /\n Show the secondary button if true. Must fill the secondButtonProps\n /\n showSecondButton?: boolean;\n\n /\n props primary button. Same of skoda button component\n /\n firstButtonProps?: ButtonProps & { url?: string };\n\n /\n props secondary button. Same of skoda button component\n /\n secondButtonProps?: ButtonProps & { url?: string };\n\n /\n callback on click primary button\n /\n onClickFirstBtn?: (e: unknown) => void;\n\n /\n callback on click secondary button\n /\n onClickSecondBtn?: (e: unknown) => void;\n\n /\n If true, shows the AppStore badge\n /\n showAppStore?: boolean;\n\n /\n If true, shows the PlayStore badge\n /\n showPlayStore?: boolean;\n\n /\n List items show icon and text\n * default icon for list is the check,it's possible to configure using the icon name provide in the Icon component\n /\n listItems?: {\n text?: string;\n icon?: IconNameProp;\n }[];\n\n /\n object appStore Badge:\n * {url: \"url\",\talt: ' alt description image', img: 'image badges'}\n /\n appStoreProps?: Record<string, string>;\n\n /\n object playStore Badge\n * {url: \"url\",\talt: ' alt description image', img: 'image badges'}\n /\n playStoreProps?: unknown;\n}\n\n/\n @deprecated use TextAndCta component instead\n /\nexport const TextCta = forwardRef<HTMLDivElement, TextCtaProps>(\n (\n {\n label,\n headlineTitle,\n text,\n showFirstButton = false,\n showSecondButton = false,\n onClickFirstBtn,\n onClickSecondBtn,\n firstButtonProps,\n secondButtonProps,\n listItems,\n showAppStore = false,\n showPlayStore = false,\n appStoreProps,\n playStoreProps,\n ...props\n },\n ref,\n ) => {\n const handleUrlClick = useCallback((url) => {\n window.open(url, '_blank');\n }, []);\n\n const handleOnClickBtn = useCallback(\n (e: unknown, callback: (e: unknown) => void, url: string) => {\n if (url) {\n handleUrlClick(url);\n }\n callback && callback(e);\n },\n [handleUrlClick],\n );\n\n const handleRenderBtn = useCallback(\n (btnProps: ButtonProps & { url?: string }, onClickHandler: (e: unknown) => void) => {\n const propsA = {\n ...btnProps,\n url: btnProps.url \|\| null,\n };\n return <Button {...propsA} onClick={(e) => handleOnClickBtn(e, onClickHandler, propsA.url)} />;\n },\n [handleOnClickBtn],\n );\n\n return (\n <TextCtaContainerStyled ref={ref} listItems={listItems} {...props}>\n {label && <Label label={label} />}\n {headlineTitle && (\n <div className=\"headlineContainer\">\n <Typography className=\"textCtaHeadline\">{headlineTitle}</Typography>\n </div>\n )}\n {text && <p className={`textCtaText ${showPlayStore && 'isPlayStore'}`}>{text}</p>}\n {listItems && listItems.length > 0 && (\n <List className=\"textCtaList\">\n {listItems.map((item, index) => {\n return (\n <ListItem key={'text-cta-list-item' + index} disableGutters>\n <Icon name={item.icon \|\| 'check'} />\n {item.text}\n </ListItem>\n );\n })}\n </List>\n )}\n <div className=\"textCtaBtnGroup\">\n {(!showAppStore \|\| !showPlayStore) && (\n <>\n {showFirstButton && handleRenderBtn(firstButtonProps, onClickFirstBtn)}\n {showSecondButton && handleRenderBtn(secondButtonProps, onClickSecondBtn)}\n </>\n )}\n {(!showFirstButton \|\| !showSecondButton) && (\n <>\n {showAppStore && (\n <ButtonBase className=\"appStoreBadge\" onClick={() => handleUrlClick(appStoreProps.url)}>\n <img src={appStoreProps.img} alt={appStoreProps.alt} />\n </ButtonBase>\n )}\n {showPlayStore && (\n <span className=\"playStoreBadge\" dangerouslySetInnerHTML={{ __html: playStoreProps }}></span>\n )}\n </>\n )}\n </div>\n </TextCtaContainerStyled>\n );\n },\n);\n\n//Set the correct font and lineheight depending on the prop variant passed\nconst getHeadlineStyle = (headlineVariant: variants) => {\n switch (headlineVariant) {\n case 'h1':\n return {\n fontSize: '44px',\n lineHeight: '52px',\n };\n case 'h2':\n return {\n fontSize: '36px',\n lineHeight: '44px',\n };\n case 'h3':\n return {\n fontSize: '30px',\n lineHeight: '36px',\n };\n case 'h4':\n return {\n fontSize: '24px',\n lineHeight: '28px',\n };\n default:\n return {\n fontSize: '18px',\n lineHeight: '28px',\n };\n }\n};\n\n/\n @description Button styling defintion based on props\n */\nconst TextCtaContainerStyled = styled('div', {\n shouldForwardProp: (prop) => prop !== 'listItems' && prop !== 'headlineVariant',\n})<TextCtaProps>(({ theme, ...args }) => {\n let styles = {};\n\n styles = {\n '& > span': {\n margin: 0,\n },\n '& > div.headlineContainer': {\n marginBottom: '10px',\n marginTop: '5px',\n '& > .textCtaHeadline': {\n fontWeight: 'bold',\n ...getHeadlineStyle(args.headlineVariant),\n },\n },\n '& > div.subheadlineContainer': {\n marginBottom: '10px',\n '& > .textCtaSubheadline': {\n fontWeight: 'bold',\n fontSize: '18px',\n lineHeight: '28px',\n },\n },\n '& > .textCtaList': {\n marginBottom: '10px',\n },\n '& > .textCtaText': {\n fontSize: '18px',\n lineHeight: '28px',\n margin: '12px 0 16px 0',\n '&.isPlayStore': {\n marginBottom: '2px',\n },\n },\n '& > div.textCtaBtnGroup': {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n '& > div': {\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n '& > .appStoreBadge': {\n cursor: 'pointer',\n marginRight: '8px',\n '& > img': {\n height: '40px',\n },\n },\n '& > .playStoreBadge': {\n cursor: 'pointer',\n '& img': {\n maxWidth: '153px',\n },\n },\n '& .MuiButton-root': {\n paddingLeft: '16px',\n paddingRight: '16px',\n paddingBottom: '2px',\n fontSize: '14px',\n minWidth: '93px',\n height: '32px',\n [theme.breakpoints.down('sm')]: {\n height: '44px',\n width: '100%',\n },\n },\n '& .MuiButton-root:first-of-type': {\n marginRight: '16px',\n marginBottom: 0,\n [theme.breakpoints.down('sm')]: {\n marginBottom: '16px',\n },\n },\n },\n ' & > .MuiList-root': {\n padding: '0px',\n '& > .MuiListItem-root': {\n padding: '0px 0px 6px 0px',\n\n '& > .MuiIcon-root': {\n width: '20px',\n height: '24px',\n fontSize: '14px',\n },\n },\n },\n };\n\n return styles;\n});\n"],"names":["TextCta","forwardRef","_a","ref","label","headlineTitle","text","showFirstButton","showSecondButton","onClickFirstBtn","onClickSecondBtn","firstButtonProps","secondButtonProps","listItems","showAppStore","showPlayStore","appStoreProps","playStoreProps","props","__rest","handleUrlClick","useCallback","url","window","open","handleOnClickBtn","e","callback","handleRenderBtn","btnProps","onClickHandler","propsA","Object","assign","_jsx","Button","onClick","_jsxs","jsxs","TextCtaContainerStyled","Label","className","children","Typography","length","List","map","item","index","ListItem","disableGutters","jsx","Icon","name","icon","_Fragment","ButtonBase","src","img","alt","dangerouslySetInnerHTML","__html","getHeadlineStyle","headlineVariant","fontSize","lineHeight","styled","shouldForwardProp","prop","theme","args","styles","margin","marginBottom","marginTop","fontWeight","display","alignItems","justifyContent","flexWrap","breakpoints","down","width","cursor","marginRight","height","maxWidth","paddingLeft","paddingRight","paddingBottom","minWidth","padding"],"mappings":"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"}

package/cjs/organisms/tile/tile.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),i=require("react"),a=require("@mui/system"),r=require("../../components/label/label.js"),l=require("@mui/material"),o=require("../common/menuCardComponent/menuCardComponent.js"),n=require("../../utils/utilities.js"),s=require("../../components/common/imageComponent.js");const p=a=>{var{tileContentPinned:p="top",isBorderRadius:m=!0,promotionalVariant:c="large"}=a,x=e.__rest(a,["tileContentPinned","isBorderRadius","promotionalVariant"]);const[u,h]=i.useState(!1),g=t.jsx("div",{className:"tileImage",children:x.tileImageURLOnHover&&u?t.jsx(s.default,{image:x.tileImageURLOnHover,alt:x.tileAltImage},"imageUrl_onHover"):t.jsx(s.default,{image:x.tileImageURL,alt:x.tileAltImage,fallbackImage:x.tileImageURLFallback},"imageUrl")}),b=t.jsxs("div",{className:"tilePriceWrapper",children:[x.tilePriceTotal&&t.jsx("span",{className:"disclaimer tilePriceTotal",children:x.tilePriceTotal}),x.tilePriceTotal&&x.tilePriceMonth&&t.jsx(l.Divider,{orientation:"vertical",flexItem:!0}),x.tilePriceMonth&&t.jsx("span",{className:"disclaimer tilePriceMonth",children:x.tilePriceMonth})]});return t.jsx(d,{promotionalLabel:x.promotionalLabel,isBorderRadius:m,tileContentPinned:p,children:t.jsxs("div",{className:"tileWrapper",onMouseEnter:()=>{u||h(!0)},onMouseLeave:()=>{h(!1)},children:[x.isMenuDropdown&&t.jsx("div",{className:"tileDropdownMenu",onMouseEnter:()=>h(!1),onMouseLeave:()=>h(!0),children:t.jsx(o.default,Object.assign({},x.menuCardComponentProps))}),x.promotionalLabel&&t.jsx("div",{className:"tilePromotionalLabel",children:t.jsx(r.Label,{type:"promotional",variant:c,label:n.handleMaxChars(x.promotionalLabel,30)})}),"bottom"===p&&g,t.jsxs("div",{className:"tileContent",children:[x.generalLabel&&t.jsx("div",{className:"tileGeneralLabel",children:t.jsx(r.Label,{label:n.handleMaxChars(x.generalLabel,30)})}),t.jsx("h4",{className:"tileTitle",children:n.handleMaxChars(x.title,20)}),x.featureLabel&&t.jsx("div",{className:"tileFeatureLabel",children:t.jsx(r.Label,{type:"feature",variant:x.featureLabelVariant,label:n.handleMaxChars(x.featureLabel,30)})}),"bottom"===p&&b]}),"top"===p&&g,"top"===p&&b]})})};p.defaultProps={isBorderRadius:!0,promotionalVariant:"large"};const d=a.styled("div")((t=>{var{theme:i}=t,a=e.__rest(t,["theme"]);let r={};const{tileContentPinned:l,promotionalLabel:o,isBorderRadius:n}=a;return r={height:"100%","& .tileWrapper, & .tileWrapper *":{boxSizing:"border-box"},"& .tileWrapper":{position:"relative",borderRadius:n?"8px":0,height:"100%",display:"flex",flexDirection:"column",justifyContent:"space-between",backgroundColor:i.palette.surface.primary,padding:"0 0 24px 0",border:`1px solid ${i.palette.surface.secondary}`},"& .tileDropdownMenu":{position:"absolute",right:0,top:0,".menuCardComponent":{top:0,right:0,width:"58px",height:"58px",display:"flex",alignItems:"center",justifyContent:"center"}},"& .tileContent":{paddingTop:o?"40px":"16px"},"& .tilePromotionalLabel":{width:"100%",maxWidth:"calc(100% - 64px)",position:"absolute",top:"0",left:"0"},"& .tileGeneralLabel":{padding:"0 24px",marginBottom:"0",position:"relative",zIndex:"1","& span":{margin:"0"}},"& .tileTitle":{margin:"0 0 6px 0",padding:"0 24px",position:"relative",zIndex:"1"},"& .tileFeatureLabel":{margin:"0",padding:"0 24px",position:"relative",zIndex:"1","& span":{margin:"0"}},"& .tileImage":{height:"176px",marginTop:"top"===l?"-32px":"16px",marginBottom:"bottom"===l?"-32px":"0",[i.breakpoints.up("md")]:{height:"200px"},[i.breakpoints.up("lg")]:{height:"186px"},[i.breakpoints.up("xl")]:{height:"265px"},"& img":{position:"relative",zIndex:"0",objectFit:"contain",objectPosition:"center",display:"block",height:"100%",width:"100%"}},"& .tilePriceWrapper":{display:"flex",flexDirection:"row",flexWrap:"wrap",width:"100%",padding:"0 24px",marginTop:"bottom"===l?"8px":"0","& .tilePriceTotal":{fontWeight:"bold"},"& hr":{margin:"0 8px",borderColor:i.palette.transparent.secondary}}},r}));exports.Tile=p;
+"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),i=require("react"),a=require("@mui/material/styles"),r=require("../../components/label/label.js"),l=require("@mui/material"),o=require("../common/menuCardComponent/menuCardComponent.js"),n=require("../../utils/utilities.js"),s=require("../../components/common/imageComponent.js");const p=a=>{var{tileContentPinned:p="top",isBorderRadius:m=!0,promotionalVariant:c="large"}=a,x=e.__rest(a,["tileContentPinned","isBorderRadius","promotionalVariant"]);const[u,h]=i.useState(!1),g=t.jsx("div",{className:"tileImage",children:x.tileImageURLOnHover&&u?t.jsx(s.default,{image:x.tileImageURLOnHover,alt:x.tileAltImage},"imageUrl_onHover"):t.jsx(s.default,{image:x.tileImageURL,alt:x.tileAltImage,fallbackImage:x.tileImageURLFallback},"imageUrl")}),b=t.jsxs("div",{className:"tilePriceWrapper",children:[x.tilePriceTotal&&t.jsx("span",{className:"disclaimer tilePriceTotal",children:x.tilePriceTotal}),x.tilePriceTotal&&x.tilePriceMonth&&t.jsx(l.Divider,{orientation:"vertical",flexItem:!0}),x.tilePriceMonth&&t.jsx("span",{className:"disclaimer tilePriceMonth",children:x.tilePriceMonth})]});return t.jsx(d,{promotionalLabel:x.promotionalLabel,isBorderRadius:m,tileContentPinned:p,children:t.jsxs(l.ButtonBase,{className:"tileWrapper",onMouseEnter:()=>{u||h(!0)},onMouseLeave:()=>{h(!1)},onClick:()=>h((e=>!e)),children:[x.isMenuDropdown&&t.jsx(l.ButtonBase,{className:"tileDropdownMenu",onMouseEnter:()=>h(!1),onMouseLeave:()=>h(!0),children:t.jsx(o.default,Object.assign({},x.menuCardComponentProps))}),x.promotionalLabel&&t.jsx("div",{className:"tilePromotionalLabel",children:t.jsx(r.Label,{type:"promotional",variant:c,label:n.handleMaxChars(x.promotionalLabel,30)})}),"bottom"===p&&g,t.jsxs("div",{className:"tileContent",children:[x.generalLabel&&t.jsx("div",{className:"tileGeneralLabel",children:t.jsx(r.Label,{label:n.handleMaxChars(x.generalLabel,30)})}),t.jsx("h4",{className:"tileTitle",children:n.handleMaxChars(x.title,20)}),x.featureLabel&&t.jsx("div",{className:"tileFeatureLabel",children:t.jsx(r.Label,{type:"feature",variant:x.featureLabelVariant,label:n.handleMaxChars(x.featureLabel,30)})}),"bottom"===p&&b]}),"top"===p&&g,"top"===p&&b]})})};p.defaultProps={isBorderRadius:!0,promotionalVariant:"large"};const d=a.styled("div")((t=>{var{theme:i}=t,a=e.__rest(t,["theme"]);let r={};const{tileContentPinned:l,promotionalLabel:o,isBorderRadius:n}=a;return r={height:"100%","& .tileWrapper, & .tileWrapper *":{boxSizing:"border-box"},"& .tileWrapper":{position:"relative",borderRadius:n?"8px":0,height:"100%",display:"flex",flexDirection:"column",justifyContent:"space-between",backgroundColor:i.palette.surface.primary,padding:"0 0 24px 0",border:`1px solid ${i.palette.surface.secondary}`},"& .tileDropdownMenu":{position:"absolute",right:0,top:0,".menuCardComponent":{top:0,right:0,width:"58px",height:"58px",display:"flex",alignItems:"center",justifyContent:"center"}},"& .tileContent":{paddingTop:o?"40px":"16px"},"& .tilePromotionalLabel":{width:"100%",maxWidth:"calc(100% - 64px)",position:"absolute",top:"0",left:"0"},"& .tileGeneralLabel":{padding:"0 24px",marginBottom:"0",position:"relative",zIndex:"1","& span":{margin:"0"}},"& .tileTitle":{margin:"0 0 6px 0",padding:"0 24px",position:"relative",zIndex:"1"},"& .tileFeatureLabel":{margin:"0",padding:"0 24px",position:"relative",zIndex:"1","& span":{margin:"0"}},"& .tileImage":{height:"176px",marginTop:"top"===l?"-32px":"16px",marginBottom:"bottom"===l?"-32px":"0",[i.breakpoints.up("md")]:{height:"200px"},[i.breakpoints.up("lg")]:{height:"186px"},[i.breakpoints.up("xl")]:{height:"265px"},"& img":{position:"relative",zIndex:"0",objectFit:"contain",objectPosition:"center",display:"block",height:"100%",width:"100%"}},"& .tilePriceWrapper":{display:"flex",flexDirection:"row",flexWrap:"wrap",width:"100%",padding:"0 24px",marginTop:"bottom"===l?"8px":"0","& .tilePriceTotal":{fontWeight:"bold"},"& hr":{margin:"0 8px",borderColor:i.palette.transparent.secondary}}},r}));exports.Tile=p;
 //# sourceMappingURL=tile.js.map

package/cjs/organisms/tile/tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile.js","sources":["../../../../../src/organisms/tile/tile.tsx"],"sourcesContent":["import React, { useState, HTMLAttributes, FC } from 'react';\nimport { styled } from '@mui/system';\nimport { Label } from '../../components/label';\nimport { Divider } from '@mui/material';\nimport MenuCardComponent, { MenuCardComponentProps } from '../common/menuCardComponent/menuCardComponent';\nimport { handleMaxChars } from '../../utils/utilities';\nimport ImageComponent from '../../components/common/imageComponent';\n\n/*\n @interface TileStylingProps\n * @description The props of the tile component that are additionally used for styling.\n /\n\nexport interface TileStylingProps {\n /\n Style with or without the border radius\n /\n isBorderRadius?: boolean;\n /\n tile Text pinned position\n /\n tileContentPinned?: 'top' \| 'bottom';\n /\n Promotional Label text\n /\n promotionalLabel?: string;\n /\n Promotional Label text\n /\n promotionalVariant?: 'large' \| 'small';\n}\n\n/\n @interface TileProps\n * @description Properties are inherited from HTML div element and TileStylingProps interface.\n /\nexport interface TileProps extends TileStylingProps, HTMLAttributes<HTMLDivElement> {\n /\n If true the menu dropdown is showing\n /\n isMenuDropdown?: boolean;\n /\n General Label\n /\n generalLabel?: string;\n /\n Title name text\n /\n title?: string;\n /\n Feature Label\n /\n featureLabel?: string;\n /\n Feature Label Variant\n /\n featureLabelVariant?: 'primary' \| 'neutral' \| 'secondary';\n /\n URL image\n /\n tileImageURL: string;\n /\n The source of the onError image.\n /\n tileImageURLFallback?: string;\n /\n URL image\n /\n tileAltImage?: string;\n /\n URL image which apply on hover if is changeImageOnHover is true\n /\n tileImageURLOnHover?: string;\n /\n tile feature info total price\n /\n tilePriceTotal?: string;\n /\n tile feature info monthly price\n /\n tilePriceMonth?: string;\n /\n MenuCardComponent props.\n /\n menuCardComponentProps?: MenuCardComponentProps;\n}\n\n/\n @description SkodaFlow CardPhotoFixed component.\n * Properties are inherited from HTML Div element.\n * @param props CardPhotoFixedProps\n * @returns React Functional Component\n * @deprecated\n /\n\nexport const Tile: FC<TileProps> = ({\n tileContentPinned = 'top',\n isBorderRadius = true,\n promotionalVariant = 'large',\n ...props\n}) => {\n const [isMouseOver, setIsMouseOver] = useState(false);\n const handleMouseEnter = () => {\n if (!isMouseOver) {\n setIsMouseOver(true);\n }\n };\n\n const handleMouseLeave = () => {\n setIsMouseOver(false);\n };\n\n const tileImageElement = (\n <div className=\"tileImage\">\n {props.tileImageURLOnHover && isMouseOver ? (\n <ImageComponent key={'imageUrl_onHover'} image={props.tileImageURLOnHover} alt={props.tileAltImage} />\n ) : (\n <ImageComponent\n key={'imageUrl'}\n image={props.tileImageURL}\n alt={props.tileAltImage}\n fallbackImage={props.tileImageURLFallback}\n />\n )}\n </div>\n );\n const pricingElement = (\n <div className=\"tilePriceWrapper\">\n {props.tilePriceTotal && <span className=\"disclaimer tilePriceTotal\">{props.tilePriceTotal}</span>}\n {props.tilePriceTotal && props.tilePriceMonth && <Divider orientation=\"vertical\" flexItem />}\n {props.tilePriceMonth && <span className=\"disclaimer tilePriceMonth\">{props.tilePriceMonth}</span>}\n </div>\n );\n\n return (\n <TileStyled\n promotionalLabel={props.promotionalLabel}\n isBorderRadius={isBorderRadius}\n tileContentPinned={tileContentPinned}\n >\n <div className=\"tileWrapper\" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n {props.isMenuDropdown && (\n <div\n className=\"tileDropdownMenu\"\n onMouseEnter={() => setIsMouseOver(false)}\n onMouseLeave={() => setIsMouseOver(true)}\n >\n <MenuCardComponent {...props.menuCardComponentProps} />\n </div>\n )}\n {props.promotionalLabel && (\n <div className=\"tilePromotionalLabel\">\n <Label type=\"promotional\" variant={promotionalVariant} label={handleMaxChars(props.promotionalLabel, 30)} />\n </div>\n )}\n {tileContentPinned === 'bottom' && tileImageElement}\n <div className=\"tileContent\">\n {props.generalLabel && (\n <div className=\"tileGeneralLabel\">\n <Label label={handleMaxChars(props.generalLabel, 30)} />\n </div>\n )}\n <h4 className=\"tileTitle\">{handleMaxChars(props.title, 20)}</h4>\n {props.featureLabel && (\n <div className=\"tileFeatureLabel\">\n <Label\n type=\"feature\"\n variant={props.featureLabelVariant}\n label={handleMaxChars(props.featureLabel, 30)}\n />\n </div>\n )}\n {tileContentPinned === 'bottom' && pricingElement}\n </div>\n {tileContentPinned === 'top' && tileImageElement}\n {tileContentPinned === 'top' && pricingElement}\n </div>\n </TileStyled>\n );\n};\n\nTile.defaultProps = {\n isBorderRadius: true,\n promotionalVariant: 'large',\n};\nconst TileStyled = styled('div')<TileStylingProps & { theme? }>(({ theme, ...args }) => {\n let styles = {};\n const { tileContentPinned, promotionalLabel, isBorderRadius } = args;\n\n styles = {\n height: '100%',\n '& .tileWrapper, & .tileWrapper ': {\n boxSizing: 'border-box',\n },\n '& .tileWrapper': {\n position: 'relative',\n borderRadius: isBorderRadius ? '8px' : 0,\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n backgroundColor: theme.palette.surface.primary,\n padding: '0 0 24px 0',\n border: `1px solid ${theme.palette.surface.secondary}`,\n },\n '& .tileDropdownMenu': {\n position: 'absolute',\n right: 0,\n top: 0,\n '.menuCardComponent': {\n top: 0,\n right: 0,\n width: '58px',\n height: '58px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n },\n '& .tileContent': {\n paddingTop: promotionalLabel ? '40px' : '16px',\n },\n '& .tilePromotionalLabel': {\n width: '100%',\n maxWidth: 'calc(100% - 64px)',\n position: 'absolute',\n top: '0',\n left: '0',\n },\n '& .tileGeneralLabel': {\n padding: '0 24px',\n marginBottom: '0',\n position: 'relative',\n zIndex: '1',\n '& span': {\n margin: '0',\n },\n },\n '& .tileTitle': {\n margin: '0 0 6px 0',\n padding: '0 24px',\n position: 'relative',\n zIndex: '1',\n },\n '& .tileFeatureLabel': {\n margin: '0',\n padding: '0 24px',\n position: 'relative',\n zIndex: '1',\n '& span': {\n margin: '0',\n },\n },\n '& .tileImage': {\n height: '176px',\n marginTop: tileContentPinned === 'top' ? '-32px' : '16px',\n marginBottom: tileContentPinned === 'bottom' ? '-32px' : '0',\n [theme.breakpoints.up('md')]: {\n height: '200px',\n },\n [theme.breakpoints.up('lg')]: {\n height: '186px',\n },\n [theme.breakpoints.up('xl')]: {\n height: '265px',\n },\n '& img': {\n position: 'relative',\n zIndex: '0',\n objectFit: 'contain',\n objectPosition: 'center',\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n '& .tilePriceWrapper': {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n padding: '0 24px',\n marginTop: tileContentPinned === 'bottom' ? '8px' : '0',\n '& .tilePriceTotal': {\n fontWeight: 'bold',\n },\n '& hr': {\n margin: '0 8px',\n borderColor: theme.palette.transparent.secondary,\n },\n },\n };\n\n return styles;\n});\n"],"names":["Tile","_a","tileContentPinned","isBorderRadius","promotionalVariant","props","__rest","isMouseOver","setIsMouseOver","useState","tileImageElement","_jsx","className","children","tileImageURLOnHover","jsx","ImageComponent","image","alt","tileAltImage","tileImageURL","fallbackImage","tileImageURLFallback","pricingElement","_jsxs","jsxs","tilePriceTotal","tilePriceMonth","Divider","orientation","flexItem","TileStyled","promotionalLabel","onMouseEnter","onMouseLeave","isMenuDropdown","MenuCardComponent","Object","assign","menuCardComponentProps","Label","type","variant","label","handleMaxChars","generalLabel","title","featureLabel","featureLabelVariant","defaultProps","styled","theme","args","styles","height","boxSizing","position","borderRadius","display","flexDirection","justifyContent","backgroundColor","palette","surface","primary","padding","border","secondary","right","top","width","alignItems","paddingTop","maxWidth","left","marginBottom","zIndex","margin","marginTop","breakpoints","up","objectFit","objectPosition","flexWrap","fontWeight","borderColor","transparent"],"mappings":"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"}
1	+ {"version":3,"file":"tile.js","sources":["../../../../../src/organisms/tile/tile.tsx"],"sourcesContent":["import React, { useState, HTMLAttributes, FC } from 'react';\nimport { styled } from '@mui/material/styles';\nimport { Label } from '../../components/label';\nimport { Divider, ButtonBase } from '@mui/material';\nimport MenuCardComponent, { MenuCardComponentProps } from '../common/menuCardComponent/menuCardComponent';\nimport { handleMaxChars } from '../../utils/utilities';\nimport ImageComponent from '../../components/common/imageComponent';\n\n/*\n @interface TileStylingProps\n * @description The props of the tile component that are additionally used for styling.\n /\n\nexport interface TileStylingProps {\n /\n Style with or without the border radius\n /\n isBorderRadius?: boolean;\n /\n tile Text pinned position\n /\n tileContentPinned?: 'top' \| 'bottom';\n /\n Promotional Label text\n /\n promotionalLabel?: string;\n /\n Promotional Label text\n /\n promotionalVariant?: 'large' \| 'small';\n}\n\n/\n @interface TileProps\n * @description Properties are inherited from HTML div element and TileStylingProps interface.\n /\nexport interface TileProps extends TileStylingProps, HTMLAttributes<HTMLDivElement> {\n /\n If true the menu dropdown is showing\n /\n isMenuDropdown?: boolean;\n /\n General Label\n /\n generalLabel?: string;\n /\n Title name text\n /\n title?: string;\n /\n Feature Label\n /\n featureLabel?: string;\n /\n Feature Label Variant\n /\n featureLabelVariant?: 'primary' \| 'neutral' \| 'secondary';\n /\n URL image\n /\n tileImageURL: string;\n /\n The source of the onError image.\n /\n tileImageURLFallback?: string;\n /\n URL image\n /\n tileAltImage?: string;\n /\n URL image which apply on hover if is changeImageOnHover is true\n /\n tileImageURLOnHover?: string;\n /\n tile feature info total price\n /\n tilePriceTotal?: string;\n /\n tile feature info monthly price\n /\n tilePriceMonth?: string;\n /\n MenuCardComponent props.\n /\n menuCardComponentProps?: MenuCardComponentProps;\n}\n\n/\n @description SkodaFlow CardPhotoFixed component.\n * Properties are inherited from HTML Div element.\n * @param props CardPhotoFixedProps\n * @returns React Functional Component\n * @deprecated\n /\n\nexport const Tile: FC<TileProps> = ({\n tileContentPinned = 'top',\n isBorderRadius = true,\n promotionalVariant = 'large',\n ...props\n}) => {\n const [isMouseOver, setIsMouseOver] = useState(false);\n const handleMouseEnter = () => {\n if (!isMouseOver) {\n setIsMouseOver(true);\n }\n };\n\n const handleMouseLeave = () => {\n setIsMouseOver(false);\n };\n\n const tileImageElement = (\n <div className=\"tileImage\">\n {props.tileImageURLOnHover && isMouseOver ? (\n <ImageComponent key={'imageUrl_onHover'} image={props.tileImageURLOnHover} alt={props.tileAltImage} />\n ) : (\n <ImageComponent\n key={'imageUrl'}\n image={props.tileImageURL}\n alt={props.tileAltImage}\n fallbackImage={props.tileImageURLFallback}\n />\n )}\n </div>\n );\n const pricingElement = (\n <div className=\"tilePriceWrapper\">\n {props.tilePriceTotal && <span className=\"disclaimer tilePriceTotal\">{props.tilePriceTotal}</span>}\n {props.tilePriceTotal && props.tilePriceMonth && <Divider orientation=\"vertical\" flexItem />}\n {props.tilePriceMonth && <span className=\"disclaimer tilePriceMonth\">{props.tilePriceMonth}</span>}\n </div>\n );\n\n return (\n <TileStyled\n promotionalLabel={props.promotionalLabel}\n isBorderRadius={isBorderRadius}\n tileContentPinned={tileContentPinned}\n >\n <ButtonBase\n className=\"tileWrapper\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onClick={() => setIsMouseOver((prev) => !prev)}\n >\n {props.isMenuDropdown && (\n <ButtonBase\n className=\"tileDropdownMenu\"\n onMouseEnter={() => setIsMouseOver(false)}\n onMouseLeave={() => setIsMouseOver(true)}\n >\n <MenuCardComponent {...props.menuCardComponentProps} />\n </ButtonBase>\n )}\n {props.promotionalLabel && (\n <div className=\"tilePromotionalLabel\">\n <Label type=\"promotional\" variant={promotionalVariant} label={handleMaxChars(props.promotionalLabel, 30)} />\n </div>\n )}\n {tileContentPinned === 'bottom' && tileImageElement}\n <div className=\"tileContent\">\n {props.generalLabel && (\n <div className=\"tileGeneralLabel\">\n <Label label={handleMaxChars(props.generalLabel, 30)} />\n </div>\n )}\n <h4 className=\"tileTitle\">{handleMaxChars(props.title, 20)}</h4>\n {props.featureLabel && (\n <div className=\"tileFeatureLabel\">\n <Label\n type=\"feature\"\n variant={props.featureLabelVariant}\n label={handleMaxChars(props.featureLabel, 30)}\n />\n </div>\n )}\n {tileContentPinned === 'bottom' && pricingElement}\n </div>\n {tileContentPinned === 'top' && tileImageElement}\n {tileContentPinned === 'top' && pricingElement}\n </ButtonBase>\n </TileStyled>\n );\n};\n\nTile.defaultProps = {\n isBorderRadius: true,\n promotionalVariant: 'large',\n};\nconst TileStyled = styled('div')<TileStylingProps & { theme? }>(({ theme, ...args }) => {\n let styles = {};\n const { tileContentPinned, promotionalLabel, isBorderRadius } = args;\n\n styles = {\n height: '100%',\n '& .tileWrapper, & .tileWrapper ': {\n boxSizing: 'border-box',\n },\n '& .tileWrapper': {\n position: 'relative',\n borderRadius: isBorderRadius ? '8px' : 0,\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n backgroundColor: theme.palette.surface.primary,\n padding: '0 0 24px 0',\n border: `1px solid ${theme.palette.surface.secondary}`,\n },\n '& .tileDropdownMenu': {\n position: 'absolute',\n right: 0,\n top: 0,\n '.menuCardComponent': {\n top: 0,\n right: 0,\n width: '58px',\n height: '58px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n },\n '& .tileContent': {\n paddingTop: promotionalLabel ? '40px' : '16px',\n },\n '& .tilePromotionalLabel': {\n width: '100%',\n maxWidth: 'calc(100% - 64px)',\n position: 'absolute',\n top: '0',\n left: '0',\n },\n '& .tileGeneralLabel': {\n padding: '0 24px',\n marginBottom: '0',\n position: 'relative',\n zIndex: '1',\n '& span': {\n margin: '0',\n },\n },\n '& .tileTitle': {\n margin: '0 0 6px 0',\n padding: '0 24px',\n position: 'relative',\n zIndex: '1',\n },\n '& .tileFeatureLabel': {\n margin: '0',\n padding: '0 24px',\n position: 'relative',\n zIndex: '1',\n '& span': {\n margin: '0',\n },\n },\n '& .tileImage': {\n height: '176px',\n marginTop: tileContentPinned === 'top' ? '-32px' : '16px',\n marginBottom: tileContentPinned === 'bottom' ? '-32px' : '0',\n [theme.breakpoints.up('md')]: {\n height: '200px',\n },\n [theme.breakpoints.up('lg')]: {\n height: '186px',\n },\n [theme.breakpoints.up('xl')]: {\n height: '265px',\n },\n '& img': {\n position: 'relative',\n zIndex: '0',\n objectFit: 'contain',\n objectPosition: 'center',\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n '& .tilePriceWrapper': {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n padding: '0 24px',\n marginTop: tileContentPinned === 'bottom' ? '8px' : '0',\n '& .tilePriceTotal': {\n fontWeight: 'bold',\n },\n '& hr': {\n margin: '0 8px',\n borderColor: theme.palette.transparent.secondary,\n },\n },\n };\n\n return styles;\n});\n"],"names":["Tile","_a","tileContentPinned","isBorderRadius","promotionalVariant","props","__rest","isMouseOver","setIsMouseOver","useState","tileImageElement","_jsx","className","children","tileImageURLOnHover","jsx","ImageComponent","image","alt","tileAltImage","tileImageURL","fallbackImage","tileImageURLFallback","pricingElement","_jsxs","jsxs","tilePriceTotal","tilePriceMonth","Divider","orientation","flexItem","TileStyled","promotionalLabel","ButtonBase","onMouseEnter","onMouseLeave","onClick","prev","isMenuDropdown","MenuCardComponent","Object","assign","menuCardComponentProps","Label","type","variant","label","handleMaxChars","generalLabel","title","featureLabel","featureLabelVariant","defaultProps","styled","theme","args","styles","height","boxSizing","position","borderRadius","display","flexDirection","justifyContent","backgroundColor","palette","surface","primary","padding","border","secondary","right","top","width","alignItems","paddingTop","maxWidth","left","marginBottom","zIndex","margin","marginTop","breakpoints","up","objectFit","objectPosition","flexWrap","fontWeight","borderColor","transparent"],"mappings":"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"}

package/cjs/production/Button/Button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var o=require("tslib"),r=require("react/jsx-runtime"),e=require("@mui/material"),n=require("@mui/system");const a=n.keyframes`
+"use strict";var o=require("tslib"),r=require("react/jsx-runtime"),e=require("@mui/material"),n=require("@mui/material/styles");const a=n.keyframes`
   0% { background-color: #43861D; }
   50% { background-color: #96DC6F; }
   100% {background-color: #43861D; }

package/cjs/production/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../../src/production/Button/Button.tsx"],"sourcesContent":["import { Button as MuiButton, ButtonProps as MuiButtonProps, styled } from '@mui/material';\nimport React from 'react';\nimport { keyframes } from '@mui/~~system~~';\n\nconst greenBlink = keyframes`\n 0% { background-color: #43861D; }\n 50% { background-color: #96DC6F; }\n 100% {background-color: #43861D; }\n`;\nconst orangeBlink = keyframes`\n 0% { background-color: #DE7C13; }\n 50% { background-color: #F2B879; }\n 100% {background-color: #DE7C13; }\n`;\nconst redBlink = keyframes`\n 0% { background-color: #CE332A; }\n 50% { background-color: #EC908B; }\n 100% {background-color: #CE332A; }\n`;\nconst blueBlink = keyframes`\n 0% { background-color: #2A78CD; }\n 50% { background-color: #80B1E5; }\n 100% {background-color: #2A78CD; }\n`;\nconst whiteBlink = keyframes`\n 0% { background-color: #fff; }\n 50% { background-color: #D8D8D8; }\n 100% {background-color: #fff; }\n`;\nconst darkBlink = keyframes`\n 0% { border-color: #161718; }\n 50% { border-color: #D8D8D8; }\n 100% {border-color: #161718; }\n`;\nconst lightBlink = keyframes`\n0% { border-color: #eee; }\n50% { border-color: #454546; }\n100% {border-color: #eee; }\n`;\nconst disabledBlink = keyframes`\n 0% { background-color: #D8D8D8; }\n 50% { background-color: #EEEEEE; }\n 100% {background-color: #D8D8D8; }\n`;\n\nexport type ButtonProps = Omit<\n MuiButtonProps,\n 'nonce' \| 'color' \| 'disableElevation' \| 'disableFocusRipple' \| 'disableRipple' \| 'classes' \| 'variant'\n> & {\n blinking?: boolean;\n variant?: 'success' \| 'warning' \| 'alert' \| 'info' \| 'white' \| 'dark' \| 'light';\n};\n\nconst ButtonBase: React.FC<ButtonProps> = ({ blinking, variant, ...props }) => <MuiButton {...props} variant=\"text\" />;\n\n/*\n @deprecated use production components from production web library\n * https://www.npmjs.com/package/@skodaflow/production-web-library\n */\n// eslint-disable-next-line sonarjs/cognitive-complexity\nexport const Button = styled(ButtonBase)<ButtonProps>(({ theme, variant = 'success', blinking, disabled }) => ({\n minWidth: '150px',\n color: theme.palette.common.white,\n\n ...(variant === 'success' && {\n backgroundColor: '#43861D',\n '&:hover': {\n backgroundColor: '#55a628',\n },\n ...(blinking && {\n animation: `${greenBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'warning' && {\n backgroundColor: '#DE7C13',\n '&:hover': {\n backgroundColor: '#df8f38',\n },\n ...(blinking && {\n animation: `${orangeBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'alert' && {\n backgroundColor: '#CE332A',\n '&:hover': {\n backgroundColor: '#d84a42',\n },\n ...(blinking && {\n animation: `${redBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'info' && {\n backgroundColor: '#2A78CD',\n '&:hover': {\n backgroundColor: '#4a8fdb',\n },\n ...(blinking && {\n animation: `${blueBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'white' && {\n backgroundColor: theme.palette.common.white,\n color: theme.palette.text.primary,\n '&:hover': {\n backgroundColor: '#e1e1e1',\n },\n border: `2px solid ${theme.palette.text.primary}`,\n ...(blinking && {\n animation: `${whiteBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'dark' && {\n backgroundColor: 'transparent',\n border: `2px solid #161718`,\n color: theme.palette.text.primary,\n ...(blinking && {\n animation: `${darkBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'light' && {\n backgroundColor: 'transparent',\n border: `2px solid ${theme.palette.common.white}`,\n ...(blinking && {\n animation: `${lightBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(disabled && {\n backgroundColor: '#D8D8D8',\n color: theme.palette.action.disabled,\n borderColor: theme.palette.action.disabled,\n ...(blinking && {\n animation: `${disabledBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n}));\n"],"names":["greenBlink","keyframes","orangeBlink","redBlink","blueBlink","whiteBlink","darkBlink","lightBlink","disabledBlink","Button","styled","_a","blinking","variant","props","__rest","_jsx","jsx","MuiButton","Object","assign","theme","disabled","minWidth","color","palette","common","white","backgroundColor","animation","transitions","easing","easeInOut","text","primary","border","action","borderColor"],"mappings":"~~uHAIA~~,MAAMA,EAAaC,EAAAA,SAAS;;;;EAKtBC,EAAcD,EAAAA,SAAS;;;;EAKvBE,EAAWF,EAAAA,SAAS;;;;EAKpBG,EAAYH,EAAAA,SAAS;;;;EAKrBI,EAAaJ,EAAAA,SAAS;;;;EAKtBK,EAAYL,EAAAA,SAAS;;;;EAKrBM,EAAaN,EAAAA,SAAS;;;;EAKtBO,EAAgBP,EAAAA,SAAS;;;;EAqBlBQ,EAASC,EAAAA,QAPqBC,QAAAC,SAAEA,EAAQC,QAAEA,GAAOF,EAAKG,EAAKC,EAAAA,OAAAJ,EAA7B,wBAAoC,OAAAK,EAAAC,IAACC,SAAcC,OAAAC,OAAA,GAAAN,GAAOD,QAAQ,SAAS,GAOhGH,EAAgC,EAAGW,QAAOR,UAAU,UAAWD,WAAUU,+HAC7FC,SAAU,QACVC,MAAOH,EAAMI,QAAQC,OAAOC,OAEZ,YAAZd,GAAqBM,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAG7B,iBAA0BqB,EAAMS,YAAYC,OAAOC,eAIrD,YAAZnB,GAAqBM,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAG3B,iBAA2BmB,EAAMS,YAAYC,OAAOC,eAItD,UAAZnB,GAAmBM,OAAAC,OAAA,CACrBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAG1B,iBAAwBkB,EAAMS,YAAYC,OAAOC,eAInD,SAAZnB,GAAkBM,OAAAC,OAAA,CACpBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAGzB,iBAAyBiB,EAAMS,YAAYC,OAAOC,eAIpD,UAAZnB,GAAmBM,OAAAC,OAAA,CACrBQ,gBAAiBP,EAAMI,QAAQC,OAAOC,MACtCH,MAAOH,EAAMI,QAAQQ,KAAKC,QAC1B,UAAW,CACTN,gBAAiB,WAEnBO,OAAQ,aAAad,EAAMI,QAAQQ,KAAKC,WACpCtB,GAAY,CACdiB,UAAW,GAAGxB,iBAA0BgB,EAAMS,YAAYC,OAAOC,eAIrD,SAAZnB,GAAkBM,OAAAC,OAAA,CACpBQ,gBAAiB,cACjBO,OAAQ,oBACRX,MAAOH,EAAMI,QAAQQ,KAAKC,SACtBtB,GAAY,CACdiB,UAAW,GAAGvB,iBAAyBe,EAAMS,YAAYC,OAAOC,eAIpD,UAAZnB,GACFM,OAAAC,OAAA,CAAAQ,gBAAiB,cACjBO,OAAQ,aAAad,EAAMI,QAAQC,OAAOC,SACtCf,GAAY,CACdiB,UAAW,GAAGtB,iBAA0Bc,EAAMS,YAAYC,OAAOC,eAIjEV,GACFH,OAAAC,OAAA,CAAAQ,gBAAiB,UACjBJ,MAAOH,EAAMI,QAAQW,OAAOd,SAC5Be,YAAahB,EAAMI,QAAQW,OAAOd,UAC9BV,GAAY,CACdiB,UAAW,GAAGrB,iBAA6Ba,EAAMS,YAAYC,OAAOC"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../../src/production/Button/Button.tsx"],"sourcesContent":["import { Button as MuiButton, ButtonProps as MuiButtonProps, styled } from '@mui/material';\nimport React from 'react';\nimport { keyframes } from '@mui/material/styles';\n\nconst greenBlink = keyframes`\n 0% { background-color: #43861D; }\n 50% { background-color: #96DC6F; }\n 100% {background-color: #43861D; }\n`;\nconst orangeBlink = keyframes`\n 0% { background-color: #DE7C13; }\n 50% { background-color: #F2B879; }\n 100% {background-color: #DE7C13; }\n`;\nconst redBlink = keyframes`\n 0% { background-color: #CE332A; }\n 50% { background-color: #EC908B; }\n 100% {background-color: #CE332A; }\n`;\nconst blueBlink = keyframes`\n 0% { background-color: #2A78CD; }\n 50% { background-color: #80B1E5; }\n 100% {background-color: #2A78CD; }\n`;\nconst whiteBlink = keyframes`\n 0% { background-color: #fff; }\n 50% { background-color: #D8D8D8; }\n 100% {background-color: #fff; }\n`;\nconst darkBlink = keyframes`\n 0% { border-color: #161718; }\n 50% { border-color: #D8D8D8; }\n 100% {border-color: #161718; }\n`;\nconst lightBlink = keyframes`\n0% { border-color: #eee; }\n50% { border-color: #454546; }\n100% {border-color: #eee; }\n`;\nconst disabledBlink = keyframes`\n 0% { background-color: #D8D8D8; }\n 50% { background-color: #EEEEEE; }\n 100% {background-color: #D8D8D8; }\n`;\n\nexport type ButtonProps = Omit<\n MuiButtonProps,\n 'nonce' \| 'color' \| 'disableElevation' \| 'disableFocusRipple' \| 'disableRipple' \| 'classes' \| 'variant'\n> & {\n blinking?: boolean;\n variant?: 'success' \| 'warning' \| 'alert' \| 'info' \| 'white' \| 'dark' \| 'light';\n};\n\nconst ButtonBase: React.FC<ButtonProps> = ({ blinking, variant, ...props }) => <MuiButton {...props} variant=\"text\" />;\n\n/*\n @deprecated use production components from production web library\n * https://www.npmjs.com/package/@skodaflow/production-web-library\n */\n// eslint-disable-next-line sonarjs/cognitive-complexity\nexport const Button = styled(ButtonBase)<ButtonProps>(({ theme, variant = 'success', blinking, disabled }) => ({\n minWidth: '150px',\n color: theme.palette.common.white,\n\n ...(variant === 'success' && {\n backgroundColor: '#43861D',\n '&:hover': {\n backgroundColor: '#55a628',\n },\n ...(blinking && {\n animation: `${greenBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'warning' && {\n backgroundColor: '#DE7C13',\n '&:hover': {\n backgroundColor: '#df8f38',\n },\n ...(blinking && {\n animation: `${orangeBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'alert' && {\n backgroundColor: '#CE332A',\n '&:hover': {\n backgroundColor: '#d84a42',\n },\n ...(blinking && {\n animation: `${redBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'info' && {\n backgroundColor: '#2A78CD',\n '&:hover': {\n backgroundColor: '#4a8fdb',\n },\n ...(blinking && {\n animation: `${blueBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'white' && {\n backgroundColor: theme.palette.common.white,\n color: theme.palette.text.primary,\n '&:hover': {\n backgroundColor: '#e1e1e1',\n },\n border: `2px solid ${theme.palette.text.primary}`,\n ...(blinking && {\n animation: `${whiteBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'dark' && {\n backgroundColor: 'transparent',\n border: `2px solid #161718`,\n color: theme.palette.text.primary,\n ...(blinking && {\n animation: `${darkBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(variant === 'light' && {\n backgroundColor: 'transparent',\n border: `2px solid ${theme.palette.common.white}`,\n ...(blinking && {\n animation: `${lightBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n\n ...(disabled && {\n backgroundColor: '#D8D8D8',\n color: theme.palette.action.disabled,\n borderColor: theme.palette.action.disabled,\n ...(blinking && {\n animation: `${disabledBlink} 1s infinite ${theme.transitions.easing.easeInOut}`,\n }),\n }),\n}));\n"],"names":["greenBlink","keyframes","orangeBlink","redBlink","blueBlink","whiteBlink","darkBlink","lightBlink","disabledBlink","Button","styled","_a","blinking","variant","props","__rest","_jsx","jsx","MuiButton","Object","assign","theme","disabled","minWidth","color","palette","common","white","backgroundColor","animation","transitions","easing","easeInOut","text","primary","border","action","borderColor"],"mappings":"gIAIA,MAAMA,EAAaC,EAAAA,SAAS;;;;EAKtBC,EAAcD,EAAAA,SAAS;;;;EAKvBE,EAAWF,EAAAA,SAAS;;;;EAKpBG,EAAYH,EAAAA,SAAS;;;;EAKrBI,EAAaJ,EAAAA,SAAS;;;;EAKtBK,EAAYL,EAAAA,SAAS;;;;EAKrBM,EAAaN,EAAAA,SAAS;;;;EAKtBO,EAAgBP,EAAAA,SAAS;;;;EAqBlBQ,EAASC,EAAAA,QAPqBC,QAAAC,SAAEA,EAAQC,QAAEA,GAAOF,EAAKG,EAAKC,EAAAA,OAAAJ,EAA7B,wBAAoC,OAAAK,EAAAC,IAACC,SAAcC,OAAAC,OAAA,GAAAN,GAAOD,QAAQ,SAAS,GAOhGH,EAAgC,EAAGW,QAAOR,UAAU,UAAWD,WAAUU,+HAC7FC,SAAU,QACVC,MAAOH,EAAMI,QAAQC,OAAOC,OAEZ,YAAZd,GAAqBM,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAG7B,iBAA0BqB,EAAMS,YAAYC,OAAOC,eAIrD,YAAZnB,GAAqBM,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAG3B,iBAA2BmB,EAAMS,YAAYC,OAAOC,eAItD,UAAZnB,GAAmBM,OAAAC,OAAA,CACrBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAG1B,iBAAwBkB,EAAMS,YAAYC,OAAOC,eAInD,SAAZnB,GAAkBM,OAAAC,OAAA,CACpBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEfhB,GAAY,CACdiB,UAAW,GAAGzB,iBAAyBiB,EAAMS,YAAYC,OAAOC,eAIpD,UAAZnB,GAAmBM,OAAAC,OAAA,CACrBQ,gBAAiBP,EAAMI,QAAQC,OAAOC,MACtCH,MAAOH,EAAMI,QAAQQ,KAAKC,QAC1B,UAAW,CACTN,gBAAiB,WAEnBO,OAAQ,aAAad,EAAMI,QAAQQ,KAAKC,WACpCtB,GAAY,CACdiB,UAAW,GAAGxB,iBAA0BgB,EAAMS,YAAYC,OAAOC,eAIrD,SAAZnB,GAAkBM,OAAAC,OAAA,CACpBQ,gBAAiB,cACjBO,OAAQ,oBACRX,MAAOH,EAAMI,QAAQQ,KAAKC,SACtBtB,GAAY,CACdiB,UAAW,GAAGvB,iBAAyBe,EAAMS,YAAYC,OAAOC,eAIpD,UAAZnB,GACFM,OAAAC,OAAA,CAAAQ,gBAAiB,cACjBO,OAAQ,aAAad,EAAMI,QAAQC,OAAOC,SACtCf,GAAY,CACdiB,UAAW,GAAGtB,iBAA0Bc,EAAMS,YAAYC,OAAOC,eAIjEV,GACFH,OAAAC,OAAA,CAAAQ,gBAAiB,UACjBJ,MAAOH,EAAMI,QAAQW,OAAOd,SAC5Be,YAAahB,EAAMI,QAAQW,OAAOd,UAC9BV,GAAY,CACdiB,UAAW,GAAGrB,iBAA6Ba,EAAMS,YAAYC,OAAOC"}

package/components/alert/AlertButton.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '@mui/material';
-export interface AlertButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'size'> {
+export interface AlertButtonProps extends ButtonProps {
 }
 /**
  * AlertButton is a proxy component to <Button variant="text" color="white" size="small" />

package/components/alert/AlertButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Button as e}from"@mui/material";const i=t(((t,i)=>r(e,Object.assign({},t,{ref:i,variant:"text",color:"white",size:"small"}))));export{i as AlertButton};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Button as e}from"@mui/material";const i=t(((t,i)=>r(e,Object.assign({ref:i,variant:"text",color:"white",size:"small"},t))));export{i as AlertButton};
 //# sourceMappingURL=AlertButton.js.map

package/components/alert/AlertButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertButton.js","sources":["../../../src/components/alert/AlertButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface AlertButtonProps extends ~~Omit<~~ButtonProps, ~~'variant' \| 'color' \| 'size'>~~ {}\n\n/*\n AlertButton is a proxy component to <Button variant=\"text\" color=\"white\" size=\"small\" />\n */\nexport const AlertButton: React.FC<AlertButtonProps> = forwardRef((props, ref) => {\n return <Button ~~{...props}~~ ref={ref} variant=\"text\" color=\"white\" size=\"small\" />;\n});\n"],"names":["AlertButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"kHAQa,MAAAA,EAA0CC,GAAW,CAACC,EAAOC,IACjEC,EAACC,~~EAAWC~~,OAAAC,OAAA,~~CAAA~~,~~EAAAL,GAAOC,~~IAAKA,EAAKK,QAAQ,OAAOC,MAAM,QAAQC,KAAK"}
1	+ {"version":3,"file":"AlertButton.js","sources":["../../../src/components/alert/AlertButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface AlertButtonProps extends ButtonProps {}\n\n/*\n AlertButton is a proxy component to <Button variant=\"text\" color=\"white\" size=\"small\" />\n */\nexport const AlertButton: React.FC<AlertButtonProps> = forwardRef((props, ref) => {\n return <Button ref={ref} variant=\"text\" color=\"white\" size=\"small\" {...props} />;\n});\n"],"names":["AlertButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"kHAQa,MAAAA,EAA0CC,GAAW,CAACC,EAAOC,IACjEC,EAACC,EAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,QAAQC,KAAK,SAAYR"}

package/components/alert/AlertNotificationButton.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface AlertNotificationButtonProps extends ButtonProps {
+}
+/**
+ * AlertNotificationButton is a proxy component to <Button variant="text" color="secondary" size="small" />
+ */
+export declare const AlertNotificationButton: React.FC<AlertNotificationButtonProps>;

package/components/alert/AlertNotificationButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Button as o}from"@mui/material";const e=t(((t,e)=>r(o,Object.assign({ref:e,variant:"text",color:"secondary",size:"small"},t))));export{e as AlertNotificationButton};
2	+ //# sourceMappingURL=AlertNotificationButton.js.map

package/components/alert/AlertNotificationButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AlertNotificationButton.js","sources":["../../../src/components/alert/AlertNotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface AlertNotificationButtonProps extends ButtonProps {}\n\n/**\n * AlertNotificationButton is a proxy component to <Button variant=\"text\" color=\"secondary\" size=\"small\" />\n */\nexport const AlertNotificationButton: React.FC<AlertNotificationButtonProps> = forwardRef((props, ref) => {\n return <Button ref={ref} variant=\"text\" color=\"secondary\" size=\"small\" {...props} />;\n});\n"],"names":["AlertNotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"kHAQa,MAAAA,EAAkEC,GAAW,CAACC,EAAOC,IACzFC,EAACC,EAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,YAAYC,KAAK,SAAYR"}

package/components/alert/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from './Alert';
 export * from './AlertButton';
+export * from './AlertNotificationButton';

package/components/backdrop/backdrop.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 export interface BackdropProps extends HTMLAttributes<HTMLDivElement> {
     /**
      *  If true, the component is shown. Default value false

package/components/backdrop/backdrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"backdrop.js","sources":["../../../src/components/backdrop/backdrop.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, forwardRef, useEffect } from 'react';\nimport ~~{ SxProps } from '@mui/system';\nimport~~ useBackdrop from '../../components/common/hook/backdrop';\nimport { styled, Theme, Backdrop as MuiBackdrop } from '@mui/material';\n\nexport interface BackdropProps extends HTMLAttributes<HTMLDivElement> {\n /*\n If true, the component is shown. Default value false\n /\n open: boolean;\n /\n Override or extend the styles applied to the component.\n /\n classes?: object;\n /\n The component used for the root node. Either a string to use a HTML element or a component.\n /\n component?: string \| ReactNode;\n /\n The components used for each slot inside the Backdrop. Either a string to use a HTML element or a component.\n /\n components?: object;\n /\n The props used for each slot inside the Backdrop.\n /\n componentsProps?: object;\n /\n If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component. Default value is false\n /\n invisible?: boolean;\n /\n The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\n /\n sx?: SxProps<Theme>;\n /\n The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.\n /\n transitionDuration?: number \| object;\n /*\n Additional onClose callback that needs to be provided when the state of the backdrop is controlled from outside.\n /\n onClose?: (isOpen: boolean) => void;\n}\n\n/\n @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead\n */\nexport const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(({ open, onClose, ...props }, ref) => {\n const { openBackdrop, handleCloseBackdrop, setOpenBackdrop } = useBackdrop();\n\n const handleClose = () => {\n handleCloseBackdrop();\n onClose && onClose(false);\n };\n\n useEffect(() => {\n setOpenBackdrop(open);\n }, [open, setOpenBackdrop]);\n\n return (\n <BackdropStyled\n ref={ref}\n classes={props.classes}\n open={openBackdrop}\n onClick={handleClose}\n invisible={props.invisible}\n sx={props.sx}\n transitionDuration={props.transitionDuration}\n >\n {props.children}\n </BackdropStyled>\n );\n});\n\nconst BackdropStyled = styled(MuiBackdrop)<BackdropProps>(({ theme, ...args }) => {\n if (args.invisible)\n return {\n backgroundColor: theme.palette.transparent.backdrop,\n backdropFilter: 'blur(0px)',\n };\n\n return null;\n});\n"],"names":["Backdrop","forwardRef","_a","ref","open","onClose","props","__rest","openBackdrop","handleCloseBackdrop","setOpenBackdrop","useBackdrop","useEffect","_jsx","BackdropStyled","classes","onClick","invisible","sx","transitionDuration","children","styled","MuiBackdrop","theme","backgroundColor","palette","transparent","backdrop","backdropFilter"],"mappings":"~~wNA+Ca~~,MAAAA,EAAWC,GAA0C,CAACC,EAA6BC,SAA7BC,KAAEA,EAAIC,QAAEA,GAAOH,EAAKI,EAAKC,EAAAL,EAAzB,oBACjE,MAAMM,aAAEA,EAAYC,oBAAEA,EAAmBC,gBAAEA,GAAoBC,IAW/D,OAJAC,GAAU,KACRF,EAAgBN,EAAK,GACpB,CAACA,EAAMM,IAGRG,EAACC,EAAc,CACbX,IAAKA,EACLY,QAAST,EAAMS,QACfX,KAAMI,EACNQ,QAdgB,KAClBP,IACAJ,GAAWA,GAAQ,EAAM,EAavBY,UAAWX,EAAMW,UACjBC,GAAIZ,EAAMY,GACVC,mBAAoBb,EAAMa,mBAAkBC,SAE3Cd,EAAMc,UACQ,IAIfN,EAAiBO,EAAOC,EAAPD,EAAoCnB,IAAA,IAAAqB,MAAEA,GAAgBrB,EAC3E,OADyEK,EAAAL,EAAhB,WAChDe,UACA,CACLO,gBAAiBD,EAAME,QAAQC,YAAYC,SAC3CC,eAAgB,aAGb,IAAI"}
1	+ {"version":3,"file":"backdrop.js","sources":["../../../src/components/backdrop/backdrop.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, forwardRef, useEffect } from 'react';\nimport useBackdrop from '../../components/common/hook/backdrop';\nimport { SxProps, styled, Theme, Backdrop as MuiBackdrop } from '@mui/material';\n\nexport interface BackdropProps extends HTMLAttributes<HTMLDivElement> {\n /*\n If true, the component is shown. Default value false\n /\n open: boolean;\n /\n Override or extend the styles applied to the component.\n /\n classes?: object;\n /\n The component used for the root node. Either a string to use a HTML element or a component.\n /\n component?: string \| ReactNode;\n /\n The components used for each slot inside the Backdrop. Either a string to use a HTML element or a component.\n /\n components?: object;\n /\n The props used for each slot inside the Backdrop.\n /\n componentsProps?: object;\n /\n If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component. Default value is false\n /\n invisible?: boolean;\n /\n The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\n /\n sx?: SxProps<Theme>;\n /\n The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.\n /\n transitionDuration?: number \| object;\n /*\n Additional onClose callback that needs to be provided when the state of the backdrop is controlled from outside.\n /\n onClose?: (isOpen: boolean) => void;\n}\n\n/\n @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead\n */\nexport const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(({ open, onClose, ...props }, ref) => {\n const { openBackdrop, handleCloseBackdrop, setOpenBackdrop } = useBackdrop();\n\n const handleClose = () => {\n handleCloseBackdrop();\n onClose && onClose(false);\n };\n\n useEffect(() => {\n setOpenBackdrop(open);\n }, [open, setOpenBackdrop]);\n\n return (\n <BackdropStyled\n ref={ref}\n classes={props.classes}\n open={openBackdrop}\n onClick={handleClose}\n invisible={props.invisible}\n sx={props.sx}\n transitionDuration={props.transitionDuration}\n >\n {props.children}\n </BackdropStyled>\n );\n});\n\nconst BackdropStyled = styled(MuiBackdrop)<BackdropProps>(({ theme, ...args }) => {\n if (args.invisible)\n return {\n backgroundColor: theme.palette.transparent.backdrop,\n backdropFilter: 'blur(0px)',\n };\n\n return null;\n});\n"],"names":["Backdrop","forwardRef","_a","ref","open","onClose","props","__rest","openBackdrop","handleCloseBackdrop","setOpenBackdrop","useBackdrop","useEffect","_jsx","BackdropStyled","classes","onClick","invisible","sx","transitionDuration","children","styled","MuiBackdrop","theme","backgroundColor","palette","transparent","backdrop","backdropFilter"],"mappings":"wNA8Ca,MAAAA,EAAWC,GAA0C,CAACC,EAA6BC,SAA7BC,KAAEA,EAAIC,QAAEA,GAAOH,EAAKI,EAAKC,EAAAL,EAAzB,oBACjE,MAAMM,aAAEA,EAAYC,oBAAEA,EAAmBC,gBAAEA,GAAoBC,IAW/D,OAJAC,GAAU,KACRF,EAAgBN,EAAK,GACpB,CAACA,EAAMM,IAGRG,EAACC,EAAc,CACbX,IAAKA,EACLY,QAAST,EAAMS,QACfX,KAAMI,EACNQ,QAdgB,KAClBP,IACAJ,GAAWA,GAAQ,EAAM,EAavBY,UAAWX,EAAMW,UACjBC,GAAIZ,EAAMY,GACVC,mBAAoBb,EAAMa,mBAAkBC,SAE3Cd,EAAMc,UACQ,IAIfN,EAAiBO,EAAOC,EAAPD,EAAoCnB,IAAA,IAAAqB,MAAEA,GAAgBrB,EAC3E,OADyEK,EAAAL,EAAhB,WAChDe,UACA,CACLO,gBAAiBD,EAAME,QAAQC,YAAYC,SAC3CC,eAAgB,aAGb,IAAI"}

package/components/banner/BannerButton.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface BannerButtonProps extends ButtonProps {
+}
+/**
+ * BannerButton is a proxy component to <Button variant="outlined" color="secondary" size="small" />
+ */
+export declare const BannerButton: React.FC<BannerButtonProps>;

package/components/banner/BannerButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Button as t}from"@mui/material";const e=o(((o,e)=>r(t,Object.assign({ref:e,variant:"outlined",color:"secondary",size:"small"},o))));export{e as BannerButton};
2	+ //# sourceMappingURL=BannerButton.js.map

package/components/banner/BannerButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BannerButton.js","sources":["../../../src/components/banner/BannerButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface BannerButtonProps extends ButtonProps {}\n\n/**\n * BannerButton is a proxy component to <Button variant=\"outlined\" color=\"secondary\" size=\"small\" />\n */\nexport const BannerButton: React.FC<BannerButtonProps> = forwardRef((props, ref) => {\n return <Button ref={ref} variant=\"outlined\" color=\"secondary\" size=\"small\" {...props} />;\n});\n"],"names":["BannerButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"kHAQa,MAAAA,EAA4CC,GAAW,CAACC,EAAOC,IACnEC,EAACC,EAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,WAAWC,MAAM,YAAYC,KAAK,SAAYR"}

package/components/banner/BannerDismissButton.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface BannerDismissButtonProps extends ButtonProps {
+}
+/**
+ * BannerDismissButton is a proxy component to <Button variant="text" color="secondary" size="small" />
+ */
+export declare const BannerDismissButton: React.FC<BannerDismissButtonProps>;

package/components/banner/BannerDismissButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Button as o}from"@mui/material";const e=t(((t,e)=>r(o,Object.assign({ref:e,variant:"text",color:"secondary",size:"small"},t))));export{e as BannerDismissButton};
2	+ //# sourceMappingURL=BannerDismissButton.js.map

package/components/banner/BannerDismissButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BannerDismissButton.js","sources":["../../../src/components/banner/BannerDismissButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface BannerDismissButtonProps extends ButtonProps {}\n\n/**\n * BannerDismissButton is a proxy component to <Button variant=\"text\" color=\"secondary\" size=\"small\" />\n */\nexport const BannerDismissButton: React.FC<BannerDismissButtonProps> = forwardRef((props, ref) => {\n return <Button ref={ref} variant=\"text\" color=\"secondary\" size=\"small\" {...props} />;\n});\n"],"names":["BannerDismissButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","color","size"],"mappings":"kHAQa,MAAAA,EAA0DC,GAAW,CAACC,EAAOC,IACjFC,EAACC,EAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,OAAOC,MAAM,YAAYC,KAAK,SAAYR"}

package/components/banner/banner.d.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export interface BannerProps extends BoxProps<ElementType> {
     /**
      * Properties passed to wrapper of children
      */
-    typographyProps?: TypographyProps;
+    typographyProps?: TypographyProps<ElementType>;
     /**
      * Properties applied to wrapper of content (Icon and Typography)
      */

package/components/banner/banner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{CircleExclamationFilledIcon as n}from"../icon/filled/CircleExclamationFilledIcon.js";import{CircleInformationFilledIcon as i}from"../icon/filled/CircleInformationFilledIcon.js";import{WarningFilledIcon as s}from"../icon/filled/WarningFilledIcon.js";import{useTheme as o,Box as a,Typography as l}from"@mui/material";import{forwardRef as c,useMemo as p}from"react";import{getFocusRingStyle as x}from"../focusring/focusring.js";const m=c(((c,m)=>{var{children:f,variant:d="info",size:g="large",sx:b,iconProps:u,IconComponent:j,typographyProps:h,wrapperProps:w,buttons:y,buttonsWrapperProps:C,onClick:O}=c,I=e(c,["children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick"]);const P=o(),k=u||{},{sx:v}=k,B=e(k,["sx"]),S=h||{},{sx:z}=S,F=e(S,["sx"]),W=w||{},{sx:G}=W,A=e(W,["sx"]),D=C||{},{sx:E}=D,H=e(D,["sx"]),[L,q,J]=p((()=>{switch(d){case"error":return["error.main","error.light",s];case"warning":return["warning.main","warning.light",n];default:return["info.main","info.light",i]}}),[d]),K=j||J;return r(a,Object.assign({"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:O,sx:Object.assign(Object.assign({display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===g?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:L,backgroundColor:"dark"===P.palette.mode?"onSurface.os900":q,textAlign:"left"},O&&Object.assign({position:"relative",cursor:"pointer"},x(P,!0,"2px"))),b),ref:m},I,{children:[r(a,Object.assign({"data-testid":"Banner.wrapper",sx:Object.assign({flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5},G)},A,{children:[t(K,Object.assign({"data-testid":"Banner.icon",sx:Object.assign({color:L},v)},B)),t(l,Object.assign({"data-testid":"Banner.text",sx:Object.assign({color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"}},z)},F,{children:f}))]})),y&&t(a,Object.assign({"data-testid":"Banner.buttons",sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end"},E)},H,{children:y}))]}))}));export{m as Banner};
+import{__rest as e}from"tslib";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{CircleExclamationFilledIcon as n}from"../icon/filled/CircleExclamationFilledIcon.js";import{CircleInformationFilledIcon as i}from"../icon/filled/CircleInformationFilledIcon.js";import{WarningFilledIcon as s}from"../icon/filled/WarningFilledIcon.js";import{useTheme as o,Box as a,Typography as l}from"@mui/material";import{forwardRef as c,useMemo as p}from"react";import{getFocusRingStyle as x}from"../focusring/focusring.js";const m=c(((c,m)=>{var{children:f,variant:d="info",size:g="large",sx:u,iconProps:b,IconComponent:j,typographyProps:h,wrapperProps:w,buttons:y,buttonsWrapperProps:C,onClick:O}=c,I=e(c,["children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick"]);const P=o(),k=null!=b?b:{},{sx:v}=k,B=e(k,["sx"]),S=null!=h?h:{},{sx:z}=S,F=e(S,["sx"]),W=null!=w?w:{},{sx:G}=W,A=e(W,["sx"]),D=null!=C?C:{},{sx:E}=D,H=e(D,["sx"]),[L,q,J]=p((()=>{switch(d){case"error":return["error.main","error.light",s];case"warning":return["warning.main","warning.light",n];default:return["info.main","info.light",i]}}),[d]),K=null!=j?j:J;return r(a,Object.assign({"data-testid":"Banner",role:"alert","aria-atomic":"true","aria-live":"assertive",onClick:O,sx:Object.assign(Object.assign({display:"flex",width:"100%",flexDirection:{xs:"column",md:"row"},alignItems:{xs:"flex-start",md:"center"},justifyContent:"space-between",px:2,py:"small"===g?1:{xs:2,md:1},gap:1,borderLeft:6,borderColor:L,backgroundColor:"dark"===P.palette.mode?"onSurface.os900":q,textAlign:"left"},O&&Object.assign({position:"relative",cursor:"pointer"},x(P,!0,"2px"))),u),ref:m},I,{children:[r(a,Object.assign({"data-testid":"Banner.wrapper",sx:Object.assign({flexGrow:"1",display:"flex",alignItems:"flex-start",justifyContent:"flex-start",gap:1,py:.5},G)},A,{children:[t(K,Object.assign({"data-testid":"Banner.icon",sx:Object.assign({color:L},v)},B)),t(l,Object.assign({"data-testid":"Banner.text",sx:Object.assign({color:"text.primary",flexGrow:"1",fontSize:{xl:"16px"},lineHeight:{xl:"24px"}},z)},F,{children:f}))]})),y&&t(a,Object.assign({"data-testid":"Banner.buttons",sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,flexShrink:"0",ml:{xs:4,md:0},alignSelf:"flex-end"},E)},H,{children:y}))]}))}));export{m as Banner};
 //# sourceMappingURL=banner.js.map

package/components/banner/banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, forwardRef, ReactNode, useMemo } from 'react';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n /*\n Defines which variant of Banner component should be rendered\n * @default info\n /\n variant?: 'info' \| 'warning' \| 'error';\n /\n Set the proportions\n * @default large\n /\n size?: 'large' \| 'small';\n /\n Properties passed to indicator icon\n /\n iconProps?: SvgIconProps;\n /\n Icon node to be used\n /\n IconComponent?: ElementType<SvgIconProps>;\n /\n Properties passed to wrapper of children\n /\n typographyProps?: TypographyProps;\n /\n Properties applied to wrapper of content (Icon and Typography)\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n /\n buttons?: ReactNode;\n /\n Properties applied to wrapper element of buttons\n /\n buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/\n Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n (\n {\n children,\n variant = 'info',\n size = 'large',\n sx,\n iconProps,\n IconComponent,\n typographyProps,\n wrapperProps,\n buttons,\n buttonsWrapperProps,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: iconSx, ...restIcon } = iconProps \|\| {};\n const { sx: typographySx, ...restTypography } = typographyProps \|\| {};\n const { sx: wrapperSx, ...restWrapper } = wrapperProps \|\| {};\n const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps \|\| {};\n\n const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n switch (variant) {\n case 'error':\n return ['error.main', 'error.light', WarningFilledIcon];\n case 'warning':\n return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n case 'info':\n default:\n return ['info.main', 'info.light', CircleInformationFilledIcon];\n }\n }, [variant]);\n const BannerIcon = IconComponent \|\| IconVariantComponent;\n\n return (\n <Box\n data-testid=\"Banner\"\n role=\"alert\"\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n onClick={onClick}\n sx={{\n display: 'flex',\n width: '100%',\n // on mobile content and button bellow each other\n flexDirection: { xs: 'column', md: 'row' },\n alignItems: { xs: 'flex-start', md: 'center' },\n justifyContent: 'space-between',\n // proportions\n px: 2,\n py: size === 'small' ? 1 : { xs: 2, md: 1 },\n gap: 1,\n // style\n borderLeft: 6,\n borderColor: borderColor,\n backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n textAlign: 'left',\n // clickable style\n ...(onClick && {\n position: 'relative',\n cursor: 'pointer',\n // focused style\n ...getFocusRingStyle(theme, true, '2px'),\n }),\n ...sx,\n }}\n ref={ref}\n {...rest}\n >\n <Box\n data-testid=\"Banner.wrapper\"\n sx={{\n // align icon and content\n flexGrow: '1',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n gap: 1,\n py: 0.5,\n ...wrapperSx,\n }}\n {...restWrapper}\n >\n <BannerIcon\n data-testid=\"Banner.icon\"\n sx={{\n color: borderColor,\n ...iconSx,\n }}\n {...restIcon}\n />\n <Typography\n data-testid=\"Banner.text\"\n sx={{\n color: 'text.primary',\n flexGrow: '1',\n // custom font according to Figma\n fontSize: { xl: '16px' },\n lineHeight: { xl: '24px' },\n ...typographySx,\n }}\n {...restTypography}\n >\n {children}\n </Typography>\n </Box>\n {buttons && (\n <Box\n data-testid=\"Banner.buttons\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n // always show buttons next to each other\n flexShrink: '0',\n // on mobile align with text\n ml: { xs: 4, md: 0 },\n // on mobile move to the right side\n alignSelf: 'flex-end',\n ...buttonsWrapperSx,\n }}\n {...restButtonsWrapper}\n >\n {buttons}\n </Box>\n )}\n </Box>\n );\n },\n);\n"],"names":["Banner","forwardRef","_a","ref","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","__rest","theme","useTheme","_b","iconSx","restIcon","_c","typographySx","restTypography","_d","wrapperSx","restWrapper","_e","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","Object","assign","role","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","flexGrow","_jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"igBA+Ca,MAAAA,EAAgCC,GAC3C,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,QACRA,EAAU,OAAMC,KAChBA,EAAO,QAAOC,GACdA,EAAEC,UACFA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,QACZA,EAAOC,oBACPA,EAAmBC,QACnBA,GAEDZ,EADIa,EAAIC,EAAAd,EAZT,2IAgBA,MAAMe,EAAQC,IACRC,EAA8BX,~~GAAa~~,IAAzCD,GAAIa,~~KAAWC~~,EAAjBL,EAAAG,EAAA,CAAA,OACAG,EAA0CZ,~~GAAmB~~,IAA3DH,GAAIgB,~~KAAiBC~~,EAAvBR,EAAAM,EAAA,CAAA,OACAG,EAAoCd,~~GAAgB~~,IAAlDJ,GAAImB,~~KAAcC~~,EAApBX,EAAAS,EAAA,CAAA,OACAG,EAAkDf,~~GAAuB~~,IAAvEN,GAAIsB,~~KAAqBC~~,EAA3Bd,EAAAY,EAAA,CAAA,QAECG,EAAaC,EAAiBC,GAAwBC,GAAQ,KACnE,OAAQ7B,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe8B,GACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,GAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,MAEtC,CAAChC,IACEiC,EAAa7B,~~GAAiBwB~~,EAEpC,OACEM,EAACC,EACaC,OAAAC,OAAA,CAAA,cAAA,SACZC,KAAK,QACO,cAAA,OACF,YAAA,YACV7B,QAASA,EACTP,GAAEkC,OAAAC,OAAAD,OAAAC,OAAA,CACAE,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAAT9C,EAAmB,EAAI,CAAEyC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZvB,YAAaA,EACbC,gBAAwC,SAAvBf,EAAMsC,QAAQC,KAAkB,kBAAoBxB,EACrEyB,UAAW,QAEP3C,GAAO2B,OAAAC,OAAA,CACTgB,SAAU,WACVC,OAAQ,WAELC,EAAkB3C,GAAO,EAAM,SAEjCV,GAELJ,IAAKA,GACDY,EAAI,CAAAX,SAAA,CAERmC,EAACC,EACaC,OAAAC,OAAA,CAAA,cAAA,iBACZnC,GAAEkC,OAAAC,OAAA,CAEAmB,SAAU,IACVjB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IACD1B,IAEDC,EAEJ,CAAAvB,SAAA,CAAA0D,EAACxB,EACaG,OAAAC,OAAA,CAAA,cAAA,cACZnC,GACEkC,OAAAC,OAAA,CAAAqB,MAAOhC,GACJX,IAEDC,IAENyC,EAACE,EAAUvB,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAqB,MAAO,eACPF,SAAU,IAEVI,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SACf3C,IAEDC,EAAc,CAAApB,SAEjBA,SAGJQ,GACCkD,EAACtB,EAAGC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GACEkC,OAAAC,OAAA,CAAAE,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELe,WAAY,IAEZC,GAAI,CAAEtB,GAAI,EAAGC,GAAI,GAEjBsB,UAAW,YACRzC,IAEDC,EAEH,CAAA1B,SAAAQ,QAGD"}
1	+ {"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { CircleExclamationFilledIcon } from '@/src/components/icon/filled/CircleExclamationFilledIcon';\nimport { CircleInformationFilledIcon } from '@/src/components/icon/filled/CircleInformationFilledIcon';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { Box, BoxProps, SvgIconProps, Typography, TypographyProps, useTheme } from '@mui/material';\nimport React, { ElementType, forwardRef, ReactNode, useMemo } from 'react';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport interface BannerProps extends BoxProps<ElementType> {\n /*\n Defines which variant of Banner component should be rendered\n * @default info\n /\n variant?: 'info' \| 'warning' \| 'error';\n /\n Set the proportions\n * @default large\n /\n size?: 'large' \| 'small';\n /\n Properties passed to indicator icon\n /\n iconProps?: SvgIconProps;\n /\n Icon node to be used\n /\n IconComponent?: ElementType<SvgIconProps>;\n /\n Properties passed to wrapper of children\n /\n typographyProps?: TypographyProps<ElementType>;\n /\n Properties applied to wrapper of content (Icon and Typography)\n /\n wrapperProps?: BoxProps<ElementType>;\n /\n ReactNode that renders buttons. If multiple buttons are needed, wrap them in React.Fragment\n /\n buttons?: ReactNode;\n /\n Properties applied to wrapper element of buttons\n /\n buttonsWrapperProps?: BoxProps<ElementType>;\n}\n\n/\n Alert notification banner\n */\nexport const Banner: React.FC<BannerProps> = forwardRef(\n (\n {\n children,\n variant = 'info',\n size = 'large',\n sx,\n iconProps,\n IconComponent,\n typographyProps,\n wrapperProps,\n buttons,\n buttonsWrapperProps,\n onClick,\n ...rest\n },\n ref,\n ) => {\n const theme = useTheme();\n const { sx: iconSx, ...restIcon } = iconProps ?? {};\n const { sx: typographySx, ...restTypography } = typographyProps ?? {};\n const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n const { sx: buttonsWrapperSx, ...restButtonsWrapper } = buttonsWrapperProps ?? {};\n\n const [borderColor, backgroundColor, IconVariantComponent] = useMemo(() => {\n switch (variant) {\n case 'error':\n return ['error.main', 'error.light', WarningFilledIcon];\n case 'warning':\n return ['warning.main', 'warning.light', CircleExclamationFilledIcon];\n case 'info':\n default:\n return ['info.main', 'info.light', CircleInformationFilledIcon];\n }\n }, [variant]);\n const BannerIcon = IconComponent ?? IconVariantComponent;\n\n return (\n <Box\n data-testid=\"Banner\"\n role=\"alert\"\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n onClick={onClick}\n sx={{\n display: 'flex',\n width: '100%',\n // on mobile content and button bellow each other\n flexDirection: { xs: 'column', md: 'row' },\n alignItems: { xs: 'flex-start', md: 'center' },\n justifyContent: 'space-between',\n // proportions\n px: 2,\n py: size === 'small' ? 1 : { xs: 2, md: 1 },\n gap: 1,\n // style\n borderLeft: 6,\n borderColor: borderColor,\n backgroundColor: theme.palette.mode === 'dark' ? 'onSurface.os900' : backgroundColor,\n textAlign: 'left',\n // clickable style\n ...(onClick && {\n position: 'relative',\n cursor: 'pointer',\n // focused style\n ...getFocusRingStyle(theme, true, '2px'),\n }),\n ...sx,\n }}\n ref={ref}\n {...rest}\n >\n <Box\n data-testid=\"Banner.wrapper\"\n sx={{\n // align icon and content\n flexGrow: '1',\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n gap: 1,\n py: 0.5,\n ...wrapperSx,\n }}\n {...restWrapper}\n >\n <BannerIcon\n data-testid=\"Banner.icon\"\n sx={{\n color: borderColor,\n ...iconSx,\n }}\n {...restIcon}\n />\n <Typography\n data-testid=\"Banner.text\"\n sx={{\n color: 'text.primary',\n flexGrow: '1',\n // custom font according to Figma\n fontSize: { xl: '16px' },\n lineHeight: { xl: '24px' },\n ...typographySx,\n }}\n {...restTypography}\n >\n {children}\n </Typography>\n </Box>\n {buttons && (\n <Box\n data-testid=\"Banner.buttons\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n // always show buttons next to each other\n flexShrink: '0',\n // on mobile align with text\n ml: { xs: 4, md: 0 },\n // on mobile move to the right side\n alignSelf: 'flex-end',\n ...buttonsWrapperSx,\n }}\n {...restButtonsWrapper}\n >\n {buttons}\n </Box>\n )}\n </Box>\n );\n },\n);\n"],"names":["Banner","forwardRef","_a","ref","children","variant","size","sx","iconProps","IconComponent","typographyProps","wrapperProps","buttons","buttonsWrapperProps","onClick","rest","__rest","theme","useTheme","_b","iconSx","restIcon","_c","typographySx","restTypography","_d","wrapperSx","restWrapper","_e","buttonsWrapperSx","restButtonsWrapper","borderColor","backgroundColor","IconVariantComponent","useMemo","WarningFilledIcon","CircleExclamationFilledIcon","CircleInformationFilledIcon","BannerIcon","_jsxs","Box","Object","assign","role","display","width","flexDirection","xs","md","alignItems","justifyContent","px","py","gap","borderLeft","palette","mode","textAlign","position","cursor","getFocusRingStyle","flexGrow","_jsx","color","Typography","fontSize","xl","lineHeight","flexShrink","ml","alignSelf"],"mappings":"igBA+Ca,MAAAA,EAAgCC,GAC3C,CACEC,EAcAC,KAdA,IAAAC,SACEA,EAAQC,QACRA,EAAU,OAAMC,KAChBA,EAAO,QAAOC,GACdA,EAAEC,UACFA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,aACfA,EAAYC,QACZA,EAAOC,oBACPA,EAAmBC,QACnBA,GAEDZ,EADIa,EAAIC,EAAAd,EAZT,2IAgBA,MAAMe,EAAQC,IACRC,EAA8BX,QAAAA,EAAa,IAAzCD,GAAIa,GAAuCD,EAA5BE,EAAjBL,EAAAG,EAAA,CAAA,OACAG,EAA0CZ,QAAAA,EAAmB,IAA3DH,GAAIgB,GAAyDD,EAAxCE,EAAvBR,EAAAM,EAAA,CAAA,OACAG,EAAoCd,QAAAA,EAAgB,IAAlDJ,GAAImB,GAAgDD,EAAlCE,EAApBX,EAAAS,EAAA,CAAA,OACAG,EAAkDf,QAAAA,EAAuB,IAAvEN,GAAIsB,GAAqED,EAAhDE,EAA3Bd,EAAAY,EAAA,CAAA,QAECG,EAAaC,EAAiBC,GAAwBC,GAAQ,KACnE,OAAQ7B,GACN,IAAK,QACH,MAAO,CAAC,aAAc,cAAe8B,GACvC,IAAK,UACH,MAAO,CAAC,eAAgB,gBAAiBC,GAE3C,QACE,MAAO,CAAC,YAAa,aAAcC,MAEtC,CAAChC,IACEiC,EAAa7B,QAAAA,EAAiBwB,EAEpC,OACEM,EAACC,EACaC,OAAAC,OAAA,CAAA,cAAA,SACZC,KAAK,QACO,cAAA,OACF,YAAA,YACV7B,QAASA,EACTP,GAAEkC,OAAAC,OAAAD,OAAAC,OAAA,CACAE,QAAS,OACTC,MAAO,OAEPC,cAAe,CAAEC,GAAI,SAAUC,GAAI,OACnCC,WAAY,CAAEF,GAAI,aAAcC,GAAI,UACpCE,eAAgB,gBAEhBC,GAAI,EACJC,GAAa,UAAT9C,EAAmB,EAAI,CAAEyC,GAAI,EAAGC,GAAI,GACxCK,IAAK,EAELC,WAAY,EACZvB,YAAaA,EACbC,gBAAwC,SAAvBf,EAAMsC,QAAQC,KAAkB,kBAAoBxB,EACrEyB,UAAW,QAEP3C,GAAO2B,OAAAC,OAAA,CACTgB,SAAU,WACVC,OAAQ,WAELC,EAAkB3C,GAAO,EAAM,SAEjCV,GAELJ,IAAKA,GACDY,EAAI,CAAAX,SAAA,CAERmC,EAACC,EACaC,OAAAC,OAAA,CAAA,cAAA,iBACZnC,GAAEkC,OAAAC,OAAA,CAEAmB,SAAU,IACVjB,QAAS,OACTK,WAAY,aACZC,eAAgB,aAChBG,IAAK,EACLD,GAAI,IACD1B,IAEDC,EAEJ,CAAAvB,SAAA,CAAA0D,EAACxB,EACaG,OAAAC,OAAA,CAAA,cAAA,cACZnC,GACEkC,OAAAC,OAAA,CAAAqB,MAAOhC,GACJX,IAEDC,IAENyC,EAACE,EAAUvB,OAAAC,OAAA,CAAA,cACG,cACZnC,GAAEkC,OAAAC,OAAA,CACAqB,MAAO,eACPF,SAAU,IAEVI,SAAU,CAAEC,GAAI,QAChBC,WAAY,CAAED,GAAI,SACf3C,IAEDC,EAAc,CAAApB,SAEjBA,SAGJQ,GACCkD,EAACtB,EAAGC,OAAAC,OAAA,CAAA,cACU,iBACZnC,GACEkC,OAAAC,OAAA,CAAAE,QAAS,OACTK,WAAY,SACZC,eAAgB,gBAChBG,IAAK,EAELe,WAAY,IAEZC,GAAI,CAAEtB,GAAI,EAAGC,GAAI,GAEjBsB,UAAW,YACRzC,IAEDC,EAEH,CAAA1B,SAAAQ,QAGD"}

package/components/banner/index.d.ts CHANGED Viewed

@@ -1 +1,3 @@
 export * from './banner';
+export * from './BannerButton';
+export * from './BannerDismissButton';

package/components/cardMenu/cardMenu.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import React, { HTMLAttributes } from 'react';
+import { SxProps, Theme } from '@mui/material';
 import { IconNameProp } from '../icon';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 import { Placement } from '../../utils/enum';
 /**
  * @interface CardMenuItem

package/components/cardMenu/cardMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cardMenu.js","sources":["../../../src/components/cardMenu/cardMenu.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from 'react';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport {\n List,\n ListItem,\n ListItemButton,\n ListItemIcon,\n ListItemText,\n MenuItem,\n ClickAwayListener,\n Divider,\n} from '@mui/material';\nimport { Icon, IconNameProp } from '../icon';\nimport { Checkbox } from '../checkbox';\nimport { SxProps } from '@mui/system';\nimport { Theme } from '@mui/material/styles';\nimport { Placement } from '../../utils/enum';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { useCardMenu } from './hooks/useCardMenu';\nimport { PopperStyled } from './styled/popperStyled';\nimport { MenuListStyled } from './styled/menuListStyled';\nimport { DrawerStyled } from './styled/drawerStyled';\n\n/*\n @interface CardMenuItem\n * @description The interface describing the object that has to be provided to the array property 'items' in CardMenu component.\n * If url is provided the menuItem becomes link.\n /\nexport interface CardMenuItem {\n text: string;\n callback?: () => void;\n disabled?: boolean;\n icon?: IconNameProp;\n isChecked?: boolean;\n url?: string;\n target?: string;\n}\n/\n @type CardMenuItemsArray\n * @description Array of CardMenuItem.\n /\nexport type CardMenuItemsArray = Array<CardMenuItem>;\n\n/\n @interface CardMenuProps\n * @description Base definition of SkodaFlow CardMenu independent on core implementation.\n * Properties are inherited from HTML Div element.\n /\nexport interface CardMenuProps extends HTMLAttributes<HTMLDivElement> {\n /\n If true the drawer is shown.\n /\n open: boolean;\n /\n The content of the component.\n /\n items: CardMenuItemsArray;\n /\n React useState hook set function used to update the passed items to the component.\n /\n setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;\n /\n Callback fired when the component requests to be closed.\n /\n onClose: () => void;\n /\n An HTML element used to set the position of the popper.\n /\n anchorRef: React.RefObject<HTMLElement>;\n /\n If header is provided, a text will be displayed on top of the elements.\n /\n header?: string;\n /\n If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.\n * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..\n /\n allowMultiselect?: boolean;\n /\n Callback fired when item is clicked.\n /\n onItemClick?: (itemText: string) => void;\n /\n The system prop that allows defining system overrides as well as additional CSS styles.\n /\n sx?: SxProps<Theme>;\n /\n Override or extend the styles applied to the component.\n /\n classes?: object;\n /\n Popper placement. Default is 'bottom'.\n /\n placement?: Placement;\n /\n If true, a switch button is added to the items allowing to select or deselect all of the items.\n * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.\n /\n hasToggleSelection?: boolean;\n /\n The toggle label displayed when groupToggleSelection is true. Default is \"Select all\".\n /\n toggleLabel?: string;\n /* Renders the popper with border radius /\n rounded?: boolean;\n}\n\n/* @deprecated Use Menu component from @mui/material */\nexport const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(\n (\n {\n items,\n setItems,\n open,\n header,\n anchorRef,\n allowMultiselect,\n hasToggleSelection,\n onItemClick,\n onClose,\n sx,\n classes,\n placement,\n toggleLabel,\n rounded,\n },\n ref,\n ) => {\n const { isMobile } = useWindowSize();\n const { isToggleChecked, onClickHandler, onToggleChange } = useCardMenu(\n items,\n allowMultiselect,\n setItems,\n onItemClick,\n onClose,\n );\n\n return (\n <>\n {isMobile ? (\n <DrawerStyled\n open={open}\n onClose={onClose}\n anchor=\"bottom\"\n sx={sx}\n ref={ref}\n classes={classes}\n hasHeader={!!header}\n data-testid=\"CardMenu\"\n >\n {header && (\n <div className=\"drawer-header\" data-testid=\"CardMenu.header\">\n {header}\n </div>\n )}\n <List>\n {items.map((item) => {\n return (\n <React.Fragment key={item.text}>\n <ListItem\n data-testid=\"CardMenu.item\"\n data-state={item.disabled ? 'disabled' : undefined}\n disableGutters\n >\n <ListItemButton disabled={item.disabled} onClick={() => onClickHandler(item)}>\n {item.icon && (\n <ListItemIcon>\n <Icon name={item.icon} fontSize=\"small\" />\n </ListItemIcon>\n )}\n <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n {allowMultiselect && (\n <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n )}\n </ListItemButton>\n </ListItem>\n <Divider variant=\"middle\" />\n </React.Fragment>\n );\n })}\n </List>\n </DrawerStyled>\n ) : (\n <PopperStyled\n open={open}\n anchorEl={anchorRef.current}\n placement={placement}\n ref={ref}\n rounded={rounded}\n data-testid=\"CardMenu\"\n >\n <ClickAwayListener onClickAway={onClose}>\n <MenuListStyled allowMultiselect={allowMultiselect} sx={sx} classes={classes}>\n {header && (\n <MenuItem className=\"menu-item-header\" data-testid=\"CardMenu.header\">\n <ListItemText primaryTypographyProps={{ noWrap: true }} primary={header} />\n <ListItemIcon onClick={onClose} data-testid=\"CardMenu.close\">\n <Icon name=\"close\" fontSize=\"small\" />\n </ListItemIcon>\n </MenuItem>\n )}\n {header && <Divider variant=\"middle\" className=\"menu-item-divider\" />}\n {allowMultiselect && hasToggleSelection && (\n <MenuItem className=\"menu-select-all\" data-testid=\"CardMenu.toggle\">\n <ListItemText\n primaryTypographyProps={{ noWrap: true }}\n primary={toggleLabel ? toggleLabel : 'Select all'}\n />\n <ToggleSwitch onChange={onToggleChange} checked={isToggleChecked} compact />\n </MenuItem>\n )}\n\n <div className=\"menu-content-items\">\n {items.map((item) => {\n return (\n <MenuItem\n key={item.text}\n disabled={item.disabled}\n onClick={() => onClickHandler(item)}\n data-testid=\"CardMenu.item\"\n data-state={item.disabled ? 'disabled' : undefined}\n >\n {item.icon && (\n <ListItemIcon>\n <Icon name={item.icon} fontSize=\"small\" />\n </ListItemIcon>\n )}\n <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n {allowMultiselect && (\n <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n )}\n </MenuItem>\n );\n })}\n </div>\n </MenuListStyled>\n </ClickAwayListener>\n </PopperStyled>\n )}\n </>\n );\n },\n);\n"],"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","disabled","undefined","disableGutters","ListItemButton","onClick","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":"gtBA4Ga,MAAAA,EAAWC,GACtB,EAEIC,QACAC,WACAC,OACAC,SACAC,YACAC,mBACAC,qBACAC,cACAC,UACAC,KACAC,UACAC,YACAC,cACAC,WAEFC,KAEA,MAAMC,SAAEA,GAAaC,KACfC,gBAAEA,EAAeC,eAAEA,EAAcC,eAAEA,GAAmBC,EAC1DpB,EACAK,EACAJ,EACAM,EACAC,GAGF,OACEa,EAAAC,EAAA,CAAAC,SACGR,EACCS,EAACC,EAAY,CACXvB,KAAMA,EACNM,QAASA,EACTkB,OAAO,SACPjB,GAAIA,EACJK,IAAKA,EACLJ,QAASA,EACTiB,YAAaxB,EACD,cAAA,WAEXoB,SAAA,CAAApB,GACCkB,EAAK,MAAA,CAAAO,UAAU,gBAAe,cAAa,kBAAiBL,SACzDpB,IAGLkB,EAACQ,EAAI,CAAAN,SACFvB,EAAM8B,KAAKC,GAERP,EAACQ,EAAMC,SACL,CAAAV,SAAA,CAAAF,EAACa,EAAQ,CAAA,cACK,gBAAe,aACfH,EAAKI,SAAW,gBAAaC,EACzCC,gBAAc,EAAAd,SAEdC,EAACc,EAAe,CAAAH,SAAUJ,EAAKI,SAAUI,QAAS,IAAMrB,EAAea,GACpER,SAAA,CAAAQ,EAAKS,MACJnB,EAACoB,EACC,CAAAlB,SAAAF,EAACqB,EAAI,CAACC,KAAMZ,EAAKS,KAAMI,SAAS,YAGpCvB,EAACwB,EAAY,CAACC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASjB,EAAKkB,OACrE5C,GACCgB,EAAC6B,EAAS,CAAAC,QAASpB,EAAKqB,UAAWjB,SAAUJ,EAAKI,SAAsB,cAAA,wBAI9Ed,EAACgC,EAAO,CAACC,QAAQ,aAlBEvB,EAAKkB,aAyBlC5B,EAACkC,GACCrD,KAAMA,EACNsD,SAAUpD,EAAUqD,QACpB9C,UAAWA,EACXG,IAAKA,EACLD,QAASA,EACG,cAAA,oBAEZQ,EAACqC,GAAkBC,YAAanD,EAC9Be,SAAAC,EAACoC,EAAe,CAAAvD,iBAAkBA,EAAkBI,GAAIA,EAAIC,QAASA,EAClEa,SAAA,CAAApB,GACCqB,EAACqC,EAAS,CAAAjC,UAAU,mBAAkB,cAAa,kBACjDL,SAAA,CAAAF,EAACwB,EAAa,CAAAC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAS7C,IACjEkB,EAACoB,EAAY,CAACF,QAAS/B,gBAAqB,iBAAgBe,SAC1DF,EAACqB,EAAI,CAACC,KAAK,QAAQC,SAAS,eAIjCzC,GAAUkB,EAACgC,EAAQ,CAAAC,QAAQ,SAAS1B,UAAU,sBAC9CvB,GAAoBC,GACnBkB,EAACqC,GAASjC,UAAU,kBAA8B,cAAA,4BAChDP,EAACwB,GACCC,uBAAwB,CAAEC,QAAQ,GAClCC,QAASpC,GAA4B,eAEvCS,EAACyC,GAAaC,SAAU5C,EAAgBgC,QAASlC,EAAiB+C,SAAU,OAIhF3C,EAAA,MAAA,CAAKO,UAAU,8BACZ5B,EAAM8B,KAAKC,GAERP,EAACqC,EAAQ,CAEP1B,SAAUJ,EAAKI,SACfI,QAAS,IAAMrB,EAAea,GAAK,cACvB,gBAAe,aACfA,EAAKI,SAAW,gBAAaC,EAExCb,SAAA,CAAAQ,EAAKS,MACJnB,EAACoB,EAAY,CAAAlB,SACXF,EAACqB,GAAKC,KAAMZ,EAAKS,KAAMI,SAAS,YAGpCvB,EAACwB,EAAa,CAAAC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASjB,EAAKkB,OACrE5C,GACCgB,EAAC6B,GAASC,QAASpB,EAAKqB,UAAWjB,SAAUJ,EAAKI,SAAQ,cAAc,qBAbrEJ,EAAKkB,kBAuBzB"}
1	+ {"version":3,"file":"cardMenu.js","sources":["../../../src/components/cardMenu/cardMenu.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from 'react';\nimport useWindowSize from '../common/hook/useWindowSize';\nimport {\n List,\n ListItem,\n ListItemButton,\n ListItemIcon,\n ListItemText,\n MenuItem,\n ClickAwayListener,\n Divider,\n SxProps,\n Theme,\n} from '@mui/material';\nimport { Icon, IconNameProp } from '../icon';\nimport { Checkbox } from '../checkbox';\nimport { Placement } from '../../utils/enum';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { useCardMenu } from './hooks/useCardMenu';\nimport { PopperStyled } from './styled/popperStyled';\nimport { MenuListStyled } from './styled/menuListStyled';\nimport { DrawerStyled } from './styled/drawerStyled';\n\n/*\n @interface CardMenuItem\n * @description The interface describing the object that has to be provided to the array property 'items' in CardMenu component.\n * If url is provided the menuItem becomes link.\n /\nexport interface CardMenuItem {\n text: string;\n callback?: () => void;\n disabled?: boolean;\n icon?: IconNameProp;\n isChecked?: boolean;\n url?: string;\n target?: string;\n}\n/\n @type CardMenuItemsArray\n * @description Array of CardMenuItem.\n /\nexport type CardMenuItemsArray = Array<CardMenuItem>;\n\n/\n @interface CardMenuProps\n * @description Base definition of SkodaFlow CardMenu independent on core implementation.\n * Properties are inherited from HTML Div element.\n /\nexport interface CardMenuProps extends HTMLAttributes<HTMLDivElement> {\n /\n If true the drawer is shown.\n /\n open: boolean;\n /\n The content of the component.\n /\n items: CardMenuItemsArray;\n /\n React useState hook set function used to update the passed items to the component.\n /\n setItems?: React.Dispatch<React.SetStateAction<CardMenuItemsArray>>;\n /\n Callback fired when the component requests to be closed.\n /\n onClose: () => void;\n /\n An HTML element used to set the position of the popper.\n /\n anchorRef: React.RefObject<HTMLElement>;\n /\n If header is provided, a text will be displayed on top of the elements.\n /\n header?: string;\n /\n If true, multiple item select will be enabled. Property 'setItems' must be provided in order allowMultiselect to work.\n * Items: CardMenuItemsArray provided to the component must have isChecked propery provided in order allowMultiselect to work..\n /\n allowMultiselect?: boolean;\n /\n Callback fired when item is clicked.\n /\n onItemClick?: (itemText: string) => void;\n /\n The system prop that allows defining system overrides as well as additional CSS styles.\n /\n sx?: SxProps<Theme>;\n /\n Override or extend the styles applied to the component.\n /\n classes?: object;\n /\n Popper placement. Default is 'bottom'.\n /\n placement?: Placement;\n /\n If true, a switch button is added to the items allowing to select or deselect all of the items.\n * Property allowMultiselect should be true in order hasToggleSelection to work. Only available for the desktop version of the MenuCard.\n /\n hasToggleSelection?: boolean;\n /\n The toggle label displayed when groupToggleSelection is true. Default is \"Select all\".\n /\n toggleLabel?: string;\n /* Renders the popper with border radius /\n rounded?: boolean;\n}\n\n/* @deprecated Use Menu component from @mui/material */\nexport const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(\n (\n {\n items,\n setItems,\n open,\n header,\n anchorRef,\n allowMultiselect,\n hasToggleSelection,\n onItemClick,\n onClose,\n sx,\n classes,\n placement,\n toggleLabel,\n rounded,\n },\n ref,\n ) => {\n const { isMobile } = useWindowSize();\n const { isToggleChecked, onClickHandler, onToggleChange } = useCardMenu(\n items,\n allowMultiselect,\n setItems,\n onItemClick,\n onClose,\n );\n\n return (\n <>\n {isMobile ? (\n <DrawerStyled\n open={open}\n onClose={onClose}\n anchor=\"bottom\"\n sx={sx}\n ref={ref}\n classes={classes}\n hasHeader={!!header}\n data-testid=\"CardMenu\"\n >\n {header && (\n <div className=\"drawer-header\" data-testid=\"CardMenu.header\">\n {header}\n </div>\n )}\n <List>\n {items.map((item) => {\n return (\n <React.Fragment key={item.text}>\n <ListItem\n data-testid=\"CardMenu.item\"\n data-state={item.disabled ? 'disabled' : undefined}\n disableGutters\n >\n <ListItemButton disabled={item.disabled} onClick={() => onClickHandler(item)}>\n {item.icon && (\n <ListItemIcon>\n <Icon name={item.icon} fontSize=\"small\" />\n </ListItemIcon>\n )}\n <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n {allowMultiselect && (\n <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n )}\n </ListItemButton>\n </ListItem>\n <Divider variant=\"middle\" />\n </React.Fragment>\n );\n })}\n </List>\n </DrawerStyled>\n ) : (\n <PopperStyled\n open={open}\n anchorEl={anchorRef.current}\n placement={placement}\n ref={ref}\n rounded={rounded}\n data-testid=\"CardMenu\"\n >\n <ClickAwayListener onClickAway={onClose}>\n <MenuListStyled allowMultiselect={allowMultiselect} sx={sx} classes={classes}>\n {header && (\n <MenuItem className=\"menu-item-header\" data-testid=\"CardMenu.header\">\n <ListItemText primaryTypographyProps={{ noWrap: true }} primary={header} />\n <ListItemIcon onClick={onClose} data-testid=\"CardMenu.close\">\n <Icon name=\"close\" fontSize=\"small\" />\n </ListItemIcon>\n </MenuItem>\n )}\n {header && <Divider variant=\"middle\" className=\"menu-item-divider\" />}\n {allowMultiselect && hasToggleSelection && (\n <MenuItem className=\"menu-select-all\" data-testid=\"CardMenu.toggle\">\n <ListItemText\n primaryTypographyProps={{ noWrap: true }}\n primary={toggleLabel ? toggleLabel : 'Select all'}\n />\n <ToggleSwitch onChange={onToggleChange} checked={isToggleChecked} compact />\n </MenuItem>\n )}\n\n <div className=\"menu-content-items\">\n {items.map((item) => {\n return (\n <MenuItem\n key={item.text}\n disabled={item.disabled}\n onClick={() => onClickHandler(item)}\n data-testid=\"CardMenu.item\"\n data-state={item.disabled ? 'disabled' : undefined}\n >\n {item.icon && (\n <ListItemIcon>\n <Icon name={item.icon} fontSize=\"small\" />\n </ListItemIcon>\n )}\n <ListItemText primaryTypographyProps={{ noWrap: true }} primary={item.text} />\n {allowMultiselect && (\n <Checkbox checked={item.isChecked} disabled={item.disabled} data-testid=\"CardMenu.check\" />\n )}\n </MenuItem>\n );\n })}\n </div>\n </MenuListStyled>\n </ClickAwayListener>\n </PopperStyled>\n )}\n </>\n );\n },\n);\n"],"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","disabled","undefined","disableGutters","ListItemButton","onClick","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":"gtBA4Ga,MAAAA,EAAWC,GACtB,EAEIC,QACAC,WACAC,OACAC,SACAC,YACAC,mBACAC,qBACAC,cACAC,UACAC,KACAC,UACAC,YACAC,cACAC,WAEFC,KAEA,MAAMC,SAAEA,GAAaC,KACfC,gBAAEA,EAAeC,eAAEA,EAAcC,eAAEA,GAAmBC,EAC1DpB,EACAK,EACAJ,EACAM,EACAC,GAGF,OACEa,EAAAC,EAAA,CAAAC,SACGR,EACCS,EAACC,EAAY,CACXvB,KAAMA,EACNM,QAASA,EACTkB,OAAO,SACPjB,GAAIA,EACJK,IAAKA,EACLJ,QAASA,EACTiB,YAAaxB,EACD,cAAA,WAEXoB,SAAA,CAAApB,GACCkB,EAAK,MAAA,CAAAO,UAAU,gBAAe,cAAa,kBAAiBL,SACzDpB,IAGLkB,EAACQ,EAAI,CAAAN,SACFvB,EAAM8B,KAAKC,GAERP,EAACQ,EAAMC,SACL,CAAAV,SAAA,CAAAF,EAACa,EAAQ,CAAA,cACK,gBAAe,aACfH,EAAKI,SAAW,gBAAaC,EACzCC,gBAAc,EAAAd,SAEdC,EAACc,EAAe,CAAAH,SAAUJ,EAAKI,SAAUI,QAAS,IAAMrB,EAAea,GACpER,SAAA,CAAAQ,EAAKS,MACJnB,EAACoB,EACC,CAAAlB,SAAAF,EAACqB,EAAI,CAACC,KAAMZ,EAAKS,KAAMI,SAAS,YAGpCvB,EAACwB,EAAY,CAACC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASjB,EAAKkB,OACrE5C,GACCgB,EAAC6B,EAAS,CAAAC,QAASpB,EAAKqB,UAAWjB,SAAUJ,EAAKI,SAAsB,cAAA,wBAI9Ed,EAACgC,EAAO,CAACC,QAAQ,aAlBEvB,EAAKkB,aAyBlC5B,EAACkC,GACCrD,KAAMA,EACNsD,SAAUpD,EAAUqD,QACpB9C,UAAWA,EACXG,IAAKA,EACLD,QAASA,EACG,cAAA,oBAEZQ,EAACqC,GAAkBC,YAAanD,EAC9Be,SAAAC,EAACoC,EAAe,CAAAvD,iBAAkBA,EAAkBI,GAAIA,EAAIC,QAASA,EAClEa,SAAA,CAAApB,GACCqB,EAACqC,EAAS,CAAAjC,UAAU,mBAAkB,cAAa,kBACjDL,SAAA,CAAAF,EAACwB,EAAa,CAAAC,uBAAwB,CAAEC,QAAQ,GAAQC,QAAS7C,IACjEkB,EAACoB,EAAY,CAACF,QAAS/B,gBAAqB,iBAAgBe,SAC1DF,EAACqB,EAAI,CAACC,KAAK,QAAQC,SAAS,eAIjCzC,GAAUkB,EAACgC,EAAQ,CAAAC,QAAQ,SAAS1B,UAAU,sBAC9CvB,GAAoBC,GACnBkB,EAACqC,GAASjC,UAAU,kBAA8B,cAAA,4BAChDP,EAACwB,GACCC,uBAAwB,CAAEC,QAAQ,GAClCC,QAASpC,GAA4B,eAEvCS,EAACyC,GAAaC,SAAU5C,EAAgBgC,QAASlC,EAAiB+C,SAAU,OAIhF3C,EAAA,MAAA,CAAKO,UAAU,8BACZ5B,EAAM8B,KAAKC,GAERP,EAACqC,EAAQ,CAEP1B,SAAUJ,EAAKI,SACfI,QAAS,IAAMrB,EAAea,GAAK,cACvB,gBAAe,aACfA,EAAKI,SAAW,gBAAaC,EAExCb,SAAA,CAAAQ,EAAKS,MACJnB,EAACoB,EAAY,CAAAlB,SACXF,EAACqB,GAAKC,KAAMZ,EAAKS,KAAMI,SAAS,YAGpCvB,EAACwB,EAAa,CAAAC,uBAAwB,CAAEC,QAAQ,GAAQC,QAASjB,EAAKkB,OACrE5C,GACCgB,EAAC6B,GAASC,QAASpB,EAAKqB,UAAWjB,SAAUJ,EAAKI,SAAQ,cAAc,qBAbrEJ,EAAKkB,kBAuBzB"}

package/components/cardMenu/styled/drawerStyled.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export declare const DrawerStyled: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
+export declare const DrawerStyled: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     hasHeader: boolean;
 }, {}, {}>;

package/components/cardMenu/styled/drawerStyled.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{styled as i}from"@mui/system";import{Drawer as e}from"@mui/material";const o=i(e,{shouldForwardProp:i=>"hasHeader"!==i})((({theme:i,hasHeader:e})=>({"& .MuiPaper-root > .MuiList-root":{fontSize:"16px",fontWeight:400,paddingBottom:"32px",listStyleType:"none",maxHeight:"201px",marginTop:e?"9px":"0px","& > .MuiListItem-root":{lineHeight:"24px",padding:"23px 16px 11px 16px",display:"flex","&:hover":{background:i.palette.surface.primary},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"8px","& > .MuiIcon-root":{color:i.palette.text.primary,display:"inline"}},"& > .MuiTypography-root":{flex:1}}},".MuiPaper-root > .drawer-header":{padding:"16px 16px 0px 16px",fontWeight:"bold",lineHeight:"24px",fontSize:"20px",wordBreak:"break-all"},"& > .MuiPaper-root":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}})));export{o as DrawerStyled};
+import{styled as i}from"@mui/material/styles";import{Drawer as e}from"@mui/material";const o=i(e,{shouldForwardProp:i=>"hasHeader"!==i})((({theme:i,hasHeader:e})=>({"& .MuiPaper-root > .MuiList-root":{fontSize:"16px",fontWeight:400,paddingBottom:"32px",listStyleType:"none",maxHeight:"201px",marginTop:e?"9px":"0px","& > .MuiListItem-root":{lineHeight:"24px",padding:"23px 16px 11px 16px",display:"flex","&:hover":{background:i.palette.surface.primary},"& > .MuiListItemIcon-root":{display:"inline-block",lineHeight:"21px",minWidth:"unset",width:"20px",marginRight:"8px","& > .MuiIcon-root":{color:i.palette.text.primary,display:"inline"}},"& > .MuiTypography-root":{flex:1}}},".MuiPaper-root > .drawer-header":{padding:"16px 16px 0px 16px",fontWeight:"bold",lineHeight:"24px",fontSize:"20px",wordBreak:"break-all"},"& > .MuiPaper-root":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}})));export{o as DrawerStyled};
 //# sourceMappingURL=drawerStyled.js.map