@trafilea/afrodita-components 2.3.1 → 3.0.0

package/build/index.esm.js

@@ -2607,13 +2607,25 @@ var Question = function (_a) {
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 22, viewBoxY: 22, title: "Question" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22ZM9.75807 15.9678C9.75807 15.2819 10.3141 14.7258 11 14.7258C11.6859 14.7258 12.2419 15.2819 12.2419 15.9678C12.2419 16.6537 11.6859 17.2097 11 17.2097C10.3141 17.2097 9.75807 16.6537 9.75807 15.9678ZM10.6305 13.6613H11.3402C11.6341 13.6613 11.8725 13.423 11.8725 13.1291V13.1122C11.8725 12.2512 12.5546 11.8053 13.3108 11.3109C14.2517 10.6958 15.3073 10.0058 15.3073 8.34809C15.3073 6.10995 13.306 4.79034 10.9854 4.79034C8.99703 4.79034 7.88 5.56717 6.93852 6.77482C6.75157 7.01461 6.80634 7.36288 7.05584 7.53671L7.6384 7.94255C7.86878 8.10307 8.18573 8.05805 8.35907 7.83717C9.022 6.99252 9.69269 6.56454 10.9854 6.56454C12.7453 6.56454 13.5331 7.46028 13.5331 8.34809C13.5331 9.20467 12.865 9.62547 12.1181 10.0959C11.1715 10.6922 10.0983 11.3681 10.0983 13.1122V13.1291C10.0983 13.423 10.3366 13.6613 10.6305 13.6613Z", fill: fill }, void 0) }), void 0));
 };
 
+var Close = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 9, viewBoxY: 8, title: "close" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.2123 0.287701C0.919406 0.580594 0.919406 1.05547 1.2123 1.34836L3.86397 4.00003L1.21233 6.65167C0.919437 6.94456 0.919437 7.41944 1.21233 7.71233C1.50522 8.00522 1.9801 8.00522 2.27299 7.71233L4.92463 5.06069L7.57626 7.71232C7.86915 8.00522 8.34403 8.00522 8.63692 7.71232C8.92981 7.41943 8.92981 6.94456 8.63692 6.65166L5.98529 4.00003L8.63695 1.34837C8.92984 1.05548 8.92984 0.580602 8.63695 0.287709C8.34406 -0.00518426 7.86918 -0.00518393 7.57629 0.287709L4.92463 2.93937L2.27296 0.287701C1.98007 -0.00519271 1.50519 -0.00519269 1.2123 0.287701Z", fill: fill }, void 0) }), void 0));
+};
+
+var Trash = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 20, title: "trash" }, { children: jsx$1("path", { d: "M10.5714 16.875H11.1429C11.2186 16.875 11.2913 16.8421 11.3449 16.7835C11.3985 16.7249 11.4286 16.6454 11.4286 16.5625V5.9375C11.4286 5.85462 11.3985 5.77513 11.3449 5.71653C11.2913 5.65792 11.2186 5.625 11.1429 5.625H10.5714C10.4957 5.625 10.423 5.65792 10.3694 5.71653C10.3158 5.77513 10.2857 5.85462 10.2857 5.9375V16.5625C10.2857 16.6454 10.3158 16.7249 10.3694 16.7835C10.423 16.8421 10.4957 16.875 10.5714 16.875ZM4.85714 16.875H5.42857C5.50435 16.875 5.57702 16.8421 5.6306 16.7835C5.68418 16.7249 5.71429 16.6454 5.71429 16.5625V5.9375C5.71429 5.85462 5.68418 5.77513 5.6306 5.71653C5.57702 5.65792 5.50435 5.625 5.42857 5.625H4.85714C4.78137 5.625 4.70869 5.65792 4.65511 5.71653C4.60153 5.77513 4.57143 5.85462 4.57143 5.9375V16.5625C4.57143 16.6454 4.60153 16.7249 4.65511 16.7835C4.70869 16.8421 4.78137 16.875 4.85714 16.875ZM15.7143 2.5H12L10.8 0.75C10.6403 0.517132 10.4333 0.328126 10.1952 0.197949C9.95719 0.067772 9.69471 0 9.42857 0L6.57143 0C6.30529 0 6.04282 0.067772 5.80478 0.197949C5.56674 0.328126 5.35968 0.517132 5.2 0.75L4 2.5H0.285714C0.209938 2.5 0.137266 2.53292 0.0836838 2.59153C0.030102 2.65013 0 2.72962 0 2.8125L0 3.4375C0 3.52038 0.030102 3.59987 0.0836838 3.65847C0.137266 3.71708 0.209938 3.75 0.285714 3.75H1.14286V18.125C1.14286 18.6223 1.32347 19.0992 1.64496 19.4508C1.96645 19.8025 2.40249 20 2.85714 20H13.1429C13.5975 20 14.0336 19.8025 14.355 19.4508C14.6765 19.0992 14.8571 18.6223 14.8571 18.125V3.75H15.7143C15.7901 3.75 15.8627 3.71708 15.9163 3.65847C15.9699 3.59987 16 3.52038 16 3.4375V2.8125C16 2.72962 15.9699 2.65013 15.9163 2.59153C15.8627 2.53292 15.7901 2.5 15.7143 2.5ZM6.11429 1.5C6.1677 1.4226 6.23676 1.35976 6.31607 1.31639C6.39537 1.27302 6.48277 1.2503 6.57143 1.25H9.42857C9.51723 1.2503 9.60463 1.27302 9.68394 1.31639C9.76324 1.35976 9.8323 1.4226 9.88571 1.5L10.5714 2.5H5.42857L6.11429 1.5ZM13.7143 18.125C13.7143 18.2908 13.6541 18.4497 13.5469 18.5669C13.4398 18.6842 13.2944 18.75 13.1429 18.75H2.85714C2.70559 18.75 2.56025 18.6842 2.45308 18.5669C2.34592 18.4497 2.28571 18.2908 2.28571 18.125V3.75H13.7143V18.125ZM7.71429 16.875H8.28572C8.36149 16.875 8.43416 16.8421 8.48775 16.7835C8.54133 16.7249 8.57143 16.6454 8.57143 16.5625V5.9375C8.57143 5.85462 8.54133 5.77513 8.48775 5.71653C8.43416 5.65792 8.36149 5.625 8.28572 5.625H7.71429C7.63851 5.625 7.56584 5.65792 7.51226 5.71653C7.45867 5.77513 7.42857 5.85462 7.42857 5.9375V16.5625C7.42857 16.6454 7.45867 16.7249 7.51226 16.7835C7.56584 16.8421 7.63851 16.875 7.71429 16.875Z", fill: fill }, void 0) }), void 0));
+};
+
 var Actions = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Check: Check,
     ClearLight: ClearLight,
     LightExclamation: LightExclamation,
     LightCheck: LightCheck,
-    Question: Question
+    Question: Question,
+    Close: Close,
+    Trash: Trash
 });
 
 var FitPredictor$1 = function (_a) {
@@ -2631,11 +2643,17 @@ var Shapermint = function (_a) {
     return (jsxs$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 204, viewBoxY: 35, title: "Shapermint" }, { children: [jsx$1("path", { d: "M167.389 6.74999C169.252 6.74999 170.762 5.23895 170.762 3.37499C170.762 1.51104 169.252 0 167.389 0C165.525 0 164.015 1.51104 164.015 3.37499C164.015 5.23895 165.525 6.74999 167.389 6.74999Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M71.7943 27.8751H67.0458V25.4637C66.6588 26.527 64.0919 28.3751 61.0478 28.3751C55.914 28.3751 51.8008 23.8688 51.8008 18.3751C51.8008 12.8561 55.9156 8.37512 61.7975 8.37512C67.6537 8.37512 71.7943 12.8561 71.7943 18.3751V27.8751ZM61.6726 12.9574C58.9122 12.9574 56.6742 15.2359 56.6742 18.3751C56.6742 21.4131 58.9122 23.8181 61.6726 23.8181C64.433 23.8181 66.7959 21.3371 66.7959 18.3751C66.7959 15.3371 64.433 12.9574 61.6726 12.9574Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M161.267 27.8751H156.297V16.6017C156.297 15.5099 155.911 12.8439 152.435 12.9708C150.426 13.0216 148.856 14.6974 148.856 16.6778V27.8751H143.886V16.6017C143.886 15.5353 143.551 12.9454 140.255 12.9454C138.041 12.9454 136.496 14.4435 136.496 16.6017V27.8751H131.526V16.9318C131.526 12.0568 134.951 8.37512 140.281 8.37512C142.933 8.37512 145.07 9.41614 146.461 11.0919C147.929 9.41614 150.117 8.37512 152.641 8.37512C158.074 8.37512 161.267 11.9044 161.267 16.9318V27.8751Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M182.26 8.37512C187.689 8.37512 190.88 11.9044 190.88 16.9318V27.8751H185.914V16.8048C185.914 15.713 185.528 12.9454 182.054 12.9454C180.047 12.9454 178.477 14.9005 178.477 16.8556V27.8497H173.511V16.9064C173.511 12.0568 176.959 8.37512 182.26 8.37512Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M80.0468 35.0001V25.9644C81.0013 26.9796 83.0136 28.401 85.8256 28.401C90.9594 28.401 95.0355 23.9085 95.0355 18.3753C95.0355 12.8676 90.9078 8.37512 85.0516 8.37512C79.1697 8.37512 75.042 12.8676 75.042 18.3753V35.0001H80.0468ZM85.0774 23.8323C82.317 23.8323 80.0468 21.4211 80.0468 18.3753C80.0468 15.4057 82.317 12.9438 85.0774 12.9438C87.8378 12.9438 90.0564 15.2788 90.0564 18.3753C90.0564 21.4972 87.8378 23.8323 85.0774 23.8323Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M49.2774 27.875H44.3321V16.8473C44.3321 15.7293 43.9734 12.9596 40.7705 12.9596C38.5669 12.9596 37.0039 14.6875 37.0039 16.8473V27.875H32.0586V1.5H37.0039V10.6982C37.9775 9.22446 40.0274 8.41136 41.6929 8.41136C46.4076 8.41136 49.303 11.8162 49.303 16.8473V27.875H49.2774Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M204 27.8097C197.771 28.3921 194.003 25.024 194.003 19.8072V3.625H198.95V8.56323H204V13.1216H198.95V19.8579C198.95 22.5169 200.975 23.5299 204 23.3779V27.8097Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M116.902 20.2129C116.979 19.6552 117.031 18.7427 117.031 18.3624C117.031 12.1521 112.453 8.37512 107.49 8.37512C101.986 8.37512 97.5371 12.9125 97.5371 18.4385C97.5371 23.9645 102.089 28.3751 108.184 28.3751C111.039 28.3751 114.253 27.3865 115.925 25.6121L113.507 22.0887C112.479 23.0266 111.219 23.8377 108.518 23.8377C104.172 23.8377 102.938 21.1761 102.835 20.2129H116.902ZM102.809 16.6134C103.092 14.8897 104.635 12.9379 107.335 12.9379C110.473 12.9379 111.939 15.0418 112.119 16.6641L102.809 16.6134Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M169.886 27.875H164.888V8.875H169.886V27.875Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M129.899 12.9691C126.732 12.4105 124.621 14.0864 124.621 16.8035V27.875H119.652V16.8035C119.652 11.3693 123.463 7.58573 129.899 8.34753V12.9691Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M21.174 29.1575C26.6159 29.3607 29.5818 26.1339 29.5818 21.713C29.5818 17.3175 24.8879 15.9201 22.5925 15.1579C19.8329 14.2432 17.7181 13.7096 17.7181 12.1598C17.7181 10.9148 18.8529 10.1271 20.6582 10.1271C22.412 10.1271 24.6558 10.864 26.8222 12.1852L26.9769 12.2868L29.1691 8.42483L29.0402 8.34861C26.6159 6.77333 23.5468 5.83325 20.813 5.83325C16.0675 5.83325 12.7405 8.67891 12.7405 12.7695C12.7405 17.3937 17.5118 18.842 19.7814 19.3755C22.5667 20.0107 24.6042 20.6713 24.6042 22.3736C24.6042 23.7456 23.2889 24.9144 21.1998 24.6349C17.8986 24.1267 12.07 20.4426 7.86612 20.4426C4.17807 20.4426 1.49585 22.0433 0 25.016L4.1007 27.074C4.61651 26.0323 5.44181 24.9906 7.35031 24.9906C11.7089 24.9906 15.9128 28.9542 21.174 29.1575Z", fill: "#292929" }, void 0)] }), void 0));
 };
 
