@nypl/design-system-react-components 1.5.0-rc2 → 1.5.1

package/dist/design-system-react-components.esm.js

@@ -5187,7 +5187,6 @@ var secondary = function secondary(_ref2) {
   var _ref2$buttonSize = _ref2.buttonSize,
     buttonSize = _ref2$buttonSize === void 0 ? "medium" : _ref2$buttonSize;
   return _extends({
-    bg: "ui.white",
     border: "1px solid",
     borderColor: "ui.link.primary",
     color: "ui.link.primary"
@@ -7696,13 +7695,13 @@ var campaign = {
   },
   position: "relative",
   content: {
-    alignItems: "center",
+    alignItems: "stretch",
     bg: "ui.black",
     color: "ui.white",
     display: "flex",
     flexFlow: {
       base: "column nowrap",
-      md: "row nowrap"
+      lg: "row nowrap"
     },
     minHeight: "320px",
     flex: {
@@ -7726,60 +7725,63 @@ var campaign = {
     color: "inherit",
     display: "inline-block"
   },
-  img: {
-    flex: {
-      base: "1 1 100%",
-      md: "0 0 50%"
-    },
-    minWidth: "0",
-    objectFit: "cover",
-    width: "100%",
-    height: {
-      md: "320px"
+  img: /*#__PURE__*/screenreaderOnly(),
+  imgWrapper: {
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    minHeight: "230px",
+    width: {
+      base: "100%",
+      lg: "50%"
     }
   },
   interior: {
-    flex: {
-      base: "0 0 100%",
-      md: "0 0 50%"
-    },
-    padding: "inset.wide",
+    alignSelf: "center",
     maxWidth: {
       md: "960px"
+    },
+    padding: {
+      base: "inset.default",
+      md: "inset.wide"
+    },
+    width: {
+      base: "100%",
+      lg: "50%"
     }
   }
 };
 var fiftyFifty = {
   content: /*#__PURE__*/_extends({}, wrapperStyles, {
-    alignItems: "center",
+    alignItems: "stretch",
     display: "flex",
     flexFlow: {
       base: "column nowrap",
       lg: "row nowrap"
-    },
-    paddingBottom: "s",
-    paddingEnd: "s",
-    paddingStart: "s",
-    padding: {
-      lg: "unset"
     }
   }),
   imgWrapper: {
-    marginBottom: {
-      base: "s",
-      lg: "unset"
-    },
-    marginEnd: {
-      base: "-15px",
-      lg: "s"
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    minHeight: "160px",
+    width: {
+      base: "100%",
+      lg: "50%"
+    }
+  },
+  img: /*#__PURE__*/screenreaderOnly(),
+  bodyText: {
+    alignSelf: "center",
+    maxWidth: {
+      md: "960px"
     },
-    marginStart: {
-      base: "-15px"
+    padding: {
+      base: "inset.default",
+      md: "inset.wide"
     },
-    maxWidth: {
+    width: {
+      base: "100%",
       lg: "50%"
-    },
-    width: "auto"
+    }
   }
 };
 var Hero = {
@@ -15535,13 +15537,19 @@ var Hero$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
   } else if (foregroundColor || backgroundColor) {
     console.warn("NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " + "props have been passed, but the `'secondary'` `heroType` " + "variant will not use them.");
   }
-  var childrenToRender = heroType === "campaign" ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Image, {
+  var childrenToRender = heroType === "campaign" ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Box, {
+    __css: _extends({}, styles.imgWrapper, {
+      backgroundImage: "url(" + imageProps.src + ")"
+    })
+  }, React__default.createElement(Image, {
     alt: imageProps.alt,
     src: imageProps.src
-  }), React__default.createElement(Box, {
+  })), React__default.createElement(Box, {
     __css: styles.interior
   }, finalHeading, subHeaderText)) : React__default.createElement(React__default.Fragment, null, heroType !== "primary" && heroType !== "tertiary" && React__default.createElement(Box, {
-    __css: styles.imgWrapper
+    __css: _extends({}, styles.imgWrapper, {
+      backgroundImage: heroType === "fiftyFifty" ? "url(" + imageProps.src + ")" : undefined
+    })
   }, React__default.createElement(Image, {
     alt: imageProps.alt,
     src: imageProps.src
@@ -16133,6 +16141,7 @@ var SearchBar$1 = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props,
   }));
   // Render the `TextInput` component.
   var textInputNative = textInputProps && React__default.createElement(TextInput, Object.assign({
+    defaultValue: textInputProps == null ? void 0 : textInputProps.defaultValue,
     id: (textInputProps == null ? void 0 : textInputProps.id) || "searchbar-textinput-" + id,
     isClearable: textInputProps == null ? void 0 : textInputProps.isClearable,
     isClearableCallback: textInputProps == null ? void 0 : textInputProps.isClearableCallback,
@@ -16357,7 +16366,6 @@ var Slider = /*#__PURE__*/chakra( /*#__PURE__*/forwardRef(function (props, ref)
       _onChange && _onChange(val);
     },
     onChangeEnd: function onChangeEnd(val) {
-      setCurrentValue(val);
       _onChangeEnd && _onChangeEnd(val);
     },
     step: step,