@appquality/unguess-design-system 3.0.11-alpha → 3.1.0

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');
@@ -69,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",
@@ -97,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 = () => {
@@ -229,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%);`,
 };
 
@@ -272,28 +278,89 @@ 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: palette.grey[800], primaryHue: "blue", dangerHue: "red", warningHue: "yellow", successHue: "green", neutralHue: "grey", infoHue: "azure", chromeHue: "blue", accentHue: "kale" });
+
+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({}, 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" }) }), "notifications.notification": ({ type, isPrimary, }) => {
+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), { "text.primary": () => ({
+        color: getColor(colors.primaryHue, 600),
+    }), "text.success": () => ({
+        color: getColor(colors.successHue, 700),
+    }), "text.warning": () => ({
+        color: getColor(colors.warningHue, 700),
+    }), "text.danger": () => ({
+        color: getColor(colors.dangerHue, 700),
+    }), "navigation.hoverableItem": ({ isCurrent }) => {
+        return Object.assign({ "border-top-left-radius": "24px", "border-bottom-left-radius": "24px", color: getColor(colors.primaryHue, 600), "font-weight": fontWeights.medium, "&:hover, &.hover": {
+                "background-color": getColor(colors.primaryHue, 600, undefined, 0.08),
+                color: getColor(colors.primaryHue, 700),
+            }, "&:active, &.active": {
+                "background-color": getColor(colors.primaryHue, 600, undefined, 0.2),
+                color: getColor(colors.primaryHue, 700),
+            }, "&.isCurrent": {
+                color: getColor(colors.primaryHue, 700),
+                "font-weight": fontWeights.semibold,
+                "background-color": getColor(colors.primaryHue, 600, undefined, 0.08),
+            } }, (isCurrent && {
+            color: getColor(colors.primaryHue, 700),
+            "font-weight": fontWeights.semibold,
+            "background-color": getColor(colors.primaryHue, 600, undefined, 0.08),
+        }));
+    }, "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,
@@ -352,63 +419,123 @@ 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,
+                color: getColor(colors.primaryHue, 600),
                 cursor: "pointer",
             }
             : {})), (checked
             ? {
                 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],
+                color: "white",
+                "& svg": {
+                    color: "white",
+                },
             },
             "&: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],
+                "& svg": {
+                    color: "white",
                 },
-            };
-        }
-        return {};
+            },
+        })), (disabled && { pointerEvents: "none" }));
+    }, "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: {
@@ -570,16 +697,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.
@@ -590,11 +707,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;
@@ -628,37 +741,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>
@@ -735,9 +817,10 @@ function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : func
 var SvgUgSquare = function SvgUgSquare(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, 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"
@@ -749,9 +832,10 @@ function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : func
 var SvgUgCircle = function SvgUgCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, 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"
@@ -763,9 +847,10 @@ function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : func
 var SvgUgTriangle = function SvgUgTriangle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, 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"
@@ -777,9 +862,10 @@ function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : func
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, props), _rect$4 || (_rect$4 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
@@ -802,9 +888,10 @@ function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : func
 var SvgCampaignLocked = function SvgCampaignLocked(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, props), _rect$3 || (_rect$3 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
@@ -828,9 +915,10 @@ function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : func
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, props), _rect$2 || (_rect$2 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
@@ -856,9 +944,10 @@ function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : func
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, props), _rect$1 || (_rect$1 = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 24,
     height: 24,
@@ -881,9 +970,10 @@ function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : func
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, 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",
@@ -905,9 +995,10 @@ function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : func
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24"
   }, 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",
@@ -988,18 +1079,39 @@ CardThumbnail.defaultProps = {
 /**
  *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
  */
-const SM = (props) => jsxRuntime.jsx(reactTypography.SM, Object.assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props));
-const MD = (props) => jsxRuntime.jsx(reactTypography.MD, Object.assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props));
-const LG = (props) => jsxRuntime.jsx(reactTypography.LG, Object.assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props));
-const XL = (props) => jsxRuntime.jsx(reactTypography.XL, Object.assign({}, props));
-const XXL = (props) => jsxRuntime.jsx(reactTypography.XXL, Object.assign({}, props));
-const XXXL = (props) => jsxRuntime.jsx(reactTypography.XXXL, Object.assign({}, props));
+const SM = styled__default["default"](reactTypography.SM) `
+  ${p => p.color && `color: ${p.color}`};
+`;
+const MD = styled__default["default"](reactTypography.MD) `
+  ${p => p.color && `color: ${p.color}`};
+`;
+const LG = styled__default["default"](reactTypography.LG) `
+  ${p => p.color && `color: ${p.color}`};
+`;
+const XL = styled__default["default"](reactTypography.XL) `
+${p => p.color && `color: ${p.color}`};
+`;
+const XXL = styled__default["default"](reactTypography.XXL) `
+${p => p.color && `color: ${p.color}`};
+`;
+const XXXL = styled__default["default"](reactTypography.XXXL) `
+  color: ${p => p.color || p.theme.palette.blue[600]};
+`;
+const TextLabel = styled__default["default"](reactTypography.SM) `
+  color: ${p => p.theme.palette.grey[600]};
+`;
+const TextDescription = (_a) => {
+    var { isSmall } = _a, props = __rest(_a, ["isSmall"]);
+    return ({ isSmall }
+        ? jsxRuntime.jsx(SM, Object.assign({ color: theme.palette.grey[700] }, props))
+        : jsxRuntime.jsx(MD, Object.assign({ color: theme.palette.grey[700] }, props)));
+};
 
 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};
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   margin-top: ${({ theme }) => theme.space.xxs};
 `;