+var McAfee = function (_a) {
+    var height = _a.height, width = _a.width;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 121, viewBoxY: 60, title: "McAfee" }, { children: jsxs$1(Fragment$1, { children: [jsx$1("path", { d: "M18.2355 14.8201C22.8916 16.9796 27.5054 19.0967 32.0768 21.2562C32.0345 23.331 32.0345 25.4482 32.0768 27.523C29.3678 26.295 26.6588 24.9824 23.9498 23.7121C23.9921 28.0311 23.9498 32.3924 23.9498 36.7114C26.6588 37.9817 29.3678 39.2096 32.0768 40.5223C32.0345 42.5971 31.9921 44.7142 32.1191 46.789C27.5054 44.6719 22.8916 42.47 18.2355 40.3529C18.2355 31.8419 18.2779 23.331 18.2355 14.8201Z", fill: "#C01717" }, void 0), jsx$1("path", { d: "M45.8757 14.8201H45.9604C45.9604 23.331 46.0027 31.8843 45.9604 40.3952C41.3466 42.5124 36.7328 44.6719 32.1614 46.789C32.0768 44.7142 32.0768 42.5971 32.1191 40.5223C34.8281 39.252 37.5794 37.9817 40.2884 36.7114C40.2884 32.3924 40.2884 28.0311 40.2884 23.7121C37.5794 24.9824 34.8704 26.295 32.1191 27.4806C32.0768 25.4058 32.0768 23.2887 32.1191 21.2139C36.6905 19.0967 41.3043 17.0219 45.8757 14.8201Z", fill: "#75150D" }, void 0), jsx$1("path", { d: "M50.1932 16.8518C51.844 18.0798 53.4524 19.3077 55.1032 20.5356C56.754 19.3077 58.3625 18.0374 60.0133 16.8518C60.0133 20.6627 60.0133 24.4312 60.0133 28.2421C59.1667 28.2421 58.3625 28.2421 57.5159 28.2421C57.5159 26.0826 57.5159 23.9231 57.5159 21.7636C56.7117 22.3564 55.9075 22.9492 55.1032 23.542C54.299 22.9492 53.4948 22.3564 52.6905 21.7636C52.6905 23.9231 52.6905 26.0826 52.6905 28.2421C51.844 28.2421 51.0397 28.2421 50.1932 28.2421C50.1932 24.4312 50.1932 20.6203 50.1932 16.8518Z", fill: "#B91E23" }, void 0), jsx$1("path", { d: "M72.7963 16.8942C73.5582 16.8942 74.3625 16.8942 75.1244 16.8942C76.6905 20.6627 78.2566 24.4312 79.8228 28.1997C78.9339 28.1997 78.0873 28.1997 77.1984 28.1997C76.9445 27.5646 76.6905 26.9295 76.4365 26.252C75.1244 26.252 73.8545 26.252 72.5424 26.252C72.2884 26.8871 72.0344 27.5223 71.7805 28.1574C70.8916 28.1574 70.045 28.1574 69.1561 28.1574C70.5953 24.897 72.0344 21.6366 73.4736 18.3338C73.2196 17.9104 73.008 17.4023 72.7963 16.8942ZM74.4471 21.3825C74.1085 22.2717 73.7275 23.1186 73.3889 24.0078C74.1085 24.0078 74.7857 24.0078 75.5053 24.0078C75.1667 23.1186 74.8281 22.2717 74.4471 21.3825Z", fill: "#B91E23" }, void 0), jsx$1("path", { d: "M82.9127 17.1058C83.8863 16.8094 84.9445 16.8941 85.8334 17.2752C85.5371 17.995 85.1984 18.6725 84.9022 19.35C84.4789 19.1807 83.9286 18.9689 83.5053 19.2653C82.9974 19.6888 83.209 20.4086 83.1667 21.0014C83.6746 21.0014 84.1826 21.0014 84.6482 21.0014C84.6482 21.7212 84.6482 22.4411 84.6482 23.1609C84.1402 23.1609 83.6746 23.1609 83.1667 23.1609C83.1667 24.8546 83.1667 26.5483 83.1667 28.2421C82.4048 28.2421 81.6429 28.2421 80.881 28.2421C80.881 26.5483 80.881 24.8546 80.881 23.1609C80.5424 23.1609 80.2037 23.1609 79.8651 23.1609C79.8651 22.4411 79.8651 21.7212 79.8651 21.0437C80.2037 21.0437 80.5424 21.0437 80.881 21.0437C80.881 20.3239 80.8387 19.5194 81.135 18.8419C81.4313 17.9951 82.1085 17.3599 82.9127 17.1058Z", fill: "#B91E23" }, void 0), jsx$1("path", { d: "M63.5265 20.0282C64.7117 19.5625 66.1085 19.5201 67.2937 20.0706C68.098 20.4517 68.6906 21.1292 69.1985 21.849C68.5636 22.2301 67.9286 22.6112 67.2937 22.9923C66.9128 22.3148 66.2355 21.722 65.4313 21.7643C64.2461 21.6796 63.1456 22.7805 63.2302 23.9661C63.1879 25.1517 64.2461 26.168 65.4313 26.1256C66.2355 26.168 66.9128 25.5752 67.2937 24.8977C67.9286 25.2788 68.5636 25.6599 69.1985 26.041C68.7329 26.8031 68.098 27.4383 67.3361 27.777C65.7699 28.5392 63.7382 28.3275 62.426 27.1419C61.3678 26.2103 60.8175 24.686 61.0292 23.2887C61.2408 21.849 62.2144 20.5787 63.5265 20.0282Z", fill: "#B91E23" }, void 0), jsx$1("path", { d: "M86.2567 21.3831C87.6112 19.5624 90.4895 19.1813 92.2673 20.5786C93.6218 21.5102 94.1297 23.2462 94.0027 24.8129C91.9287 24.8129 89.8123 24.8129 87.7382 24.8129C88.0768 25.7868 89.1773 26.4219 90.1932 26.2102C90.7011 26.1255 91.0821 25.8291 91.4631 25.4904C92.098 25.8291 92.7329 26.1679 93.3255 26.5066C92.6482 27.2265 91.844 27.8193 90.9128 28.0733C89.2197 28.5391 87.2303 27.9463 86.172 26.5066C85.0715 25.0246 85.1139 22.8228 86.2567 21.3831ZM87.8228 22.9075C89.0504 22.9075 90.2355 22.9075 91.4631 22.9075C91.1244 22.23 90.4895 21.6795 89.6853 21.7219C88.881 21.6372 88.1191 22.1876 87.8228 22.9075Z", fill: "#B91E23" }, void 0), jsx$1("path", { d: "M95.3996 21.7219C96.5002 19.9435 98.9975 19.2237 100.86 20.1552C101.918 20.6634 102.807 21.5949 103.146 22.7382C103.357 23.4157 103.4 24.1355 103.4 24.8553C101.326 24.8553 99.2092 24.8553 97.1351 24.8553C97.4737 25.7869 98.4472 26.422 99.4631 26.2526C100.013 26.2103 100.479 25.8716 100.86 25.5328C101.495 25.8716 102.087 26.2103 102.722 26.549C101.96 27.4382 100.902 28.0734 99.7171 28.2428C98.2779 28.4121 96.7118 27.904 95.7806 26.7608C94.5531 25.3634 94.4261 23.2039 95.3996 21.7219ZM97.1774 22.9075C98.4049 22.9075 99.5901 22.9075 100.818 22.9075C100.479 22.1877 99.7171 21.6373 98.8705 21.6796C98.1086 21.7219 97.4737 22.2301 97.1774 22.9075Z", fill: "#B91E23" }, void 0), jsx$1("path", { d: "M55.6958 32.5617C54.8916 32.2653 54.4683 32.1383 53.6641 32.1383C52.7752 32.1383 51.8016 32.4347 51.8016 33.5356C51.8016 35.5681 56.4577 35.06 56.4577 38.5321C56.4577 40.7763 54.68 41.6231 52.5212 41.6231C51.7593 41.6231 51.0397 41.4114 50.3202 41.1997L50.4895 39.8024C50.9974 40.0141 51.9286 40.3105 52.7329 40.3105C53.6218 40.3105 54.8493 39.8447 54.8493 38.6168C54.8493 36.2879 50.1932 36.9231 50.1932 33.6627C50.1932 31.8419 51.717 30.8257 53.6641 30.8257C54.3837 30.8257 55.2302 30.9527 55.9921 31.2068L55.6958 32.5617Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M58.5741 30.9949H64.627V32.3075H60.0979V35.3562H64.2037V36.6688H60.0979V40.141H64.627V41.4536H58.5741V30.9949Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M73.9392 32.6887C73.2196 32.3077 72.5001 32.1383 71.6958 32.1383C69.1985 32.1383 67.5477 33.8743 67.5477 36.2032C67.5477 38.6591 69.3678 40.2681 71.6112 40.2681C72.4154 40.2681 73.389 40.0988 73.9815 39.76L74.0662 41.1997C73.2196 41.5384 72.2461 41.5808 71.6112 41.5808C68.1826 41.5808 65.9392 39.4213 65.9392 36.1185C65.9392 32.8581 68.3519 30.741 71.6112 30.741C72.4577 30.741 73.262 30.868 74.0239 31.1644L73.9392 32.6887Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M83.7171 37.1346C83.7171 40.0563 82.1933 41.6653 79.5266 41.6653C76.8599 41.6653 75.3361 40.0986 75.3361 37.1346V30.9949H76.8599V36.9652C76.8599 38.9977 77.5372 40.3527 79.4843 40.3527C81.516 40.3527 82.1086 38.9977 82.1086 36.9652V30.9949H83.6324V37.1346H83.7171Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M86.172 30.9949H88.7963C90.9551 30.9949 92.9868 31.3336 92.9868 33.8319C92.9868 35.1021 92.0133 36.0337 90.7434 36.2031V36.2454C91.209 36.4148 91.463 36.6265 91.8016 37.304L93.8757 41.4536H92.1403L90.4895 37.8121C90.0239 36.7959 89.4736 36.7959 88.7117 36.7959H87.7805V41.4536H86.2567V30.9949H86.172ZM87.6958 35.5256H89.008C90.4895 35.5256 91.336 34.9328 91.336 33.9165C91.336 32.9427 90.5741 32.3922 89.1773 32.3922H87.6958V35.5256Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M95.6535 30.9949H101.664V32.3075H97.135V35.3562H101.241V36.6688H97.135V40.141H101.664V41.4536H95.6111V30.9949H95.6535Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M104.034 33.1115V31.4607H103.442V31.1221H105.008V31.4607H104.415V33.1115H104.034Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M105.262 33.1114V31.1643H105.854L106.193 32.5188L106.532 31.1643H107.124V33.1114H106.743V31.5453L106.362 33.1114H105.981L105.601 31.5453V33.1114H105.262Z", fill: "#66676A" }, void 0)] }, void 0) }), void 0));
+};
+
 var Other = /*#__PURE__*/Object.freeze({
     __proto__: null,
     FitPredictor: FitPredictor$1,
     Loading: Loading,
-    Shapermint: Shapermint
+    Shapermint: Shapermint,
+    McAfee: McAfee
 });
 
 var ChevronDown = function (_a) {
@@ -2653,6 +2671,11 @@ var ChevronRight = function (_a) {
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right" }, { children: jsx$1("g", __assign({ opacity: opacity }, { children: jsx$1("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
 };
 
+var ChevronRightVariant = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: "chevron right variant" }, { children: jsx$1("path", { d: "M17.635 6.24942C17.3066 5.91686 16.8139 5.91686 16.4854 6.24942C16.1569 6.58199 16.1569 7.08083 16.4854 7.41339L20.208 11.127H1.82117C1.38321 11.1824 1 11.5704 1 12.0139C1 12.4573 1.38321 12.8453 1.82117 12.8453H20.208L16.4854 16.6143C16.1569 16.9469 16.1569 17.4457 16.4854 17.7783C16.6496 17.9446 16.8686 18 17.0876 18C17.3066 18 17.5255 17.9446 17.6898 17.7783L22.781 12.6236C22.9453 12.4573 23 12.2356 23 12.0139C23 11.7921 22.8905 11.5704 22.781 11.4042L17.635 6.24942Z", fill: fill }, void 0) }), void 0));
+};
+
 var ChevronUp = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill;
     return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 36, viewBoxY: 20, title: "chevron up" }, { children: jsx$1("path", { d: "M0.285774 18.1586L1.89534 19.7224C2.2763 20.0925 2.89398 20.0925 3.27501 19.7224L18 5.44992L32.7251 19.7223C33.106 20.0924 33.7237 20.0924 34.1047 19.7223L35.7143 18.1585C36.0952 17.7884 36.0952 17.1883 35.7143 16.8181L18.6898 0.277592C18.3088 -0.0925308 17.6911 -0.0925308 17.3101 0.277592L0.285774 16.8181C-0.095258 17.1883 -0.095258 17.7885 0.285774 18.1586Z", fill: fill }, void 0) }), void 0));
