@trafilea/afrodita-components 5.0.0-beta.264 → 5.0.0-beta.267

package/build/index.d.ts

@@ -1915,6 +1915,14 @@ declare type ThemeComponent = {
     divider: {
         color: string;
     };
+    checkout: {
+        paymentInformation: {
+            borderRadius?: string;
+        };
+        creditCardSection: {
+            borderRadius?: string;
+        };
+    };
     upsell: {
         banner: {
             outlined: {
@@ -1932,6 +1940,11 @@ declare type ThemeComponent = {
         };
     };
     thankyou: {
+        orderBanner?: {
+            text: {
+                left: string;
+            };
+        };
         emailSection: {
             backgroundColor?: string;
         };

package/build/index.esm.js

@@ -4957,7 +4957,7 @@ var TAGS = {
     hero3: newStyled.h3(templateObject_3$O || (templateObject_3$O = __makeTemplateObject([""], [""]))),
     display1: newStyled.h1(templateObject_4$y || (templateObject_4$y = __makeTemplateObject([""], [""]))),
     display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
-    heading1: newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject([""], [""]))),
+    heading1: newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject([""], [""]))),
     heading2: newStyled.h2(templateObject_7$c || (templateObject_7$c = __makeTemplateObject([""], [""]))),
     heading3: newStyled.h3(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject([""], [""]))),
     heading4: newStyled.h4(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject([""], [""]))),
@@ -5084,7 +5084,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1v, templateObject_2$_, templateObject_3$O, templateObject_4$y, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1;
+var templateObject_1$1v, templateObject_2$_, templateObject_3$O, templateObject_4$y, templateObject_5$l, templateObject_6$j, templateObject_7$c, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1;
 
 var ButtonsContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
     var inline = _a.inline;
