@skodaflow/web-library 7.13.1 → 7.14.0

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":"mcA+Fa,MAAAA,EAAuBC,IAAA,IAAAC,kBAClCA,EAAoB,MAAKC,eACzBA,GAAiB,EAAIC,mBACrBA,EAAqB,SAEtBH,EADII,EAAKC,EAAAL,EAJ0B,6DAMlC,MAAOM,EAAaC,GAAkBC,GAAS,GAWzCC,EACJC,EAAA,MAAA,CAAKC,UAAU,YAAWC,SACvBR,EAAMS,qBAAuBP,EAC5BI,EAACI,EAAwC,CAAAC,MAAOX,EAAMS,oBAAqBG,IAAKZ,EAAMa,cAAjE,oBAErBP,EAACI,EAAc,CAEbC,MAAOX,EAAMc,aACbF,IAAKZ,EAAMa,aACXE,cAAef,EAAMgB,sBAHhB,cAQPC,EACJC,EAAK,MAAA,CAAAX,UAAU,mBAAkBC,SAAA,CAC9BR,EAAMmB,gBAAkBb,UAAMC,UAAU,4BAA2BC,SAAER,EAAMmB,iBAC3EnB,EAAMmB,gBAAkBnB,EAAMoB,gBAAkBd,EAACe,EAAQ,CAAAC,YAAY,WAAWC,UAAW,IAC3FvB,EAAMoB,gBAAkBd,EAAA,OAAA,CAAMC,UAAU,4BAA2BC,SAAER,EAAMoB,oBAIhF,OACEd,EAACkB,EACC,CAAAC,iBAAkBzB,EAAMyB,iBACxB3B,eAAgBA,EAChBD,kBAAmBA,EAAiBW,SAEpCU,EAACQ,EACC,CAAAnB,UAAU,cACVoB,aAxCmB,KAClBzB,GACHC,GAAe,IAuCbyB,aAnCmB,KACvBzB,GAAe,EAAM,EAmCjB0B,QAAS,IAAM1B,GAAgB2B,IAAUA,IAExCtB,SAAA,CAAAR,EAAM+B,gBACLzB,EAACoB,EACC,CAAAnB,UAAU,mBACVoB,aAAc,IAAMxB,GAAe,GACnCyB,aAAc,IAAMzB,GAAe,GAEnCK,SAAAF,EAAC0B,EAAiBC,OAAAC,OAAA,CAAA,EAAKlC,EAAMmC,2BAGhCnC,EAAMyB,kBACLnB,EAAA,MAAA,CAAKC,UAAU,uBAAsBC,SACnCF,EAAC8B,GAAMC,KAAK,cAAcC,QAASvC,EAAoBwC,MAAOC,EAAexC,EAAMyB,iBAAkB,QAGlF,WAAtB5B,GAAkCQ,EACnCa,EAAA,MAAA,CAAKX,UAAU,cACZC,SAAA,CAAAR,EAAMyC,cACLnC,EAAK,MAAA,CAAAC,UAAU,mBACbC,SAAAF,EAAC8B,EAAM,CAAAG,MAAOC,EAAexC,EAAMyC,aAAc,QAGrDnC,EAAI,KAAA,CAAAC,UAAU,YAAaC,SAAAgC,EAAexC,EAAM0C,MAAO,MACtD1C,EAAM2C,cACLrC,EAAA,MAAA,CAAKC,UAAU,mBAAkBC,SAC/BF,EAAC8B,EACC,CAAAC,KAAK,UACLC,QAAStC,EAAM4C,oBACfL,MAAOC,EAAexC,EAAM2C,aAAc,QAIzB,WAAtB9C,GAAkCoB,KAEd,QAAtBpB,GAA+BQ,EACT,QAAtBR,GAA+BoB,MAEvB,EAIjBtB,EAAKkD,aAAe,CAClB/C,gBAAgB,EAChBC,mBAAoB,SAEtB,MAAMyB,EAAasB,EAAO,MAAPA,EAA8ClD,IAAA,IAAAmD,MAAEA,GAAgBnD,EAANoD,EAAI/C,EAAAL,EAAhB,WAC/D,IAAIqD,EAAS,CAAE,EACf,MAAMpD,kBAAEA,EAAiB4B,iBAAEA,EAAgB3B,eAAEA,GAAmBkD,EA0GhE,OAxGAC,EAAS,CACPC,OAAQ,OACR,mCAAoC,CAClCC,UAAW,cAEb,iBAAkB,CAChBC,SAAU,WACVC,aAAcvD,EAAiB,MAAQ,EACvCoD,OAAQ,OACRI,QAAS,OACTC,cAAe,SACfC,eAAgB,gBAChBC,gBAAiBV,EAAMW,QAAQC,QAAQC,QACvCC,QAAS,aACTC,OAAQ,aAAaf,EAAMW,QAAQC,QAAQI,aAE7C,sBAAuB,CACrBX,SAAU,WACVY,MAAO,EACPC,IAAK,EACL,qBAAsB,CACpBA,IAAK,EACLD,MAAO,EACPE,MAAO,OACPhB,OAAQ,OACRI,QAAS,OACTa,WAAY,SACZX,eAAgB,WAGpB,iBAAkB,CAChBY,WAAY3C,EAAmB,OAAS,QAE1C,0BAA2B,CACzByC,MAAO,OACPG,SAAU,oBACVjB,SAAU,WACVa,IAAK,IACLK,KAAM,KAER,sBAAuB,CACrBT,QAAS,SACTU,aAAc,IACdnB,SAAU,WACVoB,OAAQ,IACR,SAAU,CACRC,OAAQ,MAGZ,eAAgB,CACdA,OAAQ,YACRZ,QAAS,SACTT,SAAU,WACVoB,OAAQ,KAEV,sBAAuB,CACrBC,OAAQ,IACRZ,QAAS,SACTT,SAAU,WACVoB,OAAQ,IACR,SAAU,CACRC,OAAQ,MAGZ,eAAgB,CACdvB,OAAQ,QACRwB,UAAiC,QAAtB7E,EAA8B,QAAU,OACnD0E,aAAoC,WAAtB1E,EAAiC,QAAU,IACzD,CAACkD,EAAM4B,YAAYC,GAAG,OAAQ,CAC5B1B,OAAQ,SAEV,CAACH,EAAM4B,YAAYC,GAAG,OAAQ,CAC5B1B,OAAQ,SAEV,CAACH,EAAM4B,YAAYC,GAAG,OAAQ,CAC5B1B,OAAQ,SAEV,QAAS,CACPE,SAAU,WACVoB,OAAQ,IACRK,UAAW,UACXC,eAAgB,SAChBxB,QAAS,QACTJ,OAAQ,OACRgB,MAAO,SAGX,sBAAuB,CACrBZ,QAAS,OACTC,cAAe,MACfwB,SAAU,OACVb,MAAO,OACPL,QAAS,SACTa,UAAiC,WAAtB7E,EAAiC,MAAQ,IACpD,oBAAqB,CACnBmF,WAAY,QAEd,OAAQ,CACNP,OAAQ,QACRQ,YAAalC,EAAMW,QAAQwB,YAAYnB,aAKtCd,CAAM"}

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.14.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/materialui/tabs/scrollButtonComponent.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),o=require("@mui/material"),t=require("../../components/icon/stroke/ChevronLeftIcon.js"),s=require("../../components/icon/stroke/ChevronRightIcon.js");exports.FlowScrollButtonComponent=n=>{var{direction:i,slots:l,slotProps:c}=n,u=e.__rest(n,["direction","slots","slotProps"]);return r.jsx(o.Box,{sx:{m:"2px"},children:r.jsx(o.IconButton,Object.assign({"aria-label":"left"===i?"Scroll left":"Scroll right"},u,{children:"left"===i?r.jsx(t.ChevronLeftIcon,{}):r.jsx(s.ChevronRightIcon,{})}))})};
-//# sourceMappingURL=scrollButtonComponent.js.map

