@gpichot/spectacle-deck 1.0.3 → 1.0.4

package/components/Timeline.styled.d.ts

@@ -1,277 +1,5 @@
 /// <reference types="react" />
 /// <reference types="react" />
-export declare const TimelineStyled: import("styled-components").IStyledComponent<"web", {
-    ref?: import("react").LegacyRef<HTMLDivElement>;
-    key?: import("react").Key;
-    defaultChecked?: boolean;
-    defaultValue?: string | number | readonly string[];
-    suppressContentEditableWarning?: boolean;
-    suppressHydrationWarning?: boolean;
-    accessKey?: string;
-    autoFocus?: boolean;
-    className?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false");
-    contextMenu?: string;
-    dir?: string;
-    draggable?: boolean | "true" | "false";
-    hidden?: boolean;
-    id?: string;
-    lang?: string;
-    nonce?: string;
-    placeholder?: string;
-    slot?: string;
-    spellCheck?: boolean | "true" | "false";
-    style?: import("react").CSSProperties;
-    tabIndex?: number;
-    title?: string;
-    translate?: "yes" | "no";
-    radioGroup?: string;
-    role?: import("react").AriaRole;
-    about?: string;
-    content?: string;
-    datatype?: string;
-    inlist?: any;
-    prefix?: string;
-    property?: string;
-    rel?: string;
-    resource?: string;
-    rev?: string;
-    typeof?: string;
-    vocab?: string;
-    autoCapitalize?: string;
-    autoCorrect?: string;
-    autoSave?: string;
-    color?: string;
-    itemProp?: string;
-    itemScope?: boolean;
-    itemType?: string;
-    itemID?: string;
-    itemRef?: string;
-    results?: number;
-    security?: string;
-    unselectable?: "on" | "off";
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
-    is?: string;
-    "aria-activedescendant"?: string;
-    "aria-atomic"?: boolean | "true" | "false";
-    "aria-autocomplete"?: "inline" | "none" | "list" | "both";
-    "aria-braillelabel"?: string;
-    "aria-brailleroledescription"?: string;
-    "aria-busy"?: boolean | "true" | "false";
-    "aria-checked"?: boolean | "true" | "false" | "mixed";
-    "aria-colcount"?: number;
-    "aria-colindex"?: number;
-    "aria-colindextext"?: string;
-    "aria-colspan"?: number;
-    "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date";
-    "aria-describedby"?: string;
-    "aria-description"?: string;
-    "aria-details"?: string;
-    "aria-disabled"?: boolean | "true" | "false";
-    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup";
-    "aria-errormessage"?: string;
-    "aria-expanded"?: boolean | "true" | "false";
-    "aria-flowto"?: string;
-    "aria-grabbed"?: boolean | "true" | "false";
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
-    "aria-hidden"?: boolean | "true" | "false";
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
-    "aria-keyshortcuts"?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-level"?: number;
-    "aria-live"?: "off" | "assertive" | "polite";
-    "aria-modal"?: boolean | "true" | "false";
-    "aria-multiline"?: boolean | "true" | "false";
-    "aria-multiselectable"?: boolean | "true" | "false";
-    "aria-orientation"?: "horizontal" | "vertical";
-    "aria-owns"?: string;
-    "aria-placeholder"?: string;
-    "aria-posinset"?: number;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed";
-    "aria-readonly"?: boolean | "true" | "false";
-    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required"?: boolean | "true" | "false";
-    "aria-roledescription"?: string;
-    "aria-rowcount"?: number;
-    "aria-rowindex"?: number;
-    "aria-rowindextext"?: string;
-    "aria-rowspan"?: number;
-    "aria-selected"?: boolean | "true" | "false";
-    "aria-setsize"?: number;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other";
-    "aria-valuemax"?: number;
-    "aria-valuemin"?: number;
-    "aria-valuenow"?: number;
-    "aria-valuetext"?: string;
-    children?: import("react").ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    };
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement>;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement>;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement>;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement>;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement>;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement>;
-    onChange?: import("react").FormEventHandler<HTMLDivElement>;
-    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement>;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onInput?: import("react").FormEventHandler<HTMLDivElement>;
-    onInputCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onReset?: import("react").FormEventHandler<HTMLDivElement>;
-    onResetCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmit?: import("react").FormEventHandler<HTMLDivElement>;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalid?: import("react").FormEventHandler<HTMLDivElement>;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement>;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onError?: import("react").ReactEventHandler<HTMLDivElement>;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement>;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement>;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement>;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement>;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement>;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement>;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement>;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement>;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement>;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onResize?: import("react").ReactEventHandler<HTMLDivElement>;
-    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement>;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement>;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement>;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement>;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement>;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement>;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement>;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement>;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onDrag?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEnd?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragStart?: import("react").DragEventHandler<HTMLDivElement>;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement>;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement>;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement>;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement>;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement>;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement>;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement>;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement>;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement>;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement>;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement>;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement>;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement>;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement>;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement>;
-}>;
 export declare const TimelineItemContent: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<HTMLDivElement>;
     key?: import("react").Key;

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
     },
@@ -1292,12 +1292,6 @@ var import_spectacle8 = require("spectacle");
 
 // 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;
@@ -1323,15 +1317,21 @@ var TimelineItemTitle = import_styled_components12.default.div`
 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;
 
-  ${({ isOdd }) => isOdd && import_styled_components13.css`
+  &:nth-child(odd) {
+    &,
+    ${TimelineItemContent} {
       flex-direction: column;
-    `}
-
-  ${({ isEven }) => isEven && import_styled_components13.css`
+    }
+  }
+  &:nth-child(even) {
+    &,
+    ${TimelineItemContent} {
       flex-direction: column-reverse;
-    `}
+    }
+  }
 `;
 var TimelineItemGuide = (0, import_styled_components13.default)(import_react_spring3.animated.div)`
   width: 100%;
@@ -1353,20 +1353,35 @@ var TimelineItemGuideLine = (0, import_styled_components13.default)(import_react
   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 }, (value, step) => {
-    return /* @__PURE__ */ import_react17.default.createElement(TimelineStyled, null, 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,

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
     },
@@ -1250,12 +1250,6 @@ import { Stepper as Stepper4 } from "spectacle";
 
 // 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;
@@ -1278,18 +1272,24 @@ var TimelineItemTitle = styled12.div`
 `;
 
 // src/components/Timeline.tsx
-import styled13, { css } from "styled-components";
+import styled13 from "styled-components";
 var TimelineItemStyled = styled13(animated3.div)`
   flex: 1;
+  flex-flow: column nowrap;
   display: inline-flex;
 
-  ${({ isOdd }) => isOdd && css`
+  &:nth-child(odd) {
+    &,
+    ${TimelineItemContent} {
       flex-direction: column;
-    `}
-
-  ${({ isEven }) => isEven && css`
+    }
+  }
+  &:nth-child(even) {
+    &,
+    ${TimelineItemContent} {
       flex-direction: column-reverse;
-    `}
+    }
+  }
 `;
 var TimelineItemGuide = styled13(animated3.div)`
   width: 100%;
@@ -1311,20 +1311,35 @@ 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 }, (value, step) => {
-    return /* @__PURE__ */ React17.createElement(TimelineStyled, null, 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,

package/package.json

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