@skodaflow/web-library 7.13.1 → 7.14.0

package/organisms/carousel/styledComponents/styledCarouselHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"styledCarouselHorizontal.js","sources":["../../../../src/organisms/carousel/styledComponents/styledCarouselHorizontal.tsx"],"sourcesContent":["import { styled } from '@mui/system';\nimport { ternaryCondition } from '../../../utils/utilities';\nimport { CarouselPropType } from '../carousel';\nimport { Theme } from '@mui/material';\nexport enum controlButtonsHover {\n  NEXT = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNOC4xNDYgMTYuNDk2VjE5LjJIMjMuNzcyTDE2Ljg4MiAyNi4wMTJMMTguNTQ2IDI3LjY3NkwyOC4zNzQgMTcuODQ4TDE4LjU0NiA4LjAyTDE2Ljg4MiA5LjY4NEwyMy43NzIgMTYuNDk2SDguMTQ2WiIgZmlsbD0iIzE2MTcxOCIvPgo8L3N2Zz4K',\n  PREV = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMTkuMTE4IDI2LjAxMkwxMi4yMjggMTkuMkgyNy44NTRWMTYuNDk2SDEyLjIyOEwxOS4xMTggOS42ODRMMTcuNDU0IDguMDJMNy42MjYgMTcuODQ4TDE3LjQ1NCAyNy42NzZMMTkuMTE4IDI2LjAxMloiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+Cg==',\n}\n\nexport const CarouselStyledHorizontal = styled('div', {\n  shouldForwardProp: (prop) =>\n    prop !== 'isSlideDifferentWidth' &&\n    prop !== 'slidesItems' &&\n    prop !== 'slideToShow' &&\n    prop !== 'bulletTheme' &&\n    prop !== 'numberingSeparator' &&\n    prop !== 'numberingSlides' &&\n    prop !== 'startIndex' &&\n    prop !== 'cssClass' &&\n    prop !== 'buttonControls' &&\n    prop !== 'buttonAreaControlsHeight' &&\n    prop !== 'slideToScroll' &&\n    prop !== 'prevControlIcon' &&\n    prop !== 'nextControlIcon' &&\n    prop !== 'controlColor' &&\n    prop !== 'controlIconStyle' &&\n    prop !== 'controlVariant' &&\n    prop !== 'controlIconFontSize' &&\n    prop !== 'slideSelectedClass' &&\n    prop !== 'heightSlide' &&\n    prop !== 'bulletScroll' &&\n    prop !== 'bulletStyle',\n})<CarouselPropType & { theme?: Theme }>(({ theme, ...args }) => {\n  const props = args as CarouselPropType;\n  let styles = {};\n  styles = {\n    ...styles,\n    '& .embla': {\n      position: 'relative',\n      padding: '0px',\n      maxWidth: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n      boxSizing: 'border-box',\n      '& *': {\n        boxSizing: 'border-box',\n      },\n      [theme.breakpoints.up('md')]: {\n        '&.embla-container-next': {\n          '& .embla__container': {\n            left: props.align === 'center' ? '-6%' : '-3%',\n          },\n        },\n        '&.embla-container-prev': {\n          '& .embla__container': {\n            left: props.align === 'center' ? '-2%' : '3%',\n          },\n        },\n      },\n    },\n    '& .embla__viewport': {\n      overflow: 'hidden',\n      width: '100%',\n    },\n    '& .embla__viewport.is-draggable': {\n      cursor: 'move',\n    },\n    '& .embla__viewport.is-dragging': {\n      cursor: 'grabbing',\n    },\n    '& .embla__container': {\n      display: 'flex',\n      userSelect: 'none',\n      webkitTouchCallout: 'none',\n      khtmlUserSelect: 'none',\n      webkitTapHighlightColor: 'transparent',\n      marginLeft: '-24px',\n      transition: 'left .4s',\n      [theme.breakpoints.up('md')]: {\n        position: 'relative',\n        left: props.align === 'center' ? '-4%' : '0',\n      },\n    },\n    '& .embla__slide': {\n      position: 'relative',\n      flex: '0 0 auto',\n      paddingLeft: '24px',\n      [theme.breakpoints.down('md')]: {\n        width: props.isSlideDifferentWidth ? '' : '100%',\n      },\n    },\n    '& .embla__slide__inner': {\n      position: 'relative',\n      overflow: 'hidden',\n      height: '100%',\n      display: props.isSlideDifferentWidth ? 'flex' : '',\n      '& img': {\n        maxWidth: '100%',\n        height: '100%',\n        objectFit: 'cover',\n      },\n    },\n    '& .embla__button': {\n      position: 'absolute',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      top: '0',\n      height: '100%',\n      zIndex: '2',\n      border: '0',\n      boxShadow: 'none',\n      backgroundColor: 'transparent',\n      cursor: 'auto',\n      borderRadius: 0,\n      '& .MuiIcon-fontSizeSmall': {\n        width: '24px',\n        height: '24px',\n      },\n      '& .MuiIcon-fontSizeMedium': {\n        width: '32px',\n        height: '32px',\n      },\n      '&:disabled': {\n        '& .MuiIcon-root': {\n          color: theme.palette.disabled.primary,\n        },\n        '&:hover': {\n          [theme.breakpoints.up('lg')]: {\n            '& .MuiIcon-root': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      },\n    },\n    '& .embla__button--prev': {\n      left: '0',\n      width: '12%',\n    },\n    '& .embla__button--prev.prev--hovered': {\n      [theme.breakpoints.up('lg')]: {\n        cursor: `url(${controlButtonsHover.PREV}), auto`,\n        '& button': {\n          transform: 'scale(0)',\n        },\n      },\n    },\n    '& .embla__button--next': {\n      right: '0',\n      width: '12%',\n    },\n    '& .embla__button--next.next--hovered': {\n      [theme.breakpoints.up('lg')]: {\n        cursor: `url(${controlButtonsHover.NEXT}), auto`,\n        '& button': {\n          transform: 'scale(0)',\n        },\n      },\n    },\n    '& .embla__progress': {\n      position: 'relative',\n      backgroundColor: 'transparent',\n      marginTop: props.numberingSlides === true ? '30px' : '10px',\n      maxWidth: '100%',\n      width: '100%',\n      height: '4px',\n      overflow: 'hidden',\n      borderRadius: '4px',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n    },\n    '& .embla__progress__bar': {\n      position: 'absolute',\n      backgroundColor: theme.palette.onSurface.os200,\n      width: '100%',\n      top: '0',\n      bottom: '0',\n      left: '-100%',\n    },\n    '& .carousel_numbering': {\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        right: '11%',\n      },\n      [theme.breakpoints.down('md')]: {\n        textAlign: 'center',\n      },\n    },\n    '& .embla__dots': {\n      display: 'flex',\n      listStyle: 'none',\n      justifyContent: 'center',\n      paddingTop: '10px',\n\n      '& .embla__dot': {\n        backgroundColor: 'transparent',\n        cursor: 'pointer',\n        position: 'relative',\n        padding: '0',\n        outline: '0',\n        border: '0',\n        width: '30px',\n        height: '30px',\n        marginRight: '7.5px',\n        marginLeft: '7.5px',\n        display: 'flex',\n        alignItems: 'center',\n\n        '&:after': {\n          backgroundColor: theme.palette.disabled.secondary,\n          width: '50px',\n          height: '4px',\n          borderRadius: '2px',\n          content: '\"\"',\n        },\n        '&.is-selected': {\n          '&:after': {\n            backgroundColor: theme.palette.onSurface.os900,\n            opacity: '1',\n          },\n        },\n      },\n      '& .embla__dot_small': {\n        backgroundColor: 'transparent',\n        cursor: 'pointer',\n        position: 'relative',\n        padding: '0',\n        outline: '0',\n        border: '0',\n        width: '12px',\n        height: '6px',\n        marginRight: '6px',\n        marginLeft: '6px',\n        display: 'flex',\n        alignItems: 'center',\n\n        '&:after': {\n          backgroundColor: ternaryCondition(\n            props.bulletTheme,\n            'dark',\n            theme.palette.onSurface.os900,\n            theme.palette.surface.tertiary,\n          ),\n          width: '6px',\n          height: '6px',\n          borderRadius: '50%',\n          content: '\"\"',\n        },\n        '&.is-selected': {\n          '&:after': {\n            backgroundColor: 'transparent',\n            height: '12px',\n            width: '12px',\n            border: ternaryCondition(\n              props.bulletTheme,\n              'dark',\n              theme.palette.onSurface.os900,\n              theme.palette.surface.tertiary,\n            ),\n            borderRadius: '50%',\n            opacity: '1',\n          },\n        },\n      },\n    },\n  };\n  switch (props.slideToShow) {\n    case 1:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          paddingLeft: '24px',\n          [theme.breakpoints.up('md')]: {\n            flex: props.isSlideDifferentWidth ? '0 0 auto' : '0 0 100%',\n            maxWidth: props.isSlideDifferentWidth === true ? ' 100%' : '80%',\n          },\n        },\n      });\n    case 2:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          [theme.breakpoints.up('md')]: {\n            flex: '0 0 50%',\n          },\n          paddingLeft: '24px',\n        },\n      });\n    case 3:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          [theme.breakpoints.up('md')]: {\n            flex: '0 0 33.33%',\n          },\n          paddingLeft: '24px',\n        },\n      });\n    case 4:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          [theme.breakpoints.up('md')]: {\n            flex: '0 0 25%',\n          },\n          paddingLeft: '24px',\n        },\n      });\n  }\n  return styles;\n});\n"],"names":["controlButtonsHover","CarouselStyledHorizontal","styled","shouldForwardProp","prop","_a","theme","props","__rest","styles","Object","assign","position","padding","maxWidth","marginLeft","marginRight","boxSizing","breakpoints","up","left","align","overflow","width","cursor","display","userSelect","webkitTouchCallout","khtmlUserSelect","webkitTapHighlightColor","transition","flex","paddingLeft","down","isSlideDifferentWidth","height","objectFit","alignItems","justifyContent","top","zIndex","border","boxShadow","backgroundColor","borderRadius","color","palette","disabled","primary","PREV","transform","right","NEXT","marginTop","numberingSlides","onSurface","os200","bottom","textAlign","listStyle","paddingTop","outline","secondary","content","os900","opacity","ternaryCondition","bulletTheme","surface","tertiary","slideToShow"],"mappings":"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"}
+{"version":3,"file":"styledCarouselHorizontal.js","sources":["../../../../src/organisms/carousel/styledComponents/styledCarouselHorizontal.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport { ternaryCondition } from '../../../utils/utilities';\nimport { CarouselPropType } from '../carousel';\nimport { Theme } from '@mui/material';\nexport enum controlButtonsHover {\n  NEXT = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNOC4xNDYgMTYuNDk2VjE5LjJIMjMuNzcyTDE2Ljg4MiAyNi4wMTJMMTguNTQ2IDI3LjY3NkwyOC4zNzQgMTcuODQ4TDE4LjU0NiA4LjAyTDE2Ljg4MiA5LjY4NEwyMy43NzIgMTYuNDk2SDguMTQ2WiIgZmlsbD0iIzE2MTcxOCIvPgo8L3N2Zz4K',\n  PREV = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOCIvPgo8cGF0aCBkPSJNMTkuMTE4IDI2LjAxMkwxMi4yMjggMTkuMkgyNy44NTRWMTYuNDk2SDEyLjIyOEwxOS4xMTggOS42ODRMMTcuNDU0IDguMDJMNy42MjYgMTcuODQ4TDE3LjQ1NCAyNy42NzZMMTkuMTE4IDI2LjAxMloiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+Cg==',\n}\n\nexport const CarouselStyledHorizontal = styled('div', {\n  shouldForwardProp: (prop) =>\n    prop !== 'isSlideDifferentWidth' &&\n    prop !== 'slidesItems' &&\n    prop !== 'slideToShow' &&\n    prop !== 'bulletTheme' &&\n    prop !== 'numberingSeparator' &&\n    prop !== 'numberingSlides' &&\n    prop !== 'startIndex' &&\n    prop !== 'cssClass' &&\n    prop !== 'buttonControls' &&\n    prop !== 'buttonAreaControlsHeight' &&\n    prop !== 'slideToScroll' &&\n    prop !== 'prevControlIcon' &&\n    prop !== 'nextControlIcon' &&\n    prop !== 'controlColor' &&\n    prop !== 'controlIconStyle' &&\n    prop !== 'controlVariant' &&\n    prop !== 'controlIconFontSize' &&\n    prop !== 'slideSelectedClass' &&\n    prop !== 'heightSlide' &&\n    prop !== 'bulletScroll' &&\n    prop !== 'bulletStyle',\n})<CarouselPropType & { theme?: Theme }>(({ theme, ...args }) => {\n  const props = args as CarouselPropType;\n  let styles = {};\n  styles = {\n    ...styles,\n    '& .embla': {\n      position: 'relative',\n      padding: '0px',\n      maxWidth: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n      boxSizing: 'border-box',\n      '& *': {\n        boxSizing: 'border-box',\n      },\n      [theme.breakpoints.up('md')]: {\n        '&.embla-container-next': {\n          '& .embla__container': {\n            left: props.align === 'center' ? '-6%' : '-3%',\n          },\n        },\n        '&.embla-container-prev': {\n          '& .embla__container': {\n            left: props.align === 'center' ? '-2%' : '3%',\n          },\n        },\n      },\n    },\n    '& .embla__viewport': {\n      overflow: 'hidden',\n      width: '100%',\n    },\n    '& .embla__viewport.is-draggable': {\n      cursor: 'move',\n    },\n    '& .embla__viewport.is-dragging': {\n      cursor: 'grabbing',\n    },\n    '& .embla__container': {\n      display: 'flex',\n      userSelect: 'none',\n      webkitTouchCallout: 'none',\n      khtmlUserSelect: 'none',\n      webkitTapHighlightColor: 'transparent',\n      marginLeft: '-24px',\n      transition: 'left .4s',\n      [theme.breakpoints.up('md')]: {\n        position: 'relative',\n        left: props.align === 'center' ? '-4%' : '0',\n      },\n    },\n    '& .embla__slide': {\n      position: 'relative',\n      flex: '0 0 auto',\n      paddingLeft: '24px',\n      [theme.breakpoints.down('md')]: {\n        width: props.isSlideDifferentWidth ? '' : '100%',\n      },\n    },\n    '& .embla__slide__inner': {\n      position: 'relative',\n      overflow: 'hidden',\n      height: '100%',\n      display: props.isSlideDifferentWidth ? 'flex' : '',\n      '& img': {\n        maxWidth: '100%',\n        height: '100%',\n        objectFit: 'cover',\n      },\n    },\n    '& .embla__button': {\n      position: 'absolute',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      top: '0',\n      height: '100%',\n      zIndex: '2',\n      border: '0',\n      boxShadow: 'none',\n      backgroundColor: 'transparent',\n      cursor: 'auto',\n      borderRadius: 0,\n      '& .MuiIcon-fontSizeSmall': {\n        width: '24px',\n        height: '24px',\n      },\n      '& .MuiIcon-fontSizeMedium': {\n        width: '32px',\n        height: '32px',\n      },\n      '&:disabled': {\n        '& .MuiIcon-root': {\n          color: theme.palette.disabled.primary,\n        },\n        '&:hover': {\n          [theme.breakpoints.up('lg')]: {\n            '& .MuiIcon-root': {\n              backgroundColor: 'transparent',\n            },\n          },\n        },\n      },\n    },\n    '& .embla__button--prev': {\n      left: '0',\n      width: '12%',\n    },\n    '& .embla__button--prev.prev--hovered': {\n      [theme.breakpoints.up('lg')]: {\n        cursor: `url(${controlButtonsHover.PREV}), auto`,\n        '& button': {\n          transform: 'scale(0)',\n        },\n      },\n    },\n    '& .embla__button--next': {\n      right: '0',\n      width: '12%',\n    },\n    '& .embla__button--next.next--hovered': {\n      [theme.breakpoints.up('lg')]: {\n        cursor: `url(${controlButtonsHover.NEXT}), auto`,\n        '& button': {\n          transform: 'scale(0)',\n        },\n      },\n    },\n    '& .embla__progress': {\n      position: 'relative',\n      backgroundColor: 'transparent',\n      marginTop: props.numberingSlides === true ? '30px' : '10px',\n      maxWidth: '100%',\n      width: '100%',\n      height: '4px',\n      overflow: 'hidden',\n      borderRadius: '4px',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n    },\n    '& .embla__progress__bar': {\n      position: 'absolute',\n      backgroundColor: theme.palette.onSurface.os200,\n      width: '100%',\n      top: '0',\n      bottom: '0',\n      left: '-100%',\n    },\n    '& .carousel_numbering': {\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        right: '11%',\n      },\n      [theme.breakpoints.down('md')]: {\n        textAlign: 'center',\n      },\n    },\n    '& .embla__dots': {\n      display: 'flex',\n      listStyle: 'none',\n      justifyContent: 'center',\n      paddingTop: '10px',\n\n      '& .embla__dot': {\n        backgroundColor: 'transparent',\n        cursor: 'pointer',\n        position: 'relative',\n        padding: '0',\n        outline: '0',\n        border: '0',\n        width: '30px',\n        height: '30px',\n        marginRight: '7.5px',\n        marginLeft: '7.5px',\n        display: 'flex',\n        alignItems: 'center',\n\n        '&:after': {\n          backgroundColor: theme.palette.disabled.secondary,\n          width: '50px',\n          height: '4px',\n          borderRadius: '2px',\n          content: '\"\"',\n        },\n        '&.is-selected': {\n          '&:after': {\n            backgroundColor: theme.palette.onSurface.os900,\n            opacity: '1',\n          },\n        },\n      },\n      '& .embla__dot_small': {\n        backgroundColor: 'transparent',\n        cursor: 'pointer',\n        position: 'relative',\n        padding: '0',\n        outline: '0',\n        border: '0',\n        width: '12px',\n        height: '6px',\n        marginRight: '6px',\n        marginLeft: '6px',\n        display: 'flex',\n        alignItems: 'center',\n\n        '&:after': {\n          backgroundColor: ternaryCondition(\n            props.bulletTheme,\n            'dark',\n            theme.palette.onSurface.os900,\n            theme.palette.surface.tertiary,\n          ),\n          width: '6px',\n          height: '6px',\n          borderRadius: '50%',\n          content: '\"\"',\n        },\n        '&.is-selected': {\n          '&:after': {\n            backgroundColor: 'transparent',\n            height: '12px',\n            width: '12px',\n            border: ternaryCondition(\n              props.bulletTheme,\n              'dark',\n              theme.palette.onSurface.os900,\n              theme.palette.surface.tertiary,\n            ),\n            borderRadius: '50%',\n            opacity: '1',\n          },\n        },\n      },\n    },\n  };\n  switch (props.slideToShow) {\n    case 1:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          paddingLeft: '24px',\n          [theme.breakpoints.up('md')]: {\n            flex: props.isSlideDifferentWidth ? '0 0 auto' : '0 0 100%',\n            maxWidth: props.isSlideDifferentWidth === true ? ' 100%' : '80%',\n          },\n        },\n      });\n    case 2:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          [theme.breakpoints.up('md')]: {\n            flex: '0 0 50%',\n          },\n          paddingLeft: '24px',\n        },\n      });\n    case 3:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          [theme.breakpoints.up('md')]: {\n            flex: '0 0 33.33%',\n          },\n          paddingLeft: '24px',\n        },\n      });\n    case 4:\n      return (styles = {\n        ...styles,\n        '& .embla__slide': {\n          position: 'relative',\n          flex: '0 0 100%',\n          [theme.breakpoints.up('md')]: {\n            flex: '0 0 25%',\n          },\n          paddingLeft: '24px',\n        },\n      });\n  }\n  return styles;\n});\n"],"names":["controlButtonsHover","CarouselStyledHorizontal","styled","shouldForwardProp","prop","_a","theme","props","__rest","styles","Object","assign","position","padding","maxWidth","marginLeft","marginRight","boxSizing","breakpoints","up","left","align","overflow","width","cursor","display","userSelect","webkitTouchCallout","khtmlUserSelect","webkitTapHighlightColor","transition","flex","paddingLeft","down","isSlideDifferentWidth","height","objectFit","alignItems","justifyContent","top","zIndex","border","boxShadow","backgroundColor","borderRadius","color","palette","disabled","primary","PREV","transform","right","NEXT","marginTop","numberingSlides","onSurface","os200","bottom","textAlign","listStyle","paddingTop","outline","secondary","content","os900","opacity","ternaryCondition","bulletTheme","surface","tertiary","slideToShow"],"mappings":"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"}

