@appquality/unguess-design-system 2.12.86 → 3.0.0-colors

package/build/index.js

@@ -7,9 +7,9 @@ require('@zendeskgarden/css-bedrock');
 var reactTheming = require('@zendeskgarden/react-theming');
 var UAParser = require('ua-parser-js');
 var jsxRuntime = require('react/jsx-runtime');
+var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactAccordions = require('@zendeskgarden/react-accordions');
 var React = require('react');
-var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactAvatars = require('@zendeskgarden/react-avatars');
 var reactBreadcrumbs = require('@zendeskgarden/react-breadcrumbs');
 var reactButtons = require('@zendeskgarden/react-buttons');
@@ -37,7 +37,6 @@ var formik = require('formik');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var SlickSlider = require('react-slick');
 var reactTables = require('@zendeskgarden/react-tables');
-var reactSpring = require('react-spring');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -70,26 +69,31 @@ var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
 var CharacterCount__default = /*#__PURE__*/_interopDefaultLegacy(CharacterCount);
 var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 
-const palette = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.palette), { black: "#000", white: "#fff", product: {
-        support: "#00a656",
-        message: "#37b8af",
-        explore: "#30aabc",
-        gather: "#f6c8be",
-        guide: "#ff6224",
-        connect: "#ff6224",
-        chat: "#f79a3e",
-        talk: "#efc93d",
-        sell: "#c38f00",
-    }, grey: {
-        "100": "#F6F6F8",
+/*
+ * Design principles https://garden.zendesk.com/design/color (accessed 28 apr 2023)
+ * Full DEFAULT_THEME.palette copied here to force the type, reference https://garden.zendesk.com/components/palette (accessed 28 apr 2023)
+ */
+const palette = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.palette), { "black": "#000000", "white": "#FFFFFF", "product": {
+        "support": "#00a656",
+        "message": "#37b8af",
+        "explore": "#30aabc",
+        "gather": "#f6c8be",
+        "guide": "#ff6224",
+        "connect": "#ff6224",
+        "chat": "#f79a3e",
+        "talk": "#efc93d",
+        "sell": "#c38f00"
+    }, "grey": {
+        "100": "#f8f9f9",
         "200": "#e9ebed",
         "300": "#d8dcde",
         "400": "#c2c8cc",
         "500": "#87929d",
         "600": "#68737d",
         "700": "#49545c",
-        "800": "#2f3941",
-    }, blue: {
+        "800": "#2f3941"
+    }, "blue": {
+        "50": "#F0F3F5",
         "100": "#E6EBEE",
         "200": "#B0C2CB",
         "300": "#8AA4B2",
@@ -98,116 +102,118 @@ const palette = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.palet
         "600": "#003A57",
         "700": "#00293E",
         "800": "#001825",
-    }, red: {
-        "100": "#F9E2E1",
-        "200": "#F3C5C4",
-        "300": "#EA9B99",
-        "400": "#E2716F",
-        "500": "#DB4D50",
-        "600": "#D53032",
-        "700": "#A92329",
-        "800": "#771823",
-    }, yellow: {
-        "100": "#FEF6E7",
-        "200": "#FDEDCE",
-        "300": "#FBE1AC",
-        "400": "#F9CF7B",
-        "500": "#F7BF50",
-        "600": "#F4AC1A",
-        "700": "#D1820A",
-        "800": "#A15908",
-    }, green: {
-        "100": "#D7F9E5",
-        "200": "#ABF2C7",
-        "300": "#7FEBAA",
-        "400": "#53E48D",
-        "500": "#27DD70",
-        "600": "#1CB559",
-        "700": "#158944",
-        "800": "#0E5D2E",
-    }, kale: {
-        "100": "#f1f9f3",
-        "200": "#d3ecdb",
-        "300": "#9fd7b1",
-        "400": "#70c38a",
-        "500": "#66b17e",
-        "600": "#508a62",
-        "700": "#3e6b4c",
-        "800": "#2f523a",
-    }, fuschia: {
+    }, "red": {
+        "100": "#FBEAEB",
+        "200": "#F2C1C3",
+        "300": "#E9979B",
+        "400": "#E06D73",
+        "500": "#D7444B",
+        "600": "#D22F37",
+        "700": "#BD2A32",
+        "800": "#A8262C",
+        "900": "#932127",
+    }, "yellow": {
+        "100": "#FFF7EE",
+        "200": "#FFE7C9",
+        "300": "#FFD7A4",
+        "400": "#FFD7A4",
+        "500": "#FFB65A",
+        "600": "#C57F12",
+        "700": "#955F1B",
+        "800": "#845418",
+        "900": "#734A15",
+    }, "green": {
+        "50": "#B3E8D9",
+        "100": "#80D9C0",
+        "200": "#66D1B3",
+        "300": "#4DC9A6",
+        "400": "#00B280",
+        "500": "#00A073",
+        "600": "#007D5A",
+        "700": "#006B4D",
+        "800": "#005940",
+    }, "azure": {
+        "100": "#E3F2F9",
+        "200": "#BBDDF2",
+        "300": "#92C9EB",
+        "400": "#6AB4E2",
+        "500": "#4CA4DE",
+        "600": "#1466A9",
+        "700": "#125C98",
+        "800": "#105287",
+        "900": "#0E4776",
+    }, "kale": {
+        "100": "#D4FFF7",
+        "200": "#ABEBDF",
+        "300": "#6FD1BE",
+        "600": "#2B8473",
+        "700": "#206E6A",
+        "800": "#0C4D5E",
+    }, "pink": {
+        "600": "#d81e57",
+        "700": "#c31a53",
+        "800": "#ae1550",
+        "900": "#8A0C49",
+    }, "crimson": {
+        "200": "#e69b96",
+        "300": "#d9776f",
+        "400": "#e05b4b",
+        "500": "#e34f32",
+    }, "fuschia": {
         "400": "#d653c2",
         "600": "#a81897",
-        M400: "#cf62a8",
-        M600: "#a8458c",
-    }, pink: {
-        "400": "#ec4d63",
-        "600": "#d42054",
-        M400: "#d57287",
-        M600: "#b23a5d",
-    }, crimson: {
-        "400": "#e34f32",
-        "600": "#c72a1c",
-        M400: "#cc6c5b",
-        M600: "#b24a3c",
-    }, orange: {
+        "M400": "#cf62a8",
+        "M600": "#a8458c",
+    }, "lemon": {
+        "400": "#ddda49",
+        "500": "#d8d427",
+        "600": "#d7c21f",
+        "700": "#D6AD13",
+    }, "teal": {
+        "400": "#28adaa",
+        "500": "#029e99",
+        "600": "#02908b",
+        "700": "#02807a",
+    }, "royal": {
+        "600": "#3c3695",
+        "700": "#342c8a",
+        "800": "#2d227e",
+        "900": "#1F0F69",
+    }, "purple": {
+        "200": "#b5a5fe",
+        "300": "#957fff",
+        "400": "#7761fe",
+        "500": "#5847f6",
+    }, "lime": {
+        "400": '#43b324',
+        "600": '#2e8200',
+        "M400": '#519e2d',
+        "M600": '#47782c'
+    }, "mint": {
+        "400": '#00a656',
+        "600": '#058541',
+        "M400": '#299c66',
+        "M600": '#2e8057'
+    }, "orange": {
         "400": "#de701d",
         "600": "#bf5000",
-        M400: "#d4772c",
-        M600: "#b35827",
-    }, lemon: {
-        "400": "#ffd424",
-        "600": "#ffbb10",
-        M400: "#e7a500",
-        M600: "#c38f00",
-    }, lime: {
-        "400": "#43b324",
-        "600": "#2e8200",
-        M400: "#519e2d",
-        M600: "#47782c",
-    }, mint: {
-        "400": "#00a656",
-        "600": "#058541",
-        M400: "#299c66",
-        M600: "#2e8057",
-    }, teal: {
-        "400": "#02a191",
-        "600": "#028079",
-        M400: "#2d9e8f",
-        M600: "#3c7873",
-    }, azure: {
-        "400": "#3091ec",
-        "600": "#1371d6",
-        M400: "#5f8dcf",
-        M600: "#3a70b2",
-    }, royal: {
-        "400": "#5d7df5",
-        "600": "#3353e2",
-        M400: "#7986d8",
-        M600: "#4b61c3",
-    }, purple: {
-        "400": "#b552e2",
-        "600": "#6a27b8",
-        M400: "#b072cc",
-        M600: "#9358b0",
-    }, water: {
-        100: "#D4FFF7",
-        200: "#ABEBDF",
-        300: "#6FD1BE",
-        600: "#2B8473",
-        700: "#206E6A",
-        800: "#0C4D5E",
+        "M400": "#d4772c",
+        "M600": "#b35827",
     } });
 
+const getColor = (hue, shade, theme$1 = theme, transparency) => {
+    return reactTheming.getColor(hue, shade, theme$1, transparency);
+};
 const hex2rgba = (hex, alpha = 1) => {
     const rgb = hex.match(/\w\w/g);
     const [r, g, b] = rgb ? rgb.map((x) => parseInt(x, 16)) : [0, 0, 0];
     return `rgba(${r},${g},${b},${alpha})`;
 };
-const boxShadow = (theme) => {
-    const { space, shadows, palette } = theme;
+const boxShadow = (theme$1) => {
+    const { space, shadows, palette } = theme$1;
     const offsetY = `${space.base}px`;
     const blurRadius = `${space.base * 2}px`;
-    const shadowColor = reactTheming.getColor(palette.grey, 800, theme, 0.15);
+    const shadowColor = getColor(palette.grey, 800, theme, 0.15);
     return shadows.lg(offsetY, blurRadius, shadowColor);
 };
 const isMac = () => {
@@ -230,7 +236,6 @@ const sidebarNavItemHidden = styled.css `
 `;
 
 const gradients = {
-    horizontal: `linear-gradient(90.81deg, ${hex2rgba(palette.blue[600])} 11.98%, ${hex2rgba(palette.kale[400])} 100%);`,
     dark: `linear-gradient(90.81deg, ${hex2rgba(palette.blue[800])} 0%, ${hex2rgba(palette.blue[600])} 100%);`,
 };
 
@@ -273,28 +278,67 @@ function __awaiter(thisArg, _arguments, P, generator) {
 
 const fontWeights = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
 
-const colors = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] });
+const colors = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.colors), { base: "light", background: "#fff", foreground: "#2f3941", primaryHue: "blue", dangerHue: "red", warningHue: "yellow", successHue: "green", neutralHue: "grey", infoHue: "azure", chromeHue: "blue", accentHue: "kale" });
 
