@tenancy.nz/ui 1.0.4 → 1.0.6

package/dist/cjs/components/BankAccountInput.cjs

@@ -4,7 +4,6 @@
 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');
 var CancelIcon = require('@mui/icons-material/Cancel');
@@ -177,87 +176,81 @@ function BankAccountInput(_ref) {
       setSuffix(values.suffix);
     }
   };
-  return /* @__PURE__ */jsxRuntime.jsxs(BankAccountInput_styled.StyledWrapper, {
+  return /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledWrapper, {
+    fullWidth: fullWidth
+  }, /* @__PURE__ */React.createElement(FormControl.default, {
     fullWidth: fullWidth,
-    children: [/* @__PURE__ */jsxRuntime.jsxs(FormControl.default, {
-      fullWidth: fullWidth,
-      disabled: disabled,
-      name: name,
-      required: required,
-      label: label,
-      hideLabel: hideLabel,
-      helperText: helperText,
-      helperTextPlacement: helperTextPlacement,
-      showError: showError,
-      errorMessage: errorMessage,
-      edges: edges,
-      children: [/* @__PURE__ */jsxRuntime.jsx("input", {
-        type: "hidden",
-        name: name,
-        value: "".concat(bank, " ").concat(branch, " ").concat(account, " ").concat(suffix)
-      }), /* @__PURE__ */jsxRuntime.jsxs(BankAccountInput_styled.StyledInputWrapper, {
-        disabled: disabled,
-        edges: edges,
-        focused: focused,
-        fullWidth: fullWidth,
-        required: required && valueStr.length < 15,
-        variant: variant,
-        children: [/* @__PURE__ */jsxRuntime.jsx(BankAccountInput_styled.StyledInput, {
-          disabled: disabled,
-          id: "".concat(name, "_bank"),
-          fieldType: "bank",
-          placeholder: "Bank",
-          maxLength: "2",
-          ref: bankRef,
-          value: bank,
-          onChange: handleBankChange,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onPaste: handlePaste
-        }), /* @__PURE__ */jsxRuntime.jsx(BankAccountInput_styled.StyledInput, {
-          disabled: disabled,
-          id: "".concat(name, "_branch"),
-          fieldType: "branch",
-          placeholder: "Branch",
-          maxLength: "4",
-          ref: branchRef,
-          value: branch,
-          onChange: handleBranchChange,
-          onFocus: handleFocus,
-          onBlur: handleBlur
-        }), /* @__PURE__ */jsxRuntime.jsx(BankAccountInput_styled.StyledInput, {
-          disabled: disabled,
-          id: "".concat(name, "_account"),
-          fieldType: "account",
-          placeholder: "Account",
-          maxLength: "7",
-          ref: accountRef,
-          value: account,
-          onChange: handleAccountChange,
-          onFocus: handleFocus,
-          onBlur: handleBlur
-        }), /* @__PURE__ */jsxRuntime.jsx(BankAccountInput_styled.StyledInput, {
-          disabled: disabled,
-          id: "".concat(name, "_suffix"),
-          fieldType: "suffix",
-          placeholder: "Suffix",
-          maxLength: "3",
-          ref: suffixRef,
-          value: suffix,
-          onChange: handleSuffixChange,
-          onFocus: handleFocus,
-          onBlur: handleBlur
-        })]
-      })]
-    }), boolean.isFunction(onClear) && valueStr && /* @__PURE__ */jsxRuntime.jsx(BankAccountInput_styled.StyledIcon, {
-      children: /* @__PURE__ */jsxRuntime.jsx(IconButton.default, {
-        onClick: handleClear,
-        size: "small",
-        color: "inherit",
-        children: /* @__PURE__ */jsxRuntime.jsx(CancelIcon, {})
-      })
-    })]
-  });
+    disabled: disabled,
+    name: name,
+    required: required,
+    label: label,
+    hideLabel: hideLabel,
+    helperText: helperText,
+    helperTextPlacement: helperTextPlacement,
+    showError: showError,
+    errorMessage: errorMessage,
+    edges: edges
+  }, /* @__PURE__ */React.createElement("input", {
+    type: "hidden",
+    name: name,
+    value: "".concat(bank, " ").concat(branch, " ").concat(account, " ").concat(suffix)
+  }), /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledInputWrapper, {
+    disabled: disabled,
+    edges: edges,
+    focused: focused,
+    fullWidth: fullWidth,
+    required: required && valueStr.length < 15,
+    variant: variant
+  }, /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledInput, {
+    disabled: disabled,
+    id: "".concat(name, "_bank"),
+    fieldType: "bank",
+    placeholder: "Bank",
+    maxLength: "2",
+    ref: bankRef,
+    value: bank,
+    onChange: handleBankChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPaste: handlePaste
+  }), /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledInput, {
+    disabled: disabled,
+    id: "".concat(name, "_branch"),
+    fieldType: "branch",
+    placeholder: "Branch",
+    maxLength: "4",
+    ref: branchRef,
+    value: branch,
+    onChange: handleBranchChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }), /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledInput, {
+    disabled: disabled,
+    id: "".concat(name, "_account"),
+    fieldType: "account",
+    placeholder: "Account",
+    maxLength: "7",
+    ref: accountRef,
+    value: account,
+    onChange: handleAccountChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }), /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledInput, {
+    disabled: disabled,
+    id: "".concat(name, "_suffix"),
+    fieldType: "suffix",
+    placeholder: "Suffix",
+    maxLength: "3",
+    ref: suffixRef,
+    value: suffix,
+    onChange: handleSuffixChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }))), boolean.isFunction(onClear) && valueStr && /* @__PURE__ */React.createElement(BankAccountInput_styled.StyledIcon, null, /* @__PURE__ */React.createElement(IconButton.default, {
+    onClick: handleClear,
+    size: "small",
+    color: "inherit"
+  }, /* @__PURE__ */React.createElement(CancelIcon, null))));
 }
 BankAccountInput.propTypes = {
   /**

package/dist/cjs/components/Bar.cjs

@@ -3,8 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var PropTypes = require('prop-types');
 var Bar_styled = require('./Bar.styled.cjs');
 
@@ -14,11 +13,10 @@ function Bar(_ref) {
     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, {
+  return /* @__PURE__ */React.createElement(Bar_styled.StyledBar, {
     color: color,
-    position: position,
-    children: children
-  });
+    position: position
+  }, children);
 }
 Bar.propTypes = {
   /**

package/dist/cjs/components/BaseModal.cjs

@@ -4,7 +4,6 @@
 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');
 
@@ -43,10 +42,9 @@ function BaseModal(_ref) {
   }, rest), {}, {
     slotProps: object.objectDeepMerge(defaultSlotProps, slotProps)
   });
-  return /* @__PURE__ */jsxRuntime.jsx(BaseModal_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
-    disableEscapeKeyDown: !escapePress,
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(BaseModal_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+    disableEscapeKeyDown: !escapePress
+  }), children);
 }
 
 exports.default = BaseModal;

