@thecb/components 10.5.5 → 10.5.6-beta.0

package/dist/index.esm.js

@@ -39103,17 +39103,17 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
 };
 
 var onBackground = "".concat(MATISSE_BLUE);
-var disabledBackground = "".concat(MANATEE_GREY);
-var disabledBackgroundLight = "".concat(ATHENS_GREY);
+var disabledBackground = "".concat(IRON_GREY);
 var white = "".concat(WHITE);
+var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
 var fallbackValues$y = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
-  disabledBackgroundLight: disabledBackgroundLight,
   white: white,
+  offBackground: offBackground,
   rightLabelStyles: rightLabelStyles,
   leftLabelStyles: leftLabelStyles
 };
@@ -39131,7 +39131,7 @@ var HiddenToggleSwitchBox = styled.input.withConfig({
 var VisibleSwitchComponent = styled.label.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) {
+})(["width:48px;height:24px;border-radius:48px;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) {
@@ -39141,10 +39141,14 @@ var VisibleSwitchComponent = styled.label.withConfig({
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchRingComponent = styled.div.withConfig({
-  displayName: "ToggleSwitch__ToggleSwitchRingComponent",
+var ToggleSwitchMiddleRingComponent = styled.div.withConfig({
+  displayName: "ToggleSwitch__ToggleSwitchMiddleRingComponent",
   componentId: "sc-1t51u6v-2"
-})(["position:absolute;width:16px;height:16px;border:none;border-radius:50%;box-sizing:border-box;"]);
+})(["position:absolute;width:20px;height:20px;border:none;border-radius:50%;box-sizing:border-box;"]);
+var ToggleSwitchInnerRingComponent = styled.div.withConfig({
+  displayName: "ToggleSwitch__ToggleSwitchInnerRingComponent",
+  componentId: "sc-1t51u6v-3"
+})(["position:absolute;width:14px;height:14px;top:3px;left:3px;right:3px;bottom:3px;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,
@@ -39161,26 +39165,50 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     themeValues = _ref6.themeValues,
     isMobile = _ref6.isMobile,
     dataQa = _ref6.dataQa;
-  var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
+  var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
     off: {
-      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
-      left: "4px",
-      top: "3px",
-      bottom: "3px",
-      right: "20px",
+      backgroundColor: themeValues.offBackground,
+      transition: {
+        ease: "easeOut"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.onBackground,
+      transition: {
+        ease: "easeIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
+    }
+  });
+  var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
+    off: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "8px",
-      top: "3px",
-      bottom: "3px",
-      left: "22px",
+      right: "1px",
+      top: "2px",
+      bottom: "2px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px"
     }
   });
   var VisibleSwitch = posed(VisibleSwitchComponent)({
@@ -39195,20 +39223,19 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
       boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
     },
     off: {
-      border: "1px solid",
-      backgroundColor: disabled ? themeValues.disabledBackgroundLight : themeValues.white,
-      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      backgroundColor: themeValues.offBackground,
       transition: {
         ease: "easeOut"
       }
     },
     on: {
-      border: "1px solid",
-      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
-      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      backgroundColor: themeValues.onBackground,
       transition: {
         ease: "easeIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
     }
   });
   var handleKeyDown = function handleKeyDown(e) {
@@ -39243,11 +39270,11 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     htmlFor: "#toggle-".concat(name),
     onClick: disabled ? noop : onToggle,
     onKeyDown: disabled ? noop : handleKeyDown,
-    pose: isOn ? "on" : "off",
+    pose: disabled ? "disabled" : isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
     isMobile: isMobile
-  }, /*#__PURE__*/React.createElement(ToggleSwitchRing, null)))), label && /*#__PURE__*/React.createElement(Heading$1, {
+  }, /*#__PURE__*/React.createElement(ToggleSwitchMiddleRing, null, /*#__PURE__*/React.createElement(ToggleSwitchInnerRing, 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;",
@@ -42963,27 +42990,13 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), ACCOUNTS_DENTAL_ICON, AccountDentalIcon), ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), PROPERTIES_LAND_ICON, PropertyLandIcon), PROPERTIES_CAR_ICON, PropertyCarIcon), PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), MISC_BILL_ICON, AccountBillIcon));
 
-var disabledBackgroundColor$1 = {
-  primary: TRANSPARENT
-};
-var disabledBorderColor$1 = {
-  primary: GHOST_GREY
-};
-var disabledColor$1 = {
-  primary: MANATEE_GREY
-};
-var activeBackgroundColor$1 = {
-  primary: CORNFLOWER_BLUE
-};
-var backgroundColor$9 = {
-  primary: LINK_WATER
-};
-var borderColor$5 = {
-  primary: MOON_RAKER
-};
-var color$b = {
-  primary: ROYAL_BLUE_VIVID
-};
+var disabledBackgroundColor$1 = TRANSPARENT;
+var disabledBorderColor$1 = GHOST_GREY;
+var disabledColor$1 = MANATEE_GREY;
+var activeBackgroundColor$1 = CORNFLOWER_BLUE;
+var backgroundColor$9 = LINK_WATER;
+var borderColor$5 = MOON_RAKER;
+var color$b = ROYAL_BLUE_VIVID;
 var fallbackValues$I = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,