@thecb/components 10.4.4 → 10.4.5-beta.1

package/dist/index.cjs.js

@@ -18437,6 +18437,285 @@ var TrashIconV2 = function TrashIconV2(_ref) {
 };
 var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$2, "primary");
 
+var DisabledAccountsAddIcon = function DisabledAccountsAddIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V84.5326C31.2213 84.5326 55.7247 98.7028 77.0408 78.1002Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M88.0002 51.4983C88.0002 72.4847 70.9876 89.4983 50.0002 89.4983C29.0128 89.4983 12.0002 72.4847 12.0002 51.4983C12.0002 30.5109 29.0128 13.4983 50.0002 13.4983C59.0261 13.4983 67.3177 16.6447 73.8366 21.902C82.475 28.8674 88.0002 39.5368 88.0002 51.4983Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.59255",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V81.3853",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.3362 78.1002V11.6448C23.3362 11.0302 23.8264 10.5324 24.4306 10.5324H68.0622C68.6664 10.5324 69.1556 11.0302 69.1556 11.6448V84.1973C69.1556 84.1973 58.4947 90.719 43.9673 88.1179C32.3336 86.0346 23.3362 78.1002 23.3362 78.1002Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M69.156 84.1973V11.6448C69.156 11.0302 68.6658 10.5324 68.0625 10.5324H24.43C23.8258 10.5324 23.3365 11.0302 23.3365 11.6448V78.1002",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.3362 19.3115H69.1556",
+    stroke: "#878E9B",
+    strokeWidth: "1.9285",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M69.156 40.1818H77.041",
+    stroke: "#878E9B",
+    strokeWidth: "1.9285",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 36.5974H62.672V31.4038H29.82V36.5974Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 36.5974H62.672V31.4038H29.82V36.5974Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 45.9207H62.672V40.7271H29.82V45.9207Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 45.9207H62.672V40.7271H29.82V45.9207Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M29.8201 26.2602H46.2466",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 63.0901H62.672V57.8964H29.82V63.0901Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 63.0901H62.672V57.8964H29.82V63.0901Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 72.4143H62.672V67.2207H29.82V72.4143Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 72.4143H62.672V67.2207H29.82V72.4143Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M29.8201 52.7535H46.2466",
+    stroke: "#878E9B",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M73.8364 21.9017C82.4748 28.8671 88 39.5365 88 51.498C88 72.4844 70.9874 89.498 50 89.498C29.0126 89.498 12 72.4844 12 51.498",
+    stroke: "#878E9B",
+    strokeWidth: "2.59255",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M69.1557 40.1818H77.0407V31.4038H69.1557V40.1818Z",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.3363 19.3112H69.1557V10.5323H23.3363V19.3112Z",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M72.0041 90.1C79.3495 90.1 85.3041 84.1454 85.3041 76.8C85.3041 69.4546 79.3495 63.5 72.0041 63.5C64.6587 63.5 58.7041 69.4546 58.7041 76.8C58.7041 84.1454 64.6587 90.1 72.0041 90.1Z",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_7610_37196",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "65",
+    y: "69",
+    width: "15",
+    height: "15"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_7610_37196)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    x: "60.2041",
+    y: "64.5",
+    width: "24",
+    height: "24",
+    fill: "white"
+  })));
+};
+
+var DisabledPropertiesAddIcon = function DisabledPropertiesAddIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M81.2621 37.7524C81.2621 38.0343 81.0333 38.2631 80.7514 38.2631H61.1325C60.8505 38.2631 60.6227 38.0343 60.6227 37.7524V36.6749C60.6227 36.393 60.8505 36.1641 61.1325 36.1641H80.7514C81.0333 36.1641 81.2621 36.393 81.2621 36.6749V37.7524ZM72.0783 49.0989V40.0831C72.0783 39.5434 72.5147 39.107 73.0544 39.107H79.2877C79.8274 39.107 80.2638 39.5434 80.2638 40.0831V48.2087C80.2638 48.7485 79.8274 49.1858 79.2877 49.1858H72.1643C72.116 49.1858 72.0783 49.1462 72.0783 49.0989ZM79.4277 51.0531C79.8892 51.0531 80.2638 51.4277 80.2638 51.8902V60.2948C80.2638 60.7564 79.8892 61.131 79.4277 61.131H72.9144C72.4529 61.131 72.0783 60.7564 72.0783 60.2948V51.0531H79.4277ZM61.6519 48.2898V40.003C61.6519 39.5077 62.0526 39.107 62.5479 39.107H68.9414C69.4367 39.107 69.8374 39.5077 69.8374 40.003V49.1791C69.8374 49.1829 69.8345 49.1858 69.8316 49.1858H62.5479C62.0526 49.1858 61.6519 48.7842 61.6519 48.2898ZM62.6444 51.0531H69.7351C69.7911 51.0531 69.8374 51.0994 69.8374 51.1564V60.1394C69.8374 60.6868 69.3933 61.131 68.8458 61.131H62.6444C62.096 61.131 61.6519 60.6868 61.6519 60.1394V52.0456C61.6519 51.4972 62.096 51.0531 62.6444 51.0531ZM81.2621 63.845C81.2621 64.1269 81.0333 64.3567 80.7514 64.3567H61.1325C60.8505 64.3567 60.6227 64.1269 60.6227 63.845V62.7675C60.6227 62.4856 60.8505 62.2577 61.1325 62.2577H80.7514C81.0333 62.2577 81.2621 62.4856 81.2621 62.7675V63.845ZM63.917 17.6758L62.0526 16.4226L40.6542 30.8134V73.442H44.0422V36.7994C44.0422 36.448 44.327 36.1641 44.6775 36.1641H57.367C57.7175 36.1641 58.0023 36.448 58.0023 36.7994V73.442H73.8365H78.2199C79.7917 71.6057 81.8328 68.8076 83.4635 65.1571V65.1474V30.8085L63.917 17.6758ZM46.1624 12.7267V18.6152L50.7881 15.4735V12.5857V9.95762V8.28345H46.1624V10.0986V12.7267ZM88.2929 28.3726L63.216 11.5227C62.8617 11.2871 62.4571 11.1693 62.0526 11.1693C61.648 11.1693 61.2425 11.2871 60.8882 11.5237L40.8 25.0204L35.8403 28.3533C35.6385 28.4875 35.5844 28.7607 35.7196 28.9625L36.5586 30.2254C36.6436 30.3528 36.7845 30.4223 36.9265 30.4223C37.0114 30.4223 37.0974 30.3982 37.1727 30.347L38.2521 29.6219L62.0526 13.6313L86.9615 30.3673C87.032 30.4136 87.1102 30.4358 87.1884 30.4358C87.3187 30.4358 87.4481 30.3721 87.5263 30.2543L88.4049 28.9335C88.5285 28.7482 88.4792 28.4971 88.2929 28.3726ZM38.2525 59.7028V73.4418H28.7249C28.6313 73.382 28.5454 73.3096 28.4565 73.2439C28.3185 73.1406 28.1852 73.0305 28.0578 72.9147C27.9757 72.8394 27.8917 72.765 27.8145 72.6849C27.6407 72.5024 27.4804 72.3093 27.3356 72.1046C27.2825 72.0293 27.2361 71.9501 27.1869 71.8729C27.0681 71.6846 26.96 71.4886 26.8673 71.284C26.8403 71.226 26.8094 71.171 26.7852 71.1131C26.6771 70.8533 26.595 70.5811 26.5323 70.302C26.5168 70.2325 26.5043 70.162 26.4908 70.0916C26.4367 69.7961 26.399 69.4939 26.399 69.183C26.4 66.0104 29.339 63.4876 32.6159 64.23C33.034 64.3304 33.4617 64.1354 33.6712 63.7647C33.8575 63.4345 34.069 63.1236 34.2901 62.8223C34.3383 62.7576 34.3857 62.692 34.4349 62.6292C34.6579 62.3415 34.8935 62.0673 35.1465 61.8086C35.188 61.767 35.2314 61.7284 35.2739 61.6879C35.5085 61.4571 35.7547 61.2389 36.0096 61.0352L36.1593 60.9145C36.4431 60.6982 36.7395 60.4993 37.0466 60.3159C37.1132 60.2753 37.1808 60.2387 37.2484 60.2C37.5554 60.0272 37.8692 59.866 38.1945 59.7269C38.209 59.7211 38.2225 59.7134 38.238 59.7067C38.2428 59.7057 38.2476 59.7047 38.2525 59.7028ZM48.0673 55.2366C48.8272 55.2366 49.4441 55.8536 49.4441 56.6134C49.4441 57.3732 48.8272 57.9892 48.0673 57.9892C47.3075 57.9892 46.6915 57.3732 46.6915 56.6134C46.6915 55.8536 47.3075 55.2366 48.0673 55.2366Z",
+    fill: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M43.8455 10.3697V13.0248C26.1702 15.8566 12.6213 31.209 12.6213 49.6694C12.6213 53.4068 13.1823 57.0139 14.2144 60.4192C14.4606 61.2331 14.7358 62.0326 15.036 62.8214C16.5171 66.7152 18.6316 70.2992 21.2596 73.4419C21.9558 74.2732 22.6847 75.0765 23.4494 75.844C30.1741 82.5987 39.4767 86.787 49.7399 86.787C60.0032 86.787 69.3048 82.5987 76.0304 75.844C76.7951 75.0765 77.5231 74.2732 78.2192 73.4419C80.3143 70.9354 82.0802 68.149 83.4638 65.1473C84.4863 62.9276 85.2944 60.5911 85.866 58.1628C86.508 55.4334 86.8575 52.5919 86.8575 49.6694C86.8575 46.7603 86.5225 43.9005 85.8746 41.1373L85.8669 36.1379L85.866 35.6252V33.2269C85.8998 33.3013 86.4395 34.3807 86.4559 34.4232C88.4323 39.186 89.4789 44.3504 89.4789 49.6694C89.4789 55.5637 88.1793 61.1578 85.866 66.1939C85.1582 67.7367 84.3569 69.2275 83.4638 70.6554C82.8671 71.6113 82.2376 72.543 81.5656 73.4419C80.9448 74.2703 80.2854 75.0678 79.6037 75.844C72.3142 84.1502 61.6329 89.4083 49.7399 89.4083C27.827 89.4083 10 71.5813 10 49.6694C10 29.7598 24.7181 13.2266 43.8455 10.3697ZM80.751 62.2576C81.033 62.2576 81.2618 62.4855 81.2618 62.7674V63.8459C81.2618 64.1278 81.033 64.3566 80.751 64.3566H61.1331C60.8512 64.3566 60.6223 64.1278 60.6223 63.8459V62.7674C60.6223 62.4855 60.8512 62.2576 61.1331 62.2576H80.751ZM53.1047 10.0859C54.6948 10.223 56.2744 10.4421 57.8308 10.7665L56.7041 11.5573L54.7219 12.8897C54.6456 12.879 54.5684 12.8694 54.4921 12.8588C54.0315 12.7989 53.5681 12.7661 53.1047 12.7236V10.0859ZM80.751 36.165H61.1331C60.8512 36.165 60.6223 36.3929 60.6223 36.6748V37.7523C60.6223 38.0342 60.8512 38.2631 61.1331 38.2631H80.751C81.033 38.2631 81.2618 38.0342 81.2618 37.7523V36.6748C81.2618 36.3929 81.033 36.165 80.751 36.165ZM61.6525 60.1393C61.6525 60.6868 62.0966 61.1309 62.6441 61.1309H68.8455C69.3929 61.1309 69.837 60.6868 69.837 60.1393V51.1563C69.837 51.0994 69.7907 51.054 69.7347 51.054H62.6441C62.0966 51.054 61.6525 51.4971 61.6525 52.0456V60.1393ZM72.0789 60.2948C72.0789 60.7563 72.4526 61.1309 72.9151 61.1309H79.4273C79.8889 61.1309 80.2635 60.7563 80.2635 60.2948V51.8901C80.2635 51.4276 79.8889 51.054 79.4273 51.054H72.0789V60.2948ZM69.8313 49.1857C69.8342 49.1857 69.837 49.1828 69.837 49.179V40.0029C69.837 39.5086 69.4364 39.1069 68.942 39.1069H62.5475C62.0532 39.1069 61.6525 39.5086 61.6525 40.0029V48.2898C61.6525 48.7841 62.0532 49.1857 62.5475 49.1857H69.8313ZM79.2873 49.1857C79.8271 49.1857 80.2635 48.7484 80.2635 48.2087V40.083C80.2635 39.5443 79.8271 39.1069 79.2873 39.1069H73.0541C72.5153 39.1069 72.0789 39.5443 72.0789 40.083V49.0989C72.0789 49.1462 72.1166 49.1857 72.1639 49.1857H79.2873ZM88.2935 28.3725L63.2157 11.5226C62.8623 11.287 62.4577 11.1692 62.0532 11.1692C61.6477 11.1692 61.2422 11.287 60.8888 11.5236L40.7997 25.0213L35.8399 28.3532C35.6381 28.4874 35.585 28.7616 35.7192 28.9634L36.5592 30.2253C36.6432 30.3527 36.7842 30.4222 36.9261 30.4222C37.0111 30.4222 37.097 30.3981 37.1723 30.3469L38.2517 29.6219L62.0522 13.6313L86.9621 30.3672C87.0316 30.4145 87.1098 30.4358 87.188 30.4358C87.3193 30.4358 87.4487 30.373 87.5269 30.2552L88.4055 28.9335C88.5291 28.7481 88.4789 28.497 88.2935 28.3725ZM46.1621 8.28337V10.0995V12.7266L46.163 18.6152L50.7878 15.4734V12.5856V9.95755V8.28337H46.1621ZM46.6921 56.6133C46.6921 57.3732 47.3071 57.9892 48.067 57.9892C48.8278 57.9892 49.4438 57.3732 49.4438 56.6133C49.4438 55.8535 48.8278 55.2375 48.067 55.2375C47.3071 55.2375 46.6921 55.8535 46.6921 56.6133ZM38.2517 40.9027L18.3499 40.8689L18.405 64.5555L26.2419 64.5372C26.4282 64.3267 26.6242 64.1249 26.8347 63.9376V60.3488C26.8347 60.2059 26.9506 60.0901 27.0944 60.0901H33.5131C33.6569 60.0901 33.7728 60.2059 33.7728 60.3488V60.4541C34.5848 59.6266 35.5223 58.9489 36.5351 58.4063V55.6768C36.5351 55.5339 36.6509 55.418 36.7948 55.418H38.2517V54.5867H36.7948C36.6509 54.5867 36.5351 54.4709 36.5351 54.327V51.1669C36.5351 51.0241 36.6509 50.9082 36.7948 50.9082H38.2517V50.0769H36.7948C36.6509 50.0769 36.5351 49.961 36.5351 49.8172V46.6571C36.5351 46.5132 36.6509 46.3974 36.7948 46.3974H38.2517V45.5671H36.7948C36.6509 45.5671 36.5351 45.4512 36.5351 45.3073V42.1473C36.5351 42.0034 36.6509 41.8875 36.7948 41.8875H38.2517V40.9027ZM38.2517 73.442V59.701C36.3487 60.4966 34.7199 61.91 33.6704 63.7648C33.4619 64.1355 33.0342 64.3296 32.6161 64.2301C29.3392 63.4867 26.4002 66.0105 26.3993 69.1831C26.3993 70.9674 27.3291 72.5354 28.7242 73.442H38.2517ZM90.3346 30.2166L89.456 31.5393C88.9491 32.2992 88.1014 32.753 87.188 32.753C86.7198 32.753 86.2679 32.6284 85.8624 32.4006L85.866 35.6252V58.1628C85.2944 60.5911 84.4863 62.9276 83.4638 65.1473L83.4641 30.8084L62.0522 16.4225L41.4765 30.2475L40.6549 30.8142V73.442H44.0418V36.7994C44.0418 36.4489 44.3267 36.165 44.6781 36.165H57.3667C57.7181 36.165 58.002 36.4489 58.002 36.7994V73.442H73.8361L78.2192 73.4419C77.5231 74.2732 76.7951 75.0765 76.0304 75.844L73.8361 75.8441H40.4975L23.4494 75.844C22.6847 75.0765 21.9558 74.2732 21.2596 73.4419L25.9281 73.442C25.0177 72.2583 24.4683 70.7868 24.4683 69.1831C24.4683 68.0168 24.7657 66.9181 25.2735 65.9478H18.349C17.5814 65.9478 16.9567 65.3231 16.9567 64.5555V62.8215L15.036 62.8214C14.7358 62.0326 14.4606 61.2331 14.2144 60.4192L16.9567 60.4193V40.8689H16.4662V38.3596H18.768L18.767 35.9266C18.767 35.7267 18.8491 35.5365 18.9929 35.4004L22.0545 32.5039C22.266 32.304 22.5749 32.2499 22.8395 32.3648C23.104 32.4788 23.2769 32.7404 23.2769 33.0301L23.2778 38.3596H24.4017L24.4007 35.9266C24.4007 35.7267 24.4828 35.5365 24.6266 35.4004L27.6882 32.5039C27.8997 32.304 28.2077 32.2499 28.4732 32.3648C28.7377 32.4788 28.9105 32.7404 28.9105 33.0301L28.9115 38.3596H30.0344L30.0334 35.9266C30.0334 35.7267 30.1155 35.5365 30.2593 35.4004L33.3209 32.5039C33.4233 32.4063 33.5507 32.3446 33.684 32.3195C33.8172 32.2943 33.9601 32.2866 34.2053 32.4566C34.4438 32.6207 34.5037 32.8273 34.5182 32.8679C34.5336 32.9084 34.5433 32.9741 34.5433 33.0301L34.5442 38.3596H35.6681L35.6671 35.9266C35.6671 35.7267 35.7492 35.5365 35.893 35.4004L38.2517 33.1681V32.3919C37.8462 32.6159 37.3944 32.7394 36.9261 32.7394C36.0002 32.7394 35.1419 32.2789 34.6292 31.5084L33.7892 30.2465C32.9512 28.9856 33.292 27.2738 34.5481 26.4299L43.8458 20.1822L43.8455 13.0248V10.3697L43.8439 7.88655C43.8439 6.8274 44.7061 5.96521 45.7652 5.96521H51.1846C52.2437 5.96521 53.105 6.8274 53.105 7.88655L53.1047 10.0859V12.7236L53.105 13.9624L59.6018 9.59741C60.3317 9.10984 61.1794 8.85302 62.0532 8.85302C62.926 8.85302 63.7728 9.10887 64.5075 9.60031L89.5854 26.4483C90.827 27.2815 91.162 28.9721 90.3346 30.2166ZM19.7499 45.5671H23.8127C23.9566 45.5671 24.0724 45.4512 24.0724 45.3073V42.1473C24.0724 42.0034 23.9566 41.8875 23.8127 41.8875H19.7499C19.608 41.8875 19.4911 42.0034 19.4911 42.1473V45.3073C19.4911 45.4512 19.608 45.5671 19.7499 45.5671ZM25.4319 45.5671H29.4947C29.6385 45.5671 29.7544 45.4512 29.7544 45.3073V42.1473C29.7544 42.0034 29.6385 41.8875 29.4947 41.8875H25.4319C25.289 41.8875 25.1731 42.0034 25.1731 42.1473V45.3073C25.1731 45.4512 25.289 45.5671 25.4319 45.5671ZM31.1128 45.5671H35.1757C35.3186 45.5671 35.4344 45.4512 35.4344 45.3073V42.1473C35.4344 42.0034 35.3186 41.8875 35.1757 41.8875H31.1128C30.969 41.8875 30.8531 42.0034 30.8531 42.1473V45.3073C30.8531 45.4512 30.969 45.5671 31.1128 45.5671ZM19.7499 59.0966H23.8127C23.9566 59.0966 24.0724 58.9798 24.0724 58.8369V55.6768C24.0724 55.5339 23.9566 55.418 23.8127 55.418H19.7499C19.608 55.418 19.4911 55.5339 19.4911 55.6768V58.8369C19.4911 58.9798 19.608 59.0966 19.7499 59.0966ZM25.4319 59.0966H29.4947C29.6385 59.0966 29.7544 58.9798 29.7544 58.8369V55.6768C29.7544 55.5339 29.6385 55.418 29.4947 55.418H25.4319C25.289 55.418 25.1731 55.5339 25.1731 55.6768V58.8369C25.1731 58.9798 25.289 59.0966 25.4319 59.0966ZM31.1128 59.0966H35.1757C35.3186 59.0966 35.4344 58.9798 35.4344 58.8369V55.6768C35.4344 55.5339 35.3186 55.418 35.1757 55.418H31.1128C30.969 55.418 30.8531 55.5339 30.8531 55.6768V58.8369C30.8531 58.9798 30.969 59.0966 31.1128 59.0966ZM19.7499 54.5867H23.8127C23.9566 54.5867 24.0724 54.4709 24.0724 54.327V51.1669C24.0724 51.0241 23.9566 50.9082 23.8127 50.9082H19.7499C19.608 50.9082 19.4911 51.0241 19.4911 51.1669V54.327C19.4911 54.4709 19.608 54.5867 19.7499 54.5867ZM25.4319 54.5867H29.4947C29.6385 54.5867 29.7544 54.4709 29.7544 54.327V51.1669C29.7544 51.0241 29.6385 50.9082 29.4947 50.9082H25.4319C25.289 50.9082 25.1731 51.0241 25.1731 51.1669V54.327C25.1731 54.4709 25.289 54.5867 25.4319 54.5867ZM31.1128 54.5867H35.1757C35.3186 54.5867 35.4344 54.4709 35.4344 54.327V51.1669C35.4344 51.0241 35.3186 50.9082 35.1757 50.9082H31.1128C30.969 50.9082 30.8531 51.0241 30.8531 51.1669V54.327C30.8531 54.4709 30.969 54.5867 31.1128 54.5867ZM19.7499 50.0769H23.8127C23.9566 50.0769 24.0724 49.961 24.0724 49.8172V46.6571C24.0724 46.5132 23.9566 46.3974 23.8127 46.3974H19.7499C19.608 46.3974 19.4911 46.5132 19.4911 46.6571V49.8172C19.4911 49.961 19.608 50.0769 19.7499 50.0769ZM25.4319 50.0769H29.4947C29.6385 50.0769 29.7544 49.961 29.7544 49.8172V46.6571C29.7544 46.5132 29.6385 46.3974 29.4947 46.3974H25.4319C25.289 46.3974 25.1731 46.5132 25.1731 46.6571V49.8172C25.1731 49.961 25.289 50.0769 25.4319 50.0769ZM30.8531 49.8172V46.6571C30.8531 46.5132 30.969 46.3974 31.1128 46.3974H35.1757C35.3186 46.3974 35.4344 46.5132 35.4344 46.6571V49.8172C35.4344 49.961 35.3186 50.0769 35.1757 50.0769H31.1128C30.969 50.0769 30.8531 49.961 30.8531 49.8172Z",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "71.9999",
+    cy: "74",
+    r: "12",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M65.9391 74.5102C65.9391 74.7863 66.1629 75.0102 66.4391 75.0102L70.9898 75.0102L70.9898 79.5609C70.9898 79.8371 71.2137 80.0609 71.4898 80.0609L72.5101 80.0609C72.7863 80.0609 73.0101 79.8371 73.0101 79.5609L73.0101 75.0102L77.5609 75.0102C77.837 75.0102 78.0609 74.7863 78.0609 74.5102L78.0609 73.4898C78.0609 73.2137 77.837 72.9898 77.5609 72.9898H73.0101L73.0101 68.4391C73.0101 68.1629 72.7863 67.9391 72.5101 67.9391L71.4898 67.9391C71.2137 67.9391 70.9898 68.1629 70.9898 68.4391L70.9898 72.9898L66.4391 72.9898C66.1629 72.9898 65.9391 73.2137 65.9391 73.4898L65.9391 74.5102Z",
+    fill: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_2013_203",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "65",
+    y: "67",
+    width: "14",
+    height: "14"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M65.9391 74.5102C65.9391 74.7863 66.1629 75.0102 66.4391 75.0102L70.9898 75.0102L70.9898 79.5609C70.9898 79.8371 71.2137 80.0609 71.4898 80.0609L72.5101 80.0609C72.7863 80.0609 73.0101 79.8371 73.0101 79.5609L73.0101 75.0102L77.5609 75.0102C77.837 75.0102 78.0609 74.7863 78.0609 74.5102L78.0609 73.4898C78.0609 73.2137 77.837 72.9898 77.5609 72.9898H73.0101L73.0101 68.4391C73.0101 68.1629 72.7863 67.9391 72.5101 67.9391L71.4898 67.9391C71.2137 67.9391 70.9898 68.1629 70.9898 68.4391L70.9898 72.9898L66.4391 72.9898C66.1629 72.9898 65.9391 73.2137 65.9391 73.4898L65.9391 74.5102Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_2013_203)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M62 64H82V84H62V64Z",
+    fill: "#FEFEFE"
+  })));
+};
+
+var DisabledPaymentMethodsAddIcon = function DisabledPaymentMethodsAddIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100",
+    fill: "none"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "a",
+    x: "-1",
+    y: "0",
+    maskUnits: "userSpaceOnUse",
+    style: {
+      maskType: "luminance"
+    }
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    d: "M97.88 0H-1v96h98.88V0Z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#a)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FEFEFE",
+    fillRule: "evenodd",
+    d: "M91.947 19.2v36.48H48.44v15.6c0 .881-.697 1.603-1.584 1.673l-.141.006H20.402c-1.888-2.755-3.416-5.315-4.649-7.68H40.53v-3.84H14.82v1.972c-6.089-12.75-3.332-19.251-3.332-19.251h13.22V19.2h67.24Z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#878E9B",
+    d: "M48.24 10.56c8.325 0 16.249 2.587 22.793 7.298l.442.323h20.472c.525 0 .958.397 1.013.908l.006.111v36.48c0 .525-.397.958-.908 1.013l-.11.006h-6.48l-.01.039c-4.176 16.497-19.471 28.315-37.217 28.315-21.16 0-38.328-16.668-38.328-37.246 0-11.497 5.358-21.772 13.776-28.603V19.2c0-.525.398-.958.909-1.013l.11-.006h.298c6.447-4.782 14.501-7.621 23.235-7.621Zm34.688 46.139H48.47V71.28c0 1.44-1.138 2.608-2.565 2.693l-.166.005h-21.13c6.31 5.364 14.578 8.617 23.632 8.617 16.42 0 30.585-10.788 34.687-25.897Zm-60.52 15.243h23.331a.683.683 0 0 0 .687-.572l.006-.089V56.64H13.537c1.577 5.84 4.68 11.083 8.87 15.302Zm68.52-51.723-64.542-.001c-.222.165-.442.333-.66.504l.001 22.42H45.74c1.448 0 2.64 1.116 2.726 2.533l.005.165v8.821h42.458V20.217ZM66.324 44.784l.217.134.32.208.834.562 1.937 1.34c.583.396 1.101.73 1.59 1.023 1.5.896 2.662 1.348 3.404 1.298.678-.044 1.166-.132 1.655-.293l.247-.088 2.087-.915.92-.39.337-.138.307-.12c1.758-.675 3.308.021 4.548 1.49.513.608.867 1.21 1.061 1.633a.84.84 0 0 1-1.475.795l-.146-.28-.107-.19a6.45 6.45 0 0 0-.616-.875c-.83-.982-1.703-1.374-2.664-1.005l-.437.174-.766.322-2.46 1.071-.044.018c-.72.265-1.405.406-2.337.467-1.184.079-2.6-.471-4.375-1.533a31.938 31.938 0 0 1-1.315-.834l-2.312-1.594-.823-.554-.362-.233a2.115 2.115 0 0 0-.055-.033c-1.924-1.094-4.566 1.331-6.416 5.012a.84.84 0 0 1-1.5-.754c.083-.166.168-.33.255-.493l.263-.48c.446-.788.925-1.518 1.429-2.168l.305-.38c1.954-2.344 4.255-3.47 6.494-2.197Zm-53.847.326-.03.41a34.227 34.227 0 0 0-.011 4.4l33.996-.001v-4.08c0-.33-.257-.61-.598-.655l-.095-.006H12.843c-.129 0-.252-.024-.366-.068Zm.212-1.957.043-.007.111-.006H23.69V22.442c-5.868 5.346-9.88 12.586-11 20.712ZM84.135 24v1.629c1.346.237 2.494.713 3.488 1.42l-1.884 2.36c-1.243-.793-2.603-1.189-3.806-1.189-.913 0-1.36.327-1.36.775v.034c0 .551.467.792 2.37 1.171 3.106.602 5.049 1.498 5.049 3.753v.034c0 2.027-1.49 3.375-3.858 3.79v1.583h-3.587v-1.605c-1.665-.266-3.197-.879-4.42-1.839l2.096-2.22c1.36.945 2.835 1.446 4.408 1.446 1.03 0 1.573-.312 1.573-.828v-.034c0-.516-.446-.775-2.31-1.17-2.894-.585-5.128-1.31-5.128-3.771v-.034c0-1.875 1.408-3.311 3.781-3.73V24h3.588ZM57.339 36.12a.84.84 0 0 1 .105 1.673l-.105.007H28.664a.84.84 0 0 1-.105-1.673l.105-.007h28.675Zm-11.865-5.76a.84.84 0 0 1 .105 1.673l-.105.007h-16.81a.84.84 0 0 1-.105-1.673l.105-.007h16.81ZM56.35 24.6a.84.84 0 0 1 .106 1.673l-.106.007H43.496a.84.84 0 0 1-.105-1.673l.105-.007H56.35Zm-16.81 0a.84.84 0 0 1 .106 1.673l-.105.007H28.664a.84.84 0 0 1-.105-1.673l.105-.007H39.54Zm8.7-11.583c-6.9 0-13.345 1.89-18.814 5.164h37.63c-5.592-3.349-12.06-5.164-18.815-5.164Z"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#878E9B",
+    d: "M73.768 86.536c7.052 0 12.768-5.716 12.768-12.768C86.536 66.716 80.82 61 73.768 61 66.716 61 61 66.716 61 73.768c0 7.052 5.716 12.768 12.768 12.768Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FEFEFE",
+    d: "M79.648 74.608h-5.04v5.04h-1.68v-5.04h-5.04v-1.68h5.04v-5.04h1.68v5.04h5.04v1.68Z"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "b",
+    width: "13",
+    height: "13",
+    x: "67",
+    y: "67",
+    maskUnits: "userSpaceOnUse",
+    style: {
+      maskType: "luminance"
+    }
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    d: "M79.648 74.608h-5.04v5.04h-1.68v-5.04h-5.04v-1.68h5.04v-5.04h1.68v5.04h5.04v1.68Z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#b)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FEFEFE",
+    d: "M83.848 63.688h-20.16v20.16h20.16v-20.16Z"
+  })));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -19311,7 +19590,6 @@ function _wrapNativeSuper(Class) {
 }
 
 // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
