@trafilea/afrodita-components 6.8.11 → 6.8.13

package/build/index.esm.js

@@ -3392,6 +3392,8 @@ var Share = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name
 
 var SignOut = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/signout" }), void 0); };
 
+var SignOutLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "actions/signout_light" }), void 0)); };
+
 var Trash = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/trash" }), void 0); };
 
 var Warning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/warning" }), void 0); };
@@ -3435,6 +3437,7 @@ var Actions = /*#__PURE__*/Object.freeze({
     SettingsSolid: SettingsSolid,
     Share: Share,
     SignOut: SignOut,
+    SignOutLight: SignOutLight,
     Trash: Trash,
     Warning: Warning
 });
@@ -3604,81 +3607,87 @@ var Download = /*#__PURE__*/Object.freeze({
     GooglePlay: GooglePlay
 });
 
-var Thinking = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/thinking" }), void 0); };
+var BlowingKiss = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/blowing_kiss" }), void 0); };
 
-var SmilingV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v2" }), void 0); };
+var Frowning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/frowning" }), void 0); };
 
 var Grinning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/grinning" }), void 0); };
 
 var GrinningWithSweat = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/grinning_with_sweat" }), void 0)); };
 
-var BlowingKiss = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/blowing_kiss" }), void 0); };
+var Relieved = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/relieved" }), void 0); };
 
-var Frowning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/frowning" }), void 0); };
+var SmilingV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v2" }), void 0); };
 
-var Relieved = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/relieved" }), void 0); };
+var SmilingV3 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v3" }), void 0); };
+
+var Thinking = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/thinking" }), void 0); };
 
 var Emoji = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Thinking: Thinking,
-    SmilingV2: SmilingV2,
-    Grinning: Grinning,
-    GrinningWithSweat: GrinningWithSweat,
     BlowingKiss: BlowingKiss,
     Frowning: Frowning,
-    Relieved: Relieved
+    Grinning: Grinning,
+    GrinningWithSweat: GrinningWithSweat,
+    Relieved: Relieved,
+    SmilingV2: SmilingV2,
+    SmilingV3: SmilingV3,
+    Thinking: Thinking
 });
 
 var AdaChat = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/ada_chat" }), void 0); };
 
-var QuestionCircle = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/question_circle" }), void 0)); };
+var Comment$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment" }), void 0); };
 
-var Messenger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/messenger" }), void 0); };
+var CommentDots = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_dots" }), void 0)); };
 
-var Comment$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment" }), void 0); };
+var CommentLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_light" }), void 0)); };
 
-var Mail = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/mail" }), void 0); };
+var CommentMoney = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_money" }), void 0)); };
 
 var Community$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/community" }), void 0); };
 
-var QuoteLeft = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_left" }), void 0); };
+var Light = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light" }), void 0); };
 
-var QuoteRight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_right" }), void 0)); };
+var LightBulb$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb" }), void 0); };
 
-var QuoteSolidLeft = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_left" }), void 0)); };
+var LightBulbSolid = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb_solid" }), void 0)); };
 
-var QuoteSolidRight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_right" }), void 0)); };
+var Mail = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/mail" }), void 0); };
 
-var Light = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light" }), void 0); };
+var Messenger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/messenger" }), void 0); };
 
-var LightBulb$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb" }), void 0); };
+var QuestionCircle = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/question_circle" }), void 0)); };
 
-var LightBulbSolid = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb_solid" }), void 0)); };
+var QuestionCircleLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/question_circle_light" }), void 0)); };
 
-var CommentDots = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_dots" }), void 0)); };
+var QuoteLeft = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_left" }), void 0); };
 
-var CommentLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_light" }), void 0)); };
+var QuoteRight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_right" }), void 0)); };
 
-var CommentMoney = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_money" }), void 0)); };
+var QuoteSolidLeft = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_left" }), void 0)); };
+
+var QuoteSolidRight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_right" }), void 0)); };
 
 var Messaging = /*#__PURE__*/Object.freeze({
     __proto__: null,
     AdaChat: AdaChat,
-    QuestionCircle: QuestionCircle,
-    Messenger: Messenger,
     Comment: Comment$1,
-    Mail: Mail,
+    CommentDots: CommentDots,
+    CommentLight: CommentLight,
+    CommentMoney: CommentMoney,
     Community: Community$1,
-    QuoteLeft: QuoteLeft,
-    QuoteRight: QuoteRight,
-    QuoteSolidLeft: QuoteSolidLeft,
-    QuoteSolidRight: QuoteSolidRight,
     Light: Light,
     LightBulb: LightBulb$1,
     LightBulbSolid: LightBulbSolid,
-    CommentDots: CommentDots,
-    CommentLight: CommentLight,
-    CommentMoney: CommentMoney
+    Mail: Mail,
+    Messenger: Messenger,
+    QuestionCircle: QuestionCircle,
+    QuestionCircleLight: QuestionCircleLight,
+    QuoteLeft: QuoteLeft,
+    QuoteRight: QuoteRight,
+    QuoteSolidLeft: QuoteSolidLeft,
+    QuoteSolidRight: QuoteSolidRight
 });
 
 var BirthdayGifts = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "myaccount/birthday_gifts" }), void 0)); };
