@dfds-ui/react-components 0.9.11-alpha.ca6fd903 → 0.9.11-alpha.d0bfdd42

package/cjs/side-sheet/SideSheetCloseButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconButtonSize } from '../button/IconButton';
+export declare type SideSheetCloseButtonProps = {
+    onRequestClose?: () => void;
+    className?: string;
+    icon?: React.ElementType;
+    size?: IconButtonSize;
+    tabIndex?: number;
+    closeLabel?: string;
+    children?: React.ReactNode;
+};
+export declare const SideSheetCloseButton: ({ onRequestClose, className, icon, size, closeLabel, ...rest }: SideSheetCloseButtonProps) => JSX.Element;
+export default SideSheetCloseButton;

package/cjs/side-sheet/SideSheetContent.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare type SideSheetFooterProps = {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const SideSheetContent: ({ children, className, ...rest }: SideSheetFooterProps) => JSX.Element;
+export default SideSheetContent;

package/cjs/side-sheet/SideSheetFooter.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare type SideSheetFooterProps = {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const SideSheetFooter: ({ children, className, ...rest }: SideSheetFooterProps) => JSX.Element;
+export default SideSheetFooter;

package/cjs/side-sheet/SideSheetHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type ModalHeaderProps = {
+    className?: string;
+    sticky?: boolean;
+    children?: ReactNode;
+    noDivider?: boolean;
+};
+export declare const SideSheetHeader: ({ children, className, sticky, noDivider, ...rest }: ModalHeaderProps) => JSX.Element;
+export default SideSheetHeader;

package/cjs/side-sheet/SideSheetHeadline.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare type SideSheetHeadlineProps = {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const SideSheetHeadline: ({ className, children }: SideSheetHeadlineProps) => JSX.Element;
+export default SideSheetHeadline;

package/cjs/side-sheet/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SideSheet } from './SideSheet';
+export { default as SideSheetFooter } from './SideSheetFooter';
+export { default as SideSheetContent } from './SideSheetContent';
+export * from './SideSheet';

package/cjs/site-layout/SiteLayout.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+declare type RenderAs = {
+    as?: React.ElementType;
+};
+declare type LayoutProps = {
+    fullWidth?: boolean;
+    className?: string;
+} & RenderAs;
+declare type LayoutChildProps = {
+    fullWidth?: boolean;
+    className?: string;
+} & RenderAs;
+export declare const LayoutGrid: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    fullWidth?: boolean | undefined;
+    className?: string | undefined;
+} & RenderAs, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Layout: React.FunctionComponent<LayoutProps>;
+export declare const LayoutHeader: React.FunctionComponent<LayoutChildProps>;
+export declare const LayoutMain: React.FunctionComponent<LayoutChildProps>;
+export declare const LayoutFooter: React.FunctionComponent<LayoutChildProps>;
+declare const _default: {
+    Grid: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        className?: string | undefined;
+    } & RenderAs, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Header: React.FunctionComponent<LayoutChildProps>;
+    Main: React.FunctionComponent<LayoutChildProps>;
+    Footer: React.FunctionComponent<LayoutChildProps>;
+};
+export default _default;

package/cjs/site-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SiteLayout } from './SiteLayout';
+export * from './SiteLayout';

package/cjs/skeleton/Skeleton.d.ts

@@ -0,0 +1,6 @@
+export interface SkeletonProps {
+    variant: SkeletonVariant;
+}
+export declare type SkeletonVariant = 'text' | 'circle' | 'rect';
+export declare const Skeleton: ({ variant, ...rest }: SkeletonProps) => JSX.Element;
+export default Skeleton;

package/cjs/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

