@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Form/Form.js

@@ -0,0 +1,184 @@
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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 * as React from 'react';
+import { shallowEqual } from '../utils';
+
+var Form = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Form, _React$Component);
+
+  function Form() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isEditing: false,
+      isSubmitting: false,
+      payload: _this.props.initialPayload
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "submitTimeoutId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "startSubmitTimeout", function () {
+      _this.submitTimeoutId = setTimeout(_this.handleSubmit);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearSubmitTimeout", function () {
+      clearTimeout(_this.submitTimeoutId);
+      _this.submitTimeoutId = null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleEditing", function () {
+      _this.setState({
+        isEditing: true
+      });
+
+      if (_this.focusable) {
+        _this.focusable.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleReset", function () {
+      _this.setState({
+        isEditing: false,
+        payload: _this.props.initialPayload
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
+      if (JSON.stringify(_this.props.initialPayload) === JSON.stringify(_this.state.payload)) {
+        _this.setState({
+          isEditing: false
+        }, _this.clearSubmitTimeout);
+      } else {
+        var timeoutId = setTimeout(function () {
+          _this.setState({
+            isEditing: false,
+            isSubmitting: true
+          });
+        });
+
+        _this.props.onSubmit(_this.state.payload, function () {
+          clearTimeout(timeoutId);
+
+          _this.clearSubmitTimeout();
+
+          _this.setState({
+            isSubmitting: false
+          });
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "storeFocusRef", function (node) {
+      if (!_this.focusable) {
+        _this.focusable = node;
+      }
+    });
+
+    return _this;
+  }
+
+  var _proto = Form.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (!shallowEqual(lastProps.initialPayload, this.props.initialPayload)) {
+      this.setState({
+        payload: this.props.initialPayload
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$state = this.state,
+        isEditing = _this$state.isEditing,
+        isSubmitting = _this$state.isSubmitting,
+        payload = _this$state.payload;
+    return this.props.children(_objectSpread(_objectSpread({}, this.state), {}, {
+      editButtonProps: {
+        disabled: isSubmitting,
+        icon: isEditing ? undefined : {
+          name: 'pencil'
+        },
+        onClick: function onClick() {
+          // bail out if we've already triggered a submit in onBlur
+          if (_this2.submitTimeoutId === null) {
+            if (isEditing) {
+              _this2.handleSubmit();
+            } else {
+              _this2.handleEditing();
+            }
+          }
+        },
+        spinner: isSubmitting,
+        title: isEditing ? 'Save' : 'Edit',
+        tooltip: isEditing ? isSubmitting ? {
+          title: 'Saving'
+        } : undefined : {
+          title: 'Edit'
+        }
+      },
+      getFieldProps: function getFieldProps(key, getChangeValue) {
+        if (getChangeValue === void 0) {
+          getChangeValue = function getChangeValue(event) {
+            return event.target.value;
+          };
+        }
+
+        return {
+          innerRef: _this2.storeFocusRef,
+          disabled: isSubmitting,
+          hover: isEditing,
+          value: payload[key],
+          onFocus: function onFocus() {
+            _this2.clearSubmitTimeout();
+
+            _this2.setState({
+              isEditing: true
+            });
+          },
+          onBlur: function onBlur() {
+            _this2.startSubmitTimeout();
+          },
+          onChange: function onChange(event) {
+            var nextValue = getChangeValue(event);
+
+            _this2.setState(function (state) {
+              var _objectSpread2;
+
+              return {
+                payload: _objectSpread(_objectSpread({}, state.payload), {}, (_objectSpread2 = {}, _objectSpread2[key] = nextValue, _objectSpread2))
+              };
+            });
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter' || event.key === 'Escape') {
+              event.preventDefault();
+              event.target.blur();
+
+              if (event.key === 'Escape') {
+                _this2.handleReset();
+              }
+            }
+          }
+        };
+      }
+    }));
+  };
+
+  return Form;
+}(React.Component);
+
+export default Form;

package/dist/esm/Form/index.js

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

package/dist/esm/GridView/GridView.js

@@ -0,0 +1,98 @@
+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 { useVariant } from '../VariantProvider';
+
+function getTemplateValue(value) {
+  return value ? value.constructor === Array ? value.map(function (v) {
+    return typeof v === 'number' ? v * 8 + "px" : v;
+  }).join(' ') : value : undefined;
+}
+
+var gridViewPlugin = {
+  styleProps: ['autoFlow', 'autoColumns', 'autoRows', 'columns', 'rows', 'alignment', 'distribution', 'columnSpacing', 'rowSpacing', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var autoFlow = _ref.autoFlow,
+        autoColumns = _ref.autoColumns,
+        autoRows = _ref.autoRows,
+        columns = _ref.columns,
+        rows = _ref.rows,
+        alignment = _ref.alignment,
+        distribution = _ref.distribution,
+        columnSpacing = _ref.columnSpacing,
+        rowSpacing = _ref.rowSpacing,
+        spacing = _ref.spacing,
+        styles = _objectWithoutPropertiesLoose(_ref, ["autoFlow", "autoColumns", "autoRows", "columns", "rows", "alignment", "distribution", "columnSpacing", "rowSpacing", "spacing"]);
+
+    if (autoFlow !== undefined && styles.gridAutoFlow === undefined) {
+      styles.gridAutoFlow = autoFlow;
+    }
+
+    if (autoColumns !== undefined && styles.gridAutoColumns === undefined) {
+      styles.gridAutoColumns = autoColumns;
+    }
+
+    if (autoRows !== undefined && styles.autoRows === undefined) {
+      styles.gridAutoRows = autoRows;
+    }
+
+    if (columns !== undefined && styles.gridTemplateColumns === undefined) {
+      styles.gridTemplateColumns = getTemplateValue(columns);
+    }
+
+    if (rows !== undefined && styles.gridTemplateRows === undefined) {
+      styles.gridTemplateRows = getTemplateValue(rows);
+    }
+
+    if (alignment !== undefined && styles.alignItems === undefined) {
+      styles.alignItems = alignment;
+    }
+
+    if (distribution !== undefined && styles.distribution === undefined) {
+      styles.justifyItems = distribution;
+    }
+
+    if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
+      styles.gridColumnGap = columnSpacing * 8;
+    }
+
+    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
+      styles.gridRowGap = rowSpacing * 8;
+    }
+
+    if (spacing !== undefined && styles.gridGap === undefined) {
+      styles.gridGap = spacing * 8;
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+export function GridView(_ref2) {
+  var as = _ref2.as,
+      inline = _ref2.inline,
+      innerRef = _ref2.innerRef,
+      props = _objectWithoutPropertiesLoose(_ref2, ["as", "inline", "innerRef"]);
+
+  var Element = as || defaultElement;
+  var variant = useVariant();
+  return jsx(Element, _extends({
+    ref: innerRef
+  }, splitStyles(_objectSpread({
+    display: inline ? 'inline-grid' : 'grid',
+    autoColumns: 'minmax(0, auto)',
+    plugin: gridViewPlugin,
+    variant: variant
+  }, props))));
+}

package/dist/esm/GridView/index.js

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

package/dist/esm/Group/Group.js

@@ -0,0 +1,36 @@
+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; }
+
+import React from 'react';
+import StackView from '../StackView';
+import { useThemeValue } from '../system';
+import { cloneChildren } from '../utils';
+export function Group(_ref) {
+  var _ref$axis = _ref.axis,
+      axis = _ref$axis === void 0 ? 'horizontal' : _ref$axis,
+      childProps = _ref.childProps,
+      children = _ref.children,
+      radius = _ref.radius,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "childProps", "children", "radius"]);
+
+  var themeRadius = useThemeValue('group.radius');
+  var radiusValue = radius != null ? radius : themeRadius;
+  var isHorizontalLayout = axis === 'horizontal';
+  var startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop';
+  var endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom';
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: axis,
+    spacing: -0.125
+  }, restProps), cloneChildren(children, function (child, _ref2) {
+    var _objectSpread2;
+
+    var firstChild = _ref2.firstChild,
+        lastChild = _ref2.lastChild;
+    return _objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2));
+  }));
+}