-var _a, _b, _c, _d, _e, _f, _g$8, _h;
-const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$8 = reactTheming.DEFAULT_THEME.components) === null || _g$8 === void 0 ? void 0 : _g$8.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), "notifications.notification": ({ type, isPrimary, }) => {
+const CARD_COMPONENT_ID = "cards.card";
+const cardCmponentStyle = {
+    [CARD_COMPONENT_ID]: {
+        border: `1px solid ${palette.grey["200"]};`,
+    }
+};
+const UgCard = styled__default["default"](reactNotifications.Well) `
+  border-radius: ${({ theme }) => theme.borderRadii.lg};
+  padding: ${({ theme }) => theme.space.xxl};
+  cursor: pointer;
+
+  ${({ isFloating, theme }) => !isFloating &&
+    `
+      &:hover {
+         box-shadow: ${theme.shadows.boxShadow(theme)};
+      }`}
+  ${(props) => reactTheming.retrieveComponentStyles(CARD_COMPONENT_ID, props)};
+`;
+/**
+ * A Card is a container that groups related content.
+ * <hr>
+ * Used for this:
+    - To group related content
+ */
+const Card = (props) => jsxRuntime.jsx(UgCard, Object.assign({}, props));
+const UgContainerCard = styled__default["default"](reactNotifications.Well) `
+  border-radius: ${({ theme }) => theme.borderRadii.xl};
+  padding: ${({ theme }) => theme.space.xxl};
+  cursor: default;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+    padding: ${({ theme }) => `${theme.space.xl} ${theme.space.md}`};
+  }
+  ${(props) => reactTheming.retrieveComponentStyles(CARD_COMPONENT_ID, props)};
+`;
+const ContainerCard = (props) => jsxRuntime.jsx(UgContainerCard, Object.assign({}, props));
+
+var _a, _b, _c, _d, _e, _f, _g$3, _h;
+const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "border.neutral": () => `border: 1px solid ${getColor(colors.neutralHue, 300)}`, "background.neutral": () => `background-color: ${palette.white}`, "background.primary.accent": () => `background-color: ${getColor(colors.accentHue, 700)}`, "background.primary.accent.hover": () => `background-color: ${getColor(colors.accentHue, 800)}`, "background.primary.accent.active": () => `background-color: ${palette.blue[100]}`, "text.neutral": () => `color: ${getColor(colors.neutralHue, 700)}`, "text.neutral.bold": () => `color: ${getColor(colors.neutralHue, 800)}`, "text.neutral.light": () => `color: ${getColor(colors.neutralHue, 500)}`, "colors.danger": () => `${getColor(colors.accentHue, 700)}`, "colors.danger.hover": () => `${getColor(colors.accentHue, 800)}`, "colors.danger.active": () => `${getColor(colors.accentHue, 900)}`, "text.color.accent.hover": () => `
+      color: ${getColor(colors.accentHue, 800)}
+  `, "notifications.notification": ({ type, isPrimary, }) => {
         const svgCss = {
             marginTop: "-1px",
         };
         return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (type === "success" &&
             isPrimary && {
-            backgroundColor: palette.green[700],
+            backgroundColor: getColor(colors.successHue, 700),
             svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), (type === "warning" &&
             isPrimary && {
-            backgroundColor: palette.yellow[700],
+            backgroundColor: getColor(colors.warningHue, 700),
             svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), (type === "error" &&
             isPrimary && {
-            backgroundColor: palette.red[700],
+            backgroundColor: getColor(colors.dangerHue, 700),
             svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), (type === "info" &&
             isPrimary && {
-            backgroundColor: palette.blue[700],
+            backgroundColor: getColor(colors.infoHue, 700),
             svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), !isPrimary && {
             svg: svgCss,
@@ -353,15 +397,9 @@ const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.co
         thumbSize: "60px",
     }, "tabs.tab": ({ isSelected }) => {
         return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
-    }, "forms.input": ({ isFocused }) => {
-        return isFocused
-            ? {
-                boxShadow: `0 0 0 3px ${palette.kale[200]}}`,
-            }
-            : undefined;
     }, "dropdowns.item": (_a) => {
         var { addable, checked } = _a; __rest(_a, ["addable", "checked"]);
-        return Object.assign(Object.assign(Object.assign({}, (addable
+        return Object.assign(Object.assign({}, (addable
             ? {
                 color: colors.primaryHue,
                 cursor: "pointer",
@@ -370,46 +408,104 @@ const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.co
             ? {
                 fontWeight: fontWeights.semibold,
             }
-            : {})), { "&:hover": {
-                backgroundColor: palette.kale[100],
-            } });
-    }, "buttons.icon_button": ({ isDanger, isBasic, isPrimary, isHovered, isNeutral, isBright, disabled, }) => {
-        if (isNeutral || isPrimary || isDanger)
-            return {};
-        return Object.assign(Object.assign(Object.assign({}, (isBasic && {
-            backgroundColor: palette.white,
+            : {}));
+    }, "buttons.icon_button": ({ disabled, isBright, isAccent, isPrimary, isBasic, }) => {
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isAccent && !isPrimary && !isBasic && {
+            borderColor: getColor(colors.accentHue, 700),
+            color: getColor(colors.accentHue, 700),
             "&:hover": {
-                backgroundColor: palette.kale[200],
+                borderColor: getColor(colors.accentHue, 800),
+                color: getColor(colors.accentHue, 800),
+                backgroundColor: palette.blue[50],
+            },
+            "&:active": {
+                borderColor: getColor(colors.accentHue, 800),
+                color: getColor(colors.accentHue, 800),
+                backgroundColor: palette.blue[100],
+            },
+        })), (isAccent && isBasic && {
+            color: getColor(colors.accentHue, 700),
+            "&:hover": {
+                backgroundColor: palette.blue[50],
+                color: getColor(colors.accentHue, 800),
+            },
+            "&:active": {
+                backgroundColor: palette.blue[100],
+                color: getColor(colors.accentHue, 800),
+            },
+        })), (isAccent && isPrimary && {
+            backgroundColor: getColor(colors.accentHue, 600),
+            color: "white",
+            "&:hover": {
+                backgroundColor: getColor(colors.accentHue, 700),
+                color: "white",
+            },
+            "&:active": {
+                backgroundColor: getColor(colors.accentHue, 800),
+                color: "white",
             },
         })), (isBright && {
             backgroundColor: "transparent",
             color: "white",
+            border: "none",
             "&:hover": {
                 backgroundColor: palette.grey[500],
-                color: palette.kale[100],
             },
             "&:active": {
                 backgroundColor: palette.grey[600],
-                color: palette.kale[200],
             },
         })), (disabled && { pointerEvents: "none" }));
-    }, "buttons.button": ({ isDanger, isPrimary, isHovered, isNeutral, isBright, }) => {
-        if (isBright) {
-            return {
-                backgroundColor: "transparent",
-                color: "white",
-                border: "none",
-                "&:hover": {
-                    backgroundColor: palette.grey[500],
-                    color: palette.kale[100],
-                },
-                "&:active": {
-                    backgroundColor: palette.grey[600],
-                    color: palette.kale[200],
-                },
-            };
-        }
-        return {};
+    }, "buttons.button": ({ isAccent, isBright, isPrimary, isBasic, isLink, }) => {
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (isAccent && !isPrimary && !isBasic && !isLink && {
+            borderColor: getColor(colors.accentHue, 700),
+            color: getColor(colors.accentHue, 700),
+            "&:hover": {
+                borderColor: getColor(colors.accentHue, 800),
+                color: getColor(colors.accentHue, 800),
+                backgroundColor: palette.blue[50],
+            },
+            "&:active": {
+                borderColor: getColor(colors.accentHue, 800),
+                color: getColor(colors.accentHue, 800),
+                backgroundColor: palette.blue[100],
+            },
+        })), (isAccent && isPrimary && {
+            backgroundColor: getColor(colors.accentHue, 600),
+            "&:hover": {
+                backgroundColor: getColor(colors.accentHue, 700),
+            },
+            "&:active": {
+                backgroundColor: getColor(colors.accentHue, 800),
+            },
+        })), (isAccent && isBasic && {
+            color: getColor(colors.accentHue, 700),
+            "&:hover": {
+                backgroundColor: palette.blue[50],
+                color: getColor(colors.accentHue, 800),
+            },
+            "&:active": {
+                backgroundColor: palette.blue[100],
+                color: getColor(colors.accentHue, 800),
+            },
+        })), (isAccent && isLink && {
+            color: getColor(colors.accentHue, 700),
+            "&:hover": {
+                color: getColor(colors.accentHue, 800),
+            },
+            "&:active": {
+                color: getColor(colors.accentHue, 800),
+            },
+        })), (isBright && {
+            backgroundColor: "transparent",
+            color: "white",
+            border: "none",
+            "&:hover": {
+                backgroundColor: palette.grey[500],
+            },
+            "&:active": {
+                backgroundColor: palette.grey[600],
+            },
+        }));
     } });
 
 const theme = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME), { breakpoints: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors, palette: palette, fonts: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }), levels: {
@@ -481,6 +577,9 @@ const UgAlert = styled__default["default"](reactNotifications.Alert) `
    color: ${({ theme }) => theme.palette.grey[700]};
    border-width: 2px;
    font-size: ${({ theme }) => theme.fontSizes.sm};
+   ${props => reactTheming.retrieveComponentStyles('borders.neutral', props)};
+   ${props => reactTheming.retrieveComponentStyles('backgrounds.primary.accent', props)};
+   ${props => reactTheming.retrieveComponentStyles('backgrounds.primary.accent.hover', props)};
 `;
 const UgAlertTitle = styled__default["default"](reactNotifications.Title) `
    font-size: ${({ theme }) => theme.fontSizes.md};
@@ -571,16 +670,6 @@ const Breadcrumb = (_a) => {
  */
 const Anchor = React.forwardRef((props, ref) => jsxRuntime.jsx(reactButtons.Anchor, Object.assign({ ref: ref }, props)));
 
-let customTheme = Object.assign({}, theme);
-// Define theme override
-const getThemeStyle = (props) => {
-    const { themeColor } = props;
-    if (themeColor) {
-        customTheme = Object.assign(Object.assign({}, theme), { colors: Object.assign(Object.assign({}, theme.colors), { primaryHue: themeColor }) });
-        return customTheme;
-    }
-    return theme;
-};
 const UgButton = styled__default["default"](reactButtons.Button) ``;
 /**
  * Buttons let users take action quickly.
@@ -591,11 +680,7 @@ const UgButton = styled__default["default"](reactButtons.Button) ``;
    - To draw attention to relevant actions in a user's workflow
  */
 const ButtonComponent = React.forwardRef((props, ref) => {
-    if (props.themeColor) {
-        const currentTheme = getThemeStyle(props);
-        return jsxRuntime.jsx(UgButton, Object.assign({}, props, { ref: ref, theme: currentTheme }));
-    }
-    return jsxRuntime.jsx(UgButton, Object.assign({ ref: ref }, props));
+    return jsxRuntime.jsx(UgButton, Object.assign({ ref: ref, isPill: true }, props));
 });
 const Button = ButtonComponent;
 Button.StartIcon = UgButton.StartIcon;
@@ -629,37 +714,6 @@ Used for this:
 **/
 const SplitButton = React.forwardRef((props, ref) => jsxRuntime.jsx(reactButtons.SplitButton, Object.assign({ ref: ref }, props)));
 
-const UgCard = styled__default["default"](reactNotifications.Well) `
-  border-radius: ${({ theme }) => theme.borderRadii.lg};
-  padding: ${({ theme }) => theme.space.xxl};
-  border: 1px solid ${({ theme }) => theme.palette.grey["200"]};
-  cursor: pointer;
-
-  ${({ isFloating, theme }) => !isFloating &&
-    `
-      &:hover {
-         box-shadow: ${theme.shadows.boxShadow(theme)};
-      }`}
-`;
-/**
- * A Card is a container that groups related content.
- * <hr>
- * Used for this:
-    - To group related content
- */
-const Card = (props) => jsxRuntime.jsx(UgCard, Object.assign({}, props));
-const UgContainerCard = styled__default["default"](reactNotifications.Well) `
-  border-radius: ${({ theme }) => theme.borderRadii.xl};
-  padding: ${({ theme }) => theme.space.xxl};
-  border: 1px solid ${({ theme }) => theme.palette.grey["200"]};
-  cursor: default;
-
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    padding: ${({ theme }) => `${theme.space.xl} ${theme.space.md}`};
-  }
-`;
-const ContainerCard = (props) => jsxRuntime.jsx(UgContainerCard, Object.assign({}, props));
-
 /**
  * Use Span to style and format inline text elements.
  * <hr>
@@ -731,270 +785,191 @@ Tag.Avatar = StyledAvatar;
 Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
-var _path$A;
+var _path$D;
 function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgUgSquare = function SvgUgSquare(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19Z",
-    fill: "#E80C7A"
+    fill: "none"
+  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#E80C7A",
+    d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Z"
   })));
 };
 
-var _path$z;
+var _path$C;
 function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgUgCircle = function SvgUgCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
-    fill: "#FFCD1A"
+    fill: "none"
+  }, props), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFCD1A",
+    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z"
   })));
 };
 
-var _path$y;
+var _path$B;
 function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgUgTriangle = function SvgUgTriangle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M11.9993 7.32625L18.3893 17.5563H5.60929L11.9993 7.32625ZM11.1493 4.91625L2.94929 18.0262C2.53929 18.6962 3.01929 19.5563 3.79929 19.5563H20.1993C20.9893 19.5563 21.4593 18.6962 21.0493 18.0262L12.8493 4.91625C12.4593 4.28625 11.5393 4.28625 11.1493 4.91625Z",
-    fill: "#7B0DFF"
+    fill: "none"
+  }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#7B0DFF",
+    d: "m12 7.326 6.39 10.23H5.61L12 7.326Zm-.85-2.41-8.2 13.11c-.41.67.07 1.53.85 1.53h16.4a1 1 0 0 0 .85-1.53l-8.2-13.11a1 1 0 0 0-1.7 0Z"
   })));
 };
 
-var _rect$4, _path$x, _path2$b, _path3$4;
+var _rect$4, _path$A, _path2$e, _path3$5;
 function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _rect$4 || (_rect$4 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
-    rx: 12,
-    fill: "#F6F6F8"
-  })), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
-    fill: "#50BF95"
-  })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3 12C3 7.02944 7.02944 3 12 3C13.3602 3 14.6521 3.3023 15.8102 3.84415C16.2195 4.03565 16.396 4.52268 16.2045 4.93196C16.013 5.34125 15.526 5.5178 15.1167 5.3263C14.1712 4.88391 13.1156 4.63636 12 4.63636C7.93318 4.63636 4.63636 7.93318 4.63636 12C4.63636 16.0668 7.93318 19.3636 12 19.3636C16.0668 19.3636 19.3636 16.0668 19.3636 12C19.3636 11.3631 19.283 10.7462 19.1317 10.1585C19.0191 9.72084 19.2826 9.27479 19.7202 9.16218C20.1578 9.04957 20.6038 9.31303 20.7165 9.75064C20.9017 10.4705 21 11.2243 21 12C21 16.9705 16.9705 21 12 21C7.02944 21 3 16.9705 3 12Z",
-    fill: "#50BF95"
-  })), _path3$4 || (_path3$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
-    fill: "#007345"
+    fill: "#F6F6F8",
+    rx: 12
+  })), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#50BF95",
+    d: "M20.695 5.739a.818.818 0 0 0-1.157-1.157L11.88 12.24l-1.795-2.28a.818.818 0 0 0-1.286 1.012l2.365 3.004a.818.818 0 0 0 1.222.073l8.31-8.31Z"
+  })), _path2$e || (_path2$e = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#50BF95",
+    d: "M3 12a9 9 0 0 1 12.81-8.156.818.818 0 1 1-.693 1.482 7.364 7.364 0 1 0 4.015 4.832.818.818 0 0 1 1.585-.407A9 9 0 1 1 3 12Z"
+  })), _path3$5 || (_path3$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#007345",
+    d: "M20.695 5.739a.818.818 0 0 0-1.157-1.157L11.88 12.24l-1.795-2.28a.818.818 0 0 0-1.286 1.012l2.365 3.004a.818.818 0 0 0 1.222.073l8.31-8.31Z"
   })));
 };
 
-var _rect$3, _path$w, _path2$a;
+var _rect$3, _path$z, _path2$d;
 function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgCampaignLocked = function SvgCampaignLocked(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _rect$3 || (_rect$3 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
-    rx: 12,
-    fill: "#F6F6F8"
-  })), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#F6F6F8",
+    rx: 12
+  })), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#D1820A",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.55 19.0875C14.25 19.7875 15.1063 20.1375 16.1188 20.1375C17.1313 20.1375 17.9875 19.7875 18.6875 19.0875C19.3875 18.3875 19.7375 17.5312 19.7375 16.5187C19.7375 15.5062 19.3875 14.65 18.6875 13.95C17.9875 13.25 17.1313 12.9 16.1188 12.9C15.1063 12.9 14.25 13.25 13.55 13.95C12.85 14.65 12.5 15.5062 12.5 16.5187C12.5 17.5312 12.85 18.3875 13.55 19.0875ZM17.5062 18.2812C17.4187 18.2812 17.3375 18.25 17.2625 18.1875L15.7438 16.7812C15.6813 16.6687 15.65 16.6 15.65 16.575V14.55C15.65 14.4375 15.6875 14.3437 15.7625 14.2687C15.8375 14.1937 15.9313 14.1562 16.0438 14.1562C16.1563 14.1562 16.25 14.1937 16.325 14.2687C16.4 14.3437 16.4375 14.4375 16.4375 14.55V16.4813L17.7313 17.6625C17.8063 17.725 17.8469 17.8062 17.8531 17.9062C17.8594 18.0063 17.825 18.0938 17.75 18.1688C17.675 18.2438 17.5937 18.2812 17.5062 18.2812Z",
-    fill: "#D1820A"
-  })), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M13.55 19.087c.7.7 1.556 1.05 2.569 1.05 1.012 0 1.869-.35 2.569-1.05.7-.7 1.05-1.556 1.05-2.568 0-1.013-.35-1.869-1.05-2.569-.7-.7-1.557-1.05-2.57-1.05-1.012 0-1.868.35-2.568 1.05-.7.7-1.05 1.556-1.05 2.569 0 1.012.35 1.869 1.05 2.569Zm3.956-.806a.373.373 0 0 1-.244-.093l-1.518-1.407c-.063-.112-.094-.181-.094-.206V14.55a.382.382 0 0 1 .394-.394.381.381 0 0 1 .393.394v1.931l1.294 1.181a.33.33 0 0 1 .122.244.328.328 0 0 1-.103.263.34.34 0 0 1-.244.112Z",
+    clipRule: "evenodd"
+  })), _path2$d || (_path2$d = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#F4AC1A",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6.125 19.5C5.8125 19.5 5.54688 19.3906 5.32812 19.1719C5.10938 18.9531 5 18.6875 5 18.375V10.2375C5 9.925 5.10938 9.65937 5.32812 9.44062C5.54688 9.22187 5.8125 9.1125 6.125 9.1125H7.4375V7.36875C7.4375 6.36875 7.78437 5.51562 8.47812 4.80937C9.17188 4.10312 10.0125 3.75 11 3.75C11.9875 3.75 12.8281 4.10312 13.5219 4.80937C14.2156 5.51562 14.5625 6.36875 14.5625 7.36875V9.1125H15.875C16.1875 9.1125 16.4531 9.22187 16.6719 9.44062C16.8906 9.65937 17 9.925 17 10.2375V11.8687C16.8125 11.8187 16.625 11.7875 16.4375 11.775C16.25 11.7625 16.0625 11.7625 15.875 11.775C14.6 11.825 13.5312 12.3094 12.6688 13.2281C11.8063 14.1469 11.375 15.2437 11.375 16.5187C11.375 17.0687 11.4688 17.5969 11.6562 18.1031C11.8438 18.6094 12.1063 19.075 12.4438 19.5H6.125ZM13.4375 9.1125H8.5625V7.36875C8.5625 6.68125 8.8 6.09375 9.275 5.60625C9.75 5.11875 10.325 4.875 11 4.875C11.675 4.875 12.25 5.11875 12.725 5.60625C13.2 6.09375 13.4375 6.68125 13.4375 7.36875V9.1125Z",
-    fill: "#F4AC1A"
+    d: "M6.125 19.5c-.313 0-.578-.11-.797-.328A1.085 1.085 0 0 1 5 18.375v-8.137c0-.313.11-.579.328-.797.219-.22.484-.329.797-.329h1.313V7.37c0-1 .346-1.853 1.04-2.56A3.404 3.404 0 0 1 11 3.75c.988 0 1.828.353 2.522 1.06.694.706 1.04 1.559 1.04 2.559v1.744h1.313c.313 0 .578.109.797.328.219.218.328.484.328.796v1.632a2.937 2.937 0 0 0-.563-.094 4.223 4.223 0 0 0-.562 0c-1.275.05-2.344.534-3.206 1.453-.863.919-1.294 2.016-1.294 3.29 0 .55.094 1.079.281 1.585.188.506.45.972.788 1.397H6.125Zm7.313-10.387H8.561V7.369c0-.688.238-1.275.713-1.763A2.32 2.32 0 0 1 11 4.875c.675 0 1.25.244 1.725.731.475.488.713 1.075.713 1.763v1.744Z",
+    clipRule: "evenodd"
   })));
 };
 
-var _rect$2, _path$v, _path2$9;
+var _rect$2, _path$y, _path2$c;
 function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _rect$2 || (_rect$2 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
-    rx: 12,
-    fill: "#F6F6F8"
-  })), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M11.2266 13.0313H14.997M11.2266 9.26075V13.0313V9.26075ZM11.2266 13.0313L20.121 5.03906L11.2266 13.0313Z",
+    fill: "#F6F6F8",
+    rx: 12
+  })), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "#024780",
-    strokeWidth: 1.5,
     strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M15.4918 4.52347C14.4312 4.02725 13.2477 3.75003 11.9995 3.75003C7.44316 3.75003 3.74951 7.44368 3.74951 12C3.74951 16.5564 7.44316 20.25 11.9995 20.25C16.5558 20.25 20.2495 16.5564 20.2495 12C20.2495 11.2878 20.1593 10.5968 19.9896 9.93753",
-    stroke: "#53AFFA",
+    strokeLinejoin: "round",
     strokeWidth: 1.5,
+    d: "M11.227 13.031h3.77m-3.77-3.77v3.77-3.77Zm0 3.77L20.12 5.04l-8.894 7.992Z"
+  })), _path2$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#53AFFA",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "M15.492 4.523a8.25 8.25 0 1 0 4.498 5.414"
   })));
 };
 
-var _rect$1, _path$u, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
+var _rect$1, _path$x, _path2$b, _path3$4;
 function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _rect$1 || (_rect$1 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
-    rx: 12,
-    fill: "#F6F6F8"
-  })), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M13.059 16.7647C13.059 16.1799 12.585 15.7059 12.0002 15.7059C11.4154 15.7059 10.9414 16.1799 10.9414 16.7647V19.9412C10.9414 20.5259 11.4154 21 12.0002 21C12.585 21 13.059 20.5259 13.059 19.9412V16.7647Z",
-    fill: "#D1820A"
-  })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M16.1149 14.6183C15.7014 14.2048 15.031 14.2048 14.6175 14.6183C14.204 15.0318 14.204 15.7022 14.6175 16.1157L16.8649 18.3631C17.2783 18.7766 17.9488 18.7766 18.3623 18.3631C18.7757 17.9496 18.7757 17.2792 18.3623 16.8657L16.1149 14.6183Z",
-    fill: "#D1820A"
-  })), _path3$3 || (_path3$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M16.7649 10.9412C16.1802 10.9412 15.7061 11.4152 15.7061 12C15.7061 12.5848 16.1802 13.0588 16.7649 13.0588H19.9414C20.5262 13.0588 21.0002 12.5848 21.0002 12C21.0002 11.4152 20.5262 10.9412 19.9414 10.9412H16.7649Z",
-    fill: "#D1820A"
-  })), _path4$1 || (_path4$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M9.38105 14.6183C9.79455 15.0318 9.79455 15.7022 9.38105 16.1157L7.1337 18.3631C6.7202 18.7766 6.04979 18.7766 5.63629 18.3631C5.2228 17.9496 5.2228 17.2792 5.63629 16.8657L7.88365 14.6183C8.29714 14.2048 8.96756 14.2048 9.38105 14.6183Z",
-    fill: "#D1820A"
-  })), _path5$1 || (_path5$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M16.1149 14.6183C15.7014 14.2048 15.031 14.2048 14.6175 14.6183C14.204 15.0318 14.204 15.7022 14.6175 16.1157L16.8649 18.3631C17.2783 18.7766 17.9488 18.7766 18.3623 18.3631C18.7757 17.9496 18.7757 17.2792 18.3623 16.8657L16.1149 14.6183Z",
-    fill: "#FFD7A4"
-  })), _path6$1 || (_path6$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M16.7649 10.9412C16.1802 10.9412 15.7061 11.4152 15.7061 12C15.7061 12.5848 16.1802 13.0588 16.7649 13.0588H19.9414C20.5262 13.0588 21.0002 12.5848 21.0002 12C21.0002 11.4152 20.5262 10.9412 19.9414 10.9412H16.7649Z",
-    fill: "#FFD7A4"
-  })), _path7$1 || (_path7$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 3C12.5848 3 13.0588 3.47405 13.0588 4.05882V7.23529C13.0588 7.82007 12.5848 8.29412 12 8.29412C11.4152 8.29412 10.9412 7.82007 10.9412 7.23529V4.05882C10.9412 3.47405 11.4152 3 12 3Z",
-    fill: "#FFB65A"
-  })), _path8$1 || (_path8$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5.63607 5.63685C6.04957 5.22335 6.71998 5.22335 7.13348 5.63685L9.38083 7.8842C9.79433 8.2977 9.79433 8.96811 9.38083 9.3816C8.96734 9.7951 8.29693 9.7951 7.88343 9.38161L5.63608 7.13425C5.22258 6.72076 5.22258 6.05035 5.63607 5.63685Z",
-    fill: "#FFB65A"
-  })), _path9$1 || (_path9$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3 12C3 11.4152 3.47405 10.9412 4.05882 10.9412H7.23529C7.82007 10.9412 8.29412 11.4152 8.29412 12C8.29412 12.5848 7.82007 13.0588 7.23529 13.0588H4.05882C3.47405 13.0588 3 12.5848 3 12Z",
-    fill: "#FFB65A"
-  })), _path10$1 || (_path10$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M18.362 7.13425C18.7755 6.72076 18.7755 6.05035 18.362 5.63685C17.9485 5.22335 17.2781 5.22335 16.8646 5.63685L14.6173 7.8842C14.2038 8.2977 14.2038 8.96811 14.6173 9.3816C15.0308 9.7951 15.7012 9.7951 16.1147 9.38161L18.362 7.13425Z",
-    fill: "#FFB65A"
+    fill: "#F6F6F8",
+    rx: 12
+  })), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#D1820A",
+    d: "M13.059 16.765a1.059 1.059 0 1 0-2.118 0v3.176a1.059 1.059 0 0 0 2.118 0v-3.176ZM16.115 14.618a1.059 1.059 0 1 0-1.497 1.498l2.247 2.247a1.059 1.059 0 1 0 1.497-1.497l-2.247-2.248ZM16.765 10.941a1.059 1.059 0 0 0 0 2.118h3.176a1.059 1.059 0 1 0 0-2.118h-3.176ZM9.381 14.618a1.059 1.059 0 0 1 0 1.498l-2.247 2.247a1.059 1.059 0 0 1-1.498-1.497l2.248-2.248a1.059 1.059 0 0 1 1.497 0Z"
+  })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFD7A4",
+    d: "M16.115 14.618a1.059 1.059 0 1 0-1.497 1.498l2.247 2.247a1.059 1.059 0 1 0 1.497-1.497l-2.247-2.248ZM16.765 10.941a1.059 1.059 0 0 0 0 2.118h3.176a1.059 1.059 0 1 0 0-2.118h-3.176Z"
+  })), _path3$4 || (_path3$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FFB65A",
+    d: "M12 3c.585 0 1.059.474 1.059 1.059v3.176a1.059 1.059 0 1 1-2.118 0V4.06C10.941 3.474 11.415 3 12 3ZM5.636 5.637a1.059 1.059 0 0 1 1.497 0l2.248 2.247a1.059 1.059 0 1 1-1.498 1.498L5.636 7.134a1.059 1.059 0 0 1 0-1.497ZM3 12c0-.585.474-1.059 1.059-1.059h3.176a1.059 1.059 0 1 1 0 2.118H4.06A1.059 1.059 0 0 1 3 12ZM18.362 7.134a1.059 1.059 0 1 0-1.497-1.497l-2.248 2.247a1.059 1.059 0 1 0 1.498 1.498l2.247-2.248Z"
   })));
 };
 
-var _g$7, _path$t, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+var _path$w, _path2$a, _path3$3;
 function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none"
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#50BF95",
+    d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z",
     opacity: 0.3
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    opacity: 0.3,
-    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: "#50BF95"
-  }))), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12.487 3.19652C8.68003 3.19652 5.59895 6.27761 5.59895 10.0846C5.59895 10.2597 5.59895 10.4348 5.62438 10.5855C5.29857 11.1863 4.82307 12.013 4.24678 12.514C3.82117 12.8897 3.92096 13.2908 3.97085 13.4405C4.09609 13.7663 4.44635 14.0413 5.02265 14.2418C5.22322 14.3172 5.44825 14.3671 5.64883 14.417L5.67427 16.8464C5.67427 17.7984 6.47559 18.6251 7.45304 18.6251L8.93044 18.1496L9.08111 19.0263C9.18091 19.6026 9.68185 20.0282 10.2836 20.0282C10.3589 20.0282 10.4343 20.0282 10.5086 20.0028L15.1424 19.177C15.8185 19.0517 16.2441 18.4256 16.1443 17.7495L15.8185 16.1214C17.9974 14.9189 19.375 12.5892 19.375 10.0845C19.375 6.30279 16.2696 3.19641 12.4869 3.19641L12.487 3.19652Z",
+  })), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#2B8473",
-    stroke: "#2B8473"
-  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6.39343 10.7683V10.1215H8.06761V10.7683H6.39343Z",
-    fill: "#ECF4F2"
-  })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M7.29937 13.6065L6.98608 13.0473L8.43487 12.1845L8.74815 12.7437L7.29937 13.6065Z",
-    fill: "#ECF4F2"
-  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8.43609 8.70399L6.9873 7.84261L7.30059 7.28345L8.74937 8.14483L8.43609 8.70399Z",
-    fill: "#ECF4F2"
-  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M16.6807 7.28345L16.994 7.84261L15.5452 8.70399L15.2319 8.14483L16.6807 7.28345Z",
-    fill: "#ECF4F2"
-  })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11.677 4.68039H12.305V6.4046H11.677V4.68039Z",
-    fill: "#ECF4F2"
-  })), _path7 || (_path7 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.46389 5.29071L10.3017 6.78279L9.75875 7.10544L8.92236 5.61336L9.46389 5.29071Z",
-    fill: "#ECF4F2"
-  })), _path8 || (_path8 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.3026 12.9977V14.6227H12.7313L12.7328 15.2505H11.2486L11.2471 14.6227H10.6787V12.9977C9.80547 12.5057 9.24976 11.5524 9.24976 10.5246C9.24976 8.96969 10.4802 7.70245 11.99 7.70245C13.5025 7.70245 14.733 8.96969 14.733 10.5246C14.7316 11.5509 14.1745 12.5043 13.3027 12.9977H13.3026Z",
-    fill: "#ECF4F2"
-  })), _path9 || (_path9 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M14.2243 7.10672L13.6814 6.78407L14.5178 5.29199L15.0607 5.61464L14.2243 7.10672Z",
-    fill: "#ECF4F2"
-  })), _path10 || (_path10 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M16.6807 13.6065L15.2319 12.7437L15.5452 12.1845L16.994 13.0474L16.6807 13.6065Z",
-    fill: "#ECF4F2"
-  })), _path11 || (_path11 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#2B8473",
+    d: "M12.487 3.197a6.884 6.884 0 0 0-6.888 6.888c0 .175 0 .35.025.5-.325.601-.8 1.428-1.377 1.929-.426.376-.326.777-.276.927.125.325.475.6 1.052.8.2.076.425.126.626.176l.025 2.43c0 .951.802 1.778 1.779 1.778l1.477-.475.151.876c.1.577.6 1.002 1.203 1.002.075 0 .15 0 .225-.025l4.633-.826c.677-.125 1.102-.751 1.002-1.427l-.325-1.629a6.923 6.923 0 0 0 3.556-6.036c0-3.782-3.105-6.889-6.888-6.889Z"
+  })), _path3$3 || (_path3$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#ECF4F2",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17.5865 10.7684H15.9124V10.1216H17.5865V10.7684Z",
-    fill: "#ECF4F2"
+    d: "M6.393 10.768v-.647h1.675v.647H6.393ZM7.3 13.607l-.314-.56 1.449-.863.313.56-1.449.863ZM8.436 8.704l-1.449-.861.314-.56 1.448.862-.313.559ZM16.68 7.283l.314.56-1.449.861-.313-.56 1.449-.86ZM11.677 4.68h.628v1.725h-.628V4.68ZM9.464 5.29l.838 1.493-.543.322-.837-1.492.542-.322ZM13.303 12.998v1.625h-.572l.002.628h-1.484l-.002-.628h-.568v-1.625a2.847 2.847 0 0 1-1.43-2.473c0-1.555 1.231-2.823 2.741-2.823 1.512 0 2.743 1.268 2.743 2.823a2.858 2.858 0 0 1-1.43 2.473ZM14.224 7.107l-.543-.323.837-1.492.543.323-.837 1.492ZM16.68 13.607l-1.448-.863.313-.56 1.449.863-.313.56ZM17.587 10.768h-1.675v-.646h1.675v.646Z",
+    clipRule: "evenodd"
   })));
 };
 
-var _g$6, _path$s;
+var _path$v, _path2$9;
 function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none"
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#003A57",
+    d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z",
     opacity: 0.3
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    opacity: 0.3,
-    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: "#003A57"
-  }))), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
-    fill: "#003A57"
+  })), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#003A57",
+    d: "M17.998 7.167c-.48-.581-.856-.437-.856-.437s-.736.295-1.102.433c-.366.139-.8.01-.8.01l-.482-.288s-.328-.32-.392-.704c-.054-.391-.177-1.178-.177-1.178s-.053-.391-.795-.53c-.742-.14-.926.214-.926.214s-.375.696-.559 1.05c-.184.354-.598.534-.598.534l-.547.098s-.45-.031-.746-.296l-.89-.795s-.298-.265-.945.108c-.647.374-.566.764-.566.764l.243 1.168c.081.39-.116.795-.116.795l-.359.425s-.363.268-.761.25c-.398-.017-1.189-.04-1.189-.04s-.398-.018-.649.694c-.25.712.062.954.062.954s.62.5.932.742c.312.241.414.692.414.692l.008.562s-.106.44-.409.687c-.303.248-.925.738-.925.738s-.303.248-.05.96c.263.706.65.701.65.701s.792-.021 1.178-.026c.386-.004.755.262.755.262l.364.43s.205.406.13.799c-.076.392-.233 1.166-.233 1.166s-.075.393.576.773c.65.38.948.122.948.122s.586-.527.883-.786c.296-.259.742-.283.742-.283l.55.104s.409.186.6.541l.566 1.055s.19.356.931.219c.737-.12.795-.517.795-.517s.106-.788.17-1.175c.058-.397.386-.702.386-.702l.485-.28s.434-.12.801.017l1.103.44s.373.148.844-.43c.472-.578.277-.916.277-.916l-.63-1.017c-.213-.343-.17-.79-.17-.79l.185-.528s.244-.374.616-.502 1.123-.372 1.123-.372.372-.127.368-.882c-.004-.754-.381-.885-.381-.885s-.75-.25-1.127-.382c-.378-.131-.626-.511-.626-.511l-.19-.53s-.058-.447.15-.785c.207-.338.612-1.008.612-1.008s.229-.35-.25-.932ZM9.34 8.385l1.279 2.214a2.12 2.12 0 0 0-.561 2.142l-2.19 1.264c-.878-1.994-.263-4.342 1.472-5.62Zm4.636 8.029c-1.975.864-4.316.222-5.604-1.536l2.19-1.264a2.12 2.12 0 0 0 2.135.585l1.279 2.215Zm-1.32-3.282a1.123 1.123 0 0 1-1.537-.421 1.123 1.123 0 0 1 .403-1.543 1.123 1.123 0 0 1 1.538.422 1.123 1.123 0 0 1-.404 1.542Zm2.183 2.784L13.559 13.7a2.12 2.12 0 0 0 .561-2.142l2.19-1.264c.878 1.995.263 4.343-1.472 5.62Zm-1.222-5.23a2.12 2.12 0 0 0-2.136-.585l-1.278-2.214c1.975-.864 4.31-.234 5.604 1.535l-2.19 1.264Z"
   })));
 };
 
@@ -1079,7 +1054,7 @@ const Label$2 = styled__default["default"](SM) `
   color: ${({ theme }) => theme.palette.grey[500]};
 `;
 const Title$2 = styled__default["default"](LG) `