package/cjs/materialui/tabs/scrollButtonComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scrollButtonComponent.js","sources":["../../../../../src/materialui/tabs/scrollButtonComponent.tsx"],"sourcesContent":["import { IconButton, Box } from '@mui/material';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\n\n/**\n * This component renders a scroll button that changes based on the scroll direction\n */\nexport const FlowScrollButtonComponent = ({ direction, slots, slotProps, ...rest }) => {\n  return (\n    <Box sx={{ m: '2px' }}>\n      <IconButton aria-label={direction === 'left' ? 'Scroll left' : 'Scroll right'} {...rest}>\n        {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n      </IconButton>\n    </Box>\n  );\n};\n"],"names":["_a","direction","slots","slotProps","rest","__rest","_jsx","Box","sx","m","children","jsx","IconButton","Object","assign","ChevronLeftIcon","ChevronRightIcon"],"mappings":"2PAO0CA,QAAAC,UAAEA,EAASC,MAAEA,EAAKC,UAAEA,KAAcC,EAAlCC,EAAAA,OAAAL,EAAA,CAAA,YAAA,QAAA,cACxC,OACEM,EAAAA,IAACC,EAAAA,IAAG,CAACC,GAAI,CAAEC,EAAG,OACZC,SAAAJ,EAAAK,IAACC,EAAUA,WAAaC,OAAAC,OAAA,CAAA,aAAc,SAAdb,EAAuB,cAAgB,gBAAoBG,EAAI,CAAAM,SACtE,SAAdT,EAAuBK,EAAAK,IAACI,EAAeA,gBAAG,CAAA,GAAGT,EAAAA,IAACU,EAAAA,iBAAmB,CAAA,OAEhE"}

package/cjs/materialui/tabs/tabComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabComponent.js","sources":["../../../../../src/materialui/tabs/tabComponent.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { Box, ButtonBase, ButtonBaseProps } from '@mui/material';\n\n/**\n * Component used to render Tab, contains duplication of label to change font-weight without changing width\n */\nexport const FlowTabComponent: React.FC<ButtonBaseProps & { link?: boolean }> = forwardRef(\n  ({ children, link = false, ...rest }, ref) => {\n    // shared style between label and selectedLabel\n    const sharedLabelSx = useMemo(\n      () => ({\n        display: 'inherit',\n        alignItems: 'inherit',\n        justifyContent: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n      }),\n      [],\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        {...(link ? { component: 'a' } : {})}\n        {...rest}\n        tabIndex={rest.className?.includes('Mui-disabled') ? -1 : 0}\n      >\n        <Box className=\"FlowTab-labelWrapper\" sx={{ ...sharedLabelSx, position: 'relative' }}>\n          <Box\n            className=\"FlowTab-label\"\n            sx={{\n              ...sharedLabelSx,\n              position: 'absolute',\n              // expands from center, can be changed to expand from left/right with left: 0;\n            }}\n          >\n            {children}\n          </Box>\n          <Box\n            className=\"FlowTab-selectedLabel\"\n            sx={{\n              ...sharedLabelSx,\n              fontWeight: '700',\n              // hidden by default, appears once Tab is selected (tab.theme)\n              opacity: '0',\n              position: 'relative',\n            }}\n            aria-hidden=\"true\"\n          >\n            {children}\n          </Box>\n        </Box>\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["FlowTabComponent","forwardRef","_a","ref","children","link","rest","__rest","sharedLabelSx","useMemo","display","alignItems","justifyContent","flexDirection","gap","_jsx","ButtonBase","Object","assign","component","tabIndex","_b","className","includes","_jsxs","Box","sx","position","jsx","fontWeight","opacity"],"mappings":"iHAMa,MAAAA,EAAmEC,EAAUA,YACxF,CAACC,EAAqCC,YAArCC,SAAEA,EAAQC,KAAEA,GAAO,KAAUC,EAA7BC,EAAAA,OAAAL,EAAA,CAAA,WAAA,SAEC,MAAMM,EAAgBC,EAAAA,SACpB,KAAO,CACLC,QAAS,UACTC,WAAY,UACZC,eAAgB,UAChBC,cAAe,UACfC,IAAK,aAEP,IAGF,OACEC,MAACC,EAAUA,WAAAC,OAAAC,OAAA,CACTf,IAAKA,GACAE,EAAO,CAAEc,UAAW,KAAQ,CAAE,EAC/Bb,GACJc,UAAwB,QAAdC,EAAAf,EAAKgB,iBAAS,IAAAD,OAAA,EAAAA,EAAEE,SAAS,kBAAoB,EAAG,WAE1DC,EAAAA,KAACC,EAAGA,KAACH,UAAU,uBAAuBI,kCAASlB,GAAa,CAAEmB,SAAU,uBACtEZ,EAACa,IAAAH,OACCH,UAAU,gBACVI,kCACKlB,GAAa,CAChBmB,SAAU,sBAIXvB,IAEHW,MAACU,EAAAA,KACCH,UAAU,wBACVI,kCACKlB,GAAa,CAChBqB,WAAY,MAEZC,QAAS,IACTH,SAAU,aAAU,cAEV,OAAMvB,SAEjBA,SAGM"}

package/cjs/materialui/tabs/tabPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabPanel.js","sources":["../../../../../src/materialui/tabs/tabPanel.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\n/**\n * @interface TabPanelProps\n * @description Interface of TabPanel component.\n */\nexport interface TabPanelProps extends BoxProps<ElementType> {\n  /**\n   *  currently selected tab\n   */\n  value?: number | string;\n  /**\n   *  index of the tab panel, when equals to value, content is shown\n   */\n  index?: number | string;\n}\n\n/**\n * Show or hide content based on the provided value and index\n */\nexport function TabPanel({ children, value, index, ...rest }: TabPanelProps) {\n  return (\n    <Box role=\"tabpanel\" data-testid={`TabPanel-${index}`} {...rest}>\n      {value === index && children}\n    </Box>\n  );\n}\n"],"names":["_a","children","value","index","rest","__rest","_jsx","Box","Object","assign","role"],"mappings":"+GAqBM,SAAmBA,OAAAC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,KAAUC,EAA7BC,EAAAA,OAAAL,EAAA,CAAA,WAAA,QAAA,UACvB,OACEM,MAACC,EAAGA,IAAAC,OAAAC,OAAA,CAACC,KAAK,yBAAwB,YAAYP,KAAaC,YACxDF,IAAUC,GAASF,IAG1B"}

package/materialui/tabs/scrollButtonComponent.js

@@ -1,2 +0,0 @@
-import{__rest as o}from"tslib";import{jsx as r}from"react/jsx-runtime";import{Box as t,IconButton as e}from"@mui/material";import{ChevronLeftIcon as i}from"../../components/icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as s}from"../../components/icon/stroke/ChevronRightIcon.js";const n=n=>{var{direction:l,slots:m,slotProps:c}=n,p=o(n,["direction","slots","slotProps"]);return r(t,{sx:{m:"2px"},children:r(e,Object.assign({"aria-label":"left"===l?"Scroll left":"Scroll right"},p,{children:r("left"===l?i:s,{})}))})};export{n as FlowScrollButtonComponent};
-//# sourceMappingURL=scrollButtonComponent.js.map

package/materialui/tabs/scrollButtonComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scrollButtonComponent.js","sources":["../../../src/materialui/tabs/scrollButtonComponent.tsx"],"sourcesContent":["import { IconButton, Box } from '@mui/material';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\n\n/**\n * This component renders a scroll button that changes based on the scroll direction\n */\nexport const FlowScrollButtonComponent = ({ direction, slots, slotProps, ...rest }) => {\n  return (\n    <Box sx={{ m: '2px' }}>\n      <IconButton aria-label={direction === 'left' ? 'Scroll left' : 'Scroll right'} {...rest}>\n        {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n      </IconButton>\n    </Box>\n  );\n};\n"],"names":["FlowScrollButtonComponent","_a","direction","slots","slotProps","rest","__rest","_jsx","Box","sx","m","children","IconButton","Object","assign","ChevronLeftIcon","ChevronRightIcon"],"mappings":"iSAOa,MAAAA,EAA6BC,QAAAC,UAAEA,EAASC,MAAEA,EAAKC,UAAEA,KAAcC,EAAlCC,EAAAL,EAAA,CAAA,YAAA,QAAA,cACxC,OACEM,EAACC,EAAG,CAACC,GAAI,CAAEC,EAAG,OACZC,SAAAJ,EAACK,EAAuBC,OAAAC,OAAA,CAAA,aAAc,SAAdZ,EAAuB,cAAgB,gBAAoBG,EAAI,CAAAM,SAC7DJ,EAAT,SAAdL,EAAwBa,EAAsBC,EAAJ,CAAA,OAEzC"}

package/materialui/tabs/tabComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabComponent.js","sources":["../../../src/materialui/tabs/tabComponent.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { Box, ButtonBase, ButtonBaseProps } from '@mui/material';\n\n/**\n * Component used to render Tab, contains duplication of label to change font-weight without changing width\n */\nexport const FlowTabComponent: React.FC<ButtonBaseProps & { link?: boolean }> = forwardRef(\n  ({ children, link = false, ...rest }, ref) => {\n    // shared style between label and selectedLabel\n    const sharedLabelSx = useMemo(\n      () => ({\n        display: 'inherit',\n        alignItems: 'inherit',\n        justifyContent: 'inherit',\n        flexDirection: 'inherit',\n        gap: 'inherit',\n      }),\n      [],\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        {...(link ? { component: 'a' } : {})}\n        {...rest}\n        tabIndex={rest.className?.includes('Mui-disabled') ? -1 : 0}\n      >\n        <Box className=\"FlowTab-labelWrapper\" sx={{ ...sharedLabelSx, position: 'relative' }}>\n          <Box\n            className=\"FlowTab-label\"\n            sx={{\n              ...sharedLabelSx,\n              position: 'absolute',\n              // expands from center, can be changed to expand from left/right with left: 0;\n            }}\n          >\n            {children}\n          </Box>\n          <Box\n            className=\"FlowTab-selectedLabel\"\n            sx={{\n              ...sharedLabelSx,\n              fontWeight: '700',\n              // hidden by default, appears once Tab is selected (tab.theme)\n              opacity: '0',\n              position: 'relative',\n            }}\n            aria-hidden=\"true\"\n          >\n            {children}\n          </Box>\n        </Box>\n      </ButtonBase>\n    );\n  },\n);\n"],"names":["FlowTabComponent","forwardRef","_a","ref","children","link","rest","__rest","sharedLabelSx","useMemo","display","alignItems","justifyContent","flexDirection","gap","_jsx","ButtonBase","Object","assign","component","tabIndex","_b","className","includes","_jsxs","Box","sx","position","fontWeight","opacity"],"mappings":"qLAMa,MAAAA,EAAmEC,GAC9E,CAACC,EAAqCC,YAArCC,SAAEA,EAAQC,KAAEA,GAAO,KAAUC,EAA7BC,EAAAL,EAAA,CAAA,WAAA,SAEC,MAAMM,EAAgBC,GACpB,KAAO,CACLC,QAAS,UACTC,WAAY,UACZC,eAAgB,UAChBC,cAAe,UACfC,IAAK,aAEP,IAGF,OACEC,EAACC,EAAUC,OAAAC,OAAA,CACTf,IAAKA,GACAE,EAAO,CAAEc,UAAW,KAAQ,CAAE,EAC/Bb,GACJc,UAAwB,QAAdC,EAAAf,EAAKgB,iBAAS,IAAAD,OAAA,EAAAA,EAAEE,SAAS,kBAAoB,EAAG,WAE1DC,EAACC,GAAIH,UAAU,uBAAuBI,kCAASlB,GAAa,CAAEmB,SAAU,uBACtEZ,EAACU,GACCH,UAAU,gBACVI,kCACKlB,GAAa,CAChBmB,SAAU,sBAIXvB,IAEHW,EAACU,GACCH,UAAU,wBACVI,kCACKlB,GAAa,CAChBoB,WAAY,MAEZC,QAAS,IACTF,SAAU,aAAU,cAEV,OAAMvB,SAEjBA,SAGM"}

package/materialui/tabs/tabPanel.js

@@ -1,2 +0,0 @@
-import{__rest as e}from"tslib";import{jsx as r}from"react/jsx-runtime";import{Box as i}from"@mui/material";function t(t){var{children:a,value:n,index:l}=t,m=e(t,["children","value","index"]);return r(i,Object.assign({role:"tabpanel","data-testid":`TabPanel-${l}`},m,{children:n===l&&a}))}export{t as TabPanel};
-//# sourceMappingURL=tabPanel.js.map

package/materialui/tabs/tabPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabPanel.js","sources":["../../../src/materialui/tabs/tabPanel.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\n/**\n * @interface TabPanelProps\n * @description Interface of TabPanel component.\n */\nexport interface TabPanelProps extends BoxProps<ElementType> {\n  /**\n   *  currently selected tab\n   */\n  value?: number | string;\n  /**\n   *  index of the tab panel, when equals to value, content is shown\n   */\n  index?: number | string;\n}\n\n/**\n * Show or hide content based on the provided value and index\n */\nexport function TabPanel({ children, value, index, ...rest }: TabPanelProps) {\n  return (\n    <Box role=\"tabpanel\" data-testid={`TabPanel-${index}`} {...rest}>\n      {value === index && children}\n    </Box>\n  );\n}\n"],"names":["TabPanel","_a","children","value","index","rest","__rest","_jsx","Box","Object","assign","role"],"mappings":"2GAqBM,SAAUA,EAASC,OAAAC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,KAAUC,EAA7BC,EAAAL,EAAA,CAAA,WAAA,QAAA,UACvB,OACEM,EAACC,EAAGC,OAAAC,OAAA,CAACC,KAAK,yBAAwB,YAAYP,KAAaC,YACxDF,IAAUC,GAASF,IAG1B"}