@trafilea/afrodita-components 5.0.0-beta.292 → 5.0.0-beta.293

package/build/index.esm.js/src/components/cartProductItem/Promo/Promo.js

@@ -0,0 +1,15 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var P = newStyled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.125rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
+var Promo = function (_a) {
+    var text = _a.text;
+    var theme = useTheme();
+    return (jsx(P, __assign({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
+};
+var templateObject_1;
+
+export { Promo };
+//# sourceMappingURL=Promo.js.map

package/build/index.esm.js/src/components/cartProductItem/Promo/Promo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Promo.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/cartProductItem/Title/Title.js

@@ -0,0 +1,15 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var Text = newStyled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  color: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (props) { return props.color; });
+var Title = function (_a) {
+    var title = _a.title;
+    var theme = useTheme();
+    return jsx(Text, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
+};
+var templateObject_1;
+
+export { Title };
+//# sourceMappingURL=Title.js.map

package/build/index.esm.js/src/components/cartProductItem/Title/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/cartProductItem/index.js

@@ -0,0 +1,16 @@
+import { Title } from './Title/Title.js';
+import { Promo } from './Promo/Promo.js';
+import { Description } from './Description/Description.js';
+import { CloseButton } from './CloseIcon/CloseButton.js';
+import { OfferBanner } from '../offer-banner/OfferBanner.js';
+
+var CartProductItem = {
+    Title: Title,
+    Tag: OfferBanner,
+    Promo: Promo,
+    Description: Description,
+    CloseButton: CloseButton,
+};
+
+export { CartProductItem };
+//# sourceMappingURL=index.js.map

package/build/index.esm.js/src/components/cartProductItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/checkbox/Checkbox.js

@@ -0,0 +1,40 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Icon } from '../icons/index.js';
+import { ComponentSize } from '../../types/enums.js';
+import Label from '../shared/label/label.js';
+import { CustomCheckboxStyles } from './styles.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
+var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
+    CustomCheckboxStyles[props.size](props.theme),
+    CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
+    "\n  ".concat(props.backgroundColor ? "background-color: ".concat(props.backgroundColor, ";") : '', "\n  ").concat(props.text === 'White' ||
+        props.text === 'Nude' ||
+        props.text === 'Latte' ||
+        props.text === 'Sand'
+        ? "\n      svg {\n        path {\n          fill: var(--colors-shades-black-color);\n        }\n      }"
+        : '', "\n  ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
+]; });
+var Input = newStyled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+});
+var Checkbox = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, text = _a.text, _d = _a.checked, checked = _d === void 0 ? false : _d, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck, backgroundColor = _a.backgroundColor;
+    var theme = useTheme();
+    var handleChange = function (e) {
+        if (disabled || (e.target.checked === false && blockUncheck)) {
+            e.preventDefault();
+            return;
+        }
+        onChange(e.target.checked);
+    };
+    return (jsxs(Container, { children: [jsx(Input, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx(Label, __assign({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/build/index.esm.js/src/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/checkbox/styles.js

@@ -0,0 +1,87 @@
+import { css } from '../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+
+/* base styles & size variants */
+var CustomCheckboxStyles = {
+    baseStyles: css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderStyle: 'solid',
+    }),
+    small: function (theme) {
+        return css({
+            width: theme.component.checkbox.size.small.width,
+            height: theme.component.checkbox.size.small.height,
+            borderRadius: theme.component.checkbox.size.small.borderRadius,
+            borderWidth: theme.component.checkbox.size.small.borderWidth,
+            marginRight: theme.component.checkbox.size.small.margin,
+            svg: {
+                width: theme.component.checkbox.size.small.icon.width,
+                height: theme.component.checkbox.size.small.icon.height,
+            },
+        });
+    },
+    medium: function (theme) {
+        return css({
+            width: theme.component.checkbox.size.medium.width,
+            height: theme.component.checkbox.size.medium.height,
+            borderRadius: theme.component.checkbox.size.medium.borderRadius,
+            borderWidth: theme.component.checkbox.size.medium.borderWidth,
+            marginRight: theme.component.checkbox.size.medium.margin,
+            svg: {
+                width: theme.component.checkbox.size.medium.icon.width,
+                height: theme.component.checkbox.size.medium.icon.height,
+            },
+        });
+    },
+    large: function (theme) {
+        return css({
+            width: theme.component.checkbox.size.large.width,
+            height: theme.component.checkbox.size.large.height,
+            borderRadius: theme.component.checkbox.size.large.borderRadius,
+            borderWidth: theme.component.checkbox.size.large.borderWidth,
+            marginRight: theme.component.checkbox.size.large.margin,
+            svg: {
+                width: theme.component.checkbox.size.large.icon.width,
+                height: theme.component.checkbox.size.large.icon.height,
+            },
+        });
+    },
+    primary: function (theme, isChecked, disabled) {
+        return css({
+            backgroundColor: disabled
+                ? theme.colors.background.disabled
+                : isChecked
+                    ? theme.colors.pallete.primary.color
+                    : theme.component.checkbox.background,
+            borderColor: disabled
+                ? theme.colors.border.disabled
+                : isChecked
+                    ? theme.colors.pallete.primary.color
+                    : theme.component.checkbox.borderColor,
+        });
+    },
+    secondary: function (theme, isChecked, disabled) {
+        return css({
+            backgroundColor: disabled
+                ? theme.colors.background.disabled
+                : isChecked
+                    ? theme.colors.pallete.secondary.color
+                    : theme.component.checkbox.background,
+            borderColor: disabled
+                ? theme.colors.border.disabled
+                : isChecked
+                    ? theme.colors.pallete.secondary.color
+                    : theme.component.checkbox.borderColor,
+        });
+    },
+    color: function () {
+        return css({
+            borderRadius: '50%',
+            border: 'none',
+        });
+    },
+};
+
+export { CustomCheckboxStyles };
+//# sourceMappingURL=styles.js.map

package/build/index.esm.js/src/components/checkbox/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/collection/grid/WithProductGrid.js

@@ -0,0 +1,18 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"])));
+function withProductGrid(ProductItemComponent, data) {
+    function WithProductGrid(props) {
+        return (jsx(Container, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
+    }
+    /* istanbul ignore next */
+    var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
+    WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
+    return WithProductGrid;
+}
+var templateObject_1;
+
+export { withProductGrid as default };
+//# sourceMappingURL=WithProductGrid.js.map

package/build/index.esm.js/src/components/collection/grid/WithProductGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithProductGrid.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/collection/index.js

@@ -0,0 +1,10 @@
+import ProductItemMobile from './product/mobile/ProductItemMobile.js';
+import withProductGrid from './grid/WithProductGrid.js';
+
+var Collection = {
+    ProductItemMobile: ProductItemMobile,
+    withProductGrid: withProductGrid,
+};
+
+export { Collection };
+//# sourceMappingURL=index.js.map

package/build/index.esm.js/src/components/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/build/index.esm.js/src/components/collection/product/mobile/ProductItemMobile.js

@@ -0,0 +1,103 @@
+import { __makeTemplateObject, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx, Fragment } from '../../../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import { useMemo } from 'react';
+import newStyled from '../../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { ComponentSize } from '../../../../types/enums.js';
+import '../../../pricing/discount/DiscountTag.js';
+import { PriceLabel } from '../../../pricing/price/PriceLabel.js';
+import { PriceLabelV2 } from '../../../pricing/priceLabelV2/PriceLabelV2.js';
+import '../../../pricing/clubOffer/ClubOfferTag.js';
+import { Rating } from '../../../rating/Rating.js';
+import Image from '../../../shared/image/Image.js';
+import { useTheme } from '../../../../core/theme/Theme.js';
+import { Spacing } from '../../../shared/spacing/Spacing.js';
+import SkeletonBox from '../../../SkeletonBox/SkeletonBox.js';
+import { getSrcSet } from '../../../../utils/getSrcSet/getSrcSet.js';
+import '../../../../utils/media.js';
+import { BuyNowPayLater } from '../../../buynowpaylater/BuyNowPayLater.js';
+import { StrengthBars } from '../../../strength-bars/StrengthBars.js';
+
+var ImageContainer = newStyled.div(function (_a) {
+    var width = _a.width, height = _a.height;
+    return ({
+        position: 'relative',
+        width: width,
+        height: height,
+    });
+});
+var ImageHoverContainer = newStyled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"])));
+var Container = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"])));
+var ProdCardContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
+var Title = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Medium:
+            return {
+                width: '205px',
+                height: '274px',
+            };
+        case ComponentSize.Small:
+            return {
+                width: '9.813rem',
+                height: '13.125rem',
+            };
+        case ComponentSize.Large:
+            return {
+                width: '262px',
+                height: '350px',
+            };
+        /* istanbul ignore next */
+        default:
+            return {
+                width: '205px',
+                height: '274px',
+            };
+    }
+};
+var TopTagContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", ";\n  z-index: 1;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+    var style = _a.style;
+    return style.width;
+});
+var BottomTagContainer = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"], ["\n  position: absolute;\n  bottom: 10%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+    var style = _a.style;
+    return style.width;
+});
+var MarginTopContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-top: 8px;\n"], ["\n  margin-top: 8px;\n"])));
+var ProductItemMobile = function (_a) {
+    var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
+        display: false,
+        position: 'top',
+        component: undefined,
+    } : _e, _f = _a.isBNPL, isBNPL = _f === void 0 ? {
+        displayBNPL: false,
+        installments: 4,
+        installmentPrice: '',
+        iconFolder: 'PDP',
+        iconName: 'Klarna',
+        showLogo: true,
+        iconColor: '#292929',
+        fontSize: '12px',
+    } : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
+        strength: -1,
+        description: '',
+    } : _g;
+    var theme = useTheme();
+    var styles = getStylesBySize(size);
+    var space = useMemo(function () {
+        var _a;
+        return (_a = {},
+            _a[ComponentSize.Large] = 8,
+            _a[ComponentSize.Medium] = 4,
+            _a[ComponentSize.Small] = 2,
+            _a)[size];
+    }, [size]);
+    var PriceLabelDisplay = function () {
+        return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
+    };
+    var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
+    return (jsxs(ProdCardContainer, __assign({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container, __assign({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer, __assign({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer, __assign({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container, __assign({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { ProductItemMobile as default };
+//# sourceMappingURL=ProductItemMobile.js.map

package/build/index.esm.js/src/components/collection/product/mobile/ProductItemMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductItemMobile.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/ColorRadioGroup.js

@@ -0,0 +1,32 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { RadioGroup as lt } from '../../../node_modules/@headlessui/react/dist/headlessui.esm.js';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { Text } from '../text/Text.js';
+
+var CustomRadioGroup = newStyled(lt)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+newStyled(lt.Label)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var Span = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
+var OptionsContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"])));
+var Label = function (_a) {
+    var label = _a.label, values = _a.values;
+    return (jsxs(Text, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx(Span, { children: values }, void 0)] }), void 0));
+};
+var Option = function (_a) {
+    var value = _a.value, children = _a.children;
+    return (jsx(CustomRadioGroupOption, __assign({ value: value }, { children: children }), void 0));
+};
+var ColorRadioGroup = function (_a) {
+    var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
+    return (jsx(CustomRadioGroup, __assign({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
+};
+var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
+    Label: Label,
+    Option: Option,
+    OptionsContainer: OptionsContainer,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { ColorRadioGroup$1 as default };
+//# sourceMappingURL=ColorRadioGroup.js.map

package/build/index.esm.js/src/components/color/ColorRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRadioGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/MultiColorPicker.js

@@ -0,0 +1,46 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import ColorSelector from './selector/ColorSelector.js';
+import { OutOfStock } from './selector/OutOfStock.js';
+import ColorRadioGroup from './ColorRadioGroup.js';
+import { PatternSelector } from './selector/PatternSelector.js';
+
+var renderOptions = function (selectedColor, options) {
+    if (options == null || options.length === 0) {
+        return jsx(OutOfStock, { title: "out of stock color" }, void 0);
+    }
+    return options.map(function (option) { return (jsx(ColorRadioGroup.Option, __assign({ value: option }, { children: option.meta.color ? (jsx(ColorSelector, { color: option.meta.color, selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }, void 0)) : option.meta.pattern ? (jsx(PatternSelector, { url: option.meta.pattern.url, selected: selectedColor.has(option) }, void 0)) : null }), option.label)); });
+};
+var getInitialValue = function (options, selectedValue) {
+    if (selectedValue && options.includes(selectedValue))
+        return [selectedValue];
+    else if (selectedValue && options.length > 0)
+        return [options[0]];
+    else
+        ;
+};
+var MultiColorPicker = function (_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, selectedValue = _a.selectedValue, onChange = _a.onChange;
+    var initialValue = getInitialValue(options, selectedValue);
+    var _c = useState(new Set(initialValue)), selectedColor = _c[0], setSelectedColor = _c[1];
+    var onChangeHandler = function (selectedOption) {
+        setSelectedColor(function (prevState) {
+            var newSelectedOptions = new Set(prevState);
+            prevState.has(selectedOption)
+                ? newSelectedOptions.delete(selectedOption)
+                : newSelectedOptions.add(selectedOption);
+            return newSelectedOptions;
+        });
+    };
+    useEffect(function () {
+        onChange(selectedColor);
+    }, [onChange, selectedColor]);
+    var valueLabels = Array.from(selectedColor)
+        .map(function (item) { return item.label; })
+        .join(' | ');
+    return (jsxs(ColorRadioGroup, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx(ColorRadioGroup.Label, { label: label, values: valueLabels }, void 0), jsx(ColorRadioGroup.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
+};
+
+export { MultiColorPicker as default };
+//# sourceMappingURL=MultiColorPicker.js.map

package/build/index.esm.js/src/components/color/MultiColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiColorPicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/SingleColorPicker.js

@@ -0,0 +1,29 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from '../../../node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.esm.js';
+import ColorSelector from './selector/ColorSelector.js';
+import { OutOfStock } from './selector/OutOfStock.js';
+import ColorRadioGroup from './ColorRadioGroup.js';
+import { PatternSelector } from './selector/PatternSelector.js';
+
+var renderOptions = function (options) {
+    if (options.length === 0) {
+        return jsx(OutOfStock, { title: "out of stock color" }, void 0);
+    }
+    return options.map(function (option) { return (jsx(ColorRadioGroup.Option, __assign({ value: option }, { children: function (_a) {
+            var checked = _a.checked;
+            if (option.meta.color) {
+                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock }, void 0));
+            }
+            if (option.meta.pattern) {
+                return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
+            }
+            return null;
+        } }), option.label)); });
+};
+var SingleColorPicker = function (_a) {
+    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
+    return (jsxs(ColorRadioGroup, __assign({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup.OptionsContainer, __assign({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
+};
+
+export { SingleColorPicker as default };
+//# sourceMappingURL=SingleColorPicker.js.map

package/build/index.esm.js/src/components/color/SingleColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleColorPicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/selector/ColorSelector.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import OneColorSelector from './OneColorSelector.js';
+import ThreeColorSelector from './ThreeColorSelector.js';
+import TwoColorSelector from './TwoColorSelector.js';
+
+var ColorSelector = function (_a) {
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var primaryColor = color[0], secondaryColor = color[1], tertiaryColor = color[2];
+    if (tertiaryColor) {
+        return (jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+    }
+    if (secondaryColor) {
+        return (jsx(TwoColorSelector, { secondaryColor: secondaryColor, primaryColor: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+    }
+    return (jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+};
+
+export { ColorSelector as default };
+//# sourceMappingURL=ColorSelector.js.map

package/build/index.esm.js/src/components/color/selector/ColorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/selector/OneColorSelector.js

@@ -0,0 +1,13 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var OneColorSelector = function (_a) {
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
+    return (jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+};
+
+export { OneColorSelector as default };
+//# sourceMappingURL=OneColorSelector.js.map

package/build/index.esm.js/src/components/color/selector/OneColorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneColorSelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/selector/OutOfStock.js

@@ -0,0 +1,12 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var OutOfStock = function (_a) {
+    var title = _a.title;
+    var theme = useTheme();
+    return (jsxs("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("title", { children: title }, void 0), jsx("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
+};
+
+export { OutOfStock };
+//# sourceMappingURL=OutOfStock.js.map

package/build/index.esm.js/src/components/color/selector/OutOfStock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutOfStock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/selector/PatternSelector.js

@@ -0,0 +1,23 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n  opacity: ", ";\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n  opacity: ", ";\n"])), function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+}, function (_a) {
+    var noStock = _a.noStock;
+    return (noStock ? '0.4' : '1');
+});
+var Image = newStyled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
+var PatternSelector = function (_a) {
+    var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
+    return (jsx(Container, __assign({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx(Image, { src: url, alt: "pattern" }, void 0) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { PatternSelector };
+//# sourceMappingURL=PatternSelector.js.map

package/build/index.esm.js/src/components/color/selector/PatternSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternSelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/selector/ThreeColorSelector.js

@@ -0,0 +1,13 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var ThreeColorSelector = function (_a) {
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
+    return (jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsx("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+};
+
+export { ThreeColorSelector as default };
+//# sourceMappingURL=ThreeColorSelector.js.map

package/build/index.esm.js/src/components/color/selector/ThreeColorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeColorSelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/color/selector/TwoColorSelector.js

@@ -0,0 +1,13 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '../../../core/theme/Theme.js';
+
+var TwoColorSelector = function (_a) {
+    var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var theme = useTheme();
+    var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
+    return (jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsx("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+};
+
+export { TwoColorSelector as default };
+//# sourceMappingURL=TwoColorSelector.js.map

package/build/index.esm.js/src/components/color/selector/TwoColorSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoColorSelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}