@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/index.js

@@ -2,7 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var material = require('@mui/material');
+var ThemeProvider$1 = require('./neo-components/ThemeProvider.js');
+var createTheme$1 = require('./neo-components/createTheme.js');
+var CircularProgress$1 = require('./neo-components/CircularProgress.js');
+var Box$1 = require('./neo-components/Box.js');
+var Stack$1 = require('./neo-components/Stack.js');
+var Grid$1 = require('./neo-components/Grid.js');
+var Container$1 = require('./neo-components/Container.js');
+var Text$1 = require('./neo-components/Text.js');
+var Button$1 = require('./neo-components/Button.js');
+var IconButton$1 = require('./neo-components/IconButton.js');
+var Fab = require('./neo-components/Fab.js');
+require('./neo-components/ToggleButton.js');
+var Input$1 = require('./neo-components/Input.js');
+var FormControls = require('./neo-components/FormControls.js');
+var Autocomplete$1 = require('./neo-components/Autocomplete.js');
+var Paper$1 = require('./neo-components/Paper.js');
+var Dialog$1 = require('./neo-components/Dialog.js');
+var Navigation = require('./neo-components/Navigation.js');
+var BottomNavigation$1 = require('./neo-components/BottomNavigation.js');
+var Stepper$1 = require('./neo-components/Stepper.js');
+var Misc = require('./neo-components/Misc.js');
+var Layout = require('./neo-components/Layout.js');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
 var Blerp$1 = require('./Blerp.js');
 var NewBlerp$1 = require('./NewBlerp.js');
 var NewBlerpTest$1 = require('./NewBlerpTest.js');