@@ -3733,89 +3742,89 @@ var MyAccount = /*#__PURE__*/Object.freeze({
     VIP: VIP
 });
 
-var Search = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/search" }), void 0); };
-
-var User = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user" }), void 0); };
-
-var ShoppingBag = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag" }), void 0)); };
+var AddressInformation = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
 
-var ShoppingCart = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart" }), void 0)); };
+var Benefits = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
 
-var MapMarker = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/map_marker" }), void 0); };
+var ClubMembership = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
 
-var Hamburger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/hamburger" }), void 0); };
+var Ellipsis = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis" }), void 0); };
 
-var AddressInformation = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
+var EllipsisHorizontal = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis_horizontal" }), void 0)); };
 
-var ClubMembership = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
+var Filters$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/filters" }), void 0); };
 
-var Benefits = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
+var Hamburger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/hamburger" }), void 0); };
 
 var Home = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/home" }), void 0); };
 
 var HomeSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/home_solid" }), void 0); };
 
-var ShoppingBagV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v2" }), void 0)); };
-
-var UserSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_solid" }), void 0); };
+var Loading$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/loading" }), void 0); };
 
-var SlideDot$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot" }), void 0); };
+var Lock = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/lock" }), void 0); };
 
-var SlideDotSolid = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot_solid" }), void 0)); };
+var LockSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/lock_solid" }), void 0); };
 
-var Ellipsis = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis" }), void 0); };
+var MapMarker = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/map_marker" }), void 0); };
 
-var EllipsisHorizontal = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis_horizontal" }), void 0)); };
+var MapSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/map_solid" }), void 0); };
 
-var Filters$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/filters" }), void 0); };
+var MenuLines = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/menu_lines" }), void 0); };
 
-var Lock = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/lock" }), void 0); };
+var Search = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/search" }), void 0); };
 
-var LockSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/lock_solid" }), void 0); };
+var Shaperbox = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shaperbox" }), void 0); };
 
-var Loading$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/loading" }), void 0); };
+var ShoppingBag = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag" }), void 0)); };
 
-var MapSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/map_solid" }), void 0); };
+var ShoppingBagV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v2" }), void 0)); };
 
-var MenuLines = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/menu_lines" }), void 0); };
+var ShoppingBagV3 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v3" }), void 0)); };
 
-var UserV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_v2" }), void 0); };
+var ShoppingCart = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart" }), void 0)); };
 
 var ShoppingCartV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart_v2" }), void 0)); };
 
-var ShoppingBagV3 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v3" }), void 0)); };
+var SlideDot$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot" }), void 0); };
 
-var Shaperbox = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shaperbox" }), void 0); };
+var SlideDotSolid = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot_solid" }), void 0)); };
+
+var User = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user" }), void 0); };
+
+var UserSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_solid" }), void 0); };
+
+var UserV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_v2" }), void 0); };
 
 var Navigation = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Search: Search,
-    User: User,
-    ShoppingBag: ShoppingBag,
-    ShoppingCart: ShoppingCart,
-    MapMarker: MapMarker,
-    Hamburger: Hamburger,
     AddressInformation: AddressInformation,
-    ClubMembership: ClubMembership,
     Benefits: Benefits,
-    Home: Home,
-    HomeSolid: HomeSolid,
-    ShoppingBagV2: ShoppingBagV2,
-    UserSolid: UserSolid,
-    SlideDot: SlideDot$1,
-    SlideDotSolid: SlideDotSolid,
+    ClubMembership: ClubMembership,
     Ellipsis: Ellipsis,
     EllipsisHorizontal: EllipsisHorizontal,
     Filters: Filters$1,
+    Hamburger: Hamburger,
+    Home: Home,
+    HomeSolid: HomeSolid,
+    Loading: Loading$1,
     Lock: Lock,
     LockSolid: LockSolid,
-    Loading: Loading$1,
+    MapMarker: MapMarker,
     MapSolid: MapSolid,
     MenuLines: MenuLines,
