@manamerge/mana-atomic-ui 1.0.21 → 1.0.22

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 (57) hide show
  1. package/dist/index.d.ts +6 -38
  2. package/dist/index.js +90 -129
  3. package/dist/index.js.map +1 -1
  4. package/dist/themes/themes/Manamerge.ts +648 -0
  5. package/dist/themes/themes/ManamergeTheme.ts +0 -39
  6. package/dist/themes/themes/davidWeb.ts +648 -0
  7. package/dist/themes/themes/manamerge/atoms/button.ts +45 -43
  8. package/dist/themes/themes/manamerge/atoms/divider.ts +5 -3
  9. package/dist/themes/themes/manamerge/atoms/gradient.ts +7 -6
  10. package/dist/themes/themes/manamerge/atoms/heading.ts +164 -24
  11. package/dist/themes/themes/manamerge/atoms/link.ts +82 -34
  12. package/dist/themes/themes/manamerge/atoms/text.ts +46 -20
  13. package/dist/themes/themes/manamerge/fonts/Gilmer/Gilmer-Bold.woff2 +0 -0
  14. package/dist/themes/themes/manamerge/fonts/Gilmer/Gilmer-Heavy.woff2 +0 -0
  15. package/dist/themes/themes/manamerge/fonts/Gilmer/Gilmer-Light.woff2 +0 -0
  16. package/dist/themes/themes/manamerge/fonts/Gilmer/Gilmer-Medium.woff2 +0 -0
  17. package/dist/themes/themes/manamerge/fonts/Gilmer/Gilmer-Regular.woff2 +0 -0
  18. package/dist/themes/themes/manamerge/fonts/Springwood/SpringwoodBrush-Italic.woff2 +0 -0
  19. package/dist/themes/themes/manamerge/fonts/Springwood/SpringwoodBrush-Regular.woff2 +0 -0
  20. package/dist/themes/themes/manamerge/fonts/index.js +10 -7
  21. package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +38 -0
  22. package/dist/themes/themes/manamerge/miscellaneous/fontsizes.ts +13 -0
  23. package/dist/themes/themes/manamerge/molecules/accordion.ts +2 -2
  24. package/dist/themes/themes/manamerge/molecules/breakerTape.ts +1 -1
  25. package/dist/themes/themes/manamerge/molecules/cardBanner.ts +7 -6
  26. package/dist/themes/themes/manamerge/molecules/cardSimpleRender.ts +2 -2
  27. package/dist/themes/themes/manamerge/molecules/cardTeaser.ts +3 -3
  28. package/dist/themes/themes/manamerge/molecules/footer.ts +2 -2
  29. package/dist/themes/themes/manamerge/molecules/header.ts +6 -14
  30. package/dist/themes/themes/manamerge/molecules/navigation.ts +1 -1
  31. package/dist/types/components/Atoms/Button/Button.css.d.ts +1 -28
  32. package/dist/types/components/Atoms/Button/Button.d.ts +0 -23
  33. package/dist/types/components/Atoms/Button/Button.stories.d.ts +1 -2
  34. package/dist/types/components/Atoms/CDNImage/blurhash.worker.d.ts +1 -0
  35. package/dist/types/components/Atoms/CDNImage/blurhashWorkerWrapper.d.ts +1 -0
  36. package/dist/types/components/Atoms/Heading/Heading.d.ts +1 -11
  37. package/dist/types/components/Atoms/Link/Link.d.ts +1 -5
  38. package/dist/types/components/Atoms/Text/Text.d.ts +4 -0
  39. package/dist/types/components/Molecules/CardBanner/CardBanner.css.d.ts +0 -3
  40. package/dist/types/components/Molecules/Header/Header.css.d.ts +0 -6
  41. package/dist/types/themes/Manamerge.d.ts +1442 -0
  42. package/dist/types/themes/ManamergeTheme.d.ts +466 -172
  43. package/dist/types/themes/davidWeb.d.ts +1442 -0
  44. package/dist/types/themes/manamerge/atoms/button.d.ts +19 -21
  45. package/dist/types/themes/manamerge/atoms/divider.d.ts +3 -3
  46. package/dist/types/themes/manamerge/atoms/gradient.d.ts +6 -6
  47. package/dist/types/themes/manamerge/atoms/heading.d.ts +162 -24
  48. package/dist/types/themes/manamerge/atoms/link.d.ts +75 -30
  49. package/dist/types/themes/manamerge/atoms/text.d.ts +37 -15
  50. package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +36 -0
  51. package/dist/types/themes/manamerge/miscellaneous/fontsizes.d.ts +12 -0
  52. package/dist/types/themes/manamerge/molecules/cardBanner.d.ts +2 -3
  53. package/dist/types/themes/manamerge/molecules/header.d.ts +0 -8
  54. package/dist/web-worker-0.js +21 -0
  55. package/dist/workers/workers/blurhash.worker.ts +8 -0
  56. package/package.json +1 -1
  57. package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.stories copy.d.ts +0 -11
