@gpichot/spectacle-deck 1.6.0 → 1.8.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

@@ -1096,7 +1096,10 @@ function FullImageLayout({
   children,
   image,
   position = "bottom",
-  dim = 0.4
+  dim = 0.4,
+  fit = "cover",
+  backgroundColor,
+  margin
 }) {
   const [images, rest] = getMatchingMdxType(children, "Image");
   const firstImage = images[0];
@@ -1121,8 +1124,11 @@ function FullImageLayout({
               position: "absolute",
               inset: 0,
               backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-              backgroundSize: "cover",
-              backgroundPosition: "center"
+              backgroundSize: fit,
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundColor,
+              margin
             }
           }
         ),
@@ -2002,17 +2008,23 @@ function DocItem({ label, link }) {
 
 // src/components/FilePane.tsx
 var import_react12 = __toESM(require("react"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function FilePane({
   name,
   children,
   priority,
+  minWidth,
   ...divProps
 }) {
-  return import_react12.default.isValidElement(children) ? import_react12.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";
 
@@ -2021,7 +2033,7 @@ var import_web6 = require("@react-spring/web");
 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;
@@ -2031,7 +2043,7 @@ function HorizontalList({
   columns = 3
 }) {
   const items = import_react13.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_spectacle8.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_spectacle8.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Container,
     {
       style: {
@@ -2052,11 +2064,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",
@@ -2065,14 +2077,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",
@@ -2084,7 +2096,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",
@@ -2138,18 +2150,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;
@@ -2160,7 +2172,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       style: {
@@ -2170,8 +2182,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 })
       ]
     }
   );
@@ -2182,11 +2194,11 @@ var import_web7 = require("@react-spring/web");
 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_react14.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_spectacle9.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       style: {
@@ -2204,7 +2216,7 @@ function ItemsColumn(divProps) {
         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);
       })
     }
   ) });
@@ -2222,7 +2234,7 @@ 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
@@ -2255,7 +2267,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;
@@ -2301,11 +2313,24 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = import_react15.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,
@@ -2341,7 +2366,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,
@@ -2349,24 +2374,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",
@@ -2375,14 +2400,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",
@@ -2395,9 +2420,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 = {
@@ -2433,9 +2458,9 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react17.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react16.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,
@@ -2446,33 +2471,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

@@ -1038,7 +1038,10 @@ function FullImageLayout({
   children,
   image,
   position = "bottom",
-  dim = 0.4
+  dim = 0.4,
+  fit = "cover",
+  backgroundColor,
+  margin
 }) {
   const [images, rest] = getMatchingMdxType(children, "Image");
   const firstImage = images[0];
@@ -1063,8 +1066,11 @@ function FullImageLayout({
               position: "absolute",
               inset: 0,
               backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-              backgroundSize: "cover",
-              backgroundPosition: "center"
+              backgroundSize: fit,
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundColor,
+              margin
             }
           }
         ),
@@ -1947,17 +1953,23 @@ function DocItem({ label, link }) {
 
 // src/components/FilePane.tsx
 import React12 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function FilePane({
   name,
   children,
   priority,
+  minWidth,
   ...divProps
 }) {
-  return React12.isValidElement(children) ? React12.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";
 
@@ -1966,7 +1978,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 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;
@@ -1976,7 +1988,7 @@ function HorizontalList({
   columns = 3
 }) {
   const items = React13.Children.toArray(children);
-  return /* @__PURE__ */ jsx28(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx29(
     Container,
     {
       style: {
@@ -1997,7 +2009,7 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
@@ -2010,14 +2022,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",
@@ -2029,7 +2041,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",
@@ -2085,16 +2097,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;
@@ -2115,8 +2127,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 })
       ]
     }
   );
@@ -2127,11 +2139,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 jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
   const childrenArray = React14.Children.toArray(children);
-  return /* @__PURE__ */ jsx30(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx31(
     "div",
     {
       style: {
@@ -2149,7 +2161,7 @@ function ItemsColumn(divProps) {
         if (!React14.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ jsx30(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ jsx31(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
@@ -2167,7 +2179,7 @@ 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
@@ -2200,7 +2212,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;
@@ -2246,11 +2258,24 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = React15.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,
@@ -2295,16 +2320,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 })
         ] })
       ]
     }
@@ -2320,14 +2345,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",
@@ -2340,9 +2365,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 = {
@@ -2378,9 +2403,9 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ jsx32(React16.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,
@@ -2391,33 +2416,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,10 @@
 import React from "react";
-export declare function FullImageLayout({ children, image, position, dim, }: {
+export declare function FullImageLayout({ children, image, position, dim, fit, backgroundColor, margin, }: {
     children: React.ReactNode;
     image?: string;
     position?: "center" | "bottom" | "top";
     dim?: number;
+    fit?: "cover" | "contain";
+    backgroundColor?: string;
+    margin?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/package.json

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