-
 /**
  * Parse errors.md and turn it into a simple hash of code: message
  * @private
@@ -19396,84 +19674,71 @@ var ERRORS = {
   "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
   "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
+
 /**
  * super basic version of sprintf
  * @private
  */
-
 function format() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   var a = args[0];
   var b = [];
   var c;
-
   for (c = 1; c < args.length; c += 1) {
     b.push(args[c]);
   }
-
   b.forEach(function (d) {
     a = a.replace(/%[a-z]/, d);
   });
   return a;
 }
+
 /**
  * Create an error file out of errors.md for development and a simple web link to the full errors
  * in production mode.
  * @private
  */
-
-
 var PolishedError = /*#__PURE__*/function (_Error) {
   _inheritsLoose(PolishedError, _Error);
-
   function PolishedError(code) {
     var _this;
-
     if (process.env.NODE_ENV === 'production') {
       _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
     } else {
       for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
         args[_key2 - 1] = arguments[_key2];
       }
-
       _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
     }
-
     return _assertThisInitialized(_this);
   }
-
   return PolishedError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
 function colorToInt(color) {
   return Math.round(color * 255);
 }
-
 function convertToInt(red, green, blue) {
   return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
 }
-
 function hslToRgb(hue, saturation, lightness, convert) {
   if (convert === void 0) {
     convert = convertToInt;
   }
-
   if (saturation === 0) {
     // achromatic
     return convert(lightness, lightness, lightness);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
+  }
 
+  // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
   var huePrime = (hue % 360 + 360) % 360 / 60;
   var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
   var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
   var red = 0;
   var green = 0;
   var blue = 0;
-
   if (huePrime >= 0 && huePrime < 1) {
     red = chroma;
     green = secondComponent;
@@ -19493,7 +19758,6 @@ function hslToRgb(hue, saturation, lightness, convert) {
     red = chroma;
     blue = secondComponent;
   }
-
   var lightnessModification = lightness - chroma / 2;
   var finalRed = red + lightnessModification;
   var finalGreen = green + lightnessModification;
@@ -19651,11 +19915,11 @@ var namedColorMap = {
   yellow: 'ff0',
   yellowgreen: '9acd32'
 };
+
 /**
  * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
  * @private
  */
-
 function nameToHex(color) {
   if (typeof color !== 'string') return color;
   var normalizedColorName = color.toLowerCase();
@@ -19670,6 +19934,7 @@ var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\
 var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
 var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
 var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+
 /**
  * Returns an RgbColor or RgbaColor object. This utility function is only useful
  * if want to extract a color component. With the color util `toColorString` you
@@ -19681,14 +19946,11 @@ var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[
  * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
  * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
  */
-
 function parseToRgb(color) {
   if (typeof color !== 'string') {
     throw new PolishedError(3);
   }
-
   var normalizedColor = nameToHex(color);
-
   if (normalizedColor.match(hexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -19696,7 +19958,6 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
     };
   }
-
   if (normalizedColor.match(hexRgbaRegex)) {
     var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
     return {
@@ -19706,7 +19967,6 @@ function parseToRgb(color) {
       alpha: alpha
     };
   }
-
   if (normalizedColor.match(reducedHexRegex)) {
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -19714,10 +19974,8 @@ function parseToRgb(color) {
       blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
     };
   }
-
   if (normalizedColor.match(reducedRgbaHexRegex)) {
     var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-
     return {
       red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
       green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
@@ -19725,9 +19983,7 @@ function parseToRgb(color) {
       alpha: _alpha
     };
   }
-
   var rgbMatched = rgbRegex.exec(normalizedColor);
-
   if (rgbMatched) {
     return {
       red: parseInt("" + rgbMatched[1], 10),
@@ -19735,9 +19991,7 @@ function parseToRgb(color) {
       blue: parseInt("" + rgbMatched[3], 10)
     };
   }
-
   var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
   if (rgbaMatched) {
     return {
       red: parseInt("" + rgbaMatched[1], 10),
@@ -19746,44 +20000,32 @@ function parseToRgb(color) {
       alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
     };
   }
-
   var hslMatched = hslRegex.exec(normalizedColor);
-
   if (hslMatched) {
     var hue = parseInt("" + hslMatched[1], 10);
     var saturation = parseInt("" + hslMatched[2], 10) / 100;
     var lightness = parseInt("" + hslMatched[3], 10) / 100;
     var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
     var hslRgbMatched = rgbRegex.exec(rgbColorString);
-
     if (!hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, rgbColorString);
     }
-
     return {
       red: parseInt("" + hslRgbMatched[1], 10),
       green: parseInt("" + hslRgbMatched[2], 10),
       blue: parseInt("" + hslRgbMatched[3], 10)
     };
   }
-
   var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
-
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
-
     var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-
     var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-
     var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-
     var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-
     if (!_hslRgbMatched) {
       throw new PolishedError(4, normalizedColor, _rgbColorString);
     }
-
     return {
       red: parseInt("" + _hslRgbMatched[1], 10),
       green: parseInt("" + _hslRgbMatched[2], 10),
@@ -19791,10 +20033,82 @@ function parseToRgb(color) {
       alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
     };
   }
-
   throw new PolishedError(5);
 }
 
+function rgbToHsl(color) {
+  // make sure rgb are contained in a set of [0, 255]
+  var red = color.red / 255;
+  var green = color.green / 255;
+  var blue = color.blue / 255;
+  var max = Math.max(red, green, blue);
+  var min = Math.min(red, green, blue);
+  var lightness = (max + min) / 2;
+  if (max === min) {
+    // achromatic
+    if (color.alpha !== undefined) {
+      return {
+        hue: 0,
+        saturation: 0,
+        lightness: lightness,
+        alpha: color.alpha
+      };
+    } else {
+      return {
+        hue: 0,
+        saturation: 0,
+        lightness: lightness
+      };
+    }
+  }
+  var hue;
+  var delta = max - min;
+  var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+  switch (max) {
+    case red:
+      hue = (green - blue) / delta + (green < blue ? 6 : 0);
+      break;
+    case green:
+      hue = (blue - red) / delta + 2;
+      break;
+    default:
+      // blue case
+      hue = (red - green) / delta + 4;
+      break;
+  }
+  hue *= 60;
+  if (color.alpha !== undefined) {
+    return {
+      hue: hue,
+      saturation: saturation,
+      lightness: lightness,
+      alpha: color.alpha
+    };
+  }
+  return {
+    hue: hue,
+    saturation: saturation,
+    lightness: lightness
+  };
+}
+
+/**
+ * Returns an HslColor or HslaColor object. This utility function is only useful
+ * if want to extract a color component. With the color util `toColorString` you
+ * can convert a HslColor or HslaColor object back to a string.
+ *
+ * @example
+ * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
+ * const color1 = parseToHsl('rgb(255, 0, 0)');
+ * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
+ * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
+ */
+function parseToHsl(color) {
+  // Note: At a later stage we can optimize this function as right now a hsl
+  // color would be parsed converted to rgb values and converted back to hsl.
+  return rgbToHsl(parseToRgb(color));
+}
+
 /**
  * Reduces hex values if possible e.g. #ff8866 to #f86
  * @private
@@ -19803,10 +20117,8 @@ var reduceHexValue = function reduceHexValue(value) {
   if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
     return "#" + value[1] + value[3] + value[5];
   }
-
   return value;
 };
-
 var reduceHexValue$1 = reduceHexValue;
 
 function numberToHex(value) {
@@ -19814,6 +20126,83 @@ function numberToHex(value) {
   return hex.length === 1 ? "0" + hex : hex;
 }
 
+function colorToHex(color) {
+  return numberToHex(Math.round(color * 255));
+}
+function convertToHex(red, green, blue) {
+  return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
+}
+function hslToHex(hue, saturation, lightness) {
+  return hslToRgb(hue, saturation, lightness, convertToHex);
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible hex notation.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: hsl(359, 0.75, 0.4),
+ *   background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${hsl(359, 0.75, 0.4)};
+ *   background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#b3191c";
+ *   background: "#b3191c";
+ * }
+ */
+function hsl(value, saturation, lightness) {
+  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
+    return hslToHex(value, saturation, lightness);
+  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
+    return hslToHex(value.hue, value.saturation, value.lightness);
+  }
+  throw new PolishedError(1);
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: hsla(359, 0.75, 0.4, 0.7),
+ *   background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
+ *   background: hsla(359, 0.75, 0.4, 1),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${hsla(359, 0.75, 0.4, 0.7)};
+ *   background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
+ *   background: ${hsla(359, 0.75, 0.4, 1)};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "rgba(179,25,28,0.7)";
+ *   background: "rgba(179,25,28,0.7)";
+ *   background: "#b3191c";
+ * }
+ */
+function hsla$1(value, saturation, lightness, alpha) {
+  if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
+    return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
+  } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
+    return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
+  }
+  throw new PolishedError(2);
+}
+
 /**
  * Returns a string value for the color. The returned result is the smallest possible hex notation.
  *
@@ -19843,74 +20232,267 @@ function rgb(value, green, blue) {
   } else if (typeof value === 'object' && green === undefined && blue === undefined) {
     return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
   }
-
   throw new PolishedError(6);
 }
 
 /**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+ * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+ *
+ * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgba(255, 205, 100, 0.7),
+ *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
+ *   background: rgba(255, 205, 100, 1),
+ *   background: rgba('#ffffff', 0.4),
+ *   background: rgba('black', 0.7),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgba(255, 205, 100, 0.7)};
+ *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
+ *   background: ${rgba(255, 205, 100, 1)};
+ *   background: ${rgba('#ffffff', 0.4)};
+ *   background: ${rgba('black', 0.7)};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "rgba(255,205,100,0.7)";
+ *   background: "rgba(255,205,100,0.7)";
+ *   background: "#ffcd64";
+ *   background: "rgba(255,255,255,0.4)";
+ *   background: "rgba(0,0,0,0.7)";
+ * }
+ */
+function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
+  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
+    var rgbValue = parseToRgb(firstValue);
+    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
+    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+  }
+  throw new PolishedError(7);
+}
+
+var isRgb = function isRgb(color) {
+  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
+};
+var isRgba$1 = function isRgba(color) {
+  return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
+};
+var isHsl = function isHsl(color) {
+  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
+};
+var isHsla$1 = function isHsla(color) {
+  return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
+};
+
+/**
+ * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
+ * This util is useful in case you only know on runtime which color object is
+ * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: toColorString({ red: 255, green: 205, blue: 100 }),
+ *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
+ *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
+ *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
+ *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
+ *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
+ *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
+ * `
+ *
+ * // CSS in JS Output
+ * element {
+ *   background: "#ffcd64";
+ *   background: "rgba(255,205,100,0.72)";
+ *   background: "#00f";
+ *   background: "rgba(179,25,25,0.72)";
+ * }
+ */
+
+function toColorString(color) {
+  if (typeof color !== 'object') throw new PolishedError(8);
+  if (isRgba$1(color)) return rgba$1(color);
+  if (isRgb(color)) return rgb(color);
+  if (isHsla$1(color)) return hsla$1(color);
+  if (isHsl(color)) return hsl(color);
+  throw new PolishedError(8);
+}
+
+// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
+// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-redeclare
+function curried(f, length, acc) {
+  return function fn() {
+    // eslint-disable-next-line prefer-rest-params
+    var combined = acc.concat(Array.prototype.slice.call(arguments));
+    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
+  };
+}
+
+// eslint-disable-next-line no-redeclare
+function curry(f) {
+  // eslint-disable-line no-redeclare
+  return curried(f, f.length, []);
+}
+
+/**
+ * Changes the hue of the color. Hue is a number between 0 to 360. The first
+ * argument for adjustHue is the amount of degrees the color is rotated around
+ * the color wheel, always producing a positive hue value.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: adjustHue(180, '#448'),
+ *   background: adjustHue('180', 'rgba(101,100,205,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${adjustHue(180, '#448')};
+ *   background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ * element {
+ *   background: "#888844";
+ *   background: "rgba(136,136,68,0.7)";
+ * }
+ */
+function adjustHue(degree, color) {
+  if (color === 'transparent') return color;
+  var hslColor = parseToHsl(color);
+  return toColorString(_extends$1({}, hslColor, {
+    hue: hslColor.hue + parseFloat(degree)
+  }));
+}
+
+// prettier-ignore
+var curriedAdjustHue = curry /* ::<number | string, string, string> */(adjustHue);
+
+function guard(lowerBoundary, upperBoundary, value) {
+  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
+}
+
+/**
+ * Returns a string value for the darkened color.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: darken(0.2, '#FFCD64'),
+ *   background: darken('0.2', 'rgba(255,205,100,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${darken(0.2, '#FFCD64')};
+ *   background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#ffbd31";
+ *   background: "rgba(255,189,49,0.7)";
+ * }
+ */
+function darken(amount, color) {
+  if (color === 'transparent') return color;
+  var hslColor = parseToHsl(color);
+  return toColorString(_extends$1({}, hslColor, {
+    lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
+  }));
+}
+
+// prettier-ignore
+var curriedDarken = curry /* ::<number | string, string, string> */(darken);
+
+/**
+ * Decreases the intensity of a color. Its range is between 0 to 1. The first
+ * argument of the desaturate function is the amount by how much the color
+ * intensity should be decreased.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: desaturate(0.2, '#CCCD64'),
+ *   background: desaturate('0.2', 'rgba(204,205,100,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${desaturate(0.2, '#CCCD64')};
+ *   background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ * element {
+ *   background: "#b8b979";
+ *   background: "rgba(184,185,121,0.7)";
+ * }
+ */
+function desaturate(amount, color) {
+  if (color === 'transparent') return color;
+  var hslColor = parseToHsl(color);
+  return toColorString(_extends$1({}, hslColor, {
+    saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
+  }));
+}
+
+// prettier-ignore
+var curriedDesaturate = curry /* ::<number | string, string, string> */(desaturate);
+
+/**
+ * Returns a string value for the lightened color.
  *
  * @example
  * // Styles as object usage
  * const styles = {
- *   background: rgba(255, 205, 100, 0.7),
- *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
- *   background: rgba(255, 205, 100, 1),
- *   background: rgba('#ffffff', 0.4),
- *   background: rgba('black', 0.7),
+ *   background: lighten(0.2, '#CCCD64'),
+ *   background: lighten('0.2', 'rgba(204,205,100,0.7)'),
  * }
  *
  * // styled-components usage
  * const div = styled.div`
- *   background: ${rgba(255, 205, 100, 0.7)};
- *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
- *   background: ${rgba(255, 205, 100, 1)};
- *   background: ${rgba('#ffffff', 0.4)};
- *   background: ${rgba('black', 0.7)};
+ *   background: ${lighten(0.2, '#FFCD64')};
+ *   background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
  * `
  *
  * // CSS in JS Output
  *
  * element {
- *   background: "rgba(255,205,100,0.7)";
- *   background: "rgba(255,205,100,0.7)";
- *   background: "#ffcd64";
- *   background: "rgba(255,255,255,0.4)";
- *   background: "rgba(0,0,0,0.7)";
+ *   background: "#e5e6b1";
+ *   background: "rgba(229,230,177,0.7)";
  * }
  */
-function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
-    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
-  }
-
-  throw new PolishedError(7);
+function lighten(amount, color) {
+  if (color === 'transparent') return color;
+  var hslColor = parseToHsl(color);
+  return toColorString(_extends$1({}, hslColor, {
+    lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
+  }));
 }
 
-// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-redeclare
-function curried(f, length, acc) {
-  return function fn() {
-    // eslint-disable-next-line prefer-rest-params
-    var combined = acc.concat(Array.prototype.slice.call(arguments));
-    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
-  };
-} // eslint-disable-next-line no-redeclare
-
-
-function curry(f) {
-  // eslint-disable-line no-redeclare
-  return curried(f, f.length, []);
-}
+// prettier-ignore
+var curriedLighten = curry /* ::<number | string, string, string> */(lighten);
 
 /**
  * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
@@ -19938,25 +20520,21 @@ function curry(f) {
  *   background: "rgba(63, 0, 191, 0.75)";
  * }
  */
-
 function mix$1(weight, color, otherColor) {
   if (color === 'transparent') return otherColor;
   if (otherColor === 'transparent') return color;
   if (weight === 0) return otherColor;
   var parsedColor1 = parseToRgb(color);
-
   var color1 = _extends$1({}, parsedColor1, {
     alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
   });
-
   var parsedColor2 = parseToRgb(otherColor);
-
   var color2 = _extends$1({}, parsedColor2, {
     alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
-  }); // The formula is copied from the original Sass implementation:
-  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-
+  });
 
+  // The formula is copied from the original Sass implementation:
+  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
   var alphaDelta = color1.alpha - color2.alpha;
   var x = parseFloat(weight) * 2 - 1;
   var y = x * alphaDelta === -1 ? x : x + alphaDelta;