-  color: ${({ theme }) => theme.colors.primaryHue};
+  color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   margin-top: ${({ theme }) => theme.space.xxs};
 `;
@@ -1132,7 +1107,6 @@ const CardFooter = (props) => (jsxRuntime.jsxs(Footer$3, { children: [!props.noD
 const UgContentCard = styled__default["default"](reactNotifications.Well) `
   border-radius: ${({ theme }) => theme.borderRadii.lg};
   padding: ${({ theme }) => `${theme.space.sm} ${theme.space.base * 4}px`};
-  border: 1px solid ${({ theme }) => theme.palette.grey["200"]};
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -1149,6 +1123,7 @@ const UgContentCard = styled__default["default"](reactNotifications.Well) `
     pointer-events: none;
     opacity: 0.7;
     `}
+    ${(props) => reactTheming.retrieveComponentStyles(CARD_COMPONENT_ID, props)};
 `;
 /**
  * A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
@@ -1224,7 +1199,7 @@ const StyledTagNew = styled__default["default"](Tag) `
 `;
 const ProductCard = (props) => {
     const { isNew, productTitle, labelNew } = props;
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, Object.assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, Object.assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, Object.assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, Object.assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, Object.assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, Object.assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, isAccent: true, size: "small" }, { children: props.ctaLabel })) }))] })));
 };
 
 const ServiceSubtitle = styled__default["default"](SM) `
