@gpichot/spectacle-deck 1.10.1 → 1.12.0

package/index.mjs

@@ -1070,8 +1070,10 @@ function FullImageLayout({
               backgroundSize: fit,
               backgroundPosition: "center",
               backgroundRepeat: "no-repeat",
+              backgroundOrigin: padding ? "content-box" : void 0,
               backgroundColor,
-              margin
+              margin,
+              padding
             }
           }
         ),
@@ -1485,6 +1487,58 @@ function SideLayout({
   ] });
 }
 
+// src/layouts/TwoColumnLayout.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function TwoColumnLayout({ children }) {
+  const [heading, rest] = getHeading(children);
+  const [columnContent, leftContent] = getMatchingMdxType(rest, "Column");
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: "5rem"
+      },
+      children: [
+        heading && /* @__PURE__ */ jsx18(
+          "div",
+          {
+            style: {
+              backgroundColor: "#ffffff11",
+              padding: "2rem 5rem",
+              marginBottom: "1rem"
+            },
+            children: heading
+          }
+        ),
+        /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              flex: 1,
+              gap: "2rem",
+              padding: `0 ${Margins.horizontal}`,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx18("div", { style: { flex: 1 }, children: leftContent }),
+              /* @__PURE__ */ jsx18("div", { style: { flex: 1 }, children: columnContent })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/layouts/index.tsx
 var layouts_default = {
   mainSection: MainSectionLayout,
@@ -1496,19 +1550,67 @@ var layouts_default = {
   side: SideLayout,
   section: SectionLayout,
   fullImage: FullImageLayout,
-  bigNumber: BigNumberLayout
+  bigNumber: BigNumberLayout,
+  twoColumn: TwoColumnLayout
 };
 
-// src/SkipStepsShortcut.tsx
-import { useContext as useContext2 } from "react";
+// src/RemoteControllerShortcut.tsx
+import { useContext as useContext2, useEffect } from "react";
 import { DeckContext as DeckContext2, useMousetrap } from "spectacle";
-function SkipStepsShortcut() {
+function RemoteControllerShortcut() {
   const {
     skipTo,
     activeView: { slideIndex },
     slideCount
   } = useContext2(DeckContext2);
   useMousetrap(
+    {
+      pagedown: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })
+        );
+      },
+      pageup: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true })
+        );
+      }
+    },
+    [slideIndex, slideCount]
+  );
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "AudioVolumeUp") {
+        e.preventDefault();
+        if (slideIndex < slideCount - 1) {
+          skipTo({ slideIndex: slideIndex + 1, stepIndex: 0 });
+        }
+      } else if (e.key === "AudioVolumeDown") {
+        e.preventDefault();
+        if (slideIndex > 0) {
+          skipTo({
+            slideIndex: slideIndex - 1,
+            stepIndex: null
+          });
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [slideIndex, slideCount, skipTo]);
+  return null;
+}
+
+// src/SkipStepsShortcut.tsx
+import { useContext as useContext3 } from "react";
+import { DeckContext as DeckContext3, useMousetrap as useMousetrap2 } from "spectacle";
+function SkipStepsShortcut() {
+  const {
+    skipTo,
+    activeView: { slideIndex },
+    slideCount
+  } = useContext3(DeckContext3);
+  useMousetrap2(
     {
       "shift+right": () => {
         if (slideIndex < slideCount - 1) {
@@ -1530,7 +1632,7 @@ function SkipStepsShortcut() {
 }
 
 // src/SlideWrapper.tsx
-import { Fragment, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx19 } from "react/jsx-runtime";
 function SlideWrapper({
   children,
   frontmatter
@@ -1544,22 +1646,22 @@ function SlideWrapper({
     );
   }
   if (Layout) {
-    return /* @__PURE__ */ jsx18(Layout, { ...frontmatter, children });
+    return /* @__PURE__ */ jsx19(Layout, { ...frontmatter, children });
   }
-  return /* @__PURE__ */ jsx18(Fragment, { children });
+  return /* @__PURE__ */ jsx19(Fragment, { children });
 }
 
 // src/template.tsx
 import { Box, FullScreen } from "spectacle";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var template = ({
   slideNumber,
   numberOfSlides
 }) => {
   const percentage = slideNumber / numberOfSlides * 100;
-  return /* @__PURE__ */ jsxs14("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: [
-    /* @__PURE__ */ jsx19(Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ jsx19(FullScreen, {}) }),
-    /* @__PURE__ */ jsx19("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs15("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: [
+    /* @__PURE__ */ jsx20(Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ jsx20(FullScreen, {}) }),
+    /* @__PURE__ */ jsx20("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ jsx20(
       "div",
       {
         style: {
@@ -1657,7 +1759,7 @@ function useInView() {
 }
 
 // src/components/animations/AnimatedCounter.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function AnimatedCounter({
   to,
   from = 0,
@@ -1673,12 +1775,12 @@ function AnimatedCounter({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ jsx20(animated.span, { ref, style: { fontFamily: "var(--font-family)" }, children: value.to((v) => `${prefix}${v.toFixed(decimals)}${suffix}`) });
+  return /* @__PURE__ */ jsx21(animated.span, { ref, style: { fontFamily: "var(--font-family)" }, children: value.to((v) => `${prefix}${v.toFixed(decimals)}${suffix}`) });
 }
 
 // src/components/animations/FadeIn.tsx
 import { animated as animated2, useSpring as useSpring2 } from "@react-spring/web";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function FadeIn({
   children,
   direction = "up",
@@ -1700,12 +1802,12 @@ function FadeIn({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ jsx21(animated2.div, { ref, style: styles, children });
+  return /* @__PURE__ */ jsx22(animated2.div, { ref, style: styles, children });
 }
 
 // src/components/animations/ProgressRing.tsx
 import { animated as animated3, useSpring as useSpring3 } from "@react-spring/web";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function ProgressRing({
   value,
   size = 120,
@@ -1725,7 +1827,7 @@ function ProgressRing({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref,
@@ -1738,14 +1840,14 @@ function ProgressRing({
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "svg",
           {
             width: size,
             height: size,
             style: { position: "absolute", transform: "rotate(-90deg)" },
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 "circle",
                 {
                   cx: size / 2,
@@ -1756,7 +1858,7 @@ function ProgressRing({
                   strokeWidth
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 animated3.circle,
                 {
                   cx: size / 2,
@@ -1773,7 +1875,7 @@ function ProgressRing({
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx22(
+        children && /* @__PURE__ */ jsx23(
           "div",
           {
             style: {
@@ -1791,7 +1893,7 @@ function ProgressRing({
 
 // src/components/animations/ScaleIn.tsx
 import { animated as animated4, useSpring as useSpring4 } from "@react-spring/web";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function ScaleIn({
   children,
   from = 0,
@@ -1805,12 +1907,12 @@ function ScaleIn({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ jsx23(animated4.div, { ref, style: styles, children });
+  return /* @__PURE__ */ jsx24(animated4.div, { ref, style: styles, children });
 }
 
 // src/components/animations/Spotlight.tsx
 import styled13 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var Overlay2 = styled13.div`
   position: fixed;
   inset: 0;
@@ -1828,16 +1930,16 @@ function Spotlight({
   active = true,
   dimOpacity = 0.7
 }) {
-  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    /* @__PURE__ */ jsx24(Overlay2, { $active: active, $dimOpacity: dimOpacity }),
-    /* @__PURE__ */ jsx24(Content, { $active: active, children })
+  return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsx25(Overlay2, { $active: active, $dimOpacity: dimOpacity }),
+    /* @__PURE__ */ jsx25(Content, { $active: active, children })
   ] });
 }
 
 // src/components/animations/StaggerChildren.tsx
 import { animated as animated5, useSprings } from "@react-spring/web";
 import React10 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function StaggerChildren({
   children,
   stagger = 100,
@@ -1864,12 +1966,12 @@ function StaggerChildren({
       config: { duration }
     }))
   );
-  return /* @__PURE__ */ jsx25("div", { ref, children: springs.map((style2, i) => /* @__PURE__ */ jsx25(animated5.div, { style: style2, children: items[i] }, i)) });
+  return /* @__PURE__ */ jsx26("div", { ref, children: springs.map((style2, i) => /* @__PURE__ */ jsx26(animated5.div, { style: style2, children: items[i] }, i)) });
 }
 
 // src/components/animations/TypeWriter.tsx
 import React11 from "react";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
@@ -1910,9 +2012,9 @@ function TypeWriter({
     }, delay);
     return () => clearTimeout(timeout);
   }, [text, speed, delay, isInView]);
-  return /* @__PURE__ */ jsxs17("span", { ref, style: { fontFamily: "var(--font-family)" }, children: [
+  return /* @__PURE__ */ jsxs18("span", { ref, style: { fontFamily: "var(--font-family)" }, children: [
     displayed,
-    cursor && /* @__PURE__ */ jsx26(
+    cursor && /* @__PURE__ */ jsx27(
       "span",
       {
         style: {
@@ -1920,7 +2022,7 @@ function TypeWriter({
           marginLeft: 1,
           animation: done ? "pestacle-blink 1s step-end infinite" : "none"
         },
-        children: /* @__PURE__ */ jsx26("style", { children: `@keyframes pestacle-blink { 50% { opacity: 0; } }` })
+        children: /* @__PURE__ */ jsx27("style", { children: `@keyframes pestacle-blink { 50% { opacity: 0; } }` })
       }
     )
   ] });
@@ -1928,7 +2030,7 @@ function TypeWriter({
 
 // src/components/DocumentationItem.tsx
 import styled14 from "styled-components";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var DocWrapper = styled14.div`
   position: absolute;
   bottom: 0;
@@ -1980,18 +2082,18 @@ function Doc({
   link,
   children
 }) {
-  return /* @__PURE__ */ jsx27(DocWrapper, { children: /* @__PURE__ */ jsxs18(DocContainer, { children: [
-    children && /* @__PURE__ */ jsx27(DocContent, { children }),
-    /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
+  return /* @__PURE__ */ jsx28(DocWrapper, { children: /* @__PURE__ */ jsxs19(DocContainer, { children: [
+    children && /* @__PURE__ */ jsx28(DocContent, { children }),
+    /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
   ] }) });
 }
 function DocItem({ label, link }) {
-  return /* @__PURE__ */ jsx27(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
+  return /* @__PURE__ */ jsx28(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
 }
 
 // src/components/FilePane.tsx
 import React12 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function FilePane({
   name,
   children,
@@ -2005,7 +2107,7 @@ function FilePane({
     name
   }) : children;
   if (minWidth) {
-    return /* @__PURE__ */ jsx28("div", { ...divProps, style: { minWidth, ...divProps.style }, children: content });
+    return /* @__PURE__ */ jsx29("div", { ...divProps, style: { minWidth, ...divProps.style }, children: content });
   }
   return content;
 }
@@ -2016,7 +2118,7 @@ import { animated as animated6, useSpring as useSpring5 } from "@react-spring/we
 import React13 from "react";
 import { Stepper as Stepper2 } from "spectacle";
 import styled15 from "styled-components";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var Container = styled15.div`
   display: grid;
   grid-gap: 2rem;
@@ -2026,7 +2128,7 @@ function HorizontalList({
   columns = 3
 }) {
   const items = React13.Children.toArray(children);
-  return /* @__PURE__ */ jsx29(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx30(
     Container,
     {
       style: {
@@ -2047,11 +2149,11 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs20(
         "svg",
         {
           width: "48",
@@ -2060,14 +2162,14 @@ function Pill({ position }) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx30(
               "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__ */ jsx29(
+            /* @__PURE__ */ jsx30(
               "text",
               {
                 x: "9",
@@ -2079,7 +2181,7 @@ function Pill({ position }) {
                 children: position
               }
             ),
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx30(
               "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",
@@ -2133,18 +2235,18 @@ function HorizontalListItem({
   const opacityStyles = useSpring5({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ jsxs19(Item, { style: opacityStyles, children: [
-    /* @__PURE__ */ jsxs19(ItemHead, { children: [
-      /* @__PURE__ */ jsx29(Pill, { position }),
-      /* @__PURE__ */ jsx29("p", { children: title })
+  return /* @__PURE__ */ jsxs20(Item, { style: opacityStyles, children: [
+    /* @__PURE__ */ jsxs20(ItemHead, { children: [
+      /* @__PURE__ */ jsx30(Pill, { position }),
+      /* @__PURE__ */ jsx30("p", { children: title })
     ] }),
-    /* @__PURE__ */ jsx29(ItemContent, { children })
+    /* @__PURE__ */ jsx30(ItemContent, { children })
   ] });
 }
 
 // src/components/IconBox.tsx
 import styled16 from "styled-components";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var IconBoxContent = styled16.div`
   * {
     margin: 0.2rem !important;
@@ -2155,7 +2257,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       style: {
@@ -2165,8 +2267,8 @@ function IconBox({
         padding: "1rem 0"
       },
       children: [
-        /* @__PURE__ */ jsx30("div", { style: { fontSize: 60 }, children: icon }),
-        /* @__PURE__ */ jsx30(IconBoxContent, { children })
+        /* @__PURE__ */ jsx31("div", { style: { fontSize: 60 }, children: icon }),
+        /* @__PURE__ */ jsx31(IconBoxContent, { children })
       ]
     }
   );
@@ -2177,11 +2279,11 @@ import { animated as animated7, useSpring as useSpring6 } from "@react-spring/we
 import React14 from "react";
 import { Stepper as Stepper3 } from "spectacle";
 import styled17 from "styled-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
   const childrenArray = React14.Children.toArray(children);
-  return /* @__PURE__ */ jsx31(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx32(
     "div",
     {
       style: {
@@ -2199,7 +2301,7 @@ function ItemsColumn(divProps) {
         if (!React14.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ jsx31(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ jsx32(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
@@ -2217,7 +2319,7 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = useSpring6({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ jsx31(ItemColumnWrapperStyled, { style: styles, ...props, children });
+  return /* @__PURE__ */ jsx32(ItemColumnWrapperStyled, { style: styles, ...props, children });
 }
 
 // src/components/Timeline.tsx
@@ -2250,7 +2352,7 @@ var TimelineItemTitle = styled18.div`
 `;
 
 // src/components/Timeline.tsx
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 var TimelineItemStyled = styled19(animated8.div)`
   flex: 1;
   flex-flow: column nowrap;
@@ -2299,7 +2401,7 @@ function Timeline(props) {
   const { activeIndex, ...rest } = props;
   const children = React15.Children.toArray(rest.children);
   if (activeIndex != null) {
-    return /* @__PURE__ */ jsx32("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
+    return /* @__PURE__ */ jsx33("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
       if (!React15.isValidElement(child)) {
         return child;
       }
@@ -2310,7 +2412,7 @@ function Timeline(props) {
       });
     }) });
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Stepper4,
     {
       ...rest,
@@ -2349,7 +2451,7 @@ function TimelineItem(props) {
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
   const colorStyles = useSpring7({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     TimelineItemStyled,
     {
       ...rest,
@@ -2357,24 +2459,24 @@ function TimelineItem(props) {
         ...appearStyles
       },
       children: [
-        /* @__PURE__ */ jsxs21(TimelineItemContentPhantom, { children: [
-          /* @__PURE__ */ jsx32(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ jsx32(TimelineItemBody, { children })
+        /* @__PURE__ */ jsxs22(TimelineItemContentPhantom, { children: [
+          /* @__PURE__ */ jsx33(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ jsx33(TimelineItemBody, { children })
         ] }),
-        /* @__PURE__ */ jsxs21(TimelineItemGuide, { style: colorStyles, children: [
-          /* @__PURE__ */ jsx32(Hexagon, {}),
-          /* @__PURE__ */ jsx32(TimelineItemGuideLine, { style: guideLineProps })
+        /* @__PURE__ */ jsxs22(TimelineItemGuide, { style: colorStyles, children: [
+          /* @__PURE__ */ jsx33(Hexagon, {}),
+          /* @__PURE__ */ jsx33(TimelineItemGuideLine, { style: guideLineProps })
         ] }),
-        /* @__PURE__ */ jsxs21(TimelineItemContent, { children: [
-          /* @__PURE__ */ jsx32(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ jsx32(TimelineItemBody, { children })
+        /* @__PURE__ */ jsxs22(TimelineItemContent, { children: [
+          /* @__PURE__ */ jsx33(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ jsx33(TimelineItemBody, { children })
         ] })
       ]
     }
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       width: "18",
@@ -2383,14 +2485,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "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__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "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",
@@ -2403,9 +2505,9 @@ function Hexagon() {
 }
 
 // src/index.tsx
-import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function PassThrough({ children }) {
-  return /* @__PURE__ */ jsx33(Fragment3, { children });
+  return /* @__PURE__ */ jsx34(Fragment3, { children });
 }
 var layouts = layouts_default;
 var componentsMap2 = {
@@ -2441,22 +2543,23 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ jsx33(React16.StrictMode, { children: /* @__PURE__ */ jsx33(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
-    /* @__PURE__ */ jsx33(GlobalStyle, {}),
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx34(React16.StrictMode, { children: /* @__PURE__ */ jsx34(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs23(MDXProvider, { components: componentsMap2, children: [
+    /* @__PURE__ */ jsx34(GlobalStyle, {}),
+    /* @__PURE__ */ jsxs23(
       SpectacleDeck,
       {
         theme: mergedTheme,
         template,
         transition: resolveTransition(transition),
         children: [
-          /* @__PURE__ */ jsx33(SkipStepsShortcut, {}),
+          /* @__PURE__ */ jsx34(SkipStepsShortcut, {}),
+          /* @__PURE__ */ jsx34(RemoteControllerShortcut, {}),
           deck.slides.map((slide, i) => {
             var _a;
             const Component = slide.slideComponent;
             const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
             const slideTransition2 = resolveTransition(slideTransitionName);
-            return /* @__PURE__ */ jsx33(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx33(Component, {}) }, i);
+            return /* @__PURE__ */ jsx34(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx34(Component, {}) }, i);
           })
         ]
       }
@@ -2464,30 +2567,35 @@ function Deck({
   ] }) }) });
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ jsx33("div", { style: { color: "red" }, children });
+  return /* @__PURE__ */ jsx34("div", { style: { color: "red" }, children });
 }
 function Information({ children }) {
-  return /* @__PURE__ */ jsx33("div", { style: { color: "orange" }, children });
+  return /* @__PURE__ */ jsx34("div", { style: { color: "orange" }, children });
 }
 function Success({ children }) {
-  return /* @__PURE__ */ jsx33("div", { style: { color: "green" }, children });
+  return /* @__PURE__ */ jsx34("div", { style: { color: "green" }, children });
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ jsx33("div", { style: { color: "yellow" }, children });
+  return /* @__PURE__ */ jsx34("div", { style: { color: "yellow" }, children });
 }
 function Side({ children }) {
-  return /* @__PURE__ */ jsx33("div", { children });
+  return /* @__PURE__ */ jsx34("div", { children });
 }
 Side.mdxType = "Side";
+function Column({ children }) {
+  return /* @__PURE__ */ jsx34("div", { children });
+}
+Column.mdxType = "Column";
 function Documentation({ children }) {
-  return /* @__PURE__ */ jsx33("div", { children });
+  return /* @__PURE__ */ jsx34("div", { children });
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ jsx33("div", { children });
+  return /* @__PURE__ */ jsx34("div", { children });
 }
 export {
   AnimatedCounter,
   Box2 as Box,
+  Column,
   Danger,
   Deck,
   Doc,