package/dist/cjs/components/BooleanInput.cjs

@@ -4,7 +4,6 @@
 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');
 var FormControl = require('./FormControl.cjs');
@@ -67,7 +66,7 @@ function BooleanInput(_ref) {
     e.preventDefault();
     onChange(parseValue(bool));
   };
-  return /* @__PURE__ */jsxRuntime.jsx(FormControl.default, {
+  return /* @__PURE__ */React.createElement(FormControl.default, {
     fullWidth: fullWidth,
     label: label,
     name: name,
@@ -77,48 +76,42 @@ function BooleanInput(_ref) {
     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
-        })]
-      })]
-    })
-  });
+    edges: edges
+  }, /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(FormFocus.default, {
+    name: name
+  }), /* @__PURE__ */React.createElement(BooleanInput_styled.StyledButtonGroup, {
+    edges: edges
+  }, /* @__PURE__ */React.createElement(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"
+  }, trueLabel), /* @__PURE__ */React.createElement(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"
+  }, falseLabel))));
 }
 BooleanInput.propTypes = {
   /**

package/dist/cjs/components/BorderedGrid.cjs

@@ -4,8 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var PropTypes = require('prop-types');
 var Grid = require('./Grid.cjs');
 var Grid_styled = require('./Grid.styled.cjs');
@@ -19,14 +18,13 @@ function BorderedGrid(_ref) {
     _ref$borderStyle = _ref.borderStyle,
     borderStyle = _ref$borderStyle === void 0 ? "solid" : _ref$borderStyle,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsxRuntime.jsx(Grid_styled.StyledGridBox, {
+  return /* @__PURE__ */React.createElement(Grid_styled.StyledGridBox, {
     error: error,
-    borderStyle: borderStyle,
-    children: /* @__PURE__ */jsxRuntime.jsx(Grid.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-      spacing: spacing,
-      marginFix: true
-    }))
-  });
+    borderStyle: borderStyle
+  }, /* @__PURE__ */React.createElement(Grid.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    spacing: spacing,
+    marginFix: true
+  })));
 }
 BorderedGrid.propTypes = {
   error: PropTypes.bool,

package/dist/cjs/components/Box.cjs

@@ -4,7 +4,6 @@
 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');
 var Box$2 = require('@mui/material/Box');
@@ -30,15 +29,13 @@ function Box(_ref, ref) {
     alignItems: align,
     justifyContent: justify
   });
