@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Sidebar/Sidebar.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Children } from 'react';
+import StickyBox from 'react-sticky-box';
+import warning from 'warning';
+import { css } from '../system';
+import StackView from '../StackView';
+import SidebarList from './SidebarList';
+import SidebarItem from './SidebarItem';
+var flexColumnCss = css({
+  display: 'flex',
+  flexDirection: 'column'
+});
+
+function Sidebar(_ref) {
+  var children = _ref.children,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  return jsx(StackView, _extends({
+    grow: 1,
+    paddingTop: 2,
+    boxShadow: "inset -8px 0px 8px -8px rgba(150, 150, 150, 0.25)",
+    backgroundColor: "surfaceTertiary"
+  }, restProps), jsx(StickyBox, {
+    css: flexColumnCss
+  }, Children.map(children, function (child) {
+    warning(child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item, "Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
+    return child;
+  })));
+}
+
+Sidebar.List = SidebarList;
+Sidebar.Item = SidebarItem;
+export default Sidebar;

package/dist/esm/Sidebar/SidebarItem.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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; }
+
+import React from 'react';
+import List from '../List';
+
+function SidebarItem(_ref) {
+  var active = _ref.active,
+      url = _ref.url,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["active", "url"]);
+
+  var link = !active && url;
+
+  var listItemProps = _objectSpread({
+    alignItems: 'center',
+    backgroundColor: 'surfaceTertiary',
+    boxShadow: 'inset -8px 0px 8px -8px rgba(150, 150, 150, 0.25)',
+    as: link ? 'a' : 'div',
+    href: url,
+    justifyContent: 'space-between',
+    lineHeight: '20px',
+    shrink: 0
+  }, restProps);
+
+  if (active) {
+    listItemProps.backgroundColor = 'surfaceSecondary';
+    listItemProps.boxShadow = 'inset 0 -2px var(--colors-primary)';
+    listItemProps.zIndex = 1;
+  }
+
+  if (link) {
+    listItemProps.hover = {
+      backgroundColor: 'grey-2'
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(List.Item, listItemProps);
+}
+
+export default SidebarItem;

package/dist/esm/Sidebar/SidebarList.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import List from '../List';
+
+function SidebarList(props) {
+  return /*#__PURE__*/React.createElement(List, _extends({
+    as: "div",
+    marginBottom: 2,
+    border: true,
+    borderColor: "separatorSecondary",
+    shrink: 0,
+    divider: true,
+    dividerColor: "separatorSecondary"
+  }, props));
+}
+
+export default SidebarList;

package/dist/esm/Sidebar/index.js

@@ -0,0 +1,2 @@
+import Sidebar from './Sidebar';
+export default Sidebar;

package/dist/esm/Sortable/SortableEmpty.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import Text from '../Text';
+
+function SortableEmpty(_ref) {
+  var emptyText = _ref.emptyText,
+      isDraggingOver = _ref.isDraggingOver,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["emptyText", "isDraggingOver"]);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    column: 1,
+    row: 1,
+    padding: 1,
+    backgroundColor: isDraggingOver ? 'warning-lightest' : 'white'
+  }, restProps), /*#__PURE__*/React.createElement(Box, {
+    padding: 0.5,
+    backgroundColor: isDraggingOver ? 'warning-lightest' : 'white',
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: isDraggingOver ? 'warning' : 'grey-5',
+    radius: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontSize: 5,
+    textAlign: "center",
+    opacity: isDraggingOver ? 0 : 1
+  }, emptyText)));
+}
+
+export default SortableEmpty;

