{"version":3,"sources":["Shared/Icons/PlanogramIcon.tsx","MyPlanogramsSeasonalPage/MyPlanogramsSeasonal.ts","MyPlanogramsSeasonalPage/MyPlanogramsSeasonalComponent.tsx","MyPlanogramsSeasonalPage/MyPlanogramsSeasonalPage.tsx","Shared/CtaButton/CtaButton.tsx","Shared/Icons/ArrowLeftIconPrimary.tsx","Shared/Button/Dots.tsx"],"names":["styled","compose","Svg","width","height","viewBox","fill","xmlns","css","clipPath","fillRule","clipRule","d","id","abortController","AbortController","channelId","requestToken","url","setIsLoading","a","abort","signal","litiumContext","JSON","stringify","channelSystemId","Fetcher","data","resolve","Wrapper","div","padding","x","marginBottom","theme","spacing","media","mediaQuery","mediaMinLarge","maxWidth","screenMaxWidth","margin","Container","backgroundColor","white","paddingTop","paddingBottom","borderRadius","DotsWrapper","display","justifyContent","HeadingSection","StyledCtaButton","CtaButton","marginTop","mediaMaxLarge","LinkWrapper","Heading","h3","fontSize","color","black","marginLeft","lineHeight","PlanogramGrid","gridTemplateColumns","gridColumnGap","gridRowGap","mediaMinMedium","pseudo","PlanogramCard","flexDirection","wordBreak","border","xy","style","tiny","veryLightGray","PlanogramImage","img","maxHeight","PlanogramText","font","size","beta","weight","fontWeight","bold","textAlign","delta","PlanogramArticleNumber","span","breadText","MyPlanogramsSeasonalComponent","showAllSeasonalPlanograms","useAppSettingsData","translations","mySeasonalPlanogramsLabel","seeAllPlanogramsLabel","myPlanogramsSeasonalPage","staticPages","languageRoute","planogramPlaceholderImg","placeholderImages","planogramPlaceholder","organizationId","useUserStateData","useState","isLoading","useCurrentPage","myPlanograms","setSeasonalPlanograms","useEffect","GetSeasonalPlanograms","then","length","slice","PlanogramIcon","Dots","data-showbtn","map","planogram","KexLink","key","articleNumber","href","image","src","name","asLink","BackLinkWrapper","position","top","desktopHeaderHeight","left","right","alignItems","paddingLeft","letterSpacing","mediaMaxMedium","ArrowLeftIcon","ArrowLeftIconPrimary","linkColor","marginRight","BackLink","gamma","cursor","textDecoration","TopContent","blockMaxWidthMobile","y","medium","none","h1","psi","Intro","p","MyPlanogramsSeasonalPage","backLinkLabel","myPage","pageHeading","pageIntroText","Button","button","primaryBlue","alpha","primaryDarkBlue","headerIconGray","Link","ButtonText","textTransform","LinkText","onClick","children","disabled","data-disabled","transform","Dot","primary","massive","animationName","opacity","animationDuration","timings","sevenFifths","animationIterationCount","animationFillMode","animationDelay","oneFifth","twoFifths"],"mappings":"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","file":"Dist/build-client/static/js/MyPlanogramsSeasonalPage-MyPlanogramsSeasonalPage.216b8d5a.chunk.js","sourcesContent":["import React from 'react';\r\nimport { styled } from '../../Theme';\r\nimport { StyledProps } from '@glitz/react';\r\n\r\nfunction PlanogramIcon({ compose }: StyledProps) {\r\n  return (\r\n    <styled.Svg\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      css={compose()}\r\n    >\r\n      <g clipPath=\"url(#clip0)\">\r\n        <path\r\n          fillRule=\"evenodd\"\r\n          clipRule=\"evenodd\"\r\n          d=\"M1.75 1.5C1.61193 1.5 1.5 1.61193 1.5 1.75V22.25C1.5 22.3881 1.61193 22.5 1.75 22.5H22.25C22.3881 22.5 22.5 22.3881 22.5 22.25V1.75C22.5 1.61193 22.3881 1.5 22.25 1.5H1.75ZM0 1.75C0 0.783502 0.783502 0 1.75 0H22.25C23.2165 0 24 0.783502 24 1.75V22.25C24 23.2165 23.2165 24 22.25 24H1.75C0.783502 24 0 23.2165 0 22.25V1.75Z\"\r\n          fill=\"black\"\r\n        />\r\n        <path\r\n          fillRule=\"evenodd\"\r\n          clipRule=\"evenodd\"\r\n          d=\"M0.511719 7.5C0.511719 7.08579 0.847505 6.75 1.26172 6.75H23.2507C23.6649 6.75 24.0007 7.08579 24.0007 7.5C24.0007 7.91421 23.6649 8.25 23.2507 8.25H1.26172C0.847505 8.25 0.511719 7.91421 0.511719 7.5Z\"\r\n          fill=\"black\"\r\n        />\r\n        <path\r\n          fillRule=\"evenodd\"\r\n          clipRule=\"evenodd\"\r\n          d=\"M0.511719 16.5C0.511719 16.0858 0.847505 15.75 1.26172 15.75H23.2507C23.6649 15.75 24.0007 16.0858 24.0007 16.5C24.0007 16.9142 23.6649 17.25 23.2507 17.25H1.26172C0.847505 17.25 0.511719 16.9142 0.511719 16.5Z\"\r\n          fill=\"black\"\r\n        />\r\n        <path\r\n          fillRule=\"evenodd\"\r\n          clipRule=\"evenodd\"\r\n          d=\"M15.75 6.75C16.1642 6.75 16.5 7.08579 16.5 7.5V16.5C16.5 16.9142 16.1642 17.25 15.75 17.25C15.3358 17.25 15 16.9142 15 16.5V7.5C15 7.08579 15.3358 6.75 15.75 6.75Z\"\r\n          fill=\"black\"\r\n        />\r\n        <path\r\n          fillRule=\"evenodd\"\r\n          clipRule=\"evenodd\"\r\n          d=\"M8.25 6.75C8.66421 6.75 9 7.08579 9 7.5V16.5C9 16.9142 8.66421 17.25 8.25 17.25C7.83579 17.25 7.5 16.9142 7.5 16.5V7.5C7.5 7.08579 7.83579 6.75 8.25 6.75Z\"\r\n          fill=\"black\"\r\n        />\r\n      </g>\r\n      <defs>\r\n        <clipPath id=\"clip0\">\r\n          <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n        </clipPath>\r\n      </defs>\r\n    </styled.Svg>\r\n  );\r\n}\r\n\r\nexport default styled(PlanogramIcon);\r\n","import Fetcher from '../Shared/Common/Fetcher';\r\nimport SimpleProduct from '../PlanogramPage/Models/SimpleProduct.interface';\r\n\r\nlet abortController: AbortController = new AbortController();\r\n\r\nexport async function GetSeasonalPlanograms(\r\n  channelId: string,\r\n  requestToken: string,\r\n  url: string,\r\n  setIsLoading?: (value: boolean) => void\r\n) {\r\n  setIsLoading && setIsLoading(true);\r\n  abortController.abort();\r\n  abortController = new AbortController();\r\n  const signal = abortController.signal;\r\n\r\n  const litiumContext = JSON.stringify({\r\n    channelSystemId: channelId,\r\n  });\r\n  return Fetcher<any, SimpleProduct[]>(\r\n    url,\r\n    signal,\r\n    (data, resolve) => {\r\n      resolve(data);\r\n      setIsLoading && setIsLoading(false);\r\n    },\r\n    litiumContext,\r\n    requestToken\r\n  );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport PageModelBase from '../Shared/Models/PageModelBase.interface';\r\nimport { GetSeasonalPlanograms } from './MyPlanogramsSeasonal';\r\nimport PlanogramIcon from '../Shared/Icons/PlanogramIcon';\r\nimport { styled, theme } from '../Theme';\r\nimport SimpleProduct from '../PlanogramPage/Models/SimpleProduct.interface';\r\nimport KexLink from '../Shared/KexLink/KexLink';\r\nimport { media, pseudo } from '@glitz/core';\r\nimport { mediaQuery } from '../Theme/mediaQueries';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\nimport { useUserStateData } from '../Shared/UserContextProvider/UserContextProvider';\r\nimport Dots from '../Shared/Button/Dots';\r\nimport CtaButton from '../Shared/CtaButton/CtaButton';\r\n\r\ntype PropType = {\r\n  showAllSeasonalPlanograms?: boolean;\r\n};\r\n\r\nfunction MyPlanogramsSeasonalComponent({\r\n  showAllSeasonalPlanograms = true,\r\n}: PropType) {\r\n  const {\r\n    translations: {\r\n      'planogram/mySeasonalPlanograms': mySeasonalPlanogramsLabel,\r\n      'planogram/seeAllSeasonalPlanograms': seeAllPlanogramsLabel,\r\n    },\r\n    staticPages: { myPlanogramsSeasonalPage },\r\n    languageRoute,\r\n    requestToken,\r\n    placeholderImages: { planogramPlaceholder: planogramPlaceholderImg },\r\n  } = useAppSettingsData();\r\n  const { organizationId } = useUserStateData();\r\n\r\n  const [isLoading, setIsLoading] = useState<boolean>(false);\r\n\r\n  const { channelId } = useCurrentPage<PageModelBase>();\r\n  const url = `/api/${languageRoute}/planogram/GetSeasonalPlanograms?organizationId=${organizationId}`;\r\n  const [myPlanograms, setSeasonalPlanograms] = useState<SimpleProduct[]>([]);\r\n\r\n  useEffect(() => {\r\n    organizationId &&\r\n      GetSeasonalPlanograms(\r\n        channelId,\r\n        requestToken,\r\n        url,\r\n        setIsLoading\r\n      ).then(data =>\r\n        !showAllSeasonalPlanograms && !!data.length && data.length > 4\r\n          ? setSeasonalPlanograms(data.slice(0, 4))\r\n          : setSeasonalPlanograms(data)\r\n      );\r\n  }, [channelId]);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <Container>\r\n        <HeadingSection>\r\n          <PlanogramIcon />\r\n          <Heading>{mySeasonalPlanogramsLabel}</Heading>\r\n        </HeadingSection>\r\n        {isLoading ? (\r\n          <DotsWrapper>\r\n            <Dots />\r\n          </DotsWrapper>\r\n        ) : (\r\n          <PlanogramGrid data-showbtn={!showAllSeasonalPlanograms}>\r\n            {!!myPlanograms.length &&\r\n              myPlanograms.map(\r\n                (planogram: SimpleProduct) =>\r\n                  planogram.url && (\r\n                    <KexLink key={planogram.articleNumber} href={planogram.url}>\r\n                      <PlanogramCard>\r\n                        {planogram.image ? (\r\n                          <PlanogramImage\r\n                            src={planogram.image.src}\r\n                          ></PlanogramImage>\r\n                        ) : (\r\n                          <PlanogramImage\r\n                            src={planogramPlaceholderImg?.src}\r\n                          ></PlanogramImage>\r\n                        )}\r\n\r\n                        <PlanogramText>{planogram.name}</PlanogramText>\r\n                        <PlanogramArticleNumber>\r\n                          {planogram.articleNumber}\r\n                        </PlanogramArticleNumber>\r\n                      </PlanogramCard>\r\n                    </KexLink>\r\n                  )\r\n              )}\r\n          </PlanogramGrid>\r\n        )}\r\n        {!showAllSeasonalPlanograms && !!myPlanograms.length && (\r\n          <LinkWrapper>\r\n            <StyledCtaButton asLink={true} href={myPlanogramsSeasonalPage}>\r\n              {seeAllPlanogramsLabel}\r\n            </StyledCtaButton>\r\n          </LinkWrapper>\r\n        )}\r\n      </Container>\r\n    </Wrapper>\r\n  );\r\n}\r\n\r\nconst Wrapper = styled.div({\r\n  padding: { x: '7.5px' },\r\n  marginBottom: theme.spacing(10),\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    padding: { x: theme.spacing(10) },\r\n    maxWidth: theme.screenMaxWidth,\r\n    margin: { x: 'auto' },\r\n  }),\r\n});\r\n\r\nconst Container = styled.div({\r\n  backgroundColor: theme.white,\r\n  padding: { x: theme.spacing(6) },\r\n  paddingTop: theme.spacing(7),\r\n  paddingBottom: theme.spacing(10),\r\n  borderRadius: '10px',\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    padding: { x: theme.spacing(11) },\r\n    paddingTop: theme.spacing(8),\r\n    paddingBottom: theme.spacing(16),\r\n  }),\r\n});\r\n\r\nconst DotsWrapper = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  paddingBottom: theme.spacing(9),\r\n});\r\n\r\nconst HeadingSection = styled.div({\r\n  display: 'flex',\r\n  marginBottom: theme.spacing(7),\r\n});\r\n\r\nconst StyledCtaButton = styled(CtaButton, {\r\n  marginTop: theme.spacing(11),\r\n  marginBottom: theme.spacing(6),\r\n  ...media(mediaQuery.mediaMaxLarge, {\r\n    margin: { x: 'auto' },\r\n  }),\r\n});\r\n\r\nconst LinkWrapper = styled.div({\r\n  display: 'flex',\r\n});\r\n\r\nconst Heading = styled.h3({\r\n  fontSize: '22px',\r\n  color: theme.black,\r\n  marginLeft: theme.spacing(3),\r\n  lineHeight: '26.4px',\r\n});\r\n\r\nconst PlanogramGrid = styled.div({\r\n  display: 'grid',\r\n  gridTemplateColumns: `repeat(2, minmax(0, 1fr))`,\r\n  gridColumnGap: theme.spacing(4),\r\n  gridRowGap: theme.spacing(7),\r\n  ...media(mediaQuery.mediaMinMedium, {\r\n    gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,\r\n    ...pseudo([':nth-child(n)[data-showbtn=\"true\"]'], {\r\n      gridTemplateColumns: `repeat(4, minmax(0, 1fr))`,\r\n    }),\r\n  }),\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    gridTemplateColumns: `repeat(4, minmax(0, 1fr))`,\r\n    gridColumnGap: theme.spacing(9),\r\n    gridRowGap: theme.spacing(11),\r\n  }),\r\n});\r\n\r\nconst PlanogramCard = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'space-between',\r\n  height: '100%',\r\n  wordBreak: 'break-word',\r\n  border: {\r\n    xy: {\r\n      style: 'solid',\r\n      width: theme.tiny,\r\n      color: theme.veryLightGray,\r\n    },\r\n  },\r\n  borderRadius: '10px',\r\n  paddingBottom: theme.spacing(6),\r\n  paddingTop: theme.spacing(5),\r\n});\r\n\r\nconst PlanogramImage = styled.img({\r\n  margin: { x: 'auto' },\r\n  maxHeight: '110px',\r\n  padding: { x: theme.spacing(5) },\r\n  ...media(mediaQuery.mediaMinMedium, {\r\n    maxHeight: '180px',\r\n  }),\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    maxHeight: '220px',\r\n  }),\r\n});\r\n\r\nconst PlanogramText = styled.div({\r\n  font: { size: theme.beta, weight: theme.fontWeight.bold },\r\n  lineHeight: '17px',\r\n  textAlign: 'center',\r\n  marginTop: theme.spacing(6),\r\n  color: theme.black,\r\n  padding: { x: theme.spacing(2) },\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    fontSize: theme.delta,\r\n    lineHeight: '22px',\r\n  }),\r\n});\r\n\r\nconst PlanogramArticleNumber = styled.span({\r\n  font: { size: theme.beta },\r\n  textAlign: 'center',\r\n  color: theme.breadText,\r\n  marginTop: theme.spacing(3),\r\n});\r\n\r\nexport default MyPlanogramsSeasonalComponent;\r\n","import React from 'react';\r\n\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport { styled } from '@glitz/react';\r\nimport { theme } from '../Theme';\r\nimport { media } from '@glitz/core';\r\nimport MyPlanogramsSeasonalComponent from './MyPlanogramsSeasonalComponent';\r\nimport MyPlanogramsSeasonalPageModel from './Models/MyPlanogramsSeasonalModel.interface';\r\nimport ArrowLeftIconPrimary from '../Shared/Icons/ArrowLeftIconPrimary';\r\nimport KexLink from '../Shared/KexLink/KexLink';\r\nimport { useAppSettingsData } from '../Shared/AppSettingsProvider/AppSettingsProvider';\r\n\r\nfunction MyPlanogramsSeasonalPage() {\r\n  const {\r\n    translations: { 'myPlanogramsPage/backToMyPage': backLinkLabel },\r\n    staticPages: { myPage },\r\n  } = useAppSettingsData();\r\n\r\n  const { pageHeading, pageIntroText } = useCurrentPage<\r\n    MyPlanogramsSeasonalPageModel\r\n  >();\r\n  return (\r\n    <main>\r\n      <BackLinkWrapper>\r\n        <ArrowLeftIcon />\r\n        <BackLink href={myPage}>{backLinkLabel}</BackLink>\r\n      </BackLinkWrapper>\r\n      <TopContent>\r\n        <Heading>{pageHeading}</Heading>\r\n        <Intro>{pageIntroText}</Intro>\r\n      </TopContent>\r\n      <MyPlanogramsSeasonalComponent showAllSeasonalPlanograms={true} />\r\n    </main>\r\n  );\r\n}\r\n\r\nconst BackLinkWrapper = styled.div({\r\n  position: 'absolute',\r\n  top: theme.desktopHeaderHeight,\r\n  left: 0,\r\n  right: 0,\r\n  margin: { x: 'auto' },\r\n  maxWidth: theme.screenMaxWidth,\r\n  width: '100%',\r\n  paddingTop: '18px',\r\n  alignItems: 'center',\r\n  display: 'flex',\r\n  paddingLeft: '32px',\r\n  lineHeight: 1.33,\r\n  letterSpacing: 0.45,\r\n  ...media(theme.mediaQuery.mediaMaxLarge, {\r\n    paddingTop: '0px',\r\n  }),\r\n  ...media(theme.mediaQuery.mediaMaxMedium, {\r\n    paddingLeft: '20px',\r\n  }),\r\n});\r\n\r\nconst ArrowLeftIcon = styled(ArrowLeftIconPrimary, {\r\n  fill: theme.linkColor,\r\n  marginRight: theme.spacing(4),\r\n});\r\n\r\nconst BackLink = styled(KexLink, {\r\n  fontSize: theme.gamma,\r\n  color: theme.linkColor,\r\n  cursor: 'pointer',\r\n  textDecoration: 'underline',\r\n});\r\n\r\nconst TopContent = styled.div({\r\n  width: '100%',\r\n  color: theme.black,\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  marginBottom: theme.spacing(15),\r\n  maxWidth: theme.blockMaxWidthMobile,\r\n  padding: {\r\n    x: '7.5px',\r\n  },\r\n  paddingTop: theme.spacing(10),\r\n  ...media(theme.mediaQuery.mediaMinMedium, {\r\n    margin: { x: 'auto' },\r\n  }),\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    margin: { y: theme.spacing(14) },\r\n    padding: { x: theme.medium, y: theme.none },\r\n    maxWidth: '900px',\r\n  }),\r\n});\r\n\r\nconst Heading = styled.h1({\r\n  font: { size: theme.psi, weight: theme.fontWeight.bold },\r\n  marginBottom: theme.spacing(5),\r\n  ...media(theme.mediaQuery.mediaMinLarge, {\r\n    lineHeight: '40px',\r\n    fontSize: '32px',\r\n    marginTop: theme.spacing(5),\r\n  }),\r\n});\r\n\r\nconst Intro = styled.p({\r\n  lineHeight: '28.8px',\r\n});\r\n\r\nexport default MyPlanogramsSeasonalPage;\r\n","import React from 'react';\r\n\r\nimport { theme, styled } from '../../Theme';\r\n\r\nimport { media, pseudo } from '@glitz/core';\r\nimport { mediaQuery } from '../../Theme/mediaQueries';\r\nimport { StyledProps } from '@glitz/react';\r\n\r\nimport KexLink from '../KexLink/KexLink';\r\n\r\ntype PropTypes = StyledProps & {\r\n  onClick?: () => void;\r\n  asLink?: boolean;\r\n  href?: string;\r\n  children?: any;\r\n  disabled?: boolean;\r\n};\r\n\r\nfunction CtaButton({\r\n  compose,\r\n  onClick,\r\n  asLink,\r\n  href,\r\n  children,\r\n  disabled,\r\n}: PropTypes) {\r\n  return asLink ? (\r\n    <Link\r\n      data-disabled={disabled}\r\n      css={compose()}\r\n      href={!disabled ? href : ''}\r\n      onClick={onClick && onClick}\r\n    >\r\n      <LinkText>{children}</LinkText>\r\n    </Link>\r\n  ) : (\r\n    <Button disabled={disabled} css={compose()} onClick={onClick}>\r\n      <ButtonText>{children}</ButtonText>\r\n    </Button>\r\n  );\r\n}\r\n\r\nconst Button = styled.button({\r\n  backgroundColor: theme.primaryBlue,\r\n  font: { size: theme.alpha, weight: theme.fontWeight.bold },\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  borderRadius: '50px',\r\n  padding: { y: theme.spacing(4), x: theme.spacing(6) },\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    ':hover': { backgroundColor: theme.primaryDarkBlue },\r\n  }),\r\n  ':disabled': {\r\n    cursor: 'not-allowed',\r\n    backgroundColor: theme.headerIconGray,\r\n    ':hover': { backgroundColor: theme.headerIconGray },\r\n  },\r\n});\r\n\r\nconst Link = styled(KexLink, {\r\n  backgroundColor: theme.primaryBlue,\r\n  font: { size: theme.alpha, weight: theme.fontWeight.bold },\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  borderRadius: '50px',\r\n  padding: { y: theme.spacing(4), x: theme.spacing(6) },\r\n  ...media(mediaQuery.mediaMinLarge, {\r\n    ':hover': { backgroundColor: theme.primaryDarkBlue },\r\n  }),\r\n  ...pseudo([':nth-child(n)[data-disabled=\"true\"]'], {\r\n    cursor: 'not-allowed',\r\n    backgroundColor: theme.headerIconGray,\r\n    ':hover': { backgroundColor: theme.headerIconGray },\r\n  }),\r\n});\r\n\r\nconst ButtonText = styled.span({\r\n  color: theme.white,\r\n  textTransform: 'uppercase',\r\n  letterSpacing: '0.05em',\r\n});\r\n\r\nconst LinkText = styled.span({\r\n  padding: { x: theme.spacing(2) },\r\n  color: theme.white,\r\n  textTransform: 'uppercase',\r\n  letterSpacing: '0.05em',\r\n});\r\n\r\nexport default CtaButton;\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { theme } from '../../Theme';\r\n\r\nfunction ArrowLeftIconPrimary({ compose }: StyledProps) {\r\n  return (\r\n    <styled.Svg\r\n      width=\"14\"\r\n      height=\"14\"\r\n      css={compose()}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 16 16\"\r\n    >\r\n      <path\r\n        d=\"M7.841 6.134c.18.168.208.437.08.636l-.055.071L1.65 13.5H15.5c.276 0 .5.224.5.5s-.224.5-.5.5H1.652l6.214 6.659c.167.18.177.45.035.64l-.06.067c-.18.167-.45.177-.64.035l-.067-.06-7-7.5c-.156-.168-.176-.417-.058-.606l.058-.076 7-7.5c.189-.202.505-.213.707-.025z\"\r\n        transform=\"translate(-512 -118) translate(512 112)\"\r\n      />\r\n    </styled.Svg>\r\n  );\r\n}\r\n\r\nexport default styled(ArrowLeftIconPrimary);\r\n","import React from 'react';\r\nimport { styled, theme } from '../../Theme';\r\nimport { pseudo } from '@glitz/core';\r\n\r\ntype DotsType = {\r\n  color?: string;\r\n  lineHeight?: string;\r\n};\r\n\r\nfunction Dots({ color, lineHeight }: DotsType) {\r\n  return (\r\n    <>\r\n      <Dot\r\n        css={{\r\n          color: color ? color : theme.primary,\r\n          lineHeight: lineHeight ? lineHeight : 'auto',\r\n        }}\r\n      >\r\n        .\r\n      </Dot>\r\n      <Dot\r\n        css={{\r\n          color: color ? color : theme.primary,\r\n          lineHeight: lineHeight ? lineHeight : 'auto',\r\n        }}\r\n      >\r\n        .\r\n      </Dot>\r\n      <Dot\r\n        css={{\r\n          color: color ? color : theme.primary,\r\n          lineHeight: lineHeight ? lineHeight : 'auto',\r\n        }}\r\n      >\r\n        .\r\n      </Dot>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default Dots;\r\n\r\n// const Wrapper = styled.div({});\r\n\r\nconst Dot = styled.div({\r\n  display: 'inline-block',\r\n  font: { size: theme.massive },\r\n  animationName: {\r\n    '0%': {\r\n      opacity: '.2',\r\n    },\r\n    '20%': {\r\n      opacity: '1',\r\n    },\r\n    '100%': {\r\n      opacity: '.2',\r\n    },\r\n  },\r\n  animationDuration: theme.timings.sevenFifths,\r\n  animationIterationCount: 'infinite',\r\n  animationFillMode: 'both',\r\n  ...pseudo(':nth-child(2)', {\r\n    animationDelay: theme.timings.oneFifth,\r\n  }),\r\n  ...pseudo(':nth-child(3)', {\r\n    animationDelay: theme.timings.twoFifths,\r\n  }),\r\n});\r\n"],"sourceRoot":""}