@gpichot/spectacle-deck 1.1.6 → 1.2.0

package/index.cjs

@@ -42,17 +42,17 @@ __export(src_exports, {
   Image: () => Image,
   Information: () => Information,
   ItemsColumn: () => ItemsColumn,
-  Layout: () => Layout,
   PassThrough: () => PassThrough,
   Side: () => Side,
   Success: () => Success,
   Timeline: () => Timeline,
   TimelineItem: () => TimelineItem,
-  Warning: () => Warning
+  Warning: () => Warning,
+  layouts: () => layouts
 });
-var import_react21 = __toESM(require("react"));
-var import_react22 = require("@mdx-js/react");
-var import_spectacle9 = require("spectacle");
+var import_react24 = __toESM(require("react"));
+var import_react25 = require("@mdx-js/react");
+var import_spectacle10 = require("spectacle");
 
 // src/layouts/CenteredLayout.tsx
 var import_react2 = __toESM(require("react"));
@@ -67,11 +67,9 @@ var Margins = {
 };
 function getHeading(children) {
   const allChild = import_react.default.Children.toArray(children);
-  if (allChild.length === 0)
-    return [null, allChild];
+  if (allChild.length === 0) return [null, allChild];
   const [candidate, ...rest] = allChild;
-  if (!import_react.default.isValidElement(candidate))
-    return [null, allChild];
+  if (!import_react.default.isValidElement(candidate)) return [null, allChild];
   if (["h2", "h3"].includes(candidate.props.originalType)) {
     return [candidate, rest];
   }
@@ -79,15 +77,12 @@ function getHeading(children) {
 }
 function getCode(children) {
   const allChild = import_react.default.Children.toArray(children);
-  if (allChild.length === 0)
-    return [null, allChild];
+  if (allChild.length === 0) return [null, allChild];
   const index = allChild.findIndex((child) => {
-    if (!import_react.default.isValidElement(child))
-      return false;
+    if (!import_react.default.isValidElement(child)) return false;
     return child.props.originalType === "pre";
   });
-  if (index === -1)
-    return [null, allChild];
+  if (index === -1) return [null, allChild];
   const candidate = allChild[index];
   const rest = allChild.filter((_, i) => i !== index);
   return [candidate, rest];
@@ -95,14 +90,10 @@ function getCode(children) {
 function getMatchingMdxType(children, mdxType) {
   const allChild = import_react.default.Children.toArray(children);
   const matchFn = (child) => {
-    if (!import_react.default.isValidElement(child))
-      return false;
-    if (typeof child.type !== "function")
-      return false;
-    if (child.type.name === mdxType)
-      return true;
-    if ("mdxType" in child.type === false)
-      return false;
+    if (!import_react.default.isValidElement(child)) return false;
+    if (typeof child.type !== "function") return false;
+    if (child.type.name === mdxType) return true;
+    if ("mdxType" in child.type === false) return false;
     return child.type.mdxType === mdxType;
   };
   const matches = allChild.filter(matchFn);
@@ -111,11 +102,9 @@ function getMatchingMdxType(children, mdxType) {
 }
 function getCodeChildren(children) {
   const [code, rest] = getCode(children);
-  if (code)
-    return [code, rest];
+  if (code) return [code, rest];
   const [codeStepper, rest2] = getMatchingMdxType(children, "CodeStepper");
-  if (codeStepper.length > 0)
-    return [codeStepper, rest2];
+  if (codeStepper.length > 0) return [codeStepper, rest2];
   const [codes, rest3] = getMatchingMdxType(children, "FilePane");
   return [codes, rest3];
 }
@@ -672,14 +661,20 @@ var DivWithHeading2 = import_styled_components8.default.div`
     font-weight: 400;
   }
 `;
+function parseRatio(ratio) {
+  const [a, b] = ratio.split("/");
+  return { left: parseInt(a), right: parseInt(b) };
+}
 var SidedImageLayout = ({
   children,
   image,
   position,
-  height
+  height,
+  ratio: ratioProp
 }) => {
   const isReversed = position === "left";
   const [component, rest] = getMatchingMdxType(children, "Image") || image;
+  const ratio = parseRatio(ratioProp || "6/4");
   if (!image && !component.length) {
     console.error("No image provided for SidedImageLayout");
     return null;
@@ -701,7 +696,7 @@ var SidedImageLayout = ({
       "div",
       {
         style: {
-          flex: "6 0",
+          flex: `${ratio.left || 6} 0`,
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
@@ -714,7 +709,7 @@ var SidedImageLayout = ({
       "div",
       {
         style: {
-          flex: "4 0",
+          flex: `${ratio.right || 4} 0`,
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
@@ -769,9 +764,12 @@ var import__3 = require("@fontsource/bitter/500.css");
 var import__4 = require("@fontsource/bitter/700.css");
 var theme_default = {
   colors: {
-    primary: "white",
-    secondary: "#F49676",
-    tertiary: "#042F3B"
+    //primary: "white",
+    primary: "rgb(43,19,90)",
+    secondary: "rgb(86,212,248)",
+    // secondary: "#F49676",
+    // tertiary: "#042F3B",
+    tertiary: "rgb(43,19,90)"
   },
   fonts: {
     header: 'Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif',
@@ -806,8 +804,8 @@ var template = ({ slideNumber, numberOfSlides }) => {
 };
 
 // src/components/map.tsx
-var import_react14 = __toESM(require("react"));
-var import_spectacle5 = require("spectacle");
+var import_react15 = __toESM(require("react"));
+var import_spectacle6 = require("spectacle");
 
 // src/components/styled.tsx
 var import_react12 = __toESM(require("react"));
@@ -821,7 +819,7 @@ var StyledImage = (0, import_styled_components9.default)(import_spectacle3.Image
 var Image2 = (props) => /* @__PURE__ */ import_react12.default.createElement(import_spectacle3.FlexBox, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ import_react12.default.createElement(StyledImage, { ...props }));
 var CustomHeading = (0, import_styled_components9.default)(import_spectacle3.Heading)`
   strong {
-    color: #f49676;
+    color: var(--color-secondary);
     font-weight: 500;
   }
 `;
@@ -857,7 +855,7 @@ var HeadingThree = import_styled_components9.default.h3`
   margin-top: 0;
 
   strong {
-    color: #f49676;
+    color: var(--color-secondary);
     font-weight: 500;
   }
 `;
@@ -876,30 +874,26 @@ function range(start, end) {
 }
 function parseRangeList(str) {
   return str.split(",").reduce((acc, line) => {
-    if (!line.includes("-"))
-      return [...acc, parseInt(line, 10)];
+    if (!line.includes("-")) return [...acc, parseInt(line, 10)];
     const [start, end] = line.split("-").map(Number);
     return [...acc, ...range(start, end)];
   }, []);
 }
 function parseShowLines(directive) {
   const match = directive.match(/showLines\((.*)\)/);
-  if (!match)
-    return null;
+  if (!match) return null;
   const lines = parseRangeList(match[1]);
   return { showLines: lines };
 }
 function parseHighlight(directive) {
   const match = directive.match(/highlight\((.*)\)/);
-  if (!match)
-    return null;
+  if (!match) return null;
   const lines = parseRangeList(match[1]);
   return { highlight: lines };
 }
 function parseName(directive) {
   const match = directive.match(/name\("(.*)"\)/);
-  if (!match)
-    return null;
+  if (!match) return null;
   return { name: match[1] };
 }
 function parseStepDirective(directive) {
@@ -912,8 +906,7 @@ function parseStepDirective(directive) {
 }
 function combineStepDirectives(directives) {
   let hiddenLines = directives.reduce((acc, { showLines }) => {
-    if (!showLines)
-      return acc;
+    if (!showLines) return acc;
     return [...acc, ...showLines];
   }, []);
   return directives.map(({ highlight, showLines, name }) => {
@@ -945,11 +938,11 @@ var CodeContainer = import_styled_components10.default.div`
     &:before {
       content: " ";
       position: absolute;
-      background-color: #f4967688;
+      background-color: rgba(var(--color-primary-rgb), 0.5);
     }
 
     &[data-step-active="true"]:before {
-      background-color: #f49676;
+      background-color: var(--color-secondary);
     }
   }
 `;
@@ -1061,64 +1054,114 @@ function CodeStepper({
       alwaysVisible: !hasSteps,
       priority: priority ? priority + 1 : void 0
     },
-    (step, _, isActive) => /* @__PURE__ */ import_react13.default.createElement(
-      CodeWrapper,
-      {
-        name,
-        stepName: step == null ? void 0 : step.name,
-        hasName
-      },
-      /* @__PURE__ */ import_react13.default.createElement(
-        Highlighter,
+    (step, _, isActive) => {
+      console.log({ step, isActive });
+      return /* @__PURE__ */ import_react13.default.createElement(
+        CodeWrapper,
         {
-          language,
-          wrapLines: true,
-          showLineNumbers: true,
-          style: import_prism.gruvboxDark,
-          lineNumberStyle: (lineNumber) => {
-            const { highlight = [] } = step || {};
-            const isHighlighted = highlight.includes(lineNumber);
-            return {
-              fontWeight: isHighlighted ? "bold" : "normal"
-            };
-          },
-          lineProps: (lineNumber) => {
-            const { hiddenLines = [], highlight = [] } = step || {};
-            const isVisible = hasSteps && isActive ? !hiddenLines.includes(lineNumber) : isActive || !hasSteps;
-            const isHighlighted = highlight.includes(lineNumber);
-            const getOpacity = () => {
-              if (!isVisible)
-                return 0;
-              if (isHighlighted || !highlight.length)
-                return 1;
-              return 0.8;
-            };
-            return {
-              ...isHighlighted && {
-                "data-highlight-line": isHighlighted,
-                "data-step-active": isActive
-              },
-              style: {
-                opacity: getOpacity(),
-                transition: "all 0.3s ease",
-                display: "block",
-                width: "100%",
-                backgroundColor: isHighlighted ? "#f4967622" : ""
-              }
-            };
-          }
+          name,
+          stepName: step == null ? void 0 : step.name,
+          hasName
         },
-        codeNormalized
-      )
-    )
+        /* @__PURE__ */ import_react13.default.createElement(
+          Highlighter,
+          {
+            language,
+            wrapLines: true,
+            showLineNumbers: true,
+            style: import_prism.gruvboxDark,
+            lineNumberStyle: (lineNumber) => {
+              const { highlight = [] } = step || {};
+              const isHighlighted = highlight.includes(lineNumber);
+              return {
+                fontWeight: isHighlighted ? "bold" : "normal"
+              };
+            },
+            lineProps: (lineNumber) => {
+              const { hiddenLines = [], highlight = [] } = step || {};
+              const isVisible = hasSteps && isActive ? !hiddenLines.includes(lineNumber) : isActive || !hasSteps;
+              const isHighlighted = highlight.includes(lineNumber);
+              const getOpacity = () => {
+                if (!isVisible) return 0;
+                if (isHighlighted || !highlight.length) return 1;
+                return 0.8;
+              };
+              return {
+                ...isHighlighted && {
+                  "data-highlight-line": isHighlighted,
+                  "data-step-active": isActive
+                },
+                style: {
+                  opacity: getOpacity(),
+                  transition: "all 0.3s ease",
+                  display: "block",
+                  width: "100%",
+                  backgroundColor: isHighlighted ? "rgba(var(--color-secondary-rgb), 0.13)" : ""
+                }
+              };
+            }
+          },
+          codeNormalized
+        )
+      );
+    }
   ));
 }
 CodeStepper.mdxType = "CodeStepper";
 
+// src/components/QRCode.tsx
+var import_qr_creator = __toESM(require("qr-creator"));
+var import_react14 = __toESM(require("react"));
+var import_spectacle5 = require("spectacle");
+var MapSize = {
+  xs: 64,
+  sm: 128,
+  md: 256,
+  lg: 512
+};
+function QRCode({ url, size = "md" }) {
+  var _a, _b;
+  const id = import_react14.default.useId().replace(/:/g, "___");
+  const deck = (0, import_react14.useContext)(import_spectacle5.DeckContext);
+  const width = MapSize[size];
+  const backgroundColor = ((_b = (_a = deck.theme) == null ? void 0 : _a.colors) == null ? void 0 : _b.primary) || "#ffffff";
+  import_react14.default.useEffect(() => {
+    var _a2, _b2;
+    const element = document.querySelector(`#${id}`);
+    if (!element) return console.error("QRCode element not mounted");
+    import_qr_creator.default.render(
+      {
+        text: url,
+        radius: 0.5,
+        ecLevel: "H",
+        // L, M, Q, H
+        fill: ((_b2 = (_a2 = deck.theme) == null ? void 0 : _a2.colors) == null ? void 0 : _b2.secondary) || "#000000",
+        background: backgroundColor,
+        size: width
+      },
+      element
+    );
+    return () => {
+      element.replaceChildren();
+    };
+  }, [url]);
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      id,
+      style: {
+        padding: "1rem 1rem 0.6rem 1rem",
+        borderRadius: "1rem",
+        backgroundColor
+      }
+    }
+  );
+}
+
 // src/components/map.tsx
 var componentsMap = {
-  ...import_spectacle5.mdxComponentMap,
-  inlineCode: (props) => /* @__PURE__ */ import_react14.default.createElement(
+  ...import_spectacle6.mdxComponentMap,
+  inlineCode: (props) => /* @__PURE__ */ import_react15.default.createElement(
     InlineCode,
     {
       ...props,
@@ -1128,7 +1171,7 @@ var componentsMap = {
       }
     }
   ),
-  table: (props) => /* @__PURE__ */ import_react14.default.createElement(
+  table: (props) => /* @__PURE__ */ import_react15.default.createElement(
     "table",
     {
       ...props,
@@ -1139,7 +1182,7 @@ var componentsMap = {
       }
     }
   ),
-  tr: (props) => /* @__PURE__ */ import_react14.default.createElement(
+  tr: (props) => /* @__PURE__ */ import_react15.default.createElement(
     "tr",
     {
       ...props,
@@ -1151,7 +1194,7 @@ var componentsMap = {
       }
     }
   ),
-  td: (props) => /* @__PURE__ */ import_react14.default.createElement(
+  td: (props) => /* @__PURE__ */ import_react15.default.createElement(
     "td",
     {
       ...props,
@@ -1164,7 +1207,7 @@ var componentsMap = {
       }
     }
   ),
-  h1: (props) => /* @__PURE__ */ import_react14.default.createElement(
+  h1: (props) => /* @__PURE__ */ import_react15.default.createElement(
     CustomHeading,
     {
       fontSize: "h1",
@@ -1180,15 +1223,15 @@ var componentsMap = {
     },
     props.children
   ),
-  h2: (props) => /* @__PURE__ */ import_react14.default.createElement(HeadingTwo, null, props.children),
-  h3: (props) => /* @__PURE__ */ import_react14.default.createElement(HeadingThree, { ...props }),
-  img: (props) => /* @__PURE__ */ import_react14.default.createElement(Image2, { ...props }),
+  h2: (props) => /* @__PURE__ */ import_react15.default.createElement(HeadingTwo, null, props.children),
+  h3: (props) => /* @__PURE__ */ import_react15.default.createElement(HeadingThree, { ...props }),
+  img: (props) => /* @__PURE__ */ import_react15.default.createElement(Image2, { ...props }),
   pre: CodeStepper,
-  li: (props) => /* @__PURE__ */ import_react14.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
-  Side: (props) => /* @__PURE__ */ import_react14.default.createElement("div", { ...props }),
+  li: (props) => /* @__PURE__ */ import_react15.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
+  Side: (props) => /* @__PURE__ */ import_react15.default.createElement("div", { ...props }),
   p: (props) => {
-    const Text = import_spectacle5.mdxComponentMap.p;
-    return /* @__PURE__ */ import_react14.default.createElement(
+    const Text = import_spectacle6.mdxComponentMap.p;
+    return /* @__PURE__ */ import_react15.default.createElement(
       Text,
       {
         style: { margin: "8px 0", padding: "8px 0", lineHeight: "2rem" },
@@ -1196,36 +1239,117 @@ var componentsMap = {
       }
     );
   },
-  blockquote: (props) => /* @__PURE__ */ import_react14.default.createElement(CustomQuote, { ...props }),
+  blockquote: (props) => /* @__PURE__ */ import_react15.default.createElement(CustomQuote, { ...props }),
   a: ({ children, ...props }) => {
     const domain = new URL(props.href || "").hostname;
-    return /* @__PURE__ */ import_react14.default.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ import_react14.default.createElement(
-      "small",
+    return /* @__PURE__ */ import_react15.default.createElement(
+      "a",
       {
-        style: {
-          color: "#ffffff44"
-        }
+        ...props,
+        style: { color: "var(--color-secondary)", textDecoration: "none" }
       },
-      "(",
-      domain,
-      ")"
-    ));
+      children,
+      " ",
+      /* @__PURE__ */ import_react15.default.createElement(
+        "small",
+        {
+          style: {
+            color: "#ffffff44"
+          }
+        },
+        "(",
+        domain,
+        ")"
+      )
+    );
+  },
+  directive: (props) => {
+    if (props._name === "qrcode") {
+      const url = import_react15.default.Children.toArray(props.children)[0].props.href;
+      return /* @__PURE__ */ import_react15.default.createElement(QRCode, { url });
+    }
+    return /* @__PURE__ */ import_react15.default.createElement("div", { ...props });
   }
 };
 var map_default = componentsMap;
 
+// src/index.tsx
+var import_styled_components17 = require("styled-components");
+
+// src/SlideWrapper.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/context.tsx
+var import_react16 = __toESM(require("react"));
+var PestacleContext = import_react16.default.createContext(void 0);
+function usePestacle() {
+  const context = import_react16.default.useContext(PestacleContext);
+  if (!context) {
+    throw new Error("usePestacle must be used within a PestacleProvider");
+  }
+  return context;
+}
+function PestacleProvider({
+  children,
+  layouts: layouts2
+}) {
+  return /* @__PURE__ */ import_react16.default.createElement(PestacleContext.Provider, { value: { layouts: layouts2 } }, children);
+}
+
+// src/SlideWrapper.tsx
+function SlideWrapper({
+  children,
+  frontmatter
+}) {
+  const { layouts: layouts2 } = usePestacle();
+  const layout = (frontmatter == null ? void 0 : frontmatter.layout) || "default";
+  console.log(layouts2, layout);
+  const Layout = layout in layouts2 ? layouts2[layout] : null;
+  if (layout && !Layout) {
+    console.warn(`Layout ${layout} not found`);
+  }
+  if (Layout) {
+    return /* @__PURE__ */ import_react17.default.createElement(Layout, { ...frontmatter }, children);
+  }
+  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children);
+}
+
+// src/colors.ts
+function extractColors(color) {
+  if (color.startsWith("rgb")) {
+    const [r, g, b] = color.replace("rgb(", "").replace("rgba(", "").replace(")", "").split(",").map((c) => parseInt(c.trim(), 10));
+    return { r, g, b };
+  } else if (color.startsWith("#")) {
+    const hex = color.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return { r, g, b };
+  }
+  throw new Error(`Invalid color format: ${color}`);
+}
+function createCssVariables(colors) {
+  const base = Object.entries(colors).map(([key, value]) => `--color-${key}: ${value};`).join("\n");
+  const rgbs = Object.entries(colors).map(([key, value]) => {
+    const { r, g, b } = extractColors(value);
+    return `--color-${key}-rgb: ${r}, ${g}, ${b};`;
+  }).join("\n");
+  return `${base}
+${rgbs}`;
+}
+
 // src/index.tsx
 __reExport(src_exports, require("spectacle"));
 
 // src/components/FilePane.tsx
-var import_react15 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return import_react15.default.isValidElement(children) ? import_react15.default.cloneElement(children, {
+  return import_react18.default.isValidElement(children) ? import_react18.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -1234,14 +1358,14 @@ function FilePane({
 FilePane.mdxType = "FilePane";
 
 // src/components/ItemsColumn.tsx
-var import_react16 = __toESM(require("react"));
-var import_spectacle6 = require("spectacle");
+var import_react19 = __toESM(require("react"));
+var import_spectacle7 = require("spectacle");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_react_spring = require("react-spring");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react16.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react16.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react16.default.createElement(
+  const childrenArray = import_react19.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react19.default.createElement(import_spectacle7.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react19.default.createElement(
     "div",
     {
       style: {
@@ -1257,10 +1381,10 @@ function ItemsColumn(divProps) {
     },
     childrenArray.map((child, index) => {
       const isVisible = index <= step;
-      if (!import_react16.default.isValidElement(child)) {
+      if (!import_react19.default.isValidElement(child)) {
         return child;
       }
-      return /* @__PURE__ */ import_react16.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
+      return /* @__PURE__ */ import_react19.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
     })
   ));
 }
@@ -1277,11 +1401,11 @@ function ItemColumnWrapper({
   ...props
 }) {
   const styles = (0, import_react_spring.useSpring)({ opacity: isVisible ? 1 : 0 });
-  return /* @__PURE__ */ import_react16.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
+  return /* @__PURE__ */ import_react19.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
 }
 
 // src/components/DocumentationItem.tsx
-var import_react17 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
 var DocWrapper = import_styled_components12.default.div`
   position: absolute;
@@ -1334,16 +1458,16 @@ function Doc({
   link,
   children
 }) {
-  return /* @__PURE__ */ import_react17.default.createElement(DocWrapper, null, /* @__PURE__ */ import_react17.default.createElement(DocContainer, null, children && /* @__PURE__ */ import_react17.default.createElement(DocContent, null, children), /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
+  return /* @__PURE__ */ import_react20.default.createElement(DocWrapper, null, /* @__PURE__ */ import_react20.default.createElement(DocContainer, null, children && /* @__PURE__ */ import_react20.default.createElement(DocContent, null, children), /* @__PURE__ */ import_react20.default.createElement("div", null, /* @__PURE__ */ import_react20.default.createElement(DocLink, { target: "_blank", rel: "noopener noreferrer", href: link }, label))));
 }
 function DocItem({ label, link }) {
-  return /* @__PURE__ */ import_react17.default.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
+  return /* @__PURE__ */ import_react20.default.createElement(DocLinkItem, { target: "_blank", rel: "noopener noreferrer", href: link }, label);
 }
 
 // src/components/HorizontalList.tsx
-var import_react18 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_react_spring2 = require("react-spring");
-var import_spectacle7 = require("spectacle");
+var import_spectacle8 = require("spectacle");
 var import_styled_components13 = __toESM(require("styled-components"));
 var Container = import_styled_components13.default.div`
   display: grid;
@@ -1353,8 +1477,8 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react18.default.Children.toArray(children);
-  return /* @__PURE__ */ import_react18.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react18.default.createElement(
+  const items = import_react21.default.Children.toArray(children);
+  return /* @__PURE__ */ import_react21.default.createElement(import_spectacle8.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react21.default.createElement(
     Container,
     {
       style: {
@@ -1362,10 +1486,10 @@ function HorizontalList({
       }
     },
     items.map((item, k) => {
-      if (!import_react18.default.isValidElement(item)) {
+      if (!import_react21.default.isValidElement(item)) {
         return item;
       }
-      return import_react18.default.cloneElement(item, {
+      return import_react21.default.cloneElement(item, {
         // @ts-expect-error cloning
         position: k + 1,
         isVisible: k <= step,
@@ -1375,12 +1499,12 @@ function HorizontalList({
   ));
 }
 function Pill({ position }) {
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     "div",
     {
       style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
     },
-    /* @__PURE__ */ import_react18.default.createElement(
+    /* @__PURE__ */ import_react21.default.createElement(
       "svg",
       {
         width: "48",
@@ -1389,14 +1513,14 @@ function Pill({ position }) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react18.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(
         "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__ */ import_react18.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(
         "text",
         {
           x: "9",
@@ -1408,7 +1532,7 @@ function Pill({ position }) {
         },
         position
       ),
-      /* @__PURE__ */ import_react18.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(
         "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",
@@ -1445,10 +1569,8 @@ function getItemOpacity({
   isLast,
   isVisible
 }) {
-  if (isLast)
-    return 1;
-  if (isVisible)
-    return 0.7;
+  if (isLast) return 1;
+  if (isVisible) return 0.7;
   return 0;
 }
 function HorizontalListItem({
@@ -1461,13 +1583,13 @@ function HorizontalListItem({
   const opacityStyles = (0, import_react_spring2.useSpring)({
     opacity: getItemOpacity({ isVisible, isLast })
   });
-  return /* @__PURE__ */ import_react18.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react18.default.createElement(ItemHead, null, /* @__PURE__ */ import_react18.default.createElement(Pill, { position }), /* @__PURE__ */ import_react18.default.createElement("p", null, title)), /* @__PURE__ */ import_react18.default.createElement(ItemContent, null, children));
+  return /* @__PURE__ */ import_react21.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react21.default.createElement(ItemHead, null, /* @__PURE__ */ import_react21.default.createElement(Pill, { position }), /* @__PURE__ */ import_react21.default.createElement("p", null, title)), /* @__PURE__ */ import_react21.default.createElement(ItemContent, null, children));
 }
 
 // src/components/Timeline.tsx
-var import_react19 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_react_spring3 = require("react-spring");
-var import_spectacle8 = require("spectacle");
+var import_spectacle9 = require("spectacle");
 
 // src/components/Timeline.styled.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -1539,9 +1661,9 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = import_react19.default.Children.toArray(props.children);
-  return /* @__PURE__ */ import_react19.default.createElement(
-    import_spectacle8.Stepper,
+  const children = import_react22.default.Children.toArray(props.children);
+  return /* @__PURE__ */ import_react22.default.createElement(
+    import_spectacle9.Stepper,
     {
       ...props,
       values: children,
@@ -1550,10 +1672,10 @@ function Timeline(props) {
     },
     (value, step) => {
       return children.map((child, index) => {
-        if (!import_react19.default.isValidElement(child)) {
+        if (!import_react22.default.isValidElement(child)) {
           return child;
         }
-        return import_react19.default.cloneElement(child, {
+        return import_react22.default.cloneElement(child, {
           // @ts-expect-error cloning
           isPhantom: step < index,
           isLast: step === index
@@ -1566,10 +1688,8 @@ function getItemOpacity2({
   isLast,
   isPhantom
 }) {
-  if (isPhantom)
-    return 0;
-  if (isLast)
-    return 1;
+  if (isPhantom) return 0;
+  if (isLast) return 1;
   return 0.5;
 }
 function TimelineItem(props) {
@@ -1581,7 +1701,7 @@ function TimelineItem(props) {
     opacity: getItemOpacity2({ isPhantom, isLast })
   });
   const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     TimelineItemStyled,
     {
       ...rest,
@@ -1589,13 +1709,13 @@ function TimelineItem(props) {
         ...appearStyles
       }
     },
-    /* @__PURE__ */ import_react19.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react19.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react19.default.createElement(TimelineItemBody, null, children)),
-    /* @__PURE__ */ import_react19.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react19.default.createElement(Hexagon, null), /* @__PURE__ */ import_react19.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
-    /* @__PURE__ */ import_react19.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react19.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react19.default.createElement(TimelineItemBody, null, children))
+    /* @__PURE__ */ import_react22.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react22.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react22.default.createElement(TimelineItemBody, null, children)),
+    /* @__PURE__ */ import_react22.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react22.default.createElement(Hexagon, null), /* @__PURE__ */ import_react22.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
+    /* @__PURE__ */ import_react22.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react22.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react22.default.createElement(TimelineItemBody, null, children))
   );
 }
 function Hexagon() {
-  return /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     "svg",
     {
       width: "18",
@@ -1604,14 +1724,14 @@ function Hexagon() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement(
       "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__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement(
       "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",
@@ -1622,7 +1742,7 @@ function Hexagon() {
 }
 
 // src/components/IconBox.tsx
-var import_react20 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_styled_components16 = __toESM(require("styled-components"));
 var IconBoxContent = import_styled_components16.default.div`
   * {
@@ -1634,7 +1754,7 @@ function IconBox({
   children,
   icon
 }) {
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(
     "div",
     {
       style: {
@@ -1644,63 +1764,69 @@ function IconBox({
         padding: "1rem 0"
       }
     },
-    /* @__PURE__ */ import_react20.default.createElement("div", { style: { fontSize: 60 } }, icon),
-    /* @__PURE__ */ import_react20.default.createElement(IconBoxContent, null, children)
+    /* @__PURE__ */ import_react23.default.createElement("div", { style: { fontSize: 60 } }, icon),
+    /* @__PURE__ */ import_react23.default.createElement(IconBoxContent, null, children)
   );
 }
 
 // src/index.tsx
 function PassThrough({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, children);
-}
-function Layout({
-  children,
-  frontmatter
-}) {
-  const layout = (frontmatter == null ? void 0 : frontmatter.layout) || "default";
-  const Layout2 = layout in layouts_default ? layouts_default[layout] : null;
-  if (layout && !Layout2) {
-    console.warn(`Layout ${layout} not found`);
-  }
-  if (Layout2) {
-    return /* @__PURE__ */ import_react21.default.createElement(Layout2, { ...frontmatter }, children);
-  }
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, children);
 }
+var layouts = layouts_default;
 var componentsMap2 = {
   ...map_default,
-  wrapper: Layout
+  wrapper: SlideWrapper
 };
-function Deck({ deck }) {
-  import_react21.default.useEffect(() => {
+function Deck({
+  deck,
+  theme,
+  layouts: layouts2 = layouts_default
+}) {
+  import_react24.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.StrictMode, null, /* @__PURE__ */ import_react21.default.createElement(import_react22.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react21.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
-    const Component = slide.slideComponent;
-    return /* @__PURE__ */ import_react21.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react21.default.createElement(Component, null));
-  }))));
+  const GlobalStyle = import_react24.default.useMemo(() => {
+    const cssVariables = createCssVariables(theme.themeTokens.colors);
+    return import_styled_components17.createGlobalStyle`
+      :root {
+        ${cssVariables}
+      }
+    `;
+  }, [theme]);
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.StrictMode, null, /* @__PURE__ */ import_react24.default.createElement(PestacleProvider, { layouts: layouts2 }, /* @__PURE__ */ import_react24.default.createElement(import_react25.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react24.default.createElement(GlobalStyle, null), /* @__PURE__ */ import_react24.default.createElement(
+    import_spectacle10.Deck,
+    {
+      theme: { ...theme_default, ...theme.themeTokens },
+      template
+    },
+    deck.slides.map((slide, i) => {
+      const Component = slide.slideComponent;
+      return /* @__PURE__ */ import_react24.default.createElement(import_spectacle10.Slide, { key: i }, /* @__PURE__ */ import_react24.default.createElement(Component, null));
+    })
+  ))));
 }
 function Danger({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "red" } }, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", { style: { color: "red" } }, children);
 }
 function Information({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "orange" } }, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", { style: { color: "orange" } }, children);
 }
 function Success({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "green" } }, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", { style: { color: "green" } }, children);
 }
 function Warning({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { color: "yellow" } }, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", { style: { color: "yellow" } }, children);
 }
 function Side({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", null, children);
 }
 Side.mdxType = "Side";
 function Documentation({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", null, children);
 }
 function Box2({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("div", null, children);
+  return /* @__PURE__ */ import_react24.default.createElement("div", null, children);
 }
 
 // <stdin>