@gpichot/spectacle-deck 1.0.2 → 1.0.4

package/index.cjs

@@ -1124,7 +1124,7 @@ var import_spectacle6 = require("spectacle");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_react_spring = require("react-spring");
 function ItemsColumn(divProps) {
-  const { style, children, ...props } = divProps;
+  const { style: style2, children, ...props } = divProps;
   const childrenArray = import_react15.default.Children.toArray(children);
   return /* @__PURE__ */ import_react15.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react15.default.createElement(
     "div",
@@ -1134,7 +1134,7 @@ function ItemsColumn(divProps) {
         flexDirection: "column",
         alignItems: "center",
         height: "100%",
-        ...style
+        ...style2
       },
       ...props
     },
@@ -1288,27 +1288,100 @@ function HorizontalListItem({
 // src/components/Timeline.tsx
 var import_react17 = __toESM(require("react"));
 var import_react_spring3 = require("react-spring");
-var import_classnames = __toESM(require("classnames"));
 var import_spectacle8 = require("spectacle");
 
-// src/components/Timeline.module.scss
-var Timeline_module_default = {};
+// src/components/Timeline.styled.tsx
+var import_styled_components12 = __toESM(require("styled-components"));
+var TimelineItemContent = import_styled_components12.default.div`
+  display: flex;
+  padding: 0.7rem 0 1rem 12px;
+`;
+var TimelineItemContentPhantom = (0, import_styled_components12.default)(TimelineItemContent)`
+  opacity: 0;
+`;
+var TimelineItemBody = import_styled_components12.default.div`
+  &,
+  & > * {
+    font-size: 1.3rem !important;
+    color: #ffffff !important;
+  }
+`;
+var TimelineItemTitle = import_styled_components12.default.div`
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffffbb;
+`;
 
 // src/components/Timeline.tsx
+var import_styled_components13 = __toESM(require("styled-components"));
+var TimelineItemStyled = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
+  flex: 1;
+  flex-flow: column nowrap;
+  display: inline-flex;
+
+  &:nth-child(odd) {
+    &,
+    ${TimelineItemContent} {
+      flex-direction: column;
+    }
+  }
+  &:nth-child(even) {
+    &,
+    ${TimelineItemContent} {
+      flex-direction: column-reverse;
+    }
+  }
+`;
+var TimelineItemGuide = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
+  width: 100%;
+  padding-top: 2px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+
+  svg {
+    height: 28px;
+    width: 28px;
+    path {
+      fill: #ffffff;
+    }
+    margin-right: 4px;
+  }
+`;
+var TimelineItemGuideLine = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
+  border-top: 4px solid #ffffff;
+  margin-right: 4px;
+`;
+var style = {
+  display: "flex",
+  position: "relative",
+  flexFlow: "row nowrap",
+  alignItems: "center"
+};
 function Timeline(props) {
   const children = import_react17.default.Children.toArray(props.children);
-  return /* @__PURE__ */ import_react17.default.createElement(import_spectacle8.Stepper, { ...props, values: children, className: Timeline_module_default["timeline"] }, (value, step) => {
-    return children.map((child, index) => {
-      if (!import_react17.default.isValidElement(child)) {
-        return child;
-      }
-      return import_react17.default.cloneElement(child, {
-        // @ts-expect-error cloning
-        isPhantom: step < index,
-        isLast: step === index
+  return /* @__PURE__ */ import_react17.default.createElement(
+    import_spectacle8.Stepper,
+    {
+      ...props,
+      values: children,
+      activeStyle: style,
+      inactiveStyle: style
+    },
+    (value, step) => {
+      return children.map((child, index) => {
+        if (!import_react17.default.isValidElement(child)) {
+          return child;
+        }
+        return import_react17.default.cloneElement(child, {
+          // @ts-expect-error cloning
+          isPhantom: step < index,
+          isLast: step === index
+        });
       });
-    });
-  });
+    }
+  );
 }
 function getItemOpacity2({
   isLast,
@@ -1330,33 +1403,16 @@ function TimelineItem(props) {
   });
   const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
   return /* @__PURE__ */ import_react17.default.createElement(
-    import_react_spring3.animated.div,
+    TimelineItemStyled,
     {
       ...rest,
-      className: Timeline_module_default["timelineItem"],
       style: {
         ...appearStyles
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(
-          Timeline_module_default["timelineItemContent"],
-          Timeline_module_default["timelineItemContentPhantom"]
-        )
-      },
-      /* @__PURE__ */ import_react17.default.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title),
-      /* @__PURE__ */ import_react17.default.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children)
-    ),
-    /* @__PURE__ */ import_react17.default.createElement(import_react_spring3.animated.div, { className: Timeline_module_default["timelineItemGuide"], style: colorStyles }, /* @__PURE__ */ import_react17.default.createElement(Hexagon, null), /* @__PURE__ */ import_react17.default.createElement(
-      import_react_spring3.animated.div,
-      {
-        className: Timeline_module_default["timelineItemGuideLine"],
-        style: guideLineProps
-      }
-    )),
-    /* @__PURE__ */ import_react17.default.createElement("div", { className: Timeline_module_default["timelineItemContent"] }, /* @__PURE__ */ import_react17.default.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title), /* @__PURE__ */ import_react17.default.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children))
+    /* @__PURE__ */ import_react17.default.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children)),
+    /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ import_react17.default.createElement(Hexagon, null), /* @__PURE__ */ import_react17.default.createElement(TimelineItemGuideLine, { style: guideLineProps })),
+    /* @__PURE__ */ import_react17.default.createElement(TimelineItemContent, null, /* @__PURE__ */ import_react17.default.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ import_react17.default.createElement(TimelineItemBody, null, children))
   );
 }
 function Hexagon() {
@@ -1388,8 +1444,8 @@ function Hexagon() {
 
 // src/components/IconBox.tsx
 var import_react18 = __toESM(require("react"));
-var import_styled_components12 = __toESM(require("styled-components"));
-var IconBoxContent = import_styled_components12.default.div`
+var import_styled_components14 = __toESM(require("styled-components"));
+var IconBoxContent = import_styled_components14.default.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;

package/index.mjs

@@ -1082,7 +1082,7 @@ import { Stepper as Stepper2 } from "spectacle";
 import styled10 from "styled-components";
 import { useSpring, animated } from "react-spring";
 function ItemsColumn(divProps) {
-  const { style, children, ...props } = divProps;
+  const { style: style2, children, ...props } = divProps;
   const childrenArray = React15.Children.toArray(children);
   return /* @__PURE__ */ React15.createElement(Stepper2, { values: childrenArray }, (value, step) => /* @__PURE__ */ React15.createElement(
     "div",
@@ -1092,7 +1092,7 @@ function ItemsColumn(divProps) {
         flexDirection: "column",
         alignItems: "center",
         height: "100%",
-        ...style
+        ...style2
       },
       ...props
     },
@@ -1246,27 +1246,100 @@ function HorizontalListItem({
 // src/components/Timeline.tsx
 import React17 from "react";
 import { animated as animated3, useSpring as useSpring3 } from "react-spring";
-import classnames from "classnames";
 import { Stepper as Stepper4 } from "spectacle";
 
-// src/components/Timeline.module.scss
-var Timeline_module_default = {};
+// src/components/Timeline.styled.tsx
+import styled12 from "styled-components";
+var TimelineItemContent = styled12.div`
+  display: flex;
+  padding: 0.7rem 0 1rem 12px;
+`;
+var TimelineItemContentPhantom = styled12(TimelineItemContent)`
+  opacity: 0;
+`;
+var TimelineItemBody = styled12.div`
+  &,
+  & > * {
+    font-size: 1.3rem !important;
+    color: #ffffff !important;
+  }
+`;
+var TimelineItemTitle = styled12.div`
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffffbb;
+`;
 
 // src/components/Timeline.tsx
+import styled13 from "styled-components";
+var TimelineItemStyled = styled13(animated3.div)`
+  flex: 1;
+  flex-flow: column nowrap;
+  display: inline-flex;
+
+  &:nth-child(odd) {
+    &,
+    ${TimelineItemContent} {
+      flex-direction: column;
+    }
+  }
+  &:nth-child(even) {
+    &,
+    ${TimelineItemContent} {
+      flex-direction: column-reverse;
+    }
+  }
+`;
+var TimelineItemGuide = styled13(animated3.div)`
+  width: 100%;
+  padding-top: 2px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+
+  svg {
+    height: 28px;
+    width: 28px;
+    path {
+      fill: #ffffff;
+    }
+    margin-right: 4px;
+  }
+`;
+var TimelineItemGuideLine = styled13(animated3.div)`
+  border-top: 4px solid #ffffff;
+  margin-right: 4px;
+`;
+var style = {
+  display: "flex",
+  position: "relative",
+  flexFlow: "row nowrap",
+  alignItems: "center"
+};
 function Timeline(props) {
   const children = React17.Children.toArray(props.children);
-  return /* @__PURE__ */ React17.createElement(Stepper4, { ...props, values: children, className: Timeline_module_default["timeline"] }, (value, step) => {
-    return children.map((child, index) => {
-      if (!React17.isValidElement(child)) {
-        return child;
-      }
-      return React17.cloneElement(child, {
-        // @ts-expect-error cloning
-        isPhantom: step < index,
-        isLast: step === index
+  return /* @__PURE__ */ React17.createElement(
+    Stepper4,
+    {
+      ...props,
+      values: children,
+      activeStyle: style,
+      inactiveStyle: style
+    },
+    (value, step) => {
+      return children.map((child, index) => {
+        if (!React17.isValidElement(child)) {
+          return child;
+        }
+        return React17.cloneElement(child, {
+          // @ts-expect-error cloning
+          isPhantom: step < index,
+          isLast: step === index
+        });
       });
-    });
-  });
+    }
+  );
 }
 function getItemOpacity2({
   isLast,
@@ -1288,33 +1361,16 @@ function TimelineItem(props) {
   });
   const colorStyles = useSpring3({ opacity: isPhantom || isLast ? 1 : 0.15 });
   return /* @__PURE__ */ React17.createElement(
-    animated3.div,
+    TimelineItemStyled,
     {
       ...rest,
-      className: Timeline_module_default["timelineItem"],
       style: {
         ...appearStyles
       }
     },
-    /* @__PURE__ */ React17.createElement(
-      "div",
-      {
-        className: classnames(
-          Timeline_module_default["timelineItemContent"],
-          Timeline_module_default["timelineItemContentPhantom"]
-        )
-      },
-      /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title),
-      /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children)
-    ),
-    /* @__PURE__ */ React17.createElement(animated3.div, { className: Timeline_module_default["timelineItemGuide"], style: colorStyles }, /* @__PURE__ */ React17.createElement(Hexagon, null), /* @__PURE__ */ React17.createElement(
-      animated3.div,
-      {
-        className: Timeline_module_default["timelineItemGuideLine"],
-        style: guideLineProps
-      }
-    )),
-    /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemContent"] }, /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title), /* @__PURE__ */ React17.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children))
+    /* @__PURE__ */ React17.createElement(TimelineItemContentPhantom, null, /* @__PURE__ */ React17.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React17.createElement(TimelineItemBody, null, children)),
+    /* @__PURE__ */ React17.createElement(TimelineItemGuide, { style: colorStyles }, /* @__PURE__ */ React17.createElement(Hexagon, null), /* @__PURE__ */ React17.createElement(TimelineItemGuideLine, { style: guideLineProps })),
+    /* @__PURE__ */ React17.createElement(TimelineItemContent, null, /* @__PURE__ */ React17.createElement(TimelineItemTitle, null, title), /* @__PURE__ */ React17.createElement(TimelineItemBody, null, children))
   );
 }
 function Hexagon() {
@@ -1346,8 +1402,8 @@ function Hexagon() {
 
 // src/components/IconBox.tsx
 import React18 from "react";
-import styled12 from "styled-components";
-var IconBoxContent = styled12.div`
+import styled14 from "styled-components";
+var IconBoxContent = styled14.div`
   * {
     margin: 0.2rem !important;
     padding: 0 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpichot/spectacle-deck",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",
@@ -19,7 +19,6 @@
   "dependencies": {
     "@fontsource/bitter": "^5.0.15",
     "@mdx-js/react": "^3.0.0",
-    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",

package/index.css

@@ -1,61 +0,0 @@
-/* src/components/Timeline.module.scss */
-.timeline {
-  display: flex;
-  position: relative;
-  flex-flow: row nowrap;
-  align-items: center;
-}
-.timelineItem {
-  flex: 1;
-  display: inline-flex;
-}
-.timelineItem .timelineItemContentPhantom {
-  opacity: 0;
-}
-.timelineItem:nth-child(odd),
-.timelineItem:nth-child(odd) .timelineItemContent {
-  flex-direction: column;
-}
-.timelineItem:nth-child(even),
-.timelineItem:nth-child(even) .timelineItemContent {
-  flex-direction: column-reverse;
-}
-.timelineItemGuide {
-  width: 100%;
-  padding-top: 2px;
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-}
-.timelineItemGuide svg {
-  height: 28px;
-  width: 28px;
-  margin-right: 4px;
-}
-.timelineItemGuide svg path {
-  fill: #ffffff;
-}
-.timelineItemGuide .timelineItemGuideLine {
-  border-top: 4px solid #ffffff;
-  margin-right: 4px;
-}
-.timelineItemContent {
-  display: flex;
-  padding: 0.7rem 0 1rem 12px;
-}
-.timelineItemBody,
-.timelineItemBody > * {
-  font-size: 1.3rem !important;
-  color: #ffffff !important;
-}
-.timelineItemTitle {
-  font-family:
-    Bitter,
-    "Helvetica Neue",
-    Helvetica,
-    Arial,
-    sans-serif;
-  font-size: 1rem;
-  font-weight: bold;
-  color: rgba(255, 255, 255, 0.7333333333);
-}