@trafilea/afrodita-components 6.15.1 → 6.15.3

package/build/index.d.ts

@@ -1349,6 +1349,7 @@ declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
     40: ThemeColorPallete;
     60: ThemeColorPallete;
     80: ThemeColorPallete;
+    100?: ThemeColorPallete;
 };
 declare type ThemeColors = {
     pallete: {
@@ -3125,8 +3126,10 @@ interface SizeFitGuideProps {
 declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, hideIcon, }: SizeFitGuideProps) => JSX.Element;
 
 declare type Size = 'S' | 'XS / S' | 'M' | 'M / L' | 'L' | 'XL' | 'XL / 2XL' | '2XL' | '3XL' | '4XL';
-declare type SizeTipReference = {
-    [key in Size]?: string;
+declare type SizeTip = {
+    size: Size;
+    tip: string;
+    cta: string;
 };
 interface SizeSelectorProps {
     label: string;
@@ -3137,7 +3140,7 @@ interface SizeSelectorProps {
     inline?: boolean;
     width?: string;
     hasSizeGuide?: boolean;
-    sizeTipReferences?: SizeTipReference;
+    sizeTipReferences?: SizeTip[];
 }
 declare const SizeSelector: ({ label, sizes, selectedValue, onChange, onClickSizeTip, inline, width, hasSizeGuide, sizeTipReferences, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
 

package/build/index.esm.js

@@ -19318,11 +19318,12 @@ var templateObject_1$d, templateObject_2$9;
 var SizeSelector = function (_a) {
     var _b;
     var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _c = _a.inline, inline = _c === void 0 ? false : _c, width = _a.width, _d = _a.hasSizeGuide, hasSizeGuide = _d === void 0 ? false : _d, sizeTipReferences = _a.sizeTipReferences;
+    var activeSizeTip = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences.find(function (sizeTip) { return (sizeTip === null || sizeTip === void 0 ? void 0 : sizeTip.size) === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label); });
     return (jsxs("div", __assign$1({ css: {
             display: 'flex',
             flexDirection: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : 'start',
-        } }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: (_b = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences[selectedValue.label]) !== null && _b !== void 0 ? _b : 'Refer to our' }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
+        } }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, __assign$1({ "data-testid": "sizing-tip" }, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.tip }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { hideIcon: true, onClick: onClickSizeTip, title: (_b = activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.cta) !== null && _b !== void 0 ? _b : 'Size and Fit Guide' }, void 0))] }), void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes === null || sizes === void 0 ? void 0 : sizes.map(function (size) {
                     var active = !size.disabled && size.label === selectedValue.label;
                     return (jsx(SelectorSecondary, { css: {
                             padding: '0.75rem 1rem 0.625rem',
@@ -19824,7 +19825,7 @@ var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __ma
     var theme = _a.theme;
     return theme.component.gallery.aspectRatio;
 });
-var TopTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 10px;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 10px;\n  top: 0;\n"])));
+var TopTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  top: 21px;\n"], ["\n  position: absolute;\n  left: 0px;\n  top: 21px;\n"])));
 var BottomTagContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var NavButtonContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 36px;\n  width: 36px;\n  background-color: ", " !important;\n  border-radius: 500px;\n"], ["\n  height: 36px;\n  width: 36px;\n  background-color: ", " !important;\n  border-radius: 500px;\n"])), function (_a) {
     var theme = _a.theme;
@@ -19855,11 +19856,33 @@ var SETTINGS = {
     dots: false,
 };
 var THUMBNAIL_SETTINGS = {
-    variableWidth: true,
     swipeToSlide: true,
     focusOnSelect: true,
     infinite: false,
     centerPadding: '16px',
+    slidesToShow: 6,
+    speed: 200,
+    arrows: false,
+    responsive: [
+        {
+            breakpoint: 375,
+            settings: {
+                slidesToShow: 4.5,
+            },
+        },
+        {
+            breakpoint: 410,
+            settings: {
+                slidesToShow: 5,
+            },
+        },
+        {
+            breakpoint: 480,
+            settings: {
+                slidesToShow: 5.5,
+            },
+        },
+    ],
 };
 var ProductGalleryMobileV4 = function (_a) {
     var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;