@gpichot/spectacle-deck 1.5.0 → 1.6.0

package/index.cjs

@@ -61,8 +61,8 @@ __export(src_exports, {
   noneTransition: () => noneTransition,
   resolveTransition: () => resolveTransition
 });
-var import_react15 = require("@mdx-js/react");
-var import_react16 = __toESM(require("react"));
+var import_react16 = require("@mdx-js/react");
+var import_react17 = __toESM(require("react"));
 var import_spectacle11 = require("spectacle");
 var import_styled_components20 = require("styled-components");
 
@@ -528,6 +528,11 @@ var HeadingTwo = import_styled_components2.default.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
+
+  strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
 `;
 var HeadingThree = import_styled_components2.default.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
@@ -1066,6 +1071,7 @@ var Default3Layout = ({
 };
 
 // src/layouts/FullImageLayout.tsx
+var import_react7 = __toESM(require("react"));
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Overlay = import_styled_components6.default.div`
@@ -1092,6 +1098,9 @@ function FullImageLayout({
   position = "bottom",
   dim = 0.4
 }) {
+  const [images, rest] = getMatchingMdxType(children, "Image");
+  const firstImage = images[0];
+  const backgroundImage = image || (import_react7.default.isValidElement(firstImage) ? firstImage.props.src : void 0);
   const justifyMap = {
     top: "flex-start",
     center: "center",
@@ -1111,7 +1120,7 @@ function FullImageLayout({
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${image})`,
+              backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
               backgroundSize: "cover",
               backgroundPosition: "center"
             }
@@ -1127,7 +1136,7 @@ function FullImageLayout({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Overlay, { style: { justifyContent: justifyMap[position] }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Overlay, { style: { justifyContent: justifyMap[position] }, children: firstImage ? rest : children })
       ]
     }
   );
@@ -1281,7 +1290,7 @@ var SectionLayout = import_styled_components8.default.div`
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/layouts/columns.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var DivWithHeading = import_styled_components9.default.div`
@@ -1307,7 +1316,7 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = import_react7.default.Children.toArray(children);
+  const childrenArray = import_react8.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ColumnsContainer,
     {
@@ -1636,11 +1645,11 @@ __reExport(src_exports, require("spectacle"));
 var import_web = require("@react-spring/web");
 
 // src/components/animations/useInView.ts
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 function useInView() {
-  const ref = import_react8.default.useRef(null);
-  const [isInView, setIsInView] = import_react8.default.useState(false);
-  import_react8.default.useEffect(() => {
+  const ref = import_react9.default.useRef(null);
+  const [isInView, setIsInView] = import_react9.default.useState(false);
+  import_react9.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1838,7 +1847,7 @@ function Spotlight({
 
 // src/components/animations/StaggerChildren.tsx
 var import_web5 = require("@react-spring/web");
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function StaggerChildren({
   children,
@@ -1849,7 +1858,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = import_react9.default.Children.toArray(children);
+  const items = import_react10.default.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1870,14 +1879,14 @@ function StaggerChildren({
 }
 
 // src/components/animations/TypeWriter.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
   if (!node) return "";
   if (Array.isArray(node)) return node.map(extractText).join("");
-  if (import_react10.default.isValidElement(node)) {
+  if (import_react11.default.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -1891,9 +1900,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = import_react10.default.useState("");
-  const [done, setDone] = import_react10.default.useState(false);
-  import_react10.default.useEffect(() => {
+  const [displayed, setDisplayed] = import_react11.default.useState("");
+  const [done, setDone] = import_react11.default.useState(false);
+  import_react11.default.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -1992,14 +2001,14 @@ function DocItem({ label, link }) {
 }
 
 // src/components/FilePane.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return import_react11.default.isValidElement(children) ? import_react11.default.cloneElement(children, {
+  return import_react12.default.isValidElement(children) ? import_react12.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -2009,7 +2018,7 @@ FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 var import_web6 = require("@react-spring/web");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_spectacle8 = require("spectacle");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -2021,7 +2030,7 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react12.default.Children.toArray(children);
+  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,
     {
@@ -2029,10 +2038,10 @@ function HorizontalList({
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!import_react12.default.isValidElement(item)) {
+        if (!import_react13.default.isValidElement(item)) {
           return item;
         }
-        return import_react12.default.cloneElement(item, {
+        return import_react13.default.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -2170,13 +2179,13 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 var import_web7 = require("@react-spring/web");
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_spectacle9 = require("spectacle");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react13.default.Children.toArray(children);
+  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",
     {
@@ -2192,7 +2201,7 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!import_react13.default.isValidElement(child)) {
+        if (!import_react14.default.isValidElement(child)) {
           return child;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
@@ -2218,7 +2227,7 @@ function ItemColumnWrapper({
 
 // src/components/Timeline.tsx
 var import_web8 = require("@react-spring/web");
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_spectacle10 = require("spectacle");
 var import_styled_components19 = __toESM(require("styled-components"));
 
@@ -2292,7 +2301,7 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = import_react14.default.Children.toArray(props.children);
+  const children = import_react15.default.Children.toArray(props.children);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_spectacle10.Stepper,
     {
@@ -2302,10 +2311,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!import_react14.default.isValidElement(child)) {
+          if (!import_react15.default.isValidElement(child)) {
             return child;
           }
-          return import_react14.default.cloneElement(child, {
+          return import_react15.default.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2401,10 +2410,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  import_react16.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = import_react16.default.useMemo(() => {
+  const mergedTheme = import_react17.default.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2415,7 +2424,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = import_react16.default.useMemo(() => {
+  const GlobalStyle = import_react17.default.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return import_styled_components20.createGlobalStyle`
       :root {
@@ -2424,7 +2433,7 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react16.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react15.MDXProvider, { components: componentsMap2, children: [
+  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,

package/index.mjs

@@ -1,6 +1,6 @@
 // src/index.tsx
 import { MDXProvider } from "@mdx-js/react";
-import React15 from "react";
+import React16 from "react";
 import { Slide, Deck as SpectacleDeck } from "spectacle";
 import { createGlobalStyle } from "styled-components";
 
@@ -470,6 +470,11 @@ var HeadingTwo = styled2.h2`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
   font-size: 55px;
   font-weight: 400;
+
+  strong {
+    color: var(--color-secondary);
+    font-weight: 500;
+  }
 `;
 var HeadingThree = styled2.h3`
   font-family: Bitter, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
@@ -1008,6 +1013,7 @@ var Default3Layout = ({
 };
 
 // src/layouts/FullImageLayout.tsx
+import React7 from "react";
 import styled6 from "styled-components";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Overlay = styled6.div`
@@ -1034,6 +1040,9 @@ function FullImageLayout({
   position = "bottom",
   dim = 0.4
 }) {
+  const [images, rest] = getMatchingMdxType(children, "Image");
+  const firstImage = images[0];
+  const backgroundImage = image || (React7.isValidElement(firstImage) ? firstImage.props.src : void 0);
   const justifyMap = {
     top: "flex-start",
     center: "center",
@@ -1053,7 +1062,7 @@ function FullImageLayout({
             style: {
               position: "absolute",
               inset: 0,
-              backgroundImage: `url(${image})`,
+              backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
               backgroundSize: "cover",
               backgroundPosition: "center"
             }
@@ -1069,7 +1078,7 @@ function FullImageLayout({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(Overlay, { style: { justifyContent: justifyMap[position] }, children })
+        /* @__PURE__ */ jsx10(Overlay, { style: { justifyContent: justifyMap[position] }, children: firstImage ? rest : children })
       ]
     }
   );
@@ -1223,7 +1232,7 @@ var SectionLayout = styled8.div`
 import styled10 from "styled-components";
 
 // src/layouts/columns.tsx
-import React7 from "react";
+import React8 from "react";
 import styled9 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var DivWithHeading = styled9.div`
@@ -1249,7 +1258,7 @@ function ColumnsLayout({
   children,
   reverse
 }) {
-  const childrenArray = React7.Children.toArray(children);
+  const childrenArray = React8.Children.toArray(children);
   return /* @__PURE__ */ jsx13(
     ColumnsContainer,
     {
@@ -1581,11 +1590,11 @@ export * from "spectacle";
 import { animated, useSpring } from "@react-spring/web";
 
 // src/components/animations/useInView.ts
-import React8 from "react";
+import React9 from "react";
 function useInView() {
-  const ref = React8.useRef(null);
-  const [isInView, setIsInView] = React8.useState(false);
-  React8.useEffect(() => {
+  const ref = React9.useRef(null);
+  const [isInView, setIsInView] = React9.useState(false);
+  React9.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1783,7 +1792,7 @@ function Spotlight({
 
 // src/components/animations/StaggerChildren.tsx
 import { animated as animated5, useSprings } from "@react-spring/web";
-import React9 from "react";
+import React10 from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function StaggerChildren({
   children,
@@ -1794,7 +1803,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = React9.Children.toArray(children);
+  const items = React10.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1815,14 +1824,14 @@ function StaggerChildren({
 }
 
 // src/components/animations/TypeWriter.tsx
-import React10 from "react";
+import React11 from "react";
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
   if (!node) return "";
   if (Array.isArray(node)) return node.map(extractText).join("");
-  if (React10.isValidElement(node)) {
+  if (React11.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -1836,9 +1845,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = React10.useState("");
-  const [done, setDone] = React10.useState(false);
-  React10.useEffect(() => {
+  const [displayed, setDisplayed] = React11.useState("");
+  const [done, setDone] = React11.useState(false);
+  React11.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -1937,14 +1946,14 @@ function DocItem({ label, link }) {
 }
 
 // src/components/FilePane.tsx
-import React11 from "react";
+import React12 from "react";
 function FilePane({
   name,
   children,
   priority,
   ...divProps
 }) {
-  return React11.isValidElement(children) ? React11.cloneElement(children, {
+  return React12.isValidElement(children) ? React12.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -1954,7 +1963,7 @@ FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
-import React12 from "react";
+import React13 from "react";
 import { Stepper as Stepper2 } from "spectacle";
 import styled15 from "styled-components";
 import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -1966,7 +1975,7 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = React12.Children.toArray(children);
+  const items = React13.Children.toArray(children);
   return /* @__PURE__ */ jsx28(Stepper2, { values: items, children: (_, step) => /* @__PURE__ */ jsx28(
     Container,
     {
@@ -1974,10 +1983,10 @@ function HorizontalList({
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!React12.isValidElement(item)) {
+        if (!React13.isValidElement(item)) {
           return item;
         }
-        return React12.cloneElement(item, {
+        return React13.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -2115,13 +2124,13 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 import { animated as animated7, useSpring as useSpring6 } from "@react-spring/web";
-import React13 from "react";
+import React14 from "react";
 import { Stepper as Stepper3 } from "spectacle";
 import styled17 from "styled-components";
 import { jsx as jsx30 } from "react/jsx-runtime";
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = React13.Children.toArray(children);
+  const childrenArray = React14.Children.toArray(children);
   return /* @__PURE__ */ jsx30(Stepper3, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ jsx30(
     "div",
     {
@@ -2137,7 +2146,7 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!React13.isValidElement(child)) {
+        if (!React14.isValidElement(child)) {
           return child;
         }
         return /* @__PURE__ */ jsx30(ItemColumnWrapper, { isVisible, children: child }, index);
@@ -2163,7 +2172,7 @@ function ItemColumnWrapper({
 
 // src/components/Timeline.tsx
 import { animated as animated8, useSpring as useSpring7 } from "@react-spring/web";
-import React14 from "react";
+import React15 from "react";
 import { Stepper as Stepper4 } from "spectacle";
 import styled19 from "styled-components";
 
@@ -2237,7 +2246,7 @@ var style = {
   alignItems: "center"
 };
 function Timeline(props) {
-  const children = React14.Children.toArray(props.children);
+  const children = React15.Children.toArray(props.children);
   return /* @__PURE__ */ jsx31(
     Stepper4,
     {
@@ -2247,10 +2256,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!React14.isValidElement(child)) {
+          if (!React15.isValidElement(child)) {
             return child;
           }
-          return React14.cloneElement(child, {
+          return React15.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2346,10 +2355,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = React15.useMemo(() => {
+  const mergedTheme = React16.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2360,7 +2369,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = React15.useMemo(() => {
+  const GlobalStyle = React16.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return createGlobalStyle`
       :root {
@@ -2369,7 +2378,7 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ jsx32(React15.StrictMode, { children: /* @__PURE__ */ jsx32(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
+  return /* @__PURE__ */ jsx32(React16.StrictMode, { children: /* @__PURE__ */ jsx32(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
     /* @__PURE__ */ jsx32(GlobalStyle, {}),
     /* @__PURE__ */ jsx32(
       SpectacleDeck,

package/layouts/FullImageLayout.d.ts

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

package/package.json

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