@blerp/design 1.3.17 → 1.4.2

package/dist/esm/colors.js

@@ -1,3 +1,9 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 let colors = {
   white: "#ffffff",
   waxing: "#F3F3F3",
@@ -68,10 +74,8 @@ let overrideColors = {
   buntingBlueOverride: colors.buntingBlue,
   popnYellowOverride: colors.popnYellow
 };
-const lightColors = { ...colors,
-  ...overrideColors
-};
-const darkColors = {
+const lightColors = _objectSpread(_objectSpread({}, colors), overrideColors);
+const darkColors = _objectSpread({
   white: colors.black,
   waxwing: colors.grey8Dark,
   grey1: colors.grey1Dark,
@@ -93,9 +97,8 @@ const darkColors = {
   seafoam: colors.seafoam,
   seafoamDark: colors.seafoamDark,
   buntingBlue: colors.buntingBlue,
-  popnYellow: colors.popnYellow,
-  ...overrideColors
-};
+  popnYellow: colors.popnYellow
+}, overrideColors);
 const lightPalette = {
   primary: {
     light: colors.ibisRed,
@@ -356,5 +359,4 @@ const darkPalette = {
   }
 };
 
-export default colors;
-export { darkColors, darkPalette, lightColors, lightPalette, overrideColors };
+export { darkColors, darkPalette, colors as default, lightColors, lightPalette, overrideColors };

package/dist/esm/helpers.js

@@ -0,0 +1,122 @@
+import React from 'react';
+
+// Remove this import:
+
+const extractDominantColor = (imageUrl, callback) => {
+  const img = new Image();
+  img.crossOrigin = "Anonymous";
+  img.src = imageUrl;
+
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+    let r = 0,
+        g = 0,
+        b = 0;
+
+    for (let i = 0; i < data.length; i += 4) {
+      r += data[i];
+      g += data[i + 1];
+      b += data[i + 2];
+    }
+
+    const pixelCount = data.length / 4;
+    r = Math.floor(r / pixelCount);
+    g = Math.floor(g / pixelCount);
+    b = Math.floor(b / pixelCount);
+    callback(["rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")")]);
+  };
+}; // Custom palette extraction for components that need vibrant/darkVibrant colors
+
+const useCustomPalette = imageUrl => {
+  const [palette, setPalette] = React.useState({
+    loading: true,
+    data: {
+      vibrant: null,
+      darkVibrant: null
+    },
+    error: null
+  });
+  React.useEffect(() => {
+    if (!imageUrl) {
+      setPalette({
+        loading: false,
+        data: {
+          vibrant: null,
+          darkVibrant: null
+        },
+        error: null
+      });
+      return;
+    }
+
+    const img = new Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        let r = 0,
+            g = 0,
+            b = 0;
+
+        for (let i = 0; i < data.length; i += 4) {
+          r += data[i];
+          g += data[i + 1];
+          b += data[i + 2];
+        }
+
+        const pixelCount = data.length / 4;
+        r = Math.floor(r / pixelCount);
+        g = Math.floor(g / pixelCount);
+        b = Math.floor(b / pixelCount);
+        const vibrant = "rgb(".concat(Math.min(r + 20, 255), ", ").concat(Math.min(g + 20, 255), ", ").concat(Math.min(b + 20, 255), ")");
+        const darkVibrant = "rgb(".concat(Math.floor(r * 0.6), ", ").concat(Math.floor(g * 0.6), ", ").concat(Math.floor(b * 0.6), ")");
+        setPalette({
+          loading: false,
+          data: {
+            vibrant,
+            darkVibrant
+          },
+          error: null
+        });
+      } catch (error) {
+        console.error("Palette extraction failed:", error);
+        setPalette({
+          loading: false,
+          data: {
+            vibrant: null,
+            darkVibrant: null
+          },
+          error: error.message
+        });
+      }
+    };
+
+    img.onerror = () => {
+      setPalette({
+        loading: false,
+        data: {
+          vibrant: null,
+          darkVibrant: null
+        },
+        error: "Image failed to load"
+      });
+    };
+  }, [imageUrl]);
+  return palette;
+};
+
+export { extractDominantColor, useCustomPalette };

package/dist/esm/icons.js

@@ -156,4 +156,4 @@ const icons = {
   }
 };
 
-export default icons;
+export { icons as default };

package/dist/esm/index.js

@@ -1,4 +1,29 @@
-import { Box as Box$1, Container as Container$1, Grid as Grid$1, Stack as Stack$1, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$1, Switch as Switch$1, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1, InputAdornment as InputAdornment$1, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, AlertTitle as AlertTitle$1, SvgIcon as SvgIcon$1, FormControl as FormControl$1, InputLabel as InputLabel$1 } from '@mui/material';
+import { ThemeProvider as ThemeProvider$1 } from './neo-components/ThemeProvider.js';
+import { createTheme as createTheme$1 } from './neo-components/createTheme.js';
+import { CircularProgress as CircularProgress$1 } from './neo-components/CircularProgress.js';
+import { Box as Box$1 } from './neo-components/Box.js';
+import { Stack as Stack$1 } from './neo-components/Stack.js';
+import { Grid as Grid$1 } from './neo-components/Grid.js';
+import { Container as Container$1 } from './neo-components/Container.js';
+import { Typography } from './neo-components/Text.js';
+import { Button as Button$1 } from './neo-components/Button.js';
+import { IconButton as IconButton$1 } from './neo-components/IconButton.js';
+import { Fab, SpeedDial as SpeedDial$1 } from './neo-components/Fab.js';
+import './neo-components/ToggleButton.js';
+import { TextField, InputAdornment as InputAdornment$1 } from './neo-components/Input.js';
+import { Checkbox as Checkbox$1, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$1, Switch as Switch$1 } from './neo-components/FormControls.js';
+import { Autocomplete as Autocomplete$1 } from './neo-components/Autocomplete.js';
+import { Card as Card$1, Paper as Paper$1 } from './neo-components/Paper.js';
+import { Backdrop as Backdrop$1, Dialog as Dialog$1, Modal as Modal$1 } from './neo-components/Dialog.js';
+import { Drawer as Drawer$1, Menu as Menu$1, Tabs as Tabs$1, Tab as Tab$1, Alert as Alert$1, Snackbar as Snackbar$1, Popover as Popover$1, MenuItem as MenuItem$1, AlertTitle as AlertTitle$1 } from './neo-components/Navigation.js';
+import { BottomNavigation as BottomNavigation$1 } from './neo-components/BottomNavigation.js';
+import { Stepper as Stepper$1 } from './neo-components/Stepper.js';
+import { Link as Link$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, Tooltip as Tooltip$1 } from './neo-components/Misc.js';
+import { AccordionSummary as AccordionSummary$1, AccordionDetails as AccordionDetails$1, AccordionActions as AccordionActions$1, ImageList as ImageList$1, ButtonGroup as ButtonGroup$1, Breadcrumbs as Breadcrumbs$1, Pagination as Pagination$1, Accordion as Accordion$1, AppBar as AppBar$1, List as List$1, Table as Table$1, Toolbar as Toolbar$1, SvgIcon as SvgIcon$1, FormControl as FormControl$1, InputLabel as InputLabel$1 } from './neo-components/Layout.js';
+import '@babel/runtime/helpers/extends';
+import '@babel/runtime/helpers/defineProperty';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'react';
 import { Blerp as Blerp$1 } from './Blerp.js';
 import { NewBlerp as NewBlerp$1 } from './NewBlerp.js';
 import { NewBlerpTest as NewBlerpTest$1 } from './NewBlerpTest.js';
@@ -27,7 +52,11 @@ export { default as PremiumBlerpCheckoutModal } from './PurchaseModals/PremiumBl
 export { default as PremiumCollectionCheckoutModal } from './PurchaseModals/PremiumCollectionCheckoutModal.js';
 export { default as PremiumSubscriptionCheckoutModal } from './PurchaseModals/PremiumSubscriptionCheckoutModal.js';
 
+// import {
 const Theme = BlerpTheme;
+const AccordionSummary = AccordionSummary$1;
+const AccordionDetails = AccordionDetails$1;
+const AccordionActions = AccordionActions$1;
 const Box = Box$1;
 const Container = Container$1;
 const Grid = Grid$1;
@@ -70,6 +99,7 @@ const Chip = Chip$1;
 const Divider = Divider$1;
 const List = List$1;
 const Table = Table$1;
+const CircularProgress = CircularProgress$1;
 const Tooltip = Tooltip$1;
 const Toolbar = Toolbar$1;
 const Text = Typography;