@@ -1052,7 +1164,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;
@@ -1069,6 +1180,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.
@@ -1144,7 +1256,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) `
@@ -1245,27 +1357,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,
@@ -1364,7 +1476,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: {},
@@ -1374,57 +1486,24 @@ const DEFAULT_CHARTS_THEME = {
         tableCellValue: {},
     },
 };
-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",
-    violet: "#573ECF",
-    orchidea: "#B75CAD",
-    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,
-];
-[
-    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
+    theme.palette.red[900],
+    theme.palette.yellow[700],
+    theme.palette.azure[900],
+    theme.palette.teal[700],
+    theme.palette.grey[200]
 ];
-[
-    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 `
@@ -1483,7 +1562,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);
@@ -1542,7 +1621,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 }));
@@ -1553,7 +1632,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: "",
@@ -1561,10 +1640,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, }) => {
@@ -1585,7 +1664,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,
@@ -1609,7 +1688,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,
@@ -1631,7 +1710,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"]
@@ -1641,7 +1720,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);
     }
@@ -1718,7 +1797,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);
                         }
@@ -1748,7 +1827,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({
@@ -1756,7 +1835,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 => {
@@ -1965,11 +2044,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};
     }
   `}
 `;
@@ -2265,8 +2344,9 @@ function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : func
 var SvgBoldFill = function SvgBoldFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 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 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"
@@ -2278,8 +2358,9 @@ function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : func
 var SvgItalicFill = function SvgItalicFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2294,8 +2375,9 @@ function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : func
 var SvgQuoteFill = function SvgQuoteFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 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"
@@ -2313,8 +2395,9 @@ function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : func
 var SvgH1Fill = function SvgH1Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     d: "M0 0h16v16H0z"
@@ -2335,8 +2418,9 @@ function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : func
 var SvgH2Fill = function SvgH2Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     d: "M0 0h16v16H0z"
@@ -2357,8 +2441,9 @@ function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : func
 var SvgH3Fill = function SvgH3Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     d: "M0 0h16v16H0z"
@@ -2409,20 +2494,10 @@ const Header$1 = styled__default["default"].div `
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 `;
 const Title$1 = styled__default["default"](MD) `
-  ${({ validation, theme }) => {
-    if (validation === "success") {
-        return `color: ${theme.colors.successHue};`;
-    }
-    else if (validation === "warning") {
-        return `color: ${theme.colors.warningHue};`;
-    }
-    else if (validation === "error") {
-        return `color: ${theme.palette.dangerHue};`;
-    }
-    else {
-        return `color: ${theme.colors.primaryHue};`;
-    }
-}}
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+  ${props => props.validation === "success" && reactTheming.retrieveComponentStyles("text.success", props)}
+  ${props => props.validation === "warning" && reactTheming.retrieveComponentStyles("text.warning", props)}
+  ${props => props.validation === "error" && reactTheming.retrieveComponentStyles("text.danger", props)}
 `;
 const EditorHeader = (props) => {
     const { title, validation } = props;
@@ -2442,29 +2517,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;
@@ -2562,7 +2616,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) ``;
@@ -2593,8 +2647,9 @@ function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : func
 var SvgNotesStroke = function SvgNotesStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -2639,6 +2694,7 @@ const Wrapper$1 = styled__default["default"].div `
 
     svg {
       margin-left: ${({ theme }) => theme.space.xs};
+      flex-shrink: 0;
     }
   }
 `;
@@ -2680,7 +2736,7 @@ const InputItem = (props) => {
             input.focus();
         }
     }, [isEditing, input]);