package/dist/esm/Group/index.js

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

package/dist/esm/Heading/Heading.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+import { useThemeValue } from '../system';
+
+function Heading(_ref) {
+  var _ref$level = _ref.level,
+      level = _ref$level === void 0 ? 1 : _ref$level,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["level"]);
+
+  var headingTheme = useThemeValue('heading');
+  var lineHeights = useThemeValue('lineHeights');
+  var index = level - 1;
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "h" + level,
+    fontSize: index,
+    lineHeight: lineHeights[index] + 'px'
+  }, headingTheme, restProps));
+}
+
+export default Heading;

package/dist/esm/Heading/index.js

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

package/dist/esm/HeadingUppercase/HeadingUppercase.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+import { useThemeValue } from '../system';
+
+function HeadingUppercase(_ref) {
+  var children = _ref.children,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  var themedProps = useThemeValue('HeadingUppercase');
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "span",
+    uppercase: true,
+    fontSize: 5,
+    fontWeight: 700,
+    cursor: "default",
+    color: "foregroundSecondary",
+    shrink: 0,
+    margin: 0
+  }, themedProps, restProps), children);
+}
+
+export default HeadingUppercase;

package/dist/esm/HeadingUppercase/index.js

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

package/dist/esm/HelperDrawer/HelperDrawer.js

