@commonsku/styles 1.16.7 → 1.16.9

package/dist/index.js

@@ -2331,6 +2331,82 @@ function HandleIcon(_a) {
         React__default.createElement("path", { d: "M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z", fill: color }));
 }
 
+var iconSizes$1 = {
+    tiny: {
+        width: 16,
+        height: 18,
+        viewBox: "0 0 22 20",
+    },
+    small: {
+        width: 20,
+        height: 22,
+        viewBox: "0 0 22 20",
+    },
+    medium: {
+        width: 30,
+        height: 28,
+        viewBox: "0 0 22 20",
+    },
+    large: {
+        width: 34,
+        height: 36,
+        viewBox: "0 0 22 20",
+    },
+    huge: {
+        width: 48,
+        height: 50,
+        viewBox: "0 0 22 20",
+    },
+    default: {
+        width: 30,
+        height: 28,
+        viewBox: "0 0 22 20",
+    },
+};
+function ShoppingCartIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Shopping Cart" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return (React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "ShoppingCartIcon", iconSizes: iconSizes$1, altText: altText }, props),
+        React__default.createElement("path", { d: "M15.5463 11C16.2963 11 16.9563 10.59 17.2963 9.97L20.8763 3.48C21.2463 2.82 20.7663 2 20.0063 2H5.20634L4.26634 0H0.996338V2H2.99634L6.59634 9.59L5.24634 12.03C4.51634 13.37 5.47634 15 6.99634 15H18.9963V13H6.99634L8.09634 11H15.5463ZM6.15634 4H18.3063L15.5463 9H8.52634L6.15634 4ZM6.99634 16C5.89634 16 5.00634 16.9 5.00634 18C5.00634 19.1 5.89634 20 6.99634 20C8.09634 20 8.99634 19.1 8.99634 18C8.99634 16.9 8.09634 16 6.99634 16ZM16.9963 16C15.8963 16 15.0063 16.9 15.0063 18C15.0063 19.1 15.8963 20 16.9963 20C18.0963 20 18.9963 19.1 18.9963 18C18.9963 16.9 18.0963 16 16.9963 16Z", fill: color })));
+}
+
+var iconSizes$2 = {
+    tiny: {
+        width: 14,
+        height: 15,
+        viewBox: "0 0 21 22",
+    },
+    small: {
+        width: 16,
+        height: 17,
+        viewBox: "0 0 21 22",
+    },
+    medium: {
+        width: 21,
+        height: 22,
+        viewBox: "0 0 21 22",
+    },
+    large: {
+        width: 32,
+        height: 33,
+        viewBox: "0 0 21 22",
+    },
+    huge: {
+        width: 48,
+        height: 49,
+        viewBox: "0 0 21 22",
+    },
+    default: {
+        width: 21,
+        height: 22,
+        viewBox: "0 0 21 22",
+    },
+};
+function AddShoppingCartIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, props = __rest(_a, ["color", "size", "altText"]);
+    return (React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "AddShoppingCartIcon", iconSizes: iconSizes$2 }, props),
+        React__default.createElement("path", { d: "M10.4199 8.5H12.4199V5.5H15.4199V3.5H12.4199V0.5H10.4199V3.5H7.41992V5.5H10.4199V8.5ZM6.41992 17.5C5.31992 17.5 4.42992 18.4 4.42992 19.5C4.42992 20.6 5.31992 21.5 6.41992 21.5C7.51992 21.5 8.41992 20.6 8.41992 19.5C8.41992 18.4 7.51992 17.5 6.41992 17.5ZM16.4199 17.5C15.3199 17.5 14.4299 18.4 14.4299 19.5C14.4299 20.6 15.3199 21.5 16.4199 21.5C17.5199 21.5 18.4199 20.6 18.4199 19.5C18.4199 18.4 17.5199 17.5 16.4199 17.5ZM7.51992 12.5H14.9699C15.7199 12.5 16.3799 12.09 16.7199 11.47L20.5799 4.46L18.8399 3.5L14.9699 10.5H7.94992L3.68992 1.5H0.419922V3.5H2.41992L6.01992 11.09L4.66992 13.53C3.93992 14.87 4.89992 16.5 6.41992 16.5H18.4199V14.5H6.41992L7.51992 12.5Z", fill: color })));
+}
+
 function CommunityIcon(_a) {
     var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Community" : _c, props = __rest(_a, ["size", "altText"]);
     return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CommunityIcon" }, props),
@@ -2395,6 +2471,132 @@ function EPOIcon(_a) {
         React__default.createElement("path", { d: "M7 16H14V18H7V16ZM7 12H17V14H7V12ZM7 8H17V10H7V8ZM19 4H14.82C14.4 2.84 13.3 2 12 2C10.7 2 9.6 2.84 9.18 4H5C4.86 4 4.73 4.01 4.6 4.04C4.21 4.12 3.86 4.32 3.59 4.59C3.41 4.77 3.26 4.99 3.16 5.23C3.06 5.46 3 5.72 3 6V20C3 20.27 3.06 20.54 3.16 20.78C3.26 21.02 3.41 21.23 3.59 21.42C3.86 21.69 4.21 21.89 4.6 21.97C4.73 21.99 4.86 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM12 3.75C12.41 3.75 12.75 4.09 12.75 4.5C12.75 4.91 12.41 5.25 12 5.25C11.59 5.25 11.25 4.91 11.25 4.5C11.25 4.09 11.59 3.75 12 3.75ZM19 20H5V6H19V20Z", fill: color }));
 }
 
