@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/cjs/components/BankAccountInput.styled.cjs

@@ -1,161 +1,36 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styled = require('styled-components');
 
-const StyledWrapper = styled.div`
-  ${({ fullWidth }) => styled.css`
-    display: inline-flex;
-    align-items: center;
-    ${fullWidth && styled.css`
-      width: 100%;
-    `}
-  `}
-`;
-const StyledInputWrapper = styled.div`
-  ${({ disabled, edges, focused, fullWidth, required, theme, variant }) => styled.css`
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 500;
-    font-size: 15px;
-    line-height: 1.4375em;
-    color: #394869;
-    position: relative;
-    cursor: text;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0.75rem 0;
-    width: ${fullWidth ? "100%" : "400px"};
-
-    ${!required && !focused && styled.css`
-      border: 1px solid rgba(0, 0, 0, 0.23);
-    `}
-
-    ${required && !focused && styled.css`
-      border: 1px solid ${theme.palette.secondary.main};
-    `}
-
-    ${!required && focused && styled.css`
-      border: 1px solid ${theme.palette.primary.main};
-    `}
-
-      ${required && focused && styled.css`
-      border: 1px solid ${theme.palette.secondary.main};
-    `}
-
-    ${edges === "sharp" && styled.css`
-      border-radius: 0px;
-    `}
-
-    ${edges === "normal" && styled.css`
-      border-radius: 5px;
-    `}
-
-    ${edges === "rounded" && styled.css`
-      border-radius: 9999px;
-    `}
-
-    ${variant === "filled" && styled.css`
-      background: rgba(140, 152, 178, 0.1);
-      border-color: rgba(140, 152, 178, 0.1);
-    `}
-
-    ${disabled && styled.css`
-      background: rgba(140, 152, 178, 0.1);
-    `}
-  `}
-`;
-const StyledInput = styled.input.attrs({
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var StyledWrapper = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var fullWidth = _ref.fullWidth;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n    ", "\n  "])), fullWidth && styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 100%;\n    "]))));
+});
+var StyledInputWrapper = styled.div(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+    edges = _ref2.edges,
+    focused = _ref2.focused,
+    fullWidth = _ref2.fullWidth,
+    required = _ref2.required,
+    theme = _ref2.theme,
+    variant = _ref2.variant;
+  return styled.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 500;\n    font-size: 15px;\n    line-height: 1.4375em;\n    color: #394869;\n    position: relative;\n    cursor: text;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    padding: 0.75rem 0;\n    width: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n\n      ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), fullWidth ? "100%" : "400px", !required && !focused && styled.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border: 1px solid rgba(0, 0, 0, 0.23);\n    "]))), required && !focused && styled.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), theme.palette.secondary.main), !required && focused && styled.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), theme.palette.primary.main), required && focused && styled.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), theme.palette.secondary.main), edges === "sharp" && styled.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border-radius: 0px;\n    "]))), edges === "normal" && styled.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border-radius: 5px;\n    "]))), edges === "rounded" && styled.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border-radius: 9999px;\n    "]))), variant === "filled" && styled.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      background: rgba(140, 152, 178, 0.1);\n      border-color: rgba(140, 152, 178, 0.1);\n    "]))), disabled && styled.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      background: rgba(140, 152, 178, 0.1);\n    "]))));
+});
+var StyledInput = styled.input.attrs({
   type: "text",
   autoComplete: "off",
   inputMode: "numeric"
-})`
-  ${({ fieldType }) => styled.css`
-    height: 1.4375em;
-    -webkit-tap-highlight-color: transparent;
-    background: transparent;
-    letter-spacing: inherit;
-    color: currentColor;
-    box-sizing: content-box;
-    font: inherit;
-    border: none;
-    border-left: 1px solid rgba(0, 0, 0, 0.23);
-    padding: 0 1rem;
-    text-align: center;
-
-    ${fieldType === "bank" && styled.css`
-      width: 15%;
-    `}
-
-    ${fieldType === "branch" && styled.css`
-      width: 22%;
-    `}
-
-    ${fieldType === "account" && styled.css`
-      width: 43%;
-    `}
-
-    ${fieldType === "suffix" && styled.css`
-      width: 20%;
-    `}
-
-    &:focus,
-    &:active {
-      box-shadow: none;
-      outline: none;
-    }
-
-    &:first-child {
-      border: none;
-    }
-
-    &::-webkit-input-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &::-moz-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &:-ms-input-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &:-moz-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &:focus::-webkit-input-placeholder {
-      opacity: 0.4;
-    }
-
-    &:focus::-moz-placeholder {
-      opacity: 0.4;
-    }
-
-    &:focus:-ms-input-placeholder {
-      opacity: 0.4;
-    }
-
-    &:focus:-moz-placeholder {
-      opacity: 0.4;
-    }
-  `}
-`;
-const StyledIcon = styled.div`
-  ${({ theme }) => styled.css`
-    color: ${theme.palette.grey[300]};
-    margin-left: 5px;
-    transition: color 200ms ease;
-    svg {
-      font-size: 1.15rem;
-    }
-
-    &:hover {
-      color: ${theme.palette.grey[400]};
-    }
-  `}
-`;
+})(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+  var fieldType = _ref3.fieldType;
+  return styled.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    height: 1.4375em;\n    -webkit-tap-highlight-color: transparent;\n    background: transparent;\n    letter-spacing: inherit;\n    color: currentColor;\n    box-sizing: content-box;\n    font: inherit;\n    border: none;\n    border-left: 1px solid rgba(0, 0, 0, 0.23);\n    padding: 0 1rem;\n    text-align: center;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    &:focus,\n    &:active {\n      box-shadow: none;\n      outline: none;\n    }\n\n    &:first-child {\n      border: none;\n    }\n\n    &::-webkit-input-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &::-moz-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &:-ms-input-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &:-moz-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &:focus::-webkit-input-placeholder {\n      opacity: 0.4;\n    }\n\n    &:focus::-moz-placeholder {\n      opacity: 0.4;\n    }\n\n    &:focus:-ms-input-placeholder {\n      opacity: 0.4;\n    }\n\n    &:focus:-moz-placeholder {\n      opacity: 0.4;\n    }\n  "])), fieldType === "bank" && styled.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 15%;\n    "]))), fieldType === "branch" && styled.css(_templateObject16 || (_templateObject16 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 22%;\n    "]))), fieldType === "account" && styled.css(_templateObject17 || (_templateObject17 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 43%;\n    "]))), fieldType === "suffix" && styled.css(_templateObject18 || (_templateObject18 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 20%;\n    "]))));
+});
+var StyledIcon = styled.div(_templateObject19 || (_templateObject19 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return styled.css(_templateObject20 || (_templateObject20 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    color: ", ";\n    margin-left: 5px;\n    transition: color 200ms ease;\n    svg {\n      font-size: 1.15rem;\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  "])), theme.palette.grey[300], theme.palette.grey[400]);
+});
 
 exports.StyledIcon = StyledIcon;
 exports.StyledInput = StyledInput;

package/dist/cjs/components/Bar.cjs

@@ -8,8 +8,17 @@ require('react');
 var PropTypes = require('prop-types');
 var Bar_styled = require('./Bar.styled.cjs');
 
-function Bar({ children, color = "transparent", position = "relative" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Bar_styled.StyledBar, { color, position, children });
+function Bar(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "transparent" : _ref$color,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "relative" : _ref$position;
+  return /* @__PURE__ */jsxRuntime.jsx(Bar_styled.StyledBar, {
+    color: color,
+    position: position,
+    children: children
+  });
 }
 Bar.propTypes = {
   /**
@@ -19,26 +28,11 @@ Bar.propTypes = {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf([
-    "default",
-    "inherit",
-    "primary",
-    "primaryAlt",
-    "secondary",
-    "secondaryAlt",
-    "tertiary",
-    "transparent"
-  ]),
+  color: PropTypes.oneOf(["default", "inherit", "primary", "primaryAlt", "secondary", "secondaryAlt", "tertiary", "transparent"]),
   /**
    * The positioning type.
    */
-  position: PropTypes.oneOf([
-    "absolute",
-    "fixed",
-    "relative",
-    "static",
-    "sticky"
-  ])
+  position: PropTypes.oneOf(["absolute", "fixed", "relative", "static", "sticky"])
 };
 
 exports.default = Bar;

package/dist/cjs/components/Bar.styled.cjs

@@ -1,22 +1,16 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styled = require('styled-components');
 
-const defaultColors = ["inherit", "transparent"];
-const StyledBar = styled.div`
-  ${({ color, position, theme }) => styled.css`
-    position: ${position};
-    ${defaultColors.includes(color) && styled.css`
-      background: ${color};
-      color: inherit;
-    `}
-
-    ${!defaultColors.includes(color) && styled.css`
-      background: ${theme.palette[color].main};
-      color: ${theme.palette[color].contrastText};
-    `}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var defaultColors = ["inherit", "transparent"];
+var StyledBar = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var color = _ref.color,
+    position = _ref.position,
+    theme = _ref.theme;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: ", ";\n    ", "\n\n    ", "\n  "])), position, defaultColors.includes(color) && styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      background: ", ";\n      color: inherit;\n    "])), color), !defaultColors.includes(color) && styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n    "])), theme.palette[color].main, theme.palette[color].contrastText));
+});
 
 exports.StyledBar = StyledBar;