@@ -19970,14 +20548,218 @@ function mix$1(weight, color, otherColor) {
     alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
   };
   return rgba$1(mixedColor);
-} // prettier-ignore
-
+}
 
-var curriedMix = /*#__PURE__*/curry
-/* ::<number | string, string, string, string> */
-(mix$1);
+// prettier-ignore
+var curriedMix = curry /* ::<number | string, string, string, string> */(mix$1);
 var mix$1$1 = curriedMix;
 
+/**
+ * Increases the opacity of a color. Its range for the amount is between 0 to 1.
+ *
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
+ *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
+ *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
+ *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
+ *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#fff";
+ *   background: "rgba(255,255,255,0.7)";
+ *   background: "rgba(255,0,0,0.7)";
+ * }
+ */
+function opacify(amount, color) {
+  if (color === 'transparent') return color;
+  var parsedColor = parseToRgb(color);
+  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
+  var colorWithAlpha = _extends$1({}, parsedColor, {
+    alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
+  });
+  return rgba$1(colorWithAlpha);
+}
+
+// prettier-ignore
+var curriedOpacify = curry /* ::<number | string, string, string> */(opacify);
+
+/**
+ * Increases the intensity of a color. Its range is between 0 to 1. The first
+ * argument of the saturate function is the amount by how much the color
+ * intensity should be increased.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: saturate(0.2, '#CCCD64'),
+ *   background: saturate('0.2', 'rgba(204,205,100,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${saturate(0.2, '#FFCD64')};
+ *   background: ${saturate('0.2', 'rgba(204,205,100,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#e0e250";
+ *   background: "rgba(224,226,80,0.7)";
+ * }
+ */
+function saturate(amount, color) {
+  if (color === 'transparent') return color;
+  var hslColor = parseToHsl(color);
+  return toColorString(_extends$1({}, hslColor, {
+    saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))
+  }));
+}
+
+// prettier-ignore
+var curriedSaturate = curry /* ::<number | string, string, string> */(saturate);
+
+/**
+ * Sets the hue of a color to the provided value. The hue range can be
+ * from 0 and 359.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: setHue(42, '#CCCD64'),
+ *   background: setHue('244', 'rgba(204,205,100,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${setHue(42, '#CCCD64')};
+ *   background: ${setHue('244', 'rgba(204,205,100,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ * element {
+ *   background: "#cdae64";
+ *   background: "rgba(107,100,205,0.7)";
+ * }
+ */
+function setHue(hue, color) {
+  if (color === 'transparent') return color;
+  return toColorString(_extends$1({}, parseToHsl(color), {
+    hue: parseFloat(hue)
+  }));
+}
+
+// prettier-ignore
+var curriedSetHue = curry /* ::<number | string, string, string> */(setHue);
+
+/**
+ * Sets the lightness of a color to the provided value. The lightness range can be
+ * from 0 and 1.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: setLightness(0.2, '#CCCD64'),
+ *   background: setLightness('0.75', 'rgba(204,205,100,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${setLightness(0.2, '#CCCD64')};
+ *   background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ * element {
+ *   background: "#4d4d19";
+ *   background: "rgba(223,224,159,0.7)";
+ * }
+ */
+function setLightness(lightness, color) {
+  if (color === 'transparent') return color;
+  return toColorString(_extends$1({}, parseToHsl(color), {
+    lightness: parseFloat(lightness)
+  }));
+}
+
+// prettier-ignore
+var curriedSetLightness = curry /* ::<number | string, string, string> */(setLightness);
+
+/**
+ * Sets the saturation of a color to the provided value. The saturation range can be
+ * from 0 and 1.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: setSaturation(0.2, '#CCCD64'),
+ *   background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${setSaturation(0.2, '#CCCD64')};
+ *   background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};
+ * `
+ *
+ * // CSS in JS Output
+ * element {
+ *   background: "#adad84";
+ *   background: "rgba(228,229,76,0.7)";
+ * }
+ */
+function setSaturation(saturation, color) {
+  if (color === 'transparent') return color;
+  return toColorString(_extends$1({}, parseToHsl(color), {
+    saturation: parseFloat(saturation)
+  }));
+}
+
+// prettier-ignore
+var curriedSetSaturation = curry /* ::<number | string, string, string> */(setSaturation);
+
+/**
+ * Shades a color by mixing it with black. `shade` can produce
+ * hue shifts, where as `darken` manipulates the luminance channel and therefore
+ * doesn't produce hue shifts.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: shade(0.25, '#00f')
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${shade(0.25, '#00f')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#00003f";
+ * }
+ */
+
+function shade(percentage, color) {
+  if (color === 'transparent') return color;
+  return mix$1$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
+}
+
+// prettier-ignore
+var curriedShade = curry /* ::<number | string, string, string> */(shade);
+
 /**
  * Tints a color by mixing it with white. `tint` can produce
  * hue shifts, where as `lighten` manipulates the luminance channel and therefore
@@ -20004,14 +20786,52 @@ var mix$1$1 = curriedMix;
 function tint(percentage, color) {
   if (color === 'transparent') return color;
   return mix$1$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
-} // prettier-ignore
-
+}
 
-var curriedTint = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(tint);
+// prettier-ignore
+var curriedTint = curry /* ::<number | string, string, string> */(tint);
 var curriedTint$1 = curriedTint;
 