package/cjs/social-media-link-list/SocialMediaLinkList.d.ts

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+export declare type SocialMediaLinkListProps = {
+    instagramLink?: string;
+    facebookLink?: string;
+    blogLink?: string;
+    twitterLink?: string;
+    linkedinLink?: string;
+    youtubeLink?: string;
+    mailshareLink?: string;
+    iconSize?: string;
+    noPadding?: boolean;
+    colorOverwrite?: string;
+};
+export declare const SoMeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & import("../flexbox/FlexBox").FlexBoxProps & {
+    as?: React.ElementType<any> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & SocialMediaLinkListProps, {}, {}>;
+declare type socialMediaLinkListComponent = FunctionComponent<SocialMediaLinkListProps>;
+export declare const SocialMediaLinkList: socialMediaLinkListComponent;
+export default SocialMediaLinkList;

package/cjs/social-media-link-list/index.d.ts

@@ -0,0 +1 @@
+export * from './SocialMediaLinkList';

package/cjs/spinner/Spinner.d.ts

@@ -0,0 +1,57 @@
+import { PolymorphicComponentProps } from '../common/polymorphic';
+declare type Color = 'dark' | 'secondary' | 'light';
+export declare type SpinnerProps = {
+    /**
+     * Indicates that Spinner will show up instantaneously (instead of fading in).
+     *
+     */
+    instant?: boolean;
+    /**
+     * Specifies the size of the Spinner.
+     *
+     * @deprecated Use css instead.
+     */
+    size?: string;
+    /**
+     * Class name to be assigned to component.
+     */
+    className?: string;
+    /**
+     * Set the color variant to use.
+     */
+    color?: Color;
+} & PolymorphicComponentProps;
+/**
+ * A spinner is used to give user a sense of progress, when the time required to complete the given task is not known.
+ */
+export declare function Spinner({ instant, size, className, color, as, ...rest }: SpinnerProps): JSX.Element;
+export declare namespace Spinner {
+    var displayName: string;
+}
+/**
+ * @deprecated Style the regular spinner to achieve the desired effect.
+ */
+export declare const CenteredSpinner: import("@emotion/styled").StyledComponent<{
+    /**
+     * Indicates that Spinner will show up instantaneously (instead of fading in).
+     *
+     */
+    instant?: boolean | undefined;
+    /**
+     * Specifies the size of the Spinner.
+     *
+     * @deprecated Use css instead.
+     */
+    size?: string | undefined;
+    /**
+     * Class name to be assigned to component.
+     */
+    className?: string | undefined;
+    /**
+     * Set the color variant to use.
+     */
+    color?: Color | undefined;
+} & PolymorphicComponentProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export default Spinner;

package/cjs/spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/cjs/stepper/Step.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { ListItemProps } from './../lists/ListItem';
+declare type StepProps = {
+    label: ReactNode;
+    children: ReactNode;
+    listItemProps?: ListItemProps;
+};
+declare const _default: React.NamedExoticComponent<StepProps>;
+export default _default;

package/cjs/stepper/Step.js

@@ -3,21 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StepContext = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Stepper = require("./Stepper.styles");
+var _react2 = require("@emotion/react");
 
-var _Stepper2 = require("./Stepper");
+var _core = require("@material-ui/core");
 
-var _StepButton = _interopRequireDefault(require("./StepButton"));
+var _Stepper = require("./Stepper");
 
-var _StepLabel = _interopRequireDefault(require("./StepLabel"));
+var _ListItem = _interopRequireDefault(require("./../lists/ListItem"));
 
-var _react2 = require("@emotion/react");
+var _v = _interopRequireDefault(require("uuid/v4"));
 
-const _excluded = ["editable", "index", "label", "active", "completed", "disabled"];
+var _theme = require("@dfds-ui/theme");
+
+const _excluded = ["children", "label", "listItemProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,63 +29,63 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || 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); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-const StepContext = /*#__PURE__*/(0, _react.createContext)({
-  completed: false,
-  active: false,
-  disabled: false,
-  editable: true,
-  index: 0
-});
-exports.StepContext = StepContext;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const listItemStyles = ({
+  isActive
+}) => /*#__PURE__*/(0, _react2.css)("background-color:", isActive ? _theme.theme.colors.secondary.light : _theme.theme.colors.surface.secondary, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwcGVyL1N0ZXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdtRSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3RlcHBlci9TdGVwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIEZ1bmN0aW9uQ29tcG9uZW50LCB1c2VFZmZlY3QsIHVzZVN0YXRlLCBtZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN0ZXAgYXMgU3RlcFdyYXBwZXIsIFN0ZXBDb250ZW50IH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnXG5pbXBvcnQgeyB1c2VTdGVwcGVyQ29udGV4dCB9IGZyb20gJy4vU3RlcHBlcidcbmltcG9ydCBMaXN0SXRlbSwgeyBMaXN0SXRlbVByb3BzIH0gZnJvbSAnLi8uLi9saXN0cy9MaXN0SXRlbSdcbmltcG9ydCB1dWlkIGZyb20gJ3V1aWQvdjQnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG50eXBlIFN0ZXBQcm9wcyA9IHsgbGFiZWw6IFJlYWN0Tm9kZTsgY2hpbGRyZW46IFJlYWN0Tm9kZTsgbGlzdEl0ZW1Qcm9wcz86IExpc3RJdGVtUHJvcHMgfVxudHlwZSBTdGVwQ29tcG9uZW50ID0gRnVuY3Rpb25Db21wb25lbnQ8U3RlcFByb3BzPlxuXG5jb25zdCBsaXN0SXRlbVN0eWxlcyA9ICh7IGlzQWN0aXZlIH06IHsgaXNBY3RpdmU6IGJvb2xlYW4gfSkgPT4gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2lzQWN0aXZlID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5saWdodCA6IHRoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG5gXG5cbmNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICAuTXVpU3RlcENvbnRlbnQtcm9vdCB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIG1hcmdpbjogMHB4O1xuICAgIHBhZGRpbmc6IDBweDtcbiAgfVxuYFxuXG5jb25zdCBTdGVwOiBTdGVwQ29tcG9uZW50ID0gKHsgY2hpbGRyZW4sIGxhYmVsLCBsaXN0SXRlbVByb3BzLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IFtzdGVwSWRdID0gdXNlU3RhdGUodXVpZCgpKVxuICBjb25zdCB7IHNldFN0ZXAsIGFjdGl2ZVN0ZXAgfSA9IHVzZVN0ZXBwZXJDb250ZXh0KClcbiAgY29uc3QgaXNBY3RpdmUgPSBzdGVwSWQgPT09IGFjdGl2ZVN0ZXBcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB1c2VFZmZlY3QoKCkgPT4gc2V0U3RlcChzdGVwSWQpLCBbXSlcbiAgcmV0dXJuIChcbiAgICA8U3RlcFdyYXBwZXIgey4uLnByb3BzfSBjc3M9e3N0ZXBDb250ZW50U3R5bGVzfT5cbiAgICAgIDxMaXN0SXRlbSBhcz1cImRpdlwiIGNzcz17bGlzdEl0ZW1TdHlsZXMoeyBpc0FjdGl2ZSB9KX0gey4uLmxpc3RJdGVtUHJvcHN9PlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L0xpc3RJdGVtPlxuICAgICAgPFN0ZXBDb250ZW50PntjaGlsZHJlbn08L1N0ZXBDb250ZW50PlxuICAgIDwvU3RlcFdyYXBwZXI+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgbWVtbyhTdGVwKVxuIl19 */");
+
+const stepContentStyles = process.env.NODE_ENV === "production" ? {
+  name: "1nyoacf",
+  styles: ".MuiStepContent-root{border:none;margin:0px;padding:0px;}"
+} : {
+  name: "ndmke3-stepContentStyles",
+  styles: ".MuiStepContent-root{border:none;margin:0px;padding:0px;};label:stepContentStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zdGVwcGVyL1N0ZXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWU2QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvc3RlcHBlci9TdGVwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIEZ1bmN0aW9uQ29tcG9uZW50LCB1c2VFZmZlY3QsIHVzZVN0YXRlLCBtZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IFN0ZXAgYXMgU3RlcFdyYXBwZXIsIFN0ZXBDb250ZW50IH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnXG5pbXBvcnQgeyB1c2VTdGVwcGVyQ29udGV4dCB9IGZyb20gJy4vU3RlcHBlcidcbmltcG9ydCBMaXN0SXRlbSwgeyBMaXN0SXRlbVByb3BzIH0gZnJvbSAnLi8uLi9saXN0cy9MaXN0SXRlbSdcbmltcG9ydCB1dWlkIGZyb20gJ3V1aWQvdjQnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG50eXBlIFN0ZXBQcm9wcyA9IHsgbGFiZWw6IFJlYWN0Tm9kZTsgY2hpbGRyZW46IFJlYWN0Tm9kZTsgbGlzdEl0ZW1Qcm9wcz86IExpc3RJdGVtUHJvcHMgfVxudHlwZSBTdGVwQ29tcG9uZW50ID0gRnVuY3Rpb25Db21wb25lbnQ8U3RlcFByb3BzPlxuXG5jb25zdCBsaXN0SXRlbVN0eWxlcyA9ICh7IGlzQWN0aXZlIH06IHsgaXNBY3RpdmU6IGJvb2xlYW4gfSkgPT4gY3NzYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2lzQWN0aXZlID8gdGhlbWUuY29sb3JzLnNlY29uZGFyeS5saWdodCA6IHRoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG5gXG5cbmNvbnN0IHN0ZXBDb250ZW50U3R5bGVzID0gY3NzYFxuICAuTXVpU3RlcENvbnRlbnQtcm9vdCB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIG1hcmdpbjogMHB4O1xuICAgIHBhZGRpbmc6IDBweDtcbiAgfVxuYFxuXG5jb25zdCBTdGVwOiBTdGVwQ29tcG9uZW50ID0gKHsgY2hpbGRyZW4sIGxhYmVsLCBsaXN0SXRlbVByb3BzLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IFtzdGVwSWRdID0gdXNlU3RhdGUodXVpZCgpKVxuICBjb25zdCB7IHNldFN0ZXAsIGFjdGl2ZVN0ZXAgfSA9IHVzZVN0ZXBwZXJDb250ZXh0KClcbiAgY29uc3QgaXNBY3RpdmUgPSBzdGVwSWQgPT09IGFjdGl2ZVN0ZXBcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB1c2VFZmZlY3QoKCkgPT4gc2V0U3RlcChzdGVwSWQpLCBbXSlcbiAgcmV0dXJuIChcbiAgICA8U3RlcFdyYXBwZXIgey4uLnByb3BzfSBjc3M9e3N0ZXBDb250ZW50U3R5bGVzfT5cbiAgICAgIDxMaXN0SXRlbSBhcz1cImRpdlwiIGNzcz17bGlzdEl0ZW1TdHlsZXMoeyBpc0FjdGl2ZSB9KX0gey4uLmxpc3RJdGVtUHJvcHN9PlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L0xpc3RJdGVtPlxuICAgICAgPFN0ZXBDb250ZW50PntjaGlsZHJlbn08L1N0ZXBDb250ZW50PlxuICAgIDwvU3RlcFdyYXBwZXI+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgbWVtbyhTdGVwKVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 
 const Step = _ref => {
-  let _ref$editable = _ref.editable,
-      editable = _ref$editable === void 0 ? true : _ref$editable,
-      index = _ref.index,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      activeProp = _ref.active,
-      completedProp = _ref.completed,
-      disabledProp = _ref.disabled,
+  let children = _ref.children,
+      label = _ref.label,
+      listItemProps = _ref.listItemProps,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const _useContext = (0, _react.useContext)(_Stepper2.StepperContext),
-        activeStep = _useContext.activeStep,
-        orientation = _useContext.orientation,
-        nonSequential = _useContext.nonSequential;
-
-  let _activeProp = activeProp,
-      active = _activeProp === void 0 ? false : _activeProp,
-      _completedProp = completedProp,
-      completed = _completedProp === void 0 ? false : _completedProp,
-      _disabledProp = disabledProp,
-      disabled = _disabledProp === void 0 ? false : _disabledProp;
-
-  if (activeStep === index) {
-    active = activeProp !== undefined ? activeProp : true;
-  } else if (!nonSequential && activeStep > index) {
-    completed = completedProp !== undefined ? completedProp : true;
-  } else if (!nonSequential && activeStep < index) {
-    disabled = disabledProp !== undefined ? disabledProp : true;
-  }
-
-  const contextValue = _react.default.useMemo(() => ({
-    index,
-    active,
-    completed,
-    disabled,
-    editable
-  }), [index, active, completed, disabled, editable]);
-
-  return (0, _react2.jsx)(StepContext.Provider, {
-    value: contextValue
-  }, (0, _react2.jsx)("div", _extends({
-    css: _Stepper.stepWrapperStyles
-  }, props), (0, _react2.jsx)(_StepButton.default, null), label && (0, _react2.jsx)(_StepLabel.default, null, label)));
+  const _useState = (0, _react.useState)((0, _v.default)()),
+        _useState2 = _slicedToArray(_useState, 1),
+        stepId = _useState2[0];
+
+  const _useStepperContext = (0, _Stepper.useStepperContext)(),
+        setStep = _useStepperContext.setStep,
+        activeStep = _useStepperContext.activeStep;
+
+  const isActive = stepId === activeStep; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  (0, _react.useEffect)(() => setStep(stepId), []);
+  return (0, _react2.jsx)(_core.Step, _extends({}, props, {
+    css: stepContentStyles
+  }), (0, _react2.jsx)(_ListItem.default, _extends({
+    as: "div",
+    css: listItemStyles({
+      isActive
+    })
+  }, listItemProps), label), (0, _react2.jsx)(_core.StepContent, null, children));
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(Step);

package/cjs/stepper/Stepper.d.ts

@@ -0,0 +1,15 @@
+import React, { SetStateAction, Dispatch, ReactNode } from 'react';
+declare type StepperProps = {
+    children: ReactNode;
+    initialStep?: number;
+};
+export declare const useStepperContext: () => {
+    activeStep: string;
+    setStep: (id: string) => void;
+    setNext: () => Dispatch<SetStateAction<number>> | void;
+    setBack: () => Dispatch<SetStateAction<number>> | void;
+    setReset: () => Dispatch<SetStateAction<number>> | void;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+};
+declare const _default: React.NamedExoticComponent<StepperProps>;
+export default _default;

package/cjs/stepper/Stepper.js

@@ -3,57 +3,90 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StepperContext = void 0;
+exports.default = exports.useStepperContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Stepper = require("./Stepper.styles");
+var _core = require("@material-ui/core");
 
 var _react2 = require("@emotion/react");
 
+const _excluded = ["children", "initialStep"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function _extends() { _extends = Object.assign || 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); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-const StepperContext = /*#__PURE__*/(0, _react.createContext)({
-  activeStep: 0,
-  orientation: 'horizontal',
-  nonSequential: false
-});
-exports.StepperContext = StepperContext;
-
-const StepperProvider = ({
-  children,
-  activeStep = 0,
-  nonSequential = false,
-  orientation = 'horizontal'
-}) => {
-  const childrenArray = _react.default.Children.toArray(children).filter(Boolean);
-
-  const stepArray = childrenArray.map((child, index) => {
-    return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread({
-      index,
-      last: index + 1 === childrenArray.length
-    }, child.props));
-  });
-
-  const contextValue = _react.default.useMemo(() => ({
-    activeStep,
-    nonSequential,
-    orientation
-  }), [activeStep, nonSequential, orientation]);
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const StepperContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+const useStepperContext = () => {
+  const context = (0, _react.useContext)(StepperContext);
+
+  if (context === undefined) {
+    throw new Error('useStepperContext must be used within a StepperProvider');
+  }
+
+  return context;
+};
+
+exports.useStepperContext = useStepperContext;
+
+const StepperProvider = _ref => {
+  let children = _ref.children,
+      initialStep = _ref.initialStep,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const _useState = (0, _react.useState)([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        steps = _useState2[0],
+        setSteps = _useState2[1];
+
+  const _useState3 = (0, _react.useState)(initialStep || 0),
+        _useState4 = _slicedToArray(_useState3, 2),
+        activeIndex = _useState4[0],
+        setActiveIndex = _useState4[1];
 
+  const activeStep = steps[activeIndex];
+  const setStep = (0, _react.useCallback)(newStep => setSteps(prevSteps => [...prevSteps, newStep]), []);
+  const setNext = (0, _react.useCallback)(() => setActiveIndex(prevIndex => prevIndex + 1), []);
+  const setBack = (0, _react.useCallback)(() => setActiveIndex(prevIndex => prevIndex - 1), []);
+  const setReset = (0, _react.useCallback)(() => setActiveIndex(0), []);
   return (0, _react2.jsx)(StepperContext.Provider, {
-    value: contextValue
-  }, (0, _react2.jsx)("div", {
-    css: _Stepper.stepperWrapperStyles
-  }, stepArray));
+    value: {
+      setStep,
+      activeStep,
+      setNext,
+      setBack,
+      setReset,
+      setActiveIndex
+    }
+  }, (0, _react2.jsx)(_core.Stepper, _extends({
+    style: {
+      padding: 0
+    }
+  }, props, {
+    connector: (0, _react2.jsx)(_react.default.Fragment, null),
+    orientation: "vertical",
+    activeStep: activeIndex
+  }), children));
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(StepperProvider);

package/cjs/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Step } from './Step';
+export { default as Stepper, useStepperContext } from './Stepper';

package/cjs/stepper/index.js

@@ -15,9 +15,19 @@ Object.defineProperty(exports, "Stepper", {
     return _Stepper.default;
   }
 });
+Object.defineProperty(exports, "useStepperContext", {
+  enumerable: true,
+  get: function get() {
+    return _Stepper.useStepperContext;
+  }
+});
 
 var _Step = _interopRequireDefault(require("./Step"));
 
-var _Stepper = _interopRequireDefault(require("./Stepper"));
+var _Stepper = _interopRequireWildcard(require("./Stepper"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cjs/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as legacyMedia, legacyGenerateMedia } from './media';
+export { default as theme } from './theme';
+export { visuallyHidden } from './style-helpers';

package/cjs/styles/media.d.ts

@@ -0,0 +1,21 @@
+declare const defaultBreakPoints: {
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+declare type BreakPoint = keyof typeof defaultBreakPoints | number;
+export declare function legacyGenerateMedia(breakPoints: typeof defaultBreakPoints): {
+    lt: (breakPoint: BreakPoint) => string;
+    gt: (breakPoint: BreakPoint) => string;
+    bt: (firstBreakpoint: BreakPoint, secondBreakpoint: BreakPoint) => string;
+    tablet: () => string;
+};
+export declare const legacyMedia: {
+    lt: (breakPoint: BreakPoint) => string;
+    gt: (breakPoint: BreakPoint) => string;
+    bt: (firstBreakpoint: BreakPoint, secondBreakpoint: BreakPoint) => string;
+    tablet: () => string;
+};
+export default legacyMedia;

package/cjs/styles/rem.d.ts

@@ -0,0 +1 @@
+export declare const rem: (targetPixelValue: number, base?: number) => string;

package/cjs/styles/style-helpers.d.ts

@@ -0,0 +1 @@
+export declare const visuallyHidden: () => import("@emotion/react").SerializedStyles;

package/cjs/styles/theme.d.ts

@@ -0,0 +1,39 @@
+export declare const theme: {
+    colors: {
+        yesGreen: string;
+        cautionAmber: string;
+        noRed: string;
+        linkBlue: string;
+        linkHover: string;
+        actionBlue: string;
+        actionHover: string;
+        actionMedium: string;
+        actionLight: string;
+        primaryOrange: string;
+        primaryHover: string;
+        uiEnabled: string;
+        uiDisabled: string;
+        textGrey: string;
+        textMedium: string;
+        textLight: string;
+        groupBlue: string;
+        groupMedium: string;
+        groupLight: string;
+        backgroundGrey: string;
+        white: string;
+        whiteHover: string;
+    };
+    fontFamily: string;
+    spacing: {
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    uiRoundness: string;
+};
+export declare type ThemeInterface = typeof theme;
+export default theme;