@gpichot/spectacle-deck 1.0.2 → 1.0.3

package/index.cjs

@@ -1288,17 +1288,75 @@ 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 TimelineStyled = import_styled_components12.default.div`
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  align-items: center;
+`;
+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;
+  display: inline-flex;
+
+  ${({ isOdd }) => isOdd && import_styled_components13.css`
+      flex-direction: column;
+    `}
+
+  ${({ isEven }) => isEven && import_styled_components13.css`
+      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;
+`;
 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) => {
+  return /* @__PURE__ */ import_react17.default.createElement(import_spectacle8.Stepper, { ...props, values: children }, (value, step) => {
+    return /* @__PURE__ */ import_react17.default.createElement(TimelineStyled, null, children.map((child, index) => {
       if (!import_react17.default.isValidElement(child)) {
         return child;
       }
@@ -1307,7 +1365,7 @@ function Timeline(props) {
         isPhantom: step < index,
         isLast: step === index
       });
-    });
+    }));
   });
 }
 function getItemOpacity2({
@@ -1330,33 +1388,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 +1429,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

@@ -1246,17 +1246,75 @@ 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 TimelineStyled = styled12.div`
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  align-items: center;
+`;
+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, { css } from "styled-components";
+var TimelineItemStyled = styled13(animated3.div)`
+  flex: 1;
+  display: inline-flex;
+
+  ${({ isOdd }) => isOdd && css`
+      flex-direction: column;
+    `}
+
+  ${({ isEven }) => isEven && css`
+      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;
+`;
 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) => {
+  return /* @__PURE__ */ React17.createElement(Stepper4, { ...props, values: children }, (value, step) => {
+    return /* @__PURE__ */ React17.createElement(TimelineStyled, null, children.map((child, index) => {
       if (!React17.isValidElement(child)) {
         return child;
       }
@@ -1265,7 +1323,7 @@ function Timeline(props) {
         isPhantom: step < index,
         isLast: step === index
       });
-    });
+    }));
   });
 }
 function getItemOpacity2({
@@ -1288,33 +1346,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 +1387,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.3",
   "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);
-}