-    return isEditing ? (jsxRuntime.jsx(StyledInput, Object.assign({ ref: setInput }, props, { style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }))) : (jsxRuntime.jsxs(StyledText$1, Object.assign({ isBold: true, style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, { width: 50 })] })));
+    return isEditing ? (jsxRuntime.jsx(StyledInput, Object.assign({ ref: setInput }, props, { style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }))) : (jsxRuntime.jsxs(StyledText$1, Object.assign({ isBold: true, style: Object.assign(Object.assign({ fontWeight: 500 }, size), style) }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, {})] })));
 };
 InputToggle.Item = InputItem;
 InputToggle.Label = StyledLabel;
@@ -2713,9 +2769,10 @@ function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : func
 var SvgCheckLg = function SvgCheckLg(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "#68737D"
+    width: "1em",
+    height: "1em",
+    fill: "#68737D",
+    viewBox: "0 0 16 16"
   }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     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",
@@ -2738,7 +2795,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 }) => theme.palette.blue[600]};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2755,7 +2812,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) ``;
@@ -2914,8 +2971,9 @@ function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : func
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     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"
@@ -2969,8 +3027,9 @@ function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : func
 var SvgMenuStroke = function SvgMenuStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -2992,7 +3051,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 }))))] })] })));
 };
@@ -3012,30 +3071,30 @@ 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};
   pointer-events: none;
   font-family: ${({ theme }) => theme.fonts.system};
   @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
     display: none;
   }
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
 `;
 const DropdownItem = styled__default["default"](reactChrome.HeaderItem) `
   margin-right: auto;
   margin-left: -8px;
-  color: ${({ theme }) => theme.colors.primaryHue};
   font-family: ${({ theme }) => theme.fonts.system};
   z-index: 2;
   @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
     display: none;
   }
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
 `;
 const MenuItem$1 = styled__default["default"](reactChrome.HeaderItem) `
