@skodaflow/web-library 7.13.1 → 7.15.0

package/organisms/carousel2/galleryCarousel/galleryCarouselItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"galleryCarouselItem.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarouselItem.tsx"],"sourcesContent":["import { Box, useTheme } from '@mui/system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryItemContext } from './galleryItemContext';\nimport { Stack, Theme, useMediaQuery } from '@mui/material';\n\ntype FitType = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';\n\nexport type GalleryCarouselItemProps = {\n  /**\n   * Link to image that should be displayed. This property can be responsive.\n   * @requires\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageSrc=\"../image.png\"/>\n   * <GalleryCarouselItem imageSrc={{\n   *    xs: \"../xs-image.png\",\n   *    sm: \"../sm-image.png\",\n   *    md: \"../md-image.png\",\n   *    lg: \"../lg-image.png\",\n   *    xl: \"../xl-image.png\"\n   * }}/>\n   * ```\n   */\n  imageSrc: ResponsiveType<string>;\n  /**\n   * Css `object-fit` property\n   * @default cover\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageFit=\"contain\"/>\n   * <GalleryCarouselItem imageFit={{\n   *    xs: \"contain\",\n   *    sm: \"cover\",\n   *    md: \"fill\",\n   *    lg: \"contain\",\n   *    xl: \"cover\"\n   * }}/>\n   * ```\n   */\n  imageFit?: ResponsiveType<FitType>;\n  /**\n   * Alternative text of image.\n   */\n  alt?: string;\n  /**\n   * Header content of an Slide. This can be any ReactNode, however `GalleryItemHeading` component is recommended.\n   */\n  header?: React.ReactNode;\n  /**\n   * Footer content of an Slide. This can be any ReactNode, however `GalleryItemFooter` component is recommended.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Width of an slide\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem width=\"200px\"/>\n   * ```\n   */\n  width?: string;\n  /**\n   * Color that `header` and `footer` should have when overlapping rendered image.\n   * @default dark\n   */\n  color?: 'dark' | 'light';\n};\n\nexport const GalleryCarouselItem: React.FC<GalleryCarouselItemProps> = (props) => {\n  const theme = useTheme();\n\n  const imageSrc = useResponsiveProp(props.imageSrc);\n  const imageFit = useResponsiveProp(props.imageFit);\n\n  const [pictureHeight, setPictureHeight] = useState<string>('inherit');\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isSm = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('sm'));\n  const isXs = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('xs'));\n\n  const updatePictureHeight = useCallback(() => {\n    if (isSm || isXs) {\n      const containerHeight = containerRef.current.clientHeight ?? 0;\n      const headerHeight = headerRef.current?.clientHeight ?? 0;\n      const footerHeight = footerRef.current?.clientHeight ?? 0;\n      const h = containerHeight - (headerHeight + footerHeight);\n      setPictureHeight(`${h < 0 ? 0 : h}px`);\n    } else {\n      setPictureHeight('inherit');\n    }\n  }, [isSm, isXs, setPictureHeight]);\n\n  useEffect(updatePictureHeight, [updatePictureHeight]);\n\n  useEffect(() => {\n    const e = () => updatePictureHeight();\n    window.addEventListener('resize', e);\n    return () => window.removeEventListener('resize', e);\n  }, [updatePictureHeight]);\n\n  return (\n    <GalleryItemContext.Provider value={{ color: props.color ?? 'dark' }}>\n      <Box\n        sx={{\n          flexBasis: props.width ?? '100%',\n          maxWidth: props.width ?? '100%',\n        }}\n        data-testid=\"Carousel.slide\"\n      >\n        <Box\n          ref={containerRef}\n          sx={{\n            position: 'relative',\n            width: props.width ?? '100%',\n            height: '100%',\n          }}\n        >\n          {props.header && (\n            <Stack\n              ref={headerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                padding: '24px',\n                zIndex: 2,\n                top: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.header}\n            </Stack>\n          )}\n\n          <Box\n            component=\"picture\"\n            sx={{\n              display: 'flex',\n              position: 'relative',\n              height: pictureHeight,\n              ...shadowStyle,\n            }}\n          >\n            <source media={`(min-width: ${theme.breakpoints.values.xl}px)`} srcSet={imageSrc.xl} />\n            <source media={`(min-width: ${theme.breakpoints.values.lg}px)`} srcSet={imageSrc.lg} />\n            <source media={`(min-width: ${theme.breakpoints.values.md}px)`} srcSet={imageSrc.md} />\n            <source media={`(min-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.sm} />\n            <source media={`(max-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.xs} />\n            <Box\n              component=\"img\"\n              sx={{\n                height: '100%',\n                width: '100%',\n                objectFit: imageFit ?? 'cover',\n              }}\n              src={imageSrc.xs}\n              alt={props.alt}\n            />\n          </Box>\n\n          {props.footer && (\n            <Stack\n              ref={footerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                paddingRight: { md: '150px' },\n                padding: '24px',\n                zIndex: 1,\n                bottom: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.footer}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    </GalleryItemContext.Provider>\n  );\n};\n\nconst shadowStyle = {\n  '&::before, &::after': {\n    content: \"''\",\n    display: 'block',\n    zIndex: 1,\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    height: '30%',\n  },\n  '::before': {\n    top: '0',\n    background: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n  '::after': {\n    bottom: '0',\n    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n};\n"],"names":["GalleryCarouselItem","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","pictureHeight","setPictureHeight","useState","headerRef","useRef","footerRef","containerRef","isSm","useMediaQuery","themeA","breakpoints","only","isXs","updatePictureHeight","useCallback","h","_a","current","clientHeight","_c","_b","_e","_d","useEffect","e","window","addEventListener","removeEventListener","_jsx","GalleryItemContext","Provider","value","color","Box","sx","flexBasis","width","maxWidth","children","_jsxs","ref","position","height","header","Stack","direction","spacing","sm","md","padding","zIndex","top","right","left","component","Object","assign","display","shadowStyle","media","values","xl","srcSet","lg","xs","objectFit","src","alt","footer","paddingRight","bottom","content","background"],"mappings":"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"}
+{"version":3,"file":"galleryCarouselItem.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarouselItem.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryItemContext } from './galleryItemContext';\nimport { Box, useTheme, Stack, Theme, useMediaQuery } from '@mui/material';\n\ntype FitType = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';\n\nexport type GalleryCarouselItemProps = {\n  /**\n   * Link to image that should be displayed. This property can be responsive.\n   * @requires\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageSrc=\"../image.png\"/>\n   * <GalleryCarouselItem imageSrc={{\n   *    xs: \"../xs-image.png\",\n   *    sm: \"../sm-image.png\",\n   *    md: \"../md-image.png\",\n   *    lg: \"../lg-image.png\",\n   *    xl: \"../xl-image.png\"\n   * }}/>\n   * ```\n   */\n  imageSrc: ResponsiveType<string>;\n  /**\n   * Css `object-fit` property\n   * @default cover\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem imageFit=\"contain\"/>\n   * <GalleryCarouselItem imageFit={{\n   *    xs: \"contain\",\n   *    sm: \"cover\",\n   *    md: \"fill\",\n   *    lg: \"contain\",\n   *    xl: \"cover\"\n   * }}/>\n   * ```\n   */\n  imageFit?: ResponsiveType<FitType>;\n  /**\n   * Alternative text of image.\n   */\n  alt?: string;\n  /**\n   * Header content of an Slide. This can be any ReactNode, however `GalleryItemHeading` component is recommended.\n   */\n  header?: React.ReactNode;\n  /**\n   * Footer content of an Slide. This can be any ReactNode, however `GalleryItemFooter` component is recommended.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Width of an slide\n   * @example\n   * ```tsx\n   * <GalleryCarouselItem width=\"200px\"/>\n   * ```\n   */\n  width?: string;\n  /**\n   * Color that `header` and `footer` should have when overlapping rendered image.\n   * @default dark\n   */\n  color?: 'dark' | 'light';\n};\n\nexport const GalleryCarouselItem: React.FC<GalleryCarouselItemProps> = (props) => {\n  const theme = useTheme();\n\n  const imageSrc = useResponsiveProp(props.imageSrc);\n  const imageFit = useResponsiveProp(props.imageFit);\n\n  const [pictureHeight, setPictureHeight] = useState<string>('inherit');\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isSm = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('sm'));\n  const isXs = useMediaQuery<Theme>((themeA) => themeA.breakpoints.only('xs'));\n\n  const updatePictureHeight = useCallback(() => {\n    if (isSm || isXs) {\n      const containerHeight = containerRef.current.clientHeight ?? 0;\n      const headerHeight = headerRef.current?.clientHeight ?? 0;\n      const footerHeight = footerRef.current?.clientHeight ?? 0;\n      const h = containerHeight - (headerHeight + footerHeight);\n      setPictureHeight(`${h < 0 ? 0 : h}px`);\n    } else {\n      setPictureHeight('inherit');\n    }\n  }, [isSm, isXs, setPictureHeight]);\n\n  useEffect(updatePictureHeight, [updatePictureHeight]);\n\n  useEffect(() => {\n    const e = () => updatePictureHeight();\n    window.addEventListener('resize', e);\n    return () => window.removeEventListener('resize', e);\n  }, [updatePictureHeight]);\n\n  return (\n    <GalleryItemContext.Provider value={{ color: props.color ?? 'dark' }}>\n      <Box\n        sx={{\n          flexBasis: props.width ?? '100%',\n          maxWidth: props.width ?? '100%',\n        }}\n        data-testid=\"Carousel.slide\"\n      >\n        <Box\n          ref={containerRef}\n          sx={{\n            position: 'relative',\n            width: props.width ?? '100%',\n            height: '100%',\n          }}\n        >\n          {props.header && (\n            <Stack\n              ref={headerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                padding: '24px',\n                zIndex: 2,\n                top: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.header}\n            </Stack>\n          )}\n\n          <Box\n            component=\"picture\"\n            sx={{\n              display: 'flex',\n              position: 'relative',\n              height: pictureHeight,\n              ...shadowStyle,\n            }}\n          >\n            <source media={`(min-width: ${theme.breakpoints.values.xl}px)`} srcSet={imageSrc.xl} />\n            <source media={`(min-width: ${theme.breakpoints.values.lg}px)`} srcSet={imageSrc.lg} />\n            <source media={`(min-width: ${theme.breakpoints.values.md}px)`} srcSet={imageSrc.md} />\n            <source media={`(min-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.sm} />\n            <source media={`(max-width: ${theme.breakpoints.values.sm}px)`} srcSet={imageSrc.xs} />\n            <Box\n              component=\"img\"\n              sx={{\n                height: '100%',\n                width: '100%',\n                objectFit: imageFit ?? 'cover',\n              }}\n              src={imageSrc.xs}\n              alt={props.alt}\n            />\n          </Box>\n\n          {props.footer && (\n            <Stack\n              ref={footerRef}\n              direction=\"column\"\n              spacing={2}\n              sx={{\n                position: { sm: 'static', md: 'absolute' },\n                paddingRight: { md: '150px' },\n                padding: '24px',\n                zIndex: 1,\n                bottom: 0,\n                right: 0,\n                left: 0,\n              }}\n            >\n              {props.footer}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    </GalleryItemContext.Provider>\n  );\n};\n\nconst shadowStyle = {\n  '&::before, &::after': {\n    content: \"''\",\n    display: 'block',\n    zIndex: 1,\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    height: '30%',\n  },\n  '::before': {\n    top: '0',\n    background: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n  '::after': {\n    bottom: '0',\n    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)',\n  },\n};\n"],"names":["GalleryCarouselItem","props","theme","useTheme","imageSrc","useResponsiveProp","imageFit","pictureHeight","setPictureHeight","useState","headerRef","useRef","footerRef","containerRef","isSm","useMediaQuery","themeA","breakpoints","only","isXs","updatePictureHeight","useCallback","h","_a","current","clientHeight","_c","_b","_e","_d","useEffect","e","window","addEventListener","removeEventListener","_jsx","GalleryItemContext","Provider","value","color","Box","sx","flexBasis","width","maxWidth","children","_jsxs","ref","position","height","header","Stack","direction","spacing","sm","md","padding","zIndex","top","right","left","component","Object","assign","display","shadowStyle","media","values","xl","srcSet","lg","xs","objectFit","src","alt","footer","paddingRight","bottom","content","background"],"mappings":"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"}

