@speakapbv/dough-component-library 10.5.0 → 10.6.1

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 (7) hide show
  1. package/dist/components/form-elements/selection-inputs/check-box.d.ts +6 -1
  2. package/dist/components/form-elements/selection-inputs/radio-option.d.ts +2 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.es.js +12 -5
  5. package/dist/index.js +10 -4
  6. package/dist/src/components/form-elements/selection-inputs/check-box.stories.d.ts +6 -0
  7. package/package.json +1 -1
package/dist/components/form-elements/selection-inputs/check-box.d.ts CHANGED
@@ -2,6 +2,10 @@ import React, { ReactNode, Ref } from "react";
2
2
  import { Colors, Sizes, DoughBooleanInputRef, DoughDataAttributes } from "../../../utils/constants";
3
3
  import "./selection-inputs.scss";
4
4
  export declare type DoughCheckBoxValue = true | false | 0 | 1 | -1 | undefined;
5
+ export declare enum CheckBoxAlignment {
6
+ CENTRAL = "central",
7
+ TOP = "top"
8
+ }
5
9
  interface CommonCheckBoxProps {
6
10
  ref?: Ref<DoughBooleanInputRef>;
7
11
  children?: ReactNode;
@@ -21,6 +25,7 @@ interface CommonCheckBoxProps {
21
25
  rounded?: boolean;
22
26
  size?: Sizes.SMALL | Sizes.NORMAL;
23
27
  value?: DoughCheckBoxValue;
28
+ alignment?: CheckBoxAlignment;
24
29
  }
25
30
  interface DisabledCheckBoxProps {
26
31
  disabled: true;
@@ -34,5 +39,5 @@ interface ActiveCheckBoxProps {
34
39
  onChange(value: DoughCheckBoxValue): void;
35
40
  }
36
41
  export declare type CheckBoxProps = CommonCheckBoxProps & (DisabledCheckBoxProps | ReadonlyCheckBoxProps | ActiveCheckBoxProps);
37
- export declare const CheckBox: React.ForwardRefExoticComponent<Pick<CheckBoxProps, "children" | "width" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "color" | "checkOnly" | "icon" | "disabled" | "readOnly" | "label" | "onChange" | "rounded" | "size" | "value"> & React.RefAttributes<DoughBooleanInputRef>>;
42
+ export declare const CheckBox: React.ForwardRefExoticComponent<Pick<CheckBoxProps, "children" | "width" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "color" | "checkOnly" | "icon" | "disabled" | "readOnly" | "label" | "onChange" | "rounded" | "size" | "value" | "alignment"> & React.RefAttributes<DoughBooleanInputRef>>;
38
43
  export {};
package/dist/components/form-elements/selection-inputs/radio-option.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { ReactNode } from "react";
2
+ import { CheckBoxAlignment } from "./check-box";
2
3
  import { Colors, Sizes, DoughDataAttributes } from "../../../utils/constants";
3
4
  export interface RadioOptionProps {
4
5
  className?: string;
5
6
  children?: ReactNode;
7
+ alignment?: CheckBoxAlignment;
6
8
  inputClassName?: string;
7
9
  dataAttributes?: DoughDataAttributes;
8
10
  color?: Colors;
package/dist/index.d.ts CHANGED
@@ -20,7 +20,7 @@ export { NumericInput } from "./components/form-elements/text-inputs/numeric-inp
20
20
  export { TextArea } from "./components/form-elements/text-inputs/text-area";
21
21
  export { SelectBox, DoughSelectBoxData, } from "./components/form-elements/select-box/select-box";
22
22
  export { TimePicker, DoughTimeObject, } from "./components/form-elements/time-picker/time-picker";
23
- export { CheckBox, DoughCheckBoxValue, } from "./components/form-elements/selection-inputs/check-box";
23
+ export { CheckBox, DoughCheckBoxValue, CheckBoxAlignment, } from "./components/form-elements/selection-inputs/check-box";
24
24
  export { Switch } from "./components/form-elements/switch/switch";
25
25
  export { RadioGroup, DoughRadioGroupData, } from "./components/form-elements/selection-inputs/radio-group";
26
26
  export { RadioOption } from "./components/form-elements/selection-inputs/radio-option";
package/dist/index.es.js CHANGED
@@ -229,7 +229,7 @@ var cn = (function () {
229
229
  return classesList.join(" ").trim();
230
230
  });
231
231
 
232
- var css_248z$1 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-button-wrapper {\n border: none;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n line-height: 0;\n cursor: pointer;\n}\n.dough-button-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-not-clickable, .dough-button-wrapper.dough-button-not-clickable * {\n pointer-events: none;\n}\nhtml.dough-IE11 .dough-button-wrapper {\n line-height: normal !important;\n overflow: visible;\n}\nhtml.dough-IE11 .dough-button-wrapper:hover > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.06 !important;\n}\nhtml.dough-IE11 .dough-button-wrapper:active > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.13 !important;\n}\n.dough-button-wrapper:focus, .dough-button-wrapper:active {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper:focus *, .dough-button-wrapper:active * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-full-width {\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button {\n min-width: 100%;\n max-width: 100%;\n margin: 0 auto;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button > .dough-button-label {\n width: 100% !important;\n text-align: center;\n}\n\n.dough-button {\n display: inline-flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n border-radius: 6px;\n position: relative;\n outline-color: rgba(0, 0, 0, 0);\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n background-color: transparent !important;\n position: relative;\n}\n.dough-button:not(.dough-button-no-padding) {\n padding: 8px;\n}\nhtml.dough-IE11 .dough-button:not(.dough-button-no-padding) > .dough-button-label {\n margin: 4px;\n}\n.dough-button.dough-button-shadow:not(.dough-color-transparent):not(.dough-button-as-link) {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n}\nbody:not(.no-transition) .dough-button {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n width: auto;\n height: auto;\n overflow: visible;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > svg {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.dough-button > .dough-button-background-wrapper > svg:not(.dough-button-background-wrapper-border-svg) {\n opacity: 0.1;\n}\n.dough-button > .dough-button-background-wrapper > svg.dough-button-background-wrapper-border-svg {\n stroke-width: 2px;\n z-index: 20;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: auto;\n transform-origin: center center;\n border-radius: 6px;\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(1);\n background-color: transparent !important;\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0);\n}\nhtml.dough-IE11 .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 105;\n width: auto;\n height: auto;\n border-radius: 6px;\n opacity: 0;\n background-color: black !important;\n animation: none !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-background {\n box-shadow: 0px 0px 0px 3px var(--dough-color-background);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-theme {\n box-shadow: 0px 0px 0px 3px var(--dough-color-theme);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-white {\n box-shadow: 0px 0px 0px 3px var(--dough-color-white);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-primary {\n box-shadow: 0px 0px 0px 3px var(--dough-color-primary);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-dark {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-dark);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-button {\n box-shadow: 0px 0px 0px 3px var(--dough-color-button);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-like {\n box-shadow: 0px 0px 0px 3px var(--dough-color-like);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-success {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-success);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-danger {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-danger);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-6 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-6);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px var(--dough-color-transparent);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1);\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: button-glow 1000ms 1 forwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter {\n position: absolute;\n right: 3px;\n bottom: 3px;\n left: 3px;\n z-index: 20;\n width: auto;\n height: 3px;\n border-radius: 3px;\n overflow: hidden;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n position: relative;\n display: block;\n content: \"\";\n width: 100%;\n height: 100%;\n opacity: 0.4;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: button-waiter 2000ms infinite backwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button.dough-button-color-picker.dough-button-with-border > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n}\n.dough-button.dough-button-color-picker > .dough-button-background-wrapper {\n transition-duration: 0s !important;\n}\n.dough-button.dough-button-size-extra-small {\n padding: 4px 12px 4px 12px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-color-picker {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-extra-small > .dough-button-icon {\n width: 20px;\n height: 20px;\n min-width: 0;\n}\n.dough-button.dough-button-size-extra-small .dough-inline-svg-icon {\n width: 12px !important;\n height: 12px !important;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) > .dough-button-icon {\n width: 12px;\n height: 12px;\n}\n.dough-button.dough-button-size-small {\n min-width: 32px;\n min-height: 32px;\n}\nhtml.dough-IE11 .dough-button.dough-button-size-small {\n height: 32px;\n}\n.dough-button.dough-button-size-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-small > .dough-button-icon {\n min-width: 16px;\n width: 16px;\n height: 16px;\n font-size: 16px;\n}\n.dough-button.dough-button-size-small .dough-inline-svg-icon {\n width: 16px !important;\n height: 16px !important;\n}\n.dough-button.dough-button-size-normal {\n min-width: 40px;\n min-height: 40px;\n}\n.dough-button.dough-button-size-normal.dough-button-rounded {\n border-radius: 20px;\n}\n.dough-button.dough-button-size-extra-large, .dough-button.dough-button-size-large {\n min-width: 48px;\n min-height: 48px;\n}\n.dough-button.dough-button-size-extra-large.dough-button-rounded, .dough-button.dough-button-size-large.dough-button-rounded {\n border-radius: 24px;\n}\n.dough-button .dough-inline-svg-icon {\n display: inline-block;\n font-size: inherit;\n width: 20px;\n height: 20px;\n overflow: visible;\n}\n.dough-button.dough-button-wait, .dough-button.dough-button-disabled, .dough-button.dough-button-disabled * {\n pointer-events: none !important;\n}\n.dough-button.dough-button-disabled {\n opacity: 0.5;\n}\n.dough-button.align-right {\n float: right;\n}\n.dough-button > .dough-button-label {\n width: initial !important;\n height: initial !important;\n color: inherit !important;\n font-size: 0.75rem;\n line-height: initial !important;\n position: relative;\n z-index: 1;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\nhtml.dough-IE11 .dough-button > .dough-button-label {\n line-height: normal !important;\n}\n.dough-button > .dough-button-label:empty {\n display: none;\n}\n.dough-button > .dough-button-icon {\n display: flex;\n flex-flow: row nowrap;\n box-sizing: border-box;\n overflow: visible;\n position: relative;\n z-index: 1;\n min-width: 20px;\n width: 20px;\n height: 20px;\n font-size: 16px;\n justify-content: center;\n align-items: center;\n}\n.dough-button > .dough-button-icon + .dough-button-label {\n margin-left: 8px !important;\n}\n.dough-button.dough-color-transparent > .dough-button-icon {\n color: var(--dough-color-icon-default);\n}\nhtml.dough-IE11 .dough-button.dough-color-transparent > .dough-button-icon {\n color: #999999;\n}\n.dough-button.dough-button-rounded {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 40px !important;\n}\n.dough-button.dough-button-flat {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 0 !important;\n}\n.dough-button:not(.dough-button-has-label) > .dough-button-label {\n display: none;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-small {\n width: 32px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-normal {\n width: 40px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-large {\n width: 48px;\n}\n.dough-button.dough-button-as-link {\n padding: 0;\n min-height: auto;\n text-decoration: underline;\n background-color: rgba(0, 0, 0, 0) !important;\n color: var(--dough-color-text-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link {\n color: rgb(110, 111, 117) !important;\n}\n.dough-button.dough-button-as-link > .dough-button-label {\n font-weight: initial;\n}\n.dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: var(--dough-color-icon-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: #999999 !important;\n}\n.dough-button.dough-button-no-padding {\n min-width: auto;\n}\n\n@keyframes button-glow {\n 0% {\n transform: translate3d(0, 0, 0) scale(0.7);\n opacity: 0;\n }\n 20% {\n opacity: 0.4;\n transform: translate3d(0, 0, 0) scale(1);\n }\n 100% {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 0;\n }\n}\n@keyframes button-waiter {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n 20% {\n transform: translate3d(0, 0, 0);\n }\n 35% {\n transform: translate3d(100%, 0, 0);\n }\n 50% {\n transform: translate3d(100%, 0, 0);\n }\n 70% {\n transform: translate3d(0, 0, 0);\n }\n 85% {\n transform: translate3d(-100%, 0, 0);\n }\n 100% {\n transform: translate3d(-100%, 0, 0);\n }\n}\n@media (hover: hover) and (pointer: fine) {\n .dough-button.dough-button-color-picker:not(.dough-button-with-border):hover > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(94%);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover), .dough-button:not(.dough-button-color-picker):active {\n box-shadow: none !important;\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(87%);\n }\n}";
232
+ var css_248z$1 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-button-wrapper {\n border: none;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n line-height: 0;\n cursor: pointer;\n}\n.dough-button-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-not-clickable, .dough-button-wrapper.dough-button-not-clickable * {\n pointer-events: none;\n}\nhtml.dough-IE11 .dough-button-wrapper {\n line-height: normal !important;\n overflow: visible;\n}\nhtml.dough-IE11 .dough-button-wrapper:hover > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.06 !important;\n}\nhtml.dough-IE11 .dough-button-wrapper:active > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.13 !important;\n}\n.dough-button-wrapper:focus, .dough-button-wrapper:active {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper:focus *, .dough-button-wrapper:active * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-full-width {\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button {\n min-width: 100%;\n max-width: 100%;\n margin: 0 auto;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button > .dough-button-label {\n width: 100% !important;\n text-align: center;\n}\n\n.dough-button {\n display: inline-flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n border-radius: 6px;\n position: relative;\n outline-color: rgba(0, 0, 0, 0);\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n background-color: transparent !important;\n position: relative;\n}\n.dough-button:not(.dough-button-no-padding) {\n padding: 8px;\n}\nhtml.dough-IE11 .dough-button:not(.dough-button-no-padding) > .dough-button-label {\n margin: 4px;\n}\n.dough-button.dough-button-shadow:not(.dough-color-transparent):not(.dough-button-as-link) {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n}\nbody:not(.no-transition) .dough-button {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n width: auto;\n height: auto;\n overflow: visible;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > svg {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.dough-button > .dough-button-background-wrapper > svg:not(.dough-button-background-wrapper-border-svg) {\n opacity: 0.1;\n}\n.dough-button > .dough-button-background-wrapper > svg.dough-button-background-wrapper-border-svg {\n stroke-width: 2px;\n z-index: 20;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: auto;\n transform-origin: center center;\n border-radius: 6px;\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(1);\n background-color: transparent !important;\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0);\n}\nhtml.dough-IE11 .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 105;\n width: auto;\n height: auto;\n border-radius: 6px;\n opacity: 0;\n background-color: black !important;\n animation: none !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-background {\n box-shadow: 0px 0px 0px 3px var(--dough-color-background);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-theme {\n box-shadow: 0px 0px 0px 3px var(--dough-color-theme);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-white {\n box-shadow: 0px 0px 0px 3px var(--dough-color-white);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-primary {\n box-shadow: 0px 0px 0px 3px var(--dough-color-primary);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-dark {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-dark);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-button {\n box-shadow: 0px 0px 0px 3px var(--dough-color-button);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-like {\n box-shadow: 0px 0px 0px 3px var(--dough-color-like);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-success {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-success);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-danger {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-danger);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-6 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-6);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px var(--dough-color-transparent);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1);\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: button-glow 1000ms 1 forwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter {\n position: absolute;\n right: 3px;\n bottom: 3px;\n left: 3px;\n z-index: 20;\n width: auto;\n height: 3px;\n border-radius: 3px;\n overflow: hidden;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n position: relative;\n display: block;\n content: \"\";\n width: 100%;\n height: 100%;\n opacity: 0.4;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: button-waiter 2000ms infinite backwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button.dough-button-color-picker.dough-button-with-border > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n}\n.dough-button.dough-button-color-picker > .dough-button-background-wrapper {\n transition-duration: 0s !important;\n}\n.dough-button.dough-button-size-extra-small {\n padding: 4px 12px 4px 12px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-color-picker {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-extra-small > .dough-button-icon {\n width: 20px;\n height: 20px;\n min-width: 0;\n}\n.dough-button.dough-button-size-extra-small .dough-inline-svg-icon {\n width: 12px !important;\n height: 12px !important;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) > .dough-button-icon {\n width: 12px;\n height: 12px;\n}\n.dough-button.dough-button-size-small {\n min-width: 32px;\n min-height: 32px;\n}\nhtml.dough-IE11 .dough-button.dough-button-size-small {\n height: 32px;\n}\n.dough-button.dough-button-size-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-small > .dough-button-icon {\n min-width: 16px;\n width: 16px;\n height: 16px;\n font-size: 16px;\n}\n.dough-button.dough-button-size-small .dough-inline-svg-icon {\n width: 16px !important;\n height: 16px !important;\n}\n.dough-button.dough-button-size-normal {\n min-width: 40px;\n min-height: 40px;\n}\n.dough-button.dough-button-size-normal.dough-button-rounded {\n border-radius: 20px;\n}\n.dough-button.dough-button-size-extra-large, .dough-button.dough-button-size-large {\n min-width: 48px;\n min-height: 48px;\n}\n.dough-button.dough-button-size-extra-large.dough-button-rounded, .dough-button.dough-button-size-large.dough-button-rounded {\n border-radius: 24px;\n}\n.dough-button .dough-inline-svg-icon {\n display: inline-block;\n font-size: inherit;\n width: 20px;\n height: 20px;\n overflow: visible;\n}\n.dough-button.dough-button-wait, .dough-button.dough-button-disabled, .dough-button.dough-button-disabled * {\n pointer-events: none !important;\n}\n.dough-button.dough-button-disabled {\n opacity: 0.5;\n}\n.dough-button.align-right {\n float: right;\n}\n.dough-button > .dough-button-label {\n width: initial !important;\n height: initial !important;\n color: inherit !important;\n font-size: 0.75rem;\n line-height: initial !important;\n position: relative;\n z-index: 1;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\nhtml.dough-IE11 .dough-button > .dough-button-label {\n line-height: normal !important;\n}\n.dough-button > .dough-button-label:empty {\n display: none;\n}\n.dough-button > .dough-button-label + .dough-button-icon {\n margin-left: 8px !important;\n}\n.dough-button > .dough-button-icon {\n display: flex;\n flex-flow: row nowrap;\n box-sizing: border-box;\n overflow: visible;\n position: relative;\n z-index: 1;\n min-width: 20px;\n width: 20px;\n height: 20px;\n font-size: 16px;\n justify-content: center;\n align-items: center;\n}\n.dough-button > .dough-button-icon + .dough-button-label {\n margin-left: 8px !important;\n}\n.dough-button.dough-color-transparent > .dough-button-icon {\n color: var(--dough-color-icon-default);\n}\nhtml.dough-IE11 .dough-button.dough-color-transparent > .dough-button-icon {\n color: #999999;\n}\n.dough-button.dough-button-rounded {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 40px !important;\n}\n.dough-button.dough-button-flat {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 0 !important;\n}\n.dough-button:not(.dough-button-has-label) > .dough-button-label {\n display: none;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-small {\n width: 32px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-normal {\n width: 40px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-large {\n width: 48px;\n}\n.dough-button.dough-button-as-link {\n padding: 0;\n min-height: auto;\n text-decoration: underline;\n background-color: rgba(0, 0, 0, 0) !important;\n color: var(--dough-color-text-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link {\n color: rgb(110, 111, 117) !important;\n}\n.dough-button.dough-button-as-link > .dough-button-label {\n font-weight: initial;\n}\n.dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: var(--dough-color-icon-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: #999999 !important;\n}\n.dough-button.dough-button-no-padding {\n min-width: auto;\n}\n\n@keyframes button-glow {\n 0% {\n transform: translate3d(0, 0, 0) scale(0.7);\n opacity: 0;\n }\n 20% {\n opacity: 0.4;\n transform: translate3d(0, 0, 0) scale(1);\n }\n 100% {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 0;\n }\n}\n@keyframes button-waiter {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n 20% {\n transform: translate3d(0, 0, 0);\n }\n 35% {\n transform: translate3d(100%, 0, 0);\n }\n 50% {\n transform: translate3d(100%, 0, 0);\n }\n 70% {\n transform: translate3d(0, 0, 0);\n }\n 85% {\n transform: translate3d(-100%, 0, 0);\n }\n 100% {\n transform: translate3d(-100%, 0, 0);\n }\n}\n@media (hover: hover) and (pointer: fine) {\n .dough-button.dough-button-color-picker:not(.dough-button-with-border):hover > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(94%);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover), .dough-button:not(.dough-button-color-picker):active {\n box-shadow: none !important;\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(87%);\n }\n}";
233
233
  styleInject(css_248z$1);
234
234
 
235
235
  var css_248z$2 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-link {\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n text-decoration: none;\n cursor: pointer;\n pointer-events: all !important;\n display: inline-block;\n line-height: normal;\n white-space: pre-line;\n word-break: break-word;\n position: relative;\n}\n.dough-link * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-link.disabled {\n pointer-events: none !important;\n}\nhtml.dough-IE11 .dough-link:hover {\n opacity: 0.83;\n}\nbody:not(.no-transition) .dough-link {\n transition: filter 350ms cubic-bezier(0.25, 1, 0, 1), transform 1500ms cubic-bezier(0.12, 1, 0, 1);\n}\nbody.no-transition .dough-link {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-link.dough-link-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-link:visited, .dough-link:link, .dough-link:active {\n text-decoration: none;\n}\n.dough-link.dough-link-disabled {\n pointer-events: none !important;\n}\n.dough-link.dough-link-color-only-on-hover:not(:hover) {\n color: inherit !important;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .dough-link:not(.dough-link-disabled):hover:not(.dough-link-no-underline) {\n text-decoration: underline;\n }\n .dough-link:not(.dough-link-disabled):not(.dough-button-wrapper):hover {\n filter: brightness(96%);\n }\n}";
@@ -3999,9 +3999,14 @@ var SelectBox = forwardRef(function (props, ref) {
3999
3999
  });
4000
4000
  SelectBox.displayName = "SelectBox";
4001
4001
 
4002
- 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}";
4002
+ 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-selection-box-container {\n align-items: center;\n}\n.dough-selection-box-container.topAlignment {\n align-items: flex-start;\n}\n.dough-selection-box-container.topAlignment .dough-selection-left-box {\n margin-top: 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}";
4003
4003
  styleInject(css_248z$n);
4004
4004
 
4005
+ var CheckBoxAlignment;
4006
+ (function (CheckBoxAlignment) {
4007
+ CheckBoxAlignment["CENTRAL"] = "central";
4008
+ CheckBoxAlignment["TOP"] = "top";
4009
+ })(CheckBoxAlignment || (CheckBoxAlignment = {}));
4005
4010
  var CheckBox = forwardRef(function (props, ref) {
4006
4011
  var _a = props.color, color = _a === void 0 ? Colors.HEADER : _a, _b = props.size, size = _b === void 0 ? Sizes.NORMAL : _b;
4007
4012
  var hiddenInputRef = useRef(null);
@@ -4039,7 +4044,9 @@ var CheckBox = forwardRef(function (props, ref) {
4039
4044
  disabled: props.disabled,
4040
4045
  }) },
4041
4046
  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" }),
4042
- React.createElement(Box, { display: BoxDisplay.FLEX, alignItems: BoxAlign.CENTER, wrap: BoxWrap.NOWRAP },
4047
+ React.createElement(Box, { display: BoxDisplay.FLEX, className: cn("dough-selection-box-container", {
4048
+ topAlignment: props.alignment === CheckBoxAlignment.TOP,
4049
+ }), wrap: BoxWrap.NOWRAP },
4043
4050
  React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
4044
4051
  React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
4045
4052
  ? 0
@@ -4093,7 +4100,7 @@ var RadioOption = function (props) { return (React.createElement(CheckBox, { cla
4093
4100
  if (val && props.onSelected) {
4094
4101
  props.onSelected(props.value);
4095
4102
  }
4096
- }, rounded: true, size: props.size, value: props.selected }, !props.label && React.createElement(React.Fragment, null, props.children))); };
4103
+ }, rounded: true, size: props.size, value: props.selected, alignment: props.alignment }, !props.label && React.createElement(React.Fragment, null, props.children))); };
4097
4104
  RadioOption.displayName = "RadioOption";
4098
4105
 
4099
4106
  var RadioGroup = function (props) {
@@ -5732,4 +5739,4 @@ GridItem.displayName = "GridItem";
5732
5739
 
5733
5740
  injectRobotoFont();
5734
5741
 
5735
- export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
5742
+ export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, CheckBoxAlignment, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
package/dist/index.js CHANGED
@@ -224,7 +224,7 @@ var cn = (function () {
224
224
  return classesList.join(" ").trim();
225
225
  });
226
226
 
227
- var css_248z$1 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-button-wrapper {\n border: none;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n line-height: 0;\n cursor: pointer;\n}\n.dough-button-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-not-clickable, .dough-button-wrapper.dough-button-not-clickable * {\n pointer-events: none;\n}\nhtml.dough-IE11 .dough-button-wrapper {\n line-height: normal !important;\n overflow: visible;\n}\nhtml.dough-IE11 .dough-button-wrapper:hover > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.06 !important;\n}\nhtml.dough-IE11 .dough-button-wrapper:active > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.13 !important;\n}\n.dough-button-wrapper:focus, .dough-button-wrapper:active {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper:focus *, .dough-button-wrapper:active * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-full-width {\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button {\n min-width: 100%;\n max-width: 100%;\n margin: 0 auto;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button > .dough-button-label {\n width: 100% !important;\n text-align: center;\n}\n\n.dough-button {\n display: inline-flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n border-radius: 6px;\n position: relative;\n outline-color: rgba(0, 0, 0, 0);\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n background-color: transparent !important;\n position: relative;\n}\n.dough-button:not(.dough-button-no-padding) {\n padding: 8px;\n}\nhtml.dough-IE11 .dough-button:not(.dough-button-no-padding) > .dough-button-label {\n margin: 4px;\n}\n.dough-button.dough-button-shadow:not(.dough-color-transparent):not(.dough-button-as-link) {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n}\nbody:not(.no-transition) .dough-button {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n width: auto;\n height: auto;\n overflow: visible;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > svg {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.dough-button > .dough-button-background-wrapper > svg:not(.dough-button-background-wrapper-border-svg) {\n opacity: 0.1;\n}\n.dough-button > .dough-button-background-wrapper > svg.dough-button-background-wrapper-border-svg {\n stroke-width: 2px;\n z-index: 20;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: auto;\n transform-origin: center center;\n border-radius: 6px;\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(1);\n background-color: transparent !important;\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0);\n}\nhtml.dough-IE11 .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 105;\n width: auto;\n height: auto;\n border-radius: 6px;\n opacity: 0;\n background-color: black !important;\n animation: none !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-background {\n box-shadow: 0px 0px 0px 3px var(--dough-color-background);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-theme {\n box-shadow: 0px 0px 0px 3px var(--dough-color-theme);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-white {\n box-shadow: 0px 0px 0px 3px var(--dough-color-white);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-primary {\n box-shadow: 0px 0px 0px 3px var(--dough-color-primary);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-dark {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-dark);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-button {\n box-shadow: 0px 0px 0px 3px var(--dough-color-button);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-like {\n box-shadow: 0px 0px 0px 3px var(--dough-color-like);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-success {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-success);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-danger {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-danger);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-6 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-6);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px var(--dough-color-transparent);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1);\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: button-glow 1000ms 1 forwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter {\n position: absolute;\n right: 3px;\n bottom: 3px;\n left: 3px;\n z-index: 20;\n width: auto;\n height: 3px;\n border-radius: 3px;\n overflow: hidden;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n position: relative;\n display: block;\n content: \"\";\n width: 100%;\n height: 100%;\n opacity: 0.4;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: button-waiter 2000ms infinite backwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button.dough-button-color-picker.dough-button-with-border > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n}\n.dough-button.dough-button-color-picker > .dough-button-background-wrapper {\n transition-duration: 0s !important;\n}\n.dough-button.dough-button-size-extra-small {\n padding: 4px 12px 4px 12px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-color-picker {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-extra-small > .dough-button-icon {\n width: 20px;\n height: 20px;\n min-width: 0;\n}\n.dough-button.dough-button-size-extra-small .dough-inline-svg-icon {\n width: 12px !important;\n height: 12px !important;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) > .dough-button-icon {\n width: 12px;\n height: 12px;\n}\n.dough-button.dough-button-size-small {\n min-width: 32px;\n min-height: 32px;\n}\nhtml.dough-IE11 .dough-button.dough-button-size-small {\n height: 32px;\n}\n.dough-button.dough-button-size-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-small > .dough-button-icon {\n min-width: 16px;\n width: 16px;\n height: 16px;\n font-size: 16px;\n}\n.dough-button.dough-button-size-small .dough-inline-svg-icon {\n width: 16px !important;\n height: 16px !important;\n}\n.dough-button.dough-button-size-normal {\n min-width: 40px;\n min-height: 40px;\n}\n.dough-button.dough-button-size-normal.dough-button-rounded {\n border-radius: 20px;\n}\n.dough-button.dough-button-size-extra-large, .dough-button.dough-button-size-large {\n min-width: 48px;\n min-height: 48px;\n}\n.dough-button.dough-button-size-extra-large.dough-button-rounded, .dough-button.dough-button-size-large.dough-button-rounded {\n border-radius: 24px;\n}\n.dough-button .dough-inline-svg-icon {\n display: inline-block;\n font-size: inherit;\n width: 20px;\n height: 20px;\n overflow: visible;\n}\n.dough-button.dough-button-wait, .dough-button.dough-button-disabled, .dough-button.dough-button-disabled * {\n pointer-events: none !important;\n}\n.dough-button.dough-button-disabled {\n opacity: 0.5;\n}\n.dough-button.align-right {\n float: right;\n}\n.dough-button > .dough-button-label {\n width: initial !important;\n height: initial !important;\n color: inherit !important;\n font-size: 0.75rem;\n line-height: initial !important;\n position: relative;\n z-index: 1;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\nhtml.dough-IE11 .dough-button > .dough-button-label {\n line-height: normal !important;\n}\n.dough-button > .dough-button-label:empty {\n display: none;\n}\n.dough-button > .dough-button-icon {\n display: flex;\n flex-flow: row nowrap;\n box-sizing: border-box;\n overflow: visible;\n position: relative;\n z-index: 1;\n min-width: 20px;\n width: 20px;\n height: 20px;\n font-size: 16px;\n justify-content: center;\n align-items: center;\n}\n.dough-button > .dough-button-icon + .dough-button-label {\n margin-left: 8px !important;\n}\n.dough-button.dough-color-transparent > .dough-button-icon {\n color: var(--dough-color-icon-default);\n}\nhtml.dough-IE11 .dough-button.dough-color-transparent > .dough-button-icon {\n color: #999999;\n}\n.dough-button.dough-button-rounded {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 40px !important;\n}\n.dough-button.dough-button-flat {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 0 !important;\n}\n.dough-button:not(.dough-button-has-label) > .dough-button-label {\n display: none;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-small {\n width: 32px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-normal {\n width: 40px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-large {\n width: 48px;\n}\n.dough-button.dough-button-as-link {\n padding: 0;\n min-height: auto;\n text-decoration: underline;\n background-color: rgba(0, 0, 0, 0) !important;\n color: var(--dough-color-text-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link {\n color: rgb(110, 111, 117) !important;\n}\n.dough-button.dough-button-as-link > .dough-button-label {\n font-weight: initial;\n}\n.dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: var(--dough-color-icon-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: #999999 !important;\n}\n.dough-button.dough-button-no-padding {\n min-width: auto;\n}\n\n@keyframes button-glow {\n 0% {\n transform: translate3d(0, 0, 0) scale(0.7);\n opacity: 0;\n }\n 20% {\n opacity: 0.4;\n transform: translate3d(0, 0, 0) scale(1);\n }\n 100% {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 0;\n }\n}\n@keyframes button-waiter {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n 20% {\n transform: translate3d(0, 0, 0);\n }\n 35% {\n transform: translate3d(100%, 0, 0);\n }\n 50% {\n transform: translate3d(100%, 0, 0);\n }\n 70% {\n transform: translate3d(0, 0, 0);\n }\n 85% {\n transform: translate3d(-100%, 0, 0);\n }\n 100% {\n transform: translate3d(-100%, 0, 0);\n }\n}\n@media (hover: hover) and (pointer: fine) {\n .dough-button.dough-button-color-picker:not(.dough-button-with-border):hover > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(94%);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover), .dough-button:not(.dough-button-color-picker):active {\n box-shadow: none !important;\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(87%);\n }\n}";
227
+ var css_248z$1 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-button-wrapper {\n border: none;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font-family: inherit;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n line-height: 0;\n cursor: pointer;\n}\n.dough-button-wrapper * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-not-clickable, .dough-button-wrapper.dough-button-not-clickable * {\n pointer-events: none;\n}\nhtml.dough-IE11 .dough-button-wrapper {\n line-height: normal !important;\n overflow: visible;\n}\nhtml.dough-IE11 .dough-button-wrapper:hover > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.06 !important;\n}\nhtml.dough-IE11 .dough-button-wrapper:active > .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n opacity: 0.13 !important;\n}\n.dough-button-wrapper:focus, .dough-button-wrapper:active {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper:focus *, .dough-button-wrapper:active * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-button-wrapper.dough-button-full-width {\n width: 100%;\n min-width: 100%;\n max-width: 100%;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button {\n min-width: 100%;\n max-width: 100%;\n margin: 0 auto;\n}\n.dough-button-wrapper.dough-button-full-width > .dough-button > .dough-button-label {\n width: 100% !important;\n text-align: center;\n}\n\n.dough-button {\n display: inline-flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n border-radius: 6px;\n position: relative;\n outline-color: rgba(0, 0, 0, 0);\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n background-color: transparent !important;\n position: relative;\n}\n.dough-button:not(.dough-button-no-padding) {\n padding: 8px;\n}\nhtml.dough-IE11 .dough-button:not(.dough-button-no-padding) > .dough-button-label {\n margin: 4px;\n}\n.dough-button.dough-button-shadow:not(.dough-color-transparent):not(.dough-button-as-link) {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);\n}\nbody:not(.no-transition) .dough-button {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n width: auto;\n height: auto;\n overflow: visible;\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > svg {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.dough-button > .dough-button-background-wrapper > svg:not(.dough-button-background-wrapper-border-svg) {\n opacity: 0.1;\n}\n.dough-button > .dough-button-background-wrapper > svg.dough-button-background-wrapper-border-svg {\n stroke-width: 2px;\n z-index: 20;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: auto;\n transform-origin: center center;\n border-radius: 6px;\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(1);\n background-color: transparent !important;\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0);\n}\nhtml.dough-IE11 .dough-button > .dough-button-background-wrapper > .dough-button-background-glow {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 105;\n width: auto;\n height: auto;\n border-radius: 6px;\n opacity: 0;\n background-color: black !important;\n animation: none !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-background {\n box-shadow: 0px 0px 0px 3px var(--dough-color-background);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-theme {\n box-shadow: 0px 0px 0px 3px var(--dough-color-theme);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-white {\n box-shadow: 0px 0px 0px 3px var(--dough-color-white);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-primary {\n box-shadow: 0px 0px 0px 3px var(--dough-color-primary);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-header-dark {\n box-shadow: 0px 0px 0px 3px var(--dough-color-header-dark);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-button {\n box-shadow: 0px 0px 0px 3px var(--dough-color-button);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-like {\n box-shadow: 0px 0px 0px 3px var(--dough-color-like);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-success {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-success);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning-light {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning-light);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-warning {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-warning);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-status-danger {\n box-shadow: 0px 0px 0px 3px var(--dough-color-status-danger);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-selector-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-selector-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-1 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-1);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-2 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-2);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-3 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-3);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-4 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-4);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-5 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-5);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-gray-6 {\n box-shadow: 0px 0px 0px 3px var(--dough-color-gray-6);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px var(--dough-color-transparent);\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-color-transparent {\n box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.1);\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: button-glow 1000ms 1 forwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-background-glow.dough-glow-background {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter {\n position: absolute;\n right: 3px;\n bottom: 3px;\n left: 3px;\n z-index: 20;\n width: auto;\n height: 3px;\n border-radius: 3px;\n overflow: hidden;\n}\n.dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n position: relative;\n display: block;\n content: \"\";\n width: 100%;\n height: 100%;\n opacity: 0.4;\n}\nbody:not(.no-transition) .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: button-waiter 2000ms infinite backwards;\n}\nbody.no-transition .dough-button > .dough-button-background-wrapper > .dough-button-waiter > svg {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n.dough-button.dough-button-color-picker.dough-button-with-border > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n}\n.dough-button.dough-button-color-picker > .dough-button-background-wrapper {\n transition-duration: 0s !important;\n}\n.dough-button.dough-button-size-extra-small {\n padding: 4px 12px 4px 12px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-color-picker {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-extra-small > .dough-button-icon {\n width: 20px;\n height: 20px;\n min-width: 0;\n}\n.dough-button.dough-button-size-extra-small .dough-inline-svg-icon {\n width: 12px !important;\n height: 12px !important;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) {\n padding: 4px;\n}\n.dough-button.dough-button-size-extra-small:not(.dough-button-has-label) > .dough-button-icon {\n width: 12px;\n height: 12px;\n}\n.dough-button.dough-button-size-small {\n min-width: 32px;\n min-height: 32px;\n}\nhtml.dough-IE11 .dough-button.dough-button-size-small {\n height: 32px;\n}\n.dough-button.dough-button-size-small.dough-button-rounded {\n border-radius: 16px;\n}\n.dough-button.dough-button-size-small > .dough-button-icon {\n min-width: 16px;\n width: 16px;\n height: 16px;\n font-size: 16px;\n}\n.dough-button.dough-button-size-small .dough-inline-svg-icon {\n width: 16px !important;\n height: 16px !important;\n}\n.dough-button.dough-button-size-normal {\n min-width: 40px;\n min-height: 40px;\n}\n.dough-button.dough-button-size-normal.dough-button-rounded {\n border-radius: 20px;\n}\n.dough-button.dough-button-size-extra-large, .dough-button.dough-button-size-large {\n min-width: 48px;\n min-height: 48px;\n}\n.dough-button.dough-button-size-extra-large.dough-button-rounded, .dough-button.dough-button-size-large.dough-button-rounded {\n border-radius: 24px;\n}\n.dough-button .dough-inline-svg-icon {\n display: inline-block;\n font-size: inherit;\n width: 20px;\n height: 20px;\n overflow: visible;\n}\n.dough-button.dough-button-wait, .dough-button.dough-button-disabled, .dough-button.dough-button-disabled * {\n pointer-events: none !important;\n}\n.dough-button.dough-button-disabled {\n opacity: 0.5;\n}\n.dough-button.align-right {\n float: right;\n}\n.dough-button > .dough-button-label {\n width: initial !important;\n height: initial !important;\n color: inherit !important;\n font-size: 0.75rem;\n line-height: initial !important;\n position: relative;\n z-index: 1;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\nhtml.dough-IE11 .dough-button > .dough-button-label {\n line-height: normal !important;\n}\n.dough-button > .dough-button-label:empty {\n display: none;\n}\n.dough-button > .dough-button-label + .dough-button-icon {\n margin-left: 8px !important;\n}\n.dough-button > .dough-button-icon {\n display: flex;\n flex-flow: row nowrap;\n box-sizing: border-box;\n overflow: visible;\n position: relative;\n z-index: 1;\n min-width: 20px;\n width: 20px;\n height: 20px;\n font-size: 16px;\n justify-content: center;\n align-items: center;\n}\n.dough-button > .dough-button-icon + .dough-button-label {\n margin-left: 8px !important;\n}\n.dough-button.dough-color-transparent > .dough-button-icon {\n color: var(--dough-color-icon-default);\n}\nhtml.dough-IE11 .dough-button.dough-color-transparent > .dough-button-icon {\n color: #999999;\n}\n.dough-button.dough-button-rounded {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper {\n border-radius: 40px;\n}\n.dough-button.dough-button-rounded > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 40px !important;\n}\n.dough-button.dough-button-flat {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper {\n border-radius: 0 !important;\n}\n.dough-button.dough-button-flat > .dough-button-background-wrapper > .dough-button-background-glow {\n border-radius: 0 !important;\n}\n.dough-button:not(.dough-button-has-label) > .dough-button-label {\n display: none;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-small {\n width: 32px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-normal {\n width: 40px;\n}\n.dough-button:not(.dough-button-has-label).dough-button-size-large {\n width: 48px;\n}\n.dough-button.dough-button-as-link {\n padding: 0;\n min-height: auto;\n text-decoration: underline;\n background-color: rgba(0, 0, 0, 0) !important;\n color: var(--dough-color-text-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link {\n color: rgb(110, 111, 117) !important;\n}\n.dough-button.dough-button-as-link > .dough-button-label {\n font-weight: initial;\n}\n.dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: var(--dough-color-icon-default) !important;\n}\nhtml.dough-IE11 .dough-button.dough-button-as-link .dough-inline-svg-icon > path {\n fill: #999999 !important;\n}\n.dough-button.dough-button-no-padding {\n min-width: auto;\n}\n\n@keyframes button-glow {\n 0% {\n transform: translate3d(0, 0, 0) scale(0.7);\n opacity: 0;\n }\n 20% {\n opacity: 0.4;\n transform: translate3d(0, 0, 0) scale(1);\n }\n 100% {\n transform: translate3d(0, 0, 0) scale(1);\n opacity: 0;\n }\n}\n@keyframes button-waiter {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n 20% {\n transform: translate3d(0, 0, 0);\n }\n 35% {\n transform: translate3d(100%, 0, 0);\n }\n 50% {\n transform: translate3d(100%, 0, 0);\n }\n 70% {\n transform: translate3d(0, 0, 0);\n }\n 85% {\n transform: translate3d(-100%, 0, 0);\n }\n 100% {\n transform: translate3d(-100%, 0, 0);\n }\n}\n@media (hover: hover) and (pointer: fine) {\n .dough-button.dough-button-color-picker:not(.dough-button-with-border):hover > .dough-button-background-wrapper {\n border: 1px solid #ededed;\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button:not(.dough-button-color-picker):hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(94%);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover), .dough-button:not(.dough-button-color-picker):active {\n box-shadow: none !important;\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper.dough-color-transparent {\n background-color: rgba(0, 0, 0, 0.07);\n }\n .dough-button-wrapper:focus > .dough-button:not(.dough-button-color-picker):not(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:not(.dough-button-color-picker):active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n filter: brightness(87%);\n }\n}";
228
228
  styleInject(css_248z$1);
229
229
 
230
230
  var css_248z$2 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-link {\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n text-decoration: none;\n cursor: pointer;\n pointer-events: all !important;\n display: inline-block;\n line-height: normal;\n white-space: pre-line;\n word-break: break-word;\n position: relative;\n}\n.dough-link * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-link.disabled {\n pointer-events: none !important;\n}\nhtml.dough-IE11 .dough-link:hover {\n opacity: 0.83;\n}\nbody:not(.no-transition) .dough-link {\n transition: filter 350ms cubic-bezier(0.25, 1, 0, 1), transform 1500ms cubic-bezier(0.12, 1, 0, 1);\n}\nbody.no-transition .dough-link {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-link.dough-link-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-link:visited, .dough-link:link, .dough-link:active {\n text-decoration: none;\n}\n.dough-link.dough-link-disabled {\n pointer-events: none !important;\n}\n.dough-link.dough-link-color-only-on-hover:not(:hover) {\n color: inherit !important;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .dough-link:not(.dough-link-disabled):hover:not(.dough-link-no-underline) {\n text-decoration: underline;\n }\n .dough-link:not(.dough-link-disabled):not(.dough-button-wrapper):hover {\n filter: brightness(96%);\n }\n}";
@@ -3983,9 +3983,13 @@ var SelectBox = React.forwardRef(function (props, ref) {
3983
3983
  });
3984
3984
  SelectBox.displayName = "SelectBox";
3985
3985
 
3986
- 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}";
3986
+ 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-selection-box-container {\n align-items: center;\n}\n.dough-selection-box-container.topAlignment {\n align-items: flex-start;\n}\n.dough-selection-box-container.topAlignment .dough-selection-left-box {\n margin-top: 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}";
3987
3987
  styleInject(css_248z$n);
3988
3988
 
3989
+ (function (CheckBoxAlignment) {
3990
+ CheckBoxAlignment["CENTRAL"] = "central";
3991
+ CheckBoxAlignment["TOP"] = "top";
3992
+ })(exports.CheckBoxAlignment || (exports.CheckBoxAlignment = {}));
3989
3993
  var CheckBox = React.forwardRef(function (props, ref) {
3990
3994
  var _a = props.color, color = _a === void 0 ? exports.Colors.HEADER : _a, _b = props.size, size = _b === void 0 ? exports.Sizes.NORMAL : _b;
3991
3995
  var hiddenInputRef = React.useRef(null);
@@ -4023,7 +4027,9 @@ var CheckBox = React.forwardRef(function (props, ref) {
4023
4027
  disabled: props.disabled,
4024
4028
  }) },
4025
4029
  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" }),
4026
- React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, alignItems: exports.BoxAlign.CENTER, wrap: exports.BoxWrap.NOWRAP },
4030
+ React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, className: cn("dough-selection-box-container", {
4031
+ topAlignment: props.alignment === exports.CheckBoxAlignment.TOP,
4032
+ }), wrap: exports.BoxWrap.NOWRAP },
4027
4033
  React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
4028
4034
  React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
4029
4035
  ? 0
@@ -4077,7 +4083,7 @@ var RadioOption = function (props) { return (React__default.createElement(CheckB
4077
4083
  if (val && props.onSelected) {
4078
4084
  props.onSelected(props.value);
4079
4085
  }
4080
- }, rounded: true, size: props.size, value: props.selected }, !props.label && React__default.createElement(React__default.Fragment, null, props.children))); };
4086
+ }, rounded: true, size: props.size, value: props.selected, alignment: props.alignment }, !props.label && React__default.createElement(React__default.Fragment, null, props.children))); };
4081
4087
  RadioOption.displayName = "RadioOption";
4082
4088
 
4083
4089
  var RadioGroup = function (props) {
package/dist/src/components/form-elements/selection-inputs/check-box.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
3
+ export default _default;
4
+ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
5
+ export declare const WithLabel: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
6
+ export declare const WithTopLabel: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "10.5.0",
3
+ "version": "10.6.1",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",