@thecb/components 11.2.3-beta.3 → 11.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +5 -41
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +5 -41
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/registration-banner/RegistrationBanner.js +4 -6
- package/src/components/molecules/registration-banner/RegistrationBanner.mdx +4 -11
- package/src/components/molecules/registration-banner/RegistrationBanner.stories.js +4 -14
- package/src/components/molecules/registration-banner/RegistrationBanner.styled.js +3 -2
- package/src/components/molecules/registration-banner/index.d.ts +2 -3
- package/src/util/general.js +0 -36
package/dist/index.cjs.js
CHANGED
|
@@ -6256,38 +6256,6 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
|
|
|
6256
6256
|
return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
|
|
6257
6257
|
};
|
|
6258
6258
|
|
|
6259
|
-
/**
|
|
6260
|
-
* Converts a hex color code to an RGBA color string with the specified alpha value.
|
|
6261
|
-
*
|
|
6262
|
-
* @param {string} hex - The hex color code (e.g., "#3498db" or "3498db").
|
|
6263
|
-
* @param {number} alpha - The alpha value (opacity) between 0 and 1.
|
|
6264
|
-
* @returns {string} - The RGBA color string (e.g., "rgba(52, 152, 219, 0.5)").
|
|
6265
|
-
* @throws {Error} - Throws an error if the hex code is not a valid 3 or 6-digit hex color.
|
|
6266
|
-
*/
|
|
6267
|
-
var hexToRGBA = function hexToRGBA(hex, alpha) {
|
|
6268
|
-
// Remove hash at the start if present
|
|
6269
|
-
hex = hex.replace(/^\s*#/, "");
|
|
6270
|
-
|
|
6271
|
-
// If hex is 3 characters, convert it to 6 characters.
|
|
6272
|
-
if (hex.length === 3) {
|
|
6273
|
-
hex = hex.split("").map(function (_char) {
|
|
6274
|
-
return _char + _char;
|
|
6275
|
-
}).join("");
|
|
6276
|
-
}
|
|
6277
|
-
|
|
6278
|
-
// Validate hex length
|
|
6279
|
-
if (hex.length !== 6) {
|
|
6280
|
-
throw new Error("Invalid hex color provided. Expected a 3 or 6-digit hex color.");
|
|
6281
|
-
}
|
|
6282
|
-
|
|
6283
|
-
// Parse the hex color components
|
|
6284
|
-
var bigint = parseInt(hex, 16);
|
|
6285
|
-
var r = bigint >> 16 & 255;
|
|
6286
|
-
var g = bigint >> 8 & 255;
|
|
6287
|
-
var b = bigint & 255;
|
|
6288
|
-
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
|
|
6289
|
-
};
|
|
6290
|
-
|
|
6291
6259
|
var general = /*#__PURE__*/Object.freeze({
|
|
6292
6260
|
__proto__: null,
|
|
6293
6261
|
noop: noop$1,
|
|
@@ -6309,8 +6277,7 @@ var general = /*#__PURE__*/Object.freeze({
|
|
|
6309
6277
|
titleCaseString: titleCaseString,
|
|
6310
6278
|
kebabCaseString: kebabCaseString,
|
|
6311
6279
|
wrapIndex: wrapIndex,
|
|
6312
|
-
adjustHexColor: adjustHexColor
|
|
6313
|
-
hexToRGBA: hexToRGBA
|
|
6280
|
+
adjustHexColor: adjustHexColor
|
|
6314
6281
|
});
|
|
6315
6282
|
|
|
6316
6283
|
var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
|
|
@@ -49756,7 +49723,7 @@ var BannerContainer = styled__default(Cluster).withConfig({
|
|
|
49756
49723
|
componentId: "sc-1m1lm4y-0"
|
|
49757
49724
|
})(["background:", ";padding:", ";"], function (_ref) {
|
|
49758
49725
|
var themeValues = _ref.themeValues;
|
|
49759
|
-
return
|
|
49726
|
+
return adjustHexColor(themeValues.background, 10, "lighten");
|
|
49760
49727
|
}, function (_ref2) {
|
|
49761
49728
|
var isMobile = _ref2.isMobile;
|
|
49762
49729
|
return isMobile ? "1rem 2rem" : " 2rem 8.25rem";
|
|
@@ -49788,14 +49755,13 @@ var LoginLink = styled__default(ButtonWithLink).withConfig({
|
|
|
49788
49755
|
})(["border-radius:100px;padding:0;margin:0;width:100%;min-height:2rem;margin-top:0px;border:none;&:hover{text-decoration:none;}"]);
|
|
49789
49756
|
|
|
49790
49757
|
var RegistrationBanner = function RegistrationBanner(_ref) {
|
|
49791
|
-
var
|
|
49758
|
+
var clientName = _ref.clientName,
|
|
49792
49759
|
extraStyles = _ref.extraStyles,
|
|
49793
49760
|
_ref$loginLink = _ref.loginLink,
|
|
49794
49761
|
loginLink = _ref$loginLink === void 0 ? "/login" : _ref$loginLink,
|
|
49795
49762
|
_ref$registrationLink = _ref.registrationLink,
|
|
49796
49763
|
registrationLink = _ref$registrationLink === void 0 ? "/registration" : _ref$registrationLink,
|
|
49797
49764
|
themeValues = _ref.themeValues,
|
|
49798
|
-
title = _ref.title,
|
|
49799
49765
|
titleAs = _ref.titleAs,
|
|
49800
49766
|
titleVariant = _ref.titleVariant;
|
|
49801
49767
|
var themeContext = React.useContext(styled.ThemeContext);
|
|
@@ -49804,11 +49770,9 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
|
|
|
49804
49770
|
extraStyles: extraStyles,
|
|
49805
49771
|
themeValues: themeValues,
|
|
49806
49772
|
isMobile: isMobile,
|
|
49807
|
-
role: "banner",
|
|
49808
49773
|
"aria-label": "Registration Banner",
|
|
49809
49774
|
justify: "center"
|
|
49810
49775
|
}, /*#__PURE__*/React__default.createElement(ContentContainer, {
|
|
49811
|
-
role: "main",
|
|
49812
49776
|
align: "center",
|
|
49813
49777
|
justify: "space-between",
|
|
49814
49778
|
overflow: "visible",
|
|
@@ -49822,11 +49786,11 @@ var RegistrationBanner = function RegistrationBanner(_ref) {
|
|
|
49822
49786
|
fontSize: isMobile ? FONT_SIZE.XL : "1.5rem",
|
|
49823
49787
|
variant: titleVariant,
|
|
49824
49788
|
weight: FONT_WEIGHT_SEMIBOLD
|
|
49825
|
-
},
|
|
49789
|
+
}, "Register for a ", clientName, " Wallet Account"), /*#__PURE__*/React__default.createElement(Text$1, {
|
|
49826
49790
|
extraStyles: "\n display: block;\n padding: ".concat(isMobile ? ".125rem 0 1rem" : "0", "\n "),
|
|
49827
49791
|
fontSize: isMobile ? FONT_SIZE.SM : FONT_SIZE.LG,
|
|
49828
49792
|
color: themeValues.secondaryColor
|
|
49829
|
-
},
|
|
49793
|
+
}, "Save payment methods and information for fast, easy, and safe payments with ", clientName)), /*#__PURE__*/React__default.createElement(ButtonContainer, {
|
|
49830
49794
|
justify: "space-between",
|
|
49831
49795
|
fullHeight: true,
|
|
49832
49796
|
childGap: "0.5rem",
|