@commonsku/styles 1.17.13 → 1.17.15

package/dist/index.cjs

@@ -2553,39 +2553,30 @@ function AddShoppingCartIcon(_a) {
 }
 
 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"]);
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Community" : _c, _d = _a.color, color = _d === void 0 ? teal.main : _d, props = __rest(_a, ["size", "altText", "color"]);
     return React__default.default.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "CommunityIcon" }, props),
         React__default.default.createElement("title", { id: "CommunityIcon" }, altText),
-        React__default.default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#5BBDEC" }),
-        React__default.default.createElement("path", { d: "M13.6999 18.6333V17.9C13.6999 16.9333 12.9333 16.1666 11.9999 16.1666H11.9666C11.0333 16.1666 10.2999 16.9333 10.2999 17.8666V18.6333H6.49994C6.23328 18.6333 6.03328 18.4333 6.03328 18.1666V14.0333H5.26661C4.13328 14.0333 3.23328 13.1333 3.23328 12C3.23328 10.8666 4.16661 9.96664 5.26661 9.96664H6.03328V5.8333C6.03328 5.56664 6.23328 5.36664 6.49994 5.36664H10.2999V6.1333C10.2999 7.06664 11.0666 7.8333 11.9999 7.8333C12.9333 7.8333 13.6999 7.06664 13.6999 6.1333V5.36664H17.4999C17.7666 5.36664 17.9666 5.56664 17.9666 5.8333V9.96664H18.7333C19.8666 9.96664 20.7666 10.8666 20.7666 12C20.7666 13.1333 19.8666 14.0333 18.7333 14.0333H17.9666V18.1666C17.9666 18.4333 17.7666 18.6333 17.4999 18.6333H13.6999Z", fill: "white" }),
-        React__default.default.createElement("path", { d: "M6.49998 5.53335H10.1333V6.13335C10.1333 7.16668 10.9667 8.00001 12 8.00001C13.0333 8.00001 13.8666 7.16668 13.8666 6.13335V5.53335H17.5C17.6667 5.53335 17.8 5.66668 17.8 5.83335V10.1333H18.7333C19.7667 10.1333 20.6 10.9667 20.6 12C20.6 13.0333 19.7667 13.8667 18.7333 13.8667H17.8V18.1667C17.8 18.3333 17.6667 18.4667 17.5 18.4667H13.8666V17.9C13.8666 16.8667 13.0333 16 12 16H11.9667C10.9333 16 10.1333 16.8333 10.1333 17.8667V18.4667H6.49998C6.33332 18.4667 6.19998 18.3333 6.19998 18.1667V13.8667H5.26665C4.23332 13.8667 3.39998 13.0333 3.39998 12C3.39998 10.9667 4.23332 10.1333 5.26665 10.1333H6.19998V5.83335C6.19998 5.66668 6.33332 5.53335 6.49998 5.53335ZM6.49998 5.20001C6.16665 5.20001 5.86665 5.46668 5.86665 5.83335V9.80001H5.26665C4.03332 9.80001 3.06665 10.8 3.06665 12C3.06665 13.2333 4.06665 14.2 5.26665 14.2H5.86665V18.1667C5.86665 18.5 6.13332 18.8 6.49998 18.8H10.1333H10.4667V18.4667V17.8667C10.4667 17.0333 11.1333 16.3333 11.9667 16.3333H12C12.8333 16.3333 13.5333 17.0667 13.5333 17.9V18.4667V18.8H13.8666H17.5C17.8333 18.8 18.1333 18.5333 18.1333 18.1667V14.2H18.7333C19.9667 14.2 20.9333 13.2 20.9333 12C20.9333 10.7667 19.9333 9.80001 18.7333 9.80001H18.1333V5.83335C18.1333 5.50001 17.8667 5.20001 17.5 5.20001H13.8666H13.5333V5.53335V6.13335C13.5333 6.96668 12.8333 7.66668 12 7.66668C11.1667 7.66668 10.4667 6.96668 10.4667 6.13335V5.53335V5.20001H10.1333H6.49998Z", fill: "#5BBDEC" }),
-        React__default.default.createElement("path", { d: "M12 12.2C12.7916 12.2 13.4333 11.5583 13.4333 10.7666C13.4333 9.97504 12.7916 9.33331 12 9.33331C11.2084 9.33331 10.5667 9.97504 10.5667 10.7666C10.5667 11.5583 11.2084 12.2 12 12.2Z", fill: "#5BBDEC" }),
-        React__default.default.createElement("path", { d: "M14.5333 14.6667H9.46667C9.46667 13.2667 10.6 12.1334 12 12.1334C13.4 12.1334 14.5333 13.2667 14.5333 14.6667Z", fill: "#5BBDEC" }));
+        React__default.default.createElement("g", { fill: color, clipPath: "url(#a)" },
+            React__default.default.createElement("path", { d: "M12.102 6.478a3.242 3.242 0 0 0 3.245-3.24A3.242 3.242 0 0 0 12.102 0a3.242 3.242 0 0 0-3.246 3.239 3.242 3.242 0 0 0 3.246 3.239Z" }),
+            React__default.default.createElement("path", { fillRule: "evenodd", d: "M16.331 10.23c0-1.304-1.938-2.361-4.328-2.361-2.39 0-4.328 1.057-4.328 2.36h8.656Z", clipRule: "evenodd" }),
+            React__default.default.createElement("path", { d: "M19.577 20.248a3.243 3.243 0 0 0 3.246-3.239 3.242 3.242 0 0 0-3.246-3.239 3.242 3.242 0 0 0-3.246 3.24 3.242 3.242 0 0 0 3.246 3.238Z" }),
+            React__default.default.createElement("path", { fillRule: "evenodd", d: "M23.807 24c0-1.304-1.938-2.36-4.328-2.36-2.39 0-4.328 1.056-4.328 2.36h8.656Z", clipRule: "evenodd" }),
+            React__default.default.createElement("path", { d: "M4.626 20.248a3.242 3.242 0 0 0 3.246-3.239 3.242 3.242 0 0 0-3.246-3.239 3.242 3.242 0 0 0-3.246 3.24 3.242 3.242 0 0 0 3.246 3.238Z" }),
+            React__default.default.createElement("path", { fillRule: "evenodd", d: "M8.856 24c0-1.304-1.938-2.36-4.328-2.36C2.138 21.64.2 22.695.2 24h8.656Z", clipRule: "evenodd" })));
 }
 
 function ConnectedIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Connected" : _c, props = __rest(_a, ["size", "altText"]);
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Connected" : _c, _d = _a.color, color = _d === void 0 ? teal.main : _d, props = __rest(_a, ["size", "altText", "color"]);
     return React__default.default.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "ConnectedIcon" }, props),
         React__default.default.createElement("title", { id: "ConnectedIcon" }, altText),