package/organisms/carousel2/styledComponents/styledCarouselHorizontal.d.ts

@@ -3,6 +3,6 @@ export declare enum controlButtonsHover {
     NEXT = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNOC4xNDYgMTYuNDk2VjE5LjJIMjMuNzcyTDE2Ljg4MiAyNi4wMTJMMTguNTQ2IDI3LjY3NkwyOC4zNzQgMTcuODQ4TDE4LjU0NiA4LjAyTDE2Ljg4MiA5LjY4NEwyMy43NzIgMTYuNDk2SDguMTQ2WiIgZmlsbD0iIzE2MTcxOCIvPgo8L3N2Zz4K",
     PREV = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMTkuMTE4IDI2LjAxMkwxMi4yMjggMTkuMkgyNy44NTRWMTYuNDk2SDEyLjIyOEwxOS4xMTggOS42ODRMMTcuNDU0IDguMDJMNy42MjYgMTcuODQ4TDE3LjQ1NCAyNy42NzZMMTkuMTE4IDI2LjAxMloiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+Cg=="
 }
-export declare const CarouselStyledHorizontal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & Carousel2Props & {
+export declare const CarouselStyledHorizontal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Carousel2Props & {
     theme?: any;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/organisms/common/menuCardComponent/menuCardComponent.d.ts

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
+import { SxProps, Theme } from '@mui/material';
 import { CardMenuItemsArray } from '../../../components/cardMenu/cardMenu';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 import { Placement } from '../../../utils/enum';
 export interface MenuCardComponentProps {
     /**

package/organisms/common/menuCardComponent/menuCardComponent.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{useState as i,useRef as r,useCallback as e}from"react";import{Icon as s}from"../../../components/icon/icon.js";import"../../../components/icon/icon.definitions.js";import{styled as m}from"@mui/system";import{CardMenu as p}from"../../../components/cardMenu/cardMenu.js";const c=m=>{var c=o(m,[]);const[u,d]=i(!1),f=r(null),l=e((()=>d(!0)),[]),x=e((()=>d(!1)),[]);return t(a,{className:"menuCardComponent",children:[n(s,{ref:f,onClick:l,name:"vertical"}),n(p,Object.assign({},c,{open:u,onClose:x,anchorRef:f}))]})},a=m("div")((()=>{let o={};return o=Object.assign(Object.assign({},o),{position:"absolute",zIndex:4,cursor:"pointer",top:"24px",width:"20px",height:"30px",right:"24px","& > .MuiIcon-root":{width:"20px",height:"30px",fontSize:"20px"},"& > div":{marginRight:"40px"}}),o}));export{c as default};
+import{__rest as o}from"tslib";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{useState as n,useRef as r,useCallback as e}from"react";import{Icon as m}from"../../../components/icon/icon.js";import"../../../components/icon/icon.definitions.js";import{styled as p}from"@mui/material";import{CardMenu as s}from"../../../components/cardMenu/cardMenu.js";const c=p=>{var c=o(p,[]);const[l,u]=n(!1),d=r(null),f=e((()=>u(!0)),[]),x=e((()=>u(!1)),[]);return t(a,{className:"menuCardComponent",children:[i(m,{ref:d,onClick:f,name:"vertical"}),i(s,Object.assign({},c,{open:l,onClose:x,anchorRef:d}))]})},a=p("div")((()=>{let o={};return o=Object.assign(Object.assign({},o),{position:"absolute",zIndex:4,cursor:"pointer",top:"24px",width:"20px",height:"30px",right:"24px","& > .MuiIcon-root":{width:"20px",height:"30px",fontSize:"20px"},"& > div":{marginRight:"40px"}}),o}));export{c as default};
 //# sourceMappingURL=menuCardComponent.js.map

package/organisms/common/menuCardComponent/menuCardComponent.js.map

@@ -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":["MenuCardComponent","_a","props","__rest","isOpen","setIsOpen","useState","anchorRef","useRef","setOpen","useCallback","setClosed","_jsxs","MenuCardStyled","className","children","_jsx","Icon","ref","onClick","name","CardMenu","Object","assign","open","onClose","styled","style","position","zIndex","cursor","top","width","height","right","fontSize","marginRight"],"mappings":"qWAiDA,MAAMA,EAAiDC,QAAKC,EAAKC,EAAAF,EAAV,IACrD,MAAOG,EAAQC,GAAaC,GAAS,GAC/BC,EAAYC,EAAO,MAEnBC,EAAUC,GAAY,IAAML,GAAU,IAAO,IAE7CM,EAAYD,GAAY,IAAML,GAAU,IAAQ,IAEtD,OACEO,EAACC,GAAeC,UAAU,oBACxBC,SAAA,CAAAC,EAACC,EAAK,CAAAC,IAAKX,EAAWY,QAASV,EAASW,KAAK,aAC7CJ,EAACK,EAAQC,OAAAC,OAAA,CAAA,EAAKrB,EAAO,CAAAsB,KAAMpB,EAAQqB,QAASd,EAAWJ,UAAWA,OACnD,EAIfM,EAAiBa,EAAO,MAAPA,EAA0B,KAC/C,IAAIC,EAAQ,CAAE,EAqBd,OAnBAA,EACKL,OAAAC,OAAAD,OAAAC,OAAA,GAAAI,GACH,CAAAC,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,UAIVT,CAAK"}
+{"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":["MenuCardComponent","_a","props","__rest","isOpen","setIsOpen","useState","anchorRef","useRef","setOpen","useCallback","setClosed","_jsxs","MenuCardStyled","className","children","_jsx","Icon","ref","onClick","name","CardMenu","Object","assign","open","onClose","styled","style","position","zIndex","cursor","top","width","height","right","fontSize","marginRight"],"mappings":"uWA+CA,MAAMA,EAAiDC,QAAKC,EAAKC,EAAAF,EAAV,IACrD,MAAOG,EAAQC,GAAaC,GAAS,GAC/BC,EAAYC,EAAO,MAEnBC,EAAUC,GAAY,IAAML,GAAU,IAAO,IAE7CM,EAAYD,GAAY,IAAML,GAAU,IAAQ,IAEtD,OACEO,EAACC,GAAeC,UAAU,oBACxBC,SAAA,CAAAC,EAACC,EAAK,CAAAC,IAAKX,EAAWY,QAASV,EAASW,KAAK,aAC7CJ,EAACK,EAAQC,OAAAC,OAAA,CAAA,EAAKrB,EAAO,CAAAsB,KAAMpB,EAAQqB,QAASd,EAAWJ,UAAWA,OACnD,EAIfM,EAAiBa,EAAO,MAAPA,EAA0B,KAC/C,IAAIC,EAAQ,CAAE,EAqBd,OAnBAA,EACKL,OAAAC,OAAAD,OAAAC,OAAA,GAAAI,GACH,CAAAC,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,UAIVT,CAAK"}

package/organisms/index.d.ts

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

package/organisms/textCta/textCta.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsx as e,jsxs as i,Fragment as n}from"react/jsx-runtime";import{forwardRef as o,useCallback as r}from"react";import{Label as a}from"../../components/label/label.js";import{styled as s,Typography as p,List as l,ListItem as m}from"@mui/material";import{Button as d}from"../../components/button/button.js";import{Icon as h}from"../../components/icon/icon.js";import"../../components/icon/icon.definitions.js";const x=o(((o,s)=>{var{label:x,headlineTitle:c,text:u,showFirstButton:f=!1,showSecondButton:S=!1,onClickFirstBtn:B,onClickSecondBtn:b,firstButtonProps:w,secondButtonProps:C,listItems:P,showAppStore:y=!1,showPlayStore:j=!1,appStoreProps:k,playStoreProps:H}=o,v=t(o,["label","headlineTitle","text","showFirstButton","showSecondButton","onClickFirstBtn","onClickSecondBtn","firstButtonProps","secondButtonProps","listItems","showAppStore","showPlayStore","appStoreProps","playStoreProps"]);const z=r((t=>{window.open(t,"_blank")}),[]),I=r(((t,e,i)=>{i&&z(i),e&&e(t)}),[z]),N=r(((t,i)=>{const n=Object.assign(Object.assign({},t),{url:t.url||null});return e(d,Object.assign({},n,{onClick:t=>I(t,i,n.url)}))}),[I]);return i(g,Object.assign({ref:s,listItems:P},v,{children:[x&&e(a,{label:x}),c&&e("div",{className:"headlineContainer",children:e(p,{className:"textCtaHeadline",children:c})}),u&&e("p",{className:`textCtaText ${j&&"isPlayStore"}`,children:u}),P&&P.length>0&&e(l,{className:"textCtaList",children:P.map(((t,n)=>i(m,{disableGutters:!0,children:[e(h,{name:t.icon||"check"}),t.text]},"text-cta-list-item"+n)))}),i("div",{className:"textCtaBtnGroup",children:[(!y||!j)&&i(n,{children:[f&&N(w,B),S&&N(C,b)]}),(!f||!S)&&i(n,{children:[y&&e("span",{className:"appStoreBadge",onClick:()=>z(k.url),children:e("img",{src:k.img,alt:k.alt})}),j&&e("span",{className:"playStoreBadge",dangerouslySetInnerHTML:{__html:H}})]})]})]}))})),c=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"}}},g=s("div",{shouldForwardProp:t=>"listItems"!==t&&"headlineVariant"!==t})((e=>{var{theme:i}=e,n=t(e,["theme"]);let o={};return o={"& > span":{margin:0},"& > div.headlineContainer":{marginBottom:"10px",marginTop:"5px","& > .textCtaHeadline":Object.assign({fontWeight:"bold"},c(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}));export{x as TextCta};
+import{__rest as t}from"tslib";import{jsx as e,jsxs as i,Fragment as n}from"react/jsx-runtime";import{forwardRef as o,useCallback as r}from"react";import{Label as a}from"../../components/label/label.js";import{styled as s,Typography as p,List as l,ListItem as m,ButtonBase as d}from"@mui/material";import{Button as h}from"../../components/button/button.js";import{Icon as x}from"../../components/icon/icon.js";import"../../components/icon/icon.definitions.js";const c=o(((o,s)=>{var{label:c,headlineTitle:g,text:f,showFirstButton:S=!1,showSecondButton:B=!1,onClickFirstBtn:b,onClickSecondBtn:w,firstButtonProps:C,secondButtonProps:P,listItems:y,showAppStore:j=!1,showPlayStore:k=!1,appStoreProps:H,playStoreProps:v}=o,z=t(o,["label","headlineTitle","text","showFirstButton","showSecondButton","onClickFirstBtn","onClickSecondBtn","firstButtonProps","secondButtonProps","listItems","showAppStore","showPlayStore","appStoreProps","playStoreProps"]);const I=r((t=>{window.open(t,"_blank")}),[]),N=r(((t,e,i)=>{i&&I(i),e&&e(t)}),[I]),L=r(((t,i)=>{const n=Object.assign(Object.assign({},t),{url:t.url||null});return e(h,Object.assign({},n,{onClick:t=>N(t,i,n.url)}))}),[N]);return i(u,Object.assign({ref:s,listItems:y},z,{children:[c&&e(a,{label:c}),g&&e("div",{className:"headlineContainer",children:e(p,{className:"textCtaHeadline",children:g})}),f&&e("p",{className:`textCtaText ${k&&"isPlayStore"}`,children:f}),y&&y.length>0&&e(l,{className:"textCtaList",children:y.map(((t,n)=>i(m,{disableGutters:!0,children:[e(x,{name:t.icon||"check"}),t.text]},"text-cta-list-item"+n)))}),i("div",{className:"textCtaBtnGroup",children:[(!j||!k)&&i(n,{children:[S&&L(C,b),B&&L(P,w)]}),(!S||!B)&&i(n,{children:[j&&e(d,{className:"appStoreBadge",onClick:()=>I(H.url),children:e("img",{src:H.img,alt:H.alt})}),k&&e("span",{className:"playStoreBadge",dangerouslySetInnerHTML:{__html:v}})]})]})]}))})),g=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"}}},u=s("div",{shouldForwardProp:t=>"listItems"!==t&&"headlineVariant"!==t})((e=>{var{theme:i}=e,n=t(e,["theme"]);let o={};return o={"& > span":{margin:0},"& > div.headlineContainer":{marginBottom:"10px",marginTop:"5px","& > .textCtaHeadline":Object.assign({fontWeight:"bold"},g(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}));export{c as TextCta};
 //# sourceMappingURL=textCta.js.map

package/organisms/textCta/textCta.js.map

@@ -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","TextCtaContainerStyled","Label","className","children","Typography","length","List","map","item","index","ListItem","disableGutters","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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"}
+{"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","TextCtaContainerStyled","Label","className","children","Typography","length","List","map","item","index","ListItem","disableGutters","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/organisms/tile/tile.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useState as o}from"react";import{styled as a}from"@mui/system";import{Label as r}from"../../components/label/label.js";import{Divider as l}from"@mui/material";import n from"../common/menuCardComponent/menuCardComponent.js";import{handleMaxChars as p}from"../../utils/utilities.js";import m from"../../components/common/imageComponent.js";const s=a=>{var{tileContentPinned:s="top",isBorderRadius:c=!0,promotionalVariant:g="large"}=a,b=e(a,["tileContentPinned","isBorderRadius","promotionalVariant"]);const[h,u]=o(!1),x=t("div",{className:"tileImage",children:b.tileImageURLOnHover&&h?t(m,{image:b.tileImageURLOnHover,alt:b.tileAltImage},"imageUrl_onHover"):t(m,{image:b.tileImageURL,alt:b.tileAltImage,fallbackImage:b.tileImageURLFallback},"imageUrl")}),f=i("div",{className:"tilePriceWrapper",children:[b.tilePriceTotal&&t("span",{className:"disclaimer tilePriceTotal",children:b.tilePriceTotal}),b.tilePriceTotal&&b.tilePriceMonth&&t(l,{orientation:"vertical",flexItem:!0}),b.tilePriceMonth&&t("span",{className:"disclaimer tilePriceMonth",children:b.tilePriceMonth})]});return t(d,{promotionalLabel:b.promotionalLabel,isBorderRadius:c,tileContentPinned:s,children:i("div",{className:"tileWrapper",onMouseEnter:()=>{h||u(!0)},onMouseLeave:()=>{u(!1)},children:[b.isMenuDropdown&&t("div",{className:"tileDropdownMenu",onMouseEnter:()=>u(!1),onMouseLeave:()=>u(!0),children:t(n,Object.assign({},b.menuCardComponentProps))}),b.promotionalLabel&&t("div",{className:"tilePromotionalLabel",children:t(r,{type:"promotional",variant:g,label:p(b.promotionalLabel,30)})}),"bottom"===s&&x,i("div",{className:"tileContent",children:[b.generalLabel&&t("div",{className:"tileGeneralLabel",children:t(r,{label:p(b.generalLabel,30)})}),t("h4",{className:"tileTitle",children:p(b.title,20)}),b.featureLabel&&t("div",{className:"tileFeatureLabel",children:t(r,{type:"feature",variant:b.featureLabelVariant,label:p(b.featureLabel,30)})}),"bottom"===s&&f]}),"top"===s&&x,"top"===s&&f]})})};s.defaultProps={isBorderRadius:!0,promotionalVariant:"large"};const d=a("div")((t=>{var{theme:i}=t,o=e(t,["theme"]);let a={};const{tileContentPinned:r,promotionalLabel:l,isBorderRadius:n}=o;return a={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:l?"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"===r?"-32px":"16px",marginBottom:"bottom"===r?"-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"===r?"8px":"0","& .tilePriceTotal":{fontWeight:"bold"},"& hr":{margin:"0 8px",borderColor:i.palette.transparent.secondary}}},a}));export{s as Tile};
+import{__rest as e}from"tslib";import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useState as a}from"react";import{styled as o}from"@mui/material/styles";import{Label as r}from"../../components/label/label.js";import{Divider as l,ButtonBase as n}from"@mui/material";import p from"../common/menuCardComponent/menuCardComponent.js";import{handleMaxChars as m}from"../../utils/utilities.js";import s from"../../components/common/imageComponent.js";const d=o=>{var{tileContentPinned:d="top",isBorderRadius:g=!0,promotionalVariant:b="large"}=o,h=e(o,["tileContentPinned","isBorderRadius","promotionalVariant"]);const[u,x]=a(!1),f=t("div",{className:"tileImage",children:h.tileImageURLOnHover&&u?t(s,{image:h.tileImageURLOnHover,alt:h.tileAltImage},"imageUrl_onHover"):t(s,{image:h.tileImageURL,alt:h.tileAltImage,fallbackImage:h.tileImageURLFallback},"imageUrl")}),v=i("div",{className:"tilePriceWrapper",children:[h.tilePriceTotal&&t("span",{className:"disclaimer tilePriceTotal",children:h.tilePriceTotal}),h.tilePriceTotal&&h.tilePriceMonth&&t(l,{orientation:"vertical",flexItem:!0}),h.tilePriceMonth&&t("span",{className:"disclaimer tilePriceMonth",children:h.tilePriceMonth})]});return t(c,{promotionalLabel:h.promotionalLabel,isBorderRadius:g,tileContentPinned:d,children:i(n,{className:"tileWrapper",onMouseEnter:()=>{u||x(!0)},onMouseLeave:()=>{x(!1)},onClick:()=>x((e=>!e)),children:[h.isMenuDropdown&&t(n,{className:"tileDropdownMenu",onMouseEnter:()=>x(!1),onMouseLeave:()=>x(!0),children:t(p,Object.assign({},h.menuCardComponentProps))}),h.promotionalLabel&&t("div",{className:"tilePromotionalLabel",children:t(r,{type:"promotional",variant:b,label:m(h.promotionalLabel,30)})}),"bottom"===d&&f,i("div",{className:"tileContent",children:[h.generalLabel&&t("div",{className:"tileGeneralLabel",children:t(r,{label:m(h.generalLabel,30)})}),t("h4",{className:"tileTitle",children:m(h.title,20)}),h.featureLabel&&t("div",{className:"tileFeatureLabel",children:t(r,{type:"feature",variant:h.featureLabelVariant,label:m(h.featureLabel,30)})}),"bottom"===d&&v]}),"top"===d&&f,"top"===d&&v]})})};d.defaultProps={isBorderRadius:!0,promotionalVariant:"large"};const c=o("div")((t=>{var{theme:i}=t,a=e(t,["theme"]);let o={};const{tileContentPinned:r,promotionalLabel:l,isBorderRadius:n}=a;return o={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:l?"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"===r?"-32px":"16px",marginBottom:"bottom"===r?"-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"===r?"8px":"0","& .tilePriceTotal":{fontWeight:"bold"},"& hr":{margin:"0 8px",borderColor:i.palette.transparent.secondary}}},o}));export{d as Tile};
 //# sourceMappingURL=tile.js.map

package/organisms/tile/tile.js.map

@@ -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","ImageComponent","image","alt","tileAltImage","tileImageURL","fallbackImage","tileImageURLFallback","pricingElement","_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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"}
+{"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","ImageComponent","image","alt","tileAltImage","tileImageURL","fallbackImage","tileImageURLFallback","pricingElement","_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/package.json

@@ -1 +1 @@
-{"name":"@skodaflow/web-library","version":"7.13.1","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","peerDependencies":{"@emotion/cache":"^11.13.1","@emotion/react":"^11.13.3","@emotion/styled":"^11.13.0","@mui/base":"^5.0.0-beta.59","@mui/material":"^5.13.0 || ^6.1.4","@mui/system":"^5.12.3 || ^6.1.4","react":"^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^17.0.0 || ^18.0.0 || ^19.0.0"},"dependencies":{"@googlemaps/markerclusterer":"2.5.3","@googlemaps/react-wrapper":"1.1.42","@mui/x-date-pickers":"7.23.6","@skodaflow/web-tokens":"3.1.1","country-flag-icons":"1.5.19","date-fns":"2.30.0","embla-carousel-auto-height":"7.1.0","embla-carousel-autoplay":"7.1.0","embla-carousel-class-names":"7.1.0","embla-carousel-react":"7.1.0","embla-carousel-wheel-gestures":"3.0.0","stylis":"4.3.6","stylis-plugin-rtl":"2.1.1","swiper":"11.2.8","tslib":"2.8.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}
+{"name":"@skodaflow/web-library","version":"7.15.0","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","peerDependencies":{"@emotion/cache":"^11.13.1","@emotion/react":"^11.13.3","@emotion/styled":"^11.13.0","@mui/material":"^5.13.0 || ^6.1.4","@mui/system":"^5.12.3 || ^6.1.4","react":"^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^17.0.0 || ^18.0.0 || ^19.0.0"},"dependencies":{"@googlemaps/markerclusterer":"2.5.3","@googlemaps/react-wrapper":"1.1.42","@mui/x-date-pickers":"7.23.6","@skodaflow/web-tokens":"3.1.1","country-flag-icons":"1.5.19","date-fns":"2.30.0","embla-carousel-auto-height":"7.1.0","embla-carousel-autoplay":"7.1.0","embla-carousel-class-names":"7.1.0","embla-carousel-react":"7.1.0","embla-carousel-wheel-gestures":"3.0.0","stylis":"4.3.6","stylis-plugin-rtl":"2.1.1","swiper":"11.2.10","tslib":"2.8.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}

package/production/Button/Button.js

@@ -1,4 +1,4 @@
-import{__rest as o}from"tslib";import{jsx as n}from"react/jsx-runtime";import{styled as r,Button as a}from"@mui/material";import{keyframes as i}from"@mui/system";const e=i`
+import{__rest as o}from"tslib";import{jsx as n}from"react/jsx-runtime";import{styled as r,Button as a}from"@mui/material";import{keyframes as i}from"@mui/material/styles";const e=i`
   0% { background-color: #43861D; }
   50% { background-color: #96DC6F; }
   100% {background-color: #43861D; }

package/production/Button/Button.js.map

@@ -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","MuiButton","Object","assign","theme","disabled","minWidth","color","palette","common","white","backgroundColor","animation","transitions","easing","easeInOut","text","primary","border","action","borderColor"],"mappings":"kKAIA,MAAMA,EAAaC,CAAS;;;;EAKtBC,EAAcD,CAAS;;;;EAKvBE,EAAWF,CAAS;;;;EAKpBG,EAAYH,CAAS;;;;EAKrBI,EAAaJ,CAAS;;;;EAKtBK,EAAYL,CAAS;;;;EAKrBM,EAAaN,CAAS;;;;EAKtBO,EAAgBP,CAAS;;;;EAqBlBQ,EAASC,GAPqBC,QAAAC,SAAEA,EAAQC,QAAEA,GAAOF,EAAKG,EAAKC,EAAAJ,EAA7B,wBAAoC,OAAAK,EAACC,EAAcC,OAAAC,OAAA,GAAAL,GAAOD,QAAQ,SAAS,GAOhGH,EAAgC,EAAGU,QAAOP,UAAU,UAAWD,WAAUS,+HAC7FC,SAAU,QACVC,MAAOH,EAAMI,QAAQC,OAAOC,OAEZ,YAAZb,GAAqBK,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAG5B,iBAA0BoB,EAAMS,YAAYC,OAAOC,eAIrD,YAAZlB,GAAqBK,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAG1B,iBAA2BkB,EAAMS,YAAYC,OAAOC,eAItD,UAAZlB,GAAmBK,OAAAC,OAAA,CACrBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAGzB,iBAAwBiB,EAAMS,YAAYC,OAAOC,eAInD,SAAZlB,GAAkBK,OAAAC,OAAA,CACpBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAGxB,iBAAyBgB,EAAMS,YAAYC,OAAOC,eAIpD,UAAZlB,GAAmBK,OAAAC,OAAA,CACrBQ,gBAAiBP,EAAMI,QAAQC,OAAOC,MACtCH,MAAOH,EAAMI,QAAQQ,KAAKC,QAC1B,UAAW,CACTN,gBAAiB,WAEnBO,OAAQ,aAAad,EAAMI,QAAQQ,KAAKC,WACpCrB,GAAY,CACdgB,UAAW,GAAGvB,iBAA0Be,EAAMS,YAAYC,OAAOC,eAIrD,SAAZlB,GAAkBK,OAAAC,OAAA,CACpBQ,gBAAiB,cACjBO,OAAQ,oBACRX,MAAOH,EAAMI,QAAQQ,KAAKC,SACtBrB,GAAY,CACdgB,UAAW,GAAGtB,iBAAyBc,EAAMS,YAAYC,OAAOC,eAIpD,UAAZlB,GACFK,OAAAC,OAAA,CAAAQ,gBAAiB,cACjBO,OAAQ,aAAad,EAAMI,QAAQC,OAAOC,SACtCd,GAAY,CACdgB,UAAW,GAAGrB,iBAA0Ba,EAAMS,YAAYC,OAAOC,eAIjEV,GACFH,OAAAC,OAAA,CAAAQ,gBAAiB,UACjBJ,MAAOH,EAAMI,QAAQW,OAAOd,SAC5Be,YAAahB,EAAMI,QAAQW,OAAOd,UAC9BT,GAAY,CACdgB,UAAW,GAAGpB,iBAA6BY,EAAMS,YAAYC,OAAOC"}
+{"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","MuiButton","Object","assign","theme","disabled","minWidth","color","palette","common","white","backgroundColor","animation","transitions","easing","easeInOut","text","primary","border","action","borderColor"],"mappings":"2KAIA,MAAMA,EAAaC,CAAS;;;;EAKtBC,EAAcD,CAAS;;;;EAKvBE,EAAWF,CAAS;;;;EAKpBG,EAAYH,CAAS;;;;EAKrBI,EAAaJ,CAAS;;;;EAKtBK,EAAYL,CAAS;;;;EAKrBM,EAAaN,CAAS;;;;EAKtBO,EAAgBP,CAAS;;;;EAqBlBQ,EAASC,GAPqBC,QAAAC,SAAEA,EAAQC,QAAEA,GAAOF,EAAKG,EAAKC,EAAAJ,EAA7B,wBAAoC,OAAAK,EAACC,EAAcC,OAAAC,OAAA,GAAAL,GAAOD,QAAQ,SAAS,GAOhGH,EAAgC,EAAGU,QAAOP,UAAU,UAAWD,WAAUS,+HAC7FC,SAAU,QACVC,MAAOH,EAAMI,QAAQC,OAAOC,OAEZ,YAAZb,GAAqBK,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAG5B,iBAA0BoB,EAAMS,YAAYC,OAAOC,eAIrD,YAAZlB,GAAqBK,OAAAC,OAAA,CACvBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAG1B,iBAA2BkB,EAAMS,YAAYC,OAAOC,eAItD,UAAZlB,GAAmBK,OAAAC,OAAA,CACrBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAGzB,iBAAwBiB,EAAMS,YAAYC,OAAOC,eAInD,SAAZlB,GAAkBK,OAAAC,OAAA,CACpBQ,gBAAiB,UACjB,UAAW,CACTA,gBAAiB,YAEff,GAAY,CACdgB,UAAW,GAAGxB,iBAAyBgB,EAAMS,YAAYC,OAAOC,eAIpD,UAAZlB,GAAmBK,OAAAC,OAAA,CACrBQ,gBAAiBP,EAAMI,QAAQC,OAAOC,MACtCH,MAAOH,EAAMI,QAAQQ,KAAKC,QAC1B,UAAW,CACTN,gBAAiB,WAEnBO,OAAQ,aAAad,EAAMI,QAAQQ,KAAKC,WACpCrB,GAAY,CACdgB,UAAW,GAAGvB,iBAA0Be,EAAMS,YAAYC,OAAOC,eAIrD,SAAZlB,GAAkBK,OAAAC,OAAA,CACpBQ,gBAAiB,cACjBO,OAAQ,oBACRX,MAAOH,EAAMI,QAAQQ,KAAKC,SACtBrB,GAAY,CACdgB,UAAW,GAAGtB,iBAAyBc,EAAMS,YAAYC,OAAOC,eAIpD,UAAZlB,GACFK,OAAAC,OAAA,CAAAQ,gBAAiB,cACjBO,OAAQ,aAAad,EAAMI,QAAQC,OAAOC,SACtCd,GAAY,CACdgB,UAAW,GAAGrB,iBAA0Ba,EAAMS,YAAYC,OAAOC,eAIjEV,GACFH,OAAAC,OAAA,CAAAQ,gBAAiB,UACjBJ,MAAOH,EAAMI,QAAQW,OAAOd,SAC5Be,YAAahB,EAAMI,QAAQW,OAAOd,UAC9BT,GAAY,CACdgB,UAAW,GAAGpB,iBAA6BY,EAAMS,YAAYC,OAAOC"}

package/cjs/layout/Error/ErrorContent.d.ts

@@ -1,33 +0,0 @@
-import { FC, ReactNode } from 'react';
-export type ErrorContentProps = {
-    /**
-     * Error Status, eg. 404 or 500
-     * @requires
-     */
-    status: ReactNode;
-    /**
-     * Short message describing the error
-     * @default undefined
-     */
-    message?: ReactNode;
-    /**
-     * Longer description of the error
-     * @default undefined
-     */
-    description?: ReactNode;
-    /**
-     * Actions that user can interact with
-     * @default undefined
-     */
-    actions?: ReactNode;
-    /**
-     * Stacktrace of an error
-     * @default undefined
-     */
-    stacktrace?: string;
-};
-/**
- * Component that simplifies rendering of the error
- * @param props ErrorContentProps
- */
-export declare const ErrorContent: FC<ErrorContentProps>;

package/cjs/layout/Error/ErrorContent.js

@@ -1,2 +0,0 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("@mui/material"),r=require("react");exports.ErrorContent=o=>{const{status:s,message:n,actions:i,description:a,stacktrace:x}=o,l=r.useMemo((()=>"string"==typeof s||"number"==typeof s?t.jsx(e.Typography,{sx:{fontWeight:{xs:"700"},fontSize:{xs:"72px"},lineHeight:{xs:"72px"},color:t=>t.palette.onSurface.os900},children:s}):s),[s]),d=r.useMemo((()=>n?"string"==typeof n||"number"==typeof n?t.jsx(e.Typography,{variant:"h3",children:n}):n:null),[n]),c=r.useMemo((()=>a?"string"==typeof a||"number"==typeof a?t.jsx(e.Typography,{children:a}):a:null),[a]),m=r.useMemo((()=>null==x?void 0:x.split("\n").map((r=>t.jsx(e.Box,{children:r},r)))),[x]);return t.jsxs(e.Box,{sx:{display:"flex",flexDirection:"column",alignItems:"center",textAlign:"center",paddingTop:{xl:12,xs:10}},children:[t.jsxs(e.Box,{sx:{maxWidth:"612px"},children:[t.jsx(e.Box,{sx:{marginBottom:{lg:8,md:7,xs:6}},"data-testid":"ErrorContent.status",children:l}),d&&t.jsx(e.Box,{sx:{marginBottom:{lg:4,md:5,xs:3}},"data-testid":"ErrorContent.message",children:d})]}),t.jsx(e.Box,{sx:{maxWidth:"450px"},children:c&&t.jsx(e.Box,{sx:{marginBottom:{lg:4,md:5,xs:3}},"data-testid":"ErrorContent.description",children:c})}),i&&t.jsx(e.Stack,{direction:"row",spacing:2,sx:{marginBottom:4},"data-testid":"ErrorContent.actions",children:i}),m&&t.jsx(e.Container,{children:t.jsx(e.Box,{sx:{border:"1px solid",borderColor:t=>t.palette.onSurface.os300,py:1,px:2,borderRadius:2,fontFamily:"monospace",fontSize:11,lineHeight:"18px",marginBottom:4,textAlign:"left",overflow:"auto","& > div:not(:first-of-type)":{marginLeft:4}},"data-testid":"ErrorContent.stacktrace",children:m})})]})};
-//# sourceMappingURL=ErrorContent.js.map

package/cjs/layout/Error/ErrorContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorContent.js","sources":["../../../../../src/layout/Error/ErrorContent.tsx"],"sourcesContent":["import { Box, Container, Stack, Typography } from '@mui/material';\nimport { FC, ReactNode, useMemo } from 'react';\n\nexport type ErrorContentProps = {\n  /**\n   * Error Status, eg. 404 or 500\n   * @requires\n   */\n  status: ReactNode;\n  /**\n   * Short message describing the error\n   * @default undefined\n   */\n  message?: ReactNode;\n  /**\n   * Longer description of the error\n   * @default undefined\n   */\n  description?: ReactNode;\n  /**\n   * Actions that user can interact with\n   * @default undefined\n   */\n  actions?: ReactNode;\n  /**\n   * Stacktrace of an error\n   * @default undefined\n   */\n  stacktrace?: string;\n};\n\n/**\n * Component that simplifies rendering of the error\n * @param props ErrorContentProps\n */\nexport const ErrorContent: FC<ErrorContentProps> = (props) => {\n  const { status, message, actions, description, stacktrace } = props;\n\n  const statusNode = useMemo(() => {\n    if (typeof status === 'string' || typeof status === 'number') {\n      return (\n        <Typography\n          sx={{\n            fontWeight: { xs: '700' },\n            fontSize: { xs: '72px' },\n            lineHeight: { xs: '72px' },\n            color: (theme) => theme.palette.onSurface.os900,\n          }}\n        >\n          {status}\n        </Typography>\n      );\n    }\n\n    return status;\n  }, [status]);\n\n  const messageNode = useMemo(() => {\n    if (!message) {\n      return null;\n    }\n    if (typeof message === 'string' || typeof message === 'number') {\n      return <Typography variant=\"h3\">{message}</Typography>;\n    }\n    return message;\n  }, [message]);\n\n  const descriptionNode = useMemo(() => {\n    if (!description) {\n      return null;\n    }\n    if (typeof description === 'string' || typeof description === 'number') {\n      return <Typography>{description}</Typography>;\n    }\n    return description;\n  }, [description]);\n\n  const stackTraceNode = useMemo(\n    () => stacktrace?.split('\\n').map((frame) => <Box key={frame}>{frame}</Box>),\n    [stacktrace],\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        textAlign: 'center',\n        paddingTop: {\n          xl: 12,\n          xs: 10,\n        },\n      }}\n    >\n      <Box\n        sx={{\n          maxWidth: '612px',\n        }}\n      >\n        <Box sx={{ marginBottom: { lg: 8, md: 7, xs: 6 } }} data-testid=\"ErrorContent.status\">\n          {statusNode}\n        </Box>\n\n        {messageNode && (\n          <Box sx={{ marginBottom: { lg: 4, md: 5, xs: 3 } }} data-testid=\"ErrorContent.message\">\n            {messageNode}\n          </Box>\n        )}\n      </Box>\n\n      <Box\n        sx={{\n          maxWidth: '450px',\n        }}\n      >\n        {descriptionNode && (\n          <Box sx={{ marginBottom: { lg: 4, md: 5, xs: 3 } }} data-testid=\"ErrorContent.description\">\n            {descriptionNode}\n          </Box>\n        )}\n      </Box>\n\n      {actions && (\n        <Stack direction=\"row\" spacing={2} sx={{ marginBottom: 4 }} data-testid=\"ErrorContent.actions\">\n          {actions}\n        </Stack>\n      )}\n\n      {stackTraceNode && (\n        <Container>\n          <Box\n            sx={{\n              border: '1px solid',\n              borderColor: (theme) => theme.palette.onSurface.os300,\n              py: 1,\n              px: 2,\n              borderRadius: 2,\n              fontFamily: 'monospace',\n              fontSize: 11,\n              lineHeight: '18px',\n              marginBottom: 4,\n              textAlign: 'left',\n              overflow: 'auto',\n              '& > div:not(:first-of-type)': {\n                marginLeft: 4,\n              },\n            }}\n            data-testid=\"ErrorContent.stacktrace\"\n          >\n            {stackTraceNode}\n          </Box>\n        </Container>\n      )}\n    </Box>\n  );\n};\n"],"names":["props","status","message","actions","description","stacktrace","statusNode","useMemo","_jsx","jsx","Typography","sx","fontWeight","xs","fontSize","lineHeight","color","theme","palette","onSurface","os900","children","messageNode","variant","descriptionNode","stackTraceNode","split","map","frame","Box","_jsxs","jsxs","display","flexDirection","alignItems","textAlign","paddingTop","xl","maxWidth","marginBottom","lg","md","Stack","direction","spacing","Container","border","borderColor","os300","py","px","borderRadius","fontFamily","overflow","marginLeft"],"mappings":"mHAmCoDA,IAClD,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,EAAOC,YAAEA,EAAWC,WAAEA,GAAeL,EAExDM,EAAaC,EAAAA,SAAQ,IACH,iBAAXN,GAAyC,iBAAXA,EAErCO,EAAAC,IAACC,aAAU,CACTC,GAAI,CACFC,WAAY,CAAEC,GAAI,OAClBC,SAAU,CAAED,GAAI,QAChBE,WAAY,CAAEF,GAAI,QAClBG,MAAQC,GAAUA,EAAMC,QAAQC,UAAUC,OAG3CC,SAAApB,IAKAA,GACN,CAACA,IAEEqB,EAAcf,EAAAA,SAAQ,IACrBL,EAGkB,iBAAZA,GAA2C,iBAAZA,EACjCM,EAAAA,IAACE,EAAAA,WAAW,CAAAa,QAAQ,KAAIF,SAAEnB,IAE5BA,EALE,MAMR,CAACA,IAEEsB,EAAkBjB,EAAAA,SAAQ,IACzBH,EAGsB,iBAAhBA,GAAmD,iBAAhBA,EACrCI,EAACC,IAAAC,EAAUA,WAAE,CAAAW,SAAAjB,IAEfA,EALE,MAMR,CAACA,IAEEqB,EAAiBlB,EAAAA,SACrB,IAAMF,eAAAA,EAAYqB,MAAM,MAAMC,KAAKC,GAAUpB,MAACqB,EAAAA,IAAiB,CAAAR,SAAAO,GAARA,MACvD,CAACvB,IAGH,OACEyB,EAAAC,KAACF,MAAG,CACFlB,GAAI,CACFqB,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,UAAW,SACXC,WAAY,CACVC,GAAI,GACJxB,GAAI,KAEPQ,SAAA,CAEDS,EAAAA,KAACD,EAAGA,IACF,CAAAlB,GAAI,CACF2B,SAAU,SACXjB,SAAA,CAEDb,EAACC,IAAAoB,MAAI,CAAAlB,GAAI,CAAE4B,aAAc,CAAEC,GAAI,EAAGC,GAAI,EAAG5B,GAAI,IAAK,cAAc,sBAAqBQ,SAClFf,IAGFgB,GACCd,EAAAC,IAACoB,EAAGA,IAAA,CAAClB,GAAI,CAAE4B,aAAc,CAAEC,GAAI,EAAGC,GAAI,EAAG5B,GAAI,IAAmB,cAAA,gCAC7DS,OAKPd,EAAAC,IAACoB,MAAG,CACFlB,GAAI,CACF2B,SAAU,SACXjB,SAEAG,GACChB,EAAAC,IAACoB,MAAI,CAAAlB,GAAI,CAAE4B,aAAc,CAAEC,GAAI,EAAGC,GAAI,EAAG5B,GAAI,IAAmB,cAAA,oCAC7DW,MAKNrB,GACCK,EAAAA,IAACkC,EAAKA,MAAA,CAACC,UAAU,MAAMC,QAAS,EAAGjC,GAAI,CAAE4B,aAAc,GAAiB,cAAA,uBACrElB,SAAAlB,IAIJsB,GACCjB,MAACqC,EAAAA,UACC,CAAAxB,SAAAb,EAAAC,IAACoB,MAAG,CACFlB,GAAI,CACFmC,OAAQ,YACRC,YAAc9B,GAAUA,EAAMC,QAAQC,UAAU6B,MAChDC,GAAI,EACJC,GAAI,EACJC,aAAc,EACdC,WAAY,YACZtC,SAAU,GACVC,WAAY,OACZwB,aAAc,EACdJ,UAAW,OACXkB,SAAU,OACV,8BAA+B,CAC7BC,WAAY,IAGJ,cAAA,mCAEX7B,QAIH"}

package/cjs/layout/Footer/Footer.d.ts

@@ -1,5 +0,0 @@
-import { FC, ReactNode } from 'react';
-export type FooterProps = {
-    children: ReactNode;
-};
-export declare const Footer: FC<FooterProps>;

package/cjs/layout/Footer/Footer.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");exports.Footer=t=>e.jsx(r.Box,{"data-testid":"Footer",sx:{background:e=>e.palette.onSurface.os800,color:e=>e.palette.common.white,padding:{lg:"80px 0",xs:"48px 0"},"& hr":{borderColor:e=>e.palette.onSurface.os700}},children:e.jsx(r.Container,{maxWidth:"xl",children:e.jsx(r.Stack,{direction:"column",spacing:4,children:t.children})})});
-//# sourceMappingURL=Footer.js.map

package/cjs/layout/Footer/Footer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Footer.js","sources":["../../../../../src/layout/Footer/Footer.tsx"],"sourcesContent":["import { Box, Container, Stack } from '@mui/material';\nimport { FC, ReactNode } from 'react';\n\nexport type FooterProps = {\n  children: ReactNode;\n};\n\nexport const Footer: FC<FooterProps> = (props) => (\n  <Box\n    data-testid=\"Footer\"\n    sx={{\n      background: (theme) => theme.palette.onSurface.os800,\n      color: (theme) => theme.palette.common.white,\n      padding: {\n        lg: '80px 0',\n        xs: '48px 0',\n      },\n      '& hr': {\n        borderColor: (theme) => theme.palette.onSurface.os700,\n      },\n    }}\n  >\n    <Container maxWidth=\"xl\">\n      <Stack direction=\"column\" spacing={4}>\n        {props.children}\n      </Stack>\n    </Container>\n  </Box>\n);\n"],"names":["props","_jsx","Box","sx","background","theme","palette","onSurface","os800","color","common","white","padding","lg","xs","borderColor","os700","children","jsx","Container","maxWidth","Stack","direction","spacing"],"mappings":"0FAOwCA,GACtCC,MAACC,EAAGA,IAAA,CAAA,cACU,SACZC,GAAI,CACFC,WAAaC,GAAUA,EAAMC,QAAQC,UAAUC,MAC/CC,MAAQJ,GAAUA,EAAMC,QAAQI,OAAOC,MACvCC,QAAS,CACPC,GAAI,SACJC,GAAI,UAEN,OAAQ,CACNC,YAAcV,GAAUA,EAAMC,QAAQC,UAAUS,QAIpDC,SAAAhB,EAAAiB,IAACC,YAAS,CAACC,SAAS,KAClBH,SAAAhB,EAAAA,IAACoB,EAAKA,MAAA,CAACC,UAAU,SAASC,QAAS,EAChCN,SAAAjB,EAAMiB"}

package/cjs/layout/Footer/FooterAccordion.d.ts

@@ -1,18 +0,0 @@
-import { FC, ReactNode } from 'react';
-export type FooterAccordionProps = {
-    /**
-     * Label of the Accordion
-     * String will be rendered inside `Typography` component with toggle icon.
-     * Other types are rendered as is, so you have to provide your own styles.
-     * @requires
-     */
-    label: ReactNode;
-    /**
-     * Content of the Accordion
-     * String will be rendered inside `Typography` component with toggle icon.
-     * Other types are rendered as is, so you have to provide your own styles.
-     * @requires
-     */
-    children: ReactNode;
-};
-export declare const FooterAccordion: FC<FooterAccordionProps>;

package/cjs/layout/Footer/FooterAccordion.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../../components/icon/icon.js");require("../../components/icon/icon.definitions.js"),require("../../utils/enum.js");var o=require("../../utils/useClosure/useClosure.js");require("react");var n=require("@mui/material");exports.FooterAccordion=({label:i,children:t})=>{const{isOpen:s,onToggle:c}=o.useClosure(!1);return e.jsxs(n.Box,{"data-testid":"FooterAccordion",sx:{color:e=>e.palette.onSurface.os0},children:[e.jsxs(n.Box,{onClick:c,sx:{cursor:"pointer",color:"inherit",background:"transparent",border:"none",padding:0},"data-testid":"FooterAccordion.label",component:"button",tabIndex:0,"aria-expanded":s,onKeyDown:e=>{" "===e.key&&(e.preventDefault(),c())},children:["string"==typeof i&&e.jsxs(n.Stack,{direction:"row",spacing:2,alignItems:"center",children:[e.jsx(n.Typography,{variant:"caption2",color:"inherit",sx:{flexGrow:{xs:"1",lg:"0"}},children:i}),e.jsx(r.Icon,{fontSize:"small",name:s?"chevron-up":"chevron-down"})]}),"string"!=typeof i&&i]}),e.jsx(n.Collapse,{in:s,"data-testid":"FooterAccordion.children",children:e.jsxs(n.Box,{sx:{paddingTop:4,p:{fontSize:"14px",lineHeight:"20px"}},children:["string"==typeof t&&e.jsx(n.Typography,{color:"inherit",variant:"disclaimer1",children:t}),"string"!=typeof t&&t]})})]})};
-//# sourceMappingURL=FooterAccordion.js.map

package/cjs/layout/Footer/FooterAccordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FooterAccordion.js","sources":["../../../../../src/layout/Footer/FooterAccordion.tsx"],"sourcesContent":["import { Icon } from '@/src/components/icon';\nimport { useClosure } from '@/src/utils';\nimport { Box, Collapse, Stack, Typography } from '@mui/material';\nimport { FC, ReactNode } from 'react';\n\nexport type FooterAccordionProps = {\n  /**\n   * Label of the Accordion\n   * String will be rendered inside `Typography` component with toggle icon.\n   * Other types are rendered as is, so you have to provide your own styles.\n   * @requires\n   */\n  label: ReactNode;\n  /**\n   * Content of the Accordion\n   * String will be rendered inside `Typography` component with toggle icon.\n   * Other types are rendered as is, so you have to provide your own styles.\n   * @requires\n   */\n  children: ReactNode;\n};\n\nexport const FooterAccordion: FC<FooterAccordionProps> = ({ label, children }) => {\n  const { isOpen, onToggle } = useClosure(false);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onToggle();\n    }\n  };\n\n  return (\n    <Box data-testid=\"FooterAccordion\" sx={{ color: (theme) => theme.palette.onSurface.os0 }}>\n      <Box\n        onClick={onToggle}\n        sx={{ cursor: 'pointer', color: 'inherit', background: 'transparent', border: 'none', padding: 0 }}\n        data-testid=\"FooterAccordion.label\"\n        component=\"button\"\n        tabIndex={0}\n        aria-expanded={isOpen}\n        onKeyDown={handleKeyDown}\n      >\n        {typeof label === 'string' && (\n          <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n            <Typography variant=\"caption2\" color=\"inherit\" sx={{ flexGrow: { xs: '1', lg: '0' } }}>\n              {label}\n            </Typography>\n            <Icon fontSize=\"small\" name={isOpen ? 'chevron-up' : 'chevron-down'} />\n          </Stack>\n        )}\n        {typeof label !== 'string' && label}\n      </Box>\n      <Collapse in={isOpen} data-testid=\"FooterAccordion.children\">\n        <Box sx={{ paddingTop: 4, p: { fontSize: '14px', lineHeight: '20px' } }}>\n          {typeof children === 'string' && (\n            <Typography color=\"inherit\" variant=\"disclaimer1\">\n              {children}\n            </Typography>\n          )}\n          {typeof children !== 'string' && children}\n        </Box>\n      </Collapse>\n    </Box>\n  );\n};\n"],"names":["label","children","isOpen","onToggle","useClosure","_jsxs","Box","sx","color","theme","palette","onSurface","os0","onClick","cursor","background","border","padding","component","tabIndex","onKeyDown","event","key","preventDefault","Stack","direction","spacing","alignItems","_jsx","jsx","Typography","variant","flexGrow","xs","lg","Icon","fontSize","name","Collapse","in","jsxs","paddingTop","p","lineHeight"],"mappings":"6SAsByD,EAAGA,QAAOC,eACjE,MAAMC,OAAEA,EAAMC,SAAEA,GAAaC,EAAAA,YAAW,GASxC,OACEC,EAAAA,KAACC,EAAAA,IAAG,CAAA,cAAa,kBAAkBC,GAAI,CAAEC,MAAQC,GAAUA,EAAMC,QAAQC,UAAUC,KAAKX,SAAA,CACtFI,EAAAA,KAACC,EAAAA,IAAG,CACFO,QAASV,EACTI,GAAI,CAAEO,OAAQ,UAAWN,MAAO,UAAWO,WAAY,cAAeC,OAAQ,OAAQC,QAAS,GAAG,cACtF,wBACZC,UAAU,SACVC,SAAU,EAAC,gBACIjB,EACfkB,UAhBiBC,IACH,MAAdA,EAAMC,MACRD,EAAME,iBACNpB,MAeGF,SAAA,CAAiB,iBAAVD,GACNK,EAAAA,KAACmB,EAAAA,OAAMC,UAAU,MAAMC,QAAS,EAAGC,WAAW,SAC5C1B,SAAA,CAAA2B,EAAAC,IAACC,EAAUA,WAAC,CAAAC,QAAQ,WAAWvB,MAAM,UAAUD,GAAI,CAAEyB,SAAU,CAAEC,GAAI,IAAKC,GAAI,MAC3EjC,SAAAD,IAEH4B,EAAAC,IAACM,EAAIA,KAAA,CAACC,SAAS,QAAQC,KAAMnC,EAAS,aAAe,oBAGvC,iBAAVF,GAAsBA,KAEhC4B,EAAAC,IAACS,EAAQA,SAAA,CAACC,GAAIrC,EAAoB,cAAA,2BAChCD,SAAAI,EAAAmC,KAAClC,EAAGA,IAAC,CAAAC,GAAI,CAAEkC,WAAY,EAAGC,EAAG,CAAEN,SAAU,OAAQO,WAAY,SAC1D1C,SAAA,CAAoB,iBAAbA,GACN2B,EAACC,IAAAC,EAAUA,WAAC,CAAAtB,MAAM,UAAUuB,QAAQ,cAAa9B,SAC9CA,IAGgB,iBAAbA,GAAyBA,SAGjC"}

package/cjs/layout/Footer/FooterIconButton.d.ts

@@ -1,20 +0,0 @@
-import { IconButtonProps } from '@mui/material';
-import { IconNameProp } from '@/src/components/icon';
-import { ReactNode } from 'react';
-export type FooterIconButtonProps<C extends React.ElementType> = ({
-    /**
-     * Icon identifier
-     * @requires
-     */
-    icon: IconNameProp;
-} | {
-    /**
-     * Custom svg icon
-     * @requires
-     */
-    children: ReactNode;
-}) & IconButtonProps<C, {
-    component?: C;
-}>;
-/** Renders icon button intended for `Footer` component */
-export declare function FooterIconButton<C extends React.ElementType = 'button'>({ sx, icon, children, ...rest }: FooterIconButtonProps<C>): import("react/jsx-runtime").JSX.Element;

package/cjs/layout/Footer/FooterIconButton.js

@@ -1,2 +0,0 @@
-"use strict";var o=require("tslib"),e=require("react/jsx-runtime"),r=require("@mui/material"),n=require("../../components/icon/icon.js");exports.FooterIconButton=function(t){var{sx:c,icon:i,children:s}=t,u=o.__rest(t,["sx","icon","children"]);return e.jsx(r.IconButton,Object.assign({"data-testid":"FooterIconButton",size:"small",color:"white",sx:Object.assign({color:"onSurface.os0","&:hover":{backgroundColor:"onSurface.os700"}},c||{})},u,{children:s||e.jsx(n.Icon,{name:i})}))};
-//# sourceMappingURL=FooterIconButton.js.map

package/cjs/layout/Footer/FooterIconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FooterIconButton.js","sources":["../../../../../src/layout/Footer/FooterIconButton.tsx"],"sourcesContent":["import { IconButton, IconButtonProps } from '@mui/material';\nimport { Icon } from '../../components/icon/icon';\nimport { IconNameProp } from '@/src/components/icon';\nimport { ReactNode } from 'react';\n\nexport type FooterIconButtonProps<C extends React.ElementType> = (\n  | {\n      /**\n       * Icon identifier\n       * @requires\n       */\n      icon: IconNameProp;\n    }\n  | {\n      /**\n       * Custom svg icon\n       * @requires\n       */\n      children: ReactNode;\n    }\n) &\n  IconButtonProps<C, { component?: C }>;\n\n/** Renders icon button intended for `Footer` component */\nexport function FooterIconButton<C extends React.ElementType = 'button'>({\n  sx,\n  icon,\n  children,\n  ...rest\n}: FooterIconButtonProps<C>) {\n  return (\n    <IconButton\n      data-testid=\"FooterIconButton\"\n      size=\"small\"\n      color=\"white\"\n      sx={{\n        color: 'onSurface.os0',\n        '&:hover': {\n          backgroundColor: 'onSurface.os700',\n        },\n        ...(sx || {}),\n      }}\n      {...rest}\n    >\n      {children || <Icon name={icon} />}\n    </IconButton>\n  );\n}\n"],"names":["_a","sx","icon","children","rest","__rest","_jsx","IconButton","Object","assign","size","color","backgroundColor","jsx","Icon","name"],"mappings":"kKAwBM,SAAmEA,OAAAC,GACvEA,EACAC,KAAAA,EAAIC,SACJA,KACGC,EAJoEC,EAAAA,OAAAL,EAAA,CAAA,KAAA,OAAA,aAMvE,OACEM,EAAAA,IAACC,EAAAA,WAAUC,OAAAC,OAAA,CAAA,cACG,mBACZC,KAAK,QACLC,MAAM,QACNV,GAAEO,OAAAC,OAAA,CACAE,MAAO,gBACP,UAAW,CACTC,gBAAiB,oBAEfX,GAAM,CAAA,IAERG,EAEH,CAAAD,SAAAA,GAAYG,EAACO,IAAAC,EAAIA,MAACC,KAAMb,MAG/B"}

package/cjs/layout/Footer/FooterLink.d.ts

@@ -1,15 +0,0 @@
-import { StackProps } from '@mui/material';
-import React, { ReactNode } from 'react';
-import { IconNameProp } from '@/src/components/icon';
-export type FooterLinkProps<C extends React.ElementType> = {
-    /**
-     * Icon identifier
-     * @requires
-     */
-    icon?: IconNameProp;
-    children: ReactNode;
-} & StackProps<C, {
-    component?: C;
-}>;
-/** Renders link intended for `Footer` component */
-export declare function FooterLink<C extends React.ElementType = 'a'>(props: FooterLinkProps<C>): import("react/jsx-runtime").JSX.Element;

package/cjs/layout/Footer/FooterLink.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),n=require("@mui/material"),t=require("react"),i=require("../../components/icon/icon.js");exports.FooterLink=function(o){const{icon:c,children:s}=o,a=e.__rest(o,["icon","children"]),l=t.useMemo((()=>o.href||o.onClick),[o]);return r.jsxs(n.Stack,Object.assign({component:"a"},a,{direction:"row",spacing:1,alignItems:"center",sx:{color:e=>e.palette.onSurface.os0,textDecorationColor:e=>e.palette.onSurface.os0,textDecoration:"underline",textUnderlineOffset:"2px",cursor:l?"pointer":void 0,padding:"4px 8px","&:hover p":{textDecoration:l?"underline":void 0}},children:[c&&r.jsx(i.Icon,{fontSize:"small",name:c}),r.jsx(n.Typography,{variant:"list",children:s})]}))};
-//# sourceMappingURL=FooterLink.js.map

