@manamerge/mana-atomic-ui 1.0.171 → 1.0.172

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 +57 -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,10 @@ 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;
705
709
 
706
710
  ${({ theme, moleculeVariant }) => {
707
711
  var _a;
@@ -711,12 +715,13 @@ const NavBar = styled.nav `
711
715
  ${largeMobileUp} {
712
716
  align-items: center;
713
717
  }
718
+ /* background-color: rgba(0, 0, 0, 0.5); */
714
719
  gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
715
- background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
720
+ background: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background};
721
+ height: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.height};
722
+ padding: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.padding};
716
723
  `;
717
724
  }}
718
-
719
- padding: 1rem;
720
725
  `;
721
726
  const BurgerWrapper = styled.div `
722
727
  flex-direction: column;
@@ -739,15 +744,14 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
739
744
  cursor: pointer;
740
745
  color: ${(atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.color) || "#0f0"};
741
746
  &: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"};
747
+ color: ${(_c = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _c === void 0 ? void 0 : _c.color};
748
+ outline: ${(_d = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _d === void 0 ? void 0 : _d.outline};
749
+ outline-offset: ${(_e = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _e === void 0 ? void 0 : _e.outlineOffset};
750
+ box-shadow: ${(_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow};
747
751
  }
748
752
  &: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"};
753
+ color: ${(_g = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _g === void 0 ? void 0 : _g.color};
754
+ transition: ${(_h = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _h === void 0 ? void 0 : _h.color};
751
755
  }
752
756
  `;
753
757
  }}
@@ -755,6 +759,7 @@ const AtomIcon$3 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
755
759
  const NavLinks = styled.div `
756
760
  flex-direction: column;
757
761
  text-align: right;
762
+ align-items: flex-end;
758
763
  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
759
764
  width: 100%;
760
765
 
@@ -764,10 +769,10 @@ const NavLinks = styled.div `
764
769
  const { largeMobileUp } = theme.media;
765
770
  return css `
766
771
  ${largeMobileUp} {
767
- margin: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin) || "none"};
772
+ margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
768
773
  display: flex;
769
774
  flex-direction: row;
770
- gap: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "none"};
775
+ gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};
771
776
  justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "space-around"};
772
777
  }
773
778
  `;
@@ -779,24 +784,51 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
779
784
  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
785
  });
781
786
  }) `
787
+ position: relative;
788
+
782
789
  ${({ theme, moleculeVariant, currentPath }) => {
783
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
790
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
784
791
  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) || {};
792
+ const { largeMobileUp } = theme.media;
785
793
  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"};
794
+ width: fit-content;
789
795
  font-weight: ${currentPath
790
- ? ((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.fontWeight) || "900"
796
+ ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
791
797
  : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.fontWeight) || "700"};
798
+ color: ${currentPath
799
+ ? (_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.color
800
+ : linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color};
801
+
802
+ /* ---------- CENTER EXPANDING UNDERLINE ---------- */
803
+ &::after {
804
+ content: "";
805
+ position: absolute;
806
+ left: 0;
807
+ bottom: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _e === void 0 ? void 0 : _e.bottom) || "2px"};
808
+ width: 100%;
809
+ height: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _f === void 0 ? void 0 : _f.height) || "2px"};
810
+ background: ${(_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _g === void 0 ? void 0 : _g.background};
811
+ transform: scaleX(${currentPath ? 1 : 0});
812
+ ${largeMobileUp} {
813
+ transform-origin: ${(_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _h === void 0 ? void 0 : _h.transformOriginMobileUp};
814
+ }
815
+ transform-origin: ${(_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _j === void 0 ? void 0 : _j.transformOriginMobileDown};
816
+ transition: transform ${(_k = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _k === void 0 ? void 0 : _k.transition};
817
+ }
818
+
819
+ &:hover::after {
820
+ transform: scaleX(1);
821
+ }
822
+
792
823
  &: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"};
824
+ color: ${(_l = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _l === void 0 ? void 0 : _l.color};
825
+ box-shadow: ${(_m = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _m === void 0 ? void 0 : _m.boxShadow};
826
+ transform: ${(_o = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _o === void 0 ? void 0 : _o.transform};
796
827
  }
797
828
  &: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"};
829
+ color: ${(_p = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _p === void 0 ? void 0 : _p.color};
830
+ transition: ${(_q = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _q === void 0 ? void 0 : _q.transition};
831
+ text-decoration: none;
800
832
  }
801
833
  `;
802
834
  }};
@@ -848,11 +880,9 @@ const FooterNav = styled.nav `
848
880
  `;
849
881
  // Icon children
850
882
  const IconFooter = styled(Icon).attrs(({ theme, moleculeVariant }) => {
851
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
883
+ var _a, _b, _c;
852
884
  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
885
+ 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
886
  });
857
887
  }) ``;
858
888
  const StyledGradient = styled(Gradient).attrs(({ theme, moleculeVariant }) => {