package/dist/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import React, { ReactNode, FunctionComponent, SVGProps, AnchorHTMLAttributes, ElementType } from 'react';
2
+ import { PaletteColor } from 'themes/manamerge/miscellaneous/colorpalette';
3
+ import { FontSize } from 'themes/manamerge/miscellaneous/fontsizes';
2
4
 
3
5
  interface ButtonTypes {
4
6
  disabled?: boolean;
@@ -9,29 +11,6 @@ interface ButtonTypes {
9
11
  children?: ReactNode;
10
12
  onClick?: React.MouseEventHandler<HTMLElement>;
11
13
  type?: "button" | "submit" | "reset" | undefined;
12
- color?: string;
13
- altColor?: string;
14
- frame?: boolean;
15
- border?: string;
16
- text?: string;
17
- fill?: string;
18
- effects?: string;
19
- padding?: string;
20
- flexbox?: boolean;
21
- cursor?: string;
22
- margin?: string;
23
- display?: string;
24
- radius?: string;
25
- fontWeight?: string;
26
- letterSpacing?: string;
27
- shadow?: string;
28
- transition?: string;
29
- width?: string;
30
- maxWidth?: string;
31
- height?: string;
32
- gap?: string;
33
- align?: string;
34
- opacity?: string;
35
14
  }
36
15
  declare const Button: React.FC<ButtonTypes>;
37
16
 
@@ -45,23 +24,16 @@ interface TextTypes {
45
24
  lineHeight?: string;
46
25
  fontWeight?: string | number;
47
26
  tag?: keyof JSX.IntrinsicElements;
27
+ vColor?: PaletteColor;
28
+ vFontSize?: FontSize;
48
29
  onClick?: React.MouseEventHandler<HTMLElement>;
49
30
  }
50
31
  declare const Text: React.FC<TextTypes>;
51
32
 
52
- interface ISizes {
53
- small?: string | number;
54
- medium?: string | number;
55
- big?: string | number;
56
- }
57
33
  interface HeadingTypes {
58
34
  variant?: string;
59
35
  children: ReactNode;
60
- color?: string;
61
- margin?: ISizes;
62
- fontSize?: ISizes;
63
- lineHeight?: ISizes;
64
- fontWeight?: ISizes;
36
+ as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
65
37
  }
66
38
  declare const Heading: React.FC<HeadingTypes>;
67
39
 
@@ -82,14 +54,10 @@ declare const Icon: React.FC<IconTypes>;
82
54
 
83
55
  interface LinkTypes extends AnchorHTMLAttributes<HTMLAnchorElement> {
84
56
  to?: string;
85
- color?: string;
86
- hoverColor?: string;
87
57
  underline?: boolean;
88
58
  hoverUnderline?: boolean;
89
- fontSize?: string;
90
- lineHeight?: string;
91
- fontWeight?: string;
92
59
  as?: ElementType;
60
+ alt?: string;
93
61
  variant?: string;
94
62
  }
95
63
  declare const Link: React.FC<LinkTypes>;
package/dist/index.js CHANGED
@@ -39,87 +39,72 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
39
39
  };
40
40
 
41
41
  const ButtonStyle = styled.button `
42
- ${(_a) => {
43
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
44
- var { variant, theme, disabled } = _a, props = __rest(_a, ["variant", "theme", "disabled"]);
42
+ ${({ variant, theme, disabled }) => {
43
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
45
44
  const buttonStyles = (theme === null || theme === void 0 ? void 0 : theme.button[variant]) || {};
46
45
  return css `
47
46
  /* Default State */