@@ -2673,6 +2696,7 @@ var Arrows = /*#__PURE__*/Object.freeze({
     ChevronDown: ChevronDown,
     ChevronLeft: ChevronLeft,
     ChevronRight: ChevronRight,
+    ChevronRightVariant: ChevronRightVariant,
     ChevronUp: ChevronUp,
     ChevronUpSolid: ChevronUpSolid,
     CircleUp: CircleUp
@@ -3500,7 +3524,7 @@ var InputValidationType;
     InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
 })(InputValidationType || (InputValidationType = {}));
 
-var Section = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
+var Section = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"], ["\n  font-weight: 600;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-text: left;\n  width: 100%;\n  box-sizing: border-box;\n  align-self: flex-start;\n  padding: ", ";\n"])), function (props) {
     return props.type === CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
 });
 var CardHeader = function (_a) {
@@ -3511,16 +3535,16 @@ var CardFooter = function (_a) {
     var children = _a.children;
     return (jsx$1(Section, __assign({ type: CardSectionType.Footer }, { children: children }), void 0));
 };
-var templateObject_1$K;
+var templateObject_1$O;
 
-var Body = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
+var Body = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1.5rem;\n  align-self: flex-start;\n"])));
 var CardBody = function (_a) {
     var children = _a.children;
     return jsx$1(Body, { children: children }, void 0);
 };
-var templateObject_1$J;
+var templateObject_1$N;
 
-var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"])), function (_a) {
+var Container$u = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"], ["\n  ", "\n  width: ", ";\n  background: ", ";\n  border-radius: 0.5rem;\n  border: ", ";\n"])), function (_a) {
     var flex = _a.flex;
     return flex &&
         "display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;";
@@ -3532,14 +3556,14 @@ var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
 });
 var Card = function (_a) {
     var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
-    return (jsx$1(Container$r, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
+    return (jsx$1(Container$u, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
 };
 var Card$1 = Object.assign(Card, {
     Header: CardHeader,
     Footer: CardFooter,
     Body: CardBody,
 });
-var templateObject_1$I;
+var templateObject_1$M;
 
 function jsx(type, props, key) {
   if (!hasOwnProperty$1.call(props, 'css')) {
@@ -3569,41 +3593,38 @@ var BaseButton = function (_a) {
         } }, { children: [renderLeading, children, renderTrailing] }), void 0));
 };
 
-var getStylesBySize$c = function (size) {
+var getStylesBySize$d = function (size, theme) {
     switch (size) {
         case ComponentSize.Large:
             return {
-                height: '3rem',
-                fontSize: '1rem',
+                fontSize: theme.component.button.size.large.fontSize,
+                padding: theme.component.button.size.large.padding,
             };
         case ComponentSize.Medium:
             return {
-                height: '2.50rem',
-                fontSize: '0.88rem',
+                fontSize: theme.component.button.size.medium.fontSize,
+                padding: theme.component.button.size.medium.padding,
             };
         case ComponentSize.Small:
             return {
-                height: '2.25rem',
-                fontSize: '0.75rem',
+                fontSize: theme.component.button.size.small.fontSize,
+                padding: theme.component.button.size.small.padding,
             };
         default:
             return {
-                height: '2.25rem',
-                fontSize: '0.75rem',
+                fontSize: theme.component.button.size.small.fontSize,
+                padding: theme.component.button.size.small.padding,
             };
     }
 };
 var BaseCTA = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, type = _a.type, className = _a.className;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$c(size);
-    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: 600, '&:hover': {
-                color: theme.shades.white,
-                cursor: 'pointer',
-            }, '&:disabled': {
-                backgroundColor: theme.shades.gray050,
-                color: theme.shades.gray250,
-                cursor: 'default',
+    var stylesBySize = getStylesBySize$d(size, theme);
+    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "" + theme.component.button.borderRadius, cursor: 'pointer', '&:disabled': {
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+                cursor: 'not-allowed',
             } }) }, { children: text }), void 0));
 };
 
@@ -3611,16 +3632,16 @@ var ButtonPrimary = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size;
     var theme = useTheme();
     return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
-            backgroundColor: theme.palette.primary.default,
-            color: theme.palette.secondary.default,
-            border: 'inherit',
+            backgroundColor: theme.component.button.primary.active.backgroundColor,
+            color: theme.component.button.primary.active.color,
+            border: theme.component.button.border,
             '&:hover': {
-                backgroundColor: theme.palette.primary.hover,
-                color: theme.shades.white,
+                backgroundColor: theme.component.button.primary.hover.backgroundColor,
+                color: theme.component.button.primary.hover.color,
             },
             '&:disabled': {
-                backgroundColor: theme.shades.gray050,
-                color: theme.shades.gray250,
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
             },
         }, text: text }, void 0));
 };
@@ -3629,15 +3650,15 @@ var ButtonSecondary = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size;
     var theme = useTheme();
     return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
-            backgroundColor: theme.palette.secondary.default,
-            color: theme.shades.white,
-            border: 'inherit',
+            backgroundColor: theme.component.button.secondary.active.backgroundColor,
+            color: theme.component.button.secondary.active.color,
+            border: theme.component.button.border,
             '&:hover': {
-                backgroundColor: theme.palette.secondary.hover,
+                backgroundColor: theme.component.button.secondary.hover.backgroundColor,
             },
             '&:disabled': {
-                backgroundColor: theme.shades.gray050,
-                color: theme.shades.gray250,
+                backgroundColor: theme.colors.neutral50,
+                color: theme.colors.neutral250,
             },
         }, text: text }, void 0));
 };
@@ -3646,15 +3667,17 @@ var ButtonSecondaryOutline = function (_a) {
     var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, className = _a.className;
     var theme = useTheme();
     return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, className: className, css: {
-            backgroundColor: theme.shades.white,
-            color: theme.palette.secondary.default,
-            border: "1px solid " + theme.palette.secondary.default,
+            backgroundColor: theme.component.button.secondary.active.color,
+            color: theme.component.button.secondary.active.backgroundColor,
+            border: "1px solid " + theme.component.button.secondary.active.backgroundColor,
             '&:hover': {
-                backgroundColor: theme.palette.secondary.default,
+                backgroundColor: theme.component.button.secondary.active.backgroundColor,
+                color: theme.component.button.secondary.active.color,
             },
             '&:disabled': {
-                backgroundColor: theme.shades.white,
-                borderColor: theme.shades.gray200,
+                backgroundColor: theme.colors.background.disabled,
+                color: theme.colors.text.disabled,
+                border: 'none',
             },
         }, text: text }, void 0));
 };
@@ -5980,7 +6003,7 @@ function BaseSelectOption(_a) {
     return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Listbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Listbox)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function BaseSelect(_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
     return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -5990,35 +6013,35 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
     Options: BaseSelectOptions,
     Option: BaseSelectOption,
 });
-var templateObject_1$H;
+var templateObject_1$L;
 
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide;
     return ({
-        border: "0.063rem solid " + theme.shades.gray200,
+        border: "0.063rem solid " + theme.colors.neutral200,
         boxSizing: 'border-box',
         borderRadius: '0.5rem',
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        background: theme.shades.white,
+        background: theme.colors.white,
         cursor: 'pointer',
         fontWeight: 600,
         padding: '0.5rem 0.75rem 0.5rem 1rem',
-        color: theme.shades.gray700,
-        fill: theme.shades.gray700,
+        color: theme.colors.neutral700,
+        fill: theme.colors.neutral700,
         width: wide ? '100%' : 'auto',
         justifyContent: wide ? 'space-between' : 'center',
         svg: {
             marginLeft: '0.75rem',
         },
         '&:disabled': {
-            borderColor: theme.shades.gray200,
-            color: theme.shades.gray250,
+            borderColor: theme.colors.neutral200,
+            color: theme.colors.neutral250,
             cursor: 'not-allowed',
             '*': {
-                color: theme.shades.gray250,
-                fill: theme.shades.gray250,
+                color: theme.colors.neutral250,
+                fill: theme.colors.neutral250,
                 cursor: 'not-allowed',
             },
         },
@@ -6049,15 +6072,15 @@ var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        border: "0.063rem solid " + theme.shades.gray550,
+        border: "0.063rem solid " + theme.colors.neutral550,
         boxSizing: 'border-box',
         borderRadius: '0.5rem',
-        background: theme.shades.white,
+        background: theme.colors.white,
         padding: 0,
         marginTop: '0.125rem',
         position: 'absolute',
         width: '100%',
-        color: theme.shades.gray700,
+        color: theme.colors.neutral700,
     });
 });
 var BaseDropdownOptions = function (_a) {
@@ -6081,7 +6104,7 @@ var CustomOption = newStyled.li(function (_a) {
         width: '100%',
         boxSizing: 'border-box',
         fontWeight: selected ? 600 : 'inherit',
-        backgroundColor: active ? theme.shades.gray010 : 'inherit',
+        backgroundColor: active ? theme.colors.neutral10 : 'inherit',
     });
 });
 function BaseDropdownOption(_a) {
@@ -6101,7 +6124,7 @@ function BaseDropdown(_a) {
             position: 'relative',
             fontSize: '0.88rem',
             lineHeight: '1.125rem',
-            color: theme.shades.gray700,
+            color: theme.colors.neutral700,
         }, disabled: disabled }, { children: children }), void 0));
 }
 var BaseDropdown$1 = Object.assign(BaseDropdown, {
@@ -6127,7 +6150,7 @@ function SimpleDropdown(_a) {
     return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide }, { children: selectedOptionLabel() }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
 }
 
-var getStylesBySize$b = function (size) {
+var getStylesBySize$c = function (size) {
     switch (size) {
         case ComponentSize.Medium:
             return {
@@ -6143,12 +6166,12 @@ var getStylesBySize$b = function (size) {
 var SimpleSelector = function (_a) {
     var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$b(size);
+    var stylesBySize = getStylesBySize$c(size);
     var activeStyles = active ? { fontWeight: 600 } : { fontWeight: 0 };
     return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: '0.75rem', cursor: 'pointer', '&:hover': {
                 fontWeight: 600,
             }, '&:disabled': {
-                color: theme.shades.gray250,
+                color: theme.colors.neutral250,
                 cursor: 'not-allowed',
             } }) }, { children: text }), void 0));
 };
