@pingux/astro 1.2.0-alpha.9 → 1.3.1

package/lib/layouts/ListLayout.stories.js

@@ -1,866 +0,0 @@
-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.")));
-};