@@ -1325,27 +1300,27 @@ const DEFAULT_CHARTS_THEME = {
     annotations: {
         text: {
             fontSize: Number(theme.fontSizes.sm),
-            fill: theme.colors.primaryHue,
+            fill: getColor(theme.colors.primaryHue, 600) || theme.palette.blue[600],
             outlineWidth: 2,
             outlineColor: theme.palette.white,
             outlineOpacity: 1,
         },
         link: {
-            stroke: theme.colors.primaryHue,
+            stroke: getColor(theme.colors.primaryHue, 600) || theme.palette.blue[600],
             strokeWidth: 1,
             outlineWidth: 2,
             outlineColor: theme.palette.white,
             outlineOpacity: 1,
         },
         outline: {
-            stroke: theme.colors.primaryHue,
+            stroke: getColor(theme.colors.primaryHue, 600) || theme.palette.blue[600],
             strokeWidth: 2,
             outlineWidth: 2,
             outlineColor: theme.palette.white,
             outlineOpacity: 1,
         },
         symbol: {
-            fill: theme.colors.primaryHue,
+            fill: getColor(theme.colors.primaryHue, 600) || theme.palette.blue[600],
             outlineWidth: 2,
             outlineColor: theme.palette.white,
             outlineOpacity: 1,
@@ -1444,7 +1419,7 @@ const DEFAULT_CHARTS_THEME = {
     tooltip: {
         container: {
             background: theme.palette.white,
-            color: theme.colors.primaryHue,
+            color: getColor(theme.colors.primaryHue, 600),
             fontSize: Number(theme.fontSizes.sm),
         },
         basic: {},
@@ -1455,12 +1430,6 @@ const DEFAULT_CHARTS_THEME = {
     },
 };
 const CHARTS_COLOR_PALETTE = {
-    darkPine: "#02807A",
-    lightGrey: theme.palette.grey[200],
-    darkGrey: theme.palette.grey[600],
-    mattone: "#800208",
-    gubbioLight: "#C78430",
-    blueRoyal: "#024780",
     greenLight: "#5FA41C",
     blue: "#020880",
     fucsia: "#CE2A7A",
@@ -1469,42 +1438,23 @@ const CHARTS_COLOR_PALETTE = {
     sky: "#3392CE",
 };
 const CHARTS_COLOR_SCHEME_MONO = [
-    CHARTS_COLOR_PALETTE.darkPine,
-    CHARTS_COLOR_PALETTE.lightGrey,
+    theme.palette.teal[700],
+    theme.palette.grey[200],
 ];
 [
-    CHARTS_COLOR_PALETTE.mattone,
-    CHARTS_COLOR_PALETTE.gubbioLight,
-    CHARTS_COLOR_PALETTE.blueRoyal,
-    CHARTS_COLOR_PALETTE.darkPine,
-    CHARTS_COLOR_PALETTE.lightGrey,
+    theme.palette.red[900],
+    theme.palette.yellow[700],
+    theme.palette.azure[900],
+    theme.palette.teal[700],
+    theme.palette.grey[200]
 ];
-[
-    CHARTS_COLOR_PALETTE.greenLight,
-    CHARTS_COLOR_PALETTE.blue,
-    CHARTS_COLOR_PALETTE.fucsia,
-    CHARTS_COLOR_PALETTE.violet,
-    CHARTS_COLOR_PALETTE.orchidea, // Orchidea 300
-];
-const CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
-    CHARTS_COLOR_PALETTE.darkPine,
-    CHARTS_COLOR_PALETTE.fucsia,
-    CHARTS_COLOR_PALETTE.violet,
-    CHARTS_COLOR_PALETTE.greenLight,
-    CHARTS_COLOR_PALETTE.mattone,
-    CHARTS_COLOR_PALETTE.sky,
-    CHARTS_COLOR_PALETTE.orchidea,
-    CHARTS_COLOR_PALETTE.blue, // Blue 900
-];
-[
-    CHARTS_COLOR_PALETTE.sky,
-    CHARTS_COLOR_PALETTE.orchidea,
-    CHARTS_COLOR_PALETTE.blue,
-    CHARTS_COLOR_PALETTE.darkPine,
-    CHARTS_COLOR_PALETTE.fucsia,
-    CHARTS_COLOR_PALETTE.violet,
-    CHARTS_COLOR_PALETTE.greenLight,
-    CHARTS_COLOR_PALETTE.mattone, // Mattone 900
+const CHARTS_COLOR_SCHEME_CATEGORICAL = [
+    theme.palette.teal[700],
+    theme.palette.pink[900],
+    theme.palette.purple[300],
+    theme.palette.crimson[500],
+    theme.palette.royal[900],
+    theme.palette.lemon[700],
 ];
 
 const ChartContainer = styled__default["default"].div `
@@ -1563,7 +1513,7 @@ const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 };
 const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBottomLabel, colors, tooltip, legend, }) => {
     const theme = React.useContext(styled.ThemeContext);
     const keys = [...new Set(data.map(({ keys }) => Object.keys(keys)).flat())];
-    const actualColors = colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A;
+    const actualColors = colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(bar.ResponsiveBar, Object.assign({ data: data.map((d) => {
                         const { keys } = d, rest = __rest(d, ["keys"]);
                         return Object.assign(Object.assign({}, rest), keys);
@@ -1622,7 +1572,7 @@ const CustomBulletChartMarkers = ({ x, y, size, animatedProps: { color, transfor
     return (jsxRuntime.jsx(web.animated.circle, { transform: transform, cx: x, cy: y, fill: color, stroke: color, r: size }));
 };
 
-const CustomMeasure = ({ x, y, width, height }) => (jsxRuntime.jsx(web.animated.rect, { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: CHARTS_COLOR_PALETTE.darkGrey }));
+const CustomMeasure = ({ x, y, width, height }) => (jsxRuntime.jsx(web.animated.rect, { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: theme.palette.grey[600] }));
 
 const CustomTooltip = ({ v0, v1, color }) => {
     return (jsxRuntime.jsx(tooltip.BasicTooltip, { id: v1 ? (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("strong", { children: v0 }), "-", jsxRuntime.jsx("strong", { children: v1 }), "%"] })) : (jsxRuntime.jsx("strong", { children: v0 })), enableChip: true, color: color }));
@@ -1633,7 +1583,7 @@ const UgBulletChart = styled__default["default"](bullet.ResponsiveBullet) `
   height: 100%;
 `;
 const BulletChart = ({ width, height, ranges, values }) => {
-    return (jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx("div", Object.assign({ style: { width: "100%", height: height } }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, data: [
+    return (jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx("div", Object.assign({ style: { width: "100%", height: height } }, { children: jsxRuntime.jsx(UgBulletChart, { data: [
                     {
                         id: "",
                         title: "",
@@ -1641,10 +1591,10 @@ const BulletChart = ({ width, height, ranges, values }) => {
                         measures: values,
                         markers: values,
                     },
-                ], animate: false, measureComponent: CustomMeasure, markerColors: CHARTS_COLOR_PALETTE.darkPine, markerComponent: (_a) => {
+                ], animate: false, measureComponent: CustomMeasure, markerColors: theme.palette.teal[700], markerComponent: (_a) => {
                     var markerProps = __rest(_a, ["size"]);
                     return (jsxRuntime.jsx(CustomBulletChartMarkers, Object.assign({}, markerProps, { size: 4 })));
-                }, tooltip: CustomTooltip, rangeColors: CHARTS_COLOR_PALETTE.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })) })));
+                }, tooltip: CustomTooltip, rangeColors: theme.palette.grey[200], rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })) })));
 };
 
 const CenteredItem = ({ centerX, centerY, theme, radius, label, value, fontSizeMultiplier, }) => {
@@ -1665,7 +1615,7 @@ const CenteredItem = ({ centerX, centerY, theme, radius, label, value, fontSizeM
 const PieChart = ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }) => {
     var _a;
     const themeContext = React.useContext(styled.ThemeContext);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign({}, Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { labels: Object.assign(Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: Object.assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_a = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _a === void 0 ? void 0 : _a.text) }) })), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, arcLinkLabelsThickness: 2, arcLinkLabel: (d) => labelFormatter
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign({}, Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { labels: Object.assign(Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: Object.assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_a = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _a === void 0 ? void 0 : _a.text) }) })), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, arcLinkLabelsThickness: 2, arcLinkLabel: (d) => labelFormatter
                         ? labelFormatter({
                             label: d.label,
                             id: d.id,
@@ -1689,7 +1639,7 @@ const PieChart = ({ theme, colors, width, height, data, centerItem, margin, tool
                                 (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))),
                             ]
                             : []),
-                    ], activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map((d) => labelFormatter
+                    ], activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.map((d) => labelFormatter
                         ? labelFormatter({
                             label: d.label,
                             id: d.id,
@@ -1711,7 +1661,7 @@ const AbsoluteChartContainer = styled__default["default"](ChartContainer) `
 `;
 const HalfPieChartComponent = ({ theme, colors, height, data, onMouseEnter, onMouseLeave, mode, showArcLinks, margin, }) => {
     const themeContext = React.useContext(styled.ThemeContext);
-    return (jsxRuntime.jsx(AbsoluteChartContainer, Object.assign({ mode: mode, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { background: mode === "front" ? "transparent" : undefined }), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: margin, innerRadius: mode === "front" ? 0.835 : 0.8, arcLinkLabelsThickness: 2, arcLinkLabelsTextColor: themeContext.palette.grey[600], layers: [
+    return (jsxRuntime.jsx(AbsoluteChartContainer, Object.assign({ mode: mode, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { background: mode === "front" ? "transparent" : undefined }), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: margin, innerRadius: mode === "front" ? 0.835 : 0.8, arcLinkLabelsThickness: 2, arcLinkLabelsTextColor: themeContext.palette.grey[600], layers: [
                 "arcs",
                 ...(showArcLinks
                     ? ["arcLabels", "arcLinkLabels"]
@@ -1721,7 +1671,7 @@ const HalfPieChartComponent = ({ theme, colors, height, data, onMouseEnter, onMo
 
 const HalfPieChart = ({ theme, colors, width, height, data, margin, showArcLinks, }) => {
     const themeContext = React.useContext(styled.ThemeContext);
-    const activeColors = colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A;
+    const activeColors = colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL;
     while (activeColors.length < data.length) {
         activeColors.push(...activeColors);
     }
@@ -1798,7 +1748,7 @@ const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChan
                                     padding: 0,
                                 } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
                         ? () => currentColor
-                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 4, onMouseEnter: (node) => {
+                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, borderWidth: 4, cornerRadius: 4, onMouseEnter: (node) => {
                         if (node.data.children) {
                             setIsHovering(true);
                         }
@@ -1828,7 +1778,7 @@ const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChan
                                     } })),
                             ]
                             : []),
-                    ], id: "name", value: "value", margin: Object.assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: (clickedData) => {
+                    ], id: "name", value: "value", margin: Object.assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.6]] }, onClick: (clickedData) => {
                         const foundObject = findChildrenByName(currentData, clickedData.id.toString());
                         if (foundObject && foundObject.children) {
                             changeDataSlice({
@@ -1836,7 +1786,7 @@ const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChan
                                 color: clickedData.color,
                             });
                         }
-                    } }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.children.map((d) => d.label || d.name) }, (typeof legend === "object" && legend)))) : undefined }))] }));
+                    } }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.children.map((d) => d.label || d.name) }, (typeof legend === "object" && legend)))) : undefined }))] }));
 };
 
 const CustomCell = ({ position, size, x, y, color, fill, opacity, borderWidth, borderColor, data, onHover, onLeave, onClick, }) => (jsxRuntime.jsx("circle", { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill || color, strokeWidth: borderWidth, stroke: borderColor, opacity: opacity, onMouseEnter: onHover, onMouseMove: onHover, onMouseLeave: onLeave, onClick: event => {
@@ -2045,11 +1995,11 @@ Dropdown.Separator = Separator;
 const StyledAutocomplete = styled__default["default"](Autocomplete) `
   ${(props) => props.hasSelectedItems &&
     `
-    border-color: ${props.theme.colors.primaryHue};
-    background-color: ${props.theme.colors.primaryHue};
+    border-color: ${getColor(theme.colors.primaryHue, 600)};
+    background-color: ${getColor(theme.colors.primaryHue, 600)};
     color: white;
     & > input, & > svg {
-      color: white;
+      color: ${props.theme.palette.white};
     }
   `}
 `;
@@ -2340,31 +2290,27 @@ const editorStyle = styled.css `
   }
 `;
 
-var _path$r;
+var _path$u;
 function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgBoldFill = function SvgBoldFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+    height: 16
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
+    d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 0 1-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
   })));
 };
 
-var _path$q;
+var _path$t;
 function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgItalicFill = function SvgItalicFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+    height: 16
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2373,19 +2319,17 @@ var SvgItalicFill = function SvgItalicFill(props) {
   })));
 };
 
-var _path$p, _path2$6;
+var _path$s, _path2$8;
 function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgQuoteFill = function SvgQuoteFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+    height: 16
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
-  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -2394,94 +2338,70 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
   })));
 };
 
-var _g$5;
+var _path$r, _path2$7, _path3$2;
 function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgH1Fill = function SvgH1Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-464 -332)"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 16,
-    height: 16,
-    transform: "translate(464 332)",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
-    transform: "translate(462 333.5)",
+    height: 16
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    d: "M0 0h16v16H0z"
+  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
-    strokeWidth: 2
-  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeWidth: 2,
+    d: "M1 2.5v11.273M9.052 2.5v11.273M1 8.136h8.052"
+  })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M1.755,15A.731.731,0,0,1,1,14.375a.7.7,0,0,1,.617-.739l.136-.011H2.51V6.346l-.22.2a.81.81,0,0,1-1.018.043.646.646,0,0,1-.137-.92l.086-.1L2.731,4.2l.063-.051.094-.058.091-.041.094-.028.082-.016L3.2,4l.082,0a.734.734,0,0,1,.094.007L3.265,4l.08,0,.113.019.1.028.115.055.083.055L3.8,4.2l.056.056.063.085.045.082.03.085.023.113,0,.063v8.937h.755a.731.731,0,0,1,.753.625.7.7,0,0,1-.617.739L4.775,15Z",
-    transform: "translate(474.469 331)"
-  }))));
+    d: "M12.224 14a.731.731 0 0 1-.755-.625.7.7 0 0 1 .617-.739l.136-.011h.757V5.346l-.22.2a.81.81 0 0 1-1.018.043.646.646 0 0 1-.137-.92l.086-.1L13.2 3.2l.063-.051.094-.058.091-.041.094-.028.082-.016.045-.006h.082a.734.734 0 0 1 .094.007L13.734 3h.08l.113.019.1.028.115.055.083.055.044.043.056.056.063.085.045.082.03.085.023.113v9h.755a.731.731 0 0 1 .753.625.7.7 0 0 1-.617.739l-.133.015Z"
+  })));
 };
 
-var _g$4;
+var _path$q, _path2$6, _path3$1;
 function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgH2Fill = function SvgH2Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-464 -332)"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 16,
-    height: 16,
-    transform: "translate(464 332)",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
-    transform: "translate(462 333.5)",
+    height: 16
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    d: "M0 0h16v16H0z"
+  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
-    strokeWidth: 2
-  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeWidth: 2,
+    d: "M1 2.5v11.273M9.052 2.5v11.273M1 8.136h8.052"
+  })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M5.5,6.75a2.576,2.576,0,1,1,5.141,0,4.961,4.961,0,0,1-1.1,3l-.256.348-1,1.291a8.564,8.564,0,0,0-1.222,2.047l-.071.191H10a.656.656,0,0,1,.632.564l.01.124a.677.677,0,0,1-.527.676L10,15H6.143a.627.627,0,0,1-.5-.252.723.723,0,0,1-.133-.57,8.183,8.183,0,0,1,1.753-3.637L8.24,9.292l.085-.111A3.975,3.975,0,0,0,9.355,6.75a1.288,1.288,0,1,0-2.57,0,.644.644,0,1,1-1.285,0Z",
-    transform: "translate(469.359 331)"
-  }))));
+    d: "M10.859 5.75a2.576 2.576 0 1 1 5.141 0 4.961 4.961 0 0 1-1.1 3l-.256.348-1 1.291a8.564 8.564 0 0 0-1.222 2.047l-.071.191h3.008a.656.656 0 0 1 .632.564l.01.124a.677.677 0 0 1-.527.676l-.115.009h-3.857a.627.627 0 0 1-.5-.252.723.723 0 0 1-.133-.57 8.183 8.183 0 0 1 1.753-3.637l.977-1.249.085-.111a3.975 3.975 0 0 0 1.03-2.431 1.288 1.288 0 1 0-2.57 0 .644.644 0 1 1-1.285 0Z"
+  })));
 };
 
-var _g$3;
+var _path$p, _path2$5, _path3;
 function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgH3Fill = function SvgH3Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-464 -332)"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 16,
-    height: 16,
-    transform: "translate(464 332)",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
-    transform: "translate(462 333.5)",
+    height: 16
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    d: "M0 0h16v16H0z"
+  })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
-    strokeWidth: 2
-  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeWidth: 2,
+    d: "M1 2.5v11.273M9.052 2.5v11.273M1 8.136h8.052"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M15.375,4A.658.658,0,0,1,16,4.688a3.531,3.531,0,0,1-.744,1.665l-.3.44-.171.238-.384.514-.438.568-.136.168.145.043a2.839,2.839,0,0,1,1.95,2.5l.031.225.015.151.021.294.01.334,0,.424a3.323,3.323,0,0,1-.3,1.339A2.286,2.286,0,0,1,13.5,15c-1.6,0-2.5-1-2.5-2.75a.628.628,0,1,1,1.25,0c0,1,.345,1.375,1.25,1.375a1.053,1.053,0,0,0,1.081-.652,1.9,1.9,0,0,0,.169-.723l0-.378-.015-.415-.021-.238c-.134-1.172-.653-1.719-2.149-1.719a.625.625,0,0,1-.571-.407.741.741,0,0,1,.106-.739l.494-.61.446-.564.4-.518.347-.465.3-.41.282-.411H11.625a.645.645,0,0,1-.615-.564L11,4.688a.673.673,0,0,1,.512-.676L11.625,4Z",
-    transform: "translate(464.001 331)"
-  }))));
+    d: "M15.376 3a.658.658 0 0 1 .625.688 3.531 3.531 0 0 1-.744 1.665l-.3.44-.171.238-.384.514-.438.568-.136.168.145.043a2.839 2.839 0 0 1 1.95 2.5l.031.225.015.151.021.294.01.334v.424a3.323 3.323 0 0 1-.3 1.339A2.286 2.286 0 0 1 13.501 14c-1.6 0-2.5-1-2.5-2.75a.628.628 0 1 1 1.25 0c0 1 .345 1.375 1.25 1.375a1.053 1.053 0 0 0 1.081-.652 1.9 1.9 0 0 0 .169-.723v-.378l-.015-.415-.021-.238c-.134-1.172-.653-1.719-2.149-1.719a.625.625 0 0 1-.571-.407.741.741 0 0 1 .106-.739l.494-.61.446-.564.4-.518.347-.465.3-.41.282-.411h-2.744a.645.645 0 0 1-.615-.564l-.01-.124a.673.673 0 0 1 .512-.676L11.626 3Z"
+  })));
 };
 
 const StyledIconButton = styled__default["default"](IconButton) ``;
@@ -2521,16 +2441,16 @@ const Header$1 = styled__default["default"].div `
 const Title$1 = styled__default["default"](MD) `
   ${({ validation, theme }) => {
     if (validation === "success") {
-        return `color: ${theme.colors.successHue};`;
+        return `color: ${getColor(theme.colors.successHue)};`;
     }
     else if (validation === "warning") {
-        return `color: ${theme.colors.warningHue};`;
+        return `color: ${getColor(theme.colors.warningHue)};`;
     }
     else if (validation === "error") {
-        return `color: ${theme.palette.dangerHue};`;
+        return `color: ${getColor(theme.colors.dangerHue)};`;
     }
     else {
-        return `color: ${theme.colors.primaryHue};`;
+        return `color: ${getColor(theme.colors.primaryHue, 600)};`;
     }
 }}
 `;
@@ -2552,29 +2472,8 @@ const EditorFooter = ({ saveText }) => {
     return jsxRuntime.jsxs(Footer$2, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
 };
 
-const EditorContainer = styled__default["default"].div `
-  border: 2px solid;
-  border-radius: ${({ theme }) => theme.borderRadii.md};
-  &:focus-within {
-    outline: ${({ theme }) => theme.palette.blue["300"]};
-    outline-style: solid;
-  }
-
-  ${({ validation, theme }) => {
-    if (validation === "success") {
-        return `border-color: ${theme.colors.successHue};`;
-    }
-    else if (validation === "warning") {
-        return `border-color: ${theme.colors.warningHue};`;
-    }
-    else if (validation === "error") {
-        return `border-color: ${theme.colors.dangerHue};`;
-    }
-    else {
-        return `border-color: ${theme.colors.primaryHue};`;
-    }
-}}
-
+const EditorContainer = styled__default["default"](reactForms.FauxInput) `
+  
   ${({ editable }) => !editable &&
     `
       border: none;
@@ -2672,7 +2571,7 @@ const CheckboxCard = (props) => {
         setChecked(!checked);
         props.onToggle && props.onToggle(!checked);
     };
-    return (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, Object.assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, Object.assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, Object.assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: (e) => e.stopPropagation() }, { children: jsxRuntime.jsx(StyledLabel$1, Object.assign({ hidden: true }, { children: props.label })) })) }))] })));
+    return (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, Object.assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, Object.assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: checked ? { color: getColor(theme.colors.primaryHue, 600) } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, Object.assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: (e) => e.stopPropagation() }, { children: jsxRuntime.jsx(StyledLabel$1, Object.assign({ hidden: true }, { children: props.label })) })) }))] })));
 };
 
 const UgField = styled__default["default"](reactForms.Field) ``;
@@ -2704,18 +2603,16 @@ var SvgNotesStroke = function SvgNotesStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinejoin: "round",
-    d: "M10.51 8.4l-3.01.1.1-3.01L12.59.5l2.91 2.91-4.99 4.99z"
+    d: "m10.51 8.4-3.01.1.1-3.01L12.59.5l2.91 2.91-4.99 4.99z"
   }), /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
-    d: "M7.41 1.5H2.09a.58.58 0 00-.59.59v11.82a.58.58 0 00.59.59h11.82a.58.58 0 00.59-.59V8.59"
+    d: "M7.41 1.5H2.09a.58.58 0 0 0-.59.59v11.82a.58.58 0 0 0 .59.59h11.82a.58.58 0 0 0 .59-.59V8.59"
   }))));
 };
 
@@ -2824,15 +2721,14 @@ var _path$o;
 function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgCheckLg = function SvgCheckLg(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "#68737D",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "#68737D"
   }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M14.6464 2.64645C14.8417 2.45118 15.1583 2.45118 15.3536 2.64645C15.5488 2.84171 15.5488 3.15829 15.3536 3.35355L5.35355 13.3536C5.15829 13.5488 4.84171 13.5488 4.64645 13.3536L0.646447 9.35355C0.451184 9.15829 0.451184 8.84171 0.646447 8.64645C0.841709 8.45118 1.15829 8.45118 1.35355 8.64645L5 12.2929L14.6464 2.64645Z"
+    d: "M14.646 2.646a.5.5 0 0 1 .708.708l-10 10a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L5 12.293l9.646-9.647Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -2851,7 +2747,7 @@ const Circle = styled__default["default"].div `
   height: ${({ theme }) => theme.space.base * 6}px;
   padding: ${({ theme }) => theme.space.base * 1.25}px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.colors.primaryHue};
+  background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2868,7 +2764,7 @@ const RadioCard = (_a) => {
     var { card, icon, iconActive } = _a, props = __rest(_a, ["card", "icon", "iconActive"]);
     return (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: props.label }, card, props, { className: props.checked ? "card-active" : "", onClick: () => {
             props.onChecked && props.onChecked(props.value);
-        } }, { children: [jsxRuntime.jsx(SpecialCard.Meta, Object.assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, Object.assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, Object.assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, Object.assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
+        } }, { children: [jsxRuntime.jsx(SpecialCard.Meta, Object.assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, Object.assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, Object.assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, Object.assign({ style: props.checked ? { color: getColor(theme.colors.primaryHue, 600) } : {} }, { children: props.label })) }))] })));
 };
 
 const UgTextarea = styled__default["default"](reactForms.Textarea) ``;