@@ -6157,20 +6180,20 @@ var SelectorSecondary = function (_a) {
     var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
     var theme = useTheme();
     var stylesByActive = active
-        ? { background: theme.palette.secondary.default, color: theme.shades.white }
-        : { background: theme.shades.white, color: theme.palette.secondary.default };
-    return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { fontWeight: 600, whiteSpace: 'nowrap', border: "0.063rem solid " + theme.palette.secondary.default, '&:hover': {
-                background: theme.palette.secondary.default,
-                color: theme.shades.white,
+        ? { background: theme.colors.secondary, color: theme.colors.white }
+        : { background: theme.colors.white, color: theme.colors.secondary };
+    return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { fontWeight: 600, whiteSpace: 'nowrap', border: "0.063rem solid " + theme.colors.secondary, '&:hover': {
+                background: theme.colors.secondary,
+                color: theme.colors.white,
             }, '&:disabled': {
                 border: 'inherit',
-                background: theme.shades.gray050,
-                color: theme.shades.gray250,
+                background: theme.colors.neutral50,
+                color: theme.colors.neutral250,
             } }) }, void 0));
 };
 
-var ButtonsContainer = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
-var SizeParagraph = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
+var ButtonsContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
+var SizeParagraph = newStyled.p(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"], ["\n  margin: 0 0 0.63rem 0;\n  font-size: 0.88rem;\n"])));
 var getInitialValue$2 = function (options, selectedValue) {
     if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
         return selectedValue;
@@ -6195,9 +6218,9 @@ var SizeSelector = function (_a) {
                         }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
                 }) }, void 0)] }, void 0));
 };
-var templateObject_1$G, templateObject_2$u;
+var templateObject_1$K, templateObject_2$x;
 
