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

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

@@ -0,0 +1,895 @@
+"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: "text",
+    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: "text",
+    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: "text",
+    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: "text",
+    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: "danger",
+    mr: "md",
+    onPress: deleteItem
+  }, "Delete"), (0, _react2.jsx)(_index.Button, {
+    variant: "text",
+    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;