@trafilea/afrodita-components 6.8.20 → 6.9.0

package/build/index.d.ts

@@ -2880,8 +2880,9 @@ interface RadioProps {
     disabled?: boolean;
     onChange: (option: RadioGroupOption) => void;
     style?: React__default.CSSProperties;
+    useV2Style?: boolean;
 }
-declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, useV2Style, }: RadioProps) => JSX.Element;
 
 interface StarListProps {
     rating: number;

package/build/index.esm.js

@@ -4104,7 +4104,7 @@ var TAGS = {
     hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
     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([""], [""]))),
+    display1: newStyled.h1(templateObject_4$J || (templateObject_4$J = __makeTemplateObject([""], [""]))),
     display2: newStyled.h2(templateObject_5$u || (templateObject_5$u = __makeTemplateObject([""], [""]))),
     display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
     heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
@@ -4237,12 +4237,12 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$e, templateObject_9$7, templateObject_10$6, 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$J, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$e, templateObject_9$7, templateObject_10$6, 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$1a = 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$5 = 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 Label$5 = newStyled.div(templateObject_4$I || (templateObject_4$I = __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$t || (templateObject_5$t = __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$o || (templateObject_6$o = __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) {
@@ -4269,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$t, templateObject_6$o;
+var templateObject_1$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$I, templateObject_5$t, templateObject_6$o;
 
 var Container$19 = 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"])));
@@ -5028,16 +5028,23 @@ var StyledLabel$3 = newStyled(Label$4)(templateObject_3$V || (templateObject_3$V
     var theme = _a.theme;
     return theme.component.radio.lineHeight;
 });
+var StyledLabelV2 = newStyled(Label$4)(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 600 !important;\n  line-height: ", " !important;\n"], ["\n  font-size: ", ";\n  font-weight: 600 !important;\n  line-height: ", " !important;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.radio.textSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.component.radio.lineHeight;
+});
 var RadioInput = function (_a) {
-    var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
+    var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e;
     var theme = useTheme();
     var handleChange = function (event, label) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$14, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
+    return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$14, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
 };
-var templateObject_1$1J, templateObject_2$18, templateObject_3$V;
+var templateObject_1$1J, templateObject_2$18, templateObject_3$V, templateObject_4$H;
 
 var getWrapperFlexDirection = function (position) {
     switch (position) {
@@ -5246,6 +5253,7 @@ var Tooltip = function (_a) {
 
 var colorsMapper = function (colors) { return ({
     TheSpaDr: colors.pallete.primary.color,
+    Shapermint: colors.shades['700'].color,
 }); };
 var benefitsColorMapper = function (_a) {
     var _b;