@speakapbv/dough-component-library 9.30.0 → 9.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/progress-bar/progress-bar.d.ts +14 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.es.js +240 -219
  4. package/dist/index.js +240 -218
  5. package/dist/src/components/progress-bar/progress-bar.stories.d.ts +3 -0
  6. package/dist/src/utils/styles.d.ts +3 -0
  7. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -4486,9 +4486,215 @@ var PanelOverlay = function (props) {
4486
4486
  };
4487
4487
  PanelOverlay.displayName = "PanelOverlay";
4488
4488
 
4489
- 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}";
4489
+ 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}";
4490
4490
  styleInject(css_248z$x);
4491
4491
 
4492
+ var DesignTokens = {
4493
+ colors: {
4494
+ colorWhite: "#ffffff",
4495
+ colorBackdropDark: "rgba(0,0,0,0.8)",
4496
+ colorBackdrop: "rgba(0,0,0,0.4)",
4497
+ colorGrey6: "#f5f5f5",
4498
+ colorGrey5: "#e6e6e6",
4499
+ colorGrey4: "#d2d2d2",
4500
+ colorGrey3: "#9f9f9f",
4501
+ colorGrey2: "#696969",
4502
+ colorGrey1: "#444444",
4503
+ colorStatusWarningLight: "#ffefdd",
4504
+ colorStatusWarning: "#ff8800",
4505
+ colorStatusSuccess: "#008800",
4506
+ colorStatusDanger: "#bf2900",
4507
+ colorBrandButton: "#47aa3c",
4508
+ colorBrandButtonHover: "#39942f",
4509
+ colorBrandButtonClick: "#2a7f20",
4510
+ colorBrandHeaderLight: "#5ea2e9",
4511
+ colorBrandHeader: "#4484c7",
4512
+ colorBrandHeaderDark: "#2f659f",
4513
+ colorLike: "#F24025",
4514
+ },
4515
+ fixedColors: {
4516
+ colorSelector1: "#fa4b34",
4517
+ colorSelector2: "#ffa822",
4518
+ colorSelector3: "#0091ff",
4519
+ colorSelector4: "#14cad7",
4520
+ colorSelector5: "#8f00ff",
4521
+ },
4522
+ textColors: {
4523
+ colorTextWarning: "#bf2900",
4524
+ colorTextSuccess: "#008800",
4525
+ colorTextDanger: "#bf2900",
4526
+ colorTextBrandLink: "#4484c7",
4527
+ colorTextWhite: "#ffffff",
4528
+ colorTextLight: "#9e9e9e",
4529
+ colorTextDefault: "#6e6f75",
4530
+ colorTextDark: "#444444",
4531
+ colorIconWhite: "#ffffff",
4532
+ colorIconPrimary: "#4484c7",
4533
+ colorIconDefault: "#999999",
4534
+ },
4535
+ typography: {
4536
+ textSmall: "0.8125rem",
4537
+ textBase: "0.875rem",
4538
+ textH5: "1rem",
4539
+ textH4: "1.125rem",
4540
+ textH3: "1.25rem",
4541
+ textH2: "1.5rem",
4542
+ textH1: "1.625rem",
4543
+ textTiny: "0.6875rem",
4544
+ lineHeightHeading: "1.25",
4545
+ lineHeightBody: "1.5",
4546
+ lineHeightReset: "1",
4547
+ fontWeightRegular: "400",
4548
+ fontWeightBold: "700",
4549
+ fontFamilyBase: "Roboto",
4550
+ },
4551
+ spacing: {
4552
+ spacerHalf: "4px",
4553
+ spacer1: "8px",
4554
+ spacer2: "16px",
4555
+ spacer3: "24px",
4556
+ spacer4: "32px",
4557
+ spacer5: "40px",
4558
+ spacer6: "48px",
4559
+ },
4560
+ borders: {
4561
+ borderSolidWhite3: "3px solid #ffffff",
4562
+ borderSolidWhite2: "2px solid #ffffff",
4563
+ borderSolidWhite1: "1px solid #ffffff",
4564
+ borderDottedLight3: "3px dashed #ededed",
4565
+ borderSolidLight3: "3px solid #ededed",
4566
+ borderDottedLight2: "2px dashed #ededed",
4567
+ borderSolidLight2: "2px solid #ededed",
4568
+ borderDottedLight1: "1px dashed #ededed",
4569
+ borderSolidLight1: "1px solid #ededed",
4570
+ },
4571
+ shadows: {
4572
+ boxShadowDropdown: "0 2px 20px 0 rgba(0,0,0,0.1)",
4573
+ boxShadowNotify: "0 1px 15px 0 rgba(0,0,0,0.2)",
4574
+ boxShadowCard: "0 1px 1px 0 rgba(0,0,0,0.1)",
4575
+ boxShadowButton: "0 1px 3px 0 rgba(0,0,0,0.2)",
4576
+ },
4577
+ sizes: {
4578
+ sizeDialogSmall: "464px",
4579
+ sizeDialogMedium: "768px",
4580
+ sizeDialogLarge: "1024px",
4581
+ sizeViewportExtraLarge: "1200px",
4582
+ sizeViewportLarge: "1080px",
4583
+ sizeViewportMedium: "768px",
4584
+ sizeViewportSmall: "576px",
4585
+ sizeHeaderHeight: "56px",
4586
+ sizeAvatarXs: "24px",
4587
+ sizeAvatarS: "32px",
4588
+ sizeAvatarM: "40px",
4589
+ sizeAvatarL: "80px",
4590
+ sizeAvatarXl: "120px",
4591
+ },
4592
+ };
4593
+
4594
+ var _a;
4595
+ var IE11SpecificCases = {
4596
+ flex: function (value) { return value + " " + value + " auto"; },
4597
+ };
4598
+ var MediaQueryDevices;
4599
+ (function (MediaQueryDevices) {
4600
+ MediaQueryDevices["MOBILE"] = "mobile";
4601
+ MediaQueryDevices["TABLETPORTRAIT"] = "tabletPortrait";
4602
+ MediaQueryDevices["TABLETLANDSCAPE"] = "tabletLandscape";
4603
+ MediaQueryDevices["DESKTOP"] = "desktop";
4604
+ })(MediaQueryDevices || (MediaQueryDevices = {}));
4605
+ var enumToStyleValueMap = (_a = {},
4606
+ _a[exports.Sizes.XXS] = DesignTokens.spacing.spacerHalf,
4607
+ _a[exports.Sizes.XS] = DesignTokens.spacing.spacer1,
4608
+ _a[exports.Sizes.SMALL] = DesignTokens.spacing.spacer2,
4609
+ _a[exports.Sizes.NORMAL] = DesignTokens.spacing.spacer3,
4610
+ _a[exports.Sizes.LARGE] = DesignTokens.spacing.spacer4,
4611
+ _a[exports.Sizes.XL] = DesignTokens.spacing.spacer5,
4612
+ _a[exports.Sizes.XXL] = DesignTokens.spacing.spacer6,
4613
+ _a);
4614
+ var getStyleValue = function (styleValue) {
4615
+ if (enumToStyleValueMap[styleValue] === undefined) {
4616
+ return styleValue;
4617
+ }
4618
+ return enumToStyleValueMap[styleValue];
4619
+ };
4620
+ var getMediaQueryStyles = function (props, propToStyleMap, deviceType) {
4621
+ var mediaQueryStyles = "";
4622
+ Object.keys(propToStyleMap).forEach(function (propKey) {
4623
+ if (deviceType &&
4624
+ typeof props[propKey] === "object" &&
4625
+ props[propKey][deviceType] !== undefined) {
4626
+ mediaQueryStyles += "\n " + propToStyleMap[propKey]
4627
+ .map(function (styleAttr) {
4628
+ return styleAttr + ": " + getStyleValue(props[propKey][deviceType]) + ";";
4629
+ })
4630
+ .join("") + "\n ";
4631
+ }
4632
+ else if (deviceType === undefined &&
4633
+ typeof props[propKey] === "string") {
4634
+ mediaQueryStyles += "\n " + propToStyleMap[propKey]
4635
+ .map(function (styleAttr) {
4636
+ return styleAttr + ": " + getStyleValue(props[propKey]) + ";";
4637
+ })
4638
+ .join("") + "\n ";
4639
+ }
4640
+ });
4641
+ return mediaQueryStyles;
4642
+ };
4643
+ var getIESpecificStyles = function (props, propToStyleMap) {
4644
+ var IE11Styles = "";
4645
+ Object.keys(propToStyleMap).forEach(function (propKey) {
4646
+ IE11Styles += "\n " + propToStyleMap[propKey]
4647
+ .map(function (styleAttr) {
4648
+ if (IE11SpecificCases[styleAttr]) {
4649
+ return styleAttr + ": " + IE11SpecificCases[styleAttr](getStyleValue(props[propKey])) + ";";
4650
+ }
4651
+ return "";
4652
+ })
4653
+ .join("") + "\n ";
4654
+ });
4655
+ return IE11Styles;
4656
+ };
4657
+ var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
4658
+ var elementMainStyles = "";
4659
+ var mainStyleProps = getMediaQueryStyles(props, propToStyleMap);
4660
+ if (mainStyleProps.trim() !== "") {
4661
+ elementMainStyles = "\n " + selector + " {\n " + mainStyleProps + "\n }\n ";
4662
+ if (!!window.MSInputMethodContext && !!document.documentMode) {
4663
+ var ie11Styles = getIESpecificStyles(props, propToStyleMap);
4664
+ if (ie11Styles.trim() !== "") {
4665
+ elementMainStyles += "\n html.dough-IE11 " + selector + " {\n " + mainStyleProps + "\n }\n ";
4666
+ }
4667
+ }
4668
+ }
4669
+ if (!noMediaQuery) {
4670
+ 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) +
4671
+ 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) +
4672
+ 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 }";
4673
+ }
4674
+ return elementMainStyles;
4675
+ };
4676
+ var isStandardColor = function (color) {
4677
+ return Object.values(exports.Colors).includes(color);
4678
+ };
4679
+ var getColorWithFallback = function (color) {
4680
+ return isStandardColor(color) ? "var(--" + color + ")" : color;
4681
+ };
4682
+
4683
+ var ProgressBar = function (_a) {
4684
+ 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;
4685
+ return (React__default.createElement("div", __assign({ className: cn("dough-progress-bar", className) }, dataAttributes, { style: {
4686
+ backgroundColor: getColorWithFallback(railColor),
4687
+ } }),
4688
+ React__default.createElement("div", { className: "dough-progress-bar__progress", style: {
4689
+ backgroundColor: getColorWithFallback(barColor),
4690
+ width: "calc(" + (completed > total ? total : completed) + " / " + total + " * 100%)",
4691
+ } })));
4692
+ };
4693
+ ProgressBar.displayName = "ProgressBar";
4694
+
4695
+ 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}";
4696
+ styleInject(css_248z$y);
4697
+
4492
4698
  var AlertText = function (props) {
4493
4699
  var _a = props.type, type = _a === void 0 ? exports.AlertStatus.NEUTRAL : _a;
4494
4700
  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) {
4499
4705
  };
