@speakapbv/dough-component-library 9.20.1 → 9.21.1

package/dist/components/tag-comp/tag.d.ts

@@ -7,6 +7,7 @@ export interface TagProps {
     dataAttributes?: DoughDataAttributes;
     color?: Colors;
     big?: boolean;
+    disabled?: boolean;
     onRemove?(): void;
 }
 export declare const Tag: {

package/dist/components/texts/texts.d.ts

@@ -65,3 +65,11 @@ export declare const Paragraph: {
     (props: TypoProps): JSX.Element;
     displayName: string;
 };
+export declare const UnorderedList: {
+    (props: TypoProps): JSX.Element;
+    displayName: string;
+};
+export declare const DoughListItem: {
+    (props: TypoProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/tooltip/tooltip.d.ts

@@ -5,7 +5,8 @@ export declare enum TooltipDirection {
     UP = "up",
     RIGHT = "right",
     DOWN = "down",
-    LEFT = "left"
+    LEFT = "left",
+    UP_LEFT = "up-left"
 }
 export interface TooltipProps {
     direction?: TooltipDirection;

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { LayoutFlexBox } from "./components/layout-comp/layout-flex-box";
 export { Header } from "./components/containers/card/header";
 export { Footer } from "./components/containers/card/footer";
 export { DropMenu, DoughDropMenuRef } from "./components/drop-menu/drop-menu";
-export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, } from "./components/texts/texts";
+export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, DoughListItem, UnorderedList, } from "./components/texts/texts";
 export { InputWrapper } from "./components/form-elements/input-wrapper/input-wrapper";
 export { TextInput } from "./components/form-elements/text-inputs/text-input";
 export { DateTime, DoughDateInput, } from "./components/form-elements/date-time/date-time";

package/dist/index.es.js

@@ -855,7 +855,7 @@ var LayoutFlexBox = function (props) {
 };
 LayoutFlexBox.displayName = "LayoutFlexBox";
 
-var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  box-sizing: border-box;\n  margin: 0;\n  user-select: text;\n  position: relative;\n}\n.dough-typo.dough-text-nowrap {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dough-typo.dough-text-ellipsis {\n  text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n  text-align: left;\n}\n.dough-typo.dough-text-align-right {\n  text-align: right;\n}\n.dough-typo.dough-text-align-center {\n  text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n  text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n  text-align: justify;\n}\n.dough-typo.dough-text {\n  line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n  font-size: 1.625rem;\n  line-height: 1.875rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n  font-size: 1.625rem !important;\n  font-weight: 700 !important;\n  top: 0.40625rem;\n}\n.dough-typo.dough-text-h2 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  top: 0.375rem;\n}\n.dough-typo.dough-text-h3 {\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n  font-size: 1.25rem !important;\n  font-weight: 700 !important;\n  top: 0.3125rem;\n}\n.dough-typo.dough-text-h4 {\n  font-size: 1.125rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n  font-size: 1.125rem !important;\n  font-weight: 700 !important;\n  top: 0.28125rem;\n}\n.dough-typo.dough-text-h5 {\n  font-size: 1rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n  font-size: 1rem !important;\n  font-weight: 700 !important;\n  top: 0.25rem;\n}\n.dough-typo.dough-text-h6 {\n  font-size: 0.875rem;\n  line-height: 1.3rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n  font-size: 0.875rem !important;\n  font-weight: 700 !important;\n  top: 0.21875rem;\n}\n.dough-typo.dough-text-h7 {\n  font-size: 0.8125rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n  font-size: 0.8125rem !important;\n  font-weight: 700 !important;\n  top: 0.203125rem;\n}\n.dough-typo.dough-text-subtitle {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-weight: 400;\n  font-size: 0.8125rem;\n  line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n  color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n  font-size: 0.875rem;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n  line-height: 0.94rem;\n  font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n  line-height: 0.8rem;\n  font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n  line-height: 0.6875rem;\n  font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n  font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n  font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n  text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n  text-decoration: line-through;\n}";
+var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  box-sizing: border-box;\n  margin: 0;\n  user-select: text;\n  position: relative;\n}\n.dough-typo.dough-text-nowrap {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dough-typo.dough-text-ellipsis {\n  text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n  text-align: left;\n}\n.dough-typo.dough-text-align-right {\n  text-align: right;\n}\n.dough-typo.dough-text-align-center {\n  text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n  text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n  text-align: justify;\n}\n.dough-typo.dough-text {\n  line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n  font-size: 1.625rem;\n  line-height: 1.875rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n  font-size: 1.625rem !important;\n  font-weight: 700 !important;\n  top: 0.40625rem;\n}\n.dough-typo.dough-text-h2 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  top: 0.375rem;\n}\n.dough-typo.dough-text-h3 {\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n  font-size: 1.25rem !important;\n  font-weight: 700 !important;\n  top: 0.3125rem;\n}\n.dough-typo.dough-text-h4 {\n  font-size: 1.125rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n  font-size: 1.125rem !important;\n  font-weight: 700 !important;\n  top: 0.28125rem;\n}\n.dough-typo.dough-text-h5 {\n  font-size: 1rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n  font-size: 1rem !important;\n  font-weight: 700 !important;\n  top: 0.25rem;\n}\n.dough-typo.dough-text-h6 {\n  font-size: 0.875rem;\n  line-height: 1.3rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n  font-size: 0.875rem !important;\n  font-weight: 700 !important;\n  top: 0.21875rem;\n}\n.dough-typo.dough-text-h7 {\n  font-size: 0.8125rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n  font-size: 0.8125rem !important;\n  font-weight: 700 !important;\n  top: 0.203125rem;\n}\n.dough-typo.dough-text-subtitle {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-weight: 400;\n  font-size: 0.8125rem;\n  line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n  color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n  font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n  padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n  line-height: 0.94rem;\n  font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n  line-height: 0.8rem;\n  font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n  line-height: 0.6875rem;\n  font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n  font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n  font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n  text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n  text-decoration: line-through;\n}";
 styleInject(css_248z$6);
 
 var TextAlignment;