+function HelpIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Help" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "HelpIcon" }, props),
+        React__default.createElement("title", { id: "HelpIcon" }, altText),
+        React__default.createElement("path", { d: "M9 16H11V14H9V16ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 4C7.79 4 6 5.79 6 8H8C8 6.9 8.9 6 10 6C11.1 6 12 6.9 12 8C12 10 9 9.75 9 13H11C11 10.75 14 10.5 14 8C14 5.79 12.21 4 10 4Z", fill: color }));
+}
+
+var iconSizes$3 = {
+    tiny: {
+        width: 188,
+        height: 44,
+        viewBox: "0 0 208 64",
+    },
+    small: {
+        width: 198,
+        height: 54,
+        viewBox: "0 0 208 64",
+    },
+    medium: {
+        width: 208,
+        height: 64,
+        viewBox: "0 0 208 64",
+    },
+    large: {
+        width: 218,
+        height: 74,
+        viewBox: "0 0 208 64",
+    },
+    huge: {
+        width: 228,
+        height: 84,
+        viewBox: "0 0 208 64",
+    },
+    default: {
+        width: 238,
+        height: 94,
+        viewBox: "0 0 208 64",
+    },
+};
+function FileUploadIcon(_a) {
+    var _b = _a.color, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, props = __rest(_a, ["color", "size", "altText"]);
+    var clipId = "clip0_2603_83254_".concat(_.uniqueId('clip'));
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "FileUploadIcon", iconSizes: iconSizes$3 }, props),
+        React__default.createElement("g", { clipPath: "url(#".concat(clipId, ")") },
+            React__default.createElement("path", { d: "M74.6667 13.3333V50.6667H37.3333V13.3333H74.6667ZM74.6667 8H37.3333C34.4 8 32 10.4 32 13.3333V50.6667C32 53.6 34.4 56 37.3333 56H74.6667C77.6 56 80 53.6 80 50.6667V13.3333C80 10.4 77.6 8 74.6667 8ZM61.7067 31.6267L53.7067 41.9467L48 35.04L40 45.3333H72L61.7067 31.6267Z", fill: "#B8C4CB" })),
+        React__default.createElement("path", { d: "M97.26 19H99.9C102.36 19 104.28 17.08 104.28 14.8C104.28 12.52 102.36 10.6 99.9 10.6H97.26V19ZM98.16 18.16V11.44H99.9C101.88 11.44 103.38 12.94 103.38 14.8C103.38 16.66 101.88 18.16 99.9 18.16H98.16ZM105.96 19H106.8V15.82C106.8 14.68 107.64 13.96 108.6 13.96H108.96V13.12H108.72C107.4 13.12 106.8 14.02 106.8 14.02V13.24H105.96V19ZM113.577 19H114.417V15.34C114.417 14.08 113.457 13.12 112.137 13.12C110.757 13.12 109.977 14.2 109.977 14.2L110.517 14.74C110.517 14.74 111.117 13.9 112.137 13.9C112.977 13.9 113.577 14.5 113.577 15.34L111.357 15.7C110.277 15.88 109.677 16.48 109.677 17.44C109.677 18.28 110.517 19.12 111.717 19.12C112.977 19.12 113.577 18.22 113.577 18.22V19ZM113.577 16.42C113.577 17.56 112.797 18.34 111.717 18.34C110.937 18.34 110.517 17.92 110.517 17.44C110.517 16.9 110.877 16.552 111.597 16.42L113.577 16.06V16.42ZM116.151 20.32C116.151 20.32 116.931 21.52 118.551 21.52C120.111 21.52 121.371 20.26 121.371 18.64V13.24H120.531V14.02C120.531 14.02 119.991 13.12 118.611 13.12C117.111 13.12 115.911 14.38 115.911 16C115.911 17.62 117.111 18.88 118.611 18.88C119.991 18.88 120.531 17.98 120.531 17.98V18.64C120.531 19.84 119.631 20.74 118.551 20.74C117.351 20.74 116.691 19.78 116.691 19.78L116.151 20.32ZM118.611 18.1C117.591 18.1 116.751 17.2 116.751 16C116.751 14.8 117.591 13.9 118.611 13.9C119.691 13.9 120.531 14.8 120.531 16C120.531 17.2 119.691 18.1 118.611 18.1ZM129.292 19H130.132V15.34C130.132 14.08 129.172 13.12 127.852 13.12C126.472 13.12 125.692 14.2 125.692 14.2L126.232 14.74C126.232 14.74 126.832 13.9 127.852 13.9C128.692 13.9 129.292 14.5 129.292 15.34L127.072 15.7C125.992 15.88 125.392 16.48 125.392 17.44C125.392 18.28 126.232 19.12 127.432 19.12C128.692 19.12 129.292 18.22 129.292 18.22V19ZM129.292 16.42C129.292 17.56 128.512 18.34 127.432 18.34C126.652 18.34 126.232 17.92 126.232 17.44C126.232 16.9 126.592 16.552 127.312 16.42L129.292 16.06V16.42ZM132.046 19H132.886V15.82C132.886 14.68 133.666 13.9 134.686 13.9C135.586 13.9 136.246 14.56 136.246 15.58V19H137.086V15.58C137.086 14.08 136.126 13.12 134.746 13.12C133.486 13.12 132.886 14.08 132.886 14.08V13.24H132.046V19ZM143.387 19H144.227V10.6H143.387V14.08C143.387 14.08 142.727 13.12 141.407 13.12C139.847 13.12 138.587 14.38 138.587 16.12C138.587 17.86 139.847 19.12 141.407 19.12C142.727 19.12 143.387 18.16 143.387 18.16V19ZM141.407 18.34C140.327 18.34 139.427 17.44 139.427 16.12C139.427 14.8 140.327 13.9 141.407 13.9C142.427 13.9 143.387 14.86 143.387 16.12C143.387 17.38 142.427 18.34 141.407 18.34ZM153.102 19H153.942V10.6H153.102V14.08C153.102 14.08 152.442 13.12 151.122 13.12C149.562 13.12 148.302 14.38 148.302 16.12C148.302 17.86 149.562 19.12 151.122 19.12C152.442 19.12 153.102 18.16 153.102 18.16V19ZM151.122 18.34C150.042 18.34 149.142 17.44 149.142 16.12C149.142 14.8 150.042 13.9 151.122 13.9C152.142 13.9 153.102 14.86 153.102 16.12C153.102 17.38 152.142 18.34 151.122 18.34ZM155.917 19H156.757V15.82C156.757 14.68 157.597 13.96 158.557 13.96H158.917V13.12H158.677C157.357 13.12 156.757 14.02 156.757 14.02V13.24H155.917V19ZM162.457 19.12C164.077 19.12 165.397 17.8 165.397 16.12C165.397 14.44 164.077 13.12 162.457 13.12C160.837 13.12 159.517 14.44 159.517 16.12C159.517 17.8 160.837 19.12 162.457 19.12ZM162.457 18.34C161.317 18.34 160.357 17.368 160.357 16.12C160.357 14.86 161.317 13.9 162.457 13.9C163.597 13.9 164.557 14.86 164.557 16.12C164.557 17.38 163.597 18.34 162.457 18.34ZM166.898 21.52H167.738V18.16C167.738 18.16 168.398 19.12 169.718 19.12C171.278 19.12 172.538 17.86 172.538 16.12C172.538 14.38 171.278 13.12 169.718 13.12C168.398 13.12 167.738 14.08 167.738 14.08V13.24H166.898V21.52ZM169.718 18.34C168.698 18.34 167.738 17.38 167.738 16.12C167.738 14.86 168.698 13.9 169.718 13.9C170.798 13.9 171.698 14.8 171.698 16.12C171.698 17.44 170.798 18.34 169.718 18.34ZM97.02 33H97.86V29.82C97.86 28.68 98.64 27.9 99.66 27.9C100.56 27.9 101.22 28.56 101.22 29.58V33H102.06V29.58C102.06 28.08 101.1 27.12 99.72 27.12C98.46 27.12 97.86 28.08 97.86 28.08V24.6H97.02V33ZM108.3 31.38C108.3 31.38 107.652 32.34 106.44 32.34C105.36 32.34 104.46 31.44 104.4 30.42L109.08 30.432C109.08 30.432 109.14 30.24 109.14 30C109.14 28.32 107.94 27.12 106.38 27.12C104.88 27.12 103.56 28.44 103.56 30.12C103.56 31.8 104.88 33.12 106.44 33.12C108 33.12 108.84 31.92 108.84 31.92L108.3 31.38ZM104.4 29.7C104.52 28.74 105.36 27.9 106.38 27.9C107.4 27.9 108.18 28.68 108.3 29.7H104.4ZM110.636 33H111.476V29.82C111.476 28.68 112.316 27.96 113.276 27.96H113.636V27.12H113.396C112.076 27.12 111.476 28.02 111.476 28.02V27.24H110.636V33ZM118.975 31.38C118.975 31.38 118.327 32.34 117.115 32.34C116.035 32.34 115.135 31.44 115.075 30.42L119.755 30.432C119.755 30.432 119.815 30.24 119.815 30C119.815 28.32 118.615 27.12 117.055 27.12C115.555 27.12 114.235 28.44 114.235 30.12C114.235 31.8 115.555 33.12 117.115 33.12C118.675 33.12 119.515 31.92 119.515 31.92L118.975 31.38ZM115.075 29.7C115.195 28.74 116.035 27.9 117.055 27.9C118.075 27.9 118.855 28.68 118.975 29.7H115.075ZM126.351 33.12C127.971 33.12 129.291 31.8 129.291 30.12C129.291 28.44 127.971 27.12 126.351 27.12C124.731 27.12 123.411 28.44 123.411 30.12C123.411 31.8 124.731 33.12 126.351 33.12ZM126.351 32.34C125.211 32.34 124.251 31.368 124.251 30.12C124.251 28.86 125.211 27.9 126.351 27.9C127.491 27.9 128.451 28.86 128.451 30.12C128.451 31.38 127.491 32.34 126.351 32.34ZM130.792 33H131.632V29.82C131.632 28.68 132.472 27.96 133.432 27.96H133.792V27.12H133.552C132.232 27.12 131.632 28.02 131.632 28.02V27.24H130.792V33Z", fill: "#899CA9" }),
+        React__default.createElement("path", { d: "M97.2 53H100.74C102.36 53 103.5 51.86 103.5 50.54C103.5 49.04 102.06 48.5 102.06 48.5C102.06 48.5 103.08 48.08 103.08 46.82C103.08 45.62 102.06 44.6 100.56 44.6H97.2V53ZM98.52 51.86V49.1H100.74C101.58 49.1 102.18 49.7 102.18 50.48C102.18 51.26 101.58 51.86 100.74 51.86H98.52ZM98.52 48.02V45.74H100.56C101.28 45.74 101.76 46.22 101.76 46.88C101.76 47.54 101.28 48.02 100.56 48.02H98.52ZM104.996 53H106.196V50.06C106.196 49.04 106.916 48.32 107.756 48.32C107.996 48.32 108.236 48.38 108.236 48.38V47.12H107.936C106.796 47.12 106.196 48.02 106.196 48.02V47.24H104.996V53ZM108.843 50.12C108.843 51.8 110.163 53.12 111.843 53.12C113.523 53.12 114.843 51.8 114.843 50.12C114.843 48.44 113.523 47.12 111.843 47.12C110.163 47.12 108.843 48.44 108.843 50.12ZM111.843 51.98C110.823 51.98 110.043 51.2 110.043 50.12C110.043 49.04 110.823 48.26 111.843 48.26C112.863 48.26 113.643 49.04 113.643 50.12C113.643 51.2 112.863 51.98 111.843 51.98ZM117.484 53H118.624L119.884 49.16L121.144 53H122.284L124.324 47.24H123.004L121.684 51.14L120.424 47.24H119.344L118.084 51.14L116.764 47.24H115.444L117.484 53ZM124.741 52.04C124.741 52.04 125.521 53.12 127.021 53.12C128.401 53.12 129.241 52.28 129.241 51.32C129.241 49.28 126.181 49.76 126.181 48.8C126.181 48.5 126.481 48.2 127.081 48.2C127.861 48.2 128.341 48.68 128.341 48.68L129.121 47.9C129.121 47.9 128.461 47.12 127.081 47.12C125.761 47.12 124.981 47.9 124.981 48.8C124.981 50.84 128.041 50.36 128.041 51.32C128.041 51.68 127.681 52.04 127.021 52.04C126.121 52.04 125.521 51.26 125.521 51.26L124.741 52.04ZM134.876 51.2C134.876 51.2 134.216 51.98 133.196 51.98C132.236 51.98 131.516 51.32 131.396 50.54H135.836C135.836 50.54 135.896 50.3 135.896 49.94C135.896 48.32 134.696 47.12 133.076 47.12C131.456 47.12 130.136 48.44 130.136 50.12C130.136 51.8 131.456 53.12 133.136 53.12C134.816 53.12 135.596 52.04 135.596 52.04L134.876 51.2ZM131.396 49.52C131.636 48.74 132.176 48.2 133.076 48.2C133.916 48.2 134.456 48.74 134.636 49.52H131.396ZM140.091 53H141.411V49.52H145.011V48.26H141.411V45.86H145.971V44.6H140.091V53ZM147.056 53H148.256V47.24H147.056V53ZM146.936 45.44C146.936 45.86 147.296 46.16 147.656 46.16C148.016 46.16 148.376 45.86 148.376 45.44C148.376 45.02 148.016 44.72 147.656 44.72C147.296 44.72 146.936 45.02 146.936 45.44ZM150.056 53H151.256V44.6H150.056V53ZM157.376 51.2C157.376 51.2 156.716 51.98 155.696 51.98C154.736 51.98 154.016 51.32 153.896 50.54H158.336C158.336 50.54 158.396 50.3 158.396 49.94C158.396 48.32 157.196 47.12 155.576 47.12C153.956 47.12 152.636 48.44 152.636 50.12C152.636 51.8 153.956 53.12 155.636 53.12C157.316 53.12 158.096 52.04 158.096 52.04L157.376 51.2ZM153.896 49.52C154.136 48.74 154.676 48.2 155.576 48.2C156.416 48.2 156.956 48.74 157.136 49.52H153.896ZM159.171 52.04C159.171 52.04 159.951 53.12 161.451 53.12C162.831 53.12 163.671 52.28 163.671 51.32C163.671 49.28 160.611 49.76 160.611 48.8C160.611 48.5 160.911 48.2 161.511 48.2C162.291 48.2 162.771 48.68 162.771 48.68L163.551 47.9C163.551 47.9 162.891 47.12 161.511 47.12C160.191 47.12 159.411 47.9 159.411 48.8C159.411 50.84 162.471 50.36 162.471 51.32C162.471 51.68 162.111 52.04 161.451 52.04C160.551 52.04 159.951 51.26 159.951 51.26L159.171 52.04Z", fill: "#DA9B8A" }),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: clipId },
+                React__default.createElement("rect", { width: "64", height: "64", fill: "white", transform: "translate(24)" }))));
+}
+
+var iconSizes$4 = {
+    tiny: {
+        width: 12,
+        height: 12,
+        viewBox: "0 0 32 32",
+    },
+    small: {
+        width: 22,
+        height: 22,
+        viewBox: "0 0 32 32",
+    },
+    medium: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+    large: {
+        width: 62,
+        height: 62,
+        viewBox: "0 0 32 32",
+    },
+    huge: {
+        width: 82,
+        height: 82,
+        viewBox: "0 0 32 32",
+    },
+    default: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+};
+function DoubleArrowIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.direction, direction = _c === void 0 ? "right" : _c, _d = _a.size, size = _d === void 0 ? "medium" : _d, altText = _a.altText, props = __rest(_a, ["color", "direction", "size", "altText"]);
+    var iconAltText = React.useMemo(function () {
+        if (altText) {
+            return altText;
+        }
+        switch (direction) {
+            case 'right': return 'Next';
+            case 'left': return 'Previous';
+            default: return '';
+        }
+    }, [altText, direction]);
+    var directionPaths = React__default.useMemo(function () {
+        if (direction === "left") {
+            return [
+                'M24.3801 23.0592C24.9001 22.5392 24.9001 21.6992 24.3801 21.1792L19.2201 15.9926L24.3935 10.8192C24.9135 10.2992 24.9135 9.45922 24.3935 8.93922C23.8735 8.41922 23.0335 8.41922 22.5135 8.93922L16.3935 15.0592C15.8735 15.5792 15.8735 16.4192 16.3935 16.9392L22.5001 23.0592C23.0201 23.5792 23.8601 23.5792 24.3801 23.0592Z',
+                'M15.5935 23.0592C16.1135 22.5392 16.1135 21.6992 15.5935 21.1792L10.4335 15.9926L15.6068 10.8192C16.1268 10.2992 16.1268 9.45922 15.6068 8.93922C15.0868 8.41922 14.2468 8.41922 13.7268 8.93922L7.6068 15.0592C7.0868 15.5792 7.0868 16.4192 7.6068 16.9392L13.7135 23.0592C14.2335 23.5792 15.0735 23.5792 15.5935 23.0592Z',
+            ];
+        }
+        else if (direction === 'down') {
+            return [
+                'M23.0588 7.62013C22.5388 7.10013 21.6988 7.10013 21.1788 7.62013L16.0055 12.7801L10.8188 7.6068C10.2988 7.0868 9.45883 7.0868 8.93883 7.6068C8.41883 8.1268 8.41883 8.9668 8.93883 9.4868L15.0588 15.6068C15.5788 16.1268 16.4188 16.1268 16.9388 15.6068L23.0588 9.4868C23.5788 8.98013 23.5788 8.14013 23.0588 7.62013Z',
+                'M23.0588 16.4068C22.5388 15.8868 21.6988 15.8868 21.1788 16.4068L16.0055 21.5668L10.8322 16.3935C10.3122 15.8735 9.47216 15.8735 8.95216 16.3935C8.43216 16.9135 8.43216 17.7535 8.95216 18.2735L15.0722 24.3935C15.5922 24.9135 16.4322 24.9135 16.9522 24.3935L23.0722 18.2735C23.5788 17.7668 23.5788 16.9268 23.0588 16.4068Z',
+            ];
+        }
+        else if (direction === 'up') {
+            return [
+                'M8.94 24.3801C9.46 24.9001 10.3 24.9001 10.82 24.3801L16.0067 19.2201L21.18 24.3935C21.7 24.9135 22.54 24.9135 23.06 24.3935C23.58 23.8735 23.58 23.0335 23.06 22.5135L16.94 16.3935C16.42 15.8735 15.58 15.8735 15.06 16.3935L8.94 22.5001C8.42 23.0201 8.42 23.8601 8.94 24.3801Z',
+                'M8.94 15.5935C9.46 16.1135 10.3 16.1135 10.82 15.5935L16.0067 10.4335L21.18 15.6068C21.7 16.1268 22.54 16.1268 23.06 15.6068C23.58 15.0868 23.58 14.2468 23.06 13.7268L16.94 7.6068C16.42 7.0868 15.58 7.0868 15.06 7.6068L8.94 13.7135C8.42 14.2335 8.42 15.0735 8.94 15.5935Z',
+            ];
+        }
+        return [
+            'M7.61987 8.94078C7.09987 9.46078 7.09987 10.3008 7.61987 10.8208L12.7799 16.0074L7.60654 21.1808C7.08654 21.7008 7.08654 22.5408 7.60654 23.0608C8.12653 23.5808 8.96654 23.5808 9.48654 23.0608L15.6065 16.9408C16.1265 16.4208 16.1265 15.5808 15.6065 15.0608L9.49987 8.94078C8.97987 8.42078 8.13987 8.42078 7.61987 8.94078Z',
+            'M16.4065 8.94078C15.8865 9.46078 15.8865 10.3008 16.4065 10.8208L21.5665 16.0074L16.3932 21.1808C15.8732 21.7008 15.8732 22.5408 16.3932 23.0608C16.9132 23.5808 17.7532 23.5808 18.2732 23.0608L24.3932 16.9408C24.9132 16.4208 24.9132 15.5808 24.3932 15.0608L18.2865 8.94078C17.7665 8.42078 16.9265 8.42078 16.4065 8.94078Z',
+        ];
+    }, [direction]);
+    return (React__default.createElement(SVG, __assign({ fill: "none", xmlns: "http://www.w3.org/2000/svg", iconSizes: iconSizes$4, size: size }, props),
+        React__default.createElement("title", { id: "DoubleArrowIcon" }, iconAltText),
+        React__default.createElement("path", { d: directionPaths[0], fill: color }),
+        React__default.createElement("path", { d: directionPaths[1], fill: color })));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2688,7 +2890,14 @@ var getVariantStyles = function (props, variant) {
     var ctaDark = getThemeColor(props, 'secondary1.80', colors.secondary1['80']);
     // const ctaLight = getThemeColor(props, 'secondary1.20', colors.secondary1['20']);
     var error = getThemeColor(props, 'errors.main', colors.errors.main);
+    var errorLight = getThemeColor(props, 'errors.10', colors.errors['10']);
     var errorDark = getThemeColor(props, 'errors.70', colors.errors['70']);
+    var customColor = props.variantColor || white;
+    var customBorderColor = props.variantBorderColor;
+    var customBg = props.variantBg;
+    var customHoverColor = props.variantHoverColor || white;
+    var customHoverBorderColor = props.variantHoverBorderColor;
+    var customHoverBg = props.variantHoverBg;
     switch (variant) {
         case 'primary':
             return {
@@ -2780,6 +2989,24 @@ var getVariantStyles = function (props, variant) {
                     outlineColor: error,
                 },
             };
+        case 'error-light':
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: error,
+                background: error,
+                color: white,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: errorLight,
+                    background: errorLight,
+                    color: white,
+                },
+                ':focus-visible': {
+                    outlineColor: error,
+                },
+            };
         case 'disabled':
             return {
                 borderWidth: 3,
@@ -2828,6 +3055,45 @@ var getVariantStyles = function (props, variant) {
                     outlineColor: 'transparent',
                 },
             };