-        React__default.default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#0F6EA6" }),
-        React__default.default.createElement("path", { d: "M9.06661 16.1334V15.7C9.06661 14.9667 8.46661 14.3334 7.73328 14.3334C6.96661 14.3334 6.33328 14.9667 6.33328 15.7334V16.1334H3.73328V8.30002C3.73328 8.26669 3.76661 8.20002 3.83328 8.20002H6.66661V7.43336C6.66661 6.86669 7.13328 6.40002 7.66661 6.40002C8.23328 6.40002 8.73328 6.90002 8.73328 7.46669V8.20002H11.5999C11.6333 8.20002 11.6666 8.23336 11.6666 8.26669V10.8H11.2666C10.8999 10.8 10.5333 10.9667 10.2666 11.2334C9.99994 11.5 9.86661 11.8334 9.86661 12.2C9.86661 12.9334 10.4999 13.5334 11.2333 13.5334H11.6666V16.0667C11.6666 16.1 11.6333 16.1334 11.5999 16.1334H9.06661Z", fill: "white" }),
-        React__default.default.createElement("path", { d: "M7.69998 6.23334V6.56667C8.16665 6.56667 8.56665 6.96667 8.56665 7.46667V8.03334V8.36667H8.89998H11.5V10.6333H11.2667C10.8333 10.6333 10.4333 10.8 10.1333 11.1C9.83332 11.4 9.69998 11.7667 9.69998 12.2C9.69998 13.0333 10.4 13.7 11.2333 13.7H11.5V15.9667H9.23332V15.7C9.23332 14.8667 8.56665 14.2 7.73332 14.1667H7.69998C6.86665 14.1667 6.16665 14.8667 6.16665 15.7333V15.9667H3.89998V8.36667H6.49998H6.83332V8.03334V7.43334C6.83332 6.96667 7.19998 6.56667 7.66665 6.56667V6.23334M7.69998 6.23334C7.69998 6.23334 7.66665 6.23334 7.69998 6.23334C7.03332 6.23334 6.49998 6.76667 6.49998 7.43334V8.03334H3.83332C3.69998 8.03334 3.56665 8.13334 3.56665 8.3V16.3H6.49998V15.7333C6.49998 15.0667 7.03332 14.5 7.69998 14.5C7.69998 14.5 7.69998 14.5 7.73332 14.5C8.39998 14.5 8.89998 15.0333 8.89998 15.7V16.3H11.6C11.7333 16.3 11.8333 16.2 11.8333 16.0667V13.3667H11.2333C10.5667 13.3667 10.0333 12.8333 10.0333 12.2C10.0333 11.5333 10.6 10.9667 11.2667 10.9667H11.8333V8.26667C11.8333 8.13334 11.7333 8.03334 11.6 8.03334H8.89998V7.46667C8.89998 6.8 8.36665 6.23334 7.69998 6.23334Z", fill: "#0F6EA6" }),
-        React__default.default.createElement("path", { d: "M17.3333 16.1333V15.7C17.3333 14.9333 16.7333 14.3333 15.9666 14.3333C15.2 14.3333 14.6 14.9333 14.6 15.7V16.1333H12V13.3667V13.2H11.2333C10.6666 13.2 10.2 12.7333 10.2 12.1667C10.2 11.6 10.6666 11.1333 11.2333 11.1333H12V8.23335L14.6 8.20001V8.60001C14.6 9.36668 15.2 10 15.9666 10C16.7333 10 17.3333 9.36668 17.3333 8.63335V8.20001H19.9L19.9333 10.9667V11.1333H20.7C21.2666 11.1333 21.7333 11.6 21.7333 12.1667C21.7333 12.7333 21.2666 13.2 20.7 13.2H19.9333V16.1L19.9 16.1333H17.3333Z", fill: "white" }),
-        React__default.default.createElement("path", { d: "M19.7667 8.36666V10.9667V11.3H20.1H20.7C21.1667 11.3 21.5667 11.7 21.5667 12.1667C21.5667 12.6333 21.1667 13.0333 20.7 13.0333H20.1H19.7667V13.3667V15.9667H17.5V15.7C17.5 14.8667 16.8 14.1667 15.9667 14.1667C15.1333 14.1667 14.4333 14.8667 14.4333 15.7V15.9667H12.1667V13.3667V13.0333H11.8333H11.2333C10.7667 13.0333 10.3667 12.6333 10.3667 12.1667C10.3667 11.7 10.7667 11.3 11.2333 11.3H11.8333H12.1667V10.9667V8.36666H14.4333V8.59999C14.4333 9.46666 15.1333 10.1667 15.9667 10.1667H16C16.8333 10.1667 17.5 9.46666 17.5 8.63332V8.36666H19.7667ZM19.9 8.03333H17.1667V8.63332C17.1667 9.29999 16.6333 9.83333 16 9.83333H15.9667C15.3 9.83333 14.7667 9.26666 14.7667 8.59999V8.03333H12C11.9 8.03333 11.8 8.09999 11.8 8.23333V10.9667H11.2C10.5333 10.9667 10 11.5 10 12.1667C10 12.8333 10.5333 13.3667 11.2 13.3667H11.8V16.1C11.8 16.2 11.8667 16.3 12 16.3H14.7333V15.7C14.7333 15.0333 15.2667 14.5 15.9333 14.5C16.6 14.5 17.1333 15.0333 17.1333 15.7V16.3H19.8667C19.9667 16.3 20.0667 16.2333 20.0667 16.1V13.3667H20.6667C21.3333 13.3667 21.8667 12.8333 21.8667 12.1667C21.8667 11.5 21.3333 10.9667 20.6667 10.9667H20.0667V8.23333C20.1 8.13333 20 8.03333 19.9 8.03333Z", fill: "#0F6EA6" }));
+        React__default.default.createElement("path", { fill: color, d: "M12 6.987c1.657 0 3-1.34 3-2.993A2.997 2.997 0 0 0 12 1c-1.657 0-3 1.34-3 2.994a2.997 2.997 0 0 0 3 2.993ZM13.594 8.194a4.513 4.513 0 0 0 2.317-1.978l5.727 9.796a4.486 4.486 0 0 0-3.08.673l-4.964-8.491ZM16.5 20.458c0 .525.09 1.029.256 1.497H7.244c.166-.468.256-.972.256-1.497 0-.525-.09-1.029-.256-1.497h9.512a4.475 4.475 0 0 0-.256 1.497ZM5.442 16.686l4.964-8.492a4.513 4.513 0 0 1-2.317-1.978l-5.727 9.796c.209-.029.421-.044.638-.044.9 0 1.738.264 2.442.718ZM6 20.458a2.997 2.997 0 0 1-3 2.994c-1.657 0-3-1.34-3-2.994a2.997 2.997 0 0 1 3-2.993c1.657 0 3 1.34 3 2.993ZM21 23.452c1.657 0 3-1.34 3-2.994a2.997 2.997 0 0 0-3-2.993c-1.657 0-3 1.34-3 2.993a2.997 2.997 0 0 0 3 2.994Z" }));
 }
 
 function ConnectedPlusIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "ConnectedPlus" : _c, props = __rest(_a, ["size", "altText"]);
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "ConnectedPlus" : _c, _d = _a.color, color = _d === void 0 ? teal.main : _d, props = __rest(_a, ["size", "altText", "color"]);
     return React__default.default.createElement(SVG$1, __assign({ size: size, "aria-labelledby": "ConnectedPlusIcon" }, props),
         React__default.default.createElement("title", { id: "ConnectedPlusIcon" }, altText),
-        React__default.default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#003C5E" }),
-        React__default.default.createElement("path", { d: "M9.70007 12.2334V11.9C9.70007 11.2667 9.20007 10.7334 8.53341 10.7334C7.86674 10.7334 7.33341 11.2667 7.33341 11.9334V12.2334H5.20007V5.70002C5.20007 5.66669 5.23341 5.66669 5.23341 5.66669H7.63341V5.00002C7.63341 4.53335 8.00007 4.16669 8.46674 4.16669C8.93341 4.16669 9.33341 4.56669 9.33341 5.03335V5.66669H11.7667C11.8001 5.66669 11.8001 5.66669 11.8001 5.70002V7.80002H11.5001C11.1667 7.80002 10.8667 7.93335 10.6334 8.16669C10.4001 8.40002 10.3001 8.70002 10.3001 9.00002C10.3001 9.63335 10.8334 10.1667 11.4667 10.1667H11.8001V12.2667C11.8001 12.3 11.8001 12.3 11.7667 12.3H9.70007V12.2334Z", fill: "white" }),
-        React__default.default.createElement("path", { d: "M8.53331 4.30001C8.89998 4.30001 9.19998 4.63334 9.19998 5.00001V5.46667V5.80001H9.53331H11.6666V7.60001H11.5333C11.1666 7.60001 10.8 7.76667 10.5666 8.00001C10.3 8.26667 10.1666 8.60001 10.2 8.96667C10.2 9.70001 10.8 10.2667 11.5333 10.2667H11.6666V12.0667H9.86664V11.9C9.86664 11.1667 9.26664 10.5667 8.56664 10.5667H8.53331C7.79998 10.5667 7.19998 11.1667 7.19998 11.9333V12.0667H5.39998V5.80001H7.53331H7.86664V5.46667V4.96667C7.86664 4.60001 8.16664 4.30001 8.53331 4.30001ZM8.53331 3.96667C7.96664 3.96667 7.53331 4.43334 7.53331 4.96667V5.46667H5.29998C5.16664 5.46667 5.09998 5.56667 5.09998 5.66667V12.4H7.56664V11.9333C7.56664 11.3667 8.03331 10.9 8.56664 10.9C8.56664 10.9 8.56664 10.9 8.59998 10.9C9.13331 10.9 9.59998 11.3667 9.59998 11.9V12.4H11.8666C11.9666 12.4 12.0666 12.3 12.0666 12.2V9.93334H11.5666C11.0333 9.93334 10.5666 9.50001 10.5666 8.93334C10.5666 8.36667 11.0333 7.90001 11.6 7.90001H12V5.66667C12 5.56667 11.9 5.46667 11.8 5.46667H9.53331V5.00001C9.53331 4.43334 9.09998 3.96667 8.53331 3.96667Z", fill: "#003C5E" }),
-        React__default.default.createElement("path", { d: "M16.6333 12.2333V11.9C16.6333 11.2666 16.1 10.7333 15.4666 10.7333C14.8333 10.7333 14.3 11.2666 14.3 11.9V12.2333H12.1666V9.76663H11.5C11.0333 9.76663 10.6666 9.39997 10.6666 8.9333C10.6666 8.46663 11.0333 8.09997 11.5 8.09997H12.1666V5.6333H14.3V5.96663C14.3 6.6333 14.8333 7.16663 15.4666 7.16663C16.1333 7.16663 16.6333 6.6333 16.6333 5.99997V5.66663H18.7666V8.1333H19.4333C19.9 8.1333 20.2666 8.49997 20.2666 8.96663C20.2666 9.4333 19.9 9.79997 19.4333 9.79997H18.7666V12.2666H16.6333V12.2333Z", fill: "white" }),
-        React__default.default.createElement("path", { d: "M18.6 5.80002V7.93335V8.26668H18.9333H19.4333C19.8 8.26668 20.1 8.56668 20.1 8.93335C20.1 9.30002 19.8 9.60002 19.4333 9.60002H18.9333H18.6V9.93335V12.0667H16.8V11.9C16.8 11.1667 16.2 10.5667 15.4667 10.5667C14.7333 10.5667 14.1333 11.1667 14.1333 11.9V12.0667H12.3333V9.93335V9.60002H12H11.5C11.1333 9.60002 10.8333 9.30002 10.8333 8.93335C10.8333 8.56668 11.1333 8.26668 11.5 8.26668H12H12.3333V7.93335V5.80002H14.1333V5.96668C14.1333 6.73335 14.7333 7.33335 15.4667 7.33335H15.5C16.2333 7.33335 16.8 6.73335 16.8 6.00002V5.83335H18.6M18.8 5.46668H16.5V5.96668C16.5 6.53335 16.0667 6.96668 15.5 6.96668C15.5 6.96668 15.5 6.96668 15.4667 6.96668C14.9 6.96668 14.4667 6.50002 14.4667 5.93335V5.43335H12.1667C12.0667 5.43335 12 5.50002 12 5.60002V7.90002H11.5C10.9333 7.90002 10.5 8.36668 10.5 8.90002C10.5 9.46668 10.9667 9.90002 11.5 9.90002H12V12.2C12 12.3 12.0667 12.3667 12.1667 12.3667H14.4667V11.8667C14.4667 11.3 14.9333 10.8667 15.4667 10.8667C16.0333 10.8667 16.4667 11.3333 16.4667 11.8667V12.3667H18.7667C18.8667 12.3667 18.9333 12.3 18.9333 12.2V9.90002H19.4333C20 9.90002 20.4333 9.43335 20.4333 8.90002C20.4333 8.33335 19.9667 7.90002 19.4333 7.90002H18.9333V5.60002C18.9333 5.53335 18.8667 5.46668 18.8 5.46668Z", fill: "#003C5E" }),
-        React__default.default.createElement("path", { d: "M5.23328 19.2V16.7333H4.56661C4.09994 16.7333 3.73328 16.3666 3.73328 15.9C3.73328 15.4333 4.09994 15.0666 4.56661 15.0666H5.23328V12.6H7.69994V11.9333C7.69994 11.4666 8.06661 11.1 8.53328 11.1C8.73328 11.1 8.89994 11.1666 9.06661 11.2666C9.23328 11.3666 9.36661 11.6333 9.36661 11.8V12.6H11.8333V14.7333H11.4999C10.8666 14.7333 10.3333 15.2666 10.3333 15.9C10.3333 16.5333 10.8666 17.0666 11.4999 17.0666H11.8333V19.2H5.23328Z", fill: "white" }),
-        React__default.default.createElement("path", { d: "M8.53332 11.2334C8.69998 11.2334 8.83332 11.2667 8.99998 11.3667C9.09998 11.4334 9.23332 11.6334 9.23332 11.7667V12.4V12.7334H9.56665H11.6667V14.5334H11.5C10.7667 14.5334 10.1667 15.1334 10.1667 15.8667C10.1667 16.6 10.7667 17.2 11.5 17.2H11.6667V19H5.39998V16.8667V16.5334H5.06665H4.56665C4.19998 16.5334 3.89998 16.2334 3.89998 15.8667C3.89998 15.5 4.19998 15.2 4.56665 15.2H5.06665H5.39998V14.8667V12.7334H7.53332H7.86665V12.4V11.9C7.86665 11.7334 7.93332 11.5667 8.06665 11.4334C8.16665 11.3 8.36665 11.2334 8.53332 11.2334ZM8.53332 10.9C7.96665 10.9 7.53332 11.3667 7.53332 11.9V12.4H5.06665V14.8667H4.56665C3.99998 14.8667 3.56665 15.3334 3.56665 15.8667C3.56665 16.4334 4.03332 16.8667 4.56665 16.8667H5.06665V19.3334H12V16.8667H11.5C10.9333 16.8667 10.5 16.4 10.5 15.8667C10.5 15.3 10.9667 14.8667 11.5 14.8667H12V12.4H9.53332V11.7667C9.53332 11.5334 9.36665 11.2 9.16665 11.0667C8.96665 10.9667 8.73332 10.9 8.53332 10.9Z", fill: "#003C5E" }),
-        React__default.default.createElement("path", { d: "M16.9666 15.5H15.8V14.3333C15.8 14.1333 15.6666 14 15.4666 14C15.2666 14 15.1333 14.1333 15.1333 14.3333V15.5H13.9666C13.7666 15.5 13.6333 15.6333 13.6333 15.8333C13.6333 16.0333 13.7666 16.1667 13.9666 16.1667H15.1333V17.3333C15.1333 17.5333 15.2666 17.6667 15.4666 17.6667C15.6666 17.6667 15.8 17.5333 15.8 17.3333V16.1667H16.9666C17.1666 16.1667 17.3 16.0333 17.3 15.8333C17.3 15.6333 17.1666 15.5 16.9666 15.5Z", fill: "white" }));
+        React__default.default.createElement("path", { fill: color, d: "M14.433 2.526A2.53 2.53 0 0 1 11.9 5.053a2.53 2.53 0 0 1-2.533-2.527A2.53 2.53 0 0 1 11.9 0a2.53 2.53 0 0 1 2.533 2.526ZM15.193 4.42a3.764 3.764 0 0 0 .454-2.529c4.455 1.546 7.653 5.771 7.653 10.74a11.4 11.4 0 0 1-.189 2.07 3.79 3.79 0 0 0-2.434-.805c.059-.413.09-.835.09-1.264 0-3.723-2.308-6.91-5.574-8.213ZM17.447 19.53a8.845 8.845 0 0 1-5.547 1.944c-2.1 0-4.028-.728-5.547-1.944a3.81 3.81 0 0 1-1.93 1.683A11.374 11.374 0 0 0 11.9 24c2.861 0 5.476-1.051 7.478-2.787a3.811 3.811 0 0 1-1.93-1.683ZM.5 12.632c0 .707.065 1.399.189 2.07a3.79 3.79 0 0 1 2.434-.806 8.892 8.892 0 0 1-.09-1.264c0-3.723 2.308-6.91 5.574-8.213a3.764 3.764 0 0 1-.454-2.527C3.698 3.436.5 7.661.5 12.632ZM3.033 20.21a2.53 2.53 0 0 0 2.534-2.526 2.53 2.53 0 0 0-2.534-2.526A2.53 2.53 0 0 0 .5 17.684a2.53 2.53 0 0 0 2.533 2.526ZM23.3 17.684a2.53 2.53 0 0 1-2.533 2.526 2.53 2.53 0 0 1-2.534-2.526 2.53 2.53 0 0 1 2.534-2.526 2.53 2.53 0 0 1 2.533 2.526ZM11.9 7.579c.7 0 1.267.565 1.267 1.263v2.526H15.7c.7 0 1.267.566 1.267 1.264 0 .697-.567 1.263-1.267 1.263h-2.533v2.526c0 .698-.567 1.263-1.267 1.263s-1.267-.565-1.267-1.263v-2.526H8.1c-.7 0-1.267-.566-1.267-1.263 0-.698.567-1.264 1.267-1.264h2.533V8.842c0-.698.567-1.263 1.267-1.263Z" }));
 }
 
 function CollaborateIcon(_a) {
@@ -4528,7 +4519,7 @@ var Popup = React__default.default.forwardRef(function (_a, forwardedRef) {
                             React__default.default.createElement("span", { className: "title" }, title)),
                         React__default.default.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, noCloseButton ? null :
                             controls || React__default.default.createElement(Button, { onClick: onClose }, "Close")))),
