@gpichot/spectacle-deck 1.0.1 → 1.0.3

package/index.cjs

@@ -45,12 +45,331 @@ __export(src_exports, {
   Timeline: () => Timeline,
   TimelineItem: () => TimelineItem
 });
-var import_react17 = __toESM(require("react"));
-var import_react18 = require("@mdx-js/react");
+var import_react19 = __toESM(require("react"));
+var import_react20 = require("@mdx-js/react");
 var import_spectacle9 = require("spectacle");
 
-// src/layouts/MainSectionLayout.tsx
+// src/layouts/CenteredLayout.tsx
+var import_react2 = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+
+// src/layouts/utils.ts
 var import_react = __toESM(require("react"));
+var Margins = {
+  vertical: "4rem",
+  horizontal: "7rem",
+  horizontalInternal: "2rem"
+};
+function getHeading(children) {
+  const allChild = import_react.default.Children.toArray(children);
+  if (allChild.length === 0)
+    return [null, allChild];
+  const [candidate, ...rest] = allChild;
+  if (!import_react.default.isValidElement(candidate))
+    return [null, allChild];
+  if (["h2", "h3"].includes(candidate.props.originalType)) {
+    return [candidate, rest];
+  }
+  return [null, allChild];
+}
+function getCode(children) {
+  const allChild = import_react.default.Children.toArray(children);
+  if (allChild.length === 0)
+    return [null, allChild];
+  const index = allChild.findIndex((child) => {
+    if (!import_react.default.isValidElement(child))
+      return false;
+    return child.props.originalType === "pre";
+  });
+  if (index === -1)
+    return [null, allChild];
+  const candidate = allChild[index];
+  const rest = allChild.filter((_, i) => i !== index);
+  return [candidate, rest];
+}
+function getMatchingMdxType(children, mdxType) {
+  const allChild = import_react.default.Children.toArray(children);
+  const matchFn = (child) => {
+    if (!import_react.default.isValidElement(child))
+      return false;
+    if (typeof child.type !== "function")
+      return false;
+    if ("mdxType" in child.type === false)
+      return false;
+    return child.type.mdxType === mdxType;
+  };
+  const matches = allChild.filter(matchFn);
+  const rest = allChild.filter((child) => !matchFn(child));
+  return [matches, rest];
+}
+function getCodeChildren(children) {
+  const [code, rest] = getCode(children);
+  if (code)
+    return [code, rest];
+  const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
+  if (codeStepper.length > 0)
+    return [codeStepper, rest2];
+  const [codes, rest3] = getMatchingMdxType(children, "FilePane");
+  return [codes, rest3];
+}
+
+// src/layouts/CenteredLayout.tsx
+var CenteredLayoutContent = import_styled_components.default.div`
+  h2,
+  h3 {
+  }
+`;
+var CenteredLayout = (props) => {
+  const [heading, rest] = getHeading(props.children);
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      ...props,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexFlow: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: `0 ${Margins.horizontal}`
+      }
+    },
+    rest,
+    /* @__PURE__ */ import_react2.default.createElement(
+      CenteredLayoutContent,
+      {
+        style: {
+          position: "absolute",
+          opacity: 0.8,
+          marginBottom: "2rem",
+          marginTop: "2rem",
+          bottom: 0
+        }
+      },
+      heading
+    )
+  );
+};
+
+// src/layouts/Default3Layout.tsx
+var import_react3 = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
+function MultipleHexagons({ position }) {
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "svg",
+    {
+      viewBox: `${position === "left" ? "0" : "2"} 0 12 20`,
+      width: "12",
+      height: "20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 3.913 5.381 L 2.063 4.314 L 2.063 2.173 L 3.913 1.103 L 5.761 2.173 L 5.761 4.314 L 3.913 5.381 Z M 2.38 4.128 L 3.913 5.014 L 5.444 4.128 L 5.444 2.356 L 3.913 1.47 L 2.38 2.356 L 2.38 4.128 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 8.047 5.401 L 6.197 4.334 L 6.197 2.193 L 8.047 1.123 L 9.895 2.193 L 9.895 4.334 L 8.047 5.401 Z M 6.514 4.148 L 8.047 5.034 L 9.578 4.148 L 9.578 2.376 L 8.047 1.49 L 6.514 2.376 L 6.514 4.148 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 8.071 4.548 L 6.956 3.905 L 6.956 2.615 L 8.071 1.97 L 9.184 2.615 L 9.184 3.905 L 8.071 4.548 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 5.982 8.898 L 4.132 7.831 L 4.132 5.69 L 5.982 4.62 L 7.83 5.69 L 7.83 7.831 L 5.982 8.898 Z M 4.449 7.645 L 5.982 8.531 L 7.513 7.645 L 7.513 5.873 L 5.982 4.987 L 4.449 5.873 L 4.449 7.645 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 6.006 8.045 L 4.891 7.402 L 4.891 6.112 L 6.006 5.467 L 7.119 6.112 L 7.119 7.402 L 6.006 8.045 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 8.056 12.323 L 6.206 11.256 L 6.206 9.115 L 8.056 8.045 L 9.904 9.115 L 9.904 11.256 L 8.056 12.323 Z M 6.523 11.07 L 8.056 11.956 L 9.587 11.07 L 9.587 9.298 L 8.056 8.412 L 6.523 9.298 L 6.523 11.07 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 8.08 11.47 L 6.965 10.827 L 6.965 9.537 L 8.08 8.892 L 9.193 9.537 L 9.193 10.827 L 8.08 11.47 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 10.101 8.878 L 8.251 7.811 L 8.251 5.67 L 10.101 4.6 L 11.949 5.67 L 11.949 7.811 L 10.101 8.878 Z M 8.568 7.625 L 10.101 8.511 L 11.632 7.625 L 11.632 5.853 L 10.101 4.967 L 8.568 5.853 L 8.568 7.625 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 10.125 8.025 L 9.01 7.382 L 9.01 6.092 L 10.125 5.447 L 11.238 6.092 L 11.238 7.382 L 10.125 8.025 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 12.077 12.301 L 10.227 11.234 L 10.227 9.093 L 12.077 8.023 L 13.925 9.093 L 13.925 11.234 L 12.077 12.301 Z M 10.544 11.048 L 12.077 11.934 L 13.608 11.048 L 13.608 9.276 L 12.077 8.39 L 10.544 9.276 L 10.544 11.048 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 12.101 11.448 L 10.986 10.805 L 10.986 9.515 L 12.101 8.87 L 13.214 9.515 L 13.214 10.805 L 12.101 11.448 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 10.062 15.781 L 8.212 14.714 L 8.212 12.573 L 10.062 11.503 L 11.91 12.573 L 11.91 14.714 L 10.062 15.781 Z M 8.529 14.528 L 10.062 15.414 L 11.593 14.528 L 11.593 12.756 L 10.062 11.87 L 8.529 12.756 L 8.529 14.528 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 8.029 19.193 L 6.179 18.126 L 6.179 15.985 L 8.029 14.915 L 9.877 15.985 L 9.877 18.126 L 8.029 19.193 Z M 6.496 17.94 L 8.029 18.826 L 9.56 17.94 L 9.56 16.168 L 8.029 15.282 L 6.496 16.168 L 6.496 17.94 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 6.068 15.716 L 4.218 14.649 L 4.218 12.508 L 6.068 11.438 L 7.916 12.508 L 7.916 14.649 L 6.068 15.716 Z M 4.535 14.463 L 6.068 15.349 L 7.599 14.463 L 7.599 12.691 L 6.068 11.805 L 4.535 12.691 L 4.535 14.463 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 6.092 14.863 L 4.977 14.22 L 4.977 12.93 L 6.092 12.285 L 7.205 12.93 L 7.205 14.22 L 6.092 14.863 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 4.011 12.393 L 2.161 11.326 L 2.161 9.185 L 4.011 8.115 L 5.859 9.185 L 5.859 11.326 L 4.011 12.393 Z M 2.478 11.14 L 4.011 12.026 L 5.542 11.14 L 5.542 9.368 L 4.011 8.482 L 2.478 9.368 L 2.478 11.14 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 2.083 15.773 L 0.233 14.706 L 0.233 12.565 L 2.083 11.495 L 3.931 12.565 L 3.931 14.706 L 2.083 15.773 Z M 0.55 14.52 L 2.083 15.406 L 3.614 14.52 L 3.614 12.748 L 2.083 11.862 L 0.55 12.748 L 0.55 14.52 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 2.107 14.92 L 0.992 14.277 L 0.992 12.987 L 2.107 12.342 L 3.22 12.987 L 3.22 14.277 L 2.107 14.92 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 3.966 19.231 L 2.116 18.164 L 2.116 16.023 L 3.966 14.953 L 5.814 16.023 L 5.814 18.164 L 3.966 19.231 Z M 2.433 17.978 L 3.966 18.864 L 5.497 17.978 L 5.497 16.206 L 3.966 15.32 L 2.433 16.206 L 2.433 17.978 Z",
+        fill: "#F49676"
+      }
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M 3.99 18.378 L 2.875 17.735 L 2.875 16.445 L 3.99 15.8 L 5.103 16.445 L 5.103 17.735 L 3.99 18.378 Z",
+        fill: "#F49676"
+      }
+    )
+  );
+}
+var Default3SideContainer = import_styled_components2.default.div`
+  svg {
+    height: 100%;
+    width: auto;
+    path {
+      fill: #ffffff22;
+      transition: fill 3s;
+      &:hover {
+        fill: #ffffffbb;
+      }
+    }
+  }
+`;
+var Default2LayoutContainer = import_styled_components2.default.div`
+  h2,
+  h3 {
+    text-align: left;
+    color: white;
+  }
+`;
+var Default3Layout = ({
+  children,
+  position = "right"
+}) => {
+  const isReversed = position === "left";
+  return /* @__PURE__ */ import_react3.default.createElement(
+    Default2LayoutContainer,
+    {
+      style: {
+        display: "flex",
+        position: "absolute",
+        flexDirection: isReversed ? "row-reverse" : "row",
+        inset: 0,
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      Default3SideContainer,
+      {
+        style: {
+          flex: 1,
+          height: "100%",
+          padding: "2rem",
+          transform: isReversed ? "scale(2) translate(25%, 4%)" : "scale(2) translate(-25%, 15%)"
+        }
+      },
+      /* @__PURE__ */ import_react3.default.createElement(MultipleHexagons, { position })
+    ),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 4,
+          marginLeft: isReversed ? Margins.horizontal : "2rem",
+          marginRight: isReversed ? "2rem" : Margins.horizontal
+        }
+      },
+      children
+    )
+  );
+};
+
+// src/layouts/MainSectionLayout.tsx
+var import_react4 = __toESM(require("react"));
 var import_spectacle = require("spectacle");
 
 // src/front.png