@@ -31,54 +56,59 @@ var PremiumBlerpCheckoutModal = require('./PurchaseModals/PremiumBlerpCheckoutMo
 var PremiumCollectionCheckoutModal = require('./PurchaseModals/PremiumCollectionCheckoutModal.js');
 var PremiumSubscriptionCheckoutModal = require('./PurchaseModals/PremiumSubscriptionCheckoutModal.js');
 
-const Theme = Theme$1['default'];
-const Box = material.Box;
-const Container = material.Container;
-const Grid = material.Grid;
-const Stack = material.Stack;
-const ImageList = material.ImageList;
-const Autocomplete = material.Autocomplete;
-const Button = material.Button;
-const ButtonGroup = material.ButtonGroup;
-const Checkbox = material.Checkbox;
-const FloatingActionButton = material.Fab;
-const RadioButton = material.Radio;
-const Rating = material.Rating;
-const Select = material.Select;
-const Slider = material.Slider;
-const Switch = material.Switch;
-const Input = material.TextField;
-const BottomNavigation = material.BottomNavigation;
-const Breadcrumbs = material.Breadcrumbs;
-const Drawer = material.Drawer;
-const Link = material.Link;
-const Menu = material.Menu;
-const Pagination = material.Pagination;
-const SpeedDial = material.SpeedDial;
-const Stepper = material.Stepper;
-const Tabs = material.Tabs;
-const Tab = material.Tab;
-const Accordion = material.Accordion;
-const AppBar = material.AppBar;
-const Card = material.Card;
-const Paper = material.Paper;
-const Alert = material.Alert;
-const Backdrop = material.Backdrop;
-const Dialog = material.Dialog;
-const LinearProgress = material.LinearProgress;
-const Skeleton = material.Skeleton;
-const Snackbar = material.Snackbar;
-const Avatar = material.Avatar;
-const Badge = material.Badge;
-const Chip = material.Chip;
-const Divider = material.Divider;
-const List = material.List;
-const Table = material.Table;
-const Tooltip = material.Tooltip;
-const Toolbar = material.Toolbar;
-const Text = material.Typography;
-const Modal = material.Modal;
-const Popover = material.Popover;
+// import {
+const Theme = Theme$1["default"];
+const AccordionSummary = Layout.AccordionSummary;
+const AccordionDetails = Layout.AccordionDetails;
+const AccordionActions = Layout.AccordionActions;
+const Box = Box$1.Box;
+const Container = Container$1.Container;
+const Grid = Grid$1.Grid;
+const Stack = Stack$1.Stack;
+const ImageList = Layout.ImageList;
+const Autocomplete = Autocomplete$1.Autocomplete;
+const Button = Button$1.Button;
+const ButtonGroup = Layout.ButtonGroup;
+const Checkbox = FormControls.Checkbox;
+const FloatingActionButton = Fab.Fab;
+const RadioButton = FormControls.Radio;
+const Rating = FormControls.Rating;
+const Select = FormControls.Select;
+const Slider = FormControls.Slider;
+const Switch = FormControls.Switch;
+const Input = Input$1.TextField;
+const BottomNavigation = BottomNavigation$1.BottomNavigation;
+const Breadcrumbs = Layout.Breadcrumbs;
+const Drawer = Navigation.Drawer;
+const Link = Misc.Link;
+const Menu = Navigation.Menu;
+const Pagination = Layout.Pagination;
+const SpeedDial = Fab.SpeedDial;
+const Stepper = Stepper$1.Stepper;
+const Tabs = Navigation.Tabs;
+const Tab = Navigation.Tab;
+const Accordion = Layout.Accordion;
+const AppBar = Layout.AppBar;
+const Card = Paper$1.Card;
+const Paper = Paper$1.Paper;
+const Alert = Navigation.Alert;
+const Backdrop = Dialog$1.Backdrop;
+const Dialog = Dialog$1.Dialog;
+const LinearProgress = Misc.LinearProgress;
+const Skeleton = Misc.Skeleton;
+const Snackbar = Navigation.Snackbar;
+const Avatar = Misc.Avatar;
+const Badge = Misc.Badge;
+const Chip = Misc.Chip;
+const Divider = Misc.Divider;
+const List = Layout.List;
+const Table = Layout.Table;
+const CircularProgress = CircularProgress$1.CircularProgress;
+const Tooltip = Misc.Tooltip;
+const Toolbar = Layout.Toolbar;
+const Text = Text$1.Typography;
+const Modal = Dialog$1.Modal;
+const Popover = Navigation.Popover;
 const Blerp = Blerp$1.Blerp;
 const NewBlerp = NewBlerp$1.NewBlerp;
 const NewBlerpTest = NewBlerpTest$1.NewBlerpTest;
@@ -86,11 +116,11 @@ const GroupCard = GroupCard$1.GroupCard;
 const UserCard = UserCard$1.UserCard;
 const UsernameWithPopout = UsernameWithPopout$1.UsernameWithPopout;
 const BlerpAudioContextProvider = BlerpAudioContextProvider$1.BlerpAudioContextProvider;
-const IconButton = material.IconButton;
+const IconButton = IconButton$1.IconButton;
 const Toggle = Toggle$1.Toggle;
 const Dropdown = Dropdown$1.Dropdown;
 const NewDropdown = Dropdown$1.NewDropdown;
-const MenuItem = material.MenuItem;
+const MenuItem = Navigation.MenuItem;
 const NewCollectionModal = NewCollectionModal$1.NewCollectionModal;
 const CollectionCard = CollectionCard$1.CollectionCard;
 const BlerpListView = BlerpListView$1.BlerpListView;
@@ -99,13 +129,13 @@ const BlerpListViewPremium = BlerpListViewPremium$1.BlerpListViewPremium;
 const BlerpSkeleton = BlerpSkeleton$1.BlerpSkeleton;
 const BlerpListViewSkeleton = BlerpListViewSkeleton$1.BlerpListViewSkeleton;
 const CollectionSkeleton = CollectionSkeleton$1.CollectionSkeleton;
-const InputAdornment = material.InputAdornment;
-const createTheme = material.createTheme;
-const ThemeProvider = material.ThemeProvider;
-const AlertTitle = material.AlertTitle;
-const SvgIcon = material.SvgIcon;
-const FormControl = material.FormControl;
-const InputLabel = material.InputLabel; // export const BlerpContextMenu = MBlerpContextMenu;
+const InputAdornment = Input$1.InputAdornment;
+const createTheme = createTheme$1.createTheme;
+const ThemeProvider = ThemeProvider$1.ThemeProvider;
+const AlertTitle = Navigation.AlertTitle;
+const SvgIcon = Layout.SvgIcon;
+const FormControl = Layout.FormControl;
+const InputLabel = Layout.InputLabel; // export const BlerpContextMenu = MBlerpContextMenu;
 // export const ListItem = MListItem;
 // // export const ListItemText = MListItemText;
 // export const ListItemButtonText = MListItemButtonText;
@@ -381,6 +411,9 @@ exports.PremiumBlerpCheckoutModal = PremiumBlerpCheckoutModal;
 exports.PremiumCollectionCheckoutModal = PremiumCollectionCheckoutModal;
 exports.PremiumSubscriptionCheckoutModal = PremiumSubscriptionCheckoutModal;
 exports.Accordion = Accordion;
+exports.AccordionActions = AccordionActions;
+exports.AccordionDetails = AccordionDetails;
+exports.AccordionSummary = AccordionSummary;
 exports.Alert = Alert;
 exports.AlertTitle = AlertTitle;
 exports.AppBar = AppBar;
@@ -402,6 +435,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
+exports.CircularProgress = CircularProgress;
 exports.CollectionCard = CollectionCard;
 exports.CollectionListViewPremium = CollectionListViewPremium;
 exports.CollectionSkeleton = CollectionSkeleton;

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

@@ -0,0 +1,280 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var withSx = require('./withSx.js');
+var Input = require('./Input.js');
+var Paper = require('./Paper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"](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; }
+/**
+ * Autocomplete - combo box with filtering
+ */
+
+const AutocompleteBase = /*#__PURE__*/React__default["default"].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.Paper,
+    PopperComponent,
+    popupIcon,
+    readOnly = false,
+    selectOnFocus = false,
+    size = "medium",
+    clearIcon,
+    forcePopupIcon = "auto",
+    placeholder,
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [internalInputValue, setInternalInputValue] = React.useState("");
+  const [internalValue, setInternalValue] = React.useState(multiple ? defaultValue || [] : defaultValue || null);
+  const inputRef = React.useRef(null);
+  const listboxRef = React.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
+
+
+  React.useEffect(() => {
+    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__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), renderInput ? renderInput(_objectSpread(_objectSpread({}, inputProps), {}, {
+    InputProps: {
+      endAdornment: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showClearButton && /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: handleClear,
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 4
+        }
+      }, clearIcon || "×"), forcePopupIcon !== false && /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: () => open ? handleClose() : handleOpen(),
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 4,
+          transform: open ? "rotate(180deg)" : "none"
+        }
+      }, popupIcon || "▼"))
+    }
+  })) : /*#__PURE__*/React__default["default"].createElement(Input.TextField, inputProps), open && /*#__PURE__*/React__default["default"].createElement(PaperComponent, {
+    style: listboxStyle
+  }, /*#__PURE__*/React__default["default"].createElement(ListboxComponent, _extends__default["default"]({
+    ref: listboxRef
+  }, ListboxProps), loading ? /*#__PURE__*/React__default["default"].createElement("li", {
+    style: {
+      padding: "8px 16px",
+      color: "#757575"
+    }
+  }, loadingText) : filteredOptions.length === 0 ? /*#__PURE__*/React__default["default"].createElement("li", {
+    style: {
+      padding: "8px 16px",
+      color: "#757575"
+    }
+  }, noOptionsText) : groupedOptions ? Object.entries(groupedOptions).map(_ref3 => {
+    let [group, groupOptions] = _ref3;
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      key: group
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        padding: "8px 16px",
+        fontWeight: 600,
+        backgroundColor: "#F5F5F5"
+      }
+    }, group), /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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.withSx(AutocompleteBase);
+
+exports.Autocomplete = Autocomplete;

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

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var withSx = require('./withSx.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"](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__default["default"].forwardRef((_ref, ref) => {
+  let {
+    children,
+    value,
+    onChange,
+    showLabels = false,
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_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__default["default"].createElement("div", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].isValidElement(child) ? /*#__PURE__*/React__default["default"].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.withSx(BottomNavigationBase);
+/**
+ * BottomNavigationAction - individual action in BottomNavigation
+ */
+
+const BottomNavigationActionBase = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    icon,
+    label,
+    value,
+    selected = false,
+    showLabel = false,
+    onChange,
+    className,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties__default["default"](_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__default["default"].createElement("button", _extends__default["default"]({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    onClick: onChange
+  }, props), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: iconStyle
+  }, icon), (showLabel || selected) && /*#__PURE__*/React__default["default"].createElement("span", {
+    style: labelStyle
+  }, label));
+});
+BottomNavigationActionBase.displayName = "BottomNavigationAction";
+withSx.withSx(BottomNavigationActionBase);
+
+exports.BottomNavigation = BottomNavigation;

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var withSx = require('./withSx.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"](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__default["default"].forwardRef((_ref, ref) => {
+  let {
+    component: Component = 'div',
+    children,
+    sx
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+    ref: ref
+  }, props, {
+    sx: _objectSpread({
+      padding: '16px'
+    }, sx)
+  }), children);
+});
+BaseBox.displayName = 'BaseBox';
+const Box = withSx.withSx(BaseBox);
+
+exports.Box = Box;
+exports["default"] = Box;