@manamerge/mana-atomic-ui 1.0.160 → 1.0.162

package/dist/index.d.ts

@@ -13,11 +13,10 @@ interface ButtonTypes {
 declare const Button: React.FC<ButtonTypes>;
 
 interface TextTypes {
-    variant?: string;
+    variant?: "primary-light" | "primary-regular" | "primary-medium" | "primary-bold" | "primary-heavy" | "secondary-regular" | "secondary-italic";
     children?: string;
     htmlFor?: string;
     margin?: string;
-    color?: string;
     lineHeight?: string;
     fontWeight?: string | number;
     tag?: keyof JSX.IntrinsicElements;
@@ -30,7 +29,8 @@ declare const Text: React.FC<TextTypes>;
 interface HeadingTypes {
     variant?: string;
     children: ReactNode;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    vColor?: string;
+    asTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
 declare const Heading: React.FC<HeadingTypes>;
 

package/dist/index.js

@@ -153,7 +153,7 @@ const TextContainer = styled.p `
         "regular"};
             font-family: ${textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily};
             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.vColor) || "inherit"};
+            color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.color) || "inherit"};
         `;
 }};
 `;
@@ -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.vFontSize)};
+            font-size: ${(props === null || props === void 0 ? void 0 : props.vFontSize) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize)};
             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.vColor) || "inherit"};
+            color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.color) || "inherit"};
         `;
 }};
 `;
@@ -188,7 +188,8 @@ const Text = (_a) => {
 };
 
 const HeadingContainer = styled.h1 `
-    ${({ variant, theme }) => {
+    ${(_a) => {
+    var { variant, theme } = _a, props = __rest(_a, ["variant", "theme"]);
     const { media, heading } = theme;
     const { tinyMobileUp, largeMobileUp, superLargeDesktopUp } = media;
     const headingStyles = (heading === null || heading === void 0 ? void 0 : heading[variant]) || {};
@@ -198,31 +199,34 @@ const HeadingContainer = styled.h1 `
                 font-size: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontSize};
                 font-weight: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontWeight};
                 line-height: ${mobile === null || mobile === void 0 ? void 0 : mobile.lineHeight};
-                color: ${mobile === null || mobile === void 0 ? void 0 : mobile.color};
+                color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (mobile === null || mobile === void 0 ? void 0 : mobile.color)};
                 margin: ${mobile === null || mobile === void 0 ? void 0 : mobile.margin};
+                font-family: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontFamily};
             }
             ${largeMobileUp} {
                 font-size: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontSize};
                 font-weight: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontWeight};
                 line-height: ${tablet === null || tablet === void 0 ? void 0 : tablet.lineHeight};
-                color: ${tablet === null || tablet === void 0 ? void 0 : tablet.color};
+                color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (tablet === null || tablet === void 0 ? void 0 : tablet.color)};
                 margin: ${tablet === null || tablet === void 0 ? void 0 : tablet.margin};
+                font-family: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontFamily};
             }
             ${superLargeDesktopUp} {
                 font-size: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontSize};
                 font-weight: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontWeight};
                 line-height: ${desktop === null || desktop === void 0 ? void 0 : desktop.lineHeight};
-                color: ${desktop === null || desktop === void 0 ? void 0 : desktop.color};
+                color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (desktop === null || desktop === void 0 ? void 0 : desktop.color)};
                 margin: ${desktop === null || desktop === void 0 ? void 0 : desktop.margin};
+                font-family: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontFamily};
             }
         `;
 }}
 `;
 
 const Heading = (_a) => {
-    var { variant = "primary", as = "h1", children } = _a, props = __rest(_a, ["variant", "as", "children"]);
-    const headingVariant = `Heading-${variant}-${as}`;
-    return (jsx(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: headingVariant, as: as }, props, { children: children })));
+    var { variant = "primary", asTag = "h1", vColor, children } = _a, props = __rest(_a, ["variant", "asTag", "vColor", "children"]);
+    const headingVariant = `Heading-${variant}-${asTag}`;
+    return (jsx(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: headingVariant, vColor: vColor, as: asTag }, props, { children: children })));
 };
 
 const StyledSvg = styled.svg `
@@ -499,24 +503,6 @@ 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 &&
@@ -536,12 +522,12 @@ const WrapperBackground = styled.div `
             "rgba(12, 178, 224, 0.7) 100%"}
                     );
 
-                    opacity: 0;
+                    opacity: 1;
                     transition: opacity 0.7s ease;
                     pointer-events: none;
                 }
                 &:hover::before {
-                    opacity: 1;
+                    opacity: 0;
                 }
             `}
         `;
@@ -559,6 +545,7 @@ const WrapperHeader = styled.div `
     const thisTheme = ((_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.wrapperHeader) || {};
     return css `
             align-items: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.alignItems) || "center"};
+            padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding};
         `;
 }}
 `;
@@ -618,25 +605,17 @@ 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, _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,
-        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
+        asTag: (_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.asTag
     });
 }) ``;
 const AtomTextTitle = styled(Text).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     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,
-        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
+        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
     });
 }) ``;
 const WrapperLineBottom = styled.div `
@@ -705,7 +684,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(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 &&
+    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 &&
                         (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 }))] })))] })] })) })));
 };
 
@@ -1235,6 +1214,7 @@ 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};
         `;
 }}
 `;