\r\n \r\n {title}\r\n \r\n {formatedLinks &&\r\n formatedLinks.map((link: formattedLink, i: number) => (\r\n \r\n {link.Title}\r\n \r\n ))}\r\n
\r\n - \r\n {formatedLinks &&\r\n formatedLinks.map((link: formattedLink, index) => (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SocialMediaLinks;\r\n","import { createClient, ContentfulClientApi, EntryCollection, ContentTypeCollection } from \"contentful\";\r\nimport { StaticPageState } from \"../providers/contentful\";\r\nimport { each, filter, find, groupBy, map, sortBy } from \"lodash\";\r\nimport { SimpleContentModel } from \"../models/contentful/SimpleContent\";\r\nimport { ComplexContentModel } from \"../models/contentful/ComplexContent\";\r\nimport appConfig from \"../constants/app.constants\";\r\n\r\nimport { SimpleContentsBlockState, ComplexContentsBlockState } from \"../providers/contentful\";\r\n\r\nexport type contentfulBlockType = \"banner\" | \"full\" | \"inline\" | \"stacked\" | \"dynamic\";\r\n// interface PagesGroupedBySection {\r\n// [key: string]: StaticPage[];\r\n// }\r\nclass Contentful {\r\n private client: ContentfulClientApi;\r\n\r\n constructor() {\r\n this.client = createClient({\r\n space: process.env.REACT_APP_CONTENTFUL_SPACE as string,\r\n environment: appConfig.contentfulEnv as string,\r\n accessToken: process.env.REACT_APP_CONTENTFUL_KEY as string,\r\n });\r\n }\r\n public getContentTypes(query?: any): Promise\r\n
\r\n )}\r\n \r\n \r\n \"} className={classes.textColor}>\r\n {!hideHome && (\r\n \r\n Home\r\n \r\n )}\r\n {links.map((l, i) => (\r\n \r\n {l.label}\r\n \r\n ))}\r\n {current && current !== \"\" && {current} }\r\n \r\n \r\n
\r\n ) : null;\r\n};\r\n\r\nexport default Breadcrumbs;\r\n","import React, { Fragment, FunctionComponent, useContext, useMemo } from \"react\";\r\nimport { createStyles, List, ListItem, makeStyles, Theme } from \"@material-ui/core\";\r\nimport { Category } from \"ordercloud-javascript-sdk\";\r\nimport { neutral, purple } from \"../../../../themes/colors\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { CatalogContext } from \"../../../../providers/catalog\";\r\nimport categoryService from \"../../../../services/category.service\";\r\n\r\ninterface MegaMenuSubCategoryProps {\r\n subcategory: Category;\r\n onItemClick: any;\r\n}\r\n\r\nconst useStyle = makeStyles((theme: Theme) =>\r\n createStyles({\r\n listRoot: {\r\n marginBottom: theme.spacing(2),\r\n padding: theme.spacing(0, 2, 0, 4),\r\n },\r\n listHeader: {\r\n padding: 0,\r\n },\r\n subCatTitle: {\r\n fontSize: theme.typography.h5.fontSize,\r\n fontWeight: theme.typography.fontWeightBold,\r\n color: purple.utility,\r\n textDecoration: \"none\",\r\n \"&:hover\": {\r\n color: purple.regular,\r\n },\r\n },\r\n subCatListItem: {\r\n padding: \"4px 0\",\r\n \"& a\": {\r\n color: neutral.text_white_bg,\r\n fontSize: theme.typography.body1.fontSize,\r\n textDecoration: \"none\",\r\n \"&:hover\": {\r\n color: neutral.strikethrough,\r\n },\r\n },\r\n },\r\n })\r\n);\r\n\r\nconst MegaMenuSubCategory: FunctionComponent- \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default RelatedArticles;\r\n","import { useEffect, useState } from \"react\";\r\n\r\n// Hook\r\nfunction useDebounce(\r\n value: any,\r\n delay: number,\r\n options?: {\r\n toggle?: \"default\" | \"on\" | \"off\";\r\n }\r\n) {\r\n // State and setters for debounced value\r\n const [debouncedValue, setDebouncedValue] = useState(value);\r\n\r\n useEffect(\r\n () => {\r\n if (typeof value === \"boolean\") {\r\n if (options && options.toggle === \"on\" && !value) {\r\n return setDebouncedValue(value);\r\n }\r\n if (options && options.toggle === \"off\" && value) {\r\n return setDebouncedValue(value);\r\n }\r\n }\r\n\r\n // Update debounced value after delay\r\n const handler = setTimeout(() => {\r\n setDebouncedValue(value);\r\n }, delay);\r\n\r\n // Cancel the timeout if value changes (also on delay change or unmount)\r\n // This is how we prevent debounced value from updating if value is changed ...\r\n // .. within the delay period. Timeout gets cleared and restarted.\r\n return () => {\r\n clearTimeout(handler);\r\n };\r\n },\r\n [value, delay, options] // Only re-call effect if value or delay changes\r\n );\r\n\r\n return debouncedValue;\r\n}\r\n\r\nexport default useDebounce;\r\n","import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState, useContext } from \"react\";\r\nimport { Container, createStyles, makeStyles, Theme } from \"@material-ui/core\";\r\nimport { Skeleton } from \"@material-ui/lab\";\r\nimport { Categories, Category, RequiredDeep } from \"ordercloud-javascript-sdk\";\r\n\r\nimport MegaMenuSubCategory from \"./MegaMenuSubCatergory\";\r\nimport MegaMenu from \"./MegaMenu\";\r\nimport RelatedArticles from \"./RelatedArticles\";\r\nimport { neutral, purple } from \"../../../../themes/colors\";\r\nimport Link from \"../../../Shared/Link\";\r\nimport useDebounce from \"../../../Shared/hooks/useDebounce\";\r\nimport CategoryService from \"../../../../services/category.service\";\r\nimport { CatalogContext } from \"../../../../providers/catalog\";\r\nimport { find } from \"lodash\";\r\n\r\ninterface TopLevelCategoriesProps {}\r\n\r\nconst useStyle = makeStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n display: \"flex\",\r\n justifyContent: \"space-around\",\r\n alignItems: \"stretch\",\r\n width: \"100%\",\r\n },\r\n topLevelCat: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n position: \"relative\",\r\n zIndex: theme.zIndex.appBar,\r\n color: neutral.text_white_bg,\r\n },\r\n subcategoriesContainer: {\r\n display: \"flex\",\r\n height: \"100%\",\r\n margin: 0,\r\n padding: theme.spacing(3, 2),\r\n },\r\n subcategories: {\r\n flex: \"1 0 83.33%\",\r\n columns: \"200px auto\",\r\n columnFill: \"balance\",\r\n columnRule: `solid 1px ${theme.palette.grey[300]}`,\r\n overflowX: \"auto\",\r\n position: \"relative\",\r\n\r\n \"& .MuiList-subheader\": {\r\n padding: \"0 16px\",\r\n pageBreakInside: \"avoid\",\r\n \"& li:not(:only-child):last-child\": {\r\n marginBottom: 16,\r\n pageBreakAfter: \"always\",\r\n },\r\n \"& li:first-child\": {\r\n paddingBottom: 0,\r\n },\r\n \"& li:only-child\": {\r\n paddingBottom: 16,\r\n },\r\n },\r\n \"& li\": {\r\n lineHeight: \"initial\",\r\n },\r\n },\r\n relatedArticles: {\r\n flex: \"1 0 16.67%\",\r\n backgroundColor: purple.light,\r\n \"& ul\": {\r\n display: \"flex\",\r\n flexFlow: \"column nowrap\",\r\n height: \"100%\",\r\n },\r\n },\r\n onSale: {\r\n color: purple.regular,\r\n },\r\n })\r\n);\r\n\r\nconst TopLevelCategories: FunctionComponent- \r\n
\r\n {topCatLinks}\r\n \r\n On Sale\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TopLevelCategories;\r\n","import React, { FunctionComponent } from \"react\";\r\nimport {\r\n Container,\r\n createStyles,\r\n makeStyles,\r\n Theme,\r\n Toolbar,\r\n} from \"@material-ui/core\";\r\n\r\nimport TopLevelCategories from \"./MegaMenu/TopLevelCategories\";\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex\",\r\n },\r\n \"& .MuiLink-root\": {\r\n \"&:not(:last-child)\": {\r\n marginRight: theme.spacing(3),\r\n },\r\n },\r\n alignItems: \"stretch\",\r\n },\r\n container: {\r\n display: \"flex\",\r\n },\r\n })\r\n);\r\n\r\ninterface CategoryToolbarProps {}\r\n\r\nconst CategoryToolbar: FunctionComponent{subCategories}
\r\n {selectedCat?.xp?.Articles && (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Cart\r\n \r\n {!isUndefined(cartCount) && (\r\n \r\n {`${cartCount} Item(s)`}\r\n \r\n )}\r\n
\r\n \r\n {isDesktop && (\r\n \r\n {variant === \"CareInfo\" ? \"Resource Hub\" : variant === \"Query Suggestions\" ? \"Popular Searches\" : variant}\r\n \r\n )}\r\n {!isDesktop && (\r\n \r\n {variant === \"Categories\"\r\n ? null\r\n : variant === \"CareInfo\"\r\n ? \"Resource Hub \"\r\n : variant === \"Query Suggestions\"\r\n ? \"Popular Searches\"\r\n : variant}\r\n \r\n )}\r\n\r\n {variant !== \"Query Suggestions\" &&\r\n variant !== \"Categories\" &&\r\n (variant === \"Products\" ? (\r\n
\r\n );\r\n};\r\n\r\nexport default SearchResultsHeader;\r\n","export default __webpack_public_path__ + \"static/media/noimg.018bd907.jpg\";","import { Box, createStyles, makeStyles, Theme, Typography } from \"@material-ui/core\";\r\nimport { LineItem } from \"ordercloud-javascript-sdk\";\r\nimport React, { Fragment, FunctionComponent, useEffect, useMemo, useState } from \"react\";\r\nimport { min, max } from \"lodash\";\r\nimport { BachmansProduct } from \"../../models/product\";\r\n\r\nimport Currency from \"react-currency-formatter\";\r\n\r\nexport interface ProductPriceProps {\r\n productGroup?: BachmansProduct[];\r\n product?: BachmansProduct;\r\n lineItem?: LineItem;\r\n alignment?: string;\r\n fontSize?: string;\r\n onSaleChange?: (value: string) => void;\r\n}\r\n\r\nconst useStyles = (props: ProductPriceProps) =>\r\n makeStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n margin: \"10px\",\r\n },\r\n containerPrice: {\r\n flex: 0,\r\n [theme.breakpoints.up(\"md\")]: {\r\n flex: \"unset\",\r\n },\r\n },\r\n productPrice: {\r\n color: theme.palette.primary.main,\r\n padding: \"2px\",\r\n fontSize: props?.fontSize ? props.fontSize : \"initial\",\r\n },\r\n retailPrice: {\r\n textDecoration: \"line-through\",\r\n padding: \"2px\",\r\n color: \"grey\",\r\n fontSize: props?.fontSize ? props.fontSize : \"initial\",\r\n fontWeight: theme.typography.fontWeightRegular,\r\n },\r\n })\r\n );\r\nconst ProductPrice: FunctionComponent\r\n \r\n See All\r\n \r\n
\r\n ) : (\r\n \r\n \r\n See All\r\n \r\n
\r\n ))}\r\n ad
\r\n } */}\r\n {isDesktop\r\n ? limitedSuggestions && variant === \"Categories\"\r\n ? limitedSuggestions.map(\r\n (result: any, index: number) =>\r\n result &&\r\n result.products && (\r\n\r\n \r\n \r\n\r\n \r\n
\r\n\r\n - \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n \r\n \r\n \r\n )}\r\n
\r\n ) : (\r\n \r\n \r\n {loading && \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n - \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n \r\n
\r\n \");\r\n } else if (option === \"full-alt\") {\r\n if (address.CompanyName && !nophone) result.push(address.CompanyName);\r\n //street 1 (required)\r\n result.push(address.Street1);\r\n //street 1 (optional)\r\n if (address.Street2) result.push(address.Street2);\r\n var state;\r\n if (address.State.length > 2) state = states.find((s) => s.label === address.state)?.value;\r\n //city, state zip\r\n result.push(address.City + \", \" + (state || address.State) + \" \" + address.Zip);\r\n if (address.Phone && !nophone) result.push(address.Phone);\r\n return result.join(\"
\");\r\n } else if (option === \"fullOneLine\") {\r\n if (address.FullAddress) return address.FullAddress;\r\n return (\r\n address.Street1 +\r\n (address.Street2 ? \", \" + address.Street2 : \"\") +\r\n \" \" +\r\n address.City +\r\n \", \" +\r\n address.State +\r\n \" \" +\r\n address.Zip\r\n );\r\n } else {\r\n return address.Street1 + (address.Street2 ? \", \" + address.Street2 : \"\");\r\n }\r\n};\r\n\r\nconst cType = (components: any[], componentType: string): string => {\r\n const compMatch = components.find((c) => c.types.indexOf(componentType) > -1);\r\n if (!isUndefined(compMatch)) {\r\n return compMatch.short_name;\r\n } else return \"\";\r\n};\r\n\r\nconst mapGoogleToOrderCloud = (gItem: any, isCompany: boolean): Address => {\r\n var components = gItem.address_components;\r\n var streetNumber = cType(components, \"street_number\");\r\n var route = cType(components, \"route\");\r\n return {\r\n Phone: gItem.formatted_phone_number || null,\r\n CompanyName: isCompany ? gItem.name : null,\r\n Street1: streetNumber && route ? streetNumber + \" \" + route : \"\",\r\n City: cType(components, \"locality\"),\r\n State: cType(components, \"administrative_area_level_1\"),\r\n Country: cType(components, \"country\"),\r\n Zip: cType(components, \"postal_code\"),\r\n };\r\n};\r\n\r\nconst service = {\r\n DirectionsUrlPrefix: directionsUrlPrefix,\r\n GetDistance: getDistance,\r\n GetCurrentPosition: getCurrentPosition,\r\n BuildAddressLines: buildAddressLines,\r\n MapGoogleToOrderCloud: mapGoogleToOrderCloud,\r\n};\r\n\r\nexport default service;\r\n","import React from \"react\";\r\nimport { Button, ButtonProps, CircularProgress, createStyles, makeStyles, Theme } from \"@material-ui/core\";\r\n\r\nconst useStyle = (styleProps: any) =>\r\n makeStyles((theme: Theme) =>\r\n createStyles({\r\n DoubleOutlinedBtn: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n borderWidth: 2,\r\n outline: `1px solid ${theme.palette.grey[300]}`,\r\n outlineOffset: 2,\r\n ...styleProps,\r\n \"&:hover, &:focus, &:active\": {\r\n borderWidth: 2,\r\n outline: `1px solid ${theme.palette.grey[400]}`,\r\n outlineOffset: 2,\r\n },\r\n },\r\n buttonProgress: {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n marginTop: -12,\r\n marginLeft: -12,\r\n },\r\n })\r\n );\r\n\r\ninterface DoubleOutlinedBtnProps {\r\n buttonText?: string;\r\n buttonProps?: ButtonProps;\r\n styleProps?: any;\r\n loading?: boolean;\r\n loadingText?: string;\r\n className?: string | null;\r\n dataUrl?: string;\r\n}\r\n\r\nexport const DoubleOutlinedBtn: React.FunctionComponent
\r\n \r\n Updating Address...\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n submitAddress(addressEditable)}\r\n className={classes.addressButton}\r\n >\r\n \r\n \r\n submitAddress(avalaraSuggested)}\r\n className={`${classes.addressButton} ${classes.addressButtonSuggested}`}\r\n >\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n setSaveAddress(!saveAddress)}\r\n color=\"primary\"\r\n />\r\n }\r\n label=\"Save Address\"\r\n >\r\n )}\r\n {onlyLocal() && localAddressData?.isLocal === false && (\r\n \r\n \r\n These products cannot be delivered to this location. Please change to Store Pickup, or shop from\r\n our Out Of Town category.\r\n \r\n \r\n )}\r\n {localProducts && localProducts.length > 0 && localAddressData?.isLocal === false && (\r\n \r\n {localProducts.map((p) => (\r\n \r\n \r\n {`${p.xp?.WebFacingProductTitle || p.Name} cannot be delivered to this location`}\r\n \r\n \r\n ))}\r\n \r\n )}\r\n {avalaraNotFound && (\r\n \r\n \r\n We are unable to validate this address.\r\n
\r\n Please confirm and re-enter your recipient address, or call our Order Center at (612) 861-7311\r\n to place your order.\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddressDialog;\r\n","import React, { Fragment, useState } from \"react\";\r\nimport {\r\n Dialog,\r\n makeStyles,\r\n createStyles,\r\n Theme,\r\n Box,\r\n Button,\r\n CircularProgress,\r\n DialogActions,\r\n DialogTitle,\r\n Divider,\r\n Typography,\r\n DialogContent,\r\n} from \"@material-ui/core\";\r\nimport { neutral } from \"../../themes/colors\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n dialogContainer: {\r\n \"& .MuiPaper-root\": {\r\n borderRadius: 0,\r\n display: \"flex\",\r\n flexFlow: \"column nowrap\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n gap: theme.spacing(1),\r\n minHeight: 175,\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: \"40vw\",\r\n padding: theme.spacing(3),\r\n },\r\n },\r\n \"& .MuiDialogTitle-root\": {\r\n textAlign: \"center\",\r\n },\r\n },\r\n dialogActions: {\r\n gap: theme.spacing(1),\r\n },\r\n text: {\r\n color: neutral.text_white_bg,\r\n },\r\n divider: {\r\n width: \"90%\",\r\n alignSelf: \"center\",\r\n },\r\n })\r\n);\r\n\r\nexport interface ConfirmDialgProps {\r\n open: boolean;\r\n title?: string;\r\n text?: string;\r\n loadingText?: string;\r\n onClose?: () => void;\r\n onAccept?: () => Promise\r\n {avalaraSuggested && (\r\n \r\n \r\n Please Verify Your Address\r\n \r\n \r\n We may have found a more precise version of the address you entered.{\" \"}\r\n \r\n
\r\n \r\n Please select the correct address below to ensure timely and accurate delivery.\r\n \r\n \r\n )}\r\n {!avalaraSuggested && (\r\n \r\n {variant !== \"InStorePickUp\" ? \"Recipient Information\" : \"Order Pickup Information\"}\r\n \r\n )}\r\n {variant === \"InStorePickUp\" && (\r\n Confirm pickup location and enter your pickup person \r\n )}\r\n {dialogTitle} \r\n {anonymous && !avalaraSuggested && variant !== \"InStorePickUp\" && (\r\n <>\r\n \r\n Already have an account?\r\n \r\n \r\n {hospitalDisclaimerLabel}\r\n \r\n )}\r\n {!anonymous && variant !== \"InStorePickUp\" && hospitalDisclaimerLabel}\r\n
\r\n\r\n {avalaraSuggested ? (\r\n \r\n
\r\n Entered Address \r\n {addressEditable?.Street1} \r\n {addressEditable?.Street2 && {addressEditable.Street2} }\r\n {`${addressEditable?.City}, ${addressEditable?.State} ${addressEditable?.Zip}`} \r\n
\r\n \r\n \r\n Suggested Address \r\n {avalaraSuggested?.Street1} \r\n {`${avalaraSuggested?.City}, ${avalaraSuggested?.State} ${avalaraSuggested?.Zip}`} \r\n
\r\n \r\n \r\n Please confirm and re-enter your recipient address, or call our Order Center at (612) 861-7311\r\n to place your order.\r\n
\r\n \r\n \r\n \r\n {getAddressNickName(address)}\r\n \r\n \r\n {address?.xp?.addressType || \"Residence\"}\r\n \r\n \r\n \r\n \r\n \r\n Edit\r\n \r\n \r\n |\r\n \r\n \r\n Delete\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {card.CardholderName || \"\"} \r\n \r\n \r\n openEditDialog(card)}>\r\n Edit\r\n \r\n \r\n |\r\n \r\n openDeleteDialog(card)}>\r\n Delete\r\n \r\n \r\n \r\n \r\n \r\n \r\n {card?.CardType ? card?.CardType : \"card\"}\r\n \r\n \r\n {\" \"}\r\n ending in {card.PartialAccountNumber}\r\n \r\n {/* {`${card?.CardType} ending in ${card.PartialAccountNumber}`} */}\r\n {`Expires ${moment(card.ExpirationDate)\r\n .utc()\r\n .format(\"M/yy\")}`} \r\n \r\n
\r\n {/* Edit Dialog */}\r\n \r\n {props.label}\r\n
\r\n );\r\n};\r\n\r\nexport default ProductFlag;\r\n","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\r\nimport { green } from '../../../themes/colors';\r\nimport React, { FunctionComponent } from \"react\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n root: {\r\n width: \"100%\",\r\n position: 'absolute',\r\n top: '10px'\r\n },\r\n onSaleFlag: {\r\n backgroundColor: green.promo,\r\n textAlign: 'center',\r\n display: 'inline-block',\r\n padding: '4px',\r\n margin: '0 auto',\r\n float: 'right',\r\n fontWeight: 700\r\n }\r\n })\r\n);\r\n\r\nexport interface OnSaleProps {\r\n saleText: string\r\n}\r\n\r\nconst OnSaleFlag: FunctionComponent\r\n {`${props.saleText}% Off`} \r\n
\r\n ) \r\n}\r\n\r\nexport default OnSaleFlag;","export default __webpack_public_path__ + \"static/media/WorkshopsEventsFiller.ceb6ce1b.jpg\";","import React from \"react\";\r\nimport { Box, CardMedia, createStyles, makeStyles, SvgIcon, Theme } from \"@material-ui/core\";\r\nimport { neutral } from \"../../themes/colors\";\r\n\r\nconst paddingRatioMap = {\r\n \"1.42\": \"71.24681933842238%\",\r\n \"1.5\": \"66.66666666666667%\",\r\n \"1\": \"100%\",\r\n};\r\n\r\nconst useStyle = (ratio: AspectRatioOptions) =>\r\n makeStyles((theme: Theme) =>\r\n createStyles({\r\n imageContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n width: \"100%\",\r\n \"& img\": {\r\n backgroundColor: neutral.grey_background,\r\n aspectRatio: `${ratio} / 1`,\r\n color: \"transparent\", // essentially setting the alt text to screen-reader only.\r\n },\r\n \"& @supports not (aspect-ratio: 1 / 1)\": {\r\n paddingTop: paddingRatioMap[ratio],\r\n height: 0,\r\n width: \"100%\",\r\n position: \"relative\",\r\n overflow: \"hidden\",\r\n \"& img\": {\r\n objectFit: \"cover\",\r\n position: \"absolute\",\r\n transform: \"translate(-50%, -50%)\",\r\n left: \"50%\",\r\n top: \"50%\",\r\n width: \"auto\",\r\n maxWidth: \"100%\",\r\n height: \"auto\",\r\n },\r\n },\r\n },\r\n noImage: {\r\n backgroundColor: neutral.grey_background,\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n display: \"flex !important\",\r\n aspectRatio: \"1.42 / 1\",\r\n \"& @supports not (aspect-ratio: 1 / 1)\": {\r\n height: \"65%\",\r\n },\r\n },\r\n logo: {\r\n height: \"auto\",\r\n width: \"75%\",\r\n \"& path\": {\r\n fill: neutral.disabled,\r\n },\r\n },\r\n })\r\n );\r\n\r\nexport type AspectRatioOptions = \"1.42\" | \"1.5\" | \"1\";\r\n\r\ninterface BachmansCardMediaProps {\r\n aspectRatio: AspectRatioOptions;\r\n image?: string;\r\n alt?: string;\r\n}\r\n\r\nconst BachmandCardMedia: React.FunctionComponent