-  color: ${({ theme }) => theme.colors.primaryHue};
   position: absolute;
   left: 0;
   @media (min-width: ${({ theme }) => theme.breakpoints.md}) {
     display: none;
   }
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
 `;
 const BrandItem = (props) => {
     const { menuLabel, toggleMenu } = props, rest = __rest(props, ["menuLabel", "toggleMenu"]);
@@ -3081,7 +3140,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
@@ -3098,30 +3157,11 @@ 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"]};
-`;
 const UgNavItem$2 = styled__default["default"](reactChrome.NavItem) `
-  border-top-left-radius: ${(props) => props.theme.space.base * 6}px;
-  border-bottom-left-radius: ${(props) => props.theme.space.base * 6}px;
-  font-family: ${({ theme }) => theme.fonts.system};
   ${sidebarNavItemExpanded}
   ${(props) => !props.isExpanded && sidebarNavItemHidden}
-  ${(props) => props.isCurrent && SelectedItemStyle}
-  &:focus {
-    ${SelectedItemStyle}
-  }
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.kale["200"]};
-  }
-  color: ${(props) => props.theme.colors.primaryHue};
-  font-weight: ${(props) => props.theme.fontWeights.medium};
-  ${(props) => props.isCurrent &&
-    `
-    color: ${props.theme.palette.blue["700"]};
-    font-weight: ${props.theme.fontWeights.semibold};
-  `}
   margin: ${({ theme }) => theme.space.xs} 0;
+  ${(props) => reactTheming.retrieveComponentStyles("navigation.hoverableItem", props)};
 `;
 const NavItem = React.forwardRef((props, ref) => jsxRuntime.jsx(UgNavItem$2, Object.assign({ ref: ref }, props)));
 
