@gpichot/spectacle-deck 1.0.8 → 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
@@ -46,10 +46,11 @@ __export(src_exports, {
46
46
  Side: () => Side,
47
47
  Success: () => Success,
48
48
  Timeline: () => Timeline,
49
- TimelineItem: () => TimelineItem
49
+ TimelineItem: () => TimelineItem,
50
+ Warning: () => Warning
50
51
  });
51
- var import_react19 = __toESM(require("react"));
52
- var import_react20 = require("@mdx-js/react");
52
+ var import_react20 = __toESM(require("react"));
53
+ var import_react21 = require("@mdx-js/react");
53
54
  var import_spectacle9 = require("spectacle");
54
55
 
55
56
  // src/layouts/CenteredLayout.tsx
@@ -1165,12 +1166,72 @@ function ItemColumnWrapper({
1165
1166
  return /* @__PURE__ */ import_react15.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
1166
1167
  }
1167
1168
 
1168
- // src/components/HorizontalList.tsx
1169
+ // src/components/DocumentationItem.tsx
1169
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"));
1170
1231
  var import_react_spring2 = require("react-spring");
1171
1232
  var import_spectacle7 = require("spectacle");
1172
- var import_styled_components11 = __toESM(require("styled-components"));
1173
- var Container = import_styled_components11.default.div`
1233
+ var import_styled_components12 = __toESM(require("styled-components"));
1234
+ var Container = import_styled_components12.default.div`
1174
1235
  display: grid;
1175
1236
  grid-gap: 2rem;
1176
1237
  `;
@@ -1178,8 +1239,8 @@ function HorizontalList({
1178
1239
  children,
1179
1240
  columns = 3
1180
1241
  }) {
1181
- const items = import_react16.default.Children.toArray(children);
1182
- 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(
1183
1244
  Container,
1184
1245
  {
1185
1246
  style: {
@@ -1187,10 +1248,10 @@ function HorizontalList({
1187
1248
  }
1188
1249
  },
1189
1250
  items.map((item, k) => {
1190
- if (!import_react16.default.isValidElement(item)) {
1251
+ if (!import_react17.default.isValidElement(item)) {
1191
1252
  return item;
1192
1253
  }
1193
- return import_react16.default.cloneElement(item, {
1254
+ return import_react17.default.cloneElement(item, {
1194
1255
  // @ts-expect-error cloning
1195
1256
  position: k + 1,
1196
1257
  isVisible: k <= step,
@@ -1200,12 +1261,12 @@ function HorizontalList({
1200
1261
  ));
1201
1262
  }
1202
1263
  function Pill({ position }) {
1203
- return /* @__PURE__ */ import_react16.default.createElement(
1264
+ return /* @__PURE__ */ import_react17.default.createElement(
1204
1265
  "div",
1205
1266
  {
1206
1267
  style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
1207
1268
  },
1208
- /* @__PURE__ */ import_react16.default.createElement(
1269
+ /* @__PURE__ */ import_react17.default.createElement(
1209
1270
  "svg",
1210
1271
  {
1211
1272
  width: "48",
@@ -1214,14 +1275,14 @@ function Pill({ position }) {
1214
1275
  fill: "none",
1215
1276
  xmlns: "http://www.w3.org/2000/svg"
1216
1277
  },
1217
- /* @__PURE__ */ import_react16.default.createElement(
1278
+ /* @__PURE__ */ import_react17.default.createElement(
1218
1279
  "path",
1219
1280
  {
1220
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",
1221
1282
  fill: "#ffffff"
1222
1283
  }
1223
1284
  ),
1224
- /* @__PURE__ */ import_react16.default.createElement(
1285
+ /* @__PURE__ */ import_react17.default.createElement(
1225
1286
  "text",
1226
1287
  {
1227
1288
  x: "9",
@@ -1233,7 +1294,7 @@ function Pill({ position }) {
1233
1294
  },
1234
1295
  position
1235
1296
  ),
1236
- /* @__PURE__ */ import_react16.default.createElement(
1297
+ /* @__PURE__ */ import_react17.default.createElement(
1237
1298
  "path",
1238
1299
  {
1239
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",
@@ -1243,12 +1304,12 @@ function Pill({ position }) {
1243
1304
  )
1244
1305
  );
1245
1306
  }
1246
- 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)`
1247
1308
  display: flex;
1248
1309
  flex-direction: column;
1249
1310
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1250
1311
  `;
1251
- var ItemHead = import_styled_components11.default.div`
1312
+ var ItemHead = import_styled_components12.default.div`
1252
1313
  display: flex;
1253
1314
  flex-direction: row;
1254
1315
  font-size: 1.3rem;
@@ -1258,7 +1319,7 @@ var ItemHead = import_styled_components11.default.div`
1258
1319
  margin: 0;
1259
1320
  }