4500
4706
  AlertText.displayName = "AlertText";
4501
4707
 
4502
- 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}";
4503
- styleInject(css_248z$y);
4708
+ 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}";
4709
+ styleInject(css_248z$z);
4504
4710
 
4505
4711
  var Notification = function (props) {
4506
4712
  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,8 +4803,8 @@ var Notification = function (props) {
4597
4803
  };
4598
4804
  Notification.displayName = "Notification";
4599
4805
 
4600
- var css_248z$z = "/* 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: 0;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n bottom: 0;\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}";
4601
- styleInject(css_248z$z);
4806
+ 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}";
4807
+ styleInject(css_248z$A);
4602
4808
 
4603
4809
  var simplifyKey = function (key) {
4604
4810
  return key ? key.slice(key.indexOf("$") + 1) : key;
@@ -4667,8 +4873,8 @@ var TabsContainer = function (props) {
4667
4873
  };
4668
4874
  TabsContainer.displayName = "TabsContainer";
4669
4875
 
4670
- 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}";
4671
- styleInject(css_248z$A);
4876
+ 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}";
4877
+ styleInject(css_248z$B);
4672
4878
 
4673
4879
  var Collapser = function (props) {
4674
4880
  var _a = props.folded, folded = _a === void 0 ? true : _a, _b = props.guidingIcon, guidingIcon = _b === void 0 ? true : _b;
@@ -4734,8 +4940,8 @@ var Collapser = function (props) {
4734
4940
  };
4735
4941
  Collapser.displayName = "Collapser";
4736
4942
 
4737
- 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}";
4738
- styleInject(css_248z$B);
4943
+ 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}";
4944
+ styleInject(css_248z$C);
4739
4945
 
