@gpichot/spectacle-deck 1.10.1 → 1.12.0

package/index.cjs

@@ -31,6 +31,7 @@ var src_exports = {};
 __export(src_exports, {
   AnimatedCounter: () => AnimatedCounter,
   Box: () => Box2,
+  Column: () => Column,
   Danger: () => Danger,
   Deck: () => Deck,
   Doc: () => Doc,
@@ -61,9 +62,9 @@ __export(src_exports, {
   noneTransition: () => noneTransition,
   resolveTransition: () => resolveTransition
 });
-var import_react17 = require("@mdx-js/react");
-var import_react18 = __toESM(require("react"));
-var import_spectacle12 = require("spectacle");
+var import_react18 = require("@mdx-js/react");
+var import_react19 = __toESM(require("react"));
+var import_spectacle13 = require("spectacle");
 var import_styled_components20 = require("styled-components");
 
 // src/colors.ts
@@ -1128,8 +1129,10 @@ function FullImageLayout({
               backgroundSize: fit,
               backgroundPosition: "center",
               backgroundRepeat: "no-repeat",
+              backgroundOrigin: padding ? "content-box" : void 0,
               backgroundColor,
-              margin
+              margin,
+              padding
             }
           }
         ),
@@ -1543,6 +1546,58 @@ function SideLayout({
   ] });
 }
 
