@speakapbv/dough-component-library 9.23.0 → 9.26.0

package/dist/components/containers/box/box.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, Ref, UIEvent } from "react";
+import React, { MouseEventHandler, ReactNode, Ref, UIEvent } from "react";
 import { Colors, Sizes, DoughDataAttributes } from "../../../utils/constants";
 import "./box.scss";
 export declare enum BoxDirection {
@@ -92,6 +92,7 @@ export interface BoxProps {
         bottom?: Sizes;
         left?: Sizes;
     };
+    transform?: string;
     overflow?: BoxOverflow | {
         x?: BoxOverflow;
         y?: BoxOverflow;
@@ -111,5 +112,8 @@ export interface BoxProps {
     alignSelf?: BoxAlign | BoxAlignment.FLEX_START | BoxAlignment.FLEX_END | BoxAlignment.CENTER | BoxAlignment.BASELINE | BoxAlignment.STRETCH;
     /** Event properties */
     onScrollReachedBottom?(e?: UIEvent): void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
 }
-export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "className" | "children" | "dataAttributes" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "absolute" | "zIndex" | "color" | "border" | "borderRadius" | "rounded" | "shadow" | "padding" | "overflow" | "display" | "direction" | "flex" | "basis" | "grow" | "shrink" | "order" | "wrap" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "onScrollReachedBottom"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "className" | "children" | "dataAttributes" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "absolute" | "zIndex" | "color" | "border" | "borderRadius" | "rounded" | "shadow" | "padding" | "transform" | "overflow" | "display" | "direction" | "flex" | "basis" | "grow" | "shrink" | "order" | "wrap" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "onScrollReachedBottom" | "onMouseEnter" | "onMouseLeave" | "onClick"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/divider/divider.d.ts

@@ -9,6 +9,7 @@ export interface DividerProps {
     type?: Direction;
     width?: string;
     lineThickness?: string;
+    zIndex?: number;
 }
 export declare const Divider: {
     (props: DividerProps): JSX.Element;

package/dist/components/drop-menu/drop-menu.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent } from "react";
+import React, { ReactNode, MouseEvent, FunctionComponent } from "react";
 import { Colors, ColorsText, Sizes, DoughDataAttributes } from "../../utils/constants";
 import { ButtonProps } from "../button/button";
 import "./drop-menu.scss";
@@ -36,5 +36,6 @@ export interface DropMenuProps {
     innerButtonSize?: Sizes.NORMAL | Sizes.SMALL;
     rightShift?: number;
     overlaySelector?: string;
+    customClickHandler?: (e: MouseEvent) => void;
 }
 export declare const DropMenu: React.ForwardRefExoticComponent<DropMenuProps & React.RefAttributes<DoughDropMenuRef>>;

package/dist/index.es.js

@@ -1159,8 +1159,8 @@ var Box = forwardRef(function (props, ref) {
             _a["dough-flex-align-items-" + props.alignItems] = props.alignItems,
             _a["dough-flex-align-content-" + props.alignContent] = props.alignContent,
             _a["dough-flex-align-self-" + props.alignSelf] = props.alignSelf,
-            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex }, (isTypeObject(props.absolute) &&
-            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined }), props.children));
+            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex, transform: props.transform }, (isTypeObject(props.absolute) &&
+            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onClick: props.onClick }), props.children));
 });
 Box.displayName = "Box";
 