4740
4946
  var ColorTile = React.forwardRef(function (_a, ref) {
4741
4947
  var className = _a.className, dataAttributes = _a.dataAttributes, color = _a.color, size = _a.size, absoluteColor = _a.absoluteColor, children = _a.children;
@@ -4753,8 +4959,8 @@ var ColorTile = React.forwardRef(function (_a, ref) {
4753
4959
  });
4754
4960
  ColorTile.displayName = "ColorTile";
4755
4961
 
4756
- 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}";
4757
- styleInject(css_248z$C);
4962
+ 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}";
4963
+ styleInject(css_248z$D);
4758
4964
 
4759
4965
  var StepsIndicator = function (props) {
4760
4966
  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;
@@ -4776,8 +4982,8 @@ var StepsIndicator = function (props) {
4776
4982
  };
4777
4983
  StepsIndicator.displayName = "StepsIndicator";
4778
4984
 
4779
- 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}";
4780
- styleInject(css_248z$D);
4985
+ 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}";
4986
+ styleInject(css_248z$E);
4781
4987
 
4782
4988
  var Avatar = function (props) {
4783
4989
  var _a;
@@ -4809,8 +5015,8 @@ var Avatar = function (props) {
4809
5015
  };
4810
5016
  Avatar.displayName = "Avatar";
4811
5017
 
4812
- 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}";
4813
- styleInject(css_248z$E);
5018
+ 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}";
5019
+ styleInject(css_248z$F);
4814
5020
 
