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

package/lib/layouts/ListLayout.stories.js

@@ -0,0 +1,866 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import SearchIcon from 'mdi-react/SearchIcon';
+import AddIcon from 'mdi-react/AddIcon';
+import PencilIcon from 'mdi-react/PencilIcon';
+import ContentCopyIcon from 'mdi-react/ContentCopyIcon';
+import CloseIcon from 'mdi-react/CloseIcon';
+import { Box, Button, CheckboxField, Chip, Icon, IconButton, Item, List, ListItem, Menu, Messages, Modal, OverlayProvider, OverlayPanel, PopoverMenu, Separator, SelectField, SearchField, Stepper, Step, Tab, Tabs, Text, TextAreaField, TextField } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Layouts/ListLayout'
+};
+
+var Person = function Person(props) {
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "#000000"
+  }, props), ___EmotionJSX("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), ___EmotionJSX("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 ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24"
+  }, props), ___EmotionJSX("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 ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24"
+  }, props), ___EmotionJSX("path", {
+    d: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+  }));
+};
+
+export var Default = function Default() {
+  var _useState = 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 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      editOverviewVisible = _useState4[0],
+      setEditOverviewVisible = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      editConfigurationVisible = _useState6[0],
+      setEditConfigurationVisible = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      addItemVisible = _useState8[0],
+      setAddItemVisible = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      staticVisible = _useState10[0],
+      setStaticVisible = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selectedId = _useState12[0],
+      setSelectedId = _useState12[1];
+
+  var _useState13 = useState('1'),
+      _useState14 = _slicedToArray(_useState13, 2),
+      activeTab = _useState14[0],
+      setActiveTab = _useState14[1];
+
+  var _useState15 = useState(1),
+      _useState16 = _slicedToArray(_useState15, 2),
+      activeStep = _useState16[0],
+      setActiveStep = _useState16[1];
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isDeleting = _useState18[0],
+      setIsDeleting = _useState18[1];
+
+  var _useState19 = useState(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      interactingItem = _useState20[0],
+      setInteractingItem = _useState20[1];
+
+  var _useState21 = useState(false),
+      _useState22 = _slicedToArray(_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 = _concatInstanceProperty(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 = _filterInstanceProperty(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 ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "accent.99",
+    p: "lg"
+  }, ___EmotionJSX(Box, {
+    flexGrow: 1,
+    maxWidth: "100%"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mb: "md"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    mr: "sm"
+  }, "List Items"), ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    title: "Add List Item",
+    onPress: function onPress() {
+      return setAddItemVisible(true);
+    },
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: AddIcon
+  }))), ___EmotionJSX(Text, {
+    pb: "md",
+    variant: "itemSubtitle"
+  }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam", ___EmotionJSX("br", null), "eius modi tempora incidunt ut labore et doloremagnam aliquam quaerat voluptatem."), ___EmotionJSX(SearchField, {
+    icon: SearchIcon,
+    "aria-label": "Search",
+    minWidth: "40%",
+    maxWidth: "400px",
+    mb: "md",
+    placeholder: "Search"
+  }), ___EmotionJSX(List, null, _mapInstanceProperty(items).call(items, function (item, i) {
+    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListItem, {
+      flexGrow: 1,
+      bg: item.id === selectedId ? 'white ' : 'accent.99',
+      key: item.id
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      mr: "auto",
+      flexBasis: "0px",
+      flexGrow: "1",
+      onClick: function onClick() {
+        return openStaticListItem(item.id);
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: Person,
+      alignSelf: "center",
+      mr: "md",
+      color: "accent.40",
+      size: 25,
+      flexShrink: 0
+    }), ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center"
+    }, ___EmotionJSX(Box, {
+      alignSelf: "center"
+    }, ___EmotionJSX(Text, {
+      variant: "listTitle",
+      alignSelf: "center",
+      mr: "auto"
+    }, item.title), ___EmotionJSX(Text, {
+      alignSelf: "center",
+      variant: "listSubtitle",
+      mr: "auto"
+    }, item.subtitle)), item.id === '6' ? ___EmotionJSX(Box, {
+      ml: "sm"
+    }, ___EmotionJSX(Chip, {
+      bg: "success.light",
+      textColor: "success.dark",
+      label: "New",
+      isUppercase: true
+    })) : null)), ___EmotionJSX(Box, {
+      isRow: true,
+      alignSelf: "center"
+    }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+      "aria-label": "my-label"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: 20
+    })), ___EmotionJSX(Menu, {
+      selectionMode: "single",
+      onAction: function onAction(key) {
+        return handleMenuChange(key, item);
+      }
+    }, ___EmotionJSX(Item, {
+      key: "view"
+    }, ___EmotionJSX(Box, null, "View")), ___EmotionJSX(Item, {
+      key: "rename"
+    }, ___EmotionJSX(Box, null, "Rename")), ___EmotionJSX(Item, {
+      key: "delete",
+      textValue: "Delete"
+    }, ___EmotionJSX(Text, {
+      color: "critical.bright"
+    }, "Delete"))))))), i !== items.length - 1 ? ___EmotionJSX(Separator, {
+      margin: "0"
+    }) : null);
+  }))), staticVisible && ___EmotionJSX(OverlayPanel, {
+    p: "0",
+    isOpen: staticVisible
+  }, ___EmotionJSX(Box, {
+    height: "60px",
+    bg: "accent.99"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    flexBasis: "0px",
+    flexGrow: "1",
+    alignItems: "center",
+    pl: "md",
+    pr: "md",
+    justifyContent: "space-between"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: Person,
+    alignSelf: "center",
+    mr: "md",
+    color: "accent.40",
+    size: 25,
+    flexShrink: 0
+  }), ___EmotionJSX(Box, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "listTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, selectedId ? _findInstanceProperty(items).call(items, function (i) {
+    return i.id === selectedId;
+  }).title : null), ___EmotionJSX(Text, {
+    alignSelf: "center",
+    variant: "listSubtitle",
+    mr: "auto"
+  }, selectedId ? _findInstanceProperty(items).call(items, function (i) {
+    return i.id === selectedId;
+  }).subtitle : null))), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "kebab",
+    flexShrink: 0
+  }, ___EmotionJSX(Icon, {
+    icon: DotsVerticalIcon,
+    size: 20
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    onClick: function onClick() {
+      return resetListItem();
+    },
+    flexShrink: 0
+  }, ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  }))))), ___EmotionJSX(Box, {
+    pr: "lg",
+    pl: "lg"
+  }, ___EmotionJSX(Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    selectedKey: activeTab,
+    onSelectionChange: setActiveTab
+  }, ___EmotionJSX(Tab, {
+    key: "1",
+    title: "Overview"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, ___EmotionJSX(Text, null, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam", ___EmotionJSX("br", null), " eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    onClick: editOverview,
+    variant: "inverted",
+    size: "20px",
+    ml: "sm"
+  }, ___EmotionJSX(Icon, {
+    icon: PencilIcon
+  })))), ___EmotionJSX(Tab, {
+    key: "2",
+    title: "Configuration"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    justifyContent: "space-between"
+  }, ___EmotionJSX(Box, {
+    sx: {
+      overflowY: 'auto'
+    }
+  }, ___EmotionJSX(Box, {
+    mb: "lg"
+  }, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: {
+      fontWeight: '700',
+      fontSize: '13px'
+    },
+    pb: "xs"
+  }, "Configuration Type"), ___EmotionJSX(Text, {
+    variant: "base"
+  }, "Regular Configuration")), ___EmotionJSX(Box, {
+    mb: "lg"
+  }, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: {
+      fontWeight: '700',
+      fontSize: '13px'
+    },
+    pb: "xs"
+  }, "URLs"), ___EmotionJSX(Box, {
+    isRow: true,
+    pb: "xs",
+    alignItems: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "base"
+  }, "https://domain.com:9999"), ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    ml: 5
+  }, ___EmotionJSX(Icon, {
+    icon: ContentCopyIcon,
+    size: "15px"
+  })))), ___EmotionJSX(Box, {
+    mb: "lg"
+  }, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: {
+      fontWeight: '700',
+      fontSize: '13px'
+    },
+    pb: "xs"
+  }, "Super Mode"), ___EmotionJSX(Text, {
+    variant: "base"
+  }, "Enabled")), ___EmotionJSX(Box, {
+    mb: "lg"
+  }, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: {
+      fontWeight: '700',
+      fontSize: '13px'
+    },
+    pb: "xs"
+  }, "Username"), ___EmotionJSX(Text, {
+    variant: "base"
+  }, "somebody"))), ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    onClick: editConfiguration,
+    variant: "inverted",
+    size: "20px"
+  }, ___EmotionJSX(Icon, {
+    icon: PencilIcon
+  }))))))), editOverviewVisible && ___EmotionJSX(OverlayPanel, {
+    p: "0",
+    isOpen: editOverviewVisible
+  }, ___EmotionJSX(Box, {
+    height: "60px",
+    bg: "accent.99",
+    pl: "lg",
+    pr: "lg"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    flexBasis: "0px",
+    flexGrow: "1",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: Person,
+    alignSelf: "center",
+    mr: "md",
+    color: "accent.40",
+    size: 25,
+    flexShrink: 0
+  }), ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    alignSelf: "center",
+    color: "active",
+    mr: "xs"
+  }, selectedId ? _findInstanceProperty(items).call(items, function (i) {
+    return i.id === selectedId;
+  }).title : null), ___EmotionJSX(Icon, {
+    icon: ChevronRight,
+    alignSelf: "center",
+    mr: "xs",
+    color: "accent.40",
+    size: 22,
+    flexShrink: 0
+  }), ___EmotionJSX(Box, {
+    alignSelf: "center",
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Edit Overview"))), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    onClick: function onClick() {
+      return resetListItem();
+    },
+    flexShrink: 0
+  }, ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  }))))), ___EmotionJSX(Box, {
+    height: "100%",
+    pl: "lg",
+    pr: "lg"
+  }, ___EmotionJSX(Box, {
+    sx: {
+      overflowY: 'auto'
+    }
+  }, ___EmotionJSX(Box, {
+    pt: "lg",
+    pb: "lg"
+  }, ___EmotionJSX(TextField, {
+    label: "Name",
+    labelMode: "float",
+    width: "85%",
+    value: selectedId ? _findInstanceProperty(items).call(items, function (i) {
+      return i.id === selectedId;
+    }).title : null,
+    "aria-label": "Name Field"
+  })), ___EmotionJSX(Box, {
+    pb: "lg"
+  }, ___EmotionJSX(TextField, {
+    label: "Subtitle",
+    labelMode: "float",
+    width: "85%",
+    value: selectedId ? _findInstanceProperty(items).call(items, function (i) {
+      return i.id === selectedId;
+    }).subtitle : null,
+    "aria-label": "Subtitle Field"
+  })), ___EmotionJSX(Box, null, ___EmotionJSX(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"
+  })))), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: buttonBarStyles,
+    pl: "lg"
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: viewItem,
+    mr: "md",
+    "aria-label": "Save Button"
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "text",
+    onPress: viewItem,
+    "aria-label": "Cancel Button"
+  }, "Cancel"))), editConfigurationVisible && ___EmotionJSX(OverlayPanel, {
+    p: "0",
+    isOpen: editConfiguration
+  }, ___EmotionJSX(Box, {
+    height: "60px",
+    bg: "accent.99"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    flexBasis: "0px",
+    flexGrow: "1",
+    alignItems: "center",
+    pl: "md",
+    pr: "md",
+    justifyContent: "space-between"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: Person,
+    alignSelf: "center",
+    mr: "md",
+    color: "accent.40",
+    size: 25,
+    flexShrink: 0
+  }), ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    alignSelf: "center",
+    color: "active",
+    mr: "xs"
+  }, selectedId ? _findInstanceProperty(items).call(items, function (i) {
+    return i.id === selectedId;
+  }).title : null), ___EmotionJSX(Icon, {
+    icon: ChevronRight,
+    alignSelf: "center",
+    mr: "xs",
+    color: "accent.40",
+    size: 22,
+    flexShrink: 0
+  }), ___EmotionJSX(Box, {
+    alignSelf: "center",
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "sectionTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Edit Configuration"))), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    onClick: function onClick() {
+      return resetListItem();
+    },
+    flexShrink: 0
+  }, ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  }))))), ___EmotionJSX(Box, {
+    height: "100%",
+    sx: {
+      overflowY: 'auto'
+    }
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    pt: "lg",
+    pb: "lg",
+    pl: "md"
+  }, ___EmotionJSX(SelectField, {
+    labelMode: "float",
+    label: "Configuration Type",
+    minWidth: "40%",
+    maxWidth: "400px",
+    "aria-label": "Configuration Type Input"
+  }, ___EmotionJSX(Item, {
+    key: "1"
+  }, "Regular Configuration"), ___EmotionJSX(Item, {
+    key: "2"
+  }, "Placeholder Configuration 1"), ___EmotionJSX(Item, {
+    key: "3"
+  }, "Placeholder Configuration 2"))), ___EmotionJSX(Box, {
+    pb: "lg",
+    pl: "md"
+  }, ___EmotionJSX(TextField, {
+    label: "URL",
+    labelMode: "float",
+    minWidth: "35%",
+    maxWidth: "400px",
+    "aria-label": "URL Input"
+  })), ___EmotionJSX(Box, {
+    pb: "sm",
+    pl: "md"
+  }, ___EmotionJSX(TextField, {
+    label: "URL",
+    labelMode: "float",
+    minWidth: "35%",
+    maxWidth: "400px",
+    "aria-label": "URL Input"
+  })), ___EmotionJSX(Box, {
+    pb: "lg",
+    pl: "md"
+  }, ___EmotionJSX(CheckboxField, {
+    label: "Super Mode",
+    "aria-label": "Super Mode Input"
+  })), ___EmotionJSX(Box, {
+    pb: "lg",
+    pl: "md"
+  }, ___EmotionJSX(TextField, {
+    label: "Username",
+    labelMode: "float",
+    minWidth: "35%",
+    maxWidth: "400px",
+    "aria-label": "Username Input"
+  })), ___EmotionJSX(Box, {
+    pb: "lg",
+    pl: "md"
+  }, ___EmotionJSX(TextField, {
+    labelMode: "float",
+    label: "Password",
+    minWidth: "35%",
+    maxWidth: "400px",
+    "aria-label": "Password Input"
+  })))), ___EmotionJSX(Box, {
+    isRow: true,
+    pl: "lg",
+    sx: buttonBarStyles
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: viewItem,
+    mr: "md",
+    "aria-label": "Save Button"
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "text",
+    onPress: viewItem,
+    "aria-label": "Cancel Button"
+  }, "Cancel"))), addItemVisible && ___EmotionJSX(OverlayPanel, {
+    p: "0",
+    isOpen: addItemVisible
+  }, ___EmotionJSX(Box, {
+    height: "60px",
+    bg: "accent.99"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    lexBasis: "0px",
+    flexGrow: "1",
+    alignItems: "center",
+    pl: "md",
+    pr: "md",
+    justifyContent: "space-between"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: Person,
+    alignSelf: "center",
+    mr: "md",
+    color: "accent.40",
+    size: 25,
+    flexShrink: 0
+  }), ___EmotionJSX(Box, {
+    alignSelf: "center"
+  }, ___EmotionJSX(Text, {
+    alignSelf: "center",
+    variant: "itemTitle",
+    mr: "auto"
+  }, "Add Item"))), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "my-label",
+    onClick: function onClick() {
+      return resetListItem();
+    },
+    flexShrink: 0
+  }, ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  }))))), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    p: "lg"
+  }, ___EmotionJSX(Stepper, {
+    activeStep: activeStep,
+    onStepChange: setActiveStep
+  }, ___EmotionJSX(Step, {
+    key: "1",
+    textValue: "Step 1"
+  }, ___EmotionJSX(Text, {
+    alignSelf: "center",
+    variant: "sectionTitle",
+    mr: "auto",
+    mt: "lg"
+  }, "Name & Description"), ___EmotionJSX(Box, {
+    pt: "lg",
+    pb: "lg"
+  }, ___EmotionJSX(TextField, {
+    label: "Name",
+    labelMode: "float",
+    minWidth: "40%",
+    maxWidth: "400px",
+    "aria-label": "Name Input",
+    key: "name-input"
+  })), ___EmotionJSX(Box, {
+    pb: "lg"
+  }, ___EmotionJSX(TextField, {
+    label: "Subtitle",
+    labelMode: "float",
+    minWidth: "40%",
+    maxWidth: "400px",
+    "aria-label": "Subtitle Input",
+    key: "subtitle-input"
+  })), ___EmotionJSX(Box, null, ___EmotionJSX(TextAreaField, {
+    label: "Description",
+    labelMode: "float",
+    minWidth: "40%",
+    maxWidth: "400px",
+    rows: 5,
+    "aria-label": "Name Input",
+    key: "description-input"
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: buttonBarStyles
+  }, ___EmotionJSX(Button, {
+    variant: "text",
+    onPress: resetListItem,
+    mr: "md",
+    "aria-label": "Cancel Button"
+  }, "Cancel"), ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: function onPress() {
+      return setActiveStep(2);
+    },
+    "aria-label": "Next Button"
+  }, "Next"))), ___EmotionJSX(Step, {
+    key: "2",
+    textValue: "Step 2"
+  }, ___EmotionJSX(Text, {
+    alignSelf: "center",
+    variant: "sectionTitle",
+    mr: "auto",
+    mt: "lg",
+    mb: "lg"
+  }, "Name & Description"), ___EmotionJSX(Box, {
+    pb: "lg"
+  }, ___EmotionJSX(SelectField, {
+    selectedKey: "1",
+    labelMode: "float",
+    label: "Configuration Type",
+    minWidth: "40%",
+    maxWidth: "400px",
+    key: "configuration-type"
+  }, ___EmotionJSX(Item, {
+    key: "1"
+  }, "Regular Configuration"), ___EmotionJSX(Item, {
+    key: "2"
+  }, "Placeholder 1"), ___EmotionJSX(Item, {
+    key: "3"
+  }, "Placeholder 2"))), ___EmotionJSX(Box, {
+    pb: "sm"
+  }, ___EmotionJSX(TextField, {
+    label: "URL",
+    labelMode: "float",
+    minWidth: "40%",
+    maxWidth: "400px",
+    value: "https://domain.com:9999",
+    key: "url-input-1"
+  })), ___EmotionJSX(Box, {
+    pb: "sm"
+  }, ___EmotionJSX(TextField, {
+    label: "URL",
+    labelMode: "float",
+    minWidth: "40%",
+    maxWidth: "400px",
+    value: "https://somewhere.else.com:9090",
+    key: "url-input-2"
+  })), ___EmotionJSX(Box, {
+    pb: "lg"
+  }, ___EmotionJSX(CheckboxField, {
+    label: "Super Mode",
+    isSelected: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: buttonBarStyles
+  }, ___EmotionJSX(Button, {
+    variant: "text",
+    onPress: resetListItem,
+    mr: "md"
+  }, "Cancel"), ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: saveItem
+  }, "Save"))))))), isDeleting && ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, {
+    title: "Delete Item",
+    isOpen: isDeleting,
+    isDismissable: true,
+    hasCloseButton: true,
+    onClose: function onClose() {
+      return setIsDeleting(false);
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "subtitle",
+    pt: "lg"
+  }, "Are you sure you want to delete this item?"), ___EmotionJSX(Box, {
+    isRow: true,
+    pt: "lg",
+    mr: "auto"
+  }, ___EmotionJSX(Button, {
+    variant: "danger",
+    mr: "md",
+    onPress: deleteItem
+  }, "Delete"), ___EmotionJSX(Button, {
+    variant: "text",
+    onPress: function onPress() {
+      return setIsDeleting(false);
+    }
+  }, "Cancel")))), ___EmotionJSX(Messages, {
+    onClose: onMessageClose,
+    style: {
+      zIndex: 9999
+    }
+  }, hasAdded && ___EmotionJSX(Item, {
+    key: "message2",
+    status: "success"
+  }, "A new item has been successfully added.")));
+};