@trafilea/afrodita-components 5.0.0-beta.283 → 5.0.0-beta.285

package/build/index.d.ts

@@ -2022,7 +2022,7 @@ interface CheckboxProps {
     backgroundColor?: string;
     variant: 'primary' | 'secondary' | 'color';
 }
-declare const Checkbox: ({ disabled, onChange, size, text, checked, id, variant, blockUncheck, backgroundColor, }: CheckboxProps) => JSX.Element;
+declare const Checkbox: React.FC<CheckboxProps>;
 
 interface RadioProps$1 {
     name: string;

package/build/index.esm.js

@@ -4773,29 +4773,14 @@ var Input$5 = newStyled.input(templateObject_2$12 || (templateObject_2$12 = __ma
 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 theme = useTheme();
-    var _e = useState(checked), isChecked = _e[0], setIsChecked = _e[1];
-    var mounted = useRef(false);
-    var handleChange = useCallback(function () {
-        if (disabled || (isChecked && blockUncheck)) {
-            return;
-        }
-        setIsChecked(function (checked) { return !checked; });
-    }, [blockUncheck, disabled, isChecked]);
-    useEffect(function () {
-        if (disabled || !mounted.current) {
+    var handleChange = function (e) {
+        if (disabled || (e.target.checked === false && blockUncheck)) {
+            e.preventDefault();
             return;
         }
-        if (checked !== isChecked) {
-            onChange(isChecked);
-        }
-    }, [isChecked, onChange, disabled, checked]);
-    useEffect(function () {
-        setIsChecked(checked);
-    }, [checked]);
-    useEffect(function () {
-        mounted.current = true;
-    }, []);
-    return (jsxs$1(Container$13, { children: [jsx$1(Input$5, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
+        onChange(e.target.checked);
+    };
+    return (jsxs$1(Container$13, { 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$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
 };
 var templateObject_1$1z, templateObject_2$12;
 
@@ -13032,10 +13017,10 @@ var Col$1 = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemp
     textAlign: ['center', 'inherit'],
     width: ['100%', 'inherit'],
 }));
-var IconContainer$2 = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.375rem;\n  ", "\n"], ["\n  width: 1.375rem;\n  height: 1.375rem;\n  ", "\n"])), mediaQueries({
+var IconContainer$2 = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  ", "\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  ", "\n"])), mediaQueries({
     marginRight: ['0', '0.438rem'],
     marginBottom: ['10px', '0'],
-    width: ['auto', '1.375rem'],
+    width: ['auto', '1.5rem'],
 }));
 var SectionTitle = newStyled.h1(templateObject_6$f || (templateObject_6$f = __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'],
@@ -13058,7 +13043,7 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$7 || (templateObject_8$7 = __m
 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['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));
+    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.5 }, 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.5 }, 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.5 }, 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$U, templateObject_2$D, templateObject_3$y, templateObject_4$p, templateObject_5$g, templateObject_6$f, templateObject_7$9, templateObject_8$7;