4815
5021
  var Fader = function (props) { return (React__default.createElement("span", __assign({ className: cn(props.className, "dough-fader", {
4816
5022
  "dough-fader-dark": props.dark,
@@ -4842,116 +5048,14 @@ var Fader = function (props) { return (React__default.createElement("span", __as
4842
5048
  : exports.Colors.THEME, "dough-fader-side dough-fader-left") }))); };
4843
5049
  Fader.displayName = "Fader";
4844
5050
 
4845
- 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}";
4846
- styleInject(css_248z$F);
5051
+ 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}";
5052
+ styleInject(css_248z$G);
4847
5053
 
4848
5054
  var Overlay = function (props) { return (React__default.createElement("span", __assign({ className: cn(props.className, "dough-overlay", props.color) }, props.dataAttributes, { style: {
4849
5055
  opacity: props.opacity,
4850
5056
  } }))); };
4851
5057
  Overlay.displayName = "Overlay";
4852
5058
 
4853
- var DesignTokens = {
4854
- colors: {
4855
- colorWhite: "#ffffff",
4856
- colorBackdropDark: "rgba(0,0,0,0.8)",
4857
- colorBackdrop: "rgba(0,0,0,0.4)",
4858
- colorGrey6: "#f5f5f5",
4859
- colorGrey5: "#e6e6e6",
4860
- colorGrey4: "#d2d2d2",
4861
- colorGrey3: "#9f9f9f",
4862
- colorGrey2: "#696969",
4863
- colorGrey1: "#444444",
4864
- colorStatusWarningLight: "#ffefdd",
4865
- colorStatusWarning: "#ff8800",
4866
- colorStatusSuccess: "#008800",
4867
- colorStatusDanger: "#bf2900",
4868
- colorBrandButton: "#47aa3c",
4869
- colorBrandButtonHover: "#39942f",
4870
- colorBrandButtonClick: "#2a7f20",
4871
- colorBrandHeaderLight: "#5ea2e9",
4872
- colorBrandHeader: "#4484c7",
4873
- colorBrandHeaderDark: "#2f659f",
4874
- colorLike: "#F24025",
4875
- },
4876
- fixedColors: {
4877
- colorSelector1: "#fa4b34",
4878
- colorSelector2: "#ffa822",
4879
- colorSelector3: "#0091ff",
4880
- colorSelector4: "#14cad7",
4881
- colorSelector5: "#8f00ff",
4882
- },
4883
- textColors: {
4884
- colorTextWarning: "#bf2900",
4885
- colorTextSuccess: "#008800",
4886
- colorTextDanger: "#bf2900",
4887
- colorTextBrandLink: "#4484c7",
4888
- colorTextWhite: "#ffffff",
4889
- colorTextLight: "#9e9e9e",
4890
- colorTextDefault: "#6e6f75",
4891
- colorTextDark: "#444444",
4892
- colorIconWhite: "#ffffff",
4893
- colorIconPrimary: "#4484c7",
4894
- colorIconDefault: "#999999",
4895
- },
4896
- typography: {
4897
- textSmall: "0.8125rem",
4898
- textBase: "0.875rem",
4899
- textH5: "1rem",
4900
- textH4: "1.125rem",
4901
- textH3: "1.25rem",
4902
- textH2: "1.5rem",
4903
- textH1: "1.625rem",
4904
- textTiny: "0.6875rem",
4905
- lineHeightHeading: "1.25",
4906
- lineHeightBody: "1.5",
4907
- lineHeightReset: "1",
4908
- fontWeightRegular: "400",
4909
- fontWeightBold: "700",
4910
- fontFamilyBase: "Roboto",
4911
- },
4912
- spacing: {
4913
- spacerHalf: "4px",
4914
- spacer1: "8px",
4915
- spacer2: "16px",
4916
- spacer3: "24px",
4917
- spacer4: "32px",
4918
- spacer5: "40px",
4919
- spacer6: "48px",
4920
- },
4921
- borders: {
4922
- borderSolidWhite3: "3px solid #ffffff",
4923
- borderSolidWhite2: "2px solid #ffffff",
4924
- borderSolidWhite1: "1px solid #ffffff",
4925
- borderDottedLight3: "3px dashed #ededed",
4926
- borderSolidLight3: "3px solid #ededed",
4927
- borderDottedLight2: "2px dashed #ededed",
4928
- borderSolidLight2: "2px solid #ededed",
4929
- borderDottedLight1: "1px dashed #ededed",
4930
- borderSolidLight1: "1px solid #ededed",
4931
- },
4932
- shadows: {
4933
- boxShadowDropdown: "0 2px 20px 0 rgba(0,0,0,0.1)",
4934
- boxShadowNotify: "0 1px 15px 0 rgba(0,0,0,0.2)",
4935
- boxShadowCard: "0 1px 1px 0 rgba(0,0,0,0.1)",
4936
- boxShadowButton: "0 1px 3px 0 rgba(0,0,0,0.2)",
4937
- },
4938
- sizes: {
4939
- sizeDialogSmall: "464px",
4940
- sizeDialogMedium: "768px",
4941
- sizeDialogLarge: "1024px",
4942
- sizeViewportExtraLarge: "1200px",
4943
- sizeViewportLarge: "1080px",
4944
- sizeViewportMedium: "768px",
4945
- sizeViewportSmall: "576px",
4946
- sizeHeaderHeight: "56px",
4947
- sizeAvatarXs: "24px",
4948
- sizeAvatarS: "32px",
4949
- sizeAvatarM: "40px",
4950
- sizeAvatarL: "80px",
4951
- sizeAvatarXl: "120px",
4952
- },
4953
- };
4954
-
4955
5059
  var IconArrowLeft = {
4956
5060
  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",
4957
5061
  key: "arrow-left",
@@ -4962,8 +5066,8 @@ var IconArrowRight = {
4962
5066
  key: "arrow-right",
4963
5067
  };
4964
5068
 
4965
- 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}";
4966
- styleInject(css_248z$G);
5069
+ 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}";
5070
+ styleInject(css_248z$H);
4967
5071
 
4968
5072
  var HorizontalListSlider = function (props) {
4969
5073
  var _a = React.useState(false), showLeftSlideButton = _a[0], setShowLeftSlideButton = _a[1];
@@ -5059,8 +5163,8 @@ var HorizontalListSlider = function (props) {
5059
5163
  };
5060
5164
  HorizontalListSlider.displayName = "HorizontalListSlider";
5061
5165
 
5062
- 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}";
5063
- styleInject(css_248z$H);
5166
+ 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}";
5167
+ styleInject(css_248z$I);
5064
5168
 
