@appquality/unguess-design-system 3.1.1-nav-beta → 3.1.2-beta.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');
@@ -28,6 +28,7 @@ var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactForms = require('@zendeskgarden/react-forms');
 var react = require('@tiptap/react');
 var Typography = require('@tiptap/extension-typography');
+var Link = require('@tiptap/extension-link');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var CharacterCount = require('@tiptap/extension-character-count');
@@ -64,31 +65,37 @@ var UAParser__default = /*#__PURE__*/_interopDefaultLegacy(UAParser);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 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 +104,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 +238,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 +280,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$8, _h;
-const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$8 = reactTheming.DEFAULT_THEME.components) === null || _g$8 === void 0 ? void 0 : _g$8.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), "notifications.notification": ({ type, isPrimary, }) => {
+const 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$8 = reactTheming.DEFAULT_THEME.components) === null || _g$8 === void 0 ? void 0 : _g$8.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), 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 +421,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: getColor(colors.primaryHue, 600, undefined, 0.08),
+            },
+            "&:active": {
+                borderColor: getColor(colors.accentHue, 800),
+                color: getColor(colors.accentHue, 800),
+                backgroundColor: palette.blue[100],
+            },
+        })), (isAccent && isBasic && {
+            color: getColor(colors.accentHue, 700),
+            "&:hover": {
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
+                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: getColor(colors.primaryHue, 600, undefined, 0.08),
+            },
+            "&: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: getColor(colors.primaryHue, 600, undefined, 0.08),
+                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 +699,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 +709,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 +743,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>
@@ -1067,18 +1151,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};
 `;
@@ -1131,7 +1236,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;
@@ -1148,6 +1252,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.
@@ -1223,7 +1328,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) `
@@ -1324,27 +1429,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,
@@ -1443,7 +1548,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: {},
@@ -1453,57 +1558,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,
+    theme.palette.red[900],
+    theme.palette.yellow[700],
+    theme.palette.azure[900],
+    theme.palette.teal[700],
+    theme.palette.grey[200]
 ];
-[
-    CHARTS_COLOR_PALETTE.greenLight,
-    CHARTS_COLOR_PALETTE.blue,
-    CHARTS_COLOR_PALETTE.fucsia,
-    CHARTS_COLOR_PALETTE.violet,
-    CHARTS_COLOR_PALETTE.orchidea, // Orchidea 300
-];
-const CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
-    CHARTS_COLOR_PALETTE.darkPine,
-    CHARTS_COLOR_PALETTE.fucsia,
-    CHARTS_COLOR_PALETTE.violet,
-    CHARTS_COLOR_PALETTE.greenLight,
-    CHARTS_COLOR_PALETTE.mattone,
-    CHARTS_COLOR_PALETTE.sky,
-    CHARTS_COLOR_PALETTE.orchidea,
-    CHARTS_COLOR_PALETTE.blue, // Blue 900
-];
-[
-    CHARTS_COLOR_PALETTE.sky,
-    CHARTS_COLOR_PALETTE.orchidea,
-    CHARTS_COLOR_PALETTE.blue,
-    CHARTS_COLOR_PALETTE.darkPine,
-    CHARTS_COLOR_PALETTE.fucsia,
-    CHARTS_COLOR_PALETTE.violet,
-    CHARTS_COLOR_PALETTE.greenLight,
-    CHARTS_COLOR_PALETTE.mattone, // Mattone 900
+const CHARTS_COLOR_SCHEME_CATEGORICAL = [
+    theme.palette.teal[700],
+    theme.palette.pink[900],
+    theme.palette.purple[300],
+    theme.palette.crimson[500],
+    theme.palette.royal[900],
+    theme.palette.lemon[700],
 ];
 
 const ChartContainer = styled__default["default"].div `
@@ -1562,7 +1634,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);
@@ -1621,7 +1693,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 }));
@@ -1632,7 +1704,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: "",
@@ -1640,10 +1712,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, }) => {
@@ -1664,7 +1736,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,
@@ -1688,7 +1760,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,
@@ -1710,7 +1782,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"]
@@ -1720,7 +1792,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);
     }
@@ -1797,7 +1869,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);
                         }
@@ -1827,7 +1899,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({
@@ -1835,7 +1907,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 => {
@@ -2044,11 +2116,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};
     }
   `}
 `;
@@ -2518,20 +2590,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;
@@ -2551,29 +2613,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;
@@ -2624,6 +2665,7 @@ const Editor = (_a) => {
     };
     const ed = react.useEditor(Object.assign({ extensions: [
             Typography__default["default"],
+            Link__default["default"],
             StarterKit__default["default"],
             Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
                     if (node.type.name === "heading") {
@@ -2671,7 +2713,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) ``;
@@ -2750,7 +2792,6 @@ const Wrapper$1 = styled__default["default"].div `
 
     svg {
       margin-left: ${({ theme }) => theme.space.xs};
-      flex-shrink: 0;
     }
   }
 `;
@@ -2851,7 +2892,7 @@ const Circle = styled__default["default"].div `
   height: ${({ theme }) => theme.space.base * 6}px;
   padding: ${({ theme }) => theme.space.base * 1.25}px;
   border-radius: 50%;
