@gpichot/spectacle-deck 1.4.0 → 1.6.0

package/index.cjs

@@ -29,12 +29,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  AnimatedCounter: () => AnimatedCounter,
   Box: () => Box2,
   Danger: () => Danger,
   Deck: () => Deck,
   Doc: () => Doc,
   DocItem: () => DocItem,
   Documentation: () => Documentation,
+  FadeIn: () => FadeIn,
   FilePane: () => FilePane,
   HorizontalList: () => HorizontalList,
   HorizontalListItem: () => HorizontalListItem,
@@ -44,17 +46,25 @@ __export(src_exports, {
   ItemsColumn: () => ItemsColumn,
   Mermaid: () => Mermaid,
   PassThrough: () => PassThrough,
+  ProgressRing: () => ProgressRing,
+  ScaleIn: () => ScaleIn,
   Side: () => Side,
+  Spotlight: () => Spotlight,
+  StaggerChildren: () => StaggerChildren,
   Success: () => Success,
   Timeline: () => Timeline,
   TimelineItem: () => TimelineItem,
+  TypeWriter: () => TypeWriter,
   Warning: () => Warning,
-  layouts: () => layouts
+  dropTransition: () => dropTransition,
+  layouts: () => layouts,
+  noneTransition: () => noneTransition,
+  resolveTransition: () => resolveTransition
 });
-var import_react12 = require("@mdx-js/react");
-var import_react13 = __toESM(require("react"));
-var import_spectacle10 = require("spectacle");
-var import_styled_components19 = require("styled-components");
+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");
 
 // src/colors.ts
 function extractColors(color) {
@@ -518,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;
@@ -1056,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`
@@ -1082,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",
@@ -1101,7 +1120,7 @@ function FullImageLayout({
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${image})`,
+              backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
               backgroundSize: "cover",
               backgroundPosition: "center"
             }
@@ -1117,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 })
       ]
     }
   );