1260
1321
  `;
1261
- var ItemContent = import_styled_components11.default.div`
1322
+ var ItemContent = import_styled_components12.default.div`
1262
1323
  > * {
1263
1324
  font-size: 1rem;
1264
1325
  padding: 4px !important;
@@ -1286,31 +1347,31 @@ function HorizontalListItem({
1286
1347
  const opacityStyles = (0, import_react_spring2.useSpring)({
1287
1348
  opacity: getItemOpacity({ isVisible, isLast })
1288
1349
  });
1289
- 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));
1290
1351
  }
1291
1352
 
1292
1353
  // src/components/Timeline.tsx
1293
- var import_react17 = __toESM(require("react"));
1354
+ var import_react18 = __toESM(require("react"));
1294
1355
  var import_react_spring3 = require("react-spring");
1295
1356
  var import_spectacle8 = require("spectacle");
1296
1357
 
1297
1358
  // src/components/Timeline.styled.tsx
1298
- var import_styled_components12 = __toESM(require("styled-components"));
1299
- var TimelineItemContent = import_styled_components12.default.div`
1359
+ var import_styled_components13 = __toESM(require("styled-components"));
1360
+ var TimelineItemContent = import_styled_components13.default.div`
1300
1361
  display: flex;
1301
1362
  padding: 0.7rem 0 1rem 12px;
1302
1363
  `;
1303
- var TimelineItemContentPhantom = (0, import_styled_components12.default)(TimelineItemContent)`
1364
+ var TimelineItemContentPhantom = (0, import_styled_components13.default)(TimelineItemContent)`
1304
1365
  opacity: 0;
1305
1366
  `;
1306
- var TimelineItemBody = import_styled_components12.default.div`
1367
+ var TimelineItemBody = import_styled_components13.default.div`
1307
1368
  &,
1308
1369
  & > * {
1309
1370
  font-size: 1.3rem !important;
1310
1371
  color: #ffffff !important;
1311
1372
  }
1312
1373
  `;
1313
- var TimelineItemTitle = import_styled_components12.default.div`
1374
+ var TimelineItemTitle = import_styled_components13.default.div`
1314
1375
  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
1315
1376
  font-size: 1rem;
1316
1377
  font-weight: bold;
@@ -1318,8 +1379,8 @@ var TimelineItemTitle = import_styled_components12.default.div`
1318
1379
  `;
1319
1380
 
1320
1381
  // src/components/Timeline.tsx
1321
- var import_styled_components13 = __toESM(require("styled-components"));
1322
- 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)`
1323
1384
  flex: 1;
1324
1385
  flex-flow: column nowrap;
1325
1386
  display: inline-flex;
@@ -1337,7 +1398,7 @@ var TimelineItemStyled = (0, import_styled_components13.default)(import_react_sp
1337
1398
  }
1338
1399
  }
1339
1400
  `;
1340
- 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)`
1341
1402
  width: 100%;
1342
1403
  padding-top: 2px;
1343
1404
  display: flex;
@@ -1353,7 +1414,7 @@ var TimelineItemGuide = (0, import_styled_components13.default)(import_react_spr
1353
1414
  margin-right: 4px;
1354
1415
  }
1355
1416
  `;
