carbon-react 134.2.0 → 135.1.0

package/esm/components/carousel/carousel.component.js

@@ -1,125 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import PropTypes from "prop-types";
-import Logger from "../../__internal__/utils/logger";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIconRight, CarouselStyledIconLeft, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper } from "./carousel.style";
-import guid from "../../__internal__/utils/helpers/guid";
-let deprecateWarnTriggered = false;
-const NEXT = "next";
-const PREVIOUS = "previous";
-export const Carousel = ({
-  children,
-  className,
-  enableSlideSelector = true,
-  enablePreviousButton = true,
-  enableNextButton = true,
-  initialSlideIndex = 0,
-  onSlideChange,
-  slideIndex,
-  ...props
-}) => {
-  if (!deprecateWarnTriggered) {
-    deprecateWarnTriggered = true;
-    Logger.deprecate("The Carousel component is deprecated and will soon be removed.");
-  }
-  const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
-  const transitionDirection = useRef(NEXT);
-  const lastSlideIndexProp = useRef(slideIndex);
-  const id = useMemo(() => guid(), []);
-  const numOfSlides = useMemo(() => {
-    return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)).length;
-  }, [children]);
-  const handleSlideChange = useCallback(newIndex => {
-    setSelectedSlideIndex(newIndex);
-    if (onSlideChange) {
-      onSlideChange(newIndex, transitionDirection.current);
-    }
-  }, [onSlideChange]);
-  useEffect(() => {
-    const newIndex = slideIndex;
-    const isNewIndexUndefined = typeof newIndex === "undefined";
-    const isTheSameIndex = newIndex === lastSlideIndexProp.current || newIndex === selectedSlideIndex;
-    if (isNewIndexUndefined || isTheSameIndex) return;
-    if (Number(newIndex) > Number(selectedSlideIndex)) {
-      transitionDirection.current = NEXT;
-    } else {
-      transitionDirection.current = PREVIOUS;
-    }
-    lastSlideIndexProp.current = newIndex;
-    handleSlideChange(newIndex);
-  }, [handleSlideChange, slideIndex, selectedSlideIndex]);
-  function onPreviousClick() {
-    const newIndex = selectedSlideIndex - 1;
-    transitionDirection.current = PREVIOUS;
-    handleSlideChange(newIndex);
-  }
-  function onNextClick() {
-    const newIndex = selectedSlideIndex + 1;
-    transitionDirection.current = NEXT;
-    handleSlideChange(newIndex);
-  }
-  function onSlideSelection(ev) {
-    const newSlideSelection = Number(ev.target.value);
-    transitionDirection.current = newSlideSelection > selectedSlideIndex ? NEXT : PREVIOUS;
-    handleSlideChange(newSlideSelection);
-  }
-  function slideSelector() {
-    if (!enableSlideSelector) return null;
-    const buttons = [];
-    for (let i = 0; i < numOfSlides; i++) {
-      buttons.push( /*#__PURE__*/React.createElement(CarouselSelectorInputWrapperStyle, {
-        key: i,
-        "data-element": "selector-inputs"
-      }, /*#__PURE__*/React.createElement(CarouselSelectorInputStyle, {
-        "data-element": "selector-input",
-        name: `carousel-slide-${id}`,
-        id: `carousel-slide-${i}-${id}`,
-        type: "radio",
-        value: i,
-        onChange: onSlideSelection,
-        checked: selectedSlideIndex === i
-      }), /*#__PURE__*/React.createElement(CarouselSelectorLabelStyle, {
-        "data-element": "selector-label",
-        htmlFor: `carousel-slide-${i}-${id}`
-      })));
-    }
-    return /*#__PURE__*/React.createElement(CarouselSelectorWrapperStyle, {
-      "data-element": "slide-selector"
-    }, buttons);
-  }
-  function previousButton() {
-    if (!enablePreviousButton) return null;
-    const isDisabled = selectedSlideIndex === 0;
-    return /*#__PURE__*/React.createElement(CarouselPreviousButtonWrapperStyle, null, /*#__PURE__*/React.createElement(CarouselButtonStyle, {
-      onClick: onPreviousClick,
-      "data-element": "previous",
-      "aria-label": "previous",
-      disabled: isDisabled
-    }, /*#__PURE__*/React.createElement(CarouselStyledIconLeft, {
-      type: "chevron_down"
-    })));
-  }
-  function nextButton() {
-    if (!enableNextButton) return null;
-    const isDisabled = numOfSlides === selectedSlideIndex + 1;
-    return /*#__PURE__*/React.createElement(CarouselNextButtonWrapperStyle, null, /*#__PURE__*/React.createElement(CarouselButtonStyle, {
-      onClick: onNextClick,
-      "data-element": "next",
-      "aria-label": "next",
-      type: "button",
-      disabled: isDisabled
-    }, /*#__PURE__*/React.createElement(CarouselStyledIconRight, {
-      type: "chevron_down"
-    })));
-  }
-  return /*#__PURE__*/React.createElement(CarouselWrapperStyle, _extends({
-    className: className
-  }, tagComponent("carousel", props)), /*#__PURE__*/React.createElement("div", {
-    className: "carbon-carousel__content"
-  }, previousButton(), /*#__PURE__*/React.createElement(CarouselSliderWrapper, {
-    elementIndex: selectedSlideIndex
-  }, children), nextButton()), slideSelector());
-};
-Carousel.displayName = "Carousel";
-export default Carousel;