@@ -3010,7 +2906,7 @@ const Spinner = (props) => jsxRuntime.jsx(UgSpinner, Object.assign({}, props));
 const Dots = (props) => jsxRuntime.jsx(reactLoaders.Dots, Object.assign({}, props));
 
 const UgBody = styled__default["default"](reactChrome.Body) `
-  background-color: ${({ theme }) => theme.palette.white};
+  background-color: ${({ theme }) => theme.palette.red[600]};
 `;
 /**
  * A Body defines the main content of an HTML document which displays on the browser
@@ -3028,12 +2924,10 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+    d: "M12.688 5.61a.5.5 0 0 1 .69.718l-.066.062-5 4a.5.5 0 0 1-.542.054l-.082-.054-5-4a.5.5 0 0 1 .55-.83l.074.05L8 9.359l4.688-3.75z"
   })));
 };
 
@@ -3085,9 +2979,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -3109,7 +3001,7 @@ const WorkspacesDropdown = (props) => {
             props.onWorkspaceChange && props.onWorkspaceChange(workspace);
         }, downshiftProps: {
             itemToString: (item) => item && item.company,
-        } }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, Object.assign({ style: { color: theme.colors.primaryHue } }, { children: jsxRuntime.jsx(StyledEllipsis, Object.assign({ isCompact: props.isCompact }, { children: selectedWorkspace
+        } }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, Object.assign({ style: { color: getColor(theme.colors.primaryHue, 600) } }, { children: jsxRuntime.jsx(StyledEllipsis, Object.assign({ isCompact: props.isCompact }, { children: selectedWorkspace
                             ? selectedWorkspace.company + "'s workspace"
                             : "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map((item) => (jsxRuntime.jsx(Item$1, Object.assign({ value: item }, { children: item.company }))))] })] })));
 };
@@ -3129,7 +3021,7 @@ const LogoIconContainer = styled__default["default"](reactChrome.HeaderItem) `
 const BrandName = styled__default["default"](reactChrome.HeaderItem) `
   margin-right: auto;
   margin-left: -8px;
-  color: ${({ theme }) => theme.colors.primaryHue};
+  color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   pointer-events: none;
   font-family: ${({ theme }) => theme.fonts.system};
   @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
@@ -3139,7 +3031,7 @@ const BrandName = styled__default["default"](reactChrome.HeaderItem) `
 const DropdownItem = styled__default["default"](reactChrome.HeaderItem) `
   margin-right: auto;
   margin-left: -8px;
-  color: ${({ theme }) => theme.colors.primaryHue};
+  color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   font-family: ${({ theme }) => theme.fonts.system};
   z-index: 2;
   @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
@@ -3147,7 +3039,7 @@ const DropdownItem = styled__default["default"](reactChrome.HeaderItem) `
   }
 `;
 const MenuItem$1 = styled__default["default"](reactChrome.HeaderItem) `
-  color: ${({ theme }) => theme.colors.primaryHue};
+  color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   position: absolute;
   left: 0;
   @media (min-width: ${({ theme }) => theme.breakpoints.md}) {
@@ -3198,7 +3090,7 @@ const UgNav = styled__default["default"](reactChrome.Nav) `
   
   @media (min-width: ${p => p.theme.breakpoints.md}) {
     border-right: ${({ theme }) => theme.borders.sm};
-    border-color: ${({ theme }) => reactTheming.getColor(theme.colors.neutralHue, 300)};
+    border-color: ${({ theme }) => getColor(theme.colors.neutralHue, 300)};
     width: ${p => p.theme.components.chrome.nav.openWidth}px;
     margin-left: ${p => p.isExpanded
     ? 0
@@ -3216,7 +3108,7 @@ const UgNav = styled__default["default"](reactChrome.Nav) `
 const Nav = (props) => jsxRuntime.jsx(UgNav, Object.assign({}, props));
 
 const SelectedItemStyle = styled.css `
-  background-color: ${({ theme }) => theme.palette.kale["100"]};
+  background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600, undefined, 0.08)};
 `;
 const UgNavItem$2 = styled__default["default"](reactChrome.NavItem) `
   border-top-left-radius: ${(props) => props.theme.space.base * 6}px;
@@ -3225,13 +3117,13 @@ const UgNavItem$2 = styled__default["default"](reactChrome.NavItem) `
   ${sidebarNavItemExpanded}
   ${(props) => !props.isExpanded && sidebarNavItemHidden}
   ${(props) => props.isCurrent && SelectedItemStyle}
-  &:focus {
+  &:focus, &:hover {
     ${SelectedItemStyle}
   }
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.kale["200"]};
+  &:active {
+    background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600, undefined, 0.2)};
   }
-  color: ${(props) => props.theme.colors.primaryHue};
+  color: ${(props) => getColor(props.theme.colors.primaryHue, 600)};
   font-weight: ${(props) => props.theme.fontWeights.medium};
   ${(props) => props.isCurrent &&
     `
@@ -3253,12 +3145,10 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+    d: "M5.61 3.312a.5.5 0 0 1 .718-.69l.062.066 4 5a.5.5 0 0 1 .054.542l-.054.082-4 5a.5.5 0 0 1-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
   })));
 };
 
@@ -3268,12 +3158,10 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+    d: "M10.39 12.688a.5.5 0 0 1-.718.69l-.062-.066-4-5a.5.5 0 0 1-.054-.542l.054-.082 4-5a.5.5 0 0 1 .83.55l-.05.074L6.641 8l3.75 4.688z"
   })));
 };
 
@@ -3346,12 +3234,10 @@ var SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
-    height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    height: 26
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    d: "m23.885 13.2-1.328 1.639a.522.522 0 0 1-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 0 0-.716-1.732 2.448 2.448 0 0 0-1.74-.714 2.45 2.45 0 0 0-1.739.714 2.43 2.43 0 0 0-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 0 1-.737-.084L2.115 13.2a.52.52 0 0 1 .084-.735l10.474-8.348a.51.51 0 0 1 .654 0L23.8 12.466a.52.52 0 0 1 .084.735"
   })));
 };
 
@@ -3361,22 +3247,18 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
-    height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    height: 26
   }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
-    id: "unguessIconGradient"
+    id: "home-fill-styled_svg__a"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
-    className: "stop1",
-    offset: "11.98%",
-    stopColor: "#70c38a"
+    className: "home-fill-styled_svg__stop1",
+    offset: "11.98%"
   }), /*#__PURE__*/React__namespace.createElement("stop", {
-    className: "stop3",
-    offset: "100%",
-    stopColor: "#001825"
+    className: "home-fill-styled_svg__stop3",
+    offset: "100%"
   }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "url(#unguessIconGradient)",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fill: "url(#home-fill-styled_svg__a)",
+    d: "m23.885 13.2-1.328 1.639a.522.522 0 0 1-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 0 0-.716-1.732 2.448 2.448 0 0 0-1.74-.714 2.45 2.45 0 0 0-1.739.714 2.43 2.43 0 0 0-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 0 1-.737-.084L2.115 13.2a.52.52 0 0 1 .084-.735l10.474-8.348a.51.51 0 0 1 .654 0L23.8 12.466a.52.52 0 0 1 .084.735"
   })));
 };
 