+// src/layouts/TwoColumnLayout.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function TwoColumnLayout({ children }) {
+  const [heading, rest] = getHeading(children);
+  const [columnContent, leftContent] = getMatchingMdxType(rest, "Column");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        display: "flex",
+        flexDirection: "column",
+        marginBottom: "5rem"
+      },
+      children: [
+        heading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
+          {
+            style: {
+              backgroundColor: "#ffffff11",
+              padding: "2rem 5rem",
+              marginBottom: "1rem"
+            },
+            children: heading
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              flex: 1,
+              gap: "2rem",
+              padding: `0 ${Margins.horizontal}`,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1 }, children: leftContent }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { flex: 1 }, children: columnContent })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/layouts/index.tsx
 var layouts_default = {
   mainSection: MainSectionLayout,
@@ -1554,19 +1609,67 @@ var layouts_default = {
   side: SideLayout,
   section: SectionLayout,
   fullImage: FullImageLayout,
-  bigNumber: BigNumberLayout
+  bigNumber: BigNumberLayout,
+  twoColumn: TwoColumnLayout
 };
 
-// src/SkipStepsShortcut.tsx
+// src/RemoteControllerShortcut.tsx
 var import_react9 = require("react");
 var import_spectacle6 = require("spectacle");
-function SkipStepsShortcut() {
+function RemoteControllerShortcut() {
   const {
     skipTo,
     activeView: { slideIndex },
     slideCount
   } = (0, import_react9.useContext)(import_spectacle6.DeckContext);
   (0, import_spectacle6.useMousetrap)(
+    {
+      pagedown: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })
+        );
+      },
+      pageup: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true })
+        );
+      }
+    },
+    [slideIndex, slideCount]
+  );
+  (0, import_react9.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
+var import_react10 = require("react");
+var import_spectacle7 = require("spectacle");
+function SkipStepsShortcut() {
+  const {
+    skipTo,
+    activeView: { slideIndex },
+    slideCount
+  } = (0, import_react10.useContext)(import_spectacle7.DeckContext);
+  (0, import_spectacle7.useMousetrap)(
     {
       "shift+right": () => {
         if (slideIndex < slideCount - 1) {
@@ -1588,7 +1691,7 @@ function SkipStepsShortcut() {
 }
 
 // src/SlideWrapper.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function SlideWrapper({
   children,
   frontmatter
@@ -1602,22 +1705,22 @@ function SlideWrapper({
     );
   }
   if (Layout) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Layout, { ...frontmatter, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Layout, { ...frontmatter, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children });
 }
 
 // src/template.tsx
-var import_spectacle7 = require("spectacle");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_spectacle8 = require("spectacle");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var template = ({
   slideNumber,
   numberOfSlides
 }) => {
   const percentage = slideNumber / numberOfSlides * 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_spectacle7.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_spectacle7.FullScreen, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle8.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle8.FullScreen, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         style: {
@@ -1660,7 +1763,7 @@ var theme_default = {
 };
 
 // src/transitions.ts
-var import_spectacle8 = require("spectacle");
+var import_spectacle9 = require("spectacle");
 var dropTransition = {
   from: { transform: "translateY(-100%)", opacity: 0 },
   enter: { transform: "translateY(0%)", opacity: 1 },
@@ -1672,8 +1775,8 @@ var noneTransition = {
   leave: { opacity: 0 }
 };
 var transitionMap = {
-  fade: import_spectacle8.fadeTransition,
-  slide: import_spectacle8.slideTransition,
+  fade: import_spectacle9.fadeTransition,
+  slide: import_spectacle9.slideTransition,
   drop: dropTransition,
   none: noneTransition
 };
@@ -1689,11 +1792,11 @@ __reExport(src_exports, require("spectacle"));
 var import_web = require("@react-spring/web");
 
 // src/components/animations/useInView.ts
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 function useInView() {
-  const ref = import_react10.default.useRef(null);
-  const [isInView, setIsInView] = import_react10.default.useState(false);
-  import_react10.default.useEffect(() => {
+  const ref = import_react11.default.useRef(null);
+  const [isInView, setIsInView] = import_react11.default.useState(false);
+  import_react11.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1712,7 +1815,7 @@ function useInView() {
 }
 
 // src/components/animations/AnimatedCounter.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function AnimatedCounter({
   to,
   from = 0,
@@ -1728,12 +1831,12 @@ function AnimatedCounter({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_web.animated.span, { ref, style: { fontFamily: "var(--font-family)" }, children: value.to((v) => `${prefix}${v.toFixed(decimals)}${suffix}`) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_web.animated.span, { ref, style: { fontFamily: "var(--font-family)" }, children: value.to((v) => `${prefix}${v.toFixed(decimals)}${suffix}`) });
 }
 
 // src/components/animations/FadeIn.tsx
 var import_web2 = require("@react-spring/web");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function FadeIn({
   children,
   direction = "up",
@@ -1755,12 +1858,12 @@ function FadeIn({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_web2.animated.div, { ref, style: styles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_web2.animated.div, { ref, style: styles, children });
 }
 
 // src/components/animations/ProgressRing.tsx
 var import_web3 = require("@react-spring/web");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ProgressRing({
   value,
   size = 120,
@@ -1780,7 +1883,7 @@ function ProgressRing({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       ref,
@@ -1793,14 +1896,14 @@ function ProgressRing({
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "svg",
           {
             width: size,
             height: size,
             style: { position: "absolute", transform: "rotate(-90deg)" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -1811,7 +1914,7 @@ function ProgressRing({
                   strokeWidth
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 import_web3.animated.circle,
                 {
                   cx: size / 2,
@@ -1828,7 +1931,7 @@ function ProgressRing({
             ]
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "div",
           {
             style: {
@@ -1846,7 +1949,7 @@ function ProgressRing({
 
 // src/components/animations/ScaleIn.tsx
 var import_web4 = require("@react-spring/web");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ScaleIn({
   children,
   from = 0,
@@ -1860,12 +1963,12 @@ function ScaleIn({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_web4.animated.div, { ref, style: styles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_web4.animated.div, { ref, style: styles, children });
 }
 
 // src/components/animations/Spotlight.tsx
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Overlay2 = import_styled_components13.default.div`
   position: fixed;
   inset: 0;
@@ -1883,16 +1986,16 @@ function Spotlight({
   active = true,
   dimOpacity = 0.7
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Overlay2, { $active: active, $dimOpacity: dimOpacity }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Content, { $active: active, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Overlay2, { $active: active, $dimOpacity: dimOpacity }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Content, { $active: active, children })
   ] });
 }
 
 // src/components/animations/StaggerChildren.tsx
 var import_web5 = require("@react-spring/web");
-var import_react11 = __toESM(require("react"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react12 = __toESM(require("react"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function StaggerChildren({
   children,
   stagger = 100,
@@ -1902,7 +2005,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = import_react11.default.Children.toArray(children);
+  const items = import_react12.default.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1919,18 +2022,18 @@ function StaggerChildren({
       config: { duration }
     }))
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, children: springs.map((style2, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_web5.animated.div, { style: style2, children: items[i] }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, children: springs.map((style2, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_web5.animated.div, { style: style2, children: items[i] }, i)) });
 }
 
 // src/components/animations/TypeWriter.tsx
-var import_react12 = __toESM(require("react"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react13 = __toESM(require("react"));
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
   if (!node) return "";
   if (Array.isArray(node)) return node.map(extractText).join("");
-  if (import_react12.default.isValidElement(node)) {
+  if (import_react13.default.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -1944,9 +2047,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = import_react12.default.useState("");
-  const [done, setDone] = import_react12.default.useState(false);
-  import_react12.default.useEffect(() => {
+  const [displayed, setDisplayed] = import_react13.default.useState("");
+  const [done, setDone] = import_react13.default.useState(false);
+  import_react13.default.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -1965,9 +2068,9 @@ function TypeWriter({
     }, delay);
     return () => clearTimeout(timeout);
   }, [text, speed, delay, isInView]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { ref, style: { fontFamily: "var(--font-family)" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { ref, style: { fontFamily: "var(--font-family)" }, children: [
     displayed,
-    cursor && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    cursor && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "span",
       {
         style: {
@@ -1975,7 +2078,7 @@ function TypeWriter({
           marginLeft: 1,
           animation: done ? "pestacle-blink 1s step-end infinite" : "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `@keyframes pestacle-blink { 50% { opacity: 0; } }` })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: `@keyframes pestacle-blink { 50% { opacity: 0; } }` })
       }
     )
   ] });
@@ -1983,7 +2086,7 @@ function TypeWriter({
 
 // src/components/DocumentationItem.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var DocWrapper = import_styled_components14.default.div`
   position: absolute;
   bottom: 0;
@@ -2035,18 +2138,18 @@ function Doc({
   link,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DocWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DocContainer, { children: [
-    children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DocContent, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DocWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DocContainer, { children: [
+    children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DocContent, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
   ] }) });
 }
 function DocItem({ label, link }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
 }
 
 // src/components/FilePane.tsx
-var import_react13 = __toESM(require("react"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FilePane({
   name,
   children,
@@ -2054,13 +2157,13 @@ function FilePane({
   minWidth,
   ...divProps
 }) {
-  const content = import_react13.default.isValidElement(children) ? import_react13.default.cloneElement(children, {
+  const content = import_react14.default.isValidElement(children) ? import_react14.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
   }) : children;
   if (minWidth) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ...divProps, style: { minWidth, ...divProps.style }, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ...divProps, style: { minWidth, ...divProps.style }, children: content });
   }
   return content;
 }
@@ -2068,10 +2171,10 @@ FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 var import_web6 = require("@react-spring/web");
-var import_react14 = __toESM(require("react"));
-var import_spectacle9 = require("spectacle");
+var import_react15 = __toESM(require("react"));
+var import_spectacle10 = require("spectacle");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Container = import_styled_components15.default.div`
   display: grid;
   grid-gap: 2rem;
@@ -2080,18 +2183,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react14.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_spectacle9.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const items = import_react15.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_spectacle10.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!import_react14.default.isValidElement(item)) {
+        if (!import_react15.default.isValidElement(item)) {
           return item;
         }
-        return import_react14.default.cloneElement(item, {
+        return import_react15.default.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -2102,11 +2205,11 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "svg",
         {
           width: "48",
@@ -2115,14 +2218,14 @@ function Pill({ position }) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "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__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "text",
               {
                 x: "9",
@@ -2134,7 +2237,7 @@ function Pill({ position }) {
                 children: position
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "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",
@@ -2188,18 +2291,18 @@ function HorizontalListItem({
   const opacityStyles = (0, import_web6.useSpring)({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Item, { style: opacityStyles, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ItemHead, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Pill, { position }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Item, { style: opacityStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ItemHead, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Pill, { position }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ItemContent, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ItemContent, { children })
   ] });
 }
 
 // src/components/IconBox.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var IconBoxContent = import_styled_components16.default.div`
   * {
     margin: 0.2rem !important;
@@ -2210,7 +2313,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       style: {
@@ -2220,8 +2323,8 @@ function IconBox({
         padding: "1rem 0"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { fontSize: 60 }, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconBoxContent, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { fontSize: 60 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconBoxContent, { children })
       ]
     }
   );
@@ -2229,14 +2332,14 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 var import_web7 = require("@react-spring/web");
-var import_react15 = __toESM(require("react"));
-var import_spectacle10 = require("spectacle");
+var import_react16 = __toESM(require("react"));
+var import_spectacle11 = require("spectacle");
 var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react15.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_spectacle10.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const childrenArray = import_react16.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_spectacle11.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       style: {
@@ -2251,10 +2354,10 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!import_react15.default.isValidElement(child)) {
+        if (!import_react16.default.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
@@ -2272,13 +2375,13 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = (0, import_web7.useSpring)({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ItemColumnWrapperStyled, { style: styles, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemColumnWrapperStyled, { style: styles, ...props, children });
 }
 
 // src/components/Timeline.tsx
 var import_web8 = require("@react-spring/web");
-var import_react16 = __toESM(require("react"));
-var import_spectacle11 = require("spectacle");
+var import_react17 = __toESM(require("react"));
+var import_spectacle12 = require("spectacle");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/Timeline.styled.tsx
@@ -2305,7 +2408,7 @@ var TimelineItemTitle = import_styled_components18.default.div`
 `;
 
 // src/components/Timeline.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var TimelineItemStyled = (0, import_styled_components19.default)(import_web8.animated.div)`
   flex: 1;
   flex-flow: column nowrap;
@@ -2352,21 +2455,21 @@ var style = {
 };
 function Timeline(props) {
   const { activeIndex, ...rest } = props;
-  const children = import_react16.default.Children.toArray(rest.children);
+  const children = import_react17.default.Children.toArray(rest.children);
   if (activeIndex != null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
-      if (!import_react16.default.isValidElement(child)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
+      if (!import_react17.default.isValidElement(child)) {
         return child;
       }
-      return import_react16.default.cloneElement(child, {
+      return import_react17.default.cloneElement(child, {
         // @ts-expect-error cloning
         isPhantom: activeIndex < index,
         isLast: activeIndex === index
       });
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_spectacle11.Stepper,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_spectacle12.Stepper,
     {
       ...rest,
       values: children,
@@ -2374,10 +2477,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!import_react16.default.isValidElement(child)) {
+          if (!import_react17.default.isValidElement(child)) {
             return child;
           }
-          return import_react16.default.cloneElement(child, {
+          return import_react17.default.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2404,7 +2507,7 @@ function TimelineItem(props) {
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
   const colorStyles = (0, import_web8.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     TimelineItemStyled,
     {
       ...rest,
@@ -2412,24 +2515,24 @@ function TimelineItem(props) {
         ...appearStyles
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TimelineItemContentPhantom, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineItemBody, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(TimelineItemContentPhantom, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimelineItemBody, { children })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TimelineItemGuide, { style: colorStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Hexagon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineItemGuideLine, { style: guideLineProps })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(TimelineItemGuide, { style: colorStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Hexagon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimelineItemGuideLine, { style: guideLineProps })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TimelineItemContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TimelineItemBody, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(TimelineItemContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimelineItemBody, { children })
         ] })
       ]
     }
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "svg",
     {
       width: "18",
@@ -2438,14 +2541,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "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__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "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",
@@ -2458,9 +2561,9 @@ function Hexagon() {
 }
 
 // src/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function PassThrough({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
 }
 var layouts = layouts_default;
 var componentsMap2 = {
@@ -2473,10 +2576,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  import_react18.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = import_react18.default.useMemo(() => {
+  const mergedTheme = import_react19.default.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2487,7 +2590,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = import_react18.default.useMemo(() => {
+  const GlobalStyle = import_react19.default.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return import_styled_components20.createGlobalStyle`
       :root {
@@ -2496,22 +2599,23 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react18.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react17.MDXProvider, { components: componentsMap2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GlobalStyle, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      import_spectacle12.Deck,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react19.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react18.MDXProvider, { components: componentsMap2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlobalStyle, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      import_spectacle13.Deck,
       {
         theme: mergedTheme,
         template,
         transition: resolveTransition(transition),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkipStepsShortcut, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SkipStepsShortcut, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(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__ */ (0, import_jsx_runtime33.jsx)(import_spectacle12.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, {}) }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_spectacle13.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, {}) }, i);
           })
         ]
       }
@@ -2519,26 +2623,30 @@ function Deck({
   ] }) }) });
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "red" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { color: "red" }, children });
 }
 function Information({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "orange" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { color: "orange" }, children });
 }
 function Success({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "green" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { color: "green" }, children });
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "yellow" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { color: "yellow" }, children });
 }
 function Side({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children });
 }
 Side.mdxType = "Side";
+function Column({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children });
+}
+Column.mdxType = "Column";
 function Documentation({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children });
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children });
 }
 
 // <stdin>