1356
- 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)`
1357
1418
  border-top: 4px solid #ffffff;
1358
1419
  margin-right: 4px;
1359
1420
  `;
@@ -1364,8 +1425,8 @@ var style = {
1364
1425
  alignItems: "center"
1365
1426
  };
1366
1427
  function Timeline(props) {
1367
- const children = import_react17.default.Children.toArray(props.children);
1368
- return /* @__PURE__ */ import_react17.default.createElement(
1428
+ const children = import_react18.default.Children.toArray(props.children);
1429
+ return /* @__PURE__ */ import_react18.default.createElement(
1369
1430
  import_spectacle8.Stepper,
1370
1431
  {
1371
1432
  ...props,
@@ -1375,10 +1436,10 @@ function Timeline(props) {
1375
1436
  },
1376
1437
  (value, step) => {
1377
1438
  return children.map((child, index) => {
1378
- if (!import_react17.default.isValidElement(child)) {
1439
+ if (!import_react18.default.isValidElement(child)) {
1379
1440
  return child;
1380
1441
  }
1381
- return import_react17.default.cloneElement(child, {
1442
+ return import_react18.default.cloneElement(child, {
1382
1443
  // @ts-expect-error cloning
1383
1444
  isPhantom: step < index,
1384
1445
  isLast: step === index
@@ -1406,7 +1467,7 @@ function TimelineItem(props) {
1406
1467
  opacity: getItemOpacity2({ isPhantom, isLast })
1407
1468
  });
1408
1469
  const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
1409
- return /* @__PURE__ */ import_react17.default.createElement(
1470
+ return /* @__PURE__ */ import_react18.default.createElement(
1410
1471
  TimelineItemStyled,
1411
1472
  {
1412
1473
  ...rest,
@@ -1414,13 +1475,13 @@ function TimelineItem(props) {
1414
1475
  ...appearStyles
1415
1476
  }
1416
1477
  },
1417
- /* @__PURE__ */ import_react17.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children)),
1418
- /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react17.default.createElement(Hexagon, null), /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
1419
- /* @__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))
1420
1481
  );
1421
1482
  }
1422
1483
  function Hexagon() {
1423
- return /* @__PURE__ */ import_react17.default.createElement(
1484
+ return /* @__PURE__ */ import_react18.default.createElement(
1424
1485
  "svg",
1425
1486
  {
1426
1487
  width: "18",
@@ -1429,14 +1490,14 @@ function Hexagon() {
1429
1490
  fill: "none",
1430
1491
  xmlns: "http://www.w3.org/2000/svg"
1431
1492
  },
1432
- /* @__PURE__ */ import_react17.default.createElement(
1493
+ /* @__PURE__ */ import_react18.default.createElement(
1433
1494
  "path",
1434
1495
  {
1435
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",
1436
1497
  fill: "#F49676"
1437
1498
  }
1438
1499
  ),
1439
- /* @__PURE__ */ import_react17.default.createElement(
1500
+ /* @__PURE__ */ import_react18.default.createElement(
1440
1501
  "path",
1441
1502
  {
1442
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",
@@ -1447,9 +1508,9 @@ function Hexagon() {
1447
1508
  }
1448
1509
 
1449
1510
  // src/components/IconBox.tsx
1450
- var import_react18 = __toESM(require("react"));
1451
- var import_styled_components14 = __toESM(require("styled-components"));
1452
- 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`
1453
1514
  * {
1454
1515
  margin: 0.2rem !important;
1455
1516
  padding: 0 !important;
@@ -1459,7 +1520,7 @@ function IconBox({
1459
1520
  children,
1460
1521
  icon
1461
1522
  }) {
1462
- return /* @__PURE__ */ import_react18.default.createElement(
1523
+ return /* @__PURE__ */ import_react19.default.createElement(
1463
1524
  "div",
1464
1525
  {
1465
1526
  style: {
@@ -1469,14 +1530,14 @@ function IconBox({
1469
1530
  padding: "1rem 0"
1470
1531
  }
1471
1532
  },
1472
- /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: 60 } }, icon),
1473
- /* @__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)
1474
1535
  );
1475
1536
  }
1476
1537
 
1477
1538
  // src/index.tsx
1478
1539
  function PassThrough({ children }) {
1479
- 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);
1480
1541
  }
1481
1542
  function Layout({
1482
1543
  children,
@@ -1488,47 +1549,44 @@ function Layout({
1488
1549
  console.warn(`Layout ${layout} not found`);
1489
1550
  }
1490
1551
  if (Layout2) {
1491
- return /* @__PURE__ */ import_react19.default.createElement(Layout2, { ...frontmatter }, children);
1552
+ return /* @__PURE__ */ import_react20.default.createElement(Layout2, { ...frontmatter }, children);
1492
1553
  }
1493
- 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);
1494
1555
  }
1495
1556
  var componentsMap2 = {
1496
1557
  ...map_default,
1497
1558
  wrapper: Layout
1498
1559
  };
1499
1560
  function Deck({ deck }) {
1500
- import_react19.default.useEffect(() => {
1561
+ import_react20.default.useEffect(() => {
1501
1562
  document.title = deck.metadata.title || "Untitled";
1502
1563
  }, [deck.metadata.title]);
1503
- 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) => {
1504
1565
  const Component = slide.slideComponent;
1505
- 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));
1506
1567
  }))));
1507
1568
  }
1508
1569
  function Danger({ children }) {
1509
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "red" } }, children);
1510
- }
1511
- function Doc({ children }) {
1512
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "blue" } }, children);
1570
+ return /* @__PURE__ */ import_react20.default.createElement("div", { style: { color: "red" } }, children);
1513
1571
  }
1514
1572
  function Information({ children }) {
1515
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "orange" } }, children);
1573
+ return /* @__PURE__ */ import_react20.default.createElement("div", { style: { color: "orange" } }, children);
1516
1574
  }
1517
1575
  function Success({ children }) {
1518
- 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);
1519
1580
  }
1520
1581
  function Side({ children }) {
1521
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1582
+ return /* @__PURE__ */ import_react20.default.createElement("div", null, children);
1522
1583
  }
1523
1584
  Side.mdxType = "Side";
1524
1585
  function Documentation({ children }) {
1525
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1526
- }
1527
- function DocItem({ children }) {
1528
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1586
+ return /* @__PURE__ */ import_react20.default.createElement("div", null, children);
1529
1587
  }
1530
1588
  function Box2({ children }) {
1531
- return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
1589
+ return /* @__PURE__ */ import_react20.default.createElement("div", null, children);
1532
1590
  }
1533
1591
 
1534
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,9 +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
- children: React.ReactNode;
53
- }): React.JSX.Element;
54
52
  export declare function Box({ children }: {
55
53
  children: React.ReactNode;
56
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,47 +1503,44 @@ 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);
1481
- }
1482
- function DocItem({ children }) {
1483
- return /* @__PURE__ */ React19.createElement("div", null, children);
1540
+ return /* @__PURE__ */ React20.createElement("div", null, children);
1484
1541
  }
1485
1542
  function Box2({ children }) {
1486
- return /* @__PURE__ */ React19.createElement("div", null, children);
1543
+ return /* @__PURE__ */ React20.createElement("div", null, children);
1487
1544
  }
1488
1545
  export {
1489
1546
  Box2 as Box,
@@ -1504,5 +1561,6 @@ export {
1504
1561
  Side,
1505
1562
  Success,
1506
1563
  Timeline,
1507
- TimelineItem
1564
+ TimelineItem,
1565
+ Warning
1508
1566
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpichot/spectacle-deck",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "index.cjs",