5065
5169
  var Carousel = function (props) {
5066
5170
  var conatinerRef = React.useRef(null);
@@ -5158,8 +5262,8 @@ var Carousel = function (props) {
5158
5262
  };
5159
5263
  Carousel.displayName = "Carousel";
5160
5264
 
5161
- 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}";
5162
- styleInject(css_248z$I);
5265
+ 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}";
5266
+ styleInject(css_248z$J);
5163
5267
 
5164
5268
  var ContentSlider = function (props) {
5165
5269
  var _a = React.useState(props.children), appliedChildren = _a[0], setAppliedChildren = _a[1];
@@ -5203,8 +5307,8 @@ var ContentSlider = function (props) {
5203
5307
  };
5204
5308
  ContentSlider.displayName = "ContentSlider";
5205
5309
 
5206
- 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}";
5207
- styleInject(css_248z$J);
5310
+ 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}";
5311
+ styleInject(css_248z$K);
5208
5312
 
5209
5313
  var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
5210
5314
  var Image = function (props) {
@@ -5237,8 +5341,8 @@ var Image = function (props) {
5237
5341
  };
5238
5342
  Image.displayName = "Image";
5239
5343
 
5240
- 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}";
5241
- styleInject(css_248z$K);
5344
+ 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}";
5345
+ styleInject(css_248z$L);
5242
5346
 