@@ -3384,38 +3266,37 @@ var _g$1, _defs$2;
 function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgToken = function SvgToken(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
-    viewBox: "0 0 32 32",
-    xmlns: "http://www.w3.org/2000/svg"
+    viewBox: "0 0 32 32"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#a)"
+    clipPath: "url(#token_svg__a)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m32 16c0 8.8363-7.1635 16-16 16-8.8369 0-16-7.1635-16-16 0-8.8367 7.1632-16 16-16 8.8364 0 16 7.1632 16 16z",
-    clipRule: "evenodd",
     fill: "#9FD7B1",
-    fillRule: "evenodd"
+    fillRule: "evenodd",
+    d: "M32 16c0 8.836-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0c8.836 0 16 7.163 16 16z",
+    clipRule: "evenodd"
   }), /*#__PURE__*/React__namespace.createElement("rect", {
-    x: 4.129,
-    y: 4.129,
     width: 23.742,
     height: 23.742,
-    rx: 11.871,
-    fill: "#003A57"
+    x: 4.129,
+    y: 4.129,
+    fill: "#003A57",
+    rx: 11.871
   }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m18.662 16.433v1.1544h-0.0144c-0.1011 1.6739-1.0246 2.6263-2.5686 2.6263-1.645 0-2.6263-0.9524-2.7273-2.6263h-0.0144v-1.1544h-2.3377v1.1688c0.1299 2.9149 2.0924 4.7764 5.065 4.7764 2.9437 0 4.8052-1.8182 4.9351-4.7764v-1.1688h-2.3377z",
-    fill: "#fff"
+    fill: "#fff",
+    d: "M18.662 16.433v1.154h-.014c-.101 1.674-1.025 2.627-2.569 2.627-1.645 0-2.626-.953-2.727-2.627h-.015v-1.154H11v1.169c.13 2.915 2.092 4.776 5.065 4.776 2.943 0 4.805-1.818 4.935-4.776v-1.169h-2.338z"
   }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m13.367 10.545h-2.3522v2.3521h2.3522v-2.3521z",
-    fill: "#54C38A"
+    fill: "#54C38A",
+    d: "M13.367 10.545h-2.352v2.352h2.352v-2.352z"
   }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m20.986 10.545h-2.381v2.381h2.381v-2.381z",
-    fill: "#fff"
+    fill: "#fff",
+    d: "M20.986 10.545h-2.381v2.381h2.381v-2.381z"
   }))), _defs$2 || (_defs$2 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "a"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 32,
-    height: 32,
-    fill: "#fff"
+    id: "token_svg__a"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h32v32H0z"
   })))));
 };
 
@@ -3423,15 +3304,14 @@ var _path$h;
 function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgFolderIcon = function SvgFolderIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    xmlns: "http://www.w3.org/2000/svg"
+    height: 12
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.99976 4H6.99976V3.5C6.99976 2.62386 6.3759 2 5.49976 2H2.49976C1.62362 2 0.999758 2.62386 0.999758 3.5V6H0.499758C0.174472 6 -0.0642066 6.30569 0.0146868 6.62127L1.01469 10.6213C1.07033 10.8439 1.27032 11 1.49976 11H10.4998C10.7292 11 10.9292 10.8439 10.9848 10.6213L11.9848 6.62127C12.0637 6.30569 11.825 6 11.4998 6H10.9998V5C10.9998 4.42386 10.5759 4 9.99976 4ZM10.8594 7H1.14015L1.89015 10H10.1094L10.8594 7ZM1.99976 6H9.99976V5H5.99976V3.5C5.99976 3.17614 5.82362 3 5.49976 3H2.49976C2.1759 3 1.99976 3.17614 1.99976 3.5V6Z",
-    fill: "currentColor"
+    d: "M10 4H7v-.5C7 2.624 6.376 2 5.5 2h-3C1.624 2 1 2.624 1 3.5V6H.5a.5.5 0 0 0-.485.621l1 4A.5.5 0 0 0 1.5 11h9a.5.5 0 0 0 .485-.379l1-4A.5.5 0 0 0 11.5 6H11V5c0-.576-.424-1-1-1Zm.86 3H1.14l.75 3h8.22l.75-3ZM2 6h8V5H6V3.5c0-.324-.176-.5-.5-.5h-3c-.324 0-.5.176-.5.5V6Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -3439,22 +3319,21 @@ var _path$g, _defs$1;
 function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgTemplates = function SvgTemplates(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    viewBox: "0 0 26 26",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "url(#templates_svg__a)",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 5H3.5C3.2 5 3 5.2 3 5.5V18.5C3 18.8 3.2 19 3.5 19H7C10 19 11 21 11 21H12V7C12 6.9 11 5 8 5ZM9 15H6C5.5 15 5 14.5 5 14C5 13.5 5.5 13 6 13H9C9.5 13 10 13.5 10 14C10 14.5 9.5 15 9 15ZM9 11H6C5.5 11 5 10.5 5 10C5 9.5 5.5 9 6 9H9C9.5 9 10 9.5 10 10C10 10.5 9.5 11 9 11ZM14 7V21H15C15 21 16 19 19 19H22.5C22.8 19 23 18.8 23 18.5V5.5C23 5.2 22.8 5 22.5 5H18C15 5 14 6.9 14 7ZM16 14C16 13.5 16.5 13 17 13H20C20.5 13 21 13.5 21 14C21 14.5 20.5 15 20 15H17C16.5 15 16 14.5 16 14ZM16 10C16 9.5 16.5 9 17 9H20C20.5 9 21 9.5 21 10C21 10.5 20.5 11 20 11H17C16.5 11 16 10.5 16 10Z",
-    fill: "url(#paint0_linear_342_21583)"
+    d: "M8 5H3.5c-.3 0-.5.2-.5.5v13c0 .3.2.5.5.5H7c3 0 4 2 4 2h1V7c0-.1-1-2-4-2Zm1 10H6c-.5 0-1-.5-1-1s.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1Zm0-4H6c-.5 0-1-.5-1-1s.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1Zm5-4v14h1s1-2 4-2h3.5c.3 0 .5-.2.5-.5v-13c0-.3-.2-.5-.5-.5H18c-3 0-4 1.9-4 2Zm2 7c0-.5.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1h-3c-.5 0-1-.5-1-1Zm0-4c0-.5.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1h-3c-.5 0-1-.5-1-1Z",
+    clipRule: "evenodd"
   })), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
-    id: "paint0_linear_342_21583",
+    id: "templates_svg__a",
     x1: 3,
+    x2: 23.277,
     y1: 5,
-    x2: 23.2766,
-    y2: 5.35853,
+    y2: 5.359,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
     stopColor: "#001825"
@@ -3468,25 +3347,24 @@ var _path$f, _defs;
 function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgTemplatesActive = function SvgTemplatesActive(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    viewBox: "0 0 26 26",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "url(#templates-active_svg__a)",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 5H3.5C3.2 5 3 5.2 3 5.5V18.5C3 18.8 3.2 19 3.5 19H7C10 19 11 21 11 21H12V7C12 6.9 11 5 8 5ZM9 15H6C5.5 15 5 14.5 5 14C5 13.5 5.5 13 6 13H9C9.5 13 10 13.5 10 14C10 14.5 9.5 15 9 15ZM9 11H6C5.5 11 5 10.5 5 10C5 9.5 5.5 9 6 9H9C9.5 9 10 9.5 10 10C10 10.5 9.5 11 9 11ZM14 7V21H15C15 21 16 19 19 19H22.5C22.8 19 23 18.8 23 18.5V5.5C23 5.2 22.8 5 22.5 5H18C15 5 14 6.9 14 7ZM16 14C16 13.5 16.5 13 17 13H20C20.5 13 21 13.5 21 14C21 14.5 20.5 15 20 15H17C16.5 15 16 14.5 16 14ZM16 10C16 9.5 16.5 9 17 9H20C20.5 9 21 9.5 21 10C21 10.5 20.5 11 20 11H17C16.5 11 16 10.5 16 10Z",
-    fill: "url(#paint0_linear_342_4104)"
+    d: "M8 5H3.5c-.3 0-.5.2-.5.5v13c0 .3.2.5.5.5H7c3 0 4 2 4 2h1V7c0-.1-1-2-4-2Zm1 10H6c-.5 0-1-.5-1-1s.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1Zm0-4H6c-.5 0-1-.5-1-1s.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1Zm5-4v14h1s1-2 4-2h3.5c.3 0 .5-.2.5-.5v-13c0-.3-.2-.5-.5-.5H18c-3 0-4 1.9-4 2Zm2 7c0-.5.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1h-3c-.5 0-1-.5-1-1Zm0-4c0-.5.5-1 1-1h3c.5 0 1 .5 1 1s-.5 1-1 1h-3c-.5 0-1-.5-1-1Z",
+    clipRule: "evenodd"
   })), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
-    id: "paint0_linear_342_4104",
+    id: "templates-active_svg__a",
     x1: 3,
+    x2: 23.277,
     y1: 5,
-    x2: 23.2766,
-    y2: 5.35853,
+    y2: 5.359,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
-    offset: 0.119792,
+    offset: 0.12,
     stopColor: "#003A57"
   }), /*#__PURE__*/React__namespace.createElement("stop", {
     offset: 1,
@@ -3521,10 +3399,6 @@ const AccordionItemHeader = styled__default["default"](Accordion.Header) `
   svg {
     width: 26px;
   }
-
-  &:hover {
-    background-color: ${(props) => props.theme.palette.kale["200"]};
-  }
 `;
 const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
   max-height: 180px;
@@ -3539,8 +3413,8 @@ const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
 const AccordionItemLabel = styled__default["default"](Accordion.Label) `
   padding: 12px 9px;
   ${({ theme }) => `
-    color: ${theme.colors.primaryHue};
-    fill: ${theme.colors.primaryHue};
+    color: ${getColor(theme.colors.primaryHue, 600)};
+    fill: ${getColor(theme.colors.primaryHue, 600)};
     font-weight: ${theme.fontWeights.medium};
   `}
 `;
@@ -3713,7 +3587,7 @@ const LoginForm = (props) => {
                                             ? true
                                             : isSubmitting
                                                 ? true
-                                                : false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, Object.assign({ validation: "error" }, { children: status.message })) })))] })));
+                                                : false, isPrimary: true, isAccent: true, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, Object.assign({ validation: "error" }, { children: status.message })) })))] })));
                         } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, Object.assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
 };
 
@@ -3721,16 +3595,15 @@ var _path$e;
 function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgPlus = function SvgPlus(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#68737D",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M7.5 2C7.22386 2 7 2.22386 7 2.5V8H1.5C1.22386 8 1 8.22386 1 8.5C1 8.77614 1.22386 9 1.5 9H7V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V9H13.5C13.7761 9 14 8.77614 14 8.5C14 8.22386 13.7761 8 13.5 8H8V2.5C8 2.22386 7.77614 2 7.5 2Z",
-    fill: "#68737D"
+    d: "M7.5 2a.5.5 0 0 0-.5.5V8H1.5a.5.5 0 0 0 0 1H7v5.5a.5.5 0 0 0 1 0V9h5.5a.5.5 0 0 0 0-1H8V2.5a.5.5 0 0 0-.5-.5Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -3926,7 +3799,7 @@ const MainOverline = styled__default["default"](MD) `
   margin-bottom: ${({ theme }) => theme.space.md};
 `;
 const MainTitle = styled__default["default"].h1 `
-  color: ${({ theme }) => theme.colors.primaryHue};
+  color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   font-size: ${({ theme }) => theme.fontSizes.xxxl};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: ${({ theme }) => theme.lineHeights.xxxl};
@@ -4036,12 +3909,10 @@ var SvgPlayFill = function SvgPlayFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M6 15.79c-.13 0-.26-.03-.38-.08a.977.977 0 01-.62-.92V1.21a1 1 0 01.62-.93C6 .12 6.42.21 6.71.5l6.44 6.44c.58.58.58 1.54 0 2.12L6.71 15.5c-.19.19-.45.29-.71.29z"
+    d: "M6 15.79c-.13 0-.26-.03-.38-.08a.977.977 0 0 1-.62-.92V1.21a1 1 0 0 1 .62-.93C6 .12 6.42.21 6.71.5l6.44 6.44c.58.58.58 1.54 0 2.12L6.71 15.5c-.19.19-.45.29-.71.29z"
   })));
 };
 
@@ -4051,9 +3922,7 @@ var SvgPauseFill = function SvgPauseFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("rect", {
@@ -4073,67 +3942,55 @@ var SvgPauseFill = function SvgPauseFill(props) {
   }))));
 };
 
