@manamerge/mana-atomic-ui 1.0.158 → 1.0.160

package/dist/index.d.ts

@@ -13,10 +13,11 @@ interface ButtonTypes {
 declare const Button: React.FC<ButtonTypes>;
 
 interface TextTypes {
-    variant?: "primary-light" | "primary-regular" | "primary-medium" | "primary-bold" | "primary-heavy" | "secondary-regular" | "secondary-italic";
+    variant?: string;
     children?: string;
     htmlFor?: string;
     margin?: string;
+    color?: string;
     lineHeight?: string;
     fontWeight?: string | number;
     tag?: keyof JSX.IntrinsicElements;

package/dist/index.js

@@ -164,14 +164,14 @@ const TextContainerLabel = styled.label `
     const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.text) === null || _b === void 0 ? void 0 : _b[variant]) || {};
     return css `
             margin: ${(props === null || props === void 0 ? void 0 : props.margin) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.margin)};
-            font-size: ${(props === null || props === void 0 ? void 0 : props.vFontSize) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize)};
+            font-size: ${(props === null || props === void 0 ? void 0 : props.vFontSize) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.vFontSize)};
             line-height: ${(props === null || props === void 0 ? void 0 : props.lineHeight) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.lineHeight)};
             font-weight: ${(props === null || props === void 0 ? void 0 : props.fontWeight) ||
         (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontWeight) ||
         "regular"};
             font-family: ${(textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily) || "inherit"};
             font-style: ${(textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontStyle) || "normal"};
-            color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.color) || "inherit"};
+            color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.vColor) || "inherit"};
         `;
 }};
 `;
@@ -499,6 +499,24 @@ const WrapperBackground = styled.div `
             justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "center"};
             height: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.height) || "unset"};
             background-color: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.backgroundColor) || "unset"};
+            /* background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background}; */
+            /* background: radial-gradient(
+                circle at center,
+                #ff7e5f 0%,
+                #ff7e5f 30%,
+                #feb47b 60%,
+                transparent 100%
+            ); */
+            /* background: radial-gradient(
+                circle at center,
+                rgba(255, 126, 95, 0.8) 0%,
+                rgba(255, 126, 95, 0.3) 40%,
+                rgba(255, 126, 95, 0) 70%,
+                transparent 100%
+            );
+            backdrop-filter: blur(20px);
+            aspect-ratio: 1 / 1; */
+            /* border-radius: 50%; */
 
             /* Overlay */
             ${withOverlay &&
@@ -600,16 +618,25 @@ const AtomIconDot = styled(Icon).attrs(({ theme, moleculeVariant }) => {
         `;
 }}
 `;
+const AtomTextBanner = styled(Text).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextBanner) === null || _c === void 0 ? void 0 : _c.variant,
+        vColor: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.header) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomTextBanner) === null || _f === void 0 ? void 0 : _f.color
+    });
+}) ``;
 const AtomHeading$3 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant,
+        as: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.header) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomHeading) === null || _f === void 0 ? void 0 : _f.as
     });
 }) ``;
 const AtomTextTitle = styled(Text).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextTitle) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextTitle) === null || _c === void 0 ? void 0 : _c.variant,
+        vColor: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.header) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomTextTitle) === null || _f === void 0 ? void 0 : _f.color
     });
 }) ``;
 const WrapperLineBottom = styled.div `
@@ -678,7 +705,7 @@ const WrapperTextTitle = styled.div `
 
 const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon, buttonRightIcon, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick, imageURLBackground, withOverlay }) => {
     const compVariant = `Header-${moleculeVariant}`;
-    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, imageURLBackground: imageURLBackground, withOverlay: withOverlay }, { children: jsxs(WrapperHeader, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), textBanner && (jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] })))] }), headingTitle && (jsx(AtomHeading$3, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle }))), jsx(WrapperTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textTitle &&
+    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, imageURLBackground: imageURLBackground, withOverlay: withOverlay }, { children: jsxs(WrapperHeader, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), textBanner && (jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextBanner, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] })))] }), headingTitle && (jsx(AtomHeading$3, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle }))), jsx(WrapperTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textTitle &&
                         (textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: text }), i)))) })), jsxs(WrapperLineBottom, { children: [(buttonLeftIcon || buttonLeftText) && (jsxs(AtomButtonLeft, Object.assign({ moleculeVariant: compVariant, onClick: buttonLeftClick }, { children: [buttonLeftIcon && (jsx(AtomIconLeft, { moleculeVariant: compVariant, svg: buttonLeftIcon })), buttonLeftText] }))), (buttonRightIcon || buttonRightText) && (jsxs(AtomButtonRight, Object.assign({ moleculeVariant: compVariant, onClick: buttonRightClick }, { children: [buttonRightText, buttonRightIcon && (jsx(AtomIconRight, { moleculeVariant: compVariant, svg: buttonRightIcon }))] })))] })] })) })));
 };
 
@@ -1208,7 +1235,6 @@ const TextBreakerTape = styled(Text).attrs(({ theme, moleculeVariant }) => {
     const textTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.breakerTape) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.text) || {};
     return css `
             color: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.color};
-            font-size: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.fontSize};
         `;
 }}
 `;