@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/cjs/recipes/CopyToClipboard.stories.js

@@ -1,28 +1,19 @@
 "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", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index");
-
 var _useCopyToClipboard = _interopRequireDefault(require("../hooks/useCopyToClipboard"));
-
+var _index = require("../index");
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Recipes/Copy to Clipboard'
 };
 exports["default"] = _default;
-
 var Default = function Default() {
   var textToCopy = 'eyJraWQiOiI4YTg5MmY3ZS1iNTk1LTRkYWQtODBlNC0yMzA4ODkyZTczZDQiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2FwaS5waW5nb25lLmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgucGluZ29uZS5jb20iLCJjb25zb2xlVXJsIjoiaHR0cHM6Ly9jb25zb2xlLnBpbmdvbmUuY29tIiwiZW52aXJvbm1lbnROYW1lIjoiTW9udGFuYSIsImVudmlyb25tZW50SWQiOiJhYzc2NWQ0Ny1kMDM2LTQ1MGUtODFjMS1mYjQ1NDMxMjM1NjYiLCJvcmdhbml6YXRpb25OYW1lIjoiaW50ZXJuYWxfZXJpa2FhbGRlYm9yZ2hfMjUyMDc1MDMxIiwib3JnYW5pemF0aW9uSWQiOiJkMDYzMmYwZi03YjQ2LTQ5ZjUtYjgyYS1kZWU5MWQ3MDY3ODYiLCJnYXRld2F5TmFtZSI6ImRzZHMiLCJnYXRld2F5SWQiOiJiMDVmNGU5Yy1jMzRiLTRlZTMtYTYyNS01ZGFiNjlkYTE1YTEiLCJnYXRld2F5VHlwZSI6IlBJTkdfRkVERVJBVEUiLCJ0YXJnZXRDbHVzdGVyRW52aXJvbm1lbnQiOiJQUk9EIiwidGFyZ2V0R2VvZ3JhcGh5IjoiTkEiLCJyZWdpb24iOiJOb3J0aCBBbWVyaWNhIiwianRpIjoiMTUwYTQ0OTktZjIyYi00YWVhLWIzY2UtYWM2YWY1NjVjNjk5IiwiaXNzIjoid3NzOi8vZ2F0ZXdheXMucGluZ29uZS5jb20iLCJpYXQiOjE2MjYyODEyMTZ9.JJ9wwqTxQWUwz2vmU0yE54xuYff51xbirzZuEUxd8GDzV45bnpbmx460CY8g9ccdmOjvfVF4RPPsawpKuMZH271tDlLZl67iknxDVWBZSih9K6v0RAmsmNriR4OyOFOkGrULCIz3ISyPWeItp1AVuue_8guWR63KzYg32aPC4SgmOrc2myq9N6XNU2H1KybETbG_s5-VU_cUqaXn7GUzhL2_W6CSVrrlE1cYfjC7pxMKFm4vvIw_KcNYVGO1K6oYgzRZ4A8toQHIdlGB8L-wkCt442LdC93OjoQdkLuGzmXnO8BUohWea-Dn35gGHoH-H1BRQTya_H9AKyWMxCw-vg';
   var copyToClipboard = (0, _useCopyToClipboard["default"])(textToCopy);
@@ -41,5 +32,4 @@ var Default = function Default() {
     "aria-label": "Copy Text To Clipboard"
   }, "Copy To Clipboard"));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -1,55 +1,34 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _countriesList = require("countries-list");
-
 var _Box = _interopRequireDefault(require("../components/Box"));
-
 var _ComboBoxField = _interopRequireDefault(require("../components/ComboBoxField"));
-
 var _Input = _interopRequireDefault(require("../components/Input"));
-
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = {
   title: 'Recipes/Country Picker'
 };
 exports["default"] = _default;
-
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
   return reg.test(str);
 };
