@gpichot/spectacle-deck 1.10.1 → 1.11.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,
@@ -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,7 +1609,8 @@ var layouts_default = {
   side: SideLayout,
   section: SectionLayout,
   fullImage: FullImageLayout,
-  bigNumber: BigNumberLayout
+  bigNumber: BigNumberLayout,
+  twoColumn: TwoColumnLayout
 };
 
 // src/SkipStepsShortcut.tsx
@@ -1588,7 +1644,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 +1658,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_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_spectacle7.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle7.FullScreen, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         style: {
@@ -1712,7 +1768,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 +1784,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 +1811,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 +1836,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 +1849,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 +1867,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 +1884,7 @@ function ProgressRing({
             ]
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "div",
           {
             style: {
@@ -1846,7 +1902,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 +1916,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 +1939,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_jsx_runtime26 = require("react/jsx-runtime");
 function StaggerChildren({
   children,
   stagger = 100,
@@ -1919,12 +1975,12 @@ 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_jsx_runtime27 = require("react/jsx-runtime");
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
@@ -1965,9 +2021,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 +2031,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 +2039,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 +2091,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_jsx_runtime29 = require("react/jsx-runtime");
 function FilePane({
   name,
   children,
@@ -2060,7 +2116,7 @@ function FilePane({
     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;
 }
@@ -2071,7 +2127,7 @@ var import_web6 = require("@react-spring/web");
 var import_react14 = __toESM(require("react"));
 var import_spectacle9 = 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;
@@ -2081,7 +2137,7 @@ function HorizontalList({
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_spectacle9.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Container,
     {
       style: {
@@ -2102,11 +2158,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 +2171,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 +2190,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 +2244,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 +2266,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       style: {
@@ -2220,8 +2276,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 })
       ]
     }
   );
@@ -2232,11 +2288,11 @@ var import_web7 = require("@react-spring/web");
 var import_react15 = __toESM(require("react"));
 var import_spectacle10 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_spectacle10.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       style: {
@@ -2254,7 +2310,7 @@ function ItemsColumn(divProps) {
         if (!import_react15.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,7 +2328,7 @@ 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
@@ -2305,7 +2361,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;
@@ -2354,7 +2410,7 @@ function Timeline(props) {
   const { activeIndex, ...rest } = props;
   const children = import_react16.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) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
       if (!import_react16.default.isValidElement(child)) {
         return child;
       }
@@ -2365,7 +2421,7 @@ function Timeline(props) {
       });
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_spectacle11.Stepper,
     {
       ...rest,
@@ -2404,7 +2460,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 +2468,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 +2494,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 +2514,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 = {
@@ -2496,22 +2552,22 @@ 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react18.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react17.MDXProvider, { components: componentsMap2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlobalStyle, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       import_spectacle12.Deck,
       {
         theme: mergedTheme,
         template,
         transition: resolveTransition(transition),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkipStepsShortcut, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SkipStepsShortcut, {}),
           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_spectacle12.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, {}) }, i);
           })
         ]
       }
@@ -2519,26 +2575,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>

package/index.d.ts

@@ -46,6 +46,7 @@ export declare const layouts: {
     section: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     fullImage: typeof import("./layouts/FullImageLayout").FullImageLayout;
     bigNumber: typeof import("./layouts/BigNumberLayout").BigNumberLayout;
+    twoColumn: typeof import("./layouts/TwoColumnLayout").TwoColumnLayout;
 };
 interface ThemeOptions {
     themeTokens: {
@@ -81,6 +82,12 @@ export declare function Side({ children }: {
 export declare namespace Side {
     var mdxType: string;
 }
+export declare function Column({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Column {
+    var mdxType: string;
+}
 export declare function Documentation({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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,7 +1550,8 @@ var layouts_default = {
   side: SideLayout,
   section: SectionLayout,
   fullImage: FullImageLayout,
-  bigNumber: BigNumberLayout
+  bigNumber: BigNumberLayout,
+  twoColumn: TwoColumnLayout
 };
 
 // src/SkipStepsShortcut.tsx
@@ -1530,7 +1585,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 +1599,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 +1712,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 +1728,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 +1755,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 +1780,7 @@ function ProgressRing({
     delay: isInView ? delay : 0,
     config: { duration }
   });
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref,
@@ -1738,14 +1793,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 +1811,7 @@ function ProgressRing({
                   strokeWidth
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 animated3.circle,
                 {
                   cx: size / 2,
@@ -1773,7 +1828,7 @@ function ProgressRing({
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx22(
+        children && /* @__PURE__ */ jsx23(
           "div",
           {
             style: {
@@ -1791,7 +1846,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 +1860,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 +1883,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 +1919,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 +1965,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 +1975,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 +1983,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 +2035,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 +2060,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 +2071,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 +2081,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 +2102,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 +2115,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 +2134,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 +2188,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 +2210,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       style: {
@@ -2165,8 +2220,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 +2232,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 +2254,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 +2272,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 +2305,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 +2354,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 +2365,7 @@ function Timeline(props) {
       });
     }) });
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Stepper4,
     {
       ...rest,
@@ -2349,7 +2404,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 +2412,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 +2438,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 +2458,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 +2496,22 @@ 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, {}),
           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 +2519,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,

package/layouts/TwoColumnLayout.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+export declare function TwoColumnLayout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layouts/index.d.ts

@@ -3,6 +3,7 @@ import { FullImageLayout } from "./FullImageLayout";
 import { QuoteLayout } from "./QuoteLayout";
 import { SidedCodeLayout } from "./SideCodeLayout";
 import { SideLayout } from "./SideLayout";
+import { TwoColumnLayout } from "./TwoColumnLayout";
 declare const _default: {
     mainSection: ({ children, }: {
         children: React.ReactNode;
@@ -25,5 +26,6 @@ declare const _default: {
     section: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     fullImage: typeof FullImageLayout;
     bigNumber: typeof BigNumberLayout;
+    twoColumn: typeof TwoColumnLayout;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpichot/spectacle-deck",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",