@manamerge/mana-atomic-ui 1.0.171 → 1.0.173

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.
Files changed (17) hide show
  1. package/dist/index.js +58 -27
  2. package/dist/index.js.map +1 -1
  3. package/dist/themes/themes/davidWeb/atoms/text.ts +1 -1
  4. package/dist/themes/themes/manamerge/atoms/icon.ts +19 -19
  5. package/dist/themes/themes/manamerge/atoms/text.ts +1 -1
  6. package/dist/themes/themes/manamerge/fonts/Gilmer-Bold.woff2 +0 -0
  7. package/dist/themes/themes/manamerge/fonts/Gilmer-Heavy.woff2 +0 -0
  8. package/dist/themes/themes/manamerge/fonts/Gilmer-Light.woff2 +0 -0
  9. package/dist/themes/themes/manamerge/fonts/Gilmer-Medium.woff2 +0 -0
  10. package/dist/themes/themes/manamerge/fonts/Gilmer-Regular.woff2 +0 -0
  11. package/dist/themes/themes/manamerge/molecules/footer.ts +1 -5
  12. package/dist/themes/themes/manamerge/molecules/navigation.ts +23 -12
  13. package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.stories copy.d.ts +11 -0
  14. package/dist/types/themes/ManamergeTheme.d.ts +9 -3
  15. package/dist/types/themes/manamerge/molecules/footer.d.ts +0 -2
  16. package/dist/types/themes/manamerge/molecules/navigation.d.ts +9 -1
  17. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -526,7 +526,7 @@ const WrapperBackground = styled.div `
526
526
  );
527
527
 
528
528
  opacity: 1;
529
- transition: opacity 3s ease;
529
+ transition: opacity 0.7s ease;
530
530
  pointer-events: none;
531
531
  }
532
532
  &:hover::before {
@@ -702,6 +702,11 @@ const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon,
702
702
  const NavBar = styled.nav `
703
703
  display: flex;
704
704
  align-items: flex-start;
705
+ position: absolute;
706
+ width: auto;
707
+ right: 0;
708
+ left: 0;
709
+ z-index: 1;
705
710
 
706
711
  ${({ theme, moleculeVariant }) => {
707
712
  var _a;
@@ -711,12 +716,13 @@ const NavBar = styled.nav `
711
716
  ${largeMobileUp} {
712
717
  align-items: center;
713
718
  }
719
+ /* background-color: rgba(0, 0, 0, 0.5); */
714
720
  gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
715
- background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
721
+ background: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background};
722
+ height: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.height};
723
+ padding: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.padding};
716
724
  `;
717
725
  }}
718
-
719
- padding: 1rem;
720
726
  `;
721
727
  const BurgerWrapper = styled.div `
722
728
  flex-direction: column;
@@ -739,15 +745,14 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
739
745
  cursor: pointer;
740
746
  color: ${(atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.color) || "#0f0"};
