@speakapbv/dough-component-library 9.19.0 → 9.20.2

package/dist/components/bread-crumb/bread-crumb.d.ts

@@ -1,13 +1,20 @@
 import { ReactNode } from "react";
 import "./bread-crumb.scss";
 import { DoughDataAttributes, Sizes } from "../../utils/constants";
+interface BreadCrumbTextProps {
+    children: string | number;
+    className?: string;
+}
+export declare const BreadCrumbText: ({ children, className, }: BreadCrumbTextProps) => JSX.Element;
 export interface BreadCrumbProps {
     className?: string;
     children?: ReactNode;
     size?: Sizes.SMALL | Sizes.NORMAL;
     dataAttributes?: DoughDataAttributes;
+    noElementWrapper?: boolean;
 }
 export declare const BreadCrumb: {
     (props: BreadCrumbProps): JSX.Element;
     displayName: string;
 };
+export {};

package/dist/components/link/link.d.ts

@@ -16,5 +16,7 @@ export interface LinkProps {
     target?: string;
     rel?: string;
     download?: string;
+    width?: string;
+    flex?: string;
 }
-export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "className" | "dataAttributes" | "color" | "children" | "onClick" | "underline" | "fullWidth" | "disabled" | "colorOnlyOnHover" | "href" | "target" | "rel" | "download"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "className" | "dataAttributes" | "color" | "children" | "onClick" | "underline" | "fullWidth" | "disabled" | "colorOnlyOnHover" | "href" | "target" | "rel" | "download" | "width" | "flex"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { Switch } from "./components/form-elements/switch/switch";
 export { RadioGroup, DoughRadioGroupData, } from "./components/form-elements/selection-inputs/radio-group";
 export { RadioOption } from "./components/form-elements/selection-inputs/radio-option";
 export { Tag } from "./components/tag-comp/tag";
-export { BreadCrumb } from "./components/bread-crumb/bread-crumb";
+export { BreadCrumb, BreadCrumbText, } from "./components/bread-crumb/bread-crumb";
 export { Badge } from "./components/badge/badge";
 export { Spacer } from "./components/spacer/spacer";
 export { Divider } from "./components/divider/divider";

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, Children } from 'react';
+import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, Children, Fragment } from 'react';
 import { createPortal } from 'react-dom';
 import lottie from 'lottie-web/build/player/lottie_light';
 
@@ -605,7 +605,7 @@ var Link = forwardRef(function (props, ref) {
                     cancelEvent(e);
                 }
             }
-            : undefined, download: props.download, target: props.target, rel: rel, ref: ref }, props.dataAttributes), props.children));
+            : undefined, download: props.download, target: props.target, rel: rel, ref: ref, style: { width: props.width, flex: props.flex } }, props.dataAttributes), props.children));
 });
 Link.displayName = "Link";
 
@@ -3897,7 +3897,7 @@ var SelectBox = forwardRef(function (props, ref) {
 });
 SelectBox.displayName = "SelectBox";
 