+        case 'text-error-light':
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: 'transparent',
+                background: 'transparent',
+                color: error,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: errorLight,
+                    background: errorLight,
+                    color: white,
+                },
+                ':focus-visible': {
+                    outlineColor: 'transparent',
+                },
+            };
+        case 'custom':
+            if (!customBorderColor && !customBg) {
+                return {};
+            }
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: customBorderColor,
+                background: customBg,
+                color: customColor,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: customHoverBorderColor || customBorderColor,
+                    background: customHoverBg || customBg,
+                    color: customHoverColor || customColor,
+                },
+                ':focus-visible': {
+                    outlineColor: customBorderColor,
+                },
+            };
         default:
             return {};
     }
@@ -2890,7 +3156,7 @@ var IconButton = React__default.forwardRef(function (props, ref) {
     var buttonPadding = !hasChildren
         ? getSizeStyle$1('iconOnlyPadding', '12px')
         : getSizeStyle$1('padding', '12px');
-    return (React__default.createElement(Button, __assign({ ref: ref, size: size }, newProps, { style: __assign(__assign(__assign({}, (newProps.style || {})), { padding: buttonPadding(__assign(__assign({}, newProps), { size: size })) }), (iconPosition === "top" || iconPosition === "bottom" ? {
+    return (React__default.createElement(Button, __assign({ ref: ref, size: size }, newProps, { style: __assign(__assign({ padding: buttonPadding(__assign(__assign({}, newProps), { size: size })) }, (newProps.style || {})), (iconPosition === "top" || iconPosition === "bottom" ? {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -2908,7 +3174,7 @@ var ButtonIcon = React__default.forwardRef(function (props, ref) {
     if (size !== "tiny" && size !== "small") {
         btnSize = "medium";
     }
-    var hoverColor = _.get(variantStyles, [':hover', 'color']) || '';
+    var hoverColor = (iconProps === null || iconProps === void 0 ? void 0 : iconProps.hoverColor) || _.get(variantStyles, [':hover', 'color']) || '';
     var iconNewProps = __assign(__assign({}, iconProps), { size: btnSize, color: hoverColor && isHovering ? hoverColor : ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.color) || variantStyles.color || '#fff'), style: __assign({ verticalAlign: 'top', paddingRight: hasChildren && iconPosition === "left" ? '5px' : '0px', paddingLeft: hasChildren && iconPosition === "right" ? '5px' : '0px', boxSizing: 'content-box' }, ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.style) || {})) });
     if (typeof Icon !== 'function') {
         return React__default.cloneElement(Icon, iconNewProps);
@@ -3399,12 +3665,13 @@ function skuSelectStyles(props) {
         },
     };
 }
-var skuSelectTheme = function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: colors.primary0, primary75: colors.primary0, primary50: colors.primary10, primary: colors.primary, neutral20: colors.select.border, neutral30: colors.select.border, neutral80: colors.textbody, neutral90: colors.textbody }) })); };
+var skuSelectThemeByProps = function (props) { return function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: getThemeColor(props, 'primary0', colors.primary0), primary75: getThemeColor(props, 'primary0', colors.primary0), primary50: getThemeColor(props, 'primary10', colors.primary10), primary: getThemeColor(props, 'primary', colors.primary), neutral20: getThemeColor(props, 'select.border', colors.select.border), neutral30: getThemeColor(props, 'select.border', colors.select.border), neutral80: getThemeColor(props, 'textbody', colors.textbody), neutral90: getThemeColor(props, 'textbody', colors.textbody) }) })); }; };
 // duplicate styles to overide .resku global styles
 // : React.ForwardRefExoticComponent<SKUSelectProps & React.RefAttributes<BaseSelect>>
 //   React.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | ... 27 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & React.RefAttributes<...>>
 var SKUSelect = React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
+    var skuSelectTheme = skuSelectThemeByProps(props);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
     return React__default.createElement(BaseSelect__default, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
@@ -3420,6 +3687,7 @@ var LabeledSelect = React__default.forwardRef(function (_a, ref) {
 });
 var SKUCreatableSelect = React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
+    var skuSelectTheme = skuSelectThemeByProps(props);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
     return (React__default.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
@@ -3435,6 +3703,7 @@ var LabeledCreatableSelect = React__default.forwardRef(function (_a, ref) {
 });
 var SKUAsyncSelect = React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
+    var skuSelectTheme = skuSelectThemeByProps(props);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
     return (React__default.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
@@ -5873,7 +6142,27 @@ function LinkWithIcon(_a) {
 }
 var templateObject_1$K;
 
-var NotificationVariantStyles = function (alertType) {
+var NotificationExtraContent = React.memo(function (props) {
+    var learnMore = props.learnMore, linkText = props.linkText, href = props.href;
+    if (learnMore) {
+        return (React__default.createElement(LinkWithIcon, { href: href, style: { marginLeft: "auto" }, pl: 24, flexShrink: true }, "Learn More"));
+    }
+    if (linkText) {
+        return (React__default.createElement(LinkWithIcon, { href: href, style: { marginLeft: "auto" }, pl: 24, flexShrink: true }, linkText));
+    }
+    return null;
+});
+var NotificationIcon = React.memo(function (props) {
+    var alertType = props.alertType;
+    if (alertType === "success") {
+        return React__default.createElement(CompletedCheckmarkIcon, { color: colors.green.dark, mr: 8, style: { flexShrink: 0 } });
+    }
+    else if (alertType === "error") {
+        return React__default.createElement(AlertIcon, { color: colors.errors.dark, mr: 8, style: { flexShrink: 0 } });
+    }
+    return React__default.createElement(InfoIcon, { color: colors.navy.dark, mr: 8, style: { flexShrink: 0 } });
+});
+var notificationVariantStyles = function (alertType) {
     switch (alertType) {
         case "neutral":
             return {
@@ -5894,31 +6183,14 @@ var NotificationVariantStyles = function (alertType) {
             return {};
     }
 };
-var StyledNotification = styled__default.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        width: fit-container;\n        border-radius: 5px;\n        padding: 24px 16px;\n        display:flex;\n        flex-direction: row;\n        ", ";\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        width: fit-container;\n        border-radius: 5px;\n        padding: 24px 16px;\n        display:flex;\n        flex-direction: row;\n        ", ";\n        ", "\n        ", "\n    }\n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.alertType ? NotificationVariantStyles(props.alertType) : {}; }, SharedStyles, SizerCss);
-function AlertNotification(_a) {
-    var _b = _a.alertType, alertType = _b === void 0 ? "neutral" : _b, _c = _a.learnMore, learnMore = _c === void 0 ? false : _c, href = _a.href, linkText = _a.linkText, children = _a.children, _d = _a.style, props = __rest(_a, ["alertType", "learnMore", "href", "linkText", "children", "style"]);
-    function notificationIcon() {
-        if (alertType === "success") {
-            return React__default.createElement(CompletedCheckmarkIcon, { color: colors.green.dark, mr: 8, style: { flexShrink: 0 } });
-        }
-        else if (alertType === "error") {
-            return React__default.createElement(AlertIcon, { color: colors.errors.dark, mr: 8, style: { flexShrink: 0 } });
-        }
-        else {
-            return React__default.createElement(InfoIcon, { color: colors.navy.dark, mr: 8, style: { flexShrink: 0 } });
-        }
-    }
-    NotificationVariantStyles(alertType);
-    return (React__default.createElement(StyledNotification, __assign({ alertType: alertType }, props),
-        notificationIcon(),
+var StyledNotification = styled__default.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n&&& {\n  font-size: ", ";\n  font-family: ", ";\n  line-height: ", ";\n  width: fit-container;\n  border-radius: 5px;\n  padding: 24px 16px;\n  display:flex;\n  flex-direction: row;\n  ", ";\n  ", "\n  ", "\n}"], ["\n&&& {\n  font-size: ", ";\n  font-family: ", ";\n  line-height: ", ";\n  width: fit-container;\n  border-radius: 5px;\n  padding: 24px 16px;\n  display:flex;\n  flex-direction: row;\n  ", ";\n  ", "\n  ", "\n}"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.alertType ? notificationVariantStyles(props.alertType) : {}; }, SharedStyles, SizerCss);
+var AlertNotification = function (_a) {
+    var href = _a.href, linkText = _a.linkText, children = _a.children, _b = _a.alertType, alertType = _b === void 0 ? "neutral" : _b, _c = _a.learnMore, learnMore = _c === void 0 ? false : _c, _d = _a.style, style = _d === void 0 ? {} : _d, props = __rest(_a, ["href", "linkText", "children", "alertType", "learnMore", "style"]);
+    return (React__default.createElement(StyledNotification, __assign({ alertType: alertType, style: style }, props),
+        React__default.createElement(NotificationIcon, { alertType: alertType }),
         children,
-        learnMore ?
-            React__default.createElement(LinkWithIcon, { href: href, style: { marginLeft: "auto" }, pl: 24, flexShrink: true }, "Learn More")
-            :
-                linkText ?
-                    React__default.createElement(LinkWithIcon, { href: href, style: { marginLeft: "auto" }, pl: 24, flexShrink: true }, linkText)
-                    : null));
-}
+        React__default.createElement(NotificationExtraContent, { href: href, learnMore: learnMore, linkText: linkText })));
+};
 var templateObject_1$L;
 
 function useNumberInput(props) {
@@ -7022,13 +7294,13 @@ var SimpleWindowedTableStyles = styled__default.div(templateObject_1$V || (templ
         ? "background: ".concat(getThemeColor(p, 'tableHeaderBg', '#F6FEFF'), ";")
         : styled.css(p.selectedRowStyle), "\n        }") : ''; });
 function SimpleWindowedTable(_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f, _g = _a.tableHeaderProps, tableHeaderProps = _g === void 0 ? {} : _g, _h = _a.tableFooterProps, tableFooterProps = _h === void 0 ? {} : _h, _j = _a.hideFooter, hideFooter = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? '' : _k, NoRowsFound = _a.NoRowsFound;
+    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f, _g = _a.tableHeaderProps, tableHeaderProps = _g === void 0 ? {} : _g, _h = _a.tableFooterProps, tableFooterProps = _h === void 0 ? {} : _h, _j = _a.headerGroupStyle, headerGroupStyle = _j === void 0 ? {} : _j, _k = _a.hideFooter, hideFooter = _k === void 0 ? true : _k, _l = _a.clearRowFullWidth, clearRowFullWidth = _l === void 0 ? false : _l, _m = _a.className, className = _m === void 0 ? '' : _m, NoRowsFound = _a.NoRowsFound;
     var defaultColumn = React__default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
     }); }, [minWidth, maxWidth]);
     var scrollBarSize = React__default.useMemo(function () { return scrollbarWidth(); }, []);
-    var _l = reactTable.useTable(__assign({ columns: columns, data: data, defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), reactTable.useSortBy, reactTable.useFlexLayout), getTableProps = _l.getTableProps, getTableBodyProps = _l.getTableBodyProps, headerGroups = _l.headerGroups, footerGroups = _l.footerGroups, rows = _l.rows, totalColumnsWidth = _l.totalColumnsWidth, prepareRow = _l.prepareRow;
+    var _o = reactTable.useTable(__assign({ columns: columns, data: data, defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), reactTable.useSortBy, reactTable.useFlexLayout), getTableProps = _o.getTableProps, getTableBodyProps = _o.getTableBodyProps, headerGroups = _o.headerGroups, footerGroups = _o.footerGroups, rows = _o.rows, totalColumnsWidth = _o.totalColumnsWidth, prepareRow = _o.prepareRow;
     var headerRef = React.useRef(null);
     var footerRef = React.useRef(null);
     var rowsRef = React.useRef();
@@ -7053,13 +7325,15 @@ function SimpleWindowedTable(_a) {
         var index = _a.index, isScrolling = _a.isScrolling, style = _a.style;
         var row = rows[index];
         prepareRow(row);
-        return (React__default.createElement("div", __assign({}, row.getRowProps({
-            style: style
-        }), { className: "tr" }), row.cells.map(function (cell) {
+        var rowStyle = __assign({}, (style || {}));
+        if (rowStyle.width && rowStyle.width === '100%' && clearRowFullWidth) {
+            delete rowStyle.width;
+        }
+        return (React__default.createElement("div", __assign({}, row.getRowProps({ style: rowStyle }), { className: "tr" }), row.cells.map(function (cell) {
             var cellProps = cell.getCellProps();
             return (React__default.createElement("div", __assign({}, cellProps, { onClick: function () { return onClickRow ? onClickRow(cell.row.original, index) : null; }, className: "td ".concat(cellProps.className || '') }), cell.render("Cell", { isScrolling: isScrolling })));
         })));
-    }, [prepareRow, rows, onClickRow]);
+    }, [prepareRow, rows, onClickRow, clearRowFullWidth]);
     var getHeaderProps = function (column, isFooter) {
         if (isFooter === void 0) { isFooter = false; }
         var headerProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), (column.containerProps || {})));
@@ -7085,9 +7359,16 @@ function SimpleWindowedTable(_a) {
         return __assign(__assign({}, headerGroupProps), { style: headerStyles, className: headerClassNames });
     };
     return (React__default.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
-        React__default.createElement("div", __assign({}, tableHeaderProps, { className: "header-wrapper ".concat(tableHeaderProps.className || '') }), headerGroups.map(function (headerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { className: "header tr", ref: headerRef }), headerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, false)),
-            column.render("Header"),
-            column.canSort ? React__default.createElement("span", { style: { display: 'inline-block', paddingLeft: 5, verticalAlign: 'text-top' } }, column.isSorted ? (column.isSortedDesc ? React__default.createElement(FilledChevronIcon, { direction: "down", width: "15px" }) : React__default.createElement(FilledChevronIcon, { direction: "up", width: "15px" })) : React__default.createElement(FilledChevronIcon, { direction: "updown", width: "15px" })) : null)); }))); })),
+        React__default.createElement("div", __assign({}, tableHeaderProps, { className: "header-wrapper ".concat(tableHeaderProps.className || '') }), headerGroups.map(function (headerGroup) {
+            var headerGroupProps = getHeaderGroupProps(headerGroup, false);
+            return (React__default.createElement("div", __assign({}, headerGroupProps, { className: "header tr", ref: headerRef, style: __assign(__assign({}, (headerGroupProps.style || {})), (headerGroupStyle || {})) }), headerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, false)),
+                column.render("Header"),
+                column.canSort ?
+                    React__default.createElement(FilledChevronIcon, { size: 'medium', direction: column.isSorted
+                            ? (column.isSortedDesc ? 'down' : 'up')
+                            : 'updown', style: { verticalAlign: 'middle' } })
+                    : null)); })));
+        })),
         React__default.createElement("div", __assign({}, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.createElement(NoRowsFound, null) : React__default.createElement(reactWindow.FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "table-list-rows", outerRef: rowsRef, onScroll: onScroll, useIsScrolling: true }, RenderRow)),
         !hideFooter ? React__default.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper ".concat(tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null));
 }