package/dist/esm/Sortable/SortableItem.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import DragDrop from '../DragDrop';
+import Icon from '../Icon';
+import List from '../List';
+import { SORTABLE_TYPE } from './constants';
+export var SORTABLE_ITEM_DISPLAY_NAME = 'SortableItem';
+
+var _ref2 = /*#__PURE__*/React.createElement(Icon, {
+  name: "drag-handle",
+  size: "sm",
+  color: "foregroundTertiary"
+});
+
+function SortableItem(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      index = _ref.index,
+      isDraggingOver = _ref.isDraggingOver,
+      onRemoveRequest = _ref.onRemoveRequest,
+      readOnly = _ref.readOnly,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "id", "index", "isDraggingOver", "onRemoveRequest", "readOnly"]);
+
+  return /*#__PURE__*/React.createElement(DragDrop.Draggable, {
+    type: SORTABLE_TYPE,
+    draggableId: id,
+    isDragDisabled: disabled || readOnly,
+    index: index
+  }, function (provided) {
+    return /*#__PURE__*/React.createElement(List.Item, _extends({
+      innerRef: provided.innerRef,
+      onRemoveRequest: onRemoveRequest
+    }, restProps, provided.draggableProps), !readOnly && /*#__PURE__*/React.createElement(Box, _extends({}, provided.dragHandleProps, {
+      marginRight: 1
+    }), _ref2), children);
+  });
+}
+
+SortableItem.displayName = SORTABLE_ITEM_DISPLAY_NAME;
+export default SortableItem;

package/dist/esm/Sortable/SortableList.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children } from 'react';
+import Box from '../Box';
+import DragDrop from '../DragDrop';
+import GridView from '../GridView';
+import HeadingUppercase from '../HeadingUppercase';
+import { cloneChildren } from '../utils';
+import { SORTABLE_TYPE } from './constants';
+import SortableEmpty from './SortableEmpty';
+import { SORTABLE_ITEM_DISPLAY_NAME } from './SortableItem';
+
+function SortableList(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      emptyText = _ref.emptyText,
+      id = _ref.id,
+      onItemRemoveRequest = _ref.onItemRemoveRequest,
+      title = _ref.title,
+      readOnly = _ref.readOnly,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "emptyText", "id", "onItemRemoveRequest", "title", "readOnly"]);
+
+  var childCount = Children.count(children);
+  return /*#__PURE__*/React.createElement(Box, restProps, title && /*#__PURE__*/React.createElement(HeadingUppercase, {
+    padding: 1,
+    backgroundColor: "surfaceSecondary",
+    borderBottomWidth: 1,
+    borderBottomColor: "separatorTertiary"
+  }, title), /*#__PURE__*/React.createElement(DragDrop.Droppable, {
+    type: SORTABLE_TYPE,
+    isDropDisabled: disabled || readOnly,
+    droppableId: id
+  }, function (provided, snapshot) {
+    return /*#__PURE__*/React.createElement(GridView, _extends({
+      innerRef: provided.innerRef,
+      minHeight: 5,
+      backgroundColor: "surfaceSecondary",
+      position: "relative",
+      css: emptyText && childCount <= 0 ? {
+        '[data-rbd-placeholder-context-id]': {
+          column: 1,
+          row: 1
+        }
+      } : undefined
+    }, provided.droppableProps), emptyText && childCount <= 0 && /*#__PURE__*/React.createElement(SortableEmpty, {
+      emptyText: emptyText,
+      isDraggingOver: snapshot.isDraggingOver
+    }), cloneChildren(children, function (child, _ref2) {
+      var index = _ref2.index;
+      var childProps = {
+        pointerEvents: snapshot.isDraggingOver ? 'none' : undefined
+      };
+
+      if (index !== 0) {
+        childProps.borderTopWidth = 1;
+        childProps.borderTopColor = 'separatorTertiary';
+      }
+
+      if (child && child.type.displayName === SORTABLE_ITEM_DISPLAY_NAME) {
+        childProps.index = index;
+
+        if (!readOnly && !snapshot.isDraggingOver && (onItemRemoveRequest || child.props.onRemoveRequest)) {
+          childProps.onRemoveRequest = function (e) {
+            var itemPayload = {
+              id: id,
+              index: index
+            };
+
+            if (onItemRemoveRequest) {
+              onItemRemoveRequest(itemPayload, e);
+            }
+
+            if (child.props.onRemoveRequest) {
+              child.props.onRemoveRequest(itemPayload, e);
+            }
+          };
+        }
+      }
+
+      return childProps;
+    }), provided.placeholder);
+  }));
+}
+
+export default SortableList;

package/dist/esm/Sortable/SortableManager.js

