@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/CHANGELOG.md

@@ -3,30 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.42.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.1...@pingux/astro@1.42.2) (2023-02-22)
-
-
-### Bug Fixes
-
-* [UIP-5862]: ListView: incorrect hover state ([c8104a3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c8104a34a3bdf4b8d4b92eaeb24af2876cd07d0a))
-* [UIP-6017] Astro CopyView, CopyText, and Icon design updates ([69fa4af](https://gitlab.corp.pingidentity.com/ux/pingux/commit/69fa4afd09029721548fbb6d58435df2678626af))
-* [UIP-6118] Astro ColorField fix closure ([d8864ed](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d8864ed90d0494ec0f98bec854ea3218bf71c0e1))
-
-
-
-
-
-## [1.42.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.0...@pingux/astro@1.42.1) (2023-02-16)
-
-
-### Bug Fixes
-
-* [UIP-6013] List and Panel Recipe Style Fixes ([c9d69b9](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c9d69b9014889263e0ea16305128737ee59c9a1f))
-
-
-
-
-
 # [1.42.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.41.0...@pingux/astro@1.42.0) (2023-02-13)
 
 

package/README.md

@@ -14,7 +14,7 @@ Yarn:
 
 ## Requirements
 
-- Node: 12+
+- Node: 16+
 - React: 16.8+
 
 ## Usage
@@ -33,7 +33,7 @@ import { AstroWrapper } from ‘@pingux/astro’;
 
 Astro uses [Storybook](https://storybook.js.org/) for component documentation. Once Astro has been cloned, run the following commands to start a local Storybook server:
 
-`yarn && yarn start`
+`yarn start`
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
 
@@ -41,6 +41,8 @@ Component prop documentation is available under the “documentation” tab per
 
 For example, to view the disabled button styling, navigate to the Button story’s props table, locate the “isDisabled” prop, and toggle to “true”. This change allows you to preview the disabled button’s styling and functionality.
 
+## Yarn
+We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.
 
 ## Browser Compatibility
 
@@ -64,6 +66,27 @@ Astro’s [changelog](CHANGELOG.md) notes all features and bug fixes within each
 
 Astro is closed for open contributions. However, we are appreciative of bug reports and suggestions. Please use GitHub Issues to submit bug reports and suggestions.
 
+## VS Code Linting
+The Astro development team prefers to use VS Code as a code editor. To enable code highlighting and autolinting on save you will need to install the ESLint, Prettier and ZipFS plugins, plus add the 
+following settings in your `settings.json` file. 
+
+```
+{
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+  },
+  "eslint.validate": [
+      "javascript",
+  ],
+}
+```
+
+You will need to have the monorepo open at the root directory in VS Code for linting and highlighting to work.
+
+Note: To make linting and highlighting work with Yarn 2, `yarn dlx @yarnpkg/sdks vscode` needs to be run in the root directory of the monorepo. If any changes are made to any 
+ESLint packages or versions these features may stop working. Run this command again to solve the issue. Be sure to commit the changes so others don't run into the same issue. 
+
 ## Licensing
 
 This project is licensed under the Apache license. See the [LICENSE](LICENSE) file for more information.

package/lib/Patterns/AttributeMappingDisplayViewPattern.stories.hidden.js

@@ -1,6 +1,6 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import { Box, Chip, Separator, Text, TextField } from '../index';
+import { Badge, Box, Separator, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Design Patterns/Attribute Mapping Display View'
@@ -8,23 +8,23 @@ export default {
 var fieldValues = [{
   field1: 'username',
   field2: 'UserID',
-  hasChip: true,
+  hasBadge: true,
   chipLabel: 'Required',
   key: 1
 }, {
   field1: 'firstName',
   field2: 'Given Name',
-  hasChip: false,
+  hasBadge: false,
   key: 2
 }, {
   field1: 'lastName',
   field2: 'Family Name',
-  hasChip: false,
+  hasBadge: false,
   key: 3
 }, {
   field1: 'population',
   field2: 'Population',
-  hasChip: false,
+  hasBadge: false,
   key: 4
 }];
 var sx = {
@@ -87,7 +87,7 @@ var sx = {
   }
 };
 export var Default = function Default() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, {
     sx: sx.mainContentBox
   }, ___EmotionJSX(Box, {
     items: fieldValues,
@@ -104,9 +104,9 @@ export var Default = function Default() {
     sx: sx.separatorStyle
   })), _mapInstanceProperty(fieldValues).call(fieldValues, function (_ref) {
     var field1 = _ref.field1,
-        field2 = _ref.field2,
-        hasChip = _ref.hasChip,
-        key = _ref.key;
+      field2 = _ref.field2,
+      hasBadge = _ref.hasBadge,
+      key = _ref.key;
     return ___EmotionJSX(Box, {
       isRow: true,
       key: key,
@@ -129,10 +129,10 @@ export var Default = function Default() {
         variant: 'input.small',
         sx: sx.textFieldStyleProps
       }
-    }), hasChip && ___EmotionJSX(Chip, {
+    }), hasBadge && ___EmotionJSX(Badge, {
       label: "Required",
       textColor: "#253746",
       sx: sx.chipStyle
     }));
-  }))));
+  })));
 };