package/dist/cjs/components/BaseModal.cjs

@@ -3,39 +3,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var BaseModal_styled = require('./BaseModal.styled.cjs');
 var object = require('../utils/helpers/object.cjs');
 
-function BaseModal({
-  children,
-  fullScreen = false,
-  fullWidth = false,
-  escapePress = false,
-  hideBackdrop = false,
-  maxWidth = "sm",
-  onClose = () => {
-  },
-  open = false,
-  slotProps = {},
-  ...rest
-}) {
-  const defaultSlotProps = {
+var _excluded = ["children", "fullScreen", "fullWidth", "escapePress", "hideBackdrop", "maxWidth", "onClose", "open", "slotProps"];
+function BaseModal(_ref) {
+  var children = _ref.children,
+    _ref$fullScreen = _ref.fullScreen,
+    fullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$escapePress = _ref.escapePress,
+    escapePress = _ref$escapePress === void 0 ? false : _ref$escapePress,
+    _ref$hideBackdrop = _ref.hideBackdrop,
+    hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "sm" : _ref$maxWidth,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var defaultSlotProps = {
     paper: {
       elevation: "none"
     }
   };
-  const props = {
-    fullScreen,
-    fullWidth,
-    hideBackdrop,
-    maxWidth,
-    onClose,
-    open,
-    ...rest,
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    fullScreen: fullScreen,
+    fullWidth: fullWidth,
+    hideBackdrop: hideBackdrop,
+    maxWidth: maxWidth,
+    onClose: onClose,
+    open: open
+  }, rest), {}, {
     slotProps: object.objectDeepMerge(defaultSlotProps, slotProps)
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseModal_styled.default, { ...props, disableEscapeKeyDown: !escapePress, children });
+  });
+  return /* @__PURE__ */jsxRuntime.jsx(BaseModal_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+    disableEscapeKeyDown: !escapePress,
+    children: children
+  }));
 }
 
 exports.default = BaseModal;