@@ -899,7 +899,11 @@ Subtitle.displayName = "Subtitle";
 var Text = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text"), component: props.component ? props.component : "span" }))); };
 Text.displayName = "Text";
 var Paragraph = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-paragraph"), component: props.component ? props.component : "p" }))); };
-Paragraph.displayName = "Paragraph";
+Paragraph.displayName = "Paragraph";
+var UnorderedList = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-unordered-list"), component: props.component ? props.component : "ul" }))); };
+UnorderedList.displayName = "UnorderedList";
+var DoughListItem = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-list-item"), component: props.component ? props.component : "li" }))); };
+DoughListItem.displayName = "DoughListItem";
 
 var ToggleWithText = forwardRef(function (props, ref) {
     var _a = props.color, color = _a === void 0 ? Colors.LIKE : _a;
@@ -2922,12 +2926,12 @@ var TextArea = forwardRef(function (props, ref) {
 });
 TextArea.displayName = "TextArea";
 
-var css_248z$k = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tag-item {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 8px 2px 8px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 2px;\n  margin-left: 0;\n  border-radius: 3px;\n  font-size: 0.6875rem;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tag-item .dough-button-wrapper {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n  margin-left: 4px;\n  margin-right: -4px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-button-background-wrapper {\n  display: none;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon {\n  width: 12px;\n  height: 12px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-white);\n}";
+var css_248z$k = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tag-item {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 8px 2px 8px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 2px;\n  margin-left: 0;\n  border-radius: 3px;\n  font-size: 0.6875rem;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tag-item.disabled {\n  opacity: 0.5;\n}\n.dough-tag-item.disabled .dough-button {\n  opacity: 1;\n}\n.dough-tag-item .dough-button-wrapper {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n  margin-left: 4px;\n  margin-right: -4px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-button-background-wrapper {\n  display: none;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon {\n  width: 12px;\n  height: 12px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-white);\n}";
 styleInject(css_248z$k);
 
-var Tag = function (props) { return (React.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : Colors.HEADER, props.className) }, props.dataAttributes),
+var Tag = function (props) { return (React.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : Colors.HEADER, props.className, { disabled: props.disabled }) }, props.dataAttributes),
     React.createElement(Text, { tiny: !props.big, bold: true }, props.children),
-    props.onRemove && (React.createElement(Button, { padding: false, color: Colors.TRANSPARENT, icon: React.createElement(CloseIcon, null), onClick: function (e) {
+    props.onRemove && (React.createElement(Button, { padding: false, color: Colors.TRANSPARENT, icon: React.createElement(CloseIcon, null), disabled: props.disabled, onClick: function (e) {
             cancelEvent(e);
             if (typeof props.onRemove === "function") {
                 props.onRemove();
@@ -3897,7 +3901,7 @@ var SelectBox = forwardRef(function (props, ref) {
 });
 SelectBox.displayName = "SelectBox";
 
-var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
+var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
 styleInject(css_248z$n);
 
 var CheckBox = forwardRef(function (props, ref) {
@@ -3941,7 +3945,7 @@ var CheckBox = forwardRef(function (props, ref) {
                 React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
                     React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
                             ? 0
-                            : props.tabIndex, color: props.value ? color : Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, disabled: props === null || props === void 0 ? void 0 : props.disabled, size: size })),
+                            : props.tabIndex, color: props.value ? color : Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
                 (props.label || props.children) && (React.createElement(Box, { display: BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: BoxAlign.CENTER },
                     React.createElement("span", { className: "dough-fe-label", onClick: handleChange }, props.children
                         ? props.children
@@ -4236,7 +4240,7 @@ var Dialog = function (props) {
 };
 Dialog.displayName = "Dialog";
 
-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: rgb(0, 0, 0);\n  padding: 8px;\n  border-radius: 12px;\n  font-size: 0.8125rem;\n  box-sizing: border-box;\n  color: rgb(255, 255, 255);\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: rgb(255, 255, 255);\n  background-color: var(--dough-color-white);\n  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n  fill: rgb(255, 255, 255);\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}";
+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: rgb(0, 0, 0);\n  padding: 8px;\n  border-radius: 12px;\n  font-size: 0.8125rem;\n  box-sizing: border-box;\n  color: rgb(255, 255, 255);\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: rgb(255, 255, 255);\n  background-color: var(--dough-color-white);\n  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-content {\n  bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow, .dough-tooltip-wrapper.up-left > .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, .dough-tooltip-wrapper.visible:not(:empty).up-left {\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}";
 styleInject(css_248z$t);
 
 var TooltipDirection;
@@ -4245,6 +4249,7 @@ var TooltipDirection;
     TooltipDirection["RIGHT"] = "right";
     TooltipDirection["DOWN"] = "down";
     TooltipDirection["LEFT"] = "left";
+    TooltipDirection["UP_LEFT"] = "up-left";
 })(TooltipDirection || (TooltipDirection = {}));
 var Tooltip = function (props) {
     var _a = props.direction, direction = _a === void 0 ? TooltipDirection.UP : _a, _b = props.delay, delay = _b === void 0 ? 150 : _b, _c = props.position, position = _c === void 0 ? { left: "0px", top: "0px" } : _c, _d = props.theme, theme = _d === void 0 ? "dark" : _d;
@@ -4272,6 +4277,9 @@ var Tooltip = function (props) {
                 top_1 = top_1 + pos.height / 2;
                 left = pos.left + pos.width;
             }
+            else if (direction === "up-left" && tooltipContent.current) {
+                left = pos.left + tooltipContent.current.clientWidth / 2;
+            }
             setPositionStyle({
                 transform: "translate3d(" + left + "px, " + top_1 + "px, 0)",
             });
@@ -4285,7 +4293,9 @@ var Tooltip = function (props) {
         updatePositionFromRef();
         setShowTooltip(setTimeout(function () {
             var _a;
-            if ((direction === "up" || direction === "down") &&
+            if ((direction === "up" ||
+                direction === "down" ||
+                direction === "up-left") &&
                 tooltipContent &&
                 tooltipContent.current) {
                 var windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) -
@@ -5543,4 +5553,4 @@ GridItem.displayName = "GridItem";
 
 injectRobotoFont();
 
-export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };
+export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };

package/dist/index.js

@@ -849,7 +849,7 @@ var LayoutFlexBox = function (props) {
 };
 LayoutFlexBox.displayName = "LayoutFlexBox";
 
-var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  box-sizing: border-box;\n  margin: 0;\n  user-select: text;\n  position: relative;\n}\n.dough-typo.dough-text-nowrap {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dough-typo.dough-text-ellipsis {\n  text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n  text-align: left;\n}\n.dough-typo.dough-text-align-right {\n  text-align: right;\n}\n.dough-typo.dough-text-align-center {\n  text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n  text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n  text-align: justify;\n}\n.dough-typo.dough-text {\n  line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n  font-size: 1.625rem;\n  line-height: 1.875rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n  font-size: 1.625rem !important;\n  font-weight: 700 !important;\n  top: 0.40625rem;\n}\n.dough-typo.dough-text-h2 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  top: 0.375rem;\n}\n.dough-typo.dough-text-h3 {\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n  font-size: 1.25rem !important;\n  font-weight: 700 !important;\n  top: 0.3125rem;\n}\n.dough-typo.dough-text-h4 {\n  font-size: 1.125rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n  font-size: 1.125rem !important;\n  font-weight: 700 !important;\n  top: 0.28125rem;\n}\n.dough-typo.dough-text-h5 {\n  font-size: 1rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n  font-size: 1rem !important;\n  font-weight: 700 !important;\n  top: 0.25rem;\n}\n.dough-typo.dough-text-h6 {\n  font-size: 0.875rem;\n  line-height: 1.3rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n  font-size: 0.875rem !important;\n  font-weight: 700 !important;\n  top: 0.21875rem;\n}\n.dough-typo.dough-text-h7 {\n  font-size: 0.8125rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n  font-size: 0.8125rem !important;\n  font-weight: 700 !important;\n  top: 0.203125rem;\n}\n.dough-typo.dough-text-subtitle {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-weight: 400;\n  font-size: 0.8125rem;\n  line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n  color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n  font-size: 0.875rem;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n  line-height: 0.94rem;\n  font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n  line-height: 0.8rem;\n  font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n  line-height: 0.6875rem;\n  font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n  font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n  font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n  text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n  text-decoration: line-through;\n}";
+var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n  font-family: \"Roboto\", sans-serif;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  box-sizing: border-box;\n  margin: 0;\n  user-select: text;\n  position: relative;\n}\n.dough-typo.dough-text-nowrap {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dough-typo.dough-text-ellipsis {\n  text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n  text-align: left;\n}\n.dough-typo.dough-text-align-right {\n  text-align: right;\n}\n.dough-typo.dough-text-align-center {\n  text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n  text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n  text-align: justify;\n}\n.dough-typo.dough-text {\n  line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n  font-size: 1.625rem;\n  line-height: 1.875rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n  font-size: 1.625rem !important;\n  font-weight: 700 !important;\n  top: 0.40625rem;\n}\n.dough-typo.dough-text-h2 {\n  font-size: 1.5rem;\n  line-height: 1.75rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  top: 0.375rem;\n}\n.dough-typo.dough-text-h3 {\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n  font-size: 1.25rem !important;\n  font-weight: 700 !important;\n  top: 0.3125rem;\n}\n.dough-typo.dough-text-h4 {\n  font-size: 1.125rem;\n  line-height: 1.5rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n  font-size: 1.125rem !important;\n  font-weight: 700 !important;\n  top: 0.28125rem;\n}\n.dough-typo.dough-text-h5 {\n  font-size: 1rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n  font-size: 1rem !important;\n  font-weight: 700 !important;\n  top: 0.25rem;\n}\n.dough-typo.dough-text-h6 {\n  font-size: 0.875rem;\n  line-height: 1.3rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n  font-size: 0.875rem !important;\n  font-weight: 700 !important;\n  top: 0.21875rem;\n}\n.dough-typo.dough-text-h7 {\n  font-size: 0.8125rem;\n  line-height: 1.175rem;\n  font-weight: 700;\n  min-width: 100%;\n  display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n  font-size: 0.8125rem !important;\n  font-weight: 700 !important;\n  top: 0.203125rem;\n}\n.dough-typo.dough-text-subtitle {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  font-weight: 400;\n  font-size: 0.8125rem;\n  line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n  color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n  font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n  padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n  line-height: 0.94rem;\n  font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n  line-height: 0.8rem;\n  font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n  line-height: 0.6875rem;\n  font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n  font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n  font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n  text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n  text-decoration: line-through;\n}";
 styleInject(css_248z$6);
 
 (function (TextAlignment) {
@@ -892,7 +892,11 @@ Subtitle.displayName = "Subtitle";
 var Text = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text"), component: props.component ? props.component : "span" }))); };
 Text.displayName = "Text";
 var Paragraph = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-paragraph"), component: props.component ? props.component : "p" }))); };
-Paragraph.displayName = "Paragraph";
+Paragraph.displayName = "Paragraph";
+var UnorderedList = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-unordered-list"), component: props.component ? props.component : "ul" }))); };
+UnorderedList.displayName = "UnorderedList";
+var DoughListItem = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-list-item"), component: props.component ? props.component : "li" }))); };
+DoughListItem.displayName = "DoughListItem";
 
 var ToggleWithText = React.forwardRef(function (props, ref) {
     var _a = props.color, color = _a === void 0 ? exports.Colors.LIKE : _a;
@@ -2906,12 +2910,12 @@ var TextArea = React.forwardRef(function (props, ref) {
 });
 TextArea.displayName = "TextArea";
 
-var css_248z$k = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tag-item {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 8px 2px 8px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 2px;\n  margin-left: 0;\n  border-radius: 3px;\n  font-size: 0.6875rem;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tag-item .dough-button-wrapper {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n  margin-left: 4px;\n  margin-right: -4px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-button-background-wrapper {\n  display: none;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon {\n  width: 12px;\n  height: 12px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-white);\n}";
+var css_248z$k = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tag-item {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding: 2px 8px 2px 8px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 2px;\n  margin-left: 0;\n  border-radius: 3px;\n  font-size: 0.6875rem;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tag-item.disabled {\n  opacity: 0.5;\n}\n.dough-tag-item.disabled .dough-button {\n  opacity: 1;\n}\n.dough-tag-item .dough-button-wrapper {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button {\n  width: 12px;\n  height: 12px;\n  min-height: 12px;\n  min-width: 12px;\n  padding: 0;\n  margin-left: 4px;\n  margin-right: -4px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-button-background-wrapper {\n  display: none;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon {\n  width: 12px;\n  height: 12px;\n}\n.dough-tag-item .dough-button-wrapper > .dough-button .dough-inline-svg-icon path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-white);\n}";
 styleInject(css_248z$k);
 
-var Tag = function (props) { return (React__default.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : exports.Colors.HEADER, props.className) }, props.dataAttributes),
+var Tag = function (props) { return (React__default.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : exports.Colors.HEADER, props.className, { disabled: props.disabled }) }, props.dataAttributes),
     React__default.createElement(Text, { tiny: !props.big, bold: true }, props.children),
-    props.onRemove && (React__default.createElement(Button, { padding: false, color: exports.Colors.TRANSPARENT, icon: React__default.createElement(CloseIcon, null), onClick: function (e) {
+    props.onRemove && (React__default.createElement(Button, { padding: false, color: exports.Colors.TRANSPARENT, icon: React__default.createElement(CloseIcon, null), disabled: props.disabled, onClick: function (e) {
             cancelEvent(e);
             if (typeof props.onRemove === "function") {
                 props.onRemove();
@@ -3881,7 +3885,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
 });
 SelectBox.displayName = "SelectBox";
 
-var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
+var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
 styleInject(css_248z$n);
 
 var CheckBox = React.forwardRef(function (props, ref) {
@@ -3925,7 +3929,7 @@ var CheckBox = React.forwardRef(function (props, ref) {
                 React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
                     React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
                             ? 0
-                            : props.tabIndex, color: props.value ? color : exports.Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, disabled: props === null || props === void 0 ? void 0 : props.disabled, size: size })),
+                            : props.tabIndex, color: props.value ? color : exports.Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
                 (props.label || props.children) && (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: exports.BoxAlign.CENTER },
                     React__default.createElement("span", { className: "dough-fe-label", onClick: handleChange }, props.children
                         ? props.children
@@ -4220,7 +4224,7 @@ var Dialog = function (props) {
 };
 Dialog.displayName = "Dialog";
 
-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: rgb(0, 0, 0);\n  padding: 8px;\n  border-radius: 12px;\n  font-size: 0.8125rem;\n  box-sizing: border-box;\n  color: rgb(255, 255, 255);\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: rgb(255, 255, 255);\n  background-color: var(--dough-color-white);\n  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n  fill: rgb(255, 255, 255);\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}";
+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: rgb(0, 0, 0);\n  padding: 8px;\n  border-radius: 12px;\n  font-size: 0.8125rem;\n  box-sizing: border-box;\n  color: rgb(255, 255, 255);\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: rgb(255, 255, 255);\n  background-color: var(--dough-color-white);\n  box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-content {\n  bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow, .dough-tooltip-wrapper.up-left > .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, .dough-tooltip-wrapper.visible:not(:empty).up-left {\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}";
 styleInject(css_248z$t);
 
 (function (TooltipDirection) {
@@ -4228,6 +4232,7 @@ styleInject(css_248z$t);
     TooltipDirection["RIGHT"] = "right";
     TooltipDirection["DOWN"] = "down";
     TooltipDirection["LEFT"] = "left";
+    TooltipDirection["UP_LEFT"] = "up-left";
 })(exports.TooltipDirection || (exports.TooltipDirection = {}));
 var Tooltip = function (props) {
     var _a = props.direction, direction = _a === void 0 ? exports.TooltipDirection.UP : _a, _b = props.delay, delay = _b === void 0 ? 150 : _b, _c = props.position, position = _c === void 0 ? { left: "0px", top: "0px" } : _c, _d = props.theme, theme = _d === void 0 ? "dark" : _d;
@@ -4255,6 +4260,9 @@ var Tooltip = function (props) {
                 top_1 = top_1 + pos.height / 2;
                 left = pos.left + pos.width;
             }
+            else if (direction === "up-left" && tooltipContent.current) {
+                left = pos.left + tooltipContent.current.clientWidth / 2;
+            }
             setPositionStyle({
                 transform: "translate3d(" + left + "px, " + top_1 + "px, 0)",
             });
@@ -4268,7 +4276,9 @@ var Tooltip = function (props) {
         updatePositionFromRef();
         setShowTooltip(setTimeout(function () {
             var _a;
-            if ((direction === "up" || direction === "down") &&
+            if ((direction === "up" ||
+                direction === "down" ||
+                direction === "up-left") &&
                 tooltipContent &&
                 tooltipContent.current) {
                 var windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) -
@@ -5544,6 +5554,7 @@ exports.DateTime = DateTime;
 exports.DesignTokens = DesignTokens;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
+exports.DoughListItem = DoughListItem;
 exports.DropMenu = DropMenu;
 exports.Fader = Fader;
 exports.Footer = Footer;
@@ -5592,6 +5603,7 @@ exports.TimePicker = TimePicker;
 exports.Toggle = Toggle;
 exports.ToggleWithText = ToggleWithText;
 exports.Tooltip = Tooltip;
+exports.UnorderedList = UnorderedList;
 exports.cancelEvent = cancelEvent;
 exports.checkComponentType = checkComponentType;
 exports.cn = cn;

package/package.json

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