@@ -0,0 +1,19 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import DragDrop from '../DragDrop';
+export default (function (_ref) {
+  var children = _ref.children,
+      onDragStart = _ref.onDragStart,
+      onDragUpdate = _ref.onDragUpdate,
+      _onDragEnd = _ref.onDragEnd,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "onDragStart", "onDragUpdate", "onDragEnd"]);
+
+  return /*#__PURE__*/React.createElement(DragDrop.Provider, {
+    onDragStart: onDragStart,
+    onDragUpdate: onDragUpdate,
+    onDragEnd: function onDragEnd(props) {
+      return props.destination && _onDragEnd(props);
+    }
+  }, /*#__PURE__*/React.createElement(Box, restProps, children));
+});

package/dist/esm/Sortable/constants.js

@@ -0,0 +1 @@
+export var SORTABLE_TYPE = 'SORTABLE_LIST';

package/dist/esm/Sortable/index.js

@@ -0,0 +1,47 @@
+import SortableItem from './SortableItem';
+import SortableList from './SortableList';
+import SortableManager from './SortableManager';
+
+var insert = function insert(_ref) {
+  var fromList = _ref.fromList,
+      fromIndex = _ref.fromIndex,
+      toList = _ref.toList,
+      toIndex = _ref.toIndex;
+  var result = Array.from(toList);
+
+  var _Array$from$splice = Array.from(fromList).splice(fromIndex, 1),
+      removed = _Array$from$splice[0];
+
+  result.splice(toIndex, 0, removed);
+  return result;
+};
+
+var remove = function remove(_ref2) {
+  var list = _ref2.list,
+      index = _ref2.index;
+  var result = Array.from(list);
+  result.splice(index, 1);
+  return result;
+};
+
+var reorder = function reorder(_ref3) {
+  var list = _ref3.list,
+      startIndex = _ref3.startIndex,
+      endIndex = _ref3.endIndex;
+  var result = Array.from(list);
+
+  var _result$splice = result.splice(startIndex, 1),
+      removed = _result$splice[0];
+
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+export default {
+  SortableItem: SortableItem,
+  SortableList: SortableList,
+  SortableManager: SortableManager,
+  insert: insert,
+  remove: remove,
+  reorder: reorder
+};

package/dist/esm/Spinner/Spinner.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import { keyframes } from '@emotion/core';
+import { Box } from '../Box';
+import { useThemeProps } from '../system';
+var rotate = keyframes({
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateCentered = keyframes({
+  '100%': {
+    transform: 'translate(-50%, -50%) rotate(360deg)'
+  }
+});
+export function Spinner(_ref) {
+  var center = _ref.center,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      thickness = _ref.thickness,
+      props = _objectWithoutPropertiesLoose(_ref, ["center", "size", "thickness"]);
+
+  var _useThemeProps = useThemeProps('spinner', props),
+      color = _useThemeProps.color,
+      sizes = _useThemeProps.sizes,
+      sizeThickness = _useThemeProps.thickness,
+      trackColor = _useThemeProps.trackColor,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["color", "sizes", "thickness", "trackColor"]);
+
+  var boxProps = {
+    inline: true,
+    alignSelf: 'center',
+    verticalAlign: 'middle',
+    radius: 'circle',
+    borderColor: trackColor,
+    borderTopColor: color
+  };
+  var sizeValue = sizes[size] || size;
+  var thicknessValue = thickness || sizeThickness[size];
+  var boxSizeStyles = {
+    borderWidth: thicknessValue,
+    height: sizeValue,
+    width: sizeValue
+  };
+
+  if (process.env.NODE_ENV !== 'production') {
+    var width = typeof sizeValue === 'number' ? sizeValue * 8 : sizeValue.includes('px') ? parseInt(sizeValue) : null;
+    var spinnerRadius = width && width / 2;
+    if (spinnerRadius && thicknessValue > spinnerRadius) console.warn("The thickness value (" + thicknessValue + "px) of this spinner is larger than the radius (" + spinnerRadius + "px), this will distort the rendered size.");
+  }
+
+  if (center) {
+    boxProps.position = 'absolute';
+    boxProps.left = '50%';
+    boxProps.top = '50%';
+    boxProps.transform = 'translate(-50%, -50%) rotate(0deg)';
+    boxProps.animation = rotateCentered + " 500ms infinite linear";
+  } else {
+    boxProps.transform = 'rotate(0deg)';
+    boxProps.animation = rotate + " 500ms infinite linear";
+  }
+
+  return /*#__PURE__*/React.createElement(Box, _extends({}, boxProps, boxSizeStyles, restProps));
+}

package/dist/esm/Spinner/index.js

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

package/dist/esm/StackView/StackView.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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; }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import * as React from 'react';
+import splitStyles from '../system/split-styles';
+import { joinChildren } from '../utils';
+import { useVariant } from '../VariantProvider';
+var BASELINE = 'baseline';
+var CENTER = 'center';
+var END = 'end';
+var FILL = 'fill';
+var HORIZONTAL = 'horizontal';
+var SPACE_EVENLY = 'space-evenly';
+var SPACE_BETWEEN = 'space-between';
+var START = 'start';
+var STRETCH = 'stretch';
+var VERTICAL = 'vertical';
+var stackViewPlugin = {
+  styleProps: ['alignment', 'axis', 'distribution', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var inline = _ref.inline,
+        alignment = _ref.alignment,
+        axis = _ref.axis,
+        distribution = _ref.distribution,
+        spacing = _ref.spacing,
+        styles = _objectWithoutPropertiesLoose(_ref, ["inline", "alignment", "axis", "distribution", "spacing"]);
+
+    if (axis && styles.flexDirection === undefined) {
+      styles.flexDirection = axis === HORIZONTAL ? 'row' : 'column';
+    }
+
+    if (alignment && styles.alignItems === undefined) {
+      styles.alignItems = alignment;
+    }
+
+    if (distribution === FILL) {
+      styles['& > *'] = {
+        flex: '1 0 0px'
+      };
+    } else if (styles.justifyContent === undefined) {
+      styles.justifyContent = distribution;
+    }
+
+    if (typeof spacing === 'number') {
+      var _styles$NotLa;
+
+      styles['& > *:not(:last-child)'] = (_styles$NotLa = {}, _styles$NotLa["margin" + (axis === HORIZONTAL ? 'Right' : 'Bottom')] = spacing * 8, _styles$NotLa["margin" + (axis === HORIZONTAL ? 'Bottom' : 'Right')] = 0, _styles$NotLa);
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+export function StackView(_ref2) {
+  var as = _ref2.as,
+      children = _ref2.children,
+      inline = _ref2.inline,
+      innerRef = _ref2.innerRef,
+      props = _objectWithoutPropertiesLoose(_ref2, ["as", "children", "inline", "innerRef"]);
+
+  var Element = as || defaultElement;
+  var variant = useVariant();
+  var childrenToRender = Element === 'textarea' ? undefined : typeof props.spacing === 'number' || props.spacing === undefined ? children : joinChildren(children, props.spacing);
+  return jsx(Element, _extends({
+    ref: innerRef
+  }, splitStyles(_objectSpread({
+    display: inline ? 'inline-flex' : 'flex',
+    axis: VERTICAL,
+    plugin: stackViewPlugin,
+    variant: variant
+  }, props))), childrenToRender);
+}
+StackView.BASELINE = BASELINE;
+StackView.CENTER = CENTER;
+StackView.END = END;
+StackView.FILL = FILL;
+StackView.HORIZONTAL = HORIZONTAL;
+StackView.SPACE_BETWEEN = SPACE_BETWEEN;
+StackView.SPACE_EVENLY = SPACE_EVENLY;
+StackView.START = START;
+StackView.STRETCH = STRETCH;
+StackView.VERTICAL = VERTICAL;

package/dist/esm/StackView/index.js

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

package/dist/esm/StepperField/StepperField.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Button from '../Button';
+import { useBoxSize } from '../system';
+import NumberField from '../NumberField';
+import StackView from '../StackView';
+
+function StepperField(_ref) {
+  var _ref$min = _ref.min,
+      min = _ref$min === void 0 ? -Infinity : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? Infinity : _ref$max,
+      onChange = _ref.onChange,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      value = _ref.value,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["min", "max", "onChange", "size", "step", "value"]);
+
+  var _useBoxSize = useBoxSize(size),
+      fontSize = _useBoxSize.fontSize,
+      paddingHorizontal = _useBoxSize.paddingHorizontal,
+      navigateSize = _useBoxSize.navigateSize;
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    fontSize: fontSize
+  }, restProps), /*#__PURE__*/React.createElement(Button, {
+    size: size,
+    title: "Decrement by " + step,
+    icon: {
+      name: 'remove',
+      size: navigateSize(size, -1)
+    },
+    disabled: value <= min,
+    onClick: function onClick() {
+      return onChange(Math.max(value - step, min));
+    }
+  }), /*#__PURE__*/React.createElement(NumberField, {
+    fontSize: "inherit",
+    paddingHorizontal: paddingHorizontal,
+    min: min,
+    max: max,
+    step: step,
+    size: size,
+    value: value,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Button, {
+    size: size,
+    title: "Increment by " + step,
+    icon: {
+      name: 'add',
+      size: navigateSize(size, -1)
+    },
+    disabled: value >= max,
+    onClick: function onClick() {
+      return onChange(Math.min(value + step), max);
+    }
+  }));
+}
+
+export default StepperField;

package/dist/esm/StepperField/index.js

@@ -0,0 +1,2 @@
+import StepperField from './StepperField';
+export default StepperField;

package/dist/esm/StepperProgress/Context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var StepperProgressContext = /*#__PURE__*/createContext(null);
+export default StepperProgressContext;

package/dist/esm/StepperProgress/Step.js

@@ -0,0 +1,74 @@
+import React, { useContext, useLayoutEffect, useState } from 'react';
+import Box from '../Box';
+import { spacingValue } from '../system';
+import StackView from '../StackView';
+import StepperProgressContext from './Context';
+var CIRCLE_SIZE = 1.5;
+var BASE_COLOR = 'separatorSecondary';
+
+function Line() {
+  var _useContext = useContext(StepperProgressContext),
+      active = _useContext.active,
+      activeColor = _useContext.activeColor;
+
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    width: "100%",
+    height: "3px",
+    x: "calc(-100% + " + spacingValue(CIRCLE_SIZE / 2) + ")",
+    y: "4.5px",
+    backgroundColor: BASE_COLOR,
+    zIndex: 0
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "100%",
+    height: "100%",
+    backgroundColor: activeColor,
+    transformOrigin: "left center",
+    transition: "transform 280ms ease-out",
+    style: {
+      transform: "scaleX(" + (active ? 1 : 0)
+    }
+  }));
+}
+
+var _ref = /*#__PURE__*/React.createElement(Line, null);
+
+function Indicator(props) {
+  var context = useContext(StepperProgressContext);
+  var active = props.active === undefined ? context.active : props.active;
+  var activeColor = props.activeColor === undefined ? context.activeColor : props.activeColor;
+
+  var _useState = useState('0ms'),
+      delay = _useState[0],
+      setDelay = _useState[1];
+
+  useLayoutEffect(function () {
+    setDelay(active === true ? '0ms' : '280ms');
+  }, [active]);
+  return /*#__PURE__*/React.createElement(Box, null, context.includeLine && _ref, /*#__PURE__*/React.createElement(Box, {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    radius: "circle",
+    backgroundColor: active ? activeColor : BASE_COLOR,
+    position: "relative",
+    zIndex: 1,
+    transition: "background-color 280ms ease-out",
+    transitionDelay: delay
+  }));
+}
+
+function Step(_ref2) {
+  var active = _ref2.active,
+      activeColor = _ref2.activeColor,
+      renderStart = _ref2.renderStart,
+      renderEnd = _ref2.renderEnd;
+  return /*#__PURE__*/React.createElement(StackView, {
+    alignment: "center",
+    position: "relative"
+  }, renderStart, /*#__PURE__*/React.createElement(Indicator, {
+    active: active,
+    activeColor: activeColor
+  }), renderEnd);
+}
+
+export default Step;