(\n FormattedTooltipComponent\n);\n","import * as React from 'react';\n\ninterface TWrapperEnabled {\n wrapperEnabled?: boolean;\n children?: React.ReactNode;\n}\n\ntype ConditionalWrapper = React.FC;\n\nexport function withConditionalWrapper>(\n Wrapper: React.FC\n): ConditionalWrapper {\n return ({ wrapperEnabled, children, ...wrapperProps }: TWrapperEnabled) =>\n wrapperEnabled ? (\n {children}\n ) : (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>{children}>\n );\n}\n","import styled, { css } from 'styled-components';\n\nimport { Tag, breakpoints, theme } from '@notino/react-styleguide';\n\nexport const StyledTag = styled(Tag)<{ newDesign: boolean }>`\n @media (max-width: ${breakpoints.sm}) {\n font-size: 0.75rem !important;\n }\n ${({ newDesign }) =>\n newDesign &&\n css`\n text-transform: none;\n ${theme.typography.labelSmall}\n `}\n`;\n\n// This wraps around all visualized tags so they stay together\nexport const StyledTagWrapper = styled.div<{ nowrapLg: boolean }>`\n @media (min-width: ${breakpoints.lg}) {\n ${(props) => (props.nowrapLg ? 'white-space: nowrap;' : '')}\n }\n`;\n","import * as React from 'react';\n\nimport { TagModel } from '@notino/react-styleguide';\nimport { IStock } from '@notino/shared/definitions/custom-definitions';\n\nimport { useTagAttributes } from '@components/Universals/ProductItem/useTagAttributes';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\n\nimport { FormattedTooltip } from './FormattedTooltip';\nimport { ITagsProps } from './model';\nimport { StyledTag, StyledTagWrapper } from './styled';\n\nexport const Tags: React.FC = ({\n type = TagModel.Types.default,\n onClick,\n nowrapLg = false,\n ...props\n}) => {\n const newDesign = useNewPdDesignEnabled();\n const tagAttributes = useTagAttributes(props.attributes, {\n multiple: props?.multiple,\n });\n if (props.stockAvailability === IStock.outOfStock || !tagAttributes) {\n return null;\n }\n\n const size = props.small ? TagModel.Sizes.small : TagModel.Sizes.default;\n\n return (\n \n {tagAttributes.map(\n ({ style, icon, tooltipMessage, label, attribute }) => (\n \n onClick?.(attribute)}\n key={label}\n tagStyle={style}\n icon={icon}\n tagType={type}\n tagSize={size}\n className={`pd-variant-tag-${label}`}\n >\n {label}\n \n \n )\n )}\n \n );\n};\n","import styled, { css } from 'styled-components';\n\nimport { breakpoints, InfoCircleIcon, theme } from '@notino/react-styleguide';\nexport const TagDiscountFlexRow = styled.div<{ newDesign: boolean }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n gap: 0.4rem;\n\n @media (min-width: ${breakpoints.md}) {\n margin-top: auto;\n }\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n min-height: 2.5rem;\n `\n : css`\n height: 2.5rem;\n margin-bottom: 1rem;\n `}\n`;\n\nexport const DiscountWrapper = styled.div`\n text-align: right;\n line-height: 1.25rem;\n`;\n\nexport const OriginalPriceWrapper = styled.span<{ newDesign: boolean }>`\n display: flex;\n justify-content: flex-end;\n flex-wrap: wrap;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n color: ${theme.palette.neutralDark};\n ${theme.typography.labelRegular400}\n `\n : css`\n color: ${theme.palette.neutralDarker};\n padding-left: 0.625rem;\n font-weight: 300;\n font-size: 0.875rem;\n\n @media (min-width: ${breakpoints.sm}) {\n font-size: 0.8rem;\n }\n `}\n`;\n\nexport const FlexEnd = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n`;\n\nexport const LineThrough = styled.span<{ active: boolean }>`\n ${({ active }) => active && 'text-decoration: line-through'};\n white-space: nowrap;\n`;\n\nexport const Discount = styled.span<{ newDesign: boolean }>`\n color: ${theme.palette.primary};\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n ${theme.typography.labelLarge}\n `\n : css`\n font-size: 0.875rem;\n font-weight: bold;\n text-transform: uppercase;\n\n @media (min-width: ${breakpoints.sm}) {\n font-size: 1.2rem;\n }\n `}\n`;\n\nexport const PriceWrapper = styled.span`\n font-size: 0.8rem;\n`;\n\nexport const CurrencyWrapper = styled(PriceWrapper)`\n ::before {\n content: ' ';\n }\n`;\n\nexport const StyledInfoIcon = styled(InfoCircleIcon)`\n margin-bottom: 4px;\n`;\n\nexport const Slash = styled.span`\n padding: 0 0.25rem;\n`;\n","import * as React from 'react';\n\nimport * as Cookie from 'js-cookie';\n\nimport {\n breakpoints,\n Tooltip,\n TooltipModel,\n Colors,\n} from '@notino/react-styleguide';\nimport { VariantFragmentFragment } from '@notino/shared/definitions/types';\n\nimport PriceLabel from '@components/PriceLabel';\nimport { useIsDualPriceForCroatia } from '@containers/ProductDetailContainer/ProductDetail/hooks/useIsDualPriceForCroatia';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { usePriceLogic } from '@containers/ProductDetailContainer/ProductDetail/hooks/usePriceLogic';\n\nimport {\n DiscountWrapper,\n OriginalPriceWrapper,\n StyledInfoIcon,\n LineThrough,\n Discount,\n PriceWrapper,\n CurrencyWrapper,\n Slash,\n FlexEnd,\n} from './styled';\n\nconst NO_RESP = 'noresp';\n\ninterface IProps {\n variant: VariantFragmentFragment;\n}\n\nexport const OriginalPrice = ({ variant }: IProps) => {\n // need topLeft position for desktop version on mobile\n const [tooltipProps, setTooltipProps] = React.useState({});\n const {\n isDualPriceForCroatia,\n leftSideCurrency,\n rightSideCurrency,\n getLeftSideFormattedPrice,\n getRightSidePrice,\n } = useIsDualPriceForCroatia();\n const { discountText, topPrice } = usePriceLogic(variant);\n const newDesign = useNewPdDesignEnabled();\n\n React.useEffect(() => {\n if (Number(Cookie.get(NO_RESP))) {\n setTooltipProps({\n position: TooltipModel.Position.topLeft,\n alignDesktop: true,\n });\n }\n }, []);\n\n if (!topPrice && !discountText) {\n return null;\n }\n\n return (\n \n {topPrice && (\n \n {isDualPriceForCroatia && (\n <>\n \n \n {getLeftSideFormattedPrice(topPrice.value.value)}{' '}\n {leftSideCurrency}\n \n \n /\n >\n )}\n\n \n \n \n \n\n \n \n \n \n \n )}\n\n {discountText}\n \n );\n};\n","import { snakeCase } from 'lodash';\n\nimport { ProductTileModel } from '@notino/react-styleguide';\n\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\n\nconst NON_TRACKABLE_TAGS = [\n ProductTileModel.TagAttributes.Damaged,\n ProductTileModel.TagAttributes.Returned,\n];\n\nexport const trackTagClick = (\n attr: ProductTileModel.TagAttributes,\n timing: number\n) => {\n if (NON_TRACKABLE_TAGS.includes(attr)) {\n return;\n }\n\n dispatchTrackingEvent({\n event: 'element_click',\n _clear: true,\n element: {\n action: 'click_on_element',\n name: attr,\n type: 'tag_discount_label',\n promo_labels: snakeCase(attr),\n interaction: 'click',\n timing,\n },\n });\n};\n","import * as React from 'react';\n\nimport { IStock } from '@notino/shared/definitions/custom-definitions';\nimport { VariantFragmentFragment } from '@notino/shared/definitions/types';\n\nimport { Tags } from '@components/Tags';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\n\nimport { OriginalPrice } from './OriginalPrice';\nimport { TagDiscountFlexRow } from './styled';\nimport { trackTagClick } from './tracking';\n\ninterface ITagDiscountProps {\n variant: VariantFragmentFragment;\n}\n\nexport const TagDiscount = ({ variant }: ITagDiscountProps) => {\n const { getTimeFromInit } = useTrackingContext();\n const newDesign = useNewPdDesignEnabled();\n\n return (\n \n trackTagClick(attr, getTimeFromInit())}\n multiple={true}\n attributes={variant.attributes}\n stockAvailability={variant.stockAvailability.code}\n nowrapLg={true}\n />\n\n {variant.stockAvailability.code !== IStock.outOfStock && (\n \n )}\n \n );\n};\n","import * as React from 'react';\n\nimport { IStock } from '@notino/shared/definitions/custom-definitions';\nimport {\n VariantDisplayType,\n VariantFragmentFragment,\n} from '@notino/shared/definitions/types';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport PriceLabel from '@components/PriceLabel';\n\nimport { useIsDualPriceForCroatia } from '../../hooks/useIsDualPriceForCroatia';\nimport { useNewPdDesignEnabled } from '../../hooks/useNewPdDesignEnabled';\nimport { TagDiscount } from '../VariantsInSelectBox/TagDiscount';\n\nimport {\n Container,\n FlexWrapper,\n Name,\n Line,\n LineWrapper,\n PriceWrapper,\n CurrencyWrapper,\n DualPriceSplitter,\n DualPrice,\n DualPriceWrapper,\n} from './styled';\n\nexport interface ISelectedVariantProps {\n variant: VariantFragmentFragment;\n displayType: VariantDisplayType;\n singleVariant?: boolean;\n renderTagDiscount: boolean;\n variantName: React.ReactNode;\n\n hideLine?: boolean;\n hideVariantName?: boolean;\n}\n\nexport const SelectedVariant: React.FC = React.memo(\n ({\n variant,\n renderTagDiscount,\n variantName,\n hideLine = false,\n hideVariantName = false,\n }) => {\n const newDesign = useNewPdDesignEnabled();\n const {\n isDualPriceForCroatia,\n getLeftSideFormattedPrice,\n getRightSideFormattedPrice,\n leftSideCurrency,\n rightSideCurrency,\n } = useIsDualPriceForCroatia();\n const inStock = variant.stockAvailability.code !== IStock.outOfStock;\n\n return (\n \n \n {renderTagDiscount && }\n \n \n {hideVariantName ? null : variantName}\n \n\n {inStock && !isDualPriceForCroatia && (\n \n )}\n\n {inStock && isDualPriceForCroatia && (\n \n \n {getLeftSideFormattedPrice(variant.price.value)}{' '}\n {leftSideCurrency}\n \n\n /\n\n \n {getRightSideFormattedPrice(variant.price.value)}{' '}\n {rightSideCurrency}\n \n \n )}\n \n \n {hideLine ? null : (\n \n )}\n \n \n \n );\n }\n);\n\nSelectedVariant.displayName = 'SelectedVariant';\n","import { snakeCase } from 'lodash';\n\nimport { VariantDisplayTypes } from '@containers/ProductListing/model';\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\n\nexport const trackTryItFirstAddToCart = (productCode: string) => {\n dispatchTrackingEvent({\n event: 'general_event',\n general_parameters: {\n id: undefined,\n type: 'try_it_first',\n action: 'try_it_first_product_added',\n description_data: productCode,\n value_units: 'product_code',\n interaction: 'add',\n },\n _clear: true,\n });\n};\n\nexport const trackVariantClick = (\n timing: number,\n type: VariantDisplayTypes,\n promoLabel?: string\n) => {\n dispatchTrackingEvent({\n event: 'element_click',\n element: {\n timing,\n action: 'click_on_variant_tile',\n type,\n name: '',\n interaction: 'click',\n promo_labels: snakeCase(promoLabel),\n },\n _clear: true,\n });\n};\n","import styled, { css } from 'styled-components';\n\nimport { IBasicStyledProps, theme } from '@notino/react-styleguide';\ninterface IDisabledText extends IBasicStyledProps {\n disabled: boolean;\n}\n\nexport const Container = styled.div<{ newPdDesignEnabled: boolean }>`\n padding: 1rem 0;\n display: block;\n\n label {\n ${({ newPdDesignEnabled }) =>\n newPdDesignEnabled\n ? theme.typography.labelRegular\n : css`\n font-weight: 700;\n `}\n }\n\n svg {\n vertical-align: middle;\n padding-left: 0.4rem;\n }\n`;\n\nexport const TooltipWrapper = styled.div`\n text-align: left !important;\n font-size: 0.9rem;\n padding: 0.2rem;\n`;\n\nexport const Description = styled.div<{ newDesign: boolean }>`\n padding-left: 2.25rem;\n a {\n text-decoration: underline;\n }\n a:hover {\n cursor: pointer;\n }\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n margin-top: 0.25rem;\n color: ${theme.palette.neutralDarker};\n ${theme.typography.bodyRegular}\n `\n : css`\n line-height: 1.313rem;\n font-size: 0.875rem;\n\n a {\n color: ${(props) => props.theme.palette.basic};\n }\n `}\n`;\n\nexport const DisabledTextWrapper = styled.div`\n color: ${(props: IDisabledText) =>\n props.disabled ? props.theme.palette.neutral : props.theme.palette.basic};\n`;\n","import * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Checkbox } from '@notino/react-styleguide';\nimport { AdditionalServicesAvailability } from '@notino/web-tracking';\n\nimport { useNewPdDesignEnabled } from '../../hooks/useNewPdDesignEnabled';\nimport { useEngravingTryItFirstContext } from '../context/EngravingTryItFirst';\n\nimport { Container, Description, DisabledTextWrapper } from './styled';\nimport { messages } from './tryItFirstMessages';\n\ninterface ITryItFirstProps {\n availability?: AdditionalServicesAvailability;\n}\n\nexport const TryItFirst = ({ availability }: ITryItFirstProps) => {\n const {\n state: { withTryItFirst, withEngraving },\n actions: { toggleTryItFirst },\n } = useEngravingTryItFirstContext();\n const newDesign = useNewPdDesignEnabled();\n\n const isTryItFirstDisabled =\n availability !== AdditionalServicesAvailability.available || withEngraving;\n\n const toggle = () => {\n toggleTryItFirst(!withTryItFirst);\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nTryItFirst.displayName = 'TryItFirst';\n","import { IStock } from '@notino/shared/definitions/custom-definitions';\nimport { VariantFragmentFragment } from '@notino/shared/definitions/types';\n\nimport { getRenderableAttributes } from '@components/Tags/utils';\n\nconst hasTagOrDiscount = (variant: VariantFragmentFragment): boolean => {\n const attributes = getRenderableAttributes(variant.attributes);\n const hasAttributes = Object.keys(attributes).length > 0;\n const hasDiscount =\n variant.stockAvailability.code !== IStock.outOfStock &&\n Boolean(variant.originalPrice) &&\n variant.originalPrice.value > 0;\n return hasAttributes || hasDiscount;\n};\n\nexport const shouldRenderTagDiscount = (\n variants: VariantFragmentFragment[]\n): boolean => variants.some(hasTagOrDiscount);\n","import { Link } from 'react-router-dom';\n\nimport styled, { css } from 'styled-components';\n\nimport { breakpoints, theme } from '@notino/react-styleguide';\n\nimport { ICurrencyProps } from '@components/PriceLabel/components/Currency';\n\nimport { IVariantNameProps } from '../../model';\n\nexport const VariantListItem = styled.li<{ minWidth?: string }>`\n list-style-type: none;\n display: inline-block;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n min-width: ${(props) => props.minWidth || '28vw'};\n\n &:before {\n display: none;\n }\n\n @media (min-width: ${breakpoints.sm}) {\n min-width: auto;\n }\n`;\n\nexport const VariantLink = styled(Link)`\n text-decoration: none;\n`;\n\nexport const VariantCommon = styled.div`\n position: relative;\n margin: 0 0.25rem 0.25rem 0;\n font-weight: normal;\n line-height: 1.375rem;\n cursor: pointer;\n`;\n\nexport const Name = styled.div<{ newDesign: boolean } & IVariantNameProps>`\n ${({ newDesign, isOnStock }) =>\n newDesign\n ? css`\n ${theme.typography.labelRegular}\n color: ${isOnStock ? theme.palette.basic : theme.palette.neutralDark}\n `\n : css`\n color: ${isOnStock ? theme.palette.basic : theme.palette.neutral};\n font-size: 0.8rem;\n `}\n`;\n\nexport const PriceLabelCurrency = styled.span`\n padding-left: ${(props: ICurrencyProps) =>\n props.isSpaced && !props.isPrefix ? '0.3rem' : 0};\n padding-right: ${(props: ICurrencyProps) =>\n props.isSpaced && props.isPrefix ? '0.3rem' : 0};\n`;\n\nexport const Container = styled.div<{ newDesign: boolean }>`\n width: 100%;\n overflow-y: hidden;\n\n @media (min-width: ${breakpoints.md}) {\n height: initial;\n }\n\n ${({ newDesign }) =>\n !newDesign &&\n css`\n margin-bottom: 1.25rem;\n `}\n`;\n\nexport const VariantList = styled.ul<{\n newDesign: boolean;\n itemsCount: number;\n}>`\n overflow-x: scroll;\n -webkit-overflow-scrolling: touch;\n ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(0, 0, 0, 0.5);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n\n ${({ newDesign, itemsCount }) =>\n newDesign\n ? css`\n display: flex;\n gap: 0.5rem;\n margin: 0rem;\n\n @media (min-width: ${breakpoints.lg}) {\n display: grid;\n grid-gap: 0.5rem;\n grid-template-columns: repeat(${itemsCount >= 3 ? 3 : 2}, 1fr);\n overflow-x: auto;\n margin: 0;\n }\n `\n : css`\n display: flex;\n flex-wrap: nowrap;\n margin: 0;\n\n @media (min-width: ${breakpoints.md}) {\n flex-wrap: wrap;\n height: auto;\n overflow-x: auto;\n padding: 0;\n }\n `}\n`;\n","var t;!function(t){t.TO_RIGHT=\"to right\",t.TO_BOTTOM_RIGHT=\"to bottom right\"}(t||(t={}));export{t as Directions};\n//# sourceMappingURL=ColorRectangleModel.js.map\n","import{b as e}from\"./_rollupPluginBabelHelpers-fc5c8eb1.js\";import{breakpoints as n}from\"./breakpoints.js\";import{styled as t}from\"./styled.js\";import{theme as r}from\"./theme.js\";import{Directions as i}from\"./ColorRectangleModel.js\";import\"styled-components\";var o,m=/^(#?ffffff.*|#?fff.*|transparent)$/i,a=\"1px solid \"+String(r.palette&&r.palette.neutral),l=function(e){return e.some((function(e){return m.test(e)}))?a:\"none\"},f=function(e){if(0===e.length)return r.palette.neutral;var n=100/e.length;return(50===n?i.TO_BOTTOM_RIGHT:i.TO_RIGHT)+\", \"+e.map((function(e,t){return e.toLowerCase()+\" \"+n*t+\"%, \"+e.toLowerCase()+\" \"+n*(t+1)+\"%\"})).join(\",\")},s=t.div.attrs((function(e){var n=e.colors;return{style:{backgroundColor:\"\"+(0===n.length?r.palette.neutral:n[0]),backgroundImage:\"linear-gradient(\"+f(n)+\")\",border:l(n)}}}))(o||(o=e([\"\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n margin: 0.125rem;\\n width: \",\"rem;\\n height: \",\"rem;\\n min-width: 2.5rem;\\n min-height: 2.5rem;\\n\\n @media (min-width: \",\") {\\n min-width: 2rem;\\n min-height: 2rem;\\n }\\n\"])),(function(e){return e.width}),(function(e){return e.height}),n.md);export{s as ColorRectangle};\n//# sourceMappingURL=ColorRectangle.js.map\n","import styled, { css } from 'styled-components';\n\nimport {\n breakpoints,\n ColorRectangle,\n IBasicStyledProps,\n theme,\n} from '@notino/react-styleguide';\n\nimport { TooltipContent } from '@components/Tooltip/Content';\n\nexport const Container = styled.div<{ newDesign: boolean }>`\n width: 100%;\n\n ${({ newDesign }) =>\n !newDesign &&\n css`\n margin-bottom: 0.625rem;\n `}\n`;\n\nexport const VariantsList = styled.ul`\n display: flex;\n flex-wrap: wrap;\n`;\n\ninterface IVariantProps extends IBasicStyledProps {\n isSelected: boolean;\n isOnStock: boolean;\n touch: boolean;\n newDesign: boolean;\n}\n\nexport const Variant = styled.div`\n position: relative;\n border: 1px solid\n ${({ isSelected }) =>\n isSelected ? theme.palette.neutralDarker : theme.palette.basicInverse};\n\n cursor: pointer;\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n margin: 0;\n `\n : css`\n margin: 0 0.3125rem 0.3125rem 0;\n `}\n\n display: ${(props: IVariantProps) => (props.touch ? 'flex' : 'none')};\n @media (hover: hover) {\n display: ${(props: IVariantProps) => (props.touch ? 'none' : 'flex')};\n }\n`;\n\nexport const StyledColorRectangle = styled(ColorRectangle)<{\n newDesign: boolean;\n bordered?: boolean;\n}>`\n ${({ bordered }) =>\n bordered &&\n css`\n border: 1px solid ${theme.palette.neutralDarker} !important;\n `}\n\n ${({ newDesign }) =>\n newDesign\n ? css`\n width: 2.5rem;\n height: 2.5rem;\n margin: 0.25em;\n @media (min-width: ${breakpoints.lg}) {\n width: 2rem;\n height: 2rem;\n }\n `\n : css``}\n`;\n\nexport const ColorPickerContent = styled(TooltipContent)`\n width: max-content;\n min-width: 0;\n`;\n","import * as React from 'react';\n\nimport {\n CloseIcon,\n Colors,\n Tooltip,\n TooltipModel,\n} from '@notino/react-styleguide';\nimport { IStock } from '@notino/shared/definitions/custom-definitions';\nimport { VariantFragmentFragment } from '@notino/shared/definitions/types';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\nimport { VariantDisplayTypes } from '@containers/ProductListing/model';\nimport { useTrackingContext } from '@context/tracking/TrackingContext';\nimport { hexToDec, dataLabelsProp } from '@helpers/utils';\n\nimport { trackVariantClick } from '../../tracking';\nimport { VariantLink, VariantListItem } from '../../variantsStyled';\n\nimport { StyledColorRectangle, Variant, ColorPickerContent } from './styled';\n\nexport interface IVariantItemProps {\n item: VariantFragmentFragment;\n isSelected: boolean;\n}\n\nexport const getContrastingIconColor = (colors: string[]) => {\n if (colors.length === 0) {\n return Colors.basic;\n }\n\n const avgColor =\n colors\n .map(\n (c) =>\n 0.2126 * hexToDec(c, 0) +\n 0.7152 * hexToDec(c, 2) +\n 0.0722 * hexToDec(c, 4)\n )\n .reduce((a, b) => a + b) / colors.length;\n\n return avgColor > 0.179 ? Colors.basicInverse : Colors.basic;\n};\n\nexport const ColorPicker: React.FC = ({\n item,\n isSelected,\n}) => {\n const newDesign = useNewPdDesignEnabled();\n const { getTimeFromInit } = useTrackingContext();\n const isOnStock = item.stockAvailability.code !== IStock.outOfStock;\n\n const withoutColor = !item.colors || item.colors.length === 0;\n const colors = withoutColor ? [Colors.basic] : item.colors;\n\n const handleClick = () =>\n trackVariantClick(getTimeFromInit(), VariantDisplayTypes.ColorPicker);\n\n const ColorTile = (\n \n {!isOnStock && (\n \n )}\n \n );\n\n return (\n \n \n \n \n {item.additionalInfo}\n }\n >\n {ColorTile}\n \n \n \n {ColorTile}\n \n \n \n \n );\n};\n","import * as React from 'react';\n\nimport { useNewPdDesignEnabled } from '@containers/ProductDetailContainer/ProductDetail/hooks/useNewPdDesignEnabled';\n\nimport { IVariantsProps } from '../../../../model';\n\nimport { ColorPicker } from './ColorPicker';\nimport { Container, VariantsList } from './styled';\n\nexport const VariantsColorPickers: React.FC = ({\n selectedId,\n variants,\n}) => {\n const newDesign = useNewPdDesignEnabled();\n\n return (\n \n \n {variants.map((item) => (\n \n ))}\n \n \n );\n};\n","export const VARIANT_CHEVRON_SIZE = '1.5rem';\nexport const COLOR_CIRCLE_SIZE = 2.25;\n","import { defineMessages } from 'react-intl';\n\nexport const messages = defineMessages({\n pickVariant: {\n id: 'pd.variant.drawer.pickVariant',\n defaultMessage: 'Zvolte si odstín',\n },\n});\n","import{b as o}from\"./_rollupPluginBabelHelpers-fc5c8eb1.js\";import{styled as r}from\"./styled.js\";import{ColorRectangle as e}from\"./ColorRectangle.js\";import\"styled-components\";import\"./breakpoints.js\";import\"./theme.js\";import\"./ColorRectangleModel.js\";var t,s=r(e)(t||(t=o([\"\\n border-radius: 50%;\\n\"])));export{s as ColorCircle};\n//# sourceMappingURL=ColorCircle.js.map\n","import {\n styled,\n ColorCircle,\n theme,\n breakpoints,\n} from '@notino/react-styleguide';\n\nimport { COLOR_CIRCLE_SIZE } from './constants';\n\nexport const Button = styled.button`\n width: 100%;\n padding: 1rem;\n\n cursor: pointer;\n\n background: ${theme.palette.basicInverse};\n border: 0.1rem solid ${theme.palette.neutralLight};\n`;\n\nexport const ShadesVariantsList = styled.ul`\n display: flex;\n flex-wrap: wrap;\n`;\n\nexport const VariantInfo = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const OffsetScrollDiv = styled.div`\n position: relative;\n top: -4rem;\n\n @media (min-width: ${breakpoints.md}) {\n top: -40vh;\n }\n`;\n\nexport const AdditionalInfo = styled.span`\n color: ${theme.palette.basic};\n margin-left: 1rem;\n font-size: 1rem;\n`;\n\nexport const TagOrWatchdogWrapper = styled.div`\n margin-left: auto;\n`;\n\nexport const WatchDogLink = styled.button`\n text-decoration: underline;\n white-space: nowrap;\n\n background: transparent;\n border: 0;\n font-size: 0.875rem;\n`;\n\nexport const ChevronWrapper = styled.div`\n margin-left: auto;\n`;\n\nexport const BorderedColorCircle = styled(ColorCircle)<{\n darkerBorder: boolean;\n}>`\n border: 0.1rem solid\n ${({ darkerBorder }) =>\n darkerBorder\n ? theme.palette.neutralDarker\n : theme.palette.basicInverse} !important;\n min-height: ${COLOR_CIRCLE_SIZE}rem;\n min-width: ${COLOR_CIRCLE_SIZE}rem;\n overflow: hidden;\n`;\n\nexport const ButtonColorCircle = styled(ColorCircle)`\n min-width: 2rem;\n min-height: 2rem;\n`;\n\nexport const Title = styled.h4`\n margin: 0;\n\n font-size: 1rem;\n font-weight: bold;\n`;\n\nexport const VariantListItem = styled.li`\n width: 100%;\n\n // override layout styles for li\n padding: 0;\n margin: 0;\n :before {\n content: none;\n }\n`;\n\nexport const Variant = styled.div<{ isSelected: boolean }>`\n display: flex;\n align-items: center;\n padding: 1rem 1.25rem;\n\n color: ${theme.palette.basic};\n\n background: ${(props) =>\n props.isSelected\n ? props.theme.palette.neutralLight\n : props.theme.palette.basicInverse};\n\n &:hover {\n background: ${(props) =>\n props.isSelected\n ? props.theme.palette.neutralLight\n : props.theme.palette.neutralLighter};\n }\n`;\n\nexport const VariantListItemInfo = styled.div<{ isOutOfStock: boolean }>`\n display: flex;\n align-items: center;\n margin-right: 1rem;\n\n ${({ isOutOfStock }) => (isOutOfStock ? 'opacity: 0.25;' : '')}\n`;\n\nexport const Tag = styled.small`\n color: ${theme.palette.neutralDark};\n`;\n","import {\n VariantFragmentFragment,\n GetProductViewQuery,\n} from '@notino/shared/definitions/types';\n\nimport { TrackingAttributes } from '@context/tracking/types';\nimport { dispatchTrackingEvent } from '@context/tracking/utils';\nimport { ProductEventWither } from '@helpers/googleTagManager';\nimport { resolveDrawerCloseType } from '@utils/drawer';\n\nconst trackDrawerEvent = (args: {\n timing: number;\n mode: string;\n interaction: string;\n}) => {\n dispatchTrackingEvent({\n event: 'element_click',\n element: {\n mode: 'open',\n name: 'Drawer',\n interaction: 'click',\n action: '',\n promo_labels: undefined,\n type: 'drawer',\n ...args,\n },\n _clear: true,\n });\n};\n\nexport const trackDrawerOpen = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: 'open',\n timing,\n interaction: 'click',\n });\n};\n\nexport const trackDrawerClose = ({\n timing,\n closeType,\n}: Omit, 'variant'>) => {\n const eventLabel = resolveDrawerCloseType(closeType);\n\n trackDrawerEvent({\n mode: 'close',\n interaction: eventLabel,\n timing,\n });\n};\n\nexport const trackResizeToTop = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: 'open',\n interaction: 'resize+',\n timing,\n });\n};\n\nexport const trackResizeToMiddle = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: 'open',\n interaction: 'resize-',\n timing,\n });\n};\n\nexport const trackDrawerVariantClick = ({\n timing,\n}: Pick) => {\n trackDrawerEvent({\n mode: undefined,\n interaction: 'select_variant',\n timing,\n });\n};\n\nexport const trackDrawerWatchdogClick = (\n product: GetProductViewQuery['productDetailByMasterId'][number],\n variant: VariantFragmentFragment\n) => {\n dispatchTrackingEvent({\n event: 'watchdog_click',\n watchdog: {\n action: 'wt_add_watchdog',\n interaction: 'button',\n type: 'Drawer',\n products: [\n ProductEventWither()\n .withProduct(product)\n .withPartialVariant({\n ...variant,\n price: {\n __typename: 'Price',\n ...variant.price,\n },\n stockAvailability: {\n code: variant.stockAvailability.code,\n __typename: 'StockInfo',\n count: undefined,\n },\n })\n .build(),\n ],\n },\n _clear: true,\n });\n};\n","import { ProductTileModel, theme } from '@notino/react-styleguide';\n\nconst availableTagsForShadesDrawer = [\n ProductTileModel.TagAttributes.Damaged,\n ProductTileModel.TagAttributes.Returned,\n];\n\nexport const isAvailableTagForShadesDrawer = (\n tag: ProductTileModel.TagAttributes\n) => {\n return availableTagsForShadesDrawer.includes(tag);\n};\n\n/**\n * Resolves color for item\n * @param item\n * @return color for color circle\n */\nexport const getItemColors = (item: {\n colors: Array;\n color: string;\n}): Array => {\n if (item?.colors?.length > 0) {\n return item.colors;\n }\n return [item?.color || theme.palette.basicInverse];\n};\n","import{_ as e}from\"./_rollupPluginBabelHelpers-fc5c8eb1.js\";import*as r from\"react\";import{Icon as t}from\"./index.js\";import\"./ThemeContext.js\";import\"styled-components\";var o=function(o){return r.createElement(t,e({},o,{viewBox:\"0 0 50 64\"}),r.createElement(\"path\",{d:\"M3 51L51 3\",stroke:\"currentColor\",strokeWidth:\"4\",strokeLinecap:\"square\"}))};export{o as CloseLineIcon};\n//# sourceMappingURL=CloseLineIcon.js.map\n","import * as React from 'react';\n\nimport { OffsetScrollDiv } from '../styled';\n\nexport const OffsetScroll: React.FC = () => {\n const ref = React.useRef();\n\n React.useEffect(() => {\n if (ref.current) {\n ref.current.scrollIntoView(true);\n }\n }, []);\n return ;\n};\n","import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useTagAttributes } from '@components/Universals/ProductItem/useTagAttributes';\nimport { Watchdog } from '@sharedComponents/Watchdog';\nimport { watchdogMessages } from '@sharedComponents/Watchdog/watchdogMessages';\n\nimport { WatchDogLink, Tag, TagOrWatchdogWrapper } from './styled';\nimport { trackDrawerWatchdogClick } from './tracking';\nimport { isAvailableTagForShadesDrawer } from './utils';\nimport { ColorCirclePickerProps } from './VariantColorListItem';\n\nexport const ItemStatus: React.FC<\n Pick\n> = ({ item, product }) => {\n const { formatMessage } = useIntl();\n const tagAttributes = useTagAttributes(item.attributes, {\n multiple: false,\n customFilter: isAvailableTagForShadesDrawer,\n });\n const tagLabel = tagAttributes?.[0]?.label;\n\n if (!item.showWatchdog && !tagLabel) {\n return null;\n }\n\n const handleWatchdogClick = (e) => {\n e.preventDefault();\n trackDrawerWatchdogClick(product, item);\n };\n\n return (\n \n {item.showWatchdog ? (\n \n \n {formatMessage(watchdogMessages.watchAvailability)}\n \n \n ) : (\n {tagLabel}\n )}\n \n );\n};\n","import * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DrawerContext, CloseLineIcon } from '@notino/react-styleguide';\nimport { IStock } from '@notino/shared/definitions/custom-definitions';\nimport { GetProductViewQuery } from '@notino/shared/definitions/types';\n\nimport ErrorBoundary from '@components/ErrorBoundary';\nimport messages from '@containers/ProductDetailContainer/messages';\nimport { useAppendDisplayTypeForAbTest } from '@containers/ProductDetailContainer/utils';\nimport { dataLabelsProp } from '@helpers/utils';\n\nimport { VariantLink } from '../../variantsStyled';\nimport {\n IVariantItemProps,\n getContrastingIconColor,\n} from '../VariantsColorPickers/ColorPicker';\n\nimport { OffsetScroll } from './components/OffsetScroll';\nimport { COLOR_CIRCLE_SIZE } from './constants';\nimport { ItemStatus } from './ItemStatus';\nimport {\n VariantListItem,\n Variant,\n BorderedColorCircle,\n AdditionalInfo,\n VariantListItemInfo,\n} from './styled';\nimport { trackDrawerVariantClick } from './tracking';\nimport { getItemColors } from './utils';\n\nexport interface ColorCirclePickerProps extends IVariantItemProps {\n getTimeFromInit: () => number;\n product: GetProductViewQuery['productDetailByMasterId'][number];\n}\n\nexport const ColorCirclePicker: React.FC = ({\n item,\n isSelected,\n getTimeFromInit,\n product,\n}) => {\n const { closeDrawer } = DrawerContext.useDrawerContext();\n const variantUrl = useAppendDisplayTypeForAbTest(item.url);\n\n const { formatMessage } = useIntl();\n\n const isOutOfStock = item.stockAvailability.code === IStock.outOfStock;\n const withoutColors = !item.colors || item.colors.length === 0;\n const colors = getItemColors(item);\n\n const handleClick = () => {\n trackDrawerVariantClick({ timing: getTimeFromInit() });\n closeDrawer();\n };\n\n return (\n \n {isSelected && }\n \n