@trafilea/afrodita-components 5.0.0-beta.144 → 5.0.0-beta.146

package/build/index.d.ts

@@ -919,7 +919,7 @@ interface borderProps {
 }
 interface CardProps {
     children: ReactNode;
-    backgroundColor: string;
+    backgroundColor?: string;
     widthAuto?: boolean;
     border?: borderProps;
     flex?: boolean;
@@ -1385,6 +1385,7 @@ declare type ThemeComponent = {
     };
     card: {
         borderRadius: string;
+        backgroundColor: string;
     };
     radio: {
         borderColor: string;
@@ -1663,11 +1664,20 @@ declare type ThemeComponent = {
             price: {
                 size: ComponentSize$1.Small | ComponentSize$1.Medium | ComponentSize$1.Large;
                 originalPriceColor: string;
+                actualPriceColor: string;
             };
         };
     };
     orderSummary: {
         backgroundColor: string;
+        maxWidth?: string;
+        padding?: string;
+        borderRadius?: string;
+        onMobile: {
+            maxWidth?: string;
+            padding?: string;
+            backgroundColor?: string;
+        };
     };
     expressCheckout: {
         fontFamily: string;
@@ -1684,6 +1694,16 @@ declare type ThemeComponent = {
         fontWeight: number;
         lineHeight: string;
     };
+    deliveryDetails: {
+        note: {
+            accentColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    orderHeaderText: {
+        color: string;
+    };
 };
 declare type ThemeTypography = {
     config: {
@@ -2475,9 +2495,9 @@ interface IconList {
 declare const IconsWithTitle: ({ iconName, iconTitle, backgroundColor, iconColor, iconSizeDesktop, iconSizeMobile, iconTitlePosition, iconTitleStyle, iconStyle, isTitleInnerHtml, }: IconList) => JSX.Element | null;
 
 interface NoteProps {
-    accentColor: string;
-    color: string;
-    backgroundColor: string;
+    accentColor?: string;
+    color?: string;
+    backgroundColor?: string;
     importantNoteText: string;
     text: string;
 }

package/build/index.esm.js

@@ -4186,13 +4186,15 @@ var Container$R = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __
 }, function (_a) {
     var widthAuto = _a.widthAuto;
     return (widthAuto ? 'auto' : 'fit-content');
-}, function (props) { return props.backgroundColor; }, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
+}, function (props) {
+    return props.backgroundColor ? props.backgroundColor : props.theme.component.card.backgroundColor;
+}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
     return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
 });
 var Card$1 = function (_a) {
     var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
     var theme = useTheme();
-    return (jsx$1(Container$R, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
+    return (jsx$1(Container$R, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
 };
 var Card$2 = Object.assign(Card$1, {
     Header: CardHeader,
@@ -4739,7 +4741,7 @@ var SelectorSecondary = function (_a) {
             border: theme.component.selector.default.border,
             fontWeight: theme.component.selector.default.fontWeight,
         };
-    if (!active && showNoStockStyles) {
+    if (showNoStockStyles) {
         stylesByActive = {
             background: theme.component.selector.noStock.background,
             color: theme.component.selector.noStock.color,
@@ -5109,7 +5111,7 @@ var PriceLabel = function (_a) {
         weight: 700,
     };
     var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
-    return (jsxs$1(Container$N, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, 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$N, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { color: theme.component.pricing.priceLabel.price.actualPriceColor, style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, 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$1b, templateObject_2$M, templateObject_3$B;
 
@@ -12347,7 +12349,8 @@ var Text$4 = newStyled.p(templateObject_3$q || (templateObject_3$q = __makeTempl
 var Details = newStyled.span(templateObject_4$i || (templateObject_4$i = __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;
-    return (jsxs$1(Container$u, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
+    var theme = useTheme();
+    return (jsxs$1(Container$u, __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$4, __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$J, templateObject_2$u, templateObject_3$q, templateObject_4$i;