5243
5347
  var ImageCarousel = function (props) {
5244
5348
  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;
@@ -5305,8 +5409,8 @@ var ImageCarousel = function (props) {
5305
5409
  };
5306
5410
  ImageCarousel.displayName = "ImageCarousel";
5307
5411
 
5308
- 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}";
5309
- styleInject(css_248z$L);
5412
+ 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}";
5413
+ styleInject(css_248z$M);
5310
5414
 
5311
5415
  var Table = function (props) {
5312
5416
  var _a = props.verticalBorders, verticalBorders = _a === void 0 ? true : _a, _b = props.horizontalBorders, horizontalBorders = _b === void 0 ? true : _b;
@@ -5361,8 +5465,8 @@ var TableCell = function (props) {
5361
5465
  };
5362
5466
  TableCell.displayName = "TableCell";
5363
5467
 
5364
- 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}";
5365
- styleInject(css_248z$M);
5468
+ 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}";
5469
+ styleInject(css_248z$N);
5366
5470
 
5367
5471
  (function (SkeletonShape) {
5368
5472
  SkeletonShape["LINE"] = "line";
@@ -5402,91 +5506,8 @@ var Skeleton = function (props) {
5402
5506
  };
5403
5507
  Skeleton.displayName = "Skeleton";
5404
5508
 
5405
- 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}";
5406
- styleInject(css_248z$N);
5407
-
5408
- var _a;
5409
- var IE11SpecificCases = {
5410
- flex: function (value) { return value + " " + value + " auto"; },
5411
- };
5412
- var MediaQueryDevices;
5413
- (function (MediaQueryDevices) {
5414
- MediaQueryDevices["MOBILE"] = "mobile";
5415
- MediaQueryDevices["TABLETPORTRAIT"] = "tabletPortrait";
5416
- MediaQueryDevices["TABLETLANDSCAPE"] = "tabletLandscape";
5417
- MediaQueryDevices["DESKTOP"] = "desktop";
5418
- })(MediaQueryDevices || (MediaQueryDevices = {}));
5419
- var enumToStyleValueMap = (_a = {},
5420
- _a[exports.Sizes.XXS] = DesignTokens.spacing.spacerHalf,
5421
- _a[exports.Sizes.XS] = DesignTokens.spacing.spacer1,
5422
- _a[exports.Sizes.SMALL] = DesignTokens.spacing.spacer2,
5423
- _a[exports.Sizes.NORMAL] = DesignTokens.spacing.spacer3,
5424
- _a[exports.Sizes.LARGE] = DesignTokens.spacing.spacer4,
5425
- _a[exports.Sizes.XL] = DesignTokens.spacing.spacer5,
5426
- _a[exports.Sizes.XXL] = DesignTokens.spacing.spacer6,
5427
- _a);
5428
- var getStyleValue = function (styleValue) {
5429
- if (enumToStyleValueMap[styleValue] === undefined) {
5430
- return styleValue;
5431
- }
5432
- return enumToStyleValueMap[styleValue];
5433
- };
5434
- var getMediaQueryStyles = function (props, propToStyleMap, deviceType) {
5435
- var mediaQueryStyles = "";
5436
- Object.keys(propToStyleMap).forEach(function (propKey) {
5437
- if (deviceType &&
5438
- typeof props[propKey] === "object" &&
5439
- props[propKey][deviceType] !== undefined) {
5440
- mediaQueryStyles += "\n " + propToStyleMap[propKey]
5441
- .map(function (styleAttr) {
5442
- return styleAttr + ": " + getStyleValue(props[propKey][deviceType]) + ";";
5443
- })
5444
- .join("") + "\n ";
5445
- }
5446
- else if (deviceType === undefined &&
5447
- typeof props[propKey] === "string") {
5448
- mediaQueryStyles += "\n " + propToStyleMap[propKey]
5449
- .map(function (styleAttr) {
5450
- return styleAttr + ": " + getStyleValue(props[propKey]) + ";";
5451
- })
5452
- .join("") + "\n ";
5453
- }
5454
- });
5455
- return mediaQueryStyles;
5456
- };
5457
- var getIESpecificStyles = function (props, propToStyleMap) {
5458
- var IE11Styles = "";
5459
- Object.keys(propToStyleMap).forEach(function (propKey) {
5460
- IE11Styles += "\n " + propToStyleMap[propKey]
5461
- .map(function (styleAttr) {
5462
- if (IE11SpecificCases[styleAttr]) {
5463
- return styleAttr + ": " + IE11SpecificCases[styleAttr](getStyleValue(props[propKey])) + ";";
5464
- }
5465
- return "";
5466
- })
5467
- .join("") + "\n ";
5468
- });
5469
- return IE11Styles;
5470
- };
5471
- var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
5472
- var elementMainStyles = "";
5473
- var mainStyleProps = getMediaQueryStyles(props, propToStyleMap);
5474
- if (mainStyleProps.trim() !== "") {
5475
- elementMainStyles = "\n " + selector + " {\n " + mainStyleProps + "\n }\n ";
5476
- if (!!window.MSInputMethodContext && !!document.documentMode) {
5477
- var ie11Styles = getIESpecificStyles(props, propToStyleMap);
5478
- if (ie11Styles.trim() !== "") {
5479
- elementMainStyles += "\n html.dough-IE11 " + selector + " {\n " + mainStyleProps + "\n }\n ";
5480
- }
5481
- }
5482
- }
5483
- if (!noMediaQuery) {
5484
- 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) +
5485
- 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) +
5486
- 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 }";
5487
- }
5488
- return elementMainStyles;
5489
- };
5509
+ 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}";
5510
+ styleInject(css_248z$O);
5490
5511
 
5491
5512
  (function (GridItemsAlignment) {
5492
5513
  GridItemsAlignment["START"] = "start";
@@ -5630,6 +5651,7 @@ exports.NumericInput = NumericInput;
5630
5651
  exports.Overlay = Overlay;
5631
5652
  exports.PanelOverlay = PanelOverlay;
5632
5653
  exports.Paragraph = Paragraph;
5654
+ exports.ProgressBar = ProgressBar;
5633
5655
  exports.RadioGroup = RadioGroup;
5634
5656
  exports.RadioOption = RadioOption;
5635
5657
  exports.SelectBox = SelectBox;