package/dist/cjs/components/BaseModal.styled.cjs

@@ -3,18 +3,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var react = require('@emotion/react');
 var Dialog = require('@mui/material/Dialog');
 var styles = require('@mui/material/styles');
 var object = require('../utils/helpers/object.cjs');
 
-const StyledBaseModal = styles.styled(Dialog)`
-  ${({ theme }) => react.css`
-    .MuiPaper-root {
-      color: ${object.getObjectProp(theme, "vars.palette.text.body")};
-      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
-    }
-  `};
-`;
+var _templateObject, _templateObject2;
+var StyledBaseModal = styles.styled(Dialog)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    .MuiPaper-root {\n      color: ", ";\n      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);\n    }\n  "])), object.getObjectProp(theme, "vars.palette.text.body"));
+});
 
 exports.default = StyledBaseModal;

package/dist/cjs/components/BooleanInput.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -10,94 +11,114 @@ var FormControl = require('./FormControl.cjs');
 var FormFocus = require('./FormFocus.cjs');
 var BooleanInput_styled = require('./BooleanInput.styled.cjs');
 
-function BooleanInput({
-  disabled = false,
-  disableRipple = false,
-  fullWidth = false,
-  helperText = "",
-  helperTextPlacement = "below",
-  label = "",
-  required = false,
-  onChange,
-  edges = "normal",
-  value = null,
-  showError = false,
-  errorMessage = "",
-  trueLabel = "Yes",
-  falseLabel = "No",
-  parseBool = (v) => !!v,
-  name,
-  parseValue = (v) => !!v
-}) {
-  const [indeterminate, setIndeterminate] = React.useState(true);
-  const [checked, setChecked] = React.useState(true);
-  const hasError = showError && errorMessage;
-  React.useEffect(() => {
+function BooleanInput(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$disableRipple = _ref.disableRipple,
+    disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$helperTextPlacem = _ref.helperTextPlacement,
+    helperTextPlacement = _ref$helperTextPlacem === void 0 ? "below" : _ref$helperTextPlacem,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    onChange = _ref.onChange,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$trueLabel = _ref.trueLabel,
+    trueLabel = _ref$trueLabel === void 0 ? "Yes" : _ref$trueLabel,
+    _ref$falseLabel = _ref.falseLabel,
+    falseLabel = _ref$falseLabel === void 0 ? "No" : _ref$falseLabel,
+    _ref$parseBool = _ref.parseBool,
+    parseBool = _ref$parseBool === void 0 ? function (v) {
+      return !!v;
+    } : _ref$parseBool,
+    name = _ref.name,
+    _ref$parseValue = _ref.parseValue,
+    parseValue = _ref$parseValue === void 0 ? function (v) {
+      return !!v;
+    } : _ref$parseValue;
+  var _useState = React.useState(true),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    indeterminate = _useState2[0],
+    setIndeterminate = _useState2[1];
+  var _useState3 = React.useState(true),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    checked = _useState4[0],
+    setChecked = _useState4[1];
+  var hasError = showError && errorMessage;
+  React.useEffect(function () {
     if (value !== null && value !== "" && value !== void 0) {
       setIndeterminate(false);
       setChecked(parseBool(value));
     }
   }, [value, parseBool]);
-  const handleChange = (e, bool) => {
+  var handleChange = function handleChange(e, bool) {
     e.preventDefault();
     onChange(parseValue(bool));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    FormControl.default,
-    {
-      fullWidth,
-      label,
-      name,
-      helperText,
-      helperTextPlacement,
-      disabled,
-      required,
-      showError,
-      errorMessage,
-      edges,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormFocus.default, { name }),
-        /* @__PURE__ */ jsxRuntime.jsxs(BooleanInput_styled.StyledButtonGroup, { edges, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BooleanInput_styled.StyledButton,
-            {
-              variant: indeterminate || !checked ? "outlined" : "contained",
-              onClick: (e) => handleChange(e, true),
-              disableElevation: true,
-              disableRipple,
-              disableTouchRipple: disableRipple,
-              disableFocusRipple: disableRipple,
-              type: "button",
-              indeterminate: indeterminate ? "yes" : "no",
-              checked,
-              required,
-              selected: !indeterminate && checked,
-              error: hasError ? "yes" : "no",
-              children: trueLabel
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BooleanInput_styled.StyledButton,
-            {
-              variant: indeterminate || checked ? "outlined" : "contained",
-              onClick: (e) => handleChange(e, false),
-              disableElevation: true,
-              disableRipple,
-              disableTouchRipple: disableRipple,
-              disableFocusRipple: disableRipple,
-              type: "button",
-              indeterminate: indeterminate ? "yes" : "no",
-              checked,
-              required,
-              selected: !indeterminate && !checked,
-              error: hasError ? "yes" : "no",
-              children: falseLabel
-            }
-          )
-        ] })
-      ] })
-    }
-  );
+  return /* @__PURE__ */jsxRuntime.jsx(FormControl.default, {
+    fullWidth: fullWidth,
+    label: label,
+    name: name,
+    helperText: helperText,
+    helperTextPlacement: helperTextPlacement,
+    disabled: disabled,
+    required: required,
+    showError: showError,
+    errorMessage: errorMessage,
+    edges: edges,
+    children: /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(FormFocus.default, {
+        name: name
+      }), /* @__PURE__ */jsxRuntime.jsxs(BooleanInput_styled.StyledButtonGroup, {
+        edges: edges,
+        children: [/* @__PURE__ */jsxRuntime.jsx(BooleanInput_styled.StyledButton, {
+          variant: indeterminate || !checked ? "outlined" : "contained",
+          onClick: function onClick(e) {
+            return handleChange(e, true);
+          },
+          disableElevation: true,
+          disableRipple: disableRipple,
+          disableTouchRipple: disableRipple,
+          disableFocusRipple: disableRipple,
+          type: "button",
+          indeterminate: indeterminate ? "yes" : "no",
+          checked: checked,
+          required: required,
+          selected: !indeterminate && checked,
+          error: hasError ? "yes" : "no",
+          children: trueLabel
+        }), /* @__PURE__ */jsxRuntime.jsx(BooleanInput_styled.StyledButton, {
+          variant: indeterminate || checked ? "outlined" : "contained",
+          onClick: function onClick(e) {
+            return handleChange(e, false);
+          },
+          disableElevation: true,
+          disableRipple: disableRipple,
+          disableTouchRipple: disableRipple,
+          disableFocusRipple: disableRipple,
+          type: "button",
+          indeterminate: indeterminate ? "yes" : "no",
+          checked: checked,
+          required: required,
+          selected: !indeterminate && !checked,
+          error: hasError ? "yes" : "no",
+          children: falseLabel
+        })]
+      })]
+    })
+  });
 }
 BooleanInput.propTypes = {
   /**