-
 var sx = {
   wrapperBox: {
     width: '100%',
@@ -71,72 +50,57 @@ var sx = {
     ml: '110px'
   }
 };
-
 var Default = function Default() {
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      searchValue = _useState4[0],
-      setSearchValue = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      phoneCodeValue = _useState6[0],
-      setPhoneCodeValue = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    phoneCodeValue = _useState6[0],
+    setPhoneCodeValue = _useState6[1];
   var _useState7 = (0, _react.useState)(null),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selectedKey = _useState8[0],
-      setSelectedKey = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    selectedKey = _useState8[0],
+    setSelectedKey = _useState8[1];
   var _useState9 = (0, _react.useState)(''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      phoneNumber = _useState10[0],
-      setPhoneNumber = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    phoneNumber = _useState10[0],
+    setPhoneNumber = _useState10[1];
   var getInputValue = function getInputValue() {
     if (isOpen) return searchValue;
     return phoneCodeValue || searchValue;
   };
-
   var inputHandler = function inputHandler(value) {
     setSearchValue(value);
-
     if (!value) {
       setSelectedKey(null);
       setPhoneCodeValue('');
     }
   };
-
   var selectionHandler = function selectionHandler(key) {
     setSelectedKey(key);
-
     if (key) {
       setPhoneCodeValue("+".concat(_countriesList.countries[key].phone.split(',')[0]));
     } else {
       setSearchValue('');
       setPhoneCodeValue('');
     }
-
     setIsOpen(false);
   };
-
   var keyHandler = function keyHandler(e) {
     if (e.keyCode !== 13) setIsOpen(true);
   };
-
   var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
     var value = e.target.value;
-
     if (value === '' || validatePhoneNumber(value)) {
       setPhoneNumber(value);
     }
   };
-
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
     sx: sx.wrapperBox
@@ -160,7 +124,6 @@ var Default = function Default() {
     menuTrigger: "focus"
   }, function (item) {
     var _context, _context2;
-
     return (0, _react2.jsx)(_index.Item, {
       key: item[0]
     }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
@@ -172,5 +135,4 @@ var Default = function Default() {
     value: phoneNumber
   })));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/DatePicker.stories.js

@@ -1,49 +1,27 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactCalendar = _interopRequireDefault(require("react-calendar"));
-
-require("react-calendar/dist/Calendar.css");
-
 var _CalendarIcon = _interopRequireDefault(require("mdi-react/CalendarIcon"));
-
 var _moment = _interopRequireDefault(require("moment"));
-
+var _Text = require("../components/Text/Text.styles");
 var _index = require("../index");
-
 var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
-
-var _PopoverContainer = _interopRequireDefault(require("../components/PopoverContainer"));
-
-var _Text = require("../components/Text/Text.styles");
-
+require("react-calendar/dist/Calendar.css");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = {
   title: 'Recipes/Date Picker',
   parameters: {
@@ -108,47 +86,37 @@ var sx = {
     }
   }
 };
-
 var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
-
   var _useState = (0, _react.useState)((0, _moment["default"])('2021-01-01', 'YYYY-MM-DD')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
   var _useState3 = (0, _react.useState)(date.format(dateFormat)),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      error = _useState6[0],
-      setError = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
   var triggerRef = _react["default"].useRef();
-
   var overlayRef = _react["default"].useRef();
-
   var popoverState = (0, _index.useOverlayTriggerState)({});
-
   var _useOverlayTrigger = (0, _index.useOverlayTrigger)({
-    type: 'dialog'
-  }, popoverState, triggerRef),
-      triggerProps = _useOverlayTrigger.triggerProps,
-      overlayProps = _useOverlayTrigger.overlayProps;
-
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
   var _useOverlayPosition = (0, _index.useOverlayPosition)({
-    targetRef: triggerRef,
-    overlayRef: overlayRef,
-    offset: 15,
-    isOpen: popoverState.isOpen,
-    onClose: popoverState.close,
-    shouldUpdatePosition: true
-  }),
-      positionProps = _useOverlayPosition.overlayProps;
-
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      offset: 15,
+      isOpen: popoverState.isOpen,
+      onClose: popoverState.close,
+      shouldUpdatePosition: true
+    }),
+    positionProps = _useOverlayPosition.overlayProps;
   var handleCalendarIconPress = (0, _react.useCallback)(function () {
     return popoverState.open();
   }, []);
@@ -159,7 +127,6 @@ var Default = function Default() {
   var handleOnBlur = (0, _react.useCallback)(function (_ref2) {
     var value = _ref2.target.value;
     var dateFromInput = (0, _moment["default"])(value);
-
     if (dateFromInput.isValid()) {
       setDate(dateFromInput);
       setInputValue(dateFromInput.format(dateFormat));
@@ -193,7 +160,7 @@ var Default = function Default() {
     status: error ? _statuses["default"].ERROR : _statuses["default"].DEFAULT,
     value: inputValue,
     "aria-label": "data-picker-input"
-  }), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({}, overlayProps, positionProps, {
+  }), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
@@ -206,5 +173,4 @@ var Default = function Default() {
     value: date.toDate()
   }))));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/DraggableBox.stories.js

@@ -1,34 +1,22 @@
 "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", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
-
 var _FormTextboxIcon = _interopRequireDefault(require("mdi-react/FormTextboxIcon"));
-
 var _Box = _interopRequireDefault(require("../components/Box"));
-
 var _Icon = _interopRequireDefault(require("../components/Icon"));
-
 var _Text = _interopRequireDefault(require("../components/Text"));
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Recipes/Draggable Box'
 };
 exports["default"] = _default;
-
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
@@ -54,5 +42,4 @@ var Default = function Default() {
     ml: "md"
   }, "Text Input"));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/EditableInput.stories.js

@@ -1,55 +1,31 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
-
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Recipes/Editable Input'
 };
@@ -112,7 +88,6 @@ var sx = {
     height: '20px'
   }
 };
-
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
     value: "Some value..."
@@ -122,28 +97,24 @@ var Default = function Default() {
     controlProps: controlProps
   }));
 };
+
 /**
  * Editable
  * Wrapper component that provides context value for all editable components
  */