@@ -339,4 +369,4 @@ const Themes = {
 // };
 // export default returnLibrary();
 
-export { Accordion, Alert, AlertTitle, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpAudioContextProvider, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BottomNavigation, Box, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Chip, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, Dialog, Divider, Drawer, Dropdown, FloatingActionButton, FormControl, Grid, GroupCard, IconButton, ImageList, Input, InputAdornment, InputLabel, LinearProgress, Link, List, Menu, MenuItem, Modal, NewBlerp, NewBlerpTest, NewCollectionModal, NewDropdown, Pagination, Paper, Popover, RadioButton, Rating, Select, Skeleton, Slider, Snackbar, SpeedDial, Stack, Stepper, SvgIcon, Switch, Tab, Table, Tabs, Text, Theme, ThemeProvider, Themes, Toggle, Toolbar, Tooltip, UserCard, UsernameWithPopout, createTheme, darkThemeV1, lightThemeV1, mainTheme };
+export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Alert, AlertTitle, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpAudioContextProvider, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BottomNavigation, Box, Breadcrumbs, Button, ButtonGroup, Card, Checkbox, Chip, CircularProgress, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, Dialog, Divider, Drawer, Dropdown, FloatingActionButton, FormControl, Grid, GroupCard, IconButton, ImageList, Input, InputAdornment, InputLabel, LinearProgress, Link, List, Menu, MenuItem, Modal, NewBlerp, NewBlerpTest, NewCollectionModal, NewDropdown, Pagination, Paper, Popover, RadioButton, Rating, Select, Skeleton, Slider, Snackbar, SpeedDial, Stack, Stepper, SvgIcon, Switch, Tab, Table, Tabs, Text, Theme, ThemeProvider, Themes, Toggle, Toolbar, Tooltip, UserCard, UsernameWithPopout, createTheme, darkThemeV1, lightThemeV1, mainTheme };

package/dist/esm/neo-components/Autocomplete.js

@@ -0,0 +1,274 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState, useRef, useEffect } from 'react';
+import { withSx } from './withSx.js';
+import { TextField } from './Input.js';
+import { Paper } from './Paper.js';
+
+const _excluded = ["options", "value", "defaultValue", "onChange", "onInputChange", "inputValue", "getOptionLabel", "isOptionEqualToValue", "filterOptions", "renderInput", "renderOption", "renderTags", "multiple", "freeSolo", "disabled", "disableClearable", "loading", "loadingText", "noOptionsText", "open", "onOpen", "onClose", "autoComplete", "autoHighlight", "clearOnBlur", "clearOnEscape", "disableCloseOnSelect", "disableListWrap", "disablePortal", "fullWidth", "groupBy", "includeInputInList", "limitTags", "ListboxComponent", "ListboxProps", "openOnFocus", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "selectOnFocus", "size", "clearIcon", "forcePopupIcon", "placeholder", "className", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+/**
+ * Autocomplete - combo box with filtering
+ */
+
+
+const AutocompleteBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    options = [],
+    value,
+    defaultValue,
+    onChange,
+    onInputChange,
+    inputValue: controlledInputValue,
+    getOptionLabel = option => {
+      var _ref2, _option$label, _option$toString;
+
+      return (_ref2 = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option === null || option === void 0 ? void 0 : (_option$toString = option.toString) === null || _option$toString === void 0 ? void 0 : _option$toString.call(option)) !== null && _ref2 !== void 0 ? _ref2 : "";
+    },
+    isOptionEqualToValue = (option, value) => option === value,
+    filterOptions,
+    renderInput,
+    renderOption,
+    renderTags,
+    multiple = false,
+    freeSolo = false,
+    disabled = false,
+    disableClearable = false,
+    loading = false,
+    loadingText = "Loading…",
+    noOptionsText = "No options",
+    open: controlledOpen,
+    onOpen,
+    onClose,
+    autoComplete = false,
+    autoHighlight = false,
+    clearOnBlur = !freeSolo,
+    clearOnEscape = false,
+    disableCloseOnSelect = false,
+    disableListWrap = false,
+    disablePortal = false,
+    fullWidth = false,
+    groupBy,
+    includeInputInList = false,
+    limitTags = -1,
+    ListboxComponent = "ul",
+    ListboxProps,
+    openOnFocus = false,
+    PaperComponent = Paper,
+    PopperComponent,
+    popupIcon,
+    readOnly = false,
+    selectOnFocus = false,
+    size = "medium",
+    clearIcon,
+    forcePopupIcon = "auto",
+    placeholder,
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [internalInputValue, setInternalInputValue] = useState("");
+  const [internalValue, setInternalValue] = useState(multiple ? defaultValue || [] : defaultValue || null);
+  const inputRef = useRef(null);
+  const listboxRef = useRef(null);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const inputValue = controlledInputValue !== undefined ? controlledInputValue : internalInputValue;
+  const selectedValue = value !== undefined ? value : internalValue;
+
+  const handleOpen = () => {
+    if (disabled || readOnly) return;
+    setInternalOpen(true);
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  };
+
+  const handleClose = () => {
+    setInternalOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  };
+
+  const handleInputChange = event => {
+    const newValue = event.target.value;
+    setInternalInputValue(newValue);
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, newValue, "input");
+    if (!open) handleOpen();
+  };
+
+  const handleSelect = option => {
+    if (multiple) {
+      const newValue = Array.isArray(selectedValue) ? selectedValue.some(v => isOptionEqualToValue(option, v)) ? selectedValue.filter(v => !isOptionEqualToValue(option, v)) : [...selectedValue, option] : [option];
+      setInternalValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null, newValue, "selectOption");
+    } else {
+      setInternalValue(option);
+      setInternalInputValue(getOptionLabel(option));
+      onChange === null || onChange === void 0 ? void 0 : onChange(null, option, "selectOption");
+      if (!disableCloseOnSelect) handleClose();
+    }
+  };
+
+  const handleClear = event => {
+    event.stopPropagation();
+    setInternalValue(multiple ? [] : null);
+    setInternalInputValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, multiple ? [] : null, "clear");
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, "", "clear");
+  }; // Filter options
+
+
+  const filteredOptions = filterOptions ? filterOptions(options, {
+    inputValue,
+    getOptionLabel
+  }) : options.filter(option => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())); // Group options if groupBy provided
+
+  const groupedOptions = groupBy ? filteredOptions.reduce((acc, option) => {
+    const group = groupBy(option);
+    if (!acc[group]) acc[group] = [];
+    acc[group].push(option);
+    return acc;
+  }, {}) : null;
+
+  const baseStyle = _objectSpread({
+    position: "relative",
+    display: "inline-flex",
+    flexDirection: "column",
+    width: fullWidth ? "100%" : undefined
+  }, style);
+
+  const listboxStyle = {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: 1300,
+    maxHeight: 300,
+    overflow: "auto",
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    backgroundColor: "#FFFFFF",
+    borderRadius: 4,
+    boxShadow: "0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)"
+  };
+
+  const optionStyle = (isSelected, isHighlighted) => ({
+    padding: "8px 16px",
+    cursor: "pointer",
+    backgroundColor: isSelected ? "#E3F2FD" : isHighlighted ? "#F5F5F5" : "transparent"
+  }); // Close on outside click
+
+
+  useEffect(() => {
+    if (!canUseDOM()) return;
+
+    const handleClickOutside = event => {
+      if (inputRef.current && !inputRef.current.contains(event.target) && listboxRef.current && !listboxRef.current.contains(event.target)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const inputProps = {
+    ref: inputRef,
+    value: inputValue,
+    onChange: handleInputChange,
+    onFocus: openOnFocus ? handleOpen : undefined,
+    disabled,
+    readOnly,
+    placeholder,
+    size
+  };
+  const showClearButton = !disableClearable && !disabled && !readOnly && (multiple ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) > 0 : selectedValue !== null);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), renderInput ? renderInput(_objectSpread(_objectSpread({}, inputProps), {}, {
+    InputProps: {
+      endAdornment: /*#__PURE__*/React.createElement(React.Fragment, null, showClearButton && /*#__PURE__*/React.createElement("button", {
+        onClick: handleClear,
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 4
+        }
+      }, clearIcon || "×"), forcePopupIcon !== false && /*#__PURE__*/React.createElement("button", {
+        onClick: () => open ? handleClose() : handleOpen(),
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 4,
+          transform: open ? "rotate(180deg)" : "none"
+        }
+      }, popupIcon || "▼"))
+    }
+  })) : /*#__PURE__*/React.createElement(TextField, inputProps), open && /*#__PURE__*/React.createElement(PaperComponent, {
+    style: listboxStyle
+  }, /*#__PURE__*/React.createElement(ListboxComponent, _extends({
+    ref: listboxRef
+  }, ListboxProps), loading ? /*#__PURE__*/React.createElement("li", {
+    style: {
+      padding: "8px 16px",
+      color: "#757575"
+    }
+  }, loadingText) : filteredOptions.length === 0 ? /*#__PURE__*/React.createElement("li", {
+    style: {
+      padding: "8px 16px",
+      color: "#757575"
+    }
+  }, noOptionsText) : groupedOptions ? Object.entries(groupedOptions).map(_ref3 => {
+    let [group, groupOptions] = _ref3;
+    return /*#__PURE__*/React.createElement("li", {
+      key: group
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "8px 16px",
+        fontWeight: 600,
+        backgroundColor: "#F5F5F5"
+      }
+    }, group), /*#__PURE__*/React.createElement("ul", {
+      style: {
+        listStyle: "none",
+        margin: 0,
+        padding: 0
+      }
+    }, groupOptions.map((option, index) => {
+      const isSelected = multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.some(v => isOptionEqualToValue(option, v)) : isOptionEqualToValue(option, selectedValue);
+      return /*#__PURE__*/React.createElement("li", {
+        key: index,
+        style: optionStyle(isSelected, false),
+        onClick: () => handleSelect(option)
+      }, renderOption ? renderOption({
+        option
+      }, option, {
+        selected: isSelected
+      }) : getOptionLabel(option));
+    })));
+  }) : filteredOptions.map((option, index) => {
+    const isSelected = multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.some(v => isOptionEqualToValue(option, v)) : isOptionEqualToValue(option, selectedValue);
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      style: optionStyle(isSelected, false),
+      onClick: () => handleSelect(option)
+    }, renderOption ? renderOption({
+      option
+    }, option, {
+      selected: isSelected
+    }) : getOptionLabel(option));
+  }))));
+});
+AutocompleteBase.displayName = "Autocomplete";
+const Autocomplete = withSx(AutocompleteBase);
+
+export { Autocomplete };

package/dist/esm/neo-components/BottomNavigation.js

@@ -0,0 +1,109 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["children", "value", "onChange", "showLabels", "className", "style"],
+      _excluded2 = ["icon", "label", "value", "selected", "showLabel", "onChange", "className", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * BottomNavigation - navigation bar at bottom of screen
+ */
+
+const BottomNavigationBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    value,
+    onChange,
+    showLabels = false,
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 56,
+    backgroundColor: "#FFFFFF",
+    boxShadow: "0 -1px 3px rgba(0,0,0,0.12)"
+  }, style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), React.Children.map(children, (child, index) => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+    selected: value === index || value === child.props.value,
+    showLabel: showLabels || child.props.showLabel,
+    onChange: event => {
+      var _child$props$value;
+
+      return onChange === null || onChange === void 0 ? void 0 : onChange(event, (_child$props$value = child.props.value) !== null && _child$props$value !== void 0 ? _child$props$value : index);
+    }
+  }) : child));
+});
+BottomNavigationBase.displayName = "BottomNavigation";
+const BottomNavigation = withSx(BottomNavigationBase);
+/**
+ * BottomNavigationAction - individual action in BottomNavigation
+ */
+
+const BottomNavigationActionBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    icon,
+    label,
+    value,
+    selected = false,
+    showLabel = false,
+    onChange,
+    className,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const baseStyle = _objectSpread({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    minWidth: 80,
+    maxWidth: 168,
+    padding: "6px 12px",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    border: "none",
+    color: selected ? "#7C4DFF" : "#757575",
+    transition: "color 0.2s"
+  }, style);
+
+  const iconStyle = {
+    fontSize: 24,
+    marginBottom: showLabel || selected ? 4 : 0
+  };
+  const labelStyle = {
+    fontSize: 12,
+    opacity: showLabel || selected ? 1 : 0,
+    transition: "opacity 0.2s"
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    onClick: onChange
+  }, props), /*#__PURE__*/React.createElement("span", {
+    style: iconStyle
+  }, icon), (showLabel || selected) && /*#__PURE__*/React.createElement("span", {
+    style: labelStyle
+  }, label));
+});
+BottomNavigationActionBase.displayName = "BottomNavigationAction";
+withSx(BottomNavigationActionBase);
+
+export { BottomNavigation };

package/dist/esm/neo-components/Box.js

@@ -0,0 +1,36 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["component", "children", "sx"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Box - The fundamental layout component (replaces MUI Box)
+ * A div with sx prop support
+ */
+
+const BaseBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    component: Component = 'div',
+    children,
+    sx
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props, {
+    sx: _objectSpread({
+      padding: '16px'
+    }, sx)
+  }), children);
+});
+BaseBox.displayName = 'BaseBox';
+const Box = withSx(BaseBox);
+
+export { Box, Box as default };