@trafilea/afrodita-components 6.5.3 → 6.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/index.d.ts +4 -3
  2. package/build/index.esm.js +28 -32
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +28 -32
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.js CHANGED
@@ -5480,31 +5480,26 @@ var templateObject_1$1A, templateObject_2$10, templateObject_3$Q;
5480
5480
  var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5481
5481
  var PriceLabelV2 = function (_a) {
5482
5482
  var _b;
5483
- var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, hasPricePerItem = _a.hasPricePerItem, _h = _a.quantity, quantity = _h === void 0 ? 0 : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "hasPricePerItem", "quantity"]);
5483
+ var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
5484
5484
  var theme = useTheme();
5485
- var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
5485
+ var productFinalPrice = pricePerItem ? pricePerItem : finalPrice;
5486
+ var isDiffFinalAndOriginalPrice = originalPrice !== productFinalPrice;
5486
5487
  var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
5487
5488
  var isDiscount = discount && isDiffFinalAndOriginalPrice;
5488
5489
  var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
5489
5490
  var supportedCurrencies = ['A$', 'CA$', '£'];
5490
5491
  var currencySymbol = '$';
5491
- if (typeof finalPrice === 'string') {
5492
+ if (typeof productFinalPrice === 'string') {
5492
5493
  supportedCurrencies.forEach(function (availableCurrency) {
5493
- if (finalPrice.includes(availableCurrency)) {
5494
+ if (productFinalPrice.includes(availableCurrency)) {
5494
5495
  currencySymbol = availableCurrency;
5495
5496
  }
5496
5497
  });
5497
5498
  }
5498
- var priceSymbolRemoved = typeof finalPrice === 'string' && finalPrice.includes(currencySymbol)
5499
- ? finalPrice.split(currencySymbol)[1]
5500
- : finalPrice;
5501
- var finalPricePerQuantity = hasPricePerItem
5502
- ? "".concat(currencySymbol).concat((Number(priceSymbolRemoved) / quantity).toFixed(2))
5503
- : finalPrice;
5504
- var finalPriceArray = typeof finalPricePerQuantity === 'string' &&
5505
- finalPricePerQuantity.includes('.') &&
5506
- finalPricePerQuantity.includes(currencySymbol)
5507
- ? finalPricePerQuantity.split(currencySymbol)[1].split('.')
5499
+ var finalPriceArray = typeof productFinalPrice === 'string' &&
5500
+ productFinalPrice.includes('.') &&
5501
+ productFinalPrice.includes(currencySymbol)
5502
+ ? productFinalPrice.split(currencySymbol)[1].split('.')
5508
5503
  : ['', ''];
5509
5504
  var priceCommonProps = {
5510
5505
  size: exports.ComponentSize.Small,
@@ -5514,13 +5509,13 @@ var PriceLabelV2 = function (_a) {
5514
5509
  weight: 700,
5515
5510
  };
5516
5511
  var originalPriceNum, finalPriceNum;
5517
- if (typeof originalPrice === 'string' && typeof finalPrice === 'string') {
5512
+ if (typeof originalPrice === 'string' && typeof productFinalPrice === 'string') {
5518
5513
  originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
5519
- finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
5514
+ finalPriceNum = Number(productFinalPrice.replace(currencySymbol, ''));
5520
5515
  }
5521
5516
  else {
5522
5517
  originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
5523
- finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
5518
+ finalPriceNum = typeof productFinalPrice === 'number' ? productFinalPrice : 0;
5524
5519
  }
5525
5520
  var saveto = originalPriceNum - finalPriceNum;
5526
5521
  var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
@@ -5535,9 +5530,11 @@ var PriceLabelV2 = function (_a) {
5535
5530
  theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
5536
5531
  return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
5537
5532
  marginTop: '-5px',
5538
- } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
5533
+ } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
5534
+ ? finalPriceArray[0]
5535
+ : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
5539
5536
  marginTop: '-6px',
5540
- } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), hasPricePerItem && (jsxRuntime.jsx(Price, __assign$1({ size: exports.ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
5537
+ } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsxRuntime.jsx(Price, __assign$1({ size: exports.ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
5541
5538
  letterSpacing: '-0.05rem',
5542
5539
  }, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
5543
5540
  borderRadius: '8px',
@@ -5556,7 +5553,7 @@ var ContainerDirectionColumn = newStyled.div(templateObject_2$$ || (templateObje
5556
5553
  var DiscountEachOneContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
5557
5554
  var PriceLabelV3 = function (_a) {
5558
5555
  var _b;
5559
- var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity"]);
5556
+ var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
5560
5557
  var theme = useTheme();
5561
5558
  var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
5562
5559
  var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
@@ -5604,17 +5601,15 @@ var PriceLabelV3 = function (_a) {
5604
5601
  var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
5605
5602
  theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
5606
5603
  var DiscountedPriceOfEach = function () {
5607
- var priceEachOne;
5608
5604
  if (!itemsQuantity || itemsQuantity < 2)
5609
5605
  return null;
5610
- priceEachOne = (finalPriceNum / itemsQuantity).toFixed(2);
5611
- return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", currencySymbol, priceEachOne] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
5606
+ return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
5612
5607
  };
5613
5608
  return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$Z, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
5614
5609
  marginTop: '-5px',
5615
5610
  } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
5616
5611
  marginTop: '-6px',
5617
- } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), itemsQuantity ? jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0) : null, isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
5612
+ } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
5618
5613
  letterSpacing: '-0.05rem',
5619
5614
  }, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
5620
5615
  borderRadius: '8px',
@@ -6366,10 +6361,10 @@ var Collection = {
6366
6361
  };
6367
6362
 
6368
6363
  var OneColorSelector = function (_a) {
6369
- var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
6364
+ var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
6370
6365
  var theme = useTheme();
6371
6366
  var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
6372
- return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6367
+ return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? (showCross ? 1 : 0.4) : 1 } }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0), showCross && noStock && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("line", { x1: "12", y1: "12", x2: "20", y2: "20", stroke: "#9E9E9E", strokeWidth: "1" }, void 0), jsxRuntime.jsx("line", { x1: "12", y1: "20", x2: "20", y2: "12", stroke: "#9E9E9E", strokeWidth: "1" }, void 0)] }, void 0))] }), void 0));
6373
6368
  };