@@ -11648,7 +11648,7 @@ var TopTagContainer$3 = newStyled.div(templateObject_2$S || (templateObject_2$S
 var BottomTagContainer$3 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"], ["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"])));
 var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"])));
-var VideoTag$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
+var VideoTag$1 = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
 var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
 var ImageProductWithTags$1 = function (_a) {
     var _b, _c;
@@ -11658,7 +11658,7 @@ var ImageProductWithTags$1 = function (_a) {
                             style: { objectFit: 'cover', objectPosition: 'center' },
                         }, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
 };
-var templateObject_1$1i, templateObject_2$S, templateObject_3$I, templateObject_4$v, templateObject_5$j, templateObject_6$h, templateObject_7$b;
+var templateObject_1$1i, templateObject_2$S, templateObject_3$I, templateObject_4$v, templateObject_5$j, templateObject_6$i, templateObject_7$b;
 
 var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
@@ -12152,12 +12152,12 @@ var TooltipText = newStyled.div(templateObject_4$u || (templateObject_4$u = __ma
     return color;
 });
 var TopSection = newStyled.div(templateObject_5$i || (templateObject_5$i = __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$g || (templateObject_6$g = __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 Title$7 = newStyled.h1(templateObject_6$h || (templateObject_6$h = __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$a || (templateObject_7$a = __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 templateObject_1$1a, templateObject_2$Q, templateObject_3$H, templateObject_4$u, templateObject_5$i, templateObject_6$g, templateObject_7$a;
+var templateObject_1$1a, templateObject_2$Q, templateObject_3$H, templateObject_4$u, templateObject_5$i, templateObject_6$h, templateObject_7$a;
 
 var Tooltip = function (_a) {
     var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
@@ -12787,8 +12787,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$h || (templateObject_5
     var theme = _a.theme;
     return theme.component.input.lineHeight;
 });
-var ClearInput = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"], ["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"])));
-var templateObject_1$11, templateObject_2$J, templateObject_3$C, templateObject_4$s, templateObject_5$h, templateObject_6$f;
+var ClearInput = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"], ["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"])));
+var templateObject_1$11, templateObject_2$J, templateObject_3$C, templateObject_4$s, templateObject_5$h, templateObject_6$g;
 
 var BaseInput = function (_a) {
     var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
@@ -12962,7 +12962,7 @@ var DiscountText = newStyled.h3(templateObject_5$g || (templateObject_5$g = __ma
     var theme = _a.theme;
     return theme.component.total.basicTotal.savings.textLineHeight;
 });
-var DiscountAmount = newStyled.h3(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+var DiscountAmount = newStyled.h3(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.total.basicTotal.savings.amountFontSize;
 }, function (_a) {
@@ -12977,7 +12977,7 @@ var Total = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$F, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
 };
-var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$r, templateObject_5$g, templateObject_6$e;
+var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$r, templateObject_5$g, templateObject_6$f;
 
 var Wrapper$1 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
@@ -13011,14 +13011,14 @@ var Totals = {
     Subtotal: Subtotal,
 };
 
-var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
+var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
 var IconContainer$3 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
 var Text$5 = newStyled.p(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
 var Details = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
 var Note = function (_a) {
     var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
     var theme = useTheme();
-    return (jsxs$1(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
+    return (jsxs$1(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
 };
 var templateObject_1$U, templateObject_2$D, templateObject_3$y, templateObject_4$p;
 
@@ -13042,7 +13042,7 @@ var IconContainer$2 = newStyled.div(templateObject_5$f || (templateObject_5$f =
     marginBottom: ['10px', '0'],
     width: ['auto', '1.375rem'],
 }));
-var SectionTitle = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"], ["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"])), mediaQueries({
+var SectionTitle = newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"], ["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"])), mediaQueries({
     display: ['block', 'flex'],
 }), function (_a) {
     var theme = _a.theme;
@@ -13059,13 +13059,13 @@ var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __m
         })
         : '';
 });
-var KeepMeUpdated = newStyled.h1(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), function (props) { return props.borderColor; });
+var KeepMeUpdated = newStyled.h1(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.45rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  border: 0.063rem solid ", ";\n  color: #0078ff;\n  border-radius: 0.313rem;\n  padding: 0.45rem;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 600;\n  margin: 0;\n  margin-top: 0.625rem;\n  display: flex;\n  align-items: center;\n  background-color: #fff;\n  user-select: none;\n\n  svg {\n    margin-right: 0.375rem;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), function (props) { return props.borderColor; });
 var DeliveryDetails = function (_a) {
     var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
     var theme = useTheme();
-    return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
+    return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.375 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.375 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.375 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$T, templateObject_2$C, templateObject_3$x, templateObject_4$o, templateObject_5$f, templateObject_6$d, templateObject_7$9, templateObject_8$6;
+var templateObject_1$T, templateObject_2$C, templateObject_3$x, templateObject_4$o, templateObject_5$f, templateObject_6$e, templateObject_7$9, templateObject_8$6;
 
 var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
 var Text$4 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"])), function (props) { return props.color; });
@@ -13178,13 +13178,14 @@ var PriceContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = _
         })
         : 'justify-content: end';
 });
-var Quantity = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1.4rem;\n  height: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-450-color);\n  color: var(--colors-shades-450-contrast);\n  font-size: 0.8rem;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1.4rem;\n  height: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-450-color);\n  color: var(--colors-shades-450-contrast);\n  font-size: 0.8rem;\n"])));
+var Quantity = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-300-color);\n  color: var(--colors-shades-450-contrast);\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 24px;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(30%, -30%);\n  border-radius: 50%;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--colors-shades-300-color);\n  color: var(--colors-shades-450-contrast);\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 24px;\n"])));
+var StyledSpan = newStyled.span(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  display: block;\n  transform: translateY(1px);\n"], ["\n  display: block;\n  transform: translateY(1px);\n"])));
 var SimpleOrderItem = function (_a) {
     var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
     var theme = useTheme();
-    return (jsxs$1(Container$B, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Container$B, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e;
+var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e, templateObject_6$d;
 
 function formatDate(date) {
     var day = date.getDate();