@gpichot/spectacle-deck 1.0.8 → 1.1.0

package/{index.mjs → dist/index.mjs}

@@ -1,5 +1,5 @@
 // src/index.tsx
-import React19 from "react";
+import React21 from "react";
 import { MDXProvider } from "@mdx-js/react";
 import { Deck as SpectacleDeck, Slide } from "spectacle";
 
@@ -352,9 +352,97 @@ var MainSectionLayout = ({
   );
 };
 
-// src/layouts/SectionLayout.tsx
+// src/layouts/QuoteLayout.tsx
+import React5 from "react";
 import styled3 from "styled-components";
-var SectionLayout = styled3.div`
+function invariant(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+var QuoteBaseLayout = styled3.div`
+  .blockquote > * {
+    border-left: 0;
+  }
+  .blockquote {
+    position: relative;
+  }
+  .blockquote > :first-child {
+    &:before {
+      content: "“";
+      position: absolute;
+      font-size: 16rem;
+      left: -9rem;
+      font-family: serif;
+      top: 2rem;
+      color: #ffffff22;
+    }
+    &:after {
+      content: "”";
+      position: absolute;
+      font-size: 16rem;
+      right: 3rem;
+      bottom: -5rem;
+      font-family: serif;
+      color: #ffffff22;
+      pointer-events: none;
+    }
+  }
+  .blockquote * {
+    line-height: 3.5rem !important;
+    font-size: 2.5rem;
+  }
+  .source {
+    font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: 4rem;
+    text-align: right;
+    font-size: 2rem;
+    a {
+      text-decoration: none;
+      color: #ffffff77;
+    }
+  }
+`;
+function QuoteLayout({
+  children,
+  author,
+  url
+}) {
+  const [blockquote, rest] = getMatchingMdxType(children, "blockquote");
+  invariant(rest, "QuoteLayout can only have one blockquote");
+  return /* @__PURE__ */ React5.createElement(QuoteBaseLayout, null, /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        textAlign: "center",
+        margin: "0 10%"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          padding: "0 8rem 0 0",
+          boxSizing: "border-box"
+        },
+        className: "blockquote"
+      },
+      blockquote
+    ),
+    /* @__PURE__ */ React5.createElement("div", { className: "source", style: { flex: 1, padding: "0 2rem" } }, /* @__PURE__ */ React5.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer" }, author))
+  ));
+}
+
+// src/layouts/SectionLayout.tsx
+import styled4 from "styled-components";
+var SectionLayout = styled4.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -368,12 +456,12 @@ var SectionLayout = styled3.div`
 `;
 
 // src/layouts/SideCodeLayout.tsx
-import React6 from "react";
+import React7 from "react";
 
 // src/layouts/columns.tsx
-import React5 from "react";
-import styled4 from "styled-components";
-var DivWithHeading = styled4.div`
+import React6 from "react";
+import styled5 from "styled-components";
+var DivWithHeading = styled5.div`
   h2 {
     margin-top: 0;
   }
@@ -382,7 +470,7 @@ var DivWithHeading = styled4.div`
     font-weight: 400;
   }
 `;
-var ColumnsContainer = styled4(DivWithHeading)`
+var ColumnsContainer = styled5(DivWithHeading)`
   display: flex;
   flex-direction: row;
   position: absolute;
@@ -396,15 +484,15 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = React5.Children.toArray(children);
-  return /* @__PURE__ */ React5.createElement(
+  const childrenArray = React6.Children.toArray(children);
+  return /* @__PURE__ */ React6.createElement(
     ColumnsContainer,
     {
       style: {
         flexDirection: reverse ? "row-reverse" : "row"
       }
     },
-    childrenArray.map((child, i) => /* @__PURE__ */ React5.createElement(
+    childrenArray.map((child, i) => /* @__PURE__ */ React6.createElement(
       "div",
       {
         key: i,
@@ -423,8 +511,8 @@ function ColumnsLayout({
 }
 
 // src/layouts/SideCodeLayout.tsx
-import styled5 from "styled-components";
-var CodeSide = styled5.div`
+import styled6 from "styled-components";
+var CodeSide = styled6.div`
   pre {
     font-size: 0.9rem;
   }
@@ -434,7 +522,7 @@ function SidedCodeLayout({
   position = "right"
 }) {
   const [code, rest] = getCodeChildren(children);
-  return /* @__PURE__ */ React6.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React7.createElement(
     "div",
     {
       style: {
@@ -443,7 +531,7 @@ function SidedCodeLayout({
       }
     },
     rest
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     CodeSide,
     {
       style: {
@@ -459,15 +547,15 @@ function SidedCodeLayout({
 }
 
 // src/layouts/SideImageLayout.tsx
-import React8 from "react";
-import styled7 from "styled-components";
+import React9 from "react";
+import styled8 from "styled-components";
 
 // src/components/Image.tsx
-import React7 from "react";
+import React8 from "react";
 
 // src/layouts/styled.ts
-import styled6 from "styled-components";
-var SVGObject = styled6.object`
+import styled7 from "styled-components";
+var SVGObject = styled7.object`
   padding: 3rem 2rem;
   box-sizing: border-box;
   background-color: white;
@@ -477,7 +565,7 @@ var SVGObject = styled6.object`
 function Image(props) {
   const { src, height } = props;
   if (!(src == null ? void 0 : src.endsWith(".svg"))) {
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "img",
       {
         src,
@@ -490,7 +578,7 @@ function Image(props) {
       }
     );
   }
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     SVGObject,
     {
       type: "image/svg+xml",
@@ -506,7 +594,7 @@ function Image(props) {
 Image.mdxType = "Image";
 
 // src/layouts/SideImageLayout.tsx
-var DivWithHeading2 = styled7.div`
+var DivWithHeading2 = styled8.div`
   h2 {
     margin-top: 0;
   }
@@ -527,7 +615,7 @@ var SidedImageLayout = ({
     console.error("No image provided for SidedImageLayout");
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     DivWithHeading2,
     {
       style: {
@@ -540,7 +628,7 @@ var SidedImageLayout = ({
         top: 0
       }
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "div",
       {
         style: {
@@ -553,7 +641,7 @@ var SidedImageLayout = ({
       },
       rest
     ),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       "div",
       {
         style: {
@@ -565,19 +653,19 @@ var SidedImageLayout = ({
           backgroundColor: "white"
         }
       },
-      component || /* @__PURE__ */ React8.createElement(Image, { src: image })
+      component || /* @__PURE__ */ React9.createElement(Image, { src: image })
     )
   );
 };
 
 // src/layouts/SideLayout.tsx
-import React9 from "react";
+import React10 from "react";
 function SideLayout({
   children,
   position = "right"
 }) {
   const [side, rest] = getMatchingMdxType(children, "Side");
-  return /* @__PURE__ */ React9.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React9.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ React10.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ React10.createElement(
     "div",
     {
       style: {
@@ -599,6 +687,7 @@ var layouts_default = {
   mainSection: MainSectionLayout,
   centered: CenteredLayout,
   default3: Default3Layout,
+  quote: QuoteLayout,
   sidedCode: SidedCodeLayout,
   sidedImage: SidedImageLayout,
   side: SideLayout,
@@ -631,11 +720,11 @@ var theme_default = {
 };
 
 // src/template.tsx
-import React10 from "react";
+import React11 from "react";
 import { Box, FullScreen } from "spectacle";
 var template = ({ slideNumber, numberOfSlides }) => {
   const percentage = slideNumber / numberOfSlides * 100;
-  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(
+  return /* @__PURE__ */ React11.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ React11.createElement(Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ React11.createElement(FullScreen, null)), /* @__PURE__ */ React11.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ React11.createElement(
     "div",
     {
       style: {
@@ -649,31 +738,31 @@ var template = ({ slideNumber, numberOfSlides }) => {
 };
 
 // src/components/map.tsx
-import React13 from "react";
+import React14 from "react";
 import { mdxComponentMap } from "spectacle";
 
 // src/components/styled.tsx
-import React11 from "react";
+import React12 from "react";
 import {
   Link as SpectacleLink,
   Image as SpectacleImage,
   Heading,
   FlexBox as FlexBox2
 } from "spectacle";
-import styled8 from "styled-components";
-var StyledImage = styled8(SpectacleImage)`
+import styled9 from "styled-components";
+var StyledImage = styled9(SpectacleImage)`
   object-fit: contain;
   max-height: 30vh;
   max-width: 70vw;
 `;
-var Image2 = (props) => /* @__PURE__ */ React11.createElement(FlexBox2, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ React11.createElement(StyledImage, { ...props }));
-var CustomHeading = styled8(Heading)`
+var Image2 = (props) => /* @__PURE__ */ React12.createElement(FlexBox2, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ React12.createElement(StyledImage, { ...props }));
+var CustomHeading = styled9(Heading)`
   strong {
     color: #f49676;
     font-weight: 500;
   }
 `;
-var CustomQuote = styled8.blockquote`
+var CustomQuote = styled9.blockquote`
   margin: 1rem 0;
   padding-left: 1.5rem;
   padding-top: 0;
@@ -684,7 +773,7 @@ var CustomQuote = styled8.blockquote`
     padding: 0 !important;
   }
 `;
-var InlineCode = styled8.code`
+var InlineCode = styled9.code`
   filter: brightness(1.05);
   zoom: 1.1;
   &:before,
@@ -693,12 +782,12 @@ var InlineCode = styled8.code`
     font-size: 0.8em;
   }
 `;
-var HeadingTwo = styled8.h2`
+var HeadingTwo = styled9.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
 `;
-var HeadingThree = styled8.h3`
+var HeadingThree = styled9.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 40px;
   font-weight: 400;
@@ -711,12 +800,12 @@ var HeadingThree = styled8.h3`
 `;
 
 // src/components/CodeStepper/CodeStepper.tsx
-import React12 from "react";
+import React13 from "react";
 import ReactIs from "react-is";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { gruvboxDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { Stepper } from "spectacle";
-import styled9 from "styled-components";
+import styled10 from "styled-components";
 
 // src/components/CodeStepper/code-directives.ts
 function range(start, end) {
@@ -780,7 +869,7 @@ function parseStepDirectives(directives) {
 
 // src/components/CodeStepper/CodeStepper.tsx
 var Highlighter = SyntaxHighlighter;
-var CodeContainer = styled9.div`
+var CodeContainer = styled10.div`
   pre {
     padding: 1rem 0rem !important;
     background-color: transparent !important;
@@ -801,7 +890,7 @@ var CodeContainer = styled9.div`
   }
 `;
 function useCodeSteps(code) {
-  return React12.useMemo(() => {
+  return React13.useMemo(() => {
     const prefixes = code.match(/(?:\/\/|<!--) @.*\n/g) || [];
     const prefixesLength = prefixes.reduce(
       (acc, prefix) => acc + prefix.length,
@@ -821,8 +910,8 @@ function useCodeSteps(code) {
   }, [code]);
 }
 function getCodeDetails(children) {
-  const child = React12.Children.toArray(children)[0];
-  if (!React12.isValidElement(child)) {
+  const child = React13.Children.toArray(children)[0];
+  if (!React13.isValidElement(child)) {
     return {
       language: "",
       code: ReactIs.isFragment(child) ? "" : String(child || "")
@@ -840,7 +929,7 @@ function CodeWrapper({
   hasName,
   children
 }) {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       style: {
@@ -850,7 +939,7 @@ function CodeWrapper({
         borderRadius: "4px"
       }
     },
-    name && /* @__PURE__ */ React12.createElement(
+    name && /* @__PURE__ */ React13.createElement(
       "span",
       {
         style: {
@@ -867,7 +956,7 @@ function CodeWrapper({
       name
     ),
     children,
-    hasName && /* @__PURE__ */ React12.createElement(
+    hasName && /* @__PURE__ */ React13.createElement(
       "span",
       {
         style: {
@@ -882,7 +971,7 @@ function CodeWrapper({
           fontStyle: "italic"
         }
       },
-      stepName || /* @__PURE__ */ React12.createElement("span", { style: { visibility: "hidden" } }, "Step")
+      stepName || /* @__PURE__ */ React13.createElement("span", { style: { visibility: "hidden" } }, "Step")
     )
   );
 }
@@ -891,7 +980,7 @@ function CodeStepper({
   name,
   ...props
 }) {
-  const { language, code } = React12.useMemo(() => {
+  const { language, code } = React13.useMemo(() => {
     return getCodeDetails(props.children);
   }, [props.children]);
   const {
@@ -901,21 +990,21 @@ function CodeStepper({
     hasSteps,
     hasName
   } = useCodeSteps(code);
-  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(
+  return /* @__PURE__ */ React13.createElement(CodeContainer, null, import.meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ React13.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ React13.createElement(Highlighter, { language, style: gruvboxDark }, prefixes.join(""))), /* @__PURE__ */ React13.createElement(
     Stepper,
     {
       values: steps,
       alwaysVisible: !hasSteps,
       priority: priority ? priority + 1 : void 0
     },
-    (step, _, isActive) => /* @__PURE__ */ React12.createElement(
+    (step, _, isActive) => /* @__PURE__ */ React13.createElement(
       CodeWrapper,
       {
         name,
         stepName: step == null ? void 0 : step.name,
         hasName
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(
         Highlighter,
         {
           language,
@@ -965,7 +1054,7 @@ CodeStepper.mdxType = "CodeStepper";
 // src/components/map.tsx
 var componentsMap = {
   ...mdxComponentMap,
-  inlineCode: (props) => /* @__PURE__ */ React13.createElement(
+  inlineCode: (props) => /* @__PURE__ */ React14.createElement(
     InlineCode,
     {
       ...props,
@@ -975,7 +1064,7 @@ var componentsMap = {
       }
     }
   ),
-  table: (props) => /* @__PURE__ */ React13.createElement(
+  table: (props) => /* @__PURE__ */ React14.createElement(
     "table",
     {
       ...props,
@@ -986,7 +1075,7 @@ var componentsMap = {
       }
     }
   ),
-  tr: (props) => /* @__PURE__ */ React13.createElement(
+  tr: (props) => /* @__PURE__ */ React14.createElement(
     "tr",
     {
       ...props,
@@ -998,7 +1087,7 @@ var componentsMap = {
       }
     }
   ),
-  td: (props) => /* @__PURE__ */ React13.createElement(
+  td: (props) => /* @__PURE__ */ React14.createElement(
     "td",
     {
       ...props,
@@ -1011,7 +1100,7 @@ var componentsMap = {
       }
     }
   ),
-  h1: (props) => /* @__PURE__ */ React13.createElement(
+  h1: (props) => /* @__PURE__ */ React14.createElement(
     CustomHeading,
     {
       fontSize: "h1",
@@ -1027,15 +1116,15 @@ var componentsMap = {
     },
     props.children
   ),
-  h2: (props) => /* @__PURE__ */ React13.createElement(HeadingTwo, null, props.children),
-  h3: (props) => /* @__PURE__ */ React13.createElement(HeadingThree, { ...props }),
-  img: (props) => /* @__PURE__ */ React13.createElement(Image2, { ...props }),
+  h2: (props) => /* @__PURE__ */ React14.createElement(HeadingTwo, null, props.children),
+  h3: (props) => /* @__PURE__ */ React14.createElement(HeadingThree, { ...props }),
+  img: (props) => /* @__PURE__ */ React14.createElement(Image2, { ...props }),
   pre: CodeStepper,
-  li: (props) => /* @__PURE__ */ React13.createElement("li", { ...props, style: { margin: "24px 0" } }),
-  Side: (props) => /* @__PURE__ */ React13.createElement("div", { ...props }),
+  li: (props) => /* @__PURE__ */ React14.createElement("li", { ...props, style: { margin: "24px 0" } }),
+  Side: (props) => /* @__PURE__ */ React14.createElement("div", { ...props }),
   p: (props) => {
     const Text = mdxComponentMap.p;
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       Text,
       {
         style: { margin: "8px 0", padding: "8px 0", lineHeight: "2rem" },
@@ -1043,10 +1132,10 @@ var componentsMap = {
       }
     );
   },
-  blockquote: (props) => /* @__PURE__ */ React13.createElement(CustomQuote, { ...props }),
+  blockquote: (props) => /* @__PURE__ */ React14.createElement(CustomQuote, { ...props }),
   a: ({ children, ...props }) => {
     const domain = new URL(props.href || "").hostname;
-    return /* @__PURE__ */ React13.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ React14.createElement(
       "small",
       {
         style: {
@@ -1062,14 +1151,14 @@ var componentsMap = {
 var map_default = componentsMap;
 
 // src/components/FilePane.tsx
-import React14 from "react";
+import React15 from "react";
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return React14.isValidElement(children) ? React14.cloneElement(children, {
+  return React15.isValidElement(children) ? React15.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -1078,14 +1167,14 @@ function FilePane({
 FilePane.mdxType = "FilePane";
 
 // src/components/ItemsColumn.tsx
-import React15 from "react";
+import React16 from "react";
 import { Stepper as Stepper2 } from "spectacle";
-import styled10 from "styled-components";
+import styled11 from "styled-components";
 import { useSpring, animated } from "react-spring";
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = React15.Children.toArray(children);
-  return /* @__PURE__ */ React15.createElement(Stepper2, { values: childrenArray }, (value, step) => /* @__PURE__ */ React15.createElement(
+  const childrenArray = React16.Children.toArray(children);
+  return /* @__PURE__ */ React16.createElement(Stepper2, { values: childrenArray }, (value, step) => /* @__PURE__ */ React16.createElement(
     "div",
     {
       style: {
@@ -1099,14 +1188,14 @@ function ItemsColumn(divProps) {
     },
     childrenArray.map((child, index) => {
       const isVisible = index <= step;
-      if (!React15.isValidElement(child)) {
+      if (!React16.isValidElement(child)) {
         return child;
       }
-      return /* @__PURE__ */ React15.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
+      return /* @__PURE__ */ React16.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
     })
   ));
 }
-var ItemColumnWrapperStyled = styled10(animated.div)`
+var ItemColumnWrapperStyled = styled11(animated.div)`
   * {
     text-align: center !important;
   }
@@ -1117,15 +1206,75 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = useSpring({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ React15.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
+  return /* @__PURE__ */ React16.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
+}
+
+// src/components/DocumentationItem.tsx
+import React17 from "react";
+import styled12 from "styled-components";
+var DocWrapper = styled12.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 10000;
+
+  .docContent {
+    display: none;
+  }
+
+  &:hover .docContent {
+    display: flex;
+  }
+`;
+var DocContainer = styled12.div`
+  margin: 2rem 1rem;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+`;
+var DocLink = styled12.a`
+  text-decoration: none;
+  font-weight: normal;
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #f49676;
+`;
+var DocLinkItem = styled12(DocLink)`
+  width: fit-content;
+  display: inline-block;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+  margin: 0.25rem 0;
+`;
+var DocContent = styled12.div`
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  position: absolute;
+  right: 1rem;
+  bottom: 4.5rem;
+  text-align: right;
+  border-radius: 0.5rem;
+  align-items: flex-end;
+`;
+function Doc({
+  label,
+  link,
+  children
+}) {
+  return /* @__PURE__ */ React17.createElement(DocWrapper, null, /* @__PURE__ */ React17.createElement(DocContainer, null, children && /* @__PURE__ */ React17.createElement(DocContent, null, children), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
+}
+function DocItem({ label, link }) {
+  return /* @__PURE__ */ React17.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
 }
 
 // src/components/HorizontalList.tsx
-import React16 from "react";
+import React18 from "react";
 import { animated as animated2, useSpring as useSpring2 } from "react-spring";
 import { Stepper as Stepper3 } from "spectacle";
-import styled11 from "styled-components";
-var Container = styled11.div`
+import styled13 from "styled-components";
+var Container = styled13.div`
   display: grid;
   grid-gap: 2rem;
 `;
@@ -1133,8 +1282,8 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = React16.Children.toArray(children);
-  return /* @__PURE__ */ React16.createElement(Stepper3, { values: items }, (_, step) => /* @__PURE__ */ React16.createElement(
+  const items = React18.Children.toArray(children);
+  return /* @__PURE__ */ React18.createElement(Stepper3, { values: items }, (_, step) => /* @__PURE__ */ React18.createElement(
     Container,
     {
       style: {
@@ -1142,10 +1291,10 @@ function HorizontalList({
       }
     },
     items.map((item, k) => {
-      if (!React16.isValidElement(item)) {
+      if (!React18.isValidElement(item)) {
         return item;
       }
-      return React16.cloneElement(item, {
+      return React18.cloneElement(item, {
         // @ts-expect-error cloning
         position: k + 1,
         isVisible: k <= step,
@@ -1155,12 +1304,12 @@ function HorizontalList({
   ));
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React18.createElement(
       "svg",
       {
         width: "48",
@@ -1169,14 +1318,14 @@ function Pill({ position }) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React18.createElement(
         "path",
         {
           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",
           fill: "#ffffff"
         }
       ),
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React18.createElement(
         "text",
         {
           x: "9",
@@ -1188,7 +1337,7 @@ function Pill({ position }) {
         },
         position
       ),
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React18.createElement(
         "path",
         {
           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 +1347,12 @@ function Pill({ position }) {
     )
   );
 }
-var Item = styled11(animated2.div)`
+var Item = styled13(animated2.div)`
   display: flex;
   flex-direction: column;
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 `;
-var ItemHead = styled11.div`
+var ItemHead = styled13.div`
   display: flex;
   flex-direction: row;
   font-size: 1.3rem;
@@ -1213,7 +1362,7 @@ var ItemHead = styled11.div`
     margin: 0;
   }
 `;
-var ItemContent = styled11.div`
+var ItemContent = styled13.div`
   > * {
     font-size: 1rem;
     padding: 4px !important;
@@ -1241,31 +1390,31 @@ function HorizontalListItem({
   const opacityStyles = useSpring2({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  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));
+  return /* @__PURE__ */ React18.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ React18.createElement(ItemHead, null, /* @__PURE__ */ React18.createElement(Pill, { position }), /* @__PURE__ */ React18.createElement("p", null, title)), /* @__PURE__ */ React18.createElement(ItemContent, null, children));
 }
 
 // src/components/Timeline.tsx
-import React17 from "react";
+import React19 from "react";
 import { animated as animated3, useSpring as useSpring3 } from "react-spring";
 import { Stepper as Stepper4 } from "spectacle";
 
 // src/components/Timeline.styled.tsx
-import styled12 from "styled-components";
-var TimelineItemContent = styled12.div`
+import styled14 from "styled-components";
+var TimelineItemContent = styled14.div`
   display: flex;
   padding: 0.7rem 0 1rem 12px;
 `;
-var TimelineItemContentPhantom = styled12(TimelineItemContent)`
+var TimelineItemContentPhantom = styled14(TimelineItemContent)`
   opacity: 0;
 `;
-var TimelineItemBody = styled12.div`
+var TimelineItemBody = styled14.div`
   &,
   & > * {
     font-size: 1.3rem !important;
     color: #ffffff !important;
   }
 `;
-var TimelineItemTitle = styled12.div`
+var TimelineItemTitle = styled14.div`
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-weight: bold;
@@ -1273,8 +1422,8 @@ var TimelineItemTitle = styled12.div`
 `;
 
 // src/components/Timeline.tsx
-import styled13 from "styled-components";
-var TimelineItemStyled = styled13(animated3.div)`
+import styled15 from "styled-components";
+var TimelineItemStyled = styled15(animated3.div)`
   flex: 1;
   flex-flow: column nowrap;
   display: inline-flex;
@@ -1292,7 +1441,7 @@ var TimelineItemStyled = styled13(animated3.div)`
     }
   }
 `;
-var TimelineItemGuide = styled13(animated3.div)`
+var TimelineItemGuide = styled15(animated3.div)`
   width: 100%;
   padding-top: 2px;
   display: flex;
@@ -1308,7 +1457,7 @@ var TimelineItemGuide = styled13(animated3.div)`
     margin-right: 4px;
   }
 `;
-var TimelineItemGuideLine = styled13(animated3.div)`
+var TimelineItemGuideLine = styled15(animated3.div)`
   border-top: 4px solid #ffffff;
   margin-right: 4px;
 `;
@@ -1319,8 +1468,8 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = React17.Children.toArray(props.children);
-  return /* @__PURE__ */ React17.createElement(
+  const children = React19.Children.toArray(props.children);
+  return /* @__PURE__ */ React19.createElement(
     Stepper4,
     {
       ...props,
@@ -1330,10 +1479,10 @@ function Timeline(props) {
     },
     (value, step) => {
       return children.map((child, index) => {
-        if (!React17.isValidElement(child)) {
+        if (!React19.isValidElement(child)) {
           return child;
         }
-        return React17.cloneElement(child, {
+        return React19.cloneElement(child, {
           // @ts-expect-error cloning
           isPhantom: step < index,
           isLast: step === index
@@ -1361,7 +1510,7 @@ function TimelineItem(props) {
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
   const colorStyles = useSpring3({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     TimelineItemStyled,
     {
       ...rest,
@@ -1369,13 +1518,13 @@ function TimelineItem(props) {
         ...appearStyles
       }
     },
-    /* @__PURE__ */ React17.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ React17.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React17.createElement(TimelineItemBody, null, children)),
-    /* @__PURE__ */ React17.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ React17.createElement(Hexagon, null), /* @__PURE__ */ React17.createElement(TimelineItemGuideLine, { style: guideLineProps })),
-    /* @__PURE__ */ React17.createElement(TimelineItemContent, null, /* @__PURE__ */ React17.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React17.createElement(TimelineItemBody, null, children))
+    /* @__PURE__ */ React19.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ React19.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React19.createElement(TimelineItemBody, null, children)),
+    /* @__PURE__ */ React19.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ React19.createElement(Hexagon, null), /* @__PURE__ */ React19.createElement(TimelineItemGuideLine, { style: guideLineProps })),
+    /* @__PURE__ */ React19.createElement(TimelineItemContent, null, /* @__PURE__ */ React19.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React19.createElement(TimelineItemBody, null, children))
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "svg",
     {
       width: "18",
@@ -1384,14 +1533,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(
       "path",
       {
         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",
         fill: "#F49676"
       }
     ),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(
       "path",
       {
         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 +1551,9 @@ function Hexagon() {
 }
 
 // src/components/IconBox.tsx
-import React18 from "react";
-import styled14 from "styled-components";
-var IconBoxContent = styled14.div`
+import React20 from "react";
+import styled16 from "styled-components";
+var IconBoxContent = styled16.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;
@@ -1414,7 +1563,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "div",
     {
       style: {
@@ -1424,14 +1573,14 @@ function IconBox({
         padding: "1rem 0"
       }
     },
-    /* @__PURE__ */ React18.createElement("div", { style: { fontSize: 60 } }, icon),
-    /* @__PURE__ */ React18.createElement(IconBoxContent, null, children)
+    /* @__PURE__ */ React20.createElement("div", { style: { fontSize: 60 } }, icon),
+    /* @__PURE__ */ React20.createElement(IconBoxContent, null, children)
   );
 }
 
 // src/index.tsx
 function PassThrough({ children }) {
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, children);
 }
 function Layout({
   children,
@@ -1443,47 +1592,44 @@ function Layout({
     console.warn(`Layout ${layout} not found`);
   }
   if (Layout2) {
-    return /* @__PURE__ */ React19.createElement(Layout2, { ...frontmatter }, children);
+    return /* @__PURE__ */ React21.createElement(Layout2, { ...frontmatter }, children);
   }
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, children);
 }
 var componentsMap2 = {
   ...map_default,
   wrapper: Layout
 };
 function Deck({ deck }) {
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  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) => {
+  return /* @__PURE__ */ React21.createElement(React21.StrictMode, null, /* @__PURE__ */ React21.createElement(MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ React21.createElement(SpectacleDeck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
     const Component = slide.slideComponent;
-    return /* @__PURE__ */ React19.createElement(Slide, { key: i }, /* @__PURE__ */ React19.createElement(Component, null));
+    return /* @__PURE__ */ React21.createElement(Slide, { key: i }, /* @__PURE__ */ React21.createElement(Component, null));
   }))));
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", { style: { color: "red" } }, children);
-}
-function Doc({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", { style: { color: "blue" } }, children);
+  return /* @__PURE__ */ React21.createElement("div", { style: { color: "red" } }, children);
 }
 function Information({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", { style: { color: "orange" } }, children);
+  return /* @__PURE__ */ React21.createElement("div", { style: { color: "orange" } }, children);
 }
 function Success({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", { style: { color: "green" } }, children);
+  return /* @__PURE__ */ React21.createElement("div", { style: { color: "green" } }, children);
+}
+function Warning({ children }) {
+  return /* @__PURE__ */ React21.createElement("div", { style: { color: "yellow" } }, children);
 }
 function Side({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", null, children);
+  return /* @__PURE__ */ React21.createElement("div", null, children);
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", null, children);
-}
-function DocItem({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", null, children);
+  return /* @__PURE__ */ React21.createElement("div", null, children);
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ React19.createElement("div", null, children);
+  return /* @__PURE__ */ React21.createElement("div", null, children);
 }
 export {
   Box2 as Box,
@@ -1504,5 +1650,6 @@ export {
   Side,
   Success,
   Timeline,
-  TimelineItem
+  TimelineItem,
+  Warning
 };