-  background-color: ${({ theme }) => theme.colors.primaryHue};
+  background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2868,7 +2909,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) ``;
@@ -3109,7 +3150,7 @@ const WorkspacesDropdown = (props) => {
             props.onWorkspaceChange && props.onWorkspaceChange(workspace);
         }, downshiftProps: {
             itemToString: (item) => item && item.company,
-        } }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, Object.assign({ style: { color: theme.colors.primaryHue } }, { children: jsxRuntime.jsx(StyledEllipsis, Object.assign({ isCompact: props.isCompact }, { children: selectedWorkspace
+        } }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, Object.assign({ style: { color: getColor(theme.colors.primaryHue, 600) } }, { children: jsxRuntime.jsx(StyledEllipsis, Object.assign({ isCompact: props.isCompact }, { children: selectedWorkspace
                             ? selectedWorkspace.company + "'s workspace"
                             : "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map((item) => (jsxRuntime.jsx(Item$1, Object.assign({ value: item }, { children: item.company }))))] })] })));
 };
@@ -3129,30 +3170,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"]);
@@ -3198,7 +3239,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
@@ -3215,30 +3256,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)));
 
@@ -3329,29 +3351,62 @@ const UgProjectSubtitle = styled__default["default"](NavItemText) `
   font-size: ${(props) => props.theme.fontSizes.sm};
 `;
 const UgNavItem = styled__default["default"](NavItem) `
+  display: flex;
   flex-flow: column;
-  align-items: flex-start;
-  padding: 12px 8px;
-  opacity: 1;
-  padding-left: ${({ theme }) => theme.space.xxl}; //Accordion Alingment
+  width: 100%;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.space.sm} ${({ theme }) => theme.space.xs};
+  padding-left: ${({ theme }) => theme.space.xxl};
 `;
 const NavItemComponent = React.forwardRef((props, ref) => jsxRuntime.jsx(UgNavItem, Object.assign({ ref: ref }, props)));
 const NavItemProject = NavItemComponent;
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 
+const NavAccordionItem = styled__default["default"](Accordion) `
+  ${sidebarNavItemExpanded}
+  ${props => !props.isExpanded && sidebarNavItemHidden}
+  order: 1;
+  margin: ${({ theme }) => theme.space.xs} 0;
+  padding-left: 8.5px;
+`;
+const AccordionItemHeader = styled__default["default"](Accordion.Header) `
+  > svg {
+    flex-shrink: 0;
+    
+    &:first-of-type {
+      margin: 0 8.5px;
+    }
+  }
+`;
+const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
+  max-height: 180px;
+  overflow-y: auto;
+`;
+const AccordionItemLabel = styled__default["default"](Accordion.Label) `
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  padding: 0;
+  margin: 0 8.5px;
+`;
+NavAccordionItem.Panel = AccordionItemPanel;
+NavAccordionItem.Header = AccordionItemHeader;
+NavAccordionItem.Label = AccordionItemLabel;
+
 var _path$j;
 function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.027 21H5.973C5.436 21 5 20.523 5 19.935V17.065C5 16.475 5.436 16 5.973 16H11.027C11.564 16 12 16.476 12 17.065V19.935C12 20.523 11.564 21 11.027 21ZM11.024 14H5.977C5.437 14 5 13.577 5 13.055V5.945C5 5.425 5.438 5 5.977 5H11.024C11.564 5 12 5.424 12 5.946V13.056C12 13.577 11.563 14 11.024 14ZM14.979 5H20.021C20.561 5 21 5.478 21 6.069V8.932C21 9.522 20.561 10 20.021 10H14.979C14.439 10 14 9.522 14 8.932V6.07C14 5.48 14.439 5.001 14.979 5.001M14.972 12H20.028C20.565 12 21 12.42 21 12.94V20.06C21 20.579 20.565 21 20.028 21H14.972C14.435 21 14 20.579 14 20.06V12.94C14 12.42 14.435 12 14.972 12Z",
+    fill: "#336179"
   })));
 };
 
@@ -3359,11 +3414,11 @@ var _linearGradient, _path$i;
 function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "unguessIconGradient"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
@@ -3376,7 +3431,9 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
     stopColor: "#001825"
   }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#unguessIconGradient)",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.027 21H5.973C5.436 21 5 20.523 5 19.935V17.065C5 16.475 5.436 16 5.973 16H11.027C11.564 16 12 16.476 12 17.065V19.935C12 20.523 11.564 21 11.027 21ZM11.024 14H5.977C5.437 14 5 13.577 5 13.055V5.945C5 5.425 5.438 5 5.977 5H11.024C11.564 5 12 5.424 12 5.946V13.056C12 13.577 11.563 14 11.024 14ZM14.979 5H20.021C20.561 5 21 5.478 21 6.069V8.932C21 9.522 20.561 10 20.021 10H14.979C14.439 10 14 9.522 14 8.932V6.07C14 5.48 14.439 5.001 14.979 5.001M14.972 12H20.028C20.565 12 21 12.42 21 12.94V20.06C21 20.579 20.565 21 20.028 21H14.972C14.435 21 14 20.579 14 20.06V12.94C14 12.42 14.435 12 14.972 12Z"
   })));
 };
 
@@ -3421,17 +3478,19 @@ var SvgToken = function SvgToken(props) {
 
 var _path$h;
 function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
-var SvgFolderIcon = function SvgFolderIcon(props) {
+var SvgProjectsIcon = function SvgProjectsIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
+    width: 26,
+    height: 26,
+    viewBox: "0 0 26 26",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M9.99976 4H6.99976V3.5C6.99976 2.62386 6.3759 2 5.49976 2H2.49976C1.62362 2 0.999758 2.62386 0.999758 3.5V6H0.499758C0.174472 6 -0.0642066 6.30569 0.0146868 6.62127L1.01469 10.6213C1.07033 10.8439 1.27032 11 1.49976 11H10.4998C10.7292 11 10.9292 10.8439 10.9848 10.6213L11.9848 6.62127C12.0637 6.30569 11.825 6 11.4998 6H10.9998V5C10.9998 4.42386 10.5759 4 9.99976 4ZM10.8594 7H1.14015L1.89015 10H10.1094L10.8594 7ZM1.99976 6H9.99976V5H5.99976V3.5C5.99976 3.17614 5.82362 3 5.49976 3H2.49976C2.1759 3 1.99976 3.17614 1.99976 3.5V6Z",
-    fill: "currentColor"
+    d: "M20.5 8H14.25V7.375C14.25 6.34232 13.4077 5.5 12.375 5.5H6.125C5.09232 5.5 4.25 6.34232 4.25 7.375V13.005C3.53426 13.0685 3.01354 13.7329 3.1335 14.4527L4.171 20.7027C4.27098 21.3026 4.79293 21.75 5.4 21.75H20.6C21.2071 21.75 21.729 21.3026 21.829 20.7027L22.8666 14.4523C22.9865 13.7329 22.4657 13.0685 21.75 13.005V9.25C21.75 8.55482 21.1952 8 20.5 8ZM21.633 14.25H4.36695L5.404 20.4973C5.40404 20.4974 20.6 20.5 20.6 20.5C20.5929 20.5 21.633 14.25 21.633 14.25ZM5.5 13H20.5V9.25H13V7.375C13 7.03268 12.7173 6.75 12.375 6.75H6.125C5.78268 6.75 5.5 7.03268 5.5 7.375V13Z",
+    fill: "#336179",
+    stroke: "#336179"
   })));
 };
 
@@ -3502,52 +3561,6 @@ const LoadingSidebar = (props) => {
     return (jsxRuntime.jsxs(StyledNav, Object.assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 4), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
 };
 
-const AccordionItem = styled__default["default"](Accordion) `
-  opacity: 1;
-  ${sidebarNavItemExpanded}
-  ${(props) => !props.isExpanded && sidebarNavItemHidden}
-  order: 1;
-  margin-top: ${({ theme }) => theme.space.xs}px;
-`;
-const AccordionItemHeader = styled__default["default"](Accordion.Header) `
-  flex-direction: row-reverse;
-  border-top-left-radius: ${({ theme }) => theme.space.base * 6}px;
-  border-bottom-left-radius: ${({ theme }) => theme.space.base * 6}px;
-
-  > button {
-    padding-left: 2px;
-  }
-
-  svg {
-    width: 26px;
-  }
-
-  &:hover {
-    background-color: ${(props) => props.theme.palette.kale["200"]};
-  }
-`;
-const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
-  max-height: 180px;
-  padding: 0;
-  padding-left: 5px;
-  overflow-y: hidden;
-  opacity: 1;
-  &:hover {
-    overflow-y: auto;
-  }
-`;
-const AccordionItemLabel = styled__default["default"](Accordion.Label) `
-  padding: 12px 9px;
-  ${({ theme }) => `
-    color: ${theme.colors.primaryHue};
-    fill: ${theme.colors.primaryHue};
-    font-weight: ${theme.fontWeights.medium};
-  `}
-`;
-AccordionItem.Panel = AccordionItemPanel;
-AccordionItem.Header = AccordionItemHeader;
-AccordionItem.Label = AccordionItemLabel;
-
 const TokenContainer = styled__default["default"].div `
   display: flex;
   align-items: center;
@@ -3616,7 +3629,7 @@ const Sidebar = (_a) => {
     }, [props.isExpanded]);
     return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, Object.assign({}, props))) : (jsxRuntime.jsxs(Nav, Object.assign({}, props, { children: [jsxRuntime.jsxs(ScrollingContainer, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
                         props.workspaces &&
-                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(AccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => navigate("projects", project.id) }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id))) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
+                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(NavAccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(NavAccordionItem.Section, { children: [jsxRuntime.jsxs(NavAccordionItem.Header, { children: [jsxRuntime.jsx(SvgProjectsIcon, {}), jsxRuntime.jsxs(NavAccordionItem.Label, { children: [props.dividerLabel || "", " "] })] }), jsxRuntime.jsx(NavAccordionItem.Panel, Object.assign({ style: { padding: 0 } }, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => navigate("projects", project.id) }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id))) }))] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
                                                     marginLeft: theme.space.xs,
                                                     color: theme.palette.grey[800],
                                                 } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
@@ -3713,7 +3726,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"] })))] }));
 };
 
@@ -3926,12 +3939,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]};
@@ -4206,7 +4219,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);
@@ -4376,7 +4389,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;
@@ -4724,7 +4737,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]};
   }`};
 
@@ -4803,23 +4816,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.
  */
@@ -4831,18 +4842,18 @@ const getInitials = (name) => {
     return initials;
 };
 
-const StyledButton$1 = styled__default["default"](Button) `
+const StyledButton = styled__default["default"](Button) `
   ${(props) => `
   &:hover,
   &:focus,
   &:active {
-    background-color: ${props.theme.palette.kale[100]};
+    background-color: ${getColor(props.theme.colors.primaryHue, 600, undefined, 0.08)};
     color: ${props.isDanger
     ? props.theme.palette.red[500]
     : props.theme.palette.grey[800]};
   }`};
 `;
-const StyledFooterButton = styled__default["default"](StyledButton$1) `
+const StyledFooterButton = styled__default["default"](StyledButton) `
   color: ${(props) => props.theme.palette.grey[800]};
   padding-left: 0;
   justify-content: flex-start;
@@ -4879,11 +4890,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 })) }));
 };
 
@@ -4924,18 +4935,9 @@ const StyledButtonContainer = styled__default["default"].div `
     justify-content: flex-start;
   }
 `;
-const StyledButton = styled__default["default"](Button) `
-  ${(props) => `
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: ${props.theme.palette.kale[100]};
-    color: ${props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800]};
-  }`};
-`;
 const LanguageItem = (props) => {
     var _a;
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map((key) => (jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, isStretched: true, value: key, onClick: () => props.onSelectLanguage(key) }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, Object.assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] })))) }) })] }));
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map((key) => (jsxRuntime.jsxs(Button, Object.assign({ isBasic: true, isStretched: true, value: key, onClick: () => props.onSelectLanguage(key) }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, Object.assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] })))) }) })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
 };
 
@@ -4948,7 +4950,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;
@@ -4964,11 +4966,6 @@ const StyledList = styled__default["default"].ul `
   padding: 0;
   margin: 0;
 `;
-styled__default["default"](Anchor) `
-  &:hover {
-    text-decoration: none;
-  }
-`;
 const UserMenu = (props) => {
     var _a;
     const [item, setActiveItem] = React.useState("");
@@ -5078,7 +5075,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, }) => {
@@ -5216,7 +5213,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 {
@@ -5395,10 +5394,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};
     `}
 
@@ -5410,7 +5409,7 @@ const StyledNavButton = styled__default["default"](reactButtons.Button) `
 
   &:hover {
     background-color: transparent;
-    color: ${({ theme }) => theme.colors.primaryHue};
+    $
   }
 `;
 const StyledTabList = styled__default["default"].div `
@@ -5532,7 +5531,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) `
@@ -5598,7 +5597,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;
@@ -5660,6 +5659,7 @@ exports.Modal = Modal;
 exports.ModalFullScreen = ModalFullScreen;
 exports.MultiSelect = MultiSelect;
 exports.Nav = Nav;
+exports.NavAccordionItem = NavAccordionItem;
 exports.NavDivider = NavDivider;
 exports.NavItem = NavItem;
 exports.NavItemIcon = NavItemIcon;
@@ -5707,6 +5707,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;
@@ -5721,5 +5723,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;