48
47
  background: ${disabled
49
- ? props.background ||
50
- ((_b = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _b === void 0 ? void 0 : _b.background) ||
51
- "transparent"
52
- : props.background ||
53
- ((_c = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _c === void 0 ? void 0 : _c.background) ||
54
- "transparent"};
48
+ ? ((_a = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _a === void 0 ? void 0 : _a.background) || "transparent"
49
+ : ((_b = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _b === void 0 ? void 0 : _b.background) || "transparent"};
55
50
  color: ${disabled
56
- ? props.color || ((_d = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _d === void 0 ? void 0 : _d.text) || "inherit"
57
- : props.color || ((_e = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _e === void 0 ? void 0 : _e.text) || "inherit"};
51
+ ? ((_c = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _c === void 0 ? void 0 : _c.text) || "inherit"
52
+ : ((_d = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _d === void 0 ? void 0 : _d.text) || "inherit"};
58
53
  border: ${disabled
59
- ? props.border || ((_f = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _f === void 0 ? void 0 : _f.border) || "none"
60
- : props.border || ((_g = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _g === void 0 ? void 0 : _g.border) || "none"};
61
- opacity: ${disabled
62
- ? (props === null || props === void 0 ? void 0 : props.opacity) || ((_h = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _h === void 0 ? void 0 : _h.opacity) || 0.5
63
- : 1};
54
+ ? ((_e = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _e === void 0 ? void 0 : _e.border) || "none"
55
+ : ((_f = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _f === void 0 ? void 0 : _f.border) || "none"};
56
+ opacity: ${disabled ? (_g = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _g === void 0 ? void 0 : _g.opacity : 1};
64
57
  text-transform: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.textTransform) || "none"};
65
58
  font-family: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontFamily) || "inherit"};
66
- font-weight: ${props.fontWeight ||
67
- (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontWeight) ||
68
- "normal"};
69
- letter-spacing: ${props.letterSpacing ||
70
- (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.letterSpacing) ||
71
- "normal"};
72
- font-size: ${props.text || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontSize) || "inherit"};
73
- line-height: ${props.lineHeight ||
74
- (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.lineHeight) ||
75
- "normal"};
76
- padding: ${props.padding || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.padding) || "0"};
77
- border-radius: ${props.radius || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.borderRadius) || "0"};
78
- max-width: ${props.maxWidth || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxWidth) || "none"};
79
- max-height: ${props.maxHeight || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxHeight) || "none"};
80
- box-shadow: ${props.shadow || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.shadow) || "none"};
81
- transition: ${props.transition ||
82
- (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.transition) ||
83
- "all 0.2s ease"};
84
- display: ${props.display || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.display) || "inline-flex"};
59
+ font-weight: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontWeight) || "normal"};
60
+ letter-spacing: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.letterSpacing) || "normal"};
61
+ font-size: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontSize) || "inherit"};
62
+ line-height: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.lineHeight) || "normal"};
63
+ padding: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.padding) || "0"};
64
+ border-radius: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.borderRadius) || "0"};
65
+ max-width: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxWidth) || "none"};
66
+ max-height: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxHeight) || "none"};
67
+ box-shadow: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.shadow) || "none"};
68
+ transition: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.transition) || "all 0.2s ease"};
69
+ display: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.display) || "inline-flex"};
85
70
  justify-content: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.justifyContent) || "center"};
86
71
  align-items: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.alignItems) || "center"};
87
72
  cursor: ${disabled
88
73
  ? "not-allowed"
89
- : props.cursor || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.cursor) || "pointer"};
90
- overflow: ${props.overflow || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.overflow) || "visible"};
91
- position: ${props.position || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.position) || "relative"};
92
- width: ${props.width || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.width) || "auto"};
93
- height: ${props.height || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.height) || "auto"};
94
- margin: ${props.margin || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.margin) || "0"};
95
- gap: ${props.gap || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.gap) || "0"};
74
+ : (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.cursor) || "pointer"};
75
+ overflow: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.overflow) || "visible"};
76
+ position: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.position) || "relative"};
77
+ width: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.width) || "auto"};
78
+ height: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.height) || "auto"};
79
+ margin: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.margin) || "0"};
80
+ gap: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.gap) || "8px"};
96
81
 
97
82
  /* Hover State */