-var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\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  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
+var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\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  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
 styleInject(css_248z$n);
 
 var CheckBox = forwardRef(function (props, ref) {
@@ -3934,11 +3934,12 @@ var CheckBox = forwardRef(function (props, ref) {
         React.createElement("div", { className: cn("dough-selection-container", {
                 checked: props.value === 1 || props.value,
                 rounded: props.rounded,
+                disabled: props.disabled,
             }) },
             React.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
             React.createElement(Box, { display: BoxDisplay.FLEX, alignItems: BoxAlign.CENTER, wrap: BoxWrap.NOWRAP },
                 React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
-                    React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined
+                    React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
                             ? 0
                             : props.tabIndex, color: props.value ? color : Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
                 (props.label || props.children) && (React.createElement(Box, { display: BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: BoxAlign.CENTER },
@@ -4041,22 +4042,42 @@ var RadioGroup = function (props) {
 };
 RadioGroup.displayName = "RadioGroup";
 
-var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 3px 4px 5px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
+var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 3px 4px 5px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
 styleInject(css_248z$p);
 
+/* Unpacks children wrapped in Fragments */
+function flattenChildren(children) {
+    var childrenArray = Children.toArray(children);
+    return childrenArray.reduce(function (flatChildren, child) {
+        if (child.type === Fragment) {
+            return flatChildren.concat(flattenChildren(child.props.children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+}
+
+var BreadCrumbText = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (React.createElement("span", { className: cn("dough-bread-crumb-ellipsis", className) }, children));
+};
 var BreadCrumb = function (props) {
-    var _a = props.size, size = _a === void 0 ? Sizes.NORMAL : _a;
+    var _a = props.size, size = _a === void 0 ? Sizes.NORMAL : _a, noElementWrapper = props.noElementWrapper;
     var getBreadCrumbs = function (children) {
-        var linkItems = Children.toArray(children);
+        var linkItems = flattenChildren(children);
         if (linkItems && linkItems.length > 0) {
             return (React.createElement(React.Fragment, null, linkItems.map(function (link, index) {
                 if (index === 0 ||
                     linkItems.length < 4 ||
                     index >= linkItems.length - 2) {
                     return (React.createElement(React.Fragment, { key: "bc-link-" + index },
-                        React.createElement("span", { className: index < linkItems.length - 1
+                        noElementWrapper ? (link) : typeof link === "string" ||
+                            typeof link === "number" ? (React.createElement(BreadCrumbText, { className: cn(index < linkItems.length - 1
+                                ? ColorsText.LIGHT
+                                : ColorsText.DARK) }, link)) : (
+                        /* To not include any breaking change, that part will stay*/ React.createElement("span", { className: index < linkItems.length - 1
                                 ? ColorsText.LIGHT
-                                : ColorsText.DARK }, link),
+                                : ColorsText.DARK }, link)),
                         index < linkItems.length - 1 && (React.createElement("span", { className: cn("dough-bread-crumb-right-arrow", "dough-color-icon-default") },
                             React.createElement(RightIcon, null)))));
                 }
@@ -5522,4 +5543,4 @@ GridItem.displayName = "GridItem";
 
 injectRobotoFont();
 
-export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };
+export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };

package/dist/index.js

@@ -600,7 +600,7 @@ var Link = React.forwardRef(function (props, ref) {
                     cancelEvent(e);
                 }
             }
-            : undefined, download: props.download, target: props.target, rel: rel, ref: ref }, props.dataAttributes), props.children));
+            : undefined, download: props.download, target: props.target, rel: rel, ref: ref, style: { width: props.width, flex: props.flex } }, props.dataAttributes), props.children));
 });
 Link.displayName = "Link";
 
@@ -3881,7 +3881,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
 });
 SelectBox.displayName = "SelectBox";
 
-var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\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  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
+var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\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  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
 styleInject(css_248z$n);
 
 var CheckBox = React.forwardRef(function (props, ref) {
@@ -3918,11 +3918,12 @@ var CheckBox = React.forwardRef(function (props, ref) {
         React__default.createElement("div", { className: cn("dough-selection-container", {
                 checked: props.value === 1 || props.value,
                 rounded: props.rounded,
+                disabled: props.disabled,
             }) },
             React__default.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
             React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, alignItems: exports.BoxAlign.CENTER, wrap: exports.BoxWrap.NOWRAP },
                 React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
-                    React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined
+                    React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
                             ? 0
                             : props.tabIndex, color: props.value ? color : exports.Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
                 (props.label || props.children) && (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: exports.BoxAlign.CENTER },
@@ -4025,22 +4026,42 @@ var RadioGroup = function (props) {
 };
 RadioGroup.displayName = "RadioGroup";
 
-var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 3px 4px 5px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
+var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 3px 4px 5px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
 styleInject(css_248z$p);
 
+/* Unpacks children wrapped in Fragments */
+function flattenChildren(children) {
+    var childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce(function (flatChildren, child) {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props.children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+}
+
+var BreadCrumbText = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (React__default.createElement("span", { className: cn("dough-bread-crumb-ellipsis", className) }, children));
+};
 var BreadCrumb = function (props) {
-    var _a = props.size, size = _a === void 0 ? exports.Sizes.NORMAL : _a;
+    var _a = props.size, size = _a === void 0 ? exports.Sizes.NORMAL : _a, noElementWrapper = props.noElementWrapper;
     var getBreadCrumbs = function (children) {
-        var linkItems = React.Children.toArray(children);
+        var linkItems = flattenChildren(children);
         if (linkItems && linkItems.length > 0) {
             return (React__default.createElement(React__default.Fragment, null, linkItems.map(function (link, index) {
                 if (index === 0 ||
                     linkItems.length < 4 ||
                     index >= linkItems.length - 2) {
                     return (React__default.createElement(React__default.Fragment, { key: "bc-link-" + index },
-                        React__default.createElement("span", { className: index < linkItems.length - 1
+                        noElementWrapper ? (link) : typeof link === "string" ||
+                            typeof link === "number" ? (React__default.createElement(BreadCrumbText, { className: cn(index < linkItems.length - 1
+                                ? exports.ColorsText.LIGHT
+                                : exports.ColorsText.DARK) }, link)) : (
+                        /* To not include any breaking change, that part will stay*/ React__default.createElement("span", { className: index < linkItems.length - 1
                                 ? exports.ColorsText.LIGHT
-                                : exports.ColorsText.DARK }, link),
+                                : exports.ColorsText.DARK }, link)),
                         index < linkItems.length - 1 && (React__default.createElement("span", { className: cn("dough-bread-crumb-right-arrow", "dough-color-icon-default") },
                             React__default.createElement(RightIcon, null)))));
                 }
@@ -5508,6 +5529,7 @@ exports.BR = BR;
 exports.Badge = Badge;
 exports.Box = Box;
 exports.BreadCrumb = BreadCrumb;
+exports.BreadCrumbText = BreadCrumbText;
 exports.BreakpointViewer = BreakpointViewer;
 exports.Button = Button;
 exports.Card = Card;

package/dist/src/components/bread-crumb/bread-crumb.stories.d.ts

@@ -0,0 +1,24 @@
+import { BreadCrumbProps } from "./bread-crumb";
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, BreadCrumbProps>;
+export default _default;
+export declare const Simple: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;
+export declare const OneChild: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;
+export declare const LimitedWidth: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;
+export declare const MultipleChildren: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;
+export declare const CustomChildren: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;
+export declare const CustomChildrenLimitedWidth: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;
+export declare const WithoutUsingFragments: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BreadCrumbProps & {
+    width: string;
+}>;

package/dist/src/utils/flattenChildren.d.ts

@@ -0,0 +1,4 @@
+import { Children, ReactNode } from "react";
+declare type ReactChildArray = ReturnType<typeof Children.toArray>;
+export declare function flattenChildren(children: ReactNode): ReactChildArray;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "9.19.0",
+    "version": "9.20.2",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",