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

package/dist/index.esm.js

@@ -21000,38 +21000,43 @@ var HiddenCheckbox = styled.input.attrs({
 var StyledCheckbox = styled.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
-})(["display:inline-block;margin-right:16px;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
-  var checked = _ref2.checked;
+})(["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;
   return checked ? "visible" : "hidden";
-}, 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;
+}, 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;
   return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
-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,
-      extraStyles = _ref4.extraStyles,
-      textExtraStyles = _ref4.textExtraStyles;
+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 _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -21081,7 +21086,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    checkboxMargin: checkboxMargin
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -21089,7 +21095,7 @@ var Checkbox = function Checkbox(_ref4) {
     checkColor: themeValues.checkColor
   }, /*#__PURE__*/React.createElement("polyline", {
     points: "20 6 9 17 4 12"
-  })))), /*#__PURE__*/React.createElement(Text$1, {
+  })))), title && /*#__PURE__*/React.createElement(Text$1, {
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
@@ -48659,11 +48665,10 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     padding: "0"
   }, html), /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
-    align: "center",
+    align: "flex-start",
     nowrap: true
   }, showCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: id,
-    title: "Terms and Conditions",
     error: hasError,
     checked: isChecked,
     onChange: onCheck
@@ -48671,7 +48676,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     childGap: "0.25rem"
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
-    align: "center",
+    align: "flex-start",
     nowrap: true
   }, description && /*#__PURE__*/React.createElement(Text$1, {
     color: CHARADE_GREY