@speakapbv/dough-component-library 10.5.0 → 10.6.0

package/dist/components/form-elements/selection-inputs/check-box.d.ts

@@ -2,6 +2,10 @@ import React, { ReactNode, Ref } from "react";
 import { Colors, Sizes, DoughBooleanInputRef, DoughDataAttributes } from "../../../utils/constants";
 import "./selection-inputs.scss";
 export declare type DoughCheckBoxValue = true | false | 0 | 1 | -1 | undefined;
+export declare enum CheckBoxAlignment {
+    CENTRAL = "central",
+    TOP = "top"
+}
 interface CommonCheckBoxProps {
     ref?: Ref<DoughBooleanInputRef>;
     children?: ReactNode;
@@ -21,6 +25,7 @@ interface CommonCheckBoxProps {
     rounded?: boolean;
     size?: Sizes.SMALL | Sizes.NORMAL;
     value?: DoughCheckBoxValue;
+    alignment?: CheckBoxAlignment;
 }
 interface DisabledCheckBoxProps {
     disabled: true;
@@ -34,5 +39,5 @@ interface ActiveCheckBoxProps {
     onChange(value: DoughCheckBoxValue): void;
 }
 export declare type CheckBoxProps = CommonCheckBoxProps & (DisabledCheckBoxProps | ReadonlyCheckBoxProps | ActiveCheckBoxProps);
-export declare const CheckBox: React.ForwardRefExoticComponent<Pick<CheckBoxProps, "children" | "width" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "color" | "checkOnly" | "icon" | "disabled" | "readOnly" | "label" | "onChange" | "rounded" | "size" | "value"> & React.RefAttributes<DoughBooleanInputRef>>;
+export declare const CheckBox: React.ForwardRefExoticComponent<Pick<CheckBoxProps, "children" | "width" | "className" | "inputClassName" | "dataAttributes" | "tabIndex" | "name" | "color" | "checkOnly" | "icon" | "disabled" | "readOnly" | "label" | "onChange" | "rounded" | "size" | "value" | "alignment"> & React.RefAttributes<DoughBooleanInputRef>>;
 export {};

package/dist/components/form-elements/selection-inputs/radio-option.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from "react";
+import { CheckBoxAlignment } from "./check-box";
 import { Colors, Sizes, DoughDataAttributes } from "../../../utils/constants";
 export interface RadioOptionProps {
     className?: string;
     children?: ReactNode;
+    alignment?: CheckBoxAlignment;
     inputClassName?: string;
     dataAttributes?: DoughDataAttributes;
     color?: Colors;

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { NumericInput } from "./components/form-elements/text-inputs/numeric-inp
 export { TextArea } from "./components/form-elements/text-inputs/text-area";
 export { SelectBox, DoughSelectBoxData, } from "./components/form-elements/select-box/select-box";
 export { TimePicker, DoughTimeObject, } from "./components/form-elements/time-picker/time-picker";
-export { CheckBox, DoughCheckBoxValue, } from "./components/form-elements/selection-inputs/check-box";
+export { CheckBox, DoughCheckBoxValue, CheckBoxAlignment, } from "./components/form-elements/selection-inputs/check-box";
 export { Switch } from "./components/form-elements/switch/switch";
 export { RadioGroup, DoughRadioGroupData, } from "./components/form-elements/selection-inputs/radio-group";
 export { RadioOption } from "./components/form-elements/selection-inputs/radio-option";

package/dist/index.es.js

@@ -3999,9 +3999,14 @@ var SelectBox = forwardRef(function (props, ref) {
 });
 SelectBox.displayName = "SelectBox";
 
-var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
+var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-selection-box-container {\n  align-items: center;\n}\n.dough-selection-box-container.topAlignment {\n  align-items: flex-start;\n}\n.dough-selection-box-container.topAlignment .dough-selection-left-box {\n  margin-top: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
 styleInject(css_248z$n);
 
+var CheckBoxAlignment;
+(function (CheckBoxAlignment) {
+    CheckBoxAlignment["CENTRAL"] = "central";
+    CheckBoxAlignment["TOP"] = "top";
+})(CheckBoxAlignment || (CheckBoxAlignment = {}));
 var CheckBox = forwardRef(function (props, ref) {
     var _a = props.color, color = _a === void 0 ? Colors.HEADER : _a, _b = props.size, size = _b === void 0 ? Sizes.NORMAL : _b;
     var hiddenInputRef = useRef(null);
@@ -4039,7 +4044,9 @@ var CheckBox = forwardRef(function (props, ref) {
                 disabled: props.disabled,
             }) },
             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.FLEX, className: cn("dough-selection-box-container", {
+                    topAlignment: props.alignment === CheckBoxAlignment.TOP,
+                }), 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, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
                             ? 0
@@ -4093,7 +4100,7 @@ var RadioOption = function (props) { return (React.createElement(CheckBox, { cla
         if (val && props.onSelected) {
             props.onSelected(props.value);
         }
-    }, rounded: true, size: props.size, value: props.selected }, !props.label && React.createElement(React.Fragment, null, props.children))); };
+    }, rounded: true, size: props.size, value: props.selected, alignment: props.alignment }, !props.label && React.createElement(React.Fragment, null, props.children))); };
 RadioOption.displayName = "RadioOption";
 
 var RadioGroup = function (props) {
@@ -5732,4 +5739,4 @@ GridItem.displayName = "GridItem";
 
 injectRobotoFont();
 
-export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
+export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, CheckBoxAlignment, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };

package/dist/index.js

@@ -3983,9 +3983,13 @@ var SelectBox = React.forwardRef(function (props, ref) {
 });
 SelectBox.displayName = "SelectBox";
 
-var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
+var css_248z$n = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.dough-fe-wrapper.dough-checkbox-fe-wrapper + .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 8px;\n}\n\n.dough-selection-container {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n  box-sizing: border-box;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-selection-container * {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\nhtml.dough-IE11 .dough-selection-container {\n  flex-basis: 32px;\n}\n.dough-selection-container .dough-fe-label {\n  font-size: 0.875rem;\n  width: 100%;\n}\n.dough-selection-container .dough-selection-button {\n  width: 24px;\n  min-width: 24px;\n  max-width: 24px;\n  height: 24px;\n  min-height: 24px;\n  max-height: 24px;\n}\n.dough-selection-container .dough-selection-button.dough-checkbox-size-small {\n  width: 16px;\n  min-width: 16px;\n  max-width: 16px;\n  height: 16px;\n  min-height: 16px;\n  max-height: 16px;\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n  min-width: 100% !important;\n  max-width: 100% !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 100% !important;\n  max-height: 100% !important;\n  overflow: hidden;\n}\n.dough-selection-container .dough-selection-button > .dough-button:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n  border: 2px solid rgb(210, 210, 210);\n  border: 2px solid var(--dough-color-input-border);\n  border-radius: 6px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: all 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button:after {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-selection-container .dough-selection-button > .dough-button {\n  padding: 0;\n  margin: 0;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon {\n  width: 24px;\n  height: 24px;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.2);\n  width: 16px;\n  height: 16px;\n}\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody:not(.no-transition) .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\nbody.no-transition .dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(255, 255, 255);\n  fill: var(--dough-color-header-alternate);\n}\n.dough-selection-container .dough-selection-button:focus > .dough-button:after {\n  border-color: rgb(68, 132, 199);\n  border-color: var(--dough-color-primary);\n}\n.dough-selection-container .dough-selection-button > .dough-button {\n  box-shadow: none !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper {\n  background-color: transparent !important;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n  display: none;\n}\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon path,\n.dough-selection-container:not(.checked) .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa path {\n  fill: rgb(110, 111, 117);\n  fill: var(--dough-color-transparent-alternate);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button:after {\n  border-color: rgba(255, 255, 255, 0);\n  border-color: var(--dough-color-transparent);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button > .dough-button-icon > .svg-inline--fa {\n  opacity: 1;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .dough-inline-svg-icon,\n.dough-selection-container.checked .dough-selection-button > .dough-button.dough-button-size-small > .dough-button-icon > .svg-inline--fa {\n  transform: translate3d(0, 0, 0) perspective(0px) scale(0.6);\n}\n.dough-selection-container.rounded .dough-selection-button > .dough-button:after {\n  border-radius: 100%;\n}\n.dough-selection-container.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 6px;\n}\n.dough-selection-container.rounded.disabled .dough-selection-button {\n  background-color: rgb(230, 230, 230);\n  border-radius: 100%;\n}\n.dough-selection-container.checked.disabled .dough-selection-button {\n  opacity: 0.5;\n}\n.dough-selection-container .dough-selection-left-box {\n  cursor: pointer;\n  padding: 0;\n}\n.dough-selection-container .dough-selection-right-box {\n  cursor: pointer;\n}\n.dough-selection-container .dough-selection-right-box:not(:empty) {\n  padding-left: 8px;\n}\n\n.dough-selection-box-container {\n  align-items: center;\n}\n.dough-selection-box-container.topAlignment {\n  align-items: flex-start;\n}\n.dough-selection-box-container.topAlignment .dough-selection-left-box {\n  margin-top: 8px;\n}\n\n.dough-fe-radio-group .dough-fe-group-label {\n  font-size: 0.875rem;\n  font-weight: 700;\n  color: rgb(110, 111, 117);\n  color: var(--dough-color-text-default);\n}\n.dough-fe-radio-group .dough-fe-wrapper.dough-checkbox-fe-wrapper {\n  margin-top: 4px !important;\n}";
 styleInject(css_248z$n);
 
+(function (CheckBoxAlignment) {
+    CheckBoxAlignment["CENTRAL"] = "central";
+    CheckBoxAlignment["TOP"] = "top";
+})(exports.CheckBoxAlignment || (exports.CheckBoxAlignment = {}));
 var CheckBox = React.forwardRef(function (props, ref) {
     var _a = props.color, color = _a === void 0 ? exports.Colors.HEADER : _a, _b = props.size, size = _b === void 0 ? exports.Sizes.NORMAL : _b;
     var hiddenInputRef = React.useRef(null);
@@ -4023,7 +4027,9 @@ var CheckBox = React.forwardRef(function (props, ref) {
                 disabled: props.disabled,
             }) },
             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.FLEX, className: cn("dough-selection-box-container", {
+                    topAlignment: props.alignment === exports.CheckBoxAlignment.TOP,
+                }), 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, props.disabled && "dough-button-disabled"), tabIndex: props.tabIndex === undefined
                             ? 0
@@ -4077,7 +4083,7 @@ var RadioOption = function (props) { return (React__default.createElement(CheckB
         if (val && props.onSelected) {
             props.onSelected(props.value);
         }
-    }, rounded: true, size: props.size, value: props.selected }, !props.label && React__default.createElement(React__default.Fragment, null, props.children))); };
+    }, rounded: true, size: props.size, value: props.selected, alignment: props.alignment }, !props.label && React__default.createElement(React__default.Fragment, null, props.children))); };
 RadioOption.displayName = "RadioOption";
 
 var RadioGroup = function (props) {

package/dist/src/components/form-elements/selection-inputs/check-box.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
+export declare const WithLabel: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;
+export declare const WithTopLabel: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<import("./check-box").CheckBoxProps, "label" | "className" | "children" | "dataAttributes" | "size" | "width" | "color" | "rounded" | "disabled" | "tabIndex" | "name" | "icon" | "inputClassName" | "checkOnly" | "readOnly" | "onChange" | "value" | "alignment"> & React.RefAttributes<import("../../..").DoughBooleanInputRef>>;

package/package.json

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