package/lib/Patterns/AttributeMappingEditViewPattern.stories.hidden.js

@@ -85,7 +85,7 @@ var sx = {
   }
 };
 export var Default = function Default() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, {
     sx: sx.mainBox
   }, ___EmotionJSX(Box, {
     isRow: true
@@ -102,8 +102,8 @@ export var Default = function Default() {
     sx: sx.editFieldsBox
   }, _mapInstanceProperty(editFieldValues).call(editFieldValues, function (_ref) {
     var field1 = _ref.field1,
-        field2 = _ref.field2,
-        key = _ref.key;
+      field2 = _ref.field2,
+      key = _ref.key;
     return ___EmotionJSX(Box, {
       isRow: true,
       key: key,
@@ -141,5 +141,5 @@ export var Default = function Default() {
       icon: DeleteIcon,
       size: 24
     }))));
-  }))));
+  })));
 };

package/lib/Patterns/ListAndPanelPattern.stories.hidden.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import Close from 'mdi-react/CloseIcon';
 import CreateIcon from 'mdi-react/CreateIcon';
 import DotsVertical from 'mdi-react/DotsVerticalIcon';
 import { useOverlayPanelState } from '../hooks';
+import { Avatar, Box, Icon, IconButton, ListItem, OverlayPanel, OverlayProvider, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { pingImg } from '../utils/devUtils/constants/images';
-import { Avatar, Box, Icon, IconButton, ListItem, OverlayProvider, OverlayPanel, Separator, SearchField, SwitchField, Tab, Tabs, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Design Patterns/List And Panel'
@@ -211,18 +211,15 @@ var sx = {
 };
 export var Default = function Default() {
   var _useState = useState(usersInfo),
-      _useState2 = _slicedToArray(_useState, 1),
-      items = _useState2[0];
-
+    _useState2 = _slicedToArray(_useState, 1),
+    items = _useState2[0];
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selected = _useState4[0],
-      setSelected = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
   var _useOverlayPanelState = useOverlayPanelState(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = useRef();
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
     sx: sx.mainBox

package/lib/Patterns/MessagesPattern.stories.hidden.js

@@ -29,20 +29,16 @@ export var Default = function Default() {
       p: 'xx'
     }
   };
-
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      messageState = _useState2[0],
-      setMessageState = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    messageState = _useState2[0],
+    setMessageState = _useState2[1];
   var handleUpdateMessage = function handleUpdateMessage(message) {
     setMessageState(message);
-
     _setTimeout(function () {
       return setMessageState(null);
     }, 3000);
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     isRow: true,
     gap: "lg",

package/lib/Patterns/SaveBarPattern.stories.hidden.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { DummyText } from '../utils/devUtils/constants/text';
 import { useOverlayPanelState } from '../hooks';
 import { Box, Button, OverlayPanel, OverlayProvider, ScrollBox, TextField } from '../index';
+import { DummyText } from '../utils/devUtils/constants/text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Design Patterns/Save Bar'
@@ -37,11 +37,10 @@ var sx = {
 };
 export var Default = function Default() {
   var _useOverlayPanelState = useOverlayPanelState(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = useRef();
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, {
     sx: sx.mainContentBox
   }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     ref: triggerRef,
@@ -76,5 +75,5 @@ export var Default = function Default() {
     onPress: function onPress() {
       onClose(state, triggerRef);
     }
-  }, "Cancel")))))));
+  }, "Cancel"))))));
 };

