@thecb/components 10.4.7-beta.1 → 10.4.8-beta.0

package/dist/index.esm.js

@@ -14123,7 +14123,9 @@ var GenericErrorIcon = function GenericErrorIcon() {
   }));
 };
 
-var IconAdd = function IconAdd() {
+var IconAdd = function IconAdd(_ref) {
+  var _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -14133,12 +14135,13 @@ var IconAdd = function IconAdd() {
     className: "icon"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
     id: "path-1",
+    strokeWidth: strokeWidth,
     d: "M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
   })), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke: "none",
-    strokeWidth: "1"
+    strokeWidth: strokeWidth
   }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(-407 -563)"
   }, /*#__PURE__*/React.createElement("g", {
@@ -14156,9 +14159,10 @@ var IconAdd = function IconAdd() {
     xlinkHref: "#path-1"
   })), /*#__PURE__*/React.createElement("circle", {
     className: "stroke",
+    strokeWidth: strokeWidth,
     cx: "8.155",
     cy: "8.072",
-    r: "8"
+    r: strokeWidth == 1 ? "8" : "7"
   }))))));
 };
 
@@ -27828,13 +27832,13 @@ var Placeholder = function Placeholder(_ref2) {
     childGap: "0"
   }, variant === "large" && /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }")
+    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } ")
   }, variant === "large" ? /*#__PURE__*/React.createElement(Center, {
     intrinsic: true
   }, getLargeIcon(largeIcon), /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS",
     color: themeValues.color,
-    weight: FONT_WEIGHT_REGULAR,
+    weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "text-align: center;"
   }, text)) : /*#__PURE__*/React.createElement(Cover, {
     singleChild: true,
@@ -27842,12 +27846,14 @@ var Placeholder = function Placeholder(_ref2) {
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "center",
     align: "center"
-  }, /*#__PURE__*/React.createElement(IconAdd, null), /*#__PURE__*/React.createElement(Center, {
+  }, /*#__PURE__*/React.createElement(IconAdd, {
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS",
     color: themeValues.color,
-    weight: FONT_WEIGHT_REGULAR,
+    weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
@@ -38763,17 +38769,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
 };
@@ -38791,7 +38797,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) {
@@ -38801,10 +38807,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,
@@ -38821,30 +38831,52 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     themeValues = _ref6.themeValues,
     isMobile = _ref6.isMobile,
     dataQa = _ref6.dataQa;
-  var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
+  var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
+    off: {
+      backgroundColor: themeValues.offBackground,
+      transition: {
+        ease: "easeOut"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.onBackground,
+      transition: {
+        ease: "easeIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
+    }
+  });
+  var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
     off: {
-      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
-      left: "4px",
-      top: "3px",
-      bottom: "3px",
-      right: "20px",
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "8px",
-      top: "3px",
-      bottom: "4px",
-      left: "23px",
+      right: "1px",
+      top: "2px",
+      bottom: "2px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px"
     }
   });
-
-  // to do: for disabled, background color should not be white (should be lighter disabled background)
   var VisibleSwitch = posed(VisibleSwitchComponent)({
     focusable: true,
     hoverable: true,
@@ -38857,20 +38889,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) {
@@ -38905,11 +38936,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;",