+/**
+ * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
+ *
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: transparentize(0.1, '#fff'),
+ *   background: transparentize(0.2, 'hsl(0, 0%, 100%)'),
+ *   background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${transparentize(0.1, '#fff')};
+ *   background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')};
+ *   background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "rgba(255,255,255,0.9)";
+ *   background: "rgba(255,255,255,0.8)";
+ *   background: "rgba(255,0,0,0.3)";
+ * }
+ */
+function transparentize(amount, color) {
+  if (color === 'transparent') return color;
+  var parsedColor = parseToRgb(color);
+  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
+  var colorWithAlpha = _extends$1({}, parsedColor, {
+    alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+  });
+  return rgba$1(colorWithAlpha);
+}
+
+// prettier-ignore
+var curriedTransparentize = curry /* ::<number | string, string, string> */(transparentize);
+
 var linkColor = MATISSE_BLUE;
 var fallbackValues$8 = {
   linkColor: linkColor
@@ -22701,32 +23521,19 @@ var toIndexedObject = function (it) {
   return indexedObject(requireObjectCoercible(it));
 };
 
-var documentAll = typeof document == 'object' && document.all;
-
 // https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
-// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
-var IS_HTMLDDA = typeof documentAll == 'undefined' && documentAll !== undefined;
-
-var documentAll_1 = {
-  all: documentAll,
-  IS_HTMLDDA: IS_HTMLDDA
-};
-
-var documentAll$1 = documentAll_1.all;
+var documentAll = typeof document == 'object' && document.all;
 
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-var isCallable = documentAll_1.IS_HTMLDDA ? function (argument) {
-  return typeof argument == 'function' || argument === documentAll$1;
+// eslint-disable-next-line unicorn/no-typeof-undefined -- required for testing
+var isCallable = typeof documentAll == 'undefined' && documentAll !== undefined ? function (argument) {
+  return typeof argument == 'function' || argument === documentAll;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-var documentAll$2 = documentAll_1.all;
-
-var isObject = documentAll_1.IS_HTMLDDA ? function (it) {
-  return typeof it == 'object' ? it !== null : isCallable(it) || it === documentAll$2;
-} : function (it) {
+var isObject = function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
 };
 
@@ -22862,10 +23669,10 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.3',
+  version: '3.35.1',
   mode:  'global',
-  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.3/LICENSE',
+  copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.35.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 });
@@ -23162,7 +23969,7 @@ var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn = module.exports = function (value, name, options) {
   if (stringSlice($String(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace($String(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
+    name = '[' + replace($String(name), /^Symbol\(([^)]*)\).*$/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -23250,7 +24057,8 @@ var min$1 = Math.min;
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
 var toLength = function (argument) {
-  return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+  var len = toIntegerOrInfinity(argument);
+  return len > 0 ? min$1(len, 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
 // `LengthOfArrayLike` abstract operation
@@ -23410,7 +24218,7 @@ var _export = function (options, source) {
   } else if (STATIC) {
     target = global_1[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = (global_1[TARGET] || {}).prototype;
+    target = global_1[TARGET] && global_1[TARGET].prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -23673,11 +24481,15 @@ var functionUncurryThisAccessor = function (object, key, method) {
   } catch (error) { /* empty */ }
 };
 
+var isPossiblePrototype = function (argument) {
+  return isObject(argument) || argument === null;
+};
+
 var $String$4 = String;
 var $TypeError$6 = TypeError;
 
 var aPossiblePrototype = function (argument) {
-  if (typeof argument == 'object' || isCallable(argument)) return argument;
+  if (isPossiblePrototype(argument)) return argument;
   throw new $TypeError$6("Can't set " + $String$4(argument) + ' as a prototype');
 };
 
@@ -27228,34 +28040,45 @@ var fallbackValues$s = {
   height: height$1
 };
 
-var getLargeIcon = function getLargeIcon(iconName) {
+var getLargeIcon = function getLargeIcon(iconName, isDisabled) {
   switch (iconName) {
     case "accounts":
-      return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
     case "properties":
-      return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledPropertiesAddIcon, null) : /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
     case "payments":
-      return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledPaymentMethodsAddIcon, null) : /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
     default:
-      return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
   }
 };
-var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
-  var isLink = _ref.isLink,
-    action = _ref.action,
-    destination = _ref.destination,
-    children = _ref.children,
-    dataQa = _ref.dataQa;
+var renderDisabledContent = function renderDisabledContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    minHeight: "100%",
+    extraStyles: "cursor: default;",
+    "aria-disabled": true
+  }, children);
+};
+var renderContent = function renderContent(_ref2) {
+  var isLink = _ref2.isLink,
+    destination = _ref2.destination,
+    dataQa = _ref2.dataQa,
+    isDisabled = _ref2.isDisabled,
+    children = _ref2.children,
+    action = _ref2.action;
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
     "data-qa": dataQa,
+    disabled: isDisabled,
     style: {
       textDecoration: "none"
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;"
+    extraStyles: isDisabled ? "cursor: default;" : "cursor: pointer;"
   }, children)) : /*#__PURE__*/React__default.createElement(Box, {
     onClick: action,
     padding: "0",
@@ -27264,38 +28087,60 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     dataQa: dataQa
   }, children);
 };
-var Placeholder = function Placeholder(_ref2) {
-  var text = _ref2.text,
-    action = _ref2.action,
-    _ref2$visible = _ref2.visible,
-    visible = _ref2$visible === void 0 ? true : _ref2$visible,
-    _ref2$isLink = _ref2.isLink,
-    isLink = _ref2$isLink === void 0 ? false : _ref2$isLink,
-    destination = _ref2.destination,
-    variant = _ref2.variant,
-    largeIcon = _ref2.largeIcon,
-    themeValues = _ref2.themeValues,
-    dataQa = _ref2.dataQa;
+var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref3) {
+  var isLink = _ref3.isLink,
+    action = _ref3.action,
+    destination = _ref3.destination,
+    children = _ref3.children,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    dataQa = _ref3.dataQa;
+  return isDisabled ? renderDisabledContent({
+    children: children
+  }) : renderContent({
+    children: children,
+    action: action,
+    isLink: isLink,
+    destination: destination,
+    dataQa: dataQa,
+    isDisabled: isDisabled
+  });
+};
+var Placeholder = function Placeholder(_ref4) {
+  var text = _ref4.text,
+    action = _ref4.action,
+    _ref4$visible = _ref4.visible,
+    visible = _ref4$visible === void 0 ? true : _ref4$visible,
+    _ref4$isLink = _ref4.isLink,
+    isLink = _ref4$isLink === void 0 ? false : _ref4$isLink,
+    destination = _ref4.destination,
+    variant = _ref4.variant,
+    largeIcon = _ref4.largeIcon,
+    themeValues = _ref4.themeValues,
+    _ref4$isDisabled = _ref4.isDisabled,
+    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
+    dataQa = _ref4.dataQa;
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
     destination: destination,
-    dataQa: dataQa
+    dataQa: dataQa,
+    isDisabled: isDisabled
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
+    extraStyles: isDisabled ? "border: 1px dashed ".concat(MANATEE_GREY, "; \n        display: flex;\n        justify-content: center;\n        align-items:center;") : "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
+    hoverStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
     onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && action();
+      return isDisabled ? noop : e.key === "Enter" && action();
     }
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
@@ -27306,12 +28151,13 @@ var Placeholder = function Placeholder(_ref2) {
     childGap: "0"
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } ")
+    "aria-disabled": isDisabled,
+    extraStyles: ".fill { \n                    fill: ".concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } ")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
-  }, getLargeIcon(largeIcon), /*#__PURE__*/React__default.createElement(Text$1, {
+  }, getLargeIcon(largeIcon, isDisabled), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: themeValues.color,
+    color: isDisabled ? MANATEE_GREY : themeValues.color,
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "text-align: center;"
   }, text)) : /*#__PURE__*/React__default.createElement(Cover, {
@@ -27321,12 +28167,13 @@ var Placeholder = function Placeholder(_ref2) {
     justify: "center",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(IconAdd, {
+    fill: isDisabled ? MANATEE_GREY : WHITE,
     strokeWidth: "2"
   }), /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: themeValues.color,
+    color: isDisabled ? MANATEE_GREY : themeValues.color,
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
@@ -40235,7 +41082,9 @@ var EditableList = function EditableList(_ref) {
     qaPrefix = _ref.qaPrefix,
     ariaLabel = _ref.ariaLabel,
     _ref$editItemAriaRole = _ref.editItemAriaRole,
-    editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole;
+    editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole,
+    _ref$disablePlacehold = _ref.disablePlaceholder,
+    disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: listPadding,
@@ -40312,13 +41161,22 @@ var EditableList = function EditableList(_ref) {
       "aria-label": "Edit ".concat(ariaLabel || itemName),
       role: editItemAriaRole
     }))));