package/esm/components/carousel/carousel.style.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-declare const CarouselNavigationStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CarouselPreviousButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CarouselNextButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CarouselStyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-declare const CarouselStyledIconLeft: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-declare const CarouselStyledIconRight: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-declare const CarouselButtonStyle: import("styled-components").StyledComponent<"button", any, {
-    type: "button";
-}, "type">;
-declare const CarouselSelectorInputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
-declare const CarouselSelectorLabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
-declare const CarouselSelectorWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CarouselSelectorInputWrapperStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
-interface CarouselSliderWrapperProps {
-    elementIndex: number;
-}
-declare const CarouselSliderWrapper: import("styled-components").StyledComponent<"div", any, CarouselSliderWrapperProps, never>;
-declare const CarouselWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { CarouselNavigationStyle, CarouselNextButtonWrapperStyle, CarouselPreviousButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIcon, CarouselStyledIconLeft, CarouselStyledIconRight, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper, };

package/esm/components/carousel/carousel.style.js

@@ -1,154 +0,0 @@
-import styled, { css } from "styled-components";
-import Icon from "../icon";
-import { slideAnimation, fadeAnimation } from "./slide.config";
-import { SlideStyle } from "./slide/slide.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import baseTheme from "../../style/themes/base";
-const CarouselNavigationStyle = styled.div`
-  margin-top: -32.5px;
-  position: absolute;
-  top: 52%;
-  z-index: 20;
-`;
-const CarouselPreviousButtonWrapperStyle = styled(CarouselNavigationStyle)`
-  margin-left: 8px;
-`;
-const CarouselNextButtonWrapperStyle = styled(CarouselNavigationStyle)`
-  right: 0;
-  margin-right: 8px;
-`;
-const CarouselStyledIcon = styled(Icon)`
-  cursor: pointer;
-  color: var(--colorsActionMajorYang100);
-  &::before {
-    font-size: 16px;
-  }
-`;
-const CarouselStyledIconLeft = styled(CarouselStyledIcon)`
-  transform: rotate(90deg);
-`;
-const CarouselStyledIconRight = styled(CarouselStyledIcon)`
-  transform: rotate(-90deg);
-`;
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-`;
-const CarouselButtonStyle = styled.button.attrs({
-  type: "button"
-})`
-  ${({
-  disabled
-}) => css`
-    border: none;
-    border-radius: var(--borderRadius400);
-    width: 40px;
-    height: 40px;
-    border-width: var(--borderWidth200);
-    border-color: var(--colorsActionMajorTransparent);
-    background-color: ${disabled ? "var(--colorsActionDisabled500)" : "var(--colorsActionMajor500)"};
-
-    ${disabled && css`
-      ${CarouselStyledIcon} {
-        color: var(--colorsActionMajorYin030);
-      }
-    `}
-
-    &:hover {
-      background-color: var(--colorsActionMajor600);
-      cursor: ${disabled ? "default" : "pointer"};
-
-      ${disabled && css`
-        background-color: var(--colorsActionDisabled500);
-        cursor: default;
-
-        ${CarouselStyledIcon} {
-          cursor: default;
-        }
-      `}
-    }
-
-    &:active {
-      border: none;
-    }
-
-    &:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
-
-      ::-moz-focus-inner {
-        border: 0;
-      }
-
-      ${disabled && css`
-        outline: none;
-      `}
-    }
-  `}
-`;
-CarouselButtonStyle.defaultProps = {
-  theme: baseTheme
-};
-const CarouselSelectorInputStyle = styled.input`
-  display: none;
-`;
-const CarouselSelectorLabelStyle = styled.label`
-  display: inline-block;
-  border-radius: var(--borderRadius100);
-  width: 10px;
-  height: 10px;
-  background: var(--colorsActionMinor200);
-  margin: 0px 4px;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const CarouselSelectorWrapperStyle = styled.div`
-  ${css`
-    height: 20px;
-    margin-top: 25px;
-    text-align: center;
-
-    ${CarouselSelectorInputStyle}:checked {
-      + ${CarouselSelectorLabelStyle} {
-        width: 10px;
-        height: 10px;
-        background: var(--colorsActionMinor400);
-        border-color: transparent;
-        position: relative;
-      }
-    }
-  `}
-`;
-const CarouselSelectorInputWrapperStyle = styled.span`
-  display: inline-block;
-  line-height: 20px;
-  vertical-align: middle;
-`;
-const CarouselSliderWrapper = styled.div`
-  transition: 0.4s;
-  display: flex;
-  position: relative;
-
-  ${({
-  elementIndex
-}) => css`
-    left: ${10 - 80 * elementIndex}%;
-
-    ${SlideStyle}:nth-of-type(${elementIndex + 1}) {
-      transform: scale(1);
-      opacity: 1;
-    }
-  `}
-`;
-const CarouselWrapperStyle = styled.div`
-  .carbon-carousel__content {
-    overflow: hidden;
-    position: relative;
-  }
-
-  ${slideAnimation};
-  ${fadeAnimation};
-`;
-export { CarouselNavigationStyle, CarouselNextButtonWrapperStyle, CarouselPreviousButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIcon, CarouselStyledIconLeft, CarouselStyledIconRight, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper };

package/esm/components/carousel/index.d.ts

@@ -1,4 +0,0 @@
-export { Carousel } from "./carousel.component";
-export { default as Slide } from "./slide";
-export type { CarouselProps } from "./carousel.component";
-export type { SlideProps } from "./slide";

package/esm/components/carousel/index.js

@@ -1,2 +0,0 @@
-export { Carousel } from "./carousel.component";
-export { default as Slide } from "./slide";

package/esm/components/carousel/slide/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./slide.component";
-export type { SlideProps } from "./slide.component";

package/esm/components/carousel/slide/index.js

@@ -1 +0,0 @@
-export { default } from "./slide.component";

package/esm/components/carousel/slide/slide.component.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export interface SlideProps {
-    /** Content of the Slide */
-    children?: React.ReactNode;
-    /** Accepts a callback function which is triggered on Slide click */
-    onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
-}
-export declare const Slide: {
-    (props: SlideProps): React.JSX.Element;
-    displayName: string;
-};
-export default Slide;

package/esm/components/carousel/slide/slide.component.js

@@ -1,9 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-/* eslint-disable react/prop-types */
-import React from "react";
-import PropTypes from "prop-types";
-import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import { SlideStyle } from "./slide.style";
-export const Slide = props => /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
-Slide.displayName = "Slide";
-export default Slide;

package/esm/components/carousel/slide/slide.style.d.ts

@@ -1,2 +0,0 @@
-declare const SlideStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { SlideStyle };

package/esm/components/carousel/slide/slide.style.js

@@ -1,32 +0,0 @@
-import styled, { css } from "styled-components";
-const SlideStyle = styled.div`
-  ${({
-  onClick
-}) => css`
-    box-sizing: border-box;
-    display: inline-block;
-    width: 100%;
-    z-index: 10;
-    border-radius: var(--borderRadius200);
-    overflow: hidden;
-
-    transition: 0.5s;
-    min-width: 80%;
-    transform: scale(0.9);
-    opacity: 0.3;
-    margin: 30px 0;
-    box-shadow: var(--boxShadow200);
-    background-color: var(--colorsUtilityYang100);
-
-    ${onClick && css`
-      :hover {
-        transition: all 0.2s ease-in;
-        transform: scale(1.02);
-        cursor: pointer;
-      }
-    `}
-  `}
-`;
-
-// eslint-disable-next-line import/prefer-default-export
-export { SlideStyle };