-                React__default.default.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : ''), style: { position: 'relative' } },
+                React__default.default.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : '') },
                     children,
                     " "))));
 });
@@ -5018,14 +5009,14 @@ var IMAGE_WIDTH_THRESHOLD = 250;
 var IMAGE_HEIGHT_THRESHOLD = 250;
 var INITIAL_THUMBNAILS_COUNT = 11;
 var SLICE_COUNT = 2;
-var ThumbnailVerticalContainer = styled__default.default.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  &&& {\n    max-height: 660px;\n    height: 660px;\n    overflow: auto;\n    margin-top: 20px;\n    padding-right: 5px;\n  }\n"], ["\n  &&& {\n    max-height: 660px;\n    height: 660px;\n    overflow: auto;\n    margin-top: 20px;\n    padding-right: 5px;\n  }\n"])));
+var ThumbnailVerticalContainer = styled__default.default.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    max-height: 660px;\n    height: 660px;\n    overflow: auto;\n    margin-top: 20px !important;\n    padding-right: 5px !important;\n"], ["\n    max-height: 660px;\n    height: 660px;\n    overflow: auto;\n    margin-top: 20px !important;\n    padding-right: 5px !important;\n"])));
 var MainViewing = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n    width: 600px;\n    height: 600px;\n    background-position: right;\n    background-repeat: no-repeat;\n    background-size: contain;\n"], ["\n    width: 600px;\n    height: 600px;\n    background-position: right;\n    background-repeat: no-repeat;\n    background-size: contain;\n"])));