6374
6369
 
6375
6370
  var ThreeColorSelector = function (_a) {
@@ -6387,7 +6382,7 @@ var TwoColorSelector = function (_a) {
6387
6382
  };
6388
6383
 
6389
6384
  var ColorSelector = function (_a) {
6390
- var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
6385
+ var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
6391
6386
  var primaryColor = color[0], secondaryColor = color[1], tertiaryColor = color[2];
6392
6387
  if (tertiaryColor) {
6393
6388
  return (jsxRuntime.jsx(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
@@ -6395,7 +6390,7 @@ var ColorSelector = function (_a) {
6395
6390
  if (secondaryColor) {
6396
6391
  return (jsxRuntime.jsx(TwoColorSelector, { secondaryColor: secondaryColor, primaryColor: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
6397
6392
  }
6398
- return (jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
6393
+ return (jsxRuntime.jsx(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock, showCross: showCross }, void 0));
6399
6394
  };
6400
6395
 
6401
6396
  var OutOfStock = function (_a) {
@@ -6480,14 +6475,15 @@ var MultiColorPicker = function (_a) {
6480
6475
  return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions$1(selectedColor, options) }, void 0)] }), void 0));
6481
6476
  };
6482
6477
 
6483
- var renderOptions = function (options) {
6478
+ var renderOptions = function (options, showCross) {
6479
+ if (showCross === void 0) { showCross = false; }
6484
6480
  if (options.length === 0) {
6485
6481
  return jsx(OutOfStock, { title: "out of stock color" }, void 0);
6486
6482
  }
6487
6483
  return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
6488
6484
  var checked = _a.checked;
6489
6485
  if (option.meta.color) {
6490
- return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock }, void 0));
6486
+ return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
6491
6487
  }
6492
6488
  if (option.meta.pattern) {
6493
6489
  return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
@@ -6496,8 +6492,8 @@ var renderOptions = function (options) {
6496
6492
  } }), option.label)); });
6497
6493
  };
6498
6494
  var SingleColorPicker = function (_a) {
6499
- var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
6500
- return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
6495
+ var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
6496
+ return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
6501
6497
  };
6502
6498
 
6503
6499
  var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });