@pingux/astro 2.16.1-alpha.1 → 2.17.0-alpha.1

package/lib/experimental/ListViewItem/ListViewItem.js

@@ -1,93 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { forwardRef } from 'react';
-import { useHover } from '@react-aria/interactions';
-import { useStatusClasses } from '../../hooks';
-import { Box, Icon, Image, Text } from '../../index';
-import { listViewItemPropTypes } from './listViewItemAttributes';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export var LIST_ITEM_ICON = '-list-item-icon';
-var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _context, _context2;
-  var children = _ref.children,
-    className = _ref.className,
-    data = _ref.data,
-    isHovered = _ref.isHovered,
-    isSelected = _ref.isSelected,
-    linkProps = _ref.linkProps,
-    onHoverChange = _ref.onHoverChange,
-    onHoverEnd = _ref.onHoverEnd,
-    onHoverStart = _ref.onHoverStart,
-    slots = _ref.slots,
-    others = _objectWithoutProperties(_ref, _excluded);
-  var icon = data.icon,
-    image = data.image,
-    subtext = data.subtext,
-    text = data.text;
-  var shouldUseDefaultHover = isHovered === undefined;
-  var _useHover = useHover({
-      onHoverChange: onHoverChange,
-      onHoverEnd: onHoverEnd,
-      onHoverStart: onHoverStart
-    }),
-    hoverProps = _useHover.hoverProps,
-    defaultIsHovered = _useHover.isHovered;
-  var _useStatusClasses = useStatusClasses(className, {
-      isHovered: shouldUseDefaultHover ? defaultIsHovered : isHovered,
-      isSelected: isSelected
-    }),
-    classNames = _useStatusClasses.classNames;
-  var getWrapperVariant = function getWrapperVariant() {
-    if (slots !== null && slots !== void 0 && slots.leftOfData) return 'listViewItem.leftOfDataWrapper';
-    if (image && !icon) return 'listViewItem.imageWrapper';
-    return 'listViewItem.iconWrapper';
-  };
-  var renderIcon = icon && ___EmotionJSX(Box, {
-    width: "25px"
-  }, ___EmotionJSX(Icon, {
-    color: "accent.40",
-    icon: icon,
-    size: "md",
-    title: {
-      id: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON),
-      name: _concatInstanceProperty(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
-    }
-  }));
-  var renderImage = !icon && image && ___EmotionJSX(Box, {
-    width: "35px"
-  }, ___EmotionJSX(Image, {
-    src: image.src,
-    alt: image.alt,
-    "aria-label": image['aria-label']
-  }));
-  var renderData = ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
-  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon || renderImage, ___EmotionJSX(Box, {
-    variant: getWrapperVariant()
-  }, text && ___EmotionJSX(Text, {
-    variant: "listViewItemText"
-  }, text), subtext && ___EmotionJSX(Text, {
-    variant: "listViewItemSubtext"
-  }, subtext)));
-  return ___EmotionJSX(Box, _extends({
-    className: classNames,
-    ref: ref,
-    variant: "listViewItem.styledContainer"
-  }, hoverProps, others), ___EmotionJSX(Box, {
-    isRow: true,
-    variant: getWrapperVariant()
-  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
-    isRow: true,
-    variant: "listViewItem.rightOfData"
-  }, slots.rightOfData), ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "sm",
-    variant: "listViewItem.controls"
-  }, children)));
-});
-ListViewItem.propTypes = listViewItemPropTypes;
-ListViewItem.displayName = 'ListViewItem';
-export default ListViewItem;

package/lib/experimental/recipes/ListAndPanel.stories.js

@@ -1,342 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useRef, useState } from 'react';
-import { FocusScope } from 'react-aria';
-import { Item } from 'react-stately';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
-import PencilIcon from '@pingux/mdi-react/PencilIcon';
-import PlusIcon from '@pingux/mdi-react/PlusIcon';
-import { useOverlayPanelState } from '../../hooks';
-import useOverlappingMenuHoverState from '../../hooks/useOverlappingMenuHoverState';
-import { Box, Icon, IconButton, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../../index';
-import { items } from './items';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Experimental/Recipes/ListAndPanel',
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  }
-};
-var sx = {
-  wrapper: {
-    px: 'lg',
-    py: 'lg',
-    bg: 'accent.99',
-    height: '900px',
-    overflowY: 'scroll'
-  },
-  separator: {
-    bg: 'accent.90'
-  },
-  tabsWrapper: {
-    px: 'lg',
-    pt: 'xs'
-  },
-  iconButton: {
-    position: 'absolute',
-    top: 0,
-    right: 0
-  },
-  itemLabel: {
-    fontSize: 'sm',
-    fontWeight: 3,
-    lineHeight: '16px',
-    mb: 'xs'
-  },
-  itemValue: {
-    fontWeight: 0,
-    lineHeight: '18px',
-    mb: 'md'
-  },
-  panelHeader: {
-    container: {
-      bg: 'accent.99',
-      minHeight: 58,
-      ml: 0,
-      pl: 14,
-      pr: 'xs'
-    },
-    controls: {
-      alignSelf: 'center',
-      ml: 'auto',
-      pr: 'sm'
-    },
-    data: {
-      alignItems: 'center'
-    },
-    subtitle: {
-      alignSelf: 'start',
-      fontSize: 'sm',
-      lineHeight: '16px',
-      my: '1px'
-    },
-    title: {
-      alignSelf: 'start',
-      fontSize: 'md'
-    },
-    wrapper: {
-      cursor: 'pointer',
-      display: 'flex',
-      flex: '1 1 0px',
-      ml: 'md'
-    }
-  }
-};
-var heading = 'Users';
-var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-  align: "center",
-  isRow: true,
-  mb: "xs",
-  role: "heading",
-  "aria-level": "1"
-}, ___EmotionJSX(Text, {
-  fontSize: "xx",
-  fontWeight: 3,
-  fontColor: "text.primary"
-}, heading), ___EmotionJSX(IconButton, {
-  "aria-label": "icon button",
-  ml: "sm",
-  variant: "inverted"
-}, ___EmotionJSX(Icon, {
-  icon: PlusIcon,
-  size: "sm"
-}))), ___EmotionJSX(Text, {
-  fontSize: "sm",
-  color: "text.secondary",
-  fontWeight: 0,
-  width: "800px"
-}, description, ___EmotionJSX(Link, {
-  href: "https://uilibrary.ping-eng.com/",
-  sx: {
-    fontSize: '13px'
-  }
-}, " Learn more")));
-export var ListAndPanel = function ListAndPanel() {
-  // Example of items data structure
-  // const items = [
-  //   {
-  //     email: 'dburkitt5@columbia.edu',
-  //     firstName: 'Nicola',
-  //     lastName: 'Burkitt',
-  //     icon: AccountIcon,
-  //   },
-  // ]
-
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedItemId = _useState2[0],
-    setSelectedItemId = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedKeys = _useState4[0],
-    setSelectedKeys = _useState4[1];
-  var _useOverlayPanelState = useOverlayPanelState(),
-    panelState = _useOverlayPanelState.state,
-    onPanelClose = _useOverlayPanelState.onClose;
-  var panelTriggerRef = useRef();
-  var closePanelHandler = function closePanelHandler() {
-    onPanelClose(panelState, panelTriggerRef);
-    setSelectedItemId(-1);
-    setSelectedKeys([]);
-  };
-  var selectItemHandler = function selectItemHandler(e) {
-    if (e.size) {
-      setSelectedItemId(_findIndexInstanceProperty(items).call(items, function (item) {
-        return item.email === e.currentKey;
-      }));
-      setSelectedKeys([e.currentKey]);
-      panelState.open();
-    } else {
-      closePanelHandler();
-    }
-  };
-  return ___EmotionJSX(Box, {
-    sx: sx.wrapper
-  }, title, ___EmotionJSX(SearchField, {
-    position: "fixed",
-    mb: "lg",
-    mt: "lg",
-    width: "400px",
-    placeholder: "Search",
-    "aria-label": "search"
-  }), ___EmotionJSX(Separator, {
-    margin: 0
-  }), ___EmotionJSX(ListView, {
-    items: items,
-    onSelectionChange: selectItemHandler,
-    ref: panelTriggerRef,
-    selectedKeys: selectedKeys
-  }, function (item) {
-    var _context;
-    return ___EmotionJSX(Item, {
-      key: item.email
-    }, ___EmotionJSX(ListElement, {
-      data: {
-        text: _concatInstanceProperty(_context = "".concat(item.lastName, ", ")).call(_context, item.firstName),
-        subtext: item.email,
-        icon: item.icon
-      }
-    }));
-  }), ___EmotionJSX(OverlayPanel, {
-    isOpen: panelState.isOpen,
-    state: panelState,
-    triggerRef: panelTriggerRef,
-    p: 0,
-    size: "large"
-  }, panelState.isOpen && ___EmotionJSX(FocusScope, {
-    contain: true,
-    restoreFocus: true,
-    autoFocus: true
-  }, ___EmotionJSX(PanelHeader, {
-    item: selectedItemId >= 0 ? items[selectedItemId] : [],
-    onClosePanel: closePanelHandler
-  }), ___EmotionJSX(Separator, {
-    margin: 0,
-    sx: sx.separator
-  }), ___EmotionJSX(Box, {
-    sx: sx.tabsWrapper
-  }, ___EmotionJSX(Tabs, {
-    tabListProps: {
-      justifyContent: 'center'
-    },
-    tabPanelProps: {
-      sx: {
-        position: 'relative'
-      }
-    }
-  }, ___EmotionJSX(Tab, {
-    title: "Profile"
-  }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
-    variant: "inverted",
-    "aria-label": "pencil icon button",
-    sx: sx.iconButton
-  }, ___EmotionJSX(Icon, {
-    icon: PencilIcon,
-    size: "sm"
-  })), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "Full Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "First Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "Last Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel
-  }, "Email"), ___EmotionJSX(Text, {
-    sx: sx.itemValue
-  }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
-    title: "Group Memberships"
-  }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
-    title: "Account Info"
-  }, ___EmotionJSX(Text, null, "Account Info")))))));
-};
-export var ListElement = function ListElement(_ref) {
-  var _ref$data = _ref.data,
-    data = _ref$data === void 0 ? {
-      subtext: 'dburkitt5@columbia.edu',
-      text: 'Burkitt, Nicola',
-      icon: AccountIcon
-    } : _ref$data;
-  var listItemRef = useRef();
-  var _useOverlappingMenuHo = useOverlappingMenuHoverState({
-      listItemRef: listItemRef
-    }),
-    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
-    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
-    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
-    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
-    isHovered = _useOverlappingMenuHo.isHovered;
-  var text = data.text,
-    subtext = data.subtext,
-    icon = data.icon;
-  return ___EmotionJSX(ListViewItem, {
-    data: {
-      icon: icon,
-      subtext: subtext,
-      text: text
-    },
-    isHovered: isHovered,
-    onHoverEnd: handleHoverEnd,
-    onHoverStart: handleHoverStart,
-    onMouseMove: handleMouseMove,
-    ref: listItemRef
-  }, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, {
-    onAction: handleHoverEnd,
-    onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoverStart
-  }, ___EmotionJSX(Item, {
-    key: "enable"
-  }, "Enable user"), ___EmotionJSX(Item, {
-    key: "disable"
-  }, "Disable user"), ___EmotionJSX(Item, {
-    key: "delete"
-  }, "Delete user")));
-};
-export var PanelHeader = function PanelHeader(_ref2) {
-  var _context2;
-  var _ref2$item = _ref2.item,
-    item = _ref2$item === void 0 ? {
-      email: 'dburkitt5@columbia.edu',
-      icon: AccountIcon,
-      firstName: 'John',
-      lastName: 'Doe'
-    } : _ref2$item,
-    onClosePanel = _ref2.onClosePanel;
-  var email = item.email,
-    firstName = item.firstName,
-    lastName = item.lastName;
-  var text = _concatInstanceProperty(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
-  return ___EmotionJSX(Box, {
-    sx: sx.panelHeader.container
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.panelHeader.wrapper
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.panelHeader.data
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "bodyStrong",
-    sx: sx.panelHeader.title
-  }, text), ___EmotionJSX(Text, {
-    variant: "subtitle",
-    sx: sx.panelHeader.subtitle
-  }, email))), ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.panelHeader.controls
-  }, ___EmotionJSX(SwitchField, {
-    "aria-label": "active user",
-    isDefaultSelected: true,
-    alignSelf: "center",
-    mr: "xs"
-  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
-    "aria-label": "more"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "md"
-  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
-    key: "enable"
-  }, "Enable user"), ___EmotionJSX(Item, {
-    key: "disable"
-  }, "Disable user"), ___EmotionJSX(Item, {
-    key: "delete"
-  }, "Delete user"))), ___EmotionJSX(IconButton, {
-    "aria-label": "close icon button",
-    onPress: onClosePanel
-  }, ___EmotionJSX(Icon, {
-    size: "md",
-    icon: CloseIcon
-  })))));
-};

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -1,118 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState } from 'react';
-import CloseIcon from '@pingux/mdi-react/CloseIcon';
-import { Box, Button, Icon, IconButton, RadioField, RadioGroupField, Text } from '../index';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Recipes/Radio Buttons with Links'
-};
-export var Default = function Default() {
-  var roles = [{
-    name: 'Client Application Developer'
-  }, {
-    name: 'Environment Admin',
-    isDisabled: true
-  }, {
-    name: 'Identity Data Admin',
-    isDisabled: true
-  }, {
-    name: 'Organization Admin'
-  }];
-  var titleSx = {
-    fontSize: 'md',
-    color: 'neutral.20',
-    fontWeight: 2
-  };
-  var subtitleSx = {
-    fontSize: 'md',
-    color: 'neutral.10'
-  };
-  var RadioFieldWithButton = function RadioFieldWithButton(_ref) {
-    var fieldName = _ref.fieldName,
-      isDisabled = _ref.isDisabled;
-    var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-    return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-      isRow: true,
-      alignItems: "center"
-    }, ___EmotionJSX(RadioField, {
-      value: fieldName,
-      label: fieldName,
-      isDisabled: isDisabled
-    }), ___EmotionJSX(Button, {
-      variant: "link",
-      mb: "xs",
-      ml: "md",
-      onPress: function onPress() {
-        return setIsOpen(function (prev) {
-          return !prev;
-        });
-      },
-      isDisabled: isDisabled
-    }, "".concat(isOpen ? 'Hide' : 'Show', " Permissions"))), isOpen && ___EmotionJSX(PermissionsList, {
-      onPress: function onPress() {
-        return setIsOpen(false);
-      }
-    }));
-  };
-  var PermissionsList = function PermissionsList(_ref2) {
-    var onPress = _ref2.onPress;
-    return ___EmotionJSX(Box, {
-      p: "md",
-      bg: "neutral.95"
-    }, ___EmotionJSX(Box, {
-      isRow: true,
-      justifyContent: "space-between",
-      mb: "sm"
-    }, ___EmotionJSX(Text, {
-      sx: {
-        fontWeight: 2
-      }
-    }, "Permissions"), ___EmotionJSX(IconButton, {
-      onPress: onPress,
-      "aria-label": "close"
-    }, ___EmotionJSX(Icon, {
-      icon: CloseIcon,
-      size: "sm",
-      title: {
-        name: 'Close Icon'
-      }
-    }))), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-      sx: titleSx,
-      mb: "xs"
-    }, "Resource"), ___EmotionJSX(Text, {
-      sx: subtitleSx,
-      mb: "sm"
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
-      sx: titleSx,
-      mb: "xs"
-    }, "Push Credentials"), ___EmotionJSX(Text, {
-      sx: subtitleSx,
-      mb: "sm"
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"), ___EmotionJSX(Text, {
-      sx: titleSx,
-      mb: "xs"
-    }, "Organization"), ___EmotionJSX(Text, {
-      sx: subtitleSx,
-      mb: "sm"
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"), ___EmotionJSX(Text, {
-      sx: titleSx,
-      mb: "xs"
-    }, "Image"), ___EmotionJSX(Text, {
-      sx: subtitleSx,
-      mb: "sm"
-    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod")));
-  };
-  return ___EmotionJSX(RadioGroupField, null, _mapInstanceProperty(roles).call(roles, function (_ref3) {
-    var name = _ref3.name,
-      isDisabled = _ref3.isDisabled;
-    return ___EmotionJSX(RadioFieldWithButton, {
-      fieldName: name,
-      isDisabled: isDisabled,
-      key: name
-    });
-  }));
-};

