@trafilea/afrodita-components 2.2.0 → 2.3.0

package/build/dts/components/color/selector/PatternSelector.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface PatternSelectorProps {
+    url: string;
+    selected: boolean;
+    dataTestId?: string;
+}
+export declare const PatternSelector: ({ url, selected, dataTestId }: PatternSelectorProps) => JSX.Element;
+export {};

package/build/dts/components/color/selector/PatternSelector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/dts/types/types.d.ts

@@ -75,9 +75,13 @@ export declare type Color = {
     secondaryColor?: string;
     tertiaryColor?: string;
 };
+export declare type Pattern = {
+    url: string;
+};
 export declare type ColorPickerOption = {
     label: string;
-    color: Color;
+    color?: Color;
+    pattern?: Pattern;
 };
 export declare type RadioGroupOption = {
     value: string;

package/build/index.d.ts

@@ -374,9 +374,13 @@ declare type Color = {
     secondaryColor?: string;
     tertiaryColor?: string;
 };
+declare type Pattern = {
+    url: string;
+};
 declare type ColorPickerOption = {
     label: string;
-    color: Color;
+    color?: Color;
+    pattern?: Pattern;
 };
 declare type RadioGroupOption = {
     value: string;
@@ -955,4 +959,4 @@ declare namespace index_d {
   };
 }
 
-export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };
+export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pattern, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };

package/build/index.esm.js

@@ -3519,7 +3519,7 @@ var InputValidationType;
     InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
 })(InputValidationType || (InputValidationType = {}));
 
-var Section = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
+var Section = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
     return props.type === CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
 });
 var CardHeader = function (_a) {
@@ -3530,16 +3530,16 @@ var CardFooter = function (_a) {
     var children = _a.children;
     return (jsx$1(Section, __assign({ type: CardSectionType.Footer }, { children: children }), void 0));
 };
-var templateObject_1$J;
+var templateObject_1$K;
 
-var Body = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
+var Body = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
 var CardBody = function (_a) {
     var children = _a.children;
     return jsx$1(Body, { children: children }, void 0);
 };
-var templateObject_1$I;
+var templateObject_1$J;
 
-var Container$q = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"])), function (_a) {
+var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"])), function (_a) {
     var flex = _a.flex;
     return flex &&
         "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
@@ -3551,14 +3551,14 @@ var Container$q = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
 });
 var Card = function (_a) {
     var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
-    return (jsx$1(Container$q, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
+    return (jsx$1(Container$r, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
 };
 var Card$1 = Object.assign(Card, {
     Header: CardHeader,
     Footer: CardFooter,
     Body: CardBody,
 });
-var templateObject_1$H;
+var templateObject_1$I;
 
 function jsx(type, props, key) {
   if (!hasOwnProperty.call(props, 'css')) {
@@ -5999,7 +5999,7 @@ function BaseSelectOption(_a) {
     return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Listbox)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Listbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function BaseSelect(_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
     return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -6009,7 +6009,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
     Options: BaseSelectOptions,
     Option: BaseSelectOption,
 });
-var templateObject_1$G;
+var templateObject_1$H;
 
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide;
@@ -6188,8 +6188,8 @@ var SelectorSecondary = function (_a) {
             } }) }, void 0));
 };
 
-var ButtonsContainer = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
-var SizeParagraph = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
+var ButtonsContainer = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
+var SizeParagraph = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
 var getInitialValue$2 = function (options, selectedValue) {
     if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
         return selectedValue;
@@ -6214,7 +6214,7 @@ var SizeSelector = function (_a) {
                         }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
                 }) }, void 0)] }, void 0));
 };
