@xqmsg/ui-core 0.8.0

package/dist/ui-core.cjs.development.js

@@ -0,0 +1,3034 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var react = require('@chakra-ui/react');
+var reactHookForm = require('react-hook-form');
+var ReactSelect = _interopDefault(require('react-select'));
+var icons = require('@chakra-ui/icons');
+var hi = require('react-icons/hi');
+var themeTools = require('@chakra-ui/theme-tools');
+
+var ErrorIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 5.5L8.5 8.5M8.5 5.5L5.5 8.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z\" stroke=\"#F96057\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
+
+var PositiveIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 7.5L6.5 9L9 5.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z\" stroke=\"#34C759\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
+
+var NeutralIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 4.5V4C6.72386 4 6.5 4.22386 6.5 4.5H7ZM7.005 4.5H7.505C7.505 4.22386 7.28114 4 7.005 4V4.5ZM7.005 4.505V5.005C7.28114 5.005 7.505 4.78114 7.505 4.505H7.005ZM7 4.505H6.5C6.5 4.78114 6.72386 5.005 7 5.005V4.505ZM6.27639 6.05279C6.0294 6.17628 5.92929 6.47662 6.05279 6.72361C6.17628 6.9706 6.47662 7.07071 6.72361 6.94721L6.27639 6.05279ZM6.52766 6.48617L6.30405 6.03896L6.52766 6.48617ZM7.23634 7.05465L7.72141 7.17592L7.23634 7.05465ZM6.76366 8.94535L6.27859 8.82408L6.76366 8.94535ZM7.47234 9.51383L7.69595 9.96104L7.69595 9.96104L7.47234 9.51383ZM7.72361 9.94721C7.9706 9.82371 8.07071 9.52337 7.94721 9.27639C7.82371 9.0294 7.52337 8.92929 7.27639 9.05279L7.72361 9.94721ZM12.5 7C12.5 10.0376 10.0376 12.5 7 12.5V13.5C10.5899 13.5 13.5 10.5899 13.5 7H12.5ZM7 12.5C3.96243 12.5 1.5 10.0376 1.5 7H0.5C0.5 10.5899 3.41015 13.5 7 13.5V12.5ZM1.5 7C1.5 3.96243 3.96243 1.5 7 1.5V0.5C3.41015 0.5 0.5 3.41015 0.5 7H1.5ZM7 1.5C10.0376 1.5 12.5 3.96243 12.5 7H13.5C13.5 3.41015 10.5899 0.5 7 0.5V1.5ZM7 5H7.005V4H7V5ZM6.505 4.5V4.505H7.505V4.5H6.505ZM7.005 4.005H7V5.005H7.005V4.005ZM7.5 4.505V4.5H6.5V4.505H7.5ZM6.72361 6.94721L6.75127 6.93338L6.30405 6.03896L6.27639 6.05279L6.72361 6.94721ZM6.75127 6.93338L6.27859 8.82408L7.24873 9.06662L7.72141 7.17592L6.75127 6.93338ZM7.69595 9.96104L7.72361 9.94721L7.27639 9.05279L7.24873 9.06662L7.69595 9.96104ZM6.27859 8.82408C6.07138 9.65293 6.93179 10.3431 7.69595 9.96104L7.24873 9.06662L6.27859 8.82408ZM6.75127 6.93338L7.72141 7.17592C7.92862 6.34708 7.06821 5.65688 6.30405 6.03896L6.75127 6.93338Z\" fill=\"#3C3C43\" fill-opacity=\"0.6\"/>\n</svg>";
+
+var WarningIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 5V7.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM7 9.5H7.005V9.505H7V9.5Z\" stroke=\"#F8CE52\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
+
+/**
+ * A functional React component utilized to render the `Banner` component
+ */
+
+var Banner = function Banner(_ref) {
+  var variant = _ref.variant,
+      message = _ref.message,
+      buttonText = _ref.buttonText,
+      onClick = _ref.onClick;
+  var Icon = React.useMemo(function () {
+    switch (variant) {
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(react.Image, {
+          src: ErrorIcon,
+          alt: "error",
+          boxSize: "16px"
+        });
+
+      case 'neutral':
+        return /*#__PURE__*/React__default.createElement(react.Image, {
+          src: NeutralIcon,
+          alt: "neutral",
+          boxSize: "16px"
+        });
+
+      case 'positive':
+        return /*#__PURE__*/React__default.createElement(react.Image, {
+          src: PositiveIcon,
+          alt: "positive",
+          boxSize: "16px"
+        });
+
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(react.Image, {
+          src: WarningIcon,
+          alt: "warning",
+          boxSize: "16px"
+        });
+
+      default:
+        return null;
+    }
+  }, [variant]);
+  return /*#__PURE__*/React__default.createElement(react.Alert, {
+    variant: variant
+  }, /*#__PURE__*/React__default.createElement(react.AlertDescription, null, /*#__PURE__*/React__default.createElement(react.Box, {
+    pb: "8px"
+  }, Icon), message, onClick && buttonText && /*#__PURE__*/React__default.createElement(react.Flex, {
+    pt: "8px",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(react.Button, {
+    size: "sm",
+    bg: "white",
+    color: "blue.500",
+    onClick: onClick
+  }, buttonText))));
+};
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+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;
+}
+
+var blue = {
+  50: 'hsl(209, 100%, 95%)',
+  100: 'hsl(209, 100%, 90%)',
+  200: 'hsl(209, 100%, 80%)',
+  300: 'hsl(209, 100%, 70%)',
+  400: 'hsl(209, 100%, 60%)',
+  500: 'hsl(209, 100%, 50%)',
+  600: 'hsl(209, 100%, 40%)',
+  700: 'hsl(209, 100%, 30%)',
+  800: 'hsl(209, 100%, 20%)',
+  900: 'hsl(209, 100%, 10%)'
+};
+var red = {
+  50: 'hsl(0, 100%, 98%)',
+  100: 'hsl(0, 95%, 92%)',
+  200: 'hsl(0, 97%, 85%)',
+  300: 'hsl(0, 95%, 75%)',
+  400: 'hsl(0, 88%, 68%)',
+  500: 'hsl(0, 76%, 57%)',
+  600: 'hsl(0, 61%, 48%)',
+  700: 'hsl(0, 56%, 39%)',
+  800: 'hsl(0, 54%, 33%)',
+  900: 'hsl(357, 62%, 24%)'
+};
+var orange = {
+  50: 'hsl(40, 100%, 97%)',
+  100: 'hsl(39, 96%, 89%)',
+  200: 'hsl(38, 93%, 77%)',
+  300: 'hsl(33, 90%, 65%)',
+  400: 'hsl(27, 84%, 57%)',
+  500: 'hsl(24, 75%, 50%)',
+  600: 'hsl(20, 71%, 44%)',
+  700: 'hsl(16, 65%, 37%)',
+  800: 'hsl(14, 61%, 30%)',
+  900: 'hsl(14, 60%, 25%)'
+};
+var green = {
+  50: 'hsl(140, 60%, 96%)',
+  100: 'hsl(141, 65%, 92%)',
+  200: 'hsl(141, 63%, 88%)',
+  300: 'hsl(141, 64%, 80%)',
+  400: 'hsl(140, 64%, 73%)',
+  500: 'hsl(140, 64%, 61%)',
+  600: 'hsl(140, 42%, 48%)',
+  700: 'hsl(140, 42%, 36%)',
+  800: 'hsl(141, 42%, 24%)',
+  900: 'hsl(138, 42%, 6%)'
+};
+var aliases = {
+  primary: blue,
+  success: green,
+  warning: orange,
+  danger: red
+};
+var label = {
+  primary: {
+    light: '#000000',
+    dark: '#FFFFFF'
+  }
+};
+
+var colors = /*#__PURE__*/_extends({
+  transparent: 'transparent',
+  current: 'currentColor',
+  black: '#000000',
+  white: '#FFFFFF',
+  lightBlue: '#29abe2',
+  coolGray: '#F6F7FB',
+  darkBlue: '#292f4c',
+  backdrop: '#fbfcff'
+}, aliases, {
+  label: label,
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)'
+  },
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)'
+  },
+  gray: {
+    50: 'hsl(240, 3%, 94%)',
+    100: 'hsl(210, 3%, 87%)',
+    200: 'hsl(220, 4%, 69%)',
+    300: 'hsl(225, 4%, 56%)',
+    400: 'hsl(222, 4%, 44%)',
+    500: 'hsl(224, 6%, 38%)',
+    600: 'hsl(227, 6%, 30%)',
+    700: 'hsl(230, 5%, 23%)',
+    800: 'hsl(216, 6%, 15%)',
+    900: 'hsl(240, 5%, 4%)'
+  },
+  red: red,
+  orange: orange,
+  green: green,
+  blue: blue
+});
+
+/**
+ * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
+ */
+
+var Icon = function Icon(_ref) {
+  var step = _ref.step,
+      status = _ref.status;
+  var getColors = React.useMemo(function () {
+    switch (status) {
+      case 'active':
+        return {
+          bg: '#0082FF',
+          color: colors.label.primary.dark
+        };
+
+      case 'complete':
+        return {
+          bg: '#0082FF',
+          color: colors.label.primary.dark
+        };
+
+      case 'inactive':
+        return {
+          bg: '#7474800D',
+          color: colors.label.primary.light
+        };
+    }
+  }, [status]);
+  var bg = getColors.bg,
+      color = getColors.color;
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
+    boxSize: "20px",
+    bg: bg,
+    borderRadius: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(react.Text, {
+    fontSize: "12px",
+    color: color
+  }, step));
+};
+
+/**
+ * A functional React component utilized to render the `Label` for the `Breadcrumbs` component.
+ */
+
+var Label = function Label(_ref) {
+  var label = _ref.label;
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    pl: "8px"
+  }, /*#__PURE__*/React__default.createElement(react.Text, {
+    color: colors.label.primary.light,
+    fontSize: "13px"
+  }, label));
+};
+
+/**
+ * A functional React component utilized to render the `Breadcrumbs` component.
+ *
+ * The component will render a list of steps, based on the `steps` array, displaying the completed,
+ * active, and incomplete steps. The orientation of the component may be either `horizontal` or
+ * `vertical`.
+ */
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var steps = _ref.steps,
+      activeStepIndex = _ref.activeStepIndex,
+      orientation = _ref.orientation;
+  var getStatus = React.useCallback(function (stepIndex) {
+    if (activeStepIndex > stepIndex) return 'complete';
+    if (activeStepIndex < stepIndex) return 'inactive';
+    return 'active';
+  }, [activeStepIndex]);
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
+    flexDir: orientation === 'horizontal' ? 'row' : 'column'
+  }, steps.map(function (step, idx) {
+    return /*#__PURE__*/React__default.createElement(react.Flex, {
+      alignItems: "center",
+      pr: orientation === 'horizontal' ? '16px' : 0,
+      py: "4px"
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      step: idx + 1,
+      status: getStatus(idx)
+    }), /*#__PURE__*/React__default.createElement(Label, {
+      label: step
+    }));
+  }));
+};
+
+var _excluded = ["onClick", "text", "type", "ariaLabel", "variant", "colorScheme", "style", "size", "disabled", "className"];
+/**
+ * A functional React component utilized to render the `Button` component
+ */
+
+var Button = function Button(_ref) {
+  var onClick = _ref.onClick,
+      text = _ref.text,
+      type = _ref.type,
+      ariaLabel = _ref.ariaLabel,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+      _ref$colorScheme = _ref.colorScheme,
+      colorScheme = _ref$colorScheme === void 0 ? 'primary' : _ref$colorScheme,
+      style = _ref.style,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
+    onClick: onClick,
+    type: type,
+    variant: variant,
+    colorScheme: colorScheme,
+    size: size,
+    disabled: disabled,
+    "aria-label": ariaLabel,
+    style: style,
+    className: className
+  }, props), text);
+};
+
+var GoogleLogo = "<svg viewBox=\"0 0 533.5 544.3\" xmlns=\"http://www.w3.org/2000/svg\"><path\n    d=\"M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z\"\n    fill=\"#4285f4\"\n  /><path\n    d=\"M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z\"\n    fill=\"#34a853\"\n  /><path\n    d=\"M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z\"\n    fill=\"#fbbc04\"\n  /><path\n    d=\"M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z\"\n    fill=\"#ea4335\"\n  /></svg>";
+
+/**
+ * A functional React component utilized to render the `GoogleButton` component
+ */
+
+var GoogleButton = function GoogleButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(react.Button, {
+    onClick: onClick,
+    variant: "plain",
+    size: "lg",
+    borderRadius: "2px",
+    "aria-label": "google-login-button",
+    className: "google-button",
+    px: 4,
+    leftIcon: /*#__PURE__*/React__default.createElement(react.Icon, {
+      as: GoogleLogo,
+      width: 18,
+      height: 18,
+      mr: 3
+    }),
+    fontFamily: "Roboto, sans-serif",
+    fontWeight: "500",
+    fontSize: 14,
+    backgroundColor: "white",
+    boxShadow: "rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.24) 0px 2px 2px 0px"
+  }, /*#__PURE__*/React__default.createElement(react.Text, {
+    color: "rgba(0, 0, 0, 0.54)"
+  }, 'Sign in with Google'));
+};
+
+/**
+ * A functional React component utilized to render the `SpinnerButton` component
+ */
+
+var SpinnerButton = function SpinnerButton(_ref) {
+  var isLoading = _ref.isLoading,
+      text = _ref.text,
+      onClick = _ref.onClick,
+      type = _ref.type,
+      ariaLabel = _ref.ariaLabel,
+      style = _ref.style,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+      _ref$colorScheme = _ref.colorScheme,
+      colorScheme = _ref$colorScheme === void 0 ? 'primary' : _ref$colorScheme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      disabled = _ref.disabled,
+      className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(react.Button, {
+    spinner: /*#__PURE__*/React__default.createElement(react.Spinner, {
+      size: size
+    }),
+    isLoading: isLoading,
+    onClick: onClick,
+    type: type,
+    variant: variant,
+    colorScheme: colorScheme,
+    size: size,
+    disabled: disabled,
+    "aria-label": ariaLabel,
+    style: style,
+    className: className
+  }, text);
+};
+
+/**
+ * A functional React component utilized to render the `Form` component, a form wrapper for
+ * `react-hook-form`. The `Form` component is provided a `formHandler` and is used to wrap a container
+ * that contains a `FormSection` component.
+ */
+
+function Form(_ref) {
+  var formHandler = _ref.formHandler,
+      children = _ref.children;
+  var form = formHandler.form,
+      onSubmit = formHandler.onSubmit;
+  return /*#__PURE__*/React__default.createElement(reactHookForm.FormProvider, Object.assign({}, form), /*#__PURE__*/React__default.createElement("form", {
+    onSubmit: onSubmit
+  }, children));
+}
+
+/**
+ * A functional React component utilized to render the `StackedCheckbox` component.
+ */
+
+var StackedCheckboxGroup = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var options = _ref2.options;
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(react.Flex, {
+      mr: "30px",
+      alignItems: "center",
+      key: option.value
+    }, /*#__PURE__*/React__default.createElement(react.Checkbox, {
+      ref: _ref,
+      value: option.value
+    }, option.label));
+  }));
+});
+
+var _excluded$1 = ["type", "isRequired", "leftElement", "rightElement"];
+/**
+ * A functional React component utilized to render the `StackedInput` component.
+ */
+
+var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'text' : _ref2$type,
+      isRequired = _ref2.isRequired,
+      leftElement = _ref2.leftElement,
+      rightElement = _ref2.rightElement,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+    ref: _ref,
+    type: type,
+    isRequired: isRequired
+  }, props)), rightElement && rightElement);
+});
+
+/**
+ * A functional React component utilized to render the `StackedRadio` component.
+ */
+
+var StackedRadioGroup = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var id = _ref2.id,
+      _ref2$flexDirection = _ref2.flexDirection,
+      flexDirection = _ref2$flexDirection === void 0 ? 'row' : _ref2$flexDirection,
+      options = _ref2.options;
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, /*#__PURE__*/React__default.createElement(react.RadioGroup, {
+    name: id
+  }, options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(react.Flex, {
+      mr: "30px",
+      alignItems: "center",
+      key: option.value,
+      flexDirection: flexDirection
+    }, /*#__PURE__*/React__default.createElement(react.Radio, {
+      ref: _ref,
+      value: option.value
+    }, option.label));
+  })));
+});
+
+var _excluded$2 = ["isRequired", "options", "onChange"];
+/**
+ * A functional React component utilized to render the `StackedSelect` component.
+ */
+
+var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var isRequired = _ref2.isRequired,
+      options = _ref2.options,
+      onChange = _ref2.onChange,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, /*#__PURE__*/React__default.createElement(react.Select, Object.assign({
+    ref: _ref,
+    isRequired: isRequired,
+    onChange: onChange
+  }, props), options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement("option", {
+      value: option.value,
+      key: option.value
+    }, option.label);
+  })));
+});
+
+/**
+ * A functional React component utilized to render the `StackedTextarea` component.
+ */
+
+var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var props = _extends({}, _ref2);
+
+  return /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+    ref: _ref
+  }, props));
+});
+
+var InputTag = function InputTag(_ref) {
+  var value = _ref.value,
+      onDelete = _ref.onDelete;
+  return /*#__PURE__*/React__default.createElement(react.Tag, {
+    size: 'md',
+    key: value,
+    borderRadius: "full",
+    variant: "solid",
+    backgroundColor: "#eeeeee"
+  }, /*#__PURE__*/React__default.createElement(react.TagLabel, {
+    color: 'gray.700'
+  }, value), onDelete && /*#__PURE__*/React__default.createElement(react.TagCloseButton, {
+    color: 'gray.700',
+    onClick: onDelete
+  }));
+};
+
+/**
+ * A functional React Component utilized to render the custom `MultiValue` component for
+ * the `StackedMultiSelect` custom component.
+ */
+
+var MultiValue = function MultiValue(_ref) {
+  var children = _ref.children,
+      clearValue = _ref.clearValue;
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    marginRight: "5px"
+  }, /*#__PURE__*/React__default.createElement(InputTag, {
+    value: children,
+    onDelete: clearValue
+  }));
+};
+
+/**
+ * A functional React component utilized to render the `StackedMultiSelect` component.
+ */
+
+var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var options = _ref2.options,
+      setValue = _ref2.setValue,
+      control = _ref2.control,
+      name = _ref2.name;
+  var watchedValue = reactHookForm.useWatch({
+    control: control,
+    name: name
+  });
+
+  var _useState = React.useState(''),
+      inputValue = _useState[0],
+      setInputValue = _useState[1];
+
+  var _useState2 = React.useState([]),
+      localValue = _useState2[0],
+      setLocalValue = _useState2[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
+
+
+  React.useEffect(function () {
+    if (watchedValue !== undefined && !watchedValue.length) {
+      setLocalValue([]);
+    }
+
+    if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
+      setLocalValue(watchedValue.split(',').filter(Boolean).map(function (value) {
+        return options.find(function (option) {
+          return option.value === value;
+        });
+      }));
+    }
+  }, [options, watchedValue]);
+  var component = {
+    DropdownIndicator: null,
+    MultiValue: function MultiValue$1(props) {
+      return /*#__PURE__*/React__default.createElement(MultiValue, {
+        clearValue: function clearValue() {
+          var arrayValue = watchedValue.split(',').filter(function (_, index) {
+            return index !== props.index;
+          });
+          setLocalValue(arrayValue.map(function (value) {
+            return options.find(function (option) {
+              return option.value === value;
+            });
+          }));
+          setValue(name, arrayValue.join(','), {
+            shouldValidate: true,
+            shouldDirty: true
+          });
+        }
+      }, props.children);
+    }
+  };
+
+  var handleChange = function handleChange(values) {
+    setValue(name, values.map(function (_ref3) {
+      var value = _ref3.value;
+      return value;
+    }).join(','), {
+      shouldValidate: true,
+      shouldDirty: true
+    });
+  };
+
+  var handleInputChange = function handleInputChange(value, action) {
+    if (action.action === 'input-change' && action !== 'set-value') {
+      return setInputValue(value);
+    } // reset on select of an option
+
+
+    return setInputValue('');
+  };
+
+  var formatGroupLabel = function formatGroupLabel(data) {
+    return /*#__PURE__*/React__default.createElement(react.Flex, {
+      alignItems: "center",
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React__default.createElement("span", null, data.label));
+  };
+
+  var customStyles = {
+    control: function control() {
+      return {
+        borderRadius: '6px',
+        fontSize: '16px',
+        color: '#202020',
+        backgroundColor: '#FFFFFF',
+        border: '1px solid',
+        borderColor: colors.gray[200],
+        minHeight: '48px',
+        display: 'flex',
+        padding: '2px 6px'
+      };
+    },
+    menu: function menu() {
+      return {
+        boxShadow: '0 5px 5px 0 rgba(16, 27, 79, 0.15)',
+        borderRadius: '6px',
+        backgroundColor: 'white'
+      };
+    },
+    indicatorsContainer: function indicatorsContainer() {
+      return {
+        display: 'none'
+      };
+    },
+    placeholder: function placeholder() {
+      return {
+        color: '#CBCDCF',
+        fontSize: '16px'
+      };
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ReactSelect, {
+    components: component,
+    inputValue: inputValue,
+    value: localValue,
+    isClearable: true,
+    isSearchable: true,
+    isMulti: true,
+    menuPortalTarget: document.body,
+    menuPosition: 'fixed',
+    onChange: handleChange,
+    onInputChange: handleInputChange,
+    styles: customStyles,
+    options: options,
+    placeholder: false,
+    formatGroupLabel: formatGroupLabel
+  });
+});
+
+/**
+ * A functional React component utilized to render the `StackedPilledInput` component.
+ */
+
+var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var name = _ref2.name,
+      setValue = _ref2.setValue,
+      control = _ref2.control;
+  var watchedValue = reactHookForm.useWatch({
+    control: control,
+    name: name
+  });
+
+  var _useState = React.useState([]),
+      lastestFormValueToArray = _useState[0],
+      setLatestFormValueToArray = _useState[1];
+
+  var inputRef = React.useRef(null);
+
+  var _useState2 = React.useState(false),
+      isInputFocused = _useState2[0],
+      setInputFocused = _useState2[1];
+
+  var _useState3 = React.useState(''),
+      localValue = _useState3[0],
+      setLocalValue = _useState3[1]; // gets latest watched form value (common delimited) from RHF state and creates a list
+
+
+  React.useEffect(function () {
+    if (watchedValue !== undefined && !watchedValue.length) {
+      setLatestFormValueToArray([]);
+    }
+
+    if (watchedValue !== undefined && watchedValue != null && watchedValue.length) {
+      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+    }
+  }, [watchedValue]); // ensures after value addition that the input field is wiped
+
+  React.useEffect(function () {
+    if (localValue === ' ' || localValue.trim() === ',') {
+      setLocalValue('');
+    }
+  }, [localValue]);
+
+  var onHandleKeyDown = function onHandleKeyDown(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
+      if (!localValue.trim() || localValue.trim() === ',') return setLocalValue('');
+      var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
+      setLocalValue('');
+      return setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+    }
+  };
+
+  var onRemoveTag = function onRemoveTag(index) {
+    var filteredUniqueValues = lastestFormValueToArray.filter(function (_, i) {
+      return i !== index;
+    });
+    setLatestFormValueToArray(filteredUniqueValues);
+    setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
+      shouldValidate: true,
+      shouldDirty: true
+    });
+  };
+
+  var onBlur = function onBlur() {
+    if (localValue.trim()) {
+      var filteredUniqueValues = Array.from(new Set([].concat(lastestFormValueToArray, localValue.trim().split(','))));
+      setValue(name, filteredUniqueValues.toString().replace(/\s/g, ''), {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+      setLocalValue('');
+    }
+
+    setInputFocused(false);
+  };
+
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
+    position: "relative",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    outline: isInputFocused ? '2px solid rgba(0, 122, 255, 255)' : '',
+    borderRadius: isInputFocused ? 'md' : '',
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(react.Flex, {
+    background: "rgba(255, 255, 255, 0.8)",
+    border: "1px solid",
+    borderColor: colors.gray[200],
+    borderRadius: "6px",
+    fontWeight: "400",
+    fontSize: "12px",
+    lineHeight: "12px",
+    minHeight: "48px",
+    letterSpacing: "0.02em",
+    padding: "0 12px",
+    pt: lastestFormValueToArray.length ? '12px' : '0px',
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "0.5em",
+    width: "100%",
+    onClick: function onClick() {
+      var _inputRef$current;
+
+      return (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+    }
+  }, lastestFormValueToArray.map(function (tag, index) {
+    return /*#__PURE__*/React__default.createElement(InputTag, {
+      value: tag,
+      key: tag,
+      onDelete: function onDelete(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        onRemoveTag(index);
+      }
+    });
+  }), /*#__PURE__*/React__default.createElement(react.Input, {
+    onKeyDown: onHandleKeyDown,
+    type: "text",
+    padding: isInputFocused ? '0.5em 0' : '0px',
+    height: isInputFocused ? '46px' : '0px',
+    width: "100%",
+    border: "none",
+    _focus: {
+      boxShadow: 'none !important'
+    },
+    value: localValue,
+    onBlur: onBlur,
+    onChange: function onChange(e) {
+      return setLocalValue(e.target.value);
+    },
+    ref: inputRef,
+    onFocus: function onFocus() {
+      return setInputFocused(true);
+    }
+  }))));
+});
+
+/**
+ * A functional React component utilized to render the `StackedSwitch` component.
+ */
+
+var StackedSwitch = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var isRequired = _ref2.isRequired,
+      _onChange = _ref2.onChange,
+      value = _ref2.value;
+  if (value === undefined) return null;
+  return /*#__PURE__*/React__default.createElement(react.Switch, {
+    size: "lg",
+    ref: _ref,
+    isRequired: isRequired,
+    value: String(value),
+    defaultChecked: Boolean(value),
+    onChange: function onChange(e) {
+      if (_onChange) return _onChange(e.target.checked);
+    }
+  });
+});
+
+/**
+ * A functional React component utilized to render the `Input` component. Utilizes a switch statement
+ * to render the correct input based on the `inputType`.
+ */
+
+function Input(_ref) {
+  var inputType = _ref.inputType,
+      label = _ref.label,
+      ariaLabel = _ref.ariaLabel,
+      className = _ref.className,
+      placeholder = _ref.placeholder,
+      name = _ref.name,
+      helperText = _ref.helperText,
+      leftElement = _ref.leftElement,
+      rightElement = _ref.rightElement,
+      options = _ref.options,
+      isInvalid = _ref.isInvalid,
+      errorText = _ref.errorText,
+      isRequired = _ref.isRequired,
+      maxLength = _ref.maxLength,
+      defaultValue = _ref.defaultValue,
+      control = _ref.control,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange,
+      setValue = _ref.setValue;
+  var selectedInputField = React.useCallback(function (onChange, onBlur, ref, value) {
+    switch (inputType) {
+      case 'text':
+        return /*#__PURE__*/React__default.createElement(StackedInput, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          "aria-label": ariaLabel,
+          name: name,
+          id: name,
+          placeholder: placeholder,
+          maxLength: maxLength,
+          isRequired: isRequired,
+          leftElement: leftElement,
+          rightElement: rightElement,
+          isInvalid: isInvalid,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value
+        });
+
+      case 'radio':
+        return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          name: name,
+          id: name,
+          isRequired: isRequired,
+          isInvalid: isInvalid,
+          options: options,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value
+        });
+
+      case 'select':
+        return /*#__PURE__*/React__default.createElement(StackedSelect, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          name: name,
+          id: name,
+          isRequired: isRequired,
+          isInvalid: isInvalid,
+          options: options,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value
+        });
+
+      case 'textarea':
+        return /*#__PURE__*/React__default.createElement(StackedTextarea, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          name: name,
+          id: name,
+          maxLength: maxLength,
+          isRequired: isRequired,
+          isInvalid: isInvalid,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value
+        });
+
+      case 'checkbox':
+        return /*#__PURE__*/React__default.createElement(StackedCheckboxGroup, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          name: name,
+          id: name,
+          isRequired: isRequired,
+          isInvalid: isInvalid,
+          options: options,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value
+        });
+
+      case 'multi-select':
+        return /*#__PURE__*/React__default.createElement(StackedMultiSelect, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          name: name,
+          id: name,
+          isInvalid: isInvalid,
+          options: options,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value,
+          setValue: setValue,
+          control: control
+        });
+
+      case 'pilled-text':
+        return /*#__PURE__*/React__default.createElement(StackedPilledInput, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          "aria-label": ariaLabel,
+          name: name,
+          id: name,
+          isInvalid: isInvalid,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          disabled: disabled,
+          value: value,
+          setValue: setValue,
+          control: control
+        });
+
+      case 'switch':
+        return /*#__PURE__*/React__default.createElement(StackedSwitch, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          name: name,
+          id: name,
+          isInvalid: isInvalid,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          value: value
+        });
+
+      default:
+        return null;
+    }
+  }, [ariaLabel, className, control, disabled, inputType, isInvalid, isRequired, leftElement, maxLength, name, options, placeholder, rightElement, setValue]);
+  return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+    control: control,
+    name: name,
+    defaultValue: defaultValue,
+    rules: {
+      required: isRequired
+    },
+    render: function render(_ref2) {
+      var _ref2$field = _ref2.field,
+          onBlur = _ref2$field.onBlur,
+          fieldOnChange = _ref2$field.onChange,
+          ref = _ref2$field.ref,
+          value = _ref2$field.value;
+      return /*#__PURE__*/React__default.createElement(react.FormControl, {
+        id: name,
+        isInvalid: isInvalid,
+        position: "relative",
+        py: label ? 6 : 0
+      }, label && /*#__PURE__*/React__default.createElement(react.FormLabel, {
+        position: "absolute",
+        top: 0,
+        display: "flex"
+      }, label, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
+        ml: 1,
+        color: "red.500"
+      }, "*")), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
+    }
+  });
+}
+
+/**
+ *
+ * @param props - of type `FormSectionProps<T, U>` where `T` represents the key in `FormSteps`,
+ * can be generic key but is represented by value in `FormSteps` and `U` is the form value types for the
+ * `useFormHandler` hook.
+ *
+ * @returns a list of input's for a specific form section.
+ */
+
+function FormSection(_ref) {
+  var formStructure = _ref.formStructure,
+      section = _ref.section,
+      form = _ref.form,
+      className = _ref.className,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? 1 : _ref$columns,
+      _ref$spacing = _ref.spacing,
+      spacing = _ref$spacing === void 0 ? 0 : _ref$spacing;
+  return /*#__PURE__*/React__default.createElement(react.SimpleGrid, {
+    columns: columns,
+    spacing: spacing,
+    className: "form-section " + (className != null ? className : '')
+  }, formStructure[section].map(function (_ref2) {
+    var label = _ref2.label,
+        inputType = _ref2.inputType,
+        name = _ref2.name,
+        options = _ref2.options,
+        isRequired = _ref2.isRequired,
+        maxLength = _ref2.maxLength,
+        ariaLabel = _ref2.ariaLabel,
+        disabled = _ref2.disabled,
+        defaultValue = _ref2.defaultValue;
+    return /*#__PURE__*/React__default.createElement(Input, {
+      control: form.control,
+      label: label,
+      inputType: inputType,
+      name: name,
+      ariaLabel: ariaLabel,
+      disabled: disabled,
+      options: options,
+      isRequired: isRequired,
+      maxLength: maxLength,
+      isInvalid: !!form.formState.errors[name],
+      defaultValue: defaultValue
+    });
+  }));
+}
+
+/**
+ * A functional React component utilized to render the `BorderedBox` component
+ */
+
+var BorderedBox = function BorderedBox(_ref) {
+  var children = _ref.children,
+      boxShadow = _ref.boxShadow,
+      _ref$borderRadius = _ref.borderRadius,
+      borderRadius = _ref$borderRadius === void 0 ? 'none' : _ref$borderRadius;
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    boxShadow: boxShadow,
+    borderRadius: borderRadius,
+    bg: "white",
+    mx: "auto",
+    width: "100%",
+    height: "100%",
+    display: "flex"
+  }, children);
+};
+
+/**
+ * A functional React component utilized to render the `Layout` component
+ */
+
+var Layout = function Layout(_ref) {
+  var Navigation = _ref.Navigation,
+      Header = _ref.Header,
+      MainContent = _ref.MainContent,
+      _ref$navbarWidth = _ref.navbarWidth,
+      navbarWidth = _ref$navbarWidth === void 0 ? '250px' : _ref$navbarWidth;
+
+  var _useMediaQuery = react.useMediaQuery('(min-width: 1200px)'),
+      isLargerThan1200 = _useMediaQuery[0];
+
+  var _useState = React.useState(false),
+      show = _useState[0],
+      setShow = _useState[1];
+
+  return /*#__PURE__*/React__default.createElement(react.Grid, {
+    templateAreas: isLargerThan1200 ? "\"nav header\" \"nav main\"" : "\"header\" \"main\"",
+    gridTemplateRows: "auto 1fr",
+    gridTemplateColumns: isLargerThan1200 ? navbarWidth + " 1fr" : '100% 1fr',
+    h: "100%",
+    width: "100%",
+    gap: "4",
+    bg: "#f5f5f5"
+  }, /*#__PURE__*/React__default.createElement(react.GridItem, {
+    area: "header",
+    p: "20px 20px 10px 10px",
+    minHeight: "100px"
+  }, /*#__PURE__*/React__default.createElement(BorderedBox, {
+    borderRadius: "md",
+    boxShadow: "rgba(235,237,238,.75) 8px 0 30px 10px"
+  }, /*#__PURE__*/React__default.createElement(react.Flex, {
+    flexDirection: "column",
+    justifyContent: "center",
+    width: "100%",
+    pl: '32px',
+    py: 5
+  }, /*#__PURE__*/React__default.createElement(react.Flex, {
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, Header, !isLargerThan1200 && /*#__PURE__*/React__default.createElement(react.IconButton, {
+    size: "md",
+    variant: "unstyled",
+    alignSelf: "flex-start",
+    "aria-label": "menu",
+    type: "button",
+    onClick: function onClick() {
+      return setShow(!show);
+    },
+    icon: show ? /*#__PURE__*/React__default.createElement(icons.CloseIcon, null) : /*#__PURE__*/React__default.createElement(icons.HamburgerIcon, null),
+    _focus: {
+      boxShadow: 'none'
+    }
+  })), !isLargerThan1200 && /*#__PURE__*/React__default.createElement(react.Collapse, {
+    "in": show
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    marginTop: 5
+  }, Navigation))))), isLargerThan1200 && /*#__PURE__*/React__default.createElement(react.GridItem, {
+    area: "nav",
+    width: navbarWidth
+  }, /*#__PURE__*/React__default.createElement(BorderedBox, {
+    boxShadow: "rgba(0, 0, 0, 0.035) 0px 2px 10px"
+  }, Navigation)), /*#__PURE__*/React__default.createElement(react.GridItem, {
+    area: "main",
+    p: "0 20px 20px 10px"
+  }, /*#__PURE__*/React__default.createElement(BorderedBox, {
+    borderRadius: "md",
+    boxShadow: "rgba(0, 0, 0, 0.035) 0px 2px 10px"
+  }, MainContent)));
+};
+
+/**
+ * A functional React component utilized to render the `LoadingIndicator` component
+ */
+
+var LoadingIndicator = function LoadingIndicator(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xl' : _ref$size,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? 'Loading' : _ref$text,
+      _ref$thickness = _ref.thickness,
+      thickness = _ref$thickness === void 0 ? '3px' : _ref$thickness,
+      _ref$speed = _ref.speed,
+      speed = _ref$speed === void 0 ? '0.5s' : _ref$speed,
+      className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
+    flexDirection: "column",
+    alignItems: "center",
+    "aria-label": "loading-indicator",
+    className: "loading-indicator " + (className != null ? className : '')
+  }, /*#__PURE__*/React__default.createElement(react.Spinner, {
+    size: size,
+    color: colors.blue[500],
+    flex: "none",
+    thickness: thickness,
+    speed: speed,
+    mb: 2
+  }), text && /*#__PURE__*/React__default.createElement(react.Text, {
+    fontSize: size,
+    lineHeight: "shorter",
+    fontWeight: "semibold"
+  }, text));
+};
+
+/**
+ * This function is responsible for returning an array as a const, so the generic type `TableBody`
+ * may accept it as an argument and use the elements of the array as keys.
+ */
+function generateTableColumnsAsConst(arr) {
+  return [].concat(arr);
+}
+
+var typography = {
+  letterSpacings: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em'
+  },
+  lineHeights: {
+    normal: 'normal',
+    none: 1,
+    shorter: 1.25,
+    "short": 1.375,
+    base: 1.5,
+    tall: 1.625,
+    taller: '2',
+    '3': '.75rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem'
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
+  },
+  fonts: {
+    base: "proxima-nova, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+    mono: "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
+  },
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '4rem'
+  }
+};
+
+/**
+ * A loading spinner rendered after the table to indicate more rows are being loaded.
+ */
+
+var TableLoadingRows = function TableLoadingRows(_ref) {
+  var isLoading = _ref.isLoading,
+      onLoadMore = _ref.onLoadMore;
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
+    width: "full",
+    direction: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 20,
+    borderTopColor: colors.gray[100]
+  }, isLoading ? /*#__PURE__*/React__default.createElement(react.Spinner, {
+    size: "lg",
+    color: colors.blue[500]
+  }) : /*#__PURE__*/React__default.createElement(react.IconButton, {
+    "aria-label": "Fetch more rows",
+    icon: /*#__PURE__*/React__default.createElement(hi.HiOutlineRefresh, null),
+    fontSize: typography.fontSizes['3xl'],
+    type: "button",
+    variant: "link",
+    onClick: onLoadMore
+  }));
+};
+
+/**
+ * A React component utilized to render the `Table` component
+ */
+
+function Table(_ref) {
+  var columns = _ref.columns,
+      headers = _ref.headers,
+      body = _ref.body,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'There is currently no available data' : _ref$placeholder,
+      loading = _ref.loading,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'simple' : _ref$variant,
+      colorScheme = _ref.colorScheme,
+      _ref$borderTopRadius = _ref.borderTopRadius,
+      borderTopRadius = _ref$borderTopRadius === void 0 ? true : _ref$borderTopRadius,
+      loadMore = _ref.loadMore;
+  var columnsAsConst = generateTableColumnsAsConst(columns);
+  return /*#__PURE__*/React__default.createElement(react.TableContainer, {
+    border: "1px",
+    borderColor: colors.gray[100],
+    overflowX: "auto",
+    bg: "white",
+    borderRadius: "md",
+    borderTopLeftRadius: borderTopRadius ? 'md' : 0,
+    borderTopRightRadius: borderTopRadius ? 'md' : 0
+  }, /*#__PURE__*/React__default.createElement(react.Table, {
+    variant: variant,
+    colorScheme: colorScheme
+  }, /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, null, columnsAsConst.map(function (column) {
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      React__default.createElement(react.Th, null, headers[column])
+    );
+  }))), /*#__PURE__*/React__default.createElement(react.Tbody, null, body.map(function (row) {
+    return /*#__PURE__*/React__default.createElement(react.Tr, null, columnsAsConst.map(function (column) {
+      return (
+        /*#__PURE__*/
+        // @ts-ignore
+        React__default.createElement(react.Td, null, row[column])
+      );
+    }));
+  })), !body.length && /*#__PURE__*/React__default.createElement(react.TableCaption, {
+    py: 10
+  }, placeholder), ' '), loadMore && loading !== undefined && /*#__PURE__*/React__default.createElement(TableLoadingRows, {
+    isLoading: loading,
+    onLoadMore: loadMore
+  }));
+}
+
+/**
+ * A functional React component utilized to render the `TableNavWrapper` component
+ */
+
+var TabsWrapper = function TabsWrapper(_ref) {
+  var children = _ref.children,
+      navItems = _ref.navItems,
+      navIndex = _ref.navIndex,
+      setNavIndex = _ref.setNavIndex;
+  return /*#__PURE__*/React__default.createElement(react.Tabs, {
+    size: "lg",
+    variant: "simple",
+    index: navIndex,
+    onChange: setNavIndex
+  }, /*#__PURE__*/React__default.createElement(react.TabList, {
+    flexDirection: {
+      base: 'column',
+      sm: 'row'
+    },
+    border: "1px",
+    borderColor: colors.gray[100],
+    bg: "white",
+    borderRadius: "md",
+    borderBottom: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/React__default.createElement(react.Tab, null, navItem);
+  })), children);
+};
+
+/**
+ * A functional React component utilized to render the `Text` component. The component is mainly
+ * controlled by by the `variant` prop which determines `fontSize`, `fontWeight`, etc.
+ * Also extends `TypographyProps`.
+ */
+
+var Text = function Text(_ref) {
+  var children = _ref.children,
+      fontSize = _ref.fontSize,
+      lineHeight = _ref.lineHeight,
+      letterSpacing = _ref.letterSpacing,
+      fontWeight = _ref.fontWeight,
+      variant = _ref.variant,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? colors.black : _ref$color,
+      className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(react.Text, {
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    letterSpacing: letterSpacing,
+    fontWeight: fontWeight,
+    color: color,
+    variant: variant,
+    className: variant + " " + (className || '')
+  }, children);
+};
+
+/**
+ * Breakpoints for responsive design
+ */
+
+var breakpointValues = {
+  sm: '30em',
+  md: '48em',
+  lg: '62em',
+  xl: '80em'
+};
+var breakpoints = /*#__PURE__*/themeTools.createBreakpoints(breakpointValues);
+
+var shadows = {
+  xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  insetOutline: "inset 0 0 0 2px " + colors.blue[200],
+  outline: "0 0 0 2px " + colors.blue[200],
+  outlineDanger600: "0 0 0 2px " + colors.red[600],
+  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+  none: 'none',
+  'dark-lg': 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px'
+};
+
+var parts = ['container', 'description', 'icon'];
+var baseStyle = {
+  container: {
+    px: '8px',
+    py: '8px'
+  },
+  description: {
+    width: '100%',
+    fontSize: '13px',
+    textAlign: 'left',
+    color: colors.label.primary.light,
+    lineHeight: '16px'
+  }
+};
+
+function variantPositive() {
+  return {
+    container: {
+      bg: '#d8f1b8'
+    }
+  };
+}
+
+function variantWarning() {
+  return {
+    container: {
+      bg: '#ffefb4'
+    }
+  };
+}
+
+function variantError() {
+  return {
+    container: {
+      bg: '#ffbdb9'
+    }
+  };
+}
+
+function variantNeutral() {
+  return {
+    container: {
+      bg: '#7474800D'
+    }
+  };
+}
+
+var variants = {
+  positive: variantPositive,
+  warning: variantWarning,
+  error: variantError,
+  neutral: variantNeutral
+};
+var defaultProps = {
+  variant: 'positive'
+};
+var Alert = {
+  parts: parts,
+  baseStyle: baseStyle,
+  variants: variants,
+  defaultProps: defaultProps
+};
+
+var baseStyle$1 = {
+  px: 1,
+  textTransform: 'uppercase',
+  fontSize: 'xs',
+  borderRadius: 'sm',
+  fontWeight: 'bold'
+};
+
+function variantSolid(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+  var dark = themeTools.transparentize(c + ".500", 0.6)(theme);
+  return {
+    bg: themeTools.mode(c + ".500", dark)(props),
+    color: themeTools.mode("white", "whiteAlpha.800")(props)
+  };
+}
+
+function variantSubtle(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+  var darkBg = themeTools.transparentize(c + ".200", 0.16)(theme);
+  return {
+    bg: themeTools.mode(c + ".100", darkBg)(props),
+    color: themeTools.mode(c + ".800", c + ".200")(props)
+  };
+}
+
+function variantOutline(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+  var darkColor = themeTools.transparentize(c + ".200", 0.8)(theme);
+  var lightColor = themeTools.getColor(theme, c + ".500");
+  var color = themeTools.mode(lightColor, darkColor)(props);
+  return {
+    color: color,
+    boxShadow: "inset 0 0 0px 1px " + color
+  };
+}
+
+var variants$1 = {
+  solid: variantSolid,
+  subtle: variantSubtle,
+  outline: variantOutline
+};
+var defaultProps$1 = {
+  variant: 'subtle',
+  colorScheme: 'gray'
+};
+var Badge = {
+  baseStyle: baseStyle$1,
+  variants: variants$1,
+  defaultProps: defaultProps$1
+};
+
+var baseStyle$2 = {
+  lineHeight: 1,
+  borderRadius: 'md',
+  fontWeight: 'bold',
+  _focus: {
+    boxShadow: 'outline'
+  },
+  _disabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+    boxShadow: 'none'
+  }
+};
+
+var focusShadow = function focusShadow(color) {
+  return "0 0 0 3px " + color;
+};
+
+function variantGhost(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+
+  if (c === 'gray') {
+    var _focusColor = themeTools.getColor(theme, 'gray.100');
+
+    return {
+      color: themeTools.mode("gray.500", "whiteAlpha.900")(props),
+      _hover: {
+        bg: themeTools.mode("gray.50", "whiteAlpha.200")(props)
+      },
+      _active: {
+        bg: themeTools.mode("gray.200", "whiteAlpha.300")(props)
+      },
+      _focus: {
+        boxShadow: focusShadow(_focusColor)
+      }
+    };
+  }
+
+  var darkHoverBg = themeTools.transparentize(c + ".200", 0.12)(theme);
+  var darkActiveBg = themeTools.transparentize(c + ".200", 0.24)(theme);
+  var focusColor = themeTools.getColor(theme, c + ".200");
+  return {
+    color: themeTools.mode(c + ".500", c + ".200")(props),
+    bg: 'transparent',
+    _hover: {
+      bg: themeTools.mode(c + ".50", darkHoverBg)(props)
+    },
+    _active: {
+      bg: themeTools.mode(c + ".100", darkActiveBg)(props)
+    },
+    _focus: {
+      boxShadow: focusShadow(focusColor)
+    }
+  };
+}
+
+function variantOutline$1(props) {
+  var c = props.colorScheme;
+  var borderColor = themeTools.mode("gray.200", "whiteAlpha.300")(props);
+  return _extends({
+    border: '1px solid',
+    borderColor: c === 'gray' ? borderColor : 'currentColor'
+  }, variantGhost(props));
+}
+/** Accessible color overrides for less accessible colors. */
+
+
+var accessibleColorMap = {
+  yellow: {
+    bg: 'yellow.400',
+    color: 'black',
+    hoverBg: 'yellow.500',
+    activeBg: 'yellow.600'
+  },
+  cyan: {
+    bg: 'cyan.400',
+    color: 'black',
+    hoverBg: 'cyan.500',
+    activeBg: 'cyan.600'
+  }
+};
+
+function variantSolid$1(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+  if (c === 'gray') return {
+    color: 'gray.500',
+    bg: themeTools.mode("gray.50", "whiteAlpha.200")(props),
+    _hover: {
+      bg: themeTools.mode("gray.100", "whiteAlpha.300")(props)
+    },
+    _active: {
+      bg: themeTools.mode("gray.200", "whiteAlpha.400")(props)
+    }
+  };
+  if (c === 'darkgray') return {
+    color: 'white',
+    bg: 'gray.400',
+    _hover: {
+      bg: 'gray.600'
+    },
+    _active: {
+      bg: 'gray.700'
+    }
+  };
+
+  var _ref = accessibleColorMap[c] || {},
+      _ref$bg = _ref.bg,
+      bg = _ref$bg === void 0 ? c + ".500" : _ref$bg,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'white' : _ref$color,
+      _ref$hoverBg = _ref.hoverBg,
+      hoverBg = _ref$hoverBg === void 0 ? c + ".600" : _ref$hoverBg,
+      _ref$activeBg = _ref.activeBg,
+      activeBg = _ref$activeBg === void 0 ? c + ".700" : _ref$activeBg;
+
+  var focusColor = themeTools.getColor(theme, c + ".200");
+  return {
+    bg: themeTools.mode(bg, c + ".200")(props),
+    color: themeTools.mode(color, "gray.800")(props),
+    _hover: {
+      bg: themeTools.mode(hoverBg, c + ".300")(props)
+    },
+    _active: {
+      bg: themeTools.mode(activeBg, c + ".400")(props)
+    },
+    _focus: {
+      boxShadow: focusShadow(focusColor)
+    }
+  };
+}
+/**
+ * A variant that displays a solid variant when an active CSS class is
+ * detected, otherwise display a ghost variant.  This is useful for pill nav filters.
+ */
+
+
+function variantActiveSolid(props) {
+  return _extends({}, variantGhost(_extends({}, props, {
+    colorScheme: 'gray'
+  })), {
+    '&.active': _extends({}, variantSolid$1(props))
+  });
+}
+
+function variantLink(props) {
+  var c = props.colorScheme;
+  return {
+    padding: 0,
+    height: 'auto',
+    lineHeight: 'normal',
+    color: themeTools.mode(c + ".500", c + ".200")(props),
+    _hover: {
+      textDecoration: 'underline'
+    },
+    _active: {
+      color: themeTools.mode(c + ".700", c + ".500")(props)
+    }
+  };
+}
+
+var variantUnstyled = {
+  bg: 'none',
+  color: 'inherit',
+  display: 'inline',
+  lineHeight: 'inherit',
+  m: 0,
+  p: 0
+};
+var variants$2 = {
+  ghost: variantGhost,
+  outline: variantOutline$1,
+  solid: variantSolid$1,
+  activeSolid: variantActiveSolid,
+  link: variantLink,
+  unstyled: variantUnstyled
+};
+var sizes = {
+  lg: {
+    borderRadius: 'full',
+    h: 12,
+    minW: 20,
+    fontSize: 'lg',
+    px: 6
+  },
+  md: {
+    borderRadius: 'full',
+    h: 10,
+    minW: 20,
+    fontSize: 'md',
+    px: 4
+  },
+  sm: {
+    borderRadius: 'full',
+    h: 8,
+    minW: 8,
+    fontSize: 'sm',
+    px: 3
+  },
+  xs: {
+    borderRadius: 'full',
+    h: 6,
+    minW: 6,
+    fontSize: 'xs',
+    px: 2
+  }
+};
+var defaultProps$2 = {
+  variant: 'solid',
+  size: 'md',
+  colorScheme: 'primary'
+};
+var Button$1 = {
+  baseStyle: baseStyle$2,
+  variants: variants$2,
+  sizes: sizes,
+  defaultProps: defaultProps$2
+};
+
+var variants$3 = Badge.variants,
+    defaultProps$3 = Badge.defaultProps;
+var baseStyle$3 = {
+  fontFamily: 'mono',
+  fontSize: 'sm',
+  px: '0.2em',
+  borderRadius: 'sm'
+};
+var Code = {
+  baseStyle: baseStyle$3,
+  variants: variants$3,
+  defaultProps: defaultProps$3
+};
+
+var parts$1 = ['requiredIndicator', 'helperText'];
+
+function baseStyleRequiredIndicator(props) {
+  return {
+    ml: 1,
+    color: themeTools.mode('red.500', 'red.300')(props)
+  };
+}
+
+function baseStyleHelperText(props) {
+  return {
+    mt: 1,
+    color: themeTools.mode('gray.400', 'whiteAlpha.600')(props),
+    lineHeight: 'normal',
+    fontSize: 'sm'
+  };
+}
+
+var baseStyle$4 = function baseStyle(props) {
+  return {
+    requiredIndicator: baseStyleRequiredIndicator(props),
+    helperText: baseStyleHelperText(props)
+  };
+};
+
+var Form$1 = {
+  parts: parts$1,
+  baseStyle: baseStyle$4
+};
+
+var parts$2 = ['text', 'icon'];
+
+function baseStyleText(props) {
+  return {
+    color: themeTools.mode('red.500', 'red.300')(props),
+    mt: 1,
+    lineHeight: 'normal',
+    fontSize: 'sm'
+  };
+}
+
+function baseStyleIcon(props) {
+  return {
+    mr: '0.5em',
+    color: themeTools.mode('red.500', 'red.300')(props)
+  };
+}
+
+var baseStyle$5 = function baseStyle(props) {
+  return {
+    text: baseStyleText(props),
+    icon: baseStyleIcon(props)
+  };
+};
+
+var FormError = {
+  parts: parts$2,
+  baseStyle: baseStyle$5
+};
+
+var baseStyle$6 = {
+  fontSize: 'md',
+  mr: 3,
+  mb: 1,
+  fontWeight: 'bold',
+  color: 'gray.700',
+  transition: 'all 0.2s',
+  opacity: 1,
+  _disabled: {
+    opacity: 0.4
+  }
+};
+var FormLabel = {
+  baseStyle: baseStyle$6
+};
+
+var parts$3 = ['field', 'addon'];
+var baseStyle$7 = {
+  field: {
+    width: '100%',
+    outline: 0,
+    position: 'relative',
+    appearance: 'none',
+    transition: 'all 0.2s',
+    '::placeholder': {
+      color: 'gray.300'
+    }
+  }
+};
+var size = {
+  lg: {
+    fontSize: 'md',
+    pl: 3,
+    pr: 3,
+    h: 12,
+    borderRadius: 'md'
+  },
+  md: {
+    fontSize: 'md',
+    pl: 3,
+    pr: 3,
+    h: 10,
+    borderRadius: 'md'
+  },
+  sm: {
+    fontSize: 'sm',
+    pl: 3,
+    pr: 3,
+    h: 8,
+    borderRadius: 'sm'
+  }
+};
+var sizes$1 = {
+  lg: {
+    field: size.lg,
+    addon: size.lg
+  },
+  md: {
+    field: size.md,
+    addon: size.md
+  },
+  sm: {
+    field: size.sm,
+    addon: size.sm
+  }
+};
+
+function getDefaults(props) {
+  var fc = props.focusBorderColor,
+      ec = props.errorBorderColor;
+  return {
+    focusBorderColor: fc || themeTools.mode('blue.500', 'blue.300')(props),
+    errorBorderColor: ec || themeTools.mode('red.500', 'red.300')(props)
+  };
+}
+
+function variantOutline$2(props) {
+  var theme = props.theme;
+
+  var _getDefaults = getDefaults(props),
+      fc = _getDefaults.focusBorderColor,
+      ec = _getDefaults.errorBorderColor;
+
+  return {
+    field: {
+      border: '1px solid',
+      borderColor: 'inherit',
+      bg: 'white',
+      _hover: {
+        borderColor: themeTools.mode('gray.300', 'whiteAlpha.400')(props)
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed'
+      },
+      _focus: {
+        zIndex: 1,
+        borderColor: themeTools.getColor(theme, fc),
+        boxShadow: "0 0 0 2px " + themeTools.transparentize(fc, 0.3)(theme)
+      },
+      _invalid: {
+        borderColor: themeTools.getColor(theme, ec),
+        boxShadow: 'none',
+        _focus: {
+          boxShadow: "0 0 0 2px " + themeTools.transparentize(ec, 0.3)(theme)
+        }
+      }
+    },
+    addon: {
+      border: '1px solid',
+      borderColor: themeTools.mode('inherit', 'whiteAlpha.50')(props),
+      bg: themeTools.mode('gray.100', 'whiteAlpha.300')(props)
+    }
+  };
+}
+
+function variantFilled(props) {
+  var theme = props.theme;
+
+  var _getDefaults2 = getDefaults(props),
+      fc = _getDefaults2.focusBorderColor,
+      ec = _getDefaults2.errorBorderColor;
+
+  return {
+    field: {
+      border: '2px solid',
+      borderColor: 'transparent',
+      bg: themeTools.mode('gray.50', 'whiteAlpha.50')(props),
+      _hover: {
+        bg: themeTools.mode('gray.100', 'whiteAlpha.100')(props)
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed'
+      },
+      _focus: {
+        bg: 'transparent',
+        borderColor: themeTools.getColor(theme, fc)
+      },
+      _invalid: {
+        borderColor: themeTools.getColor(theme, ec)
+      }
+    },
+    addon: {
+      border: '2px solid',
+      borderColor: 'transparent',
+      bg: themeTools.mode('gray.100', 'whiteAlpha.50')(props)
+    }
+  };
+}
+
+function variantFlushed(props) {
+  var theme = props.theme;
+
+  var _getDefaults3 = getDefaults(props),
+      fc = _getDefaults3.focusBorderColor,
+      ec = _getDefaults3.errorBorderColor;
+
+  return {
+    field: {
+      borderBottom: '1px solid inherit',
+      borderRadius: 0,
+      pl: 0,
+      pr: 0,
+      bg: 'transparent',
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _focus: {
+        borderColor: themeTools.getColor(theme, fc),
+        boxShadow: "0px 1px 0px 0px " + themeTools.getColor(theme, fc)
+      },
+      _invalid: {
+        borderColor: themeTools.getColor(theme, ec)
+      }
+    },
+    addon: {
+      borderBottom: '2px solid',
+      borderColor: 'inherit',
+      borderRadius: 0,
+      paddingX: 0,
+      bg: 'transparent'
+    }
+  };
+}
+
+var variantUnstyled$1 = {
+  field: {
+    bg: 'transparent',
+    pl: 0,
+    pr: 0,
+    height: 'auto'
+  },
+  addon: {
+    bg: 'transparent',
+    pl: 0,
+    pr: 0,
+    height: 'auto'
+  }
+};
+var variants$4 = {
+  outline: variantOutline$2,
+  filled: variantFilled,
+  flushed: variantFlushed,
+  unstyled: variantUnstyled$1
+};
+var defaultProps$4 = {
+  size: 'lg',
+  variant: 'outline'
+};
+var Input$1 = {
+  parts: parts$3,
+  baseStyle: baseStyle$7,
+  sizes: sizes$1,
+  variants: variants$4,
+  defaultProps: defaultProps$4
+};
+
+var baseStyle$8 = {
+  color: 'blue.500',
+  textDecoration: 'underline',
+  transition: 'none',
+  _hover: {
+    color: 'orange.500'
+  }
+};
+
+function variantSidebar() {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    // height: '56px',
+    pl: 4,
+    pr: 4,
+    py: 2,
+    color: 'gray.500',
+    lineHeight: 1.5,
+    outline: 'none',
+    transition: 'none',
+    textDecoration: 'none',
+    _focus: {
+      boxShadow: 'none'
+    },
+    _hover: {
+      color: 'primary.500',
+      textDecoration: 'none'
+    },
+    '&.active': {
+      color: 'primary.500',
+      fontWeight: 'semibold'
+    }
+  };
+} // This variant represent the same as the sidebar one above but when the route matches exactly
+// and not only for a child sub route match. I did it as a separate variant instead of a
+// prop to get around React complaining that the dom element was not recognized.
+
+
+function variantSidebarExact() {
+  // props: Dict
+  var base = variantSidebar(); // const { theme } = props;
+  // const primaryColor = getColor(theme, 'primary.500');
+
+  return _extends({}, base, {
+    '&.active': {// ...base['&.active'],
+      // boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
+    }
+  });
+}
+
+function variantSubNavigation(props) {
+  var theme = props.theme;
+  var primaryColor = themeTools.getColor(theme, 'primary.500');
+  return {
+    display: 'block',
+    pl: 10,
+    mb: 3,
+    color: 'gray.900',
+    lineHeight: 'shorter',
+    fontSize: 'sm',
+    outline: 'none',
+    transition: 'none',
+    textDecoration: 'none',
+    _focus: {
+      boxShadow: 'none'
+    },
+    _hover: {
+      color: 'primary.500',
+      textDecoration: 'none'
+    },
+    '&.active': {
+      color: 'primary.500',
+      boxShadow: "inset 3px 0 0 0 " + primaryColor,
+      fontWeight: 'semibold'
+    }
+  };
+}
+
+function variantNavlink(props) {
+  var c = props.colorScheme,
+      size = props.size;
+  return {
+    color: 'gray.500',
+    fontWeight: 'normal',
+    textDecoration: 'none',
+    fontSize: size || 'md',
+    _hover: {
+      color: c + ".500",
+      textDecoration: 'none'
+    },
+    '&.active': {
+      color: c + ".500"
+    }
+  };
+}
+
+var variants$5 = {
+  sidebar: variantSidebar,
+  sidebarExact: variantSidebarExact,
+  subNavigation: variantSubNavigation,
+  navlink: variantNavlink
+};
+var Link = {
+  baseStyle: baseStyle$8,
+  variants: variants$5
+};
+
+var parts$4 = ['item', 'command', 'list', 'button', 'groupTitle'];
+
+function baseStyleList(props) {
+  return {
+    bg: themeTools.mode("#fff", "gray.700")(props),
+    boxShadow: themeTools.mode("2xl", "dark-lg")(props),
+    color: 'inherit',
+    minW: '3xs',
+    py: 2,
+    zIndex: 'docked',
+    borderRadius: 'md',
+    borderWidth: 0,
+    overflow: 'hidden'
+  };
+}
+
+function baseStyleItem(props) {
+  return {
+    fontSize: 'sm',
+    py: 2,
+    px: 4,
+    transition: 'background 50ms ease-in 0s',
+    _focus: {
+      bg: themeTools.mode("blue.50", "whiteAlpha.200")(props)
+    },
+    _hover: {
+      bg: themeTools.mode("blue.50", "whiteAlpha.200")(props)
+    },
+    _active: {
+      bg: themeTools.mode("gray.200", "whiteAlpha.200")(props)
+    },
+    _expanded: {
+      bg: themeTools.mode("gray.100", "whiteAlpha.100")(props)
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed'
+    }
+  };
+}
+
+var baseStyleGroupTitle = {
+  mx: 4,
+  my: 2,
+  fontWeight: 'semibold',
+  fontSize: 'sm'
+};
+var baseStyleCommand = {
+  opacity: 0.6
+};
+
+var baseStyle$9 = function baseStyle(props) {
+  return {
+    list: baseStyleList(props),
+    item: baseStyleItem(props),
+    groupTitle: baseStyleGroupTitle,
+    command: baseStyleCommand
+  };
+};
+
+var Menu = {
+  parts: parts$4,
+  baseStyle: baseStyle$9
+};
+
+var parts$5 = ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer'];
+var baseStyleOverlay = {
+  bg: 'blackAlpha.600',
+  zIndex: 'modal'
+};
+
+function baseStyleDialogContainer(props) {
+  var scrollBehavior = props.scrollBehavior;
+  return {
+    display: 'flex',
+    zIndex: 'modal',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
+    WebkitOverflowScrolling: 'touch'
+  };
+}
+
+function baseStyleDialog(props) {
+  var isCentered = props.isCentered,
+      scrollBehavior = props.scrollBehavior;
+  return {
+    borderRadius: 'lg',
+    bg: themeTools.mode('white', 'gray.700')(props),
+    color: 'inherit',
+    mt: isCentered ? {
+      base: 8,
+      md: 'auto'
+    } : '3.75rem',
+    mb: isCentered ? {
+      base: 20,
+      md: 'auto'
+    } : '3.75rem',
+    mx: 4,
+    zIndex: 'modal',
+    maxH: scrollBehavior === 'inside' ? 'calc(100vh - 7.5rem)' : undefined,
+    boxShadow: themeTools.mode('xl', 'dark-lg')(props)
+  };
+}
+
+var baseStyleHeader = {
+  px: 6,
+  py: 4,
+  minHeight: 20,
+  fontSize: 'xl',
+  display: 'flex',
+  alignItems: 'center',
+  fontWeight: 'bold',
+  bg: 'primary.900',
+  color: 'white',
+  userSelect: 'none'
+};
+var baseStyleCloseButton = {
+  position: 'absolute',
+  top: 2,
+  right: 3
+};
+
+function baseStyleBody(props) {
+  var scrollBehavior = props.scrollBehavior;
+  return {
+    px: [6, null, 20],
+    py: 10,
+    flex: 1,
+    overflow: scrollBehavior === 'inside' ? 'auto' : undefined
+  };
+}
+
+var baseStyleFooter = {
+  px: [6, null, 20],
+  pt: 5,
+  pb: 16
+};
+
+var baseStyle$a = function baseStyle(props) {
+  return {
+    overlay: baseStyleOverlay,
+    dialogContainer: baseStyleDialogContainer(props),
+    dialog: baseStyleDialog(props),
+    header: baseStyleHeader,
+    closeButton: baseStyleCloseButton,
+    body: baseStyleBody(props),
+    footer: baseStyleFooter
+  };
+};
+/**
+ * Since the `maxWidth` prop references theme.sizes internally,
+ * we can leverage that to size our modals.
+ */
+
+
+function getSize(value) {
+  var commonBodyFooterStyles = {
+    xs: {
+      px: 8,
+      pb: 8
+    },
+    sm: {
+      px: 8,
+      pb: 8
+    },
+    md: {
+      px: 8,
+      pb: 8
+    },
+    lg: {
+      px: 10,
+      pb: 10
+    },
+    xl: {
+      px: 12,
+      pb: 10
+    }
+  };
+  var bodyStyles = {
+    xs: {
+      py: 6
+    },
+    sm: {
+      py: 6
+    },
+    md: {
+      py: 6
+    },
+    lg: {
+      py: 8
+    },
+    xl: {
+      py: 8
+    }
+  };
+  var footerStyles = {
+    xs: {
+      pb: 8
+    },
+    sm: {
+      pb: 8
+    },
+    md: {
+      pb: 8
+    },
+    lg: {
+      pb: 10
+    },
+    xl: {
+      pb: 10
+    }
+  };
+
+  if (value === 'full') {
+    return {
+      content: {
+        maxW: '100vw',
+        h: '100vh'
+      }
+    };
+  }
+
+  return {
+    content: {
+      maxW: value
+    },
+    body: _extends({}, commonBodyFooterStyles[value], bodyStyles[value]),
+    footer: _extends({}, commonBodyFooterStyles[value], footerStyles[value])
+  };
+}
+
+var sizes$2 = {
+  xs: /*#__PURE__*/getSize('xs'),
+  sm: /*#__PURE__*/getSize('sm'),
+  md: /*#__PURE__*/getSize('md'),
+  lg: /*#__PURE__*/getSize('lg'),
+  xl: /*#__PURE__*/getSize('xl'),
+  '2xl': /*#__PURE__*/getSize('2xl'),
+  '3xl': /*#__PURE__*/getSize('3xl'),
+  '4xl': /*#__PURE__*/getSize('4xl'),
+  '5xl': /*#__PURE__*/getSize('5xl'),
+  '6xl': /*#__PURE__*/getSize('6xl'),
+  full: /*#__PURE__*/getSize('full')
+};
+
+var warningVariant = function warningVariant() {
+  return {
+    header: {
+      bg: 'warning.300',
+      color: 'black'
+    }
+  };
+};
+
+var variants$6 = {
+  warning: warningVariant
+};
+var defaultProps$5 = {
+  size: 'lg',
+  isCentered: true
+};
+var Modal = {
+  parts: parts$5,
+  baseStyle: baseStyle$a,
+  sizes: sizes$2,
+  variants: variants$6,
+  defaultProps: defaultProps$5
+};
+
+var sizes$3 = Input$1.sizes,
+    defaultProps$6 = Input$1.defaultProps,
+    variants$7 = Input$1.variants;
+var parts$6 = ['field', 'icon'];
+
+function baseStyleField(props) {
+  return _extends({}, Input$1.baseStyle.field, {
+    appearance: 'none',
+    paddingBottom: '1px',
+    lineHeight: 'normal',
+    bg: 'white',
+    '> option': {
+      bg: themeTools.mode('white', 'gray.700')(props)
+    }
+  });
+}
+
+var baseStyleInput = {
+  color: 'currentColor',
+  fontSize: '1.25rem',
+  _disabled: {
+    opacity: 0.5
+  }
+};
+
+var baseStyle$b = function baseStyle(props) {
+  return {
+    field: baseStyleField(props),
+    icon: baseStyleInput
+  };
+};
+
+var Select = {
+  parts: parts$6,
+  baseStyle: baseStyle$b,
+  sizes: sizes$3,
+  variants: variants$7,
+  defaultProps: defaultProps$6
+};
+
+var parts$7 = ['track', 'thumb'];
+
+function baseStyleTrack(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+  return {
+    borderRadius: 'full',
+    p: '2px',
+    transition: 'all 120ms',
+    bg: themeTools.mode('gray.300', 'whiteAlpha.400')(props),
+    _focus: {
+      boxShadow: "0 0 0 3px " + themeTools.getColor(theme, 'gray.100')
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed'
+    },
+    _checked: {
+      bg: themeTools.mode(c + ".500", c + ".200")(props),
+      _focus: {
+        boxShadow: "0 0 0 3px " + themeTools.getColor(theme, c + ".200")
+      }
+    }
+  };
+}
+
+var baseStyleThumb = {
+  bg: 'white',
+  transition: 'transform 250ms',
+  borderRadius: 'full',
+  transform: 'translateX(0)'
+};
+
+var baseStyle$c = function baseStyle(props) {
+  return {
+    track: baseStyleTrack(props),
+    thumb: baseStyleThumb
+  };
+};
+
+var sizes$4 = {
+  sm: {
+    track: {
+      w: '1.375rem',
+      h: '0.75rem'
+    },
+    thumb: {
+      w: '0.75rem',
+      h: '0.75rem',
+      _checked: {
+        transform: 'translateX(0.625rem)'
+      }
+    }
+  },
+  md: {
+    track: {
+      w: '1.875rem',
+      h: '1rem'
+    },
+    thumb: {
+      w: '1rem',
+      h: '1rem',
+      _checked: {
+        transform: 'translateX(0.875rem)'
+      }
+    }
+  },
+  lg: {
+    track: {
+      w: '2.875rem',
+      h: '1.5rem'
+    },
+    thumb: {
+      w: '1.5rem',
+      h: '1.5rem',
+      _checked: {
+        transform: 'translateX(1.375rem)'
+      }
+    }
+  }
+};
+var defaultProps$7 = {
+  size: 'md',
+  colorScheme: 'blue'
+};
+var Switch = {
+  parts: parts$7,
+  baseStyle: baseStyle$c,
+  sizes: sizes$4,
+  defaultProps: defaultProps$7
+};
+
+var parts$8 = ['root', 'tablist', 'tab', 'tabpanel', 'indicator'];
+
+function baseStyleRoot(props) {
+  var orientation = props.orientation;
+  return {
+    display: orientation === 'vertical' ? 'flex' : 'block'
+  };
+}
+
+function baseStyleTab(props) {
+  var isFitted = props.isFitted;
+  return {
+    flex: isFitted ? 1 : undefined,
+    transition: 'all 0.2s',
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  };
+}
+
+function baseStyleTablist(props) {
+  var _props$align = props.align,
+      align = _props$align === void 0 ? 'start' : _props$align,
+      orientation = props.orientation;
+  var alignments = {
+    end: 'flex-end',
+    center: 'center',
+    start: 'flex-start'
+  };
+  return {
+    justifyContent: alignments[align],
+    flexDirection: orientation === 'vertical' ? 'column' : 'row'
+  };
+}
+
+var baseStyleTabpanel = {
+  p: 4
+};
+
+var baseStyle$d = function baseStyle(props) {
+  return {
+    root: baseStyleRoot(props),
+    tab: baseStyleTab(props),
+    tablist: baseStyleTablist(props),
+    tabpanel: baseStyleTabpanel
+  };
+};
+
+var sizes$5 = {
+  sm: {
+    tab: {
+      py: '0.25rem',
+      px: 6,
+      fontSize: '0.85rem'
+    }
+  },
+  md: {
+    tab: {
+      fontSize: '1rem',
+      py: '0.75rem',
+      px: 6
+    }
+  },
+  lg: {
+    tab: {
+      fontSize: {
+        base: '1rem',
+        sm: '1.15rem'
+      },
+      py: '0.75rem',
+      px: 6
+    }
+  }
+};
+
+function variantLine(props) {
+  var _tablist, _tab;
+
+  var c = props.colorScheme,
+      orientation = props.orientation;
+  var isVertical = orientation === 'vertical';
+  var borderProp = isVertical ? 'borderLeft' : 'borderBottom';
+  var marginProp = isVertical ? 'ml' : 'mb';
+  var _selected = {
+    color: themeTools.mode(c + ".600", c + ".300")(props),
+    _after: {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      bottom: '-1px',
+      left: 0,
+      right: 0,
+      height: '3px',
+      bg: 'currentColor'
+    }
+  };
+  return {
+    tablist: (_tablist = {}, _tablist[borderProp] = '1px solid', _tablist.borderColor = 'gray.100', _tablist),
+    tab: (_tab = {
+      position: 'relative'
+    }, _tab[borderProp] = 0, _tab.borderColor = 'transparent', _tab[marginProp] = 0, _tab['&.active'] = _selected, _tab._selected = _selected, _tab._active = {
+      bg: themeTools.mode(c + ".50", 'whiteAlpha.300')(props)
+    }, _tab._disabled = {
+      opacity: 0.4,
+      cursor: 'not-allowed'
+    }, _tab)
+  };
+}
+
+function variantEnclosed(props) {
+  var c = props.colorScheme;
+  return {
+    tab: {
+      borderTopRadius: 'md',
+      border: '1px solid',
+      borderColor: 'transparent',
+      mb: '-1px',
+      _selected: {
+        color: themeTools.mode(c + ".600", c + ".300")(props),
+        borderColor: 'inherit',
+        borderBottomColor: themeTools.mode("white", "gray.800")(props)
+      }
+    },
+    tablist: {
+      mb: '-1px',
+      borderBottom: '1px solid',
+      borderColor: 'gray.100'
+    }
+  };
+}
+
+function variantEnclosedColored(props) {
+  var c = props.colorScheme;
+  return {
+    tab: {
+      border: '1px solid',
+      borderColor: 'inherit',
+      bg: themeTools.mode("gray.50", "whiteAlpha.50")(props),
+      mb: '-1px',
+      _notLast: {
+        mr: '-1px'
+      },
+      _selected: {
+        bg: themeTools.mode("#fff", 'gray.800')(props),
+        color: themeTools.mode(c + ".600", c + ".300")(props),
+        borderColor: 'inherit',
+        borderTopColor: 'currentColor',
+        borderBottomColor: 'transparent'
+      }
+    },
+    tablist: {
+      mb: '-1px',
+      borderBottom: '1px solid',
+      borderColor: 'gray.100'
+    }
+  };
+}
+
+function variantSoftRounded(props) {
+  var c = props.colorScheme,
+      theme = props.theme;
+  return {
+    tab: {
+      borderRadius: 'full',
+      fontWeight: 'semibold',
+      color: 'gray.600',
+      _selected: {
+        color: themeTools.getColor(theme, c + ".700"),
+        bg: themeTools.getColor(theme, c + ".100")
+      }
+    }
+  };
+}
+
+function variantSolidRounded(props) {
+  var c = props.colorScheme;
+  return {
+    tab: {
+      borderRadius: 'full',
+      fontWeight: 'semibold',
+      color: themeTools.mode('gray.600', 'inherit')(props),
+      _selected: {
+        color: themeTools.mode("#fff", 'gray.800')(props),
+        bg: themeTools.mode(c + ".600", c + ".300")(props)
+      }
+    }
+  };
+}
+
+var variantUnstyled$2 = {};
+var variantSimple = {
+  tab: {
+    position: 'relative',
+    borderColor: 'transparent',
+    '&.active': {
+      color: colors.blue[500],
+      bg: 'transparent',
+      borderBottom: '1px solid blue.500'
+    },
+    _selected: {
+      color: colors.blue[500],
+      bg: 'transparent',
+      _after: {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        bottom: '-1px',
+        left: 0,
+        right: 0,
+        height: '3px',
+        bg: 'currentColor'
+      }
+    },
+    _active: {
+      bg: 'transparent'
+    }
+  }
+};
+var variants$8 = {
+  line: variantLine,
+  enclosed: variantEnclosed,
+  'enclosed-colored': variantEnclosedColored,
+  'soft-rounded': variantSoftRounded,
+  'solid-rounded': variantSolidRounded,
+  unstyled: variantUnstyled$2,
+  simple: variantSimple
+};
+var defaultProps$8 = {
+  size: 'md',
+  variant: 'line',
+  colorScheme: 'blue'
+};
+var Tabs = {
+  parts: parts$8,
+  baseStyle: baseStyle$d,
+  sizes: sizes$5,
+  variants: variants$8,
+  defaultProps: defaultProps$8
+};
+
+var baseStyle$e = /*#__PURE__*/_extends({}, Input$1.baseStyle.field, {
+  display: 'block',
+  paddingY: '8px',
+  minHeight: '80px',
+  lineHeight: 'short'
+});
+
+var codeVariant = function codeVariant(props) {
+  var _focus = Input$1.variants.outline(props).field._focus;
+
+  return {
+    bg: 'blue.900',
+    color: 'white',
+    fontFamily: 'mono',
+    fontSize: 'sm',
+    border: '1px',
+    borderColor: 'blue.900',
+    borderRadius: 'lg',
+    p: 6,
+    wordBreak: 'break-all',
+    _focus: _focus
+  };
+};
+
+var variants$9 = {
+  outline: function outline(props) {
+    return Input$1.variants.outline(props).field;
+  },
+  flushed: function flushed(props) {
+    return Input$1.variants.flushed(props).field;
+  },
+  filled: function filled(props) {
+    return Input$1.variants.filled(props).field;
+  },
+  code: function code(props) {
+    return codeVariant(props);
+  },
+  unstyled: Input$1.variants.unstyled.field
+};
+var sizes$6 = {
+  sm: Input$1.sizes.sm.field,
+  md: Input$1.sizes.md.field,
+  lg: Input$1.sizes.lg.field
+};
+var defaultProps$9 = {
+  size: 'lg',
+  variant: 'outline'
+};
+var Textarea = {
+  baseStyle: baseStyle$e,
+  sizes: sizes$6,
+  variants: variants$9,
+  defaultProps: defaultProps$9
+};
+
+var defaultProps$a = react.Text.defaultProps;
+var baseStyle$f = {
+  fontWeight: typography.fontWeights.normal,
+  fontFamily: typography.fonts.base,
+  fontSize: typography.fontSizes.sm,
+  lineHeight: typography.lineHeights.base,
+  letterSpacing: typography.letterSpacings.wide
+};
+
+function variantHeader() {
+  return _extends({}, baseStyle$f, {
+    fontWeight: typography.fontWeights.bold,
+    fontSize: typography.fontSizes['3xl'],
+    lineHeight: typography.lineHeights[8],
+    letterSpacing: typography.letterSpacings.wider
+  });
+}
+
+function variantSubheader() {
+  return _extends({}, baseStyle$f, {
+    fontWeight: typography.fontWeights.semibold,
+    fontSize: typography.fontSizes['lg'],
+    lineHeight: typography.lineHeights[5],
+    letterSpacing: typography.letterSpacings.wide
+  });
+}
+
+function variantParagraph() {
+  return baseStyle$f;
+}
+
+var variants$a = {
+  header: variantHeader,
+  subheader: variantSubheader,
+  paragraph: variantParagraph
+};
+var Text$1 = {
+  baseStyle: baseStyle$f,
+  variants: variants$a,
+  defaultProps: /*#__PURE__*/_extends({}, defaultProps$a, {
+    variant: variants$a.paragraph
+  })
+};
+
+var styles = {
+  global: {
+    'html, body, #root': {},
+    body: {
+      fontFamily: 'body',
+      color: 'black',
+      overflow: {
+        base: 'visible',
+        lg: 'hidden'
+      }
+    },
+    '*, *::before, *::after': {
+      borderColor: 'gray.200'
+    },
+    '*::placeholder': {
+      color: 'primary'
+    }
+  }
+};
+
+var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends({
+  breakpoints: breakpoints,
+  colors: colors,
+  shadows: shadows
+}, typography, {
+  components: {
+    Alert: Alert,
+    Badge: Badge,
+    Button: Button$1,
+    Code: Code,
+    Form: Form$1,
+    FormError: FormError,
+    FormLabel: FormLabel,
+    Input: Input$1,
+    Link: Link,
+    Menu: Menu,
+    Modal: Modal,
+    Select: Select,
+    Switch: Switch,
+    Tabs: Tabs,
+    Textarea: Textarea,
+    Text: Text$1
+  },
+  styles: styles
+}));
+
+/**
+ * A functional React wrapper component utilized to consume the custom XQ theme via `ChakraProvider`
+ */
+
+var XQThemeProvider = function XQThemeProvider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(react.ChakraProvider, {
+    theme: customXQChakraTheme,
+    resetCSS: true
+  }, children);
+};
+
+function formatErrorResponse(error) {
+  var _error$response, _error$response$data;
+
+  // This is an error returned from the backend
+  if ((_error$response = error.response) != null && (_error$response$data = _error$response.data) != null && _error$response$data.status) {
+    var _error$response2, _error$response2$data;
+
+    return {
+      message: (_error$response2 = error.response) == null ? void 0 : (_error$response2$data = _error$response2.data) == null ? void 0 : _error$response2$data.status
+    };
+  } // This is any generic error
+
+
+  if (error instanceof Error) {
+    return {
+      message: error.message
+    };
+  } // This would happen if a developer threw an error that isn't actually an error class. Don't do that...
+
+
+  console.error('Caught an error that is not an instance of an error! Replacing with a proper error but please fix this.', error);
+  return {
+    message: 'An unknown error has occurred'
+  };
+}
+
+exports.Banner = Banner;
+exports.Breadcrumbs = Breadcrumbs;
+exports.Button = Button;
+exports.Form = Form;
+exports.FormSection = FormSection;
+exports.GoogleButton = GoogleButton;
+exports.Input = Input;
+exports.Layout = Layout;
+exports.LoadingIndicator = LoadingIndicator;
+exports.SpinnerButton = SpinnerButton;
+exports.Table = Table;
+exports.TabsWrapper = TabsWrapper;
+exports.Text = Text;
+exports.XQThemeProvider = XQThemeProvider;
+exports.formatErrorResponse = formatErrorResponse;
+//# sourceMappingURL=ui-core.cjs.development.js.map