@@ -1271,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`
@@ -1297,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,
     {
@@ -1596,13 +1615,332 @@ var theme_default = {
   space: [8, 16, 24]
 };
 
+// src/transitions.ts
+var import_spectacle7 = require("spectacle");
+var dropTransition = {
+  from: { transform: "translateY(-100%)", opacity: 0 },
+  enter: { transform: "translateY(0%)", opacity: 1 },
+  leave: { transform: "translateY(100%)", opacity: 0 }
+};
+var noneTransition = {
+  from: { opacity: 1 },
+  enter: { opacity: 1 },
+  leave: { opacity: 0 }
+};
+var transitionMap = {
+  fade: import_spectacle7.fadeTransition,
+  slide: import_spectacle7.slideTransition,
+  drop: dropTransition,
+  none: noneTransition
+};
+function resolveTransition(name) {
+  if (!name) return void 0;
+  return transitionMap[name];
+}
+
 // src/index.tsx
 __reExport(src_exports, require("spectacle"));
 
-// src/components/DocumentationItem.tsx
-var import_styled_components13 = __toESM(require("styled-components"));
+// src/components/animations/AnimatedCounter.tsx
+var import_web = require("@react-spring/web");
+
+// src/components/animations/useInView.ts
+var import_react9 = __toESM(require("react"));
+function useInView() {
+  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(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, isInView];
+}
+
+// src/components/animations/AnimatedCounter.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var DocWrapper = import_styled_components13.default.div`
+function AnimatedCounter({
+  to,
+  from = 0,
+  duration = 1500,
+  delay = 0,
+  decimals = 0,
+  prefix = "",
+  suffix = ""
+}) {
+  const [ref, isInView] = useInView();
+  const { value } = (0, import_web.useSpring)({
+    value: isInView ? to : from,
+    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}`) });
+}
+
+// src/components/animations/FadeIn.tsx
+var import_web2 = require("@react-spring/web");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function FadeIn({
+  children,
+  direction = "up",
+  distance = 20,
+  delay = 0,
+  duration = 400
+}) {
+  const [ref, isInView] = useInView();
+  const translateMap = {
+    up: `translateY(${distance}px)`,
+    down: `translateY(-${distance}px)`,
+    left: `translateX(${distance}px)`,
+    right: `translateX(-${distance}px)`,
+    none: "translate(0, 0)"
+  };
+  const styles = (0, import_web2.useSpring)({
+    opacity: isInView ? 1 : 0,
+    transform: isInView ? "translate(0, 0)" : translateMap[direction],
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.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");
+function ProgressRing({
+  value,
+  size = 120,
+  strokeWidth = 8,
+  color = "var(--color-secondary)",
+  trackColor = "rgba(255,255,255,0.1)",
+  duration = 1e3,
+  delay = 0,
+  children
+}) {
+  const [ref, isInView] = useInView();
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const targetOffset = circumference - value / 100 * circumference;
+  const { offset } = (0, import_web3.useSpring)({
+    offset: isInView ? targetOffset : circumference,
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "svg",
+          {
+            width: size,
+            height: size,
+            style: { position: "absolute", transform: "rotate(-90deg)" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  stroke: trackColor,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_web3.animated.circle,
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 1,
+              fontFamily: "var(--font-family)"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/animations/ScaleIn.tsx
+var import_web4 = require("@react-spring/web");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ScaleIn({
+  children,
+  from = 0,
+  delay = 0,
+  duration = 400
+}) {
+  const [ref, isInView] = useInView();
+  const styles = (0, import_web4.useSpring)({
+    opacity: isInView ? 1 : 0,
+    transform: isInView ? "scale(1)" : `scale(${from})`,
+    delay: isInView ? delay : 0,
+    config: { duration }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.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 Overlay2 = import_styled_components13.default.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, ${(p) => p.$active ? p.$dimOpacity : 0});
+  pointer-events: ${(p) => p.$active ? "auto" : "none"};
+  transition: background 0.4s ease;
+  z-index: 99;
+`;
+var Content = import_styled_components13.default.div`
+  position: relative;
+  z-index: ${(p) => p.$active ? 100 : "auto"};
+`;
+function Spotlight({
+  children,
+  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 })
+  ] });
+}
+
+// src/components/animations/StaggerChildren.tsx
+var import_web5 = require("@react-spring/web");
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function StaggerChildren({
+  children,
+  stagger = 100,
+  delay = 0,
+  duration = 400,
+  direction = "up",
+  distance = 20
+}) {
+  const [ref, isInView] = useInView();
+  const items = import_react10.default.Children.toArray(children);
+  const translateMap = {
+    up: `translateY(${distance}px)`,
+    down: `translateY(-${distance}px)`,
+    left: `translateX(${distance}px)`,
+    right: `translateX(-${distance}px)`,
+    none: "translate(0, 0)"
+  };
+  const springs = (0, import_web5.useSprings)(
+    items.length,
+    items.map((_, i) => ({
+      opacity: isInView ? 1 : 0,
+      transform: isInView ? "translate(0, 0)" : translateMap[direction],
+      delay: isInView ? delay + i * stagger : 0,
+      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)) });
+}
+
+// src/components/animations/TypeWriter.tsx
+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_react11.default.isValidElement(node)) {
+    const props = node.props;
+    return extractText(props.children);
+  }
+  return "";
+}
+function TypeWriter({
+  children,
+  speed = 50,
+  delay = 0,
+  cursor = true
+}) {
+  const text = extractText(children);
+  const [ref, isInView] = useInView();
+  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("");
+    setDone(false);
+    const timeout = setTimeout(() => {
+      const interval = setInterval(() => {
+        if (index < text.length) {
+          setDisplayed(text.slice(0, index + 1));
+          index++;
+        } else {
+          setDone(true);
+          clearInterval(interval);
+        }
+      }, speed);
+      return () => clearInterval(interval);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [text, speed, delay, isInView]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { ref, style: { fontFamily: "var(--font-family)" }, children: [
+    displayed,
+    cursor && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "span",
+      {
+        style: {
+          borderRight: "2px solid currentColor",
+          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; } }` })
+      }
+    )
+  ] });
+}
+
+// src/components/DocumentationItem.tsx
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var DocWrapper = import_styled_components14.default.div`
   position: absolute;
   bottom: 0;
   right: 0;
@@ -1616,20 +1954,20 @@ var DocWrapper = import_styled_components13.default.div`
     display: flex;
   }
 `;
-var DocContainer = import_styled_components13.default.div`
+var DocContainer = import_styled_components14.default.div`
   margin: 2rem 1rem;
   background-color: #333;
   border: 1px solid #333;
   padding: 0.5rem 1rem;
   border-radius: 1.5rem;
 `;
-var DocLink = import_styled_components13.default.a`
+var DocLink = import_styled_components14.default.a`
   text-decoration: none;
   font-weight: normal;
   font-family: var(--font-family);
   color: var(--color-secondary);
 `;
-var DocLinkItem = (0, import_styled_components13.default)(DocLink)`
+var DocLinkItem = (0, import_styled_components14.default)(DocLink)`
   width: fit-content;
   display: inline-block;
   background-color: #333;
@@ -1638,7 +1976,7 @@ var DocLinkItem = (0, import_styled_components13.default)(DocLink)`
   border-radius: 1.5rem;
   margin: 0.25rem 0;
 `;
-var DocContent = import_styled_components13.default.div`
+var DocContent = import_styled_components14.default.div`
   display: flex;
   flex-flow: column-reverse nowrap;
   position: absolute;
@@ -1653,24 +1991,24 @@ function Doc({
   link,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DocWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DocContainer, { children: [
-    children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DocContent, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link, children: label }) })
+  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 }) })
   ] }) });
 }
 function DocItem({ label, link }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link, children: label });
 }
 
 // src/components/FilePane.tsx
