@thecb/components 11.2.2-beta.0 → 11.2.3-beta.0

package/dist/index.cjs.js

@@ -6256,6 +6256,38 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
   return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
 };
 
+/**
+ * Converts a hex color code to an RGBA color string with the specified alpha value.
+ *
+ * @param {string} hex - The hex color code (e.g., "#3498db" or "3498db").
+ * @param {number} alpha - The alpha value (opacity) between 0 and 1.
+ * @returns {string} - The RGBA color string (e.g., "rgba(52, 152, 219, 0.5)").
+ * @throws {Error} - Throws an error if the hex code is not a valid 3 or 6-digit hex color.
+ */
+var hexToRGBA = function hexToRGBA(hex, alpha) {
+  // Remove hash at the start if present
+  hex = hex.replace(/^\s*#/, "");
+
+  // If hex is 3 characters, convert it to 6 characters.
+  if (hex.length === 3) {
+    hex = hex.split("").map(function (_char) {
+      return _char + _char;
+    }).join("");
+  }
+
+  // Validate hex length
+  if (hex.length !== 6) {
+    throw new Error("Invalid hex color provided. Expected a 3 or 6-digit hex color.");
+  }
+
+  // Parse the hex color components
+  var bigint = parseInt(hex, 16);
+  var r = bigint >> 16 & 255;
+  var g = bigint >> 8 & 255;
+  var b = bigint & 255;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
   noop: noop$1,
@@ -6277,7 +6309,8 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor
+  adjustHexColor: adjustHexColor,
+  hexToRGBA: hexToRGBA
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -16170,7 +16203,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
     x: "-0.0864258",
     width: "14",
     height: "14",
-    fill: linkColor
+    fill: "none"
   })));
 };
 
@@ -50088,11 +50121,13 @@ var fallbackValues$X = {
 var TabSidebar = function TabSidebar(_ref) {
   var links = _ref.links,
     isMobile = _ref.isMobile,
-    themeValues = _ref.themeValues;
+    themeValues = _ref.themeValues,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? "100%" : _ref$minHeight;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     background: COOL_GREY_05,
-    minHeight: "100%",
+    minHeight: minHeight,
     role: "region",
     "aria-label": "Profile tabs",
     boxShadow: isMobile && "inset 0px -1px 0px 0px rgb(202, 206, 216)"
@@ -51279,6 +51314,116 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
 };
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
 
+var Container$1 = styled__default(Box).withConfig({
+  displayName: "ContactCardstyled__Container",
+  componentId: "sc-1v62a1n-0"
+})(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;"]);
+var Title$3 = styled__default(Heading$1).withConfig({
+  displayName: "ContactCardstyled__Title",
+  componentId: "sc-1v62a1n-1"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;background-color:transparent;font-weight:", ";"], FONT_WEIGHT_SEMIBOLD);
+var Content = styled__default(Box).withConfig({
+  displayName: "ContactCardstyled__Content",
+  componentId: "sc-1v62a1n-2"
+})(["padding:0;font-size:", ";line-height:1.313rem;overflow-wrap:normal;letter-spacing:0.14px;"], FONT_SIZE.SM);
+var Footer$1 = styled__default(Stack).withConfig({
+  displayName: "ContactCardstyled__Footer",
+  componentId: "sc-1v62a1n-3"
+})(["width:100%;"]);
+var Divider = styled__default(Box).withConfig({
+  displayName: "ContactCardstyled__Divider",
+  componentId: "sc-1v62a1n-4"
+})(["padding:0;height:1px;width:100%;"]);
+
+var ContactCard = function ContactCard(_ref) {
+  var title = _ref.title,
+    _ref$secondTitle = _ref.secondTitle,
+    secondTitle = _ref$secondTitle === void 0 ? "Helpful Links" : _ref$secondTitle,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    _ref$links = _ref.links,
+    links = _ref$links === void 0 ? [] : _ref$links,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+    _ref$titleVariant = _ref.titleVariant,
+    titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Contact Information" : _ref$ariaLabel,
+    _ref$linkVariant = _ref.linkVariant,
+    linkVariant = _ref$linkVariant === void 0 ? "primary" : _ref$linkVariant;
+  var themeContext = React.useContext(styled.ThemeContext);
+  var isMobile = themeContext.isMobile;
+  var linkFallbackValues = {
+    externalLinkColor: ROYAL_BLUE_VIVID
+  };
+  var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
+  return /*#__PURE__*/React__default.createElement(Container$1, {
+    borderRadius: "8px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
+    dataQa: createIdFromString(title, "contact-card"),
+    maxWidth: isMobile ? "100%" : "208px",
+    minWidth: isMobile ? "240px" : "208px",
+    minHeight: "141px",
+    padding: "1.5rem",
+    extraStyles: extraStyles,
+    role: "complementary",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "8px",
+    bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
+    fullHeight: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: 0,
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Title$3, {
+    variant: titleVariant,
+    margin: 0,
+    fontSize: FONT_SIZE.MD
+  }, title)), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Content, null, content))), links.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SolidDivider$1, {
+    "aria-hidden": true
+  }), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "8px",
+    bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
+    fullHeight: true
+  }, /*#__PURE__*/React__default.createElement(Title$3, {
+    variant: titleVariant,
+    margin: 0,
+    fontSize: FONT_SIZE.MD
+  }, secondTitle), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "4px",
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
+    fullHeight: true
+  }, links.map(function (link) {
+    var linkID = createIdFromString(link.text, "contact-card-link");
+    return /*#__PURE__*/React__default.createElement(ExternalLink, {
+      key: linkID,
+      dataQa: linkID,
+      href: link.link,
+      newTab: true,
+      extraStyles: "\n                      flex-direction: row;\n                      align-items: center;\n                      align-content: flex-start;\n                      justify-content: space-between;\n                    ",
+      size: FONT_SIZE.SM,
+      lineHeight: "1.313rem"
+    }, link.text, /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
+      linkColor: linkThemeValues.externalLinkColor,
+      text: link.text
+    }));
+  })))));
+};
+
 var pageBackground = "#FBFCFD";
 var fallbackValues$10 = {
   pageBackground: pageBackground
@@ -51663,6 +51808,7 @@ exports.ChevronIcon = ChevronIcon$1;
 exports.CloseIcon = CloseIcon;
 exports.Cluster = Cluster;
 exports.CollapsibleSection = CollapsibleSection$1;
+exports.ContactCard = ContactCard;
 exports.Copyable = Copyable;
 exports.CountryDropdown = CountryDropdown;
 exports.Cover = Cover;