@gpichot/spectacle-deck 1.1.3 → 1.1.5

package/index.cjs

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -49,8 +50,8 @@ __export(src_exports, {
   TimelineItem: () => TimelineItem,
   Warning: () => Warning
 });
-var import_react22 = __toESM(require("react"));
-var import_react23 = require("@mdx-js/react");
+var import_react21 = __toESM(require("react"));
+var import_react22 = require("@mdx-js/react");
 var import_spectacle9 = require("spectacle");
 
 // src/layouts/CenteredLayout.tsx
@@ -66,6 +67,7 @@ var Margins = {
 };
 function getHeading(children) {
   const allChild = import_react.default.Children.toArray(children);
+  console.log(allChild);
   if (allChild.length === 0)
     return [null, allChild];
   const [candidate, ...rest] = allChild;
@@ -98,6 +100,8 @@ function getMatchingMdxType(children, mdxType) {
       return false;
     if (typeof child.type !== "function")
       return false;
+    if (child.type.name === mdxType)
+      return true;
     if ("mdxType" in child.type === false)
       return false;
     return child.type.mdxType === mdxType;
@@ -124,6 +128,7 @@ var CenteredLayoutContent = import_styled_components.default.div`
   }
 `;
 var CenteredLayout = (props) => {
+  console.log(props);
   const [heading, rest] = getHeading(props.children);
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
@@ -403,70 +408,24 @@ var MainSectionLayout = ({
 };
 
 // src/layouts/QuoteLayout.tsx
-var import_react6 = __toESM(require("react"));
-var import_styled_components4 = __toESM(require("styled-components"));
-
-// src/layouts/BaseLayout.tsx
 var import_react5 = __toESM(require("react"));
 var import_styled_components3 = __toESM(require("styled-components"));
-var DefaultLayoutHeading = import_styled_components3.default.div`
-  background-color: #ffffff11;
-  padding: 2rem 5rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    margin: 0;
-  }
-`;
-var BaseLayout = ({
-  children,
-  title,
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ import_react5.default.createElement(
-    "div",
-    {
-      ...otherProps,
-      style: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        display: "flex",
-        flexDirection: "column",
-        marginBottom: "5rem"
-      }
-    },
-    title && /* @__PURE__ */ import_react5.default.createElement(DefaultLayoutHeading, null, title),
-    /* @__PURE__ */ import_react5.default.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          height: "100%",
-          padding: "0 4rem",
-          flex: 1
-        }
-      },
-      children
-    )
-  );
-};
-
-// src/layouts/QuoteLayout.tsx
 function invariant(condition, message) {
   if (!condition) {
     throw new Error(message);
   }
 }
-var QuoteBaseLayout = (0, import_styled_components4.default)(BaseLayout)`
+var QuoteBaseLayout = import_styled_components3.default.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
   .blockquote > * {
     border-left: 0;
   }
   .blockquote {
+  text-align: justify;
     position: relative;
   }
   .blockquote > :first-child {
@@ -474,9 +433,10 @@ var QuoteBaseLayout = (0, import_styled_components4.default)(BaseLayout)`
       content: "“";
       position: absolute;
       font-size: 16rem;
-      left: -9rem;
+      left: -5rem;
       font-family: serif;
-      top: 2rem;
+      top: 50%;
+      transform: translateY(-50%);
       color: #ffffff22;
     }
     &:after {
@@ -510,11 +470,11 @@ var QuoteBaseLayout = (0, import_styled_components4.default)(BaseLayout)`
 function QuoteLayout({
   children,
   author,
-  url
+  sourceUrl
 }) {
   const [blockquote, rest] = getMatchingMdxType(children, "blockquote");
   invariant(rest, "QuoteLayout can only have one blockquote");
-  return /* @__PURE__ */ import_react6.default.createElement(QuoteBaseLayout, null, /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(QuoteBaseLayout, null, /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -523,28 +483,28 @@ function QuoteLayout({
         alignItems: "flex-start",
         justifyContent: "center",
         textAlign: "center",
-        margin: "0 10%"
+        margin: "0 4rem 0 12rem"
       }
     },
-    /* @__PURE__ */ import_react6.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         style: {
           flex: 1,
-          padding: "0 8rem 0 0",
+          padding: "0 12rem 0 2rem",
           boxSizing: "border-box"
         },
         className: "blockquote"
       },
       blockquote
     ),
-    /* @__PURE__ */ import_react6.default.createElement("div", { className: "source", style: { flex: 1, padding: "0 2rem" } }, /* @__PURE__ */ import_react6.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer" }, author))
+    /* @__PURE__ */ import_react5.default.createElement("div", { className: "source", style: { flex: 1, padding: "0 4rem" } }, /* @__PURE__ */ import_react5.default.createElement("a", { href: sourceUrl, target: "_blank", rel: "noopener noreferrer" }, author))
   ));
 }
 
 // src/layouts/SectionLayout.tsx
-var import_styled_components5 = __toESM(require("styled-components"));
-var SectionLayout = import_styled_components5.default.div`
+var import_styled_components4 = __toESM(require("styled-components"));
+var SectionLayout = import_styled_components4.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -558,12 +518,12 @@ var SectionLayout = import_styled_components5.default.div`
 `;
 
 // src/layouts/SideCodeLayout.tsx
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/layouts/columns.tsx
-var import_react7 = __toESM(require("react"));
-var import_styled_components6 = __toESM(require("styled-components"));
-var DivWithHeading = import_styled_components6.default.div`
+var import_react6 = __toESM(require("react"));
+var import_styled_components5 = __toESM(require("styled-components"));
+var DivWithHeading = import_styled_components5.default.div`
   h2 {
     margin-top: 0;
   }
@@ -572,7 +532,7 @@ var DivWithHeading = import_styled_components6.default.div`
     font-weight: 400;
   }
 `;
-var ColumnsContainer = (0, import_styled_components6.default)(DivWithHeading)`
+var ColumnsContainer = (0, import_styled_components5.default)(DivWithHeading)`
   display: flex;
   flex-direction: row;
   position: absolute;
@@ -586,15 +546,15 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = import_react7.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react7.default.createElement(
+  const childrenArray = import_react6.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react6.default.createElement(
     ColumnsContainer,
     {
       style: {
         flexDirection: reverse ? "row-reverse" : "row"
       }
     },
-    childrenArray.map((child, i) => /* @__PURE__ */ import_react7.default.createElement(
+    childrenArray.map((child, i) => /* @__PURE__ */ import_react6.default.createElement(
       "div",
       {
         key: i,
@@ -613,8 +573,8 @@ function ColumnsLayout({
 }
 
 // src/layouts/SideCodeLayout.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
-var CodeSide = import_styled_components7.default.div`
+var import_styled_components6 = __toESM(require("styled-components"));
+var CodeSide = import_styled_components6.default.div`
   pre {
     font-size: 0.9rem;
   }
@@ -624,7 +584,7 @@ function SidedCodeLayout({
   position = "right"
 }) {
   const [code, rest] = getCodeChildren(children);
-  return /* @__PURE__ */ import_react8.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
       style: {
@@ -633,7 +593,7 @@ function SidedCodeLayout({
       }
     },
     rest
-  ), /* @__PURE__ */ import_react8.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     CodeSide,
     {
       style: {
@@ -649,15 +609,15 @@ function SidedCodeLayout({
 }
 
 // src/layouts/SideImageLayout.tsx
-var import_react10 = __toESM(require("react"));
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_react9 = __toESM(require("react"));
+var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/components/Image.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/layouts/styled.ts
-var import_styled_components8 = __toESM(require("styled-components"));
-var SVGObject = import_styled_components8.default.object`
+var import_styled_components7 = __toESM(require("styled-components"));
+var SVGObject = import_styled_components7.default.object`
   padding: 3rem 2rem;
   box-sizing: border-box;
   background-color: white;
@@ -665,22 +625,30 @@ var SVGObject = import_styled_components8.default.object`
 
 // src/components/Image.tsx
 function Image(props) {
-  const { src, height } = props;
+  const {
+    src,
+    height,
+    width,
+    style: style2,
+    ...otherProps
+  } = props;
   if (!(src == null ? void 0 : src.endsWith(".svg"))) {
-    return /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(
       "img",
       {
         src,
-        alt: "image",
+        ...otherProps,
         style: {
+          width,
           height: height || "100%",
           objectFit: "cover",
-          objectPosition: "center"
+          objectPosition: "center",
+          ...style2
         }
       }
     );
   }
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     SVGObject,
     {
       type: "image/svg+xml",
@@ -688,7 +656,8 @@ function Image(props) {
       style: {
         height: height || "100%",
         minWidth: "30vw",
-        width: "100%"
+        width: width || "100%",
+        ...style2
       }
     }
   );
@@ -696,7 +665,7 @@ function Image(props) {
 Image.mdxType = "Image";
 
 // src/layouts/SideImageLayout.tsx
-var DivWithHeading2 = import_styled_components9.default.div`
+var DivWithHeading2 = import_styled_components8.default.div`
   h2 {
     margin-top: 0;
   }
@@ -717,7 +686,7 @@ var SidedImageLayout = ({
     console.error("No image provided for SidedImageLayout");
     return null;
   }
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     DivWithHeading2,
     {
       style: {
@@ -730,7 +699,7 @@ var SidedImageLayout = ({
         top: 0
       }
     },
-    /* @__PURE__ */ import_react10.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
         style: {
@@ -743,7 +712,7 @@ var SidedImageLayout = ({
       },
       rest
     ),
-    /* @__PURE__ */ import_react10.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
         style: {
@@ -755,19 +724,19 @@ var SidedImageLayout = ({
           backgroundColor: "white"
         }
       },
-      component || /* @__PURE__ */ import_react10.default.createElement(Image, { src: image })
+      component || /* @__PURE__ */ import_react9.default.createElement(Image, { src: image })
     )
   );
 };
 
 // src/layouts/SideLayout.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 function SideLayout({
   children,
   position = "right"
 }) {
   const [side, rest] = getMatchingMdxType(children, "Side");
-  return /* @__PURE__ */ import_react11.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       style: {
@@ -822,11 +791,11 @@ var theme_default = {
 };
 
 // src/template.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_spectacle2 = require("spectacle");
 var template = ({ slideNumber, numberOfSlides }) => {
   const percentage = slideNumber / numberOfSlides * 100;
-  return /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ import_react12.default.createElement(import_spectacle2.Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ import_react12.default.createElement(import_spectacle2.FullScreen, null)), /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ import_react11.default.createElement(import_spectacle2.Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ import_react11.default.createElement(import_spectacle2.FullScreen, null)), /* @__PURE__ */ import_react11.default.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
       style: {
@@ -840,26 +809,26 @@ var template = ({ slideNumber, numberOfSlides }) => {
 };
 
 // src/components/map.tsx
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_spectacle5 = require("spectacle");
 
 // src/components/styled.tsx
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_spectacle3 = require("spectacle");
-var import_styled_components10 = __toESM(require("styled-components"));
-var StyledImage = (0, import_styled_components10.default)(import_spectacle3.Image)`
+var import_styled_components9 = __toESM(require("styled-components"));
+var StyledImage = (0, import_styled_components9.default)(import_spectacle3.Image)`
   object-fit: contain;
   max-height: 30vh;
   max-width: 70vw;
 `;
-var Image2 = (props) => /* @__PURE__ */ import_react13.default.createElement(import_spectacle3.FlexBox, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ import_react13.default.createElement(StyledImage, { ...props }));
-var CustomHeading = (0, import_styled_components10.default)(import_spectacle3.Heading)`
+var Image2 = (props) => /* @__PURE__ */ import_react12.default.createElement(import_spectacle3.FlexBox, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ import_react12.default.createElement(StyledImage, { ...props }));
+var CustomHeading = (0, import_styled_components9.default)(import_spectacle3.Heading)`
   strong {
     color: #f49676;
     font-weight: 500;
   }
 `;
-var CustomQuote = import_styled_components10.default.blockquote`
+var CustomQuote = import_styled_components9.default.blockquote`
   margin: 1rem 0;
   padding-left: 1.5rem;
   padding-top: 0;
@@ -870,7 +839,7 @@ var CustomQuote = import_styled_components10.default.blockquote`
     padding: 0 !important;
   }
 `;
-var InlineCode = import_styled_components10.default.code`
+var InlineCode = import_styled_components9.default.code`
   filter: brightness(1.05);
   zoom: 1.1;
   &:before,
@@ -879,12 +848,12 @@ var InlineCode = import_styled_components10.default.code`
     font-size: 0.8em;
   }
 `;
-var HeadingTwo = import_styled_components10.default.h2`
+var HeadingTwo = import_styled_components9.default.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
 `;
-var HeadingThree = import_styled_components10.default.h3`
+var HeadingThree = import_styled_components9.default.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 40px;
   font-weight: 400;
@@ -897,12 +866,12 @@ var HeadingThree = import_styled_components10.default.h3`
 `;
 
 // src/components/CodeStepper/CodeStepper.tsx
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_is = __toESM(require("react-is"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
 var import_spectacle4 = require("spectacle");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/components/CodeStepper/code-directives.ts
 function range(start, end) {
@@ -967,7 +936,7 @@ function parseStepDirectives(directives) {
 // src/components/CodeStepper/CodeStepper.tsx
 var import_meta = {};
 var Highlighter = import_react_syntax_highlighter.Prism;
-var CodeContainer = import_styled_components11.default.div`
+var CodeContainer = import_styled_components10.default.div`
   pre {
     padding: 1rem 0rem !important;
     background-color: transparent !important;
@@ -988,7 +957,7 @@ var CodeContainer = import_styled_components11.default.div`
   }
 `;
 function useCodeSteps(code) {
-  return import_react14.default.useMemo(() => {
+  return import_react13.default.useMemo(() => {
     const prefixes = code.match(/(?:\/\/|<!--) @.*\n/g) || [];
     const prefixesLength = prefixes.reduce(
       (acc, prefix) => acc + prefix.length,
@@ -1008,8 +977,8 @@ function useCodeSteps(code) {
   }, [code]);
 }
 function getCodeDetails(children) {
-  const child = import_react14.default.Children.toArray(children)[0];
-  if (!import_react14.default.isValidElement(child)) {
+  const child = import_react13.default.Children.toArray(children)[0];
+  if (!import_react13.default.isValidElement(child)) {
     return {
       language: "",
       code: import_react_is.default.isFragment(child) ? "" : String(child || "")
@@ -1027,7 +996,7 @@ function CodeWrapper({
   hasName,
   children
 }) {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     "div",
     {
       style: {
@@ -1037,7 +1006,7 @@ function CodeWrapper({
         borderRadius: "4px"
       }
     },
-    name && /* @__PURE__ */ import_react14.default.createElement(
+    name && /* @__PURE__ */ import_react13.default.createElement(
       "span",
       {
         style: {
@@ -1054,7 +1023,7 @@ function CodeWrapper({
       name
     ),
     children,
-    hasName && /* @__PURE__ */ import_react14.default.createElement(
+    hasName && /* @__PURE__ */ import_react13.default.createElement(
       "span",
       {
         style: {
@@ -1069,7 +1038,7 @@ function CodeWrapper({
           fontStyle: "italic"
         }
       },
-      stepName || /* @__PURE__ */ import_react14.default.createElement("span", { style: { visibility: "hidden" } }, "Step")
+      stepName || /* @__PURE__ */ import_react13.default.createElement("span", { style: { visibility: "hidden" } }, "Step")
     )
   );
 }
@@ -1078,7 +1047,7 @@ function CodeStepper({
   name,
   ...props
 }) {
-  const { language, code } = import_react14.default.useMemo(() => {
+  const { language, code } = import_react13.default.useMemo(() => {
     return getCodeDetails(props.children);
   }, [props.children]);
   const {
@@ -1088,21 +1057,21 @@ function CodeStepper({
     hasSteps,
     hasName
   } = useCodeSteps(code);
-  return /* @__PURE__ */ import_react14.default.createElement(CodeContainer, null, import_meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ import_react14.default.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ import_react14.default.createElement(Highlighter, { language, style: import_prism.gruvboxDark }, prefixes.join(""))), /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(CodeContainer, null, import_meta.env.DEV && false, /* @__PURE__ */ import_react13.default.createElement(
     import_spectacle4.Stepper,
     {
       values: steps,
       alwaysVisible: !hasSteps,
       priority: priority ? priority + 1 : void 0
     },
-    (step, _, isActive) => /* @__PURE__ */ import_react14.default.createElement(
+    (step, _, isActive) => /* @__PURE__ */ import_react13.default.createElement(
       CodeWrapper,
       {
         name,
         stepName: step == null ? void 0 : step.name,
         hasName
       },
-      /* @__PURE__ */ import_react14.default.createElement(
+      /* @__PURE__ */ import_react13.default.createElement(
         Highlighter,
         {
           language,
@@ -1152,7 +1121,7 @@ CodeStepper.mdxType = "CodeStepper";
 // src/components/map.tsx
 var componentsMap = {
   ...import_spectacle5.mdxComponentMap,
-  inlineCode: (props) => /* @__PURE__ */ import_react15.default.createElement(
+  inlineCode: (props) => /* @__PURE__ */ import_react14.default.createElement(
     InlineCode,
     {
       ...props,
@@ -1162,7 +1131,7 @@ var componentsMap = {
       }
     }
   ),
-  table: (props) => /* @__PURE__ */ import_react15.default.createElement(
+  table: (props) => /* @__PURE__ */ import_react14.default.createElement(
     "table",
     {
       ...props,
@@ -1173,7 +1142,7 @@ var componentsMap = {
       }
     }
   ),
-  tr: (props) => /* @__PURE__ */ import_react15.default.createElement(
+  tr: (props) => /* @__PURE__ */ import_react14.default.createElement(
     "tr",
     {
       ...props,
@@ -1185,7 +1154,7 @@ var componentsMap = {
       }
     }
   ),
-  td: (props) => /* @__PURE__ */ import_react15.default.createElement(
+  td: (props) => /* @__PURE__ */ import_react14.default.createElement(
     "td",
     {
       ...props,
@@ -1198,7 +1167,7 @@ var componentsMap = {
       }
     }
   ),
-  h1: (props) => /* @__PURE__ */ import_react15.default.createElement(
+  h1: (props) => /* @__PURE__ */ import_react14.default.createElement(
     CustomHeading,
     {
       fontSize: "h1",
@@ -1214,15 +1183,15 @@ var componentsMap = {
     },
     props.children
   ),
-  h2: (props) => /* @__PURE__ */ import_react15.default.createElement(HeadingTwo, null, props.children),
-  h3: (props) => /* @__PURE__ */ import_react15.default.createElement(HeadingThree, { ...props }),
-  img: (props) => /* @__PURE__ */ import_react15.default.createElement(Image2, { ...props }),
+  h2: (props) => /* @__PURE__ */ import_react14.default.createElement(HeadingTwo, null, props.children),
+  h3: (props) => /* @__PURE__ */ import_react14.default.createElement(HeadingThree, { ...props }),
+  img: (props) => /* @__PURE__ */ import_react14.default.createElement(Image2, { ...props }),
   pre: CodeStepper,
-  li: (props) => /* @__PURE__ */ import_react15.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
-  Side: (props) => /* @__PURE__ */ import_react15.default.createElement("div", { ...props }),
+  li: (props) => /* @__PURE__ */ import_react14.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
+  Side: (props) => /* @__PURE__ */ import_react14.default.createElement("div", { ...props }),
   p: (props) => {
     const Text = import_spectacle5.mdxComponentMap.p;
-    return /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react14.default.createElement(
       Text,
       {
         style: { margin: "8px 0", padding: "8px 0", lineHeight: "2rem" },
@@ -1230,10 +1199,10 @@ var componentsMap = {
       }
     );
   },
-  blockquote: (props) => /* @__PURE__ */ import_react15.default.createElement(CustomQuote, { ...props }),
+  blockquote: (props) => /* @__PURE__ */ import_react14.default.createElement(CustomQuote, { ...props }),
   a: ({ children, ...props }) => {
     const domain = new URL(props.href || "").hostname;
-    return /* @__PURE__ */ import_react15.default.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react14.default.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ import_react14.default.createElement(
       "small",
       {
         style: {
@@ -1248,15 +1217,18 @@ var componentsMap = {
 };
 var map_default = componentsMap;
 
+// src/index.tsx
+__reExport(src_exports, require("spectacle"));
+
 // src/components/FilePane.tsx
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return import_react16.default.isValidElement(children) ? import_react16.default.cloneElement(children, {
+  return import_react15.default.isValidElement(children) ? import_react15.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -1265,35 +1237,39 @@ function FilePane({
 FilePane.mdxType = "FilePane";
 
 // src/components/ItemsColumn.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_spectacle6 = require("spectacle");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_react_spring = require("react-spring");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react17.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react17.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react17.default.createElement(
+  const childrenArray = import_react16.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react16.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react16.default.createElement(
     "div",
     {
       style: {
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        justifyItems: "center",
+        alignItems: "stretch",
         height: "100%",
+        rowGap: "2rem",
         ...style2
       },
       ...props
     },
     childrenArray.map((child, index) => {
       const isVisible = index <= step;
-      if (!import_react17.default.isValidElement(child)) {
+      if (!import_react16.default.isValidElement(child)) {
         return child;
       }
-      return /* @__PURE__ */ import_react17.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
+      return /* @__PURE__ */ import_react16.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
     })
   ));
 }
-var ItemColumnWrapperStyled = (0, import_styled_components12.default)(import_react_spring.animated.div)`
+var ItemColumnWrapperStyled = (0, import_styled_components11.default)(import_react_spring.animated.div)`
+  display: flex;
+  justify-content: center;
   * {
     text-align: center !important;
   }
@@ -1304,13 +1280,13 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = (0, import_react_spring.useSpring)({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ import_react17.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
+  return /* @__PURE__ */ import_react16.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
 }
 
 // src/components/DocumentationItem.tsx
-var import_react18 = __toESM(require("react"));
-var import_styled_components13 = __toESM(require("styled-components"));
-var DocWrapper = import_styled_components13.default.div`
+var import_react17 = __toESM(require("react"));
+var import_styled_components12 = __toESM(require("styled-components"));
+var DocWrapper = import_styled_components12.default.div`
   position: absolute;
   bottom: 0;
   right: 0;
@@ -1324,20 +1300,20 @@ var DocWrapper = import_styled_components13.default.div`
     display: flex;
   }
 `;
-var DocContainer = import_styled_components13.default.div`
+var DocContainer = import_styled_components12.default.div`
   margin: 2rem 1rem;
   background-color: #333;
   border: 1px solid #333;
   padding: 0.5rem 1rem;
   border-radius: 1.5rem;
 `;
-var DocLink = import_styled_components13.default.a`
+var DocLink = import_styled_components12.default.a`
   text-decoration: none;
   font-weight: normal;
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #f49676;
 `;
-var DocLinkItem = (0, import_styled_components13.default)(DocLink)`
+var DocLinkItem = (0, import_styled_components12.default)(DocLink)`
   width: fit-content;
   display: inline-block;
   background-color: #333;
@@ -1346,7 +1322,7 @@ var DocLinkItem = (0, import_styled_components13.default)(DocLink)`
   border-radius: 1.5rem;
   margin: 0.25rem 0;
 `;
-var DocContent = import_styled_components13.default.div`
+var DocContent = import_styled_components12.default.div`
   display: flex;
   flex-flow: column-reverse nowrap;
   position: absolute;
@@ -1361,18 +1337,18 @@ function Doc({
   link,
   children
 }) {
-  return /* @__PURE__ */ import_react18.default.createElement(DocWrapper, null, /* @__PURE__ */ import_react18.default.createElement(DocContainer, null, children && /* @__PURE__ */ import_react18.default.createElement(DocContent, null, children), /* @__PURE__ */ import_react18.default.createElement("div", null, /* @__PURE__ */ import_react18.default.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
+  return /* @__PURE__ */ import_react17.default.createElement(DocWrapper, null, /* @__PURE__ */ import_react17.default.createElement(DocContainer, null, children && /* @__PURE__ */ import_react17.default.createElement(DocContent, null, children), /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
 }
 function DocItem({ label, link }) {
-  return /* @__PURE__ */ import_react18.default.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
+  return /* @__PURE__ */ import_react17.default.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
 }
 
 // src/components/HorizontalList.tsx
-var import_react19 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_react_spring2 = require("react-spring");
 var import_spectacle7 = require("spectacle");
-var import_styled_components14 = __toESM(require("styled-components"));
-var Container = import_styled_components14.default.div`
+var import_styled_components13 = __toESM(require("styled-components"));
+var Container = import_styled_components13.default.div`
   display: grid;
   grid-gap: 2rem;
 `;
@@ -1380,8 +1356,8 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react19.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react19.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react19.default.createElement(
+  const items = import_react18.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react18.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react18.default.createElement(
     Container,
     {
       style: {
@@ -1389,10 +1365,10 @@ function HorizontalList({
       }
     },
     items.map((item, k) => {
-      if (!import_react19.default.isValidElement(item)) {
+      if (!import_react18.default.isValidElement(item)) {
         return item;
       }
-      return import_react19.default.cloneElement(item, {
+      return import_react18.default.cloneElement(item, {
         // @ts-expect-error cloning
         position: k + 1,
         isVisible: k <= step,
@@ -1402,12 +1378,12 @@ function HorizontalList({
   ));
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
     },
-    /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react18.default.createElement(
       "svg",
       {
         width: "48",
@@ -1416,14 +1392,14 @@ function Pill({ position }) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react19.default.createElement(
+      /* @__PURE__ */ import_react18.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_react19.default.createElement(
+      /* @__PURE__ */ import_react18.default.createElement(
         "text",
         {
           x: "9",
@@ -1435,7 +1411,7 @@ function Pill({ position }) {
         },
         position
       ),
-      /* @__PURE__ */ import_react19.default.createElement(
+      /* @__PURE__ */ import_react18.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",
@@ -1445,12 +1421,12 @@ function Pill({ position }) {
     )
   );
 }
-var Item = (0, import_styled_components14.default)(import_react_spring2.animated.div)`
+var Item = (0, import_styled_components13.default)(import_react_spring2.animated.div)`
   display: flex;
   flex-direction: column;
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 `;
-var ItemHead = import_styled_components14.default.div`
+var ItemHead = import_styled_components13.default.div`
   display: flex;
   flex-direction: row;
   font-size: 1.3rem;
@@ -1460,7 +1436,7 @@ var ItemHead = import_styled_components14.default.div`
     margin: 0;
   }
 `;
-var ItemContent = import_styled_components14.default.div`
+var ItemContent = import_styled_components13.default.div`
   > * {
     font-size: 1rem;
     padding: 4px !important;
@@ -1488,31 +1464,31 @@ function HorizontalListItem({
   const opacityStyles = (0, import_react_spring2.useSpring)({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ import_react19.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react19.default.createElement(ItemHead, null, /* @__PURE__ */ import_react19.default.createElement(Pill, { position }), /* @__PURE__ */ import_react19.default.createElement("p", null, title)), /* @__PURE__ */ import_react19.default.createElement(ItemContent, null, children));
+  return /* @__PURE__ */ import_react18.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react18.default.createElement(ItemHead, null, /* @__PURE__ */ import_react18.default.createElement(Pill, { position }), /* @__PURE__ */ import_react18.default.createElement("p", null, title)), /* @__PURE__ */ import_react18.default.createElement(ItemContent, null, children));
 }
 
 // src/components/Timeline.tsx
-var import_react20 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_react_spring3 = require("react-spring");
 var import_spectacle8 = require("spectacle");
 
 // src/components/Timeline.styled.tsx
-var import_styled_components15 = __toESM(require("styled-components"));
-var TimelineItemContent = import_styled_components15.default.div`
+var import_styled_components14 = __toESM(require("styled-components"));
+var TimelineItemContent = import_styled_components14.default.div`
   display: flex;
   padding: 0.7rem 0 1rem 12px;
 `;
-var TimelineItemContentPhantom = (0, import_styled_components15.default)(TimelineItemContent)`
+var TimelineItemContentPhantom = (0, import_styled_components14.default)(TimelineItemContent)`
   opacity: 0;
 `;
-var TimelineItemBody = import_styled_components15.default.div`
+var TimelineItemBody = import_styled_components14.default.div`
   &,
   & > * {
     font-size: 1.3rem !important;
     color: #ffffff !important;
   }
 `;
-var TimelineItemTitle = import_styled_components15.default.div`
+var TimelineItemTitle = import_styled_components14.default.div`
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-weight: bold;
@@ -1520,8 +1496,8 @@ var TimelineItemTitle = import_styled_components15.default.div`
 `;
 
 // src/components/Timeline.tsx
-var import_styled_components16 = __toESM(require("styled-components"));
-var TimelineItemStyled = (0, import_styled_components16.default)(import_react_spring3.animated.div)`
+var import_styled_components15 = __toESM(require("styled-components"));
+var TimelineItemStyled = (0, import_styled_components15.default)(import_react_spring3.animated.div)`
   flex: 1;
   flex-flow: column nowrap;
   display: inline-flex;
@@ -1539,7 +1515,7 @@ var TimelineItemStyled = (0, import_styled_components16.default)(import_react_sp
     }
   }
 `;
-var TimelineItemGuide = (0, import_styled_components16.default)(import_react_spring3.animated.div)`
+var TimelineItemGuide = (0, import_styled_components15.default)(import_react_spring3.animated.div)`
   width: 100%;
   padding-top: 2px;
   display: flex;
@@ -1555,7 +1531,7 @@ var TimelineItemGuide = (0, import_styled_components16.default)(import_react_spr
     margin-right: 4px;
   }
 `;
-var TimelineItemGuideLine = (0, import_styled_components16.default)(import_react_spring3.animated.div)`
+var TimelineItemGuideLine = (0, import_styled_components15.default)(import_react_spring3.animated.div)`
   border-top: 4px solid #ffffff;
   margin-right: 4px;
 `;
@@ -1566,8 +1542,8 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = import_react20.default.Children.toArray(props.children);
-  return /* @__PURE__ */ import_react20.default.createElement(
+  const children = import_react19.default.Children.toArray(props.children);
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_spectacle8.Stepper,
     {
       ...props,
@@ -1577,10 +1553,10 @@ function Timeline(props) {
     },
     (value, step) => {
       return children.map((child, index) => {
-        if (!import_react20.default.isValidElement(child)) {
+        if (!import_react19.default.isValidElement(child)) {
           return child;
         }
-        return import_react20.default.cloneElement(child, {
+        return import_react19.default.cloneElement(child, {
           // @ts-expect-error cloning
           isPhantom: step < index,
           isLast: step === index
@@ -1608,7 +1584,7 @@ function TimelineItem(props) {
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
   const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     TimelineItemStyled,
     {
       ...rest,
@@ -1616,13 +1592,13 @@ function TimelineItem(props) {
         ...appearStyles
       }
     },
-    /* @__PURE__ */ import_react20.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react20.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react20.default.createElement(TimelineItemBody, null, children)),
-    /* @__PURE__ */ import_react20.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react20.default.createElement(Hexagon, null), /* @__PURE__ */ import_react20.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
-    /* @__PURE__ */ import_react20.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react20.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react20.default.createElement(TimelineItemBody, null, children))
+    /* @__PURE__ */ import_react19.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react19.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react19.default.createElement(TimelineItemBody, null, children)),
+    /* @__PURE__ */ import_react19.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react19.default.createElement(Hexagon, null), /* @__PURE__ */ import_react19.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
+    /* @__PURE__ */ import_react19.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react19.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react19.default.createElement(TimelineItemBody, null, children))
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     "svg",
     {
       width: "18",
@@ -1631,14 +1607,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react20.default.createElement(
+    /* @__PURE__ */ import_react19.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_react20.default.createElement(
+    /* @__PURE__ */ import_react19.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",
@@ -1649,9 +1625,9 @@ function Hexagon() {
 }
 
 // src/components/IconBox.tsx
-var import_react21 = __toESM(require("react"));
-var import_styled_components17 = __toESM(require("styled-components"));
-var IconBoxContent = import_styled_components17.default.div`
+var import_react20 = __toESM(require("react"));
+var import_styled_components16 = __toESM(require("styled-components"));
+var IconBoxContent = import_styled_components16.default.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;
@@ -1661,7 +1637,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       style: {
@@ -1671,14 +1647,14 @@ function IconBox({
         padding: "1rem 0"
       }
     },
-    /* @__PURE__ */ import_react21.default.createElement("div", { style: { fontSize: 60 } }, icon),
-    /* @__PURE__ */ import_react21.default.createElement(IconBoxContent, null, children)
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: { fontSize: 60 } }, icon),
+    /* @__PURE__ */ import_react20.default.createElement(IconBoxContent, null, children)
   );
 }
 
 // src/index.tsx
 function PassThrough({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, children);
 }
 function Layout({
   children,
@@ -1686,48 +1662,49 @@ function Layout({
 }) {
   const layout = (frontmatter == null ? void 0 : frontmatter.layout) || "default";
   const Layout2 = layout in layouts_default ? layouts_default[layout] : null;
+  console.log(layout, Layout2);
   if (layout && !Layout2) {
     console.warn(`Layout ${layout} not found`);
   }
   if (Layout2) {
-    return /* @__PURE__ */ import_react22.default.createElement(Layout2, { ...frontmatter }, children);
+    return /* @__PURE__ */ import_react21.default.createElement(Layout2, { ...frontmatter }, children);
   }
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, children);
 }
 var componentsMap2 = {
   ...map_default,
   wrapper: Layout
 };
 function Deck({ deck }) {
-  import_react22.default.useEffect(() => {
+  import_react21.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  return /* @__PURE__ */ import_react22.default.createElement(import_react22.default.StrictMode, null, /* @__PURE__ */ import_react22.default.createElement(import_react23.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react22.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.StrictMode, null, /* @__PURE__ */ import_react21.default.createElement(import_react22.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react21.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
     const Component = slide.slideComponent;
-    return /* @__PURE__ */ import_react22.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react22.default.createElement(Component, null));
+    return /* @__PURE__ */ import_react21.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react21.default.createElement(Component, null));
   }))));
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "red" } }, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "red" } }, children);
 }
 function Information({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "orange" } }, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "orange" } }, children);
 }
 function Success({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "green" } }, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "green" } }, children);
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "yellow" } }, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "yellow" } }, children);
 }
 function Side({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", null, children);
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", null, children);
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ import_react22.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react21.default.createElement("div", null, children);
 }
 
 // <stdin>