@speakapbv/dough-component-library 9.15.0 → 9.18.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 (4) hide show
  1. package/dist/components/form-elements/select-box/select-box.d.ts +2 -1
  2. package/dist/index.es.js +3 -3
  3. package/dist/index.js +3 -3
  4. package/package.json +1 -1
package/dist/components/form-elements/select-box/select-box.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare type DoughSelectBoxInputRef = {
17
17
  interface SelectBoxCommonProps {
18
18
  ref?: Ref<DoughSelectBoxInputRef>;
19
19
  width?: string;
20
+ dropAreaWidth?: string;
20
21
  busy?: boolean;
21
22
  borderless?: boolean;
22
23
  className?: string;
@@ -63,5 +64,5 @@ export interface SelectBoxMultipleProps {
63
64
  value?: Array<DoughSelectBoxData>;
64
65
  }
65
66
  export declare type SelectBoxProps = SelectBoxCommonProps & (SelectBoxSingleProps | SelectBoxMultipleProps);
66
- export declare const SelectBox: React.ForwardRefExoticComponent<Pick<SelectBoxProps, "width" | "busy" | "borderless" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "data" | "autoFocus" | "disabled" | "readOnly" | "emptyOptionText" | "filterItems" | "filterInputAutoFocus" | "filterFunction" | "onFilterTextChanged" | "optionComponent" | "filterPlaceholder" | "label" | "mandatory" | "multiple" | "placeholder" | "guidingIcon" | "validationResult" | "onBlur" | "onChange" | "onFocus" | "validator" | "value"> & React.RefAttributes<DoughSelectBoxInputRef>>;
67
+ export declare const SelectBox: React.ForwardRefExoticComponent<Pick<SelectBoxProps, "width" | "dropAreaWidth" | "busy" | "borderless" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "data" | "autoFocus" | "disabled" | "readOnly" | "emptyOptionText" | "filterItems" | "filterInputAutoFocus" | "filterFunction" | "onFilterTextChanged" | "optionComponent" | "filterPlaceholder" | "label" | "mandatory" | "multiple" | "placeholder" | "guidingIcon" | "validationResult" | "onBlur" | "onChange" | "onFocus" | "validator" | "value"> & React.RefAttributes<DoughSelectBoxInputRef>>;
67
68
  export {};
package/dist/index.es.js CHANGED
@@ -1595,7 +1595,7 @@ var DropMenu = forwardRef(function (props, ref) {
1595
1595
  });
1596
1596
  DropMenu.displayName = "DropMenu";
1597
1597
 
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 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 {\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
+ 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 > .value-container-small {\n min-height: 28px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container-small {\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}";
1599
1599
  styleInject(css_248z$d);
1600
1600
 
1601
1601
  // TODO in the future type declerations will be also added here
@@ -3839,7 +3839,7 @@ var SelectBox = forwardRef(function (props, ref) {
3839
3839
  React.createElement("span", { className: "dough-input-element-top-border-before" }),
3840
3840
  React.createElement("span", null, props.label))),
3841
3841
  React.createElement("span", { className: "dough-input-element-top-border-after" })))),
3842
- React.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea },
3842
+ React.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea, width: props.dropAreaWidth },
3843
3843
  React.createElement(LayoutContainer, { layoutType: Direction.VERTICAL },
3844
3844
  props.filterItems && (React.createElement(LayoutFlexBox, { verticalAlign: VerticalAlignment.CENTER, autoFit: false, className: "dough-selectbox-filter-container", spacing: Spacings.AUTO },
3845
3845
  React.createElement(TextInput, { autoFocus: props.filterInputAutoFocus, tabIndex: props.tabIndex === undefined
@@ -4186,7 +4186,7 @@ var Dialog = function (props) {
4186
4186
  };
4187
4187
  Dialog.displayName = "Dialog";
4188
4188
 
4189
- var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: rgba(0, 0, 0, 0.75);\n padding: 8px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: white;\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: white;\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: #6e6f75;\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: white;\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4189
+ var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: black;\n padding: 8px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: white;\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: white;\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: #6e6f75;\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: white;\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4190
4190
  styleInject(css_248z$t);
4191
4191
 
4192
4192
  var TooltipDirection;
package/dist/index.js CHANGED
@@ -1581,7 +1581,7 @@ var DropMenu = React.forwardRef(function (props, ref) {
1581
1581
  });
1582
1582
  DropMenu.displayName = "DropMenu";
1583
1583
 
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 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 {\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
+ 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 > .value-container-small {\n min-height: 28px;\n}\nhtml.dough-IE11 .dough-fe-wrapper > .dough-fe-input-wrapper > .dough-input-element > .value-container-small {\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}";
1585
1585
  styleInject(css_248z$d);
1586
1586
 
1587
1587
  // TODO in the future type declerations will be also added here
@@ -3824,7 +3824,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
3824
3824
  React__default.createElement("span", { className: "dough-input-element-top-border-before" }),
3825
3825
  React__default.createElement("span", null, props.label))),
3826
3826
  React__default.createElement("span", { className: "dough-input-element-top-border-after" })))),
3827
- React__default.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea },
3827
+ React__default.createElement(DropArea, { onHide: handleBlur, referenceElement: componentRef, show: showDropArea, width: props.dropAreaWidth },
3828
3828
  React__default.createElement(LayoutContainer, { layoutType: exports.Direction.VERTICAL },
3829
3829
  props.filterItems && (React__default.createElement(LayoutFlexBox, { verticalAlign: exports.VerticalAlignment.CENTER, autoFit: false, className: "dough-selectbox-filter-container", spacing: exports.Spacings.AUTO },
3830
3830
  React__default.createElement(TextInput, { autoFocus: props.filterInputAutoFocus, tabIndex: props.tabIndex === undefined
@@ -4171,7 +4171,7 @@ var Dialog = function (props) {
4171
4171
  };
4172
4172
  Dialog.displayName = "Dialog";
4173
4173
 
4174
- var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: rgba(0, 0, 0, 0.75);\n padding: 8px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: white;\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: white;\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: #6e6f75;\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: white;\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4174
+ var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: black;\n padding: 8px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: white;\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: white;\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: #6e6f75;\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: white;\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4175
4175
  styleInject(css_248z$t);
4176
4176
 
4177
4177
  (function (TooltipDirection) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "9.15.0",
3
+ "version": "9.18.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",