@trafilea/afrodita-components 5.0.0-beta.291 → 5.0.0-beta.293

package/build/index.esm.js/src/components/progress-bar/ProgressBar.js

@@ -0,0 +1,66 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var P = newStyled.p(function (_a) {
+    var color = _a.color;
+    return ({
+        textAlign: 'center',
+        fontWeight: 400,
+        fontStyle: 'normal',
+        fontSize: '0.875rem',
+        lineHeight: '1.375rem',
+        color: color,
+        margin: '0.938rem 4.188rem',
+    });
+});
+var Bar = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height || '0.5rem';
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? getBarWithBasedOnPercent(percent) : '50%');
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || '0.25rem';
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? '0' : '-50%');
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
+});
+var Background = newStyled.div(function (_a) {
+    var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
+    return ({
+        height: height || '0.5rem',
+        width: '100%',
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius || '0.25rem',
+        position: 'absolute',
+    });
+});
+var Container = newStyled.div(function (_a) {
+    var widthAuto = _a.widthAuto, description = _a.description;
+    return ({
+        width: widthAuto ? 'auto' : 'fit-content',
+        position: 'relative',
+        overflow: description ? 'hidden' : '',
+    });
+});
+var getBarWithBasedOnPercent = function (percent) {
+    return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
+};
+var ProgressBar = function (_a) {
+    var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
+    var theme = useTheme();
+    return (jsxs(Container, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx(Background, __assign({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx(P, __assign({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
+};
+var templateObject_1;
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/build/index.esm.js/src/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/quantityPicker/QuantityPicker.js

@@ -0,0 +1,38 @@
+import { __makeTemplateObject, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import newStyled from '../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import { useTheme } from '../../core/theme/Theme.js';
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"], ["\n  padding: 0.625rem 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  max-width: 3.75rem;\n\n  * {\n    color: ", ";\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
+var Item = newStyled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  padding: 0;\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  padding: 0;\n"])));
+var Number = newStyled(Item)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"], ["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"])));
+var IncreaseDecrease = newStyled(Item)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n  color: ", ";\n"], ["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n  color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
+var QuantityPicker = function (_a) {
+    var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
+    var theme = useTheme();
+    var _e = useState(value !== null && value !== void 0 ? value : initialValue), internal = _e[0], setInternal = _e[1];
+    useEffect(function () {
+        if (onChange) {
+            onChange(internal);
+        }
+    }, [onChange, internal]);
+    var clamp = useCallback(function (value) {
+        // Math.max guards against numbers less than `initialValue`
+        // Math.min guards against numbers greater than `maxValue`
+        return Math.max(Math.min(value, maxValue), initialValue);
+    }, [maxValue, initialValue]);
+    useEffect(function () {
+        setInternal(function (internal) {
+            if (value == null) {
+                return internal;
+            }
+            return clamp(value);
+        });
+    }, [value, clamp]);
+    return (jsxs(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx(IncreaseDecrease, __assign({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx(Number, { children: internal }, void 0), jsx(IncreaseDecrease, __assign({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { QuantityPicker };
+//# sourceMappingURL=QuantityPicker.js.map

package/build/index.esm.js/src/components/quantityPicker/QuantityPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityPicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/radio/RadioPrimary/radioPrimary.js

@@ -0,0 +1,124 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import '../../shared/card/Card.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+import { ComponentSize } from '../../../types/enums.js';
+import '../../dropdown/variants/simple/SimpleDropdown.js';
+import '../../dropdown/variants/dialog/DropdownDialog.js';
+import '../../size/selector/SizeSelector.js';
+import '../../size/guide/SizeFitGuide.js';
+import '../../pricing/discount/DiscountTag.js';
+import '../../pricing/price/PriceLabel.js';
+import '../../pricing/priceLabelV2/PriceLabelV2.js';
+import '../../pricing/clubOffer/ClubOfferTag.js';
+import '../../color/ColorRadioGroup.js';
+import '../../color/selector/PatternSelector.js';
+import 'react';
+import '../../gallery/ProductGallery.js';
+import '../../rating/Rating.js';
+import '../../fit/FitPredictor.js';
+import '../../progress-bar/ProgressBar.js';
+import '../../motivator-progress-bar/MotivatorProgressBar.js';
+import '../../icon-button/IconButton.js';
+import '../../tooltip/Styled.js';
+import '../../accordion/Accordion.js';
+import '../../checkbox/Checkbox.js';
+import '../input/radio.js';
+import '../clubRadioInput/clubRadio.js';
+import '../../bundle/minimalistic/Minimalistic.js';
+import '../../bundle/simple/Simple.js';
+import '../../tag/Tag.js';
+import '../../input/label/Label.js';
+import '../../../utils/media.js';
+import '../../input/base/Error.js';
+import '../../input/base/Styled.js';
+import '../../input/custom/Custom.js';
+import '../../input/basePlusButton/BasePlusButton.js';
+import '../../input/basePlusIcon/BasePlusIcon.js';
+import '../../payment-methods/PaymentMethod.js';
+import '../../offer-banner/OfferBanner.js';
+import '../../totals/total/Total.js';
+import '../../totals/subtotal/Subtotal.js';
+import '../../delivery-details/DeliveryDetails.js';
+import '../../scroll-to-top/ScrollToTop.js';
+import '../../order-bar/OrderBar.js';
+import '../../size-table/SizeTable.js';
+import '../../size-chart/SizeChart.js';
+import '../../product/order/item/SimpleOrderItem.js';
+import '../../review/Review.js';
+import '../../slider/ArrowButton.js';
+import '../../slider/StyledSlider.js';
+import '../../dropdown-list-icons/Styled.js';
+import '../../shared/image/Image.js';
+import '../../icon-button/amazonAndPaypal/AmazonPaypalButtons.js';
+import '../../cross-sell/Checkbox/CrossSellCheckbox.js';
+import '../../collection/product/mobile/ProductItemMobile.js';
+import '../../collection/grid/WithProductGrid.js';
+import '../../rating/starList/StarList.js';
+import '../../drawer/Drawer.js';
+import '../../spinner/Spinner.js';
+import '../../filtering/Tags/Tags.js';
+import '../../dropdown/base/BaseDropdown.js';
+import '../../pagination/styles.js';
+import '../../text/Text.js';
+import '../../search-bar/SearchBar.js';
+import '../../mobile/gallery/ProductGalleryMobile.js';
+import 'react-dom';
+import '../../modal/Modal.js';
+import '../../cartProductItem/Title/Title.js';
+import '../../cartProductItem/Promo/Promo.js';
+import '../../cartProductItem/Description/Description.js';
+import '../../cartProductItem/CloseIcon/CloseButton.js';
+import '../../quantityPicker/QuantityPicker.js';
+import '../../packs/selector/PackSelector.js';
+import '../../PackSelectorV2/PackSelectoV2.js';
+import '../../filtering/Accordion.js';
+import '../../filtering/FiltersStyled.js';
+import '../../search-navigation/SearchNavigation.js';
+import '../../tabs/Tabs.js';
+import '../../tabs/Tab.js';
+import '../../iconsWithTitle/index.js';
+import '../../delivery-details/Note/Note.js';
+import '../../textWithImage/index.js';
+import '../../accordion-options/AccordionOptions.js';
+import '../../short-banner/ShortBanner.js';
+import '../../before-after/BeforeAfter.js';
+import '../../image-card/ImageCard.js';
+import '../../tracking-progress/TrackingProgress.js';
+import '../../tracking-progress-v2/TrackingProgressV2.js';
+import '../../reviews-header/ReviewsHeader.js';
+import '../../review-detail/ReviewDetail.js';
+import '../../mobile/gallery/ProductGalleryMobileV2/ProductGalleryMobileV2.js';
+import '../../absorbency-level/AbsorbencyLevel.js';
+import '../../HurryUp/HurryUp.js';
+import '../../buynowpaylater/BuyNowPayLater.js';
+import '../../strength-bars/StrengthBars.js';
+import '../../dropdown/size-dropdown/Styled.js';
+import Label from '../../shared/label/label.js';
+import { ContainerStyles, CustomRadioStyles } from './styles.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
+var Input = newStyled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  cursor: ", ";\n  height: 100%;\n  width: 100%;\n  margin: 0;\n"], ["\n  position: absolute;\n  opacity: 0;\n  cursor: ", ";\n  height: 100%;\n  width: 100%;\n  margin: 0;\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+});
+var CustomRadio = newStyled.div(function (props) { return [
+    CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
+    CustomRadioStyles[props.size](props.theme, props.isChecked),
+]; });
+var StyledLabel = newStyled(Label)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 22px;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 22px;\n"])));
+var RadioPrimary = 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 theme = useTheme();
+    var handleChange = function (event, label) {
+        var value = event.currentTarget.value;
+        onChange({ value: value, label: label });
+    };
+    return (jsxs(Wrapper, { children: [jsxs(Container, __assign({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx(Input, { 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(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx(StyledLabel, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { RadioPrimary };
+//# sourceMappingURL=radioPrimary.js.map

package/build/index.esm.js/src/components/radio/RadioPrimary/radioPrimary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioPrimary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/radio/RadioPrimary/styles.js

@@ -0,0 +1,71 @@
+import { css } from '../../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+
+/* base styles & size variants */
+var CustomRadioStyles = {
+    baseStyles: function (theme, disabled, active) {
+        return css({
+            borderRadius: '50%',
+            height: '100%',
+            width: '100%',
+            boxSizing: 'border-box',
+            borderStyle: 'solid',
+            background: theme.component.radio.background,
+            borderColor: disabled
+                ? theme.colors.border.disabled
+                : active
+                    ? theme.colors.pallete.primary.color
+                    : theme.colors.shades[400].color,
+        });
+    },
+    small: function (theme, active) {
+        return css({
+            borderWidth: active
+                ? theme.component.radio.size.small.active.borderWidth
+                : theme.component.radio.size.small.borderWidth,
+        });
+    },
+    medium: function (theme, active) {
+        return css({
+            borderWidth: active
+                ? theme.component.radio.size.medium.active.borderWidth
+                : theme.component.radio.size.medium.borderWidth,
+        });
+    },
+    large: function (theme, active) {
+        return css({
+            borderWidth: active
+                ? theme.component.radio.size.large.active.borderWidth
+                : theme.component.radio.size.large.borderWidth,
+        });
+    },
+};
+/* base styles & size variants */
+var ContainerStyles = {
+    baseStyles: css({
+        position: 'relative',
+    }),
+    small: function (theme) {
+        return css({
+            height: theme.component.radio.size.small.height,
+            width: theme.component.radio.size.small.height,
+            marginRight: theme.component.radio.size.small.margin,
+        });
+    },
+    medium: function (theme) {
+        return css({
+            height: theme.component.radio.size.medium.height,
+            width: theme.component.radio.size.medium.height,
+            marginRight: theme.component.radio.size.medium.margin,
+        });
+    },
+    large: function (theme) {
+        return css({
+            height: theme.component.radio.size.large.height,
+            width: theme.component.radio.size.large.height,
+            marginRight: theme.component.radio.size.large.margin,
+        });
+    },
+};
+
+export { ContainerStyles, CustomRadioStyles };
+//# sourceMappingURL=styles.js.map

package/build/index.esm.js/src/components/radio/RadioPrimary/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/radio/clubContainer/clubGroup.js

@@ -0,0 +1,20 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { ComponentSize } from '../../../types/enums.js';
+import { ClubRadioInput } from '../clubRadioInput/clubRadio.js';
+
+var ClubRadioGroupInput = function (_a) {
+    var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var _e = useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
+    var handleChange = function (selected) {
+        setSelectedInput(selected);
+        onChange(selected);
+    };
+    return (jsx("div", __assign({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
+            return (jsx(ClubRadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
+        }) }), void 0));
+};
+
+export { ClubRadioGroupInput };
+//# sourceMappingURL=clubGroup.js.map

package/build/index.esm.js/src/components/radio/clubContainer/clubGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clubGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/radio/clubRadioInput/clubRadio.js

@@ -0,0 +1,130 @@
+import { __makeTemplateObject, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import newStyled from '../../../../node_modules/@emotion/styled/dist/emotion-styled.esm.js';
+import '../../shared/card/Card.js';
+import { useTheme } from '../../../core/theme/Theme.js';
+import { ComponentSize } from '../../../types/enums.js';
+import '../../dropdown/variants/simple/SimpleDropdown.js';
+import '../../dropdown/variants/dialog/DropdownDialog.js';
+import '../../size/selector/SizeSelector.js';
+import '../../size/guide/SizeFitGuide.js';
+import '../../pricing/discount/DiscountTag.js';
+import '../../pricing/price/PriceLabel.js';
+import '../../pricing/priceLabelV2/PriceLabelV2.js';
+import '../../pricing/clubOffer/ClubOfferTag.js';
+import '../../color/ColorRadioGroup.js';
+import '../../color/selector/PatternSelector.js';
+import 'react';
+import '../../gallery/ProductGallery.js';
+import '../../rating/Rating.js';
+import '../../fit/FitPredictor.js';
+import '../../progress-bar/ProgressBar.js';
+import '../../motivator-progress-bar/MotivatorProgressBar.js';
+import '../../icon-button/IconButton.js';
+import '../../tooltip/Styled.js';
+import '../../accordion/Accordion.js';
+import '../../checkbox/Checkbox.js';
+import '../RadioPrimary/radioPrimary.js';
+import '../input/radio.js';
+import '../../bundle/minimalistic/Minimalistic.js';
+import '../../bundle/simple/Simple.js';
+import '../../tag/Tag.js';
+import '../../input/label/Label.js';
+import '../../../utils/media.js';
+import '../../input/base/Error.js';
+import '../../input/base/Styled.js';
+import '../../input/custom/Custom.js';
+import '../../input/basePlusButton/BasePlusButton.js';
+import '../../input/basePlusIcon/BasePlusIcon.js';
+import '../../payment-methods/PaymentMethod.js';
+import '../../offer-banner/OfferBanner.js';
+import '../../totals/total/Total.js';
+import '../../totals/subtotal/Subtotal.js';
+import '../../delivery-details/DeliveryDetails.js';
+import '../../scroll-to-top/ScrollToTop.js';
+import '../../order-bar/OrderBar.js';
+import '../../size-table/SizeTable.js';
+import '../../size-chart/SizeChart.js';
+import '../../product/order/item/SimpleOrderItem.js';
+import '../../review/Review.js';
+import '../../slider/ArrowButton.js';
+import '../../slider/StyledSlider.js';
+import '../../dropdown-list-icons/Styled.js';
+import '../../shared/image/Image.js';
+import '../../icon-button/amazonAndPaypal/AmazonPaypalButtons.js';
+import '../../cross-sell/Checkbox/CrossSellCheckbox.js';
+import '../../collection/product/mobile/ProductItemMobile.js';
+import '../../collection/grid/WithProductGrid.js';
+import '../../rating/starList/StarList.js';
+import '../../drawer/Drawer.js';
+import '../../spinner/Spinner.js';
+import '../../filtering/Tags/Tags.js';
+import '../../dropdown/base/BaseDropdown.js';
+import '../../pagination/styles.js';
+import '../../text/Text.js';
+import '../../search-bar/SearchBar.js';
+import '../../mobile/gallery/ProductGalleryMobile.js';
+import 'react-dom';
+import '../../modal/Modal.js';
+import '../../cartProductItem/Title/Title.js';
+import '../../cartProductItem/Promo/Promo.js';
+import '../../cartProductItem/Description/Description.js';
+import '../../cartProductItem/CloseIcon/CloseButton.js';
+import '../../quantityPicker/QuantityPicker.js';
+import '../../packs/selector/PackSelector.js';
+import '../../PackSelectorV2/PackSelectoV2.js';
+import '../../filtering/Accordion.js';
+import '../../filtering/FiltersStyled.js';
+import '../../search-navigation/SearchNavigation.js';
+import '../../tabs/Tabs.js';
+import '../../tabs/Tab.js';
+import '../../iconsWithTitle/index.js';
+import '../../delivery-details/Note/Note.js';
+import '../../textWithImage/index.js';
+import '../../accordion-options/AccordionOptions.js';
+import '../../short-banner/ShortBanner.js';
+import '../../before-after/BeforeAfter.js';
+import '../../image-card/ImageCard.js';
+import '../../tracking-progress/TrackingProgress.js';
+import '../../tracking-progress-v2/TrackingProgressV2.js';
+import '../../reviews-header/ReviewsHeader.js';
+import '../../review-detail/ReviewDetail.js';
+import '../../mobile/gallery/ProductGalleryMobileV2/ProductGalleryMobileV2.js';
+import '../../absorbency-level/AbsorbencyLevel.js';
+import '../../HurryUp/HurryUp.js';
+import '../../buynowpaylater/BuyNowPayLater.js';
+import '../../strength-bars/StrengthBars.js';
+import '../../dropdown/size-dropdown/Styled.js';
+import Label from '../../shared/label/label.js';
+import { ContainerStyles, CustomRadioStyles } from './styles.js';
+
+var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-bottom: 10px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding-bottom: 10px;\n"])));
+var Container = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
+var Input = newStyled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  cursor: ", ";\n  height: 100%;\n  width: 100%;\n  margin: 0;\n"], ["\n  position: absolute;\n  opacity: 0;\n  cursor: ", ";\n  height: 100%;\n  width: 100%;\n  margin: 0;\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+});
+var CustomRadio = newStyled.div(function (props) { return [
+    CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
+    CustomRadioStyles[props.size](props.theme, props.isChecked),
+]; });
+var StyledLabel = newStyled(Label)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", " !important;\n"], ["\n  font-size: ", ";\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 ClubRadioInput = 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 theme = useTheme();
+    var handleChange = function (event, label) {
+        var value = event.currentTarget.value;
+        onChange({ value: value, label: label });
+    };
+    return (jsxs(Wrapper, { children: [jsxs(Container, __assign({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx(Input, { 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(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx(StyledLabel, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { ClubRadioInput };
+//# sourceMappingURL=clubRadio.js.map

package/build/index.esm.js/src/components/radio/clubRadioInput/clubRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clubRadio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/radio/clubRadioInput/styles.js

@@ -0,0 +1,69 @@
+import { css } from '../../../../node_modules/@emotion/react/dist/emotion-react.esm.js';
+
+/* base styles & size variants */
+var CustomRadioStyles = {
+    baseStyles: function (theme, disabled, isChecked) {
+        return css({
+            borderRadius: '50%',
+            height: '100%',
+            width: '100%',
+            boxSizing: 'border-box',
+            borderStyle: 'solid',
+            background: theme.component.radio.background,
+            borderColor: isChecked
+                ? 'var(--colors-pallete-wine-color)'
+                : theme.component.radio.borderColor,
+        });
+    },
+    small: function (theme, active) {
+        return css({
+            borderWidth: active
+                ? theme.component.radio.size.small.active.borderWidth
+                : theme.component.radio.size.small.borderWidth,
+        });
+    },
+    medium: function (theme, active) {
+        return css({
+            borderWidth: active
+                ? theme.component.radio.size.medium.active.borderWidth
+                : theme.component.radio.size.medium.borderWidth,
+        });
+    },
+    large: function (theme, active) {
+        return css({
+            borderWidth: active
+                ? theme.component.radio.size.large.active.borderWidth
+                : theme.component.radio.size.large.borderWidth,
+        });
+    },
+};
+/* base styles & size variants */
+var ContainerStyles = {
+    baseStyles: css({
+        position: 'relative',
+    }),
+    small: function (theme) {
+        return css({
+            height: theme.component.radio.size.small.height,
+            width: theme.component.radio.size.small.height,
+            marginRight: theme.component.radio.size.small.margin,
+        });
+    },
+    medium: function (theme) {
+        return css({
+            height: theme.component.radio.size.medium.height,
+            width: theme.component.radio.size.medium.height,
+            marginRight: theme.component.radio.size.medium.margin,
+        });
+    },
+    large: function (theme) {
+        return css({
+            height: theme.component.radio.size.large.height,
+            width: theme.component.radio.size.large.height,
+            marginRight: theme.component.radio.size.large.margin,
+        });
+    },
+};
+
+export { ContainerStyles, CustomRadioStyles };
+//# sourceMappingURL=styles.js.map

package/build/index.esm.js/src/components/radio/clubRadioInput/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.esm.js/src/components/radio/container/group.js

@@ -0,0 +1,20 @@
+import { __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { RadioInput } from '../input/radio.js';
+import { ComponentSize } from '../../../types/enums.js';
+
+var RadioGroupInput = function (_a) {
+    var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var _e = useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
+    var handleChange = function (selected) {
+        setSelectedInput(selected);
+        onChange(selected);
+    };
+    return (jsx("div", __assign({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
+            return (jsx(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
+        }) }), void 0));
+};
+
+export { RadioGroupInput };
+//# sourceMappingURL=group.js.map

package/build/index.esm.js/src/components/radio/container/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}