98
83
  &:hover {
99
- background: ${!disabled && ((_j = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _j === void 0 ? void 0 : _j.background)};
100
- color: ${!disabled && ((_k = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _k === void 0 ? void 0 : _k.text)};
101
- border: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.border)};
102
- filter: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _m === void 0 ? void 0 : _m.filter)};
84
+ background: ${!disabled && ((_h = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _h === void 0 ? void 0 : _h.background)};
85
+ color: ${!disabled && ((_j = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _j === void 0 ? void 0 : _j.text)};
86
+ border: ${!disabled && ((_k = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _k === void 0 ? void 0 : _k.border)};
87
+ filter: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.filter)};
103
88
  }
104
89
 
105
90
  /* Active State */
106
91
  &:active {
107
- background: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _o === void 0 ? void 0 : _o.background)};
108
- color: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _p === void 0 ? void 0 : _p.text)};
109
- border: ${!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _q === void 0 ? void 0 : _q.border)};
110
- filter: ${(!disabled && ((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _r === void 0 ? void 0 : _r.filter)) ||
92
+ background: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _m === void 0 ? void 0 : _m.background)};
93
+ color: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _o === void 0 ? void 0 : _o.text)};
94
+ border: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _p === void 0 ? void 0 : _p.border)};
95
+ filter: ${(!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _q === void 0 ? void 0 : _q.filter)) ||
111
96
  "brightness(0.9)"};
112
97
  }
113
98
 
114
99
  /* Focus State */
115
100
  &:focus-visible {
116
- outline: 2px solid ${((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focus) === null || _s === void 0 ? void 0 : _s.outline) || "red"};
101
+ outline: 2px solid ${((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focus) === null || _r === void 0 ? void 0 : _r.outline) || "red"};
117
102
  outline-offset: 2px;
118
103
  }
119
104
 
