@speakapbv/dough-component-library 9.29.0 → 9.31.0

package/dist/index.js

@@ -4486,9 +4486,215 @@ var PanelOverlay = function (props) {
 };
 PanelOverlay.displayName = "PanelOverlay";
 
-var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-alert-textbox {\n  font-family: \"Roboto\", sans-serif;\n  display: block;\n  width: 100%;\n  position: relative;\n  padding: 16px 24px 16px 28px;\n  border-radius: 12px;\n  box-sizing: border-box;\n}\n.dough-alert-textbox > .before {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 3;\n  width: auto;\n  height: auto;\n  opacity: 0.05;\n  border-radius: 12px;\n}\n.dough-alert-textbox > .after {\n  border-radius: 12px;\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 8px;\n  z-index: 5;\n  width: 4px;\n  height: auto;\n}\n.dough-alert-textbox > .dough-alert-textbox-title {\n  margin-bottom: 4px;\n}\n.dough-alert-textbox.dough-alert-status-neutral > .before,\n.dough-alert-textbox.dough-alert-status-neutral > .after {\n  background-color: rgb(68, 132, 199);\n  background-color: var(--dough-color-primary);\n}\n.dough-alert-textbox.dough-alert-status-success > .before,\n.dough-alert-textbox.dough-alert-status-success > .after {\n  background-color: rgb(0, 136, 0);\n  background-color: var(--dough-color-status-success);\n}\n.dough-alert-textbox.dough-alert-status-warning > .before,\n.dough-alert-textbox.dough-alert-status-warning > .after {\n  background-color: rgb(255, 136, 0);\n  background-color: var(--dough-color-status-warning);\n}\n.dough-alert-textbox.dough-alert-status-error > .before,\n.dough-alert-textbox.dough-alert-status-error > .after {\n  background-color: rgb(191, 41, 0);\n  background-color: var(--dough-color-status-danger);\n}";
+var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}";
 styleInject(css_248z$x);
 