package/organisms/carousel/styledComponents/styledCarouselVertical.d.ts

@@ -1,4 +1,4 @@
 import { CarouselPropType } from '../carousel';
-export declare const CarouselStyledVertical: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & CarouselPropType & {
+export declare const CarouselStyledVertical: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & CarouselPropType & {
     theme?: any;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/organisms/carousel/styledComponents/styledCarouselVertical.js

@@ -1,2 +1,2 @@
-import{styled as t}from"@mui/system";const o=t("div",{shouldForwardProp:t=>"isSlideDifferentWidth"!==t&&"slidesItems"!==t&&"slideToShow"!==t&&"bulletTheme"!==t&&"numberingSeparator"!==t&&"numberingSlides"!==t&&"startIndex"!==t&&"cssClass"!==t&&"buttonControls"!==t&&"buttonAreaControlsHeight"!==t&&"slideToScroll"!==t&&"prevControlIcon"!==t&&"nextControlIcon"!==t&&"controlColor"!==t&&"controlIconStyle"!==t&&"controlVariant"!==t&&"controlIconFontSize"!==t&&"slideSelectedClass"!==t&&"heightSlide"!==t&&"bulletScroll"!==t&&"bulletStyle"!==t})((({theme:t})=>{let o={};return o=Object.assign(Object.assign({},o),{"& .embla":{position:"relative",padding:"0px",maxWidth:"100%",marginLeft:"auto",marginRight:"auto"},"& .embla__viewport":{overflow:"hidden",width:"100%"},"& .embla__viewport.is-draggable":{cursor:"move grab"},"& .embla__viewport.is-dragging":{cursor:"grabbing"},"& .embla__container":{userSelect:"none",webkitTouchCallout:"none",khtmlUserSelect:"none",webkitTapHighlightColor:"transparent",marginTop:NaN,height:"450px"},"& .embla__slide":{position:"relative",overflow:"hidden",height:"100%",width:"100%",maxWidth:"100%","& *":{maxwidth:"100%"},"& .MuiButton-root":{[t.breakpoints.up("md")]:{width:"auto"}}},"& .embla__slide__inner":{position:"relative",overflow:"hidden",height:"100%"},"& .embla__slide__img":{position:"absolute",display:"block",top:" 50%",left:"50%",width:"auto",minHeight:"100%",minWidth:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"},"& .embla__button":{position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",top:"0",height:"100%",zIndex:"2",border:"0",boxShadow:"none",backgroundColor:"transparent",cursor:"pointer","& .MuiIcon-fontSizeSmall":{width:"24px",height:"24px"},"& .MuiIcon-fontSizeMedium":{width:"32px",height:"32px"},"&:hover":{"& .MuiIcon-root":{borderRadius:"50%",backgroundColor:t.palette.onSurface.os100,transfrom:"translateY(-3px)"}},"&:disabled":{"& .MuiIcon-root":{color:t.palette.disabled.primary},"&:hover":{"& .MuiIcon-root":{backgroundColor:"transparent"}}}},"& .embla__button--prev":{left:"0",width:"12%"},"& .embla__button--next":{right:"0",width:"20%"},"& .embla__progress":{position:"relative",backgroundColor:"transparent",marginTop:"10px",maxWidth:"100%",width:"100%",height:"4px",overflow:"hidden",borderRadius:"4px",marginLeft:"auto",marginRight:"auto"},"& .embla__progress__bar":{position:"absolute",backgroundColor:t.palette.onSurface.os200,width:"100%",top:"0",bottom:"0",left:"-100%"}}),o}));export{o as CarouselStyledVertical};
+import{styled as t}from"@mui/material/styles";const o=t("div",{shouldForwardProp:t=>"isSlideDifferentWidth"!==t&&"slidesItems"!==t&&"slideToShow"!==t&&"bulletTheme"!==t&&"numberingSeparator"!==t&&"numberingSlides"!==t&&"startIndex"!==t&&"cssClass"!==t&&"buttonControls"!==t&&"buttonAreaControlsHeight"!==t&&"slideToScroll"!==t&&"prevControlIcon"!==t&&"nextControlIcon"!==t&&"controlColor"!==t&&"controlIconStyle"!==t&&"controlVariant"!==t&&"controlIconFontSize"!==t&&"slideSelectedClass"!==t&&"heightSlide"!==t&&"bulletScroll"!==t&&"bulletStyle"!==t})((({theme:t})=>{let o={};return o=Object.assign(Object.assign({},o),{"& .embla":{position:"relative",padding:"0px",maxWidth:"100%",marginLeft:"auto",marginRight:"auto"},"& .embla__viewport":{overflow:"hidden",width:"100%"},"& .embla__viewport.is-draggable":{cursor:"move grab"},"& .embla__viewport.is-dragging":{cursor:"grabbing"},"& .embla__container":{userSelect:"none",webkitTouchCallout:"none",khtmlUserSelect:"none",webkitTapHighlightColor:"transparent",marginTop:NaN,height:"450px"},"& .embla__slide":{position:"relative",overflow:"hidden",height:"100%",width:"100%",maxWidth:"100%","& *":{maxwidth:"100%"},"& .MuiButton-root":{[t.breakpoints.up("md")]:{width:"auto"}}},"& .embla__slide__inner":{position:"relative",overflow:"hidden",height:"100%"},"& .embla__slide__img":{position:"absolute",display:"block",top:" 50%",left:"50%",width:"auto",minHeight:"100%",minWidth:"100%",maxWidth:"none",transform:"translate(-50%, -50%)"},"& .embla__button":{position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",top:"0",height:"100%",zIndex:"2",border:"0",boxShadow:"none",backgroundColor:"transparent",cursor:"pointer","& .MuiIcon-fontSizeSmall":{width:"24px",height:"24px"},"& .MuiIcon-fontSizeMedium":{width:"32px",height:"32px"},"&:hover":{"& .MuiIcon-root":{borderRadius:"50%",backgroundColor:t.palette.onSurface.os100,transfrom:"translateY(-3px)"}},"&:disabled":{"& .MuiIcon-root":{color:t.palette.disabled.primary},"&:hover":{"& .MuiIcon-root":{backgroundColor:"transparent"}}}},"& .embla__button--prev":{left:"0",width:"12%"},"& .embla__button--next":{right:"0",width:"20%"},"& .embla__progress":{position:"relative",backgroundColor:"transparent",marginTop:"10px",maxWidth:"100%",width:"100%",height:"4px",overflow:"hidden",borderRadius:"4px",marginLeft:"auto",marginRight:"auto"},"& .embla__progress__bar":{position:"absolute",backgroundColor:t.palette.onSurface.os200,width:"100%",top:"0",bottom:"0",left:"-100%"}}),o}));export{o as CarouselStyledVertical};
 //# sourceMappingURL=styledCarouselVertical.js.map

package/organisms/carousel/styledComponents/styledCarouselVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"styledCarouselVertical.js","sources":["../../../../src/organisms/carousel/styledComponents/styledCarouselVertical.tsx"],"sourcesContent":["import { styled } from '@mui/system';\nimport { CarouselPropType } from '../carousel';\n\nexport const CarouselStyledVertical = styled('div', {\n  shouldForwardProp: (prop) =>\n    prop !== 'isSlideDifferentWidth' &&\n    prop !== 'slidesItems' &&\n    prop !== 'slideToShow' &&\n    prop !== 'bulletTheme' &&\n    prop !== 'numberingSeparator' &&\n    prop !== 'numberingSlides' &&\n    prop !== 'startIndex' &&\n    prop !== 'cssClass' &&\n    prop !== 'buttonControls' &&\n    prop !== 'buttonAreaControlsHeight' &&\n    prop !== 'slideToScroll' &&\n    prop !== 'prevControlIcon' &&\n    prop !== 'nextControlIcon' &&\n    prop !== 'controlColor' &&\n    prop !== 'controlIconStyle' &&\n    prop !== 'controlVariant' &&\n    prop !== 'controlIconFontSize' &&\n    prop !== 'slideSelectedClass' &&\n    prop !== 'heightSlide' &&\n    prop !== 'bulletScroll' &&\n    prop !== 'bulletStyle',\n})<CarouselPropType & { theme? }>(({ theme }) => {\n  // const props = args as CarouselPropType;\n  let styles = {};\n  styles = {\n    ...styles,\n    '& .embla': {\n      position: 'relative',\n      padding: '0px',\n      maxWidth: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n    },\n    '& .embla__viewport': {\n      overflow: 'hidden',\n      width: '100%',\n    },\n    '& .embla__viewport.is-draggable': {\n      cursor: 'move grab',\n    },\n    '& .embla__viewport.is-dragging': {\n      cursor: 'grabbing',\n    },\n    '& .embla__container': {\n      //display: 'flex',\n      userSelect: 'none',\n      webkitTouchCallout: 'none',\n      khtmlUserSelect: 'none',\n      webkitTapHighlightColor: 'transparent',\n      marginTop: -'10px',\n      height: '450px',\n    },\n    '& .embla__slide': {\n      position: 'relative',\n      overflow: 'hidden',\n      height: '100%',\n      width: '100%',\n      maxWidth: '100%',\n      '& *': {\n        maxwidth: '100%',\n      },\n      '& .MuiButton-root': {\n        [theme.breakpoints.up('md')]: {\n          width: 'auto',\n        },\n      },\n    },\n    '& .embla__slide__inner': {\n      position: 'relative',\n      overflow: 'hidden',\n      height: '100%',\n    },\n    '& .embla__slide__img': {\n      position: 'absolute',\n      display: 'block',\n      top: ' 50%',\n      left: '50%',\n      width: 'auto',\n      minHeight: '100%',\n      minWidth: '100%',\n      maxWidth: 'none',\n      transform: 'translate(-50%, -50%)',\n    },\n    '& .embla__button': {\n      position: 'absolute',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      top: '0',\n      height: '100%',\n      zIndex: '2',\n      border: '0',\n      boxShadow: 'none',\n      backgroundColor: 'transparent',\n      cursor: 'pointer',\n      '& .MuiIcon-fontSizeSmall': {\n        width: '24px',\n        height: '24px',\n      },\n      '& .MuiIcon-fontSizeMedium': {\n        width: '32px',\n        height: '32px',\n      },\n      '&:hover': {\n        '& .MuiIcon-root': {\n          borderRadius: '50%',\n          backgroundColor: theme.palette.onSurface.os100,\n          transfrom: 'translateY(-3px)',\n        },\n      },\n      '&:disabled': {\n        '& .MuiIcon-root': {\n          color: theme.palette.disabled.primary,\n        },\n        '&:hover': {\n          '& .MuiIcon-root': {\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    '& .embla__button--prev': {\n      left: '0',\n      width: '12%',\n    },\n    '& .embla__button--next': {\n      right: '0',\n      width: '20%',\n    },\n    '& .embla__progress': {\n      position: 'relative',\n      backgroundColor: 'transparent',\n      marginTop: '10px',\n      maxWidth: '100%',\n      width: '100%',\n      height: '4px',\n      overflow: 'hidden',\n      borderRadius: '4px',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n    },\n    '& .embla__progress__bar': {\n      position: 'absolute',\n      backgroundColor: theme.palette.onSurface.os200,\n      width: '100%',\n      top: '0',\n      bottom: '0',\n      left: '-100%',\n    },\n  };\n  return styles;\n});\n"],"names":["CarouselStyledVertical","styled","shouldForwardProp","prop","theme","styles","Object","assign","position","padding","maxWidth","marginLeft","marginRight","overflow","width","cursor","userSelect","webkitTouchCallout","khtmlUserSelect","webkitTapHighlightColor","marginTop","NaN","height","maxwidth","breakpoints","up","display","top","left","minHeight","minWidth","transform","alignItems","justifyContent","zIndex","border","boxShadow","backgroundColor","borderRadius","palette","onSurface","os100","transfrom","color","disabled","primary","right","os200","bottom"],"mappings":"qCAGa,MAAAA,EAAyBC,EAAO,MAAO,CAClDC,kBAAoBC,GACT,0BAATA,GACS,gBAATA,GACS,gBAATA,GACS,gBAATA,GACS,uBAATA,GACS,oBAATA,GACS,eAATA,GACS,aAATA,GACS,mBAATA,GACS,6BAATA,GACS,kBAATA,GACS,oBAATA,GACS,oBAATA,GACS,iBAATA,GACS,qBAATA,GACS,mBAATA,GACS,wBAATA,GACS,uBAATA,GACS,gBAATA,GACS,iBAATA,GACS,gBAATA,GAtBkCF,EAuBJ,EAAGG,YAEnC,IAAIC,EAAS,CAAE,EA+Hf,OA9HAA,EACKC,OAAAC,OAAAD,OAAAC,OAAA,GAAAF,GACH,CAAA,WAAY,CACVG,SAAU,WACVC,QAAS,MACTC,SAAU,OACVC,WAAY,OACZC,YAAa,QAEf,qBAAsB,CACpBC,SAAU,SACVC,MAAO,QAET,kCAAmC,CACjCC,OAAQ,aAEV,iCAAkC,CAChCA,OAAQ,YAEV,sBAAuB,CAErBC,WAAY,OACZC,mBAAoB,OACpBC,gBAAiB,OACjBC,wBAAyB,cACzBC,UAAWC,IACXC,OAAQ,SAEV,kBAAmB,CACjBd,SAAU,WACVK,SAAU,SACVS,OAAQ,OACRR,MAAO,OACPJ,SAAU,OACV,MAAO,CACLa,SAAU,QAEZ,oBAAqB,CACnB,CAACnB,EAAMoB,YAAYC,GAAG,OAAQ,CAC5BX,MAAO,UAIb,yBAA0B,CACxBN,SAAU,WACVK,SAAU,SACVS,OAAQ,QAEV,uBAAwB,CACtBd,SAAU,WACVkB,QAAS,QACTC,IAAK,OACLC,KAAM,MACNd,MAAO,OACPe,UAAW,OACXC,SAAU,OACVpB,SAAU,OACVqB,UAAW,yBAEb,mBAAoB,CAClBvB,SAAU,WACVkB,QAAS,OACTM,WAAY,SACZC,eAAgB,SAChBN,IAAK,IACLL,OAAQ,OACRY,OAAQ,IACRC,OAAQ,IACRC,UAAW,OACXC,gBAAiB,cACjBtB,OAAQ,UACR,2BAA4B,CAC1BD,MAAO,OACPQ,OAAQ,QAEV,4BAA6B,CAC3BR,MAAO,OACPQ,OAAQ,QAEV,UAAW,CACT,kBAAmB,CACjBgB,aAAc,MACdD,gBAAiBjC,EAAMmC,QAAQC,UAAUC,MACzCC,UAAW,qBAGf,aAAc,CACZ,kBAAmB,CACjBC,MAAOvC,EAAMmC,QAAQK,SAASC,SAEhC,UAAW,CACT,kBAAmB,CACjBR,gBAAiB,kBAKzB,yBAA0B,CACxBT,KAAM,IACNd,MAAO,OAET,yBAA0B,CACxBgC,MAAO,IACPhC,MAAO,OAET,qBAAsB,CACpBN,SAAU,WACV6B,gBAAiB,cACjBjB,UAAW,OACXV,SAAU,OACVI,MAAO,OACPQ,OAAQ,MACRT,SAAU,SACVyB,aAAc,MACd3B,WAAY,OACZC,YAAa,QAEf,0BAA2B,CACzBJ,SAAU,WACV6B,gBAAiBjC,EAAMmC,QAAQC,UAAUO,MACzCjC,MAAO,OACPa,IAAK,IACLqB,OAAQ,IACRpB,KAAM,WAGHvB,CAAM"}
+{"version":3,"file":"styledCarouselVertical.js","sources":["../../../../src/organisms/carousel/styledComponents/styledCarouselVertical.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport { CarouselPropType } from '../carousel';\n\nexport const CarouselStyledVertical = styled('div', {\n  shouldForwardProp: (prop) =>\n    prop !== 'isSlideDifferentWidth' &&\n    prop !== 'slidesItems' &&\n    prop !== 'slideToShow' &&\n    prop !== 'bulletTheme' &&\n    prop !== 'numberingSeparator' &&\n    prop !== 'numberingSlides' &&\n    prop !== 'startIndex' &&\n    prop !== 'cssClass' &&\n    prop !== 'buttonControls' &&\n    prop !== 'buttonAreaControlsHeight' &&\n    prop !== 'slideToScroll' &&\n    prop !== 'prevControlIcon' &&\n    prop !== 'nextControlIcon' &&\n    prop !== 'controlColor' &&\n    prop !== 'controlIconStyle' &&\n    prop !== 'controlVariant' &&\n    prop !== 'controlIconFontSize' &&\n    prop !== 'slideSelectedClass' &&\n    prop !== 'heightSlide' &&\n    prop !== 'bulletScroll' &&\n    prop !== 'bulletStyle',\n})<CarouselPropType & { theme? }>(({ theme }) => {\n  // const props = args as CarouselPropType;\n  let styles = {};\n  styles = {\n    ...styles,\n    '& .embla': {\n      position: 'relative',\n      padding: '0px',\n      maxWidth: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n    },\n    '& .embla__viewport': {\n      overflow: 'hidden',\n      width: '100%',\n    },\n    '& .embla__viewport.is-draggable': {\n      cursor: 'move grab',\n    },\n    '& .embla__viewport.is-dragging': {\n      cursor: 'grabbing',\n    },\n    '& .embla__container': {\n      //display: 'flex',\n      userSelect: 'none',\n      webkitTouchCallout: 'none',\n      khtmlUserSelect: 'none',\n      webkitTapHighlightColor: 'transparent',\n      marginTop: -'10px',\n      height: '450px',\n    },\n    '& .embla__slide': {\n      position: 'relative',\n      overflow: 'hidden',\n      height: '100%',\n      width: '100%',\n      maxWidth: '100%',\n      '& *': {\n        maxwidth: '100%',\n      },\n      '& .MuiButton-root': {\n        [theme.breakpoints.up('md')]: {\n          width: 'auto',\n        },\n      },\n    },\n    '& .embla__slide__inner': {\n      position: 'relative',\n      overflow: 'hidden',\n      height: '100%',\n    },\n    '& .embla__slide__img': {\n      position: 'absolute',\n      display: 'block',\n      top: ' 50%',\n      left: '50%',\n      width: 'auto',\n      minHeight: '100%',\n      minWidth: '100%',\n      maxWidth: 'none',\n      transform: 'translate(-50%, -50%)',\n    },\n    '& .embla__button': {\n      position: 'absolute',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      top: '0',\n      height: '100%',\n      zIndex: '2',\n      border: '0',\n      boxShadow: 'none',\n      backgroundColor: 'transparent',\n      cursor: 'pointer',\n      '& .MuiIcon-fontSizeSmall': {\n        width: '24px',\n        height: '24px',\n      },\n      '& .MuiIcon-fontSizeMedium': {\n        width: '32px',\n        height: '32px',\n      },\n      '&:hover': {\n        '& .MuiIcon-root': {\n          borderRadius: '50%',\n          backgroundColor: theme.palette.onSurface.os100,\n          transfrom: 'translateY(-3px)',\n        },\n      },\n      '&:disabled': {\n        '& .MuiIcon-root': {\n          color: theme.palette.disabled.primary,\n        },\n        '&:hover': {\n          '& .MuiIcon-root': {\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    '& .embla__button--prev': {\n      left: '0',\n      width: '12%',\n    },\n    '& .embla__button--next': {\n      right: '0',\n      width: '20%',\n    },\n    '& .embla__progress': {\n      position: 'relative',\n      backgroundColor: 'transparent',\n      marginTop: '10px',\n      maxWidth: '100%',\n      width: '100%',\n      height: '4px',\n      overflow: 'hidden',\n      borderRadius: '4px',\n      marginLeft: 'auto',\n      marginRight: 'auto',\n    },\n    '& .embla__progress__bar': {\n      position: 'absolute',\n      backgroundColor: theme.palette.onSurface.os200,\n      width: '100%',\n      top: '0',\n      bottom: '0',\n      left: '-100%',\n    },\n  };\n  return styles;\n});\n"],"names":["CarouselStyledVertical","styled","shouldForwardProp","prop","theme","styles","Object","assign","position","padding","maxWidth","marginLeft","marginRight","overflow","width","cursor","userSelect","webkitTouchCallout","khtmlUserSelect","webkitTapHighlightColor","marginTop","NaN","height","maxwidth","breakpoints","up","display","top","left","minHeight","minWidth","transform","alignItems","justifyContent","zIndex","border","boxShadow","backgroundColor","borderRadius","palette","onSurface","os100","transfrom","color","disabled","primary","right","os200","bottom"],"mappings":"8CAGa,MAAAA,EAAyBC,EAAO,MAAO,CAClDC,kBAAoBC,GACT,0BAATA,GACS,gBAATA,GACS,gBAATA,GACS,gBAATA,GACS,uBAATA,GACS,oBAATA,GACS,eAATA,GACS,aAATA,GACS,mBAATA,GACS,6BAATA,GACS,kBAATA,GACS,oBAATA,GACS,oBAATA,GACS,iBAATA,GACS,qBAATA,GACS,mBAATA,GACS,wBAATA,GACS,uBAATA,GACS,gBAATA,GACS,iBAATA,GACS,gBAATA,GAtBkCF,EAuBJ,EAAGG,YAEnC,IAAIC,EAAS,CAAE,EA+Hf,OA9HAA,EACKC,OAAAC,OAAAD,OAAAC,OAAA,GAAAF,GACH,CAAA,WAAY,CACVG,SAAU,WACVC,QAAS,MACTC,SAAU,OACVC,WAAY,OACZC,YAAa,QAEf,qBAAsB,CACpBC,SAAU,SACVC,MAAO,QAET,kCAAmC,CACjCC,OAAQ,aAEV,iCAAkC,CAChCA,OAAQ,YAEV,sBAAuB,CAErBC,WAAY,OACZC,mBAAoB,OACpBC,gBAAiB,OACjBC,wBAAyB,cACzBC,UAAWC,IACXC,OAAQ,SAEV,kBAAmB,CACjBd,SAAU,WACVK,SAAU,SACVS,OAAQ,OACRR,MAAO,OACPJ,SAAU,OACV,MAAO,CACLa,SAAU,QAEZ,oBAAqB,CACnB,CAACnB,EAAMoB,YAAYC,GAAG,OAAQ,CAC5BX,MAAO,UAIb,yBAA0B,CACxBN,SAAU,WACVK,SAAU,SACVS,OAAQ,QAEV,uBAAwB,CACtBd,SAAU,WACVkB,QAAS,QACTC,IAAK,OACLC,KAAM,MACNd,MAAO,OACPe,UAAW,OACXC,SAAU,OACVpB,SAAU,OACVqB,UAAW,yBAEb,mBAAoB,CAClBvB,SAAU,WACVkB,QAAS,OACTM,WAAY,SACZC,eAAgB,SAChBN,IAAK,IACLL,OAAQ,OACRY,OAAQ,IACRC,OAAQ,IACRC,UAAW,OACXC,gBAAiB,cACjBtB,OAAQ,UACR,2BAA4B,CAC1BD,MAAO,OACPQ,OAAQ,QAEV,4BAA6B,CAC3BR,MAAO,OACPQ,OAAQ,QAEV,UAAW,CACT,kBAAmB,CACjBgB,aAAc,MACdD,gBAAiBjC,EAAMmC,QAAQC,UAAUC,MACzCC,UAAW,qBAGf,aAAc,CACZ,kBAAmB,CACjBC,MAAOvC,EAAMmC,QAAQK,SAASC,SAEhC,UAAW,CACT,kBAAmB,CACjBR,gBAAiB,kBAKzB,yBAA0B,CACxBT,KAAM,IACNd,MAAO,OAET,yBAA0B,CACxBgC,MAAO,IACPhC,MAAO,OAET,qBAAsB,CACpBN,SAAU,WACV6B,gBAAiB,cACjBjB,UAAW,OACXV,SAAU,OACVI,MAAO,OACPQ,OAAQ,MACRT,SAAU,SACVyB,aAAc,MACd3B,WAAY,OACZC,YAAa,QAEf,0BAA2B,CACzBJ,SAAU,WACV6B,gBAAiBjC,EAAMmC,QAAQC,UAAUO,MACzCjC,MAAO,OACPa,IAAK,IACLqB,OAAQ,IACRpB,KAAM,WAGHvB,CAAM"}

package/organisms/carousel2/galleryCarousel/galleryCarousel.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useState as i,useCallback as r,useEffect as n}from"react";import{useDefaultProps as s}from"../hooks/useDefaultProps.js";import{useEmbla as m}from"../hooks/useEmbla.js";import{NumberingSizes as l,NumberingColors as a}from"../../../utils/enum.js";import{Box as c}from"@mui/system";import{ItemsContainer as p}from"../components/ItemsContainer.js";import{ViewPort as d}from"../components/ViewPort.js";import{NavButton as f}from"../components/NavButton.js";import{Numbering as h}from"../components/Numbering.js";import{useContainerPeek as u}from"../hooks/useContainerPeek.js";import{useResponsiveProp as g}from"../../../utils/ResponsiveType.js";import{GalleryContextProvider as v}from"./galleryContext.js";const b={align:"start",height:"100%",controlOptions:{color:"light",buttonPosition:"30%",buttonAreaHeight:"30%"},maxSlideWidth:"100%",isSlideDifferentWidth:!0,cssClass:"gallery-variant"},j=j=>{const x=Object.assign(Object.assign({},b),j),y=s(x),[k,w]=m(y),{containerLeft:E,peekNextOnHover:A,peekPrevOnHover:C,resetPeek:L}=u(w,y.direction),N=g(y.height),[O,P]=i(),R=r((()=>{if(w){const e=w.slideNodes()[w.slidesInView().pop()];if(e){const o=e.getElementsByTagName("picture").item(0);if(o){const e=o.getBoundingClientRect().bottom;P(e-62)}}}}),[w,P]);return n(R,[R]),n((()=>{const e=()=>R();return window.addEventListener("resize",e),w&&w.on("scroll",e),()=>{window.removeEventListener("resize",e),w&&w.off("scroll",e)}}),[R,w]),e(v,{children:e(c,{sx:{overflow:"hidden"},className:"gallery","data-testid":"GalleryCarousel",dir:y.direction,"data-state":null==w?void 0:w.selectedScrollSnap(),children:o(c,{sx:{position:"relative",height:N,maxHeight:N},children:[o(d,{emblaRef:k,children:[e(p,{left:E,children:y.children}),y.controlOptions&&o(t,{children:[e(f,{direction:y.direction,emblaApi:w,type:"prev",onMouseEnter:C,onMouseLeave:L}),e(f,{direction:y.direction,emblaApi:w,type:"next",onMouseEnter:A,onMouseLeave:L})]})]}),e(h,{sx:{top:O?`${O}px`:"inherit",bottom:O?"inherit":"24px"},emblaApi:w,separator:y.numberingSeparator,color:a.DARK,size:l.LARGE,direction:y.direction})]})})})};export{j as GalleryCarousel,b as GalleryDefaultProps};
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{useState as i,useCallback as r,useEffect as n}from"react";import{useDefaultProps as s}from"../hooks/useDefaultProps.js";import{useEmbla as l}from"../hooks/useEmbla.js";import{NumberingSizes as m,NumberingColors as a}from"../../../utils/enum.js";import{Box as c}from"@mui/material";import{ItemsContainer as p}from"../components/ItemsContainer.js";import{ViewPort as d}from"../components/ViewPort.js";import{NavButton as f}from"../components/NavButton.js";import{Numbering as h}from"../components/Numbering.js";import{useContainerPeek as u}from"../hooks/useContainerPeek.js";import{useResponsiveProp as g}from"../../../utils/ResponsiveType.js";import{GalleryContextProvider as v}from"./galleryContext.js";const b={align:"start",height:"100%",controlOptions:{color:"light",buttonPosition:"30%",buttonAreaHeight:"30%"},maxSlideWidth:"100%",isSlideDifferentWidth:!0,cssClass:"gallery-variant"},j=j=>{const x=Object.assign(Object.assign({},b),j),y=s(x),[k,w]=l(y),{containerLeft:E,peekNextOnHover:A,peekPrevOnHover:C,resetPeek:L}=u(w,y.direction),N=g(y.height),[O,P]=i(),R=r((()=>{if(w){const e=w.slideNodes()[w.slidesInView().pop()];if(e){const o=e.getElementsByTagName("picture").item(0);if(o){const e=o.getBoundingClientRect().bottom;P(e-62)}}}}),[w,P]);return n(R,[R]),n((()=>{const e=()=>R();return window.addEventListener("resize",e),w&&w.on("scroll",e),()=>{window.removeEventListener("resize",e),w&&w.off("scroll",e)}}),[R,w]),e(v,{children:e(c,{sx:{overflow:"hidden"},className:"gallery","data-testid":"GalleryCarousel",dir:y.direction,"data-state":null==w?void 0:w.selectedScrollSnap(),children:o(c,{sx:{position:"relative",height:N,maxHeight:N},children:[o(d,{emblaRef:k,children:[e(p,{left:E,children:y.children}),y.controlOptions&&o(t,{children:[e(f,{direction:y.direction,emblaApi:w,type:"prev",onMouseEnter:C,onMouseLeave:L}),e(f,{direction:y.direction,emblaApi:w,type:"next",onMouseEnter:A,onMouseLeave:L})]})]}),e(h,{sx:{top:O?`${O}px`:"inherit",bottom:O?"inherit":"24px"},emblaApi:w,separator:y.numberingSeparator,color:a.DARK,size:m.LARGE,direction:y.direction})]})})})};export{j as GalleryCarousel,b as GalleryDefaultProps};
 //# sourceMappingURL=galleryCarousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"galleryCarousel.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarousel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { Carousel2Props } from '../carousel2';\nimport { useDefaultProps } from '../hooks/useDefaultProps';\nimport { useEmbla } from '../hooks/useEmbla';\nimport { NumberingColors, NumberingSizes } from '../../../utils/enum';\nimport { Box } from '@mui/system';\nimport { ItemsContainer } from '../components/ItemsContainer';\nimport { ViewPort } from '../components/ViewPort';\nimport { NavButton } from '../components/NavButton';\nimport { Numbering } from '../components/Numbering';\nimport { useContainerPeek } from '../hooks/useContainerPeek';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryContextProvider } from './galleryContext';\n\nexport const GalleryDefaultProps: Partial<Carousel2Props> = {\n  align: 'start',\n  height: '100%',\n  controlOptions: {\n    color: 'light',\n    buttonPosition: '30%',\n    buttonAreaHeight: '30%',\n  },\n  maxSlideWidth: '100%',\n  isSlideDifferentWidth: true,\n  cssClass: 'gallery-variant',\n};\n\nexport type GalleryCarouselProps = {\n  /**\n   * Enables autoplay functionality, which can be used to automatically trigger slide changes after certain delay.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Delay in ms between automatic slides\n   * @default 4000\n   */\n  autoPlayDelay?: number;\n  /**\n   * Adjust slide speed when using buttons to change Slide. Higher numbers enables faster scrolling. Values between `1`-`20` are recommended.\n   * @default 10\n   */\n  speed?: number;\n  /**\n   * Direction of content.\n   * @default ltr\n   */\n  direction?: 'rtl' | 'ltr';\n  /**\n   * Enables loop functionality, which can be used to continuously loop through all slides.\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Separator of numbering component.\n   * @default /\n   */\n  numberingSeparator?: string;\n  /**\n   * Carousel slides. Any ReactNode can be used here, however `GalleryCarouselItem` component is suggested.\n   * @requires\n   */\n  children: React.ReactNode;\n  /**\n   * Index of Slide that is active by default.\n   * @default 0\n   */\n  startIndex?: number;\n\n  /**\n   * Optional height of carousel, this prop is added to height style property\n   * @default undefined\n   */\n  height?: ResponsiveType<string>;\n};\n\n/**\n * @deprecated use Carousel instead\n */\nexport const GalleryCarousel: React.FC<GalleryCarouselProps> = (inProps) => {\n  const galleryProps = { ...GalleryDefaultProps, ...inProps };\n  const props = useDefaultProps(galleryProps);\n\n  const [emblaRef, emblaApi] = useEmbla(props);\n  const { containerLeft, peekNextOnHover, peekPrevOnHover, resetPeek } = useContainerPeek(emblaApi, props.direction);\n\n  const height = useResponsiveProp(props.height);\n\n  const [numberingTopPos, setNumberingTopPos] = useState<number | undefined>();\n  const updateNumberingPosition = useCallback(() => {\n    if (emblaApi) {\n      const nodes = emblaApi.slideNodes();\n      const slideIndex = emblaApi.slidesInView().pop();\n      const slide = nodes[slideIndex];\n      if (slide) {\n        const picture = slide.getElementsByTagName('picture').item(0);\n        if (picture) {\n          const bottom = picture.getBoundingClientRect().bottom;\n          setNumberingTopPos(bottom - 62);\n        }\n      }\n    }\n  }, [emblaApi, setNumberingTopPos]);\n\n  useEffect(updateNumberingPosition, [updateNumberingPosition]);\n  useEffect(() => {\n    const e = () => updateNumberingPosition();\n    window.addEventListener('resize', e);\n    if (emblaApi) {\n      emblaApi.on('scroll', e);\n    }\n    return () => {\n      window.removeEventListener('resize', e);\n      if (emblaApi) {\n        emblaApi.off('scroll', e);\n      }\n    };\n  }, [updateNumberingPosition, emblaApi]);\n  return (\n    <GalleryContextProvider>\n      <Box\n        sx={{ overflow: 'hidden' }}\n        className=\"gallery\"\n        data-testid=\"GalleryCarousel\"\n        dir={props.direction}\n        data-state={emblaApi?.selectedScrollSnap()}\n      >\n        <Box sx={{ position: 'relative', height, maxHeight: height }}>\n          <ViewPort emblaRef={emblaRef}>\n            <ItemsContainer left={containerLeft}>{props.children}</ItemsContainer>\n            {props.controlOptions && (\n              <>\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"prev\"\n                  onMouseEnter={peekPrevOnHover}\n                  onMouseLeave={resetPeek}\n                />\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"next\"\n                  onMouseEnter={peekNextOnHover}\n                  onMouseLeave={resetPeek}\n                />\n              </>\n            )}\n          </ViewPort>\n\n          <Numbering\n            sx={{\n              top: numberingTopPos ? `${numberingTopPos}px` : 'inherit',\n              bottom: numberingTopPos ? 'inherit' : '24px',\n            }}\n            emblaApi={emblaApi}\n            separator={props.numberingSeparator}\n            color={NumberingColors.DARK}\n            size={NumberingSizes.LARGE}\n            direction={props.direction}\n          />\n        </Box>\n      </Box>\n    </GalleryContextProvider>\n  );\n};\n"],"names":["GalleryDefaultProps","align","height","controlOptions","color","buttonPosition","buttonAreaHeight","maxSlideWidth","isSlideDifferentWidth","cssClass","GalleryCarousel","inProps","galleryProps","Object","assign","props","useDefaultProps","emblaRef","emblaApi","useEmbla","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","direction","useResponsiveProp","numberingTopPos","setNumberingTopPos","useState","updateNumberingPosition","useCallback","slide","slideNodes","slidesInView","pop","picture","getElementsByTagName","item","bottom","getBoundingClientRect","useEffect","e","window","addEventListener","on","removeEventListener","off","_jsx","GalleryContextProvider","children","Box","sx","overflow","className","dir","selectedScrollSnap","_jsxs","position","maxHeight","ViewPort","ItemsContainer","left","_Fragment","NavButton","type","onMouseEnter","onMouseLeave","Numbering","top","separator","numberingSeparator","NumberingColors","DARK","size","NumberingSizes","LARGE"],"mappings":"owBAca,MAAAA,EAA+C,CAC1DC,MAAO,QACPC,OAAQ,OACRC,eAAgB,CACdC,MAAO,QACPC,eAAgB,MAChBC,iBAAkB,OAEpBC,cAAe,OACfC,uBAAuB,EACvBC,SAAU,mBAuDCC,EAAmDC,IAC9D,MAAMC,EAAoBC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAd,GAAwBW,GAC5CI,EAAQC,EAAgBJ,IAEvBK,EAAUC,GAAYC,EAASJ,IAChCK,cAAEA,EAAaC,gBAAEA,EAAeC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAiBN,EAAUH,EAAMU,WAElGvB,EAASwB,EAAkBX,EAAMb,SAEhCyB,EAAiBC,GAAsBC,IACxCC,EAA0BC,GAAY,KAC1C,GAAIb,EAAU,CACZ,MAEMc,EAFQd,EAASe,aACJf,EAASgB,eAAeC,OAE3C,GAAIH,EAAO,CACT,MAAMI,EAAUJ,EAAMK,qBAAqB,WAAWC,KAAK,GAC3D,GAAIF,EAAS,CACX,MAAMG,EAASH,EAAQI,wBAAwBD,OAC/CX,EAAmBW,EAAS,SAIjC,CAACrB,EAAUU,IAgBd,OAdAa,EAAUX,EAAyB,CAACA,IACpCW,GAAU,KACR,MAAMC,EAAI,IAAMZ,IAKhB,OAJAa,OAAOC,iBAAiB,SAAUF,GAC9BxB,GACFA,EAAS2B,GAAG,SAAUH,GAEjB,KACLC,OAAOG,oBAAoB,SAAUJ,GACjCxB,GACFA,EAAS6B,IAAI,SAAUL,GAE1B,GACA,CAACZ,EAAyBZ,IAE3B8B,EAACC,EAAsB,CAAAC,SACrBF,EAACG,EACC,CAAAC,GAAI,CAAEC,SAAU,UAChBC,UAAU,UAAS,cACP,kBACZC,IAAKxC,EAAMU,UACC,aAAAP,eAAAA,EAAUsC,qBAEtBN,SAAAO,EAACN,EAAG,CAACC,GAAI,CAAEM,SAAU,WAAYxD,SAAQyD,UAAWzD,GAClDgD,SAAA,CAAAO,EAACG,EAAQ,CAAC3C,SAAUA,EAClBiC,SAAA,CAAAF,EAACa,EAAc,CAACC,KAAM1C,EAAgB8B,SAAAnC,EAAMmC,WAC3CnC,EAAMZ,gBACLsD,EAAAM,EAAA,CAAAb,SAAA,CACEF,EAACgB,EACC,CAAAvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc5C,EACd6C,aAAc5C,IAEhByB,EAACgB,EAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc7C,EACd8C,aAAc5C,UAMtByB,EAACoB,EAAS,CACRhB,GAAI,CACFiB,IAAK1C,EAAkB,GAAGA,MAAsB,UAChDY,OAAQZ,EAAkB,UAAY,QAExCT,SAAUA,EACVoD,UAAWvD,EAAMwD,mBACjBnE,MAAOoE,EAAgBC,KACvBC,KAAMC,EAAeC,MACrBnD,UAAWV,EAAMU,kBAIA"}
+{"version":3,"file":"galleryCarousel.js","sources":["../../../../src/organisms/carousel2/galleryCarousel/galleryCarousel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { Carousel2Props } from '../carousel2';\nimport { useDefaultProps } from '../hooks/useDefaultProps';\nimport { useEmbla } from '../hooks/useEmbla';\nimport { NumberingColors, NumberingSizes } from '../../../utils/enum';\nimport { Box } from '@mui/material';\nimport { ItemsContainer } from '../components/ItemsContainer';\nimport { ViewPort } from '../components/ViewPort';\nimport { NavButton } from '../components/NavButton';\nimport { Numbering } from '../components/Numbering';\nimport { useContainerPeek } from '../hooks/useContainerPeek';\nimport { ResponsiveType, useResponsiveProp } from '../../../utils/ResponsiveType';\nimport { GalleryContextProvider } from './galleryContext';\n\nexport const GalleryDefaultProps: Partial<Carousel2Props> = {\n  align: 'start',\n  height: '100%',\n  controlOptions: {\n    color: 'light',\n    buttonPosition: '30%',\n    buttonAreaHeight: '30%',\n  },\n  maxSlideWidth: '100%',\n  isSlideDifferentWidth: true,\n  cssClass: 'gallery-variant',\n};\n\nexport type GalleryCarouselProps = {\n  /**\n   * Enables autoplay functionality, which can be used to automatically trigger slide changes after certain delay.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Delay in ms between automatic slides\n   * @default 4000\n   */\n  autoPlayDelay?: number;\n  /**\n   * Adjust slide speed when using buttons to change Slide. Higher numbers enables faster scrolling. Values between `1`-`20` are recommended.\n   * @default 10\n   */\n  speed?: number;\n  /**\n   * Direction of content.\n   * @default ltr\n   */\n  direction?: 'rtl' | 'ltr';\n  /**\n   * Enables loop functionality, which can be used to continuously loop through all slides.\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Separator of numbering component.\n   * @default /\n   */\n  numberingSeparator?: string;\n  /**\n   * Carousel slides. Any ReactNode can be used here, however `GalleryCarouselItem` component is suggested.\n   * @requires\n   */\n  children: React.ReactNode;\n  /**\n   * Index of Slide that is active by default.\n   * @default 0\n   */\n  startIndex?: number;\n\n  /**\n   * Optional height of carousel, this prop is added to height style property\n   * @default undefined\n   */\n  height?: ResponsiveType<string>;\n};\n\n/**\n * @deprecated use Carousel instead\n */\nexport const GalleryCarousel: React.FC<GalleryCarouselProps> = (inProps) => {\n  const galleryProps = { ...GalleryDefaultProps, ...inProps };\n  const props = useDefaultProps(galleryProps);\n\n  const [emblaRef, emblaApi] = useEmbla(props);\n  const { containerLeft, peekNextOnHover, peekPrevOnHover, resetPeek } = useContainerPeek(emblaApi, props.direction);\n\n  const height = useResponsiveProp(props.height);\n\n  const [numberingTopPos, setNumberingTopPos] = useState<number | undefined>();\n  const updateNumberingPosition = useCallback(() => {\n    if (emblaApi) {\n      const nodes = emblaApi.slideNodes();\n      const slideIndex = emblaApi.slidesInView().pop();\n      const slide = nodes[slideIndex];\n      if (slide) {\n        const picture = slide.getElementsByTagName('picture').item(0);\n        if (picture) {\n          const bottom = picture.getBoundingClientRect().bottom;\n          setNumberingTopPos(bottom - 62);\n        }\n      }\n    }\n  }, [emblaApi, setNumberingTopPos]);\n\n  useEffect(updateNumberingPosition, [updateNumberingPosition]);\n  useEffect(() => {\n    const e = () => updateNumberingPosition();\n    window.addEventListener('resize', e);\n    if (emblaApi) {\n      emblaApi.on('scroll', e);\n    }\n    return () => {\n      window.removeEventListener('resize', e);\n      if (emblaApi) {\n        emblaApi.off('scroll', e);\n      }\n    };\n  }, [updateNumberingPosition, emblaApi]);\n  return (\n    <GalleryContextProvider>\n      <Box\n        sx={{ overflow: 'hidden' }}\n        className=\"gallery\"\n        data-testid=\"GalleryCarousel\"\n        dir={props.direction}\n        data-state={emblaApi?.selectedScrollSnap()}\n      >\n        <Box sx={{ position: 'relative', height, maxHeight: height }}>\n          <ViewPort emblaRef={emblaRef}>\n            <ItemsContainer left={containerLeft}>{props.children}</ItemsContainer>\n            {props.controlOptions && (\n              <>\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"prev\"\n                  onMouseEnter={peekPrevOnHover}\n                  onMouseLeave={resetPeek}\n                />\n                <NavButton\n                  direction={props.direction}\n                  emblaApi={emblaApi}\n                  type=\"next\"\n                  onMouseEnter={peekNextOnHover}\n                  onMouseLeave={resetPeek}\n                />\n              </>\n            )}\n          </ViewPort>\n\n          <Numbering\n            sx={{\n              top: numberingTopPos ? `${numberingTopPos}px` : 'inherit',\n              bottom: numberingTopPos ? 'inherit' : '24px',\n            }}\n            emblaApi={emblaApi}\n            separator={props.numberingSeparator}\n            color={NumberingColors.DARK}\n            size={NumberingSizes.LARGE}\n            direction={props.direction}\n          />\n        </Box>\n      </Box>\n    </GalleryContextProvider>\n  );\n};\n"],"names":["GalleryDefaultProps","align","height","controlOptions","color","buttonPosition","buttonAreaHeight","maxSlideWidth","isSlideDifferentWidth","cssClass","GalleryCarousel","inProps","galleryProps","Object","assign","props","useDefaultProps","emblaRef","emblaApi","useEmbla","containerLeft","peekNextOnHover","peekPrevOnHover","resetPeek","useContainerPeek","direction","useResponsiveProp","numberingTopPos","setNumberingTopPos","useState","updateNumberingPosition","useCallback","slide","slideNodes","slidesInView","pop","picture","getElementsByTagName","item","bottom","getBoundingClientRect","useEffect","e","window","addEventListener","on","removeEventListener","off","_jsx","GalleryContextProvider","children","Box","sx","overflow","className","dir","selectedScrollSnap","_jsxs","position","maxHeight","ViewPort","ItemsContainer","left","_Fragment","NavButton","type","onMouseEnter","onMouseLeave","Numbering","top","separator","numberingSeparator","NumberingColors","DARK","size","NumberingSizes","LARGE"],"mappings":"swBAca,MAAAA,EAA+C,CAC1DC,MAAO,QACPC,OAAQ,OACRC,eAAgB,CACdC,MAAO,QACPC,eAAgB,MAChBC,iBAAkB,OAEpBC,cAAe,OACfC,uBAAuB,EACvBC,SAAU,mBAuDCC,EAAmDC,IAC9D,MAAMC,EAAoBC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAd,GAAwBW,GAC5CI,EAAQC,EAAgBJ,IAEvBK,EAAUC,GAAYC,EAASJ,IAChCK,cAAEA,EAAaC,gBAAEA,EAAeC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAiBN,EAAUH,EAAMU,WAElGvB,EAASwB,EAAkBX,EAAMb,SAEhCyB,EAAiBC,GAAsBC,IACxCC,EAA0BC,GAAY,KAC1C,GAAIb,EAAU,CACZ,MAEMc,EAFQd,EAASe,aACJf,EAASgB,eAAeC,OAE3C,GAAIH,EAAO,CACT,MAAMI,EAAUJ,EAAMK,qBAAqB,WAAWC,KAAK,GAC3D,GAAIF,EAAS,CACX,MAAMG,EAASH,EAAQI,wBAAwBD,OAC/CX,EAAmBW,EAAS,SAIjC,CAACrB,EAAUU,IAgBd,OAdAa,EAAUX,EAAyB,CAACA,IACpCW,GAAU,KACR,MAAMC,EAAI,IAAMZ,IAKhB,OAJAa,OAAOC,iBAAiB,SAAUF,GAC9BxB,GACFA,EAAS2B,GAAG,SAAUH,GAEjB,KACLC,OAAOG,oBAAoB,SAAUJ,GACjCxB,GACFA,EAAS6B,IAAI,SAAUL,GAE1B,GACA,CAACZ,EAAyBZ,IAE3B8B,EAACC,EAAsB,CAAAC,SACrBF,EAACG,EACC,CAAAC,GAAI,CAAEC,SAAU,UAChBC,UAAU,UAAS,cACP,kBACZC,IAAKxC,EAAMU,UACC,aAAAP,eAAAA,EAAUsC,qBAEtBN,SAAAO,EAACN,EAAG,CAACC,GAAI,CAAEM,SAAU,WAAYxD,SAAQyD,UAAWzD,GAClDgD,SAAA,CAAAO,EAACG,EAAQ,CAAC3C,SAAUA,EAClBiC,SAAA,CAAAF,EAACa,EAAc,CAACC,KAAM1C,EAAgB8B,SAAAnC,EAAMmC,WAC3CnC,EAAMZ,gBACLsD,EAAAM,EAAA,CAAAb,SAAA,CACEF,EAACgB,EACC,CAAAvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc5C,EACd6C,aAAc5C,IAEhByB,EAACgB,EAAS,CACRvC,UAAWV,EAAMU,UACjBP,SAAUA,EACV+C,KAAK,OACLC,aAAc7C,EACd8C,aAAc5C,UAMtByB,EAACoB,EAAS,CACRhB,GAAI,CACFiB,IAAK1C,EAAkB,GAAGA,MAAsB,UAChDY,OAAQZ,EAAkB,UAAY,QAExCT,SAAUA,EACVoD,UAAWvD,EAAMwD,mBACjBnE,MAAOoE,EAAgBC,KACvBC,KAAMC,EAAeC,MACrBnD,UAAWV,EAAMU,kBAIA"}

package/organisms/carousel2/galleryCarousel/galleryCarouselItem.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useTheme as t,Box as r}from"@mui/system";import{useState as o,useRef as n,useCallback as s,useEffect as l}from"react";import{useResponsiveProp as d}from"../../../utils/ResponsiveType.js";import{GalleryItemContext as a}from"./galleryItemContext.js";import{useMediaQuery as c,Stack as m}from"@mui/material";const p=p=>{var h,g,x,v;const b=t(),f=d(p.imageSrc),w=d(p.imageFit),[k,y]=o("inherit"),S=n(null),$=n(null),j=n(null),z=c((e=>e.breakpoints.only("sm"))),I=c((e=>e.breakpoints.only("xs"))),H=s((()=>{var e,i,t,r,o;if(z||I){const n=(null!==(e=j.current.clientHeight)&&void 0!==e?e:0)-((null!==(t=null===(i=S.current)||void 0===i?void 0:i.clientHeight)&&void 0!==t?t:0)+(null!==(o=null===(r=$.current)||void 0===r?void 0:r.clientHeight)&&void 0!==o?o:0));y(`${n<0?0:n}px`)}else y("inherit")}),[z,I,y]);return l(H,[H]),l((()=>{const e=()=>H();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[H]),e(a.Provider,{value:{color:null!==(h=p.color)&&void 0!==h?h:"dark"},children:e(r,{sx:{flexBasis:null!==(g=p.width)&&void 0!==g?g:"100%",maxWidth:null!==(x=p.width)&&void 0!==x?x:"100%"},"data-testid":"Carousel.slide",children:i(r,{ref:j,sx:{position:"relative",width:null!==(v=p.width)&&void 0!==v?v:"100%",height:"100%"},children:[p.header&&e(m,{ref:S,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},padding:"24px",zIndex:2,top:0,right:0,left:0},children:p.header}),i(r,{component:"picture",sx:Object.assign({display:"flex",position:"relative",height:k},u),children:[e("source",{media:`(min-width: ${b.breakpoints.values.xl}px)`,srcSet:f.xl}),e("source",{media:`(min-width: ${b.breakpoints.values.lg}px)`,srcSet:f.lg}),e("source",{media:`(min-width: ${b.breakpoints.values.md}px)`,srcSet:f.md}),e("source",{media:`(min-width: ${b.breakpoints.values.sm}px)`,srcSet:f.sm}),e("source",{media:`(max-width: ${b.breakpoints.values.sm}px)`,srcSet:f.xs}),e(r,{component:"img",sx:{height:"100%",width:"100%",objectFit:null!=w?w:"cover"},src:f.xs,alt:p.alt})]}),p.footer&&e(m,{ref:$,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},paddingRight:{md:"150px"},padding:"24px",zIndex:1,bottom:0,right:0,left:0},children:p.footer})]})})})},u={"&::before, &::after":{content:"''",display:"block",zIndex:1,position:"absolute",left:0,right:0,height:"30%"},"::before":{top:"0",background:"linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"},"::after":{bottom:"0",background:"linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"}};export{p as GalleryCarouselItem};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as t,useRef as r,useCallback as o,useEffect as n}from"react";import{useResponsiveProp as l}from"../../../utils/ResponsiveType.js";import{GalleryItemContext as s}from"./galleryItemContext.js";import{useTheme as d,useMediaQuery as a,Box as c,Stack as m}from"@mui/material";const p=p=>{var h,g,x,v;const b=d(),f=l(p.imageSrc),w=l(p.imageFit),[k,y]=t("inherit"),S=r(null),$=r(null),j=r(null),z=a((e=>e.breakpoints.only("sm"))),I=a((e=>e.breakpoints.only("xs"))),H=o((()=>{var e,i,t,r,o;if(z||I){const n=(null!==(e=j.current.clientHeight)&&void 0!==e?e:0)-((null!==(t=null===(i=S.current)||void 0===i?void 0:i.clientHeight)&&void 0!==t?t:0)+(null!==(o=null===(r=$.current)||void 0===r?void 0:r.clientHeight)&&void 0!==o?o:0));y(`${n<0?0:n}px`)}else y("inherit")}),[z,I,y]);return n(H,[H]),n((()=>{const e=()=>H();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[H]),e(s.Provider,{value:{color:null!==(h=p.color)&&void 0!==h?h:"dark"},children:e(c,{sx:{flexBasis:null!==(g=p.width)&&void 0!==g?g:"100%",maxWidth:null!==(x=p.width)&&void 0!==x?x:"100%"},"data-testid":"Carousel.slide",children:i(c,{ref:j,sx:{position:"relative",width:null!==(v=p.width)&&void 0!==v?v:"100%",height:"100%"},children:[p.header&&e(m,{ref:S,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},padding:"24px",zIndex:2,top:0,right:0,left:0},children:p.header}),i(c,{component:"picture",sx:Object.assign({display:"flex",position:"relative",height:k},u),children:[e("source",{media:`(min-width: ${b.breakpoints.values.xl}px)`,srcSet:f.xl}),e("source",{media:`(min-width: ${b.breakpoints.values.lg}px)`,srcSet:f.lg}),e("source",{media:`(min-width: ${b.breakpoints.values.md}px)`,srcSet:f.md}),e("source",{media:`(min-width: ${b.breakpoints.values.sm}px)`,srcSet:f.sm}),e("source",{media:`(max-width: ${b.breakpoints.values.sm}px)`,srcSet:f.xs}),e(c,{component:"img",sx:{height:"100%",width:"100%",objectFit:null!=w?w:"cover"},src:f.xs,alt:p.alt})]}),p.footer&&e(m,{ref:$,direction:"column",spacing:2,sx:{position:{sm:"static",md:"absolute"},paddingRight:{md:"150px"},padding:"24px",zIndex:1,bottom:0,right:0,left:0},children:p.footer})]})})})},u={"&::before, &::after":{content:"''",display:"block",zIndex:1,position:"absolute",left:0,right:0,height:"30%"},"::before":{top:"0",background:"linear-gradient(0deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"},"::after":{bottom:"0",background:"linear-gradient(180deg, rgba(0, 0, 0, 0) 0.28%, rgba(0, 0, 0, 0.25) 99.72%)"}};export{p as GalleryCarouselItem};
 //# sourceMappingURL=galleryCarouselItem.js.map

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/notification/NotificationCenterHeaderButton.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{Popper as i,ClickAwayListener as n,Box as a}from"@mui/material";import"@mui/system";import{useRef as m}from"react";import"../../layout/Header/HeaderButton.js";import"../../layout/Header/HeaderContext.js";import"../../components/icon/icon.js";import"../../components/icon/icon.definitions.js";import"../../layout/Header/HeaderNavigationHero.js";import"../../layout/Header/HeaderOverheadItem.js";import{HeaderBellButton as s}from"../../layout/Header/PredefinedHeaderButtons.js";import"../../utils/enum.js";import{useClosure as c}from"../../utils/useClosure/useClosure.js";import{NotificationCenter as d}from"./NotificationCenter.js";const l=l=>{const{isOpen:p,onToggle:u,onClose:f}=c(!1),j=m(null),{indicator:H}=l,y=o(l,["indicator"]);return e(t,{children:[r(s,{ref:j,onClick:u,color:p&&"grey",indicator:l.indicator,"data-testid":"NotificationCenterHeaderButton"}),r(i,{open:p,anchorEl:j.current,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,28]}}],children:r(n,{onClickAway:f,children:r(a,{children:r(d,Object.assign({},y))})})})]})};export{l as NotificationCenterHeaderButton};
+import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{Popper as i,ClickAwayListener as n,Box as a}from"@mui/material";import{useRef as s}from"react";import"../../layout/Header/HeaderButton.js";import"../../layout/Header/HeaderContext.js";import"../../components/icon/icon.js";import"../../components/icon/icon.definitions.js";import"../../layout/Header/HeaderNavigationHero.js";import"../../layout/Header/HeaderOverheadItem.js";import{HeaderBellButton as m}from"../../layout/Header/PredefinedHeaderButtons.js";import"../../utils/enum.js";import{useClosure as c}from"../../utils/useClosure/useClosure.js";import{NotificationCenter as d}from"./NotificationCenter.js";const l=l=>{const{isOpen:p,onToggle:u,onClose:f}=c(!1),j=s(null),{indicator:H}=l,C=o(l,["indicator"]);return e(t,{children:[r(m,{ref:j,onClick:u,color:p&&"grey",indicator:l.indicator,"data-testid":"NotificationCenterHeaderButton"}),r(i,{open:p,anchorEl:j.current,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,28]}}],children:r(n,{onClickAway:f,children:r(a,{children:r(d,Object.assign({},C))})})})]})};export{l as NotificationCenterHeaderButton};
 //# sourceMappingURL=NotificationCenterHeaderButton.js.map

