@trafilea/afrodita-components 5.0.0-beta.204 → 5.0.0-beta.206

package/build/index.d.ts

@@ -555,6 +555,14 @@ declare const Drop: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const DropEmpty: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Stars: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Moon: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const Hours: ({ height, width, fill }: IconProps) => JSX.Element;
+
+declare const NewClock: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const PDP_Clock: typeof Clock;
 declare const PDP_FlagUSA: typeof FlagUSA;
 declare const PDP_Minus: typeof Minus;
@@ -572,6 +580,10 @@ declare const PDP_PlayMini: typeof PlayMini;
 declare const PDP_ShippingEmpty: typeof ShippingEmpty;
 declare const PDP_Drop: typeof Drop;
 declare const PDP_DropEmpty: typeof DropEmpty;
+declare const PDP_Stars: typeof Stars;
+declare const PDP_Moon: typeof Moon;
+declare const PDP_Hours: typeof Hours;
+declare const PDP_NewClock: typeof NewClock;
 declare namespace PDP {
   export {
     PDP_Clock as Clock,
@@ -592,6 +604,10 @@ declare namespace PDP {
     PDP_ShippingEmpty as ShippingEmpty,
     PDP_Drop as Drop,
     PDP_DropEmpty as DropEmpty,
+    PDP_Stars as Stars,
+    PDP_Moon as Moon,
+    PDP_Hours as Hours,
+    PDP_NewClock as NewClock,
   };
 }
 
@@ -1235,6 +1251,7 @@ declare type Theme = {
 };
 declare type ThemeBreakpoints = {
     mobile: number;
+    tablet?: number;
     desktop: number;
 };
 declare type ThemeBasicPallete = {
@@ -1242,7 +1259,7 @@ declare type ThemeBasicPallete = {
     contrast: string;
 };
 declare type ThemeColorPallete = ThemeBasicPallete & {
-    soft: ThemeBasicPallete;
+    soft?: ThemeBasicPallete;
 };
 declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
     20: ThemeColorPallete;
@@ -1254,6 +1271,7 @@ declare type ThemeColors = {
     pallete: {
         primary: ThemeColorPrimaryPallete;
         secondary: ThemeColorPrimaryPallete;
+        tertiary?: ThemeColorPrimaryPallete;
     } & Partial<Record<string, ThemeColorPallete>>;
     shades: {
         black: ThemeBasicPallete;
@@ -1292,6 +1310,7 @@ declare type ThemeColors = {
         color: string;
         disabled: string;
         highlight: string;
+        shadow?: string;
     };
     background: {
         color: string;
@@ -1598,6 +1617,7 @@ declare type ThemeComponent = {
         fontWeight: number;
         lineHeight: string;
         padding: string;
+        optionPadding: string;
         color: string;
         fill: string;
         options: {
@@ -2595,10 +2615,12 @@ interface TabProps {
 }
 declare const Tab: ({ title, titleSize, height, selectedTitleWeight, selected, onClick, color, tabsMaxWidth, }: TabProps) => JSX.Element;
 
-interface IconList {
+interface IconsWithTitleProps {
     backgroundColor: string;
     iconColor: string;
     iconName: string;
+    iconFolder?: string;
+    withWrapper?: boolean;
     iconTitle: string;
     iconSizeDesktop?: number;
     iconSizeMobile?: number;
@@ -2607,7 +2629,7 @@ interface IconList {
     iconStyle?: string;
     isTitleInnerHtml?: boolean;
 }
-declare const IconsWithTitle: ({ iconName, iconTitle, backgroundColor, iconColor, iconSizeDesktop, iconSizeMobile, iconTitlePosition, iconTitleStyle, iconStyle, isTitleInnerHtml, }: IconList) => JSX.Element | null;
+declare const IconsWithTitle: ({ iconName, iconTitle, iconFolder, withWrapper, backgroundColor, iconColor, iconSizeDesktop, iconSizeMobile, iconTitlePosition, iconTitleStyle, iconStyle, isTitleInnerHtml, }: IconsWithTitleProps) => JSX.Element | null;
 
 interface NoteProps {
     accentColor?: string;

package/build/index.esm.js

@@ -690,6 +690,26 @@ var DropEmpty = function (_a) {
     return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 14, viewBoxY: 14, title: "DropEmpty", testId: "drop-empty" }, { children: jsx$1("path", { d: "M4.83473 3.98127C5.69171 2.61907 6.56268 1.41655 7.00046 0.827652C7.43854 1.417 8.30908 2.61902 9.16563 3.98057C9.74824 4.90668 10.3181 5.89672 10.7406 6.81183C11.1711 7.74408 11.4178 8.53462 11.4178 9.08303C11.4178 11.5181 9.43554 13.5 7.00012 13.5C4.56474 13.5 2.58257 11.5181 2.58252 9.08351C2.58252 8.53521 2.8292 7.74474 3.25968 6.81251C3.68223 5.89741 4.25211 4.90737 4.83473 3.98127Z", stroke: fill, fill: "white" }, void 0) }), void 0));
 };
 
+var Stars = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 37, viewBoxY: 36, title: "Stars", testId: "stars" }, { children: jsx$1("path", { d: "M0 22.5354C1.2487 22.4788 2.3053 22.0073 3.16978 21.121C4.03427 20.2347 4.47612 19.1786 4.47612 17.9529C4.47612 19.1786 4.89875 20.2347 5.76324 21.121C6.62773 22.0073 7.68432 22.4788 8.93302 22.5354C7.68432 22.5919 6.62773 23.0634 5.76324 23.9497C5.34529 24.3675 5.01623 24.8629 4.79525 25.4068C4.57427 25.9507 4.46578 26.5324 4.47612 27.1179C4.47612 25.8921 4.05348 24.836 3.16978 23.9497C2.3053 23.0634 1.2487 22.5919 0 22.5354ZM4.47612 8.95757C6.89668 8.84442 8.95223 7.92038 10.6428 6.18544C12.3333 4.4505 13.1786 2.39497 13.1786 0C13.1786 2.39497 14.0239 4.4505 15.7144 6.18544C17.405 7.92038 19.4605 8.82556 21.9003 8.95757C20.3058 9.033 18.8458 9.46674 17.501 10.2965C16.1755 11.1074 15.1189 12.2012 14.3313 13.5589C13.5628 14.9167 13.1786 16.3688 13.1786 17.9529C13.1786 15.5579 12.3333 13.4835 10.6428 11.7486C8.95223 9.99476 6.89668 9.07072 4.47612 8.95757ZM10.8541 29.2677C12.6791 29.1922 14.2352 28.4945 15.5031 27.1933C16.771 25.8921 17.405 24.3457 17.405 22.5354C17.405 24.3457 18.0389 25.8921 19.3069 27.1933C20.5748 28.4945 22.1116 29.1922 23.9367 29.2677C22.1116 29.3431 20.5748 30.0409 19.3069 31.3421C18.0389 32.6433 17.405 34.1896 17.405 36C17.405 34.1896 16.771 32.6433 15.5031 31.3421C14.2913 30.0779 12.6212 29.3327 10.8541 29.2677ZM23.9367 20.329C25.7617 20.2535 27.2985 19.5558 28.5665 18.2546C29.8344 16.9534 30.4491 15.407 30.4491 13.5778C30.4491 15.3882 31.0831 16.9345 32.351 18.2357C33.6189 19.5369 35.175 20.2347 37 20.3101C35.175 20.3855 33.6189 21.0833 32.351 22.3845C31.0831 23.6857 30.4491 25.2321 30.4491 27.0424C30.4491 25.2321 29.8152 23.6857 28.5665 22.3845C27.2985 21.1021 25.7617 20.4044 23.9367 20.329Z", fill: fill }, void 0) }), void 0));
+};
+
+var Moon = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 27, viewBoxY: 27, title: "Moon", testId: "moon" }, { children: jsx$1("path", { d: "M26.7898 16.5663C26.1658 18.7997 24.9679 20.8307 23.3153 22.4574C21.6627 24.0841 19.613 25.2497 17.3701 25.8384C15.1272 26.4271 12.7692 26.4182 10.5308 25.8128C8.29235 25.2073 6.25144 24.0263 4.61108 22.3873C2.97072 20.7483 1.78809 18.7083 1.18081 16.4704C0.573532 14.2324 0.562783 11.8745 1.14963 9.63107C1.73648 7.38768 2.90047 5.33703 4.52582 3.68312C6.15117 2.0292 8.18123 0.829661 10.4141 0.203818C10.5776 0.151142 10.7517 0.139459 10.9208 0.169795C11.09 0.200131 11.2491 0.271558 11.3842 0.377797C11.5193 0.484036 11.6262 0.621834 11.6956 0.779079C11.765 0.936323 11.7946 1.1082 11.782 1.2796C11.7817 1.36091 11.7682 1.44163 11.7422 1.51866C11.2153 3.42047 11.2023 5.42802 11.7045 7.33649C12.2067 9.24497 13.2062 10.9861 14.601 12.3822C15.9957 13.7783 17.7359 14.7795 19.6438 15.2835C21.5518 15.7876 23.5594 15.7765 25.4617 15.2515L25.7539 15.1983C25.985 15.1965 26.2105 15.2692 26.3971 15.4055C26.5837 15.5419 26.7214 15.7347 26.7898 15.9554C26.8566 16.1535 26.8566 16.3681 26.7898 16.5663Z", fill: fill }, void 0) }), void 0));
+};
+
+var Hours = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 30, viewBoxY: 30, title: "Hours", testId: "hours" }, { children: jsx$1("path", { d: "M15 16.3977C15.8476 16.3976 16.6758 16.651 17.3783 17.1253C18.0808 17.5996 18.6254 18.2731 18.9422 19.0593C19.259 19.8454 19.3335 20.7084 19.1561 21.5372C18.9787 22.366 18.5575 23.1229 17.9467 23.7105L15.2408 26.3143H19.25V29.1477H10.75V26.7053L15.9817 21.6691C16.1506 21.5068 16.2765 21.3052 16.3483 21.0824C16.4202 20.8595 16.4357 20.6223 16.3934 20.392C16.3511 20.1617 16.2524 19.9455 16.1061 19.7627C15.9598 19.5798 15.7705 19.4361 15.5551 19.3444C15.3396 19.2526 15.1048 19.2157 14.8716 19.2369C14.6385 19.2581 14.4142 19.3368 14.2188 19.4659C14.0235 19.5951 13.8632 19.7706 13.7523 19.9768C13.6414 20.183 13.5833 20.4135 13.5833 20.6477H10.75C10.75 19.5205 11.1978 18.4395 11.9948 17.6425C12.7918 16.8454 13.8728 16.3977 15 16.3977ZM23.5 16.3977V22.0643H26.3333V16.3977H29.1667V29.1477H26.3333V24.8977H20.6667V16.3977H23.5ZM3.66666 14.981C3.66492 16.6804 4.04609 18.3584 4.78186 19.8903C5.51763 21.4221 6.5891 22.7686 7.91666 23.8295V27.2522C5.76221 26.0091 3.97321 24.2205 2.72973 22.0663C1.48626 19.9121 0.832177 17.4683 0.83333 14.981H3.66666ZM15 0.814337C22.3454 0.814337 28.3861 6.40592 29.0958 13.5643H26.2455C25.9695 11.3756 25.0608 9.31505 23.6308 7.63524C22.2008 5.95543 20.3117 4.7294 18.1952 4.1075C16.0786 3.48561 13.8266 3.49486 11.7152 4.13413C9.60381 4.77341 7.72487 6.01491 6.30875 7.70642L9.33333 10.731H0.83333V2.231L4.29991 5.69617C5.62858 4.16218 7.27192 2.93221 9.11824 2.08984C10.9646 1.24747 12.9706 0.812445 15 0.814337Z", fill: fill }, void 0) }), void 0));
+};
+
+var NewClock = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 27, viewBoxY: 26, title: "NewClock", testId: "newClock" }, { children: jsx$1("path", { d: "M12.9375 6.62501V12.3891L7.94377 15.2711C7.74305 15.3889 7.58654 15.5693 7.49829 15.7846C7.41004 15.9999 7.39492 16.2383 7.45525 16.463C7.51559 16.6878 7.64804 16.8865 7.83227 17.0287C8.0165 17.1708 8.24231 17.2486 8.47502 17.25C8.66269 17.2553 8.84768 17.2044 9.00627 17.1039L14.5313 13.9164H14.5578L14.611 13.8898L14.6508 13.85L14.6906 13.8234L14.7305 13.7836L14.757 13.757C14.7836 13.7438 14.7969 13.7172 14.8102 13.7039L14.8367 13.6774L14.8633 13.6242L14.8899 13.5844L14.9164 13.5445C14.9247 13.5384 14.9314 13.5303 14.936 13.5211C14.9406 13.5119 14.943 13.5017 14.943 13.4914L14.9695 13.4516C14.9695 13.4383 14.9828 13.425 14.9828 13.3984C14.9876 13.3931 14.9913 13.3867 14.9936 13.3799C14.9959 13.373 14.9967 13.3658 14.9961 13.3586L15.0227 13.3055C15.0221 13.2983 15.0229 13.291 15.0252 13.2842C15.0275 13.2773 15.0311 13.271 15.036 13.2656C15.036 13.2391 15.036 13.2258 15.0492 13.2125V13.1594C15.0492 13.1328 15.0625 13.1195 15.0625 13.1063V6.62501C15.0625 6.34321 14.9506 6.07296 14.7513 5.8737C14.5521 5.67445 14.2818 5.56251 14 5.56251C13.7182 5.56251 13.448 5.67445 13.2487 5.8737C13.0495 6.07296 12.9375 6.34321 12.9375 6.62501ZM0.825016 2.9461C1.01968 2.86729 1.23333 2.84794 1.43899 2.89049C1.64464 2.93304 1.83307 3.03558 1.98048 3.18516L3.8797 5.08438L4.98205 3.98204C6.76543 2.19958 9.03728 0.985927 11.5104 0.494506C13.9834 0.00308466 16.5467 0.255967 18.8761 1.22118C21.2054 2.18639 23.1963 3.8206 24.597 5.91718C25.9977 8.01376 26.7453 10.4786 26.7453 13C26.7453 15.5214 25.9977 17.9863 24.597 20.0828C23.1963 22.1794 21.2054 23.8136 18.8761 24.7788C16.5467 25.744 13.9834 25.9969 11.5104 25.5055C9.03728 25.0141 6.76543 23.8004 4.98205 22.018C4.78335 21.8188 4.67176 21.5489 4.67176 21.2676C4.67176 20.9862 4.78335 20.7164 4.98205 20.5172C5.07977 20.4172 5.19649 20.3377 5.32535 20.2835C5.45422 20.2292 5.59262 20.2013 5.73244 20.2013C5.87225 20.2013 6.01066 20.2292 6.13952 20.2835C6.26839 20.3377 6.38511 20.4172 6.48283 20.5172C7.96923 22.0019 9.86245 23.0127 11.9232 23.4217C13.9839 23.8307 16.1196 23.6196 18.0604 22.8151C20.0012 22.0106 21.6599 20.6487 22.8268 18.9017C23.9938 17.1547 24.6167 15.1009 24.6167 13C24.6167 10.8991 23.9938 8.84532 22.8268 7.0983C21.6599 5.35128 20.0012 3.98945 18.0604 3.18492C16.1196 2.38039 13.9839 2.16929 11.9232 2.5783C9.86245 2.98731 7.96923 3.99807 6.48283 5.48282L5.38049 6.58516L7.29298 8.49766C7.43935 8.64698 7.5384 8.83617 7.57774 9.04152C7.61707 9.24688 7.59495 9.45928 7.51413 9.65211C7.4333 9.84495 7.29738 10.0097 7.12338 10.1256C6.94938 10.2415 6.74504 10.3036 6.53595 10.3039H1.22345C0.941662 10.3039 0.67141 10.192 0.472153 9.99271C0.272894 9.79346 0.160954 9.5232 0.160954 9.24141V3.92891C0.164816 3.71844 0.229593 3.5136 0.347448 3.33917C0.465303 3.16474 0.631184 3.02821 0.825016 2.9461Z", fill: fill }, void 0) }), void 0));
+};
+
 var PDP = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Clock: Clock,