-var templateObject_1$F, templateObject_2$t;
+var templateObject_1$G, templateObject_2$u;
 
 var getStylesBySize$a = function (size) {
     switch (size) {
@@ -6243,7 +6243,7 @@ var textButtonStyles$1 = function (theme, size) {
         } });
 };
 var withContainer = function (iconFill, isLeading, Icon) {
-    return Icon && (jsx("span", __assign({ css: css(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
+    return Icon && (jsx("span", __assign({ css: css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
 };
 var getIconFill = function (theme, disabled, iconColor) {
     if (disabled)
@@ -6259,16 +6259,16 @@ var TextButton = function (_a) {
     var iconFill = getIconFill(theme, disabled, iconColor);
     return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
 };
-var templateObject_1$E;
+var templateObject_1$F;
 
-var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
-var P$2 = newStyled.p(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var P$2 = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
-    return (jsxs$1(Container$p, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
+    return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
 };
-var templateObject_1$D, templateObject_2$s, templateObject_3$j;
+var templateObject_1$E, templateObject_2$t, templateObject_3$j;
 
 var getStylesBySize$9 = function (size) {
     switch (size) {
@@ -6298,7 +6298,7 @@ var getStylesBySize$9 = function (size) {
             };
     }
 };
-var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
+var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6320,7 +6320,7 @@ var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __ma
     var size = _a.size;
     return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.height;
 });
-var H3$2 = newStyled.h3(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var H3$2 = newStyled.h3(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var textColor = _a.textColor;
     return textColor;
 }, function (_a) {
@@ -6335,9 +6335,9 @@ var H3$2 = newStyled.h3(templateObject_2$r || (templateObject_2$r = __makeTempla
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
     var theme = useTheme();
-    return (jsx$1(Container$o, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsx$1(Container$p, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
 };
-var templateObject_1$C, templateObject_2$r;
+var templateObject_1$D, templateObject_2$s;
 
 var getStylesBySize$8 = function (size) {
     switch (size) {
@@ -6361,8 +6361,8 @@ var getStylesBySize$8 = function (size) {
             };
     }
 };
-var Container$n = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Price = newStyled.h1(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
+var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
     var weight = _a.weight;
     return (weight ? weight : '400');
 }, function (_a) {
@@ -6392,9 +6392,9 @@ var TagContainer = newStyled.h1(templateObject_3$i || (templateObject_3$i = __ma
 var PriceLabel = function (_a) {
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
     var theme = useTheme();
-    return (jsxs$1(Container$n, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.shades.gray400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
+    return (jsxs$1(Container$o, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.shades.gray400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
-var templateObject_1$B, templateObject_2$q, templateObject_3$i;
+var templateObject_1$C, templateObject_2$r, templateObject_3$i;
 
 var OneColorSelector = function (_a) {
     var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
@@ -6433,8 +6433,8 @@ var OutOfStock = function (_a) {
     return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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$1("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.shades.gray300 }, void 0), jsx$1("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$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.shades.gray300, strokeWidth: "0.5" }, void 0)] }), void 0));
 };
 
-var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
 var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
 var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n"])));
@@ -6455,13 +6455,26 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$A, templateObject_2$p, templateObject_3$h, templateObject_4$d, templateObject_5$7;
+var templateObject_1$B, templateObject_2$q, templateObject_3$h, templateObject_4$d, templateObject_5$7;
+
+var Container$n = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"], ["\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"])), function (_a) {
+    var borderColor = _a.borderColor;
+    return borderColor;
+});
+var Image$3 = newStyled.img(templateObject_2$p || (templateObject_2$p = __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, dataTestId = _a.dataTestId;
+    var theme = useTheme();
+    var outerBorder = selected ? theme.shades.gray550 : 'transparent';
+    return (jsx$1(Container$n, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
+};
+var templateObject_1$A, templateObject_2$p;
 
 var renderOptions$1 = function (options) {
     if (options.length)
         return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
                 var checked = _a.checked;
-                return (jsx$1(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: option.label + "-selector" }), void 0));
+                return option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: option.label + "-selector" }), void 0)) : (option.pattern && jsx$1(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
             } }), option.label)); });
     else
         return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
@@ -6487,7 +6500,7 @@ var SingleColorPicker = function (_a) {
 
 var renderOptions = function (selectedColor, options) {
     if (options && options.length)
-        return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: jsx$1(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), dataTestId: option.label + "-selector" }), void 0) }), option.label)); });
+        return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), dataTestId: option.label + "-selector" }), void 0)) : (option.pattern && (jsx$1(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
     else
         return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
 };