@elliemae/ds-stepper 2.0.0-rc.18

package/cjs/Stepper.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var uid = require('uid');
+var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('./props.js');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 _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__default["default"](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; }
+
+const DSStepper = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.dsStepperProps);
+  const {
+    steps,
+    current,
+    visited
+  } = propsWithDefaults;
+  const stepsArray = React__default["default"].useMemo(() => new Array(steps).fill(1), [steps]);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StepperWrapper, _objectSpread(_objectSpread(_objectSpread({
+    steps: steps,
+    current: current,
+    visited: visited
+  }, dsPropsHelpers.getAriaProps(props$1)), dsPropsHelpers.getDataProps(props$1)), {}, {
+    children: stepsArray.map((item, index) => /*#__PURE__*/_jsx__default["default"](styled.Step // eslint-disable-next-line react/no-array-index-key
+    , {
+      active: current === index,
+      visited: visited.includes(index),
+      "data-testid": props$1['data-testid'] ? "".concat(props$1['data-testid'], "-step") : undefined,
+      "data-active": current === index,
+      "data-visited": visited.includes(index)
+    }, "".concat(uid.uid(4), "step-key-").concat(index)))
+  }));
+};
+
+const StepperWithSchema = reactDesc.describe(DSStepper);
+StepperWithSchema.propTypes = props.dsStepperProps;
+
+exports.DSStepper = DSStepper;
+exports.StepperWithSchema = StepperWithSchema;

package/cjs/StepperButton.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
+var props = require('./props.js');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _ChevronLeft, _ChevronRight;
+
+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 _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__default["default"](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; }
+
+const DSStepperButton = props$1 => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultButtonProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, props.dsStepperButtonProps);
+  const {
+    chevron,
+    fontSize,
+    label,
+    disabled,
+    onClick,
+    innerRef
+  } = propsWithDefaults;
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledButton, _objectSpread(_objectSpread(_objectSpread({
+    disabled: disabled,
+    onClick: onClick,
+    innerRef: innerRef,
+    buttonType: dsButton.BUTTON_TYPES.TEXT,
+    fontSize: fontSize
+  }, dsPropsHelpers.getAriaProps(props$1)), dsPropsHelpers.getDataProps(props$1)), {}, {
+    children: [chevron === 'left' ? _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {})) : null, /*#__PURE__*/_jsx__default["default"](styled.Label, {
+      value: label
+    }), chevron === 'right' ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {})) : null]
+  }));
+};
+
+const DSStepperButtonWithSchema = reactDesc.describe(DSStepperButton);
+DSStepperButtonWithSchema.propTypes = props.dsStepperButtonProps;
+
+exports.DSStepperButton = DSStepperButton;
+exports.DSStepperButtonWithSchema = DSStepperButtonWithSchema;

package/cjs/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Stepper = require('./Stepper.js');
+var StepperButton = require('./StepperButton.js');
+
+
+
+exports.DSStepper = Stepper.DSStepper;
+exports.StepperWithSchema = Stepper.StepperWithSchema;
+exports.DSStepperButton = StepperButton.DSStepperButton;
+exports.DSStepperButtonWithSchema = StepperButton.DSStepperButtonWithSchema;

package/cjs/props.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+
+const BUTTON_SIZES = {
+  normal: 'normal',
+  large: 'large'
+};
+const defaultProps = {
+  steps: 5,
+  current: undefined,
+  visited: []
+};
+const dsStepperProps = {
+  steps: reactDesc.PropTypes.number.description('Number of steps').isRequired,
+  current: reactDesc.PropTypes.number.description('Index of active step'),
+  visited: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('Array of visited steps').isRequired
+};
+const defaultButtonProps = {
+  chevron: undefined,
+  fontSize: BUTTON_SIZES.normal,
+  disabled: false,
+  onClick: lodash.noop
+};
+const dsStepperButtonProps = {
+  chevron: reactDesc.PropTypes.oneOf(['left', 'right', null]).description('Chevron icon position, if null/undefined no chevron will be shown').defaultValue(null),
+  fontSize: reactDesc.PropTypes.oneOf(['normal', 'large']).description('Label size, used for marking last step').defaultValue('normal'),
+  label: reactDesc.PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,
+  disabled: reactDesc.PropTypes.bool.description('Adds disabled state.'),
+  onClick: reactDesc.PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.func]).description('Inner ref to button component.'),
+  'aria-': reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.bool]).description('accept all the aria-* props, MUST receive aria-label'),
+  'data-': reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.bool]).description('accept all the data-* props')
+};
+
+exports.defaultButtonProps = defaultButtonProps;
+exports.defaultProps = defaultProps;
+exports.dsStepperButtonProps = dsStepperButtonProps;
+exports.dsStepperProps = dsStepperProps;

