{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/LatestMagazine/HorizontalView.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/LatestMagazine/VerticalView.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/LatestMagazine/index.tsx","webpack:///./Avensia.Common/Features/Shared/BoxLayout/index.tsx"],"names":["props","IEStyle","width","position","height","maxWidth","imageCss","objectFit","items","length","MagazinesWrapper","map","item","Magazine","key","title","css","blockStyle","className","BorderedDiv","Body","to","url","alt","preset","imageUrl","includes","undefined","Tiny","ratio","OneToOne","src","imageStyle","Title","Description","preamble","GradientBar","div","display","flexFlow","justifyContent","flexDirection","overflow","marginTop","padding","x","top","bottom","Link","paddingBottom","textDecoration","color","textAlign","fontSize","fontWeight","marginBottom","backgroundImage","ListContainer","ImageWrapper","Image","Details","flexWrap","xy","WebkitLineClamp","flexGrow","flexBasis","alignItems","wordBreak","backgroundColor","LatestMagazines","currentBreakpoint","magazineUrl","linkUrl","layoutCss","isHorizontalCards","margin","magazines","Top","Heading","LinkContainer","LinkStyled","linkText","Micro","section","h2","letterSpacing","lineHeight","textTransform","theme","textColor","borderBottom","style","paddingRight","SPACING_DEFAULT","SPACING_MOBILE","BOX_ITEM_CLASSNAME","fractions","spacingDefaulter","value","isThin","fraction","Column","minWidth","Block","sort","entities","a","b","render","children","Children","toArray","this","row","allowSorting","Small","entry","element","shift","columns","reduce","current","convert","layout","spacing","spacingBetweenBlocks","Div","wrap","entity","index","isColumn","Component","state","BoxLayout"],"mappings":"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","file":"assets/31.chunk.1326452b3a61726d1173.js","sourcesContent":["import React from 'react';\r\nimport { isIE, isEdge } from '@avensia/scope';\r\nimport { styled } from '@glitz/react';\r\nimport { Style } from '@glitz/type';\r\nimport Link from 'Shared/Link';\r\nimport { lightBlack } from 'Shared/Style/colors';\r\nimport Image, { Ratio as ImageRatio, Preset as ImagePreset } from 'Shared/Image/Ratio';\r\nimport {\r\n  pixelsToUnit,\r\n  minMediumMediaQuery,\r\n  minTinyMediaQuery,\r\n  minLargeMediaQuery,\r\n  minSmallMediaQuery,\r\n  medium,\r\n  zeta,\r\n  theta,\r\n} from 'Shared/Style';\r\nimport MagazinePageViewModel from 'Magazine/MagazinePageViewModel.type';\r\n\r\ntype PropType = {\r\n  items: MagazinePageViewModel[];\r\n  currentBreakpoint: number;\r\n};\r\n\r\nexport default (props: PropType) => {\r\n  const IEStyle: Style = {\r\n    width: '100%',\r\n    [minMediumMediaQuery]: {\r\n      position: 'absolute',\r\n      height: '100%',\r\n      maxWidth: 'none',\r\n    },\r\n    [minLargeMediaQuery]: {\r\n      width: 'inherit',\r\n    },\r\n  };\r\n\r\n  const normalStyle: Style = {\r\n    width: '100%',\r\n    height: '100%',\r\n    objectFit: 'cover',\r\n  };\r\n\r\n  const imageCss = isIE() || isEdge() ? IEStyle : normalStyle;\r\n\r\n  return props.items.length > 0 ? (\r\n    <MagazinesWrapper>\r\n      {props.items.map((item) => (\r\n        <Magazine key={item.title} css={blockStyle} className=\"box-item-card\">\r\n          <BorderedDiv>\r\n            <Body to={item.url}>\r\n              <Image\r\n                alt={item.title}\r\n                preset={!item.imageUrl.url.includes('.gif') ? ImagePreset.Tiny : undefined}\r\n                ratio={ImageRatio.OneToOne}\r\n                src={item.imageUrl.url}\r\n                imageStyle={imageCss}\r\n              />\r\n              <Title>{item.title}</Title>\r\n              <Description>{item.preamble}</Description>\r\n            </Body>\r\n          </BorderedDiv>\r\n          <GradientBar />\r\n        </Magazine>\r\n      ))}\r\n    </MagazinesWrapper>\r\n  ) : null;\r\n};\r\n\r\nconst MagazinesWrapper = styled.div({\r\n  display: 'flex',\r\n  flexFlow: 'row wrap',\r\n  justifyContent: 'center',\r\n  [minMediumMediaQuery]: {\r\n    justifyContent: 'space-around',\r\n  },\r\n});\r\n\r\nconst blockStyle = {\r\n  width: '50%',\r\n  [minTinyMediaQuery]: {\r\n    width: '33%',\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    width: '16%',\r\n  },\r\n};\r\n\r\nconst BorderedDiv = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n});\r\n\r\nconst Magazine = styled.div({\r\n  height: '350px',\r\n  position: 'relative',\r\n  overflow: 'hidden',\r\n  marginTop: pixelsToUnit(15),\r\n  padding: { x: pixelsToUnit(5), top: pixelsToUnit(5), bottom: pixelsToUnit(10) },\r\n  [minTinyMediaQuery]: {\r\n    height: '350px',\r\n  },\r\n  [minSmallMediaQuery]: {\r\n    height: '400px',\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    height: '360px',\r\n  },\r\n  [minLargeMediaQuery]: {\r\n    height: '450px',\r\n  },\r\n});\r\n\r\nconst Body = styled(Link, {\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'space-between',\r\n  paddingBottom: 0,\r\n  textDecoration: 'inherit',\r\n  color: 'inherit',\r\n  textAlign: 'left',\r\n});\r\n\r\nconst Title = styled.div({\r\n  marginTop: 0,\r\n  color: lightBlack,\r\n  fontSize: theta,\r\n  fontWeight: 'bold',\r\n  [minMediumMediaQuery]: {\r\n    fontWeight: 'normal',\r\n    marginTop: medium,\r\n    marginBottom: pixelsToUnit(8),\r\n  },\r\n});\r\n\r\nconst Description = styled.div({\r\n  color: lightBlack,\r\n  fontSize: zeta,\r\n});\r\n\r\nconst GradientBar = styled.div({\r\n  position: 'absolute',\r\n  bottom: 0,\r\n  width: '100%',\r\n  height: '30px',\r\n  backgroundImage: `linear-gradient(180deg, rgba(255,0,0,0), rgba(255,255,255,1))`,\r\n});\r\n","import React from 'react';\r\nimport { isIE, isEdge } from '@avensia/scope';\r\nimport { styled } from '@glitz/react';\r\nimport { Style } from '@glitz/type';\r\nimport { lightBlack } from 'Shared/Style/colors';\r\nimport Link from 'Shared/Link';\r\nimport Image, { Preset as ImagePreset } from 'Shared/Image';\r\nimport {\r\n  pixelsToUnit,\r\n  minMediumMediaQuery,\r\n  minLargeMediaQuery,\r\n  whitelilac,\r\n  minTinyMediaQuery,\r\n  minSmallMediaQuery,\r\n  zeta,\r\n  theta,\r\n} from 'Shared/Style';\r\nimport { medium, huge } from 'Shared/Style/spacing';\r\nimport MagazinePageViewModel from 'Magazine/MagazinePageViewModel.type';\r\n\r\ntype PropType = {\r\n  items: MagazinePageViewModel[];\r\n};\r\n\r\nexport default (props: PropType) => {\r\n  const IEStyle: Style = {\r\n    width: '100%',\r\n    [minMediumMediaQuery]: {\r\n      position: 'absolute',\r\n      height: '100%',\r\n      maxWidth: 'none',\r\n    },\r\n    [minLargeMediaQuery]: {\r\n      width: 'auto',\r\n    },\r\n  };\r\n\r\n  const normalStyle: Style = {\r\n    width: '100%',\r\n    height: '100%',\r\n    objectFit: 'cover',\r\n  };\r\n\r\n  const imageCss = isIE() || isEdge() ? IEStyle : normalStyle;\r\n  return props.items.length > 0 ? (\r\n    <ListContainer>\r\n      {props.items.map((item) => {\r\n        return (\r\n          <Magazine key={item.title}>\r\n            <Body to={item.url}>\r\n              <ImageWrapper css={(isIE() || isEdge()) && { position: 'relative' }}>\r\n                <Image\r\n                  css={imageCss}\r\n                  alt={item.title}\r\n                  preset={!item.imageUrl.url.includes('.gif') ? ImagePreset.Tiny : undefined}\r\n                  src={item.imageUrl.url}\r\n                />\r\n              </ImageWrapper>\r\n              <Details>\r\n                <Title>{item.title}</Title>\r\n                <Description>{item.preamble}</Description>\r\n              </Details>\r\n            </Body>\r\n            <GradientBar />\r\n          </Magazine>\r\n        );\r\n      })}\r\n    </ListContainer>\r\n  ) : null;\r\n};\r\n\r\nconst ListContainer = styled.div({\r\n  display: 'flex',\r\n  flexWrap: 'wrap',\r\n  justifyContent: 'center',\r\n  [minMediumMediaQuery]: {\r\n    justifyContent: 'space-around',\r\n    x: huge,\r\n  },\r\n});\r\n\r\nconst Body = styled(Link, {\r\n  padding: { xy: pixelsToUnit(10) },\r\n  width: '300px',\r\n  paddingBottom: 0,\r\n  textDecoration: 'inherit',\r\n  color: 'inherit',\r\n  textAlign: 'center',\r\n});\r\nconst Magazine = styled.div({\r\n  position: 'relative',\r\n  padding: { xy: pixelsToUnit(5) },\r\n  width: '100%',\r\n  height: '350px',\r\n  marginBottom: pixelsToUnit(15),\r\n  overflow: 'hidden',\r\n  WebkitLineClamp: 5,\r\n  [minTinyMediaQuery]: {\r\n    width: '200px',\r\n    height: '250px',\r\n  },\r\n  [minSmallMediaQuery]: {\r\n    width: '350px',\r\n    height: '350px',\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    width: '300px',\r\n    height: '360px',\r\n  },\r\n  [minLargeMediaQuery]: {\r\n    width: '450px',\r\n    height: '450px',\r\n  },\r\n});\r\nconst ImageWrapper = styled.div({\r\n  flexGrow: 0,\r\n  flexBasis: pixelsToUnit(220),\r\n  overflow: 'hidden',\r\n});\r\n\r\nconst Details = styled.div({\r\n  position: 'relative',\r\n  flexGrow: 6,\r\n  alignItems: 'flex-start',\r\n  justifyContent: 'center',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  [minTinyMediaQuery]: {\r\n    maxWidth: 'initial',\r\n  },\r\n  paddingBottom: 0,\r\n  textDecoration: 'inherit',\r\n  color: 'inherit',\r\n  textAlign: 'left',\r\n});\r\n\r\nconst Title = styled.div({\r\n  marginBottom: pixelsToUnit(8),\r\n  fontSize: theta,\r\n  marginTop: 0,\r\n  color: lightBlack,\r\n  fontWeight: 'bold',\r\n  wordBreak: 'break-word',\r\n  [minMediumMediaQuery]: {\r\n    marginTop: medium,\r\n  },\r\n});\r\n\r\nconst Description = styled.div({\r\n  backgroundColor: whitelilac,\r\n  color: lightBlack,\r\n  fontSize: zeta,\r\n  [minMediumMediaQuery]: {\r\n    marginTop: pixelsToUnit(8),\r\n  },\r\n});\r\n\r\nconst GradientBar = styled.div({\r\n  position: 'absolute',\r\n  bottom: 0,\r\n  width: '100%',\r\n  height: '30px',\r\n  backgroundImage: `linear-gradient(180deg, rgba(255,0,0,0), rgba(255,255,255,1))`,\r\n});\r\n","/**\r\n * @ComponentFor LatestMagazineBlockViewModel\r\n */\r\n\r\nimport React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport ILatestMagazineBlockViewModel from './LatestMagazineBlockViewModel.type';\r\nimport Horizontal from './HorizontalView';\r\nimport Vertical from './VerticalView';\r\nimport {\r\n  small,\r\n  huge,\r\n  delta,\r\n  beta,\r\n  kappa,\r\n  thin,\r\n  black,\r\n  lightBlack,\r\n  darkerGray,\r\n  whitelilac,\r\n  pixelsToUnit,\r\n  minMediumMediaQuery,\r\n  minLargeMediaQuery,\r\n} from 'Shared/Style';\r\nimport { Breakpoint, useCurrentBreakpoint, translate } from '@avensia/scope';\r\nimport { BOX_ITEM_CLASSNAME } from 'Shared/BoxLayout';\r\nimport { Style } from '@glitz/type';\r\nimport Link from 'Shared/Link';\r\n\r\ntype ButtonPropType = {\r\n  linkUrl: string;\r\n};\r\n\r\nconst LatestMagazineBlock = (props: ILatestMagazineBlockViewModel & StyledProps & ButtonPropType) => {\r\n  const currentBreakpoint = useCurrentBreakpoint();\r\n  const magazineUrl = !!props.linkUrl ? props.linkUrl.url : './';\r\n  const layoutCss: Style = props.isHorizontalCards\r\n    ? {\r\n        marginBottom: pixelsToUnit(40),\r\n        display: 'flex',\r\n        flexWrap: 'wrap',\r\n        padding: {\r\n          xy: pixelsToUnit(15),\r\n        },\r\n        [minMediumMediaQuery]: {\r\n          margin: {\r\n            x: 'auto',\r\n          },\r\n          padding: {\r\n            xy: pixelsToUnit(30),\r\n          },\r\n        },\r\n      }\r\n    : {\r\n        marginBottom: pixelsToUnit(40),\r\n        [minMediumMediaQuery]: {\r\n          padding: {\r\n            xy: pixelsToUnit(25),\r\n          },\r\n        },\r\n      };\r\n\r\n  return props.magazines && props.magazines.length > 0 ? (\r\n    <LatestMagazines css={layoutCss} className={BOX_ITEM_CLASSNAME}>\r\n      <Top>\r\n        <Heading css={{ color: props.isHorizontalCards ? black : darkerGray }}>{props.title}</Heading>\r\n        {!!props.linkUrl && (\r\n          <LinkContainer>\r\n            <LinkStyled to={magazineUrl}>\r\n              {!!props.linkText ? props.linkText : translate('/ProductListing/ShowMore')}\r\n            </LinkStyled>\r\n          </LinkContainer>\r\n        )}\r\n      </Top>\r\n      {props.isHorizontalCards || currentBreakpoint <= Breakpoint.Micro ? (\r\n        <Vertical items={props.magazines} />\r\n      ) : (\r\n        <Horizontal items={props.magazines} currentBreakpoint={currentBreakpoint} />\r\n      )}\r\n    </LatestMagazines>\r\n  ) : null;\r\n};\r\n\r\nexport default styled(LatestMagazineBlock);\r\n\r\nconst LatestMagazines = styled.section({\r\n  backgroundColor: whitelilac,\r\n  marginTop: pixelsToUnit(25),\r\n  [minLargeMediaQuery]: {\r\n    marginTop: pixelsToUnit(40),\r\n  },\r\n});\r\n\r\nconst Heading = styled.h2({\r\n  color: lightBlack,\r\n  fontSize: delta,\r\n  fontWeight: 'bold',\r\n  letterSpacing: pixelsToUnit(1.9),\r\n  lineHeight: 'normal',\r\n  padding: { xy: small },\r\n  textAlign: 'center',\r\n  textTransform: 'uppercase',\r\n  [minMediumMediaQuery]: {\r\n    fontSize: beta,\r\n    fontWeight: 'normal',\r\n    letterSpacing: pixelsToUnit(3),\r\n    padding: { xy: huge },\r\n  },\r\n});\r\n\r\nconst LinkStyled = styled(Link, {\r\n  color: (theme) => theme.textColor,\r\n  height: pixelsToUnit(20),\r\n  textTransform: 'uppercase',\r\n  [minMediumMediaQuery]: {\r\n    maxWidth: '25%',\r\n    fontSize: kappa,\r\n  },\r\n  ':hover': {\r\n    borderBottom: {\r\n      width: thin,\r\n      color: (theme) => theme.textColor,\r\n      style: 'solid',\r\n    },\r\n  },\r\n});\r\n\r\nconst Top = styled.div({\r\n  width: '100%',\r\n});\r\nconst LinkContainer = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  marginBottom: pixelsToUnit(5),\r\n  [minMediumMediaQuery]: {\r\n    justifyContent: 'flex-end',\r\n    paddingRight: pixelsToUnit(35),\r\n    marginBottom: pixelsToUnit(15),\r\n  },\r\n});\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport connect from '../connect';\r\nimport { Breakpoint } from '@avensia/scope';\r\nimport * as style from '../Style';\r\n\r\nexport const SPACING_DEFAULT = style.pixelsToUnit(25);\r\nexport const SPACING_MOBILE = style.pixelsToUnit(15);\r\nexport const BOX_CLASSNAME = 'purefun-box';\r\nexport const BOX_ITEM_CLASSNAME = 'purefun-box-item';\r\n\r\nconst fractions = {\r\n  '1:2': 1 / 2,\r\n  '1:3': 1 / 3,\r\n  '1:4': 1 / 4,\r\n  '2:3': 2 / 3,\r\n  '3:4': 3 / 4,\r\n};\r\n\r\nexport type LayoutAliasType = keyof typeof fractions;\r\n\r\ntype LayoutColumnType = LayoutAliasType[] & {\r\n  0: LayoutAliasType;\r\n  1: LayoutAliasType[] & {\r\n    0: LayoutAliasType;\r\n    1: LayoutAliasType;\r\n  };\r\n};\r\n\r\nexport type LayoutType = LayoutAliasType | LayoutColumnType;\r\n\r\nfunction spacingDefaulter(value: boolean | string, currentBreakpoint: number) {\r\n  return value === true ? (currentBreakpoint > Breakpoint.Tiny ? SPACING_DEFAULT : SPACING_MOBILE) : value;\r\n}\r\n\r\nfunction isThin(fraction: number) {\r\n  return fraction <= 1 / 3;\r\n}\r\n\r\nconst Column = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  flexGrow: 1,\r\n  minWidth: 0,\r\n});\r\n\r\nconst Block = styled.div({\r\n  flexGrow: 1,\r\n  minWidth: 0,\r\n});\r\n\r\ntype BlockEntityType = {\r\n  fraction: number;\r\n  element: React.ReactNode;\r\n};\r\n\r\ntype ColumnEntityType = {\r\n  fraction: number;\r\n  columns: BlockEntityType[];\r\n};\r\n\r\nfunction sort(entities: BlockEntityType[]) {\r\n  return entities.sort((a, b) => b.fraction - a.fraction);\r\n}\r\n\r\nfunction convert(\r\n  row: LayoutType[],\r\n  children: React.ReactNode[],\r\n  currentBreakpoint: number,\r\n  allowSorting?: boolean,\r\n  ): (BlockEntityType | ColumnEntityType)[] {\r\n  if (currentBreakpoint > Breakpoint.Small) {\r\n    return row.map(entry => {\r\n      if (typeof entry === 'string') {\r\n        return {\r\n          fraction: fractions[entry],\r\n          element: children.shift(),\r\n        };\r\n      }\r\n\r\n      return {\r\n        fraction: fractions[entry[0]],\r\n        columns: entry[1].map(entry => ({\r\n          fraction: fractions[entry],\r\n          element: children.shift(),\r\n        })),\r\n      };\r\n    });\r\n  }\r\n\r\n  // Flatten all blocks to full or half width\r\n  if (currentBreakpoint > Breakpoint.Micro) {\r\n    const entities = row.reduce<BlockEntityType[]>((current, item) => {\r\n      if (typeof item === 'string') {\r\n        return [\r\n          ...current,\r\n          {\r\n            fraction: isThin(fractions[item]) ? 0.5 : 1,\r\n            element: children.shift(),\r\n          },\r\n        ];\r\n      }\r\n\r\n      const value = isThin(fractions[item[0]]) ? 0.5 : 1;\r\n      return [\r\n        ...current,\r\n        ...item[1].map(() => ({\r\n          fraction: value,\r\n          element: children.shift(),\r\n        })),\r\n      ];\r\n    }, []);\r\n\r\n    return allowSorting ? sort(entities) : entities;\r\n  }\r\n\r\n  // Flatten all blocks to full width\r\n  const entities = row.reduce<BlockEntityType[]>(\r\n    (current, entry) =>\r\n      typeof entry === 'string'\r\n        ? [\r\n          ...current,\r\n          {\r\n            fraction: 1,\r\n            element: children.shift(),\r\n          },\r\n        ]\r\n        : [\r\n          ...current,\r\n          ...entry[1].map(() => ({\r\n            fraction: 1,\r\n            element: children.shift(),\r\n          })),\r\n        ],\r\n    [],\r\n  );\r\n\r\n  return allowSorting ? sort(entities) : entities;\r\n}\r\n\r\nfunction isColumn(entity: BlockEntityType | ColumnEntityType): entity is ColumnEntityType {\r\n  return 'columns' in entity;\r\n}\r\n\r\nfunction wrap(spacingBetweenBlocks: boolean | string, currentBreakpoint: number) {\r\n  const spacing = spacingDefaulter(spacingBetweenBlocks, currentBreakpoint);\r\n  return (entity: BlockEntityType | ColumnEntityType, index: number): React.ReactNode => {\r\n    return isColumn(entity) ? (\r\n      <Column\r\n        key={index}\r\n        css={{\r\n          flexBasis: `${entity.fraction * 100}%`,\r\n        }}\r\n      >\r\n        {entity.columns.map(wrap(spacingBetweenBlocks, currentBreakpoint))}\r\n      </Column>\r\n    ) : (\r\n        <Block\r\n          key={index}\r\n          css={{\r\n            ...(spacing && {\r\n              padding: {\r\n                xy: `calc(${spacing} / 2)`,\r\n              },\r\n            }),\r\n            flexBasis: spacing ? `calc(${entity.fraction * 100}% - ${spacing})` : `${entity.fraction * 100}%`,\r\n          }}\r\n        >\r\n          {entity.element}\r\n        </Block>\r\n      );\r\n  };\r\n}\r\n\r\ntype RequiredPropType = {\r\n  layout: LayoutType[];\r\n  spacingBetweenBlocks?: boolean | string;\r\n  allowSorting?: boolean;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n};\r\n\r\ntype ConnectStateType = {\r\n  currentBreakpoint: number;\r\n};\r\n\r\ntype PropType = StyledProps & RequiredPropType & ConnectStateType;\r\n\r\nclass BoxLayout extends React.Component<PropType> {\r\n  render() {\r\n    const children = React.Children.toArray(this.props.children);\r\n    const entities = convert(this.props.layout, children, this.props.currentBreakpoint, this.props.allowSorting);\r\n    const spacing = spacingDefaulter(this.props.spacingBetweenBlocks, this.props.currentBreakpoint);\r\n    return (\r\n      <styled.Div\r\n        css={{\r\n          display: 'flex',\r\n          flexWrap: 'wrap',\r\n          ...(spacing && {\r\n            margin: {\r\n              xy: `calc(-${spacing} / 2)`,\r\n            },\r\n          }),\r\n          ...(this.props.currentBreakpoint > Breakpoint.Small && {\r\n            flexWrap: 'nowrap',\r\n          }),\r\n        }}\r\n        className={BOX_CLASSNAME}\r\n      >\r\n        {entities.map(wrap(this.props.spacingBetweenBlocks, this.props.currentBreakpoint))}\r\n      </styled.Div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n\r\nexport default styled(\r\n  connect(\r\n    (state): ConnectStateType => ({\r\n      currentBreakpoint: state.currentBreakpoint,\r\n    }),\r\n  )(BoxLayout),\r\n);\r\n"],"sourceRoot":""}