@manamerge/mana-atomic-ui 1.0.163 → 1.0.165

package/dist/themes/themes/manamerge/molecules/navigation.ts

@@ -1,14 +1,17 @@
+import colors from "../miscellaneous/colorpalette";
+
 const navigation = {
     "Navigation-primary": {
-        gap: "30px",
+        gap: "50px",
         background: `linear-gradient(
       180deg,
       rgba(59, 60, 63, 0.6) 0%,
       rgba(38, 38, 38, 0.8) 43.75%
     ),
     rgba(59, 60, 63, 0.8);`,
+        padding: "10px",
         atomIcon: {
-            variant: "medium",
+            variant: "md",
             color: "white",
             focus: {
                 outline: "2px solid darkblue",
@@ -23,25 +26,31 @@ const navigation = {
         },
         atomLink: {
             variant: "primary-bold",
-            color: "#ccc",
+            color: colors.one.b,
             fontWeight: "700",
             currentPath: {
-                color: "green",
-                fontWeight: "900"
+                color: colors.three.a,
+                fontWeight: "700"
             },
             focus: {
-                color: "gold",
-                boxShadow: "2px 2px 5px yellow"
+                color: colors.three.a
             },
             hover: {
-                color: "#f00",
+                color: colors.three.a,
                 transition: "color 0.3s ease"
+            },
+            underline: {
+                bottom: "2px",
+                height: "2px",
+                background: colors.three.a,
+                transformOrigin: "center",
+                transition: "0.35s cubic-bezier(.22,1,.36,1)"
             }
         },
         navLinks: {
             responsive: {
                 largeMobileUp: {
-                    gap: "30px",
+                    gap: "50px",
                     justifyContent: "flex-start", // change here if you want the menu to aligned on the left/center/right
                     margin: "0 30px 0 0"
                 }

package/dist/types/components/Atoms/Icon/Icon.css.d.ts

@@ -2,8 +2,11 @@
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, {
     size?: string | undefined;
     color?: string | undefined;
+    fill?: string | undefined;
     stroke?: string | undefined;
     hoverColor?: string | undefined;
+    hoverFill?: string | undefined;
     hoverStroke?: string | undefined;
+    hoverOpacity?: string | undefined;
     variant: string;
 }>> & string;

package/dist/types/components/Atoms/Icon/Icon.d.ts

@@ -2,11 +2,14 @@ import React, { FunctionComponent, SVGProps } from "react";
 export interface IconTypes {
     variant?: string;
     svg: FunctionComponent<SVGProps<SVGSVGElement>>;
-    color?: string;
     size?: string;
+    color?: string;
+    fill?: string;
     stroke?: string;
     hoverColor?: string;
+    hoverFill?: string;
     hoverStroke?: string;
+    hoverOpacity?: string;
     onClick?: () => void;
     onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
     tabIndex?: number;

package/dist/types/components/Atoms/Icon/Icon.stories.d.ts

@@ -4,6 +4,12 @@ declare const meta: Meta<IconTypes>;
 export default meta;
 type Story = StoryObj<IconTypes>;
 export declare const Combos: Story;
+export declare const Custom: Story;
+export declare const ExtraSmall: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const ExtraExtraLarge: Story;
+export declare const ExtraExtraExtraLarge: Story;
+export declare const ExtraExtraExtraExtraLarge: Story;

package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.stories copy.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CardSimpleRenderTypes } from "./CardSimpleRender";
+declare const meta: Meta<CardSimpleRenderTypes>;
+export default meta;
+type Story = StoryObj<CardSimpleRenderTypes>;
+export declare const Default: Story;
+export declare const Hover: Story;
+export declare const Flex: Story;
+export declare const FlexExtra: Story;
+export declare const Flex2: Story;
+export declare const Isolado: Story;

package/dist/types/components/Molecules/Footer/Footer.css.d.ts

@@ -8,6 +8,9 @@ export declare const FooterNav: import("styled-components/dist/types").IStyledCo
 export declare const IconFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Icon/Icon").IconTypes, import("../../Atoms/Icon/Icon").IconTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Icon/Icon").IconTypes>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGradient: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Gradient/Gradient").GradientTypes, import("../../Atoms/Gradient/Gradient").GradientTypes>, {
+    moleculeVariant: string;
+}>, never>> & string & Omit<import("react").FC<import("../../Atoms/Gradient/Gradient").GradientTypes>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Link/Link").LinkTypes, import("../../Atoms/Link/Link").LinkTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Link/Link").LinkTypes>, keyof import("react").Component<any, {}, any>>;

package/dist/types/components/Molecules/Header/Header.css.d.ts

@@ -16,6 +16,9 @@ export declare const AtomIconTop: import("styled-components/dist/types").IStyled
 export declare const AtomIconDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Icon/Icon").IconTypes, import("../../Atoms/Icon/Icon").IconTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Icon/Icon").IconTypes>, keyof import("react").Component<any, {}, any>>;
+export declare const AtomTextBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Text/Text").TextTypes, import("../../Atoms/Text/Text").TextTypes>, {
+    moleculeVariant: string;
+}>, never>> & string & Omit<import("react").FC<import("../../Atoms/Text/Text").TextTypes>, keyof import("react").Component<any, {}, any>>;
 export declare const AtomHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../Atoms/Heading/Heading").HeadingTypes, import("../../Atoms/Heading/Heading").HeadingTypes>, {
     moleculeVariant: string;
 }>, never>> & string & Omit<import("react").FC<import("../../Atoms/Heading/Heading").HeadingTypes>, keyof import("react").Component<any, {}, any>>;

