@gpichot/spectacle-deck 1.0.7 → 1.0.9

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.
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ export declare function Doc({ label, link, children, }: {
3
+ label: string;
4
+ link: string;
5
+ children: React.ReactNode;
6
+ }): React.JSX.Element;
7
+ export declare function DocItem({ label, link }: {
8
+ label: string;
9
+ link: string;
10
+ }): React.JSX.Element;
package/index.cjs CHANGED
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  // src/index.tsx
29
29
  var src_exports = {};
30
30
  __export(src_exports, {
31
+ Box: () => Box2,
31
32
  Danger: () => Danger,
32
33
  Deck: () => Deck,
33
34
  Doc: () => Doc,
@@ -45,10 +46,11 @@ __export(src_exports, {
45
46
  Side: () => Side,
46
47
  Success: () => Success,
47
48
  Timeline: () => Timeline,
48
- TimelineItem: () => TimelineItem
49
+ TimelineItem: () => TimelineItem,
50
+ Warning: () => Warning
49
51
  });
50
- var import_react19 = __toESM(require("react"));
51
- var import_react20 = require("@mdx-js/react");
52
+ var import_react20 = __toESM(require("react"));
53
+ var import_react21 = require("@mdx-js/react");
52
54
  var import_spectacle9 = require("spectacle");
53
55
 
54
56
  // src/layouts/CenteredLayout.tsx
@@ -1164,12 +1166,72 @@ function ItemColumnWrapper({
1164
1166
  return /* @__PURE__ */ import_react15.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
1165
1167
  }
1166
1168
 
1167
- // src/components/HorizontalList.tsx
1169
+ // src/components/DocumentationItem.tsx
1168
1170
  var import_react16 = __toESM(require("react"));
1171
+ var import_styled_components11 = __toESM(require("styled-components"));
1172
+ var DocWrapper = import_styled_components11.default.div`
1173
+ position: absolute;
1174
+ bottom: 0;
1175
+ right: 0;
1176
+ z-index: 10000;
1177
+
1178
+ .docContent {
1179
+ display: none;
1180
+ }
1181
+
1182
+ &:hover .docContent {
1183
+ display: flex;
1184
+ }
1185
+ `;
1186
+ var DocContainer = import_styled_components11.default.div`
1187
+ margin: 2rem 1rem;
1188
+ background-color: #333;
1189
+ border: 1px solid #333;
1190
+ padding: 0.5rem 1rem;
1191
+ border-radius: 1.5rem;
1192
+ `;
1193
+ var DocLink = import_styled_components11.default.a`
1194
+ text-decoration: none;
1195
+ font-weight: normal;
1196
+ font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1197
+ color: #f49676;
1198
+ `;
1199
+ var DocLinkItem = (0, import_styled_components11.default)(DocLink)`
1200
+ width: fit-content;
1201
+ display: inline-block;
1202
+ background-color: #333;
1203
+ border: 1px solid #333;
1204
+ padding: 0.5rem 1rem;
1205
+ border-radius: 1.5rem;
1206
+ margin: 0.25rem 0;
1207
+ `;
1208
+ var DocContent = import_styled_components11.default.div`
1209
+ display: flex;
1210
+ flex-flow: column-reverse nowrap;
1211
+ position: absolute;
1212
+ right: 1rem;
1213
+ bottom: 4.5rem;
1214
+ text-align: right;
1215
+ border-radius: 0.5rem;
1216
+ align-items: flex-end;
1217
+ `;
1218
+ function Doc({
1219
+ label,
1220
+ link,
1221
+ children
1222
+ }) {
1223
+ return /* @__PURE__ */ import_react16.default.createElement(DocWrapper, null, /* @__PURE__ */ import_react16.default.createElement(DocContainer, null, children && /* @__PURE__ */ import_react16.default.createElement(DocContent, null, children), /* @__PURE__ */ import_react16.default.createElement("div", null, /* @__PURE__ */ import_react16.default.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
1224
+ }
1225
+ function DocItem({ label, link }) {
1226
+ return /* @__PURE__ */ import_react16.default.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
1227
+ }
1228
+
1229
+ // src/components/HorizontalList.tsx
1230
+ var import_react17 = __toESM(require("react"));
1169
1231
  var import_react_spring2 = require("react-spring");
1170
1232
  var import_spectacle7 = require("spectacle");
1171
- var import_styled_components11 = __toESM(require("styled-components"));
1172
- var Container = import_styled_components11.default.div`
1233
+ var import_styled_components12 = __toESM(require("styled-components"));
1234
+ var Container = import_styled_components12.default.div`
1173
1235
  display: grid;
1174
1236
  grid-gap: 2rem;
1175
1237
  `;
@@ -1177,8 +1239,8 @@ function HorizontalList({
1177
1239
  children,
1178
1240
  columns = 3
1179
1241
  }) {
1180
- const items = import_react16.default.Children.toArray(children);
1181
- return /* @__PURE__ */ import_react16.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react16.default.createElement(
1242
+ const items = import_react17.default.Children.toArray(children);
1243
+ return /* @__PURE__ */ import_react17.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react17.default.createElement(
1182
1244
  Container,
1183
1245
  {
1184
1246
  style: {
@@ -1186,10 +1248,10 @@ function HorizontalList({
1186
1248
  }
1187
1249
  },
1188
1250
  items.map((item, k) => {
1189
- if (!import_react16.default.isValidElement(item)) {
1251
+ if (!import_react17.default.isValidElement(item)) {
1190
1252
  return item;
1191
1253
  }
1192
- return import_react16.default.cloneElement(item, {
1254
+ return import_react17.default.cloneElement(item, {
1193
1255
  // @ts-expect-error cloning
1194
1256
  position: k + 1,
1195
1257
  isVisible: k <= step,
@@ -1199,12 +1261,12 @@ function HorizontalList({
1199
1261
  ));
1200
1262
  }
1201
1263
  function Pill({ position }) {
1202
- return /* @__PURE__ */ import_react16.default.createElement(
1264
+ return /* @__PURE__ */ import_react17.default.createElement(
1203
1265
  "div",
1204
1266
  {
1205
1267
  style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
1206
1268
  },
1207
- /* @__PURE__ */ import_react16.default.createElement(
1269
+ /* @__PURE__ */ import_react17.default.createElement(
1208
1270
  "svg",
1209
1271
  {
1210
1272
  width: "48",
@@ -1213,14 +1275,14 @@ function Pill({ position }) {
1213
1275
  fill: "none",
1214
1276
  xmlns: "http://www.w3.org/2000/svg"
1215
1277
  },
1216
- /* @__PURE__ */ import_react16.default.createElement(
1278
+ /* @__PURE__ */ import_react17.default.createElement(
1217
1279
  "path",
1218
1280
  {
1219
1281
  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",
1220
1282
  fill: "#ffffff"
1221
1283
  }
1222
1284
  ),
1223
- /* @__PURE__ */ import_react16.default.createElement(
1285
+ /* @__PURE__ */ import_react17.default.createElement(
1224
1286
  "text",
1225
1287
  {
1226
1288
  x: "9",
@@ -1232,7 +1294,7 @@ function Pill({ position }) {
1232
1294
  },
1233
1295
  position
1234
1296
  ),
1235
- /* @__PURE__ */ import_react16.default.createElement(
1297
+ /* @__PURE__ */ import_react17.default.createElement(
1236
1298
  "path",
1237
1299
  {
1238
1300
  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",
@@ -1242,12 +1304,12 @@ function Pill({ position }) {
1242
1304
  )
1243
1305
  );
1244
1306
  }
1245
- var Item = (0, import_styled_components11.default)(import_react_spring2.animated.div)`
1307
+ var Item = (0, import_styled_components12.default)(import_react_spring2.animated.div)`
1246
1308
  display: flex;
1247
1309
  flex-direction: column;
1248
1310
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1249
1311
  `;
1250
- var ItemHead = import_styled_components11.default.div`
1312
+ var ItemHead = import_styled_components12.default.div`
1251
1313
  display: flex;
1252
1314
  flex-direction: row;
1253
1315
  font-size: 1.3rem;
@@ -1257,7 +1319,7 @@ var ItemHead = import_styled_components11.default.div`
1257
1319
  margin: 0;
1258
1320
  }
1259
1321
  `;
1260
- var ItemContent = import_styled_components11.default.div`
1322
+ var ItemContent = import_styled_components12.default.div`
1261
1323
  > * {
1262
1324
  font-size: 1rem;
1263
1325
  padding: 4px !important;
@@ -1285,31 +1347,31 @@ function HorizontalListItem({
1285
1347
  const opacityStyles = (0, import_react_spring2.useSpring)({
1286
1348
  opacity: getItemOpacity({ isVisible, isLast })
1287
1349
  });
1288
- return /* @__PURE__ */ import_react16.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react16.default.createElement(ItemHead, null, /* @__PURE__ */ import_react16.default.createElement(Pill, { position }), /* @__PURE__ */ import_react16.default.createElement("p", null, title)), /* @__PURE__ */ import_react16.default.createElement(ItemContent, null, children));
1350
+ return /* @__PURE__ */ import_react17.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react17.default.createElement(ItemHead, null, /* @__PURE__ */ import_react17.default.createElement(Pill, { position }), /* @__PURE__ */ import_react17.default.createElement("p", null, title)), /* @__PURE__ */ import_react17.default.createElement(ItemContent, null, children));
1289
1351
  }
1290
1352
 
1291
1353
  // src/components/Timeline.tsx
1292
- var import_react17 = __toESM(require("react"));
1354
+ var import_react18 = __toESM(require("react"));
1293
1355
  var import_react_spring3 = require("react-spring");
1294
1356
  var import_spectacle8 = require("spectacle");
1295
1357
 
1296
1358
  // src/components/Timeline.styled.tsx
1297
- var import_styled_components12 = __toESM(require("styled-components"));
1298
- var TimelineItemContent = import_styled_components12.default.div`
1359
+ var import_styled_components13 = __toESM(require("styled-components"));
1360
+ var TimelineItemContent = import_styled_components13.default.div`
1299
1361
  display: flex;
1300
1362
  padding: 0.7rem 0 1rem 12px;
1301
1363
  `;
1302
- var TimelineItemContentPhantom = (0, import_styled_components12.default)(TimelineItemContent)`
1364
+ var TimelineItemContentPhantom = (0, import_styled_components13.default)(TimelineItemContent)`
1303
1365
  opacity: 0;
1304
1366
  `;
1305
- var TimelineItemBody = import_styled_components12.default.div`
1367
+ var TimelineItemBody = import_styled_components13.default.div`
1306
1368
  &,
1307
1369
  & > * {
1308
1370
  font-size: 1.3rem !important;
1309
1371
  color: #ffffff !important;
1310
1372
  }
1311
1373
  `;
1312
- var TimelineItemTitle = import_styled_components12.default.div`
1374
+ var TimelineItemTitle = import_styled_components13.default.div`
1313
1375
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1314
1376
  font-size: 1rem;
1315
1377
  font-weight: bold;
@@ -1317,8 +1379,8 @@ var TimelineItemTitle = import_styled_components12.default.div`
1317
1379
  `;
1318
1380
 
1319
1381
  // src/components/Timeline.tsx
1320
- var import_styled_components13 = __toESM(require("styled-components"));
1321
- var TimelineItemStyled = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
1382
+ var import_styled_components14 = __toESM(require("styled-components"));
1383
+ var TimelineItemStyled = (0, import_styled_components14.default)(import_react_spring3.animated.div)`
1322
1384
  flex: 1;
1323
1385
  flex-flow: column nowrap;
1324
1386
  display: inline-flex;
@@ -1336,7 +1398,7 @@ var TimelineItemStyled = (0, import_styled_components13.default)(import_react_sp
1336
1398
  }
1337
1399
  }
1338
1400
  `;
1339
- var TimelineItemGuide = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
1401
+ var TimelineItemGuide = (0, import_styled_components14.default)(import_react_spring3.animated.div)`
1340
1402
  width: 100%;
1341
1403
  padding-top: 2px;
1342
1404
  display: flex;
@@ -1352,7 +1414,7 @@ var TimelineItemGuide = (0, import_styled_components13.default)(import_react_spr
1352
1414
  margin-right: 4px;
1353
1415
  }
1354
1416
  `;
1355
- var TimelineItemGuideLine = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
1417
+ var TimelineItemGuideLine = (0, import_styled_components14.default)(import_react_spring3.animated.div)`
1356
1418
  border-top: 4px solid #ffffff;
1357
1419
  margin-right: 4px;
1358
1420
  `;
@@ -1363,8 +1425,8 @@ var style = {
1363
1425
  alignItems: "center"
1364
1426
  };
1365
1427
  function Timeline(props) {
1366
- const children = import_react17.default.Children.toArray(props.children);
1367
- return /* @__PURE__ */ import_react17.default.createElement(
1428
+ const children = import_react18.default.Children.toArray(props.children);
1429
+ return /* @__PURE__ */ import_react18.default.createElement(
1368
1430
  import_spectacle8.Stepper,
1369
1431
  {
1370
1432
  ...props,
@@ -1374,10 +1436,10 @@ function Timeline(props) {
1374
1436
  },
1375
1437
  (value, step) => {
1376
1438
  return children.map((child, index) => {
1377
- if (!import_react17.default.isValidElement(child)) {
1439
+ if (!import_react18.default.isValidElement(child)) {
1378
1440
  return child;
1379
1441
  }
1380
- return import_react17.default.cloneElement(child, {
1442
+ return import_react18.default.cloneElement(child, {
1381
1443
  // @ts-expect-error cloning
1382
1444
  isPhantom: step < index,
1383
1445
  isLast: step === index
@@ -1405,7 +1467,7 @@ function TimelineItem(props) {
1405
1467
  opacity: getItemOpacity2({ isPhantom, isLast })
1406
1468
  });
1407
1469
  const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
1408
- return /* @__PURE__ */ import_react17.default.createElement(
1470
+ return /* @__PURE__ */ import_react18.default.createElement(
1409
1471
  TimelineItemStyled,
1410
1472
  {
1411
1473
  ...rest,
@@ -1413,13 +1475,13 @@ function TimelineItem(props) {
1413
1475
  ...appearStyles
1414
1476
  }
1415
1477
  },
1416
- /* @__PURE__ */ import_react17.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children)),
1417
- /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react17.default.createElement(Hexagon, null), /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
1418
- /* @__PURE__ */ import_react17.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children))
1478
+ /* @__PURE__ */ import_react18.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react18.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react18.default.createElement(TimelineItemBody, null, children)),
1479
+ /* @__PURE__ */ import_react18.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react18.default.createElement(Hexagon, null), /* @__PURE__ */ import_react18.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
1480
+ /* @__PURE__ */ import_react18.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react18.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react18.default.createElement(TimelineItemBody, null, children))
1419
1481
  );
1420
1482
  }
1421
1483
  function Hexagon() {
1422
- return /* @__PURE__ */ import_react17.default.createElement(
1484
+ return /* @__PURE__ */ import_react18.default.createElement(
1423
1485
  "svg",
1424
1486
  {
1425
1487
  width: "18",
@@ -1428,14 +1490,14 @@ function Hexagon() {
1428
1490
  fill: "none",
1429
1491
  xmlns: "http://www.w3.org/2000/svg"
1430
1492
  },
1431
- /* @__PURE__ */ import_react17.default.createElement(
1493
+ /* @__PURE__ */ import_react18.default.createElement(
1432
1494
  "path",
1433
1495
  {
1434
1496
  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",
1435
1497
  fill: "#F49676"
1436
1498
  }
1437
1499
  ),
1438
- /* @__PURE__ */ import_react17.default.createElement(
1500
+ /* @__PURE__ */ import_react18.default.createElement(
1439
1501
  "path",
1440
1502
  {
1441
1503
  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",
@@ -1446,9 +1508,9 @@ function Hexagon() {
1446
1508
  }
1447
1509
 
1448
1510
  // src/components/IconBox.tsx
1449
- var import_react18 = __toESM(require("react"));
1450
- var import_styled_components14 = __toESM(require("styled-components"));
1451
- var IconBoxContent = import_styled_components14.default.div`
1511
+ var import_react19 = __toESM(require("react"));
1512
+ var import_styled_components15 = __toESM(require("styled-components"));
1513
+ var IconBoxContent = import_styled_components15.default.div`
1452
1514
  * {
1453
1515
  margin: 0.2rem !important;
1454
1516
  padding: 0 !important;
@@ -1458,7 +1520,7 @@ function IconBox({
1458
1520
  children,
1459
1521
  icon
1460
1522
  }) {
1461
- return /* @__PURE__ */ import_react18.default.createElement(
1523
+ return /* @__PURE__ */ import_react19.default.createElement(
1462
1524
  "div",
1463
1525
  {
1464
1526
  style: {
@@ -1468,14 +1530,14 @@ function IconBox({
1468
1530
  padding: "1rem 0"
1469
1531
  }
1470
1532
  },
1471
- /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: 60 } }, icon),
1472
- /* @__PURE__ */ import_react18.default.createElement(IconBoxContent, null, children)
1533
+ /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: 60 } }, icon),
1534
+ /* @__PURE__ */ import_react19.default.createElement(IconBoxContent, null, children)
1473
1535
  );
1474
1536
  }
1475
1537
 
1476
1538
  // src/index.tsx
1477
1539
  function PassThrough({ children }) {
1478
- return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children);
1540
+ return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, children);
1479
1541
  }
1480
1542
  function Layout({
1481
1543
  children,
@@ -1487,44 +1549,44 @@ function Layout({
1487
1549
  console.warn(`Layout ${layout} not found`);
1488
1550
  }
1489
1551
  if (Layout2) {
1490
- return /* @__PURE__ */ import_react19.default.createElement(Layout2, { ...frontmatter }, children);
1552
+ return /* @__PURE__ */ import_react20.default.createElement(Layout2, { ...frontmatter }, children);
1491
1553
  }
1492
- return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children);
1554
+ return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, children);
1493
1555
  }
1494
1556
  var componentsMap2 = {
1495
1557
  ...map_default,
1496
1558
  wrapper: Layout
1497
1559
  };
1498
1560
  function Deck({ deck }) {
1499
- import_react19.default.useEffect(() => {
1561
+ import_react20.default.useEffect(() => {
1500
1562
  document.title = deck.metadata.title || "Untitled";
1501
1563
  }, [deck.metadata.title]);
1502
- return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.StrictMode, null, /* @__PURE__ */ import_react19.default.createElement(import_react20.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react19.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
1564
+ return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.StrictMode, null, /* @__PURE__ */ import_react20.default.createElement(import_react21.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react20.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
1503
1565
  const Component = slide.slideComponent;
1504
- return /* @__PURE__ */ import_react19.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react19.default.createElement(Component, null));
1566
+ return /* @__PURE__ */ import_react20.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react20.default.createElement(Component, null));
1505
1567
  }))));
1506
1568
  }
1507
1569
  function Danger({ children }) {
1508
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "red" } }, children);
1509
- }
1510
- function Doc({ children }) {
1511
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "blue" } }, children);
1570
+ return /* @__PURE__ */ import_react20.default.createElement("div", { style: { color: "red" } }, children);
1512
1571
  }
1513
1572
  function Information({ children }) {
1514
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "orange" } }, children);
1573
+ return /* @__PURE__ */ import_react20.default.createElement("div", { style: { color: "orange" } }, children);
1515
1574
  }
1516
1575
  function Success({ children }) {
1517
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "green" } }, children);
1576
+ return /* @__PURE__ */ import_react20.default.createElement("div", { style: { color: "green" } }, children);
1577
+ }
1578
+ function Warning({ children }) {
1579
+ return /* @__PURE__ */ import_react20.default.createElement("div", { style: { color: "yellow" } }, children);
1518
1580
  }
1519
1581
  function Side({ children }) {
1520
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1582
+ return /* @__PURE__ */ import_react20.default.createElement("div", null, children);
1521
1583
  }
1522
1584
  Side.mdxType = "Side";
1523
1585
  function Documentation({ children }) {
1524
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1586
+ return /* @__PURE__ */ import_react20.default.createElement("div", null, children);
1525
1587
  }
1526
- function DocItem({ children }) {
1527
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1588
+ function Box2({ children }) {
1589
+ return /* @__PURE__ */ import_react20.default.createElement("div", null, children);
1528
1590
  }
1529
1591
 
1530
1592
  // <stdin>
package/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  export { default as FilePane } from "./components/FilePane";
3
3
  export { ItemsColumn } from "./components/ItemsColumn";
4
+ export { Doc, DocItem } from "./components/DocumentationItem";
4
5
  export { Image } from "./components/Image";
5
6
  export { default as HorizontalList, HorizontalListItem, } from "./components/HorizontalList";
6
7
  export { default as Timeline, TimelineItem } from "./components/Timeline";
@@ -30,15 +31,15 @@ export declare function Deck({ deck }: {
30
31
  export declare function Danger({ children }: {
31
32
  children: React.ReactNode;
32
33
  }): React.JSX.Element;
33
- export declare function Doc({ children }: {
34
- children: React.ReactNode;
35
- }): React.JSX.Element;
36
34
  export declare function Information({ children }: {
37
35
  children: React.ReactNode;
38
36
  }): React.JSX.Element;
39
37
  export declare function Success({ children }: {
40
38
  children: React.ReactNode;
41
39
  }): React.JSX.Element;
40
+ export declare function Warning({ children }: {
41
+ children: React.ReactNode;
42
+ }): React.JSX.Element;
42
43
  export declare function Side({ children }: {
43
44
  children: React.ReactNode;
44
45
  }): React.JSX.Element;
@@ -48,6 +49,6 @@ export declare namespace Side {
48
49
  export declare function Documentation({ children }: {
49
50
  children: React.ReactNode;
50
51
  }): React.JSX.Element;
51
- export declare function DocItem({ children }: {
52
+ export declare function Box({ children }: {
52
53
  children: React.ReactNode;
53
54
  }): React.JSX.Element;
package/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/index.tsx
2
- import React19 from "react";
2
+ import React20 from "react";
3
3
  import { MDXProvider } from "@mdx-js/react";
4
4
  import { Deck as SpectacleDeck, Slide } from "spectacle";
5
5
 
@@ -1120,12 +1120,72 @@ function ItemColumnWrapper({
1120
1120
  return /* @__PURE__ */ React15.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
1121
1121
  }
1122
1122
 
1123
- // src/components/HorizontalList.tsx
1123
+ // src/components/DocumentationItem.tsx
1124
1124
  import React16 from "react";
1125
+ import styled11 from "styled-components";
1126
+ var DocWrapper = styled11.div`
1127
+ position: absolute;
1128
+ bottom: 0;
1129
+ right: 0;
1130
+ z-index: 10000;
1131
+
1132
+ .docContent {
1133
+ display: none;
1134
+ }
1135
+
1136
+ &:hover .docContent {
1137
+ display: flex;
1138
+ }
1139
+ `;
1140
+ var DocContainer = styled11.div`
1141
+ margin: 2rem 1rem;
1142
+ background-color: #333;
1143
+ border: 1px solid #333;
1144
+ padding: 0.5rem 1rem;
1145
+ border-radius: 1.5rem;
1146
+ `;
1147
+ var DocLink = styled11.a`
1148
+ text-decoration: none;
1149
+ font-weight: normal;
1150
+ font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1151
+ color: #f49676;
1152
+ `;
1153
+ var DocLinkItem = styled11(DocLink)`
1154
+ width: fit-content;
1155
+ display: inline-block;
1156
+ background-color: #333;
1157
+ border: 1px solid #333;
1158
+ padding: 0.5rem 1rem;
1159
+ border-radius: 1.5rem;
1160
+ margin: 0.25rem 0;
1161
+ `;
1162
+ var DocContent = styled11.div`
1163
+ display: flex;
1164
+ flex-flow: column-reverse nowrap;
1165
+ position: absolute;
1166
+ right: 1rem;
1167
+ bottom: 4.5rem;
1168
+ text-align: right;
1169
+ border-radius: 0.5rem;
1170
+ align-items: flex-end;
1171
+ `;
1172
+ function Doc({
1173
+ label,
1174
+ link,
1175
+ children
1176
+ }) {
1177
+ return /* @__PURE__ */ React16.createElement(DocWrapper, null, /* @__PURE__ */ React16.createElement(DocContainer, null, children && /* @__PURE__ */ React16.createElement(DocContent, null, children), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
1178
+ }
1179
+ function DocItem({ label, link }) {
1180
+ return /* @__PURE__ */ React16.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
1181
+ }
1182
+
1183
+ // src/components/HorizontalList.tsx
1184
+ import React17 from "react";
1125
1185
  import { animated as animated2, useSpring as useSpring2 } from "react-spring";
1126
1186
  import { Stepper as Stepper3 } from "spectacle";
1127
- import styled11 from "styled-components";
1128
- var Container = styled11.div`
1187
+ import styled12 from "styled-components";
1188
+ var Container = styled12.div`
1129
1189
  display: grid;
1130
1190
  grid-gap: 2rem;
1131
1191
  `;
@@ -1133,8 +1193,8 @@ function HorizontalList({
1133
1193
  children,
1134
1194
  columns = 3
1135
1195
  }) {
1136
- const items = React16.Children.toArray(children);
1137
- return /* @__PURE__ */ React16.createElement(Stepper3, { values: items }, (_, step) => /* @__PURE__ */ React16.createElement(
1196
+ const items = React17.Children.toArray(children);
1197
+ return /* @__PURE__ */ React17.createElement(Stepper3, { values: items }, (_, step) => /* @__PURE__ */ React17.createElement(
1138
1198
  Container,
1139
1199
  {
1140
1200
  style: {
@@ -1142,10 +1202,10 @@ function HorizontalList({
1142
1202
  }
1143
1203
  },
1144
1204
  items.map((item, k) => {
1145
- if (!React16.isValidElement(item)) {
1205
+ if (!React17.isValidElement(item)) {
1146
1206
  return item;
1147
1207
  }
1148
- return React16.cloneElement(item, {
1208
+ return React17.cloneElement(item, {
1149
1209
  // @ts-expect-error cloning
1150
1210
  position: k + 1,
1151
1211
  isVisible: k <= step,
@@ -1155,12 +1215,12 @@ function HorizontalList({
1155
1215
  ));
1156
1216
  }
1157
1217
  function Pill({ position }) {
1158
- return /* @__PURE__ */ React16.createElement(
1218
+ return /* @__PURE__ */ React17.createElement(
1159
1219
  "div",
1160
1220
  {
1161
1221
  style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
1162
1222
  },
1163
- /* @__PURE__ */ React16.createElement(
1223
+ /* @__PURE__ */ React17.createElement(
1164
1224
  "svg",
1165
1225
  {
1166
1226
  width: "48",
@@ -1169,14 +1229,14 @@ function Pill({ position }) {
1169
1229
  fill: "none",
1170
1230
  xmlns: "http://www.w3.org/2000/svg"
1171
1231
  },
1172
- /* @__PURE__ */ React16.createElement(
1232
+ /* @__PURE__ */ React17.createElement(
1173
1233
  "path",
1174
1234
  {
1175
1235
  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",
1176
1236
  fill: "#ffffff"
1177
1237
  }
1178
1238
  ),
1179
- /* @__PURE__ */ React16.createElement(
1239
+ /* @__PURE__ */ React17.createElement(
1180
1240
  "text",
1181
1241
  {
1182
1242
  x: "9",
@@ -1188,7 +1248,7 @@ function Pill({ position }) {
1188
1248
  },
1189
1249
  position
1190
1250
  ),
1191
- /* @__PURE__ */ React16.createElement(
1251
+ /* @__PURE__ */ React17.createElement(
1192
1252
  "path",
1193
1253
  {
1194
1254
  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",
@@ -1198,12 +1258,12 @@ function Pill({ position }) {
1198
1258
  )
1199
1259
  );
1200
1260
  }
1201
- var Item = styled11(animated2.div)`
1261
+ var Item = styled12(animated2.div)`
1202
1262
  display: flex;
1203
1263
  flex-direction: column;
1204
1264
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1205
1265
  `;
1206
- var ItemHead = styled11.div`
1266
+ var ItemHead = styled12.div`
1207
1267
  display: flex;
1208
1268
  flex-direction: row;
1209
1269
  font-size: 1.3rem;
@@ -1213,7 +1273,7 @@ var ItemHead = styled11.div`
1213
1273
  margin: 0;
1214
1274
  }
1215
1275
  `;
1216
- var ItemContent = styled11.div`
1276
+ var ItemContent = styled12.div`
1217
1277
  > * {
1218
1278
  font-size: 1rem;
1219
1279
  padding: 4px !important;
@@ -1241,31 +1301,31 @@ function HorizontalListItem({
1241
1301
  const opacityStyles = useSpring2({
1242
1302
  opacity: getItemOpacity({ isVisible, isLast })
1243
1303
  });
1244
- 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));
1304
+ return /* @__PURE__ */ React17.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ React17.createElement(ItemHead, null, /* @__PURE__ */ React17.createElement(Pill, { position }), /* @__PURE__ */ React17.createElement("p", null, title)), /* @__PURE__ */ React17.createElement(ItemContent, null, children));
1245
1305
  }
1246
1306
 
1247
1307
  // src/components/Timeline.tsx
1248
- import React17 from "react";
1308
+ import React18 from "react";
1249
1309
  import { animated as animated3, useSpring as useSpring3 } from "react-spring";
1250
1310
  import { Stepper as Stepper4 } from "spectacle";
1251
1311
 
1252
1312
  // src/components/Timeline.styled.tsx
1253
- import styled12 from "styled-components";
1254
- var TimelineItemContent = styled12.div`
1313
+ import styled13 from "styled-components";
1314
+ var TimelineItemContent = styled13.div`
1255
1315
  display: flex;
1256
1316
  padding: 0.7rem 0 1rem 12px;
1257
1317
  `;
1258
- var TimelineItemContentPhantom = styled12(TimelineItemContent)`
1318
+ var TimelineItemContentPhantom = styled13(TimelineItemContent)`
1259
1319
  opacity: 0;
1260
1320
  `;
1261
- var TimelineItemBody = styled12.div`
1321
+ var TimelineItemBody = styled13.div`
1262
1322
  &,
1263
1323
  & > * {
1264
1324
  font-size: 1.3rem !important;
1265
1325
  color: #ffffff !important;
1266
1326
  }
1267
1327
  `;
1268
- var TimelineItemTitle = styled12.div`
1328
+ var TimelineItemTitle = styled13.div`
1269
1329
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1270
1330
  font-size: 1rem;
1271
1331
  font-weight: bold;
@@ -1273,8 +1333,8 @@ var TimelineItemTitle = styled12.div`
1273
1333
  `;
1274
1334
 
1275
1335
  // src/components/Timeline.tsx
1276
- import styled13 from "styled-components";
1277
- var TimelineItemStyled = styled13(animated3.div)`
1336
+ import styled14 from "styled-components";
1337
+ var TimelineItemStyled = styled14(animated3.div)`
1278
1338
  flex: 1;
1279
1339
  flex-flow: column nowrap;
1280
1340
  display: inline-flex;
@@ -1292,7 +1352,7 @@ var TimelineItemStyled = styled13(animated3.div)`
1292
1352
  }
1293
1353
  }
1294
1354
  `;
1295
- var TimelineItemGuide = styled13(animated3.div)`
1355
+ var TimelineItemGuide = styled14(animated3.div)`
1296
1356
  width: 100%;
1297
1357
  padding-top: 2px;
1298
1358
  display: flex;
@@ -1308,7 +1368,7 @@ var TimelineItemGuide = styled13(animated3.div)`
1308
1368
  margin-right: 4px;
1309
1369
  }
1310
1370
  `;
1311
- var TimelineItemGuideLine = styled13(animated3.div)`
1371
+ var TimelineItemGuideLine = styled14(animated3.div)`
1312
1372
  border-top: 4px solid #ffffff;
1313
1373
  margin-right: 4px;
1314
1374
  `;
@@ -1319,8 +1379,8 @@ var style = {
1319
1379
  alignItems: "center"
1320
1380
  };
1321
1381
  function Timeline(props) {
1322
- const children = React17.Children.toArray(props.children);
1323
- return /* @__PURE__ */ React17.createElement(
1382
+ const children = React18.Children.toArray(props.children);
1383
+ return /* @__PURE__ */ React18.createElement(
1324
1384
  Stepper4,
1325
1385
  {
1326
1386
  ...props,
@@ -1330,10 +1390,10 @@ function Timeline(props) {
1330
1390
  },
1331
1391
  (value, step) => {
1332
1392
  return children.map((child, index) => {
1333
- if (!React17.isValidElement(child)) {
1393
+ if (!React18.isValidElement(child)) {
1334
1394
  return child;
1335
1395
  }
1336
- return React17.cloneElement(child, {
1396
+ return React18.cloneElement(child, {
1337
1397
  // @ts-expect-error cloning
1338
1398
  isPhantom: step < index,
1339
1399
  isLast: step === index
@@ -1361,7 +1421,7 @@ function TimelineItem(props) {
1361
1421
  opacity: getItemOpacity2({ isPhantom, isLast })
1362
1422
  });
1363
1423
  const colorStyles = useSpring3({ opacity: isPhantom || isLast ? 1 : 0.15 });
1364
- return /* @__PURE__ */ React17.createElement(
1424
+ return /* @__PURE__ */ React18.createElement(
1365
1425
  TimelineItemStyled,
1366
1426
  {
1367
1427
  ...rest,
@@ -1369,13 +1429,13 @@ function TimelineItem(props) {
1369
1429
  ...appearStyles
1370
1430
  }
1371
1431
  },
1372
- /* @__PURE__ */ React17.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ React17.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React17.createElement(TimelineItemBody, null, children)),
1373
- /* @__PURE__ */ React17.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ React17.createElement(Hexagon, null), /* @__PURE__ */ React17.createElement(TimelineItemGuideLine, { style: guideLineProps })),
1374
- /* @__PURE__ */ React17.createElement(TimelineItemContent, null, /* @__PURE__ */ React17.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React17.createElement(TimelineItemBody, null, children))
1432
+ /* @__PURE__ */ React18.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ React18.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React18.createElement(TimelineItemBody, null, children)),
1433
+ /* @__PURE__ */ React18.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ React18.createElement(Hexagon, null), /* @__PURE__ */ React18.createElement(TimelineItemGuideLine, { style: guideLineProps })),
1434
+ /* @__PURE__ */ React18.createElement(TimelineItemContent, null, /* @__PURE__ */ React18.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React18.createElement(TimelineItemBody, null, children))
1375
1435
  );
1376
1436
  }
1377
1437
  function Hexagon() {
1378
- return /* @__PURE__ */ React17.createElement(
1438
+ return /* @__PURE__ */ React18.createElement(
1379
1439
  "svg",
1380
1440
  {
1381
1441
  width: "18",
@@ -1384,14 +1444,14 @@ function Hexagon() {
1384
1444
  fill: "none",
1385
1445
  xmlns: "http://www.w3.org/2000/svg"
1386
1446
  },
1387
- /* @__PURE__ */ React17.createElement(
1447
+ /* @__PURE__ */ React18.createElement(
1388
1448
  "path",
1389
1449
  {
1390
1450
  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",
1391
1451
  fill: "#F49676"
1392
1452
  }
1393
1453
  ),
1394
- /* @__PURE__ */ React17.createElement(
1454
+ /* @__PURE__ */ React18.createElement(
1395
1455
  "path",
1396
1456
  {
1397
1457
  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",
@@ -1402,9 +1462,9 @@ function Hexagon() {
1402
1462
  }
1403
1463
 
1404
1464
  // src/components/IconBox.tsx
1405
- import React18 from "react";
1406
- import styled14 from "styled-components";
1407
- var IconBoxContent = styled14.div`
1465
+ import React19 from "react";
1466
+ import styled15 from "styled-components";
1467
+ var IconBoxContent = styled15.div`
1408
1468
  * {
1409
1469
  margin: 0.2rem !important;
1410
1470
  padding: 0 !important;
@@ -1414,7 +1474,7 @@ function IconBox({
1414
1474
  children,
1415
1475
  icon
1416
1476
  }) {
1417
- return /* @__PURE__ */ React18.createElement(
1477
+ return /* @__PURE__ */ React19.createElement(
1418
1478
  "div",
1419
1479
  {
1420
1480
  style: {
@@ -1424,14 +1484,14 @@ function IconBox({
1424
1484
  padding: "1rem 0"
1425
1485
  }
1426
1486
  },
1427
- /* @__PURE__ */ React18.createElement("div", { style: { fontSize: 60 } }, icon),
1428
- /* @__PURE__ */ React18.createElement(IconBoxContent, null, children)
1487
+ /* @__PURE__ */ React19.createElement("div", { style: { fontSize: 60 } }, icon),
1488
+ /* @__PURE__ */ React19.createElement(IconBoxContent, null, children)
1429
1489
  );
1430
1490
  }
1431
1491
 
1432
1492
  // src/index.tsx
1433
1493
  function PassThrough({ children }) {
1434
- return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
1494
+ return /* @__PURE__ */ React20.createElement(React20.Fragment, null, children);
1435
1495
  }
1436
1496
  function Layout({
1437
1497
  children,
@@ -1443,46 +1503,47 @@ function Layout({
1443
1503
  console.warn(`Layout ${layout} not found`);
1444
1504
  }
1445
1505
  if (Layout2) {
1446
- return /* @__PURE__ */ React19.createElement(Layout2, { ...frontmatter }, children);
1506
+ return /* @__PURE__ */ React20.createElement(Layout2, { ...frontmatter }, children);
1447
1507
  }
1448
- return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
1508
+ return /* @__PURE__ */ React20.createElement(React20.Fragment, null, children);
1449
1509
  }
1450
1510
  var componentsMap2 = {
1451
1511
  ...map_default,
1452
1512
  wrapper: Layout
1453
1513
  };
1454
1514
  function Deck({ deck }) {
1455
- React19.useEffect(() => {
1515
+ React20.useEffect(() => {
1456
1516
  document.title = deck.metadata.title || "Untitled";
1457
1517
  }, [deck.metadata.title]);
1458
- 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) => {
1518
+ return /* @__PURE__ */ React20.createElement(React20.StrictMode, null, /* @__PURE__ */ React20.createElement(MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ React20.createElement(SpectacleDeck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
1459
1519
  const Component = slide.slideComponent;
1460
- return /* @__PURE__ */ React19.createElement(Slide, { key: i }, /* @__PURE__ */ React19.createElement(Component, null));
1520
+ return /* @__PURE__ */ React20.createElement(Slide, { key: i }, /* @__PURE__ */ React20.createElement(Component, null));
1461
1521
  }))));
1462
1522
  }
1463
1523
  function Danger({ children }) {
1464
- return /* @__PURE__ */ React19.createElement("div", { style: { color: "red" } }, children);
1465
- }
1466
- function Doc({ children }) {
1467
- return /* @__PURE__ */ React19.createElement("div", { style: { color: "blue" } }, children);
1524
+ return /* @__PURE__ */ React20.createElement("div", { style: { color: "red" } }, children);
1468
1525
  }
1469
1526
  function Information({ children }) {
1470
- return /* @__PURE__ */ React19.createElement("div", { style: { color: "orange" } }, children);
1527
+ return /* @__PURE__ */ React20.createElement("div", { style: { color: "orange" } }, children);
1471
1528
  }
1472
1529
  function Success({ children }) {
1473
- return /* @__PURE__ */ React19.createElement("div", { style: { color: "green" } }, children);
1530
+ return /* @__PURE__ */ React20.createElement("div", { style: { color: "green" } }, children);
1531
+ }
1532
+ function Warning({ children }) {
1533
+ return /* @__PURE__ */ React20.createElement("div", { style: { color: "yellow" } }, children);
1474
1534
  }
1475
1535
  function Side({ children }) {
1476
- return /* @__PURE__ */ React19.createElement("div", null, children);
1536
+ return /* @__PURE__ */ React20.createElement("div", null, children);
1477
1537
  }
1478
1538
  Side.mdxType = "Side";
1479
1539
  function Documentation({ children }) {
1480
- return /* @__PURE__ */ React19.createElement("div", null, children);
1540
+ return /* @__PURE__ */ React20.createElement("div", null, children);
1481
1541
  }
1482
- function DocItem({ children }) {
1483
- return /* @__PURE__ */ React19.createElement("div", null, children);
1542
+ function Box2({ children }) {
1543
+ return /* @__PURE__ */ React20.createElement("div", null, children);
1484
1544
  }
1485
1545
  export {
1546
+ Box2 as Box,
1486
1547
  Danger,
1487
1548
  Deck,
1488
1549
  Doc,
@@ -1500,5 +1561,6 @@ export {
1500
1561
  Side,
1501
1562
  Success,
1502
1563
  Timeline,
1503
- TimelineItem
1564
+ TimelineItem,
1565
+ Warning
1504
1566
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpichot/spectacle-deck",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "index.cjs",