package/cjs/styled.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsButton = require('@elliemae/ds-button');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StepperWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-fgtqnq-0"
+})(["display:grid;align-items:flex-end;grid-template-columns repeat(", ",1fr);column-gap:", ";"], props => props.steps, props => props.theme.space.xxs);
+const Step = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-fgtqnq-1"
+})(["display:grid;border-radius:1px;height:", ";background:", ";"], props => props.active ? '5px' : '3px', props => props.active || props.visited ? props.theme.colors.brand[700] : props.theme.colors.neutral[400]);
+const Label = /*#__PURE__*/styled__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText).withConfig({
+  componentId: "sc-fgtqnq-2"
+})(["position:relative;top:1px;"]);
+const StyledButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+  componentId: "sc-fgtqnq-3"
+})(["white-space:nowrap;overflow:hidden;max-width:100%;padding-left:", ";padding-right:", ";& > span:not(.em-ds-icon){position:relative;top:", ";font-size:", ";}"], props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.fontSize === 'large' ? '2px' : '1px', props => props.fontSize === 'large' ? '22px' : '18px');
+
+exports.Label = Label;
+exports.Step = Step;
+exports.StepperWrapper = StepperWrapper;
+exports.StyledButton = StyledButton;

package/esm/Stepper.js

@@ -0,0 +1,50 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React from 'react';
+import { uid } from 'uid';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';
+import { dsStepperProps, defaultProps } from './props.js';
+import { StepperWrapper, Step } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 _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; }
+
+const DSStepper = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, dsStepperProps);
+  const {
+    steps,
+    current,
+    visited
+  } = propsWithDefaults;
+  const stepsArray = React.useMemo(() => new Array(steps).fill(1), [steps]);
+  return /*#__PURE__*/jsx(StepperWrapper, _objectSpread(_objectSpread(_objectSpread({
+    steps: steps,
+    current: current,
+    visited: visited
+  }, getAriaProps(props)), getDataProps(props)), {}, {
+    children: stepsArray.map((item, index) => /*#__PURE__*/_jsx(Step // eslint-disable-next-line react/no-array-index-key
+    , {
+      active: current === index,
+      visited: visited.includes(index),
+      "data-testid": props['data-testid'] ? "".concat(props['data-testid'], "-step") : undefined,
+      "data-active": current === index,
+      "data-visited": visited.includes(index)
+    }, "".concat(uid(4), "step-key-").concat(index)))
+  }));
+};
+
+const StepperWithSchema = describe(DSStepper);
+StepperWithSchema.propTypes = dsStepperProps;
+
+export { DSStepper, StepperWithSchema };

package/esm/StepperButton.js

@@ -0,0 +1,50 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';
+import { BUTTON_TYPES } from '@elliemae/ds-button';
+import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
+import { dsStepperButtonProps, defaultButtonProps } from './props.js';
+import { StyledButton, Label } from './styled.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _ChevronLeft, _ChevronRight;
+
+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 _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; }
+
+const DSStepperButton = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultButtonProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, dsStepperButtonProps);
+  const {
+    chevron,
+    fontSize,
+    label,
+    disabled,
+    onClick,
+    innerRef
+  } = propsWithDefaults;
+  return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread(_objectSpread({
+    disabled: disabled,
+    onClick: onClick,
+    innerRef: innerRef,
+    buttonType: BUTTON_TYPES.TEXT,
+    fontSize: fontSize
+  }, getAriaProps(props)), getDataProps(props)), {}, {
+    children: [chevron === 'left' ? _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {})) : null, /*#__PURE__*/_jsx(Label, {
+      value: label
+    }), chevron === 'right' ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {})) : null]
+  }));
+};
+
+const DSStepperButtonWithSchema = describe(DSStepperButton);
+DSStepperButtonWithSchema.propTypes = dsStepperButtonProps;
+
+export { DSStepperButton, DSStepperButtonWithSchema };