120
105
  &:disabled {
121
106
  cursor: not-allowed;
122
- color: ${disabled && ((_t = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _t === void 0 ? void 0 : _t.text)};
107
+ color: ${disabled && ((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _s === void 0 ? void 0 : _s.text)};
123
108
  background: ${disabled && buttonStyles.disabled.background};
124
109
  border-color: ${disabled && `${buttonStyles.disabled.border}`};
125
110
  opacity: ${disabled && buttonStyles.disabled.opacity};
@@ -134,12 +119,6 @@ const ButtonStyle = styled.button `
134
119
  background-size: contain;
135
120
  background-repeat: no-repeat;
136
121
  `}
137
-
138
- /* Effects */
139
- ${({ effects }) => effects &&
140
- css `
141
- ${effects};
142
- `}
143
122
  `;
144
123
  const ImgStyle = styled.svg `
145
124
  width: 1em;
@@ -147,12 +126,12 @@ const ImgStyle = styled.svg `
147
126
  `;
148
127
 
149
128
  const Button = (_a) => {
150
- var { variant = "primary", disabled = false, image, opacity = "0", background, alt, children, onClick, type = "submit", color, altColor, frame, border, text, fill, effects, padding, flexbox, cursor, margin, display, radius, fontWeight, letterSpacing, shadow, transition, width, maxWidth, height, gap, align } = _a, props = __rest(_a, ["variant", "disabled", "image", "opacity", "background", "alt", "children", "onClick", "type", "color", "altColor", "frame", "border", "text", "fill", "effects", "padding", "flexbox", "cursor", "margin", "display", "radius", "fontWeight", "letterSpacing", "shadow", "transition", "width", "maxWidth", "height", "gap", "align"]);
129
+ var { variant = "primary", disabled = false, image, alt, children, onClick, type = "submit" } = _a, props = __rest(_a, ["variant", "disabled", "image", "alt", "children", "onClick", "type"]);
151
130
  // Log a warning if both `children` and `alt` are missing for accessibility
152
131
  if (!children && !alt) {
153
132
  console.error(`Provide either "children" or "alt" property to the Button.`);
154
133
  }
155
- return (jsxs(ButtonStyle, Object.assign({ disabled: disabled, className: classNames("Button-", variant), variant: "Button-" + variant, type: type, "aria-label": alt || "", background: background, color: color, opacity: opacity, altColor: altColor, frame: frame, border: border, text: text, fill: fill, effects: effects, padding: padding, flexbox: flexbox, cursor: cursor, margin: margin, display: display, radius: radius, fontWeight: fontWeight, letterSpacing: letterSpacing, shadow: shadow, transition: transition, maxWidth: maxWidth, width: width, height: height, gap: gap, align: align, onClick: (e) => {
134
+ return (jsxs(ButtonStyle, Object.assign({ disabled: disabled, className: classNames("Button-", variant), variant: "Button-" + variant, type: type, "aria-label": alt || "", onClick: (e) => {
156
135
  if (!disabled && onClick) {
157
136
  onClick(e);
158
137
  }
@@ -165,13 +144,15 @@ const TextContainer = styled.p `
165
144
  var { variant = "regular", theme } = _a, props = __rest(_a, ["variant", "theme"]);
166
145
  const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.text) === null || _b === void 0 ? void 0 : _b[variant]) || {};
167
146
  return css `
168
- margin: ${props.margin || textStyles.margin};
169
- font-size: ${props.fontSize || textStyles.fontSize};
170
- line-height: ${props.lineHeight || textStyles.lineHeight};
171
- font-weight: ${props.fontWeight ||
172
- textStyles.fontWeight ||
147
+ margin: ${(props === null || props === void 0 ? void 0 : props.margin) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.margin)};
148
+ font-size: ${(props === null || props === void 0 ? void 0 : props.vFontSize) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.vFontSize)};
149
+ line-height: ${(props === null || props === void 0 ? void 0 : props.lineHeight) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.lineHeight)};
150
+ font-weight: ${(props === null || props === void 0 ? void 0 : props.fontWeight) ||
151
+ (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontWeight) ||
173
152
  "regular"};
174
- color: ${props.color || textStyles.color};
153
+ font-family: ${(textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily) || "inherit"};
154
+ font-style: ${(textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontStyle) || "normal"};
155
+ color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.vColor) || "inherit"};
175
156
  `;
176
157
  }};
177
158
  `;
@@ -181,61 +162,64 @@ const TextContainerLabel = styled.label `
181
162
  var { variant = "regular", theme } = _a, props = __rest(_a, ["variant", "theme"]);
182
163
  const textStyles = ((_b = theme === null || theme === void 0 ? void 0 : theme.text) === null || _b === void 0 ? void 0 : _b[variant]) || {};
183
164
  return css `
184
- margin: ${props.margin || textStyles.margin};
185
- font-size: ${props.fontSize || textStyles.fontSize};
186
- line-height: ${props.lineHeight || textStyles.lineHeight};
187
- font-weight: ${props.fontWeight ||
188
- textStyles.fontWeight ||
165
+ margin: ${(props === null || props === void 0 ? void 0 : props.margin) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.margin)};
166
+ font-size: ${(props === null || props === void 0 ? void 0 : props.vFontSize) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.vFontSize)};
167
+ line-height: ${(props === null || props === void 0 ? void 0 : props.lineHeight) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.lineHeight)};
168
+ font-weight: ${(props === null || props === void 0 ? void 0 : props.fontWeight) ||
169
+ (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontWeight) ||
189
170
  "regular"};
190
- color: ${props.color || textStyles.color};
171
+ font-family: ${(textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily) || "inherit"};
172
+ font-style: ${(textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontStyle) || "normal"};
173
+ color: ${(props === null || props === void 0 ? void 0 : props.vColor) || (textStyles === null || textStyles === void 0 ? void 0 : textStyles.vColor) || "inherit"};
191
174
  `;
192
175
  }};
193
176
  `;
194
177
 
195
178
  const Text = (_a) => {
196
- var { variant = "regular", children, htmlFor, margin, color, fontSize, lineHeight, fontWeight, tag, onClick } = _a, props = __rest(_a, ["variant", "children", "htmlFor", "margin", "color", "fontSize", "lineHeight", "fontWeight", "tag", "onClick"]);
179
+ var { variant, children, htmlFor, margin, vColor, vFontSize, fontSize, lineHeight, fontWeight, tag, onClick } = _a, props = __rest(_a, ["variant", "children", "htmlFor", "margin", "vColor", "vFontSize", "fontSize", "lineHeight", "fontWeight", "tag", "onClick"]);
197
180
  // Determine which component to use
198
181
  const Wrapper = htmlFor
199
182
  ? TextContainerLabel
200
183
  : TextContainer;
201
- return (jsx(Wrapper, Object.assign({ as: tag, className: classNames("Text-", variant), variant: "Text-" + variant, htmlFor: htmlFor, style: { margin, color, fontSize, lineHeight, fontWeight }, onClick: onClick }, props, { children: children })));
184
+ return (jsx(Wrapper, Object.assign({ as: tag, className: classNames("Text-", variant), variant: "Text-" + variant, htmlFor: htmlFor, vColor: vColor, vFontSize: vFontSize, style: { margin, fontSize, lineHeight, fontWeight }, onClick: onClick }, props, { children: children })));
202
185
  };
203
186
 
204
187
  const HeadingContainer = styled.h1 `
205
- ${({ variant = "h1", theme, margin, fontSize, fontWeight, lineHeight, color }) => {
188
+ ${({ variant = "h1", theme }) => {
206
189
  const { media, heading } = theme;
207
190
  const { tinyMobileUp, largeMobileUp, superLargeDesktopUp } = media;
208
191
  const headingStyles = (heading === null || heading === void 0 ? void 0 : heading[variant]) || {};
209
192
  const { mobile, tablet, desktop } = headingStyles;
210
193
  return css `
211
194
  ${tinyMobileUp} {
212
- font-size: ${(fontSize === null || fontSize === void 0 ? void 0 : fontSize.small) || mobile.fontSize};
213
- font-weight: ${(fontWeight === null || fontWeight === void 0 ? void 0 : fontWeight.small) || mobile.fontWeight};
214
- line-height: ${(lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.small) || mobile.lineHeight};
215
- color: ${color || (mobile === null || mobile === void 0 ? void 0 : mobile.color)};
216
- margin: ${(margin === null || margin === void 0 ? void 0 : margin.small) || mobile.margin};
195
+ font-size: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontSize};
196
+ font-weight: ${mobile === null || mobile === void 0 ? void 0 : mobile.fontWeight};
197
+ line-height: ${mobile === null || mobile === void 0 ? void 0 : mobile.lineHeight};
198
+ color: ${mobile === null || mobile === void 0 ? void 0 : mobile.color};
199
+ margin: ${mobile === null || mobile === void 0 ? void 0 : mobile.margin};
217
200
  }
218
201
  ${largeMobileUp} {
219
- font-size: ${(fontSize === null || fontSize === void 0 ? void 0 : fontSize.medium) || tablet.fontSize};
220
- font-weight: ${(fontWeight === null || fontWeight === void 0 ? void 0 : fontWeight.medium) || tablet.fontWeight};
221
- line-height: ${(lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.medium) || tablet.lineHeight};
222
- color: ${color || (tablet === null || tablet === void 0 ? void 0 : tablet.color)};
223
- margin: ${(margin === null || margin === void 0 ? void 0 : margin.medium) || tablet.margin};
202
+ font-size: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontSize};
203
+ font-weight: ${tablet === null || tablet === void 0 ? void 0 : tablet.fontWeight};
204
+ line-height: ${tablet === null || tablet === void 0 ? void 0 : tablet.lineHeight};
205
+ color: ${tablet === null || tablet === void 0 ? void 0 : tablet.color};
206
+ margin: ${tablet === null || tablet === void 0 ? void 0 : tablet.margin};
224
207
  }
225
208
  ${superLargeDesktopUp} {
226
- font-size: ${(fontSize === null || fontSize === void 0 ? void 0 : fontSize.big) || desktop.fontSize};
227
- font-weight: ${(fontWeight === null || fontWeight === void 0 ? void 0 : fontWeight.big) || desktop.fontWeight};
228
- line-height: ${(lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.big) || desktop.lineHeight};
229
- color: ${color || (desktop === null || desktop === void 0 ? void 0 : desktop.color)};
230
- margin: ${(margin === null || margin === void 0 ? void 0 : margin.big) || desktop.margin};
209
+ font-size: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontSize};
210
+ font-weight: ${desktop === null || desktop === void 0 ? void 0 : desktop.fontWeight};
211
+ line-height: ${desktop === null || desktop === void 0 ? void 0 : desktop.lineHeight};
212
+ color: ${desktop === null || desktop === void 0 ? void 0 : desktop.color};
213
+ margin: ${desktop === null || desktop === void 0 ? void 0 : desktop.margin};
231
214
  }
232
215
  `;
233
216
  }}
234
217
  `;
235
218
 
236
219
  const Heading = (_a) => {
237
- var { variant = "h1", children, margin, color, fontSize, lineHeight, fontWeight } = _a, props = __rest(_a, ["variant", "children", "margin", "color", "fontSize", "lineHeight", "fontWeight"]);
238
- return (jsx(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: "Heading-" + variant, as: variant, margin: margin, color: color, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, props, { children: children })));
220
+ var { variant = "primary", as = "h1", children } = _a, props = __rest(_a, ["variant", "as", "children"]);
221
+ const headingVariant = `Heading-${variant}-${as}`;
222
+ return (jsx(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: headingVariant, as: as }, props, { children: children })));
239
223
  };
240
224
 
241
225
  const StyledSvg = styled.svg `
@@ -268,14 +252,14 @@ const Icon = (_a) => {
268
252
  };
269
253
 
270
254
  const StyledLink$2 = styled.a `
271
- ${({ variant = "regular", theme, underline, hoverUnderline, color, hoverColor, fontSize, lineHeight, fontWeight }) => {
255
+ ${({ variant = "primary-regular", theme, underline, hoverUnderline }) => {
272
256
  var _a, _b;
273
257
  const linkStyles = ((_a = theme === null || theme === void 0 ? void 0 : theme.link) === null || _a === void 0 ? void 0 : _a[variant]) || {};
274
258
  return css `
275
- font-size: ${fontSize || linkStyles.fontSize};
276
- line-height: ${lineHeight || linkStyles.lineHeight};
277
- font-weight: ${fontWeight || linkStyles.fontWeight || "regular"};
278
- color: ${color || (linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.color)};
259
+ font-size: ${linkStyles.fontSize};
260
+ line-height: ${linkStyles.lineHeight};
261
+ font-weight: ${linkStyles.fontWeight || "regular"};
262
+ color: ${linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.color};
279
263
  display: inline-block;
280
264
  text-decoration: ${underline ? "underline" : "none"};
281
265
  cursor: pointer; // add to theme is ever needed
@@ -285,12 +269,7 @@ const StyledLink$2 = styled.a `
285
269
  ? "underline"
286
270
  : "none"
287
271
  : "underline"};
288
- color: ${hoverColor || ((_b = linkStyles.hover) === null || _b === void 0 ? void 0 : _b.color)};
289
- }
290
-
291
- &:focus {
292
- outline: 2px solid ${hoverColor || "darkblue"};
293
- outline-offset: 2px;
272
+ color: ${(_b = linkStyles.hover) === null || _b === void 0 ? void 0 : _b.color};
294
273
  }
295
274
 
296
275
  &:disabled {
@@ -304,7 +283,7 @@ const StyledLink$2 = styled.a `
304
283
  `;
305
284
 
306
285
  const Link = (_a) => {
307
- var { variant = "regular", to, href, children, target, fontSize, lineHeight, fontWeight, as } = _a, props = __rest(_a, ["variant", "to", "href", "children", "target", "fontSize", "lineHeight", "fontWeight", "as"]);
286
+ var { variant = "primary-regular", to, href, children, target, alt, as } = _a, props = __rest(_a, ["variant", "to", "href", "children", "target", "alt", "as"]);
308
287
  const isExternal = href && /^https?:\/\//.test(href);
309
288
  if (!isExternal && href && !to) {
310
289
  console.warn("A Link with an internal href should use the `to` prop instead for client-side routing.");
@@ -318,7 +297,7 @@ const Link = (_a) => {
318
297
  target,
319
298
  rel: target === "_blank" ? "noopener noreferrer" : undefined
320
299
  };
321
- return (jsx(StyledLink$2, Object.assign({ className: classNames("Link-" + variant), variant: "Link-" + variant, as: Component, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, componentProps, props, { children: children })));
300
+ return (jsx(StyledLink$2, Object.assign({ className: classNames("Link-" + variant), variant: "Link-" + variant, "aria-label": alt || "", as: Component }, componentProps, props, { children: children })));
322
301
  };
323
302
 
324
303
  const GradientContainer = styled.div `
@@ -650,7 +629,6 @@ const AtomButtonLeft = styled(Button).attrs(({ theme, moleculeVariant }) => {
650
629
  const atomTheme = ((_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.atomButtonLeft) || {};
651
630
  return css `
652
631
  flex-direction: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.flexDirection) || "none"};
653
- gap: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.gap) || "none"};
654
632
  `;
655
633
  }}
656
634
  `;
@@ -667,22 +645,9 @@ const AtomButtonRight = styled(Button).attrs(({ theme, moleculeVariant }) => {
667
645
  const atomTheme = ((_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.atomButtonRight) || {};
668
646
  return css `
669
647
  flex-direction: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.flexDirection) || "none"};
670
- gap: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.gap) || "none"};
671
648
  `;
672
649
  }}
673
650
  `;
674
- const AtomTextLeft = styled(Text).attrs(({ theme, moleculeVariant }) => {
675
- var _a, _b, _c;
676
- return ({
677
- 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.atomTextLeft) === null || _c === void 0 ? void 0 : _c.variant
678
- });
679
- }) ``;
680
- const AtomTextRight = styled(Text).attrs(({ theme, moleculeVariant }) => {
681
- var _a, _b, _c;
682
- return ({
683
- 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.atomTextRight) === null || _c === void 0 ? void 0 : _c.variant
684
- });
685
- }) ``;
686
651
  const AtomIconLeft = styled(Icon).attrs(({ theme, moleculeVariant }) => {
687
652
  var _a, _b, _c;
688
653
  return ({
@@ -711,7 +676,7 @@ const WrapperTextTitle = styled.div `
711
676
  const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon, buttonRightIcon, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick, imageURLBackground, withOverlay }) => {
712
677
  const compVariant = `Header-${moleculeVariant}`;
713
678
  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 &&
714
- (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 && (jsx(AtomTextLeft, Object.assign({ moleculeVariant: compVariant }, { children: buttonLeftText })))] }))), (buttonRightIcon || buttonRightText) && (jsxs(AtomButtonRight, Object.assign({ moleculeVariant: compVariant, onClick: buttonRightClick }, { children: [buttonRightText && (jsx(AtomTextRight, Object.assign({ moleculeVariant: compVariant }, { children: buttonRightText }))), buttonRightIcon && (jsx(AtomIconRight, { moleculeVariant: compVariant, svg: buttonRightIcon }))] })))] })] })) })));
679
+ (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 }))] })))] })] })) })));
715
680
  };