package/organisms/notification/NotificationCenterHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/organisms/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import { HeaderBellButton } from '@/src/layout/Header';\nimport { useClosure } from '@/src/utils';\nimport { Box, ClickAwayListener, Popper } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\nimport { useRef } from 'react';\nimport { IndicatorProps } from '@/src/components/indicator';\n\nexport type NotificationCenterHeaderButtonProps = NotificationCenterProps & {\n  indicator?: IndicatorProps['color'];\n};\n\nexport const NotificationCenterHeaderButton: React.FC<NotificationCenterHeaderButtonProps> = (props) => {\n  const { isOpen, onToggle, onClose } = useClosure(false);\n  const buttonRef = useRef(null);\n  const { indicator, ...notificationCenterProps } = props;\n  return (\n    <>\n      <HeaderBellButton\n        ref={buttonRef}\n        onClick={onToggle}\n        color={isOpen && 'grey'}\n        indicator={props.indicator}\n        data-testid=\"NotificationCenterHeaderButton\"\n      />\n      <Popper\n        open={isOpen}\n        anchorEl={buttonRef.current}\n        placement=\"bottom-end\"\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 28],\n            },\n          },\n        ]}\n      >\n        <ClickAwayListener onClickAway={onClose}>\n          <Box>\n            <NotificationCenter {...notificationCenterProps} />\n          </Box>\n        </ClickAwayListener>\n      </Popper>\n    </>\n  );\n};\n"],"names":["NotificationCenterHeaderButton","props","isOpen","onToggle","onClose","useClosure","buttonRef","useRef","indicator","notificationCenterProps","__rest","_jsxs","_jsx","HeaderBellButton","ref","onClick","color","Popper","open","anchorEl","current","placement","modifiers","name","options","offset","children","ClickAwayListener","onClickAway","Box","NotificationCenter","Object","assign"],"mappings":"6tBAWa,MAAAA,EAAiFC,IAC5F,MAAMC,OAAEA,EAAMC,SAAEA,EAAQC,QAAEA,GAAYC,GAAW,GAC3CC,EAAYC,EAAO,OACnBC,UAAEA,GAA0CP,EAA5BQ,EAAuBC,EAAKT,EAA5C,CAAyC,cAC/C,OACEU,eACEC,EAACC,GACCC,IAAKR,EACLS,QAASZ,EACTa,MAAOd,GAAU,OACjBM,UAAWP,EAAMO,UACL,cAAA,mCAEdI,EAACK,EACC,CAAAC,KAAMhB,EACNiB,SAAUb,EAAUc,QACpBC,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAKlBC,SAAAd,EAACe,EAAkB,CAAAC,YAAaxB,EAAOsB,SACrCd,EAACiB,EAAG,CAAAH,SACFd,EAACkB,EAAkBC,OAAAC,OAAA,GAAKvB,YAI7B"}
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/organisms/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import { HeaderBellButton } from '@/src/layout/Header';\nimport { useClosure } from '@/src/utils';\nimport { Box, ClickAwayListener, Popper } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\nimport { useRef } from 'react';\nimport { IndicatorProps } from '@/src/components/indicator';\n\nexport type NotificationCenterHeaderButtonProps = NotificationCenterProps & {\n  indicator?: IndicatorProps['color'];\n};\n\nexport const NotificationCenterHeaderButton: React.FC<NotificationCenterHeaderButtonProps> = (props) => {\n  const { isOpen, onToggle, onClose } = useClosure(false);\n  const buttonRef = useRef(null);\n  const { indicator, ...notificationCenterProps } = props;\n  return (\n    <>\n      <HeaderBellButton\n        ref={buttonRef}\n        onClick={onToggle}\n        color={isOpen && 'grey'}\n        indicator={props.indicator}\n        data-testid=\"NotificationCenterHeaderButton\"\n      />\n      <Popper\n        open={isOpen}\n        anchorEl={buttonRef.current}\n        placement=\"bottom-end\"\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 28],\n            },\n          },\n        ]}\n      >\n        <ClickAwayListener onClickAway={onClose}>\n          <Box>\n            <NotificationCenter {...notificationCenterProps} />\n          </Box>\n        </ClickAwayListener>\n      </Popper>\n    </>\n  );\n};\n"],"names":["NotificationCenterHeaderButton","props","isOpen","onToggle","onClose","useClosure","buttonRef","useRef","indicator","notificationCenterProps","__rest","_jsxs","_jsx","HeaderBellButton","ref","onClick","color","Popper","open","anchorEl","current","placement","modifiers","name","options","offset","children","ClickAwayListener","onClickAway","Box","NotificationCenter","Object","assign"],"mappings":"ysBAWa,MAAAA,EAAiFC,IAC5F,MAAMC,OAAEA,EAAMC,SAAEA,EAAQC,QAAEA,GAAYC,GAAW,GAC3CC,EAAYC,EAAO,OACnBC,UAAEA,GAA0CP,EAA5BQ,EAAuBC,EAAKT,EAA5C,CAAyC,cAC/C,OACEU,eACEC,EAACC,GACCC,IAAKR,EACLS,QAASZ,EACTa,MAAOd,GAAU,OACjBM,UAAWP,EAAMO,UACL,cAAA,mCAEdI,EAACK,EACC,CAAAC,KAAMhB,EACNiB,SAAUb,EAAUc,QACpBC,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAKlBC,SAAAd,EAACe,EAAkB,CAAAC,YAAaxB,EAAOsB,SACrCd,EAACiB,EAAG,CAAAH,SACFd,EAACkB,EAAkBC,OAAAC,OAAA,GAAKvB,YAI7B"}

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":"4bA6Fa,MAAAA,EAAUC,GACrB,CACEC,EAiBAC,KAjBA,IAAAC,MACEA,EAAKC,cACLA,EAAaC,KACbA,EAAIC,gBACJA,GAAkB,EAAKC,iBACvBA,GAAmB,EAAKC,gBACxBA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,aACTA,GAAe,EAAKC,cACpBA,GAAgB,EAAKC,cACrBA,EAAaC,eACbA,GAAcf,EACXgB,EAAKC,EAAAjB,EAfV,+NAmBA,MAAMkB,EAAiBC,GAAaC,IAClCC,OAAOC,KAAKF,EAAK,SAAS,GACzB,IAEGG,EAAmBJ,GACvB,CAACK,EAAYC,EAAgCL,KACvCA,GACFF,EAAeE,GAEjBK,GAAYA,EAASD,EAAE,GAEzB,CAACN,IAGGQ,EAAkBP,GACtB,CAACQ,EAA0CC,KACzC,MAAMC,EAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACPJ,GAAQ,CACXP,IAAKO,EAASP,KAAO,OAEvB,OAAOY,EAACC,EAAWH,OAAAC,OAAA,CAAA,EAAAF,GAAQK,QAAUV,GAAMD,EAAiBC,EAAGI,EAAgBC,EAAOT,OAAQ,GAEhG,CAACG,IAGH,OACEY,EAACC,EAAuBN,OAAAC,OAAA,CAAA9B,IAAKA,EAAKU,UAAWA,GAAeK,aACzDd,GAAS8B,EAACK,EAAK,CAACnC,MAAOA,IACvBC,GACC6B,SAAKM,UAAU,oBAAmBC,SAChCP,EAACQ,EAAU,CAACF,UAAU,2BAAmBnC,MAG5CC,GAAQ4B,OAAGM,UAAW,eAAezB,GAAiB,yBAAkBT,IACxEO,GAAaA,EAAU8B,OAAS,GAC/BT,EAACU,EAAK,CAAAJ,UAAU,cAAaC,SAC1B5B,EAAUgC,KAAI,CAACC,EAAMC,IAElBV,EAACW,EAA4C,CAAAC,gBAC3C,EAAAR,SAAA,CAAAP,EAACgB,EAAI,CAACC,KAAML,EAAKM,MAAQ,UACxBN,EAAKxC,OAFO,qBAAuByC,OAQ9CV,SAAKG,UAAU,kBAAiBC,SAAA,GAC3B3B,IAAiBC,IAClBsB,eACG9B,GAAmBqB,EAAgBjB,EAAkBF,GACrDD,GAAoBoB,EAAgBhB,EAAmBF,QAGzDH,IAAoBC,IACrB6B,EAAAgB,EAAA,CAAAZ,SAAA,CACG3B,GACCoB,EAAA,OAAA,CAAMM,UAAU,gBAAgBJ,QAAS,IAAMhB,EAAeJ,EAAcM,KAC1EmB,SAAAP,EAAA,MAAA,CAAKoB,IAAKtC,EAAcuC,IAAKC,IAAKxC,EAAcwC,QAGnDzC,GACCmB,UAAMM,UAAU,iBAAiBiB,wBAAyB,CAAEC,OAAQzC,cAKrD,IAMzB0C,EAAoBC,IACxB,OAAQA,GACN,IAAK,KACH,MAAO,CACLC,SAAU,OACVC,WAAY,QAEhB,IAAK,KACH,MAAO,CACLD,SAAU,OACVC,WAAY,QAEhB,IAAK,KACH,MAAO,CACLD,SAAU,OACVC,WAAY,QAEhB,IAAK,KACH,MAAO,CACLD,SAAU,OACVC,WAAY,QAEhB,QACE,MAAO,CACLD,SAAU,OACVC,WAAY,UAQdxB,EAAyByB,EAAO,MAAO,CAC3CC,kBAAoBC,GAAkB,cAATA,GAAiC,oBAATA,GADxBF,EAEb7D,IAAA,IAAAgE,MAAEA,GAAgBhE,EAANiE,EAAIhD,EAAAjB,EAAhB,WAChB,IAAIkE,EAAS,CAAE,EA0Ff,OAxFAA,EAAS,CACP,WAAY,CACVC,OAAQ,GAEV,4BAA6B,CAC3BC,aAAc,OACdC,UAAW,MACX,uBAAsBvC,OAAAC,OAAA,CACpBuC,WAAY,QACTb,EAAiBQ,EAAKP,mBAG7B,+BAAgC,CAC9BU,aAAc,OACd,0BAA2B,CACzBE,WAAY,OACZX,SAAU,OACVC,WAAY,SAGhB,mBAAoB,CAClBQ,aAAc,QAEhB,mBAAoB,CAClBT,SAAU,OACVC,WAAY,OACZO,OAAQ,gBACR,gBAAiB,CACfC,aAAc,QAGlB,0BAA2B,CACzBG,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,SAAU,OACV,UAAW,CACT,CAACV,EAAMW,YAAYC,KAAK,OAAQ,CAC9BC,MAAO,SAGX,qBAAsB,CACpBC,OAAQ,UACRC,YAAa,MACb,UAAW,CACTC,OAAQ,SAGZ,sBAAuB,CACrBF,OAAQ,UACR,QAAS,CACPG,SAAU,UAGd,oBAAqB,CACnBC,YAAa,OACbC,aAAc,OACdC,cAAe,MACfzB,SAAU,OACV0B,SAAU,OACVL,OAAQ,OACR,CAAChB,EAAMW,YAAYC,KAAK,OAAQ,CAC9BI,OAAQ,OACRH,MAAO,SAGX,kCAAmC,CACjCE,YAAa,OACbX,aAAc,EACd,CAACJ,EAAMW,YAAYC,KAAK,OAAQ,CAC9BR,aAAc,UAIpB,qBAAsB,CACpBkB,QAAS,MACT,wBAAyB,CACvBA,QAAS,kBAET,oBAAqB,CACnBT,MAAO,OACPG,OAAQ,OACRrB,SAAU,WAMXO,CAAM"}
+{"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