-    UserV2: UserV2,
-    ShoppingCartV2: ShoppingCartV2,
+    Search: Search,
+    Shaperbox: Shaperbox,
+    ShoppingBag: ShoppingBag,
+    ShoppingBagV2: ShoppingBagV2,
     ShoppingBagV3: ShoppingBagV3,
-    Shaperbox: Shaperbox
+    ShoppingCart: ShoppingCart,
+    ShoppingCartV2: ShoppingCartV2,
+    SlideDot: SlideDot$1,
+    SlideDotSolid: SlideDotSolid,
+    User: User,
+    UserSolid: UserSolid,
+    UserV2: UserV2
 });
 
 var BodConLabel = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "other/bod_con_label" }), void 0); };
@@ -3921,6 +3930,10 @@ var ErrorCross = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
 
 var FlagUSA = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/flag_usa" }), void 0); };
 
+var FreeReturnsV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/free_returns_v2" }), void 0)); };
+
+var FreeShippingV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/free_shipping_v2" }), void 0)); };
+
 var Hours = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/hours" }), void 0); };
 
 var KlarnaLogo = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/klarna_logo" }), void 0); };
@@ -3969,6 +3982,8 @@ var PDP = /*#__PURE__*/Object.freeze({
     DropEmpty: DropEmpty,
     ErrorCross: ErrorCross,
     FlagUSA: FlagUSA,
+    FreeReturnsV2: FreeReturnsV2,
+    FreeShippingV2: FreeShippingV2,
     Hours: Hours,
     KlarnaLogo: KlarnaLogo,
     LightBulb: LightBulb,
@@ -4090,7 +4105,7 @@ var TAGS = {
     hero2: newStyled.h2(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject([""], [""]))),
     hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
     display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
-    display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
+    display2: newStyled.h2(templateObject_5$t || (templateObject_5$t = __makeTemplateObject([""], [""]))),
     display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
     heading1: newStyled.h1(templateObject_7$g || (templateObject_7$g = __makeTemplateObject([""], [""]))),
     heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
@@ -4222,13 +4237,13 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$s, templateObject_6$o, templateObject_7$g, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
+var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
 
 var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
 var Card$3 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"], ["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"])));
 var Tag$2 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n  background-color: var(--component-packSelector-tagColor);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1px 0;\n\n  [aria-checked='true'] & {\n    background-color: var(--component-packSelector-selectedColor);\n\n    & * {\n      color: var(--component-packSelector-selectedContrast) !important;\n    }\n  }\n"])));
 var Label$4 = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"], ["\n  position: relative;\n  width: fit-content;\n  margin: 0 auto;\n"])));
-var Check$1 = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: var(--color);\n  border-radius: 50%;\n  left: 100%;\n  top: 50%;\n  transform: translate(6px, -50%) scale(0.5);\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n\n  &[data-visible='true'] {\n    transform: translate(6px, -50%) scale(1);\n    opacity: 1;\n  }\n"], ["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: var(--color);\n  border-radius: 50%;\n  left: 100%;\n  top: 50%;\n  transform: translate(6px, -50%) scale(0.5);\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n\n  &[data-visible='true'] {\n    transform: translate(6px, -50%) scale(1);\n    opacity: 1;\n  }\n"])));
+var Check$1 = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: var(--color);\n  border-radius: 50%;\n  left: 100%;\n  top: 50%;\n  transform: translate(6px, -50%) scale(0.5);\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n\n  &[data-visible='true'] {\n    transform: translate(6px, -50%) scale(1);\n    opacity: 1;\n  }\n"], ["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: var(--color);\n  border-radius: 50%;\n  left: 100%;\n  top: 50%;\n  transform: translate(6px, -50%) scale(0.5);\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n\n  &[data-visible='true'] {\n    transform: translate(6px, -50%) scale(1);\n    opacity: 1;\n  }\n"])));
 var DiscountContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n"])));
 var PackSelectorV2 = function (_a) {
     var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
@@ -4254,7 +4269,7 @@ var PackCard$1 = function (_a) {
                                 currency: currencyCode || 'USD',
                             }), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
 };
-var templateObject_1$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$r, templateObject_6$n;
+var templateObject_1$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$s, templateObject_6$n;
 
 var Container$18 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 32px;\n  display: flex;\n  align-items: center;\n"])));
 var DropContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -5122,14 +5137,14 @@ var TooltipText = newStyled.div(templateObject_4$G || (templateObject_4$G = __ma
     var color = _a.color;
     return color;
 });
-var TopSection = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
+var TopSection = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
 var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
 var IconContainer$5 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
 var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: 0.3rem;\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"], ["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: 0.3rem;\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])));
