@gpichot/spectacle-deck 1.0.0 → 1.0.2

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/index.mjs CHANGED
@@ -1,41 +1,329 @@
1
1
  // src/index.tsx
2
- import React18 from "react";
2
+ import React19 from "react";
3
+ import { MDXProvider } from "@mdx-js/react";
4
+ import { Deck as SpectacleDeck, Slide } from "spectacle";
5
+
6
+ // src/layouts/CenteredLayout.tsx
7
+ import React2 from "react";
8
+ import styled from "styled-components";
3
9
 
4
- // ../../node_modules/.pnpm/@mdx-js+react@3.0.0_@types+react@18.2.34/node_modules/@mdx-js/react/lib/index.js
10
+ // src/layouts/utils.ts
5
11
  import React from "react";
6
- var emptyComponents = {};
7
- var MDXContext = React.createContext(emptyComponents);
8
- function useMDXComponents(components) {
9
- const contextComponents = React.useContext(MDXContext);
10
- return React.useMemo(
11
- function() {
12
- if (typeof components === "function") {
13
- return components(contextComponents);
12
+ var Margins = {
13
+ vertical: "4rem",
14
+ horizontal: "7rem",
15
+ horizontalInternal: "2rem"
16
+ };
17
+ function getHeading(children) {
18
+ const allChild = React.Children.toArray(children);
19
+ if (allChild.length === 0)
20
+ return [null, allChild];
21
+ const [candidate, ...rest] = allChild;
22
+ if (!React.isValidElement(candidate))
23
+ return [null, allChild];
24
+ if (["h2", "h3"].includes(candidate.props.originalType)) {
25
+ return [candidate, rest];
26
+ }
27
+ return [null, allChild];
28
+ }
29
+ function getCode(children) {
30
+ const allChild = React.Children.toArray(children);
31
+ if (allChild.length === 0)
32
+ return [null, allChild];
33
+ const index = allChild.findIndex((child) => {
34
+ if (!React.isValidElement(child))
35
+ return false;
36
+ return child.props.originalType === "pre";
37
+ });
38
+ if (index === -1)
39
+ return [null, allChild];
40
+ const candidate = allChild[index];
41
+ const rest = allChild.filter((_, i) => i !== index);
42
+ return [candidate, rest];
43
+ }
44
+ function getMatchingMdxType(children, mdxType) {
45
+ const allChild = React.Children.toArray(children);
46
+ const matchFn = (child) => {
47
+ if (!React.isValidElement(child))
48
+ return false;
49
+ if (typeof child.type !== "function")
50
+ return false;
51
+ if ("mdxType" in child.type === false)
52
+ return false;
53
+ return child.type.mdxType === mdxType;
54
+ };
55
+ const matches = allChild.filter(matchFn);
56
+ const rest = allChild.filter((child) => !matchFn(child));
57
+ return [matches, rest];
58
+ }
59
+ function getCodeChildren(children) {
60
+ const [code, rest] = getCode(children);
61
+ if (code)
62
+ return [code, rest];
63
+ const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
64
+ if (codeStepper.length > 0)
65
+ return [codeStepper, rest2];
66
+ const [codes, rest3] = getMatchingMdxType(children, "FilePane");
67
+ return [codes, rest3];
68
+ }
69
+
70
+ // src/layouts/CenteredLayout.tsx
71
+ var CenteredLayoutContent = styled.div`
72
+ h2,
73
+ h3 {
74
+ }
75
+ `;
76
+ var CenteredLayout = (props) => {
77
+ const [heading, rest] = getHeading(props.children);
78
+ return /* @__PURE__ */ React2.createElement(
79
+ "div",
80
+ {
81
+ ...props,
82
+ style: {
83
+ height: "100%",
84
+ display: "flex",
85
+ flexFlow: "column",
86
+ alignItems: "center",
87
+ justifyContent: "center",
88
+ margin: `0 ${Margins.horizontal}`
14
89
  }
15
- return { ...contextComponents, ...components };
16
90
  },
17
- [contextComponents, components]
91
+ rest,
92
+ /* @__PURE__ */ React2.createElement(
93
+ CenteredLayoutContent,
94
+ {
95
+ style: {
96
+ position: "absolute",
97
+ opacity: 0.8,
98
+ marginBottom: "2rem",
99
+ marginTop: "2rem",
100
+ bottom: 0
101
+ }
102
+ },
103
+ heading
104
+ )
105
+ );
106
+ };
107
+
108
+ // src/layouts/Default3Layout.tsx
109
+ import React3 from "react";
110
+ import styled2 from "styled-components";
111
+ function MultipleHexagons({ position }) {
112
+ return /* @__PURE__ */ React3.createElement(
113
+ "svg",
114
+ {
115
+ viewBox: `${position === "left" ? "0" : "2"} 0 12 20`,
116
+ width: "12",
117
+ height: "20",
118
+ fill: "none",
119
+ xmlns: "http://www.w3.org/2000/svg"
120
+ },
121
+ /* @__PURE__ */ React3.createElement(
122
+ "path",
123
+ {
124
+ d: "M 3.913 5.381 L 2.063 4.314 L 2.063 2.173 L 3.913 1.103 L 5.761 2.173 L 5.761 4.314 L 3.913 5.381 Z M 2.38 4.128 L 3.913 5.014 L 5.444 4.128 L 5.444 2.356 L 3.913 1.47 L 2.38 2.356 L 2.38 4.128 Z",
125
+ fill: "#F49676"
126
+ }
127
+ ),
128
+ /* @__PURE__ */ React3.createElement(
129
+ "path",
130
+ {
131
+ d: "M 8.047 5.401 L 6.197 4.334 L 6.197 2.193 L 8.047 1.123 L 9.895 2.193 L 9.895 4.334 L 8.047 5.401 Z M 6.514 4.148 L 8.047 5.034 L 9.578 4.148 L 9.578 2.376 L 8.047 1.49 L 6.514 2.376 L 6.514 4.148 Z",
132
+ fill: "#F49676"
133
+ }
134
+ ),
135
+ /* @__PURE__ */ React3.createElement(
136
+ "path",
137
+ {
138
+ d: "M 8.071 4.548 L 6.956 3.905 L 6.956 2.615 L 8.071 1.97 L 9.184 2.615 L 9.184 3.905 L 8.071 4.548 Z",
139
+ fill: "#F49676"
140
+ }
141
+ ),
142
+ /* @__PURE__ */ React3.createElement(
143
+ "path",
144
+ {
145
+ d: "M 5.982 8.898 L 4.132 7.831 L 4.132 5.69 L 5.982 4.62 L 7.83 5.69 L 7.83 7.831 L 5.982 8.898 Z M 4.449 7.645 L 5.982 8.531 L 7.513 7.645 L 7.513 5.873 L 5.982 4.987 L 4.449 5.873 L 4.449 7.645 Z",
146
+ fill: "#F49676"
147
+ }
148
+ ),
149
+ /* @__PURE__ */ React3.createElement(
150
+ "path",
151
+ {
152
+ d: "M 6.006 8.045 L 4.891 7.402 L 4.891 6.112 L 6.006 5.467 L 7.119 6.112 L 7.119 7.402 L 6.006 8.045 Z",
153
+ fill: "#F49676"
154
+ }
155
+ ),
156
+ /* @__PURE__ */ React3.createElement(
157
+ "path",
158
+ {
159
+ d: "M 8.056 12.323 L 6.206 11.256 L 6.206 9.115 L 8.056 8.045 L 9.904 9.115 L 9.904 11.256 L 8.056 12.323 Z M 6.523 11.07 L 8.056 11.956 L 9.587 11.07 L 9.587 9.298 L 8.056 8.412 L 6.523 9.298 L 6.523 11.07 Z",
160
+ fill: "#F49676"
161
+ }
162
+ ),
163
+ /* @__PURE__ */ React3.createElement(
164
+ "path",
165
+ {
166
+ d: "M 8.08 11.47 L 6.965 10.827 L 6.965 9.537 L 8.08 8.892 L 9.193 9.537 L 9.193 10.827 L 8.08 11.47 Z",
167
+ fill: "#F49676"
168
+ }
169
+ ),
170
+ /* @__PURE__ */ React3.createElement(
171
+ "path",
172
+ {
173
+ d: "M 10.101 8.878 L 8.251 7.811 L 8.251 5.67 L 10.101 4.6 L 11.949 5.67 L 11.949 7.811 L 10.101 8.878 Z M 8.568 7.625 L 10.101 8.511 L 11.632 7.625 L 11.632 5.853 L 10.101 4.967 L 8.568 5.853 L 8.568 7.625 Z",
174
+ fill: "#F49676"
175
+ }
176
+ ),
177
+ /* @__PURE__ */ React3.createElement(
178
+ "path",
179
+ {
180
+ d: "M 10.125 8.025 L 9.01 7.382 L 9.01 6.092 L 10.125 5.447 L 11.238 6.092 L 11.238 7.382 L 10.125 8.025 Z",
181
+ fill: "#F49676"
182
+ }
183
+ ),
184
+ /* @__PURE__ */ React3.createElement(
185
+ "path",
186
+ {
187
+ d: "M 12.077 12.301 L 10.227 11.234 L 10.227 9.093 L 12.077 8.023 L 13.925 9.093 L 13.925 11.234 L 12.077 12.301 Z M 10.544 11.048 L 12.077 11.934 L 13.608 11.048 L 13.608 9.276 L 12.077 8.39 L 10.544 9.276 L 10.544 11.048 Z",
188
+ fill: "#F49676"
189
+ }
190
+ ),
191
+ /* @__PURE__ */ React3.createElement(
192
+ "path",
193
+ {
194
+ d: "M 12.101 11.448 L 10.986 10.805 L 10.986 9.515 L 12.101 8.87 L 13.214 9.515 L 13.214 10.805 L 12.101 11.448 Z",
195
+ fill: "#F49676"
196
+ }
197
+ ),
198
+ /* @__PURE__ */ React3.createElement(
199
+ "path",
200
+ {
201
+ d: "M 10.062 15.781 L 8.212 14.714 L 8.212 12.573 L 10.062 11.503 L 11.91 12.573 L 11.91 14.714 L 10.062 15.781 Z M 8.529 14.528 L 10.062 15.414 L 11.593 14.528 L 11.593 12.756 L 10.062 11.87 L 8.529 12.756 L 8.529 14.528 Z",
202
+ fill: "#F49676"
203
+ }
204
+ ),
205
+ /* @__PURE__ */ React3.createElement(
206
+ "path",
207
+ {
208
+ d: "M 8.029 19.193 L 6.179 18.126 L 6.179 15.985 L 8.029 14.915 L 9.877 15.985 L 9.877 18.126 L 8.029 19.193 Z M 6.496 17.94 L 8.029 18.826 L 9.56 17.94 L 9.56 16.168 L 8.029 15.282 L 6.496 16.168 L 6.496 17.94 Z",
209
+ fill: "#F49676"
210
+ }
211
+ ),
212
+ /* @__PURE__ */ React3.createElement(
213
+ "path",
214
+ {
215
+ d: "M 6.068 15.716 L 4.218 14.649 L 4.218 12.508 L 6.068 11.438 L 7.916 12.508 L 7.916 14.649 L 6.068 15.716 Z M 4.535 14.463 L 6.068 15.349 L 7.599 14.463 L 7.599 12.691 L 6.068 11.805 L 4.535 12.691 L 4.535 14.463 Z",
216
+ fill: "#F49676"
217
+ }
218
+ ),
219
+ /* @__PURE__ */ React3.createElement(
220
+ "path",
221
+ {
222
+ d: "M 6.092 14.863 L 4.977 14.22 L 4.977 12.93 L 6.092 12.285 L 7.205 12.93 L 7.205 14.22 L 6.092 14.863 Z",
223
+ fill: "#F49676"
224
+ }
225
+ ),
226
+ /* @__PURE__ */ React3.createElement(
227
+ "path",
228
+ {
229
+ d: "M 4.011 12.393 L 2.161 11.326 L 2.161 9.185 L 4.011 8.115 L 5.859 9.185 L 5.859 11.326 L 4.011 12.393 Z M 2.478 11.14 L 4.011 12.026 L 5.542 11.14 L 5.542 9.368 L 4.011 8.482 L 2.478 9.368 L 2.478 11.14 Z",
230
+ fill: "#F49676"
231
+ }
232
+ ),
233
+ /* @__PURE__ */ React3.createElement(
234
+ "path",
235
+ {
236
+ d: "M 2.083 15.773 L 0.233 14.706 L 0.233 12.565 L 2.083 11.495 L 3.931 12.565 L 3.931 14.706 L 2.083 15.773 Z M 0.55 14.52 L 2.083 15.406 L 3.614 14.52 L 3.614 12.748 L 2.083 11.862 L 0.55 12.748 L 0.55 14.52 Z",
237
+ fill: "#F49676"
238
+ }
239
+ ),
240
+ /* @__PURE__ */ React3.createElement(
241
+ "path",
242
+ {
243
+ d: "M 2.107 14.92 L 0.992 14.277 L 0.992 12.987 L 2.107 12.342 L 3.22 12.987 L 3.22 14.277 L 2.107 14.92 Z",
244
+ fill: "#F49676"
245
+ }
246
+ ),
247
+ /* @__PURE__ */ React3.createElement(
248
+ "path",
249
+ {
250
+ d: "M 3.966 19.231 L 2.116 18.164 L 2.116 16.023 L 3.966 14.953 L 5.814 16.023 L 5.814 18.164 L 3.966 19.231 Z M 2.433 17.978 L 3.966 18.864 L 5.497 17.978 L 5.497 16.206 L 3.966 15.32 L 2.433 16.206 L 2.433 17.978 Z",
251
+ fill: "#F49676"
252
+ }
253
+ ),
254
+ /* @__PURE__ */ React3.createElement(
255
+ "path",
256
+ {
257
+ d: "M 3.99 18.378 L 2.875 17.735 L 2.875 16.445 L 3.99 15.8 L 5.103 16.445 L 5.103 17.735 L 3.99 18.378 Z",
258
+ fill: "#F49676"
259
+ }
260
+ )
18
261
  );
19
262
  }
20
- function MDXProvider(props) {
21
- let allComponents;
22
- if (props.disableParentContext) {
23
- allComponents = typeof props.components === "function" ? props.components(emptyComponents) : props.components || emptyComponents;
24
- } else {
25
- allComponents = useMDXComponents(props.components);
263
+ var Default3SideContainer = styled2.div`
264
+ svg {
265
+ height: 100%;
266
+ width: auto;
267
+ path {
268
+ fill: #ffffff22;
269
+ transition: fill 3s;
270
+ &:hover {
271
+ fill: #ffffffbb;
272
+ }
273
+ }
26
274
  }
27
- return React.createElement(
28
- MDXContext.Provider,
29
- { value: allComponents },
30
- props.children
275
+ `;
276
+ var Default2LayoutContainer = styled2.div`
277
+ h2,
278
+ h3 {
279
+ text-align: left;
280
+ color: white;
281
+ }
282
+ `;
283
+ var Default3Layout = ({
284
+ children,
285
+ position = "right"
286
+ }) => {
287
+ const isReversed = position === "left";
288
+ return /* @__PURE__ */ React3.createElement(
289
+ Default2LayoutContainer,
290
+ {
291
+ style: {
292
+ display: "flex",
293
+ position: "absolute",
294
+ flexDirection: isReversed ? "row-reverse" : "row",
295
+ inset: 0,
296
+ alignItems: "center"
297
+ }
298
+ },
299
+ /* @__PURE__ */ React3.createElement(
300
+ Default3SideContainer,
301
+ {
302
+ style: {
303
+ flex: 1,
304
+ height: "100%",
305
+ padding: "2rem",
306
+ transform: isReversed ? "scale(2) translate(25%, 4%)" : "scale(2) translate(-25%, 15%)"
307
+ }
308
+ },
309
+ /* @__PURE__ */ React3.createElement(MultipleHexagons, { position })
310
+ ),
311
+ /* @__PURE__ */ React3.createElement(
312
+ "div",
313
+ {
314
+ style: {
315
+ flex: 4,
316
+ marginLeft: isReversed ? Margins.horizontal : "2rem",
317
+ marginRight: isReversed ? "2rem" : Margins.horizontal
318
+ }
319
+ },
320
+ children
321
+ )
31
322
  );
32
- }
33
-
34
- // src/index.tsx
35
- import { Deck as SpectacleDeck, Slide } from "spectacle";
323
+ };
36
324
 
37
325
  // src/layouts/MainSectionLayout.tsx
38
- import React2 from "react";
326
+ import React4 from "react";
39
327
  import { FlexBox } from "spectacle";
40
328
 
41
329
  // src/front.png
@@ -45,7 +333,7 @@ var front_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAfPCAYAA
45
333
  var MainSectionLayout = ({
46
334
  children
47
335
  }) => {
48
- return /* @__PURE__ */ React2.createElement(
336
+ return /* @__PURE__ */ React4.createElement(
49
337
  FlexBox,
50
338
  {
51
339
  height: "100%",
@@ -59,14 +347,14 @@ var MainSectionLayout = ({
59
347
  bottom: 0
60
348
  }
61
349
  },
62
- /* @__PURE__ */ React2.createElement("div", { style: { paddingLeft: "8rem", flex: 1 } }, children),
63
- /* @__PURE__ */ React2.createElement("div", { style: { flex: "0 0", height: "100%", paddingLeft: "5rem" } }, /* @__PURE__ */ React2.createElement("img", { src: front_default, alt: "Front", style: { height: "100%" } }))
350
+ /* @__PURE__ */ React4.createElement("div", { style: { paddingLeft: "8rem", flex: 1 } }, children),
351
+ /* @__PURE__ */ React4.createElement("div", { style: { flex: "0 0", height: "100%", paddingLeft: "5rem" } }, /* @__PURE__ */ React4.createElement("img", { src: front_default, alt: "Front", style: { height: "100%" } }))
64
352
  );
65
353
  };
66
354
 
67
355
  // src/layouts/SectionLayout.tsx
68
- import styled from "styled-components";
69
- var SectionLayout = styled.div`
356
+ import styled3 from "styled-components";
357
+ var SectionLayout = styled3.div`
70
358
  display: flex;
71
359
  flex-direction: row;
72
360
  align-items: center;
@@ -80,12 +368,12 @@ var SectionLayout = styled.div`
80
368
  `;
81
369
 
82
370
  // src/layouts/SideCodeLayout.tsx
83
- import React5 from "react";
371
+ import React6 from "react";
84
372
 
85
373
  // src/layouts/columns.tsx
86
- import React3 from "react";
87
- import styled2 from "styled-components";
88
- var DivWithHeading = styled2.div`
374
+ import React5 from "react";
375
+ import styled4 from "styled-components";
376
+ var DivWithHeading = styled4.div`
89
377
  h2 {
90
378
  margin-top: 0;
91
379
  }
@@ -94,7 +382,7 @@ var DivWithHeading = styled2.div`
94
382
  font-weight: 400;
95
383
  }
96
384
  `;
97
- var ColumnsContainer = styled2(DivWithHeading)`
385
+ var ColumnsContainer = styled4(DivWithHeading)`
98
386
  display: flex;
99
387
  flex-direction: row;
100
388
  position: absolute;
@@ -108,15 +396,15 @@ function ColumnsLayout({
108
396
  children,
109
397
  reverse
110
398
  }) {
111
- const childrenArray = React3.Children.toArray(children);
112
- return /* @__PURE__ */ React3.createElement(
399
+ const childrenArray = React5.Children.toArray(children);
400
+ return /* @__PURE__ */ React5.createElement(
113
401
  ColumnsContainer,
114
402
  {
115
403
  style: {
116
404
  flexDirection: reverse ? "row-reverse" : "row"
117
405
  }
118
406
  },
119
- childrenArray.map((child, i) => /* @__PURE__ */ React3.createElement(
407
+ childrenArray.map((child, i) => /* @__PURE__ */ React5.createElement(
120
408
  "div",
121
409
  {
122
410
  key: i,
@@ -134,57 +422,9 @@ function ColumnsLayout({
134
422
  );
135
423
  }
136
424
 
137
- // src/layouts/utils.ts
138
- import React4 from "react";
139
- var Margins = {
140
- vertical: "4rem",
141
- horizontal: "7rem",
142
- horizontalInternal: "2rem"
143
- };
144
- function getCode(children) {
145
- const allChild = React4.Children.toArray(children);
146
- if (allChild.length === 0)
147
- return [null, allChild];
148
- const index = allChild.findIndex((child) => {
149
- if (!React4.isValidElement(child))
150
- return false;
151
- return child.props.originalType === "pre";
152
- });
153
- if (index === -1)
154
- return [null, allChild];
155
- const candidate = allChild[index];
156
- const rest = allChild.filter((_, i) => i !== index);
157
- return [candidate, rest];
158
- }
159
- function getMatchingMdxType(children, mdxType) {
160
- const allChild = React4.Children.toArray(children);
161
- const matchFn = (child) => {
162
- if (!React4.isValidElement(child))
163
- return false;
164
- if (typeof child.type !== "function")
165
- return false;
166
- if ("mdxType" in child.type === false)
167
- return false;
168
- return child.type.mdxType === mdxType;
169
- };
170
- const matches = allChild.filter(matchFn);
171
- const rest = allChild.filter((child) => !matchFn(child));
172
- return [matches, rest];
173
- }
174
- function getCodeChildren(children) {
175
- const [code, rest] = getCode(children);
176
- if (code)
177
- return [code, rest];
178
- const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
179
- if (codeStepper.length > 0)
180
- return [codeStepper, rest2];
181
- const [codes, rest3] = getMatchingMdxType(children, "FilePane");
182
- return [codes, rest3];
183
- }
184
-
185
425
  // src/layouts/SideCodeLayout.tsx
186
- import styled3 from "styled-components";
187
- var CodeSide = styled3.div`
426
+ import styled5 from "styled-components";
427
+ var CodeSide = styled5.div`
188
428
  pre {
189
429
  font-size: 0.9rem;
190
430
  }
@@ -194,7 +434,7 @@ function SidedCodeLayout({
194
434
  position = "right"
195
435
  }) {
196
436
  const [code, rest] = getCodeChildren(children);
197
- return /* @__PURE__ */ React5.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React5.createElement(
437
+ return /* @__PURE__ */ React6.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React6.createElement(
198
438
  "div",
199
439
  {
200
440
  style: {
@@ -203,7 +443,7 @@ function SidedCodeLayout({
203
443
  }
204
444
  },
205
445
  rest
206
- ), /* @__PURE__ */ React5.createElement(
446
+ ), /* @__PURE__ */ React6.createElement(
207
447
  CodeSide,
208
448
  {
209
449
  style: {
@@ -219,15 +459,15 @@ function SidedCodeLayout({
219
459
  }
220
460
 
221
461
  // src/layouts/SideImageLayout.tsx
222
- import React7 from "react";
223
- import styled5 from "styled-components";
462
+ import React8 from "react";
463
+ import styled7 from "styled-components";
224
464
 
225
465
  // src/components/Image.tsx
226
- import React6 from "react";
466
+ import React7 from "react";
227
467
 
228
468
  // src/layouts/styled.ts
229
- import styled4 from "styled-components";
230
- var SVGObject = styled4.object`
469
+ import styled6 from "styled-components";
470
+ var SVGObject = styled6.object`
231
471
  padding: 3rem 2rem;
232
472
  box-sizing: border-box;
233
473
  background-color: white;
@@ -237,7 +477,7 @@ var SVGObject = styled4.object`
237
477
  function Image(props) {
238
478
  const { src, height } = props;
239
479
  if (!(src == null ? void 0 : src.endsWith(".svg"))) {
240
- return /* @__PURE__ */ React6.createElement(
480
+ return /* @__PURE__ */ React7.createElement(
241
481
  "img",
242
482
  {
243
483
  src,
@@ -250,7 +490,7 @@ function Image(props) {
250
490
  }
251
491
  );
252
492
  }
253
- return /* @__PURE__ */ React6.createElement(
493
+ return /* @__PURE__ */ React7.createElement(
254
494
  SVGObject,
255
495
  {
256
496
  type: "image/svg+xml",
@@ -266,7 +506,7 @@ function Image(props) {
266
506
  Image.mdxType = "Image";
267
507
 
268
508
  // src/layouts/SideImageLayout.tsx
269
- var DivWithHeading2 = styled5.div`
509
+ var DivWithHeading2 = styled7.div`
270
510
  h2 {
271
511
  margin-top: 0;
272
512
  }
@@ -287,7 +527,7 @@ var SidedImageLayout = ({
287
527
  console.error("No image provided for SidedImageLayout");
288
528
  return null;
289
529
  }
290
- return /* @__PURE__ */ React7.createElement(
530
+ return /* @__PURE__ */ React8.createElement(
291
531
  DivWithHeading2,
292
532
  {
293
533
  style: {
@@ -300,7 +540,7 @@ var SidedImageLayout = ({
300
540
  top: 0
301
541
  }
302
542
  },
303
- /* @__PURE__ */ React7.createElement(
543
+ /* @__PURE__ */ React8.createElement(
304
544
  "div",
305
545
  {
306
546
  style: {
@@ -313,7 +553,7 @@ var SidedImageLayout = ({
313
553
  },
314
554
  rest
315
555
  ),
316
- /* @__PURE__ */ React7.createElement(
556
+ /* @__PURE__ */ React8.createElement(
317
557
  "div",
318
558
  {
319
559
  style: {
@@ -325,19 +565,19 @@ var SidedImageLayout = ({
325
565
  backgroundColor: "white"
326
566
  }
327
567
  },
328
- component || /* @__PURE__ */ React7.createElement(Image, { src: image })
568
+ component || /* @__PURE__ */ React8.createElement(Image, { src: image })
329
569
  )
330
570
  );
331
571
  };
332
572
 
333
573
  // src/layouts/SideLayout.tsx
334
- import React8 from "react";
574
+ import React9 from "react";
335
575
  function SideLayout({
336
576
  children,
337
577
  position = "right"
338
578
  }) {
339
579
  const [side, rest] = getMatchingMdxType(children, "Side");
340
- return /* @__PURE__ */ React8.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React8.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ React8.createElement(
580
+ return /* @__PURE__ */ React9.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React9.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ React9.createElement(
341
581
  "div",
342
582
  {
343
583
  style: {
@@ -357,6 +597,8 @@ function SideLayout({
357
597
  // src/layouts/index.tsx
358
598
  var layouts_default = {
359
599
  mainSection: MainSectionLayout,
600
+ centered: CenteredLayout,
601
+ default3: Default3Layout,
360
602
  sidedCode: SidedCodeLayout,
361
603
  sidedImage: SidedImageLayout,
362
604
  side: SideLayout,
@@ -389,11 +631,11 @@ var theme_default = {
389
631
  };
390
632
 
391
633
  // src/template.tsx
392
- import React9 from "react";
634
+ import React10 from "react";
393
635
  import { Box, FullScreen } from "spectacle";
394
636
  var template = ({ slideNumber, numberOfSlides }) => {
395
637
  const percentage = slideNumber / numberOfSlides * 100;
396
- return /* @__PURE__ */ React9.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ React9.createElement(Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ React9.createElement(FullScreen, null)), /* @__PURE__ */ React9.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ React9.createElement(
638
+ return /* @__PURE__ */ React10.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ React10.createElement(Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ React10.createElement(FullScreen, null)), /* @__PURE__ */ React10.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ React10.createElement(
397
639
  "div",
398
640
  {
399
641
  style: {
@@ -407,31 +649,31 @@ var template = ({ slideNumber, numberOfSlides }) => {
407
649
  };
408
650
 
409
651
  // src/components/map.tsx
410
- import React12 from "react";
652
+ import React13 from "react";
411
653
  import { mdxComponentMap } from "spectacle";
412
654
 
413
655
  // src/components/styled.tsx
414
- import React10 from "react";
656
+ import React11 from "react";
415
657
  import {
416
658
  Link as SpectacleLink,
417
659
  Image as SpectacleImage,
418
660
  Heading,
419
661
  FlexBox as FlexBox2
420
662
  } from "spectacle";
421
- import styled6 from "styled-components";
422
- var StyledImage = styled6(SpectacleImage)`
663
+ import styled8 from "styled-components";
664
+ var StyledImage = styled8(SpectacleImage)`
423
665
  object-fit: contain;
424
666
  max-height: 30vh;
425
667
  max-width: 70vw;
426
668
  `;
427
- var Image2 = (props) => /* @__PURE__ */ React10.createElement(FlexBox2, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ React10.createElement(StyledImage, { ...props }));
428
- var CustomHeading = styled6(Heading)`
669
+ var Image2 = (props) => /* @__PURE__ */ React11.createElement(FlexBox2, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ React11.createElement(StyledImage, { ...props }));
670
+ var CustomHeading = styled8(Heading)`
429
671
  strong {
430
672
  color: #f49676;
431
673
  font-weight: 500;
432
674
  }
433
675
  `;
434
- var CustomQuote = styled6.blockquote`
676
+ var CustomQuote = styled8.blockquote`
435
677
  margin: 1rem 0;
436
678
  padding-left: 1.5rem;
437
679
  padding-top: 0;
@@ -442,7 +684,7 @@ var CustomQuote = styled6.blockquote`
442
684
  padding: 0 !important;
443
685
  }
444
686
  `;
445
- var InlineCode = styled6.code`
687
+ var InlineCode = styled8.code`
446
688
  filter: brightness(1.05);
447
689
  zoom: 1.1;
448
690
  &:before,
@@ -451,12 +693,12 @@ var InlineCode = styled6.code`
451
693
  font-size: 0.8em;
452
694
  }
453
695
  `;
454
- var HeadingTwo = styled6.h2`
696
+ var HeadingTwo = styled8.h2`
455
697
  font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
456
698
  font-size: 55px;
457
699
  font-weight: 400;
458
700
  `;
459
- var HeadingThree = styled6.h3`
701
+ var HeadingThree = styled8.h3`
460
702
  font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
461
703
  font-size: 40px;
462
704
  font-weight: 400;
@@ -469,12 +711,12 @@ var HeadingThree = styled6.h3`
469
711
  `;
470
712
 
471
713
  // src/components/CodeStepper/CodeStepper.tsx
472
- import React11 from "react";
714
+ import React12 from "react";
473
715
  import ReactIs from "react-is";
474
716
  import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
475
717
  import gruvboxDark from "react-syntax-highlighter/dist/cjs/styles/prism/gruvbox-dark";
476
718
  import { Stepper } from "spectacle";
477
- import styled7 from "styled-components";
719
+ import styled9 from "styled-components";
478
720
 
479
721
  // src/components/CodeStepper/code-directives.ts
480
722
  function range(start, end) {
@@ -538,7 +780,7 @@ function parseStepDirectives(directives) {
538
780
 
539
781
  // src/components/CodeStepper/CodeStepper.tsx
540
782
  var Highlighter = SyntaxHighlighter;
541
- var CodeContainer = styled7.div`
783
+ var CodeContainer = styled9.div`
542
784
  pre {
543
785
  padding: 1rem 0rem !important;
544
786
  background-color: transparent !important;
@@ -559,7 +801,7 @@ var CodeContainer = styled7.div`
559
801
  }
560
802
  `;
561
803
  function useCodeSteps(code) {
562
- return React11.useMemo(() => {
804
+ return React12.useMemo(() => {
563
805
  const prefixes = code.match(/(?:\/\/|<!--) @.*\n/g) || [];
564
806
  const prefixesLength = prefixes.reduce(
565
807
  (acc, prefix) => acc + prefix.length,
@@ -579,8 +821,8 @@ function useCodeSteps(code) {
579
821
  }, [code]);
580
822
  }
581
823
  function getCodeDetails(children) {
582
- const child = React11.Children.toArray(children)[0];
583
- if (!React11.isValidElement(child)) {
824
+ const child = React12.Children.toArray(children)[0];
825
+ if (!React12.isValidElement(child)) {
584
826
  return {
585
827
  language: "",
586
828
  code: ReactIs.isFragment(child) ? "" : String(child || "")
@@ -598,7 +840,7 @@ function CodeWrapper({
598
840
  hasName,
599
841
  children
600
842
  }) {
601
- return /* @__PURE__ */ React11.createElement(
843
+ return /* @__PURE__ */ React12.createElement(
602
844
  "div",
603
845
  {
604
846
  style: {
@@ -608,7 +850,7 @@ function CodeWrapper({
608
850
  borderRadius: "4px"
609
851
  }
610
852
  },
611
- name && /* @__PURE__ */ React11.createElement(
853
+ name && /* @__PURE__ */ React12.createElement(
612
854
  "span",
613
855
  {
614
856
  style: {
@@ -625,7 +867,7 @@ function CodeWrapper({
625
867
  name
626
868
  ),
627
869
  children,
628
- hasName && /* @__PURE__ */ React11.createElement(
870
+ hasName && /* @__PURE__ */ React12.createElement(
629
871
  "span",
630
872
  {
631
873
  style: {
@@ -640,7 +882,7 @@ function CodeWrapper({
640
882
  fontStyle: "italic"
641
883
  }
642
884
  },
643
- stepName || /* @__PURE__ */ React11.createElement("span", { style: { visibility: "hidden" } }, "Step")
885
+ stepName || /* @__PURE__ */ React12.createElement("span", { style: { visibility: "hidden" } }, "Step")
644
886
  )
645
887
  );
646
888
  }
@@ -649,7 +891,7 @@ function CodeStepper({
649
891
  name,
650
892
  ...props
651
893
  }) {
652
- const { language, code } = React11.useMemo(() => {
894
+ const { language, code } = React12.useMemo(() => {
653
895
  return getCodeDetails(props.children);
654
896
  }, [props.children]);
655
897
  const {
@@ -659,21 +901,21 @@ function CodeStepper({
659
901
  hasSteps,
660
902
  hasName
661
903
  } = useCodeSteps(code);
662
- return /* @__PURE__ */ React11.createElement(CodeContainer, null, import.meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ React11.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ React11.createElement(Highlighter, { language, style: gruvboxDark }, prefixes.join(""))), /* @__PURE__ */ React11.createElement(
904
+ return /* @__PURE__ */ React12.createElement(CodeContainer, null, import.meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ React12.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ React12.createElement(Highlighter, { language, style: gruvboxDark }, prefixes.join(""))), /* @__PURE__ */ React12.createElement(
663
905
  Stepper,
664
906
  {
665
907
  values: steps,
666
908
  alwaysVisible: !hasSteps,
667
909
  priority: priority ? priority + 1 : void 0
668
910
  },
669
- (step, _, isActive) => /* @__PURE__ */ React11.createElement(
911
+ (step, _, isActive) => /* @__PURE__ */ React12.createElement(
670
912
  CodeWrapper,
671
913
  {
672
914
  name,
673
915
  stepName: step == null ? void 0 : step.name,
674
916
  hasName
675
917
  },
676
- /* @__PURE__ */ React11.createElement(
918
+ /* @__PURE__ */ React12.createElement(
677
919
  Highlighter,
678
920
  {
679
921
  language,
@@ -723,7 +965,7 @@ CodeStepper.mdxType = "CodeStepper";
723
965
  // src/components/map.tsx
724
966
  var componentsMap = {
725
967
  ...mdxComponentMap,
726
- inlineCode: (props) => /* @__PURE__ */ React12.createElement(
968
+ inlineCode: (props) => /* @__PURE__ */ React13.createElement(
727
969
  InlineCode,
728
970
  {
729
971
  ...props,
@@ -733,7 +975,7 @@ var componentsMap = {
733
975
  }
734
976
  }
735
977
  ),
736
- table: (props) => /* @__PURE__ */ React12.createElement(
978
+ table: (props) => /* @__PURE__ */ React13.createElement(
737
979
  "table",
738
980
  {
739
981
  ...props,
@@ -744,7 +986,7 @@ var componentsMap = {
744
986
  }
745
987
  }
746
988
  ),
747
- tr: (props) => /* @__PURE__ */ React12.createElement(
989
+ tr: (props) => /* @__PURE__ */ React13.createElement(
748
990
  "tr",
749
991
  {
750
992
  ...props,
@@ -756,7 +998,7 @@ var componentsMap = {
756
998
  }
757
999
  }
758
1000
  ),
759
- td: (props) => /* @__PURE__ */ React12.createElement(
1001
+ td: (props) => /* @__PURE__ */ React13.createElement(
760
1002
  "td",
761
1003
  {
762
1004
  ...props,
@@ -769,7 +1011,7 @@ var componentsMap = {
769
1011
  }
770
1012
  }
771
1013
  ),
772
- h1: (props) => /* @__PURE__ */ React12.createElement(
1014
+ h1: (props) => /* @__PURE__ */ React13.createElement(
773
1015
  CustomHeading,
774
1016
  {
775
1017
  fontSize: "h1",
@@ -784,15 +1026,15 @@ var componentsMap = {
784
1026
  },
785
1027
  props.children
786
1028
  ),
787
- h2: (props) => /* @__PURE__ */ React12.createElement(HeadingTwo, null, props.children),
788
- h3: (props) => /* @__PURE__ */ React12.createElement(HeadingThree, { ...props }),
789
- img: (props) => /* @__PURE__ */ React12.createElement(Image2, { ...props }),
1029
+ h2: (props) => /* @__PURE__ */ React13.createElement(HeadingTwo, null, props.children),
1030
+ h3: (props) => /* @__PURE__ */ React13.createElement(HeadingThree, { ...props }),
1031
+ img: (props) => /* @__PURE__ */ React13.createElement(Image2, { ...props }),
790
1032
  pre: CodeStepper,
791
- li: (props) => /* @__PURE__ */ React12.createElement("li", { ...props, style: { margin: "24px 0" } }),
792
- Side: (props) => /* @__PURE__ */ React12.createElement("div", { ...props }),
1033
+ li: (props) => /* @__PURE__ */ React13.createElement("li", { ...props, style: { margin: "24px 0" } }),
1034
+ Side: (props) => /* @__PURE__ */ React13.createElement("div", { ...props }),
793
1035
  p: (props) => {
794
1036
  const Text = mdxComponentMap.p;
795
- return /* @__PURE__ */ React12.createElement(
1037
+ return /* @__PURE__ */ React13.createElement(
796
1038
  Text,
797
1039
  {
798
1040
  style: { margin: "8px 0", padding: "8px 0", lineHeight: "2rem" },
@@ -800,10 +1042,10 @@ var componentsMap = {
800
1042
  }
801
1043
  );
802
1044
  },
803
- blockquote: (props) => /* @__PURE__ */ React12.createElement(CustomQuote, { ...props }),
1045
+ blockquote: (props) => /* @__PURE__ */ React13.createElement(CustomQuote, { ...props }),
804
1046
  a: ({ children, ...props }) => {
805
1047
  const domain = new URL(props.href || "").hostname;
806
- return /* @__PURE__ */ React12.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ React12.createElement(
1048
+ return /* @__PURE__ */ React13.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ React13.createElement(
807
1049
  "small",
808
1050
  {
809
1051
  style: {
@@ -819,14 +1061,14 @@ var componentsMap = {
819
1061
  var map_default = componentsMap;
820
1062
 
821
1063
  // src/components/FilePane.tsx
822
- import React13 from "react";
1064
+ import React14 from "react";
823
1065
  function FilePane({
824
1066
  name,
825
1067
  children,
826
1068
  priority,
827
1069
  ...divProps
828
1070
  }) {
829
- return React13.isValidElement(children) ? React13.cloneElement(children, {
1071
+ return React14.isValidElement(children) ? React14.cloneElement(children, {
830
1072
  // @ts-expect-error cloning
831
1073
  priority,
832
1074
  name
@@ -835,14 +1077,14 @@ function FilePane({
835
1077
  FilePane.mdxType = "FilePane";
836
1078
 
837
1079
  // src/components/ItemsColumn.tsx
838
- import React14 from "react";
1080
+ import React15 from "react";
839
1081
  import { Stepper as Stepper2 } from "spectacle";
840
- import styled8 from "styled-components";
1082
+ import styled10 from "styled-components";
841
1083
  import { useSpring, animated } from "react-spring";
842
1084
  function ItemsColumn(divProps) {
843
1085
  const { style, children, ...props } = divProps;
844
- const childrenArray = React14.Children.toArray(children);
845
- return /* @__PURE__ */ React14.createElement(Stepper2, { values: childrenArray }, (value, step) => /* @__PURE__ */ React14.createElement(
1086
+ const childrenArray = React15.Children.toArray(children);
1087
+ return /* @__PURE__ */ React15.createElement(Stepper2, { values: childrenArray }, (value, step) => /* @__PURE__ */ React15.createElement(
846
1088
  "div",
847
1089
  {
848
1090
  style: {
@@ -856,14 +1098,14 @@ function ItemsColumn(divProps) {
856
1098
  },
857
1099
  childrenArray.map((child, index) => {
858
1100
  const isVisible = index <= step;
859
- if (!React14.isValidElement(child)) {
1101
+ if (!React15.isValidElement(child)) {
860
1102
  return child;
861
1103
  }
862
- return /* @__PURE__ */ React14.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
1104
+ return /* @__PURE__ */ React15.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
863
1105
  })
864
1106
  ));
865
1107
  }
866
- var ItemColumnWrapperStyled = styled8(animated.div)`
1108
+ var ItemColumnWrapperStyled = styled10(animated.div)`
867
1109
  * {
868
1110
  text-align: center !important;
869
1111
  }
@@ -874,15 +1116,15 @@ function ItemColumnWrapper({
874
1116
  ...props
875
1117
  }) {
876
1118
  const styles = useSpring({ opacity: isVisible ? 1 : 0 });
877
- return /* @__PURE__ */ React14.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
1119
+ return /* @__PURE__ */ React15.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
878
1120
  }
879
1121
 
880
1122
  // src/components/HorizontalList.tsx
881
- import React15 from "react";
1123
+ import React16 from "react";
882
1124
  import { animated as animated2, useSpring as useSpring2 } from "react-spring";
883
1125
  import { Stepper as Stepper3 } from "spectacle";
884
- import styled9 from "styled-components";
885
- var Container = styled9.div`
1126
+ import styled11 from "styled-components";
1127
+ var Container = styled11.div`
886
1128
  display: grid;
887
1129
  grid-gap: 2rem;
888
1130
  `;
@@ -890,8 +1132,8 @@ function HorizontalList({
890
1132
  children,
891
1133
  columns = 3
892
1134
  }) {
893
- const items = React15.Children.toArray(children);
894
- return /* @__PURE__ */ React15.createElement(Stepper3, { values: items }, (_, step) => /* @__PURE__ */ React15.createElement(
1135
+ const items = React16.Children.toArray(children);
1136
+ return /* @__PURE__ */ React16.createElement(Stepper3, { values: items }, (_, step) => /* @__PURE__ */ React16.createElement(
895
1137
  Container,
896
1138
  {
897
1139
  style: {
@@ -899,10 +1141,10 @@ function HorizontalList({
899
1141
  }
900
1142
  },
901
1143
  items.map((item, k) => {
902
- if (!React15.isValidElement(item)) {
1144
+ if (!React16.isValidElement(item)) {
903
1145
  return item;
904
1146
  }
905
- return React15.cloneElement(item, {
1147
+ return React16.cloneElement(item, {
906
1148
  // @ts-expect-error cloning
907
1149
  position: k + 1,
908
1150
  isVisible: k <= step,
@@ -912,12 +1154,12 @@ function HorizontalList({
912
1154
  ));
913
1155
  }
914
1156
  function Pill({ position }) {
915
- return /* @__PURE__ */ React15.createElement(
1157
+ return /* @__PURE__ */ React16.createElement(
916
1158
  "div",
917
1159
  {
918
1160
  style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
919
1161
  },
920
- /* @__PURE__ */ React15.createElement(
1162
+ /* @__PURE__ */ React16.createElement(
921
1163
  "svg",
922
1164
  {
923
1165
  width: "48",
@@ -926,14 +1168,14 @@ function Pill({ position }) {
926
1168
  fill: "none",
927
1169
  xmlns: "http://www.w3.org/2000/svg"
928
1170
  },
929
- /* @__PURE__ */ React15.createElement(
1171
+ /* @__PURE__ */ React16.createElement(
930
1172
  "path",
931
1173
  {
932
1174
  d: "M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z",
933
1175
  fill: "#ffffff"
934
1176
  }
935
1177
  ),
936
- /* @__PURE__ */ React15.createElement(
1178
+ /* @__PURE__ */ React16.createElement(
937
1179
  "text",
938
1180
  {
939
1181
  x: "9",
@@ -945,7 +1187,7 @@ function Pill({ position }) {
945
1187
  },
946
1188
  position
947
1189
  ),
948
- /* @__PURE__ */ React15.createElement(
1190
+ /* @__PURE__ */ React16.createElement(
949
1191
  "path",
950
1192
  {
951
1193
  d: "M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z",
@@ -955,12 +1197,12 @@ function Pill({ position }) {
955
1197
  )
956
1198
  );
957
1199
  }
958
- var Item = styled9(animated2.div)`
1200
+ var Item = styled11(animated2.div)`
959
1201
  display: flex;
960
1202
  flex-direction: column;
961
1203
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
962
1204
  `;
963
- var ItemHead = styled9.div`
1205
+ var ItemHead = styled11.div`
964
1206
  display: flex;
965
1207
  flex-direction: row;
966
1208
  font-size: 1.3rem;
@@ -970,7 +1212,7 @@ var ItemHead = styled9.div`
970
1212
  margin: 0;
971
1213
  }
972
1214
  `;
973
- var ItemContent = styled9.div`
1215
+ var ItemContent = styled11.div`
974
1216
  > * {
975
1217
  font-size: 1rem;
976
1218
  padding: 4px !important;
@@ -998,11 +1240,11 @@ function HorizontalListItem({
998
1240
  const opacityStyles = useSpring2({
999
1241
  opacity: getItemOpacity({ isVisible, isLast })
1000
1242
  });
1001
- return /* @__PURE__ */ React15.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ React15.createElement(ItemHead, null, /* @__PURE__ */ React15.createElement(Pill, { position }), /* @__PURE__ */ React15.createElement("p", null, title)), /* @__PURE__ */ React15.createElement(ItemContent, null, children));
1243
+ return /* @__PURE__ */ React16.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ React16.createElement(ItemHead, null, /* @__PURE__ */ React16.createElement(Pill, { position }), /* @__PURE__ */ React16.createElement("p", null, title)), /* @__PURE__ */ React16.createElement(ItemContent, null, children));
1002
1244
  }
1003
1245
 
1004
1246
  // src/components/Timeline.tsx
1005
- import React16 from "react";
1247
+ import React17 from "react";
1006
1248
  import { animated as animated3, useSpring as useSpring3 } from "react-spring";
1007
1249
  import classnames from "classnames";
1008
1250
  import { Stepper as Stepper4 } from "spectacle";
@@ -1012,13 +1254,13 @@ var Timeline_module_default = {};
1012
1254
 
1013
1255
  // src/components/Timeline.tsx
1014
1256
  function Timeline(props) {
1015
- const children = React16.Children.toArray(props.children);
1016
- return /* @__PURE__ */ React16.createElement(Stepper4, { ...props, values: children, className: Timeline_module_default["timeline"] }, (value, step) => {
1257
+ const children = React17.Children.toArray(props.children);
1258
+ return /* @__PURE__ */ React17.createElement(Stepper4, { ...props, values: children, className: Timeline_module_default["timeline"] }, (value, step) => {
1017
1259
  return children.map((child, index) => {
1018
- if (!React16.isValidElement(child)) {
1260
+ if (!React17.isValidElement(child)) {
1019
1261
  return child;
1020
1262
  }
1021
- return React16.cloneElement(child, {
1263
+ return React17.cloneElement(child, {
1022
1264
  // @ts-expect-error cloning
1023
1265
  isPhantom: step < index,
1024
1266
  isLast: step === index
@@ -1045,7 +1287,7 @@ function TimelineItem(props) {
1045
1287
  opacity: getItemOpacity2({ isPhantom, isLast })
1046
1288
  });
1047
1289
  const colorStyles = useSpring3({ opacity: isPhantom || isLast ? 1 : 0.15 });
1048
- return /* @__PURE__ */ React16.createElement(
1290
+ return /* @__PURE__ */ React17.createElement(
1049
1291
  animated3.div,
1050
1292
  {
1051
1293
  ...rest,
@@ -1054,7 +1296,7 @@ function TimelineItem(props) {
1054
1296
  ...appearStyles
1055
1297
  }
1056
1298
  },
1057
- /* @__PURE__ */ React16.createElement(
1299
+ /* @__PURE__ */ React17.createElement(
1058
1300
  "div",
1059
1301
  {
1060
1302
  className: classnames(
@@ -1062,21 +1304,21 @@ function TimelineItem(props) {
1062
1304
  Timeline_module_default["timelineItemContentPhantom"]
1063
1305
  )
1064
1306
  },
1065
- /* @__PURE__ */ React16.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title),
1066
- /* @__PURE__ */ React16.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children)
1307
+ /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title),
1308
+ /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children)
1067
1309
  ),
1068
- /* @__PURE__ */ React16.createElement(animated3.div, { className: Timeline_module_default["timelineItemGuide"], style: colorStyles }, /* @__PURE__ */ React16.createElement(Hexagon, null), /* @__PURE__ */ React16.createElement(
1310
+ /* @__PURE__ */ React17.createElement(animated3.div, { className: Timeline_module_default["timelineItemGuide"], style: colorStyles }, /* @__PURE__ */ React17.createElement(Hexagon, null), /* @__PURE__ */ React17.createElement(
1069
1311
  animated3.div,
1070
1312
  {
1071
1313
  className: Timeline_module_default["timelineItemGuideLine"],
1072
1314
  style: guideLineProps
1073
1315
  }
1074
1316
  )),
1075
- /* @__PURE__ */ React16.createElement("div", { className: Timeline_module_default["timelineItemContent"] }, /* @__PURE__ */ React16.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title), /* @__PURE__ */ React16.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children))
1317
+ /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemContent"] }, /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title), /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children))
1076
1318
  );
1077
1319
  }
1078
1320
  function Hexagon() {
1079
- return /* @__PURE__ */ React16.createElement(
1321
+ return /* @__PURE__ */ React17.createElement(
1080
1322
  "svg",
1081
1323
  {
1082
1324
  width: "18",
@@ -1085,14 +1327,14 @@ function Hexagon() {
1085
1327
  fill: "none",
1086
1328
  xmlns: "http://www.w3.org/2000/svg"
1087
1329
  },
1088
- /* @__PURE__ */ React16.createElement(
1330
+ /* @__PURE__ */ React17.createElement(
1089
1331
  "path",
1090
1332
  {
1091
1333
  d: "M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z",
1092
1334
  fill: "#F49676"
1093
1335
  }
1094
1336
  ),
1095
- /* @__PURE__ */ React16.createElement(
1337
+ /* @__PURE__ */ React17.createElement(
1096
1338
  "path",
1097
1339
  {
1098
1340
  d: "M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z",
@@ -1103,9 +1345,9 @@ function Hexagon() {
1103
1345
  }
1104
1346
 
1105
1347
  // src/components/IconBox.tsx
1106
- import React17 from "react";
1107
- import styled10 from "styled-components";
1108
- var IconBoxContent = styled10.div`
1348
+ import React18 from "react";
1349
+ import styled12 from "styled-components";
1350
+ var IconBoxContent = styled12.div`
1109
1351
  * {
1110
1352
  margin: 0.2rem !important;
1111
1353
  padding: 0 !important;
@@ -1115,7 +1357,7 @@ function IconBox({
1115
1357
  children,
1116
1358
  icon
1117
1359
  }) {
1118
- return /* @__PURE__ */ React17.createElement(
1360
+ return /* @__PURE__ */ React18.createElement(
1119
1361
  "div",
1120
1362
  {
1121
1363
  style: {
@@ -1125,14 +1367,14 @@ function IconBox({
1125
1367
  padding: "1rem 0"
1126
1368
  }
1127
1369
  },
1128
- /* @__PURE__ */ React17.createElement("div", { style: { fontSize: 60 } }, icon),
1129
- /* @__PURE__ */ React17.createElement(IconBoxContent, null, children)
1370
+ /* @__PURE__ */ React18.createElement("div", { style: { fontSize: 60 } }, icon),
1371
+ /* @__PURE__ */ React18.createElement(IconBoxContent, null, children)
1130
1372
  );
1131
1373
  }
1132
1374
 
1133
1375
  // src/index.tsx
1134
1376
  function PassThrough({ children }) {
1135
- return /* @__PURE__ */ React18.createElement(React18.Fragment, null, children);
1377
+ return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
1136
1378
  }
1137
1379
  function Layout({
1138
1380
  children,
@@ -1144,37 +1386,37 @@ function Layout({
1144
1386
  console.warn(`Layout ${layout} not found`);
1145
1387
  }
1146
1388
  if (Layout2) {
1147
- return /* @__PURE__ */ React18.createElement(Layout2, { ...frontmatter }, children);
1389
+ return /* @__PURE__ */ React19.createElement(Layout2, { ...frontmatter }, children);
1148
1390
  }
1149
- return /* @__PURE__ */ React18.createElement(React18.Fragment, null, children);
1391
+ return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
1150
1392
  }
1151
1393
  var componentsMap2 = {
1152
1394
  ...map_default,
1153
1395
  wrapper: Layout
1154
1396
  };
1155
1397
  function Deck({ deck }) {
1156
- React18.useEffect(() => {
1398
+ React19.useEffect(() => {
1157
1399
  document.title = deck.metadata.title || "Untitled";
1158
1400
  }, [deck.metadata.title]);
1159
- return /* @__PURE__ */ React18.createElement(React18.StrictMode, null, /* @__PURE__ */ React18.createElement(MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ React18.createElement(SpectacleDeck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
1401
+ return /* @__PURE__ */ React19.createElement(React19.StrictMode, null, /* @__PURE__ */ React19.createElement(MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ React19.createElement(SpectacleDeck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
1160
1402
  const Component = slide.slideComponent;
1161
- return /* @__PURE__ */ React18.createElement(Slide, { key: i }, /* @__PURE__ */ React18.createElement(Component, null));
1403
+ return /* @__PURE__ */ React19.createElement(Slide, { key: i }, /* @__PURE__ */ React19.createElement(Component, null));
1162
1404
  }))));
1163
1405
  }
1164
1406
  function Danger({ children }) {
1165
- return /* @__PURE__ */ React18.createElement("div", { style: { color: "red" } }, children);
1407
+ return /* @__PURE__ */ React19.createElement("div", { style: { color: "red" } }, children);
1166
1408
  }
1167
1409
  function Doc({ children }) {
1168
- return /* @__PURE__ */ React18.createElement("div", { style: { color: "blue" } }, children);
1410
+ return /* @__PURE__ */ React19.createElement("div", { style: { color: "blue" } }, children);
1169
1411
  }
1170
1412
  function Information({ children }) {
1171
- return /* @__PURE__ */ React18.createElement("div", { style: { color: "orange" } }, children);
1413
+ return /* @__PURE__ */ React19.createElement("div", { style: { color: "orange" } }, children);
1172
1414
  }
1173
1415
  function Success({ children }) {
1174
- return /* @__PURE__ */ React18.createElement("div", { style: { color: "green" } }, children);
1416
+ return /* @__PURE__ */ React19.createElement("div", { style: { color: "green" } }, children);
1175
1417
  }
1176
1418
  function Side({ children }) {
1177
- return /* @__PURE__ */ React18.createElement("div", null, children);
1419
+ return /* @__PURE__ */ React19.createElement("div", null, children);
1178
1420
  }
1179
1421
  Side.mdxType = "Side";
1180
1422
  export {