@gpichot/spectacle-deck 1.5.0 → 1.7.0

package/components/FilePane.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-declare function FilePane({ name, children, priority, ...divProps }: React.ComponentProps<"div"> & {
+declare function FilePane({ name, children, priority, minWidth, ...divProps }: React.ComponentProps<"div"> & {
     name: string;
     priority?: number;
-}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.DetailedReactHTMLElement<unknown, HTMLElement>;
+    minWidth?: string;
+}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
 declare namespace FilePane {
     var mdxType: string;
 }

package/components/Timeline.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-export default function Timeline(props: React.ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+export default function Timeline(props: React.ComponentPropsWithoutRef<"div"> & {
+    activeIndex?: number;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function TimelineItem(props: React.ComponentPropsWithoutRef<"div"> & {
     isPhantom?: boolean;
     isLast?: boolean;

package/index.cjs

@@ -61,8 +61,8 @@ __export(src_exports, {
   noneTransition: () => noneTransition,
   resolveTransition: () => resolveTransition
 });
-var import_react15 = require("@mdx-js/react");
-var import_react16 = __toESM(require("react"));
+var import_react16 = require("@mdx-js/react");
+var import_react17 = __toESM(require("react"));
 var import_spectacle11 = require("spectacle");
 var import_styled_components20 = require("styled-components");
 
@@ -528,6 +528,11 @@ var HeadingTwo = import_styled_components2.default.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
+
+  strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
 `;
 var HeadingThree = import_styled_components2.default.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
@@ -1066,6 +1071,7 @@ var Default3Layout = ({
 };
 
 // src/layouts/FullImageLayout.tsx
+var import_react7 = __toESM(require("react"));
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Overlay = import_styled_components6.default.div`
@@ -1092,6 +1098,9 @@ function FullImageLayout({
   position = "bottom",
   dim = 0.4
 }) {
+  const [images, rest] = getMatchingMdxType(children, "Image");
+  const firstImage = images[0];
+  const backgroundImage = image || (import_react7.default.isValidElement(firstImage) ? firstImage.props.src : void 0);
   const justifyMap = {
     top: "flex-start",
     center: "center",
@@ -1111,7 +1120,7 @@ function FullImageLayout({
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${image})`,
+              backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
               backgroundSize: "cover",
               backgroundPosition: "center"
             }
@@ -1127,7 +1136,7 @@ function FullImageLayout({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Overlay, { style: { justifyContent: justifyMap[position] }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Overlay, { style: { justifyContent: justifyMap[position] }, children: firstImage ? rest : children })
       ]
     }
   );
@@ -1281,7 +1290,7 @@ var SectionLayout = import_styled_components8.default.div`
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/layouts/columns.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var DivWithHeading = import_styled_components9.default.div`
@@ -1307,7 +1316,7 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = import_react7.default.Children.toArray(children);
+  const childrenArray = import_react8.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ColumnsContainer,
     {
@@ -1636,11 +1645,11 @@ __reExport(src_exports, require("spectacle"));
 var import_web = require("@react-spring/web");
 
 // src/components/animations/useInView.ts
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 function useInView() {
-  const ref = import_react8.default.useRef(null);
-  const [isInView, setIsInView] = import_react8.default.useState(false);
-  import_react8.default.useEffect(() => {
+  const ref = import_react9.default.useRef(null);
+  const [isInView, setIsInView] = import_react9.default.useState(false);
+  import_react9.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1838,7 +1847,7 @@ function Spotlight({
 
 // src/components/animations/StaggerChildren.tsx
 var import_web5 = require("@react-spring/web");
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function StaggerChildren({
   children,
@@ -1849,7 +1858,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = import_react9.default.Children.toArray(children);
+  const items = import_react10.default.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1870,14 +1879,14 @@ function StaggerChildren({
 }
 
 // src/components/animations/TypeWriter.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime26 = 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_react10.default.isValidElement(node)) {
+  if (import_react11.default.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -1891,9 +1900,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = import_react10.default.useState("");
-  const [done, setDone] = import_react10.default.useState(false);
-  import_react10.default.useEffect(() => {
+  const [displayed, setDisplayed] = import_react11.default.useState("");
+  const [done, setDone] = import_react11.default.useState(false);
+  import_react11.default.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -1992,27 +2001,33 @@ function DocItem({ label, link }) {
 }
 
 // src/components/FilePane.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function FilePane({
   name,
   children,
   priority,
+  minWidth,
   ...divProps
 }) {
-  return import_react11.default.isValidElement(children) ? import_react11.default.cloneElement(children, {
+  const content = import_react12.default.isValidElement(children) ? import_react12.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 content;
 }
 FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 var import_web6 = require("@react-spring/web");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_spectacle8 = require("spectacle");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Container = import_styled_components15.default.div`
   display: grid;
   grid-gap: 2rem;
@@ -2021,18 +2036,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react12.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_spectacle8.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const items = import_react13.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_spectacle8.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!import_react12.default.isValidElement(item)) {
+        if (!import_react13.default.isValidElement(item)) {
           return item;
         }
-        return import_react12.default.cloneElement(item, {
+        return import_react13.default.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -2043,11 +2058,11 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "svg",
         {
           width: "48",
@@ -2056,14 +2071,14 @@ function Pill({ position }) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "text",
               {
                 x: "9",
@@ -2075,7 +2090,7 @@ function Pill({ position }) {
                 children: position
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.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",
@@ -2129,18 +2144,18 @@ function HorizontalListItem({
   const opacityStyles = (0, import_web6.useSpring)({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Item, { style: opacityStyles, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ItemHead, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Pill, { position }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { children: title })
+  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 })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemContent, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ItemContent, { children })
   ] });
 }
 
 // src/components/IconBox.tsx
 var import_styled_components16 = __toESM(require("styled-components"));
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var IconBoxContent = import_styled_components16.default.div`
   * {
     margin: 0.2rem !important;
@@ -2151,7 +2166,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       style: {
@@ -2161,8 +2176,8 @@ function IconBox({
         padding: "1rem 0"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { fontSize: 60 }, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconBoxContent, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { fontSize: 60 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconBoxContent, { children })
       ]
     }
   );
@@ -2170,14 +2185,14 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 var import_web7 = require("@react-spring/web");
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_spectacle9 = require("spectacle");
 var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react13.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_spectacle9.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const childrenArray = import_react14.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_spectacle9.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       style: {
@@ -2192,10 +2207,10 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!import_react13.default.isValidElement(child)) {
+        if (!import_react14.default.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
@@ -2213,12 +2228,12 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = (0, import_web7.useSpring)({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ItemColumnWrapperStyled, { style: styles, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ItemColumnWrapperStyled, { style: styles, ...props, children });
 }
 
 // src/components/Timeline.tsx
 var import_web8 = require("@react-spring/web");
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_spectacle10 = require("spectacle");
 var import_styled_components19 = __toESM(require("styled-components"));
 
@@ -2246,7 +2261,7 @@ var TimelineItemTitle = import_styled_components18.default.div`
 `;
 
 // src/components/Timeline.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TimelineItemStyled = (0, import_styled_components19.default)(import_web8.animated.div)`
   flex: 1;
   flex-flow: column nowrap;
@@ -2292,20 +2307,33 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = import_react14.default.Children.toArray(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const { activeIndex, ...rest } = props;
+  const children = import_react15.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_react15.default.isValidElement(child)) {
+        return child;
+      }
+      return import_react15.default.cloneElement(child, {
+        // @ts-expect-error cloning
+        isPhantom: activeIndex < index,
+        isLast: activeIndex === index
+      });
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_spectacle10.Stepper,
     {
-      ...props,
+      ...rest,
       values: children,
       activeStyle: style,
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!import_react14.default.isValidElement(child)) {
+          if (!import_react15.default.isValidElement(child)) {
             return child;
           }
-          return import_react14.default.cloneElement(child, {
+          return import_react15.default.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2332,7 +2360,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_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     TimelineItemStyled,
     {
       ...rest,
@@ -2340,24 +2368,24 @@ function TimelineItem(props) {
         ...appearStyles
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TimelineItemContentPhantom, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimelineItemBody, { 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_runtime31.jsxs)(TimelineItemGuide, { style: colorStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Hexagon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimelineItemGuideLine, { style: guideLineProps })
+        /* @__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_runtime31.jsxs)(TimelineItemContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimelineItemBody, { children })
+        /* @__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 })
         ] })
       ]
     }
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "svg",
     {
       width: "18",
@@ -2366,14 +2394,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.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",
@@ -2386,9 +2414,9 @@ function Hexagon() {
 }
 
 // src/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PassThrough({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
 }
 var layouts = layouts_default;
 var componentsMap2 = {
@@ -2401,10 +2429,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  import_react16.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = import_react16.default.useMemo(() => {
+  const mergedTheme = import_react17.default.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2415,7 +2443,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = import_react16.default.useMemo(() => {
+  const GlobalStyle = import_react17.default.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return import_styled_components20.createGlobalStyle`
       :root {
@@ -2424,9 +2452,9 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react16.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react15.MDXProvider, { components: componentsMap2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlobalStyle, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react17.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react16.MDXProvider, { components: componentsMap2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GlobalStyle, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_spectacle11.Deck,
       {
         theme: mergedTheme,
@@ -2437,33 +2465,33 @@ function Deck({
           const Component = slide.slideComponent;
           const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
           const slideTransition2 = resolveTransition(slideTransitionName);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_spectacle11.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Component, {}) }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_spectacle11.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, {}) }, i);
         })
       }
     )
   ] }) }) });
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "red" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "red" }, children });
 }
 function Information({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "orange" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "orange" }, children });
 }
 function Success({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "green" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "green" }, children });
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "yellow" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { color: "yellow" }, children });
 }
 function Side({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children });
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children });
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children });
 }
 
 // <stdin>

package/index.mjs

@@ -1,6 +1,6 @@
 // src/index.tsx
 import { MDXProvider } from "@mdx-js/react";
-import React15 from "react";
+import React16 from "react";
 import { Slide, Deck as SpectacleDeck } from "spectacle";
 import { createGlobalStyle } from "styled-components";
 
@@ -470,6 +470,11 @@ var HeadingTwo = styled2.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
+
+  strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
 `;
 var HeadingThree = styled2.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
@@ -1008,6 +1013,7 @@ var Default3Layout = ({
 };
 
 // src/layouts/FullImageLayout.tsx
+import React7 from "react";
 import styled6 from "styled-components";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Overlay = styled6.div`
@@ -1034,6 +1040,9 @@ function FullImageLayout({
   position = "bottom",
   dim = 0.4
 }) {
+  const [images, rest] = getMatchingMdxType(children, "Image");
+  const firstImage = images[0];
+  const backgroundImage = image || (React7.isValidElement(firstImage) ? firstImage.props.src : void 0);
   const justifyMap = {
     top: "flex-start",
     center: "center",
@@ -1053,7 +1062,7 @@ function FullImageLayout({
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${image})`,
+              backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
               backgroundSize: "cover",
               backgroundPosition: "center"
             }
@@ -1069,7 +1078,7 @@ function FullImageLayout({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(Overlay, { style: { justifyContent: justifyMap[position] }, children })
+        /* @__PURE__ */ jsx10(Overlay, { style: { justifyContent: justifyMap[position] }, children: firstImage ? rest : children })
       ]
     }
   );
@@ -1223,7 +1232,7 @@ var SectionLayout = styled8.div`
 import styled10 from "styled-components";
 
 // src/layouts/columns.tsx
-import React7 from "react";
+import React8 from "react";
 import styled9 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var DivWithHeading = styled9.div`
@@ -1249,7 +1258,7 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = React7.Children.toArray(children);
+  const childrenArray = React8.Children.toArray(children);
   return /* @__PURE__ */ jsx13(
     ColumnsContainer,
     {
@@ -1581,11 +1590,11 @@ export * from "spectacle";
 import { animated, useSpring } from "@react-spring/web";
 
 // src/components/animations/useInView.ts
-import React8 from "react";
+import React9 from "react";
 function useInView() {
-  const ref = React8.useRef(null);
-  const [isInView, setIsInView] = React8.useState(false);
-  React8.useEffect(() => {
+  const ref = React9.useRef(null);
+  const [isInView, setIsInView] = React9.useState(false);
+  React9.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1783,7 +1792,7 @@ function Spotlight({
 
 // src/components/animations/StaggerChildren.tsx
 import { animated as animated5, useSprings } from "@react-spring/web";
-import React9 from "react";
+import React10 from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function StaggerChildren({
   children,
@@ -1794,7 +1803,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = React9.Children.toArray(children);
+  const items = React10.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1815,14 +1824,14 @@ function StaggerChildren({
 }
 
 // src/components/animations/TypeWriter.tsx
-import React10 from "react";
+import React11 from "react";
 import { jsx as jsx26, jsxs as jsxs17 } from "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 (React10.isValidElement(node)) {
+  if (React11.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -1836,9 +1845,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = React10.useState("");
-  const [done, setDone] = React10.useState(false);
-  React10.useEffect(() => {
+  const [displayed, setDisplayed] = React11.useState("");
+  const [done, setDone] = React11.useState(false);
+  React11.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -1937,27 +1946,33 @@ function DocItem({ label, link }) {
 }
 
 // src/components/FilePane.tsx
-import React11 from "react";
+import React12 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function FilePane({
   name,
   children,
   priority,
+  minWidth,
   ...divProps
 }) {
-  return React11.isValidElement(children) ? React11.cloneElement(children, {
+  const content = React12.isValidElement(children) ? React12.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
   }) : children;
+  if (minWidth) {
+    return /* @__PURE__ */ jsx28("div", { ...divProps, style: { minWidth, ...divProps.style }, children: content });
+  }
+  return content;
 }
 FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
-import React12 from "react";
+import React13 from "react";
 import { Stepper as Stepper2 } from "spectacle";
 import styled15 from "styled-components";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var Container = styled15.div`
   display: grid;
   grid-gap: 2rem;
@@ -1966,18 +1981,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = React12.Children.toArray(children);
-  return /* @__PURE__ */ jsx28(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx28(
+  const items = React13.Children.toArray(children);
+  return /* @__PURE__ */ jsx29(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx29(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!React12.isValidElement(item)) {
+        if (!React13.isValidElement(item)) {
           return item;
         }
-        return React12.cloneElement(item, {
+        return React13.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -1988,7 +2003,7 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
@@ -2001,14 +2016,14 @@ function Pill({ position }) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx29(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx29(
               "text",
               {
                 x: "9",
@@ -2020,7 +2035,7 @@ function Pill({ position }) {
                 children: position
               }
             ),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx29(
               "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",
@@ -2076,16 +2091,16 @@ function HorizontalListItem({
   });
   return /* @__PURE__ */ jsxs19(Item, { style: opacityStyles, children: [
     /* @__PURE__ */ jsxs19(ItemHead, { children: [
-      /* @__PURE__ */ jsx28(Pill, { position }),
-      /* @__PURE__ */ jsx28("p", { children: title })
+      /* @__PURE__ */ jsx29(Pill, { position }),
+      /* @__PURE__ */ jsx29("p", { children: title })
     ] }),
-    /* @__PURE__ */ jsx28(ItemContent, { children })
+    /* @__PURE__ */ jsx29(ItemContent, { children })
   ] });
 }
 
 // src/components/IconBox.tsx
 import styled16 from "styled-components";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var IconBoxContent = styled16.div`
   * {
     margin: 0.2rem !important;
@@ -2106,8 +2121,8 @@ function IconBox({
         padding: "1rem 0"
       },
       children: [
-        /* @__PURE__ */ jsx29("div", { style: { fontSize: 60 }, children: icon }),
-        /* @__PURE__ */ jsx29(IconBoxContent, { children })
+        /* @__PURE__ */ jsx30("div", { style: { fontSize: 60 }, children: icon }),
+        /* @__PURE__ */ jsx30(IconBoxContent, { children })
       ]
     }
   );
@@ -2115,14 +2130,14 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 import { animated as animated7, useSpring as useSpring6 } from "@react-spring/web";
-import React13 from "react";
+import React14 from "react";
 import { Stepper as Stepper3 } from "spectacle";
 import styled17 from "styled-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = React13.Children.toArray(children);
-  return /* @__PURE__ */ jsx30(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx30(
+  const childrenArray = React14.Children.toArray(children);
+  return /* @__PURE__ */ jsx31(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx31(
     "div",
     {
       style: {
@@ -2137,10 +2152,10 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!React13.isValidElement(child)) {
+        if (!React14.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ jsx30(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ jsx31(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
@@ -2158,12 +2173,12 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = useSpring6({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ jsx30(ItemColumnWrapperStyled, { style: styles, ...props, children });
+  return /* @__PURE__ */ jsx31(ItemColumnWrapperStyled, { style: styles, ...props, children });
 }
 
 // src/components/Timeline.tsx
 import { animated as animated8, useSpring as useSpring7 } from "@react-spring/web";
-import React14 from "react";
+import React15 from "react";
 import { Stepper as Stepper4 } from "spectacle";
 import styled19 from "styled-components";
 
@@ -2191,7 +2206,7 @@ var TimelineItemTitle = styled18.div`
 `;
 
 // src/components/Timeline.tsx
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var TimelineItemStyled = styled19(animated8.div)`
   flex: 1;
   flex-flow: column nowrap;
@@ -2237,20 +2252,33 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = React14.Children.toArray(props.children);
-  return /* @__PURE__ */ jsx31(
+  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) => {
+      if (!React15.isValidElement(child)) {
+        return child;
+      }
+      return React15.cloneElement(child, {
+        // @ts-expect-error cloning
+        isPhantom: activeIndex < index,
+        isLast: activeIndex === index
+      });
+    }) });
+  }
+  return /* @__PURE__ */ jsx32(
     Stepper4,
     {
-      ...props,
+      ...rest,
       values: children,
       activeStyle: style,
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!React14.isValidElement(child)) {
+          if (!React15.isValidElement(child)) {
             return child;
           }
-          return React14.cloneElement(child, {
+          return React15.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2286,16 +2314,16 @@ function TimelineItem(props) {
       },
       children: [
         /* @__PURE__ */ jsxs21(TimelineItemContentPhantom, { children: [
-          /* @__PURE__ */ jsx31(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ jsx31(TimelineItemBody, { children })
+          /* @__PURE__ */ jsx32(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ jsx32(TimelineItemBody, { children })
         ] }),
         /* @__PURE__ */ jsxs21(TimelineItemGuide, { style: colorStyles, children: [
-          /* @__PURE__ */ jsx31(Hexagon, {}),
-          /* @__PURE__ */ jsx31(TimelineItemGuideLine, { style: guideLineProps })
+          /* @__PURE__ */ jsx32(Hexagon, {}),
+          /* @__PURE__ */ jsx32(TimelineItemGuideLine, { style: guideLineProps })
         ] }),
         /* @__PURE__ */ jsxs21(TimelineItemContent, { children: [
-          /* @__PURE__ */ jsx31(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ jsx31(TimelineItemBody, { children })
+          /* @__PURE__ */ jsx32(TimelineItemTitle, { children: title }),
+          /* @__PURE__ */ jsx32(TimelineItemBody, { children })
         ] })
       ]
     }
@@ -2311,14 +2339,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "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__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "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",
@@ -2331,9 +2359,9 @@ function Hexagon() {
 }
 
 // src/index.tsx
-import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function PassThrough({ children }) {
-  return /* @__PURE__ */ jsx32(Fragment3, { children });
+  return /* @__PURE__ */ jsx33(Fragment3, { children });
 }
 var layouts = layouts_default;
 var componentsMap2 = {
@@ -2346,10 +2374,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = React15.useMemo(() => {
+  const mergedTheme = React16.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2360,7 +2388,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = React15.useMemo(() => {
+  const GlobalStyle = React16.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return createGlobalStyle`
       :root {
@@ -2369,9 +2397,9 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ jsx32(React15.StrictMode, { children: /* @__PURE__ */ jsx32(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
-    /* @__PURE__ */ jsx32(GlobalStyle, {}),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(React16.StrictMode, { children: /* @__PURE__ */ jsx33(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
+    /* @__PURE__ */ jsx33(GlobalStyle, {}),
+    /* @__PURE__ */ jsx33(
       SpectacleDeck,
       {
         theme: mergedTheme,
@@ -2382,33 +2410,33 @@ function Deck({
           const Component = slide.slideComponent;
           const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
           const slideTransition2 = resolveTransition(slideTransitionName);
-          return /* @__PURE__ */ jsx32(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx32(Component, {}) }, i);
+          return /* @__PURE__ */ jsx33(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx33(Component, {}) }, i);
         })
       }
     )
   ] }) }) });
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ jsx32("div", { style: { color: "red" }, children });
+  return /* @__PURE__ */ jsx33("div", { style: { color: "red" }, children });
 }
 function Information({ children }) {
-  return /* @__PURE__ */ jsx32("div", { style: { color: "orange" }, children });
+  return /* @__PURE__ */ jsx33("div", { style: { color: "orange" }, children });
 }
 function Success({ children }) {
-  return /* @__PURE__ */ jsx32("div", { style: { color: "green" }, children });
+  return /* @__PURE__ */ jsx33("div", { style: { color: "green" }, children });
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ jsx32("div", { style: { color: "yellow" }, children });
+  return /* @__PURE__ */ jsx33("div", { style: { color: "yellow" }, children });
 }
 function Side({ children }) {
-  return /* @__PURE__ */ jsx32("div", { children });
+  return /* @__PURE__ */ jsx33("div", { children });
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ jsx32("div", { children });
+  return /* @__PURE__ */ jsx33("div", { children });
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ jsx32("div", { children });
+  return /* @__PURE__ */ jsx33("div", { children });
 }
 export {
   AnimatedCounter,

package/layouts/FullImageLayout.d.ts

@@ -1,7 +1,7 @@
-import type React from "react";
+import React from "react";
 export declare function FullImageLayout({ children, image, position, dim, }: {
     children: React.ReactNode;
-    image: string;
+    image?: string;
     position?: "center" | "bottom" | "top";
     dim?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/package.json

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