package/lib/Patterns/UnsavedChangesPattern.stories.hidden.js

@@ -2,49 +2,41 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import React, { useState } from 'react';
 import { useModalState } from '../hooks';
-import { Box, Button, Modal, OverlayProvider, Text, TextField, Link, Messages, Item } from '../index';
+import { Box, Button, Item, Link, Messages, Modal, OverlayProvider, Text, TextField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Design Patterns/Unsaved Changes'
 };
 export var Default = function Default() {
   var state = useModalState();
-
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isShowingNeutral = _useState4[0],
-      setIsShowingNeutral = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isShowingNeutral = _useState4[0],
+    setIsShowingNeutral = _useState4[1];
   var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isShowingSuccess = _useState6[0],
-      setIsShowingSuccess = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    isShowingSuccess = _useState6[0],
+    setIsShowingSuccess = _useState6[1];
   var closeModalAndClearInput = function closeModalAndClearInput() {
     setValue('');
     state.close();
     setIsShowingNeutral(true);
-
     _setTimeout(function () {
       return setIsShowingNeutral(false);
     }, 3000);
   };
-
   var closeModalAndShowSuccess = function closeModalAndShowSuccess() {
     setValue('');
     state.close();
     setIsShowingSuccess(true);
-
     _setTimeout(function () {
       return setIsShowingSuccess(null);
     }, 3000);
   };
-
   var sx = {
     mainContentBox: {
       p: 'xx'
@@ -65,7 +57,7 @@ export var Default = function Default() {
       fontWeight: '0'
     }
   };
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
     sx: sx.mainContentBox,
     gap: "lg"
   }, ___EmotionJSX(Box, {
@@ -102,5 +94,5 @@ export var Default = function Default() {
     onPress: state.close
   }, "Cancel"))), ___EmotionJSX(Messages, null, isShowingNeutral && ___EmotionJSX(Item, null, "Changes have been Discarded."), isShowingSuccess && ___EmotionJSX(Item, {
     status: "success"
-  }, "Form has been saved successfully."))));
+  }, "Form has been saved successfully.")));
 };

package/lib/cjs/Patterns/AttributeMappingDisplayViewPattern.stories.hidden.js

@@ -1,23 +1,15 @@
 "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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Design Patterns/Attribute Mapping Display View'
 };
@@ -25,23 +17,23 @@ exports["default"] = _default;
 var fieldValues = [{
   field1: 'username',
   field2: 'UserID',
-  hasChip: true,
+  hasBadge: true,
   chipLabel: 'Required',
   key: 1
 }, {
   field1: 'firstName',
   field2: 'Given Name',
-  hasChip: false,
+  hasBadge: false,
   key: 2
 }, {
   field1: 'lastName',
   field2: 'Family Name',
-  hasChip: false,
+  hasBadge: false,
   key: 3
 }, {
   field1: 'population',
   field2: 'Population',
-  hasChip: false,
+  hasBadge: false,
   key: 4
 }];
 var sx = {
@@ -103,9 +95,8 @@ var sx = {
     }
   }
 };
