@speakapbv/dough-component-library 9.20.0 → 9.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/tag-comp/tag.d.ts +1 -0
  2. package/dist/components/texts/texts.d.ts +8 -0
  3. package/dist/components/tooltip/tooltip.d.ts +2 -1
  4. package/dist/index.es.js +15 -8
  5. package/dist/index.js +15 -8
  6. package/dist/{components → src/components}/app-background/app-background.d.ts +0 -0
  7. package/dist/{components → src/components}/containers/grid/grid.d.ts +0 -0
  8. package/dist/{components → src/components}/containers/table/table-row.d.ts +0 -0
  9. package/dist/{components → src/components}/spacer/spacer.d.ts +0 -0
  10. package/dist/{components → src/components}/spinner/spinner.d.ts +0 -0
  11. package/package.json +1 -1
package/dist/components/tag-comp/tag.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface TagProps {
7
7
  dataAttributes?: DoughDataAttributes;
8
8
  color?: Colors;
9
9
  big?: boolean;
10
+ disabled?: boolean;
10
11
  onRemove?(): void;
11
12
  }
12
13
  export declare const Tag: {
package/dist/components/texts/texts.d.ts CHANGED
@@ -65,3 +65,11 @@ export declare const Paragraph: {
65
65
  (props: TypoProps): JSX.Element;
66
66
  displayName: string;
67
67
  };
68
+ export declare const UnorderedList: {
69
+ (props: TypoProps): JSX.Element;
70
+ displayName: string;
71
+ };
72
+ export declare const DoughListItem: {
73
+ (props: TypoProps): JSX.Element;
74
+ displayName: string;
75
+ };
package/dist/components/tooltip/tooltip.d.ts CHANGED
@@ -5,7 +5,8 @@ export declare enum TooltipDirection {
5
5
  UP = "up",
6
6
  RIGHT = "right",
7
7
  DOWN = "down",
8
- LEFT = "left"
8
+ LEFT = "left",
9
+ UP_LEFT = "up-left"
9
10
  }
10
11
  export interface TooltipProps {
11
12
  direction?: TooltipDirection;
package/dist/index.es.js CHANGED
@@ -855,7 +855,7 @@ var LayoutFlexBox = function (props) {
855
855
  };
856
856
  LayoutFlexBox.displayName = "LayoutFlexBox";
857
857
 
858
- 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}";
858
+ 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}";
859
859
  styleInject(css_248z$6);
860
860
 
861
861
  var TextAlignment;
@@ -2922,12 +2922,12 @@ var TextArea = forwardRef(function (props, ref) {
2922
2922
  });
2923
2923
  TextArea.displayName = "TextArea";
2924
2924
 
2925
- 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}";
2925
+ 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}";
2926
2926
  styleInject(css_248z$k);
2927
2927
 