-var _path$c, _path2$5, _path3$1;
+var _path$c, _path2$4;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgForwardSecondsFill = function SvgForwardSecondsFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11.659 3.5C10.7411 2.85974 9.65081 2.5 8.5 2.5C5.45228 2.5 3 4.95228 3 8C3 11.0477 5.45228 13.5 8.5 13.5C10.2023 13.5 11.7457 12.7171 12.8191 11.3753C13.1641 10.944 13.7934 10.8741 14.2247 11.2191C14.656 11.5641 14.7259 12.1934 14.3809 12.6247C12.9372 14.4292 10.8263 15.5 8.5 15.5C4.34772 15.5 1 12.1523 1 8C1 3.84772 4.34772 0.5 8.5 0.5C10.1564 0.5 11.7168 1.04496 13 2.00147V1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V4C15 4.85228 14.3523 5.5 13.5 5.5H10.5C9.94771 5.5 9.5 5.05228 9.5 4.5C9.5 3.94772 9.94771 3.5 10.5 3.5H11.659Z",
-    fill: "currentColor"
-  })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5.5 7.63073V7.07008H6.67566V11H6.02566V7.63073H5.5Z",
-    fill: "currentColor"
-  })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.56085 8.98383C7.56085 8.36208 7.67013 7.87691 7.88868 7.5283C8.111 7.1761 8.49158 7 9.03042 7C9.56927 7 9.94797 7.1761 10.1665 7.5283C10.3888 7.87691 10.5 8.36208 10.5 8.98383C10.5 9.61276 10.3888 10.1051 10.1665 10.4609C9.94797 10.8131 9.56927 10.9892 9.03042 10.9892C8.49158 10.9892 8.111 10.8131 7.88868 10.4609C7.67013 10.1051 7.56085 9.61276 7.56085 8.98383ZM9.86695 8.98383C9.86695 8.69272 9.84623 8.44654 9.80478 8.24528C9.7671 8.04403 9.68797 7.8805 9.56738 7.75472C9.4468 7.62534 9.26782 7.56065 9.03042 7.56065C8.79303 7.56065 8.61405 7.62534 8.49346 7.75472C8.37288 7.8805 8.29187 8.04403 8.25042 8.24528C8.21274 8.44654 8.1939 8.69272 8.1939 8.98383C8.1939 9.28571 8.21274 9.53908 8.25042 9.74394C8.2881 9.94879 8.36723 10.1141 8.48781 10.2399C8.61216 10.3657 8.79303 10.4286 9.03042 10.4286C9.26782 10.4286 9.4468 10.3657 9.56738 10.2399C9.69173 10.1141 9.77275 9.94879 9.81043 9.74394C9.84811 9.53908 9.86695 9.28571 9.86695 8.98383Z",
-    fill: "currentColor"
+    d: "M11.659 3.5c-.918-.64-2.008-1-3.159-1A5.487 5.487 0 0 0 3 8c0 3.048 2.452 5.5 5.5 5.5 1.702 0 3.246-.783 4.32-2.125a1 1 0 1 1 1.56 1.25C12.938 14.429 10.827 15.5 8.5 15.5A7.487 7.487 0 0 1 1 8C1 3.848 4.348.5 8.5.5c1.656 0 3.217.545 4.5 1.501V1a1 1 0 1 1 2 0v3c0 .852-.648 1.5-1.5 1.5h-3a1 1 0 1 1 0-2h1.159Z",
+    clipRule: "evenodd"
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.5 7.63v-.56h1.176V11h-.65V7.63H5.5ZM7.56 8.984c0-.622.11-1.107.329-1.456C8.11 7.176 8.492 7 9.03 7c.54 0 .918.176 1.136.528.223.349.334.834.334 1.456 0 .629-.111 1.121-.334 1.477-.218.352-.597.528-1.136.528-.538 0-.919-.176-1.141-.528-.219-.356-.328-.848-.328-1.477Zm2.307 0c0-.291-.02-.537-.062-.739a.94.94 0 0 0-.238-.49c-.12-.13-.3-.194-.537-.194-.237 0-.416.064-.537.194a.975.975 0 0 0-.243.49 4.093 4.093 0 0 0-.056.739c0 .302.019.555.056.76.038.205.117.37.238.496.124.126.305.189.542.189.238 0 .417-.063.537-.19a.922.922 0 0 0 .243-.495c.038-.205.057-.458.057-.76Z"
   })));
 };
 
-var _path$b, _path2$4, _path3;
+var _path$b, _path2$3;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 var SvgBackSecondsFill = function SvgBackSecondsFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.34099 3.5C5.25886 2.85974 6.34919 2.5 7.5 2.5C10.5477 2.5 13 4.95228 13 8C13 11.0477 10.5477 13.5 7.5 13.5C5.79771 13.5 4.25432 12.7171 3.18087 11.3753C2.83586 10.944 2.20657 10.8741 1.7753 11.2191C1.34404 11.5641 1.27412 12.1934 1.61913 12.6247C3.06275 14.4292 5.17372 15.5 7.5 15.5C11.6523 15.5 15 12.1523 15 8C15 3.84772 11.6523 0.5 7.5 0.5C5.84359 0.5 4.28318 1.04496 3 2.00147V1C3 0.447715 2.55229 0 2 0C1.44771 0 1 0.447715 1 1V4C1 4.85228 1.64772 5.5 2.5 5.5H5.5C6.05229 5.5 6.5 5.05228 6.5 4.5C6.5 3.94772 6.05229 3.5 5.5 3.5H4.34099Z",
-    fill: "currentColor"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5.5 7.63073V7.07008H6.67566V11H6.02566V7.63073H5.5Z",
-    fill: "currentColor"
-  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.56085 8.98383C7.56085 8.36208 7.67013 7.87691 7.88868 7.5283C8.111 7.1761 8.49158 7 9.03042 7C9.56927 7 9.94797 7.1761 10.1665 7.5283C10.3888 7.87691 10.5 8.36208 10.5 8.98383C10.5 9.61276 10.3888 10.1051 10.1665 10.4609C9.94797 10.8131 9.56927 10.9892 9.03042 10.9892C8.49158 10.9892 8.111 10.8131 7.88868 10.4609C7.67013 10.1051 7.56085 9.61276 7.56085 8.98383ZM9.86695 8.98383C9.86695 8.69272 9.84623 8.44654 9.80478 8.24528C9.7671 8.04403 9.68797 7.8805 9.56738 7.75472C9.4468 7.62534 9.26782 7.56065 9.03042 7.56065C8.79303 7.56065 8.61405 7.62534 8.49346 7.75472C8.37288 7.8805 8.29187 8.04403 8.25042 8.24528C8.21274 8.44654 8.1939 8.69272 8.1939 8.98383C8.1939 9.28571 8.21274 9.53908 8.25042 9.74394C8.2881 9.94879 8.36723 10.1141 8.48781 10.2399C8.61216 10.3657 8.79303 10.4286 9.03042 10.4286C9.26782 10.4286 9.4468 10.3657 9.56738 10.2399C9.69173 10.1141 9.77275 9.94879 9.81043 9.74394C9.84811 9.53908 9.86695 9.28571 9.86695 8.98383Z",
-    fill: "currentColor"
+    d: "M4.341 3.5c.918-.64 2.008-1 3.159-1C10.548 2.5 13 4.952 13 8s-2.452 5.5-5.5 5.5c-1.702 0-3.246-.783-4.32-2.125a1 1 0 1 0-1.56 1.25C3.062 14.429 5.173 15.5 7.5 15.5c4.152 0 7.5-3.348 7.5-7.5S11.652.5 7.5.5A7.507 7.507 0 0 0 3 2.001V1a1 1 0 1 0-2 0v3c0 .852.648 1.5 1.5 1.5h3a1 1 0 1 0 0-2H4.341Z",
+    clipRule: "evenodd"
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.5 7.63v-.56h1.176V11h-.65V7.63H5.5ZM7.56 8.984c0-.622.11-1.107.329-1.456C8.11 7.176 8.492 7 9.03 7c.54 0 .918.176 1.136.528.223.349.334.834.334 1.456 0 .629-.111 1.121-.334 1.477-.218.352-.597.528-1.136.528-.538 0-.919-.176-1.141-.528-.219-.356-.328-.848-.328-1.477Zm2.307 0c0-.291-.02-.537-.062-.739a.94.94 0 0 0-.238-.49c-.12-.13-.3-.194-.537-.194-.237 0-.416.064-.537.194a.975.975 0 0 0-.243.49 4.093 4.093 0 0 0-.056.739c0 .302.019.555.056.76.038.205.117.37.238.496.124.126.305.189.542.189.238 0 .417-.063.537-.19a.922.922 0 0 0 .243-.495c.038-.205.057-.458.057-.76Z"
   })));
 };
 
-var _path$a, _path2$3;
+var _path$a;
 function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgPreviousFill = function SvgPreviousFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    focusable: "false",
     viewBox: "0 0 24 24"
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M2.75 20C2.75 20.5523 3.19772 21 3.75 21C4.30228 21 4.75 20.5523 4.75 20L4.75 4C4.75 3.44772 4.30229 3 3.75 3C3.19772 3 2.75 3.44772 2.75 4V20Z",
-    fill: "currentColor"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M20.75 19.0526C20.75 20.4774 19.1383 21.305 17.9803 20.4748L7.51062 12.9682C6.50574 12.2477 6.54467 10.7407 7.5854 10.073L18.0551 3.35665C19.2198 2.60946 20.75 3.44583 20.75 4.82961L20.75 19.0526Z",
-    fill: "currentColor"
+    fill: "currentColor",
+    d: "M2.75 20a1 1 0 1 0 2 0V4a1 1 0 1 0-2 0v16ZM20.75 19.053c0 1.424-1.612 2.252-2.77 1.422L7.51 12.968a1.75 1.75 0 0 1 .075-2.895l10.47-6.716c1.165-.748 2.695.089 2.695 1.473v14.223Z"
   })));
 };
 
@@ -4235,16 +4092,14 @@ var SvgVolumeMutedFill = function SvgVolumeMutedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
-    d: "M11.5 10l4-4m-4 0l4 4"
+    d: "m11.5 10 4-4m-4 0 4 4"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 011.71.71V14.3a.986.986 0 01-1 .99z"
+    d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 0 1 1.71.71V14.3a.986.986 0 0 1-1 .99z"
   })));
 };
 
@@ -4254,12 +4109,10 @@ var SvgVolumeUnmutedFill = function SvgVolumeUnmutedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 011.71.71V14.3a.986.986 0 01-1 .99z"
+    d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 0 1 1.71.71V14.3a.986.986 0 0 1-1 .99z"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -4315,12 +4168,10 @@ var SvgMaximizeFill = function SvgMaximizeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M16 4.29V1c0-.55-.45-1-1-1h-3.29c-.45 0-.67.54-.35.85l3.79 3.79c.31.32.85.1.85-.35zM0 11.71V15c0 .55.45 1 1 1h3.29c.45 0 .67-.54.35-.85L.85 11.36a.495.495 0 00-.85.35zm0-7.42V1c0-.55.45-1 1-1h3.29c.45 0 .67.54.35.85L.85 4.65A.5.5 0 010 4.29zm16 7.42V15c0 .55-.45 1-1 1h-3.29c-.45 0-.67-.54-.35-.85l3.79-3.79c.31-.32.85-.1.85.35z"
+    d: "M16 4.29V1c0-.55-.45-1-1-1h-3.29c-.45 0-.67.54-.35.85l3.79 3.79c.31.32.85.1.85-.35zM0 11.71V15c0 .55.45 1 1 1h3.29c.45 0 .67-.54.35-.85L.85 11.36a.495.495 0 0 0-.85.35zm0-7.42V1c0-.55.45-1 1-1h3.29c.45 0 .67.54.35.85L.85 4.65A.5.5 0 0 1 0 4.29zm16 7.42V15c0 .55-.45 1-1 1h-3.29c-.45 0-.67-.54-.35-.85l3.79-3.79c.31-.32.85-.1.85.35z"
   })));
 };
 
@@ -4376,7 +4227,7 @@ const ControlsWrapper = styled__default["default"].div `
 const StyledProgress = styled__default["default"](Progress) `
   width: 100%;
   border-radius: 0;
-  color: ${({ theme }) => theme.palette.kale[400]};
+  color: ${({ theme }) => theme.palette.kale[700]};
   cursor: pointer;
   > div {
     border-radius: 0;
@@ -4594,12 +4445,10 @@ var SvgExit = function SvgExit(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
-    d: "M3 15.93c-.23 0-.45-.08-.64-.23l-2-1.67a.987.987 0 01-.36-.76V2.73c0-.3.13-.58.36-.77l2-1.67c.3-.24.71-.29 1.06-.13a1 1 0 01.58.91v13.87a1 1 0 01-.58.91c-.13.05-.28.08-.42.08zM12 11V5c0-.45.54-.67.85-.35L15.5 7.3c.39.39.39 1.02 0 1.41l-2.65 2.65A.5.5 0 0112 11z"
+    d: "M3 15.93c-.23 0-.45-.08-.64-.23l-2-1.67a.987.987 0 0 1-.36-.76V2.73c0-.3.13-.58.36-.77l2-1.67c.3-.24.71-.29 1.06-.13a1 1 0 0 1 .58.91v13.87a1 1 0 0 1-.58.91c-.13.05-.28.08-.42.08zM12 11V5c0-.45.54-.67.85-.35L15.5 7.3c.39.39.39 1.02 0 1.41l-2.65 2.65A.5.5 0 0 1 12 11z"
   })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -4612,16 +4461,15 @@ var _path$5;
 function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgThumbsUp = function SvgThumbsUp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#68737D",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.5 15C14.2828 15 14.8192 11.8284 15 7.5C15 7.22386 14.7761 7 14.5 7H9.5C9.22386 7 9 6.77614 9 6.5V2C9 1.44772 8.55229 1 8 1C7.44772 1 7 1.44772 7 2C7 4.97341 6.19918 6.46065 5.02719 6.8454C5.01015 6.85409 4.99957 6.87174 5 6.9L4.99891 15C4.99927 15 13.5 15 13.5 15ZM10 6H14.5C15.3284 6 16 6.67157 15.9996 7.52082C15.7692 13.0486 15.2701 16 13.5 16L5.03301 15.9989C4.75408 16.0174 4.48075 15.9146 4.28308 15.7169C4.08542 15.5193 3.98264 15.2459 4 15L4.00008 6.90914C3.99274 6.50762 4.21507 6.13707 4.64189 5.92566C5.41645 5.66747 6 4.58373 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2V6ZM1 7V15H2V7H1ZM1 6H2C2.55228 6 3 6.44772 3 7V15C3 15.5523 2.55228 16 2 16H1C0.447715 16 0 15.5523 0 15V7C0 6.44772 0.447715 6 1 6Z",
-    fill: "#68737D"
+    d: "M13.5 15c.783 0 1.32-3.172 1.5-7.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 1-.5-.5V2a1 1 0 1 0-2 0c0 2.973-.8 4.46-1.973 4.845C5.01 6.855 5 6.872 5 6.9L4.999 15H13.5ZM10 6h4.5c.828 0 1.5.672 1.5 1.52-.23 5.529-.73 8.48-2.5 8.48l-8.467-.001a.97.97 0 0 1-.75-.282A.95.95 0 0 1 4 15V6.91c-.007-.402.215-.773.642-.984C5.416 5.667 6 4.584 6 2a2 2 0 1 1 4 0v4ZM1 7v8h1V7H1Zm0-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -4631,9 +4479,7 @@ var SvgLockLockedFill = function SvgLockLockedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
+    height: 16
   }, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 12,
     height: 9,
@@ -4645,7 +4491,7 @@ var SvgLockLockedFill = function SvgLockLockedFill(props) {
   })), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
-    d: "M4.5 7.5V4a3.5 3.5 0 017 0v3.5"
+    d: "M4.5 7.5V4a3.5 3.5 0 0 1 7 0v3.5"
   })));
 };
 
@@ -4724,7 +4570,7 @@ const StyledItem = styled__default["default"].li `
   &:hover,
   &:focus,
   &:active {
-    background-color: ${theme.palette.kale[100]};
+    background-color: ${getColor(props.theme.colors.primaryHue, 600, undefined, 0.08)};
     color: ${props.isDanger ? theme.palette.red[500] : theme.palette.grey[800]};
   }`};
 