-
-
 exports.Default = Default;
-
 var Editable = function Editable(props) {
   var value = props.value,
-      isEditing = props.isEditing;
+    isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
     prevValue: '',
     value: value || ''
   };
-
   var _useState = (0, _react.useState)(editableContextValue),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      editableContext = _useState2[0],
-      setEditableContext = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    editableContext = _useState2[0],
+    setEditableContext = _useState2[1];
   return (0, _react2.jsx)(_index.Box, {
     sx: {
       position: 'relative'
@@ -152,23 +123,21 @@ var Editable = function Editable(props) {
     value: [editableContext, setEditableContext]
   }, props.children));
 };
+
 /**
  * Editable preview
  * Read-only view of the component
  */
 
-
 var EditablePreview = function EditablePreview() {
   var _useContext = (0, _react.useContext)(EditableAreaContext),
-      _useContext2 = (0, _slicedToArray2["default"])(_useContext, 2),
-      editableContext = _useContext2[0],
-      setEditableContext = _useContext2[1];
-
+    _useContext2 = (0, _slicedToArray2["default"])(_useContext, 2),
+    editableContext = _useContext2[0],
+    setEditableContext = _useContext2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      hasFocus = _useState4[0],
-      setFocus = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    hasFocus = _useState4[0],
+    setFocus = _useState4[1];
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -181,13 +150,11 @@ var EditablePreview = function EditablePreview() {
       setFocus(false);
     }
   }, [hasFocus, editableContext.isEditing]);
-
   var handleClick = function handleClick() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       isEditing: true
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -195,7 +162,6 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
@@ -214,32 +180,28 @@ var EditablePreview = function EditablePreview() {
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
+
 /**
  * Editable input
  * Swappable with TextField and TextAreaField component
  * Input view of the component
  */
 
-
 var EditableInput = function EditableInput(props) {
   var ariaLabel = props.inputProps.ariaLabel;
   var editableInput = (0, _react.useRef)(null);
-
   var _useContext3 = (0, _react.useContext)(EditableAreaContext),
-      _useContext4 = (0, _slicedToArray2["default"])(_useContext3, 2),
-      editableContext = _useContext4[0],
-      setEditableContext = _useContext4[1];
-
+    _useContext4 = (0, _slicedToArray2["default"])(_useContext3, 2),
+    editableContext = _useContext4[0],
+    setEditableContext = _useContext4[1];
   var _useState5 = (0, _react.useState)(editableContext.value || ''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      prevValue = _useState6[0],
-      setPrevValue = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    prevValue = _useState6[0],
+    setPrevValue = _useState6[1];
   var _useState7 = (0, _react.useState)(editableContext.value || ''),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      editingValue = _useState8[0],
-      setEditingValue = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    editingValue = _useState8[0],
+    setEditingValue = _useState8[1];
   (0, _react.useEffect)(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -248,14 +210,12 @@ var EditableInput = function EditableInput(props) {
       editableInput.current.focus();
     }
   }, [editableContext.isEditing]);
-
   var handleChange = function handleChange(e) {
     setEditingValue(e.target.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       value: e.target.value
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Escape') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -267,7 +227,6 @@ var EditableInput = function EditableInput(props) {
       if (e.shiftKey) {
         return;
       }
-
       setPrevValue(editableContext.value);
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
         prevValue: editableContext.value,
@@ -276,7 +235,6 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
@@ -295,28 +253,25 @@ var EditableInput = function EditableInput(props) {
     isUnresizable: true
   }));
 };
+
 /**
  * Editable controls
  * Use css to position buttons
  * Extend with more button controls as needed
  */
 
-
 var EditableControl = function EditableControl(props) {
   var confirmBtn = props.controlProps.confirmBtn,
-      cancelBtn = props.controlProps.cancelBtn,
-      onPress = props.onPress;
-
+    cancelBtn = props.controlProps.cancelBtn,
+    onPress = props.onPress;
   var _useContext5 = (0, _react.useContext)(EditableAreaContext),
-      _useContext6 = (0, _slicedToArray2["default"])(_useContext5, 2),
-      editableContext = _useContext6[0],
-      setEditableContext = _useContext6[1];
-
+    _useContext6 = (0, _slicedToArray2["default"])(_useContext5, 2),
+    editableContext = _useContext6[0],
+    setEditableContext = _useContext6[1];
   var _useState9 = (0, _react.useState)(editableContext.value || ''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      prevValue = _useState10[0],
-      setPrevValue = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    prevValue = _useState10[0],
+    setPrevValue = _useState10[1];
   var handleCancel = function handleCancel() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       prevValue: prevValue,
@@ -324,7 +279,6 @@ var EditableControl = function EditableControl(props) {
       isEditing: false
     }));
   };
-
   var handleSubmit = function handleSubmit() {
     setPrevValue(editableContext.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -332,12 +286,10 @@ var EditableControl = function EditableControl(props) {
       value: editableContext.value,
       isEditing: false
     }));
-
     if (onPress) {
       onPress();
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,