package/lib/recipes/ScrollableListView.stories.hidden.js

@@ -1,121 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { useState } from 'react';
-import { Item } from 'react-stately';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
-import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
-import { Box, Icon, IconButton, ListView, ScrollBox, SearchField, Text } from '../index';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Recipes/Scrollable List View'
-};
-var unfilteredItems = [{
-  key: 'Aardvark',
-  name: 'Aardvark',
-  id: '1'
-}, {
-  key: 'Kangaroo',
-  name: 'Kangaroo',
-  id: '2'
-}, {
-  key: 'Snake',
-  name: 'Snake',
-  id: '3'
-}, {
-  key: 'Dog',
-  name: 'Dog',
-  id: '4'
-}, {
-  key: 'Cat',
-  name: 'Cat',
-  id: '5'
-}, {
-  key: 'Mouse',
-  name: 'Mouse',
-  id: '6'
-}, {
-  key: 'Jaguar',
-  name: 'Jaguar',
-  id: '7'
-}, {
-  key: 'Elephant',
-  name: 'Elephant',
-  id: '7'
-}];
-export var Default = function Default(_ref) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var _useState3 = useState(unfilteredItems),
-    _useState4 = _slicedToArray(_useState3, 2),
-    items = _useState4[0],
-    setItems = _useState4[1];
-  var filterItems = function filterItems(input) {
-    var filtered = _filterInstanceProperty(unfilteredItems).call(unfilteredItems, function (obj) {
-      var _context;
-      return _includesInstanceProperty(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
-    });
-    setItems(filtered);
-  };
-  var onChangeInput = function onChangeInput(input) {
-    setValue(input);
-    filterItems(input);
-  };
-  return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
-    value: value,
-    onChange: onChangeInput
-  }), ___EmotionJSX(ScrollBox, {
-    maxHeight: 450,
-    hasShadows: true
-  }, ___EmotionJSX(ListView, _extends({}, args, {
-    items: items
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name,
-      textValue: item.name
-    }, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Box, {
-      isRow: true,
-      mr: "auto",
-      alignSelf: "center"
-    }, ___EmotionJSX(Icon, {
-      icon: FormSelectIcon,
-      mr: "sm",
-      color: "accent.40",
-      size: 25,
-      title: {
-        name: 'Form Select Icon'
-      }
-    }), ___EmotionJSX(Text, {
-      variant: "itemTitle",
-      alignSelf: "center"
-    }, item.name)), ___EmotionJSX(Box, {
-      isRow: true,
-      alignSelf: "center",
-      gap: "sm"
-    }, ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon"
-    }, ___EmotionJSX(Icon, {
-      icon: CreateIcon,
-      size: "sm",
-      title: {
-        name: 'Create Icon'
-      }
-    })), ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon"
-    }, ___EmotionJSX(Icon, {
-      icon: MoreVertIcon,
-      size: "sm",
-      title: {
-        name: 'More Vertical Icon'
-      }
-    })))));
-  })));
-};