@@ -4758,15 +4604,14 @@ var _path$3;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgQuestionMark = function SvgQuestionMark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "currentColor"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M7.99997 11.5C8.55226 11.5 8.99997 11.0523 8.99997 10.5V9.4C8.99997 8.83787 9.33361 8.32072 9.92997 7.948C11.3791 7.15957 12.2479 5.53522 11.9883 3.84794C11.7161 2.21413 10.3858 0.883851 8.76437 0.613605C6.74482 0.234732 4.81137 1.36258 4.24419 3.20591C4.08177 3.73378 4.37802 4.29336 4.90589 4.45578C5.43375 4.6182 5.99333 4.32195 6.15575 3.79409C6.41982 2.93586 7.36323 2.38554 8.41568 2.58287C9.2141 2.71615 9.88382 3.38587 10.0136 4.1644C10.139 4.98036 9.70294 5.79565 8.92112 6.2221C7.72579 6.96712 6.99997 8.09213 6.99997 9.4V10.5C6.99997 11.0523 7.44769 11.5 7.99997 11.5ZM7.99997 15.5C8.8284 15.5 9.49997 14.8284 9.49997 14C9.49997 13.1716 8.8284 12.5 7.99997 12.5C7.17155 12.5 6.49997 13.1716 6.49997 14C6.49997 14.8284 7.17155 15.5 7.99997 15.5Z"
+    d: "M8 11.5a1 1 0 0 0 1-1V9.4c0-.562.334-1.08.93-1.452 1.45-.788 2.318-2.413 2.058-4.1C11.716 2.214 10.386.884 8.764.614c-2.02-.38-3.953.749-4.52 2.592a1 1 0 0 0 1.912.588c.264-.858 1.207-1.408 2.26-1.211.798.133 1.468.803 1.598 1.581.125.816-.311 1.632-1.093 2.058C7.726 6.967 7 8.092 7 9.4v1.1a1 1 0 0 0 1 1Zm0 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -4774,16 +4619,15 @@ var _path$2;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgCopy = function SvgCopy(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 16,
-    viewBox: "0 0 12 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#003A57",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.625 10C2.83211 10 3 10.2239 3 10.5C3 10.7761 2.83211 11 2.625 11H0.75C0.335786 11 0 10.5523 0 10V1C0 0.447715 0.335786 0 0.75 0H7.5C7.91421 0 8.25 0.447715 8.25 1V3.5C8.25 3.77614 8.08211 4 7.875 4C7.66789 4 7.5 3.77614 7.5 3.5V1H0.75V10H2.625ZM4.5 6V15H11.25V6H4.5ZM4.5 5H11.25C11.6642 5 12 5.44772 12 6V15C12 15.5523 11.6642 16 11.25 16H4.5C4.08579 16 3.75 15.5523 3.75 15V6C3.75 5.44772 4.08579 5 4.5 5Z",
-    fill: "#003A57"
+    d: "M2.625 10c.207 0 .375.224.375.5s-.168.5-.375.5H.75C.336 11 0 10.552 0 10V1c0-.552.336-1 .75-1H7.5c.414 0 .75.448.75 1v2.5c0 .276-.168.5-.375.5S7.5 3.776 7.5 3.5V1H.75v9h1.875ZM4.5 6v9h6.75V6H4.5Zm0-1h6.75c.414 0 .75.448.75 1v9c0 .552-.336 1-.75 1H4.5c-.414 0-.75-.448-.75-1V6c0-.552.336-1 .75-1Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -4791,33 +4635,24 @@ var _path$1;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgInfoFill = function SvgInfoFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "currentColor"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M7.5 16C3.36 16 0 12.64 0 8.5C0 4.36 3.36 1 7.5 1C11.64 1 15 4.36 15 8.5C15 12.64 11.64 16 7.5 16ZM7 12.5C7 12.78 7.22 13 7.5 13C7.78 13 8 12.78 8 12.5V8C8 7.72 7.78 7.5 7.5 7.5C7.22 7.5 7 7.72 7 8V12.5ZM7.5 4C6.95 4 6.5 4.45 6.5 5C6.5 5.55 6.95 6 7.5 6C8.05 6 8.5 5.55 8.5 5C8.5 4.45 8.05 4 7.5 4Z"
+    d: "M7.5 16C3.36 16 0 12.64 0 8.5 0 4.36 3.36 1 7.5 1 11.64 1 15 4.36 15 8.5c0 4.14-3.36 7.5-7.5 7.5ZM7 12.5c0 .28.22.5.5.5s.5-.22.5-.5V8c0-.28-.22-.5-.5-.5S7 7.72 7 8v4.5ZM7.5 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1Z",
+    clipRule: "evenodd"
   })));
 };
 
-const StyledButton$2 = styled__default["default"](Button) `
+const StyledButton$1 = styled__default["default"](Button) `
   color: ${(props) => props.theme.palette.grey[800]};
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   padding-left: 0;
   justify-content: flex-start;
-
-  ${(props) => `
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: ${props.theme.palette.kale[100]};
-    color: ${props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800]};
-  }`};
 `;
-const PreviousButton = (props) => (jsxRuntime.jsxs(StyledButton$2, Object.assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] })));
+const PreviousButton = (props) => (jsxRuntime.jsxs(StyledButton$1, Object.assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] })));
 
 const UgParagraph = styled__default["default"](reactTypography.Paragraph) ``;
 /**
@@ -4831,18 +4666,18 @@ const getInitials = (name) => {
     return initials;
 };
 
-const StyledButton$1 = styled__default["default"](Button) `
+const StyledButton = styled__default["default"](Button) `
   ${(props) => `
   &:hover,
   &:focus,
   &:active {
-    background-color: ${props.theme.palette.kale[100]};
+    background-color: ${getColor(props.theme.colors.primaryHue, 600, undefined, 0.08)};
     color: ${props.isDanger
     ? props.theme.palette.red[500]
     : props.theme.palette.grey[800]};
   }`};
 `;
-const StyledFooterButton = styled__default["default"](StyledButton$1) `
+const StyledFooterButton = styled__default["default"](StyledButton) `
   color: ${(props) => props.theme.palette.grey[800]};
   padding-left: 0;
   justify-content: flex-start;
@@ -4879,22 +4714,21 @@ const HelpItem = (props) => {
     if (email.length > 24) {
         csmEmailCut = `${email.substring(0, 21)}...`;
     }
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, Object.assign({ isBasic: true, onClick: () => {
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, onClick: () => {
                                             var _a;
                                             copyToClipBoard();
                                             (_a = props.onCopyEmail) === null || _a === void 0 ? void 0 : _a.call(props);
-                                        }, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] }))] }));
+                                        }, size: "small" }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] }))] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { color: theme.palette.blue[600] }) }, { children: props.title })) }));
 };
 
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgEmpty = function SvgEmpty(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "#68737D",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "#68737D"
   }, props));
 };
 
@@ -4902,15 +4736,14 @@ var _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var SvgTranslationExists = function SvgTranslationExists(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
-    viewBox: "0 0 16 16",
-    fill: "#68737D",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "#68737D"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6 8.31C6.0087 8.47711 5.93254 8.63735 5.79747 8.73613C5.6624 8.83491 5.48662 8.85893 5.33 8.8C5 8.68 4.71 8.5 4.45 8.31C3.9 8.73 3.26 9 2.5 9C2.22 9 2 8.78 2 8.5C2 8.22 2.22 8 2.5 8C2.94 8 3.34 7.86 3.69 7.63C2.9 6.73 2.55 5.72 2.53 5.66C2.44 5.4 2.58 5.11 2.84 5.03C3.1 4.94 3.39 5.08 3.47 5.34C3.47 5.35 3.78 6.21 4.43 6.95C5.19 6.04 5.64 4.75 5.86 4H2.5C2.22 4 2 3.78 2 3.5C2 3.22 2.22 3 2.5 3H4V2.5C4 2.22 4.22 2 4.5 2C4.78 2 5 2.22 5 2.5V3H6.5C6.65 3 6.79 3.07 6.89 3.18C6.98 3.3 7.02 3.45 6.99 3.6C6.98 3.65 6.91 3.98 6.77 4.43C7.11 4.17 7.53 4 8 4H9V1C9 0.45 8.55 0 8 0H1C0.45 0 0 0.45 0 1V10C0 10.55 0.45 11 1 11H6V8.31ZM5.67 7.86C5.86 7.93 5.99 8.1 6 8.29V6.35C5.77 6.79 5.5 7.22 5.18 7.61C5.33 7.71 5.49 7.79 5.67 7.86ZM15 5H8C7.45 5 7 5.45 7 6V15C7 15.55 7.45 16 8 16H15C15.55 16 16 15.55 16 15V6C16 5.45 15.55 5 15 5ZM13.7 12.96C13.4459 13.0656 13.1538 12.9505 13.04 12.7L12.73 12H10.27L9.96 12.7C9.85 12.95 9.55 13.07 9.3 12.95C9.05 12.83 8.93 12.54 9.05 12.29L11.05 7.79C11.21 7.43 11.8 7.43 11.96 7.79L13.96 12.29C14.07 12.55 13.96 12.84 13.7 12.96ZM10.71 11H12.29L11.5 9.23L10.71 11Z"
+    d: "M6 8.31a.496.496 0 0 1-.67.49c-.33-.12-.62-.3-.88-.49C3.9 8.73 3.26 9 2.5 9c-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.44 0 .84-.14 1.19-.37-.79-.9-1.14-1.91-1.16-1.97-.09-.26.05-.55.31-.63.26-.09.55.05.63.31 0 .01.31.87.96 1.61.76-.91 1.21-2.2 1.43-2.95H2.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5H4v-.5c0-.28.22-.5.5-.5s.5.22.5.5V3h1.5c.15 0 .29.07.39.18.09.12.13.27.1.42-.01.05-.08.38-.22.83C7.11 4.17 7.53 4 8 4h1V1c0-.55-.45-1-1-1H1C.45 0 0 .45 0 1v9c0 .55.45 1 1 1h5V8.31Zm-.33-.45c.19.07.32.24.33.43V6.35c-.23.44-.5.87-.82 1.26.15.1.31.18.49.25ZM15 5H8c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1Zm-1.3 7.96a.51.51 0 0 1-.66-.26l-.31-.7h-2.46l-.31.7c-.11.25-.41.37-.66.25a.497.497 0 0 1-.25-.66l2-4.5c.16-.36.75-.36.91 0l2 4.5c.11.26 0 .55-.26.67ZM10.71 11h1.58l-.79-1.77-.79 1.77Z",
+    clipRule: "evenodd"
   })));
 };
 
@@ -4924,18 +4757,9 @@ const StyledButtonContainer = styled__default["default"].div `
     justify-content: flex-start;
   }
 `;
-const StyledButton = styled__default["default"](Button) `
-  ${(props) => `
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: ${props.theme.palette.kale[100]};
-    color: ${props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800]};
-  }`};
-`;
 const LanguageItem = (props) => {
     var _a;
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map((key) => (jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, isStretched: true, value: key, onClick: () => props.onSelectLanguage(key) }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, Object.assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] })))) }) })] }));
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map((key) => (jsxRuntime.jsxs(Button, Object.assign({ isBasic: true, isStretched: true, value: key, onClick: () => props.onSelectLanguage(key) }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, Object.assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] })))) }) })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
 };
 
@@ -4948,7 +4772,7 @@ const CompanyHolder = styled__default["default"](SM) `
   text-transform: uppercase;
   margin-top: ${({ theme }) => theme.space.base * 2}px;
   margin-bottom: ${({ theme }) => theme.space.base * 4}px;
-  color: ${({ theme }) => theme.colors.primaryHue};
+  color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
 `;
 const UserDetails = styled__default["default"].div `
   margin-top: ${({ theme }) => theme.space.base * 4}px;
@@ -4964,11 +4788,6 @@ const StyledList = styled__default["default"].ul `
   padding: 0;
   margin: 0;
 `;
-styled__default["default"](Anchor) `
-  &:hover {
-    text-decoration: none;
-  }
-`;
 const UserMenu = (props) => {
     var _a;
     const [item, setActiveItem] = React.useState("");
@@ -5078,7 +4897,7 @@ const StyledTag = styled__default["default"](Tag) `
 const StyledSM = styled__default["default"](SM) `
   color: ${({ theme }) => theme.palette.grey[600]};
   span {
-    color: ${({ theme }) => theme.colors.primaryHue};
+    color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   }
 `;
 const SliderCounter = ({ current, total, }) => {
@@ -5319,7 +5138,7 @@ const Row = (props) => jsxRuntime.jsx(UgRow, Object.assign({}, props));
 const Cell = (props) => jsxRuntime.jsx(UgCell, Object.assign({}, props));
 const Caption = (props) => (jsxRuntime.jsx(reactTables.Caption, Object.assign({}, props)));
 
-const StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div) `
+const StyledAnimatedToggle = styled__default["default"].div `
   display: inline-block;
   float: right;
 `;
@@ -5356,16 +5175,8 @@ const UgGroupRow = styled__default["default"](reactTables.GroupRow) `
 `;
 const GroupRow = (props) => jsxRuntime.jsx(UgGroupRow, Object.assign({}, props));
 const GroupRowComponent = (props) => {
-    const toggleIconAnimation = reactSpring.useSpring({
-        config: { duration: 120 },
-        transform: props.group.items.length > 0
-            ? props.open
-                ? "rotate(180deg)"
-                : "rotate(0deg)"
-            : "rotate(0deg)",
-    });
     return (jsxRuntime.jsx(GroupRow, Object.assign({}, (props && props.group.items.length === 0 && { className: "empty" }), (props &&
-        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: toggleIconAnimation }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
+        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: { transform: props.open ? "rotate(180deg)" : "none" } }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
 };
 const AnimatedRow = styled__default["default"](Row) `
   &.render {
@@ -5403,10 +5214,10 @@ const StyledNavButton = styled__default["default"](reactButtons.Button) `
 
   ${({ theme, isSelected }) => isSelected &&
     `
-        color: ${theme.colors.primaryHue};
+        color: ${getColor(theme.colors.primaryHue, 600)};
         background-color: transparent;
         
-        border-color: ${theme.colors.primaryHue};
+        border-color: ${getColor(theme.colors.primaryHue, 600)};
         font-weight: ${theme.fontWeights.semibold};
     `}
 
@@ -5418,7 +5229,7 @@ const StyledNavButton = styled__default["default"](reactButtons.Button) `
 
   &:hover {
     background-color: transparent;
-    color: ${({ theme }) => theme.colors.primaryHue};
+    color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   }
 `;
 const StyledTabList = styled__default["default"].div `
@@ -5539,7 +5350,7 @@ const TooltipComponent = (props) => {
     return jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
 };
 const Tooltip = styled__default["default"](TooltipComponent) `
-  box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, reactTheming.getColor("neutralHue", 600, theme, 0.15))};
+  box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor("neutralHue", 600, theme, 0.15))};
 `;
 
 const StyledTooltipModal = styled__default["default"](reactModals.TooltipModal) `
@@ -5605,6 +5416,7 @@ exports.Breadcrumb = Breadcrumb;
 exports.BulletChart = BulletChart;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.CARD_COMPONENT_ID = CARD_COMPONENT_ID;
 exports.CHARTS_COLOR_PALETTE = CHARTS_COLOR_PALETTE;
 exports.CampaignCard = CampaignCard;
 exports.CampaignExperientialIcon = SvgCampaignExperiential;
@@ -5728,5 +5540,7 @@ exports.WaffleChart = WaffleChart;
 exports.XL = XL;
 exports.XXL = XXL;
 exports.XXXL = XXXL;
+exports.cardCmponentStyle = cardCmponentStyle;
+exports.getColor = getColor;
 exports.theme = theme;
 exports.useToast = useToast;