@@ -3135,8 +3175,9 @@ function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : func
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     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"
@@ -3148,8 +3189,9 @@ function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : func
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     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"
@@ -3171,7 +3213,7 @@ const StyledToggle = styled__default["default"](IconButton) `
   }
 `;
 const NavToggle = (props) => {
-    return (jsxRuntime.jsx(StyledToggle, Object.assign({}, props, { className: "toggle-navigation", isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
+    return (jsxRuntime.jsx(StyledToggle, Object.assign({}, props, { className: "toggle-navigation", isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, {})) : (jsxRuntime.jsx(SvgChevronRightStroke, {})) })));
 };
 
 const UgNavItem$1 = styled__default["default"](reactChrome.NavItem) `
@@ -3224,8 +3266,9 @@ function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : func
 var SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 26,
-    height: 26
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 26 26"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     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"
@@ -3237,8 +3280,9 @@ function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : func
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 26,
-    height: 26
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 26 26"
   }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "home-fill-styled_svg__a"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
@@ -3259,7 +3303,9 @@ 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"
+    viewBox: "0 0 32 32",
+    width: "1em",
+    height: "1em"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#token_svg__a)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -3296,8 +3342,9 @@ function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : func
 var SvgFolderIcon = function SvgFolderIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 12 12"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
@@ -3311,9 +3358,10 @@ function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : func
 var SvgTemplates = function SvgTemplates(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 26,
-    height: 26,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 26 26"
   }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#templates_svg__a)",
     fillRule: "evenodd",
@@ -3339,9 +3387,10 @@ function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : func
 var SvgTemplatesActive = function SvgTemplatesActive(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 26,
-    height: 26,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 26 26"
   }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#templates-active_svg__a)",
     fillRule: "evenodd",
@@ -3390,10 +3439,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;
@@ -3408,10 +3453,10 @@ 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};
+    fill: ${getColor(theme.colors.primaryHue, 600)};
     font-weight: ${theme.fontWeights.medium};
   `}
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
 `;
 AccordionItem.Panel = AccordionItemPanel;
 AccordionItem.Header = AccordionItemHeader;
@@ -3582,7 +3627,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"] })))] }));
 };
 
@@ -3591,9 +3636,10 @@ function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : func
 var SvgPlus = function SvgPlus(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16"
   }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#68737D",
     fillRule: "evenodd",
@@ -3794,12 +3840,12 @@ const MainOverline = styled__default["default"](MD) `
   margin-bottom: ${({ theme }) => theme.space.md};
 `;
 const MainTitle = styled__default["default"].h1 `
-  color: ${({ theme }) => theme.colors.primaryHue};
   font-size: ${({ theme }) => theme.fontSizes.xxxl};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   line-height: ${({ theme }) => theme.lineHeights.xxxl};
   width: 100%;
   margin-bottom: ${({ theme }) => theme.space.sm};
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
 `;
 const MainDescription = styled__default["default"](LG) `
   color: ${({ theme }) => theme.palette.grey[600]};
@@ -3903,8 +3949,9 @@ function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : func
 var SvgPlayFill = function SvgPlayFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 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 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"
@@ -3916,8 +3963,9 @@ function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : func
 var SvgPauseFill = function SvgPauseFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "currentColor"
   }, /*#__PURE__*/React__namespace.createElement("rect", {
@@ -3942,9 +3990,10 @@ function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : func
 var SvgForwardSecondsFill = function SvgForwardSecondsFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16"
   }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
@@ -3961,9 +4010,10 @@ function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : func
 var SvgBackSecondsFill = function SvgBackSecondsFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16"
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
@@ -3980,8 +4030,8 @@ function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : func
 var SvgPreviousFill = function SvgPreviousFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
+    width: "1em",
+    height: "1em",
     viewBox: "0 0 24 24"
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
@@ -4058,7 +4108,7 @@ const ControlsGroupCenter = ({ videoRef, isPlaying, onPlayChange, }) => {
                 } }, { children: jsxRuntime.jsx(SvgBackSecondsFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, size: "large", onClick: handlePlay }, { children: isPlaying ? (jsxRuntime.jsx(SvgPauseFill, { style: { width: "24px", height: "24px" } })) : (jsxRuntime.jsx(SvgPlayFill, { style: { width: "24px", height: "24px" } })) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
                     onForward();
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgForwardSecondsFill, {}) })), jsxRuntime.jsx(Button, Object.assign({ isBright: true, isPill: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgForwardSecondsFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, isPill: true, onClick: (e) => {
                     const newSpeed = getNextPlaybackRate(playBackRate);
                     if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.playbackRate) {
                         setPlayBackRate(newSpeed);
@@ -4086,8 +4136,9 @@ function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : func
 var SvgVolumeMutedFill = function SvgVolumeMutedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -4103,8 +4154,9 @@ function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : func
 var SvgVolumeUnmutedFill = function SvgVolumeUnmutedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 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 0 1 1.71.71V14.3a.986.986 0 0 1-1 .99z"
@@ -4162,8 +4214,9 @@ function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : func
 var SvgMaximizeFill = function SvgMaximizeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 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 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"
@@ -4222,7 +4275,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;
@@ -4439,8 +4492,9 @@ function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : func
 var SvgExit = function SvgExit(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 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 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"
@@ -4457,9 +4511,10 @@ function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : func
 var SvgThumbsUp = function SvgThumbsUp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16"
   }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#68737D",
     fillRule: "evenodd",
@@ -4473,8 +4528,9 @@ function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : func
 var SvgLockLockedFill = function SvgLockLockedFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16"
   }, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
     width: 12,
     height: 9,
@@ -4565,7 +4621,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]};
   }`};
 
@@ -4600,9 +4656,10 @@ function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : func
 var SvgQuestionMark = function SvgQuestionMark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "currentColor"
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 16 16"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     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",
@@ -4615,9 +4672,10 @@ function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : func
 var SvgCopy = function SvgCopy(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 16,
-    fill: "none"
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 12 16"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#003A57",
     fillRule: "evenodd",
@@ -4631,9 +4689,10 @@ function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : func
 var SvgInfoFill = function SvgInfoFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "currentColor"
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 16 16"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     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",
@@ -4641,23 +4700,21 @@ var SvgInfoFill = function SvgInfoFill(props) {
   })));
 };
 
-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) ``;
+const UgParagraph = styled__default["default"](reactTypography.Paragraph) `
+  ${p => p.color && `
+    > div {
+      color: ${p.color};
+    }
+  `};
+`;
 /**
  *  Use Paragraph to render blocks of text with Garden styling.
  */
@@ -4669,18 +4726,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;
@@ -4717,11 +4774,11 @@ 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 })) }));
 };
 
@@ -4729,9 +4786,10 @@ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : func
 var SvgEmpty = function SvgEmpty(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "#68737D"
+    width: "1em",
+    height: "1em",
+    fill: "#68737D",
+    viewBox: "0 0 16 16"
   }, props));
 };
 
@@ -4740,9 +4798,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var SvgTranslationExists = function SvgTranslationExists(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "#68737D"
+    width: "1em",
+    height: "1em",
+    fill: "#68737D",
+    viewBox: "0 0 16 16"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     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",
@@ -4760,18 +4819,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] }))] }) })) }));
 };
 
@@ -4784,7 +4834,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};
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
 `;
 const UserDetails = styled__default["default"].div `
   margin-top: ${({ theme }) => theme.space.base * 4}px;
@@ -4800,11 +4850,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("");
@@ -4914,7 +4959,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};
+    ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
   }
 `;
 const SliderCounter = ({ current, total, }) => {
@@ -5052,7 +5097,9 @@ const Slider = (props) => {
     }, [current]);
     return (jsxRuntime.jsxs(SliderContextProvider, { children: [settings.counter && jsxRuntime.jsx(SliderCounter, { current: current, total: slides }), jsxRuntime.jsx(StyledSlick, Object.assign({}, settings, { beforeChange: updateSlide }))] }));
 };
