@manamerge/mana-atomic-ui 1.0.201 → 1.0.203

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 (18) hide show
  1. package/dist/index.d.ts +1 -2
  2. package/dist/index.js +14 -25
  3. package/dist/index.js.map +1 -1
  4. package/dist/themes/themes/davidWeb/fonts/Gilmer-Bold.woff2 +0 -0
  5. package/dist/themes/themes/davidWeb/fonts/Gilmer-Heavy.woff2 +0 -0
  6. package/dist/themes/themes/davidWeb/fonts/Gilmer-Light.woff2 +0 -0
  7. package/dist/themes/themes/davidWeb/fonts/Gilmer-Medium.woff2 +0 -0
  8. package/dist/themes/themes/davidWeb/fonts/Gilmer-Regular.woff2 +0 -0
  9. package/dist/themes/themes/davidWeb/fonts/Springwood/SpringwoodBrush-Italic.woff2 +0 -0
  10. package/dist/themes/themes/davidWeb/fonts/Springwood/SpringwoodBrush-Regular.woff2 +0 -0
  11. package/dist/themes/themes/manamerge/atoms/icon.ts +49 -13
  12. package/dist/themes/themes/manamerge/molecules/footer.ts +5 -1
  13. package/dist/types/components/Atoms/Icon/Icon.css.d.ts +1 -2
  14. package/dist/types/components/Atoms/Icon/Icon.d.ts +1 -2
  15. package/dist/types/themes/ManamergeTheme.d.ts +41 -4
  16. package/dist/types/themes/manamerge/atoms/icon.d.ts +37 -4
  17. package/dist/types/themes/manamerge/molecules/footer.d.ts +4 -0
  18. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -38,10 +38,9 @@ interface IconTypes {
38
38
  variant?: string;
39
39
  svg: FunctionComponent<SVGProps<SVGSVGElement>>;
40
40
  size?: string;
41
- color?: string;
42
41
  fill?: string;
43
42
  stroke?: string;
44
- hoverColor?: string;
43
+ opacity?: string;
45
44
  hoverFill?: string;
46
45
  hoverStroke?: string;
47
46
  hoverOpacity?: string;
package/dist/index.js CHANGED
@@ -243,32 +243,31 @@ const Heading = (_a) => {
243
243
 
244
244
  const StyledSvg = styled.svg `
245
245
  ${(_a) => {
246
- var _b, _c, _d, _e;
246
+ var _b, _c, _d;
247
247
  var { variant, theme } = _a, props = __rest(_a, ["variant", "theme"]);
248
248
  const iconStyles = (theme === null || theme === void 0 ? void 0 : theme.icon[variant]) || {};
249
249
  return css `
250
250
  width: ${(props === null || props === void 0 ? void 0 : props.size) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
251
251
  height: ${(props === null || props === void 0 ? void 0 : props.size) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
252
- color: ${(props === null || props === void 0 ? void 0 : props.color) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.color)};
253
252
  fill: ${(props === null || props === void 0 ? void 0 : props.fill) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.fill)};
254
253
  stroke: ${(props === null || props === void 0 ? void 0 : props.stroke) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.stroke)};
254
+ opacity: ${(props === null || props === void 0 ? void 0 : props.opacity) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.opacity)};
255
255
  &:hover {
256
- color: ${(props === null || props === void 0 ? void 0 : props.hoverColor) || ((_b = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _b === void 0 ? void 0 : _b.color)};
257
- fill: ${(props === null || props === void 0 ? void 0 : props.hoverFill) || ((_c = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _c === void 0 ? void 0 : _c.fill)};
258
- stroke: ${(props === null || props === void 0 ? void 0 : props.hoverStroke) || ((_d = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _d === void 0 ? void 0 : _d.stroke)};
259
- opacity: ${(props === null || props === void 0 ? void 0 : props.hoverOpacity) || ((_e = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _e === void 0 ? void 0 : _e.opacity)};
256
+ fill: ${(props === null || props === void 0 ? void 0 : props.hoverFill) || ((_b = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _b === void 0 ? void 0 : _b.fill)};
257
+ stroke: ${(props === null || props === void 0 ? void 0 : props.hoverStroke) || ((_c = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _c === void 0 ? void 0 : _c.stroke)};
258
+ opacity: ${(props === null || props === void 0 ? void 0 : props.hoverOpacity) || ((_d = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _d === void 0 ? void 0 : _d.opacity)};
260
259
  }
261
260
  `;
262
261
  }}
263
262
  `;
264
263
 
265
264
  const Icon = (_a) => {
266
- var { variant = "md", svg: SvgIcon, size, color, fill, stroke, hoverColor, hoverFill, hoverStroke, hoverOpacity, onClick, onKeyDown, tabIndex, role } = _a, props = __rest(_a, ["variant", "svg", "size", "color", "fill", "stroke", "hoverColor", "hoverFill", "hoverStroke", "hoverOpacity", "onClick", "onKeyDown", "tabIndex", "role"]);
265
+ var { variant = "md", svg: SvgIcon, size, fill, stroke, opacity, hoverFill, hoverStroke, hoverOpacity, onClick, onKeyDown, tabIndex, role } = _a, props = __rest(_a, ["variant", "svg", "size", "fill", "stroke", "opacity", "hoverFill", "hoverStroke", "hoverOpacity", "onClick", "onKeyDown", "tabIndex", "role"]);
267
266
  if (!SvgIcon) {
268
267
  console.error("No SVG provided to the Icon component.");
269
268
  return null;
270
269
  }
271
- return (jsx(StyledSvg, Object.assign({ className: classNames("Icon-" + variant), variant: "Icon-" + variant, as: SvgIcon, size: size, color: color, fill: fill, stroke: stroke, hoverColor: hoverColor, hoverFill: hoverFill, hoverStroke: hoverStroke, hoverOpacity: hoverOpacity, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex, role: role }, props)));
270
+ return (jsx(StyledSvg, Object.assign({ className: classNames("Icon-" + variant), variant: "Icon-" + variant, as: SvgIcon, size: size, fill: fill, stroke: stroke, opacity: opacity, hoverFill: hoverFill, hoverStroke: hoverStroke, hoverOpacity: hoverOpacity, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex, role: role }, props)));
272
271
  };
273
272
 
274
273
  const StyledLink$2 = styled.a `
@@ -922,8 +921,8 @@ const IconFooter = styled(Icon).attrs(({ theme, moleculeVariant }) => {
922
921
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
923
922
  return ({
924
923
  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,
925
- 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,
926
- 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
924
+ fill: (_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.fill,
925
+ stroke: (_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.stroke
927
926
  });
928
927
  }) ``;
929
928
  const StyledGradient = styled(Gradient).attrs(({ theme, moleculeVariant }) => {
@@ -939,27 +938,17 @@ const StyledLink = styled(Link).attrs(({ theme, moleculeVariant }) => {
939
938
  });
940
939
  }) `
941
940
  ${({ theme, moleculeVariant }) => {
942
- var _a, _b, _c, _d, _e, _f;
941
+ var _a, _b;
943
942
  const themeFooter = (_a = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _a === void 0 ? void 0 : _a[moleculeVariant];
944
943
  const linksTheme = (themeFooter === null || themeFooter === void 0 ? void 0 : themeFooter.links) || {};
945
- const iconsTheme = (themeFooter === null || themeFooter === void 0 ? void 0 : themeFooter.icons) || {};
946
- const iconCustomVariant = (iconsTheme === null || iconsTheme === void 0 ? void 0 : iconsTheme.variant) || {};
947
- const iconsClientThemeVariant = (theme === null || theme === void 0 ? void 0 : theme.icon["Icon-" + iconCustomVariant]) || {};
944
+ const iconsTheme = ((_b = themeFooter === null || themeFooter === void 0 ? void 0 : themeFooter.icons) === null || _b === void 0 ? void 0 : _b.hover) || {};
948
945
  return css `
949
946
  color: ${linksTheme === null || linksTheme === void 0 ? void 0 : linksTheme.color};
950
947
  display: flex;
951
948
  align-items: center;
952
- &:hover {
953
- color: ${(_b = linksTheme === null || linksTheme === void 0 ? void 0 : linksTheme.hover) === null || _b === void 0 ? void 0 : _b.color};
954
- transition: 0.2s;
955
- text-decoration: none;
956
- svg {
957
- transition: 0.2s;
958
- fill: ${((_c = iconsTheme.hover) === null || _c === void 0 ? void 0 : _c.color) ||
959
- ((_d = iconsClientThemeVariant === null || iconsClientThemeVariant === void 0 ? void 0 : iconsClientThemeVariant.hover) === null || _d === void 0 ? void 0 : _d.color)};
960
- stroke: ${((_e = iconsTheme.hover) === null || _e === void 0 ? void 0 : _e.stroke) ||
961
- ((_f = iconsClientThemeVariant === null || iconsClientThemeVariant === void 0 ? void 0 : iconsClientThemeVariant.hover) === null || _f === void 0 ? void 0 : _f.stroke)};
962
- }
949
+ &:hover ${IconFooter} {
950
+ fill: ${iconsTheme === null || iconsTheme === void 0 ? void 0 : iconsTheme.fill};
951
+ stroke: ${iconsTheme === null || iconsTheme === void 0 ? void 0 : iconsTheme.stroke};
963
952
  }
964
953
  `;
965
954
  }}