@adidas/htmplar-core 0.0.0 → 2.0.0-alpha.0
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.
- package/dist/index.d.mts +295 -0
- package/dist/index.d.ts +295 -0
- package/dist/index.js +323 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +310 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +50 -1
package/dist/index.js
ADDED
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
|
+
// src/components/Block/Block.tsx
|
|
6
|
+
function Block({
|
|
7
|
+
children,
|
|
8
|
+
backgroundColor,
|
|
9
|
+
color,
|
|
10
|
+
padding = 20,
|
|
11
|
+
maxWidth = 600,
|
|
12
|
+
align = "center",
|
|
13
|
+
className,
|
|
14
|
+
id
|
|
15
|
+
}) {
|
|
16
|
+
const containerStyle = {
|
|
17
|
+
backgroundColor,
|
|
18
|
+
color
|
|
19
|
+
};
|
|
20
|
+
const innerStyle = {
|
|
21
|
+
maxWidth: `${maxWidth}px`,
|
|
22
|
+
width: "100%"
|
|
23
|
+
};
|
|
24
|
+
const contentStyle = {
|
|
25
|
+
padding: typeof padding === "number" ? `${padding}px` : padding
|
|
26
|
+
};
|
|
27
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
28
|
+
"table",
|
|
29
|
+
{
|
|
30
|
+
role: "presentation",
|
|
31
|
+
border: 0,
|
|
32
|
+
cellPadding: 0,
|
|
33
|
+
cellSpacing: 0,
|
|
34
|
+
width: "100%",
|
|
35
|
+
style: containerStyle,
|
|
36
|
+
className,
|
|
37
|
+
id,
|
|
38
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { align, valign: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
39
|
+
"table",
|
|
40
|
+
{
|
|
41
|
+
role: "presentation",
|
|
42
|
+
border: 0,
|
|
43
|
+
cellPadding: 0,
|
|
44
|
+
cellSpacing: 0,
|
|
45
|
+
style: innerStyle,
|
|
46
|
+
className: "mobile-full-width",
|
|
47
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: contentStyle, valign: "top", children }) }) })
|
|
48
|
+
}
|
|
49
|
+
) }) }) })
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
function Text({
|
|
54
|
+
children,
|
|
55
|
+
fontSize = 16,
|
|
56
|
+
fontFamily = "Arial, sans-serif",
|
|
57
|
+
color,
|
|
58
|
+
lineHeight = 1.5,
|
|
59
|
+
align = "left",
|
|
60
|
+
fontWeight,
|
|
61
|
+
className
|
|
62
|
+
}) {
|
|
63
|
+
const style = {
|
|
64
|
+
fontSize: `${fontSize}px`,
|
|
65
|
+
fontFamily,
|
|
66
|
+
color,
|
|
67
|
+
lineHeight: typeof lineHeight === "number" ? lineHeight : lineHeight,
|
|
68
|
+
textAlign: align,
|
|
69
|
+
fontWeight,
|
|
70
|
+
margin: 0,
|
|
71
|
+
padding: 0
|
|
72
|
+
};
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsx("p", { style, className, children });
|
|
74
|
+
}
|
|
75
|
+
function Button({
|
|
76
|
+
children,
|
|
77
|
+
href,
|
|
78
|
+
backgroundColor = "#0066cc",
|
|
79
|
+
color = "#ffffff",
|
|
80
|
+
padding = "12px 24px",
|
|
81
|
+
borderRadius = "4px",
|
|
82
|
+
fontSize = 16,
|
|
83
|
+
fontFamily = "Arial, sans-serif",
|
|
84
|
+
fontWeight = "bold",
|
|
85
|
+
align = "center",
|
|
86
|
+
fullWidth = false,
|
|
87
|
+
className
|
|
88
|
+
}) {
|
|
89
|
+
const buttonStyle = {
|
|
90
|
+
backgroundColor,
|
|
91
|
+
color,
|
|
92
|
+
textDecoration: "none",
|
|
93
|
+
padding,
|
|
94
|
+
borderRadius,
|
|
95
|
+
fontSize: `${fontSize}px`,
|
|
96
|
+
fontFamily,
|
|
97
|
+
fontWeight,
|
|
98
|
+
display: "inline-block",
|
|
99
|
+
textAlign: "center",
|
|
100
|
+
...fullWidth && { width: "100%" }
|
|
101
|
+
};
|
|
102
|
+
const tableStyle = {
|
|
103
|
+
borderCollapse: "separate",
|
|
104
|
+
...fullWidth && { width: "100%" }
|
|
105
|
+
};
|
|
106
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
"table",
|
|
108
|
+
{
|
|
109
|
+
role: "presentation",
|
|
110
|
+
border: 0,
|
|
111
|
+
cellPadding: 0,
|
|
112
|
+
cellSpacing: 0,
|
|
113
|
+
style: tableStyle,
|
|
114
|
+
className,
|
|
115
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { align, valign: "middle", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, style: buttonStyle, target: "_blank", rel: "noopener noreferrer", children }) }) }) })
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
function Image({ src, alt, width, height, align = "center", className, title }) {
|
|
120
|
+
const imgStyle = {
|
|
121
|
+
display: "block",
|
|
122
|
+
border: 0,
|
|
123
|
+
outline: "none",
|
|
124
|
+
textDecoration: "none",
|
|
125
|
+
maxWidth: "100%",
|
|
126
|
+
height: "auto",
|
|
127
|
+
...width && { width: typeof width === "number" ? `${width}px` : width },
|
|
128
|
+
...height && { height: typeof height === "number" ? `${height}px` : height }
|
|
129
|
+
};
|
|
130
|
+
return /* @__PURE__ */ jsxRuntime.jsx("table", { role: "presentation", border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { align, valign: "top", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, title, style: imgStyle, className }) }) }) }) });
|
|
131
|
+
}
|
|
132
|
+
function Link({
|
|
133
|
+
href,
|
|
134
|
+
children,
|
|
135
|
+
color = "#0066cc",
|
|
136
|
+
fontSize = 16,
|
|
137
|
+
fontWeight = "normal",
|
|
138
|
+
textDecoration = "underline",
|
|
139
|
+
target = "_blank",
|
|
140
|
+
rel = "noopener noreferrer",
|
|
141
|
+
style = {}
|
|
142
|
+
}) {
|
|
143
|
+
const linkStyle = {
|
|
144
|
+
color,
|
|
145
|
+
fontSize: `${fontSize}px`,
|
|
146
|
+
fontWeight,
|
|
147
|
+
textDecoration,
|
|
148
|
+
...style
|
|
149
|
+
};
|
|
150
|
+
return /* @__PURE__ */ jsxRuntime.jsx("a", { href, style: linkStyle, target, rel, children });
|
|
151
|
+
}
|
|
152
|
+
function Heading({
|
|
153
|
+
level = 2,
|
|
154
|
+
children,
|
|
155
|
+
color = "#333333",
|
|
156
|
+
fontSize,
|
|
157
|
+
fontWeight = "bold",
|
|
158
|
+
align = "left",
|
|
159
|
+
margin = "0 0 16px 0",
|
|
160
|
+
lineHeight = 1.3,
|
|
161
|
+
style = {}
|
|
162
|
+
}) {
|
|
163
|
+
const defaultFontSizes = {
|
|
164
|
+
1: 32,
|
|
165
|
+
2: 28,
|
|
166
|
+
3: 24,
|
|
167
|
+
4: 20,
|
|
168
|
+
5: 18,
|
|
169
|
+
6: 16
|
|
170
|
+
};
|
|
171
|
+
const headingStyle = {
|
|
172
|
+
margin,
|
|
173
|
+
padding: 0,
|
|
174
|
+
color,
|
|
175
|
+
fontSize: `${fontSize || defaultFontSizes[level]}px`,
|
|
176
|
+
fontWeight,
|
|
177
|
+
textAlign: align,
|
|
178
|
+
lineHeight: typeof lineHeight === "number" ? lineHeight : lineHeight,
|
|
179
|
+
...style
|
|
180
|
+
};
|
|
181
|
+
const Tag = `h${level}`;
|
|
182
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Tag, { style: headingStyle, children });
|
|
183
|
+
}
|
|
184
|
+
function Spacer({ height = 20, width }) {
|
|
185
|
+
const style = {
|
|
186
|
+
height: height ? `${height}px` : void 0,
|
|
187
|
+
width: width ? `${width}px` : void 0,
|
|
188
|
+
lineHeight: height ? `${height}px` : void 0,
|
|
189
|
+
fontSize: "1px"
|
|
190
|
+
};
|
|
191
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
192
|
+
"table",
|
|
193
|
+
{
|
|
194
|
+
role: "presentation",
|
|
195
|
+
border: 0,
|
|
196
|
+
cellPadding: 0,
|
|
197
|
+
cellSpacing: 0,
|
|
198
|
+
width: width || "100%",
|
|
199
|
+
style,
|
|
200
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style, children: "\xA0" }) }) })
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
function Divider({
|
|
205
|
+
color = "#e0e0e0",
|
|
206
|
+
height = 1,
|
|
207
|
+
width = "100%",
|
|
208
|
+
marginTop = 16,
|
|
209
|
+
marginBottom = 16
|
|
210
|
+
}) {
|
|
211
|
+
const containerStyle = {
|
|
212
|
+
margin: `${marginTop}px 0 ${marginBottom}px 0`,
|
|
213
|
+
width: typeof width === "number" ? `${width}px` : width
|
|
214
|
+
};
|
|
215
|
+
const dividerStyle = {
|
|
216
|
+
borderTop: `${height}px solid ${color}`,
|
|
217
|
+
fontSize: "1px",
|
|
218
|
+
lineHeight: "1px",
|
|
219
|
+
margin: 0,
|
|
220
|
+
padding: 0
|
|
221
|
+
};
|
|
222
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
223
|
+
"table",
|
|
224
|
+
{
|
|
225
|
+
role: "presentation",
|
|
226
|
+
border: 0,
|
|
227
|
+
cellPadding: 0,
|
|
228
|
+
cellSpacing: 0,
|
|
229
|
+
width: "100%",
|
|
230
|
+
style: containerStyle,
|
|
231
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: dividerStyle, children: "\xA0" }) }) })
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
function Row({ children, backgroundColor, padding: _padding, style = {} }) {
|
|
236
|
+
const tableStyle = {
|
|
237
|
+
width: "100%",
|
|
238
|
+
backgroundColor,
|
|
239
|
+
...style
|
|
240
|
+
};
|
|
241
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
242
|
+
"table",
|
|
243
|
+
{
|
|
244
|
+
role: "presentation",
|
|
245
|
+
border: 0,
|
|
246
|
+
cellPadding: 0,
|
|
247
|
+
cellSpacing: 0,
|
|
248
|
+
width: "100%",
|
|
249
|
+
style: tableStyle,
|
|
250
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children }) })
|
|
251
|
+
}
|
|
252
|
+
);
|
|
253
|
+
}
|
|
254
|
+
function Column({
|
|
255
|
+
children,
|
|
256
|
+
width,
|
|
257
|
+
backgroundColor,
|
|
258
|
+
padding = 0,
|
|
259
|
+
align = "left",
|
|
260
|
+
verticalAlign = "top",
|
|
261
|
+
style = {}
|
|
262
|
+
}) {
|
|
263
|
+
const cellStyle = {
|
|
264
|
+
width: typeof width === "number" ? `${width}px` : width,
|
|
265
|
+
backgroundColor,
|
|
266
|
+
padding: typeof padding === "number" ? `${padding}px` : padding,
|
|
267
|
+
textAlign: align,
|
|
268
|
+
verticalAlign,
|
|
269
|
+
...style
|
|
270
|
+
};
|
|
271
|
+
return /* @__PURE__ */ jsxRuntime.jsx("td", { style: cellStyle, align, valign: verticalAlign, children });
|
|
272
|
+
}
|
|
273
|
+
function Container({
|
|
274
|
+
children,
|
|
275
|
+
maxWidth = 600,
|
|
276
|
+
backgroundColor,
|
|
277
|
+
padding = 20,
|
|
278
|
+
align = "center",
|
|
279
|
+
style = {}
|
|
280
|
+
}) {
|
|
281
|
+
const tableStyle = {
|
|
282
|
+
maxWidth: `${maxWidth}px`,
|
|
283
|
+
width: "100%",
|
|
284
|
+
backgroundColor,
|
|
285
|
+
margin: "0 auto",
|
|
286
|
+
...style
|
|
287
|
+
};
|
|
288
|
+
const cellStyle = {
|
|
289
|
+
padding: typeof padding === "number" ? `${padding}px` : padding
|
|
290
|
+
};
|
|
291
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
292
|
+
"table",
|
|
293
|
+
{
|
|
294
|
+
role: "presentation",
|
|
295
|
+
border: 0,
|
|
296
|
+
cellPadding: 0,
|
|
297
|
+
cellSpacing: 0,
|
|
298
|
+
width: "100%",
|
|
299
|
+
style: tableStyle,
|
|
300
|
+
align,
|
|
301
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { style: cellStyle, children }) }) })
|
|
302
|
+
}
|
|
303
|
+
);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
// src/index.ts
|
|
307
|
+
var version = "2.0.0-alpha.0";
|
|
308
|
+
console.log(`@adidas/htmplar-core v${version} loaded`);
|
|
309
|
+
|
|
310
|
+
exports.Block = Block;
|
|
311
|
+
exports.Button = Button;
|
|
312
|
+
exports.Column = Column;
|
|
313
|
+
exports.Container = Container;
|
|
314
|
+
exports.Divider = Divider;
|
|
315
|
+
exports.Heading = Heading;
|
|
316
|
+
exports.Image = Image;
|
|
317
|
+
exports.Link = Link;
|
|
318
|
+
exports.Row = Row;
|
|
319
|
+
exports.Spacer = Spacer;
|
|
320
|
+
exports.Text = Text;
|
|
321
|
+
exports.version = version;
|
|
322
|
+
//# sourceMappingURL=index.js.map
|
|
323
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Block/Block.tsx","../src/components/Text/Text.tsx","../src/components/Button/Button.tsx","../src/components/Image/Image.tsx","../src/components/Link/Link.tsx","../src/components/Heading/Heading.tsx","../src/components/Spacer/Spacer.tsx","../src/components/Divider/Divider.tsx","../src/components/Row/Row.tsx","../src/components/Column/Column.tsx","../src/components/Container/Container.tsx","../src/index.ts"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\n\nexport interface BlockProps {\n /**\n * Content to display inside the block\n */\n children: React.ReactNode;\n /**\n * Background color\n */\n backgroundColor?: string;\n /**\n * Text color\n */\n color?: string;\n /**\n * Padding (in pixels)\n */\n padding?: number | string;\n /**\n * Maximum width (in pixels)\n * @default 600\n */\n maxWidth?: number;\n /**\n * Horizontal alignment\n * @default 'center'\n */\n align?: 'left' | 'center' | 'right';\n /**\n * Additional CSS class name\n */\n className?: string;\n /**\n * CSS ID\n */\n id?: string;\n}\n\n/**\n * Block component - Main container for email content\n * Uses table-based layout for email compatibility\n */\nexport function Block({\n children,\n backgroundColor,\n color,\n padding = 20,\n maxWidth = 600,\n align = 'center',\n className,\n id,\n}: BlockProps) {\n const containerStyle: React.CSSProperties = {\n backgroundColor,\n color,\n };\n\n const innerStyle: React.CSSProperties = {\n maxWidth: `${maxWidth}px`,\n width: '100%',\n };\n\n const contentStyle: React.CSSProperties = {\n padding: typeof padding === 'number' ? `${padding}px` : padding,\n };\n\n return (\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n width=\"100%\"\n style={containerStyle}\n className={className}\n id={id}\n >\n <tbody>\n <tr>\n <td align={align} valign=\"top\">\n {/*[if (gte mso 9)|(IE)]>\n <table align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width={`${maxWidth}`}>\n <tr>\n <td align=\"center\" valign=\"top\" width={`${maxWidth}`}>\n <![endif]*/}\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n style={innerStyle}\n className=\"mobile-full-width\"\n >\n <tbody>\n <tr>\n <td style={contentStyle} valign=\"top\">\n {children}\n </td>\n </tr>\n </tbody>\n </table>\n {/*[if (gte mso 9)|(IE)]>\n </td>\n </tr>\n </table>\n <![endif]*/}\n </td>\n </tr>\n </tbody>\n </table>\n );\n}\n","import React from 'react';\n\nexport interface TextProps {\n /**\n * Text content\n */\n children: React.ReactNode;\n /**\n * Font size (in pixels)\n * @default 16\n */\n fontSize?: number;\n /**\n * Font family\n * @default 'Arial, sans-serif'\n */\n fontFamily?: string;\n /**\n * Text color\n */\n color?: string;\n /**\n * Line height\n * @default 1.5\n */\n lineHeight?: number | string;\n /**\n * Text alignment\n * @default 'left'\n */\n align?: 'left' | 'center' | 'right' | 'justify';\n /**\n * Font weight\n */\n fontWeight?: 'normal' | 'bold' | number;\n /**\n * Additional CSS class name\n */\n className?: string;\n}\n\n/**\n * Text component - Email-safe text rendering\n */\nexport function Text({\n children,\n fontSize = 16,\n fontFamily = 'Arial, sans-serif',\n color,\n lineHeight = 1.5,\n align = 'left',\n fontWeight,\n className,\n}: TextProps) {\n const style: React.CSSProperties = {\n fontSize: `${fontSize}px`,\n fontFamily,\n color,\n lineHeight: typeof lineHeight === 'number' ? lineHeight : lineHeight,\n textAlign: align,\n fontWeight,\n margin: 0,\n padding: 0,\n };\n\n return (\n <p style={style} className={className}>\n {children}\n </p>\n );\n}\n","import React from 'react';\n\nexport interface ButtonProps {\n /**\n * Button text\n */\n children: React.ReactNode;\n /**\n * Link URL\n */\n href: string;\n /**\n * Background color\n * @default '#0066cc'\n */\n backgroundColor?: string;\n /**\n * Text color\n * @default '#ffffff'\n */\n color?: string;\n /**\n * Padding\n * @default '12px 24px'\n */\n padding?: string;\n /**\n * Border radius\n * @default '4px'\n */\n borderRadius?: string;\n /**\n * Font size\n * @default 16\n */\n fontSize?: number;\n /**\n * Font family\n * @default 'Arial, sans-serif'\n */\n fontFamily?: string;\n /**\n * Font weight\n * @default 'bold'\n */\n fontWeight?: 'normal' | 'bold' | number;\n /**\n * Text alignment\n * @default 'center'\n */\n align?: 'left' | 'center' | 'right';\n /**\n * Full width button\n * @default false\n */\n fullWidth?: boolean;\n /**\n * Additional CSS class\n */\n className?: string;\n}\n\n/**\n * Button component - Email-safe call-to-action button\n * Uses bulletproof button technique with VML for Outlook\n */\nexport function Button({\n children,\n href,\n backgroundColor = '#0066cc',\n color = '#ffffff',\n padding = '12px 24px',\n borderRadius = '4px',\n fontSize = 16,\n fontFamily = 'Arial, sans-serif',\n fontWeight = 'bold',\n align = 'center',\n fullWidth = false,\n className,\n}: ButtonProps) {\n const buttonStyle: React.CSSProperties = {\n backgroundColor,\n color,\n textDecoration: 'none',\n padding,\n borderRadius,\n fontSize: `${fontSize}px`,\n fontFamily,\n fontWeight,\n display: 'inline-block',\n textAlign: 'center',\n ...(fullWidth && { width: '100%' }),\n };\n\n const tableStyle: React.CSSProperties = {\n borderCollapse: 'separate',\n ...(fullWidth && { width: '100%' }),\n };\n\n return (\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n style={tableStyle}\n className={className}\n >\n <tbody>\n <tr>\n <td align={align} valign=\"middle\">\n {/*[if mso]>\n <v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" href={`${href}`} style=\"height:auto;v-text-anchor:middle;width:200px;\" arcsize=\"10%\" stroke=\"f\" fillcolor={`${backgroundColor}`}>\n <w:anchorlock/>\n <center>\n <![endif]*/}\n <a href={href} style={buttonStyle} target=\"_blank\" rel=\"noopener noreferrer\">\n {children}\n </a>\n {/*[if mso]>\n </center>\n </v:roundrect>\n <![endif]*/}\n </td>\n </tr>\n </tbody>\n </table>\n );\n}\n","import React from 'react';\n\nexport interface ImageProps {\n /**\n * Image source URL\n */\n src: string;\n /**\n * Alt text for accessibility\n */\n alt: string;\n /**\n * Image width\n */\n width?: number | string;\n /**\n * Image height\n */\n height?: number | string;\n /**\n * Horizontal alignment\n * @default 'center'\n */\n align?: 'left' | 'center' | 'right';\n /**\n * Additional CSS class\n */\n className?: string;\n /**\n * Title attribute\n */\n title?: string;\n}\n\n/**\n * Image component - Email-safe responsive images\n */\nexport function Image({ src, alt, width, height, align = 'center', className, title }: ImageProps) {\n const imgStyle: React.CSSProperties = {\n display: 'block',\n border: 0,\n outline: 'none',\n textDecoration: 'none',\n maxWidth: '100%',\n height: 'auto',\n ...(width && { width: typeof width === 'number' ? `${width}px` : width }),\n ...(height && { height: typeof height === 'number' ? `${height}px` : height }),\n };\n\n return (\n <table role=\"presentation\" border={0} cellPadding={0} cellSpacing={0} width=\"100%\">\n <tbody>\n <tr>\n <td align={align} valign=\"top\">\n <img src={src} alt={alt} title={title} style={imgStyle} className={className} />\n </td>\n </tr>\n </tbody>\n </table>\n );\n}\n","import { type CSSProperties, type ReactNode } from 'react';\n\nexport interface LinkProps {\n href: string;\n children: ReactNode;\n color?: string;\n fontSize?: number;\n fontWeight?: string | number;\n textDecoration?: string;\n target?: string;\n rel?: string;\n style?: CSSProperties;\n}\n\n/**\n * Link component for email-safe hyperlinks\n * Ensures proper styling and accessibility in all email clients\n */\nexport function Link({\n href,\n children,\n color = '#0066cc',\n fontSize = 16,\n fontWeight = 'normal',\n textDecoration = 'underline',\n target = '_blank',\n rel = 'noopener noreferrer',\n style = {},\n}: LinkProps) {\n const linkStyle: CSSProperties = {\n color,\n fontSize: `${fontSize}px`,\n fontWeight,\n textDecoration,\n ...style,\n };\n\n return (\n <a href={href} style={linkStyle} target={target} rel={rel}>\n {children}\n </a>\n );\n}\n","import { type CSSProperties, type ReactNode } from 'react';\n\nexport interface HeadingProps {\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n children: ReactNode;\n color?: string;\n fontSize?: number;\n fontWeight?: string | number;\n align?: 'left' | 'center' | 'right';\n margin?: string | number;\n lineHeight?: string | number;\n style?: CSSProperties;\n}\n\n/**\n * Heading component for semantic email headings\n * Uses proper HTML heading tags (h1-h6) with email-safe styling\n */\nexport function Heading({\n level = 2,\n children,\n color = '#333333',\n fontSize,\n fontWeight = 'bold',\n align = 'left',\n margin = '0 0 16px 0',\n lineHeight = 1.3,\n style = {},\n}: HeadingProps) {\n // Default font sizes for each heading level\n const defaultFontSizes = {\n 1: 32,\n 2: 28,\n 3: 24,\n 4: 20,\n 5: 18,\n 6: 16,\n };\n\n const headingStyle: CSSProperties = {\n margin,\n padding: 0,\n color,\n fontSize: `${fontSize || defaultFontSizes[level]}px`,\n fontWeight,\n textAlign: align,\n lineHeight: typeof lineHeight === 'number' ? lineHeight : lineHeight,\n ...style,\n };\n\n const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n return <Tag style={headingStyle}>{children}</Tag>;\n}\n","import { type CSSProperties } from 'react';\n\nexport interface SpacerProps {\n height?: number;\n width?: number;\n}\n\n/**\n * Spacer component for adding vertical or horizontal space\n * Uses table-based layout for consistent spacing across email clients\n */\nexport function Spacer({ height = 20, width }: SpacerProps) {\n const style: CSSProperties = {\n height: height ? `${height}px` : undefined,\n width: width ? `${width}px` : undefined,\n lineHeight: height ? `${height}px` : undefined,\n fontSize: '1px',\n };\n\n return (\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n width={width || '100%'}\n style={style}\n >\n <tbody>\n <tr>\n <td style={style}> </td>\n </tr>\n </tbody>\n </table>\n );\n}\n","import { type CSSProperties } from 'react';\n\nexport interface DividerProps {\n color?: string;\n height?: number;\n width?: string | number;\n marginTop?: number;\n marginBottom?: number;\n}\n\n/**\n * Divider component for horizontal lines\n * Uses border-top for reliable rendering across email clients\n */\nexport function Divider({\n color = '#e0e0e0',\n height = 1,\n width = '100%',\n marginTop = 16,\n marginBottom = 16,\n}: DividerProps) {\n const containerStyle: CSSProperties = {\n margin: `${marginTop}px 0 ${marginBottom}px 0`,\n width: typeof width === 'number' ? `${width}px` : width,\n };\n\n const dividerStyle: CSSProperties = {\n borderTop: `${height}px solid ${color}`,\n fontSize: '1px',\n lineHeight: '1px',\n margin: 0,\n padding: 0,\n };\n\n return (\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n width=\"100%\"\n style={containerStyle}\n >\n <tbody>\n <tr>\n <td style={dividerStyle}> </td>\n </tr>\n </tbody>\n </table>\n );\n}\n","import { type CSSProperties, type ReactNode } from 'react';\n\nexport interface RowProps {\n children: ReactNode;\n backgroundColor?: string;\n padding?: number | string;\n style?: CSSProperties;\n}\n\n/**\n * Row component for horizontal layout containers\n * Works with Column components to create responsive grid layouts\n */\nexport function Row({ children, backgroundColor, padding: _padding, style = {} }: RowProps) {\n const tableStyle: CSSProperties = {\n width: '100%',\n backgroundColor,\n ...style,\n };\n\n // Note: padding is intentionally not used here - Row children (Column) handle their own padding\n\n return (\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n width=\"100%\"\n style={tableStyle}\n >\n <tbody>\n <tr>{children}</tr>\n </tbody>\n </table>\n );\n}\n","import { type CSSProperties, type ReactNode } from 'react';\n\nexport interface ColumnProps {\n children: ReactNode;\n width?: number | string;\n backgroundColor?: string;\n padding?: number | string;\n align?: 'left' | 'center' | 'right';\n verticalAlign?: 'top' | 'middle' | 'bottom';\n style?: CSSProperties;\n}\n\n/**\n * Column component for grid layouts\n * Must be used inside a Row component\n * Responsive: stacks on mobile by default\n */\nexport function Column({\n children,\n width,\n backgroundColor,\n padding = 0,\n align = 'left',\n verticalAlign = 'top',\n style = {},\n}: ColumnProps) {\n const cellStyle: CSSProperties = {\n width: typeof width === 'number' ? `${width}px` : width,\n backgroundColor,\n padding: typeof padding === 'number' ? `${padding}px` : padding,\n textAlign: align,\n verticalAlign,\n ...style,\n };\n\n return (\n <td style={cellStyle} align={align} valign={verticalAlign}>\n {children}\n </td>\n );\n}\n","import { type CSSProperties, type ReactNode } from 'react';\n\nexport interface ContainerProps {\n children: ReactNode;\n maxWidth?: number;\n backgroundColor?: string;\n padding?: number | string;\n align?: 'left' | 'center' | 'right';\n style?: CSSProperties;\n}\n\n/**\n * Container component - lightweight wrapper without MSO conditionals\n * Use Block for full email-safe containers with Outlook support\n */\nexport function Container({\n children,\n maxWidth = 600,\n backgroundColor,\n padding = 20,\n align = 'center',\n style = {},\n}: ContainerProps) {\n const tableStyle: CSSProperties = {\n maxWidth: `${maxWidth}px`,\n width: '100%',\n backgroundColor,\n margin: '0 auto',\n ...style,\n };\n\n const cellStyle: CSSProperties = {\n padding: typeof padding === 'number' ? `${padding}px` : padding,\n };\n\n return (\n <table\n role=\"presentation\"\n border={0}\n cellPadding={0}\n cellSpacing={0}\n width=\"100%\"\n style={tableStyle}\n align={align}\n >\n <tbody>\n <tr>\n <td style={cellStyle}>{children}</td>\n </tr>\n </tbody>\n </table>\n );\n}\n","/**\n * @adidas/htmplar-core - React component library for email development\n * @packageDocumentation\n */\n\nexport const version = '2.0.0-alpha.0';\n\n// Export components\nexport { Block } from './components/Block';\nexport type { BlockProps } from './components/Block';\n\nexport { Text } from './components/Text';\nexport type { TextProps } from './components/Text';\n\nexport { Button } from './components/Button';\nexport type { ButtonProps } from './components/Button';\n\nexport { Image } from './components/Image';\nexport type { ImageProps } from './components/Image';\n\nexport { Link } from './components/Link';\nexport type { LinkProps } from './components/Link';\n\nexport { Heading } from './components/Heading';\nexport type { HeadingProps } from './components/Heading';\n\nexport { Spacer } from './components/Spacer';\nexport type { SpacerProps } from './components/Spacer';\n\nexport { Divider } from './components/Divider';\nexport type { DividerProps } from './components/Divider';\n\nexport { Row } from './components/Row';\nexport type { RowProps } from './components/Row';\n\nexport { Column } from './components/Column';\nexport type { ColumnProps } from './components/Column';\n\nexport { Container } from './components/Container';\nexport type { ContainerProps } from './components/Container';\n\nconsole.log(`@adidas/htmplar-core v${version} loaded`);\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
// src/components/Block/Block.tsx
|
|
4
|
+
function Block({
|
|
5
|
+
children,
|
|
6
|
+
backgroundColor,
|
|
7
|
+
color,
|
|
8
|
+
padding = 20,
|
|
9
|
+
maxWidth = 600,
|
|
10
|
+
align = "center",
|
|
11
|
+
className,
|
|
12
|
+
id
|
|
13
|
+
}) {
|
|
14
|
+
const containerStyle = {
|
|
15
|
+
backgroundColor,
|
|
16
|
+
color
|
|
17
|
+
};
|
|
18
|
+
const innerStyle = {
|
|
19
|
+
maxWidth: `${maxWidth}px`,
|
|
20
|
+
width: "100%"
|
|
21
|
+
};
|
|
22
|
+
const contentStyle = {
|
|
23
|
+
padding: typeof padding === "number" ? `${padding}px` : padding
|
|
24
|
+
};
|
|
25
|
+
return /* @__PURE__ */ jsx(
|
|
26
|
+
"table",
|
|
27
|
+
{
|
|
28
|
+
role: "presentation",
|
|
29
|
+
border: 0,
|
|
30
|
+
cellPadding: 0,
|
|
31
|
+
cellSpacing: 0,
|
|
32
|
+
width: "100%",
|
|
33
|
+
style: containerStyle,
|
|
34
|
+
className,
|
|
35
|
+
id,
|
|
36
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { align, valign: "top", children: /* @__PURE__ */ jsx(
|
|
37
|
+
"table",
|
|
38
|
+
{
|
|
39
|
+
role: "presentation",
|
|
40
|
+
border: 0,
|
|
41
|
+
cellPadding: 0,
|
|
42
|
+
cellSpacing: 0,
|
|
43
|
+
style: innerStyle,
|
|
44
|
+
className: "mobile-full-width",
|
|
45
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { style: contentStyle, valign: "top", children }) }) })
|
|
46
|
+
}
|
|
47
|
+
) }) }) })
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
function Text({
|
|
52
|
+
children,
|
|
53
|
+
fontSize = 16,
|
|
54
|
+
fontFamily = "Arial, sans-serif",
|
|
55
|
+
color,
|
|
56
|
+
lineHeight = 1.5,
|
|
57
|
+
align = "left",
|
|
58
|
+
fontWeight,
|
|
59
|
+
className
|
|
60
|
+
}) {
|
|
61
|
+
const style = {
|
|
62
|
+
fontSize: `${fontSize}px`,
|
|
63
|
+
fontFamily,
|
|
64
|
+
color,
|
|
65
|
+
lineHeight: typeof lineHeight === "number" ? lineHeight : lineHeight,
|
|
66
|
+
textAlign: align,
|
|
67
|
+
fontWeight,
|
|
68
|
+
margin: 0,
|
|
69
|
+
padding: 0
|
|
70
|
+
};
|
|
71
|
+
return /* @__PURE__ */ jsx("p", { style, className, children });
|
|
72
|
+
}
|
|
73
|
+
function Button({
|
|
74
|
+
children,
|
|
75
|
+
href,
|
|
76
|
+
backgroundColor = "#0066cc",
|
|
77
|
+
color = "#ffffff",
|
|
78
|
+
padding = "12px 24px",
|
|
79
|
+
borderRadius = "4px",
|
|
80
|
+
fontSize = 16,
|
|
81
|
+
fontFamily = "Arial, sans-serif",
|
|
82
|
+
fontWeight = "bold",
|
|
83
|
+
align = "center",
|
|
84
|
+
fullWidth = false,
|
|
85
|
+
className
|
|
86
|
+
}) {
|
|
87
|
+
const buttonStyle = {
|
|
88
|
+
backgroundColor,
|
|
89
|
+
color,
|
|
90
|
+
textDecoration: "none",
|
|
91
|
+
padding,
|
|
92
|
+
borderRadius,
|
|
93
|
+
fontSize: `${fontSize}px`,
|
|
94
|
+
fontFamily,
|
|
95
|
+
fontWeight,
|
|
96
|
+
display: "inline-block",
|
|
97
|
+
textAlign: "center",
|
|
98
|
+
...fullWidth && { width: "100%" }
|
|
99
|
+
};
|
|
100
|
+
const tableStyle = {
|
|
101
|
+
borderCollapse: "separate",
|
|
102
|
+
...fullWidth && { width: "100%" }
|
|
103
|
+
};
|
|
104
|
+
return /* @__PURE__ */ jsx(
|
|
105
|
+
"table",
|
|
106
|
+
{
|
|
107
|
+
role: "presentation",
|
|
108
|
+
border: 0,
|
|
109
|
+
cellPadding: 0,
|
|
110
|
+
cellSpacing: 0,
|
|
111
|
+
style: tableStyle,
|
|
112
|
+
className,
|
|
113
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { align, valign: "middle", children: /* @__PURE__ */ jsx("a", { href, style: buttonStyle, target: "_blank", rel: "noopener noreferrer", children }) }) }) })
|
|
114
|
+
}
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
function Image({ src, alt, width, height, align = "center", className, title }) {
|
|
118
|
+
const imgStyle = {
|
|
119
|
+
display: "block",
|
|
120
|
+
border: 0,
|
|
121
|
+
outline: "none",
|
|
122
|
+
textDecoration: "none",
|
|
123
|
+
maxWidth: "100%",
|
|
124
|
+
height: "auto",
|
|
125
|
+
...width && { width: typeof width === "number" ? `${width}px` : width },
|
|
126
|
+
...height && { height: typeof height === "number" ? `${height}px` : height }
|
|
127
|
+
};
|
|
128
|
+
return /* @__PURE__ */ jsx("table", { role: "presentation", border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { align, valign: "top", children: /* @__PURE__ */ jsx("img", { src, alt, title, style: imgStyle, className }) }) }) }) });
|
|
129
|
+
}
|
|
130
|
+
function Link({
|
|
131
|
+
href,
|
|
132
|
+
children,
|
|
133
|
+
color = "#0066cc",
|
|
134
|
+
fontSize = 16,
|
|
135
|
+
fontWeight = "normal",
|
|
136
|
+
textDecoration = "underline",
|
|
137
|
+
target = "_blank",
|
|
138
|
+
rel = "noopener noreferrer",
|
|
139
|
+
style = {}
|
|
140
|
+
}) {
|
|
141
|
+
const linkStyle = {
|
|
142
|
+
color,
|
|
143
|
+
fontSize: `${fontSize}px`,
|
|
144
|
+
fontWeight,
|
|
145
|
+
textDecoration,
|
|
146
|
+
...style
|
|
147
|
+
};
|
|
148
|
+
return /* @__PURE__ */ jsx("a", { href, style: linkStyle, target, rel, children });
|
|
149
|
+
}
|
|
150
|
+
function Heading({
|
|
151
|
+
level = 2,
|
|
152
|
+
children,
|
|
153
|
+
color = "#333333",
|
|
154
|
+
fontSize,
|
|
155
|
+
fontWeight = "bold",
|
|
156
|
+
align = "left",
|
|
157
|
+
margin = "0 0 16px 0",
|
|
158
|
+
lineHeight = 1.3,
|
|
159
|
+
style = {}
|
|
160
|
+
}) {
|
|
161
|
+
const defaultFontSizes = {
|
|
162
|
+
1: 32,
|
|
163
|
+
2: 28,
|
|
164
|
+
3: 24,
|
|
165
|
+
4: 20,
|
|
166
|
+
5: 18,
|
|
167
|
+
6: 16
|
|
168
|
+
};
|
|
169
|
+
const headingStyle = {
|
|
170
|
+
margin,
|
|
171
|
+
padding: 0,
|
|
172
|
+
color,
|
|
173
|
+
fontSize: `${fontSize || defaultFontSizes[level]}px`,
|
|
174
|
+
fontWeight,
|
|
175
|
+
textAlign: align,
|
|
176
|
+
lineHeight: typeof lineHeight === "number" ? lineHeight : lineHeight,
|
|
177
|
+
...style
|
|
178
|
+
};
|
|
179
|
+
const Tag = `h${level}`;
|
|
180
|
+
return /* @__PURE__ */ jsx(Tag, { style: headingStyle, children });
|
|
181
|
+
}
|
|
182
|
+
function Spacer({ height = 20, width }) {
|
|
183
|
+
const style = {
|
|
184
|
+
height: height ? `${height}px` : void 0,
|
|
185
|
+
width: width ? `${width}px` : void 0,
|
|
186
|
+
lineHeight: height ? `${height}px` : void 0,
|
|
187
|
+
fontSize: "1px"
|
|
188
|
+
};
|
|
189
|
+
return /* @__PURE__ */ jsx(
|
|
190
|
+
"table",
|
|
191
|
+
{
|
|
192
|
+
role: "presentation",
|
|
193
|
+
border: 0,
|
|
194
|
+
cellPadding: 0,
|
|
195
|
+
cellSpacing: 0,
|
|
196
|
+
width: width || "100%",
|
|
197
|
+
style,
|
|
198
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { style, children: "\xA0" }) }) })
|
|
199
|
+
}
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
function Divider({
|
|
203
|
+
color = "#e0e0e0",
|
|
204
|
+
height = 1,
|
|
205
|
+
width = "100%",
|
|
206
|
+
marginTop = 16,
|
|
207
|
+
marginBottom = 16
|
|
208
|
+
}) {
|
|
209
|
+
const containerStyle = {
|
|
210
|
+
margin: `${marginTop}px 0 ${marginBottom}px 0`,
|
|
211
|
+
width: typeof width === "number" ? `${width}px` : width
|
|
212
|
+
};
|
|
213
|
+
const dividerStyle = {
|
|
214
|
+
borderTop: `${height}px solid ${color}`,
|
|
215
|
+
fontSize: "1px",
|
|
216
|
+
lineHeight: "1px",
|
|
217
|
+
margin: 0,
|
|
218
|
+
padding: 0
|
|
219
|
+
};
|
|
220
|
+
return /* @__PURE__ */ jsx(
|
|
221
|
+
"table",
|
|
222
|
+
{
|
|
223
|
+
role: "presentation",
|
|
224
|
+
border: 0,
|
|
225
|
+
cellPadding: 0,
|
|
226
|
+
cellSpacing: 0,
|
|
227
|
+
width: "100%",
|
|
228
|
+
style: containerStyle,
|
|
229
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { style: dividerStyle, children: "\xA0" }) }) })
|
|
230
|
+
}
|
|
231
|
+
);
|
|
232
|
+
}
|
|
233
|
+
function Row({ children, backgroundColor, padding: _padding, style = {} }) {
|
|
234
|
+
const tableStyle = {
|
|
235
|
+
width: "100%",
|
|
236
|
+
backgroundColor,
|
|
237
|
+
...style
|
|
238
|
+
};
|
|
239
|
+
return /* @__PURE__ */ jsx(
|
|
240
|
+
"table",
|
|
241
|
+
{
|
|
242
|
+
role: "presentation",
|
|
243
|
+
border: 0,
|
|
244
|
+
cellPadding: 0,
|
|
245
|
+
cellSpacing: 0,
|
|
246
|
+
width: "100%",
|
|
247
|
+
style: tableStyle,
|
|
248
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children }) })
|
|
249
|
+
}
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
function Column({
|
|
253
|
+
children,
|
|
254
|
+
width,
|
|
255
|
+
backgroundColor,
|
|
256
|
+
padding = 0,
|
|
257
|
+
align = "left",
|
|
258
|
+
verticalAlign = "top",
|
|
259
|
+
style = {}
|
|
260
|
+
}) {
|
|
261
|
+
const cellStyle = {
|
|
262
|
+
width: typeof width === "number" ? `${width}px` : width,
|
|
263
|
+
backgroundColor,
|
|
264
|
+
padding: typeof padding === "number" ? `${padding}px` : padding,
|
|
265
|
+
textAlign: align,
|
|
266
|
+
verticalAlign,
|
|
267
|
+
...style
|
|
268
|
+
};
|
|
269
|
+
return /* @__PURE__ */ jsx("td", { style: cellStyle, align, valign: verticalAlign, children });
|
|
270
|
+
}
|
|
271
|
+
function Container({
|
|
272
|
+
children,
|
|
273
|
+
maxWidth = 600,
|
|
274
|
+
backgroundColor,
|
|
275
|
+
padding = 20,
|
|
276
|
+
align = "center",
|
|
277
|
+
style = {}
|
|
278
|
+
}) {
|
|
279
|
+
const tableStyle = {
|
|
280
|
+
maxWidth: `${maxWidth}px`,
|
|
281
|
+
width: "100%",
|
|
282
|
+
backgroundColor,
|
|
283
|
+
margin: "0 auto",
|
|
284
|
+
...style
|
|
285
|
+
};
|
|
286
|
+
const cellStyle = {
|
|
287
|
+
padding: typeof padding === "number" ? `${padding}px` : padding
|
|
288
|
+
};
|
|
289
|
+
return /* @__PURE__ */ jsx(
|
|
290
|
+
"table",
|
|
291
|
+
{
|
|
292
|
+
role: "presentation",
|
|
293
|
+
border: 0,
|
|
294
|
+
cellPadding: 0,
|
|
295
|
+
cellSpacing: 0,
|
|
296
|
+
width: "100%",
|
|
297
|
+
style: tableStyle,
|
|
298
|
+
align,
|
|
299
|
+
children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { style: cellStyle, children }) }) })
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
// src/index.ts
|
|
305
|
+
var version = "2.0.0-alpha.0";
|
|
306
|
+
console.log(`@adidas/htmplar-core v${version} loaded`);
|
|
307
|
+
|
|
308
|
+
export { Block, Button, Column, Container, Divider, Heading, Image, Link, Row, Spacer, Text, version };
|
|
309
|
+
//# sourceMappingURL=index.mjs.map
|
|
310
|
+
//# sourceMappingURL=index.mjs.map
|