{"version":3,"sources":["Shared/Icons/PlanogramIcon.tsx","MyPlanogramsPage/MyPlanograms.ts","Shared/Icons/ImagePlaceholderIcon.tsx","MyPlanogramsPage/MyPlanogramsComponent.tsx","MyPlanogramsPage/MyPlanogramsPage.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","ImagePlaceholderIcon","primaryBlue","maxHeight","img","PlanogramText","font","size","beta","weight","fontWeight","bold","textAlign","delta","PlanogramArticleNumber","span","breadText","MyPlanogramsComponent","showAllPlanograms","useAppSettingsData","translations","myPlanogramsLabel","seeAllPlanogramsLabel","myPlanogramsPage","staticPages","languageRoute","planogramPlaceholderImg","placeholderImages","planogramPlaceholder","organizationId","useUserStateData","useState","isLoading","useCurrentPage","myPlanograms","setMyPlanograms","useEffect","GetCustomerPlanograms","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","MyPlanogramsPage","backLinkLabel","myPage","pageHeading","pageIntroText","breadcrumb","Button","button","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/MyPlanogramsPage-MyPlanogramsPage.0fe2c9b1.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 GetCustomerPlanograms(\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 from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\n\r\nfunction ImagePlaceholderIcon({ compose }: StyledProps) {\r\n  return (\r\n    <styled.Svg\r\n      css={compose()}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n      <path d=\"M21 3H3C2 3 1 4 1 5v14c0 1.1.9 2 2 2h18c1 0 2-1 2-2V5c0-1-1-2-2-2zm0 15.92c-.02.03-.06.06-.08.08H3V5.08L3.08 5h17.83c.03.02.06.06.08.08v13.84zm-10-3.41L8.5 12.5 5 17h14l-4.5-6z\" />\r\n    </styled.Svg>\r\n  );\r\n}\r\n\r\nexport default styled(ImagePlaceholderIcon);\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 { GetCustomerPlanograms } from './MyPlanograms';\r\nimport PlanogramIcon from '../Shared/Icons/PlanogramIcon';\r\nimport ImagePlaceholderIcon from '../Shared/Icons/ImagePlaceholderIcon';\r\nimport { styled, theme } from '../Theme';\r\nimport SimpleProduct from '../../Features/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 CtaButton from '../Shared/CtaButton/CtaButton';\r\nimport Dots from '../Shared/Button/Dots';\r\n\r\ntype PropType = {\r\n  showAllPlanograms?: boolean;\r\n};\r\n\r\nfunction MyPlanogramsComponent({ showAllPlanograms = true }: PropType) {\r\n  const {\r\n    translations: {\r\n      'planogram/myPlanograms': myPlanogramsLabel,\r\n      'planogram/seeAllPlanograms': seeAllPlanogramsLabel,\r\n    },\r\n    staticPages: { myPlanogramsPage },\r\n    languageRoute,\r\n    requestToken,\r\n    placeholderImages: { planogramPlaceholder: planogramPlaceholderImg },\r\n  } = useAppSettingsData();\r\n  const { organizationId } = useUserStateData();\r\n  const [isLoading, setIsLoading] = useState<boolean>(false);\r\n\r\n  const { channelId } = useCurrentPage<PageModelBase>();\r\n  const url = `/api/${languageRoute}/planogram/GetMyPlanograms?organizationId=${organizationId}`;\r\n  const [myPlanograms, setMyPlanograms] = useState<SimpleProduct[]>([]);\r\n\r\n  useEffect(() => {\r\n    organizationId &&\r\n      GetCustomerPlanograms(\r\n        channelId,\r\n        requestToken,\r\n        url,\r\n        setIsLoading\r\n      ).then(data =>\r\n        !showAllPlanograms && !!data.length && data.length > 4\r\n          ? setMyPlanograms(data.slice(0, 4))\r\n          : setMyPlanograms(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>{myPlanogramsLabel}</Heading>\r\n        </HeadingSection>\r\n        {isLoading ? (\r\n          <DotsWrapper>\r\n            <Dots />\r\n          </DotsWrapper>\r\n        ) : (\r\n          <PlanogramGrid data-showbtn={!showAllPlanograms}>\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                        <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        {!showAllPlanograms && !!myPlanograms.length && (\r\n          <LinkWrapper>\r\n            <StyledCtaButton asLink={true} href={myPlanogramsPage}>\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 StyledImagePlaceholderIcon = styled(ImagePlaceholderIcon, {\r\n  fill: theme.primaryBlue,\r\n  padding: { x: theme.spacing(5) },\r\n  maxHeight: '110px',\r\n  margin: { x: 'auto' },\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 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 MyPlanogramsComponent;\r\n","import React from 'react';\r\n\r\nimport useCurrentPage from '../Shared/Hooks/useCurrentPage';\r\nimport MyPlanogramsPageModel from './Models/MyPlanogramsPageModel.interface';\r\nimport { styled } from '@glitz/react';\r\nimport { theme } from '../Theme';\r\nimport { media } from '@glitz/core';\r\nimport MyPlanogramsComponent from './MyPlanogramsComponent';\r\nimport Breadcrumb from '../Shared/Breadcrumb/Breadcrumb';\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 MyPlanogramsPage() {\r\n  const {\r\n    translations: { 'myPlanogramsPage/backToMyPage': backLinkLabel },\r\n    staticPages: { myPage },\r\n  } = useAppSettingsData();\r\n\r\n  const { pageHeading, pageIntroText, breadcrumb } = useCurrentPage<\r\n    MyPlanogramsPageModel\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      <MyPlanogramsComponent showAllPlanograms={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  marginTop: theme.spacing(2),\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 MyPlanogramsPage;\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":""}