@@ -7113,6 +7394,7 @@ Object.defineProperty(exports, 'mergeStyles', {
 });
 exports.AddIcon = AddIcon;
 exports.AddNoteIcon = AddNoteIcon;
+exports.AddShoppingCartIcon = AddShoppingCartIcon;
 exports.AddTaskIcon = AddTaskIcon;
 exports.AlertIcon = AlertIcon;
 exports.AlertNotification = AlertNotification;
@@ -7182,6 +7464,7 @@ exports.DefaultStar = DefaultStar;
 exports.DollarIcon = DollarIcon;
 exports.DoneButton = DoneButton;
 exports.Dot = Dot;
+exports.DoubleArrowIcon = DoubleArrowIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragIcon = DragIcon;
 exports.DraggableTasksCalendar = DraggableTasksCalendar;
@@ -7199,6 +7482,7 @@ exports.ErrorBoundary = ErrorBoundary;
 exports.EstimateCircleIcon = EstimateCircleIcon;
 exports.EyeIcon = EyeIcon;
 exports.FeedPost = FeedPost;
+exports.FileUploadIcon = FileUploadIcon;
 exports.FilledChevronIcon = FilledChevronIcon;
 exports.FolderIcon = FolderIcon;
 exports.GalleryIcon = GalleryIcon;
@@ -7220,6 +7504,7 @@ exports.H6 = H6;
 exports.HandleIcon = HandleIcon;
 exports.HeaderWrapper = HeaderWrapper;
 exports.HeadlessTable = HeadlessTable;
+exports.HelpIcon = HelpIcon;
 exports.HistoryIcon = HistoryIcon;
 exports.IconButton = IconButton;
 exports.IconDoc = IconDoc;
@@ -7297,6 +7582,7 @@ exports.SearchIcon = SearchIcon;
 exports.Select = SKUSelect;
 exports.SharedStyles = SharedStyles;
 exports.ShopIcon = ShopIcon;
+exports.ShoppingCartIcon = ShoppingCartIcon;
 exports.ShowPopup = ShowPopup;
 exports.SidePanel = SidePanel;
 exports.SimpleWindowedTable = SimpleWindowedTable;