package/esm/components/carousel/slide.config.d.ts

@@ -1,3 +0,0 @@
-declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
-declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
-export { slideAnimation, fadeAnimation };

package/esm/components/carousel/slide.config.js

@@ -1,80 +0,0 @@
-import { css } from "styled-components";
-const animationStyle = "all 500ms cubic-bezier(.23,1.10,.69,1.01)";
-const slideAnimation = css`
-  // NEXT
-  .slide-next-enter {
-    opacity: 0;
-    left: 100%;
-    position: absolute;
-  }
-
-  .slide-next-enter.slide-next-enter-active {
-    opacity: 1;
-    left: 0;
-    transition: ${animationStyle};
-  }
-
-  .slide-next-exit {
-    opacity: 1;
-    left: 0;
-    position: relative;
-  }
-
-  .slide-next-exit.slide-next-exit-active {
-    opacity: 0;
-    left: -100%;
-    transition: ${animationStyle};
-  }
-
-  // PREVIOUS
-  .slide-previous-enter {
-    opacity: 0;
-    left: -100%;
-    position: absolute;
-  }
-
-  .slide-previous-enter.slide-previous-enter-active {
-    opacity: 1;
-    left: 0;
-    transition: ${animationStyle};
-  }
-
-  .slide-previous-exit {
-    opacity: 1;
-    left: 0;
-    position: relative;
-  }
-
-  .slide-previous-exit.slide-previous-exit-active {
-    opacity: 0;
-    left: 100%;
-    transition: ${animationStyle};
-  }
-`;
-const fadeAnimation = css`
-  // FADE
-  .carousel-transition-fade-enter {
-    opacity: 0;
-    position: absolute;
-  }
-
-  .carousel-transition-fade-enter.carousel-transition-fade-enter-active {
-    opacity: 1;
-    transition: ${animationStyle};
-  }
-
-  .carousel-transition-fade-exit {
-    opacity: 1;
-    position: relative;
-  }
-
-  .carousel-transition-fade-exit.carousel-transition-fade-exit-active {
-    opacity: 0;
-    transition: ${animationStyle};
-  }
-
-  .carbon-carousel__transition {
-    height: 100%;
-  }
-`;
-export { slideAnimation, fadeAnimation };

package/esm/components/step-sequence/index.d.ts

@@ -1,4 +0,0 @@
-export { default as StepSequence } from "./step-sequence.component";
-export type { StepSequenceProps } from "./step-sequence.component";
-export { default as StepSequenceItem } from "./step-sequence-item";
-export type { StepSequenceItemProps } from "./step-sequence-item";

package/esm/components/step-sequence/index.js

@@ -1,2 +0,0 @@
-export { default as StepSequence } from "./step-sequence.component";
-export { default as StepSequenceItem } from "./step-sequence-item";

package/esm/components/step-sequence/step-sequence-item/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./step-sequence-item.component";
-export type { StepSequenceItemProps } from "./step-sequence-item.component";

package/esm/components/step-sequence/step-sequence-item/index.js