-Slider.Slide = Slide;
+Slider.Slide = Slide;
+Slider.PrevButton = PrevButton;
+Slider.NextButton = NextButton;
 
 const UgStep = styled__default["default"](reactAccordions.Stepper.Step) `
   svg {
@@ -5155,7 +5202,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"](web.animated.div) `
+const StyledAnimatedToggle = styled__default["default"].div `
   display: inline-block;
   float: right;
 `;
@@ -5192,16 +5239,8 @@ const UgGroupRow = styled__default["default"](reactTables.GroupRow) `
 `;
 const GroupRow = (props) => jsxRuntime.jsx(UgGroupRow, Object.assign({}, props));
 const GroupRowComponent = (props) => {
-    const toggleIconAnimation = web.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 {
@@ -5239,10 +5278,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};
     `}
 
@@ -5254,7 +5293,7 @@ const StyledNavButton = styled__default["default"](reactButtons.Button) `
 
   &:hover {
     background-color: transparent;
-    color: ${({ theme }) => theme.colors.primaryHue};
+    $
   }
 `;
 const StyledTabList = styled__default["default"].div `
@@ -5265,6 +5304,7 @@ const StyledTabPanel = styled__default["default"].div `
   display: ${({ hidden }) => (hidden ? "none" : "block")};
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
 `;
 const TabPanel = (_a) => {
     var { hidden, children } = _a, rest = __rest(_a, ["hidden", "children"]);
@@ -5375,7 +5415,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) `
@@ -5441,7 +5481,7 @@ exports.Breadcrumb = Breadcrumb;
 exports.BulletChart = BulletChart;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
-exports.CHARTS_COLOR_PALETTE = CHARTS_COLOR_PALETTE;
+exports.CARD_COMPONENT_ID = CARD_COMPONENT_ID;
 exports.CampaignCard = CampaignCard;
 exports.CampaignExperientialIcon = SvgCampaignExperiential;
 exports.CampaignFunctionalIcon = SvgCampaignFunctional;
@@ -5550,6 +5590,8 @@ exports.TableHead = Head;
 exports.TableRow = Row;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
+exports.TextDescription = TextDescription;
+exports.TextLabel = TextLabel;
 exports.Textarea = Textarea;
 exports.Tiles = Tiles;
 exports.Timeline = Timeline;
@@ -5564,5 +5606,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;