-  })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React__default.createElement(Box, {
+  })), canAdd && (!maxItems || items.length < maxItems) && !disablePlaceholder ? /*#__PURE__*/React__default.createElement(Box, {
+    padding: items.length === 0 ? "0" : "1rem 0 0"
+  }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
+    text: addText,
+    action: addItem,
+    dataQa: "Add " + qaPrefix,
+    "aria-label": addText,
+    isDisabled: disablePlaceholder
+  })) : /*#__PURE__*/React__default.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
     text: addText,
     action: addItem,
     dataQa: "Add " + qaPrefix,
-    "aria-label": addText
+    "aria-label": addText,
+    isDisabled: disablePlaceholder
   }))));
 };
 
@@ -50091,6 +50949,9 @@ exports.Cover = Cover;
 exports.CustomerSearchIcon = CustomerSearchIcon;
 exports.DefaultPageTemplate = DefaultPageTemplate;
 exports.Detail = Detail$1;
+exports.DisabledAccountsAddIcon = DisabledAccountsAddIcon;
+exports.DisabledPaymentMethodsAddIcon = DisabledPaymentMethodsAddIcon;
+exports.DisabledPropertiesAddIcon = DisabledPropertiesAddIcon;
 exports.DisplayBox = DisplayBox$1;
 exports.DisplayCard = DisplayCard;
 exports.Dropdown = Dropdown$1;