@trafilea/afrodita-components 6.36.18 → 6.36.20

package/build/index.d.ts

@@ -1525,6 +1525,7 @@ declare type ThemeColors = {
         900: ThemeBasicPallete;
         950: ThemeBasicPallete;
         990: ThemeBasicPallete;
+        1000?: ThemeBasicPallete;
     };
     semantic: {
         positive: ThemeColorPallete;
@@ -2019,6 +2020,7 @@ declare type ThemeComponent = {
         padding?: string;
         borderRadius?: string;
         maxWidth?: string;
+        color?: string;
         onMobile: {
             position?: string;
             maxWidth?: string;
@@ -2315,6 +2317,8 @@ interface CheckboxProps {
     disabled?: boolean;
     onChange: (checked: boolean) => void;
     size?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    sizeLabel?: ComponentSize.Large | ComponentSize.Medium | ComponentSize.Small;
+    colorLabel?: string;
     text: string;
     checked?: boolean;
     blockUncheck?: boolean;

package/build/index.esm.js

@@ -5569,7 +5569,7 @@ var Input$5 = newStyled.input(templateObject_2$1q || (templateObject_2$1q = __ma
     return (disabled ? 'not-allowed' : 'pointer');
 });
 var Checkbox = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, text = _a.text, _d = _a.checked, checked = _d === void 0 ? false : _d, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck, backgroundColor = _a.backgroundColor;
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.sizeLabel, sizeLabel = _d === void 0 ? ComponentSize.Medium : _d, colorLabel = _a.colorLabel, text = _a.text, _e = _a.checked, checked = _e === void 0 ? false : _e, id = _a.id, variant = _a.variant, blockUncheck = _a.blockUncheck, backgroundColor = _a.backgroundColor;
     var theme = useTheme();
     var handleChange = function (e) {
         if (disabled || (e.target.checked === false && blockUncheck)) {
@@ -5578,7 +5578,7 @@ var Checkbox = function (_a) {
         }
         onChange(e.target.checked);
     };
-    return (jsxs$1(Container$1g, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
+    return (jsxs$1(Container$1g, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.pallete.primary['20'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
 var templateObject_1$1X, templateObject_2$1q;
 
@@ -19254,7 +19254,7 @@ var TextButton = function (_a) {
 var templateObject_1$E;
 
 var Container$q = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
-var P = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var P = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: 0 0 0 10px;\n"], ["\n  margin: 0 0 0 10px;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
@@ -19772,7 +19772,10 @@ var TrackingProgress = function (_a) {
 };
 var templateObject_1$r, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b, templateObject_8$8;
 
-var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  padding: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  padding: 10px;\n"])));
+var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  border: ", "\n  border-radius: 8px;\n  padding: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  border: ", "\n  border-radius: 8px;\n  padding: 10px;\n"])), function (_a) {
+    var checked = _a.checked;
+    return (checked ? 'none' : '1px solid #e5e5e5;');
+});
 var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var AutoShipBodyWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  background-color: #f7f7f7;\n"], ["\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  background-color: #f7f7f7;\n"])));
 var AutoShipBodyTitle = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 22px;\n  text-align: left;\n  width: Fill (311px) px;\n  height: Hug (34px) px;\n  padding: 6px 10px 6px 10px;\n  gap: 4px;\n  opacity: 0px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 22px;\n  text-align: left;\n  width: Fill (311px) px;\n  height: Hug (34px) px;\n  padding: 6px 10px 6px 10px;\n  gap: 4px;\n  opacity: 0px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
@@ -19795,7 +19798,7 @@ function AutoshipOfferCard(_a) {
             handleCheckBoxChange(!check);
         }
     };
-    return (jsxs$1(AutoShipCardContainerWrapper, { children: [jsxs$1(AutoShipHeaderBarWrapper, { children: [jsx$1("div", { children: copy }, void 0), check && (jsx$1(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxs$1(Fragment$2, { children: [jsxs$1(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsx$1("div", { children: jsx$1(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }, void 0));
+    return (jsxs$1(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper, { children: [jsx$1("div", { children: copy }, void 0), check && (jsx$1(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxs$1(Fragment$2, { children: [jsxs$1(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsx$1("div", { children: jsx$1(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
 }
 
 var StyledButton = newStyled(Ye.Button)(function (props) { return ({