@speakapbv/dough-component-library 9.20.2 → 9.21.0

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.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;
@@ -2922,12 +2922,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();
@@ -4236,7 +4236,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 +4245,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 +4273,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 +4289,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) -

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) {
@@ -2906,12 +2906,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();
@@ -4220,7 +4220,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 +4228,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 +4256,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 +4272,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) -

package/package.json

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