-  return /* @__PURE__ */jsxRuntime.jsx(Box$2, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+  return /* @__PURE__ */React.createElement(Box$2, _rollupPluginBabelHelpers.objectSpread2({
     component: as,
     ref: ref,
     sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
       display: display
     }, flexProps), sx)
-  }, rest), {}, {
-    children: children
-  }));
+  }, rest), children);
 }
 Box.propTypes = {
   /**

package/dist/cjs/components/Button.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
 var CircularProgress = require('@mui/material/CircularProgress');
 var Button_styled = require('./Button.styled.cjs');
 
@@ -49,16 +48,14 @@ function Button(_ref) {
     disableFocusRipple: true,
     component: as,
     fullWidth: fill,
-    loadingIndicator: /* @__PURE__ */jsxRuntime.jsx(CircularProgress, {
+    loadingIndicator: /* @__PURE__ */React.createElement(CircularProgress, {
       size: loadingIndicatorSizes[size],
       color: "inherit"
     })
   }, others), loading === true && {
     loading: !disabled && loading
   });
-  return /* @__PURE__ */jsxRuntime.jsx(Button_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(Button_styled.default, _rollupPluginBabelHelpers.objectSpread2({}, rest), children);
 }
 
 exports.default = Button;

package/dist/cjs/components/Card.cjs

@@ -4,8 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var PropTypes = require('prop-types');
 var CardContent = require('./CardContent.cjs');
 var Media = require('./Media.cjs');
@@ -29,27 +28,19 @@ function Card(_ref) {
   var rest = _rollupPluginBabelHelpers.objectSpread2({
     elevate: elevate
   }, others);
-  return /* @__PURE__ */jsxRuntime.jsxs(Paper.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+  return /* @__PURE__ */React.createElement(Paper.default, _rollupPluginBabelHelpers.objectSpread2({
     elevate: false,
     outlined: true
-  }, rest), {}, {
-    children: [onClick &&
-    // <ActionArea onClick={onClick}>
-    /* @__PURE__ */
-    jsxRuntime.jsxs(Card_styled.StyledCardMedia, {
-      children: [imgContent, !imgContent && /* @__PURE__ */jsxRuntime.jsx(Media.default, {
-        src: imgSrc,
-        title: title
-      })]
-    }), !onClick && /* @__PURE__ */jsxRuntime.jsx(Card_styled.StyledCardMedia, {
-      children: /* @__PURE__ */jsxRuntime.jsx(Media.default, {
-        src: imgSrc,
-        title: title
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(CardContent.default, {
-      children: children
-    })]
-  }));
+  }, rest), onClick &&
+  // <ActionArea onClick={onClick}>
+  /* @__PURE__ */
+  React.createElement(Card_styled.StyledCardMedia, null, imgContent, !imgContent && /* @__PURE__ */React.createElement(Media.default, {
+    src: imgSrc,
+    title: title
+  })), !onClick && /* @__PURE__ */React.createElement(Card_styled.StyledCardMedia, null, /* @__PURE__ */React.createElement(Media.default, {
+    src: imgSrc,
+    title: title
+  })), /* @__PURE__ */React.createElement(CardContent.default, null, children));
 }
 Card.propTypes = {
   /**

package/dist/cjs/components/CardContent.cjs

@@ -3,16 +3,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var PropTypes = require('prop-types');
 var CardContent_styled = require('./CardContent.styled.cjs');
 
 function CardContent(_ref) {
   var children = _ref.children;
-  return /* @__PURE__ */jsxRuntime.jsx(CardContent_styled.StyledCardContent, {
-    children: children
-  });
+  return /* @__PURE__ */React.createElement(CardContent_styled.StyledCardContent, null, children);
 }
 CardContent.propTypes = {
   /**

package/dist/cjs/components/Checkbox.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
 var Stack = require('@mui/material/Stack');
 var Box = require('./Box.cjs');
 var FormLabel = require('./FormLabel.cjs');
@@ -36,26 +35,22 @@ function Checkbox(_ref) {
     size: size,
     name: name
   }, rest);
-  return /* @__PURE__ */jsxRuntime.jsxs(Stack, {
+  return /* @__PURE__ */React.createElement(Stack, {
     direction: "row",
     gap: "10px",
-    alignItems: "flex-start",
-    children: [/* @__PURE__ */jsxRuntime.jsx(Box.default, {
-      children: /* @__PURE__ */jsxRuntime.jsx(Checkbox_styled.StyledCheckbox, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
-        disableRipple: true
-      }))
-    }), /* @__PURE__ */jsxRuntime.jsx(FormLabel.default, {
-      htmlFor: id,
-      size: size,
-      disabled: disabled,
-      margin: "none",
-      sx: {
-        mt: "2px",
-        fontWeight: "500"
-      },
-      children: label
-    })]
-  });
+    alignItems: "flex-start"
+  }, /* @__PURE__ */React.createElement(Box.default, null, /* @__PURE__ */React.createElement(Checkbox_styled.StyledCheckbox, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+    disableRipple: true
+  }))), /* @__PURE__ */React.createElement(FormLabel.default, {
+    htmlFor: id,
+    size: size,
+    disabled: disabled,
+    margin: "none",
+    sx: {
+      mt: "2px",
+      fontWeight: "500"
+    }
+  }, label));
 }
 
 exports.default = Checkbox;