716
681
 
717
682
  const NavBar = styled.nav `
@@ -1367,21 +1332,17 @@ const AtomButton = styled(Button).attrs(({ theme, moleculeVariant }) => {
1367
1332
  variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomButton) === null || _c === void 0 ? void 0 : _c.variant
1368
1333
  });
1369
1334
  }) ``;
1370
- const AtomTextButton = styled(Text).attrs(({ theme, moleculeVariant }) => {
1371
- var _a, _b, _c;
1372
- return ({
1373
- variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextButton) === null || _c === void 0 ? void 0 : _c.variant
1374
- });
1375
- }) ``;
1376
1335
  const AtomIcon$1 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
1377
- var _a, _b, _c;
1336
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1378
1337
  return ({
1379
- variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant
1338
+ variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant,
1339
+ stroke: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.stroke,
1340
+ color: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.color
1380
1341
  });
1381
1342
  }) ``;
1382
1343
 
1383
1344
  const CardBanner = ({ moleculeVariant = "primary", icon, title, description, buttonText, buttonClick }) => {
1384
- return (jsxs(Card, Object.assign({ className: classNames("CardBanner-", moleculeVariant), moleculeVariant: "CardBanner-" + moleculeVariant }, { children: [jsxs("div", { children: [jsx(AtomHeading$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: title })), jsx(AtomText$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: description }))] }), buttonClick && (jsxs(AtomButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant, onClick: buttonClick }, { children: [jsx(AtomTextButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: buttonText })), icon && (jsx(AtomIcon$1, { moleculeVariant: "CardBanner-" + moleculeVariant, svg: icon }))] })))] })));
1345
+ return (jsxs(Card, Object.assign({ className: classNames("CardBanner-", moleculeVariant), moleculeVariant: "CardBanner-" + moleculeVariant }, { children: [jsxs("div", { children: [jsx(AtomHeading$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: title })), jsx(AtomText$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: description }))] }), buttonClick && (jsxs(AtomButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant, onClick: buttonClick }, { children: [buttonText, icon && (jsx(AtomIcon$1, { moleculeVariant: "CardBanner-" + moleculeVariant, svg: icon }))] })))] })));
1385
1346
  };
1386
1347
 
1387
1348
  const AccordionContainer = styled.div `