@speakapbv/dough-component-library 9.20.0 → 9.20.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.
- package/dist/index.es.js +4 -3
- package/dist/index.js +4 -3
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -3897,7 +3897,7 @@ var SelectBox = forwardRef(function (props, ref) {
|
|
|
3897
3897
|
});
|
|
3898
3898
|
SelectBox.displayName = "SelectBox";
|
|
3899
3899
|
|
|
3900
|
-
var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 0;\n margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 8px;\n}\n\n.dough-selection-container {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n box-sizing: border-box;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n font-size: 0.875rem;\n width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n width: 24px;\n min-width: 24px;\n max-width: 24px;\n height: 24px;\n min-height: 24px;\n max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n width: 16px;\n min-width: 16px;\n max-width: 16px;\n height: 16px;\n min-height: 16px;\n max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n min-width: 100% !important;\n max-width: 100% !important;\n width: 100% !important;\n height: 100% !important;\n min-height: 100% !important;\n max-height: 100% !important;\n overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border: 2px solid rgb(210, 210, 210);\n border: 2px solid var(--dough-color-input-border);\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n width: 24px;\n height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.2);\n width: 16px;\n height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(110, 111, 117);\n fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n cursor: pointer;\n padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n font-size: 0.875rem;\n font-weight: 700;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 4px !important;\n}";
|
|
3900
|
+
var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 0;\n margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 8px;\n}\n\n.dough-selection-container {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n box-sizing: border-box;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n font-size: 0.875rem;\n width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n width: 24px;\n min-width: 24px;\n max-width: 24px;\n height: 24px;\n min-height: 24px;\n max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n width: 16px;\n min-width: 16px;\n max-width: 16px;\n height: 16px;\n min-height: 16px;\n max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n min-width: 100% !important;\n max-width: 100% !important;\n width: 100% !important;\n height: 100% !important;\n min-height: 100% !important;\n max-height: 100% !important;\n overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border: 2px solid rgb(210, 210, 210);\n border: 2px solid var(--dough-color-input-border);\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n width: 24px;\n height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.2);\n width: 16px;\n height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(110, 111, 117);\n fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n background-color: rgb(230, 230, 230);\n border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n background-color: rgb(230, 230, 230);\n border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n cursor: pointer;\n padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n font-size: 0.875rem;\n font-weight: 700;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 4px !important;\n}";
|
|
3901
3901
|
styleInject(css_248z$n);
|
|
3902
3902
|
|
|
3903
3903
|
var CheckBox = forwardRef(function (props, ref) {
|
|
@@ -3934,13 +3934,14 @@ var CheckBox = forwardRef(function (props, ref) {
|
|
|
3934
3934
|
React.createElement("div", { className: cn("dough-selection-container", {
|
|
3935
3935
|
checked: props.value === 1 || props.value,
|
|
3936
3936
|
rounded: props.rounded,
|
|
3937
|
+
disabled: props.disabled,
|
|
3937
3938
|
}) },
|
|
3938
3939
|
React.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
|
|
3939
3940
|
React.createElement(Box, { display: BoxDisplay.FLEX, alignItems: BoxAlign.CENTER, wrap: BoxWrap.NOWRAP },
|
|
3940
3941
|
React.createElement(Box, { display: BoxDisplay.INLINE_FLEX, alignItems: BoxAlign.CENTER, className: "dough-selection-left-box", padding: Sizes.XXS },
|
|
3941
|
-
React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined
|
|
3942
|
+
React.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
|
|
3942
3943
|
? 0
|
|
3943
|
-
: props.tabIndex, color: props.value ? color : Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
|
|
3944
|
+
: props.tabIndex, color: props.value ? color : Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, disabled: props === null || props === void 0 ? void 0 : props.disabled, size: size })),
|
|
3944
3945
|
(props.label || props.children) && (React.createElement(Box, { display: BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: BoxAlign.CENTER },
|
|
3945
3946
|
React.createElement("span", { className: "dough-fe-label", onClick: handleChange }, props.children
|
|
3946
3947
|
? props.children
|
package/dist/index.js
CHANGED
|
@@ -3881,7 +3881,7 @@ var SelectBox = React.forwardRef(function (props, ref) {
|
|
|
3881
3881
|
});
|
|
3882
3882
|
SelectBox.displayName = "SelectBox";
|
|
3883
3883
|
|
|
3884
|
-
var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 0;\n margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 8px;\n}\n\n.dough-selection-container {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n box-sizing: border-box;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n font-size: 0.875rem;\n width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n width: 24px;\n min-width: 24px;\n max-width: 24px;\n height: 24px;\n min-height: 24px;\n max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n width: 16px;\n min-width: 16px;\n max-width: 16px;\n height: 16px;\n min-height: 16px;\n max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n min-width: 100% !important;\n max-width: 100% !important;\n width: 100% !important;\n height: 100% !important;\n min-height: 100% !important;\n max-height: 100% !important;\n overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border: 2px solid rgb(210, 210, 210);\n border: 2px solid var(--dough-color-input-border);\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n width: 24px;\n height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.2);\n width: 16px;\n height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(110, 111, 117);\n fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n cursor: pointer;\n padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n font-size: 0.875rem;\n font-weight: 700;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 4px !important;\n}";
|
|
3884
|
+
var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 0;\n margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 8px;\n}\n\n.dough-selection-container {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n box-sizing: border-box;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n font-size: 0.875rem;\n width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n width: 24px;\n min-width: 24px;\n max-width: 24px;\n height: 24px;\n min-height: 24px;\n max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n width: 16px;\n min-width: 16px;\n max-width: 16px;\n height: 16px;\n min-height: 16px;\n max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n min-width: 100% !important;\n max-width: 100% !important;\n width: 100% !important;\n height: 100% !important;\n min-height: 100% !important;\n max-height: 100% !important;\n overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border: 2px solid rgb(210, 210, 210);\n border: 2px solid var(--dough-color-input-border);\n border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n padding: 0;\n margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n width: 24px;\n height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.2);\n width: 16px;\n height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n fill: rgb(110, 111, 117);\n fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n background-color: rgb(230, 230, 230);\n border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n background-color: rgb(230, 230, 230);\n border-radius: 100%;\n}\n.dough-selection-container .dough-selection-left-box {\n cursor: pointer;\n padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n font-size: 0.875rem;\n font-weight: 700;\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n margin-top: 4px !important;\n}";
|
|
3885
3885
|
styleInject(css_248z$n);
|
|
3886
3886
|
|
|
3887
3887
|
var CheckBox = React.forwardRef(function (props, ref) {
|
|
@@ -3918,13 +3918,14 @@ var CheckBox = React.forwardRef(function (props, ref) {
|
|
|
3918
3918
|
React__default.createElement("div", { className: cn("dough-selection-container", {
|
|
3919
3919
|
checked: props.value === 1 || props.value,
|
|
3920
3920
|
rounded: props.rounded,
|
|
3921
|
+
disabled: props.disabled,
|
|
3921
3922
|
}) },
|
|
3922
3923
|
React__default.createElement("input", { readOnly: true, ref: hiddenInputRef, checked: props.value === 1 || props.value ? true : false, className: cn(props.inputClassName, "dough-hidden-input"), disabled: props === null || props === void 0 ? void 0 : props.disabled, type: props.checkOnly ? "radio" : "checkbox", name: props.name, value: props.value ? "on" : "off" }),
|
|
3923
3924
|
React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, alignItems: exports.BoxAlign.CENTER, wrap: exports.BoxWrap.NOWRAP },
|
|
3924
3925
|
React__default.createElement(Box, { display: exports.BoxDisplay.INLINE_FLEX, alignItems: exports.BoxAlign.CENTER, className: "dough-selection-left-box", padding: exports.Sizes.XXS },
|
|
3925
|
-
React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size), tabIndex: props.tabIndex === undefined
|
|
3926
|
+
React__default.createElement(Button, { className: cn("dough-selection-button", "dough-checkbox-size-" + size, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
|
|
3926
3927
|
? 0
|
|
3927
|
-
: props.tabIndex, color: props.value ? color : exports.Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, size: size })),
|
|
3928
|
+
: props.tabIndex, color: props.value ? color : exports.Colors.TRANSPARENT, icon: getIcon(props.value), onClick: handleChange, rounded: props.rounded, disabled: props === null || props === void 0 ? void 0 : props.disabled, size: size })),
|
|
3928
3929
|
(props.label || props.children) && (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, className: "dough-selection-right-box", flex: "1", alignItems: exports.BoxAlign.CENTER },
|
|
3929
3930
|
React__default.createElement("span", { className: "dough-fe-label", onClick: handleChange }, props.children
|
|
3930
3931
|
? props.children
|