@speakapbv/dough-component-library 9.18.1 → 9.18.4

package/dist/index.es.js

@@ -218,7 +218,7 @@ var cn = (function () {
     return classesList.join(" ").trim();
 });
 
-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 {\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-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-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-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: 4px !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: #6e6f75 !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:hover > .dough-button-background-wrapper.dough-color-transparent {\n    background-color: rgba(0, 0, 0, 0.07);\n  }\n  .dough-button:hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(94%);\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover), .dough-button:active {\n    box-shadow: none !important;\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button: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(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(87%);\n  }\n}";
+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 {\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-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-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-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: #6e6f75 !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:hover > .dough-button-background-wrapper.dough-color-transparent {\n    background-color: rgba(0, 0, 0, 0.07);\n  }\n  .dough-button:hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(94%);\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover), .dough-button:active {\n    box-shadow: none !important;\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button: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(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(87%);\n  }\n}";
 styleInject(css_248z$1);
 
 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}";
@@ -1313,7 +1313,7 @@ var generateUID = function () {
 var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
-var TOP_MARGIN = 2;
+var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
@@ -3889,11 +3889,12 @@ var CheckBox = forwardRef(function (props, ref) {
         },
     }); });
     var handleChange = function () {
-        if (!props.checkOnly || (props.checkOnly && !props.value)) {
-            if (props.onChange) {
-                props.onChange(!props.value);
-            }
+        if (props.disabled ||
+            !props.onChange ||
+            (props.checkOnly && props.value)) {
+            return;
         }
+        props.onChange(!props.value);
     };
     var getIcon = function (val) {
         if (val !== -1) {
@@ -3911,7 +3912,7 @@ var CheckBox = forwardRef(function (props, ref) {
                 checked: props.value === 1 || props.value,
                 rounded: props.rounded,
             }) },
-            React.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
+            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" }),
             React.createElement(Box, { display: BoxDisplay.FLEX, alignItems: BoxAlign.CENTER, wrap: BoxWrap.NOWRAP },
                 React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
                     React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined

package/dist/index.js

@@ -214,7 +214,7 @@ var cn = (function () {
     return classesList.join(" ").trim();
 });
 
-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 {\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-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-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-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: 4px !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: #6e6f75 !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:hover > .dough-button-background-wrapper.dough-color-transparent {\n    background-color: rgba(0, 0, 0, 0.07);\n  }\n  .dough-button:hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(94%);\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover), .dough-button:active {\n    box-shadow: none !important;\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button: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(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(87%);\n  }\n}";
+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 {\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-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-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-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: #6e6f75 !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:hover > .dough-button-background-wrapper.dough-color-transparent {\n    background-color: rgba(0, 0, 0, 0.07);\n  }\n  .dough-button:hover > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(94%);\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover), .dough-button:active {\n    box-shadow: none !important;\n  }\n  .dough-button-wrapper:focus > .dough-button:not(:hover) > .dough-button-background-wrapper.dough-color-transparent, .dough-button: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(:hover) > .dough-button-background-wrapper:not(.dough-color-transparent), .dough-button:active > .dough-button-background-wrapper:not(.dough-color-transparent) {\n    filter: brightness(87%);\n  }\n}";
 styleInject(css_248z$1);
 
 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}";
@@ -1299,7 +1299,7 @@ var generateUID = function () {
 var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: white;\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
-var TOP_MARGIN = 2;
+var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
@@ -3874,11 +3874,12 @@ var CheckBox = React.forwardRef(function (props, ref) {
         },
     }); });
     var handleChange = function () {
-        if (!props.checkOnly || (props.checkOnly && !props.value)) {
-            if (props.onChange) {
-                props.onChange(!props.value);
-            }
+        if (props.disabled ||
+            !props.onChange ||
+            (props.checkOnly && props.value)) {
+            return;
         }
+        props.onChange(!props.value);
     };
     var getIcon = function (val) {
         if (val !== -1) {
@@ -3896,7 +3897,7 @@ var CheckBox = React.forwardRef(function (props, ref) {
                 checked: props.value === 1 || props.value,
                 rounded: props.rounded,
             }) },
-            React__default.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
+            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" }),
             React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, alignItems: exports.BoxAlign.CENTER, wrap: exports.BoxWrap.NOWRAP },
                 React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
                     React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined

package/package.json

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