@speakapbv/dough-component-library 9.10.0 → 9.14.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 (6) hide show
  1. package/dist/components/button/button.d.ts +1 -0
  2. package/dist/components/drop-menu/drop-menu.d.ts +1 -0
  3. package/dist/components/form-elements/input-wrapper/input-wrapper.d.ts +1 -0
  4. package/dist/index.es.js +12 -9
  5. package/dist/index.js +12 -9
  6. package/package.json +1 -1
package/dist/components/button/button.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare enum ButtonInputType {
8
8
  LINK = "link"
9
9
  }
10
10
  export interface ButtonProps {
11
+ alignIconRight?: boolean;
11
12
  className?: string;
12
13
  children?: ReactNode;
13
14
  dataAttributes?: DoughDataAttributes;
package/dist/components/drop-menu/drop-menu.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare type DoughDropMenuRef = {
6
6
  hide(): void;
7
7
  };
8
8
  export interface DropMenuProps {
9
+ alignIconRight?: boolean;
9
10
  className?: string;
10
11
  children?: ReactNode;
11
12
  dataAttributes?: DoughDataAttributes;
package/dist/components/form-elements/input-wrapper/input-wrapper.d.ts CHANGED
@@ -2,6 +2,7 @@ import { ReactNode, MouseEvent } from "react";
2
2
  import { DoughValidationResult, DoughDataAttributes } from "../../../utils/constants";
3
3
  export interface InputWrapperProps {
4
4
  className?: string;
5
+ small?: boolean;
5
6
  children?: ReactNode;
6
7
  dataAttributes?: DoughDataAttributes;
7
8
  width?: string;
package/dist/index.es.js CHANGED
@@ -607,8 +607,8 @@ var Button = function (props) {
607
607
  var doubleClickPrevent = false;
608
608
  var clickTime = 0;
609
609
  var doubleClickDuration = 250;
610
- var _a = props.shadow, shadow = _a === void 0 ? true : _a, _b = props.padding, padding = _b === void 0 ? true : _b, _c = props.size, size = _c === void 0 ? Sizes.SMALL : _c, _d = props.type, type = _d === void 0 ? ButtonInputType.BUTTON : _d, _e = props.linkProps, linkProps = _e === void 0 ? {} : _e;
611
- var _f = useState(props.color ? props.color : Colors.BUTTON), colorVal = _f[0], setColorVal = _f[1];
610
+ var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f;
611
+ var _g = useState(props.color ? props.color : Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
612
612
  var initColorVal = useState(props.color ? props.color : Colors.BUTTON)[0];
613
613
  var buttonRef = useRef(null);
614
614
  var clickAndDoubleClickHandler = function (eNative, e, handler) {
@@ -730,10 +730,11 @@ var Button = function (props) {
730
730
  props.busy && (React.createElement("div", { className: "dough-button-waiter" },
731
731
  React.createElement("svg", { width: "100%", height: "100%" },
732
732
  React.createElement("rect", { width: "100%", height: "100%", fill: "currentColor" }))))),
733
- props.icon && (React.createElement("div", { className: "dough-button-icon" }, props.icon)),
733
+ props.icon && !alignIconRight && (React.createElement("div", { className: "dough-button-icon" }, props.icon)),
734
734
  React.createElement("div", { className: "dough-button-label" },
735
735
  props.label && React.createElement(React.Fragment, null, props.label),
736
- !props.label && props.children && props.children))); };
736
+ !props.label && props.children && props.children),
737
+ props.icon && alignIconRight && (React.createElement("div", { className: "dough-button-icon" }, props.icon)))); };
737
738
  return (React.createElement(React.Fragment, null,
738
739
  type === ButtonInputType.LINK && (React.createElement(Link, __assign({ ref: buttonRef, className: cn("dough-button-wrapper", props.className, {
739
740
  "dough-button-full-width": props.fullWidth,
@@ -1507,9 +1508,9 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
1507
1508
  styleInject(css_248z$c);
1508
1509
 
1509
1510
  var DropMenu = forwardRef(function (props, ref) {
1510
- var _a = props.color, color = _a === void 0 ? Colors.TRANSPARENT : _a, _b = props.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.showCaret, showCaret = _e === void 0 ? true : _e, _f = props.rightShift, rightShift = _f === void 0 ? 0 : _f, _g = props.shadow, shadow = _g === void 0 ? false : _g, _h = props.show, show = _h === void 0 ? false : _h, _j = props.rounded, rounded = _j === void 0 ? true : _j, _k = props.icon, icon = _k === void 0 ? React.createElement(EllipsisVIcon, null) : _k, _l = props.size, size = _l === void 0 ? Sizes.SMALL : _l, _m = props.innerButtonSize, innerButtonSize = _m === void 0 ? Sizes.NORMAL : _m;
1511
+ var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.color, color = _b === void 0 ? Colors.TRANSPARENT : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.showCaret, showCaret = _f === void 0 ? true : _f, _g = props.rightShift, rightShift = _g === void 0 ? 0 : _g, _h = props.shadow, shadow = _h === void 0 ? false : _h, _j = props.show, show = _j === void 0 ? false : _j, _k = props.rounded, rounded = _k === void 0 ? true : _k, _l = props.icon, icon = _l === void 0 ? React.createElement(EllipsisVIcon, null) : _l, _m = props.size, size = _m === void 0 ? Sizes.SMALL : _m, _o = props.innerButtonSize, innerButtonSize = _o === void 0 ? Sizes.NORMAL : _o;
1511
1512
  var componentRef = useRef(null);
1512
- var _o = useState(false), showDropArea = _o[0], setShowDropArea = _o[1];
1513
+ var _p = useState(false), showDropArea = _p[0], setShowDropArea = _p[1];
1513
1514
  var openDropArea = function (e) {
1514
1515
  var _a, _b;
1515
1516
  cancelEvent(e);
@@ -1581,7 +1582,7 @@ var DropMenu = forwardRef(function (props, ref) {
1581
1582
  "dough-dropmenu-as-line": props.asInvisibleLine,
1582
1583
  "dough-dropmenu-full-width": props.fullWidth,
1583
1584
  }), ref: componentRef }, props.dataAttributes),
1584
- props.asInvisibleLine !== true && (React.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
1585
+ props.asInvisibleLine !== true && (React.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, alignIconRight: alignIconRight, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
1585
1586
  if (showDropArea === true) {
1586
1587
  closeDropArea();
1587
1588
  }
@@ -1594,7 +1595,7 @@ var DropMenu = forwardRef(function (props, ref) {
1594
1595
  });
1595
1596
  DropMenu.displayName = "DropMenu";
1596
1597
 
1597
- var css_248z$d = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper {\n position: relative;\n display: block;\n box-sizing: border-box;\n min-width: 100%;\n margin-top: 2px;\n margin-bottom: 2px;\n font-family: \"Roboto\", sans-serif;\n cursor: default;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-fe-wrapper + .dough-fe-wrapper {\n margin-top: 16px;\n}\n.dough-fe-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper {\n display: flex;\n flex-flow: column wrap;\n justify-content: flex-start;\n align-items: flex-start;\n box-sizing: border-box;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label {\n order: 1;\n font-size: 0.8125rem;\n transform: translate3d(12px, 28px, 0);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n height: 16px;\n overflow: visible;\n pointer-events: none;\n position: relative;\n z-index: 2;\n padding: 0 4px 0 4px;\n margin-top: -16px;\n margin-left: -2px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label.as-placeholder {\n font-size: 0.875rem;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-helper {\n display: none;\n order: 3;\n font-size: 0.8125rem;\n margin-top: 4px;\n margin-left: 16px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n font-family: \"Roboto\", sans-serif;\n border-width: 2px;\n border-style: solid;\n border-top-style: none;\n border-radius: 6px;\n padding: 0;\n padding-top: 2px;\n flex: 1;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n box-shadow: none;\n order: 2;\n position: relative;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n flex: 1 1 auto;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.dough-input-wrapper-clickable {\n cursor: pointer;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border {\n position: absolute;\n top: 0;\n right: -2px;\n left: -2px;\n width: auto;\n height: 50%;\n color: rgba(0, 0, 0, 0);\n overflow: hidden;\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n pointer-events: none;\n border-color: inherit;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > span:not([class]) {\n padding: 0 4px 0 4px;\n display: none;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n height: 100%;\n border-color: inherit;\n position: relative;\n overflow: hidden;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after:before,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: -100%;\n left: 0;\n width: auto;\n height: auto;\n min-width: 16px;\n border-width: 2px;\n border-style: solid;\n border-bottom: none;\n border-color: inherit;\n border-radius: 6px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: none;\n width: 8px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n right: -100%;\n min-width: 48px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.with-fields {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n display: flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n border: none;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n text-rendering: geometricPrecision;\n background-color: transparent;\n padding: 2px 12px 2px 12px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: 36px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n height: 36px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input {\n width: 1%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n overflow: hidden;\n min-width: 32px;\n padding-left: 2px;\n padding-right: 2px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + input, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + textarea {\n padding-left: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) {\n display: inline-block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before {\n left: -50%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:before {\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(12px, 8px, 0) !important;\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label.as-placeholder {\n opacity: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) {\n border-color: #d2d2d2;\n border-color: var(--dough-color-input-border);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) + .dough-fe-label:not(.as-placeholder) {\n color: #6e6f75;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error {\n border-color: #bf2900;\n border-color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error + .dough-fe-label {\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error ~ .dough-fe-helper {\n display: initial;\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .arrow-icon-container {\n position: absolute;\n top: 50%;\n right: 8px;\n z-index: 1;\n width: 16px;\n height: 16px;\n margin-top: -8px;\n text-align: center;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .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-fe-wrapper > .dough-fe-input-wrapper .dough-inline-svg-icon > path {\n fill: #9f9f9f;\n}\n.dough-fe-wrapper.dough-mandatory > .dough-fe-input-wrapper > .dough-fe-label:after {\n content: \"*\";\n margin-left: 2px;\n}\n.dough-fe-wrapper[readOnly], .dough-fe-wrapper[disabled] {\n pointer-events: none;\n}\n.dough-fe-wrapper[readOnly] *, .dough-fe-wrapper[disabled] * {\n pointer-events: none !important;\n}\n.dough-fe-wrapper[disabled] {\n opacity: 0.5;\n}\n.dough-fe-wrapper[disabled] .dough-fe-wrapper[disabled] {\n opacity: 1;\n}\n.dough-fe-wrapper.dough-fe-borderless {\n margin: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label {\n border: none !important;\n transform: translate3d(-4px, 16px, 0);\n margin-left: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label:before {\n display: none;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element {\n border: none;\n background-color: transparent !important;\n min-height: auto;\n padding-top: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding: 0 !important;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: auto;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element {\n padding-top: 2px !important;\n justify-content: flex-start;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding-top: 2px !important;\n justify-content: flex-end;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(-4px, -4px, 0) !important;\n}\n\n.dough-hidden-input {\n display: none !important;\n}";
1598
+ var css_248z$d = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper {\n position: relative;\n display: block;\n box-sizing: border-box;\n min-width: 100%;\n margin-top: 2px;\n margin-bottom: 2px;\n font-family: \"Roboto\", sans-serif;\n cursor: default;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-fe-wrapper + .dough-fe-wrapper {\n margin-top: 16px;\n}\n.dough-fe-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper {\n display: flex;\n flex-flow: column wrap;\n justify-content: flex-start;\n align-items: flex-start;\n box-sizing: border-box;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label {\n order: 1;\n font-size: 0.8125rem;\n transform: translate3d(12px, 28px, 0);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n height: 16px;\n overflow: visible;\n pointer-events: none;\n position: relative;\n z-index: 2;\n padding: 0 4px 0 4px;\n margin-top: -16px;\n margin-left: -2px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label.as-placeholder {\n font-size: 0.875rem;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-helper {\n display: none;\n order: 3;\n font-size: 0.8125rem;\n margin-top: 4px;\n margin-left: 16px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n font-family: \"Roboto\", sans-serif;\n border-width: 2px;\n border-style: solid;\n border-top-style: none;\n border-radius: 6px;\n padding: 0;\n padding-top: 2px;\n flex: 1;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n box-shadow: none;\n order: 2;\n position: relative;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n flex: 1 1 auto;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.dough-input-wrapper-clickable {\n cursor: pointer;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border {\n position: absolute;\n top: 0;\n right: -2px;\n left: -2px;\n width: auto;\n height: 50%;\n color: rgba(0, 0, 0, 0);\n overflow: hidden;\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n pointer-events: none;\n border-color: inherit;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > span:not([class]) {\n padding: 0 4px 0 4px;\n display: none;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n height: 100%;\n border-color: inherit;\n position: relative;\n overflow: hidden;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after:before,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: -100%;\n left: 0;\n width: auto;\n height: auto;\n min-width: 16px;\n border-width: 2px;\n border-style: solid;\n border-bottom: none;\n border-color: inherit;\n border-radius: 6px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: none;\n width: 8px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n right: -100%;\n min-width: 48px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.with-fields {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n display: flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n border: none;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n text-rendering: geometricPrecision;\n background-color: transparent;\n padding: 2px 12px 2px 12px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: 36px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n height: 36px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container-small,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: 28px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container-small,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n height: 28px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input {\n width: 1%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n overflow: hidden;\n min-width: 32px;\n padding-left: 2px;\n padding-right: 2px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + input, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + textarea {\n padding-left: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) {\n display: inline-block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before {\n left: -50%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:before {\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(12px, 8px, 0) !important;\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label.as-placeholder {\n opacity: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) {\n border-color: #d2d2d2;\n border-color: var(--dough-color-input-border);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) + .dough-fe-label:not(.as-placeholder) {\n color: #6e6f75;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error {\n border-color: #bf2900;\n border-color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error + .dough-fe-label {\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error ~ .dough-fe-helper {\n display: initial;\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .arrow-icon-container {\n position: absolute;\n top: 50%;\n right: 8px;\n z-index: 1;\n width: 16px;\n height: 16px;\n margin-top: -8px;\n text-align: center;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .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-fe-wrapper > .dough-fe-input-wrapper .dough-inline-svg-icon > path {\n fill: #9f9f9f;\n}\n.dough-fe-wrapper.dough-mandatory > .dough-fe-input-wrapper > .dough-fe-label:after {\n content: \"*\";\n margin-left: 2px;\n}\n.dough-fe-wrapper[readOnly], .dough-fe-wrapper[disabled] {\n pointer-events: none;\n}\n.dough-fe-wrapper[readOnly] *, .dough-fe-wrapper[disabled] * {\n pointer-events: none !important;\n}\n.dough-fe-wrapper[disabled] {\n opacity: 0.5;\n}\n.dough-fe-wrapper[disabled] .dough-fe-wrapper[disabled] {\n opacity: 1;\n}\n.dough-fe-wrapper.dough-fe-borderless {\n margin: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label {\n border: none !important;\n transform: translate3d(-4px, 16px, 0);\n margin-left: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label:before {\n display: none;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element {\n border: none;\n background-color: transparent !important;\n min-height: auto;\n padding-top: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding: 0 !important;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: auto;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element {\n padding-top: 2px !important;\n justify-content: flex-start;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding-top: 2px !important;\n justify-content: flex-end;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(-4px, -4px, 0) !important;\n}\n\n.dough-hidden-input {\n display: none !important;\n}";
1598
1599
  styleInject(css_248z$d);
1599
1600
 
1600
1601
  // TODO in the future type declerations will be also added here
@@ -1663,7 +1664,9 @@ var InputWrapper = function (props) {
1663
1664
  !props.validationResult.valid,
1664
1665
  }) },
1665
1666
  props.startElement && (React.createElement("span", { className: "dough-fe-left-element", ref: startElementRef }, props.startElement)),
1666
- React.createElement(LayoutContainer, { className: "value-container", verticalAlign: VerticalAlignment.CENTER },
1667
+ React.createElement(LayoutContainer, { className: cn("value-container", {
1668
+ "value-container-small": props.small,
1669
+ }), verticalAlign: VerticalAlignment.CENTER },
1667
1670
  React.createElement(LayoutFlexBox, { spacing: Spacings.STRETCH, verticalAlign: VerticalAlignment.CENTER }, props.children)),
1668
1671
  props.endElement && (React.createElement("span", { className: "dough-fe-right-element" }, props.endElement)),
1669
1672
  !props.borderless && (React.createElement("span", { className: "dough-input-element-top-border" },
package/dist/index.js CHANGED
@@ -602,8 +602,8 @@ var Button = function (props) {
602
602
  var doubleClickPrevent = false;
603
603
  var clickTime = 0;
604
604
  var doubleClickDuration = 250;
605
- var _a = props.shadow, shadow = _a === void 0 ? true : _a, _b = props.padding, padding = _b === void 0 ? true : _b, _c = props.size, size = _c === void 0 ? exports.Sizes.SMALL : _c, _d = props.type, type = _d === void 0 ? exports.ButtonInputType.BUTTON : _d, _e = props.linkProps, linkProps = _e === void 0 ? {} : _e;
606
- var _f = React.useState(props.color ? props.color : exports.Colors.BUTTON), colorVal = _f[0], setColorVal = _f[1];
605
+ var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? exports.Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? exports.ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f;
606
+ var _g = React.useState(props.color ? props.color : exports.Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
607
607
  var initColorVal = React.useState(props.color ? props.color : exports.Colors.BUTTON)[0];
608
608
  var buttonRef = React.useRef(null);
609
609
  var clickAndDoubleClickHandler = function (eNative, e, handler) {
@@ -725,10 +725,11 @@ var Button = function (props) {
725
725
  props.busy && (React__default.createElement("div", { className: "dough-button-waiter" },
726
726
  React__default.createElement("svg", { width: "100%", height: "100%" },
727
727
  React__default.createElement("rect", { width: "100%", height: "100%", fill: "currentColor" }))))),
728
- props.icon && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)),
728
+ props.icon && !alignIconRight && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)),
729
729
  React__default.createElement("div", { className: "dough-button-label" },
730
730
  props.label && React__default.createElement(React__default.Fragment, null, props.label),
731
- !props.label && props.children && props.children))); };
731
+ !props.label && props.children && props.children),
732
+ props.icon && alignIconRight && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)))); };
732
733
  return (React__default.createElement(React__default.Fragment, null,
733
734
  type === exports.ButtonInputType.LINK && (React__default.createElement(Link, __assign({ ref: buttonRef, className: cn("dough-button-wrapper", props.className, {
734
735
  "dough-button-full-width": props.fullWidth,
@@ -1493,9 +1494,9 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
1493
1494
  styleInject(css_248z$c);
1494
1495
 
1495
1496
  var DropMenu = React.forwardRef(function (props, ref) {
1496
- var _a = props.color, color = _a === void 0 ? exports.Colors.TRANSPARENT : _a, _b = props.closeOnClickOutside, closeOnClickOutside = _b === void 0 ? true : _b, _c = props.closeOnEscape, closeOnEscape = _c === void 0 ? true : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.showCaret, showCaret = _e === void 0 ? true : _e, _f = props.rightShift, rightShift = _f === void 0 ? 0 : _f, _g = props.shadow, shadow = _g === void 0 ? false : _g, _h = props.show, show = _h === void 0 ? false : _h, _j = props.rounded, rounded = _j === void 0 ? true : _j, _k = props.icon, icon = _k === void 0 ? React__default.createElement(EllipsisVIcon, null) : _k, _l = props.size, size = _l === void 0 ? exports.Sizes.SMALL : _l, _m = props.innerButtonSize, innerButtonSize = _m === void 0 ? exports.Sizes.NORMAL : _m;
1497
+ var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.color, color = _b === void 0 ? exports.Colors.TRANSPARENT : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.showCaret, showCaret = _f === void 0 ? true : _f, _g = props.rightShift, rightShift = _g === void 0 ? 0 : _g, _h = props.shadow, shadow = _h === void 0 ? false : _h, _j = props.show, show = _j === void 0 ? false : _j, _k = props.rounded, rounded = _k === void 0 ? true : _k, _l = props.icon, icon = _l === void 0 ? React__default.createElement(EllipsisVIcon, null) : _l, _m = props.size, size = _m === void 0 ? exports.Sizes.SMALL : _m, _o = props.innerButtonSize, innerButtonSize = _o === void 0 ? exports.Sizes.NORMAL : _o;
1497
1498
  var componentRef = React.useRef(null);
1498
- var _o = React.useState(false), showDropArea = _o[0], setShowDropArea = _o[1];
1499
+ var _p = React.useState(false), showDropArea = _p[0], setShowDropArea = _p[1];
1499
1500
  var openDropArea = function (e) {
1500
1501
  var _a, _b;
1501
1502
  cancelEvent(e);
@@ -1567,7 +1568,7 @@ var DropMenu = React.forwardRef(function (props, ref) {
1567
1568
  "dough-dropmenu-as-line": props.asInvisibleLine,
1568
1569
  "dough-dropmenu-full-width": props.fullWidth,
1569
1570
  }), ref: componentRef }, props.dataAttributes),
1570
- props.asInvisibleLine !== true && (React__default.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
1571
+ props.asInvisibleLine !== true && (React__default.createElement(Button, { className: cn("dough-drop-menu-button", props.buttonClassName), color: color, disabled: disabled, icon: icon, alignIconRight: alignIconRight, padding: props.padding, fullWidth: props.fullWidth, label: props.label, onClick: function (e) {
1571
1572
  if (showDropArea === true) {
1572
1573
  closeDropArea();
1573
1574
  }
@@ -1580,7 +1581,7 @@ var DropMenu = React.forwardRef(function (props, ref) {
1580
1581
  });
1581
1582
  DropMenu.displayName = "DropMenu";
1582
1583
 
1583
- var css_248z$d = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper {\n position: relative;\n display: block;\n box-sizing: border-box;\n min-width: 100%;\n margin-top: 2px;\n margin-bottom: 2px;\n font-family: \"Roboto\", sans-serif;\n cursor: default;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-fe-wrapper + .dough-fe-wrapper {\n margin-top: 16px;\n}\n.dough-fe-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper {\n display: flex;\n flex-flow: column wrap;\n justify-content: flex-start;\n align-items: flex-start;\n box-sizing: border-box;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label {\n order: 1;\n font-size: 0.8125rem;\n transform: translate3d(12px, 28px, 0);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n height: 16px;\n overflow: visible;\n pointer-events: none;\n position: relative;\n z-index: 2;\n padding: 0 4px 0 4px;\n margin-top: -16px;\n margin-left: -2px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label.as-placeholder {\n font-size: 0.875rem;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-helper {\n display: none;\n order: 3;\n font-size: 0.8125rem;\n margin-top: 4px;\n margin-left: 16px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n font-family: \"Roboto\", sans-serif;\n border-width: 2px;\n border-style: solid;\n border-top-style: none;\n border-radius: 6px;\n padding: 0;\n padding-top: 2px;\n flex: 1;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n box-shadow: none;\n order: 2;\n position: relative;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n flex: 1 1 auto;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.dough-input-wrapper-clickable {\n cursor: pointer;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border {\n position: absolute;\n top: 0;\n right: -2px;\n left: -2px;\n width: auto;\n height: 50%;\n color: rgba(0, 0, 0, 0);\n overflow: hidden;\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n pointer-events: none;\n border-color: inherit;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > span:not([class]) {\n padding: 0 4px 0 4px;\n display: none;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n height: 100%;\n border-color: inherit;\n position: relative;\n overflow: hidden;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after:before,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: -100%;\n left: 0;\n width: auto;\n height: auto;\n min-width: 16px;\n border-width: 2px;\n border-style: solid;\n border-bottom: none;\n border-color: inherit;\n border-radius: 6px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: none;\n width: 8px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n right: -100%;\n min-width: 48px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.with-fields {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n display: flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n border: none;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n text-rendering: geometricPrecision;\n background-color: transparent;\n padding: 2px 12px 2px 12px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: 36px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n height: 36px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input {\n width: 1%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n overflow: hidden;\n min-width: 32px;\n padding-left: 2px;\n padding-right: 2px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + input, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + textarea {\n padding-left: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) {\n display: inline-block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before {\n left: -50%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:before {\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(12px, 8px, 0) !important;\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label.as-placeholder {\n opacity: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) {\n border-color: #d2d2d2;\n border-color: var(--dough-color-input-border);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) + .dough-fe-label:not(.as-placeholder) {\n color: #6e6f75;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error {\n border-color: #bf2900;\n border-color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error + .dough-fe-label {\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error ~ .dough-fe-helper {\n display: initial;\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .arrow-icon-container {\n position: absolute;\n top: 50%;\n right: 8px;\n z-index: 1;\n width: 16px;\n height: 16px;\n margin-top: -8px;\n text-align: center;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .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-fe-wrapper > .dough-fe-input-wrapper .dough-inline-svg-icon > path {\n fill: #9f9f9f;\n}\n.dough-fe-wrapper.dough-mandatory > .dough-fe-input-wrapper > .dough-fe-label:after {\n content: \"*\";\n margin-left: 2px;\n}\n.dough-fe-wrapper[readOnly], .dough-fe-wrapper[disabled] {\n pointer-events: none;\n}\n.dough-fe-wrapper[readOnly] *, .dough-fe-wrapper[disabled] * {\n pointer-events: none !important;\n}\n.dough-fe-wrapper[disabled] {\n opacity: 0.5;\n}\n.dough-fe-wrapper[disabled] .dough-fe-wrapper[disabled] {\n opacity: 1;\n}\n.dough-fe-wrapper.dough-fe-borderless {\n margin: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label {\n border: none !important;\n transform: translate3d(-4px, 16px, 0);\n margin-left: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label:before {\n display: none;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element {\n border: none;\n background-color: transparent !important;\n min-height: auto;\n padding-top: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding: 0 !important;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: auto;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element {\n padding-top: 2px !important;\n justify-content: flex-start;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding-top: 2px !important;\n justify-content: flex-end;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(-4px, -4px, 0) !important;\n}\n\n.dough-hidden-input {\n display: none !important;\n}";
1584
+ var css_248z$d = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper {\n position: relative;\n display: block;\n box-sizing: border-box;\n min-width: 100%;\n margin-top: 2px;\n margin-bottom: 2px;\n font-family: \"Roboto\", sans-serif;\n cursor: default;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-fe-wrapper + .dough-fe-wrapper {\n margin-top: 16px;\n}\n.dough-fe-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper.dough-fe-label-animate > .dough-fe-input-wrapper > .dough-fe-label {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper {\n display: flex;\n flex-flow: column wrap;\n justify-content: flex-start;\n align-items: flex-start;\n box-sizing: border-box;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label {\n order: 1;\n font-size: 0.8125rem;\n transform: translate3d(12px, 28px, 0);\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n height: 16px;\n overflow: visible;\n pointer-events: none;\n position: relative;\n z-index: 2;\n padding: 0 4px 0 4px;\n margin-top: -16px;\n margin-left: -2px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-label.as-placeholder {\n font-size: 0.875rem;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-fe-helper {\n display: none;\n order: 3;\n font-size: 0.8125rem;\n margin-top: 4px;\n margin-left: 16px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n font-family: \"Roboto\", sans-serif;\n border-width: 2px;\n border-style: solid;\n border-top-style: none;\n border-radius: 6px;\n padding: 0;\n padding-top: 2px;\n flex: 1;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n box-shadow: none;\n order: 2;\n position: relative;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n flex: 1 1 auto;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.dough-input-wrapper-clickable {\n cursor: pointer;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border {\n position: absolute;\n top: 0;\n right: -2px;\n left: -2px;\n width: auto;\n height: 50%;\n color: rgba(0, 0, 0, 0);\n overflow: hidden;\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n pointer-events: none;\n border-color: inherit;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > span:not([class]) {\n padding: 0 4px 0 4px;\n display: none;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n height: 100%;\n border-color: inherit;\n position: relative;\n overflow: hidden;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after:before,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: -100%;\n left: 0;\n width: auto;\n height: auto;\n min-width: 16px;\n border-width: 2px;\n border-style: solid;\n border-bottom: none;\n border-color: inherit;\n border-radius: 6px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: none;\n width: 8px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-before:before {\n right: -100%;\n min-width: 48px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-input-element-top-border > .dough-input-element-top-border-after {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.with-fields {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n display: flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n border: none;\n width: 100%;\n box-sizing: border-box;\n color: #6e6f75;\n color: var(--dough-color-text-default);\n font-size: 0.875rem;\n text-rendering: geometricPrecision;\n background-color: transparent;\n padding: 2px 12px 2px 12px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > textarea,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container {\n flex: 1 1 auto;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: 36px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n height: 36px;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container-small,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: 28px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container-small,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n height: 28px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > input {\n width: 1%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n overflow: hidden;\n min-width: 32px;\n padding-left: 2px;\n padding-right: 2px;\n}\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody:not(.no-transition) .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: border 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\nbody.no-transition .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + input, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element + textarea {\n padding-left: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) {\n display: inline-block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > span:not([class]) + .dough-input-element-top-border-after:before {\n left: -50%;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus > .dough-input-element-top-border > .dough-input-element-top-border-before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active > .dough-input-element-top-border > .dough-input-element-top-border-before {\n display: block;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:before, .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:before {\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(12px, 8px, 0) !important;\n opacity: 1;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label.as-placeholder {\n opacity: 0;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) {\n border-color: #d2d2d2;\n border-color: var(--dough-color-input-border);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element:not(:focus):not(.active):not(.validation-error) + .dough-fe-label:not(.as-placeholder) {\n color: #6e6f75;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error {\n border-color: #bf2900;\n border-color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error + .dough-fe-label {\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element.validation-error ~ .dough-fe-helper {\n display: initial;\n color: #bf2900;\n color: var(--dough-color-status-danger);\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .arrow-icon-container {\n position: absolute;\n top: 50%;\n right: 8px;\n z-index: 1;\n width: 16px;\n height: 16px;\n margin-top: -8px;\n text-align: center;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n}\n.dough-fe-wrapper > .dough-fe-input-wrapper .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-fe-wrapper > .dough-fe-input-wrapper .dough-inline-svg-icon > path {\n fill: #9f9f9f;\n}\n.dough-fe-wrapper.dough-mandatory > .dough-fe-input-wrapper > .dough-fe-label:after {\n content: \"*\";\n margin-left: 2px;\n}\n.dough-fe-wrapper[readOnly], .dough-fe-wrapper[disabled] {\n pointer-events: none;\n}\n.dough-fe-wrapper[readOnly] *, .dough-fe-wrapper[disabled] * {\n pointer-events: none !important;\n}\n.dough-fe-wrapper[disabled] {\n opacity: 0.5;\n}\n.dough-fe-wrapper[disabled] .dough-fe-wrapper[disabled] {\n opacity: 1;\n}\n.dough-fe-wrapper.dough-fe-borderless {\n margin: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label {\n border: none !important;\n transform: translate3d(-4px, 16px, 0);\n margin-left: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-fe-label:before {\n display: none;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element {\n border: none;\n background-color: transparent !important;\n min-height: auto;\n padding-top: 0;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > textarea,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding: 0 !important;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > input,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .value-container,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element,\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n min-height: auto;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-left-element {\n padding-top: 2px !important;\n justify-content: flex-start;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element > .dough-fe-right-element {\n padding-top: 2px !important;\n justify-content: flex-end;\n min-width: 20px;\n}\n.dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.filled + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element:focus + .dough-fe-label:not(.as-placeholder), .dough-fe-wrapper.dough-fe-borderless > .dough-fe-input-wrapper > .dough-input-element.active + .dough-fe-label:not(.as-placeholder) {\n transform: translate3d(-4px, -4px, 0) !important;\n}\n\n.dough-hidden-input {\n display: none !important;\n}";
1584
1585
  styleInject(css_248z$d);
1585
1586
 
1586
1587
  // TODO in the future type declerations will be also added here
@@ -1649,7 +1650,9 @@ var InputWrapper = function (props) {
1649
1650
  !props.validationResult.valid,
1650
1651
  }) },
1651
1652
  props.startElement && (React__default.createElement("span", { className: "dough-fe-left-element", ref: startElementRef }, props.startElement)),
1652
- React__default.createElement(LayoutContainer, { className: "value-container", verticalAlign: exports.VerticalAlignment.CENTER },
1653
+ React__default.createElement(LayoutContainer, { className: cn("value-container", {
1654
+ "value-container-small": props.small,
1655
+ }), verticalAlign: exports.VerticalAlignment.CENTER },
1653
1656
  React__default.createElement(LayoutFlexBox, { spacing: exports.Spacings.STRETCH, verticalAlign: exports.VerticalAlignment.CENTER }, props.children)),
1654
1657
  props.endElement && (React__default.createElement("span", { className: "dough-fe-right-element" }, props.endElement)),
1655
1658
  !props.borderless && (React__default.createElement("span", { className: "dough-input-element-top-border" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "9.10.0",
3
+ "version": "9.14.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",