@@ -0,0 +1,78 @@
+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 { useCallback, useEffect, useState } from 'react';
+import Button from '../Button';
+import Card from '../Card';
+import Collapse from '../Collapse';
+var drawerToggles = {};
+
+function Toggle(_ref) {
+  var drawerId = _ref.drawerId,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["drawerId"]);
+
+  var handleClick = useCallback(function (event) {
+    var drawerToggle = drawerToggles[drawerId];
+
+    if (drawerToggle) {
+      event.preventDefault();
+      drawerToggle();
+    }
+  }, [drawerId]);
+  return jsx(Button, _extends({
+    icon: {
+      name: 'info'
+    },
+    tooltip: {
+      title: 'More info'
+    },
+    size: "xs",
+    theme: false,
+    color: "foregroundSecondary",
+    hover: {
+      backgroundColor: 'highlight'
+    },
+    onClick: handleClick,
+    "data-helper-drawer-toggle": true
+  }, restProps));
+}
+
+function HelperDrawer(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["children", "id"]);
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  useEffect(function () {
+    drawerToggles[id] = function () {
+      return setOpen(function (open) {
+        return !open;
+      });
+    };
+
+    return function () {
+      delete drawerToggles[id];
+    };
+  }, [id]);
+  return jsx(Collapse, {
+    open: open,
+    lazy: true,
+    css: {
+      width: '100%'
+    }
+  }, jsx(Card, _extends({
+    subdued: true,
+    padding: 1,
+    fontSize: 4
+  }, restProps), children));
+}
+
+HelperDrawer.Toggle = Toggle;
+export default HelperDrawer;

package/dist/esm/HelperDrawer/index.js

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

package/dist/esm/Highlight/Highlight.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+import { markFuzzyMatchSubstring, markStartsWithMatchSubstring } from './utils';
+
+/**
+ * Highlight or mark letters in a string using a provided query.
+ */
+function Highlight(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$marker = _ref.marker,
+      marker = _ref$marker === void 0 ? markStartsWithMatchSubstring : _ref$marker,
+      query = _ref.query,
+      text = _ref.text,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["color", "marker", "query", "text"]);
+
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "span"
+  }, restProps), marker(text, query).map(function (part, index) {
+    return /*#__PURE__*/React.createElement(Text, {
+      key: index,
+      inline: true,
+      as: part.highlight ? 'mark' : 'span',
+      color: part.highlight ? color : undefined,
+      backgroundColor: "transparent",
+      fontWeight: "inherit",
+      fontSize: "inherit"
+    }, part.text);
+  }));
+}
+
+Highlight.FUZZY = markFuzzyMatchSubstring;
+Highlight.STARTS_WITH = markStartsWithMatchSubstring;
+export default Highlight;

package/dist/esm/Highlight/index.js

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

package/dist/esm/Highlight/utils.js