@@ -709,7 +729,11 @@ var PDP = /*#__PURE__*/Object.freeze({
     PlayMini: PlayMini,
     ShippingEmpty: ShippingEmpty,
     Drop: Drop,
-    DropEmpty: DropEmpty
+    DropEmpty: DropEmpty,
+    Stars: Stars,
+    Moon: Moon,
+    Hours: Hours,
+    NewClock: NewClock
 });
 
 var Facebook = function (_a) {
@@ -4712,7 +4736,7 @@ var CustomOption = newStyled.li(function (_a) {
         alignItems: 'flex-start',
         margin: 0,
         cursor: 'pointer',
-        padding: '0.75rem 1rem 0.625rem 0.75rem',
+        padding: theme.component.dropdown.optionPadding,
         justifyContent: 'flex-start',
         borderRadius: 'inherit',
         width: '100%',
@@ -5111,7 +5135,7 @@ var Container$V = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __
     var size = _a.size;
     return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
 });
-var H3$1 = 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 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) {
@@ -5126,7 +5150,7 @@ var H3$1 = newStyled.h3(templateObject_2$S || (templateObject_2$S = __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, style = _a.style;
     var theme = useTheme();
-    return (jsx$1(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsx$1(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
 };
 var templateObject_1$1k, templateObject_2$S;
 
@@ -11658,7 +11682,7 @@ var FitPredictor = function (_a) {
 };
 var templateObject_1$18, templateObject_2$M;
 
-var H2$1 = newStyled.h2(function (_a) {
+var H2 = newStyled.h2(function (_a) {
     var color = _a.color;
     return ({
         textAlign: 'center',
@@ -11707,7 +11731,7 @@ var getBarWithBasedOnPercent = function (percent) {
 var ProgressBar = function (_a) {
     var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
     var theme = useTheme();
-    return (jsxs$1(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
+    return (jsxs$1(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
 };
 var templateObject_1$17;
 
@@ -12365,7 +12389,7 @@ var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
     var theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
-var ButtonContainer$1 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer$1 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  max-width: 50%;\n  margin-left: -6px;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  max-width: 50%;\n  margin-left: -6px;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.button.borderRadius;
 });
@@ -12778,12 +12802,12 @@ var Row = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTempla
         "\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  ";
 });
 var H5 = newStyled.h5(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 500;\n  margin-bottom: 0.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
-var H3 = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
+var H3$1 = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
 var FreeShipping = newStyled.span(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n"], ["\n  font-weight: 600;\n  color: ", ";\n"])), function (props) { return props.color; });
 var CrossSellCheckbox = function (_a) {
     var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
     var theme = useTheme();
-    return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
 };
 var templateObject_1$G, templateObject_2$r, templateObject_3$o, templateObject_4$f, templateObject_5$9, templateObject_6$8;
 
@@ -17522,14 +17546,14 @@ var PackCard = function (_a) {
 var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4;
 
 var Title$1 = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 0.063rem solid ", ";\n  user-select: none;\n  cursor: pointer;\n"])), function (props) { return props.borderColor; });
-var H2 = newStyled.h2(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"])), function (props) { return props.color; });
+var H3 = newStyled.h3(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  margin: 0.75rem 0;\n"])), function (props) { return props.color; });
 var ArrowContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  width: 1rem;\n  height: 1rem;\n"], ["\n  width: 1rem;\n  height: 1rem;\n"])));
 var Container$g = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"], ["\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
 var Accordion = function (_a) {
     var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
     var theme = useTheme();
     var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
-    return (jsxs$1(Container$g, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
+    return (jsxs$1(Container$g, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
 };
 var templateObject_1$l, templateObject_2$f, templateObject_3$e, templateObject_4$8;
 
@@ -17737,10 +17761,10 @@ var IconWrapper = newStyled.div(function (props) { return ({
 }); });
 var IconsWithTitle = function (_a) {
     var _b;
-    var iconName = _a.iconName, iconTitle = _a.iconTitle, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _c = _a.iconSizeDesktop, iconSizeDesktop = _c === void 0 ? 4 : _c, _d = _a.iconSizeMobile, iconSizeMobile = _d === void 0 ? 3 : _d, _e = _a.iconTitlePosition, iconTitlePosition = _e === void 0 ? 'bottom' : _e, _f = _a.iconTitleStyle, iconTitleStyle = _f === void 0 ? '' : _f, _g = _a.iconStyle, iconStyle = _g === void 0 ? '' : _g, _h = _a.isTitleInnerHtml, isTitleInnerHtml = _h === void 0 ? false : _h;
+    var iconName = _a.iconName, iconTitle = _a.iconTitle, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'MyAccount' : _c, _d = _a.withWrapper, withWrapper = _d === void 0 ? true : _d, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _e = _a.iconSizeDesktop, iconSizeDesktop = _e === void 0 ? 4 : _e, _f = _a.iconSizeMobile, iconSizeMobile = _f === void 0 ? 3 : _f, _g = _a.iconTitlePosition, iconTitlePosition = _g === void 0 ? 'bottom' : _g, _h = _a.iconTitleStyle, iconTitleStyle = _h === void 0 ? '' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? '' : _j, _k = _a.isTitleInnerHtml, isTitleInnerHtml = _k === void 0 ? false : _k;
     var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
     // @ts-ignore
-    var IconComponent = (_b = Icon['MyAccount'][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
+    var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
     if (IconComponent == null) {
         console.error('Icon', iconName, 'not found');
         return null;
@@ -17761,7 +17785,7 @@ var IconsWithTitle = function (_a) {
         textAlign: 'center',
         lineHeight: '18px',
     };
-    return (jsx$1(Fragment$1, { children: jsxs$1(Container$d, __assign$1({ textPosition: iconTitlePosition }, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
+    return (jsx$1(Fragment$1, { children: jsxs$1(Container$d, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
 };
 
 var ImageWrapper$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  max-height: fit-content;\n"])));