-var templateObject_1$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$q, templateObject_6$m, templateObject_7$f, templateObject_8$c;
+var templateObject_1$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c;
 
 var useOnClickOutside = function (ref, handler) {
     useEffect(function () {
@@ -5650,7 +5665,7 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$R || (te
     return (onClick ? 'cursor: pointer;' : '');
 });
 var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n  padding: 16px;\n"], ["\n  padding: 16px;\n"])));
-var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  margin-bottom: 8px;\n  cursor: pointer;\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  margin-bottom: 8px;\n  cursor: pointer;\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var SubscriptionHeader = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  margin-bottom: 8px;\n  cursor: pointer;\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  margin-bottom: 8px;\n  cursor: pointer;\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.shades[200].color;
 }, function (_a) {
@@ -5668,7 +5683,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
     return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
 });
 var Container$$ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
-var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$p, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
+var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$q, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
 
 var radioIds = {
     oneTime: {
@@ -5747,9 +5762,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1A || (templateObject_1$1A
 var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n  font-size: 22px;\n  line-height: 20px;\n  font-weight: 400;\n  margin: 0;\n"], ["\n  font-size: 22px;\n  line-height: 20px;\n  font-weight: 400;\n  margin: 0;\n"])));
 var StarIconContainer = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n"])));
-var Description$2 = newStyled.p(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n"], ["\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n"])));
+var Description$2 = newStyled.p(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n"], ["\n  font-size: 16px;\n  font-weight: 300;\n  line-height: normal;\n"])));
 var ReviewDays = newStyled.span(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n  display: block;\n  font-size: 14px;\n  font-style: italic;\n  font-weight: 300;\n"], ["\n  display: block;\n  font-size: 14px;\n  font-style: italic;\n  font-weight: 300;\n"])));
-var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$o, templateObject_6$k;
+var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$p, templateObject_6$k;
 
 var NameWithStars = function (_a) {
     var name = _a.name, size = _a.size;
@@ -6013,7 +6028,7 @@ var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __
 var MobileContainer = newStyled(Container$V)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n  padding: 2px 2px;\n  gap: 3px;\n"], ["\n  padding: 2px 2px;\n  gap: 3px;\n"])));
 var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 700;\n  line-height: 14px; /* 116.667% */\n"], ["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 700;\n  line-height: 14px; /* 116.667% */\n"])));
 var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 500;\n  line-height: 14px; /* 116.667% */\n"], ["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 500;\n  line-height: 14px; /* 116.667% */\n"])));
-var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n  font-size: 10px;\n"], ["\n  font-size: 10px;\n"])));
+var MobileDollarPart = newStyled(DollarPart)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n  font-size: 10px;\n"], ["\n  font-size: 10px;\n"])));
 var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n  font-size: 10px;\n"], ["\n  font-size: 10px;\n"])));
 var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
 var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
@@ -6022,7 +6037,7 @@ var ClubPriceLabel = function (_a) {
     var isMobile = useWindowDimensions().isMobile;
     return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$V, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
 };
-var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$n, templateObject_6$j, templateObject_7$d, templateObject_8$a;
+var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$o, templateObject_6$j, templateObject_7$d, templateObject_8$a;
 
 var Spacing = function (_a) {
     var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
@@ -6155,7 +6170,8 @@ var templateObject_1$1i;
 var RegularPriceTagSpan = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n  background-color: #e5e5e5;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: #5a5a5a;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"], ["\n  background-color: #e5e5e5;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: #5a5a5a;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"])));
 var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n  background-color: #c64844;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"], ["\n  background-color: #c64844;\n  padding: 3px 4px;\n  border-radius: 4px;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 0.6rem;\n  line-height: 1rem;\n  text-align: center;\n  margin-bottom: 0.5rem;\n"])));
 var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var PriceWithTagContainer = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n  display: flex;\n  gap: 5px;\n"], ["\n  display: flex;\n  gap: 5px;\n"])));
+var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var PriceWithTagContainer = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
 var RegularPriceTag = function () {
     return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
 };
@@ -6204,11 +6220,11 @@ var PriceLabelV4 = function (_a) {
                 : ComponentSize.XSmall;
         return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
     };
-    return (jsxs$1(Container$10, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
-                                        ? finalPriceArray[0]
-                                        : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
+    return (jsxs$1(Container$10, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
+                                                ? finalPriceArray[0]
+                                                : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
 };
-var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y;
+var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$n;
 
 var ImageContainer$4 = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;