package/esm/index.js

@@ -0,0 +1,2 @@
+export { DSStepper, StepperWithSchema } from './Stepper.js';
+export { DSStepperButton, DSStepperButtonWithSchema } from './StepperButton.js';

package/esm/props.js

@@ -0,0 +1,35 @@
+import { noop } from 'lodash';
+import { PropTypes } from 'react-desc';
+
+const BUTTON_SIZES = {
+  normal: 'normal',
+  large: 'large'
+};
+const defaultProps = {
+  steps: 5,
+  current: undefined,
+  visited: []
+};
+const dsStepperProps = {
+  steps: PropTypes.number.description('Number of steps').isRequired,
+  current: PropTypes.number.description('Index of active step'),
+  visited: PropTypes.arrayOf(PropTypes.number).description('Array of visited steps').isRequired
+};
+const defaultButtonProps = {
+  chevron: undefined,
+  fontSize: BUTTON_SIZES.normal,
+  disabled: false,
+  onClick: noop
+};
+const dsStepperButtonProps = {
+  chevron: PropTypes.oneOf(['left', 'right', null]).description('Chevron icon position, if null/undefined no chevron will be shown').defaultValue(null),
+  fontSize: PropTypes.oneOf(['normal', 'large']).description('Label size, used for marking last step').defaultValue('normal'),
+  label: PropTypes.string.description('Text Label, this only accepts text, no custom JSX').isRequired,
+  disabled: PropTypes.bool.description('Adds disabled state.'),
+  onClick: PropTypes.func.description('OnClick callback handler.').defaultValue('()=>{}'),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),
+  'aria-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the aria-* props, MUST receive aria-label'),
+  'data-': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).description('accept all the data-* props')
+};
+
+export { defaultButtonProps, defaultProps, dsStepperButtonProps, dsStepperProps };

package/esm/styled.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+
+const StepperWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-fgtqnq-0"
+})(["display:grid;align-items:flex-end;grid-template-columns repeat(", ",1fr);column-gap:", ";"], props => props.steps, props => props.theme.space.xxs);
+const Step = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-fgtqnq-1"
+})(["display:grid;border-radius:1px;height:", ";background:", ";"], props => props.active ? '5px' : '3px', props => props.active || props.visited ? props.theme.colors.brand[700] : props.theme.colors.neutral[400]);
+const Label = /*#__PURE__*/styled(SimpleTruncatedTooltipText).withConfig({
+  componentId: "sc-fgtqnq-2"
+})(["position:relative;top:1px;"]);
+const StyledButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-fgtqnq-3"
+})(["white-space:nowrap;overflow:hidden;max-width:100%;padding-left:", ";padding-right:", ";& > span:not(.em-ds-icon){position:relative;top:", ";font-size:", ";}"], props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.fontSize === 'large' ? '2px' : '1px', props => props.fontSize === 'large' ? '22px' : '18px');
+
+export { Label, Step, StepperWrapper, StyledButton };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@elliemae/ds-stepper",
+  "version": "2.0.0-rc.18",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Stepper",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./styled": {
+      "import": "./esm/styled.js",
+      "require": "./cjs/styled.js"
+    },
+    "./StepperButton": {
+      "import": "./esm/StepperButton.js",
+      "require": "./cjs/StepperButton.js"
+    },
+    "./Stepper": {
+      "import": "./esm/Stepper.js",
+      "require": "./cjs/Stepper.js"
+    },
+    "./props": {
+      "import": "./esm/props.js",
+      "require": "./cjs/props.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
+  "dependencies": {
+    "@elliemae/ds-button": "2.0.0-rc.18",
+    "@elliemae/ds-icons": "2.0.0-rc.18",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.18",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.18",
+    "react-desc": "~4.1.3",
+    "uid": "~2.0.0"
+  },
+  "devDependencies": {
+    "styled-components": "~5.3.3",
+    "styled-system": "~5.1.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist",
+    "generateSubmodules": true
+  }
+}

package/types/Stepper.d.ts