2928
- var Tag = function (props) { return (React.createElement("div", __assign({ className: cn("dough-tag-item", props.color ? props.color : Colors.HEADER, props.className) }, props.dataAttributes),
2928
+ 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),
2929
2929
  React.createElement(Text, { tiny: !props.big, bold: true }, props.children),
2930
- props.onRemove && (React.createElement(Button, { padding: false, color: Colors.TRANSPARENT, icon: React.createElement(CloseIcon, null), onClick: function (e) {
2930
+ props.onRemove && (React.createElement(Button, { padding: false, color: Colors.TRANSPARENT, icon: React.createElement(CloseIcon, null), disabled: props.disabled, onClick: function (e) {
2931
2931
  cancelEvent(e);
2932
2932
  if (typeof props.onRemove === "function") {
2933
2933
  props.onRemove();
@@ -3897,7 +3897,7 @@ var SelectBox = forwardRef(function (props, ref) {
3897
3897
  });
3898
3898
  SelectBox.displayName = "SelectBox";
3899
3899
 
3900
- 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 .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}";
3900
+ 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}";
3901
3901
  styleInject(css_248z$n);
3902
3902
 
3903
3903
  var CheckBox = forwardRef(function (props, ref) {
@@ -3934,11 +3934,12 @@ var CheckBox = forwardRef(function (props, ref) {
3934
3934
  React.createElement("div", { className: cn("dough-selection-container", {
3935
3935
  checked: props.value === 1 || props.value,
3936
3936
  rounded: props.rounded,
3937
+ disabled: props.disabled,
3937
3938
  }) },
3938
3939
  React.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
3939
3940
  React.createElement(Box, { display: BoxDisplay.FLEX, alignItems: BoxAlign.CENTER, wrap: BoxWrap.NOWRAP },
3940
3941
  React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
3941
- React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined
3942
+ React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
3942
3943
  ? 0
3943
3944
  : props.tabIndex, color: props.value ? color : Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
3944
3945
  (props.label || props.children) && (React.createElement(Box, { display: BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: BoxAlign.CENTER },
@@ -4235,7 +4236,7 @@ var Dialog = function (props) {
4235
4236
  };
4236
4237
  Dialog.displayName = "Dialog";
4237
4238
 
4238
- 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}";
4239
+ 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}";
4239
4240
  styleInject(css_248z$t);
4240
4241
 
4241
4242
  var TooltipDirection;
@@ -4244,6 +4245,7 @@ var TooltipDirection;
4244
4245
  TooltipDirection["RIGHT"] = "right";
4245
4246
  TooltipDirection["DOWN"] = "down";
4246
4247
  TooltipDirection["LEFT"] = "left";
4248
+ TooltipDirection["UP_LEFT"] = "up-left";
4247
4249
  })(TooltipDirection || (TooltipDirection = {}));
4248
4250
  var Tooltip = function (props) {
4249
4251
  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;
@@ -4271,6 +4273,9 @@ var Tooltip = function (props) {
4271
4273
  top_1 = top_1 + pos.height / 2;
4272
4274
  left = pos.left + pos.width;
4273
4275
  }
4276
+ else if (direction === "up-left" && tooltipContent.current) {
4277
+ left = pos.left + tooltipContent.current.clientWidth / 2;
4278
+ }
4274
4279
  setPositionStyle({
4275
4280
  transform: "translate3d(" + left + "px, " + top_1 + "px, 0)",
4276
4281
  });
@@ -4284,7 +4289,9 @@ var Tooltip = function (props) {
4284
4289
  updatePositionFromRef();
4285
4290
  setShowTooltip(setTimeout(function () {
4286
4291
  var _a;
4287
- if ((direction === "up" || direction === "down") &&
4292
+ if ((direction === "up" ||
4293
+ direction === "down" ||
4294
+ direction === "up-left") &&
4288
4295
  tooltipContent &&
4289
4296
  tooltipContent.current) {
4290
4297
  var windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) -
package/dist/index.js CHANGED
@@ -849,7 +849,7 @@ var LayoutFlexBox = function (props) {
849
849
  };
850
850
  LayoutFlexBox.displayName = "LayoutFlexBox";
851
851
 
852
- 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}";
852
+ 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}";
853
853
  styleInject(css_248z$6);
854
854
 
855
855
  (function (TextAlignment) {
@@ -2906,12 +2906,12 @@ var TextArea = React.forwardRef(function (props, ref) {
2906
2906
  });
2907
2907
  TextArea.displayName = "TextArea";
2908
2908
 
2909
- 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}";
2909
+ 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}";
2910
2910
  styleInject(css_248z$k);
2911
2911
 
2912
- 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),
2912
+ 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),
2913
2913
  React__default.createElement(Text, { tiny: !props.big, bold: true }, props.children),
2914
- props.onRemove && (React__default.createElement(Button, { padding: false, color: exports.Colors.TRANSPARENT, icon: React__default.createElement(CloseIcon, null), onClick: function (e) {
2914
+ props.onRemove && (React__default.createElement(Button, { padding: false, color: exports.Colors.TRANSPARENT, icon: React__default.createElement(CloseIcon, null), disabled: props.disabled, onClick: function (e) {
2915
2915
  cancelEvent(e);
2916
2916
  if (typeof props.onRemove === "function") {
2917
2917
  props.onRemove();
@@ -3881,7 +3881,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
3881
3881
  });
3882
3882
  SelectBox.displayName = "SelectBox";
3883
3883
 
3884
- 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 .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}";
3884
+ 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}";
3885
3885
  styleInject(css_248z$n);
3886
3886
 
3887
3887
  var CheckBox = React.forwardRef(function (props, ref) {
@@ -3918,11 +3918,12 @@ var CheckBox = React.forwardRef(function (props, ref) {
3918
3918
  React__default.createElement("div", { className: cn("dough-selection-container", {
3919
3919
  checked: props.value === 1 || props.value,
3920
3920
  rounded: props.rounded,
3921
+ disabled: props.disabled,
3921
3922
  }) },
3922
3923
  React__default.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
3923
3924
  React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, alignItems: exports.BoxAlign.CENTER, wrap: exports.BoxWrap.NOWRAP },
3924
3925
  React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
3925
- React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined
3926
+ React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
3926
3927
  ? 0
3927
3928
  : props.tabIndex, color: props.value ? color : exports.Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
3928
3929
  (props.label || props.children) && (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: exports.BoxAlign.CENTER },
@@ -4219,7 +4220,7 @@ var Dialog = function (props) {
4219
4220
  };
4220
4221
  Dialog.displayName = "Dialog";
4221
4222
 
4222
- 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}";
4223
+ 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}";
4223
4224
  styleInject(css_248z$t);
4224
4225
 
4225
4226
  (function (TooltipDirection) {
@@ -4227,6 +4228,7 @@ styleInject(css_248z$t);
4227
4228
  TooltipDirection["RIGHT"] = "right";
4228
4229
  TooltipDirection["DOWN"] = "down";
4229
4230
  TooltipDirection["LEFT"] = "left";
4231
+ TooltipDirection["UP_LEFT"] = "up-left";
4230
4232
  })(exports.TooltipDirection || (exports.TooltipDirection = {}));
4231
4233
  var Tooltip = function (props) {
4232
4234
  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;
@@ -4254,6 +4256,9 @@ var Tooltip = function (props) {
4254
4256
  top_1 = top_1 + pos.height / 2;
4255
4257
  left = pos.left + pos.width;
4256
4258
  }
4259
+ else if (direction === "up-left" && tooltipContent.current) {
4260
+ left = pos.left + tooltipContent.current.clientWidth / 2;
4261
+ }
4257
4262
  setPositionStyle({
4258
4263
  transform: "translate3d(" + left + "px, " + top_1 + "px, 0)",
4259
4264
  });
@@ -4267,7 +4272,9 @@ var Tooltip = function (props) {
4267
4272
  updatePositionFromRef();
4268
4273
  setShowTooltip(setTimeout(function () {
4269
4274
  var _a;
4270
- if ((direction === "up" || direction === "down") &&
4275
+ if ((direction === "up" ||
4276
+ direction === "down" ||
4277
+ direction === "up-left") &&
4271
4278
  tooltipContent &&
4272
4279
  tooltipContent.current) {
4273
4280
  var windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) -
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "9.20.0",
3
+ "version": "9.21.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",