@@ -0,0 +1,46 @@
+// inspired by: https://github.com/enigma-io/boundless/blob/master/packages/boundless-typeahead/index.js
+var matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g;
+
+function escapeStringRegexp(string) {
+  return string.replace(matchOperatorsRegex, '\\$&');
+}
+
+export function markFuzzyMatchSubstring(text, query) {
+  var fragments = text.split(new RegExp('(' + escapeStringRegexp(query) + ')', 'ig'));
+  var seekValue = query.toLowerCase();
+  var threshold = fragments.length;
+  var i = -1;
+
+  while (++i < threshold) {
+    var fragment = fragments[i];
+    fragments[i] = {
+      text: fragment.replace(/ /g, "\xA0"),
+      highlight: fragment.toLowerCase() === seekValue
+    };
+  }
+
+  return fragments;
+}
+export function markStartsWithMatchSubstring(text, query) {
+  var seekValue = query.toLowerCase();
+  var indexStart = text.toLowerCase().indexOf(seekValue);
+  var indexEnd = indexStart + seekValue.length;
+
+  if (indexStart === -1) {
+    return [{
+      text: text,
+      highlight: false
+    }];
+  }
+
+  return [{
+    text: text.slice(0, indexStart).replace(/ /g, "\xA0"),
+    highlight: false
+  }, {
+    text: text.slice(indexStart, indexEnd).replace(/ /g, "\xA0"),
+    highlight: true
+  }, {
+    text: text.slice(indexEnd).replace(/ /g, "\xA0"),
+    highlight: false
+  }];
+}

package/dist/esm/Icon/Icon.js

@@ -0,0 +1,47 @@
+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 { useThemeValue } from '../system';
+var sizes = {
+  xxs: '8px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '32px',
+  xxl: '48px'
+};
+
+function Icon(_ref) {
+  var as = _ref.as,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "name", "size", "color", "children"]);
+
+  var themeProps = useThemeValue('icon');
+  var pathData = useThemeValue(['icons'].concat(name.split('.')));
+  var iconSize = sizes[size] || size;
+  var childrenToRender = name ? /*#__PURE__*/React.createElement("path", {
+    d: pathData
+  }) : children;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "svg",
+    viewBox: "0 0 16 16",
+    width: iconSize,
+    height: iconSize,
+    basis: iconSize,
+    grow: 0,
+    shrink: 0,
+    fill: color,
+    fillRule: "evenodd",
+    children: childrenToRender
+  }, themeProps, props));
+}
+
+export default Icon;

package/dist/esm/Icon/Path.js

@@ -0,0 +1,22 @@
+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 { useThemeValue } from '../system';
+
+function Path(_ref) {
+  var _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["name", "color"]);
+
+  var pathData = useThemeValue(['icons'].concat(name.split('.')));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "path",
+    d: pathData,
+    fill: color
+  }, restProps));
+}
+
+export default Path;

package/dist/esm/Icon/Status.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Icon from './Icon';
+import Path from './Path';
+var STATUS_VARIANTS = {
+  confirmed: ['checkmark-circle', 'success'],
+  unconfirmed: ['question-circle', 'warning'],
+  declined: ['close-circle', 'error']
+};
+
+function Status(props) {
+  var color = props.color,
+      variant = props.variant,
+      variantFilled = props.variantFilled,
+      restProps = _objectWithoutPropertiesLoose(props, ["color", "variant", "variantFilled"]);
+
+  var variantName;
+  var variantColor;
+  Object.keys(STATUS_VARIANTS).some(function (key) {
+    var _STATUS_VARIANTS$key;
+
+    return variant === key ? (_STATUS_VARIANTS$key = STATUS_VARIANTS[key], variantName = _STATUS_VARIANTS$key[0], variantColor = _STATUS_VARIANTS$key[1], _STATUS_VARIANTS$key) : false;
+  });
+
+  if (variantName && variantFilled) {
+    variantName += '-filled';
+  }
+
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    name: variantName,
+    color: color || variantColor
+  }, restProps), /*#__PURE__*/React.createElement(Path, {
+    name: "radio-0",
+    color: color
+  }));
+}
+
+export default Status;

package/dist/esm/Icon/index.js

@@ -0,0 +1,6 @@
+import Icon from './Icon';
+import Path from './Path';
+import Status from './Status';
+Icon.Path = Path;
+Icon.Status = Status;
+export default Icon;