-var getStylesBySize$a = function (size) {
+var getStylesBySize$b = function (size) {
     switch (size) {
         case ComponentSize.Large:
         case ComponentSize.Medium:
@@ -6215,24 +6238,24 @@ var getStylesBySize$a = function (size) {
     }
 };
 var textButtonStyles$1 = function (theme, size) {
-    var stylesBySize = getStylesBySize$a(size);
-    return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.shades.gray550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
+    var stylesBySize = getStylesBySize$b(size);
+    return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.neutral550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
             textDecorationLine: 'underline',
         }, '&:disabled': {
-            color: theme.shades.gray250,
+            color: theme.colors.neutral250,
             textDecorationLine: 'none',
         } });
 };
 var withContainer = function (iconFill, isLeading, Icon) {
-    return Icon && (jsx("span", __assign({ css: css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
+    return Icon && (jsx("span", __assign({ css: css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n        display: flex;\n        align-items: center;\n        ", "\n      "], ["\n        display: flex;\n        align-items: center;\n        ", "\n      "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
 };
 var getIconFill = function (theme, disabled, iconColor) {
     if (disabled)
-        return theme.shades.gray250;
+        return theme.colors.neutral250;
     else if (iconColor)
         return iconColor;
     else
-        return theme.shades.gray550;
+        return theme.colors.neutral550;
 };
 var TextButton = function (_a) {
     var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
@@ -6240,18 +6263,18 @@ var TextButton = function (_a) {
     var iconFill = getIconFill(theme, disabled, iconColor);
     return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
 };
-var templateObject_1$F;
+var templateObject_1$J;
 
-var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
-var P$2 = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
+var P$2 = newStyled.p(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
-    return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
+    return (jsxs$1(Container$t, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
 };
-var templateObject_1$E, templateObject_2$t, templateObject_3$j;
+var templateObject_1$I, templateObject_2$w, templateObject_3$j;
 
-var getStylesBySize$9 = function (size) {
+var getStylesBySize$a = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6279,7 +6302,7 @@ var getStylesBySize$9 = function (size) {
             };
     }
 };
-var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
+var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  padding: ", ";\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  cursor: default;\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6288,39 +6311,39 @@ var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.padding;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.padding;
 }, function (_a) {
     var size = _a.size;
     return (size === ComponentSize.Small ? '2rem' : 'unset');
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.height;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.height;
 });
-var H3$2 = newStyled.h3(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var H3$2 = newStyled.h3(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-weight: bold;\n  margin: 0;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var textColor = _a.textColor;
     return textColor;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+    return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 });
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
     var theme = useTheme();
-    return (jsx$1(Container$p, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsx$1(Container$s, __assign({ backgroundColor: disabled ? theme.colors.neutral50 : backgroundColor, borderColor: disabled ? theme.colors.neutral50 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.neutral250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
 };
-var templateObject_1$D, templateObject_2$s;
+var templateObject_1$H, templateObject_2$v;
 
-var getStylesBySize$8 = function (size) {
+var getStylesBySize$9 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6342,18 +6365,18 @@ var getStylesBySize$8 = function (size) {
             };
     }
 };
-var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
+var Container$r = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Price = newStyled.h1(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n"])), function (_a) {
     var weight = _a.weight;
     return (weight ? weight : '400');
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
+    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
+    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -6363,38 +6386,38 @@ var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTempl
 }, function (_a) {
     var _b;
     var margin = _a.margin, size = _a.size;
-    return (margin ? (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
+    return (margin ? (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
 });
 var TagContainer = newStyled.h1(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.margin;
+    return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin;
 });
 var PriceLabel = function (_a) {
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
     var theme = useTheme();
-    return (jsxs$1(Container$o, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.shades.gray400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
+    return (jsxs$1(Container$r, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.secondary, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.neutral400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
-var templateObject_1$C, templateObject_2$r, templateObject_3$i;
+var templateObject_1$G, templateObject_2$u, templateObject_3$i;
 
 var OneColorSelector = function (_a) {
     var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
     var theme = useTheme();
-    var outerBorder = selected ? theme.shades.gray550 : 'none';
+    var outerBorder = selected ? theme.colors.neutral550 : 'none';
     return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
 };
 
 var ThreeColorSelector = function (_a) {
     var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
     var theme = useTheme();
-    var outerBorder = selected ? theme.shades.gray550 : 'none';
+    var outerBorder = selected ? theme.colors.neutral550 : 'none';
     return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
 };
 
 var TwoColorSelector = function (_a) {
     var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
     var theme = useTheme();
-    var outerBorder = selected ? theme.shades.gray550 : 'none';
+    var outerBorder = selected ? theme.colors.neutral550 : 'none';
     return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
 };
 
@@ -6411,11 +6434,11 @@ var ColorSelector = function (_a) {
 var OutOfStock = function (_a) {
     var title = _a.title;
     var theme = useTheme();
-    return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.shades.gray300 }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.shades.gray300, strokeWidth: "0.5" }, void 0)] }), void 0));
+    return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.neutral300 }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.neutral300, strokeWidth: "0.5" }, void 0)] }), void 0));
 };
 
-var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
 var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 1rem;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
 var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n"])));
@@ -6436,20 +6459,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$B, templateObject_2$q, templateObject_3$h, templateObject_4$d, templateObject_5$7;
+var templateObject_1$F, templateObject_2$t, templateObject_3$h, templateObject_4$d, templateObject_5$7;
 
-var Container$n = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
+var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 });
-var Image$3 = newStyled.img(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
+var Image$3 = newStyled.img(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n"])));
 var PatternSelector = function (_a) {
     var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
     var theme = useTheme();
-    var outerBorder = selected ? theme.shades.gray550 : 'transparent';
-    return (jsx$1(Container$n, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
+    var outerBorder = selected ? theme.colors.neutral550 : 'transparent';
+    return (jsx$1(Container$q, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
 };
-var templateObject_1$A, templateObject_2$p;
+var templateObject_1$E, templateObject_2$s;
 
 var renderOptions$1 = function (options) {
     if (options.length)
@@ -6515,38 +6538,38 @@ var MultiColorPicker = function (_a) {
     return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
 };
 
-var Image$2 = newStyled.img(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
+var Image$2 = newStyled.img(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"], ["\n  width: 4.063rem;\n  height: 5.375rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  border: ", ";\n"])), function (_a) {
     var selected = _a.selected, theme = _a.theme;
-    return selected ? "0.063rem solid " + theme.shades.gray700 : 'inherit';
+    return selected ? "0.063rem solid " + theme.colors.neutral700 : 'inherit';
 });
 var ImageSmallPreview = function (_a) {
     var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className;
     var theme = useTheme();
     return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
 };
-var templateObject_1$z;
+var templateObject_1$D;
 
-var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
-var Button$3 = newStyled.button(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var Container$p = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
+var Button$3 = newStyled.button(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
-    return (jsx(Container$m, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
+    return (jsx(Container$p, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
             return (jsx(Button$3, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
-var templateObject_1$y, templateObject_2$o;
+var templateObject_1$C, templateObject_2$r;
 
-var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"], ["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"])));
-var Image$1 = newStyled.img(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var Container$o = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"], ["\n  position: relative;\n  max-height: 45rem;\n  max-width: 33.125rem;\n"])));
+var Image$1 = newStyled.img(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
 var TopTagContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n"])));
 var BottomTagContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ImageProductWithTags = function (_a) {
     var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
-    return (jsxs$1(Container$l, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
+    return (jsxs$1(Container$o, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
 };
-var templateObject_1$x, templateObject_2$n, templateObject_3$g, templateObject_4$c;
+var templateObject_1$B, templateObject_2$q, templateObject_3$g, templateObject_4$c;
 
-var Container$k = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"])));
+var Container$n = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  max-height: 45rem;\n"])));
 var ProductGallery = function (_a) {
     var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
@@ -6554,13 +6577,13 @@ var ProductGallery = function (_a) {
     useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
-    return (jsxs$1(Container$k, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
+    return (jsxs$1(Container$n, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
                     setSelectedImage(value);
                 } }, void 0), jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
 };
-var templateObject_1$w;
+var templateObject_1$A;
 
-var getStylesBySize$7 = function (size) {
+var getStylesBySize$8 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6592,13 +6615,13 @@ var StarList = function (_a) {
     var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
     return (jsx("div", __assign({ style: { display: 'flex' } }, { children: __spreadArray([], new Array(starsNumber)).map(function (_, index) {
             return (jsx("div", __assign({ "data-testid": "star-container", css: {
-                    marginRight: getStylesBySize$7(size).marginRight,
+                    marginRight: getStylesBySize$8(size).marginRight,
                     display: 'flex',
-                } }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$7(size), { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx(Icon.PDP.StarHalf, __assign({}, getStylesBySize$7(size), { fill: fill }), void 0)) : (jsx(Icon.PDP.StarEmpty, __assign({}, getStylesBySize$7(size), { fill: fill }), void 0)) }), index));
+                } }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx(Icon.PDP.StarHalf, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) : (jsx(Icon.PDP.StarEmpty, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) }), index));
         }) }), void 0));
 };
 
-var getStylesBySize$6 = function (size) {
+var getStylesBySize$7 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6633,34 +6656,34 @@ var Rating = function (_a) {
     return (jsxs("div", __assign({ css: {
             display: 'flex',
             alignItems: 'center',
-        } }, { children: [jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.palette.primary.default }, void 0), jsxs("h1", __assign({ css: {
+        } }, { children: [jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.primary }, void 0), jsxs("h1", __assign({ css: {
                     margin: '0',
                     fontStyle: 'normal',
                     fontWeight: 'normal',
-                    color: theme.palette.secondary.default,
-                    fontSize: getStylesBySize$6(size).fontSize,
-                    lineHeight: getStylesBySize$6(size).lineHeight,
-                    marginLeft: getStylesBySize$6(size).marginLeft,
+                    color: theme.colors.secondary,
+                    fontSize: getStylesBySize$7(size).fontSize,
+                    lineHeight: getStylesBySize$7(size).lineHeight,
+                    marginLeft: getStylesBySize$7(size).marginLeft,
                 } }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
 };
 
-var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
-var P$1 = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"])), function (props) { return props.theme.shades.gray550; });
+var Container$m = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
+var P$1 = newStyled.p(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  margin: 0 0.25rem;\n  font-weight: 700;\n  color: ", ";\n"])), function (props) { return props.theme.colors.neutral550; });
 var textButtonStyles = function (theme) { return ({
     border: 'none',
     background: 'transparent',
     padding: 0,
     textDecoration: 'underline',
-    color: theme.shades.gray400,
+    color: theme.colors.neutral400,
     lineHeight: '1.13rem',
     cursor: 'pointer',
 }); };
 var FitPredictor = function (_a) {
     var onClick = _a.onClick;
     var theme = useTheme();
-    return (jsxs(Container$j, __assign({ theme: theme }, { children: [jsx(Container$j, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.shades.gray550 }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
+    return (jsxs(Container$m, __assign({ theme: theme }, { children: [jsx(Container$m, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.neutral550 }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
 };
-var templateObject_1$v, templateObject_2$m;
+var templateObject_1$z, templateObject_2$p;
 
 var H2$1 = newStyled.h2(function (_a) {
     var color = _a.color;
@@ -6674,7 +6697,7 @@ var H2$1 = newStyled.h2(function (_a) {
         margin: '0.938rem 4.188rem',
     });
 });
-var Bar = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\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: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+var Bar = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\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: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -6697,7 +6720,7 @@ var Background = newStyled.div(function (_a) {
         position: 'absolute',
     });
 });
-var Container$i = newStyled.div(function (_a) {
+var Container$l = newStyled.div(function (_a) {
     var widthAuto = _a.widthAuto;
     return ({
         width: widthAuto ? 'auto' : 'fit-content',
@@ -6711,11 +6734,11 @@ var getBarWithBasedOnPercent = function (percent) {
 var ProgressBar = function (_a) {
     var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
     var theme = useTheme();
-    return (jsxs$1(Container$i, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.shades.gray100 }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.palette.secondary.default }, { children: description }), void 0)] }), void 0));
+    return (jsxs$1(Container$l, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.neutral100 }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.secondary }, { children: description }), void 0)] }), void 0));
 };
-var templateObject_1$u;
+var templateObject_1$y;
 
-var getStylesBySize$5 = function (size) {
+var getStylesBySize$6 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -6734,21 +6757,21 @@ var getStylesBySize$5 = function (size) {
             };
     }
 };
-var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+var Container$k = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color 0.1s ease;\n\n  svg {\n    margin: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &.disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
+    return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
 }, function (_a) {
     var hoverBackgroundColor = _a.hoverBackgroundColor;
     return hoverBackgroundColor;
@@ -6762,9 +6785,9 @@ var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
 var IconButton = function (_a) {
     var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsx$1(Container$h, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.palette.primary.default, hoverBackgroundColor: theme.palette.secondary.default, disabledColor: theme.shades.gray050, disabledIconColor: theme.shades.gray200, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
+    return (jsx$1(Container$k, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.neutral50, disabledIconColor: theme.colors.neutral200, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
 };
-var templateObject_1$t;
+var templateObject_1$x;
 
 var TooltipArrow = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
@@ -6844,7 +6867,7 @@ var getTooltipAlignItems = function (position, align) {
     }
 };
 
-var Wrapper$5 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"])), function (_a) {
+var Wrapper$5 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    .tooltip-container {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n"])), function (_a) {
     var position = _a.position;
     return getWrapperFlexDirection(position);
 });
@@ -6868,7 +6891,7 @@ var TooltipContainer = newStyled.div(function (_a) {
 var getTooltipMargin = function (actual, expected, margin) {
     return actual === expected ? margin : '0';
 };
-var ContentWrapper = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
+var ContentWrapper = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"], ["\n  border: 0.063rem solid ", ";\n  padding: 0.563rem 0.75rem;\n  border-radius: 0.5rem;\n  background-color: #fff;\n"])), function (_a) {
     var borderColor = _a.borderColor;
     return borderColor;
 });
@@ -6892,7 +6915,7 @@ var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
     return color;
 });
 var IconContainer$3 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
-var templateObject_1$s, templateObject_2$l, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
+var templateObject_1$w, templateObject_2$o, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
 
 var Tooltip = function (_a) {
     var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
@@ -6909,7 +6932,7 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.shades.gray200 }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$3, { children: React.createElement(header.Icon, { fill: theme.palette.secondary.default }) }, void 0), jsx$1(Title$3, __assign({ color: theme.palette.secondary.default }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign({ color: theme.palette.secondary.default, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.shades.gray200 }, void 0) }), void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.colors.neutral200 }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$3, { children: React.createElement(header.Icon, { fill: theme.colors.secondary }) }, void 0), jsx$1(Title$3, __assign({ color: theme.colors.secondary }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign({ color: theme.colors.secondary, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.neutral10 }, void 0) }), void 0)] }), void 0)] }), void 0));
 };
 
 var AccordionButton = function (_a) {
@@ -6924,7 +6947,7 @@ var AccordionButton = function (_a) {
             alignItems: 'center',
             fontWeight: 700,
             padding: 0,
-            color: disabled ? theme.shades.gray250 : theme.palette.secondary.default,
+            color: disabled ? theme.colors.neutral250 : theme.colors.secondary,
         }, className: className, as: as }, { children: children }), void 0));
 };
 
@@ -6950,15 +6973,15 @@ var AccordionControlButton = function (_a) {
     var theme = useTheme();
     var controlIcon = disabled ? openIcon : open ? closeIcon : openIcon;
     return (jsxs(Accordion$1.Button, __assign({ css: {
-            color: disabled ? theme.shades.gray250 : theme.palette.secondary.default,
+            color: disabled ? theme.colors.neutral250 : theme.colors.secondary,
             'svg path': {
-                fill: disabled ? theme.shades.gray250 : theme.palette.secondary.default,
+                fill: disabled ? theme.colors.neutral250 : theme.colors.secondary,
             },
         }, disabled: disabled, className: className }, { children: [children, controlIcon] }), void 0));
 };
 
-var Container$g = newStyled(Accordion$1)(function (props) { return ({
-    border: "1px solid " + props.theme.shades.gray100,
+var Container$j = newStyled(Accordion$1)(function (props) { return ({
+    border: "1px solid " + props.theme.colors.neutral100,
     padding: '1.25rem 2rem',
 }); });
 var Button$2 = newStyled(AccordionControlButton)(function () { return ({
@@ -6979,15 +7002,15 @@ var Panel$1 = newStyled(Accordion$1.Panel)(function () { return ({
 var AccordionBox = function (_a) {
     var title = _a.title, text = _a.text, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var theme = useTheme();
-    return (jsx$1(Container$g, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
+    return (jsx$1(Container$j, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
             var open = _a.open;
             var showPanel = open && !disabled;
-            return (jsxs$1(Fragment$1, { children: [jsx$1(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.shades.gray700 }, void 0) }, { children: title }), void 0), showPanel && jsx$1(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
+            return (jsxs$1(Fragment$1, { children: [jsx$1(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.colors.neutral700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.colors.neutral700 }, void 0) }, { children: title }), void 0), showPanel && jsx$1(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
         } }), void 0));
 };
 
-var Container$f = newStyled(Accordion$1)(function (props) { return ({
-    borderTop: "1px solid " + props.theme.shades.gray100,
+var Container$i = newStyled(Accordion$1)(function (props) { return ({
+    borderTop: "1px solid " + props.theme.colors.neutral100,
     padding: '0.625rem 0',
 }); });
 var Button$1 = newStyled(AccordionControlButton)(function () { return ({
@@ -7003,14 +7026,14 @@ var Panel = newStyled(Accordion$1.Panel)(function () { return ({
 var AccordionIcon = function (_a) {
     var title = _a.title, text = _a.text, leadingIcon = _a.leadingIcon, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var theme = useTheme();
-    return (jsx$1(Container$f, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
+    return (jsx$1(Container$i, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
             var open = _a.open;
             var showPanel = open && !disabled;
-            return (jsxs$1(Fragment$1, { children: [jsx$1(Button$1, __assign({ open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.shades.gray700 }, void 0), disabled: disabled }, { children: jsxs$1("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsx$1(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
+            return (jsxs$1(Fragment$1, { children: [jsx$1(Button$1, __assign({ open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.colors.neutral700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.colors.neutral700 }, void 0), disabled: disabled }, { children: jsxs$1("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsx$1(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
         } }), void 0));
 };
 
-var getStylesBySize$4 = function (size) {
+var getStylesBySize$5 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7065,37 +7088,37 @@ var getStylesBySize$4 = function (size) {
             };
     }
 };
-var Container$e = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
-var CustomCheckbox = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_a) {
+var Container$h = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  user-select: none;\n  position: relative;\n"])));
+var CustomCheckbox = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  border: 0.094rem solid ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.width;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.width;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.height;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.height;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.borderRadius;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.borderRadius;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.marginRight;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.marginRight;
 }, function (_a) {
     var isChecked = _a.isChecked, color = _a.color;
     return (isChecked ? color : '#fff');
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.width;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.width;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.height;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.height;
 });
 var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"], ["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
@@ -7104,11 +7127,11 @@ var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$e = __make
 var Text$4 = newStyled.label(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.fontSize;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.fontSize;
 }, function (_a) {
     var _b, _c;
     var size = _a.size;
-    return (_c = (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.lineHeight;
+    return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.lineHeight;
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -7126,11 +7149,11 @@ var Checkbox = function (_a) {
             return !checked;
         });
     };
-    return (jsxs$1(Container$e, __assign({ disabled: disabled }, { children: [jsx$1(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox" }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Text$4, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox-text", htmlFor: id }, { children: text }), void 0)] }), void 0));
+    return (jsxs$1(Container$h, __assign({ disabled: disabled }, { children: [jsx$1(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.colors.neutral250 : theme.colors.neutral700, "data-testid": "checkbox" }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Text$4, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.colors.neutral250 : theme.colors.neutral700, "data-testid": "checkbox-text", htmlFor: id }, { children: text }), void 0)] }), void 0));
 };
-var templateObject_1$r, templateObject_2$k, templateObject_3$e, templateObject_4$a;
+var templateObject_1$v, templateObject_2$n, templateObject_3$e, templateObject_4$a;
 
-var getStylesBySize$3 = function (size) {
+var getStylesBySize$4 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7173,15 +7196,15 @@ var getStylesBySize$3 = function (size) {
             };
     }
 };
-var Wrapper$4 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Container$d = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
+var Wrapper$4 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$g = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.container;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.container;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
 });
 var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __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;
@@ -7190,7 +7213,7 @@ var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __make
 var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  border: ", " solid\n    ", ";\n  border-radius: 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  border: ", " solid\n    ", ";\n  border-radius: 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.input.borderSize;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input.borderSize;
 }, function (_a) {
     var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
     return (disabled ? disabledColor : color);
@@ -7201,24 +7224,24 @@ var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __ma
 var CustomRadioCheck = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: ", ";\n  width: ", ";\n  background-color: #fff;\n"], ["\n  border-radius: 50%;\n  height: ", ";\n  width: ", ";\n  background-color: #fff;\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.check;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.check;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
 });
 var Text$3 = newStyled.label(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  margin-left: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n"], ["\n  margin-left: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n"])), function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.text.marginLeft;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.marginLeft;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.text.fontSize;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.fontSize;
 }, function (_a) {
     var _b;
     var size = _a.size;
-    return (_b = getStylesBySize$3(size)) === null || _b === void 0 ? void 0 : _b.text.lineHeight;
+    return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.lineHeight;
 }, function (_a) {
     var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
     return (disabled ? disabledColor : color);
@@ -7230,9 +7253,9 @@ var RadioInput = function (_a) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$d, __assign({ size: size, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: name + "-" + id, type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "custom-radio" }, { children: checked && jsx$1(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsx$1(Text$3, __assign({ size: size, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "label", htmlFor: name + "-" + id }, { children: label }), void 0)] }, void 0));
+    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$g, __assign({ size: size, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: name + "-" + id, type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.colors.neutral700, disabledColor: theme.colors.neutral250, "data-testid": "custom-radio" }, { children: checked && jsx$1(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsx$1(Text$3, __assign({ size: size, disabled: disabled, color: theme.colors.neutral700, disabledColor: theme.colors.neutral250, "data-testid": "label", htmlFor: name + "-" + id }, { children: label }), void 0)] }, void 0));
 };
-var templateObject_1$q, templateObject_2$j, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
+var templateObject_1$u, templateObject_2$m, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
 
 var RadioGroupInput = function (_a) {
     var 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;
@@ -7246,8 +7269,8 @@ var RadioGroupInput = function (_a) {
         }) }), void 0));
 };
 
-var Wrapper$3 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Container$c = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Wrapper$3 = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Container$f = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
@@ -7261,34 +7284,34 @@ var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemp
 var Minimalistic = function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
     var theme = useTheme();
-    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$c, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.palette.secondary.default, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$c, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.palette.secondary.default }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
+    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$f, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.colors.secondary, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$f, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.colors.secondary }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$p, templateObject_2$i, templateObject_3$c;
+var templateObject_1$t, templateObject_2$l, templateObject_3$c;
 
-var Container$b = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
-var Title$2 = newStyled.h1(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"], ["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Container$e = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
+var Title$2 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"], ["\n  font-weight: 700;\n  font-size: 1rem;\n  line-height: 1.25rem;\n  color: ", ";\n  margin: 0;\n  margin-bottom: 0.125rem;\n  text-align: center;\n"])), function (props) { return props.color; });
 var Details$1 = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"])), function (props) { return props.color; });
 var PriceContainer$1 = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"])));
 var Simple = function (_a) {
     var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
     var theme = useTheme();
-    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$b, { children: [jsx$1(Title$2, __assign({ color: theme.palette.secondary.default, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.palette.secondary.default, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
+    return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$e, { children: [jsx$1(Title$2, __assign({ color: theme.colors.secondary, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.secondary, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$o, templateObject_2$h, templateObject_3$b, templateObject_4$8;
+var templateObject_1$s, templateObject_2$k, templateObject_3$b, templateObject_4$8;
 
 var Bundle = {
     Minimalistic: Minimalistic,
     Simple: Simple,
 };
 
-var Container$a = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"])));
+var Container$d = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n"])));
 var Tag = function (_a) {
     var text = _a.text, className = _a.className;
-    return jsx$1(Container$a, __assign({ className: className }, { children: text }), void 0);
+    return jsx$1(Container$d, __assign({ className: className }, { children: text }), void 0);
 };
-var templateObject_1$n;
+var templateObject_1$r;
 
-var getStylesBySize$2 = function (size) {
+var getStylesBySize$3 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7319,11 +7342,11 @@ var getStylesBySize$2 = function (size) {
 var CategoryTag = function (_a) {
     var text = _a.text, size = _a.size, className = _a.className;
     var theme = useTheme();
-    var stylesBySize = getStylesBySize$2(size);
-    return (jsx(Tag, { css: __assign({ backgroundColor: theme.shades.white, fontWeight: 600, color: theme.shades.gray700 }, stylesBySize), text: text, className: className }, void 0));
+    var stylesBySize = getStylesBySize$3(size);
+    return (jsx(Tag, { css: __assign({ backgroundColor: theme.colors.white, fontWeight: 600, color: theme.colors.neutral700 }, stylesBySize), text: text, className: className }, void 0));
 };
 
-var getStylesBySize$1 = function (size) {
+var getStylesBySize$2 = function (size) {
     switch (size) {
         case ComponentSize.Large:
             return {
@@ -7353,7 +7376,7 @@ var getStylesBySize$1 = function (size) {
 };
 var SeasonOfferTag = function (_a) {
     var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className;
-    var stylesBySize = getStylesBySize$1(size);
+    var stylesBySize = getStylesBySize$2(size);
     return (jsx(Tag, { css: __assign({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
 };
 
@@ -7387,50 +7410,68 @@ var Timer = function (_a) {
     return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
 };
 
-var Label = newStyled.span(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
+var Label = newStyled.span(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"], ["\n  font-weight: 600;\n  color: ", ";\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var MandatoryIcon = newStyled.span(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
+var MandatoryIcon = newStyled.span(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 0.25rem;\n"], ["\n  color: ", ";\n  margin-left: 0.25rem;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
 var InputLabel = function (_a) {
     var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
     var theme = useTheme();
-    return (jsxs$1(Label, __assign({ color: isDisabled ? theme.shades.gray250 : theme.shades.gray700 }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.semantic.alert }, { children: "*" }), void 0)] }), void 0));
+    return (jsxs$1(Label, __assign({ color: isDisabled ? theme.colors.neutral250 : theme.colors.neutral700 }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.colors.semantic.error }, { children: "*" }), void 0)] }), void 0));
 };
-var templateObject_1$m, templateObject_2$g;
+var templateObject_1$q, templateObject_2$j;
 
 var isEmpty = function (value) {
     return value.length === 0;
 };
 
-var ErrorText = newStyled.h3(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
-var ErrorContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
+var ErrorText = newStyled.h3(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
+var ErrorContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
 var Error$1 = function (_a) {
     var error = _a.error;
     var theme = useTheme();
-    return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.semantic.alert, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.semantic.alert }, { children: error }), void 0)] }, void 0));
+    return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.error, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.colors.semantic.error }, { children: error }), void 0)] }, void 0));
 };
-var templateObject_1$l, templateObject_2$f;
+var templateObject_1$p, templateObject_2$i;
 
-var Container$9 = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+var Container$c = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  height: 3rem;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var StyledInput = newStyled.input(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  padding: 0.875rem 1rem 0.625rem;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  font-weight: 400;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 0.875rem 1rem 0.625rem;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  line-height: 1.5rem;\n  color: ", ";\n  font-weight: 400;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
-    var borderColor = _a.borderColor;
-    return borderColor;
+var StyledInput = newStyled.input(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+    var padding = _a.padding;
+    return padding;
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius;
+}, function (_a) {
+    var border = _a.border;
+    return border;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
 }, function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight;
 }, function (_a) {
     var placeholderColor = _a.placeholderColor;
     return placeholderColor;
 }, function (_a) {
-    var color = _a.color;
-    return color;
+    var highlight = _a.highlight;
+    return highlight;
+}, function (_a) {
+    var boxShadow = _a.boxShadow;
+    return boxShadow;
 }, function (_a) {
     var disabledBackgroundColor = _a.disabledBackgroundColor;
     return disabledBackgroundColor;
@@ -7445,7 +7486,7 @@ var StyledInput = newStyled.input(templateObject_2$e || (templateObject_2$e = __
     return disabledColor;
 });
 var InputWrapper = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  height: 100%;\n"])));
-var templateObject_1$k, templateObject_2$e, templateObject_3$a;
+var templateObject_1$o, templateObject_2$h, templateObject_3$a;
 
 var BaseInput = function (_a) {
     var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
@@ -7473,67 +7514,82 @@ var BaseInput = function (_a) {
         return InputValidationType.Valid;
     };
     var styling = {
-        borderColor: theme.shades.gray200,
-        color: theme.shades.gray700,
-        placeholderColor: theme.shades.gray400,
-        disabledBackgroundColor: theme.shades.gray010,
-        disabledColor: theme.shades.gray250,
+        border: theme.component.input.border,
+        borderRadius: theme.component.input.borderRadius,
+        color: theme.component.input.color,
+        placeholderColor: theme.component.input.placeholderColor,
+        disabledBackgroundColor: theme.colors.background.disabled,
+        disabledColor: theme.colors.text.disabled,
+        fontSize: theme.component.input.fontSize,
+        fontWeight: theme.component.input.fontWeight,
+        padding: theme.component.input.padding,
+        lineHeight: theme.component.input.lineHeight,
+        highlight: theme.colors.border.highlight,
+        boxShadow: theme.component.input.boxShadow,
     };
-    return (jsxs$1(Container$9, __assign({ color: status === InputValidationType.Valid
-            ? theme.shades.gray700
+    return (jsxs$1(Container$c, __assign({ color: status === InputValidationType.Valid
+            ? theme.colors.neutral700
             : status === InputValidationType.Error
-                ? theme.semantic.alert
+                ? theme.colors.semantic.error
                 : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsx$1(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
 };
 
-var Container$8 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  input {\n    border-radius: 0.5rem 1rem 1rem 0.5rem;\n  }\n"], ["\n  input {\n    border-radius: 0.5rem 1rem 1rem 0.5rem;\n  }\n"])));
-var ButtonContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0 0.5rem 0.5rem 0;\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0 0.5rem 0.5rem 0;\n  }\n"])));
+var Container$b = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  input {\n    border-radius: ", ";\n  }\n"], ["\n  input {\n    border-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.inputCustom.input.borderRadius;
+});
+var ButtonContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.component.inputCustom.button.borderRadius;
+});
 var Custom = function (_a) {
     var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
+    var theme = useTheme();
     var props = {
         onClick: onClick,
         text: text,
         disabled: rest.disabled,
     };
-    return (jsx$1(Container$8, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }, void 0) }), void 0) }, void 0));
+    return (jsx$1(Container$b, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
 };
-var templateObject_1$j, templateObject_2$d;
+var templateObject_1$n, templateObject_2$g;
 
-var SuccessContainer = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
-var SuccessMessage = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
+var SuccessContainer = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
+var SuccessMessage = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
 var SuccessText = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"])));
 var Success = function (_a) {
     var children = _a.children, successText = _a.successText;
     return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
 };
-var templateObject_1$i, templateObject_2$c, templateObject_3$9;
+var templateObject_1$m, templateObject_2$f, templateObject_3$9;
 
-var ButtonContainer = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5rem;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5rem;\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var status = _a.status, type = _a.type;
-    return status === InputValidationType.Empty && type === 'primary' ? '#808080' : '';
+var ButtonContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var status = _a.status, type = _a.type, theme = _a.theme;
+    return status === InputValidationType.Empty && type === 'primary' && theme.colors.neutral400;
 });
 var BasePlusButton = function (_a) {
     var onClick = _a.onClick, onClickEdit = _a.onClickEdit, text = _a.text, success = _a.success, editText = _a.editText, successText = _a.successText, rest = __rest(_a, ["onClick", "onClickEdit", "text", "success", "editText", "successText"]);
     var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
-    var SuccessComponent = (jsx$1(Success, __assign({ successText: successText }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary" }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
-    var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary" }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
+    var theme = useTheme();
+    var SuccessComponent = (jsx$1(Success, __assign({ successText: successText }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
+    var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
     return success ? SuccessComponent : Input;
 };
-var templateObject_1$h;
+var templateObject_1$l;
 
-var Container$7 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
-var IconContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
+var Container$a = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
+var IconContainer$2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
 var BasePlusIcon = function (_a) {
     var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
     var theme = useTheme();
     var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
-    return (jsx$1(Container$7, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$2, __assign({ color: status === InputValidationType.Valid
-                    ? theme.shades.gray700
+    return (jsx$1(Container$a, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$2, __assign({ color: status === InputValidationType.Valid
+                    ? theme.colors.neutral700
                     : status === InputValidationType.Error
-                        ? theme.semantic.alert
-                        : '' }, { children: createElement(Icon, { fill: theme.shades.gray250 }) }), void 0) }), void 0) }, void 0));
+                        ? theme.colors.semantic.error
+                        : '' }, { children: createElement(Icon, { fill: theme.colors.neutral250 }) }), void 0) }), void 0) }, void 0));
 };
-var templateObject_1$g, templateObject_2$b;
+var templateObject_1$k, templateObject_2$e;
 
 var Input = {
     Simple: BaseInput,
@@ -7547,7 +7603,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
     Input: Input
 });
 
-var Container$6 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"])), function (_a) {
+var Container$9 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  border: 0.063rem solid ", ";\n  border-radius: 0.25rem;\n  padding: 0.375rem;\n  cursor: ", ";\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -7563,11 +7619,11 @@ var Container$6 = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
 var PaymentMethod = function (_a) {
     var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsx$1(Container$6, __assign({ width: width, height: height, borderColor: theme.shades.gray100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
+    return (jsx$1(Container$9, __assign({ width: width, height: height, borderColor: theme.colors.neutral100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
 };
-var templateObject_1$f;
+var templateObject_1$j;
 
-var Text$1 = newStyled.h3(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
+var Text$1 = newStyled.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 0.875rem;\n  border-radius: 0.125rem;\n  display: initial;\n  color: ", ";\n"])), function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
@@ -7577,27 +7633,27 @@ var Text$1 = newStyled.h3(templateObject_1$e || (templateObject_1$e = __makeTemp
 var OfferBanner = function (_a) {
     var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
     var theme = useTheme();
-    return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.shades.gray700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
+    return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.neutral700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
 };
-var templateObject_1$e;
+var templateObject_1$i;
 
-var Wrapper$2 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
-var GrandTotal = newStyled.h1(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.color; });
+var Wrapper$2 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n"])));
+var GrandTotal = newStyled.h1(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0;\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 700;\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) { return props.color; });
 var Currency = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  margin-right: 0.625rem;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
-var Container$5 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
+var Container$8 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 0.625rem;\n  color: ", ";\n"])), function (props) { return props.highlightColor; });
 var Discount = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n"])));
 var Total = function (_a) {
     var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
     var theme = useTheme();
-    return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$5, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
+    return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.neutral550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$8, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
 };
-var templateObject_1$d, templateObject_2$a, templateObject_3$8, templateObject_4$7, templateObject_5$4;
+var templateObject_1$h, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
 
-var Wrapper$1 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Wrapper$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var ItemContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
+var ItemContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 0.625rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
 var Item$1 = newStyled.h4(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"], ["\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 600;\n"])));
 var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
@@ -7606,27 +7662,27 @@ var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = _
 var Subtotal = function (_a) {
     var subtotal = _a.subtotal, shipping = _a.shipping, taxes = _a.taxes, coupon = _a.coupon, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
     var theme = useTheme();
-    return (jsxs$1(Wrapper$1, __assign({ color: theme.shades.gray700, "data-testid": "subtotal-wrapper" }, { children: [jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: subtotal.label }, void 0), jsx$1(Item$1, { children: subtotal.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: shipping.label }, void 0), jsx$1(Item$1, { children: shipping.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: taxes.label }, void 0), jsx$1(Item$1, { children: taxes.value }, void 0)] }, void 0), coupon &&
+    return (jsxs$1(Wrapper$1, __assign({ color: theme.colors.neutral700, "data-testid": "subtotal-wrapper" }, { children: [jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: subtotal.label }, void 0), jsx$1(Item$1, { children: subtotal.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: shipping.label }, void 0), jsx$1(Item$1, { children: shipping.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: taxes.label }, void 0), jsx$1(Item$1, { children: taxes.value }, void 0)] }, void 0), coupon &&
                 coupon.coupons.map(function (c, i) {
                     return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
                 })] }), void 0));
 };
-var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$6;
+var templateObject_1$g, templateObject_2$c, templateObject_3$7, templateObject_4$6;
 
 var Totals = {
     Total: Total,
     Subtotal: Subtotal,
 };
 
-var Container$4 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
-var IconContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
+var Container$7 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"], ["\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  border-radius: 0.313rem;\n  display: flex;\n  margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
+var IconContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"], ["\n  width: 1rem;\n  height: 0.875rem;\n  margin-right: 0.5rem;\n  margin-top: 0.125rem;\n"])));
 var Text = newStyled.p(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  font-weight: 400;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
 var Details = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 700;\n"], ["\n  color: ", ";\n  font-weight: 700;\n"])), function (props) { return props.color; });
 var Note = function (_a) {
     var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
-    return (jsxs$1(Container$4, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$1, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
+    return (jsxs$1(Container$7, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$1, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
 };
-var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$5;
+var templateObject_1$f, templateObject_2$b, templateObject_3$6, templateObject_4$5;
 
 var Breakpoints = {
     desktop: 1200,
@@ -7656,8 +7712,8 @@ var useWindowDimensions = function () {
     };
 };
 
-var Title$1 = newStyled.h1(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
-var Line = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
+var Title$1 = newStyled.h1(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Line = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
 var Row$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: flex-start;\n"])), function (props) { return (props.isMobile ? 'column' : 'row'); });
 var Col$1 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  flex: 1;\n  margin: 0 1.25rem;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  flex: 1;\n  margin: 0 1.25rem;\n\n  ", "\n"])), function (props) {
     return props.isMobile &&
@@ -7674,38 +7730,38 @@ var DeliveryDetails = function (_a) {
     var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
     var theme = useTheme();
     var isMobile = useWindowDimensions().isMobile;
-    return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.palette.secondary.default }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.shades.gray100 }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.shades.gray150 }, { 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({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.secondary }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.neutral100 }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.neutral150 }, { 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$a, templateObject_2$7, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
+var templateObject_1$e, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
 
-var Container$3 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
-var H1$1 = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"])), function (props) { return props.color; });
+var Container$6 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n"])));
+var H1$2 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  color: ", ";\n  margin-right: 0.313rem;\n"])), function (props) { return props.color; });
 var ScrollToTop = function (_a) {
     var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
     var theme = useTheme();
-    return (jsxs$1(Container$3, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$1, __assign({ color: theme.shades.gray700 }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.palette.primary.default }, void 0)] }), void 0));
+    return (jsxs$1(Container$6, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.neutral700 }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.primary }, void 0)] }), void 0));
 };
-var templateObject_1$9, templateObject_2$6;
+var templateObject_1$d, templateObject_2$9;
 
-var Container$2 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"])));
-var H1 = newStyled.h1(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
+var Container$5 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #dfefeb;\n  padding: 0.75rem 0;\n"])));
+var H1$1 = newStyled.h1(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: ", ";\n  margin-left: 0.625rem;\n"])), function (props) { return props.color; });
 var OrderBar = function (_a) {
     var message = _a.message;
     var theme = useTheme();
-    return (jsxs$1(Container$2, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign({ color: theme.shades.gray700 }, { children: message }), void 0)] }, void 0));
+    return (jsxs$1(Container$5, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.neutral700 }, { children: message }), void 0)] }, void 0));
 };
-var templateObject_1$8, templateObject_2$5;
+var templateObject_1$c, templateObject_2$8;
 
-var TableElement = newStyled.table(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
-var TableCell = newStyled.td(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
+var TableElement = newStyled.table(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  border: 0.063rem solid ", ";\n  border-spacing: 0;\n  font-size: 0.875rem;\n  line-height: 3.125rem;\n  width: 100%;\n  color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
+var TableCell = newStyled.td(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  padding: 0 1.25rem;\n  text-align: center;\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:first-of-type {\n    font-weight: 700;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableRow = newStyled.tr(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
 var SizeTable = function (_a) {
     var headers = _a.headers, data = _a.data;
     var theme = useTheme();
-    return (jsxs$1(TableElement, __assign({ color: theme.shades.gray700, borderColor: theme.shades.gray100 }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.shades.gray010 }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.shades.gray100 }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.shades.gray010 }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.shades.gray100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
+    return (jsxs$1(TableElement, __assign({ color: theme.colors.neutral700, borderColor: theme.colors.neutral100 }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.colors.neutral10 }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.colors.neutral100 }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.neutral10 }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.colors.neutral100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
 };
-var templateObject_1$7, templateObject_2$4, templateObject_3$4, templateObject_4$3;
+var templateObject_1$b, templateObject_2$7, templateObject_3$4, templateObject_4$3;
 
 /* eslint-disable no-param-reassign */
 var index$2 = function (breakpoints) {
@@ -7793,15 +7849,15 @@ var breakpoints = {
 };
 var mediaQueries = index$2(Object.values(breakpoints).map(function (bp) { return "@media (min-width: " + bp + "px)"; }));
 
-var Img = newStyled.img(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
+var Img = newStyled.img(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image = function (_a) {
     var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
     return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
 };
-var templateObject_1$6;
+var templateObject_1$a;
 
-var Container$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
-var DescriptionContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), mediaQueries({
+var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n"])));
+var DescriptionContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", ";\n  width: 100%;\n"])), mediaQueries({
     marginLeft: ['0.938rem', '1.875rem'],
 }));
 var Title = newStyled.h2(function (_a) {
@@ -7835,9 +7891,9 @@ var PriceContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = _
 var SimpleOrderItem = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
     var theme = useTheme();
-    return (jsxs$1(Container$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsx$1(Title, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.shades.gray700 }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.shades.gray700, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsx$1(Title, __assign({ color: theme.colors.neutral700 }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.neutral700 }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.neutral700, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
 };
-var templateObject_1$5, templateObject_2$3, templateObject_3$3;
+var templateObject_1$9, templateObject_2$6, templateObject_3$3;
 
 function formatDate(date) {
     var day = date.getDate();
@@ -7846,8 +7902,8 @@ function formatDate(date) {
     return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
 }
 
-var Container = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
-var Heading = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), mediaQueries({
+var Container$3 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: auto;\n  color: #292929;\n"])));
+var Heading = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  ", ";\n  text-align: right;\n  margin-bottom: 10px;\n"])), mediaQueries({
     fontSize: ['14px', '16px'],
     lineHeight: ['22px', '24px'],
 }));
@@ -7870,9 +7926,9 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
 var P = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"], ["\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 24px;\n  margin: 0;\n"])));
 var Review = function (_a) {
     var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
-    return (jsxs$1(Container, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
+    return (jsxs$1(Container$3, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
 };
-var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
+var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
 
 var Button = newStyled.button(function () { return ({
     background: 'transparent',
@@ -12125,16 +12181,16 @@ var Slider = /*#__PURE__*/function (_React$Component) {
   return Slider;
 }(React.Component);
 
-var StyledSlider = newStyled(Slider)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
+var StyledSlider = newStyled(Slider)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"], ["\n  .slick-dots {\n    position: static;\n    display: flex !important;\n    justify-content: center;\n    column-gap: ", ";\n    margin-top: ", ";\n  }\n  .slick-prev {\n    left: ", ";\n  }\n  .slick-next {\n    right: ", ";\n  }\n  .slick-prev,\n  .slick-next {\n    width: fit-content;\n    height: fit-content;\n  }\n  .slick-prev:before,\n  .slick-next:before {\n    content: none;\n  }\n  .slick-dots li {\n    margin: 0;\n    width: auto;\n    line-height: 0;\n    height: auto;\n  }\n"])), function (props) { return props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
     return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
 }, function (_a) {
     var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
     return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
 });
-var templateObject_1$3;
+var templateObject_1$7;
 
-var getStylesBySize = function (size) {
+var getStylesBySize$1 = function (size) {
     // rem units
     switch (size) {
         case ComponentSize.Large:
@@ -12166,7 +12222,7 @@ var getStylesBySize = function (size) {
 var SliderNavigation = function (_a) {
     var children = _a.children, infinite = _a.infinite, arrows = _a.arrows, adaptiveHeight = _a.adaptiveHeight, dotsSize = _a.dotsSize, dotListMarginTop = _a.dotListMarginTop, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
     var _c = useState(0), activeIndex = _c[0], setActiveIndex = _c[1];
-    var styles = getStylesBySize(dotsSize);
+    var styles = getStylesBySize$1(dotsSize);
     var theme = useTheme();
     var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
     var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
@@ -12182,32 +12238,35 @@ var SliderNavigation = function (_a) {
         prevArrow: prevArrow,
         adaptiveHeight: adaptiveHeight,
         // eslint-disable-next-line react/display-name
-        customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles.dotWidth, height: styles.dotHeight, fill: activeIndex === i ? theme.shades.gray700 : 'none' }, i)); },
+        customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles.dotWidth, height: styles.dotHeight, fill: activeIndex === i ? theme.colors.neutral700 : 'none' }, i)); },
         afterChange: setActiveIndex,
     };
-    return (jsx("div", __assign({ css: { padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0 } }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
+    return (jsx("div", __assign({ css: {
+            padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0,
+            maxWidth: '100%',
+        } }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
 };
 
-var List = newStyled.ul(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
-var Item = newStyled.li(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"], ["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"])));
+var List = newStyled.ul(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  margin: 0;\n  padding: 0;\n"])));
+var Item = newStyled.li(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"], ["\n  width: 1.25rem;\n  list-style: none;\n  margin-right: 1.5rem;\n  position: relative;\n  line-height: 0;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    .dropdownWrapper {\n      visibility: visible;\n    }\n  }\n"])));
 var DropdownWrapper = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"], ["\n  right: -0.938rem;\n  min-width: 9.375rem;\n  position: absolute;\n  padding-top: 0.625rem;\n  margin-top: -0.188rem;\n  width: max-content;\n  visibility: hidden;\n"])));
 var ArrowContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"], ["\n  transform: rotate(180deg);\n  display: flex;\n  justify-content: flex-start;\n  margin-bottom: -0.063rem;\n  padding-left: 0.938rem;\n"])));
 var StyledDropdown = newStyled.ul(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"], ["\n  margin: 0;\n  padding: 0;\n  border: 0.063rem solid ", ";\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
 var DropdownItem = newStyled.li(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"], ["\n  list-style: none;\n  padding: 0.813rem;\n  border-bottom: 0.063rem solid ", ";\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:last-child {\n    border-bottom: none;\n    border-radius: 0 0 0.5rem 0.5rem;\n  }\n\n  &:first-of-type {\n    border-radius: 0.5rem 0.5rem 0 0;\n  }\n\n  &:only-child {\n    border-radius: 0.5rem;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
-var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
+var templateObject_1$6, templateObject_2$4, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
 var DropdownListIcons = function (_a) {
     var items = _a.items;
     var theme = useTheme();
-    return (jsx$1(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs$1(Item, { children: [createElement(item.Icon, { fill: theme.shades.gray700 }), jsx$1(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
+    return (jsx$1(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs$1(Item, { children: [createElement(item.Icon, { fill: theme.colors.neutral700 }), jsx$1(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
 };
 var Dropdown = function (_a) {
     var items = _a.items;
     var theme = useTheme();
-    return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.shades.gray200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.shades.gray200 }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.shades.gray200, color: theme.shades.gray550, hoverColor: theme.shades.gray010 }, { children: item.description }), index)); }) }), void 0)] }), void 0));
+    return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.colors.neutral200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.colors.neutral200 }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.colors.neutral200, color: theme.colors.neutral550, hoverColor: theme.colors.neutral10 }, { children: item.description }), index)); }) }), void 0)] }), void 0));
 };
 
-var StyledButton = newStyled(BaseButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
+var StyledButton = newStyled(BaseButton)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 12.5rem;\n  height: 2.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  border: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
 var AmazonButton = function (_a) {
     var onClick = _a.onClick;
     return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
@@ -12216,7 +12275,7 @@ var PaypalButton = function (_a) {
     var onClick = _a.onClick;
     return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
 };
-var templateObject_1$1;
+var templateObject_1$5;
 
 var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -12224,8 +12283,8 @@ var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
     PaypalButton: PaypalButton
 });
 
-var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __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'); });
-var Col = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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'); });
+var Col = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var Row = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 10px;\n\n  ", "};\n"])), function (props) {
     return props.rightToLeft &&
         "\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  ";
@@ -12236,14 +12295,133 @@ var FreeShipping = newStyled.span(templateObject_6 || (templateObject_6 = __make
 var CrossSellCheckbox = function (_a) {
     var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
     var theme = useTheme();
-    return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.shades.gray010, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.semantic.alert }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.shades.gray700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.colors.neutral10, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.colors.neutral700 }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.colors.semantic.error }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.colors.neutral700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1$4, templateObject_2$3, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     CrossSellCheckbox: CrossSellCheckbox
 });
 
-export { Accordion$1 as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, FitPredictor, Icon, IconButton, Image, index$3 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, TextButton, ThemeProvider, Timer, Tooltip, Totals };
+var ImageContainer = newStyled.div(function (_a) {
+    var width = _a.width, height = _a.height;
+    return ({
+        position: 'relative',
+        width: width,
+        height: height,
+    });
+});
+var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n"])));
+var H1 = newStyled.h1(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.secondary; }, function (props) { return props.align; });
+var getStylesBySize = function (size) {
+    switch (size) {
+        case ComponentSize.Medium:
+            return {
+                width: '10.75rem',
+                height: '14.375rem',
+            };
+        case ComponentSize.Small:
+            return {
+                width: '9.813rem',
+                height: '13.125rem',
+            };
+        /* istanbul ignore next */
+        default:
+            return {
+                width: '10.75rem',
+                height: '14.375rem',
+            };
+    }
+};
+var ProductItemMobile = function (_a) {
+    var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
+    var theme = useTheme();
+    var styles = getStylesBySize(size);
+    return (jsxs(Container$2, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
+};
+var templateObject_1$3, templateObject_2$2;
+
+var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"])));
+function withProductGrid(ProductItemComponent, data) {
+    function WithProductGrid(props) {
+        return (jsx$1(Container$1, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
+    }
+    /* istanbul ignore next */
+    var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
+    WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
+    return WithProductGrid;
+}
+var templateObject_1$2;
+
+var Collection = {
+    ProductItemMobile: ProductItemMobile,
+    withProductGrid: withProductGrid,
+};
+
+var Backdrop = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"], ["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
+    var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
+    return isOpen ? "background-color: " + backgroundColor + ";" : 'transparent';
+});
+var Sidebar = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"], ["\n  height: 100%;\n  width: ", ";\n  position: fixed;\n  z-index: 3;\n  ", ": 0;\n  top: 0;\n  background-color: ", ";\n  overflow-x: hidden;\n  transition: transform 0.3s ease-in-out;\n\n  ", "\n"])), function (_a) {
+    var width = _a.width;
+    return width;
+}, function (_a) {
+    var position = _a.position;
+    return position;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var isOpen = _a.isOpen, position = _a.position;
+    return isOpen
+        ? 'transform: translateX(0);'
+        : "transform: translateX(" + (position === 'left' ? '-100%' : '100%') + ");";
+});
+var Drawer = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.backdropColor, backdropColor = _c === void 0 ? 'rgba(0, 0, 0, 0.5)' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.width, width = _e === void 0 ? '33%' : _e, onClickOutside = _a.onClickOutside;
+    var _f = useState(isOpen), isOpenState = _f[0], setIsOpen = _f[1];
+    var _g = useState(isOpen), isMounted = _g[0], setIsMounted = _g[1];
+    useEffect(function () {
+        if (isOpen === false) {
+            setIsOpen(isOpen);
+            var timeout_1 = setTimeout(function () {
+                setIsMounted(isOpen);
+                onClose && onClose();
+            }, 300);
+            return function () {
+                clearTimeout(timeout_1);
+            };
+        }
+        setIsMounted(isOpen);
+        var timeout = setTimeout(function () {
+            setIsOpen(isOpen);
+            onOpen && onOpen();
+        }, 100);
+        return function () {
+            clearTimeout(timeout);
+        };
+    }, [isOpen, onClose, onOpen]);
+    return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
+};
+var templateObject_1$1, templateObject_2$1;
+
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return (size ? size : '100%');
+}, function (_a) {
+    var size = _a.size;
+    return (size ? size : '100%');
+});
+var Animation = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"], ["\n  @keyframes svg--animation {\n    0% {\n      transform: rotateZ(0deg);\n    }\n    100% {\n      transform: rotateZ(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  animation: linear infinite svg--animation;\n  animation-duration: ", "s;\n"])), function (_a) {
+    var animationDuration = _a.animationDuration;
+    return animationDuration;
+});
+var Spinner = function (_a) {
+    var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
+    return (jsx$1(Container, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
+};
+var templateObject_1, templateObject_2;
+
+export { Accordion$1 as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FitPredictor, Icon, IconButton, Image, index$3 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, TextButton, ThemeProvider, Timer, Tooltip, Totals };
 //# sourceMappingURL=index.esm.js.map