-var import_react8 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return import_react8.default.isValidElement(children) ? import_react8.default.cloneElement(children, {
+  return import_react12.default.isValidElement(children) ? import_react12.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -1679,12 +2017,12 @@ function FilePane({
 FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
-var import_web = require("@react-spring/web");
-var import_react9 = __toESM(require("react"));
-var import_spectacle7 = require("spectacle");
-var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Container = import_styled_components14.default.div`
+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 Container = import_styled_components15.default.div`
   display: grid;
   grid-gap: 2rem;
 `;
@@ -1692,18 +2030,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react9.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_spectacle7.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  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)(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!import_react9.default.isValidElement(item)) {
+        if (!import_react13.default.isValidElement(item)) {
           return item;
         }
-        return import_react9.default.cloneElement(item, {
+        return import_react13.default.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -1714,11 +2052,11 @@ function HorizontalList({
   ) });
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "svg",
         {
           width: "48",
@@ -1727,14 +2065,14 @@ function Pill({ position }) {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "text",
               {
                 x: "9",
@@ -1746,7 +2084,7 @@ function Pill({ position }) {
                 children: position
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.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",
@@ -1759,12 +2097,12 @@ function Pill({ position }) {
     }
   );
 }
-var Item = (0, import_styled_components14.default)(import_web.animated.div)`
+var Item = (0, import_styled_components15.default)(import_web6.animated.div)`
   display: flex;
   flex-direction: column;
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 `;
-var ItemHead = import_styled_components14.default.div`
+var ItemHead = import_styled_components15.default.div`
   display: flex;
   flex-direction: row;
   font-size: 1.3rem;
@@ -1774,7 +2112,7 @@ var ItemHead = import_styled_components14.default.div`
     margin: 0;
   }
 `;
-var ItemContent = import_styled_components14.default.div`
+var ItemContent = import_styled_components15.default.div`
   > * {
     font-size: 1rem;
     padding: 4px !important;
@@ -1797,22 +2135,22 @@ function HorizontalListItem({
   isVisible,
   isLast
 }) {
-  const opacityStyles = (0, import_web.useSpring)({
+  const opacityStyles = (0, import_web6.useSpring)({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Item, { style: opacityStyles, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ItemHead, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Pill, { position }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: title })
+  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 })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemContent, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemContent, { children })
   ] });
 }
 
 // src/components/IconBox.tsx
-var import_styled_components15 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var IconBoxContent = import_styled_components15.default.div`
+var import_styled_components16 = __toESM(require("styled-components"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var IconBoxContent = import_styled_components16.default.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;
@@ -1822,7 +2160,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       style: {
@@ -1832,23 +2170,23 @@ function IconBox({
         padding: "1rem 0"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { fontSize: 60 }, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconBoxContent, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { fontSize: 60 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconBoxContent, { children })
       ]
     }
   );
 }
 
 // src/components/ItemsColumn.tsx
-var import_web2 = require("@react-spring/web");
-var import_react10 = __toESM(require("react"));
-var import_spectacle8 = require("spectacle");
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+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");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react10.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_spectacle8.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  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)(
     "div",
     {
       style: {
@@ -1863,15 +2201,15 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!import_react10.default.isValidElement(child)) {
+        if (!import_react14.default.isValidElement(child)) {
           return child;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
       })
     }
   ) });
 }
-var ItemColumnWrapperStyled = (0, import_styled_components16.default)(import_web2.animated.div)`
+var ItemColumnWrapperStyled = (0, import_styled_components17.default)(import_web7.animated.div)`
   display: flex;
   justify-content: center;
   * {
@@ -1883,33 +2221,33 @@ function ItemColumnWrapper({
   isVisible,
   ...props
 }) {
-  const styles = (0, import_web2.useSpring)({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemColumnWrapperStyled, { style: styles, ...props, children });
+  const styles = (0, import_web7.useSpring)({ opacity: isVisible ? 1 : 0 });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ItemColumnWrapperStyled, { style: styles, ...props, children });
 }
 
 // src/components/Timeline.tsx
-var import_web3 = require("@react-spring/web");
-var import_react11 = __toESM(require("react"));
-var import_spectacle9 = require("spectacle");
-var import_styled_components18 = __toESM(require("styled-components"));
+var import_web8 = require("@react-spring/web");
+var import_react15 = __toESM(require("react"));
+var import_spectacle10 = require("spectacle");
+var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/Timeline.styled.tsx
-var import_styled_components17 = __toESM(require("styled-components"));
-var TimelineItemContent = import_styled_components17.default.div`
+var import_styled_components18 = __toESM(require("styled-components"));
+var TimelineItemContent = import_styled_components18.default.div`
   display: flex;
   padding: 0.7rem 0 1rem 12px;
 `;
-var TimelineItemContentPhantom = (0, import_styled_components17.default)(TimelineItemContent)`
+var TimelineItemContentPhantom = (0, import_styled_components18.default)(TimelineItemContent)`
   opacity: 0;
 `;
-var TimelineItemBody = import_styled_components17.default.div`
+var TimelineItemBody = import_styled_components18.default.div`
   &,
   & > * {
     font-size: 1.3rem !important;
     color: #ffffff !important;
   }
 `;
-var TimelineItemTitle = import_styled_components17.default.div`
+var TimelineItemTitle = import_styled_components18.default.div`
   font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-weight: bold;
@@ -1917,8 +2255,8 @@ var TimelineItemTitle = import_styled_components17.default.div`
 `;
 
 // src/components/Timeline.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var TimelineItemStyled = (0, import_styled_components18.default)(import_web3.animated.div)`
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var TimelineItemStyled = (0, import_styled_components19.default)(import_web8.animated.div)`
   flex: 1;
   flex-flow: column nowrap;
   display: inline-flex;
@@ -1936,7 +2274,7 @@ var TimelineItemStyled = (0, import_styled_components18.default)(import_web3.ani
     }
   }
 `;
-var TimelineItemGuide = (0, import_styled_components18.default)(import_web3.animated.div)`
+var TimelineItemGuide = (0, import_styled_components19.default)(import_web8.animated.div)`
   width: 100%;
   padding-top: 2px;
   display: flex;
@@ -1952,7 +2290,7 @@ var TimelineItemGuide = (0, import_styled_components18.default)(import_web3.anim
     margin-right: 4px;
   }
 `;
-var TimelineItemGuideLine = (0, import_styled_components18.default)(import_web3.animated.div)`
+var TimelineItemGuideLine = (0, import_styled_components19.default)(import_web8.animated.div)`
   border-top: 4px solid #ffffff;
   margin-right: 4px;
 `;
@@ -1963,9 +2301,9 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = import_react11.default.Children.toArray(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_spectacle9.Stepper,
+  const children = import_react15.default.Children.toArray(props.children);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_spectacle10.Stepper,
     {
       ...props,
       values: children,
@@ -1973,10 +2311,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!import_react11.default.isValidElement(child)) {
+          if (!import_react15.default.isValidElement(child)) {
             return child;
           }
-          return import_react11.default.cloneElement(child, {
+          return import_react15.default.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -1996,14 +2334,14 @@ function getItemOpacity2({
 }
 function TimelineItem(props) {
   const { children, title, isPhantom, isLast, ...rest } = props;
-  const guideLineProps = (0, import_web3.useSpring)({
+  const guideLineProps = (0, import_web8.useSpring)({
     width: isPhantom || isLast ? "0%" : "100%"
   });
-  const appearStyles = (0, import_web3.useSpring)({
+  const appearStyles = (0, import_web8.useSpring)({
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
-  const colorStyles = (0, import_web3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  const colorStyles = (0, import_web8.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     TimelineItemStyled,
     {
       ...rest,
@@ -2011,24 +2349,24 @@ function TimelineItem(props) {
         ...appearStyles
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TimelineItemContentPhantom, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineItemBody, { 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_runtime24.jsxs)(TimelineItemGuide, { style: colorStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Hexagon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineItemGuideLine, { style: guideLineProps })
+        /* @__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_runtime24.jsxs)(TimelineItemContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineItemTitle, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimelineItemBody, { children })
+        /* @__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 })
         ] })
       ]
     }
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "svg",
     {
       width: "18",
@@ -2037,14 +2375,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.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",
@@ -2057,9 +2395,9 @@ function Hexagon() {
 }
 
 // src/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function PassThrough({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
 }
 var layouts = layouts_default;
 var componentsMap2 = {
@@ -2069,12 +2407,13 @@ var componentsMap2 = {
 function Deck({
   deck,
   theme,
-  layouts: layouts2 = layouts_default
+  layouts: layouts2 = layouts_default,
+  transition
 }) {
-  import_react13.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = import_react13.default.useMemo(() => {
+  const mergedTheme = import_react17.default.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2085,44 +2424,55 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = import_react13.default.useMemo(() => {
+  const GlobalStyle = import_react17.default.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
-    return import_styled_components19.createGlobalStyle`
+    return import_styled_components20.createGlobalStyle`
       :root {
         ${cssVariables}
         --font-family: ${mergedTheme.fonts.text}
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react13.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react12.MDXProvider, { components: componentsMap2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GlobalStyle, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_spectacle10.Deck, { theme: mergedTheme, template, children: deck.slides.map((slide, i) => {
-      const Component = slide.slideComponent;
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_spectacle10.Slide, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, {}) }, i);
-    }) })
+  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)(
+      import_spectacle11.Deck,
+      {
+        theme: mergedTheme,
+        template,
+        transition: resolveTransition(transition),
+        children: 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_runtime32.jsx)(import_spectacle11.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Component, {}) }, i);
+        })
+      }
+    )
   ] }) }) });
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { color: "red" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "red" }, children });
 }
 function Information({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { color: "orange" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "orange" }, children });
 }
 function Success({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { color: "green" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "green" }, children });
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { color: "yellow" }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { color: "yellow" }, children });
 }
 function Side({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children });
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children });
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children });
 }
 
 // <stdin>