@@ -1 +0,0 @@
-export { default } from "./step-sequence-item.component";

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-export interface StepSequenceItemProps {
-    /** Aria label */
-    ariaLabel?: string;
-    /** Hidden label to be displayed if item is complete */
-    hiddenCompleteLabel?: string;
-    /** Hidden label to be displayed if item is current */
-    hiddenCurrentLabel?: string;
-    /** Value to be displayed before text for uncomplete steps */
-    indicator: string;
-    /** Flag to hide the indicator for uncomplete steps */
-    hideIndicator?: boolean;
-    /** Status for the step */
-    status?: "complete" | "current" | "incomplete";
-    /** Content to be displayed */
-    children: React.ReactNode;
-}
-export declare const StepSequenceItem: ({ hideIndicator, indicator, status, hiddenCompleteLabel, hiddenCurrentLabel, children, ariaLabel, ...rest }: StepSequenceItemProps) => React.JSX.Element;
-export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -1,43 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useContext } from "react";
-import PropTypes from "prop-types";
-import { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
-import Icon from "../../icon";
-import { StepSequenceContext } from "../step-sequence.component";
-export const StepSequenceItem = ({
-  hideIndicator = false,
-  indicator,
-  status = "incomplete",
-  hiddenCompleteLabel,
-  hiddenCurrentLabel,
-  children,
-  ariaLabel,
-  ...rest
-}) => {
-  const {
-    orientation
-  } = useContext(StepSequenceContext);
-  const indicatorText = () => {
-    return !hideIndicator ? /*#__PURE__*/React.createElement(StyledStepSequenceItemIndicator, null, indicator) : null;
-  };
-  const icon = () => status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
-    type: "tick"
-  }) : indicatorText();
-  const hiddenLabel = () => {
-    if (hiddenCompleteLabel && status === "complete") {
-      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCompleteLabel);
-    }
-    if (hiddenCurrentLabel && status === "current") {
-      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCurrentLabel);
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement(StyledStepSequenceItem, _extends({
-    "data-component": "step-sequence-item",
-    orientation: orientation,
-    status: status,
-    key: `step-seq-item-${indicator}`,
-    "aria-label": ariaLabel
-  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
-};
-export default StepSequenceItem;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.d.ts

@@ -1,6 +0,0 @@
-import { StepSequenceProps } from "../step-sequence.component";
-import { StepSequenceItemProps } from "./step-sequence-item.component";
-export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">, never>;
-export declare const StyledStepSequenceItemContent: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledStepSequenceItemHiddenLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledStepSequenceItemIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.style.js

@@ -1,96 +0,0 @@
-import styled, { css } from "styled-components";
-import StyledIcon from "../../icon/icon.style";
-export const StyledStepSequenceItem = styled.li`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  text-align: right;
-  list-style-type: none;
-  color: var(--colorsUtilityYin055);
-
-  ${({
-  orientation,
-  status
-}) => {
-  const side = orientation === "vertical" ? "left" : "top";
-  return css`
-      &::before {
-        content: "";
-        flex-grow: 1;
-        display: block;
-        margin: 0 16px;
-        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
-      }
-
-      & span {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      ${StyledIcon} {
-        margin-right: 8px;
-        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-      }
-
-      &:first-child {
-        flex-grow: 0;
-
-        &::before {
-          display: none;
-        }
-      }
-
-      ${status === "current" && css`
-          color: var(--colorsUtilityYin090);
-
-          &::before {
-            border-${side}-color: var(--colorsUtilityYin090);
-            border-${side}-style: solid;
-          }
-        `}
-
-      ${status === "complete" && css`
-          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-
-          &::before {
-            border-${side}-color: var(
-              --colorsBaseTheme,
-              var(--colorsSemanticPositive500)
-            );
-            border-${side}-style: solid;
-          }
-        `}
-
-      ${orientation === "vertical" && css`
-          flex-direction: column;
-          align-items: flex-start;
-
-          &::before {
-            flex-grow: 0;
-            border-left-width: var(--sizing025);
-            height: 100%;
-            min-height: var(--sizing300);
-            margin: 12px 8px;
-          }
-        `}
-    `;
-}}
-`;
-export const StyledStepSequenceItemContent = styled.span`
-  display: flex;
-`;
-export const StyledStepSequenceItemHiddenLabel = styled.span`
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-`;
-export const StyledStepSequenceItemIndicator = styled.span`
-  display: block;
-  min-width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  text-align: center;
-`;

package/esm/components/step-sequence/step-sequence.component.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-export declare const StepSequenceContext: React.Context<{
-    orientation: "horizontal" | "vertical";
-}>;
-export interface StepSequenceProps extends SpaceProps {
-    /** Step sequence items to be rendered */
-    children: React.ReactNode;
-    /** The direction that step sequence items should be rendered */
-    orientation?: "horizontal" | "vertical";
-}
-export declare const StepSequence: ({ children, orientation, ...props }: StepSequenceProps) => React.JSX.Element;
-export default StepSequence;