@thecb/components 7.9.4-beta.2 → 7.9.4-beta.4

package/dist/index.esm.js

@@ -21000,43 +21000,40 @@ var HiddenCheckbox = styled.input.attrs({
 var StyledCheckbox = styled.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
-})(["display:inline-block;margin:", ";width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], function (_ref2) {
-  var checkboxMargin = _ref2.checkboxMargin;
-  return checkboxMargin;
-}, CheckboxIcon, function (_ref3) {
-  var checked = _ref3.checked;
+})(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
+  var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
-}, function (_ref4) {
-  var error = _ref4.error,
-      disabled = _ref4.disabled,
-      checked = _ref4.checked,
-      focused = _ref4.focused,
-      defaultStyles = _ref4.defaultStyles,
-      checkedStyles = _ref4.checkedStyles,
-      focusedStyles = _ref4.focusedStyles,
-      errorStyles = _ref4.errorStyles,
-      disabledStyles = _ref4.disabledStyles,
-      disabledCheckedStyles = _ref4.disabledCheckedStyles;
+}, function (_ref3) {
+  var error = _ref3.error,
+      disabled = _ref3.disabled,
+      checked = _ref3.checked,
+      focused = _ref3.focused,
+      defaultStyles = _ref3.defaultStyles,
+      checkedStyles = _ref3.checkedStyles,
+      focusedStyles = _ref3.focusedStyles,
+      errorStyles = _ref3.errorStyles,
+      disabledStyles = _ref3.disabledStyles,
+      disabledCheckedStyles = _ref3.disabledCheckedStyles;
   return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
-var Checkbox = function Checkbox(_ref5) {
-  var title = _ref5.title,
-      name = _ref5.name,
-      checked = _ref5.checked,
-      _ref5$onChange = _ref5.onChange,
-      onChange = _ref5$onChange === void 0 ? noop : _ref5$onChange,
-      _ref5$disabled = _ref5.disabled,
-      disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
-      themeValues = _ref5.themeValues,
-      _ref5$hidden = _ref5.hidden,
-      hidden = _ref5$hidden === void 0 ? false : _ref5$hidden,
-      _ref5$error = _ref5.error,
-      error = _ref5$error === void 0 ? false : _ref5$error,
-      _ref5$checkboxMargin = _ref5.checkboxMargin,
-      checkboxMargin = _ref5$checkboxMargin === void 0 ? "0 16px 0 0" : _ref5$checkboxMargin,
-      extraStyles = _ref5.extraStyles,
-      textExtraStyles = _ref5.textExtraStyles;
+var Checkbox = function Checkbox(_ref4) {
+  var title = _ref4.title,
+      name = _ref4.name,
+      checked = _ref4.checked,
+      _ref4$onChange = _ref4.onChange,
+      onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      themeValues = _ref4.themeValues,
+      _ref4$hidden = _ref4.hidden,
+      hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
+      _ref4$error = _ref4.error,
+      error = _ref4$error === void 0 ? false : _ref4$error,
+      _ref4$checkboxMargin = _ref4.checkboxMargin,
+      checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
+      extraStyles = _ref4.extraStyles,
+      textExtraStyles = _ref4.textExtraStyles;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -21063,7 +21060,7 @@ var Checkbox = function Checkbox(_ref5) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none; ".concat(extraStyles)
+    extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
   }, /*#__PURE__*/React.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React.createElement(HiddenCheckbox, {
@@ -21086,8 +21083,7 @@ var Checkbox = function Checkbox(_ref5) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles,
-    checkboxMargin: checkboxMargin
+    focusedStyles: themeValues.focusedStyles
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -48645,7 +48641,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$modalVariant = _ref.modalVariant,
       modalVariant = _ref$modalVariant === void 0 ? "default" : _ref$modalVariant,
       _ref$containerBackgro = _ref.containerBackground,
-      containerBackground = _ref$containerBackgro === void 0 ? ATHENS_GREY : _ref$containerBackgro;
+      containerBackground = _ref$containerBackgro === void 0 ? ATHENS_GREY : _ref$containerBackgro,
+      _ref$checkboxMargin = _ref.checkboxMargin,
+      checkboxMargin = _ref$checkboxMargin === void 0 ? "0 0.5rem 0 0" : _ref$checkboxMargin,
+      _ref$modalTitle = _ref.modalTitle,
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48658,7 +48658,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     minWidth: displayInline ? "0" : "100%",
     background: displayInline ? "transparent" : containerBackground,
     boxShadow: displayInline ? "none" : standardBoxShadow,
-    borderRadius: displayInline ? "0" : "4px"
+    borderRadius: displayInline ? "0" : "4px",
+    extraStyles: "margin: 4px 0 0 4px;"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem"
   }, html && /*#__PURE__*/React.createElement(Box, {
@@ -48671,21 +48672,25 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     name: id,
     error: hasError,
     checked: isChecked,
-    onChange: onCheck
+    onChange: onCheck,
+    checkboxMargin: checkboxMargin
   }), /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0.25rem"
+    childGap: "0.25rem",
+    fullHeight: true
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
-    align: "flex-start",
-    nowrap: true
+    align: "center",
+    nowrap: true,
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
   }, description && /*#__PURE__*/React.createElement(Text$1, {
     color: CHARADE_GREY
-  }, description, "\xA0"), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
+  }, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
     link: linkText,
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: modalVariant
+    linkVariant: modalVariant,
+    title: modalTitle
   })), showCheckbox && hasError && /*#__PURE__*/React.createElement(Text$1, {
     variant: "pXS",
     color: ERROR_COLOR,