+var DesignTokens = {
+    colors: {
+        colorWhite: "#ffffff",
+        colorBackdropDark: "rgba(0,0,0,0.8)",
+        colorBackdrop: "rgba(0,0,0,0.4)",
+        colorGrey6: "#f5f5f5",
+        colorGrey5: "#e6e6e6",
+        colorGrey4: "#d2d2d2",
+        colorGrey3: "#9f9f9f",
+        colorGrey2: "#696969",
+        colorGrey1: "#444444",
+        colorStatusWarningLight: "#ffefdd",
+        colorStatusWarning: "#ff8800",
+        colorStatusSuccess: "#008800",
+        colorStatusDanger: "#bf2900",
+        colorBrandButton: "#47aa3c",
+        colorBrandButtonHover: "#39942f",
+        colorBrandButtonClick: "#2a7f20",
+        colorBrandHeaderLight: "#5ea2e9",
+        colorBrandHeader: "#4484c7",
+        colorBrandHeaderDark: "#2f659f",
+        colorLike: "#F24025",
+    },
+    fixedColors: {
+        colorSelector1: "#fa4b34",
+        colorSelector2: "#ffa822",
+        colorSelector3: "#0091ff",
+        colorSelector4: "#14cad7",
+        colorSelector5: "#8f00ff",
+    },
+    textColors: {
+        colorTextWarning: "#bf2900",
+        colorTextSuccess: "#008800",
+        colorTextDanger: "#bf2900",
+        colorTextBrandLink: "#4484c7",
+        colorTextWhite: "#ffffff",
+        colorTextLight: "#9e9e9e",
+        colorTextDefault: "#6e6f75",
+        colorTextDark: "#444444",
+        colorIconWhite: "#ffffff",
+        colorIconPrimary: "#4484c7",
+        colorIconDefault: "#999999",
+    },
+    typography: {
+        textSmall: "0.8125rem",
+        textBase: "0.875rem",
+        textH5: "1rem",
+        textH4: "1.125rem",
+        textH3: "1.25rem",
+        textH2: "1.5rem",
+        textH1: "1.625rem",
+        textTiny: "0.6875rem",
+        lineHeightHeading: "1.25",
+        lineHeightBody: "1.5",
+        lineHeightReset: "1",
+        fontWeightRegular: "400",
+        fontWeightBold: "700",
+        fontFamilyBase: "Roboto",
+    },
+    spacing: {
+        spacerHalf: "4px",
+        spacer1: "8px",
+        spacer2: "16px",
+        spacer3: "24px",
+        spacer4: "32px",
+        spacer5: "40px",
+        spacer6: "48px",
+    },
+    borders: {
+        borderSolidWhite3: "3px solid #ffffff",
+        borderSolidWhite2: "2px solid #ffffff",
+        borderSolidWhite1: "1px solid #ffffff",
+        borderDottedLight3: "3px dashed #ededed",
+        borderSolidLight3: "3px solid #ededed",
+        borderDottedLight2: "2px dashed #ededed",
+        borderSolidLight2: "2px solid #ededed",
+        borderDottedLight1: "1px dashed #ededed",
+        borderSolidLight1: "1px solid #ededed",
+    },
+    shadows: {
+        boxShadowDropdown: "0 2px 20px 0 rgba(0,0,0,0.1)",
+        boxShadowNotify: "0 1px 15px 0 rgba(0,0,0,0.2)",
+        boxShadowCard: "0 1px 1px 0 rgba(0,0,0,0.1)",
+        boxShadowButton: "0 1px 3px 0 rgba(0,0,0,0.2)",
+    },
+    sizes: {
+        sizeDialogSmall: "464px",
+        sizeDialogMedium: "768px",
+        sizeDialogLarge: "1024px",
+        sizeViewportExtraLarge: "1200px",
+        sizeViewportLarge: "1080px",
+        sizeViewportMedium: "768px",
+        sizeViewportSmall: "576px",
+        sizeHeaderHeight: "56px",
+        sizeAvatarXs: "24px",
+        sizeAvatarS: "32px",
+        sizeAvatarM: "40px",
+        sizeAvatarL: "80px",
+        sizeAvatarXl: "120px",
+    },
+};
+
+var _a;
+var IE11SpecificCases = {
+    flex: function (value) { return value + " " + value + " auto"; },
+};
+var MediaQueryDevices;
+(function (MediaQueryDevices) {
+    MediaQueryDevices["MOBILE"] = "mobile";
+    MediaQueryDevices["TABLETPORTRAIT"] = "tabletPortrait";
+    MediaQueryDevices["TABLETLANDSCAPE"] = "tabletLandscape";
+    MediaQueryDevices["DESKTOP"] = "desktop";
+})(MediaQueryDevices || (MediaQueryDevices = {}));
+var enumToStyleValueMap = (_a = {},
+    _a[exports.Sizes.XXS] = DesignTokens.spacing.spacerHalf,
+    _a[exports.Sizes.XS] = DesignTokens.spacing.spacer1,
+    _a[exports.Sizes.SMALL] = DesignTokens.spacing.spacer2,
+    _a[exports.Sizes.NORMAL] = DesignTokens.spacing.spacer3,
+    _a[exports.Sizes.LARGE] = DesignTokens.spacing.spacer4,
+    _a[exports.Sizes.XL] = DesignTokens.spacing.spacer5,
+    _a[exports.Sizes.XXL] = DesignTokens.spacing.spacer6,
+    _a);
+var getStyleValue = function (styleValue) {
+    if (enumToStyleValueMap[styleValue] === undefined) {
+        return styleValue;
+    }
+    return enumToStyleValueMap[styleValue];
+};
+var getMediaQueryStyles = function (props, propToStyleMap, deviceType) {
+    var mediaQueryStyles = "";
+    Object.keys(propToStyleMap).forEach(function (propKey) {
+        if (deviceType &&
+            typeof props[propKey] === "object" &&
+            props[propKey][deviceType] !== undefined) {
+            mediaQueryStyles += "\n                 " + propToStyleMap[propKey]
+                .map(function (styleAttr) {
+                return styleAttr + ": " + getStyleValue(props[propKey][deviceType]) + ";";
+            })
+                .join("") + "\n             ";
+        }
+        else if (deviceType === undefined &&
+            typeof props[propKey] === "string") {
+            mediaQueryStyles += "\n                 " + propToStyleMap[propKey]
+                .map(function (styleAttr) {
+                return styleAttr + ": " + getStyleValue(props[propKey]) + ";";
+            })
+                .join("") + "\n             ";
+        }
+    });
+    return mediaQueryStyles;
+};
+var getIESpecificStyles = function (props, propToStyleMap) {
+    var IE11Styles = "";
+    Object.keys(propToStyleMap).forEach(function (propKey) {
+        IE11Styles += "\n                 " + propToStyleMap[propKey]
+            .map(function (styleAttr) {
+            if (IE11SpecificCases[styleAttr]) {
+                return styleAttr + ": " + IE11SpecificCases[styleAttr](getStyleValue(props[propKey])) + ";";
+            }
+            return "";
+        })
+            .join("") + "\n             ";
+    });
+    return IE11Styles;
+};
+var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
+    var elementMainStyles = "";
+    var mainStyleProps = getMediaQueryStyles(props, propToStyleMap);
+    if (mainStyleProps.trim() !== "") {
+        elementMainStyles = "\n        " + selector + " {\n            " + mainStyleProps + "\n        }\n        ";
+        if (!!window.MSInputMethodContext && !!document.documentMode) {
+            var ie11Styles = getIESpecificStyles(props, propToStyleMap);
+            if (ie11Styles.trim() !== "") {
+                elementMainStyles += "\n                html.dough-IE11 " + selector + " {\n                    " + mainStyleProps + "\n                }\n                ";
+            }
+        }
+    }
+    if (!noMediaQuery) {
+        elementMainStyles += "\n        @media (min-width: 0px) and (max-width: " + DesignTokens.sizes.sizeViewportSmall + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.MOBILE) + "\n           }\n        }\n        @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportSmall) +
+            1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportMedium + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETPORTRAIT) + "\n           }\n        }\n        @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportMedium) +
+            1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETLANDSCAPE) + "\n           }\n        }\n        @media (min-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.DESKTOP) + "\n           }\n        }";
+    }
+    return elementMainStyles;
+};
+var isStandardColor = function (color) {
+    return Object.values(exports.Colors).includes(color);
+};
+var getColorWithFallback = function (color) {
+    return isStandardColor(color) ? "var(--" + color + ")" : color;
+};
+
+var ProgressBar = function (_a) {
+    var total = _a.total, completed = _a.completed, _b = _a.railColor, railColor = _b === void 0 ? "#EDEDED" : _b, _c = _a.barColor, barColor = _c === void 0 ? exports.Colors.SUCCESS : _c, dataAttributes = _a.dataAttributes, className = _a.className;
+    return (React__default.createElement("div", __assign({ className: cn("dough-progress-bar", className) }, dataAttributes, { style: {
+            backgroundColor: getColorWithFallback(railColor),
+        } }),
+        React__default.createElement("div", { className: "dough-progress-bar__progress", style: {
+                backgroundColor: getColorWithFallback(barColor),
+                width: "calc(" + (completed > total ? total : completed) + " / " + total + " * 100%)",
+            } })));
+};
+ProgressBar.displayName = "ProgressBar";
+
+var css_248z$y = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-alert-textbox {\n  font-family: \"Roboto\", sans-serif;\n  display: block;\n  width: 100%;\n  position: relative;\n  padding: 16px 24px 16px 28px;\n  border-radius: 12px;\n  box-sizing: border-box;\n}\n.dough-alert-textbox > .before {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 3;\n  width: auto;\n  height: auto;\n  opacity: 0.05;\n  border-radius: 12px;\n}\n.dough-alert-textbox > .after {\n  border-radius: 12px;\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 8px;\n  z-index: 5;\n  width: 4px;\n  height: auto;\n}\n.dough-alert-textbox > .dough-alert-textbox-title {\n  margin-bottom: 4px;\n}\n.dough-alert-textbox.dough-alert-status-neutral > .before,\n.dough-alert-textbox.dough-alert-status-neutral > .after {\n  background-color: rgb(68, 132, 199);\n  background-color: var(--dough-color-primary);\n}\n.dough-alert-textbox.dough-alert-status-success > .before,\n.dough-alert-textbox.dough-alert-status-success > .after {\n  background-color: rgb(0, 136, 0);\n  background-color: var(--dough-color-status-success);\n}\n.dough-alert-textbox.dough-alert-status-warning > .before,\n.dough-alert-textbox.dough-alert-status-warning > .after {\n  background-color: rgb(255, 136, 0);\n  background-color: var(--dough-color-status-warning);\n}\n.dough-alert-textbox.dough-alert-status-error > .before,\n.dough-alert-textbox.dough-alert-status-error > .after {\n  background-color: rgb(191, 41, 0);\n  background-color: var(--dough-color-status-danger);\n}";
+styleInject(css_248z$y);
+
 var AlertText = function (props) {
     var _a = props.type, type = _a === void 0 ? exports.AlertStatus.NEUTRAL : _a;
     return (React__default.createElement("div", __assign({ className: cn(props.className, exports.Colors.THEME, "dough-alert-textbox", "dough-alert-status-" + type) }, props.dataAttributes),
@@ -4499,8 +4705,8 @@ var AlertText = function (props) {
 };
 AlertText.displayName = "AlertText";
 
-var css_248z$y = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n  pointer-events: all;\n  width: 100%;\n  margin-bottom: 8px;\n  position: relative;\n  opacity: 0;\n  transform: translate3d(0, 16px, 0);\n  transform-origin: top center;\n  font-family: \"Roboto\", sans-serif;\n  border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n  transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n  cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n  pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: auto;\n  height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n  text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n  display: inline-block;\n  width: auto !important;\n  background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n  padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n  width: 24px;\n  height: 24px;\n  box-sizing: border-box;\n  border-radius: 100%;\n  border: 2px solid transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n  width: 70%;\n  height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n  fill: rgb(68, 132, 199);\n  fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n  border-color: rgb(0, 136, 0);\n  border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n  fill: rgb(0, 136, 0);\n  fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n  border-color: rgb(255, 136, 0);\n  border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n  fill: rgb(255, 136, 0);\n  fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n  border-color: rgb(191, 41, 0);\n  border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n  fill: rgb(191, 41, 0);\n  fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n  padding-right: 12px;\n}";
-styleInject(css_248z$y);
+var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n  pointer-events: all;\n  width: 100%;\n  margin-bottom: 8px;\n  position: relative;\n  opacity: 0;\n  transform: translate3d(0, 16px, 0);\n  transform-origin: top center;\n  font-family: \"Roboto\", sans-serif;\n  border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n  transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n  cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n  pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: auto;\n  height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n  text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n  display: inline-block;\n  width: auto !important;\n  background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n  padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n  width: 24px;\n  height: 24px;\n  box-sizing: border-box;\n  border-radius: 100%;\n  border: 2px solid transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n  width: 70%;\n  height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n  fill: rgb(68, 132, 199);\n  fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n  border-color: rgb(0, 136, 0);\n  border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n  fill: rgb(0, 136, 0);\n  fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n  border-color: rgb(255, 136, 0);\n  border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n  fill: rgb(255, 136, 0);\n  fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n  border-color: rgb(191, 41, 0);\n  border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n  fill: rgb(191, 41, 0);\n  fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n  padding-right: 12px;\n}";
+styleInject(css_248z$z);
 
 var Notification = function (props) {
     var _a = props.show, show = _a === void 0 ? true : _a, _b = props.horizontalAlignSelf, horizontalAlignSelf = _b === void 0 ? exports.HorizontalAlignment.RIGHT : _b, _c = props.verticalAlignSelf, verticalAlignSelf = _c === void 0 ? exports.VerticalAlignment.TOP : _c, _d = props.type, type = _d === void 0 ? exports.AlertStatus.NEUTRAL : _d, _e = props.duration, duration = _e === void 0 ? -1 : _e;
@@ -4597,14 +4803,20 @@ var Notification = function (props) {
 };
 Notification.displayName = "Notification";
 
-var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tabs-container {\n  flex-flow: row nowrap !important;\n  align-items: stretch !important;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n  border-top: 1px solid rgb(230, 230, 230);\n  border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n  border-bottom: 1px solid rgb(230, 230, 230);\n  border-bottom: 1px solid var(--dough-color-gray-5);\n}\nhtml.dough-IE11 .dough-tabs-container {\n  margin-bottom: 0;\n}\n.dough-tabs-container > .dough-tab-item {\n  padding: 0 !important;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n}\nbody:not(.no-transition) .dough-tabs-container > .dough-tab-item {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tabs-container > .dough-tab-item {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tabs-container > .dough-tab-item.dough-tab-item-stretch-tabs {\n  flex-grow: 1;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-button {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 40px;\n  color: rgb(158, 158, 158);\n  color: var(--dough-color-text-light);\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-button > .dough-box {\n  max-height: 60px;\n  min-height: 60px;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  position: absolute;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  width: auto;\n  height: 4px;\n  transform: translate3d(0, 4px, 0);\n  opacity: 0;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border.dough-tabs-container-top-border {\n  top: 0;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n  bottom: 0;\n}\nbody:not(.no-transition) .dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tabs-container > .dough-tab-item:hover > .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tabs-container > .dough-tab-item.active > .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tabs-container > .dough-tab-item.active > .dough-tab-item-selection-border {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.dough-tabs-container > .dough-tab-item.dough-tab-item-small > .dough-tab-item-button > .dough-box {\n  max-height: 40px;\n  min-height: 40px;\n}";
-styleInject(css_248z$z);
+var css_248z$A = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tab-item-selection-border {\n  position: absolute;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  width: auto;\n  height: 4px;\n  border-radius: 12px;\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n.dough-tab-item-selection-border.dough-tabs-container-top-border {\n  top: 1px;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n  bottom: 1px;\n}\nbody:not(.no-transition) .dough-tab-item-selection-border {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item-selection-border {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n\n.dough-tab-item-button {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 40px;\n  color: rgb(158, 158, 158);\n  color: var(--dough-color-text-light);\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n  line-height: 1.5;\n}\n.dough-tab-item-button .dough-box {\n  max-height: 60px;\n  min-height: 60px;\n}\n.dough-tab-item-button.dough-item-small .dough-box {\n  max-height: 40px;\n  min-height: 40px;\n}\n\n.dough-tab-item {\n  padding: 0 !important;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n}\nbody:not(.no-transition) .dough-tab-item {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tab-item.dough-tab-item-stretch-tabs {\n  flex-grow: 1;\n}\n.dough-tab-item .dough-tab-item-selection-border {\n  opacity: 0;\n}\n.dough-tab-item:hover .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tab-item:hover .dough-tab-item-selection-border.dough-tab-item-selection-border-hover {\n  opacity: 0.25;\n}\n.dough-tab-item.active .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n\n.dough-tabs-container {\n  position: relative;\n  flex-flow: row nowrap !important;\n  align-items: stretch !important;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider {\n  border-top: 1px solid rgb(230, 230, 230);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n  border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n  border-bottom: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item + .dough-tab-item {\n  margin-left: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button {\n  padding-bottom: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button .dough-box {\n  max-height: unset;\n  min-height: 0;\n}\n.dough-tabs-container.dough-tabs-container-compact.dough-tabs-container-top-border .dough-tab-item.dough-tab-item-compact .dough-tab-item-button {\n  padding-bottom: 0;\n  padding-top: 16px;\n}";
+styleInject(css_248z$A);
 
 var simplifyKey = function (key) {
     return key ? key.slice(key.indexOf("$") + 1) : key;
 };
 
+var Border = function (props) { return (React__default.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : exports.Colors.HEADER, {
+        "dough-tab-item-selection-border-hover": props.withBorderOnHover,
+        "dough-tabs-container-top-border": props.borderOnTop,
+    }), style: props.style })); };
 var TabsContainer = function (props) {
+    var tabRefs = React.useRef({});
+    var _a = React.useState(undefined), selectedIndex = _a[0], setSelectedIndex = _a[1];
     var handleChange = function (val) {
         if (val && val !== props.value) {
             if (props.onChange) {
@@ -4612,39 +4824,57 @@ var TabsContainer = function (props) {
             }
         }
     };
+    var currentTab = selectedIndex === undefined
+        ? undefined
+        : tabRefs.current[selectedIndex];
+    var underlineWidth = currentTab === null || currentTab === void 0 ? void 0 : currentTab.clientWidth;
+    var underlineLeftPosition = currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft;
     return (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, direction: exports.BoxDirection.ROW, className: cn("dough-tabs-container", props.className, {
             "dough-tabs-container-divider": props.showDivider !== false,
             "dough-tabs-container-top-border": props.borderOnTop,
-            "dough-tabs-container-bottom-border": props.borderOnTop !== false,
-        }), dataAttributes: props.dataAttributes }, props.children &&
-        React.Children.toArray(props.children).map(function (child) {
-            var simplifiedKey = simplifyKey(child.key);
-            return (React__default.createElement(Box, { className: cn("dough-tab-item", {
-                    active: props.value === simplifiedKey,
-                    "dough-tab-item-small": props.small || props.iconOnly,
-                    "dough-tab-item-stretch-tabs": props.stretchTabs,
-                }), key: "tab-" + simplifiedKey + "-wrapper" },
-                React__default.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : exports.Colors.HEADER, {
-                        "dough-tabs-container-top-border": props.borderOnTop,
-                    }) }),
-                React__default.createElement("div", { className: cn("dough-tab-item-button", {
-                        "dough-tab-item-button-disabled": child.props.disabled,
-                    }), onClick: function (e) {
-                        cancelEvent(e);
-                        hideLastDoughTooltip();
-                        handleChange(simplifiedKey);
-                    } },
-                    React__default.createElement(Box, { height: "100%", display: exports.BoxDisplay.FLEX, justifyContent: exports.BoxJustifyContent.CENTER, alignItems: exports.BoxAlign.CENTER, padding: props.iconOnly
-                            ? exports.Sizes.XS
-                            : props.small
-                                ? exports.Sizes.SMALL
-                                : exports.Sizes.NORMAL }, child))));
-        })));
+            "dough-tabs-container-bottom-border": props.borderOnTop !== true,
+            "dough-tabs-container-compact": props.compact,
+        }), padding: props.padding, dataAttributes: props.dataAttributes },
+        props.children &&
+            React.Children.toArray(props.children).map(function (child, index) {
+                var simplifiedKey = simplifyKey(child.key);
+                var isActive = props.value === simplifiedKey;
+                return (React__default.createElement(Box, { className: cn("dough-tab-item", {
+                        active: props.value === simplifiedKey,
+                        "dough-tab-item-small": props.small || props.iconOnly,
+                        "dough-tab-item-stretch-tabs": props.stretchTabs,
+                    }), ref: function (ref) {
+                        tabRefs.current[index] = ref;
+                        if (isActive) {
+                            setSelectedIndex(index);
+                        }
+                    }, key: "tab-" + simplifiedKey + "-wrapper" },
+                    React__default.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover }),
+                    React__default.createElement("div", { className: cn("dough-tab-item-button", {
+                            "dough-tab-item-button-disabled": child.props.disabled,
+                        }), onClick: function (e) {
+                            cancelEvent(e);
+                            hideLastDoughTooltip();
+                            setSelectedIndex(index);
+                            handleChange(simplifiedKey);
+                        } },
+                        React__default.createElement(Box, { height: "100%", display: exports.BoxDisplay.FLEX, justifyContent: exports.BoxJustifyContent.CENTER, alignItems: exports.BoxAlign.CENTER, padding: props.iconOnly
+                                ? exports.Sizes.XS
+                                : props.small
+                                    ? exports.Sizes.SMALL
+                                    : props.compact
+                                        ? undefined
+                                        : exports.Sizes.NORMAL }, child))));
+            }),
+        selectedIndex !== undefined && (React__default.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover, style: {
+                width: underlineWidth || 0,
+                left: underlineLeftPosition,
+            } }))));
 };
 TabsContainer.displayName = "TabsContainer";
 
-var css_248z$A = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-collapser-container {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-collapser-container > .dough-collapser-title {\n  cursor: pointer;\n  user-select: none;\n}\n.dough-collapser-container > .dough-collapser-title * {\n  user-select: none;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container {\n  width: 16px;\n  height: 16px;\n  text-align: center;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container .dough-inline-svg-icon {\n  width: 0.875em;\n  display: inline-block;\n  font-size: inherit;\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container .dough-inline-svg-icon > path {\n  fill: rgb(159, 159, 159);\n}\n.dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 1;\n  overflow: hidden;\n}\nbody:not(.no-transition) .dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner.dough-collapser-content-collapsed {\n  opacity: 0;\n}";
-styleInject(css_248z$A);
+var css_248z$B = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-collapser-container {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-collapser-container > .dough-collapser-title {\n  cursor: pointer;\n  user-select: none;\n}\n.dough-collapser-container > .dough-collapser-title * {\n  user-select: none;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container {\n  width: 16px;\n  height: 16px;\n  text-align: center;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container .dough-inline-svg-icon {\n  width: 0.875em;\n  display: inline-block;\n  font-size: inherit;\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container .dough-inline-svg-icon > path {\n  fill: rgb(159, 159, 159);\n}\n.dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 1;\n  overflow: hidden;\n}\nbody:not(.no-transition) .dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner.dough-collapser-content-collapsed {\n  opacity: 0;\n}";
+styleInject(css_248z$B);
 
 var Collapser = function (props) {
     var _a = props.folded, folded = _a === void 0 ? true : _a, _b = props.guidingIcon, guidingIcon = _b === void 0 ? true : _b;
@@ -4710,8 +4940,8 @@ var Collapser = function (props) {
 };
 Collapser.displayName = "Collapser";
 
-var css_248z$B = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-color-tile {\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.dough-color-tile.dough-color-tile-size-small {\n  width: 24px;\n  height: 24px;\n}\n.dough-color-tile.dough-color-tile-size-normal {\n  width: 32px;\n  height: 32px;\n}\n.dough-color-tile.dough-color-tile-size-large {\n  width: 40px;\n  height: 40px;\n}\n.dough-color-tile.dough-color-tile-size-extra-large {\n  width: 48px;\n  height: 48px;\n}";
-styleInject(css_248z$B);
+var css_248z$C = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-color-tile {\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.dough-color-tile.dough-color-tile-size-small {\n  width: 24px;\n  height: 24px;\n}\n.dough-color-tile.dough-color-tile-size-normal {\n  width: 32px;\n  height: 32px;\n}\n.dough-color-tile.dough-color-tile-size-large {\n  width: 40px;\n  height: 40px;\n}\n.dough-color-tile.dough-color-tile-size-extra-large {\n  width: 48px;\n  height: 48px;\n}";
+styleInject(css_248z$C);
 
 var ColorTile = React.forwardRef(function (_a, ref) {
     var className = _a.className, dataAttributes = _a.dataAttributes, color = _a.color, size = _a.size, absoluteColor = _a.absoluteColor, children = _a.children;
@@ -4729,8 +4959,8 @@ var ColorTile = React.forwardRef(function (_a, ref) {
 });
 ColorTile.displayName = "ColorTile";
 
-var css_248z$C = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-steps-indicator {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n.dough-steps-indicator.dough-steps-indicator-full-width {\n  display: flex;\n  width: 100%;\n  padding: 8px;\n}\n.dough-steps-indicator > .dough-steps-indicator-step {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 8px;\n  background-color: rgb(210, 210, 210);\n  background-color: var(--dough-color-gray-4);\n}\n.dough-steps-indicator > .dough-steps-indicator-step.dough-indicator-step-clickable {\n  cursor: pointer;\n}\n.dough-steps-indicator > .dough-steps-indicator-step:not(:last-child) {\n  margin-right: 8px;\n}\n.dough-steps-indicator > .dough-steps-indicator-step.dough-indicator-step-active {\n  background-color: rgb(68, 132, 199);\n  background-color: var(--dough-color-header);\n}";
-styleInject(css_248z$C);
+var css_248z$D = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-steps-indicator {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n.dough-steps-indicator.dough-steps-indicator-full-width {\n  display: flex;\n  width: 100%;\n  padding: 8px;\n}\n.dough-steps-indicator > .dough-steps-indicator-step {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 8px;\n  background-color: rgb(210, 210, 210);\n  background-color: var(--dough-color-gray-4);\n}\n.dough-steps-indicator > .dough-steps-indicator-step.dough-indicator-step-clickable {\n  cursor: pointer;\n}\n.dough-steps-indicator > .dough-steps-indicator-step:not(:last-child) {\n  margin-right: 8px;\n}\n.dough-steps-indicator > .dough-steps-indicator-step.dough-indicator-step-active {\n  background-color: rgb(68, 132, 199);\n  background-color: var(--dough-color-header);\n}";
+styleInject(css_248z$D);
 
 var StepsIndicator = function (props) {
     var _a = props.fullWidth, fullWidth = _a === void 0 ? false : _a, _b = props.activeStep, activeStep = _b === void 0 ? 0 : _b, _c = props.stepsAmount, stepsAmount = _c === void 0 ? 1 : _c;
@@ -4752,8 +4982,8 @@ var StepsIndicator = function (props) {
 };
 StepsIndicator.displayName = "StepsIndicator";
 
-var css_248z$D = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-avatar {\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: 100%;\n  font-size: 0.8125rem;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-avatar.has-click {\n  cursor: pointer;\n}\n.dough-avatar.has-padding {\n  padding: 4px;\n}\n.dough-avatar.has-border {\n  border: 3px solid rgba(0, 0, 0, 0);\n}\n.dough-avatar.has-border.dough-color-background-border {\n  border-color: #eceffb;\n  border-color: var(--dough-color-background);\n}\n.dough-avatar.has-border.dough-color-theme-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-theme);\n}\n.dough-avatar.has-border.dough-color-white-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-white);\n}\n.dough-avatar.has-border.dough-color-primary-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-avatar.has-border.dough-color-header-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-header);\n}\n.dough-avatar.has-border.dough-color-header-light-border {\n  border-color: rgb(94, 162, 233);\n  border-color: var(--dough-color-header-light);\n}\n.dough-avatar.has-border.dough-color-header-dark-border {\n  border-color: rgb(47, 101, 159);\n  border-color: var(--dough-color-header-dark);\n}\n.dough-avatar.has-border.dough-color-button-border {\n  border-color: rgb(71, 170, 60);\n  border-color: var(--dough-color-button);\n}\n.dough-avatar.has-border.dough-color-like-border {\n  border-color: rgb(242, 64, 37);\n  border-color: var(--dough-color-like);\n}\n.dough-avatar.has-border.dough-color-status-success-border {\n  border-color: rgb(0, 136, 0);\n  border-color: var(--dough-color-status-success);\n}\n.dough-avatar.has-border.dough-color-status-warning-light-border {\n  border-color: rgb(255, 239, 221);\n  border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar.has-border.dough-color-status-warning-border {\n  border-color: rgb(255, 136, 0);\n  border-color: var(--dough-color-status-warning);\n}\n.dough-avatar.has-border.dough-color-status-danger-border {\n  border-color: rgb(191, 41, 0);\n  border-color: var(--dough-color-status-danger);\n}\n.dough-avatar.has-border.dough-color-selector-1-border {\n  border-color: rgb(250, 75, 52);\n  border-color: var(--dough-color-selector-1);\n}\n.dough-avatar.has-border.dough-color-selector-2-border {\n  border-color: rgb(255, 168, 34);\n  border-color: var(--dough-color-selector-2);\n}\n.dough-avatar.has-border.dough-color-selector-3-border {\n  border-color: rgb(0, 145, 255);\n  border-color: var(--dough-color-selector-3);\n}\n.dough-avatar.has-border.dough-color-selector-4-border {\n  border-color: rgb(20, 202, 215);\n  border-color: var(--dough-color-selector-4);\n}\n.dough-avatar.has-border.dough-color-selector-5-border {\n  border-color: rgb(143, 0, 255);\n  border-color: var(--dough-color-selector-5);\n}\n.dough-avatar.has-border.dough-color-gray-1-border {\n  border-color: rgb(68, 68, 68);\n  border-color: var(--dough-color-gray-1);\n}\n.dough-avatar.has-border.dough-color-gray-2-border {\n  border-color: rgb(105, 105, 105);\n  border-color: var(--dough-color-gray-2);\n}\n.dough-avatar.has-border.dough-color-gray-3-border {\n  border-color: rgb(159, 159, 159);\n  border-color: var(--dough-color-gray-3);\n}\n.dough-avatar.has-border.dough-color-gray-4-border {\n  border-color: rgb(210, 210, 210);\n  border-color: var(--dough-color-gray-4);\n}\n.dough-avatar.has-border.dough-color-gray-5-border {\n  border-color: rgb(230, 230, 230);\n  border-color: var(--dough-color-gray-5);\n}\n.dough-avatar.has-border.dough-color-gray-6-border {\n  border-color: rgb(245, 245, 245);\n  border-color: var(--dough-color-gray-6);\n}\n.dough-avatar.has-border.dough-color-transparent-border {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-avatar.size-extra-small {\n  width: 16px !important;\n  height: 16px !important;\n}\n.dough-avatar.size-small {\n  width: 20px !important;\n  height: 20px !important;\n}\n.dough-avatar.size-normal {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-avatar.size-large {\n  width: 40px !important;\n  height: 40px !important;\n}\n.dough-avatar.size-extra-large {\n  width: 48px !important;\n  height: 48px !important;\n}\n.dough-avatar > .dough-avatar-content-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.dough-avatar > .dough-avatar-status-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  transform: rotateZ(135deg);\n  pointer-events: none;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status {\n  border: 3px solid rgba(0, 0, 0, 0);\n  border-radius: 100%;\n  pointer-events: initial;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  line-height: 0;\n  transform: rotateZ(-135deg);\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  z-index: 10;\n  width: 10px;\n  height: 10px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-background-border {\n  border-color: #eceffb;\n  border-color: var(--dough-color-background);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-theme-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-theme);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-white-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-white);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-primary-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-header);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-light-border {\n  border-color: rgb(94, 162, 233);\n  border-color: var(--dough-color-header-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-dark-border {\n  border-color: rgb(47, 101, 159);\n  border-color: var(--dough-color-header-dark);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-button-border {\n  border-color: rgb(71, 170, 60);\n  border-color: var(--dough-color-button);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-like-border {\n  border-color: rgb(242, 64, 37);\n  border-color: var(--dough-color-like);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-success-border {\n  border-color: rgb(0, 136, 0);\n  border-color: var(--dough-color-status-success);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-light-border {\n  border-color: rgb(255, 239, 221);\n  border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-border {\n  border-color: rgb(255, 136, 0);\n  border-color: var(--dough-color-status-warning);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-danger-border {\n  border-color: rgb(191, 41, 0);\n  border-color: var(--dough-color-status-danger);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-1-border {\n  border-color: rgb(250, 75, 52);\n  border-color: var(--dough-color-selector-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-2-border {\n  border-color: rgb(255, 168, 34);\n  border-color: var(--dough-color-selector-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-3-border {\n  border-color: rgb(0, 145, 255);\n  border-color: var(--dough-color-selector-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-4-border {\n  border-color: rgb(20, 202, 215);\n  border-color: var(--dough-color-selector-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-5-border {\n  border-color: rgb(143, 0, 255);\n  border-color: var(--dough-color-selector-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-1-border {\n  border-color: rgb(68, 68, 68);\n  border-color: var(--dough-color-gray-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-2-border {\n  border-color: rgb(105, 105, 105);\n  border-color: var(--dough-color-gray-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-3-border {\n  border-color: rgb(159, 159, 159);\n  border-color: var(--dough-color-gray-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-4-border {\n  border-color: rgb(210, 210, 210);\n  border-color: var(--dough-color-gray-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-5-border {\n  border-color: rgb(230, 230, 230);\n  border-color: var(--dough-color-gray-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-6-border {\n  border-color: rgb(245, 245, 245);\n  border-color: var(--dough-color-gray-6);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-transparent-border {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-tiny {\n  border-width: 2px;\n  width: 8px;\n  height: 8px;\n  margin-top: -4px;\n  margin-left: -4px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-small {\n  border-width: 2px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  margin-left: -5px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-small {\n  border-width: 2px;\n  width: 16px;\n  height: 16px;\n  margin-top: -8px;\n  margin-left: -8px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-normal {\n  width: 24px;\n  height: 24px;\n  margin-top: -12px;\n  margin-left: -12px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-large {\n  border-width: 4px;\n  width: 32px;\n  height: 32px;\n  margin-top: -16px;\n  margin-left: -16px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-large {\n  border-width: 4px;\n  width: 40px;\n  height: 40px;\n  margin-top: -20px;\n  margin-left: -20px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-huge {\n  border-width: 4px;\n  width: 48px;\n  height: 48px;\n  margin-top: -24px;\n  margin-left: -24px;\n}\n.dough-avatar.disabled {\n  pointer-events: none !important;\n  cursor: default;\n  opacity: 0.5;\n}\n.dough-avatar.disabled * {\n  pointer-events: none !important;\n}";
-styleInject(css_248z$D);
+var css_248z$E = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-avatar {\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: 100%;\n  font-size: 0.8125rem;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-avatar.has-click {\n  cursor: pointer;\n}\n.dough-avatar.has-padding {\n  padding: 4px;\n}\n.dough-avatar.has-border {\n  border: 3px solid rgba(0, 0, 0, 0);\n}\n.dough-avatar.has-border.dough-color-background-border {\n  border-color: #eceffb;\n  border-color: var(--dough-color-background);\n}\n.dough-avatar.has-border.dough-color-theme-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-theme);\n}\n.dough-avatar.has-border.dough-color-white-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-white);\n}\n.dough-avatar.has-border.dough-color-primary-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-avatar.has-border.dough-color-header-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-header);\n}\n.dough-avatar.has-border.dough-color-header-light-border {\n  border-color: rgb(94, 162, 233);\n  border-color: var(--dough-color-header-light);\n}\n.dough-avatar.has-border.dough-color-header-dark-border {\n  border-color: rgb(47, 101, 159);\n  border-color: var(--dough-color-header-dark);\n}\n.dough-avatar.has-border.dough-color-button-border {\n  border-color: rgb(71, 170, 60);\n  border-color: var(--dough-color-button);\n}\n.dough-avatar.has-border.dough-color-like-border {\n  border-color: rgb(242, 64, 37);\n  border-color: var(--dough-color-like);\n}\n.dough-avatar.has-border.dough-color-status-success-border {\n  border-color: rgb(0, 136, 0);\n  border-color: var(--dough-color-status-success);\n}\n.dough-avatar.has-border.dough-color-status-warning-light-border {\n  border-color: rgb(255, 239, 221);\n  border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar.has-border.dough-color-status-warning-border {\n  border-color: rgb(255, 136, 0);\n  border-color: var(--dough-color-status-warning);\n}\n.dough-avatar.has-border.dough-color-status-danger-border {\n  border-color: rgb(191, 41, 0);\n  border-color: var(--dough-color-status-danger);\n}\n.dough-avatar.has-border.dough-color-selector-1-border {\n  border-color: rgb(250, 75, 52);\n  border-color: var(--dough-color-selector-1);\n}\n.dough-avatar.has-border.dough-color-selector-2-border {\n  border-color: rgb(255, 168, 34);\n  border-color: var(--dough-color-selector-2);\n}\n.dough-avatar.has-border.dough-color-selector-3-border {\n  border-color: rgb(0, 145, 255);\n  border-color: var(--dough-color-selector-3);\n}\n.dough-avatar.has-border.dough-color-selector-4-border {\n  border-color: rgb(20, 202, 215);\n  border-color: var(--dough-color-selector-4);\n}\n.dough-avatar.has-border.dough-color-selector-5-border {\n  border-color: rgb(143, 0, 255);\n  border-color: var(--dough-color-selector-5);\n}\n.dough-avatar.has-border.dough-color-gray-1-border {\n  border-color: rgb(68, 68, 68);\n  border-color: var(--dough-color-gray-1);\n}\n.dough-avatar.has-border.dough-color-gray-2-border {\n  border-color: rgb(105, 105, 105);\n  border-color: var(--dough-color-gray-2);\n}\n.dough-avatar.has-border.dough-color-gray-3-border {\n  border-color: rgb(159, 159, 159);\n  border-color: var(--dough-color-gray-3);\n}\n.dough-avatar.has-border.dough-color-gray-4-border {\n  border-color: rgb(210, 210, 210);\n  border-color: var(--dough-color-gray-4);\n}\n.dough-avatar.has-border.dough-color-gray-5-border {\n  border-color: rgb(230, 230, 230);\n  border-color: var(--dough-color-gray-5);\n}\n.dough-avatar.has-border.dough-color-gray-6-border {\n  border-color: rgb(245, 245, 245);\n  border-color: var(--dough-color-gray-6);\n}\n.dough-avatar.has-border.dough-color-transparent-border {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-avatar.size-extra-small {\n  width: 16px !important;\n  height: 16px !important;\n}\n.dough-avatar.size-small {\n  width: 20px !important;\n  height: 20px !important;\n}\n.dough-avatar.size-normal {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-avatar.size-large {\n  width: 40px !important;\n  height: 40px !important;\n}\n.dough-avatar.size-extra-large {\n  width: 48px !important;\n  height: 48px !important;\n}\n.dough-avatar > .dough-avatar-content-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.dough-avatar > .dough-avatar-status-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  transform: rotateZ(135deg);\n  pointer-events: none;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status {\n  border: 3px solid rgba(0, 0, 0, 0);\n  border-radius: 100%;\n  pointer-events: initial;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  line-height: 0;\n  transform: rotateZ(-135deg);\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  z-index: 10;\n  width: 10px;\n  height: 10px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-background-border {\n  border-color: #eceffb;\n  border-color: var(--dough-color-background);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-theme-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-theme);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-white-border {\n  border-color: rgb(255, 255, 255);\n  border-color: var(--dough-color-white);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-primary-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-border {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-header);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-light-border {\n  border-color: rgb(94, 162, 233);\n  border-color: var(--dough-color-header-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-dark-border {\n  border-color: rgb(47, 101, 159);\n  border-color: var(--dough-color-header-dark);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-button-border {\n  border-color: rgb(71, 170, 60);\n  border-color: var(--dough-color-button);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-like-border {\n  border-color: rgb(242, 64, 37);\n  border-color: var(--dough-color-like);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-success-border {\n  border-color: rgb(0, 136, 0);\n  border-color: var(--dough-color-status-success);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-light-border {\n  border-color: rgb(255, 239, 221);\n  border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-border {\n  border-color: rgb(255, 136, 0);\n  border-color: var(--dough-color-status-warning);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-danger-border {\n  border-color: rgb(191, 41, 0);\n  border-color: var(--dough-color-status-danger);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-1-border {\n  border-color: rgb(250, 75, 52);\n  border-color: var(--dough-color-selector-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-2-border {\n  border-color: rgb(255, 168, 34);\n  border-color: var(--dough-color-selector-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-3-border {\n  border-color: rgb(0, 145, 255);\n  border-color: var(--dough-color-selector-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-4-border {\n  border-color: rgb(20, 202, 215);\n  border-color: var(--dough-color-selector-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-5-border {\n  border-color: rgb(143, 0, 255);\n  border-color: var(--dough-color-selector-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-1-border {\n  border-color: rgb(68, 68, 68);\n  border-color: var(--dough-color-gray-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-2-border {\n  border-color: rgb(105, 105, 105);\n  border-color: var(--dough-color-gray-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-3-border {\n  border-color: rgb(159, 159, 159);\n  border-color: var(--dough-color-gray-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-4-border {\n  border-color: rgb(210, 210, 210);\n  border-color: var(--dough-color-gray-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-5-border {\n  border-color: rgb(230, 230, 230);\n  border-color: var(--dough-color-gray-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-6-border {\n  border-color: rgb(245, 245, 245);\n  border-color: var(--dough-color-gray-6);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-transparent-border {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-tiny {\n  border-width: 2px;\n  width: 8px;\n  height: 8px;\n  margin-top: -4px;\n  margin-left: -4px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-small {\n  border-width: 2px;\n  width: 10px;\n  height: 10px;\n  margin-top: -5px;\n  margin-left: -5px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-small {\n  border-width: 2px;\n  width: 16px;\n  height: 16px;\n  margin-top: -8px;\n  margin-left: -8px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-normal {\n  width: 24px;\n  height: 24px;\n  margin-top: -12px;\n  margin-left: -12px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-large {\n  border-width: 4px;\n  width: 32px;\n  height: 32px;\n  margin-top: -16px;\n  margin-left: -16px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-large {\n  border-width: 4px;\n  width: 40px;\n  height: 40px;\n  margin-top: -20px;\n  margin-left: -20px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-huge {\n  border-width: 4px;\n  width: 48px;\n  height: 48px;\n  margin-top: -24px;\n  margin-left: -24px;\n}\n.dough-avatar.disabled {\n  pointer-events: none !important;\n  cursor: default;\n  opacity: 0.5;\n}\n.dough-avatar.disabled * {\n  pointer-events: none !important;\n}";
+styleInject(css_248z$E);
 
 var Avatar = function (props) {
     var _a;
@@ -4785,8 +5015,8 @@ var Avatar = function (props) {
 };
 Avatar.displayName = "Avatar";
 
-var css_248z$E = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fader {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n}\nhtml.dough-IE11 .dough-fader {\n  display: none;\n}\n.dough-fader > .dough-fader-top {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: 20px;\n  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-bottom {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: 20px;\n  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10;\n  width: 20px;\n  height: auto;\n  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-left {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: 20px;\n  height: auto;\n  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader.dough-fader-dark > .dough-fader-top,\n.dough-fader.dough-fader-dark > .dough-fader-right,\n.dough-fader.dough-fader-dark > .dough-fader-bottom,\n.dough-fader.dough-fader-dark > .dough-fader-left {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.dough-fader.dough-fader-full-size > .dough-fader-side {\n  height: 100%;\n  width: 100%;\n}\n.dough-fader > .dough-fader-side {\n  pointer-events: none;\n  display: none;\n}\n.dough-fader.dough-fader-top > .dough-fader-top {\n  display: block;\n}\n.dough-fader.dough-fader-right > .dough-fader-right {\n  display: block;\n}\n.dough-fader.dough-fader-bottom > .dough-fader-bottom {\n  display: block;\n}\n.dough-fader.dough-fader-left > .dough-fader-left {\n  display: block;\n}";
-styleInject(css_248z$E);
+var css_248z$F = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fader {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n}\nhtml.dough-IE11 .dough-fader {\n  display: none;\n}\n.dough-fader > .dough-fader-top {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: 20px;\n  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-bottom {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: 20px;\n  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10;\n  width: 20px;\n  height: auto;\n  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-left {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: 20px;\n  height: auto;\n  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);\n  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader.dough-fader-dark > .dough-fader-top,\n.dough-fader.dough-fader-dark > .dough-fader-right,\n.dough-fader.dough-fader-dark > .dough-fader-bottom,\n.dough-fader.dough-fader-dark > .dough-fader-left {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.dough-fader.dough-fader-full-size > .dough-fader-side {\n  height: 100%;\n  width: 100%;\n}\n.dough-fader > .dough-fader-side {\n  pointer-events: none;\n  display: none;\n}\n.dough-fader.dough-fader-top > .dough-fader-top {\n  display: block;\n}\n.dough-fader.dough-fader-right > .dough-fader-right {\n  display: block;\n}\n.dough-fader.dough-fader-bottom > .dough-fader-bottom {\n  display: block;\n}\n.dough-fader.dough-fader-left > .dough-fader-left {\n  display: block;\n}";
+styleInject(css_248z$F);
 
 var Fader = function (props) { return (React__default.createElement("span", __assign({ className: cn(props.className, "dough-fader", {
         "dough-fader-dark": props.dark,
@@ -4818,116 +5048,14 @@ var Fader = function (props) { return (React__default.createElement("span", __as
                 : exports.Colors.THEME, "dough-fader-side dough-fader-left") }))); };
 Fader.displayName = "Fader";
 
-var css_248z$F = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n}\nhtml.dough-IE11 .dough-overlay {\n  display: none;\n}";
-styleInject(css_248z$F);
+var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n}\nhtml.dough-IE11 .dough-overlay {\n  display: none;\n}";
+styleInject(css_248z$G);
 
 var Overlay = function (props) { return (React__default.createElement("span", __assign({ className: cn(props.className, "dough-overlay", props.color) }, props.dataAttributes, { style: {
         opacity: props.opacity,
     } }))); };
 Overlay.displayName = "Overlay";
 
-var DesignTokens = {
-    colors: {
-        colorWhite: "#ffffff",
-        colorBackdropDark: "rgba(0,0,0,0.8)",
-        colorBackdrop: "rgba(0,0,0,0.4)",
-        colorGrey6: "#f5f5f5",
-        colorGrey5: "#e6e6e6",
-        colorGrey4: "#d2d2d2",
-        colorGrey3: "#9f9f9f",
-        colorGrey2: "#696969",
-        colorGrey1: "#444444",
-        colorStatusWarningLight: "#ffefdd",
-        colorStatusWarning: "#ff8800",
-        colorStatusSuccess: "#008800",
-        colorStatusDanger: "#bf2900",
-        colorBrandButton: "#47aa3c",
-        colorBrandButtonHover: "#39942f",
-        colorBrandButtonClick: "#2a7f20",
-        colorBrandHeaderLight: "#5ea2e9",
-        colorBrandHeader: "#4484c7",
-        colorBrandHeaderDark: "#2f659f",
-        colorLike: "#F24025",
-    },
-    fixedColors: {
-        colorSelector1: "#fa4b34",
-        colorSelector2: "#ffa822",
-        colorSelector3: "#0091ff",
-        colorSelector4: "#14cad7",
-        colorSelector5: "#8f00ff",
-    },
-    textColors: {
-        colorTextWarning: "#bf2900",
-        colorTextSuccess: "#008800",
-        colorTextDanger: "#bf2900",
-        colorTextBrandLink: "#4484c7",
-        colorTextWhite: "#ffffff",
-        colorTextLight: "#9e9e9e",
-        colorTextDefault: "#6e6f75",
-        colorTextDark: "#444444",
-        colorIconWhite: "#ffffff",
-        colorIconPrimary: "#4484c7",
-        colorIconDefault: "#999999",
-    },
-    typography: {
-        textSmall: "0.8125rem",
-        textBase: "0.875rem",
-        textH5: "1rem",
-        textH4: "1.125rem",
-        textH3: "1.25rem",
-        textH2: "1.5rem",
-        textH1: "1.625rem",
-        textTiny: "0.6875rem",
-        lineHeightHeading: "1.25",
-        lineHeightBody: "1.5",
-        lineHeightReset: "1",
-        fontWeightRegular: "400",
-        fontWeightBold: "700",
-        fontFamilyBase: "Roboto",
-    },
-    spacing: {
-        spacerHalf: "4px",
-        spacer1: "8px",
-        spacer2: "16px",
-        spacer3: "24px",
-        spacer4: "32px",
-        spacer5: "40px",
-        spacer6: "48px",
-    },
-    borders: {
-        borderSolidWhite3: "3px solid #ffffff",
-        borderSolidWhite2: "2px solid #ffffff",
-        borderSolidWhite1: "1px solid #ffffff",
-        borderDottedLight3: "3px dashed #ededed",
-        borderSolidLight3: "3px solid #ededed",
-        borderDottedLight2: "2px dashed #ededed",
-        borderSolidLight2: "2px solid #ededed",
-        borderDottedLight1: "1px dashed #ededed",
-        borderSolidLight1: "1px solid #ededed",
-    },
-    shadows: {
-        boxShadowDropdown: "0 2px 20px 0 rgba(0,0,0,0.1)",
-        boxShadowNotify: "0 1px 15px 0 rgba(0,0,0,0.2)",
-        boxShadowCard: "0 1px 1px 0 rgba(0,0,0,0.1)",
-        boxShadowButton: "0 1px 3px 0 rgba(0,0,0,0.2)",
-    },
-    sizes: {
-        sizeDialogSmall: "464px",
-        sizeDialogMedium: "768px",
-        sizeDialogLarge: "1024px",
-        sizeViewportExtraLarge: "1200px",
-        sizeViewportLarge: "1080px",
-        sizeViewportMedium: "768px",
-        sizeViewportSmall: "576px",
-        sizeHeaderHeight: "56px",
-        sizeAvatarXs: "24px",
-        sizeAvatarS: "32px",
-        sizeAvatarM: "40px",
-        sizeAvatarL: "80px",
-        sizeAvatarXl: "120px",
-    },
-};
-
 var IconArrowLeft = {
     src: "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\" >\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"-10 0 895 1000\">\n   <path fill=\"currentColor\"\nd=\"M449 926l39 -39q7 -7 7 -16.5t-7 -16.5l-303 -303h667q10 0 16.5 -7t6.5 -17v-54q0 -10 -6.5 -17t-16.5 -7h-667l303 -303q7 -7 7 -16.5t-7 -16.5l-39 -39q-7 -7 -16.5 -7t-16.5 7l-409 409q-7 7 -7 16.5t7 17.5l409 409q7 7 16.5 7t16.5 -7z\" />\n</svg>\n",
     key: "arrow-left",
@@ -4938,8 +5066,8 @@ var IconArrowRight = {
     key: "arrow-right",
 };
 
-var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-horizontal-list-slider-container {\n  transition: transform 450ms cubic-bezier(0.25, 1, 0, 1);\n}\n\n.dough-horizontal-list-slider-buttons-wrapper {\n  z-index: 100 !important;\n  pointer-events: none;\n}\n.dough-horizontal-list-slider-buttons-wrapper .dough-horizonal-list-slider-button-icon > svg {\n  width: 15px;\n  height: 15px;\n}\n\n@media not screen and (hover: hover) and (pointer: fine) {\n  .dough-horizontal-list-slider-wrapper {\n    padding-left: 16px;\n    padding-right: 16px;\n    overflow-x: auto !important;\n    padding-bottom: 16px;\n    margin-bottom: -16px;\n  }\n  .dough-horizontal-list-slider-slide-button {\n    display: none !important;\n  }\n  .dough-horizontal-list-slider-fader > .dough-fader-right,\n.dough-horizontal-list-slider-fader > .dough-fader-left {\n    display: block !important;\n  }\n}";
-styleInject(css_248z$G);
+var css_248z$H = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-horizontal-list-slider-container {\n  transition: transform 450ms cubic-bezier(0.25, 1, 0, 1);\n}\n\n.dough-horizontal-list-slider-buttons-wrapper {\n  z-index: 100 !important;\n  pointer-events: none;\n}\n.dough-horizontal-list-slider-buttons-wrapper .dough-horizonal-list-slider-button-icon > svg {\n  width: 15px;\n  height: 15px;\n}\n\n@media not screen and (hover: hover) and (pointer: fine) {\n  .dough-horizontal-list-slider-wrapper {\n    padding-left: 16px;\n    padding-right: 16px;\n    overflow-x: auto !important;\n    padding-bottom: 16px;\n    margin-bottom: -16px;\n  }\n  .dough-horizontal-list-slider-slide-button {\n    display: none !important;\n  }\n  .dough-horizontal-list-slider-fader > .dough-fader-right,\n.dough-horizontal-list-slider-fader > .dough-fader-left {\n    display: block !important;\n  }\n}";
+styleInject(css_248z$H);
 
 var HorizontalListSlider = function (props) {
     var _a = React.useState(false), showLeftSlideButton = _a[0], setShowLeftSlideButton = _a[1];
@@ -5035,8 +5163,8 @@ var HorizontalListSlider = function (props) {
 };
 HorizontalListSlider.displayName = "HorizontalListSlider";
 
-var css_248z$H = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\nbody:not(.no-transition) .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n  transition: transform 750ms cubic-bezier(0.5, 0.25, 0.25, 1);\n}\nbody.no-transition .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-carouel-wrapper > .dough-carousel-touch-listener {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  width: auto;\n  height: auto;\n  background-color: rgba(255, 0, 0, 0.2);\n  display: block;\n}\n\n@media not screen and (hover: hover) and (pointer: fine) {\n  body:not(.no-transition) .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n    transition: transform 1000ms cubic-bezier(0.2, 0.75, 0, 1);\n  }\n  body.no-transition .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n    transition: none 0ms linear !important;\n    transition-delay: 0ms !important;\n  }\n}";
-styleInject(css_248z$H);
+var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\nbody:not(.no-transition) .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n  transition: transform 750ms cubic-bezier(0.5, 0.25, 0.25, 1);\n}\nbody.no-transition .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-carouel-wrapper > .dough-carousel-touch-listener {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  width: auto;\n  height: auto;\n  background-color: rgba(255, 0, 0, 0.2);\n  display: block;\n}\n\n@media not screen and (hover: hover) and (pointer: fine) {\n  body:not(.no-transition) .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n    transition: transform 1000ms cubic-bezier(0.2, 0.75, 0, 1);\n  }\n  body.no-transition .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n    transition: none 0ms linear !important;\n    transition-delay: 0ms !important;\n  }\n}";
+styleInject(css_248z$I);
 
 var Carousel = function (props) {
     var conatinerRef = React.useRef(null);
@@ -5134,8 +5262,8 @@ var Carousel = function (props) {
 };
 Carousel.displayName = "Carousel";
 
-var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\nbody:not(.no-transition) .dough-content-slider > .dough-content-slider-inner {\n  transition: all 350ms cubic-bezier(0.2, 1, 0, 1);\n}\nbody.no-transition .dough-content-slider > .dough-content-slider-inner {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-content-slider > .dough-content-slider-inner.dough-content-slider-inner-to-left {\n  transform: translate3d(-100%, 0, 0);\n  opacity: 0;\n}\n.dough-content-slider > .dough-content-slider-inner.dough-content-slider-inner-to-right {\n  transform: translate3d(100%, 0, 0);\n  opacity: 0;\n}";
-styleInject(css_248z$I);
+var css_248z$J = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\nbody:not(.no-transition) .dough-content-slider > .dough-content-slider-inner {\n  transition: all 350ms cubic-bezier(0.2, 1, 0, 1);\n}\nbody.no-transition .dough-content-slider > .dough-content-slider-inner {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-content-slider > .dough-content-slider-inner.dough-content-slider-inner-to-left {\n  transform: translate3d(-100%, 0, 0);\n  opacity: 0;\n}\n.dough-content-slider > .dough-content-slider-inner.dough-content-slider-inner-to-right {\n  transform: translate3d(100%, 0, 0);\n  opacity: 0;\n}";
+styleInject(css_248z$J);
 
 var ContentSlider = function (props) {
     var _a = React.useState(props.children), appliedChildren = _a[0], setAppliedChildren = _a[1];
@@ -5179,8 +5307,8 @@ var ContentSlider = function (props) {
 };
 ContentSlider.displayName = "ContentSlider";
 
-var css_248z$J = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
-styleInject(css_248z$J);
+var css_248z$K = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
+styleInject(css_248z$K);
 
 var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
 var Image = function (props) {
@@ -5213,8 +5341,8 @@ var Image = function (props) {
 };
 Image.displayName = "Image";
 
-var css_248z$K = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-carousel {\n  position: relative;\n  display: block;\n}\n.dough-image-carousel > .dough-image-carousel-item {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  display: block;\n  opacity: 0;\n}";
-styleInject(css_248z$K);
+var css_248z$L = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-carousel {\n  position: relative;\n  display: block;\n}\n.dough-image-carousel > .dough-image-carousel-item {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  display: block;\n  opacity: 0;\n}";
+styleInject(css_248z$L);
 
 var ImageCarousel = function (props) {
     var _a = props.duration, duration = _a === void 0 ? 5000 : _a, _b = props.height, height = _b === void 0 ? "100%" : _b, _c = props.width, width = _c === void 0 ? "100%" : _c;
@@ -5281,8 +5409,8 @@ var ImageCarousel = function (props) {
 };
 ImageCarousel.displayName = "ImageCarousel";
 
-var css_248z$L = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-table {\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-table > .dough-table-row-wrapper {\n  font-size: 0.875rem;\n  position: relative;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container {\n  width: 100%;\n  display: block;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n  position: absolute;\n  top: 0;\n  right: 8px;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  opacity: 0;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header {\n  align-items: stretch;\n  padding: 0;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell {\n  padding: 16px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 1px !important;\n  overflow: hidden;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.v-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.v-border {\n  border-bottom: 1px solid #ededed;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.h-border:not(:first-child),\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.h-border:not(:first-child) {\n  border-left: 1px solid #ededed;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.no-v-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.no-v-border {\n  border-bottom: none !important;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.no-h-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.no-h-border {\n  border-left: none !important;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header {\n  font-weight: 700;\n  background-color: rgb(245, 245, 245);\n  background-color: var(--dough-color-gray-6);\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container.keep-active > .dough-table-row-button-list-container, .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container:hover > .dough-table-row-button-list-container {\n  opacity: 1;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container.keep-active > .dough-table-row.dough-table-row-clickable, .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container:hover > .dough-table-row.dough-table-row-clickable {\n  cursor: pointer;\n  background-color: rgb(245, 245, 245);\n  background-color: var(--dough-color-gray-6);\n}\n.dough-table.dough-table-vertical-borders > .dough-table-row-wrapper:not(:last-child) > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell,\n.dough-table.dough-table-vertical-borders > .dough-table-row-wrapper:not(:last-child) > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell:not(.no-v-border) {\n  border-bottom: 1px solid #ededed;\n}\n.dough-table.dough-table-horizontal-borders > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell:not(:first-child):not(.no-h-border) {\n  border-left: 1px solid #ededed;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n  opacity: 1;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container > .dough-drop-menu > .dough-button-wrapper > .dough-button {\n  background-color: rgba(255, 255, 255, 0.5);\n  background-color: rgba(var(--dough-color-white), 0.5);\n}\n\n@media only screen and (max-width: 768px) {\n  body:not(.dough-no-viewport-control) .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n    opacity: 1;\n  }\n  body:not(.dough-no-viewport-control) .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container > .dough-drop-menu > .dough-button-wrapper > .dough-button {\n    background-color: rgba(255, 255, 255, 0.5);\n    background-color: rgba(var(--dough-color-white), 0.5);\n  }\n}";
-styleInject(css_248z$L);
+var css_248z$M = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-table {\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-table > .dough-table-row-wrapper {\n  font-size: 0.875rem;\n  position: relative;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container {\n  width: 100%;\n  display: block;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n  position: absolute;\n  top: 0;\n  right: 8px;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  opacity: 0;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header {\n  align-items: stretch;\n  padding: 0;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell {\n  padding: 16px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 1px !important;\n  overflow: hidden;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.v-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.v-border {\n  border-bottom: 1px solid #ededed;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.h-border:not(:first-child),\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.h-border:not(:first-child) {\n  border-left: 1px solid #ededed;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.no-v-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.no-v-border {\n  border-bottom: none !important;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.no-h-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.no-h-border {\n  border-left: none !important;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header {\n  font-weight: 700;\n  background-color: rgb(245, 245, 245);\n  background-color: var(--dough-color-gray-6);\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container.keep-active > .dough-table-row-button-list-container, .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container:hover > .dough-table-row-button-list-container {\n  opacity: 1;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container.keep-active > .dough-table-row.dough-table-row-clickable, .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container:hover > .dough-table-row.dough-table-row-clickable {\n  cursor: pointer;\n  background-color: rgb(245, 245, 245);\n  background-color: var(--dough-color-gray-6);\n}\n.dough-table.dough-table-vertical-borders > .dough-table-row-wrapper:not(:last-child) > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell,\n.dough-table.dough-table-vertical-borders > .dough-table-row-wrapper:not(:last-child) > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell:not(.no-v-border) {\n  border-bottom: 1px solid #ededed;\n}\n.dough-table.dough-table-horizontal-borders > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell:not(:first-child):not(.no-h-border) {\n  border-left: 1px solid #ededed;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n  opacity: 1;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container > .dough-drop-menu > .dough-button-wrapper > .dough-button {\n  background-color: rgba(255, 255, 255, 0.5);\n  background-color: rgba(var(--dough-color-white), 0.5);\n}\n\n@media only screen and (max-width: 768px) {\n  body:not(.dough-no-viewport-control) .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n    opacity: 1;\n  }\n  body:not(.dough-no-viewport-control) .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container > .dough-drop-menu > .dough-button-wrapper > .dough-button {\n    background-color: rgba(255, 255, 255, 0.5);\n    background-color: rgba(var(--dough-color-white), 0.5);\n  }\n}";
+styleInject(css_248z$M);
 
 var Table = function (props) {
     var _a = props.verticalBorders, verticalBorders = _a === void 0 ? true : _a, _b = props.horizontalBorders, horizontalBorders = _b === void 0 ? true : _b;
@@ -5337,8 +5465,8 @@ var TableCell = function (props) {
 };
 TableCell.displayName = "TableCell";
 
-var css_248z$M = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-skeleton {\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: transparent;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  pointer-events: all;\n  transform: translateZ(0);\n  cursor: default;\n}\n.dough-skeleton.dough-skeleton-fit-to-parent {\n  height: 100%;\n}\n.dough-skeleton.dough-skeleton-circular {\n  border-radius: 100%;\n}\n.dough-skeleton + .dough-skeleton {\n  margin-top: 8px;\n}\n.dough-skeleton > div {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n}\n.dough-skeleton > .dough-skeleton-row {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-half {\n  width: 50%;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-slim {\n  height: 8px;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-slim + .dough-skeleton-row:last-child {\n  width: 65%;\n}\n.dough-skeleton > .dough-skeleton-row + .dough-skeleton-row {\n  margin-top: 8px;\n}\n.dough-skeleton > .dough-skeleton-box.size-none {\n  width: 0;\n  height: 0;\n}\n.dough-skeleton > .dough-skeleton-box.size-huge {\n  width: 48px;\n  height: 48px;\n}\n.dough-skeleton > .dough-skeleton-box.size-extra-large {\n  width: 40px;\n  height: 40px;\n}\n.dough-skeleton > .dough-skeleton-box.size-large {\n  width: 32px;\n  height: 32px;\n}\n.dough-skeleton > .dough-skeleton-box.size-normal {\n  width: 24px;\n  height: 24px;\n}\n.dough-skeleton > .dough-skeleton-box.size-small {\n  width: 16px;\n  height: 16px;\n}\n.dough-skeleton > .dough-skeleton-box.size-extra-small {\n  width: 8px;\n  height: 8px;\n}\n.dough-skeleton > .dough-skeleton-box.size-tiny {\n  width: 4px;\n  height: 4px;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-fit-to-parent {\n  width: 100% !important;\n  height: 100% !important;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-circular {\n  border-radius: 100%;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h, .dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v {\n  position: relative;\n  background-color: transparent !important;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h > .after, .dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v > .after {\n  position: absolute;\n  border-radius: 4px;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h > .after {\n  top: 4px;\n  height: calc(100% - 8px);\n  left: 0;\n  width: 100%;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v > .after {\n  top: 0;\n  height: 100%;\n  left: 4px;\n  width: calc(100% - 8px);\n}\n.dough-skeleton > div:not(:empty) > span {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.dough-skeleton.dough-skeleton-animated * {\n  position: relative;\n}\n.dough-skeleton.dough-skeleton-animated > div:empty:before,\n.dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 99;\n  width: auto;\n  height: auto;\n  background-color: rgba(0, 0, 0, 0);\n  opacity: 0.9;\n  background-image: linear-gradient(-75deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 255, 0) 30%, white 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);\n  background-image: linear-gradient(-75deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 255, 0) 30%, var(--dough-color-theme) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);\n  background-size: 500% 500%;\n}\nbody:not(.no-transition) .dough-skeleton.dough-skeleton-animated > div:empty:before,\nbody:not(.no-transition) .dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n  animation: glass-reflection 2000ms 1000ms linear infinite;\n}\nbody.no-transition .dough-skeleton.dough-skeleton-animated > div:empty:before,\nbody.no-transition .dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n  animation: none 0ms linear;\n  animation-delay: 0ms !important;\n}\n\n@keyframes glass-reflection {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}";
-styleInject(css_248z$M);
+var css_248z$N = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-skeleton {\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: transparent;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  pointer-events: all;\n  transform: translateZ(0);\n  cursor: default;\n}\n.dough-skeleton.dough-skeleton-fit-to-parent {\n  height: 100%;\n}\n.dough-skeleton.dough-skeleton-circular {\n  border-radius: 100%;\n}\n.dough-skeleton + .dough-skeleton {\n  margin-top: 8px;\n}\n.dough-skeleton > div {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n}\n.dough-skeleton > .dough-skeleton-row {\n  width: 100%;\n  height: 12px;\n  border-radius: 4px;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-half {\n  width: 50%;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-slim {\n  height: 8px;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-slim + .dough-skeleton-row:last-child {\n  width: 65%;\n}\n.dough-skeleton > .dough-skeleton-row + .dough-skeleton-row {\n  margin-top: 8px;\n}\n.dough-skeleton > .dough-skeleton-box.size-none {\n  width: 0;\n  height: 0;\n}\n.dough-skeleton > .dough-skeleton-box.size-huge {\n  width: 48px;\n  height: 48px;\n}\n.dough-skeleton > .dough-skeleton-box.size-extra-large {\n  width: 40px;\n  height: 40px;\n}\n.dough-skeleton > .dough-skeleton-box.size-large {\n  width: 32px;\n  height: 32px;\n}\n.dough-skeleton > .dough-skeleton-box.size-normal {\n  width: 24px;\n  height: 24px;\n}\n.dough-skeleton > .dough-skeleton-box.size-small {\n  width: 16px;\n  height: 16px;\n}\n.dough-skeleton > .dough-skeleton-box.size-extra-small {\n  width: 8px;\n  height: 8px;\n}\n.dough-skeleton > .dough-skeleton-box.size-tiny {\n  width: 4px;\n  height: 4px;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-fit-to-parent {\n  width: 100% !important;\n  height: 100% !important;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-circular {\n  border-radius: 100%;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h, .dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v {\n  position: relative;\n  background-color: transparent !important;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h > .after, .dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v > .after {\n  position: absolute;\n  border-radius: 4px;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h > .after {\n  top: 4px;\n  height: calc(100% - 8px);\n  left: 0;\n  width: 100%;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v > .after {\n  top: 0;\n  height: 100%;\n  left: 4px;\n  width: calc(100% - 8px);\n}\n.dough-skeleton > div:not(:empty) > span {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.dough-skeleton.dough-skeleton-animated * {\n  position: relative;\n}\n.dough-skeleton.dough-skeleton-animated > div:empty:before,\n.dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 99;\n  width: auto;\n  height: auto;\n  background-color: rgba(0, 0, 0, 0);\n  opacity: 0.9;\n  background-image: linear-gradient(-75deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 255, 0) 30%, white 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);\n  background-image: linear-gradient(-75deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 255, 0) 30%, var(--dough-color-theme) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);\n  background-size: 500% 500%;\n}\nbody:not(.no-transition) .dough-skeleton.dough-skeleton-animated > div:empty:before,\nbody:not(.no-transition) .dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n  animation: glass-reflection 2000ms 1000ms linear infinite;\n}\nbody.no-transition .dough-skeleton.dough-skeleton-animated > div:empty:before,\nbody.no-transition .dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n  animation: none 0ms linear;\n  animation-delay: 0ms !important;\n}\n\n@keyframes glass-reflection {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}";
+styleInject(css_248z$N);
 
 (function (SkeletonShape) {
     SkeletonShape["LINE"] = "line";
@@ -5378,91 +5506,8 @@ var Skeleton = function (props) {
 };
 Skeleton.displayName = "Skeleton";
 
-var css_248z$N = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-grid {\n  display: grid;\n  box-sizing: border-box;\n}\nhtml.dough-IE11 .dough-grid {\n  display: -ms-grid;\n}\n.dough-grid.dough-padding-top-none {\n  padding-top: 0;\n}\n.dough-grid.dough-padding-right-none {\n  padding-right: 0;\n}\n.dough-grid.dough-padding-bottom-none {\n  padding-bottom: 0;\n}\n.dough-grid.dough-padding-left-none {\n  padding-left: 0;\n}\n.dough-grid.dough-padding-none {\n  padding: 0;\n}\n.dough-grid.dough-padding-top-huge {\n  padding-top: 48px;\n}\n.dough-grid.dough-padding-right-huge {\n  padding-right: 48px;\n}\n.dough-grid.dough-padding-bottom-huge {\n  padding-bottom: 48px;\n}\n.dough-grid.dough-padding-left-huge {\n  padding-left: 48px;\n}\n.dough-grid.dough-padding-huge {\n  padding: 48px;\n}\n.dough-grid.dough-padding-top-extra-large {\n  padding-top: 40px;\n}\n.dough-grid.dough-padding-right-extra-large {\n  padding-right: 40px;\n}\n.dough-grid.dough-padding-bottom-extra-large {\n  padding-bottom: 40px;\n}\n.dough-grid.dough-padding-left-extra-large {\n  padding-left: 40px;\n}\n.dough-grid.dough-padding-extra-large {\n  padding: 40px;\n}\n.dough-grid.dough-padding-top-large {\n  padding-top: 32px;\n}\n.dough-grid.dough-padding-right-large {\n  padding-right: 32px;\n}\n.dough-grid.dough-padding-bottom-large {\n  padding-bottom: 32px;\n}\n.dough-grid.dough-padding-left-large {\n  padding-left: 32px;\n}\n.dough-grid.dough-padding-large {\n  padding: 32px;\n}\n.dough-grid.dough-padding-top-normal {\n  padding-top: 24px;\n}\n.dough-grid.dough-padding-right-normal {\n  padding-right: 24px;\n}\n.dough-grid.dough-padding-bottom-normal {\n  padding-bottom: 24px;\n}\n.dough-grid.dough-padding-left-normal {\n  padding-left: 24px;\n}\n.dough-grid.dough-padding-normal {\n  padding: 24px;\n}\n.dough-grid.dough-padding-top-small {\n  padding-top: 16px;\n}\n.dough-grid.dough-padding-right-small {\n  padding-right: 16px;\n}\n.dough-grid.dough-padding-bottom-small {\n  padding-bottom: 16px;\n}\n.dough-grid.dough-padding-left-small {\n  padding-left: 16px;\n}\n.dough-grid.dough-padding-small {\n  padding: 16px;\n}\n.dough-grid.dough-padding-top-extra-small {\n  padding-top: 8px;\n}\n.dough-grid.dough-padding-right-extra-small {\n  padding-right: 8px;\n}\n.dough-grid.dough-padding-bottom-extra-small {\n  padding-bottom: 8px;\n}\n.dough-grid.dough-padding-left-extra-small {\n  padding-left: 8px;\n}\n.dough-grid.dough-padding-extra-small {\n  padding: 8px;\n}\n.dough-grid.dough-padding-top-tiny {\n  padding-top: 4px;\n}\n.dough-grid.dough-padding-right-tiny {\n  padding-right: 4px;\n}\n.dough-grid.dough-padding-bottom-tiny {\n  padding-bottom: 4px;\n}\n.dough-grid.dough-padding-left-tiny {\n  padding-left: 4px;\n}\n.dough-grid.dough-padding-tiny {\n  padding: 4px;\n}\n\n.dough-grid-item {\n  position: relative;\n  display: block;\n}";
-styleInject(css_248z$N);
-
-var _a;
-var IE11SpecificCases = {
-    flex: function (value) { return value + " " + value + " auto"; },
-};
-var MediaQueryDevices;
-(function (MediaQueryDevices) {
-    MediaQueryDevices["MOBILE"] = "mobile";
-    MediaQueryDevices["TABLETPORTRAIT"] = "tabletPortrait";
-    MediaQueryDevices["TABLETLANDSCAPE"] = "tabletLandscape";
-    MediaQueryDevices["DESKTOP"] = "desktop";
-})(MediaQueryDevices || (MediaQueryDevices = {}));
-var enumToStyleValueMap = (_a = {},
-    _a[exports.Sizes.XXS] = DesignTokens.spacing.spacerHalf,
-    _a[exports.Sizes.XS] = DesignTokens.spacing.spacer1,
-    _a[exports.Sizes.SMALL] = DesignTokens.spacing.spacer2,
-    _a[exports.Sizes.NORMAL] = DesignTokens.spacing.spacer3,
-    _a[exports.Sizes.LARGE] = DesignTokens.spacing.spacer4,
-    _a[exports.Sizes.XL] = DesignTokens.spacing.spacer5,
-    _a[exports.Sizes.XXL] = DesignTokens.spacing.spacer6,
-    _a);
-var getStyleValue = function (styleValue) {
-    if (enumToStyleValueMap[styleValue] === undefined) {
-        return styleValue;
-    }
-    return enumToStyleValueMap[styleValue];
-};
-var getMediaQueryStyles = function (props, propToStyleMap, deviceType) {
-    var mediaQueryStyles = "";
-    Object.keys(propToStyleMap).forEach(function (propKey) {
-        if (deviceType &&
-            typeof props[propKey] === "object" &&
-            props[propKey][deviceType] !== undefined) {
-            mediaQueryStyles += "\n                 " + propToStyleMap[propKey]
-                .map(function (styleAttr) {
-                return styleAttr + ": " + getStyleValue(props[propKey][deviceType]) + ";";
-            })
-                .join("") + "\n             ";
-        }
-        else if (deviceType === undefined &&
-            typeof props[propKey] === "string") {
-            mediaQueryStyles += "\n                 " + propToStyleMap[propKey]
-                .map(function (styleAttr) {
-                return styleAttr + ": " + getStyleValue(props[propKey]) + ";";
-            })
-                .join("") + "\n             ";
-        }
-    });
-    return mediaQueryStyles;
-};
-var getIESpecificStyles = function (props, propToStyleMap) {
-    var IE11Styles = "";
-    Object.keys(propToStyleMap).forEach(function (propKey) {
-        IE11Styles += "\n                 " + propToStyleMap[propKey]
-            .map(function (styleAttr) {
-            if (IE11SpecificCases[styleAttr]) {
-                return styleAttr + ": " + IE11SpecificCases[styleAttr](getStyleValue(props[propKey])) + ";";
-            }
-            return "";
-        })
-            .join("") + "\n             ";
-    });
-    return IE11Styles;
-};
-var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
-    var elementMainStyles = "";
-    var mainStyleProps = getMediaQueryStyles(props, propToStyleMap);
-    if (mainStyleProps.trim() !== "") {
-        elementMainStyles = "\n        " + selector + " {\n            " + mainStyleProps + "\n        }\n        ";
-        if (!!window.MSInputMethodContext && !!document.documentMode) {
-            var ie11Styles = getIESpecificStyles(props, propToStyleMap);
-            if (ie11Styles.trim() !== "") {
-                elementMainStyles += "\n                html.dough-IE11 " + selector + " {\n                    " + mainStyleProps + "\n                }\n                ";
-            }
-        }
-    }
-    if (!noMediaQuery) {
-        elementMainStyles += "\n        @media (min-width: 0px) and (max-width: " + DesignTokens.sizes.sizeViewportSmall + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.MOBILE) + "\n           }\n        }\n        @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportSmall) +
-            1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportMedium + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETPORTRAIT) + "\n           }\n        }\n        @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportMedium) +
-            1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETLANDSCAPE) + "\n           }\n        }\n        @media (min-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n           " + selector + " {\n               " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.DESKTOP) + "\n           }\n        }";
-    }
-    return elementMainStyles;
-};
+var css_248z$O = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-grid {\n  display: grid;\n  box-sizing: border-box;\n}\nhtml.dough-IE11 .dough-grid {\n  display: -ms-grid;\n}\n.dough-grid.dough-padding-top-none {\n  padding-top: 0;\n}\n.dough-grid.dough-padding-right-none {\n  padding-right: 0;\n}\n.dough-grid.dough-padding-bottom-none {\n  padding-bottom: 0;\n}\n.dough-grid.dough-padding-left-none {\n  padding-left: 0;\n}\n.dough-grid.dough-padding-none {\n  padding: 0;\n}\n.dough-grid.dough-padding-top-huge {\n  padding-top: 48px;\n}\n.dough-grid.dough-padding-right-huge {\n  padding-right: 48px;\n}\n.dough-grid.dough-padding-bottom-huge {\n  padding-bottom: 48px;\n}\n.dough-grid.dough-padding-left-huge {\n  padding-left: 48px;\n}\n.dough-grid.dough-padding-huge {\n  padding: 48px;\n}\n.dough-grid.dough-padding-top-extra-large {\n  padding-top: 40px;\n}\n.dough-grid.dough-padding-right-extra-large {\n  padding-right: 40px;\n}\n.dough-grid.dough-padding-bottom-extra-large {\n  padding-bottom: 40px;\n}\n.dough-grid.dough-padding-left-extra-large {\n  padding-left: 40px;\n}\n.dough-grid.dough-padding-extra-large {\n  padding: 40px;\n}\n.dough-grid.dough-padding-top-large {\n  padding-top: 32px;\n}\n.dough-grid.dough-padding-right-large {\n  padding-right: 32px;\n}\n.dough-grid.dough-padding-bottom-large {\n  padding-bottom: 32px;\n}\n.dough-grid.dough-padding-left-large {\n  padding-left: 32px;\n}\n.dough-grid.dough-padding-large {\n  padding: 32px;\n}\n.dough-grid.dough-padding-top-normal {\n  padding-top: 24px;\n}\n.dough-grid.dough-padding-right-normal {\n  padding-right: 24px;\n}\n.dough-grid.dough-padding-bottom-normal {\n  padding-bottom: 24px;\n}\n.dough-grid.dough-padding-left-normal {\n  padding-left: 24px;\n}\n.dough-grid.dough-padding-normal {\n  padding: 24px;\n}\n.dough-grid.dough-padding-top-small {\n  padding-top: 16px;\n}\n.dough-grid.dough-padding-right-small {\n  padding-right: 16px;\n}\n.dough-grid.dough-padding-bottom-small {\n  padding-bottom: 16px;\n}\n.dough-grid.dough-padding-left-small {\n  padding-left: 16px;\n}\n.dough-grid.dough-padding-small {\n  padding: 16px;\n}\n.dough-grid.dough-padding-top-extra-small {\n  padding-top: 8px;\n}\n.dough-grid.dough-padding-right-extra-small {\n  padding-right: 8px;\n}\n.dough-grid.dough-padding-bottom-extra-small {\n  padding-bottom: 8px;\n}\n.dough-grid.dough-padding-left-extra-small {\n  padding-left: 8px;\n}\n.dough-grid.dough-padding-extra-small {\n  padding: 8px;\n}\n.dough-grid.dough-padding-top-tiny {\n  padding-top: 4px;\n}\n.dough-grid.dough-padding-right-tiny {\n  padding-right: 4px;\n}\n.dough-grid.dough-padding-bottom-tiny {\n  padding-bottom: 4px;\n}\n.dough-grid.dough-padding-left-tiny {\n  padding-left: 4px;\n}\n.dough-grid.dough-padding-tiny {\n  padding: 4px;\n}\n\n.dough-grid-item {\n  position: relative;\n  display: block;\n}";
+styleInject(css_248z$O);
 
 (function (GridItemsAlignment) {
     GridItemsAlignment["START"] = "start";
@@ -5606,6 +5651,7 @@ exports.NumericInput = NumericInput;
 exports.Overlay = Overlay;
 exports.PanelOverlay = PanelOverlay;
 exports.Paragraph = Paragraph;
+exports.ProgressBar = ProgressBar;
 exports.RadioGroup = RadioGroup;
 exports.RadioOption = RadioOption;
 exports.SelectBox = SelectBox;