@@ -0,0 +1,22 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+import { DSStepperInternalsT } from './props';
+declare const DSStepper: {
+    (props: DSStepperInternalsT.StepperPropsT): JSX.Element;
+    propTypes: {
+        steps: import("react-desc").PropTypesDescValidator;
+        current: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        visited: import("react-desc").PropTypesDescValidator;
+    };
+};
+declare const StepperWithSchema: {
+    (props?: DSStepperInternalsT.StepperPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSStepper, StepperWithSchema };

package/types/StepperButton.d.ts

@@ -0,0 +1,48 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+import { DSStepperInternalsT } from './props';
+declare const DSStepperButton: {
+    (props: DSStepperInternalsT.StepperButtonPropsT): JSX.Element;
+    propTypes: {
+        chevron: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        fontSize: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        label: import("react-desc").PropTypesDescValidator;
+        disabled: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        onClick: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        'aria-': {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        'data-': {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+};
+declare const DSStepperButtonWithSchema: {
+    (props?: DSStepperInternalsT.StepperButtonPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSStepperButton, DSStepperButtonWithSchema };

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './StepperButton';

package/types/props.d.ts

@@ -0,0 +1,90 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare const BUTTON_SIZES: {
+    readonly normal: "normal";
+    readonly large: "large";
+};
+declare type ButtonSizesT = typeof BUTTON_SIZES[keyof typeof BUTTON_SIZES];
+declare const CHEVRON_TYPE: {
+    readonly left: "left";
+    readonly right: "right";
+};
+declare type ChevronT = typeof CHEVRON_TYPE[keyof typeof CHEVRON_TYPE];
+export declare namespace DSStepperInternalsT {
+    interface StepperPropsT {
+        [property: string]: unknown;
+        steps: number;
+        current: number | null;
+        visited: number[];
+    }
+    interface StepperButtonPropsT {
+        [property: string]: unknown;
+        chevron?: ChevronT;
+        fontSize?: ButtonSizesT;
+        label: string;
+        disabled?: boolean;
+        onClick: VoidFunction;
+        innerRef?: React.MutableRefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
+        'aria-label'?: string;
+        'aria-pressed'?: boolean;
+        'data-testid'?: string;
+    }
+}
+export declare const defaultProps: {
+    steps: number;
+    current: undefined;
+    visited: never[];
+};
+export declare const dsStepperProps: {
+    steps: import("react-desc").PropTypesDescValidator;
+    current: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    visited: import("react-desc").PropTypesDescValidator;
+};
+export declare const defaultButtonProps: {
+    chevron: undefined;
+    fontSize: "normal";
+    disabled: boolean;
+    onClick: (...args: any[]) => void;
+};
+export declare const dsStepperButtonProps: {
+    chevron: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    fontSize: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    label: import("react-desc").PropTypesDescValidator;
+    disabled: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    onClick: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    innerRef: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    'aria-': {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    'data-': {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+};
+export {};

package/types/styled.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { DSStepperInternalsT } from './props';
+export declare const StepperWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DSStepperInternalsT.StepperPropsT, never>;
+interface StepProps {
+    active: boolean;
+    visited: boolean;
+}
+export declare const Step: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StepProps, never>;
+export declare const Label: import("styled-components").StyledComponent<{
+    (props: any): JSX.Element;
+    propTypes: {
+        containerProps: import("prop-types").Requireable<object>;
+        tooltipOptions: import("prop-types").Requireable<object>;
+        textOptions: import("prop-types").Requireable<object>;
+        value: import("prop-types").Requireable<string | number | boolean | {} | import("prop-types").ReactElementLike | import("prop-types").ReactNodeArray>;
+        placement: import("prop-types").Requireable<string>;
+        tooltipDelay: import("prop-types").Requireable<number>;
+        zIndex: import("prop-types").Requireable<number>;
+    };
+    defaultProps: {
+        containerProps: {};
+        tooltipOptions: {};
+        textOptions: {};
+        value: string;
+        placement: string;
+        tooltipDelay: number;
+        zIndex: number;
+    };
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<{
+    (props: import("@elliemae/ds-button/types/v2/propTypes").DSButtonPropsT): JSX.Element;
+    propTypes: import("react").WeakValidationMap<unknown>;
+}, import("styled-components").DefaultTheme, DSStepperInternalsT.StepperButtonPropsT, never>;
+export {};

package/types/tests/Stepper.test.d.ts

@@ -0,0 +1 @@
+export {};