package/dist/types/components/Molecules/Navigation/Navigation.d.ts

@@ -8,6 +8,5 @@ export interface NavigationTypes {
         to: string;
     }[];
     onLogoClick?: () => void;
-    onTabClick: (label: string) => void;
 }
 export declare const Navigation: React.FC<NavigationTypes>;

package/dist/types/themes/ManamergeTheme.d.ts

@@ -5,6 +5,7 @@ export declare const ManamergeTheme: {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
+            fontFamily: string;
             color: string;
             hover: {
                 color: string;
@@ -17,6 +18,7 @@ export declare const ManamergeTheme: {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
+            fontFamily: string;
             color: string;
             hover: {
                 color: string;
@@ -29,6 +31,7 @@ export declare const ManamergeTheme: {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
+            fontFamily: string;
             color: string;
             hover: {
                 color: string;
@@ -41,6 +44,7 @@ export declare const ManamergeTheme: {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
+            fontFamily: string;
             color: string;
             hover: {
                 color: string;
@@ -53,18 +57,7 @@ export declare const ManamergeTheme: {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
-            color: string;
-            hover: {
-                color: string;
-            };
-            disabled: {
-                color: string;
-            };
-        };
-        "Link-secondary-light": {
-            fontSize: string;
-            lineHeight: string;
-            fontWeight: number;
+            fontFamily: string;
             color: string;
             hover: {
                 color: string;
@@ -77,6 +70,7 @@ export declare const ManamergeTheme: {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
+            fontFamily: string;
             color: string;
             hover: {
                 color: string;
@@ -85,34 +79,12 @@ export declare const ManamergeTheme: {
                 color: string;
             };
         };
-        "Link-secondary-medium": {
-            fontSize: string;
-            lineHeight: string;
-            fontWeight: number;
-            color: string;
-            hover: {
-                color: string;
-            };
-            disabled: {
-                color: string;
-            };
-        };
-        "Link-secondary-bold": {
-            fontSize: string;
-            lineHeight: string;
-            fontWeight: number;
-            color: string;
-            hover: {
-                color: string;
-            };
-            disabled: {
-                color: string;
-            };
-        };
-        "Link-secondary-heavy": {
+        "Link-secondary-italic": {
             fontSize: string;
             lineHeight: string;
             fontWeight: number;
+            fontFamily: string;
+            fontStyle: string;
             color: string;
             hover: {
                 color: string;
@@ -600,31 +572,59 @@ export declare const ManamergeTheme: {
         };
     };
     icon: {
-        "Icon-small": {
+        "Icon-xs": {
             size: string;
             color: string;
+            fill: string;
             stroke: string;
             hover: {
-                stroke: string;
+                color: string;
                 fill: string;
+                stroke: string;
             };
         };
-        "Icon-medium": {
+        "Icon-sm": {
             size: string;
-            color: string;
+            fill: string;
+            stroke: string;
+        };
+        "Icon-md": {
+            size: string;
+            fill: string;
+            stroke: string;
+        };
+        "Icon-lg": {
+            size: string;
+            fill: string;
+            stroke: string;
+        };
+        "Icon-xl": {
+            size: string;
+            fill: string;
+            stroke: string;
+        };
+        "Icon-xxl": {
+            size: string;
+            fill: string;
+            stroke: string;
+        };
+        "Icon-xxxl": {
+            size: string;
+            fill: string;
             stroke: string;
             hover: {
-                stroke: string;
-                color: string;
+                opacity: string;
             };
         };
-        "Icon-large": {
+        "Icon-xxxxl": {
             size: string;
             color: string;
+            fill: string;
             stroke: string;
             hover: {
-                stroke: string;
+                color: string;
                 fill: string;
+                stroke: string;
             };
         };
     };
@@ -985,7 +985,6 @@ export declare const ManamergeTheme: {
     header: {
         "Header-primary": {
             height: string;
-            backgroundColor: string;
             justifyContent: string;
             bannerColor: string;
             wrapperHeader: {
@@ -1009,8 +1008,13 @@ export declare const ManamergeTheme: {
                     stroke: string;
                 };
             };
+            atomTextBanner: {
+                variant: string;
+                color: string;
+            };
             atomHeading: {
                 variant: string;
+                asTag: string;
             };
             atomTextTitle: {
                 variant: string;
@@ -1051,6 +1055,10 @@ export declare const ManamergeTheme: {
                     stroke: string;
                 };
             };
+            atomTextBanner: {
+                variant: string;
+                color: string;
+            };
             atomHeading: {
                 variant: string;
                 asTag: string;
@@ -1073,6 +1081,7 @@ export declare const ManamergeTheme: {
         "Navigation-primary": {
             gap: string;
             background: string;
+            padding: string;
             atomIcon: {
                 variant: string;
                 color: string;
@@ -1097,12 +1106,18 @@ export declare const ManamergeTheme: {
                 };
                 focus: {
                     color: string;
-                    boxShadow: string;
                 };
                 hover: {
                     color: string;
                     transition: string;
                 };
+                underline: {
+                    bottom: string;
+                    height: string;
+                    background: string;
+                    transformOrigin: string;
+                    transition: string;
+                };
             };
             navLinks: {
                 responsive: {
@@ -1122,10 +1137,9 @@ export declare const ManamergeTheme: {
             gap: string;
             text: {
                 variant: string;
+            };
+            gradient: {
                 color: string;
-                hover: {
-                    color: string;
-                };
             };
             links: {
                 variant: string;
@@ -1355,6 +1369,37 @@ export declare const ManamergeTheme: {
         xxxl: string;
         xxxxl: string;
     };
+    colors: {
+        transparent: string;
+        one: {
+            a: string;
+            b: string;
+            c: string;
+            d: string;
+            e: string;
+            f: string;
+            g: string;
+            h: string;
+            i: string;
+        };
+        two: {
+            a: string;
+            b: string;
+            c: string;
+            d: string;
+            e: string;
+            f: string;
+        };
+        three: {
+            a: string;
+            b: string;
+            c: string;
+        };
+        four: {
+            a: string;
+            b: string;
+        };
+    };
     pages: {
         vod: {
             top: {

package/dist/types/themes/davidWeb/miscellaneous/colorpalette.d.ts

@@ -1,4 +1,5 @@
 declare const colors: {
+    transparent: string;
     one: {
         a: string;
         b: string;

package/dist/types/themes/manamerge/atoms/icon.d.ts

@@ -1,29 +1,57 @@
 declare const icon: {
-    "Icon-small": {
+    "Icon-xs": {
         size: string;
         color: string;
+        fill: string;
         stroke: string;
         hover: {
-            stroke: string;
+            color: string;
             fill: string;
+            stroke: string;
         };
     };
-    "Icon-medium": {
+    "Icon-sm": {
         size: string;
-        color: string;
+        fill: string;
+        stroke: string;
+    };
+    "Icon-md": {
+        size: string;
+        fill: string;
+        stroke: string;
+    };
+    "Icon-lg": {
+        size: string;
+        fill: string;
+        stroke: string;
+    };
+    "Icon-xl": {
+        size: string;
+        fill: string;
+        stroke: string;
+    };
+    "Icon-xxl": {
+        size: string;
+        fill: string;
+        stroke: string;
+    };
+    "Icon-xxxl": {
+        size: string;
+        fill: string;
         stroke: string;
         hover: {
-            stroke: string;
-            color: string;
+            opacity: string;
         };
     };
-    "Icon-large": {
+    "Icon-xxxxl": {
         size: string;
         color: string;
+        fill: string;
         stroke: string;
         hover: {
-            stroke: string;
+            color: string;
             fill: string;
+            stroke: string;
         };
     };
 };

package/dist/types/themes/manamerge/atoms/link.d.ts

@@ -3,6 +3,7 @@ declare const Link: {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
+        fontFamily: string;
         color: string;
         hover: {
             color: string;
@@ -15,6 +16,7 @@ declare const Link: {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
+        fontFamily: string;
         color: string;
         hover: {
             color: string;
@@ -27,6 +29,7 @@ declare const Link: {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
+        fontFamily: string;
         color: string;
         hover: {
             color: string;
@@ -39,6 +42,7 @@ declare const Link: {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
+        fontFamily: string;
         color: string;
         hover: {
             color: string;
@@ -51,18 +55,7 @@ declare const Link: {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
-        color: string;
-        hover: {
-            color: string;
-        };
-        disabled: {
-            color: string;
-        };
-    };
-    "Link-secondary-light": {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: number;
+        fontFamily: string;
         color: string;
         hover: {
             color: string;
@@ -75,6 +68,7 @@ declare const Link: {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
+        fontFamily: string;
         color: string;
         hover: {
             color: string;
@@ -83,34 +77,12 @@ declare const Link: {
             color: string;
         };
     };
-    "Link-secondary-medium": {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: number;
-        color: string;
-        hover: {
-            color: string;
-        };
-        disabled: {
-            color: string;
-        };
-    };
-    "Link-secondary-bold": {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: number;
-        color: string;
-        hover: {
-            color: string;
-        };
-        disabled: {
-            color: string;
-        };
-    };
-    "Link-secondary-heavy": {
+    "Link-secondary-italic": {
         fontSize: string;
         lineHeight: string;
         fontWeight: number;
+        fontFamily: string;
+        fontStyle: string;
         color: string;
         hover: {
             color: string;

package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts

@@ -1,4 +1,5 @@
 declare const colors: {
+    transparent: string;
     one: {
         a: string;
         b: string;

package/dist/types/themes/manamerge/molecules/footer.d.ts

@@ -5,10 +5,9 @@ declare const footer: {
         gap: string;
         text: {
             variant: string;
+        };
+        gradient: {
             color: string;
-            hover: {
-                color: string;
-            };
         };
         links: {
             variant: string;

package/dist/types/themes/manamerge/molecules/header.d.ts

@@ -1,7 +1,6 @@
 declare const header: {
     "Header-primary": {
         height: string;
-        backgroundColor: string;
         justifyContent: string;
         bannerColor: string;
         wrapperHeader: {
@@ -25,8 +24,13 @@ declare const header: {
                 stroke: string;
             };
         };
+        atomTextBanner: {
+            variant: string;
+            color: string;
+        };
         atomHeading: {
             variant: string;
+            asTag: string;
         };
         atomTextTitle: {
             variant: string;
@@ -67,6 +71,10 @@ declare const header: {
                 stroke: string;
             };
         };
+        atomTextBanner: {
+            variant: string;
+            color: string;
+        };
         atomHeading: {
             variant: string;
             asTag: string;

package/dist/types/themes/manamerge/molecules/navigation.d.ts

@@ -2,6 +2,7 @@ declare const navigation: {
     "Navigation-primary": {
         gap: string;
         background: string;
+        padding: string;
         atomIcon: {
             variant: string;
             color: string;
@@ -26,12 +27,18 @@ declare const navigation: {
             };
             focus: {
                 color: string;
-                boxShadow: string;
             };
             hover: {
                 color: string;
                 transition: string;
             };
+            underline: {
+                bottom: string;
+                height: string;
+                background: string;
+                transformOrigin: string;
+                transition: string;
+            };
         };
         navLinks: {
             responsive: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@manamerge/mana-atomic-ui",
-    "version": "1.0.163",
+    "version": "1.0.165",
     "description": "Mana Merge design system",
     "license": "ISC",
     "author": "MM",