package/dist/cjs/components/CircularProgress.cjs

@@ -4,13 +4,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var CircularProgress$1 = require('@mui/material/CircularProgress');
 
 function CircularProgress(_ref) {
   var rest = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref), _ref));
-  return /* @__PURE__ */jsxRuntime.jsx(CircularProgress$1, _rollupPluginBabelHelpers.objectSpread2({}, rest));
+  return /* @__PURE__ */React.createElement(CircularProgress$1, _rollupPluginBabelHelpers.objectSpread2({}, rest));
 }
 
 exports.default = CircularProgress;

package/dist/cjs/components/CollapsedText.cjs

@@ -4,7 +4,6 @@
 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');
 var Grid = require('@mui/material/Grid');
@@ -36,43 +35,35 @@ function CollapsedText(_ref) {
       setCollapsedSize(collapsedLines * lineHeight);
     }
   }, [collapsedLines, lineHeight]);
-  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */jsxRuntime.jsx(CollapsedText_styled.StyledCollapse, {
-      backgroundColor: backgroundColor,
-      collapsedSize: collapsedSize,
-      in: open,
-      lineHeight: lineHeight,
-      children: children
-    }), /* @__PURE__ */jsxRuntime.jsx(Grid, {
-      container: true,
-      justify: buttonJustify,
-      children: /* @__PURE__ */jsxRuntime.jsx(Grid, {
-        item: true,
-        children: /* @__PURE__ */jsxRuntime.jsx(CollapsedText_styled.StyledButtonWrapper, {
-          children: /* @__PURE__ */jsxRuntime.jsx(Button.default, {
-            color: "primaryAlt",
-            variant: "outlined",
-            size: "small",
-            onClick: function onClick() {
-              return setOpen(!open);
-            },
-            endIcon: buttonJustify === "flex-end" ? /* @__PURE__ */jsxRuntime.jsx(CollapsedText_styled.StyledArrowDownIcon, {
-              open: open
-            }) : null,
-            startIcon: buttonJustify !== "flex-end" ? /* @__PURE__ */jsxRuntime.jsx(CollapsedText_styled.StyledArrowDownIcon, {
-              open: open
-            }) : null,
-            children: function () {
-              if (buttonLabel && buttonLabel.open && buttonLabel.closed) {
-                return open ? buttonLabel.open : buttonLabel.closed;
-              }
-              return open ? "Less" : "More";
-            }()
-          })
-        })
-      })
-    })]
-  });
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(CollapsedText_styled.StyledCollapse, {
+    backgroundColor: backgroundColor,
+    collapsedSize: collapsedSize,
+    in: open,
+    lineHeight: lineHeight
+  }, children), /* @__PURE__ */React.createElement(Grid, {
+    container: true,
+    justify: buttonJustify
+  }, /* @__PURE__ */React.createElement(Grid, {
+    item: true
+  }, /* @__PURE__ */React.createElement(CollapsedText_styled.StyledButtonWrapper, null, /* @__PURE__ */React.createElement(Button.default, {
+    color: "primaryAlt",
+    variant: "outlined",
+    size: "small",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    endIcon: buttonJustify === "flex-end" ? /* @__PURE__ */React.createElement(CollapsedText_styled.StyledArrowDownIcon, {
+      open: open
+    }) : null,
+    startIcon: buttonJustify !== "flex-end" ? /* @__PURE__ */React.createElement(CollapsedText_styled.StyledArrowDownIcon, {
+      open: open
+    }) : null
+  }, function () {
+    if (buttonLabel && buttonLabel.open && buttonLabel.closed) {
+      return open ? buttonLabel.open : buttonLabel.closed;
+    }
+    return open ? "Less" : "More";
+  }())))));
 }
 CollapsedText.propTypes = {
   /**