@thecb/components 10.7.3 → 10.7.5-beta.0

package/dist/index.esm.js

@@ -39190,46 +39190,71 @@ var fallbackValues$y = {
 var HiddenToggleSwitchBox = styled.input.withConfig({
   displayName: "ToggleSwitch__HiddenToggleSwitchBox",
   componentId: "sc-1t51u6v-0"
-})(["opacity:0;position:absolute;cursor:", ";height:24px;width:50px;", ""], function (_ref) {
+})(["opacity:0;margin:0;position:absolute;cursor:", ";height:", ";width:", ";"], function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
 }, function (_ref2) {
   var isMobile = _ref2.isMobile;
-  return isMobile ? "transform: scale(0.75)" : "";
+  return isMobile ? "22px" : "24px";
+}, function (_ref3) {
+  var isMobile = _ref3.isMobile;
+  return isMobile ? "40px" : "44px";
 });
-var VisibleSwitchComponent = styled.label.withConfig({
+var VisibleSwitchComponent = styled.span.withConfig({
   displayName: "ToggleSwitch__VisibleSwitchComponent",
   componentId: "sc-1t51u6v-1"
-})(["width:44px;height:24px;border-radius:12px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? "auto" : "pointer";
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? "none" : "0px 2px 5px 0px rgba(0, 0, 0, 0.5) !important";
+})(["width:", ";height:", ";border-radius:12px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}"], function (_ref4) {
+  var isMobile = _ref4.isMobile;
+  return isMobile ? "40px" : "44px";
 }, function (_ref5) {
   var isMobile = _ref5.isMobile;
-  return isMobile ? "transform: scale(0.75)" : "";
+  return isMobile ? "22px" : "24px";
+}, function (_ref6) {
+  var disabled = _ref6.disabled;
+  return disabled ? "auto" : "pointer";
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
+  return disabled ? "none" : "0px 2px 5px 0px rgba(0, 0, 0, 0.5) !important";
 });
-var ToggleSwitchRingComponent = styled.div.withConfig({
+var ToggleSwitchRingComponent = styled.span.withConfig({
   displayName: "ToggleSwitch__ToggleSwitchRingComponent",
   componentId: "sc-1t51u6v-2"
-})(["position:absolute;width:16px;height:16px;border:none;border-radius:50%;box-sizing:border-box;"]);
-var ToggleSwitch = function ToggleSwitch(_ref6) {
-  var _ref6$isOn = _ref6.isOn,
-    isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
-    _ref6$onToggle = _ref6.onToggle,
-    onToggle = _ref6$onToggle === void 0 ? noop : _ref6$onToggle,
-    _ref6$disabled = _ref6.disabled,
-    disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-    _ref6$name = _ref6.name,
-    name = _ref6$name === void 0 ? "" : _ref6$name,
-    _ref6$label = _ref6.label,
-    label = _ref6$label === void 0 ? null : _ref6$label,
-    _ref6$labelLeft = _ref6.labelLeft,
-    labelLeft = _ref6$labelLeft === void 0 ? false : _ref6$labelLeft,
-    themeValues = _ref6.themeValues,
-    isMobile = _ref6.isMobile,
-    dataQa = _ref6.dataQa;
+})(["position:absolute;width:", ";height:", ";border:none;border-radius:50%;box-sizing:border-box;"], function (_ref8) {
+  var isMobile = _ref8.isMobile;
+  return isMobile ? "14px" : "16px";
+}, function (_ref9) {
+  var isMobile = _ref9.isMobile;
+  return isMobile ? "14px" : "16px";
+});
+var ToggleSwitch = function ToggleSwitch(_ref10) {
+  var _ref10$ariaDescribedB = _ref10.ariaDescribedBy,
+    ariaDescribedBy = _ref10$ariaDescribedB === void 0 ? "" : _ref10$ariaDescribedB,
+    _ref10$isOn = _ref10.isOn,
+    isOn = _ref10$isOn === void 0 ? false : _ref10$isOn,
+    _ref10$onToggle = _ref10.onToggle,
+    onToggle = _ref10$onToggle === void 0 ? noop : _ref10$onToggle,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    _ref10$name = _ref10.name,
+    name = _ref10$name === void 0 ? "toggle" : _ref10$name,
+    _ref10$label = _ref10.label,
+    label = _ref10$label === void 0 ? null : _ref10$label,
+    _ref10$labelLeft = _ref10.labelLeft,
+    labelLeft = _ref10$labelLeft === void 0 ? false : _ref10$labelLeft,
+    _ref10$labelStyles = _ref10.labelStyles,
+    labelStyles = _ref10$labelStyles === void 0 ? "" : _ref10$labelStyles,
+    _ref10$labelAs = _ref10.labelAs,
+    labelAs = _ref10$labelAs === void 0 ? "h4" : _ref10$labelAs,
+    _ref10$srOnlyLabel = _ref10.srOnlyLabel,
+    srOnlyLabel = _ref10$srOnlyLabel === void 0 ? "" : _ref10$srOnlyLabel,
+    themeValues = _ref10.themeValues,
+    isMobile = _ref10.isMobile,
+    dataQa = _ref10.dataQa,
+    _ref10$minWidth = _ref10.minWidth,
+    minWidth = _ref10$minWidth === void 0 ? "80px" : _ref10$minWidth,
+    _ref10$extraStyles = _ref10.extraStyles,
+    extraStyles = _ref10$extraStyles === void 0 ? "" : _ref10$extraStyles;
+  var nameId = name.replace(/ /g, "-");
   var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
       backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
@@ -39287,11 +39312,13 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   };
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    extraStyles: labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
+    extraStyles: "\n        margin: 0 0.5rem;\n        ".concat(labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles).concat(extraStyles)
   }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(Cluster, {
-    justify: "stretch",
+    justify: "space-between",
     align: "center",
-    overflow: "visible"
+    overflow: "visible",
+    childGap: "0",
+    minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : isMobile ? "75px" : "84px"
   }, /*#__PURE__*/React.createElement(Cover, {
     minHeight: "100%",
     singleChild: true
@@ -39301,27 +39328,34 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     extraStyles: "display: flex; align-items: center;",
     dataQa: dataQa
   }, /*#__PURE__*/React.createElement(HiddenToggleSwitchBox, {
+    type: "checkbox",
+    "aria-checked": isOn,
     "aria-label": name,
+    "aria-labelledby": label ? "".concat(nameId, "-label") : null,
+    "aria-describedby": ariaDescribedBy ? ariaDescribedBy : null,
     checked: isOn,
     onChange: disabled ? noop : onToggle,
     disabled: disabled,
-    id: "#toggle-".concat(name),
+    id: "#".concat(nameId),
     isMobile: isMobile
   }), /*#__PURE__*/React.createElement(VisibleSwitch, {
-    name: name,
-    htmlFor: "#toggle-".concat(name),
     onClick: disabled ? noop : onToggle,
     onKeyDown: disabled ? noop : handleKeyDown,
     pose: isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
     isMobile: isMobile
-  }, /*#__PURE__*/React.createElement(ToggleSwitchRing, null)))), label && /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h4",
-    weight: FONT_WEIGHT_SEMIBOLD,
-    extraStyles: "margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;",
-    color: CHARADE_GREY
-  }, label))));
+  }, /*#__PURE__*/React.createElement(ToggleSwitchRing, {
+    isMobile: isMobile
+  })))), label && /*#__PURE__*/React.createElement(Box, {
+    as: labelAs,
+    extraStyles: "\n                font-weight: ".concat(FONT_WEIGHT_SEMIBOLD, ";\n                color: ").concat(CHARADE_GREY, ";\n                margin: 0 0 0 0.25rem; \n                position: relative; \n                bottom: 1px; display: \n                inline-block; \n                ").concat(labelStyles),
+    id: "".concat(nameId, "-label"),
+    htmlFor: labelAs === "label" ? nameId : null,
+    padding: "0"
+  }, srOnlyLabel && /*#__PURE__*/React.createElement("span", {
+    style: SCREEN_READER_ONLY
+  }, srOnlyLabel), label))));
 };
 var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$y);