@@ -1528,7 +1528,7 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = forwardRef(function (_a, ref) {
-    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth;
+    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler;
     var componentRef = useRef(null);
     var _q = useState(false), showDropArea = _q[0], setShowDropArea = _q[1];
     var openDropArea = function (e) {
@@ -1598,7 +1598,10 @@ var DropMenu = forwardRef(function (_a, ref) {
             size: size,
             shadow: shadow,
             onClick: function (e) {
-                if (showDropArea === true) {
+                if (customClickHandler) {
+                    customClickHandler(e);
+                }
+                else if (showDropArea === true) {
                     closeDropArea();
                 }
                 else {
@@ -2249,8 +2252,13 @@ var css_248z$g = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$g);
 
 var Divider = function (props) {
-    var _a = props.size, size = _a === void 0 ? Sizes.SMALL : _a, _b = props.type, type = _b === void 0 ? Direction.HORIZONTAL : _b, _c = props.color, color = _c === void 0 ? Colors.GRAY5 : _c;
-    return (React.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: { height: props.height, width: props.width } }, props.dataAttributes),
+    var _a;
+    var _b = props.size, size = _b === void 0 ? Sizes.SMALL : _b, _c = props.type, type = _c === void 0 ? Direction.HORIZONTAL : _c, _d = props.color, color = _d === void 0 ? Colors.GRAY5 : _d;
+    return (React.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: {
+            height: props.height,
+            width: props.width,
+            zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : 0,
+        } }, props.dataAttributes),
         React.createElement("div", { className: cn("dough-divider-line", color), style: props.lineThickness === undefined
                 ? undefined
                 : __assign({}, (type === Direction.HORIZONTAL
@@ -4047,7 +4055,7 @@ 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-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}";
+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  margin-left: 4px;\n  margin-right: 4px;\n  padding: 3px 4px 3px 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 */

package/dist/index.js

@@ -1144,8 +1144,8 @@ var Box = React.forwardRef(function (props, ref) {
             _a["dough-flex-align-items-" + props.alignItems] = props.alignItems,
             _a["dough-flex-align-content-" + props.alignContent] = props.alignContent,
             _a["dough-flex-align-self-" + props.alignSelf] = props.alignSelf,
-            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex }, (isTypeObject(props.absolute) &&
-            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined }), props.children));
+            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex, transform: props.transform }, (isTypeObject(props.absolute) &&
+            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onClick: props.onClick }), props.children));
 });
 Box.displayName = "Box";
 
@@ -1513,7 +1513,7 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = React.forwardRef(function (_a, ref) {
-    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React__default.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? exports.Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? exports.Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth;
+    var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React__default.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? exports.Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? exports.Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler;
     var componentRef = React.useRef(null);
     var _q = React.useState(false), showDropArea = _q[0], setShowDropArea = _q[1];
     var openDropArea = function (e) {
@@ -1583,7 +1583,10 @@ var DropMenu = React.forwardRef(function (_a, ref) {
             size: size,
             shadow: shadow,
             onClick: function (e) {
-                if (showDropArea === true) {
+                if (customClickHandler) {
+                    customClickHandler(e);
+                }
+                else if (showDropArea === true) {
                     closeDropArea();
                 }
                 else {
@@ -2234,8 +2237,13 @@ var css_248z$g = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$g);
 
 var Divider = function (props) {
-    var _a = props.size, size = _a === void 0 ? exports.Sizes.SMALL : _a, _b = props.type, type = _b === void 0 ? exports.Direction.HORIZONTAL : _b, _c = props.color, color = _c === void 0 ? exports.Colors.GRAY5 : _c;
-    return (React__default.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: { height: props.height, width: props.width } }, props.dataAttributes),
+    var _a;
+    var _b = props.size, size = _b === void 0 ? exports.Sizes.SMALL : _b, _c = props.type, type = _c === void 0 ? exports.Direction.HORIZONTAL : _c, _d = props.color, color = _d === void 0 ? exports.Colors.GRAY5 : _d;
+    return (React__default.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: {
+            height: props.height,
+            width: props.width,
+            zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : 0,
+        } }, props.dataAttributes),
         React__default.createElement("div", { className: cn("dough-divider-line", color), style: props.lineThickness === undefined
                 ? undefined
                 : __assign({}, (type === exports.Direction.HORIZONTAL
@@ -4031,7 +4039,7 @@ 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-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}";
+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  margin-left: 4px;\n  margin-right: 4px;\n  padding: 3px 4px 3px 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 */

package/dist/src/components/drop-menu/drop-menu.stories.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;

package/package.json

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