{"version":3,"sources":["common/components/Widgets/BrandHighlight.tsx","common/components/Widgets/ProductGroupHighlight/ProductGroupIconHighlight.tsx","common/components/Widgets/ProductGroupHighlight/ProductGroupHighlight.tsx","common/components/Widgets/ProductGroupHighlight/index.ts","common/components/Widgets/constants.ts","styleguide/components/Links/HighlightedLink/HighlightedLink.tsx","common/components/HighlightedLinkSection/HighlightedLinkSection.tsx","styleguide/components/Links/OutlinedIconLinkList/OutlinedIconLinkList.tsx","styleguide/components/Links/OutlinedIconLink/OutlinedIconLink.tsx"],"names":["BrandHighlightWrapper","styled_components__WEBPACK_IMPORTED_MODULE_2__","section","withConfig","displayName","componentId","templateObject_1","Object","tslib__WEBPACK_IMPORTED_MODULE_0__","_constants__WEBPACK_IMPORTED_MODULE_7__","getBottomRowCount","items","modulo","m","hasEvenRows","bottomRowCount","StyledBrandItem","a","templateObject_6","_a","theme","colors","border","styleguide_helpers_media__WEBPACK_IMPORTED_MODULE_4__","phone560","templateObject_2","tablet","templateObject_3","props","totalItems","desktop","templateObject_4","desktop1440","templateObject_5","StyledBrandHighlightItemContainer","div","templateObject_11","templateObject_7","maxColumns","templateObject_8","templateObject_9","templateObject_10","__webpack_exports__","count","widgetId","title","resourceItems","react__WEBPACK_IMPORTED_MODULE_1__","id","styleguide_components_Typography_MediumHeader_MediumHeader__WEBPACK_IMPORTED_MODULE_3__","className","length","map","item","index","highlightIcon","utils_import__WEBPACK_IMPORTED_MODULE_6__","iconName","icon","key","href","url","styleguide_components_LazyImage__WEBPACK_IMPORTED_MODULE_5__","src","imageUrl","ProductGroupIconHighlight","_super","ProductGroupIconHightlight","_this","apply","this","arguments","state","loadedIcon","tslib_es6","prototype","componentDidMount","loadIcon","render","Icon","react","OutlinedIconLink","utils_import","styleGuideIcon","sent","setState","ProductGroupHighlightWrapper","styled_components_browser_esm","ProductGroupHighlight_ProductGroupHighlight","layoutName","onLinkClick","MediumHeader","HighlightedLinkSection","itemTitle","HighlightedLink","target","intense","OutlinedIconLinkList","defaultProps","Widgets_ProductGroupHighlight_ProductGroupHighlight","Routable","__webpack_require__","d","WIDGET_SPACING_HUGE","WIDGET_SPACING_LARGE","WIDGET_SPACING_MEDIUM","WIDGET_SPACING_SMALL","TEXT_WIDTH","TEXT_WIDTH_NARROW","StyledHighlightedLink","wrapText","fonts","primary","selectedItemBackground","brandPrimaryFeatureBackground","brandPrimary","linkText","white","children","styled_components__WEBPACK_IMPORTED_MODULE_1__","styleguide_helpers_media__WEBPACK_IMPORTED_MODULE_2__","IconList","_helpers__WEBPACK_IMPORTED_MODULE_3__","rest","StyledOutlinedIconLink","borderHighlight","LinkText","span","primaryButtons","rel","renderContent","as"],"mappings":"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","file":"static/js/widget-product.198252ae.chunk.js","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport MediumHeader from 'styleguide/components/Typography/MediumHeader/MediumHeader';\r\nimport { media, mediaBreakpoints } from 'styleguide/helpers/media';\r\nimport { LazyImage } from 'styleguide/components/LazyImage';\r\nimport { BrandHighlightConfiguration } from './interfaces/BrandHighlight';\r\nimport { WidgetCommonProps, ResourceHighlightItem } from './interfaces/interfaces';\r\nimport { Icon } from 'utils/import';\r\nimport { WIDGET_SPACING_SMALL } from './constants';\r\n\r\nconst BrandHighlightWrapper = styled.section`\r\n\tmargin: ${WIDGET_SPACING_SMALL}px 0 0;\r\n\r\n\t.brand-highlight-header {\r\n\t\ttext-align: center;\r\n\t}\r\n`;\r\n\r\nconst getBottomRowCount = (items: number, modulo: number): number => {\r\n\tconst m = items % modulo;\r\n\treturn m > 0 ? m : modulo;\r\n};\r\n\r\nconst hasEvenRows = (items: number, modulo: number): boolean => {\r\n\tconst bottomRowCount = getBottomRowCount(items, modulo);\r\n\treturn bottomRowCount === modulo || bottomRowCount === items;\r\n};\r\n\r\ninterface StyledBrandItemProps {\r\n\ttotalItems: number;\r\n}\r\n\r\nconst StyledBrandItem = styled.a<StyledBrandItemProps>`\r\n\tposition: relative;\r\n\tpadding: 5px;\r\n\tborder: 1px solid ${({ theme }) => theme.colors.border};\r\n\ttext-align: center;\r\n\tfloat: left;\r\n\twidth: 50%;\r\n\theight: 80px;\r\n\r\n\t> img {\r\n\t\tmax-width: 90px;\r\n\t\tmax-height: 65px;\r\n\t\tmargin: auto;\r\n\t\tposition: relative;\r\n\t\ttop: 50%;\r\n\t\ttransform: translateY(-50%);\r\n\t}\r\n\r\n\t${media.phone560`\r\n    width: calc(100% / 3);\r\n  `};\r\n\r\n\t${media.tablet<StyledBrandItemProps>`\r\n    width: 20%;\r\n\t\t> img {\r\n\t\t\tmax-width: ${props => (props.totalItems > 4 ? '90' : '140')}px;\r\n\t\t\tmax-height: ${props => (props.totalItems > 4 ? '65' : '80')}px;\r\n\t\t}\r\n  `};\r\n\r\n\t${media.desktop`\r\n\t\twidth: calc(100% / 6);\r\n\t`};\r\n\r\n\t${media.desktop1440`\r\n\t\twidth: 12.5%;\r\n\t`};\r\n\r\n\t&:first-child {\r\n\t\tborder-left: none;\r\n\t}\r\n\r\n\t@media (max-width: ${mediaBreakpoints.phone560 - 1}px) {\r\n\t\t&:nth-child(-n + 2) {\r\n\t\t\tborder-top: none;\r\n\t\t}\r\n\t\t&:nth-child(2n) {\r\n\t\t\tborder-right: none;\r\n\t\t}\r\n\t\t&:nth-child(2n + 1) {\r\n\t\t\tborder-left: none;\r\n\t\t}\r\n\t\t&:nth-last-child(-n + ${props => getBottomRowCount(props.totalItems, 2)}) {\r\n\t\t\tborder-bottom: none;\r\n\t\t\t${props =>\r\n\t\t\t\thasEvenRows(props.totalItems, 2) &&\r\n\t\t\t\t`\r\n\t\t\t\tborder-right: none;\r\n\t\t\t`}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: ${mediaBreakpoints.phone560}px) and (max-width: ${mediaBreakpoints.tablet - 1}px) {\r\n\t\t&:nth-child(-n + 3) {\r\n\t\t\tborder-top: none;\r\n\t\t}\r\n\t\t&:nth-child(3n) {\r\n\t\t\tborder-right: none;\r\n\t\t}\r\n\t\t&:nth-child(3n + 1) {\r\n\t\t\tborder-left: none;\r\n\t\t}\r\n\t\t&:nth-last-child(-n + ${props => getBottomRowCount(props.totalItems, 3)}) {\r\n\t\t\tborder-bottom: none;\r\n\t\t\t${props =>\r\n\t\t\t\thasEvenRows(props.totalItems, 3) &&\r\n\t\t\t\t`\r\n\t\t\t\tborder-right: none;\r\n\t\t\t`}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: ${mediaBreakpoints.tablet}px) and (max-width: ${mediaBreakpoints.desktop - 1}px) {\r\n\t\t&:nth-child(-n + 5) {\r\n\t\t\tborder-top: none;\r\n\t\t}\r\n\t\t&:nth-child(5n) {\r\n\t\t\tborder-right: none;\r\n\t\t}\r\n\t\t&:nth-child(5n + 1) {\r\n\t\t\tborder-left: none;\r\n\t\t}\r\n\t\t&:nth-last-child(-n + ${props => getBottomRowCount(props.totalItems, 5)}) {\r\n\t\t\tborder-bottom: none;\r\n\t\t\t${props =>\r\n\t\t\t\thasEvenRows(props.totalItems, 5) &&\r\n\t\t\t\t`\r\n\t\t\t\tborder-right: none;\r\n\t\t\t`}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: ${mediaBreakpoints.desktop}px) and (max-width: ${mediaBreakpoints.desktop1440 - 1}px) {\r\n\t\t&:nth-child(-n + 6) {\r\n\t\t\tborder-top: none;\r\n\t\t}\r\n\t\t&:nth-child(6n) {\r\n\t\t\tborder-right: none;\r\n\t\t}\r\n\t\t&:nth-child(6n + 1) {\r\n\t\t\tborder-left: none;\r\n\t\t}\r\n\t\t&:nth-last-child(-n + ${props => getBottomRowCount(props.totalItems, 6)}) {\r\n\t\t\tborder-bottom: none;\r\n\t\t\t${props =>\r\n\t\t\t\thasEvenRows(props.totalItems, 6) &&\r\n\t\t\t\t`\r\n\t\t\t\tborder-right: none;\r\n\t\t\t`}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: ${mediaBreakpoints.desktop1440}px) {\r\n\t\t&:nth-child(-n + 8) {\r\n\t\t\tborder-top: none;\r\n\t\t}\r\n\t\t&:nth-child(8n) {\r\n\t\t\tborder-right: none;\r\n\t\t}\r\n\t\t&:nth-child(8n + 1) {\r\n\t\t\tborder-left: none;\r\n\t\t}\r\n\t\t&:nth-last-child(-n + ${props => getBottomRowCount(props.totalItems, 8)}) {\r\n\t\t\tborder-bottom: none;\r\n\t\t\t${props =>\r\n\t\t\t\thasEvenRows(props.totalItems, 8) &&\r\n\t\t\t\t`\r\n\t\t\t\tborder-right: none;\r\n\t\t\t`}\r\n\t\t}\r\n\t}\r\n\r\n\t@supports (display: grid) {\r\n\t\twidth: auto;\r\n\t\tfloat: none;\r\n\t\tmargin: -1px;\r\n\t}\r\n`;\r\n\r\nconst StyledBrandHighlightItemContainer = styled.div<{ maxColumns: number; totalItems: number }>`\r\n\tmax-width: 1080px;\r\n\tmargin: 20px auto 45px;\r\n\tdisplay: block;\r\n\toverflow: hidden;\r\n\r\n\t${props =>\r\n\t\tprops.totalItems < 3 &&\r\n\t\t`\r\n\t\tmax-width: 750px;\r\n\t`};\r\n\r\n\t@supports (display: grid) {\r\n\t\toverflow: visible;\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-columns: repeat(2, 1fr);\r\n\t\tgrid-gap: 1px;\r\n\r\n\t\t${media.phone560<{ maxColumns: number }>`\r\n\t\t\tgrid-template-columns: repeat(${props => (props.maxColumns > 3 ? 3 : props.maxColumns)}, 1fr);\r\n\t\t`};\r\n\r\n\t\t${media.tablet<{ maxColumns: number }>`\r\n\t\t\tgrid-template-columns: repeat(${props => (props.maxColumns > 5 ? 5 : props.maxColumns)}, 1fr);\r\n\t\t`};\r\n\r\n\t\t${media.desktop<{ maxColumns: number }>`\r\n\t\t\tgrid-template-columns: repeat(${props => (props.maxColumns > 6 ? 6 : props.maxColumns)}, 1fr);\r\n\t\t`};\r\n\r\n\t\t${media.desktop1440<{ maxColumns: number }>`\r\n\t\t\tgrid-template-columns: repeat(${props => props.maxColumns}, 1fr);\r\n\t\t`};\r\n\t}\r\n`;\r\n\r\nconst BrandHighlight: React.FC<WidgetCommonProps & BrandHighlightConfiguration> = ({\r\n\twidgetId,\r\n\ttitle,\r\n\tresourceItems,\r\n}) => {\r\n\tconst renderHighlightIcon = (item: ResourceHighlightItem, index: number) => {\r\n\t\tconst highlightIcon = <Icon iconName={item.icon} />;\r\n\r\n\t\treturn (\r\n\t\t\t<StyledBrandItem key={index} href={item.url} totalItems={resourceItems.length}>\r\n\t\t\t\t{highlightIcon ? highlightIcon : <LazyImage src={`${item.imageUrl}/125x70-brand-thumbnail`} />}\r\n\t\t\t</StyledBrandItem>\r\n\t\t);\r\n\t};\r\n\r\n\tconst resolveMaxColumns = (items: ResourceHighlightItem[]): number => {\r\n\t\tconst count = items.length;\r\n\t\treturn count > 8 ? 8 : count;\r\n\t};\r\n\r\n\treturn (\r\n\t\t<BrandHighlightWrapper id={widgetId}>\r\n\t\t\t<MediumHeader className=\"brand-highlight-header\">{title}</MediumHeader>\r\n\t\t\t<StyledBrandHighlightItemContainer\r\n\t\t\t\tmaxColumns={resolveMaxColumns(resourceItems)}\r\n\t\t\t\ttotalItems={resourceItems.length}>\r\n\t\t\t\t{resourceItems.map(renderHighlightIcon)}\r\n\t\t\t</StyledBrandHighlightItemContainer>\r\n\t\t</BrandHighlightWrapper>\r\n\t);\r\n};\r\n\r\nexport default BrandHighlight;\r\n","import * as React from 'react';\r\nimport { ResourceHighlightItem } from '../interfaces/interfaces';\r\nimport OutlinedIconLink from 'styleguide/components/Links/OutlinedIconLink/OutlinedIconLink';\r\nimport { styleguideImport } from 'utils/import';\r\n\r\ninterface ProductGroupIconHightlightState {\r\n\tloadedIcon: React.FC | React.ComponentClass | null;\r\n}\r\n\r\nclass ProductGroupIconHightlight extends React.Component<ResourceHighlightItem, ProductGroupIconHightlightState> {\r\n\tpublic state: ProductGroupIconHightlightState = {\r\n\t\tloadedIcon: null,\r\n\t};\r\n\r\n\tpublic componentDidMount() {\r\n\t\tconst { icon } = this.props;\r\n\t\tthis.loadIcon(icon);\r\n\t}\r\n\r\n\tpublic render() {\r\n\t\tconst { title, url, icon } = this.props;\r\n\t\tconst { loadedIcon } = this.state;\r\n\r\n\t\tif (!icon) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\r\n\t\tlet Icon: any = 'span';\r\n\t\tif (loadedIcon) {\r\n\t\t\tIcon = loadedIcon;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t<OutlinedIconLink icon={<Icon />} href={url}>\r\n\t\t\t\t{title}\r\n\t\t\t</OutlinedIconLink>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate async loadIcon(icon?: string | null) {\r\n\t\tif (icon) {\r\n\t\t\tconst styleGuideIcon = await styleguideImport(icon);\r\n\t\t\tif (styleGuideIcon) {\r\n\t\t\t\tthis.setState({ loadedIcon: styleGuideIcon });\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport default ProductGroupIconHightlight;\r\n","import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport MediumHeader from 'styleguide/components/Typography/MediumHeader/MediumHeader';\r\nimport HighlightedLink from 'styleguide/components/Links/HighlightedLink/HighlightedLink';\r\nimport OutlinedIconLinkList from 'styleguide/components/Links/OutlinedIconLinkList/OutlinedIconLinkList';\r\nimport { ProductGroupHighlightConfiguration } from '../interfaces/ProductGroupHighlight';\r\nimport injectRoutable, { InjectedRoutableProps } from '../../Routing/Routable';\r\nimport HighlightedLinkSection from '../../HighlightedLinkSection/HighlightedLinkSection';\r\nimport { WidgetCommonProps } from '../interfaces/interfaces';\r\nimport ProductGroupIconHightlight from './ProductGroupIconHighlight';\r\n\r\nconst ProductGroupHighlightWrapper = styled.section`\r\n\tmargin: 50px 0 60px;\r\n\r\n\t.product-group-header {\r\n\t\ttext-align: center;\r\n\t\tmargin-top: 0;\r\n\t}\r\n`;\r\n\r\nconst ProductGroupHighlight: React.FC<WidgetCommonProps &\r\n\tProductGroupHighlightConfiguration &\r\n\tInjectedRoutableProps> = ({ widgetId, title, resourceItems, layoutName, onLinkClick }) => {\r\n\tconst renderItemsAsPills = () => {\r\n\t\treturn (\r\n\t\t\t<HighlightedLinkSection>\r\n\t\t\t\t{resourceItems.map(({ title: itemTitle, url }, index) => (\r\n\t\t\t\t\t<HighlightedLink key={`${url}-${index}`} title={itemTitle} href={url} target=\"\" intense>\r\n\t\t\t\t\t\t{itemTitle}\r\n\t\t\t\t\t</HighlightedLink>\r\n\t\t\t\t))}\r\n\t\t\t</HighlightedLinkSection>\r\n\t\t);\r\n\t};\r\n\r\n\tconst renderItemsAsOutlinedIconLinks = () => {\r\n\t\treturn (\r\n\t\t\t<OutlinedIconLinkList>\r\n\t\t\t\t{resourceItems.map((item, index) => (\r\n\t\t\t\t\t<ProductGroupIconHightlight key={`${item.url}-${index}`} {...item} />\r\n\t\t\t\t))}\r\n\t\t\t</OutlinedIconLinkList>\r\n\t\t);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<ProductGroupHighlightWrapper id={widgetId}>\r\n\t\t\t<MediumHeader className=\"product-group-header\">{title}</MediumHeader>\r\n\t\t\t{layoutName === 'pills' && renderItemsAsPills()}\r\n\t\t\t{layoutName === 'iconBox' && renderItemsAsOutlinedIconLinks()}\r\n\t\t</ProductGroupHighlightWrapper>\r\n\t);\r\n};\r\n\r\nProductGroupHighlight.defaultProps = {\r\n\tlayoutName: 'pills',\r\n};\r\n\r\nexport default injectRoutable(ProductGroupHighlight);\r\n","import ProductGroupHighlight from './ProductGroupHighlight';\r\nexport default ProductGroupHighlight;\r\n","export const WIDGET_SPACING_HUGE = 80;\r\nexport const WIDGET_SPACING_LARGE = 60;\r\nexport const WIDGET_SPACING_MEDIUM = 50;\r\nexport const WIDGET_SPACING_SMALL = 30;\r\n\r\nexport const TEXT_WIDTH = 720;\r\nexport const TEXT_WIDTH_NARROW = 600;\r\n","import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nconst StyledHighlightedLink = styled('a')<HighlightedLinkProps>`\r\n\tborder-radius: 17px;\r\n\tfont-weight: 800;\r\n\tfont-size: 13px;\r\n\tline-height: 14px;\r\n\ttext-align: center;\r\n\tpadding: 5px 12px;\r\n\ttext-decoration: none;\r\n\twhite-space: ${props => (props.wrapText ? 'normal' : 'nowrap')};\r\n\tdisplay: inline-block;\r\n\tfont-family: ${props => props.theme.fonts.primary};\r\n\tcursor: pointer;\r\n\tbackground-color: ${props =>\r\n\t\tprops.intense ? props.theme.colors.selectedItemBackground : props.theme.colors.brandPrimaryFeatureBackground};\r\n\tcolor: ${props => (props.intense ? props.theme.colors.brandPrimary : props.theme.colors.linkText)};\r\n\tborder: 1px solid\r\n\t\t${props =>\r\n\t\t\tprops.intense ? props.theme.colors.selectedItemBackground : props.theme.colors.brandPrimaryFeatureBackground};\r\n\r\n\t&:hover {\r\n\t\tborder-color: ${props => props.theme.colors.linkText};\r\n\t\tbackground-color: ${props => props.theme.colors.white};\r\n\t\ttext-decoration: none;\r\n\t}\r\n`;\r\n\r\nexport interface HighlightedLinkProps {\r\n\tintense?: boolean;\r\n\twrapText?: boolean;\r\n}\r\n\r\nconst HighlightedLink: React.FC<HighlightedLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> = props => {\r\n\treturn <StyledHighlightedLink {...props}>{props.children}</StyledHighlightedLink>;\r\n};\r\n\r\nexport default HighlightedLink;\r\n","import styled from 'styled-components';\r\nimport { media } from 'styleguide/helpers/media';\r\n\r\nconst HighlightedLinkSection = styled.section`\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twidth: 80%;\r\n\tmargin: 0 auto 0;\r\n\tbox-sizing: border-box;\r\n\r\n\t> * {\r\n\t\tmargin-left: 4px;\r\n\t\tmargin-right: 4px;\r\n\t\tmargin-bottom: 10px;\r\n\t}\r\n\r\n\t${media.tablet`\r\n\t\twidth: 100%;\r\n  `};\r\n\r\n\t${media.desktop`\r\n\t\twidth: 100%;\r\n\t\tpadding: 0 120px;\r\n  `};\r\n`;\r\n\r\nexport default HighlightedLinkSection;\r\n","import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { media } from '../../../helpers';\r\n\r\nconst IconList = styled.div`\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\tjustify-content: center;\r\n\tmargin: -6px;\r\n\twidth: calc(100% + 12px);\r\n\r\n\t${media.tablet`\r\n    margin-top: 25px;\r\n  `};\r\n\r\n\t& > a,\r\n\t& > span {\r\n\t\tmargin: 5px;\r\n\t\twidth: 149px;\r\n\t\twidth: calc(50% - 12px);\r\n\r\n\t\t${media.tablet`\r\n      width: calc(100% / 3 - 12px);\r\n    `};\r\n\r\n\t\t${media.desktop`\r\n      max-width: 170px;\r\n      flex: 1 1 149px;\r\n      flex: 1 1 calc(100% / 6 - 12px);\r\n    `};\r\n\r\n\t\t${media.desktop1440`\r\n      flex: 1 1 170px;\r\n      flex: 1 1 calc(100% / 6 - 12px);\r\n    `};\r\n\t}\r\n`;\r\n\r\nconst OutlinedIconLinkList: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...rest }) => {\r\n\treturn (\r\n\t\t<IconList className={className} {...rest}>\r\n\t\t\t{children}\r\n\t\t</IconList>\r\n\t);\r\n};\r\n\r\nexport default OutlinedIconLinkList;\r\n","import * as React from 'react';\r\nimport { NormalIconWrapperProps } from '../../Icons/NormalIcons/NormalIconWrapper';\r\nimport styled from 'styled-components';\r\n\r\nconst StyledOutlinedIconLink = styled.a`\r\n\tborder: 2px solid ${props => props.theme.colors.borderHighlight};\r\n\tborder-radius: 4px;\r\n\tbackground: ${props => props.theme.colors.white};\r\n\tpadding: 10px 15px 15px;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n\tcolor: ${props => props.theme.colors.brandPrimary};\r\n\ttext-decoration: none;\r\n`;\r\n\r\nconst LinkText = styled.span`\r\n\tfont-family: ${props => props.theme.fonts.primaryButtons};\r\n\tfont-size: 13px;\r\n\tfont-weight: 800;\r\n\tdisplay: block;\r\n\ttext-align: center;\r\n\twidth: 100%;\r\n`;\r\n\r\ninterface OutlinedIconLinkProps {\r\n\ticon?: React.ReactElement<NormalIconWrapperProps & React.SVGAttributes<SVGElement>>;\r\n}\r\n\r\nconst OutlinedIconLink: React.FC<OutlinedIconLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> = ({\r\n\thref,\r\n\ticon,\r\n\tchildren,\r\n\ttarget,\r\n\trel,\r\n}) => {\r\n\tconst renderContent = () => (\r\n\t\t<>\r\n\t\t\t{icon}\r\n\t\t\t<LinkText>{children}</LinkText>\r\n\t\t</>\r\n\t);\r\n\r\n\tif (!href) {\r\n\t\treturn <StyledOutlinedIconLink as=\"span\">{renderContent()}</StyledOutlinedIconLink>;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<StyledOutlinedIconLink href={href} target={target} rel={rel}>\r\n\t\t\t{renderContent()}\r\n\t\t</StyledOutlinedIconLink>\r\n\t);\r\n};\r\n\r\nexport default OutlinedIconLink;\r\n"],"sourceRoot":""}