@@ -60,7 +379,7 @@ var front_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAfPCAYAA
 var MainSectionLayout = ({
   children
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     import_spectacle.FlexBox,
     {
       height: "100%",
@@ -74,14 +393,14 @@ var MainSectionLayout = ({
         bottom: 0
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: "8rem", flex: 1 } }, children),
-    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: "0 0", height: "100%", paddingLeft: "5rem" } }, /* @__PURE__ */ import_react.default.createElement("img", { src: front_default, alt: "Front", style: { height: "100%" } }))
+    /* @__PURE__ */ import_react4.default.createElement("div", { style: { paddingLeft: "8rem", flex: 1 } }, children),
+    /* @__PURE__ */ import_react4.default.createElement("div", { style: { flex: "0 0", height: "100%", paddingLeft: "5rem" } }, /* @__PURE__ */ import_react4.default.createElement("img", { src: front_default, alt: "Front", style: { height: "100%" } }))
   );
 };
 
 // src/layouts/SectionLayout.tsx
-var import_styled_components = __toESM(require("styled-components"));
-var SectionLayout = import_styled_components.default.div`
+var import_styled_components3 = __toESM(require("styled-components"));
+var SectionLayout = import_styled_components3.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -95,12 +414,12 @@ var SectionLayout = import_styled_components.default.div`
 `;
 
 // src/layouts/SideCodeLayout.tsx
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/layouts/columns.tsx
-var import_react2 = __toESM(require("react"));
-var import_styled_components2 = __toESM(require("styled-components"));
-var DivWithHeading = import_styled_components2.default.div`
+var import_react5 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
+var DivWithHeading = import_styled_components4.default.div`
   h2 {
     margin-top: 0;
   }
@@ -109,7 +428,7 @@ var DivWithHeading = import_styled_components2.default.div`
     font-weight: 400;
   }
 `;
-var ColumnsContainer = (0, import_styled_components2.default)(DivWithHeading)`
+var ColumnsContainer = (0, import_styled_components4.default)(DivWithHeading)`
   display: flex;
   flex-direction: row;
   position: absolute;
@@ -123,15 +442,15 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = import_react2.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react2.default.createElement(
+  const childrenArray = import_react5.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react5.default.createElement(
     ColumnsContainer,
     {
       style: {
         flexDirection: reverse ? "row-reverse" : "row"
       }
     },
-    childrenArray.map((child, i) => /* @__PURE__ */ import_react2.default.createElement(
+    childrenArray.map((child, i) => /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         key: i,
@@ -149,57 +468,9 @@ function ColumnsLayout({
   );
 }
 
-// src/layouts/utils.ts
-var import_react3 = __toESM(require("react"));
-var Margins = {
-  vertical: "4rem",
-  horizontal: "7rem",
-  horizontalInternal: "2rem"
-};
-function getCode(children) {
-  const allChild = import_react3.default.Children.toArray(children);
-  if (allChild.length === 0)
-    return [null, allChild];
-  const index = allChild.findIndex((child) => {
-    if (!import_react3.default.isValidElement(child))
-      return false;
-    return child.props.originalType === "pre";
-  });
-  if (index === -1)
-    return [null, allChild];
-  const candidate = allChild[index];
-  const rest = allChild.filter((_, i) => i !== index);
-  return [candidate, rest];
-}
-function getMatchingMdxType(children, mdxType) {
-  const allChild = import_react3.default.Children.toArray(children);
-  const matchFn = (child) => {
-    if (!import_react3.default.isValidElement(child))
-      return false;
-    if (typeof child.type !== "function")
-      return false;
-    if ("mdxType" in child.type === false)
-      return false;
-    return child.type.mdxType === mdxType;
-  };
-  const matches = allChild.filter(matchFn);
-  const rest = allChild.filter((child) => !matchFn(child));
-  return [matches, rest];
-}
-function getCodeChildren(children) {
-  const [code, rest] = getCode(children);
-  if (code)
-    return [code, rest];
-  const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
-  if (codeStepper.length > 0)
-    return [codeStepper, rest2];
-  const [codes, rest3] = getMatchingMdxType(children, "FilePane");
-  return [codes, rest3];
-}
-
 // src/layouts/SideCodeLayout.tsx
-var import_styled_components3 = __toESM(require("styled-components"));
-var CodeSide = import_styled_components3.default.div`
+var import_styled_components5 = __toESM(require("styled-components"));
+var CodeSide = import_styled_components5.default.div`
   pre {
     font-size: 0.9rem;
   }
@@ -209,7 +480,7 @@ function SidedCodeLayout({
   position = "right"
 }) {
   const [code, rest] = getCodeChildren(children);
-  return /* @__PURE__ */ import_react4.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       style: {
@@ -218,7 +489,7 @@ function SidedCodeLayout({
       }
     },
     rest
-  ), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react6.default.createElement(
     CodeSide,
     {
       style: {
@@ -234,15 +505,15 @@ function SidedCodeLayout({
 }
 
 // src/layouts/SideImageLayout.tsx
-var import_react6 = __toESM(require("react"));
-var import_styled_components5 = __toESM(require("styled-components"));
+var import_react8 = __toESM(require("react"));
+var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/components/Image.tsx
-var import_react5 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/layouts/styled.ts
-var import_styled_components4 = __toESM(require("styled-components"));
-var SVGObject = import_styled_components4.default.object`
+var import_styled_components6 = __toESM(require("styled-components"));
+var SVGObject = import_styled_components6.default.object`
   padding: 3rem 2rem;
   box-sizing: border-box;
   background-color: white;
@@ -252,7 +523,7 @@ var SVGObject = import_styled_components4.default.object`
 function Image(props) {
   const { src, height } = props;
   if (!(src == null ? void 0 : src.endsWith(".svg"))) {
-    return /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react7.default.createElement(
       "img",
       {
         src,
@@ -265,7 +536,7 @@ function Image(props) {
       }
     );
   }
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     SVGObject,
     {
       type: "image/svg+xml",
@@ -281,7 +552,7 @@ function Image(props) {
 Image.mdxType = "Image";
 
 // src/layouts/SideImageLayout.tsx
-var DivWithHeading2 = import_styled_components5.default.div`
+var DivWithHeading2 = import_styled_components7.default.div`
   h2 {
     margin-top: 0;
   }
@@ -302,7 +573,7 @@ var SidedImageLayout = ({
     console.error("No image provided for SidedImageLayout");
     return null;
   }
-  return /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     DivWithHeading2,
     {
       style: {
@@ -315,7 +586,7 @@ var SidedImageLayout = ({
         top: 0
       }
     },
-    /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       "div",
       {
         style: {
@@ -328,7 +599,7 @@ var SidedImageLayout = ({
       },
       rest
     ),
-    /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       "div",
       {
         style: {
@@ -340,19 +611,19 @@ var SidedImageLayout = ({
           backgroundColor: "white"
         }
       },
-      component || /* @__PURE__ */ import_react6.default.createElement(Image, { src: image })
+      component || /* @__PURE__ */ import_react8.default.createElement(Image, { src: image })
     )
   );
 };
 
 // src/layouts/SideLayout.tsx
-var import_react7 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 function SideLayout({
   children,
   position = "right"
 }) {
   const [side, rest] = getMatchingMdxType(children, "Side");
-  return /* @__PURE__ */ import_react7.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react9.default.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       style: {
@@ -372,6 +643,8 @@ function SideLayout({
 // src/layouts/index.tsx
 var layouts_default = {
   mainSection: MainSectionLayout,
+  centered: CenteredLayout,
+  default3: Default3Layout,
   sidedCode: SidedCodeLayout,
   sidedImage: SidedImageLayout,
   side: SideLayout,
@@ -404,11 +677,11 @@ var theme_default = {
 };
 
 // src/template.tsx
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_spectacle2 = require("spectacle");
 var template = ({ slideNumber, numberOfSlides }) => {
   const percentage = slideNumber / numberOfSlides * 100;
-  return /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_spectacle2.Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ import_react8.default.createElement(import_spectacle2.FullScreen, null)), /* @__PURE__ */ import_react8.default.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ import_react10.default.createElement(import_spectacle2.Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ import_react10.default.createElement(import_spectacle2.FullScreen, null)), /* @__PURE__ */ import_react10.default.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       style: {
@@ -422,26 +695,26 @@ var template = ({ slideNumber, numberOfSlides }) => {
 };
 
 // src/components/map.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_spectacle5 = require("spectacle");
 
 // src/components/styled.tsx
-var import_react9 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_spectacle3 = require("spectacle");
-var import_styled_components6 = __toESM(require("styled-components"));
-var StyledImage = (0, import_styled_components6.default)(import_spectacle3.Image)`
+var import_styled_components8 = __toESM(require("styled-components"));
+var StyledImage = (0, import_styled_components8.default)(import_spectacle3.Image)`
   object-fit: contain;
   max-height: 30vh;
   max-width: 70vw;
 `;
-var Image2 = (props) => /* @__PURE__ */ import_react9.default.createElement(import_spectacle3.FlexBox, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ import_react9.default.createElement(StyledImage, { ...props }));
-var CustomHeading = (0, import_styled_components6.default)(import_spectacle3.Heading)`
+var Image2 = (props) => /* @__PURE__ */ import_react11.default.createElement(import_spectacle3.FlexBox, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ import_react11.default.createElement(StyledImage, { ...props }));
+var CustomHeading = (0, import_styled_components8.default)(import_spectacle3.Heading)`
   strong {
     color: #f49676;
     font-weight: 500;
   }
 `;
-var CustomQuote = import_styled_components6.default.blockquote`
+var CustomQuote = import_styled_components8.default.blockquote`
   margin: 1rem 0;
   padding-left: 1.5rem;
   padding-top: 0;
@@ -452,7 +725,7 @@ var CustomQuote = import_styled_components6.default.blockquote`
     padding: 0 !important;
   }
 `;
-var InlineCode = import_styled_components6.default.code`
+var InlineCode = import_styled_components8.default.code`
   filter: brightness(1.05);
   zoom: 1.1;
   &:before,
@@ -461,12 +734,12 @@ var InlineCode = import_styled_components6.default.code`
     font-size: 0.8em;
   }
 `;
-var HeadingTwo = import_styled_components6.default.h2`
+var HeadingTwo = import_styled_components8.default.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
 `;
-var HeadingThree = import_styled_components6.default.h3`
+var HeadingThree = import_styled_components8.default.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 40px;
   font-weight: 400;
@@ -479,12 +752,12 @@ var HeadingThree = import_styled_components6.default.h3`
 `;
 
 // src/components/CodeStepper/CodeStepper.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_is = __toESM(require("react-is"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_gruvbox_dark = __toESM(require("react-syntax-highlighter/dist/cjs/styles/prism/gruvbox-dark"));
 var import_spectacle4 = require("spectacle");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/CodeStepper/code-directives.ts
 function range(start, end) {
@@ -549,7 +822,7 @@ function parseStepDirectives(directives) {
 // src/components/CodeStepper/CodeStepper.tsx
 var import_meta = {};
 var Highlighter = import_react_syntax_highlighter.Prism;
-var CodeContainer = import_styled_components7.default.div`
+var CodeContainer = import_styled_components9.default.div`
   pre {
     padding: 1rem 0rem !important;
     background-color: transparent !important;
@@ -570,7 +843,7 @@ var CodeContainer = import_styled_components7.default.div`
   }
 `;
 function useCodeSteps(code) {
-  return import_react10.default.useMemo(() => {
+  return import_react12.default.useMemo(() => {
     const prefixes = code.match(/(?:\/\/|<!--) @.*\n/g) || [];
     const prefixesLength = prefixes.reduce(
       (acc, prefix) => acc + prefix.length,
@@ -590,8 +863,8 @@ function useCodeSteps(code) {
   }, [code]);
 }
 function getCodeDetails(children) {
-  const child = import_react10.default.Children.toArray(children)[0];
-  if (!import_react10.default.isValidElement(child)) {
+  const child = import_react12.default.Children.toArray(children)[0];
+  if (!import_react12.default.isValidElement(child)) {
     return {
       language: "",
       code: import_react_is.default.isFragment(child) ? "" : String(child || "")
@@ -609,7 +882,7 @@ function CodeWrapper({
   hasName,
   children
 }) {
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "div",
     {
       style: {
@@ -619,7 +892,7 @@ function CodeWrapper({
         borderRadius: "4px"
       }
     },
-    name && /* @__PURE__ */ import_react10.default.createElement(
+    name && /* @__PURE__ */ import_react12.default.createElement(
       "span",
       {
         style: {
@@ -636,7 +909,7 @@ function CodeWrapper({
       name
     ),
     children,
-    hasName && /* @__PURE__ */ import_react10.default.createElement(
+    hasName && /* @__PURE__ */ import_react12.default.createElement(
       "span",
       {
         style: {
@@ -651,7 +924,7 @@ function CodeWrapper({
           fontStyle: "italic"
         }
       },
-      stepName || /* @__PURE__ */ import_react10.default.createElement("span", { style: { visibility: "hidden" } }, "Step")
+      stepName || /* @__PURE__ */ import_react12.default.createElement("span", { style: { visibility: "hidden" } }, "Step")
     )
   );
 }
@@ -660,7 +933,7 @@ function CodeStepper({
   name,
   ...props
 }) {
-  const { language, code } = import_react10.default.useMemo(() => {
+  const { language, code } = import_react12.default.useMemo(() => {
     return getCodeDetails(props.children);
   }, [props.children]);
   const {
@@ -670,21 +943,21 @@ function CodeStepper({
     hasSteps,
     hasName
   } = useCodeSteps(code);
-  return /* @__PURE__ */ import_react10.default.createElement(CodeContainer, null, import_meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ import_react10.default.createElement(Highlighter, { language, style: import_gruvbox_dark.default }, prefixes.join(""))), /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(CodeContainer, null, import_meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ import_react12.default.createElement(Highlighter, { language, style: import_gruvbox_dark.default }, prefixes.join(""))), /* @__PURE__ */ import_react12.default.createElement(
     import_spectacle4.Stepper,
     {
       values: steps,
       alwaysVisible: !hasSteps,
       priority: priority ? priority + 1 : void 0
     },
-    (step, _, isActive) => /* @__PURE__ */ import_react10.default.createElement(
+    (step, _, isActive) => /* @__PURE__ */ import_react12.default.createElement(
       CodeWrapper,
       {
         name,
         stepName: step == null ? void 0 : step.name,
         hasName
       },
-      /* @__PURE__ */ import_react10.default.createElement(
+      /* @__PURE__ */ import_react12.default.createElement(
         Highlighter,
         {
           language,
@@ -734,7 +1007,7 @@ CodeStepper.mdxType = "CodeStepper";
 // src/components/map.tsx
 var componentsMap = {
   ...import_spectacle5.mdxComponentMap,
-  inlineCode: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  inlineCode: (props) => /* @__PURE__ */ import_react13.default.createElement(
     InlineCode,
     {
       ...props,
@@ -744,7 +1017,7 @@ var componentsMap = {
       }
     }
   ),
-  table: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  table: (props) => /* @__PURE__ */ import_react13.default.createElement(
     "table",
     {
       ...props,
@@ -755,7 +1028,7 @@ var componentsMap = {
       }
     }
   ),
-  tr: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  tr: (props) => /* @__PURE__ */ import_react13.default.createElement(
     "tr",
     {
       ...props,
@@ -767,7 +1040,7 @@ var componentsMap = {
       }
     }
   ),
-  td: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  td: (props) => /* @__PURE__ */ import_react13.default.createElement(
     "td",
     {
       ...props,
@@ -780,7 +1053,7 @@ var componentsMap = {
       }
     }
   ),
-  h1: (props) => /* @__PURE__ */ import_react11.default.createElement(
+  h1: (props) => /* @__PURE__ */ import_react13.default.createElement(
     CustomHeading,
     {
       fontSize: "h1",
@@ -795,15 +1068,15 @@ var componentsMap = {
     },
     props.children
   ),
-  h2: (props) => /* @__PURE__ */ import_react11.default.createElement(HeadingTwo, null, props.children),
-  h3: (props) => /* @__PURE__ */ import_react11.default.createElement(HeadingThree, { ...props }),
-  img: (props) => /* @__PURE__ */ import_react11.default.createElement(Image2, { ...props }),
+  h2: (props) => /* @__PURE__ */ import_react13.default.createElement(HeadingTwo, null, props.children),
+  h3: (props) => /* @__PURE__ */ import_react13.default.createElement(HeadingThree, { ...props }),
+  img: (props) => /* @__PURE__ */ import_react13.default.createElement(Image2, { ...props }),
   pre: CodeStepper,
-  li: (props) => /* @__PURE__ */ import_react11.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
-  Side: (props) => /* @__PURE__ */ import_react11.default.createElement("div", { ...props }),
+  li: (props) => /* @__PURE__ */ import_react13.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
+  Side: (props) => /* @__PURE__ */ import_react13.default.createElement("div", { ...props }),
   p: (props) => {
     const Text = import_spectacle5.mdxComponentMap.p;
-    return /* @__PURE__ */ import_react11.default.createElement(
+    return /* @__PURE__ */ import_react13.default.createElement(
       Text,
       {
         style: { margin: "8px 0", padding: "8px 0", lineHeight: "2rem" },
@@ -811,10 +1084,10 @@ var componentsMap = {
       }
     );
   },
-  blockquote: (props) => /* @__PURE__ */ import_react11.default.createElement(CustomQuote, { ...props }),
+  blockquote: (props) => /* @__PURE__ */ import_react13.default.createElement(CustomQuote, { ...props }),
   a: ({ children, ...props }) => {
     const domain = new URL(props.href || "").hostname;
-    return /* @__PURE__ */ import_react11.default.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ import_react11.default.createElement(
+    return /* @__PURE__ */ import_react13.default.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ import_react13.default.createElement(
       "small",
       {
         style: {
@@ -830,14 +1103,14 @@ var componentsMap = {
 var map_default = componentsMap;
 
 // src/components/FilePane.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return import_react12.default.isValidElement(children) ? import_react12.default.cloneElement(children, {
+  return import_react14.default.isValidElement(children) ? import_react14.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -846,14 +1119,14 @@ function FilePane({
 FilePane.mdxType = "FilePane";
 
 // src/components/ItemsColumn.tsx
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_spectacle6 = require("spectacle");
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_react_spring = require("react-spring");
 function ItemsColumn(divProps) {
   const { style, children, ...props } = divProps;
-  const childrenArray = import_react13.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react13.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react13.default.createElement(
+  const childrenArray = import_react15.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react15.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react15.default.createElement(
     "div",
     {
       style: {
@@ -867,14 +1140,14 @@ function ItemsColumn(divProps) {
     },
     childrenArray.map((child, index) => {
       const isVisible = index <= step;
-      if (!import_react13.default.isValidElement(child)) {
+      if (!import_react15.default.isValidElement(child)) {
         return child;
       }
-      return /* @__PURE__ */ import_react13.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
+      return /* @__PURE__ */ import_react15.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
     })
   ));
 }
-var ItemColumnWrapperStyled = (0, import_styled_components8.default)(import_react_spring.animated.div)`
+var ItemColumnWrapperStyled = (0, import_styled_components10.default)(import_react_spring.animated.div)`
   * {
     text-align: center !important;
   }
@@ -885,15 +1158,15 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = (0, import_react_spring.useSpring)({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ import_react13.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
+  return /* @__PURE__ */ import_react15.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
 }
 
 // src/components/HorizontalList.tsx
-var import_react14 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_react_spring2 = require("react-spring");
 var import_spectacle7 = require("spectacle");
-var import_styled_components9 = __toESM(require("styled-components"));
-var Container = import_styled_components9.default.div`
+var import_styled_components11 = __toESM(require("styled-components"));
+var Container = import_styled_components11.default.div`
   display: grid;
   grid-gap: 2rem;
 `;
@@ -901,8 +1174,8 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react14.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react14.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react14.default.createElement(
+  const items = import_react16.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react16.default.createElement(
     Container,
     {
       style: {
@@ -910,10 +1183,10 @@ function HorizontalList({
       }
     },
     items.map((item, k) => {
-      if (!import_react14.default.isValidElement(item)) {
+      if (!import_react16.default.isValidElement(item)) {
         return item;
       }
-      return import_react14.default.cloneElement(item, {
+      return import_react16.default.cloneElement(item, {
         // @ts-expect-error cloning
         position: k + 1,
         isVisible: k <= step,
@@ -923,12 +1196,12 @@ function HorizontalList({
   ));
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
     },
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "svg",
       {
         width: "48",
@@ -937,14 +1210,14 @@ function Pill({ position }) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react16.default.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__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react16.default.createElement(
         "text",
         {
           x: "9",
@@ -956,7 +1229,7 @@ function Pill({ position }) {
         },
         position
       ),
-      /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react16.default.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",
@@ -966,12 +1239,12 @@ function Pill({ position }) {
     )
   );
 }
-var Item = (0, import_styled_components9.default)(import_react_spring2.animated.div)`
+var Item = (0, import_styled_components11.default)(import_react_spring2.animated.div)`
   display: flex;
   flex-direction: column;
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 `;
-var ItemHead = import_styled_components9.default.div`
+var ItemHead = import_styled_components11.default.div`
   display: flex;
   flex-direction: row;
   font-size: 1.3rem;
@@ -981,7 +1254,7 @@ var ItemHead = import_styled_components9.default.div`
     margin: 0;
   }
 `;
-var ItemContent = import_styled_components9.default.div`
+var ItemContent = import_styled_components11.default.div`
   > * {
     font-size: 1rem;
     padding: 4px !important;
@@ -1009,32 +1282,90 @@ function HorizontalListItem({
   const opacityStyles = (0, import_react_spring2.useSpring)({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ import_react14.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react14.default.createElement(ItemHead, null, /* @__PURE__ */ import_react14.default.createElement(Pill, { position }), /* @__PURE__ */ import_react14.default.createElement("p", null, title)), /* @__PURE__ */ import_react14.default.createElement(ItemContent, null, children));
+  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));
 }
 
 // src/components/Timeline.tsx
-var import_react15 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_react_spring3 = require("react-spring");
-var import_classnames = __toESM(require("classnames"));
 var import_spectacle8 = require("spectacle");
 
-// src/components/Timeline.module.scss
-var Timeline_module_default = {};
+// src/components/Timeline.styled.tsx
+var import_styled_components12 = __toESM(require("styled-components"));
+var TimelineStyled = import_styled_components12.default.div`
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  align-items: center;
+`;
+var TimelineItemContent = import_styled_components12.default.div`
+  display: flex;
+  padding: 0.7rem 0 1rem 12px;
+`;
+var TimelineItemContentPhantom = (0, import_styled_components12.default)(TimelineItemContent)`
+  opacity: 0;
+`;
+var TimelineItemBody = import_styled_components12.default.div`
+  &,
+  & > * {
+    font-size: 1.3rem !important;
+    color: #ffffff !important;
+  }
+`;
+var TimelineItemTitle = import_styled_components12.default.div`
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffffbb;
+`;
 
 // src/components/Timeline.tsx
+var import_styled_components13 = __toESM(require("styled-components"));
+var TimelineItemStyled = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
+  flex: 1;
+  display: inline-flex;
+
+  ${({ isOdd }) => isOdd && import_styled_components13.css`
+      flex-direction: column;
+    `}
+
+  ${({ isEven }) => isEven && import_styled_components13.css`
+      flex-direction: column-reverse;
+    `}
+`;
+var TimelineItemGuide = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
+  width: 100%;
+  padding-top: 2px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+
+  svg {
+    height: 28px;
+    width: 28px;
+    path {
+      fill: #ffffff;
+    }
+    margin-right: 4px;
+  }
+`;
+var TimelineItemGuideLine = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
+  border-top: 4px solid #ffffff;
+  margin-right: 4px;
+`;
 function Timeline(props) {
-  const children = import_react15.default.Children.toArray(props.children);
-  return /* @__PURE__ */ import_react15.default.createElement(import_spectacle8.Stepper, { ...props, values: children, className: Timeline_module_default["timeline"] }, (value, step) => {
-    return children.map((child, index) => {
-      if (!import_react15.default.isValidElement(child)) {
+  const children = import_react17.default.Children.toArray(props.children);
+  return /* @__PURE__ */ import_react17.default.createElement(import_spectacle8.Stepper, { ...props, values: children }, (value, step) => {
+    return /* @__PURE__ */ import_react17.default.createElement(TimelineStyled, null, children.map((child, index) => {
+      if (!import_react17.default.isValidElement(child)) {
         return child;
       }
-      return import_react15.default.cloneElement(child, {
+      return import_react17.default.cloneElement(child, {
         // @ts-expect-error cloning
         isPhantom: step < index,
         isLast: step === index
       });
-    });
+    }));
   });
 }
 function getItemOpacity2({
@@ -1056,38 +1387,21 @@ function TimelineItem(props) {
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
   const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ import_react15.default.createElement(
-    import_react_spring3.animated.div,
+  return /* @__PURE__ */ import_react17.default.createElement(
+    TimelineItemStyled,
     {
       ...rest,
-      className: Timeline_module_default["timelineItem"],
       style: {
         ...appearStyles
       }
     },
-    /* @__PURE__ */ import_react15.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          Timeline_module_default["timelineItemContent"],
-          Timeline_module_default["timelineItemContentPhantom"]
-        )
-      },
-      /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title),
-      /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children)
-    ),
-    /* @__PURE__ */ import_react15.default.createElement(import_react_spring3.animated.div, { className: Timeline_module_default["timelineItemGuide"], style: colorStyles }, /* @__PURE__ */ import_react15.default.createElement(Hexagon, null), /* @__PURE__ */ import_react15.default.createElement(
-      import_react_spring3.animated.div,
-      {
-        className: Timeline_module_default["timelineItemGuideLine"],
-        style: guideLineProps
-      }
-    )),
-    /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemContent"] }, /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title), /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children))
+    /* @__PURE__ */ import_react17.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children)),
+    /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react17.default.createElement(Hexagon, null), /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
+    /* @__PURE__ */ import_react17.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children))
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     "svg",
     {
       width: "18",
@@ -1096,14 +1410,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react17.default.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__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react17.default.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",
@@ -1114,9 +1428,9 @@ function Hexagon() {
 }
 
 // src/components/IconBox.tsx
-var import_react16 = __toESM(require("react"));
-var import_styled_components10 = __toESM(require("styled-components"));
-var IconBoxContent = import_styled_components10.default.div`
+var import_react18 = __toESM(require("react"));
+var import_styled_components14 = __toESM(require("styled-components"));
+var IconBoxContent = import_styled_components14.default.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;
@@ -1126,7 +1440,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     "div",
     {
       style: {
@@ -1136,14 +1450,14 @@ function IconBox({
         padding: "1rem 0"
       }
     },
-    /* @__PURE__ */ import_react16.default.createElement("div", { style: { fontSize: 60 } }, icon),
-    /* @__PURE__ */ import_react16.default.createElement(IconBoxContent, null, children)
+    /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: 60 } }, icon),
+    /* @__PURE__ */ import_react18.default.createElement(IconBoxContent, null, children)
   );
 }
 
 // src/index.tsx
 function PassThrough({ children }) {
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children);
 }
 function Layout({
   children,
@@ -1155,37 +1469,37 @@ function Layout({
     console.warn(`Layout ${layout} not found`);
   }
   if (Layout2) {
-    return /* @__PURE__ */ import_react17.default.createElement(Layout2, { ...frontmatter }, children);
+    return /* @__PURE__ */ import_react19.default.createElement(Layout2, { ...frontmatter }, children);
   }
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children);
 }
 var componentsMap2 = {
   ...map_default,
   wrapper: Layout
 };
 function Deck({ deck }) {
-  import_react17.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.StrictMode, null, /* @__PURE__ */ import_react17.default.createElement(import_react18.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react17.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
+  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) => {
     const Component = slide.slideComponent;
-    return /* @__PURE__ */ import_react17.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react17.default.createElement(Component, null));
+    return /* @__PURE__ */ import_react19.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react19.default.createElement(Component, null));
   }))));
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "red" } }, children);
+  return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "red" } }, children);
 }
 function Doc({ children }) {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "blue" } }, children);
+  return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "blue" } }, children);
 }
 function Information({ children }) {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "orange" } }, children);
+  return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "orange" } }, children);
 }
 function Success({ children }) {
-  return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "green" } }, children);
+  return /* @__PURE__ */ import_react19.default.createElement("div", { style: { color: "green" } }, children);
 }
 function Side({ children }) {
-  return /* @__PURE__ */ import_react17.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react19.default.createElement("div", null, children);
 }
 Side.mdxType = "Side";