@pingux/astro 1.2.1 → 1.3.2-alpha.0

package/lib/cjs/layouts/ListLayout.stories.js

@@ -1,895 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.Default = exports["default"] = void 0;
-
-var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
-
-var _AddIcon = _interopRequireDefault(require("mdi-react/AddIcon"));
-
-var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
-
-var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
-
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
-var _index = require("../index");
-
-var _react2 = require("@emotion/react");
-
-var _default = {
-  title: 'Layouts/ListLayout'
-};
-exports["default"] = _default;
-
-var Person = function Person(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "#000000"
-  }, props), (0, _react2.jsx)("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), (0, _react2.jsx)("path", {
-    d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-  }));
-};
-
-var DotsVerticalIcon = function DotsVerticalIcon(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    viewBox: "0 0 24 24"
-  }, props), (0, _react2.jsx)("path", {
-    d: "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
-  }));
-};
-
-var ChevronRight = function ChevronRight(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    viewBox: "0 0 24 24"
-  }, props), (0, _react2.jsx)("path", {
-    d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-  }));
-};
-
-var Default = function Default() {
-  var _useState = (0, _react.useState)([{
-    title: 'First Item',
-    subtitle: 'First Item Subtitle',
-    id: '1'
-  }, {
-    title: 'Second Item',
-    subtitle: 'Second Item Subtitle',
-    id: '2'
-  }, {
-    title: 'Third Item',
-    subtitle: 'Third Item Subtitle',
-    id: '3'
-  }, {
-    title: 'Fourth Item',
-    subtitle: 'Fourth Item Subtitle',
-    id: '4'
-  }, {
-    title: 'Fifth Item',
-    subtitle: 'Fifth Item Subtitle',
-    id: '5'
-  }]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      editOverviewVisible = _useState4[0],
-      setEditOverviewVisible = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      editConfigurationVisible = _useState6[0],
-      setEditConfigurationVisible = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      addItemVisible = _useState8[0],
-      setAddItemVisible = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      staticVisible = _useState10[0],
-      setStaticVisible = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(null),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      selectedId = _useState12[0],
-      setSelectedId = _useState12[1];
-
-  var _useState13 = (0, _react.useState)('1'),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      activeTab = _useState14[0],
-      setActiveTab = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(1),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      activeStep = _useState16[0],
-      setActiveStep = _useState16[1];
-
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      isDeleting = _useState18[0],
-      setIsDeleting = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(null),
-      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-      interactingItem = _useState20[0],
-      setInteractingItem = _useState20[1];
-
-  var _useState21 = (0, _react.useState)(false),
-      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-      hasAdded = _useState22[0],
-      setHasAdded = _useState22[1];
-
-  var editOverview = function editOverview() {
-    setStaticVisible(false);
-    setEditOverviewVisible(true);
-  };
-
-  var editConfiguration = function editConfiguration() {
-    setStaticVisible(false);
-    setEditConfigurationVisible(true);
-  };
-
-  var viewItem = function viewItem() {
-    setStaticVisible(true);
-    setEditConfigurationVisible(false);
-    setEditOverviewVisible(false);
-  };
-
-  var openStaticListItem = function openStaticListItem(id) {
-    setSelectedId(id);
-    setStaticVisible(true);
-  };
-
-  var saveItem = function saveItem() {
-    var newItems = (0, _concat["default"])(items).call(items, {
-      title: 'New Item',
-      subtitle: 'New Item Subtitle',
-      id: '6'
-    });
-    setItems(newItems);
-    setSelectedId('6');
-    setStaticVisible(true);
-    setAddItemVisible(false);
-    setActiveStep(1);
-    setHasAdded(true);
-  };
-
-  var resetListItem = function resetListItem() {
-    setSelectedId(null);
-    setEditOverviewVisible(false);
-    setEditConfigurationVisible(false);
-    setStaticVisible(false);
-    setActiveTab('1');
-    setActiveStep(1);
-    setAddItemVisible(false);
-  };
-
-  var handleMenuChange = function handleMenuChange(menuItemKey, listItemKey) {
-    if (menuItemKey === 'view') {
-      openStaticListItem(listItemKey.id);
-    }
-
-    if (menuItemKey === 'delete') {
-      setIsDeleting(true);
-      setInteractingItem(listItemKey);
-    }
-  };
-
-  var deleteItem = function deleteItem() {
-    var newItems = (0, _filter["default"])(items).call(items, function (item) {
-      return item.id !== interactingItem.id;
-    });
-    setItems(newItems);
-    setIsDeleting(false);
-  };
-
-  var onMessageClose = function onMessageClose() {
-    setHasAdded(false);
-  };
-
-  var buttonBarStyles = {
-    bottom: '0',
-    position: 'absolute',
-    bg: 'white',
-    width: '100%',
-    height: '75px',
-    alignItems: 'center',
-    pb: 'lg',
-    pt: 'lg',
-    zIndex: 1
-  };
-  return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    bg: "accent.99",
-    p: "lg"
-  }, (0, _react2.jsx)(_index.Box, {
-    flexGrow: 1,
-    maxWidth: "100%"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mb: "md"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    mr: "sm"
-  }, "List Items"), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    title: "Add List Item",
-    onPress: function onPress() {
-      return setAddItemVisible(true);
-    },
-    variant: "inverted"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _AddIcon["default"]
-  }))), (0, _react2.jsx)(_index.Text, {
-    pb: "md",
-    variant: "itemSubtitle"
-  }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam", (0, _react2.jsx)("br", null), "eius modi tempora incidunt ut labore et doloremagnam aliquam quaerat voluptatem."), (0, _react2.jsx)(_index.SearchField, {
-    icon: _SearchIcon["default"],
-    "aria-label": "Search",
-    minWidth: "40%",
-    maxWidth: "400px",
-    mb: "md",
-    placeholder: "Search"
-  }), (0, _react2.jsx)(_index.List, null, (0, _map["default"])(items).call(items, function (item, i) {
-    return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.ListItem, {
-      flexGrow: 1,
-      bg: item.id === selectedId ? 'white ' : 'accent.99',
-      key: item.id
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      mr: "auto",
-      flexBasis: "0px",
-      flexGrow: "1",
-      onClick: function onClick() {
-        return openStaticListItem(item.id);
-      }
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: Person,
-      alignSelf: "center",
-      mr: "md",
-      color: "accent.40",
-      size: 25,
-      flexShrink: 0
-    }), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignItems: "center"
-    }, (0, _react2.jsx)(_index.Box, {
-      alignSelf: "center"
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "listTitle",
-      alignSelf: "center",
-      mr: "auto"
-    }, item.title), (0, _react2.jsx)(_index.Text, {
-      alignSelf: "center",
-      variant: "listSubtitle",
-      mr: "auto"
-    }, item.subtitle)), item.id === '6' ? (0, _react2.jsx)(_index.Box, {
-      ml: "sm"
-    }, (0, _react2.jsx)(_index.Chip, {
-      bg: "success.light",
-      textColor: "success.dark",
-      label: "New",
-      isUppercase: true
-    })) : null)), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignSelf: "center"
-    }, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "my-label"
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: DotsVerticalIcon,
-      size: 20
-    })), (0, _react2.jsx)(_index.Menu, {
-      selectionMode: "single",
-      onAction: function onAction(key) {
-        return handleMenuChange(key, item);
-      }
-    }, (0, _react2.jsx)(_index.Item, {
-      key: "view"
-    }, (0, _react2.jsx)(_index.Box, null, "View")), (0, _react2.jsx)(_index.Item, {
-      key: "rename"
-    }, (0, _react2.jsx)(_index.Box, null, "Rename")), (0, _react2.jsx)(_index.Item, {
-      key: "delete",
-      textValue: "Delete"
-    }, (0, _react2.jsx)(_index.Text, {
-      color: "critical.bright"
-    }, "Delete"))))))), i !== items.length - 1 ? (0, _react2.jsx)(_index.Separator, {
-      margin: "0"
-    }) : null);
-  }))), staticVisible && (0, _react2.jsx)(_index.OverlayPanel, {
-    p: "0",
-    isOpen: staticVisible
-  }, (0, _react2.jsx)(_index.Box, {
-    height: "60px",
-    bg: "accent.99"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    flexBasis: "0px",
-    flexGrow: "1",
-    alignItems: "center",
-    pl: "md",
-    pr: "md",
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: Person,
-    alignSelf: "center",
-    mr: "md",
-    color: "accent.40",
-    size: 25,
-    flexShrink: 0
-  }), (0, _react2.jsx)(_index.Box, {
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "listTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, selectedId ? (0, _find["default"])(items).call(items, function (i) {
-    return i.id === selectedId;
-  }).title : null), (0, _react2.jsx)(_index.Text, {
-    alignSelf: "center",
-    variant: "listSubtitle",
-    mr: "auto"
-  }, selectedId ? (0, _find["default"])(items).call(items, function (i) {
-    return i.id === selectedId;
-  }).subtitle : null))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "kebab",
-    flexShrink: 0
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: DotsVerticalIcon,
-    size: 20
-  })), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    onClick: function onClick() {
-      return resetListItem();
-    },
-    flexShrink: 0
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"]
-  }))))), (0, _react2.jsx)(_index.Box, {
-    pr: "lg",
-    pl: "lg"
-  }, (0, _react2.jsx)(_index.Tabs, {
-    tabListProps: {
-      justifyContent: 'center'
-    },
-    selectedKey: activeTab,
-    onSelectionChange: setActiveTab
-  }, (0, _react2.jsx)(_index.Tab, {
-    key: "1",
-    title: "Overview"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.Text, null, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam", (0, _react2.jsx)("br", null), " eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    onClick: editOverview,
-    variant: "inverted",
-    size: "20px",
-    ml: "sm"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PencilIcon["default"]
-  })))), (0, _react2.jsx)(_index.Tab, {
-    key: "2",
-    title: "Configuration"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      overflowY: 'auto'
-    }
-  }, (0, _react2.jsx)(_index.Box, {
-    mb: "lg"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: {
-      fontWeight: '700',
-      fontSize: '13px'
-    },
-    pb: "xs"
-  }, "Configuration Type"), (0, _react2.jsx)(_index.Text, {
-    variant: "base"
-  }, "Regular Configuration")), (0, _react2.jsx)(_index.Box, {
-    mb: "lg"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: {
-      fontWeight: '700',
-      fontSize: '13px'
-    },
-    pb: "xs"
-  }, "URLs"), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    pb: "xs",
-    alignItems: "center"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "base"
-  }, "https://domain.com:9999"), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    ml: 5
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _ContentCopyIcon["default"],
-    size: "15px"
-  })))), (0, _react2.jsx)(_index.Box, {
-    mb: "lg"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: {
-      fontWeight: '700',
-      fontSize: '13px'
-    },
-    pb: "xs"
-  }, "Super Mode"), (0, _react2.jsx)(_index.Text, {
-    variant: "base"
-  }, "Enabled")), (0, _react2.jsx)(_index.Box, {
-    mb: "lg"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: {
-      fontWeight: '700',
-      fontSize: '13px'
-    },
-    pb: "xs"
-  }, "Username"), (0, _react2.jsx)(_index.Text, {
-    variant: "base"
-  }, "somebody"))), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    onClick: editConfiguration,
-    variant: "inverted",
-    size: "20px"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PencilIcon["default"]
-  }))))))), editOverviewVisible && (0, _react2.jsx)(_index.OverlayPanel, {
-    p: "0",
-    isOpen: editOverviewVisible
-  }, (0, _react2.jsx)(_index.Box, {
-    height: "60px",
-    bg: "accent.99",
-    pl: "lg",
-    pr: "lg"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    flexBasis: "0px",
-    flexGrow: "1",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: Person,
-    alignSelf: "center",
-    mr: "md",
-    color: "accent.40",
-    size: 25,
-    flexShrink: 0
-  }), (0, _react2.jsx)(_index.Text, {
-    variant: "sectionTitle",
-    alignSelf: "center",
-    color: "active",
-    mr: "xs"
-  }, selectedId ? (0, _find["default"])(items).call(items, function (i) {
-    return i.id === selectedId;
-  }).title : null), (0, _react2.jsx)(_index.Icon, {
-    icon: ChevronRight,
-    alignSelf: "center",
-    mr: "xs",
-    color: "accent.40",
-    size: 22,
-    flexShrink: 0
-  }), (0, _react2.jsx)(_index.Box, {
-    alignSelf: "center",
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "sectionTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Edit Overview"))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    onClick: function onClick() {
-      return resetListItem();
-    },
-    flexShrink: 0
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"]
-  }))))), (0, _react2.jsx)(_index.Box, {
-    height: "100%",
-    pl: "lg",
-    pr: "lg"
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      overflowY: 'auto'
-    }
-  }, (0, _react2.jsx)(_index.Box, {
-    pt: "lg",
-    pb: "lg"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "Name",
-    labelMode: "float",
-    width: "85%",
-    value: selectedId ? (0, _find["default"])(items).call(items, function (i) {
-      return i.id === selectedId;
-    }).title : null,
-    "aria-label": "Name Field"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "lg"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "Subtitle",
-    labelMode: "float",
-    width: "85%",
-    value: selectedId ? (0, _find["default"])(items).call(items, function (i) {
-      return i.id === selectedId;
-    }).subtitle : null,
-    "aria-label": "Subtitle Field"
-  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.TextAreaField, {
-    label: "Subtitle",
-    labelMode: "float",
-    width: "85%",
-    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
-    "aria-label": "Subtitle Field"
-  })))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: buttonBarStyles,
-    pl: "lg"
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "primary",
-    onPress: viewItem,
-    mr: "md",
-    "aria-label": "Save Button"
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: viewItem,
-    "aria-label": "Cancel Button"
-  }, "Cancel"))), editConfigurationVisible && (0, _react2.jsx)(_index.OverlayPanel, {
-    p: "0",
-    isOpen: editConfiguration
-  }, (0, _react2.jsx)(_index.Box, {
-    height: "60px",
-    bg: "accent.99"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    flexBasis: "0px",
-    flexGrow: "1",
-    alignItems: "center",
-    pl: "md",
-    pr: "md",
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: Person,
-    alignSelf: "center",
-    mr: "md",
-    color: "accent.40",
-    size: 25,
-    flexShrink: 0
-  }), (0, _react2.jsx)(_index.Text, {
-    variant: "sectionTitle",
-    alignSelf: "center",
-    color: "active",
-    mr: "xs"
-  }, selectedId ? (0, _find["default"])(items).call(items, function (i) {
-    return i.id === selectedId;
-  }).title : null), (0, _react2.jsx)(_index.Icon, {
-    icon: ChevronRight,
-    alignSelf: "center",
-    mr: "xs",
-    color: "accent.40",
-    size: 22,
-    flexShrink: 0
-  }), (0, _react2.jsx)(_index.Box, {
-    alignSelf: "center",
-    justifyContent: "center"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "sectionTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Edit Configuration"))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    onClick: function onClick() {
-      return resetListItem();
-    },
-    flexShrink: 0
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"]
-  }))))), (0, _react2.jsx)(_index.Box, {
-    height: "100%",
-    sx: {
-      overflowY: 'auto'
-    }
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    pt: "lg",
-    pb: "lg",
-    pl: "md"
-  }, (0, _react2.jsx)(_index.SelectField, {
-    labelMode: "float",
-    label: "Configuration Type",
-    minWidth: "40%",
-    maxWidth: "400px",
-    "aria-label": "Configuration Type Input"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "1"
-  }, "Regular Configuration"), (0, _react2.jsx)(_index.Item, {
-    key: "2"
-  }, "Placeholder Configuration 1"), (0, _react2.jsx)(_index.Item, {
-    key: "3"
-  }, "Placeholder Configuration 2"))), (0, _react2.jsx)(_index.Box, {
-    pb: "lg",
-    pl: "md"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "URL",
-    labelMode: "float",
-    minWidth: "35%",
-    maxWidth: "400px",
-    "aria-label": "URL Input"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "sm",
-    pl: "md"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "URL",
-    labelMode: "float",
-    minWidth: "35%",
-    maxWidth: "400px",
-    "aria-label": "URL Input"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "lg",
-    pl: "md"
-  }, (0, _react2.jsx)(_index.CheckboxField, {
-    label: "Super Mode",
-    "aria-label": "Super Mode Input"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "lg",
-    pl: "md"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "Username",
-    labelMode: "float",
-    minWidth: "35%",
-    maxWidth: "400px",
-    "aria-label": "Username Input"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "lg",
-    pl: "md"
-  }, (0, _react2.jsx)(_index.TextField, {
-    labelMode: "float",
-    label: "Password",
-    minWidth: "35%",
-    maxWidth: "400px",
-    "aria-label": "Password Input"
-  })))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    pl: "lg",
-    sx: buttonBarStyles
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "primary",
-    onPress: viewItem,
-    mr: "md",
-    "aria-label": "Save Button"
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: viewItem,
-    "aria-label": "Cancel Button"
-  }, "Cancel"))), addItemVisible && (0, _react2.jsx)(_index.OverlayPanel, {
-    p: "0",
-    isOpen: addItemVisible
-  }, (0, _react2.jsx)(_index.Box, {
-    height: "60px",
-    bg: "accent.99"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    lexBasis: "0px",
-    flexGrow: "1",
-    alignItems: "center",
-    pl: "md",
-    pr: "md",
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: Person,
-    alignSelf: "center",
-    mr: "md",
-    color: "accent.40",
-    size: 25,
-    flexShrink: 0
-  }), (0, _react2.jsx)(_index.Box, {
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.Text, {
-    alignSelf: "center",
-    variant: "itemTitle",
-    mr: "auto"
-  }, "Add Item"))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "my-label",
-    onClick: function onClick() {
-      return resetListItem();
-    },
-    flexShrink: 0
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"]
-  }))))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    p: "lg"
-  }, (0, _react2.jsx)(_index.Stepper, {
-    activeStep: activeStep,
-    onStepChange: setActiveStep
-  }, (0, _react2.jsx)(_index.Step, {
-    key: "1",
-    textValue: "Step 1"
-  }, (0, _react2.jsx)(_index.Text, {
-    alignSelf: "center",
-    variant: "sectionTitle",
-    mr: "auto",
-    mt: "lg"
-  }, "Name & Description"), (0, _react2.jsx)(_index.Box, {
-    pt: "lg",
-    pb: "lg"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "Name",
-    labelMode: "float",
-    minWidth: "40%",
-    maxWidth: "400px",
-    "aria-label": "Name Input",
-    key: "name-input"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "lg"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "Subtitle",
-    labelMode: "float",
-    minWidth: "40%",
-    maxWidth: "400px",
-    "aria-label": "Subtitle Input",
-    key: "subtitle-input"
-  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.TextAreaField, {
-    label: "Description",
-    labelMode: "float",
-    minWidth: "40%",
-    maxWidth: "400px",
-    rows: 5,
-    "aria-label": "Name Input",
-    key: "description-input"
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: buttonBarStyles
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: resetListItem,
-    mr: "md",
-    "aria-label": "Cancel Button"
-  }, "Cancel"), (0, _react2.jsx)(_index.Button, {
-    variant: "primary",
-    onPress: function onPress() {
-      return setActiveStep(2);
-    },
-    "aria-label": "Next Button"
-  }, "Next"))), (0, _react2.jsx)(_index.Step, {
-    key: "2",
-    textValue: "Step 2"
-  }, (0, _react2.jsx)(_index.Text, {
-    alignSelf: "center",
-    variant: "sectionTitle",
-    mr: "auto",
-    mt: "lg",
-    mb: "lg"
-  }, "Name & Description"), (0, _react2.jsx)(_index.Box, {
-    pb: "lg"
-  }, (0, _react2.jsx)(_index.SelectField, {
-    selectedKey: "1",
-    labelMode: "float",
-    label: "Configuration Type",
-    minWidth: "40%",
-    maxWidth: "400px",
-    key: "configuration-type"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "1"
-  }, "Regular Configuration"), (0, _react2.jsx)(_index.Item, {
-    key: "2"
-  }, "Placeholder 1"), (0, _react2.jsx)(_index.Item, {
-    key: "3"
-  }, "Placeholder 2"))), (0, _react2.jsx)(_index.Box, {
-    pb: "sm"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "URL",
-    labelMode: "float",
-    minWidth: "40%",
-    maxWidth: "400px",
-    value: "https://domain.com:9999",
-    key: "url-input-1"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "sm"
-  }, (0, _react2.jsx)(_index.TextField, {
-    label: "URL",
-    labelMode: "float",
-    minWidth: "40%",
-    maxWidth: "400px",
-    value: "https://somewhere.else.com:9090",
-    key: "url-input-2"
-  })), (0, _react2.jsx)(_index.Box, {
-    pb: "lg"
-  }, (0, _react2.jsx)(_index.CheckboxField, {
-    label: "Super Mode",
-    isSelected: true
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: buttonBarStyles
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: resetListItem,
-    mr: "md"
-  }, "Cancel"), (0, _react2.jsx)(_index.Button, {
-    variant: "primary",
-    onPress: saveItem
-  }, "Save"))))))), isDeleting && (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, {
-    title: "Delete Item",
-    isOpen: isDeleting,
-    isDismissable: true,
-    hasCloseButton: true,
-    onClose: function onClose() {
-      return setIsDeleting(false);
-    }
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    pt: "lg"
-  }, "Are you sure you want to delete this item?"), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    pt: "lg",
-    mr: "auto"
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "critical",
-    mr: "md",
-    onPress: deleteItem
-  }, "Delete"), (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: function onPress() {
-      return setIsDeleting(false);
-    }
-  }, "Cancel")))), (0, _react2.jsx)(_index.Messages, {
-    onClose: onMessageClose,
-    style: {
-      zIndex: 9999
-    }
-  }, hasAdded && (0, _react2.jsx)(_index.Item, {
-    key: "message2",
-    status: "success"
-  }, "A new item has been successfully added.")));
-};
-
-exports.Default = Default;