@thecb/components 7.7.8-beta.9 → 7.8.0

package/dist/index.cjs.js

@@ -24462,73 +24462,6 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   return ref;
 };
 
-/*
-  Hook that determines whether every element in an array of DOM selectors is fully present
-  within the user's current viewport.
-
-  (elements: Array<String>) => Boolean;
-
-  Takes an array of strings that correspond to DOM selectors. Examples:
-  "#submit-button", ".module-small", "h2.alert-title"
-
-  The document query function will return the *first* element in the document that matches
-  the string given.
-
-  A combination string of multiple selectors can also be provided as an item in the array, e.g.:
-  ".alert-info, .alert-warning, .alert-error". This will return the first element that matches *any* of the provided selectors.
-
-  If the element is present in the DOM (domEL !== null), the function examines the element's bounding box
-  to determine if the element is within the viewport. If any portion of the element is outside of
-  the viewport, the function returns false.
-
-  If all elements that exist are within the viewport, the function returns true.
-*/
-
-var useCheckElementsInViewport = function useCheckElementsInViewport() {
-  var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var elementsVisible = true;
-  var timeoutID = false;
-  var delay = 250;
-
-  var _useState = React.useState(window.innerWidth || document.documentElement.clientWidth),
-      _useState2 = _slicedToArray(_useState, 2),
-      viewportWidth = _useState2[0],
-      setViewportWidth = _useState2[1];
-
-  var _useState3 = React.useState(window.innerHeight || document.documentElement.clientHeight),
-      _useState4 = _slicedToArray(_useState3, 2),
-      viewportHeight = _useState4[0],
-      setViewportHeight = _useState4[1];
-
-  var updateViewportValues = function updateViewportValues() {
-    clearTimeout(timeoutID);
-    timeoutID = setTimeout(function () {
-      setViewportWidth(window.innerWidth || document.documentElement.clientWidth);
-      setViewportHeight(window.innerHeight || document.documentElement.clientHeight);
-    }, delay);
-  };
-
-  React.useEffect(function () {
-    window.addEventListener("resize", updateViewportValues);
-    return function () {
-      clearTimeout(timeoutID);
-    };
-  }, []);
-  React.useLayoutEffect(function () {
-    elements.forEach(function (element) {
-      var domEl = document.querySelector(element);
-      var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect(); // Skip any elements not in the DOM
-
-      if (domEl !== null) {
-        if (boundingBox.top < 0 || boundingBox.left < 0 || boundingBox.right > viewportWidth || boundingBox.bottom > viewportHeight) {
-          elementsVisible = false;
-        }
-      }
-    });
-  }, [elements, viewportWidth, viewportHeight]);
-  return elementsVisible;
-};
-
 
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -24537,8 +24470,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook,
-  useCheckElementsInViewport: useCheckElementsInViewport
+  useOutsideClick: useOutsideClickHook
 });
 
 var hoverColor$4 = "#116285";
@@ -25390,6 +25322,59 @@ var Heading = function Heading(_ref) {
 
 var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
 
+var Image = styled__default.img.withConfig({
+  displayName: "ImageBoxstyled__Image",
+  componentId: "sc-8lg9y6-0"
+})(["width:", ";height:", ";object-fit:", ";object-position:", ";"], function (_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "100%" : _ref$width;
+  return width;
+}, function (_ref2) {
+  var _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? "100%" : _ref2$height;
+  return height;
+}, function (_ref3) {
+  var _ref3$objectFit = _ref3.objectFit,
+      objectFit = _ref3$objectFit === void 0 ? "cover" : _ref3$objectFit;
+  return objectFit;
+}, function (_ref4) {
+  var _ref4$objectPosition = _ref4.objectPosition,
+      objectPosition = _ref4$objectPosition === void 0 ? "center" : _ref4$objectPosition;
+  return objectPosition;
+});
+
+var ImageBox = function ImageBox(_ref) {
+  var image = _ref.image,
+      minHeight = _ref.minHeight,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      borderRadius = _ref.borderRadius,
+      imgWidth = _ref.imgWidth,
+      imgHeight = _ref.imgHeight,
+      objectFit = _ref.objectFit,
+      objectPosition = _ref.objectPosition;
+  var boxMaxWidth = maxWidth || minWidth;
+  var _image$url = image.url,
+      url = _image$url === void 0 ? "" : _image$url,
+      _image$altText = image.altText,
+      altText = _image$altText === void 0 ? "" : _image$altText;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: boxMaxWidth,
+    borderRadius: borderRadius,
+    extraStyles: "height: ".concat(minHeight, ";")
+  }, /*#__PURE__*/React__default.createElement(Image, {
+    width: imgWidth,
+    height: imgHeight,
+    objectFit: objectFit,
+    objectPosition: objectPosition,
+    src: url,
+    alt: altText
+  }));
+};
+
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
       heading = _ref.heading,
@@ -40354,8 +40339,6 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     useOrderedList: useOrderedList,
     useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
-    var _t$toLowerCase;
-
     return /*#__PURE__*/React__default.createElement(Box, {
       key: t,
       borderSize: "3px",
@@ -40369,8 +40352,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       textAlign: "center",
       color: themeValues.textColor,
       weight: FONT_WEIGHT_SEMIBOLD,
-      extraStyles: "display: block; white-space: nowrap;",
-      id: "".concat(t === null || t === void 0 ? void 0 : (_t$toLowerCase = t.toLowerCase()) === null || _t$toLowerCase === void 0 ? void 0 : _t$toLowerCase.replace(/\s/g, "-"), "-tab-text")
+      extraStyles: "display: block; white-space: nowrap;"
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
@@ -45564,27 +45546,19 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       fontSize = _ref.fontSize,
       as = _ref.as,
-      _ref$titleID = _ref.titleID,
-      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
-      rightTitleContent = _ref.rightTitleContent,
       children = _ref.children;
   var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
   var computedFontSize = fontSize || themedFontSize;
   var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   var computedElemType = as || themedElemType;
-  var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
     textAlign: themeValues.textAlign,
     as: computedElemType,
-    extraStyles: "font-size: ".concat(computedFontSize, ";"),
-    id: titleID
-  }, heading);
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "center",
-    align: "space-between"
-  }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "font-size: ".concat(computedFontSize, ";")
+  }, heading), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: padding,
@@ -48990,6 +48964,7 @@ exports.HighlightTabRow = HighlightTabRow$1;
 exports.HistoryIconSmall = HistoryIconSmall$1;
 exports.IconAdd = IconAdd;
 exports.IconQuitLarge = IconQuitLarge;
+exports.ImageBox = ImageBox;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;