-var Main = styled__default.default.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  &&& {\n    width: 100%;\n    height: 478px;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain;\n    margin-bottom: 20px;   \n  }\n"], ["\n  &&& {\n    width: 100%;\n    height: 478px;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain;\n    margin-bottom: 20px;   \n  }\n"])));
-var StyledTooltip = styled__default.default(reactTooltip.Tooltip)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  &&& {\n    background: #123952E5;\n    width: 250px;\n    font-size: large;   \n    padding: 10px 15px;\n  }\n"], ["\n  &&& {\n    background: #123952E5;\n    width: 250px;\n    font-size: large;   \n    padding: 10px 15px;\n  }\n"])));
+var Main = styled__default.default.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n    width: 100%;\n    height: 478px;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain;\n    margin-bottom: 20px !important;\n"], ["\n    width: 100%;\n    height: 478px;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain;\n    margin-bottom: 20px !important;\n"])));
+var StyledTooltip = styled__default.default(reactTooltip.Tooltip)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n    background: #123952E5 !important;\n    width: 250px !important;\n    font-size: large !important;\n"], ["\n    background: #123952E5 !important;\n    width: 250px !important;\n    font-size: large !important;\n"])));
 var ThumbnailContainer = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n        max-height: 190px;\n        overflow: auto;\n"], ["\n        max-height: 190px;\n        overflow: auto;\n"])));
 var Sku = styled__default.default.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  &&& {\n    height: 28px;\n    font-family: var(--font-family-regular);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 18px;\n    line-height: 28px;\n    margin-bottom: 0.5rem;\n    color: ", ";\n\n}"], ["\n  &&& {\n    height: 28px;\n    font-family: var(--font-family-regular);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 18px;\n    line-height: 28px;\n    margin-bottom: 0.5rem;\n    color: ", ";\n\n}"])), colors$1.neutrals['90']);
 var SelectableThumbnail = styled__default.default.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    width: 99px;\n    height: 99px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n    flex-shrink: 0;\n  }\n"], ["\n  &&& {\n    display: flex;\n    width: 99px;\n    height: 99px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n    flex-shrink: 0;\n  }\n"])));
-var InnerFrameThumbnail = styled__default.default.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    padding: 8px;\n    flex-direction: column;\n    gap: 10px;\n    flex: 1 0 0;\n    align-self: stretch;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  &&& {\n    display: flex;\n    padding: 8px;\n    flex-direction: column;\n    gap: 10px;\n    flex: 1 0 0;\n    align-self: stretch;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+var InnerFrameThumbnail = styled__default.default.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    padding: 8px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n    flex: 1 0 0;\n    align-self: stretch;\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  &&& {\n    display: flex;\n    padding: 8px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n    flex: 1 0 0;\n    align-self: stretch;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
 var SizeTag = styled__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    padding: 3px 10px;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n\n    border-radius: 200px;\n    background: ", ";\n\n    color: ", ";\n    text-align: center;\n    \n\n    font-family: var(--font-family-regular);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; \n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    padding: 3px 10px;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n\n    border-radius: 200px;\n    background: ", ";\n\n    color: ", ";\n    text-align: center;\n    \n\n    font-family: var(--font-family-regular);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; \n  }\n"])), colors$1.teal[80], colors$1.white);
 var AutoHideImage = function (_a) {
     var src = _a.src, props = __rest(_a, ["src"]);