741
747
  &:focus {
742
- color: ${((_c = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _c === void 0 ? void 0 : _c.color) || "gold"};
743
- outline: ${((_d = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _d === void 0 ? void 0 : _d.outline) || "none"};
744
- outline-offset: ${((_e = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _e === void 0 ? void 0 : _e.outlineOffset) ||
745
- "none"};
746
- box-shadow: ${((_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
748
+ color: ${(_c = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _c === void 0 ? void 0 : _c.color};
749
+ outline: ${(_d = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _d === void 0 ? void 0 : _d.outline};
750
+ outline-offset: ${(_e = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _e === void 0 ? void 0 : _e.outlineOffset};
751
+ box-shadow: ${(_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow};
747
752
  }
748
753
  &:hover {
749
- color: ${((_g = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _g === void 0 ? void 0 : _g.color) || "purple"};
750
- transition: ${((_h = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _h === void 0 ? void 0 : _h.color) || "none"};
754
+ color: ${(_g = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _g === void 0 ? void 0 : _g.color};
755
+ transition: ${(_h = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _h === void 0 ? void 0 : _h.color};
751
756
  }
752
757
  `;
753
758
  }}
@@ -755,6 +760,7 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
755
760
  const NavLinks = styled.div `
756
761
  flex-direction: column;
757
762
  text-align: right;
763
+ align-items: flex-end;
758
764
  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
759
765
  width: 100%;
760
766
 
@@ -764,10 +770,10 @@ const NavLinks = styled.div `
764
770
  const { largeMobileUp } = theme.media;
765
771
  return css `
766
772
  ${largeMobileUp} {
767
- margin: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin) || "none"};
773
+ margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
768
774
  display: flex;
769
775
  flex-direction: row;
770
- gap: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "none"};
776
+ gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};
771
777
  justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "space-around"};
772
778
  }
773
779
  `;
@@ -779,24 +785,51 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
779
785
  variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomLink) === null || _c === void 0 ? void 0 : _c.variant
780
786
  });
781
787
  }) `
788
+ position: relative;
789
+
782
790
  ${({ theme, moleculeVariant, currentPath }) => {
783
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
791
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
784
792
  const linkTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomLink) || {};
793
+ const { largeMobileUp } = theme.media;
785
794
  return css `
786
- color: ${currentPath
787
- ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.color) || "#f0f"
788
- : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color) || "#0f0"};
795
+ width: fit-content;
789
796
  font-weight: ${currentPath
790
- ? ((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.fontWeight) || "900"
797
+ ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
791
798
  : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.fontWeight) || "700"};
799
+ color: ${currentPath
800
+ ? (_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.color
801
+ : linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color};
802
+
803
+ /* ---------- CENTER EXPANDING UNDERLINE ---------- */
804
+ &::after {
805
+ content: "";
806
+ position: absolute;
807
+ left: 0;
808
+ bottom: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _e === void 0 ? void 0 : _e.bottom) || "2px"};
809
+ width: 100%;
810
+ height: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _f === void 0 ? void 0 : _f.height) || "2px"};
811
+ background: ${(_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _g === void 0 ? void 0 : _g.background};
812
+ transform: scaleX(${currentPath ? 1 : 0});
813
+ ${largeMobileUp} {
814
+ transform-origin: ${(_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _h === void 0 ? void 0 : _h.transformOriginMobileUp};
815
+ }
816
+ transform-origin: ${(_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _j === void 0 ? void 0 : _j.transformOriginMobileDown};
817
+ transition: transform ${(_k = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _k === void 0 ? void 0 : _k.transition};
818
+ }
819
+
820
+ &:hover::after {
821
+ transform: scaleX(1);
822
+ }
823
+
792
824
  &:focus {
793
- color: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _e === void 0 ? void 0 : _e.color) || "gold"};
794
- box-shadow: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
795
- transform: ${((_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _g === void 0 ? void 0 : _g.transform) || "none"};
825
+ color: ${(_l = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _l === void 0 ? void 0 : _l.color};
826
+ box-shadow: ${(_m = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _m === void 0 ? void 0 : _m.boxShadow};
827
+ transform: ${(_o = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _o === void 0 ? void 0 : _o.transform};
796
828
  }
797
829
  &:hover {
798
- color: ${((_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _h === void 0 ? void 0 : _h.color) || "purple"};
799
- transition: ${((_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _j === void 0 ? void 0 : _j.transition) || "none"};
830
+ color: ${(_p = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _p === void 0 ? void 0 : _p.color};
831
+ transition: ${(_q = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _q === void 0 ? void 0 : _q.transition};
832
+ text-decoration: none;
800
833
  }
801
834
  `;
802
835
  }};
@@ -848,11 +881,9 @@ const FooterNav = styled.nav `
848
881
  `;
849
882
  // Icon children
850
883
  const IconFooter = styled(Icon).attrs(({ theme, moleculeVariant }) => {
851
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
884
+ var _a, _b, _c;
852
885
  return ({
853
- variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icons) === null || _c === void 0 ? void 0 : _c.variant,
854
- stroke: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.icons) === null || _f === void 0 ? void 0 : _f.stroke,
855
- fill: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.icons) === null || _j === void 0 ? void 0 : _j.fill
886
+ variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icons) === null || _c === void 0 ? void 0 : _c.variant
856
887
  });
857
888
  }) ``;
858
889
  const StyledGradient = styled(Gradient).attrs(({ theme, moleculeVariant }) => {