@pingux/astro 1.2.1 → 1.3.2-alpha.0

package/lib/cjs/styles/variants/accordion.js

@@ -1,12 +1,37 @@
 "use strict";
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-_Object$defineProperty(exports, "__esModule", {
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -80,7 +105,6 @@ var accordionGridHeaderNav = {
   flexGrow: 1,
   fontWeight: 0,
   fontSize: '16px',
-  mt: '5px',
   '&.is-focused': {
     outline: 'none',
     boxShadow: 'focus',
@@ -88,13 +112,20 @@ var accordionGridHeaderNav = {
     MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
-    backgroundColor: 'accent.10',
-    boxShadow: 'inset 2px 0 0 0 white'
+    backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
-    backgroundColor: 'accent.10'
+    backgroundColor: 'accent.5'
   }
 };
+
+var accordionGridNavItem = _objectSpread(_objectSpread({}, accordionGridHeaderNav), {}, {
+  '&.is-selected': {
+    backgroundColor: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+});
+
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -109,6 +140,7 @@ var _default = {
   accordionTitle: accordionTitle,
   accordion: accordion,
   accordionBody: accordionBody,
-  accordionGridHeaderNav: accordionGridHeaderNav
+  accordionGridHeaderNav: accordionGridHeaderNav,
+  accordionGridNavItem: accordionGridNavItem
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/boxes.js

@@ -55,7 +55,10 @@ var radioContainer = {
 }; // Used to add spacing for content shown when a radio is checked
 
 var radioCheckedContent = {
-  py: 'md'
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
 };
 
 var listItem = _objectSpread(_objectSpread({}, base), {}, {
@@ -219,26 +222,6 @@ var expandableRow = {
     }
   }
 };
-var navBar = {
-  height: '100%',
-  width: '230px',
-  position: 'absolute',
-  zIndex: '1',
-  top: '0',
-  left: '0',
-  backgroundColor: 'accent.20',
-  overflowY: 'hidden'
-};
-var navBarSectionContainer = {
-  height: '100%',
-  maxHeight: '100%',
-  overflowY: 'overlay !important'
-};
-var navBarItemHeaderContainer = {
-  flexGrow: 1,
-  alignItems: 'center',
-  maxWidth: '180px'
-};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -334,9 +317,6 @@ var _default = {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox,
-  navBar: navBar,
-  navBarSectionContainer: navBarSectionContainer,
-  navBarItemHeaderContainer: navBarItemHeaderContainer
+  bottomShadowScrollbox: bottomShadowScrollbox
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/buttons.js

@@ -97,8 +97,14 @@ var navItemButton = {
   wordBreak: 'break-word',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'accent.10',
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
   }
 };
 var iconButton = {

package/lib/cjs/styles/variants/codeView.js

@@ -7,6 +7,96 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports["default"] = void 0;
+var theme = {
+  plain: {
+    color: '#545454',
+    background: 'none',
+    lineHeight: 1.5,
+    tabSize: 4
+  },
+  styles: [{
+    types: ['prolog', 'constant', 'builtin'],
+    style: {
+      color: 'rgb(189, 147, 249)'
+    }
+  }, {
+    types: ['inserted', 'function'],
+    style: {
+      color: 'rgb(80, 250, 123)'
+    }
+  }, {
+    types: ['deleted'],
+    style: {
+      color: 'rgb(255, 85, 85)'
+    }
+  }, {
+    types: ['changed'],
+    style: {
+      color: 'rgb(255, 184, 108)'
+    }
+  }, {
+    types: ['punctuation', 'symbol'],
+    style: {
+      color: 'rgb(248, 248, 242)'
+    }
+  }, {
+    types: ['string', 'char', 'tag', 'selector'],
+    style: {
+      color: 'rgb(255, 121, 198)'
+    }
+  }, {
+    types: ['keyword', 'variable'],
+    style: {
+      color: 'rgb(189, 147, 249)',
+      fontStyle: 'italic'
+    }
+  }, {
+    types: ['comment'],
+    style: {
+      color: 'rgb(98, 114, 164)'
+    }
+  }, {
+    types: ['attr-name'],
+    style: {
+      color: 'rgb(241, 250, 140)'
+    }
+  }, {
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: '#696969'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: '#545454'
+    }
+  }, {
+    types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
+    style: {
+      color: '#007299'
+    }
+  }, {
+    types: ['boolean', 'number', 'operator', 'entity', 'url', 'variable'],
+    style: {
+      color: '#008000'
+    }
+  }, {
+    types: ['selector', 'attr-name', 'char', 'builtin', 'inserted', 'atrule', 'attr-value', 'function', 'string'],
+    style: {
+      color: '#aa5d00'
+    }
+  }, {
+    types: ['keyword', 'regex', 'important'],
+    style: {
+      color: '#d91e18'
+    }
+  }, {
+    types: ['keyword'],
+    style: {
+      fontStyle: 'normal'
+    }
+  }]
+};
 var wrapper = {
   bg: 'accent.99',
   border: '1px solid',
@@ -71,6 +161,7 @@ var lineNo = {
   color: 'white'
 };
 var _default = {
+  theme: theme,
   wrapper: wrapper,
   lineNo: lineNo
 };

package/lib/cjs/styles/variants/navBar.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _accordion = _interopRequireDefault(require("./accordion"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var container = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var itemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
+var sectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+
+var sectionBody = _objectSpread(_objectSpread({}, _accordion["default"].accordionGridBody), {}, {
+  pl: '0'
+});
+
+var _default = {
+  container: container,
+  itemHeaderContainer: itemHeaderContainer,
+  sectionContainer: sectionContainer,
+  sectionBody: sectionBody
+};
+exports["default"] = _default;

package/lib/cjs/styles/variants/separator.js

@@ -50,9 +50,10 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  mt: 'sm',
+  mb: '20px',
   ml: '45px',
   width: 'calc(100% - 75px)',
-  mb: '15px',
   backgroundColor: 'neutral.60'
 });
 

package/lib/cjs/styles/variants/text.js

@@ -48,7 +48,7 @@ var wordWrap = {
 };
 
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'md',
+  fontSize: 'sm',
   fontWeight: 1,
   mb: 6,
   color: 'neutral.40',
@@ -148,6 +148,8 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var navBarSubtitle = {
+  my: 'md',
+  ml: 'md',
   fontWeight: 3,
   fontSize: '11px',
   color: 'accent.80'

package/lib/cjs/styles/variants/variants.js

@@ -54,6 +54,8 @@ var _menuItem = _interopRequireDefault(require("./menuItem"));
 
 var _messages = _interopRequireDefault(require("./messages"));
 
+var _navBar = _interopRequireDefault(require("./navBar"));
+
 var _numberField = _interopRequireDefault(require("./numberField"));
 
 var _overlayPanel = _interopRequireDefault(require("./overlayPanel"));
@@ -89,6 +91,7 @@ var _default = _objectSpread(_objectSpread({
   menuItem: _menuItem["default"],
   messages: _messages["default"],
   modal: _modal["default"],
+  navBar: _navBar["default"],
   numberField: _numberField["default"],
   overlayPanel: _overlayPanel["default"],
   popoverMenu: _popoverMenu["default"],

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
+import { mergeProps } from '@react-aria/utils';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { useCollator, useLocale } from '@react-aria/i18n';
@@ -45,7 +46,8 @@ export var collectionTypes = {
 var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
 
-  var disabledKeys = props.disabledKeys;
+  var disabledKeys = props.disabledKeys,
+      containerProps = props.containerProps;
   var accordionGridRef = useRef();
   /* istanbul ignore next */
 
@@ -126,7 +128,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, ___EmotionJSX(Box, _extends({}, gridProps, {
+  }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps, containerProps), {
     ref: accordionGridRef
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
@@ -169,6 +171,9 @@ AccordionGridGroup.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
 
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: PropTypes.shape({}),
+
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
 

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React, { forwardRef } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
@@ -15,7 +16,8 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
       className = props.className,
       children = props.children,
-      isSelected = props.isSelected;
+      isSelected = props.isSelected,
+      others = _objectWithoutProperties(props, ["item", "className", "children", "isSelected"]);
 
   var _useAccordionGridCont = useAccordionGridContext(),
       state = _useAccordionGridCont.state;
@@ -53,7 +55,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: isSelected,
     className: classNames,
     "aria-label": ariaLabel
-  }), children);
+  }, others), children);
 });
 AccordionGridItemBody.propTypes = {
   isSelected: PropTypes.bool,

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -6,7 +6,7 @@ import { mergeProps } from '@react-aria/utils';
 import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
 import { useGridCell } from '@react-aria/grid';
-import { useHover } from '@react-aria/interactions';
+import { useHover, usePress } from '@react-aria/interactions';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
@@ -39,13 +39,18 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     node: cellNode,
     focusMode: 'cell'
   }, state, cellRef),
-      gridCellProps = _useGridCell.gridCellProps,
-      isPressed = _useGridCell.isPressed;
+      gridCellProps = _useGridCell.gridCellProps;
 
   var _useHover = useHover({}),
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
+  var _usePress = usePress({
+    ref: cellRef
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
   var _useFocusRing = useFocusRing({
     within: true
   }),
@@ -55,7 +60,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
+  var mergedProps = mergeProps(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = useStatusClasses(className, {
     isPressed: isPressed,

package/lib/components/ArrayField/ArrayField.js

@@ -0,0 +1,179 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
+import Box from '../Box';
+import Button from '../Button';
+import FieldHelperText from '../FieldHelperText';
+import Text from '../Text';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ArrayField = function ArrayField(_ref) {
+  var _context2;
+
+  var addButtonLabel = _ref.addButtonLabel,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      label = _ref.label,
+      helperText = _ref.helperText,
+      status = _ref.status,
+      onAdd = _ref.onAdd,
+      onChange = _ref.onChange,
+      onDelete = _ref.onDelete,
+      renderField = _ref.renderField,
+      others = _objectWithoutProperties(_ref, ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField"]);
+
+  var isControlled = value !== undefined;
+  var createEmptyField = useCallback(function () {
+    return {
+      id: uuid(),
+      value: ''
+    };
+  }, []);
+
+  var _useState = useState(defaultValue || [createEmptyField()]),
+      _useState2 = _slicedToArray(_useState, 2),
+      fieldValues = _useState2[0],
+      setFieldValues = _useState2[1];
+
+  var mapArrayFieldWithNewValue = useCallback(function (arrValues, newValue, fieldId) {
+    return _mapInstanceProperty(arrValues).call(arrValues, function (fieldValue) {
+      if (fieldValue.id === fieldId) {
+        return _objectSpread(_objectSpread({}, fieldValue), {}, {
+          value: newValue
+        });
+      }
+
+      return fieldValue;
+    });
+  }, []);
+  var onFieldValueChange = useCallback(function (event, fieldId) {
+    var tempValue = event; // Checks if value receieved is a key or event
+
+    if (typeof event !== 'string') {
+      tempValue = event.target.value;
+    }
+
+    if (isControlled) {
+      onChange(mapArrayFieldWithNewValue(value, tempValue, fieldId));
+    } else {
+      setFieldValues(function (oldValues) {
+        return mapArrayFieldWithNewValue(oldValues, tempValue, fieldId);
+      });
+    }
+  }, [isControlled, mapArrayFieldWithNewValue, onChange, value]);
+  var onFieldDelete = useCallback(function (fieldId) {
+    if (isControlled) {
+      onDelete(fieldId);
+    } else {
+      setFieldValues(function (oldValues) {
+        return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
+          var id = _ref2.id;
+          return id !== fieldId;
+        });
+      });
+    }
+  }, [isControlled, onDelete]);
+  var onFieldAdd = useCallback(function () {
+    if (onAdd) {
+      return onAdd();
+    }
+
+    return setFieldValues(function (oldValues) {
+      var _context;
+
+      return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
+    });
+  }, [createEmptyField, onAdd]);
+  return ___EmotionJSX(Box, others, ___EmotionJSX(Text, {
+    variant: "label"
+  }, label), ___EmotionJSX(Box, {
+    as: "ul",
+    pl: "0"
+  }, _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref3) {
+    var id = _ref3.id,
+        onComponentRender = _ref3.onComponentRender,
+        fieldValue = _ref3.fieldValue,
+        otherFieldProps = _objectWithoutProperties(_ref3, ["id", "onComponentRender", "fieldValue"]);
+
+    var isDisabled = (value || fieldValues).length === 1;
+    return ___EmotionJSX(Box, {
+      as: "li",
+      mb: "xs",
+      key: id
+    }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+  })), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status
+  }, helperText), ___EmotionJSX(Button, {
+    "aria-label": "Add field",
+    variant: "text",
+    onPress: onFieldAdd,
+    sx: {
+      width: 'fit-content'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    color: "active"
+  }, addButtonLabel)));
+};
+
+ArrayField.propTypes = {
+  /** Label for add button */
+  addButtonLabel: PropTypes.string,
+
+  /** The default value for the array input field (uncontrolled). */
+  defaultValue: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    value: PropTypes.string
+  })),
+
+  /** The default value of the array input field (controlled). */
+  value: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    value: PropTypes.string
+  })),
+
+  /** The rendered label for the field. */
+  label: PropTypes.node,
+
+  /** Text to display before add button. Useful for errors or other info. */
+  helperText: PropTypes.node,
+
+  /** Callback for changing array field data  */
+  onChange: PropTypes.func,
+
+  /** Callback for adding new empty field */
+  onAdd: PropTypes.func,
+
+  /** Callback for deleting a field */
+  onDelete: PropTypes.func,
+
+  /** Render prop to display an input field */
+  renderField: PropTypes.func,
+
+  /** Determines the helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses))
+};
+ArrayField.defaultProps = {
+  addButtonLabel: '+ Add'
+};
+export default ArrayField;