package/cjs/layout/Footer/FooterLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FooterLink.js","sources":["../../../../../src/layout/Footer/FooterLink.tsx"],"sourcesContent":["import { StackProps, Stack, Typography } from '@mui/material';\nimport React, { ReactNode, useMemo } from 'react';\nimport { Icon } from '../../components/icon/icon';\nimport { IconNameProp } from '@/src/components/icon';\n\nexport type FooterLinkProps<C extends React.ElementType> = {\n  /**\n   * Icon identifier\n   * @requires\n   */\n  icon?: IconNameProp;\n  children: ReactNode;\n} & StackProps<C, { component?: C }>;\n\n/** Renders link intended for `Footer` component */\nexport function FooterLink<C extends React.ElementType = 'a'>(props: FooterLinkProps<C>) {\n  const { icon, children, ...rest } = props;\n\n  const shouldDecorateText = useMemo(() => props.href || props.onClick, [props]);\n\n  return (\n    <Stack\n      component=\"a\"\n      {...rest}\n      direction=\"row\"\n      spacing={1}\n      alignItems=\"center\"\n      sx={{\n        color: (theme) => theme.palette.onSurface.os0,\n        textDecorationColor: (theme) => theme.palette.onSurface.os0,\n        textDecoration: 'underline',\n        textUnderlineOffset: '2px',\n        cursor: shouldDecorateText ? 'pointer' : undefined,\n        padding: '4px 8px',\n        '&:hover p': {\n          textDecoration: shouldDecorateText ? 'underline' : undefined,\n        },\n      }}\n    >\n      {icon && <Icon fontSize=\"small\" name={icon} />}\n      <Typography variant=\"list\">{children}</Typography>\n    </Stack>\n  );\n}\n"],"names":["props","icon","children","rest","__rest","shouldDecorateText","useMemo","href","onClick","_jsxs","Stack","Object","assign","component","direction","spacing","alignItems","sx","color","theme","palette","onSurface","os0","textDecorationColor","textDecoration","textUnderlineOffset","cursor","undefined","padding","_jsx","jsx","Icon","fontSize","name","Typography","variant"],"mappings":"+KAeM,SAAwDA,GAC5D,WAAQC,EAAIC,SAAEA,GAAsBF,EAATG,EAASC,EAAAA,OAAAJ,EAA9B,CAAA,OAAA,aAEAK,EAAqBC,EAAOA,SAAC,IAAMN,EAAMO,MAAQP,EAAMQ,SAAS,CAACR,IAEvE,OACES,EAAAA,KAACC,EAAAA,MAAKC,OAAAC,OAAA,CACJC,UAAU,KACNV,EACJ,CAAAW,UAAU,MACVC,QAAS,EACTC,WAAW,SACXC,GAAI,CACFC,MAAQC,GAAUA,EAAMC,QAAQC,UAAUC,IAC1CC,oBAAsBJ,GAAUA,EAAMC,QAAQC,UAAUC,IACxDE,eAAgB,YAChBC,oBAAqB,MACrBC,OAAQrB,EAAqB,eAAYsB,EACzCC,QAAS,UACT,YAAa,CACXJ,eAAgBnB,EAAqB,iBAAcsB,IAItDzB,SAAA,CAAAD,GAAQ4B,EAAAC,IAACC,EAAIA,KAAA,CAACC,SAAS,QAAQC,KAAMhC,IACtC4B,MAACK,EAAAA,WAAU,CAACC,QAAQ,OAAMjC,SAAEA,OAGlC"}