-
 var Default = function Default() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_index.Box, {
     sx: sx.mainContentBox
   }, (0, _react2.jsx)(_index.Box, {
     items: fieldValues,
@@ -122,9 +113,9 @@ var Default = function Default() {
     sx: sx.separatorStyle
   })), (0, _map["default"])(fieldValues).call(fieldValues, function (_ref) {
     var field1 = _ref.field1,
-        field2 = _ref.field2,
-        hasChip = _ref.hasChip,
-        key = _ref.key;
+      field2 = _ref.field2,
+      hasBadge = _ref.hasBadge,
+      key = _ref.key;
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       key: key,
@@ -147,12 +138,11 @@ var Default = function Default() {
         variant: 'input.small',
         sx: sx.textFieldStyleProps
       }
-    }), hasChip && (0, _react2.jsx)(_index.Chip, {
+    }), hasBadge && (0, _react2.jsx)(_index.Badge, {
       label: "Required",
       textColor: "#253746",
       sx: sx.chipStyle
     }));
-  }))));
+  })));
 };
-
 exports.Default = Default;

package/lib/cjs/Patterns/AttributeMappingEditViewPattern.stories.hidden.js

@@ -1,27 +1,17 @@
 "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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _CogsIcon = _interopRequireDefault(require("mdi-react/CogsIcon"));
-
 var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
-
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Design Patterns/Attribute Mapping Edit View'
 };
@@ -103,9 +93,8 @@ var sx = {
     mt: 'sm'
   }
 };
-
 var Default = function Default() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_index.Box, {
     sx: sx.mainBox
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -122,8 +111,8 @@ var Default = function Default() {
     sx: sx.editFieldsBox
   }, (0, _map["default"])(editFieldValues).call(editFieldValues, function (_ref) {
     var field1 = _ref.field1,
-        field2 = _ref.field2,
-        key = _ref.key;
+      field2 = _ref.field2,
+      key = _ref.key;
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       key: key,
@@ -161,7 +150,6 @@ var Default = function Default() {
       icon: _DeleteIcon["default"],
       size: 24
     }))));
-  }))));
+  })));
 };
-
 exports.Default = Default;

package/lib/cjs/Patterns/ListAndPanelPattern.stories.hidden.js

@@ -1,47 +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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
-
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
-
 var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
-
 var _hooks = require("../hooks");
-
-var _images = require("../utils/devUtils/constants/images");
-
 var _index = require("../index");
-
+var _images = require("../utils/devUtils/constants/images");
 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: 'Design Patterns/List And Panel'
 };
@@ -243,21 +223,17 @@ var sx = {
     lineHeight: '17.89px'
   }
 };
-
 var Default = function Default() {
   var _useState = (0, _react.useState)(usersInfo),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      items = _useState2[0];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+    items = _useState2[0];
   var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      selected = _useState4[0],
-      setSelected = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = (0, _react.useRef)();
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
     sx: sx.mainBox
@@ -414,5 +390,4 @@ var Default = function Default() {
     "aria-label": "Tab 3"
   }, (0, _react2.jsx)(_index.Text, null, "Placeholder content for account info tab"))))))));
 };
-
 exports.Default = Default;

package/lib/cjs/Patterns/MessagesPattern.stories.hidden.js

@@ -1,40 +1,25 @@
 "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 _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 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: 'Design Patterns/Messages'
 };
 exports["default"] = _default;
-
 var Default = function Default() {
   var messages = {
     neutral: {
@@ -58,19 +43,16 @@ var Default = function Default() {
       p: 'xx'
     }
   };
-
   var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      messageState = _useState2[0],
-      setMessageState = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    messageState = _useState2[0],
+    setMessageState = _useState2[1];
   var handleUpdateMessage = function handleUpdateMessage(message) {
     setMessageState(message);
     (0, _setTimeout2["default"])(function () {
       return setMessageState(null);
     }, 3000);
   };
-
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "lg",
@@ -95,5 +77,4 @@ var Default = function Default() {
     status: messageState.status
   }, messageState.text))));
 };
-
 exports.Default = Default;